/* --- css/base/base.css --- */
/* base/base.css — neutral, client-agnostic foundation.
   Brand values live in brand.css (loaded next in the manifest), which remaps
   the semantic slots. Nothing client-specific belongs in this file. */

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

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

body {
  margin: 0;
}

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

img {
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:root {
  /* Neutral ramp (warm gray). The ramp is the only place raw hex lives. */
  --n-0: #ffffff;
  --n-50: #f7f6f3;
  --n-100: #efede8;
  --n-200: #e0ddd5;
  --n-300: #c9c5ba;
  --n-500: #8a877e;
  --n-700: #4c4a45;
  --n-900: #1a1917;

  /* Semantic slots — components read THESE, never the ramp directly.
     brand.css points them at client colours; the defaults are DC-neutral. */
  --color-ink: var(--n-900);
  --color-ink-soft: var(--n-700);
  --color-surface: var(--n-0);
  --color-surface-2: var(--n-50);
  --color-surface-3: var(--n-100);
  --color-primary: var(--n-900);
  --color-accent: var(--n-700);
  --color-line: var(--n-200);

  /* Type slots (brand.css sets the families) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  /* Fluid type scale */
  --text-xs: 0.8125rem;
  --text-s: 0.9375rem;
  --text-m: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-l: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  /* Spacing scale — em-based so the whole system scales from one font-size */
  --padding-xl: 12.5em;
  --padding-l: 10em;
  --padding-m: 7.5em;
  --padding-s: 5em;
  --padding-xs: 3.75em;

  /* Gaps */
  --gap-l: 1.875em;
  --gap-m: 1.5em;
  --gap-s: 1em;
  --gap-xs: 0.75em;

  /* Space — element-level spacing between the gap scale (intra-component)
     and the padding scale (section rhythm). Use for content-stack breathing
     room: hero content, intro offsets, in-section blocks. */
  --space-xs: 0.5em;
  --space-s: 1em;
  --space-m: 2em;
  --space-l: 4em;
  --space-xl: 6em;

  /* Radius */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 24px;

  /* Layout */
  --container-padding: 20px;
  --max-width: 1600px;

  /* Motion — the signature ease lives here AND in main.js (CustomEase 'dc').
     Durations come in multiples of the default so related animations stay
     in rhythm; the --animation-* composites are drop-in transition values. */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --cubic-bounce: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
  --duration-default: 0.6s;
  --duration-default-half: 0.3s;
  --duration-default-quarter: 0.15s;
  --duration-default-onehalf: 0.9s;
  --duration-default-double: 1.2s;
  --duration-fast: 0.25s;
  --ease-soft: ease-in-out;
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;
}

/* ------------------------- DC scaling system ----------------------------
   The root font-size is derived from the viewport against the design's
   ideal width, so every em-based measurement in the theme (sections,
   components, nav) scales proportionally between the breakpoint stops.
   16px at 1440w desktop, growing to ~21px at 1920w; each breakpoint
   restates its own design-ideal width. */
:root {
  --size-unit: 16;
  /* body font-size at the ideal width, unitless */
  --size-container-ideal: 1440;
  /* design ideal width, unitless */
  --size-container-min: 992px;
  --size-container-max: 1600px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 850;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 480px;
    --size-container-max: 767px;

    --padding-xl: 10em;
    --padding-l: 7.5em;
    --padding-m: 5em;
    --padding-s: 3.75em;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

body {
  font-size: var(--size-font);
  overscroll-behavior: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Native scrollbars hidden — Lenis owns the scroll experience */
body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

.lenis {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Utilities carried from the legacy layer (the last two survivors) */
.link-overlay a,
a.overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  inset: 0;
}

/* Thin reset — no normalize; this and the resets above are the whole layer */
::selection {
  background-color: var(--color-surface-3);
  text-shadow: none;
}

textarea {
  resize: none;
}

button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
}

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

.container.is--m {
  max-width: calc(var(--size-container) * 0.825);
}

.container.is--sm {
  max-width: calc(var(--size-container) * 0.65);
}

.container.is--s {
  max-width: calc(var(--size-container) * 0.5);
}

.main {
  overflow: clip;
}

/* LiteSpeed Cache lazy-load shim (our hosting stack) */
img[data-lazyloaded] {
  opacity: 0;
}

img.litespeed-loaded {
  transition: opacity 0.5s linear 0.2s;
  opacity: 1;
}

/* Visually hidden, kept for screen readers */
.u--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Responsive utilities */
.u--show-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .u--hide-mobile {
    display: none;
  }

  .u--show-mobile {
    display: block;
  }
}

/* --- css/base/brand.css --- */
/* base/brand.css — the ONLY file that knows the client.
   LOCALE PROJECT brand (shared by all four Locale sites). Per-brand deltas
   (~10%) switch on [data-brand] in the generated token sheets — this file
   holds what the brands share: fonts, the semantic colour mapping and the
   component skins that express them.

   Source of truth: Figma "Experience Design | Locale Property Group", pulled
   into design-tokens/*.json and generated as brand-tokens.css + brand-type.css.
   The brand is <html data-brand="homes|wealth|financial|group">.

   The "legacy compat" block remaps the carried legacy variable names onto the
   brand tokens; it shrinks away as legacy.css is dismantled. */

/* Manrope — UI/body (Google, variable, latin). */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-200-800.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* Libre Baskerville — display serif for headings (Google, variable, latin).
   The Figma type scale uses the in-between weights (450, 550, 600). */
@font-face {
  font-family: 'LibreBaskerville';
  src: url('../fonts/LibreBaskerville-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'LibreBaskerville';
  src: url('../fonts/LibreBaskervilleItalic-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'LibreBaskerville', Baskerville, Georgia, serif;
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);

  /* Palette, text colours, radii and the per-brand --color-accent are
     generated into brand-tokens.css from Figma. These map them onto the
     theme's semantic slots. */
  --color-ink: var(--color-text-dark);
  --color-ink-soft: var(--color-text-dark-secondary);
  --color-primary: var(--brand-charcoal);
  --color-surface-2: var(--brand-silver);

  /* ---- Legacy compat: carried variable names → brand tokens ---- */
  --theme-color: var(--color-primary);
  --dark-color: var(--brand-charcoal);
  --light-color: var(--n-0);
  --green-color: var(--color-primary);
  --greenlight-color: var(--n-300);
  --lightgreen-color: var(--n-300);
  --cream-color: var(--color-surface-2);
  --grey-color: var(--color-surface-2);
  --blue-color: var(--n-700);
  --orange-color: var(--n-500);
  --brown-color: var(--n-500);
  --desertsand-color: var(--n-200);
}

/* Dark bands use the Figma charcoal + silver text, not the base theme's warm
   neutral ramp. Attribute selectors (not :where) because section-system.css
   loads after this file; block class selectors still win on order. */
[data-theme-section="dark"] {
  background: var(--brand-charcoal);
  color: var(--color-text-light);
  --color-ink: var(--color-text-light);
  --color-ink-soft: var(--color-text-light-secondary);
  --color-line: color-mix(in srgb, var(--brand-silver) 15%, transparent);
  --color-surface: var(--brand-charcoal);
  --color-surface-2: color-mix(in srgb, var(--brand-silver) 10%, transparent);
  --color-surface-3: color-mix(in srgb, var(--brand-silver) 15%, transparent);
}

[data-theme-section="primary"] {
  color: var(--color-text-light);
  --color-ink: var(--color-text-light);
  --color-ink-soft: var(--color-text-light-secondary);
}

html,
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.5;
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  width: 100%;
  margin: 0 0 0.5em;
}

/* Convention: heading LEVEL is semantic, SCALE is a class — e.g.
   <h1 class="h2"> renders h2-sized. Pick the level for the document
   outline, the class for the design. */
h1,
.h1 {
  font-size: var(--text-2xl);
}

h2,
.h2 {
  font-size: var(--text-xl);
}

h3,
.h3 {
  font-size: var(--text-l);
}

h4,
.h4 {
  font-size: var(--text-m);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* Nav — Locale skin over the section-aware theming (Figma navBar tokens:
   topNavBg-mouseEnter mint, navbar-subtlebtn-onmedia charcoal 30% + blur,
   navBarItem light/dark). The bar that fades in on hover/open is MINT with
   charcoal items, per the design's mouseenter state. */

:root {
  /* The bar surface that fades in on hover/menu-open over media (Figma
     surface/topNavBg-mouseEnter) + its item colour. Read by core/nav.css. */
  --nav-restore-surface: var(--color-accent);
  --nav-restore-ink: var(--brand-charcoal);
}

@media (min-width: 992px) {

  /* Region + search stubs on media: subtle charcoal chip, silver text. */
  [data-nav-theme="dark"] .mega-nav__bar:not(:hover) .mega-nav__bar-link.is--util {
    background-color: rgba(50, 50, 50, 0.3);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-s);
    padding: 0.5em 0.75em;
  }
}

/* --- css/base/brand-tokens.css --- */
/* base/brand-tokens.css — GENERATED by design-tokens/build-foundations.js from
   design-tokens/foundations.json (Figma PiEAExprxGGtshcaUTIrlQ, pulled 2026-09-22).
   Do not edit by hand: change the JSON and rebuild. */

:root {
  --px: calc(var(--size-font) / var(--size-unit));

  --radius-none: 0;
  --radius-xs: calc(4 * var(--px));
  --radius-s: calc(8 * var(--px));
  --radius-m: calc(16 * var(--px));
  --radius-l: calc(24 * var(--px));
  --radius-full: 999em;

  --space-00: 0;
  --space-01: calc(2 * var(--px));
  --space-02: calc(4 * var(--px));
  --space-03: calc(8 * var(--px));
  --space-04: calc(12 * var(--px));
  --space-05: calc(16 * var(--px));
  --space-05b: calc(20 * var(--px));
  --space-06: calc(24 * var(--px));
  --space-06b: calc(24 * var(--px));
  --space-07: calc(35 * var(--px));
  --space-07b: calc(35 * var(--px));
  --space-08: calc(48 * var(--px));
  --space-09: calc(56 * var(--px));
  --space-10: calc(64 * var(--px));
  --space-11: calc(80 * var(--px));
  --space-12: calc(88 * var(--px));
  --padding-block: calc(112 * var(--px));
  --padding-content: calc(56 * var(--px));

  --brand-charcoal: #323232;
  --brand-silver: #f2f2f2;
  --brand-dark-charcoal: #252525;
  --brand-white: #ffffff;
  --brand-haven-green: #9ce3db;
  --brand-sky-blue: #c8d5f5;
  --brand-nectar: #f7d4b7;
  --brand-group-white: #f9f9f9;

  --color-text-dark: var(--brand-charcoal);
  --color-text-dark-secondary: color-mix(in srgb, var(--brand-charcoal) 85%, transparent);
  --color-text-dark-tertiary: color-mix(in srgb, var(--brand-charcoal) 55%, transparent);
  --color-text-light: var(--brand-silver);
  --color-text-light-secondary: color-mix(in srgb, var(--brand-silver) 80%, transparent);
  --color-text-light-tertiary: color-mix(in srgb, var(--brand-silver) 55%, transparent);

  --size-container-ideal: 1600;
  --size-container-min: 1440px;
  --size-container-max: 1600px;
  --container-padding: calc(80 * var(--px));
  --grid-gutter: calc(24 * var(--px));
  --grid-columns: 12;

  --color-accent: var(--brand-haven-green);
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 850;
    --size-container-min: 768px;
    --size-container-max: 991px;
    --container-padding: calc(40 * var(--px));
    --grid-gutter: calc(24 * var(--px));
    --grid-columns: 12;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 393;
    --size-container-min: 320px;
    --size-container-max: 767px;
    --container-padding: calc(15 * var(--px));
    --grid-gutter: calc(16 * var(--px));
    --grid-columns: 6;

    --radius-m: calc(12 * var(--px));
    --radius-l: calc(18 * var(--px));
    --space-03: calc(6 * var(--px));
    --space-04: calc(10 * var(--px));
    --space-05: calc(12 * var(--px));
    --space-05b: calc(16 * var(--px));
    --space-06: calc(16 * var(--px));
    --space-07: calc(20 * var(--px));
    --space-08: calc(35 * var(--px));
    --space-09: calc(35 * var(--px));
    --space-10: calc(48 * var(--px));
    --padding-block: calc(56 * var(--px));
    --padding-content: calc(20 * var(--px));
  }
}

[data-brand="homes"] {
  --color-accent: var(--brand-haven-green);
}

[data-brand="wealth"] {
  --color-accent: var(--brand-sky-blue);
}

[data-brand="financial"] {
  --color-accent: var(--brand-nectar);
}

[data-brand="group"] {
  --color-accent: var(--brand-group-white);
}


/* --- css/base/brand-type.css --- */
/* base/brand-type.css — GENERATED by design-tokens/build-type.js from
   design-tokens/typography.json (Figma PiEAExprxGGtshcaUTIrlQ, node 1158:40409,
   pulled 2026-09-14). Do not edit by hand: change the JSON and rebuild.

   Two modes, matching Figma's Desktop / Mobile variable modes. The mobile
   set takes over at the theme's 767px breakpoint; between breakpoints the DC
   scaling system (--size-font) keeps everything fluid. */

:root {
  --display-xxxl-size: calc(110 * var(--px));
  --display-xxxl-lh: 1.1;
  --display-xxxl-ls: -0.05em;
  --display-xxxl-weight: 400;
  --display-xxl-size: calc(78 * var(--px));
  --display-xxl-lh: 1.1026;
  --display-xxl-ls: -0.0321em;
  --display-xxl-weight: 400;
  --display-xl-size: calc(65 * var(--px));
  --display-xl-lh: 1.1077;
  --display-xl-ls: -0.0308em;
  --display-xl-weight: 400;
  --display-l-size: calc(54 * var(--px));
  --display-l-lh: 1.1111;
  --display-l-ls: -0.0278em;
  --display-l-weight: 450;
  --display-m-size: calc(40 * var(--px));
  --display-m-lh: 1.125;
  --display-m-ls: -0.0275em;
  --display-m-weight: 450;
  --display-s-size: calc(29 * var(--px));
  --display-s-lh: 1.2414;
  --display-s-ls: -0.0259em;
  --display-s-weight: 550;
  --utility-l-size: calc(23 * var(--px));
  --utility-l-lh: 1.2174;
  --utility-l-ls: -0.025em;
  --utility-l-weight: 600;
  --utility-m-size: calc(14 * var(--px));
  --utility-m-lh: 1.2;
  --utility-m-ls: 0.1429em;
  --utility-m-weight: 700;
  --utility-s-size: calc(13 * var(--px));
  --utility-s-lh: 1.2;
  --utility-s-ls: 0.0769em;
  --utility-s-weight: 700;
  --utility-xs-size: calc(10 * var(--px));
  --utility-xs-lh: 1.1;
  --utility-xs-ls: 0.075em;
  --utility-xs-weight: 700;
  --body-l-size: calc(20 * var(--px));
  --body-l-lh: 1.4;
  --body-l-ls: 0;
  --body-l-weight: 500;
  --body-m-size: calc(17 * var(--px));
  --body-m-lh: 1.4706;
  --body-m-ls: 0;
  --body-m-weight: 500;
  --body-s-size: calc(15 * var(--px));
  --body-s-lh: 1.4667;
  --body-s-ls: 0.0067em;
  --body-s-weight: 500;
  --body-xs-size: calc(13 * var(--px));
  --body-xs-lh: 1.3846;
  --body-xs-ls: 0.0154em;
  --body-xs-weight: 500;
  --faq-q-size: calc(23 * var(--px));
  --faq-q-lh: 1.2174;
  --faq-q-ls: -0.025em;
  --faq-q-weight: 600;
  --faq-a-size: calc(17 * var(--px));
  --faq-a-lh: 1.4706;
  --faq-a-ls: 0;
  --faq-a-weight: 500;
  --testimonial-size: calc(23 * var(--px));
  --testimonial-lh: 1.3913;
  --testimonial-ls: -0.025em;
  --testimonial-weight: 600;

  /* Legacy scale -> nearest Figma role (size only). Retire as sections move
     onto .type-* classes. */
  --text-2xl: var(--display-xl-size);
  --text-xl: var(--display-m-size);
  --text-l: var(--display-s-size);
  --text-m: var(--body-m-size);
  --text-s: var(--body-s-size);
  --text-xs: var(--body-xs-size);
}

@media screen and (max-width: 767px) {
  :root {
    --display-xxxl-size: calc(49 * var(--px));
    --display-xxxl-lh: 1.102;
    --display-xxxl-ls: -0.0306em;
    --display-xxxl-weight: 400;
    --display-xxl-size: calc(39 * var(--px));
    --display-xxl-lh: 1.1282;
    --display-xxl-ls: -0.0282em;
    --display-xxl-weight: 400;
    --display-xl-size: calc(39 * var(--px));
    --display-xl-lh: 1.1282;
    --display-xl-ls: -0.0282em;
    --display-xl-weight: 400;
    --display-l-size: calc(39 * var(--px));
    --display-l-lh: 1.1282;
    --display-l-ls: -0.0282em;
    --display-l-weight: 400;
    --display-m-size: calc(30 * var(--px));
    --display-m-lh: 1.1333;
    --display-m-ls: -0.0267em;
    --display-m-weight: 450;
    --display-s-size: calc(22 * var(--px));
    --display-s-lh: 1.2273;
    --display-s-ls: -0.0273em;
    --display-s-weight: 600;
    --utility-l-size: calc(20 * var(--px));
    --utility-l-lh: 1.25;
    --utility-l-ls: -0.025em;
    --utility-l-weight: 600;
    --utility-m-size: calc(11 * var(--px));
    --utility-m-lh: 1.2;
    --utility-m-ls: 0.1818em;
    --utility-m-weight: 700;
    --utility-s-size: calc(11 * var(--px));
    --utility-s-lh: 1.2;
    --utility-s-ls: 0.0909em;
    --utility-s-weight: 700;
    --utility-xs-size: calc(9 * var(--px));
    --utility-xs-lh: 1.1;
    --utility-xs-ls: 0.0833em;
    --utility-xs-weight: 700;
    --body-l-size: calc(18 * var(--px));
    --body-l-lh: 1.3889;
    --body-l-ls: 0;
    --body-l-weight: 500;
    --body-m-size: calc(16 * var(--px));
    --body-m-lh: 1.375;
    --body-m-ls: 0;
    --body-m-weight: 500;
    --body-s-size: calc(14 * var(--px));
    --body-s-lh: 1.4286;
    --body-s-ls: 0;
    --body-s-weight: 500;
    --body-xs-size: calc(12 * var(--px));
    --body-xs-lh: 1.3333;
    --body-xs-ls: 0.0083em;
    --body-xs-weight: 500;
    --faq-q-size: calc(18 * var(--px));
    --faq-q-lh: 1.2778;
    --faq-q-ls: -0.025em;
    --faq-q-weight: 600;
    --faq-a-size: calc(14 * var(--px));
    --faq-a-lh: 1.4286;
    --faq-a-ls: 0;
    --faq-a-weight: 500;
    --testimonial-size: calc(17 * var(--px));
    --testimonial-lh: 1.4118;
    --testimonial-ls: -0.025em;
    --testimonial-weight: 600;
  }
}

.type-display-xxxl {
  font-family: var(--font-serif);
  font-size: var(--display-xxxl-size);
  line-height: var(--display-xxxl-lh);
  letter-spacing: var(--display-xxxl-ls);
  font-weight: var(--display-xxxl-weight);
  text-box: trim-both cap alphabetic;
}

.type-display-xxl {
  font-family: var(--font-serif);
  font-size: var(--display-xxl-size);
  line-height: var(--display-xxl-lh);
  letter-spacing: var(--display-xxl-ls);
  font-weight: var(--display-xxl-weight);
  text-box: trim-both cap alphabetic;
}

.type-display-xl {
  font-family: var(--font-serif);
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-ls);
  font-weight: var(--display-xl-weight);
  text-box: trim-both cap alphabetic;
}

.type-display-l {
  font-family: var(--font-serif);
  font-size: var(--display-l-size);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-ls);
  font-weight: var(--display-l-weight);
  text-box: trim-both cap alphabetic;
}

.type-display-m {
  font-family: var(--font-serif);
  font-size: var(--display-m-size);
  line-height: var(--display-m-lh);
  letter-spacing: var(--display-m-ls);
  font-weight: var(--display-m-weight);
  text-box: trim-both cap alphabetic;
}

.type-display-s {
  font-family: var(--font-serif);
  font-size: var(--display-s-size);
  line-height: var(--display-s-lh);
  letter-spacing: var(--display-s-ls);
  font-weight: var(--display-s-weight);
  text-box: trim-both cap alphabetic;
}

.type-utility-l {
  font-family: var(--font-sans);
  font-size: var(--utility-l-size);
  line-height: var(--utility-l-lh);
  letter-spacing: var(--utility-l-ls);
  font-weight: var(--utility-l-weight);
  text-box: trim-both cap alphabetic;
}

.type-utility-m {
  font-family: var(--font-sans);
  font-size: var(--utility-m-size);
  line-height: var(--utility-m-lh);
  letter-spacing: var(--utility-m-ls);
  font-weight: var(--utility-m-weight);
  text-box: trim-both cap alphabetic;
  text-transform: uppercase;
}

.type-utility-s {
  font-family: var(--font-sans);
  font-size: var(--utility-s-size);
  line-height: var(--utility-s-lh);
  letter-spacing: var(--utility-s-ls);
  font-weight: var(--utility-s-weight);
  text-box: trim-both cap alphabetic;
  text-transform: uppercase;
}

.type-utility-xs {
  font-family: var(--font-sans);
  font-size: var(--utility-xs-size);
  line-height: var(--utility-xs-lh);
  letter-spacing: var(--utility-xs-ls);
  font-weight: var(--utility-xs-weight);
  text-box: trim-both cap alphabetic;
  text-transform: uppercase;
}

.type-body-l {
  font-family: var(--font-sans);
  font-size: var(--body-l-size);
  line-height: var(--body-l-lh);
  letter-spacing: var(--body-l-ls);
  font-weight: var(--body-l-weight);
  text-box: trim-both cap alphabetic;
}

.type-body-m {
  font-family: var(--font-sans);
  font-size: var(--body-m-size);
  line-height: var(--body-m-lh);
  letter-spacing: var(--body-m-ls);
  font-weight: var(--body-m-weight);
  text-box: trim-both cap alphabetic;
}

.type-body-s {
  font-family: var(--font-sans);
  font-size: var(--body-s-size);
  line-height: var(--body-s-lh);
  letter-spacing: var(--body-s-ls);
  font-weight: var(--body-s-weight);
  text-box: trim-both cap alphabetic;
}

.type-body-xs {
  font-family: var(--font-sans);
  font-size: var(--body-xs-size);
  line-height: var(--body-xs-lh);
  letter-spacing: var(--body-xs-ls);
  font-weight: var(--body-xs-weight);
  text-box: trim-both cap alphabetic;
}

.type-faq-q {
  font-family: var(--font-sans);
  font-size: var(--faq-q-size);
  line-height: var(--faq-q-lh);
  letter-spacing: var(--faq-q-ls);
  font-weight: var(--faq-q-weight);
  text-box: trim-both cap alphabetic;
}

.type-faq-a {
  font-family: var(--font-sans);
  font-size: var(--faq-a-size);
  line-height: var(--faq-a-lh);
  letter-spacing: var(--faq-a-ls);
  font-weight: var(--faq-a-weight);
  text-box: trim-both cap alphabetic;
}

.type-testimonial {
  font-family: var(--font-sans);
  font-size: var(--testimonial-size);
  line-height: var(--testimonial-lh);
  letter-spacing: var(--testimonial-ls);
  font-weight: var(--testimonial-weight);
  text-box: trim-both cap alphabetic;
}


/* --- css/base/section-system.css --- */
/* base/section-system.css — section-level layout via data attributes, not
   modifier classes. Kept low-specificity with :where() so block CSS always
   wins without !important.

   data-section-pt / pb : none | s | m | l | xl   (top / bottom padding)
   data-section-bg      : light | dark | theme
   data-theme-section   : light | dark            (text colour coordination)
   Defaults (no attribute): pt = m, pb = m, bg none. */

/* Default rhythm: any .section without explicit attributes gets medium
   padding, so unconverted blocks still breathe. */
:where([class^="section_"]:not([data-section-pt]), [class*=" section_"]:not([data-section-pt])) { padding-top: var(--padding-s); }
:where([class^="section_"]:not([data-section-pb]), [class*=" section_"]:not([data-section-pb])) { padding-bottom: var(--padding-s); }

:where([data-section-pt="none"]) { padding-top: 0; }
:where([data-section-pt="s"])    { padding-top: var(--padding-xs); }
:where([data-section-pt="m"])    { padding-top: var(--padding-s); }
:where([data-section-pt="l"])    { padding-top: var(--padding-m); }
:where([data-section-pt="xl"])   { padding-top: var(--padding-l); }

:where([data-section-pb="none"]) { padding-bottom: 0; }
:where([data-section-pb="s"])    { padding-bottom: var(--padding-xs); }
:where([data-section-pb="m"])    { padding-bottom: var(--padding-s); }
:where([data-section-pb="l"])    { padding-bottom: var(--padding-m); }
:where([data-section-pb="xl"])   { padding-bottom: var(--padding-l); }

:where([data-section-bg="light"]) { background-color: var(--light-color); }
:where([data-section-bg="dark"])  { background-color: var(--dark-color); color: var(--light-color); }
:where([data-section-bg="theme"]) { background-color: var(--theme-color); color: var(--light-color); }

/* Section theming: set once on the <section>, everything inside inherits.
   Dark/primary sections retune the ink + line tokens so nested components
   stay readable without section-specific overrides. */
:where([data-theme-section="light"]) {
  background: var(--color-surface);
  color: var(--color-ink);
}
:where([data-theme-section="tint"]) {
  background: var(--color-surface-2);
  color: var(--color-ink);
}
:where([data-theme-section="dark"]) {
  background: var(--n-900);
  color: var(--n-50);
  /* Mapped aliases: inside a dark section every semantic token is re-pointed,
     so section CSS never needs to know its theme. */
  --color-ink: var(--n-50);
  --color-ink-soft: var(--n-300);
  --color-line: var(--n-700);
  --color-surface: var(--n-900);
  --color-surface-2: var(--n-700);
  --color-surface-3: var(--n-700);
  /* Buttons flip to a light pill so they don't sink into the dark band. */
  --btn-surface: var(--n-0);
  --btn-ink: var(--n-900);
  --btn-arrow-ink: var(--n-900);
  --btn-arrow-surface: var(--n-0);
}
:where([data-theme-section="primary"]) {
  background: var(--color-primary);
  color: var(--n-0);
  --color-ink: var(--n-0);
  --color-ink-soft: var(--n-100);
  --color-line: var(--n-500);
  /* Buttons flip to a light pill so they don't sink into the primary band. */
  --btn-surface: var(--n-0);
  --btn-ink: var(--n-900);
  --btn-arrow-ink: var(--n-900);
  --btn-arrow-surface: var(--n-0);
}

:where(section[data-section-pt], section[data-section-pb], section[data-section-bg]) {
  overflow: visible;
}


/* --- css/base/grid.css --- */
/* base/grid.css — the DC grid system (var-driven, Flip-animatable).
   A grid is: [data-layout-group data-layout-status="large|small"]
     > [data-layout-grid] > [data-layout-grid-collection]
       > .dc-grid[data-layout-grid-list] > .dc-grid__item[data-layout-grid-item]
   Column count + gap live in CSS vars, so layouts swap by attribute and
   js/components/grid-flip.js animates the change with GSAP Flip. */

.dc-grid {
  display: flex;
  flex-flow: wrap;
  column-gap: var(--column-gap, var(--gap-m));
  row-gap: var(--row-gap, var(--gap-l));
  position: relative;
  --columns: 3;
}

.dc-grid__item,
[data-layout-grid-item] {
  will-change: transform;
  position: relative;
  width: calc((100% - (var(--columns) - 1) * var(--column-gap, var(--gap-m))) / var(--columns));
}

[data-layout-status="large"] { --columns: 3; --column-gap: 1.5em; }
[data-layout-status="small"] { --columns: 5; --column-gap: 1em; }

/* Column presets for static grids (no flip needed) */
.dc-grid.is--2 { --columns: 2; }
.dc-grid.is--4 { --columns: 4; }

@media screen and (max-width: 991px) {
  .dc-grid, [data-layout-status] { --columns: 2; }
}
@media screen and (max-width: 479px) {
  .dc-grid, [data-layout-status] { --columns: 1; }
}


/* --- css/base/cols.css --- */
/* base/cols.css — the DC column primitive.

   A generic CSS-grid row that any section can instantiate. Column count and
   per-cell spans are CSS vars, not classes, so one primitive covers 2-col
   image/text, 3-col cards and asymmetric splits without a class per shape.

     <div class="dc-cols" style="--cols:3">
       <div class="dc-col" style="--span:2"> … </div>
       <div class="dc-col"> … </div>
     </div>

   Modes:
     (default)    gapped columns, transparent
     is-divided   hairline rules between cells — the grid paints the line
                  colour and each cell paints surface over it, so dividers
                  need no border maths and stay correct when cells wrap
     is-flush     no gap, no rules

   Not to be confused with .dc-grid (base/grid.css), which is the flex-based
   filterable/Flip collection grid. This one is page layout. */

.dc-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: var(--gap-l);
  width: 100%;
}

.dc-cols > .dc-col {
  grid-column: span var(--span, 1);
  grid-row: span var(--row-span, 1);
  /* Grid items default to min-content; without this, long words and media
     blow the track out instead of shrinking. */
  min-width: 0;
  min-height: 0;
}

.dc-cols.is-divided {
  gap: 1px;
  background-color: var(--color-line);
}

.dc-cols.is-divided > .dc-col {
  background-color: var(--color-surface);
  padding: var(--col-pad, var(--gap-l));
}

.dc-cols.is-flush { gap: 0; }

.dc-cols.is-middle { align-items: center; }

@media screen and (max-width: 767px) {
  .dc-cols { grid-template-columns: 1fr; }
  .dc-cols > .dc-col { grid-column: 1 / -1; }
}


/* --- css/core/nav.css --- */
/* core/nav.css — the DC mega navigation (see js/components/mega-nav.js and
   header.php for the markup contract). Token-driven; recoded from the vault
   reference. Desktop: floating bar + morphing dropdown. Mobile (≤991px):
   burger + slide-over panels. */

[data-menu-wrap] {
  --nav-height: clamp(60px, 10vw, 140px);
}

