/* ==========================================================
   Vote Grantham — Campaign Site Styles
   Palette matched to the 2026 printed collateral:
     Forest  #0D4A28  (sampled from banner-2026.jpg — primary surface)
     Emerald #0FA94F  (accent / highlight only)
     Gold    #FFD600  (single accent, used sparingly)
     Cream   #F2EFE8
   Display: Oswald (condensed caps) | Body/UI: Libre Franklin
   ========================================================== */

:root {
  /* --- Greens: forest is the brand, emerald is the accent --- */
  --forest-darkest: #072D18;
  --green-deep: #0A3B21;
  --forest: #0D4A28;          /* sampled from the campaign banner */
  --green-mid: #12653A;
  --green: #0FA94F;           /* accent only: kickers, links, focus */
  --green-bright: #16BE59;

  --gold: #FFD600;
  --gold-shade: #C9A800;
  --white: #FFFFFF;
  --cream: #F2EFE8;
  --ink: #14291D;
  --gray: #55655B;
  --gray-light: #F5F7F5;
  --rule: #DDE4DF;
  --field-border: #C4D1C8;

  --grad: linear-gradient(150deg, #072D18 0%, #0D4A28 46%, #12653A 100%);
  --grad-soft: linear-gradient(150deg, #0A3B21 0%, #0D4A28 55%, #145A31 100%);

  /* Dark-surface texture. A survey-map contour field carries the visual
     interest; the light bloom, settling vignette and grain sit over it so the
     lines read as terrain under a light source rather than as wallpaper. */
  --texture-contours: url("/images/texture-contours.svg");
  --texture-grain: url("/images/texture-grain.png");

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-sans: "Libre Franklin", -apple-system, "Segoe UI", sans-serif;

  --max-width: 1140px;
  --gutter: 1.5rem;
  --measure: 68ch;

  /* spacing scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px rgba(10, 59, 33, 0.06), 0 2px 8px rgba(10, 59, 33, 0.06);
  --shadow-md: 0 2px 4px rgba(10, 59, 33, 0.06), 0 12px 28px rgba(10, 59, 33, 0.10);
  --shadow-lg: 0 4px 8px rgba(10, 59, 33, 0.08), 0 24px 48px rgba(10, 59, 33, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* stop sticky-header from covering in-page anchor targets */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--green-mid);
}

img, svg { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: 0.03em;
  text-wrap: balance;
}
h4 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--green-mid); }

/* one consistent focus ring across the whole site */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--green-deep); }

/* skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--green-deep);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
/* Flat solid fills — no bevels, no lift. The only hover motion is a
   sheen sweeping across the face of the button. */
.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: 2px solid transparent;
  cursor: pointer;
  transform: skewX(-8deg);
  position: relative;
  overflow: hidden;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn > span { display: inline-block; transform: skewX(8deg); position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.38);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }

.btn-gold { background: var(--gold); color: var(--green-deep); }
.btn-gold:hover { background: var(--gold); }
.btn-gold:active { background: #F0C900; }

.btn-green { background: var(--forest); color: var(--white); }
.btn-green:hover { background: var(--green-mid); }
.btn-green:active { background: var(--green-deep); }

.btn-outline-white {
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--white);
  background: transparent;
}
.btn-outline-white:hover { background: var(--white); color: var(--green-deep); border-color: var(--white); }
.btn-outline-white:active { background: var(--cream); }

/* ---------- Navigation ---------- */
.site-header {
  background: var(--white);
  border-bottom: 3px solid var(--forest);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(10, 59, 33, 0.05);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* Fully opaque: at 88% the gold CTA and green sections ghosted through the
   glass and the header read as smudged rather than translucent. */
.site-header.is-scrolled {
  background: var(--white);
  box-shadow: 0 6px 24px rgba(10, 59, 33, 0.12);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem var(--s-3);
  max-width: var(--max-width);
  margin: 0 auto;
  transition: padding 0.3s ease;
}
.site-header.is-scrolled .nav-wrap { padding-top: 0.55rem; padding-bottom: 0.55rem; }

.brand { display: flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; }
.brand-lockup { height: 54px; width: auto; display: block; transition: height 0.3s ease; }
.site-header.is-scrolled .brand-lockup { height: 44px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  white-space: nowrap;
}
/* animated underline, one implementation only */
.nav-links a:not(.nav-cta):not(.lang-switch)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -1px;
  height: 3px;
  background: var(--gold);
  transition: right 0.3s var(--ease-out);
}
.nav-links a:not(.nav-cta):not(.lang-switch):hover::after { right: 0; }
.nav-links a.active:not(.nav-cta):not(.lang-switch)::after { right: 0; background: var(--forest); }

