/* ============================================================
   The Settlement Space — homepage recreation
   Fonts: ivyora-text (headings + italic accents, via Typekit),
          Noto Sans (nav / body / UI, via Google Fonts)
   ============================================================ */

:root {
  --white: #f9f7f0;
  --gray: #646054;
  --blue: #4397d6;
  --dark-gray: #3f403b;
  --yellow: #f7d252;
  --dark-yellow: #ecba0e;
  --button-black: #031121;
  --dark-tan: #eee8db;
  --black: #25231a;
  --light-blue: #a4c6d4;
  --footer-blue: #03344f;
  --radius: 12px;
  /* Shared sitewide layout: nav, section, and footer all resolve to this
     same max width + gutter, so their outer edges align at wide viewports. */
  --container: 1500px;
  --gutter: 1.25em;

  /* ---------- Typography system ---------- */
  --font-display: 'ivyora-text', Georgia, serif;
  --font-body: 'Noto Sans', Arial, sans-serif;

  --h1-size: clamp(50px, 31px + 4.6vw, 115px);
  --h1-weight: 300;
  --h1-leading: 0.92;
  --h1-tracking: -0.6px;

  --h2-size: clamp(40px, 29px + 2.8vw, 75px);
  --h2-weight: 300;
  --h2-leading: 1.1;
  --h2-tracking: -0.2px;

  --h3-size: clamp(35px, 27px + 1.8vw, 52px);
  --h3-weight: 300;
  --h3-leading: 0.98;
  --h3-tracking: -0.2px;

  --h4-size: clamp(31px, 25px + 1.4vw, 42px);
  --h4-weight: 300;
  --h4-leading: 1;
  --h4-tracking: -0.2px;

  --h5-size: clamp(27px, 22px + 1.1vw, 36px);
  --h5-weight: 300;
  --h5-leading: 1.05;
  --h5-tracking: -0.2px;

  --h6-size: clamp(22px, 20px + 0.5vw, 27px);
  --h6-weight: 400;
  --h6-leading: 1.15;
  --h6-tracking: 0px;

  /* Shared weight scale: body copy uses regular; nav/button/label
     components opt into semibold explicitly; bold stays available
     for intentional emphasis (e.g. <strong>). */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-weight: var(--font-weight-regular);
  /* shared weight for body copy across the page */

  --text-lg-size: 21px;
  --text-lg-leading: 1.5;

  --text-base-size: 19px;
  --text-base-leading: 1.5;

  --text-sm-size: 18px;
  --text-sm-leading: 1.5;

  --text-xs-size: 16px;
  --text-xs-leading: 1.4;

  /* ---------- Spacing scale (fixed px, ordered smallest to largest) ----------
     Every margin/padding/gap in this file resolves to one of these 12
     steps. Values were chosen by mapping each rule's previous rendered
     spacing to the nearest step on this scale. */
  --space-2xs: 8px;
  --space-xs: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xl: 64px;
  --space-2xl: 80px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 160px;
  --space-6xl: 192px;
  --space-7xl: 256px;

  /* ---------- Entrance animation system ----------
     Every delay below is derived from the one before it (heading → para →
     cta) via calc(), so changing a duration keeps the whole sequence in
     sync instead of relying on separately hand-tuned delays. */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Quick, snappy feedback — hover states on buttons/links, and the
     glass-card hover lift (kept separate from its own slower entrance). */
  --hover-dur: 400ms;
  /* Accordion expand/collapse, modal open/close and the mobile-menu
     flyout (including its trigger icon's morph). */
  --control-dur: 400ms;

  /* Entrance durations below are ~20% shorter than their original pass-1
     values (900/1600/1300/1200/1500/1200/1500/600/1100/700ms). Distances,
     blur strength and easing are unchanged; conversation-bubble duration/
     stagger are intentionally left out of this cut (not part of the
     tag/heading/para/image/card/form/CTA/quote-box list). */
  --reveal-tag-dur: 720ms;
  --reveal-tag-dist: 12px;

  --reveal-heading-dur: 1280ms;
  --reveal-heading-delay: 100ms;
  --reveal-heading-dist: 20px;
  --reveal-heading-blur: 16px;

  --reveal-para-dur: 1040ms;
  --reveal-para-delay: calc(var(--reveal-heading-delay) + (var(--reveal-heading-dur) * 0.78));
  --reveal-para-dist: 16px;

  --reveal-cta-dur: 960ms;
  --reveal-cta-delay: calc(var(--reveal-para-delay) + 100ms);
  --reveal-cta-dist: 12px;

  --reveal-media-dur: 1200ms;
  --reveal-media-dist: 16px;

  --reveal-glass-dur: 960ms;
  --reveal-glass-dist: 12px;

  --reveal-item-dur: 1200ms;
  --reveal-item-dist: 16px;
  --reveal-item-stagger: 180ms;
  /* Numbered steps, values rows and FAQ items move a shorter 12px rather
     than the 16px cards use. */
  --reveal-list-dist: 12px;

  --reveal-bubble-dur: 1500ms;
  --reveal-bubble-dist: 12px;
  --reveal-bubble-stagger: 80ms;

  /* Fiona testimonial quote-card's internal icon/text/attribution steps —
     chained via JS (see [data-reveal-seq] below), each shorter than the
     shared media/para durations since they're small follow-on beats. */
  --reveal-quote-icon-dur: 480ms;
  --reveal-quote-text-dur: 880ms;
  --reveal-attribution-dur: 560ms;

  /* Footer brand/Explore/Locations/bottom — each revealed as a single
     unit (no internal stagger) by the JS footer sequence. */
  --reveal-footer-dur: 900ms;
}

