/* ==========================================================================
   Design System — Hop in Portugal
   base.css — tokens, reset, type scale, grid
   Fonts: Boldonse (display / headings) + Geist (body / UI)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Boldonse&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand colours (sampled from colours.png) --------------------------- */
  --color-green: #18a95d;   /* labelled "Warm White" on the sheet     */
  --color-forest: #004a42;  /* labelled "Light Blue" on the sheet     */
  --color-lime: #bed020;    /* labelled "Hop Bright Blue" on the sheet */
  --color-orange: #eb5d0b;  /* labelled "Dark Blue" on the sheet      */
  --color-navy: #134265;    /* UI label colour used on the grids sheet */
  --color-ink: #012b26;     /* deep section background used on the homepage */
  --color-ink-deep: #001714; /* darker ground behind long-form article copy    */

  /* --- Neutrals ----------------------------------------------------------- */
  --color-white: #ffffff;
  --color-grey-100: #f2f2f2;
  --color-grey-200: #dfdfdf;
  --color-grey-300: #bfbfbf;
  --color-grey-400: #a9a9a9;
  --color-grey-600: #606060;
  --color-grey-800: #404040;
  --color-grey-900: #202020;
  --color-black: #000000;

  /* --- Semantic roles ----------------------------------------------------- */
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-grey-100);
  --color-bg-inverse: var(--color-ink);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-grey-400);
  --color-text-inverse: var(--color-white);
  --color-accent: var(--color-green);
  --color-accent-alt: var(--color-lime);
  --color-highlight: var(--color-orange);
  --color-border: var(--color-grey-200);
  --color-focus: var(--color-orange);

  /* --- Type families ------------------------------------------------------ */
  --font-display: "Boldonse", "Arial Narrow", sans-serif; /* 400 only */
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Type scale — mobile first (the "(s)" column of the sheet) ---------- */
  /* Boldonse sets very wide, so the display sizes are fluid below 768px
     to keep long words inside a 320px screen. */
  --size-h01: clamp(22px, 7vw, 34px);
  --size-h02: clamp(20px, 6.2vw, 30px);
  --size-h03: 24px;
  --size-h04: clamp(18px, 5.4vw, 26px);
  --size-h05: 28px;

  --size-body-01: 16px;
  --size-body-02: 14px;
  --size-body-03: 12px;
  --size-body-04: 11px;
  --size-body-05: 12px;

  /* --- Line heights & tracking -------------------------------------------- */
  --leading-display: 1.5;   /* Boldonse caps are 1.19em tall — 1.0 overlaps */
  --leading-heading: 1.15;
  --leading-body: 1.5;
  --leading-tight: 1.3;

  --tracking-display: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.06em;

  /* --- Spacing (4px base — 8 / 16 / 20 / 100 all divide cleanly) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 100px;
  --space-13: 120px;

  /* --- Radius (matches the swatch corners) -------------------------------- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Grid — small / XS: 320px, 4 columns, margin 20, gutter 8 ----------- */
  --grid-columns: 4;
  --grid-margin: 20px;
  --grid-gutter: 8px;
  --grid-max-width: 1920px;

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
}

/* Medium / SM — iPad Mini 768px: 6 columns, margin 20, gutter 16 */
@media (min-width: 768px) {
  :root {
    --grid-columns: 6;
    --grid-margin: 20px;
    --grid-gutter: 16px;

    --size-h01: 48px;
    --size-h02: 40px;
    --size-h03: 28px;
    --size-h04: 32px;
    --size-h05: 34px;
    --size-body-01: 18px;
  }
}

/* Large / LG — Desktop 1920px: 12 columns, margin 100, gutter 20 */
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --grid-margin: 100px;
    --grid-gutter: 20px;

    --size-h01: 62px;
    --size-h02: 52px;
    --size-h03: 32px;
    --size-h04: 40px;
    --size-h05: 40px;

    --size-body-01: 20px;
    --size-body-02: 18px;
    --size-body-03: 16px;
    --size-body-04: 15px;
    --size-body-05: 14px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--size-body-02);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-lime);
  color: var(--color-forest);
}