.nav-links .nav-cta {
  background: var(--gold);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.95rem;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: background 0.18s ease;
}
.nav-links .nav-cta > span { display: inline-block; position: relative; z-index: 1; }
.nav-links .nav-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.38);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.nav-links .nav-cta:hover::before { left: 130%; }
.nav-links .nav-cta:active { background: #F0C900; }

.lang-switch {
  font-family: var(--font-display);
  font-size: 0.85rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green-mid) !important;
  border: 1.5px solid var(--field-border);
  padding: 0.28rem 0.6rem !important;
  border-radius: 3px;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.lang-switch:hover {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--white) !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  color: var(--forest);
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

/* ---------- Dark-surface texture (shared) ----------
   Every deep-green surface on the site carries the same four-layer treatment,
   stacked top-most first the way background-image reads:

     1. grain      — a 128px tile at ~9% alpha; kills gradient banding and
                     gives the green a printed rather than a digital surface
     2. vignette   — settles the lower-left, where headline copy lands, so the
                     contours never compete with type
     3. light      — one warm source in the top-right corner, matching the
                     lit corner of the 2026 printed collateral
     4. contours   — the survey-map isolines themselves, scaled to cover

   Replaces the flat translucent triangles that used to sit on these panels. */
.hero::before,
.section-green::before,
.cta-band::before,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--texture-grain),
    linear-gradient(197deg, rgba(7, 45, 24, 0) 30%, rgba(7, 45, 24, 0.34) 78%, rgba(7, 45, 24, 0.48) 100%),
    radial-gradient(72% 66% at 88% 4%, rgba(22, 190, 89, 0.22), transparent 62%),
    var(--texture-contours);
  background-size: 128px 128px, auto, auto, cover;
  background-position: 0 0, center, center, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* ---------- Hero (shared) ---------- */
.hero {
  background: var(--grad);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* gives descendants a scrollbar-free width reference via 100cqw */
  container-type: inline-size;
}
.hero::before { z-index: 1; }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--gold);
  z-index: 4;
}
.hero .container { position: relative; z-index: 2; }

/* Re-elect eyebrow with flanking rules */
.reelect {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  color: var(--cream);
  margin-bottom: 0.85rem;
  white-space: nowrap;
}
.reelect::before, .reelect::after {
  content: "";
  height: 2px;
  width: 3.25rem;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

/* Slogan bar */
.slogan-bar {
  display: inline-block;
  background: rgba(7, 45, 24, 0.72);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  padding: 0.5rem 1.4rem;
  transform: skewX(-8deg);
  border-left: 5px solid var(--gold);
  backdrop-filter: blur(3px);
}
.slogan-bar > span { display: inline-block; font-style: italic; }

/* ---------- Home hero ---------- */
.hero-2026 { padding: 0; }
/* full-bleed civic backdrop: the tower rises in the gap between the copy
   and the portrait rather than hiding behind him */
.hero-2026 .hero-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.115;
  z-index: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: end;
  gap: 1.5rem;
  /* never let the hero swallow the whole fold on a laptop */
  min-height: clamp(430px, 72vh, 580px);
}
.hero-copy { padding: 3.25rem 0; align-self: center; }
.hero-name {
  font-size: clamp(2.75rem, 6.4vw, 4.6rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.005em;
  line-height: 0.98;
  text-shadow: 0 2px 18px rgba(7, 45, 24, 0.45);
  margin-bottom: 0.5rem;
}
.hero-office {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: var(--cream);
  margin-bottom: 1.35rem;
}
.hero-office .dot { color: var(--gold); }
.btn-row { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 2rem; }

/* The portrait anchors to the right edge of the hero and runs larger than the
   grid column, so it reads as a figure standing in the frame rather than an
   image squeezed into a box. The backing panel tracks its width so the gold
   rule never floats free of him. */
.hero-photo {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: max-content;
  max-width: none;
  /* Break the portrait out of the container so its right edge sits flush with
     the viewport. The source photo crops his shoulder with a hard vertical
     line; flush against the screen edge, that line reads as the frame rather
     than as a crop. The min() keeps it correct below --max-width, where the
     only gap to close is the container's own gutter.

     100vw includes the scrollbar, so it overshoots by half the scrollbar width
     on platforms with classic scrollbars. 100cqw measures .hero's own content
     box, which excludes it — exact on every platform. The 100vw line stays as
     the fallback for browsers without container query units. */
  margin-right: min(calc(var(--gutter) * -1), calc((var(--max-width) - 100vw) / 2 - var(--gutter)));
  margin-right: min(calc(var(--gutter) * -1), calc((var(--max-width) - 100cqw) / 2 - var(--gutter)));
}
.hero-photo::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 1%;
  top: 14%;
  bottom: 0;
  background: linear-gradient(165deg, rgba(242, 239, 232, 0.16), rgba(242, 239, 232, 0.03));
  transform: skewX(-8deg);
  border-top: 4px solid var(--gold);
  z-index: 0;
}
.hero-photo img {
  position: relative;
  z-index: 1;
  height: clamp(430px, 62vw, 660px);
  max-height: none;
  width: auto;
  filter: drop-shadow(0 14px 32px rgba(7, 45, 24, 0.5));
}

