/* ---------------------------------------------------------------------------
   Verified Experience. One stylesheet, no framework, no build step on the CSS.

   PALETTE is VE's own, read out of their live Elementor stylesheet, not
   invented: primary #006039, secondary #EAA51E, accent #E7F256, text #19402D,
   dark surface #1E2823, off-white #F4F5F0. Fonts are theirs too: Newsreader
   for display, Inter for everything else.

   ACCENT DISCIPLINE, and it is the rule the live site breaks:
     - Amber #EAA51E on green #006039 measures 3.6:1. That clears AA for LARGE
       text only. Small amber text on green fails, and the live site sets its
       card kickers that way.
     - #F5C55C on the same green measures 4.7:1 and passes for small text, so
       every small accent on a green surface uses --amber-lift.
     - Lime is a dark surface accent only. It is roughly 1.4:1 on white.
   tools/audit.mjs re-measures all of this on the built pages, so a regression
   fails the build gate rather than shipping.
   ------------------------------------------------------------------------ */

:root{
  --green:#006039;
  --green-deep:#00432A;
  --near:#1E2823;
  --near-2:#16201B;
  --ink:#19402D;
  --ink-2:#3F5A4C;
  --muted:#5C6B61;
  --amber:#EAA51E;
  --amber-lift:#F5C55C;
  --lime:#E7F256;
  --line:#DDE4DE;
  --line-dark:rgba(255,255,255,.14);
  --surface:#FFFFFF;
  --tint:#F4F5F0;
  --danger:#C0562F;

  --container:1180px;
  --measure:64ch;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px -4px rgba(15,31,23,.18);
  --shadow-md:0 16px 40px -22px rgba(15,31,23,.38);
  --shadow-lg:0 34px 80px -30px rgba(15,31,23,.45);

  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;

  --step-0:clamp(1rem,.97rem + .16vw,1.0625rem);
  --step-1:clamp(1.125rem,1.08rem + .22vw,1.25rem);
  --step-2:clamp(1.35rem,1.24rem + .5vw,1.6rem);
  --step-3:clamp(1.7rem,1.5rem + .95vw,2.3rem);
  --step-4:clamp(2.1rem,1.72rem + 1.85vw,3.4rem);
  --step-5:clamp(2.5rem,1.9rem + 2.9vw,4.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--green);text-underline-offset:3px}
a:hover{color:var(--green-deep)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:0}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}
/* The italic accent is GREEN on a light surface and AMBER on a dark one. It
   is not a preference: amber measures 1.9:1 on the off-white panel, so an
   amber display line on light is decoration nobody can read. VE's own site
   makes the same split, and inverting it was the first thing tools/audit.mjs
   caught. */
em.accent{font-style:italic;color:var(--green)}
.on-dark em.accent{color:var(--amber)}

/* --- skip link ---------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  font-weight:600;font-size:15px;
}
.skip:focus{left:0}

/* --- layout ------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(56px,7vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--tint{background:var(--tint)}
.section--green{background:var(--green);color:#fff}
.section--near{background:var(--near);color:#fff}
.section--green,.section--near{--line:var(--line-dark)}
.on-dark{color:#fff}
.on-dark p,.on-dark li{color:rgba(255,255,255,.82)}
/* :not(.btn) matters. `.on-dark a` is (0,1,1) and `.btn--primary` is (0,1,0),
   so without it the link colour wins over the button colour and every primary
   CTA on a dark section renders pale amber text on an amber pill. */
.on-dark a:not(.btn){color:var(--amber-lift)}

