/* ==========================================================================
   Extraordinary Living Task Force :: landing page
   Structure and band system ported from the Pacesetter prototype.
   Everything visual — palette, type, pattern, buttons — is Task Force brand.
   Bootstrap 5.3 supplies the grid only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* straight from the style guide */
  --blue:      #1f4e6c;   /* the dominant ground */
  --blue-deep: #163a51;   /* the darker step, for footer and depth */
  --blue-lift: #24597b;   /* a lift for hover states and hairline warmth */
  --gold:      #e2d19e;   /* the accent on dark grounds */
  --gold-ink:  #8a6d28;   /* the same gold, darkened to hold on light grounds */
  --cream:     #f4f1e9;   /* warm paper */
  --cream-2:   #eae5d8;
  --white:     #fffdf8;

  /* surface tokens, swapped per band */
  --bg:      var(--cream);
  --fg:      var(--blue);
  --fg-soft: #5d6f7d;
  --hair:    rgba(31,78,108,.18);
  --accent:  var(--gold-ink);

  /* Bourbon (Adobe Fonts) carries every heading. It is uppercase-only and
     ships a single weight, so display rules ask for 400 — requesting 700
     would only trigger a faux bold.
     Everything else runs on one neutral condensed grotesque, so subheads and
     body read as a single voice under Bourbon rather than two near-identical
     faces. Swap in "acumin-pro-condensed" (Adobe) here and in --body if you
     want the whole page on licensed type. */
  --display: "bourbon", "Big Shoulders Display", Impact, sans-serif;
  /* Bourbon Lines — the inline cut, hero headline only. Falls back to the
     solid cut, which is the right degradation if the kit ever lapses. */
  --display-lines: "bourbon-lines", "bourbon", "Big Shoulders Display", Impact, sans-serif;
  --sub:     "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --body:    "Barlow Semi Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;

  --pad-y:  clamp(5.5rem, 10vw, 11rem);
  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);
  --ease:   cubic-bezier(.22,.61,.36,1);
  --straddle-pull: clamp(4rem, 9vw, 9rem);   /* how far the straddle image rides up */
  --fstrip-pad:    clamp(1.6rem, 2.6vw, 2.2rem);  /* air above AND below the 8-F row */

}

/* band themes — drop one on any .band and everything inside re-themes */
.t-blue  { --bg: var(--blue);      --fg: var(--cream); --fg-soft: #a8bcc9; --hair: rgba(226,209,158,.22); --accent: var(--gold); }
.t-deep  { --bg: var(--blue-deep); --fg: var(--cream); --fg-soft: #9db3c1; --hair: rgba(226,209,158,.18); --accent: var(--gold); }
.t-cream { --bg: var(--cream);     --fg: var(--blue);  --fg-soft: #5d6f7d; --hair: rgba(31,78,108,.18);  --accent: var(--gold-ink); }
.t-white { --bg: var(--white);     --fg: var(--blue);  --fg-soft: #5d6f7d; --hair: rgba(31,78,108,.15);  --accent: var(--gold-ink); }

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--blue);
  font-family: var(--body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;          /* Bourbon ships a single weight */
  line-height: .96;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.4vw, 7.4rem); }
h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.04; }

h4 {
  font-family: var(--sub);
  font-weight: 600;
  font-size: clamp(1.16rem, 1.5vw, 1.38rem);
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0 0 1.2rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: var(--blue); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }

.band {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--pad-y);
  position: relative;
  isolation: isolate;
}
.band--tight  { --pad-y: clamp(3.5rem, 6vw, 6rem); }
.band--flushb { padding-bottom: 0; }
.band--overlapped { padding-bottom: calc(var(--pad-y) + var(--straddle-pull)); }
.band--flusht { padding-top: 0; }

/* The brand pattern is a few LARGE hexagons bleeding off an edge, the way the
   style guide uses it — not a fine repeating texture. Opt-in per band, and
   never on a band whose content is already hexagonal. */