/* --------------------------------------------------------------------------
   3. Type scale
   Display faces: h01, h02, h04 use Boldonse (uppercase, 400 only).
   Text faces:    h03, h05 and all body styles use Geist.
   Each class is already responsive; the ".is-small" modifier forces the
   mobile size at any width.
   -------------------------------------------------------------------------- */

.h01,
.h02,
.h04,
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.h01,
h1 {
  font-size: var(--size-h01);
}
.h02,
h2 {
  font-size: var(--size-h02);
}
.h04 {
  font-size: var(--size-h04);
}

.h03,
.h05,
h3,
h4,
h5 {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  text-transform: none;
}

.h03,
h3 {
  font-size: var(--size-h03);
}
.h05 {
  font-size: var(--size-h05);
}
h4 {
  font-size: var(--size-h03);
}
h5 {
  font-size: var(--size-body-01);
}

.h01.is-small {
  font-size: 34px;
}
.h02.is-small {
  font-size: 30px;
}
.h03.is-small {
  font-size: 24px;
}
.h04.is-small {
  font-size: 26px;
}
.h05.is-small {
  font-size: 28px;
}

/* Body copy */
.body-01 {
  font-size: var(--size-body-01);
  line-height: var(--leading-body);
}
.body-02 {
  font-size: var(--size-body-02);
  line-height: var(--leading-body);
}
.body-03 {
  font-size: var(--size-body-03);
  line-height: var(--leading-body);
}
.body-04 {
  font-size: var(--size-body-04);
  line-height: var(--leading-tight);
}
.body-05 {
  font-size: var(--size-body-05);
  line-height: var(--leading-tight);
}

.body-01.is-small {
  font-size: 16px;
}
.body-02.is-small {
  font-size: 14px;
}
.body-03.is-small {
  font-size: 12px;
}
.body-04.is-small {
  font-size: 11px;
}
.body-05.is-small {
  font-size: 12px;
}

/* Caps variants shown on the sheet for body 02 (s) and body 03 */
.is-caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

p + p {
  margin-top: var(--space-4);
}

/* Text colour helpers */
.text-muted {
  color: var(--color-text-muted);
}
.text-inverse {
  color: var(--color-text-inverse);
}
.text-accent {
  color: var(--color-accent);
}
.text-highlight {
  color: var(--color-highlight);
}
.text-navy {
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   4. Layout & grid
   12 columns at desktop, 6 at tablet, 4 at mobile — margins and gutters
   come straight from the grids sheet.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
}

/* Alternate column counts from the sheet: 6 at XS, 8 at SM, 6/5/4/3/2 at LG */
.grid--2 {
  --grid-columns: 2;
}
.grid--3 {
  --grid-columns: 3;
}
.grid--4 {
  --grid-columns: 4;
}
.grid--5 {
  --grid-columns: 5;
}
.grid--6 {
  --grid-columns: 6;
}
.grid--8 {
  --grid-columns: 8;
}
.grid--12 {
  --grid-columns: 12;
}

/* Column spans — mobile first, then sm-/lg- prefixes */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-full { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .sm\:col-1 { grid-column: span 1; }
  .sm\:col-2 { grid-column: span 2; }
  .sm\:col-3 { grid-column: span 3; }
  .sm\:col-4 { grid-column: span 4; }
  .sm\:col-6 { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .lg\:col-1 { grid-column: span 1; }
  .lg\:col-2 { grid-column: span 2; }
  .lg\:col-3 { grid-column: span 3; }
  .lg\:col-4 { grid-column: span 4; }
  .lg\:col-5 { grid-column: span 5; }
  .lg\:col-6 { grid-column: span 6; }
  .lg\:col-8 { grid-column: span 8; }
  .lg\:col-12 { grid-column: span 12; }
}

/* Section rhythm */
.section {
  padding-block: var(--space-11);
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-13);
  }
}

.stack > * + * {
  margin-top: var(--space-4);
}

.rule {
  height: 1px;
  background: var(--color-border);
  border: 0;
}

/* Surfaces */
.surface {
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg);
}

.surface--inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   5. Accessibility helpers
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   6. Site chrome
   The frame every page shares: page shell, the pill control, header and menu
   overlay, newsletter, footer, and the scroll-reveal hook. A page stylesheet
   adds only what is unique to that page.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

/* `clip` rather than `hidden`: hidden would make these a scroll container and
   silently break `position: sticky` on the hero stage. */