.section-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,48px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{font-size:var(--step-1);color:var(--ink-2);margin-top:16px;max-width:var(--measure)}
.section-head--center p{margin-inline:auto}
.on-dark .section-head p{color:rgba(255,255,255,.78)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);background:rgba(0,96,57,.08);
  border:1px solid rgba(0,96,57,.18);
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.on-dark .eyebrow{color:var(--amber-lift);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
/* The amber lift is 4.0:1 on the green panel once the pill's own 7% white is
   composited in, which is under AA for a label this small. It clears easily on
   the near black surface, so the override is scoped to green rather than
   dropping the accent everywhere. */
.section--green .eyebrow{color:#fff;border-color:rgba(255,255,255,.26)}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;
  padding:16px 26px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
  min-height:52px;
}
.btn svg{flex:none}
.btn--primary{background:var(--amber);color:#231A05;box-shadow:0 10px 26px -14px rgba(234,165,30,.9)}
.btn--primary:hover{background:#F2B33C;color:#231A05;transform:translateY(-1px)}
.btn--ghost{border-color:rgba(25,64,45,.28);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--green);color:var(--green);background:rgba(0,96,57,.05)}
.on-dark .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.on-dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* --- header ------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(30,40,35,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background-color .25s ease;
}
.header__inner{display:flex;align-items:center;gap:18px;min-height:76px;max-width:1320px}
/* The header carries more items than the content column can hold at 1440, and
   a header that overflows does not look like a header bug: the whole DOCUMENT
   goes wider than the viewport and the page renders in a narrow column with
   white beside it. tools/audit.mjs compares scrollWidth to clientWidth on every
   page at every width for exactly this reason. Six nav items plus a phone plus
   a CTA is the ceiling, and it only fits because of the three rules below. */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{height:42px;width:auto}
@media (max-width:520px){.brand img{height:34px}}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--serif);font-size:1.22rem;color:#fff;letter-spacing:-.01em}
.brand__tag{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-weight:600}
.nav{display:flex;align-items:center;gap:0;margin-left:auto;min-width:0}
.nav a{
  color:rgba(255,255,255,.84);text-decoration:none;font-size:.9rem;font-weight:500;
  padding:10px 11px;border-radius:8px;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.header__cta{display:flex;align-items:center;gap:10px;flex:none}
.header__cta .btn{padding:12px 20px;min-height:44px;font-size:.92rem}
.header__phone{
  display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
  font-weight:600;font-size:.93rem;padding:10px 12px;border-radius:8px;white-space:nowrap;
}
.header__phone:hover{background:rgba(255,255,255,.1);color:#fff}
/* The employee portal. Outlined rather than plain so it reads as a different
   KIND of destination from the marketing nav: everything else on this bar sells
   the program, this one is the door for somebody already in it. Amber, which is
   VE's accent on dark surfaces and this header is dark. */
.nav__portal{
  display:inline-flex;align-items:center;gap:7px;margin-left:8px;
  color:var(--amber);text-decoration:none;font-size:.86rem;font-weight:600;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
  border:1px solid rgba(212,163,74,.45);
}
.nav__portal:hover,.nav__portal[aria-current="page"]{background:rgba(212,163,74,.14);color:var(--amber)}
.navtoggle{
  display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:10px;padding:10px 12px;font:inherit;font-size:.9rem;font-weight:600;
  align-items:center;gap:8px;min-height:44px;
}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;background:var(--near);color:#fff;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(104deg,rgba(11,32,22,.94) 0%,rgba(11,32,22,.86) 38%,rgba(11,32,22,.55) 66%,rgba(11,32,22,.4) 100%),
    linear-gradient(0deg,rgba(11,32,22,.7) 0%,rgba(11,32,22,0) 45%);
}
.hero__inner{padding-block:clamp(64px,9vw,124px);max-width:760px}
.hero h1{color:#fff;text-wrap:balance}
.hero h1 .accent{display:block;font-style:italic;color:var(--amber);font-weight:400}
.hero__sub{font-size:var(--step-1);color:rgba(255,255,255,.86);margin-top:22px;max-width:56ch}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);
}
.hero__trust li{
  display:flex;align-items:center;gap:9px;list-style:none;
  font-size:.9rem;font-weight:500;color:rgba(255,255,255,.9);
}
.hero__trust svg{color:var(--amber);flex:none}
ul.hero__trust{margin:34px 0 0;padding:26px 0 0}

/* --- media object (video blocks) ---------------------------------------- */
.split{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
}
.videocard{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#000;
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.12);
}
.videocard video{width:100%;display:block;background:#000}
.videocard--portrait{max-width:340px;margin-inline:auto}
.videocard__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(0deg,rgba(11,32,22,.55),rgba(11,32,22,.12));
  border:0;cursor:pointer;color:#fff;padding:0;
}
.videocard__play span{
  display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;background:var(--amber);color:#231A05;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);transition:transform .18s ease;
}
.videocard__play:hover span{transform:scale(1.06)}
.videocard__label{
  font-size:.85rem;color:var(--muted);margin-top:14px;text-align:center;
}
.on-dark .videocard__label{color:rgba(255,255,255,.7)}

