/* ==========================================================================
   SaLTInspire — saltinspire.com
   Design system. Mobile first. No framework, no build step.
   Edit tokens in :root; everything else follows.
   ========================================================================== */

/* --- Fonts (self hosted, no third party request) ------------------------- */
@font-face{font-family:Poppins;src:url(../fonts/poppins-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/poppins-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  --ink:#14171C;
  --ink-2:#1B1F25;
  --ink-3:#262B32;
  --ink-4:#3A4049;
  --bone:#FBFAF8;
  --bone-2:#F2F0EA;
  --bone-3:#E6E3DB;
  --gold:#B99F88;        /* official accent, sampled from the brand kit */
  --gold-deep:#85684E;   /* darkened accent for small text on light: 4.5:1 on bone-2 */
  --gold-mid:#A2886F;    /* decorative only */
  --gold-soft:#F3EEE8;
  --muted:#5B6068;
  --muted-dark:#9CA3AB;
  --line:rgba(20,23,28,.13);
  --line-2:rgba(20,23,28,.07);
  --line-dark:rgba(242,241,237,.14);

  --sans:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,64px);
  --sec-y:clamp(60px,10vw,124px);
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 12px 34px -18px rgba(20,23,28,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:64px;
}
@media(min-width:900px){:root{--header-h:76px}}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* --- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1360px}
.section{padding-block:var(--sec-y)}
.section--tight{padding-block:clamp(44px,7vw,84px)}
.bg-bone2{background:var(--bone-2)}
.bg-ink{background:var(--ink);color:var(--bone)}
.bg-ink .lede,.bg-ink p{color:#C4C8CD}
.bg-ink .mono,.bg-ink .small,.footer .mono{color:var(--muted-dark)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- Type ---------------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:80px}
.bg-ink .eyebrow{color:var(--gold)}
.bg-ink .eyebrow::after{background:var(--line-dark)}

.h1{font-size:clamp(2.3rem,1.35rem + 4.4vw,4.9rem);font-weight:700;line-height:1.02;letter-spacing:-.032em}
.h2{font-size:clamp(1.75rem,1.2rem + 2.5vw,3rem);font-weight:700;line-height:1.08;letter-spacing:-.028em}
.h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);font-weight:600;line-height:1.22;letter-spacing:-.018em}
.h4{font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.lede{font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem);line-height:1.58;color:var(--muted);max-width:62ch}
.small{font-size:.875rem;line-height:1.55;color:var(--muted)}
.mono{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gold{color:var(--gold-deep)}
.bg-ink .gold{color:var(--gold)}
.measure{max-width:64ch}

/* --- Logotype ------------------------------------------------------------
   Official artwork. The wordmark is a drawn lockup with square dots, not
   Poppins, so it is placed as an image. Height is the control; width follows.
   Re-export from the brand kit with mkbrand.py, never by hand. */
.logo{display:inline-flex;align-items:center;padding-block:9px}
.logo img{height:30px;width:auto;display:block}
@media(min-width:900px){.logo img{height:34px}}
.logo__mark{width:26px;height:26px;flex:none;color:currentColor}
.logo__mark .node-hi{fill:var(--gold)}
/* in-body typographic mentions of the programme names, not the logo */
.logo__word{
  display:flex;align-items:baseline;font-weight:800;letter-spacing:-.03em;
  line-height:1;font-size:1.3125rem;
}
.logo__word i{font-style:normal}
.logo__word .lc{font-weight:500;opacity:.55}
.logo__word .teen{font-weight:500;opacity:.75;letter-spacing:-.02em}

/* --- Dark surfaces -------------------------------------------------------
   Every dark band re-points the light-surface tokens, so any shared component
   dropped into one stays legible without a bespoke override. Do not flip
   --ink here: .bg-ink uses it as its own background. */
.bg-ink,.hero,.cta,.phead,.drawer,.thesis,.footer,.cookie{
  --gold-deep:var(--gold);
  --line:var(--line-dark);
  --line-2:var(--line-dark);
  --muted:var(--muted-dark);
}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s,border-color .18s,color .18s,box-shadow .18s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 26px -14px rgba(133,104,78,.85)}
.btn--gold:hover{background:#CDB6A2}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--ink-3)}
.btn--ghost{border-color:var(--line);background:transparent;color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(20,23,28,.04)}
.bg-ink .btn--ghost,.hero .btn--ghost,.cta .btn--ghost,.phead .btn--ghost,
.drawer .btn--ghost,.thesis .btn--ghost,.footer .btn--ghost,.cookie .btn--ghost{
  border-color:rgba(242,241,237,.32);color:var(--bone);
}
.bg-ink .btn--ghost:hover,.hero .btn--ghost:hover,.cta .btn--ghost:hover,.phead .btn--ghost:hover,
.drawer .btn--ghost:hover,.thesis .btn--ghost:hover,.footer .btn--ghost:hover,.cookie .btn--ghost:hover{
  border-color:var(--gold);color:var(--gold);background:rgba(185,159,136,.1);
}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:479px){.btn-row .btn{width:100%}}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;
  color:var(--gold-deep);padding-block:12px;
}
.link-arrow span{transition:transform .2s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}
.bg-ink .link-arrow{color:var(--gold)}

