/* ============================================================
   Scapex Foundation — design system
   Tokens mirrored from tatachemicals.com (primary blue re-pointed to the Scapex logo blue #0b4a9c,
   --c-text-primary #0b0c18, --h-header 72px, --space-sectional 120px)
   ============================================================ */

:root{
  /* brand */
  --blue:#0b4a9c;
  --blue-dark:#083a7d;
  --blue-50:#e9f0fa;
  --blue-disabled:#a9bfe0;
  --orange:#fba134;

  /* ink + neutrals (TC's blue-biased greys) */
  --ink:#0b0c18;
  --ink-2:#5c5c64;
  --ink-3:#6b6b74;
  --ink-blue:#66677a;
  --border:#e1e1e3;
  --surface:#ffffff;
  --surface-2:#f4f7fc;
  --surface-3:#e9f0fa;

  /* on-dark */
  --on-dark:#ffffff;
  --on-dark-2:rgba(255,255,255,.8);
  --on-dark-3:rgba(255,255,255,.62);
  --border-dark:rgba(255,255,255,.2);

  /* semantic */
  --positive:#19af55;
  --warning:#edc843;

  /* geometry (TC scale) */
  --h-header:72px;
  --w-max:1600px;
  --w-read:68ch;
  --r-2:4px; --r-4:8px; --r-5:12px; --r-6:16px; --r-8:24px; --r-pill:1000px;
  --sp-sectional:120px;
  --gutter:clamp(20px,4vw,48px);

  /* motion */
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.05,.7,.1,1);

  --shadow-panel:0 1px 3px rgba(11,12,24,.06),0 8px 28px rgba(11,12,24,.06);
  --shadow-lift:0 2px 6px rgba(11,12,24,.08),0 18px 44px rgba(11,12,24,.10);

  color-scheme:light;
}

:root[data-theme="dark"]{color-scheme:light}


/* Locked to the Scapex brand palette: white and blue, in every theme.
   No dark-mode inversion — the brand is the brand. */
:root{color-scheme:light only}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"Sequel Sans","Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-2);
}

/* ---------- type scale ---------- */
.display{
  font-size:clamp(40px,6.4vw,96px);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
.h2{
  font-size:clamp(28px,3.6vw,52px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.h3{
  font-size:clamp(20px,1.9vw,28px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
.h4{font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.005em;margin:0}
.lede{
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.55;
  color:var(--ink-2);
  margin:0;
  max-width:62ch;
}
.body{color:var(--ink-2);margin:0;max-width:var(--w-read)}
.small{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.eyebrow{
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0;
}
.eyebrow--muted{color:var(--ink-3)}
.on-dark{color:var(--on-dark)}
.on-dark .lede,.on-dark .body,.on-dark .small{color:var(--on-dark-2)}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--w-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(56px,8vw,var(--sp-sectional))}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--alt{background:var(--surface-2)}
.stack{display:flex;flex-direction:column}
.stack-8{gap:8px}.stack-12{gap:12px}.stack-16{gap:16px}.stack-24{gap:24px}
.stack-32{gap:32px}.stack-48{gap:48px}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.hr{height:1px;background:var(--border);border:0;margin:0}

/* ---------- header ---------- */
.header{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:60;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border);
}
.header__bar{
  height:var(--h-header);
  display:flex;
  align-items:center;
  gap:24px;
}
.wordmark{display:flex;align-items:baseline;gap:.42em;white-space:nowrap}
.wordmark__a{
  font-size:19px;font-weight:700;letter-spacing:.015em;
  text-transform:uppercase;color:var(--blue);
}
.wordmark__b{
  font-size:19px;font-weight:300;letter-spacing:.075em;
  text-transform:uppercase;color:var(--ink);
}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  font-size:14.5px;
  color:var(--ink-2);
  padding:9px 13px;
  border-radius:var(--r-pill);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__link:hover{color:var(--ink);background:var(--surface-2)}
.nav__link[aria-current="page"]{color:var(--blue);font-weight:500}
.header__cta{display:flex;align-items:center;gap:10px;margin-left:12px}
.menu-toggle{
  display:none;
  margin-left:auto;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--border);border-radius:var(--r-pill);
  cursor:pointer;
}
.menu-toggle svg{width:18px;height:18px}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--surface)}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav__inner{display:flex;flex-direction:column;padding-block:12px 20px;gap:2px}
.mobile-nav .nav__link{padding:12px 4px;font-size:16px;border-radius:var(--r-4)}

@media (max-width:1040px){
  .nav,.header__cta{display:none}
  .menu-toggle{display:flex}
}

/* ---------- buttons (TC pill + circular arrow) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  padding:5px 5px 5px 22px;
  font-size:15px;font-weight:500;
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  text-align:left;
}
.btn__dot{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:50%;
  display:grid;place-items:center;
  transition:transform .3s var(--ease-out),background .25s var(--ease);
}
.btn__dot svg{width:15px;height:15px}
.btn:hover .btn__dot{transform:translateX(3px)}

.btn--light{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-panel)}
.btn--light .btn__dot{background:var(--blue);color:#fff}
.btn--light:hover{box-shadow:var(--shadow-lift)}

.btn--blue{background:var(--blue);color:#fff}
.btn--blue .btn__dot{background:rgba(255,255,255,.18);color:#fff}
.btn--blue:hover{background:var(--blue-dark)}

.btn--outline{background:transparent;color:var(--ink);border-color:var(--border)}
.btn--outline .btn__dot{background:var(--blue-50);color:var(--blue)}
.btn--outline:hover{border-color:var(--blue);color:var(--blue)}

.btn--ghost-dark{background:transparent;color:#fff;border-color:var(--border-dark)}
.btn--ghost-dark .btn__dot{background:rgba(255,255,255,.14);color:#fff}
.btn--ghost-dark:hover{background:rgba(255,255,255,.08)}

.btn--sm{padding:4px 4px 4px 18px;font-size:14px}
.btn--sm .btn__dot{width:32px;height:32px;flex:0 0 32px}
.btn--solid{padding:11px 22px}
.btn--solid .btn__dot{display:none}

.textlink{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--blue);font-size:15px;font-weight:500;
}
.textlink svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- hero (TC full-bleed) ---------- */
.hero{
  position:relative;
  min-height:clamp(520px,78vh,780px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--blue-dark);
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media svg{width:100%;height:100%;display:block}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#06255c 0%,#06255c 46%,rgba(6,37,92,.82) 62%,rgba(6,37,92,.34) 100%);
}
.hero__inner{padding-block:clamp(48px,9vw,104px);width:100%}
.hero__content{max-width:min(920px,100%);display:flex;flex-direction:column;gap:28px}
.hero .display{color:#fff}
.hero__sub{color:var(--on-dark-2);font-size:clamp(16px,1.3vw,19px);max-width:56ch;margin:0}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero__badges{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;
}
.chip-dark{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border-dark);
  border-radius:var(--r-pill);
  padding:7px 15px;
  font-size:12.5px;letter-spacing:.04em;
  color:var(--on-dark-2);
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.06);
}
.chip-dark b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}

