/* ==========================================================================
   Pioneer Academy — public stylesheet
   Mobile-first. Every size scales with the viewport; breakpoints only add
   layout, never rescue it. Motion is opt-out via prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  --brand-ink: #0E4C59;
  --brand-ink-900: #082F38;
  --brand-accent: #F2A516;
  --brand-alt: #3E7C6A;
  --brand-alert: #C0503A;
  --surface-tint: #F1F6F4;

  --paper: #FFFFFF;
  --text: #16272B;
  --text-muted: #5C6F74;
  --line: #DCE7E5;
  --line-strong: #BFD2CF;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(8,47,56,.06);
  --shadow-md: 0 10px 28px -14px rgba(8,47,56,.30);
  --shadow-lg: 0 24px 60px -30px rgba(8,47,56,.45);
  --shadow-hover: 0 18px 44px -20px rgba(8,47,56,.42);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1200px;
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --section-y: clamp(2.75rem, 8vw, 6.5rem);
  --header-h: 60px;

  /* fluid type scale */
  --fs-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
  --fs-sm:   clamp(.82rem, .79rem + .15vw, .90rem);
  --fs-base: clamp(.95rem, .91rem + .20vw, 1.05rem);
  --fs-lead: clamp(1.02rem, .96rem + .32vw, 1.20rem);
  --fs-h3:   clamp(1.12rem, 1.02rem + .48vw, 1.42rem);
  --fs-h2:   clamp(1.42rem, 1.18rem + 1.15vw, 2.35rem);
  --fs-h1:   clamp(1.85rem, 1.35rem + 2.35vw, 3.45rem);

  --ease: cubic-bezier(.22,.68,.35,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .28s;
  --dur-slow: .55s;

  /* notched phones */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;              /* clips without creating a scroll container */
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;                /* nothing may push the page sideways */
  max-width: 100%;
  overflow-wrap: break-word;
  min-height: 100svh;
}

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
/* The line above outranks the UA's [hidden] rule, so any hidden svg/img would
   still paint. Restore the attribute's meaning globally rather than patching
   it per component. */
[hidden] { display: none !important; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--brand-ink); text-underline-offset: .18em; }
ul, ol { padding-left: 1.15rem; }
:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.012em;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { text-wrap: pretty; }

/* Inline SVG icons, emitted by icon($name, 'ico').
   There was no rule for this class anywhere, so the reset above
   (`svg { display: block }`) applied and every icon dropped onto its own line
   ABOVE its label — the top bar rendered as icon-over-text in two rows, 44px
   tall per link, with the glyph at its raw 24px next to 12px type. Sizing in
   `em` ties the icon to whatever text it sits beside. */
.ico {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  flex: none;
  vertical-align: -.17em;
}
.btn .ico, .topbar a .ico { width: 1.1em; height: 1.1em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand-ink); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- structure */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--surface-tint); }
.section--tight { padding-block: calc(var(--section-y) * .58); }
.section--ink {
  background: var(--brand-ink-900);
  color: #E6F0EF;
}
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: var(--brand-accent); }

.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  margin-top: .7rem;
}
.section--ink .section-head p { color: #B9CFCB; }

/* The marigold margin rule of a school exercise book — the one motif that
   repeats across the whole site. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-alt);
  margin-bottom: .7rem;
}
.eyebrow::before {
  content: ""; width: 2px; height: 1.05em;
  background: var(--brand-accent);
  transform: scaleY(0); transform-origin: bottom;
  animation: rule-in .5s var(--ease-out) forwards;
}
.section-head--center .eyebrow { justify-content: center; }
.section--ink .eyebrow { color: var(--brand-accent); }
@keyframes rule-in { to { transform: scaleY(1); } }

/* ----------------------------------------------------------------- grids */
.grid { display: grid; gap: clamp(.9rem, 2.4vw, 1.6rem); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--brand-ink);
  --btn-fg: #fff;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px;                      /* comfortable thumb target */
  padding: .7rem 1.3rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .01em;
  text-decoration: none; text-align: center;
  cursor: pointer; overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* light sweep on hover */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.24) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }

.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-sm); transition-duration: .06s; }