/* --- Header -------------------------------------------------------------- */
.topbar{
  background:var(--ink);color:var(--muted-dark);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;
  display:none;
}
@media(min-width:900px){
  .topbar{display:block}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:38px}
  .topbar a:hover{color:var(--gold)}
  .topbar__l{display:flex;gap:26px}
  .topbar__r{color:var(--gold);display:flex;align-items:center;gap:8px}
  .topbar__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.6s infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,248,.9);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}
.nav{display:none}
@media(min-width:900px){
  .nav{display:flex;align-items:center;gap:4px}
  .nav a{
    padding:9px 14px;border-radius:999px;font-size:.9375rem;font-weight:500;
    color:var(--muted);transition:color .16s,background-color .16s;
  }
  .nav a:hover{color:var(--ink);background:rgba(20,23,28,.05)}
  .nav a[aria-current=page]{color:var(--ink);font-weight:600}
  .nav a[aria-current=page]::after{
    content:"";display:block;height:2px;width:18px;background:var(--gold);
    border-radius:2px;margin:5px auto -2px;
  }
}
.header__cta{display:none}
@media(min-width:1060px){.header__cta{display:inline-flex;min-height:42px;padding:9px 20px;font-size:.875rem}}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;border:1px solid var(--line);border-radius:12px;
  background:transparent;cursor:pointer;
}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .18s}
.burger i:nth-child(2){width:70%;margin-left:auto}
@media(min-width:900px){.burger{display:none}}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;padding:calc(var(--header-h) + 22px) var(--gutter) 32px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  overflow-y:auto;overscroll-behavior:contain;
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.drawer nav{display:flex;flex-direction:column;gap:2px;margin-bottom:auto}
.drawer nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 0;border-bottom:1px solid var(--line-dark);
  font-size:1.375rem;font-weight:600;letter-spacing:-.02em;
}
.drawer nav a em{font-family:var(--mono);font-size:.625rem;font-style:normal;letter-spacing:.14em;color:var(--muted-dark)}
.drawer nav a[aria-current=page]{color:var(--gold)}
.drawer__foot{padding-top:26px;display:grid;gap:14px}
.drawer__foot .mono{color:var(--muted-dark)}
.drawer__contact{display:grid;font-size:.9375rem;color:#C4C8CD}
.drawer__contact a,.drawer__contact span{display:block;padding-block:9px}
.drawer__contact a:hover{color:var(--gold)}
@media(min-width:900px){.drawer{display:none}}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bone);padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  padding-block:clamp(56px,11vw,116px) clamp(56px,10vw,104px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(120% 90% at 82% 8%,rgba(185,159,136,.16),transparent 58%),
    radial-gradient(90% 70% at 0% 100%,rgba(185,159,136,.07),transparent 60%);
}
.hero__lattice{
  position:absolute;right:-16%;top:50%;transform:translateY(-50%);
  width:min(560px,74vw);opacity:.14;color:var(--gold);pointer-events:none;
}
@media(min-width:900px){.hero__lattice{right:-4%;opacity:.2}}
.hero .wrap{position:relative;z-index:1}
.hero__kicker{
  display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;
  border:1px solid var(--line-dark);border-radius:999px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:26px;
}
.hero h1{max-width:15ch;margin-bottom:22px}
.hero .lede{color:#C4C8CD;max-width:56ch;margin-bottom:32px}
.hero .btn-row{margin-bottom:clamp(40px,7vw,64px)}

.hero__strip{
  display:grid;gap:14px;padding-top:26px;border-top:1px solid var(--line-dark);
  grid-template-columns:1fr;
}
@media(min-width:640px){.hero__strip{grid-template-columns:repeat(3,1fr);gap:22px}}
.hero__strip div{display:flex;flex-direction:column;gap:4px}
.hero__strip b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--gold);font-weight:500}
.hero__strip span{font-size:.9375rem;color:#C4C8CD;line-height:1.45}

/* --- Marquee / thesis band ----------------------------------------------- */
.thesis{background:var(--ink-2);color:var(--bone);padding-block:clamp(34px,6vw,54px)}
.thesis p{font-size:clamp(1.0625rem,.95rem + .8vw,1.5rem);line-height:1.5;letter-spacing:-.018em;max-width:44ch;color:#D6D8DB}
.thesis__steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.thesis__steps span{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  padding:8px 14px;border:1px solid var(--line-dark);border-radius:999px;color:var(--gold);
}
@media(min-width:900px){
  .thesis .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .thesis__steps{margin-top:0;justify-content:flex-end}
}

/* --- Section head -------------------------------------------------------- */
.sec-head{margin-bottom:clamp(30px,5vw,52px)}
.sec-head .h2{max-width:19ch;margin-bottom:16px}
.sec-head .lede{margin-bottom:0}
@media(min-width:900px){
  .sec-head--split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
  .sec-head--split .h2{margin-bottom:0}
}

/* --- Grids --------------------------------------------------------------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:560px){
  .grid{gap:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .grid{gap:20px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* --- Cards --------------------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,4vw,32px);display:flex;flex-direction:column;gap:12px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.card__no{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--gold-deep)}
.card p{color:var(--muted);font-size:.9375rem}
.card--dark{background:var(--ink-2);border-color:var(--line-dark);color:var(--bone)}
.card--dark p{color:#B9BEC5}
.card--dark .card__no{color:var(--gold)}

/* Pillars */
.pillars{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:28px}
.pillars div{
  border:1px solid var(--line);border-radius:var(--r);padding:16px 10px;text-align:center;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--ink);
}
@media(min-width:560px){.pillars div{padding:20px 14px;font-size:.6875rem;letter-spacing:.18em}}

/* Program cards */
.prog{
  border-radius:var(--r-lg);padding:clamp(24px,4.5vw,38px);display:flex;flex-direction:column;gap:18px;
  background:#fff;border:1px solid var(--line-2);
}
.prog--dark{background:var(--ink);color:var(--bone);border-color:transparent;position:relative;overflow:hidden}
.prog--dark::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(185,159,136,.16),transparent 68%);
}
.prog__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.prog__tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--gold-deep)}
.prog--dark .prog__tag{color:var(--gold)}
.prog p{color:var(--muted);font-size:.9375rem}
.prog--dark p{color:#B9BEC5}
.prog__list{display:grid;gap:9px;position:relative;z-index:1}
.prog__list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-radius:12px;background:var(--bone-2);font-size:.9375rem;font-weight:500;
}
.prog--dark .prog__list li{background:rgba(255,255,255,.055)}
.prog__list b{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;font-weight:500;color:var(--gold-deep)}
.prog--dark .prog__list b{color:var(--gold)}