/* page hero (interior pages, lighter) */
.phero{
  background:var(--blue-50);
  border-bottom:1px solid var(--border);
  padding-block:clamp(48px,7vw,92px);
}
.phero__inner{display:flex;flex-direction:column;gap:20px;max-width:900px}

/* ---------- stat strip ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.stat{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface);
}
.stat__n{
  font-size:clamp(34px,4.2vw,58px);
  font-weight:300;letter-spacing:-.03em;line-height:1;
  color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.stat__l{font-size:14px;color:var(--ink-2);max-width:26ch}
.stat__note{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- TC signature card: media + solid blue caption panel ---------- */
.pcard{
  display:flex;flex-direction:column;
  border-radius:var(--r-6);
  overflow:hidden;
  background:var(--blue);
  min-height:100%;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.pcard__media{aspect-ratio:16/10;position:relative;background:var(--blue-dark);overflow:hidden}
.pcard__media svg{position:absolute;inset:0;width:100%;height:100%}
.pcard__body{
  padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;gap:12px;flex:1;
  color:#fff;
}
.pcard__body .h3{color:#fff}
.pcard__body p{margin:0;color:rgba(255,255,255,.8);font-size:15px;line-height:1.55}
.pcard__foot{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:#fff;
}
.pcard__foot svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.pcard:hover .pcard__foot svg{transform:translateX(4px)}
.pcard__tag{
  align-self:flex-start;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill);padding:4px 11px;
}

/* ---------- focus grid (TC industry tiles) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-6);overflow:hidden}
.tile{
  background:var(--surface);
  padding:clamp(22px,2.2vw,30px);
  min-height:190px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .25s var(--ease);
}
.tile:hover{background:var(--blue-50)}
.tile__icon{width:30px;height:30px;color:var(--blue)}
.tile__icon svg{width:100%;height:100%}
.tile__t{font-size:17px;font-weight:500;line-height:1.28;letter-spacing:-.005em;margin:0}
.tile__d{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5}
.tile__arrow{margin-top:auto;width:15px;height:15px;color:var(--blue);transition:transform .25s var(--ease-out)}
.tile:hover .tile__arrow{transform:translateX(4px)}

/* ---------- plain cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-6);
  padding:clamp(22px,2.3vw,32px);
  display:flex;flex-direction:column;gap:14px;
}
.card--flat{border:0;background:var(--surface-2)}
.card__n{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);font-variant-numeric:tabular-nums;
}

/* ---------- split band ---------- */
.band{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  border-radius:var(--r-8);
  overflow:hidden;
  background:var(--blue);
}
.band__media{position:relative;min-height:340px;background:var(--blue-dark)}
.band__media svg{position:absolute;inset:0;width:100%;height:100%}
.band__body{
  padding:clamp(28px,4vw,64px);
  display:flex;flex-direction:column;gap:20px;justify-content:center;
  color:#fff;
}
.band__body .h2{color:#fff}
.band__body p{color:rgba(255,255,255,.82);margin:0;max-width:52ch}
@media (max-width:860px){.band{grid-template-columns:1fr}.band__media{min-height:240px}}

/* ---------- carousel (TC: hairline progress + circular controls) ---------- */
.carousel{position:relative}
.carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(300px,calc(33.333% - 16px));
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start}
@media (max-width:900px){.carousel__track{grid-auto-columns:minmax(260px,78%)}}
.carousel__foot{display:flex;align-items:center;gap:24px;margin-top:28px}
.carousel__rail{flex:1;height:2px;background:var(--border);position:relative;border-radius:2px}
.carousel__bar{position:absolute;inset-block:0;left:0;background:var(--blue);border-radius:2px;transition:left .3s var(--ease),width .3s var(--ease)}
.carousel__btns{display:flex;gap:10px}
.cbtn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;
  color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.cbtn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.cbtn:disabled{color:var(--ink-3);cursor:not-allowed;opacity:.5}
.cbtn svg{width:15px;height:15px}

/* ---------- ranking explorer (top-100 tables) ---------- */
.rank-tools{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding-block:22px;
  border-bottom:1px solid var(--border);
  position:sticky;top:calc(var(--h-header) + env(safe-area-inset-top,0px));
  background:var(--surface);z-index:30;
}
.search{
  position:relative;flex:1 1 280px;max-width:380px;
}
.search svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--ink-3);pointer-events:none;
}
.search input{
  width:100%;height:46px;
  padding:0 16px 0 42px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);
  font-size:15px;font-family:inherit;
}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.selectwrap{position:relative}
.selectwrap select{
  appearance:none;height:46px;
  padding:0 40px 0 18px;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);
  font-size:14.5px;font-family:inherit;cursor:pointer;
}
.selectwrap select:focus{outline:none;border-color:var(--blue)}
.selectwrap::after{
  content:"";position:absolute;right:17px;top:50%;
  width:7px;height:7px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.rank-count{font-size:13.5px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}

.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-6);margin-top:28px;background:var(--surface)}
table.rank{width:100%;border-collapse:collapse;font-size:14.5px;min-width:920px}
table.rank th{
  text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);padding:15px 18px;border-bottom:1px solid var(--border);
  background:var(--blue-50);white-space:nowrap;
}
table.rank th[data-sort]{cursor:pointer;user-select:none}
table.rank th[data-sort]:hover{color:var(--blue)}
table.rank th[aria-sort] .caret{opacity:1}
table.rank .caret{display:inline-block;margin-left:6px;opacity:.28;font-size:10px}
table.rank td{padding:16px 18px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink-2)}
table.rank tr:last-child td{border-bottom:0}
table.rank tbody tr:hover{background:var(--blue-50)}
td.c-rank{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:500;width:56px}
td.c-name{color:var(--ink);font-weight:500;min-width:210px}
td.c-name a{color:var(--ink)}
td.c-name a:hover{color:var(--blue)}
td.c-name .dom{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:3px}
td.c-year{font-variant-numeric:tabular-nums;white-space:nowrap;width:78px}
td.c-notable{min-width:300px;font-size:14px;line-height:1.5}
.pill{
  display:inline-block;white-space:nowrap;
  font-size:11.5px;letter-spacing:.03em;
  padding:4px 11px;border-radius:var(--r-pill);
  background:var(--blue-50);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);
}
.rank-empty{padding:56px 20px;text-align:center;color:var(--ink-3);font-size:15px}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__q{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;text-align:left;
  font-size:clamp(16px,1.5vw,19px);font-weight:400;letter-spacing:-.005em;color:var(--ink);
}
.acc__q:hover{color:var(--blue)}
.acc__sign{flex:0 0 auto;width:22px;height:22px;position:relative;color:var(--blue)}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.acc__sign::before{width:14px;height:1.5px}
.acc__sign::after{width:1.5px;height:14px;transition:transform .3s var(--ease)}
.acc__item[data-open="true"] .acc__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__a{display:none;padding-bottom:26px;color:var(--ink-2);max-width:72ch}
.acc__a p{margin:0 0 12px}
.acc__a p:last-child{margin-bottom:0}
.acc__item[data-open="true"] .acc__a{display:block}

