/* EMERGE, 3merg3.com
   One-page site. Brand from branding/moodboard/emerge-moodboard-v4.html: Deep Hour, Slate Tide, Brass, Mist, Sage, Pewter;
   Bodoni Moda for headlines, Hanken Grotesk for body, IBM Plex Mono for numbers and labels.
   The site uses fixed brand grounds (dark and light sections alternate) rather than following the system theme. */

:root{
  --deep:#161B26; --slate:#2E3A4B; --brass:#B08D57; --mist:#E8EAE7; --sage:#7F9A8C; --pewter:#6E7684;
  /* Light grounds */
  --paper:#EEEFEC; --surface:#F8F8F6; --ink:#161B26; --ink-body:#343B47; --ink-muted:#5A6270; --line:#D6D9D5;
  /* Dark grounds */
  --on-dark:#E8EAE7; --on-dark-soft:#C3C8CF; --on-dark-muted:#9BA2AE; --line-dark:#2A3242;
  --error:#E3A28F;
  /* Type */
  --f-display:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --header-h:72px;
  --ease:cubic-bezier(.2,.6,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
/* Form controls don't inherit the page font by default; this keeps every control in the brand fonts */
button,input,select,textarea{font-family:inherit}
/* The moodboard's heaviest Hanken Grotesk weight is 600, so bold text uses that rather than 700 */
b,strong{font-weight:600}
ul,ol{padding:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{max-width:1200px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--mist);color:var(--deep);padding:10px 16px;font-size:14px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* Type */
.overline{font-family:var(--f-mono);font-size:11px;font-weight:500;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.overline::before{content:"";display:inline-block;vertical-align:middle;width:24px;height:1px;margin:-2px 12px 0 0;background:var(--brass)}
.display{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.4vw,60px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.display em{font-style:italic}
/* From moodboard v4: Bodoni's hairline hyphen vanishes at large optical sizes, so hyphens in headings use a lower opsz */
.hy{font-weight:500;font-variation-settings:"opsz" 18}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55;font-weight:300;color:var(--ink)}

.on-dark{color:var(--on-dark)}
.on-dark .overline{color:var(--on-dark-muted)}
.on-dark .lead{color:var(--on-dark)}
.on-dark p{color:var(--on-dark-soft)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-body);font-size:14px;font-weight:500;line-height:1;letter-spacing:.06em;padding:18px 26px;border-radius:2px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn-light{background:var(--mist);color:var(--deep)}
.btn-light:hover{background:#fff}
.btn-ghost{border-color:rgba(232,234,231,.3);color:var(--mist);background:transparent}
.btn-ghost:hover{border-color:var(--mist)}
.btn-sm{min-height:44px;padding:12px 18px;font-size:13px}
.btn .short{display:none}
@media (max-width:420px){.btn .long{display:none}.btn .short{display:inline}}
.btn[disabled]{opacity:.6;cursor:progress}

/* Header */
/* Always solid Deep Hour, on every page and at every scroll position, so the white logo and the menu never sit on a light section */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);color:var(--on-dark);background:var(--deep);box-shadow:0 1px 0 rgba(232,234,231,.08)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;flex:none;min-height:44px;text-decoration:none}
.logo{width:clamp(116px,11vw,140px);height:auto}

.site-nav{display:flex;align-items:center;gap:40px}
.site-nav ul{display:flex;gap:32px;list-style:none}
.site-nav ul a{display:block;padding:8px 0;font-size:14px;letter-spacing:.03em;color:var(--on-dark-soft);text-decoration:none;transition:color .2s}
.site-nav ul a:hover{color:var(--mist)}
.menu-toggle{display:none}

@media (max-width:960px){
  .menu-toggle{display:inline-flex;align-items:center;gap:12px;min-height:44px;background:none;border:0;padding:12px 0;color:var(--mist);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
  .menu-icon{display:block;width:20px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
  .site-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:36px;padding:24px max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:var(--deep);overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
  .menu-open .site-nav{visibility:visible;opacity:1}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav ul a{font-family:var(--f-display);font-size:32px;letter-spacing:-.01em;color:var(--mist);padding:16px 0;border-bottom:1px solid var(--line-dark)}
  .site-nav .btn{align-self:flex-start}
}

/* Hero: first light over still water. The sky holds the words; a brass horizon separates it from the water below. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--deep);overflow:hidden;overflow:clip}
.hero-sky{position:relative;flex:1;display:flex;align-items:center;background:linear-gradient(180deg,#161B26 0%,#161B26 42%,#202938 84%,#2A3445 100%)}
.hero-sky::before{content:"";position:absolute;left:0;right:0;bottom:0;height:75%;background:radial-gradient(ellipse 46% 62% at 72% 100%,rgba(214,178,124,.42),rgba(176,141,87,.12) 50%,transparent 76%);pointer-events:none;animation:dawn 3.4s var(--ease) both}
@keyframes dawn{from{opacity:.1;transform:translateY(10%)}to{opacity:1;transform:none}}
.hero-inner{position:relative;z-index:1;width:100%;padding-top:calc(var(--header-h) + clamp(32px,7vh,96px));padding-bottom:clamp(40px,7vh,88px)}
.hero h1{margin-top:28px;max-width:16ch;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,5.4vw,80px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.h1-a{display:block;color:#A9AEB6}
.h1-b{display:block;font-style:italic;color:var(--mist)}
.hero-lede{max-width:50ch;margin-top:32px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:44px}
.hero .hero-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);max-width:30ch;line-height:1.6}
.hero-inner > *{animation:rise 1.1s var(--ease) both}
.hero-inner > :nth-child(2){animation-delay:.12s}
.hero-inner > :nth-child(3){animation-delay:.24s}
.hero-inner > :nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-water{position:relative;background:linear-gradient(180deg,#1C2332 0%,#131824 100%)}
.hero-water::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(201,168,119,0) 0%,rgba(201,168,119,.22) 34%,rgba(226,196,148,.95) 72%,rgba(201,168,119,.22) 92%,rgba(201,168,119,0) 100%)}
.hero-water::after{content:"";position:absolute;top:1px;left:0;right:0;bottom:0;background:radial-gradient(ellipse 20% 80% at 72% 0%,rgba(214,178,124,.2),transparent 72%);pointer-events:none}
.hero-facts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px 40px;list-style:none;padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:11px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted)}

/* Sections */
.section{position:relative;padding-block:clamp(64px,8vw,112px)}
.section-paper{background:var(--paper)}
.section-surface{background:var(--surface)}
.section-paper + .section-surface,.section-surface + .section-paper{border-top:1px solid var(--line)}
.section-slate{background:var(--slate)}
.section-deep{background:var(--deep)}
.section-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)}
.section-head .lead{max-width:56ch}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start}
.split-head{display:grid;gap:24px;position:sticky;top:calc(var(--header-h) + 40px)}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split-head{position:static}
}

/* Thin line icons, drawn from the symbols at the top of index.html */
.icon{display:block;flex:none;width:28px;height:28px;color:var(--brass)}
.sub{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.15}

/* Infographic: the programme at a glance */
.glance{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.glance li{padding:24px 20px;border-left:1px solid var(--line)}
.glance li:first-child{padding-left:0;border-left:0}
.glance b{display:block;font-family:var(--f-mono);font-weight:400;font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.glance span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--ink-muted)}
@media (max-width:760px){
  .glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glance li{padding:18px 0 18px 18px;border-top:1px solid var(--line)}
  .glance li:first-child{grid-column:1 / -1;border-top:0}
  .glance li:nth-child(even){padding-left:0;border-left:0}
}

/* Infographic: you at the centre of your team */
.team-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(40px,6vw,72px)}
.team-copy{display:grid;gap:14px}
.team-copy p{color:var(--ink-body)}
.team-copy .muted{font-size:15px;color:var(--ink-muted)}
.hub{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hub-role{display:flex;flex-direction:column;gap:8px;min-height:190px;padding:22px;background:var(--surface);border:1px solid var(--line)}
.hub-role h3{font-family:var(--f-display);font-weight:400;font-size:clamp(19px,2vw,24px);line-height:1.15}
.hub-role p{font-size:14px;line-height:1.5;color:var(--ink-muted)}
/* Text keeps to the outer corners, leaving the centre clear for the You badge */
.hub-tl,.hub-tr{padding-bottom:60px}
.hub-bl,.hub-br{justify-content:flex-end;padding-top:60px}
.hub-tr,.hub-br{align-items:flex-end;text-align:right}
.hub-you{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--deep);color:var(--mist);font-family:var(--f-display);font-style:italic;font-size:24px;box-shadow:0 0 0 8px var(--paper),0 0 0 9px var(--brass)}
@media (max-width:900px){.team-block{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .hub-role{min-height:176px;padding:14px}
  .hub-role h3{font-size:clamp(14px,4.3vw,18px)}
  .hub-role p{font-size:13px}
  .hub-tl,.hub-tr{padding-bottom:50px}
  .hub-bl,.hub-br{padding-top:50px}
  .hub-you{width:70px;height:70px;margin:-35px 0 0 -35px;font-size:19px;box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--brass)}
}
@media (max-width:360px){.hub-role{padding:12px}}