.mega-nav {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.mega-nav__bar {
  z-index: 3;
  width: 100%;
  position: relative;
  background-color: var(--color-surface);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.mega-nav__container {
  height: var(--nav-height);
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--container-padding);
  margin-inline: auto;
  display: flex;
  max-width: var(--size-container-max);
}

.mega-nav__bar-start {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.mega-nav__bar-logo {
  flex: none;
  margin-right: 6.5em;
  display: flex;
  font-weight: 550;
  letter-spacing: -0.02em;
  aspect-ratio: 174 / 25;
  height: 1.56em;
  min-width: 125px;
}

.mega-nav__bar-logo img {
  max-height: 2.5em;
  width: auto;
}

.mega-nav__bar-logo-wrapper svg {
  height: auto;
  width: 100% !important;
}

.mega-nav__bar-list {
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-link {
  color: var(--color-ink);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-s);
  justify-content: flex-start;
  align-items: center;
  padding: 10px 1.5em;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-soft);
}

.mega-nav__bar-link:hover {
  background-color: var(--color-surface-2);
}

.mega-nav__bar-link-label {
  font-weight: 650;
  line-height: 1.2;
}

.mega-nav__bar-link-icon {
  width: 1.25em;
  display: none;
}

.mega-nav__bar-list.is--utils {
  margin-left: auto;
}

/* Primary action is .btn.is-enquire (components/button.css). */
.mega-nav__bar-cta {
  justify-content: center;
  align-items: center;
  padding: 0.375em 0.625em;
  text-decoration: none;
  display: flex;
  color: var(--color-ink);
  background-color: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
}

.mega-nav__bar-cta.is--secondary:hover {
  background-color: var(--color-surface-2);
}

.mega-nav__bar-end {
  gap: 0.75em;
  justify-content: flex-end;
  align-items: center;
  display: none;
}

.mega-nav__burger {
  gap: 0.2em;
  background-color: var(--color-surface-2);
  border: none;
  border-radius: var(--radius-s);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
  cursor: pointer;
}

.mega-nav__burger-line {
  z-index: 1;
  background-color: var(--color-ink);
  border-radius: 0.125em;
  flex: none;
  width: 1.25em;
  height: 0.125em;
  padding: 0;
  display: block;
  position: relative;
}

.mega-nav__back {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -0.625em;
}

.mega-nav__backdrop {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.25);
  position: fixed;
  inset: 0%;
}

.mega-nav__dropdown-wrapper {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  max-width: var(--size-container-max);
  margin-inline: auto;
  position: absolute;
  top: calc(100% - 15px);
  left: 0;
  right: 0;
}

.mega-nav__dropdown-container {
  position: relative;
}

.mega-nav__dropdown-bg {
  will-change: transform;
  background-color: var(--color-surface-2);
  border-bottom-right-radius: var(--radius-s);
  border-bottom-left-radius: var(--radius-s);
  position: absolute;
  top: 0;
  height: 100%;
  width: 100vw;
  left: calc(50% - 50vw);
}

.mega-nav__dropdown-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0 0 auto;
}

.mega-nav__dropdown-inner {
  display: flex;
}

.mega-nav__panel-col {
  gap: 1.25em;
  border-right: 1px solid var(--color-line);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2.5em 1.5em;
  display: flex;
}

.mega-nav__panel-col:last-of-type {
  border: none;
}

.mega-nav__panel-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  padding: 10px 22px;
  font-size: 0.8em;
  line-height: 1;
}

.mega-nav__panel-list {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.mega-nav__panel-link {
  color: var(--color-ink);
  border-radius: var(--radius-s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 22px;
  text-decoration: none;
  display: flex;
  transition: background-color var(--duration-fast) var(--ease-soft);
}

.mega-nav__panel-link:hover {
  background-color: var(--color-surface-2);
}

.mega-nav__panel-link-text {
  font-weight: 500;
}

.mega-nav__panel-link-desc {
  opacity: 0.6;
  font-size: 0.875em;
  font-weight: 400;
}

/* Push the page content below the floating bar */
body {
  padding-top: calc(4em + 1.25em);
}

@media screen and (max-width: 991px) {
  .mega-nav {
    top: 0;
    left: 0;
    right: 0;
  }

  body {
    padding-top: 4em;
  }

  .mega-nav__bar-start {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-list {
    gap: 0;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    display: block;
  }

  .mega-nav__bar-list.is--actions {
    gap: 1em;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .mega-nav__bar-action {
    flex: 1;
  }

  .mega-nav__bar-cta {
    padding: 1em 0.75em 1em 1em;
  }

  .mega-nav__bar-link {
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    width: 100%;
    padding: 0.75em 0;
    font-size: 1.25em;
    background: none;
  }

  .mega-nav__bar-link.is--dropdown {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-link.is--back {
    border-bottom-style: none;
    font-size: 1em;
  }

  .mega-nav__bar-link-label {
    font-size: 1.25em;
  }

  .mega-nav__bar-link-icon {
    width: 1.5em;
    display: none;
  }

  .mega-nav__bar-link-icon.is--dropdown {
    transform: rotate(-90deg);
  }

  .mega-nav__bar-end {
    display: flex;
  }

  .mega-nav__bar-inner {
    opacity: 0;
    bottom: 0%;
    left: 0%;
    right: 0%;
    top: var(--nav-height);
    visibility: hidden;
    background-color: var(--color-surface);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.5em;
    position: fixed;
    overflow: auto;
  }

  .mega-nav__backdrop {
    display: none;
  }

  .mega-nav__dropdown-wrapper {
    z-index: 4;
    bottom: 0;
    top: var(--nav-height);
    position: fixed;
  }

  .mega-nav__dropdown-container {
    height: 100%;
    overflow: auto;
  }

  .mega-nav__dropdown-bg {
    display: none;
  }

  .mega-nav__dropdown-panel {
    background-color: var(--color-surface);
    bottom: 0;
    overflow: auto;
  }

  .mega-nav__dropdown-inner {
    flex-flow: column;
  }

  .mega-nav__panel-col {
    border-bottom: 1px solid var(--color-line);
    border-right-style: none;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .mega-nav__panel-label {
    width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .mega-nav__bar-inner {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    display: flex;
  }

  /* Utilities/actions cluster to the right; the first right-cluster list
     carries the auto margin so utils + actions stay together. */
  .mega-nav__bar-list.is--actions,
  .mega-nav__bar-list.is--utils {
    margin-left: auto;
  }

  .mega-nav__bar-list.is--utils~.mega-nav__bar-list.is--actions {
    margin-left: 0;
  }
}

@media screen and (max-width: 479px) {
  .mega-nav__bar-link-label {
    font-size: 1em;
  }

  .mega-nav__bar-link-icon {
    width: 1.375em;
  }
}

/* ---------------------------------------------------------------- */
/* Section-aware nav theming (js/components/nav-theme.js — vault
   check-section-theme-on-scroll). data-nav-theme mirrors the section under
   the bar; over dark media the bar goes transparent with light items, and
   hover / open / mobile restores the solid surface. Desktop only — the
   mobile slide-over keeps the solid bar. */

.mega-nav__bar {
  transition: background-color 0.35s ease;
}

.mega-nav__bar-link,
.mega-nav__bar-logo {
  transition: color 0.35s ease;
}

@media (min-width: 992px) {
  [data-nav-theme="dark"] .mega-nav__bar {
    background-color: transparent;
  }

  [data-nav-theme="dark"] .mega-nav__bar-link,
  [data-nav-theme="dark"] .mega-nav__bar-logo {
    color: var(--n-0);
  }

  /* The restored surface slides down from above instead of fading in: a
     ::before layer behind the bar content (the bar is its own stacking
     context, so z-index -1 stays inside it). Parked past its own shadow so
     no edge peeks in at rest. */
  [data-nav-theme="dark"] .mega-nav__bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--color-accent);
    box-shadow: 0 0 7px 6px rgba(30, 30, 30, 0.05);
    transform: translateY(calc(-100% - 20px));
    transition:
      transform var(--animation-default),
      background-color var(--animation-default-half);
    pointer-events: none;
  }

  /* White while the mega menu is open, so the bar joins the dropdown panel. */
  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar::before {
    background-color: var(--n-0);
  }

  [data-nav-theme="dark"] .mega-nav__bar:hover::before,
  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar::before,
  [data-nav-theme="dark"][data-nav-scrolled="true"] .mega-nav__bar::before {
    transform: translateY(0);
  }

  [data-nav-theme="dark"] .mega-nav__bar:hover .mega-nav__bar-link,
  [data-nav-theme="dark"] .mega-nav__bar:hover .mega-nav__bar-logo,
  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar-link,
  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar-logo,
  [data-nav-theme="dark"][data-nav-scrolled="true"] .mega-nav__bar-link,
  [data-nav-theme="dark"][data-nav-scrolled="true"] .mega-nav__bar-logo {
    color: var(--nav-restore-ink, var(--color-ink));
  }
}

/* Inline SVG logo (header.php falls back to img/logo.svg when no ACF logo is
   set). Fills are currentColor so the mark follows the nav's ink as
   nav-theme.js flips between light and dark contexts. */
.mega-nav__bar-logo-svg {
  display: block;
  width: auto;
  height: 29px;
  color: currentColor;
}

@media (max-width: 767px) {
  .mega-nav__bar-logo-svg {
    height: 1.875em;
  }
}

/* Region switcher (Figma btn-topNav-region). A native <select> so it works
   without JS: .mega-nav__region is the 40px chip (pin + caret drawn on it),
   the select fills it and carries the label, so the whole chip is the
   click target. Colours per bar context match the search button:
     on silver (light bar)        rest charcoal 10% / charcoal  hover accent / charcoal
     on media  (dark bar at rest) rest charcoal 30% / silver    hover charcoal / silver
     on accent (dark bar hovered) rest charcoal 10% / charcoal  hover charcoal / silver
   The label shows the current region, "Region" when none (the
   locale_region_plain_label filter in includes/helpers.php). */
.mega-nav__region {
  --region-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --region-ink: var(--brand-charcoal);
  --region-bg-hover: var(--color-accent);
  --region-ink-hover: var(--brand-charcoal);

  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--px));
  border-radius: var(--radius-s);
  background-color: var(--region-bg);
  color: var(--region-ink);
  transition:
    background-color var(--animation-default-half),
    border-radius var(--animation-default-half),
    color var(--animation-default-half);
}

.mega-nav__region:hover {
  background-color: var(--region-bg-hover);
  color: var(--region-ink-hover);
  border-radius: calc(20 * var(--px));
}

.mega-nav__region::before,
.mega-nav__region::after {
  content: '';
  position: absolute;
  top: 50%;
  background-color: currentColor;
  pointer-events: none;
}

.mega-nav__region::before {
  left: calc(12 * var(--px));
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  margin-top: calc(-8 * var(--px));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath transform='translate%281.906 .5%29' d='M 6.094 4.5 C 6.922 4.5 7.594 5.172 7.594 6 C 7.594 6.828 6.922 7.5 6.094 7.5 C 5.265 7.5 4.594 6.828 4.594 6 C 4.594 5.172 5.265 4.5 6.094 4.5 Z M 6.094 0 C 7.826 0 9.274 0.589 10.439 1.768 C 11.605 2.946 12.188 4.408 12.188 6.152 C 12.188 7.415 11.686 8.776 10.684 10.234 C 9.681 11.693 8.151 13.281 6.094 15 C 4.049 13.294 2.523 11.709 1.514 10.244 C 0.505 8.779 0 7.415 0 6.152 C 0 4.517 0.509 3.13 1.527 1.992 L 1.738 1.768 C 2.897 0.589 4.349 0 6.094 0 Z M 6.094 1.25 C 4.663 1.25 3.54 1.72 2.63 2.645 C 1.715 3.575 1.25 4.715 1.25 6.152 C 1.25 7.078 1.621 8.197 2.543 9.535 C 3.336 10.686 4.509 11.959 6.093 13.353 C 7.689 11.947 8.866 10.672 9.653 9.526 C 10.568 8.196 10.938 7.08 10.938 6.152 C 10.938 4.717 10.471 3.577 9.551 2.646 C 8.632 1.717 7.508 1.25 6.094 1.25 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath transform='translate%281.906 .5%29' d='M 6.094 4.5 C 6.922 4.5 7.594 5.172 7.594 6 C 7.594 6.828 6.922 7.5 6.094 7.5 C 5.265 7.5 4.594 6.828 4.594 6 C 4.594 5.172 5.265 4.5 6.094 4.5 Z M 6.094 0 C 7.826 0 9.274 0.589 10.439 1.768 C 11.605 2.946 12.188 4.408 12.188 6.152 C 12.188 7.415 11.686 8.776 10.684 10.234 C 9.681 11.693 8.151 13.281 6.094 15 C 4.049 13.294 2.523 11.709 1.514 10.244 C 0.505 8.779 0 7.415 0 6.152 C 0 4.517 0.509 3.13 1.527 1.992 L 1.738 1.768 C 2.897 0.589 4.349 0 6.094 0 Z M 6.094 1.25 C 4.663 1.25 3.54 1.72 2.63 2.645 C 1.715 3.575 1.25 4.715 1.25 6.152 C 1.25 7.078 1.621 8.197 2.543 9.535 C 3.336 10.686 4.509 11.959 6.093 13.353 C 7.689 11.947 8.866 10.672 9.653 9.526 C 10.568 8.196 10.938 7.08 10.938 6.152 C 10.938 4.717 10.471 3.577 9.551 2.646 C 8.632 1.717 7.508 1.25 6.094 1.25 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mega-nav__region::after {
  right: calc(12 * var(--px));
  width: calc(16 * var(--px));
  height: calc(20 * var(--px));
  margin-top: calc(-10 * var(--px));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath transform='translate%283.29 7.29%29' d='M 4.711 5.485 L 0 0.774 L 0.774 0 L 4.711 3.938 L 8.649 0 L 9.423 0.774 L 4.711 5.485 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath transform='translate%283.29 7.29%29' d='M 4.711 5.485 L 0 0.774 L 0.774 0 L 4.711 3.938 L 8.649 0 L 9.423 0.774 L 4.711 5.485 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The visible label: rolls on hover like .btn (dc_button_label()). */
.mega-nav__region-label {
  display: flex;
  align-items: center;
  height: 100%;
  /* 12 edge + 16 icon + 5 gap on each side */
  padding: 0 calc(33 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(13 * var(--px));
  font-weight: 600;
  line-height: 1;
  letter-spacing: calc(0.25 * var(--px));
  white-space: nowrap;
}

.mega-nav__region-label .btn__label,
.mega-nav__region-label .btn__text { height: 1.25em; line-height: 1.25; }

/* The real control: invisible, over the whole chip, so clicks, keyboard and
   screen readers all reach the native select. */
.mega-nav__region-select {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
}

/* "A region is chosen": a ring that pulses out once on the page that loads
   with a region selected (decided server-side), then clears. */
.mega-nav__region:has(option:checked:not([data-region=""])) {
  animation: mega-nav-region-chosen 1.4s var(--cubic-default) 0.4s both;
}

@keyframes mega-nav-region-chosen {
  from { outline: 2px solid currentColor; outline-offset: 2px; }
  to   { outline: 2px solid transparent; outline-offset: 14px; }
}

/* Keyboard focus borrows the hover state instead of the outline, so choosing
   a region does not flash the "chosen" ring before the reload. */
.mega-nav__region-select:focus-visible { outline: none; }

.mega-nav__region:has(.mega-nav__region-select:focus-visible) {
  background-color: var(--region-bg-hover);
  color: var(--region-ink-hover);
  border-radius: calc(20 * var(--px));
}

/* The open list is OS-drawn: keep it readable whatever the bar is doing. */
.mega-nav__region-select option {
  background-color: var(--brand-white);
  color: var(--brand-charcoal);
}

[data-nav-theme="dark"] .mega-nav__bar:not(:hover) .mega-nav__region {
  --region-bg: color-mix(in srgb, var(--brand-charcoal) 30%, transparent);
  --region-ink: var(--brand-silver);
  --region-bg-hover: var(--brand-charcoal);
  --region-ink-hover: var(--brand-silver);
}

[data-nav-theme="dark"] .mega-nav__bar:hover .mega-nav__region {
  --region-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --region-ink: var(--brand-charcoal);
  --region-bg-hover: var(--brand-charcoal);
  --region-ink-hover: var(--brand-silver);
}

/* Search button (Figma btn-topNav-search). 40x40, 8px corners easing to a
   circle; the glyph rolls down on hover (a fresh one drops in from above).
   One masked layer carries both glyphs so the roll clips to the 24px icon
   window, as in Figma. The markup's outline svg is swapped for the Figma
   filled glyph. Colours per bar context:
     on silver (light bar)        rest charcoal 10% / charcoal  hover accent / charcoal
     on media  (dark bar at rest) rest charcoal 30% / silver    hover charcoal / silver
     on accent (dark bar hovered) rest charcoal 10% / charcoal  hover charcoal / silver */
.mega-nav__bar-link.is--search {
  --search-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --search-ink: var(--brand-charcoal);
  --search-bg-hover: var(--color-accent);
  --search-ink-hover: var(--brand-charcoal);
  --search-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate%283.404 3.404%29' d='M 16.138 17.192 L 9.858 10.911 C 9.358 11.324 8.782 11.647 8.132 11.881 C 7.482 12.114 6.81 12.231 6.115 12.231 C 4.408 12.231 2.961 11.638 1.777 10.454 C 0.592 9.269 0 7.823 0 6.115 C 0 4.408 0.592 2.961 1.777 1.777 C 2.961 0.592 4.408 0 6.115 0 C 7.823 0 9.269 0.592 10.454 1.777 C 11.638 2.961 12.231 4.408 12.231 6.115 C 12.231 6.829 12.111 7.512 11.871 8.162 C 11.631 8.812 11.311 9.377 10.911 9.858 L 17.192 16.138 L 16.138 17.192 Z M 6.115 10.731 C 7.404 10.731 8.495 10.284 9.389 9.389 C 10.284 8.495 10.731 7.404 10.731 6.115 C 10.731 4.827 10.284 3.735 9.389 2.841 C 8.495 1.947 7.404 1.5 6.115 1.5 C 4.827 1.5 3.735 1.947 2.841 2.841 C 1.947 3.735 1.5 4.827 1.5 6.115 C 1.5 7.404 1.947 8.495 2.841 9.389 C 3.735 10.284 4.827 10.731 6.115 10.731 Z'/%3E%3C/svg%3E");

  position: relative;
  flex: none;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  padding: 0;
  border-radius: var(--radius-s);
  background-color: var(--search-bg);
  transition:
    background-color var(--animation-default-half),
    border-radius var(--animation-default-half);
}

.mega-nav__bar-link.is--search .mega-nav__bar-link-icon {
  display: none;
}

.mega-nav__bar-link.is--search::before {
  content: '';
  position: absolute;
  inset: calc(8 * var(--px));
  background-color: var(--search-ink);
  -webkit-mask: var(--search-glyph) no-repeat, var(--search-glyph) no-repeat;
  mask: var(--search-glyph) no-repeat, var(--search-glyph) no-repeat;
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-position: 0 0, 0 calc(-24 * var(--px));
  mask-position: 0 0, 0 calc(-24 * var(--px));
  transition:
    -webkit-mask-position var(--animation-default),
    mask-position var(--animation-default),
    background-color var(--animation-default-half);
}

.mega-nav__bar-link.is--search:hover {
  background-color: var(--search-bg-hover);
  border-radius: calc(20 * var(--px));
}

.mega-nav__bar-link.is--search:hover::before {
  background-color: var(--search-ink-hover);
  -webkit-mask-position: 0 calc(24 * var(--px)), 0 0;
  mask-position: 0 calc(24 * var(--px)), 0 0;
}

.mega-nav__bar-link.is--search:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Dark bar over media at rest. Matches brand.css's .is--util chip selector
   plus .is--search, so it wins over that rule's padding. */
[data-nav-theme="dark"] .mega-nav__bar:not(:hover) .mega-nav__bar-link.is--util.is--search {
  --search-bg: color-mix(in srgb, var(--brand-charcoal) 30%, transparent);
  --search-ink: var(--brand-silver);
  --search-bg-hover: var(--brand-charcoal);
  --search-ink-hover: var(--brand-silver);
  padding: 0;
  border-radius: var(--radius-s);
}

/* Dark bar restored to the accent surface (bar hovered or menu open). */
[data-nav-theme="dark"] .mega-nav__bar:hover .mega-nav__bar-link.is--search {
  --search-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --search-ink: var(--brand-charcoal);
  --search-bg-hover: var(--brand-charcoal);
  --search-ink-hover: var(--brand-silver);
}

/* Menu items + the region chip roll their label on hover, like .btn. */
.mega-nav__bar-link:hover .btn__roll,
.mega-nav__region:hover .btn__roll {
  transform: translateY(-50%);
}

/* Sticky (menu closed): the bar is accent, so the chips use their on-accent
   colours whatever section is underneath. Same specificity as the on-media
   rules and later; background-color repeated over brand.css's util chip. */
[data-nav-scrolled="true"]:not([data-menu-open="true"]) .mega-nav__bar .mega-nav__region,
[data-nav-scrolled="true"]:not([data-menu-open="true"]) .mega-nav__bar .mega-nav__bar-link.is--util.is--search {
  --region-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --region-ink: var(--brand-charcoal);
  --region-bg-hover: var(--brand-charcoal);
  --region-ink-hover: var(--brand-silver);
  --search-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --search-ink: var(--brand-charcoal);
  --search-bg-hover: var(--brand-charcoal);
  --search-ink-hover: var(--brand-silver);
}

[data-nav-scrolled="true"]:not([data-menu-open="true"]) .mega-nav__bar .mega-nav__bar-link.is--util.is--search {
  background-color: var(--search-bg);
  backdrop-filter: none;
}

[data-nav-scrolled="true"]:not([data-menu-open="true"]) .mega-nav__bar .mega-nav__bar-link.is--util.is--search:hover {
  background-color: var(--search-bg-hover);
}

/* Mega menu open: the bar is white, so the chips use their on-silver
   colours (charcoal ink, accent hover). Matches the on-media selectors'
   specificity and comes later, and repeats background-color because
   brand.css paints the .is--util chip directly over media. */
[data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar .mega-nav__region,
[data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar .mega-nav__bar-link.is--util.is--search {
  --region-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --region-ink: var(--brand-charcoal);
  --region-bg-hover: var(--color-accent);
  --region-ink-hover: var(--brand-charcoal);
  --search-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --search-ink: var(--brand-charcoal);
  --search-bg-hover: var(--color-accent);
  --search-ink-hover: var(--brand-charcoal);
}

[data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar .mega-nav__bar-link.is--util.is--search {
  background-color: var(--search-bg);
  backdrop-filter: none;
}

[data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar .mega-nav__bar-link.is--util.is--search:hover {
  background-color: var(--search-bg-hover);
}

/* Sticky state: past 150px of scroll (initNavSticky in nav-theme.js). Desktop
   only (the mobile bar keeps its own height). The bar compacts to 80px and
   turns accent; the dark theme slides its accent layer in (above), the light
   theme's solid bar changes colour, and both go white when the menu opens. */
.mega-nav__container {
  transition: height var(--animation-default);
}

/* The logo's brand word fades out rather than being cut off: the wrapper
   hugs the whole SVG and a mask keeps the wordmark (the logo box's 1.56em)
   solid while the part below fades to --logo-word-alpha. Registered so the
   mask gradient itself transitions. */
@property --logo-word-alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.mega-nav__bar-logo-wrapper {
  align-self: flex-start;
  --logo-word-alpha: 1;
  -webkit-mask-image: linear-gradient(#000 0 1.56em, rgb(0 0 0 / var(--logo-word-alpha)) 1.56em);
  mask-image: linear-gradient(#000 0 1.56em, rgb(0 0 0 / var(--logo-word-alpha)) 1.56em);
  transition: --logo-word-alpha var(--animation-default);
}

@media (min-width: 992px) {
  [data-menu-wrap][data-nav-scrolled="true"] {
    --nav-height: calc(80 * var(--px));
  }

  [data-nav-scrolled="true"] .mega-nav__bar-logo-wrapper {
    --logo-word-alpha: 0;
  }

  [data-nav-theme="light"][data-nav-scrolled="true"] .mega-nav__bar {
    background-color: var(--color-accent);
  }

  [data-nav-theme="light"][data-nav-scrolled="true"][data-menu-open="true"] .mega-nav__bar {
    background-color: var(--n-0);
  }
}

/* Enquire on the accent bar (Figma btn-topNav-enquire menuBg=onAccent): the
   brand shape goes silver so it does not vanish into the accent surface. Not
   while the menu is open, when the bar is white and the accent shape reads. */
[data-nav-theme="dark"]:not([data-menu-open="true"]) .mega-nav__bar:hover .btn.is-enquire .brand-shape::before,
[data-nav-theme="dark"]:not([data-menu-open="true"]) .mega-nav__bar:hover .btn.is-enquire .brand-shape::after,
[data-nav-scrolled="true"]:not([data-menu-open="true"]) .btn.is-enquire .brand-shape::before,
[data-nav-scrolled="true"]:not([data-menu-open="true"]) .btn.is-enquire .brand-shape::after {
  background-color: var(--brand-silver);
}

/* Mobile bar (Figma homepage mobile 1154:42729): 22px logo, a plain Enquire
   button beside a bare 16px burger. Over the hero ([data-nav-theme="dark"])
   the bar is transparent with light ink; open or sticky it turns accent. */
@media (max-width: 991px) {
  [data-menu-wrap] {
    --nav-height: 72px;
  }

  .mega-nav__bar-start {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .mega-nav__bar-logo {
    height: 22px;
    min-width: 0;
    margin-right: 0;
  }

  .mega-nav__bar-end {
    gap: calc(12 * var(--px));
  }

  .mega-nav__mobile-enquire {
    height: 35px;
    padding: 2px 20px 0;
    font-size: 14px;
  }

  .mega-nav__burger {
    gap: 3px;
    width: calc(32 * var(--px));
    height: calc(32 * var(--px));
    background: none;
    color: var(--brand-charcoal);
  }

  .mega-nav__burger-line {
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
  }

  .mega-nav__bar {
    transition: background-color var(--animation-default-half);
  }

  .mega-nav__bar-logo,
  .mega-nav__burger {
    transition: color var(--animation-default-half);
  }

  [data-nav-theme="dark"] .mega-nav__bar {
    background-color: transparent;
  }

  [data-nav-theme="dark"] .mega-nav__bar-logo,
  [data-nav-theme="dark"] .mega-nav__burger {
    color: var(--n-0);
  }

  [data-menu-open="true"] .mega-nav__bar,
  [data-nav-scrolled="true"] .mega-nav__bar,
  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar,
  [data-nav-theme="dark"][data-nav-scrolled="true"] .mega-nav__bar {
    background-color: var(--color-accent);
  }

  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__bar-logo,
  [data-nav-theme="dark"][data-menu-open="true"] .mega-nav__burger,
  [data-nav-theme="dark"][data-nav-scrolled="true"] .mega-nav__bar-logo,
  [data-nav-theme="dark"][data-nav-scrolled="true"] .mega-nav__burger {
    color: var(--brand-charcoal);
  }
}

@media (min-width: 992px) {
  .mega-nav__mobile-enquire {
    display: none;
  }
}

/* Mobile slide-over (Figma mobileMenu-homes-1.1 / 1.2, 899:42592 / 899:42620).
   Open bar 59px with the LOCALE word only and a silver brand-shape close
   button; root screen = region strip, 25px items with arrows, sticky
   Search + Enquire footer. A panel swaps the logo for a back arrow + the
   section name (mega-nav.js fills [data-mobile-back-label]). */
@media (max-width: 991px) {
  [data-menu-wrap][data-menu-open="true"] {
    --nav-height: 59px;
  }

  [data-menu-open="true"] .mega-nav__bar {
    border-radius: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 8%), 0 7px 12px rgb(50 50 50 / 8%);
  }

  [data-menu-open="true"] .mega-nav__bar-logo-wrapper {
    height: 22px;
    overflow: hidden;
  }

  [data-menu-open="true"] .mega-nav__mobile-enquire {
    opacity: 0;
    pointer-events: none;
  }

  .mega-nav__burger.brand-shape {
    --color-accent: transparent;
    display: flex;
    width: 35px;
    height: 35px;
  }

  [data-menu-open="true"] .mega-nav__burger.brand-shape {
    --color-accent: var(--brand-silver);
    color: var(--brand-charcoal);
  }

  [data-menu-open="true"] .mega-nav__burger.brand-shape::before {
    border-radius: var(--shape-radius);
  }

  [data-brand="financial"] [data-menu-open="true"] .mega-nav__burger.brand-shape::before { opacity: 0; }
  [data-brand="financial"] [data-menu-open="true"] .mega-nav__burger.brand-shape::after { opacity: 1; }

  /* Back: arrow + section name in place of the logo */
  .mega-nav__back {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .mega-nav__bar-link.is--back {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 35px 0 0;
    border: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--brand-charcoal);
  }

  .mega-nav__back-arrow {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    margin-left: -4px;
  }

  .mega-nav__back-arrow svg {
    width: 28px;
    height: 28px;
    transform: scaleX(-1);
  }

  /* Root screen */
  .mega-nav__bar-inner {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    background-color: var(--brand-silver);
  }

  .mega-nav__bar-list.is--utils {
    order: -1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 0;
    background-color: color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
    backdrop-filter: blur(10px);
  }

  .mega-nav__bar-list.is--utils > li:not(.mega-nav__region),
  .mega-nav__bar-list.is--actions {
    display: none;
  }

  .mega-nav__bar-list.is--utils .mega-nav__region,
  [data-nav-theme="dark"] .mega-nav__bar-list.is--utils .mega-nav__region {
    --region-bg: transparent;
    --region-bg-hover: transparent;
    --region-ink: var(--brand-charcoal);
    --region-ink-hover: var(--brand-charcoal);
    height: 40px;
    border-radius: 0;
  }

  .mega-nav__bar-list.is--utils .mega-nav__region:hover {
    border-radius: 0;
  }

  .mega-nav__bar-list:not(.is--utils):not(.is--actions) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 16px 24px;
  }

  .mega-nav__bar-list:not(.is--utils):not(.is--actions) .mega-nav__bar-link {
    justify-content: space-between;
    height: 50px;
    padding: 0;
    border: 0;
    font-size: 25px;
    color: var(--brand-charcoal);
  }

  .mega-nav__bar-list:not(.is--utils):not(.is--actions) .mega-nav__bar-link-label {
    font-size: 1em;
    font-weight: 450;
  }

  .mega-nav__bar-link.is--dropdown .mega-nav__bar-link-icon {
    display: none;
  }

  .mega-nav__bar-link-arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 35px;
    height: 35px;
  }

  .mega-nav__bar-link-arrow svg {
    width: 28px;
    height: 28px;
  }

  .mega-nav__mobile-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 9px;
    margin-top: auto;
    padding: 16px;
    background-color: var(--brand-group-white);
    box-shadow: 0 0 1.5px rgb(0 0 0 / 12%), 0 3px 2px rgb(0 0 0 / 3%);
  }

  .mega-nav__mobile-footer-btn {
    flex: 1;
    gap: 8px;
    height: 43px;
    padding: 2px 17px 0;
  }

  .mega-nav__mobile-footer-btn .mega-nav__mobile-icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
  }
}

@media (min-width: 992px) {
  .mega-nav__mobile-footer,
  .mega-nav__bar-link-arrow {
    display: none;
  }

  .mega-nav__burger.brand-shape::before,
  .mega-nav__burger.brand-shape::after {
    content: none;
  }
}


/* --- css/core/nav-panels.css --- */
/* ACF-driven mega menu panels (template-parts/mega-panel.php).
   Extends css/core/nav.css — the menu-children fallback keeps the styles
   there; everything here is the richer panel anatomy: intro, feature cards,
   icon link groups, card grids (tiles), badges, browse-all links, pills.

   Figma PiEAExprxGGtshcaUTIrlQ, desktopMenu-Homes1..6 (899:40602, 899:40643,
   899:40688, 899:40729, 899:40773, 899:40823). All sizes are Figma px times
   --px, colours are brand tokens, so each brand re-skins through tokens. */

.mega-nav__dropdown-inner.is--acf {
  --mm-shadow-card: 0 0 calc(3 * var(--px)) rgb(0 0 0 / 12%), 0 calc(3 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 3%);
  --mm-shadow-raised: 0 -1px 2px rgb(0 0 0 / 5%), 0 1px 2px rgb(0 0 0 / 5%), 0 calc(7 * var(--px)) calc(12 * var(--px)) rgb(50 50 50 / 5%);
  --mm-surface-hover: var(--brand-group-white);
  --mm-placeholder: color-mix(in srgb, var(--brand-charcoal) 37%, var(--brand-white));

  flex-flow: column;
  gap: 0;
  /* +15px: the dropdown wrapper tucks 15px up under the bar. */
  padding: calc(56 * var(--px) + 15px) var(--container-padding) 0;
  color: var(--brand-charcoal);
  font-family: var(--font-sans);
}

/* ---- Intro (Figma mmHeader) ------------------------------------------ */

.mega-nav__panel-intro {
  display: flex;
  flex-flow: column;
  gap: calc(20 * var(--px));
  padding-bottom: calc(48 * var(--px));
}

.mega-nav__panel-intro-title {
  font-family: var(--font-serif);
  font-size: calc(27 * var(--px));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: calc(-0.5 * var(--px));
  font-feature-settings: "liga" 0;
}

.mega-nav__panel-intro-text {
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: calc(0.2 * var(--px));
  color: color-mix(in srgb, var(--brand-charcoal) 75%, transparent);
}

/* ---- Body row (Figma mmBodyContainer) -------------------------------- */

.mega-nav__panel-row {
  display: flex;
  gap: calc(48 * var(--px));
  align-items: stretch;
}

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-col {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
  gap: calc(24 * var(--px));
  padding: 0;
  border: none;
}

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--groups {
  gap: calc(35 * var(--px));
  padding-top: calc(24 * var(--px));
}

.mega-nav__panel-group {
  display: flex;
  flex-flow: column;
}

/* Section heading (Figma mmItem-sectionHeading) */
.mega-nav__dropdown-inner.is--acf .mega-nav__panel-label {
  padding: 0 0 calc(16 * var(--px)) calc(16 * var(--px));
  font-size: calc(12 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(1.5 * var(--px));
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-charcoal) 60%, transparent);
}

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-list {
  gap: 0;
}

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-list.is--tiles {
  gap: 0;
}

/* ---- Badge ----------------------------------------------------------- */

.mega-nav__panel-badge {
  vertical-align: middle;
  margin-left: 0.5em;
}

.mega-nav__panel-badge.is-pill {
  --badge-ink: currentColor;
  align-self: flex-start;
  margin-left: 0;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: calc(10 * var(--px));
  font-weight: 700;
  letter-spacing: calc(0.75 * var(--px));
  text-transform: uppercase;
}

/* ---- Feature card (Figma mmItem-featureCard-l) ------------------------
   light  : surface card, copy only
   accent : tinted top, image fills the rest under a rounded top edge
   dark   : as accent on charcoal-90
   image  : photo fills the card, copy sits on a top gradient
   An empty media slot renders the wireframe grey until a photo is set. */

.mega-nav__panel-card {
  position: relative;
  display: flex;
  flex-flow: column;
  flex: 1;
  gap: calc(32 * var(--px));
  min-height: calc(424 * var(--px));
  padding-top: calc(32 * var(--px));
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-m);
  background-color: var(--brand-white);
  box-shadow: var(--mm-shadow-card);
}

.mega-nav__panel-intro + .mega-nav__panel-row .mega-nav__panel-card {
  min-height: calc(220 * var(--px));
}

.mega-nav__panel-card-body {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: calc(16 * var(--px));
  padding: 0 calc(52 * var(--px)) 0 calc(32 * var(--px));
}

.mega-nav__panel-card-title {
  padding-top: calc(4 * var(--px));
  font-family: var(--font-serif);
  font-size: calc(27 * var(--px));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: calc(-0.75 * var(--px));
  font-feature-settings: "liga" 0;
}

.mega-nav__panel-card-text {
  font-size: calc(13 * var(--px));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: calc(0.2 * var(--px));
}

.mega-nav__panel-card-media {
  position: relative;
  flex: 1;
  min-height: calc(120 * var(--px));
  overflow: hidden;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.mega-nav__panel-card-media.is--placeholder {
  background-color: var(--mm-placeholder);
}

.mega-nav__panel-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--animation-default);
}

.mega-nav__panel-card:hover .mega-nav__panel-card-image {
  transform: scale(1.03);
}

.mega-nav__panel-card.is--accent {
  background-color: color-mix(in srgb, var(--color-accent) 90%, var(--brand-white));
}

.mega-nav__panel-card.is--dark {
  background-color: color-mix(in srgb, var(--brand-charcoal) 90%, var(--brand-white));
  color: var(--brand-silver);
}

.mega-nav__panel-card.is--image {
  color: var(--brand-silver);
}

.mega-nav__panel-card.is--image .mega-nav__panel-card-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
}

.mega-nav__panel-card.is--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(37 37 37 / 80%) 0%, rgb(37 37 37 / 40%) 30%, rgb(37 37 37 / 0%) 55%);
  pointer-events: none;
}

.mega-nav__panel-card.is--image .mega-nav__panel-card-text {
  color: color-mix(in srgb, var(--brand-silver) 80%, transparent);
}

/* Circle arrow (Figma mmBtn-circleArrow): the Enquire cap on silver, so it
   morphs into the brand shape and rolls its arrow when the card is hovered. */
.mega-nav__panel-card .mega-nav__panel-card-arrow,
.is--cards.is--cover .mega-nav__panel-tile-arrow.brand-shape {
  --color-accent: var(--brand-silver);
  position: absolute;
  right: calc(32 * var(--px));
  bottom: calc(32 * var(--px));
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  color: var(--brand-charcoal);
}

[data-brand-shape-trigger]:hover .btn__cap-icon { transform: translateX(175%); }
[data-brand-shape-trigger]:hover .btn__cap-icon + .btn__cap-icon { transform: translateX(0); }

/* ---- Link rows: shared hover (Figma compactLinkCard hover) ------------ */

.mega-nav__dropdown-inner.is--acf .is--groups .mega-nav__panel-link {
  position: relative;
  display: flex;
  flex-flow: row;
  align-items: center;
  text-align: left;
  border-radius: calc(10 * var(--px));
  color: var(--brand-charcoal);
  transition:
    background-color var(--animation-default-half),
    box-shadow var(--animation-default-half);
}

.mega-nav__dropdown-inner.is--acf .is--groups .mega-nav__panel-link:hover,
.mega-nav__dropdown-inner.is--acf .is--groups .mega-nav__panel-link:focus-visible {
  background-color: var(--mm-surface-hover);
  box-shadow: var(--mm-shadow-raised);
}

.mega-nav__panel-link-body {
  display: flex;
  flex-flow: column;
  flex: 1;
  min-width: 0;
  gap: calc(12 * var(--px));
}

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-link-text {
  font-size: calc(17 * var(--px));
  font-weight: 600;
  line-height: 1;
}

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-link-desc {
  opacity: 1;
  font-size: calc(13 * var(--px));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: calc(0.2 * var(--px));
  color: var(--color-text-dark-tertiary);
}

/* Arrow slides in from the left on hover */
.mega-nav__panel-link-arrow {
  flex: none;
  display: flex;
  align-items: center;
  width: calc(15 * var(--px));
  overflow: hidden;
}

.mega-nav__panel-link-arrow-track {
  display: flex;
  transform: translateX(-100%);
  transition: transform var(--animation-default-half);
}

.mega-nav__panel-link-arrow svg {
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
}

.mega-nav__panel-link:hover .mega-nav__panel-link-arrow-track,
.mega-nav__panel-link:focus-visible .mega-nav__panel-link-arrow-track {
  transform: translateX(0);
}

/* Icon slot */
.mega-nav__panel-link-tile {
  flex: none;
  display: grid;
  place-items: center;
  transition: background-color var(--animation-default-half);
}

.mega-nav__panel-link-icon {
  object-fit: contain;
}

/* ---- Compact row (Figma mmItem-compactLinkCard-v2) -------------------- */

.mega-nav__dropdown-inner.is--acf .is--compact .mega-nav__panel-link {
  gap: calc(8 * var(--px));
  min-height: calc(45 * var(--px));
  padding: calc(10 * var(--px)) calc(16 * var(--px));
}

.mega-nav__dropdown-inner.is--acf .is--compact .mega-nav__panel-link.has--icon {
  padding-left: calc(12 * var(--px));
}

.is--compact .mega-nav__panel-link-tile {
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  border-radius: calc(6 * var(--px));
}

.is--compact .mega-nav__panel-link-icon {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
}

.is--compact .mega-nav__panel-link:hover .mega-nav__panel-link-tile {
  background-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/* ---- Rich row (Figma mmItem-richLinkCard-v3) -------------------------- */

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-link.is--tile {
  gap: calc(16 * var(--px));
  padding: calc(14 * var(--px)) calc(16 * var(--px));
}

.is--tile .mega-nav__panel-link-tile {
  width: calc(60 * var(--px));
  height: calc(60 * var(--px));
  margin: calc(2 * var(--px));
  border-radius: calc(10 * var(--px));
  background-color: color-mix(in srgb, var(--color-accent) 70%, var(--brand-white));
}

.is--tile .mega-nav__panel-link-icon {
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
}

.is--tile .mega-nav__panel-link-body {
  gap: calc(6 * var(--px));
}

/* Rich links under a feature card (legacy anatomy) */
.mega-nav__panel-list.is--rich {
  gap: var(--gap-s);
}

.mega-nav__panel-link.is--rich {
  padding: 0;
}

.mega-nav__panel-link.is--rich:hover {
  background: none;
}

.mega-nav__panel-link.is--rich:hover .mega-nav__panel-link-text {
  text-decoration: underline;
}

/* ---- Card grid ------------------------------------------------------- */

.mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--cards {
  display: grid;
  grid-template-columns: repeat(var(--mm-card-cols, 2), 1fr);
  align-items: start;
  gap: calc(16 * var(--px));
  flex: 2;
}

.mega-nav__panel-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--gap-m) var(--gap-s) var(--gap-s);
  border-radius: var(--radius-m);
  background-color: var(--brand-white);
  box-shadow: var(--mm-shadow-card);
  transition: background-color var(--animation-default-half);
}

.mega-nav__panel-tile:hover {
  background-color: var(--mm-surface-hover);
}

.mega-nav__panel-tile-image {
  width: 3em;
  height: 3em;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.mega-nav__panel-tile-body {
  display: flex;
  flex-flow: column;
  gap: 0.25em;
}

.mega-nav__panel-tile-title {
  font-weight: 600;
}

.mega-nav__panel-tile-text {
  font-size: calc(13 * var(--px));
  color: var(--color-text-dark-tertiary);
}

.mega-nav__panel-tile-arrow {
  position: absolute;
  right: var(--gap-m);
  bottom: var(--gap-m);
  display: grid;
  place-items: center;
  width: calc(12 * var(--px));
  opacity: 0;
  transition: opacity var(--animation-default-half);
}

.mega-nav__panel-tile:hover .mega-nav__panel-tile-arrow {
  opacity: 1;
}

.mega-nav__panel-tile.is--accent {
  background-color: color-mix(in srgb, var(--color-accent) 90%, var(--brand-white));
}

/* Cover cards: the image feature card (Figma featureCard, Why Locale row) */
.mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--cards.is--cover {
  gap: calc(48 * var(--px));
}

.mega-nav__dropdown-inner.is--acf .is--cards.is--cover .mega-nav__panel-tile {
  flex-flow: column;
  gap: 0;
  min-height: calc(424 * var(--px));
  padding: calc(32 * var(--px)) calc(52 * var(--px)) calc(32 * var(--px)) calc(32 * var(--px));
  overflow: hidden;
  isolation: isolate;
  color: var(--brand-silver);
}

.is--cards.is--cover .mega-nav__panel-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(37 37 37 / 80%) 0%, rgb(37 37 37 / 40%) 30%, rgb(37 37 37 / 0%) 55%);
  pointer-events: none;
}