/* Election-day badge: a skewed tab on the portrait panel, so it belongs to the
   same -8deg system as the buttons, slogan bar and plank tags — the old
   rotated circle was the only element rotating instead of skewing. */
.hero-badge {
  position: absolute;
  left: -6%;
  bottom: 14%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 1.15rem 0.65rem;
  background: var(--white);
  border-left: 6px solid var(--gold);
  color: var(--forest);
  transform: skewX(-8deg);
  box-shadow: 0 14px 30px rgba(7, 45, 24, 0.4);
  animation: badge-in 0.55s 0.4s var(--ease-out) backwards;
}
.hero-badge > span { display: block; transform: skewX(8deg); white-space: nowrap; }
.badge-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  color: var(--green-mid);
  line-height: 1.2;
}
.badge-date {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.22rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
@keyframes badge-in {
  from { opacity: 0; transform: skewX(-8deg) translateY(10px); }
  to   { opacity: 1; transform: skewX(-8deg) translateY(0); }
}

/* ---------- Inner-page hero ---------- */
.hero-inner { padding: 5rem 0 5.5rem; }
.hero-inner h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  color: var(--white);
  margin-bottom: 0.85rem;
  text-shadow: 0 2px 14px rgba(7, 45, 24, 0.3);
}
.hero-inner p.lead {
  font-size: 1.15rem;
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Video embeds (DORMANT) ----------
   The campaign videos were pulled for launch and will be re-integrated in a
   post-launch update. No page ships .video-frame markup right now, so nothing
   below is in use. These rules and the click-to-play facade in js/main.js are
   kept intact so re-integration is a markup-only change. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--forest-darkest);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* click-to-play facade: shown until the visitor actually wants the video */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: var(--forest-darkest);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 4:3 thumbnails (hqdefault) arrive with black bars baked in — crop them off */