html,
body {
  overflow-x: clip;
}

body {
  background: var(--color-ink);
  color: var(--color-white);
}

.skip-link {
  position: absolute;
  left: var(--space-5);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-lime);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Pills & buttons — the one control shape the whole page is built from
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--size-body-04);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
}

.pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-lime);
  flex: none;
  transition: background-color var(--duration-base) var(--ease);
}

.pill--outline {
  border: 1px solid var(--color-lime);
  color: var(--color-white);
  background: transparent;
}

.pill--outline:hover,
.pill--outline:focus-visible {
  background: var(--color-lime);
  color: var(--color-ink);
}

.pill--outline:hover .pill__dot,
.pill--outline:focus-visible .pill__dot {
  background: var(--color-ink);
}

.pill--solid {
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-white);
}

.pill--solid:hover,
.pill--solid:focus-visible {
  background: var(--color-lime);
  border-color: var(--color-lime);
}

/* Without this the lime dot disappears into the lime hover fill */
.pill--solid:hover .pill__dot,
.pill--solid:focus-visible .pill__dot {
  background: var(--color-ink);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: currentColor;
  border-radius: 50%;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button--round {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-lime);
  transition: border-color var(--duration-base) var(--ease),
              background-color var(--duration-base) var(--ease);
}

.icon-button--round:hover {
  border-color: var(--color-lime);
  background: rgba(190, 208, 32, 0.12);
}

.icon-button--round[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color var(--duration-base) var(--ease),
              backdrop-filter var(--duration-base) var(--ease);
}

.site-header.is-stuck {
  background: rgba(1, 43, 38, 0.9);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.site-header__logo img {
  width: 74px;
  height: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-white);
}

.lang-button {
  font-size: var(--size-body-03);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.menu-toggle__label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

@media (min-width: 1024px) {
  .site-header__inner {
    padding: var(--space-5) var(--space-9);
  }
  .site-header__logo img {
    width: 96px;
  }
}

/* --------------------------------------------------------------------------
   Menu overlay — the open header (see mockups/header_open.png)

   Full-bleed forest panel under the fixed header. Six display-size entries in
   a muted sage; the one being pointed at turns lime and unfolds its children.
   The same panel doubles as the search view (.is-search).
   -------------------------------------------------------------------------- */

.menu-panel[hidden] {
  display: none;
}

.menu-panel:focus {
  outline: none;
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--color-forest);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: menu-in var(--duration-base) var(--ease);
}

/* Fine grain, so the flat forest field matches the mockup's texture */
.menu-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes menu-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.menu-panel__inner {
  position: relative;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  width: 100%;
  padding: calc(var(--space-12) + var(--space-4)) var(--space-5) var(--space-11);
}

/* --- Nav view ------------------------------------------------------------- */

.menu-panel__list {
  display: grid;
  gap: clamp(10px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
}

/* The second selector keeps the pages still on the previous menu markup
   (plain links, no submenus) looking right. */
.menu-item__link,
.menu-panel__list > li > a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 64px);
  line-height: 1.12;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--duration-fast) var(--ease);
}

.menu-item.is-open > .menu-item__link,
.menu-item:hover > .menu-item__link,
.menu-item:focus-within > .menu-item__link,
.menu-item__link:hover,
.menu-item__link:focus-visible,
.menu-panel__list > li > a:hover,
.menu-panel__list > li > a:focus-visible {
  color: var(--color-lime);
}

.menu-panel__meta {
  margin-top: var(--space-9);
  color: rgba(255, 255, 255, 0.6);
}

/* Children stay in the flow but collapsed, so the row heights animate */
.menu-sub {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  padding: 0;
  transition: grid-template-rows var(--duration-base) var(--ease);
}

.menu-sub > * {
  overflow: hidden;
}

.menu-item:hover > .menu-sub,
.menu-item:focus-within > .menu-sub,
.menu-item.is-open > .menu-sub {
  grid-template-rows: 1fr;
}

.menu-sub__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6) 0 var(--space-4) 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}

.menu-item:hover .menu-sub__list,
.menu-item:focus-within .menu-sub__list,
.menu-item.is-open .menu-sub__list {
  opacity: 1;
  transform: none;
}