.is--cards.is--cover .mega-nav__panel-tile-body {
  gap: calc(16 * var(--px));
}

.is--cards.is--cover .mega-nav__panel-tile-title {
  padding-top: calc(4 * var(--px));
  font-family: var(--font-serif);
  font-size: calc(27 * var(--px));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: calc(-0.75 * var(--px));
  font-feature-settings: "liga" 0;
}

.is--cards.is--cover .mega-nav__panel-tile-text {
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: calc(0.2 * var(--px));
  color: color-mix(in srgb, var(--brand-silver) 80%, transparent);
}

.is--cards.is--cover .mega-nav__panel-tile-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.is--cards.is--cover .mega-nav__panel-tile-image.is--placeholder {
  background-color: var(--mm-placeholder);
}

.is--cards.is--cover .mega-nav__panel-tile-arrow {
  display: inline-flex;
  opacity: 1;
}

/* ---- Pills footer (Figma mmFooter, chipList) -------------------------- */

.mega-nav__panel-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(10 * var(--px));
  padding: calc(56 * var(--px)) 0 calc(64 * var(--px));
}

.mega-nav__panel-pills-label {
  margin-right: calc(5 * var(--px));
  font-size: calc(17 * var(--px));
  font-weight: 600;
  line-height: 1;
}

.mega-nav__panel-pill {
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--px));
  padding: calc(2 * var(--px)) calc(16 * var(--px)) 0;
  border: 2px solid color-mix(in srgb, var(--brand-charcoal) 12%, transparent);
  border-radius: var(--radius-full);
  color: var(--brand-charcoal);
  font-size: calc(16 * var(--px));
  font-weight: 580;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--animation-default-half),
    border-color var(--animation-default-half);
}

.mega-nav__panel-pill-icon {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  margin: calc(-2 * var(--px)) calc(5 * var(--px)) 0 0;
}

.mega-nav__panel-pill:hover {
  background-color: var(--mm-surface-hover, var(--brand-group-white));
  border-color: var(--color-accent);
}

.mega-nav__panel-pills-more {
  margin-left: calc(5 * var(--px));
}

/* ---- CTA footer (Figma mmFooter, contentContainer) ---------------------
   Full-bleed accent band; the ::after draws the panel's rounded bottom edge
   over the top of the band. */

.mega-nav__panel-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(20 * var(--px));
  margin-top: calc(40 * var(--px));
  padding: calc(48 * var(--px)) 0 calc(32 * var(--px));
  color: var(--brand-charcoal);
}

.mega-nav__panel-cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 105%;
  z-index: -1;
  background-color: var(--color-accent);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.mega-nav__panel-cta:after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: calc(16 * var(--px));
  z-index: -1;
  background-color: var(--color-surface-2);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.mega-nav__panel-cta-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(16 * var(--px));
  font-size: calc(17 * var(--px));
  line-height: 1;
}

.mega-nav__panel-cta-lead {
  font-weight: 630;
}

.mega-nav__panel-cta-sub {
  font-weight: 500;
}

/* On the accent band the Dark fill's accent hover would disappear, so it
   takes the on-colour hover from Figma Elements (silver, as the Accent
   button does on dark). */
.mega-nav__panel-cta .btn {
  --btn-bg-hover: var(--brand-silver);
  --btn-ink-hover: var(--brand-charcoal);
  padding-inline: calc(24 * var(--px));
}

/* ---- Bar: the open item sits on an accent pill ------------------------ */

@media (min-width: 992px) {
  [data-menu-open="true"] .mega-nav__bar-link.is--dropdown[aria-expanded="true"] {
    background-color: var(--color-accent);
    color: var(--brand-charcoal);
  }
}

/* Bar utilities (region + search stubs) */
.mega-nav__bar-list.is--utils {
  gap: clamp(1px, 0.4vw, 6px);
  margin-right: clamp(1px, 0.4vw, 6px);
}

.mega-nav__bar-link.is--util {
  gap: 0.375em;
}

.mega-nav__bar-link-icon.is--util {
  width: 1.25em;
}

/* ---- Tablet and mobile: panels stack, grids collapse ------------------ */

@media (max-width: 991px) {
  .mega-nav__panel-row {
    flex-flow: column;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--cards {
    grid-template-columns: 1fr;
  }

  .mega-nav__panel-card,
  .mega-nav__dropdown-inner.is--acf .is--cards.is--cover .mega-nav__panel-tile {
    min-height: calc(260 * var(--px));
  }

  .mega-nav__panel-pills {
    justify-content: flex-start;
  }

  .mega-nav__panel-cta {
    margin-inline: 0;
    text-align: center;
  }
}

/* ---- Mobile panels (Figma mobileMenu-homeDesigns, 899:42620) -----------
   Cards shed their media and badges into compact rows (first card accent,
   the rest light), groups become 35px rows without descriptions, chips sit
   under a heading, and the panel ends with Search + the panel CTA. */

.mega-nav__panel-mobile-actions {
  display: none;
}

@media (max-width: 991px) {
  .mega-nav__dropdown-panel {
    background-color: var(--brand-silver);
  }

  .mega-nav__dropdown-inner.is--acf {
    gap: 32px;
    padding: 16px 16px 56px;
  }

  .mega-nav__panel-intro {
    gap: 8px;
    padding-bottom: 0;
  }

  .mega-nav__panel-intro-title {
    font-size: 20px;
  }

  .mega-nav__panel-intro-text {
    font-size: 13px;
  }

  .mega-nav__panel-row {
    gap: 12px;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-col {
    flex: none;
    gap: 12px;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--groups {
    gap: 20px;
    padding-top: 20px;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--groups + .mega-nav__panel-col.is--groups {
    padding-top: 8px;
  }

  /* Compact feature card */
  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-card,
  .mega-nav__dropdown-inner.is--acf .is--cards.is--cover .mega-nav__panel-tile,
  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-intro + .mega-nav__panel-row .mega-nav__panel-card {
    flex-flow: row;
    align-items: stretch;
    gap: 16px;
    min-height: 0;
    padding: 16px 16px 18px;
    border-radius: 12px;
    background-color: var(--brand-group-white);
    color: var(--brand-charcoal);
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-row > .mega-nav__panel-col.is--feature:first-child .mega-nav__panel-card,
  .mega-nav__dropdown-inner.is--acf .is--cards.is--cover .mega-nav__panel-tile:first-child {
    background-color: color-mix(in srgb, var(--color-accent) 90%, var(--brand-white));
  }

  .mega-nav__panel-card::before,
  .is--cards.is--cover .mega-nav__panel-tile::before,
  .mega-nav__panel-card-media,
  .is--cards.is--cover .mega-nav__panel-tile-image,
  .mega-nav__panel-card .mega-nav__panel-badge,
  .mega-nav__panel-tile .mega-nav__panel-badge {
    display: none;
  }

  .mega-nav__panel-card-body,
  .is--cards.is--cover .mega-nav__panel-tile-body {
    flex: 1;
    gap: 12px;
    padding: 0;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-card-title,
  .is--cards.is--cover .mega-nav__panel-tile-title {
    color: var(--brand-charcoal);
    padding-top: 0;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .mega-nav__panel-card-text,
  .mega-nav__panel-card.is--image .mega-nav__panel-card-text,
  .is--cards.is--cover .mega-nav__panel-tile-text {
    font-size: 12px;
    color: var(--brand-charcoal);
    opacity: 0.67;
  }

  .mega-nav__panel-card .mega-nav__panel-card-arrow,
  .is--cards.is--cover .mega-nav__panel-tile-arrow.brand-shape {
    --color-accent: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
    position: relative;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    flex: none;
    width: 24px;
    height: 24px;
  }

  .mega-nav__panel-col.is--feature:first-child .mega-nav__panel-card-arrow,
  .is--cards.is--cover .mega-nav__panel-tile:first-child .mega-nav__panel-tile-arrow.brand-shape {
    --color-accent: var(--brand-silver);
  }

  .mega-nav__panel-card-arrow .btn__cap-icon,
  .mega-nav__panel-tile-arrow .btn__cap-icon {
    width: 14px;
    height: 14px;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-col.is--cards.is--cover {
    gap: 12px;
  }

  /* Groups: heading + 35px rows */
  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-label {
    padding: 0 0 12px;
    font-size: 11px;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-list.is--tiles {
    gap: 0;
  }

  .mega-nav__dropdown-inner.is--acf .is--groups .mega-nav__panel-link,
  .mega-nav__dropdown-inner.is--acf .is--compact .mega-nav__panel-link,
  .mega-nav__dropdown-inner.is--acf .is--compact .mega-nav__panel-link.has--icon,
  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-link.is--tile {
    gap: 8px;
    min-height: 35px;
    padding: 0;
    border-bottom: 0;
  }

  .mega-nav__dropdown-inner.is--acf .is--groups .mega-nav__panel-link:hover {
    background: none;
    box-shadow: none;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-link-text {
    font-size: 14px;
    font-weight: 650;
  }

  .mega-nav__dropdown-inner.is--acf .mega-nav__panel-link.is--tile .mega-nav__panel-link-desc,
  .mega-nav__panel-link-arrow {
    display: none;
  }

  .is--compact .mega-nav__panel-link-tile,
  .is--tile .mega-nav__panel-link-tile {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 6px;
    background: none;
  }

  .is--compact .mega-nav__panel-link-icon,
  .is--tile .mega-nav__panel-link-icon {
    width: 20px;
    height: 20px;
  }

  /* Chips */
  .mega-nav__panel-pills {
    justify-content: flex-start;
    gap: 8px 6px;
    padding: 0;
  }

  .mega-nav__panel-pills-label {
    flex-basis: 100%;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-charcoal) 60%, transparent);
  }

  .mega-nav__panel-pill {
    height: 38px;
    padding: 2px 14px 0;
    border-color: var(--color-accent);
    background-color: var(--brand-group-white);
    font-size: 13px;
    letter-spacing: 0.25px;
  }

  .mega-nav__panel-pill-icon {
    width: 16px;
    height: 16px;
  }

  .mega-nav__panel-pills-more {
    margin: 8px 0 0;
    font-size: 14px;
  }

  /* End actions replace the desktop CTA band */
  .mega-nav__panel-cta {
    display: none;
  }

  .mega-nav__panel-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mega-nav__panel-mobile-search {
    gap: 9px;
    height: 45px;
    font-size: 13px;
  }

  .mega-nav__panel-mobile-search .mega-nav__mobile-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .mega-nav__panel-mobile-cta {
    height: 43px;
    font-size: 14px;
  }
}


/* --- css/core/nav-search.css --- */
/* core/nav-search.css — the nav search overlay (Figma "Search" board
   730:21160: Search Focus 730:20502, DropDown Focus 730:20696, Search
   Results 730:20590). Lives in the mega-nav dropdown panel
   (data-nav-content="dc-search"), opened by [data-dropdown-toggle="dc-search"].

     .nav-search > __heading + form.__bar + __results + __chips

   The panel is an accent-filled sheet: heading, one wide pill search bar with
   a charcoal go button, then "Or browse by" and the suggestion chips. While
   the visitor types, __results becomes a white card hanging under the bar. */

/* The search panel fills with accent, unlike the mega menu's own panels. */
[data-nav-content="dc-search"] .mega-nav__dropdown-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(640 * var(--px));
  background-color: var(--color-accent);
  border-radius: 0 0 calc(15 * var(--px)) calc(15 * var(--px));
  box-shadow:
    0 calc(-1 * var(--px)) calc(2 * var(--px)) rgb(0 0 0 / 0.05),
    0 calc(1 * var(--px)) calc(2 * var(--px)) rgb(0 0 0 / 0.05),
    0 calc(7 * var(--px)) calc(12 * var(--px)) rgb(50 50 50 / 0.05);
}

.nav-search {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-09);
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-block: calc(64 * var(--px));
  color: var(--color-text-dark);
}

.nav-search__heading {
  font-family: var(--font-serif);
  font-size: calc(46 * var(--px));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.0217em;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

/* Figma wraps the bar and the results in one container (Frame 9759), which is
   what anchors the results card to the bar rather than to the panel. */
/* The chips come after this in the DOM, so the field needs its own stacking
   context above them or they paint over the results card. */
.nav-search__field {
  position: relative;
  z-index: 3;
  width: calc(720 * var(--px));
  max-width: 100%;
  margin-top: calc(var(--space-08) - var(--space-09));
}

/* ---- the bar ---- */
.nav-search__bar {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--px));
  width: 100%;
  padding: calc(12 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px)) calc(24 * var(--px));
  border: 1px solid color-mix(in srgb, var(--brand-charcoal) 80%, transparent);
  border-radius: calc(54 * var(--px));
  background-color: var(--brand-white);
  /* Figma searchShadow */
  box-shadow:
    0 calc(12 * var(--px)) calc(18 * var(--px)) rgb(50 50 50 / 0.1),
    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.06),
    0 calc(-1 * var(--px)) calc(2 * var(--px)) rgb(0 0 0 / 0.05);
}

.nav-search__icon {
  flex: none;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  color: var(--brand-charcoal);
}

.nav-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: calc(18 * var(--px));
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-dark);
  outline: none;
}

.nav-search__input::placeholder { color: color-mix(in srgb, var(--brand-charcoal) 50%, transparent); }
.nav-search__input::-webkit-search-cancel-button { display: none; }

.nav-search__clear {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  font-size: calc(20 * var(--px));
  line-height: 1;
  color: color-mix(in srgb, var(--brand-charcoal) 55%, transparent);
  cursor: pointer;
}

.nav-search__clear:hover { color: var(--color-text-dark); }

/* Figma btn-go: a charcoal circle with the brand arrow, not a text button. */
.nav-search__go {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
  cursor: pointer;
  transition: background-color var(--animation-default-half), color var(--animation-default-half);
}

.nav-search__go:hover { background-color: var(--color-accent); color: var(--brand-charcoal); }

.nav-search__go svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }

/* ---- results: a white card under the bar ---- */
/* [hidden] is display:none from the UA sheet, which a display:flex here would
   override — the empty results card then shows as a white bar. */
.nav-search__results[hidden] { display: none; }

.nav-search__results {
  position: absolute;
  top: calc(100% + calc(10 * var(--px)));
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  width: calc(760 * var(--px));
  max-width: 100%;
  max-height: calc(391 * var(--px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--px));
  padding: calc(10 * var(--px));
  border-radius: calc(20 * var(--px));
  background-color: var(--brand-white);
  box-shadow:
    0 calc(12 * var(--px)) calc(18 * var(--px)) rgb(50 50 50 / 0.1),
    0 calc(2 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.06);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand-charcoal) 25%, transparent) transparent;
}

.nav-search__results-label {
  margin: 0;
  padding-inline: calc(10 * var(--px));
  font-size: calc(11 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-charcoal) 45%, transparent);
}

.nav-search__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(15 * var(--px));
  padding: calc(15 * var(--px)) calc(20 * var(--px)) calc(15 * var(--px)) calc(15 * var(--px));
  border-radius: calc(10 * var(--px));
  background-color: var(--brand-white);
  color: var(--color-text-dark);
  text-decoration: none;
  transition: background-color var(--animation-default-half);
}

.nav-search__item:hover,
.nav-search__item.is--active {
  background-color: color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
}

/* The thumb slot doubles as the design's content-type tile. */
.nav-search__thumb {
  flex: none;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  object-fit: cover;
  border-radius: calc(6 * var(--px));
  background-color: rgb(0 0 0 / 0.15);
}

.nav-search__thumb.is--empty { display: inline-block; }

.nav-search__item-body {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--px));
  flex: 1;
  min-width: 0;
}

.nav-search__item-title {
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1.25;
}

/* The matched term is emboldened inside the title (nav-search.js). */
.nav-search__item-title mark {
  background: none;
  color: inherit;
  font-weight: 700;
}

/* Two lines then ellipsis, per the design's fixed excerpt box. */
.nav-search__item-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: calc(13 * var(--px));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(0 0 0 / 0.45);
}

.nav-search__item-arrow {
  flex: none;
  width: calc(15 * var(--px));
  height: calc(20 * var(--px));
  color: color-mix(in srgb, var(--brand-charcoal) 50%, transparent);
}

.nav-search__empty {
  margin: 0;
  padding: calc(20 * var(--px));
  color: color-mix(in srgb, var(--brand-charcoal) 55%, transparent);
  text-align: center;
}

/* ---- browse by + chips ---- */
.nav-search__chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(12 * var(--px));
  width: calc(860 * var(--px));
  max-width: 100%;
}

.nav-search__chips-label {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: calc(16 * var(--px));
  font-weight: 650;
  line-height: 1;
  color: var(--color-text-dark);
}

/* The chips are the search panel's own pill, not the mega menu's. */
.nav-search__chips .mega-nav__panel-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(32 * var(--px));
  min-width: calc(75 * var(--px));
  padding-inline: var(--space-05);
  border: 1px solid rgb(115 115 115 / 0.3);
  border-radius: calc(66 * var(--px));
  background-color: transparent;
  color: var(--color-text-dark);
  font-size: calc(13 * var(--px));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.0192em;
  text-decoration: none;
  transition:
    background-color var(--animation-default-half),
    border-color var(--animation-default-half);
}

.nav-search__chips .mega-nav__panel-pill:first-of-type {
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.nav-search__chips .mega-nav__panel-pill:hover {
  border-color: var(--brand-charcoal);
  background-color: var(--brand-white);
}

@media screen and (max-width: 991px) {
  .nav-search {
    gap: var(--space-07);
    padding-block: var(--space-09);
  }

  .nav-search__heading { font-size: calc(30 * var(--px)); }

  .nav-search__field { width: 100%; margin-top: 0; }

  .nav-search__bar {
    gap: calc(10 * var(--px));
    padding-left: calc(16 * var(--px));
  }

  .nav-search__results {
    position: static;
    translate: none;
    width: 100%;
    max-height: none;
    box-shadow: none;
  }

  .nav-search__chips { width: 100%; }
}


/* --- css/core/footer.css --- */
/* core/footer.css — the persistent footer chrome (footer.php; Figma
   Footer/Desktop 1484:42452, Footer/Mobile 1484:42960, board 1484:7949).
   Image CTA band, then the charcoal footer body on a dark-charcoal root:
   a brand column (heading, intro, region selector, L motif) beside three
   link columns, with the share line and socials on a row beneath them, then
   the fine print. The parallax reveal (js/components/footer-parallax.js)
   moves .footer.

   Geometry is the Figma frame: the 1440 container splits 290 / 197 / 953,
   and the right-hand side is 447 tall with the follow row pinned to its
   bottom (304 columns + 103 + 40). */

.footer__wrap { position: relative; overflow: hidden; }

/* ---- CTA band ---- */
.footer-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(675 * var(--px));
  overflow: hidden;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
  text-align: center;
}

.footer-cta__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--brand-charcoal) 40%, transparent);
  mix-blend-mode: multiply;
}

.footer-cta__arch {
  position: absolute;
  right: calc(-240 * var(--px));
  top: calc(270 * var(--px));
  z-index: 1;
  width: calc(574 * var(--px));
  pointer-events: none;
}

/* Figma: 547 wide with a space-10 gap, so the title wraps to two lines. */
.footer-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  /* 547 is the design's TEXT width; this element is also .container, whose
     inline padding sits inside max-width, so add it back. */
  max-width: calc(547 * var(--px) + 2 * var(--container-padding));
}

.footer-cta__label,
.footer-cta__title { color: var(--color-accent); }

/* Full width of the 547 content box, so the title breaks over two lines as
   drawn rather than shrink-to-fit inside the centred flex column. */
.footer-cta__title { width: 100%; margin: 0; }
.footer-cta__title em { font-style: italic; }

/* ---- Footer ---- */
.footer {
  position: relative;
  margin-top: calc(-1 * var(--radius-l));
  background: var(--brand-dark-charcoal);
  color: var(--color-text-light);
}

/* The design's inner charcoal block; the fine print sits outside it on the
   dark-charcoal root. */
.footer__body {
  padding-top: calc(72 * var(--px) + var(--radius-l));
  border-radius: var(--radius-l);
  background: var(--brand-charcoal);
}