/* Infographic: the four stages before you begin */
.journey{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none}
.journey::before{content:"";position:absolute;top:24px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,var(--brass),rgba(176,141,87,.25))}
.journey li{position:relative;display:grid;gap:8px;align-content:start}
.node{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border-radius:50%;background:var(--surface);border:1px solid var(--brass);font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.journey h3{font-size:18px;font-weight:500;line-height:1.3}
.journey p{font-size:15px;line-height:1.5;color:var(--ink-muted)}
@media (max-width:760px){
  .journey{grid-template-columns:minmax(0,1fr);gap:22px}
  .journey::before{top:24px;bottom:24px;left:24px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--brass),rgba(176,141,87,.25))}
  .journey li{grid-template-columns:48px minmax(0,1fr);column-gap:18px;row-gap:2px}
  .node{grid-row:1 / span 2;margin:0}
  .journey h3{align-self:end}
}

/* Every day */
.daily{margin-top:clamp(40px,6vw,72px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.daily-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px;list-style:none}
.daily-grid li{display:grid;gap:10px;align-content:start;padding:22px;background:var(--paper);border:1px solid var(--line)}
.daily-grid h4{font-size:17px;font-weight:500;line-height:1.3}
.daily-grid p{font-size:14.5px;line-height:1.5;color:var(--ink-muted)}
@media (max-width:1024px){.daily-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .daily-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .daily-grid li{grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px}
  .daily-grid .icon{grid-row:1 / span 2}
}

/* Infographic: conditions in four groups */
.cond-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cond-group{padding:22px;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--brass)}
.cond-group h3{margin-bottom:14px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tags li{padding:7px 12px;background:var(--paper);border:1px solid var(--line);font-size:14px;line-height:1.3;color:var(--ink)}
.scope-note{max-width:70ch;margin-top:24px;font-size:15px;line-height:1.6;color:var(--ink-muted)}
.scope-note strong{color:var(--ink)}
@media (max-width:1024px){.cond-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cond-groups{grid-template-columns:minmax(0,1fr);gap:10px}.cond-group{padding:16px}}

/* Infographic: what you give and what we take care of */
.exchange{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:stretch}
.ex-col{padding:clamp(22px,3vw,32px);background:rgba(46,58,75,.3);border:1px solid var(--line-dark)}
.ex-col > .overline{margin-bottom:18px}
.ex-give{display:grid;gap:16px;list-style:none}
.ex-give h3{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:26px;line-height:1.1;color:var(--mist)}
.ex-give p{margin-top:4px;font-size:15px}
.ex-we{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none}
.ex-we li{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line-dark);font-size:15px;color:var(--mist)}
.ex-we li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sage)}
.on-dark .ex-foot{margin-top:16px;font-size:14px;color:var(--on-dark-muted)}
.ex-mid{position:relative;display:grid;place-items:center}
.ex-mid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-dark)}
.ex-mid span{position:relative;display:grid;place-items:center;width:88px;height:88px;border:1px solid var(--brass);border-radius:50%;background:var(--deep);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--brass)}
@media (max-width:760px){
  .exchange{grid-template-columns:minmax(0,1fr)}
  .ex-mid{height:88px}
  .ex-mid::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}
}