/* ---------- governance / data list ---------- */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-6);overflow:hidden}
.dl__item{background:var(--surface);padding:22px 24px;display:flex;flex-direction:column;gap:5px}
.dl__k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dl__v{font-size:15.5px;color:var(--ink);font-variant-numeric:tabular-nums;word-break:break-word}

/* ---------- timeline ---------- */
.tl{display:flex;flex-direction:column;border-left:1px solid var(--border);padding-left:0}
.tl__i{display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,3vw,40px);padding:26px 0 26px 28px;border-bottom:1px solid var(--border);position:relative}
.tl__i::before{content:"";position:absolute;left:-4.5px;top:34px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.tl__d{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-variant-numeric:tabular-nums}
.tl__b .h4{margin-bottom:6px}
.tl__b p{margin:0;color:var(--ink-2);font-size:14.5px;max-width:60ch}
@media (max-width:640px){.tl__i{grid-template-columns:1fr;gap:8px}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:15px;
  padding:13px 16px;
  border:1px solid var(--border);border-radius:var(--r-5);
  background:var(--surface);color:var(--ink);
  width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.amounts{display:flex;flex-wrap:wrap;gap:10px}
.amt{
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:var(--r-pill);padding:11px 20px;font-size:15px;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:all .2s var(--ease);
}
.amt:hover{border-color:var(--blue);color:var(--blue)}
.amt[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.note{
  font-size:13px;color:var(--ink-2);
  background:var(--blue-50);border-radius:var(--r-5);
  padding:14px 16px;border-left:2px solid var(--blue);
}

/* ---------- footer ---------- */
.footer{background:var(--blue-dark);color:#fff;margin-top:0}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-block:clamp(48px,6vw,80px)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}
.footer .wordmark__a{color:#ffffff;opacity:.95}
.footer .wordmark__b{color:#fff}
.footer__blurb{color:rgba(255,255,255,.78);font-size:14.5px;margin:16px 0 0;max-width:34ch;line-height:1.6}
.footer__h{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 16px}
.footer__l{display:flex;flex-direction:column;gap:11px}
.footer__l a{color:rgba(255,255,255,.8);font-size:14.5px}
.footer__l a:hover{color:#fff}
.footer__legal{
  border-top:1px solid rgba(255,255,255,.22);
  padding-block:26px;
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;
  font-size:12.5px;color:rgba(255,255,255,.72);
}
.footer__legal .id{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.footer__legal b{color:rgba(255,255,255,.8);font-weight:500}

/* ---------- misc ---------- */
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.head-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(28px,3.5vw,48px)}
.head-row__t{display:flex;flex-direction:column;gap:14px;max-width:760px}
.page{display:none}
.page[data-active="true"]{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:100;border-radius:0 0 var(--r-4) 0}
.skip:focus{left:0}
.disclaimer{
  font-size:12.5px;color:var(--ink-3);
  border:1px dashed var(--border);border-radius:var(--r-5);
  padding:13px 16px;max-width:76ch;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ================= LEARN SECTION ================= */

/* emergency banner */
.emerg{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  background:var(--blue);color:#fff;
  border-radius:var(--r-6);padding:22px clamp(20px,2.6vw,32px);
}
.emerg__n{font-size:clamp(38px,5vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.emerg__t{display:flex;flex-direction:column;gap:4px;flex:1 1 280px}
.emerg__t b{font-size:16px;font-weight:500}
.emerg__t span{font-size:14px;color:rgba(255,255,255,.85);max-width:62ch}
.emerg a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* helpline cards */
.hls{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.hl{
  border:1px solid var(--border);border-radius:var(--r-6);
  padding:20px 22px;display:flex;flex-direction:column;gap:10px;background:var(--surface);
  transition:border-color .2s var(--ease);
}
.hl:hover{border-color:var(--blue)}
.hl__top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hl__n{
  font-size:29px;font-weight:400;letter-spacing:-.02em;color:var(--blue);
  font-variant-numeric:tabular-nums;line-height:1;
}
.hl__n a{color:inherit}
.hl__n a:hover{text-decoration:underline}
.hl__name{font-size:15.5px;font-weight:500;color:var(--ink);margin:0;line-height:1.3}
.hl__cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hl__meta{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  font-size:11.5px;letter-spacing:.03em;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--blue-50);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);
  white-space:nowrap;
}
.badge--warn{
  background:color-mix(in srgb,#eb6f0a 12%,transparent);color:#8a3f00;
  border-color:color-mix(in srgb,#eb6f0a 32%,transparent);
}
.hl__note{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0}
.hl__src{font-size:12px;color:var(--ink-3);margin-top:auto;padding-top:4px}
.hl__src a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.hl__src a:hover{color:var(--blue)}

/* scheme blocks */
.scheme{
  border:1px solid var(--border);border-radius:var(--r-8);overflow:hidden;background:var(--surface);
}
.scheme__head{
  background:var(--blue-50);padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--border);
}
.scheme__gu{font-size:19px;color:var(--blue);font-weight:400}
.scheme__dept{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.scheme__body{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:24px}
.scheme__money{
  background:var(--blue);color:#fff;border-radius:var(--r-5);
  padding:18px 20px;font-size:15.5px;line-height:1.55;
}
.scheme__money b{font-weight:500}
.sblock{display:flex;flex-direction:column;gap:10px}
.sblock__h{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);font-weight:500}
.sblock ul{margin:0;padding-left:19px;color:var(--ink-2);font-size:14.8px;line-height:1.6}
.sblock li{margin-bottom:7px}
.sblock li:last-child{margin-bottom:0}
.sblock p{margin:0;color:var(--ink-2);font-size:14.8px;line-height:1.6;max-width:76ch}
.scheme__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:4px}

/* festival calendar */
.fmonth{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:500;
  padding:22px 0 10px;border-bottom:1px solid var(--border);
}
.fest{
  display:grid;grid-template-columns:168px 1fr;gap:clamp(14px,2.6vw,36px);
  padding:20px 0;border-bottom:1px solid var(--border);
}
.fest__d{font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
.fest__aka{font-size:12.5px;color:var(--ink-3);margin-top:3px;display:block}
.fest__b{display:flex;flex-direction:column;gap:9px;min-width:0}
.fest__n{font-size:17.5px;font-weight:500;letter-spacing:-.005em;margin:0;color:var(--ink)}
.fest__row{font-size:14.2px;color:var(--ink-2);line-height:1.55;margin:0;max-width:78ch}
.fest__row b{color:var(--ink);font-weight:500}
.fest__gj{
  font-size:13.8px;color:var(--ink-2);line-height:1.55;margin:0;max-width:78ch;
  border-left:2px solid var(--blue);padding-left:13px;
}
@media (max-width:640px){.fest{grid-template-columns:1fr;gap:8px}}

/* learn hub tiles */
.lhub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.lcard{
  border:1px solid var(--border);border-radius:var(--r-6);overflow:hidden;
  display:flex;flex-direction:column;background:var(--surface);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);
}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.lcard__m{aspect-ratio:16/9;position:relative;background:var(--blue-dark)}
.lcard__m svg{position:absolute;inset:0;width:100%;height:100%}
.lcard__b{padding:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.lcard__c{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ================= WAVE 2 LEARN PAGES ================= */
.vax{width:100%;border-collapse:collapse;font-size:14.5px;min-width:820px}
.vax th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
 color:var(--blue);padding:13px 16px;background:var(--blue-50);border-bottom:1px solid var(--border);white-space:nowrap}
.vax td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:top}
.vax tbody tr:hover{background:var(--blue-50)}
.vax td.v{color:var(--ink);font-weight:500;white-space:nowrap}
.vax td.w{white-space:nowrap;font-variant-numeric:tabular-nums}
.vaxgrp{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);font-weight:500;
 padding:26px 0 10px;border-bottom:1px solid var(--border)}

.report{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-6);overflow:hidden;
}
.rch{background:var(--surface);padding:22px 24px;display:flex;flex-direction:column;gap:9px}
.rch__n{font-size:28px;font-weight:400;color:var(--blue);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.rch__n a{color:inherit}
.rch__t{font-size:15px;font-weight:500;color:var(--ink);margin:0}
.rch__d{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5}

.lawlist{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-6);overflow:hidden}
.law{background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:12px}
.law__n{font-size:16.5px;font-weight:500;color:var(--ink);margin:0;line-height:1.35}
.law__y{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.law__d{font-size:14.5px;color:var(--ink-2);margin:0;max-width:78ch;line-height:1.6}
.law__p{font-size:13.8px;color:var(--ink-2);margin:0;padding-left:16px;border-left:2px solid var(--blue-50)}

.person{
  border:1px solid var(--border);border-radius:var(--r-6);padding:22px;background:var(--surface);
  display:flex;flex-direction:column;gap:9px;transition:border-color .2s var(--ease);
}
.person:hover{border-color:var(--blue)}
.person__n{font-size:17px;font-weight:500;color:var(--ink);margin:0;line-height:1.3}
.person__o{font-size:13px;color:var(--blue);letter-spacing:.02em}
.person__w{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55}
.person__g{font-size:12.8px;color:var(--ink-3);margin:0;margin-top:auto;padding-top:8px;line-height:1.5}

.flag{
  font-size:13.5px;color:var(--ink-2);
  background:color-mix(in srgb,#eb6f0a 9%,transparent);
  border-left:2px solid #eb6f0a;border-radius:var(--r-5);padding:14px 16px;max-width:82ch;
}
.flag b{color:var(--ink)}


/* ---------- v11: logo, long-form prose, plain tables ---------- */
.logo{display:block;height:54px;width:auto}
.footer .logo{height:48px}
@media (max-width:640px){.logo{height:38px}}
.prose{max-width:78ch;color:var(--ink-2);font-size:clamp(16px,1.1vw,17.5px);line-height:1.8;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.prose p{margin:0 0 1.25em}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue)}
@media (max-width:720px){.prose{text-align:left;hyphens:none}}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-6);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
table.tbl th{text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);padding:15px 18px;border-bottom:1px solid var(--border);background:var(--blue-50)}
table.tbl td{padding:15px 18px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink-2);line-height:1.55}
table.tbl td b{color:var(--ink);font-weight:600}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-2)}
.accent-bar{display:block;width:44px;height:3px;background:var(--orange);border-radius:2px}


/* ---------- v12: accessibility + trust ---------- */
p a:not(.btn):not(.textlink),.note a,.small a,.lede a,.disclaimer a,.prose a,.acc__a a,.dl__v a,td a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.footer__l a{display:inline-flex;align-items:center;min-height:28px}
.tbl-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.field input,.field select,.field textarea{min-height:44px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.policy-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.policy-links a{color:rgba(255,255,255,.72);font-size:13px}
.policy-links a:hover{color:#fff}


/* ---------- v13: photography ---------- */
.media-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__media--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,26,61,.80) 0%,rgba(6,26,61,.50) 48%,rgba(6,26,61,.12) 100%)}

.pcard:hover .media-photo,.lcard:hover .media-photo{transform:scale(1.03)}
.media-photo{transition:transform .6s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.media-photo{transition:none}}


/* ---------- v16: legibility, mobile, image handling ---------- */
/* Text sits on solid brand blue; the photograph reads beside it, never behind it. */
.hero{min-height:clamp(440px,64vh,620px);align-items:center}

.hero__content{max-width:min(620px,100%)}
.hero__sub{color:#fff;opacity:.92}
.chip-dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}

/* Sticky header must not clip headings when jumping/scrolling */
html{scroll-padding-top:calc(var(--h-header) + 16px)}

@media (max-width:860px){
  /* No photo behind text on small screens — solid panel, photo below the fold of the copy */
  .hero{min-height:0;align-items:stretch;background:#06255c}
  .hero__media{position:relative;inset:auto;z-index:0;height:38vw;min-height:170px;max-height:260px;order:2}
  .hero__scrim{display:none}
  .hero__inner{order:1;padding-block:34px 28px}
  .hero .wrap{width:100%}
  .hero{flex-direction:column}
  .hero__content{gap:20px}
  .hero__actions{gap:10px}
  .hero__actions .btn{width:100%;justify-content:space-between}
  .hero__badges{gap:8px}
}
@media (max-width:640px){
  /* Minimum readable sizes */
  .small,.stat__l,.hl__note,.tile__d,.pcard__body p{font-size:15px;line-height:1.6}
  .stat__note,.card__n,.eyebrow,.hl__cat{font-size:12px}
  .note,.disclaimer{font-size:14.5px;line-height:1.65}
  table.tbl{min-width:560px;font-size:14px}
  table.tbl th,table.tbl td{padding:12px 13px}
  .tbl-wrap{position:relative}
  .tbl-wrap::after{content:"Swipe to see the rest of the table";display:block;padding:8px 13px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--border);background:var(--surface-2)}
  .prose{font-size:16px;line-height:1.75}
  .dl__item{padding:18px 16px}
}
/* Photos: consistent crop, never stretched */
.media-photo{object-position:50% 42%}

@media (max-width:640px){
  .pcard__tag{font-size:12px}
  .chip-dark{font-size:13.5px}
  .hero__sub{font-size:17px;line-height:1.6}
}

/* Solid brand panel behind hero text; photograph reads clean to the right. */
.hero.hero--photo .hero__scrim{
  background:linear-gradient(90deg,#06255c 0%,#06255c 40%,rgba(6,37,92,.88) 54%,rgba(6,37,92,.30) 78%,rgba(6,37,92,.12) 100%);
}
.hero.hero--photo .hero__media--photo::after{
  content:"";position:absolute;inset:0;background:rgba(6,37,92,.20);
}
@media (max-width:860px){
  .hero.hero--photo .hero__scrim{display:none}
  .hero.hero--photo .hero__media--photo::after{background:rgba(6,37,92,.08)}
}

/* ---------- v19: photographs shown clean, no tint; no dark "hole" while loading ---------- */
/* Desktop hero: solid brand panel on the left for the text, the photograph on the right
   with no colour laid over it. Only a narrow seam where the two meet. */
.hero.hero--photo .hero__media--photo::after{content:none}
@media (min-width:861px){
  .hero.hero--photo .hero__media{left:50%}
  .hero.hero--photo .hero__scrim{
    background:linear-gradient(90deg,#06255c 0%,#06255c 50%,rgba(6,37,92,0) 57%);
  }
  .hero.hero--photo .hero__content{
    max-width:min(620px, calc(50vw - var(--gutter) - 28px), calc(var(--w-max) / 2 - var(--gutter) - 28px));
  }
  .hero.hero--photo .media-photo{object-position:30% 60%}
}
/* A photo that has not arrived yet shows a light neutral panel, not a dark block
   that reads as a broken image. */
.pcard__media,.band__media,.lcard__media{background:#e3e9f2}

/* ---------- v20: green-farmland hero, animal-welfare section ---------- */
.hero .media-photo--farmland{object-position:40% 62%}
@media (min-width:861px){.hero.hero--photo .media-photo--farmland{object-position:30% 60%}}
.section--animal{background:#eef5ec}
.section--animal .grid{align-items:stretch}
.pcard--static{cursor:default}

/* ============================================================
   PREMIUM LAYER — depth, 3D and motion
   Appended 27 Sept 2026. Pure CSS + a 5.6KB script, no library.
   Every motion rule sits inside html.js-motion, which the script adds
   only when the browser supports IntersectionObserver AND the visitor
   has not asked for reduced motion. With JS off, nothing here hides
   content and the page renders exactly as before.
   The hero is deliberately untouched by reveal, so LCP is unaffected.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 1. Reveal choreography ---------------------------------- */
  html.js-motion [data-reveal]{
    opacity:0;
    transform:translate3d(0,22px,0) scale(.985);
    filter:blur(3px);
    will-change:opacity,transform;
    transition:
      opacity .68s var(--ease-out) calc(var(--i,0) * 70ms),
      transform .68s var(--ease-out) calc(var(--i,0) * 70ms),
      filter .68s var(--ease-out) calc(var(--i,0) * 70ms);
  }
  html.js-motion [data-reveal].is-in{
    opacity:1; transform:none; filter:none; will-change:auto;
  }

  /* ---- 2. Ambient light behind the hero ------------------------ */
  .hero{position:relative;isolation:isolate}
  .hero::after{
    content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
    z-index:0;pointer-events:none;
    background:
      radial-gradient(42% 55% at 18% 28%, rgba(120,170,255,.24), transparent 70%),
      radial-gradient(38% 48% at 72% 12%, rgba(251,161,52,.14), transparent 72%);
    animation:sf-drift 22s var(--ease) infinite alternate;
  }
  .hero > *{position:relative;z-index:1}
  @keyframes sf-drift{
    from{transform:translate3d(-2%,-1%,0) scale(1)}
    to{transform:translate3d(3%,2%,0) scale(1.06)}
  }

  /* slow drift on the hero photograph — depth without a parallax library */
  .hero__media--photo img,.media-photo--farmland{
    animation:sf-kenburns 34s var(--ease) infinite alternate;
  }
  @keyframes sf-kenburns{
    from{transform:scale(1.02)}
    to{transform:scale(1.09)}
  }

  /* ---- 3. Buttons ---------------------------------------------- */
  .btn{position:relative;overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
  .btn::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
    transform:translateX(-120%);transition:transform .7s var(--ease-out);
  }
  .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
  .btn:hover::after{transform:translateX(120%)}
  .btn:active{transform:translateY(0)}

  /* ---- 4. Text links draw their underline ---------------------- */
  .textlink{position:relative}
  .textlink::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .4s var(--ease-out);
  }
  .textlink:hover::after{transform:scaleX(1);transform-origin:left}

  /* ---- 5. Numbers ---------------------------------------------- */
  .stat__n{font-variant-numeric:tabular-nums}
}

/* ---- 6. Depth and 3D — these apply regardless of motion setting,
          because a resting shadow is not animation ---------------- */
.pcard,.tile,.lcard,.card{
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
  box-shadow:0 1px 2px rgba(11,12,24,.05),0 6px 18px rgba(11,12,24,.05);
}

@media (hover:hover) and (pointer:fine){
  .pcard:hover,.tile:hover,.lcard:hover,.card:hover{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-4px,0);
    box-shadow:
      0 2px 4px rgba(11,12,24,.06),
      0 14px 34px rgba(11,12,24,.10),
      0 28px 64px rgba(11,12,24,.08);
  }
  /* a soft highlight that follows the cursor across the card face */
  .pcard,.tile,.lcard,.card{position:relative}
  .pcard::before,.tile::before,.lcard::before,.card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 62%);
    opacity:0;transition:opacity .35s var(--ease-out);z-index:0;
  }
  .pcard:hover::before,.tile:hover::before,.lcard:hover::before,.card:hover::before{opacity:1}
  .pcard > *,.tile > *,.lcard > *,.card > *{position:relative;z-index:1}
  /* the icon lifts off the card face — real z-depth, not a drop shadow */
  .tile:hover .tile__icon{transform:translateZ(28px) scale(1.06)}
  .tile__icon{transition:transform .45s var(--ease-out)}
}

.pcard--static:hover{transform:none}

/* ---- 7. Header becomes glass once the page moves ---------------- */
.header{transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out),backdrop-filter .3s var(--ease-out)}
.header.is-stuck{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 rgba(11,12,24,.07),0 8px 28px rgba(11,12,24,.06);
}
/* The glass must never cost contrast: over a dark hero a 72%-white panel
   dropped the nav links to 3.9:1. Opaque enough to pass, and the ink is
   darkened while stuck so the margin is comfortable rather than marginal. */
