/* ATELIER — interactief prototype · crème + diepe steuntint (aubergine/bos) + goud
   Cormorant (display) · Mulish (body) · DM Mono (labels) */

:root{
  --cream:#faf6ee; --cream-2:#f2ebdd;
  --ink:#241c18; --ink-2:#4a4038; --ink-soft:#7a6f63;
  --gold:#c7a559; --gold-deep:#a8842c; --gold-soft:#d8c089;
  --line:rgba(36,28,24,.12);
  --tone:#3a1f2e; --tone-soft:#52334465;
  --serif:"Cormorant",Georgia,serif; --sans:"Mulish",system-ui,sans-serif; --mono:"DM Mono",monospace;
  --r:16px;
}
body[data-tone="forest"]{--tone:#233b2e;--tone-soft:#35513f65}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#e9e2d4;color:var(--ink);font:400 16.5px/1.65 var(--sans)}
img{max-width:100%;display:block;height:auto}
a{color:var(--gold-deep)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--ink)}
h2{font-size:clamp(30px,4cqw,44px)}
h3{font-size:23px}
.ic{width:18px;height:18px;flex:none}
.wrap{width:min(1120px,92cqw);margin:0 auto}
.section-pad{padding:76px 0}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.center{text-align:center}
.lede{font-size:18px;color:var(--ink-2);line-height:1.7}
.cover{width:100%;height:100%;object-fit:cover}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.ph-pill{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-soft);
  border:1.5px dashed var(--gold-soft);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.5)}

/* linen texture */
.linen{background-color:var(--cream);background-image:
  repeating-linear-gradient(0deg,rgba(36,28,24,.022) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(36,28,24,.022) 0 1px,transparent 1px 3px)}