/* Tiers */
.tier{
  border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;
  background:#fff;
}
.tier__n{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--gold-deep)}
.tier p{font-size:.875rem;color:var(--muted)}

/* --- Curriculum ---------------------------------------------------------- */
.mods{display:grid;gap:16px}
@media(min-width:900px){.mods{grid-template-columns:repeat(3,1fr);gap:20px}}
.mod{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.mod__h{
  padding:16px 20px;background:var(--ink);color:var(--bone);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
}
.mod ol{padding:8px}
.mod li{display:flex;gap:14px;align-items:baseline;padding:11px 12px;border-radius:10px;font-size:.9375rem}
.mod li+li{border-top:1px solid var(--line-2)}
.mod li b{font-family:var(--mono);font-size:.6875rem;color:var(--gold-deep);font-weight:500;min-width:22px}
.mod li.is-assess{background:var(--gold-soft);font-weight:600;margin:6px;border-top:0}
.mod li.is-assess b{color:var(--gold-deep)}
.curr-note{
  margin-top:20px;padding:16px 20px;border:1px dashed var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;color:var(--muted);text-align:center;line-height:1.9;
}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:34px}
.stats div{border:1px solid var(--line);border-radius:var(--r);padding:18px 14px;text-align:center;background:#fff}
.stats b{display:block;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.stats span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;color:var(--muted);display:block;margin-top:8px}

/* --- Team ---------------------------------------------------------------- */
/* Mobile: one per row, portrait left and text right, so bios stay readable.
   Two narrow columns of 22-character lines was the old failure. */
.people{display:grid;gap:20px;grid-template-columns:1fr}
.person{display:grid;grid-template-columns:116px 1fr;gap:18px;align-items:start}
.person figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bone-3);aspect-ratio:4/5}
.person h3,.person .role,.person p{grid-column:2}
.person figure{grid-row:1/span 4}
.person h3{margin-top:0}
@media(min-width:560px){
  .people{grid-template-columns:repeat(2,1fr);gap:22px}
  .person{display:block}
  .person figure{border-radius:var(--r-lg);aspect-ratio:4/5}
  .person h3{margin-top:16px}
}
@media(min-width:900px){
  .people{grid-template-columns:repeat(3,1fr);gap:24px}
  .people--4{grid-template-columns:repeat(4,1fr)}
}
.person img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.person:hover img{transform:scale(1.035)}
.person h3{margin-top:16px;font-size:clamp(1rem,.95rem + .4vw,1.1875rem);font-weight:600;letter-spacing:-.02em}
.person .role{font-family:var(--mono);font-size:.5625rem;letter-spacing:.15em;color:var(--gold-deep);margin-top:6px;text-transform:uppercase}
.person p{font-size:.875rem;color:var(--muted);margin-top:10px;line-height:1.55}