/* ============================================================
   ENTRANCE ANIMATION SYSTEM
   - [data-reveal="tag|heading|para|cta|media|glass"] sits inside a
     [data-reveal-group] (scroll-triggered) or [data-reveal-hero] (fires
     on load). All elements inside one group reveal at the same moment;
     their individual transition-delay staggers the visible sequence.
   - [data-reveal-item="card|list|bubble"] is observed individually (used
     for cards/list rows/bubbles so long lists reveal as each item scrolls
     into view, not all at once with the section).
   - Elements are fully visible by default. The hidden starting state only
     applies once html.js is present (script.js ran) AND the visitor has
     no motion-reduction preference, so content stays visible with no JS
     and is never hidden from reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-item-dist));
    transition: opacity 500ms var(--ease-out-soft), transform 500ms var(--ease-out-soft), filter 500ms var(--ease-out-soft);
  }

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

  html.js [data-reveal="tag"] {
    transform: translateY(var(--reveal-tag-dist));
    transition-duration: var(--reveal-tag-dur);
    transition-delay: 0ms;
  }

  html.js [data-reveal="heading"] {
    transform: translateY(var(--reveal-heading-dist));
    filter: blur(var(--reveal-heading-blur));
    transition-duration: var(--reveal-heading-dur);
    transition-delay: var(--reveal-heading-delay);
  }

  html.js [data-reveal="para"] {
    transform: translateY(var(--reveal-para-dist));
    transition-duration: var(--reveal-para-dur);
    transition-delay: var(--reveal-para-delay);
  }

  html.js [data-reveal="cta"] {
    transform: translateY(var(--reveal-cta-dist));
    transition-duration: var(--reveal-cta-dur);
    transition-delay: var(--reveal-cta-delay);
  }

  html.js [data-reveal="media"] {
    transform: translateY(var(--reveal-media-dist));
    transition-duration: var(--reveal-media-dur);
    transition-delay: var(--reveal-para-delay);
  }

  html.js [data-reveal="glass"] {
    transform: translateY(var(--reveal-glass-dist));
    transition-duration: var(--reveal-glass-dur);
    transition-delay: 0ms;
  }

  /* .consult-cta's own hover-lift rule (further down) also animates
     `transform` on this same element; the rule above otherwise wins the
     cascade (higher specificity) and leaves the hover lift running at the
     slow entrance duration. Scoping the fix to :hover keeps it from
     affecting the entrance itself. Harmless no-op for opacity/filter,
     which aren't changing while hovered. */
  html.js [data-reveal="glass"]:hover {
    transition-duration: var(--hover-dur);
  }

  html.js [data-reveal-item] {
    opacity: 0;
    transform: translateY(var(--reveal-item-dist));
    transition: opacity var(--reveal-item-dur) var(--ease-out-soft), transform var(--reveal-item-dur) var(--ease-out-soft);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-item-stagger));
  }

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

  html.js [data-reveal-item="list"] {
    transform: translateY(var(--reveal-list-dist));
  }

  /* Bubble groups already carry their own translateX positioning (via
     --bubble-shift-x, set alongside .conversation-bubble-group-1/2 below);
     composing it into both states here keeps that offset from being
     overwritten by the generic transform:none above. */
  html.js [data-reveal-item="bubble"] {
    transform: translateX(var(--bubble-shift-x, 0)) translateY(var(--reveal-bubble-dist));
    transition-duration: var(--reveal-bubble-dur);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-bubble-stagger));
  }

  html.js [data-reveal-item="bubble"].is-revealed {
    transform: translateX(var(--bubble-shift-x, 0));
  }

  html.js [data-reveal="quote-icon"] {
    transition-duration: var(--reveal-quote-icon-dur);
  }

  html.js [data-reveal="quote-text"] {
    transition-duration: var(--reveal-quote-text-dur);
  }

  html.js [data-reveal="attribution"] {
    transition-duration: var(--reveal-attribution-dur);
  }

  html.js [data-reveal="footer-group"] {
    transition-duration: var(--reveal-footer-dur);
  }

  /* .quote-icon and .t-attribution carry their own permanent decorative
     filter/opacity outside the entrance system; the generic .is-revealed
     rule above would otherwise reset filter to none / opacity to 1 and
     wipe those out once revealed. */
  html.js [data-reveal="quote-icon"].is-revealed {
    filter: brightness(0) invert(1);
  }

  html.js [data-reveal="attribution"].is-revealed {
    opacity: 0.85;
  }

  /* [data-reveal-seq] marks elements whose reveal timing is driven
     explicitly by script.js's sequencing chains (home hero, inner-page
     hero-extra gating, the Fiona quote chain, conversation bubbles and
     CTA forms) rather than the generic group cascade's delay stagger —
     their CSS delay is reset to 0 so the transition starts the instant JS
     adds .is-revealed, at whatever real time the sequence decides.
     Scoped to [data-reveal] specifically so it never touches
     [data-reveal-item="bubble"]'s own --reveal-i stagger delay, which
     must still apply once the bubble sequence starts a group of bubbles
     together. */
  html.js [data-reveal][data-reveal-seq] {
    transition-delay: 0ms;
  }

  /* Hero/hero-extra headings have no preceding tag, so their sequence
     starts at the heading instead of 100ms after a tag. */
  .hero-inner,
  .hero-extra {
    --reveal-heading-delay: 0ms;
  }

  /* Standalone media with no tag, heading or paragraph of its own reveals
     promptly instead of inheriting another section's paragraph delay. */
  .fiona-wide-section {
    --reveal-para-delay: 0ms;
  }

  /* Bottom contact CTA (Home/About/Meet Fiona/FAQs only — not the
     Contact page's own intro, which keeps the sitewide durations):
     scoped override so this one copy group runs faster than the rest of
     the site. --reveal-para-delay's 78%-of-heading calc in :root still
     applies, just resolved against this shorter --reveal-heading-dur. */
  .contact-cta-copy {
    --reveal-tag-dur: 500ms;
    --reveal-heading-dur: 850ms;
    --reveal-para-dur: 700ms;
  }

  /* The form itself reuses the shared --reveal-cta-dur slot but with its
     own faster value, scoped to just this form. */
  .contact-cta-panel > form[data-reveal-seq] {
    --reveal-cta-dur: 650ms;
  }

  /* Stagger index for list-like groups (cards, numbered rows, FAQ items):
     assigns --reveal-i via nth-child so items further down the reading
     order reveal slightly later. */
  .reveal-stagger>[data-reveal-item]:nth-child(1) { --reveal-i: 0; }
  .reveal-stagger>[data-reveal-item]:nth-child(2) { --reveal-i: 1; }
  .reveal-stagger>[data-reveal-item]:nth-child(3) { --reveal-i: 2; }
  .reveal-stagger>[data-reveal-item]:nth-child(4) { --reveal-i: 3; }
  .reveal-stagger>[data-reveal-item]:nth-child(5) { --reveal-i: 4; }
  .reveal-stagger>[data-reveal-item]:nth-child(6) { --reveal-i: 5; }
  .reveal-stagger>[data-reveal-item]:nth-child(7) { --reveal-i: 6; }

  /* Conversation bubble groups carry their own reading-order index via
     their existing group-1/group-2 classes rather than nth-child, since
     the decorative orb div shares their parent. */
  .conversation-bubble-group-1 { --reveal-i: 0; }
  .conversation-bubble-group-2 { --reveal-i: 1; }
}

/* Keyboard focus must reveal a still-hidden element immediately, even
   mid-transition, so focus never lands on something invisible. */
html.js [data-reveal]:focus-within,
html.js [data-reveal-item]:focus-within {
  opacity: 1;
  /* translateX(0) is a no-op for every element except bubble groups,
     where it preserves their --bubble-shift-x positioning instead of
     wiping it the way transform: none would. */
  transform: translateX(var(--bubble-shift-x, 0));
  filter: none;
  transition-delay: 0ms;
}

/* Remaining decorative (non-entrance) movement: hover arrow slides, the
   glass-card lift and underline sweeps all still provide their end-state
   feedback under reduced motion, just without the motion itself —
   entrance hiding is handled separately above. */
@media (prefers-reduced-motion: reduce) {
  .btn::after,
  .consult-cta,
  .nav-link,
  .footer-link,
  .footer-link span,
  .footer-bottom a {
    transition: none;
  }

  .consult-cta:hover {
    transform: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 120%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--gray);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  overflow-x: hidden;
}

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

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

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin: 0 auto;
  padding: var(--space-3xl) 0;
}

em {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}

/* ---------- Typography scale ----------
   Headings (h1–h6): visual styles, independent of the HTML tag they're
   applied to — pick the tag for document structure, the class for look. */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-display);
  margin: 0;
}