.menu-sub__list a {
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-white);
  transition: color var(--duration-fast) var(--ease);
}

.menu-sub__list a:hover,
.menu-sub__list a:focus-visible {
  color: var(--color-lime);
}

/* --- Search view ---------------------------------------------------------- */

.menu-panel__search {
  display: none;
}

.menu-panel.is-search .menu-panel__search {
  display: block;
}

.menu-panel.is-search .menu-panel__nav {
  display: none;
}

.menu-search__title {
  color: var(--color-lime);
  text-transform: uppercase;
  margin: 0 0 var(--space-9);
}

.menu-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: min(1100px, 100%);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.menu-search__field svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.menu-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--size-body-01);
  line-height: 1.4;
}

.menu-search__input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.menu-search__input:focus {
  outline: none;
}

.menu-search__field:focus-within {
  border-bottom-color: var(--color-lime);
}

/* --- Header while the panel is open --------------------------------------- */

.site-header.is-menu-open,
.site-header.is-menu-open.is-stuck {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header.is-menu-open .site-header__logo {
  opacity: 0;
  pointer-events: none;
}

.site-header__logo {
  transition: opacity var(--duration-base) var(--ease);
}

/* Toggle flips to the solid lime pill of the mockup */
.menu-toggle.is-open {
  background: var(--color-lime);
  border-color: var(--color-lime);
  color: var(--color-ink);
}

.menu-toggle.is-open .pill__dot {
  background: var(--color-ink);
}

.search-toggle.is-active {
  color: var(--color-lime);
}

@media (min-width: 1024px) {
  .menu-panel__inner {
    padding-inline: var(--grid-margin);
    padding-top: calc(var(--space-13) + var(--space-5));
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel,
  .menu-sub,
  .menu-sub__list {
    animation: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.newsletter {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 56svh;
  padding-block: var(--space-13);
  background-image:
    linear-gradient(to bottom, rgba(1, 43, 38, 0.55) 0%, rgba(1, 43, 38, 0.2) 40%, rgba(1, 43, 38, 0.35) 100%),
    url("footer.webp");
  background-size: cover;
  background-position: center top;
}

.site-footer .newsletter {
  background: none;
}

.newsletter__inner {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

.newsletter__inner > * {
  min-width: 0;
}

.newsletter__title {
  color: var(--color-white);
  margin-block: -0.22em;
}

.newsletter__form {
  display: grid;
  gap: var(--space-4);
  max-width: 520px;
}

.field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: var(--space-3);
}

.field__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-size: var(--size-body-01);
  padding: var(--space-2) 0;
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.field__input:focus {
  outline: none;
}

.field:focus-within {
  border-bottom-color: var(--color-lime);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.8);
}

.checkbox input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-lime);
  flex: none;
}

.form-message {
  min-height: 1.2em;
  margin: 0;
  color: var(--color-lime);
}

.form-message.is-error {
  color: var(--color-orange);
}

@media (min-width: 768px) {
  .newsletter__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-11);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background-image:
    linear-gradient(to bottom, rgba(1, 43, 38, 0.2), rgba(1, 25, 22, 0.55)),
    url("footer.webp");
  background-size: cover;
  background-position: center bottom;
}

/* Optional moving backdrop: where the markup supplies it, the video covers the
   still footer.webp above, which stays as the poster/fallback. */
.site-footer__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.site-footer__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(1, 43, 38, 0.55) 0%,
    rgba(1, 43, 38, 0.2) 35%,
    rgba(1, 25, 22, 0.6) 100%
  );
}

.site-footer__panel {
  position: relative;
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-9) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(3, 34, 32, 0.55);
  backdrop-filter: blur(6px);
}

.site-footer__top {
  display: grid;
  gap: var(--space-9);
  margin-bottom: var(--space-13);
}

.site-footer__logo img {
  width: 132px;
  height: auto;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}

