/* ============================================================
   HireFlows Law — Thomas Philip careers site
   Tokens mirror tp-recruitment-dashboard/assets/css/tokens.css
   so this site and the internal dashboard read as one system.
   No webfonts — high-quality system serifs, CSP-safe.
   ============================================================ */

:root{
  --navy:#0F1720; --navy-soft:#1c2632; --navy-deep:#080E15;
  --gold:#B89554; --gold-soft:#d2b378; --gold-deep:#9A7840;
  /* Small gold text needs more contrast than the brand gold gives.
     #9A7840 at 11px is 3.82:1 on this cream, below the 4.5 AA asks
     for. This is the same hue, dark enough to read. */
  --gold-text:#8A6A38; --gold-wash:#f5edda;
  --cream:#F5F3EF; --cream-deep:#ECE7DD; --paper:#FAF7F0;
  --ink:#2c3440; --ink-soft:#5a6573; --ink-faint:#8a929d;
  --rule:#d8d2c4; --rule-soft:#e8e2d3;

  /* Iowan/Charter/Hoefler ship with macOS and are far better cut than
     Georgia; Georgia is the cross-platform fallback. */
  --serif:'Iowan Old Style','Charter','Hoefler Text','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --radius:3px; --radius-lg:6px;
  --shadow:0 1px 2px rgba(15,23,32,.06);
  --shadow-lg:0 1px 2px rgba(15,23,32,.05),0 20px 48px -30px rgba(15,23,32,.35);
  --wrap:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}

img,svg{ max-width:100%; } img{ display:block; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--s6); }
.wrap-narrow{ max-width:780px; margin:0 auto; padding:0 var(--s6); }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:normal; color:var(--navy);
  line-height:1.16; letter-spacing:-0.012em; font-feature-settings:'kern' 1,'liga' 1;
}
h1{ font-size:clamp(38px,5.8vw,66px); line-height:1.04; letter-spacing:-0.022em; }
h2{ font-size:clamp(28px,3.7vw,42px); letter-spacing:-0.018em; }
h3{ font-size:21px; line-height:1.28; }
h4{ font-size:17px; }
p+p{ margin-top:var(--s4); }

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--gold-text);
}
.eyebrow.ruled-tail{ display:flex; align-items:center; gap:14px; }
.eyebrow.ruled-tail::after{
  content:''; flex:1; height:1px; max-width:120px;
  background:linear-gradient(to right,var(--gold),transparent);
}

.lede{ font-size:clamp(17px,1.9vw,20px); line-height:1.6; color:var(--ink-soft); max-width:34em; }
.muted{ color:var(--ink-soft); }
.small{ font-size:14.5px; } .tiny{ font-size:13px; } .center{ text-align:center; }
a{ color:var(--navy); } a:hover{ color:var(--gold-deep); }

/* ---------- crest ---------- */
.crest{ flex-shrink:0; display:block; }
.crest .c-rule{ stroke:var(--gold); }
.crest .c-frame{ stroke:var(--navy); }
.crest .c-mono{ fill:var(--navy); font-family:var(--serif); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:500;
  padding:13px 24px; border-radius:var(--radius);
  border:1px solid var(--navy); background:var(--navy); color:var(--cream);
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -14px rgba(15,23,32,.6); }
.btn .arw{ transition:transform .2s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--rule); }
.btn-ghost:hover{ background:var(--cream); color:var(--navy); border-color:var(--navy); }
.btn-sm{ padding:9px 17px; font-size:14px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.textlink{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:500; color:var(--navy); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.textlink:hover{ color:var(--gold-deep); border-color:var(--gold-deep); }
.dark .textlink{ color:var(--cream); border-color:var(--gold); }
.dark .textlink:hover{ color:var(--gold-soft); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(250,247,240,.93); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); min-height:74px; padding-top:10px; padding-bottom:10px;
}
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.wordmark{
  font-family:var(--serif); font-size:21px; color:var(--navy);
  text-decoration:none; white-space:nowrap; letter-spacing:-0.012em; line-height:1.15;
}
.wordmark .accent{ color:var(--gold-deep); }
.wordmark small{
  display:block; font-family:var(--sans); font-size:9.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px;
}
.site-nav{ display:flex; align-items:center; gap:var(--s6); }
.site-nav a{
  font-size:15px; color:var(--ink-soft); text-decoration:none;
  position:relative; padding-bottom:3px; transition:color .18s var(--ease);
}
.site-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .24s var(--ease);
}
.site-nav a:hover{ color:var(--navy); }
.site-nav a:hover::after{ transform:scaleX(1); }
.site-nav a[aria-current="page"]{ color:var(--navy); font-weight:500; }
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{ flex-shrink:0; }