.h1 {
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
}

.h2 {
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
}

.h3 {
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  letter-spacing: var(--h3-tracking);
}

.h4 {
  font-weight: var(--h4-weight);
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
  letter-spacing: var(--h4-tracking);
}

.h5 {
  font-weight: var(--h5-weight);
  font-size: var(--h5-size);
  line-height: var(--h5-leading);
  letter-spacing: var(--h5-tracking);
}

.h6 {
  font-weight: var(--h6-weight);
  font-size: var(--h6-size);
  line-height: var(--h6-leading);
  letter-spacing: var(--h6-tracking);
}

/* Body copy: Large / Regular / Small / Extra small */
.text-lg,
.text-base,
.text-sm,
.text-xs {
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  margin: 0;
}

.text-lg {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-leading);
}

.text-base {
  font-size: var(--text-base-size);
  line-height: var(--text-base-leading);
}

.text-sm {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-leading);
}

.text-xs {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-leading);
}

/* Labels: small uppercase-weight tags/eyebrows, built on the xs step */
.label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs-size);
  line-height: 1;
  letter-spacing: 0.2px;
}

/* Large statistic figures (stat cards, numbered steps) */
.stat-figure {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
}

.section-copy {
  max-width: 34em;
}

.copy-link {
  color: var(--gray);
  text-underline-offset: 2px;
  transition: color var(--hover-dur) ease;
}

.copy-link:hover,
.copy-link:focus-visible {
  color: var(--footer-blue);
}

.copy-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tag {
  display: inline-block;
  background: var(--white);
  color: var(--gray);
  padding: var(--space-xs) var(--space-sm) var(--space-xs);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(247, 210, 82, 0.55);
  margin-bottom: var(--space-md);
  border: none;
}

.tag-transparent {
  background: transparent;
  color: var(--white);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.55);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: var(--button-black);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm-size);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  transition: all var(--hover-dur) cubic-bezier(.165, .84, .44, 1);
  white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--dark-yellow);
  background: var(--dark-yellow);
  box-shadow: 0 0 24px 8px rgba(247, 210, 82, 0.55);
}

.btn::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 13px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13'%3E%3Cpath d='M9.67468 5.52128L0.75879 5.52128L0.75879 6.811L9.67468 6.811C11.1326 6.811 12.142 6.44651 13.5438 6.44651L13.5438 6.53063C10.7681 7.98857 9.56253 9.61474 8.6373 11.1568L9.73076 12.1661C11.1046 9.69885 12.7308 7.90446 15.5345 6.53063L15.5345 5.82969C12.7308 4.45586 11.1046 2.63343 9.73076 0.166139L8.6373 1.20352C9.56253 2.71754 10.7681 4.34371 13.5438 5.80165L13.5438 5.88577C12.142 5.88577 11.1326 5.52128 9.67468 5.52128Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13'%3E%3Cpath d='M9.67468 5.52128L0.75879 5.52128L0.75879 6.811L9.67468 6.811C11.1326 6.811 12.142 6.44651 13.5438 6.44651L13.5438 6.53063C10.7681 7.98857 9.56253 9.61474 8.6373 11.1568L9.73076 12.1661C11.1046 9.69885 12.7308 7.90446 15.5345 6.53063L15.5345 5.82969C12.7308 4.45586 11.1046 2.63343 9.73076 0.166139L8.6373 1.20352C9.56253 2.71754 10.7681 4.34371 13.5438 5.80165L13.5438 5.88577C12.142 5.88577 11.1326 5.52128 9.67468 5.52128Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--hover-dur) cubic-bezier(.165, .84, .44, 1);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(4px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 1.25em;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--container);
  z-index: 100;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 10px;
  color: var(--gray);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 48px -28px rgba(10, 20, 35, 0.35), 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
}

.logo-link {
  color: inherit;
  display: flex;
  align-items: center;
}

.logo-mark {
  height: 2.35em;
  width: auto;
  color: inherit;
}

.header-nav {
  display: flex;
  gap: var(--space-lg);
}

.nav-link {
  position: relative;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg-size);
  /* Animated left-to-right underline, matching .footer-link's treatment.
     Sized against the link's own (text-tight, since .nav-link has no
     explicit display/icon) box, so it only ever spans the link text. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  transition: background-size var(--hover-dur) var(--ease-out-soft), color var(--hover-dur) ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  opacity: 1;
  color: var(--footer-blue);
  background-size: 100% 2px;
}

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

.header-cta {
  padding: var(--space-xs) var(--space-sm);
}

.nav-trigger {
  display: none;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: inherit;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm-size);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm) var(--space-sm);
}

.mobile-nav-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base-size);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-nav-link[aria-current="page"] {
  color: var(--footer-blue);
}

.mobile-cta {
  margin-top: var(--space-xs);
  text-align: center;
  justify-content: center;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* overflow: clip (not hidden — nothing here needs to scroll), with a
     24px overflow-clip-margin, gives the heading's reveal blur filter
     room to bleed past the section edge before being clipped, so the
     larger reveal blur doesn't visibly cut off near hero edges on narrow
     viewports. That same leniency would also let .hero-orb (sized well
     past the section bounds) bleed 24px into whatever follows, so the
     orb is clipped tightly by its own .hero-orb-layer wrapper instead —
     this outer overflow-clip-margin now only ever applies to the heading
     blur, purely a paint-time allowance with no layout effect. */
  overflow: clip;
  overflow-clip-margin: 24px;
  background: var(--blue);
  color: var(--white);
  margin: 0 auto;
  padding: var(--space-6xl) 0 var(--space-4xl);
  text-align: center;
}

/* Tight, zero-margin clip exactly at the hero's own edges so the orb can
   never spill into the next section or the footer, independent of the
   hero's own lenient overflow-clip-margin above. */
.hero-orb-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80em;
  height: 80em;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, #ff3c06 10%, #ff8100 50%, #ffb202 55%, #cbb26a 75%, transparent 88%);
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 600px) {
  /* Home-only (.hero-orb-about is the inner-page variant) resting
     position — also the reduced-motion/no-JS fallback below, and (since
     the keyframes below only define `from`) the animation's implicit
     end state. Was mistakenly -100%, pushing the orb fully off the top
     of the hero both at rest and once the intro animation finished. */
  .hero-orb:not(.hero-orb-about) {
    top: 0%;
  }
}

/* Home hero orb's page-load drift: plays once on its own, independent of
   the heading/copy reveal sequence above and of any scroll trigger, so it
   starts moving the instant the page paints. html.js is set by a
   synchronous inline script at the top of <head> (see <script> before
   </head>), so gating on it — same technique as the reveal system above —
   costs no real delay while still leaving a static final position with no
   JS or under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-orb:not(.hero-orb-about) {
    animation: hero-orb-intro 16s var(--ease-out-soft) both;
  }

  @keyframes hero-orb-intro {
    from {
      top: 0%;
    }
  }

  @media (max-width: 600px) {
    @keyframes hero-orb-intro {
      from {
        top: -20%;
      }
    }
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* Matches .hero-extra's gutter-aware width below — without it, the
     hero copy's own max-width (35em) stops constraining on narrow phones
     and the text runs edge-to-edge with no side padding. */
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin: 0 auto var(--space-3xl);
}