/* ============ PROTOTYPE CHROME ============ */
.proto-bar{position:sticky;top:0;z-index:300;display:flex;align-items:center;gap:14px;
  background:#1b1410;color:#cfc4b4;padding:10px 18px;font:600 13px var(--sans)}
.proto-bar .brand{font:500 12px var(--mono);letter-spacing:.12em;color:var(--gold-soft);white-space:nowrap}
.proto-spacer{flex:1}
.proto-tabs{display:flex;gap:4px;background:rgba(255,255,255,.07);border-radius:999px;padding:4px}
.proto-tab{font:700 12.5px var(--sans);color:#cfc4b4;background:none;border:0;border-radius:999px;
  padding:7px 16px;cursor:pointer;transition:all .15s}
.proto-tab:hover{color:#fff}
.proto-tab[aria-current="true"]{background:var(--gold);color:#241c18}
.proto-seg{display:flex;gap:2px;background:rgba(255,255,255,.07);border-radius:999px;padding:3px}
.proto-seg button{font:700 12px var(--sans);color:#cfc4b4;background:none;border:0;border-radius:999px;
  padding:6px 13px;cursor:pointer;transition:all .15s}
.proto-seg button[aria-pressed="true"]{background:#fff;color:#241c18}

/* gold thread scroll progress: wavy thread that draws itself with scroll, gold bead at the tip */
.thread-rail{position:fixed;left:4px;top:64px;bottom:18px;width:64px;z-index:250;pointer-events:none}
.thread-rail svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(27,20,16,.28))}
.thread-rail .track{fill:none;stroke:var(--gold-deep);stroke-opacity:.13;stroke-width:4.5;stroke-linecap:round}
.thread-rail .thread{fill:none;stroke:var(--gold-deep);stroke-width:4.5;stroke-linecap:round}
.thread-rail .bead{fill:var(--gold);stroke:var(--gold-deep);stroke-width:1.5}
@media(max-width:900px){.thread-rail{display:none}}

/* stage: desktop vs mobile frame */
.stage{padding:26px 14px 60px}
.site{max-width:1440px;margin:0 auto;background:var(--cream);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(27,20,16,.25);container-type:inline-size;container-name:site;position:relative}
body.view-mobile .site{max-width:414px;border-radius:38px;border:10px solid #1b1410;box-shadow:0 30px 80px rgba(27,20,16,.45)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:26px;
  padding:12px 4cqw;background:rgba(250,246,238,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .logo{height:46px;width:auto}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{font:700 14px var(--sans);color:var(--ink);text-decoration:none;padding:8px 2px;border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--gold-deep)}
.nav a.active{color:var(--gold-deep);border-bottom-color:var(--gold)}
.header-cta{white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;margin-left:auto}
#mobileMenu{display:none}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:800 14.5px var(--sans);
  padding:13px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:all .15s;line-height:1}
.btn--gold{background:var(--gold);color:#241c18;box-shadow:0 3px 16px rgba(199,165,89,.4)}
.btn--gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.btn--on-dark{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.btn--on-dark:hover{background:rgba(255,255,255,.22)}

/* ============ HERO ============ */
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,12,16,.35),rgba(20,12,16,.15) 40%,rgba(20,12,16,.55)),
  linear-gradient(100deg,var(--tone) 0%,var(--tone-soft) 46%,transparent 78%)}
.hero-inner{position:relative;z-index:2;width:min(1120px,92cqw);margin:0 auto;padding:90px 0;max-width:680px;
  margin-left:max(4cqw,calc((100cqw - 1120px)/2))}
.hero-inner .eyebrow{color:var(--gold-soft)}
.hero h1{color:#fff;font-size:clamp(38px,5.4cqw,62px);margin:16px 0 6px;text-wrap:balance}
.flourish{width:220px;height:28px;margin:4px 0 14px}
.flourish path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 8}
.flourish circle{fill:var(--gold)}
.hero .lede{color:#f0e8da;max-width:54ch;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.trust-line{display:flex;align-items:center;gap:14px;margin-top:26px;font:500 12.5px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.trust-line .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* ============ SERVICES ============ */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:44px}
.card{background:#fffdf8;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s;grid-column:span 4}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(36,28,24,.12)}
.card.feature{grid-column:span 6;padding:0;overflow:hidden}
.card.feature .card-media{height:280px;overflow:hidden}
.card.feature .num,.card.feature h3,.card.feature p,.card.feature .more{margin-left:28px;margin-right:28px}
.card.feature .num{margin-top:22px}
.card.feature .more{margin-bottom:26px}
.card .num{font:500 12px var(--mono);letter-spacing:.18em;color:var(--gold-deep)}
.card p{color:var(--ink-soft);font-size:15px;flex:1}
.more{display:inline-flex;align-items:center;gap:8px;font:800 14px var(--sans);color:var(--gold-deep);text-decoration:none;margin-top:6px}
a.more:hover{gap:12px}
.more .ic{transition:transform .15s}

/* stitched divider */
.stitch{width:100%;height:14px;display:block}
.stitch line{stroke:var(--gold-soft);stroke-width:2;stroke-dasharray:3 10;stroke-linecap:round}

/* ============ PILLARS ============ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold-deep);background:rgba(199,165,89,.08);flex:none}
.mark .ic{width:22px;height:22px}
.pillar p{color:var(--ink-soft);font-size:15px;max-width:30ch}

/* ============ REVIEWS ============ */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.review{background:#fffdf8;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px}
.stars{display:flex;gap:3px;color:var(--gold)}
.stars .ic{width:15px;height:15px}
.quote{font-family:var(--serif);font-size:19.5px;font-weight:500;line-height:1.45;color:var(--ink)}
.who{font:600 13px var(--sans);color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ============ LOCAL ============ */
.local{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:stretch}
.local-info{background:#fffdf8;border:1px solid var(--line);border-radius:var(--r);padding:32px;
  display:flex;flex-direction:column;gap:22px}
.nap-row{display:flex;gap:16px;align-items:flex-start}
.nap-row .label{font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.nap-row .val{font:700 16.5px var(--sans);color:var(--ink);text-decoration:none}
.hours-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.hours-row.closed{color:var(--ink-soft)}
.map{border-radius:var(--r);overflow:hidden;min-height:380px;border:1px solid var(--line)}

/* ============ CTA BAND ============ */
.cta-band{position:relative;background:var(--tone);color:#fff;overflow:hidden;padding:64px 0;transition:background .3s}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4cqw,38px)}
.cta-band p{color:rgba(255,255,255,.75);margin-top:6px}
.thread-deco{position:absolute;inset:auto 0 0 0;width:100%;height:140px;opacity:.5}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--line);padding-top:54px}
.site-footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding-bottom:42px}
.site-footer .logo{height:52px;width:auto;margin-bottom:14px}
.foot-col p{color:var(--ink-soft);font-size:14.5px}
.foot-col h4{font:800 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.foot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:4px 0}
.foot-col a:hover{color:var(--gold-deep)}
.foot-bottom{border-top:1px solid var(--line);padding:16px 0}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:500 11.5px var(--mono);letter-spacing:.1em;color:var(--ink-soft)}

/* ============ MOBILE STICKY CTA ============ */
.mobile-cta{display:none}

/* ============ MODAL ============ */
.modal-backdrop{position:fixed;inset:0;z-index:400;background:rgba(27,20,16,.55);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s}
.modal-backdrop.open{opacity:1;pointer-events:auto}
.modal{background:var(--cream);border-radius:20px;width:min(460px,100%);max-height:90vh;overflow:auto;
  box-shadow:0 30px 80px rgba(27,20,16,.5);transform:translateY(14px) scale(.98);transition:transform .22s}
.modal-backdrop.open .modal{transform:none}
.modal-top{position:relative;padding:26px 28px 4px}
.modal-top h3{font-size:28px;margin-top:8px}
.modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:#fffdf8;font-size:22px;line-height:1;color:var(--ink-2);cursor:pointer;transition:all .15s}
.modal-close:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.modal-body{padding:18px 28px 28px}
.modal-body label{display:block;font:800 12.5px var(--sans);letter-spacing:.04em;margin-bottom:6px;color:var(--ink-2)}
.modal-body input,.modal-body select{width:100%;font:600 15px var(--sans);color:var(--ink);
  background:#fffdf8;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;transition:border .15s}
.modal-body input:focus,.modal-body select:focus{border-color:var(--gold)}
.modal-or{text-align:center;font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:12px}
.modal-or::before,.modal-or::after{content:"";flex:1;border-top:1px dashed var(--line)}
.modal-call{display:flex;align-items:center;justify-content:center;gap:10px;font:800 15px var(--sans);
  color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:12px}
.modal-call:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.modal-note{font-size:12.5px;color:var(--ink-soft);text-align:center}

/* ============ FAQ ============ */
.faq{max-width:760px;margin:40px auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;
  background:none;border:0;cursor:pointer;font:600 19px/1.35 var(--serif);color:var(--ink);padding:22px 2px}
.faq-q:hover{color:var(--gold-deep)}
.plus{position:relative;width:18px;height:18px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--gold-deep);border-radius:2px;transition:transform .2s}
.plus::before{inset:8px 0;}
.plus::after{inset:0 8px}
.faq-item.open .plus::after{transform:scaleY(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;color:var(--ink-2);font-size:15.5px;padding:0 2px;line-height:1.7}
.faq-item.open .faq-a-inner{padding-bottom:24px}

/* ============ STEPS (bridal) ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.step{position:relative;background:#fffdf8;border:1px solid var(--line);border-radius:var(--r);
  padding:30px;display:flex;flex-direction:column;gap:10px}
.step .step-no{position:absolute;top:18px;right:24px;font-family:var(--serif);font-size:54px;font-weight:600;
  color:var(--gold-soft);opacity:.55;line-height:1}
.step p{color:var(--ink-soft);font-size:15px}

/* ============ BRIDAL SPLIT ============ */
.bridal-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}
.bridal-figure{border-radius:var(--r);overflow:hidden;min-height:460px;border:1px solid var(--line)}
.bridal-notes{display:flex;flex-direction:column;gap:20px}
.note-card{background:#fffdf8;border:1px solid var(--line);border-radius:var(--r);padding:30px;
  display:flex;flex-direction:column;gap:14px;flex:1}
.note-card h3{display:flex;align-items:center;gap:14px;font-size:24px}
.note-card.accent{background:var(--tone);border:none;color:#f4ecdf;transition:background .3s}
.note-card.accent h3{color:#fff}
.note-card.accent .mark{border-color:var(--gold);background:rgba(199,165,89,.16);color:var(--gold)}
.note-card.accent p{color:#d8ccc0}
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;align-items:center;gap:12px;font-weight:600}
.checklist .ic{color:var(--gold);width:17px;height:17px}
.callout{display:flex;align-items:center;gap:12px;background:rgba(199,165,89,.12);border:1px dashed var(--gold-soft);
  border-radius:12px;padding:14px 16px;font-weight:700;font-size:14.5px}
.callout .ic{color:var(--gold-deep)}

/* ============ PAGES (SPA) ============ */
.page{display:none}
.page.active{display:block;animation:pageIn .3s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ RESPONSIVE (container queries — react to stage width) ============ */
@container site (max-width:920px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .card,.card.feature{grid-column:span 1}
  .pillars,.reviews,.steps{grid-template-columns:1fr;gap:22px}
  .local,.bridal-split{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr;gap:26px}
}
@container site (max-width:700px){
  .nav,.header-cta{display:none}
  .nav-toggle{display:inline-flex}
  #mobileMenu.open{display:flex;flex-direction:column;gap:4px;position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid var(--line);padding:18px 5cqw 22px;box-shadow:0 18px 40px rgba(27,20,16,.15)}
  #mobileMenu a{font:700 16px var(--sans);color:var(--ink);text-decoration:none;padding:11px 2px}
  #mobileMenu .btn{margin-top:10px;justify-content:center}
  .svc-grid{grid-template-columns:1fr}
  .hero{min-height:520px}
  .hero-inner{padding:70px 0 110px;margin-left:5cqw;width:90cqw}
  .hero h1{font-size:clamp(32px,9cqw,42px)}
  .section-pad{padding:54px 0}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .mobile-cta{display:flex;gap:10px;position:sticky;bottom:14px;z-index:95;width:min(92cqw,420px);margin:-70px auto 18px}
  .mobile-cta .btn{flex:1;justify-content:center;box-shadow:0 10px 30px rgba(27,20,16,.3)}
  .mobile-cta .call{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;flex:none;
    border-radius:50%;background:var(--tone);color:#fff;box-shadow:0 10px 30px rgba(27,20,16,.3)}
}

/* mobile-cta lives outside .site, so mirror it on body view */
body.view-mobile .mobile-cta{display:flex;gap:10px;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:380;width:min(92vw,392px)}
body.view-mobile .mobile-cta .btn{flex:1;justify-content:center;box-shadow:0 10px 30px rgba(27,20,16,.35)}
body.view-mobile .mobile-cta .call{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  flex:none;border-radius:50%;background:var(--tone);color:#fff;box-shadow:0 10px 30px rgba(27,20,16,.35)}

@media(max-width:760px){
  .proto-bar{flex-wrap:wrap}
  .proto-bar .brand{display:none}
  .stage{padding:14px 8px 50px}
}