/* --- Voices -------------------------------------------------------------- */
.voices{display:grid;gap:16px}
@media(min-width:900px){.voices{grid-template-columns:repeat(3,1fr);gap:20px}}
.voice{
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:clamp(22px,4vw,30px);display:flex;flex-direction:column;gap:18px;
}
.voice blockquote{font-size:.9375rem;line-height:1.68;color:#D6D8DB}
.voice__by{display:flex;align-items:center;gap:12px;margin-top:auto}
.voice__by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.voice__by b{display:block;font-size:.9375rem;font-weight:600}
.voice__by span{font-family:var(--mono);font-size:.5625rem;letter-spacing:.15em;color:var(--muted-dark)}
.voice__q{color:var(--gold);font-size:1.75rem;line-height:1;font-weight:700}

/* --- Pricing ------------------------------------------------------------- */
.plans{display:grid;gap:18px}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}}
.plan{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,34px);display:flex;flex-direction:column;gap:16px;position:relative;
}
.plan--feat{background:var(--ink);color:var(--bone);border-color:transparent}
@media(min-width:900px){.plan--feat{transform:scale(1.03);box-shadow:0 24px 60px -30px rgba(20,23,28,.6)}}
.plan--feat p{color:#B9BEC5}
.plan__badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--ink);border-radius:999px;padding:5px 14px;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;font-weight:500;white-space:nowrap;
}
.plan__tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--gold-deep)}
.plan--feat .plan__tag{color:var(--gold)}
.plan p{color:var(--muted);font-size:.9375rem}
.plan ul{display:grid;gap:11px;padding-top:6px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem}
.plan li svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--gold-deep)}
.plan li a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.plan li a:hover{text-decoration-thickness:2px}
.plan--feat li svg{color:var(--gold)}
.plan .btn{margin-top:auto}