.hero-orb-about {
  background: radial-gradient(circle, #90b6d3 10%, #4397d6 50%, #4397d6 55%, #4397d6 75%, transparent 88%);
  transform: translate(0%, -50%);
}

.inner-page .hero-inner {
  margin: 0 auto var(--space-2xl);
}

.inner-page .hero {
  padding-bottom: var(--space-4xl);
}

.hero-breadcrumb {
  font-size: var(--text-xs-size);
  color: rgba(255, 255, 255, 0.75);
  margin: 0 auto var(--space-sm);
}

.hero-breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.hero-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 10px;
  margin: 0 var(--space-2xs);
}

.hero-heading {
  max-width: 17em;
  margin: 0 auto var(--space-xl);
}

.hero-copy {
  max-width: 35em;
  opacity: 0.92;
  margin: 0 auto var(--space-md);
}

.fiona-wide-media {
  position: relative;
  background: var(--white);
}

.fiona-wide-section {
  position: relative;
  padding:0;
}

.fiona-wide-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 0;
  pointer-events: none;
}

/* Split position adjustable independently of the image: change this
   flex-basis to move the blue/sand divide up or down. */
.fiona-wide-backdrop-top {
  flex: 0 0 var(--fiona-wide-split, 50%);
  background: var(--blue);
}

.fiona-wide-backdrop-bottom {
  flex: 1 1 auto;
  background: var(--white);
}

.fiona-wide-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}

.consult-cta {
  position: relative;
  z-index: 1;
  width: min(calc(100% - (var(--gutter) * 2)), 1000px);
  height: 140px;
  margin: var(--space-xl) auto 0;
  display: flex;
  align-items: stretch;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07) 55%, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  box-shadow:
    0 24px 48px -28px rgba(10, 20, 35, 0.35),
    0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  text-align: left;
  transition: transform var(--hover-dur) var(--ease-out-soft);
  /* Without an upfront compositing hint, the browser doesn't promote this
     backdrop-filter to its own layer until the entrance transition is
     already underway, so the saturate boost only starts sampling partway
     through the opacity/transform fade and appears to snap in rather than
     ease in with it. will-change forces that promotion before the reveal
     ever starts, so backdrop-filter is already live (at its one constant
     value, see above) and simply fades in smoothly with the rest of the
     card's opacity. */
  will-change: opacity, transform, backdrop-filter;
}

/* Soft highlight sweep: parked off to the left with an instant (0s)
   transition, so it snaps back between hovers; the hover rule below gives
   it a slow transition so it only ever sweeps once per hover-in. */
.consult-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0s;
}

@media (hover: hover) and (pointer: fine) {
  .consult-cta:hover {
    transform: translateY(-3px);
  }

  .consult-cta:hover::after {
    transform: translateX(120%);
    transition: transform 3s var(--ease-out-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .consult-cta::after {
    display: none;
  }
}

.consult-cta-image {
  flex: 0 0 20%;
  height: 100%;
  overflow: hidden;
}

.consult-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.consult-cta-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}

.consult-cta-heading {
  flex: 1 1 auto;
  color: var(--white);
  font-size: clamp(26px, 22px + 0.6vw, 30px);
  line-height: 1.25;
}

.consult-cta-btn {
  flex: 0 0 auto;
}

.hero-extra {
  position: relative;
  z-index: 1;
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin: var(--space-xl) auto 0;
  text-align: left;
}

.hero-extra-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: var(--space-4xl);
}

.inner-page .hero-extra-divider {
  margin-bottom: var(--space-2xl);
}

.hero-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.hero-extra-heading {
  color: var(--white);
}

.hero-extra-copy {
  color: var(--white);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg-size);
  line-height: var(--text-base-leading);
}

.hero-extra-copy-group .hero-extra-copy+.hero-extra-copy {
  margin-top: var(--space-xs);
}

/* ============================================================
   CONTACT PAGE — intro grid (left contact column + inline form,
   both sharing .hero-extra-grid's layout/responsive behaviour)
   ============================================================ */
.contact-intro-grid {
  align-items: center;
}

.contact-intro-copy {
  display: flex;
  flex-direction: column;
}

.contact-intro-text {
  margin-top: var(--space-sm);
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}

/* ============================================================
   LOGO MARQUEE
   ============================================================ */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee-list {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding-right: var(--space-2xl);
}

.marquee-list img {
  height: 4.4em;
  width: auto;
  opacity: 0.7;
  filter: grayscale(15%);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

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

/* ---------- Accreditation panel (feature-media variant: logo marquee over a stationary blue/orb backdrop) ---------- */
.accreditation-panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  background: var(--blue);
  overflow: hidden;
}

.accreditation-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(48px);
  background: radial-gradient(circle, #90b6d3 10%, #4397d6 50%, #4397d6 55%, #4397d6 75%, transparent 88%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.accreditation-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
}

.accreditation-marquee .marquee-list {
  gap: var(--space-2xl);
  padding-right: var(--space-2xl);
}

.accreditation-marquee .marquee-list img {
  width: auto;
  flex: 0 0 auto;
  opacity: 0.92;
  filter: brightness(0) invert(1);
}

/* Each mark's viewBox carries a different amount of empty padding around its
   ink, so a single shared height makes some logos (e.g. the Family Law
   Section/Law Council lockup, ~17% vertical + ~7% horizontal padding) look
   smaller than edge-to-edge marks like Doyle's. Sizes below are tuned per
   logo so the visible artwork — not the SVG box — reads at a matching scale,
   with the FLSC mark's own margins tightened to absorb its internal padding. */
.accreditation-logo-doyles {
  height: 3em;
}

.accreditation-logo-aiflam {
  height: 3em;
}

.accreditation-logo-amdras {
  height: 3em;
}

.accreditation-logo-flsc {
  height: 3.6em;
  margin-left: -0.7em;
  margin-right: -0.75em;
}