.btn--accent { --btn-bg: var(--brand-accent); --btn-fg: #3A2703; }
.btn--light  { --btn-bg: #fff; --btn-fg: var(--brand-ink); }
.btn--ghost {
  background: transparent; color: var(--brand-ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-tint); border-color: var(--brand-ink); }
.btn--sm { min-height: 38px; padding: .45rem .85rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--brand-ink-900);
  color: #BCD3CF;
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar__inner {
  display: flex; align-items: center;
  gap: .15rem .9rem;
  min-height: 38px; flex-wrap: wrap;
}
.topbar a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 32px;                    /* reachable without inflating the bar */
  color: inherit; text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}
.topbar a:hover, .topbar a:focus-visible { color: var(--brand-accent); }
.topbar__spacer { margin-left: auto; }
.topbar__social { display: flex; gap: .15rem; flex: none; }
.topbar__social a {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.topbar__social a:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.topbar__social svg { width: 15px; height: 15px; }
.topbar__hours { display: none; }
@media (min-width: 860px) { .topbar__hours { display: inline-flex; align-items: center; gap: .4rem; } }
/* The email address is the longest item and the first thing that should go
   when the row gets tight; the phone number and the social links stay. */
@media (max-width: 640px) { .topbar a.topbar__mail { display: none; } }
/* On the narrowest phones the top bar is noise — the header carries it all. */
@media (max-width: 479px) { .topbar { display: none; } }

/* ---------------------------------------------------------------- header */
/* z-index ladder (all in the root stacking context):
     .topbar          — auto
     .fab-stack       — 300
     .site-header     — 400  (sticky + z-index = a stacking context, so the
                              .nav overlay nested inside it can never paint
                              above the header's own level, whatever z-index
                              the .nav itself declares)
     .lightbox        — 600
   The header must therefore outrank .fab-stack, or the floating WhatsApp and
   back-to-top buttons sit on top of the open full-screen menu. */
.site-header {
  position: sticky; top: 0; z-index: 400;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 22px -14px rgba(8,47,56,.4); }

.header__inner {
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit;
  flex: 1 1 0; min-width: 0; overflow: hidden;
}
.brand img {
  height: 38px; width: auto; max-width: 160px; object-fit: contain; flex: none;
  transition: transform var(--dur-slow) var(--ease-out);
}
.brand:hover img { transform: rotate(-4deg) scale(1.06); }
.brand__text { min-width: 0; }
.brand__name {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.98rem, .9rem + .5vw, 1.3rem);
  line-height: 1.12; color: var(--brand-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__tag {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 400px) { .brand__tag { display: none; } }

.header__actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; margin-left: auto; }
.nav-toggle { flex: 0 0 auto; }
.header__actions .btn { flex: 0 1 auto; min-width: 0; }
.header__actions .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--brand-ink);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--surface-tint); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --------------------------------------------------- navigation (mobile)
   Full-screen overlay. It is a sibling of the header (never a descendant of a
   filtered/transformed element, which would make it a containing block) and it
   never translates sideways, so it cannot add a pixel of document width. */
.nav {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  z-index: 1;                    /* scoped inside .site-header's context */
  display: flex;
  flex-direction: column;
  background: #fff;
  padding-top: max(0px, env(safe-area-inset-top, 0px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--ease), visibility .26s;
}
.nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.nav__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-inline: max(1.15rem, var(--safe-l)) max(1.15rem, var(--safe-r));
  border-bottom: 1px solid var(--line);
}
.nav__title {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}
.nav__close {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: -8px;
  border-radius: var(--radius); color: var(--brand-ink);
  transition: background-color var(--dur) var(--ease);
}
.nav__close:hover { background: var(--surface-tint); }
.nav__close svg { width: 22px; height: 22px; }

.nav__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: .5rem max(1.15rem, var(--safe-l)) calc(2.5rem + var(--safe-b)) max(1.15rem, var(--safe-r));
}