/* Infographic: 12-month programme with a 3-month minimum, then the choice after */
.timeline{margin-top:clamp(40px,6vw,64px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line-dark)}
.tl{margin-top:20px;padding-bottom:52px}
.tl-bar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.tl-bar i{height:14px;background:rgba(232,234,231,.14)}
.tl-bar i.min{background:var(--brass)}
.tl-labels{position:relative}
.tl-labels span{position:absolute;top:10px;font-family:var(--f-mono);font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted);white-space:nowrap}
.tl-labels .at0{left:0}
.tl-labels .at3{left:25%;padding-left:8px;border-left:1px solid var(--brass)}
.tl-labels .at12{right:0;text-align:right}
.tl-after{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.on-dark .tl-after-label{align-self:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.tl-path{padding:18px 20px;border:1px solid var(--line-dark)}
.tl-path h4{font-size:16px;font-weight:500;color:var(--mist)}
.tl-path p{margin-top:4px;font-size:14px}
.on-dark .tl-note{margin-top:16px;font-size:15px;color:var(--on-dark-muted)}
@media (max-width:760px){.tl-after{grid-template-columns:minmax(0,1fr);gap:10px}}

/* What you can expect */
.outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none}
.outcomes li{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);font-size:16px;line-height:1.35;color:var(--ink)}
.outcomes li::before{content:"";flex:none;width:18px;height:2px;background:var(--sage)}
.small-note{margin-top:18px;font-size:15px;color:var(--ink-muted)}
@media (max-width:760px){.outcomes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.outcomes li{gap:10px;padding:14px;font-size:15px}.outcomes li::before{width:12px}}