.site-footer__cols ul {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__cols a {
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.site-footer__cols a:hover {
  color: var(--color-lime);
}

.site-footer__mid {
  display: grid;
  gap: var(--space-9);
  align-items: end;
  margin-bottom: var(--space-9);
}

.site-footer__claim {
  color: var(--color-lime);
  margin-block: -0.22em;
}

.funders {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  justify-content: space-between;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__bottom p {
  margin: 0;
}

@media (min-width: 768px) {
  .site-footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .site-footer__top {
    grid-template-columns: auto 1fr;
    gap: var(--space-11);
  }
  .site-footer__mid {
    grid-template-columns: 1fr auto;
  }
  /* Scoped to the footer: the funder marks are reused in other columns, where
     this alignment is wrong. */
  .site-footer .funders {
    max-width: 420px;
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .site-footer__panel {
    margin-inline: var(--space-5);
    padding: var(--space-11) var(--space-11) var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

/* Reveal only runs when JS is active, so content can never be stranded at opacity 0 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. Page banner
   The full-bleed 16:9 header every interior page opens with. Pages set the
   image and, where the image is light, add .page-banner--on-light.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Banner

   The export is 1920x1080, so `aspect-ratio` reproduces the mockup exactly at
   desktop width. `min-height` keeps the title block breathing on narrow
   screens, where 16:9 would collapse to ~220px; `max-height` stops it running
   past the fold on tall viewports.
   -------------------------------------------------------------------------- */

.page-banner {
  position: relative;
  display: grid;
  align-content: end;
  /* Without an explicit width, `aspect-ratio` transfers the `max-height` cap
     back into the width and letterboxes the banner on any viewport shorter
     than 16:9 — which is most desktop windows. */
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 62svh;
  max-height: 100svh;
  padding: calc(var(--space-13) + var(--space-4)) var(--space-5) var(--space-7);
  isolation: isolate;
  overflow: hidden;
}

.page-banner__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-banner__media img,
.page-banner__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The mockup sets white type straight onto the photo, which measures 2.6:1
   against the orange glow in the lower left — under AA even for display sizes.
   This scrim sits only over the bottom third, where the title block is, and
   lifts the worst case to ~4.7:1. The second gradient does the same job for the
   fixed header. See "Deviations from the mockup" in the README. */
.page-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(1, 20, 18, 0.75) 0%, rgba(1, 20, 18, 0.48) 30%, rgba(1, 20, 18, 0) 60%),
    linear-gradient(to bottom, rgba(1, 20, 18, 0.5) 0%, rgba(1, 20, 18, 0) 24%);
}

.page-banner__body {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}

.page-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-white);
}

/* Boldonse's line box is far taller than its caps; the negative margin trims it
   so the last baseline lands on the padding edge. Same trick as .hero__title. */
.page-banner__title {
  color: var(--color-white);
  margin-block: -0.22em;
}

@media (min-width: 1024px) {
  .page-banner {
    /* 48px matches the header's inset, so the title aligns under the logo */
    padding: var(--space-13) var(--space-9) var(--space-9);
  }
}

/* Capsules — where the header sits straight on artwork rather than above a
   plain band, the mockups group the controls into capsules so they hold
   together against whatever is behind them. Only needed before .is-stuck
   paints its own bar. */
.site-header--capsules .site-header__logo,
.site-header--capsules .site-header__actions {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
}

/* On a dark ground the fill is invisible and the hairline is what reads; on a
   mid-tone one it is the other way round. Carrying both covers each case. */
.site-header--capsules .site-header__logo {
  padding: var(--space-3) var(--space-5);
  background: rgba(1, 43, 38, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

.site-header--capsules .site-header__actions {
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-color: rgba(255, 255, 255, 0.18);
}

.site-header--capsules {
  border-bottom-color: transparent;
}

/* On a light image a hairline disappears, so the group takes a fill instead. */
.site-header--on-light .site-header__logo,
.site-header--on-light .site-header__actions {
  background: rgba(1, 43, 38, 0.12);
  border-color: transparent;
}

/* Once the bar has its own background the capsules are redundant. Padding stays
   so nothing shifts as they fade. */
.site-header--capsules.is-stuck .site-header__logo,
.site-header--capsules.is-stuck .site-header__actions {
  background: transparent;
  border-color: transparent;
}

.site-header--capsules.is-stuck {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* A light banner needs the scrim anchored in the corner the title sits in,
   rather than a full-width band, so the image keeps its airy top half. */
.page-banner--on-light .page-banner__media::after {
  background: radial-gradient(
    130% 96% at 0% 100%,
    rgba(1, 43, 38, 0.8) 0%,
    rgba(1, 43, 38, 0.55) 26%,
    rgba(1, 43, 38, 0.17) 52%,
    rgba(1, 43, 38, 0) 72%
  );
}

/* --------------------------------------------------------------------------
   8. Scope switch and project list
   The two-way switch and the ruled name+action list. Shared by the homepage's
   projects section and the projects page, which themes the sizes it needs.
   -------------------------------------------------------------------------- */

.switch {
  display: inline-flex;
  padding: var(--space-1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
}

.switch__option {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--size-body-04);
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

.switch__option.is-active {
  background: var(--color-lime);
  color: var(--color-ink);
}

.project-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.project[hidden] {
  display: none;
}

.project__name {
  color: var(--color-white);
  transition: transform var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

.project:hover .project__name {
  color: var(--color-lime);
  transform: translateX(var(--space-3));
}

.projects__action {
  margin-top: var(--space-10);
  text-align: center;
}

@media (min-width: 1024px) {
  .project {
    padding-inline: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   9. News cards and the carousel track
   The snap-scrolling card row. The homepage filters it; the project page uses
   it for related news. The filter controls stay with the homepage.
   -------------------------------------------------------------------------- */

.news__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 620px);
  gap: var(--grid-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: var(--space-3);
  scrollbar-width: none;
}

.news__viewport::-webkit-scrollbar {
  display: none;
}

.news-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  min-height: 300px;
  padding: var(--space-6);
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--duration-base) var(--ease),
              background-color var(--duration-base) var(--ease);
}

.news-card:hover {
  border-color: rgba(190, 208, 32, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

.news-card__title {
  margin: 0;
  padding-right: var(--space-11);
  color: var(--color-white);
}

.news-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  max-width: 46ch;
}

.news-card__link {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-ink);
  font-size: var(--size-body-01);
  text-decoration: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}

.news-card:hover .news-card__link,
.news-card:focus-within .news-card__link {
  opacity: 1;
  transform: scale(1);
}

.news-card__tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  align-self: end;
  color: var(--color-white);
}

.news__empty {
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-6);
}

.carousel-nav {
  display: flex;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   10. Expertise panel
   The full-bleed image panel with a centred eyebrow, title and control. The
   homepage stacks three of them in a pinned stage (those rules stay with the
   homepage); the services pages lay them out normally.
   -------------------------------------------------------------------------- */

.expertise {
  position: relative;
}

.expertise__mask,
.expertise__inner {
  overflow: hidden;
}

.expertise__inner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 60svh;
  padding: var(--space-11) var(--grid-margin);
  text-align: center;
  isolation: isolate;
}

.expertise__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}

.expertise__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Raised from 0.35: the brightest cell highlights left the eyebrow under AA
     on the services panels, and the same three images run on the homepage. */
  background: radial-gradient(66% 62% at 50% 50%, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0) 78%);
}

.expertise:hover .expertise__media {
  transform: scale(1.03);
}

.expertise__body {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.expertise__eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.expertise__title {
  color: var(--color-white);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .expertise__inner {
    min-height: 78svh;
  }
}

/* Segmented control (LCR / LEG-LAR / LMG) */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-lime);
  border-radius: var(--radius-pill);
  background: rgba(1, 25, 22, 0.55);
  backdrop-filter: blur(8px);
}

