/* Vega's Tailor Shop — demo concept site (SMPL spec-build Phase 3).
   Warm ivory/rosewood light-primary register, Fraunces + Inter, bridal-forward.
   Static, mobile-first, fluid clamp() type, reduced-motion honored, zero horizontal overflow. */

:root {
  --ivory:#F8F3EC; --linen:#EFE7DA; --card:#FFFFFF;
  --ink:#2A231D; --cocoa:#3C3128;
  --rose:#9C5A63; --rose2:#B87680; --gold:#C6A96A; --muted:#7A6E60;
  --line-l:rgba(42,35,29,.12); --line-d:rgba(255,255,255,.14);
  --wrap:72rem; --gut:clamp(1.15rem,4vw,2.5rem);
  --f-disp:"Fraunces",Georgia,serif; --f-body:"Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--ivory);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:46rem}
.center{text-align:center}
.center-lede{margin-inline:auto}
.accent{color:var(--rose);font-style:italic}

/* ---- type ---- */
.eyebrow{font-family:var(--f-body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.h2{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.75rem,1.2rem+2.4vw,2.625rem);line-height:1.08;margin-top:.6rem;color:var(--ink)}
.lede{font-size:clamp(1rem,.96rem+.3vw,1.15rem);color:var(--muted);max-width:40rem;margin-top:1rem}
.body{font-size:1.08rem;margin-top:1rem}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;padding:.9rem 1.6rem;border-radius:2px;transition:background .2s,color .2s,border-color .2s;cursor:pointer;border:1px solid transparent}
.btn--rose{background:var(--rose);color:var(--ivory)}
.btn--rose:hover{background:var(--rose2)}
.btn--ghost{border-color:var(--line-l);color:var(--ink)}
.btn--ghost:hover{border-color:var(--rose);color:var(--rose)}
.btn--lg{padding:1.05rem 2.1rem;font-size:.85rem}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(248,243,236,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-l);transition:background .24s}
.nav[data-nav-state="solid"]{background:var(--ivory)}
.nav__inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:.95rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__brand{min-width:0}
.nav__word{font-family:var(--f-disp);font-weight:600;font-size:1.15rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__links{display:none;list-style:none;gap:1.7rem}
.nav__links a{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav__links a:hover{color:var(--rose)}
.nav__cta{padding:.62rem 1.15rem;font-size:.72rem}

/* ---- hero ---- */
.hero{position:relative;background:
  radial-gradient(110% 90% at 85% 0%,rgba(156,90,99,.10),transparent 55%),
  linear-gradient(180deg,var(--ivory),var(--linen));
  border-bottom:1px solid var(--line-l)}
.hero__inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(3.5rem,9vw,6.5rem) var(--gut) clamp(3rem,7vw,5rem)}
.hero__title{font-family:var(--f-disp);font-weight:500;font-size:clamp(2.4rem,1.3rem+5.4vw,4.5rem);line-height:1.02;margin-top:1rem;max-width:18ch}
.hero__sub{font-size:clamp(1.05rem,1rem+.5vw,1.3rem);color:var(--muted);margin-top:1.4rem;max-width:36rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}

/* ---- trust band ---- */
.trust{background:var(--cocoa);color:var(--ivory)}
.trust__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;align-items:center;padding-block:1.25rem;text-align:center}
.trust__item{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#E9DFD2}
.trust__item strong{font-family:var(--f-disp);font-size:1.15rem;color:var(--gold);font-weight:600;margin-right:.15rem}

/* ---- sections ---- */
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.linen{background:var(--linen)}
.cocoa{background:var(--cocoa);color:var(--ivory)}
.cocoa .h2{color:var(--ivory)}
.cocoa .eyebrow{color:var(--gold)}

/* ---- gallery ---- */
.gallery__grid{margin-top:2.25rem;display:grid;grid-template-columns:1fr;gap:.9rem}
.gallery__tile{position:relative;overflow:hidden;border-radius:3px;border:1px solid var(--line-l);aspect-ratio:3/4;cursor:pointer;background:var(--card)}
.gallery__tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery__tile:hover img{transform:scale(1.04)}
.gallery__empty{margin-top:2.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;text-align:center;padding:clamp(2.5rem,7vw,4.5rem) 1.5rem;border:1px dashed rgba(198,169,106,.55);border-radius:5px;background:var(--card)}
.gallery__empty-mark{width:2.75rem;height:2.75rem;border:1px solid var(--gold);border-radius:50%;position:relative;flex:none}
.gallery__empty-mark::before,.gallery__empty-mark::after{content:"";position:absolute;background:var(--rose);opacity:.7}
.gallery__empty-mark::before{left:50%;top:22%;width:1px;height:56%;transform:translateX(-50%)}
.gallery__empty-mark::after{top:50%;left:22%;height:1px;width:56%;transform:translateY(-50%)}
.gallery__empty-line{max-width:34rem;color:var(--muted);font-size:1.02rem}

/* ---- service cards ---- */
.svc-cols{margin-top:2.25rem;display:grid;grid-template-columns:1fr;gap:1.1rem}
.svc-card{background:var(--card);border:1px solid var(--line-l);border-radius:4px;padding:1.6rem 1.5rem}
.svc-card--feature{border-color:rgba(156,90,99,.4);box-shadow:0 1px 0 var(--rose) inset}
.svc-card__title{font-family:var(--f-disp);font-weight:500;font-size:1.35rem;color:var(--ink)}
.svc-card__tag{font-family:var(--f-body);font-style:italic;font-size:.8rem;color:var(--rose);text-transform:none;letter-spacing:0;margin-left:.4rem}
.svc-list{list-style:none;margin-top:1rem}
.svc-list li{position:relative;padding-left:1.1rem;margin-bottom:.5rem;font-size:.98rem;color:var(--muted)}
.svc-list li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;background:var(--gold);border-radius:50%}
.svc-note{margin-top:1.75rem;font-size:.95rem;color:var(--muted);font-style:italic}