.header.is-stuck .nav__link{color:var(--ink)}

/* ---- 8. Focus stays unmistakable on top of all of it ------------ */
.btn:focus-visible,.tile:focus-visible,.pcard:focus-visible,.lcard:focus-visible,.card:focus-visible,.textlink:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;transform:none;
}

/* ===========================================================================
   PREMIUM DESIGN LAYER v2 — 16 October 2026
   Ported from the Figma file "Scapex Foundation — Premium Design 2026".
   Visual only. No markup, no URLs, no copy and no schema are changed by this
   block, so the pre-render step, the FAQ JSON-LD, the sitemap and the internal
   linking are all unaffected. To revert the whole redesign, delete everything
   below this banner (or restore css/site.v26.bak).
   =========================================================================== */

:root{
  --sun:#e8a33d;                 /* warm accent, taken from the Scapex logo mark */
  --blue-deep:#072f63;           /* darkened --blue, for dark bands */
  --paper-warm:#f7f7f5;
  --hair:#e6e6e9;
  --sp-sectional:clamp(84px,9vw,132px);
  --shadow-card:0 1px 2px rgba(11,12,24,.04), 0 10px 28px -12px rgba(11,12,24,.10);
  --shadow-card-h:0 2px 4px rgba(11,12,24,.05), 0 22px 44px -16px rgba(11,12,24,.16);
}

