/* ==========================================================================
   base.css — SHARED STRUCTURE. Zero visual opinion. Do not restyle this file.
   --------------------------------------------------------------------------
   Copy into a project and link it BEFORE your own styles.css:

       <link rel="stylesheet" href="base.css">
       <link rel="stylesheet" href="styles.css">

   This file holds only what is identical on every page: the reset, the layout
   shell, the header/nav/mega/mobile-overlay mechanics, buttons, forms, footer
   skeleton, scroll reveals and the responsive rules. It has NO colours, NO
   fonts, NO radii and NO shadows of its own — every one of those comes from
   the tokens your styles.css sets.

   It also encodes the four traps that have shipped broken repeatedly:
     1. backdrop-filter on the header traps the fixed mobile overlay (68px bug)
     2. grid `1fr` = minmax(auto,1fr) lets nowrap text blow out the layout
     3. the mega panel must stay inside the viewport
     4. [data-reveal] must actually be matched by the JS
   ========================================================================== */

/* ---------- tokens: the page overrides all of these ---------- */
:root{
  /* colour — REQUIRED overrides */
  --ink:        #101014;   /* page background */
  --ink-2:      #17171d;   /* raised surface */
  --ink-3:      #1d1d25;   /* card / panel */
  --surface:    #f4f2ee;   /* light section background */
  --surface-2:  #e7e3dc;
  --text:       #f0eef4;   /* text on ink */
  --muted:      #9c98a6;   /* secondary text on ink */
  --ink-text:   #1e1a24;   /* text on surface */
  --ink-mute:   #6b6576;
  --accent:     #642665;   /* brand colour */
  --accent-lit: #b06bb4;   /* brand colour lifted for dark backgrounds */
  --accent-2:   #d8f26b;   /* signal / CTA accent */
  --line:       rgba(255,255,255,.11);
  --line-d:     rgba(0,0,0,.13);

  /* type — REQUIRED overrides */
  --font-display: "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout — override if the design needs it */
  --wrap-max: 1240px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }
/* clip (not hidden) where supported: `hidden` makes body a scroll container and
   silently kills position:sticky inside the page. */
@supports (overflow-x: clip){ html,body{ overflow-x:clip; } }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
address{ font-style:normal; }
sub{ font-size:.62em; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px; }

/* ---------- layout shell ---------- */
.wrap{
  width:100%; max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.sect{ padding-block:clamp(3.6rem,7vw,6.4rem); }
.sect--light{ background:var(--surface); color:var(--ink-text); }
.sect--light-2{ background:var(--surface-2); color:var(--ink-text); }
.sect--dark-2{ background:var(--ink-2); }

.sect__head{ margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.sect__head--split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr);
  gap:clamp(1.4rem,4vw,3.4rem);
  align-items:end;
}
.sect__num{
  font-family:var(--font-mono);
  font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.sect--light .sect__num,.sect--light-2 .sect__num{ color:var(--accent); }
.sect__h2{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,4.2vw,2.9rem);
  font-weight:700; line-height:1.06; letter-spacing:-.028em;
}
.sect__lead{
  font-size:.98rem; line-height:1.7;
  color:var(--ink-mute); max-width:44ch;
}
.sect--dark-2 .sect__lead,
.sect__lead--on-dark{ color:rgba(240,238,244,.72); }

/* ---------- hero headline (the fitter in behaviour.js depends on this) ---------- */
/* Leave this alone unless the design needs different proportions — the JS writes
   --h1-size onto .hero__h1 and `.line > span` must stay nowrap for it to measure. */