.video-facade.is-4x3 { background-size: 100% 134%; }
.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 45, 24, 0.12), rgba(7, 45, 24, 0.5));
  transition: background 0.25s ease;
}
.video-facade:hover::before { background: linear-gradient(180deg, rgba(7, 45, 24, 0.05), rgba(7, 45, 24, 0.42)); }
.video-play {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(7, 45, 24, 0.5);
  transition: transform 0.28s var(--ease-out), background 0.2s;
}
.video-play svg { width: 28px; height: 28px; color: var(--green-deep); margin-left: 4px; }
.video-facade:hover .video-play { transform: scale(1.08); background: #FFDF33; }
.video-facade:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* Inner-page hero copy.
   Single column while the videos are out. To restore the two-column hero,
   put back `grid-template-columns: 1.05fr 0.95fr` and drop the max-width. */
.hero-inner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.hero-inner-grid > div:first-child { max-width: 46rem; }

/* Inner-page hero portrait. The same right-anchored figure as the home hero,
   scaled to the shorter band and without the election-day badge. The section
   drops its bottom padding so he stands on the hero's gold edge instead of
   floating above it; the copy stays vertically centred beside him. */
.hero-inner-photo { padding-bottom: 0; }
.hero-inner-photo .hero-inner-grid { grid-template-columns: minmax(0, 1fr) auto; }
.hero-inner-photo .hero-inner-grid > div:first-child { max-width: 40rem; }
.hero-inner-photo .hero-photo img { height: clamp(260px, 27vw, 370px); }
.hero-inner-photo .hero-photo::before { top: 8%; }

/* Standalone video sections */
.video-section .video-frame { max-width: 880px; margin: 0 auto; }

/* ---------- Sections ---------- */
.section { padding: var(--s-6) 0; }
.section-alt { background: var(--gray-light); }
.section-cream { background: var(--cream); }
.section-green {
  background: var(--grad-soft);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-green > .container { position: relative; z-index: 1; }

.section-heading { margin-bottom: var(--s-4); }
.section-heading .kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--green-mid);
  margin-bottom: 0.6rem;
}
.section-heading .kicker::before {
  content: "";
  height: 2px;
  width: 2.75rem;
  background: var(--gold);
  flex-shrink: 0;
}
.section-green .section-heading .kicker { color: var(--gold); }
.section-green .section-heading .kicker::before { background: rgba(255, 255, 255, 0.5); }
.section-heading h2 { font-size: clamp(1.85rem, 3.8vw, 2.6rem); color: var(--forest); }
.section-green .section-heading h2 { color: var(--white); }
.section-heading p {
  max-width: var(--measure);
  margin-top: 0.9rem;
  color: var(--gray);
  font-size: 1.075rem;
}
.section-green .section-heading p { color: rgba(255, 255, 255, 0.86); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--white);
  padding: 1.85rem 1.75rem 1.6rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  /* pin the call-to-action to the bottom so ragged headline wraps
     don't leave the links at six different heights */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-top: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
/* one continuous rule instead of a green bar plus a stray gold tick */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--forest) 0%, var(--green) 68%, var(--gold) 100%);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 {
  font-size: 1.28rem;
  line-height: 1.14;
  margin-bottom: 0.65rem;
  color: var(--forest);
  letter-spacing: 0.02em;
}
.card p { color: var(--gray); font-size: 0.98rem; }
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-mid);
  transition: color 0.2s, gap 0.25s var(--ease-out);
}
.card .card-link:hover { color: var(--forest); gap: 0.7rem; }

/* A sliver of flavour: full-bleed across the top of the card, cropped short so
   it reads as a band of context rather than a hero image competing with the
   heading. Negative margins pull it out of the card's padding. */
.card-media {
  /* +2px and the extra 1px of negative margin cover the card's 1px side
     borders — without them the band sits 2px short of a true full bleed */
  width: calc(100% + 3.5rem + 2px);
  /* the global `img { max-width: 100% }` would clamp the full-bleed width */
  max-width: none;
  margin: -1.85rem calc(-1.75rem - 1px) 0;
  height: 118px;
  object-fit: cover;
  object-position: center;
  background: var(--forest);
  transition: transform 0.5s var(--ease-out);
}
/* the card clips the image so the hover scale can't bleed past the corners */
.card { overflow: hidden; }
.card:hover .card-media { transform: scale(1.045); }

/* the icon straddles the bottom edge of the sliver — it needs an opaque fill
   and a white ring to stay legible where it overlaps the photograph */
.card-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 3px solid var(--white);
  border-radius: 50%;
  margin: -29px 0 1.05rem;
  color: var(--forest);
  box-shadow: 0 4px 14px rgba(7, 45, 24, 0.28);
  transition: background 0.28s, color 0.28s, transform 0.28s var(--ease-out);
}
.card:hover .card-icon { background: var(--forest); color: var(--white); transform: scale(1.06); }
.card-icon svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .card-media { height: 104px; }
}

/* ---------- Stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.stat { position: relative; padding: 0 1rem; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 0.01em;
  /* tabular figures keep the row optically level */
  font-variant-numeric: tabular-nums;
}
.stat .label {
  margin-top: 0.6rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 22ch;
  margin-inline: auto;
}
.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 6%; right: -1rem; bottom: 6%;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 700px) { .stat:not(:last-child)::after { display: none; } }

/* ---------- The record: "already delivered" tiles on the green band ----------
   Deliberately NOT the white .card pattern the platform promises use. These sit
   on the deep-green band, are outlined rather than filled, carry a gold check
   badge riding the topic icon, and the whole tile is the link. Nobody scanning
   the home page should mistake a tile for something merely being promised. */
