/* ==========================================================================
   Michelle Sohn Coaching — EXECUTIVE DESIGN SYSTEM (October 2026)

   Rebuilt from the client's October 2026 doc: "make my website black ... look
   more executive. The whole thing needs to be redesigned, colors, font, etc."
   Revised the same week after office review ("too basic", "AI generated
   looking", "round the edges slightly"):

   - Near-black ground with a fine film grain, warm ivory type, one champagne
     accent; her maroon is kept for the logo artwork only.
   - Content sits on flat, slightly raised fills with rounded corners (--r-sm
     buttons and inputs, --r cards and photographs, --r-lg panels): no
     gradients, glows or outlines on cards and panels.
   - Section labels are set in the display italic, not tracked capitals.
   - Sans-serif only: Archivo for display (light and semi-expanded for
     headlines, the wide-grotesk voice of luxury and private-banking brands),
     Libre Franklin for text.

   Every page loads this file first; every page except the homepage then loads
   page.css for the interior components. Colours are tokens on :root.
   Bump ?v= in src/data/site.js after editing.
   ========================================================================== */

:root{
  --black:#0A0A0B;
  --bg:#0A0A0B;
  --bg-2:#101012;
  --bg-3:#18181B;
  --ink:#F2EDE4;
  --ink-soft:#B4ADA2;
  --ink-faint:#8A847B;
  --line:rgba(242,237,228,.10);
  --line-strong:rgba(242,237,228,.22);
  --accent:#C8A96E;
  --accent-soft:rgba(200,169,110,.12);
  --brand:#5A1127;
  --brand-deep:#3A0B19;
  --btn-bg:var(--ink);
  --btn-ink:var(--black);
  --btn-hover:var(--accent);
  --error:#E07A6B;

  /* Cards and panels: one flat fill a step up from the ground, a second step
     for hover. No gradients and no outlines. */
  --surface:#141416;
  --surface-hover:#1A1A1D;
  --surface-solid:#141416;
  --lift:0 30px 60px -32px rgba(0,0,0,.85);

  --r-sm:7px;
  --r:14px;
  --r-lg:22px;

  --display:"Archivo","Libre Franklin",system-ui,sans-serif;
  --body:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;

  --maxw:min(1440px,92vw);
  --gutter:clamp(20px,4.5vw,72px);
  --border:1px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
:root{font-size:16.5px}
html{scroll-behavior:smooth;background:var(--black)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--black);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:1.05rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.site{position:relative;background:var(--bg);color:var(--ink);min-height:100vh}
/* Film grain over the whole page: breaks up the flat black the way paper or a
   photographic print would. Under the popup (z 100), over everything else. */
.site::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--accent);color:var(--black)}

/* Headlines: Archivo light, semi-expanded and set tight. Smaller titles (h3)
   stay at normal width in a medium weight, so cards keep their shape. */
h1,h2,h3{
  font-family:var(--display);font-weight:300;font-stretch:112.5%;letter-spacing:-.02em;line-height:1.08;
  text-wrap:balance;margin:0;color:var(--ink);
}
h3{font-weight:500;font-stretch:100%;letter-spacing:-.01em}
h1{font-size:clamp(1.99rem,4.3vw,3.84rem);line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(1.53rem,2.76vw,2.42rem)}
h3{font-size:1.11rem;line-height:1.2}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--accent)}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto}
.pad{padding-inline:var(--gutter)}
section{padding-block:clamp(4rem,9vw,7.5rem)}

/* Section labels: gold, sentence case, semi-expanded medium. */
.eyebrow{font-family:var(--display);font-stretch:112.5%;font-weight:500;font-size:.98rem;letter-spacing:.01em;line-height:1.3;color:var(--accent)}
.lede{font-size:clamp(1.1rem,1.4vw,1.25rem);font-weight:300;color:var(--ink-soft);max-width:52ch;line-height:1.65}
.subhead{font-size:1.1rem;font-weight:300;color:var(--ink-soft);max-width:60ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sec-head{display:grid;gap:1rem;justify-items:start}
.sec-head > h1,.sec-head > h2{max-width:18em}

/* ---------- cards and icons (shared with page.css) ---------- */
.card,.challenge-list li,.pillar{
  position:relative;background:var(--surface);border-radius:var(--r);
  transition:background .3s var(--ease);
}
.card:hover,.challenge-list li:hover,.pillar:hover{background:var(--surface-hover)}
.card-icon{
  display:inline-grid;place-items:center;flex:0 0 auto;width:2.7rem;height:2.7rem;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);font-size:1.02rem;
}
.card-icon--lg{width:3.6rem;height:3.6rem;border-radius:var(--r);font-size:1.4rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border-radius:var(--r-sm);border:var(--border) solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-hover);color:var(--btn-ink)}
.btn-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  padding-bottom:.35rem;border-bottom:var(--border) solid var(--accent);
  transition:color .2s ease,border-color .2s ease;
}
.btn-link:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm);
}