/* Discretion */
.never-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none}
.never-grid li{display:grid;gap:12px;align-content:start;padding:22px;border:1px solid rgba(232,234,231,.16);font-size:15.5px;line-height:1.45;color:var(--mist)}
.never-grid .icon{color:var(--on-dark-muted)}
@media (max-width:900px){.never-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.never-grid{gap:10px}.never-grid li{padding:16px;font-size:14.5px}}

/* Consultation */
/* The glow stays inside the section's box: overflowing it would make the section a hidden scroll container that shifts sideways when a field takes focus */
.consult{overflow:hidden;overflow:clip;isolation:isolate}
.consult::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 42% 55% at 86% 108%,rgba(176,141,87,.24),transparent 72%);pointer-events:none}
.on-dark .consult-note{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--on-dark-muted)}

.form{position:relative;display:grid;gap:28px;padding:clamp(24px,4vw,48px);background:rgba(46,58,75,.38);border:1px solid var(--line-dark)}
.field{display:grid;gap:8px;min-width:0}
.field > label:not(.check){font-family:var(--f-mono);font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.opt{text-transform:none;letter-spacing:.02em;font-weight:400}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;padding:10px 0 12px;font:inherit;font-size:17px;line-height:1.4;color:var(--mist);background:transparent;border:0;border-bottom:1px solid rgba(232,234,231,.28);border-radius:0;transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--brass);box-shadow:0 1px 0 var(--brass)}
.form ::placeholder{color:#7D838F}
.form select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239BA2AE' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.form select:invalid{color:#7D838F}
.form option{color:var(--deep);background:var(--mist)}
.form textarea{min-height:96px;resize:vertical}
.form [aria-invalid="true"]{border-bottom-color:var(--error)}
.on-dark .hint{font-size:13px;line-height:1.5;color:var(--on-dark-muted)}
.on-dark .err{font-size:13px;line-height:1.4;color:var(--error)}
.err:empty{display:none}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;font-size:14px;line-height:1.55;color:var(--on-dark-soft);cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--brass);cursor:pointer}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:4px}
.on-dark .form-status{font-size:14px;line-height:1.5}
.on-dark .form-status.is-error{color:var(--error)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{display:grid;gap:16px;align-content:center;min-height:320px}
.form-done h3{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.1;color:var(--mist)}

/* Footer */
.site-footer{padding-block:clamp(56px,8vw,96px) calc(32px + env(safe-area-inset-bottom,0px));background:#10141C;border-top:1px solid var(--line-dark)}
.footer-logo{width:180px;height:auto}
.on-dark .footer-line{margin-top:18px;font-size:15px;color:var(--on-dark-muted)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-top:56px;padding-top:40px;border-top:1px solid var(--line-dark)}
.site-footer address{margin-top:16px;font-style:normal;line-height:1.7;color:var(--on-dark-soft)}
.footer-grid ul{display:grid;margin-top:10px;list-style:none}
/* Padding gives each footer link a full-size touch target (44px on phones) */
.footer-grid a{display:inline-block;padding:6px 0;color:var(--on-dark-soft);text-decoration:none;transition:color .2s}
@media (max-width:760px){.footer-grid a{padding:10px 0}}
.footer-grid a:hover{color:var(--mist)}
.on-dark .footer-reg{max-width:34ch;margin-top:14px;font-size:13px;line-height:1.6;color:var(--on-dark-muted)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#858C98}
@media (max-width:760px){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-grid > :first-child{grid-column:1 / -1}}

/* Details still to fill in before publishing. deploy.mjs refuses to publish while any remain. */
.todo{padding:0 4px;background:#F3E3C3;color:var(--deep);font-family:var(--f-mono);font-size:.85em;letter-spacing:0;text-transform:none}

/* Legal pages: solid header, readable measure, contents list beside the text */
.legal{padding-top:calc(var(--header-h) + clamp(56px,8vw,112px));padding-bottom:clamp(80px,10vw,140px)}
.legal-head{display:grid;gap:20px;max-width:780px;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.legal-head h1{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,5.4vw,72px);line-height:1.05;letter-spacing:-.015em}
.legal-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-muted)}
.legal-intro{max-width:62ch}
.legal-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.legal-toc{position:sticky;top:calc(var(--header-h) + 32px)}
.legal-toc ol{display:grid;margin-top:16px;list-style:none;border-top:1px solid var(--line)}
.legal-toc a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--ink-muted);text-decoration:none;transition:color .2s}
.legal-toc a:hover{color:var(--ink)}
.legal-body{max-width:68ch}
/* Adds to the page's scroll-padding (the header height), so headings land 24px below the header */
.legal-body section{scroll-margin-top:24px}
.legal-body section + section{margin-top:48px}
.legal-body h2{margin-bottom:16px;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.6vw,32px);line-height:1.2}
.legal-body h3{margin:28px 0 8px;font-size:17px;font-weight:600;line-height:1.4}
.legal-body p,.legal-body li{font-size:16.5px;line-height:1.7;color:var(--ink-body)}
.legal-body p + p,.legal-body p + ul,.legal-body ul + p,.legal-body dl + p{margin-top:14px}
.legal-body ul{display:grid;gap:8px;padding-left:1.2em}
.legal-body dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;margin:16px 0 0;padding:20px 24px;background:var(--surface);border:1px solid var(--line)}
.legal-body dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);padding-top:3px}
.legal-body dd{margin:0;color:var(--ink)}
.legal-body a,.legal-intro a,.check a{color:inherit;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px}
@media (max-width:900px){
  .legal-layout{grid-template-columns:minmax(0,1fr)}
  .legal-toc{position:static}
}
@media (max-width:480px){.legal-body dl{grid-template-columns:minmax(0,1fr);gap:2px}.legal-body dd + dt{margin-top:10px}}

/* Scroll reveal: only hidden once script.js can reveal it again */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}