.record-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
.rtile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.7rem 1.55rem 1.5rem;
  color: var(--white);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 3px solid var(--gold);
  transition: background 0.28s, border-color 0.28s, transform 0.3s var(--ease-out);
}
.rtile:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
  border-left-color: var(--gold);
  transform: translateY(-4px);
}
.rtile-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 214, 0, 0.5);
  border-radius: 50%;
  color: var(--gold);
  margin-bottom: 1.05rem;
  transition: background 0.28s, border-color 0.28s;
}
.rtile-icon svg { width: 24px; height: 24px; }
/* the check badge is the "done" marker; it rides the lower-right of the icon */
.rtile-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3B21' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 L9.5 17.5 L19.5 6.5'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
}
.rtile:hover .rtile-icon { background: rgba(255, 214, 0, 0.14); border-color: var(--gold); }
.rtile h3 {
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: 0.07em;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.rtile p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.95rem;
  line-height: 1.55;
}
.rtile .rtile-more {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  transition: gap 0.25s var(--ease-out);
}
.rtile:hover .rtile-more { gap: 0.75rem; }

@media (max-width: 480px) {
  .rtile { padding: 1.45rem 1.3rem 1.3rem; }
}

/* ---------- Platform / Accomplishment detail lists ---------- */
.section { counter-reset: plank; }
.plank {
  position: relative;
  padding: 2.5rem 0 2.5rem 5rem;
  counter-increment: plank;
  border-bottom: 1px solid var(--rule);
}
.plank:first-child { padding-top: 0; }
.plank:last-child { border-bottom: none; padding-bottom: 0; }
/* quiet manifesto numeral — aligned to the tag, not floating above it */
.plank::before {
  content: counter(plank, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2.35rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--forest);
  opacity: 0.22;
  line-height: 0.85;
  letter-spacing: 0.01em;
}
.plank:first-child::before { top: -0.15rem; }
/* ---------- The record: an icon grid, not a numbered manifesto ----------
   Platform planks are a sequence you read in order; accomplishments are a set
   you scan. Two-up on desktop, icons instead of numerals. */
.record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.record-grid .plank {
  padding: 1.9rem 1.75rem;
  border-bottom: none;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--forest);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.record-grid .plank:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.record-grid .plank::before { content: none; }        /* no counter numeral */
.record-grid .plank:first-child { padding-top: 1.9rem; }
.record-grid .plank:last-child { padding-bottom: 1.9rem; }
.record-grid .plank h3 { font-size: 1.3rem; max-width: none; }
.record-grid .plank ul { max-width: none; }

.plank-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 169, 79, 0.10);
  color: var(--green-mid);
  margin-bottom: 1.1rem;
  transition: background 0.28s, color 0.28s, transform 0.28s var(--ease-out);
}
.plank-icon svg { width: 28px; height: 28px; }
.record-grid .plank:hover .plank-icon { background: var(--forest); color: var(--white); transform: scale(1.06); }

@media (max-width: 820px) {
  .record-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* arriving from a home-page card: briefly mark where you landed */
.plank:target { outline: none; }
.plank:target::after {
  content: "";
  position: absolute;
  left: -1.5rem; right: -1.5rem; top: 1rem; bottom: 1rem;
  background: rgba(255, 214, 0, 0.16);
  pointer-events: none;
  z-index: -1;
  animation: plank-landed 2.4s 0.2s ease forwards;
}
@keyframes plank-landed { from { opacity: 1; } to { opacity: 0; } }

.plank h3 {
  font-size: 1.55rem;
  color: var(--forest);
  margin-bottom: 0.65rem;
  max-width: 34ch;
}
.plank .plank-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.9rem;
  transform: skewX(-8deg);
  margin-bottom: 0.85rem;
}
.plank .plank-tag > span { display: inline-block; transform: skewX(8deg); }
.plank p { color: var(--gray); max-width: 68ch; }
.plank p + p { margin-top: 0.75rem; }
.plank ul { margin: 0.85rem 0 0 1.15rem; color: var(--gray); max-width: 68ch; }
.plank li { margin-bottom: 0.45rem; padding-left: 0.25rem; }
.plank li::marker { color: var(--green); }
.plank h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--green-mid);
  margin: 1.6rem 0 0.2rem;
}
.plank h4 + ul { margin-top: 0.4rem; }

