/*
Theme Name: Spotlight Style 2026
Theme URI: https://spotlightstyle.com
Author: Spotlight Style
Description: Luxury interior design-build one-page theme for Spotlight Style (Houston). Ported faithfully from the approved Claude Design layout. DM Sans now; TTFors swap-ready.
Version: 2.20.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: spotlight-style
*/

/* ===== TT Fors — self-hosted brand font =============================
   NOTE: these are TRIAL files, for STAGING PREVIEW ONLY. Before go-live,
   replace the files in /assets/fonts/ with your PURCHASED TT Fors web
   licence (keep the same filenames) — nothing else needs to change.
   =================================================================== */
@font-face{font-family:'TTFors';src:url('assets/fonts/TT_Fors_Trial_Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'TTFors';src:url('assets/fonts/TT_Fors_Trial_Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TTFors';src:url('assets/fonts/TT_Fors_Trial_Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'TTFors';src:url('assets/fonts/TT_Fors_Trial_DemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'TTFors';src:url('assets/fonts/TT_Fors_Trial_Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'TTFors';src:url('assets/fonts/TT_Fors_Trial_ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Brittany Signature';src:url('assets/fonts/Brittany_Signature.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}



  :root{

    --charcoal:#2E2E2E; --graphite:#3A3733; --stone-700:#57524B;
    --stone-500:#837C72; --greige:#A79F93; --concrete-300:#C9C2B6;
    --concrete-200:#E0DAD0; --linen:#EFEBE3; --white:#F8F8F6;
    --ink:var(--charcoal); --paper:var(--white);
    --rule:rgba(46,46,46,.14); --rule-light:rgba(248,248,246,.20);
    --maxw:1426px; --gutter:clamp(20px,5vw,68px);
    --font:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-family:var(--font);background:var(--paper);color:var(--ink);
    font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;overflow-x:hidden;}

  .eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--stone-500)}
  h1,h2,h3{font-weight:300;line-height:1.08;letter-spacing:-.01em}
  .display{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;letter-spacing:-.02em;font-weight:300}
  h2{font-size:clamp(1.9rem,4vw,3rem)}
  h3{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:500;letter-spacing:0}
  p{max-width:64ch}
  a{color:inherit}
  .lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--stone-700);font-weight:300;line-height:1.6}
  .container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

  .btn{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;padding:1.05em 1.9em;border:1px solid var(--ink);
    text-decoration:none;background:var(--ink);color:var(--white);cursor:pointer;
    transition:background .35s ease,color .35s ease}
  .btn:hover{background:transparent;color:var(--ink)}
  .btn--light{background:var(--white);color:var(--ink);border-color:var(--white)}
  .btn--light:hover{background:transparent;color:var(--white)}
  .btn .arrow{transition:transform .35s ease}
  .btn:hover .arrow{transform:translateX(4px)}
  .textlink{font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.3em;transition:border-color .35s}
  .textlink:hover{border-color:currentColor}

  /* NAV */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
    justify-content:flex-start;padding:1.5rem var(--gutter);transition:background .4s,padding .4s,box-shadow .4s}
  header.nav.scrolled{background:rgba(248,248,246,.9);backdrop-filter:blur(10px);
    padding-top:1rem;padding-bottom:1rem;box-shadow:0 1px 0 var(--rule)}
  .wordmark{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink)}
  .wordmark .rule{width:24px;height:1px;background:currentColor;opacity:.5}
  .wordmark .name{font-size:.9rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
  nav.links{display:flex;align-items:center;gap:2.1rem}
  nav.links a:not(.btn){text-decoration:none;font-size:.76rem;font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink);opacity:.72;transition:opacity .3s}
  nav.links a:not(.btn):hover{opacity:1}
  nav.links .btn{padding:.8em 1.5em}
  .nav-toggle{display:flex;background:none;border:0;cursor:pointer;color:var(--ink);flex-direction:column;gap:5px;padding:6px}
  .nav-toggle span{width:24px;height:1.5px;background:currentColor;display:block;transition:.3s}
  .nav-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,transform .4s ease,visibility .4s ease}
  .nav-logo img{height:40px;width:auto;display:block}
  header.nav.scrolled .nav-logo{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%)}
  header.nav:not(.scrolled) .wordmark,
  header.nav:not(.scrolled) nav.links a:not(.btn){color:var(--white)}
  header.nav:not(.scrolled) .nav-toggle{color:var(--white)}
  header.nav:not(.scrolled) nav.links .btn{background:var(--white);color:var(--ink);border-color:var(--white)}
  header.nav:not(.scrolled) nav.links .btn:hover{background:transparent;color:var(--white)}

  /* HERO — cinematic auto-cycling photography */
  .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
    justify-content:center;align-items:center;text-align:center;color:var(--white);overflow:hidden;background:var(--graphite)}
  .hero .slides{position:absolute;inset:0;z-index:0}
  .hero .slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transform:scale(1.05);transition:opacity 1.6s ease;will-change:opacity,transform}
  .hero .slides .slide.active{opacity:1;animation:kenburnsA 8s ease-out forwards}
  .hero .slides .slide.active:nth-child(2){animation-name:kenburnsB}
  .hero .slides .slide.active:nth-child(3){animation-name:kenburnsC}
  .hero .slides .slide.active:nth-child(4){animation-name:kenburnsD}
  @keyframes kenburnsA{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.17) translate(-1.8%,-1.2%)}}
  @keyframes kenburnsB{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.17) translate(1.8%,1.2%)}}
  @keyframes kenburnsC{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.17) translate(1.8%,-1.2%)}}
  @keyframes kenburnsD{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.17) translate(-1.8%,1.2%)}}
  .hero .scrim{position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(46,46,46,.5) 0%,rgba(46,46,46,.28) 35%,rgba(46,46,46,.42) 70%,rgba(46,46,46,.72) 100%)}
  .hero .spotlight{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:120vw;height:120vh;z-index:2;
    pointer-events:none;background:radial-gradient(closest-side,rgba(248,248,246,.16),rgba(248,248,246,0) 66%);
    animation:breathe 9s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.hero .spotlight{animation:none}.hero .slides .slide{transition:none}.hero .slides .slide.active{animation:none;transform:scale(1.05)}}
  .hero .inner{position:relative;z-index:3;padding:0 var(--gutter);max-width:880px}
  .hero .eyebrow{color:rgba(248,248,246,.82)}
  .hero .mark{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:300;letter-spacing:.42em;text-transform:uppercase;
    margin:1rem 0 1.1rem;padding-left:.42em}
  .hero .mark-rule{width:54px;height:1px;background:rgba(248,248,246,.7);margin:0 auto 1.6rem}
  .hero .tagline{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:300;color:rgba(248,248,246,.92);max-width:30ch;margin:0 auto}
  .hero .hero-cta{margin-top:2.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  /* bottom service strip */
  .hero .services-strip{position:absolute;bottom:0;left:0;right:0;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--rule-light)}
  .hero .services-strip a{display:flex;align-items:center;justify-content:center;gap:.7rem;
    padding:1.4rem 1rem;text-decoration:none;color:rgba(248,248,246,.92);font-size:.82rem;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
  .hero .services-strip a:not(:last-child){border-right:1px solid var(--rule-light)}
  .hero .services-strip a:hover{background:rgba(46,46,46,.35)}
  .dots{position:absolute;bottom:5.3rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.6rem}
  .dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(248,248,246,.4);cursor:pointer;padding:0;transition:background .3s,transform .3s}
  .dots button.on{background:var(--white);transform:scale(1.25)}

  section{padding:clamp(4.5rem,11vh,9rem) 0}
  .section-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:3.2rem;max-width:780px}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* DIFFERENCE */
  #difference{background:var(--linen)}
  .diff-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
  .compare{border-top:1px solid var(--rule)}
  .compare-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
  .compare-row>div{padding:1.4rem 0}
  .compare-row .label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-500);margin-bottom:.35rem}
  .compare-row .them{padding-right:1.4rem;color:var(--stone-500)}
  .compare-row .us{padding-left:1.4rem;border-left:1px solid var(--rule)}
  .compare-row .us strong{font-weight:500}

  /* SERVICES — greyscale→colour; click a panel to flip it open across all columns */
  #services{background:var(--white)}
  #services .container{max-width:1700px}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.18rem;position:relative;perspective:2600px;width:95%;margin-inline:auto}
  .svc{position:relative}
  .svc-inner{position:relative;width:100%;aspect-ratio:2/3;transform-style:preserve-3d;
    transition:transform .85s cubic-bezier(.45,.05,.2,1);will-change:transform}
  .svc.open .svc-inner{transform:rotateY(180deg)}
  .svc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
  /* front */
  .svc-front{display:block;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer;
    background:var(--concrete-200);text-align:left;color:var(--white);font:inherit}
  .svc-front .img{position:absolute;inset:0;overflow:hidden}
  .svc-front .img img{width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(1) contrast(.97);transition:filter .7s ease,transform 1.1s ease;transform:scale(1.02)}
  .svc-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,46,46,0) 55%,rgba(46,46,46,.32) 100%)}
  .svc-front .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.9rem 1.8rem;
    display:flex;align-items:center;gap:.85rem}
  .svc-front .cap .t{font-size:1.18rem;font-weight:500;letter-spacing:.02em}
  .svc-front .cap .ico{flex:0 0 auto;opacity:.95;display:inline-flex}
  .svc-front .cap .ico svg{width:30px;height:30px}
  .svc-hint{position:absolute;top:1.5rem;right:1.6rem;z-index:2;font-size:.62rem;letter-spacing:.2em;
    text-transform:uppercase;opacity:0;transform:translateY(-5px);transition:opacity .4s,transform .4s}
  @media (hover:hover){
    .svc-front:hover .img img{filter:grayscale(0) contrast(1);transform:scale(1.06)}
    .svc-front:hover .svc-hint{opacity:.92;transform:none}
  }
  .svc.active .svc-front .img img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
  /* open — cover all three columns */
  @media (min-width:901px){
    .svc.open{grid-column:1 / -1}
    .svc.open .svc-inner{aspect-ratio:auto}
    .svc-grid.has-open .svc:not(.open){display:none}
  }
  /* back */
  .svc-back{transform:rotateY(180deg);background:var(--white);border:1px solid var(--rule);
    display:grid;grid-template-columns:42% 58%;cursor:pointer}
  .svc-back-media{background-size:cover;background-position:center;background-color:var(--concrete-200)}
  .svc-back-copy{position:relative;padding:clamp(1.7rem,3.2vw,3rem);overflow:auto;
    display:flex;flex-direction:column;gap:.85rem}
  .svc-back-copy .eyebrow{margin:0 0 .2rem;color:var(--stone-500);font-size:1.23rem;letter-spacing:.26em}
  .svc-back-copy h3{font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:300;line-height:1.12;letter-spacing:-.015em;color:var(--ink);margin:.1rem 0 .25rem}
  .svc-back-copy .lead{font-size:.81rem;color:var(--stone-700);font-weight:300;line-height:1.66}
  .svc-back-copy p{color:var(--stone-700);font-weight:300;font-size:.81rem;line-height:1.66;margin:0}
  .svc-back-copy .btn{align-self:flex-start;margin-top:auto;justify-content:center}
  .svc-close{position:absolute;top:1rem;right:1rem;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--rule);background:rgba(255,255,255,.92);color:var(--ink);font-size:1.5rem;line-height:1;
    cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
  .svc-close:hover{background:var(--ink);color:var(--white)}
  @media (max-width:900px){
    .svc-inner{aspect-ratio:4/5}
    .svc.open .svc-inner{aspect-ratio:auto;min-height:560px}
    .svc-back{grid-template-columns:1fr;grid-template-rows:200px 1fr}
  }
  .svc-note{margin-top:1.4rem;font-size:.82rem;color:var(--stone-500)}

  /* PROCESS */
  #process{background:var(--charcoal);color:var(--white)}
  #process .eyebrow{color:rgba(248,248,246,.6)} #process .lead{color:rgba(248,248,246,.7)}
  .steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule-light);margin-top:1rem}
  .step{padding:2.2rem 1.4rem 0 0}
  .step:not(:last-child){border-right:1px solid var(--rule-light);padding-right:1.4rem}
  .step:not(:first-child){padding-left:1.4rem}
  .step .num{font-size:.72rem;letter-spacing:.2em;color:rgba(248,248,246,.45);margin-bottom:1rem}
  .step h3{color:var(--white);margin-bottom:.7rem}
  .step p{font-size:.81rem;color:rgba(248,248,246,.66);font-weight:300}

  /* STORY — image background + typewriter (the loved moment), in brand type */
  #story{position:relative;color:var(--white);overflow:hidden;background:var(--graphite)}
  #story .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
  #story .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(46,46,46,.82) 0%,rgba(46,46,46,.55) 55%,rgba(46,46,46,.35) 100%)}
  #story .container{position:relative;z-index:2}
  #story .typed{font-size:clamp(2rem,5vw,3.4rem);font-weight:300;letter-spacing:-.01em;min-height:1.2em;margin-bottom:2rem}
  #story .typed .caret{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:3px;vertical-align:-.12em;animation:blink 1s step-end infinite}
  @keyframes blink{50%{opacity:0}}
  #story .quote{font-size:1.25rem;font-weight:300;line-height:1.5;color:rgba(248,248,246,.95);max-width:60ch}
  #story .who{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,248,246,.7);margin-top:1.2rem}
  #story .body{margin-top:2.2rem;color:rgba(248,248,246,.85);max-width:60ch;font-weight:300}
  #story .story-cta{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

  /* PROOF */
  #proof{background:var(--linen)}
  .proof-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);padding:2.6rem 0}
  .stat .big{font-size:clamp(2rem,4vw,2.8rem);font-weight:300;line-height:1}
  .stat .lbl{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-500);margin-top:.7rem}
  a.stat{display:block;text-decoration:none;color:inherit;transition:transform .3s ease}
  a.stat .lbl{transition:color .3s ease}
  a.stat .big{transition:color .3s ease}
  @media (hover:hover){
    a.stat:hover{transform:translateY(-3px)}
    a.stat:hover .lbl{color:var(--ink)}
    a.stat:hover .big{color:var(--accent,inherit)}
    a.stat:hover .lbl::after{width:1.4rem}
  }
  a.stat .lbl::after{content:"";display:block;height:1px;width:0;background:var(--ink);margin:.55rem auto 0;transition:width .35s ease}

  /* AREAS */
  .areas-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,3.75vw,3.75rem);align-items:start}
  .areas-list{display:flex;flex-wrap:wrap}
  .areas-list span{font-size:.92rem;color:var(--stone-700);padding:.38rem 1.1rem .38rem 0;margin-right:1.1rem;
    border-right:1px solid var(--rule);white-space:nowrap}
  .areas-list span:last-child{border-right:0}

  /* CONNECT */
  #connect{background:var(--charcoal);color:var(--white);position:relative;overflow:hidden;text-align:center}
  #connect::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:90vw;height:90vh;
    background:radial-gradient(closest-side,rgba(248,248,246,.10),rgba(248,248,246,0) 70%);pointer-events:none}
  #connect .container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
  #connect .eyebrow{color:rgba(248,248,246,.6)}
  #connect h2{margin:1.3rem 0 1.4rem;max-width:18ch}
  #connect .lead{color:rgba(248,248,246,.78);max-width:48ch}
  .connect-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.6rem}
  .connect-meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;font-size:.82rem;color:rgba(248,248,246,.65)}
  .connect-meta a{text-decoration:none;border-bottom:1px solid rgba(248,248,246,.3);padding-bottom:2px}
  .connect-meta .sla{color:rgba(248,248,246,.55)}

  footer.site{background:var(--graphite);color:rgba(248,248,246,.7);padding:.56rem 0 .39rem}
  .foot-logo{display:flex;justify-content:center;margin:0 0 .48rem}
  .foot-logo img{height:26px;width:auto;display:block}
  .foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.34rem 2rem;align-items:start}
  .foot-explore{grid-column:span 2}
  .foot-col-h{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(248,248,246,.4);margin:0 0 1.1rem}
  .foot-links{display:flex;flex-direction:column;gap:.34rem;font-size:.84rem}
  .foot-links--split{display:block;column-count:2;column-gap:2rem}
  .foot-links--split a{display:block;margin-bottom:.72rem}
  .foot-links a{text-decoration:none;color:rgba(248,248,246,.72);transition:color .3s;width:fit-content}
  .foot-links a:hover{color:var(--white)}
  .foot-bottom{margin-top:.45rem;padding-top:.26rem;border-top:1px solid var(--rule-light);
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.08em;color:rgba(248,248,246,.42)}
  @media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;gap:2.4rem 1.5rem} .foot-explore{grid-column:1 / -1} }
  @media (max-width:440px){ .foot-grid{grid-template-columns:1fr} .foot-explore{grid-column:auto} }

  a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

  @media (max-width:900px){
    nav.links{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--charcoal);
      flex-direction:column;align-items:flex-start;justify-content:center;gap:1.8rem;padding:var(--gutter);
      transform:translateX(100%);transition:transform .4s ease;z-index:99}
    nav.links.open{transform:none}
    nav.links a:not(.btn){color:var(--white)!important;opacity:.85;font-size:.95rem}
    nav.links .btn{background:var(--white);color:var(--ink);border-color:var(--white)}
    .nav-toggle{display:flex;z-index:100}
    .diff-grid,.areas-wrap{grid-template-columns:1fr}
    .svc-grid{grid-template-columns:1fr}
    .svc .img{aspect-ratio:16/10}
    .steps{grid-template-columns:1fr 1fr;border-top:0}
    .step{border-top:1px solid var(--rule-light);padding:1.6rem 1.2rem 0 0}
    .step:not(:first-child){padding-left:0}.step:not(:last-child){border-right:0;padding-right:0}
    .proof-stats{grid-template-columns:1fr 1fr;gap:2rem}
    .hero .services-strip{grid-template-columns:1fr}
    .hero .services-strip a:not(:last-child){border-right:0;border-bottom:1px solid var(--rule-light)}
    .hero .services-strip a{padding:1rem;font-size:.74rem}
    .dots{bottom:auto;top:5.5rem}
  }
  @media (max-width:600px){ .proof-stats{grid-template-columns:1fr 1fr;gap:1.6rem} .compare-row{grid-template-columns:1fr}
    .compare-row .us{padding-left:0;border-left:0;border-top:1px solid var(--rule);padding-top:1rem}
    .compare-row .them{padding-bottom:1rem} }

  /* Brand intro loader */
  #intro{position:fixed;inset:0;z-index:9999;background:var(--white);display:flex;align-items:center;justify-content:center;transition:opacity .9s ease,visibility .9s ease}
  #intro.done{opacity:0;visibility:hidden;pointer-events:none}
  #intro video{width:min(64vmin,720px);height:auto;display:block;clip-path:inset(0 4px 4px 0)}
  #skipIntro{position:absolute;bottom:2rem;right:2rem;background:none;border:0;cursor:pointer;font:500 .7rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--stone-500);padding:.7rem;transition:color .3s}
  #skipIntro:hover{color:var(--ink)}
  body.intro-lock{overflow:hidden}
  @media (prefers-reduced-motion:reduce){#intro{display:none}}

  /* Nav logo + service icons */
  .brandlogo{display:flex;align-items:center;text-decoration:none}
  .brandlogo img{height:48px;width:auto;display:block;transition:filter .4s ease}
  header.nav:not(.scrolled) .brandlogo img{filter:brightness(1.22) contrast(.96)}
  header.nav.scrolled .brandlogo img{filter:brightness(.46) contrast(1.15)}
  .services-strip .ico{display:inline-flex;align-items:center;justify-content:center}
  .services-strip .ico svg{width:22px;height:22px}
  .svc .cap .ico{display:inline-flex;align-items:center;justify-content:center;width:auto;opacity:.95}
  .svc .cap .ico svg{width:26px;height:26px}
  @media (max-width:900px){ .brandlogo img{height:40px} }

  .hero-logo{display:inline-block;text-decoration:none}
  .hero-logo img{width:min(414px,59.4vmin);height:auto;display:block;opacity:.82}
  @media (max-width:600px){ .hero-logo img{width:min(288px,65vw)} }

  /* Title-bar dropdown menu */
  .nav-cta{padding:.8em 1.5em}
  header.nav:not(.scrolled) .nav-cta{background:var(--white);color:var(--ink);border-color:var(--white)}
  header.nav:not(.scrolled) .nav-cta:hover{background:transparent;color:var(--white)}
  header.nav.scrolled .nav-cta{background:var(--ink);color:var(--white);border-color:var(--ink)}
  header.nav.scrolled .nav-cta:hover{background:transparent;color:var(--ink)}
  .nav-cta{margin-left:auto}
  .nav-toggle span{transition:transform .35s ease,opacity .25s ease}
  .nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .menu-dropdown{position:absolute;top:100%;left:var(--gutter);margin-top:.55rem;min-width:252px;background:var(--white);border:1px solid var(--rule);box-shadow:0 22px 56px rgba(46,46,46,.20);display:flex;flex-direction:column;padding:.5rem 0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;z-index:120}
  .menu-dropdown.open{opacity:1;visibility:visible;transform:none}
  .menu-dropdown a{padding:.9rem 1.7rem;text-decoration:none;color:var(--ink);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.82;transition:opacity .25s,background .25s}
  .menu-dropdown a:hover{opacity:1;background:var(--linen)}
  .menu-dropdown .menu-cta{margin:.5rem 1.1rem .4rem;padding:.95rem 1.2rem;background:var(--ink);color:var(--white);text-align:center;opacity:1;letter-spacing:.12em}
  .menu-dropdown .menu-cta:hover{background:var(--graphite)}
  .cta-short{display:none}
  @media (max-width:600px){ .nav-cta{display:inline-flex;padding:.62em .95em;font-size:.66rem;letter-spacing:.1em} .nav-cta .cta-full{display:none} .nav-cta .cta-short{display:inline} .menu-dropdown{left:var(--gutter);right:var(--gutter);min-width:0} }

  /* FAQ */
  #faqs{background:var(--white)}
  .faq-list{max-width:900px}
  .faq-group + .faq-group{margin-top:2.4rem}
  .faq-group__label{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:0;border-bottom:1px solid var(--ink);cursor:pointer;text-align:left;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-500);padding:0 0 .7rem;transition:color .25s ease}
  .faq-group__label:hover{color:var(--ink)}
  .faq-group.open .faq-group__label{color:var(--ink)}
  .faq-group__icon{position:relative;width:14px;height:14px;flex:0 0 14px}
  .faq-group__icon::before,.faq-group__icon::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease,opacity .3s ease}
  .faq-group__icon::before{top:6.25px;left:0;width:14px;height:1.5px}
  .faq-group__icon::after{left:6.25px;top:0;width:1.5px;height:14px}
  .faq-group.open .faq-group__icon::after{opacity:0}
  .faq-group__items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
  .faq-group.open .faq-group__items{grid-template-rows:1fr}
  .faq-group__inner{overflow:hidden;min-height:0}
  .faq-group__inner .faq:first-child{border-top:0}
  .faq{border-bottom:1px solid var(--rule)}
  .faq button{width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font:400 clamp(.79rem,1.28vw,.99rem)/1.35 var(--font);color:var(--ink);letter-spacing:-.01em}
  .faq .icon{flex:0 0 auto;width:20px;height:20px;position:relative}
  .faq .icon::before,.faq .icon::after{content:"";position:absolute;background:var(--stone-500);transition:opacity .3s ease,transform .3s ease}
  .faq .icon::before{top:9px;left:0;width:20px;height:1.5px}
  .faq .icon::after{left:9px;top:0;width:1.5px;height:20px}
  .faq.open .icon::after{opacity:0}
  .faq .answer{overflow:hidden;max-height:0;transition:max-height .45s ease}
  .faq .answer p{padding:0 0 1.1rem;color:var(--stone-700);font-weight:300;max-width:74ch;font-size:.81rem}
  .faq .answer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--mist,var(--rule));transition:border-color .2s ease}
  .faq .answer a:hover{border-color:var(--ink)}
  .faq.open .answer{max-height:520px}
  .faq-close{max-width:900px;margin-top:3.6rem;text-align:center}
  .faq-close p{font-style:italic;font-size:clamp(1.1rem,1.6vw,1.25rem);color:var(--graphite,var(--stone-700));font-weight:300;margin:0 0 1.6rem}

  /* Portfolio — one project per row: text left, image carousel right */
  #portfolio{background:var(--linen)}
  #portfolio .container{max-width:1564px}
  .pf-rows{display:flex;flex-direction:column;gap:clamp(3rem,6vw,5.5rem);width:85%;max-width:1240px;margin-inline:auto}
  .pf-row{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);gap:clamp(1.8rem,4vw,4rem);align-items:center}
  .pf-text{display:flex;flex-direction:column;gap:1rem}
  .pf-text .pf-meta{font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-500);margin:0}
  .pf-text .pf-t{font-size:clamp(1.28rem,1.95vw,1.8rem);font-weight:300;line-height:1.12;letter-spacing:-.015em;color:var(--ink);margin:0}
  .pf-text .pf-blurb{font-size:.81rem;font-weight:300;line-height:1.65;color:var(--stone-700);margin:0;max-width:42ch;text-align:justify;text-justify:inter-word;hyphens:auto}
  .pf-text .btn{align-self:flex-start;margin-top:.6rem}
  /* carousel (right) */
  .pf-gallery{position:relative;min-width:0}
  .pf-carousel{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--concrete-200)}
  .pf-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.45,.05,.2,1)}
  .pf-slide{flex:0 0 100%;height:100%;position:relative}
  .pf-slide img{width:100%;height:100%;object-fit:cover;display:block}
  .pf-carousel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(46,46,46,0) 58%,rgba(46,46,46,.72) 100%);z-index:1}
  .pf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
    border:1px solid rgba(248,248,246,.55);background:rgba(46,46,46,.42);color:var(--white);font-size:1.5rem;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
  .pf-arrow:hover{background:rgba(46,46,46,.82);border-color:var(--white)}
  .pf-prev{left:1rem} .pf-next{right:1rem}
  .pf-carousel.single .pf-arrow,.pf-carousel.single .pf-dots,.pf-carousel.single .pf-count{display:none}
  .pf-caption{position:absolute;left:1.25rem;right:4.6rem;bottom:1.1rem;z-index:3;color:var(--white);font-size:.7rem;line-height:1.35;font-weight:300;text-shadow:0 1px 14px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pf-count{position:absolute;bottom:1.1rem;right:1.25rem;z-index:3;color:rgba(248,248,246,.85);font-size:.74rem;letter-spacing:.08em;text-shadow:0 1px 10px rgba(0,0,0,.6)}
  .pf-dots{position:absolute;top:1.2rem;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;padding:0 1.5rem}
  .pf-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(248,248,246,.45);transition:background .25s,transform .25s}
  .pf-dots button.on{background:var(--white);transform:scale(1.25)}
  .port-more{margin-top:3rem;text-align:center}
  @media (max-width:820px){
    .pf-row{grid-template-columns:1fr;gap:1.4rem}
    .pf-text{order:1} .pf-gallery{order:2}
    .pf-caption{right:5.2rem}
  }
  /* About (founder bio) */
  #story{background:var(--white)}
  .about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,5rem);align-items:start}
  .about-portrait{position:relative;aspect-ratio:4/5;background:#1c1b1a url("assets/about/preeti-headshot.jpg") center top/cover no-repeat;display:flex;align-items:flex-end}
  .about-portrait .tag{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--white);background:rgba(46,46,46,.32);margin:1rem;padding:.5rem .8rem}
  .about-copy{margin-top:-.2rem}
  .about-copy .eyebrow{margin-bottom:2rem}
  .about-copy h2{margin-bottom:0;line-height:1}
  .about-copy p{color:var(--stone-700);font-weight:300;margin-bottom:1.1rem;max-width:66ch;line-height:1.75;font-size:.81rem}
  .about-copy .intro{color:var(--ink);margin-bottom:1.3rem}
  .about-copy .closing{color:var(--ink);margin-top:1.4rem}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr}.about-portrait{max-width:440px}}
  /* Connect page */
  #connect{position:relative;color:var(--white);overflow:hidden;background:var(--graphite);text-align:left;padding:clamp(1.6rem,4vh,3.2rem) 0}
  #connect::before{display:none}
  #connect .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
  #connect .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(46,46,46,.5),rgba(46,46,46,.74))}
  #connect .container{position:relative;z-index:2;display:block}
  #connect .typed{font-family:var(--font);font-size:clamp(1.2rem,3.7vw,3.2rem);font-weight:400;letter-spacing:0;min-height:1.1em;line-height:1.15;margin-bottom:.7rem;white-space:nowrap}
  #connect .typed .caret{display:inline-block;width:2px;height:.6em;background:currentColor;margin-left:5px;vertical-align:-.02em;animation:blink 1s step-end infinite}
  #connect .c-quote{font-size:1.05rem;font-weight:300;color:rgba(248,248,246,.95);max-width:72ch;line-height:1.6}
  #connect .c-who{font-size:.92rem;color:rgba(248,248,246,.8);margin:.7rem 0 1.9rem}
  #connect .c-copy{color:rgba(248,248,246,.9);font-weight:300;max-width:76ch;margin-bottom:.5rem;line-height:1.45;font-size:.81rem;text-align:justify;text-justify:inter-word;hyphens:auto}
  #connect .c-skip{margin:.6rem 0 .9rem}
  #connect .c-skip a{color:var(--white);text-decoration:none;border-bottom:1px solid rgba(248,248,246,.45);padding-bottom:3px;transition:border-color .3s}
  #connect .c-skip a:hover{border-color:var(--white)}
  .c-quest{margin-top:.35rem}
  .c-quest-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
  .c-quest-head .lbl{font-size:.95rem;color:rgba(248,248,246,.92)}
  .c-quest-head .opt{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(248,248,246,.55)}
  .c-quest a.qbtn{display:inline-flex;align-items:center;gap:.6rem;color:var(--white);text-decoration:none;font-size:.92rem;border:1px solid rgba(248,248,246,.42);padding:.95rem 1.3rem;transition:background .25s,border-color .25s}
  .c-quest a.qbtn:hover{background:rgba(248,248,246,.1);border-color:var(--white)}
  .qbtn{cursor:pointer;font:inherit}
  button.qbtn{display:inline-flex;align-items:center;gap:.6rem;color:var(--white);text-decoration:none;font-size:.92rem;border:1px solid rgba(248,248,246,.42);padding:.95rem 1.3rem;background:transparent;transition:background .25s,border-color .25s}
  button.qbtn:hover{background:rgba(248,248,246,.1);border-color:var(--white)}

  /* ===== Conversational questionnaire overlay ===== */
  .quiz{position:fixed;inset:0;z-index:1200;display:none}
  .quiz.open{display:block}
  .quiz-scrim{position:absolute;inset:0;background:rgba(30,28,26,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
  .quiz-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(780px,94vw);max-height:92vh;display:flex;flex-direction:column;background:var(--linen);color:var(--ink);box-shadow:0 36px 90px rgba(0,0,0,.45);overflow:hidden}
  .quiz-x{position:absolute;top:.7rem;right:.8rem;z-index:5;width:38px;height:38px;border:0;background:rgba(248,248,246,.14);color:var(--white);font-size:1.4rem;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .25s}
  .quiz-x:hover{background:rgba(248,248,246,.28)}
  /* illuminated-tile progress (echoes the ceiling-tile motif) */
  .quiz-steps{display:flex;gap:5px;padding:1.3rem clamp(1rem,3.5vw,2rem);background:var(--charcoal);overflow-x:auto;scrollbar-width:none}
  .quiz-steps::-webkit-scrollbar{display:none}
  .quiz-tile{flex:1 0 auto;min-width:0;text-align:center;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.3;color:rgba(248,248,246,.38);padding:.62rem .45rem;border:1px solid rgba(248,248,246,.13);background:rgba(248,248,246,.02);transition:color .45s,background .45s,box-shadow .45s,border-color .45s;cursor:default;white-space:nowrap}
  .quiz-tile.reachable{cursor:pointer}
  .quiz-tile.done{color:rgba(248,248,246,.72);border-color:rgba(248,248,246,.3);background:rgba(248,248,246,.06)}
  .quiz-tile.active{color:var(--charcoal);font-weight:700;background:var(--white);border-color:transparent;box-shadow:0 0 0 1px var(--white),0 0 26px rgba(248,248,246,.4)}
  .quiz-stage{padding:clamp(1.6rem,4.5vw,2.8rem);overflow-y:auto}
  .quiz-stage.anim{animation:quizIn .45s cubic-bezier(.2,.7,.2,1)}
  @keyframes quizIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
  .quiz-eyebrow{font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--stone-500);margin:0 0 .9rem}
  .quiz-title{font-size:clamp(1.35rem,2.6vw,1.95rem);font-weight:300;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0}
  .quiz-hint{color:var(--stone-700);font-weight:300;font-size:.98rem;line-height:1.6;margin:.7rem 0 0;max-width:60ch}
  .quiz-ta{width:100%;margin-top:1.3rem;min-height:170px;padding:1.05rem 1.15rem;border:1px solid var(--rule);background:var(--white);color:var(--ink);font:400 1rem/1.65 var(--font);outline:none;resize:vertical}
  .quiz-ta:focus{box-shadow:0 0 0 2px var(--greige)}
  .quiz-fields{display:grid;gap:.85rem;margin-top:1.3rem}
  .quiz-in{width:100%;padding:1rem 1.15rem;border:1px solid var(--rule);background:var(--white);color:var(--ink);font:400 .98rem/1.4 var(--font);outline:none}
  .quiz-in:focus{box-shadow:0 0 0 2px var(--greige)}
  .quiz-privacy{margin-top:1.2rem;font-size:.8rem;line-height:1.6;color:var(--stone-500);border-left:2px solid var(--concrete-300);padding-left:.9rem;max-width:62ch}
  /* option lists */
  .quiz-opts{display:grid;gap:.55rem;margin-top:1.3rem}
  .quiz-opts.cols2{grid-template-columns:1fr 1fr}
  .quiz-opt{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem .95rem;border:1px solid var(--rule);background:var(--white);cursor:pointer;text-align:left;font:inherit;transition:border-color .2s,background .2s,box-shadow .2s}
  .quiz-opt:hover{border-color:var(--greige)}
  .quiz-opt.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--linen)}
  .quiz-opt .mark{flex:0 0 auto;width:17px;height:17px;border:1px solid var(--greige);margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--white);background:transparent;transition:background .2s,border-color .2s}
  .quiz-opt.single .mark{border-radius:50%}
  .quiz-opt.sel .mark{background:var(--ink);border-color:var(--ink)}
  .quiz-opt .otxt{font-size:.9rem;line-height:1.4;color:var(--ink)}
  .quiz-opt .otxt strong{display:block;font-weight:600;margin-bottom:1px}
  .quiz-opt .otxt em{display:block;font-style:normal;color:var(--stone-500);font-weight:300;font-size:.8rem;margin-top:2px;line-height:1.45}
  /* palette cards */
  .quiz-pal{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.3rem}
  .quiz-pal .quiz-opt{flex-direction:column;align-items:stretch;gap:.55rem;padding:.7rem}
  .pal-sw{display:flex;height:26px}
  .pal-sw i{flex:1;display:block}
  .pal-row{display:flex;align-items:center;gap:.55rem}
  .quiz-add{display:flex;gap:.5rem;margin-top:.7rem}
  .quiz-add input{flex:1;padding:.7rem .9rem;border:1px solid var(--rule);background:var(--white);font:400 .88rem var(--font);outline:none}
  .quiz-add button{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:0 1rem;font:500 .8rem var(--font);cursor:pointer}
  .quiz-add button:hover{background:var(--ink);color:var(--white)}
  /* style photo cards */
  .quiz-photos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem;margin-top:1.3rem}
  .quiz-photo{position:relative;border:1px solid var(--rule);background:var(--white);cursor:pointer;overflow:hidden;padding:0;font:inherit;text-align:left;transition:box-shadow .2s,border-color .2s}
  .quiz-photo:hover{border-color:var(--greige)}
  .quiz-photo.sel{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
  .quiz-photo img{width:100%;height:94px;object-fit:cover;display:block;filter:grayscale(.2) contrast(.98);transition:filter .3s}
  .quiz-photo:hover img,.quiz-photo.sel img{filter:none}
  .quiz-photo .plabel{display:flex;align-items:center;gap:.45rem;padding:.5rem .6rem;font-size:.76rem;color:var(--ink);line-height:1.2}
  .quiz-photo .pmark{width:15px;height:15px;border:1px solid var(--greige);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:var(--white);transition:background .2s,border-color .2s}
  .quiz-photo.sel .pmark{background:var(--ink);border-color:var(--ink)}
  @media (max-width:560px){ .quiz-photos{grid-template-columns:1fr 1fr} }
  .quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(1.6rem,4.5vw,2.8rem);border-top:1px solid var(--rule);background:var(--white)}
  .quiz-back,.quiz-next{font:500 .82rem/1 var(--font);letter-spacing:.04em;cursor:pointer;border:0;padding:1rem 1.6rem;transition:background .25s,color .25s,opacity .25s}
  .quiz-back{background:transparent;color:var(--stone-500);padding-left:0}
  .quiz-back:hover{color:var(--ink)}
  .quiz-back[disabled]{opacity:0;pointer-events:none}
  .quiz-next{background:var(--ink);color:var(--white);display:inline-flex;align-items:center;gap:.55rem}
  .quiz-next:hover{background:var(--graphite)}
  .quiz-progress-text{font-size:.74rem;letter-spacing:.08em;color:var(--stone-500)}
  .quiz-done{text-align:center;padding:1.5rem .5rem}
  .quiz-done h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;color:var(--ink);margin:0 0 .8rem}
  .quiz-done p{color:var(--stone-700);font-weight:300;line-height:1.65;max-width:52ch;margin:0 auto 1.5rem}
  @media (max-width:560px){ .quiz-tile{font-size:.5rem;letter-spacing:.08em;padding:.55rem .3rem} .quiz-panel{width:96vw;max-height:94vh} }
  .c-form{max-width:583px;margin:0;display:flex;flex-direction:column;gap:.57rem}
  .c-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .c-form input,.c-form select,.c-form textarea{width:100%;padding:.57rem 1rem;border:0;background:var(--white);color:var(--ink);font:400 .55rem/1.5 var(--font);text-transform:uppercase;letter-spacing:.1em;outline:none}
  .c-form input:focus,.c-form select:focus,.c-form textarea:focus{box-shadow:0 0 0 2px var(--greige)}
  .c-form select{appearance:none;-webkit-appearance:none;color:var(--stone-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23837C72' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center;background-size:12px}
  .c-form textarea{resize:vertical;min-height:81px}
  .c-form ::placeholder{color:var(--stone-500);text-transform:uppercase;letter-spacing:.1em}
  .c-form .c-submit{text-align:center;margin-top:.5rem}
  .c-form .btn{background:rgba(248,248,246,.92);color:var(--ink);border-color:transparent}
  .c-form .btn:hover{background:var(--white)}
  .c-form .form-note{text-align:center;font-size:.8rem;color:rgba(248,248,246,.75);margin-top:1rem}
  @media (max-width:600px){.c-form .row{grid-template-columns:1fr}}

  /* Hero SS logo — spotlight reveal (replaces the full-screen intro) */
  .hero-logo{position:relative}
  .hero-logo::before{content:"";position:absolute;left:50%;top:45%;width:140%;height:140%;
    transform:translate(-50%,-50%) scale(.5);z-index:-1;pointer-events:none;opacity:0;
    background:radial-gradient(closest-side,rgba(248,248,246,.30),rgba(248,248,246,0) 70%)}
  @media (prefers-reduced-motion:no-preference){
    .hero-logo img{animation:ssReveal 3.2s cubic-bezier(.33,0,.18,1) .3s both}
    .hero-logo::before{animation:ssFlare 3.4s ease-in-out .15s both}
  }
  @keyframes ssReveal{
    0%{opacity:0;transform:scale(1.14);filter:brightness(.45) blur(7px)}
    30%{opacity:.4;filter:brightness(.62) blur(4px)}
    60%{opacity:.72;filter:brightness(.85) blur(1.4px)}
    100%{opacity:.82;transform:scale(1);filter:brightness(1) blur(0)}
  }
  @keyframes ssFlare{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
    45%{opacity:.85;transform:translate(-50%,-50%) scale(.92)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
  }

/* ===== Contact Form 7 reconciliation — match the design's .c-form ===== */
.c-form .wpcf7-form-control-wrap{display:block;width:100%}
.c-form p{margin:0}
.c-form br{display:none}
.c-form .wpcf7-spinner{margin:.5rem auto 0;display:block}
.c-form .wpcf7-not-valid-tip{color:#c0392b;font-size:.72rem;margin-top:.3rem}
.c-form .wpcf7-response-output{margin:1rem 0 0;padding:.7rem 1rem;border:0;text-align:center;
  background:rgba(248,248,246,.92);color:var(--ink);font-size:.82rem}

/* ===== Multi-page chrome (v2.0.2) ===================================== */
:root{--navh:66px}

/* Persistent header — hamburger left · logo centre · booking right, no fade */
.nav{position:fixed;top:0;left:0;right:0;z-index:130;height:var(--navh);
  display:flex;align-items:center;background:var(--white);
  border-bottom:1px solid var(--rule);padding:0 var(--gutter)}
.nav-toggle{color:var(--ink)!important;z-index:131}
.nav-toggle span{background:var(--ink)!important}      /* dark hamburger, every page & state */
.nav-logo{opacity:1;visibility:visible;pointer-events:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav:not(.scrolled) .nav-logo{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%)}
.nav-logo img{height:49px;filter:none}                 /* natural logo (not darkened) */
.nav-cta{margin-left:auto;background:var(--ink);color:var(--white);border-color:var(--ink)}
.nav-cta:hover{background:transparent;color:var(--ink)}
.nav:not(.scrolled) .nav-cta{background:var(--ink);color:var(--white);border-color:var(--ink)}
.nav:not(.scrolled) .nav-cta:hover{background:transparent;color:var(--ink)}

/* Page banner — image · thin vertical divider · heading (image on the left) */
.page-main{min-height:60vh}
.page-banner{background:var(--linen);padding:calc(var(--navh) + 3rem) 0 3.4rem}
.page-banner-inner{width:min(1180px,92vw);margin:0 auto;display:grid;
  grid-template-columns:1fr 1px 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:stretch}
.page-banner.no-img .page-banner-inner{grid-template-columns:1fr;max-width:760px}
.page-banner-media img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
.page-banner-divider{width:1px;background:var(--rule);align-self:stretch}
.page-banner-text{display:flex;flex-direction:column;justify-content:center}
.page-banner-text .eyebrow{margin-bottom:.6rem}
.page-title{color:var(--ink);font-family:'Brittany Signature',cursive;font-weight:400;font-size:clamp(2.9rem,6.5vw,5rem);
  line-height:1.06;letter-spacing:0;margin:0}
.page-main section{min-height:auto}
.page-main .container,.page-body.container{width:min(1180px,92vw);margin:0 auto}
.page-body{padding:3.2rem 0 4.2rem}
@media(max-width:820px){
  .page-banner-inner{grid-template-columns:1fr;gap:1.3rem}
  .page-banner-divider{display:none}
}

/* Home hero forward CTA */
.hero .inner{text-align:center}
.hero-enter{display:inline-flex;margin-top:1.5rem;background:var(--white);color:var(--ink);
  border-color:var(--white);letter-spacing:.12em;font-size:.78rem}
.hero-enter:hover{background:transparent;color:var(--white)}

/* Home teaser strip */
.home-teaser{display:flex;flex-wrap:wrap;gap:1.1rem 1.8rem;align-items:center;justify-content:center;
  padding:2.4rem 1.2rem;background:var(--charcoal);border-top:1px solid rgba(248,248,246,.10)}
.home-teaser a{color:#efeae1;text-decoration:none;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;transition:color .25s}
.home-teaser a:hover{color:var(--white)}
.home-teaser .home-teaser-cta{margin-left:.3rem}

/* Current menu item */
.menu-dropdown a.active{color:var(--ink);font-weight:600;opacity:1}

/* Journal coming-soon */
.coming-soon{max-width:640px;padding:5rem 0 5.5rem}
.coming-soon h2{font-weight:300;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.4rem 0 1rem}

/* ===== v2.0.6 — bigger hamburger, larger logo, banner-less pages ===== */
.nav-toggle{gap:6px!important;padding:9px;margin-left:-9px}
.nav-toggle span{width:30px!important;height:2px!important}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* pages no longer have a banner — clear the fixed header + frame editor title */
.page-main{padding-top:calc(var(--navh) + 1rem)}
.page-intro{width:min(1180px,92vw);margin:0 auto;padding:2.4rem 0 .25rem}
.page-intro h1{color:var(--ink);margin:0 0 .4rem}

/* ===== v2.0.7 — services panels fill on mobile (no empty gradient) ===== */
@media (max-width:900px){
  .svc-front .img{position:absolute!important;inset:0!important;aspect-ratio:auto!important;width:auto!important;height:auto!important}
  .svc-front .img img{width:100%!important;height:100%!important;object-fit:cover!important}
  .svc-inner{aspect-ratio:3/4}
}

/* ===== v2.1.0 — services caption/height, about equal-height, font consistency ===== */

/* Services: card captions always on one line */
.svc-front .cap{flex-wrap:nowrap;padding:1.5rem 1.25rem;gap:.5rem}
.svc-front .cap .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:clamp(.78rem,.99vw,.94rem)}
.svc-front .cap .ico svg{width:22px;height:22px}
@media (max-width:900px){ .svc-front .cap .t{font-size:.98rem} }

/* Services: taller cards on desktop */
@media (min-width:901px){ .svc-inner{aspect-ratio:3/4} }

/* About: keep portrait at its natural 4:5; text trimmed to fit, centered against it */
@media (min-width:901px){ .about-grid{align-items:start} }

/* Consistent brand font (TTFors) across every page + editor-added content */
h1,h2,h3,h4,h5,h6,.wp-block-heading,
.page-intro,.page-intro p,.page-intro li,.page-body,.page-body p{font-family:var(--font)}
.page-intro h1{font-family:var(--font);font-weight:300;font-size:clamp(2rem,4.5vw,3rem);
  letter-spacing:-.01em;line-height:1.08;color:var(--ink);margin:0 0 .5rem}
.page-intro h2{font-family:var(--font);font-weight:400}

/* ===== v2.2.0 — Montserrat Light site-wide ===== */
body{font-weight:300}
.page-title{font-family:var(--font);font-weight:300;font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.01em}

/* ===== v2.3.0 — portfolio fullscreen lightbox ===== */
.pf-carousel .pf-slide img{cursor:zoom-in}
.pf-lb{position:fixed;inset:0;z-index:9999;background:rgba(20,19,18,.96);display:flex;align-items:center;justify-content:center}
.pf-lb[hidden]{display:none}
.pf-lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem) clamp(1rem,7vw,5rem) clamp(4.6rem,9vh,6.2rem)}
.pf-lb-img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.pf-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(248,248,246,.5);background:rgba(46,46,46,.5);color:var(--white);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s}
.pf-lb-arrow:hover{background:rgba(46,46,46,.85);border-color:var(--white)}
.pf-lb-prev{left:clamp(.6rem,2vw,1.6rem)} .pf-lb-next{right:clamp(.6rem,2vw,1.6rem)}
.pf-lb-cap{position:absolute;left:0;right:0;bottom:clamp(3.1rem,6.5vh,4.6rem);z-index:2;text-align:center;color:rgba(248,248,246,.9);font-size:.8rem;font-weight:300;padding:0 1.5rem}
.pf-lb-count{position:absolute;top:clamp(1rem,3vh,1.6rem);right:clamp(1rem,3vw,1.8rem);z-index:2;color:rgba(248,248,246,.8);font-size:.78rem;letter-spacing:.08em}
.pf-lb-close{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(.9rem,2.5vh,1.6rem);z-index:3;display:flex;align-items:center;gap:.5rem;background:transparent;border:1px solid rgba(248,248,246,.45);color:var(--white);padding:.5rem 1.15rem;border-radius:40px;cursor:pointer;font:300 .74rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,border-color .25s}
.pf-lb-close:hover{background:rgba(248,248,246,.12);border-color:var(--white)}
.pf-lb-close .x{font-size:1.15rem;line-height:1}

/* ===== v2.6.0 — header CTA box restored, center logo, services/about/connect ===== */
header.nav:not(.scrolled) .nav-cta{background:var(--ink);color:var(--white);border-color:var(--ink)}
header.nav:not(.scrolled) .nav-cta:hover{background:transparent;color:var(--ink)}

/* ===== v2.8.0 — brand-gray CTA + frosted services caption band ===== */
.nav-cta,
header.nav:not(.scrolled) .nav-cta,
header.nav.scrolled .nav-cta{background:var(--stone-700);color:var(--white);border-color:var(--stone-700)}
.nav-cta:hover,
header.nav:not(.scrolled) .nav-cta:hover,
header.nav.scrolled .nav-cta:hover{background:transparent;color:var(--stone-700)}

.svc-front .cap{border-top:1px solid rgba(248,248,246,.32);background:rgba(40,38,35,.34);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ===== v2.9.0 — unified booking CTAs (same color + size) ===== */
.book-cta{background:var(--stone-700)!important;border:1px solid var(--stone-700)!important;color:var(--white)!important;
  font-size:.76rem!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  padding:.95em 1.6em!important;transition:background .3s ease,color .3s ease}
.book-cta:hover{background:transparent!important;color:var(--stone-700)!important}
@media (max-width:600px){ .nav-cta.book-cta{font-size:.66rem!important;padding:.62em .95em!important;letter-spacing:.1em!important} }

/* ===== v2.14.0 — Where We Work tightened 25% (override global section padding) ===== */
#areas{padding:clamp(3.4rem,8.25vh,6.75rem) 0}