/* ---------- sections ---------- */
.sec{ padding:clamp(64px,8vw,110px) 0; }
.sec-tight{ padding:clamp(48px,5.5vw,76px) 0; }
.ruled{ border-top:1px solid var(--rule); }
.tinted{ background:var(--cream); }
.dark{
  background:var(--navy); color:#b9c2cd;
  background-image:
    radial-gradient(120% 80% at 80% 0%,rgba(184,149,84,.13),transparent 60%),
    radial-gradient(90% 70% at 0% 100%,rgba(184,149,84,.07),transparent 60%);
}
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--cream); }
.dark p{ color:#aab4c0; } .dark .lede{ color:#b9c2cd; }
.dark .eyebrow{ color:var(--gold-soft); } .dark .muted{ color:#8e99a6; }

.sec-head{
  display:grid; grid-template-columns:190px 1fr; gap:var(--s7);
  align-items:start; margin-bottom:var(--s8);
}
.sec-head .eyebrow{ padding-top:12px; }
.sec-head h2{ max-width:17em; }
.sec-head .lede{ margin-top:var(--s4); }

/* ---------- hero ---------- */
.hero{ padding:clamp(60px,7.5vw,104px) 0 clamp(52px,6vw,88px); }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,5.5vw,80px); align-items:center;
}
.hero h1{ margin:var(--s5) 0 var(--s5); max-width:15ch; }
.hero h1 em{ font-style:italic; color:var(--gold-deep); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; margin-top:var(--s6); }

/* ---------- cards ---------- */
.card{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }

.assess{ padding:26px 28px 24px; position:relative; }
.assess::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(to right,var(--gold),var(--gold-soft),transparent);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.assess-top{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4); padding-bottom:var(--s4); border-bottom:1px solid var(--rule-soft); }
.assess-top .role{ font-size:13px; color:var(--ink-soft); text-align:right; }
.assess h3{ padding:18px 0 4px; font-size:24px; }
.assess .sub{ font-size:14px; color:var(--ink-soft); margin-bottom:18px; }

.criteria{ display:grid; gap:14px; }
.crit{ display:grid; gap:7px; }
.crit .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.crit .nm{ font-size:14.5px; color:var(--ink); }
.crit .wt{ font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.bar{ height:4px; background:var(--cream-deep); border-radius:2px; overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:2px; background:linear-gradient(to right,var(--gold-deep),var(--gold)); width:0; transition:width 1.1s var(--ease); }
.bar i.filled{ width:var(--w); }

.assess-foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--rule-soft); font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--radius);
  background:var(--gold-wash); border:1px solid #e4d6b4; color:var(--gold-deep);
}
.pill::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.stat{ padding:32px 26px 30px; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:none; }
.stat .n{ font-family:var(--serif); font-size:42px; line-height:1; color:var(--navy); margin-bottom:9px; letter-spacing:-0.028em; font-variant-numeric:tabular-nums; }
.stat .n em{ font-style:normal; color:var(--gold-deep); font-size:.62em; margin-left:2px; }
.stat p{ font-size:14px; color:var(--ink-soft); line-height:1.5; }