/* Two rows: brand + columns, then the L motif + the follow row. In the frame
   the motif and the follow row both bottom out at the same y, which is why
   they share a row and align to its end. */
.footer__main {
  display: grid;
  grid-template-columns: calc(290 * var(--px)) 1fr;
  grid-template-areas:
    "brand columns"
    "motif follow";
  column-gap: calc(197 * var(--px));
  row-gap: calc(103 * var(--px));
  padding-bottom: calc(56 * var(--px));
}

.footer__start {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-07);
}

.footer__brand-title {
  margin: 0;
  color: var(--color-accent);
}

.footer__brand-title em { font-style: italic; }

.footer__brand-text {
  margin: 0;
  max-width: calc(360 * var(--px));
  color: var(--color-text-light-secondary);
}

.footer__motif {
  grid-area: motif;
  align-self: end;
  width: calc(98 * var(--px));
  height: auto;
}

.footer__region {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(45 * var(--px));
  border-radius: var(--radius-s);
  background-color: color-mix(in srgb, var(--brand-silver) 10%, transparent);
  backdrop-filter: blur(10px);
}

.footer__region-pin {
  position: absolute;
  left: calc(12 * var(--px));
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  pointer-events: none;
}

.footer__region select {
  width: 100%;
  height: 100%;
  padding: 0 calc(40 * var(--px));
  border: 0;
  background: transparent url("../../img/icons/caret-down.svg") no-repeat right calc(12 * var(--px)) center / calc(20 * var(--px));
  color: inherit;
  font: inherit;
  font-size: var(--body-m-size);
  text-align: center;
  text-align-last: center;
  appearance: none;
  cursor: pointer;
}

.footer__region option { color: var(--brand-charcoal); }

.footer__quick {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__quick-link {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--px));
  color: var(--color-text-light);
  font-size: calc(17 * var(--px));
  font-weight: 630;
  text-decoration: none;
}

.footer__quick-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(45 * var(--px));
  height: calc(45 * var(--px));
  border-radius: var(--radius-s);
  background-color: color-mix(in srgb, var(--brand-silver) 10%, transparent);
}

.footer__quick-icon img { width: calc(30 * var(--px)); height: calc(30 * var(--px)); }

.footer__quick-label {
  padding-bottom: calc(4 * var(--px));
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 calc(2 * var(--px)) no-repeat,
    linear-gradient(color-mix(in srgb, var(--brand-silver) 20%, transparent), color-mix(in srgb, var(--brand-silver) 20%, transparent)) left bottom / 100% calc(2 * var(--px)) no-repeat;
  transition: background-size var(--animation-default);
}

.footer__quick-link:hover .footer__quick-label { background-size: 100% calc(2 * var(--px)), 100% calc(2 * var(--px)); }

.footer__columns {
  grid-area: columns;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(48 * var(--px));
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-07b);
}

.footer__heading {
  margin: 0;
  color: var(--color-accent);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--px));
  margin: 0;
  padding: calc(8 * var(--px)) 0 0;
  list-style: none;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--animation-default-half);
}

.footer__link:hover { color: var(--color-accent); }

.footer__link img { width: calc(11 * var(--px)); height: calc(11 * var(--px)); }

.footer__follow {
  grid-area: follow;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--px));
}

.footer__socials {
  display: flex;
  gap: calc(10 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The Figma social icons are complete 40px tiles: silver-10 rounded square
   plus the accent glyph, so there is no tile to draw here. */
.footer__social img {
  display: block;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  transition: opacity var(--animation-default-half);
}

.footer__social:hover img { opacity: 0.7; }

.footer__share {
  margin: 0;
  color: var(--color-accent);
}

.footer__share em {
  font-family: var(--font-serif);
  font-size: calc(18 * var(--px));
  font-style: italic;
}

/* ---- Legal bar ---- */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: calc(35 * var(--px));
  padding-block: calc(48 * var(--px));
  font-size: var(--body-xs-size, calc(13 * var(--px)));
  line-height: 1.4;
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-light-secondary);
}

.footer__legal-links a { color: inherit; text-decoration: none; }
.footer__legal-links a:hover { color: var(--color-accent); }

.footer__legal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--px));
  color: var(--color-text-light-tertiary);
}

.footer__legal p { margin: 0; }

.footer__dark {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--brand-dark-charcoal);
  pointer-events: none;
  opacity: 0;
}

@media screen and (max-width: 991px) {
  .footer__main {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand   brand"
      "columns columns"
      "motif   follow";
    column-gap: calc(24 * var(--px));
    row-gap: var(--space-07);
  }

  .footer__columns { flex-wrap: wrap; gap: calc(48 * var(--px)); }
}

@media screen and (max-width: 767px) {
  .footer-cta { min-height: calc(560 * var(--px)); }
  .footer-cta__arch { display: none; }

  .footer__columns { display: grid; grid-template-columns: 1fr 1fr; }
  .footer__column--quick { grid-column: 1 / -1; }

  /* Quick links go two-up on mobile (Figma Footer/Mobile). */
  .footer__column--quick .footer__quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-07);
  }

  /* Share line above the socials, both to the right of the motif. */
  .footer__follow {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--px));
  }

  .footer__share { max-width: calc(200 * var(--px)); }

  .footer__legal { grid-template-columns: 1fr; }
}


/* --- css/sections/hero.css --- */
/* sections/hero.css — blocks/hero, the Page Layouts hero row (Figma "Hero
   Area" 1158:39147 desktop 1600x900, "Hero" 1154:42999 mobile 393x699).
   Full-bleed media behind the floating nav, accent label + display title,
   buttons anchored to the bottom, arch-line brand graphic bottom-right.
   Type comes from the .type-* classes in the markup. */

.section_hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  /* The section clips; the oversized bg wrapper is what the parallax moves */
  overflow: clip;
  /* Pull up behind the floating nav (body padding-top offsets it) */
  margin-top: calc(-1 * (4em + 1.25em));
}

@media screen and (max-width: 991px) {
  .section_hero {
    margin-top: -4em;
  }
}

/* ---- Media ---- */

/* 110% height gives the parallax room to travel without exposing edges */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 110%;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.hero__poster,
.hero__bg img,
.hero__bg picture,
.hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.hero__video--vimeo {
  overflow: hidden;
}

.hero__video--vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78svh);
  height: max(100svh, 56.25vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Figma scrims: 20% charcoal multiply + a darkening fall over the whole
   frame, and a top shade the nav sits on. */
.hero__bg::before,
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__bg::before {
  background:
    linear-gradient(0deg, rgb(50 50 50 / 0.2), rgb(50 50 50 / 0.2)),
    linear-gradient(180deg, rgb(0 0 0 / 0.09) 0.72%, rgb(33 33 33 / 0.3) 86.14%);
  background-blend-mode: multiply, normal;
}

.hero__bg::after {
  bottom: auto;
  height: calc(140 * var(--px));
  background: linear-gradient(180deg, rgb(50 50 50 / 0.3), rgb(50 50 50 / 0));
}

/* Fades in as the hero scrolls away (js/components/scroll-darken.js) */
.hero__scroll-darken {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--brand-charcoal);
  opacity: 0;
  pointer-events: none;
}

/* Arch-line brand graphic bleeding off the bottom-right (accent stroke baked
   into the SVG). Above the media, below the content. */
.section_hero::after {
  content: "";
  position: absolute;
  right: calc(-78 * var(--px));
  bottom: calc(-329 * var(--px));
  z-index: 1;
  width: calc(574 * var(--px));
  height: calc(960 * var(--px));
  background: url("../img/brand/arch-line.svg") no-repeat center / contain;
  pointer-events: none;
}

/* ---- Content ---- */

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(178 * var(--px));
  width: 100%;
  padding-top: calc(var(--nav-height, 140px) + var(--space-08));
  padding-bottom: calc(100 * var(--px));
}

.hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(70 * var(--px));
}

/* Figma measures gaps from cap height to baseline (text-box-trim). Browsers
   without text-box fall back to line-box spacing, slightly looser. */
.hero__label,
.hero__title {
  text-box: trim-both cap alphabetic;
}

/* Label: accent caps after the brand shape (square with a rounded top) */
/* Block (not flex) so text-box can trim it; the shape sits on the baseline,
   which lines it up with the cap height. */
.hero__label {
  display: block;
  color: var(--color-accent);
}

.hero__label::before {
  content: "";
  display: inline-block;
  margin-right: calc(10 * var(--px));
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  border-radius: calc(5 * var(--px)) calc(5 * var(--px)) 0 0;
  background-color: var(--color-accent);
}

.hero__title {
  max-width: calc(965 * var(--px));
  margin: 0;
  text-wrap: balance;
  color: var(--color-accent);
}

.hero__text {
  max-width: calc(640 * var(--px));
  margin-top: calc(-35 * var(--px));
  color: var(--color-text-light);
}

.hero__content .btn-group {
  gap: calc(12 * var(--px));
}

/* Secondary on media: Figma silver-alpha-10 */
.hero__content .btn.is-subtle {
  --btn-bg: color-mix(in srgb, var(--brand-silver) 10%, transparent);
  --btn-ink: var(--color-text-light);
  --btn-bg-hover: color-mix(in srgb, var(--brand-silver) 20%, transparent);
  --btn-ink-hover: var(--color-text-light);
  backdrop-filter: blur(calc(10 * var(--px)));
  -webkit-backdrop-filter: blur(calc(10 * var(--px)));
}

@media screen and (max-width: 767px) {
  .section_hero::after {
    right: calc(-162 * var(--px));
    bottom: calc(-20 * var(--px));
    width: calc(258 * var(--px));
    height: calc(431 * var(--px));
  }

  .hero__content {
    gap: calc(56 * var(--px));
    padding-bottom: calc(27 * var(--px));
  }

  .hero__main {
    gap: var(--space-06b);
  }

  .hero__label::before {
    margin-right: calc(7 * var(--px));
    width: calc(8 * var(--px));
    height: calc(8 * var(--px));
    border-radius: calc(4 * var(--px)) calc(4 * var(--px)) 0 0;
  }

  .hero__text {
    margin-top: 0;
  }

  /* Two equal buttons across the width; Figma mobile uses silver-alpha-15 */
  .hero__content .btn-group {
    flex-wrap: nowrap;
  }

  /* Two equal buttons; the 35 mobile height is global in button.css */
  .hero__content .btn-group .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .hero__content .btn.is-subtle {
    --btn-bg: color-mix(in srgb, var(--brand-silver) 15%, transparent);
  }
}


/* --- css/sections/intro.css --- */
/* sections/intro.css — large opening statement (blocks/intro_section):
   eyebrow label + big text that colours in on scroll (data-highlight-text). */

.intro__label {
  display: block;
  margin-bottom: var(--space-s);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  font-weight: 600;
}

.intro__statement {
  max-width: 24em;
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.intro__statement p { margin: 0; }
.intro__statement p + p { margin-top: 0.75em; }


/* --- css/sections/text-block.css --- */
/* sections/text-block.css — freeform prose section (blocks/text_block_section).
   Items stack in a narrow reading column sharing the single-post prose rhythm. */

.text-block__items {
  max-width: 42em;
}

.text-block__prose + .text-block__prose { margin-top: var(--space-m); }

.text-block__prose > p,
.text-block__prose > ul,
.text-block__prose > ol {
  line-height: 1.7;
  margin-block: 0 1.25em;
}

.text-block__prose > :is(h2, h3, h4, h5, h6) {
  margin-block: 1.75em 0.6em;
  letter-spacing: -0.02em;
}

.text-block__prose > :first-child { margin-top: 0; }
.text-block__prose > :last-child { margin-bottom: 0; }

.text-block__prose a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.text-block__prose blockquote {
  margin: 1.75em 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--color-ink);
  font-size: var(--text-l);
  line-height: 1.4;
}


/* --- css/sections/cta.css --- */
/* sections/cta.css — full-width CTA band (blocks/cta_section): dark section,
   optional cover image behind a tint overlay, centred block-intro + buttons. */

.section_cta {
  position: relative;
  overflow: clip;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 55%);
}

.cta__content {
  position: relative;
  z-index: 1;
}

/* Inside the band the intro stack loses its own bottom margin */
.section_cta .block-intro { margin-bottom: 0; }


/* --- css/sections/slider.css --- */
/* The DC slider — token-driven styling for the GSAP loop slider
   (js/components/slider.js), plus the CSS-only mobile carousel.

   .dc-slider markup:
     .dc-slider__wrap > [data-slider="list"] > [data-slider="slide"]*
     .dc-slider__nav  > [data-slider-button="prev"|"next"]              */

.dc-slider .dc-slider__wrap {
  width: 100%;
  overflow: hidden;
}

.dc-slider .dc-slider__list {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  cursor: grab;
}
.dc-slider .dc-slider__list:active { cursor: grabbing; }

.dc-slider .dc-slider__slide {
  aspect-ratio: 3 / 2;
  flex: none;
  width: 28vw;
  padding-inline: calc(var(--gap-m) / 2);
  transition: opacity 0.4s;
  position: relative;
}

.dc-slider .dc-slider__slide-inner {
  border-radius: var(--radius-m);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.dc-slider .dc-slider__slide-inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Non-active slides recede */
.dc-slider [data-slider="slide"] { opacity: 0.35; }
.dc-slider [data-slider="slide"].active { opacity: 1; }

/* Nav buttons are .btn-arrow (components/button.css) */
.dc-slider .dc-slider__nav {
  display: flex;
  gap: calc(8 * var(--px));
  margin-top: var(--gap-l);
}

@media screen and (max-width: 991px) {
  .dc-slider .dc-slider__slide { width: 60vw; }
}

@media screen and (max-width: 767px) {
  .dc-slider .dc-slider__slide { width: 85vw; }

  /* CSS-only mobile carousel for [data-mobile-carousel] grids
     (hotboxes, team cards, info cards) */
  [data-mobile-carousel] {
    display: flex !important;
    gap: var(--gap-m);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-mobile-carousel]::-webkit-scrollbar { display: none; }
  [data-mobile-carousel] > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}


/* --- css/sections/image-text.css --- */
/* sections/image-text.css — two-up media + copy.

   Owns no layout of its own: the columns come from .dc-cols (base/cols.css).
   This file only styles what is specific to the section — the media framing
   and the copy stack. section_video-text shares it wholesale.

   Markup: blocks/image_text_block_section/render.php
     section.section_image-text[.is-image-right]
       > .container
         > .block-intro (optional)
         > .dc-cols.image-text__cols
           > .dc-col.image-text__media
           > .dc-col.image-text__body */

.image-text__cols { --cols: 2; }

/* Image right = swap the visual order only; DOM order stays media-first so
   the copy reads after the image on mobile regardless of the setting. */
.section_image-text.is-image-right .image-text__media { order: 2; }

.image-text__media { position: relative; }

.image-text__media img {
  width: 100%;
  border-radius: var(--radius-m);
}

/* Video variant (section_video-text): play button over the poster */
.image-text__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.5em;
  height: 4.5em;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-ink);
  background-color: var(--color-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform var(--duration-default-half) var(--cubic-default);
}

.image-text__play:hover { transform: scale(1.1); }

.image-text__play svg { width: 40%; }

.image-text__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-s);
}

.image-text__icon img {
  width: 3em;
  height: auto;
}

.image-text__body > :is(h1, h2, h3, h4, h5, h6) { margin: 0; }

.image-text__text > :first-child { margin-top: 0; }
.image-text__text > :last-child  { margin-bottom: 0; }

.image-text__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin-top: var(--gap-xs);
}

@media screen and (max-width: 767px) {
  .section_image-text.is-image-right .image-text__media { order: 0; }
}


/* --- css/sections/hotboxes.css --- */
/* sections/hotboxes.css — icon cards on .dc-cols.
   Markup: blocks/hotbox_section/render.php
     section_hotboxes > .container
       > .block-intro (optional)
       > .dc-cols.hotboxes__cols[--cols] > .dc-col.hotbox
       > .btn-group.hotboxes__buttons (optional) */

.hotbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
  padding: var(--gap-l);
  background-color: var(--color-surface-2);
  border-radius: var(--radius-m);
}

.hotbox__icon img {
  width: 3em;
  height: 3em;
  object-fit: contain;
}

.hotbox__title {
  margin: 0;
  font-size: var(--text-l);
}

.hotbox__subtitle {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-s);
}

.hotbox__text p { margin: 0; }

.hotbox__link { margin-top: auto; padding-top: var(--gap-s); }

.hotboxes__buttons { margin-top: var(--gap-l); }


/* --- css/sections/info-cards.css --- */
/* sections/info-cards.css — linked cards on .dc-cols.
   Markup: blocks/info_cards/render.php
     section_info-cards > .container
       > .block-intro (optional)
       > .dc-cols.info-cards__cols[--cols] > .dc-col.info-card
   The whole card is clickable (info-card__link stretch link); the corner
   arrow nudges on hover. */

.info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-l);
  background-color: var(--color-surface-2);
  border-radius: var(--radius-m);
  transition: background-color var(--duration-default-half) var(--cubic-default);
}

.info-card:hover { background-color: var(--color-surface-3); }

.info-card__title {
  margin: 0;
  font-size: var(--text-l);
  padding-right: 2em; /* clear the corner arrow */
}

.info-card__text {
  margin: 0;
  color: var(--color-ink-soft);
}

.info-card__arrow {
  position: absolute;
  top: var(--gap-l);
  right: var(--gap-l);
  width: 1.25em;
  color: var(--color-ink);
  transition: transform var(--duration-default-half) var(--cubic-default);
}

.info-card__arrow svg { width: 100%; display: block; }

.info-card:hover .info-card__arrow { transform: translate(0.15em, -0.15em); }

/* Stretch link: covers the card */
.info-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }


/* --- css/sections/image-block.css --- */
/* sections/image-block.css — image gallery grid on .dc-cols.
   Markup: blocks/image_block_section/render.php
     section_image-block > .container
       > .block-intro (optional)
       > .dc-cols.image-block__cols[--cols] > .dc-col.image-block__item
       > .btn-group (optional) */

.image-block__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-m);
}

.image-block__buttons { margin-top: var(--gap-l); }


/* --- css/sections/video-block.css --- */
/* sections/video-block.css — full-width autoplaying video band
   (blocks/video_block_section). */

.video-block__media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-l);
  display: block;
}

.video-block__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}

.video-block__caption {
  max-width: 36em;
  color: var(--color-ink-soft);
}

.video-block__caption p { margin: 0; }


/* --- css/sections/video-wall.css --- */
/* sections/video-wall.css — full-viewport band with floating video cards on a
   cursor-parallax stage (blocks/video_wall). JS (components/video-wall.js)
   owns stage + card transforms and the FLIP top/left/width/height inline
   values; this sheet supplies the layout, the .is-animating transition the
   FLIP rides on, and the <768px inline-slider fallback. */

.section_video-wall {
  position: relative;
  overflow: hidden;
}

/* The wall proper. In hero-intro mode it sits below a 100svh hero. */
.video-wall__wall {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-wall__stage-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ——— Hero intro (optional): full-bleed video that FLIP-shrinks into card 1 ——— */

/* Hero mode sits flush to the viewport top: pull up behind the floating nav
   (body padding-top offsets it), same trick as .section_hero. Mobile body
   padding is 4em (nav.css), so the pull matches per breakpoint. */
.section_video-wall.is-hero-intro {
  margin-top: calc(-1 * (4em + 1.25em));
}

@media screen and (max-width: 991px) {
  .section_video-wall.is-hero-intro {
    margin-top: -4em;
  }
}

.video-wall__hero {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-wall__hero-media {
  position: absolute;
  inset: 0;
}

/* The FLIP target. GSAP owns x/y/width/height between hero and slot; the
   0.001deg rotate forces GPU rasterising so the scrub stays subpixel-smooth
   (Osmo scaling-element recipe). Radius matches the cards so the shrink
   reads as becoming one of them. */
.video-wall__flip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  will-change: transform;
  transform: translateX(0) rotate(0.001deg);
  z-index: 3; /* above wall text while in transit */
}

.video-wall__flip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Parked inside card 1: fills the card, card owns interaction again. */
.video-wall__flip.is-docked {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
}

.video-wall__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.55));
  pointer-events: none;
  z-index: 4;
}

.video-wall__hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
}

.video-wall__hero-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125em;
  color: var(--n-50);
}

.video-wall__hero-title {
  color: var(--n-0);
  margin: 0;
}

/* The destination card is invisible until the video docks into it — the
   video flying in IS the card; a visible empty box reads as a glitch. */
.video-wall__card.is-flip-slot:not(.is-docked) { background: transparent; }
.video-wall__card.is-flip-slot .video-wall__play { opacity: 0; }
.video-wall__card.is-flip-slot.is-docked.is-active .video-wall__play { opacity: 1; }

/* Oversized stage, centred; % translate resolves to px and JS reads that
   resolved value as the parallax base. */
.video-wall__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 100%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.video-wall__content {
  position: relative;
  z-index: 1;
}

/* ——— Cards ——— */

.video-wall__card {
  position: absolute;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-surface-2);
  opacity: 0; /* staggered load-in fade; JS transitions to 1 */
  will-change: transform;
}

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

/* Placement + size tiers by repeater index. Tuned to ring the centred intro
   the way the reference does: two large anchors top, mid-size flanks, small
   fills. Positions are % of the 150%-wide stage. */
.video-wall__card.is-1 { width: 15%; left: 24%; top: 4%; }
.video-wall__card.is-2 { width: 30%; left: 67%; top: -10%; }
.video-wall__card.is-3 { width: 25%; left: 12%; top: 80%; }
.video-wall__card.is-4 { width: 16%; left: 75%; top: 60%; }
.video-wall__card.is-5 { width: 12%; left: 60%; top: 85%; }
.video-wall__card.is-6 { width: 12%; left: 16%; top: 32%; }

.video-wall__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-wall__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.5em;
  height: 2.5em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--n-0);
  opacity: 0;
  transition: opacity 0.25s;
}

.video-wall__play svg { width: 1em; height: 1em; }

.video-wall__card.is-active .video-wall__play { opacity: 1; }

/* The cursor-nearest card lifts above the intro text. */
.video-wall__card.is-active { z-index: 2; }

/* ——— FLIP transit ——— */

/* While flying between stage and lightbox the card is pinned to the viewport;
   JS sets inline top/left/width/height and this transition animates them. */
.video-wall__card.is-animating {
  position: fixed;
  z-index: 1002;
  margin: 0;
  opacity: 1;
  transition:
    top    0.55s cubic-bezier(0.625, 0.05, 0, 1),
    left   0.55s cubic-bezier(0.625, 0.05, 0, 1),
    width  0.55s cubic-bezier(0.625, 0.05, 0, 1),
    height 0.55s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Parked in the lightbox slot. */
.video-wall__card.is-lightboxed {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  opacity: 1;
  cursor: default;
}

.video-wall__card.is-lightboxed .video-wall__play { display: none; }

.video-wall__card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ——— Lightbox ——— */

.video-wall__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}

.video-wall__lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s;
}

.video-wall__lightbox-inner {
  width: min(70vw, 142svh); /* 16:9 capped at ~80svh tall */
}

.video-wall__lightbox-slot {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: opacity 0.4s;
}

.video-wall__lightbox-slot.is-leaving,
.video-wall__lightbox-name.is-leaving { opacity: 0; }

.video-wall__lightbox-slot.is-entering,
.video-wall__lightbox-name.is-entering { opacity: 0; transition: none; }

.video-wall__lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  margin-top: var(--gap-s);
  color: var(--n-50);
}

.video-wall__lightbox-name {
  font-size: 0.9375em;
  color: var(--n-300);
  transition: opacity 0.4s;
}

.video-wall__lightbox-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.video-wall__lightbox-story {
  font-size: 0.9375em;
  color: var(--n-50);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  margin-right: var(--gap-s);
}

.video-wall__lightbox-story[href=""],
.video-wall__lightbox-story:not([href]) { display: none; }

.video-wall__lightbox-btn {
  width: 2.25em;
  height: 2.25em;
  display: grid;
  place-items: center;
  border: 1px solid var(--n-700);
  border-radius: 50%;
  background: transparent;
  color: var(--n-50);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.video-wall__lightbox-btn:hover {
  background: var(--n-0);
  color: var(--n-900);
}

.video-wall__lightbox-btn svg { width: 1em; height: 1em; }

/* ——— Reduced motion ——— */

@media (prefers-reduced-motion: reduce) {
  .video-wall__card.is-animating,
  .video-wall__lightbox,
  .video-wall__lightbox-slot,
  .video-wall__lightbox-name { transition: none; }
}

/* ——— Mobile fallback (<768px): inline poster slider ——— */

@media (max-width: 767px) {
  .video-wall__wall {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-m);
    min-height: 0;
    padding-block: var(--space-l);
  }

  /* Hero: static full-bleed video, no FLIP (the scrub is desktop-only). */
  .video-wall__hero { height: 70svh; }

  .video-wall__stage-wrap { display: none; }

  /* JS re-mounts the lightbox in flow and keeps it open as a slider. */
  .video-wall__lightbox {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    background: none;
    opacity: 1;
    visibility: visible;
    padding-inline: var(--container-pad, 5vw);
  }

  .video-wall__lightbox-inner { width: 100%; }

  .video-wall__card { opacity: 1; }

  /* Close is a no-op on mobile — the slider is permanently open. */
  .video-wall__lightbox-btn[data-vw="close"] { display: none; }
}


/* --- css/sections/stacking-cards.css --- */
/* sections/stacking-cards.css — Process Card Stack (blocks/stacking_cards;
   Figma block-processCardStack 1158:39546, blocks board "Large process card
   stacking block"; mobile 1154:42887). Osmo 'Stacking Cards 3D (CSS)'.
     section_stacking-cards > .container > .block-intro
       > .card-stack[.is--fanned] > .card-stack__item
         > .card-stack__inner > .card-stack__copy (title + body) + .card-stack__media

   HOW IT WORKS — no JS at all:
   1. .card-stack is a grid with one --stack-row row per card. That row is pure
      scroll distance; the card is shorter and position:sticky, so each card
      parks at --stack-top while its row scrolls past.
   2. .card-stack carries view-timeline-name, so every card can animate against
      the STACK's progress rather than its own.
   3. Each card's animation-range is offset by its index (--stack-i), so card N
      only tilts away while card N+1 slides over it (3D variant only).

   Cards take the accent at 100/80/60/40/25% over white, first to last, per the
   board note ("5 background colours for a max of 5 cards").

   SUPPORT: scroll-driven animations are Chrome/Edge 115+ and Safari 26+.
   Elsewhere the cards still stack as plain sticky cards. */

.card-stack {
  --stack-row: 100svh;
  --stack-top: calc(80 * var(--px) + calc(24 * var(--px)));
  --stack-card-height: min(calc(568 * var(--px)), calc(100svh - var(--stack-top) - calc(24 * var(--px))));

  --stack-perspective: 60em;
  --stack-rotate: 25deg;
  --stack-scale: 0.85;
  --stack-dim: 0.45;

  display: grid;
  grid-auto-rows: var(--stack-row);
  width: 100%;
  position: relative;
  view-timeline-name: --card-stack;
}

.card-stack > .card-stack__item:last-child { margin-bottom: 0; }

.card-stack__item {
  --card-shade: 100%;

  position: sticky;
  top: var(--stack-top);
  height: var(--stack-card-height);
  padding: calc(22 * var(--px));
  border-radius: var(--radius-l);
  overflow: hidden;
  transform-origin: 50% 100%;
  background-color: color-mix(in srgb, var(--color-accent) var(--card-shade), var(--brand-white));
  color: var(--color-text-dark);
  box-shadow: 0 calc(-2 * var(--px)) calc(12 * var(--px)) rgb(0 0 0 / 0.06);
}

.card-stack__item:nth-child(2) { --card-shade: 80%; }
.card-stack__item:nth-child(3) { --card-shade: 60%; }
.card-stack__item:nth-child(4) { --card-shade: 40%; }
.card-stack__item:nth-child(5) { --card-shade: 25%; }

.card-stack__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.11fr);
  gap: calc(35 * var(--px));
  height: 100%;
}

.card-stack__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(24 * var(--px));
  padding: calc(13 * var(--px)) 0 calc(13 * var(--px)) calc(13 * var(--px));
  max-width: calc(420 * var(--px));
  min-height: 0;
}

.card-stack__title { margin: 0; }
.card-stack__title em { font-style: italic; }

.card-stack__body {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--px));
  /* so long copy cannot push past the card's bottom edge */
  min-height: 0;
}

.card-stack__subheading {
  margin: 0;
  font-size: calc(17 * var(--px));
  font-weight: 700;
  line-height: 1.45;
}

.card-stack__text {
  margin: 0;
  color: var(--color-text-dark-secondary);
}

.card-stack__body .btn-group {
  margin-top: calc(16 * var(--px));
  gap: calc(8 * var(--px));
}

.card-stack__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--brand-charcoal) 30%, transparent);
}

/* Brand arch line in the image's bottom-right corner */
.card-stack__media::after {
  content: "";
  position: absolute;
  right: calc(-108 * var(--px));
  bottom: calc(-108 * var(--px));
  width: calc(216 * var(--px));
  height: calc(216 * var(--px));
  border: calc(1.5 * var(--px)) solid var(--brand-white);
  border-radius: 50%;
  pointer-events: none;
}

.card-stack__image,
.card-stack__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Index for the per-card offsets. sibling-index() is the real answer;
   the nth-child ladder is the fallback for browsers without it. */
.card-stack__item:nth-child(1) { --stack-i: 1; }
.card-stack__item:nth-child(2) { --stack-i: 2; }
.card-stack__item:nth-child(3) { --stack-i: 3; }
.card-stack__item:nth-child(4) { --stack-i: 4; }
.card-stack__item:nth-child(5) { --stack-i: 5; }

@supports (width: calc(sibling-index() * 1px)) {
  .card-stack__item { --stack-i: sibling-index(); }
}

@supports (animation-timeline: view()) {
  .card-stack:not(.is--fanned) .card-stack__item {
    animation: card-stack-away linear forwards;
    animation-timeline: --card-stack;
    animation-range:
      exit-crossing calc(var(--stack-i, 1) * var(--stack-row) - 100svh)
      exit-crossing calc(var(--stack-i, 1) * var(--stack-row) - var(--stack-top));
  }
  .card-stack:not(.is--fanned) .card-stack__item:last-child { animation: none; }
}

@keyframes card-stack-away {
  to {
    transform: perspective(var(--stack-perspective)) rotateX(var(--stack-rotate)) scale(var(--stack-scale));
    filter: brightness(var(--stack-dim));
  }
}

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

/* ---- Variant: is--fanned (default) -------------------------------------
   Each card pins one --stack-offset LOWER than the one before and loses the
   same height, so every card's bottom edge lands on the same line while its
   top steps down: the previous card's title stays readable above it. The
   offset = card padding + the title's first line + a little air, so the
   FIRST LINE of the previous title shows (Chris 2026-09-15; Figma's 64 hid it).
   It reads the title's type tokens, so it follows the type scale. */

.card-stack.is--fanned {
  --stack-title-pad: calc(35 * var(--px));
  --stack-offset: calc(var(--stack-title-pad) + var(--display-m-size) * var(--display-m-lh) + calc(16 * var(--px)));
  --stack-card-height: min(calc(568 * var(--px) + (var(--stack-count, 5) - 1) * var(--stack-offset)), calc(100svh - var(--stack-top) - calc(24 * var(--px))));
  grid-auto-rows: calc(var(--stack-row) * 0.6);
}

.card-stack.is--fanned .card-stack__item {
  top: calc(var(--stack-top) + (var(--stack-i) - 1) * var(--stack-offset));
  height: calc(var(--stack-card-height) - (var(--stack-i) - 1) * var(--stack-offset));
}