.segmented__item {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--size-body-04);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

.segmented__item:hover,
.segmented__item:focus-visible,
.segmented__item.is-active {
  background: var(--color-lime);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   11. Colour bands
   Full-width links set in --color-green or --color-lime with forest type. A
   page slants an edge with clip-path where the mockup does; the angle is held
   in vw so it stays constant at any width.
   -------------------------------------------------------------------------- */

.bands {
  display: grid;
}

.band {
  display: grid;
  text-decoration: none;
  color: var(--color-forest);
  transition: filter var(--duration-base) var(--ease);
}

.band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-10);
}

.band__title {
  margin-block: -0.22em;
}

.band__arrow {
  font-size: var(--size-h03);
  transition: transform var(--duration-base) var(--ease);
}

.band:hover .band__arrow,
.band:focus-visible .band__arrow {
  transform: translate(4px, -4px);
}

.band--green {
  background: var(--color-green);
}

.band--lime {
  background: var(--color-lime);
}

/* The wedge rises about 5.6vw across the viewport in the mockups. Expressed in
   vw so the angle holds at any width; the matching padding keeps the heading
   clear of the cut. Slants are modifiers, not part of the colour: a band group
   may slant only its first top edge and its last bottom edge. */
@media (min-width: 1024px) {
  .band--slant-top {
    clip-path: polygon(0 5.6vw, 100% 0, 100% 100%, 0 100%);
    padding-top: 5.6vw;
  }
  .band--slant-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5.6vw), 0 100%);
    padding-bottom: 5.6vw;
  }
  .band__inner {
    padding-block: calc(var(--space-11) * 2);
  }
}