/* --- FAQ ----------------------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:800px}
.faq details{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-weight:600;font-size:1rem;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--gold-deep);
  border-bottom:2px solid var(--gold-deep);transform:rotate(45deg) translateY(-3px);
  transition:transform .24s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .faq__a{padding:0 20px 20px;color:var(--muted);font-size:.9375rem;max-width:70ch}

/* --- Articles ------------------------------------------------------------ */
.posts{display:grid;gap:16px}
@media(min-width:640px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.posts{grid-template-columns:repeat(3,1fr);gap:20px}}
.post{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,4vw,28px);display:flex;flex-direction:column;gap:11px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post__tag{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;color:var(--gold-deep)}
.post h3{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.post p{font-size:.9375rem;color:var(--muted)}
.post__more{margin-top:auto;padding-top:8px;font-size:.8125rem;font-weight:600;color:var(--gold-deep)}
.post--feat{background:var(--ink);color:var(--bone);border-color:transparent}
.post--feat p{color:#B9BEC5}
.post--feat .post__tag,.post--feat .post__more{color:var(--gold)}
@media(min-width:900px){.post--feat{grid-column:span 3;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:clamp(28px,4vw,44px)}}

/* --- Forms --------------------------------------------------------------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:8px}
.field label{font-family:var(--mono);font-size:.625rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.field:focus-within label{color:var(--gold-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;
  /* Visible frame. The old 13% line read as an underline at arm's length on a
     phone; 26% draws an actual box without shouting. */
  border:1.5px solid rgba(20,23,28,.26);
  background:#fff;font-size:1rem;
  transition:border-color .16s,box-shadow .16s,background-color .16s;
  min-height:52px;-webkit-appearance:none;appearance:none;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(20,23,28,.42)}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6068' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(185,159,136,.28);
}
.field--err input,.field--err select,.field--err textarea{border-color:#B4453B;background:#FFF8F7}
.field .err{color:#B4453B;font-size:.8125rem;display:none}
.field--err .err{display:block}
.consent{
  display:flex;gap:12px;align-items:flex-start;font-size:.8125rem;
  color:var(--muted);line-height:1.55;
  padding:15px 16px;border:1.5px solid rgba(20,23,28,.26);border-radius:12px;
  background:#fff;cursor:pointer;transition:border-color .16s;
}
.consent:hover{border-color:rgba(20,23,28,.42)}
.consent:focus-within{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(185,159,136,.28)}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--gold-deep)}
.consent a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
@media(min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}}

.contact-panel{display:grid;gap:14px}
.contact-panel a{
  display:flex;gap:14px;align-items:center;padding:16px 18px;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r);transition:border-color .18s,transform .18s var(--ease);
}
.contact-panel a:hover{border-color:var(--gold);transform:translateX(3px)}
.contact-panel svg{width:20px;height:20px;flex:none;color:var(--gold-deep)}
.contact-panel b{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;color:var(--muted);font-weight:500}
.contact-panel span{display:block;font-size:.9375rem;font-weight:500;margin-top:3px;line-height:1.4}
@media(min-width:900px){
  .contact-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
}

