/* =====================================================================
   TSPCACC — public site
   Palette: Taraba green with gold used sparingly.
   Type: Archivo (structure) · Source Serif 4 (prose) · IBM Plex Mono (references)
   The mono reference code is the signature device: the Commission's
   promise to the public is that every matter gets a number.
   ===================================================================== */

:root{
  /* Palette taken from the Commission's seal: navy ring, red field, white.
     The older green-and-gold names are kept as aliases so every existing
     rule follows the new colours without being rewritten. */
  /* Each colour has a job rather than a share of the page.
     navy  = structure   (the seal's ring: header, footer, hero, headings)
     red   = action      (the seal's field: buttons, alerts — kept scarce)
     green = affiliation (Taraba State: the government strip, success states)
     gold  = a hairline, never a surface */
  /* Option C — a light page.
     The Commission's colours mark structure and confirmation; the page
     itself stays out of the way. On a site whose two most important
     messages are "your complaint was received, here is your reference"
     and "something is wrong", the page has to be quiet enough for those
     to be heard.

     green   structure and confirmation (State strip, headings, actions)
     maroon  detail: rules, borders, the seal's own ring
     red     errors and warnings, and nothing else
     white   everything else */

  --brand-deep:#00462A;     /* State strip, footer */
  --brand:#005A2D;          /* headings, docket header */
  --brand-mid:#007F37;      /* actions; white text passes AA at 5.1:1 */
  --accent:#005A2D;
  --accent-dark:#00462A;
  --on-dark:#E8F2EC;

  --maroon:#6A0000;         /* the seal's ring: rules and detail */
  --maroon-soft:#F5E9E9;

  --state:#00A849;          /* the seal's green, for confirmation tints */
  --state-deep:#007F37;
  --state-soft:#E8F6ED;
  --state-gold:#C9A227;

  --ink:#1A1414;
  --ink-2:#514746;          /* body copy */
  --ink-3:#7A6E6C;          /* captions, meta */
  --paper:#FFFFFF;
  --paper-2:#F7F5F3;        /* alternating bands */
  --line:#E2DCDA;
  --line-dark:#00462A;
  --danger:#B3261E;        /* errors and warnings ONLY */
  --danger-soft:#FDECEC;
  --danger-deep:#8A1A14;
  --ok:var(--state);

  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --prose:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --wrap:76rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.65 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700)}
a:hover{color:var(--green-500)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--accent);color:#fff;
  padding:.75rem 1.25rem;font-weight:600}
.skip:focus{left:0}

/* ---------- Top bar & masthead ---------- */
.topbar{background:var(--green-900);color:#CFE0D5;font-size:.78rem;letter-spacing:.04em}
.topbar__in{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;flex-wrap:wrap}
.topbar__gov{text-transform:uppercase;font-weight:500}
.topbar__hours{opacity:.75}

.masthead{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.masthead__in{display:flex;align-items:center;gap:1.25rem;padding-block:.9rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--green-900);margin-right:auto}
.brand__seal{color:var(--green-700);flex:none}
.brand__text strong{display:block;font-size:1.15rem;font-weight:700;letter-spacing:.06em}
.brand__text span{display:block;font-size:.72rem;color:#655756;max-width:26rem;line-height:1.35}

.navtoggle{display:none;align-items:center;gap:.5rem;background:none;border:1px solid var(--line);
  border-radius:var(--r);padding:.55rem .8rem;cursor:pointer;font:inherit;color:var(--ink)}
.navtoggle span{display:block;width:18px;height:2px;background:var(--green-900)}
.navtoggle span+span{margin-top:0}
.navtoggle em{font-style:normal;font-size:.8rem;font-weight:600}

.nav{display:flex;align-items:center;gap:1.5rem}
.nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500;padding-block:.4rem;
  border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--gold);color:var(--green-700)}
.nav__cta{background:var(--green-700);color:#fff!important;padding:.6rem 1.1rem!important;
  border-radius:var(--r);border-bottom:none!important;font-weight:600}
.nav__cta:hover{background:var(--green-900)}

@media (max-width:60rem){
  .navtoggle{display:inline-flex}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-top:.75rem}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{display:block;padding:.8rem 0;border-bottom:1px solid var(--line)}
  .nav__cta{text-align:center;margin-top:.75rem}
}

/* ---------- Hero ---------- */
.hero{background:var(--green-900);color:#EAF2EC;
  background-image:linear-gradient(180deg,#00662C 0%,#00662C 100%)}
/* .hero__grid is now the decorative grid overlay, not the content grid —
   that is .hero__grid2. The old content padding is removed rather than left
   to be puzzled over later. */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-700);margin:0 0 .9rem}
.eyebrow--light{color:var(--gold-soft)}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(1.85rem,4.2vw,3rem);line-height:1.14;font-weight:700;
  letter-spacing:-.015em;margin:0 0 1.1rem}
.hero__lede{font-family:var(--prose);font-size:1.1rem;line-height:1.6;color:#C6DACD;max-width:34rem;margin:0 0 1.6rem}
.hero__marks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.hero__marks li{position:relative;padding-left:1.6rem;font-size:.92rem;color:#D5E5DA}
.hero__marks li::before{content:"";position:absolute;left:0;top:.55rem;width:.55rem;height:.55rem;
  background:var(--gold);transform:rotate(45deg)}

/* Docket — the signature element */
.docket{background:#fff;color:var(--ink);border-radius:var(--r);
  box-shadow:0 18px 44px rgba(0,0,0,.28);overflow:hidden}
.docket__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--paper-2);padding:.75rem 1.25rem;border-bottom:1px solid var(--line)}
.docket__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#574A49}
.docket__state{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#7A5B00;background:#FBF0CE;padding:.2rem .55rem;border-radius:999px}

.docket__q{margin:0 0 .6rem;font-weight:600;font-size:.95rem}
.docket__field{display:flex;gap:.5rem}


.docket__field input:disabled,.docket__field button:disabled{opacity:.55}
.docket__hint{font-size:.82rem;color:#655756;margin:.7rem 0 1.25rem;line-height:1.5}
.docket__acts{display:grid;gap:.6rem}
.docket__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  border-top:1px dashed var(--line);padding:.75rem 1.25rem;background:var(--paper)}
.docket__foot span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#7A6A69}
.docket__foot code{font-family:var(--mono);font-size:.74rem;color:var(--green-700);letter-spacing:.02em}

@media (max-width:60rem){.hero__grid{grid-template-columns:1fr}}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-align:center;text-decoration:none;font:600 .92rem var(--ui);
  padding:.75rem 1.4rem;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease}