/* ---------- pathway ---------- */
.pathway{ position:relative; padding-left:64px; }
.pathway::before{ content:''; position:absolute; left:21px; top:12px; bottom:12px; width:1px; background:var(--rule); }
.pathway .spine-fill{ position:absolute; left:21px; top:12px; width:1px; background:linear-gradient(to bottom,var(--gold),var(--gold-soft)); height:0; }
.pw-step{
  display:grid; grid-template-columns:1fr 250px; gap:var(--s6);
  align-items:start; padding:28px 0; border-bottom:1px solid var(--rule-soft); position:relative;
}
.pw-step:last-child{ border-bottom:none; }
.pw-step .pw-num{
  position:absolute; left:-64px; top:28px; width:43px; height:43px; border-radius:50%;
  background:var(--paper); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; color:var(--ink-faint);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.pw-step.lit .pw-num{ border-color:var(--gold); color:var(--gold-deep); background:var(--gold-wash); }
.pw-body h3{ margin-bottom:9px; }
.pw-body p{ font-size:15.5px; color:var(--ink-soft); max-width:44em; }
.pw-meta{ font-size:13.5px; color:var(--ink-faint); padding-top:5px; }
.pw-meta strong{ display:block; color:var(--ink); font-weight:600; font-size:14px; margin-bottom:3px; }

/* ---------- steps / features ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.step{ background:var(--paper); padding:34px 30px 36px; transition:background .3s var(--ease); }
.step:hover{ background:#fff; }
.step .num{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:18px; }
.step h3{ margin-bottom:10px; }
.step p{ font-size:15px; color:var(--ink-soft); }
.dark .steps{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); }
.dark .step{ background:var(--navy); }
.dark .step:hover{ background:var(--navy-soft); }

.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 44px; }
.feature{ border-top:1px solid var(--navy); padding-top:18px; position:relative; }
.feature::before{ content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--gold); transition:width .5s var(--ease); }
.feature.revealed::before{ width:38px; }
.feature h3{ font-size:19px; margin-bottom:9px; }
.feature p{ font-size:15px; color:var(--ink-soft); }
.dark .feature{ border-top-color:rgba(255,255,255,.22); }
.dark .feature p{ color:#aab4c0; }

/* ---------- split / lists ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:start; }
.checklist{ list-style:none; }
.checklist li{
  position:relative; padding:13px 0 13px 28px;
  border-bottom:1px solid var(--rule-soft); font-size:15.5px; line-height:1.55; color:var(--ink);
}
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{
  content:''; position:absolute; left:2px; top:22px; width:9px; height:9px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg);
}
.checklist li strong{ font-weight:600; }
.dark .checklist li{ color:#c3ccd6; border-bottom-color:rgba(255,255,255,.08); }
.dark .checklist li strong{ color:var(--cream); }

.rolelist{ display:flex; flex-wrap:wrap; gap:9px; }
.role-chip{
  font-size:14px; padding:8px 15px; border:1px solid var(--rule); border-radius:100px;
  background:#fff; color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.role-chip:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-1px); }

/* ---------- role cards ---------- */
.roles{ display:grid; gap:var(--s5); }
.role-card{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:34px 36px; box-shadow:var(--shadow);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.role-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--gold-soft); }
.role-card .rc-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:var(--s4); padding-bottom:var(--s4); border-bottom:1px solid var(--rule-soft);
}
.role-card h3{ font-size:27px; }
.role-card .rc-tag{ font-size:13.5px; color:var(--ink-soft); margin-top:5px; }
.rc-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); padding:22px 0; border-bottom:1px solid var(--rule-soft); margin-bottom:22px; }
.rc-fact .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
.rc-fact .v{ font-size:15px; color:var(--ink); }
.rc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); }
.rc-cols h4{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.rc-cols ul{ list-style:none; }
.rc-cols li{ position:relative; padding:6px 0 6px 18px; font-size:15px; color:var(--ink-soft); line-height:1.55; }
.rc-cols li::before{ content:'—'; position:absolute; left:0; color:var(--gold); }
.role-card .btn{ margin-top:26px; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 46px 22px 0; position:relative;
  font-family:var(--serif); font-size:20px; color:var(--navy); transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-deep); }
.faq summary::after{
  content:''; position:absolute; right:10px; top:50%; width:11px; height:11px; margin-top:-6px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details .ans{ padding:0 62px 24px 0; font-size:15.5px; line-height:1.68; color:var(--ink-soft); margin-top:-4px; }
.faq details .ans p+p{ margin-top:12px; }
.faq details[open] .ans{ animation:ansIn .34s var(--ease); }
@keyframes ansIn{ from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }

/* ---------- forms ---------- */
.form{ display:grid; gap:var(--s5); }
.fieldset{ border:none; }
.fieldset legend{
  font-family:var(--serif); font-size:23px; color:var(--navy);
  padding-bottom:8px; margin-bottom:var(--s5); border-bottom:1px solid var(--rule); width:100%;
}
.field{ display:grid; gap:7px; }
.field label{ font-size:14.5px; font-weight:500; color:var(--ink); }
.field .req{ color:var(--gold-deep); }
/* Not `.field .hint` - a standalone hint (the one under the consent
   block, for instance) fell through to 16px body text, so guidance read
   as body copy and the two were indistinguishable. */
.hint{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; display:block; }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius);
  padding:12px 14px; width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,149,84,.18);
}
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }

.scenario-box{
  background:var(--gold-wash); border:1px solid #e4d6b4; border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:20px 22px; font-size:15px; line-height:1.65; color:var(--ink);
}
.scenario-box .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; }

.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px;
  line-height:1.6; color:var(--ink-soft); cursor:pointer;
  /* The whole row is the target, not just the box. */
  padding:6px 0; }
/* These render at 13x13 by default, which is below WCAG 2.5.8's 24px
   minimum and far below the 44px Apple asks for - on the controls that
   carry the PDPA consent. A mis-tap here is a consent failure. */
/* BOTH types. Scoping this to [type="checkbox"] alone left the radios
   matching the generic full-width input rule, which made each radio
   fill its row and shunt the label sideways. */
.consent input[type="checkbox"],
.consent input[type="radio"]{
  width:20px; height:20px; min-width:20px; margin:2px 0 0; flex-shrink:0;
  accent-color: var(--gold, #A07829); cursor:pointer;
}
.consent input[type="checkbox"]:focus-visible,
.consent input[type="radio"]:focus-visible{
  outline:2px solid var(--gold, #A07829); outline-offset:3px;
}

.form-msg{ font-size:15px; padding:13px 16px; border-radius:var(--radius); display:none; }
.form-msg.err{ display:block; background:#fbeceb; border:1px solid #f0c9c5; color:#8c2f26; }
.form-msg.ok{ display:block; background:var(--gold-wash); border:1px solid #e4d6b4; color:var(--gold-deep); }

.success{
  display:none; background:#fff; border:1px solid var(--rule); border-left:3px solid var(--gold);
  border-radius:var(--radius-lg); padding:38px 40px; box-shadow:var(--shadow);
}
.success h2{ margin-bottom:12px; }
.success p{ color:var(--ink-soft); }

/* ---------- timed assessment ---------- */
.clock{
  /* pointer-events:none because NOTHING in here is interactive. As a
     solid pill pinned bottom-centre it was the hit-test target over the
     answer field beneath it: a tap in that band placed no caret and
     opened no keyboard. Measured on a phone with the keyboard up, it
     covered part of 8 of 22 answer fields and up to 78% of a one-line
     row, and it sat on top of the Submit button. */
  pointer-events: none;
  display:none; position:sticky; top:74px; z-index:55;
  align-items:center; gap:9px; width:max-content; margin:0 auto; padding:9px 18px;
  background:var(--navy); color:var(--cream); border-radius:100px;
  box-shadow:0 10px 30px -14px rgba(15,23,32,.6); font-variant-numeric:tabular-nums;
}
.clock-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); animation:clockPulse 2s ease-in-out infinite; }
@keyframes clockPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.clock-time{ font-family:var(--serif); font-size:19px; letter-spacing:-0.01em; }
.clock-note{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#93a0ae; }
.clock.warn{ background:#5c3d12; }
.clock.warn .clock-dot{ background:var(--gold-soft); }
.clock.done{ background:#6b2119; }
.clock.done .clock-dot{ background:#f0a8a0; animation:none; }

.begin-gate{
  background:var(--cream); border:1px solid var(--rule); border-left:3px solid var(--gold);
  border-radius:var(--radius-lg); padding:32px 34px;
}
.begin-gate h2{ font-size:clamp(24px,2.8vw,30px); }

.toast{
  position:fixed; left:50%; bottom:28px; z-index:200; transform:translate(-50%,14px);
  background:var(--navy); color:var(--cream); padding:12px 20px; border-radius:var(--radius);
  font-size:14.5px; max-width:88vw; text-align:center;
  box-shadow:0 16px 40px -18px rgba(15,23,32,.7);
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- note / callout / cta ---------- */
.note{ border-left:2px solid var(--gold); padding:4px 0 4px 20px; font-size:15px; color:var(--ink-soft); line-height:1.65; }
.callout{ background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:30px 32px; }
.callout h3{ margin-bottom:10px; }
.callout p{ font-size:15.5px; color:var(--ink-soft); }
.dark .callout{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.dark .callout p{ color:#aab4c0; }

.cta-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s6); padding:38px 40px; border:1px solid var(--navy);
  border-radius:var(--radius-lg); background:#fff; position:relative; overflow:hidden;
}
.cta-band::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,var(--gold),var(--gold-soft)); }
.cta-band h2{ font-size:clamp(24px,2.8vw,32px); max-width:16em; }
.cta-band p{ font-size:15px; color:var(--ink-soft); margin-top:8px; max-width:40em; }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--rule); background:var(--cream); padding:54px 0 36px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s7); padding-bottom:var(--s6); border-bottom:1px solid var(--rule); }
.foot-col h4{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.foot-col a{ display:block; font-size:15px; color:var(--ink); text-decoration:none; padding:5px 0; transition:color .18s var(--ease); }
.foot-col a:hover{ color:var(--gold-deep); }
.foot-blurb{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-top:12px; max-width:30em; }
.foot-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4); padding-top:24px; font-size:13px; color:var(--ink-faint); }
.foot-base a{ color:var(--ink-faint); }
.powered{ display:inline-flex; align-items:center; gap:7px; }
.powered b{ color:var(--ink-soft); font-weight:600; }

/* ---------- page hero / legal ---------- */
.page-hero{ padding:clamp(50px,6vw,84px) 0 clamp(32px,4vw,52px); }
.page-hero h1{ font-size:clamp(34px,4.8vw,56px); margin:var(--s4) 0 var(--s5); max-width:17ch; }
.legal h2{ font-size:25px; margin:40px 0 12px; }
.legal h3{ font-family:var(--sans); font-size:16px; font-weight:600; margin:24px 0 8px; color:var(--navy); }
.legal p,.legal li{ font-size:16px; color:var(--ink); line-height:1.7; }
.legal p{ margin-bottom:13px; }
.legal ul,.legal ol{ padding-left:22px; margin-bottom:13px; }
.legal li{ margin-bottom:7px; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease); will-change:opacity,transform; }
[data-reveal].revealed{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
[data-reveal][data-delay="5"]{ transition-delay:.40s; }
.no-js [data-reveal]{ opacity:1; transform:none; }

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

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero h1{ max-width:none; }
  .sec-head{ grid-template-columns:1fr; gap:14px; margin-bottom:40px; }
  .sec-head .eyebrow{ padding-top:0; }
  .features{ grid-template-columns:1fr 1fr; gap:34px 36px; }
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--rule); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .pw-step{ grid-template-columns:1fr; gap:var(--s3); }
  .rc-facts{ grid-template-columns:1fr 1fr; gap:var(--s4); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--s6); }
}