/* --------------------------------------------------------------------------
   12. Portrait card
   Circular photo with a name and a role under it. The team page grids nine of
   them; the course page uses three for its speakers.
   -------------------------------------------------------------------------- */

.member {
  display: grid;
  justify-items: center;
  text-align: center;
}

.member__photo {
  width: min(100%, 342px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.member__name {
  color: var(--color-lime);
  font-size: var(--size-h03);
  line-height: var(--leading-tight);
  margin-top: var(--space-4);
}

.member__role {
  color: var(--color-white);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   13. Dark band and glow
   One ink ground with a lime bloom behind it. The homepage runs news and
   projects inside a single band; the contacts page runs its form in one.
   -------------------------------------------------------------------------- */


.dark-band {
  position: relative;
  background: var(--color-ink);
  isolation: isolate;
  overflow: hidden;
}

.dark-band__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(190, 208, 32, 0.85) 0%, rgba(190, 208, 32, 0.16) 28%, rgba(190, 208, 32, 0) 62%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Page ground
   The ink field with a green bloom hugging the left edge that the pages
   without a banner open on — search results and the privacy policy.
   -------------------------------------------------------------------------- */

.page-ground {
  position: relative;
  background-color: var(--color-ink);
  background-image:
    /* the bloom is anchored off-canvas to the left, as the mockups set it */
    radial-gradient(760px 1500px at -4% 420px,
      rgba(24, 169, 93, 0.72) 0%,
      rgba(24, 169, 93, 0.34) 34%,
      rgba(24, 169, 93, 0) 72%),
    radial-gradient(620px 900px at 104% 1500px,
      rgba(24, 169, 93, 0.16) 0%,
      rgba(24, 169, 93, 0) 70%);
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   15. Underlined form
   Ruled fields on the eight centre columns, with a consent line and a counter
   under them. The course page registers with it; the contacts page writes in.
   -------------------------------------------------------------------------- */

.reg-form {
  display: grid;
  gap: var(--space-8) var(--space-9);
  max-width: 1140px;
  margin: var(--space-11) auto 0;
  text-align: left;
}

.reg-form__field input,
.reg-form__field textarea {
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--color-white);
  font-size: var(--size-body-02);
  resize: vertical;
  transition: border-color var(--duration-base) var(--ease);
}

.reg-form__field input::placeholder,
.reg-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.reg-form__field input:focus,
.reg-form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-lime);
}

.reg-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.reg-form__consent {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.reg-form__consent input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-lime);
  flex: none;
}