/* items slide up in sequence once the panel is open */
.nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.nav__item {
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav.is-open .nav__item { opacity: 1; transform: none; }
.nav.is-open .nav__item:nth-child(1) { transition-delay: .05s; }
.nav.is-open .nav__item:nth-child(2) { transition-delay: .09s; }
.nav.is-open .nav__item:nth-child(3) { transition-delay: .13s; }
.nav.is-open .nav__item:nth-child(4) { transition-delay: .17s; }
.nav.is-open .nav__item:nth-child(5) { transition-delay: .21s; }
.nav.is-open .nav__item:nth-child(6) { transition-delay: .25s; }
.nav.is-open .nav__item:nth-child(n+7) { transition-delay: .29s; }

.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 54px; padding: .6rem .25rem;
  font-weight: 600; font-size: 1.02rem;
  color: var(--brand-ink-900); text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.nav__link:hover { color: var(--brand-ink); padding-left: .55rem; }
.nav__item.is-active > .nav__link { color: var(--brand-ink); }
.nav__caret { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(180deg); }

.nav__sub {
  list-style: none; margin: 0; padding: 0 0 .5rem .85rem;
  display: grid; gap: .1rem;
  border-left: 2px solid var(--brand-accent);
  max-height: 0; overflow: hidden;
  transition: max-height .32s var(--ease-out);
}
.nav__item.is-open > .nav__sub { max-height: 32rem; }
.nav__sub a {
  display: block; min-height: 46px; padding: .65rem .25rem;
  font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav__sub a:hover { color: var(--brand-ink); transform: translateX(3px); }

/* ------------------------------------------------- navigation (desktop) */
@media (min-width: 1000px) {
  :root { --header-h: 76px; }
  .nav-toggle { display: none; }
  .brand img { height: 46px; }

  .nav {
    position: static; inset: auto;
    width: auto; max-width: none;
    display: block;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; padding: 0; overflow: visible;
    margin-left: auto; z-index: auto;
  }
  .nav__head { display: none; }
  .nav__scroll { overflow: visible; padding: 0; }
  .nav__item { opacity: 1; transform: none; transition-delay: 0s !important; }
  .nav__list { display: flex; align-items: center; gap: .1rem; }
  .nav__item { border: 0; position: relative; }

  .nav__link {
    position: relative;
    min-height: 40px; padding: .5rem .78rem;
    font-size: var(--fs-sm); font-weight: 600;
    border-radius: var(--radius);
  }
  .nav__link:hover { padding-left: .78rem; background: var(--surface-tint); }

  /* marigold underline sweeps out from the centre */
  .nav__link::after {
    content: ""; position: absolute;
    left: .78rem; right: .78rem; bottom: .28rem; height: 2px;
    background: var(--brand-accent);
    transform: scaleX(0); transform-origin: center;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav__item:hover > .nav__link::after,
  .nav__item.is-active > .nav__link::after { transform: scaleX(1); }

  .nav__sub {
    position: absolute; top: calc(100% + .3rem); left: 0;
    min-width: 236px; padding: .4rem;
    background: #fff; border: 1px solid var(--line);
    border-top: 2px solid var(--brand-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: none; overflow: visible;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease-out), visibility .22s;
  }
  .nav__item--has-children:hover > .nav__sub,
  .nav__item--has-children:focus-within > .nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav__sub a { min-height: 40px; padding: .5rem .7rem; border-radius: var(--radius); }
  .nav__sub a:hover { background: var(--surface-tint); transform: none; }
  /* keep the last dropdown on screen */
  .nav__item:nth-last-child(-n+2) .nav__sub { left: auto; right: 0; }
}

/* Between the desktop breakpoint and roughly 1180px the menu, the ERP button
   and the gutters together leave the brand about 140px, so the school name was
   ellipsed down to "Pion…" on an iPad Pro in portrait and on small laptops.
   Tightening the menu first gives the name the room it needs; the brand is the
   last thing in the header that should yield. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .nav__link { padding-inline: .5rem; font-size: .8rem; }
  .nav__link:hover { padding-left: .5rem; }
  .nav__link::after { left: .5rem; right: .5rem; }
  .nav__list { gap: 0; }
  .brand__tag { display: none; }
  .brand img { height: 40px; }
  .header__actions .btn { padding-inline: .8rem; }
}

/* ------------------------------------------------------------- noticebar */
.noticebar {
  background: var(--brand-ink);
  color: #fff;
  font-size: var(--fs-sm);
  overflow: hidden;
}
.noticebar__inner { display: flex; align-items: stretch; }
.noticebar__label {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--brand-accent); color: #3A2703;
  padding: .5rem clamp(.7rem, 3vw, 1.1rem);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.noticebar__track { overflow: hidden; flex: 1; display: flex; align-items: stretch; min-width: 0; }
/* The track holds TWO identical groups; translating by exactly -50% therefore
   lands the second group where the first began, which is what makes the loop
   seamless. With a single group the animation only ever traverses half the
   notices and the rest are never shown at all. */
.noticebar__list {
  display: flex; flex: none;
  white-space: nowrap;
  animation: ticker 44s linear infinite;
  will-change: transform;
}
.noticebar__group {
  display: flex; align-items: center;
  gap: clamp(1.5rem, 6vw, 3rem);
  padding-inline: clamp(.75rem, 3vw, 1.5rem);
  flex: none;
}
.noticebar__track:hover .noticebar__list,
.noticebar__track:focus-within .noticebar__list,
.noticebar.is-paused .noticebar__list { animation-play-state: paused; }
.noticebar__list a {
  display: inline-flex; align-items: center;
  min-height: 44px;                     /* thumb-sized, not 21px */
  color: #fff; text-decoration: none; opacity: .92;
}
.noticebar__list a:hover, .noticebar__list a:focus-visible { opacity: 1; text-decoration: underline; }
.noticebar__list a.is-urgent { color: var(--brand-accent); font-weight: 600; }
.noticebar__pause {
  flex: none; display: grid; place-items: center;
  width: 40px; min-height: 44px;
  color: inherit; opacity: .7;
}
.noticebar__pause:hover, .noticebar__pause:focus-visible { opacity: 1; }
.noticebar__pause svg { width: 15px; height: 15px; }
.noticebar__label { align-self: stretch; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Below ~420px the label plus the pause control left the ticker about 190px
   to work with, which clipped every headline mid-word. */
@media (max-width: 419px) {
  .noticebar__label { font-size: .6rem; padding-inline: .55rem; letter-spacing: .06em; }
  .noticebar__label .ico { display: none; }
}
@media (max-width: 359px) {
  .noticebar__label { display: none; }
}

/* ------------------------------------------------------------------ hero */
.hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.hero-slider {
  position: relative;
  display: grid;                      /* all slides share one cell */
  min-height: clamp(360px, 72svh, 720px);
}
.hero-slide {
  grid-area: 1 / 1;                   /* stacked, but still in flow */
  position: relative;
  display: grid; align-items: center;
  min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease), visibility .85s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(8,47,56,.93) 8%, rgba(8,47,56,.74) 48%, rgba(8,47,56,.42) 100%),
    linear-gradient(to top, rgba(8,47,56,.65), transparent 42%);
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* slow drift keeps a still photo alive */
.hero-slide.is-active .hero__media { animation: kenburns 17s ease-out both; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(2.5rem, 9vw, 5.5rem);
  max-width: min(44rem, 100%);
  min-width: 0;
}
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--brand-accent); margin-bottom: .9rem;
  padding-left: .7rem; border-left: 2px solid var(--brand-accent);
}
.hero h1 { color: #fff; margin-bottom: .85rem; }
.hero h1 em {
  font-style: normal; color: var(--brand-accent);
  position: relative; white-space: nowrap;
}
.hero__lead {
  font-size: var(--fs-lead); color: #CFE0DD;
  max-width: 40rem; margin-bottom: 1.6rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.hero__actions .btn { flex: 1 1 auto; min-width: 10.5rem; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }

.hero__badges {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .55rem; margin-top: 2rem; max-width: 34rem;
}
@media (min-width: 760px) { .hero__badges { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hero__badge {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: .6rem .7rem;
  backdrop-filter: blur(4px);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__badge:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }
.hero__badge b {
  display: block;
  font-family: var(--font-display); font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem);
  color: var(--brand-accent); line-height: 1.1;
}
.hero__badge span {
  font-size: var(--fs-xs); color: #B9CFCB;
  letter-spacing: .04em;
}

.hero-dots {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: calc(1.1rem + var(--safe-b));
  display: flex; gap: .45rem;
}
@media (min-width: 1000px) {
  .hero-dots { left: auto; right: var(--gutter); transform: none; }
}
.hero-dots button {
  width: 30px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.34);
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero-dots button::before {           /* invisible 44px tap target */
  content: ""; position: absolute; inset: -18px -6px;
}
.hero-dots button { position: relative; }
.hero-dots button.is-active { background: var(--brand-accent); width: 46px; }

/* ----------------------------------------------------------------- cards */
.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.07); }
.card__body { padding: clamp(.95rem, 3vw, 1.35rem); display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.card__title { font-size: var(--fs-h3); }
.card__title a { color: inherit; text-decoration: none; }
.card__meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-alt);
}
.card__text { color: var(--text-muted); font-size: var(--fs-sm); }
.card__foot { margin-top: auto; padding-top: .6rem; }

/* icon cards carry the margin rule on hover */
.icon-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 3.5vw, 1.75rem);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand-accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .38s var(--ease-out);
}
.icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.icon-card:hover::before { transform: scaleY(1); }
.icon-card__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: .9rem;
  border-radius: var(--radius);
  background: var(--surface-tint); color: var(--brand-ink);
  transition: background-color .32s var(--ease), color .32s var(--ease), transform .32s var(--ease-out);
}
.icon-card:hover .icon-card__icon {
  background: var(--brand-ink); color: var(--brand-accent);
  transform: rotate(-6deg) scale(1.06);
}
.icon-card__icon svg { width: 22px; height: 22px; }
.icon-card h3 { margin-bottom: .35rem; }
.icon-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ----------------------------------------------------------------- split */
.split { display: grid; gap: clamp(1.4rem, 5vw, 3.25rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split--reverse .split__media { order: 2; }
}
.split__media { position: relative; border-radius: var(--radius); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease-out); }
.split__media:hover img { transform: scale(1.05); }
.split__media::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 3px;
  background: var(--brand-accent); z-index: 2;
}
.split__body > * + * { margin-top: .85rem; }