/* --- pillars / feature rows --------------------------------------------- */
.pillars{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.pillar{display:flex;gap:16px;align-items:flex-start}
.pillar img{width:44px;height:44px;flex:none;object-fit:contain}
.pillar h3{font-size:1.12rem;font-family:var(--sans);font-weight:600;letter-spacing:-.005em;margin-bottom:4px}
.pillar p{font-size:.95rem;color:var(--ink-2);margin:0}
.on-dark .pillar p{color:rgba(255,255,255,.78)}

/* --- grids and cards ---------------------------------------------------- */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow-sm);
}
.on-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.card h3{margin-bottom:10px}
.card__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.card__list li{position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-2)}
.card__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--green);
}
.on-dark .card__list li{color:rgba(255,255,255,.82)}
.on-dark .card__list li::before{background:var(--amber)}
.card__kicker{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--green);
}
.on-dark .card__kicker{color:var(--amber-lift);border-top-color:rgba(255,255,255,.14)}
.card__icon{width:52px;height:52px;object-fit:contain;margin-bottom:16px}

/* --- steps -------------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.step{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 26px 26px;box-shadow:var(--shadow-sm);
}
.step__n{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;
  font-family:var(--serif);font-size:1.22rem;line-height:1;margin-bottom:18px;
}
.step h3{font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:-.005em}
.step__lede{font-size:.95rem;color:var(--ink-2);margin:8px 0 16px}
.step__out{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--green);
}

/* --- accordion ---------------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:var(--step-2);font-weight:500;color:var(--ink);
  letter-spacing:-.01em;line-height:1.24;
}
.acc summary::-webkit-details-marker{display:none}
.on-dark .acc summary{color:#fff}
.acc summary:hover{color:var(--green)}
.on-dark .acc summary:hover{color:var(--amber-lift)}
.acc__icon{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:transform .2s ease,background-color .2s ease;
  color:var(--green);
}
.on-dark .acc__icon{color:var(--amber-lift);border-color:rgba(255,255,255,.24)}
details[open] .acc__icon{transform:rotate(45deg);background:var(--green);color:#fff;border-color:var(--green)}
.acc__body{padding:0 4px 26px;max-width:var(--measure)}
.acc__body p{color:var(--ink-2)}
.on-dark .acc__body p{color:rgba(255,255,255,.82)}
.acc__cols{display:grid;gap:22px;margin-bottom:20px}
@media (min-width:760px){.acc__cols{grid-template-columns:1fr 1fr}}
.acc__label{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.on-dark .acc__label{color:rgba(255,255,255,.6)}
.tick,.cross{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tick li,.cross li{position:relative;padding-left:28px;font-size:.95rem;color:var(--ink-2)}
.on-dark .tick li,.on-dark .cross li{color:rgba(255,255,255,.85)}
.tick li::before,.cross li::before{
  position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;font-weight:700;line-height:1;
}
.tick li::before{content:"\2713";background:rgba(0,96,57,.12);color:var(--green);top:.15em}
.cross li::before{content:"\00d7";background:rgba(192,86,47,.14);color:var(--danger);top:.15em}
.on-dark .tick li::before{background:rgba(234,165,30,.2);color:var(--amber-lift)}
.on-dark .cross li::before{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.fix{
  background:rgba(0,96,57,.06);border-left:3px solid var(--green);
  padding:16px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.fix p{color:var(--ink);margin:0}
.fix__label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:6px;
}
.on-dark .fix{background:rgba(255,255,255,.06);border-left-color:var(--amber)}
.on-dark .fix p{color:#fff}
.on-dark .fix__label{color:var(--amber-lift)}

/* --- quote / proof ------------------------------------------------------ */
.quote{
  border-left:3px solid var(--amber);padding-left:26px;
}
.quote blockquote{margin:0;font-family:var(--serif);font-size:var(--step-2);line-height:1.42;color:#fff}
.quote figcaption{margin-top:18px;font-size:.9rem;color:rgba(255,255,255,.7)}
.quote figcaption strong{display:block;color:#fff;font-size:1rem}
.pull{
  font-family:var(--serif);font-size:var(--step-3);line-height:1.24;color:#fff;
  margin:0 0 22px;text-wrap:balance;
}
.pull span{color:var(--amber)}

/* --- licence strip ------------------------------------------------------ */
.licences{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.licences li{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--ink-2);
  background:var(--surface);
}
.on-dark .licences li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.88)}