/* ---------- Forms ---------- */
/* Centred: a 640px card hard-left in a 1140px container left half the page empty */
.form-card {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-top: 5px solid var(--forest);
  padding: 2.75rem;
  max-width: 680px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.form-group { margin-bottom: 1.4rem; }
.form-group label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
  color: var(--ink);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.78rem 0.9rem;
  border: 1.5px solid var(--field-border);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: #FCFDFC;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #93A399; }
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: #A9BCB0; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(18, 101, 58, 0.14);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.checkbox-list { display: grid; gap: 0.6rem; }
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
  font-size: 0.98rem;
  cursor: pointer;
}
.checkbox-list input { width: auto; }
.checkbox-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--field-border);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  background: #FCFDFC;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.checkbox-list input[type="checkbox"]:hover { border-color: var(--green-mid); }
.checkbox-list input[type="checkbox"]:checked {
  background: var(--forest);
  border-color: var(--forest);
}
.checkbox-list input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2355655B'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  padding-right: 2.6rem;
  cursor: pointer;
}

/* ambient brand glow, centred behind the card rather than stranded to one side */
.section:has(.form-card), .section-alt:has(.form-card) {
  position: relative;
  overflow: hidden;
}
.section:has(.form-card)::before, .section-alt:has(.form-card)::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1100px; height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(15, 169, 79, 0.09), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .section:has(.form-card)::before, .section-alt:has(.form-card)::before { display: none; }
}

/* ---------- CTA band ---------- */
/* Solid deep green: the previous gradient butted against .section-green's
   gradient and read as a rendering seam. */
.cta-band {
  background: var(--forest);
  color: var(--white);
  text-align: center;
  padding: var(--s-5) 0;
  border-top: 6px solid var(--gold);
  position: relative;
  overflow: hidden;
}
/* the band is short and centred, so its light source sits top-centre rather
   than top-right and the vignette closes in from both sides */
.cta-band::before {
  background-image:
    var(--texture-grain),
    linear-gradient(to bottom, rgba(7, 45, 24, 0) 46%, rgba(7, 45, 24, 0.42) 100%),
    radial-gradient(70% 96% at 50% 0%, rgba(22, 190, 89, 0.22), transparent 70%),
    var(--texture-contours);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.85rem, 3.8vw, 2.45rem); margin-bottom: 1rem; }
.cta-band p { max-width: 54ch; margin: 0 auto 2rem; color: rgba(255, 255, 255, 0.9); }

/* Home page only. The record band above and the footer below are both deep
   green, so a third green band between them read as one long slab. Cream
   breaks the run and gives the closing ask its own surface. The shared dark
   texture is built for green surfaces, so it comes off here; the other light
   sections on the site are flat too. */
.cta-band-light { background: var(--cream); color: var(--ink); }
.cta-band-light::before { display: none; }
.cta-band-light h2 { color: var(--forest); }
.cta-band-light p { color: var(--gray); }
/* gold on cream is close in value — a soft drop shadow keeps the button's
   skewed edge from dissolving into the band */
.cta-band-light .btn-gold { box-shadow: 0 6px 18px rgba(10, 59, 33, 0.14); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-darkest);
  color: rgba(255, 255, 255, 0.82);
  padding: 3.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 0, 0.7), transparent);
}
/* the darkest surface on the site — the map reads at half strength here */
.site-footer::after {
  opacity: 0.55;
  background-image:
    var(--texture-grain),
    linear-gradient(190deg, rgba(7, 45, 24, 0) 40%, rgba(3, 24, 12, 0.5) 100%),
    radial-gradient(66% 80% at 84% 0%, rgba(22, 190, 89, 0.14), transparent 66%),
    var(--texture-contours);
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem 2rem;
  margin-bottom: 2.5rem;
}
.site-footer h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--white);
  margin-bottom: 0.85rem;
  font-size: 1rem;
}
.footer-grid p { font-size: 0.95rem; max-width: 42ch; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.18s;
}
.site-footer a:hover { color: var(--gold); }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}
.social-link:hover svg { transform: scale(1.1); }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Entrance + scroll motion ---------- */
/* hero copy: staggered fade-up */
.hero-copy > * {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-in 0.7s var(--ease-out) forwards;
}
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.13s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.21s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.29s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.37s; }
@keyframes hero-in { to { opacity: 1; transform: translateY(0); } }