.hero__h1{
  font-family:var(--font-display);
  font-size:var(--h1-size, clamp(1.9rem, 8.6vw, 3.4rem));
  font-weight:700;
  line-height:.98;
  letter-spacing:-.028em;
}
.hero__h1 .line{ display:block; overflow:hidden; padding-block:.04em; }
.hero__h1 .line > span{ display:inline-block; vertical-align:top; white-space:nowrap; }
@media (min-width:1024px){
  .hero__h1{ font-size:var(--h1-size, clamp(2.1rem, 5.1vw, 4.2rem)); }
}

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- preloader shell ---------- */
.pre{
  position:fixed; inset:0; z-index:9999;
  display:grid; grid-template-rows:1fr auto auto;
  place-items:center;
  padding:2rem;
  background:var(--ink);
  transition:opacity .5s var(--ease), visibility .5s;
}
.pre.is-done{ opacity:0; visibility:hidden; }
.pre__meta{
  display:flex; align-items:baseline; gap:.9rem;
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  padding-block:.6rem;
}
.pre__pct{ color:var(--accent-2); }
.pre__bar{
  width:min(260px,60vw); height:1px; background:var(--line);
  overflow:hidden; margin-bottom:2.6rem;
}
.pre__bar i{ display:block; height:100%; width:0; background:var(--accent-2); transition:width .25s linear; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:900;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
/* TRAP 1: backdrop-filter ONLY >=1024px. On mobile it becomes the containing
   block for position:fixed children and collapses the nav overlay to ~68px. */
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, var(--ink) 82%, transparent);
    backdrop-filter:blur(14px) saturate(1.1);
    -webkit-backdrop-filter:blur(14px) saturate(1.1);
  }
}
.hdr__in{
  position:relative;
  max-width:var(--wrap-max); margin-inline:auto;
  padding-inline:var(--pad);
  min-height:76px;
  display:flex; align-items:center; gap:1.2rem;
}
.brand{ flex-shrink:0; display:block; }
.brand img{ width:172px; height:auto; }

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:.15rem; }
.nav__head{ display:none; }
.nav__item{ position:relative; }
/* has-mega panels position against the header wrap (full viewport width) so a
   wide panel always lands centred and inside the screen. */
.nav__item.has-mega{ position:static; }
.nav__link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.62rem .78rem;
  font-size:.875rem; font-weight:500;
  white-space:nowrap;
  border-radius:6px;
  transition:color .2s, background .2s;
}
.nav__link:hover{ color:var(--accent-2); background:rgba(255,255,255,.05); }
.nav__chev{ width:9px; height:6px; opacity:.55; transition:transform .25s var(--ease); }
.nav__item.is-open > .nav__link{ color:var(--accent-2); }
.nav__item.is-open .nav__chev{ transform:rotate(180deg); opacity:1; }

/* ---------- mega panel ---------- */
.mega{
  position:absolute; top:calc(100% + 1px); left:50%;
  transform:translate(-50%,8px);
  width:min(560px,calc(100vw - 2rem));
  padding:1.4rem;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 32px 70px -20px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mega--wide{ width:min(940px,calc(100vw - 2rem)); }
.nav__item.is-open > .mega,
.nav__item:focus-within > .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,0);
}
.mega__list{ display:grid; gap:.1rem; }
/* multi-column mega: wrap 2-3 .mega__list blocks in .mega__cols */
.mega__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.mega__cols--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega__h{
  font-family:var(--font-mono); font-size:.63rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--accent-lit);
  padding-bottom:.5rem; margin-bottom:.35rem;
  border-bottom:1px solid var(--line);
}
.mega a{
  display:block; padding:.34rem 0;
  font-size:.845rem; line-height:1.35; color:rgba(240,238,244,.88);
  transition:color .18s, transform .18s var(--ease);
  overflow-wrap:anywhere;
}
.mega a:hover{ color:var(--accent-2); transform:translateX(3px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.86rem 1.35rem;
  font-size:.875rem; font-weight:600;
  border-radius:calc(var(--radius) * .85);
  transition:transform .22s var(--ease), background .22s, color .22s, border-color .22s;
}
.btn svg{ width:15px; height:15px; }
.btn--solid{ background:var(--accent-2); color:var(--ink); }
.btn--solid:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.btn--ghost{ border:1px solid var(--line); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent-lit); color:var(--accent-lit); }
.btn--outline{ border:1px solid var(--line); color:var(--text); }
.btn--outline:hover{ background:var(--text); color:var(--ink); border-color:var(--text); }