.hexart {
  position: absolute; z-index: -1; pointer-events: none;
  /* Sized by HEIGHT and vertically centred, so the cluster can never be
     sliced by the band's top or bottom edge — a hexagon cut off at a colour
     change reads as a mistake. It bleeds off the LEFT or RIGHT only, which
     reads as intent. */
  height: clamp(280px, 64%, 620px);
  width: auto;
  top: 50%; transform: translateY(-50%);
  color: var(--accent); opacity: .32;
}
.hexart--tr { right: -13%; }
.hexart--bl { left: -13%; }
.t-cream .hexart, .t-white .hexart { opacity: .2; }

/* a soft lift so the dark bands never read flat */
.band.t-blue::after,
.band.t-deep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 65% at 12% 0%, rgba(226,209,158,.07), transparent 60%);
}

/* --------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */
.label {
  font-family: var(--sub);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0 0 1.4rem;
  line-height: 1.6;
}

.lede {
  font-family: var(--sub);
  font-size: clamp(1.32rem, 2.05vw, 1.86rem);
  font-weight: 500;
  line-height: 1.34;
  color: var(--fg);
  max-width: 30ch;
  letter-spacing: .002em;
}
.lede--wide { max-width: 42ch; }

.copy { max-width: 56ch; color: var(--fg-soft); }
.copy strong { color: var(--fg); font-weight: 600; }
.copy--wide { max-width: 68ch; }

/* hairlines do the structural work, not boxes */
.hair { border: 0; border-top: 1px solid var(--hair); margin: 0; opacity: 1; }
.tick { width: 2.6rem; height: 2px; background: var(--accent); display: block; margin-bottom: 1.8rem; }
.rule-l { border-left: 1px solid var(--hair); padding-left: clamp(1.5rem, 3vw, 3.5rem); }