@media (max-width: 991px) {
  .accreditation-panel {
    min-height: 220px;
  }

  .accreditation-marquee .marquee-list {
    gap: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .accreditation-logo-doyles,
  .accreditation-logo-aiflam,
  .accreditation-logo-amdras {
    height: 2.1em;
  }

  .accreditation-logo-flsc {
    height: 2.52em;
    margin-left: -0.49em;
    margin-right: -0.53em;
  }
}

/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro-section {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 var(--space-4xl);
}

.intro-section .section-copy {
  margin: var(--space-md) auto 0;
  text-align: center;
}

.value-cards {
  width: 100%;
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: left;
  container-type: inline-size;
  container-name: value-cards;
  --value-cards-n: 4;
  --value-cards-total: 4;
  --value-cards-gap: var(--space-md);
  --value-card-height: 280px;
}

.value-card {
  --value-cards-i: 0;
  background: var(--dark-tan);
  background-image: linear-gradient(to right,
      #ff3c06 0%,
      #ff8100 25%,
      #ffb202 50%,
      #cbb26a 75%,
      #4397d6 100%);
  background-repeat: no-repeat;
  background-size: 100cqw 100%;
  background-position: calc(-1 * var(--value-cards-i) * (((100cqw - (var(--value-cards-n) - 1) * var(--value-cards-gap)) / var(--value-cards-n)) + var(--value-cards-gap))) 0;
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  min-height: var(--value-card-height);
  display: flex;
  flex-direction: column;
}

.value-card:nth-child(1) {
  --value-cards-i: 0;
}

.value-card:nth-child(2) {
  --value-cards-i: 1;
}

.value-card:nth-child(3) {
  --value-cards-i: 2;
}

.value-card:nth-child(4) {
  --value-cards-i: 3;
}

.value-card-icon {
  width: 4em;
  height: 4em;
  flex-shrink: 0;
}

.value-card-text {
  margin-top: var(--space-xl);
}

.value-card-heading {
  margin-bottom: var(--space-sm);
}

.value-card-heading,
.value-card-copy {
  color: var(--white);
}

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  /* Copy is vertically centred against the media column (which keeps its
     own full-height sizing via align-self: stretch below) rather than
     stretching to match it, so short text doesn't sit pinned to the top. */
  align-items: center;
  padding: var(--space-5xl) 0 var(--space-4xl);
}

.feature-row.reverse .feature-copy {
  order: 2;
}

.feature-row.reverse .feature-media {
  order: 1;
}

.feature-copy h3 {
  margin-bottom: var(--space-md);
}

.feature-copy .section-copy+.section-copy {
  margin-top: var(--space-xs);
}

.feature-copy .section-copy+.check-list {
  margin-top: var(--space-md);
}

.check-list li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: var(--text-base-size);
  line-height: var(--text-base-leading);
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: rgba(100, 96, 84, 0.18);
}

.check-list li::after {
  content: '';
  position: absolute;
  left: 0.28em;
  top: 0.42em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--gray);
  border-bottom: 2px solid var(--gray);
  transform: rotate(-45deg);
}

.feature-media {
  border-radius: var(--radius);
  overflow: hidden;
  /* Preserves its previous full-row height now that the row no longer
     stretches both columns by default. */
  align-self: stretch;
}

.feature-media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Conversation visual (reusable feature-media component) ---------- */
.conversation-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: var(--blue);
}

.conversation-orb {
  position: absolute;
  top: 75%;
  left: 100%;
  width: 85%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(48px);
  background: radial-gradient(circle, #ff3c06 10%, #ff8100 50%, #ffb202 55%, #cbb26a 75%, transparent 88%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* --bubble-shift-x drives the positioning transform so the entrance
   system (which also animates transform) can compose with it below
   instead of overwriting it. */
.conversation-bubble-group {
  position: relative;
  z-index: 1;
  max-width: 92%;
  transform: translateX(var(--bubble-shift-x, 0));
}

.conversation-bubble-group-1 {
  --bubble-shift-x: -4%;
}

.conversation-bubble-group-2 {
  --bubble-shift-x: 4%;
}

.conversation-bubble {
  position: relative;
  z-index: 2;
  display: inline-block;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07) 55%, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-bottom-color: rgb(255 255 255 / 21%);
  box-shadow: 0 24px 48px -28px rgba(10, 20, 35, 0.35), 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  /* See .consult-cta's own will-change comment: this bubble's backdrop
     blur sits inside its [data-reveal-item="bubble"] group, whose own
     opacity/transform fade otherwise promotes this layer too late for
     the saturate boost to ease in with it. */
  will-change: backdrop-filter;
}

.conversation-message {
  color: var(--white);
  margin: 0;
}

.conversation-message + .conversation-message {
  margin-top: var(--space-sm);
}

.feature-row--numbered-list .conversation-orb {
  transform: translate(-170%, -55%);
}

.feature-row--numbered-list .conversation-bubble-2 {
  max-width: 468px;
  transform: translateX(-3%);
}

.feature-row--numbered-list .conversation-bubble-group-2 .conversation-icon{
  right: -26px;
}

.conversation-icon {
  position: absolute;
  z-index: 3;
  bottom: -4.8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07) 55%, rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 2px solid rgba(255, 255, 255, 0.37);
  border-top-color: rgba(255, 255, 255, 0.459);
  border-bottom-color: rgb(255 255 255 / 21%);
  box-shadow: 0 24px 48px -28px rgba(10, 20, 35, 0.35), 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  /* See .consult-cta's will-change comment. */
  will-change: backdrop-filter;
}

.conversation-bubble-group-1 .conversation-icon {
  left: -40px;
}

.conversation-bubble-group-2 .conversation-icon {
  right: -40px;
}

.conversation-icon-user {
  background: transparent;
  overflow: hidden;
}

.conversation-icon-user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conversation-icon-brand {
  background: transparent;
  overflow: hidden;
}

.conversation-icon-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  .conversation-bubble-1 {
    max-width: 330px;
  }

  .conversation-bubble-2 {
    max-width: 330px;
  }
}

@media (max-width: 991px) {
  .conversation-visual {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .conversation-bubble-group {
    max-width: 88%;
  }
}

/* ---------- Numbered list (feature-media variant: feature-row--numbered-list) ---------- */
.feature-row--numbered-list {
  padding: 0 0 var(--space-4xl);
}

.feature-row--numbered-list .numbered-list {
  margin-top: var(--space-xs);
}

.numbered-list-items {
  width: 100%;
}

.numbered-list-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: var(--space-sm) 0;
  border-bottom: var(--dark-tan) 1px solid;
}

.numbered-list-circle {
  color: var(--gray);
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg-size);
  opacity: 0.85;
}

.numbered-list-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: 24px;
  line-height: 1.2;
  color: var(--gray);
}

@media (max-width: 991px) {
  .numbered-list-item {
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
  }

  .numbered-list-label {
    font-size: 22px;
  }
}

/* ============================================================
   MEDIATION APPROACH (fiona.html — standalone component, not shared)
   ============================================================ */
.mediation-approach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  /* Copy is vertically centred against the media column (which keeps its
     own full-height sizing via align-self: stretch below) rather than
     stretching to match it, so short text doesn't sit pinned to the top. */
  align-items: center;
  padding: 0 0 var(--space-4xl);
}

.mediation-approach__copy h3 {
  margin-bottom: var(--space-md);
}

.mediation-approach__media {
  border-radius: var(--radius);
  overflow: hidden;
  /* Preserves its previous full-row height now that the row no longer
     stretches both columns by default. */
  align-self: stretch;
}