/* Tablet (768-991): the copy needs more of the card than the desktop split
   gives it, and the fan tightens so five cards still fit the screen. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .card-stack { --stack-row: 95svh; }

  .card-stack.is--fanned { --stack-title-pad: calc(24 * var(--px)); }

  .card-stack__item { padding: calc(16 * var(--px)); }

  .card-stack__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: calc(24 * var(--px));
  }

  .card-stack__copy {
    max-width: none;
    padding: calc(8 * var(--px)) 0 calc(8 * var(--px)) calc(8 * var(--px));
    gap: calc(16 * var(--px));
  }

  .card-stack__body .btn-group { flex-wrap: wrap; }
}

@media screen and (max-width: 767px) {
  .card-stack {
    --stack-row: 90svh;
    --stack-top: calc(72px + calc(12 * var(--px)));
  }

  .card-stack.is--fanned { --stack-title-pad: calc(10 * var(--px)); }

  .card-stack__item { padding: calc(10 * var(--px)); }

  .card-stack__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: calc(16 * var(--px));
  }

  .card-stack__copy {
    max-width: none;
    padding: 0;
    gap: calc(16 * var(--px));
  }

  .card-stack__body .btn-group { flex-direction: column; align-items: stretch; }
}


/* --- css/sections/stacking-cards-parallax.css --- */
/* sections/stacking-cards-parallax.css — Home Designs Stack
   (blocks/stacking_cards_parallax; Figma 1158:39471 / card 1480:35058, which
   replaced 1158:39507 in the 22 Sep update; mobile 1154:42792). CSS sticky
   stack; the only JS is the first card's arch reveal (Chris 2026-09-15).

     section_home-designs > .container > .block-intro
       > .home-designs__stack
         > article.home-design-card[data-arch-reveal on the first]*
             > img + header (title, specs, button, mobile arrow)
               + figure.home-design-card__floorplan + footer (description)

   HOW IT STACKS: every card is position:sticky at --stack-top (just under the
   compact sticky header), so it stops dead when it gets there. Each later card
   sits one viewport below the previous card's parked position plus --stack-hold,
   so it only appears once the card before has parked and held for a moment.
   A spacer after the stack gives the last card the same hold.

   --stack-top = the compact header in core/nav.css (80 Figma px from 992px,
   72px below) + --stack-gap (24, Chris 2026-09-16), which is also the section's
   inline padding, so a parked card clears the header and the page edges by the
   same amount. overflow: clip on the section does not break sticky. */

.section_home-designs {
  --stack-gap: calc(24 * var(--px));
  --stack-top: calc(80 * var(--px) + var(--stack-gap));
  --stack-hold: 25svh;

  /* WIDTH leads (Chris 2026-09-16): full width up to the 1600 frame less the
     side padding. HEIGHT is whatever is left between the parked position and a
     --stack-gap strip at the bottom, floor 500, ceiling 900 — and never taller
     than 16:9 of the width it actually has, so the card never out-grows the
     1600 x 900 shape on a tall window. */
  --stack-card-w: min(calc(100vw - 2 * var(--stack-gap)), calc(1600px - 48px));
  --stack-room: calc(100svh - var(--stack-top) - var(--stack-gap));
  --stack-card: min(clamp(500px, var(--stack-room), 900px),
      calc(var(--stack-card-w) * 9 / 16));

  overflow: clip;
}

@media screen and (max-width: 991px) {
  .section_home-designs {
    --stack-top: calc(72px + var(--stack-gap));
  }
}

.home-designs__stack {
  position: relative;
  padding-inline: var(--stack-gap);
}

/* ARCH REVEAL: the first card starts as the Locale arch (Figma's arch: 1286
   wide, a full semicircle top) and opens into its rectangle as it scrolls up.
   js/components/arch-reveal.js scrubs --arch-progress 0 -> 1 until the card
   parks; 1 is the plain card, so no JS / reduced motion just shows the card.
   The card's content fades in over the last 30% so the curve never cuts it. */
.home-design-card[data-arch-reveal] {
  --arch-progress: 1;
  --arch-w: min(calc(1286 * var(--px)), 90vw);
  --arch-side: calc((100% - var(--arch-w)) / 2 * (1 - var(--arch-progress)));
  --arch-r: calc(var(--arch-w) / 2 * (1 - var(--arch-progress)) + var(--radius-l) * var(--arch-progress));
  --arch-r-btm: calc(var(--radius-l) * var(--arch-progress));

  clip-path: inset(0 var(--arch-side) 0 var(--arch-side) round var(--arch-r) var(--arch-r) var(--arch-r-btm) var(--arch-r-btm));
}

/* Content reveal, scrubbed by js/components/lock-reveal.js as the card comes
   up to its sticky top. Default 1 so no-JS and reduced motion get the finished
   card. The three groups are staggered so the eye lands top-left, then the
   description, then the floorplan; each window is 0.45 wide and they overlap.
   The arch only controls card one's SHAPE now, not its content. */
.home-design-card { --lock-progress: 1; }

.home-design-card__header,
.home-design-card__footer,
.home-design-card__floorplan {
  opacity: var(--lock-reveal);
  will-change: opacity, translate;
}

.home-design-card__header {
  --lock-reveal: clamp(0, calc((var(--lock-progress) - 0.1) / 0.45), 1);
  translate: 0 calc((1 - var(--lock-reveal)) * 24 * var(--px));
}

.home-design-card__footer {
  --lock-reveal: clamp(0, calc((var(--lock-progress) - 0.3) / 0.45), 1);
  translate: 0 calc((1 - var(--lock-reveal)) * 24 * var(--px));
}

/* The floorplan slides in from the right rather than up, so it reads as
   arriving onto the card. */
.home-design-card__floorplan {
  --lock-reveal: clamp(0, calc((var(--lock-progress) - 0.45) / 0.45), 1);
  translate: calc((1 - var(--lock-reveal)) * 48 * var(--px)) 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-design-card__header,
  .home-design-card__footer,
  .home-design-card__floorplan {
    opacity: 1;
    translate: none;
  }
}

/* Sticky is bounded by the content box, so the last card's hold is a spacer,
   not padding */
.home-designs__stack::after {
  content: "";
  display: block;
  height: var(--stack-hold);
}

.home-design-card {
  position: sticky;
  top: var(--stack-top);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: calc(1600px - 48px);
  height: var(--stack-card);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
}

.home-design-card+.home-design-card {
  margin-top: calc(100svh - var(--stack-top) - var(--stack-card) + var(--stack-hold));
}

.home-design-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 30% dark wash, a soft shade under the header and a deeper one under the footer */
.home-design-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.25) 0, transparent calc(289 * var(--px))),
    linear-gradient(to top, rgb(0 0 0 / 0.55) 0, transparent calc(340 * var(--px))),
    rgb(0 0 0 / 0.3);
  pointer-events: none;
}

.home-design-card__header,
.home-design-card__footer {
  position: relative;
  z-index: 2;
  padding: calc(56 * var(--px));
}

.home-design-card__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--px));
}

.home-design-card__title {
  margin: 0;
}

.home-design-card__footer {
  display: flex;
  align-items: flex-end;
}

.home-design-card__text {
  margin: 0;
  max-width: calc(750 * var(--px));
}

/* Keep the description clear of the floorplan. At 1600 the text (56 + 750)
   stops well short of it, but the design stops scaling at 1440, so from about
   1210 down the card narrows while the floorplan does not and the two would
   overlap. Only cards that actually have a floorplan are narrowed. */
.home-design-card:has(.home-design-card__floorplan) .home-design-card__footer {
  padding-right: calc(512 * var(--px));
}

/* Each design's own floorplan, bottom right, inset by the card's 56 padding.
   The plan artwork is white, so it multiplies into the translucent card. */
.home-design-card__floorplan {
  position: absolute;
  right: calc(56 * var(--px));
  bottom: calc(56 * var(--px));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-06);
  min-width: calc(300 * var(--px));
  min-height: calc(300 * var(--px));
  max-width: calc(400 * var(--px));
  max-height: calc(540 * var(--px));
  border-radius: var(--radius-m);
  background-color: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(calc(7.5 * var(--px)));
  -webkit-backdrop-filter: blur(calc(7.5 * var(--px)));
}

.home-design-card__floorplan-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(492 * var(--px));
  mix-blend-mode: multiply;
  object-fit: contain;
}

/* Mobile only: the arrow replaces the button (Figma 1154:42792). */
.home-design-card__arrow { display: none; }

.home-design-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(24 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-design-card__spec {
  display: flex;
  align-items: center;
  gap: calc(9.6 * var(--px));
  font-size: calc(24 * var(--px));
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.home-design-card__spec img {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  object-fit: contain;
}

.home-design-card__text {
  margin: 0;
}

.home-design-card .btn-group {
  flex-wrap: nowrap;
  gap: calc(12 * var(--px));
}

@media screen and (max-width: 767px) {
  .home-design-card[data-arch-reveal] {
    --arch-w: calc(310 * var(--px));
  }

  /* Figma's mobile card is its own shape, not the 1600 x 900 frame */
  .section_home-designs {
    --stack-card: calc(491 * var(--px));
  }

  .home-design-card {
    max-width: none;
  }

  .home-design-card__img {
    height: 70%;
  }

  .home-design-card::before {
    background:
      linear-gradient(to bottom, transparent 40%, var(--brand-charcoal) 72%),
      rgb(0 0 0 / 0.15);
  }

  .home-design-card__header,
  .home-design-card__footer {
    padding: calc(20 * var(--px));
  }

  /* Mobile: the accent arrow replaces the button and the floorplan is dropped
     (Figma 1154:42792). The arrow is positioned against the card rather than
     sitting in the header's flow, so the header can stay a column.
     KNOWN DIVERGENCE: the frame puts the spec row at the BOTTOM of the front
     card; here it stays under the title. Moving it would mean either
     duplicating the list in the DOM or absolutely positioning it above a
     variable-height description, so it is left for the mobile pass. */
  .home-design-card__header {
    gap: calc(12 * var(--px));
    padding-right: calc(72 * var(--px));
  }

  .home-design-card__header .btn-group,
  .home-design-card__floorplan { display: none; }

  .home-design-card__arrow {
    position: absolute;
    top: calc(20 * var(--px));
    right: calc(20 * var(--px));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40 * var(--px));
    height: calc(40 * var(--px));
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--brand-charcoal);
  }

  .home-design-card__arrow svg {
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
  }

  .home-design-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: calc(16 * var(--px));
  }

  .home-design-card__spec {
    gap: calc(6 * var(--px));
    font-size: calc(17 * var(--px));
  }

  .home-design-card__specs {
    gap: calc(16 * var(--px));
  }

  .home-design-card .btn-group>.btn {
    flex: 1;
  }
}

/* The intro body reads at body-l in this section's design, not the default body-m */
.section_home-designs .block-intro__text {
  font-size: var(--body-l-size);
  line-height: var(--body-l-lh);
  letter-spacing: var(--body-l-ls);
}


/* --- css/sections/bouncy-tabs.css --- */
/* sections/bouncy-tabs.css — Audience Tabs (Figma block-tabs-audience,
   node 1158:39448; mobile 1154:42760). Vault 'Bouncy Content Tabs' motion.
   Markup: blocks/bouncy_tabs/render.php
     section_bouncy-tabs > .container > .block-intro
       > .bouncy-tabs[data-bouncy-tabs-init]
         > .bouncy-tabs__bar > .bouncy-tabs__nav (ghost + indicator + buttons)
         > .bouncy-tabs__collection > .bouncy-tabs__list > .bouncy-tabs__item*
             > .bouncy-tabs__feature (visual + panel card) + .bouncy-tabs__resources (.card x2)

   The pill and ghost are positioned by GSAP; this file only shapes them.
   Panels are absolutely positioned and the script animates the list height,
   so .bouncy-tabs__collection keeps overflow:hidden. Resource cards are the
   shared .card component. */

.bouncy-tabs {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--px));
}

.bouncy-tabs__bar { padding-inline: calc(35 * var(--px)); }

.bouncy-tabs__nav {
  position: relative;
  display: flex;
  gap: calc(2 * var(--px));
  padding: calc(4 * var(--px));
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
  box-shadow: inset 0 0 4px rgb(0 0 0 / 0.05), inset 0 1px 2px rgb(0 0 0 / 0.05);
}

.bouncy-tabs__ghost,
.bouncy-tabs__indicator {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: var(--radius-full);
}

.bouncy-tabs__ghost {
  z-index: 1;
  width: 2em;
  opacity: 0;
  visibility: hidden;
  background-color: color-mix(in srgb, var(--brand-charcoal) 8%, transparent);
}

.bouncy-tabs__indicator {
  z-index: 2;
  width: 3em;
  background-color: var(--brand-charcoal);
  filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / 0.2));
}

.bouncy-tabs__button {
  position: relative;
  z-index: 3;
  flex: 1 0 0;
  min-width: calc(75 * var(--px));
  height: calc(40 * var(--px));
  padding: 0 calc(24 * var(--px));
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-dark);
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
  font-weight: 630;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--animation-default-half);
}

.bouncy-tabs__button[data-active] { color: var(--color-text-light); }

/* clip, not hidden: hidden makes this a scroll container and the sticky
   panel card inside would stick to it instead of the page */
.bouncy-tabs__collection {
  width: 100%;
  overflow: clip;
}

.bouncy-tabs__list {
  position: relative;
  width: 100%;
}

.bouncy-tabs__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: calc(35 * var(--px));
}

.bouncy-tabs__item:not([data-active]) {
  opacity: 0;
  visibility: hidden;
}

.bouncy-tabs__feature {
  position: relative;
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  min-height: calc(474 * var(--px));
  padding-left: calc(35 * var(--px));
}

.bouncy-tabs__visual {
  position: absolute;
  inset: 0 0 0 calc(35 * var(--px));
  overflow: hidden;
  border-radius: var(--radius-m);
}

.bouncy-tabs__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bouncy-tabs__panel-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--px));
  width: min(calc(380 * var(--px)), 100%);
  margin-top: calc(65 * var(--px));
  margin-left: calc(-35 * var(--px));
  padding: calc(35 * var(--px));
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-accent) 70%, var(--brand-white));
  color: var(--color-text-dark);
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 0.05));
}

/* Desktop + tablet: the card rides down the image, 50 below the compact
   sticky header (80 Figma px from 992px, 72px below), and stops 50 before the
   bottom of .bouncy-tabs__feature (sticky stays inside the parent's content
   box, so the feature's bottom padding is that 50). */
@media screen and (min-width: 768px) {
  .bouncy-tabs__feature {
    --panel-card-gap: calc(50 * var(--px));
    padding-bottom: var(--panel-card-gap);
  }

  .bouncy-tabs__panel-card {
    position: sticky;
    top: calc(80 * var(--px) + var(--panel-card-gap));
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .bouncy-tabs__panel-card { top: calc(72px + var(--panel-card-gap)); }
}

.bouncy-tabs__heading,
.bouncy-tabs__para { margin: 0; }

.bouncy-tabs__para { color: var(--color-text-dark-secondary); }

.bouncy-tabs__cta { width: 100%; }

.bouncy-tabs__resources {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
  width: clamp(calc(240 * var(--px)), 30%, calc(363 * var(--px)));
  flex-shrink: 0;
}

/* Tablet (768-991): same two columns, tighter insets and a smaller panel card
   so the image keeps its width and nothing collides. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .bouncy-tabs { gap: calc(35 * var(--px)); }

  .bouncy-tabs__bar { padding-inline: calc(24 * var(--px)); }

  .bouncy-tabs__item { gap: calc(24 * var(--px)); }

  .bouncy-tabs__feature {
    min-height: calc(380 * var(--px));
    padding-left: calc(24 * var(--px));
  }

  .bouncy-tabs__visual { inset: 0 0 0 calc(24 * var(--px)); }

  .bouncy-tabs__panel-card {
    width: min(calc(320 * var(--px)), 100%);
    gap: calc(16 * var(--px));
    margin-top: calc(40 * var(--px));
    margin-left: calc(-24 * var(--px));
    padding: calc(24 * var(--px));
  }

  .bouncy-tabs__resources { gap: calc(16 * var(--px)); }
}

@media screen and (max-width: 767px) {
  .bouncy-tabs { gap: calc(24 * var(--px)); }

  /* Sticky tabs within the block, swipe for the overflow tabs */
  .bouncy-tabs__bar {
    position: sticky;
    top: var(--nav-height, 0px);
    z-index: 5;
    margin-inline: calc(-1 * var(--container-padding));
    padding: calc(8 * var(--px)) var(--container-padding);
    overflow-x: auto;
    scrollbar-width: none;
    background-color: var(--color-surface);
  }

  .bouncy-tabs__bar::-webkit-scrollbar { display: none; }

  .bouncy-tabs__nav { width: max-content; }

  .bouncy-tabs__button {
    flex: 0 0 auto;
    padding: 0 calc(12 * var(--px));
    font-size: calc(14 * var(--px));
  }

  .bouncy-tabs__item {
    flex-direction: column;
    align-items: stretch;
    gap: calc(24 * var(--px));
  }

  /* flex: none — in a column the desktop's flex: 1 0 0 means zero height */
  .bouncy-tabs__feature {
    display: flex;
    flex: none;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  /* flex: none or the column flex item collapses its aspect-ratio height to 0 */
  .bouncy-tabs__visual {
    position: relative;
    flex: none;
    inset: auto;
    aspect-ratio: 345 / 260;
  }

  .bouncy-tabs__panel-card {
    width: auto;
    margin: calc(-24 * var(--px)) 0 0;
    padding: calc(24 * var(--px));
    border-radius: 0 0 var(--radius-m) var(--radius-m);
  }

  .bouncy-tabs__resources { width: 100%; }
}


/* --- css/sections/video-bento.css --- */
/* sections/video-bento.css — blocks/video_bento (Figma block-bento-01,
   node 1158:39417; mobile 1154:42731). 12-column bento: large video 8 cols,
   small video + text 4 cols. Client details slide in on hover; on mobile
   the videos become a swipe row with the details always visible.
   Play button = components/play-button.css. */

.section_video-bento .block-intro__title {
  color: var(--color-accent);
}

.video-bento {
  /* Card inset: client details and (on mobile) the body text share it so
     they line up. Figma: 35 desktop, 12 mobile. */
  --video-bento-inset: calc(35 * var(--px));

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: var(--grid-gutter);
}

.video-bento__videos {
  display: contents;
}

.video-bento__card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--color-surface-2);
  color: var(--color-text-light);
  text-align: left;
  cursor: pointer;
}

.video-bento__card:nth-child(1) {
  grid-column: 1 / span 8;
  grid-row: 1 / span 2;
  height: calc(530 * var(--px));
}

.video-bento__card:nth-child(2) {
  grid-column: 9 / span 4;
  grid-row: 1;
  margin-inline: var(--space-06);
  height: calc(234 * var(--px));
}

.video-bento__card:nth-child(n + 3) {
  display: none;
}

.video-bento__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 20% charcoal multiply scrim, plus the bottom shade the details sit on */
.video-bento__card::before,
.video-bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.video-bento__card::before {
  background: color-mix(in srgb, var(--brand-charcoal) 20%, transparent);
  mix-blend-mode: multiply;
}

.video-bento__card::after {
  /* top: auto;
  height: calc(127 * var(--px));
  background: linear-gradient(to top, rgb(0 0 0 / 0.25), transparent);
  opacity: 0;
  transition: opacity var(--animation-default-half); */

  background: linear-gradient(0deg, rgba(50, 50, 50, 0.20) 0%, rgba(50, 50, 50, 0.20) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.09) 0.72%, rgba(33, 33, 33, 0.30) 86.14%);
  background-blend-mode: multiply, normal;
}

.video-bento__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  translate: -50% -50%;
}

.video-bento__client {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
  padding: 0 var(--video-bento-inset) var(--video-bento-inset);
  opacity: 0;
  translate: 0 calc(20 * var(--px));
  transition: opacity var(--animation-default-half), translate var(--animation-default-half);
}

/* Figma sets the name as raw 17 / 15 ExtraBold, not a text style. */
.video-bento__name {
  font-weight: 800;
  font-size: calc(17 * var(--px));
  line-height: 1.45;
}

.video-bento__suburb {
  color: var(--color-text-light-secondary);
}

@media (hover: hover) {

  .video-bento__card:hover::after,
  .video-bento__card:focus-visible::after {
    opacity: 1;
  }

  .video-bento__card:hover .video-bento__client,
  .video-bento__card:focus-visible .video-bento__client {
    opacity: 1;
    translate: 0 0;
  }
}

.video-bento__body {
  grid-column: 9 / span 4;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: calc(35 * var(--px));
  padding: 0 var(--space-06) var(--space-06);
}

.video-bento__text {
  color: var(--color-text-light-secondary);
}

.video-bento__text p {
  margin: 0;
}

.video-bento__text p+p {
  margin-top: calc(24 * var(--px));
}

.video-bento__text strong {
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .video-bento {
    --video-bento-inset: calc(12 * var(--px));
    /* Figma card-testimonialVideo-large/mobile: 340 x 189 */
    --video-bento-card: calc(340 * var(--px));

    display: flex;
    flex-direction: column;
    gap: var(--space-06b);
  }

  /* Swipe row that starts on the page margin and bleeds off the right edge */
  .video-bento__videos {
    display: flex;
    gap: calc(12 * var(--px));
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);
    scroll-padding-inline: var(--container-padding);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .video-bento__videos::-webkit-scrollbar {
    display: none;
  }

  .video-bento__card,
  .video-bento__card:nth-child(1),
  .video-bento__card:nth-child(2),
  .video-bento__card:nth-child(n + 3) {
    display: block;
    flex: 0 0 var(--video-bento-card);
    height: auto;
    aspect-ratio: 340 / 189;
    margin: 0;
    scroll-snap-align: start;
  }

  .video-bento__card::after {
    opacity: 1;
  }

  .video-bento__client {
    opacity: 1;
    translate: 0 0;
    gap: calc(8 * var(--px));
  }

  .video-bento__name {
    font-size: calc(15 * var(--px));
  }

  /* Figma mobile drops the title to display-m */
  .section_video-bento .block-intro__title {
    font-size: var(--display-m-size);
    line-height: var(--display-m-lh);
    letter-spacing: var(--display-m-ls);
    font-weight: var(--display-m-weight);
  }

  /* Same width as the card above it, same inset as its client details */
  .video-bento__body {
    align-self: flex-start;
    width: var(--video-bento-card);
    max-width: 100%;
    gap: var(--space-06b);
    padding: 0 var(--video-bento-inset);
  }

  .video-bento__body .btn {
    width: 100%;
  }

  .video-bento__text p+p {
    margin-top: calc(20 * var(--px));
  }
}


/* --- css/sections/icon-cards.css --- */
/* sections/icon-cards.css — blocks/icon_cards (Figma block-bento-02, node
   1158:39440; mobile 1154:42746, "card rows are retained with overflow").
   Intro 3 of 12 columns, cards 9 of 12, three to a row. The tile itself is
   .card.is-icon in components/card.css; this file only lays the grid out. */

.icon-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.icon-cards__intro { grid-column: 1 / span 3; }
.icon-cards__intro .block-intro { margin-bottom: 0; }
.icon-cards__intro .block-intro__main { padding-right: 0; }

.icon-cards__scroller { grid-column: 4 / span 9; }

.icon-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .icon-cards {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--px));
  }

  .icon-cards__scroller {
    width: calc(100% + 2 * var(--container-padding));
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .icon-cards__scroller::-webkit-scrollbar { display: none; }

  .icon-cards__grid {
    grid-template-columns: repeat(3, calc(280 * var(--px)));
    gap: calc(12 * var(--px));
    width: max-content;
  }

}


/* --- css/sections/card-carousel.css --- */
/* sections/card-carousel.css — blocks/card_carousel (Figma block-house&land,
   node 1158:39540; mobile 1154:42870). Two cards per view on the DC slider,
   arrows + explore link in the intro actions; on mobile the arrows go, cards
   swipe, and the explore link becomes a full-width button.
 */

.card-carousel__wrap {
  overflow: hidden;
  margin-inline: calc(-0.5 * var(--grid-gutter));
}

.card-carousel__list {
  display: flex;
  cursor: grab;
}

.card-carousel__list:active { cursor: grabbing; }

.card-carousel__arrows {
  display: flex;
  gap: calc(8 * var(--px));
}

.card-carousel__mobile-cta { display: none; }

/* The package card itself is .card.is-package (components/card.css); the
   carousel only sizes it. */
.card.is-package {
  flex: none;
  width: calc(50% - var(--grid-gutter));
  margin-inline: calc(0.5 * var(--grid-gutter));
}

@media screen and (max-width: 767px) {
  .section_card-carousel .block-intro__actions { display: none; }

  .card-carousel__wrap { margin-right: calc(-1 * var(--container-padding)); }

  .card.is-package { width: 82%; }

  .card-carousel__mobile-cta {
    display: block;
    margin-top: calc(24 * var(--px));
  }

  .card-carousel__mobile-cta .btn { width: 100%; }
}

/* sections/slider.css recedes non-active .dc-slider slides to opacity 0.35,
   which is the vault's single-focus behaviour. This carousel shows two cards
   side by side and the frame (1158:39540) has BOTH at full strength, so the
   recede is off here. Both class names are on the section, which also wins
   over the 0.35 rule regardless of file order. */
.dc-slider.section_card-carousel [data-slider="slide"] { opacity: 1; }

/* The intro body reads at body-l in this section's design, not the default body-m */
.section_card-carousel .block-intro__text {
  font-size: var(--body-l-size);
  line-height: var(--body-l-lh);
  letter-spacing: var(--body-l-ls);
}


/* --- css/sections/reviews.css --- */
/* sections/reviews.css — blocks/google_reviews_carousel (Figma
   block-ReviewCarousel 1158:39547; mobile 1154:42896). A dark review card over
   8 of 12 columns, intro + arrows in the remaining column. Items stack in one
   grid cell and js/components/testimonials.js (Osmo Line Reveal Testimonials)
   swaps them. On mobile the intro comes first, the story button moves to the
   top right of the card and the arrows sit inside the card. */

.reviews {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: stretch;
}

/* Figma card-testimonial/desktop: a FIXED 466 box, which is exactly
   64 padding x2 + 48 gap x2 + 20 stars + 182 quote + 40 button. Fixed because
   every slide shares one grid cell, so without it the cell takes the tallest
   review and the card grows to fit the longest one. */
.reviews__card {
  grid-column: 1 / span 8;
  position: relative;
  height: calc(466 * var(--px));
  padding: calc(64 * var(--px)) var(--padding-content);
  border-radius: var(--radius-m);
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
}

.reviews__list {
  display: grid;
  height: 100%;
}

.reviews__item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-08);
  opacity: 0;
  visibility: hidden;
}

.reviews__item.is--active {
  opacity: 1;
  visibility: visible;
}

.reviews__stars {
  display: flex;
  gap: calc(4 * var(--px));
  color: var(--color-accent);
}

.reviews__stars svg {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
}

/* The design's quote box. render.php bounds the text to about five lines, so
   this is a backstop rather than the usual clip: padding-right is Figma's
   space-07 on reviewContainer. */
.reviews__quote {
  height: calc(182 * var(--px));
  margin: 0;
  padding-right: var(--space-07);
  overflow: hidden;
  color: var(--color-accent);
}

.reviews__quote .text-line {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.reviews__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(24 * var(--px));
  margin-top: auto;
}

.reviews__cite {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  font-size: calc(15 * var(--px));
  line-height: 1.45;
}

.reviews__author { font-weight: 700; }
.reviews__source { color: var(--color-text-light-secondary); }

.reviews__card-arrows { display: none; }

.reviews__side {
  grid-column: 10 / span 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(48 * var(--px));
  padding-block: calc(24 * var(--px));
}

.reviews__side .block-intro {
  margin-bottom: 0;
  grid-template-columns: minmax(0, 1fr);
}

.reviews__side .block-intro__main,
.reviews__side .block-intro__body { padding-right: 0; }

.reviews__side .block-intro__body { gap: calc(16 * var(--px)); }

.reviews__arrows {
  display: flex;
  gap: calc(8 * var(--px));
}

@media screen and (max-width: 767px) {
  .reviews {
    display: flex;
    flex-direction: column-reverse;
    gap: calc(24 * var(--px));
  }

  .reviews__side { padding: 0; }
  .reviews__side > .reviews__arrows { display: none; }

  /* Height back to the content: the bounded quote sets it, and the mobile
     frame (1154:42896) has not been measured yet. */
  .reviews__card {
    height: auto;
    padding: var(--padding-content);
  }

  .reviews__quote {
    height: auto;
    padding-right: 0;
  }

  .reviews__item { gap: calc(16 * var(--px)); }

  .reviews__story {
    position: absolute;
    top: 0;
    right: 0;
  }

  .reviews__footer { padding-right: calc(96 * var(--px)); }

  .reviews__card-arrows {
    display: block;
    position: absolute;
    right: calc(16 * var(--px));
    bottom: calc(16 * var(--px));
  }

  .reviews__card-arrows .btn-arrow { --arrow-bg: color-mix(in srgb, var(--brand-silver) 15%, transparent); }
}


/* --- css/components/review-proof.css --- */
/* components/review-proof.css — template-parts/review-proof.php: the Google
   markers on every review card (G badge, source, date, View on Google). Colour
   comes from the card it sits in. */

.review-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(8 * var(--px));
  row-gap: calc(4 * var(--px));
  font-size: calc(15 * var(--px));
  line-height: 1.45;
}

.review-proof__badge {
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
}

.review-proof__date::before,
.review-proof__link::before {
  content: "·";
  margin-right: calc(8 * var(--px));
  opacity: 0.6;
}

.review-proof__source,
.review-proof__date { opacity: 0.72; }

.review-proof__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.review-proof__link:hover { text-decoration: none; }

/* A verified review embedded on a client story page. */
.review-embed {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--px));
  margin-block: calc(48 * var(--px));
  padding: calc(32 * var(--px));
  border-radius: var(--radius-m);
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
}

.review-embed__label {
  margin: 0;
  font-size: calc(13 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light-secondary);
}

.review-embed__stars {
  display: flex;
  gap: calc(4 * var(--px));
  color: var(--color-accent);
}

.review-embed__stars svg {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
}

.review-embed__quote {
  margin: 0;
  color: var(--color-accent);
}

.review-embed__author { font-weight: 700; }


/* --- css/sections/wayfinding.css --- */
/* sections/wayfinding.css — blocks/wayfinding ("Where to next?", Figma
   homepage 1158:76999; mobile 1154:42898). Heading right-aligned, two equal
   cards (image card + accent pill card), full-width search strip below, and
   the brand arch line tucked behind the left edge. */

.section_wayfinding { position: relative; overflow: clip; }

.section_wayfinding::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-290 * var(--px));
  width: calc(574 * var(--px));
  height: calc(960 * var(--px));
  border: calc(1.5 * var(--px)) solid var(--color-accent);
  border-radius: 999em 999em 0 0;
  pointer-events: none;
}

.wayfinding {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--px));
}

.wayfinding__heading {
  margin: 0 0 calc(32 * var(--px));
  text-align: right;
}

.wayfinding__heading em { font-style: italic; }

.wayfinding__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 * var(--px));
}

.wayfinding__feature,
.wayfinding__explore {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(488 * var(--px));
  padding: calc(32 * var(--px));
  overflow: hidden;
  border-radius: var(--radius-m);
}

.wayfinding__feature {
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
  text-decoration: none;
}

.wayfinding__feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--animation-default);
}

.wayfinding__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.4), transparent 50%);
  pointer-events: none;
}

.wayfinding__feature:hover .wayfinding__feature-img { scale: 1.03; }