/* ---- 1. Editorial display type --------------------------------------- */
.display{
  font-weight:650;
  /* capped so "Committed to" stays on one line inside the 620px hero column:
     the heavier weight is wider than the old 300, so the ceiling is lower than it looks */
  font-size:clamp(44px,6.1vw,92px);
  line-height:.95;
  letter-spacing:-.035em;
}

/* ---- 1b. REGRESSION FIX (pre-existing, found 16 Oct) --------------------
   The 27 September motion layer added `.hero > *{position:relative}` to lift
   the hero text above its background wash. That selector also matches
   `.hero__media`, overriding its `position:absolute` at equal specificity and
   collapsing the hero photograph to 0x0 on every desktop width. Restore it.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero > .hero__media{ position:absolute; z-index:-2; }
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px){
  .hero > .hero__media{ position:relative; z-index:0; }
}
.h2{ font-weight:600; letter-spacing:-.022em; line-height:1.1; }
.h3{ font-weight:600; letter-spacing:-.012em; }
.h4{ font-weight:600; letter-spacing:-.008em; }
.lede{ font-size:clamp(17px,1.4vw,21px); line-height:1.6; max-width:64ch; }
.hero__sub{ font-size:clamp(16px,1.35vw,20px); line-height:1.6; max-width:58ch; }

/* ---- 2. Section rhythm and the accent rule --------------------------- */
.section{ padding-top:var(--sp-sectional); padding-bottom:var(--sp-sectional); }
.section--alt{ background:var(--paper-warm); }
.eyebrow{
  color:var(--ink-3);
  letter-spacing:.14em;
  font-size:11.5px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; inline-size:26px; block-size:2px; flex:0 0 26px;
  background:var(--sun); border-radius:2px;
}
.hero .eyebrow{ color:var(--on-dark-2); }
.head-row{ margin-bottom:clamp(32px,4vw,56px); }