.mediation-approach__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (max-width: 991px) {
  .mediation-approach {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Media comes first in the markup (desktop's left column), but stacked
     on mobile/tablet the copy should read before the photo. */
  .mediation-approach__copy {
    order: 1;
  }

  .mediation-approach__media {
    order: 2;
    aspect-ratio: 1 / 1;
  }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section {
  text-align: center;
  padding: var(--space-4xl) 0 0;
}

.testimonials-heading {
  margin-bottom: var(--space-3xl);
}

.testimonial-panels {
  position: relative;
}

.testimonial-panel {
  display: none;
  grid-template-columns: 0.75fr 1.5fr;
  gap: var(--space-sm);
}

.testimonial-panel.is-active {
  display: grid;
}

.testimonial-portrait {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
}

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

.testimonial-quote-card {
  border-radius: var(--radius);
  background: var(--light-blue) url('../Images/testimonials/quote-bg.webp') center/cover no-repeat;
  color: var(--white);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 320px;
  text-align: left;
}

.quote-icon {
  width: 2.2em;
  margin-bottom: var(--space-xs);
  filter: brightness(0) invert(1);
}

.t-quote {
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.35;
  margin: 0;
}

.t-attribution {
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: var(--text-base-size);
  line-height: var(--text-base-leading);
  opacity: 0.85;
  margin: 0;
}

/* ============================================================
   RESULTS (blue panel)
   ============================================================ */
.values-section-outer {
  position: relative;
  background: var(--white);
  padding-bottom: var(--space-md);
}

.values-section {
  padding: 0;
  position: relative;
}

.values-backdrop-split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 0;
  pointer-events: none;
}

.values-backdrop-top {
  flex: 1 1 0;
  background: var(--blue);
}

.values-backdrop-bottom {
  flex: 1 1 0;
  background: var(--white);
}

.values-panel {
  position: relative;
  z-index: 1;
  background: var(--dark-tan);
  color: var(--gray);
  border-radius: 16px;
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.values-tag {
  margin-bottom: var(--space-md);
  color: var(--gray);
  border-color: rgba(100, 96, 84, 0.35);
  box-shadow: none;
  box-shadow: 0 0 20px rgb(109 58 1 / 17%);
  border: none;
}

.values-heading {
  max-width: 26em;
  margin: 0 auto;
}

.values-list {
  margin-top: var(--space-3xl);
  border-top: 1px solid rgba(100, 96, 84, 0.25);
}

.values-row {
  display: grid;
  grid-template-columns: .7fr 1.3fr 2fr;
  gap: var(--space-md);
  align-items: start;
  text-align: left;
  padding: var(--space-md) 0 var(--space-xl);
  border-bottom: 1px solid rgba(100, 96, 84, 0.25);
}

.values-list .values-row:last-child {
  border-bottom: none;
}

.values-number {
  opacity: 0.85;
  font-size: clamp(3.4rem, 2.6rem + 2vw, 4.2rem);
  margin: 0;
}

.values-title {
  margin: 0;
  font-size: clamp(35px, 29px + 1.4vw, 47px);
}

.values-desc {
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-leading);
  opacity: 0.9;
  margin: 0;
}

/* ---------- FAQ accordion (faqs.html) ----------
   Outer split background reuses the .fiona-wide-backdrop technique: a
   fixed flex-basis on the top band keeps the blue/white divide at a
   constant position regardless of how tall the box grows as accordion
   rows open, instead of the 50/50-of-container-height split used by
   .values-backdrop-split. */
.faq-section {
  position: relative;
  background: var(--white);
}

.faq-section-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 0;
  pointer-events: none;
}

.faq-section-backdrop-top {
  flex: 0 0 var(--faq-split, 50%);
  background: var(--blue);
}

.faq-section-backdrop-bottom {
  flex: 1 1 auto;
  background: var(--white);
}

.faq-section-inner {
  position: relative;
  z-index: 1;
  padding:0;
}

.section .faq-section-inner {
  padding: 0;
}
 
.faq-box {
  background: var(--dark-tan);
  color: var(--gray);
  border-radius: 16px;
  padding: var(--space-2xl);
}

/* Two independent vertical stacks (not a shared row grid) so opening an
   answer only pushes down the items below it in its own column. */
.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3xl);
}

.faq-column {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid rgba(100, 96, 84, 0.25);
}

.faq-column .faq-item:last-child {
  border-bottom: 1px solid rgba(100, 96, 84, 0.25);
}

.faq-question {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) 0;
}

.faq-question:focus-visible {
  outline: 2px solid var(--gray);
  outline-offset: 4px;
}

.faq-question-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 19px + 0.7vw, 29px);
  line-height: 1.2;
  color: var(--gray);
}

.faq-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gray);
  transform: translate(-50%, -50%);
}

.faq-toggle::before {
  width: 18px;
  height: 2px;
}

.faq-toggle::after {
  width: 2px;
  height: 18px;
  transition: opacity 0.15s ease;
}

.faq-question[aria-expanded="true"] .faq-toggle::after {
  opacity: 0;
}

/* Height is animated in script.js (max-height set from scrollHeight, then
   transitioned to 0 or back) so answers of any length expand/collapse
   smoothly instead of jumping; [hidden] still removes closed panels from
   layout/AT once the collapse transition finishes. */
.faq-answer {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-answer {
    transition: max-height var(--control-dur) var(--ease-out-soft);
  }
}

.faq-answer-inner {
  padding: 0 0 var(--space-lg);
}

.faq-subheading {
  font-size: clamp(18px, 16px + 0.4vw, 21px);
  margin: var(--space-lg) 0 var(--space-sm);
}

.faq-subheading:first-child {
  margin-top: 0;
}


.faq-answer-copy+.faq-answer-copy {
  margin-top: var(--space-xs);
}

.faq-subheading+.faq-answer-copy {
  margin-top: 0;
}

.faq-answer-list {
  margin: var(--space-xs) 0 var(--space-sm);
}

/* ============================================================
   CONTACT CTA
   ============================================================ */
.contact-cta-outer {
  position: relative;
  background: var(--white);
}

.contact-cta-backdrop-split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 0;
  pointer-events: none;
}

.contact-cta-backdrop-top {
  flex: 1 1 0;
  background: var(--white);
}

.contact-cta-backdrop-bottom {
  flex: 1 1 0;
  background: var(--footer-blue);
}

.contact-cta-section {
  position: relative;
  z-index: 1;
  padding: var(--space-sm) 0 var(--space-lg);
}

.contact-cta-panel {
  background: var(--blue);
  color: var(--white);
  border-radius: 16px;
  padding: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: top;
  background-image: linear-gradient(40deg, #4397d6 54%, #a4c6d4);
}

.contact-cta-copy {
  max-width: 28em;
}

.contact-cta-tag {
  margin-bottom: var(--space-md);
}

.contact-cta-heading {
  margin-bottom: var(--space-sm);
  font-size: var(--h3-size);
}

.contact-cta-text {
  opacity: 0.92;
}

.contact-cta-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: var(--text-sm-size);
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-radius: 8px;
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
  outline: none;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.form-field input:focus::placeholder,
.form-field textarea:focus::placeholder {
  opacity: 0;
}

.form-field textarea {
  resize: vertical;
  min-height: 4em;
}

.form-field input:focus,
.form-field textarea:focus {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.contact-cta-submit {
  align-self: flex-start;
  cursor: pointer;
}

.contact-cta-status {
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: var(--text-sm-size);
  margin: 0;
}

.contact-cta-status[data-state="error"] {
  color: var(--dark-yellow);
}

/* ============================================================
   ENQUIRY MODAL (global)
   Right-hand slide-in panel, built from the contact CTA's own
   classes (contact-cta-copy / contact-cta-form / form-field / btn)
   so typography, colour and field treatment stay in sync with it.
   ============================================================ */
#enquiryModal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  /* The panel below slides fully off its own right edge via transform.
     Without this, that transformed box still counts toward the
     document's scrollable width (a position:fixed box's overflow isn't
     otherwise clipped by anything) and opening the modal grows a
     horizontal scrollbar. This overlay is already viewport-sized, so
     clipping it here contains the slide with no page-wide overflow
     rule needed. */
  overflow: hidden;
}