/* the slogan bar keeps its static skew — animate around it, not over it */
.hero-copy > .slogan-bar { animation-name: slogan-in; }
@keyframes slogan-in {
  from { opacity: 0; transform: translateY(16px) skewX(-8deg); }
  to   { opacity: 1; transform: translateY(0) skewX(-8deg); }
}

.hero-photo { animation: photo-in 0.9s 0.1s var(--ease-out) backwards; }
@keyframes photo-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero-inner-grid > div:first-child > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-in 0.65s var(--ease-out) forwards;
}
.hero-inner-grid > div:first-child > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner-grid > div:first-child > *:nth-child(2) { animation-delay: 0.13s; }
.hero-inner-grid > div:first-child > *:nth-child(3) { animation-delay: 0.21s; }
.hero-inner-grid .video-frame {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-in 0.75s 0.26s var(--ease-out) forwards;
}

/* scroll reveal */
[data-revealed] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-revealed].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner-grid { gap: 2.25rem; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  :root { --s-6: 4rem; --s-5: 3rem; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    padding: 1.25rem var(--s-3) 1.5rem;
    gap: 1rem;
    border-bottom: 3px solid var(--forest);
    box-shadow: 0 10px 20px rgba(10, 59, 33, 0.12);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .nav-links.open { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links .nav-cta, .nav-links .lang-switch { text-align: center; align-self: flex-start; }
  .brand-lockup, .site-header.is-scrolled .brand-lockup { height: 44px; }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-inner-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 3.25rem 0 0; }
  /* stacked layout: stay anchored to the right edge so the shoulder crop
     stays off-screen here too */
  .hero-photo { margin-top: 1.5rem; justify-self: end; }
  .hero-photo img { height: clamp(340px, 74vw, 480px); }
  .hero-badge { left: 0; bottom: 10%; padding: 0.5rem 0.9rem 0.55rem; }
  .badge-date { font-size: 1.05rem; }
  .hero-2026 .hero-motif { opacity: 0.09; }
  .hero-inner { padding: 3rem 0 3.5rem; }
  .hero-inner-photo { padding-bottom: 0; }
  .hero-inner-photo .hero-photo { margin-top: 0; }
  .hero-inner-photo .hero-photo img { height: clamp(230px, 50vw, 320px); }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-card { padding: 1.75rem 1.35rem; }
  .plank { padding-left: 0; }
  .plank::before, .plank:first-child::before {
    position: static;
    display: block;
    margin-bottom: 0.6rem;
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  :root { --gutter: 1.15rem; }
  body { font-size: 1rem; }
  .reelect { letter-spacing: 0.2em; font-size: 0.85rem; }
  .reelect::before, .reelect::after { width: 1.75rem; }
  .slogan-bar { font-size: 0.95rem; padding: 0.45rem 1.1rem; }
  .btn { display: block; text-align: center; padding: 0.85rem 1.25rem; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 0.85rem; }
}

/* ---------- Reduced motion ---------- */
/* The inner-page hero holds its two columns further down than the home hero —
   the scaled portrait is only ~250px wide — and stacks only once the headline
   runs out of room beside it. Stacked, the portrait sits tight under the copy
   so the banner stays short. */
@media (max-width: 700px) {
  .hero-inner-photo .hero-inner-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-revealed] { opacity: 1 !important; transform: none !important; }
  .hero-copy > *,
  .hero-photo,
  .hero-inner-grid > div:first-child > *,
  .hero-inner-grid .video-frame { opacity: 1 !important; transform: none !important; }
  .hero-copy > .slogan-bar { transform: skewX(-8deg) !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .cta-band, .video-frame, .nav-toggle { display: none !important; }
  .hero, .section-green { background: none !important; color: #000 !important; }
  /* the contour texture is decorative — never spend a resident's toner on it */
  .hero::before, .section-green::before, .cta-band::before,
  .site-footer::after { display: none !important; }
  .hero-name, .hero-inner h1, .section-green h2 { color: #0D4A28 !important; text-shadow: none !important; }
  .rtile {
    background: none !important;
    border-color: #999 !important;
    border-left-color: #0D4A28 !important;
    break-inside: avoid;
  }
  .rtile h3 { color: #0D4A28 !important; }
  .rtile p { color: #000 !important; }
  .rtile-icon { border-color: #999 !important; color: #0D4A28 !important; }
  .rtile .rtile-more { display: none !important; }
  body::before { display: none !important; }
}