.wayfinding__card-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 * var(--px));
  max-width: calc(480 * var(--px));
}

.wayfinding__feature .badge { --badge-ink: var(--color-text-light); }

.wayfinding__card-title { margin: 0; }

.wayfinding__arrow {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(48 * var(--px));
  height: calc(48 * var(--px));
  border-radius: var(--radius-full);
  background-color: var(--brand-silver);
  color: var(--brand-charcoal);
  transition: background-color var(--animation-default-half);
}

.wayfinding__arrow svg { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }

.wayfinding__feature:hover .wayfinding__arrow { background-color: var(--color-accent); }

.wayfinding__explore {
  background-color: var(--color-accent);
  color: var(--color-text-dark);
}

.wayfinding__pills {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wayfinding__pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(40 * var(--px));
  padding: 0 calc(16 * var(--px));
  border-radius: var(--radius-full);
  background-color: var(--brand-white);
  color: var(--color-text-dark);
  font-size: calc(15 * var(--px));
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--animation-default-half);
}

.wayfinding__pill:hover { background-color: var(--brand-silver); }

.wayfinding__pill img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

.wayfinding__search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--px));
  min-height: calc(150 * var(--px));
  padding: calc(24 * var(--px));
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-accent) 55%, var(--brand-white));
}

.wayfinding__search-text { margin: 0; }

@media screen and (max-width: 767px) {
  .section_wayfinding::before { display: none; }

  .wayfinding__heading { text-align: left; margin-bottom: calc(8 * var(--px)); }

  .wayfinding__cards { grid-template-columns: 1fr; }

  .wayfinding__feature,
  .wayfinding__explore {
    min-height: calc(320 * var(--px));
    padding: calc(20 * var(--px));
  }

  .wayfinding__search {
    flex-direction: column;
    align-items: stretch;
    gap: calc(16 * var(--px));
    text-align: center;
  }
}


/* --- css/components/bg-fade.css --- */
/* components/bg-fade.css — the website background colour change (Figma
   1158:77911). js/components/bg-fade.js makes the sections transparent and
   sets <body>'s colour + every section's theme from the section crossing the
   switch line; this animates it. main > raises specificity over a block's own
   background rule. Text that inherits its colour rides the color transition. */

body[data-bg-fade-page] {
  transition: background-color var(--duration-default-onehalf) var(--cubic-default);
}

main > [data-bg-fade-state] {
  background-color: transparent;
  transition: color var(--duration-default-onehalf) var(--cubic-default);
}

@media (prefers-reduced-motion: reduce) {
  body[data-bg-fade-page],
  main > [data-bg-fade-state] { transition: none; }
}


/* --- css/sections/dome-grid.css --- */
/* sections/dome-grid.css — vault resource 'Infinite Dome Grid' (Jesper
   Landberg, open sourced to the Osmo community), DC recode.
   Markup: blocks/dome_grid/render.php — the section IS the stage, so it takes
   no container and no section padding; the grid tiles from its top-left corner
   and the page does not scroll while the grid is on screen.

   Everything visible is one matrix3d per card, written each frame by
   js/components/dome-grid.js. This file only supplies shape, colour and the
   two properties the script reads back: the shade's opacity (how dark the
   grid goes outside the flashlight) and --panel-gap.

   --panel-gap MUST equal minus twice the card's border-radius, so the sliding
   panel's corners stay hidden behind the image when a card opens. Change one,
   change the other. */

.dome-grid {
  --panel-gap: -2em;
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background-color: var(--n-900);
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.dome-grid[data-dragging] { cursor: grabbing; }

.dome-grid__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2em;
  width: 100%;
}

.dome-grid__item {
  --slide: 0;
  --dim: 0;
  position: relative;
  aspect-ratio: 1;
  transform-origin: 0 0;
  will-change: transform;
}

.dome-grid__item[data-lifted] { z-index: 10; }
.dome-grid__item[data-active] .dome-grid__caption { opacity: 0; }
.dome-grid__item .dome-grid__content { display: none; }

.dome-grid__panel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--n-0);
  border-radius: var(--radius-m);
  transform: translateX(calc((100% + var(--panel-gap)) * var(--slide)));
}

.dome-grid__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--n-900);
  border-radius: var(--radius-m);
}

.dome-grid__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.1);
}

.dome-grid__caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  gap: 0.5em;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.25em;
  color: var(--n-0);
  pointer-events: none;
  background-image: linear-gradient(rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.6));
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: opacity 0.35s ease-out;
}

.dome-grid__text { margin: 0; font-size: var(--text-s); line-height: 1.2; }
.dome-grid__text.is--faded { opacity: 0.6; }

.dome-grid__meta { margin: 0; font-size: var(--text-xs); line-height: 1.2; opacity: 0.6; }

.dome-grid__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--dim);
  background-color: #000;
  transform: translateZ(0);
  transform-style: preserve-3d;
}

.dome-grid__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-m);
  min-height: 100%;
  padding: 2.5em;
}

.dome-grid__title { margin: 0; font-size: var(--text-l); line-height: 1; }

/* The flashlight. Its OPACITY is read back by the script as "how dark", and
   its mask is rewritten on every resize — the value here is only the
   first-paint fallback. */
.dome-grid__shade {
  --fx: 50%;
  --fy: 50%;
  position: absolute;
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  background-color: #000;
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 25%, #000 75%);
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 25%, #000 75%);
}

.dome-grid__cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background-color: #000;
  transition: opacity 0.3s ease-out;
}

.dome-grid[data-loaded] .dome-grid__cover { opacity: 0; pointer-events: none; }

.dome-grid__lightbox {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--lightbox-gap, 0px) / 2);
  z-index: 10;
  display: block;
  width: var(--lightbox-size, 70vh);
  height: var(--lightbox-size, 70vh);
  opacity: 0;
  pointer-events: none;
  color: var(--n-900);
  transform: translateY(-50%);
  transition: opacity 0.2s ease-out;
}

.dome-grid__lightbox[data-open] { opacity: 1; transition: opacity 0.35s ease-out 0.15s; }

.dome-grid__lightbox-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(0px - var(--lightbox-gap, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: none;
}

.dome-grid__lightbox[data-open] .dome-grid__lightbox-inner { pointer-events: auto; }

@media (orientation: portrait) {
  .dome-grid__panel { transform: translateY(calc((100% + var(--panel-gap)) * var(--slide))); }
  .dome-grid__lightbox {
    top: calc(50% + var(--lightbox-gap, 0px) / 2);
    left: 50%;
    width: var(--lightbox-size, 80vw);
    height: var(--lightbox-size, 80vw);
    transform: translateX(-50%);
  }
  .dome-grid__lightbox-inner { left: 0; top: calc(0px - var(--lightbox-gap, 0px)); }
  .dome-grid__content { padding: 2em; }
}

@media (max-width: 767px) {
  .dome-grid__item .dome-grid__text.is--faded { display: none; }
}


/* --- css/sections/ui-kit.css --- */
/* sections/ui-kit.css — layout only for blocks/ui_kit/render.php, the host
   that gives the Toggle Switch and Display Read Time utilities somewhere to
   sit on a builder page. The toggle's own styling is
   css/components/toggle-switch.css; nothing here should style it. */

.section_ui-kit .container { display: flex; flex-direction: column; gap: var(--gap-l); align-items: flex-start; }

.ui-kit__read-time {
  margin: 0;
  font-size: var(--text-s);
  color: var(--color-ink-soft);
}

.ui-kit__article { margin: 0; }
.ui-kit__article > p:last-child { margin-bottom: 0; }


/* --- css/sections/faq.css --- */
/* sections/faq.css — blocks/faq_section (Figma homepage "You ask, we answer."
   1158:77080, card-faq 1137:37028 / open 1137:37040; mobile block-faq/mobile
   1154:42897). Intro 447 wide on the left, the Osmo accordion
   (components/accordion.css) capped at 905 on the right. This file gives the
   accordion the design's skin inside this block only: 5% charcoal rows, the
   open row lifts to a white card with the cardHover shadow, the plus becomes
   an accent x. Spacing tokens follow the Figma variables (desktop / mobile). */

.faq {
  --faq-pad-y: var(--space-07);          /* 35 / 20 */
  --faq-pad-x: var(--space-07);          /* 35 / 16 (mobile below) */
  --faq-icon-gap: var(--space-08);       /* 48 / 16 (mobile below) */
  --faq-qa-gap: var(--space-08);         /* question to answer: 48 / 24 */
  --faq-icon: calc(40 * var(--px));

  display: grid;
  grid-template-columns: minmax(0, calc(447 * var(--px))) minmax(0, 1fr);
  column-gap: var(--grid-gutter);
  align-items: start;
}

/* "You ask," sits on its own line above "we answer." */
.faq__intro .block-intro__title em { display: block; }

.faq__intro .block-intro {
  margin-bottom: 0;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-07);
}

.faq__intro .block-intro__main,
.faq__intro .block-intro__body {
  gap: var(--space-07);
  padding-right: 0;
}

/* .faq prefix: components/accordion.css loads after sections and sets its own
   29em max-width */
.faq .faq__accordion {
  justify-self: end;
  width: 100%;
  max-width: calc(905 * var(--px));
}

.faq__accordion .accordion-css__list {
  gap: calc(20 * var(--px));
}

.faq__accordion .accordion-css__item {
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
  backdrop-filter: blur(calc(10 * var(--px)));
  -webkit-backdrop-filter: blur(calc(10 * var(--px)));
  transition:
    background-color var(--animation-default-half),
    box-shadow var(--animation-default-half);
}

/* Figma cardHover-shadow-v2 */
.faq__accordion .accordion-css__item[data-accordion-status="active"] {
  background-color: var(--brand-white);
  box-shadow:
    0 calc(-1 * var(--px)) calc(2 * var(--px)) rgb(0 0 0 / 0.05),
    0 calc(3 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.08),
    0 calc(7 * var(--px)) calc(12 * var(--px)) rgb(50 50 50 / 0.08);
}

.faq__accordion .accordion-css__item-top {
  align-items: flex-start;
  gap: var(--faq-icon-gap);
  width: 100%;
  padding: var(--faq-pad-y) var(--faq-pad-x);
  border: 0;
  background: none;
  color: var(--color-text-dark);
  text-align: left;
}

/* Trimmed to cap height and baseline, as Figma measures it. No hover underline
   (Chris 2026-09-16): the icon turning accent is the hover cue. */
.faq__accordion .accordion-css__item-h3 {
  font-size: var(--faq-q-size);
  line-height: var(--faq-q-lh);
  letter-spacing: var(--faq-q-ls);
  font-weight: var(--faq-q-weight);
  text-box: trim-both cap alphabetic;
  text-decoration: none;
}

/* Circle centred on the first line's cap height */
.faq__accordion .accordion-css__item-icon {
  width: var(--faq-icon);
  height: var(--faq-icon);
  margin-block: calc((var(--faq-q-size) * 0.72 - var(--faq-icon)) / 2);
  transform: none;
  background-color: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  color: var(--color-text-dark);
  transition:
    transform var(--animation-default-half),
    background-color var(--animation-default-half);
}

.faq__accordion .accordion-css__item-icon-svg {
  width: 60%;
}

.faq__accordion .accordion-css__item-top:hover .accordion-css__item-icon,
.faq__accordion [data-accordion-status="active"] .accordion-css__item-icon {
  background-color: var(--color-accent);
}

.faq__accordion [data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(45deg);
}

/* Answer lines up under the question, clear of the icon column */
.faq__accordion .accordion-css__item-bottom-content {
  padding:
    calc(var(--faq-qa-gap) - var(--faq-pad-y))
    calc(var(--faq-pad-x) + var(--faq-icon) + var(--faq-icon-gap))
    var(--faq-pad-y)
    var(--faq-pad-x);
}

.faq__accordion .accordion-css__item-p {
  font-size: var(--faq-a-size);
  line-height: var(--faq-a-lh);
  color: var(--color-text-dark-secondary);
}

.faq__accordion .accordion-css__item-p > :first-child { margin-top: 0; }
.faq__accordion .accordion-css__item-p > :last-child { margin-bottom: 0; }

.faq__accordion .accordion-css__item-more {
  margin-top: calc(35 * var(--px));
}

@media screen and (max-width: 767px) {
  .faq {
    --faq-pad-x: var(--space-06);
    --faq-icon-gap: var(--space-06);
    --faq-qa-gap: var(--space-06b);
    --faq-icon: calc(30.6 * var(--px));

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-07b);
  }

  /* The See all FAQs button follows the questions on mobile */
  .faq__intro { display: contents; }
  .faq__intro .block-intro { display: contents; }
  .faq__intro .block-intro__main { order: 1; }
  .faq__intro .block-intro__body { display: contents; }
  .faq__intro .block-intro__text { order: 2; margin-top: calc(var(--space-07) - var(--space-07b)); }
  .faq .faq__accordion { order: 3; max-width: none; }
  .faq__intro .btn-group { order: 4; }
  .faq__intro .btn-group .btn { width: 100%; }

  .faq__accordion .accordion-css__list {
    gap: var(--space-05);
  }

  .faq__accordion .accordion-css__item-bottom-content {
    padding-right: var(--faq-pad-x);
  }

  .faq__accordion .accordion-css__item-more {
    margin-top: calc(24 * var(--px));
  }
}


/* --- css/sections/news-grid.css --- */
/* sections/news-grid.css — posts grid on .dc-grid with basic filter +
   List.js live search. Markup: blocks/posts_grid/render.php
     section_news-grid > .container > .news-grid[data-live-search][data-filter-group]
       > .news-grid__controls (filter buttons + search field)
       > .dc-grid.live-search__list > .dc-grid__item.card[data-filter-name]
       > .news-grid__not-found */

.news-grid__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-bottom: var(--space-m);
}

.news-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.news-grid__filter-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  background-color: var(--color-surface-2);
  color: var(--color-ink);
  border-radius: var(--radius-full);
  padding: 0.65em 1.25em;
  transition: color var(--duration-default) var(--cubic-default),
              background-color var(--duration-default) var(--cubic-default);
}

.news-grid__filter-btn[data-filter-status="active"] {
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.news-grid__search {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-full);
  height: 3em;
  min-width: 16em;
}

.news-grid__search-icon {
  position: absolute;
  left: 1em;
  width: 1.1em;
  color: var(--color-ink-soft);
  pointer-events: none;
}

.news-grid__search-input {
  appearance: none;
  border: 0;
  background: none;
  width: 100%;
  height: 100%;
  padding: 0 1.25em 0 2.75em;
  color: var(--color-ink);
  font: inherit;
}

.news-grid__search-input:focus { outline: none; }

/* Cards are .card (components/card.css). */

.news-grid__not-found {
  padding: var(--space-m) 0;
  text-align: center;
  color: var(--color-ink-soft);
}

/* ---------------------------------------------------------------- */
/* In-grid CTAs — grid items injected after the Nth card (render.php
   grid_ctas). No data-filter-name, so filters leave them in place; the
   card takes one cell, the strip spans the full row. */

.news-grid__cta {
  background-color: var(--color-primary);
  color: var(--n-0);
  border-radius: var(--radius-m);
  padding: var(--gap-m);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--gap-m);
  min-height: 16em;
}

.news-grid__cta.is--strip {
  width: 100%;
  flex-flow: row;
  align-items: center;
  min-height: 0;
  padding: var(--gap-m) var(--gap-l);
}

.news-grid__cta-label {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.75em;
}

.news-grid__cta-title {
  color: inherit;
  font-size: 1.5em;
  margin: 0;
}

.news-grid__cta.is--strip .news-grid__cta-title { font-size: 1.375em; }

.news-grid__cta-text {
  margin: 0.75em 0 0;
  font-size: 0.875em;
  opacity: 0.8;
}

.news-grid__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  font-weight: 500;
  color: inherit;
  flex: none;
}

.news-grid__cta-arrow { width: 1.25em; flex: none; }

/* Sidebar filter layout (filter_layout = sidebar, data-filter-mode="multi") */

.news-grid.is--sidebar .news-grid__layout {
  display: flex;
  gap: var(--gap-l);
  align-items: flex-start;
}

.news-grid__sidebar {
  flex: none;
  width: 15em;
  position: sticky;
  top: calc(var(--nav-height, 4em) + 2.5em);
  display: flex;
  flex-flow: column;
  gap: var(--gap-m);
}

.news-grid__main { flex: 1; min-width: 0; }

.news-grid__sidebar-group {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  padding: var(--gap-s);
  display: flex;
  flex-flow: column;
  gap: 0.25em;
}

.news-grid__sidebar-label {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0.5em;
}

.news-grid__sidebar-check {
  display: flex;
  align-items: center;
  gap: 0.625em;
  background: none;
  border: none;
  padding: 0.375em 0.25em;
  font-size: 0.9375em;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
}

.news-grid__sidebar-box {
  width: 1em;
  height: 1em;
  flex: none;
  border: 1px solid var(--color-ink-soft);
  border-radius: 3px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.news-grid__sidebar-check[data-filter-status="active"] .news-grid__sidebar-box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.news-grid__sidebar-reset {
  background: none;
  border: none;
  padding: 0.25em;
  font-size: 0.8125em;
  color: var(--color-ink-soft);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

@media (max-width: 991px) {
  .news-grid.is--sidebar .news-grid__layout { flex-flow: column; }

  .news-grid__sidebar { position: static; width: 100%; }
}


/* --- css/sections/resource-grid.css --- */
/* sections/resource-grid.css — the Resources browse page, wireframe skin.
   Markup: blocks/resource_grid/render.php
     section_resource-grid > .container > form.resource-grid[data-resource-filters]
       > .resource-grid__topbar (back link + show-me / format / sort selects)
       > .resource-grid__layout
         > .resource-grid__sidebar > .resource-grid__group[data-filter-panel]
         > .resource-grid__main > .dc-grid.resource-grid__list
           > .card (see components/card.css)
           > .resource-grid__cta / .resource-grid__chips (injected)
   Design pass restyles; keep structure and class names. */

.resource-grid__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  margin-bottom: var(--space-m);
}

.resource-grid__back {
  margin-right: auto;
  color: var(--color-ink);
  text-decoration: none;
}

.resource-grid__control {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.resource-grid__control-label {
  color: var(--color-ink-soft);
  font-size: 0.85em;
}

.resource-grid__select {
  appearance: none;
  border: 1px solid var(--color-line);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-s);
  padding: 0.5em 2em 0.5em 0.9em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.7em;
}

.resource-grid__layout {
  display: grid;
  grid-template-columns: minmax(12em, 16em) 1fr;
  gap: var(--space-m);
  align-items: start;
}

/* ---- sidebar ---- */

.resource-grid__sidebar {
  position: sticky;
  top: var(--space-m);
  display: grid;
  gap: var(--gap-s);
}

.resource-grid__group {
  border: 1px solid var(--color-line);
  border-radius: 0.6em;
  background-color: var(--color-surface);
  overflow: hidden;
}

.resource-grid__group-head {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.85em 1em;
  font-weight: 600;
  color: var(--color-ink);
}

.resource-grid__group-head::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform var(--duration-default) var(--cubic-default);
}

.resource-grid__group.is--collapsed .resource-grid__group-head::after {
  transform: rotate(45deg);
}

.resource-grid__group-count[hidden] {
  display: none;
}

.resource-grid__group-count {
  margin-left: auto;
  min-width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-surface);
  font-size: 0.75em;
}

.resource-grid__group-body {
  display: grid;
  gap: 0.35em;
  padding: 0 1em 0.85em;
}

.resource-grid__check {
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  color: var(--color-ink);
}

.resource-grid__check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.resource-grid__check-box {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 1.5px solid var(--color-line);
  border-radius: 0.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-default-half) var(--cubic-default);
}

.resource-grid__check input:checked + .resource-grid__check-box {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
}

.resource-grid__check input:checked + .resource-grid__check-box::after {
  content: "";
  width: 0.3em;
  height: 0.55em;
  border-right: 2px solid var(--color-surface);
  border-bottom: 2px solid var(--color-surface);
  transform: rotate(45deg) translateY(-10%);
}

.resource-grid__check input:focus-visible + .resource-grid__check-box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.resource-grid__sidebar-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-s);
  font-size: 0.85em;
}

.resource-grid__reset,
.resource-grid__collapse {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-ink-soft);
  text-decoration: underline;
}

.resource-grid__apply {
  appearance: none;
  border: 0;
  cursor: pointer;
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-s);
  padding: 0.7em 1em;
}

/* ---- grid ---- */

/* .dc-grid is flex-based with a --columns var (base/grid.css), so wide and
   strip items size by width, not grid-column spans. */
/* Two wide cards share the first row (wireframe: featured pair). */
.card.is--wide {
  width: calc((100% - var(--column-gap, var(--gap-m))) / 2);
}

.resource-grid__cta.is--strip,
.resource-grid__chips.is--strip {
  width: 100%;
}

.resource-grid__cta {
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-radius: 0.75em;
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-s);
}

.resource-grid__cta.is--strip {
  flex-direction: row;
  align-items: center;
}

.resource-grid__cta-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.resource-grid__cta-title { margin: 0; }
.resource-grid__cta-text  { margin: 0; opacity: 0.85; }

.resource-grid__cta-link {
  color: inherit;
  align-self: flex-start;
  white-space: nowrap;
}

.resource-grid__chips {
  background-color: var(--color-surface-2);
  border-radius: 0.75em;
  padding: var(--space-s);
  display: grid;
  gap: 0.75em;
  justify-items: center;
  text-align: center;
}

.resource-grid__chips-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
}

.resource-grid__chips-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
}

.resource-grid__chip {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  padding: 0.45em 1em;
  color: var(--color-ink);
  text-decoration: none;
  background-color: var(--color-surface);
}

.resource-grid__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-m);
}

.resource-grid__more-link {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  padding: 0.7em 1.6em;
  color: var(--color-ink);
  text-decoration: none;
  background-color: var(--color-surface);
}

.resource-grid__empty {
  padding: var(--space-l) 0;
  text-align: center;
  color: var(--color-ink-soft);
}

/* ---- responsive ---- */

@media (max-width: 900px) {
  .resource-grid__layout {
    grid-template-columns: 1fr;
  }
  .resource-grid__sidebar {
    position: static;
  }
  .card.is--wide {
    width: 100%;
  }
}


/* --- css/sections/resource-hub.css --- */
/* sections/resource-hub.css — the Resources hub landing sections, wireframe
   skin. Blocks: resource_hero, resource_featured, interest_carousel,
   resource_tabs, faq_teaser, discover_links. Cards themselves live in
   components/card.css. Design pass restyles; keep class names. */

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

.resource-hero {
  display: grid;
  gap: var(--gap-s);
  justify-items: center;
  text-align: center;
}

.resource-hero__title {
  margin: 0;
  max-width: 14em;
}

.resource-hero__text {
  margin: 0;
  max-width: 36em;
  color: var(--color-ink-soft);
}

.resource-hero__search {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: min(32em, 100%);
  margin-top: var(--gap-s);
  padding: 0.4em 0.4em 0.4em 1em;
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
}

.resource-hero__search-icon {
  width: 1.1em;
  flex: 0 0 auto;
  color: var(--color-ink-soft);
}

.resource-hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
}

.resource-hero__search-input:focus { outline: none; }

.resource-hero__search-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 0.6em 1.4em;
}

.resource-hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--gap-s);
}

.resource-hero__pills-label {
  font-size: 0.85em;
  color: var(--color-ink-soft);
}

.resource-hero__pill {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  padding: 0.4em 1em;
  color: var(--color-ink);
  text-decoration: none;
  background-color: var(--color-surface);
  font-size: 0.85em;
}

/* ---- featured ---- */

.resource-featured__heading { margin: 0 0 var(--space-s); }

/* ---- interest carousel ---- */

.interest-carousel__heading { margin: 0 0 var(--space-s); }

.interest-carousel { overflow: hidden; }

.interest-carousel__list {
  display: flex;
  gap: var(--gap-m);
  padding-left: var(--container-padding);
}

/* Cards are .card.is-tile (components/card.css). */

.interest-carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: calc(8 * var(--px));
  margin-top: var(--gap-s);
}

/* ---- type tabs ---- */

.resource-tabs__heading { margin: 0 0 var(--space-s); }

.resource-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: var(--space-s);
}

.resource-tabs__tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-full);
  padding: 0.65em 1.5em;
  transition: color var(--duration-default) var(--cubic-default),
              background-color var(--duration-default) var(--cubic-default);
}

.resource-tabs__tab[data-filter-status="active"] {
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.resource-tabs__cell .card { height: 100%; }

/* The Osmo basic filter flips data-filter-status; these styles do the actual
   show/hide (the vault CSS binds them to its demo class, not generically).
   not-active leaves the flow via position:absolute so the visible tab's
   cards reflow into a clean row. */
.resource-tabs__cell[data-filter-status="active"] {
  transition: opacity var(--duration-default) var(--cubic-default),
              transform var(--duration-default) var(--cubic-default);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}

.resource-tabs__cell[data-filter-status="transition-out"] {
  transition: opacity var(--duration-default-half) var(--cubic-default),
              transform var(--duration-default-half) var(--cubic-default);
  transform: scale(0.94) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}

.resource-tabs__cell[data-filter-status="not-active"] {
  transform: scale(0.94) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.resource-tabs__links {
  display: flex;
  justify-content: center;
  margin-top: var(--space-s);
}

.resource-tabs__all {
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  padding: 0.6em 1.4em;
  text-decoration: none;
  background-color: var(--color-surface);
}

.resource-tabs__all[data-filter-status="not-active"] { display: none; }

/* ---- faq teaser ---- */

.faq-teaser__heading { margin: 0; }

.faq-teaser__text {
  margin: 0.5em 0 var(--space-s);
  color: var(--color-ink-soft);
}

.faq-teaser__all {
  display: flex;
  justify-content: center;
  margin-top: var(--space-s);
}

/* ---- discover links ---- */

.discover-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-m);
  align-items: stretch;
}

.discover-links__cloud {
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 0.75em;
  padding: var(--space-s);
}

.discover-links__heading { margin: 0 0 0.75em; }

.discover-links__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.discover-links__pill {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  padding: 0.4em 1em;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.85em;
}

.discover-links__panel {
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-radius: 0.75em;
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-s);
  text-decoration: none;
}

.discover-links__panel-title { font-size: 1.4em; }

.discover-links__panel-arrow {
  align-self: flex-end;
  font-size: 1.4em;
}

/* ---- responsive ---- */

@media (max-width: 720px) {
  .discover-links {
    grid-template-columns: 1fr;
  }
}


/* --- css/sections/team-cards.css --- */
/* sections/team-cards.css — team CPT cards on .dc-cols, bio in the shared
   modal. Markup: blocks/team_cards/render.php
     section_team-cards > .container
       > .dc-cols.team-cards__cols > .dc-col.team-card
         > .team-card__open (stretch button when a bio exists)
     + .modal group with a card per member. */

.team-card { position: relative; }

/* Whole card opens the bio modal */
.team-card__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
}

.team-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--color-surface-2);
}

.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-default) var(--cubic-default);
}

.team-card:hover .team-card__image { transform: scale(1.04); }

.team-card__name {
  margin: 0.75em 0 0;
  font-size: var(--text-m);
}

.team-card__position {
  margin: 0.25em 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-s);
}

/* Modal head: portrait beside name/position */
.team-card__modal-head {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.team-card__modal-head .modal__h2 { margin: 0; }

.team-card__modal-image {
  width: 5.5em;
  height: 5.5em;
  object-fit: cover;
  border-radius: 50%;
  flex: none;
}


/* --- css/sections/team-listing.css --- */
/* sections/team-listing.css — the "Your Advocates" listing + member profile
   modal (Figma wireframe 108:20625). Markup: blocks/team_listing/render.php
     section_team-listing > .container
       > .block-intro (label / title / description)
       > .team-listing__grid > .card.is-team (components/card.css)
     + .modal.team-modal-group with a .team-modal card per member:
       __main (two cols: __profile | __contact), __reviews carousel,
       __page prev/next member buttons.
   Wireframe skin: the arch photo mask on hover is the one designed element
   carried now (accent card + arch-top image per the board); everything else
   waits for Mon's design pass. */

.team-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
  margin-top: var(--space-m);
}

/* Cards are .card.is-team (components/card.css). */

/* --- Profile modal ------------------------------------------------------- */

/* Board modal is 1136px wide; the shared card caps at 54em */
.modal__card.team-modal { max-width: 71em; }

.team-modal .modal__content { padding: var(--space-m); }

.team-modal__main {
  display: grid;
  grid-template-columns: 1fr 22em;
  gap: var(--gap-l);
  align-items: start;
}

.team-modal__name { margin: 0; }

.team-modal__role {
  margin: 0.375em 0 0;
  font-weight: 600;
}

.team-modal__personality {
  margin: var(--gap-m) 0 0;
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--color-line);
  font-weight: 600;
}

.team-modal__bio { margin-top: var(--gap-m); }
.team-modal__bio p { margin: 0 0 1em; }
.team-modal__bio p:last-child { margin-bottom: 0; }

.team-modal__contact {
  display: flex;
  flex-flow: column;
  gap: var(--gap-s);
  padding: var(--gap-m);
  border-radius: var(--radius-m);
  background-color: var(--color-surface-2);
}

.team-modal__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.team-modal__contact-label {
  margin: 0.25em 0 0;
  font-weight: 700;
}

.team-modal__contact-rows {
  margin: 0;
  display: flex;
  flex-flow: column;
  gap: 0.5em;
}

.team-modal__contact-row {
  display: flex;
  gap: 0.75em;
  font-size: 0.9375em;
}

.team-modal__contact-row dt { font-weight: 700; }
.team-modal__contact-row dd { margin: 0; }

.team-modal__book { flex: none; }

/* Happy clients carousel: scroll-snap strip, one review per view */
.team-modal__reviews {
  margin-top: var(--gap-l);
  border-radius: var(--radius-m);
  background-color: var(--color-surface-2);
  padding: var(--gap-m);
}

.team-modal__reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
}

.team-modal__reviews-title { margin: 0; }

.team-modal__reviews-nav { display: flex; gap: 0.375em; }

.team-modal__reviews-btn {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.team-modal__reviews-btn:hover { background-color: var(--color-surface-3); }

.team-modal__reviews-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: var(--gap-m);
}

.team-modal__reviews-track::-webkit-scrollbar { display: none; }

.team-modal__review {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding-inline: var(--gap-s);
}

.team-modal__stars {
  display: flex;
  gap: 0.25em;
  justify-content: center;
  color: var(--color-ink);
}

.team-modal__star { width: 1.25em; }

.team-modal__quote {
  margin: var(--gap-s) auto 0;
  max-width: 44em;
  text-align: center;
}

.team-modal__review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
}

.team-modal__review-foot .btn { flex: none; }

.team-modal__review-meta {
  display: flex;
  flex-flow: column;
  font-size: 0.875em;
}

/* HubSpot booking modal: the scheduler needs real height to avoid its own
   inner scrollbar */
.modal__card.team-modal-booking { max-width: 60em; }

.team-modal-booking__content {
  display: flex;
  flex-flow: column;
  gap: var(--gap-s);
  padding: var(--space-m) var(--space-m) var(--gap-m);
}

.team-modal-booking__title {
  margin: 0;
  font-size: var(--text-l);
}

.team-modal-booking__frame {
  width: 100%;
  height: min(43em, 70vh);
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--color-surface-2);
}

.team-modal-booking__fallback {
  margin: 0;
  font-size: 0.8125em;
  color: var(--color-ink-soft);
  text-align: center;
}

.team-modal-booking__fallback a { text-decoration: underline; }