#enquiryModal[open] {
  display: flex;
  justify-content: flex-end;
}

#enquiryModal::backdrop {
  background: rgba(3, 17, 33, 0.55);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  #enquiryModal::backdrop {
    transition: opacity var(--control-dur) ease;
  }
}

#enquiryModal.is-visible::backdrop {
  opacity: 1;
}

.enquiry-modal-panel {
  position: relative;
  width: min(630px, 100%);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--blue);
  background-image: linear-gradient(40deg, #4397d6 54%, #a4c6d4);
  color: var(--white);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: -12px 0 40px rgba(3, 17, 33, 0.3);
  transform: translateX(100%);
}

@media (prefers-reduced-motion: no-preference) {
  .enquiry-modal-panel {
    transition: transform 450ms var(--ease-out-soft);
  }
}

#enquiryModal.is-visible .enquiry-modal-panel {
  transform: translateX(0);
}

.enquiry-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 2.75em;
  height: 2.75em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  cursor: pointer;
  transition: background var(--hover-dur) ease;
}

.enquiry-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.enquiry-modal-close:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .enquiry-modal-panel {
    width: 100%;
    padding: var(--space-xl) var(--space-md);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--footer-blue);
  color: var(--white);
}

.footer-inner {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin: 0 auto;
  padding: var(--space-xl) 0 var(--space-2xl);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.footer-brand {
  grid-column: span 4;
}

.footer-explore {
  grid-column: span 2;
}

.footer-locations {
  grid-column: span 6;
}

.footer-title {
  opacity: 0.6;
  margin: 0 0 var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
}

.footer-link {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--text-weight);
  font-size: 14px;
  padding: var(--space-2xs) 0;
  opacity: 0.85;
  transition: opacity var(--hover-dur) ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  opacity: 1;
}

/* Animated left-to-right underline, replacing the old instant text-decoration.
   .footer-link itself stays block-level (full column width) so its click
   target doesn't shrink, but the underline is sized against an inner
   inline span wrapping just the visible phrase — otherwise a block-level
   link's own background-size would span the whole column, not the text.
   Contact links (brand column) already wrap their label in a span for the
   same reason, so they share this rule. */
.footer-link span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--hover-dur) var(--ease-out-soft);
}

.footer-link:hover span,
.footer-link:focus-visible span {
  background-size: 100% 1px;
}

/* Brand column */
.footer-logo {
  width: 340px;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-lg);
}

.footer-brand-contact {
  display: flex;
  flex-direction: column;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: var(--space-2xs) 0;
}

.footer-contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* .footer-link's generic hover/focus rules above react to the whole link
   box, which is fine for icon-less footer nav links but means hovering
   just the icon here would also brighten + underline the text. Narrow
   mouse hover to the visible text only (:has() lets the icon+text link
   react together, but only when the pointer is actually over the span);
   keyboard focus intentionally still highlights the whole link, same as
   any other link, since focus has no "position" to restrict to. */
.footer-contact-link:hover {
  opacity: 0.85;
}

.footer-contact-link:has(span:hover) {
  opacity: 1;
}

.footer-contact-link:hover span {
  background-size: 0% 1px;
}

.footer-contact-link span:hover {
  background-size: 100% 1px;
}

.footer-contact-email {
  white-space: nowrap;
}

/* Locations column */
.footer-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

.footer-location-name {
  color: var(--white);
  margin-bottom: var(--space-xs);
  font-size: 20px;
}

.footer-location-address {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2xs);
  font-size: 14px;
  line-height: 2em;
}

.footer-location-land {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.4em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--text-weight);
  opacity: 0.75;
}

.footer-legal {
  display: flex;
  gap: var(--space-md);
}

.footer-bottom a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--hover-dur) var(--ease-out-soft);
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  background-size: 100% 1px;
}

.footer-codex {
  display: inline-block;
  padding: 1px 6px;
  color: var(--yellow);
  font-weight: var(--font-weight-bold);
}

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

/* Header nav collapses into the hamburger flyout from tablet widths down,
   shared by both tablet and phone (previously tablet showed a text "Menu"
   button at 991px and only phone got the icon at 600px — now one trigger
   style covers both so tablet doesn't look like a half-finished state). */
@media (max-width: 1199px) {
  .header-nav {
    display: none;
  }

  /* The CTA is duplicated as .mobile-cta inside the flyout once the nav
     collapses, so the header row only needs the trigger — without this,
     the logo + CTA + trigger don't fit the shrunken header on tablet. */
  .header-cta {
    display: none;
  }

  /* Icon-only hamburger/close button. Text content ("Menu"/"Close", set by
     script.js) is kept in the DOM for the accessible name but visually
     hidden via font-size: 0 — the lines below are drawn with ::before/
     ::after, the same before/after-line technique .faq-toggle uses. */
  .nav-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-trigger::before,
  .nav-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--control-dur) ease, opacity var(--control-dur) ease, box-shadow var(--control-dur) ease;
  }

  .nav-trigger::before {
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }

  .nav-trigger::after {
    opacity: 0;
  }

  .nav-trigger[aria-expanded="true"]::before {
    box-shadow: 0 0 0 transparent;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .nav-trigger[aria-expanded="true"]::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Always flex at this width; opacity/visibility (not display) control
     showing so open/close can transition instead of jumping. max-height:0
     alone does not zero the box — the base rule's vertical padding still
     renders (padding isn't shrunk by max-height), leaving a visible strip
     under the header when "closed". Padding is reset to 0 here and
     restored only in .is-open below so the collapsed menu is genuinely
     0px tall. */
  .mobile-nav {
    display: flex;
    overflow: hidden;
    max-height: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--reveal-glass-dist));
  }

  .mobile-nav.is-open {
    max-height: 400px;
    padding: var(--space-2xs) var(--space-sm) var(--space-sm);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: no-preference) {
    .mobile-nav {
      transition: max-height var(--control-dur) ease, padding var(--control-dur) ease, opacity var(--control-dur) var(--ease-out-soft), transform var(--control-dur) var(--ease-out-soft), visibility 0s linear var(--control-dur);
    }

    .mobile-nav.is-open {
      transition: max-height var(--control-dur) ease, padding var(--control-dur) ease, opacity var(--control-dur) var(--ease-out-soft), transform var(--control-dur) var(--ease-out-soft), visibility 0s linear 0s;
    }
  }
}