/* --- team --------------------------------------------------------------- */
.person{display:grid;gap:26px;align-items:start}
@media (min-width:780px){.person{grid-template-columns:260px 1fr}}
.person__photo{
  border-radius:var(--radius);overflow:hidden;background:var(--tint);border:1px solid var(--line);
  aspect-ratio:1;
}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__role{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin:8px 0 16px;
}
.tags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{
  font-size:.82rem;background:var(--tint);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;color:var(--ink-2);
}
.note{
  font-size:.9rem;color:var(--muted);background:var(--tint);border:1px dashed var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;
}

/* --- form --------------------------------------------------------------- */
.formcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md);
}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:7px;color:var(--ink)}
.field .hint{font-weight:400;color:var(--muted);font-size:.85rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px;
  min-height:52px;transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C6B61' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,96,57,.14);
}
.field--half{display:grid;gap:0 18px;margin-bottom:0}
.field--half>.field{margin-bottom:18px}
@media (min-width:560px){.field--half{grid-template-columns:1fr 1fr}}
.field--err input,.field--err select,.field--err textarea{border-color:var(--danger)}
.err{color:var(--danger);font-size:.85rem;font-weight:600;margin-top:6px;display:none}
.field--err .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.82rem;color:var(--muted);line-height:1.55;margin:6px 0 18px}
.consent a{color:var(--green)}
.formnote{font-size:.85rem;color:var(--muted);margin-top:16px;text-align:center}
.formstatus{
  display:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  font-size:.92rem;font-weight:600;
}
.formstatus--err{display:block;background:rgba(192,86,47,.1);color:#8C3C1E}
.success{text-align:center;padding:14px 0}
.success h3{font-size:var(--step-3);margin-bottom:12px}
.success__mark{
  width:64px;height:64px;border-radius:50%;background:rgba(0,96,57,.1);color:var(--green);
  display:grid;place-items:center;margin:0 auto 20px;
}

/* --- contact rail ------------------------------------------------------- */
.rail{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.rail li{display:flex;gap:14px;align-items:flex-start}
.rail__icon{
  flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(0,96,57,.09);color:var(--green);
}
.on-dark .rail__icon{background:rgba(255,255,255,.1);color:var(--amber-lift)}
.rail__label{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.on-dark .rail__label{color:rgba(255,255,255,.6)}
.rail a{font-weight:600;text-decoration:none;font-size:1.05rem}
.rail a:hover{text-decoration:underline}

/* --- legal pages -------------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{font-size:var(--step-2);margin:38px 0 12px}
.prose h3{font-size:1.1rem;font-family:var(--sans);font-weight:600;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose .lead{font-size:var(--step-1);color:var(--ink)}
.callout{
  background:var(--tint);border-left:3px solid var(--green);padding:18px 20px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:0 0 22px;
}
.callout p{color:var(--ink);font-weight:600;margin:0}

/* --- final cta ---------------------------------------------------------- */
.cta-band{text-align:center}
.cta-band h2{color:#fff;text-wrap:balance}
.cta-band h2 .accent{display:block;font-style:italic;color:var(--amber);font-weight:400}
.cta-band p{max-width:56ch;margin-inline:auto;font-size:var(--step-1)}
.cta-band .btn-row{justify-content:center}
.cta-points{
  list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 24px;justify-content:center;font-size:.9rem;color:rgba(255,255,255,.82);
}
.cta-points li{display:flex;align-items:center;gap:8px}
.cta-points svg{color:var(--amber);flex:none}

/* --- footer ------------------------------------------------------------- */
.footer{background:var(--near-2);color:rgba(255,255,255,.72);padding-block:clamp(48px,6vw,72px) 0}
.footer__grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.footer__about{max-width:34ch}
.footer__about p{font-size:.92rem;margin-top:16px}
.footer h4{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:16px;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.93rem}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__logo img{height:46px;width:auto}
.footer__legal{
  margin-top:46px;padding-block:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  font-size:.82rem;color:rgba(255,255,255,.55);
}
.footer__disclaimer{
  font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.62);
  max-width:80ch;padding-bottom:26px;
}
.footer__licences{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}

/* --- sticky mobile bar -------------------------------------------------- */
.mobilebar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:rgba(30,40,35,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.14);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobilebar .btn{flex:1;padding:14px 12px;min-height:50px;font-size:.95rem}
/* The bar is dark but it is not inside a .on-dark section, so the ghost button
   would take the light variant and render dark green text on a near black bar. */
.mobilebar .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.mobilebar .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* --- responsive --------------------------------------------------------- */
/* Below 1280 the phone number leaves the bar. It is still on the mobile bar,
   in the footer and on the contact page, so nothing is lost. */
/* Was 1279. The portal link is a seventh item on a bar the comment above
   .brand calls full at six, so the phone leaves earlier now. It is still on the
   mobile bar, in the footer and on the contact page, so nothing is lost.
   tools/audit.mjs compares scrollWidth to clientWidth at 1440/1024/390 and is
   what decides this number; do not tune it by eye. */
@media (max-width:1439px){.header__phone{display:none}}
@media (max-width:1180px){.brand__tag{display:none}}

@media (max-width:1080px){
  .nav,.header__cta{display:none}
  .navtoggle{display:inline-flex}
  .header__inner{min-height:66px}
  .nav--open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;left:0;right:0;top:100%;padding:14px 24px 22px;
    background:var(--near);border-bottom:1px solid rgba(255,255,255,.14);
  }
  .nav--open a{padding:14px 12px;font-size:1rem}
  /* In the dropdown it is a full-width row under a divider, not a chip floating
     at the end of a stacked list. */
  .nav--open .nav__portal{
    margin:10px 0 0;justify-content:center;padding:14px 12px;font-size:1rem;
    border-top:1px solid rgba(255,255,255,.14);border-radius:0 0 8px 8px;
  }
  .header{position:sticky}
}
@media (max-width:760px){
  html{scroll-padding-top:76px}
  body{padding-bottom:76px}
  .mobilebar{display:flex}
  .section{padding-block:52px}
  .hero__inner{padding-block:56px 60px}
  .container{padding-inline:18px}
  .acc summary{padding:18px 2px;font-size:1.12rem}
  .btn-row .btn{width:100%}
  .videocard--portrait{max-width:100%}
}