/* Prev/next member paging, pinned to the modal edges */
.team-modal__page {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
  cursor: pointer;
  z-index: 2;
}

.team-modal__page.is--prev { left: -1.375em; }
.team-modal__page.is--next { right: -1.375em; }

@media (max-width: 991px) {
  .team-listing__grid { grid-template-columns: repeat(2, 1fr); }

  .team-modal__main { grid-template-columns: 1fr; }

  .team-modal__page.is--prev { left: var(--gap-xs); }
  .team-modal__page.is--next { right: var(--gap-xs); }
}

@media (max-width: 600px) {
  .team-listing__grid { grid-template-columns: 1fr; }
}


/* --- css/pages/single-post.css --- */
/* pages/single-post.css — the single post editorial layout (single.php):
   centred header (meta pill, display title, standfirst), full-container
   featured image, narrow prose column, share + prev/next footer. */

.single-post__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
  padding-block: var(--space-l) var(--space-m);
}

.single-post__meta {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.single-post__cat {
  background-color: var(--color-surface-2);
  color: var(--color-ink);
  border-radius: var(--radius-full);
  padding: 0.5em 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  transition: background-color var(--duration-default-half) var(--cubic-default);
}

.single-post__cat:hover { background-color: var(--color-surface-3); }

.single-post__title {
  margin: 0;
  max-width: 14em;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.single-post__standfirst {
  margin: 0;
  max-width: 28em;
  color: var(--color-ink-soft);
  font-size: var(--text-l);
  line-height: 1.4;
}

.single-post__media { margin-bottom: var(--space-l); }

.single-post__image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* Prose column */
.single-post__prose > p,
.single-post__prose > ul,
.single-post__prose > ol {
  line-height: 1.7;
  margin-block: 0 1.25em;
}

.single-post__prose > :is(h2, h3, h4) {
  margin-block: 1.75em 0.6em;
  letter-spacing: -0.02em;
}

.single-post__prose > :first-child { margin-top: 0; }

.single-post__prose a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.single-post__prose blockquote {
  margin: 1.75em 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--color-ink);
  font-size: var(--text-l);
  line-height: 1.4;
}

.single-post__prose img { border-radius: var(--radius-m); }

/* Footer: share + nav */
.single-post__footer {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
}

.dc-social-share {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.single-post__share-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.dc-social-share ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5em;
}

.dc-social-share li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background-color: var(--color-surface-2);
  color: var(--color-ink);
  transition: background-color var(--duration-default-half) var(--cubic-default);
}

.dc-social-share li a:hover { background-color: var(--color-surface-3); }


/* --- css/components/audio-player.css --- */
/* components/audio-player.css — podcast player, wireframe skin.
   Markup: template-parts/audio-player.php
     .audio-player[data-audio-player][data-audio-state][data-audio-ready]
       > __art + __body (__meta, __controls, __track, __links)

   State lives on the root as data attributes so the CSS never has to guess:
     data-audio-state = paused | playing | error
     data-audio-ready = "true" once JS has taken over from native controls */

.audio-player {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-s);
  border: 1px solid var(--color-line);
  border-radius: 0.75em;
  background-color: var(--color-surface-2);
}

.audio-player__art {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border-radius: var(--radius-s);
  object-fit: cover;
  background-color: var(--color-surface-3);
}

.audio-player__body {
  flex: 1 1 16rem;
  min-width: 0;
}

.audio-player__meta {
  display: flex;
  gap: 0.75em;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
}

/* Native controls are the no-JS fallback: visible until the script says
   otherwise, so a broken bundle still leaves a usable player. */
.audio-player__audio {
  width: 100%;
  margin-top: 0.5em;
}
.audio-player[data-audio-ready='true'] .audio-player__audio {
  display: none;
}
.audio-player__ui {
  display: none;
}
.audio-player[data-audio-ready='true'] .audio-player__ui {
  display: block;
}

.audio-player__controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.audio-player__btn {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-dc),
              color var(--dur-fast) var(--ease-dc);
}
.audio-player__btn:hover:not(:disabled) {
  background-color: var(--color-ink);
  color: var(--color-surface);
}
.audio-player__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.audio-player__btn.is--play {
  width: 3.25em;
  height: 3.25em;
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-color: var(--color-ink);
}

/* One icon pair, swapped by state, so there is no flash of the wrong glyph. */
.audio-player__icon-pause { display: none; }
.audio-player[data-audio-state='playing'] .audio-player__icon-play { display: none; }
.audio-player[data-audio-state='playing'] .audio-player__icon-pause { display: block; }

.audio-player__rate {
  width: auto;
  padding-inline: 0.75em;
  border-radius: 1.25em;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.audio-player__track {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.75em;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.audio-player__bar {
  position: relative;
  flex: 1 1 auto;
  height: 0.5em;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-3);
  cursor: pointer;
  touch-action: none;
}
.audio-player__bar:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.audio-player__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
}

.audio-player__error {
  display: none;
  margin-top: 0.75em;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}
.audio-player[data-audio-state='error'] .audio-player__error {
  display: block;
}

.audio-player__links {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 0.75em;
  font-size: var(--text-xs);
}
.audio-player__links a {
  color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .audio-player__btn {
    transition: none;
  }
}

@media (max-width: 640px) {
  .audio-player {
    gap: var(--space-xs);
  }
  .audio-player__art {
    width: 64px;
    height: 64px;
  }
}


/* --- css/pages/single-resource.css --- */
/* pages/single-resource.css — the extras a resource adds on top of the shared
   .single-post__* editorial skin (css/pages/single-post.css). Anything the two
   have in common stays there; only the resource-only pieces live here. */

.single-resource__time {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}

.single-resource__player {
  margin-block: var(--space-s);
}

/* The "this is the long answer to a common question" note on a promoted FAQ. */
.single-resource__from-faq {
  margin-top: var(--space-m);
  padding: var(--space-s);
  border-left: 3px solid var(--color-line);
  background-color: var(--color-surface-2);
}

.single-resource__from-faq-label {
  margin: 0 0 0.35em;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}

.single-resource__from-faq-q {
  margin: 0;
  font-size: var(--text-l);
  line-height: 1.2;
}

.single-resource__from-faq-cat {
  margin: 0.5em 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.single-resource__more-heading {
  margin-bottom: var(--space-s);
  font-size: var(--text-l);
}

/* No column rules here on purpose: .dc-grid already defaults to 3 and carries
   its own responsive drops to 2 then 1 (css/base/grid.css). */


/* --- css/sections/footer-cta.css --- */
/* sections/footer-cta.css — site-wide CTA (blocks/footer-cta/render.php).
   Standalone: dark section before the footer. .is-in-footer: rendered inside
   the footer chrome, so it paints no background of its own and just spaces
   itself against the footer's top edge. */

.section_footer-cta .footer-cta__cols { --cols: 2; }

.footer-cta__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
  padding: var(--gap-l);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

/* Scoped to this block's own section: footer.php's footer band uses the same
   .footer-cta__title class, and this file loads after core/footer.css, so an
   unscoped rule here was overriding the band's type-display-xxl with 29px. */
.section_footer-cta .footer-cta__title {
  margin: 0;
  font-size: var(--text-l);
}

.footer-cta__text {
  margin: 0;
  color: var(--color-ink-soft);
}

.footer-cta__item .btn-group { margin-top: auto; padding-top: var(--gap-s); }

.section_footer-cta.is-in-footer {
  padding-top: var(--padding-s);
  padding-bottom: var(--padding-xs);
}

/* Inside the footer the CTA is a guest, not a hero: one size down. */
.section_footer-cta.is-in-footer .block-intro__title { font-size: var(--text-xl); }


/* --- css/sections/block-index.css --- */
/* sections/block-index.css — the dev section-index checklist (blocks/block_index). */

.block-index__title {
  margin: 0 0 var(--space-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-soft);
}

.block-index__title + .block-index__list { margin-bottom: var(--space-m); }

.block-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.block-index__item {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: 0.5em 0;
  border-bottom: 1px solid var(--color-line);
}

.block-index__check input {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-ink);
  cursor: pointer;
}

.block-index__link { font-weight: 500; }
.block-index__link:hover { text-decoration: underline; }

.block-index__item:has(input:checked) .block-index__link {
  text-decoration: line-through;
  color: var(--color-ink-soft);
}

.block-index__meta {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  font-family: ui-monospace, monospace;
}


/* --- css/components/sticky-steps.css --- */
/* components/sticky-steps.css — carried from vault 'sticky-steps-basic'; tokenise on first real use. */

.sticky-steps {
  min-height: 100dvh;
  position: relative;
  overflow: clip;
}

.sticky-steps__container {
  max-width: 74em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.sticky-steps__collection {
  min-height: 100dvh;
  display: flex;
  position: relative;
}

.sticky-steps__list {
  grid-column-gap: 30dvh;
  grid-row-gap: 30dvh;
  flex-flow: column;
  flex: 1;
  padding-top: calc(50dvh - 7.5em);
  padding-bottom: calc(50dvh - 7.5em);
  display: flex;
}

.sticky-steps__text {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  width: 50%;
  padding-right: 6em;
  display: flex;
}

.sticky-steps__eyebrow {
  opacity: .5;
  text-transform: uppercase;
  font-size: 1.3125em;
  font-weight: 700;
}

.sticky-steps__h2 {
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: min(5.5em, 15vw);
  font-weight: 500;
  line-height: .9;
}

.sticky-steps__p {
  opacity: .6;
  margin-bottom: 0;
  font-size: min(1.4375em, 5vw);
  line-height: 1.4;
}

.sticky-steps__media {
  width: 50%;
  height: 100%;
  padding-left: 3em;
  position: absolute;
  top: 0;
  right: 0;
}

.sticky-steps__sticky {
  align-items: center;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  position: sticky;
  top: 0;
}

.sticky-steps__visual {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-full);
  width: 100%;
  position: relative;
}

.sticky-steps__cover-image {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 992px) {
  [data-sticky-steps-item-status] .sticky-steps__visual {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
  }

  [data-sticky-steps-item-status="before"] .sticky-steps__visual,
  [data-sticky-steps-item-status="active"] .sticky-steps__visual {
    opacity: 1;
    visibility: visible;
  }

  [data-sticky-steps-item-status] .sticky-steps__text {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.25;
  }

  [data-sticky-steps-item-status="active"] .sticky-steps__text {
    opacity: 1;
  }
}

@media screen and (max-width: 991px) {
  .sticky-steps__list {
    grid-column-gap: 7.5em;
    grid-row-gap: 7.5em;
    padding-top: 10em;
    padding-bottom: 10em;
  }

  .sticky-steps__text {
    width: 100%;
    padding-bottom: 5em;
    padding-right: 0;
  }

  .sticky-steps__sticky {
    min-height: auto;
    position: relative;
    top: auto;
  }

  .sticky-steps__media {
    width: 100%;
    height: auto;
    padding-left: 0;
    position: relative;
    top: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .sticky-steps__text {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }
}


/* --- css/components/image-cycle.css --- */
/* components/image-cycle.css — carried from vault 'auto-image-cycle-slideshow'; tokenise on first real use. */

.image-cycle-collection {
  width: min(95vw, 60em);
  position: relative;
}

.image-cycle-collection__before {
  padding-top: 66.666%;
}

.image-cycle-collection__list {
  z-index: 0;
  border-radius: 2em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.image-cycle-collection__item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[data-image-cycle-item="active"] {
  transition: opacity 0.4s ease 0s, visibility 0s ease 0s;
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

[data-image-cycle-item="previous"] {
  transition: opacity 0.4s ease 0.4s, visibility 0s ease 0.4s;
  opacity: 0;
  visibility: visible;
  z-index: 2;
}

[data-image-cycle-item="not-active"] {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.image-cycle-collection__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .image-cycle-collection__list {
    border-radius: var(--radius-m);
  }
}


/* --- css/components/lightbox.css --- */
/* components/lightbox.css — carried from vault 'lightbox-setup'; tokenise on first real use. */

.gallery-grid {
  grid-column-gap: 1.25em;
  grid-row-gap: 4em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 8em;
  display: flex;
}

.gallery-grid__item {
  width: calc(33.3333% - .833333em);
}

.gallery-item__button {
  outline-offset: -1px;
  background-color: #0000;
  border: 1px #000;
  border-radius: .375em;
  outline: 1px #131313;
  width: 100%;
  padding: 0;
}

.gallery-item__button:focus-visible {
  outline-offset: 3px;
  border-radius: var(--radius-xs);
  outline: 1px solid #131313;
}

.gallery-item__img {
  border-radius: .375em;
  width: 100%;
}

.lightbox-wrap {
  z-index: 100;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.lightbox-wrap.is-active {
  display: flex;
}

.lightbox-img__wrap {
  width: 90vw;
  height: calc(100svh - 10em);
}

.lightbox-img__container {
  width: 100%;
  height: 100%;
}

.lightbox-img__list {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.lightbox-img__item {
  visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.lightbox-img__item.is-active {
  visibility: visible;
}

.lightbox-img {
  object-fit: contain;
  border-radius: .375em;
  min-width: auto;
  max-height: 100%;
}

.lightbox-img__item img { 
  object-fit: contain !important;
  min-width: auto;
  width: auto;
  max-height: 100%;
}

.lightbox-nav {
  z-index: 2;
  color: #fff;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 2em;
  left: 2em;
  right: 2em;
}

.lightbox-nav__col {
  width: 33.333%;
}

.lightbox-nav__col.start {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.lightbox-nav__col.center {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.lightbox-nav__col.end {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.lightbox-nav__text {
  margin-bottom: 0;
  font-size: 1em;
}

.lightbox-nav__button {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  background-color: #0000;
  justify-content: flex-start;
  align-items: center;
  margin: -1em;
  padding: 1em;
  display: flex;
}

.lightbox-nav__dot {
  background-color: currentColor;
  border-radius: var(--radius-full);
  width: .375em;
  height: .375em;
  margin-bottom: -.1em;
  transition-property: transform;
  transition-duration: .45s;
  transition-timing-function: cubic-bezier(.625, .05, 0, 1);
}

@media screen and (max-width: 767px) {
  .gallery-grid {
    grid-column-gap: 1em;
  }

  .gallery-grid__item {
    width: calc(50% - .5em);
  }
}

@media screen and (max-width: 479px) {
  .gallery-grid {
    grid-column-gap: .75em;
    grid-row-gap: 3em;
  }

  .gallery-grid__item {
    width: calc(50% - .375em);
  }
}


/* --- css/components/gallery-slideshow.css --- */
/* components/gallery-slideshow.css — carried from vault 'parallax-image-gallery-with-thumbnails'; tokenise on first real use. */

.img-slider {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border-radius: var(--radius-s);
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.img-slider__list {
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}

.img-slide {
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  grid-area: 1 / 1 / -1 / -1;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.img-slide.is--current {
  opacity: 1;
  pointer-events: auto;
}

.img-slide__inner {
  object-fit: cover;
  will-change: transform;
  width: 100%;
  height: 100%;
  position: absolute;
}

.img-slider__nav {
  z-index: 2;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  pointer-events: none;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  max-width: 95vw;
  display: flex;
  position: absolute;
  bottom: 2rem;
}

.img-slider__thumb {
  aspect-ratio: 1.5;
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid #fff3;
  border-radius: .3125rem;
  width: 7rem;
  transition: border-color .2s;
  position: relative;
  overflow: hidden;
}

.img-slider__thumb:hover {
  border-color: #fff6;
}

.img-slider__thumb.is--current {
  border-color: #fff;
}

.slider-thumb__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .img-slider__list {
    width: 100%;
  }

  .img-slider__thumb {
    flex: none;
  }
}

@media screen and (max-width: 767px) {
  .img-slider__nav {
    flex-flow: wrap;
  }

  .img-slider__thumb {
    border-radius: var(--radius-xs);
    width: 5rem;
  }
}

@media screen and (max-width: 479px) {
  .img-slider__thumb {
    width: 4.5rem;
  }
}


/* --- css/components/card.css --- */
/* components/card.css — every Locale card (Figma "Cards", node 925:23940).
   One component, variants by modifier. Blocks position cards; this file owns
   how they look.

   .card                  article card (Figma card-article/desktop; resources, news): template-parts/resource-card.php,
                          blocks/posts_grid
     > __link > __media (__image) + __body (__badges [.badge…, __meta], __title)
   .card.is-large         the same card at large scale (serif display-l title; default is utility-l)
   .card.is-question      FAQ question card (not in Figma yet; wireframe skin)
   .card.is-team          team member: blocks/team_listing
     > __media (__image) + __body (__title, __role, __actions .btn…)
   .card.is-tile          small tile: blocks/interest_carousel
     > .badge + __title + __arrow.brand-shape
   .card.is-icon[.is-cta] icon tile: blocks/icon_cards
     > __top (__icon, __title, __text) + .btn.is-link
   .card.is-package       house and land package: blocks/card_carousel
     > __image + __head (__title, __specs > __spec) + __foot (__arrow)

   Titles use the type tokens; colours read the semantic slots so dark bands
   flip them. Sizes are Figma px times --px. */

.card {
  position: relative;
  color: var(--color-ink);
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-m);
  background-color: var(--color-surface-2);
}

.card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
}

.card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 * var(--px));
}

.card__meta {
  font-size: var(--utility-xs-size);
  font-weight: var(--utility-xs-weight);
  letter-spacing: var(--utility-xs-ls);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.card__meta::before { content: '\2022\00a0'; }

.card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--utility-l-size);
  line-height: var(--utility-l-lh);
  letter-spacing: var(--utility-l-ls);
  font-weight: var(--utility-l-weight);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: calc(2 * var(--px));
  text-underline-offset: 0.15em;
  transition: text-decoration-color var(--animation-default-half);
}

.card:hover .card__title { text-decoration-color: var(--color-accent); }

.card.is-large .card__body { gap: calc(32 * var(--px)); }

.card.is-large .card__title,
.card.is-team .card__title,
.card.is-tile .card__title { font-family: var(--font-serif); }

.card.is-team .card__title,
.card.is-tile .card__title {
  font-size: var(--display-s-size);
  line-height: var(--display-s-lh);
  letter-spacing: var(--display-s-ls);
  font-weight: var(--display-s-weight);
}

.card.is-large .card__title {
  font-size: var(--display-l-size);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-ls);
  font-weight: var(--display-l-weight);
}

/* Filter + live search states (the grid components set data-filter-status) */
.card[data-filter-status] {
  transition:
    opacity var(--duration-default-half) var(--cubic-default),
    transform var(--duration-default-half) var(--cubic-default);
}

.card[data-filter-status="not-active"] { display: none; }

.card[data-filter-status="transition-out"] {
  opacity: 0;
  transform: scale(0.97);
}

/* ---- Question (FAQ) ------------------------------------------------- */

.card.is-question {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
  padding: calc(24 * var(--px));
  border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.card__question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  border-radius: var(--radius-full);
  background-color: var(--color-surface-2);
  font-weight: 700;
}

.card__excerpt {
  margin: 0;
  font-size: var(--body-s-size);
  line-height: var(--body-s-lh);
  color: var(--color-ink-soft);
}

.card__more {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- Team member ---------------------------------------------------- */

.card.is-team {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--brand-white);
  color: var(--brand-charcoal);
  box-shadow: 0 0 3px rgb(0 0 0 / 12%), 0 3px 4px rgb(0 0 0 / 3%);
  transition:
    background-color var(--animation-default),
    box-shadow var(--animation-default);
}

/* Figma: 450x461 full bleed at rest; on hover a 24px-inset photo 381 tall
   with the arch mask. Heights balance so the card does not grow. */
.card.is-team .card__media {
  aspect-ratio: 450 / 461;
  margin: 0;
  transition:
    margin var(--animation-default),
    aspect-ratio var(--animation-default),
    border-radius var(--animation-default);
}

.card.is-team .card__body {
  flex: 1;
  gap: calc(16 * var(--px));
  padding: calc(35 * var(--px)) calc(32 * var(--px)) calc(32 * var(--px));
}

.card.is-team .card__title,
.card.is-package .card__title { text-decoration: none; }

.card__role {
  margin: calc(-8 * var(--px)) 0 0;
  font-size: var(--body-s-size);
  line-height: 1;
  font-weight: 600;
}

.card__actions {
  display: flex;
  gap: calc(12 * var(--px));
}

.card__actions .btn { flex: 1; }

.card.is-team .btn { --btn-bg-hover: var(--brand-silver); }

.card.is-team:hover {
  background-color: var(--color-accent);
  box-shadow: 0 7px 12px rgb(50 50 50 / 8%), 0 3px 4px rgb(0 0 0 / 8%), 0 -1px 2px rgb(0 0 0 / 5%);
}

.card.is-team:hover .card__media {
  aspect-ratio: 402 / 381;
  margin: calc(24 * var(--px)) calc(24 * var(--px)) 0;
  border-radius: 50% 50% var(--radius-m) var(--radius-m) / 61% 61% var(--radius-m) var(--radius-m);
}

@media (hover: hover) {
  .card.is-team .card__actions {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height var(--animation-default),
      opacity var(--animation-default-half);
  }

  .card.is-team:hover .card__actions,
  .card.is-team:focus-within .card__actions {
    max-height: calc(40 * var(--px));
    opacity: 1;
  }
}

/* ---- Small tile ----------------------------------------------------- */

.card.is-tile {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(20 * var(--px));
  width: calc(300 * var(--px));
  min-height: calc(207 * var(--px));
  padding: calc(24 * var(--px));
  border-radius: var(--radius-m);
  background-color: var(--color-accent);
  color: var(--brand-charcoal);
  text-decoration: none;
}

.card.is-tile .badge {
  --badge-ink: var(--brand-charcoal);
  align-self: flex-start;
}

.card.is-tile:hover .card__title { text-decoration-color: var(--brand-silver); }

.card__arrow {
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  margin-top: auto;
}

.card__arrow svg {
  position: relative;
  z-index: 1;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
}

/* The tile's arrow shape is silver and only appears on hover */
.card.is-tile .brand-shape::before,
.card.is-tile .brand-shape::after {
  background-color: var(--brand-silver);
  opacity: 0;
}

.card.is-tile:hover .brand-shape::before { opacity: 1; }
[data-brand="financial"] .card.is-tile:hover .brand-shape::before { opacity: 0; }
[data-brand="financial"] .card.is-tile:hover .brand-shape::after { opacity: 1; }

/* ---- Icon tile (Figma cardp-iconTile) --------------------------------
   > __icon + __title + __text [+ .btn.is-link]; .is-cta = the call-to-action
   variant (silver 10% on dark bands, charcoal on light ones). */

.card.is-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(20 * var(--px));
  padding: calc(35 * var(--px));
  border-radius: var(--radius-m);
  background-color: var(--color-accent);
  color: var(--color-text-dark);
}

.card.is-icon .card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20 * var(--px));
}

.card__icon {
  display: block;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  object-fit: contain;
}

.card.is-icon .card__title {
  font-family: var(--font-sans);
  font-size: var(--utility-l-size);
  line-height: var(--utility-l-lh);
  letter-spacing: var(--utility-l-ls);
  font-weight: var(--utility-l-weight);
  text-decoration: none;
}

.card.is-icon .card__text {
  margin: 0;
  font-size: var(--body-s-size);
  line-height: var(--body-s-lh);
  letter-spacing: var(--body-s-ls);
  font-weight: var(--body-s-weight);
  color: var(--color-text-dark-secondary);
}

/* Solid, not silver 10% over whatever is behind: the page background fades
   between themes (components/bg-fade.css), and a see-through card flashed
   while its theme swapped mid-fade. Same colour as silver 10% on charcoal
   (Figma charcoal-tint-90), and it fades on the page's timing. */
.card.is-icon.is-cta {
  background-color: color-mix(in srgb, var(--brand-silver) 10%, var(--brand-charcoal));
  color: var(--color-text-light);
  transition: background-color var(--duration-default-onehalf) var(--cubic-default);
}

:where([data-theme-section="light"], [data-theme-section="tint"]) .card.is-icon.is-cta {
  background-color: var(--brand-charcoal);
}

.card.is-icon.is-cta .card__title { color: var(--color-accent); }
.card.is-icon.is-cta .card__text { color: var(--color-text-light-secondary); }
.card.is-icon .btn.is-link { align-self: flex-start; }
.card.is-icon.is-cta .btn.is-link { --btn-ink: var(--color-text-light); }

/* ---- Package card (Figma block-house&land 1158:39540) ----------------
   Photo card with a charcoal ground: the carousel sizes it, this is its
   look. */

.card.is-package {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 708 / 468;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
  text-decoration: none;
}

.card.is-package .card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--animation-default);
}

/* Figma card-houseAndLand-feature "elevationGradient" (1158:39544): dark
   charcoal at 80% on the top edge, down to 8% by 40%, then clear by the
   bottom. The long faint tail matters - it is not a top wash that stops.
   (The frame also layers a 10% black band over the top 127 with a 0px blur;
   left out because its direction is ambiguous and the main gradient carries
   the contrast.) */
.card.is-package::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Above .card__image: both are absolute with z-index auto and the image is
     later in the DOM, so without this the photo painted over the gradient and
     it never showed at all. */
  z-index: 1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand-dark-charcoal) 80%, transparent) 0,
    color-mix(in srgb, var(--brand-dark-charcoal) 8%, transparent) 40%,
    transparent 100%
  );
  pointer-events: none;
}

.card.is-package:hover .card__image { scale: 1.03; }

.card.is-package .card__head,
.card.is-package .card__foot {
  position: relative;
  z-index: 2;
  display: flex;
  padding: calc(35 * var(--px));
}

.card.is-package .card__head {
  flex-direction: column;
  gap: calc(12 * var(--px));
}

.card.is-package .card__title {
  font-family: var(--font-serif);
  font-size: var(--display-s-size);
  line-height: var(--display-s-lh);
  letter-spacing: var(--display-s-ls);
  font-weight: var(--display-s-weight);
}

.card.is-package .card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--px));
}

.card.is-package .card__spec {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  font-size: calc(13 * var(--px));
  font-weight: 600;
}

.card.is-package .card__spec img {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  object-fit: contain;
}

.card.is-package .card__foot { justify-content: flex-end; }

.card.is-package .card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  border-radius: var(--radius-full);
  background-color: var(--brand-silver);
  color: var(--brand-charcoal);
  transition: background-color var(--animation-default-half);
}

.card.is-package .card__arrow svg {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
}

.card.is-package:hover .card__arrow { background-color: var(--color-accent); }

@media screen and (max-width: 767px) {
  .card.is-package { aspect-ratio: 318 / 300; }

  .card.is-package .card__head,
  .card.is-package .card__foot { padding: calc(20 * var(--px)); }
}


/* --- css/components/filter-basic.css --- */
/* components/filter-basic.css — carried from vault 'basic-filter-setup'; tokenise on first real use. */

.filter-group {
  min-height: 100vh;
  padding-bottom: 10em;
}