/* --- CTA band ------------------------------------------------------------ */
.cta{background:var(--ink);color:var(--bone);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 78% 0%,rgba(185,159,136,.18),transparent 60%);
}
.cta .wrap{position:relative;z-index:1}
.cta .h2{max-width:16ch;margin-bottom:18px}
.cta p{color:#C4C8CD;max-width:56ch;margin-bottom:28px}
@media(min-width:900px){
  .cta__in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
  .cta p{margin-bottom:0}
}

/* --- Footer -------------------------------------------------------------- */
.footer{background:var(--ink);color:#C4C8CD;padding-block:clamp(48px,7vw,72px) 28px;border-top:1px solid var(--line-dark)}
.footer a:hover{color:var(--gold)}
.footer__top{display:grid;gap:34px}
@media(min-width:900px){.footer__top{grid-template-columns:1.4fr 2.6fr;gap:56px}}
.footer__brand .logo{color:var(--bone);margin-bottom:16px}
.footer__brand p{font-size:.875rem;line-height:1.6;max-width:34ch;color:#9CA3AB}
.footer__cols{display:grid;gap:28px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.footer__cols{grid-template-columns:repeat(4,1fr);gap:24px}}
.footer__cols h4{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;color:var(--muted-dark);font-weight:500;margin-bottom:14px;text-transform:uppercase}
.footer__cols a,.footer__cols span{font-size:.875rem;line-height:1.45;display:inline-block;padding-block:10px}
@media(min-width:900px){.footer__cols a,.footer__cols span{padding-block:6px}}
.footer__bot{
  margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;color:var(--muted-dark);
}
.footer__bot a{display:inline-block;padding-block:9px}
.socials{display:flex;gap:8px}
.socials a{
  width:44px;height:44px;border:1px solid var(--line-dark);border-radius:50%;
  display:grid;place-items:center;transition:border-color .18s,color .18s,background-color .18s;
}
.socials a:hover{border-color:var(--gold);color:var(--gold);background:rgba(185,159,136,.08)}
.socials svg{width:16px;height:16px}

/* --- Cookie note --------------------------------------------------------- */
.cookie{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
  background:var(--ink);color:#C4C8CD;border:1px solid var(--line-dark);border-radius:var(--r);
  padding:18px;display:none;gap:14px;flex-direction:column;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.6);font-size:.8125rem;line-height:1.55;
}
.cookie.is-on{display:flex}
.eyebrow--c{justify-content:center}
.center .h2{margin-inline:auto}
.lede--c{margin:14px auto 26px}
.phead--tall{padding-block:clamp(76px,15vw,150px)}
.post__feat-h{margin-top:12px}
.cookie a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cookie__btns{display:flex;gap:10px}
.cookie__btns .btn{min-height:42px;padding:9px 20px;font-size:.8125rem;flex:1}
@media(min-width:768px){
  .cookie{left:auto;right:20px;bottom:20px;max-width:420px}
  .cookie__btns .btn{flex:none}
}

/* --- WhatsApp float ------------------------------------------------------ */
/* Brand ink and gold rather than WhatsApp green, so it belongs to the site. */
.wa{
  position:fixed;right:14px;bottom:14px;z-index:50;width:54px;height:54px;border-radius:50%;
  background:var(--ink);color:var(--gold);display:grid;place-items:center;
  border:1px solid rgba(185,159,136,.38);
  box-shadow:0 12px 30px -12px rgba(20,23,28,.7);
  transition:transform .2s var(--ease),background-color .2s,border-color .2s;
}
.wa:hover{transform:scale(1.07);background:var(--ink-3);border-color:var(--gold)}
.wa svg{width:26px;height:26px}
body.cookie-on .wa{bottom:calc(14px + 132px)}
@media(min-width:768px){body.cookie-on .wa{bottom:14px;right:calc(14px + 0px)}}

/* --- Page header (subpages) ---------------------------------------------- */
.phead{background:var(--ink);color:var(--bone);padding-block:clamp(48px,8vw,88px);position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 88% 0%,rgba(185,159,136,.15),transparent 60%)}
.phead .wrap{position:relative;z-index:1}
.phead .h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.75rem);max-width:18ch;margin-bottom:18px}
.phead .lede{color:#C4C8CD;margin-bottom:0}
.crumbs{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--muted-dark);margin-bottom:18px;text-transform:uppercase}
.crumbs a:hover{color:var(--gold)}