@media (max-width:640px){
  .wrap,.wrap-narrow{ padding:0 20px; }
  .head-inner{ flex-wrap:wrap; min-height:0; gap:10px 12px; padding-top:12px; }
  .brand{ order:1; gap:10px; }
  .wordmark{ font-size:19px; }
  .nav-cta{ order:2; margin-left:auto; }
  .site-nav{ order:3; width:100%; gap:var(--s5); padding-bottom:6px; overflow-x:auto; scrollbar-width:none; }
  .site-nav::-webkit-scrollbar{ display:none; }
  .site-nav a{ font-size:14px; white-space:nowrap; }
  .features{ grid-template-columns:1fr; gap:30px; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--rule); }
  .stat:last-child{ border-bottom:none; }
  .row-2{ grid-template-columns:1fr; }
  .rc-cols{ grid-template-columns:1fr; gap:var(--s5); }
  .rc-facts{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .role-card{ padding:26px 22px; }
  .assess{ padding:22px 20px; }
  .cta-band{ padding:28px 24px; }
  .callout{ padding:24px 22px; }
  .success{ padding:28px 24px; }
  /* Pinned to the TOP on a phone, not the bottom. As a bottom-centre pill
     it covered the answer field the candidate was typing into - measured
     at up to 78% of a one-line row with the keyboard up - and it sat over
     the Submit button. On iOS the layout viewport does not shrink for the
     keyboard either, so a bottom-anchored element hides behind it and the
     one number the page exists to show becomes invisible for the whole
     forty minutes. Top-right is clear of the text column and of the
     keyboard. */
  .clock{
    top:8px; right:12px; left:auto; bottom:auto;
    position:fixed; transform:none; margin:0;
    padding:6px 12px; gap:7px;
  }
  .clock-time{ font-size:16px; }
  .clock-note{ font-size:10px; letter-spacing:.08em; }
  .begin-gate{ padding:26px 22px; }
  .faq summary{ font-size:18px; padding-right:38px; }
  .faq details .ans{ padding-right:20px; }
  .pathway{ padding-left:46px; }
  .pathway::before,.pathway .spine-fill{ left:15px; }
  .pw-step .pw-num{ left:-46px; width:31px; height:31px; font-size:14px; top:26px; }
}

