/* Caveat (handwritten testimonial captions), stored on the site instead of
   loaded from Google Fonts. SIL Open Font License. */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/caveat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   SORCE - Home page
   Plain CSS, no build step.
   Colour is restricted to the eight brand values plus white;
   the full list is in the :root block directly below.
   ============================================================ */

:root {
  /* ==========================================================
     BRAND PALETTE - the only colours used anywhere on the site.
     Nothing outside this list, plus white. Where a colour needs
     to sit over a photograph or another colour it is used at
     reduced opacity, but it is always one of these values.
     ========================================================== */
  --black:   #000000;
  --navy-900:#042d62;   /* darkest navy  */
  --navy-800:#073d84;   /* header bar    */
  --blue-600:#277abc;   /* mid blue      */
  --blue-400:#43b0f1;   /* bright blue   */
  --grey-500:#545454;   /* neutral grey  */
  --blue-200:#8ccbfa;   /* light blue    */
  --blue-100:#b6e0ff;   /* palest blue   */
  --white:   #ffffff;

  /* --- ILLUSTRATION GREENS -------------------------------------
     The existing SORCE greens, reused as supplied.
     Subject matter only: mangrove, seagrass, and land-based work.
     Never for interface colour - no buttons, links, text, borders
     or backgrounds. The UI stays on the blues above so the site
     keeps one identity and green always means "this is planted".
     ------------------------------------------------------------- */
  --green-900:#083019;  /* deepest shadow, ground line */
  --green-800:#0e572e;  /* trunks, roots               */
  --green-600:#478a0b;  /* mid foliage                 */
  --green-400:#80ba3b;  /* light foliage, new growth   */
  --green-200:#b7df7a;  /* palest leaves, undergrowth  */

  /* --- semantic roles, all pointing at the palette above --- */

  /* The header stays a solid dark bar at all times: the logo artwork is
     white-on-transparent and would vanish against a white header. */
  --bar:      var(--navy-800);
  --bar-deep: var(--navy-900);

  --paper: var(--white);          /* page background          */
  --shell: var(--blue-100);       /* tinted section bands     */
  --ink:   var(--navy-900);       /* headings and body text   */
  --muted: var(--grey-500);       /* secondary text           */
  --line:  var(--blue-200);       /* borders and rules        */
  --accent:      var(--blue-600); /* button fills, large marks */
  --accent-hover:var(--navy-800);
  --accent-light:var(--blue-400); /* accents on dark ground    */
  /* Small text in --accent over the pale band only reaches 3.3:1, so
     anything word-sized on a light ground uses this darker blue (7.5:1
     on the band, 10.4:1 on white) instead. */
  --accent-text: var(--navy-800);

  /* The only colour on the site from outside the brand palette. Error states
     have to read as errors, and no blue does that. 6.4:1 on white. */
  --error: #b3241c;

  /* Placeholder text. --muted is the body grey and reads almost black at
     small sizes; this is the lightest grey that still clears AA (4.5:1). */
  --placeholder: #767676;

  /* type */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /* geometry */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  /* Square everywhere. Pills (buttons, dots) set their own 999px; these two
     drive every card-like surface on the site. */
  --radius: 0;
  --radius-lg: 0;
  --shadow-sm: 0 2px 10px rgba(4, 45, 98, .08);
  --shadow: 0 12px 34px -14px rgba(4, 45, 98, .30);
  --shadow-lg: 0 28px 60px -26px rgba(4, 45, 98, .45);
  --header-h: 76px;
  --wave-h: clamp(60px, 8vw, 120px);   /* height of the hero's wave edge */
  --hero-fade: .38;                    /* even fade over the hero photos */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- base ---------- */

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

/* The hidden attribute is only display:none in the browser's own stylesheet,
   so any display rule of ours beats it - which silently broke .fld-row[hidden].
   Stating it once here means hidden always means hidden. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1.1em; }
a { color: var(--accent-text); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-800); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; gap: .5em;
  padding: 13px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: 999px;
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--accent); --btn-bd: var(--accent); }
.btn-primary:hover { --btn-bg: var(--accent-hover); }

.btn-ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); }
.btn-ghost:hover { --btn-bg: rgba(255,255,255,.14); --btn-bd: #fff; }

.btn-solid-light { --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff; }
.btn-solid-light:hover { --btn-bg: var(--blue-100); }

/* Uses the darker blue so it holds up on the tinted band as well as white. */
.btn-outline { --btn-bg: transparent; --btn-fg: var(--accent-text); --btn-bd: var(--accent-text); }
.btn-outline:hover { --btn-bg: var(--accent-text); --btn-fg: #fff; }

.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn-sm { padding: 9px 18px; font-size: .92rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; text-decoration: none; color: var(--accent-text);
  margin-top: auto;
}
.link-arrow::after { content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--bar);
  transition: background .28s var(--ease), box-shadow .28s var(--ease), height .28s var(--ease);
}
.site-header.is-stuck {
  background: var(--bar-deep);
  box-shadow: 0 4px 20px rgba(4, 45, 98, .32);
}

/* Full-bleed header: it keeps the .wrap gutter but drops the 1200px cap,
   so the nav sits against the right edge of the screen rather than against
   the right edge of the content column. On a wide monitor that is the
   difference between the nav ending 200px short and it lining up with the
   edge of the window. */
.header-inner {
  display: flex; align-items: center; gap: 20px;
  max-width: none;
}

.logo {
  display: inline-flex; align-items: center;
  text-decoration: none; color: #fff; margin-right: auto;
  /* The header is full-bleed so the nav can reach the screen edge, but the
     logo stays lined up with the 1200px content column used by the rest of
     the page. This offset is the gap between the two.
     The percentage resolves against .header-inner's content box, which
     already excludes the scrollbar - using 100vw here would not. */
  margin-left: max(0px, calc((100% - (var(--wrap) - 2 * var(--gutter))) / 2));
}
.logo img {
  height: 52px; width: auto;
  transition: height .28s var(--ease);
}
.site-header.is-stuck .logo img { height: 44px; }
.footer-logo img { height: 60px; width: auto; }

.primary-nav { display: flex; align-items: center; gap: 22px; }
/* Direct child only: the dropdown's own <ul> must not inherit this row. */
.primary-nav > ul {
  display: flex; align-items: center; gap: 22px;
  list-style: none; margin: 0; padding: 0;
}
/* Every top-level item is a flex box, including the ones without a menu.
   .has-menu has to be flex, which blockifies its link so the link's vertical
   padding counts towards the item's height. A plain <li> leaves its link
   inline, where that padding does not affect the line box - so the two ended
   up different heights and their labels sat 1.5px apart. Making them all
   flex keeps every label on the same baseline. */
.primary-nav > ul > li { display: flex; align-items: center; }

/* Top-level nav links only. This must NOT match .nav-cta or the submenu
   links: it is more specific than .btn-sm, so it would silently strip the
   button's padding and font size. */
.primary-nav > ul > li > a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 6px 0; position: relative;
}
/* Top-level items only - the submenu links style themselves. */
.primary-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--blue-400); transition: right .22s var(--ease);
}
.primary-nav > ul > li > a:hover::after { right: 0; }
/* A little more room either side of the label than the default small button.
   flex-shrink:0 stops the flex row squeezing the padding back out again. */
.nav-cta { color: #fff !important; padding-inline: 26px; flex-shrink: 0; }

/* ---------- nav dropdown ---------- */

.has-menu { position: relative; display: flex; align-items: center; gap: 2px; }

/* On a dropdown item the underline belongs to the whole item, not just the
   text, so it runs under the chevron as well. The link's own bar is switched
   off and redrawn on the <li>. */
.has-menu > a::after { display: none; }
.has-menu::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--blue-400);
  transition: right .22s var(--ease);
}
.has-menu:hover::after,
.has-menu:focus-within::after { right: 0; }

.submenu-toggle {
  display: grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  color: #fff; background: none; border: 0; border-radius: 4px;
  cursor: pointer;
}
.submenu-toggle svg { transition: transform .22s var(--ease); }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: -22px;
  min-width: 292px;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--white);
  /* Square, with a single rule of brand colour across the top and a tight,
     low-spread shadow. Squared edges and hairline rules read as more
     considered than a soft rounded card. */
  border-radius: 0;
  border-top: 3px solid var(--navy-800);
  box-shadow: 0 22px 40px -22px rgba(4, 45, 98, .65);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Bridges the gap between the item and the panel so the pointer can travel
   down into the menu without it closing on the way. */
.submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}

.submenu li { margin: 0; }
.submenu li + li { border-top: 1px solid var(--line); }

.submenu a {
  display: block; position: relative;
  padding: 13px 22px;
  border-radius: 0;
  text-decoration: none;
  color: var(--ink); font-size: .92rem; font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), padding-left .16s var(--ease);
}
/* A rule that wipes in from the leading edge on hover, in place of a
   rounded highlight block. */
.submenu a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-400);
  transform: scaleY(0); transform-origin: top;
  transition: transform .16s var(--ease);
}
.submenu a:hover,
.submenu a:focus-visible {
  background: var(--blue-100);
  color: var(--accent-text);
  padding-left: 26px;
}
.submenu a:hover::before,
.submenu a:focus-visible::before { transform: scaleY(1); }

/* Open on hover only where hovering is actually possible, so a tap on a
   touchscreen doesn't leave a menu stuck open. */
@media (min-width: 1001px) {
  @media (hover: hover) {
    .has-menu:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  }
  .has-menu:focus-within .submenu,
  .submenu-toggle[aria-expanded="true"] ~ .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}

.nav-toggle {
  display: none;
  width: 46px; height: 46px; padding: 11px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
}

.hero-slider { position: absolute; inset: 0; z-index: -2; }
/* Each slide sets its own background-image inline (photo first, gradient
   fallback second) so the paths resolve against the page, not this file. */
.hero-slide {
  position: absolute; inset: 0;
  background-image: linear-gradient(160deg, #042d62, #277abc 55%, #43b0f1);
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s linear;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }

/* An even fade over the hero photographs: one flat layer of neutral black
   at low opacity. Deliberately NOT a gradient and NOT tinted - it darkens
   the picture uniformly so white text stays readable without shifting the
   colour of the photograph or favouring one side of it.
   Raise --hero-fade to darken, lower it to show more of the image. */
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, var(--hero-fade));
}

/* No narrower cap than .wrap: the one-line headline needs the full width. */
.hero-content { padding-top: var(--header-h); }
/* Headline stays on one line at every width, so the size is driven by the
   viewport rather than by a fixed scale. The vw figure is tuned to the
   length of this exact sentence - if the wording changes, re-check it. */
.hero-title {
  font-size: clamp(1.15rem, 6.9vw, 5.3rem);
  white-space: nowrap;
  margin-bottom: .3em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.hero-title span { color: var(--blue-200); }
/* Plain line under the slogan: part of the main heading, so search engines
   read what SORCE is; styled quietly so the slogan stays the headline. */
.hero-title .hero-tagline {
  display: block; margin-top: .55rem;
  font-size: clamp(1rem, 1.9vw, 1.35rem); font-weight: 600; letter-spacing: .01em;
  white-space: normal; color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.32rem);
  max-width: 46ch; margin-bottom: 2em;
  color: rgba(255,255,255,.92);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.slider-arrow {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.38); border-radius: 50%;
  cursor: pointer; transition: background .18s var(--ease), transform .18s var(--ease);
}
.slider-arrow:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }
.slider-arrow.dark {
  color: var(--navy-800); background: #fff;
  border-color: var(--line); box-shadow: var(--shadow-sm);
}
.slider-arrow.dark:hover { background: var(--blue-100); }

.slider-dots { display: flex; align-items: center; gap: 10px; }
.slider-dots { gap: 10px; }
.slider-dots button {
  width: 34px; height: 4px; padding: 0;
  background: rgba(255,255,255,.45); border: 0; border-radius: 999px;
  cursor: pointer; transition: background .2s var(--ease), width .2s var(--ease);
}
.slider-dots button[aria-selected="true"] { background: #fff; width: 52px; }
.slider-dots.dark { justify-content: center; margin-top: 26px; }
.slider-dots.dark button { background: var(--line); }
.slider-dots.dark button[aria-selected="true"] { background: var(--accent); }

/* Wave edge sitting on the hero's bottom lip. Fill matches the section
   below (--shell) so the two surfaces read as one continuous flow. */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  line-height: 0; pointer-events: none;
}
.hero-wave svg { width: 100%; height: var(--wave-h); display: block; }

/* ---------- inner page shell ----------
   Used by every page other than the home page: a dark title band under the
   fixed header, then the body area. */

.page-head {
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(67, 176, 241, .22), transparent 62%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
  padding-top: calc(var(--header-h) + clamp(38px, 6vw, 72px));
  padding-bottom: clamp(38px, 6vw, 72px);
}
.page-head h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: #fff; margin: 0;
}
.page-head p { margin: .8em 0 0; color: rgba(255,255,255,.86); max-width: 60ch; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  list-style: none; margin: 0 0 18px; padding: 0;
  font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
}
.breadcrumb a { color: var(--blue-200); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li + li::before { content: "/"; margin-right: .5em; color: rgba(255,255,255,.45); }
.breadcrumb [aria-current="page"] { color: rgba(255,255,255,.75); }

.page-body { padding: clamp(52px, 8vw, 96px) 0; }

.page-placeholder {
  border: 1px dashed var(--line);
  background: var(--shell);
  padding: clamp(34px, 6vw, 64px);
  text-align: center;
}
.page-placeholder h2 { font-size: 1.3rem; margin-bottom: .4em; }
.page-placeholder p { color: var(--muted); margin: 0 auto; max-width: 52ch; }
.page-placeholder p + p { margin-top: 1em; }

/* current page marker in the nav */
.primary-nav > ul > li > a[aria-current="page"]::after,
.has-menu:has(> a[aria-current="page"])::after { right: 0; }

/* ---------- section furniture ---------- */

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 920px; margin: 0 auto clamp(38px, 5vw, 62px); text-align: center; }

/* Centred section titles stay on one line from tablet width up. The size is
   tuned to the longest of them ("Real science. Real impact. Real experience.",
   which needs about 18.3x its own font size in width). Below 900px they are
   allowed to wrap again - holding one line there would shrink them to under
   18px, smaller than body text. */
@media (min-width: 900px) {
  .section-head .section-title {
    white-space: nowrap;
    font-size: clamp(2rem, 4.4vw, 3rem);
  }
  /* Some titles are simply longer than the rule above was sized for, and a
     title that will not wrap pushes the whole page sideways. This lets one
     opt out without loosening the rule for every other section. */
  .section-head .section-title.wraps { white-space: normal; text-wrap: balance; }
  /* the Impact intro line also holds one line from here up */
  .section-impact .section-intro { white-space: nowrap; }
}

/* The small label above each section title - "Who We Are", "Our Expeditions". */
.eyebrow {
  font-size: 1.05rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .6em;
}
.eyebrow.light { color: #fff; }

.section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.section-title.light { color: #fff; }
.section-intro {
  color: var(--muted); font-size: 1.08rem; margin-bottom: 0;
  max-width: 62ch; margin-inline: auto;   /* keep line length readable */
}
.lede { font-size: 1.16rem; }
.section-cta { text-align: center; margin-top: clamp(38px, 5vw, 58px); }

/* ---------- who we are ---------- */

/* Light bands alternate white / tinted down the page, starting white
   directly under the hero:
     about  white | expeditions tint | why DARK
     impact tint  | testimonials white | video DARK
   The hero's wave is filled to match whatever section follows it, so
   if this order changes, change the wave fill in index.html too. */
.section-about {
  position: relative; isolation: isolate; z-index: 3;
  /* No background on the element itself: it overlaps the hero, so a white fill
     here would square off over the wave. The page behind is white anyway, and
     the masked layer below supplies the picture. */
  background: transparent;
  /* rises into the hero by the height of the wave, so the photograph carries
     on through it instead of stopping at a white band */
  margin-top: calc(-1 * var(--wave-h));
  padding-top: calc(clamp(64px, 9vw, 120px) + var(--wave-h));
}
/* Sunset over the bay, faded well back. 18% is the ceiling: the body copy is
   #545454 on white, and over the darkest part of this photograph it drops to
   4.5:1 at 20%. Anything stronger and the text stops meeting AA. */
.section-about::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .30;
  /* cover, so the photograph fills the whole band with no white showing. The
     section is wider than it is tall relative to the picture, so this scales
     the image up and crops the sides - which is the intended "zoom in". */
  background: url("../assets/img/about-band.jpg?v=2") center / cover no-repeat;
  /* the wave curve cut out of the top edge, then solid for the rest */
  -webkit-mask:
    url("../assets/img/wave-mask.svg") top center / 100% var(--wave-h) no-repeat,
    linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
  mask:
    url("../assets/img/wave-mask.svg") top center / 100% var(--wave-h) no-repeat,
    linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
}

/* The hero's own white wave now sits behind this section. It stays as the
   fallback for anything that cannot mask, where the section simply squares off
   against it as before. */
.about-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(34px, 6vw, 76px); align-items: center;
}
.about-copy p:last-of-type { margin-bottom: 1.8em; }
.about-copy .section-title { margin-bottom: .6em; }

.about-media { position: relative; width: min(100%, 380px); justify-self: center; }
/* The clip is filmed upright (9:16), so the frame is too - a 4:5 or 4:3 box
   cut off heads and feet whenever the window was not full width. */
.about-photo {
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  /* deeper than --shadow-lg: the video now sits on a photograph rather than
     white, so it needs more separation to lift off it */
  box-shadow: 0 40px 80px -28px rgba(4, 45, 98, .62), 0 12px 26px -12px rgba(4, 45, 98, .38);
  background-image: linear-gradient(150deg, var(--navy-900), var(--accent) 60%, var(--blue-600));
  background-size: cover; background-position: center;
}

/* Fills the frame. If no video file is present the element is removed by
   main.js and the gradient behind it is what you see. */
.about-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Sits over the frozen first frame. Becomes a pause control once playing,
   so anyone who started it deliberately can stop it again. */
.about-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer; line-height: 0;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.about-play:hover { transform: translate(-50%, -50%) scale(1.07); }
.about-play .icon-pause { display: none; }

/* while it runs, the control fades back and shows a pause glyph on hover */
.about-photo.is-playing .about-play { opacity: 0; }
.about-photo.is-playing:hover .about-play,
.about-photo.is-playing .about-play:focus-visible { opacity: 1; }
.about-photo.is-playing .about-play .icon-play { display: none; }
.about-photo.is-playing .about-play .icon-pause { display: block; }

/* ---------- expeditions ---------- */

.section-expeditions { background: var(--shell); }

/* ---------- expeditions list ----------
   No cards: two labelled groups of hairline-divided rows. Each row is one
   large link that fills with white on hover, so the "card" only appears
   under the pointer instead of six of them sitting there permanently. */

/* Sits above the split and applies to both groups, so neither heading can
   be read as "these are expeditions in Lombok, those are not". */
.exp-note {
  width: fit-content;
  margin: 0 auto clamp(34px, 4.5vw, 52px);
  padding: 0 clamp(14px, 3vw, 30px) 14px;
  border-bottom: 2px solid var(--navy-800);
  text-align: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .01em;
}

.exp-groups { display: grid; gap: clamp(46px, 6vw, 78px); }

.exp-group-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy-800);
}
.exp-group-head h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.exp-count {
  margin-left: auto;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text); font-weight: 700;
  white-space: nowrap;
}

.exp-list { list-style: none; margin: 0; padding: 0; }
.exp-list li + li { border-top: 1px solid var(--line); }

.exp-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(200px, 1fr) minmax(0, 1.25fr) 34px;
  grid-template-areas: "icon name desc go";
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  padding: clamp(20px, 2.3vw, 30px) clamp(14px, 1.8vw, 24px);
  text-decoration: none;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
/* accent rule that wipes down the leading edge, matching the dropdown */
.exp-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-400);
  transform: scaleY(0); transform-origin: top;
  transition: transform .2s var(--ease);
}
.exp-row:hover,
.exp-row:focus-visible {
  background: var(--white);
  box-shadow: 0 20px 38px -26px rgba(4, 45, 98, .55);
}
.exp-row:hover::before,
.exp-row:focus-visible::before { transform: scaleY(1); }

/* One marine motif per expedition, in the slot the numbers used to hold.
   Vector, so it stays crisp; kept small so it marks the row without
   competing with the title. */
.exp-icon {
  grid-area: icon;
  width: 32px; height: 32px;
  object-fit: contain;              /* mixed aspect ratios - see .impact-icon */
  transition: transform .2s var(--ease);
}
.exp-row:hover .exp-icon,
.exp-row:focus-visible .exp-icon { transform: scale(1.12); }

.exp-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2vw, 1.5rem);
  font-weight: 700; line-height: 1.22; letter-spacing: -.012em;
  color: var(--ink);
}
.exp-desc {
  grid-area: desc;
  color: var(--muted); font-size: .97rem; line-height: 1.6;
}
.exp-go {
  grid-area: go; justify-self: end;
  color: var(--accent-text); font-size: 1.3rem; line-height: 1;
  transition: transform .2s var(--ease);
}
.exp-row:hover .exp-go,
.exp-row:focus-visible .exp-go { transform: translateX(6px); }

@media (max-width: 860px) {
  .exp-row {
    grid-template-columns: 30px 1fr 28px;
    grid-template-areas:
      "icon name go"
      "desc desc desc";
    row-gap: 8px;
    column-gap: 12px;
    align-items: start;
  }
  .exp-icon { width: 28px; height: 28px; }
  .exp-go { align-self: center; }
}

/* ---------- why sorce ---------- */

.section-why {
  background:
    radial-gradient(900px 460px at 15% 0%, rgba(67, 176, 241, .26), transparent 62%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 60%, var(--accent));
  color: #fff;
}
/* 250px minimum, not 240: the longest title has to hold one line inside the
   narrowest card the grid can produce. */
.why-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* The text panel is solid white so it reads as its own surface rather than
   a slightly-lighter patch of the navy behind it. */
.why-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 46px -30px rgba(0, 0, 0, .75);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.why-img {
  /* height:auto is required - the width/height attributes on the <img> act as
     presentational hints and would otherwise win over aspect-ratio. */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.why-card:hover .why-img { transform: scale(1.04); }
.why-body {
  background: var(--white);
  padding: 20px 22px 24px;
  border-top: 3px solid var(--blue-400);
}
/* The claim's evidence: a quiet line rather than a button, so the card still
   reads as a statement. The whole card is deliberately not a link - these are
   reasons to believe, not navigation. */
.why-link {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text); text-decoration: none;
}
.why-link span { display: inline-block; transition: transform .2s var(--ease); }
.why-link:hover { color: var(--navy-900); }
.why-link:hover span { transform: translateX(5px); }
.why-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 54px -28px rgba(0, 0, 0, .8);
}
/* All four titles hold one line at the same size, so the cards stay matched.
   Tuned to the longest of them, "Unforgettable experience". */
.why-card h3 {
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--ink);
  margin-bottom: .45em;
}
.why-card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- our impact ---------- */
/* Icon + number + caption. Each icon is its own SVG file so it scales
   cleanly at any size; the grid reflows 4 → 2 → 1 across breakpoints. */

.section-impact { background: var(--shell); }

/* The intro line holds one line from tablet width up (see the media query
   further down); the cap is removed so it has room to. */
.section-impact .section-intro {
  max-width: none;
  font-size: clamp(.95rem, 1.5vw, 1.06rem);
}

.impact-grid {
  display: grid; gap: clamp(28px, 4vw, 44px);
  grid-template-columns: repeat(4, 1fr);
}
.impact-stat { text-align: center; margin: 0; }

/* object-fit:contain matters here - the icon set has mixed aspect ratios
   (the shark is 838x362, the coral 914x967), so a square box would stretch
   them. Contain scales each inside a consistent square instead. */
.impact-icon {
  width: clamp(76px, 9vw, 112px);
  height: clamp(76px, 9vw, 112px);
  object-fit: contain;
  margin: 0 auto 18px;
  transition: transform .3s var(--ease);
}
.impact-stat:hover .impact-icon { transform: translateY(-6px) scale(1.04); }

.impact-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 3.7rem);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--navy-900);
  margin: 0 0 .3em;
  font-variant-numeric: tabular-nums;
}
.impact-label {
  /* This band is tinted now, where --accent would only reach 3.3:1. */
  color: var(--accent-text);
  font-size: 1rem; font-weight: 600;
  margin: 0; max-width: 22ch; margin-inline: auto;
}

/* ---------- testimonials ---------- */

.section-testimonials { background: var(--paper); }
.carousel { display: flex; align-items: center; gap: 18px; }
/* Three cards visible at a time (two on tablet, one on phone). The gap is a
   custom property because main.js needs it to work out how far one step is. */
.carousel { --t-gap: 20px; --t-visible: 3; }
.carousel-viewport { overflow: hidden; flex: 1 1 auto; }
.carousel-track {
  display: flex;
  gap: var(--t-gap);
  transition: transform .55s var(--ease);
}
.t-slide {
  flex: 0 0 calc((100% - (var(--t-visible) - 1) * var(--t-gap)) / var(--t-visible));
  margin: 0;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  overflow: hidden;
}
.t-photo {
  width: 100%; aspect-ratio: 4 / 3;
  background-image: linear-gradient(150deg, var(--accent), var(--navy-900));
  background-size: cover; background-position: center;
}
.t-slide figcaption {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; flex: 1;
}
/* Every quote is cut to the same number of lines, so all the cards match
   height whatever the quote length. The fade only appears on cards that
   actually have more text - main.js adds .is-clamped after measuring. */
/* 3 lines total: two read cleanly, the third fades out. */
.carousel { --t-lines: 3; }

.t-slide blockquote {
  margin: 0 0 14px; padding: 0;
  font-family: var(--font-display);
  font-size: 1.02rem; line-height: 1.55;
  color: var(--ink); position: relative;
  flex: 1;
}
.t-slide.is-clamped blockquote {
  max-height: calc(var(--t-lines) * 1.55em);
  overflow: hidden;
}
/* Quotes that run to several paragraphs. The clamp is a max-height, so it
   still works; these just need their own spacing. */
.t-slide blockquote p { margin: 0 0 .75em; }
.t-slide blockquote p:last-child { margin-bottom: 0; }
.t-modal-card blockquote p { margin: 0 0 1em; }
.t-modal-card blockquote p:last-child { margin-bottom: 0; }

/* The fade covers only the final line. At 2.2em it reached back into the
   third line and made two of the four lines hard to read. */
.t-slide.is-clamped blockquote::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.55em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 80%);
  pointer-events: none;
}

/* the visible affordance; also the keyboard route into the dialog */
.t-more {
  align-self: center;
  margin: 0 0 14px; padding: 0;
  background: none; border: 0;
  font: inherit; font-size: .93rem; font-weight: 700;
  color: var(--accent-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.t-more:hover { color: var(--blue-600); }
.t-slide:not(.is-clamped) .t-more { display: none; }

/* whole card is a target for the mouse; keyboard users get the button */
.t-slide.is-clamped { cursor: pointer; }
.t-slide.is-clamped:hover { border-color: var(--blue-200); }
/* The quote mark sits on the figcaption, NOT inside the blockquote. Inside,
   it ate ~35px of the 4-line clamp and left room for only two lines of text. */
.t-slide figcaption::before {
  content: "\201C"; display: block; flex: none;
  font-family: var(--font-display);
  font-size: 2.8rem; line-height: .6; color: var(--blue-200); margin-bottom: 10px;
}
.t-slide cite {
  font-style: normal; display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.t-slide cite strong { color: var(--navy-900); }
.t-slide cite span { color: var(--muted); font-size: .92rem; }

/* ---------- testimonial dialog ---------- */

.t-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.t-modal[hidden] { display: none; }

.t-modal-veil {
  position: absolute; inset: 0;
  background: rgba(4, 45, 98, .72);
  backdrop-filter: blur(3px);
}

.t-modal-card {
  position: relative;
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88vh, 760px);
  display: block;                 /* the photo floats inside the body */
  background: var(--white);
  border-top: 3px solid var(--blue-400);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
}
/* Shown whole: a fixed width and a free height, so portrait and landscape
   photographs both arrive uncropped and the quote wraps around them. */
.t-modal-photo {
  float: left; width: min(280px, 44%); height: auto;
  margin: 6px 24px 16px 0;
  background: var(--blue-100);
}
.t-modal-body {
  padding: clamp(24px, 3vw, 38px);
  max-height: min(88vh, 760px);
  overflow-y: auto;              /* long quotes scroll inside the dialog */
  overscroll-behavior: contain;
}
.t-modal-body::after { content: ""; display: block; clear: both; }

@media (max-width: 620px) {
  .t-modal-photo { float: none; width: 100%; margin: 0 0 18px; }
}
.t-modal-body blockquote {
  margin: 0 0 20px; padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.6;
  color: var(--ink);
}
.t-modal-body blockquote::before {
  content: "\201C"; display: block;
  font-size: 3rem; line-height: .6; color: var(--blue-200); margin-bottom: 10px;
}
.t-modal-body cite { font-style: normal; display: flex; flex-direction: column; }
.t-modal-body cite strong { color: var(--navy-900); }
.t-modal-body cite span { color: var(--muted); font-size: .92rem; }

.t-modal-close {
  z-index: 2;
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px;
  font-size: 1.7rem; line-height: 1;
  color: var(--white); background: rgba(4, 45, 98, .55);
  border: 0; cursor: pointer;
}
.t-modal-close:hover { background: var(--navy-900); }

/* Left over from when the dialog was a two-column grid with a cropped photo
   panel; the 16/9 here was squashing the picture on a phone. */

/* ---------- video ---------- */

.section-video {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
  position: relative; isolation: isolate; overflow: hidden;
}

/* Bubbles in the gutters beside the film. Decorative, so they sit behind
   everything and never take a click. They go once the layout is narrow enough
   that there are no gutters left for them to occupy. */
.video-bubbles {
  position: absolute; bottom: 0; z-index: -1;
  /* Exactly the gutter beside the content column, less a little breathing
     room - so the bubbles can never reach across the film however wide or
     narrow the window is. */
  width: min(190px, max(0px, (100vw - var(--wrap)) / 2 - 18px));
  /* Rising from the foot rather than filling the band: bubbles that reach the
     top of the section read as wallpaper, where a short trail beside the film
     reads as something happening in the water. */
  height: 58%;
  object-fit: cover; object-position: bottom;
  pointer-events: none; user-select: none;
  /* and fading out as they rise, so the trail ends rather than being cut */
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
          mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  opacity: .85;
}
.video-bubbles-left { left: 0; }
/* mirrored, so the two streams lean away from the film rather than both leaning
   the same way */
.video-bubbles-right { right: 0; transform: scaleX(-1); }

@media (max-width: 1320px) { .video-bubbles { display: none; } }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background-image: linear-gradient(150deg, var(--navy-900), var(--accent) 70%, var(--blue-600));
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  display: grid; place-items: center; gap: 14px;
  background: none; border: 0; color: #fff; cursor: pointer;
  font: inherit; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .86rem;
  transition: transform .2s var(--ease);
}
.video-play:hover { transform: scale(1.05); }
.video-play svg { transition: opacity .2s var(--ease); }

.video-endcard {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 20px;
  padding: 30px; text-align: center;
  background: rgba(4, 45, 98, .88); backdrop-filter: blur(4px);
  color: #fff;
}
.video-endcard[hidden] { display: none; }
.video-endcard h3 { font-size: clamp(1.3rem, 3vw, 2rem); color: #fff; margin: 0; }
.video-endcard-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.video-endcard-close {
  position: absolute; top: 16px; right: 18px;
  width: 40px; height: 40px; font-size: 1.6rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%; cursor: pointer;
}

/* ---------- final CTA ---------- */

.final-cta {
  padding: clamp(60px, 8vw, 104px) 0;
  text-align: center; color: #fff;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(67, 176, 241, .30), transparent 60%),
    linear-gradient(120deg, var(--accent), var(--blue-600) 55%, var(--navy-800));
}
.final-cta h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  /* 34ch holds the sentence on two lines on desktop; balance evens the two
     halves so neither is left a runt. Narrow screens still wrap freely. */
  max-width: 34ch; margin: 0 auto .9em; color: #fff;
  text-wrap: balance;
}
/* The expedition's name holds one line. The lead-in before it ("Ready to join
   the") is free to wrap ahead of it, which is the break we want - the longest
   name, Conservation Research Assistant, does not fit beside it on a laptop.
   The 34ch cap has to come off for those, or the name is forced to break
   however unbreakable it is declared. */
.final-cta h2:has(.cta-name) { max-width: none; }
.cta-name { white-space: nowrap; }
/* Below about 560px even the name alone can outrun the screen, and a heading
   running off the side is worse than one that wraps. */
@media (max-width: 560px) { .cta-name { white-space: normal; } }

.final-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* Two buttons may differ - one leads, one follows. Three or more are a set
   of equal choices, and one odd one out reads as a mistake, so every button
   in a row of three takes the same solid white style, turning pale blue on
   hover (as .btn-solid-light does). */
.final-cta-actions:has(> .btn:nth-child(3)) .btn {
  --btn-bg: #fff; --btn-fg: var(--navy-800); --btn-bd: #fff;
}
.final-cta-actions:has(> .btn:nth-child(3)) .btn:hover {
  --btn-bg: var(--blue-100); --btn-bd: var(--blue-100);
}
/* The heading carries its own margin, but the note does not - so where one
   sits between the two, the buttons ended up against the last line of it.
   Adjacent rather than a margin on the note itself, so a note that happens to
   be the last thing in the block does not gain a trailing gap. */
.final-cta-note + .final-cta-actions { margin-top: clamp(26px, 3vw, 38px); }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-900); color: rgba(255,255,255,.78); }
.footer-grid {
  display: grid; gap: clamp(28px, 4vw, 44px);
  /* Four tracks are kept although only two are filled: the brand sits left,
     Get in touch sits right, and the middle two stay deliberately empty. */
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  padding-top: clamp(52px, 7vw, 84px);
  padding-bottom: clamp(40px, 5vw, 60px);
}
.footer-brand p { font-size: .95rem; margin: 18px 0; }
.logo.light { color: #fff; margin-bottom: 4px; }
.footer-col h3 {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

/* contact rows: icon and text on one baseline, icon aligned to the first line */
.footer-contact { grid-column: 4; }   /* keep it in the last track */

/* Awards sit in the two middle tracks. The badge backgrounds have been cut
   out, so they sit straight on the navy with no tile behind them. */
.footer-awards { grid-column: 2 / 4; }
.award-row {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
}
.award {
  display: grid; place-items: center;
  flex: 0 0 auto;
}
/* Size from the image, not the box. Constraining the image to 100% of a
   container that has no width of its own collapses both to zero. */
.award img {
  height: 124px; width: auto;
  max-width: none;
  display: block;
}
/* the Volunteer World badge is a third-party embed and renders its own
   background, so it keeps a light tile to stay readable on the navy */
/* No tile: the badge is served with transparent=true and sets no background
   of its own, so the navy shows through. Note its text is #6a6a6a, which is
   only about 2.5:1 against the footer - see the note in the README. */
.award-embed {
  padding: 0;
  height: 124px;
}
/* The badge is generated at 140x100; scaling it up would soften the text, so
   it stays at native size and is centred in a tile the same height as the
   other two. */
.award iframe { border: 0; display: block; width: 140px; height: 100px; }

.footer-contact li,
.footer-contact li a {
  display: flex; align-items: flex-start; gap: 10px;
}
.footer-contact svg { flex: 0 0 auto; margin-top: 2px; }
.footer-place { color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-col a, .footer-brand a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--blue-200); }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  color: rgba(255,255,255,.78);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
/* the glyphs are drawn in currentColor, so they follow the link on hover */
.socials svg { display: block; width: 19px; height: 19px; }
.socials a:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--blue-200);
  color: #fff;
}

/* One grid holds the label, the input and the button. The row wrapper is
   display:contents so its children join this grid directly - that lets the
   label sit in the input's column only, and be centred over the input rather
   than over the input and the Join button together. */
.newsletter {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
}
/* placed explicitly - auto-placement would drop the input beside the label */
.newsletter label {
  grid-column: 1; grid-row: 1; text-align: center;
  font-size: .82rem; margin-bottom: 8px; color: rgba(255,255,255,.7);
}
.newsletter-row { display: contents; }
.newsletter input { grid-column: 1; grid-row: 2; }
.newsletter .btn   { grid-column: 2; grid-row: 2; }
.newsletter input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 14px; font: inherit; font-size: .92rem;
  color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
}
.newsletter input::placeholder { color: rgba(255,255,255,.45); }

.sub-footer { border-top: 1px solid rgba(255,255,255,.12); }
.sub-footer-inner {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  padding-block: 22px;
}
.sub-footer p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.6); }
.sub-footer ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.sub-footer a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .86rem; }
.sub-footer a:hover { color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-awards { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; max-width: 460px; }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  /* justify-self, not auto margins: an auto margin makes a grid item size to
     its content, and this one's content is a background image with no
     intrinsic width - so the whole video collapsed to nothing on a phone. */
  .about-media { order: -1; width: 100%; max-width: 300px; justify-self: center; }

  /* impact: 4 → 2 across */
  .impact-grid { grid-template-columns: repeat(2, 1fr); }

  .carousel { --t-visible: 2; }          /* two across on tablet */
}

/* Six items, three of them with dropdowns, make the desktop nav much wider
   than it started out, so it collapses to the burger earlier (was 820px). */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 12px var(--gutter) 26px;
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a,
  .site-header .primary-nav a { color: var(--navy-800); }
  .primary-nav > ul > li:not(.has-menu) { display: block; }
  .primary-nav > ul > li > a {
    display: block; padding: 15px 4px;
    border-bottom: 1px solid var(--line); font-size: 1.02rem;
  }
  .primary-nav > ul > li > a::after { display: none; }
  .nav-cta { margin-top: 18px; justify-content: center; color: #fff !important; }

  /* Dropdown becomes an inline accordion rather than a floating panel. */
  .has-menu { flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
  .has-menu > a { flex: 1 1 auto; border-bottom: 0 !important; }
  .submenu-toggle {
    width: 48px; height: 48px; flex: 0 0 auto;
    color: var(--navy-800);
  }
  .submenu {
    position: static; width: 100%;
    opacity: 1; visibility: visible; transform: none;
    background: none; box-shadow: none;
    padding: 0 0 12px 14px;
    display: none;
  }
  .submenu::before { display: none; }
  .submenu-toggle[aria-expanded="true"] ~ .submenu { display: block; }
  .submenu li + li { border-top: 0; }
  .submenu a {
    white-space: normal;
    padding: 11px 14px;
    font-weight: 500;
    color: var(--muted);
    border-left: 2px solid var(--line);
  }
  .submenu a::before { display: none; }
  .submenu a:hover,
  .submenu a:focus-visible {
    padding-left: 14px;
    border-left-color: var(--blue-400);
  }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { min-height: 92svh; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .final-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .carousel { gap: 8px; --t-visible: 1; }   /* one across on a phone */
  .slider-arrow { width: 40px; height: 40px; font-size: 1.4rem; }
  .sub-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Small phones (375px target): impact stacks to a single column,
   icons stay crisp because they are vector. */
@media (max-width: 460px) {
  .impact-grid { grid-template-columns: 1fr; gap: 34px; }
  .impact-icon { width: 84px; }
  .impact-number { font-size: 3rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-slide { transform: none; }
  .pillar:hover { transform: none; }
  .mvv-row:hover { transform: none; }
}


/* ============================================================
   ABOUT PAGE
   Sections reuse the homepage rhythm (.section / .section-head /
   .eyebrow / .section-title) so the two pages stay in step. Every
   card here is squared - see --radius.
   ============================================================ */

.section-title.light,
.section-intro.light { color: #fff; }
.section-intro.light { color: #fff; }

/* ---------- page hero ---------- */

.page-hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(67, 176, 241, .22), transparent 62%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 82px);
}
/* The reef illustration is opt-in: only pages that ask for it by name carry
   it, so the rest are free to take a photograph of their own. */
.page-hero-reef::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/img/about-hero.png") bottom center / 100% auto no-repeat;
  opacity: .5;
}

/* On a narrow screen the text runs the full width, so the picture drops back
   to a hint rather than sitting behind the words. */
@media (max-width: 860px) {
  /* Drawn at 1.5x and hung off both edges, so the corals keep a readable size
     rather than shrinking to a smudge on a narrow screen. */
  .page-hero-reef::before { background-size: 150% auto; }
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; margin: 0; }
.page-hero-lede {
  margin: .7em 0 0; max-width: 46ch;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: #fff;
}

/* ---------- photographic page headers ----------

   Two treatments, so they can be compared on the live pages.

   The default lays navy over the whole photograph. Adding page-hero-fade
   instead lets the photograph sit strongest on the right and feather away to
   nothing as it nears the words, so the left-hand side is clean navy rather
   than a picture under a wash. It is the image that fades, not a veil that
   thickens, which is why type over it stays crisp instead of sitting in fog.

   Knobs, set per page on the element itself so one header can be tuned
   without touching this file or any other page:

     --hero-photo       the picture
     --hero-tint        how heavily the navy sits over it
     --hero-focus       which part survives the crop - any background-position
     --hero-fade-start  (fade only) where the photograph begins to appear
     --hero-fade-end    (fade only) where it reaches full strength

   Defaults are set so that even a pure white photograph leaves white text
   above 4.5:1 everywhere type can reach. */

.page-hero-photo {
  --hero-tint: .84;
  --hero-focus: center;
}
.page-hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-photo);
  background-position: var(--hero-focus);
  background-size: cover;
  background-repeat: no-repeat;
}
.page-hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg,
    rgba(4, 45, 98, var(--hero-tint)) 0%,
    rgba(7, 61, 132, calc(var(--hero-tint) * .88)) 52%,
    rgba(4, 45, 98, calc(var(--hero-tint) * .50)) 100%);
}
@media (max-width: 860px) {
  .page-hero-photo::after {
    background: linear-gradient(180deg,
      rgba(4, 45, 98, var(--hero-tint)) 0%,
      rgba(4, 45, 98, calc(var(--hero-tint) * .92)) 100%);
  }
}

/* --- the alternative: the photograph feathers in from the right --- */

.page-hero-fade {
  /* Where the photograph's own box begins. Everything left of this is navy and
     nothing is drawn there, so the picture is only ever scaled to the part of
     the header it actually occupies - a 1200px photograph is drawn at about
     1200px rather than stretched across a 1920px screen. */
  --hero-photo-from: 30%;
  /* These two are measured across that box, not the page. The mask is fully
     transparent at the box's left edge, so the picture can never show a cut -
     it is already invisible by the time its own edge arrives. */
  --hero-fade-start: 11%;
  --hero-fade-end: 69%;
  --hero-tint: .45;
}
.page-hero-fade::before {
  z-index: -1;
  inset: 0 0 0 var(--hero-photo-from);
  /* wash first, photograph underneath it, both cut by the same mask */
  background-image:
    linear-gradient(rgba(4, 45, 98, var(--hero-tint)), rgba(4, 45, 98, var(--hero-tint))),
    var(--hero-photo);
  background-position: center, var(--hero-focus);
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  /* The first stop is transparent at 0, not at --hero-fade-start: that is what
     guarantees the box's own left edge is invisible. The flat run to
     --hero-fade-start then holds it clear until the feather should begin. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, transparent var(--hero-fade-start), #000 var(--hero-fade-end));
  mask-image: linear-gradient(to right,
    transparent 0%, transparent var(--hero-fade-start), #000 var(--hero-fade-end));
}
/* the flat veil is not wanted here - the mask is doing that job */
.page-hero-fade::after { display: none; }

/* Narrow screens give the words the full width, so there is no empty side for
   the picture to live in. It covers the whole header, held back by a heavier
   wash, and the mask is dropped. */
@media (max-width: 860px) {
  .page-hero-fade { --hero-tint: .82; }
  .page-hero-fade::before {
    inset: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- lead (intro copy + photo) ---------- */

.intro-grid {
  display: grid;
  /* minmax(0, ...) matters: an fr track's floor is its min-content, so a long
     unbreakable heading in the copy column could squeeze the photo to a sliver. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 6vw, 76px); align-items: stretch;
}
/* Picture on the left, words on the right. Only the visual order changes -
   the copy still comes first in the markup, so it is read first. The tracks
   swap too, so the text keeps the wider of the two columns. */
.intro-flip { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.intro-flip .intro-media { order: -1; }

.intro-copy .section-title {
  margin-bottom: .55em;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}
@media (min-width: 1120px) {
  .intro-copy .section-title.nowrap { white-space: nowrap; }
}
.intro-copy p { color: var(--muted); }
.intro-mission {
  margin-top: 1.4em; padding: 18px 22px;
  border-left: 4px solid var(--accent);
  background: var(--shell); color: var(--ink) !important;
}
.intro-media img { display: block; width: 100%; height: auto; }

/* ---------- tinted "What you'll do" (Eco-Venture trial) ----------

   The opening stays white. The section below the At a Glance bar takes the
   pale blue instead, so the navy bar has white above it and a tint below
   rather than white on both sides. */

/* two classes, so this beats .section-do no matter which comes first */
.section-do.section-do-tint { background: var(--shell); }

/* ---------- the opening as a card lifted into the header ----------

   The opening sits in a white card that rises into the header, so the two
   read as one composition rather than a light block stacked under a dark one.
   The rule inside its edge is what stops it being a plain white box - it is
   drawn on a pseudo-element rather than as a border, so it can sit inset from
   the card's edge instead of on it.

     --card-lift       how far the card rises into the header
     --card-rule-inset how far the rule sits in from the card's edge */

.page-hero.has-card-below { padding-bottom: clamp(110px, 13vw, 168px); }

.section-lead.has-card { padding-top: 0; }
.intro-card {
  --card-lift: clamp(-104px, -8vw, -58px);
  --card-rule-inset: 0.5cm;
  --card-rule-weight: 2px;
  position: relative; z-index: 2;
  margin-top: var(--card-lift);
  background: var(--paper);
  /* the content clears the rule, rather than running up against it */
  padding: clamp(30px, 3.4vw, 46px);
}
.intro-card::before {
  content: ""; position: absolute; inset: var(--card-rule-inset);
  border: var(--card-rule-weight) solid var(--blue-200);
  pointer-events: none;
}
@media (max-width: 900px) {
  .intro-card {
    --card-lift: -40px;
    --card-rule-inset: 0.3cm;
    padding: clamp(22px, 5vw, 32px);
  }
}

/* ---- the opening card raised instead of ruled ----

   No line inside the edge; the card is simply standing off the page. It is
   already lifted into the header, so no extra translate is needed - the
   shadow alone does the work. A little deeper than the site's usual shadow,
   because the top of the card sits over navy where a soft shadow would be
   invisible, and only its lower half falls on white. */

.intro-card.is-raised::before { content: none; }
.intro-card.is-raised {
  box-shadow:
    0 2px 6px rgba(4, 45, 98, .10),
    0 22px 48px -14px rgba(4, 45, 98, .34);
}

/* ---------- a mosaic in place of one photograph ----------

   Three pictures in an uneven grid: a tall frame beside two stacked. It shows
   the range of what a course involves, which one wide shot cannot, and it
   means no single photograph has to be good enough to carry the section. */

/* Six photographs: one large across two columns and two rows, two down
   the right beside it, three along the bottom. */
.intro-mosaic {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  aspect-ratio: 1 / 1.45;              /* about the height of the copy beside it */
  /* The grid would otherwise stretch this to the height of the text beside
     it, and a fixed ratio then drives the width out past the column - wider
     the narrower the screen gets. Sizing from the width instead keeps it in
     its track at every size. */
  align-self: center;
  width: 100%; height: auto; max-width: 100%;
}
.intro-mosaic figure { margin: 0; position: relative; overflow: hidden; }
.intro-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
.intro-mosaic figure:not(:first-child) .mosaic-cap { padding: 18px 10px 8px; font-size: .68rem; }
.mosaic-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 22px 14px 10px;
  background: linear-gradient(to top, rgba(4, 45, 98, .88), rgba(4, 45, 98, 0));
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 900px) { .intro-mosaic { aspect-ratio: 1.2 / 1; } }

/* ---------- filmstrip ----------

   Four pictures reaching both edges of the window, each labelled. No single
   one carries the band, so ordinary photographs work here. */

.photo-filmstrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--navy-900);
}
.photo-filmstrip figure {
  margin: 0; position: relative; overflow: hidden;
  /* A height rather than a ratio. With a portrait ratio the band grew taller
     the wider the screen got - at 1440 it filled half the window, which is
     far too much for a supporting strip. A clamped height keeps it a band. */
  height: clamp(150px, 15vw, 220px);
}
.photo-filmstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-filmstrip figcaption {
  position: absolute; inset: auto 0 0 0; padding: 24px 16px 13px;
  background: linear-gradient(to top, rgba(4, 45, 98, .92), rgba(4, 45, 98, 0));
  color: #fff;
}
.fs-t {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; margin-bottom: .15em;
}
.fs-d { display: block; font-size: .78rem; color: var(--blue-200); line-height: 1.4; }
/* Once the frames are small, the one-line description takes two lines and
   covers most of the picture. The label alone still says what the frame is. */
@media (max-width: 1000px) {
  .photo-filmstrip .fs-d { display: none; }
  .photo-filmstrip figcaption { padding: 20px 14px 11px; }
}
@media (max-width: 860px) {
  .photo-filmstrip { grid-template-columns: repeat(2, 1fr); }
  .photo-filmstrip figure { height: clamp(130px, 26vw, 170px); }
}

/* ---------- four pillars ---------- */

.section-pillars { background: var(--shell); }

/* The stock 62ch cap breaks this line into three. It needs about 88 characters
   a line to sit on two; balance then evens the halves. */
.section-pillars .section-intro { max-width: 92ch; text-wrap: balance; }
.pillar-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px);
}
/* The whole card is the target, but only the heading holds the link: its
   ::after is stretched over the card. That keeps one clear link in the
   accessibility tree - not three pointing at the same place - and leaves the
   body copy selectable. */
.pillar {
  position: relative;
  background: var(--paper); padding: clamp(24px, 2.6vw, 32px);
  border-top: 4px solid var(--accent);
  display: flex; flex-direction: column; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pillar h3 a { color: inherit; text-decoration: none; }
.pillar h3 a::after { content: ""; position: absolute; inset: 0; }
.pillar:hover {
  border-top-color: var(--navy-800);
  box-shadow: 0 12px 28px rgba(4, 45, 98, .16);
  transform: translateY(-3px);
}
.pillar:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.pillar:focus-within {
  outline: 3px solid var(--navy-800); outline-offset: 3px;
}
.pillar:focus-within h3 a:focus-visible { outline: none; }   /* the card shows it */
.pillar-icon {
  display: block; height: 96px; width: auto; max-width: 100%;
  margin: 0 auto 18px;                 /* centred over the card */
}
.pillar h3 { font-size: 1.18rem; margin: 0 0 .5em; color: var(--accent-text); }
.pillar p { margin: 0 auto; color: var(--muted); font-size: .97rem; max-width: 34ch; }

/* ---------- mission & vision ---------- */

/* A reef photograph sits under the band for depth. The navy overlay never
   drops below 94% opacity and the blue highlight sits UNDER it, so at most 6%
   of the picture reaches the surface. That bounds the ground at rgb(22,73,139)
   even if the photo were pure white - the text contrast holds whatever image
   is used here.
   NB: url() resolves against this stylesheet, so the path climbs out of css/. */
.section-mvv {
  position: relative; isolation: isolate;
  background: var(--navy-900);
  color: #fff;
}
.section-mvv::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(67, 176, 241, .55), transparent 62%),
    url("../assets/img/mvv-band.jpg") center / cover no-repeat;
}
.section-mvv::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(165deg, rgba(4, 45, 98, .97), rgba(7, 61, 132, .94));
}

.mvv-sub {
  margin: clamp(44px, 6vw, 76px) 0 0;
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid rgba(255,255,255,.22);
  text-align: center;
}
.mvv-sub h3 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .35em; }
.mvv-sub p { margin: 0 auto; color: rgba(255,255,255,.86); max-width: 60ch; }

.mvv-list {
  list-style: none; padding: 0;
  /* narrower than the wrap, so a hovered row can grow without pushing the
     page sideways */
  max-width: 980px;
  margin: clamp(22px, 3vw, 34px) auto 0;
}
.mvv-list li + li { border-top: 1px solid rgba(255,255,255,.18); }

.mvv-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 20px;
  transform-origin: center;
  transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease;
}

/* The rule steps through the palette blues down the list, then thickens and
   lengthens on hover. */
.mvv-row::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; background: var(--blue-400);
  transition: top .24s ease, bottom .24s ease, width .24s ease;
}
.mvv-list li:nth-child(4n+1) .mvv-row::before { background: var(--blue-100); }
.mvv-list li:nth-child(4n+2) .mvv-row::before { background: var(--blue-200); }
.mvv-list li:nth-child(4n+3) .mvv-row::before { background: var(--blue-400); }
.mvv-list li:nth-child(4n+4) .mvv-row::before { background: var(--blue-600); }
.mvv-row:hover::before { top: 6%; bottom: 6%; width: 5px; }

/* Scale, not font-size: growing the type directly would reflow the list and
   shove every row below it down the page. */
.mvv-row:hover {
  transform: scale(1.045);
  background: rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  z-index: 2;
}

.mvv-name {
  font-size: clamp(.92rem, 1.25vw, 1rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--blue-200);
  transition: color .24s ease;
}
.mvv-row:hover .mvv-name { color: #fff; }
.mvv-desc {
  font-size: clamp(.95rem, 1.4vw, 1.02rem);
  color: rgba(255,255,255,.86); margin: 0;
}
.mv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px);
}
.mv-card {
  background: rgba(4, 45, 98, .42);
  border: 1px solid rgba(255,255,255,.28);
  padding: clamp(26px, 3vw, 38px);
}
.mv-card h3 {
  color: #fff; font-size: 1.35rem; margin: 0 0 .55em;
  padding-bottom: .45em; border-bottom: 2px solid var(--blue-400);
}
.mv-card p { margin: 0; color: rgba(255,255,255,.92); }

/* ---------- where we are ---------- */

.section-where {
  position: relative; isolation: isolate;
  background: var(--shell);
}
.section-where::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/img/world-map.svg") center / contain no-repeat;
  opacity: .07;
}
.where-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 62px); align-items: start;
}
.where-copy p { color: var(--ink); }
.where-copy .btn { margin-top: 10px; }

.map-thumb {
  display: block; position: relative;
  border: 1px solid var(--blue-200); background: var(--paper);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.map-thumb img { display: block; width: 100%; height: auto; }
.map-thumb-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff;
  border-top: 1px solid var(--accent);
  transition: background-color .2s ease, border-color .2s ease;
}
.map-thumb:hover { border-color: var(--accent-hover); box-shadow: 0 10px 26px rgba(4,45,98,.16); }
.map-thumb:hover .map-thumb-note {
  background: var(--accent-hover); border-top-color: var(--accent-hover);
}
.map-thumb:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 3px; }

.section-mapfull { background: var(--shell); }
.modal-card > .section.section-mapfull { padding: 0; background: var(--paper); }
.modal-card .section-mapfull .wrap { padding: 0; max-width: none; }
.modal-card .map-full-fig img { border: 0; }
/* Below about 820px the map is wider than the dialog, so it pans inside its
   own scroller rather than shrinking until the legend is unreadable. */
.map-full-fig { margin: 0; overflow-x: auto; }
.map-full-fig img {
  display: block; width: 100%; min-width: 820px; height: auto;
  border: 1px solid var(--blue-200);
}
.fact-list {
  margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--blue-200);           /* shows through as hairlines */
  border: 1px solid var(--blue-200);
}
.fact { background: var(--paper); padding: 16px 18px; }
.fact dt {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3em;
}
.fact dd { margin: 0; font-weight: 800; color: var(--accent-text); font-size: 1.06rem; }

/* ---------- why Indonesia ---------- */

.section-indo { background: var(--paper); }
.indo-lede { max-width: 70ch; margin: 0 auto 34px; text-align: center; color: var(--muted); }
.indo-stats {
  list-style: none; margin: 0 0 clamp(30px, 4vw, 46px); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--blue-200); border: 1px solid var(--blue-200);
}
.indo-stats li {
  background: var(--shell); padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.indo-stats strong { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--accent-text); line-height: 1; }
.indo-stats span { font-size: .88rem; color: var(--muted); }

.indo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 52px); }
.indo-col h3 { font-size: 1.25rem; color: var(--accent-text); margin: 0 0 .5em; }
.indo-col > p { color: var(--muted); }
/* Was .tick-list, which the expedition pages also define with a drawn tick -
   the two rules were overwriting each other's marker. Named for the section it
   belongs to so it cannot collide again. */
.indo-list { list-style: none; margin: 1em 0 0; padding: 0; }
.indo-list li {
  position: relative; padding-left: 32px; margin-bottom: .7em; color: var(--ink);
  font-size: .97rem;
}
.indo-list li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 18px; height: 18px;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
.indo-close {
  margin: clamp(28px, 4vw, 44px) 0 0; padding: 20px 24px;
  background: var(--shell); border-left: 4px solid var(--accent);
  font-size: 1.06rem; color: var(--ink);
}

/* ---------- our story ---------- */

.section-story { background: var(--paper); }
.story-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 68px); align-items: start;
}
.story-copy p { color: var(--ink); }
.story-quote {
  margin: 1.6em 0 0; padding: 22px 26px;
  background: var(--navy-800); color: #fff;
}
.story-quote p { margin: 0; color: #fff; font-size: 1.12rem; font-style: italic; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 52px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px;
  width: 2px; background: var(--blue-200);
}
.tl-item { position: relative; padding-bottom: clamp(26px, 3vw, 36px); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -52px; top: 0;
  width: 32px; height: 32px;
  background: var(--paper) url("../assets/icons/sea_turtle.svg") center / 30px 30px no-repeat;
}
.tl-year {
  display: inline-block; font-size: .8rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: .4em;
}
.tl-item h3 { font-size: 1.1rem; margin: 0 0 .4em; }
.tl-item p { margin: 0; color: var(--muted); font-size: .96rem; }

/* The closing thought sits in the story column, level with the end of the
   timeline beside it: the timeline spans both rows, the words take the
   first, this takes the foot of the second. One column on phones, where it
   follows the timeline. */
.story-grid { grid-template-rows: auto 1fr; row-gap: 0; }
.story-copy > :last-child { margin-bottom: 0; }
.story-grid > .timeline { grid-column: 2; grid-row: 1 / span 2; }
.story-close {
  grid-column: 1; grid-row: 2; align-self: start; margin: 0;
  padding-top: 32px; max-width: 46ch;
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55;
  color: var(--ink);
}
.story-close::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 18px; background: var(--blue-600); }
@media (max-width: 900px) {
  .story-grid { grid-template-rows: none; row-gap: clamp(32px, 5vw, 68px); }
  .story-grid > .timeline, .story-close { grid-column: auto; grid-row: auto; }
}

/* ---------- team ---------- */

.section-team {
  background:
    radial-gradient(900px 460px at 85% 0%, rgba(67, 176, 241, .24), transparent 62%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800) 65%, var(--blue-600));
  color: #fff;
}
.section-team .carousel { --t-gap: 24px; }
.team-card {
  flex: 0 0 calc((100% - (var(--t-visible) - 1) * var(--t-gap)) / var(--t-visible));
}
.team-card {
  background: rgba(4, 45, 98, .42);
  border: 1px solid rgba(255,255,255,.28);
  padding: clamp(20px, 2.4vw, 28px);
}
.team-photo {
  aspect-ratio: 4 / 3; width: 100%; margin-bottom: 18px;
  background: linear-gradient(150deg, var(--blue-600), var(--navy-900));
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.18);
}
.team-card h3 { color: #fff; font-size: 1.18rem; margin: 0 0 .25em; }
.team-role {
  margin: 0 0 .7em; font-size: .84rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-100);
}
.team-bio { margin: 0; color: rgba(255,255,255,.8); font-size: .95rem; }
.section-team .slider-dots { justify-content: center; margin-top: 26px; }

/* ---------- the wider team ---------- */

/* A rule and generous space separate this from the profile cards above, so the
   section reads as two parts of one story rather than as two sections. */
.fam-block {
  margin-top: clamp(48px, 6vw, 78px);
  padding-top: clamp(38px, 4.5vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.fam-head { max-width: 62ch; margin: 0 auto clamp(30px, 3.6vw, 44px); text-align: center; }
.fam-head h3 {
  margin: 0; color: #fff; text-wrap: balance;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.fam-head p { margin: .7em 0 0; color: var(--blue-200); font-size: .98rem; line-height: 1.7; }
/* Its own line, and a little space, so the joke lands rather than trailing off
   the end of a long paragraph. */
.fam-cats-line { margin-top: .9em !important; font-style: italic; }

/* The 27 photographs fold away: they are lovely, but they are also most of
   this section's height, and someone reading about the team should not have to
   scroll past all of them to reach the closing line. Built on <details>, so it
   still opens with JavaScript off. */
.fam-fold { margin-top: clamp(24px, 3vw, 34px); }
.fam-fold > summary {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 auto; padding: 13px 24px;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .84rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .4);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
/* summary is not a flex item of its parent, so it needs help to centre */
.fam-fold { text-align: center; }
.fam-fold > summary::-webkit-details-marker { display: none; }
.fam-fold > summary:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.fam-fold > summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fam-fold > summary::after {
  content: ""; flex: 0 0 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.fam-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fam-toggle-shut { display: none; }
.fam-fold[open] .fam-toggle-open { display: none; }
.fam-fold[open] .fam-toggle-shut { display: inline; }
.fam-fold-body { text-align: left; margin-top: clamp(28px, 3.4vw, 42px); }

.fam-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 200px));
  justify-content: center;
  gap: clamp(18px, 2.4vw, 30px) clamp(16px, 2.2vw, 26px);
}
@media (max-width: 1100px) { .fam-grid { grid-template-columns: repeat(4, minmax(0, 200px)); } }
@media (max-width: 860px) { .fam-grid { grid-template-columns: repeat(3, minmax(0, 200px)); } }
@media (max-width: 620px) { .fam-grid { grid-template-columns: repeat(2, minmax(0, 160px)); } }

/* The cats sit on their own row, centred, which also means the people grid
   never has to be a neat multiple of four. */
.fam-grid-cats {
  grid-template-columns: repeat(3, minmax(0, 200px));
  justify-content: center;
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
@media (max-width: 620px) { .fam-grid-cats { grid-template-columns: repeat(2, minmax(0, 160px)); } }

.fam { text-align: center; }
.fam-photo {
  /* height:auto is required - the width/height attributes on the <img> act as
     presentational hints and would otherwise beat aspect-ratio, which is what
     made these render 257 x 600 rather than square. */
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: rgba(4, 45, 98, .5);
  border: 1px solid rgba(255, 255, 255, .28);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.fam:hover .fam-photo { border-color: rgba(255, 255, 255, .6); transform: translateY(-3px); }

/* Until a photograph arrives: initials, so the grid is never half empty. */
.fam-photo-blank {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem); color: rgba(255, 255, 255, .5);
}

.fam-name {
  margin: .8em 0 0; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.3;
}
.fam-role { margin: .2em 0 0; font-size: .84rem; color: var(--blue-200); line-height: 1.4; }



.team-card { cursor: pointer; }
.team-card:hover { border-color: rgba(255,255,255,.55); }
.team-focus {
  margin: 0 0 .7em; font-size: .88rem; color: var(--blue-200);
}
.team-bio { margin: 0 0 14px; color: rgba(255,255,255,.86); font-size: .95rem; }
.team-full { display: none; }          /* the dialog is the only place it shows */

/* The whole card opens the profile for a mouse; this stays as the keyboard
   and screen-reader route, the same arrangement the quote cards use. */
.team-more {
  align-self: flex-start; margin-top: auto;
  padding: 0; background: none; border: 0;
  font: inherit; font-weight: 700; font-size: .9rem;
  color: var(--blue-200); cursor: pointer;
  border-bottom: 2px solid currentColor;
}
.team-more:hover { color: #fff; }

.team-card { display: flex; flex-direction: column; }

/* ---- profile dialog ---- */
/* ---------- the card turning over ----------
   A copy of the card is what actually flies; the real one stays put with
   visibility hidden so the carousel keeps a gap where it was. The copy turns
   to 90deg and the dialog picks it up at -90deg, so the two meet edge-on and
   the swap cannot be seen. */
.team-flip-ghost {
  position: fixed; z-index: 130; margin: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  pointer-events: none;
  transition: transform .23s cubic-bezier(.36, 0, .8, .5), opacity .23s linear;
}

/* the dialog's half of the turn, in place of the usual swing-up */
.modal-shell.is-flip .modal-card {
  transform-origin: 50% 50%;
  transform: perspective(1400px) rotateY(-90deg);
  opacity: 1;
  transition: transform .26s cubic-bezier(.2, .5, .2, 1);
}
.modal-shell.is-flip.is-open .modal-card { transform: perspective(1400px) rotateY(0deg); }
.modal-shell.is-lit .modal-veil { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .team-flip-ghost { display: none; }
  .modal-shell.is-flip .modal-card { transform: none; transition: none; }
}

.team-modal-card { display: block; }
.team-modal-photo {
  float: left; width: 320px; aspect-ratio: 4 / 3;
  margin: 0 28px 20px 0;
  background: linear-gradient(150deg, var(--blue-600), var(--navy-900));
  background-size: cover; background-position: center;
}
.team-modal-body { padding: clamp(26px, 3.4vw, 44px); }
.team-modal-body::after { content: ""; display: block; clear: both; }
.team-modal-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .2em; padding-right: 52px; }
.team-modal-body .team-role { color: var(--accent-text); margin-bottom: .3em; }
.team-modal-body .team-focus { color: var(--muted); margin-bottom: 1.2em; }
.team-modal-body p { color: var(--muted); }
.team-modal-body p:last-child { margin-bottom: 0; }

/* the extra facts some profiles carry - highlight, favourite creature, fun fact */
.team-facts {
  margin: 1.6em 0 0; padding-top: 1.4em;
  border-top: 1px solid var(--line);
}
.team-facts dt {
  font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text);
}
.team-facts dd { margin: .25em 0 1.1em; color: var(--muted); }
.team-facts dd:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .team-modal-photo { float: none; width: 100%; margin: 0 0 20px; }
}

.team-close {
  max-width: 74ch; margin: clamp(30px, 4vw, 48px) auto 0; text-align: center;
  color: rgba(255,255,255,.88); font-size: 1.05rem;
}

/* ---------- facilities ---------- */

.section-facilities { background: var(--paper); }
.fac-lede {
  max-width: 78ch; margin: 0 auto clamp(34px, 4vw, 52px);
  text-align: center; color: var(--muted);
}
.fac-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.fac { display: block; }

/* A tile is the picture with its name across the foot of it; the detail lives
   in the dialog. A button rather than a div, so it is reachable by keyboard
   without any extra work. */
.fac-tile {
  position: relative; display: block; width: 100%;
  padding: 0; border: 1px solid var(--line); background: none;
  overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.fac-photo {
  display: block; aspect-ratio: 4 / 3; width: 100%;
  background: linear-gradient(150deg, var(--blue-200), var(--navy-800));
  background-size: cover; background-position: center;
  transition: transform .4s var(--ease);
}
.fac-title {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 20px; text-align: center;
  font-size: clamp(1.18rem, 1.7vw, 1.4rem); font-weight: 800;
  letter-spacing: .01em; color: #fff;
  background: rgba(4, 45, 98, .55);
  transition: background-color .3s var(--ease);
}
.fac-tile:hover .fac-title { background: rgba(4, 45, 98, .68); }
.fac-tile:hover .fac-photo { transform: scale(1.05); }
.fac-tile:hover { border-color: var(--accent); }
.fac-tile:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 3px; }
.fac-full { display: none; }

/* ---- facility dialog ---- */
.fac-modal-card { display: block; }
.fac-modal-body { padding: clamp(26px, 3.4vw, 44px); }
.fac-modal-body::after { content: ""; display: block; clear: both; }
/* The tile's photos: one large 16:9 picture, with up to four thumbnails
   underneath - choosing one shows it large. Every photo is cropped to its
   box, so tall and wide shots sit in the same shapes. */
.fac-gallery { margin: clamp(18px, 2.4vw, 26px) 0 0; }
.fac-gallery:empty { display: none; margin: 0; }
.fac-gal-main { aspect-ratio: 16 / 9; overflow: hidden; background: var(--shell); }
.fac-gal-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fac-gal-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.fac-gal-thumbs button {
  all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden;
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s;
}
.fac-gal-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .2s; }
.fac-gal-thumbs button:hover img, .fac-gal-thumbs button[aria-current="true"] img { opacity: 1; }
.fac-gal-thumbs button[aria-current="true"] { outline-color: var(--accent); }
.fac-gal-thumbs button:focus-visible { outline-color: var(--navy-800); }
.fac-modal-body h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .6em;
  color: var(--accent-text); padding-right: 52px;
}
.fac-modal-body p { color: var(--muted); }
.fac-modal-body p:last-child { margin-bottom: 0; }

.fac h3 {
  font-size: 1.12rem; margin: 0 0 .6em; color: var(--accent-text);
  padding-bottom: .5em; border-bottom: 2px solid var(--blue-200);
}
.fac p { color: var(--muted); font-size: .95rem; }
.fac p:last-child { margin-bottom: 0; }
.fac-list { margin: 0 0 1em; padding-left: 20px; color: var(--ink); font-size: .93rem; }
.fac-list li { margin-bottom: .25em; }
.fac-note { font-size: .88rem !important; font-style: italic; }

/* ---------- generic modal (Why Indonesia) ---------- */

.modal-shell { position: fixed; inset: 0; z-index: 120; }
.modal-shell[hidden] { display: none; }

/* ---------- dialog open animation ----------
   The panel starts tipped back on its bottom edge and swings upright. The
   perspective lives on the shell so the rotation has depth; the veil just
   fades. main.js adds .is-open a frame after the panel is displayed, because
   a transition cannot run from display:none. */
.modal-shell, .t-modal { perspective: 1500px; }

.modal-shell .modal-card,
.t-modal .t-modal-card {
  transform-origin: 50% 100%;
  transform: rotateX(-16deg) translateY(28px) scale(.97);
  opacity: 0;
  transition: transform .36s cubic-bezier(.22, .68, .3, 1), opacity .24s ease;
  will-change: transform;
}
.modal-shell.is-open .modal-card,
.t-modal.is-open .t-modal-card { transform: none; opacity: 1; }

.modal-veil, .t-modal-veil { opacity: 0; transition: opacity .28s ease; }
.modal-shell.is-open .modal-veil,
.t-modal.is-open .t-modal-veil { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .modal-shell .modal-card,
  .t-modal .t-modal-card { transform: none; opacity: 1; transition: none; }
  .modal-veil, .t-modal-veil { opacity: 1; transition: none; }
}
.modal-veil { position: absolute; inset: 0; background: rgba(4, 45, 98, .72); }
.modal-card {
  position: relative; margin: 4vh auto; max-width: 980px; width: calc(100% - 32px);
  max-height: 92vh; overflow: auto; background: var(--paper);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.modal-card > .section { padding: clamp(34px, 5vw, 56px) 0; }
.modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 40px; height: 40px; font-size: 1.6rem; line-height: 1;
  background: var(--paper); color: var(--accent-text);
  border: 1px solid var(--line); cursor: pointer;
}
.modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- about page responsive ---------- */

@media (max-width: 1080px) {
  .fac-grid { grid-template-columns: repeat(2, 1fr); }
  .indo-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .mvv-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 14px; }
  .mvv-row:hover { transform: none; }
}

@media (max-width: 900px) {
  .intro-grid,
  .where-grid,
  .story-grid,
  .indo-cols,
  .mv-grid { grid-template-columns: 1fr; }
  .intro-media { order: -1; }
}

@media (max-width: 820px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fac-grid { grid-template-columns: 1fr; }
  .indo-stats { grid-template-columns: 1fr; }
  .fact-list { grid-template-columns: 1fr; }
}


/* ============================================================
   EXPEDITIONS & COURSES PAGE
   Namespaced .prog- / .cmp- / .fee- / .faq- so nothing collides
   with the homepage's .exp- rows.
   ============================================================ */

.page-hero-actions { margin-top: clamp(24px, 3vw, 34px); }

/* Reef band under the intro copy, the same treatment the homepage gives
   "Who we are". The bottom padding clears the point where the reef turns
   solid, so no text sits on the busy part of the artwork. */
/* The reef band, in two pieces. The artwork was always a corner border - its
   middle third is empty - so cutting it at that gap lets each half be anchored
   to its own page edge and drawn smaller. The reef still reaches both margins;
   only the empty centre widens. Keep the two percentages in proportion to the
   pieces (551x276 and 633x276) or the halves will be drawn at different scales. */
/* Decorative artwork anchored to a section's corners needs content held off
   it, or a photograph's corner ends up sitting in the ink. Two things do that,
   and both are set here so every section using a background graphic gets the
   same clearance rather than each one being nudged by hand:

     --decor-clear  extra room under the content, on top of the height the
                    artwork already claims
     --decor-wrap   how wide the content may run. Narrower than the page, so
                    the corners stay clear of the artwork's tallest points. */
.section-reef {
  --decor-clear: 26px;
  --decor-wrap: 1084px;
  position: relative; isolation: isolate;
  /* 100vw / 15.4 reaches the point where the reef turns solid */
  padding-bottom: calc(100vw / 15.4 + var(--decor-clear));
}
.section-reef > .wrap { max-width: min(var(--wrap), var(--decor-wrap)); }
.section-reef::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 100%; pointer-events: none;
  background:
    url("../assets/img/reef-band-left.png")  bottom left  / 23.88% auto no-repeat,
    url("../assets/img/reef-band-right.png") bottom right / 27.43% auto no-repeat;
}

/* ---------- the six expedition cards ---------- */

.section-programmes { background: var(--shell); }

/* The stock 62ch cap breaks this standfirst into three lines; it needs about
   78 characters a line to sit on two, and balance then evens the halves. */
.section-programmes .section-intro { max-width: 82ch; text-wrap: balance; }

.prog-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.prog {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.prog:hover, .prog:focus-within {
  transform: translateY(-4px);
  border-color: var(--blue-400);
  box-shadow: var(--shadow);
}

/* The icon sits on a tinted band where a photograph will eventually go.
   Swap .prog-media for an <img> and the rest of the card is unaffected. */
/* The motif now runs inline with the title, sized off the heading rather than
   the viewport so it always matches the text beside it. */
.prog-icon {
  display: inline-block;                  /* the global img rule is block */
  width: 1.5em; height: 1.5em;
  margin-right: .42em;
  vertical-align: -.3em;                  /* sits on the cap line, not the baseline */
  object-fit: contain;                    /* mixed aspect ratios */
  transition: transform .22s var(--ease);
}
.prog:hover .prog-icon { transform: scale(1.12); }
/* The short code, parked in the corner of the spec block - the comparison
   table labels its rows the same way, so this is where visitors learn it.
   It sits over the Duration row, which never uses the full width. */
.prog-code {
  position: absolute; top: calc(1em + 6px); right: 0; margin: 0;   /* centres on the Duration label */
  padding: 2px 8px;
  background: var(--navy-900); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .1em;
  line-height: 1.5;
}

.prog-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 2.2vw, 28px);
}
/* Titles run to one or two lines and taglines likewise, so both reserve two.
   Without this the six cards settle at two different heights per row. */
.prog-body h3 {
  margin: 0 0 .25em; font-size: clamp(1.08rem, 1.75vw, 1.26rem); line-height: 1.25;
  min-height: 2.5em;
}
.prog-body h3 a { color: var(--ink); text-decoration: none; }
/* Stretched link - the whole card is the target, but only the heading is
   in the tab order. The buttons below sit back on top via z-index. */
.prog-body h3 a::after { content: ""; position: absolute; inset: 0; }
.prog:hover h3 a, .prog:focus-within h3 a { color: var(--accent-text); }

.prog-tagline {
  margin: 0 0 .9em; min-height: 2.8em;
  color: var(--accent-text);
  font-family: var(--font-display); font-weight: 700;
  font-size: .93rem; line-height: 1.4;
}
.prog-blurb { color: var(--muted); font-size: .96rem; margin-bottom: 1.2em; }

/* The spec block is bottom-anchored so every card's list starts level. */
.prog-specs {
  position: relative;
  margin: auto 0 0; padding-top: 1em;
  border-top: 1px solid var(--line);
}
.prog-meta { margin: 0; display: grid; gap: .5em; }
.prog-meta > div { display: flex; gap: .6em; align-items: baseline; }
.prog-meta dt {
  flex: 0 0 6.6em;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--font-display); color: var(--accent-text);
}
.prog-meta dd { margin: 0; font-size: .9rem; color: var(--ink); }


.prog-actions {
  position: relative; z-index: 1;         /* above the stretched link */
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(18px, 2vw, 24px);
}

@media (max-width: 1000px) { .prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .prog-grid { grid-template-columns: 1fr; } }

/* ---------- comparison table ---------- */

/* A different reef from the one on the intro band - this one runs the full
   width rather than sitting in the corners. Faded well back so it reads as a
   watermark under the table rather than a picture behind it.
   Artwork is 1800x381, so it stands 100vw/4.72 tall; the padding below clears
   roughly half of that, to where the reef turns solid. */
.section-compare {
  position: relative; isolation: isolate;
  background: var(--paper);
  /* The file stands 100vw/4.72 tall, but its top 7.9% is empty - the first
     row carrying any real ink is 30px into an 1800 x 381 image. So the drawn
     reef is 100vw/5.13, and that is what has to be cleared, plus a gap so the
     table is not sitting on the artwork. Measured from the file rather than
     guessed: an earlier value of 100vw/7.3 left the table 96px inside it. */
  padding-bottom: calc(100vw / 5.13 + clamp(9px, 1.05vw, 16px));
}
.section-compare::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 100%; pointer-events: none; opacity: .18;
  background: url("../assets/img/reef-border-wide.png") bottom center / 100% auto no-repeat;
}

/* ---------- Book Now, under the table ----------

   Positioned rather than in flow, so it occupies the space the reef artwork
   already takes up instead of pushing the section taller. It sits in the
   sparse upper part of the reef, above the point where the drawing turns
   solid, so nothing is obscured.

   Below 860px the artwork is small enough that there is no room to borrow,
   so the button returns to the normal flow. */

.cmp-book {
  position: absolute; left: 0; right: 0;
  bottom: calc(100vw / 7.15);
  margin: 0; text-align: center;
}
/* The artwork shrinks with the viewport, so the space available to borrow
   shrinks with it. Below about 1000px there is not enough left for the
   button to clear both the table and the solid reef, so it goes back into
   the flow and the section grows by its height. */
@media (max-width: 1000px) {
  .cmp-book { position: static; margin: clamp(22px, 3vw, 30px) 0 0; }
}

/* ---------- the whole row is the link ----------

   The anchor in the first cell stays as the real link - it is what a keyboard
   and a screen reader use. The rest of the row is made to follow it by
   script, which is why the cursor and the hover tint are only applied when
   that script has run. */

.cmp-rows tbody tr.is-clickable { cursor: pointer; }
.cmp-rows tbody tr.is-clickable:hover { background: var(--shell); }
.cmp-rows tbody tr.is-clickable:hover .cmp-go { transform: translateX(4px); }

/* ---------- first column: motif, code, name ---------- */

/* nowrap keeps the motif on the same line as the title - with wrapping on, a
   long name pushed the whole link onto a second line and left the icon
   stranded above it. The name is free to wrap within its own column instead. */
.cmp-table tbody th {
  position: relative;
  display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px;
  /* the longest name (Conservation Research Assistant (CRA)) measures 273px,
     plus the arrow's own margin, the 26px motif, the 10px gap and 36px of cell
     padding - so no title wraps onto a second line */
  min-width: 358px;
}
.cmp-icon { width: 26px; height: 26px; object-fit: contain; flex: none; margin-top: 1px; }

/* ---------- rows as links ---------- */

.cmp-rows tbody tr { position: relative; transition: box-shadow .2s var(--ease); }
.cmp-rows tbody tr:hover,
.cmp-rows tbody tr:focus-within {
  background: var(--white);
  box-shadow: 0 18px 34px -24px rgba(4, 45, 98, .55);
}
/* accent rule wiping down the leading edge, matching the homepage list */
.cmp-rows tbody th::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-400);
  transform: scaleY(0); transform-origin: top;
  transition: transform .2s var(--ease);
}
.cmp-rows tbody tr:hover th::before,
.cmp-rows tbody tr:focus-within th::before { transform: scaleY(1); }

.cmp-link {
  flex: 1 1 auto; min-width: 0;          /* may wrap its own text, never itself */
  color: var(--ink); font-weight: 600; text-decoration: none;
  transition: color .2s var(--ease);
}
/* the whole row is the target; only the name is in the tab order */
.cmp-link::after { content: ""; position: absolute; inset: 0; }
.cmp-rows tbody tr:hover .cmp-link,
.cmp-rows tbody tr:focus-within .cmp-link { color: var(--accent-text); }

.cmp-go {
  display: inline-block; margin-left: .4em; color: var(--accent);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.cmp-rows tbody tr:hover .cmp-go,
.cmp-rows tbody tr:focus-within .cmp-go { opacity: 1; transform: translateX(0); }

.cmp-scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--line); }
.cmp-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.cmp-table th, .cmp-table td {
  padding: 14px clamp(12px, 1.4vw, 18px);
  text-align: left; vertical-align: top;
}
.cmp-table thead th {
  position: sticky; top: 0;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.cmp-table tbody tr + tr { border-top: 1px solid var(--line); }
.cmp-table tbody tr:hover { background: var(--blue-100); }
.cmp-code { color: var(--muted); font-weight: 400; white-space: nowrap; }
.cmp-rows tbody tr:hover .cmp-code,
.cmp-rows tbody tr:focus-within .cmp-code { color: inherit; }
.cmp-table td { color: var(--muted); }

/* Below tablet the table becomes stacked blocks - a six-column row cannot
   be read on a phone, however far it scrolls. */
@media (max-width: 760px) {
  .cmp-scroll { overflow-x: visible; border: 0; background: transparent; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; }
  /* the 358px floor is for the side-by-side table only - stacked, it would
     push the heading straight through the right edge of the row. Matches the
     specificity of the rule that sets it (.cmp-table tbody th). */
  .cmp-table th { display: flex; }
  .cmp-table tbody th { min-width: 0; }
  .cmp-table thead { display: none; }
  .cmp-table tbody tr {
    background: var(--white); border: 1px solid var(--line);
    margin-bottom: 14px; padding: 4px 0;
  }
  .cmp-table tbody tr + tr { border-top: 1px solid var(--line); }
  .cmp-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display); font-size: .7rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-text);
  }
  .cmp-table th, .cmp-table td { padding: 8px clamp(14px, 4vw, 20px); }
}

/* ---------- where your fees go ---------- */

.section-fees {
  position: relative; isolation: isolate;
  background: var(--navy-900); color: #fff;
}
.section-fees::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(900px 460px at 82% 8%, rgba(67, 176, 241, .30), transparent 64%);
}

.fee-grid {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
  max-width: 940px; margin-inline: auto;
}
.fee-chart { margin: 0; }
/* The ring is r80 with a 40 stroke, so it already reaches the edge of the
   200x200 viewBox. The hover thickens it and adds a glow, both of which would
   be shaved off without this - an SVG clips to its viewport by default. */
.fee-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.fee-seg {
  transition: stroke-width .22s var(--ease), filter .22s var(--ease);
  transform-origin: 100px 100px;
}
/* Thickens and glows, whether the pointer is on the arc itself or on that
   arc's row in the legend - the pairing is wired up in main.js.
   The glow is an SVG filter with its own region rather than a CSS
   drop-shadow(), which was being clipped square at the edge of the arc. */
.fee-seg:hover,
.fee-seg.is-lit {
  stroke-width: 45;
  filter: url(#feeGlow);
}

.fee-figures { pointer-events: none; }   /* never steal hover from the arcs */
.fee-figure {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-anchor: middle; dominant-baseline: central;
}

.fee-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fee-legend li {
  position: relative;
  display: grid; grid-template-columns: 16px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 4px 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  cursor: default;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.fee-legend li:first-child { border-top: 1px solid rgba(255, 255, 255, .18); }

/* the accent rule that wipes down the leading edge, as on the homepage list */
.fee-legend li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-400);
  transform: scaleY(0); transform-origin: top;
  transition: transform .2s var(--ease);
}
.fee-legend li:hover,
.fee-legend li.is-lit {
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .6);
}
.fee-legend li:hover::before,
.fee-legend li.is-lit::before { transform: scaleY(1); }
.fee-legend li:hover .fee-key,
.fee-legend li.is-lit .fee-key { transform: scale(1.2); }
.fee-legend li:hover .fee-pct,
.fee-legend li.is-lit .fee-pct { color: #fff; transform: translateX(-2px); }
/* the palest keys need an edge or they float on the navy */
.fee-key { width: 16px; height: 16px; display: block;
           box-shadow: inset 0 0 0 1px rgba(4, 45, 98, .35);
           transition: transform .2s var(--ease); }
.fee-label { color: rgba(255, 255, 255, .92); font-size: 1rem; }
.fee-pct {
  font-family: var(--font-display); font-weight: 700;
  transition: transform .2s var(--ease);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: #fff; font-variant-numeric: tabular-nums;
}
.fee-note {
  max-width: 62ch; margin: clamp(30px, 4vw, 44px) auto 0;
  text-align: center; color: rgba(255, 255, 255, .72); font-size: .93rem;
}

@media (max-width: 760px) {
  .fee-grid { grid-template-columns: 1fr; justify-items: center; }
  .fee-chart { max-width: 280px; }
  .fee-legend { width: 100%; }
}

/* ---------- FAQs ---------- */

.section-faq {
  position: relative; isolation: isolate;
  background: var(--shell);
}
/* white pill, not an outline - it sits on a photograph */
.section-faq .btn-outline {
  --btn-bg: #fff; --btn-fg: var(--accent-text); --btn-bd: #fff;
}
.section-faq .btn-outline:hover {
  --btn-bg: var(--blue-100); --btn-fg: var(--navy-900); --btn-bd: var(--blue-100);
}

.section-faq::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: .14;
  background: url("../assets/img/faq-band.jpg") center / cover no-repeat;
}

/* A wash of white behind the questions so they lift off the photograph
   without hiding it. */
.section-faq .faq-list {
  background: rgba(255, 255, 255, .25);
  padding: 0 clamp(16px, 2.2vw, 28px);
}
.faq-list { max-width: 860px; margin-inline: auto; }
.faq { border-bottom: 1px solid var(--line); }
.faq:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 2.2vw, 24px) 4px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 1; }
/* the +/- marker, drawn rather than typed so it rotates cleanly */
.faq summary::after {
  content: ""; flex: 0 0 14px; height: 14px;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 14px 2px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) center / 2px 14px no-repeat;
  transition: transform .22s var(--ease);
}
/* the plus turns into a cross rather than collapsing to a diagonal line */
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover, .faq summary:focus-visible { color: var(--accent-text); }
.faq-body { padding: 0 4px clamp(20px, 2.4vw, 28px); }
.faq-body p { color: var(--muted); margin: 0; max-width: 74ch; }

/* Off-screen but still read out - used for the comparison table's caption. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}


/* ============================================================
   INDIVIDUAL EXPEDITION PAGES
   Same spine on every one: hero, intro, at a glance, what you'll do,
   skills, fees, what's included, requirements, CTA.
   ============================================================ */

/* ---------- at a glance ---------- */

.section-glance { background: var(--navy-900); color: #fff; padding: 0; }
.glance {
  margin: 0; display: grid; grid-template-columns: repeat(5, 1fr);
}
.glance > div {
  padding: clamp(22px, 2.6vw, 32px) clamp(14px, 1.8vw, 24px);
  text-align: center;
}
.glance > div + div { border-left: 1px solid rgba(255, 255, 255, .18); }
.glance dt {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-200);
  margin-bottom: .55em;
}
.glance dd {
  margin: 0; color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.98rem, 1.5vw, 1.15rem); line-height: 1.3;
}
@media (max-width: 900px) {
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance > div + div { border-left: 0; }
  .glance > div { border-top: 1px solid rgba(255, 255, 255, .18); }
  .glance > div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .18); }
  .glance > div:nth-child(-n+2) { border-top: 0; }
  .glance > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}

/* ---------- what you'll do ---------- */

.section-do { background: var(--paper); }
/* This one line sits above six cards, so a narrow measure turns it into a tall
   stack for no reason. It runs closer to the width of the heading above it, and
   balances so the lines come out even rather than leaving a short last one. */
.section-do .section-intro { max-width: 88ch; text-wrap: balance; }
.do-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.do {
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.do:hover { transform: translateY(-4px); border-color: var(--blue-400); box-shadow: var(--shadow); }
.do-icon {
  width: clamp(48px, 5vw, 62px); height: clamp(48px, 5vw, 62px);
  object-fit: contain; margin-bottom: .8em;
}
/* .do-placeholder carries no styling of its own: a card waiting for its
   content should sit in the grid exactly like the finished ones. The class is
   kept so the unwritten cards can still be found in the markup. */

.do h3 { margin: 0 0 .35em; font-size: clamp(1.05rem, 1.7vw, 1.2rem); }
.do p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------- the cards open a panel ----------

   The heading is the link, and it is stretched across the whole tile so the
   card is clickable anywhere. That keeps the accessible name as the heading
   rather than "read more", and leaves the tile a single tab stop. */

.do { position: relative; }
.do-open {
  color: inherit; text-decoration: none;
  /* the arrow marks it as openable without adding a second control */
  display: inline-flex; align-items: baseline; gap: .45em;
}
.do-open::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.do-open::after {
  content: ""; flex: 0 0 7px; height: 7px; align-self: center;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform .2s var(--ease);
}
.do:hover .do-open::after { transform: rotate(-45deg) translate(2px, 2px); }
.do:has(.do-open:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.do-open:focus-visible { outline: none; }
/* :has is well supported, but where it is not the focus ring still has to
   land somewhere, so the link keeps one of its own. */
@supports not selector(:has(a)) {
  .do-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
}

/* the panel content, once main.js has moved it into a dialog */
.do-detail h3 {
  margin: 0 0 .5em; font-size: clamp(1.25rem, 2.2vw, 1.55rem); color: var(--ink);
}
.do-detail-lead {
  margin: 0 0 1.3em; color: var(--muted); font-size: 1.02rem; line-height: 1.7;
}
.do-detail-list { margin: 0; padding: 0; list-style: none; }
.do-detail-list li {
  position: relative; padding: 13px 0 13px 34px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); line-height: 1.65;
}
.do-detail-list li:first-child { padding-top: 0; }
.do-detail-list li:last-child { border-bottom: 0; }
/* the starfish, the same mark the requirements and Indonesia lists carry */
.do-detail-list li::before {
  content: ""; position: absolute; left: 2px; top: 1.02em;
  width: 19px; height: 19px;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
.do-detail-list li:first-child::before { top: .38em; }
.do-detail-note {
  margin: 1.4em 0 0; padding: 14px 18px;
  background: var(--shell); border-left: 4px solid var(--accent);
  color: var(--ink); font-size: .95rem; line-height: 1.65;
}

/* With JavaScript off the panels are never moved into a dialog, so they stay
   in the page as an ordinary list under the grid, and the card links reach
   them normally. */
.do-detail {
  margin-top: clamp(28px, 3.4vw, 42px);
  background: var(--paper); padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line); border-top: 4px solid var(--accent);
}

/* ---- once main.js has moved one into a dialog ---- */

.modal-shell .do-detail {
  margin: 0; background: none;
  /* the rule reaches the card's edges, the words do not */
  border: 0; border-top: 4px solid var(--accent);
  padding: clamp(30px, 3.8vw, 44px);
}
/* A bulleted list does not want the full 980px the dialog allows - at that
   width the eye loses the start of the next line. */
.modal-card:has(> .do-detail) {
  max-width: 660px;
  border: 1px solid var(--blue-200);
}
/* the close button sits in the top right, so the heading stops short of it */
.modal-shell .do-detail h3 { padding-right: 46px; }
@media (max-width: 940px) { .do-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .do-grid { grid-template-columns: 1fr; } }

/* ---------- module breakdown ---------- */

.section-modules { background: var(--shell); }
/* Two cards, not three: the wider measure keeps the longer module names on
   one line each. */
.mod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.mod { background: var(--white); border: 1px solid var(--line); padding: clamp(22px, 2.4vw, 30px); }
.mod h3 {
  margin: 0 0 .7em; padding-bottom: .5em;
  border-bottom: 2px solid var(--navy-800);
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.mod-list { margin: 0; padding-left: 1.4em; color: var(--muted); }
.mod-list li { margin-bottom: .5em; }
/* a second heading inside a card needs room above it */
.mod-sub { margin-top: 1.4em !important; }
@media (max-width: 820px) { .mod-grid { grid-template-columns: 1fr; } }

/* ---------- ticks and crosses ---------- */

.tick-list, .cross-list { list-style: none; margin: 0; padding: 0; }
.tick-list li, .cross-list li {
  position: relative; padding-left: 2em; margin-bottom: .85em;
  color: var(--muted); line-height: 1.6;
}
/* drawn, not typed - a glyph would depend on the reader's font */
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.cross-list li::before,
.cross-list li::after {
  content: ""; position: absolute; left: 1px; top: .62em;
  width: 13px; height: 2.5px; background: var(--grey-500);
}
.cross-list li::before { transform: rotate(45deg); }
.cross-list li::after  { transform: rotate(-45deg); }

.tick-cols { columns: 2; column-gap: clamp(28px, 4vw, 56px); }
.tick-cols li { break-inside: avoid; }
@media (max-width: 720px) { .tick-cols { columns: 1; } }

/* ---------- skills ---------- */

.section-skills {
  position: relative; isolation: isolate;
  background: var(--navy-900); color: #fff;
}
.section-skills::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(900px 460px at 82% 8%, rgba(67, 176, 241, .30), transparent 64%);
}
.section-skills .tick-list li { color: rgba(255, 255, 255, .90); }
/* A turtle rather than a tick. Masked rather than placed as an image, so it
   takes the same pale blue the ticks had against the navy. */
.section-skills .tick-list li::before {
  width: 20px; height: 20px; top: .08em;
  border: 0; transform: none;
  background: var(--blue-200);
  -webkit-mask: url("../assets/icons/turtle.svg") center / contain no-repeat;
          mask: url("../assets/icons/turtle.svg") center / contain no-repeat;
}
.section-skills .tick-list li { padding-left: 32px; }
.section-skills h3 {
  margin: 0 0 .8em; padding-bottom: .5em;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-size: 1.02rem; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 4vw, 54px); }
@media (max-width: 820px) { .skill-grid { grid-template-columns: 1fr; } }
.skill-extra { margin-top: clamp(36px, 4.5vw, 58px); }
.skill-note { margin: 1.4em 0 0; color: rgba(255, 255, 255, .72); font-size: .95rem; }

/* ---------- programme options (A-Level) ---------- */

.section-options { background: var(--paper); }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.opt {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  padding: clamp(24px, 2.8vw, 36px);
}
.opt h3 { margin: 0 0 .5em; font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.opt > p { color: var(--muted); }
.opt-fees { margin: auto 0 0; padding-top: 1.2em; border-top: 1px solid var(--line); }
.opt-fees > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: .6em 0;
}
.opt-fees > div + div { border-top: 1px dotted var(--line); }
.opt-fees dt { color: var(--muted); font-size: .95rem; }
.opt-fees dd {
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem; color: var(--accent-text);
}
.opt-note { margin: 1.2em 0 0; font-size: .93rem; color: var(--muted); }
@media (max-width: 820px) { .opt-grid { grid-template-columns: 1fr; } }

/* ---------- fee table ---------- */

.section-fees-table { background: var(--shell); }
.fee-table-scroll { max-width: 760px; margin-inline: auto; }
.fee-table-note {
  max-width: 74ch; margin: clamp(22px, 2.6vw, 32px) auto 0;
  text-align: center; color: var(--muted); font-size: .95rem;
}

/* ---------- included / not included ---------- */

.section-incl { background: var(--paper); }
.incl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.2vw, 46px); }
.incl { padding: clamp(24px, 2.8vw, 34px); border: 1px solid var(--line); }
.incl-yes { background: var(--white); border-top: 4px solid var(--accent); }
.incl-no  { background: var(--white); border-top: 4px solid var(--grey-500); }
.incl h3 {
  margin: 0 0 1em;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 820px) { .incl-grid { grid-template-columns: 1fr; } }

/* ---------- requirements ---------- */

/* White, because the fee section above it is now the tinted one. The two
   used to be separated by the included/not-included section; that has been
   folded into the fees, so the bands alternate here instead. */
/* The card is white on a white section, so the only thing anyone can see is
   the rule inside it. The standard section padding then reads as space around
   that rule rather than around the card, and at full size it was four times
   the space inside it. Pulled in so the ring of white outside the line stays
   comfortably larger than the ring inside, without dwarfing it. */
.section-prereq { background: var(--paper); padding: clamp(34px, 4vw, 58px) 0; }
.prereq-list { max-width: 74ch; margin-inline: auto; }

/* ---------- the requirements in a card ----------

   The same card as the page opens with: white, with a light blue rule set in
   from its edge rather than sitting on it. Drawn on a pseudo-element, because
   a border cannot be inset.

   This part of the page is a checklist someone reads before committing money,
   so it wants to look like a considered panel - which is also why it is not a
   photograph with words over it. */

.prereq-card,
.lead-card {
  --card-rule-inset: 0.5cm;
  --card-rule-weight: 2px;
  position: relative;
  background: var(--paper);
  /* the rule sits 0.5cm in, so the padding has to clear that before it starts
     giving the content any room of its own */
  padding: clamp(40px, 4.6vw, 62px) clamp(34px, 4vw, 54px);
}
.prereq-card::before,
.lead-card::before {
  content: ""; position: absolute; inset: var(--card-rule-inset);
  border: var(--card-rule-weight) solid var(--blue-200);
  pointer-events: none;
}
.prereq-card .section-head { margin-bottom: clamp(26px, 3.2vw, 40px); }
.prereq-card .prereq-list { margin-inline: auto; }

/* The requirements carry the starfish, the same mark the Indonesia list and
   the What you'll do panels use. */
.section-prereq .tick-list li { padding-left: 32px; }
.section-prereq .tick-list li::before {
  width: 19px; height: 19px; top: .12em; left: 0;
  border: 0; transform: none;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
@media (max-width: 900px) {
  .prereq-card,
  .lead-card { --card-rule-inset: 0.3cm; padding: clamp(26px, 5vw, 36px); }
}

/* ---- raised instead of ruled ----

   No line inside the edge: the card is simply lifted off the page, with the
   shadow doing the work the rule was doing. Sitting white on white, a shadow
   alone is what tells anyone the card is a separate thing, so it is a little
   deeper and a little lower than the site's usual one. */

.prereq-card.is-raised::before { content: none; }
.prereq-card.is-raised {
  transform: translateY(-6px);
  /* the lift is decorative - it should not eat the gap underneath */
  margin-bottom: -6px;
  box-shadow:
    0 2px 4px rgba(4, 45, 98, .06),
    0 18px 40px -12px rgba(4, 45, 98, .26);
}

.apply-steps {
  max-width: 74ch; margin: clamp(36px, 4.5vw, 56px) auto 0;
  padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--line);
}
.apply-steps h3 {
  margin: 0 0 .8em;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.apply-steps ol { margin: 0; padding-left: 1.4em; color: var(--muted); }
.apply-steps li { margin-bottom: .7em; }

.final-cta-note {
  max-width: 62ch; margin: clamp(22px, 2.6vw, 30px) auto 0;
  color: rgba(255, 255, 255, .82); font-size: .96rem;
}
.final-cta-note a { color: #fff; }


/* ============================================================
   PHOTOGRAPHY ON THE EXPEDITION PAGES
   ============================================================ */

/* The intro photo fills its column and matches the height of the copy beside
   it, rather than floating at its natural size in the middle of the row. */
.intro-media { position: relative; min-height: clamp(280px, 34vw, 460px); }
.intro-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Three shots edge to edge, no gaps - the run of images reads as one band
   rather than three floating pictures. */
.photo-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--navy-900);
}
.strip-shot { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.strip-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.strip-shot:hover img { transform: scale(1.04); }
/* a hairline between the frames, drawn rather than gapped so the band stays solid */
.strip-shot + .strip-shot { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .35); }
@media (max-width: 760px) {
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .strip-shot:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
}

/* One wide photograph, full bleed, immediately above the call to action. */
.photo-band { display: block; background: var(--navy-900); }
.photo-band img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 21 / 6; object-fit: cover;
}
@media (max-width: 760px) { .photo-band img { aspect-ratio: 16 / 9; } }

/* The skills band takes a photograph behind its navy wash, the same treatment
   the About page gives Mission, Vision & Values. Each page sets --skills-photo. */
.section-skills::before {
  z-index: -2;                            /* the wash below sits on top of it */
  background:
    radial-gradient(900px 460px at 82% 8%, rgba(67, 176, 241, .30), transparent 64%),
    var(--skills-photo, none) center / cover no-repeat;
}
.section-skills::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(165deg, rgba(4, 45, 98, .95), rgba(7, 61, 132, .93));
}


/* ---------- scrolling photo rail ---------- */

/* Inside the expeditions section the rail sits between the heading and the
   cards, so it needs the same clearance underneath that the heading has above. */
/* The rail is the bottom of this section - no tint beneath it, so the band
   runs straight into whatever follows. Its old margin-bottom was there to
   clear the cards when the rail ran through the middle of the section. */
.section-programmes { padding-bottom: 0; }
.section-programmes .photo-rail { margin-bottom: 0; }

.photo-rail {
  overflow: hidden;
  background: var(--navy-900);
  /* Room above it, so the rail is clearly a band closing the section rather
     than something stuck to the foot of the cards. */
  margin-top: clamp(40px, 5vw, 72px);
  /* the rail is a decorative run of photographs, not something to tab into */
  -webkit-user-select: none; user-select: none;
}
.rail-track {
  display: flex; width: max-content;
  animation: rail-scroll 110s linear infinite;
}
/* Pausing on hover lets someone actually look at a photograph that caught
   their eye, rather than chasing it across the screen. */
.photo-rail:hover .rail-track { animation-play-state: paused; }

.rail-shot {
  margin: 0; flex: 0 0 20vw;              /* five across, whatever the window */
  aspect-ratio: 4 / 3; overflow: hidden;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .35);
}
.rail-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes rail-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* exactly one copy of the list */
}

@media (max-width: 900px) { .rail-shot { flex-basis: 33.3333vw; } }
@media (max-width: 560px) { .rail-shot { flex-basis: 50vw; } }

@media (prefers-reduced-motion: reduce) {
  .rail-track { animation: none; }
}


/* ============================================================
   BOOK NOW PAGE
   ============================================================ */

.section-book { background: var(--paper); }

.book-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.book-card {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--white); border: 1px solid var(--line);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.book-card:hover, .book-card:focus-within {
  transform: translateY(-4px); border-color: var(--blue-400); box-shadow: var(--shadow);
}

/* motif and title on one line, as on the expeditions table */
.book-head { display: flex; align-items: flex-start; gap: 10px; }
.book-icon { width: 30px; height: 30px; object-fit: contain; flex: none; margin-top: 2px; }
.book-head h3 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: clamp(1.06rem, 1.7vw, 1.22rem); line-height: 1.25;
  min-height: 2.5em;                      /* two lines reserved, so cards align */
}
.book-head h3 a { color: var(--ink); text-decoration: none; }
.book-card:hover h3 a { color: var(--accent-text); }

.book-who { margin: .8em 0 0; color: var(--muted); font-size: .95rem; }

.book-actions {
  margin-top: auto; padding-top: clamp(18px, 2vw, 24px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.book-actions .btn { width: 100%; text-align: center; }
.book-more {
  color: var(--accent-text); font-size: .92rem; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.book-more:hover { border-bottom-color: var(--accent-text); }

@media (max-width: 1000px) { .book-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px)  { .book-grid { grid-template-columns: 1fr; } }

/* ---------- groups, and help choosing ---------- */

.section-help { background: var(--shell); }
.help-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.help-card {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.help-card h2 { margin: 0 0 .5em; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.help-card p { color: var(--muted); }
.help-card .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 820px) { .help-grid { grid-template-columns: 1fr; } }


/* ============================================================
   BOOKING FORM
   ============================================================ */

.section-booking { background: var(--shell); }

.booking-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(24px, 3.4vw, 48px); align-items: start;
}

/* ---------- the steps ---------- */

.booking-form { display: grid; gap: clamp(18px, 2.4vw, 26px); }

.step {
  margin: 0; border: 1px solid var(--line); background: var(--white);
  padding: clamp(22px, 2.8vw, 34px);
}
.step legend {
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px; margin-left: -10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.08rem, 1.9vw, 1.28rem); color: var(--ink);
}
.step-no {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  background: var(--navy-800); color: #fff;
  font-size: .92rem; line-height: 1;
}
.step-note { margin: .9em 0 0; color: var(--muted); font-size: .93rem; }

/* ---------- fields ---------- */

.fld { margin: 0 0 clamp(14px, 1.8vw, 20px); display: flex; flex-direction: column; gap: 6px; }
.fld-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 clamp(16px, 2vw, 24px);
}
.fld label, .pick-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text);
}
.fld abbr { text-decoration: none; color: var(--blue-600); }

.fld input, .fld select, .fld textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.fld input:hover, .fld select:hover { border-color: var(--blue-400); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(39, 122, 188, .22);
}
/* Removed: this greyed the border of any required field that had no
   placeholder, from the moment the page loaded - which is why some boxes
   looked black and others blue. Wrong fields are marked by .is-invalid
   below, once the visitor has actually left them. */

.fld-hint { font-size: .85rem; color: var(--muted); }
.fld-hint.is-warn { color: var(--error); font-weight: 700; }

/* what is wrong, under the field, once they have left it */
.fld-error {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .86rem; line-height: 1.4; color: var(--error);
}
.fld-error::before {
  content: "!"; flex: none;
  display: grid; place-items: center;
  width: 15px; height: 15px; margin-top: 1px;
  background: var(--error); color: #fff;
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
}
.fld.is-invalid input, .fld.is-invalid select, .fld.is-invalid textarea {
  border-color: var(--error);
}
.fld.is-invalid input:focus, .fld.is-invalid select:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 36, 28, .18);
}

/* the select keeps its own arrow rather than the browser's grey one */
/* While the placeholder row is the one selected, the field reads as unfilled -
   the same grey the text fields use for their placeholder. */
.fld input::placeholder, .fld textarea::placeholder { color: var(--placeholder); opacity: 1; }
.fld select:has(option[value=""]:checked) { color: var(--placeholder); }
/* An empty date field: the browser paints dd/mm/yyyy in the field's own text
   colour, so it has to be greyed through these pseudo-elements. */
.fld input[type="date"].is-empty { color: var(--placeholder); }
.fld input[type="date"].is-empty::-webkit-datetime-edit { color: var(--placeholder); }
.fld input[type="date"]:focus { color: var(--ink); }
.fld input[type="date"]:focus::-webkit-datetime-edit { color: var(--ink); }
/* the little calendar button is near-black by default */
.fld input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.fld input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* The open list inherits the select's colour, so the grey would spread to
   every option. State the option colour so only the closed field is grey. */
.fld select option { color: var(--ink); }

.fld-select select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent-text) 50%),
    linear-gradient(135deg, var(--accent-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.fld-check { margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.check span {
  font-family: var(--font-sans); font-weight: 400; letter-spacing: 0;
  text-transform: none; font-size: .95rem; color: var(--muted);
}

/* ---------- choice tiles ---------- */

.pick-label { display: block; margin: 0 0 12px; }

.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.pick-grid-text { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.pick {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick img { width: 38px; height: 38px; object-fit: contain; }
.pick span { font-size: .9rem; color: var(--ink); line-height: 1.3; }
.pick:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.pick:has(input:checked) {
  border-color: var(--accent);
  background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* An empty box sits in the corner from the start, so it is obvious these are
   there to be chosen; the tick is drawn inside it once they are. */
.pick::before {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 18px; height: 18px;
  background: var(--white);
  border: 1.5px solid var(--blue-200);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pick:hover::before { border-color: var(--accent); }
.pick:has(input:checked)::before { background: var(--accent); border-color: var(--accent); }

.pick::after {
  content: ""; position: absolute; top: 15px; right: 14px;
  width: 10px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.6); opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.pick:has(input:checked)::after { opacity: 1; transform: rotate(-45deg) scale(1); }

/* the tiles need room for the box */
.pick { padding-right: 34px; }
.pick-text { padding-right: 40px; }
.pick:focus-within { box-shadow: 0 0 0 3px rgba(39, 122, 188, .22); }

.pick-text { flex-direction: row; align-items: center; text-align: left; padding: 14px 42px 14px 16px; }

/* what a longer stay includes at no extra cost */
.free-extras {
  margin: 0 0 14px; padding: 12px 16px;
  background: var(--blue-100); border-left: 4px solid var(--blue-400);
  color: var(--ink); font-size: .93rem;
}
.free-extras.is-earned { border-left-color: var(--accent); }

/* Choosing the route through the Conservation Divemaster. Same behaviour as
   the expedition tiles above - click to select, the card turns blue - but
   text only, since these are two versions of one programme. */
.track-chooser {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 0 var(--fld-gap, 20px);
}
@media (max-width: 620px) { .track-chooser { grid-template-columns: 1fr; } }

.track-pick {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: var(--white); border: 1px solid var(--line);
  transition: border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease), background .18s var(--ease);
}
.track-pick input { position: absolute; opacity: 0; pointer-events: none; }
.track-name { font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.35; }
.track-meta { font-size: .82rem; color: var(--muted); }
.track-pick:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.track-pick.is-on {
  border-color: var(--accent); background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.track-pick.is-on .track-meta { color: var(--accent-text); }
.track-pick:focus-within { box-shadow: 0 0 0 3px rgba(39, 122, 188, .22); }

/* Three on-site packages, a rule, then the one you take from home. The rule
   is its own column, so the gap either side of it is wider than the gaps
   between the cards it separates. */
.track-chooser-4 {
  grid-template-columns: repeat(3, 1fr) 1px 1fr;
  align-items: stretch;
  column-gap: 12px;
}
/* the rule sits in the middle of a wider gap than the cards get */
.track-chooser-4 .track-split { margin-inline: 6px; }
.track-split {
  /* a grid column of its own, so it needs a width as well as a colour */
  width: 1px; justify-self: center; align-self: stretch;
  background: var(--line); margin: 4px 0;
}
.track-chooser-4 .track-name { font-size: .92rem; }

@media (max-width: 980px) {
  .track-chooser-4 { grid-template-columns: repeat(2, 1fr); }
  .track-split { display: none; }
}
@media (max-width: 480px) { .track-chooser-4 { grid-template-columns: 1fr; } }
.pick.is-free { border-color: var(--accent); background: var(--blue-100); }
.pick-free {
  position: absolute; bottom: 8px; right: 34px;
  font-family: var(--font-display); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}
.pick.is-free { padding-bottom: 26px; }
/* An included course is not a choice, so it does not invite one: no hover
   lift, and the pointer stays an arrow rather than promising a toggle. */
.pick.is-free { cursor: default; }
.pick.is-free:hover { transform: none; border-color: var(--accent); }
.pick-text span { flex: 1; }

/* ---------- the expedition chooser (optional variant) ---------- */

/* Six across on one line. The cards are narrow, so the names are small and
   allowed to wrap - the abbreviation underneath does the identifying. */
.exp-chooser {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.exp-pick {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px 11px; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  transition: border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease), background .18s var(--ease);
}
.exp-pick input { position: absolute; opacity: 0; pointer-events: none; }
.exp-pick img { width: 32px; height: 32px; object-fit: contain; }
.exp-pick-name { font-size: .72rem; line-height: 1.22; color: var(--ink); }
.exp-pick-abbr {
  font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .1em; color: var(--muted);
}
.exp-pick:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.exp-pick.is-on {
  border-color: var(--accent); background: var(--blue-100);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.exp-pick.is-on .exp-pick-abbr { color: var(--accent-text); }
/* two rows of three below the desktop layout, which balances evenly */
@media (max-width: 980px) { .exp-chooser { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .exp-chooser { display: none; } }

/* ---------- summary panel ---------- */

.booking-summary { position: sticky; top: calc(var(--header-h) + 20px); }
.summary-card {
  position: relative; isolation: isolate;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--navy-900); color: #fff;
  border-top: 4px solid var(--blue-400);
}
.summary-icon { width: 54px; height: 54px; object-fit: contain; margin-bottom: 14px; }
.summary-card .eyebrow { color: var(--blue-200); margin-bottom: .3em; }
.summary-card h2 { margin: 0 0 1em; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

.summary-facts { margin: 0; display: grid; gap: 0; }
.summary-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .18);
}
.summary-facts dt {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-200);
}
.summary-facts dd { margin: 0; text-align: right; color: #fff; font-size: .95rem; }

.summary-price-note {
  margin: .9em 0 0; font-size: .82rem; line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}
.summary-progress { margin: 1.4em 0 .5em; color: rgba(255,255,255,.82); font-size: .88rem; }
.summary-bar { height: 4px; background: rgba(255, 255, 255, .2); }
.summary-bar span {
  display: block; height: 100%; width: 0;
  background: var(--blue-400); transition: width .25s var(--ease);
}
.is-complete ~ .booking-summary .summary-bar span { background: var(--blue-200); }

.summary-link {
  display: inline-block; margin-top: 1.4em;
  color: #fff; font-size: .92rem;
  border-bottom: 1px solid rgba(255,255,255,.45);
  text-decoration: none;
}
.summary-link:hover { border-bottom-color: #fff; }

/* ---------- sending ---------- */

.form-actions { margin-top: clamp(18px, 2.2vw, 26px); }
.form-status { margin: 0 0 14px; font-size: .95rem; color: var(--muted); }
.form-status.is-warn {
  padding: 12px 16px; color: var(--ink);
  background: var(--blue-100); border-left: 4px solid var(--accent);
}

/* ---------- confirmation ---------- */

.booking-done {
  grid-column: 1 / -1; max-width: 720px; margin-inline: auto;
  padding: clamp(34px, 4.5vw, 60px); text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.booking-done img { width: 96px; height: 96px; margin: 0 auto 18px; color: var(--accent); }
.booking-done img.done-logo { width: 200px; height: auto; margin-bottom: 22px; }
.booking-done h2 { margin: 0 0 .4em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.done-lede { color: var(--muted); font-size: 1.06rem; }
.done-steps {
  max-width: 46ch; margin: clamp(26px, 3vw, 36px) auto; padding-left: 1.3em;
  text-align: left; color: var(--muted);
}
.done-steps li { margin-bottom: .7em; }
.done-note { color: var(--muted); font-size: .93rem; }
.done-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(22px, 2.6vw, 30px);
}

@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; }
  /* A compact header above the form rather than a tall panel eating the screen:
     the facts go two across and the type comes down a step. */
  .booking-summary { position: static; order: -1; }
  .summary-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; padding: 20px; }
  .summary-icon { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; align-self: center; }
  .summary-card h2 { margin: 0; font-size: 1.15rem; }
  .summary-facts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 18px; margin-top: 12px; }
  .summary-facts > div { padding: 8px 0; }
  .summary-facts dd { font-size: .9rem; }
  .summary-progress { grid-column: 1 / -1; margin: 1em 0 .4em; font-size: .84rem; }
  .summary-bar { grid-column: 1 / -1; }
  .summary-link { display: none; }        /* the form is the job here, not reading on */
}

/* ============================================================
   FIELD SITES PAGE
   ============================================================ */

.section-map { background: var(--shell); }

/* The map sits beside its instructions on a wide screen and above them on a
   narrow one, where a column of text next to a map would squeeze both. */
.map-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(20px, 3vw, 34px); align-items: start;
}
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } }

/* A frame in the site's own colours, so Google's grey and green artwork reads
   as a panel on our page rather than a slab dropped into it. */
.map-frame {
  position: relative;
  border: 1px solid var(--blue-200);
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(4, 45, 98, .16);
  /* the map is drawn at whatever size it is given, so the shape is set here */
  aspect-ratio: 16 / 10;
}
@media (max-width: 900px) { .map-frame { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) { .map-frame { aspect-ratio: 1 / 1; } }
.map-frame iframe {
  display: block; width: 100%; height: 100%; border: 0;
}

/* Full screen, both ways round. The real Fullscreen API gives us :fullscreen;
   .is-fauxfull is the fallback for browsers that refuse it. Either way the
   frame drops its shape and fills what it is given. */
.map-frame:fullscreen,
.map-frame.is-fauxfull { aspect-ratio: auto; border: 0; box-shadow: none; }
.map-frame.is-fauxfull {
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; height: 100%;
}

/* The way back out. Sits over the map, clear of Google's own controls in the
   corners, and only exists while the map is full screen. */
.map-exit {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-family: inherit; font-size: .9rem; font-weight: 700;
  letter-spacing: .04em;
  background: var(--navy-800); color: #fff;
  border: 1px solid var(--navy-800); cursor: pointer;
  transition: background-color .2s ease;
}
.map-exit:hover { background: var(--navy-900); border-color: var(--navy-900); }
.map-exit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.map-aside {
  border: 1px solid var(--blue-200);
  background: var(--paper);
  padding: clamp(18px, 2vw, 24px);
}
.map-hint { margin: 0 0 18px; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.map-hint strong { color: var(--ink); }
.map-aside .btn { width: 100%; text-align: center; }

/* ---------- the editorial opening (ed-intro) ----------
   The first section under the header on Field Sites and the three
   programme pages (Conservation, Research, Education & outreach).
   Editorial rather than boxed: a large headline with its key phrase in
   blue, layered photos - a tall main shot with a bright offset frame and
   a tilted print pinned over its corner - a location pin, and underneath
   a dotted route of links jumping to the parts of the page below. Set
   --n on the route's list to the number of stops (default 4). */

.ed-intro {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(60px, 7.5vw, 104px) 0 clamp(44px, 5.5vw, 72px);
  background: var(--paper);
}

.ed-intro-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}

/* --- words --- */
.ed-intro-title {
  margin: .15em 0 .62em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.1vw, 3.3rem); line-height: 1.08; letter-spacing: -.012em;
  color: var(--ink); text-wrap: balance;
}
.ed-em { color: var(--blue-600); }

.ed-intro-copy p { color: var(--muted); }
/* programme pages: longer statement headlines, so the copy takes a little
   more of the width and the type steps down a touch */
.px-intro .ed-intro-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.px-intro .ed-intro-title { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.12; }
/* the blue phrase starts its own line, so each sentence of the statement
   holds together instead of breaking mid-phrase */
.px-intro .ed-em { display: block; }
.ed-intro-copy .ed-intro-lede {
  color: var(--ink); font-size: clamp(1.08rem, 1.35vw, 1.2rem); line-height: 1.65;
}

/* the closing line of the copy, set off on a dotted rule. Field Sites
   marks it with a pulsing dot (the map is live); the programme pages use
   the starfish, the site's bullet mark. */
.ed-note {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 1.9em; padding-top: 1.5em;
  border-top: 2px dotted var(--blue-200);
}
.ed-note p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink) !important; }
.ed-note::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: .05em;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}

/* the map is live: a pulsing dot, the same beat as the last pin in How it works */
.ed-live {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 1.9em; padding-top: 1.5em;
  border-top: 2px dotted var(--blue-200);
}
.ed-live p { margin: 0; font-size: .96rem; }
.ed-live strong { color: var(--ink); }
.ed-live-dot {
  position: relative; flex: none; width: 12px; height: 12px; margin-top: .42em;
  border-radius: 50%; background: var(--blue-400);
}
.ed-live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--blue-400);
  animation: howsite-pulse 2.2s ease-out infinite;
}

/* --- photos --- */
.ed-intro-media { position: relative; isolation: isolate; padding-bottom: 58px; }
.ed-photo-main {
  position: relative; margin: 0 0 0 auto; width: 86%; aspect-ratio: 4 / 5;
}
.ed-photo-main img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.ed-photo-main::before {                 /* the offset frame */
  content: ""; position: absolute; z-index: -1; inset: -22px -22px 22px 22px;
  border: 2px solid var(--blue-400);
}
.ed-photo-inset {
  position: absolute; left: 0; bottom: 0; margin: 0;
  width: 50%; aspect-ratio: 4 / 3;
  border: 8px solid var(--paper); box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.ed-photo-inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ed-intro-media:hover .ed-photo-inset { transform: rotate(0deg) translateY(-6px); }

.ed-pin-tag {
  position: absolute; top: 36px; left: calc(14% - 26px); z-index: 1; margin: 0;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 16px 10px 13px;
  background: var(--paper); box-shadow: var(--shadow);
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text);
}
.ed-pin {
  position: relative; width: 15px; height: 15px; flex: none;
  background: var(--blue-600); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.ed-pin::after {
  content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--paper);
}

/* --- the four habitats, on a dotted route --- */
.ed-jump {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 60px);
  margin-top: clamp(50px, 6vw, 82px); padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.ed-jump-label {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.06rem; line-height: 1.35; color: var(--ink);
}
.ed-jump ul {
  position: relative; list-style: none; margin: 0; padding: 0;
  --n: 4;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.ed-jump ul::before {                  /* runs from the first icon's centre to the last's */
  content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 31px;
  border-top: 2px dotted var(--blue-200);
}
.ed-jump a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: .95rem;
  text-align: center; line-height: 1.3;
}
.ed-jump img {
  width: 62px; height: 62px; padding: 5px 9px; object-fit: contain;
  background: var(--paper);            /* breaks the dotted line around each icon */
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ed-jump span { border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease; }
.ed-jump a:hover img,
.ed-jump a:focus-visible img { transform: translateY(-5px) rotate(-6deg); }
.ed-jump a:hover span,
.ed-jump a:focus-visible span { color: var(--accent-text); border-color: var(--blue-400); }
.ed-jump a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .ed-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-intro-media { max-width: 560px; width: 100%; margin: 0 auto; }
  .ed-jump { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ed-jump-label br { display: none; }
}
@media (max-width: 560px) {
  .ed-jump ul { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .ed-jump ul::before { display: none; }
  .ed-photo-main::before { inset: -12px -12px 12px 12px; }
  .ed-photo-inset { border-width: 5px; }
  .ed-intro-media { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-live-dot::after { animation: none; }
  .ed-photo-inset, .ed-jump img { transition: none; }
}

/* ---------- how a site joins the map ----------
   A route across a sea chart: navy ground with faint depth contours, four
   map pins joined by a dotted line that dips and rises between them, and a
   card hanging under each pin. The last pin is bright and pulses - that is
   the moment the site appears on the map. Below 1020px the route turns
   into a vertical line down the left with the cards beside it. */

.section-howsite {
  --route-drop: 64px;          /* how far the even stops sit below the odd */
  --pin: 46px;
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(170deg, var(--navy-900) 0%, var(--navy-800) 100%);
}
.section-howsite .eyebrow { color: var(--blue-200); }

.howsite-route { position: relative; }
.howsite-line {
  position: absolute; left: 0; right: 0; z-index: 0;
  top: calc(var(--pin) / 2); height: var(--route-drop); width: 100%;
  overflow: visible; pointer-events: none;
}
.howsite-line path {
  fill: none; stroke: var(--blue-200); stroke-width: 2.5;
  stroke-linecap: round; stroke-dasharray: .5 9;
  vector-effect: non-scaling-stroke;
  animation: howsite-march 1.6s linear infinite;
}
@keyframes howsite-march { to { stroke-dashoffset: -19; } }

/* No column gap: spacing lives in each stop's padding, so column centres
   fall exactly on 12.5 / 37.5 / 62.5 / 87.5% - where the line's bends are. */
.howsite-steps {
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
}
.howsite-steps li { padding: 0 clamp(8px, 1.1vw, 14px); display: flex; flex-direction: column; align-items: center; }
.howsite-steps li:nth-child(even) { margin-top: var(--route-drop); }

.howsite-pin {
  position: relative; flex: none;
  width: var(--pin); height: var(--pin);
  display: grid; place-items: center;
  background: var(--white); color: var(--navy-900);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 0 0 5px rgba(4, 45, 98, .9), 4px 8px 16px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.howsite-pin b { transform: rotate(45deg); font-size: 1.12rem; font-weight: 800; line-height: 1; }
/* every pin the same white: the steps are not something to click between */
.howsite-steps .is-last .howsite-pin::after { content: none; }
@keyframes howsite-pulse {
  from { opacity: .9; transform: scale(1); }
  to   { opacity: 0;  transform: scale(1.7); }
}

.howsite-card {
  position: relative; width: 100%; margin-top: 22px;
  background: var(--paper);
  padding: clamp(22px, 2.2vw, 28px) clamp(18px, 1.9vw, 24px) clamp(22px, 2.2vw, 28px);
  box-shadow: var(--shadow-lg);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* the pin's shadow on the card: a small notch of light blue under the tip */
.howsite-card::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 3px;
  transform: translateX(-50%); background: var(--blue-400);
}
.howsite-steps li:hover .howsite-card { transform: translateY(-4px); box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .55); }
.howsite-steps li:hover .howsite-pin { transform: rotate(-45deg) translate(3px, -3px); }

.howsite-ico {
  display: block; width: 34px; height: 34px; margin-bottom: 14px;
  fill: none; stroke: var(--blue-600); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.howsite-steps h3 { margin: 0 0 .5em; font-size: 1.08rem; line-height: 1.3; color: var(--ink); }
.howsite-steps p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.65; }

@media (max-width: 1020px) {
  .howsite-line { display: none; }
  .howsite-steps { grid-template-columns: 1fr; gap: 26px; max-width: 660px; margin: 0 auto; }
  .howsite-steps li,
  .howsite-steps li:nth-child(even) {
    margin: 0; padding: 0 0 0 calc(var(--pin) + 26px);
    display: block; position: relative;
  }
  .howsite-pin { position: absolute; left: 0; top: 18px; }
  /* the route, now running down the left edge from pin to pin */
  .howsite-steps li:not(:last-child)::before {
    content: ""; position: absolute; left: calc(var(--pin) / 2 - 1px);
    top: calc(18px + var(--pin)); bottom: -44px; width: 0;
    border-left: 3px dotted var(--blue-200);
  }
  .howsite-card { margin: 0; }
  .howsite-card::before { top: 38px; left: 0; width: 3px; height: 26px; transform: none; }
}
@media (max-width: 480px) {
  .section-howsite { --pin: 38px; }
  .howsite-steps li, .howsite-steps li:nth-child(even) { padding-left: calc(var(--pin) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .howsite-line path, .howsite-steps .is-last .howsite-pin::after { animation: none; }
  .howsite-card, .howsite-pin { transition: none; }
}

/* ---------- the four kinds of site ----------
   One card per habitat, 2 x 2. Each card shares its rows with its
   neighbour (subgrid), so the "site in focus" panels and the button rows
   line up across the pair whatever the length of the text. The habitat icon
   sits in front of the card's heading. */

.section-ecosites { background: var(--paper); }

.ecosite-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 40px);
}
.ecosite {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  background: var(--paper);
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ecosite:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.ecosite-photo { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.ecosite-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ecosite-intro { padding: clamp(22px, 2.4vw, 28px) clamp(22px, 2.4vw, 30px) 0; }
.ecosite-intro h3 {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 .5em; font-size: 1.3rem; line-height: 1.2; color: var(--ink);
}
.ecosite-icon {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ecosite:hover .ecosite-icon { transform: translateY(-3px) rotate(-6deg); }
.ecosite-intro p { margin: 0 0 1.4em; color: var(--muted); font-size: .96rem; line-height: 1.7; }

/* one site of this kind worth knowing: a tinted panel tagged with a small
   map pin, the same pin the How it works route uses */
.ecosite-focus {
  margin: 0 clamp(22px, 2.4vw, 30px);
  padding: 18px 20px 20px;
  background: var(--shell);
  border-left: 3px solid var(--accent);
}
.ecosite-focus-tag {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 .45em; font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.ecosite-focus-tag::before {
  content: ""; width: 11px; height: 11px; flex: none;
  background: var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.ecosite-focus h4 { margin: 0 0 .35em; font-size: 1.04rem; color: var(--ink); }
.ecosite-focus p:last-child { margin: 0; color: var(--grey-500); font-size: .93rem; line-height: 1.65; }

.ecosite-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px;
  padding: 22px clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 30px);
}
.ecosite-work {
  flex: 1 1 220px; margin: 0;
  font-size: .82rem; font-weight: 700; letter-spacing: .03em; line-height: 1.55;
  color: var(--accent-text);
}
.ecosite-btn { padding: 10px 20px; font-size: .92rem; }

@media (max-width: 820px) {
  .ecosite-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ecosite, .ecosite-icon { transition: none; }
}


/* ============================================================
   CONSERVATION DIVEMASTER PAGE
   The page otherwise reuses the shared expedition sections; these are
   the four it adds.
   ============================================================ */

/* ---------- stay longer: what a longer stay adds ---------- */

.section-tiers { background: var(--shell); }
.tier-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(22px, 2.6vw, 32px);
}
.tier {
  background: var(--paper);
  border: 1px solid var(--blue-200);
  border-top: 4px solid var(--accent);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column;
}
.tier-when {
  margin: 0 0 1em;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.tier h3 { margin: 0 0 .4em; font-size: 1.1rem; color: var(--ink); }
.tier h3 + p { margin: 0 0 1.4em; }
.tier p { color: var(--muted); font-size: .95rem; line-height: 1.65; }
.tier-note { font-style: italic; }
.tier-cost {
  margin: auto 0 0 !important; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .82rem !important; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text) !important;
}

/* ---------- the add-on note, inside the dark skills band ---------- */

.addon-note {
  max-width: 74ch; margin: clamp(34px, 4vw, 50px) auto 0;
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, .32);
}
.addon-note h3 {
  margin: 0 0 .7em; color: #fff;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.addon-note p { color: rgba(255, 255, 255, .90); line-height: 1.7; }
.addon-note p + p { margin-bottom: 0; }
/* The one number people are looking for in that section. */
.addon-fee {
  margin-top: 1.2em !important;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .12);
  border-left: 3px solid var(--blue-200);
  color: #fff !important;
}

/* ---------- the three intakes ---------- */

.section-intakes { background: var(--paper); }
.intake-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px; background: var(--blue-200);       /* shows through as hairlines */
  border: 1px solid var(--blue-200);
}
.intake { background: var(--paper); padding: clamp(24px, 2.6vw, 32px); text-align: center; }
.intake-month {
  margin: 0 0 .3em;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--ink);
}
.intake p:last-child { margin: 0; color: var(--muted); font-size: .92rem; }
.intake-note {
  max-width: 74ch; margin: clamp(28px, 3.4vw, 40px) auto 0;
  color: var(--muted); line-height: 1.75; text-align: center;
}
.intake-note strong { color: var(--ink); }

/* ---------- the route in, for divers not yet qualified ---------- */

.prereq-path {
  max-width: 900px; margin: clamp(36px, 4.5vw, 56px) auto 0;
  padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--line);
}
.prereq-path h3 {
  margin: 0 0 .6em;
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
}
.prereq-path > p { color: var(--muted); }
.prereq-path .cmp-scroll { margin: 24px 0 0; }
.prereq-path-note { margin-top: 20px; font-size: .95rem; }


/* ============================================================
   FAQs PAGE
   ============================================================ */


.faq-index { background: var(--shell); padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); }

.faq-grid {
  display: grid; grid-template-columns: 42fr 58fr;
  column-gap: clamp(36px, 5vw, 64px); align-items: start;
}
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; row-gap: 40px; } }

/* ---- left: what this page is, and the search ---- */

.faq-eyebrow {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.faq-headline {
  margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--ink);
  max-width: 14ch; text-wrap: balance; line-height: 1.15;
}
.faq-lede { margin: 12px 0 0; max-width: 42ch; color: var(--ink); font-size: .98rem; line-height: 1.65; }

.faq-search-wrap { position: relative; margin: 28px 0 0; }
.faq-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--accent); pointer-events: none;
}
#faqSearch {
  width: 100%; height: 56px; padding: 0 18px 0 48px;
  font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 0;
}
#faqSearch::placeholder { color: var(--placeholder); }
#faqSearch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq-count {
  margin: 10px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text);
}

/* ---- right: the directory ---- */

/* Nudged down so the two columns finish at roughly the same point - which is
   what makes an asymmetric split look deliberate. */
.faq-dir { padding-top: 62px; }
@media (max-width: 900px) { .faq-dir { padding-top: 0; } }

.faq-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 40px); }
@media (max-width: 620px) { .faq-rows { grid-template-columns: 1fr; } }

.faq-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 14px 10px; min-height: 48px;
  text-decoration: none; border-bottom: 1px solid var(--line);
  transition: background-color .18s var(--ease), padding-left .18s var(--ease);
}
.faq-row-name { font-size: .98rem; color: var(--ink); line-height: 1.3; }
/* The same marker the homepage expedition rows use, so a row that takes you
   somewhere looks the same wherever it appears on the site. */
.faq-row-go {
  color: var(--accent-text); font-size: 1.3rem; line-height: 1;
  transition: transform .2s var(--ease);
}
.faq-row:hover .faq-row-go,
.faq-row:focus-visible .faq-row-go { transform: translateX(6px); }
/* the same tint an open question uses, so the page speaks one language */
.faq-row:hover, .faq-row:focus-visible {
  background: rgba(182, 224, 255, .45); padding-left: 14px; outline: none;
}
.faq-row:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
/* Back to the index. It appears only after a jump, because before that there
   is nowhere to go back to, and hides again near the top so it never covers
   the index it would return you to. */
.faq-top, .to-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  font: inherit; font-size: .88rem; font-weight: 700; color: #fff;
  background: var(--navy-800); border: 1px solid var(--navy-800); cursor: pointer;
  box-shadow: 0 10px 26px rgba(4, 45, 98, .34);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease),
              background-color .18s var(--ease);
}
.faq-top.is-shown, .to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.faq-top:hover, .to-top:hover { background: var(--navy-900); border-color: var(--navy-900); }
.faq-top:focus-visible, .to-top:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .faq-top, .to-top { transition: opacity .01s linear; transform: none; }
}


/* ---------- the questions ---------- */

.section-faqs { background: var(--paper); }

.faq-cat + .faq-cat { margin-top: clamp(44px, 5.5vw, 72px); }
/* the header bar is fixed, so an anchored heading needs room above it */
.faq-cat { scroll-margin-top: 96px; }
/* The heading sits on a navy band that fades out to the right, so each
   category announces itself without a rule under it. The gradient holds solid
   navy well past the end of the longest heading, so the white type is never
   over the pale end. */
.faq-cat-head {
  /* full width, matching the questions beneath and the index block above */
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  padding: 14px 22px;
  background: linear-gradient(90deg,
              var(--navy-900) 0%,
              var(--navy-800) 40%,
              rgba(7, 61, 132, 1) 54%,
              rgba(7, 61, 132, .82) 64%,
              rgba(7, 61, 132, .58) 73%,
              rgba(7, 61, 132, .34) 82%,
              rgba(7, 61, 132, .16) 89%,
              rgba(7, 61, 132, .05) 95%,
              rgba(7, 61, 132, 0) 100%);
}
.faq-cat-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #fff; }

/* The questions run the full width of the section, matching the index block
   above them - capped at 820px they read as a narrow column under a much
   wider one. The answers keep their own 74ch measure, so a long line of text
   still breaks where it is comfortable to read. */
.section-faqs .faq-list { max-width: none; }

/* ---------- each category on a raised card ----------

   The whole category - bar and questions - sits on a white card lifted off
   the page. The bar keeps the gradient it already has and runs the full width
   of the card, escaping the card's padding through matching negative margins,
   so the two cannot drift apart if the padding is ever changed.

   Every category carries this. */

.faq-cat.is-card {
  --card-pad: clamp(18px, 2.2vw, 26px);
  background: var(--paper);
  padding: var(--card-pad);
  margin-bottom: clamp(30px, 3.6vw, 46px);
  box-shadow:
    0 2px 4px rgba(4, 45, 98, .06),
    0 18px 40px -12px rgba(4, 45, 98, .26);
}
.faq-cat.is-card .faq-cat-head {
  /* flush to the card's top and both sides */
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1)
          clamp(14px, 1.8vw, 20px);
  padding-left: calc(var(--card-pad) + 22px);
  padding-right: calc(var(--card-pad) + 22px);
}
/* the last question's rule would otherwise sit just above the card's edge */
.faq-cat.is-card .faq:last-child { border-bottom: 0; }

/* Lists inside an answer, which the shared .faq-body does not cover. */
.faq-points { margin: .2em 0 1em; padding-left: 1.3em; }
.faq-points li { margin-bottom: .5em; color: var(--muted); line-height: 1.7; }
.faq-points li strong { color: var(--ink); }
.faq-body p + p { margin-top: .9em; }

/* Open questions light up. The tint is the palest brand blue at reduced
   opacity, so it reads as "this one is open" without competing with the navy
   heading band above it. The padding is there whether open or not, so nothing
   shifts sideways when a question is opened. */
.section-faqs .faq {
  padding-inline: 16px;
  transition: background-color .22s var(--ease);
}
.section-faqs .faq[open] { background: rgba(182, 224, 255, .45); }

/* Answers on this page are set in the body ink rather than the muted grey.
   There is a lot of reading here, and the grey was doing the job of a caption
   on text that is the point of the page. Scoped to the FAQs page so the short
   FAQ blocks on other pages keep their lighter treatment. */
.section-faqs .faq-body p,
.section-faqs .faq-points li { color: var(--ink); }

.faq-empty {
  max-width: 820px; margin: 0 auto; padding: 28px;
  text-align: center; color: var(--muted);
  border: 1px solid var(--blue-200); background: var(--shell);
}


/* ============================================================
   EXPEDITION FEES - calculator, what it covers, and the dialog
   ============================================================ */

.fee-section { background: var(--shell); }

.fee-grid {
  display: grid; grid-template-columns: 38fr 62fr;
  gap: clamp(30px, 4vw, 52px); align-items: start;
}
@media (max-width: 980px) { .fee-grid { grid-template-columns: 1fr; } }

/* The price follows you down the list, so the two halves stay related however
   long the included list gets. */
.fee-calc { position: sticky; top: 104px; }
@media (max-width: 980px) { .fee-calc { position: static; } }

.fee-title { margin: 0 0 clamp(24px, 3vw, 34px); }

/* ---- the control ---- */

.fee-weeks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fee-weeks-label, .fee-range {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}
.fee-range { color: var(--muted); }
.fee-stepper { display: flex; border: 1px solid var(--blue-200); background: var(--paper); }
.fee-step {
  width: 46px; height: 52px; font-size: 1.3rem; line-height: 1;
  background: var(--paper); color: var(--accent-text); border: 0; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.fee-step:hover { background: var(--accent); color: #fff; }
.fee-step:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.fee-step[disabled] { color: var(--line); cursor: default; background: var(--paper); }
/* Both boxes sit between a minus and a plus, so the browser's own spinner
   arrows are redundant and only make the two steppers look unalike. */
.fee-input, .fee-extra-input {
  width: 74px; height: 52px; text-align: center;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink);
  background: var(--paper); border: 0; border-inline: 1px solid var(--blue-200);
  -moz-appearance: textfield; appearance: textfield;
}
.fee-input::-webkit-outer-spin-button,
.fee-input::-webkit-inner-spin-button,
.fee-extra-input::-webkit-outer-spin-button,
.fee-extra-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fee-input:focus-visible,
.fee-extra-input:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.fee-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* the extra-weeks control belongs to the packages above it */
.fee-extra { margin-top: 18px; }
.fee-extra[hidden] { display: none; }
.fee-pack {
  padding: 13px 14px; font: inherit; font-size: .92rem; text-align: left;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.fee-pack:hover { border-color: var(--blue-400); }
/* The chosen package fills with the header navy, so the selection reads at a
   glance rather than as a slightly bluer white. */
.fee-pack.is-on {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
  box-shadow: inset 0 0 0 1px var(--navy-800);
}
.fee-pack.is-on:hover { border-color: var(--navy-900); background: var(--navy-900); }

/* ---- the answer ---- */

.fee-total { margin: clamp(26px, 3vw, 36px) 0 0; line-height: 1; }
.fee-total-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.4rem); color: var(--ink); font-variant-numeric: tabular-nums;
}
.fee-per { margin: 10px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--accent-text); }
.fee-idr { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.fee-rule {
  margin: 20px 0 0; max-width: 46ch; color: var(--ink); font-size: .93rem; line-height: 1.7;
  padding-top: 16px; border-top: 1px solid rgba(4, 45, 98, .16);
}
/* The foot of the section: centred, under both columns. */
.fee-foot {
  margin-top: clamp(28px, 3.4vw, 42px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(4, 45, 98, .16);
  text-align: center;
}
/* On the A-Level this carries the sentence as well, which reads better
   centred and held to a comfortable measure. */
.fee-foot .fee-rule {
  /* A little wider, and balanced, so the sentence sets as two even lines
     rather than two full ones and a single orphaned word. */
  margin: 0 auto 22px; max-width: 76ch;
  text-wrap: balance;
  padding-top: 0; border-top: 0;
}
.fee-book { margin: 0; }

/* ---- what the fee covers: the existing boxes, kept as they are ---- */

/* Side by side, not stacked: two shorter boxes sit level with the price,
   where one on top of the other towered over it. */
.fee-box h3 { margin-bottom: 14px; }
.fee-covers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); align-items: start; }
@media (max-width: 720px) { .fee-covers { grid-template-columns: 1fr; } }
.fee-box { background: var(--white); align-self: start; }          /* .incl-yes / .incl-no keep their top rules */
.fee-yes, .fee-no { list-style: none; margin: 0; padding: 0; }
/* Both boxes stand to the same height, so the pair sits level with the price
   whatever the lists happen to contain. */
.fee-box {
  display: flex; flex-direction: column;
  padding: 0;                              /* the bar reaches the edges */
}
.fee-box-in { padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px) 0; flex: 1 1 auto; }

/* The cut, and the fade that admits to it: the last line dissolves rather than
   stopping mid-word, which is what tells you there is more to read. */
.fee-clip {
  height: var(--fee-clip, 360px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%);
  transition: height .28s var(--ease);
}
.fee-box.is-open .fee-clip {
  height: auto;
  -webkit-mask-image: none; mask-image: none;
}

/* A bar, not a button: full width, flush to the box, sitting on a rule. */
.fee-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 16px; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  border: 0; border-top: 1px solid var(--accent);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
/* Filled at rest, white under the pointer - the reverse of the usual, so the
   bar reads as the thing to press before anyone goes looking for it. */
.fee-bar:hover { background: var(--white); color: var(--accent-text); border-top-color: var(--blue-200); }
.fee-bar:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* an arrow rather than a chevron: this opens something rather than unfolding it */
.fee-bar::after {
  content: ""; flex: 0 0 9px; height: 9px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.fee-bar:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* the not-included box takes the grey of its own top rule */
.incl-no .fee-bar { color: #fff; background: var(--grey-500); border-top-color: var(--grey-500); }
.incl-no .fee-bar:hover { background: var(--white); color: var(--muted); border-top-color: var(--line); }

/* ---- the dialog ---- */

.fee-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.fee-modal[hidden] { display: none; }
.fee-modal-veil { position: absolute; inset: 0; background: rgba(4, 45, 98, .72); backdrop-filter: blur(3px); }
.fee-modal-card {
  position: relative;
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88vh, 720px);
  background: var(--white);
  border-top: 4px solid var(--accent);
  box-shadow: 0 30px 70px rgba(4, 45, 98, .42);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.fee-modal.is-open .fee-modal-card { opacity: 1; transform: none; }
/* the not-included list brings its own colour to the top rule */
.fee-modal.is-no .fee-modal-card { border-top-color: var(--grey-500); }

.fee-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 40px; height: 40px; line-height: 1;
  font-size: 1.6rem; color: var(--muted);
  background: none; border: 0; cursor: pointer;
}
.fee-modal-close:hover { color: var(--ink); }
.fee-modal-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.fee-modal-body { padding: clamp(26px, 3vw, 38px); max-height: min(88vh, 720px); overflow-y: auto; }
.fee-modal-prog {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
}
.fee-modal-body h2 { margin: 0 0 22px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ink); }
/* two columns, which is what lets a twelve-item list sit in one card */
.fee-modal-body ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(24px, 3vw, 44px);
}
@media (max-width: 640px) { .fee-modal-body ul { columns: 1; } }
.fee-modal-body li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: .95rem; line-height: 1.55; color: var(--ink); break-inside: avoid;
}
.fee-modal-body li::before {
  content: ""; position: absolute; left: 2px; top: .38em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.fee-modal.is-no .fee-modal-body li { color: var(--muted); }
.fee-modal.is-no .fee-modal-body li::before {
  width: 10px; height: 2px; top: .52em; left: 4px;
  border: 0; background: var(--grey-500); transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fee-modal-card { transition: opacity .01s linear; transform: none; }
}

/* With no JavaScript the bar cannot do anything, so nothing is hidden. */
.incl-no .fee-more > summary:hover { background: var(--grey-500); border-color: var(--grey-500); color: #fff; }
.fee-yes li, .fee-no li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: .93rem; line-height: 1.55; color: var(--ink);
  break-inside: avoid;
}
.fee-yes li::before {
  content: ""; position: absolute; left: 2px; top: .38em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.fee-no li { color: var(--muted); }
.fee-no li::before {
  content: ""; position: absolute; left: 4px; top: .52em;
  width: 10px; height: 2px; background: var(--grey-500);
}

/* With no JavaScript the bars cannot open anything, so nothing is hidden
   and the clipped lists are shown in full. */
.no-js .fee-clip { height: auto; -webkit-mask-image: none; mask-image: none; }
.no-js .fee-bar { display: none; }

/* ============================================================
   DIVE COURSES & WORKSHOPS
   ============================================================ */

/* ---------- find your course: anchors into the page ---------- */

.section-dcnav { background: var(--shell); }

.dc-nav {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 18px);
}
@media (max-width: 900px) { .dc-nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dc-nav { grid-template-columns: 1fr; } }

.dc-nav-card {
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center;
  height: 100%; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--blue-200);
  text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.dc-nav-card img { grid-row: 1 / 3; width: 48px; height: 48px; object-fit: contain; }

/* ---- with a photograph instead of an icon ----

   The picture runs the full height of the card and reaches its edge, so it
   reads as part of the card rather than a thumbnail sitting inside one. An
   icon needs padding around it; a photograph needs none. */

.section-dcnav.has-photos .dc-nav-card {
  grid-template-columns: 96px 1fr; column-gap: 18px;
  padding: 0 18px 0 0; align-items: center;
}
.section-dcnav.has-photos .dc-nav-card img {
  grid-row: 1 / 3;
  width: 96px; height: 100%; min-height: 86px;
  object-fit: cover;                  /* an icon fits, a photograph fills */
}
@media (max-width: 560px) {
  .section-dcnav.has-photos .dc-nav-card img { min-height: 76px; }
}
.dc-nav-name { font-weight: 700; color: var(--ink); font-size: .98rem; line-height: 1.25; }
.dc-nav-desc { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.dc-nav-card:hover, .dc-nav-card:focus-visible {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 12px 26px rgba(4, 45, 98, .14);
}

/* ---------- course cards ---------- */

.section-padi { background: var(--paper); }

.dc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.dc-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .dc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .dc-grid, .dc-grid-2 { grid-template-columns: 1fr; } }

.dc-card {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: clamp(20px, 2.2vw, 26px);
  scroll-margin-top: 96px;              /* the header is fixed */
  transition: box-shadow .2s var(--ease);
}
.dc-card:hover { box-shadow: 0 14px 30px rgba(4, 45, 98, .12); }
.section-workshops .dc-card { border-top-color: var(--blue-400); }

.dc-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.dc-icon { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.dc-card h3 { margin: 0; font-size: 1.08rem; color: var(--ink); line-height: 1.25; }
.dc-tagline { margin: .3em 0 0; font-size: .9rem; color: var(--muted); line-height: 1.45; }

/* At a glance: the four things people want before they open anything. */
.dc-glance {
  margin: 0; display: grid; gap: 1px;
  background: var(--blue-200); border: 1px solid var(--blue-200);
}
.dc-glance > div {
  display: flex; justify-content: space-between; gap: 12px;
  background: var(--paper); padding: 9px 12px;
}
.dc-glance dt {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.dc-glance dd { margin: 0; font-size: .88rem; font-weight: 700; color: var(--accent-text); text-align: right; }
.dc-glance-tight > div { padding: 8px 12px; }
.dc-glance-stack > div { padding: 11px 14px; }

/* ---------- the accordion ---------- */

.dc-more { margin-top: 16px; }
.dc-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.dc-more > summary::-webkit-details-marker { display: none; }
.dc-more > summary:hover { background: var(--paper); color: var(--accent-text); }
.dc-more > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dc-more > summary::after {
  content: ""; flex: 0 0 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.dc-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dc-more[open] > summary span::after { content: " - close"; }

.dc-body { padding: 18px 2px 4px; }
.dc-body p { margin: 0 0 1em; color: var(--ink); font-size: .95rem; line-height: 1.7; }
.dc-body h4 {
  margin: 1.4em 0 .5em; font-size: .82rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-text);
}
.dc-body h4:first-child { margin-top: 0; }
.dc-points { list-style: none; margin: 0 0 1em; padding: 0; }
.dc-points li {
  position: relative; padding-left: 24px; margin-bottom: .5em;
  font-size: .93rem; line-height: 1.55; color: var(--ink);
}
.dc-points li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.dc-ask { margin: 1.2em 0 0 !important; }

/* ---------- the refresher, deliberately quieter ---------- */

.dc-refresher {
  display: grid; grid-template-columns: 1fr 280px; gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(28px, 3.4vw, 44px); padding: clamp(22px, 2.6vw, 30px);
  background: var(--shell); border: 1px solid var(--blue-200);
}
@media (max-width: 820px) { .dc-refresher { grid-template-columns: 1fr; } }
.dc-refresher h3 { margin: 0 0 .5em; font-size: 1.1rem; color: var(--ink); }
.dc-refresher p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.7; }
/* No colour override: this bar takes the same treatment as View course
   details - accent blue with white type, going white on hover - so every
   openable bar on the page behaves identically. */

/* ---------- the Divemaster band ---------- */

.section-dcfeature {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
/* The Support-page spread on navy: the words on the text column, the
   photograph running off the right edge for the full height of the band,
   and a darker tab of key facts hung across its foot. */
.dcf { overflow: hidden; }
.dcf-copy { grid-column: text; align-self: center; min-width: 0; padding: clamp(72px, 9vw, 120px) 0; }
.dcf .dc-feature-actions .btn { white-space: normal; text-align: center; max-width: 100%; }
.dcf .dcf-label { color: var(--blue-200); }
.dcf .dcf-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-400); }
.dcf-title {
  margin: 0 0 .5em; color: #fff; font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  line-height: 1.05; letter-spacing: -.025em; text-wrap: balance;
}
.dcf-copy > p:not(.dcf-label):not(.dcf-next) { color: rgba(255, 255, 255, .88); font-size: 1.06rem; line-height: 1.7; max-width: 46ch; }
.dc-feature-actions { margin-top: 30px; }
.dcf-next { margin: 18px 0 0; font-size: .9rem; color: var(--blue-200); }
.dcf-next span { color: #fff; font-weight: 600; }
.dcf-fig { grid-column: photo / bleed-r; position: relative; margin: 0; min-height: 560px; }
.dcf-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.dcf-tab {
  position: absolute; left: clamp(-40px, -3vw, -24px); bottom: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, auto);
  background: var(--navy-900); color: #fff; box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .55);
}
.dcf-tab > div { padding: 20px clamp(18px, 2.2vw, 28px) 18px; border-left: 1px solid rgba(255, 255, 255, .16); }
.dcf-tab > div:first-child { border-left: 0; }
.dcf-tab strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1; }
.dcf-tab strong span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.dcf-tab > div > span { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.35; color: var(--blue-200); }
@media (max-width: 900px) {
  .dcf-copy { padding-bottom: 44px; }
  .dcf-fig { grid-column: bleed-l / bleed-r; min-height: 0; padding-bottom: 32px; }
  .dcf-fig > img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .dcf-tab { position: relative; left: auto; bottom: auto; margin: -44px var(--gutter) 0; }
}
@media (max-width: 520px) {
  .dcf-tab { grid-template-columns: 1fr 1fr; }
  .dcf-tab > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
}

/* ---------- Reef Check ---------- */

.section-reefcheck { background: var(--shell); }

.rc-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: clamp(26px, 3.4vw, 48px);
  align-items: start;
}
@media (max-width: 980px) { .rc-grid { grid-template-columns: 1fr; } }
.rc-copy p { color: var(--ink); line-height: 1.75; margin: 0 0 1em; }
.rc-sub {
  margin: clamp(24px, 3vw, 34px) 0 16px; font-size: .82rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-text);
}

/* The four days as a path, so the shape of the course is visible at a glance. */
.rc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rc-steps li {
  position: relative; padding: 0 0 22px 34px;
  border-left: 2px solid var(--blue-200);
}
.rc-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
/* Coral marks the days, the same way the starfish marks the requirements and
   the turtle the skills. The line behind it is hidden where the coral sits,
   so the artwork is not crossed through by it. */
.rc-steps li::before {
  content: ""; position: absolute; left: -12px; top: 0;
  width: 22px; height: 22px;
  background:
    url("../assets/icons/branching_coral_small.svg") center / contain no-repeat,
    var(--shell);
}
.rc-day {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
}
.rc-steps h4 { margin: .2em 0 .3em; font-size: 1.02rem; color: var(--ink); }
.rc-steps p { margin: 0; font-size: .93rem; color: var(--muted); line-height: 1.6; }

.rc-panel {
  background: var(--paper); border: 1px solid var(--blue-200);
  border-top: 4px solid var(--accent);
  padding: clamp(20px, 2.4vw, 28px);
}
.rc-panel h3 { margin: 22px 0 12px; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.rc-note { margin: 0 0 18px; font-size: .86rem; color: var(--muted); }
.rc-panel .btn { width: 100%; text-align: center; }

/* ---------- workshops ---------- */

.section-workshops { background: var(--paper); }
.dc-availability {
  max-width: 70ch; margin: clamp(26px, 3vw, 38px) auto 0;
  text-align: center; color: var(--muted); font-size: .95rem;
}

/* ---------- course details in a dialog ---------- */

.dc-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.dc-modal[hidden] { display: none; }
.dc-modal-veil { position: absolute; inset: 0; background: rgba(4, 45, 98, .72); backdrop-filter: blur(3px); }

.dc-modal-card {
  position: relative;
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  max-height: min(92vh, 880px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border-top: 4px solid var(--accent);
  box-shadow: 0 30px 70px rgba(4, 45, 98, .42);
  opacity: 0; transform: translateY(12px) scale(.985);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.dc-modal.is-open .dc-modal-card { opacity: 1; transform: none; }

.dc-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 40px; height: 40px; line-height: 1; font-size: 1.6rem;
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.dc-modal-close:hover { color: var(--ink); }
.dc-modal-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.dc-modal-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 38px) 0;
}
.dc-modal-icon { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }
.dc-modal-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink); }
.dc-modal-tagline { margin: .3em 0 0; color: var(--muted); font-size: .98rem; }

.dc-modal-body { padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 38px) clamp(26px, 3vw, 36px); }
/* the at-a-glance runs across the top of the dialog rather than down its side */
.dc-modal-body .dc-glance {
  grid-auto-flow: column; grid-auto-columns: 1fr;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 700px) {
  .dc-modal-body .dc-glance { grid-auto-flow: row; grid-auto-columns: auto; }
}
.dc-modal-body .dc-glance > div { flex-direction: column; align-items: flex-start; gap: 4px; }
.dc-modal-body .dc-glance dd { text-align: left; }
.dc-modal-body .dc-body { padding: 0; }
/* two columns, so a long course does not become a long scroll */
.dc-modal-body .dc-body { columns: 2; column-gap: clamp(28px, 3.4vw, 48px); }
/* A touch tighter inside the dialog than inside a card: the longest course
   then fits without a scroll on a normal screen. */
.dc-modal-body .dc-body p { margin-bottom: .8em; line-height: 1.6; }
.dc-modal-body .dc-body h4 { margin: 1em 0 .4em; }
.dc-modal-body .dc-points li { margin-bottom: .35em; line-height: 1.45; }
.dc-modal-body .dc-body > * { break-inside: avoid; }
.dc-modal-body .dc-body h4 { break-after: avoid; }
@media (max-width: 760px) { .dc-modal-body .dc-body { columns: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dc-modal-card { transition: opacity .01s linear; transform: none; }
}

/* ============================================================
   PUBLICATIONS & REPORTS
   ============================================================ */

/* ---------- the lists ---------- */

/* white opening, then navy / tinted / white, so no two white bands meet */
.section-papers { background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); }
.section-papers .eyebrow { color: var(--blue-200); }
.section-papers .section-title { color: #fff; }
.section-papers .section-intro { color: rgba(255, 255, 255, .88); }
.section-papers .pub-empty { border-color: rgba(255, 255, 255, .4); }
.section-reports { background: var(--shell); }
.section-annual { background: var(--paper); }

/* Flex rather than grid, so the number of publications never leaves an
   awkward hole. Cards in a row share its height; a lone card at the end of a
   row grows to fill it. */
.pub-grid { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 26px); align-items: stretch; }
.pub-grid-2 > * { flex: 1 1 420px; }
@media (max-width: 620px) { .pub-grid-2 > * { flex-basis: 100%; } }

/* Annual reports are a list, not a grid: one is added every year, so any fixed
   number of columns is certain to leave an odd row sooner or later. */
.pub-list { border-top: 1px solid var(--line); }

.pub {
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 30px);
}
.pub h3 { margin: 0 0 .6em; font-size: 1.1rem; line-height: 1.35; color: var(--ink); max-width: 62ch; }
.pub-summary, .pub-meta { max-width: 78ch; }
.pub-summary { margin: 0 0 1.2em; color: var(--muted); font-size: .95rem; line-height: 1.7; }

/* the three kinds are marked by the rule above them, not by their shape */
.pub-paper { border-top: 4px solid var(--accent); }
.pub-report { border-top: 4px solid var(--blue-400); }
.pub-annual { border-top: 4px solid var(--navy-800); padding: 0; overflow: hidden; }

.pub-meta { margin: 0 0 1.2em; display: grid; gap: 6px; }
.pub-meta > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.pub-meta dt {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: .18em;
}
.pub-meta dd { margin: 0; font-size: .95rem; color: var(--ink); line-height: 1.5; }
@media (max-width: 520px) { .pub-meta > div { grid-template-columns: 1fr; gap: 2px; } }

.pub-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pub-tags:empty { display: none; }
.pub-tag {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; color: var(--accent-text); background: var(--shell);
}
.pub-tag-oa { background: var(--accent); color: #fff; }
.pub-tag-free { background: var(--paper); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent); }

.pub-doi { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.pub-doi span { font-family: ui-monospace, Menlo, Consolas, monospace; }
.pub-file { font-weight: 400; opacity: .85; }
.pub-pending {
  margin: 0; padding: 12px 14px; font-size: .9rem; color: var(--muted);
  background: var(--shell); border-left: 3px solid var(--blue-200);
}
.pub-empty {
  flex: 1 1 100%; margin: 0; padding: clamp(26px, 3vw, 38px); text-align: center;
  color: var(--muted); background: var(--paper);
  border: 1px dashed var(--blue-200);
}

/* ---------- annual reports ---------- */

.pub-annual {
  display: grid; grid-template-columns: 96px 1fr auto;
  gap: clamp(18px, 2.4vw, 30px); align-items: center;
  padding: clamp(18px, 2vw, 24px) clamp(4px, 1vw, 14px);
  border: 0; border-bottom: 1px solid var(--line);
  transition: background-color .18s var(--ease);
}
.pub-annual:hover { background: var(--shell); }

/* The year, set as the thing you scan down the page for. */
.pub-year {
  display: grid; place-items: center; align-self: stretch; min-height: 96px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 75%, var(--blue-600));
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .02em;
}
/* a photograph from the year, the year set over it */
.pub-year-photo {
  background:
    radial-gradient(closest-side, rgba(4, 45, 98, .45), rgba(4, 45, 98, .12)),
    var(--year-photo) center / cover no-repeat;
  /* only a light wash, darker just behind the year - the photo shows; the
     shadow keeps the white year readable over bright patches */
  text-shadow: 0 1px 3px rgba(4, 45, 98, .9), 0 0 14px rgba(4, 45, 98, .75);
}
/* where a cover exists it takes that place, at the proportions of a document */
.pub-year-cover { padding: 0; background: var(--shell); overflow: hidden; }
.pub-year-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pub-annual-body h3 { margin: 0 0 .3em; max-width: none; }
.pub-strap {
  margin: 0; font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text);
}
.pub-annual .pub-summary { margin: .6em 0 0; }
.pub-annual-get { justify-self: end; }
.pub-annual-get .btn { white-space: nowrap; }
.pub-annual .pub-pending { max-width: 34ch; }

@media (max-width: 760px) {
  .pub-annual { grid-template-columns: 72px 1fr; }
  .pub-year { min-height: 72px; font-size: 1.2rem; }
  .pub-annual-get { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- publications: the opening ----------
   Its own design, not the photo collage of the programme pages. Copy on
   the left; on the right three documents fanned out, drawn in
   CSS: a technical report at the back, a research article with a small
   bar chart and its DOI line in the middle, and the navy annual report
   cover in front. The sheets size everything in container units,
   so the drawing scales as one piece. The three kinds of output sit
   underneath as cards on a drop shadow. */

.pub-open {
  padding: clamp(60px, 7.5vw, 104px) 0 clamp(44px, 5.5vw, 72px);
  background: var(--paper);
}
.pub-open-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}

/* --- words --- */
.pub-open-title {
  margin: .15em 0 .62em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.012em;
  color: var(--ink); text-wrap: balance;
}
.pub-open-title .nobr { white-space: nowrap; }
.pub-open-copy p { color: var(--muted); }
.pub-open-copy .pub-open-lede {
  color: var(--ink); font-size: clamp(1.08rem, 1.35vw, 1.2rem); line-height: 1.65;
}
/* the closing line: a short heavy rule above it, the way a journal sets
   off a note from the body */
.pub-open-copy .pub-open-note {
  position: relative; margin-top: 1.9em; padding-top: 1.3em;
  color: var(--ink); font-size: 1rem; line-height: 1.6;
}
.pub-open-note::before {
  content: ""; position: absolute; left: 0; top: 0; width: 52px; height: 3px;
  background: var(--navy-900);
}

/* --- the desk and its three documents --- */
.pub-stack {
  position: relative; container-type: inline-size;
  width: 100%; max-width: 600px; margin-left: auto; aspect-ratio: 1 / 1.2;
}
.pub-sheet {
  --r: 0deg;
  position: absolute; width: 60%; aspect-ratio: 1 / 1.414;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); text-decoration: none;
  font-size: 2.1cqw; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(4, 45, 98, .14), 0 22px 44px -20px rgba(4, 45, 98, .5);
  transform: rotate(var(--r));
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
/* back to front: report, paper, annual. The annual cover sits low and a
   little out past the left edge, so its right edge stays clear of the
   paper's chart. */
.pub-sheet-report { --r: -5deg; left: 1%;  top: 0;   z-index: 1; }
.pub-sheet-paper  { --r: 3deg;  left: 39%; top: 6%;  z-index: 2; }
.pub-sheet-annual { --r: -4deg; left: -5%; top: 28%; z-index: 3; background: var(--navy-900); }
.pub-sheet:hover {
  z-index: 5;
  transform: translateY(-5%) rotate(calc(var(--r) * .35));
  box-shadow: 0 1px 2px rgba(4, 45, 98, .14), 0 34px 60px -24px rgba(4, 45, 98, .6);
}

/* shared marks inside the sheets */
.ps-body { display: flex; flex-direction: column; gap: .6em; flex: 1; padding: 1.5em 1.5em 1.3em; }
.ps-kicker {
  font-size: .78em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-600);
}
.ps-bar { display: block; height: .8em; width: 92%; background: var(--navy-900); }
.ps-bar-title { height: 1.05em; }
.ps-short { width: 58%; }
.ps-authors { display: block; height: .5em; width: 66%; margin: .25em 0 .3em; background: var(--blue-200); }
.ps-label {
  margin-top: .35em; font-size: .72em; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.ps-lines {                                  /* ruled lines of text */
  display: block; height: 4.1em;
  background: repeating-linear-gradient(to bottom, rgba(4, 45, 98, .16) 0 .36em, transparent .36em .82em);
}
.ps-lines-short { height: 2.4em; width: 80%; }
.ps-lines-fill { flex: 1; height: auto; min-height: 2em; }   /* runs down to the DOI line */
.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; }
.ps-cols .ps-lines { height: 6.6em; }
.ps-fig {                                    /* a small bar chart, the paper's figure */
  display: flex; align-items: flex-end; gap: .38em; height: 6.6em; padding: 0 .3em;
  border-left: 1px solid rgba(4, 45, 98, .45); border-bottom: 1px solid rgba(4, 45, 98, .45);
}
.ps-fig i { flex: 1; height: calc(var(--h) * 100%); background: var(--blue-400); }
.ps-fig i:nth-child(even) { background: var(--blue-600); }
.ps-hbars {                                  /* the report's figure: a horizontal bar chart */
  display: flex; flex-direction: column; justify-content: space-around; gap: .45em;
  height: 6.6em; padding: .3em 0;
  border-left: 1px solid rgba(4, 45, 98, .45);
}
.ps-hbars i { display: block; height: .9em; width: calc(var(--w) * 100%); background: var(--blue-600); }
.ps-hbars i:nth-child(odd) { background: var(--blue-400); }
.ps-foot {                                   /* footer rule with a page mark */
  display: block; height: .5em; margin-top: .2em;
  border-top: 1px solid var(--line);
  background: linear-gradient(var(--blue-200), var(--blue-200)) right bottom / 2.2em .35em no-repeat;
}
.ps-doi {
  display: flex; align-items: center; gap: .7em; padding-top: .7em;
  border-top: 1px solid var(--line);
  font-size: .72em; font-weight: 800; letter-spacing: .14em; color: var(--blue-600);
}
.ps-doi::after { content: ""; height: .7em; width: 11em; background: var(--blue-200); }

/* technical report: a coloured band across the top, then a data table */
.ps-band { padding: 1.1em 1.5em; background: var(--blue-600); }
.ps-band .ps-kicker { color: #fff; }
.ps-table {
  display: block; height: 6.4em; margin: .3em 0;
  border: 1px solid rgba(4, 45, 98, .22);
  background:
    linear-gradient(var(--navy-800), var(--navy-800)) top / 100% 1.2em no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 1.25em, rgba(4, 45, 98, .16) 1.25em 1.32em),
    repeating-linear-gradient(to right, transparent 0 24.6%, rgba(4, 45, 98, .16) 24.6% 25%);
}

/* annual report: a photographic cover */
.ps-cover { display: block; height: 52%; }
.ps-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-cover-body { display: flex; flex-direction: column; gap: .7em; padding: 1.4em 1.5em; }
.ps-logo { width: 42%; height: auto; margin-bottom: .2em; }
.ps-cover-body .ps-kicker { color: var(--blue-200); }
.ps-bar-light { background: rgba(255, 255, 255, .85); }
.ps-bar-light.ps-short { background: rgba(255, 255, 255, .45); }

/* --- the three kinds of output, as cards lifted off the page --- */
.pub-nav {
  list-style: none; margin: clamp(50px, 6vw, 82px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px);
}
.pub-nav-card {
  display: block; height: 100%; padding: clamp(22px, 2.4vw, 28px);
  background: var(--paper); border: 1px solid var(--blue-100);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pub-nav-card img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 14px; }
.pub-nav-name { display: block; font-weight: 700; font-size: 1.06rem; color: var(--ink); margin-bottom: .35em; }
.pub-nav-desc { display: block; font-size: .92rem; color: var(--muted); line-height: 1.55; }
.pub-nav-card:hover, .pub-nav-card:focus-visible {
  transform: translateY(-4px); border-top-color: var(--blue-400);
  box-shadow: var(--shadow-lg);
}
.pub-nav-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 900px) {
  .pub-open-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-stack { width: 88%; max-width: 460px; margin: 0 auto; }   /* room for the cover's overhang */
}
@media (max-width: 860px) { .pub-nav { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .pub-sheet, .pub-nav-card { transition: none; }
}

/* ---------- fieldwork to publication ----------
   A flow diagram on faint graph paper. Four round nodes on one line; the
   line starts pale and brightens towards the last node, which is filled -
   the published paper is where the work arrives. A small arrowhead sits
   on the line between each pair. Below 900px it turns vertical, nodes
   down the left. */

.section-pipeline {
  --node: 76px;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.section-pipeline::before {                 /* the graph paper, fading out at the edges */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 100%);
}

.pub-path {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pub-path::before {                         /* the line, first node to last */
  content: ""; position: absolute; left: 12.5%; right: 12.5%;
  top: calc(var(--node) / 2 - 1px); height: 2px;
  background: linear-gradient(90deg, rgba(140, 203, 250, .35), var(--blue-400) 70%, #fff);
}
.pub-path li {
  position: relative; text-align: center;
  padding: 0 clamp(10px, 1.6vw, 22px);
}
.pub-path li:not(:last-child)::after {      /* arrowhead on the line, halfway to the next node */
  content: ""; position: absolute; right: 0; top: calc(var(--node) / 2);
  width: 9px; height: 9px;
  border-top: 2px solid var(--blue-200); border-right: 2px solid var(--blue-200);
  transform: translate(50%, -50%) rotate(45deg);
}
.pub-path-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--node); height: var(--node); margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 2px solid var(--blue-200);
  box-shadow: 0 0 0 8px rgba(4, 45, 98, .55);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease;
}
.pub-path-node svg {
  width: 32px; height: 32px;
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pub-path .is-last .pub-path-node {
  background: var(--blue-400); border-color: #fff;
  box-shadow: 0 0 0 8px rgba(67, 176, 241, .18), 0 0 34px rgba(67, 176, 241, .45);
}
.pub-path .is-last .pub-path-node svg { stroke: var(--navy-900); }
.pub-path li:hover .pub-path-node { transform: translateY(-4px); border-color: #fff; }

.pub-path-n {
  display: block; margin-bottom: .45em;
  font-size: .76rem; font-weight: 800; letter-spacing: .2em; color: var(--blue-200);
}
.pub-path h3 { margin: 0 0 .45em; font-size: 1.1rem; color: #fff; }
.pub-path p {
  max-width: 28ch; margin: 0 auto;
  font-size: .93rem; line-height: 1.6; color: rgba(255, 255, 255, .86);
}

/* the closing line, set between two short dotted rules */
.pub-path-note {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: clamp(38px, 4.6vw, 58px) auto 0; text-align: center;
  font-size: 1.02rem; color: #fff;
}
.pub-path-note::before,
.pub-path-note::after {
  content: ""; flex: 0 1 70px; border-top: 2px dotted rgba(140, 203, 250, .6);
}

@media (max-width: 900px) {
  .pub-path { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 560px; margin: 0 auto; }
  .pub-path::before {
    left: calc(var(--node) / 2 - 1px); right: auto; top: calc(var(--node) / 2); bottom: calc(var(--node) / 2);
    width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(140, 203, 250, .35), var(--blue-400) 70%, #fff);
  }
  .pub-path li {
    text-align: left; padding: 6px 0 0 calc(var(--node) + 24px); min-height: var(--node);
  }
  .pub-path li:not(:last-child)::after {
    right: auto; left: calc(var(--node) / 2); top: auto; bottom: -15px;
    transform: translate(-50%, 0) rotate(135deg);
  }
  .pub-path-node { position: absolute; left: 0; top: 0; margin: 0; }
  .pub-path p { margin: 0; }
}
@media (max-width: 480px) {
  .section-pipeline { --node: 60px; }
  .pub-path-node svg { width: 26px; height: 26px; }
  .pub-path-note::before, .pub-path-note::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-path-node { transition: none; }
}

/* ============================================================
   PILLAR PAGES - Research, Conservation, Education & Outreach
   One component set, shared by all three, so they read as a trio.
   ============================================================ */

/* The site holds centred section titles on one line from tablet width up,
   which suits short homepage headings. These pages carry sentence-length ones,
   so they are allowed to wrap - and balanced so the lines come out even. */
.px-blocks .section-title,
.px-tech .section-title,
.px-outputs .section-title,
.px-cycle .section-title,
.px-mpa .section-title,
.px-ladder .section-title,
.px-process .section-title,
.px-people .section-title,
.px-schools .section-title,
.px-beyond .section-title,
.px-join .section-title {
  white-space: normal; text-wrap: balance;
}

/* ---------- the numbers ---------- */

.px-figures {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
  padding: clamp(44px, 6vw, 76px) 0;
}
/* A short introduction on the left - eyebrow, title, and the note under a
   dotted rule - and the four figures down the right as a list, hairlines
   between, each row led by a white line icon in a navy ring. The icons are
   line drawings on purpose: the coloured illustrations belong to the
   habitats and programmes, and a third row of them would overplay them.
   Labels are white, not pale blue: the band is a gradient, and pale blue
   falls to about 2.6:1 at its lightest end. */
.px-fig-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 90px); align-items: center;
}
.px-fig-lead .eyebrow { color: var(--blue-200); }
.px-fig-title {
  margin: .25em 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; color: #fff; text-wrap: balance;
}
.px-figures-note {
  max-width: 44ch; margin: 1.3em 0 0; padding-top: 1.1em;
  border-top: 2px dotted rgba(140, 203, 250, .45);
  font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .9);
}

/* The rows share one set of columns (subgrid), so the number column is as
   wide as the widest figure on the page - "85 - 100%" as much as "46" - and
   every label still starts on the same line. */
.px-figures-list {
  margin: 0; display: grid;
  grid-template-columns: 52px max-content minmax(0, 1fr); column-gap: 26px;
}
.px-figures-list > div {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center;
  padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .22);
}
.px-figures-list > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.px-fig-ring {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(4, 45, 98, .55); border: 1.5px solid rgba(140, 203, 250, .7);
  box-shadow: 0 0 0 6px rgba(140, 203, 250, .08);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease;
}
.px-fig-ring svg {
  width: 26px; height: 26px;
  fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.px-figures-list > div:hover .px-fig-ring { border-color: #fff; transform: translateY(-4px); }
.px-figures dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.02em;
  color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* the counted figures carry .impact-number for the count-up, which brings
   the Impact page's navy colour and larger size with it - take the band's */
.px-figures dt .impact-number {
  color: inherit; font-size: inherit; letter-spacing: inherit; margin: 0;
}
.px-figures dd { margin: 0; font-size: 1rem; line-height: 1.5; color: #fff; }

@media (max-width: 860px) {
  .px-fig-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .px-figures-list { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .px-figures-list > div { row-gap: 4px; }
  .px-fig-ring { width: 44px; height: 44px; grid-row: span 2; }
  .px-fig-ring svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-fig-ring { transition: none; }
}

/* ---------- alternating blocks: the backbone of all three pages ---------- */

.px-blocks { background: var(--paper); counter-reset: px-block; }
.px-block {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 4.6vw, 72px); align-items: stretch;   /* the picture matches the text */
  counter-increment: px-block;
}
/* Each programme is its own full-width band, light blue and white in turn,
   with its figures at the foot - the colour change is the boundary, so the
   figures can only belong to the text they sit with. The band reaches the
   window edges through a spread shadow clipped to the block's height, so
   the markup stays one wrap per section. The first programme after a
   heading takes the tint; .px-blocks-even starts on white instead, for a
   section that would otherwise end white against a white section. */
.px-blocks { padding-bottom: 0; }
.px-block { padding: clamp(56px, 7vw, 96px) 0; }
.px-block:nth-child(odd of .px-block),
.px-blocks-even .px-block:nth-child(even of .px-block) {
  background: var(--shell);
  box-shadow: 0 0 0 100vmax var(--shell);
  clip-path: inset(0 -100vmax);
}
.px-blocks-even .px-block:nth-child(odd of .px-block) {
  background: none; box-shadow: none; clip-path: none;
}
.px-block { scroll-margin-top: 96px; }
@media (max-width: 900px) { .px-block { grid-template-columns: 1fr; } }

/* Every child states its place, so nothing has to be inferred: copy, picture,
   then the figures across the foot. The flipped blocks simply swap the first
   two - and never on a narrow screen, where copy first always reads better. */
.px-block-copy { order: 1; }
.px-block-media { order: 2; }
.px-stats-wrap { order: 3; }           /* the figures close their band */
.px-block-flip .px-block-copy { order: 2; }
.px-block-flip .px-block-media { order: 1; }
@media (max-width: 900px) {
  .px-block-flip .px-block-copy { order: 1; }
  .px-block-flip .px-block-media { order: 2; }
}

.px-block-copy .section-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .6em; }
.px-block-copy p { color: var(--ink); line-height: 1.8; }
/* The photograph fills its half of the block, whatever the text does, and
   carries a thin frame offset behind it - the detail that stops it reading as
   a picture dropped into a gap. */
.px-block-media { position: relative; align-self: stretch; min-height: 320px; }
.px-block-media::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: 0;
  border: 1px solid var(--blue-200);
}
.px-block-flip .px-block-media::before { inset: 18px 18px -18px -18px; }
.px-block-media img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%; min-height: 320px;
  object-fit: cover;
}
@media (max-width: 900px) {
  .px-block-media { min-height: 0; }
  .px-block-media img { height: auto; aspect-ratio: 4 / 3; }
  .px-block-media::before { inset: 14px -14px -14px 14px; }
}

/* The number, set against a hairline: it gives the run of blocks a rhythm and
   tells you how far through the section you are. */
.px-block-copy .eyebrow {
  display: flex; align-items: center; gap: 14px;
}
.px-block-copy .eyebrow::before {
  content: counter(px-block, decimal-leading-zero);
  font-size: .95rem; letter-spacing: .04em; color: var(--accent);
}
.px-block-copy .eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

.px-list-head {
  margin: 1.6em 0 .8em; font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-text);
}
.px-list { list-style: none; margin: 1.2em 0 0; padding: 0; }
.px-list li {
  position: relative; padding-left: 28px; margin-bottom: .55em;
  font-size: .95rem; line-height: 1.55; color: var(--ink);
}
.px-list li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.px-list-plain li::before {
  width: 8px; height: 8px; top: .5em; border: 0; transform: none;
  background: var(--accent);
}
.px-cta { margin-top: 1.6em !important; }

/* ---------- tiles: methods, topics, activities ---------- */

/* Navy, with the methods as a field kit in three groups - in the water,
   on the map, at the station - each headed by a line icon in the same
   navy ring as the figures band, each tool with a one-line explanation. */
.px-tech {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.px-tech .eyebrow { color: var(--blue-200); }
.px-tech .section-title { color: #fff; }
.px-tech .section-intro { color: rgba(255, 255, 255, .88); }
.px-kit {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px); align-items: stretch;   /* panels share a height */
}
.px-kit-group {
  padding: clamp(22px, 2.4vw, 30px);
  background: rgba(255, 255, 255, .05);
  border-top: 3px solid var(--blue-400);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .26), 0 20px 44px -12px rgba(0, 0, 0, .52);
}
.px-kit-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.px-kit-head h3 { margin: 0; font-size: 1.15rem; color: #fff; }
.px-kit ul { list-style: none; margin: 0; padding: 0; }
.px-kit li { padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.px-kit li strong { display: block; font-size: 1rem; color: #fff; }
.px-kit li span { display: block; margin-top: .2em; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.px-kit-group:hover .px-fig-ring { border-color: #fff; transform: translateY(-4px); }
@media (max-width: 900px) {
  .px-kit { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
.px-tech-note {
  max-width: 72ch; margin: clamp(36px, 4.4vw, 54px) auto 0; padding-top: 22px;
  border-top: 2px dotted rgba(140, 203, 250, .45);
  text-align: center; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .9);
}

/* ---------- two columns of prose ---------- */

.px-outputs, .px-mpa { background: var(--paper); }
.px-two {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start;
}
@media (max-width: 860px) { .px-two { grid-template-columns: 1fr; } }
.px-two h3 {
  margin: 0 0 .6em; font-size: 1.15rem; color: var(--ink);
  padding-bottom: .5em; border-bottom: 2px solid var(--accent); display: inline-block;
}
.px-two p { color: var(--ink); line-height: 1.8; }

/* ---------- a sequence ---------- */

.px-cycle, .px-process { background: var(--shell); }
.px-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 1000px) { .px-flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .px-flow { grid-template-columns: 1fr; } }
.px-flow li {
  position: relative; padding: clamp(18px, 2vw, 24px);
  background: var(--paper); border: 1px solid var(--blue-200); border-top: 3px solid var(--accent);
}
.px-flow-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 10px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.px-flow h3 { margin: 0 0 .3em; font-size: 1rem; color: var(--ink); }
.px-flow p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.px-flow-note {
  max-width: 70ch; margin: clamp(24px, 3vw, 34px) auto 0; text-align: center;
  font-size: 1rem; color: var(--ink);
}

/* ---------- the research loop (Research page) ----------
   Six stages around an oval, a dotted ring flowing clockwise and an
   arrowhead on the ring between each pair, the closing line in the middle
   - so the cycle reads as a cycle and Improve feeds back into Research.
   Each stage's disc sits on the ring; its words sit OUTSIDE the ring -
   above the top stage, below the bottom one, beside the side ones - so no
   text ever crosses the line. Each stage carries its position on a unit
   circle (--ux, --uy, worked out in advance - no CSS trig, so every
   browser places it); the arrowheads are drawn in the ring's SVG. The oval scales with the space (container units) and becomes a
   list down a line below 980px. */
.px-cycle .wrap { container-type: inline-size; }
.px-loop {
  --disc: 76px; --gap: 14px;                    /* disc to words */
  --rx: min(300px, calc(50cqw - 250px));
  --ry: calc(var(--rx) * .68);                  /* the ring's drawing is 100 x 68 - keep them in step */
  --cy: calc(78px + var(--disc) / 2 + var(--ry));
  position: relative; margin: 0 auto;
  height: calc(var(--cy) + var(--ry) + var(--disc) / 2 + 84px);
}
.px-loop-ring {
  position: absolute; overflow: visible; pointer-events: none;
  left: calc(50% - var(--rx)); top: calc(var(--cy) - var(--ry));
  width: calc(var(--rx) * 2); height: calc(var(--ry) * 2);
}
.px-loop-ring ellipse {
  fill: none; stroke: var(--blue-400); stroke-width: 2; stroke-dasharray: 2 9;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  animation: px-loop-flow 1.4s linear infinite;
}
@keyframes px-loop-flow { to { stroke-dashoffset: -11; } }
/* The arrowheads are drawn inside the ring's SVG, their angles worked out
   when the page was built (a 100 x 68 oval, the same proportions as
   --rx : --ry), so they sit on the line in every browser - no CSS trig. */
.px-loop-head { fill: var(--blue-600); }

.px-loop-steps { list-style: none; margin: 0; padding: 0; }
.px-loop-steps li {                             /* a point on the ring */
  position: absolute; width: 0; height: 0;
  left: calc(50% + var(--ux) * var(--rx));
  top: calc(var(--cy) + var(--uy) * var(--ry));
}
.px-loop-disc {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: var(--disc); height: var(--disc); border-radius: 50%;
  background: var(--paper); border: 2px solid var(--blue-200);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .5), var(--shadow);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease;
}
.px-loop-disc svg {
  width: 32px; height: 32px;
  fill: none; stroke: var(--blue-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.px-loop-disc b {
  position: absolute; top: -4px; right: -6px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy-800); color: #fff; font-size: .76rem; font-weight: 800;
}
.px-loop-steps li:hover .px-loop-disc { transform: translate(-50%, calc(-50% - 5px)); border-color: var(--accent); }

.px-loop-words { position: absolute; width: 190px; }
.px-loop-steps h3 { margin: 0 0 .15em; font-size: 1.04rem; color: var(--ink); }
.px-loop-steps p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.is-top .px-loop-words    { left: -95px; bottom: calc(var(--disc) / 2 + var(--gap)); text-align: center; }
.is-bottom .px-loop-words { left: -95px; top: calc(var(--disc) / 2 + var(--gap)); text-align: center; }
.is-right .px-loop-words  { left: calc(var(--disc) / 2 + var(--gap)); top: 0; transform: translateY(-50%); text-align: left; }
.is-left .px-loop-words   { right: calc(var(--disc) / 2 + var(--gap)); top: 0; transform: translateY(-50%); text-align: right; }

.px-loop-note {
  position: absolute; left: 50%; top: var(--cy); transform: translate(-50%, -50%);
  width: min(270px, calc(var(--rx) * 1.1)); margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.35;
  color: var(--ink);
}
.px-loop-note svg {
  display: block; width: 40px; height: 40px; margin: 0 auto 12px;
  fill: none; stroke: var(--blue-400); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  animation: px-loop-turn 16s linear infinite;
}
@keyframes px-loop-turn { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .px-loop { height: auto; max-width: 460px; }
  .px-loop-ring { display: none; }
  .px-loop-steps { position: relative; display: grid; gap: 22px; }
  .px-loop-steps { padding-right: 30px; }
  .px-loop-steps::before {                   /* the line down through the discs, a little past each end */
    content: ""; position: absolute; left: calc(var(--disc) / 2 - 1px); top: -16px; bottom: -16px;
    border-left: 2px dotted var(--blue-400);
  }
  .px-loop-steps::after {                    /* ...and back round on the right, from 6 to 1 */
    content: ""; position: absolute; z-index: 0;
    left: calc(var(--disc) / 2 - 1px); right: 0; top: -16px; bottom: -16px;
    border: 2px dotted var(--blue-400); border-left: 0; border-radius: 0 28px 28px 0;
  }
  .px-loop-steps li {
    position: relative; left: auto; top: auto; width: auto; height: auto;
    display: grid; grid-template-columns: var(--disc) 1fr; column-gap: 18px; align-items: center;
  }
  .px-loop-disc { position: relative; z-index: 1; transform: none; }
  .px-loop-steps li:hover .px-loop-disc { transform: translateY(-5px); }
  .px-loop-steps li .px-loop-words {
    position: static; width: auto; transform: none; text-align: left;
  }
  .px-loop-note { position: static; transform: none; width: auto; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-loop-ring ellipse, .px-loop-note svg { animation: none; }
  .px-loop-disc { transition: none; }
}

/* ---------- one idea, given a band ---------- */

.px-callout {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
/* A motif behind the words, at the opacity of a watermark. */
.px-callout::before {
  content: ""; position: absolute; z-index: -1; inset: auto -60px -70px auto;
  width: 340px; height: 340px; opacity: .12;
  background: url("../assets/icons/coral_branching.png") right bottom / contain no-repeat;
}
.px-callout-plain::before { content: none; }       /* no coral watermark */
.px-callout-inner { max-width: 78ch; margin: 0 auto; text-align: center; }
.px-callout p { color: rgba(255, 255, 255, .92); font-size: 1.05rem; line-height: 1.8; }
.px-callout p + p { margin-top: 1em; }

/* ---------- Conservation page: its last three bands recoloured ----------
   Marine Protected Area on navy, the measurement callout on white, Take
   part on the pale tint. Scoped by modifier classes, because the same
   sections appear on other pages in their usual colours. */
.px-mpa.px-mpa-dark {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.px-mpa-dark .eyebrow { color: var(--blue-200); }
.px-mpa-dark .section-title,
.px-mpa-dark .px-two h3,
.px-mpa-dark strong { color: #fff; }
.px-mpa-dark .px-two h3 { border-bottom-color: var(--blue-400); }
.px-mpa-dark .px-two p,
.px-mpa-dark .px-list li { color: rgba(255, 255, 255, .9); }
/* the starfish, the site's bullet mark */
.px-mpa-dark .px-list-plain li { padding-left: 32px; }
.px-mpa-dark .px-list-plain li::before {
  width: 19px; height: 19px; top: .12em; left: 0; border: 0; transform: none;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
/* the partners named here are a sample - the button leads to the rest */
.px-mpa-cta { text-align: center; margin-top: 1.8em !important; }

.px-callout.px-callout-light { background: var(--paper); color: var(--ink); }
.px-callout-light .section-title.light { color: var(--ink); }
.px-callout-light p { color: var(--ink); }
.px-callout-light::before { content: none; }       /* the reef band replaces the coral watermark */

.px-join.px-join-tint { background: var(--shell); }
/* Two set columns rather than flowing ones, so the buttons stay under the
   second paragraph, aligned to its left edge. */
.px-join-split { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4vw, 64px); }
.px-join-split p + p { margin-top: 1em; }
.px-join-cta {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px;
  margin-top: 1.6em !important;
}
@media (max-width: 800px) { .px-join-split { grid-template-columns: 1fr; } }

/* ---------- a field school (Education & outreach) ----------
   Deliberately not the programme bands used for the community work above:
   navy, laid out like a prospectus. Each module is copy beside a framed
   photograph, with a full-width piece underneath - the field school's
   curriculum as a syllabus sheet, learning underwater's
   qualifications as certification cards. The field school also draws its
   training pathway, the progression its paragraph describes. */
.fs-school {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.fs-school .section-head .eyebrow { color: var(--blue-200); }
.fs-school .section-head .section-title { color: #fff; }
.fs-school .section-head .section-intro { color: rgba(255, 255, 255, .88); }

.fs-mod {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "copy photo" "sheet sheet";
  column-gap: clamp(34px, 5vw, 76px); align-items: center;
}
.fs-mod-flip { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "photo copy" "sheet sheet"; }
.fs-mod + .fs-mod {
  margin-top: clamp(64px, 8vw, 116px); padding-top: clamp(64px, 8vw, 116px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.fs-mod-copy { grid-area: copy; }
.fs-mod-copy .eyebrow { color: var(--blue-200); }
.fs-mod-title {
  margin: .2em 0 .6em; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; color: #fff; text-wrap: balance;
}
.fs-mod-copy > p:not(.eyebrow) { margin: 0; color: rgba(255, 255, 255, .9); line-height: 1.8; }

/* the training pathway - theory to independence, brightening as it goes */
.fs-path {
  position: relative; list-style: none; margin: 2em 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fs-path::before {
  /* dots sit at the start of each column, so the first lines up with the
     text above; the line runs from the first dot's centre to the last's */
  content: ""; position: absolute; left: 7px; width: 75%; top: 6px; height: 2px;
  background: linear-gradient(90deg, rgba(140, 203, 250, .35), var(--blue-400) 60%, #fff);
}
.fs-path li {
  position: relative; text-align: left; padding: 0 8px 0 0;
  font-size: .8rem; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .88);
}
.fs-path-dot {
  display: block; width: 14px; height: 14px; margin: 0 0 10px; border-radius: 50%;
  background: var(--navy-900); border: 2px solid var(--blue-200);
}
.fs-path li:last-child { color: #fff; }
.fs-path li:last-child .fs-path-dot {
  background: var(--blue-400); border-color: #fff; box-shadow: 0 0 0 5px rgba(67, 176, 241, .25);
}

.fs-mod-photo { grid-area: photo; position: relative; isolation: isolate; margin: 0; }
.fs-mod-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
}
.fs-mod-photo::before {                    /* the offset frame */
  content: ""; position: absolute; z-index: -1; inset: -16px -16px 16px 16px;
  border: 2px solid var(--blue-400);
}
.fs-mod-flip .fs-mod-photo::before { inset: -16px 16px 16px -16px; }

/* the curriculum, as a syllabus sheet */
.fs-syllabus {
  grid-area: sheet; margin-top: clamp(44px, 5vw, 64px);
  padding: clamp(26px, 3vw, 40px);
  background: var(--paper); color: var(--ink);
  border-top: 4px solid var(--blue-400);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .26), 0 24px 50px -14px rgba(0, 0, 0, .55);
}
.fs-syl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  margin-bottom: 18px;
}
.fs-syl-head h3 { margin: 0; font-size: 1.25rem; color: var(--ink); }
.fs-syl-list { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: clamp(24px, 3vw, 44px); }
.fs-syl-list li {
  display: flex; gap: 12px; align-items: flex-start; break-inside: avoid;
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: .95rem; line-height: 1.45; color: var(--ink);
}

/* the starfish, the site's bullet mark */
.fs-syl-list li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .12em;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}

/* the qualifications, as certification cards */
.fs-certs { grid-area: sheet; margin-top: clamp(44px, 5vw, 64px); }
.fs-certs h3 { margin: 0 0 18px; font-size: 1.25rem; color: #fff; }
.fs-cert-list {                           /* flex, so a short last row sits centred */
  --per: 4;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.fs-cert-list li {
  flex: 0 0 calc((100% - (var(--per) - 1) * 14px) / var(--per));
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(140, 203, 250, .3); border-left: 3px solid var(--blue-400);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55);
  font-size: .95rem; font-weight: 600; line-height: 1.35; color: #fff;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.fs-cert-list li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); }
.fs-cert-list svg {
  flex: none; width: 28px; height: 28px;
  fill: none; stroke: var(--blue-200); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fs-certs-note {
  max-width: 62ch; margin: 22px auto 0; text-align: center;
  font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .88);
}
.fs-certs-cta { margin: 24px 0 0; text-align: center; }

@media (max-width: 1000px) {
  .fs-cert-list { --per: 2; }
}
@media (max-width: 900px) {
  .fs-mod, .fs-mod-flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "photo" "sheet";
  }
  .fs-mod-photo { margin-top: 44px; }
  .fs-syl-list { columns: 2; }
}
@media (max-width: 560px) {
  .fs-syl-list { columns: 1; }
  .fs-cert-list { --per: 1; }
  .fs-path li { font-size: .72rem; }
}
@media (max-width: 400px) {                 /* room for "independence" on the smallest phones */
  .fs-path li { font-size: .66rem; padding: 0 2px 0 0; letter-spacing: -.01em; }
}
@media (max-width: 420px) {                 /* the pin label stays on the photo */
  .ed-pin-tag { left: 10px; max-width: calc(100% - 20px); }
}
@media (max-width: 340px) {                 /* the smallest phones */
  .fs-path li { font-size: .6rem; }
  .fs-certs-cta .btn { white-space: normal; text-align: center; }

  .fs-mod-photo::before, .fs-mod-flip .fs-mod-photo::before { inset: -10px -10px 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-cert-list li { transition: none; }
}

/* ---------- the programme ladder (education) ---------- */

.px-ladder { background: var(--paper); }
/* The programmes as a compact 3 x 2 grid rather than full-width rows: in
   rows the descriptions ran the whole width of the page and the names were
   squeezed. Each card - icon and name on one line, the description, and an
   arrow that slides on hover - is a single link. */
.px-progs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px);
}
.px-progs li { display: flex; }
.px-prog {
  position: relative; flex: 1;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center;
  column-gap: 14px; row-gap: 10px;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--blue-200);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.px-prog img { width: 44px; height: 44px; object-fit: contain; }
.px-prog-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.25;
  color: var(--ink); padding-right: 26px;
}
.px-prog-desc {
  grid-column: 1 / -1; display: block;
  font-size: .9rem; line-height: 1.55; color: var(--muted);
}
.px-prog-go {
  position: absolute; top: clamp(18px, 2vw, 24px); right: clamp(16px, 1.8vw, 22px);
  color: var(--accent-text); font-size: 1.15rem; line-height: 44px;
  transition: transform .2s var(--ease);
}
.px-prog:hover, .px-prog:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--accent);
}
.px-prog:hover .px-prog-go { transform: translateX(5px); }
.px-prog:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 960px) { .px-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .px-progs { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .px-prog, .px-prog-go { transition: none; } }

/* ---------- university students (Education & outreach) ----------
   One section in two chapters. First the research process a student works
   through, drawn as a wave with each stage in a bubble on it, on a white
   panel lifted off the tint, the note under a dotted rule. Then a short chapter
   heading, joined to the panel above by a small drawn line, and the two
   cards on students and universities, each with an icon disc sitting on
   its top edge. */
.uj { background: var(--shell); }
.uj .section-title { white-space: normal; text-wrap: balance; }

.uj-panel {
  padding: clamp(28px, 3.4vw, 46px) clamp(22px, 3vw, 44px) clamp(24px, 3vw, 36px);
  background: var(--paper); box-shadow: var(--shadow-lg);
}
/* The research process as a wave rather than a bar chart: one line weaving
   across the panel, deepening from pale blue to navy, a wider pale swell
   behind it, and each stage's number in a bubble on the line. The wave
   crosses its midline exactly at each column's centre, which is where the
   bubbles sit - so the columns carry no horizontal gap. */
.uj-flow { position: relative; }
.uj-wave {
  position: absolute; left: 0; top: 0; width: 100%; height: 80px; overflow: visible;
  pointer-events: none;
}
.uj-wave path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.uj-swell { stroke: var(--blue-100); stroke-width: 10; opacity: .8; }
.uj-line { stroke: url(#uj-grad); stroke-width: 3; }
.uj-track {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 0;
}
.uj-track li { padding: 0 10px; text-align: center; }
.uj-bubble {
  --edge: color-mix(in oklch, var(--blue-400), var(--navy-900) calc(var(--i) * 18%));
  display: grid; place-items: center; width: 42px; height: 42px; margin: 19px auto 26px;   /* centred on the wave's midline, 40px down */
  border-radius: 50%; background: var(--paper);
  border: 2.5px solid var(--edge);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 6px 14px -4px rgba(4, 45, 98, .3);
  font-size: .95rem; font-weight: 800; color: var(--navy-800);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.uj-track li:hover .uj-bubble { transform: translateY(-5px); }
.uj-track h3 { margin: 0 0 .3em; font-size: 1.04rem; color: var(--ink); }
.uj-track p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.uj-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 30px 0 0; padding-top: 20px; border-top: 2px dotted var(--blue-200);
  font-size: 1rem; line-height: 1.6; color: var(--ink);
}
.uj-note::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: .1em;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}

/* the second chapter */
.uj-sub { max-width: 820px; margin: clamp(60px, 7vw, 96px) auto clamp(48px, 5vw, 64px); text-align: center; }
.uj-sub::before {                          /* the line that joins the chapters */
  content: ""; display: block; width: 2px; height: 46px; margin: 0 auto 20px;
  background: linear-gradient(to bottom, rgba(39, 122, 188, 0), var(--blue-600));
}
.uj-sub-title {
  margin: .25em 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.2; color: var(--ink); text-wrap: balance;
}

.uj-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.8vw, 34px); }
.uj-card {
  position: relative;
  padding: 50px clamp(24px, 2.8vw, 36px) clamp(26px, 2.8vw, 34px);
  background: var(--paper); box-shadow: var(--shadow);
  border-bottom: 3px solid var(--blue-400);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.uj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.uj-disc {
  position: absolute; top: -32px; left: clamp(24px, 2.8vw, 36px);
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--blue-200);
  box-shadow: 0 0 0 6px rgba(182, 224, 255, .9), var(--shadow);
  transition: border-color .2s ease;
}
.uj-card:hover .uj-disc { border-color: var(--accent); }
.uj-disc svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--blue-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.uj-card h3 { margin: 0 0 .7em; font-size: 1.2rem; color: var(--ink); }
.uj-card p { margin: 0; font-size: .96rem; line-height: 1.75; color: var(--ink); }
.uj-card p + p { margin-top: .9em; }

@media (max-width: 960px) {
  .uj-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uj-wave { display: none; }                /* the wave only lines up across six columns */
}
@media (max-width: 860px) { .uj-cards { grid-template-columns: minmax(0, 1fr); row-gap: 56px; } }
@media (max-width: 560px) { .uj-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .uj-bubble, .uj-card { transition: none; } }

/* ---------- four cards of prose (education) ---------- */

.px-people { background: var(--shell); }
.px-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 860px) { .px-cards { grid-template-columns: 1fr; } }
.px-cards article {
  background: var(--paper); border: 1px solid var(--blue-200); border-top: 4px solid var(--accent);
  padding: clamp(22px, 2.6vw, 32px);
}
.px-cards h3 { margin: 0 0 .6em; font-size: 1.12rem; color: var(--ink); }
.px-cards p { color: var(--ink); font-size: .95rem; line-height: 1.75; }

/* ---------- odds and ends ---------- */

.px-schools, .px-beyond { background: var(--paper); }
.px-shift {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  display: grid; grid-template-columns: minmax(0, 22ch) 1fr; gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--shell); border-left: 4px solid var(--accent);
}
.px-shift p { margin: 0; color: var(--ink); font-size: 1.05rem; }
@media (max-width: 700px) { .px-shift { grid-template-columns: 1fr; } }
.px-shift ul { margin: 0; padding-left: 1.2em; color: var(--ink); }
.px-shift li { margin-bottom: .4em; }

/* ---------- conservation beyond SORCE (Education & outreach) ----------
   Typography only, because the two sections above both use cards: each
   statement set large, alternating left and right like different voices,
   deepening from mid blue to navy down the list. The note closes on the organisation's name, its initials picked
   out so it spells the acronym. */
.px-beyond .section-title { white-space: normal; text-wrap: balance; }
/* Two columns, the right-hand voices dropped half a step, so the zigzag
   reads as alternating voices at about half the height of one per row. */
.bx-voices {
  list-style: none; margin: 0 auto; padding: 0 0 clamp(30px, 3.6vw, 48px); max-width: 860px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 6vw, 90px); row-gap: clamp(20px, 2.2vw, 28px);
}
.bx-voices li { display: flex; justify-content: flex-start; align-items: flex-start; }   /* no stretch: each bar matches its own text */
.bx-voices li:nth-child(even) { justify-content: flex-end; transform: translateY(72%); }
.bx-voices span {
  position: relative; max-width: 31ch; padding-left: 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.17rem, 1.45vw, 1.25rem); line-height: 1.4;   /* 18.7px+ bold: large text */
  /* bright blue deepening to navy. Blended in oklch, which keeps the blues
     saturated all the way down instead of greying them as srgb does; the
     first voice starts as bright as this bold, large text can go and still
     clear the 3:1 large-text contrast on white. */
  --v-top: color-mix(in oklch, var(--blue-600) 62%, var(--blue-400));
  color: color-mix(in oklch, var(--v-top), var(--navy-900) calc(var(--i) * 15%));
}
.bx-voices span::before {                   /* a bar on the speaking side */
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px;
  background: currentColor; opacity: .45;
}
.bx-voices li:nth-child(even) span { text-align: right; padding-left: 0; padding-right: 18px; }
.bx-voices li:nth-child(even) span::before { left: auto; right: 0; }
.bx-voices strong {
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--blue-200);
}
@media (max-width: 900px) {                  /* one column: alternating sides, no drop */
  .bx-voices { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .bx-voices li:nth-child(even) { transform: none; }
}
@media (max-width: 620px) {
  .bx-voices li:nth-child(even) { justify-content: flex-start; }
  .bx-voices li:nth-child(even) span { text-align: left; padding-right: 0; padding-left: 22px; }
  .bx-voices li:nth-child(even) span::before { right: auto; left: 0; }
}

.bx-note {
  max-width: 70ch; margin: clamp(40px, 5vw, 60px) auto 0; padding-top: 26px;
  border-top: 2px dotted var(--blue-200);
  text-align: center; font-size: 1.02rem; line-height: 1.75; color: var(--ink);
}
.bx-name {
  display: block; margin-top: .7em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; color: var(--ink);
}
.bx-name b { color: var(--blue-600); font-size: 1.18em; }
/* the name may run wider than the paragraph above it, so it sits on one line */
@media (min-width: 760px) {
  .bx-name { width: max-content; max-width: calc(100vw - 48px); position: relative; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 759px) { .bx-name { text-wrap: balance; } }


.px-join { background: var(--paper); }
/* Two columns rather than one long ribbon down the middle of a wide page. */
.px-join-copy { columns: 2; column-gap: clamp(34px, 4vw, 64px); }
@media (max-width: 800px) { .px-join-copy { columns: 1; } }
.px-join p { color: var(--ink); line-height: 1.8; break-inside: avoid; }
.px-join p + p { margin-top: 1em; }

/* ---------- jump links to each programme ----------
   Built by js/pillar.js under the heading of each group of programmes: a
   centred row of links, each marked with the small square the rest of the
   page uses, so a reader can skip straight to one programme. */
.px-jump ul {
  list-style: none; margin: clamp(22px, 2.6vw, 32px) auto 0; padding: 0;   /* auto: centred once balanced */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.px-jump a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border: 1.5px solid var(--blue-200); border-radius: 999px;
  background: var(--paper); color: var(--accent-text);
  font-size: .88rem; font-weight: 700; text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.px-jump a::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border: 1.5px solid var(--blue-400); transition: background-color .2s var(--ease);
}
.px-jump a:hover, .px-jump a:focus-visible {
  background: var(--shell); border-color: var(--accent); transform: translateY(-2px);
}
.px-jump a:hover::before { background: var(--accent); border-color: var(--accent); }
.px-jump a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .px-jump a { transition: none; } }

/* ---------- the reveal ---------- */

/* .is-veiled is only ever added by script, so nothing is hidden on a page
   where the script did not run. */
.is-veiled { opacity: 0; transform: translateY(18px); }
.is-veiled.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .is-veiled { opacity: 1; transform: none; }
}

/* ---------- the three figures for each project ---------- */

/* Full width of the block, across both columns: at the foot of the copy they
   read as a footnote, and these are the opposite of a footnote. */
.px-stats-wrap {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 4.6vw, 60px);
}
.px-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 44px);
}
@media (max-width: 620px) { .px-stats { grid-template-columns: 1fr; gap: 34px; } }

/* No panel and no border - the figures stand on the page, as they do on the
   homepage. */
.px-stat { text-align: center; margin: 0; }

/* object-fit matters: the icon set has mixed aspect ratios, so a square box
   would stretch them. Contain scales each inside a consistent square. */
.px-stat img {
  display: block;
  width: clamp(76px, 8vw, 104px); height: clamp(76px, 8vw, 104px);
  object-fit: contain; margin: 0 auto 16px;
  transition: transform .3s var(--ease);
}
.px-stat:hover img { transform: translateY(-6px) scale(1.04); }

.px-stat-value {
  display: block;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); letter-spacing: -.03em;
  color: var(--navy-900); font-variant-numeric: tabular-nums;
  margin-bottom: .3em;
}
.px-stat-label {
  display: block;
  font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--accent-text); max-width: 22ch; margin-inline: auto;
}

/* A figure still to be confirmed: it holds its place, but is plainly waiting
   rather than pretending to be a number. */
.px-stat-todo { color: var(--line); }
.px-stat:has(.px-stat-todo) img { opacity: .3; }
.px-stat:has(.px-stat-todo) .px-stat-label { color: var(--muted); font-weight: 400; }
.px-stat:has(.px-stat-todo):hover img { transform: none; }

/* ============================================================
   EXPLORE & LEARN
   ============================================================ */

/* ---------- the sticky section bar ---------- */

.ex-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--navy-800); color: #fff;
  box-shadow: 0 2px 14px rgba(4, 45, 98, .28);
}
.ex-bar-inner { display: flex; gap: clamp(10px, 2vw, 30px); align-items: stretch; overflow-x: auto; }
.ex-bar a {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px; white-space: nowrap;
  color: rgba(255, 255, 255, .8); text-decoration: none;
  font-family: var(--font-display); font-size: .86rem; letter-spacing: .05em;
  border-bottom: 3px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.ex-bar a:hover { color: #fff; }
.ex-bar a.is-here { color: #fff; border-bottom-color: var(--blue-200); }
.ex-bar-n { color: var(--blue-200); font-size: .78rem; }
.ex-bar-game { margin-left: auto; color: var(--blue-200) !important; }
@media (max-width: 700px) { .ex-bar-game { display: none; } }

/* ---------- the opening: copy beside the habitat network ----------
   The headline says ecosystems are networks, so the section draws one:
   four habitats as nodes on a soft pale glow, five connections with dots
   travelling both ways along them. Hovering (or tabbing to) a connection
   lights it and says what crosses it in the readout underneath; hovering
   a habitat lights everything it is linked to; selecting one opens its
   fact file in Part one. Wiring in js/explore.js. */

.ex-lead-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.ex-intro { max-width: 60ch; }
.ex-intro p { color: var(--ink); line-height: 1.8; font-size: 1.05rem; }

.exnet { position: relative; isolation: isolate; margin: 0; }
.exnet::before {                           /* the pale glow the network sits on */
  content: ""; position: absolute; z-index: -1; inset: 0 0 16%;
  background: radial-gradient(closest-side, rgba(182, 224, 255, .6), rgba(182, 224, 255, 0));
  pointer-events: none;
}
.exnet-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* connections */
.exnet-link { cursor: pointer; outline: none; transition: opacity .25s ease; }
.exnet-hit { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }
.exnet-line {
  fill: none; stroke: var(--blue-200); stroke-width: 2.2; stroke-linecap: round;
  transition: stroke .2s ease, stroke-width .2s ease;
}
.exnet-dot { fill: var(--blue-400); }
.exnet-link.is-on .exnet-line { stroke: var(--blue-600); stroke-width: 4; }
.exnet-link.is-on .exnet-dot { fill: var(--navy-800); }
.exnet-link:focus-visible .exnet-line { stroke: var(--navy-800); stroke-width: 4; }
.exnet.is-dim .exnet-link:not(.is-on) { opacity: .3; }

/* habitats */
.exnet-node { cursor: pointer; outline: none; }
.exnet-ring {
  fill: none; stroke: var(--blue-200); stroke-width: 1.5; stroke-dasharray: 2 6;
  transform-box: fill-box; transform-origin: center;
}
.exnet-disc {
  fill: var(--paper); stroke: var(--blue-200); stroke-width: 2;
  filter: drop-shadow(0 8px 14px rgba(4, 45, 98, .18));
  transition: stroke .2s ease, stroke-width .2s ease;
}
.exnet-node image {
  transform-box: fill-box; transform-origin: center;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.exnet-node text {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  fill: var(--ink); text-anchor: middle;
}
.exnet-node:hover .exnet-disc,
.exnet-node.is-on .exnet-disc { stroke: var(--blue-600); stroke-width: 3; }
.exnet-node:hover image,
.exnet-node:focus-visible image { transform: scale(1.1) rotate(-6deg); }
.exnet-node:hover .exnet-ring,
.exnet-node:focus-visible .exnet-ring { animation: exnet-spin 14s linear infinite; stroke: var(--blue-400); }
.exnet-node:focus-visible .exnet-disc { stroke: var(--navy-800); stroke-width: 3.5; }
@keyframes exnet-spin { to { transform: rotate(360deg); } }

/* what crosses the connection */
.exnet-readout {
  max-width: 48ch; min-height: 5.4em; margin: 4px auto 0;
  padding: 14px 18px;
  background: var(--shell); border-left: 3px solid var(--accent);
  font-size: .95rem; line-height: 1.6; color: var(--ink);
}
.exnet-readout.is-idle { color: var(--muted); }
.exnet-readout strong {
  display: block; margin-bottom: .25em;
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text);
}

@media (max-width: 900px) {
  .ex-lead-grid { grid-template-columns: minmax(0, 1fr); }
  .exnet { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .exnet-node text { font-size: 22px; }     /* the drawing scales down; its labels should not */
}
@media (prefers-reduced-motion: reduce) {
  .exnet-dot { display: none; }
  .exnet-node:hover .exnet-ring, .exnet-node:focus-visible .exnet-ring { animation: none; }
  .exnet-node image, .exnet-line, .exnet-disc, .exnet-link { transition: none; }
}

/* ---------- ecosystems ---------- */

/* both bars have to be cleared when jumping to a section */
[data-ex-section] { scroll-margin-top: calc(var(--header-h) + 58px); }

.section-eco { background: var(--paper); }

.eco-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(26px, 3vw, 40px);
}
@media (max-width: 800px) { .eco-tabs { grid-template-columns: repeat(2, 1fr); } }
.eco-tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: clamp(18px, 2.2vw, 26px) 14px;
  background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              transform .18s var(--ease);
}
.eco-tab img { width: 52px; height: 52px; object-fit: contain; transition: transform .3s var(--ease); }
.eco-tab-name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.eco-tab-strap { font-size: .82rem; color: var(--muted); }
.eco-tab:hover { transform: translateY(-3px); border-color: var(--blue-400); }
.eco-tab:hover img { transform: scale(1.06); }
.eco-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.eco-tab.is-on {
  background: var(--navy-800); border-color: var(--navy-800);
}
.eco-tab.is-on .eco-tab-name { color: #fff; }
.eco-tab.is-on .eco-tab-strap { color: var(--blue-200); }

/* Without JavaScript every panel is simply shown in turn, so nothing is
   unreachable; the script then hides all but one. */
.eco-panel {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 3vw, 44px); align-items: start;
  padding: clamp(24px, 3vw, 38px);
  background: var(--shell);
}
.eco-panel[hidden] { display: none; }
@media (max-width: 900px) { .eco-panel { grid-template-columns: 1fr; } }
.eco-panel + .eco-panel { margin-top: 18px; }

.eco-lead h3 { margin: 0 0 .6em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--ink); }
.eco-lead p { color: var(--ink); line-height: 1.8; }
.eco-media img { display: block; width: 100%; height: auto; border: 1px solid var(--blue-200); }

.eco-matters, .eco-pressure { grid-column: span 1; }
@media (max-width: 900px) { .eco-matters, .eco-pressure { grid-column: 1; } }
.eco-matters h4, .eco-pressure h4 {
  margin: 0 0 14px; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-text);
}
.eco-tiles { margin: 0; display: grid; gap: 1px; background: var(--blue-200); border: 1px solid var(--blue-200); }
.eco-tiles > div { background: var(--paper); padding: 14px 16px; }
.eco-tiles dt { font-family: var(--font-display); font-size: .95rem; color: var(--ink); }
.eco-tiles dd { margin: .25em 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }

.eco-press { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eco-press li {
  padding: 6px 12px; font-size: .84rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--blue-200);
}
.eco-sorce { padding: 18px 20px; background: var(--paper); border-left: 4px solid var(--accent); }
.eco-sorce p { margin: 0 0 14px; font-size: .95rem; color: var(--ink); line-height: 1.7; }

/* ---------- diagrams ---------- */

.ex-figure { margin: clamp(34px, 4vw, 56px) 0 0; }
.ex-figure svg { display: block; width: 100%; height: auto; }
.ex-figure figcaption {
  margin-top: 16px; text-align: center; color: var(--muted); font-size: .95rem;
  max-width: 70ch; margin-inline: auto;
}
.ex-figure-head {
  margin: 0 0 18px !important; text-align: center;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-text) !important;
}
/* the connectivity illustration, and the strip naming its four habitats -
   a line running from mangrove green to open-water navy, a tick and a
   label under the part of the drawing each names */
.cx-art { max-width: 1100px; margin: 0 auto; }
.cx-art img { display: block; width: 100%; height: auto; }
.cx-zones {
  position: relative; list-style: none; margin: 6px 0 0; padding: 0; height: 44px;
}
.cx-zones::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 4px; height: 2px;
  background: linear-gradient(90deg, var(--green-400), var(--blue-400) 55%, var(--navy-800));
  opacity: .55;
}
.cx-zones li {
  position: absolute; left: var(--x); top: 0; transform: translateX(-50%);
  padding-top: 18px; white-space: nowrap;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
}
.cx-zones li::before {                      /* the tick on the line */
  content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px;
  transform: translateX(-50%); border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent);
}
@media (max-width: 560px) {                 /* two-word labels stack, so none collide */
  .cx-zones { height: 58px; }
  .cx-zones li {
    width: min-content; white-space: normal; text-align: center; line-height: 1.25;
    font-size: .64rem; letter-spacing: .06em;
  }
}
/* coral growth forms - the six illustrations in a row, each lifting a
   little on hover; three per row on phones */
.cf-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px clamp(10px, 2vw, 28px);
}
.cf-list li { text-align: center; }
.cf-list img {
  display: block; width: 100%; max-width: 130px; height: auto; margin: 0 auto 10px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.cf-list li:hover img { transform: translateY(-5px) rotate(-3deg); }
.cf-list span { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.cf-list small { display: block; margin-top: .3em; font-size: .82rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 700px) { .cf-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cf-list img { transition: none; } }

/* ---------- species ---------- */

.section-species { background: var(--shell); }

.sp-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; }
@media (max-width: 700px) { .sp-tabs { grid-template-columns: repeat(2, 1fr); } }
.sp-tab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 12px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--blue-200);
  font-family: var(--font-display); font-size: .95rem; color: var(--ink);
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.sp-tab img { width: 32px; height: 32px; object-fit: contain; }
.sp-count { font-size: .78rem; color: var(--muted); }
.sp-tab:hover { border-color: var(--accent); }
.sp-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-tab.is-on .sp-count { color: rgba(255, 255, 255, .8); }

.sp-panel[hidden] { display: none; }
.sp-intro { max-width: 78ch; margin: 0 auto clamp(24px, 3vw, 34px); text-align: center; color: var(--ink); }

/* Compact tiles: picture, group, name, Latin name and a "learn more" line.
   Each tile opens its full card in a dialog (main.js, .modal-source); the
   full cards are written after the tab panels by build-species.py. */
.sp-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.sp-card { display: flex; }
.sp-open {
  flex: 1; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--blue-200); border-top: 3px solid var(--blue-200);
  text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.sp-open:hover, .sp-open:focus-visible {
  transform: translateY(-3px); box-shadow: 0 14px 28px rgba(4, 45, 98, .14); border-top-color: var(--accent);
}
.sp-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sp-photo { display: block; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-icon { width: 84px; height: 84px; object-fit: contain; margin: 18px 18px 0; }
.sp-body { display: flex; flex-direction: column; flex: 1; padding: 14px 18px 16px; }
.sp-group {
  display: block; margin: 0 0 .3em; font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.sp-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; line-height: 1.25; color: var(--ink); }
.sp-latin { display: block; margin: .2em 0 0; font-style: italic; color: var(--accent-text); font-size: .88rem; }
.sp-more {
  display: block; margin-top: auto; padding-top: 12px;
  font-size: .82rem; font-weight: 700; color: var(--accent-text);
}
.sp-more span { display: inline-block; transition: transform .2s var(--ease); }
.sp-open:hover .sp-more span { transform: translateX(5px); }

/* the full card */
.sp-details:has(> .sp-detail) { margin-top: clamp(28px, 3.4vw, 42px); display: grid; gap: 16px; }   /* only while the cards are still inline (JS off) */
.sp-detail { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); padding: clamp(22px, 2.6vw, 30px); }
.modal-card:has(.sp-detail) { max-width: 620px; }
.modal-shell .sp-detail { border: 0; border-top: 4px solid var(--accent); padding: clamp(28px, 3.6vw, 40px); }
.sp-detail-photo { margin: calc(clamp(28px, 3.6vw, 40px) * -1) calc(clamp(28px, 3.6vw, 40px) * -1) 22px; aspect-ratio: 16 / 9; overflow: hidden; }
.sp-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding-right: 36px; }
.sp-detail-icon { width: 110px; height: 110px; object-fit: contain; flex: none; }
.sp-detail h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.55rem); color: var(--ink); }
.sp-detail .sp-latin { font-size: .98rem; }
.sp-text { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.sp-look {
  margin: 1.2em 0 0; padding: 14px 18px; background: var(--shell); border-left: 4px solid var(--accent);
  font-size: .95rem; line-height: 1.6; color: var(--ink);
}
.sp-look span {
  display: block; font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .3em;
}
@media (max-width: 460px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-icon { margin: 14px 14px 0; } .sp-body { padding: 12px 14px 14px; } }
@media (prefers-reduced-motion: reduce) { .sp-open, .sp-more span { transition: none; } }

/* ---------- survey methods ---------- */

.section-methods { background: var(--paper); }

.ex-chain-wrap { margin: 0 0 clamp(40px, 4.6vw, 60px); }
.ex-weave { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; overflow: visible; }
.ex-weave .ew-wave { fill: none; stroke: url(#ex-wg); stroke-width: 2.5; stroke-linecap: round; }
.ex-weave .ew-t1 { font: 600 12px var(--font-sans); fill: var(--grey-500); text-anchor: middle; }
.ex-weave .ew-t2 { font: 700 15px var(--font-display); fill: var(--navy-900); text-anchor: middle; }
.ex-weave .ew-f  { font: 700 13.5px var(--font-display); fill: #fff; text-anchor: middle; }

/* the list: for screen readers on wide screens, the visible chain below 980px */
@media (min-width: 981px) {
  .ex-chain {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 980px) {
  .ex-weave { display: none; }
  .ex-chain {
    position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 420px;
    display: grid; gap: 14px;
  }
  .ex-chain::before {                       /* the line down through the circles */
    content: ""; position: absolute; left: 21px; top: 22px; bottom: 30px; width: 2px;
    background: linear-gradient(to bottom, var(--blue-100), var(--blue-400) 55%, var(--navy-800));
  }
  .ex-chain li {
    position: relative; display: flex; align-items: center; gap: 16px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink);
  }
  .ex-chain { counter-reset: ex-step; }
  .ex-chain li { counter-increment: ex-step; }
  .ex-chain li::before {
    content: counter(ex-step); display: grid; place-items: center;
    font-size: .95rem; font-weight: 800; color: var(--navy-800);
    flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff;
    border: 3px solid color-mix(in oklch, var(--blue-200), var(--blue-600) calc(var(--i, 4) * 25%));
  }
  .ex-chain .ex-chain-end { font-size: 1.12rem; color: var(--navy-900); }
  .ex-chain .ex-chain-end::before {
    content: "\2713"; color: #fff; font-size: 1.15rem;
    width: 44px; height: 44px; background: var(--navy-800); border-color: var(--navy-800);
    box-shadow: 0 0 0 6px rgba(67, 176, 241, .22);
  }
}

.me-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 1000px) { .me-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .me-grid { grid-template-columns: 1fr; } }
.me-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  padding: clamp(20px, 2.2vw, 26px);
  scroll-margin-top: calc(var(--header-h) + 76px);
}
.me-card header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.me-card header img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.me-short {
  margin: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.me-card h3 { margin: .2em 0 0; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.me-text { margin: 0 0 1.2em; font-size: .94rem; line-height: 1.7; color: var(--ink); }
.me-card h4 {
  margin: 0 0 .6em; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
/* What each method can tell us: two columns, a small starfish for each */
.me-uses {
  list-style: none; margin: 0 0 1.4em; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
}
.me-uses li {
  position: relative; padding-left: 25px;
  font-size: .86rem; line-height: 1.4; color: var(--ink);
}
.me-uses li::before {
  content: ""; position: absolute; left: 0; top: -.05em; width: 18px; height: 18px;
  background: no-repeat center / contain url("../assets/icons/starfish.svg");
}
/* The question sits on a hairline at the foot of every card, so the
   bottoms line up across a row however long the text above is */
.me-q {
  margin: auto 0 0 !important; padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font-size: .9rem; line-height: 1.6; font-style: italic; color: var(--muted);
}
.me-q span {
  display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .3em;
}
.me-q p { margin: 0; }
/* the answer, folded away until asked for */
.me-a { margin-top: .7em; font-style: normal; }
.me-a summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--accent-text);
}
.me-a summary::-webkit-details-marker { display: none; }
.me-a summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.me-a[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.me-a summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.me-a p { margin: .5em 0 0; color: var(--ink); }

.section-choose {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
/* "Which method would you choose?" - one question at a time, four
   methods to pick from, then the answer and why */
.mp { max-width: 900px; margin: 0 auto; }
.mp-data { max-width: 760px; margin: 0 auto; padding-left: 1.2em; line-height: 1.8; }
.mp-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-200); font-weight: 700;
}
.mp-dots { display: flex; gap: 6px; }
.mp-dots i { width: 26px; height: 4px; background: rgba(255, 255, 255, .22); }
.mp-dots i.on { background: var(--blue-400); }
.mp-dots i.ok { background: #fff; }
.mp-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); padding: clamp(24px, 3.5vw, 40px); }
.mp-card[hidden] { display: none; }
.mp-q { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.65rem); line-height: 1.3; margin: 0 0 6px; color: #fff; }
.mp-hint { margin: 0 0 24px; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.mp-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mp-opt {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 10px 16px; text-align: center;
  background: #fff; color: var(--navy-900); font-weight: 700; font-size: .92rem;
  border: 2px solid transparent;
  transition: transform .15s var(--ease), border-color .15s, opacity .2s;
}
.mp-opt img { width: 44px; height: 44px; object-fit: contain; }
.mp-opt small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); line-height: 1.3; }
.mp-opt:hover { transform: translateY(-3px); }
.mp-opt:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }
.mp-play.is-done .mp-opt { cursor: default; transform: none; }
.mp-play.is-done .mp-opt:not(.is-right):not(.is-picked) { opacity: .35; }
.mp-opt.is-right { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(67, 176, 241, .35); }
.mp-opt.is-picked:not(.is-right) { opacity: .6; text-decoration: line-through; }
.mp-res { display: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); }
.mp-play.is-done .mp-res { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.mp-verdict { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.mp-why { margin: 0; color: rgba(255, 255, 255, .86); line-height: 1.6; }
.mp-next { white-space: nowrap; }
.mp-end { text-align: center; }
.mp-score { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0; color: #fff; }
.mp-note { max-width: 60ch; margin: 12px auto 22px; }
@media (max-width: 700px) {
  .mp-opts { grid-template-columns: 1fr 1fr; }
  .mp-play.is-done .mp-res { grid-template-columns: 1fr; }
}

/* ---------- one reef, many methods ---------- */

.section-next { background: var(--paper); }
.wn-path {
  list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px);
  position: relative;
}
/* the line joining the three stops, centre of the first to centre of the last */
.wn-path::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 2px;
  background: linear-gradient(90deg, var(--blue-200), var(--blue-600));
}
.wn-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.wn-dot {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-400);
  display: grid; place-items: center; position: relative; z-index: 1;
  box-shadow: 0 8px 20px -12px rgba(4, 45, 98, .6);
}
.wn-dot img { width: 32px; height: 32px; object-fit: contain; }
.wn-stage {
  margin: 16px 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.wn-step h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--ink); }
.wn-desc { margin: 0 0 16px; color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 30ch; }
.wn-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1.5px solid var(--navy-800); border-radius: 999px;
  color: var(--navy-900); font-weight: 700; font-size: .9rem; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.wn-link:hover, .wn-link:focus-visible { background: var(--navy-900); color: #fff; }
.wn-note {
  max-width: 62ch; margin: clamp(34px, 4vw, 50px) auto 0; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink); line-height: 1.5;
}
/* On a phone the path runs down the page */
@media (max-width: 760px) {
  .wn-path { grid-template-columns: 1fr; gap: 34px; }
  .wn-path::before {
    left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--blue-200), var(--blue-600));
  }
  .wn-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: left; align-items: start; }
  .wn-dot { grid-row: span 4; }
  .wn-stage { margin-top: 4px; }
  .wn-link { justify-self: start; }
}

/* ============================================================
   IMPACT LANDING PAGE
   ============================================================ */

/* The headline strip: six figures rather than three, so it runs in two rows
   of three on a wide screen. */
.imp-headline { margin-top: 0; padding-top: 0; border-top: 0; }
.imp-headline .px-stats { row-gap: clamp(30px, 3.4vw, 46px); }
/* The band is a gradient, so the label has to hold at its lightest end
   (blue-600): pale blue reaches only 2.6:1 there, white reaches 4.6:1. */
.px-figures .px-stat-value { color: #fff; }
.px-figures .px-stat-label { color: #fff; }
.px-figures .px-stat-todo { color: rgba(255, 255, 255, .4); }

/* ---------- the three strands ---------- */

.imp-pillars { background: var(--paper); }

/* ---------- the two bands, swapped ----------

   The strands and the figures changed places, but the navy band stays first
   and the white one second. So the strands take the navy here, and the
   figures take white - which is what .px-figures looks like everywhere else
   with its dark ground removed. Both are scoped to this page: the figures
   appear on Research, Conservation and Education too, and stay navy there. */

.imp-pillars-dark {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
/* The cards invert rather than staying white: on the pale ground they were
   barely distinct from it, held apart by a hairline and the rule on top. That
   is the relationship being kept here, with the values turned over - a card
   only slightly lifted from the navy, a pale hairline, and a brighter rule. */
.imp-pillars-dark .imp-pillar {
  background: rgba(255, 255, 255, .05);
  /* No edge: the card is lifted off the navy instead. A shadow on a dark
     ground has to be near black to register at all - a tinted one just looks
     like haze - so these are black at low opacity rather than navy. */
  border: 0;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .26),
    0 20px 44px -12px rgba(0, 0, 0, .52);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease);
}
.imp-pillars-dark .imp-pillar:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .3),
    0 30px 60px -14px rgba(0, 0, 0, .6);
}

.imp-pillars-dark .imp-pillar-copy .eyebrow { color: var(--blue-200); }
.imp-pillars-dark .imp-pillar-copy h3 { color: #fff; }
.imp-pillars-dark .imp-pillar-copy > p { color: rgba(255, 255, 255, .88); }
.imp-pillars-dark .imp-points li { color: rgba(255, 255, 255, .8); }
.imp-pillars-dark .imp-points li::before {
  border-left-color: var(--blue-400); border-bottom-color: var(--blue-400);
}
/* the outline button needs a light edge here, not a navy one */
.imp-pillars-dark .btn-outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .6); }
.imp-pillars-dark .btn-outline:hover { --btn-bg: #fff; --btn-fg: var(--navy-900); --btn-bd: #fff; }

.px-figures-light {
  background: var(--paper);
  color: var(--ink);
}
.px-figures-light .px-stat-value { color: var(--navy-900); }
.px-figures-light .px-stat-label { color: var(--accent-text); }
.px-figures-light .px-stat-todo { color: var(--muted); }

.imp-pillar {
  display: grid; grid-template-columns: 42fr 58fr;
  gap: clamp(24px, 3.4vw, 48px); align-items: stretch;
  border: 1px solid var(--line); border-top: 4px solid var(--accent);
  background: var(--paper);
  transition: box-shadow .22s var(--ease);
}
.imp-pillar + .imp-pillar { margin-top: clamp(22px, 3vw, 34px); }
.imp-pillar:hover { box-shadow: 0 20px 44px rgba(4, 45, 98, .14); }
@media (max-width: 860px) { .imp-pillar { grid-template-columns: 1fr; } }

/* the photograph fills its half, whatever the copy beside it does */
.imp-pillar-media { position: relative; overflow: hidden; min-height: 260px; }
.imp-pillar-media > img:first-child {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.imp-pillar-copy { padding: clamp(24px, 3vw, 38px); align-self: center; }
.imp-pillar-copy h3 {
  margin: 0 0 .5em; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--ink);
  text-wrap: balance;
}
.imp-pillar-copy > p { margin: 0 0 1.2em; color: var(--ink); line-height: 1.75; }

.imp-points { list-style: none; margin: 0 0 1.6em; padding: 0; }
.imp-points li {
  position: relative; padding-left: 26px; margin-bottom: .6em;
  color: var(--muted); font-size: .95rem; line-height: 1.55;
}
.imp-points li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- the cycle ---------- */

.imp-cycle { background: var(--shell); }

/* ---------- the cycle ----------

   Six steps as a circuit rather than a row with a beginning and an end. What
   makes it read as one: chevrons between the cards, and a return path curving
   back from the last to the first. The
   numbers are gone - the arrows carry the order, and numbering implies a
   final step, which is the opposite of the point.

   .px-flow is shared with four other pages, so none of this touches it.
*/

.cyc { position: relative; padding-bottom: 66px; }

.cyc-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
}

.cyc-steps li {
  position: relative;
  padding: clamp(16px, 1.8vw, 22px);
  background: var(--paper);
  border: 1px solid var(--blue-200);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cyc-steps li:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(4, 45, 98, .16);
}

/* Each card's top edge takes a step along the palette, so the eye can see
   movement through the sequence without a number telling it. */
.cyc-steps li { border-top: 3px solid var(--accent); }
.cyc-steps li:nth-child(1) { border-top-color: var(--navy-900); }
.cyc-steps li:nth-child(2) { border-top-color: var(--navy-800); }
.cyc-steps li:nth-child(3) { border-top-color: var(--blue-600); }
.cyc-steps li:nth-child(4) { border-top-color: var(--blue-600); }
.cyc-steps li:nth-child(5) { border-top-color: var(--blue-400); }
.cyc-steps li:nth-child(6) { border-top-color: var(--blue-400); }

/* the chevron sitting in the gap to the right of each card */
.cyc-steps li::after {
  content: ""; position: absolute; top: 50%;
  right: calc(clamp(18px, 2.2vw, 30px) / -2 - 5px);
  width: 10px; height: 10px; margin-top: -5px;
  border-right: 2px solid var(--blue-400);
  border-bottom: 2px solid var(--blue-400);
  transform: rotate(-45deg);
}
.cyc-steps li:last-child::after { content: none; }

.cyc-icon {
  display: block; width: clamp(34px, 3vw, 42px); height: auto;
  margin-bottom: 12px;
}
.cyc-steps li { text-align: center; }
.cyc-steps .cyc-icon { margin-left: auto; margin-right: auto; }
.cyc-steps h3 { margin: 0 0 .3em; font-size: 1rem; color: var(--ink); }
.cyc-steps p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

/* the path back to the beginning */
.cyc-return { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; }
.cyc-return svg { width: 100%; height: 100%; display: block; }
.cyc-return-label {
  position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 50%);
  background: var(--shell); padding: 0 14px;
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text);
}

/* Two rows of three, then one column. The rail and the return only make sense
   across a single row, so below that the steps become a list with a chevron
   between each and the loop stated at the end. */
@media (max-width: 1040px) {
  .cyc { padding-bottom: 0; }
  .cyc-steps { grid-template-columns: repeat(3, 1fr); }
  .cyc-return { display: none; }
  .cyc-steps li:nth-child(3)::after { content: none; }
}
@media (max-width: 640px) {
  .cyc-steps { grid-template-columns: 1fr; gap: 30px; }
  .cyc-steps li::after {
    top: auto; right: 50%; bottom: -21px; margin: 0 -5px 0 0;
    transform: rotate(45deg);
  }
  .cyc-steps li:nth-child(3)::after { content: ""; }
  .cyc-steps li:last-child::after { content: none; }
}

/* ---------- also under Impact ---------- */

.imp-more { background: var(--paper); }
.imp-cards {
  list-style: none; margin: 0; padding: 0;
  max-width: 1080px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px);
}
@media (max-width: 900px) { .imp-cards { grid-template-columns: minmax(0, 1fr); max-width: 460px; } }

/* soft white cards: a faint edge all round, the shadow deeper below */
.imp-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%;
  padding: clamp(28px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  background: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(4, 45, 98, .07), 0 2px 8px rgba(4, 45, 98, .06),
              0 16px 34px -20px rgba(4, 45, 98, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.imp-card img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; transition: transform .25s var(--ease); }
.imp-card-name { font-weight: 700; font-size: 1.12rem; color: var(--ink); margin-bottom: .4em; }
.imp-card-desc { color: var(--muted); font-size: .95rem; line-height: 1.6; margin-bottom: 1.3em; text-wrap: balance; }
.imp-card-go {
  margin-top: auto; font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-text);
}
.imp-card-go span { display: inline-block; transition: transform .2s var(--ease); }
.imp-card:hover, .imp-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(4, 45, 98, .09), 0 2px 8px rgba(4, 45, 98, .06),
              0 24px 44px -20px rgba(4, 45, 98, .38);
}
.imp-card:hover img { transform: translateY(-3px) rotate(-4deg); }
.imp-card:hover .imp-card-go span { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .imp-card, .imp-card img, .imp-card-go span { transition: none; }
}

/* ============================================================
   REMOTE VOLUNTEERING (rvx-)

   Below the Support-page opening: the exchange on navy (what you give, and
   the earned week drawn as a ticket), the year as a joined-up path, who it
   is for beside a "find your fit" chooser, the roles as compact cards with
   their full descriptions in a pop-out, the expedition pages' "what we ask
   of you" checklist, and a single closing band. Cards, chips, pop-outs and
   the fit list are written by build-roles.py from data/roles.json; the
   filter and the fit highlighting are js/roles.js.
   ============================================================ */

.rv-deal {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.rvx-empty { margin: 0; padding: 20px; background: var(--shell); color: var(--muted); }

/* shared split header: title left, intro right, a rule beneath */
.rvx-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px clamp(28px, 5vw, 80px); align-items: end;
  padding-bottom: 24px; border-bottom: 2px solid var(--ink); margin-bottom: clamp(34px, 4.2vw, 52px);
}
.rvx-head .sv-label::before, .rvx-who-copy .sv-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.rvx-title { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.rvx-intro { margin: 0; max-width: 44ch; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.rvx-head.light { border-bottom-color: rgba(255, 255, 255, .85); }
.rvx-head.light .sv-label { color: var(--blue-200); }
.rvx-head.light .sv-label::before { background: var(--blue-400); }
.rvx-head.light .rvx-title { color: #fff; }
.rvx-head.light .rvx-intro { color: rgba(255, 255, 255, .8); }
@media (max-width: 760px) { .rvx-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---- the exchange: what you give, and the earned week as a ticket ---- */
.dC { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(32px,5vw,80px); align-items: center; }
.dC-k { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200); }
.dC-lede { margin: 0 0 30px; font-family: var(--font-display); font-size: clamp(1.4rem,2.3vw,1.9rem); line-height: 1.35; color: #fff; max-width: 30ch; }
.dC-lede span { font: inherit; color: inherit; }
.dC-gain { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.25); }
.dC-gain li { padding: 12px 0 12px 26px; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.88); position: relative; }
.dC-gain li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 5px; border-left: 2px solid var(--blue-400); border-bottom: 2px solid var(--blue-400); transform: rotate(-45deg); }
.dC-ticket { position: relative; padding: clamp(26px,3vw,36px); background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.dC-ticket::before, .dC-ticket::after { content: ""; position: absolute; left: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--navy-900); }
.dC-ticket::after { left: auto; right: -12px; }
.dC-t-k { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); }
.dC-t-big { margin: 0; font-family: "Segoe UI Light","Segoe UI",sans-serif; font-weight: 300; font-size: clamp(3rem,5vw,4.2rem); line-height: 1; letter-spacing: -.04em; color: var(--navy-900); }
.dC-t-big span { font: inherit; color: inherit; }
.dC-t-where { margin: 6px 0 20px; font-weight: 600; color: var(--accent-text); }
.dC-ticket dl { margin: 0; padding-top: 16px; border-top: 2px dashed var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dC-ticket dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dC-ticket dd { margin: 4px 0 0; font-weight: 700; color: var(--ink); }
@media (max-width: 860px) { .dC { grid-template-columns: minmax(0,1fr); } }
.rvx-fine { max-width: 760px; margin: clamp(40px, 5vw, 56px) auto 0; text-align: center; font-size: .84rem; line-height: 1.7; color: rgba(255, 255, 255, .7); }
.rvx-fine::before { content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 14px; background: rgba(140, 203, 250, .5); }

/* ---- how it works: a joined-up path with when each step happens ---- */
.rvx-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: p; position: relative; }
.rvx-path::before { content: ""; position: absolute; top: 23px; left: 10%; right: 10%; height: 2px; background: var(--blue-200); }
.rvx-path li { counter-increment: p; position: relative; padding: 0 clamp(8px, 1.4vw, 18px); text-align: center; }
.rvx-when { display: block; min-height: 1.4em; margin-bottom: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); }
.rvx-when span { font: inherit; color: inherit; }
.rvx-path li::before {
  content: counter(p); display: grid; place-items: center; position: relative;
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-600); color: var(--blue-600); font-family: var(--font-display); font-size: 1.15rem;
}
.rvx-path li:last-child::before { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.rvx-path b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1.02rem; }
.rvx-path li > span:last-child { display: block; color: var(--muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 900px) {
  .rvx-path { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rvx-path::before { top: 20px; bottom: 20px; left: 22px; right: auto; width: 2px; height: auto; }
  .rvx-path li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; text-align: left; padding: 0; }
  .rvx-path li::before { grid-row: 1 / span 3; margin: 0; }
  .rvx-when { margin: 0 0 4px; min-height: 0; }
}

/* ---- who it is for: the copy beside a "find your fit" chooser ---- */
.rvx-who { background: var(--shell); }
.rvx-who-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rvx-who-copy .rvx-title { margin-bottom: 20px; }
.rvx-who-copy p:not(.sv-label) { color: var(--ink); line-height: 1.75; }
.rvx-fit { background: #fff; border-top: 3px solid var(--navy-900); padding: clamp(22px, 2.6vw, 30px); box-shadow: 0 30px 60px -36px rgba(4, 45, 98, .5); }
.rvx-fit-h { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.rvx-fit ul { list-style: none; margin: 0 0 16px; padding: 0; }
.rvx-fit button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 4px; border-bottom: 1px solid var(--line);
  transition: background .2s, padding .25s var(--ease);
}
.rvx-fit b { color: var(--ink); font-size: 1.02rem; }
.rvx-fit button span { grid-column: 1; color: var(--muted); font-size: .86rem; }
.rvx-fit i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--blue-600); transition: transform .25s var(--ease); }
.rvx-fit button:hover, .rvx-fit button:focus-visible { background: var(--shell); padding-left: 12px; }
.rvx-fit button:hover i { transform: translateX(4px); }
.rvx-fit-ask { font-weight: 700; font-size: .9rem; color: var(--accent-text); text-decoration: none; }
@media (max-width: 900px) { .rvx-who-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- the roles: terms once, a filter, compact cards, detail in a dialog ---- */
.rvx-roles { background: #fff; scroll-margin-top: 70px; }
.rvx-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 24px; padding: 14px 18px; background: var(--shell); font-size: .9rem; color: var(--ink); }
.rvx-terms > span { margin-right: 16px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.rvx-terms b { font-weight: 600; }
.rvx-terms b + b::before { content: "\00b7"; margin: 0 12px; color: var(--blue-600); }
.rvx-terms b span { font: inherit; }
.rvx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.rvx-chip { all: unset; cursor: pointer; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; color: var(--ink); transition: background .2s, border-color .2s, color .2s; }
.rvx-chip b { margin-left: 4px; font-weight: 700; color: var(--blue-600); }
.rvx-chip:hover { border-color: var(--blue-600); }
.rvx-chip.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.rvx-chip.is-on b { color: var(--blue-200); }
.rvx-chip:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.rvx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.rvx-card {
  display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 28px);
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-600);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
}
.rvx-card:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(4, 45, 98, .45); }
.rvx-card[hidden] { display: none; }
.rvx-card.is-match { box-shadow: 0 0 0 3px var(--blue-400); }
.rvx-card-team { margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.rvx-card h3 { margin: 0 0 10px; font-size: 1.22rem; line-height: 1.3; }
.rvx-card h3 a { color: var(--ink); text-decoration: none; }
.rvx-card h3 a:hover { color: var(--accent-text); }
.rvx-card-sum { margin: 0 0 16px; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.rvx-tags { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
/* a line of skills with the starfish between, not boxed tags */
.rvx-tags li {
  font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text);
}
.rvx-tags li + li::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin: 0 9px 0 10px; vertical-align: -1px;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
.rvx-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.rvx-read { font-weight: 700; font-size: .9rem; color: var(--accent-text); text-decoration: none; }
.rvx-read span { display: inline-block; transition: transform .25s var(--ease); }
.rvx-read:hover span { transform: translateX(4px); }
.rvx-apply { padding: 8px 18px; background: var(--navy-900); color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; border-radius: 999px; transition: background .2s; }
.rvx-apply:hover { background: var(--blue-600); }
.rvx-none { margin: 0; padding: 20px; background: var(--shell); color: var(--muted); }
.rvx-closed { margin-top: clamp(36px, 4.4vw, 52px); }
.rvx-closed-h { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rvx-closed-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rvx-card.is-closed { border-top-color: var(--line); background: #fafcff; }
.rvx-card.is-closed .rvx-card-team, .rvx-card.is-closed h3 a, .rvx-card.is-closed .rvx-card-sum { color: var(--muted); }
.rvx-card-shut { font-size: .82rem; font-weight: 600; color: var(--muted); }
@media (max-width: 760px) { .rvx-grid { grid-template-columns: minmax(0, 1fr); } }

/* the role in its dialog */
.rvx-m { padding: clamp(28px, 4vw, 48px); color: var(--ink); }
.rvx-m-k { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.rvx-m-h { margin: 0 0 12px; padding-right: 40px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }
.rvx-m-sum { margin: 0 0 20px; font-size: 1.05rem; color: var(--muted); line-height: 1.6; }
.rvx-m-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 24px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.rvx-m-meta div { padding: 12px 14px 12px 0; }
.rvx-m-meta div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.rvx-m-meta dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rvx-m-meta dd { margin: 4px 0 0; font-weight: 600; }
.rvx-m h4 { margin: 22px 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.rvx-m p { margin: 0; color: var(--ink); line-height: 1.65; }
.rvx-m-list { margin: 0; padding-left: 1.1em; line-height: 1.7; }
.rvx-m-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.rvx-m-next { font-size: .88rem; color: var(--muted); }
.rvx-m-shut { color: var(--muted) !important; }
.modal-card:has(.rvx-m) { max-width: 760px; }
@media (max-width: 560px) { .rvx-m-meta { grid-template-columns: 1fr; } .rvx-m-meta div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ---- the close: the callout's message leads the final call to action ---- */
.rvx-close h2 { max-width: 30ch; text-wrap: balance; }
.rvx-close-lede { max-width: 62ch; margin: 0 auto 30px; color: rgba(255, 255, 255, .88); font-size: 1.06rem; line-height: 1.7; }

/* ============================================================
   DONATIONS & FUNDRAISING
   ============================================================ */

/* ---------- the donation form ---------- */

.section-donate { background: var(--shell); }
.dn-grid {
  display: grid; grid-template-columns: 1fr 420px;
  gap: clamp(30px, 4vw, 60px); align-items: start;
}
@media (max-width: 900px) { .dn-grid { grid-template-columns: 1fr; } }
.dn-copy p { color: var(--ink); line-height: 1.8; }
.dn-lead { font-size: 1.1rem; font-weight: 600; color: var(--accent-text) !important; }
.dn-assure { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; }
.dn-assure li {
  position: relative; padding-left: 28px; margin-bottom: .7em;
  color: var(--ink); font-size: .95rem; line-height: 1.6;
}
.dn-assure li::before {
  content: ""; position: absolute; left: 2px; top: .4em;
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.dn-form {
  background: var(--paper); border: 1px solid var(--blue-200);
  border-top: 4px solid var(--accent);
  padding: clamp(24px, 3vw, 34px);
  position: sticky; top: 104px;
}
@media (max-width: 900px) { .dn-form { position: static; } }

.dn-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 20px; }
.dn-freq {
  padding: 13px 12px; font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--accent-text); background: var(--paper);
  border: 1px solid var(--blue-200); cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.dn-freq + .dn-freq { border-left: 0; }
.dn-freq:hover { background: var(--shell); }
.dn-freq.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.dn-freq:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.dn-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dn-amounts[hidden] { display: none; }
.dn-amount {
  padding: 16px 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--blue-200); cursor: pointer; line-height: 1.1;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.dn-amount span { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.dn-amount:hover { border-color: var(--accent); transform: translateY(-2px); }
.dn-amount.is-on {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
  box-shadow: inset 0 0 0 1px var(--navy-800);
}
.dn-amount.is-on span { color: rgba(255, 255, 255, .78); }
.dn-amount:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dn-other { font-size: .95rem; }

.dn-custom { margin: 14px 0 0; }
.dn-custom[hidden] { display: none; }
.dn-custom label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}
.dn-custom-field {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--blue-200); padding: 0 14px; background: var(--paper);
}
.dn-custom-field > span { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.dn-custom-field input {
  flex: 1; border: 0; padding: 14px 0; font: inherit; font-size: 1.1rem; color: var(--ink);
  -moz-appearance: textfield; background: none;
}
.dn-custom-field input::-webkit-outer-spin-button,
.dn-custom-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dn-custom-field input:focus, .dn-custom-field input:focus-visible { outline: none; }
/* one highlight: the box's own edge, not a second ring around it */
.dn-custom-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.dn-summary {
  margin: 18px 0 0; padding: 14px 16px;
  background: var(--shell); color: var(--ink); font-size: .95rem; line-height: 1.5;
}
.dn-go { width: 100%; margin-top: 16px; }
.dn-go[disabled] { opacity: .45; cursor: default; }
.dn-go.is-pending { background: var(--grey-500); border-color: var(--grey-500); }
.dn-note { margin: 14px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.6; }

/* ---------- what support funds ---------- */

.section-supports { background: var(--paper); }
.dn-supports {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.4vw, 30px);
}
@media (max-width: 1000px) { .dn-supports { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .dn-supports { grid-template-columns: 1fr; } }
.dn-supports li { text-align: center; }
.dn-supports img {
  width: clamp(66px, 7vw, 84px); height: clamp(66px, 7vw, 84px);
  object-fit: contain; margin: 0 auto 14px; display: block;
  transition: transform .3s var(--ease);
}
.dn-supports li:hover img { transform: translateY(-6px) scale(1.04); }
.dn-supports h3 { margin: 0 0 .4em; font-size: 1.05rem; color: var(--ink); }
.dn-supports p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }

/* ---------- transparency ---------- */

.section-transparency {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.tr-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .tr-grid { grid-template-columns: 1fr; } }
.tr-copy p { color: #fff; opacity: .92; line-height: 1.8; }
.tr-evidence { opacity: 1 !important; }
.tr-panel {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24);
  padding: clamp(24px, 3vw, 32px);
}
.tr-panel h3 {
  margin: 0 0 16px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}
.tr-list { list-style: none; margin: 0 0 18px; padding: 0; }
.tr-list li {
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: .96rem;
}
.tr-pending { margin: 0; font-size: .86rem; color: #fff; opacity: .88; line-height: 1.6; }

/* ---------- monthly ---------- */

.section-monthly { background: var(--shell); }
.mo-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .mo-grid { grid-template-columns: 1fr; } }
.mo-grid p { color: var(--ink); line-height: 1.8; }
.mo-small { font-size: 1.05rem; font-weight: 600; color: var(--accent-text) !important; }
.mo-card {
  background: var(--paper); border: 1px solid var(--blue-200);
  border-top: 4px solid var(--accent); padding: clamp(24px, 3vw, 32px); text-align: center;
}
.mo-card h3 { margin: 0 0 .5em; font-size: 1.2rem; color: var(--ink); }
.mo-card p { margin: 0 0 1.4em; font-size: .94rem; color: var(--muted); }
.mo-card .btn { width: 100%; }

/* ---------- fundraising ---------- */

.section-fundraise { background: var(--paper); }
.fr-ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 24px);
}
@media (max-width: 1000px) { .fr-ways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fr-ways { grid-template-columns: 1fr; } }
.fr-way {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--paper); border: 1px solid var(--blue-200); border-top: 4px solid var(--blue-400);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fr-way:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(4, 45, 98, .13); }
.fr-way img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 14px; }
.fr-way h3 { margin: 0 0 .45em; font-size: 1.08rem; color: var(--ink); }
.fr-way p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--muted); }
.fr-work {
  max-width: 70ch; margin: clamp(26px, 3vw, 38px) auto 0; text-align: center;
  color: var(--muted); font-size: .96rem;
}

.section-frsteps { background: var(--shell); }
.section-pack { background: var(--paper); }
.pk-grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .pk-grid { grid-template-columns: 1fr; } }
.pk-copy p { color: var(--ink); line-height: 1.8; }
.pk-card {
  background: var(--shell); border: 1px solid var(--blue-200); padding: clamp(24px, 3vw, 32px);
}
.pk-card h3 {
  margin: 0 0 16px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.pk-list { list-style: none; margin: 0; padding: 0; }
.pk-list li {
  position: relative; padding-left: 26px; margin-bottom: .6em;
  color: var(--ink); font-size: .95rem; line-height: 1.55;
}
.pk-list li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- tiers ---------- */

.section-tiers {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.fr-tiers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .22);
}
@media (max-width: 1000px) { .fr-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fr-tiers { grid-template-columns: 1fr; } }
.fr-tier {
  padding: clamp(22px, 2.6vw, 30px) clamp(16px, 2vw, 22px);
  background: var(--navy-900);
}
.fr-tier-target {
  margin: 0 0 .4em; font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--blue-200); letter-spacing: -.02em;
}
.fr-tier h3 { margin: 0 0 .6em; font-size: 1rem; color: #fff; }
.fr-tier-earns { margin: 0; font-size: .88rem; line-height: 1.6; color: #fff; opacity: .85; }

/* ---------- fundraiser stories ---------- */

.section-stories { background: var(--paper); }
.fr-stories {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 900px) { .fr-stories { grid-template-columns: 1fr; } }
.fr-story { background: var(--shell); border: 1px solid var(--blue-200); padding: clamp(22px, 2.6vw, 30px); }
.fr-story img { display: block; width: 100%; height: auto; margin: -30px -30px 20px; width: calc(100% + 60px); }
.fr-story blockquote { margin: 0 0 1em; font-size: 1.02rem; line-height: 1.7; color: var(--ink); }
.fr-story-who { margin: 0; font-size: .92rem; color: var(--muted); }
.fr-story-raised {
  margin: .6em 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem; color: var(--accent-text);
}

/* ---------- wishlist ---------- */

.section-wishlist { background: var(--shell); }
.wl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 26px);
}
@media (max-width: 780px) { .wl-grid { grid-template-columns: 1fr; } }
.wl-item {
  background: var(--paper); border: 1px solid var(--blue-200);
  padding: clamp(22px, 2.6vw, 30px);
}
.wl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wl-head h3 { margin: 0; font-size: 1.08rem; color: var(--ink); }
.wl-need {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--accent-text); white-space: nowrap;
}
.wl-note { margin: .6em 0 1.2em; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.wl-bar { height: 8px; background: var(--shell); border: 1px solid var(--blue-200); }
.wl-bar span { display: block; height: 100%; background: var(--accent); }
.wl-progress {
  margin: .7em 0 0; font-size: .84rem; color: var(--muted);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em;
}
.wl-foot { margin: clamp(26px, 3vw, 38px) 0 0; text-align: center; }

/* ============================================================
   CSR & BUSINESS ENGAGEMENT (cb-)

   Below the Support-page opening: the five routes as a single row on a
   rule, the programmes in the Collaborations spotlight (ca-), the four-level
   ladder with Major Project Funding set apart, the evidence on navy, the
   ways to engage a team, and the enquiry. Every button that leads to the
   enquiry fills it in first (js/partners.js). Backgrounds run white, pale
   blue, white, navy, pale blue, photograph, white - never two alike.
   ============================================================ */

.cb-sec { scroll-margin-top: 70px; }

/* ---- the split section header: title left, intro right, a rule beneath ---- */
.cb-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px clamp(28px, 5vw, 80px); align-items: end;
  padding-bottom: 26px; border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.cb-sec .sv-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.cb-title {
  margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06;
  letter-spacing: -.025em; color: var(--ink); text-wrap: balance;
}
.cb-intro { margin: 0; max-width: 46ch; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 760px) { .cb-head { grid-template-columns: 1fr; align-items: start; } }

/* ---- routes: one row on the header's rule, hairlines between ---- */
.cb-routes-sec .cb-head { margin-bottom: 0; }
.cb-routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cb-route { position: relative; }
.cb-route + .cb-route { border-left: 1px solid var(--line); }
.cb-route a {
  display: flex; flex-direction: column; height: 100%;
  padding: 26px clamp(16px, 1.8vw, 26px) 4px; text-decoration: none; color: var(--ink);
}
.cb-route a::before {                      /* a bar that runs along the rule on hover */
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--blue-600);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.cb-route a:hover::before, .cb-route a:focus-visible::before { transform: scaleX(1); }
.cb-route-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.cb-route-top img { width: 48px; height: 48px; object-fit: contain; transition: transform .35s var(--ease); }
.cb-route a:hover .cb-route-top img { transform: translateY(-3px); }
.cb-route-n {
  font-family: "Segoe UI Light", "Segoe UI", system-ui, sans-serif; font-weight: 300;
  font-size: 1.9rem; line-height: 1; letter-spacing: -.03em; color: var(--blue-200);
  transition: color .3s;
}
.cb-route a:hover .cb-route-n { color: var(--blue-600); }
.cb-route h3 { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.cb-route p { margin: 0 0 18px; font-size: .93rem; line-height: 1.55; color: var(--muted); }
.cb-route-go {
  margin-top: auto; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text);
}
.cb-route-go span { display: inline-block; margin-left: 4px; transition: transform .25s var(--ease); }
.cb-route a:hover .cb-route-go span { transform: translateY(3px); }
@media (max-width: 1050px) {
  .cb-routes { grid-template-columns: 1fr; }
  .cb-route + .cb-route { border-left: 0; border-top: 1px solid var(--line); }
  .cb-route a { display: grid; grid-template-columns: 48px 1fr; gap: 0 20px; padding: 22px 0; }
  .cb-route-top { grid-row: span 3; margin: 0; }
  .cb-route-n { display: none; }
  .cb-route p { margin-bottom: 8px; }
}

/* ---- the work: the Collaborations spotlight with a photograph ---- */
.cb-work .ca-name { font-size: clamp(1.02rem, 1.4vw, 1.2rem); }
.cb-prog { grid-template-rows: auto 1fr; }
.cb-prog-fig { position: relative; margin: 0; aspect-ratio: 16 / 8; overflow: hidden; background: var(--navy-900); }
.cb-prog-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-fact {
  position: absolute; left: 0; bottom: 0; padding: 14px 22px 13px;
  background: var(--navy-900); color: #fff; max-width: 78%;
}
.cb-fact span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-200); }
.cb-fact strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.15; }
.cb-prog-h { margin: 0 0 10px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.cb-prog-d { margin: 0 0 20px; color: var(--muted); line-height: 1.65; }
.cb-funds-k { margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.cb-tags { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tags li { padding: 5px 10px; background: var(--shell); color: var(--ink); font-size: .84rem; line-height: 1.3; }
.cb-work .ca-foot { justify-content: space-between; }
.cb-work .ca-join { margin-top: 26px; }

/* ---- levels: four tiers, every row aligned across the cards ---- */
.cb-ladder {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(12px, 1.6vw, 20px); padding-top: 14px;
}
.cb-level {
  position: relative; grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: 26px clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 28px);
  background: #fff; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cb-level:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(4, 45, 98, .45); }
.cb-level.is-feature {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
  box-shadow: 0 30px 56px -30px rgba(4, 45, 98, .75);
}
/* the flag hangs across the card's top edge, so the rows below still line up */
.cb-flag {
  position: absolute; top: 0; left: clamp(20px, 2vw, 26px); transform: translateY(-50%); margin: 0;
  padding: 6px 12px; background: var(--blue-400); color: var(--navy-900);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
/* the level meter: four bars, as many filled as the level */
.cb-meter { display: flex; align-items: flex-end; gap: 3px; margin: 0 0 18px; height: 16px; }
.cb-meter i { width: 5px; background: var(--blue-100); }
.cb-meter i:nth-child(1) { height: 6px; } .cb-meter i:nth-child(2) { height: 9px; }
.cb-meter i:nth-child(3) { height: 12px; } .cb-meter i:nth-child(4) { height: 16px; }
.cb-meter i.on { background: var(--blue-600); }
.is-feature .cb-meter i { background: rgba(255, 255, 255, .2); }
.is-feature .cb-meter i.on { background: var(--blue-400); }
.cb-meter span { margin-left: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.is-feature .cb-meter span { color: var(--blue-200); }
.cb-range {
  margin: 0 0 4px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.1; letter-spacing: -.015em; color: var(--ink);
}
.cb-range small { display: block; margin-top: 4px; font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: 0; color: var(--muted); }
.is-feature .cb-range { color: #fff; }
.is-feature .cb-range small { color: var(--blue-200); }
.cb-level h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; color: var(--accent-text); }
.is-feature h3 { color: var(--blue-200); }
.cb-strap { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.is-feature .cb-strap { color: rgba(255, 255, 255, .82); }
.cb-inherits {
  margin: 0; padding: 14px 0 10px; border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-text);
}
.is-feature .cb-inherits { color: var(--blue-200); border-top-color: rgba(255, 255, 255, .2); }
.cb-benefits { list-style: none; margin: 0 0 24px; padding: 0; }
.cb-benefits li {
  position: relative; padding: 0 0 0 22px; margin-bottom: .6em;
  font-size: .88rem; line-height: 1.5; color: var(--ink);
}
.cb-benefits li::before {
  content: ""; position: absolute; left: 1px; top: .42em; width: 9px; height: 5px;
  border-left: 2px solid var(--blue-600); border-bottom: 2px solid var(--blue-600); transform: rotate(-45deg);
}
.is-feature .cb-benefits li { color: #fff; }
.is-feature .cb-benefits li::before { border-color: var(--blue-400); }
.cb-level .btn { align-self: end; width: 100%; text-align: center; white-space: nowrap; padding: .8em 1em; font-size: .9rem; }
.cb-swipe { display: none; }

.cb-major {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 18px clamp(24px, 4vw, 56px);
  align-items: center; margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 38px);
  background: var(--shell); border-left: 6px solid var(--navy-900);
}
.cb-major-k { margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); }
.cb-major h3 { margin: 4px 0 0; font-size: 1.1rem; color: var(--accent-text); }
.cb-major-b p { margin: 0 0 10px; color: var(--ink); line-height: 1.55; }
.cb-major-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-major-list li { position: relative; padding-left: 20px; font-size: .9rem; color: var(--muted); }
.cb-major-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--blue-600); }
@media (max-width: 1000px) { .cb-major { grid-template-columns: 1fr; } .cb-major .btn { justify-self: start; } }

/* phones and tablets: the ladder becomes a swipeable row */
@media (max-width: 960px) {
  .cb-ladder {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 80%);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 14px var(--gutter) 8px; scroll-padding: 0 var(--gutter);
  }
  .cb-ladder::-webkit-scrollbar { display: none; }
  .cb-level { scroll-snap-align: start; }
  .cb-level:hover { transform: none; }
  .cb-swipe { display: block; margin: 14px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
  .cb-swipe-hint { color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: none; }
}

/* ---- evidence: navy, the list on the ground ---- */
.cb-ev { background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 72%, #0f55a3); color: #fff; }
.cb-ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.cb-ev .sv-label { color: var(--blue-200); }
.cb-ev .sv-label::before { background: var(--blue-400); }
.cb-ev .cb-title { color: #fff; margin-bottom: 22px; }
.cb-ev-lede { color: rgba(255, 255, 255, .88); font-size: 1.08rem; line-height: 1.7; margin: 0 0 36px; }
.cb-plain { margin: 0; padding: 22px 0 0; border-top: 2px solid var(--blue-400); }
.cb-plain-k { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-400); }
.cb-plain p:last-child { margin: 0; font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; color: #fff; }
.cb-ev-h { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-200); }
.cb-ev-list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.cb-ev-list li {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.cb-ev-list span { color: #fff; line-height: 1.45; }
.cb-ev-list em {
  font-style: normal; white-space: nowrap; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-200); padding: 3px 8px; border: 1px solid rgba(140, 203, 250, .45);
}
.cb-sample { display: flex; gap: 16px; align-items: center; margin: 0; padding: 16px; border: 1px dashed rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .8); font-size: .9rem; line-height: 1.45; }
.cb-sample b { color: #fff; }
.cb-sample-doc { flex: 0 0 auto; width: 38px; height: 48px; background: #fff; position: relative; }
.cb-sample-doc::before { content: ""; position: absolute; left: 7px; right: 7px; top: 9px; height: 18px;
  background: repeating-linear-gradient(to bottom, var(--blue-200) 0 2px, transparent 2px 6px); }
.cb-sample-doc::after { content: ""; position: absolute; left: 7px; width: 14px; bottom: 8px; height: 8px; background: var(--blue-600); }
@media (max-width: 900px) { .cb-ev-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- engage: a photograph against the six ways in ---- */
.cb-engage { background: var(--shell); }
.cb-engage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 80px); align-items: stretch; }
.cb-engage-fig { position: relative; margin: 0 18px 18px 0; min-height: 420px; }
.cb-engage-fig::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--blue-200); }
.cb-engage-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cb-engage .cb-title { margin-bottom: 16px; }
.cb-engage-lede { margin: 0 0 30px; color: var(--muted); line-height: 1.65; max-width: 58ch; }
.cb-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); }
.cb-ways li {
  display: grid; grid-template-columns: 30px 1fr; gap: 2px 14px; padding: 16px 0;
  border-top: 1px solid rgba(4, 45, 98, .16);
}
.cb-ways svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--blue-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.cb-ways h3 { margin: 0; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.cb-ways p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.cb-ways p a { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.cb-ways p a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .cb-engage-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-engage-fig { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .cb-ways { grid-template-columns: 1fr; } }

/* ---- enquiry ---- */
.cb-eq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.cb-eq .cb-title { margin-bottom: 20px; }
.cb-eq-lede { font-size: 1.17rem; line-height: 1.6; color: var(--ink); margin: 0 0 16px; }
.cb-eq-copy > p { color: var(--muted); line-height: 1.7; }
.cb-next-h { margin: 34px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.cb-next { list-style: none; margin: 0; padding: 0; counter-reset: nx; }
.cb-next li {
  counter-increment: nx; display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.55; font-size: .95rem;
}
.cb-next li::before {
  content: counter(nx, decimal-leading-zero);
  font-family: "Segoe UI Light", "Segoe UI", system-ui, sans-serif; font-weight: 300;
  font-size: 1.7rem; line-height: 1; letter-spacing: -.03em; color: var(--blue-600);
}
.cb-next b { color: var(--ink); }

.cb-form {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy-900);
  padding: clamp(24px, 3vw, 36px); box-shadow: 0 34px 70px -40px rgba(4, 45, 98, .45);
  transition: box-shadow .5s var(--ease);
}
.cb-form.is-flash { box-shadow: 0 0 0 4px var(--blue-400), 0 34px 70px -40px rgba(4, 45, 98, .45); }
.cb-form-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.cb-form h3 { margin: 0; font-size: 1.3rem; color: var(--ink); }
.cb-prefill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px 4px 12px; background: var(--shell); font-size: .82rem; color: var(--muted); }
.cb-prefill b { color: var(--ink); }
.cb-prefill button { all: unset; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; font-size: 1.1rem; color: var(--accent-text); }
.cb-prefill button:hover { background: #fff; }
.cb-chips { border: 0; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cb-chips legend { width: 100%; margin: 0 0 10px; padding: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.cb-chips label { position: relative; cursor: pointer; }
.cb-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cb-chips span {
  display: inline-block; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; color: var(--ink); background: #fff; transition: background .2s, border-color .2s, color .2s;
}
.cb-chips label:hover span { border-color: var(--blue-600); }
.cb-chips input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.cb-chips input:focus-visible + span { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.cb-form .fld { margin-bottom: 16px; }
.cb-form textarea { resize: vertical; }
.cb-form-foot { margin: 12px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .cb-eq-grid { grid-template-columns: minmax(0, 1fr); } }

/* the enquiry's form rows and status line */
.eq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(14px, 2vw, 20px); }
@media (max-width: 620px) { .eq-row { grid-template-columns: 1fr; } }
.eq-send { width: 100%; margin-top: 6px; }
.eq-status { margin: 14px 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.eq-status:empty { display: none; }
.eq-status.is-warn { color: var(--error); font-weight: 600; }
.eq-status.is-done { color: var(--accent-text); font-weight: 600; }
.cb-chips.is-warn span { border-color: var(--error); }
/* sent: the form gives way to a thank-you */
.cb-sent { text-align: center; padding: clamp(24px, 4vw, 48px) 8px; }
.cb-sent-mark {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 1.5rem;
}
.cb-sent h3 { margin: 0 0 10px; font-size: 1.4rem; }
.cb-sent p { margin: 0 auto; max-width: 40ch; color: var(--muted); line-height: 1.6; }

/* ============================================================
   COLLABORATIONS
   ============================================================ */

/* ---------- a group of partners ---------- */

/* Alternation is set by the builder rather than by counting sibling sections,
   which counted the jump list too and put two tinted bands together. */
.section-collab { background: var(--paper); }
.section-collab { scroll-margin-top: 90px; }
.section-collab .section-head { margin-bottom: clamp(28px, 3.4vw, 42px); }



/* ---------- listing platforms, deliberately quieter ---------- */

.section-platforms { background: var(--paper); }
.section-platforms .section-intro { max-width: 72ch; }
/* No boxes: each platform's mark stands free with its name beneath, the
   columns separated only by a hairline. Hovering lifts the mark and brings
   the "Read reviews" line forward. */
.pl-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
}
.pl-list > li + li { border-left: 1px solid var(--line); }
.pl-item {
  display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%;
  padding: 8px clamp(12px, 2vw, 28px) 6px; text-align: center; text-decoration: none; color: var(--ink);
}
.pl-mark {
  display: grid; place-items: center; height: 76px; width: 100%; max-width: 170px;
  transition: transform .3s var(--ease);
}
.pl-mark img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
/* until a logo arrives: the initials, set large and light */
.pl-mono {
  width: 76px; border: 1px solid var(--blue-200);
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em;
  color: var(--accent-text);
}
.pl-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.pl-rating { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.pl-rating b { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--ink); }
.pl-star { color: var(--blue-600); font-size: 1.25rem; line-height: 1; }
.pl-count { font-size: .82rem; color: var(--muted); }
a.pl-item:hover .pl-mark, a.pl-item:focus-visible .pl-mark { transform: translateY(-4px); }
a.pl-item:hover .pl-name { color: var(--accent-text); }
@media (max-width: 700px) {
  .pl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .pl-list > li:nth-child(odd) { border-left: 0; }
}

/* ============================================================
   SUPPORT LANDING PAGE
   ============================================================ */

.section-ways { background: var(--paper); }

/* ---------- Four ways in, on navy ----------

   White on white against the opening above it, so this band takes the navy
   instead. The route rows invert with it rather than staying white: the same
   relationship as before, with the values turned over. A drop shadow lifts
   them off the ground, since a shadow on navy has to be near black to
   register at all - a tinted one only looks like haze. */

.section-ways-dark {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600));
  color: #fff;
}
.section-ways-dark .sp-route {
  background: rgba(255, 255, 255, .05);
  border: 0; border-left: 4px solid var(--blue-400);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .26),
    0 20px 44px -12px rgba(0, 0, 0, .52);
}
.section-ways-dark .sp-route:hover {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .3),
    0 30px 60px -14px rgba(0, 0, 0, .6);
}
.section-ways-dark .sp-route-mark {
  background: rgba(255, 255, 255, .07);
  border-right-color: rgba(255, 255, 255, .18);
}
@media (max-width: 720px) {
  .section-ways-dark .sp-route-mark { border-bottom-color: rgba(255, 255, 255, .18); }
}
.section-ways-dark .sp-route-who { color: var(--blue-200); }
.section-ways-dark .sp-route-body h3 { color: #fff; }
.section-ways-dark .sp-route-text { color: rgba(255, 255, 255, .88); }
.section-ways-dark .sp-route-points li { color: rgba(255, 255, 255, .8); }
.section-ways-dark .sp-route-points li::before {
  border-left-color: var(--blue-400); border-bottom-color: var(--blue-400);
}
.section-ways-dark .btn-outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .6); }
.section-ways-dark .btn-outline:hover { --btn-bg: #fff; --btn-fg: var(--navy-900); --btn-bd: #fff; }

.sp-routes { display: grid; gap: clamp(18px, 2.4vw, 26px); }

/* Wide rows rather than a grid of four: each route needs room to say who it is
   for before it says what it is, and a row reads in that order. */
.sp-route {
  display: grid; grid-template-columns: 150px 1fr; align-items: stretch;
  background: var(--paper); border: 1px solid var(--blue-200);
  border-left: 4px solid var(--accent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sp-route:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(4, 45, 98, .14); }
@media (max-width: 720px) { .sp-route { grid-template-columns: 1fr; } }

.sp-route-mark {
  display: grid; place-items: center; padding: clamp(20px, 2.4vw, 30px);
  background: var(--shell); border-right: 1px solid var(--line);
}
@media (max-width: 720px) {
  .sp-route-mark { border-right: 0; border-bottom: 1px solid var(--line); }
}
.sp-route-mark img {
  width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px); object-fit: contain;
  transition: transform .3s var(--ease);
}
.sp-route:hover .sp-route-mark img { transform: translateY(-5px) scale(1.04); }

.sp-route-body { padding: clamp(22px, 2.8vw, 34px); }
/* who it is for comes first: the reader is looking for themselves, not for us */
.sp-route-who {
  margin: 0 0 .5em; font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
}
.sp-route-body h3 {
  margin: 0 0 .5em; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink);
}
.sp-route-text { margin: 0 0 1.2em; color: var(--ink); line-height: 1.75; max-width: 74ch; }

.sp-route-points {
  list-style: none; margin: 0 0 1.5em; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px clamp(16px, 2vw, 26px);
}
@media (max-width: 980px) { .sp-route-points { grid-template-columns: 1fr; } }
.sp-route-points li {
  position: relative; padding-left: 24px;
  font-size: .9rem; line-height: 1.5; color: var(--muted);
}
.sp-route-points li::before {
  content: ""; position: absolute; left: 1px; top: .4em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- why it matters ---------- */

.section-spwhy { background: var(--shell); }
.sp-why-grid {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 900px) { .sp-why-grid { grid-template-columns: 1fr; } }
.sp-why-copy p { color: var(--ink); line-height: 1.8; }
.sp-why-card {
  background: var(--paper); border: 1px solid var(--blue-200);
  border-top: 4px solid var(--accent); padding: clamp(24px, 3vw, 32px);
}
.sp-why-card h3 {
  margin: 0 0 16px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.sp-why-list { list-style: none; margin: 0 0 22px; padding: 0; }
.sp-why-list li {
  position: relative; padding: 0 0 .8em 26px; margin-bottom: .8em;
  border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: .95rem; line-height: 1.55;
}
.sp-why-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sp-why-list li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.sp-why-card .btn { width: 100%; text-align: center; }

/* ============================================================
   CONTACT
   ============================================================ */

/* ---------- the message ---------- */

.section-message { background: var(--shell); }
.ct-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 4vw, 60px); align-items: start;
}
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }
.ct-copy p { color: var(--ink); line-height: 1.8; }
/* the one line that is a way to reach us rather than an instruction */
.ct-direct { font-size: 1.05rem; }
.ct-direct a { font-weight: 700; color: var(--accent-text); }

.ct-form {
  background: var(--paper); border: 1px solid var(--blue-200); border-top: 4px solid var(--accent);
  padding: clamp(24px, 3vw, 36px);
}
.ct-form h3 {
  margin: 0 0 20px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(14px, 2vw, 20px); }
@media (max-width: 620px) { .ct-row { grid-template-columns: 1fr; } }
.ct-form .fld { margin: 0 0 16px; }
.ct-form textarea { resize: vertical; }

/* the quiet nudge towards a better-suited form */
.ct-hint {
  margin: -4px 0 16px; padding: 12px 14px;
  background: var(--shell); border-left: 3px solid var(--accent);
  font-size: .9rem; line-height: 1.6; color: var(--ink);
}
.ct-hint[hidden] { display: none; }
.ct-hint a { font-weight: 700; }

.ct-send { width: 100%; margin-top: 6px; }
.ct-status { margin: 14px 0 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.ct-status.is-warn { color: var(--error); font-weight: 600; }
.ct-status.is-done { color: var(--accent-text); font-weight: 600; }

/* ---------- check the FAQs first ---------- */

/* One strip rather than a row of cards: there is only one thing being asked
   here, and three cards implied three equal options. */
.ct-check {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 26px);
  margin: 0 0 clamp(30px, 3.6vw, 46px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
  background: var(--paper); border-left: 4px solid var(--accent);
}
.ct-check img { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.ct-check p { margin: 0; font-size: .98rem; line-height: 1.65; color: var(--ink); }
.ct-check p strong { color: var(--accent-text); }
.ct-check .btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .ct-check { flex-direction: column; align-items: flex-start; }
}

/* ---------- Support pages: the spread opening (sv-) ----------

   Collaborations first; built to carry over to the other Support pages.
   The words sit on a strict column and the photograph runs off the right
   edge of the screen. Its foot sits on the boundary with a pale band below,
   and a navy record tab hangs across the two. The band keeps the same grid
   lines: what partners can expect under the words, the page contents under
   the photograph. */

.sv-spread { position: relative; z-index: 1; padding-top: clamp(64px, 8vw, 112px); }
.sv-grid {
  --sv-text: 500px; --sv-gap: clamp(40px, 5.5vw, 88px);
  display: grid;
  grid-template-columns:
    [bleed-l] minmax(var(--gutter), 1fr)
    [text] minmax(0, var(--sv-text))
    [gap] var(--sv-gap)
    [photo] minmax(0, calc(var(--wrap) - 2 * var(--gutter) - var(--sv-text) - var(--sv-gap)))
    [edge] minmax(var(--gutter), 1fr) [bleed-r];
}
.sv-copy { grid-column: text; align-self: center; padding: 8px 0 clamp(64px, 7vw, 104px); }
.sv-label {
  display: flex; align-items: center; gap: 12px; min-height: 1.6em; margin: 0 0 18px;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; line-height: 1.2; color: var(--accent-text);
}
.sv-copy .sv-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.sv-title {
  font-size: clamp(2rem, 3.5vw, 2.95rem); line-height: 1.08; letter-spacing: -.025em;
  margin: 0 0 .55em; text-wrap: balance;
}
.sv-copy p { color: var(--muted); }
.sv-copy .sv-lede { font-size: 1.17rem; line-height: 1.62; color: var(--ink); }

.sv-fig { grid-column: photo / bleed-r; position: relative; margin: 0; min-height: 540px; }
.sv-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.sv-tab {
  position: absolute; left: 0; bottom: -44px;
  display: grid; grid-template-columns: repeat(3, auto);
  background: var(--navy-900); color: #fff;
  box-shadow: 0 24px 50px -24px rgba(4, 45, 98, .6);
}
.sv-tab > div { padding: 20px clamp(18px, 2.2vw, 30px) 18px; border-left: 1px solid rgba(255, 255, 255, .16); }
.sv-tab > div:first-child { border-left: 0; }
.sv-tab strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1; font-variant-numeric: lining-nums;
}
.sv-tab span { display: block; margin-top: 8px; font-size: .8rem; line-height: 1.35; color: var(--blue-200); }
.sv-tab > .sv-tab-cap {
  grid-column: 1 / -1; padding: 10px clamp(18px, 2.2vw, 30px) 12px;
  border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .76rem; letter-spacing: .06em; color: var(--blue-100);
}

.sv-band { background: var(--shell); padding: clamp(108px, 10vw, 140px) 0 clamp(64px, 8vw, 108px); scroll-margin-top: 60px; }
.sv-band-l { grid-column: text; }
.sv-band-r { grid-column: photo; display: flex; flex-direction: column; }

.sv-terms { list-style: none; margin: 0; padding: 0; counter-reset: sv; }
.sv-terms li {
  counter-increment: sv; display: grid; grid-template-columns: clamp(64px, 7vw, 92px) 1fr;
  gap: 4px 18px; padding: 24px 0; border-top: 1px solid rgba(4, 45, 98, .16);
}
.sv-terms li:last-child { border-bottom: 1px solid rgba(4, 45, 98, .16); }
.sv-terms li::before {
  content: counter(sv, decimal-leading-zero); grid-row: span 2;
  font-family: "Segoe UI Light", "Segoe UI", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: .9; letter-spacing: -.04em;
  color: var(--blue-600); font-variant-numeric: lining-nums;
}
.sv-terms h3 { margin: 0 0 4px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.sv-terms p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }

.sv-index { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid rgba(4, 45, 98, .16); }
.sv-index a {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid rgba(4, 45, 98, .16);
  text-decoration: none; color: var(--ink); font-weight: 600;
  transition: color .2s, padding .25s;
}
.sv-index b { font-family: var(--font-display); color: var(--blue-600); font-variant-numeric: tabular-nums; }
.sv-index a:hover, .sv-index a:focus-visible { color: var(--accent-text); padding-left: 6px; }

.sv-ask { margin-top: auto; padding: 20px 24px 22px; background: #fff; border-top: 3px solid var(--navy-900); }
.sv-ask-h { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.sv-ask p:not(.sv-ask-h) { margin: 0 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.sv-ask .btn { padding: .7em 1.5em; font-size: .95rem; }

@media (max-width: 900px) {
  .sv-grid { grid-template-columns: [bleed-l] var(--gutter) [text] 1fr [edge] var(--gutter) [bleed-r]; }
  .sv-copy { padding-bottom: 0; }
  .sv-fig {
    grid-column: bleed-l / bleed-r; min-height: 0; margin-top: 40px;
    display: flex; flex-direction: column; background: var(--shell);
  }
  .sv-fig > img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .sv-tab { position: relative; z-index: 2; left: auto; bottom: auto; margin: -44px var(--gutter) -48px; }
  .sv-band { padding-top: clamp(88px, 14vw, 112px); }
  .sv-band .sv-grid { row-gap: clamp(44px, 8vw, 64px); }
  .sv-band-l, .sv-band-r { grid-column: text; }
}
@media (max-width: 520px) {
  .sv-tab { grid-template-columns: 1fr 1fr; }
  .sv-tab > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
}
.sv-ask-links { list-style: none; margin: 0; padding: 0; }
.sv-ask-links a {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--line); text-decoration: none; font-weight: 600; color: var(--accent-text);
}
.sv-ask-links a:hover, .sv-ask-links a:focus-visible { color: var(--ink); }
/* a live figure (data-scheme) inside the number keeps the number's size */
.sv-tab strong span { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
/* the three evidence links sit on one line where there is room */
.sv-ask-links { display: flex; flex-wrap: wrap; gap: 4px 22px; border-top: 1px solid var(--line); padding-top: 10px; }
.sv-ask-links a { border-top: 0; padding: 4px 0; justify-content: flex-start; gap: 6px; }

/* ---------- Donations: the spread with the two routes (svd-) ----------

   The same spread as the other Support pages, but here the page's job is a
   choice, so Donate and Fundraise become two large cards laid across the
   line between the white spread and a navy band - Donate under the words,
   Fundraise under the photograph. The band is navy rather than pale blue
   because the donate section below it is already pale blue. */

.svd { --lift: clamp(118px, 10vw, 136px); }
.svd .sv-copy { align-self: start; padding-bottom: calc(var(--lift) + clamp(48px, 5vw, 64px)); }
.svd .sv-fig { min-height: 0; }
.svd .sv-fig > img { object-position: 50% 55%; }

.svd-band {
  --lift: clamp(118px, 10vw, 136px);
  display: flow-root;              /* keeps the cards' negative margin inside the band */
  background: var(--navy-900); padding-top: 0;
}
.svd-band .sv-label { color: var(--blue-200); }
.svd-band .sv-terms li { border-color: rgba(255, 255, 255, .18); }
.svd-band .sv-terms li::before { color: var(--blue-400); }
.svd-band .sv-terms h3 { color: #fff; }
.svd-band .sv-terms p { color: rgba(255, 255, 255, .8); }
.svd-band .sv-index { border-color: rgba(255, 255, 255, .18); }
.svd-band .sv-index a { color: #fff; border-color: rgba(255, 255, 255, .18); }
.svd-band .sv-index a:hover, .svd-band .sv-index a:focus-visible { color: var(--blue-200); }

.svd-cards { position: relative; z-index: 2; margin-top: calc(-1 * var(--lift)); align-items: stretch; }
.svd-give { grid-column: text; }
.svd-raise { grid-column: photo; }
.svd-card {
  display: flex; flex-direction: column; gap: 10px; min-height: calc(var(--lift) * 2);
  padding: clamp(24px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px) clamp(22px, 2.4vw, 30px);
  text-decoration: none; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
  transition: transform .25s, box-shadow .25s;
}
.svd-card:hover, .svd-card:focus-visible { transform: translateY(-4px); box-shadow: 0 36px 70px -28px rgba(0, 0, 0, .6); }
.svd-k { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.svd-card strong { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.svd-d { font-size: .98rem; line-height: 1.6; max-width: 48ch; }
.svd-go { margin-top: auto; padding-top: 6px; font-weight: 700; }
.svd-go span { display: inline-block; transition: transform .2s; }
.svd-card:hover .svd-go span, .svd-card:focus-visible .svd-go span { transform: translateX(6px); }
.svd-give { background: var(--blue-600); color: #fff; }
.svd-give .svd-d { color: rgba(255, 255, 255, .9); }
.svd-raise { background: var(--blue-400); color: var(--navy-900); }
.svd-body { margin-top: clamp(64px, 7vw, 92px); }

@media (max-width: 900px) {
  .svd .sv-copy { padding-bottom: 0; }
  .svd-band { --lift: 44px; }
  .svd-band .svd-cards { row-gap: 14px; }
  .svd-give, .svd-raise { grid-column: text; min-height: 0; }
  .svd-body { margin-top: clamp(56px, 10vw, 72px); }
}

/* ---------- Donations: leave a legacy (lg-) ----------

   The quietest section on the page, on purpose: white, generous, one
   photograph, and a timeline that carries the argument - 2019, today, and
   the years a legacy pays for. The practical half is set out like a
   solicitor would want it: three kinds of gift, three steps, and the exact
   details for the will in a panel that can be copied in one go. */

.section-legacy { background: var(--paper); }

.lg-head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.lg-copy .lg-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.lg-title {
  margin: 0 0 .55em; font-size: clamp(2.1rem, 3.8vw, 3.1rem); line-height: 1.06;
  letter-spacing: -.025em; text-wrap: balance;
}
.lg-copy p { color: var(--muted); max-width: 56ch; }
.lg-copy .lg-lede { font-size: 1.17rem; line-height: 1.62; color: var(--ink); }

/* the photograph sits inside a fine offset frame - drawn behind it, never
   touching the words */
.lg-photo { position: relative; margin: 0 18px 18px 0; }
.lg-photo::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: 0;
  border: 1px solid var(--blue-200);
}
.lg-photo img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%;
}

/* ---- the timeline ----
   Each stop draws the stretch of line that leaves it: solid from 2019 to
   today, dashed from today on, and fading out after the last - the part not
   yet paid for. */
.lg-line {
  --dot: 14px; --gap: clamp(20px, 3vw, 40px);
  list-style: none; margin: clamp(64px, 7vw, 96px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
.lg-stop { position: relative; padding-top: calc(var(--dot) + 20px); }
.lg-stop::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box;
  width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--navy-900);
}
.lg-stop::after {
  content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); left: var(--dot);
  width: calc(100% + var(--gap) - var(--dot)); height: 2px; background: var(--navy-900);
}
.lg-stop:nth-child(2)::after,
.lg-stop-next::after {
  background: repeating-linear-gradient(90deg, var(--blue-400) 0 8px, transparent 8px 16px);
}
.lg-stop-next::after {
  width: calc(100% - var(--dot));
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent);
  mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.lg-stop-next::before { background: var(--paper); border: 2px solid var(--blue-400); }
.lg-when {
  display: block; font-family: var(--font-display); font-weight: 700; line-height: 1.1;
  font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); letter-spacing: -.02em;
}
.lg-stop-next .lg-when { color: var(--blue-600); }
.lg-what { display: block; margin-top: 8px; color: var(--muted); font-size: .98rem; line-height: 1.55; max-width: 30ch; }

/* ---- three kinds of gift ---- */
.lg-kinds { margin-top: clamp(72px, 8vw, 104px); }
.lg-kinds ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px);
}
.lg-kinds li { padding-top: 20px; border-top: 2px solid var(--navy-900); display: flex; flex-direction: column; }
.lg-kinds h4 { margin: 0 0 8px; font-size: 1.22rem; line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.lg-kinds p { margin: 0 0 14px; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.lg-term {
  margin-top: auto; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-600);
}

/* ---- how to, and the details for the will ---- */
.lg-how {
  margin-top: clamp(72px, 8vw, 104px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.lg-steps .sv-terms { margin-bottom: 28px; }
.lg-steps .sv-terms h4 { margin: 0 0 4px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }

.lg-details {
  background: var(--shell); border-top: 3px solid var(--navy-900);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
}
.lg-details h3 { margin: 0 0 16px; font-size: 1.25rem; color: var(--ink); }
.lg-details dl { margin: 0 0 20px; }
.lg-details dl > div {
  display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid rgba(4, 45, 98, .14);
}
.lg-details dl > div:last-child { border-bottom: 1px solid rgba(4, 45, 98, .14); }
.lg-details dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.lg-details dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.45; }
.lg-details dd .co-flag { margin: 6px 0 0; display: table; background: #fff; }
.lg-copied { margin-left: 12px; font-size: .88rem; font-weight: 600; color: var(--accent-text); }
.lg-tax { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(4, 45, 98, .14); }
.lg-tax-k {
  margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text);
}
.lg-tax p:not(.lg-tax-k) { margin: 0 0 .7em; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.lg-tax p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .lg-head, .lg-how { grid-template-columns: 1fr; }
  .lg-photo { max-width: 620px; }
  .lg-kinds ul { grid-template-columns: 1fr; }
  /* the timeline turns to run down the page */
  .lg-line { grid-template-columns: 1fr; --gap: 30px; padding-left: 34px; }
  .lg-stop { padding-top: 0; }
  .lg-stop::before { left: -34px; top: 5px; }
  .lg-stop::after {
    left: calc(-34px + var(--dot) / 2 - 1px); top: calc(5px + var(--dot));
    width: 2px; height: calc(100% + var(--gap) - var(--dot));
  }
  .lg-stop:nth-child(2)::after, .lg-stop-next::after {
    background: repeating-linear-gradient(180deg, var(--blue-400) 0 8px, transparent 8px 16px);
  }
  .lg-stop-next::after {
    height: 64px;
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent);
    mask-image: linear-gradient(180deg, #000 20%, transparent);
  }
}
@media (max-width: 480px) {
  .lg-details dl > div { grid-template-columns: 1fr; }
}

/* ---------- About: how SORCE is structured ----------
   Two organisations working as one, set out plainly for anyone doing due
   diligence. The legal detail lives in the terms and conditions. */
.story-entities { margin: clamp(48px, 6vw, 72px) 0 0; padding-top: 22px; border-top: 2px solid var(--navy-900); }
.story-entities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.story-entity { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.story-entities-grid p:not(.story-entity) { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
@media (max-width: 700px) { .story-entities-grid { grid-template-columns: 1fr; } }

/* ---------- Collaborations: partner groups as a spotlight ----------

   Each group has a numbered header, an index of partners on the left and one
   large panel on the right: the logo on white, then what we do together as
   the headline. Hover, click or arrow keys switch panels (js/collab.js); on
   phones every panel shows, stacked. The same system runs on white, pale blue
   and navy - only the colour tokens below change. Partners with "more" in the
   data get an "In depth" label and a dialog (the generic .modal-source in
   main.js). Written by build-collaborators.py. */
/* ---- shared: tones ---- */
.cx{
  --fg:var(--ink); --mut:var(--muted); --rule:rgba(4,45,98,.14); --acc:var(--blue-600);
  --lab:var(--accent-text); --tint:rgba(4,45,98,.04); --tile-bd:var(--blue-200);
  --flag-bg:var(--shell); --flag-fg:var(--muted);
  background:#fff; color:var(--fg);
}
.cx.t-shell{ background:var(--shell); --rule:rgba(4,45,98,.16); --tint:rgba(255,255,255,.55); --tile-bd:transparent; --flag-bg:#fff; }
.cx.t-navy{
  background:var(--navy-900); --fg:#fff; --mut:rgba(255,255,255,.78); --rule:rgba(255,255,255,.18);
  --acc:var(--blue-400); --lab:var(--blue-200); --tint:rgba(255,255,255,.06); --tile-bd:transparent;
  --flag-bg:rgba(255,255,255,.12); --flag-fg:var(--blue-100);
}

/* ---- shared: the section header ---- */
.cx-head{margin:0 0 clamp(40px,5vw,64px)}
.cx-label{display:flex;align-items:baseline;gap:10px;margin:0 0 16px;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lab)}
.cx-n{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.01em;color:var(--acc);line-height:1}
.cx-of{letter-spacing:.06em;color:var(--mut);margin-right:10px}
.cx-head-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:26px;border-bottom:2px solid var(--fg)}
.t-navy .cx-head-grid{border-bottom-color:rgba(255,255,255,.9)}
.cx-title{margin:0;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.06;letter-spacing:-.025em;color:var(--fg);text-wrap:balance}
.cx-intro p{margin:0;color:var(--mut);font-size:1rem;line-height:1.6}
@media (max-width:760px){.cx-head-grid{grid-template-columns:1fr;gap:14px;align-items:start}}
.cx-intro .cx-count{margin-top:12px;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lab)}
.cx-count b{font-family:var(--font-display);font-size:1.1rem;letter-spacing:0;color:var(--fg);margin-right:4px}

.cx-flag{display:inline-block;padding:3px 8px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--flag-bg);color:var(--flag-fg)}
.cx-since{display:inline-block;margin-right:10px;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
/* a partner with no artwork yet: the name, set in the display face, on white */
.cx-plate-text{font-family:var(--font-display);font-weight:700;color:var(--accent-text);text-align:center;line-height:1.25}

/* ---- A. spotlight ---- */
.ca{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:stretch}
.ca-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ca-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:52px 1fr 24px;align-items:center;gap:10px;width:100%;
  padding:18px 14px 18px 0;border-bottom:1px solid var(--rule);position:relative;transition:padding .3s var(--ease),background .3s}
.ca-tab::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--acc);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.ca-thumb{display:grid;place-items:center;width:44px;height:44px;margin-left:8px;background:#fff;border:1px solid var(--tile-bd);overflow:hidden;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--accent-text);transition:box-shadow .3s}
.ca-thumb img{max-width:80%;max-height:80%;object-fit:contain}
/* Collaborations only: larger logo boxes, each logo centred whatever its proportions */
.section-collab .ca-thumb{display:flex;align-items:center;justify-content:center;flex:none;width:58px;height:58px;padding:0;box-sizing:border-box}
.section-collab .ca-tab{grid-template-columns:70px 1fr 24px;gap:14px}
.section-collab .ca-thumb img{display:block;width:auto;height:auto;max-width:42px;max-height:42px;object-fit:contain}
.ca-tab[aria-selected="true"] .ca-thumb{box-shadow:0 0 0 2px var(--acc)}
.ca-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25;color:var(--mut);transition:color .3s}
.ca-arrow{color:var(--acc);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.ca-tab:hover .ca-name,.ca-tab:focus-visible .ca-name{color:var(--fg)}
.ca-tab[aria-selected="true"]{background:var(--tint);padding-left:6px}
.ca-tab[aria-selected="true"]::before{transform:scaleY(1)}
.ca-tab[aria-selected="true"] .ca-name{color:var(--fg)}

.ca-tab[aria-selected="true"] .ca-arrow{opacity:1;transform:none}
.ca-tab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ca-join{display:flex;gap:14px;align-items:center;margin-top:22px;padding:16px 18px;border:1px dashed var(--acc);color:var(--mut);text-decoration:none;font-size:.93rem;line-height:1.45;transition:background .25s,border-color .25s}
.ca-join b{color:var(--fg)}
.ca-join:hover{background:var(--tint);border-style:solid}
.ca-join-plus{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--acc);color:var(--acc);font-size:1.3rem;line-height:1}
.ca-stage{position:relative;display:grid}
.ca-panel{grid-area:1/1;display:grid;grid-template-rows:auto 1fr;background:#fff;color:var(--ink);box-shadow:0 30px 60px -34px rgba(4,45,98,.5);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.t-white .ca-panel{outline:1px solid var(--blue-200)}
.ca-panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ca-logo{display:grid;place-items:center;min-height:clamp(170px,17vw,230px);padding:28px;border-bottom:1px solid var(--blue-100);background:#fff;font-size:clamp(1.5rem,2.4vw,2.1rem)}
.ca-logo img{max-width:62%;max-height:140px;object-fit:contain}
.ca-body{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.ca-k{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600)}
.ca-what{margin:0 0 24px;font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--ink);text-wrap:pretty}
.ca-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:18px;border-top:1px solid rgba(4,45,98,.12)}
.ca-h{margin:0;font-size:.95rem;color:var(--ink);margin-right:auto}
.ca-panel .cx-flag{background:var(--shell);color:var(--muted)}
.ca-visit,.ca-more{font-weight:700;font-size:.9rem;color:var(--accent-text);text-decoration:none}
.ca-more{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--navy-900);color:#fff;transition:background .2s}
.ca-more:hover{background:var(--blue-600)}
.ca-deep{display:inline-block;margin-left:10px;padding:2px 7px;vertical-align:middle;font-family:var(--font-sans);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--acc);color:var(--acc)}

/* the in-depth dialog */
.cxm{color:var(--ink);padding:clamp(26px,4vw,48px) clamp(22px,4vw,48px) clamp(26px,3.6vw,44px)}
.cxm-head{padding-right:48px}
.cxm-head{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;padding-bottom:22px;border-bottom:2px solid var(--navy-900)}
.cxm-logo{display:grid;place-items:center;height:120px;padding:12px;background:#fff;border:1px solid var(--blue-200);font-size:1rem}
.cxm-logo img{max-width:100%;max-height:90px;object-fit:contain}
.cxm-k{margin:0 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600)}
.cxm-h{margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15}
.cxm-what{margin:0;font-size:1.02rem;color:var(--muted);line-height:1.55}
.cxm-facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.cxm-facts div{padding:18px 16px 16px 0}
.cxm-facts div+div{padding-left:18px;border-left:1px solid var(--line)}
.cxm-facts strong{display:block;font-family:var(--font-display);font-size:1.6rem;line-height:1.1;color:var(--ink)}
.cxm-facts span{display:block;margin-top:4px;font-size:.82rem;color:var(--muted)}
.cxm-photo{margin:24px 0 0}
.cxm-photo img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.cxm-photo figcaption{margin-top:8px;font-size:.8rem;color:var(--muted)}
.cxm-body{margin-top:22px}
.cxm-body p{color:var(--muted);line-height:1.7}
.cxm-list{margin-top:8px;padding:20px 22px;background:var(--shell)}
.cxm-list ul{margin:0;padding:0 0 0 1.1em;color:var(--ink)}
.cxm-list li{margin:.3em 0}
@media (max-width:560px){.cxm-head{grid-template-columns:1fr}.cxm-logo{width:120px}.cxm-facts{grid-template-columns:1fr}.cxm-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:860px){
  .ca{grid-template-columns:1fr}
  .ca-list{display:none}
  .ca-stage{gap:16px}
  .ca-panel{grid-area:auto;opacity:1;visibility:visible;transform:none}
  .ca-logo{min-height:130px}
  .ca-side{order:2}
}

.cx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-new{display:inline-block;margin-right:10px;padding:3px 8px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--navy-900);color:#fff}

/* The panel keeps its own height rather than stretching to the list, and
   rides alongside it as the list scrolls past - so a group of twelve partners
   gets a long list, never a long empty card. Groups of more than six also
   get tighter rows. */
@media (min-width: 861px) {
  .ca { align-items: start; }
  .ca-stage { position: sticky; top: 100px; }
  .ca.is-long .ca-tab { padding-top: 11px; padding-bottom: 11px; }
  .ca.is-long .ca-thumb { width: 36px; height: 36px; font-size: .74rem; }
  .ca.is-long .ca-name { font-size: 1.02rem; }
  .section-collab .ca.is-long .ca-thumb { width: 58px; height: 58px; }
}

/* ---------- Collaborations: a line of thanks under a group ---------- */
.cx-thanks { margin-top: clamp(40px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--rule); max-width: 820px; }
.cx-thanks-k { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lab); }
.cx-thanks-text { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.45; color: var(--fg); }
.cx-thanks-past { margin: 0; font-size: .95rem; color: var(--mut); }
.cx-thanks-past span:first-child { margin-right: 6px; }

/* module lists: the syllabus topic, then its subtopics in small type */
.mod-list li { margin-bottom: .85em; }
.mod-t { display: block; color: var(--ink); font-weight: 600; }
.mod-subs { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.mod-bonus { list-style: none; padding-left: 0; }


/* ---------- Marine Science A-Level: study online ----------
   The self-study route: the case on the left, the fee and terms in a card
   on the right. Pale blue, between the white requirements and the photo. */
.section-online { background: var(--shell); }
.on-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5.5vw, 88px); align-items: start; }
.on-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.on-title { margin: 0 0 .55em; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.on-copy p { color: var(--muted); }
.on-copy .on-lede { font-size: 1.15rem; line-height: 1.62; color: var(--ink); }
.on-next { margin-top: 1.4em; padding-top: 1.1em; border-top: 1px solid rgba(4, 45, 98, .16); }
.on-card { background: #fff; border-top: 3px solid var(--navy-900); padding: clamp(24px, 3vw, 36px); box-shadow: 0 24px 50px -30px rgba(4, 45, 98, .45); }
.on-card-k { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.on-price { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.on-price strong { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1; color: var(--ink); }
.on-price span { color: var(--muted); }
.on-price-note { margin: 8px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.on-card h3 { margin: 20px 0 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.on-list { margin: 0; }
.on-list li { padding-left: 30px; margin-bottom: .45em; font-size: .96rem; }
.on-list li::before {
  width: 17px; height: 17px; top: .15em; left: 0; border: 0; transform: none;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
.on-not { margin: 18px 0 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
@media (max-width: 900px) { .on-grid { grid-template-columns: 1fr; } }

.on-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(40px, 5vw, 60px); }
.on-not { margin-bottom: 0; }

/* links inside the light-on-navy reasons list */
.section-skills .tick-list a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-400); }
.section-skills .tick-list a:hover { color: var(--blue-200); }

/* the refresher's small label, naming the PADI programme */
.dc-refresher-k {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600);
}
.dc-refresher-k::before { content: ""; width: 22px; height: 2px; background: var(--blue-600); }
.dc-refresher .dc-refresher-k + h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.2; letter-spacing: -.01em; margin-bottom: .55em; }

/* Small phones: the Reef Check column is allowed to shrink below its widest
   word, and a long "Ask about..." button wraps rather than pushing the page
   sideways. */
@media (max-width: 980px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } }
.rc-copy { min-width: 0; }
.dc-ask .btn { white-space: normal; text-align: center; max-width: 100%; }

/* Small phones (320-400px): long button labels wrap instead of holding their
   line, and grid items may shrink below their widest word - the two causes of
   the page scrolling sideways at this width. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  main [class*="grid"] > *, main [class*="-list"] > *, main [class*="ways"] > * { min-width: 0; }
}

/* Dive courses: what every course fee covers - quiet, centred fine print
   closing the PADI section, framed by two short rules, the line that applies
   to everyone set under a faint dotted divider. */
.dc-terms { max-width: 760px; margin: clamp(28px, 3.5vw, 40px) auto 0; text-align: center; scroll-margin-top: 110px; }
.dc-terms::before, .dc-terms::after {
  content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 12px; background: var(--blue-200);
}
.dc-terms::after { margin: 12px auto 0; }
.dc-terms p { margin: 0; font-size: .82rem; line-height: 1.7; color: var(--muted); }
.dc-terms strong { font-weight: 600; color: var(--ink); }
.dc-terms-all { display: table; margin: 6px auto 0 !important; padding-top: 6px; border-top: 1px dotted var(--blue-200); }
.dc-terms-ref { margin: clamp(28px, 3.5vw, 40px) 0 0; text-align: center; font-size: .86rem; color: var(--muted); }
.dc-terms-ref a { color: var(--accent-text); font-weight: 600; }
.section.section-padi { padding-bottom: clamp(36px, 4.5vw, 56px); }

/* ---------- expedition pages: what we ask of you (rq-) ----------
   The requirements as a checklist rather than a boxed list: the heading on
   the left, and on the right one row per requirement - the starfish, a short
   key in small capitals, then the detail - between hairlines, the way the
   at-a-glance tables read. */
.rq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.rq .rq-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.rq-title { margin: 0 0 14px; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.rq-intro { margin: 0 0 18px; color: var(--muted); line-height: 1.6; max-width: 34ch; }
.rq-ask { font-weight: 700; font-size: .92rem; color: var(--accent-text); text-decoration: none; }
.rq-ask span { display: inline-block; transition: transform .2s var(--ease); }
.rq-ask:hover span { transform: translateX(4px); }
.rq-list { margin: 0; border-top: 2px solid var(--ink); }
.rq-list > div {
  display: grid; grid-template-columns: 20px 92px minmax(0, 1fr); gap: 0 14px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.rq-list > div::before {
  content: ""; width: 19px; height: 19px; align-self: start; margin-top: 1px;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
.rq-list dt { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.rq-list dd { margin: 0; color: var(--ink); line-height: 1.55; }
.rq-link { display: inline-block; margin-left: 6px; font-size: .86rem; font-weight: 700; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.rq-link:hover { text-decoration: underline; }
@media (max-width: 860px) { .rq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) {
  .rq-list > div { grid-template-columns: 20px minmax(0, 1fr); }
  .rq-list dd { grid-column: 2; margin-top: 4px; }
}
.section-prereq.rq-sec { padding: clamp(56px, 7vw, 96px) 0; }
/* What follows the checklist on some pages - the route in for divers not yet
   qualified, and how to apply - sits on the same two columns: its heading
   under "What we ask of you", its content under the requirement rows. */
.rq-sec .prereq-path, .rq-sec .apply-steps {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 14px clamp(32px, 6vw, 96px); align-items: start;
  max-width: none; margin: clamp(48px, 6vw, 72px) 0 0; padding-top: clamp(36px, 4.5vw, 52px);
  border-top: 1px solid var(--line);
}
.rq-sec .prereq-path > h3, .rq-sec .apply-steps > h3 {
  grid-column: 1; grid-row: 1 / span 9; margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em;
  text-transform: none; color: var(--ink); max-width: 16ch;
}
.rq-sec .prereq-path > :not(h3), .rq-sec .apply-steps > :not(h3) { grid-column: 2; margin: 0; }
.rq-sec .prereq-path .cmp-scroll { margin-top: 8px; }
.rq-sec .prereq-path-note { margin-top: 6px !important; }
/* the application steps as numbered rows, the numbers light and large */
.rq-sec .apply-steps ol { list-style: none; padding: 0; counter-reset: ap; border-top: 2px solid var(--ink); }
.rq-sec .apply-steps li {
  counter-increment: ap; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: baseline;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.55;
}
.rq-sec .apply-steps li::before {
  content: counter(ap, decimal-leading-zero);
  font-family: "Segoe UI Light", "Segoe UI", system-ui, sans-serif; font-weight: 300;
  font-size: 1.6rem; line-height: 1; letter-spacing: -.03em; color: var(--blue-600);
}
@media (max-width: 860px) {
  .rq-sec .prereq-path, .rq-sec .apply-steps { grid-template-columns: minmax(0, 1fr); }
  .rq-sec .prereq-path > *, .rq-sec .apply-steps > * { grid-column: 1 !important; grid-row: auto !important; }
}
.prereq-path { scroll-margin-top: 100px; }
/* the training table needs the full width: heading and intro side by side
   above it, the table and its note across both columns */
.rq-sec .prereq-path > h3 { grid-row: 1; }
.rq-sec .prereq-path > .cmp-scroll, .rq-sec .prereq-path > .prereq-path-note { grid-column: 1 / -1; }
.rq-sec .prereq-path > .cmp-scroll { margin-top: 18px; }
.rq-sec .prereq-path > .prereq-path-note { max-width: 90ch; color: var(--muted); }



/* Scientific Field Placement: how to apply, as a joined-up path of three
   numbered steps under the checklist, with the way into the booking form. */
.apC { margin-top: clamp(56px, 7vw, 88px); text-align: center; }
.apC-k { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 30px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.apC-k::before, .apC-k::after { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.apC ol { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: c; position: relative; }
.apC ol::before { content: ""; position: absolute; top: 22px; left: 16.66%; right: 16.66%; height: 2px; background: var(--blue-200); }
.apC li { counter-increment: c; position: relative; padding: 0 16px; }
.apC li::before { content: counter(c); display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-600); color: var(--blue-600); font-family: var(--font-display); font-size: 1.15rem; position: relative; }
.apC b { display: block; color: var(--ink); }
.apC span { display: block; margin-top: 4px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.apC span a { color: var(--accent-text); }
.apC-go { margin: 30px 0 0; }
@media (max-width: 760px) { .apC ol { grid-template-columns: 1fr; gap: 22px; } .apC ol::before { display: none; } }

/* the requirements heading's paragraph: what they are, and where there is a way round */
.rq-intro { max-width: 40ch; margin-bottom: 20px; }
.fee-for { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }

/* The requirements, introduced softly: a line with a curved arrow pointing
   at the list (across on desktop, down on phones), then a separate line on
   the way round for anyone not there yet. */
.rq-intro { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 14px; color: var(--ink); font-weight: 600; }
.rq-arrow { flex: 0 0 auto; width: 26px; height: 26px; margin-bottom: 2px; fill: none; stroke: var(--blue-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rq-more { margin: 0 0 20px; color: var(--muted); line-height: 1.6; max-width: 40ch; }
@media (max-width: 860px) { .rq-arrow { transform: rotate(90deg); } }
.rq-intro { display: block; max-width: none; }
.rq-arrow { display: inline-block; vertical-align: -6px; margin: 0 0 0 6px; }
.rq-nowrap { white-space: nowrap; }
/* the curved arrow is an image now: drawn pointing up and to the right, at
   the list across from it; on phones, turned to point down at the list below */
.rq-arrow { width: 28px; height: auto; stroke: none; vertical-align: -3px; margin-left: 8px; }
@media (max-width: 860px) { .rq-arrow { transform: rotate(90deg); vertical-align: -8px; } }
/* Desktop: the arrow leaves the words and sweeps up across the gap to the
   first requirement - larger, flipped so the curve rises, and tilted to aim
   at the list. Phones keep it small beside the words, pointing down. */
/* On desktop js/main.js lays the arrow across the gap: its tail just past
   the end of "join us", its head at the first requirement. Until then (or
   without the script) it sits small beside the words. */
.rq { position: relative; }
.rq-arrow.is-placed {
  position: absolute; margin: 0; max-width: none; pointer-events: none;
  transform-origin: 2.6% 91.5%;
}

/* The opening card on About, Expeditions, Impact and Support: the full page
   width, and less room above it. Instead of narrowing the card to stay clear
   of the reef in the corners, the section keeps just enough room beneath it. */
.section-lead.section-reef { padding-top: clamp(36px, 4vw, 56px); padding-bottom: min(calc(15.5vw + 18px), 216px); }
/* Past about 1400px the card stops widening while the reef keeps growing
   outwards, so its tall parts move away from the card's corners and less
   room is needed: the gap steps down to match. */
@media (min-width: 1400px) { .section-lead.section-reef { padding-bottom: 200px; } }
@media (min-width: 1500px) { .section-lead.section-reef { padding-bottom: 170px; } }
@media (min-width: 1600px) { .section-lead.section-reef { padding-bottom: 154px; } }
@media (min-width: 1800px) { .section-lead.section-reef { padding-bottom: 146px; } }
@media (min-width: 2000px) { .section-lead.section-reef { padding-bottom: 137px; } }
@media (min-width: 2120px) { .section-lead.section-reef { padding-bottom: 114px; } }
@media (min-width: 2260px) { .section-lead.section-reef { padding-bottom: 94px; } }
/* The reef itself larger here, and balanced: both halves drawn at 31% of
   the page width, so each reaches the same distance in from its edge (the
   right-hand piece is the wider image, so it is drawn at a slightly smaller
   scale than the left). Each is anchored to its own page edge, so it grows
   outwards from the corners and the empty centre stays empty. The padding above was worked out from the
   artwork's actual outline: at every width from 360px to 2560px, the ink
   inside the card's span (plus 28px either side) stays at least 28px below
   the card. Keep the two in step if either changes. */
.section-lead.section-reef::after {
  background-size: 31% auto, 31% auto;
}
.section-lead.section-reef > .wrap { max-width: var(--wrap); }

/* Conservation Divemaster: the note under the training table, as centred
   fine print between two short rules - the same treatment as the fees note
   on the dive courses page. */
.rq-sec .prereq-path > .prereq-path-note {
  justify-self: center; max-width: 820px; margin-top: 22px !important;
  text-align: center; font-size: .86rem; line-height: 1.7; color: var(--muted);
}
.rq-sec .prereq-path > .prereq-path-note::before,
.rq-sec .prereq-path > .prereq-path-note::after {
  content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 12px; background: var(--blue-200);
}
.rq-sec .prereq-path > .prereq-path-note::after { margin: 12px auto 0; }

/* ============================================================
   EXPEDITIONS: A WEEK AT SORCE (wk-)
   Seven days as one calendar strip - a white panel with hairlines between
   the days - each with its kind of day, an icon, what it is for and how
   much diving it holds. Below, one dive day laid out as a timeline. The
   day it currently is in Lombok is marked by js/main.js.
   ============================================================ */
.section-week { background: var(--shell); scroll-margin-top: 70px; }
.wk-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px clamp(28px, 5vw, 80px); align-items: end;
  padding-bottom: 24px; border-bottom: 2px solid var(--ink); margin-bottom: clamp(32px, 4vw, 48px);
}
.wk-head .sv-label::before, .wk-dayplan .sv-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.wk-title { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.wk-intro { margin: 0; max-width: 44ch; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 760px) { .wk-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* the week */
.wk-days {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: #fff; box-shadow: 0 30px 60px -38px rgba(4, 45, 98, .45);
}
.wk-day {
  position: relative; display: flex; flex-direction: column;
  padding: 22px clamp(12px, 1.3vw, 18px) 20px; border-left: 1px solid var(--line);
  transition: background .25s;
}
.wk-day:first-child { border-left: 0; }
.wk-day:hover { background: #f6fbff; }
.wk-name { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.wk-name abbr {
  text-decoration: none; font-family: "Segoe UI Light", "Segoe UI", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.wk-name span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wk-tag {
  align-self: flex-start; margin: 0 0 16px; padding: 3px 9px;
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue-600); color: #fff;
}
.is-dry .wk-tag { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--line); }
.is-fun .wk-tag { background: var(--blue-400); color: var(--navy-900); }
.wk-day img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 12px; }
.wk-day h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.wk-day > p:not(.wk-name):not(.wk-tag):not(.wk-dives) { margin: 0 0 16px; font-size: .86rem; line-height: 1.5; color: var(--muted); }
/* a day with more than one activity lists them */
.wk-acts { list-style: none; margin: 0 0 14px; padding: 0; }
.wk-acts li { position: relative; padding: 3px 0 3px 12px; font-size: .84rem; line-height: 1.4; color: var(--muted); }
.wk-acts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--blue-400); }
.wk-day.is-today .wk-acts li { color: rgba(255,255,255,.8); }
.wk-acts b { display: block; font-size: .86rem; color: var(--ink); }
.wk-acts span { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.wk-day.is-today .wk-acts b { color: #fff; }
.wk-day.is-today .wk-acts span { color: rgba(255,255,255,.75); }
/* what the evening holds */
.wk-eve { margin: 0 0 12px; font-size: .8rem; line-height: 1.45; color: var(--ink); }
.wk-eve span { display: block; margin-bottom: 2px; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-600); }
.wk-day.is-today .wk-eve { color: #fff; }
.wk-day.is-today .wk-eve span { color: var(--blue-200); }
/* the nights a night dive is most often offered */
.wk-night { margin: 0 0 10px; font-size: .74rem; font-weight: 600; color: var(--accent-text); }
.wk-night span { color: var(--blue-600); }
.wk-day.is-today .wk-night { color: var(--blue-200); }
.wk-day.is-today .wk-night span { color: var(--blue-400); }
/* how much diving: three small marks, filled, half or empty */
.wk-dives { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 4px; }
.wk-dives i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--blue-200); }
.wk-dives i.on { background: var(--blue-600); border-color: var(--blue-600); }
.wk-dives i.maybe { border-color: var(--blue-600); background: linear-gradient(90deg, var(--blue-600) 50%, transparent 50%); }
.wk-dives i.wk-opt { border-color: var(--blue-200); background: var(--blue-100); }
.wk-dives span { margin-left: 6px; font-size: .74rem; font-weight: 600; color: var(--accent-text); }
/* today, in Lombok */
.wk-day.is-today { background: var(--navy-900); }
.wk-day.is-today .wk-name abbr, .wk-day.is-today h3 { color: #fff; }
.wk-day.is-today > p:not(.wk-name):not(.wk-tag):not(.wk-dives) { color: rgba(255, 255, 255, .78); }
.wk-day.is-today .wk-dives { border-top-color: rgba(255, 255, 255, .2); }
.wk-day.is-today .wk-dives span { color: var(--blue-200); }
.wk-day.is-today .wk-dives i { border-color: rgba(255, 255, 255, .4); }
.wk-day.is-today .wk-dives i.on { background: var(--blue-400); border-color: var(--blue-400); }
.wk-day.is-today .wk-dives i.maybe { border-color: var(--blue-400); background: linear-gradient(90deg, var(--blue-400) 50%, transparent 50%); }
.wk-day.is-today img { filter: brightness(0) invert(1); opacity: .9; }
.wk-today {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); margin: 0; white-space: nowrap;
  padding: 4px 10px; background: var(--blue-400); color: var(--navy-900);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* one dive day, as a timeline */
.wk-dayplan {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(28px, 4vw, 56px);
  align-items: start; margin-top: clamp(40px, 5vw, 60px);
}
.wk-dayplan-t { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.wk-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.wk-line::before { content: ""; position: absolute; left: 6px; right: calc(100% / 6 - 6px); top: 30px; height: 2px; background: var(--blue-200); }
.wk-line li { position: relative; padding: 0 12px 0 0; }
.wk-line time { display: block; margin-bottom: 14px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--accent-text); }
.wk-line li::before { content: ""; position: absolute; left: 0; top: 25px; width: 12px; height: 12px; border-radius: 50%; background: var(--shell); border: 2px solid var(--blue-600); }
.wk-line b { display: block; margin-top: 18px; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.wk-line span { display: block; margin-top: 4px; color: var(--muted); font-size: .84rem; line-height: 1.45; }

/* around the edges of the day, and the programmes that differ */
.wk-edges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(36px, 4.5vw, 52px); }
.wk-edges > div { padding-top: 16px; border-top: 2px solid var(--ink); }
.wk-edges-k { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.wk-edges p:not(.wk-edges-k) { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.wk-edges b { color: var(--ink); }
@media (max-width: 900px) { .wk-edges { grid-template-columns: minmax(0, 1fr); } }
.wk-fine { max-width: 760px; margin: clamp(36px, 4.5vw, 52px) auto 0; text-align: center; font-size: .86rem; line-height: 1.7; color: var(--muted); }
.wk-fine::before, .wk-fine::after { content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 12px; background: var(--blue-200); }
.wk-fine::after { margin: 12px auto 0; }

/* tablets: the week in two rows of four (Sunday closing the second); phones: one list */
@media (max-width: 1100px) {
  .wk-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wk-day:nth-child(5) { border-left: 0; }
  .wk-day:nth-child(n+5) { border-top: 1px solid var(--line); }
  .wk-dayplan { grid-template-columns: minmax(0, 1fr); }
  .wk-line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .wk-line::before { display: none; }
}
@media (max-width: 640px) {
  .wk-days { grid-template-columns: minmax(0, 1fr); }
  .wk-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; border-left: 0; border-top: 1px solid var(--line); padding: 18px 16px; }
  .wk-day:first-child { border-top: 0; }
  .wk-day > * { grid-column: 2; }
  .wk-name { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; }
  .wk-day img { display: none; }
  .wk-tag { justify-self: start; margin-bottom: 10px; }
  .wk-dives { margin-top: 4px; }
  .wk-today { left: auto; right: 12px; transform: translateY(-50%); }
  .wk-line { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .wk-line li { display: grid; grid-template-columns: 70px minmax(0, 1fr); padding: 0 0 14px 22px; border-left: 2px solid var(--blue-200); margin-left: 5px; }
  .wk-line li::before { left: -7px; top: 3px; }
  .wk-line time { margin: 0; grid-row: span 2; }
  .wk-line b { margin: 0; }
}

/* the evening and the diving sit at the foot of every day, so they line up
   across the week however long the list above them is */
.wk-acts { margin-bottom: auto !important; padding-bottom: 14px; }
.wk-dives { margin-top: 0; }
@media (max-width: 640px) { .wk-acts { margin-bottom: 0 !important; } }
.wk-edges p:not(.wk-edges-k) + p { margin-top: 10px !important; }

/* ============================================================
   CONSERVATION DIVEMASTER: THE INTAKES (ik-)
   The year drawn as a line with each cohort's eight weeks across it, a
   choice of where your diving is now, and one card per upcoming cohort with
   its real dates - start, the day to arrive for any training first, and
   the earliest finish - and a way to book that intake. js/main.js does the
   dates; without it the four month cards still show.
   ============================================================ */
.ik-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px clamp(28px, 5vw, 80px); align-items: end;
  padding-bottom: 24px; border-bottom: 2px solid var(--ink); margin-bottom: clamp(30px, 3.6vw, 44px);
}
.ik-head .sv-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.ik-title { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); }
.ik-title span { font: inherit; }
.ik-intro { margin: 0; max-width: 44ch; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 760px) { .ik-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* the year */
.ik-year { margin: 0 0 clamp(28px, 3.4vw, 40px); }
.ik-months { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.ik-months li span { display: block; margin-top: 2px; font-size: .62rem; letter-spacing: .08em; color: var(--blue-600); }
.ik-months li.is-new-year { border-left: 2px solid var(--ink); }
.ik-months li { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 6px; border-left: 1px solid var(--line); }
.ik-track { position: relative; height: 34px; background: var(--shell); overflow: visible; clip-path: inset(-6px 0 -30px 0); }
.ik-bar {
  position: absolute; top: 7px; height: 20px; background: var(--blue-600);
  display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.ik-bar.is-next { background: var(--navy-900); }
.ik-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--blue-400); }
.ik-today::before { content: "Today"; position: absolute; top: calc(100% + 4px); left: -2px;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); }
.ik-year { margin-bottom: clamp(40px, 4.4vw, 52px); }
@media (max-width: 640px) { .ik-year { display: none; } }

/* where your diving is now */
.ik-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.ik-level-k { margin: 0 8px 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.ik-chip { all: unset; cursor: pointer; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; color: var(--ink); transition: background .2s, border-color .2s, color .2s; }
.ik-chip:hover { border-color: var(--blue-600); }
.ik-chip.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.ik-chip:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* the cohorts */
.ik-cards.intake-grid { max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); background: none; border: 0; }
.ik-cards .intake {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: clamp(20px, 2.2vw, 26px); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue-600);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ik-cards .intake:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(4, 45, 98, .45); }
.ik-cards .intake.is-next { background: var(--navy-900); border-color: var(--navy-900); }
.ik-flag { position: absolute; top: 0; left: clamp(20px, 2.2vw, 26px); transform: translateY(-50%); margin: 0;
  padding: 4px 10px; background: var(--blue-400); color: var(--navy-900); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ik-cards .intake-month { margin: 0; font-family: "Segoe UI Light", "Segoe UI", system-ui, sans-serif; font-weight: 300; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.ik-year-n { margin: 4px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--blue-600); }
.ik-in { margin: 12px 0 16px !important; font-size: .9rem !important; font-weight: 600; color: var(--ink) !important; }
.ik-rows { margin: 0 0 18px; border-top: 1px solid var(--line); }
.ik-rows div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ik-rows dt { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.ik-rows dd { margin: 0; font-size: .86rem; font-weight: 600; color: var(--ink); text-align: right; }
.ik-rows .is-early dd { color: var(--accent-text); }
.ik-book { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--accent-text); text-decoration: none; }
.ik-book span { display: inline-block; transition: transform .25s var(--ease); }
.ik-book:hover span { transform: translateX(4px); }
.is-next .intake-month, .is-next .ik-in, .is-next .ik-rows dd { color: #fff !important; }
.is-next .ik-year-n { color: var(--blue-200); }
.is-next .ik-rows, .is-next .ik-rows div { border-color: rgba(255, 255, 255, .18); }
.is-next .ik-rows dt { color: var(--blue-200); }
.is-next .ik-rows .is-early dd { color: var(--blue-200) !important; }
.is-next .ik-book { color: #fff; }
@media (max-width: 980px) { .ik-cards.intake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }
@media (max-width: 520px) { .ik-cards.intake-grid { grid-template-columns: minmax(0, 1fr); } }

.ik-fine { max-width: 760px; margin: clamp(34px, 4vw, 48px) auto 0; text-align: center; font-size: .9rem; line-height: 1.7; color: var(--muted); }
.ik-fine::before, .ik-fine::after { content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 12px; background: var(--blue-200); }
.ik-fine::after { margin: 12px auto 0; }

/* ============================================================
   EXPEDITIONS: IS IT RIGHT FOR ME (rfx-)
   Built by build-right-for.py from data/right-for.json. The short
   phrases are the CSR page's tab list (.ca, js/collab.js); the rest of
   the chosen point fades in on the right as text, with a blue rule and
   no box. On phones there is no hover, so every point shows under its
   phrase and the stage is not used.
   ============================================================ */
.rfx-head { padding-bottom: 24px; border-bottom: 2px solid var(--ink); margin-bottom: clamp(30px, 3.6vw, 44px); }
.rfx-head .sv-label::before { content: ""; width: 28px; height: 2px; background: var(--blue-600); }
.rfx-title { margin: 0; max-width: 18ch; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.rfx-ca { align-items: center; }
.rfx-stage { position: relative; display: grid; align-self: stretch; }
.rfx-panel {
  grid-area: 1 / 1; align-self: center; padding-left: clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--blue-600);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility 0s .25s, transform .25s;
}
.rfx-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.rfx-text { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.rfx-mob { display: none; }
@media (max-width: 860px) {
  .rfx-ca { grid-template-columns: minmax(0, 1fr); }
  .rfx-stage { display: none; }
  .rfx-mob { display: block; margin: 0; padding: 0 0 18px 70px; color: var(--muted); font-size: .94rem; line-height: 1.6; }
  .rfx .ca-tab { cursor: default; padding-bottom: 8px; }
  .rfx .ca-tab[aria-selected="true"] { background: none; padding-left: 0; }
  .rfx .ca-tab[aria-selected="true"]::before, .rfx .ca-arrow { display: none; }
  .rfx .ca-tab .ca-name { color: var(--ink); }
  .rfx .ca-tab[aria-selected="true"] .ca-thumb { box-shadow: none; }
  .rfx .ca-list { display: block; }
  .rfx .ca-tab { border-bottom: 0; }
  .rfx .ca-list li { border-bottom: 1px solid var(--rule); }
  .rfx .ca-side { order: 0; }
}
@media (max-width: 400px) { .rfx-mob { padding-left: 0; } }

/* Dive courses intro: the mosaic takes the height of the copy beside it,
   never more, so the card is no taller than its words. contain: size stops
   the photographs' own heights from pushing the row down. */
@media (min-width: 901px) {
  .intro-mosaic { aspect-ratio: auto; align-self: stretch; height: auto; min-height: 380px; contain: size; }
}

/* ============================================================
   HOME: WHY SORCE (wx-, wb-)
   Four photo panels; the chosen one opens to its story and its proof.
   They move on every 7 seconds while on screen, until the visitor
   touches them (js/main.js). Phones: stacked, all open. The awards
   strip beneath carries the evidence without any interaction.
   ============================================================ */
.wx-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px clamp(28px,5vw,80px);align-items:end;padding-bottom:24px;border-bottom:2px solid rgba(255,255,255,.85);margin-bottom:clamp(32px,4vw,48px)}
.wx-label{color:var(--blue-200)!important}.wx-label::before{content:"";width:28px;height:2px;background:var(--blue-400)}
.wx-title{margin:0;color:#fff;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.wx-intro{margin:0;max-width:40ch;color:rgba(255,255,255,.78);font-size:1.02rem;line-height:1.6}
@media(max-width:760px){.wx-head{grid-template-columns:1fr}}
.wx h3{color:#fff}
/* B */
.wb{display:flex;gap:12px;height:clamp(480px,44vw,600px)}
.wb-p{position:relative;flex:1;min-width:0;overflow:hidden;cursor:pointer;outline:none;transition:flex .7s var(--ease);box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.wb-p.is-on{flex:3.4;cursor:default}
.wb-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,45,98,.25),rgba(4,45,98,.88));transition:background .6s}
.wb-p.is-on::after{background:linear-gradient(180deg,rgba(4,45,98,0) 30%,rgba(4,45,98,.6) 60%,rgba(4,45,98,.96))}
.wb-p:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px}
.wb-side{position:absolute;z-index:1;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#fff;transition:opacity .3s}
.wb-side b{display:inline-block;margin-bottom:14px;font-family:"Segoe UI Light","Segoe UI",system-ui,sans-serif;font-weight:300;color:var(--blue-400)}
.wb-p.is-on .wb-side{opacity:0}
.wb-body{position:absolute;z-index:1;left:0;bottom:0;width:min(560px,100%);padding:clamp(26px,3vw,40px);opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s}
.wb-p.is-on .wb-body{opacity:1;transform:none;transition:opacity .5s .35s,transform .5s .35s var(--ease)}
.wb-n{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--blue-400)}
.wb-body h3{margin:0 0 12px;font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.wb-body p:not(.wb-n){margin:0 0 18px;color:rgba(255,255,255,.86);line-height:1.6}
.wb-link{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-200);text-decoration:none}
.wb-link:hover{color:#fff}
@media(max-width:860px){.wb{flex-direction:column;height:auto}.wb-p,.wb-p.is-on{flex:none;min-height:340px}.wb-side{display:none}.wb-body{opacity:1;transform:none}.wb-p::after{background:linear-gradient(180deg,rgba(4,45,98,0) 20%,rgba(4,45,98,.95))}}
/* B+ */
.wb-proof{display:inline-block;margin:0 0 18px!important;padding:8px 13px;background:rgba(255,255,255,.12);border-left:3px solid var(--blue-400);font-size:.86rem!important;font-weight:600;color:#fff!important;line-height:1.45!important}
.wb-proof b{color:var(--blue-400);font-size:1.05rem}
.wb-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0 20px;padding:0;border-top:2px solid rgba(255,255,255,.3)}
.wb-steps li{position:relative;padding:14px 10px 0 0;font-size:.86rem;font-weight:600;line-height:1.3;color:#fff}
.wb-steps li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--blue-400)}
.wb-bar{position:absolute;z-index:2;left:0;bottom:0;height:3px;width:0;background:var(--blue-400)}
.wb.is-auto .wb-p.is-on .wb-bar{animation:wbfill 7s linear forwards}
@keyframes wbfill{to{width:100%}}
.wb-rec{display:flex;align-items:center;gap:clamp(18px,3vw,36px);margin-top:14px;padding:20px clamp(22px,2.4vw,32px);background:#fff}
.wb-badges{display:flex;gap:14px;flex:0 0 auto}.wb-badges img{height:64px;width:auto}
.wb-rec p{margin:0;color:var(--muted);line-height:1.6}.wb-rec b{color:var(--ink)}
@media(max-width:560px){.wb-rec{flex-direction:column;align-items:flex-start}.wb-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}}
.wb-proof{display:table}
.wb-link{display:inline-block}
.wb-p.is-on::after{background:linear-gradient(180deg,rgba(4,45,98,.05) 10%,rgba(4,45,98,.7) 50%,rgba(4,45,98,.97))}
/* phones and tablets: each panel grows with its words, the photo
   showing above them and fading into navy behind them */
@media (max-width: 860px) {
  .wb-p, .wb-p.is-on { min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(170px, 42vw, 280px); }
  .wb-body { position: relative; width: 100%; }
  .wb-p::after, .wb-p.is-on::after { background: linear-gradient(180deg, rgba(4,45,98,0) 0, rgba(4,45,98,.35) clamp(110px, 28vw, 200px), rgba(4,45,98,.94) clamp(220px, 52vw, 340px), rgba(4,45,98,.97)); }
  .wb-bar { display: none; }
}
@media (max-width: 400px) { .wb-steps li { font-size: .8rem; } .wb-body { padding: 22px 18px; } }
/* the heading runs the full width of the section, the line beneath it */
.wx-head { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.wx-title { max-width: none; font-size: clamp(2.1rem, 4.3vw, 3.85rem); text-wrap: initial; }
@media (min-width: 1100px) { .wx-title { white-space: nowrap; } }
.wx-intro { max-width: 60ch; }
/* the awards on the navy itself: a quiet frosted band, not a white box */
.wb-rec { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.wb-rec p { color: rgba(255, 255, 255, .78); }
.wb-rec b { color: #fff; }
.wx-intro { max-width: none; }
@media (min-width: 900px) { .wx-intro { white-space: nowrap; } }
/* Why SORCE heading: centred, like the rest of the home page - warm and open
   rather than editorial */
.wx-head { text-align: center; border-bottom: 0; padding-bottom: 0; justify-items: center; }
.wx-label { justify-content: center; font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: .16em !important; color: #fff !important; }
.wx-label::before { display: none; }
.wx-title { font-size: clamp(1.9rem, 4.2vw, 3rem); }

/* ============================================================
   HOME: STORIES (ts-)
   One story at a time - the photo as a printed snapshot (shown whole, in
   its own shape, sized for phone pictures), a line lifted word for word
   from the testimonial, and the full testimonial in the dialog. A row of
   portraits chooses the story; on phones it is one row to swipe.
   ============================================================ */
.ts{background:#fff}
.ts-stage{position:relative;display:grid;max-width:1080px;margin:0 auto}
.ts-story{grid-area:1/1;margin:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,64px);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,visibility 0s .3s,transform .3s}
.ts-story.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ts-words{position:relative;padding-top:10px}
.ts-mark{display:block;height:.55em;margin-bottom:6px;font-family:Georgia,"Times New Roman",serif;font-size:7rem;line-height:1;color:var(--blue-400)}
.ts-pull{margin:0 0 26px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.ts-who{margin:0 0 18px;padding-top:18px;border-top:2px solid var(--blue-100);display:flex;flex-direction:column;gap:3px}
.ts-who strong{font-size:1.05rem;color:var(--ink)}
.ts-who span{font-size:.9rem;color:var(--muted)}
.ts-read{all:unset;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.ts-read span{display:inline-block;transition:transform .2s}.ts-read:hover span{transform:translateX(5px)}
.ts-read:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
.ts-picks{list-style:none;margin:clamp(40px,5vw,60px) auto 0;padding:0;max-width:1080px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px}
.ts-pick{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;background:#fff;transition:border-color .2s,background .2s,box-shadow .2s}
.ts-pick img{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:saturate(.7);transition:filter .2s}
.ts-pick span{display:flex;flex-direction:column;line-height:1.2;font-size:.72rem;color:var(--muted);white-space:nowrap}
.ts-pick b{font-size:.88rem;color:var(--ink)}
.ts-pick:hover{border-color:var(--blue-400)}
.ts-pick:hover img,.ts-pick[aria-selected="true"] img{filter:none}
.ts-pick[aria-selected="true"]{background:var(--navy-900);border-color:var(--navy-900);box-shadow:0 12px 24px -14px rgba(4,45,98,.6)}
.ts-pick[aria-selected="true"] b{color:#fff}.ts-pick[aria-selected="true"] span{color:var(--blue-200)}
.ts-pick:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
@media(max-width:820px){.ts-story{grid-template-columns:minmax(0,1fr);text-align:center}.ts-photo{max-width:340px;margin:0 auto;aspect-ratio:1/1}.ts-who{align-items:center}.ts-mark{margin-inline:auto}}
/* phones: the voices as one row of portraits to swipe, first names only, above the story */
@media(max-width:820px){
  .ts .wrap{display:flex;flex-direction:column}
  .ts-picks{order:-1;margin:0 -16px 26px;padding:4px 16px 10px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;scrollbar-width:none}
  .ts .section-head{order:-2}
  .ts-picks::-webkit-scrollbar{display:none}
  .ts-picks li{scroll-snap-align:start;flex:0 0 auto}
  .ts-pick{flex-direction:column;gap:6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none!important}
  .ts-pick img{width:58px;height:58px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
  .ts-pick[aria-selected="true"]{background:none}
  .ts-pick[aria-selected="true"] img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue-600)}
  .ts-pick span{font-size:0}.ts-pick b{font-size:.8rem;color:var(--ink)!important}
}
/* the photographs as printed snapshots: shown whole, in their own shape,
   small enough that a phone picture still looks good */
.ts-story{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ts-snap{position:relative;display:grid;place-items:center;min-height:440px}
.ts-print{position:relative;background:#fff;padding:12px 12px 46px;box-shadow:0 2px 4px rgba(4,45,98,.08),0 26px 44px -22px rgba(4,45,98,.45);transform:rotate(-2.2deg);transition:transform .6s var(--ease)}
.ts-story:nth-child(even) .ts-print{transform:rotate(1.8deg)}
.ts-story.is-on:hover .ts-print{transform:rotate(0)}
.ts-snap.is-tall .ts-print{width:min(290px,72vw)}
.ts-snap.is-wide .ts-print{width:min(390px,80vw)}
.ts-print img{display:block;width:100%;height:auto;max-height:400px;object-fit:cover}
.ts-cap{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:Caveat,"Segoe Print","Bradley Hand",cursive;font-weight:600;font-size:1.45rem;line-height:1;color:var(--navy-900)}
.ts-print{box-shadow:18px 18px 0 0 var(--shell),0 2px 4px rgba(4,45,98,.08),0 26px 44px -22px rgba(4,45,98,.45)}
.ts-story:nth-child(even) .ts-print{box-shadow:-18px 18px 0 0 var(--shell),0 2px 4px rgba(4,45,98,.08),0 26px 44px -22px rgba(4,45,98,.45)}
.ts-snap.is-trim .ts-print{width:min(330px,76vw)}
.ts-snap.is-trim .ts-print img{aspect-ratio:1/1;object-position:center bottom;max-height:none}
.ts-pull{margin:0 0 26px}
@media(max-width:820px){.ts-snap{min-height:0;padding:14px 0 6px}}
@media (max-width: 820px) {
  .ts-story { grid-template-columns: minmax(0, 1fr); gap: 26px; text-align: center; }
  .ts-who { align-items: center; }
}
@media (max-width: 820px) { .ts-story { align-self: start; } .ts-snap { padding-top: 6px; } }
/* the print's edge: a fine outline and a shadow all round, so the white
   border reads against the white page at the top as well as the bottom */
.ts-print { outline: 1px solid rgba(4, 45, 98, .14); outline-offset: 0;
  box-shadow: 18px 18px 0 0 var(--shell), 0 0 0 1px rgba(4, 45, 98, .04), 0 0 18px rgba(4, 45, 98, .10), 0 26px 44px -22px rgba(4, 45, 98, .45); }
.ts-story:nth-child(even) .ts-print {
  box-shadow: -18px 18px 0 0 var(--shell), 0 0 0 1px rgba(4, 45, 98, .04), 0 0 18px rgba(4, 45, 98, .10), 0 26px 44px -22px rgba(4, 45, 98, .45); }
/* middle ground: no drawn outline, just a whisper of an edge and a soft
   lift all round - the print reads as paper, not a cartoon border */
.ts-print { outline: 0;
  box-shadow: 18px 18px 0 0 var(--shell), 0 0 0 1px rgba(4, 45, 98, .06), 0 -2px 10px rgba(4, 45, 98, .07), 0 26px 44px -22px rgba(4, 45, 98, .45); }
.ts-story:nth-child(even) .ts-print {
  box-shadow: -18px 18px 0 0 var(--shell), 0 0 0 1px rgba(4, 45, 98, .06), 0 -2px 10px rgba(4, 45, 98, .07), 0 26px 44px -22px rgba(4, 45, 98, .45); }

/* home, phones: the four Why SORCE panels as one swipeable row, the next
   panel peeking in from the edge, instead of four screens of stacked cards */
@media (max-width: 860px) {
  .wb { flex-direction: row; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: 12px; margin: 0 -16px; padding: 4px 16px 18px; scrollbar-width: none; }
  .wb::-webkit-scrollbar { display: none; }
  .wb-p, .wb-p.is-on { flex: 0 0 86%; scroll-snap-align: center; }
  .wb-p { box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .8); }
}

/* stories, desktop: the same portrait row as on phones - round photos and
   first names only, the chosen one ringed in blue */
@media (min-width: 821px) {
  .ts-picks { gap: 22px 18px; margin-top: clamp(44px, 5vw, 64px); }
  .ts-pick { flex-direction: column; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; width: 92px; }
  .ts-pick img { width: 72px; height: 72px; filter: saturate(.75); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); transition: box-shadow .25s, filter .25s, transform .25s; }
  .ts-pick:hover img { transform: translateY(-3px); filter: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--blue-400); }
  .ts-pick[aria-selected="true"] img { filter: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue-600); }
  .ts-pick span { font-size: 0; align-items: center; }
  .ts-pick b { font-size: .92rem; color: var(--ink) !important; }
  .ts-pick[aria-selected="true"] b { color: var(--blue-600) !important; }
}
@media (min-width: 821px) and (max-width: 1000px) {
  .ts-picks { gap: 18px 6px; }
  .ts-pick { width: 72px; }
  .ts-pick img { width: 58px; height: 58px; }
}

/* ============================================================
   ABOUT: WHAT WE DO (pw-)
   The three pillars as photo panels, each the way into its part of the
   site (Research, Conservation, Education).
   ============================================================ */
.pw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.pw-card{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,34vw,470px);overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 30px 50px -34px rgba(4,45,98,.65)}
.pw-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pw-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,45,98,0) 30%,rgba(4,45,98,.55) 58%,rgba(4,45,98,.95))}
.pw-card:hover img{transform:scale(1.06)}
.pw-body{position:relative;z-index:1;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px)}
.pw-n{font-family:"Segoe UI Light","Segoe UI",system-ui,sans-serif;font-weight:300;font-size:1.4rem;line-height:1;color:var(--blue-400);margin-bottom:10px}
.pw-t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.15;margin-bottom:10px}
.pw-d{font-size:.93rem;line-height:1.55;color:rgba(255,255,255,.86);margin-bottom:18px}
.pw-go{align-self:flex-start;display:inline-flex;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;color:var(--navy-900);font-weight:700;font-size:.84rem;transition:background .2s}
.pw-go span{display:inline-block;transition:transform .2s}
.pw-card:hover .pw-go{background:var(--blue-400)}
.pw-card:hover .pw-go span{transform:translateX(4px)}
.pw-card:focus-visible{outline:3px solid var(--blue-600);outline-offset:4px}
@media(max-width:900px){.pw-grid{grid-template-columns:minmax(0,1fr)}.pw-card{min-height:340px}}

/* ============================================================
   ABOUT: THE TEAM'S FACES (tp-)
   One row of round portraits above the carousel - cropped in on each
   person from their action shot (assets/img/team/faces/). Choosing one
   brings that card to the front (js/main.js).
   ============================================================ */
.tp-row{list-style:none;margin:0 auto clamp(30px,3.6vw,44px);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 22px}
.tp-face{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;text-align:center}
.tp-face img,.tp-none{width:78px;height:78px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 4px rgba(255,255,255,.2);filter:saturate(.8);transition:transform .25s,box-shadow .25s,filter .25s}
.tp-none{display:block;background:linear-gradient(150deg,var(--blue-600),var(--navy-900))}
.tp-face b{font-size:.92rem;color:#fff}
.tp-face span:not(.tp-none){display:none}
.tp-face:hover img{transform:translateY(-3px);filter:none}
.tp-face[aria-current="true"] img,.tp-face[aria-current="true"] .tp-none{filter:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue-400)}
.tp-face:focus-visible{outline:2px solid var(--blue-400);outline-offset:4px}
@media(max-width:600px){.tp-row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px 26px;padding:4px 16px 8px;scrollbar-width:none}.tp-row::-webkit-scrollbar{display:none}.tp-row li{flex:0 0 auto}.tp-face{width:74px}.tp-face img,.tp-none{width:60px;height:60px}}

/* About: mission and vision on the left, held in view on desktop, beside
   the values list in its own row style - the same content, side by side
   rather than one after the other */
.mvv-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.mvv-split-l { position: sticky; top: 96px; }
.mvv-split .mv-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mvv-split .mvv-sub { margin: 0; padding: 0; border: 0; text-align: left; }
.mvv-split .mvv-sub h3 { font-size: 1.35rem; }
.mvv-split .mvv-sub p { margin: 0; }
.mvv-split .mvv-list { margin: 14px 0 0; max-width: none; }
.mvv-split .mvv-row { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); padding: 14px 18px; }
@media (max-width: 980px) {
  .mvv-split { grid-template-columns: minmax(0, 1fr); }
  .mvv-split-l { position: static; }
  .mvv-split .mvv-sub { margin-top: 18px; text-align: center; }
}
@media (max-width: 760px) { .mvv-split .mvv-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 14px; } }

/* ============================================================
   ABOUT: THE FACILITY TEAM, BROUGHT OUT (fs-)
   Every face as overlapping circles - two rows of staff, then the cats -
   above the button. Choosing the row opens the full list (js/main.js).
   ============================================================ */
.fs-teaser{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 auto clamp(26px,3vw,36px);width:100%}
.fs-group{display:flex;flex-direction:column;align-items:center;gap:12px}
.fs-rows{display:flex;flex-direction:column;align-items:center;gap:8px}
.fs-stack{list-style:none;margin:0;padding:0 0 0 12px;display:flex}
.fs-stack li{margin-left:-12px;transition:transform .25s var(--ease);position:relative;z-index:calc(40 - var(--i))}
.fs-stack img{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--navy-800,#073d84),0 6px 14px -6px rgba(0,0,0,.6)}
.fs-teaser:hover .fs-stack li{transform:translateY(-2px)}
.fs-stack li:hover{transform:translateY(-8px) scale(1.15)!important;z-index:60}
.fs-cap{font-size:.8rem;letter-spacing:.06em;color:var(--blue-200)}
.fs-cap b{font-family:var(--font-display);font-size:1.05rem;color:#fff;margin-right:3px;letter-spacing:0}
.fs-teaser:focus-visible{outline:2px solid var(--blue-400);outline-offset:6px}
@media(max-width:760px){.fs-stack img{width:38px;height:38px}.fs-stack li{margin-left:-14px}}

/* About, Why Indonesia: the four figures under icons, not in boxes */
.indo-stats{background:none;border:0;gap:clamp(16px,2.4vw,32px)}
.indo-stats li{background:none;padding:0 8px;align-items:center;gap:8px}
.indo-stats li+li{border-left:1px solid var(--blue-200)}
.indo-ic{width:64px;height:64px;object-fit:contain;margin-bottom:6px}
@media(max-width:760px){.indo-stats li+li{border-left:0}}

/* Expeditions: the comparison table, softened - a light header over one
   rule, no outer box, hairlines between rows */

.cmp-soft .cmp-scroll{background:transparent;border:0}
.cmp-soft .cmp-table{font-size:.95rem}
.cmp-soft .cmp-table thead th{background:none;color:var(--accent-text);font-size:.72rem;letter-spacing:.14em;padding-top:0;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.cmp-soft .cmp-table th,.cmp-soft .cmp-table td{padding-top:20px;padding-bottom:20px}
.cmp-soft .cmp-table tbody tr+tr{border-top:1px solid rgba(4,45,98,.12)}
.cmp-soft .cmp-table tbody tr:last-child{border-bottom:1px solid rgba(4,45,98,.12)}
.cmp-soft .cmp-rows tbody tr:hover,.cmp-soft .cmp-rows tbody tr:focus-within{background:var(--shell);box-shadow:none}
.cmp-soft .cmp-icon{width:32px;height:32px;margin-top:-3px}
.cmp-soft .cmp-link{font-size:1.02rem}
.cmp-soft td[data-label="Duration"]{white-space:nowrap}
.cmp-soft td[data-label="Who it's for"]{color:var(--ink);font-weight:600}
@media(max-width:760px){.cmp-soft .cmp-table thead th{border:0}.cmp-soft .cmp-table tbody tr{border:1px solid var(--line)!important}}


/* Dive courses: the PADI "before you arrive" note - a slim ruled strip,
   not a box, so it never doubles up the intro's blue panel */
.dc-before { display: flex; align-items: center; gap: 16px; max-width: 820px; margin: calc(-1 * clamp(14px, 2vw, 26px)) auto clamp(30px, 3.6vw, 44px); padding: 16px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .95rem; line-height: 1.6; }
.dc-before img { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.dc-before b { display: block; margin-bottom: 2px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }

/* Dive courses: a list of choices (the Advanced Adventure Dives) as small pills */
.dc-chips { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dc-chips li { padding: 6px 12px; border-radius: 999px; background: var(--shell); color: var(--ink); font-size: .84rem; font-weight: 600; line-height: 1.2; }
.dc-chips-note { margin: 6px 0 0 !important; font-size: .8rem !important; color: var(--muted); }

/* Dive course pop-up: lists may continue into the next column (a heading
   stays with its first item, a bullet never splits), so the two columns
   come out even instead of one long and one short */
.dc-modal-body .dc-body > ul { break-inside: avoid; }
.dc-modal-body .dc-body li { break-inside: avoid; }
.dc-modal-body .dc-body h4 { break-after: avoid; break-inside: avoid; }
/* the Adventure Dive choices as a quiet run of text, not pills */
.dc-chips { gap: 4px 0; margin: 2px 0 4px; }
.dc-chips li { padding: 0; border-radius: 0; background: none; font-weight: 400; font-size: .92rem; color: var(--ink); line-height: 1.6; }
.dc-chips li:not(:last-child)::after { content: "\00B7"; margin: 0 .55em; color: var(--blue-400); font-weight: 700; }
.dc-choice { color: var(--ink); }

/* Dive course pop-up: a short list of choices, small blue dots, set in two
   columns so it stays compact */
.dc-choices { list-style: none; margin: 2px 0 4px; padding: 0; }
.dc-choices li { position: relative; padding-left: 14px; margin-bottom: .3em; font-size: .92rem; line-height: 1.4; color: var(--ink); break-inside: avoid; }
.dc-choices li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400); }
.dc-choices-note { margin: 6px 0 0 !important; font-size: .8rem !important; color: var(--muted); }
/* start this heading at the top of the pop-up's second column */
.dc-modal-body .dc-body .dc-col-break { break-before: column; margin-top: 0; }

/* Dive course pop-up: a recommendation, set apart from the requirements */
.dc-tip { margin: 16px 0 0 !important; padding: 2px 0 2px 14px; border-left: 3px solid var(--blue-400); font-size: .88rem !important; line-height: 1.55 !important; color: var(--muted); }
.dc-tip b { display: block; margin-bottom: 2px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
/* the Adventure Dive choices take the starfish, like the requirement lists */
.dc-choices li { padding-left: 20px; }
.dc-choices li::before { width: 13px; height: 13px; top: .2em; border-radius: 0; background: url("../assets/icons/starfish.svg") center / contain no-repeat; }

/* Expeditions, the week: two short footnotes under the day strip */
.wk-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(24px, 4vw, 56px); margin: 18px 0 0; }
.wk-notes p { margin: 0; padding-left: 14px; border-left: 2px solid var(--blue-400); font-size: .86rem; line-height: 1.6; color: var(--muted); }
.wk-notes b { color: var(--ink); }
@media (max-width: 760px) { .wk-notes { grid-template-columns: minmax(0, 1fr); } }
/* the week's footnotes now sit with the closing small print, under the
   three notes, so the dive-day timeline keeps its space */
.wk-notes { margin-top: clamp(30px, 3.6vw, 44px); }

/* Expeditions, the week: a short explanation on hover (or tap / keyboard
   focus) for the broad labels - what "conservation dives" or "lectures"
   can mean - so the cards stay uncluttered */
.wk-tip { position: relative; cursor: help; border-bottom: 1px dotted var(--blue-400); outline: none; }
.wk-tip::after {
  content: attr(data-tip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px);
  width: 230px; padding: 12px 14px; transform: translate(-50%, 6px);
  background: var(--navy-900); color: #fff; font-size: .8rem; line-height: 1.5; font-weight: 400; text-align: left;
  box-shadow: 0 16px 30px -14px rgba(4, 45, 98, .7);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.wk-tip::before {
  content: ""; position: absolute; z-index: 31; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--navy-900); border-bottom: 0;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.wk-tip:hover::after, .wk-tip:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
.wk-tip:hover::before, .wk-tip:focus::before { opacity: 1; visibility: visible; transition: opacity .2s; }
.wk-tip:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.wk-day.is-today .wk-tip { border-bottom-color: var(--blue-200); }
.wk-acts .wk-tip { display: inline; margin: 0; font-size: inherit; color: inherit; line-height: inherit; }
.wk-day.is-today .wk-tip::after { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 16px 30px -14px rgba(0,0,0,.7); }

/* Conservation Divemaster, Advanced Conservation Science: the techniques
   as one list on the left, eligibility and the fee on the right */
.addon-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.addon-split .addon-list { margin: 0; }
.addon-split .addon-note { margin: 0; max-width: none; padding-top: 0; border-top: 0; }
.addon-split .addon-note h3 { margin-top: 0; }
@media (max-width: 860px) { .addon-split { grid-template-columns: minmax(0, 1fr); } }


/* ---------- the four kinds of site: a list of four ----------
   One row per habitat - icon, name, the work done there - that opens in
   place to show the photo, the habitat, its "Site in focus" story and the
   way through to Explore & Learn. Native <details>, so any number of rows
   can be open at once. On phones the work line moves inside the opened row.
   The earlier card rules above stay for _ecosite-mock.html. */
.esl { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; border-top: 1px solid var(--blue-200); }
.esl > li { border-bottom: 1px solid var(--blue-200); }
.esl-head {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 48px auto 1fr 24px; align-items: center; gap: 18px;
  padding: 16px 6px;
}
.esl-head::-webkit-details-marker { display: none; }
.esl-icon { width: 44px; height: 44px; object-fit: contain; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.esl-title { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--ink); }
.esl-work { font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--accent-text); text-align: right; }
.esl-chev {
  width: 10px; height: 10px; justify-self: center;
  border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.esl-item[open] .esl-chev { transform: rotate(-135deg); }
.esl-head:hover .esl-icon { transform: translateY(-2px) rotate(-6deg); }
.esl-head:hover .esl-title { color: var(--accent-text); }
.esl-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.esl-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; padding: 4px 6px 26px; }
.esl-photo { margin: 0; position: relative; min-height: 240px; }
.esl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esl-intro { margin: 0 0 1em; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.esl .ecosite-focus { margin: 0; padding: 14px 18px 16px; }
.esl-work-in { display: none; }
.esl-cta { margin: 16px 0 0; }
.esl-item[open] .esl-body { animation: esl-in .35s var(--ease); }
@keyframes esl-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .esl-head { grid-template-columns: 40px 1fr 20px; gap: 12px; }
  .esl-work { display: none; }
  .esl-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .esl-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .esl-work-in {
    display: block; margin: 14px 0 0;
    font-size: .8rem; font-weight: 700; letter-spacing: .03em; line-height: 1.55; color: var(--accent-text);
  }
}
@media (prefers-reduced-motion: reduce) {
  .esl-icon, .esl-chev { transition: none; }
  .esl-item[open] .esl-body { animation: none; }
}

/* a partner card can carry a photograph from the work together */
.ca-photo { margin: 0 0 18px; }
.ca-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* a header as tall as the expedition pages', for pages without a card below */
.page-hero.page-hero-tall { padding-bottom: clamp(110px, 13vw, 168px); }
/* every page header (not the home page) shares one height */
.page-hero { min-height: clamp(420px, 41vw, 589px); box-sizing: border-box; }

/* Who we are - closing line on the home page */
.about-close{font-weight:700;font-size:1.2rem;color:#042d62;margin-top:4px}

/* Double rule between Eco-Venture and the study routes on the home page */
.exp-list li.exp-split { border-top: 4px double var(--blue-600); }

/* Eco-Venture star with a hover note for holidaymakers */
.exp-star {
  position: relative; display: inline-block; vertical-align: super;
  margin-left: 4px; font-size: .8em; line-height: 1;
  color: var(--blue-400); cursor: help;
}
.exp-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5;
  width: 250px; padding: 10px 14px;
  transform: translate(-50%, 4px);
  background: var(--navy-900); color: var(--white);
  font-family: var(--font-body, inherit); font-size: .82rem; font-weight: 500;
  line-height: 1.45; letter-spacing: 0; text-align: left; white-space: normal;
  box-shadow: 0 12px 26px -14px rgba(4, 45, 98, .7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.exp-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--navy-900);
}
.exp-star:hover .exp-tip,
.exp-star.is-open .exp-tip,
.exp-row:focus-visible .exp-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

/* Quiet pointer to the add-on courses, under the Find Your Expedition button */
.exp-more { margin: 18px 0 0; font-size: .92rem; text-align: center; }
.exp-more a { color: var(--muted); text-decoration: none; }
.exp-more a:hover, .exp-more a:focus-visible { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 1100px) {
  /* On narrow screens the note spans the row just below the text, so it never runs off the edge */
  .exp-star { position: static; }
  .exp-tip { left: 14px; right: 14px; width: auto; bottom: auto; top: calc(100% - 10px); transform: translateY(-4px); }
  .exp-tip::after { display: none; }
  .exp-star:hover .exp-tip,
  .exp-star.is-open .exp-tip,
  .exp-row:focus-visible .exp-tip { transform: translateY(0); }
}

/* Home Impact: why reefs and mangroves matter, then the two buttons */
.impact-why {
  max-width: 60ch; margin: clamp(38px, 5vw, 58px) auto 0;
  text-align: center; font-size: 1.12rem; line-height: 1.6; color: var(--ink);
}
.impact-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 26px; }

/* Footer newsletter: the line that says whether a sign-up went through */
.newsletter-note { margin: 8px 0 0; font-size: .85rem; }
.newsletter-note a { color: inherit; text-decoration: underline; }

/* Spam trap on every form: off-screen, so people never see or tab to it */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Volunteer World badge: a plain image (the live embed showed its own cookie pop-up). Smaller than the two round badges because it is mostly text. */
.award-vw img { height: 96px; }

/* Field Sites map: waits for a click before Google loads (cookies) */
.map-frame { position: relative; }
.map-load {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  background: linear-gradient(150deg, rgba(4,45,98,.92), rgba(39,122,188,.88));
  color: #fff;
}
.map-load p { margin: 0; max-width: 42ch; font-size: .9rem; color: rgba(255,255,255,.88); }
.map-load a { color: #fff; text-decoration: underline; }
.map-load[hidden] { display: none; }

/* Policy pages (Safeguarding, Cookies) - built by build-policies.py */

.policy-section { background: var(--paper); }
.policy { max-width: 1060px; color: var(--ink); font-size: 1.02rem; line-height: 1.7; }
.policy h2 { margin: 2.1em 0 .6em; font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--navy-900); }
.policy h2:first-child { margin-top: 0; }
.policy p, .policy ul, .policy ol { margin: 0 0 1em; }
.policy li { margin-bottom: .45em; }
.policy a { color: var(--accent-text); }
.policy-table { overflow-x: auto; margin: 0 0 1.2em; }
.policy table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
.policy th { background: var(--navy-800); color: #fff; text-align: left; padding: 10px 12px; }
.policy td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

.policy ol.alpha { list-style: none; padding-left: 1.2em; }

/* Species seen in the wider area but not on a SORCE expedition */
.sp-flag { display: inline-block; align-self: flex-start; margin: 2px 0 6px; padding: 3px 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-900); background: var(--blue-100); }
.sp-where { margin: 14px 0 0; padding: 12px 14px; background: var(--shell); border-left: 3px solid var(--blue-400);
  font-size: .92rem; line-height: 1.55; color: var(--ink); }
.sp-where span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 2px; }

.mod-prospectus { margin: 18px 0 0; }

/* ---------- Collaborations: "Thinking about working with us?" ----------
   A white card over a full-width photo, listing the kinds of collaboration. */
.cw { position: relative; isolation: isolate; padding: clamp(90px, 12vw, 170px) 0; }
.cw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cw::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4, 45, 98, .55), rgba(4, 45, 98, .05)); }
.cw-card { background: #fff; max-width: 1000px; padding: clamp(32px, 4vw, 54px); }
.cw-title { font-family: var(--font-display); color: var(--ink); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; margin: .2em 0 .5em; }
.cw-lede { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin: 0 0 26px; }
.cw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: clamp(28px, 4vw, 48px); }
.cw-list li:nth-child(1), .cw-list li:nth-child(4) { border-top: 1px solid var(--blue-100); }
.cw-list li.cw-cta { display: flex; align-items: center; border-bottom: 0; padding-top: 18px; }
.cw-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--blue-100); }
.cw-list img { width: 44px; height: 44px; object-fit: contain; }
.cw-list b { display: block; color: var(--ink); font-family: var(--font-display); }
.cw-list span { color: var(--muted); font-size: .93rem; line-height: 1.5; }
@media (max-width: 760px) { .cw-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } .cw-list li:nth-child(4) { border-top: 0; } }
@media (max-width: 620px) { .cw { padding: 0; } .cw-bg { position: static; height: 220px; display: block; } .cw::after { content: none; } .cw .wrap { padding: 0; } }

/* ---------- Donations: "Where does my donation go?" ----------
   A line runs from "Your donation" through the four areas to the annual reports. */
.dg { background: #fff; }
.dg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.dg-copy p { color: var(--muted); line-height: 1.8; }
.dg-flow { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.dg-flow::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: 40px; width: 2px;
  background: linear-gradient(var(--blue-400), var(--navy-900)); }
.dg-flow li { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.dg-flow li::before { content: ""; position: absolute; left: -27px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-600); }
.dg-flow img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.dg-flow b { color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; }
.dg-start span { display: inline-block; background: var(--navy-900); color: #fff; padding: 10px 18px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.dg-flow .dg-end { margin-top: 12px; background: var(--shell); padding: 20px 22px; align-items: flex-start; }
.dg-flow .dg-end::before { left: -27px; top: 26px; }
.dg-end span { display: block; color: var(--muted); font-size: .93rem; margin: 4px 0 8px; }
.dg-end a { font-weight: 700; color: var(--blue-600); }
@media (max-width: 860px) { .dg-grid { grid-template-columns: 1fr; } }

/* ---------- Donations: monthly giving ----------
   Navy band: the case for certainty, a white sign-up card, and a year of
   months underneath, each one lit, as a quiet picture of steady support. */
.dg { background: var(--shell); }
.dg-start span { box-shadow: none; }
.dg-flow li::before { background: var(--shell); }
.dg-flow .dg-end { background: #fff; }
.mg { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); }
.mg-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.mg-copy p { color: rgba(255, 255, 255, .9); line-height: 1.8; }
.mg-copy strong { color: #fff; }
.mg-pts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mg-pts li { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25);
  font-family: var(--font-display); line-height: 1.35; }
.mg-ico { display: grid; place-items: center; width: 54px; height: 54px; background: #fff; }
.mg-ico img { width: 40px; height: 40px; object-fit: contain; }
.mg-card { background: #fff; color: var(--ink); padding: clamp(30px, 3.6vw, 46px); }
.mg-k { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); }
.mg-card h3 { margin: .45em 0 .7em; font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--ink); }
.mg-ticks { list-style: none; margin: 0 0 28px; padding: 0; }
.mg-ticks li { position: relative; padding: 11px 0 11px 28px; border-bottom: 1px solid var(--blue-100); color: var(--muted); }
.mg-ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue-600); font-weight: 700; }
.mg-card .btn { width: 100%; }
.mg-year { margin-top: clamp(56px, 7vw, 90px); }
.mg-year ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); position: relative; }
.mg-year ol::before { content: ""; position: absolute; left: calc(100% / 24); right: calc(100% / 24); top: 6px; height: 2px;
  background: linear-gradient(90deg, rgba(67, 176, 241, .35), var(--blue-400)); }
.mg-year li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mg-year li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--navy-900);
  border: 2px solid var(--blue-400); position: relative; z-index: 1; }
.mg-year li:last-child::before { background: var(--blue-400); box-shadow: 0 0 0 5px rgba(67, 176, 241, .2); }
.mg-year span { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-200); }
.mg-cap { margin: 22px auto 0; text-align: center; max-width: 60ch; color: rgba(255, 255, 255, .85); font-size: .98rem; }
@media (max-width: 860px) { .mg-grid { grid-template-columns: 1fr; } .mg-pts { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .mg-year span { font-size: .6rem; letter-spacing: .04em; } }

/* Monthly giving on white: copy in ink, icons standing free, the sign-up card in navy. */
.mg { background: #fff; color: var(--ink); }
.mg-copy p { color: var(--muted); }
.mg-copy strong { color: var(--ink); }
.mg-pts li { border-top-color: var(--blue-100); color: var(--ink); }
.mg-ico { width: auto; height: auto; background: none; place-items: start; }
.mg-ico img { width: 46px; height: 46px; }
.mg-card { background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); color: #fff; }
.mg-k { color: var(--blue-200); }
.mg-card h3 { color: #fff; }
.mg-ticks li { color: rgba(255, 255, 255, .9); border-bottom-color: rgba(255, 255, 255, .18); }
.mg-ticks li::before { color: var(--blue-400); }
.mg-year li::before { background: #fff; border-color: var(--blue-600); }
.mg-year li:last-child::before { background: var(--blue-600); box-shadow: 0 0 0 5px rgba(39, 122, 188, .18); }
.mg-year ol::before { background: linear-gradient(90deg, var(--blue-100), var(--blue-600)); }
.mg-year span { color: var(--blue-600); }
.mg-cap { color: var(--muted); }



/* ---------- Donations: where a donation goes (merged section) ---------- */
.dw{background:#fff;padding:clamp(80px,10vw,130px) 0}

.dw-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,5vw,60px)}

.dw-tree{position:relative;text-align:center}

.dw-start{display:inline-block;background:var(--navy-900);color:#fff;padding:12px 22px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;position:relative}

.dw-start::after{content:"";position:absolute;left:calc(50% - 1px);top:100%;width:2px;height:34px;background:var(--blue-600)}

.dw-areas{list-style:none;margin:34px 0 0;padding:34px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,24px);position:relative;text-align:left}

.dw-areas::before{content:"";position:absolute;top:0;left:calc((100% - 4 * clamp(14px,2vw,24px)) / 10);right:calc((100% - 4 * clamp(14px,2vw,24px)) / 10);height:2px;background:var(--blue-600)}

.dw-areas>li{position:relative;background:var(--shell);padding:28px 22px 26px;border-top:3px solid var(--blue-400)}

.dw-areas>li::before{content:"";position:absolute;left:calc(50% - 1px);top:-37px;width:2px;height:34px;background:var(--blue-600)}

.dw-areas>li::after{content:"";position:absolute;left:calc(50% - 6px);top:-9px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid var(--blue-600)}

.dw-areas img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 16px}

.dw-areas h3{text-align:center;color:var(--ink);font-size:1.15rem;margin:0 0 8px}

.dw-areas p{text-align:center;color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 16px}

.dw-areas ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--blue-100)}

.dw-areas ul li{position:relative;padding:5px 0 5px 16px;font-size:.86rem;line-height:1.45;color:var(--ink)}

.dw-areas ul li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;background:var(--blue-400)}

.dw-foot{display:grid;grid-template-columns:1fr 1.2fr;gap:0;margin-top:clamp(40px,5vw,60px)}

.dw-promise{background:var(--navy-900);color:#fff;padding:clamp(28px,3.4vw,44px)}
.dw-promise p{margin:0;line-height:1.7;color:rgba(255,255,255,.9)}

.dw-report{background:var(--shell);padding:clamp(28px,3.4vw,44px);display:flex;gap:22px;align-items:flex-start}
.dw-report img{width:56px;height:56px;flex:none}

.dw-report p{margin:0 0 18px;color:var(--muted);line-height:1.7}

.dw-k{font-size:.76rem!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600)!important;margin:0 0 10px!important}
.dw-promise .dw-k{color:var(--blue-200)!important}

@media(max-width:1000px){.dw-areas{grid-template-columns:repeat(2,1fr)}
.dw-areas::before,.dw-areas>li::before,.dw-areas>li::after{display:none}
.dw-foot{grid-template-columns:1fr}
}

@media(max-width:620px){.dw-areas{grid-template-columns:1fr}
}


/* Monthly giving sits on pale blue now, below the white section above */
.mg { background: var(--shell); }
/* Donate: little turtles instead of ticks */
.dn-assure li::before {
  left: 0; top: .2em; width: 20px; height: 20px; border: 0; transform: none;
  background: url("../assets/icons/sea_turtle.svg") center / contain no-repeat;
}

/* Donations order: Donate (pale), Fund a piece of the work (white),
   Where does my donation go (pale), Monthly giving (white), Legacy (navy) */
.section-wishlist { background: #fff; }
.dw { background: var(--shell); }
.dw-areas > li, .dw-report { background: #fff; }
.mg { background: #fff; }

/* ---------- Donations: Fund a piece of the work (tiles) ---------- */
.wd{background:#fff;padding:clamp(70px,9vw,120px) 0}

.wd-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(40px,6vw,90px);align-items:center}

.wd-l p{color:var(--muted);line-height:1.8}
.wd-small{font-size:.95rem;margin-bottom:28px}

.wd-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}

.wd-items a{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:26px 26px 22px;background:#fff;border:1px solid var(--blue-100);border-top:3px solid var(--navy-900);text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}

.wd-items a:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(4,45,98,.35);border-top-color:var(--blue-400)}

.wd-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}

.wd-top img{width:58px;height:58px;object-fit:contain}
.wd-top b{font-family:var(--font-display);font-size:1.9rem;line-height:1;color:var(--navy-900)}

.wd-items h3{margin:0 0 6px;color:var(--ink);font-size:1.12rem}
.wd-items p{margin:0 0 18px;color:var(--muted);font-size:.92rem;line-height:1.55}

.wd-go{margin-top:auto;padding-top:14px;border-top:1px solid var(--blue-100);font-weight:700;color:var(--blue-600);font-size:.92rem}

.wd-items a:hover .wd-go{color:var(--navy-900)}

@media(max-width:900px){.wd-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.wd-items{grid-template-columns:1fr}
}

.wd-other { margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid var(--blue-100); font-size: .95rem; }
.wd-other strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* Fund a piece of the work: the pop-up for each item */
/* each .wd-pop is lifted into a dialog by main.js; with JS off they show inline */
.modal-card .wd-pop { display: block; max-width: 560px; }
.wd-pop-head { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center;
  padding-bottom: 20px; border-bottom: 1px solid var(--blue-100); }
.wd-pop-head img { width: 72px; height: 72px; object-fit: contain; }
.wd-pop-head .eyebrow { margin: 0 0 4px; }
.wd-pop-head h3 { margin: 0; color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; }
.wd-pop-price { font-family: var(--font-display); font-size: 2rem; color: var(--navy-900); }
.wd-pop-note { margin: 20px 0 10px; color: var(--ink); line-height: 1.7; }
.wd-pop-promise { margin: 0 0 24px; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.wd-pop-pay .btn { width: 100%; }
.wd-pay.is-pending { background: var(--grey-500); border-color: var(--grey-500); }
.wd-pop-small { margin: 12px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; text-align: center; }
.modal-card:has(.wd-pop) { max-width: 640px; }
.modal-card .wd-pop { max-width: none; }
/* keep the dividers level across the five areas */
.dw-areas > li { display: flex; flex-direction: column; }
.dw-areas > li > p { min-height: calc(1.55em * 3); }
.dw-areas > li > ul { flex: 1; }

/* ---------- Fund a piece of the work: the item pop-up (v2) ----------
   A navy band with the icon and name, then a padded body: the cost, what it
   pays for, two reassurances, the button and a quiet secure-payment line. */
.modal-card:has(.wd-pop) { max-width: 560px; background: #fff; border: 0; }
.modal-card:has(.wd-pop) .modal-close {
  top: 14px; right: 14px; width: 36px; height: 36px; font-size: 1.4rem;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45);
}
.modal-card:has(.wd-pop) .modal-close:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
.modal-card .wd-pop { max-width: none; }
.wd-pop-band {
  display: flex; align-items: center; gap: 20px;
  padding: 30px 70px 30px clamp(26px, 4vw, 40px);
  background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 75%, var(--blue-600)); color: #fff;
}
.wd-pop-ico { flex: none; display: grid; place-items: center; width: 76px; height: 76px; background: #fff; }
.wd-pop-ico img { width: 58px; height: 58px; object-fit: contain; }
.wd-pop-band h3 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.65rem); line-height: 1.2; }
.wd-pop-k { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); }
.wd-pop-band .wd-pop-k { color: var(--blue-200); }
.wd-pop-body { padding: clamp(24px, 3.4vw, 34px) clamp(26px, 4vw, 40px) clamp(24px, 3vw, 30px); }
.wd-pop-cost {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--blue-100);
}
.wd-pop-cost span { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wd-pop-cost b { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--navy-900); }
.wd-pop-note { margin: 0 0 18px; color: var(--ink); font-size: 1.02rem; line-height: 1.65; }
.wd-pop-points { list-style: none; margin: 0 0 26px; padding: 16px 18px; background: var(--shell); }
.wd-pop-points li { position: relative; padding: 5px 0 5px 28px; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.wd-pop-points li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 18px; height: 18px;
  background: url("../assets/icons/sea_turtle.svg") center / contain no-repeat;
}
.wd-pop-body .wd-pay { display: flex; justify-content: center; width: 100%; }
.wd-pop-secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 14px 0 0; font-size: .84rem; color: var(--muted);
}
@media (max-width: 480px) { .wd-pop-band { padding-right: 60px; } .wd-pop-ico { width: 60px; height: 60px; } .wd-pop-ico img { width: 46px; height: 46px; } }
.wd-pop-ico { border-radius: 50%; }
.wd-pop-ico img { width: 50px; height: 50px; }
@media (max-width: 480px) { .wd-pop-ico img { width: 40px; height: 40px; } }

/* ---------- Donate form, refined ----------
   A heading, underlined tabs for once / monthly, taller amount tiles, a quiet
   line of text in place of the old summary box, and the amount on the button. */
.dn-form { border: 0; border-top: 4px solid var(--navy-900); box-shadow: 0 30px 60px -30px rgba(4, 45, 98, .35); padding: clamp(28px, 3.4vw, 40px); }
.dn-form-head { margin-bottom: 22px; }
.dn-form-head h3 { margin: 0 0 4px; font-size: clamp(1.35rem, 2.2vw, 1.6rem); color: var(--ink); }
.dn-form-head p { margin: 0; color: var(--muted); font-size: .94rem; }
.dn-toggle { gap: 0; margin-bottom: 22px; border-bottom: 1px solid var(--blue-100); }
.dn-freq, .dn-freq + .dn-freq {
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none;
  padding: 12px 8px 14px; color: var(--muted); font-size: .98rem;
}
.dn-freq:hover { background: none; color: var(--ink); }
.dn-freq.is-on { background: none; color: var(--navy-900); border-bottom-color: var(--navy-900); }
.dn-amounts { gap: 12px; }
.dn-amount {
  padding: 20px 8px; font-size: 1.3rem; border: 1px solid var(--blue-100); background: #fff;
  box-shadow: 0 1px 0 rgba(4, 45, 98, .04);
}
.dn-amount:hover { border-color: var(--blue-400); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(4, 45, 98, .4); }
.dn-amount.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: 0 12px 24px -14px rgba(4, 45, 98, .6); }
.dn-amounts .dn-other { grid-column: span 2; font-size: 1rem; letter-spacing: .02em; }
.dn-amounts .dn-other:nth-child(4) { grid-column: 1 / -1; }
.dn-summary {
  margin: 20px 0 0; padding: 0; background: none; border: 0;
  text-align: center; color: var(--muted); font-size: .95rem;
}
.dn-summary strong { color: var(--ink); }
.dn-go { margin-top: 14px; }
.dn-note { display: flex; justify-content: center; align-items: center; gap: 7px; text-align: center; font-size: .82rem; }
.dn-note svg { flex: none; }
.dn-form-head { display: flex; align-items: center; gap: 16px; }
.dn-form-ico { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--shell); }
.dn-form-ico img { width: 40px; height: 40px; object-fit: contain; }
.dn-form-ico { width: auto; height: auto; border-radius: 0; background: none; }
.dn-form-ico img { width: 52px; height: 52px; }
.dn-form-ico img { width: 68px; height: 68px; }

/* Monthly giving card, refined: a turtle watermark kept clear of the words,
   round tick badges, a centred button and a quiet line under it. */
.mg-card { position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(34px, 4vw, 48px); box-shadow: 0 34px 60px -30px rgba(4, 45, 98, .6); }
.mg-card::after {
  content: ""; position: absolute; z-index: -1; top: -18px; right: -26px; width: 150px; height: 150px;
  background: url("../assets/icons/sea_turtle.svg") center / contain no-repeat; opacity: .12; transform: rotate(-18deg);
}
.mg-card h3 { padding-right: 70px; font-size: clamp(1.45rem, 2.3vw, 1.75rem); line-height: 1.2; }
.mg-ticks li { padding: 13px 0 13px 38px; border-bottom-color: rgba(255, 255, 255, .14); color: #fff; }
.mg-ticks li:last-child { border-bottom: 0; }
.mg-ticks li::before {
  content: "\2713"; left: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(67, 176, 241, .2); color: var(--blue-200); font-size: .78rem;
}
.mg-card .btn { display: flex; justify-content: center; width: 100%; }
.mg-card-foot { margin: 14px 0 0; text-align: center; font-size: .86rem; color: var(--blue-200); }

/* Fund a piece of the work on navy: the one dark band among the giving
   sections; the item tiles stay white and lift off it. */
.section-wishlist.wd { background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); color: #fff; }
.wd .eyebrow { color: var(--blue-200); }
.wd .section-title, .wd-other strong { color: #fff; }
.wd-l p { color: rgba(255, 255, 255, .85); }
.wd-other { border-top-color: rgba(255, 255, 255, .2); }
.wd-items a { border: 0; border-top: 3px solid var(--blue-400); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); }
.wd-items a:hover { border-top-color: #fff; box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .6); }
.mg-card h3 { padding-right: 0; }
/* Monthly card: the turtle as a photo strip across the top, text on solid navy */
.mg-card { background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 75%, var(--blue-600)); padding-top: 0; }
.mg-card-photo {
  position: relative; margin: 0 calc(-1 * clamp(34px, 4vw, 48px)) 28px; height: 180px; overflow: hidden;
}
.mg-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.mg-card-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(to bottom, rgba(4, 45, 98, 0), var(--navy-900));
}
.mg-card-photo { height: 200px; } .mg-card-photo img { object-position: 62% 18%; }
/* Monthly card: the photo itself feathers away into the card (no overlay band),
   more turtle and less open water, and everything a little more compact. */
.mg-card-photo { height: 190px; margin-bottom: 18px; }
.mg-card-photo::after { content: none; }
.mg-card-photo img {
  object-position: 62% 38%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.mg-card { padding-bottom: 30px; }
.mg-card h3 { margin: .3em 0 .5em; }
.mg-ticks { margin-bottom: 22px; }
.mg-ticks li { padding: 9px 0 9px 36px; font-size: .95rem; white-space: nowrap; }
.mg-card-foot { margin-top: 10px; }
.mg-card { background: var(--navy-900); }
/* Monthly card: no photo; little turtles instead of ticks */
.mg-card { padding-top: clamp(34px, 4vw, 48px); }
.mg-ticks li::before {
  content: ""; width: 22px; height: 22px; border-radius: 0; background: url("../assets/icons/sea_turtle.svg") center / contain no-repeat;
}
.mg-ticks li::before { width: 24px; height: 24px; filter: brightness(1.6); }
/* starfish bullets: the monthly card and the donate reassurances */
.mg-ticks li::before { background-image: url("../assets/icons/starfish.svg"); filter: none; }
.dn-assure li::before { background-image: url("../assets/icons/starfish.svg"); }
/* Donate: a more compact form so it sits level with the text beside it */
.dn-grid { align-items: center; }
.dn-form { padding: clamp(22px, 2.6vw, 30px); }
.dn-form-head { margin-bottom: 14px; gap: 14px; }
.dn-form-ico img { width: 54px; height: 54px; }
.dn-form-head h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); }
.dn-toggle { margin-bottom: 14px; }
.dn-freq, .dn-freq + .dn-freq { padding: 9px 8px 11px; }
.dn-amounts { gap: 8px; }
.dn-amount { padding: 12px 6px; font-size: 1.15rem; }
.dn-summary { margin-top: 12px; font-size: .9rem; }
.dn-go { margin-top: 10px; }
.dn-note { margin-top: 10px; }
.dn-note { white-space: nowrap; font-size: .78rem; margin-top: 12px; }
.dn-summary { margin-top: 18px; }
.dn-go { margin-top: 16px; }
@media (max-width: 480px) { .dn-note { white-space: normal; } }
.dn-form-ico img { width: 72px; height: 72px; }
.mg-card::after { content: none; }

/* Leave a legacy, compacted: same design, tighter rhythm. A shorter photo,
   smaller headline, and the gaps between its four parts roughly halved. */
.section-legacy { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 7vw, 96px); }
.lg-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.lg-copy .lg-lede { font-size: 1.08rem; }
.lg-photo img { aspect-ratio: 3 / 2; }
.lg-line { margin-top: clamp(40px, 4.5vw, 56px); }
.lg-kinds, .lg-how { margin-top: clamp(44px, 5vw, 64px); }
.lg-kinds h3, .lg-steps > h3 { margin-bottom: 14px; }
.lg-kinds li { padding-top: 14px; }
.lg-kinds p { margin-bottom: 10px; }
.lg-steps .sv-terms { margin-bottom: 18px; }
/* the tax note folds away under its heading */
.lg-tax { margin-top: 18px; padding-top: 14px; }
.lg-tax > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; margin: 0; }
.lg-tax > summary::-webkit-details-marker { display: none; }
.lg-tax > summary::after { content: "+"; font-size: 1.1rem; font-weight: 400; letter-spacing: 0; color: var(--blue-600); }
.lg-tax[open] > summary::after { content: "\2212"; }
.lg-tax[open] > summary { margin-bottom: 10px; }
.lg-details { padding: clamp(20px, 2.6vw, 28px); }
.lg-details dl > div { padding: 9px 0; }
.lg-details dl { margin-bottom: 16px; }
.lg-steps .sv-terms li { padding-bottom: 0; }
/* the steps stretch to the height of the details card beside them */
.lg-how { align-items: stretch; }
.lg-steps { display: flex; flex-direction: column; }
.lg-steps .sv-terms { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 24px; }
.lg-steps .sv-terms li { flex: 1; display: grid; align-content: center; padding-top: 14px; padding-bottom: 14px; }
.lg-steps > .btn { align-self: flex-start; }

/* ---------- Explore & Learn: a strip of real photographs ----------
   One slim row between the habitats and the species library, so readers see
   what these places look like without the photos taking over the page. */
.ex-strip { background: var(--navy-900); padding: 6px 0; }
.ex-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ex-strip figure { position: relative; margin: 0; height: clamp(170px, 17vw, 250px); overflow: hidden; }
.ex-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.ex-strip li:hover img { transform: scale(1.05); }
.ex-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(4, 45, 98, .85), rgba(4, 45, 98, 0));
  color: #fff; font-size: .82rem; line-height: 1.35;
}
@media (max-width: 900px) { .ex-strip ul { grid-template-columns: repeat(3, 1fr); } .ex-strip li:nth-child(n+4) { display: none; } }
@media (max-width: 560px) { .ex-strip ul { grid-template-columns: 1fr 1fr; } .ex-strip li:nth-child(n+3) { display: none; } }

/* Fund a piece of the work pop-up: choosing an amount */
.wd-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 12px; }
.wd-amt {
  padding: 12px 6px; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1;
  color: var(--ink); background: #fff; border: 1px solid var(--blue-100); cursor: pointer;
  transition: border-color .18s, background-color .18s, color .18s;
}
.wd-amt span { display: block; margin-top: 3px; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wd-amt:hover { border-color: var(--blue-400); }
.wd-amt.is-on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.wd-amt.is-on span { color: rgba(255, 255, 255, .75); }
.wd-amt-other { font-size: .95rem; }
.wd-other-field { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--blue-200); }
.wd-other-field[hidden] { display: none; }
.wd-other-field span { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.wd-other-field input { flex: 1; border: 0; font: inherit; font-size: 1.05rem; color: var(--ink); outline: none; background: none; }
.wd-pop-promise { margin: 0 0 18px; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.wd-pay.is-disabled { opacity: .45; }

/* ---------- Donations: Your fundraiser ----------
   A photograph on a pale block, the tip in a navy card hanging off its
   corner, and the four steps beside it with large light numerals. */
.fz { background: #fff; position: relative; overflow: hidden; }
.fz::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--shell); }
.fz .wrap { position: relative; z-index: 1; }
.fz-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 6vw, 96px); align-items: center; }
.fz-media { position: relative; padding-bottom: 70px; }
.fz-photo { margin: 0; box-shadow: 0 40px 70px -40px rgba(4, 45, 98, .55); }
.fz-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
.fz-tip {
  position: absolute; right: -28px; bottom: 0; width: min(78%, 400px);
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--navy-900); color: #fff; padding: 24px 26px;
  box-shadow: 0 30px 50px -28px rgba(4, 45, 98, .8);
}
.fz-tip svg { color: var(--blue-400); margin-top: 2px; }
.fz-tip b { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200); margin-bottom: 6px; }
.fz-tip p { margin: 0; font-size: .98rem; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.fz-copy .section-title { margin-bottom: 22px; }
.fz-steps { list-style: none; margin: 0; padding: 0; }
.fz-steps li {
  display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--blue-100); transition: padding-left .3s var(--ease);
}
.fz-steps li:last-child { border-bottom: 1px solid var(--blue-100); }
.fz-steps li:hover { padding-left: 6px; }
.fz-n { font-family: var(--font-display); font-weight: 300; font-size: 2.1rem; line-height: 1; color: var(--blue-600); letter-spacing: -.02em; }
.fz-steps h3 { margin: 0 0 5px; font-size: 1.12rem; color: var(--ink); }
.fz-steps p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; }
.fz-link { display: inline-block; margin-top: 24px; font-weight: 700; color: var(--blue-600); text-decoration: none; border-bottom: 2px solid var(--blue-200); padding-bottom: 3px; }
.fz-link:hover { border-color: var(--blue-600); }
@media (max-width: 900px) {
  .fz-grid { grid-template-columns: 1fr; }
  .fz::before { width: 100%; height: 40%; bottom: auto; }
  .fz-tip { right: 0; }
}
.fz-media { padding-bottom: 96px; } .fz-photo img { object-position: 50% 40%; }
.fz { background: var(--shell); } .fz::before { background: #fff; }
.fz::before { background: var(--blue-200); opacity: .55; }

/* Fund a piece of the work: category tabs above the tiles (on navy) */
.wd-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.wd-tab {
  padding: 12px 18px 13px; font: inherit; font-weight: 700; font-size: .95rem; color: rgba(255, 255, 255, .7);
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.wd-tab:hover { color: #fff; }
.wd-tab.is-on { color: #fff; border-bottom-color: var(--blue-400); }
.wd-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wd-items[hidden] { display: none; }
.wd-items { animation: wdIn .35s var(--ease); }
@keyframes wdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .wd-tabs { overflow-x: auto; } .wd-tab { white-space: nowrap; padding: 10px 12px; } }
.wd-items h3 { min-height: 2.6em; }

/* ---------- Donations: tiers as rising steps ----------
   Each target is a column a little taller than the one before, the top one
   in white; under each reward, the ones it carries over with a +. */
.section-tiers { background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 75%); }
.fr-tiers-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.fr-tiers-head .section-title { margin: 0; }
.fr-tiers-head .section-intro { margin: 0; max-width: none; line-height: 1.75; opacity: .85; }
.fr-tiers { gap: 14px; background: none; border: 0; align-items: end; }
.fr-tier {
  min-height: calc(250px + var(--h, 0) * 52px);
  padding: 26px 22px; background: rgba(255, 255, 255, .06);
  border-top: 3px solid var(--blue-400); transition: background .3s var(--ease);
}
.fr-tier:hover { background: rgba(255, 255, 255, .1); }
.fr-tier-target { font-weight: 300; font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-bottom: 0; }
.fr-tier h3 { margin: 14px 0 8px; }
.fr-tier-earns { font-size: .92rem; opacity: 1; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.fr-tier-prev { list-style: none; margin: 12px 0 0; padding: 0; }
.fr-tier-prev li { position: relative; padding: 3px 0 3px 16px; font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.fr-tier-prev li::before { content: "+"; position: absolute; left: 0; color: var(--blue-400); font-weight: 700; }
.fr-tier:last-child { background: #fff; border-top-color: var(--blue-600); }
.fr-tier:last-child .fr-tier-target { color: var(--blue-600); }
.fr-tier:last-child h3, .fr-tier:last-child .fr-tier-earns { color: var(--ink); }
.fr-tier:last-child .fr-tier-earns { border-color: var(--blue-100); }
.fr-tier:last-child .fr-tier-prev li { color: var(--muted); }
.fr-tier:last-child .fr-tier-prev li::before { color: var(--blue-600); }
@media (max-width: 1000px) { .fr-tier { min-height: 0; } }
@media (max-width: 900px) { .fr-tiers-head { grid-template-columns: 1fr; } }
.fr-tier:first-child .fr-tier-earns { border-bottom: 0; }

/* ---------- Donations: the fundraising pack ----------
   The contents listed on the left; on the right, the pack spread out on the
   page like a product shot. Each piece (.k) is sized in cqw, so the whole
   arrangement scales with its column. */
.pa { background: #fff; overflow: hidden; }
.pa-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.pa-copy > p { color: var(--ink); line-height: 1.8; }
.pa-list { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.pa-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--ink); }
.pa-list svg { flex: none; color: var(--blue-600); margin-top: 1px; }
@media (max-width: 900px) {
  .pa-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pa-list { grid-template-columns: 1fr; }
}

.pa-pack { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.pa-pack .k {
  position: absolute; background: #fff;
  box-shadow: 0 .2cqw .3cqw rgba(4, 45, 98, .1), 0 1cqw 2cqw -.4cqw rgba(4, 45, 98, .16), 0 4cqw 7cqw -2.5cqw rgba(4, 45, 98, .32);
}
.pa-pack .k img { display: block; }
/* a faint sheen, so each piece reads as paper */
.pa-pack .k::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(4, 45, 98, .06)); }
.pa-pack .k-qrimg { width: 100%; height: auto; }
/* poster */
.k-poster { width: 44%; aspect-ratio: 1 / 1.414; padding: 2.2cqw; display: flex; flex-direction: column; }
.k-poster-ph { position: relative; flex: 1; overflow: hidden; }
.k-poster-ph > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.k-poster-ph .k-logo { position: absolute; left: 2.4cqw; top: 2.2cqw; width: 11cqw; height: auto; z-index: 1; }
.k-poster-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 45, 98, .35), transparent 30%, transparent 50%, rgba(4, 45, 98, .9)); }
.k-poster-h { position: absolute; z-index: 1; left: 2.4cqw; right: 2.4cqw; bottom: 2cqw; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 3.5cqw; line-height: 1.05; letter-spacing: -.01em; }
.k-poster-ft { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding-top: 1.8cqw; }
.k-poster-ft b { display: block; color: var(--navy-900); font-size: 1.7cqw; line-height: 1.2; }
.k-poster-ft span { display: block; margin-top: .4cqw; color: var(--blue-600); font-size: 1.15cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pa-pack .k-poster-ft .k-qrimg { width: 6.5cqw; height: 6.5cqw; flex: none; }
/* booklet: navy cover, a shaded spine and a few page edges */
.pa-pack .k-book {
  width: 31%; aspect-ratio: 1 / 1.32; background: var(--navy-900); display: flex; flex-direction: column;
  box-shadow: .5cqw .5cqw 0 -.1cqw #fff, .6cqw .6cqw 0 -.1cqw #d5dfea, 1cqw 1cqw 0 -.2cqw #fff, 1.1cqw 1.1cqw 0 -.2cqw #c9d5e3,
              0 1cqw 2cqw -.4cqw rgba(4, 45, 98, .2), 0 4cqw 7cqw -2.5cqw rgba(4, 45, 98, .4);
}
.k-book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.2cqw; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .12) 40%, rgba(0, 0, 0, .15) 55%, transparent); }
.k-book-top { padding: 3cqw 3cqw 2cqw 4.2cqw; }
.k-book-top .k-logo { width: 10cqw; height: auto; }
.k-book-k { margin: 2.6cqw 0 .8cqw; color: var(--blue-200); font-size: 1.05cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.k-book-h { margin: 0; color: #fff; font-family: var(--font-display); font-size: 2.9cqw; line-height: 1.1; font-weight: 700; }
.k-book-ph { flex: 1; overflow: hidden; }
.k-book-ph img { width: 100%; height: 100%; object-fit: cover; }
/* social post */
.k-post { width: 30%; }
.k-post-ph { position: relative; aspect-ratio: 1; overflow: hidden; }
.k-post-ph img { width: 100%; height: 100%; object-fit: cover; }
.k-post-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(4, 45, 98, .85)); }
.k-post-h { position: absolute; z-index: 1; left: 2cqw; right: 2cqw; bottom: 1.8cqw; margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.9cqw; line-height: 1.15; }
.k-post-h small { display: block; margin-bottom: .6cqw; font-size: 1cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-200); }
.k-post-bar { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 1.8cqw; }
.k-post-bar .k-logo { width: 8cqw; height: auto; }
.k-post-bar span { font-size: 1.15cqw; font-weight: 700; color: var(--blue-600); letter-spacing: .04em; }
/* QR card */
.k-qr { width: 17%; padding: 1.8cqw 1.8cqw 1.4cqw; text-align: center; }
.k-qr span { display: block; margin-top: 1cqw; font-size: 1cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-900); }
/* photo prints */
.k-print { width: 21%; padding: 1.1cqw 1.1cqw 3.2cqw; }
.k-print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* logo card */
.k-brand { width: 27%; aspect-ratio: 1.6; display: grid; grid-template-columns: 1fr 1fr; }
.k-brand-n { background: var(--navy-900); display: grid; place-items: center; }
.k-brand .k-logo { width: 75%; height: auto; }
.k-brand-w { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; }
.k-brand-w p { margin: 0; display: flex; gap: .7cqw; }
.k-brand-w i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; }
/* where the money goes */
.k-guide { width: 20%; aspect-ratio: 1 / 1.3; padding: 2cqw; }
.k-guide-k { margin: 0 0 1.6cqw; font-size: 1cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-900); line-height: 1.4; }
.k-donut { display: block; width: 9cqw; height: 9cqw; margin: 0 auto 1.8cqw; border-radius: 50%; background: radial-gradient(circle, #fff 52%, transparent 53%), conic-gradient(var(--navy-900) 0 38%, var(--blue-600) 0 64%, var(--blue-400) 0 84%, var(--blue-100) 0); }
.k-guide i { display: block; height: .55cqw; margin-top: .9cqw; background: var(--blue-100); }
.k-guide i:nth-of-type(2) { width: 80%; }
.k-guide i:nth-of-type(3) { width: 60%; }
/* where each piece lies */
.pk-1 { left: 3%; top: 5%; transform: rotate(-5deg); z-index: 2; }
.pk-2 { right: 1%; top: 1%; transform: rotate(4deg); z-index: 3; }
.pk-3 { left: 43%; top: 37%; transform: rotate(2.5deg); z-index: 4; }
.pk-4 { left: 1%; bottom: 4%; transform: rotate(-9deg); z-index: 5; }
.pk-5 { left: 14%; bottom: 1%; width: 19%; transform: rotate(5deg); z-index: 6; }
.pk-6 { left: 38%; bottom: 5%; transform: rotate(-3deg); z-index: 7; }
.pk-7 { right: 4%; bottom: 9%; transform: rotate(6deg); z-index: 8; }
.pk-8 { right: 1%; top: 43%; transform: rotate(-4deg); z-index: 2; }
/* Your fundraiser: keep the heading to two lines and the photo a little narrower */
.fz-grid { grid-template-columns: .95fr 1.05fr; }
.fz-copy .section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.nowrap { white-space: nowrap; }

/* ---------- Donations: every contribution becomes part of something bigger ----------
   A wall of small photographs under a navy tint, the words on a navy card. */
.cbb { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); }
.cbb-wall {
  position: absolute; inset: -4px; z-index: -2;
  display: grid; grid-template-columns: repeat(10, 1fr); align-content: start; gap: 4px;
}
.cbb-wall img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cbb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4, 45, 98, .78); }
.cbb-panel {
  max-width: 720px; margin: 0 auto; padding: clamp(32px, 4vw, 56px);
  background: var(--navy-900); border-top: 3px solid var(--blue-400); color: #fff; text-align: center;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.cbb-panel h2 { margin: 0 0 22px; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; color: #fff; text-wrap: balance; }
.cbb-panel p { margin: 0; color: rgba(255, 255, 255, .9); line-height: 1.8; }
.cbb-panel p + p { margin-top: 1em; }
@media (max-width: 900px) { .cbb-wall { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) { .cbb-wall { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Donations: Fundraise for SORCE ----------
   A navy band with the heading and a wall of ideas in mixed sizes and blues;
   the four ways as photo cards, each icon in a white circle on the photo's
   edge, overlapping the band's lower edge. */
.fw { background: #fff; padding-bottom: clamp(60px, 7vw, 100px); }
.fw-band { background: linear-gradient(160deg, var(--navy-900), var(--navy-800) 75%); padding: clamp(70px, 8vw, 110px) 0 clamp(150px, 14vw, 190px); }
.fw-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.fw-top .section-title { margin: 0 0 16px; }
.fw-top p:not(.eyebrow):not(.fw-ideas) { margin: 0; color: rgba(255, 255, 255, .85); line-height: 1.8; }
/* Ideas to get you started: one quiet run of plain text, a small starfish
   between each. Hidden on a phone, where the cards below already list them. */
.fw-ideas { margin: 0; max-width: 520px; font-weight: 600; line-height: 2; }
.fw-ideas::before {
  content: "Ideas to get you started"; display: block; margin-bottom: 6px;
  font-size: .74rem; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200);
}
.fw-ideas span { white-space: nowrap; font-size: 1rem; color: rgba(255, 255, 255, .9); }
.fw-ideas span:not(:last-child)::after {
  content: ""; display: inline-block; width: 13px; height: 13px; margin: 0 10px 0 12px; vertical-align: -1px;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}
.fw-cards { list-style: none; margin: calc(-1 * clamp(100px, 10vw, 130px)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fw-card { position: relative; background: #fff; border-bottom: 3px solid var(--blue-400); box-shadow: 0 30px 60px -40px rgba(4, 45, 98, .5); }
.fw-card figure { margin: 0; overflow: hidden; }
.fw-card figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fw-ico { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 22px; background: #fff; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(4, 45, 98, .45); }
.fw-ico img { width: 44px; height: 44px; object-fit: contain; }
.fw-card > div { padding: 14px 24px 28px; }
.fw-card h3 { margin: 0 0 .45em; font-size: 1.1rem; color: var(--ink); }
.fw-card p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--muted); }
.fw-work { max-width: 640px; margin: clamp(30px, 4vw, 44px) auto 0; text-align: center; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .fw-top { grid-template-columns: 1fr; } .fw-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fw-cards { grid-template-columns: 1fr; } }

/* ---------- Donations: Your fundraiser, as a list ----------
   The heading and photograph on a pale panel at the left; the steps on the
   right, each icon in a pale circle with its number in a navy badge. */
.fz2 { background: #fff; position: relative; }
.fz2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: var(--shell); }
.fz2 .wrap { position: relative; }
.fz2-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.fz2-title { margin: 0 0 28px; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.01em; color: var(--navy-900); }
.fz2 .fz-media { position: relative; padding-bottom: 70px; }
.fz2-list { list-style: none; margin: 0; padding: 0; }
.fz2-list li { display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: start; padding: 24px 0; border-top: 1px solid var(--blue-100); }
.fz2-list li:last-child { border-bottom: 1px solid var(--blue-100); }
.fz2-ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--shell); }
.fz2-ico img { width: 46px; height: 46px; object-fit: contain; }
.fz2-ico b { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: .78rem; font-weight: 700; box-shadow: 0 0 0 3px #fff; }
.fz2-list h3 { margin: 6px 0 6px; font-size: 1.15rem; color: var(--ink); }
.fz2-list p { margin: 0; color: var(--muted); line-height: 1.65; font-size: .95rem; }
@media (max-width: 900px) { .fz2-grid { grid-template-columns: 1fr; } .fz2::before { width: 100%; bottom: auto; height: 46%; } }
/* Your fundraiser: two blues - the palest across the section, a deeper wash behind the photo */
.fz2 { background: var(--shell); }
.fz2::before { background: var(--blue-200); opacity: .55; }
.fz2-ico { background: #fff; box-shadow: 0 8px 20px -10px rgba(4, 45, 98, .35); }
.fz2-ico b { box-shadow: 0 0 0 3px var(--shell); }
.fz2-list li, .fz2-list li:last-child { border-color: rgba(4, 45, 98, .14); }

/* ---------- Pillar pages: the programmes, opened one at a time ----------
   Replaces the long alternating bands. An index of the programmes sits at
   the left; each programme is a photo strip with its title, headline figure
   and a +, which opens to the text, the list and the figures. */
.px-blocks.pxb { background: var(--shell); padding-bottom: clamp(60px, 7vw, 100px); }
.pb-grid { display: grid; grid-template-columns: 230px 1fr; gap: clamp(30px, 4vw, 60px); margin-top: clamp(30px, 4vw, 50px); align-items: start; }
.pb-idx { position: sticky; top: 110px; }
.pb-idx-k { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); }
.pb-idx ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid rgba(4, 45, 98, .12); }
.pb-idx a { display: flex; gap: 12px; padding: 10px 0 10px 18px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.pb-idx a span { color: var(--blue-600); font-weight: 700; font-size: .8rem; padding-top: 2px; }
.pb-idx a:hover, .pb-idx a.is-on { color: var(--navy-900); border-left-color: var(--navy-900); }
.pb-ent { background: #fff; margin-bottom: 14px; box-shadow: 0 30px 60px -45px rgba(4, 45, 98, .5); scroll-margin-top: 100px; }
.pb-head { position: relative; display: block; height: 150px; overflow: hidden; cursor: pointer; list-style: none; transition: height .4s var(--ease); }
.pb-head::-webkit-details-marker { display: none; }
.pb-ent[open] .pb-head { height: 260px; }
.pb-img, .pb-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pb-img img { object-fit: cover; }
.pb-cap {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 96px 20px 32px; color: #fff;
  background: linear-gradient(90deg, rgba(4, 45, 98, .92), rgba(4, 45, 98, .55) 60%, rgba(4, 45, 98, .2));
}
.pb-k { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200); }
.pb-title { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; color: #fff; }
.pb-fig { display: block; margin-top: 6px; font-size: .85rem; color: rgba(255, 255, 255, .8); }
.pb-fig b { font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.pb-ent[open] .pb-fig { display: none; }
.pb-plus { position: absolute; right: 28px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); transition: background .2s; }
.pb-plus::before, .pb-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--navy-900); transition: transform .3s var(--ease); }
.pb-plus::after { transform: rotate(90deg); }
.pb-ent[open] .pb-plus::after { transform: rotate(0); }
.pb-head:hover .pb-plus { background: var(--blue-100); }
.pb-head:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }
.pb-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; padding: 28px 32px 8px; }
.pb-body-solo { grid-template-columns: 1fr; }
.pb-body-solo .pb-copy { max-width: 72ch; }
.pb-copy p { margin: 0 0 .9em; color: var(--ink); line-height: 1.75; }
.pb-side .px-list-head { margin-top: 4px; }
.pb-stats { margin-top: 14px; padding: 18px 32px 26px; border-top: 1px solid var(--blue-100); }
.pb-stats .px-stats { margin: 0; }
@media (max-width: 900px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-idx { display: none; }
  .pb-body { grid-template-columns: 1fr; padding: 22px 22px 4px; }
  .pb-stats { padding: 16px 22px 22px; }
  .pb-cap { padding: 16px 76px 16px 22px; }
  .pb-plus { right: 18px; }
  .pb-head { height: 140px; }
  .pb-ent[open] .pb-head { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .pb-head, .pb-plus::after { transition: none; } }

/* ---------- Research: where it leads ----------
   "From data to output" and the loop, merged: the heading beside the two
   routes beyond the field centre, then the loop. White, with the reef. */
.px-cycle.px-leads { background: var(--paper); }
.ld-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: start; margin-bottom: clamp(10px, 2vw, 20px); }
.ld-top .section-title { margin: 0 0 16px; }
.ld-intro { margin: 0; color: var(--ink); line-height: 1.8; }
.ld-routes { border-left: 2px solid var(--blue-100); padding-left: clamp(24px, 3vw, 40px); }
.ld-k { margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-600); }
.ld-route + .ld-route { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--blue-100); }
.ld-route h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 1.08rem; color: var(--navy-900); }
.ld-route h3 img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ld-route p { margin: 0 0 10px; color: var(--muted); line-height: 1.65; font-size: .93rem; }
.ld-link { display: inline-block; padding-bottom: 2px; border-bottom: 2px solid var(--blue-200); font-size: .92rem; font-weight: 700; color: var(--blue-600); text-decoration: none; }
.ld-link:hover { border-color: var(--blue-600); }
@media (max-width: 900px) { .ld-top { grid-template-columns: 1fr; } .ld-routes { border-left: 0; padding-left: 0; } }

/* ---------- Research: technology in the field, as a spec sheet ----------
   Heading and a photograph on the left; the methods on the right, name and
   explanation side by side, under their three stages. No boxes, so stages
   of different lengths leave no gaps. */
.tk-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.tk-l .section-title { margin: 0 0 14px; }
.tk-intro { margin: 0 0 28px; color: rgba(255, 255, 255, .88); line-height: 1.75; }
.tk-photo { margin: 0; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .6); }
.tk-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tk-g + .tk-g { margin-top: 30px; }
.tk-gh { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tk-gh h3 { margin: 0; color: #fff; font-size: 1.2rem; }
.tk-ring { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); }
.tk-ring svg { width: 24px; height: 24px; fill: none; stroke: var(--blue-200); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-g dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; }
.tk-g dt, .tk-g dd { margin: 0; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.tk-g dt { padding-right: 16px; color: #fff; font-weight: 700; }
.tk-g dd { color: rgba(255, 255, 255, .78); font-size: .92rem; line-height: 1.55; }
.tk-note { margin: 30px 0 0; color: rgba(255, 255, 255, .8); line-height: 1.7; font-size: .95rem; }
@media (max-width: 900px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-photo img { aspect-ratio: 4 / 3; }
  .tk-g dl { grid-template-columns: 1fr; }
  .tk-g dd { padding-top: 0; border-top: 0; }
}

/* ---------- Research: technology in the field, over its photograph ----------
   The diver photograph fills the section and fades to navy; the three stages
   are separate glass cards over it. Within a card the methods share the row
   equally, so a stage of two or four leaves no gap. */
.px-tech.tf { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); padding: clamp(140px, 17vw, 250px) 0 clamp(70px, 8vw, 110px); }
.tf-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.tf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 45, 98, .75), rgba(4, 45, 98, .1) 60%),
    linear-gradient(180deg, rgba(4, 45, 98, 0) 0%, rgba(4, 45, 98, .1) 38%, rgba(4, 45, 98, .9) 62%, var(--navy-900) 100%);
}
.tf-head { max-width: 640px; margin-bottom: clamp(50px, 7vw, 90px); }
.tf-head .section-title { margin: 0 0 14px; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.tf-head p:not(.eyebrow) { margin: 0; color: rgba(255, 255, 255, .92); line-height: 1.75; font-size: 1.05rem; text-shadow: 0 1px 12px rgba(4, 45, 98, .6); }
.tf-card {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 30px 28px;
  display: grid; grid-template-columns: 250px 1fr; gap: clamp(24px, 3vw, 48px); align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6);
}
.tf-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--blue-400), transparent); }
.tf-stage { position: relative; display: flex; align-items: center; gap: 16px; }
.tf-stage h3 { margin: 0; color: #fff; font-size: 1.2rem; line-height: 1.25; }
.tf-ring {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blue-400), var(--blue-600) 70%);
  box-shadow: 0 0 0 6px rgba(67, 176, 241, .12), 0 12px 28px -10px rgba(67, 176, 241, .8);
}
.tf-ring svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tf-items { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.tf-items li { padding: 4px 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
.tf-items strong { display: block; margin-bottom: 6px; color: #fff; font-size: 1rem; line-height: 1.3; }
.tf-items span { display: block; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.55; }
.tf-note { max-width: 720px; margin: clamp(30px, 4vw, 48px) auto 0; text-align: center; color: rgba(255, 255, 255, .85); line-height: 1.7; }
@media (max-width: 900px) {
  .tf-card { grid-template-columns: 1fr; }
  .tf-items { grid-template-columns: 1fr; }
  .tf-items li { padding: 10px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}

/* ---------- Conservation: planting is the start ----------
   Plant, monitor, evaluate, expand or change: four discs on a dotted line. */
.cm-steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 680px; margin: clamp(28px, 3.5vw, 44px) auto clamp(26px, 3vw, 36px); padding: 0; }
.cm-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 30px; border-top: 2px dotted var(--blue-400); }
.cm-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cm-disc { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-200); box-shadow: 0 10px 24px -12px rgba(4, 45, 98, .45); }
.cm-disc svg { width: 26px; height: 26px; fill: none; stroke: var(--blue-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-steps b { font-size: .95rem; color: var(--navy-900); text-align: center; }
@media (max-width: 600px) { .cm-steps { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .cm-steps::before { display: none; } }

/* ---------- Conservation: take part ----------
   The five activities the copy names, as a captioned strip of photographs. */
.cm-reel { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: clamp(30px, 4vw, 48px) 0; padding: 0; }
.cm-reel li { position: relative; overflow: hidden; box-shadow: 0 24px 50px -32px rgba(4, 45, 98, .6); }
.cm-reel img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .8s var(--ease); }
.cm-reel li:hover img { transform: scale(1.05); }
.cm-reel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(4, 45, 98, .9)); color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.3; }
@media (max-width: 900px) { .cm-reel { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Conservation: the Marine Protected Area, over its photograph ---------- */
.px-mpa.mpa-photo { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(160px, 18vw, 260px); }
.mpa-photo-bg { position: absolute; left: 0; right: 0; top: 0; z-index: -2; width: 100%; height: 58%; object-fit: cover; object-position: 45% 50%; }
.mpa-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 45, 98, .05) 0%, rgba(4, 45, 98, .3) 22%, rgba(4, 45, 98, .9) 48%, var(--navy-900) 62%);
}
/* the heading lifted and the card dropped a little, so the turtle's head sits clear between them */
.mpa-photo .section-head { text-shadow: 0 2px 18px rgba(4, 45, 98, .6); transform: translateY(-22px); }
.mpa-photo .mpa-glass { margin-top: 22px; }
.mpa-glass {
  padding: clamp(28px, 3.5vw, 48px);
  background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14); border-top: 3px solid var(--blue-400);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}

/* two photographs side by side in a partner's "more" dialog */
.cxm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.cxm-pair .cxm-photo{margin:0}
.cxm-pair .cxm-photo img{aspect-ratio:4/3}
@media(max-width:560px){.cxm-pair{grid-template-columns:1fr}}

/* Remote volunteering: closed roles sit with the open ones, greyed out, with a Closed tag */
.rvx-card.is-closed { position: relative; filter: grayscale(1); opacity: .62; }
.rvx-card.is-closed:hover { opacity: .8; }
.rvx-closed-tag { position: absolute; top: 18px; right: 18px; padding: 4px 10px; background: var(--muted); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Remote volunteering: how to apply, under the roles */
.rvx-apply-how { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(36px, 4.4vw, 52px); padding: clamp(26px, 3.4vw, 44px); background: var(--shell); border-top: 3px solid var(--blue-400); }
.rvx-apply-how h3 { margin: 8px 0 12px; font-size: 1.3rem; color: var(--navy-900); }
.rvx-apply-how p { margin: 0; color: var(--ink); line-height: 1.7; }
.rvx-apply-how a { color: var(--accent-text); font-weight: 700; }
.rvx-apply-how ol { list-style: none; margin: 0; padding: 0; counter-reset: ah; }
.rvx-apply-how li { counter-increment: ah; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid rgba(4, 45, 98, .14); }
.rvx-apply-how li:first-child { border-top: 0; padding-top: 0; }
.rvx-apply-how li::before { content: counter(ah); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy-900); color: #fff; font-weight: 700; font-size: .9rem; }
.rvx-apply-how li b { color: var(--navy-900); }
.rvx-apply-how li span { color: var(--muted); font-size: .93rem; line-height: 1.55; }
.rvx-m-how { margin: 14px 0 0; flex-basis: 100%; font-size: .88rem; color: var(--muted); line-height: 1.6; }
.rvx-m-how a { color: var(--accent-text); font-weight: 700; }
@media (max-width: 860px) { .rvx-apply-how { grid-template-columns: 1fr; } }

/* how to apply, restyled: a navy panel with the address, beside the three things to send */
.rvx-apply-how { display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; padding: 0; background: #fff; border-top: 0; box-shadow: 0 30px 60px -38px rgba(4, 45, 98, .5); overflow: hidden; }
.rvx-apply-how .ah-l { position: relative; padding: clamp(30px, 3.6vw, 48px); background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); color: #fff; }
.rvx-apply-how .ah-l .sv-label { color: var(--blue-200); }
.rvx-apply-how .ah-l h3 { margin: 8px 0 12px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2; color: #fff; }
.rvx-apply-how .ah-l p { color: rgba(255, 255, 255, .86); }
.ah-env { position: absolute; right: clamp(24px, 3vw, 40px); top: clamp(24px, 3vw, 40px); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); }
.ah-env svg { width: 26px; height: 26px; fill: none; stroke: var(--blue-200); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rvx-apply-how .ah-mail { display: inline-block; margin-top: 20px; padding: 13px 22px; background: #fff; color: var(--navy-900); font-weight: 700; text-decoration: none; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); transition: transform .2s var(--ease), background .2s; }
.rvx-apply-how .ah-mail:hover { transform: translateY(-2px); background: var(--blue-100); }
.rvx-apply-how .ah-r { list-style: none; margin: 0; padding: clamp(22px, 3vw, 40px) clamp(26px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.rvx-apply-how .ah-r li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--blue-100); }
.rvx-apply-how .ah-r li:first-child { border-top: 0; }
.rvx-apply-how .ah-r li::before { content: none; }
.ah-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--shell); }
.ah-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--blue-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rvx-apply-how .ah-r b { display: block; margin-bottom: 3px; color: var(--navy-900); font-size: 1.05rem; }
.rvx-apply-how .ah-r span:not(.ah-ico) { color: var(--muted); font-size: .93rem; line-height: 1.55; }
@media (max-width: 860px) { .rvx-apply-how { grid-template-columns: 1fr; } }
.rvx-apply-how { align-items: stretch; }
.ah-env { position: static; margin-bottom: 18px; }

/* CSR: "Funding can support" as a plain two-column list with the starfish, not boxed tags */
.cb-tags { list-style: none; margin: 0 0 18px; padding: 0; display: block; columns: 2; column-gap: 28px; }
.cb-tags li { position: relative; break-inside: avoid; margin: 0; padding: 0 0 9px 26px; background: none; border: 0; color: var(--ink); font-size: .93rem; line-height: 1.45; }
.cb-tags li::before { content: ""; position: absolute; left: 0; top: .12em; width: 16px; height: 16px; background: url("../assets/icons/starfish.svg") center / contain no-repeat; }

/* CSR evidence: what partners receive, grouped by level on glass panels */
.eva-side .cb-ev-h { margin-bottom: 16px; }
.eva-tier { position: relative; margin-bottom: 12px; padding: 20px 22px 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid var(--blue-400); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.eva-t1 { background: rgba(255, 255, 255, .09); }
.eva-t2 { background: rgba(255, 255, 255, .13); border-left-color: #fff; }
.eva-k { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200); }
.eva-k span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-400); color: var(--navy-900); font-size: .75rem; letter-spacing: 0; }
.eva-tier ul { list-style: none; margin: 0; padding: 0; }
.eva-tier li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; line-height: 1.45; }
.eva-tier li:first-child { border-top: 0; }
.eva-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.eva-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-200); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eva-t3 { background: rgba(255, 255, 255, .16); border-left-color: #fff; }

/* CSR: the monthly giving line under the ladder */
.cb-monthly { margin: clamp(22px, 2.6vw, 30px) auto 0; max-width: 760px; text-align: center; color: var(--ink); line-height: 1.7; }
.cb-monthly a { display: inline-block; margin-left: 4px; font-weight: 700; color: var(--accent-text); text-decoration: none; border-bottom: 2px solid var(--blue-200); }
.cb-monthly a:hover { border-color: var(--accent-text); }

/* CSR: Major Project Funding as a navy feature strip, and monthly giving as a quiet row under it */
.cb-major { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-900), var(--navy-800) 65%, var(--blue-600)); border-left: 0; color: #fff; box-shadow: 0 34px 70px -40px rgba(4, 45, 98, .7); }
.cb-major::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(67, 176, 241, .28), transparent 70%); pointer-events: none; }
.cb-major > * { position: relative; z-index: 1; }
.cb-major-h { padding-right: clamp(18px, 2.6vw, 36px); border-right: 1px solid rgba(255, 255, 255, .18); }
.cb-major-k { color: var(--blue-200); }
.cb-major .cb-range { color: #fff; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 300; line-height: 1; margin: 6px 0 4px; }
.cb-major .cb-range small { color: var(--blue-200); }
.cb-major h3 { color: #fff; font-size: 1.15rem; }
.cb-major-b p { color: rgba(255, 255, 255, .9); }
.cb-major-list li { color: rgba(255, 255, 255, .8); padding-left: 24px; }
.cb-major-list li::before { width: 14px; height: 14px; top: .2em; background: url("../assets/icons/starfish.svg") center / contain no-repeat; }
.cb-major .btn { background: #fff; color: var(--navy-900); border-color: #fff; }
.cb-major .btn:hover { background: var(--blue-100); border-color: var(--blue-100); color: var(--navy-900); }
.cb-monthly { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; max-width: none; margin: 14px 0 0; padding: 18px clamp(22px, 3vw, 38px); background: #fff; border: 1px solid var(--blue-100); text-align: left; }
.cb-monthly p { margin: 0; color: var(--ink); line-height: 1.6; }
.cb-monthly b { color: var(--navy-900); }
.cb-monthly-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--shell); }
.cb-monthly-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--blue-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cb-monthly a { margin: 0; white-space: nowrap; }
@media (max-width: 860px) { .cb-major-h { border-right: 0; padding-right: 0; } .cb-monthly { grid-template-columns: auto 1fr; } .cb-monthly a { grid-column: 1 / -1; white-space: normal; } }

/* CSR evidence: each level opens and closes, one at a time, so the column stays in step with the copy */
details.eva-tier { padding: 0 22px; }
.eva-tier > summary.eva-k { list-style: none; cursor: pointer; margin: 0; padding: 18px 40px 18px 0; position: relative; }
.eva-tier > summary.eva-k::-webkit-details-marker { display: none; }
.eva-k small { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: none; color: rgba(255, 255, 255, .55); }
.eva-plus { position: absolute; right: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); }
.eva-plus::before, .eva-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: #fff; transition: transform .3s var(--ease); }
.eva-plus::after { transform: rotate(90deg); }
.eva-tier[open] .eva-plus::after { transform: rotate(0); }
.eva-tier > summary.eva-k:hover .eva-plus { background: rgba(255, 255, 255, .12); }
.eva-tier > summary.eva-k:focus-visible { outline: 2px solid var(--blue-200); outline-offset: 4px; }
.eva-tier[open] ul { padding-bottom: 10px; }
.eva-tier ul li:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }

/* CSR evidence: each level is a photo strip that opens, like the programme strips on the pillar pages */
details.eva-tier { padding: 0; overflow: hidden; border-left: 0; }
.eva-tier > summary.eva-k { position: relative; display: block; height: 92px; padding: 0; overflow: hidden; transition: height .4s var(--ease); }
.eva-tier[open] > summary.eva-k { height: 132px; }
.eva-img, .eva-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.eva-img img { object-fit: cover; }
.eva-cap { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 64px 0 22px; background: linear-gradient(90deg, rgba(4, 45, 98, .92), rgba(4, 45, 98, .6) 60%, rgba(4, 45, 98, .25)); }
.eva-tier[open] .eva-cap { align-items: flex-end; padding-bottom: 18px; }
.eva-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-400); color: var(--navy-900); font-size: .78rem; letter-spacing: 0; }
.eva-name { color: #fff; font-size: .82rem; letter-spacing: .16em; }
.eva-cap small { margin-left: auto; color: rgba(255, 255, 255, .7); }
.eva-plus { right: 20px; z-index: 1; background: rgba(4, 45, 98, .35); border-color: rgba(255, 255, 255, .5); }
.eva-tier[open] .eva-plus { top: auto; bottom: 18px; margin-top: 0; }
.eva-tier ul { padding: 0 22px; }
.eva-tier ul li:first-child { border-top: 0; }
.eva-tier[open] ul { padding-top: 6px; padding-bottom: 10px; }
/* undo the older number-badge rule for the new spans inside the strip */
.eva-tier > summary.eva-k > span.eva-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; background: none; }
.eva-tier > summary.eva-k > span.eva-cap { position: absolute; inset: 0; display: flex; width: auto; height: auto; border-radius: 0; background: linear-gradient(90deg, rgba(4, 45, 98, .92), rgba(4, 45, 98, .6) 60%, rgba(4, 45, 98, .25)); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eva-cap > span.eva-name { display: inline; width: auto; height: auto; background: none; color: #fff; border-radius: 0; }
.eva-cap > span.eva-n { display: grid; width: 26px; height: 26px; }
.eva-tier > summary.eva-k { height: 76px; }
.eva-tier[open] > summary.eva-k { height: 108px; }
/* taller strips: all four closed now roughly match the copy beside them, and show more of each photo */
.eva-tier > summary.eva-k { height: 112px; }
.eva-tier[open] > summary.eva-k { height: 140px; }

/* CSR: "Something bigger?" as a finished card, not a dashed empty slot */
.ca-join.cb-bigger { align-items: flex-start; gap: 18px; padding: 20px 22px; background: #fff; border: 0; border-left: 3px solid var(--navy-900); box-shadow: 0 24px 50px -36px rgba(4, 45, 98, .55); color: var(--muted); }
.ca-join.cb-bigger:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 30px 56px -34px rgba(4, 45, 98, .6); }
.cb-bigger { transition: transform .25s var(--ease), box-shadow .25s; }
.cb-bigger-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--navy-900); }
.cb-bigger-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cb-bigger-t em { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--accent-text); }
.cb-bigger:hover .cb-bigger-t em { text-decoration: underline; }

/* CSR: "Look at the work before you fund it" as a navy card with three link rows */
.sv-ask.cb-ask { background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 75%, var(--blue-600)); border-top: 0; color: #fff; box-shadow: 0 30px 60px -38px rgba(4, 45, 98, .7); }
.cb-ask .sv-ask-h { color: #fff; }
.cb-ask > p:not(.sv-ask-h) { color: rgba(255, 255, 255, .82); }
.cb-ask-links { list-style: none; margin: 16px 0 0; padding: 0; }
.cb-ask-links li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
.cb-ask-links a { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; color: #fff; text-decoration: none; }
.cb-ask-links a span:not(.cb-ask-ico) { font-weight: 700; line-height: 1.3; }
.cb-ask-links small { display: block; margin-top: 2px; font-weight: 400; font-size: .82rem; color: rgba(255, 255, 255, .65); }
.cb-ask-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.cb-ask-ico svg { width: 19px; height: 19px; fill: none; stroke: var(--blue-200); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cb-ask-links i { font-style: normal; color: var(--blue-200); transition: transform .2s var(--ease); }
.cb-ask-links a:hover i { transform: translateX(4px); }
.cb-ask-links a:hover .cb-ask-ico { background: rgba(255, 255, 255, .2); }
/* compact, so the column sits level with "What partners can expect" */
.sv-ask.cb-ask { padding: 20px 22px; }
.cb-ask-links { margin-top: 10px; }
.cb-ask-links a { grid-template-columns: 32px 1fr auto; gap: 12px; padding: 8px 0; }
.cb-ask-ico { width: 32px; height: 32px; }
.cb-ask-ico svg { width: 16px; height: 16px; }
/* CSR band: a tighter index, and the three links side by side, so both columns end level */
.cb-band-r .sv-index { margin-bottom: 16px; }
.cb-band-r .sv-index a { padding: 7px 0; }
.cb-ask-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.cb-ask-links li + li { border-top: 0; }
.cb-ask-links a { grid-template-columns: 1fr; justify-items: start; gap: 8px; height: 100%; padding: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; }
.cb-ask-links a:hover { background: rgba(255, 255, 255, .14); }
.cb-ask-links i { display: none; }
.sv-ask.cb-ask > p:not(.sv-ask-h) { margin-bottom: 12px; }
@media (max-width: 560px) { .cb-ask-links { grid-template-columns: 1fr; } }
.cb-band-r .sv-index a { padding: 10px 0; }
.sv-ask.cb-ask .sv-ask-h { margin-bottom: 14px; }
/* back to rows with a description each; kept compact so the band stays level */
.cb-ask-links { display: block; margin-top: 0; }
.cb-ask-links li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
.cb-ask-links a { grid-template-columns: 34px 1fr auto; justify-items: stretch; gap: 12px; height: auto; padding: 9px 0; background: none; border: 0; font-size: 1rem; }
.cb-ask-links a:hover { background: none; }
.cb-ask-links i { display: inline; }
.cb-ask-ico { width: 34px; height: 34px; }
.sv-ask.cb-ask .sv-ask-h { margin-bottom: 6px; }
.cb-band-r .sv-index a { padding: 6px 0; }
.cb-band-r .sv-index { margin-bottom: 14px; }
.sv-ask.cb-ask { padding: 14px 22px 13px; }
/* "Look at the work": white card on the pale band, rows in navy and blue */
.sv-ask.cb-ask { background: #fff; border-top: 3px solid var(--navy-900); color: var(--ink); box-shadow: 0 24px 50px -36px rgba(4, 45, 98, .45); }
.cb-ask .sv-ask-h { color: var(--ink); }
.cb-ask-links li + li { border-top: 1px solid var(--blue-100); }
.cb-ask-links a { color: var(--navy-900); }
.cb-ask-links small { color: var(--muted); }
.cb-ask-ico { background: var(--shell); }
.cb-ask-ico svg { stroke: var(--blue-600); }
.cb-ask-links i { color: var(--blue-600); }
.cb-ask-links a:hover .cb-ask-ico { background: var(--blue-100); }

/* CSR: the closing section uses the same blue as the closing band on every other page */
.px-callout.cb-closing {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(67, 176, 241, .30), transparent 60%),
    linear-gradient(120deg, var(--accent), var(--blue-600) 55%, var(--navy-800));
}

/* ---------- Support: where your donation goes ----------
   Heading centred, the four areas side by side, then two notes. */
.sw { background: #fff; }
.sw-head { max-width: 760px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.sw-head .section-title { margin: 0 0 14px; }
.sw-head p { margin: 0; color: var(--ink); line-height: 1.8; }
.sw-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sw-tiles li { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 18px; background: var(--shell); border-top: 3px solid var(--blue-400); text-align: center; }
.sw-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.sw-ico img { width: 42px; height: 42px; object-fit: contain; }
.sw-tiles h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; color: var(--navy-900); }
.sw-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sw-note { padding: 24px 26px; background: var(--navy-900); color: #fff; }
.sw-note p:last-child { margin: 0; color: rgba(255, 255, 255, .88); line-height: 1.65; }
.sw-k { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-200); }
.sw-rep { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding: 24px 26px; border: 1px solid var(--blue-100); }
.sw-rep img { width: 64px; height: 64px; object-fit: contain; }
.sw-rep .sw-k { color: var(--blue-600); }
.sw-rep p:not(.sw-k) { margin: 0 0 14px; color: var(--ink); line-height: 1.6; }
@media (max-width: 900px) { .sw-tiles { grid-template-columns: 1fr 1fr; } .sw-foot { grid-template-columns: 1fr; } }
/* Support: the four areas as raised cards rather than flat tiles */
.sw-tiles li { position: relative; gap: 16px; padding: 30px 20px 26px; background: #fff; border-top: 0; box-shadow: 0 2px 4px rgba(4, 45, 98, .05), 0 22px 44px -28px rgba(4, 45, 98, .45); transition: transform .3s var(--ease), box-shadow .3s; }
.sw-tiles li::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; height: 3px; margin-left: -22px; background: var(--blue-400); transition: width .3s var(--ease), margin .3s var(--ease); }
.sw-tiles li:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(4, 45, 98, .05), 0 30px 54px -28px rgba(4, 45, 98, .5); }
.sw-tiles li:hover::after { width: 88px; margin-left: -44px; }
.sw-ico { width: 78px; height: 78px; background: radial-gradient(circle at 35% 30%, #fff, var(--shell) 75%); box-shadow: 0 0 0 6px rgba(182, 224, 255, .45); }
.sw-ico img { width: 48px; height: 48px; }
.sw-tiles h3 { font-size: 1.04rem; }
/* give each card a clear edge all the way round, not just a shadow underneath */
.sw-tiles li { border: 1px solid var(--blue-100); box-shadow: 0 0 0 1px rgba(4, 45, 98, .02), 0 10px 30px -14px rgba(4, 45, 98, .28); }
.sw-tiles li:hover { box-shadow: 0 0 0 1px rgba(4, 45, 98, .03), 0 18px 40px -16px rgba(4, 45, 98, .36); }
/* edge from an all-round drop shadow, not an outline */
.sw-tiles li { border: 0; box-shadow: 0 0 18px rgba(4, 45, 98, .10), 0 12px 30px -12px rgba(4, 45, 98, .28); }
.sw-tiles li:hover { box-shadow: 0 0 22px rgba(4, 45, 98, .12), 0 18px 40px -14px rgba(4, 45, 98, .34); }

/* ---------- Support: why it matters, polished ----------
   Starfish bullets; the card lifted on a soft shadow with a navy band at the
   top; the second paragraph set as the section's key line. */
.sp-why-card { position: relative; border: 0; border-top: 0; padding: 0; background: #fff; box-shadow: 0 0 18px rgba(4, 45, 98, .08), 0 30px 60px -34px rgba(4, 45, 98, .5); overflow: hidden; }
.sp-why-card h3 { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px clamp(24px, 3vw, 32px); background: linear-gradient(135deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); color: #fff; letter-spacing: .14em; }
.sp-why-card h3::before { content: ""; flex: none; width: 22px; height: 22px; background: url("../assets/icons/starfish.svg") center / contain no-repeat; }
.sp-why-list { margin: 0; padding: 20px clamp(24px, 3vw, 32px) 4px; }
.sp-why-list li { padding: 0 0 .85em 32px; margin-bottom: .85em; border-bottom-color: var(--blue-100); }
.sp-why-list li::before { left: 0; top: .1em; width: 20px; height: 20px; border: 0; transform: none; background: url("../assets/icons/starfish.svg") center / contain no-repeat; }
.sp-why-card .btn { display: block; width: auto; margin: 18px clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px); }
.sp-why-copy p + p { margin-top: 1.4em; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue-400); font-family: var(--font-display); font-size: 1.12rem; line-height: 1.65; color: var(--navy-900); }
/* softer card heading: pale blue band, navy text, instead of solid navy */
.sp-why-card h3 { background: var(--shell); color: var(--navy-900); border-bottom: 1px solid var(--blue-100); }
/* plain card heading: no band, no starfish */
.sp-why-card h3 { display: block; margin: 0; padding: 26px clamp(24px, 3vw, 32px) 0; background: none; border-bottom: 0; color: var(--accent-text); }
.sp-why-card h3::before { content: none; }
.sp-why-list { padding-top: 16px; }

/* Support routes: the icon in a white disc at the top of a slim column, not adrift in a tall panel */
.sp-route { grid-template-columns: 132px 1fr; }
.section-ways-dark .sp-route-mark { display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px, 2.8vw, 34px) 0 0 clamp(18px, 2.4vw, 28px); background: none; border-right: 0; }
.section-ways-dark .sp-route-mark img { width: 96px; height: 96px; padding: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 14px 30px -12px rgba(0, 0, 0, .5); }
@media (max-width: 720px) { .section-ways-dark .sp-route-mark { justify-content: flex-start; padding-bottom: 0; border-bottom: 0; } }
/* icon disc centred down the card's height, so the card balances */
.section-ways-dark .sp-route-mark { align-items: center; padding: 0 0 0 clamp(18px, 2.4vw, 28px); }
@media (max-width: 720px) { .section-ways-dark .sp-route-mark { align-items: flex-start; padding: clamp(22px, 2.8vw, 34px) 0 0 clamp(22px, 2.8vw, 34px); } }

/* Book: the two help cards, lifted on a soft shadow with an icon disc, like the Support cards */
.help-card { position: relative; border: 0; border-top: 0; background: #fff; box-shadow: 0 0 18px rgba(4, 45, 98, .08), 0 24px 50px -30px rgba(4, 45, 98, .45); padding-top: clamp(28px, 3vw, 40px); transition: transform .3s var(--ease), box-shadow .3s; }
.help-card::after { content: ""; position: absolute; left: clamp(28px, 3vw, 40px); bottom: 0; width: 56px; height: 3px; background: var(--blue-400); transition: width .3s var(--ease); }
.help-card:hover { transform: translateY(-3px); box-shadow: 0 0 22px rgba(4, 45, 98, .1), 0 30px 56px -30px rgba(4, 45, 98, .5); }
.help-card:hover::after { width: 110px; }
.help-ico { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--shell) 75%); box-shadow: 0 0 0 6px rgba(182, 224, 255, .45); }
.help-ico img { width: 46px; height: 46px; object-fit: contain; }
.help-card .eyebrow { color: var(--blue-600); }
/* Book help cards: compact, the icon beside the title */
.help-card { padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 32px); }
.help-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.help-ico { flex: none; width: 58px; height: 58px; margin: 0; box-shadow: 0 0 0 5px rgba(182, 224, 255, .45); }
.help-ico img { width: 36px; height: 36px; }
.help-top .eyebrow { margin: 0 0 4px; }
.help-top h2 { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.25; white-space: nowrap; }
.help-card p:not(.eyebrow) { margin: 0 0 18px; }
.help-card::after { left: clamp(24px, 2.6vw, 32px); }
@media (max-width: 1100px) { .help-top h2 { white-space: normal; } }
/* centre the accent line along the bottom of each help card */
.help-card::after { left: 50%; width: 56px; margin-left: -28px; transition: width .3s var(--ease), margin .3s var(--ease); }
.help-card:hover::after { width: 110px; margin-left: -55px; }
.help-card .btn { align-self: center; }

/* Book Now: the finishing touches. Soft all-round shadow instead of an outline,
   each motif in a pale disc, and a short accent line centred on the bottom edge,
   matching the help cards below. */
.book-card { position: relative; border: 0; box-shadow: 0 0 16px rgba(4, 45, 98, .07), 0 18px 40px -28px rgba(4, 45, 98, .4); }
.book-card:hover, .book-card:focus-within { border-color: transparent; box-shadow: 0 0 20px rgba(4, 45, 98, .09), 0 26px 50px -28px rgba(4, 45, 98, .48); }
.book-card::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; height: 3px; margin-left: -22px; background: var(--blue-400); transition: width .3s var(--ease), margin .3s var(--ease); }
.book-card:hover::after, .book-card:focus-within::after { width: 88px; margin-left: -44px; }
.book-head { align-items: center; gap: 14px; }
.book-icon { width: 50px; height: 50px; padding: 9px; margin: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--shell) 75%); box-shadow: 0 0 0 4px rgba(182, 224, 255, .45); }
.book-head h3 { min-height: 0; }
.book-head { min-height: 58px; }
/* motifs back to plain icons beside the title, no disc */
.book-icon { width: 34px; height: 34px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.book-head { min-height: 0; gap: 12px; }
.book-head h3 { min-height: 2.5em; display: flex; align-items: center; }

/* ---------- Field Sites: the sites we know best ---------- */
.section-divesites { background: var(--shell); }
.ds-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ds-card a { display: flex; flex-direction: column; height: 100%; background: #fff; text-decoration: none; color: inherit; box-shadow: 0 0 16px rgba(4, 45, 98, .07), 0 18px 40px -28px rgba(4, 45, 98, .4); transition: transform .25s var(--ease), box-shadow .25s; }
.ds-card a:hover { transform: translateY(-3px); box-shadow: 0 0 20px rgba(4, 45, 98, .09), 0 26px 50px -28px rgba(4, 45, 98, .48); }
.ds-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.ds-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ds-card a:hover .ds-img { transform: scale(1.04); }
.ds-nophoto { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, var(--blue-100), var(--blue-200)); }
.ds-nophoto svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ds-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.ds-body h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--navy-900); }
.ds-body p { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ds-more { margin-top: auto; font-weight: 700; font-size: .88rem; color: var(--accent-text); }
.ds-note { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; color: var(--ink); }
.ds-note a { font-weight: 700; color: var(--accent-text); text-decoration: none; border-bottom: 2px solid var(--blue-200); }
.ds-m-photo { margin: 0 0 18px; aspect-ratio: 16 / 9; overflow: hidden; }
.ds-m-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-m-body h3 { margin: 4px 0 12px; font-size: 1.5rem; color: var(--navy-900); }
.ds-m-body p { color: var(--ink); line-height: 1.7; }
.ds-k { margin: 18px 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.ds-m-body .ds-k:first-child { margin-top: 0; }
.ds-species { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 24px; }
.ds-species li { position: relative; break-inside: avoid; padding: 0 0 8px 26px; color: var(--ink); }
.ds-species li::before { content: ""; position: absolute; left: 0; top: .15em; width: 16px; height: 16px; background: url("../assets/icons/starfish.svg") center / contain no-repeat; }
@media (max-width: 1000px) { .ds-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ds-grid { grid-template-columns: 1fr 1fr; } .ds-species { columns: 1; } }
.ds-m { padding: clamp(22px, 3vw, 34px); }
.ds-m-photo { aspect-ratio: auto; height: clamp(180px, 26vw, 300px); }
.ds-m-photo .ds-nophoto { height: 100%; }
.ds-m-photo { display: grid; }

/* the route line, readable over the reef photograph */
.section-howsite .howsite-line path { stroke: #fff; stroke-width: 3.5; stroke-dasharray: .5 10; filter: drop-shadow(0 0 3px rgba(4, 45, 98, .9)); }
/* Five monthly amounts: Other takes one cell so 10/20/30 and 50/100/Other sit in two rows */
.dn-amounts .dn-other:nth-child(6) { grid-column: auto; }

/* About, "Our story": a wider timeline column and slightly tighter steps, so
   the timeline ends level with the story column beside it. */
.story-grid { grid-template-columns: .75fr 1.25fr; }
.story-grid .tl-item { padding-bottom: 17px; }
.story-grid .tl-item p { line-height: 1.55; }
.story-grid .tl-item:last-child { padding-bottom: 0; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }

.nobr { white-space: nowrap; }
.story-grid .story-close { padding-top: 44px; }

/* About, "Our story": each milestone shows its date and title, with its
   description's space kept free; clicking the milestone fills that space.
   Without JavaScript the descriptions simply show. */
.tl-toggle { display: inline-block; position: relative; padding: 0 30px 0 0; margin: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tl-toggle .tl-year { display: block; }
.tl-toggle .tl-h { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--navy-900); transition: color .18s var(--ease); }
.tl-toggle:hover .tl-h { color: var(--accent-text); }
.tl-toggle::after {
  content: ""; position: absolute; right: 4px; bottom: .55em; width: 8px; height: 8px;
  border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.tl-toggle[aria-expanded="true"]::after { transform: translateY(4px) rotate(-135deg); }
.tl-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.tl-body { margin: .4em 0 0; transition: opacity .3s var(--ease); }
.js-tl .tl-body { opacity: 0; visibility: hidden; }
.js-tl .tl-body.is-open { opacity: 1; visibility: visible; }
/* the line runs turtle to turtle and stops at the last one ("Today"), even
   when that milestone's description opens below it */
.tl-reveal::before { content: none; }
.tl-reveal .tl-item:not(:last-child)::after {
  content: ""; position: absolute; left: -37px; top: 8px; bottom: -25px;
  width: 2px; background: var(--blue-200); z-index: -1;
}
.tl-reveal .tl-item::before { z-index: 0; }
.tl-reveal { isolation: isolate; }
/* smaller arrow, tucked in beside the title */
.tl-toggle { padding-right: 18px; }
.tl-toggle::after { width: 6px; height: 6px; right: 4px; bottom: .62em; border-width: 0 1.5px 1.5px 0; }
.tl-toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
/* the heart of "Our story", lifted up under the section heading */
.story-soul {
  max-width: 62ch; margin: 30px auto 0; padding-top: 26px; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.38rem); line-height: 1.55;
  color: var(--navy-900); text-align: center;
}
.story-soul::before { content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 2px; margin-left: -18px; background: var(--blue-600); }
.story-grid > .story-copy { align-self: center; }
/* the arrow belongs to the title, so a long date above it can't push it away */
.tl-toggle { padding-right: 0; }
.tl-toggle::after { content: none; }
.tl-toggle .tl-h { display: inline-block; position: relative; padding-right: 16px; }
.tl-toggle .tl-h::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--accent-text); border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.tl-toggle[aria-expanded="true"] .tl-h::after { transform: translateY(3px) rotate(-135deg); }
.story-soul { padding-top: 0; }
.story-soul::before { content: none; }
/* the last milestone keeps no empty space: its description only takes room once opened */
.js-tl .tl-item:last-child .tl-body { display: none; }
.js-tl .tl-item:last-child .tl-body.is-open { display: block; }
/* each folded milestone keeps a modest gap; opening it takes the room it needs */
.js-tl .tl-body { max-height: 50px; overflow: hidden; }
.js-tl .tl-body.is-open { max-height: none; }

/* About, "Our story": the heart of the story beside a snapshot print */
.story-heart { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin: 0 0 clamp(48px, 6vw, 72px); }
.story-print { margin: 0 0 0 16px; background: #fff; padding: 12px 12px 40px; transform: rotate(-2deg);
  box-shadow: -16px 16px 0 0 var(--shell), 0 2px 4px rgba(4,45,98,.08), 0 26px 44px -22px rgba(4,45,98,.45); }
.story-print img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-heart p { margin: 0; font-family: var(--font-sans); font-weight: 400; font-style: italic;
  font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.7; color: var(--navy-800); }
@media (max-width: 900px) { .story-heart { grid-template-columns: 1fr; } .story-print { max-width: 460px; margin: 0 auto; } .story-heart p { text-align: center; } }

/* ---------- Remote Volunteering: who it is for + how it works ----------
   One white section: centred heading, a photo band carrying the second
   paragraph, then the three kinds of volunteer beside the year's five
   steps as a turtle timeline, each step numbered alike. */
.rvx-who.rvc { background: #fff; }
.rvc-head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.rvc-head .sv-label { justify-content: center; }
.rvc-head .rvx-title { margin-bottom: 18px; }
.rvc-head p:not(.sv-label) { margin: 0; color: var(--ink); line-height: 1.75; }
.rvc-band { position: relative; margin: 0; min-height: clamp(320px, 34vw, 420px); display: flex; align-items: center; overflow: hidden; }
.rvc-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rvc-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(4, 45, 98, .9), rgba(4, 45, 98, .66) 48%, rgba(4, 45, 98, .15) 85%); }
.rvc-band p { position: relative; z-index: 2; margin: 0; padding: clamp(28px, 4vw, 48px); max-width: min(31em, 48%); box-sizing: border-box; color: #fff; font-size: 1.15rem; line-height: 1.7; }
.rvc-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); margin-top: clamp(44px, 5vw, 64px); align-items: stretch; }
.rvc-sub { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.rvc-h { margin: 0 0 22px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--navy-900); }
.rvc-how { scroll-margin-top: 100px; }
.rvc-fit { display: flex; flex-direction: column; }
.fx-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.fx-card {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--blue-100); border-top: 3px solid var(--blue-400);
  padding: 16px 22px 14px; box-shadow: 0 22px 44px -30px rgba(4, 45, 98, .45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fx-card:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -28px rgba(4, 45, 98, .5); }
.fx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fx-ico { grid-row: 1 / span 2; width: 58px; height: 58px; object-fit: contain; }
.fx-body b { display: block; margin: 2px 0 8px; font-family: var(--font-display); font-size: 1.12rem; color: var(--navy-900); }
.fx-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fx-roles li { position: relative; padding-left: 22px; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.fx-roles li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 15px; height: 15px;
  background: no-repeat center / contain url("../assets/icons/starfish.svg");
}
.fx-roles em { font-style: normal; font-size: .84rem; color: var(--muted); }
.fx-go { grid-column: 2; margin-top: 12px; font-size: .84rem; font-weight: 700; color: var(--accent-text); }
.fx-go i { display: inline-block; font-style: normal; transition: transform .25s var(--ease); }
.fx-card:hover .fx-go i { transform: translateX(4px); }
.rvc-tl .tl-item { padding-bottom: 22px; }
.rvc-tl .tl-item:last-child { padding-bottom: 0; }
.rvc-tl .tl-item::before { background-color: #fff; }
.rvc-tl::before { top: 16px; bottom: auto; height: calc(100% - 90px); }
.rvc-tl .tl-year { display: flex; align-items: center; gap: 10px; }
.rvc-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--blue-600); font-size: .72rem; letter-spacing: 0; color: var(--blue-600);
}
.rvc-tl h4 { margin: 0 0 .25em; font-size: 1.08rem; color: var(--navy-900); }
.rvc-tl p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.6; }
@media (max-width: 900px) {
  .rvc-grid { grid-template-columns: minmax(0, 1fr); }
  .rvc-band p { max-width: none; font-size: 1.05rem; }
  .rvc-band::before { background: rgba(4, 45, 98, .75); }
}

/* Open remote roles, on navy */
.rvx-roles { background: linear-gradient(150deg, var(--navy-900), var(--navy-800) 70%, var(--blue-600)); color: #fff; }
.rvx-roles .rvx-terms { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.rvx-roles .rvx-terms > span { color: var(--blue-200); }
.rvx-roles .rvx-terms b + b::before { color: var(--blue-400); }
.rvx-roles .rvx-chip { border-color: rgba(255, 255, 255, .35); color: #fff; }
.rvx-roles .rvx-chip b { color: var(--blue-200); }
.rvx-roles .rvx-chip:hover { border-color: #fff; }
.rvx-roles .rvx-chip.is-on { background: #fff; border-color: #fff; color: var(--navy-900); }
.rvx-roles .rvx-chip.is-on b { color: var(--blue-600); }
.rvx-roles .rvx-chip:focus-visible { outline-color: #fff; }
.rvx-roles .rvx-card { border: 0; border-top: 3px solid var(--blue-400); }
.rvx-roles .rvx-card.is-closed { background: #fff; border-top-color: var(--line); opacity: .82; }
.rvx-roles .rvx-card.is-closed:hover { opacity: .92; }
.rvx-roles .rvx-none { background: rgba(255, 255, 255, .08); color: #fff; }
.rvx-roles .ah-l { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
/* the how-to-apply panel splits exactly at the centre of the gap between
   the two columns of role cards above it */
@media (min-width: 861px) {
  .rvx-roles .rvx-apply-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
}
.rvx-roles .rvx-intro { max-width: none; }

/* Engage your team: the illustrated icons, each in a white circle so they
   stand clear of the pale blue */
.cb-ways li { grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; }
.cb-way-ico { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 10px 22px -16px rgba(4, 45, 98, .45); }
.cb-way-ico img { width: 44px; height: 44px; object-fit: contain; }

/* ---------- Photo with a lifted card ("G") ----------
   Centred heading, a wide photograph across two thirds of the width, and a
   white card lifted over its lower right corner. Used for Knowledge
   exchange on Education & Outreach. */
.gx-sec { background: var(--paper); }
.gx-head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.gx-head .section-title { margin-bottom: 16px; }
.gx-head p:not(.eyebrow) { margin: 0; color: var(--ink); line-height: 1.8; }
.gx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-bottom: 36px; }
.gx-fig { grid-column: 1 / 9; grid-row: 1; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.gx-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gx-card {
  grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 2; margin-bottom: -36px;
  background: #fff; padding: clamp(24px, 2.6vw, 34px); box-shadow: 0 34px 60px -34px rgba(4, 45, 98, .5);
}
.gx-line { margin: 0; color: var(--navy-800); font-size: 1.12rem; line-height: 1.7; }
/* with the reef artwork below, keep the card well clear of it */
.section-reef.gx-sec { padding-bottom: calc(100vw / 15.4 + 56px); }
@media (max-width: 900px) {
  .gx { display: block; padding-bottom: 0; }
  .gx-card { margin: -40px 16px 0; }
}

/* Support, why it matters: the short version as four cards */
.sv4-k { margin: clamp(60px, 6vw, 80px) 0 18px; text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.sv4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sv4 li { background: #fff; padding: 26px 22px 24px; text-align: center; border-top: 3px solid var(--blue-400); box-shadow: 0 22px 44px -30px rgba(4, 45, 98, .45); }
.sv4-ico { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--shell); }
.sv4-ico img { width: 54px; height: 54px; object-fit: contain; }
.sv4 p { margin: 0; color: var(--ink); line-height: 1.55; }
.sv4-btn { margin: 30px 0 0; text-align: center; }
@media (max-width: 900px) { .sv4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sv4 { grid-template-columns: 1fr; } }

/* ---------- Thank-you page (after a Stripe payment) ---------- */
.ty-head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.ty-head .section-title { margin-bottom: 14px; }
.ty-head p:not(.eyebrow) { margin: 0; color: var(--ink); line-height: 1.75; }
.ty-next { background: var(--paper); }
.ty-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.ty-steps li { padding: 28px 26px 26px; background: var(--shell); text-align: center; }
.ty-steps h3, .ty-cards h3 { margin: 14px 0 8px; font-size: 1.15rem; color: var(--navy-900); }
.ty-steps p, .ty-cards p { margin: 0; color: var(--ink); line-height: 1.65; }
.ty-steps a { color: var(--accent-text); font-weight: 700; }
.ty-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 10px 22px -16px rgba(4, 45, 98, .45); }
.ty-ico img { width: 48px; height: 48px; object-fit: contain; }
.ty-more { background: var(--shell); }
.ty-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ty-cards li { display: flex; }
.ty-cards a {
  display: flex; flex-direction: column; align-items: center; width: 100%; padding: 28px 24px 24px; text-align: center; text-decoration: none;
  background: #fff; border-top: 3px solid var(--blue-400); box-shadow: 0 22px 44px -30px rgba(4, 45, 98, .45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ty-cards a:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -28px rgba(4, 45, 98, .5); }
.ty-cards a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ty-go { margin-top: auto; padding-top: 16px; font-size: .9rem; font-weight: 700; color: var(--accent-text); }
@media (max-width: 860px) { .ty-steps, .ty-cards { grid-template-columns: minmax(0, 1fr); } }

/* monthly giving card: link for existing monthly donors */
.mg-manage { margin-top: 10px; font-size: .84rem; }
.mg-manage a { color: #fff; font-weight: 700; }

/* home: two buttons under the expeditions list, a little closer to it */
.exp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }
.mg-card-foot a { color: #fff; font-weight: 700; }

/* ---------- reef structures (Explore & Learn, part four) ---------- */

.section-structures { background: var(--shell); }
.rs-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 1000px) { .rs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .rs-grid { grid-template-columns: 1fr; } }
.rs-card {
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  padding: clamp(20px, 2.2vw, 26px);
}
.rs-card img { display: block; width: 112px; height: 112px; object-fit: contain; margin: 0 0 12px -6px; }
.rs-where {
  margin: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.rs-card h3 { margin: .25em 0 .55em; font-size: 1.12rem; color: var(--ink); line-height: 1.3; }
.rs-card p:not(.rs-where) { margin: 0; font-size: .94rem; line-height: 1.7; color: var(--ink); }
.rs-more { margin: clamp(22px, 2.6vw, 32px) 0 0; text-align: center; }
.rs-more a { font-family: var(--font-display); font-weight: 700; color: var(--accent-text); text-decoration: none; }
.rs-more a:hover { text-decoration: underline; }

/* ============================================================
   PHONE FIXES (mobile review, 7 Nov 2026)
   Everything here sits inside max-width: 720px, so nothing in this block
   can reach a tablet or a desktop.
   ============================================================ */
@media (max-width: 720px) {
  /* 1. programme intros: the photos go under the copy instead of beside it */
  .px-intro .ed-intro-grid { grid-template-columns: minmax(0, 1fr); }

  /* 2. Support routes: icon above the words, not in its own column */
  .sp-route { grid-template-columns: minmax(0, 1fr); }
  .section-ways-dark .sp-route-mark img { width: 76px; height: 76px; padding: 12px; }
  /* ...and swiped sideways, one card at a time, everything centred */
  .sp-route { flex: 0 0 84%; }
  .sp-route:hover { transform: none; }
  .section-ways-dark .sp-route { border-left: 0; border-top: 4px solid var(--blue-400); }
  .section-ways-dark .sp-route-mark { justify-content: center; padding-left: 0; padding-right: 0; }
  .sp-route-body { text-align: center; padding-top: 12px; }
  .sp-route-points { display: inline-grid; text-align: left; margin-inline: auto; }

  /* 5. Compare the expeditions repeats the cards above it on a phone */
  #compare { display: none; }

  /* 6. A typical week: one day at a time, picked from a row of tabs */
  .wk-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 22px; }
  .wk-tab {
    position: relative; padding: 10px 0 9px; font: inherit; font-size: .8rem; font-weight: 700;
    color: var(--accent-text); background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  }
  .wk-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .wk-tab.is-today::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: var(--blue-400);
  }
  .wk-days.has-tabs .wk-day { display: none; border-top: 0; }
  .wk-days.has-tabs .wk-day.is-shown { display: grid; }


  /* Swipe rows (Support routes, reef structures, papers, Collaborations partner
     groups, survey methods, reports): one card at a time,
     the next one peeking in at the edge, dots underneath */
  .sp-routes, .section-papers .pub-grid,
  .section-reports .pub-grid {
    display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px;
    scroll-padding-inline: var(--gutter);
  }
  .sp-routes::-webkit-scrollbar, .section-papers .pub-grid::-webkit-scrollbar,
  .section-reports .pub-grid::-webkit-scrollbar { display: none; }
  .sp-routes > *, .section-papers .pub-grid > *,
  .section-reports .pub-grid > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  .sw-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; color: var(--navy-900); }
  .section-ways-dark .sw-dots, .section-papers .sw-dots, .t-navy .sw-dots { color: #fff; }
  .sw-dots button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
    color: inherit; background: currentColor; opacity: .3; transition: width .2s ease, opacity .2s ease;
  }
  .sw-dots button[aria-current="true"] { width: 22px; opacity: 1; }

  /* Research, Beyond a slate and a tape measure: three tabs, one stage at a time */
  .tf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
  .tf-tab {
    padding: 11px 6px; font: inherit; font-size: .84rem; font-weight: 700; line-height: 1.25; color: #fff;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  }
  .tf-tab[aria-selected="true"] { color: var(--navy-900); background: #fff; border-color: #fff; }
  .tf-cards.has-tabs .tf-card { display: none; }
  .tf-cards.has-tabs .tf-card.is-shown { display: grid; }

  /* Divemaster, Your diving now: a centred list of options with a radio
     mark, so it reads as a question and not as more pills */
  .ik-level {
    display: block; margin: 0 0 22px; padding: 16px 16px 6px; text-align: center;
    background: var(--paper); border: 1px solid var(--blue-200);
  }
  .ik-level-k { margin: 0 0 8px; }
  .ik-chip {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 12px 4px; border: 0; border-top: 1px solid var(--blue-100); border-radius: 0;
    font-size: .92rem; text-align: left; color: var(--ink); background: none;
  }
  .ik-chip::before {
    content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--blue-400); box-sizing: border-box; background: #fff;
  }
  .ik-chip.is-on { background: none; border-color: var(--blue-100); color: var(--navy-900); font-weight: 700; }
  .ik-chip.is-on::before { border-color: var(--navy-900); box-shadow: inset 0 0 0 3px #fff; background: var(--navy-900); }

  /* Divemaster, Four cohorts a year: a tab per cohort, one card at a time */
  .ik-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; }
  .ik-tab {
    padding: 10px 2px; font: inherit; font-size: .82rem; font-weight: 700; line-height: 1.2;
    color: var(--accent-text); background: var(--paper); border: 1px solid var(--blue-200); border-radius: 999px; cursor: pointer;
  }
  .ik-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .ik-cards.has-tabs > li { display: none; }
  .ik-cards.has-tabs > li.is-shown { display: block; }

  /* Expedition pages, On the reef and off it: headline tabs, one card at a time */
  .do-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
  .do-tab {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; font: inherit; font-size: .84rem; font-weight: 700;
    line-height: 1.25; text-align: left; color: var(--accent-text); background: var(--paper); border: 1px solid var(--blue-200); cursor: pointer;
  }
  .do-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .do-tab img { flex: none; width: 26px; height: 26px; object-fit: contain; }
  .do-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .do-tab[aria-selected="true"] img { filter: brightness(0) invert(1); }
  .do-grid.has-tabs > li { display: none; }
  .do-grid.has-tabs > li.is-shown { display: block; }

  /* the shown card opens its pop-up from anywhere on it, and says so */
  .do-grid.has-tabs > li { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .do-grid.has-tabs > li::after {
    content: "Tap for more"; position: absolute; top: 14px; right: 14px;
    display: flex; align-items: center; gap: 6px; padding-left: 24px; min-height: 20px;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-text);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23277abc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V11'/%3E%3Cpath d='M12 10.5V9a1.5 1.5 0 0 1 3 0v2'/%3E%3Cpath d='M15 10.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-.6a6 6 0 0 1-4.8-2.4L4.3 15.5a1.6 1.6 0 0 1 2.5-2L9 15.5'/%3E%3Cpath d='M6 4.5a4.5 4.5 0 0 1 9 0'/%3E%3C/svg%3E") left center / 20px 20px no-repeat;
  }

  /* Is it right for me: the icons in white circles */
  .rfx .ca-thumb { border-radius: 50%; }
  /* on a white section (A-Level) the circle adds nothing: just the icon, a
     little larger, in the same space */
  .rfx:not(.t-shell):not(.t-navy) .ca-thumb { border: 0; border-radius: 0; background: none; box-shadow: none !important; }
  .rfx:not(.t-shell):not(.t-navy) .ca-thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

  /* Included / Not included: the whole box opens the full list, not just its bar */
  .fee-box { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* a list short enough to show whole needs no cut: the box shrinks to fit */
  .fee-box.fee-fits .fee-clip { height: auto; -webkit-mask-image: none; mask-image: none; }

  /* CSR, What your funding would go into: the desktop list of programmes
     becomes headline tabs, and the cards below swipe too; either one moves the other */
  .cb-work .ca-side { display: contents; }
  .cb-work .ca-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 0; order: 0; }
  .cb-work .ca-stage { order: 1; }
  .cb-work .ca-join { order: 2; }
  .cb-work .ca-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cb-work .ca-tab {
    display: flex; align-items: center; gap: 8px; height: 100%; padding: 8px 10px;
    background: #fff; border: 1px solid var(--blue-200);
  }
  .cb-work .ca-tab::before, .cb-work .ca-arrow { display: none; }
  .cb-work .ca-thumb { flex: none; width: 30px; height: 30px; margin: 0; border: 0; box-shadow: none !important; }
  .cb-work .ca-name { font-size: .84rem; line-height: 1.25; color: var(--accent-text); }
  .cb-work .ca-tab[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); padding-left: 10px; }
  .cb-work .ca-tab[aria-selected="true"] .ca-name { color: #fff; }
  .cb-work .ca-tab[aria-selected="true"] .ca-thumb { background: #fff; border-radius: 50%; }
  .cb-work .ca-stage {
    display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .cb-work .ca-stage::-webkit-scrollbar { display: none; }
  .cb-work .ca-panel {
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }

  /* Expeditions, Choose your expedition: each card shows its name, tagline and
     buttons; tapping the heading opens the rest, and cards stay open to compare */
  .prog-grid.has-fold .prog:not(.is-open) .prog-blurb,
  .prog-grid.has-fold .prog:not(.is-open) .prog-specs { display: none; }
  .prog-grid.has-fold .prog h3 { position: relative; padding-right: 34px; cursor: pointer; }
  .prog-grid.has-fold .prog h3::after {
    content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
    border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .prog-grid.has-fold .prog.is-open h3::after { transform: rotate(-135deg); margin-top: -2px; }
  .prog-grid.has-fold .prog .prog-tagline { margin-bottom: 14px; }
  .prog-grid.has-fold .prog { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .prog-grid.has-fold .prog h3 a { -webkit-tap-highlight-color: transparent; }

  /* Donations, Where does my donation go: compact rows, icon beside the words */
  .dw-areas{display:block!important}
  .dw-areas>li{display:grid!important;grid-template-columns:48px 1fr;column-gap:14px;text-align:left!important;padding:16px 16px!important;margin-bottom:10px}
  .dw-areas>li>img{grid-row:1/span 3;width:48px!important;height:48px!important;margin:0!important}
  .dw-areas>li h3{margin:0 0 4px!important;text-align:left}
  .dw-areas>li>p{margin:0 0 6px!important;text-align:left;min-height:0!important}
  .dw-areas>li>ul{display:block!important;margin:0!important;padding:0!important;border:0!important}
  .dw-areas>li>ul li{display:inline!important;padding:0!important;font-size:.8rem}
  .dw-areas>li>ul li::before{display:none!important}
  .dw-areas>li>ul li:not(:last-child)::after{content:"\00A0\00B7\0020";color:var(--blue-400)}

  /* Donations, Your challenge, our ocean: a small photo beside each card's words */
  .fw-cards{display:block!important}
  .fw-card{display:grid!important;grid-template-columns:104px 1fr;column-gap:14px;align-items:start;margin-bottom:12px!important;padding:0!important}
  .fw-card figure{grid-row:1/span 2;margin:0!important;height:100%!important;min-height:120px;aspect-ratio:auto!important}
  .fw-card figure img{width:100%;height:100%;object-fit:cover}
  .fw-card .fw-ico{display:none!important}
  .fw-card>div{padding:12px 12px 12px 0!important}
  .fw-card h3{margin:0 0 4px!important;font-size:1rem!important}
  .fw-card p{font-size:.84rem!important;line-height:1.5!important;margin:0!important}

  /* 7. reef structure cards: icon above the heading */
  .rs-card { display: block; }
  .rs-card img { width: 76px; height: 76px; margin: 0 0 10px -4px; }

  /* Home, Recognised for how we work: badges and words centred */
  .wb-rec { align-items: center; text-align: center; }
  .wb-badges { justify-content: center; }

  /* Figures two to a row everywhere; an odd one out sits centred on its own row */
  .px-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 14px; }
  .px-stats > .px-stat { flex: 0 0 calc(50% - 7px); min-width: 0; }

  /* Footer centred on a phone; the copyright strip below stays as it is */
  .footer-grid { text-align: center; }
  .footer-logo, .footer-brand > a:first-child { display: inline-block; }
  .socials, .award-row { justify-content: center; }
  .footer-contact ul { justify-items: center; }
  .footer-contact li, .footer-contact li a { justify-content: center; }

  /* Page header buttons: a little smaller, with a proper gap whether they
     sit side by side or stack */
  .page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .page-hero-actions .btn-lg { padding: 13px 24px; font-size: .95rem; }

  /* Home, Who we are: the button centred */
  .about-copy > .btn { display: flex; width: fit-content; margin-inline: auto; }

  /* About, the map: no full-size view on a phone, it stays as it is */
  .map-thumb-note { display: none; }
  .map-thumb { cursor: default; }

  /* About, the area facts: a two-by-three grid, centred */
  .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 14px 10px; text-align: center; }
  .fact dt { font-size: .68rem; letter-spacing: .08em; }
  .fact dd { font-size: .98rem; }

  /* About, facility team: no lift on tap */
  .fam:hover .fam-photo { transform: none; border-color: rgba(255, 255, 255, .28); }
  .fam-photo { transition: none; }
  /* an odd one out at the end of a two-wide grid sits in the middle */
  .fam-grid > .fam:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 160px; }

  /* Reef band artwork: drawn larger on a phone, and the space under the
     content grows with it so nothing sits on the artwork */
  .section-reef { padding-bottom: calc(100vw / 8.8 + var(--decor-clear)); }
  .section-reef::after {
    background:
      url("../assets/img/reef-band-left.png")  bottom left  / 41.8% auto no-repeat,
      url("../assets/img/reef-band-right.png") bottom right / 48% auto no-repeat;
  }

  /* Pop-ups: the X and the title stay in view while the text scrolls under
     them. The X floats sticky in the scrolling card (taking no room); the
     title block is marked by main.js. */
  .modal-card > .modal-close { position: sticky; top: 8px; float: right; margin: 8px 8px -48px 0; }
  .pop-x { position: sticky !important; top: 8px; float: right; margin: 8px 8px -48px 0; z-index: 3; }
  .faq-top { padding: 12px; }
  .faq-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pop-bar {
    position: sticky; z-index: 1; height: 0; overflow: visible; pointer-events: none;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--ink);
  }
  .pop-bar::before { content: none; }
  .pop-bar { display: block; }
  .pop-bar.is-shown { height: auto; padding: 16px 56px 14px 20px; background: var(--pop-bg, #fff);
    box-shadow: 0 10px 12px -12px rgba(4, 45, 98, .35); }
  .pop-bar:not(.is-shown) { visibility: hidden; padding: 0; }
  .pop-stick {
    position: sticky; top: 0; z-index: 1;
    background: var(--pop-bg, #fff); padding-right: 52px;
    box-shadow: 0 10px 12px -12px rgba(4, 45, 98, .35);
  }

  /* Table cards (Divemaster training): the title shows, a tap opens the rest */
  .cmp-table tr.cmp-fold { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cmp-table tr.cmp-fold th { position: relative; padding-right: 44px; }
  .cmp-table tr.cmp-fold th::after {
    content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .cmp-table tr.cmp-fold.is-open th::after { transform: rotate(-135deg); margin-top: -2px; }
  .cmp-table tr.cmp-fold:not(.is-open) td { display: none; }

  /* Dive Courses, Where would you like to start: every photo cropped to the
     same square, so every card is the same height */
  .section-dcnav.has-photos .dc-nav-card { min-height: 88px; }
  .section-dcnav.has-photos .dc-nav-card img { width: 88px; height: 88px; min-height: 0; align-self: stretch; }

  /* Dive Courses, Conservation Divemaster figures: centred */
  .dcf-tab > div { text-align: center; }

  /* Research, Conservation, Education: the row of programme icons is not
     needed on a phone (Field Sites keeps its four habitats) */
  .ed-intro.px-intro .ed-jump { display: none; }

  /* Research, Six programmes: the title block sets the closed card's height,
     so a long title or label is never cut off */
  .pb-head, .pb-ent[open] .pb-head { height: auto; min-height: 140px; }
  .pb-ent[open] .pb-head { min-height: 200px; }
  .pb-cap { position: relative; min-height: inherit; }

  /* Research, Beyond a slate and a tape measure: the whole photograph across
     the top, at a fixed size, so switching tabs never moves it */
  .px-tech.tf { padding-top: 200px; }
  .tf-bg { bottom: auto; height: 340px; object-position: 45% 55%; }
  .tf::before {
    background: linear-gradient(180deg, rgba(4, 45, 98, .1) 0, rgba(4, 45, 98, .55) 210px, var(--navy-900) 340px, var(--navy-900) 100%);
  }

  /* Page header buttons centred, whether they share a row or wrap */
  .page-hero-actions { justify-content: center; }

  /* Conservation, Taking part: the expedition buttons centred, and the photo
     cards one per row so there is never a lone card beside a gap */
  .px-join-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; text-align: center; }
  .cm-reel { grid-template-columns: minmax(0, 1fr); }
  .cm-reel img { aspect-ratio: 16 / 10; }

  /* Education, the photo band before "A field school": closer in on the people */
  .photo-band { overflow: hidden; }
  .photo-band img[src*="band-before-a-field-school"] { transform: scale(1.45); transform-origin: 50% 68%; }

  /* Research, the cycle: room above the loop-back line, clear of the link above */
  .px-loop { margin-top: 44px; }

  /* Education, the six research stages: a vertical journey, each circle
     joined to the next by a line in its own shade (light to navy) */
  .uj-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .uj-track li {
    position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 18px;
    align-items: start; text-align: left; padding: 0 0 22px;
  }
  .uj-track li:last-child { padding-bottom: 0; }
  .uj-track li:not(:last-child)::before {
    content: ""; position: absolute; left: 19.5px; top: 42px; bottom: 0; width: 3px;
    background: color-mix(in oklch, var(--blue-400), var(--navy-900) calc(var(--i) * 18%));
  }
  .uj-bubble { grid-row: 1 / span 2; margin: 0; position: relative; z-index: 1; }
  .uj-track h3 { margin: 8px 0 2px; }

  /* Explore & Learn habitat tabs: icon and name only, four across, so they
     read as tabs for the panel just below */
  .eco-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .eco-tab { padding: 10px 4px 9px; gap: 4px; }
  .eco-tab img { width: 34px; height: 34px; }
  .eco-tab-name { font-size: .74rem; line-height: 1.2; }
  .eco-tab-strap { display: none; }

  /* Explore & Learn, species groups: two by two, icon over name over count */
  .sp-tabs { gap: 8px; margin-bottom: 18px; }
  .sp-tab { flex-direction: column; gap: 4px; padding: 12px 8px; text-align: center; font-size: .9rem; line-height: 1.25; }
  .sp-tab img { width: 30px; height: 30px; }
  /* species tiles centred */
  .sp-open { align-items: center; text-align: center; }
  .sp-icon { margin: 16px auto 0; }
  .sp-body { align-items: center; width: 100%; box-sizing: border-box; }
  .sp-flag { align-self: center; }

  /* Explore & Learn, survey methods: tabs (icon and short name), one card at
     a time, each card as long as its own content */
  .me-grid { display: block; }
  .me-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
  .me-tabs.rs-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rs-grid.has-tabs { display: block; }
  .rs-grid.has-tabs > .rs-card { display: none; }
  .rs-grid.has-tabs > .rs-card.is-shown { display: grid; }
  .me-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px;
    font: inherit; font-size: .76rem; font-weight: 700; line-height: 1.2; color: var(--accent-text);
    background: var(--paper); border: 1px solid var(--blue-200); cursor: pointer;
  }
  .me-tab img { width: 32px; height: 32px; object-fit: contain; }
  .me-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .me-grid.has-tabs > .me-card { display: none; }
  .me-grid.has-tabs > .me-card.is-shown { display: flex; }

  /* Explore & Learn, reef structures: icon beside the label and name, the
     words full width below */
  .rs-card { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; }
  .rs-card img { grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; }
  .rs-card .rs-where { align-self: end; }
  .rs-card h3 { align-self: start; margin: .15em 0 0; }
  .rs-card p:not(.rs-where) { grid-column: 1 / -1; margin-top: 14px; }

  /* Explore & Learn, Where next: the expedition links fit their words */
  .wn-link { display: inline-block; justify-self: start; max-width: 100%; padding: 9px 15px; font-size: .82rem; line-height: 1.35; white-space: nowrap; }

  /* Collaborations, the opening figures: centred */
  .sv-tab > div { text-align: center; }

  /* Collaborations, partner groups: round logo tabs, one partner card at a
     time at its own length; swipe the card or tap a logo */
  .section-collab .ca-list {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 0 0 18px; padding: 0; border: 0;
  }
  .section-collab .ca-list li { border: 0; }
  .section-collab .ca-tab { display: block; width: auto; padding: 0; background: none; }
  .section-collab .ca-tab::before, .section-collab .ca-name, .section-collab .ca-arrow { display: none; }
  .section-collab .ca-thumb {
    width: 52px; height: 52px; margin: 0; border-radius: 50%; background: #fff;
    border: 2px solid var(--blue-200); box-shadow: none;
  }
  .section-collab .ca-thumb img { max-width: 34px; max-height: 34px; }
  .section-collab .ca-tab[aria-selected="true"] { background: none; padding-left: 0; }
  .section-collab .ca-tab[aria-selected="true"] .ca-thumb { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-400); }
  .section-collab .ca-side { display: contents; }
  .section-collab .ca { display: flex; flex-direction: column; }
  .section-collab .ca-list { order: 0; }
  .section-collab .ca-stage { order: 1; }
  .section-collab .ca-join { order: 2; }
  .section-collab .ca-panel { display: none; }
  .section-collab .ca-panel.is-on { display: grid; border-top: 4px solid var(--accent); }

  /* Support, Reported every year: icon beside the label, the words and a
     full-width button below */
  .sw-rep { grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 0; align-items: center; padding: 20px; }
  .sw-rep img { width: 56px; height: 56px; }
  .sw-rep > div { display: contents; }
  .sw-rep .sw-k { margin: 0; }
  .sw-rep p:not(.sw-k) { grid-column: 1 / -1; margin: 4px 0 16px; }
  .sw-rep img { display: block; }
  .sw-rep .btn { grid-column: 1 / -1; justify-content: center; width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }

  /* Collaborations: no rule under the round logo tabs */
  .section-collab .ca-tab { border-bottom: 0; }

  /* Collaborations, review platforms: the two with ratings on the top row */
  .pl-list > li:nth-child(2), .pl-list > li:nth-child(3) { order: -1; }
  .pl-list > li { border-left: 0 !important; }
  .pl-list > li:nth-child(3), .pl-list > li:nth-child(4) { border-left: 1px solid var(--line) !important; }

  /* buttons centred: Collaborations "Start a Conversation", the side boxes
     ("Publications & Reports", "See Open Roles") */
  .cw-list li.cw-cta { justify-content: center; }
  .sv-ask > .btn { display: flex; width: fit-content; margin-inline: auto; }

  /* Remote Volunteering, which roles fit you: icon centred down the card */
  .fx-ico { grid-row: 1 / span 2; align-self: center; }

  /* Remote Volunteering, role filters centred */
  .rvx-chips { justify-content: center; }

  /* Donations, monthly giving: the three things it funds, centred */
  .mg-pts li { align-items: center; text-align: center; }

  /* Donations, the line under the monthly calendar: two lines on a phone */
  .mg-cap { font-size: 15px; }

  /* Donations, Reported every year: same layout as the Support page's box -
     icon beside the label, words and a full-width centred button below */
  .dw-report { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 0; align-items: center; padding: 22px 20px; }
  .dw-report > div { display: contents; }
  .dw-report .dw-k { margin: 0; }
  .dw-report p:not(.dw-k) { grid-column: 1 / -1; margin: 4px 0 16px; }
  .dw-report img { display: block; }
  .dw-report .btn { grid-column: 1 / -1; justify-content: center; width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }

  /* Donations, Fund a piece of the work: the Contact Us button centred */
  .wd-l > .btn { display: flex; width: fit-content; margin-inline: auto; }

  /* Donations, Fund a piece of the work: all three kinds of item in view,
     sharing the width, rather than one hidden off the edge */
  .wd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .wd-tab { white-space: normal; text-align: center; padding: 10px 4px; font-size: .86rem; line-height: 1.25; }

  /* Donations, wish-list cards: a bigger icon level with the price, and no
     space held for a second line of title the card does not need */
  .wd-items a { padding: 18px 20px 16px; }
  .wd-top { align-items: center; margin-bottom: 10px; }
  .wd-top img { width: 84px; height: 84px; }
  .wd-items h3 { min-height: 0; margin-bottom: 6px; }
  .wd-items p { margin-bottom: 14px; }
  .wd-go { padding-top: 12px; }

  /* Donations, Your fundraiser: the tip card overlaps only the foot of the
     photo, with its words full width under the icon and label */
  .fz2 .fz-media, .fz-media { padding-bottom: 0; }
  .fz-tip {
    position: relative; right: auto; bottom: auto; width: auto;
    margin: -34px 14px 0; padding: 18px 20px;
    grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 0; align-items: center;
  }
  .fz-tip svg { margin: 0; }
  .fz-tip > div { display: contents; }
  .fz-tip b { margin: 0; }
  .fz-tip p { grid-column: 1 / -1; margin-top: 10px; }

  /* Donations, Your fundraiser heading: no lone word on its own line */
  .fz2-title .nowrap { white-space: normal; }
  .fz2-title { text-wrap: balance; }

  /* CSR, What your funding would go into: the card's links centred */
  .cb-work .ca-foot { flex-direction: column; align-items: center; text-align: center; }
  .cb-work .ca-foot .ca-h { margin: 0; }

  /* CSR, levels: tabs above, one level card at a time, which also swipes */
  .cb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 4px; }
  .cb-tab {
    padding: 9px 4px; font: inherit; font-size: .78rem; font-weight: 700; line-height: 1.2; text-align: center;
    color: var(--accent-text); background: var(--paper); border: 1px solid var(--blue-200); cursor: pointer;
  }
  .cb-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .cb-ladder { grid-auto-columns: 100%; column-gap: 16px; }
  .cb-swipe { display: none !important; }

  /* CSR, impact list: the item count stays on one line */
  .eva-k small { white-space: nowrap; }

  /* Contact, check the FAQs first: icon and button centred */
  .ct-check > img { display: block; margin-left: auto; margin-right: auto; }
  .ct-check > .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

  /* Book: the people lower in the frame and larger, clear of the heading */
  .page-hero[style*="book-page-header"] { padding-bottom: 290px; }
  .page-hero[style*="book-page-header"]::before { background-size: auto 138%; background-position: 31% 0%; }

  /* Booking, the summary card: label and name beside the icon, then each fact
     on its own row, label left and value right */
  .summary-card { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 0; text-align: left; }
  .summary-icon { grid-row: 1 / 3; }
  .summary-card .eyebrow, .summary-card h2 { grid-column: 2; text-align: left; margin: 0; }
  .summary-card .eyebrow { align-self: end; }
  .summary-card h2 { align-self: start; line-height: 1.25; }
  .summary-facts { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  .summary-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
  .summary-facts dt { flex: none; }
  .summary-facts dd { text-align: right; }
  .summary-price-note { grid-column: 1 / -1; }

  /* Booking header: the reef drawing larger, in two halves at the sides */
  .page-hero-reef::before {
    background:
      url("../assets/img/about-hero.png") left bottom / 165% auto no-repeat,
      url("../assets/img/about-hero.png") right bottom / 165% auto no-repeat;
    opacity: .6;
  }

  /* Donations, Your challenge: the ideas list is not shown on a phone */
  .fw-ideas { display: none; }

  /* 8. Impact headline figures two to a row */
  .imp-headline .px-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }

  /* 9. Meet the team: arrows under the card, so the card gets the full width */
  #teamCarousel { flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
  #teamCarousel .carousel-viewport { order: -1; flex: 0 0 100%; min-width: 0; }

  /* 10. Publications, papers: a short card that opens on Read more or the title */
  .pub-paper.is-short { display: flex; flex-direction: column; }
  .pub-paper.is-short h3 { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pub-paper.is-short:not(.is-more) .pub-meta,
  .pub-paper.is-short:not(.is-more) .pub-summary,
  .pub-paper.is-short:not(.is-more) .pub-doi { display: none; }
  .pub-paper.is-short > .btn { align-self: flex-start; }
  .section-papers .pub-grid { align-items: flex-start; }   /* each card its own height, open or shut */
  .pub-more {
    align-self: flex-start; margin: 0 0 1.1em; padding: 0; font: inherit; font-size: .9rem; font-weight: 700;
    color: var(--accent-text); background: none; border: 0; text-decoration: underline; cursor: pointer;
  }

  /* 11. footer badges: all three small, on one row */
  .award-row { flex-wrap: nowrap; gap: 14px; }
  .award img { height: 72px; }
  .award-vw img { height: 58px; }

  /* 4. Back to top: an icon only on a phone, and it steps aside for the footer */
  .to-top { padding: 12px; }
  .to-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .to-top.is-at-foot { opacity: 0; pointer-events: none; }
}
/* the phone-only controls never show on wider screens */
@media (min-width: 721px) {
  .pub-more, .sw-dots, .tf-tabs, .ik-tabs, .do-tabs, .br-phone, .cb-tabs { display: none !important; }
}
@media (min-width: 1101px) {
  .me-tabs, .wk-tabs { display: none !important; }
}

/* Phone and tablet menu: the section you are in is marked on its main row
   only; inside an open dropdown the current page is just bold. Only inside
   the burger menu (1000px and below). */
@media (max-width: 1000px) {
  .primary-nav > ul > li > a[aria-current="page"] {
    background: var(--shell); box-shadow: inset 4px 0 0 var(--blue-600);
    padding-left: 14px; font-weight: 800; color: var(--navy-900);
  }
  /* the dropdown arrow sits flush in its row: no box, no corners, no
     underline when tapped; on the current section it shares the row's tint */
  .has-menu::after { display: none; }
  .has-menu > .submenu-toggle {
    align-self: stretch; height: auto; border-radius: 0; background: none;
    -webkit-tap-highlight-color: transparent;
  }
  .has-menu > .submenu-toggle:focus { outline: none; }
  .has-menu > .submenu { border-top: 0; }
  .has-menu > .submenu-toggle:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -4px; }
  .has-menu > a[aria-current="page"] + .submenu-toggle { background: var(--shell); }
  .submenu a[aria-current="page"] { color: var(--navy-900); font-weight: 800; }
}

/* About: the row of facility-team faces is a picture, not a button (all screens) */
.fs-teaser { cursor: default; pointer-events: none; }

/* Dive Courses photo mosaic: the small photos swap into the large place */
.intro-mosaic .mosaic-swap { cursor: pointer; }
.intro-mosaic .mosaic-swap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Field Sites map: our own button over the corner of Google's header, where
   its share and expand icons would otherwise take people off to Google Maps.
   On the page it opens our full screen; in full screen it closes it. */
.map-guard {
  position: absolute; top: 0; right: 0; z-index: 3;
  width: 108px; height: 60px; padding: 0 16px 0 0;
  display: flex; align-items: center; justify-content: flex-end;
  background: #073d84; color: #fff; border: 0; cursor: pointer;
}
.map-guard:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.map-guard-close { display: none; font-size: 2rem; line-height: 1; }
.map-frame.is-full .map-guard-open { display: none; }
.map-frame.is-full .map-guard-close { display: block; }
.map-load:not([hidden]) ~ .map-guard { display: none; }   /* only once the map is showing */

/* Explore & Learn habitats: the photograph stands the full height of the
   text beside it, so there is no empty block under it (desktop) */
@media (min-width: 901px) {
  .eco-media { align-self: stretch; }
  .eco-media img { height: 100%; min-height: 320px; object-fit: cover; }
}
/* Under pressure: two columns with the starfish bullet, not boxed tags */
.eco-press { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.eco-press li {
  position: relative; padding: 0 0 0 26px; font-size: .92rem; line-height: 1.4;
  background: none; border: 0;
}
.eco-press li::before {
  content: ""; position: absolute; left: 0; top: .05em; width: 17px; height: 17px;
  background: url("../assets/icons/starfish.svg") center / contain no-repeat;
}

/* Remote Volunteering, the earned-week ticket: a light ring round the two
   punched holes so they stand out from the navy behind (all screens) */
.dC-ticket::before, .dC-ticket::after { box-sizing: border-box; border: 2px solid var(--blue-400); }

/* CSR enquiry: what you are interested in, as a drop-down (all screens).
   main.js builds the select and keeps the original options, hidden, in step
   with it, so the rest of the form works as before. */
.cb-chips.has-select > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cb-select {
  width: 100%; box-sizing: border-box; padding: 13px 44px 13px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073d84' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
  border: 1px solid var(--blue-200); border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.cb-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cb-chips.is-warn .cb-select { border-color: var(--error); }

/* Remote Volunteering ticket: the two options side by side, one or the other */
.dC-pick { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.dC-pick .dC-t-big { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); }
.dC-t-for { margin: 4px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dC-or { margin: 0; font-size: .9rem; font-style: italic; color: var(--accent-text); }
@media (max-width: 720px) {
  .dC-pick { gap: 8px; }
  .dC-pick .dC-t-big { font-size: 1.9rem; }
  .dC-t-for { font-size: .68rem; letter-spacing: .04em; white-space: nowrap; }
}

/* ============================================================
   TABLET (721px to 1100px: every iPad held upright, including the
   iPad Pro 12.9 and 13). Where the desktop layout does not fit, the
   section uses the same solution as on a phone. Written out by hand:
   only these rules, nothing else from the phone block.
   ============================================================ */
@media (min-width: 721px) and (max-width: 1100px) {
  /* Explore & Learn: survey methods and reef structures as tabs */
  .me-grid { display: block; }
  .me-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
  .me-tabs.rs-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rs-grid.has-tabs { display: block; }
  .rs-grid.has-tabs > .rs-card { display: none; }
  .rs-grid.has-tabs > .rs-card.is-shown { display: grid; }
  .me-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px;
    font: inherit; font-size: .76rem; font-weight: 700; line-height: 1.2; color: var(--accent-text);
    background: var(--paper); border: 1px solid var(--blue-200); cursor: pointer;
  }
  .me-tab img { width: 32px; height: 32px; object-fit: contain; }
  .me-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .me-grid.has-tabs > .me-card { display: none; }
  .me-grid.has-tabs > .me-card.is-shown { display: flex; }
  .rs-card { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; }
  .rs-card img { grid-row: 1 / span 2; width: 64px; height: 64px; margin: 0; }
  .rs-card .rs-where { align-self: end; }
  .rs-card h3 { align-self: start; margin: .15em 0 0; }
  .rs-card p:not(.rs-where) { grid-column: 1 / -1; margin-top: 14px; }

  /* Expeditions: a typical week as day tabs (swipe too), not 4 + 3 with a gap */
  .wk-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 22px; }
  .wk-tab {
    position: relative; padding: 10px 0 9px; font: inherit; font-size: .8rem; font-weight: 700;
    color: var(--accent-text); background: var(--paper); border: 1px solid var(--line); cursor: pointer;
  }
  .wk-tab[aria-selected="true"] { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
  .wk-tab.is-today::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%; background: var(--blue-400);
  }
  .wk-days.has-tabs .wk-day { display: none; border-top: 0; }
  .wk-days.has-tabs .wk-day.is-shown { display: grid; }
  .wk-days.has-tabs { grid-template-columns: minmax(0, 1fr); }
  .wk-days.has-tabs .wk-day { border-left: 0; }

  /* Donations: where does my donation go, as compact rows */
  .dw-areas::before, .dw-areas>li::before, .dw-areas>li::after { display: none !important; }
  .dw-areas{display:block!important}
  .dw-areas>li{display:grid!important;grid-template-columns:48px 1fr;column-gap:14px;text-align:left!important;padding:16px 16px!important;margin-bottom:10px}
  .dw-areas>li>img{grid-row:1/span 3;width:48px!important;height:48px!important;margin:0!important}
  .dw-areas>li h3{margin:0 0 4px!important;text-align:left}
  .dw-areas>li>p{margin:0 0 6px!important;text-align:left;min-height:0!important}
  .dw-areas>li>ul{display:block!important;margin:0!important;padding:0!important;border:0!important}
  .dw-areas>li>ul li{display:inline!important;padding:0!important;font-size:.8rem}
  .dw-areas>li>ul li::before{display:none!important}
  .dw-areas>li>ul li:not(:last-child)::after{content:"\00A0\00B7\0020";color:var(--blue-400)}

  /* CSR, partnership levels: two by two (four across is too tight here) */
  .cb-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
    overflow: visible; margin: 0; padding: 14px 0 0; gap: 26px 18px;
  }
  .cb-swipe { display: none !important; }
  /* About, facilities: three across, so nine tiles make three full rows */
  .fac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Expeditions, where your fee goes: the chart at a sensible size */
  .fee-chart { max-width: 380px; margin-left: auto; margin-right: auto; }

  /* footer centred, as on a phone */
  .footer-grid { text-align: center; }
  .footer-logo, .footer-brand > a:first-child { display: inline-block; }
  .socials, .award-row { justify-content: center; }
  .footer-contact ul { justify-items: center; }
  .footer-contact li, .footer-contact li a { justify-content: center; }
}
@media (min-width: 721px) and (max-width: 860px) {
  /* Collaborations: round logo tabs, one partner at a time */
  .section-collab .ca-list {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 0 0 18px; padding: 0; border: 0;
  }
  .section-collab .ca-list li { border: 0; }
  .section-collab .ca-tab { display: block; width: auto; padding: 0; background: none; }
  .section-collab .ca-tab::before, .section-collab .ca-name, .section-collab .ca-arrow { display: none; }
  .section-collab .ca-thumb {
    width: 52px; height: 52px; margin: 0; border-radius: 50%; background: #fff;
    border: 2px solid var(--blue-200); box-shadow: none;
  }
  .section-collab .ca-thumb img { max-width: 34px; max-height: 34px; }
  .section-collab .ca-tab[aria-selected="true"] { background: none; padding-left: 0; }
  .section-collab .ca-tab[aria-selected="true"] .ca-thumb { border-color: var(--blue-600); box-shadow: 0 0 0 3px var(--blue-400); }
  .section-collab .ca-side { display: contents; }
  .section-collab .ca { display: flex; flex-direction: column; }
  .section-collab .ca-list { order: 0; }
  .section-collab .ca-stage { order: 1; }
  .section-collab .ca-join { order: 2; }
  .section-collab .ca-panel { display: none; }
  .section-collab .ca-panel.is-on { display: grid; border-top: 4px solid var(--accent); }
  .section-collab .ca-tab { border-bottom: 0; }

  /* CSR, what your funding would go into: headline tabs */
  .cb-work .ca-side { display: contents; }
  .cb-work .ca-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 0; order: 0; }
  .cb-work .ca-stage { order: 1; }
  .cb-work .ca-join { order: 2; }
  .cb-work .ca-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cb-work .ca-tab {
    display: flex; align-items: center; gap: 8px; height: 100%; padding: 8px 10px;
    background: #fff; border: 1px solid var(--blue-200);
  }
  .cb-work .ca-tab::before, .cb-work .ca-arrow { display: none; }
  .cb-work .ca-thumb { flex: none; width: 30px; height: 30px; margin: 0; border: 0; box-shadow: none !important; }
  .cb-work .ca-name { font-size: .84rem; line-height: 1.25; color: var(--accent-text); }
  .cb-work .ca-tab[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); padding-left: 10px; }
  .cb-work .ca-tab[aria-selected="true"] .ca-name { color: #fff; }
  .cb-work .ca-tab[aria-selected="true"] .ca-thumb { background: #fff; border-radius: 50%; }
  .cb-work .ca-stage {
    display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .cb-work .ca-stage::-webkit-scrollbar { display: none; }
  .cb-work .ca-panel {
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .cb-work .ca-foot { flex-direction: column; align-items: center; text-align: center; }
  .cb-work .ca-foot .ca-h { margin: 0; }
}
/* Tablet, where these grids are two across: the odd one out sits centred */
@media (min-width: 721px) and (max-width: 900px) {
  .dc-nav > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  /* Conservation, taking part: five photos as three, then two */
  .cm-reel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cm-reel > li { grid-column: span 2; }
  .cm-reel > li:nth-child(n+4) { grid-column: span 3; }
  .cm-reel > li:nth-child(n+4) img { aspect-ratio: 4 / 3; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .fr-tiers > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}

/* Impact, the cycle in two rows of three: one loop - along the top, down,
   back along the bottom, and up to the start again */
@media (min-width: 641px) and (max-width: 1040px) {
  .cyc-steps li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .cyc-steps li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .cyc-steps li:nth-child(6) { grid-column: 1; grid-row: 2; }
  .cyc-steps li:nth-child(3)::after, .cyc-steps li:nth-child(6)::after {
    content: ""; top: auto; right: 50%; margin: 0 -5px 0 0;
  }
  .cyc-steps li:nth-child(3)::after { bottom: calc(clamp(18px, 2.2vw, 30px) / -2 - 6px); transform: rotate(45deg); }
  .cyc-steps li:nth-child(6)::after { bottom: auto; top: calc(clamp(18px, 2.2vw, 30px) / -2 - 6px); transform: rotate(-135deg); }
  .cyc-steps li:nth-child(4)::after, .cyc-steps li:nth-child(5)::after {
    right: auto; left: calc(clamp(18px, 2.2vw, 30px) / -2 - 5px); transform: rotate(135deg);
  }
}

/* Explore & Learn habitats: the two boxes along the bottom end level */
@media (min-width: 901px) {
  .eco-matters, .eco-pressure { align-self: stretch; display: flex; flex-direction: column; }
  .eco-matters .eco-tiles { flex: 1; }
  .eco-pressure .eco-sorce { flex: 1; }
}

/* Support, where your donation goes: a plain white circle with a fine blue
   ring, like the other icon circles on the site - no gradient or halo */
.sw-ico { background: #fff; border: 2px solid var(--blue-200); box-shadow: none; box-sizing: border-box; }
.sw-ico img { width: 50px; height: 50px; }

/* Support, Four ways in: the button centred on a phone (desktop and tablet keep it left) */
@media (max-width: 720px) { .sp-route-body > .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } }

/* Icon circles site-wide: plain white with a fine blue ring, like the
   Support ones - no gradient fill, no pale halo (all screens) */
.help-ico { background: none; border: 0; border-radius: 0; box-shadow: none; }
.help-ico img { width: 100%; height: 100%; object-fit: contain; }
.uj-disc { box-shadow: var(--shadow); }

/* Donations tree, desktop: the middle connection (stem, line and circle) is
   drawn as one piece hanging from "Your donation", so it can never step
   sideways where two separately-placed lines meet */
@media (min-width: 1101px) {
  .dw-start::after { height: 59px; }
  .dw-start::before {
    content: ""; position: absolute; z-index: 1; left: calc(50% - 6px); top: calc(100% + 59px);
    width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
    background: #fff; border: 2px solid var(--blue-600);
  }
  .dw-areas > li:nth-child(3)::before, .dw-areas > li:nth-child(3)::after { display: none; }
}

/* Home header on a phone: the swing in view (slide 1); slides 2 and 4 zoomed
   out so all three divers / more of the group are in frame, sitting low and
   fading into the navy at the top */
@media (max-width: 720px) {
  .hero-slide:nth-child(1) { background-position: 53% 50% !important; }
  .hero-slide:nth-child(2), .hero-slide:nth-child(4) { background-repeat: no-repeat !important; }
  .hero-slide:nth-child(2) { background-size: 185% auto, cover !important; background-position: 50% 100%, center !important; }
  .hero-slide:nth-child(4) { background-size: 170% auto, cover !important; background-position: 52% 100%, center !important; }
  .hero-slide:nth-child(2)::after, .hero-slide:nth-child(4)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%;
    background: linear-gradient(180deg, #042d62 0%, #042d62 45%, rgba(4, 45, 98, 0) 100%);
  }
}

/* Home header on a phone: Book Now is the solid button and View Expeditions
   the outline one, so the swing shows through behind it */
@media (max-width: 720px) {
  .hero-actions .btn:first-child { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .7); }
  .hero-actions .btn:nth-child(2) { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
}

/* Why Indonesia: the reef area artwork is wide, so it gets a wide slot to
   match the others' size (all screens) */
.indo-ic[src*="reef_area"] { width: 104px; height: 64px; }

/* Home, Why SORCE, Science-driven card on a phone: the photo enlarged and
   anchored to the bottom, lifting the diver clear of the words */
@media (max-width: 860px) {
  .wb-p img[src*="science-driven"], .wb-p img[src*="why-sorce-educational"] { top: auto; bottom: 0; height: 132%; object-position: 50% 100% !important; }
}
@media (max-width: 860px) {
  /* the turtle photo is landscape: shown whole across the top, fading into the water */
  .wb-p img[src*="unforgettable-experience"] {
    top: 0; bottom: auto; height: auto; aspect-ratio: 4 / 3; transform: scale(1.14); transform-origin: 62% 30%; object-position: 50% 50% !important;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  }
  .wb-p:has(img[src*="unforgettable-experience"]) { background: #0b5bb0; }
}

/* About, Three pillars, Education card on a phone: the group lifted above the words */
@media (max-width: 900px) {
  .pw-card img[src*="three-pillars-education-outreach"] { inset: auto 0 0 0; height: 150%; object-position: 50% 100% !important; }
}

/* Divemaster photo strip on a phone: the boat photo shows more of the top,
   so the divers' faces are not cut off */
@media (max-width: 720px) {
  .strip-shot img[src*="photo-strip-3"] { object-position: 50% 42% !important; }
}

/* CRA photo strip on a phone: the wide last photo shown whole, so both
   divers' faces and the corals they are planting are in view */
@media (max-width: 720px) {
  .strip-shot:last-child:has(img[src*="conservation-research-assistant-photo-strip-3"]) { aspect-ratio: 4 / 3; }
  .strip-shot img[src*="conservation-research-assistant-photo-strip-3"] { object-position: 50% 50% !important; }
}

/* Field Sites intro: inset sits lower so it clears the boat in the aerial */
.fs-intro-media { padding-bottom: 110px; }
.fs-intro-media .ed-photo-inset { bottom: 0; }

/* Contact: photo under the intro copy, filling the left column */
.ct-photo { margin: 32px 0 0; border: 8px solid var(--paper); box-shadow: var(--shadow-lg); transform: rotate(-2deg); max-width: 440px; }
.ct-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .ct-photo { display: none; } }

/* Fundraiser tip box: sits lower so it covers less of the photo */
@media (min-width: 721px) { .fz2 .fz-tip { bottom: -24px; } }

/* About, Who we are: two landscape photos stacked */
.intro-media.intro-pair { display: flex; flex-direction: column; gap: 16px; min-height: 0; aspect-ratio: auto; }
.intro-media.intro-pair img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* a year range (2018-19) needs smaller type to fit the tile */
.pub-year.pub-year-long { font-size: 1.15rem; letter-spacing: -.01em; }
@media (max-width: 720px) { .pub-year.pub-year-long { font-size: .95rem; } }

/* ---------- "how you found us" prompt (main.js) ---------- */
.ref-ask {
  position: fixed; left: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: 70; width: min(420px, calc(100vw - 32px));
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; color: var(--ink);
  border-top: 4px solid var(--accent);
  box-shadow: 0 14px 36px rgba(4, 45, 98, .28);
  padding: 18px 20px 16px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ref-ask.is-shown { opacity: 1; transform: none; }
.ref-ask-fish { width: 52px; height: 52px; flex: none; margin-top: 2px; }
.ref-ask-body { flex: 1; min-width: 0; }
.ref-ask-h { font-size: 1.02rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: var(--ink); }
.ref-ask-p { font-size: .88rem; line-height: 1.55; margin: 0 0 14px; color: var(--muted); }
.ref-ask-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ref-ask-more { font-size: .84rem; font-weight: 600; color: var(--accent-text); }
.ref-ask.is-thanks { align-items: center; }
.ref-ask.is-thanks .ref-ask-h { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ref-ask { transition: opacity .01s linear; transform: none; } }
@media (max-width: 720px) {
  .ref-ask { left: 0; right: 0; bottom: 0; width: auto; padding: 14px 16px 16px; gap: 12px; }
  .ref-ask-fish { width: 40px; height: 40px; }
  .ref-ask-h { font-size: .98rem; }
  .ref-ask-p { font-size: .85rem; margin-bottom: 12px; }
  .ref-ask-actions .btn { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; }
  .ref-ask-more { flex-basis: 100%; text-align: center; }
}
@media print { .ref-ask { display: none; } }

/* Cookies page: the two switches */
.ref-choices { margin: 18px 0 28px; padding: 18px 20px; background: var(--shell); }
.ref-choices-h { margin: 0 0 12px; font-weight: 700; color: var(--ink); }
.ref-choices-row { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.ref-choices label { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 260px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ref-choices label input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.ref-choices label small { display: block; font-weight: 400; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.ref-choices-note { margin: 12px 0 0; font-size: .86rem; color: var(--muted); }

/* enquiry reference on the thank-you messages */
.ct-ref { display: block; margin-top: 6px; font-weight: 400; color: var(--ink); }
.ct-ref strong, .done-ref strong, .cb-sent-ref strong { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--ink); }
.done-ref { color: var(--ink); font-size: .98rem; }
.cb-sent .cb-sent-ref { margin-top: .8em; color: var(--ink); }

/* Cookies page: what the browser holds now */
.ref-choices-held { margin: 12px 0 0; font-size: .9rem; color: var(--ink); }
.ref-choices-note:empty { display: none; }

/* About, "Our story": the print becomes a slideshow of the years, captioned
   by hand in the white strip at the bottom (main.js, data-story-slides) */
.story-slides { position: relative; width: 100%; }
.story-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--shell); }
.story-print .story-frame img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease); }
.story-print .story-frame img.is-on { opacity: 1; }
.story-cap { position: absolute; left: 16px; right: 116px; bottom: 6px; font-family: 'Caveat', cursive; font-weight: 600;
  font-size: 1.3rem; line-height: 1.2; color: var(--navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-dots { position: absolute; right: 12px; bottom: 15px; display: flex; gap: 4px; }
.story-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--blue-200); cursor: pointer; }
.story-dots button[aria-current="true"] { background: var(--blue-600); }
.story-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .story-print .story-frame img { transition: none; } }
@media (max-width: 720px) { .story-cap { font-size: 1.15rem; } }

/* a second intro paragraph under a section heading */
.section-head .section-intro + .section-intro { margin-top: 12px; }

/* Publications opener: the documents set as real print (Option B, 13 Nov 2026).
   Real type set small instead of grey bars, hairline rules, fine charts,
   gentler tilts, a layered shadow and a full-photo annual cover. */
.pub-stack-hx .pub-sheet {
  outline: 1px solid rgba(4, 45, 98, .06); outline-offset: -1px;
  box-shadow: 0 1px 1px rgba(4, 45, 98, .08), 0 4px 8px -4px rgba(4, 45, 98, .12),
              0 18px 36px -18px rgba(4, 45, 98, .28), 0 46px 70px -40px rgba(4, 45, 98, .35);
}
.pub-stack-hx .pub-sheet-report { --r: -3.5deg; }
.pub-stack-hx .pub-sheet-paper  { --r: 2.2deg; }
.pub-stack-hx .pub-sheet-annual { --r: -2.6deg; }
.pub-stack-hx .pub-sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%, rgba(4,45,98,.025) 100%);
}
.pub-stack-hx .hx-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 2.2em 2.1em 1.7em; }
.pub-stack-hx .hx-body-report { padding-top: 1.5em; }
.pub-stack-hx .hx-kick { display: block; font-size: .56em; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-600); }
.pub-stack-hx .hx-rule { display: block; height: 1px; background: var(--navy-900); opacity: .85; margin: .9em 0 1.1em; }
.pub-stack-hx .hx-title { display: block; font-family: var(--font-display); font-weight: 600; color: var(--navy-900); font-size: 1.12em; line-height: 1.22; }
.pub-stack-hx .hx-meta { display: block; margin-top: .7em; font-size: .5em; letter-spacing: .04em; color: var(--muted); line-height: 1.5; }
.pub-stack-hx .hx-h { display: block; margin: 1.2em 0 .5em; font-size: .5em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--navy-900); }
.pub-stack-hx .hx-h-first { margin-top: 0; }
.pub-stack-hx .hx-text { display: block; font-size: .47em; line-height: 1.62; color: rgba(4, 45, 98, .55); text-align: justify; hyphens: auto; overflow: hidden; }
.pub-stack-hx .hx-fill { flex: 1; min-height: 0; margin-top: 1em; }
.pub-stack-hx .hx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; align-items: start; margin-top: 1.1em; }
.pub-stack-hx .hx-fig { display: block; width: 100%; height: auto; }
.pub-stack-hx .hx-cap { display: block; font-size: .42em; color: var(--muted); margin-top: .4em; }
.pub-stack-hx .hx-foot { display: flex; justify-content: space-between; margin-top: 1em; padding-top: .7em; border-top: 1px solid rgba(4, 45, 98, .14); font-size: .42em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pub-stack-hx .hx-table { display: block; font-size: .44em; color: var(--navy-900); }
.pub-stack-hx .hx-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1em; padding: .55em 0; border-bottom: 1px solid rgba(4, 45, 98, .12); }
.pub-stack-hx .hx-th { padding-top: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--navy-900); }
.pub-stack-hx .hx-tr i { display: block; height: .55em; width: var(--w); background: rgba(4, 45, 98, .18); border-radius: 1px; }
.pub-stack-hx .hx-band { display: block; padding: 1.5em 2.1em 1.3em; background: var(--navy-900); }
.pub-stack-hx .hx-band .hx-kick { color: var(--blue-200); }
.pub-stack-hx .hx-band .hx-title { color: #fff; margin-top: .6em; }
.pub-stack-hx .hx-band .hx-meta { color: rgba(255, 255, 255, .65); }
.pub-stack-hx .hx-cover { position: absolute; inset: 0; }
.pub-stack-hx .hx-cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.12) saturate(1.08); }
.pub-stack-hx .hx-cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 45, 98, 0) 48%, rgba(4, 45, 98, .5) 66%, rgba(4, 45, 98, .94) 86%); }
.pub-stack-hx .hx-cover-body { position: relative; z-index: 1; margin-top: auto; padding: 2.1em; display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.pub-stack-hx .hx-logo { width: 34%; height: auto; margin-bottom: 1.6em; }
.pub-stack-hx .hx-cover-body .hx-kick { color: var(--blue-200); }
.pub-stack-hx .hx-year { display: block; font-family: var(--font-display); font-weight: 300; font-size: 3.6em; line-height: 1; letter-spacing: -.02em; margin: .25em 0 .15em; }
.pub-stack-hx .hx-cover-title { display: block; font-size: .78em; color: rgba(255, 255, 255, .88); }
.pub-stack-hx .hx-cover-rule { display: block; width: 2.6em; height: 2px; background: var(--blue-400); margin-top: 1.1em; }

/* the report title wraps before the research article that overlaps it */
.pub-stack-hx .hx-band .hx-title, .pub-stack-hx .hx-band .hx-meta { max-width: 60%; }

/* the last section fills the sheet down to its footer; paragraphs past the
   bottom are simply cut off, the way a page continues overleaf */
.pub-stack-hx .hx-fill { display: flex; flex-direction: column; gap: .5em; overflow: hidden; }
.pub-stack-hx .hx-fill .hx-text { flex: none; }
.pub-stack-hx .hx-gap { margin-top: 1em; }
.pub-stack-hx .hx-h + .hx-fill { margin-top: 0; }

/* text beside a chart takes the chart's height and stops there */
.pub-stack-hx .hx-cols { align-items: stretch; }
.pub-stack-hx .hx-beside { height: 0; min-height: 100%; overflow: hidden; }