/* -------------------------------------------------- NEP stage cards */
.stages { display: grid; gap: clamp(.85rem, 2.5vw, 1.35rem); }
@media (min-width: 620px) { .stages { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .stages { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.stage {
  position: relative;
  padding: clamp(1.15rem, 3.5vw, 1.6rem);
  border-radius: var(--radius);
  background: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stage:hover { transform: translateY(-4px); }
.stage--live {
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-ink);
}
.stage--live:hover { box-shadow: var(--shadow-hover); }
.stage--soon {
  border: 1px dashed var(--line-strong);
  border-top: 3px dashed var(--brand-alt);
  background: transparent;
}
.stage--soon:hover { background: rgba(255,255,255,.55); }
.stage__years {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: .5rem;
}
.stage h3 { margin-bottom: .45rem; }
.stage p { font-size: var(--fs-sm); color: var(--text-muted); }
.stage__tag {
  display: inline-block; margin-top: .85rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 2px;
}
.stage--live .stage__tag { background: var(--brand-ink); color: #fff; }
.stage--soon .stage__tag { background: var(--surface-tint); color: var(--brand-alt); border: 1px dashed var(--line-strong); }

/* ----------------------------------------------------------------- stats */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.9rem, 3vw, 1.75rem);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat { text-align: center; padding: .5rem; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1; color: var(--brand-ink);
}
.section--ink .stat b { color: var(--brand-accent); }
.stat span {
  display: block; margin-top: .4rem;
  font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.section--ink .stat span { color: #B9CFCB; }

/* --------------------------------------------------------------- notices */
.notice-list { display: grid; gap: .55rem; }
.notice-row {
  display: grid; gap: .15rem .95rem;
  grid-template-columns: 1fr;
  padding: clamp(.85rem, 3vw, 1.1rem);
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-left-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
@media (min-width: 640px) {
  .notice-row { grid-template-columns: auto 1fr; align-items: baseline; }
}
.notice-row:hover {
  border-left-color: var(--brand-accent);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}
.notice-row--urgent { border-left-color: var(--brand-alert); }
.notice-row__date {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-muted); white-space: nowrap;
}
.notice-row__body a { color: var(--brand-ink-900); text-decoration: none; font-weight: 600; }
.notice-row__body a:hover { text-decoration: underline; }
.notice-row__body p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: .2rem; }

.tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--surface-tint); color: var(--brand-alt);
  padding: .12rem .45rem; border-radius: 2px; margin-left: .4rem;
}
.tag--alert { background: #FBE9E4; color: var(--brand-alert); }

/* ---------------------------------------------------------------- people */
.person {
  text-align: center; padding: clamp(1.1rem, 3vw, 1.5rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.person img {
  width: clamp(88px, 22vw, 108px); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; margin: 0 auto .9rem;
  border: 3px solid var(--surface-tint);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.person:hover img { border-color: var(--brand-accent); transform: scale(1.05); }
.person h3 { font-size: var(--fs-h3); }
.person__role { font-size: var(--fs-sm); color: var(--brand-alt); font-weight: 600; }
.person__qual { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-top: .25rem; }

/* ---------------------------------------------------------------- quotes */
.quote {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 4vw, 1.9rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.quote::before {
  content: "\201C";
  position: absolute; top: .1em; right: .3em; z-index: 0;
  font-family: var(--font-display); font-size: clamp(2.5rem, 9vw, 4rem);
  color: var(--brand-accent); opacity: .14; line-height: 1;
  pointer-events: none;
}
.quote__text, .quote__who { position: relative; z-index: 1; }
.quote__text { font-size: var(--fs-lead); font-style: italic; color: var(--text); }
.quote__who { margin-top: .9rem; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-ink); }
.quote__who span { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }

/* --------------------------------------------------------------- gallery */
.masonry { columns: 1; column-gap: .7rem; }
@media (min-width: 520px) { .masonry { columns: 2; } }
@media (min-width: 900px) { .masonry { columns: 3; column-gap: .85rem; } }
@media (min-width: 1200px) { .masonry { columns: 4; } }
.masonry a {
  display: block; position: relative;
  break-inside: avoid; margin-bottom: .7rem;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface-tint);
}
.masonry img { width: 100%; transition: transform .7s var(--ease-out), filter .4s var(--ease); }
.masonry a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,47,56,.55), transparent 55%);
  opacity: 0; transition: opacity .32s var(--ease);
}
.masonry a:hover img { transform: scale(1.06); }
.masonry a:hover::after { opacity: 1; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(6,26,31,.94);
  display: grid; place-items: center;
  padding: max(1rem, var(--safe-l)) max(1rem, var(--safe-r));
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 78svh; object-fit: contain;
  border-radius: var(--radius);
  transform: scale(.96); transition: transform .34s var(--ease-out);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__caption {
  color: #CFE0DD; text-align: center; margin-top: .9rem; font-size: var(--fs-sm);
}
.lightbox__close,
.lightbox__nav--prev,
.lightbox__nav--next {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav--prev:hover,
.lightbox__nav--next:hover { background: rgba(255,255,255,.24); transform: scale(1.08); }
.lightbox__close { top: max(1rem, var(--safe-b)); right: max(1rem, var(--safe-r)); }
.lightbox__nav--prev { left: max(.6rem, var(--safe-l)); top: 50%; margin-top: -24px; }
.lightbox__nav--next { right: max(.6rem, var(--safe-r)); top: 50%; margin-top: -24px; }
.lightbox svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------- pagehead */
.pagehead { position: relative; background: var(--brand-ink-900); color: #fff; isolation: isolate; }
.pagehead__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3; z-index: -1;
}
.pagehead__inner { padding-block: clamp(2.25rem, 8vw, 4.5rem); }
.pagehead h1 { color: #fff; }
.pagehead p { color: #B9CFCB; font-size: var(--fs-lead); margin-top: .55rem; max-width: 55ch; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: var(--fs-xs); color: #9DB8B4; margin-bottom: .7rem;
  font-family: var(--font-mono);
}
.crumbs a { color: #9DB8B4; text-decoration: none; }
.crumbs a:hover { color: var(--brand-accent); }

/* ----------------------------------------------------------------- prose */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.9em; font-size: var(--fs-h2); }
.prose h3 { margin-top: 1.5em; font-size: var(--fs-h3); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-accent); text-decoration-thickness: 2px; }
.prose a:hover { color: var(--brand-alt); }
.prose blockquote {
  border-left: 3px solid var(--brand-accent);
  padding-left: 1.1rem; font-style: italic; color: var(--text-muted);
}
.prose img { border-radius: var(--radius); }

/* ---------------------------------------------------------------- tables */
/* Wrapper scrolls horizontally with a fade hint, so wide compliance tables
   stay readable on a 320px phone instead of blowing out the layout. */
.table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 42px 100% no-repeat,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 42px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(8,47,56,.14), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(8,47,56,.14), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table.data {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 34rem;
}
table.data th, table.data td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
table.data th {
  background: var(--surface-tint);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-ink); font-weight: 600;
  position: sticky; top: 0; z-index: 1;
}
table.data tbody tr { transition: background-color var(--dur) var(--ease); }
table.data tbody tr:hover { background: var(--surface-tint); }
table.data tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- documents */
.doc-list { display: grid; gap: .55rem; }
.doc-row {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem;
  align-items: center;
  padding: clamp(.8rem, 3vw, 1.05rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 620px) { .doc-row { grid-template-columns: auto 1fr auto; } }
.doc-row:hover { border-color: var(--brand-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.doc-row--empty { opacity: .72; border-style: dashed; }
.doc-row--empty:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.doc-row__icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--radius); background: var(--surface-tint); color: var(--brand-ink);
}
.doc-row__icon svg { width: 18px; height: 18px; }
.doc-row__body strong { display: block; font-size: var(--fs-base); }
.doc-row__body span { font-size: var(--fs-xs); color: var(--text-muted); }
.doc-row__cta { grid-column: 1 / -1; }
@media (min-width: 620px) { .doc-row__cta { grid-column: auto; } }

/* ------------------------------------------------------------------ tabs */
.tabs {
  display: flex; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.tabs button {
  position: relative;
  min-height: 44px; padding: .6rem 1rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tabs button:hover { color: var(--brand-ink); }
.tabs button.is-active { color: var(--brand-ink); border-bottom-color: var(--brand-accent); }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: fade-up .4s var(--ease-out) both; }

/* ------------------------------------------------------------- accordion */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.accordion + .accordion { margin-top: .55rem; }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-height: 52px; padding: .85rem clamp(.9rem, 3vw, 1.2rem);
  font-weight: 600; cursor: pointer; list-style: none;
  transition: background-color var(--dur) var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--surface-tint); }
.accordion summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--brand-alt); border-bottom: 2px solid var(--brand-alt);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.accordion[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion[open] summary { background: var(--surface-tint); }
.accordion__body {
  padding: 0 clamp(.9rem, 3vw, 1.2rem) 1.1rem;
  color: var(--text-muted); font-size: var(--fs-sm);
  animation: fade-up .32s var(--ease-out) both;
}

/* ----------------------------------------------------------------- forms */
.form-grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field .req { color: var(--brand-alert); }
.field small { font-size: var(--fs-xs); color: var(--text-muted); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 46px;
  padding: .65rem .8rem;
  font-size: 16px;            /* stops iOS zooming on focus */
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(14,76,89,.13);
}
.field input:disabled, .field textarea:disabled { background: var(--surface-tint); }
.field .choices { display: grid; gap: .4rem; }
.field .choices label {
  display: flex; align-items: center; gap: .5rem;
  min-height: 42px; font-weight: 400; cursor: pointer;
}
.field .choices input { width: auto; min-height: 0; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--brand-alert); }
.field .err { font-size: var(--fs-xs); color: var(--brand-alert); font-weight: 600; }

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

.alert {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .85rem 1rem; border-radius: var(--radius);
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  animation: fade-up .35s var(--ease-out) both;
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: .12rem; }
.alert--ok   { background: #E9F4EF; border-color: #BEDCCF; color: #235C46; }
.alert--err  { background: #FBE9E4; border-color: #EBC4B8; color: #8E3823; }
.alert--info { background: var(--surface-tint); border-color: var(--line-strong); color: var(--brand-ink); }

/* --------------------------------------------------------------- contact */
.contact-grid { display: grid; gap: clamp(1.4rem, 4vw, 2.75rem); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); } }
.info-list { display: grid; gap: .9rem; }
.info-item { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.info-item__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius); background: var(--surface-tint); color: var(--brand-ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.info-item:hover .info-item__icon { background: var(--brand-ink); color: var(--brand-accent); }
.info-item__icon svg { width: 18px; height: 18px; }
.info-item strong { display: block; font-size: var(--fs-sm); }
.info-item span, .info-item a { color: var(--text-muted); font-size: var(--fs-sm); }
.info-item a { text-decoration: none; }
.info-item a:hover { color: var(--brand-ink); text-decoration: underline; }

.map-frame {
  position: relative; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16/10; background: var(--surface-tint);
}
@media (min-width: 900px) { .map-frame { aspect-ratio: 4/3; } }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- cta band */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--brand-ink); color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.6rem, 5vw, 3rem);
}
.cta-band::before {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,165,22,.32), transparent 68%);
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-14px, 14px); }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #CFE0DD; margin-top: .55rem; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; position: relative; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--brand-ink-900); color: #A9C4C0;
  padding-block: clamp(2.25rem, 6vw, 3.75rem) 0;
  font-size: var(--fs-sm);
}
.footer-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.5rem); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.site-footer h3 {
  color: #fff; font-size: var(--fs-base);
  margin-bottom: .85rem; font-family: var(--font-body); font-weight: 600;
  letter-spacing: .02em;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.site-footer, .site-footer p, .site-footer address, .site-footer li, .site-footer a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.footer-grid > * { min-width: 0; }
.site-footer a { color: #A9C4C0; text-decoration: none; }
.site-footer li a {
  display: inline-block; min-height: 36px; padding-block: .35rem;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-footer li a:hover { color: var(--brand-accent); transform: translateX(4px); }
/* The first footer column is a STACK: identity, then the blurb, then the
   social row. It used to be `display: flex` wrapping the logo, the paragraph
   and the social icons in one centred row, which squeezed the paragraph into
   a one-word-per-line column and pushed the icons against the right edge —
   at every width, desktop included. */
.footer-brand {
  display: grid;
  gap: .85rem;
  justify-items: start;
  margin-bottom: .9rem;
  min-width: 0;
}
.footer-brand > p { margin: 0; max-width: 46ch; }
.footer-brand__id {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; min-width: 0;
}
.footer-brand__id img { height: 46px; width: auto; max-width: 120px; object-fit: contain; flex: none; }
.footer-brand__id b {
  color: #fff; font-family: var(--font-display); font-size: 1.15rem;
  line-height: 1.15; overflow-wrap: anywhere;
}
.footer-social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.08);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--brand-accent); color: #3A2703; transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: clamp(1.8rem, 5vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.1);
  /* The floating buttons are fixed to the bottom-right of the viewport, so at
     full scroll they landed on top of the copyright line and the Sitemap /
     Admin Login links. The extra bottom space parks them over empty footer
     instead, and the right gutter keeps the last link clear of them. */
  padding-block: 1.15rem calc(1.15rem + var(--safe-b));
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
}
@media (max-width: 900px) {
  .footer-bottom { padding-bottom: calc(4.75rem + var(--safe-b)); }
}
@media (min-width: 901px) {
  .footer-bottom { padding-right: 4.5rem; }
}
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; align-items: center; }
/* WCAG 2.5.8 wants 24x24 CSS px; these were 19px tall. inline-flex + a floor
   on the height fixes the target without moving anything on the page. */