/* ---------- credibility bar (top of every listed page) ---------- */
.topbar{background:var(--black);color:var(--ink-soft);border-bottom:var(--border) solid var(--line);padding-block:.6rem}
.topbar-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem 1.4rem;font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.topbar-title{color:var(--accent)}
.topbar-label{padding-left:1.4rem;border-left:var(--border) solid var(--line-strong)}
.marks-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,2.2vw,30px);color:var(--ink)}
.marks-row .mark-logo{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .marks-row .mark-logo{
    --logo-scale:.7;--h:26px;
    display:block;height:calc(var(--h) * var(--logo-scale));
    width:calc(var(--h) * var(--ar) * var(--logo-scale));
    text-indent:-9999px;overflow:hidden;opacity:.72;
    background-color:currentColor;transition:opacity .25s ease;
    -webkit-mask:var(--src) center/contain no-repeat;
            mask:var(--src) center/contain no-repeat;
  }
  .marks-row .mark-logo:hover{opacity:1}
  .marks-row .m-amex   {--ar:3.693;--h:29px;--src:url("../img/logos/american-express.svg")}
  .marks-row .m-cartier{--ar:3.611;--h:23px;--src:url("../img/logos/cartier.svg")}
  .marks-row .m-tiffany{--ar:8.239;--h:18px;--src:url("../img/logos/tiffany.svg")}
  .marks-row .m-uber   {--ar:2.883;--h:19px;--src:url("../img/logos/uber.svg")}
  .marks-row .m-pvh    {--ar:3.121;--h:18px;--src:url("../img/logos/pvh.svg")}
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:var(--border) solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.site-header.is-scrolled{background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(1.2rem,2.6vw,2.6rem);padding-block:1.15rem}

/* The wordmark: her name in the display face, COACHING tracked out beneath. */
.logo{display:inline-grid;justify-items:start;text-decoration:none;line-height:1;white-space:nowrap;color:var(--ink)}
.nav .logo{margin-right:auto}
.logo-name{font-family:var(--display);font-weight:500;font-stretch:112.5%;letter-spacing:-.01em;font-size:1.23rem;letter-spacing:.01em}
.logo-sub{
  font-family:var(--body);font-weight:600;font-size:.58rem;color:var(--accent);
  letter-spacing:.5em;text-transform:uppercase;margin-top:.38rem;
}

.nav-menu{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem)}
.nav-links{display:flex;align-items:center;gap:clamp(1.2rem,2.2vw,2.2rem);list-style:none;margin:0;padding:0}
.nav-links a{
  position:relative;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  padding-block:.3rem;transition:color .2s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
/* A champagne rule that wipes in on hover and stays on the current page. */
.nav-links > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease);
}
.nav-links > li > a:hover::after,.nav-links > li > a:focus-visible::after,
.nav-links > li > a[aria-current="page"]::after{transform:scaleX(1)}
.chev{width:.6rem;height:.6rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.has-sub{position:relative}
.submenu{
  position:absolute;top:calc(100% + 14px);left:-1rem;min-width:240px;list-style:none;margin:0;padding:.5rem;
  background:var(--bg-2);border:var(--border) solid var(--line);border-radius:var(--r);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:.6rem .7rem}
/* The header CTA is solid, like the in-page booking buttons, so it is the one
   thing in the bar that stands out. */
.nav-cta .btn{
  background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg);padding:.75rem 1.3rem;font-size:.72rem;
}
.nav-cta .btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
.nav-burger{display:none}

/* ---------- media ---------- */
.media{position:relative;overflow:hidden;margin:0;background:var(--bg-3);border-radius:var(--r)}
.media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;object-position:center top}
.crop-center > img{object-position:center center}
.crop-y > img{object-position:center var(--crop-y,50%)}

/* ---------- hero ----------
   The portrait sits in a rounded frame, and a client's words overlap its
   lower corner. */
.hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.hero-text{display:grid;gap:1.5rem;justify-items:start}
.hero h1{max-width:13em;font-size:clamp(2.3rem,4.3vw,3.95rem)}
.hero h1 em{display:block}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;margin-top:.8rem}
.hero-visual{position:relative;justify-self:end;width:100%;max-width:540px}
.hero-photo{position:relative;z-index:1;aspect-ratio:4/5;border-radius:var(--r-lg);box-shadow:var(--lift)}
.hero-card{
  position:absolute;z-index:2;left:-2.5rem;bottom:2.2rem;max-width:300px;margin:0;
  padding:1.25rem 1.4rem;border-radius:var(--r);background:var(--surface);box-shadow:var(--lift);
}
.hero-card blockquote{margin:0;font-family:var(--body);font-weight:400;font-size:1.02rem;line-height:1.5}
.hero-card figcaption{margin-top:.7rem;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* ---------- stats ---------- */
.cred{padding-block:0}
.cred-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
}
.stat{padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1rem,2vw,2rem);text-align:center}
.stat + .stat{border-left:var(--border) solid var(--line)}
.stat .n{font-family:var(--display);font-weight:300;font-stretch:112.5%;letter-spacing:-.02em;font-size:clamp(1.99rem,3.07vw,2.76rem);line-height:1;color:var(--accent);font-variant-numeric:lining-nums}
.stat .l{margin-top:.8rem;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- the challenge: four cards beside the heading ---------- */
.challenge-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.challenge .sec-head{position:sticky;top:7.5rem}
.challenge-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.challenge-list li{display:grid;align-content:start;gap:.8rem;padding:1.7rem}
.challenge-list h3{font-size:1.2rem}
.challenge-list p{color:var(--ink-soft);font-weight:300;font-size:.98rem}

/* ---------- leadership coaching: photograph beside the copy ---------- */
.feature{background:var(--bg-2);border-block:var(--border) solid var(--line)}
/* The copy column is much taller than the photograph, so the photograph lines
   up with the top of the copy and stays in view beside the cards. */
.feature-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.feature-photo{position:sticky;top:7rem;aspect-ratio:1/1;border-radius:var(--r-lg);box-shadow:var(--lift)}
/* A landscape frame with the two people at opposite sides: the square crop,
   nudged right, keeps both faces in view. */
.feature-photo > img{object-position:60% center}
.feature-body{display:grid;gap:2rem;justify-items:start}
.feature-head{display:grid;gap:1.1rem;justify-items:start}
.feature-head h2{font-size:clamp(1.84rem,3.37vw,2.91rem)}
.pillars{display:grid;gap:.9rem;width:100%}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.1rem;padding:1.3rem 1.4rem}
.pillar .card-icon{grid-row:span 2}
.pillar h3{font-size:1.18rem;align-self:center}
.pillar p{color:var(--ink-soft);font-weight:300;font-size:.97rem}

/* ---------- testimonials (home + /testimonials): one per row, as cards ---------- */
.quote-list{display:grid;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.quote{
  position:relative;display:grid;gap:1.2rem;justify-items:start;margin:0;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3.4vw,2.8rem);
  background:var(--surface);border-radius:var(--r);
  transition:background .3s var(--ease);
}
/* An oversized gold quotation mark, set into the top-right corner. */
.quote::before{
  content:"\201C";position:absolute;top:.2rem;right:1.6rem;pointer-events:none;
  font-family:var(--display);font-weight:600;font-size:6rem;line-height:1;color:var(--accent);opacity:.24;
}
/* "Title · Company": both halves in the same small tracked capitals, the title
   in gold and the company in ivory, so every client reads the same way. */