.btn--gold{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.btn--gold:hover{background:#00662C;color:#fff}
.btn--ghost{background:transparent;color:var(--green-700);border-color:var(--line)}
.btn--ghost:hover{background:var(--paper-2);color:var(--green-900)}
.hero .btn--ghost{color:var(--green-700)}

/* ---------- Bands ---------- */
.band{padding-block:clamp(2.75rem,6vw,4.5rem)}
.band--paper{background:var(--paper-2)}
.band--dark{background:var(--green-900);color:#DCE9E0}
.h-lead{font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 2rem;max-width:30ch}
.h-lead--light{color:#fff}
.band__more{margin-top:2rem}
.band--dark a{color:var(--gold-soft)}

.duties{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem}
.duties article{border-top:2px solid var(--gold);padding-top:1rem}
.duties h3{font-size:1.02rem;margin:0 0 .45rem}
.duties p{margin:0;font-size:.92rem;color:#574A49;line-height:1.6}

.depts{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}
.dept{border-left:2px solid var(--line-dark);padding-left:1.1rem}
.dept h2,.dept h3{font-size:1rem;margin:0 0 .4rem;color:#fff}
.dept p{margin:0;font-size:.88rem;line-height:1.6;color:#A9C2B4}
.dept__head{margin-top:.7rem!important;font-size:.8rem!important;color:var(--gold-soft)!important}
.dept__head span{display:block;color:#8CA697!important;font-size:.75rem}

/* ---------- Chairman ---------- */
.chair{display:grid;grid-template-columns:14rem 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.chair__photo{border-radius:var(--r);border:1px solid var(--line)}
.chair blockquote{margin:0 0 1.25rem;font-family:var(--prose);font-size:1.12rem;line-height:1.65;color:#2E2322}
.chair__by strong{display:block}
.chair__by span{font-size:.85rem;color:#655756}
@media (max-width:48rem){.chair{grid-template-columns:1fr}.chair__photo{max-width:12rem}}

/* ---------- Report routes ---------- */
.report__say{max-width:44rem;margin-bottom:2rem}
.report__say p{color:#574A49}
.routes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem;counter-reset:r}
.routes li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.routes__tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-700);display:block;margin-bottom:.6rem}
.routes h3{margin:0 0 .5rem;font-size:1.05rem}
.routes p{margin:0 0 .9rem;font-size:.9rem;color:#574A49;line-height:1.6}
.routes a{font-size:.88rem;font-weight:600}

/* ---------- Page head & prose ---------- */
.pagehead{background:var(--green-900);color:#EAF2EC;padding-block:clamp(2rem,5vw,3.25rem)}
.pagehead h1{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.18;margin:.4rem 0 0;letter-spacing:-.01em}
.pagehead__lede{font-family:var(--prose);color:#B9D2C4;margin:.85rem 0 0;max-width:52ch;font-size:1.05rem}
.crumb{font-size:.8rem;color:#9FBCAB}
.crumb a{color:#CFE3D6}
.crumb span[aria-hidden]{margin-inline:.4rem;opacity:.5}

.prose{max-width:44rem;font-family:var(--prose);font-size:1.06rem;line-height:1.75;color:#2E2322}
.prose h2{font-family:var(--ui);font-size:1.3rem;line-height:1.3;margin:2.4rem 0 .8rem;
  padding-top:1.2rem;border-top:1px solid var(--line);letter-spacing:-.005em}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-family:var(--ui);font-size:1.08rem;margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.35rem}
.prose li{margin-bottom:.5rem}
.prose blockquote{margin:1.5rem 0;padding-left:1.1rem;border-left:3px solid var(--gold);color:#4A3F3E}
.prose table{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:.92rem;margin-bottom:1.25rem}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left}
.prose th{background:var(--paper-2);font-weight:600}
.prose__stamp{font-family:var(--ui);font-size:.8rem;color:#7A6A69;border-top:1px solid var(--line);
  padding-top:1rem;margin-top:2.5rem}
.faqfilter input{width:100%;max-width:26rem;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:var(--r);font:inherit;margin-bottom:2rem}
.prose--faq h3{cursor:default}

/* ---------- People ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2rem}
.person img{border-radius:var(--r);border:1px solid var(--line);width:100%;object-fit:cover;aspect-ratio:5/6}
.person__blank{aspect-ratio:5/6;display:grid;place-items:center;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);font-size:3rem;font-weight:700;color:#A8B8AD}
.person h2{font-size:1.05rem;margin:.9rem 0 .2rem}
.person__role{margin:0;font-size:.86rem;color:var(--green-700);font-weight:600}
.person__bio{font-family:var(--prose);font-size:.94rem;line-height:1.6;color:#574A49;margin-top:.6rem}
.person__mail{display:inline-block;margin-top:.5rem;font-size:.82rem;font-family:var(--mono)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.contact h2{font-size:1.25rem;margin:0 0 .5rem}
.contact__intro{color:#574A49;margin:0 0 1.75rem;max-width:46ch}
.contact__legal{font-size:.82rem;color:#655756;margin-top:1rem}
@media (max-width:60rem){.contact{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;margin-bottom:1.25rem}
.card address{font-style:normal;font-size:.92rem;line-height:1.6;color:#4A3F3E;margin-bottom:1rem}
.card dl{margin:0;display:grid;gap:.55rem}
.card dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7A6A69}
.card dd{margin:0 0 .5rem;font-size:.92rem}
.card--map{padding:0;overflow:hidden}
.card--map iframe{display:block;width:100%;height:18rem;border:0}

/* ---------- Forms ---------- */
.field{margin-bottom:1.25rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field input[type=search],.field textarea,.field select{
  width:100%;padding:.72rem .85rem;border:1px solid #B9C6BD;border-radius:var(--r);
  font:inherit;background:#fff;color:var(--ink)}
.field textarea{resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green-700);
  outline:2px solid var(--gold);outline-offset:1px}
.field--sum{max-width:12rem}
.req,.opt{font-weight:400;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin-left:.35rem}
.req{color:var(--danger)}
.opt{color:#7A8A7F}
.hint{font-size:.82rem;color:#655756;margin:.4rem 0 0;line-height:1.5}
.err{font-size:.85rem;color:var(--danger);margin:.4rem 0 0;font-weight:500}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
@media (max-width:40rem){.f2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}

.note{padding:.85rem 1.1rem;border-radius:var(--r);margin:1.25rem 0;font-size:.92rem;
  border-left:3px solid}
.note--success{background:#E7F2EA;border-color:var(--ok);color:#00662C}
.note--error{background:#FBEAE9;border-color:var(--danger);color:#6E1613}
.note--info{background:#E9EFF4;border-color:#6A1414;color:#3A0A0A}
.note--warn{background:#FBF3DE;border-color:var(--gold);color:#5E4700}

/* ---------- Receipt ---------- */
.receipt{max-width:44rem}
.receipt h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .8rem}
.receipt__lede{font-family:var(--prose);font-size:1.08rem;color:#4A3F3E;margin:0 0 1.75rem}
.refcard{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;
  border:2px solid var(--green-900);border-radius:var(--r);padding:1.25rem 1.4rem;margin-bottom:2.25rem}
.refcard__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7A6A69;width:100%}
.refcard__code{font-family:var(--mono);font-size:clamp(.95rem,2.4vw,1.3rem);font-weight:500;
  color:var(--green-900);letter-spacing:.02em;word-break:break-all}
.refcard__copy{margin-left:auto;background:var(--green-900);color:#fff;border:0;border-radius:var(--r);
  padding:.5rem .95rem;font:600 .82rem var(--ui);cursor:pointer}
.refcard__copy:hover{background:var(--green-700)}
.receipt h2{font-size:1.15rem;margin:0 0 1rem}
.steps{list-style:none;counter-reset:s;margin:0 0 2rem;padding:0;display:grid;gap:1rem}
.steps li{counter-increment:s;position:relative;padding-left:2.6rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:1.75rem;height:1.75rem;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  font:600 .8rem var(--mono);border-radius:50%}
.steps strong{display:block;margin-bottom:.15rem}
.steps span{font-size:.92rem;color:#574A49;line-height:1.6}
.receipt__note{font-size:.92rem;color:#574A49;padding:1rem 1.1rem;background:#fff;
  border-left:3px solid var(--gold);border-radius:var(--r);margin-bottom:1.75rem}

/* ---------- Empty states ---------- */
.empty{max-width:38rem;padding-block:2rem}
.empty h1,.empty h2{font-size:clamp(1.4rem,3vw,2rem);margin:.4rem 0 .8rem}
.empty p{color:#574A49}
.empty__links{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.6rem}
.empty__links a{font-weight:600}

/* ---------- Footer ---------- */
.foot{background:var(--green-900);color:#B9CFC1;margin-top:0;padding-top:clamp(2.5rem,5vw,3.5rem)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem}
.foot__about strong{display:block;color:#fff;font-size:.98rem;margin-bottom:.5rem;line-height:1.4}
.foot__about p{font-size:.84rem;line-height:1.6;margin:0 0 1rem}
.foot address{font-style:normal;font-size:.86rem;line-height:1.7}
.foot a{color:#CFE3D6;text-decoration:none}
.foot a:hover{color:var(--gold-soft);text-decoration:underline}
.foot__col h2{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin:0 0 .9rem;font-family:var(--mono);font-weight:500}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.88rem}
.foot__note{font-size:.84rem;line-height:1.6;margin:0 0 .8rem}
.sub{display:flex;gap:.4rem;flex-wrap:wrap}
.sub input{flex:1;min-width:9rem;padding:.6rem .7rem;border:1px solid var(--line-dark);
  border-radius:var(--r);background:#0A462A;color:#fff;font:inherit;font-size:.86rem}
.sub input::placeholder{color:#7EA08C}
.sub button{padding:.6rem 1rem;border:0;border-radius:var(--r);background:var(--gold);
  color:#fff;font:600 .84rem var(--ui);cursor:pointer}
.sub button:hover{background:var(--accent-dark)}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:.9rem;margin:1rem 0 0;padding:0;font-size:.82rem}
.foot__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line-dark);margin-top:2.5rem;padding-block:1.25rem;font-size:.8rem}
.foot__base p{margin:0}
@media (max-width:60rem){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.foot__grid{grid-template-columns:1fr}}

/* =====================================================================
   Phase 2 — complaints portal, receipt and case tracking
   ===================================================================== */

.docket__state--open{color:#00662C;background:#DCEDE2}
.docket__state--shut{color:#6E1613;background:#FBEAE9}

.docket__field button:hover{background:var(--green-700)}

/* ---------- Complaint form ---------- */
.cform{max-width:52rem}
.fset{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:1.5rem clamp(1rem,3vw,1.75rem);margin:0 0 1.5rem}
.fset legend{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1.08rem;
  padding:0 .5rem;margin-left:-.5rem}
.fset__n{display:grid;place-items:center;width:1.7rem;height:1.7rem;flex:none;
  background:var(--green-900);color:var(--gold);border-radius:50%;
  font:600 .82rem var(--mono)}
.fset__note{font-size:.9rem;color:#574A49;margin:.25rem 0 1.5rem;line-height:1.6;max-width:52ch}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1.25rem}
@media (max-width:52rem){.f3{grid-template-columns:1fr}}
.cathelp{list-style:none;margin:.5rem 0 0;padding:0}
.cathelp li{font-size:.85rem;color:#574A49;background:var(--paper-2);border-left:3px solid var(--gold);
  padding:.6rem .8rem;border-radius:var(--r);line-height:1.55}
.filelist{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.35rem}
.filelist li{font-size:.85rem;font-family:var(--mono);color:#4A3F3E;background:var(--paper-2);
  padding:.4rem .65rem;border-radius:var(--r);display:flex;justify-content:space-between;gap:1rem}
.filelist li.bad{background:#FBEAE9;color:#6E1613}
.declare{background:var(--paper-2);border-left:3px solid var(--green-700);border-radius:var(--r);
  padding:1.1rem 1.25rem;margin:0 0 1.5rem}
.declare p{margin:0 0 .7rem;font-size:.92rem;line-height:1.6;color:#4A3F3E}
.declare p:last-child{margin-bottom:0}
.btn--lg{padding:.9rem 2rem;font-size:1rem}

/* ---------- Receipt credentials ---------- */
.credentials{display:grid;gap:1rem;margin-bottom:1.5rem}
.cred{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;
  border:2px solid var(--green-900);border-radius:var(--r);padding:1.1rem 1.25rem}
.cred--secret{border-color:var(--gold);border-style:dashed;background:#FFFDF5}
.cred__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7A6A69;width:100%;display:flex;gap:.6rem;align-items:center}
.cred__label em{font-style:normal;background:var(--accent);color:#fff;padding:.1rem .45rem;
  border-radius:2px;letter-spacing:.08em}
.cred__value{font-family:var(--mono);font-size:clamp(1rem,2.6vw,1.4rem);font-weight:500;
  color:var(--green-900);letter-spacing:.04em;word-break:break-all}
.cred__copy{margin-left:auto;background:var(--green-900);color:#fff;border:0;border-radius:var(--r);
  padding:.5rem .95rem;font:600 .82rem var(--ui);cursor:pointer}
.cred__copy:hover{background:var(--green-700)}
.warnbox{background:#FBF3DE;border-left:3px solid var(--gold);border-radius:var(--r);
  padding:1rem 1.15rem;margin-bottom:1.75rem}
.warnbox p{margin:0;font-size:.92rem;line-height:1.6;color:#5E4700}
.receipt__files{font-size:.92rem;color:#574A49;margin-bottom:1.5rem}

/* ---------- Track form ---------- */
.trackform{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;
  max-width:60rem}
@media (max-width:52rem){.trackform{grid-template-columns:1fr}}
.mono-in{font-family:var(--mono)!important;letter-spacing:.04em;text-transform:uppercase}
.trackform .card h2{font-size:1.05rem;margin:0 0 .6rem}
.trackform .card p{font-size:.9rem;color:#574A49;line-height:1.6;margin:0 0 .8rem}

/* ---------- Case view ---------- */
.casev{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:60rem){.casev{grid-template-columns:1fr}}
.statusbar{border-radius:var(--r);padding:1.25rem 1.4rem;margin-bottom:2rem;border-left:4px solid}
.statusbar--ok{background:#E7F2EA;border-color:var(--ok)}
.statusbar--warn{background:#FBF3DE;border-color:var(--gold)}
.statusbar--danger{background:#FBEAE9;border-color:var(--danger)}
.statusbar--muted{background:var(--paper-2);border-color:#8A9A8F}
.statusbar__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#655756;display:block}
.statusbar__value{display:block;font-size:1.3rem;margin:.25rem 0 .5rem}
.statusbar__say{margin:0;font-size:.95rem;line-height:1.6;color:#4A3F3E}
.outcome{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;margin-bottom:2rem}
.outcome h2{margin:0 0 .7rem;font-size:1.1rem}
.outcome__body{font-family:var(--prose);font-size:1rem;line-height:1.7;color:#2E2322}
.casev h2{font-size:1.1rem;margin:0 0 1rem}
.timeline{list-style:none;margin:0 0 2rem;padding:0 0 0 1.4rem;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 1.4rem}
.timeline li::before{content:"";position:absolute;left:-1.87rem;top:.35rem;width:.7rem;height:.7rem;
  background:var(--green-700);border:2px solid var(--paper);border-radius:50%}
.timeline li:first-child::before{background:var(--gold)}
.timeline__when{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#7A6A69;margin-bottom:.15rem}
.timeline__note{display:block;font-size:.9rem;color:#574A49;margin-top:.2rem;line-height:1.55}
.msgs{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.msgs li{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green-700);
  border-radius:var(--r);padding:1.1rem 1.25rem;font-size:.95rem;line-height:1.65}
.msgs__when{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#7A6A69;margin-bottom:.4rem}
.casev__side .card dl{display:grid;gap:.55rem}
.casev__privacy{font-size:.82rem;color:#655756;line-height:1.6;padding:.9rem 1rem;
  background:var(--paper-2);border-radius:var(--r)}
.lede{font-family:var(--prose);font-size:1.08rem;color:#4A3F3E}

/* =====================================================================
   Phase 3 — confidential disclosures
   Cooler and graver than the rest of the site. This is not a page
   anyone arrives at casually.
   ===================================================================== */

.pagehead--grave{background:#1A1212;background-image:linear-gradient(180deg,#1A1212 0%,#123024 100%)}

.protect h2{font-size:clamp(1.2rem,2.6vw,1.6rem);margin:0 0 1.5rem}
.protect__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
@media (max-width:52rem){.protect__grid{grid-template-columns:1fr}}
.protect__col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;
  border-top:3px solid}
.protect__col--can{border-top-color:var(--ok)}
.protect__col--cannot{border-top-color:var(--danger)}
.protect__col h3{font-size:.98rem;margin:0 0 .8rem}
.protect__col ul{margin:0;padding-left:1.1rem;display:grid;gap:.6rem}
.protect__col li{font-size:.9rem;line-height:1.6;color:#4A3F3E}
.protect__advice{font-family:var(--prose);font-size:1.02rem;line-height:1.7;color:#2E2322;
  background:#fff;border-left:3px solid var(--gold);border-radius:var(--r);padding:1.1rem 1.3rem;margin:0}
.altroute{background:var(--green-900);color:#DCE9E0;border-radius:var(--r);padding:1.2rem 1.4rem;margin-top:1.5rem}
.altroute h2,.altroute h3{color:var(--gold);font-size:.98rem;margin:0 0 .6rem}
.altroute p{margin:0;font-size:.92rem;line-height:1.65}

.warnhint{color:#7A5B00;background:#FBF3DE;border-radius:var(--r);padding:.6rem .8rem}
.declare--grave{border-left-color:var(--danger);background:#FBEAE9}
.declare--grave p{color:#5E1A16}
.warnbox--grave{background:#FBEAE9;border-left-color:var(--danger)}
.warnbox--grave p{color:#6E1613;margin-bottom:.7rem}
.warnbox--grave p:last-child{margin-bottom:0}
.closetab{background:var(--green-900);color:#DCE9E0;border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.75rem}
.closetab p{margin:0;font-size:.92rem;line-height:1.6}
.card--grave{border-left:3px solid var(--danger)}

/* Thread */
.thread{margin-bottom:2rem}
.bubble{border-radius:var(--r);padding:1.1rem 1.25rem;margin-bottom:1rem;border:1px solid var(--line)}
.bubble--reporter{background:#fff;border-left:3px solid #8A9A8F}
.bubble--commission{background:#EDF4EF;border-left:3px solid var(--green-700)}
.bubble__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#655756;margin-bottom:.5rem}
.bubble h3{margin:0 0 .5rem;font-size:1.02rem}
.bubble__body{font-size:.96rem;line-height:1.7;white-space:pre-wrap}
.attached{margin-bottom:2rem}
.attached ul{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.5rem}
.attached li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.7rem .9rem}
.attached__name{display:block;font-weight:600;font-size:.92rem;word-break:break-word}
.attached__meta{display:block;font-size:.78rem;color:#7A6A69;margin-top:.15rem}
.replybox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.replybox h2{margin-top:0}

/* ---------- Identity capture ---------- */
.ninfield .ninrow{display:flex;gap:.5rem;align-items:stretch}
.ninfield .ninrow input{flex:1;min-width:0;font-family:var(--mono);letter-spacing:.1em}
.ninfield .ninrow button{white-space:nowrap}
.ninresult{font-size:.86rem;margin:.5rem 0 0;padding:.55rem .75rem;border-radius:var(--r);
  background:var(--paper-2);color:#4A3F3E;line-height:1.5}
.ninresult--good{background:#E7F2EA;color:#00662C}
.ninresult--bad{background:#FBEAE9;color:#6E1613}
.privhint{border-left:3px solid var(--green-700);background:var(--paper-2);
  padding:.55rem .75rem;border-radius:var(--r)}
.geofield__label{font-weight:600;font-size:.9rem;margin:0 0 .4rem}
.georesult{font-size:.86rem;margin:.6rem 0 0;padding:.5rem .75rem;border-radius:var(--r);background:var(--paper-2)}
.georesult--good{background:#E7F2EA;color:#00662C}
.georesult--bad{background:#FBF3DE;color:#5E4700}

/* ---------- Downloads centre ---------- */
.dlpage{display:grid;grid-template-columns:16rem 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:60rem){.dlpage{grid-template-columns:1fr}}
.dlfilters .field{margin-bottom:.9rem}
.dlcats{margin-top:2rem}
.dlcats h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7A6A69;
  font-family:var(--mono);font-weight:500;margin:0 0 .8rem}
.dlcats ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.dlcats a{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .6rem;
  text-decoration:none;font-size:.88rem;border-radius:var(--r);color:#4A3F3E}
.dlcats a:hover{background:var(--paper-2)}
.dlcats a.on{background:var(--green-900);color:#fff;font-weight:600}
.dlcats a span{color:#8A9A8F;font-size:.8rem}
.dlcats a.on span{color:var(--gold-soft)}
.dlcount{font-size:.85rem;color:#7A6A69;margin:0 0 1rem}
.doclist{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.doc{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.25rem}
.doc--featured{border-left:3px solid var(--gold)}
.doc__type{flex:none;width:3rem;height:3rem;display:grid;place-items:center;background:var(--paper-2);
  border-radius:var(--r);font:600 .68rem var(--mono);letter-spacing:.06em;color:var(--green-700)}
.doc__body{flex:1;min-width:0}
.doc h2{font-size:1rem;margin:0 0 .35rem;line-height:1.35}
.doc h2 a{text-decoration:none}
.doc h2 a:hover{text-decoration:underline}
.doc__desc{font-size:.88rem;color:#574A49;margin:0 0 .5rem;line-height:1.55}
.doc__meta{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.78rem;color:#7A6A69;margin:0}
.doc__ver{color:var(--green-700);font-weight:600}
.doc__get{flex:none;align-self:center;background:var(--green-700);color:#fff;text-decoration:none;
  padding:.55rem 1rem;border-radius:var(--r);font-size:.85rem;font-weight:600}
.doc__get:hover{background:var(--green-900);color:#fff}
@media (max-width:40rem){.doc{flex-wrap:wrap}.doc__get{width:100%;text-align:center}}

.docpage{display:grid;grid-template-columns:1fr 20rem;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:60rem){.docpage{grid-template-columns:1fr}}
.docpreview{margin:2rem 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.docpreview object{width:100%;height:36rem;display:block}
.docpreview img{width:100%;height:auto;display:block}
.docpage__side .card dl{display:grid;gap:.5rem;margin-top:1.25rem}
.checksum{display:block;font-family:var(--mono);font-size:.68rem;word-break:break-all;
  background:var(--paper-2);padding:.5rem .6rem;border-radius:var(--r);color:#574A49}
.verhistory{margin-top:2.5rem}
.verhistory ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.verhistory li{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:.7rem .9rem;font-size:.88rem}
.verhistory li a{margin-left:auto;font-weight:600}

/* ---------- News, activities, events ---------- */
.newsfilter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.newsfilter input,.newsfilter select{padding:.65rem .8rem;border:1px solid #B9C6BD;border-radius:var(--r);font:inherit;font-size:.9rem}
.newsfilter input[type=search]{flex:1;min-width:14rem}
.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.5rem}
.card2{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card2--featured{border-top:3px solid var(--gold)}
.card2__img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.card2__img img{width:100%;height:100%;object-fit:cover}
.card2__body{padding:1.1rem 1.25rem 1.4rem;flex:1;display:flex;flex-direction:column}
.card2__kicker{display:flex;gap:.75rem;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:#7A6A69;margin:0 0 .5rem}
.card2__kicker span{color:var(--green-700)}
.card2 h2,.card2 h3{font-size:1.02rem;line-height:1.35;margin:0 0 .5rem}
.card2 h2 a,.card2 h3 a{text-decoration:none;color:var(--ink)}
.card2 h2 a:hover,.card2 h3 a:hover{color:var(--green-700);text-decoration:underline}
.card2__excerpt{font-size:.88rem;color:#574A49;line-height:1.55;margin:0}
.card2__status{margin:.6rem 0 0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-700);font-weight:600}

.herofig{margin:0;background:var(--green-900)}
.herofig img{width:100%;max-height:30rem;object-fit:cover;display:block}
.article{display:grid;grid-template-columns:1fr 19rem;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:60rem){.article{grid-template-columns:1fr}}
.article__kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .5rem}
.article__meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#B9D2C4;margin:.75rem 0 0}
.article__status{color:var(--gold-soft);font-weight:600}
.article__lede{font-family:var(--prose);font-size:1.15rem;line-height:1.65;color:#2E2322;
  margin:0 0 1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.relatedlist{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.relatedlist a{font-size:.9rem;font-weight:600;text-decoration:none;line-height:1.4;display:block}
.relatedlist a:hover{text-decoration:underline}
.relatedlist span{font-size:.78rem;color:#7A6A69}

.gallery{margin-top:2.5rem}
.gallery h2{font-size:1.15rem;margin:0 0 1rem}
.gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.gallery figcaption{font-size:.78rem;color:#655756;margin-top:.4rem;line-height:1.45}
.gallery figcaption span{display:block;color:#8A9A8F;font-style:italic}
.attachdocs{margin-top:2.5rem}
.attachdocs h2{font-size:1.15rem;margin:0 0 .8rem}
.attachdocs ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.attachdocs li{display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.7rem .9rem;font-size:.9rem}
.attachdocs__type{font:600 .64rem var(--mono);letter-spacing:.06em;color:var(--green-700);
  background:var(--paper-2);padding:.3rem .45rem;border-radius:2px}
.attachdocs li .dim{margin-left:auto;color:#7A6A69;font-size:.8rem}

.evlist{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ev{display:flex;gap:1.25rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.25rem}
.ev--cancelled{opacity:.72;border-left:3px solid var(--danger)}
.ev__date{flex:none;width:3.4rem;text-align:center;background:var(--green-900);color:#fff;
  border-radius:var(--r);padding:.5rem .25rem}
.ev__day{display:block;font-size:1.35rem;font-weight:700;line-height:1}
.ev__mon{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)}
.ev__body{flex:1;min-width:0}
.ev__kind{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7A6A69;margin:0 0 .3rem}
.ev h3{font-size:1.02rem;margin:0 0 .35rem}
.ev h3 a{text-decoration:none}
.ev h3 a:hover{text-decoration:underline}
.ev__when{font-size:.88rem;color:var(--green-700);font-weight:600;margin:0}
.ev__where,.ev__sum{font-size:.85rem;color:#574A49;margin:.3rem 0 0;line-height:1.5}
.ev__ics{flex:none;align-self:center;font-size:.82rem;font-weight:600;text-decoration:none}
@media (max-width:40rem){.ev{flex-wrap:wrap}.ev__ics{width:100%}}
.evpast{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.evpast li{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}
.evpast a{font-weight:600;text-decoration:none}
.evpast span{font-size:.82rem;color:#7A6A69;margin-left:auto}
.evbanner{display:inline-block;margin:.9rem 0 0;padding:.4rem .8rem;border-radius:var(--r);
  background:rgba(255,255,255,.12);font-size:.88rem}
.evbanner--cancelled{background:#8C1D18;color:#fff;font-weight:600}

/* ---------- Listings, cards, posts, galleries, search ---------- */
.listbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:2rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.pills{display:flex;flex-wrap:wrap;gap:.35rem}
.pills a{padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;font-size:.84rem;color:#4A3F3E;background:#fff}
.pills a:hover{border-color:var(--green-700)}
.pills a.on{background:var(--green-900);color:#fff;border-color:var(--green-900);font-weight:600}
.listsearch{display:flex;gap:.4rem;margin-left:auto}
.listsearch input{padding:.5rem .75rem;border:1px solid #B9C6BD;border-radius:var(--r);font:inherit;font-size:.88rem}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:1.5rem}
.card2{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.card2--past{opacity:.72}
.card2__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.card2__img img{width:100%;height:100%;object-fit:cover}
.card2__body{padding:1.1rem 1.25rem;flex:1;display:flex;flex-direction:column}
.card2__kicker{display:flex;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);margin:0 0 .5rem}
.card2__flag{color:var(--danger)}
.card2 h2{font-size:1.02rem;line-height:1.35;margin:0 0 .5rem}
.card2 h2 a{text-decoration:none}
.card2 h2 a:hover{text-decoration:underline}
.card2__when{font-size:.82rem;color:#574A49;margin:0 0 .5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.card2__excerpt{font-size:.88rem;color:#574A49;line-height:1.55;margin:0 0 .5rem}
.card2__media{font-size:.78rem;color:#7A6A69;margin:auto 0 0}

.posttype{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .5rem}
.postpage{display:grid;grid-template-columns:1fr 20rem;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:60rem){.postpage{grid-template-columns:1fr}}
.postcover{width:100%;border-radius:var(--r);margin-bottom:1.75rem}
.postlede{font-family:var(--prose);font-size:1.15rem;line-height:1.6;color:#2E2322;
  padding-bottom:1.25rem;margin:0 0 1.5rem;border-bottom:1px solid var(--line)}
.related{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.related a{font-size:.9rem;font-weight:600;text-decoration:none}
.related span{display:block;font-size:.78rem;color:#7A6A69}

.gallery{margin-top:2.5rem}
.gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1rem;margin-top:1rem}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.gallery figcaption{font-size:.8rem;color:#655756;margin-top:.4rem;line-height:1.45}
.gallery__video{grid-column:1/-1;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.gallery__video iframe{width:100%;height:100%;border:0;display:block}

.bigsearch{display:flex;gap:.5rem;margin-top:1.25rem;max-width:34rem}
.bigsearch input{flex:1;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r);font:inherit}
.searchpage .searchhead{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--mono);color:#7A6A69;margin:2rem 0 .75rem;font-weight:500}
.hits{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.hits li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.1rem}
.hits a{font-weight:600;text-decoration:none}
.hits a:hover{text-decoration:underline}
.hits span{display:block;font-size:.82rem;color:#7A6A69;margin-top:.2rem}

/* =====================================================================
   Brand refresh — seal, single-line masthead, loader, animated hero
   ===================================================================== */

/* ---------- Page loader ----------
   Hidden by site.js on load. The CSS animation is a failsafe: if the
   script fails to run, the overlay still clears itself rather than
   leaving a blank page over a working site. */
.pageload{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  /* White. A full-screen maroon flash on every page load reads as an error
     state, and it is the first thing anybody sees. The seal carries the
     colour instead. */
  background:#FFFFFF;
  animation:loadFail .5s ease 4s forwards}
.pageload[hidden]{display:none}
.pageload.is-done{animation:loadOut .45s ease forwards}
.pageload__seal{width:clamp(5rem,14vw,7rem);height:auto;display:block;
  filter:drop-shadow(0 8px 24px rgba(60,10,10,.18));
  animation:sealIn .7s cubic-bezier(.2,.8,.2,1) both}
.pageload__ring{position:absolute;width:clamp(7.5rem,20vw,10.5rem);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent-dark);
  animation:spin 1.1s linear infinite}
.pageload__name{position:absolute;bottom:18%;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:#7A6A6A;animation:fadeUp .8s ease .25s both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sealIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes loadOut{to{opacity:0;visibility:hidden}}
@keyframes loadFail{to{opacity:0;visibility:hidden}}

/* ---------- Masthead: seal and menu on one line ---------- */
.masthead{background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(74,0,1,.04)}
.masthead__in{flex-wrap:nowrap;gap:1rem;padding-block:.65rem}
.brand{gap:.65rem;flex:none;min-width:0}
.brand__seal{width:2.9rem;height:2.9rem;flex:none;display:block}
.brand__seal img{width:100%;height:100%;object-fit:contain;display:block}
.brand__text strong{font-size:1.05rem;letter-spacing:.08em;color:var(--brand-deep);line-height:1.1}
.brand__text span{font-size:.66rem;color:#6E5252;max-width:22rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.nav{flex:1;justify-content:flex-end;gap:1rem;min-width:0}
.nav ul{gap:1.05rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a{font-size:.85rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent);color:var(--brand)}
.nav__cta{background:var(--accent-dark);flex:none;padding:.55rem 1rem!important;font-size:.82rem}
.nav__cta:hover{background:var(--accent-dark)}
@media (max-width:72rem){.brand__text span{display:none}}
@media (max-width:60rem){
  .masthead__in{flex-wrap:wrap}
  .nav{flex:auto}
  .nav ul{overflow:visible}
}
.topbar{background:var(--brand-deep)}
.topbar__gov{color:#F0DCDC}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 78% -10%, #8A1414 0%, transparent 60%),
             linear-gradient(165deg,#4A0001 0%,#670001 62%,#7A1518 100%)}
/* Slow drift behind the text — decorative only, and switched off for
   anyone who has asked for reduced motion. */
.hero::before{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,168,73,.16), transparent 70%);
  width:60%;aspect-ratio:1;left:auto;right:-8%;top:-18%;border-radius:50%;
  animation:drift 22s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,8%,0) scale(1.12)}}

.hero__grid{position:relative;z-index:1}
.hero__watermark{position:absolute;right:-4%;bottom:-18%;width:min(30rem,46%);opacity:.07;
  pointer-events:none;z-index:0;animation:wmIn 1.6s ease .2s both}
@keyframes wmIn{from{opacity:0;transform:translateY(24px) rotate(-6deg)}to{opacity:.07;transform:none}}

/* Staged reveal, so the eye lands on the statement before the panel */
.hero .eyebrow{color:#F0B4B4}
.hero h1{letter-spacing:-.02em}
.hero .eyebrow,.hero h1,.hero__lede,.hero__marks li,.docket{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) both}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.14s}
.hero__lede{animation-delay:.24s}
.hero__marks li:nth-child(1){animation-delay:.34s}
.hero__marks li:nth-child(2){animation-delay:.42s}
.hero__marks li:nth-child(3){animation-delay:.5s}
.docket{animation-delay:.3s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero__marks li::before{background:var(--accent);border-radius:1px}
.docket{box-shadow:0 24px 60px rgba(36,0,0,.42);border:1px solid rgba(255,255,255,.08)}

.docket__label{color:#DFC0C0}

/* Sections lift slightly as they arrive; harmless if the observer never runs */
/* Content must never depend on JavaScript to be visible.
   Eight sections of the home page carry .reveal; when this rule applied
   unconditionally, one script error left the entire page blank while the
   markup was perfectly intact — which is exactly what happened.
   The .js class is set by an inline script in the <head>, so the hidden
   state exists only where something is running to undo it. */
html.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease}
html.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .hero__watermark{animation:none;opacity:.07}
  .hero .eyebrow,.hero h1,.hero__lede,.hero__marks li,.docket,.pageload__seal,.pageload__name{animation:none;opacity:1;transform:none}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .pageload__ring{animation-duration:3s}
}

/* =====================================================================
   Where each colour does its work
   ===================================================================== */

/* The State strip. This is the one band on the page that speaks as Taraba
   State rather than as the Commission, so it is the one band that carries
   the State's green. The gold hairline beneath it is the join between the
   two identities. */
.topbar{background:var(--state-deep);
  border-bottom:2px solid var(--state-gold);
  color:#D8EEE1}
.topbar__gov{color:#fff;font-weight:600}
.topbar__gov::before{content:"";display:inline-block;width:.5rem;height:.5rem;
  background:var(--state-gold);margin-right:.5rem;transform:rotate(45deg)}
.topbar__hours{color:#A9D4BC}

/* Structure stays navy so the Commission's own mark leads its own site */
.masthead{border-bottom:1px solid var(--line)}
.pagehead,.band--dark{color:var(--on-dark)}
.hero{color:var(--ink)}

/* Confirmation, receipts and anything that means "this went through" */
.note--success{background:var(--state-soft);border-color:var(--state);color:#054A26}
.tag--ok,.statusbar--ok{background:var(--state-soft);color:#054A26}
.statusbar--ok{border-color:var(--state)}
.refcard,.cred{border-color:var(--state)}
.steps li::before{background:var(--state)}
.doc__get{background:var(--accent-dark)}
.doc__get:hover{background:var(--state-deep);color:#fff}
.protect__col--can{border-top-color:var(--state)}
.bubble--commission{border-left-color:var(--state)}
.msgs li{border-left-color:var(--state)}

/* Footer: navy body, State green foot, so the page closes where it opened */
.foot{border-top:3px solid var(--state)}
.foot__col h2{color:var(--state-gold);font-family:var(--mono);font-weight:500}
.foot__base{border-top-color:#5C1A1A}
.sub button{background:var(--accent);color:#fff}
.sub button:hover{background:var(--accent-dark)}

/* Gold earns a hairline and nothing more */
.h-lead::after{content:"";display:block;width:3rem;height:2px;
  background:var(--state-gold);margin-top:.9rem}
.pagehead h1::after{content:"";display:block;width:3.5rem;height:2px;
  background:var(--state-gold);margin-top:1rem}
.hero h1::after{content:"";display:block;width:4rem;height:3px;
  background:linear-gradient(90deg,var(--accent) 0 45%,var(--state-gold) 45%);margin-top:1.1rem}

/* Red stays scarce: actions, urgency, and the active state only */
.pills a.on{background:var(--brand-deep);border-color:var(--brand-deep)}
.dlcats a.on{background:var(--brand-deep)}
.dlcats a.on span{color:var(--state-gold)}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}

/* ---------- Language switcher and translation notice ---------- */
.langs{display:flex;gap:.15rem;margin-left:auto;align-items:center}
.langs a{color:#A9D4BC;text-decoration:none;font-size:.74rem;padding:.15rem .5rem;
  border-radius:2px;letter-spacing:.02em}
.langs a:hover{color:#fff;background:rgba(255,255,255,.1)}
.langs a.on{background:var(--state-gold);color:#2A2000;font-weight:600}
@media (max-width:52rem){
  .topbar__hours{display:none}
  .langs{margin-left:auto}
}
.mtnotice{background:#FFF6E0;border:1px solid #E8CE7C;border-left:3px solid var(--state-gold);
  border-radius:var(--r);padding:.8rem 1rem;margin:1rem 0 0;font-size:.86rem;line-height:1.55;color:#5E4700}
.mtnotice a{color:#5E4700;font-weight:600}

/* =====================================================================
   Masthead fit
   ---------------------------------------------------------------------
   The Commission's full name is 58 characters. On one line it took most
   of the header and pushed the last menu item under the call to action.
   Two lines at a smaller size costs vertical space that was already
   there, and frees roughly a fifth of the width.
   ===================================================================== */
.brand{align-items:center;max-width:22rem}
.brand__seal{width:3.1rem;height:3.1rem}
.brand__text{min-width:0}
.brand__text strong{font-size:1.02rem;letter-spacing:.09em;line-height:1}
.brand__text span{
  display:block;
  white-space:normal;              /* was nowrap with an ellipsis */
  overflow:visible;
  text-overflow:clip;
  max-width:15rem;
  font-size:.64rem;
  line-height:1.25;
  margin-top:.15rem;
  /* two lines, then trim — the abbreviation above already identifies it */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Nav: tighter, and it wraps rather than hiding an item under the button */
.masthead__in{gap:.85rem}
.nav{gap:.85rem}
.nav ul{gap:.9rem;overflow:visible;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-size:.83rem;padding-block:.35rem}
.nav__cta{padding:.55rem .95rem!important;font-size:.8rem}

/* Between roughly 60rem and 80rem there is not room for everything on one
   line. Dropping the strapline first is less of a loss than dropping a
   menu item. */
@media (max-width:80rem){
  .brand__text span{display:none}
  .brand{max-width:none}
  .nav a{font-size:.8rem}
  .nav ul{gap:.75rem}
}
@media (max-width:66rem){
  .topbar__hours{display:none}
}

/* =====================================================================
   Hero
   ---------------------------------------------------------------------
   Depth from layered light rather than decoration: two slow-moving
   washes, a surveyor's grid, and a vignette that pulls the eye to the
   left-hand statement. Everything here is inert under reduced motion,
   and none of it is an image request.
   ===================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;
  /* light, to match the slides that now sit in it */
  --hero-ink:var(--brand-deep);
  /* The masthead already puts clear air above this. Six rems on top of that
     pushed the headline towards the fold on a laptop. */
  padding-block:clamp(1.5rem,3.2vw,2.5rem) clamp(1.75rem,3.5vw,2.75rem);
  background:linear-gradient(168deg,#2E0000 0%,#4A0001 42%,#7A1518 100%)}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}

.hero__aurora{position:absolute;border-radius:50%;filter:blur(72px);opacity:.55}
.hero__aurora--a{width:46rem;aspect-ratio:1;right:-14rem;top:-18rem;
  background:radial-gradient(closest-side, rgba(160,30,30,.55), transparent 70%);
  animation:auroraA 26s ease-in-out infinite alternate}
.hero__aurora--b{width:34rem;aspect-ratio:1;left:-10rem;bottom:-16rem;
  background:radial-gradient(closest-side, rgba(0,168,73,.30), transparent 70%);
  animation:auroraB 32s ease-in-out infinite alternate}
@keyframes auroraA{to{transform:translate3d(-5rem,3rem,0) scale(1.15)}}
@keyframes auroraB{to{transform:translate3d(4rem,-3rem,0) scale(1.2)}}

/* A surveyor's grid: quiet, and it reads as record-keeping */
.hero__grid{position:absolute;inset:0;opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 25% 40%,#000 10%,transparent 78%);
  animation:gridDrift 40s linear infinite}
@keyframes gridDrift{to{background-position:64px 64px}}
.hero__vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 70% 50%, transparent 40%, rgba(32,0,0,.55) 100%)}

.hero__watermark{position:absolute;right:-3%;bottom:-14%;width:min(26rem,42%);height:auto;
  opacity:.06;z-index:-1;pointer-events:none;
  animation:wmFloat 18s ease-in-out infinite alternate}
@keyframes wmFloat{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-1.5rem) rotate(3deg)}}

.hero__grid2{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;position:relative;z-index:1}
@media (max-width:64rem){.hero__grid2{grid-template-columns:1fr}}

.hero .eyebrow{color:#F2B8B8;display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.hero .eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--accent);display:inline-block}

.hero__title{
  font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.06;
  letter-spacing:-.028em;
  font-weight:700;
  margin:0 0 1.25rem;
  /* 19ch was breaking a long headline after three words. A display line
     reads comfortably up to about the mid thirties; balance then evens the
     lines out rather than leaving a single word stranded on the last one. */
  max-width:34ch;
  text-wrap:balance;              /* no more breaks mid-clause */
  background:linear-gradient(180deg,#FFFFFF 30%,#F2DEDE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__title::after{content:"";display:block;width:5rem;height:3px;margin-top:1.4rem;
  background:linear-gradient(90deg,var(--accent) 0 50%,var(--state-gold) 50%);border-radius:2px}
.hero__lede{font-size:clamp(1rem,1.5vw,1.14rem);color:#E4C9C9;max-width:44ch}
.hero__marks li{color:#F0DCDC}
.hero__marks li::before{background:var(--accent);border-radius:2px;transform:none;
  width:.4rem;height:.4rem;top:.62rem}

/* Docket: raised, glassy at the edges, with a live status dot */
.docket{border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.98);
  box-shadow:0 32px 70px -20px rgba(26,0,0,.65), 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter:blur(6px)}

.docket__state{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px}
.docket__dot{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,168,73,.55)}
  70%{box-shadow:0 0 0 .5rem rgba(0,168,73,0)}
  100%{box-shadow:0 0 0 0 rgba(0,168,73,0)}
}


.docket__field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(103,0,1,.14)}

.docket__field button:hover{background:var(--brand)}
.docket .btn{border-radius:6px}
.docket .btn--gold{box-shadow:0 8px 20px -8px rgba(0,168,73,.8)}

/* Figures. Real numbers, counted up once when they scroll into view. */
.figures{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;
  margin-top:clamp(2.5rem,5vw,4rem);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);border-radius:10px;overflow:hidden}
.figure{background:rgba(255,255,255,.03);padding:1.15rem 1.25rem;backdrop-filter:blur(4px)}
.figure__n{display:block;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1;
  color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figure__l{display:block;margin-top:.4rem;font-size:.76rem;letter-spacing:.04em;color:#CFAAAA}

/* The scroll cue was removed: it landed on top of the figures band, and the
   process strip at the top now does the job of saying "there is more here". */

@media (prefers-reduced-motion:reduce){
  .hero__aurora,.hero__aurora--a,.hero__aurora--b,
  .hero__grid,.hero__watermark,.docket__dot{animation:none!important}
  .figure__n{transition:none}
}

/* =====================================================================
   Hero, second pass
   ---------------------------------------------------------------------
   The technique a product site uses — an interface that visibly works —
   applied to what this office actually does: a case moving from received
   to resolved. The floating chips are the fragments that surround a SaaS
   mockup, named after real events rather than invented features.
   ===================================================================== */



/* Tilt follows the pointer on a fine-pointer device only */

@media (hover:hover) and (pointer:fine){
  .docket__stage:hover .docket{box-shadow:0 42px 90px -24px rgba(26,0,0,.72),0 0 0 1px rgba(255,255,255,.14)}
}

/* Floating fragments */

.chip::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--state);margin-right:.45rem;vertical-align:middle}
.chip--1{top:-1.1rem;left:-1.6rem;animation-delay:.9s}
.chip--2{top:38%;right:-2.2rem;animation-delay:1.15s}
.chip--2::before{background:var(--brand-mid)}
.chip--3{bottom:2.4rem;left:-2.6rem;animation-delay:1.4s}
.chip--3::before{background:var(--accent)}
@keyframes chipIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to{opacity:1;transform:none}
}
.chip--1{animation-name:chipIn,floatA}
.chip--2{animation-name:chipIn,floatB}
.chip--3{animation-name:chipIn,floatA}
.chip--1,.chip--2,.chip--3{animation-duration:.8s,7s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1),ease-in-out;
  animation-iteration-count:1,infinite;animation-direction:normal,alternate;
  animation-fill-mode:forwards,none}
@keyframes floatA{from{translate:0 0}to{translate:0 -.55rem}}
@keyframes floatB{from{translate:0 0}to{translate:0 .6rem}}
@media (max-width:78rem){.chip{display:none}}

/* The case, moving. Loops so it is visible whenever somebody looks. */


.steps3 li{display:flex;align-items:center;gap:.35rem;transition:color .45s ease}
.steps3 li span{width:.5rem;height:.5rem;border-radius:50%;background:#DCD0CF;
  transition:background .45s ease,box-shadow .45s ease}
.steps3 li.is-on{color:var(--brand-deep)}
.steps3 li.is-on span{background:var(--state);box-shadow:0 0 0 3px rgba(0,168,73,.16)}

.steps3__rail i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--state),var(--brand-mid));
  transition:width .8s cubic-bezier(.4,0,.2,1)}

/* Parallax: the backdrop lags the page, which reads as depth rather than motion */
.hero__aurora,.hero__watermark{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .chip{opacity:1;animation:none!important;transform:none!important;translate:0!important}
  .docket{transform:none!important;transition:none}
  .steps3 li,.steps3 li span,.steps3__rail i{transition:none}
}

/* =====================================================================
   Homepage cards
   ---------------------------------------------------------------------
   Structure follows the federal Commission's ordering — vision, mandate,
   services, leadership, news — because that is the order a citizen
   arriving cold needs. The treatment is ours: flat cards with a single
   accent edge rather than drop shadows and stock photography.
   ===================================================================== */

.band--tight{padding-block:clamp(2rem,4vw,3rem)}
.arrowlink{font-weight:600;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.arrowlink::after{content:"→";transition:transform .18s ease}
.arrowlink:hover::after{transform:translateX(.25rem)}

/* Vision / mission / values */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem;
  margin-top:-4rem;position:relative;z-index:2}
@media (max-width:64rem){.trio{margin-top:1rem}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.6rem 1.5rem;
  position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
/* Named by colour rather than by card, since which card takes which
   accent is now the Commission's choice, not the template's. */
.pcard--brand::before{background:var(--brand)}
.pcard--accent::before{background:var(--accent-dark)}
.pcard--state::before{background:var(--state)}
.pcard--gold::before{background:var(--state-gold)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(74,0,1,.35)}
.pcard__mark{position:absolute;right:1.1rem;top:.8rem;font:700 2.4rem/1 var(--mono);
  color:var(--paper-2);letter-spacing:-.04em}
.pcard h2{font-size:1.06rem;margin:0 0 .6rem}
.pcard p{font-size:.92rem;line-height:1.65;color:#574A49;margin:0 0 1rem}
.pcard__more{font-size:.85rem;font-weight:600;text-decoration:none}
.pcard__more:hover{text-decoration:underline}

/* Mandate */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.1rem}
.mcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.4rem 1.3rem;
  transition:border-color .2s ease,transform .2s ease}
.mcard:hover{border-color:var(--brand-mid);transform:translateY(-2px)}
.mcard__icon{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:8px;
  background:var(--paper-2);color:var(--brand);margin-bottom:.9rem}
.mcard__icon svg{width:1.4rem;height:1.4rem}
.mcard h3{font-size:.98rem;margin:0 0 .45rem}
.mcard p{font-size:.87rem;line-height:1.6;color:#574A49;margin:0}

/* Departments */
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem}
.scard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  border-top:3px solid var(--brand);transition:transform .2s ease,box-shadow .2s ease}
.scard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(74,0,1,.3)}
.scard__body{padding:1.3rem}
.scard h3{font-size:1rem;margin:0 0 .5rem}
.scard p{font-size:.88rem;line-height:1.6;color:#574A49;margin:0 0 .7rem}
.scard__head{font-size:.82rem!important;color:var(--brand)!important;font-weight:600;margin:0!important}
.scard__head span{display:block;font-weight:400;color:#7A6A69;font-size:.76rem}

/* Call to action */
.ctaband{background:linear-gradient(120deg,var(--brand-deep),var(--brand-mid));color:#fff;
  padding-block:clamp(2.5rem,5vw,3.5rem);position:relative;overflow:hidden}
.ctaband::after{content:"";position:absolute;right:-6rem;top:-6rem;width:22rem;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,168,73,.28),transparent 70%)}
.ctaband__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;position:relative;z-index:1}
.ctaband h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0 0 .5rem;max-width:24ch;line-height:1.2}
.ctaband p{margin:0;color:#EBD2D2;max-width:52ch}
.ctaband__acts{display:flex;gap:.7rem;flex-wrap:wrap}
.btn--ghostlight{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghostlight:hover{background:rgba(255,255,255,.1);color:#fff}

/* Leadership cards */
.people--cards{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.1rem}
.person--card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.person--card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(74,0,1,.3)}
.person--card img,.person--card .person__blank{border-radius:0;border:0;aspect-ratio:4/4.4;width:100%;object-fit:cover}
.person__meta{padding:.9rem 1.1rem 1.1rem}
.person__meta h3{font-size:.96rem;margin:0 0 .2rem}

/* News */
.newshead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:1.75rem}
.newshead .h-lead{margin-bottom:0}
.newsgrid{display:grid;grid-template-columns:1.55fr .45fr;gap:1.75rem;align-items:start}
@media (max-width:64rem){.newsgrid{grid-template-columns:1fr}}
.newsgrid__main{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.1rem}
.ncard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.ncard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(74,0,1,.3)}
.ncard__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.ncard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ncard:hover .ncard__img img{transform:scale(1.05)}
.ncard__body{padding:1.05rem 1.15rem 1.2rem;flex:1}
.ncard__kicker{display:flex;gap:.6rem;align-items:center;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.ncard__kicker time{color:#8A6A6A}
.ncard h3{font-size:.98rem;line-height:1.35;margin:0 0 .45rem}
.ncard h3 a{text-decoration:none}
.ncard h3 a:hover{text-decoration:underline}
.ncard__ex{font-size:.86rem;color:#574A49;line-height:1.55;margin:0}

.sidecard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.2rem;margin-bottom:1.1rem}
.sidecard h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);
  font-weight:500;color:#7A6A69;margin:0 0 .9rem}
.evlist{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.85rem}
.evlist li{display:flex;gap:.75rem;align-items:flex-start}
.evlist__d{flex:none;width:2.9rem;text-align:center;background:var(--brand-deep);color:#fff;
  border-radius:6px;padding:.35rem 0;line-height:1.1}
.evlist__d strong{display:block;font-size:1.05rem}
.evlist__d span{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-soft)}
.evlist__t a{font-size:.88rem;font-weight:600;text-decoration:none;display:block;line-height:1.35}
.evlist__t span{font-size:.76rem;color:#7A6A69}
.doclinks{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.7rem}
.doclinks a{font-size:.87rem;font-weight:600;text-decoration:none;display:block;line-height:1.35}
.doclinks span{font-size:.72rem;color:#7A6A69;font-family:var(--mono)}

/* Gallery strip */
.gstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem}
.gstrip__item{display:block;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--paper-2)}
.gstrip__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .3s ease;
  filter:saturate(.9)}
.gstrip__item:hover img{transform:scale(1.07);filter:saturate(1.1)}

@media (prefers-reduced-motion:reduce){
  .pcard,.mcard,.scard,.ncard,.person--card,.ncard__img img,.gstrip__item img,.arrowlink::after{
    transition:none!important;transform:none!important}
}

/* ---------- Offices ---------- */
.zoneblock{margin-bottom:2.5rem}
.zoneblock__h{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--mono);
  font-weight:500;color:var(--brand);padding-bottom:.6rem;margin:0 0 1.1rem;border-bottom:2px solid var(--line)}
.ocards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.1rem}
.ocard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.3rem;
  border-top:3px solid var(--brand)}
.ocard--headquarters{border-top-color:var(--accent)}
.ocard__kind{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8A6A6A;margin:0 0 .4rem}
.ocard h3{font-size:1rem;margin:0 0 .5rem}
.ocard address{font-style:normal;font-size:.88rem;line-height:1.6;color:#4A3F3E;margin:0 0 .8rem}
.ocard__lgas{font-size:.82rem;color:#574A49;background:var(--paper-2);border-radius:6px;
  padding:.55rem .7rem;margin:0 0 .9rem;line-height:1.5}
.ocard__lgas span{display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8A6A6A;margin-bottom:.15rem}
.ocard__dl{margin:0 0 .8rem;display:grid;gap:.4rem}
.ocard__dl dt{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8A6A6A}
.ocard__dl dd{margin:0;font-size:.88rem}

/* ---------- Statistics ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin-bottom:2.5rem}
.stat{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);
  border-radius:10px;padding:1.2rem 1.3rem}
.stat__n{display:block;font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:700;line-height:1;
  color:var(--brand-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat__l{display:block;font-size:.78rem;color:#7A6A69;margin-top:.45rem}
.statcols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem}
@media (max-width:60rem){.statcols{grid-template-columns:1fr}}
.statpanel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.4rem}
.statpanel h2{font-size:1rem;margin:0 0 1.1rem}
.statbars{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.statbars li{display:grid;grid-template-columns:11rem 1fr 3.5rem;gap:.8rem;align-items:center;font-size:.85rem}
.statbars__l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4A3F3E}
.statbars__t{background:var(--paper-2);border-radius:3px;height:.8rem;overflow:hidden}
.statbars__t span{display:block;height:100%;background:var(--brand);border-radius:3px}
.statbars__t span.is-alt{background:var(--state)}
.statbars__v{text-align:right;font-family:var(--mono);font-size:.8rem;color:#7A6A69}
@media (max-width:44rem){.statbars li{grid-template-columns:1fr 3rem}.statbars__t{grid-column:1/-1;order:3}}
.statnote{background:var(--paper-2);border-left:3px solid var(--state-gold);border-radius:8px;
  padding:1.4rem 1.5rem;max-width:52rem}
.statnote h2{font-size:1rem;margin:0 0 .7rem}
.statnote p{font-size:.9rem;line-height:1.65;color:#4A3F3E;margin:0 0 .7rem}
.statnote p:last-child{margin-bottom:0}

/* =====================================================================
   Hero backdrop: video, or the drawn sequence
   ===================================================================== */
/* Held well back: it sits behind the headline and the docket, and its job
   is to be ignored. The gradient overlay keeps text contrast above AA
   whatever frame happens to be showing. */


/* The complaint journey. Nodes light in turn, a pulse runs the line, and
   the whole thing repeats — so it is running whenever somebody looks. */
/* The band sits in the flow at the top of the banner, not pinned to the
   bottom of it, so it cannot collide with the figures or the cards that
   overlap the hero from the section below. */


/* =====================================================================
   Back to top
   ===================================================================== */
.totop{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  width:2.9rem;height:2.9rem;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--brand-deep);color:#fff;
  box-shadow:0 10px 28px -8px rgba(32,0,0,.6);
  opacity:0;transform:translateY(.75rem);
  transition:opacity .25s ease,transform .25s ease,background .15s ease}
.totop[hidden]{display:none}
.totop.is-in{opacity:1;transform:none}
.totop:hover{background:var(--accent-dark)}
.totop svg{width:1.15rem;height:1.15rem}
@media (max-width:44rem){.totop{width:2.6rem;height:2.6rem;
  right:.85rem;bottom:.85rem}}

@media (prefers-reduced-motion:reduce){
  .totop{transition:none}
}

/* =====================================================================
   The visual guide
   ---------------------------------------------------------------------
   Opening a video at somebody unasked is intrusive, so this is bounded:
   once per visitor, never on the pages where they are already making a
   complaint, dismissible with Escape, a click outside, or the button.
   It never plays with sound.
   ===================================================================== */
.guide{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem}
.guide[hidden]{display:none}
.guide__scrim{position:absolute;inset:0;background:rgba(38,2,2,.78);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease}
.guide.is-open .guide__scrim{opacity:1}
.guide__panel{position:relative;width:min(62rem,100%);max-height:92vh;overflow:auto;
  background:#fff;border-radius:12px;box-shadow:0 40px 90px -24px rgba(26,0,0,.7);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
.guide.is-open .guide__panel{opacity:1;transform:none}

.guide__head{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.4rem 1rem}
.guide__head h2{font-size:1.15rem;margin:0 0 .3rem}
.guide__head p{margin:0;font-size:.9rem;color:#6E5252;line-height:1.55;max-width:46ch}
.guide__x{margin-left:auto;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;border:0;
  background:var(--paper-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .15s ease}
.guide__x:hover{background:var(--accent-dark);color:#fff}
.guide__x svg{width:1.05rem;height:1.05rem}

.guide__frame{background:#3A0000;aspect-ratio:16/9}
.guide__frame video{width:100%;height:100%;display:block;object-fit:contain;background:#3A0000}

.guide__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.4rem 1.25rem;border-top:1px solid var(--line)}
.guide__foot p{margin:0;font-size:.88rem;color:#6E5252}

/* The button that opens it */
.btn--watch{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.08);
  color:#fff;border-color:rgba(255,255,255,.28);text-align:left}
.btn--watch:hover{background:rgba(255,255,255,.16);color:#fff}
.btn--watch svg{width:.85rem;height:.85rem;flex:none}

@media (max-width:44rem){
  .guide{padding:0;place-items:end center}
  .guide__panel{width:100%;max-height:94vh;border-radius:12px 12px 0 0}
  .guide__head{padding:1rem 1.1rem .85rem}
  .guide__foot{padding:.9rem 1.1rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .guide__scrim,.guide__panel{transition:none}
  .guide__panel{opacity:1;transform:none}
}

/* Language switch inside the guide */
.guide__langs{display:flex;gap:.25rem;margin-left:auto;align-self:center}
.guide__langs button{border:1px solid var(--line);background:#fff;color:#4A3F3E;
  font:600 .8rem var(--ui);padding:.35rem .75rem;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;transition:background .15s ease,color .15s ease}
.guide__langs button:hover{border-color:var(--brand)}
.guide__langs button.on{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.guide__langs span{font:500 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--state-gold);color:#2A2000;padding:.05rem .3rem;border-radius:2px}
.guide__langs button.on span{background:rgba(255,255,255,.22);color:#fff}
.guide__x{margin-left:.5rem}
/* Captions need room and contrast over a dark frame */
.guide__frame video::cue{background:rgba(38,2,2,.86);color:#fff;font-size:.9em;line-height:1.4}
@media (max-width:44rem){
  .guide__head{flex-wrap:wrap}
  .guide__langs{margin-left:0;order:3;width:100%}
}

/* =====================================================================
   Option C — a light page
   ---------------------------------------------------------------------
   The hero, page headers, figures and docket were all built for a dark
   field. Flipping them here rather than editing each original rule keeps
   the change in one place and reversible.
   ===================================================================== */

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,#F7F5F3 100%);
  color:var(--ink);border-bottom:1px solid var(--line)}
.hero__aurora{display:none}          /* washes belong on a dark field */
.hero__grid{opacity:.5;
  background-image:linear-gradient(rgba(0,90,45,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,90,45,.05) 1px,transparent 1px)}
.hero__vignette{display:none}
.hero__watermark{opacity:.035}

.hero .eyebrow{color:var(--maroon)}
.hero .eyebrow::before{background:var(--maroon)}
.hero__title{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.hero__title::after{background:linear-gradient(90deg,var(--brand) 0 55%,var(--state-gold) 55%)}
.hero__lede{color:var(--ink-2)}
.hero__marks li{color:var(--ink-2)}
.hero__marks li::before{background:var(--brand-mid)}

/* The docket now shares the page's surface, so a border does the work a
   shadow was doing. It reads as part of the page rather than floating. */
.docket{background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 28px -18px rgba(26,20,20,.28)}

.docket__label{color:#BFE0CC}

.docket__field button:hover{background:var(--brand-deep)}
.docket .btn--gold{box-shadow:none}
.docket__track{background:#FBFAF9}

.chip{background:#fff;border-color:var(--line);color:var(--ink);
  box-shadow:0 8px 20px -12px rgba(26,20,20,.35)}

/* ---------- Figures ---------- */
.figures{background:var(--line);border:1px solid var(--line)}
.figure{background:#fff;backdrop-filter:none}
.figure__n{color:var(--brand)}
.figure__l{color:var(--ink-3)}

/* ---------- Process band ---------- */
.processbar{background:#FBFAF9;border:1px solid var(--line);backdrop-filter:none}
.processbar__cap{color:var(--ink-3)}
.scene__rail{stroke:#DCD5D3}
.scene__node circle{fill:#fff;stroke:#CFC7C5}
.scene__ic{stroke:var(--ink-3)}
.scene__node text{fill:var(--ink-3)}
.scene__pulse{fill:var(--brand)}
@keyframes nodeOn{
  0%,8%{fill:#fff;stroke:#CFC7C5}
  14%,86%{fill:var(--state-soft);stroke:var(--brand-mid)}
  100%{fill:#fff;stroke:#CFC7C5}
}

/* ---------- Page headers ---------- */
.pagehead{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--line)}
.pagehead h1{color:var(--ink)}
.pagehead h1::after{background:var(--state-gold)}
.pagehead__lede{color:var(--ink-2)}
.crumb,.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}
.posttype{color:var(--maroon)}

/* ---------- One dark band, kept for contrast ---------- */
.band--dark{background:var(--brand-deep);color:var(--on-dark)}
.band--dark .h-lead--light{color:#fff}
.eyebrow--light{color:var(--state-gold)}
/* The cards sit on a dark band but are themselves white, so they must set
   their own text colour. Inheriting the band's pale text left the headings
   and links almost invisible on white — the body copy read only because it
   had a colour of its own. */
.routes li{border-color:rgba(255,255,255,.16);color:var(--ink)}
.routes li h3{color:var(--brand-deep)}
.routes li p{color:#463A3A}
.routes li a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;
  font-weight:600}
.routes li a:hover{color:var(--accent-dark)}
.routes__tag{color:var(--accent-dark);font-weight:600}

.ctaband{background:var(--brand-deep)}
.ctaband::after{background:radial-gradient(closest-side,rgba(0,168,73,.22),transparent 70%)}
.ctaband p{color:#C6E2D2}

/* ---------- Maroon earns the detail work ---------- */
.h-lead::after{background:var(--maroon)}
.pcard--vision::before{background:var(--brand)}
.pcard--mission::before{background:var(--maroon)}
.pcard--values::before{background:var(--state-gold)}
.zoneblock__h{color:var(--maroon)}
.ncard__kicker{color:var(--maroon)}
.card2__kicker{color:var(--maroon)}
.dlcats a.on{background:var(--brand)}
.pills a.on{background:var(--brand);border-color:var(--brand)}
.foot{background:var(--brand-deep);border-top:3px solid var(--state-gold)}

/* ---------- Red, and only where it means something ---------- */
.err,.field--error label{color:var(--danger-deep)}
.field--error input,.field--error textarea,.field--error select{
  border-color:var(--danger);box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.note--error,.note--danger{background:var(--danger-soft);
  border:1px solid var(--danger);border-left:3px solid var(--danger);color:var(--danger-deep)}
.tag--danger{background:var(--danger-soft);color:var(--danger-deep)}
.card--grave{background:var(--danger-soft);border:1px solid var(--danger);
  border-left:3px solid var(--danger)}
.card--grave h2{color:var(--danger-deep)}
.card--grave p{color:#6E2A26}
.note--warn{background:#FFF7E6;border-color:#E8CE7C;border-left:3px solid var(--state-gold);color:#5E4700}
.doc__get{background:var(--brand-mid)}
.doc__get:hover{background:var(--brand-deep)}
.card2__flag{color:var(--danger)}
.mtnotice{background:#FFF7E6;border-color:#E8CE7C;border-left-color:var(--state-gold)}

/* The two places red is not decoration but the point */
.note--fraud{background:var(--danger-soft);border:2px solid var(--danger);
  border-radius:var(--r);padding:1rem 1.15rem}
.note--fraud strong{color:var(--danger-deep);display:block;margin-bottom:.3rem}

/* =====================================================================
   Colour restored, and red given two distinct jobs
   ---------------------------------------------------------------------
   The concern about a red interface was that errors would stop being
   noticed. That is solved by treatment rather than by hue: the primary
   action is a SOLID red fill, and an error is never a fill — it is
   always a pale tint with a border and dark red text. The eye separates
   "a thing to press" from "a thing that is wrong" without needing two
   different reds.
   ===================================================================== */

:root{
  --action:#A01818;         /* the complaint button. White on it: 8.0:1 */
  --action-dark:#7E1212;
  --action-soft:#FBEDED;
}

/* ---------- The primary action ---------- */
.btn--gold,
.nav__cta,
.docket .btn--gold,
.ctaband .btn--gold{
  background:var(--action);border-color:var(--action);color:#fff}
.btn--gold:hover,.nav__cta:hover,.ctaband .btn--gold:hover{
  background:var(--action-dark);border-color:var(--action-dark);color:#fff}
.docket .btn--gold{box-shadow:0 8px 20px -10px rgba(160,24,24,.7)}
.btn--watch{border-color:rgba(160,24,24,.35);color:var(--action)}
.btn--watch:hover{background:var(--action-soft);color:var(--action-dark)}

/* Errors stay a tint, never a fill, so they never look pressable */
.note--error,.note--danger{background:var(--danger-soft);border:1px solid var(--danger);
  border-left:4px solid var(--danger);color:var(--danger-deep)}
.card--grave{background:var(--danger-soft);border:1px solid var(--danger);border-left:4px solid var(--danger)}

/* ---------- Colour back into the page ---------- */
/* A hairline of the Commission's colours under the masthead */
.masthead{border-bottom:0;
  box-shadow:inset 0 -3px 0 0 var(--action), 0 1px 0 rgba(26,20,20,.06)}

/* The hero carries a tint and the seal, rather than sitting flat white */
.hero{background:
  radial-gradient(900px 420px at 88% 8%, rgba(0,90,45,.09), transparent 62%),
  radial-gradient(700px 380px at 4% 92%, rgba(160,24,24,.07), transparent 60%),
  linear-gradient(180deg,#FFFFFF 0%,#F4F7F4 100%)}
.hero__watermark{opacity:.075}
.hero__grid{opacity:.65}
.hero .eyebrow{color:var(--action)}
.hero .eyebrow::before{background:var(--action)}
.hero__title::after{background:linear-gradient(90deg,var(--action) 0 45%,var(--brand) 45%)}
.hero__marks li::before{background:var(--action)}

/* Bands alternate so the page has rhythm instead of one long white sheet */
.band--paper{background:linear-gradient(180deg,#F4F7F4 0%,#EFF4F0 100%)}
.band--tight{background:transparent}

/* Cards carry their colour on the edge */
.pcard--vision::before{background:var(--brand)}
.pcard--mission::before{background:var(--action)}
.pcard--values::before{background:var(--state-gold)}
.mcard__icon{background:var(--state-soft);color:var(--brand)}
.mcard:hover{border-color:var(--brand)}
.scard{border-top:3px solid var(--brand)}
.scard:nth-child(2n){border-top-color:var(--action)}
.ncard__kicker{color:var(--action)}
.card2__kicker{color:var(--action)}
.doc--featured{border-left:3px solid var(--action)}
.ocard--headquarters{border-top-color:var(--action)}
.stat{border-top-color:var(--brand)}
.stat:nth-child(2n){border-top-color:var(--action)}

/* Figures: a green field rather than a grey one, so the numbers carry */
.figures{background:var(--brand-deep);border-color:var(--brand-deep)}
.figure{background:rgba(255,255,255,.05)}
.figure__n{color:#fff}
.figure__l{color:#AFD4BE}

/* Docket header keeps the Commission's green; the action inside it is red */


.docket__field button:hover{background:var(--brand-deep)}

/* Section headings get a two-tone rule */
.h-lead::after{background:linear-gradient(90deg,var(--action) 0 40%,var(--state-gold) 40%)}
.pagehead h1::after{background:linear-gradient(90deg,var(--action) 0 45%,var(--brand) 45%)}
.pagehead{background:linear-gradient(180deg,#F4F7F4 0%,#EFF4F0 100%)}
.zoneblock__h{color:var(--brand)}
.eyebrow{color:var(--action)}

/* Downloads keep green: getting a document is not the primary action */
.doc__get{background:var(--brand-mid)}
.doc__get:hover{background:var(--brand-deep)}
.pills a.on,.dlcats a.on{background:var(--brand);border-color:var(--brand)}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--action)}
.totop{background:var(--brand-deep)}
.totop:hover{background:var(--action)}

/* =====================================================================
   Mobile fitting
   ---------------------------------------------------------------------
   A page that scrolls sideways on a phone reads as broken however good
   the rest of it is. These are guards rather than fixes for one specific
   element: any long reference, checksum, email or code can otherwise push
   the viewport wider than the screen.
   ===================================================================== */
html{overflow-x:hidden}
body{overflow-x:clip;max-width:100vw}
img,video,svg,iframe,canvas,table,pre{max-width:100%;height:auto}
code,samp,kbd,.mono,.checksum,address,blockquote{overflow-wrap:anywhere}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}
.wrap{width:100%;box-sizing:border-box}
/* Grid and flex children default to min-width:auto, which is what lets a
   long word inside a column push the whole row wider than its parent. */
.cards>*,.trio>*,.mgrid>*,.scards>*,.newsgrid__main>*,.people>*,.ocards>*,
.doclist>*,.statgrid>*,.figures>*{min-width:0}
@media (max-width:44rem){
  .newsfilter input[type=search]{min-width:0}
  .sub input{min-width:0}
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* =====================================================================
   Hero slider
   ===================================================================== */
.slider{position:relative;min-width:0}
.slider__track{position:relative;display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s ease,visibility .6s;position:relative;border-radius:12px;overflow:hidden}
.slide.is-on{opacity:1;visibility:visible;pointer-events:auto}
.slide__bg{position:absolute;inset:0;z-index:0}
.slide__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* The slides are light, so the type on them is dark. White on a pale
   image is the commonest way a good banner becomes unreadable. */
.slide__say{position:relative;z-index:1;padding:clamp(1.5rem,4vw,2.75rem)}
.slide .eyebrow{color:var(--brand)}
.slide .eyebrow::before{background:var(--accent-dark)}
.slide .hero__title{
  font-size:clamp(1.55rem,3.6vw,2.9rem);margin-bottom:1rem;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--brand-deep)}
.slide .hero__title::after{background:linear-gradient(90deg,var(--accent-dark) 0 55%,var(--state-gold) 55%)}
.slide .hero__lede{margin-bottom:1.4rem;max-width:42ch;color:#463A3A}
.slide__acts{display:flex;gap:.65rem;flex-wrap:wrap}
.slide .btn--ghostlight{color:var(--brand);border-color:rgba(106,0,0,.32);background:rgba(255,255,255,.6)}
.slide .btn--ghostlight:hover{background:#fff;color:var(--brand-deep)}

.slider__ui{
  position:absolute;left:50%;translate:-50% 0;
  bottom:clamp(4.5rem,7vw,6rem);          /* clear of the docket bar */
  z-index:2;
  width:min(var(--wrap),100%);
  padding-inline:var(--pad);
  box-sizing:border-box;
  display:flex;align-items:center;gap:.5rem}
.slider__arrow,.slider__pause{width:2.3rem;height:2.3rem;flex:none;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--brand);
  display:grid;place-items:center;cursor:pointer;transition:background .15s ease,color .15s ease}
.slider__arrow:hover,.slider__pause:hover{background:var(--brand);color:#fff}
.slider__arrow svg,.slider__pause svg{width:1rem;height:1rem}
.slider__pause{margin-left:auto}
.slider__pause.is-paused{background:var(--accent-dark);border-color:var(--accent-dark)}
.slider__dots{display:flex;gap:.4rem;align-items:center}
.slider__dots button{width:2rem;height:.9rem;padding:0;border:0;background:none;cursor:pointer}
.slider__dots span{display:block;height:3px;border-radius:2px;background:var(--line);
  transition:background .25s ease}
.slider__dots button.on span{background:var(--accent-dark)}

@media (max-width:64rem){
  .slide__say{padding:clamp(1.25rem,5vw,2rem)}
  .slide .hero__lede{max-width:none}
}
@media (max-width:44rem){
  /* On a phone the picture is the point, so the slide gets real height and
     the words sit over it rather than beside it. */
  .slide{min-height:26rem;display:flex;align-items:flex-end}
  .slide__bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.96) 100%)}
  .slide__acts .btn{flex:1;min-width:9rem;text-align:center}
  .slider__ui{justify-content:center}
  .slider__arrow{display:none}
  .slider__dots button{width:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
}

/* =====================================================================
   Hero, full width — and the docket on one line
   ===================================================================== */
.hero{padding-block:0 clamp(2rem,3.5vw,2.75rem)}
@media (max-width:44rem){
  .hero{padding-bottom:.75rem}
}
.hero__stage{width:100%}
.slider,.slider__track{width:100%}
.slide{border-radius:0}

/* Edge to edge, but the words still line up with the rest of the page */
.slide__say{
  width:min(var(--wrap), 100%);
  margin-inline:auto;
  /* room at the foot for the slider controls and the docket beneath them */
  padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(7.5rem,11vw,9.5rem);
  box-sizing:border-box;
}
.slide{min-height:clamp(20rem,42vw,30rem);display:flex;align-items:center}

/* ---------- Case docket ----------
   One row: what it is, the reference, the button, and the two actions
   somebody is most likely to want next. It used to be a tall panel beside
   the banner, which on a phone became a second screenful before any of the
   page had been read. */
.docketbar{
  display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:.85rem clamp(.9rem,2vw,1.4rem);
  margin-top:calc(clamp(1rem,2.5vw,1.75rem) * -1 - .5rem);
  position:relative;z-index:3;
  box-shadow:0 18px 44px -22px rgba(60,10,10,.34)
}
.docketbar__label{display:flex;align-items:center;gap:.75rem;flex:none}
.docketbar__title{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7A6A6A;white-space:nowrap}
.docketbar .docket__state{font-size:.72rem;white-space:nowrap}

.docketbar__find{display:flex;flex:1 1 18rem;min-width:0;gap:.4rem}
.docketbar__find input{
  flex:1;min-width:0;font-family:var(--mono);font-size:.85rem;
  padding:.6rem .75rem;border:1px solid #CFC4C4;border-radius:6px;
  background:var(--paper);transition:border-color .15s ease,box-shadow .15s ease}
.docketbar__find input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(106,0,0,.12);background:#fff}
.docketbar__find button{
  flex:none;padding:.6rem 1.1rem;border-radius:6px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;font:600 .86rem var(--ui);cursor:pointer;
  transition:background .15s ease}
.docketbar__find button:hover{background:var(--brand-deep)}

.docketbar__acts{display:flex;gap:.5rem;flex:none}
.docketbar__acts .btn{padding:.6rem 1rem;font-size:.85rem;white-space:nowrap}
.btn--watch{display:inline-flex;align-items:center;gap:.45rem;
  background:#fff;color:var(--brand);border-color:var(--line)}
.btn--watch:hover{background:var(--paper-2);color:var(--brand-deep)}
.btn--watch svg{width:.8rem;height:.8rem;flex:none}

/* Below about 62rem the row would squeeze the reference field to nothing,
   so it becomes two rows rather than five cramped columns. */
@media (max-width:62rem){
  .docketbar{gap:.75rem}
  .docketbar__find{flex:1 1 100%;order:2}
  .docketbar__acts{flex:1 1 100%;order:3}
  .docketbar__acts .btn{flex:1;justify-content:center;text-align:center}
}
@media (max-width:44rem){
  .docketbar{margin-top:0;border-radius:10px}
  .docketbar__label{flex:1 1 100%;justify-content:space-between}
  .slide{min-height:auto;align-items:stretch}
  /* The controls return to normal flow at this width, so the deep bottom
     padding that reserved room for them is now just a hole. */
  .slide__say{padding:clamp(1.5rem,6vw,2rem) var(--pad) clamp(1rem,4vw,1.5rem)}
  /* On a phone the controls come back into the flow beneath the slide:
     absolute positioning left them fouling the docket, and there is no
     spare height on a small screen to buy the clearance. */
  .slider__ui{position:static;translate:none;width:auto;padding-inline:0;
    justify-content:center;margin:.5rem var(--pad) .75rem}
  .slide .hero__title{max-width:none}
}
@media (max-width:64rem){
  .slide .hero__title{max-width:30ch}
}

/* =====================================================================
   Nested navigation
   ---------------------------------------------------------------------
   One level of dropdown. Opens on hover for a mouse, on click for touch
   and keyboard — hover alone leaves a submenu unreachable on a phone,
   which is how these usually break.
   ===================================================================== */
.nav li{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;
  font:inherit;font-size:.83rem;color:inherit;cursor:pointer;padding:.35rem 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav__top svg{width:.7rem;height:.7rem;opacity:.55;transition:transform .18s ease}
.nav li.is-open>.nav__top svg{transform:rotate(180deg)}
.nav__top:hover,.nav__top.on{border-bottom-color:var(--accent-dark);color:var(--brand)}

/* .nav ul is (0,1,1) and .submenu alone is (0,1,0), so the top-level
   flex rules were winning here and laying the dropdown out in columns.
   Scoping to .nav .submenu (0,2,0) puts one item per line. */
.nav .submenu{
  display:block;flex-wrap:nowrap;justify-content:flex-start;
  overflow:visible;gap:0;
  position:absolute;top:100%;left:-.85rem;z-index:40;min-width:14rem;
  margin:0;padding:.4rem;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 20px 44px -18px rgba(60,10,10,.32);
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav li.is-open>.submenu,
.nav li:hover>.submenu:not([data-touch]){opacity:1;visibility:visible;transform:none}
.nav .submenu li{position:static;display:block;width:100%}
.nav .submenu a{display:block;width:100%;padding:.5rem .7rem;border-radius:6px;
  font-size:.86rem;text-decoration:none;color:var(--ink);border-bottom:0;
  white-space:normal;line-height:1.4;box-sizing:border-box}
.nav .submenu a:hover,.nav .submenu a:focus-visible{background:var(--paper-2);color:var(--brand)}
.nav .submenu a[aria-current]{background:var(--paper-2);color:var(--brand);font-weight:600}

/* Mobile: the menu is a column, so a submenu is an indented block that
   expands in place rather than a floating panel with nowhere to float. */
@media (max-width:60rem){
  .nav li{position:static}
  .nav__top{width:100%;justify-content:space-between;padding:.55rem 0}
  .nav .submenu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;
    margin:0 0 .35rem .35rem;padding:0 0 0 .75rem;
    display:none;min-width:0}
  .nav li.is-open>.submenu{display:block}
  .nav li:hover>.submenu{display:none}
  .nav li.is-open:hover>.submenu{display:block}
  .nav .submenu a{padding:.45rem 0}
}
/* Developer credit: present, but quieter than the Commission's own lines */
/* Left over from the green palette; the footer is maroon now. */
.foot__made{color:#B49A9A;font-size:.82rem}
.foot__made a{color:#E4D2D2;text-decoration:none;border-bottom:1px solid rgba(228,210,210,.4)}
.foot__made a:hover,.foot__made a:focus-visible{color:#fff;border-bottom-color:currentColor}


/* The declaration heading. Red is reserved for errors and warnings across
   the site, so it means something when it appears — this is one of the few
   places it is used on a page the visitor has not made a mistake on. */
.declare__head{display:block;margin:0 0 .6rem}
.declare__warn{color:#B3261E;font-weight:700;letter-spacing:.01em}

/* =====================================================================
   Mandate sequence
   ---------------------------------------------------------------------
   Built on .scard, the card used for departments, with only a step line
   added. A bespoke component here meant that when the stylesheet lagged
   the template by one upload, the whole section fell apart; reusing a
   pattern that already exists degrades to a plain card instead.
   ===================================================================== */
.lede--tight{max-width:56ch;margin-bottom:2rem}
.scards--seq{counter-reset:step}
.scard--step{border-top-color:var(--brand)}
.scard--step:nth-child(5),
.scard--step:nth-child(6){border-top-color:var(--accent-dark)}
.stepline{display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem!important}
.stepline__n{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  font:700 .78rem var(--mono)}
.scard--step:nth-child(5) .stepline__n,
.scard--step:nth-child(6) .stepline__n{background:var(--accent-dark)}
.stepline__of{font:600 .64rem var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#8A7A79}
.scard--step h3{font-size:1.02rem;margin:0 0 .45rem}
.scard--step .arrowlink{font-size:.84rem}

/* The confidential reporting link, findable at a glance. It is the route
   used by people least able to go hunting through a dropdown. */
.nav-report>.nav__top{
  border:1px solid var(--accent-dark);border-radius:999px;
  padding:.35rem .8rem;color:var(--accent-dark);font-weight:600}
.nav-report>.nav__top:hover,.nav-report>.nav__top.on{
  background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
@media (max-width:60rem){
  .nav-report>.nav__top{display:inline-flex;width:auto;margin:.35rem 0}
}

/* Location on the complaint form */
.geofield--req{border-left:3px solid var(--accent-dark);padding-left:1rem;background:#F7FBF8;
  border-radius:0 8px 8px 0;padding-block:1rem}
.geofield__label{font-weight:600;margin:0 0 .35rem}
.georesult{margin:.6rem 0 0;font-size:.86rem;padding:.5rem .7rem;border-radius:6px}
.georesult--ok{background:#DCF3E5;color:#054A26}
.georesult--warn{background:#FFF3CD;color:#5E4700}
.georesult--wait{background:var(--paper-2);color:#4B4040}
.geoalt{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.geoalt__head{font-weight:600;font-size:.9rem;margin:0 0 .6rem}
.hint--warn{color:#8A4B00}
.hint--fine{font-size:.78rem;color:#6B6060;margin-top:.7rem}

/* =====================================================================
   The two reporting routes
   ---------------------------------------------------------------------
   Named and anonymous are different things with different consequences,
   so they are given different weight rather than two matching buttons.
   ===================================================================== */
.btn--dark{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.btn--dark:hover{background:#2E0000;color:#fff}
.lnk--which{align-self:center;font-size:.82rem;color:var(--brand);text-decoration:underline;
  text-underline-offset:2px;background:none;border:0;padding:0 .25rem}

.routes2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem}
@media (max-width:56rem){.routes2{grid-template-columns:1fr}}
.route{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.6rem;
  border-top:4px solid var(--accent-dark);display:flex;flex-direction:column}
.route--anon{border-top-color:var(--brand)}
.route__tag{display:inline-block;align-self:flex-start;font:600 .66rem var(--mono);
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;margin:0 0 .8rem}
.route__tag--named{background:#DCF3E5;color:#054A26}
.route__tag--anon{background:#F5E6E6;color:var(--brand-deep)}
.route h2{font-size:1.3rem;margin:0 0 .5rem}
.route__lede{font-size:.95rem;line-height:1.6;color:#463A3A;margin:0 0 1.2rem}
.route__facts{display:grid;grid-template-columns:8.5rem 1fr;gap:.5rem .9rem;margin:0 0 1.2rem;
  font-size:.88rem;line-height:1.5}
.route__facts dt{font-weight:600;color:#6B6060}
.route__facts dd{margin:0;color:#2A2020}
.route__eg{font-size:.86rem;line-height:1.6;color:#5C5050;background:var(--paper-2);
  border-radius:8px;padding:.8rem .9rem;margin:0 0 1.3rem}
.route .btn{margin-top:auto}
@media (max-width:34rem){.route__facts{grid-template-columns:1fr;gap:.15rem}
  .route__facts dd{margin-bottom:.5rem}}

.routenote{background:var(--paper-2);border-left:3px solid var(--state-gold);
  border-radius:8px;padding:1.5rem 1.6rem;max-width:56rem}
.routenote h2{font-size:1.05rem;margin:0 0 .7rem}
.routenote p{font-size:.92rem;line-height:1.65;color:#3C3232;margin:0 0 .8rem}
.routenote p:last-child{margin-bottom:0}
.routenote__also{padding-top:.6rem;border-top:1px solid var(--line)}

/* The mandate page: the same cards, a little tighter, since the page has
   already introduced them in its own heading. */
.scards--compact .scard__body{padding:1.15rem}
.prose--page{max-width:62ch}
.pagefoot{border-top:1px solid var(--line);padding-top:1.1rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.pagefoot p{margin:0;font-size:.86rem}


/* A general guard. Any pale-background block placed inside a dark band must
   set its own text colour; inheriting the band's leaves it near-invisible.
   This catches the cases nobody remembers to scope individually. */
.band--dark .card,
.band--dark .pcard,
.band--dark .scard,
.band--dark .ncard,
.band--dark .person--card,
.band--dark .sidecard{color:var(--ink)}
.band--dark .card h2,.band--dark .card h3,
.band--dark .pcard h2,.band--dark .pcard h3,
.band--dark .scard h3,
.band--dark .ncard h3,
.band--dark .person--card h3,
.band--dark .sidecard h3{color:var(--brand-deep)}
.band--dark .card p,
.band--dark .pcard p,
.band--dark .scard p,
.band--dark .ncard p{color:#463A3A}

/* The figures band leads to the page where they can be checked. */
.figures__more{grid-column:1/-1;display:block;padding:.85rem 1.25rem;
  background:rgba(255,255,255,.04);color:var(--brand-deep);
  font-size:.84rem;font-weight:600;text-decoration:none;
  border-top:1px solid var(--line)}
.figures__more::after{content:" →"}
.figures__more:hover{background:rgba(0,0,0,.03);color:var(--accent-dark)}

/* A department card heading is a link, and should not look like plain text. */
.scard h3 a{color:inherit;text-decoration:none}
.scard h3 a:hover{color:var(--accent-dark);text-decoration:underline}

/* Deep-linking to a department: keep the heading clear of the fixed header. */
.dept{scroll-margin-top:6rem}
.dept:target{outline:2px solid var(--accent-dark);outline-offset:.5rem;border-radius:8px}