.footer-bottom__links a {
  display: inline-flex; align-items: center;
  min-height: 32px;
  transition: color var(--dur) var(--ease);
}
.footer-bottom__links a:hover { color: var(--brand-accent); }
.admin-link { opacity: .55; transition: opacity var(--dur) var(--ease); }
.admin-link:hover { opacity: 1; }

/* ------------------------------------------------------------------ FABs */
.fab-stack {
  position: fixed; z-index: 300;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  right: max(.85rem, var(--safe-r));
  bottom: calc(.85rem + var(--safe-b));
  display: grid; gap: .5rem;
}
.fab {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  color: #fff; box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity .3s var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: var(--shadow-lg); }
.fab:active { transform: scale(.95); }
.fab svg { width: 23px; height: 23px; }
.fab--wa { background: #25D366; }
.fab--wa::after {                       /* gentle attention pulse */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: pulse 2.6s var(--ease-out) infinite;
}
.fab--wa { position: relative; }
@keyframes pulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.fab--top { background: var(--brand-ink); opacity: 0; pointer-events: none; }
.fab--top.is-visible { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------- scroll reveal */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------- reduced motion & a11y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .noticebar__list { animation: none; }
  .noticebar__group[aria-hidden="true"] { display: none; }
  .noticebar__track { overflow-x: auto; }
  .hero-slide.is-active .hero__media { animation: none; }
  .fab--wa::after { display: none; }
}

@media (prefers-contrast: more) {
  :root { --text-muted: #3D4F53; --line: #9FB4B1; --line-strong: #7D9793; }
  .btn { border-width: 2px; }
}

/* Short landscape phones: reclaim vertical space. */
@media (max-height: 460px) and (orientation: landscape) {
  .hero-slider { min-height: 92svh; }
  .hero__badges { display: none; }
  .nav { padding-block: .5rem; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .site-header, .topbar, .noticebar, .fab-stack, .nav, .nav-toggle, .noticebar__pause,
  .hero-dots, .cta-band, .site-footer, .lightbox { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section { padding-block: .8rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .table-wrap { overflow: visible; border: 0; background: none; }
  table.data { min-width: 0; font-size: 9.5pt; }
  table.data th { position: static; }
  .card, .icon-card, .stage, .person, .quote { break-inside: avoid; box-shadow: none; }
}

/* ERP button: icon only on the narrowest phones so the brand keeps its room */
@media (max-width: 419px) {
  .header__actions .btn--sm { padding-inline: .7rem; }
  .erp-label { display: none; }
}

/* ==========================================================================
   Small-screen header: the menu button is the one control that must always
   be reachable, so everything else yields to it first.
   ========================================================================== */
@media (max-width: 600px) {
  .topbar__hours { display: none; }
}
@media (max-width: 560px) {
  .header__actions .btn--sm { padding-inline: .75rem; }
  .erp-label { display: none; }            /* ERP button becomes icon-only */
}
@media (max-width: 480px) {
  .brand__tag { display: none; }
  .brand img { height: 34px; }
}
@media (max-width: 360px) {
  :root { --gutter: .85rem; }
  .brand__name { font-size: .95rem; }
  .header__actions { gap: .3rem; }
}

/* Foldables and very narrow viewports: never let a grid force two columns. */
@media (max-width: 400px) {
  .grid--2, .grid--3, .grid--4,
  .stages, .stats, .hero__badges { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* While the full-screen menu is open nothing may float over it. The z-index
   ladder already guarantees this; hiding the FABs also removes them from the
   tab order so the focus trap inside the drawer stays honest. */
body.nav-is-open .fab-stack {
  opacity: 0; pointer-events: none; transform: translateY(8px);
}

/* Breadcrumbs are navigation, not prose, so 2.5.8 applies in full. */
.crumbs a {
  display: inline-flex; align-items: center;
  min-height: 30px; min-width: 30px; justify-content: center;
}
.alert a { padding-block: .25rem; }

/* Heading links inside cards were 20px tall. Padding on an inline box grows
   the tap area without changing the line box, so nothing reflows. */
.card__title a, .notice-row__title a, .person__name a {
  padding-block: .3rem;
}

/* Anything that could conceivably exceed its box is contained. */
.container, .section, .grid, .split, .stages, .footer-grid,
.card, .icon-card, .stage, .person, .quote, .notice-row, .doc-row { min-width: 0; }
img, svg, video, iframe, table { max-width: 100%; }
pre, code { overflow-x: auto; }