.attrib{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.attrib .who{color:var(--accent)}
.attrib .role{color:var(--ink-soft)}
.attrib-sep{color:var(--ink-faint)}
.attrib .role a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.attrib .role a:hover{color:var(--accent)}
.quote-body{display:grid;gap:1rem;justify-items:start;width:100%}
.quote blockquote{margin:0;display:grid;gap:1rem;width:100%;padding-right:clamp(0rem,4vw,3rem)}
.quote blockquote p{font-family:var(--display);font-weight:300;font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.55;color:var(--ink)}
.quote .rest{display:grid;gap:1rem}
.quote .rest[hidden]{display:none}
.readmore{
  background:none;border:0;padding:0;cursor:pointer;color:var(--accent);font:inherit;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.readmore:hover{color:var(--ink)}
/* The whole row of a long testimonial opens it (Quote.jsx). */
.quote.is-expandable{cursor:pointer}
.quote.is-expandable:hover{background:var(--surface-hover)}
.quote.is-expandable:hover .readmore{color:var(--ink)}
.home-quotes .btn-link{margin-top:clamp(2rem,4vw,3rem)}

/* ---------- about ----------
   Headline deliberately smaller than the other section heads (client doc). */
.about{background:var(--bg-2);border-top:var(--border) solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.about-visual{position:sticky;top:7rem}
.about-photo{z-index:1;aspect-ratio:2/3;border-radius:var(--r-lg);box-shadow:var(--lift)}
.about-photo > img{object-position:center 18%}
.about-text{display:grid;gap:1.3rem;max-width:66ch}
.about h2{font-size:clamp(1.34rem,1.99vw,1.72rem);margin-bottom:.3rem}
.about-text > p:not(.eyebrow){color:var(--ink-soft);font-weight:300}
.cred-list{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.cred-list li{
  padding:.55rem .95rem;font-size:.86rem;line-height:1.35;
  background:var(--surface);border-radius:var(--r-sm);
}

/* ---------- your next step: a panel ---------- */
.next-step .wrap{
  display:grid;justify-items:center;gap:1.1rem;text-align:center;
  padding-block:clamp(3rem,6vw,5rem);border-radius:var(--r-lg);background:var(--surface);
}
.next-step h2{font-size:clamp(1.76rem,3.53vw,3.07rem);max-width:16em}
.next-points{
  list-style:none;padding:0;margin:clamp(1.2rem,3vw,2rem) 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;width:min(100%,780px);
}
.next-points li{
  display:grid;justify-items:center;gap:.35rem;padding:1.3rem 1rem;
  background:var(--surface-hover);border-radius:var(--r);
}
.next-points .icon{color:var(--accent);font-size:1.15rem;margin-bottom:.3rem}
.next-points strong{font-family:var(--display);font-weight:500;font-size:1.11rem}
.next-points span{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- stay connected: a panel ---------- */
.capture{padding-block:0 clamp(4rem,8vw,6rem)}
.capture-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-block:clamp(2.4rem,5vw,3.6rem);background:var(--surface);border-radius:var(--r-lg);
}
.capture h2{font-size:clamp(1.45rem,2.3vw,1.99rem)}
#capture-form{display:grid;grid-template-columns:1fr auto;gap:.9rem 0;align-items:end}
#capture-form .field{grid-column:1}
/* The button sits level with the input, not with the label above it. */
#capture-form .btn{grid-column:2;height:3.4rem;padding-block:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
.consent{grid-column:1 / -1;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;
  font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.consent input{flex:0 0 auto;width:1.05rem;height:1.05rem;margin:.12rem 0 0;accent-color:var(--accent);cursor:pointer}
.consent a{color:var(--ink)}
.field{display:grid;gap:.45rem}
.field label{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.field input{
  width:100%;height:3.4rem;font:inherit;font-size:1rem;color:var(--ink);background:rgba(10,10,11,.6);
  border:var(--border) solid var(--line-strong);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);padding:0 1.1rem;
}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus{outline:none;border-color:var(--accent)}
.capture-done{display:none;font-family:var(--display);font-size:1.23rem}
.capture-done.is-visible{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- popup ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.is-open{display:flex}
.modal-scrim{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.modal-box{
  position:relative;z-index:2;width:100%;max-width:480px;color:var(--ink);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--lift);
  padding:clamp(2rem,4vw,2.8rem);display:grid;gap:.9rem;
}
.modal-box h3{font-size:1.53rem}
.modal-box p:not(.eyebrow){color:var(--ink-soft);font-weight:300}
.modal-close{
  position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border:0;background:none;cursor:pointer;
  color:var(--ink-soft);font-size:1.6rem;line-height:1;border-radius:var(--r-sm);
}
.modal-close:hover{color:var(--ink)}
.modal-decline{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-faint);font:inherit;font-size:.85rem;justify-self:start;text-decoration:underline;text-underline-offset:3px}
#popup-form{display:flex;align-items:stretch;margin-top:.6rem}
#popup-form .field{flex:1 1 auto;min-width:0}
#popup-form input{height:100%}
#popup-form .btn{border-radius:0 var(--r-sm) var(--r-sm) 0}

/* ---------- footer ---------- */
footer{border-top:var(--border) solid var(--line);background:var(--bg)}
.foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;
  padding-block:2.4rem;font-size:.8rem;color:var(--ink-faint);
}
.foot-links{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}
.foot-links a{text-decoration:none;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.foot-links a:hover{color:var(--accent)}
.foot-min{justify-content:center}

/* ---------- scroll reveal (src/utils/useReveal.js) ----------
   Only hidden once the script has put js-reveal on <html>, so the prerendered
   page is always fully visible without JavaScript. */
.js-reveal [data-reveal],.js-reveal [data-reveal-group] > *{
  opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .3s var(--ease);
}
.js-reveal [data-reveal].is-in,.js-reveal [data-reveal-group].is-in > *{opacity:1;transform:none}
.js-reveal [data-reveal-group].is-in > :nth-child(2){transition-delay:.1s}
.js-reveal [data-reveal-group].is-in > :nth-child(3){transition-delay:.2s}
.js-reveal [data-reveal-group].is-in > :nth-child(4){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  /* Headline and button first on smaller screens; the portrait follows. */
  .hero-visual{justify-self:center;max-width:420px;margin-top:1rem}
  .hero-photo{aspect-ratio:1/1}
  /* The quote card sits under the portrait, overlapping its foot. */
  .hero-card{position:relative;left:auto;bottom:auto;max-width:none;margin:-2.5rem 1rem 0}
  .challenge-grid,.about-grid,.capture-inner,.feature-grid{grid-template-columns:1fr}
  .challenge .sec-head{position:static}
  /* Relative, not static: the frame must stay positioned (see .about-visual). */
  .feature-photo{position:relative;top:auto;aspect-ratio:3/2}
  .feature-photo > img{object-position:center 30%}
  /* Not static: a positioned box keeps the portrait (and its absolutely placed
     <img>) inside the frame instead of covering the top of the page. */
  .about-visual{position:relative;top:auto;max-width:420px}
  .about-photo{aspect-ratio:4/5}
  .cred-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:var(--border) solid var(--line)}
}
@media (max-width:760px){
  .topbar-label{display:none}
  .topbar-title{flex-basis:100%;text-align:center}
  .challenge-list{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topbar .marks-row{gap:12px;flex-wrap:nowrap}
  .marks-row .mark-logo{--logo-scale:.52}
  /* Compact rows rather than three tall tiles. */
  .next-points{grid-template-columns:1fr;gap:.6rem}
  .next-points li{grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:0 1rem;padding:.9rem 1.1rem;text-align:left}
  .next-points .icon{grid-row:span 2;margin:0;width:1.4rem;text-align:center}
  .next-points strong{font-size:0.96rem;line-height:1.2}
  /* Icon above the title, so the copy gets the full width of the card. */
  .pillar{grid-template-columns:1fr;gap:.8rem}
  .pillar .card-icon{grid-row:auto}
  .logo-name{font-size:1.03rem}
  #capture-form{grid-template-columns:1fr}
  #capture-form .btn{grid-column:1;border-radius:var(--r-sm)}
  .field input{border-right:var(--border) solid var(--line-strong);border-radius:var(--r-sm)}
  .hero-actions .btn{width:100%}
  /* A smaller portrait, so the headline and the booking button are in view on arrival. */
  .hero-visual{max-width:260px}
  .hero-card{margin:-2rem -1.5rem 0}
  .hero-text{gap:1.2rem}
  .quote::before{font-size:4.5rem;right:1rem}
}

/* ---- header menu, 860px and below ----
   The breakpoint must match MOBILE_MENU_QUERY in src/components/Header.jsx. */
@media (max-width:860px){
  .nav{padding-block:.8rem}
  .nav-burger{
    display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;cursor:pointer;
    background:none;color:var(--ink);border:var(--border) solid var(--line-strong);border-radius:var(--r-sm);
  }
  .nav-burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .nav-burger .ico-close{display:none;width:20px;height:20px}
  .nav-burger.is-open .ico-menu{display:none}
  .nav-burger.is-open .ico-close{display:block}
  .nav-menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:var(--border) solid var(--line);
    padding:.4rem var(--gutter) 1.6rem;max-height:calc(100dvh - 70px);overflow-y:auto;
  }
  .nav-menu.is-open{display:flex}
  .nav-menu .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-menu .nav-links > li > a{display:flex;padding:1.05rem 0;font-size:.8rem;border-bottom:var(--border) solid var(--line)}
  .nav-menu .nav-links > li > a::after{display:none}
  .nav-menu .nav-links > li > a[aria-current="page"]{color:var(--accent)}
  .nav-menu .submenu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;padding:0 0 .5rem 1rem}
  .nav-menu .nav-cta{padding-top:1.3rem}
  .nav-menu .nav-cta .btn{width:100%;background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
}