/* --- Legal / prose ------------------------------------------------------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);font-weight:600;letter-spacing:-.02em;margin:clamp(32px,5vw,48px) 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1rem;font-weight:600;margin:22px 0 8px}
.prose p{color:var(--muted);margin-bottom:14px}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.prose .mono-h{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--gold-deep);display:block;margin-bottom:8px}

/* --- Reveal on scroll ---------------------------------------------------- */
/* Gated on .js, which the inline head script sets synchronously. With JS off
   the class never appears and every .rv block is visible from first paint. */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* --- Utilities ----------------------------------------------------------- */
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Opening splash (homepage, once per session) ------------------------ */
/* TIMING — the only two numbers worth touching:
     --splash-hold  how long the overlay stays before it starts fading
     --splash-fade  length of the fade itself
   Total on screen = hold + fade. Currently 4.15s + 0.8s = 4.95s.
   The choreography below finishes at ~3.1s, so the finished lockup sits
   settled for a beat before it clears. Shorten the hold to speed it up;
   nothing else needs changing.

   Base state (below) is the reduced-motion and no-JS fallback: the mark is
   already drawn, everything visible, and the overlay fades itself out via
   splash-out with fill:forwards. It clears even if JS never runs.
   .splash-done (set synchronously in the head) hides it with no flash. */
.splash{
  --splash-hold:2.4s;
  --splash-fade:.6s;
  position:fixed;inset:0;z-index:200;background:var(--ink);color:#F2F1ED;
  display:grid;place-items:center;padding:24px;
  animation:splash-out var(--splash-fade) var(--ease) forwards var(--splash-hold);
}
.splash-done .splash{display:none}
.splash__in{display:flex;flex-direction:column;align-items:center;text-align:center}
.splash__mark{width:clamp(84px,20vw,116px);height:auto;color:#F2F1ED}
.splash__grid{stroke-dashoffset:0}
.splash__nodes,.splash__node-hi{opacity:1}
.splash__node-hi{fill:var(--gold)}
.splash__word{display:block;margin-top:clamp(30px,5.5vw,42px)}
.splash__word img{height:clamp(58px,15vw,92px);width:auto;display:block}
.splash__rule{
  width:52px;height:2px;background:var(--gold);border-radius:2px;
  margin:clamp(24px,4.5vw,34px) 0 clamp(16px,3vw,20px);transform-origin:center;
}
.splash__desc{
  font-family:var(--mono);font-size:clamp(.6875rem,2.6vw,.8125rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark);
}
@keyframes splash-out{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes splash-draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes splash-fade{from{opacity:0}to{opacity:1}}
@keyframes splash-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes splash-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes splash-grow{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

/* Full choreography only when motion is welcome.
   Lattice draws (0.2 to 1.45s), nodes settle (to 1.8s), the gold node lands
   (to 2.25s), wordmark rises (to 2.4s), hairline draws (to 2.75s),
   descriptor arrives (to 3.1s), then it holds before fading. */
@media(prefers-reduced-motion:no-preference){
  .splash{--splash-hold:4.15s;--splash-fade:.8s}
  .splash__grid{stroke-dasharray:320;stroke-dashoffset:320;animation:splash-draw 1.25s var(--ease) forwards .2s}
  .splash__nodes{opacity:0;animation:splash-fade .55s ease forwards 1.25s}
  .splash__node-hi{opacity:0;animation:splash-pop .6s var(--ease) forwards 1.65s}
  .splash__word{opacity:0;animation:splash-rise .85s var(--ease) forwards 1.55s}
  .splash__rule{opacity:0;animation:splash-grow .7s var(--ease) forwards 2.05s}
  .splash__desc{opacity:0;animation:splash-rise .85s var(--ease) forwards 2.25s}
}

/* Tap / scroll / key dismisses it immediately. */
.splash--skip{animation:splash-out .4s var(--ease) forwards !important}