/* the section intro pairing used across every band */
.intro > span {
  font-family: var(--sub); font-size: .84rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 1.4rem;
}
.intro__note p { color: var(--fg-soft); max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   Rounded rectangle, per the style guide's UI page. Solid blue on light
   grounds, solid cream on dark. The fill sweeps in from the left on hover.
   -------------------------------------------------------------------------- */
.btn-tf {
  display: inline-flex; align-items: center; gap: .8rem;
  /* Measured, not assumed: Barlow Semi Condensed's ascent and descent are
     near enough symmetric that flex centring already lands the caps on the
     box centre. An optical nudge here pushes them low. */
  padding: 1.02rem 1.9rem;
  border: 2px solid var(--blue);
  border-radius: 10px;
  background: var(--blue);
  color: var(--cream);
  font-family: var(--sub);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-tf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.btn-tf:hover::before { transform: scaleX(1); }
.btn-tf:hover { color: var(--blue); border-color: var(--gold); }
.btn-tf svg { width: 15px; height: 11px; flex: none; transition: transform .4s var(--ease); }
.btn-tf:hover svg { transform: translateX(4px); }

/* on dark grounds the primary flips to cream */
.t-blue .btn-tf, .t-deep .btn-tf, .hero .btn-tf {
  background: var(--cream); border-color: var(--cream); color: var(--blue);
}
.t-blue .btn-tf:hover, .t-deep .btn-tf:hover, .hero .btn-tf:hover { color: var(--blue); border-color: var(--gold); }

/* secondary: outline only */
.btn-tf--ghost { background: transparent; border-color: var(--accent); color: var(--fg); }
.t-blue .btn-tf--ghost, .t-deep .btn-tf--ghost, .hero .btn-tf--ghost { background: transparent; border-color: var(--gold); color: var(--cream); }
.btn-tf--ghost:hover, .t-blue .btn-tf--ghost:hover, .hero .btn-tf--ghost:hover { color: var(--blue); }

.btn-tf--sm { padding: .72rem 1.25rem; font-size: .86rem; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px;
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding-block: 1.1rem;
  background: transparent;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-stuck {
  background: var(--blue);
  padding-block: .6rem;
  box-shadow: 0 1px 0 rgba(226,209,158,.18);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hdr__logo img { width: clamp(74px, 8vw, 104px); transition: width .4s var(--ease); }
.hdr.is-stuck .hdr__logo img { width: clamp(44px, 4.2vw, 54px); }

.nav { display: none; align-items: center; gap: clamp(1.3rem, 2.6vw, 2.6rem); }
@media (min-width: 992px) { .nav { display: flex; } }
.nav a:not(.btn-tf) {
  font-family: var(--sub); font-size: .93rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cream);
  position: relative; padding-bottom: 3px;
}
.nav a:not(.btn-tf)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:not(.btn-tf):hover::after { transform: scaleX(1); }
/* gold CTA — reads on the transparent hero, on the solid blue stuck header,
   and inside the blue mobile panel, all of which a blue button vanishes into */
.btn-tf--gold, .t-blue .btn-tf--gold, .t-deep .btn-tf--gold, .hero .btn-tf--gold {
  background: var(--gold); border-color: var(--gold); color: var(--blue);
}
.btn-tf--gold::before { background: var(--cream); }
.btn-tf--gold:hover, .t-blue .btn-tf--gold:hover { color: var(--blue); border-color: var(--cream); }

.hdr__toggle {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: transparent; border: 1px solid rgba(226,209,158,.4); border-radius: 8px;
  color: var(--cream); cursor: pointer;
}
@media (min-width: 992px) { .hdr__toggle { display: none; } }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--blue); color: var(--cream); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* Parallax + slow zoom are split across two elements so they never fight over
   `transform`: JS translates the <picture>, CSS scales the <img> inside it.

   The picture is 126% tall and pulled up 26%, so at rest it covers the hero
   exactly while holding 26% of headroom above. JS drifts it DOWN as you
   scroll, and clamps at that headroom so the top edge can never be exposed. */
.hero__media picture {
  position: absolute; left: 0; right: 0;
  top: -26%; height: 126%;
  display: block;
  will-change: transform;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  transform-origin: center 45%;
  animation: heroZoom 30s cubic-bezier(.22,.61,.36,1) both;
}

/* A narrow viewport crops a tall slice out of the middle of the frame, which
   lands on a staff member's back. Pinning right picks up the trailer and the
   people around it, and keeps the busy area above the headline. */
@media (max-width: 767.98px) {
  .hero__media img { object-position: 88% 50%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero__media img { object-position: 72% 55%; }
}

/* A slow push in. One-way and eased, so it decelerates into its final framing
   rather than looping, which reads as a glitch on a static hero. */
@keyframes heroZoom {
  from { transform: scale(1.01); }
  to   { transform: scale(1.11); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(22,58,81,.92) 0%, rgba(22,58,81,.55) 34%, rgba(22,58,81,.86) 78%, rgba(22,58,81,.97) 100%),
    linear-gradient(90deg, rgba(22,58,81,.9) 0%, rgba(22,58,81,.25) 62%);
}
.hero__in {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(9rem, 16vh, 13rem) var(--fstrip-pad);
}
.hero h1 {
  max-width: 16ch;
  position: relative;
  isolation: isolate;          /* contains the ghost's negative z-index */
}

/* The drop shadow is the INLINE cut, offset behind the solid one — a
   text-shadow cannot do this, since it only offsets a silhouette of the same
   glyphs. So the ghost is a second layer carrying the same string, set in
   bourbon-lines, sitting one notch down-right in gold.

   It inherits every metric that affects wrapping (size, leading, tracking,
   width, balance), so both layers break identically. Bourbon Lines shares its
   advance widths with the regular cut, so the two register exactly. */
.hero h1::before {
  content: attr(data-ghost);
  position: absolute;
  left: .025em;
  top: .025em;
  width: 100%;
  z-index: -1;
  font-family: var(--display-lines);
  color: var(--gold);
  pointer-events: none;
}

.hero__lede {
  font-family: var(--sub); font-weight: 500;
  font-size: clamp(1.2rem, 1.75vw, 1.6rem);
  line-height: 1.38; color: var(--cream); max-width: 44ch;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}
.hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* the 8 Fs as a hairline strip across the bottom of the hero */
.fstrip { border-top: 1px solid rgba(226,209,158,.28); margin-top: clamp(2.4rem, 4.5vw, 3.4rem); padding-top: var(--fstrip-pad); }
.fstrip ul {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .7rem 1rem; list-style: none; margin: 0; padding: 0;
}
@media (min-width: 560px)  { .fstrip ul { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .fstrip ul { grid-template-columns: repeat(8, auto); justify-content: space-between; } }
.fstrip li {
  font-family: var(--sub); font-size: clamp(.82rem, 1.05vw, .96rem); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* --------------------------------------------------------------------------
   8. PULL QUOTE
   -------------------------------------------------------------------------- */
.pquote { border-left: 2px solid var(--accent); padding-left: clamp(1.5rem, 3vw, 2.8rem); }
.pquote p {
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(1.9rem, 3.5vw, 3.2rem); line-height: 1; color: var(--fg);
  margin: 0 0 1.2rem;
}
.pquote cite {
  font-family: var(--sub); font-style: normal; font-size: .82rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}

/* --------------------------------------------------------------------------
   10. NUMBERED / HAIRLINE LISTS
   -------------------------------------------------------------------------- */
.nlist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.nlist li {
  counter-increment: n;
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.4rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  border-top: 1px solid var(--hair);
}
.nlist li:last-child { border-bottom: 1px solid var(--hair); }
.nlist li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--sub); font-size: .92rem; font-weight: 600;
  letter-spacing: .14em; color: var(--accent); padding-top: .3rem;
}
.nlist h4 { margin-bottom: .5rem; }
.nlist p { color: var(--fg-soft); margin: 0; max-width: 54ch; }

/* the plain hairline list (no numbers) */
.hlist { list-style: none; margin: 0; padding: 0; }
.hlist li {
  padding: clamp(1.1rem, 1.9vw, 1.5rem) 0;
  border-top: 1px solid var(--hair);
  font-family: var(--sub); font-weight: 500;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.32;
  display: flex; gap: 1.1rem; align-items: baseline;
}
.hlist li:last-child { border-bottom: 1px solid var(--hair); }
.hlist li::before {
  content: ""; flex: none; width: 17px; height: 19px; margin-top: .12rem;
  background: var(--accent);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}

/* --------------------------------------------------------------------------
   11. STRADDLE IMAGE
   Pulled up out of one band and into the next, so the bands overlap
   rather than seam.
   -------------------------------------------------------------------------- */
.straddle { position: relative; margin-top: calc(-1 * var(--straddle-pull)); }
.straddle img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 32%; border-radius: 4px; max-height: 600px; }
.straddle__veil {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(180deg, rgba(22,58,81,.02) 30%, rgba(22,58,81,.62) 68%, rgba(22,58,81,.92) 100%);
}
.straddle__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.straddle__cap h2 { color: var(--cream); max-width: 18ch; }
.straddle__cap p {
  font-family: var(--sub); font-weight: 500; color: var(--cream);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem); line-height: 1.36;
  max-width: 42ch; margin: .9rem 0 0;
}

/* --------------------------------------------------------------------------
   12. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } }
.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--sub); font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 1.06rem; color: var(--fg);
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: .92rem 1.05rem;
  width: 100%;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.t-blue .field input, .t-blue .field textarea, .t-blue .field select,
.t-deep .field input, .t-deep .field textarea, .t-deep .field select {
  background: rgba(255,255,255,.06); color: var(--cream); border-color: rgba(226,209,158,.32);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-soft); opacity: .7; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,109,40,.14);
}
.t-blue .field input:focus, .t-blue .field textarea:focus { box-shadow: 0 0 0 3px rgba(226,209,158,.18); }
.field textarea { min-height: 128px; resize: vertical; }
.form__note { font-size: .95rem; color: var(--fg-soft); }

/* --------------------------------------------------------------------------
   13. MEMBERS
   A typographic grid, not a logo wall. Fifteen organisations in fifteen
   visual languages would fight each other; the brand's own display face
   makes them read as one body.
   -------------------------------------------------------------------------- */
.members { display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .members { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .members { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1360px) { .members { grid-template-columns: repeat(4, 1fr); } }

.member {
  padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.8rem) clamp(1.6rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid var(--hair);
  position: relative;
}
.member h3 { font-size: clamp(1.25rem, 1.75vw, 1.62rem); color: var(--gold); margin-bottom: .7rem; }
.member ul { list-style: none; margin: 0; padding: 0; }
.member li {
  font-family: var(--sub); font-size: 1.02rem; font-weight: 400;
  color: var(--fg-soft); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.foot { background: var(--blue-deep); color: var(--cream); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__mark { width: 84px; margin-bottom: 1.6rem; }
.foot__blurb { color: #9db3c1; max-width: 34ch; font-size: 1.02rem; }
.foot__bar {
  border-top: 1px solid rgba(226,209,158,.16);
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  font-family: var(--sub); font-size: .88rem; letter-spacing: .06em; color: #8ea6b4;
}
.foot a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   15. REVEAL
   -------------------------------------------------------------------------- */
[data-animate] .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-animate].is-in .rv { opacity: 1; transform: none; }
[data-animate].is-in .rv:nth-child(2) { transition-delay: .09s; }
[data-animate].is-in .rv:nth-child(3) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media picture { transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-animate] .rv { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. GRID GUTTERS
   Bootstrap rows use negative margins for gutters. Never add column-gap
   to a .row — set --bs-gutter-x instead.
   -------------------------------------------------------------------------- */
.g-wide { --bs-gutter-x: clamp(1.5rem, 5vw, 6rem); }
.g-mid  { --bs-gutter-x: clamp(1.25rem, 3vw, 3rem); }
.rg-mid { --bs-gutter-y: clamp(2rem, 4vw, 3.5rem); }

/* --------------------------------------------------------------------------
   18. MOBILE NAV PANEL
   -------------------------------------------------------------------------- */
.mnav {
  background: var(--blue);
  color: var(--cream);
  width: min(88vw, 420px);
  display: flex; flex-direction: column;
}
.mnav__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 6vw, 2rem);
  border-bottom: 1px solid rgba(226,209,158,.2);
}
.mnav__top img { width: 54px; }
.mnav__close {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(226,209,158,.35);
  border-radius: 8px; color: var(--cream); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.mnav__close:hover { border-color: var(--gold); color: var(--gold); }

.mnav__links { display: flex; flex-direction: column; padding: 0 clamp(1.25rem, 6vw, 2rem); }
.mnav__links a {
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(1.7rem, 6.8vw, 2.2rem); line-height: 1;
  color: var(--cream);
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(226,209,158,.16);
  transition: color .3s var(--ease);
}
.mnav__links a:hover, .mnav__links a:focus-visible { color: var(--gold); }

.mnav__foot { margin-top: auto; padding: clamp(1.25rem, 6vw, 2rem); }
.mnav__foot .btn-tf { width: 100%; justify-content: center; }

/* Scroll lock while the panel is open.

   Bootstrap locks scroll by setting overflow:hidden on <body>, which reaches
   the viewport only via the CSS rule that propagates the body's overflow up
   when the root element's overflow is `visible`. This page sets
   `html { overflow-x: clip }` so the hexagon art can bleed off-edge, and that
   disqualifies the propagation — Bootstrap's lock silently does nothing and
   the page scrolls behind the panel. So lock the root element directly. */
html.nav-open { overflow: hidden; }

/* and stop a scroll inside the panel from chaining to the page behind it */
.mnav { overscroll-behavior: contain; }

/* --------------------------------------------------------------------------
   19. ANCHOR OFFSET
   The header is fixed, so an anchor would otherwise land underneath it.
   -------------------------------------------------------------------------- */
:where(section[id], main[id]) { scroll-margin-top: clamp(72px, 11vw, 104px); }

/* The hexagon accent needs room to read as a background. At narrow widths it
   crosses live copy instead, so it comes out below the tablet breakpoint. */
@media (max-width: 767.98px) { .hexart { display: none; } }
@media (max-width: 900px) { .straddle img { aspect-ratio: 4 / 3; max-height: 460px; } }

/* <picture> is an inline wrapper by default, which breaks the hero's
   fill and the straddle's aspect ratio. */
.straddle picture, .pquote + * picture, .band picture { display: block; }

/* --------------------------------------------------------------------------
   21. HONEYCOMB TEXTURE
   A true honeycomb, unlike the earlier attempt that seamed. The hexagon is
   pointy left/right, so it tiles in COLUMNS: column pitch 1.5r, adjacent
   columns offset vertically by sqrt(3)r/2. With r=22 the repeating cell is
   3r x sqrt(3)r = 66 x 38.105, carrying the two column-A hexagons on each
   vertical edge plus the column-B hexagon between them.

   Masked to fade at the top and bottom so it never hard-cuts at the band
   boundary — a pattern sliced by a colour change reads as a mistake.
   -------------------------------------------------------------------------- */
.honey::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='38.105' viewBox='0 0 66 38.105'%3E%3Cpath fill='none' stroke='%23e2d19e' stroke-width='1.4' d='M19.50 -4.33Q22.00 0.00 19.50 4.33L13.50 14.72Q11.00 19.05 6.00 19.05L-6.00 19.05Q-11.00 19.05 -13.50 14.72L-19.50 4.33Q-22.00 0.00 -19.50 -4.33L-13.50 -14.72Q-11.00 -19.05 -6.00 -19.05L6.00 -19.05Q11.00 -19.05 13.50 -14.72ZM19.50 33.77Q22.00 38.11 19.50 42.44L13.50 52.83Q11.00 57.16 6.00 57.16L-6.00 57.16Q-11.00 57.16 -13.50 52.83L-19.50 42.44Q-22.00 38.11 -19.50 33.77L-13.50 23.38Q-11.00 19.05 -6.00 19.05L6.00 19.05Q11.00 19.05 13.50 23.38ZM85.50 -4.33Q88.00 0.00 85.50 4.33L79.50 14.72Q77.00 19.05 72.00 19.05L60.00 19.05Q55.00 19.05 52.50 14.72L46.50 4.33Q44.00 0.00 46.50 -4.33L52.50 -14.72Q55.00 -19.05 60.00 -19.05L72.00 -19.05Q77.00 -19.05 79.50 -14.72ZM85.50 33.77Q88.00 38.11 85.50 42.44L79.50 52.83Q77.00 57.16 72.00 57.16L60.00 57.16Q55.00 57.16 52.50 52.83L46.50 42.44Q44.00 38.11 46.50 33.77L52.50 23.38Q55.00 19.05 60.00 19.05L72.00 19.05Q77.00 19.05 79.50 23.38ZM52.50 14.72Q55.00 19.05 52.50 23.38L46.50 33.77Q44.00 38.11 39.00 38.11L27.00 38.11Q22.00 38.11 19.50 33.77L13.50 23.38Q11.00 19.05 13.50 14.72L19.50 4.33Q22.00 0.00 27.00 0.00L39.00 0.00Q44.00 0.00 46.50 4.33Z'/%3E%3C/svg%3E");
  background-position: center;
  opacity: .09;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
@media (max-width: 767.98px) {
  .honey::before { background-size: 48px 27.71px; opacity: .075; }
}

/* --------------------------------------------------------------------------
   22. FORM STATUS + HONEYPOT
   -------------------------------------------------------------------------- */

/* The honeypot must be invisible to people but still fillable by a bot, so it
   is moved off-screen rather than display:none — some bots skip hidden inputs
   but happily fill anything still in the layout. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.formnote {
  margin: 0 0 1.4rem;
  padding: .95rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: var(--white);
  font-family: var(--sub);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--fg);
}
.formnote--ok   { border-color: var(--gold-ink); border-left-width: 3px; }
.formnote--bad  { border-color: #a8321f;         border-left-width: 3px; }
.formnote b { display: block; font-weight: 600; margin-bottom: .15rem; }
.turnstile:not(:empty) { margin-top: .4rem; }