.reg-form__count {
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.reg-form__action {
  display: flex;
  justify-content: flex-end;
}

.reg-form .form-message {
  margin: 0;
  color: var(--color-lime);
}

.reg-form .form-message.is-error {
  color: var(--color-highlight);
}

@media (min-width: 768px) {
  .reg-form {
    grid-template-columns: 1fr 1fr;
  }
  .reg-form__field--wide,
  .reg-form__foot,
  .reg-form__action,
  .reg-form .form-message {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   16. Band accordion
   Section 11's colour band, opening onto its own content instead of leading
   away to another page. The title becomes a button carrying `aria-expanded`
   and the panel under it a labelled region; `main.js` opens one band per
   group. Used by the downloads page, the About page's pair and the service
   page's three document bands.
   -------------------------------------------------------------------------- */

.band-fold {
  display: block; /* .band is a grid; the panel has to stack under the row */
}

.band-fold__heading {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.band-fold__toggle {
  display: block;
  width: 100%;
  padding: 0; /* the row inside carries the band's padding, so the button adds none */
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.band-fold__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* .band__inner's padding, split: the row keeps the space above the title and
     the gap under it, and the panel below carries the rest */
  padding-block: var(--space-10) var(--space-8);
}

/* .band__title already trims Boldonse's line box; this only needs a box the
   rotation below can turn. */
.band-fold__title {
  display: inline-block;
  transition: color var(--duration-base) var(--ease);
}

/* The mockups draw no chevron on a fold — no arrow, no plus — so the title
   itself carries the hover: forest deepens to ink, which reads on green and on
   lime alike. Without it nothing marks the band as openable. */
.band-fold__toggle:hover .band-fold__title,
.band-fold__toggle:focus-visible .band-fold__title {
  color: var(--color-ink);
}

/* The button is the full width of the band, so the default ring would trace the
   whole colour field. It goes round the title instead. */
.band-fold__toggle:focus-visible {
  outline: none;
}

.band-fold__toggle:focus-visible .band-fold__title {
  outline: 2px solid var(--color-focus);
  outline-offset: 8px;
}

/* --- The panel ------------------------------------------------------------
   Collapsed with grid-template-rows, so open and close both animate from the
   content's own height with nothing measured in JS. Gated on .js, so with
   scripting off every band renders open rather than shut with no way in.

   The clip between the panel and the content is load-bearing: a 0fr row still
   renders its item's padding, so a shut band would keep the panel's foot. The
   padding lives one level further in, where the clip can cut it away.
   -------------------------------------------------------------------------- */

.js .band-fold__panel {
  display: grid;
  grid-template-rows: 0fr;
  /* visibility, not just height: a collapsed row is only visually collapsed —
     its links stay tabbable and stay in the accessibility tree without this,
     and it has to wait for the close to finish */
  visibility: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease),
              visibility 0s linear var(--duration-slow);
}

.band-fold__clip {
  min-height: 0;
  overflow: hidden;
}

.js .band-fold.is-open > .band-fold__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--duration-slow) var(--ease),
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  /* the reset above cuts every transition to 0.01ms; the delay holding
     visibility back until the close finishes has to go with it */
  .js .band-fold__panel {
    transition-delay: 0s;
  }
}

/* --- Inside the panel -----------------------------------------------------
   Groups stacked down the band, each a label on the first five columns with
   its content on the last seven.
   -------------------------------------------------------------------------- */

.band-fold__body {
  display: grid;
  gap: var(--space-11);
  padding-bottom: var(--space-11);
}

.band-fold__group {
  display: grid;
  gap: var(--space-5);
}

.band-fold__label {
  margin: 0;
  color: inherit;
}

.band-fold__prose {
  display: grid;
  gap: var(--space-5);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .band-fold__body {
    gap: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .band-fold__row {
    /* the mockup sets 200 above the title and 100 below it, and holds the
       lower figure whether the panel under it is open or shut */
    padding-block: calc(var(--space-12) * 2) var(--space-12);
  }

  .band-fold__body {
    gap: var(--space-12);
    padding-bottom: calc(var(--space-13) + var(--space-5));
  }

  /* A slant modifier is padded by the depth of the wedge its clip-path cuts
     away. A band cut at neither edge has no wedge, so it takes that depth at
     the foot instead — without it the bands in one group stand 107px apart.
     Its open panel hands the same depth back, so the foot reads alike whether
     the band is open or shut. */
  .band-fold:not(.band--slant-top):not(.band--slant-bottom) {
    padding-bottom: 5.6vw;
  }

  .band-fold:not(.band--slant-top):not(.band--slant-bottom) .band-fold__body {
    padding-bottom: calc(var(--space-13) + var(--space-5) - 5.6vw);
  }

  /* The mockup tilts a band's title to sit parallel to the slanted edge above
     it, and leaves it upright where that edge is flat. The angle is the slant
     itself: 5.6vw of rise across 100vw, so atan(0.056) = 3.2deg. */
  .band--slant-top .band-fold__title {
    transform: rotate(-3.2deg);
    transform-origin: left center;
  }

  .band-fold__group {
    grid-template-columns: 5fr 7fr;
    gap: var(--grid-gutter);
    align-items: start;
  }
}