@media (max-width: 991px) {
  :root {
    --reveal-tag-dist: 8px;
    --reveal-heading-dist: 8px;
    --reveal-heading-blur: 10px;
    --reveal-para-dist: 8px;
    --reveal-cta-dist: 8px;
    --reveal-media-dist: 8px;
    --reveal-glass-dist: 8px;
    --reveal-item-dist: 8px;
    --reveal-item-stagger: 100ms;
    --reveal-list-dist: 8px;
    --reveal-bubble-dist: 8px;
    --reveal-bubble-stagger: 60ms;
  }

  /* The glass highlight sweep is a desktop-only flourish (scoped via its
     own hover/pointer media query below); nothing to disable here. */

  /* ---- Section vertical rhythm: desktop paddings (96–192px) are tuned
     for a 1920px canvas and read as excessive dead space once sections
     stack full-width on tablet — tighten the top/bottom padding on every
     major section band. Mobile (≤600px) tightens further below. */
  .section {
    padding: var(--space-2xl) 0;
  }

  .hero {
    padding: var(--space-4xl) 0 var(--space-2xl);
  }

  .inner-page .hero {
    padding-bottom: var(--space-2xl);
  }

  .feature-row {
    padding: var(--space-2xl) 0;
  }

  .feature-row--numbered-list {
    padding: 0 0 var(--space-2xl);
  }

  .testimonials-section {
    padding: var(--space-2xl) 0 0;
  }

  .mediation-approach {
    padding: 0 0 var(--space-2xl);
  }

  .values-panel {
    padding: var(--space-2xl) var(--space-xl);
  }

  .values-list {
    margin-top: var(--space-2xl);
  }

  .values-row {
    padding: var(--space-sm) 0 var(--space-lg);
  }

  .contact-cta-panel {
    padding: var(--space-xl);
  }

  .feature-row,
  .contact-cta-panel {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .hero-extra-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .consult-cta {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .consult-cta-image {
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .consult-cta-content {
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    gap: var(--space-xs);
  }

  /* .feature-media is only ever used for the conversation-visual chat
     bubbles or the accreditation logo marquee — never a fixed photo crop
     — so forcing it square here was clipping the bubble text once two
     stacked bubble groups needed more height than a square allowed.
     Let it size to its content's natural height instead. */
  .feature-media {
    aspect-ratio: auto;
  }

  .contact-cta-copy {
    max-width: none;
  }

  .values-row {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .faq-box {
    padding: var(--space-xl) var(--space-md);
  }

  .faq-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .feature-row.reverse .feature-copy,
  .feature-row.reverse .feature-media {
    order: initial;
  }

  .testimonial-panel {
    grid-template-columns: 1fr;
  }

  .testimonial-portrait {
    min-height: 220px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer-brand,
  .footer-explore,
  .footer-locations {
    grid-column: span 1;
  }

  .footer-locations-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-location+.footer-location {
    margin-top: var(--space-xl);
  }

  .value-cards {
    grid-template-columns: 1fr 1fr;
    --value-cards-n: 2;
  }

  .value-card:nth-child(1),
  .value-card:nth-child(3) {
    --value-cards-i: 0;
  }

  .value-card:nth-child(2),
  .value-card:nth-child(4) {
    --value-cards-i: 1;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 1.1em;
    /* .site-header is position:fixed (out of document flow) at this
       breakpoint: top:0.75em offset, ~60px tall (44px .nav-trigger +
       8px top/bottom .header-inner padding) plus its 1px top/bottom
       border. .hero's padding-top below is derived from these plus a
       clear gap, instead of reusing an unrelated spacing-scale value —
       one shared rule for every page's hero rather than per-page fixes. */
    --mobile-header-offset: 0.75em;
    --mobile-header-height: 62px;
    --mobile-hero-gap: 28px;
  }

  .section {
    padding: var(--space-lg) 0;
  }

  .site-header {
    top: 0.75em;
  }

  .header-inner {
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-xs);
  }

  /* The full horizontal wordmark (~6.9:1 aspect ratio) is too wide to sit
     next to the menu trigger once the header shrinks to a phone-width
     card — scale it down so logo + trigger fit without wrapping. The
     icon-only trigger itself is sized/drawn in the shared tablet+mobile
     breakpoint above; only the logo shrink is phone-specific. */
  .logo-mark {
    height: 1.4em;
  }

  .hero {
    padding-top: calc(var(--mobile-header-offset) + var(--mobile-header-height) + var(--mobile-hero-gap));
    padding-bottom: var(--space-xl);
  }

  .inner-page .hero {
    padding-bottom: var(--space-lg);
  }

  /* The heading → divider → next-heading rhythm uses desktop-scaled
     space-3xl/4xl gaps (96–128px) that read as dead space stacked on a
     narrow phone screen — cut them down a lot for mobile. */
  .hero-inner {
    margin-bottom: var(--space-md);
  }

  /* Home hero heading only — inner pages (body.inner-page) keep the
     default gap below their shorter breadcrumb-led heading. */
  body:not(.inner-page) .hero-heading {
    margin-bottom: var(--space-sm);
  }

  .inner-page .hero-inner {
    margin-bottom: var(--space-sm);
  }

  .hero-extra {
    margin-top: var(--space-sm);
  }

  .hero-extra-divider {
    margin-bottom: var(--space-md);
  }

  .inner-page .hero-extra-divider {
    margin-bottom: var(--space-sm);
  }

  .hero-media {
    margin-top: var(--space-lg);
  }

  /* Only on mobile does the wide banner crop down to 4:3 — desktop/tablet
     keep the original wide, uncropped photo (object-fit: contain). Source
     photo is a ~2.6:1 wide crop with Fiona sitting right-of-centre; biasing
     the crop keeps her (and the notebook she's writing in) as the focal
     point instead of centring on the window/plants to the left. */
  .fiona-wide-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 65% center;
  }

  .feature-row {
    padding: var(--space-xl) 0;
  }

  .feature-row--numbered-list {
    padding: 0 0 var(--space-xl);
  }

  .testimonials-section {
    padding: var(--space-xl) 0 0;
  }

  .mediation-approach {
    padding: 0 0 var(--space-xl);
  }

  /* "The solution" panel: the heading→divider gap and divider→row gap
     both used the 96px space-3xl step, which towers over the panel's
     own content on a phone screen — cut it down a lot. */
  .values-panel {
    padding: var(--space-xl) var(--space-md);
  }

  .values-list {
    margin-top: var(--space-lg);
  }

  .values-row {
    padding: var(--space-sm) 0 var(--space-md);
  }

  .faq-question {
    gap: var(--space-sm);
  }

  .faq-toggle {
    width: 22px;
    height: 22px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-logo {
    width: 180px;
  }

  .footer-contact-email {
    white-space: normal;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .contact-cta-panel {
    padding: var(--space-lg) var(--space-md);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .value-cards {
    grid-template-columns: 1fr;
    --value-card-height: 330px;
  }

  .value-card:nth-child(1) {
    --value-cards-i: 0;
  }

  .value-card:nth-child(2) {
    --value-cards-i: 1;
  }

  .value-card:nth-child(3) {
    --value-cards-i: 2;
  }

  .value-card:nth-child(4) {
    --value-cards-i: 3;
  }

  .value-card {
    background-image: linear-gradient(to bottom,
        #ff3c06 0%,
        #ff8100 25%,
        #ffb202 50%,
        #cbb26a 75%,
        #4397d6 100%);
    background-size: 100% calc(var(--value-cards-total) * var(--value-card-height) + (var(--value-cards-total) - 1) * var(--value-cards-gap));
    background-position: 0 calc(-1 * var(--value-cards-i) * (var(--value-card-height) + var(--value-cards-gap)));
  }
}