/* NovaGuardian — design tokens from Michelle's spec. Fonts self-hosted (no third-party requests). */
@font-face{font-family:Bricolage;src:url(fonts/bricolage-grotesque-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Bricolage;src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Bricolage;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Atkinson;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Instrument;src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#FBF7F3; --ink:#1E2B47; --body:#3D4860; --muted:#5F6A80;
  --teal:#0F7A68; --teal-h:#0A5C4E; --amber:#B5652A; --slate:#33467A;
  --sand:#F6E4DC; --sky:#E7ECF6; --mint:#EEF5F2;
  --b-fam:#EFE5DC; --b-org:#E3E6EE; --i-fam:#D9CFC6; --i-org:#C9D0DE;
  --err:#A0331D;
  --shadow:0 30px 60px -40px rgba(30,43,71,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 18px/1.65 Atkinson,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.btn,button{font-family:Bricolage,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.015em;text-wrap:balance}
h1,h2,h3{color:var(--ink);margin:0 0 .5em;line-height:1.1}
p{margin:0 0 1em}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.col{max-width:560px;margin:0 auto;padding:0 24px}

/* header */
.hd{padding:22px 0}
.hd .in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.brand b{font-family:Bricolage;font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.015em}
.lang{font-size:16px;color:var(--muted);white-space:nowrap}
.lang a{color:var(--ink);font-weight:700;text-decoration:none}
.lang a:hover{text-decoration:underline}
.back{font-size:17px;color:var(--ink);text-decoration:none;font-weight:700}
.back:hover{text-decoration:underline}

/* home */
.kicker{font-family:Instrument;font-style:italic;font-size:26px;line-height:1.25;
  color:var(--amber);margin:0 0 14px}
.kicker.sl{color:var(--slate)}
.intro{max-width:820px;padding-top:14px}
.intro h1{font-weight:700;font-size:clamp(32px,4.2vw,50px)}
.intro p{font-size:20px;color:var(--body);max-width:36em}
.illo{margin:40px 0 46px}
.illo svg{width:100%;height:auto;display:block;border-radius:24px}
h2.sec{font-size:clamp(26px,3vw,34px);font-weight:700;margin:0 0 26px;max-width:22em}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.choice{display:block;text-decoration:none;border-radius:28px;padding:36px;
  transition:transform .18s ease,box-shadow .18s ease}
.choice:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.choice.a{background:var(--sand)}
.choice.b{background:var(--sky)}
.choice svg.ic{width:60px;height:60px;display:block;margin-bottom:18px;
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.choice.a svg.ic{stroke:var(--amber)}
.choice.b svg.ic{stroke:var(--slate)}
.choice p{font-size:18px;margin:0 0 24px}
.choice.a p{color:#4A3A35}
.choice.b p{color:var(--body)}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  font-family:Bricolage;font-weight:700;font-size:22px;min-height:56px;padding:0 28px;
  color:#fff;border:0;cursor:pointer;line-height:1.1;text-align:center}
.choice.a .pill{background:var(--teal)}
.choice.a:hover .pill{background:var(--teal-h)}
.choice.b .pill{background:var(--ink)}
.subtle{font-size:17px;color:var(--muted);margin:30px 0 70px}
.subtle a{color:var(--ink);font-weight:700;text-decoration:none}
.subtle a:hover{text-decoration:underline}

/* forms */
.formtop{padding-top:16px}
.formtop .kicker{font-size:24px}
.formtop h1{font-size:clamp(32px,4.4vw,46px);font-weight:700;margin-bottom:26px}
.formtop p.sub{font-size:18px;color:var(--body);margin-bottom:26px}
.card{background:#fff;border-radius:28px;padding:32px;box-shadow:var(--shadow);margin-bottom:70px}
.card.fam{border:1px solid var(--b-fam)}
.card.org{border:1px solid var(--b-org)}
label{display:block;font-weight:700;font-size:16px;color:var(--ink);margin:0 0 7px}
input[type=text],input[type=email],textarea{width:100%;font:400 18px/1.5 Atkinson,sans-serif;
  color:var(--ink);background:#fff;border:1.5px solid var(--i-org);border-radius:14px;
  min-height:48px;padding:12px 14px}
.fam input,.fam textarea{border-color:var(--i-fam)}
textarea{min-height:140px;resize:vertical;line-height:1.6}
.f{margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cons{display:flex;gap:12px;align-items:flex-start;margin:22px 0}
.cons input{width:22px;height:22px;flex:0 0 22px;margin-top:3px;accent-color:var(--teal)}
.cons label{font-weight:400;font-size:16px;line-height:1.55;color:var(--body);margin:0}
.cons a{color:var(--ink)}
.submit{width:100%;min-height:52px;border-radius:999px;border:0;cursor:pointer;
  font-family:Bricolage;font-weight:700;font-size:20px;color:#fff;background:var(--teal)}
.submit:hover{background:var(--teal-h)}
.submit.navy{background:var(--ink)}
.submit.navy:hover{background:#16213a}
.submit[disabled]{opacity:.6;cursor:default}
.err{display:none;font-weight:700;color:var(--err);font-size:17px;margin:0 0 14px}
.done{text-align:center;padding:6px 0}
.done svg{width:48px;height:48px;margin:0 auto 16px;display:block;
  fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.done h2{font-size:26px;margin-bottom:10px}
.done p{font-size:18px}
.done a{color:var(--ink);font-weight:700}

/* organisation choice cards + chips */
.band{background:var(--ink);padding:64px 0;margin-bottom:0}
.band .cardwrap{max-width:640px;margin:0 auto;padding:0 24px}
.band .card{background:var(--paper);box-shadow:none;border:0;margin:0}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 56px}
.ocard{position:relative;text-align:left;border:2px solid transparent;border-radius:24px;
  padding:28px;cursor:pointer;font:inherit;transition:transform .18s ease,box-shadow .18s ease}
.ocard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ocard[aria-pressed=true]{border-color:var(--ink)}
.ocard h3{font-size:24px;font-weight:700;margin:0 0 10px;padding-right:40px}
.ocard p{font-size:17px;color:var(--body);margin:0}
.ocard .bd{position:absolute;top:22px;right:22px;width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid #CFD5E0;display:grid;place-items:center;
  font-size:15px;color:transparent;line-height:1}
.ocard[aria-pressed=true] .bd{background:var(--ink);border-color:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.chip{border-radius:999px;border:1.5px solid var(--i-org);background:#fff;color:var(--ink);
  font:700 16px/1 Bricolage,sans-serif;padding:11px 18px;min-height:44px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* privacy page */
.doc{max-width:720px;margin:0 auto;padding:16px 24px 70px}
.doc h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:8px}
.doc .upd{font-size:16px;color:var(--muted);margin-bottom:28px}
.doc h2{font-size:22px;font-weight:700;margin:34px 0 10px}
.doc li{margin-bottom:.5em}
.doc ul{padding-left:1.15em}

@media(max-width:860px){
  .choices{grid-template-columns:1fr}
  .ocards{grid-template-columns:1fr}
}
@media(max-width:620px){
  .two{grid-template-columns:1fr}
  .choice{padding:28px}
  .card{padding:26px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .choice:hover,.ocard:hover{transform:none}
}