/* Filter Buttons */
.filter-buttons {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-start;
  padding: 1em 1em 3em;
  display: flex;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: #efeeec;
  border-radius: var(--radius-full);
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Filter List */
.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  width: 25%;
  padding: .75em;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

/* Demo Card */
.demo-card {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #efeeec;
  border-radius: var(--radius-l);
  flex-flow: column;
  width: 100%;
  padding: 1em;
  display: flex;
}

.demo-card__bottom {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: .25em;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
}

.demo-card__h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__visual {
  background-color: #e2dfdf;
  border-radius: var(--radius-s);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.demo-card__visual-before {
  padding-top: 66%;
}

.demo-title {
  padding: 10em 1em 2em;
}

.demo-title__h2 {
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__emoji {
  font-size: 4em;
}

@media screen and (max-width: 991px) {
  .filter-list__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .filter-list__item {
    width: 100%;
  }

  .demo-title__h2 {
    font-size: 4em;
  }
}


/* --- css/components/filter-basic-multi.css --- */
/* components/filter-basic-multi.css — carried from vault 'basic-filter-setup-multi-match'; tokenise on first real use. */

.filter-group {
  min-height: 100vh;
  padding-bottom: 10em;
}

/* Filter Buttons */
.filter-buttons {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-start;
  padding: 1em 1em 3em;
  display: flex;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: #efeeec;
  border-radius: var(--radius-full);
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Filter List */
.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  width: 25%;
  padding: .75em;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

/* Demo Card */
.demo-card {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #efeeec;
  border-radius: var(--radius-l);
  flex-flow: column;
  width: 100%;
  padding: 1em;
  display: flex;
}

.demo-card__top {
  position: relative;
}

.demo-card__bottom {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: .25em;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
}

.demo-card__h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__visual {
  background-color: #e2dfdf;
  border-radius: var(--radius-s);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.demo-card__visual-before {
  padding-top: 66%;
}

.demo-title {
  padding: 10em 1em 2em;
}

.demo-title__h2 {
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__emoji {
  font-size: 4em;
}

.demo-card__tags-collection {
  width: 100%;
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
}

.demo-card__tags-list {
  display: flex;
}

.demo-card__tags-item {
  background-color: #efeeec;
  border-radius: 3em;
  padding: .25em .75em;
}

.demo-card__tags-item-p {
  margin-bottom: 0;
  font-size: .875em;
}

@media screen and (max-width: 991px) {
  .filter-list__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .filter-list__item {
    width: 100%;
  }
}


/* --- css/components/filter-multi.css --- */
/* components/filter-multi.css — carried from vault 'multi-filter-setup-multi-match'; tokenise on first real use. */

.filter-group {
  min-height: 100vh;
  padding-bottom: 10em;
}

/* Filter Buttons */
.filter-buttons {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-start;
  padding: 1em 1em 3em;
  display: flex;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: #efeeec;
  border-radius: var(--radius-full);
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Reset Button */
.reset-btn {
  outline-offset: -2px;
  color: #c90f0f;
  -webkit-appearance: none;
  appearance: none;
  background-color: #c90f0f0d;
  border-radius: var(--radius-full);
  outline: 2px solid #c90f0f;
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.reset-btn[data-filter-status="active"] {
  opacity: 1;
  visibility: visible;
}

/* Filter List */
.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  width: 25%;
  padding: .75em;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

/* Demo Card */
.demo-card {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #efeeec;
  border-radius: var(--radius-l);
  flex-flow: column;
  width: 100%;
  padding: 1em;
  display: flex;
}

.demo-card__top {
  position: relative;
}

.demo-card__bottom {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: .25em;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
}

.demo-card__h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__visual {
  background-color: #e2dfdf;
  border-radius: var(--radius-s);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.demo-card__visual-before {
  padding-top: 66%;
}

.demo-title {
  padding: 10em 1em 2em;
}

.demo-title__h2 {
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__emoji {
  font-size: 4em;
}

.demo-card__tags-collection {
  width: 100%;
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
}

.demo-card__tags-list {
  display: flex;
}

.demo-card__tags-item {
  background-color: #efeeec;
  border-radius: 3em;
  padding: .25em .75em;
}

.demo-card__tags-item-p {
  margin-bottom: 0;
  font-size: .875em;
}

@media screen and (max-width: 991px) {
  .filter-list__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .filter-list__item {
    width: 100%;
  }
}


/* --- css/components/live-search.css --- */
/* components/live-search.css — carried from vault 'live-search-list-js'; tokenise on first real use. */

.live-search {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  display: flex;
}

.live-search__search {
  justify-content: center;
  align-items: center;
  display: flex;
}

.live-search__search-field {
  background-color: #f4f4f4;
  border: 1px solid #0000;
  border-radius: var(--radius-full);
  align-items: center;
  width: 100%;
  max-width: 22em;
  height: 4em;
  display: flex;
  position: relative;
}

.live-search__search-icon {
  z-index: 1;
  pointer-events: none;
  color: #6840ff;
  -webkit-user-select: none;
  user-select: none;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  display: flex;
  position: absolute;
  left: 1em;
}

.live-search__search-input {
  letter-spacing: -.015em;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 2.75em;
  font-size: 1.125em;
  font-weight: 400;
}

.live-search__search-field:has(input:focus) {
  border-color: rgba(0, 0, 0, 0.1);
}

.live-search__search-field input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

.live-search__list {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: wrap;
  justify-content: center;
  width: 100%;
  display: flex;
}

.live-search__item {
  width: calc(33.33% - 1em);
}

.live-search__not-found-p {
  color: #817f7f;
  text-align: center;
  font-size: 1em;
}

.live-search__data, .live-search__not-found {
  display: none;
}

@media screen and (max-width: 991px) {
  .live-search__item {
    width: calc(49.995% - .75em);
  }
}

@media screen and (max-width: 767px) {
  .live-search__item {
    width: 100%;
  }
}

.demo-card {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #f4f4f4;
  border-radius: var(--radius-l);
  flex-flow: column;
  width: 100%;
  padding: 1em;
  display: flex;
}

.demo-card__top {
  position: relative;
}

.demo-card__visual {
  background-color: #eaeaea;
  border-radius: var(--radius-s);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.demo-card__visual-before {
  padding-top: 66%;
}

.demo-card__emoji {
  font-size: 4em;
}

.demo-card__tags-collection {
  width: 100%;
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
}

.demo-card__tags-list {
  display: flex;
}

.demo-card__tags-item {
  background-color: #f4f4f4;
  border-radius: 3em;
  padding: .25em .75em;
}

.demo-card__tags-item-p {
  letter-spacing: -.01em;
  margin-bottom: 0;
  font-size: .875em;
  font-weight: 400;
}

.demo-card__bottom {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: .25em;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
}

.demo-card__h3 {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.2;
}


/* --- css/components/accordion.css --- */
/* components/accordion.css — vault accordion-css-animation, tokenised. */

.accordion-css {
  max-width: 29em;
  position: relative;
}

.accordion-css__list {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: static;
}

.accordion-css__item {
  background-color: var(--color-surface-2);
  border-radius: var(--radius-s);
  list-style: none;
}

.accordion-css__item-top {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 1.5em;
  display: flex;
}

.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s var(--cubic-default);
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
}

[data-accordion-status="active"] .accordion-css__item-bottom {
   grid-template-rows: 1fr;
}

.accordion-css__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.accordion-css__item-bottom-content {
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.accordion-css__item-h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.3;
}

.accordion-css__item-icon {
  transition: transform 0.6s var(--cubic-default);
  background-color: var(--color-surface-3);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  display: flex;
  transform: rotate(180deg);
}

[data-accordion-status="active"] .accordion-css__item-icon {
   transform: rotate(0.001deg);
}

.accordion-css__item-icon-svg {
  width: 1em;
}

.accordion-css__item-p {
  color: var(--color-ink-soft);
  margin-bottom: 0;
  font-size: .875em;
  line-height: 1.5;
}

/* The link to a question's long-form resource page. The accordion answer stays
   short; this is the way through to the full article. */
.accordion-css__item-more {
  margin: 0.75em 0 0;
  font-size: var(--text-s);
}


/* --- css/components/tab-system.css --- */
/* components/tab-system.css — vault 'tab-system-with-autoplay-option',
   tokenised (ink/line/accent slots, DC ease). Markup contract in
   blocks/accordion_section/render.php; behaviour in js/components/tab-system.js. */

.tab-layout__wrap {
  z-index: 1;
  grid-row-gap: 3em;
  flex-flow: wrap;
  display: flex;
  position: relative;
}

.tab-layout__col {
  width: 50%;
  padding-left: .5em;
  padding-right: .5em;
}

.tab-content__inner {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 100%;
  padding-top: 1em;
  padding-right: 2.5em;
  display: flex;
}

.tab-content__top {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tab-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1;
}

.tab-visual__wrap {
  aspect-ratio: 1.6;
  position: relative;
}

.tab-visual__item {
  visibility: hidden;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.tab-visual__item.active {
  visibility: visible;
}

.tab-visual__inner {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  width: 100%;
  height: 100%;
  padding: .5em;
  overflow: hidden;
}

.tab-image {
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: calc(var(--radius-s) / 2);
  width: 100%;
  height: 100%;
  position: relative;
}

.tab-content__wrap {
  width: 100%;
  height: 100%;
}

.tab-content__bottom {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 30em;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.tab-content__item {
  color: var(--color-ink);
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  text-decoration: none;
  transition: opacity .25s;
  position: relative;
}

.tab-content__item-main {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.content-item__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--text-l);
  font-weight: 500;
  line-height: 1;
}

.tab-content__item-detail {
  width: 100%;
  height: 0;
  overflow: hidden;
}

.tab-description {
  margin-bottom: 0;
  font-size: 1em;
}

.tab-description__spacer {
  padding-top: 1em;
}

.tab-content__item-bottom {
  background-color: var(--color-line);
  width: 100%;
  height: 1px;
  transition: background-color .2s;
  position: absolute;
  inset: auto 0% 0%;
}

.tab-progress {
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: var(--color-accent);
  width: 100%;
  height: 1px;
  transform: scale3d(0, 1, 1);
}

@media screen and (max-width: 991px) {
  .tab-layout__col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-content__inner {
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
  }

  .tab-content__top {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .tab-visual__wrap {
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-visual__item {
    overflow: hidden;
  }

  .tab-content__wrap {
    max-width: none;
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .tab-layout__wrap {
    grid-row-gap: 2em;
  }

  .tab-visual__item {
    border-radius: calc(var(--radius-s) / 2);
  }

  .tab-content__bottom {
    max-width: none;
  }

  .tab-content__item-main {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

}

@media screen and (max-width: 479px) {
  .tab-visual__inner {
    border-style: none;
    border-radius: calc(var(--radius-s) / 2);
    padding: 0;
  }

  .tab-image {
    aspect-ratio: auto;
  }

  .tab-content__item {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .tab-content__item-main {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

}


/* --- css/components/toggle-switch.css --- */
/* components/toggle-switch.css — vault resource 'Toggle Switch'.
   Markup: [data-toggle-init] > [data-toggle-btn]* with one .toggle-switch__bg
   pill behind them. js/components/toggle-switch.js only writes two custom
   properties (--toggle-count, --toggle-active); all motion is this file, so
   the control still reads correctly with JS off (first button styled active).

   --toggle-count   number of buttons, written by the script on load
   --toggle-padding gap between the pill and the track edge */

.toggle-switch {
  --toggle-count: 3;
  --toggle-padding: 0.25em;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(var(--toggle-count, 2), 1fr);
  width: 100%;
  max-width: 30em;
  padding: var(--toggle-padding);
  background-color: var(--color-surface-2);
  border-radius: 0.875em;
}

.toggle-switch__bg {
  position: absolute;
  top: var(--toggle-padding);
  bottom: var(--toggle-padding);
  left: var(--toggle-padding);
  width: calc((100% - 2 * var(--toggle-padding)) / var(--toggle-count, 2));
  transform: translateX(calc(var(--toggle-active, 0) * 100%));
  background-color: var(--color-surface);
  border-radius: 0.625em;
  transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.toggle-switch__btn {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.625em;
  justify-content: center;
  align-items: center;
  padding: 1.5em 1em;
  font: inherit;
  color: var(--color-ink-soft);
  background-color: transparent;
  border: none;
  border-radius: 0.625em;
  cursor: pointer;
  transition: color 0.2s;
}

.toggle-switch__btn[data-toggle-active] { color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  .toggle-switch__bg { transition: none; }
}


/* --- css/components/modal.css --- */
/* components/modal.css — vault basic-modal-setup, tokenised on use. */

.modal {
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  padding: 2em 1em;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
  transition: all 0.2s linear;
}

.modal[data-modal-group-status="active"] {
  opacity: 1;
  visibility: visible;
}

.modal__dark {
  opacity: .5;
  pointer-events: auto;
  cursor: pointer;
  background-color: #131313;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal__card {
  pointer-events: auto;
  background-color: #efeeec;
  border-radius: 2em;
  width: 100%;
  max-width: 54em;
  max-height: 100%;
  padding: .75em;
  display: none;
  position: relative;
}

.modal__card[data-modal-status="active"] {
  display: flex;
}

.modal__scroll {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  background-color: #e2e1df;
  border-radius: 1.25em;
  flex-flow: column;
  width: 100%;
  max-height: 100%;
  display: flex;
  position: relative;
  overflow: scroll;
}

.modal__content {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  padding: 2em;
  display: flex;
}

.modal__h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.175;
}

.modal__p {
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.5;
}

.modal__btn-close {
  background-color: #efeeec;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  position: absolute;
  top: 2.5em;
  right: 2.5em;
}

.modal__btn-close-bar {
  background-color: currentColor;
  width: .125em;
  height: 40%;
  position: absolute;
  transform: rotate(45deg);
}

.modal__btn-close-bar.is--second {
  transform: rotate(-45deg);
}

/* Video card: 16:9 iframe, no scroll chrome */

.modal__card.is--video {
  max-width: 64em;
  padding: 0;
  background: none;
  border-radius: var(--radius-m);
  overflow: hidden;
}

.modal__card.is--video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background-color: #000;
}

/* Demo Buttons */

.demo-btn {
  background-color: #efeeec;
  border-radius: var(--radius-full);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.demo-btn__p {
  margin-bottom: 0;
  padding: .65em 1.25em;
  font-size: 1em;
}


/* --- css/components/section-intro.css --- */
/* components/section-intro.css — THE block intro, emitted by dc_block_intro()
   (Figma component "blockHeader", node 1158:39541). One component for every
   block: label (utility-s) + display title (italic via *asterisks*) + body
   text + button, and an optional actions slot on the right (carousel arrows,
   explore link). Type comes from the .type-* classes on the elements; this
   file owns layout and the faded inks, which follow the section theme.

   data-intro-align="left"    stacked left, actions bottom-right
   data-intro-align="center"  centred stack
   data-intro-align="split"   title left, text right (bottom-aligned) */

.block-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(35 * var(--px));
  row-gap: calc(48 * var(--px));
  align-items: end;
  /* Figma space-08: 48 desktop, 35 mobile. The intro-to-content gap on every block. */
  margin-bottom: var(--space-08);
}

.block-intro__main,
.block-intro__body {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.block-intro__main {
  gap: calc(35 * var(--px));
  padding-right: calc(250 * var(--px));
}

.block-intro__body {
  gap: calc(32 * var(--px));
  padding-right: calc(80 * var(--px));
  max-width: calc(760 * var(--px));
}

.block-intro__label {
  color: color-mix(in srgb, currentColor 55%, transparent);
}

.block-intro__title {
  margin: 0;
  color: inherit;
}

.block-intro__title em { font-style: italic; }

.block-intro__text {
  color: color-mix(in srgb, currentColor 85%, transparent);
}

.block-intro__text > :first-child { margin-top: 0; }
.block-intro__text > :last-child  { margin-bottom: 0; }

.block-intro__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: flex;
  align-items: center;
  gap: calc(35 * var(--px));
}

/* Centre */
.block-intro[data-intro-align="center"] {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.block-intro[data-intro-align="center"] .block-intro__main,
.block-intro[data-intro-align="center"] .block-intro__body {
  align-items: center;
  padding-right: 0;
  max-width: calc(1196 * var(--px));
}

.block-intro[data-intro-align="center"] .block-intro__actions {
  grid-column: 1;
  grid-row: auto;
}

/* Split: title left, text right */
.block-intro[data-intro-align="split"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(400 * var(--px)));
}

.block-intro[data-intro-align="split"] .block-intro__main { padding-right: 0; }

.block-intro[data-intro-align="split"] .block-intro__body {
  grid-column: 2;
  grid-row: 1;
  padding-right: 0;
}

@media screen and (max-width: 767px) {
  .block-intro,
  .block-intro[data-intro-align="split"] {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(24 * var(--px));
  }

  .block-intro__main { gap: calc(24 * var(--px)); }

  .block-intro__main,
  .block-intro__body,
  .block-intro[data-intro-align="split"] .block-intro__body {
    grid-column: 1;
    grid-row: auto;
    padding-right: 0;
  }

  .block-intro__actions {
    grid-column: 1;
    grid-row: auto;
  }
}


/* --- css/components/underline-link.css --- */
/* components/underline-link.css — vault underline-link-animation.
   Usage: add [data-underline-link] (or ="alt") to any inline link. */

.link-group {
  gap: 1em;
  justify-content: center;
  font-size: 3em;
  display: flex;
}

.underline-link {
  color: inherit;
  font-size: 1em;
  line-height: 1.25;
}

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after{
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s var(--cubic-default);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }  
  
  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }
  
  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}


/* --- css/components/button.css --- */
/* components/button.css — LOCALE buttons (Figma "Elements", node 925:23730).
   Markup comes from dc_button() / dc_button_html() in includes/helpers.php.

   .btn              fill, Figma btn-primary "Dark" (on dark bands: "Accent")
   .btn.is-subtle    Figma "Dark Subtle" (on dark bands: "Light Subtle")
   .btn.is-accent    Figma "Accent"
   .btn.is-link      text link + arrow (.is-secondary is the legacy alias)
   .btn.is-enquire   label + brand-shape arrow cap (Figma btn-topNav-enquire)
   .brand-shape      circle at rest, the site's brand shape on hover
   .btn-arrow        carousel arrow (Figma btn-carouselArrow)
   .badge            ghost badge; .is-fill accent, .is-pill round

   Colours flow through --btn-* / --arrow-* so dark bands flip the whole set
   in one place. All sizes are Figma px times --px. */

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
}

.btn {
  --btn-bg: var(--brand-charcoal);
  --btn-ink: var(--color-text-light);
  --btn-bg-hover: var(--color-accent);
  --btn-ink-hover: var(--brand-charcoal);

  /* One height for every button: 40 desktop, 35 mobile (see the breakpoint at
     the end of this file). Blocks must NOT override it per Figma frame, or
     buttons change size from section to section. */
  --btn-h: calc(40 * var(--px));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: calc(3 * var(--px)) calc(20 * var(--px)) 0;
  border-radius: var(--radius-s);
  background-color: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  appearance: none;
  transition:
    background-color var(--animation-default-half),
    border-radius var(--animation-default-half);
}

.btn.is-subtle {
  --btn-bg: color-mix(in srgb, var(--brand-charcoal) 10%, transparent);
  --btn-ink: var(--brand-charcoal);
  --btn-bg-hover: color-mix(in srgb, var(--brand-charcoal) 15%, transparent);
  --btn-ink-hover: var(--brand-charcoal);
}

.btn.is-accent {
  --btn-bg: var(--color-accent);
  --btn-ink: var(--brand-charcoal);
  --btn-bg-hover: var(--brand-silver);
  --btn-ink-hover: var(--brand-charcoal);
}

:where([data-theme-section="dark"], [data-theme-section="primary"]) .btn {
  --btn-bg: var(--color-accent);
  --btn-ink: var(--brand-charcoal);
  --btn-bg-hover: var(--brand-silver);
  --btn-ink-hover: var(--brand-charcoal);
}

:where([data-theme-section="dark"], [data-theme-section="primary"]) .btn.is-subtle {
  --btn-bg: color-mix(in srgb, var(--brand-silver) 10%, transparent);
  --btn-ink: var(--color-text-light);
  --btn-bg-hover: color-mix(in srgb, var(--brand-silver) 15%, transparent);
  --btn-ink-hover: var(--color-text-light);
}

.btn:hover {
  background-color: var(--btn-bg-hover);
  /* Half the 40px height (Figma: 20), not --radius-full: animating to 999em
     spends the whole transition above the pill shape, so it just snaps. */
  border-radius: calc(20 * var(--px));
}

/* Rolling label: two copies stacked, the second rises into view on hover. */
.btn__label {
  display: block;
  overflow: hidden;
  height: 1.25em;
}

.btn__roll {
  display: flex;
  flex-direction: column;
  transition: transform var(--animation-default);
}

.btn__text {
  display: block;
  height: 1.25em;
  color: var(--btn-ink);
}

.btn__text + .btn__text { color: var(--btn-ink-hover); }

.btn:hover .btn__roll { transform: translateY(-50%); }

/* ---- Text link ------------------------------------------------------ */

.btn.is-link,
.btn.is-secondary {
  --btn-ink: var(--color-ink);
  --btn-line: color-mix(in srgb, currentColor 20%, transparent);

  height: auto;
  padding: 0;
  gap: calc(4 * var(--px));
  border-radius: 0;
  background: none;
  font-size: calc(17 * var(--px));
}

.btn.is-link:hover,
.btn.is-secondary:hover { background: none; border-radius: 0; }

.btn.is-link .btn__label,
.btn.is-secondary .btn__label {
  height: auto;
  padding-bottom: calc(4 * var(--px));
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 calc(2 * var(--px)) no-repeat,
    linear-gradient(var(--btn-line), var(--btn-line)) left bottom / 100% calc(2 * var(--px)) no-repeat;
  transition: background-size var(--animation-default);
}

.btn.is-link:hover .btn__label,
.btn.is-secondary:hover .btn__label {
  background-size: 100% calc(2 * var(--px)), 100% calc(2 * var(--px));
}

.btn__icon {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  flex: none;
  margin-bottom: calc(4 * var(--px));
}

/* ---- Enquire: label + brand-shape cap ------------------------------- */

.btn.is-enquire {
  height: auto;
  padding: 0;
  background: none;
  border-radius: 0;
}

.btn.is-enquire:hover { background: none; border-radius: 0; }

.btn__pill {
  display: flex;
  align-items: center;
  height: var(--btn-h);
  padding: calc(3 * var(--px)) calc(20 * var(--px)) 0;
  border-radius: var(--radius-s);
  background-color: var(--brand-charcoal);
  transition: border-radius var(--animation-default-half);
}

.btn.is-enquire .btn__text,
.btn.is-enquire .btn__text + .btn__text { color: var(--color-text-light); }

.btn.is-enquire:hover .btn__pill { border-radius: calc(var(--btn-h) / 2); }

.btn__cap {
  width: var(--btn-h);
  height: var(--btn-h);
  color: var(--brand-charcoal);
}

.btn__cap-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.btn__cap-icon {
  flex: none;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  margin: auto;
  transition: transform var(--animation-default);
}

.btn__cap-icon + .btn__cap-icon {
  position: absolute;
  inset: 0;
  transform: translateX(-175%);
}

.btn.is-enquire:hover .btn__cap-icon { transform: translateX(175%); }
.btn.is-enquire:hover .btn__cap-icon + .btn__cap-icon { transform: translateX(0); }

/* ---- Brand shape ------------------------------------------------------
   Reusable: .brand-shape morphs when it, or a .btn / [data-brand-shape-
   trigger] ancestor, is hovered. Financial's hexagon is a mask crossfade
   because border-radius cannot draw it. */

.brand-shape {
  --shape-radius: 50%;
  position: relative;
  display: inline-flex;
  isolation: isolate;
}

[data-brand="homes"]  .brand-shape { --shape-radius: 50% 50% 0 0; }
[data-brand="wealth"] .brand-shape { --shape-radius: 0 21% 0 21%; }
[data-brand="group"]  .brand-shape { --shape-radius: 20%; }

.brand-shape::before,
.brand-shape::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: var(--color-accent);
  transition:
    border-radius var(--animation-default),
    opacity var(--animation-default-half);
}

.brand-shape::before { border-radius: 50%; }

.brand-shape::after {
  inset: -4.6% 0;
  opacity: 0;
  -webkit-mask: url('../img/brand/shape-financial.svg') center / 100% 100% no-repeat;
  mask: url('../img/brand/shape-financial.svg') center / 100% 100% no-repeat;
}

:is(.btn, [data-brand-shape-trigger]):hover .brand-shape::before,
.brand-shape:hover::before { border-radius: var(--shape-radius); }

[data-brand="financial"] :is(.btn, [data-brand-shape-trigger]):hover .brand-shape::before,
[data-brand="financial"] .brand-shape:hover::before { opacity: 0; }

[data-brand="financial"] :is(.btn, [data-brand-shape-trigger]):hover .brand-shape::after,
[data-brand="financial"] .brand-shape:hover::after { opacity: 1; }

/* ---- Carousel arrow ------------------------------------------------- */

.btn-arrow {
  --arrow-bg: color-mix(in srgb, var(--brand-charcoal) 85%, transparent);
  --arrow-ink: var(--brand-silver);
  --arrow-bg-hover: var(--brand-charcoal);
  --arrow-ink-hover: var(--color-accent);
  --arrow-bg-disabled: color-mix(in srgb, var(--brand-charcoal) 5%, transparent);
  --arrow-ink-disabled: color-mix(in srgb, var(--brand-charcoal) 30%, transparent);

  appearance: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--arrow-bg);
  color: var(--arrow-ink);
  cursor: pointer;
  transition:
    background-color var(--animation-ease),
    color var(--animation-ease);
}

:where([data-theme-section="dark"], [data-theme-section="primary"]) .btn-arrow {
  --arrow-bg: color-mix(in srgb, var(--brand-silver) 90%, transparent);
  --arrow-ink: var(--brand-charcoal);
  --arrow-bg-hover: var(--brand-silver);
  --arrow-ink-hover: var(--brand-charcoal);
  --arrow-bg-disabled: color-mix(in srgb, var(--brand-silver) 10%, transparent);
  --arrow-ink-disabled: color-mix(in srgb, var(--brand-silver) 45%, transparent);
}

.btn-arrow:hover {
  background-color: var(--arrow-bg-hover);
  color: var(--arrow-ink-hover);
}

.btn-arrow:disabled,
.btn-arrow[aria-disabled="true"],
.btn-arrow.is--disabled {
  background-color: var(--arrow-bg-disabled);
  color: var(--arrow-ink-disabled);
  cursor: default;
}

.btn-arrow svg {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
}

.btn-arrow.is-prev svg { transform: scaleX(-1); }

/* ---- Badge ---------------------------------------------------------- */

.badge {
  --badge-ink: var(--color-ink);

  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  height: calc(20 * var(--px));
  padding: calc(1 * var(--px)) calc(8 * var(--px)) 0;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-ink) 70%, transparent);
  color: var(--badge-ink);
  font-family: var(--font-sans);
  font-size: var(--utility-xs-size);
  font-weight: var(--utility-xs-weight);
  line-height: var(--utility-xs-lh);
  letter-spacing: var(--utility-xs-ls);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.is-fill {
  --badge-ink: var(--brand-charcoal);
  background-color: var(--color-accent);
  box-shadow: none;
}

.badge.is-pill { border-radius: var(--radius-full); }

.badge svg {
  width: calc(11 * var(--px));
  height: calc(11 * var(--px));
  flex: none;
}

@media screen and (max-width: 767px) {
  .btn { --btn-h: calc(35 * var(--px)); }

  .badge {
    height: calc(18 * var(--px));
    padding-inline: calc(6 * var(--px));
  }
}


/* --- css/components/play-button.css --- */
/* components/play-button.css — THE play button, emitted by dc_play_button()
   (Figma playBtn). 64px frosted silver circle with a silver triangle; grows to
   72px and fills accent (charcoal triangle) on hover of itself or of the
   nearest [data-play-host] (the card that opens the video). Size and colours
   flow through --play-* so a block can resize without restyling. */

.play-btn {
  --play-size: calc(64 * var(--px));
  --play-size-hover: calc(72 * var(--px));
  --play-bg: color-mix(in srgb, var(--brand-silver) 20%, transparent);
  --play-ink: var(--brand-silver);
  --play-bg-hover: var(--color-accent);
  --play-ink-hover: var(--brand-charcoal);

  display: grid;
  place-items: center;
  width: var(--play-size);
  height: var(--play-size);
  border-radius: 50%;
  background-color: var(--play-bg);
  color: var(--play-ink);
  backdrop-filter: blur(calc(12 * var(--px)));
  -webkit-backdrop-filter: blur(calc(12 * var(--px)));
  transition:
    width var(--animation-default-half),
    height var(--animation-default-half),
    background-color var(--animation-default-half),
    color var(--animation-default-half);
}

/* The triangle keeps its Figma proportion at any circle size. */
.play-btn__icon {
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .play-btn:hover,
  [data-play-host]:hover .play-btn,
  [data-play-host]:focus-visible .play-btn {
    width: var(--play-size-hover);
    height: var(--play-size-hover);
    background-color: var(--play-bg-hover);
    color: var(--play-ink-hover);
  }
}


/* --- css/components/rich-text.css --- */
/* components/rich-text.css — client wysiwyg output (PHP: dc_rte(), wrapper
   carries the `rte` class). Two rules so editor content needs no thought from
   the client: a link on its own line has already become the standard text
   button (.btn.is-link, styled in button.css), and a link inside a sentence
   reads as body text with an accent underline (mint text on white is ~1.6:1,
   under the 4.5:1 minimum; the underline carries the brand cue instead). */

.rte a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--animation-default-half);
}

.rte a:not(.btn):hover {
  text-decoration-color: currentColor;
}

/* A text button on its own line keeps the paragraph rhythm, not tight to the
   sentence above it. */
.rte p > .btn.is-link:only-child {
  margin-top: calc(4 * var(--px));
}


/* --- css/components/marker-reveal.css --- */
/* components/marker-reveal.css — vault highlight-marker-text-reveal. */

[data-highlight-marker-reveal] {
  visibility: hidden;
}

[data-highlight-marker-reveal] .highlight-marker-line {
  width: auto;
  display: inline-block !important;
  margin: -0.055em 0px;
}

.highlight-marker-bar {
  position: absolute;
  inset: -0.055em 0px;
  z-index: 1;
  pointer-events: none;
}


/* --- css/components/region-strip.css --- */
/* components/region-strip.css — the sticky region selector floating at the
   bottom of every page (template-parts/region-strip.php; Figma 978:25094
   collapsed, 978:25098 expanded, 978:25102 region chosen, 978:25106 arrow
   hover). A charcoal strip: heading and blurb on the left, the region buttons
   and the go arrow on the right. The blurb is collapsed and opens on hover
   (Chris 2026-09-23), so the strip rests as state 01 and becomes state 02
   under the pointer; the close dismisses it for the visit.

   The header chip and this strip are both kept on purpose: the chip reports
   the region being served, the strip invites a first choice. */

.region-strip {
  position: fixed;
  z-index: 60;
  left: 50%;
  translate: -50% 0;
  bottom: calc(16 * var(--px) + env(safe-area-inset-bottom, 0px));
  width: calc(1196 * var(--px));
  max-width: calc(100vw - 2 * var(--container-padding));
  pointer-events: none;
}

.region-strip__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-06);
  position: relative;
  overflow: clip;
  padding: var(--space-05b) var(--space-07) var(--space-05b) var(--space-08);
  border-radius: calc(24 * var(--px));
  background-color: var(--brand-charcoal);
  color: var(--color-text-light);
  pointer-events: auto;
  /* Figma cardHover-shadow-v2 */
  box-shadow:
    0 calc(-1 * var(--px)) calc(2 * var(--px)) rgb(0 0 0 / 0.05),
    0 calc(3 * var(--px)) calc(4 * var(--px)) rgb(0 0 0 / 0.08),
    0 calc(7 * var(--px)) calc(12 * var(--px)) rgb(50 50 50 / 0.08);
}

.region-strip__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-04);
  flex: 1;
  min-width: 0;
}

.region-strip__heading {
  display: flex;
  align-items: center;
  gap: var(--space-04);
  height: calc(40 * var(--px));
  margin: 0;
  font-size: calc(23 * var(--px));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.region-strip__icon {
  flex: none;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
}

/* The blurb is closed at rest and opens on hover: the row animates from 0 to
   the real content height, so nothing here has to guess a max-height.
   minmax(0, Nfr) not a bare Nfr — an fr track keeps an `auto` minimum, which
   min-height on the item cannot override, and 0fr alone left a 16px sliver. */
.region-strip__reveal {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition:
    grid-template-rows var(--animation-default),
    opacity var(--animation-default-half);
  opacity: 0;
}

/* min-height:0 as well as overflow: a grid item defaults to min-height:auto
   and will not shrink below its content, so 0fr still left the paragraph's
   padding showing as a 16px sliver. */
.region-strip__reveal > * {
  overflow: hidden;
  min-height: 0;
}

.region-strip__inner:hover .region-strip__reveal,
.region-strip__inner:focus-within .region-strip__reveal {
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
}

.region-strip__text {
  margin: 0;
  padding-bottom: var(--space-05);
  max-width: calc(578 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.0067em;
}

/* No pointer to hover with: leave the blurb open rather than unreachable. */
@media (hover: none) {
  .region-strip__reveal {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
  }
}

.region-strip__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: stretch;
  padding-right: var(--space-09);
}

.region-strip__buttons {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
}

.region-strip__region {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(40 * var(--px));
  padding: calc(10 * var(--px)) var(--space-05);
  border-radius: var(--radius-s);
  background-color: color-mix(in srgb, var(--brand-silver) 15%, transparent);
  color: var(--color-text-light);
  font-size: calc(16 * var(--px));
  font-weight: 630;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--animation-default-half),
    color var(--animation-default-half),
    border-radius var(--animation-default-half);
}

.region-strip__region:hover {
  background-color: color-mix(in srgb, var(--brand-silver) 28%, transparent);
}

/* Chosen: a silver pill with charcoal ink. */
.region-strip__region[aria-current="true"] {
  border-radius: calc(20 * var(--px));
  background-color: var(--brand-silver);
  color: var(--color-text-dark);
}

/* ---- go ---- */
.region-strip__go {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  color: var(--color-text-light);
}

.region-strip__go[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}

/* The fill is its own element so it can morph on hover without moving the
   arrow. Deliberately NOT .brand-shape: that class is the Enquire cap and
   carries pseudo-element fills that paint accent over anything set here. */
.region-strip__go-shape {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--brand-silver) 15%, transparent);
  transition:
    background-color var(--animation-default-half),
    border-radius var(--animation-default-half);
}

.region-strip__go:not([aria-disabled="true"]) .region-strip__go-shape {
  background-color: var(--color-accent);
}

.region-strip__go:not([aria-disabled="true"]):hover .region-strip__go-shape {
  border-radius: var(--radius-full) var(--radius-full) calc(6 * var(--px)) calc(6 * var(--px));
}

.region-strip__go:not([aria-disabled="true"]) { color: var(--brand-charcoal); }

.region-strip__go-icon {
  position: relative;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
}

/* ---- close ---- */
.region-strip__close {
  position: absolute;
  top: var(--space-05b);
  right: var(--space-05b);
  display: grid;
  place-items: center;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--brand-silver) 60%, transparent);
  cursor: pointer;
  transition: color var(--animation-default-half);
}

.region-strip__close:hover { color: var(--color-text-light); }
.region-strip__close svg { width: 100%; height: 100%; }

/* Dismissed for this visit. */
.region-strip[hidden] { display: none; }

@media screen and (max-width: 991px) {
  .region-strip {
    width: auto;
    left: var(--container-padding);
    right: var(--container-padding);
    translate: none;
    max-width: none;
  }

  .region-strip__inner {
    flex-direction: column;
    gap: var(--space-05);
    padding: var(--space-05b);
  }

  .region-strip__heading {
    height: auto;
    padding-right: var(--space-07);
    font-size: calc(18 * var(--px));
  }

  .region-strip__text { padding-bottom: 0; }

  .region-strip__actions {
    align-items: stretch;
    align-self: auto;
    width: 100%;
    padding-right: 0;
  }

  .region-strip__buttons { justify-content: space-between; }

  .region-strip__region { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .region-strip__region,
  .region-strip__go-shape,
  .region-strip__reveal { transition: none; }
}