/* ── Answer shapes ─────────────────────────────────────────────
   The seed defines the shape of each answer: a one-line reply, a
   list, a choice, a paragraph. Rendering everything as one textarea
   made the live form a different paper from the trial, marked
   against the same keys. */
.apart { margin-top: 22px; }
.plabel {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
.opt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint, #8a929d);
}

.listrows { display: flex; flex-direction: column; gap: 10px; }
.listrows .lrow { display: flex; align-items: center; gap: 11px; }
.listrows .bullet { flex-shrink: 0; width: 10px; height: 1px; background: var(--gold, #B89554); }
.listrows .lrow input { flex: 1; }
/* 44px minimum: this is tapped repeatedly and on a phone it is the
   difference between adding a line and mis-hitting the field above. */
.addrow {
  margin-top: 10px; min-height: 44px; display: inline-flex; align-items: center;
  cursor: pointer; background: none; border: 0; padding: 0 2px;
  font-family: inherit; font-size: 14px; color: var(--gold-deep, #9A7840);
  border-bottom: 1px solid var(--rule, #d8d2c4); align-self: flex-start;
}
.addrow:hover { color: var(--navy, #0F1720); border-bottom-color: var(--gold, #B89554); }
.addrow:focus-visible { outline: 2px solid var(--gold, #B89554); outline-offset: 3px; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  padding: 15px 18px; background: #fff; border: 1px solid var(--rule, #d8d2c4);
  border-radius: 2px; font-size: 14.5px; line-height: 1.55;
}
.choice:hover { border-color: var(--gold, #B89554); }
.choice input[type="radio"] {
  width: 20px; height: 20px; min-width: 20px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--gold-deep, #9A7840); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--gold, #B89554); background: var(--cream, #F5F3EF); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold, #B89554); outline-offset: 2px; }

@media (max-width: 560px) {
  .choice { padding: 13px 14px; }
  .apart { margin-top: 18px; }
}
.qlabel {
  display: block; font-size: 16.5px; font-weight: 500; line-height: 1.45;
  color: var(--navy, #0F1720); margin-bottom: 10px;
}

/* Nav links were 26px tall: above WCAG's 24px floor but well under the
   44px a thumb actually wants, and they sit close together. */
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }


/* Nothing may rest under the clock. The pill is ~49px tall and sits 20px
   from the bottom, so the form reserves room for it and every answer
   field keeps that much clear when the browser scrolls it into view on
   focus. Without this, focusing a field parks it directly beneath the
   pill and you type blind. */
#applicationForm { padding-bottom: 96px; }
#applicationForm textarea,
#applicationForm input[type="text"],
#applicationForm input[type="email"],
#applicationForm input[type="tel"],
#applicationForm input[type="date"] { scroll-margin-bottom: 96px; }


/* Dot-point rows grow. They were single-line inputs, so anything past
   about sixty characters scrolled out of sight and the candidate could
   not read back what they had written - on a question that asks for a
   reason as well as the point. */
.listrows .lrow textarea {
  flex: 1; min-height: 46px; resize: none; overflow: hidden;
  line-height: 1.5; padding: 11px 14px;
}