/* ---- pricing ---- */
.pricing .btn{margin-top:1.75rem}

/* ---- quote form ---- */
.qform{margin-top:2rem;background:var(--card);border:1px solid var(--line-l);border-radius:6px;padding:clamp(1.5rem,4vw,2.5rem)}
.qform__field{margin-bottom:1.15rem}
.qform__field label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:.4rem}
.qform__opt{font-weight:400;color:var(--muted);font-style:italic}
.qform input,.qform select,.qform textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--ivory);border:1px solid var(--line-l);border-radius:3px;padding:.7rem .8rem}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--rose)}
.qform__grid{display:grid;grid-template-columns:1fr;gap:0}
.qform__done{margin-top:1.1rem;padding:.9rem 1rem;background:rgba(156,90,99,.08);border-left:3px solid var(--rose);color:var(--ink);font-size:.95rem}
.qform__done a{color:var(--rose);font-weight:600}

/* ---- footer ---- */
.footer{background:var(--cocoa);color:var(--ivory);padding-top:clamp(3rem,6vw,4rem)}
.footer__inner{display:flex;flex-direction:column;gap:2rem}
.footer__brand .nav__word{color:var(--ivory)}
.footer__tag{margin-top:.6rem;color:#C9BCAD;font-size:.9rem}
.footer__nap p,.footer__hours p{color:#D9CDBE;font-size:.95rem;line-height:1.7}
.footer__nap a:hover{color:var(--rose2)}
.footer__hours-title{color:var(--ivory);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;margin-bottom:.5rem}
.hours{border-collapse:collapse;font-size:.9rem}
.hours td{padding:.2rem 1.5rem .2rem 0;color:#C9BCAD}
.hours td:last-child{color:var(--ivory)}
.footer__hours-note{margin-top:.7rem;font-size:.8rem;color:#B7A997;font-style:italic}
.footer__legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:6rem}
.footer__legal p{color:#B7A997;font-size:.8rem}
.mobar__quote-inline{color:var(--gold);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}

/* ---- mobile action bar ---- */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--card);border-top:1px solid var(--line-l);box-shadow:0 -2px 12px rgba(42,35,29,.08)}
.mobar a{flex:1;text-align:center;padding:.95rem;font-weight:600;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}
.mobar__call{color:var(--ink);border-right:1px solid var(--line-l)}
.mobar__quote{background:var(--rose);color:var(--ivory)}

/* ---- reveal — TRANSLATE-ONLY (never opacity) so content is fully visible in any static
   capture / no-JS / crawler render (defeats the static-capture render void; OTB lesson). ---- */
[data-reveal]{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-reveal].reveal-init{transform:translateY(14px)}
  [data-reveal].reveal-in{transform:none;transition:transform .55s ease}
}

/* ============ RESPONSIVE ============ */
@media (min-width:600px){
  .gallery__grid{grid-template-columns:1fr 1fr}
  .qform__grid{grid-template-columns:1fr 1fr 1fr;gap:1rem}
}
@media (min-width:850px){
  .nav__links{display:flex}
  .mobar{display:none}
  .footer__legal{padding-bottom:1.5rem}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .svc-cols{grid-template-columns:repeat(3,1fr)}
  .footer__inner{flex-direction:row;justify-content:space-between}
}