/* ---- 3. Cards: hairline, generous radius, restrained depth ----------- */
.pcard, .tile{
  border-radius:22px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
.tile{
  border:1px solid var(--hair);
  box-shadow:var(--shadow-card);
  background:#fff;
}
.pcard{ box-shadow:var(--shadow-card); overflow:hidden; }
.pcard__body{ gap:14px; }

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .tile:hover, .pcard:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card-h);
  }
  .tile:hover{ border-color:#d7d7dd; }
}

/* ---- 4. Buttons ------------------------------------------------------ */
.btn{
  border-radius:var(--r-pill);
  font-weight:500;
  letter-spacing:-.002em;
  padding-block:15px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover{ transform:translateY(-2px); }
}

/* ---- 5. Credential chips — the verification signal ------------------- */
.chip-dark{
  padding:9px 17px;
  font-size:12px;
  letter-spacing:.03em;
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.09);
}
.chip-dark::before{
  content:""; inline-size:5px; block-size:5px; border-radius:50%;
  background:var(--sun); flex:0 0 5px;
}

/* ---- 6. Statistics --------------------------------------------------- */
.stat__n{ font-weight:600; letter-spacing:-.04em; }

/* ---- 7. Header ------------------------------------------------------- */
.header.is-stuck{ box-shadow:0 1px 0 rgba(11,12,24,.07); }
.nav__link{ letter-spacing:-.003em; }

/* ---- 8. Tables and rules --------------------------------------------- */
.tablewrap{ border-radius:18px; }
.note, .flag{ border-radius:16px; }

/* ---- 9. Respect reduced motion --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pcard, .tile, .btn{ transition:none; }
}

/* ---- 10. Small screens ----------------------------------------------- */
@media (max-width:640px){
  .display{ font-size:clamp(38px,11vw,54px); line-height:.98; letter-spacing:-.028em; }
  .pcard, .tile{ border-radius:18px; }
  .eyebrow::before{ inline-size:18px; flex-basis:18px; }
}