/* ---------- forms ---------- */
.form{
  padding:clamp(1.3rem,2.8vw,1.9rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.form label{
  display:block; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.85rem;
}
.form input,.form textarea{
  display:block; width:100%; margin-top:.4rem;
  padding:.72rem .8rem;
  font-family:var(--font-body); font-size:.9rem; color:var(--text);
  background:rgba(0,0,0,.28);
  border:1px solid var(--line); border-radius:6px;
  transition:border-color .2s;
  min-width:0;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--accent-lit); }
.form textarea{ resize:vertical; }
.form .btn{ width:100%; justify-content:center; margin-top:.5rem; }

/* ---------- footer skeleton ---------- */
.foot{
  background:var(--ink);
  border-top:1px solid var(--line);
  padding-block:clamp(2.6rem,5vw,4rem) 1.6rem;
}
.foot__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:2.6rem; border-bottom:1px solid var(--line);
}
.foot__nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem; }
.foot__h{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(240,238,244,.5); margin-bottom:.9rem;
}
.foot__nav ul{ display:grid; gap:.45rem; }
.foot__nav a{ font-size:.83rem; color:rgba(240,238,244,.78); transition:color .18s; }
.foot__nav a:hover{ color:var(--accent-2); }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding-top:1.6rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em;
  color:rgba(240,238,244,.42);
}

/* ---------- burger ---------- */
.burger{
  display:none;
  width:42px; height:42px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:6px;
  flex-shrink:0;
}
.burger span{
  display:block; width:17px; height:1.5px; background:var(--text);
  transition:transform .25s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   RESPONSIVE — mobile navigation
   TRAP 1 again: no transform on the header below 1024px, or the fixed
   overlay resolves against the header box instead of the viewport.
   ========================================================================== */
@media (max-width:1023px){
  .hdr{ transform:none !important; }
  .hdr__in{ min-height:68px; }
  .brand img{ width:148px; }
  .burger{ display:flex; margin-left:auto; }

  .nav{
    position:fixed; inset:0; z-index:950;
    margin:0;
    display:flex; flex-direction:column;
    padding:1.1rem var(--pad) 2rem;
    background:var(--ink);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    justify-content:safe center;
    visibility:hidden; opacity:0;
    transition:opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .nav.is-open{ visibility:visible; opacity:1; transition:opacity .3s var(--ease), visibility 0s; }
  html.nav-open{ overflow:hidden; }

  .nav__head{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:1rem; margin-bottom:.6rem;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .nav__headlabel{
    font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--muted);
  }
  .nav__close{
    width:38px; height:38px; display:grid; place-items:center;
    border:1px solid var(--line); border-radius:6px;
  }
  .nav__close svg{ width:15px; height:15px; }

  .nav__list{ flex-direction:column; align-items:stretch; gap:0; margin-top:.5rem; }
  .nav__item{ border-bottom:1px solid var(--line); }
  .nav__link{
    width:100%; justify-content:space-between;
    padding:1rem .1rem; font-size:1.02rem; font-weight:600;
    border-radius:0;
  }
  .nav__item.is-open > .nav__link{ background:none; }

  /* mega becomes an accordion */
  .mega, .mega--wide{
    position:static; transform:none; width:100%;
    padding:0; margin:0;
    background:none; border:0; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto;
    display:none;
  }
  .nav__item.is-open > .mega{ display:block; padding:0 0 1.1rem; }
  /* desktop rule `.nav__item.is-open > .mega` (0,3,0) out-specifies the
     `transform:none` above, so an open accordion arrived shifted 50% left. */
  .nav__item.is-open > .mega,
  .nav__item.is-open:focus-within > .mega{ transform:none; }
  .nav__item:focus-within > .mega{ display:none; }
  .nav__item.is-open:focus-within > .mega{ display:block; }
  .mega__list{ grid-template-columns:minmax(0,1fr); gap:.1rem; }
  .mega__cols,.mega__cols--2{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .mega__h{ border-bottom:0; padding-bottom:.2rem; margin-bottom:.3rem; }
  .mega a{ padding:.5rem 0; font-size:.92rem; }
  .nav__foot{
    display:grid; gap:.5rem; margin-top:auto; padding-top:1.4rem;
    font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  }

  .sect__head--split{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1.1rem; }
  .foot__top{ grid-template-columns:minmax(0,1fr); }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.8rem 1.4rem; }
}

@media (max-width:640px){
  .foot__bottom{ flex-direction:column; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}