/* tokens.css */
/* ==========================================================================
   Kain Lawyers — Design Tokens  (SOURCE OF TRUTH)
   Generated from Figma variable exports:
     • Branding   → Mode 1.tokens.json   (colours, fonts)
     • Responsive → Desktop / Mobile      (type scale, spacing, sizing)
   Mobile-first: base = Mobile mode; desktop overrides in the @media block.
   Portable: drops unchanged into static HTML now, WordPress theme later.
   ========================================================================== */

:root {
  /* ---- Colours ------------------------------------------------------- */
  --colour-primary-green: #00ae42;
  --colour-green-hover:   #26d46e;
  --colour-green-active:  #008232;
  --colour-dark-green:    #243c2d;
  --colour-dark-grey:     #282828;
  --colour-medium-grey:   #3a3a3a;
  --colour-light-grey:    #67726b;   /* slightly darker than the original #75817a */
  --colour-dark-sand:     #a89975;
  --colour-medium-sand:   #d6caac;
  --colour-light-sand:    #f2efe2;
  --colour-white:         #ffffff;

  /* ---- Semantic roles ------------------------------------------------ */
  --color-bg:            var(--colour-white);
  --color-bg-alt:        var(--colour-light-sand);
  --color-surface:       var(--colour-medium-sand);
  --color-text:          var(--colour-dark-green);
  --color-text-muted:    var(--colour-light-grey);
  --color-text-invert:   var(--colour-white);
  --color-action:        var(--colour-primary-green);
  --color-action-hover:  var(--colour-green-hover);
  --color-action-active: var(--colour-green-active);
  --color-border:        var(--colour-dark-green);

  /* ---- Fonts --------------------------------------------------------- */
  /* Calibri where present (Windows / Office, incl. Office-on-Mac); everyone else
     falls back to self-hosted Lato (OFL) — has a true Light 300, and its
     @font-face carries size-adjust:92% so it matches Calibri's apparent size. */
  --font-base: "Calibri", "Lato", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-title: var(--font-base);
  --font-body:  var(--font-base);
  /* Accent face → base font (Calibri/Lato). DIN is a macOS-only system font (not
     web-hosted, absent on Windows/Android), so it rendered inconsistently; use the
     base font everywhere instead. Repoint this token if a condensed webfont is ever self-hosted. */
  --font-alt:   var(--font-base);
  --weight-light:   300;
  --weight-regular: 400;
  --weight-bold:    700;
  /* Line-height is PAIRED to each font-size — one leading per size token, so e.g.
     Title XXL always renders with the same line-height everywhere. Whenever you
     set a font-size, use the matching --<size>-lh for its line-height. */
  --title-xxl-lh:    0.94;   /* hero / display */
  --title-xl-lh:     1.1;    /* section titles */
  --title-l-lh:      1.2;
  --title-m-lh:      1.2;
  --title-s-lh:      1.2;
  --title-xs-lh:     1.2;
  --text-large-lh:   1.5;
  --text-medium-lh:  1.5;
  --text-regular-lh: 1.5;    /* body copy */
  --text-small-lh:   1.5;
  --text-tiny-lh:    1.5;
  --text-nav-lh:     1.5;    /* nav / menu links */

  /* ---- Type scale  (MOBILE defaults) --------------------------------- */
  --title-xxl: 45px;
  --title-xl:  40px;
  --title-l:   26px;
  --title-m:   22px;
  --title-s:   20px;
  --title-xs:  18px;
  --text-large:   18px;
  --text-medium:  16px;
  --text-regular: 16px;
  --text-small:   14px;
  --text-tiny:    12px;
  --text-nav:     16px;   /* nav / menu links — own token so menu size can be tuned independently of body text */

  /* ---- Spacing: padding & margins  (MOBILE) -------------------------- */
  --space-xxs: 8px;
  --space-xs:  16px;
  --space-sm:  24px;
  --space-md:  32px;
  --space-lg:  48px;
  --sec-pad-v: 40px;
  --sec-pad-h: 40px;
  --content-pad-v: 20px;
  --content-pad-h: 20px;
  /* Right padding reserved on split-layout section titles so they wrap earlier.
     Desktop-only — 0 on mobile, 150px in the desktop media block below. */
  --content-pad-right: 0;

  /* ---- Gaps  (MOBILE) ------------------------------------------------ */
  --sec-gap:     40px;
  --content-gap: 20px;
  --grid-gap:    20px;   /* uniform gap between cards in any grid/list/slider */

  /* ---- Custom gaps  (fixed, applied manually) ------------------------ */
  /* Unlike the section/content/grid gaps above — which are applied semi-
     automatically by the layout logic — these are hand-picked gaps for
     specific spots (e.g. photo → name, label → value). Same on all breakpoints. */
  --gap-xxl: 80px;
  --gap-xl:  60px;
  --gap-l:   40px;
  --gap-m:   20px;
  --gap-s:   10px;
  --gap-xs:  5px;

  /* ---- Layout sizing  (MOBILE) --------------------------------------- */
  --frame-max:            1440px;  /* full content frame; minus gutters ≈ content width */
  --container-max:        360px;
  --flex-content-max:     360px;
  --flex-content-narrow:  360px;

  /* ---- Radius -------------------------------------------------------- */
  --radius-sm: 16px;
  --radius-md: 32px;
  --radius-lg: 48px;

  /* ---- Stroke -------------------------------------------------------- */
  --border-width:  4px;
  --divider-width: 4px;

  /* ---- Component primitives ------------------------------------------ */
  --nav-height: 100px;
  --button-height: 45px;
  --button-pad-y: 10px;
  --button-pad-x: 20px;

  /* Offset for sticky columns (two-col image, stats/intro, bios, awards, txn
     panel) — pins them just below the fixed nav, with a little breathing gap,
     so their top content is never hidden under the header. */
  --sticky-col-top: calc(var(--nav-height) + 24px);
}

/* When the WP admin bar is shown, the fixed nav is pushed down by its height
   (32px desktop / 46px narrow) — add that so sticky columns still clear it. */
body.admin-bar { --sticky-col-top: calc(var(--nav-height) + 24px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar { --sticky-col-top: calc(var(--nav-height) + 24px + 46px); }
}

/* ============================ DESKTOP MODE ============================= */
/* Switch point between mobile (375) and desktop (1440) frames. Using 768px. */
@media (min-width: 768px) {
  :root {
    --title-xxl: 70px;
    --title-xl:  55px;   /* internal hero headers */
    --title-l:   45px;   /* all non-hero content headings */
    --title-m:   30px;
    --title-s:   24px;
    --title-xs:  20px;
    --text-large:   20px;
    --text-medium:  18px;
    --text-regular: 16px;
    --text-small:   14px;
    --text-tiny:    12px;

    --space-md:  48px;
    --space-lg:  72px;
    --sec-pad-v: 80px;
    --sec-pad-h: 80px;
    --content-pad-v: 40px;
    --content-pad-h: 40px;
    --content-pad-right: 150px;   /* desktop-only right pad on split-layout titles */

    --sec-gap:     80px;
    --content-gap: 40px;

    --container-max:        1280px;
    --flex-content-max:     1280px;
    --flex-content-narrow:  820px;
  }
}

/* base.css */
/* ==========================================================================
   Kain Lawyers — Base styles
   Reset, typography utilities, layout primitives, buttons, links.
   Built on tokens.css. No framework.
   ========================================================================== */

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Smoothly ease every element's font-size as the type scale changes across
   breakpoints (or when resizing the window), site-wide. Components that set
   their own `transition` keep theirs; this only fills in font-size easing. */
* { transition: font-size .3s ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
body {
  font-family: var(--font-body);
  font-size: var(--text-regular);
  font-weight: var(--weight-regular);
  line-height: var(--text-regular-lh);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* guard against the full-bleed 100vw trick causing scroll (clip, not hidden, so position:sticky still works) */
}
img, picture, svg { display: block; max-width: 100%; }
/* Empty image placeholder — shown in real content when NO image is set (never a
   default photo). Dark green so a missing image is obvious and easy to spot. */
.kl-img-empty { display: block; width: 100%; height: 100%; min-height: 320px; background: var(--colour-dark-green); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* Wherever a list DOES show markers (content/prose lists re-enable list-style),
 * the bullets / numbers are primary green. Lists with list-style:none show no
 * marker, so nav and component lists are unaffected. */
li::marker { color: var(--colour-primary-green); }

/* ---- Content / prose links ---------------------------------------------- */
/* Inline links inside editorial copy are Kain green; on hover they brighten and
   underline. Applies to any editor/body content wrapper — the generic
   [class*="__body"] catches every `*__body` container (article, contact, page
   builder, …) plus intros and .wysiwyg/.rich-text — so links added anywhere in
   content are styled, while structural links (nav, footer, buttons, cards) keep
   their own styling (they don't use these wrappers, and buttons are excluded). */
.wysiwyg a:not(.btn):not(.btn-icon), .rich-text a:not(.btn):not(.btn-icon),
[class*="__body"] a:not(.btn):not(.btn-icon),
.intro__desc a:not(.btn):not(.btn-icon),
.txn__intro a:not(.btn):not(.btn-icon), .exper__intro a:not(.btn):not(.btn-icon), .team__intro a:not(.btn):not(.btn-icon),
.accordion__lead a:not(.btn):not(.btn-icon), .accordion__a a:not(.btn):not(.btn-icon) {
  color: var(--colour-primary-green);
  text-decoration: none;
  transition: color .15s ease;
}
.wysiwyg a:not(.btn):not(.btn-icon):hover, .rich-text a:not(.btn):not(.btn-icon):hover,
[class*="__body"] a:not(.btn):not(.btn-icon):hover,
.intro__desc a:not(.btn):not(.btn-icon):hover,
.txn__intro a:not(.btn):not(.btn-icon):hover, .exper__intro a:not(.btn):not(.btn-icon):hover, .team__intro a:not(.btn):not(.btn-icon):hover,
.accordion__lead a:not(.btn):not(.btn-icon):hover, .accordion__a a:not(.btn):not(.btn-icon):hover {
  color: var(--colour-green-hover);
  text-decoration: underline;
}
button { font: inherit; cursor: pointer; border: none; background: none; }

/* Headings pasted into editor / free-text content (h1–h6) pick up the site's type
   scale (title tokens + light weight) so hand-authored HTML looks on-brand instead
   of bold browser defaults. Colour is left to INHERIT so headings stay legible on
   both light and dark blocks. Scoped to editor-prose wrappers only — component
   cards (e.g. .exper-card__body, .sc-card__body) keep their own title styling. */
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--weight-light);
  letter-spacing: -0.01em;
  margin: var(--space-md) 0 var(--space-sm);
}
/* Consistent vertical rhythm between blocks — the global reset zeroes margins, so
   set it here. Paragraphs/lists get one step; headings get a little more (above).
   Empty paragraphs left behind by pasted content are collapsed so they don't add
   extra gaps. */
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) > * + * { margin-top: var(--space-sm); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) p:empty { display: none; }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) > :first-child { margin-top: 0; }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) h1 { font-size: var(--title-xl); line-height: var(--title-xl-lh); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) h2 { font-size: var(--title-l);  line-height: var(--title-l-lh); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) h3 { font-size: var(--title-m);  line-height: var(--title-m-lh); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) h4 { font-size: var(--title-s);  line-height: var(--title-s-lh); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) h5 { font-size: var(--title-xs); line-height: var(--title-xs-lh); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) h6 { font-size: var(--text-large); line-height: var(--text-large-lh); }
/* Lists in editor content — the global reset removes markers, so restore them
   (green bullets / numbers via li::marker) in the body copy's own font. */
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) ul { list-style: disc; padding-left: 1.25em; }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) ol { list-style: decimal; padding-left: 1.25em; }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) li + li { margin-top: var(--space-xxs); }
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) li::marker { color: var(--colour-primary-green); }
/* Pasted lists sometimes carry inline font sizes/fonts on the ul/ol/li or on
   spans inside — force the whole list to match the body copy (inline styles need
   !important to override). */
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) :is(ul, ol, li),
:is(.wysiwyg, .rich-text, .text-md, .article__body, .kform-sec__body, .cm__body, .cta__body, .awards__body, .infogrid__body, .csplit__body, .intro__body, .pbio__body, .aguide__body) :is(ul, ol, li) * { font-size: var(--text-regular) !important; line-height: var(--text-regular-lh) !important; font-family: inherit !important; }

/* Baseline: every link/button transitions its hover properties smoothly (0.4s).
   Component rules with their own transition (incl. transform) still take over. */
a, button, .btn, .chip, input[type="search"] {
  transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease, opacity .4s ease;
}

/* ---- Layout primitives --------------------------------------------------- */
/* .section = full-bleed band (background/image stretch full width), vertical padding only.
   .container = the content frame: capped at --frame-max, centred, with brand side gutters.
   Pattern is shared by nav, hero, footer so content stops at the same line everywhere. */
.section {
  padding-block: var(--sec-pad-v);
}
.container {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--sec-pad-h);
}

/* ---- Typography utilities ------------------------------------------------ */
.t-xxl { font-size: var(--title-xxl); line-height: var(--title-xxl-lh); }
.t-xl  { font-size: var(--title-xl);  line-height: var(--title-xl-lh); }
.t-l   { font-size: var(--title-l);   line-height: var(--title-l-lh); }
.t-m   { font-size: var(--title-m);   line-height: var(--title-m-lh); }
.t-s   { font-size: var(--title-s);   line-height: var(--title-s-lh); }
.t-xs  { font-size: var(--title-xs);  line-height: var(--title-xs-lh); }

.text-lg  { font-size: var(--text-large);   line-height: var(--text-large-lh); }
.text-md  { font-size: var(--text-medium);  line-height: var(--text-medium-lh); }
.text-rg  { font-size: var(--text-regular); line-height: var(--text-regular-lh); }
.text-sm  { font-size: var(--text-small);   line-height: var(--text-small-lh); }
.text-xs  { font-size: var(--text-tiny);    line-height: var(--text-tiny-lh); }
.text-nav { font-size: var(--text-nav);     line-height: var(--text-nav-lh); }   /* nav / menu links */

.fw-light   { font-weight: var(--weight-light); }
.fw-regular { font-weight: var(--weight-regular); }
.fw-bold    { font-weight: var(--weight-bold); }

h1, h2, h3, h4 { font-weight: var(--weight-bold); }
h1 { font-size: var(--title-xxl); line-height: var(--title-xxl-lh); }
h2 { font-size: var(--title-xl);  line-height: var(--title-xl-lh); }
h3 { font-size: var(--title-l);   line-height: var(--title-l-lh); }
h4 { font-size: var(--title-m);   line-height: var(--title-m-lh); }
p  { font-size: var(--text-regular); line-height: var(--text-regular-lh); }

/* ---- Buttons ------------------------------------------------------------- */
/* Mirrors the Figma Buttons component.
   Variants:  --solid (green) · --solid-light (sand) · --border-light · --border-dark · --link
   States:    :hover / :active  (also forceable via .is-hover / .is-active for the styleguide)
   Widths:    default hugs content · add .btn--w200 for the fixed 200px version */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  height: var(--button-height);
  padding: var(--button-pad-y) var(--button-pad-x);
  font-size: var(--text-regular);
  line-height: var(--text-regular-lh);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.btn--w200 { width: 200px; }
.btn__arrow { width: 1em; height: 1em; flex: none; }

/* Solid — Dark style (green) */
.btn--solid { background: var(--colour-primary-green); color: var(--colour-white); }
.btn--solid:hover,  .btn--solid.is-hover  { background: var(--colour-green-hover); }
.btn--solid:active, .btn--solid.is-active { background: var(--colour-green-active); }

/* Solid — Light style (sand) */
.btn--solid-light { background: var(--colour-light-sand); color: var(--colour-dark-green); }
.btn--solid-light:hover,  .btn--solid-light.is-hover  { background: var(--colour-medium-sand); }
.btn--solid-light:active, .btn--solid-light.is-active { background: var(--colour-dark-sand); color: var(--colour-white); }

/* Border — Light (sits on dark backgrounds) */
.btn--border-light { border-color: var(--colour-light-sand); color: var(--colour-white); }
.btn--border-light:hover,  .btn--border-light.is-hover  { border-color: var(--colour-green-hover); color: var(--colour-green-hover); }
.btn--border-light:active, .btn--border-light.is-active { border-color: var(--colour-green-active); color: var(--colour-green-active); }

/* Border — Dark (sits on light backgrounds) */
.btn--border-dark { border-color: var(--colour-primary-green); color: var(--colour-dark-green); }
.btn--border-dark:hover,  .btn--border-dark.is-hover  { border-color: var(--colour-green-hover); }
.btn--border-dark:active, .btn--border-dark.is-active { border-color: var(--colour-green-active); }

/* Text link with arrow */
.btn--link { height: auto; padding: 0; gap: var(--space-xxs); background: none; border: none;
  color: var(--colour-primary-green); font-weight: var(--weight-bold); }
.btn--link:hover,  .btn--link.is-hover  { color: var(--colour-green-hover); }
.btn--link:active, .btn--link.is-active { color: var(--colour-dark-green); }

/* ---- Icon buttons (Figma: dropdown arrows + open/close) ------------------ */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease;
}
.btn-icon svg { width: 44%; height: 44%; }

/* Arrow / dropdown — 45px, sand → green, chevron flips white on hover/active */
.btn-icon--arrow { width: 45px; height: 45px; background: var(--colour-light-sand); color: var(--colour-primary-green); }
.btn-icon--arrow:hover,  .btn-icon--arrow.is-hover  { background: var(--colour-green-hover);  color: var(--colour-white); }
.btn-icon--arrow:active, .btn-icon--arrow.is-active { background: var(--colour-green-active); color: var(--colour-white); }
/* Inactive — can't scroll further: muted medium-sand chevron, non-interactive */
.btn-icon--arrow:disabled, .btn-icon--arrow.is-disabled {
  background: var(--colour-light-sand); color: var(--colour-medium-sand);
  cursor: default; pointer-events: none;
}

/* Open / close (+ / ×) — 55px, dark-sand → green, white icon */
.btn-icon--toggle { width: 55px; height: 55px; background: var(--colour-dark-sand); color: var(--colour-white); }
.btn-icon--toggle:hover,  .btn-icon--toggle.is-hover  { background: var(--colour-green-hover); }
.btn-icon--toggle:active, .btn-icon--toggle.is-active { background: var(--colour-green-active); }

/* ---- Content pad right (opt-in, per section) -------------------------------
   Reserves right-hand space on a section title so it wraps earlier. Enabled per
   section in the Page Builder (toggle + px value); the value arrives as --kl-cpr
   on a .kl-cpr-scope wrapper (see flexible-sections.php), falling back to the
   --content-pad-right default. Desktop-only: applies at ≥1200px. Visualised by
   the Inspector's "Content Pad Right" checker (keep the selector list in sync
   with spacing-debug.css). */
@media (min-width: 1200px) {
  .kl-cpr-scope :is(.intro__title, .exper__title, .infogrid__title, .awards__title,
    .fcards__title, .cm__title, .twocol__title, .logos__title, .team__title) {
    padding-right: var(--kl-cpr, var(--content-pad-right));
  }
  /* Heads where the title is itself a flex:1 1 0 column: switch to grid tracks so
     the padding stays inside the title's half instead of inflating it and
     squeezing the sibling (the flex-basis:0 + padding gotcha). Scoped to padded
     sections only, so non-padded layouts are untouched. */
  .kl-cpr-scope .exper__head,
  .kl-cpr-scope .logos__head,
  .kl-cpr-scope .fcards--intro-top .fcards__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Search results -------------------------------------------------------- */
.search-group__title { font-weight: var(--weight-light); font-size: var(--title-xl); line-height: var(--title-xl-lh); letter-spacing: -0.02em; color: var(--colour-dark-green); margin-bottom: var(--space-md); }
.search__empty { font-size: var(--text-large); color: var(--colour-light-grey); }
.search-count-wrap { padding-top: var(--space-lg); }
.search-count { font-size: var(--text-large); color: var(--colour-dark-green); }
/* Search bar sits in a dark-green band continuing the page header (the field is
   white/underline on dark, the "Search" button is the light/sand button). */
.pagehead__body { background: var(--colour-dark-green); padding-bottom: var(--space-xl); }
/* Same look as the header overlay search (transparent field + underline, on dark green) */
.search-bar { display: flex; align-items: center; gap: var(--space-md); }
.search-bar__field {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none;
  border-bottom: 2px solid rgba(255,255,255,.35);
  color: var(--colour-white); font-weight: var(--weight-light);
  font-size: var(--title-m); line-height: var(--title-m-lh); padding: 6px 0;
}
.search-bar__field::placeholder { color: rgba(255,255,255,.5); }
.search-bar__field:focus { outline: none; border-bottom-color: var(--colour-primary-green); }
.search-bar__field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-bar__field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-bar__go { flex: 0 0 auto; }
@media (max-width: 560px) { .search-bar__field { font-size: var(--title-s); } }

/* ---- Free-text (wysiwyg) block surfaces ---------------------------------- */
.wysiwyg-block--white { background: var(--colour-white); color: var(--colour-dark-grey); }
.wysiwyg-block--sand  { background: var(--colour-light-sand); color: var(--colour-dark-grey); }

/* ---- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Staggered row reveal ----------------------------------------------- */
/* Applied by JS (data-rowreveal). Rows start hidden + slightly lowered, then
   fade + lift into place as they enter the viewport. Only active once JS adds
   .is-rowreveal, so no-JS / reduced-motion users see content normally. */
.is-rowreveal > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.is-rowreveal > .is-inview {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .is-rowreveal > * { opacity: 1; transform: none; transition: none; }
}

/* ---- Honour manual line breaks typed into title fields -------------------
   A newline entered in an admin title renders as an actual line break on the
   front end (pre-line preserves newlines but still wraps normally). */
.intro__title, .whyus__title, .whyus__lead, .cm__title, .infogrid__title,
.awards__title, .exper__title, .exper__intro, .twocol__title, .team__title,
.txn__title, .logos__title, .fcards__title, .pagehead__title, .hero__title,
.footer__title, .accordion__title, .cta__title, .kform-sec__title {
  white-space: pre-line;
}

/* logo.css */
/* ==========================================================================
   Component: Logo (real brand SVG — horizontal at all sizes)
   The nav is transparent-over-dark or green, so the logo is always the
   light (white) version.
   ========================================================================== */
.logo { display: inline-flex; align-items: center; }
.logo__img { display: none; width: auto; height: 48px; transition: height .4s ease; }
.logo__img--light { display: block; }
/* Light nav (over a sand hero) → use the dark logo. */
.nav--light .logo__img--light { display: none; }
.nav--light .logo__img--dark  { display: block; }

/* Text wordmark fallback — shown until a Brand logo is uploaded. Carries the
   same --light/--dark classes, so the nav variant toggling still applies. */
.logo .logo__text {
  height: auto; line-height: 48px;
  font-weight: 700; font-size: 22px; letter-spacing: .01em; white-space: nowrap;
  color: #fff;                                   /* light variant (dark/green nav) */
}
.nav--light .logo .logo__text.logo__img--dark { color: var(--colour-dark-green); }

@media (max-width: 767.98px) {
  .logo__img { height: 34px; }
  .logo .logo__text { line-height: 34px; font-size: 18px; }
}

/* nav.css */
/* ==========================================================================
   Component: Site Navigation
   Full-width bar; content capped at 1440px, centred, with section padding.
   Variants (Figma): transparent · dark green · on-scroll.
   --nav-fg drives link / logo / icon colour.

   Responsive collapse:
     • wide      : search · links · logo · links · Contact
     • <=1400px  : links fold into burger → search · logo · Contact · burger
     • <=560px   : Contact hides          → search · logo · burger
   ========================================================================== */

.nav {
  --nav-fg: var(--colour-white);
  position: relative;
  z-index: 30;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  color: var(--nav-fg);
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, height .4s ease;
}
.nav__inner {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--sec-pad-h);   /* same token as sections: 80px desktop / 40px mobile */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  transition: padding .4s ease;
}
.nav__group { display: flex; align-items: center; gap: var(--space-md); flex: 1 0 0; min-width: 0; }
/* Left/right size to their content; the centre group takes the remaining space so
   the logo is centred in the gap between the menus (content-based, not geometric). */
.nav__group--left, .nav__group--right { flex: 0 1 auto; }
.nav__group--right { justify-content: flex-end; }
.nav__group--center { justify-content: center; flex: 1 1 auto; }
.nav__links { display: inline-flex; align-items: center; gap: var(--space-md); }

.nav__link {
  font-size: var(--text-nav);  /* 16px — reduced only in the 1200–1400px range to keep the full nav visible longer */
  color: var(--nav-fg);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  min-height: 44px;            /* ≥44px tap target (visual text unchanged, just centred) */
  transition: font-size .3s ease, color .4s ease;   /* smooth shrink as the nav narrows */
}
.nav__link:hover { color: var(--colour-primary-green); }
/* Underline draws in from the left on hover (top-bar text links only). Anchored
   just below the vertically-centred text so the bigger tap box doesn't move it. */
.nav__links .nav__link { position: relative; }
.nav__links .nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%; margin-top: 0.7em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nav__links .nav__link:hover::after,
.nav__item--menu:hover > .nav__menu-trigger::after { transform: scaleX(1); }
/* Icon button (search): keep the 20px icon, expand the clickable box to 44×44 */
.nav__icon-btn { padding: 0; min-width: 44px; justify-content: center; }
.nav__icon { width: 20px; height: 20px; flex: none; }
/* Logo link: visual size unchanged, hit area at least 44px tall */
.nav__logo { align-items: center; min-height: 44px; }

/* ---- Dropdown menu (e.g. About) -------------------------------------- */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__chevron { width: 16px; height: 16px; transition: transform .4s ease; }

/* The flyout panel: white card, dark-green links — matches the mobile drawer.
   Hidden by default; revealed on hover or keyboard focus within the item. */
.nav__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  margin-top: var(--space-xs);
  padding: var(--space-md);              /* equal padding on all sides */
  background: var(--colour-white);
  color: var(--colour-dark-green);
  border-radius: 6px;
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  align-items: stretch;                  /* every link fills the widest item → even dividers */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
  z-index: 40;
}
/* Invisible hover bridge so the menu doesn't close in the gap below the trigger */
.nav__menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--space-sm);
}
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item--menu:hover .nav__chevron,
.nav__item--menu:focus-within .nav__chevron { transform: rotate(180deg); }

.nav__menu-link {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--space-xs) 0;            /* vertical only → divider spans content width, not full cell */
  color: var(--colour-dark-green);
  font-size: var(--text-nav);
  white-space: nowrap;
  transition: color .4s ease;
}
.nav__menu-link:hover,
.nav__menu-link:focus { color: var(--colour-primary-green); }
/* 1px sand divider between dropdown items — content-width (line hugs icon + name) */
.nav__menu-link { border-bottom: 1px solid var(--colour-medium-sand); }
.nav__menu-link:last-child { border-bottom: 0; }
/* Single column: first item flush with the top padding, last flush with bottom. */
.nav__menu:not(.nav__menu--cols) .nav__menu-link:first-child { padding-top: 0; }
.nav__menu:not(.nav__menu--cols) .nav__menu-link:last-child  { padding-bottom: 0; }
/* Two-column flyout fills column-major (down the left column, then the right —
   see main.js). JS tags the top/bottom item of each column so the padding and
   dividers stay even even when the item count is odd (columns differ by one). */
.nav__menu--cols .nav__menu-link.is-col-top    { padding-top: 0; }
.nav__menu--cols .nav__menu-link.is-col-bottom { border-bottom: 0; padding-bottom: 0; }
/* Expertise icon in front of each dropdown item */
.nav__menu-icon { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }

/* Left-aligned flyout (for left-group items like Expertise) */
.nav__menu--left { left: 0; right: auto; }

/* Multi-column flyout for long lists (e.g. all expertise areas). Two equal-width
   columns: a definite panel width + minmax(0,1fr) forces a true 50/50 split, so
   the long "Property, Projects and Infrastructure" label no longer makes the
   left column wider than the right. */
.nav__menu--cols {
  display: grid;
  /* Both columns are equalised to the widest item by JS (see main.js), so the
     panel is only as wide as its content. max-content is the pre-JS fallback. */
  grid-template-columns: max-content max-content;
  justify-items: stretch;        /* items fill their column → all dividers equal width */
  column-gap: var(--space-lg);   /* visible gap between the two columns (and their dividers) */
}

.nav__logo { color: var(--nav-fg); display: inline-flex; }

/* ---- Full-width search overlay --------------------------------------- */
.nav__search {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--colour-dark-green);
  display: flex;
  align-items: center;
  padding-inline: var(--sec-pad-h);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.nav.is-searching .nav__search { opacity: 1; visibility: visible; }
.nav__search-inner {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.nav__search-field {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255,255,255,.35);
  color: var(--colour-white);
  font-weight: var(--weight-light);
  font-size: var(--title-m);
  line-height: var(--title-m-lh);
  padding: 6px 0;
}
.nav__search-field::placeholder { color: rgba(255,255,255,.5); }
/* Hide the browser's native clear (×) — we provide our own close button */
.nav__search-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nav__search-field::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.nav__search-field:focus { outline: none; border-bottom-color: var(--colour-primary-green); }
.nav__search-submit { flex: 0 0 auto; }
.nav__search-close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--colour-white);
}
.nav__search-close svg { width: 24px; height: 24px; }
.nav__search-close:hover { color: var(--colour-primary-green); }

@media (max-width: 560px) {
  .nav__search-field { font-size: var(--title-s); }
  .nav__search-submit { display: none; }   /* submit via Enter on mobile */
}

/* Contact CTA uses the shared button component (.btn .btn--border-light) —
   white border/text works on transparent (over imagery) and on green. */

/* ---- Variants --------------------------------------------------------- */
/* Same nav, three background states; foreground (logo/links) stays white. */
.nav--transparent { background: transparent; --nav-fg: var(--colour-white); }
.nav--dark        { background: var(--colour-dark-green); --nav-fg: var(--colour-white); }
.nav--scrolled    { background: var(--colour-dark-green); --nav-fg: var(--colour-white); box-shadow: 0 2px 14px rgba(0,0,0,.15); }
/* Light variant: sand bar (blends into the light-sand hero) with dark-green text
   + logo. The bar isn't sticky on these pages, so a matching sand background
   reads as one band with the hero below it. */
.nav--light       { background: var(--colour-light-sand); --nav-fg: var(--colour-dark-green); }
.nav--light .nav__cta { color: var(--colour-dark-green); border-color: var(--colour-primary-green); }

/* Hovering the header fills it with the dark-green background (same as scrolled) */
.nav:hover { background: var(--colour-dark-green); box-shadow: 0 2px 14px rgba(0,0,0,.15); }
/* …except the light variant, which must keep its sand bg (dark text stays legible) */
.nav.nav--light:hover { background: var(--colour-light-sand); box-shadow: none; }

/* ---- Sticky behaviour: transparent on top → green background on scroll - */
.nav--sticky { position: fixed; top: 0; left: 0; right: 0; }
.nav--sticky.is-scrolled { background: var(--colour-dark-green); --nav-fg: var(--colour-white); box-shadow: 0 2px 14px rgba(0,0,0,.15); }

/* When logged in, WordPress pins its admin bar at the top of the viewport
   (32px desktop / 46px on narrow screens). The fixed nav is also pinned at
   top:0, so it would hide behind the bar — push it down by the bar height so
   nothing is cut. WordPress already shifts the document with html{margin-top}. */
body.admin-bar .nav--sticky { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav--sticky { top: 46px; }
}

/* Burger toggle → animates into a closing cross when the drawer is open */
/* content-box + padding → bars stay 28×20 but the tap box is 44×44 */
.nav__toggle { display: none; box-sizing: content-box; width: 28px; height: 20px; padding: 12px 8px; flex-direction: column; justify-content: space-between; }
.nav__toggle span {
  display: block;
  height: 3px;
  background: var(--nav-fg);
  transform-origin: center;
  transition: transform .3s ease, opacity .2s ease, background-color .4s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
/* Keep the white burger (and the search icon) legible while the bar is still
   transparent — over light hero imagery, a sand page header, or before the hero
   image has loaded, white-on-light would otherwise disappear. A soft drop shadow
   guarantees contrast on any background; it's imperceptible once the bar gains
   its dark-green background on scroll. */
.nav--transparent:not(.is-scrolled) .nav__toggle span { box-shadow: 0 0 3px rgba(0, 0, 0, .45); }
.nav--transparent:not(.is-scrolled) .nav__icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* Drawer hidden until opened (only relevant in collapsed states) */
.nav__drawer {
  display: none;
  position: absolute;
  inset: 100% 0 auto 0;
  background: var(--colour-white);
  color: var(--colour-dark-green);
  padding: var(--space-sm) var(--sec-pad-h) var(--space-md);
  flex-direction: column;
  gap: var(--gap-xs);
  box-shadow: 0 16px 28px rgba(0,0,0,.12);
  /* Scroll the drawer itself (not the page) when its contents exceed the screen.
     Use dvh so mobile browser chrome (URL bar) is accounted for — with 100vh the
     bottom items (Contact) sit under the address bar and can't be reached. */
  max-height: calc(100vh - var(--nav-height));
  max-height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* don't chain-scroll the page behind it */
}
.nav__drawer.is-open { display: flex; }

/* Lock the page behind the open drawer so only the drawer scrolls */
body.nav-drawer-open { overflow: hidden; }
.nav__drawer .nav__link {
  color: var(--colour-dark-green);
  font-size: var(--title-xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-bg-alt);
}
/* About sub-items inside the drawer: indented + lighter to read as children */
.nav__drawer .nav__drawer-sub {
  padding-left: var(--space-md);
  font-size: var(--text-regular);
  opacity: .85;
}
/* Expertise sub-items: show the expertise icon in front of the label */
.nav__drawer .nav__drawer-sub--icon {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}
.nav__drawer-cta { margin-top: var(--space-sm); align-self: flex-start; border-color: var(--colour-primary-green); color: var(--colour-dark-green); }

/* ---- Mobile submenu accordion (Expertises, About, …) ------------------- */
/* The parent label is a normal link (tap → navigate); a separate block arrow
   button (same style as the prev/next arrows) toggles the submenu. */
.nav__acc { display: flex; flex-direction: column; }
.nav__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  border-bottom: 1px solid var(--color-bg-alt);
}
.nav__acc-link { flex: 1 1 auto; }
.nav__drawer .nav__acc-link { border-bottom: 0; }   /* border sits on the row (head) instead */
.nav__acc-toggle { flex: 0 0 auto; }
.nav__acc-toggle svg { transition: transform .3s ease; }
.nav__acc.is-open .nav__acc-toggle svg { transform: rotate(180deg); }
/* Panel: collapsed by default (hidden attribute); shown when open */
.nav__acc-panel { display: flex; flex-direction: column; }
.nav__acc-panel[hidden] { display: none; }

/* ===== Tier 1.5: 1200–1400px — keep the full nav, but shrink item font and
   scale the logo down so everything fits (delays the burger to 1200px). ===== */
@media (min-width: 1200px) and (max-width: 1400px) {
  .nav__link { font-size: 14px; }   /* nudge down only here so the links still fit */
  .nav__inner { gap: var(--space-sm); }
  .nav__group, .nav__links { gap: var(--space-sm); }
  /* Logo scales fluidly 40px→48px across 1200→1400 so the shrink is gradual. */
  .logo__img { height: clamp(40px, calc(40px + (100vw - 1200px) * 0.04), 48px); }
}

/* ============ Tier 2: fold links into the burger (<=1200px) ============ */
@media (max-width: 1199.98px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ============ Tier 3: hide Contact in the bar (<=560px) ================= */
@media (max-width: 560px) {
  .nav { height: 82px; }
  .nav__group--right > .nav__cta { display: none; }   /* keep it in the drawer */
}

/* Tighter side padding on mobile (bar + drawer); extra bottom room so the last
   item (Contact) clears the browser chrome and is fully scrollable. */
@media (max-width: 767.98px) {
  .nav__inner { padding-inline: 20px; }
  .nav__drawer { padding-inline: 20px; padding-bottom: var(--space-xl, 64px); }
}

/* hero.css */
/* ==========================================================================
   Component: Hero Header  (Figma: Header / Hero Header)
   Dark background image, content anchored bottom-left, headline + 2 actions.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 700px;
  height: 750px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--colour-dark-green);
  color: var(--color-text-invert);
}
/* Video / image background; poster image shows until the video loads or if absent */
.hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;            /* flush cover by default (motion off) */
  object-fit: cover;
  z-index: 0;
}
/* Parallax on: oversize the media so the drift has room. */
.kl-parallax .hero__media:not(.hero__media--yt) { top: -30%; height: 160%; will-change: transform; }
/* YouTube background: cover the hero with the 16:9 iframe (crop, no letterbox).
   Over-scaled (top/height) so the parallax drift never reveals an edge. */
.hero__media--yt { top: -15%; height: 130%; overflow: hidden; }
.hero__media--yt iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;          /* 16:9 of the full width … */
  min-width: 231.11vh;      /* … or 16:9 of 130vh — both stay 16:9 (no distortion) */
  min-height: 130vh;
}
/* Dark-green mask over the player at load; fades out the moment the video starts. */
.hero__yt-cover {
  position: absolute; inset: 0; z-index: 1;
  background: var(--colour-dark-green);
  transition: opacity .6s ease;
}
.hero__media--yt.is-playing .hero__yt-cover { opacity: 0; }

/* Self-hosted <video> hero: fade in from the dark-green background on play
   (mirrors the YouTube/embed cover fade). */
video.hero__media { opacity: 0; transition: opacity .6s ease; }
video.hero__media.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { video.hero__media { opacity: 1; transition: none; } }

/* Phone-only media override (below 768px): swap desktop media for the mobile one. */
.hero__media--mobile { display: none; }
@media (max-width: 767.98px) {
  .hero__media--desktop { display: none; }
  .hero__media--mobile  { display: block; }
}

/* Ken Burns slow zoom when the hero shows an image (opt-in via data-kenburns).
   Animates `scale` so it composes with the parallax `transform` (translate)
   rather than overriding it; is-inview is toggled by the observer in main.js. */
@media (min-width: 768px) {
  .hero[data-kenburns].is-inview .hero__media {
    animation: kl-hero-kenburns 18s ease-out forwards;
  }
}
@keyframes kl-hero-kenburns { from { scale: 1; } to { scale: 1.12; } }
@media (prefers-reduced-motion: reduce) {
  .hero[data-kenburns] .hero__media { animation: none !important; }
}
/* Darkening gradient over the media for text legibility */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two black gradients: top→bottom (keeps the nav readable) + left→right (anchors the headline) */
  background:
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 35%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 35%, rgba(0,0,0,.05) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding: var(--sec-pad-h);
  padding-bottom: 70px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
.hero__title {
  font-weight: var(--weight-light);          /* Calibri Light */
  font-size: var(--title-xxl);
  line-height: var(--title-xxl-lh);         /* 0.94 */
  letter-spacing: -0.04em;
  width: 100%;
  max-width: 700px;                          /* full width, capped at 700px */
  transition: font-size .3s ease;            /* smooth shrink/grow across breakpoints */
}
@media (prefers-reduced-motion: reduce) {
  .hero__title { transition: none; }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);                       /* 20px-ish */
  align-items: center;
}

@media (max-width: 767.98px) {
  .hero { height: auto; min-height: 600px; }
  .hero__title { max-width: 100%; }
  .hero__media { object-position: right center; }   /* show the right of the image */
  /* Mobile media override (4:5 video/image): flush, centred cover — no parallax
     over-scale — so the framing you produce is exactly what shows. */
  .hero__media--mobile { top: 0 !important; height: 100% !important; object-position: center; transform: none !important; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* intro-card.css */
/* ==========================================================================
   Component: Intro Card (Figma 13334:11976)
   Full-width band, two columns: heading (L title) + paragraph (S title).
   Dark (green) and Light (sand) styles.
   ========================================================================== */
.intro__grid {
  /* Grid (not flex): equal 1fr tracks are sized independently of item padding,
     so the title's content-pad-right stays INSIDE its column instead of
     inflating it and squeezing the body (the flex-basis:0 + padding gotcha). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--content-gap);     /* 40px desktop / 20px mobile */
  align-items: start;
}
.intro__title,
.intro__body,
.intro__spacer { min-width: 0; }   /* two equal columns (spacer keeps a single block at 50%, text left) */

.intro__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  /* Trim the heading's larger top leading so its cap-height lines up with the
     right column's first line of body text (the bigger type otherwise sits
     visibly lower even though the columns align at the top). Tune if needed. */
  margin-top: -0.16em;
}
/* Target paragraphs too: WYSIWYG/seeded content wraps the text in <p>, which
   would otherwise inherit the global smaller `p` size and break parity with the
   design system. Keeping both selectors here makes the component the single
   source of truth for the description size. */
.intro__body,
.intro__body p {
  font-weight: var(--weight-light);
  font-size: var(--title-s);
  line-height: var(--title-s-lh);
  letter-spacing: -0.01em;
}
.intro__body p + p { margin-top: var(--space-sm); }

/* Optional description below the intro — regular paragraph size, lets longer
   content (e.g. expertise pages) split into intro + body. Sits after the body
   rules above so it wins the matching-specificity override. */
.intro__desc,
.intro__desc p {
  font-size: var(--text-regular);
  font-weight: var(--weight-regular);
  line-height: var(--text-regular-lh);
  letter-spacing: normal;
}
.intro__desc { margin-top: var(--space-md); }
.intro__desc p + p { margin-top: var(--space-sm); }

/* Optional button below the description */
.intro__actions { margin-top: var(--space-md); }

/* Styles */
.intro--dark  { background: var(--colour-dark-green); }
.intro--dark  .intro__title { color: var(--colour-light-sand); font-size: var(--title-l); line-height: var(--title-l-lh); }
.intro--dark  .intro__body  { color: var(--colour-white); }

.intro--light { background: var(--colour-light-sand); }
.intro--light .intro__title { color: var(--colour-dark-green); }
.intro--light .intro__body  { color: var(--colour-dark-green); }

.intro--white { background: var(--colour-white); }
.intro--white .intro__title { color: var(--colour-dark-green); }
.intro--white .intro__body  { color: var(--colour-dark-green); }

/* Mobile: stack the two columns */
@media (max-width: 767.98px) {
  .intro__grid { grid-template-columns: 1fr; }
}

/* testimonials.css */
/* ==========================================================================
   Component: Testimonials Highlight slider (Figma 13337:10044)
   Full-bleed background image, dark-green 75% overlay, quote + person + logo.
   ========================================================================== */
.tm {
  position: relative;
  overflow: hidden;
  background: var(--colour-dark-green);
  color: var(--color-text-invert);
  padding-block: var(--sec-pad-v);   /* Section padding V (top + bottom of the band) */
}
/* Background image as a real layer so it can parallax on scroll (over-scaled top/
   height so the drift never reveals an edge; the section clips via overflow:hidden). */
.tm__bg {
  position: absolute;
  top: -15%; left: 0;
  width: 100%; height: 130%;
  background-image: var(--tm-image);
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}
.tm__overlay { position: absolute; inset: 0; background: rgba(36, 60, 45, 0.75); }

.tm__inner {
  position: relative;
  z-index: 1;
  max-width: calc(840px + 2 * var(--sec-pad-h));
  margin-inline: auto;
  padding-inline: var(--sec-pad-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Slider mechanics */
.tm__viewport { overflow: hidden; cursor: grab; }
.tm__viewport .tm__track.is-grabbing { cursor: grabbing; }
.tm--static .tm__meta { padding-right: 0; }   /* no arrows → no reserved space */
.tm__track { display: flex; gap: var(--sec-gap); transition: transform .45s ease; }
.tm__slide { flex: 0 0 100%; min-width: 100%; display: flex; flex-direction: column; }

/* Slide content */
.tm__quote {
  font-weight: var(--weight-light);
  font-size: var(--title-m);
  line-height: var(--title-m-lh);
  margin: 0;
}
.tm__q { color: var(--colour-primary-green); }
/* Quote + company grouped, separated by Content Gap. The viewport sizes to the
   tallest slide (no fixed height); shorter quotes sit centered within it.
   A single arrow group sits along a full-width rule at the bottom. */
.tm__slide { align-self: center; }   /* shorter quotes sit centered against the tallest slide */
.tm__meta { margin-top: var(--content-gap); }
.tm__company { font-weight: var(--weight-light); font-size: var(--title-s); line-height: var(--title-s-lh); }
/* Controls sit in normal flow below the (tallest) quote so there is always at
   least one Content Gap between the company and the divider line. */
.tm__controls {
  margin-top: var(--content-gap);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
/* Full-content-width rule sits above the arrows, separating them from the quote.
   On a slide change it wipes out then redraws in the travel direction (set by JS
   via .is-rtl / .is-ltr), so it follows the testimonials' movement. */
.tm__rule { width: 100%; height: 1px; background: var(--colour-medium-sand); transform-origin: left; }
.tm__rule.is-rtl { animation: tm-rule-rtl .6s cubic-bezier(.65,0,.35,1); }
.tm__rule.is-ltr { animation: tm-rule-ltr .6s cubic-bezier(.65,0,.35,1); }
/* Disappear right→left, then redraw right→left (origin flips while invisible) */
@keyframes tm-rule-rtl {
  0%   { transform: scaleX(1); transform-origin: left; }
  49%  { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(0); transform-origin: right; }
  100% { transform: scaleX(1); transform-origin: right; }
}
/* Mirror: disappear left→right, then redraw left→right */
@keyframes tm-rule-ltr {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) {
  .tm__rule.is-rtl, .tm__rule.is-ltr { animation: none; }
}
/* Bottom row under the rule: "Read testimonial" on the left, arrows on the right. */
.tm__bottom { display: flex; align-items: center; gap: var(--space-sm); }
.tm__arrows { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-left: auto; }
.tm--static .tm__meta { padding-right: 0; }   /* no arrows on the static variant */

/* "Read testimonial" uses the global bordered button (.btn--border-light); it
   just shouldn't stretch on the controls row. */
.tm__read { flex: 0 0 auto; }
/* .btn sets display:inline-flex, which would otherwise override the [hidden]
   attribute — keep the button hidden when there's no full testimonial to read. */
.tm__read[hidden] { display: none; }

/* Full-testimonial pop-up content (dialog styling is inherited from .txn-modal). */
.tm-modal__quote {
  font-weight: var(--weight-light); font-size: var(--title-s); line-height: var(--title-s-lh);
  color: var(--colour-dark-green); text-align: left; margin: 0;
}
.tm-modal__quote p + p { margin-top: var(--space-sm); }
.tm-modal__author {
  margin-top: var(--space-md); align-self: flex-start;
  font-weight: var(--weight-bold); font-size: var(--text-regular); color: var(--colour-dark-green);
}
.tm-modal .txn-modal__dialog { align-items: flex-start; text-align: left; }


/* team.css */
/* ==========================================================================
   Component: Team / Expertise highlight (Figma 15202:15322)
   Draggable people slider (vertical desktop → horizontal mobile) + expertise filter.
   ========================================================================== */
.team { background: var(--colour-white); }
.team--sand { background: var(--colour-light-sand); }   /* sand background variant (colours otherwise unchanged) */

.team__inner {
  display: grid;
  grid-template-columns: minmax(0, 757px) minmax(0, 488px);
  gap: var(--content-gap);
  align-items: stretch;
}
.team__cards { grid-column: 1; min-width: 0; }
/* Right column: filters then controls, separated by the global inner gap */
.team__side {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.team__top { min-width: 0; display: flex; flex-direction: column; gap: var(--content-gap); }
.team__controls {
  display: flex;
  flex-direction: row-reverse;   /* desktop: arrows left, CTA right (mobile flips back below) */
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: auto;   /* pin arrows + CTA to the bottom of the section */
}

/* ---- Slider ----------------------------------------------------------- */
.team__viewport { overflow: hidden; }
.team__track {
  display: grid;
  gap: var(--grid-gap);
  will-change: transform;
  cursor: grab;
  user-select: none;
}
.team__track.is-grabbing { cursor: grabbing; }

/* ---- Card ------------------------------------------------------------- */
.tcard { position: relative; transform-origin: center; }
/* Subtle elastic scale-up (no flicker) on reveal/filter/scroll */
.tcard.is-animating { animation: tcard-in .55s cubic-bezier(.34, 1.45, .5, 1) both; }
@keyframes tcard-in {
  from { transform: scale(.9);  opacity: .85; }
  to   { transform: scale(1);   opacity: 1; }
}
.tcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--colour-light-sand);
}
.tcard__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .5s ease;
  /* never let the browser grab/select the image while dragging the slider */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.tcard:hover .tcard__img { transform: scale(1.06); }

/* Fill mode (desktop vertical): cards stretch so the grid matches the side height */
.team__track.is-fill .tcard { height: 100%; }
.team__track.is-fill .tcard__media { aspect-ratio: auto; height: 100%; }
/* Full-photo link → profile. Sits below the gradient + info (later in the DOM)
   so the expertise tags and the name link stay clickable; the gradient is
   pointer-events:none so clicks on the photo fall through to this overlay. */
.tcard__media-link { position: absolute; inset: 0; display: block; }
/* Stop native link/image dragging so dragging the slider stays smooth (the
   clickable photo overlay + name/tag anchors would otherwise start a link-drag) */
.tcard a, .tcard img { -webkit-user-drag: none; user-select: none; }
/* Gradient behind the card text: default covers the bottom third at current
   strength; on hover it stretches to the middle and deepens. (Element opacity
   scales a full-strength gradient so both the reach and the depth animate.) */
.tcard__grad {
  position: absolute; left: 0; right: 0; bottom: 0; top: 66%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
  opacity: .62; pointer-events: none;
  transition: top .4s ease, opacity .4s ease;
}
/* Hover: gradient rises higher (covers ~60%) and deepens; top stays fully
   transparent (0% opacity) so it fades out cleanly at the top. */
.tcard:hover .tcard__grad,
.tcard:focus-within .tcard__grad { top: 40%; opacity: 1; }
.tcard__info { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-sm); color: var(--colour-white); }
/* Name + role stay white even though the card is clickable (no green hover). */
.tcard__name { display: flex; flex-direction: column; font-weight: var(--weight-light); font-size: var(--title-m); line-height: var(--title-m-lh); letter-spacing: -.03em; color: inherit; text-decoration: none; }
.tcard__role { font-size: var(--text-small); line-height: var(--text-small-lh); font-weight: var(--weight-bold); }
.tcard__tags { margin-top: var(--space-xxs); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); }
/* Highlight slider: tags hidden by default, revealed on hover/focus (like the grid) */
.team .tcard__tags {
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,.61,.36,1),
              max-height .5s cubic-bezier(.22,.61,.36,1), margin-top .5s cubic-bezier(.22,.61,.36,1);
}
.team .tcard:hover .tcard__tags,
.team .tcard:focus-within .tcard__tags {
  margin-top: var(--space-xxs); max-height: 48px; opacity: 1; transform: translateY(0);
}
.tcard__tag {
  font-family: var(--font-alt);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--colour-light-sand);
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color .3s ease;
}
.tcard__tag:hover, .tcard__tag.is-active { color: var(--colour-green-hover); }
.tcard__sep { color: rgba(255,255,255,.5); font-size: var(--text-tiny); }

.tcard__add { position: absolute; top: 0; right: 0; }
.tcard:hover .tcard__add { background: var(--colour-green-hover); }   /* highlight + on tile hover */

/* ---- Right panel ------------------------------------------------------ */
.team__title { font-weight: var(--weight-light); font-size: var(--title-l); line-height: var(--title-l-lh); letter-spacing: -0.02em; color: var(--colour-dark-green); }
.team__intro { font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--colour-dark-green); }
.team__select { font-size: var(--text-medium); color: var(--colour-dark-green); }

.team__expertise { display: flex; flex-direction: column; gap: var(--space-sm); }
.team__expertise-cols { display: flex; gap: 60px; }
.exp { display: flex; flex-direction: column; gap: var(--gap-s); }
.exp--all { margin: 0; }
.exp__link {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-alt);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  color: var(--colour-dark-green);
  text-align: left;
  background: none; border: none; cursor: pointer;
}
.exp__link:hover { color: var(--colour-primary-green); }
.exp__item.is-active .exp__link { color: var(--colour-primary-green); }
.exp__item.is-active .exp__link::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 1.2em; background: var(--colour-primary-green);
}

/* ---- Controls --------------------------------------------------------- */
.team__arrows { display: flex; flex-direction: column; gap: var(--space-xs); }
.team__arrows--row { flex-direction: row; }

/* ---- Responsive: stack panel → cards → controls ---------------------- */
@media (max-width: 900px) {
  .team__inner { display: flex; flex-direction: column; gap: var(--content-gap); }
  .team__side { display: contents; }                 /* dissolve so we can reorder */
  .team__top { order: 1; min-width: 0; max-width: 100%; }
  .team__cards { order: 2; }
  /* Mobile: flip back → green CTA left, nav arrows right */
  .team__controls { order: 3; flex-direction: row; align-items: center; justify-content: space-between; }
  /* CTA flexes so it never pushes the prev/next arrows off-row. */
  .team__controls .btn { flex: 1 1 auto; width: auto; min-width: 0; }
  .team__arrows { flex: 0 0 auto; }
  .team__title { font-size: var(--title-l); }

  /* Expertise → one inline, draggable/scrollable chip selector (no scrollbar),
     contained to the screen width so it can't push the section wider */
  .team__expertise {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    padding-bottom: var(--space-xxs);
  }
  .team__expertise::-webkit-scrollbar { display: none; }
  .team__expertise.is-grabbing { cursor: grabbing; }
  .team__expertise-cols { display: contents; }
  .exp { display: contents; }
  .exp__item { flex: 0 0 auto; }
  .exp__link {
    padding: 8px 14px;
    background: var(--colour-light-sand);
    color: var(--colour-dark-green);
    white-space: nowrap;
  }
  .exp__link::before { display: none !important; }   /* hide the vertical marker */
  .exp__item.is-active .exp__link { background: var(--colour-primary-green); color: var(--colour-white); }
}

/* expertises.css */
/* ==========================================================================
   Component: Expertises (Figma 13466:9574) — slider + list variants
   ========================================================================== */
.exper { background: var(--colour-white); }
.exper--sand { background: var(--colour-light-sand); }   /* sand background variant (colours otherwise unchanged) */
.exper .container { display: flex; flex-direction: column; gap: var(--content-gap); }

/* Header: heading left, intro right */
.exper__head { display: flex; gap: var(--content-gap); align-items: flex-start; }
.exper__title { flex: 1 1 0; font-weight: var(--weight-light); font-size: var(--title-l); line-height: var(--title-l-lh); letter-spacing: -0.02em; color: var(--colour-dark-green); }
.exper__intro { flex: 1 1 0; font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--colour-dark-green); }

/* ---- Card ------------------------------------------------------------- */
.exper-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* icon pinned top; text centred via auto margins below */
  gap: var(--space-sm);
  min-height: 376px;
  padding: 25px;
  border-radius: 5px;
  background: var(--colour-dark-green);
  color: var(--colour-white);
  transition: transform .4s ease, box-shadow .4s ease;
}
/* Featured image reveal on hover — covers the card, max 30% opacity, with a
   slow Ken Burns zoom while hovered. */
.exper-card__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .8s ease, transform 6s ease-out;
  pointer-events: none;
}
.exper-card:hover .exper-card__bg { opacity: .3; transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) {
  .exper-card__bg, .exper-card:hover .exper-card__bg { transition: opacity .8s ease; transform: none; }
}
.exper-card__ic, .exper-card__body, .exper-card__more { position: relative; z-index: 1; }
.exper-card:hover { transform: translateY(-5px); }
.exper-card:hover .exper-card__title { color: var(--colour-green-hover); }
.exper-card:hover .exper-card__ic { color: var(--colour-green-hover); }
.exper-card__title { transition: color .4s ease; }
.exper-card__ic { transition: color .4s ease; }
.exper-card__more {
  margin-top: auto;   /* pushed to the bottom; content above is top-aligned */
  font-family: var(--font-alt);
  font-size: var(--text-small);
  color: var(--colour-green-hover);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.exper-card:hover .exper-card__more { opacity: 1; transform: translateY(0); }
.exper-card__ic { color: var(--colour-primary-green); }
.exper-card__icon { width: 50px; height: 51px; }
/* Icon stays at the top; the text block (title/desc + "more") is centred in the
   space beneath it via the auto margins above the body and below "more". */
.exper-card__ic { align-self: flex-start; }
/* Top-align the text block right under the icon (was centred) so every card's
   title and description start at the same height. */
.exper-card__body { display: flex; flex-direction: column; gap: var(--space-xs); }
/* Reserve two lines for the title so descriptions always start at the same height,
   even when a title fits on one line. */
.exper-card__title { font-weight: var(--weight-light); font-size: var(--title-m); line-height: var(--title-m-lh); color: var(--colour-light-sand); min-height: calc(var(--title-m) * var(--title-m-lh) * 2); display: flex; align-items: center; }
.exper-card__desc { font-weight: var(--weight-light); font-size: var(--text-small); line-height: var(--text-small-lh); }

/* ---- List / archive variant ------------------------------------------ */
.exper__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

/* ---- Slider variant --------------------------------------------------- */
.exper__slider { display: flex; flex-direction: column; gap: var(--content-gap); }
.exper__viewport { overflow: hidden; }
.exper__track { display: flex; gap: var(--grid-gap); cursor: grab; user-select: none; }
.exper__track.is-grabbing { cursor: grabbing; }
.exper-card { flex: 0 0 auto; }            /* width set by JS in slider */
.exper__grid .exper-card { flex: initial; }

/* Arrows left, "Explore Expertises" right, spanning the slider width */
.exper__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.exper__nav { display: flex; gap: var(--space-xs); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .exper__head { flex-direction: column; gap: var(--space-sm); }
  .exper__title { font-size: var(--title-l); }
  .exper__grid { grid-template-columns: 1fr 1fr; }
  /* CTA flexes so it never pushes the prev/next arrows off-row. */
  .exper__controls .btn { flex: 1 1 auto; width: auto; min-width: 0; }
  .exper__nav { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .exper__grid { grid-template-columns: 1fr; }
}

/* two-col.css */
/* ==========================================================================
   Component: 2 Col - Scrollable (Figma 13337:9871)
   Sticky image + page-scrolling list (no inner scrollbar). Orientation L/R.
   ========================================================================== */
.twocol { background: #fffdfd; }
.twocol .container { display: flex; flex-direction: column; gap: var(--content-gap); }

.twocol__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}

.twocol__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--content-gap);
  align-items: start;
}

/* List — flows with the page; it's the tall side */
.twocol__list { display: flex; flex-direction: column; }
.twocol__row {
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--colour-medium-sand);
  font-weight: var(--weight-light);
  font-size: var(--title-s);
  line-height: var(--title-s-lh);
  letter-spacing: -0.01em;
  color: var(--colour-dark-green);
}

/* Image — static by default; pins below the nav (while the list scrolls past)
   only when motion is enabled (.kl-anim), see the rule below. */
.twocol__media {
  position: relative;   /* containing block for the absolutely-positioned image */
  align-self: start;
  aspect-ratio: 568 / 500;
  background: var(--colour-light-sand);
  border-radius: 5px;
  overflow: hidden;
}
.kl-anim .twocol__media { position: sticky; top: var(--sticky-col-top); }
.twocol__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Orientation right: image left, list right */
.twocol--right .twocol__list { order: 2; }
.twocol--right .twocol__media { order: 1; }

/* Stack earlier (≤1024px): heading → list (content) → image, both orientations
   identical, no sticky. Content always on top, image below. */
@media (max-width: 1024px) {
  .twocol__inner { display: flex; flex-direction: column; gap: var(--content-gap); }
  .twocol__list,
  .twocol--right .twocol__list { order: 1; }
  .twocol__media,
  .twocol--right .twocol__media { order: 2; position: relative; top: auto; align-self: stretch; }   /* relative keeps the absolute image in its frame; stretch gives it full width (so it doesn't collapse) */
}

/* image-full.css */
/* ==========================================================================
   Component: Image Full Width (Figma 13337:10041)
   ========================================================================== */
/* Full-bleed banner. The image is oversized inside an overflow-hidden frame so
   it can drift on scroll (parallax), mirroring the hero/page-header treatment.
   The JS in main.js auto-animates any [data-parallax] element. */
.imgfull {
  position: relative;
  overflow: hidden;
  height: clamp(213px, 35vw, 453px);   /* ~⅓ shorter than before */
}
/* Media box — flush cover by default (motion off). */
.imgfull__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Parallax on: oversize so the drift has room. */
.kl-parallax .imgfull__media { top: -30%; height: 160%; will-change: transform; }
/* Image: slow Ken Burns zoom — runs only while the section is in view */
.imgfull__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}
.imgfull.is-inview .imgfull__img { animation: kl-kenburns 14s ease-out forwards; }
@keyframes kl-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Honour reduced-motion: no Ken Burns zoom. */
@media (prefers-reduced-motion: reduce) {
  .imgfull.is-inview .imgfull__img { animation: none; }
}

/* transactions.css */
/* ==========================================================================
   Component: Transactions (cards + popup). Grid or slider layout.
   ========================================================================== */
.txn { background: var(--colour-white); }
.txn--sand { background: var(--colour-light-sand); }   /* sand background variant (colours otherwise unchanged) */
.txn__inner { display: grid; grid-template-columns: 300px 1fr; gap: var(--content-gap); align-items: start; }

/* Left panel — always sticky (kept for Transactions specifically; the client's
   "no sticky" applies to the other components, not this one). Capped to the
   viewport height with an internal scroll so a tall filter list (search +
   client + sort dropdowns) is never clipped off-screen. */
.txn__panel {
  display: flex; flex-direction: column; gap: var(--content-gap);
  position: sticky; top: var(--sticky-col-top);
  max-height: calc(100dvh - var(--sticky-col-top) - var(--space-md));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-xxs);   /* breathing room for the scrollbar */
}

/* Right column wrapper (grid layout) — holds the sticky filter toolbar + cards. */
.txn__main { min-width: 0; display: flex; flex-direction: column; gap: var(--content-gap); }

/* List-page filter toolbar: search + client + sort, inline on a sand bar that
   sticks to the top of the results as you scroll. Wraps to stacked on mobile. */
.txn__toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm); padding: var(--space-sm);   /* gap = padding all around */
  background: var(--colour-white);
  border: 1px solid var(--colour-medium-sand);
  border-radius: 5px;   /* matches the transaction card */
  position: sticky; top: var(--sticky-col-top); z-index: 6;
  transition: box-shadow .25s ease;
}
.txn__toolbar.is-stuck { box-shadow: 0 14px 32px rgba(36, 60, 45, .20), 0 5px 12px rgba(36, 60, 45, .12); }
.txn__toolbar .txn__search { flex: 1 1 240px; }
.txn__toolbar .txn__select { flex: 0 1 220px; }
@media (max-width: 560px) {
  .txn__toolbar .txn__search, .txn__toolbar .txn__select { flex: 1 1 100%; }
}

/* ---- List page ------------------------------------------------------------
   Wide desktop (≥1200px): keep the nice left sidebar expertise filter; the
   toolbar's expertise dropdown is hidden. Below 1200px: drop the sidebar, show
   the expertise dropdown in the toolbar, and let cards use the full width (so the
   toolbar never wraps and the cards never get squeezed). -------- */
.txn--list .txn__toolbar [data-txn-expertise] { display: none; }
/* Toolbar controls stay on one line at every desktop/tablet width (with or
   without the sidebar) — the base rule lets search grow and wrap sort onto a
   second line. */
.txn--list .txn__toolbar { flex-wrap: nowrap; }
.txn--list .txn__toolbar .txn__search { flex: 2 1 0; min-width: 0; }
.txn--list .txn__toolbar .txn__select { flex: 1 1 0; min-width: 0; }

@media (max-width: 1199.98px) {
  .txn--list .txn__inner { display: block; }
  .txn--list .txn__filter { display: none; }
  .txn--list .txn__panel { position: static; max-height: none; overflow: visible; padding-right: 0; margin-bottom: var(--content-gap); }
  .txn--list .txn__main { width: 100%; }
  .txn--list .txn__toolbar [data-txn-expertise] { display: block; }
}
@media (max-width: 640px) {
  /* Search on its own row; the dropdowns share a 3-column row beneath it. */
  .txn--list .txn__toolbar { flex-wrap: wrap; gap: var(--space-xs); }
  .txn--list .txn__toolbar .txn__search { flex: 1 1 100%; }
  .txn--list .txn__toolbar .txn__select { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 26px; background-position: right 8px center; }
}
@media (max-width: 479.98px) {
  /* Too tight for three — keep only Expertise + Clients. */
  .txn--list .txn__toolbar [data-txn-sort] { display: none; }
}
.txn__title { font-weight: var(--weight-light); font-size: var(--title-l); line-height: var(--title-l-lh); letter-spacing: -0.02em; color: var(--colour-dark-green); }
.txn__title .txn__hl { color: var(--colour-primary-green); }   /* dynamic name/count highlight */
.txn__intro { font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--colour-dark-green); }
.txn__filter-label { font-size: var(--text-regular); color: var(--colour-dark-green); }
.txn__filter { display: flex; flex-direction: column; gap: var(--space-sm); }

/* List-page controls: search + client filter + sort (same look as the People grid). */
.txn__controls { display: flex; flex-direction: column; gap: var(--space-sm); }
.txn__search, .txn__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--colour-medium-sand);
  background-color: var(--colour-white);
  font: inherit; line-height: 1.2; color: var(--colour-dark-green);
}
.txn__search:focus, .txn__select:focus { outline: 2px solid var(--colour-primary-green); outline-offset: 0; }
.txn__select {
  padding-right: 44px; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /* Design-system down chevron (matches .btn-icon--arrow), primary green. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ae42' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
}
.txn__select::-ms-expand { display: none; }

/* CTA on the left, arrows on the right, on the same row */
.txn__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: nowrap; }
.txn__nav { display: flex; gap: var(--space-xs); flex: 0 0 auto; order: 1; }   /* arrows to the right */
.txn__cta { flex: 0 0 auto; }
/* Desktop slider actions live in the narrow (300px) left panel. Keep the CTA and
   arrows on ONE row: the arrow blocks stay their fixed size and the CTA takes
   whatever width is left (dropping its rigid 200px), so nothing overflows the
   section. Kept to one line — the label is short enough to fit (see the CTA copy
   in transactions.php / Brand → Global content). (Mobile actions are full-width
   and handled in the max-width:900px block below.) */
@media (min-width: 901px) {
  .txn[data-txn-layout="slider"] .txn__actions { flex-wrap: nowrap; }
  .txn[data-txn-layout="slider"] .txn__cta { flex: 1 1 auto; width: auto; min-width: 0; }
  .txn[data-txn-layout="slider"] .txn__nav { flex: 0 0 auto; }
}

/* Slider: title + description grouped at the top (separated by Content Gap);
   the CTA + arrows group pinned to the bottom of the section. */
.txn[data-txn-layout="slider"] .txn__inner { align-items: stretch; }
.txn[data-txn-layout="slider"] .txn__panel { position: static; top: auto; gap: var(--content-gap); }
.txn[data-txn-layout="slider"] .txn__actions { margin-top: auto; }

/* Card grid / slider */
.txn__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.txn__viewport { overflow: hidden; }

/* Pagination (filter grid) */
.txn__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-lg); grid-column: 1 / -1; }
.txn-pag__btn {
  min-width: 36px; height: 36px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--colour-light-sand);
  color: var(--colour-dark-green);
  font-size: var(--text-small);
  border: none; border-radius: 3px; cursor: pointer;
  transition: background-color .4s ease, color .4s ease;
}
.txn-pag__btn:hover:not(:disabled) { background: var(--colour-medium-sand); }
.txn-pag__btn.is-active { background: var(--colour-primary-green); color: var(--colour-white); }
.txn-pag__btn--arrow { color: var(--colour-primary-green); font-size: var(--text-medium); }
.txn-pag__btn:disabled { opacity: .4; cursor: default; }
.txn-pag__gap { min-width: 24px; text-align: center; color: var(--colour-light-grey); }
.txn__track { display: flex; gap: var(--grid-gap); cursor: grab; }
.txn__track.is-grabbing { cursor: grabbing; }
.txn__track .txn-card { flex: 0 0 auto; }

/* ---- Card ------------------------------------------------------------- */
.txn-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  text-align: center; padding: var(--space-sm);
  background: var(--colour-light-sand); border: none; border-radius: 5px; cursor: pointer;
  overflow: hidden;   /* clip the full-width expertise band to the rounded corners */
  transition: transform .4s ease;
}
.txn-card:hover { transform: translateY(-5px); }
/* While dragging the slider, don't let the hover-lift fire as the cursor passes
   over cards — it makes the card bob down/up under the pointer mid-drag. */
.txn__track.is-grabbing .txn-card,
.txn__track.is-grabbing .txn-card:hover { transform: none; transition: none; }
/* Client logo image stacked on top of the client name */
.txn-card__logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 96px; }
/* Every logo is contained within the same 160×60 box (scales proportionally, no
   crop). multiply drops white logo backgrounds onto the sand card. */
.txn-card__logo-img { width: 220px; height: 80px; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.txn-card__client { font-weight: var(--weight-bold); font-size: var(--text-small); color: var(--colour-dark-green); }
.txn-card__client { display: none; }   /* hidden when a logo image is present (testing) */
/* No logo image → show the client name at the logo's visual size instead */
.txn-card__logo--noimg .txn-card__client { display: block; font-size: var(--title-m); font-weight: var(--weight-light); line-height: var(--title-m-lh); }
.txn-card__mark { color: var(--colour-primary-green); }
/* Expertise band: full-width dark-green strip pinned to the bottom of the card.
   align-self:stretch + negative margins break out of the card padding to the edges;
   min-height keeps the bands a consistent height across cards. */
.txn-card__tags {
  align-self: stretch;
  margin: 0 calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm));
  padding: var(--space-xs);
  background: var(--colour-dark-green);
  display: flex; flex-wrap: wrap; gap: var(--gap-s);
  justify-content: center; align-items: center;
  /* Fixed height = three lines of content + the row-gaps between wrapped lines +
     vertical padding, so every card's band is identical and 3 lines never clip. */
  height: calc(var(--text-tiny) * var(--text-tiny-lh) * 3 + var(--gap-s) * 2 + var(--space-xs) * 2); box-sizing: border-box; overflow: hidden;
}
.txn-card__tag { font-family: var(--font-alt); font-size: var(--text-tiny); color: var(--colour-white); transition: color .4s ease; }
a.txn-card__tag:hover, a.txn-card__tag:focus { color: var(--colour-primary-green); }
/* Kain-green separator between expertises on the same band. */
.txn-card__tag + .txn-card__tag::before { content: "•"; margin-right: var(--gap-s); color: var(--colour-primary-green); }
/* Title is a button that opens the popup; sits in the vertical middle, auto margins push led-by + people to the bottom */
.txn-card__title {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0;
  font-family: inherit; font-weight: var(--weight-light); font-size: var(--title-xs); line-height: var(--title-xs-lh);
  color: var(--colour-dark-green); cursor: pointer; text-align: center;
  transition: color .4s ease; margin-bottom: auto;   /* top-align the title; push led-by/people/band to the bottom */
}
.txn-card__title:hover, .txn-card__title:focus { color: var(--colour-primary-green); }

/* "Led by" with green flanking lines */
.txn-card__ledby, .txn-modal__ledby {
  display: flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-alt); font-size: var(--text-tiny); text-transform: uppercase; letter-spacing: .08em;
  color: var(--colour-dark-green); margin-top: var(--space-xxs);
}
.txn-card__line { width: 28px; height: 2px; background: var(--colour-primary-green); }

/* Keep the "Led by" people on ONE row (never stack two people vertically); names
   may wrap under the avatar if the card is narrow. */
/* Sit the profiles closer to "Led by" — one grid-gap below it, not the full card gap. */
.txn-card__people { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: nowrap; margin-top: calc(var(--grid-gap) - var(--space-sm)); }
.txn-card__person { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); min-width: 0; color: var(--colour-dark-green); }
.txn-card__person:hover .txn-card__name { color: var(--colour-primary-green); }   /* hover highlights person only */
.txn-card__avatar { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--colour-medium-sand); }
.txn-card__name { font-size: var(--text-tiny); transition: color .4s ease; }

/* ---- Popup ------------------------------------------------------------ */
.txn-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-md); }
.txn-modal.is-open { display: flex; }
.txn-modal__overlay { position: absolute; inset: 0; background: rgba(36,60,45,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.txn-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm);
  padding: var(--space-lg); background: var(--colour-light-sand); border-radius: 5px; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.txn-modal__close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 38px; height: 38px; }
.txn-modal__logo { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 200px; max-width: 100%; }
.txn-modal__logo-img { width: 100%; height: auto; max-height: 90px; object-fit: contain; mix-blend-mode: multiply; }
.txn-modal__client { font-weight: var(--weight-bold); font-size: var(--text-small); color: var(--colour-dark-green); }
.txn-modal__client { display: none; }   /* hidden when a logo image is present (testing) */
.txn-modal__logo--noimg .txn-modal__client { display: block; font-size: var(--title-m); font-weight: var(--weight-light); line-height: var(--title-m-lh); }
.txn-modal__desc strong { color: var(--colour-dark-green); }
.txn-modal__tag { font-family: var(--font-alt); font-size: var(--text-tiny); color: var(--colour-white); background: var(--colour-dark-green); padding: 4px 10px; }
.txn-modal__title { font-weight: var(--weight-light); font-size: var(--title-m); line-height: var(--title-m-lh); color: var(--colour-dark-green); }
.txn-modal__desc { font-size: var(--text-regular); color: var(--colour-dark-green); }
.txn-modal__people { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.txn-modal__person { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); color: var(--colour-dark-green); }
.txn-modal__person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--colour-medium-sand); }
.txn-modal__person span { font-size: var(--text-tiny); }

/* ---- Responsive ------------------------------------------------------- */
/* Three across until ~900px, then two per row. */
@media (max-width: 900px) { .txn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .txn__inner { display: flex; flex-direction: column; gap: var(--content-gap); }
  .txn__panel { position: static !important; top: auto; }   /* never sticky once stacked */
  .txn__intro, .txn__filter { display: none; }   /* mobile identical across variants */
  .txn__title { font-size: var(--title-l); }
  /* Clear the desktop bottom-pinned CTA so the stacked title/cards/CTA never overlap. */
  .txn[data-txn-layout="slider"] .txn__actions { margin-top: 0; }

  /* SLIDER layout only (already a slider on desktop): dissolve the panel so it
     stacks title → slider → actions. The slider stays JS transform-based at
     every width (same mechanics as the Expertise / People sliders) so drag works
     consistently on mobile — no native scroll. The GRID listing stays a normal
     stacked grid (no slider on mobile). */
  .txn[data-txn-layout="slider"] .txn__panel { display: contents; }
  .txn[data-txn-layout="slider"] .txn__title { order: 1; }
  .txn[data-txn-layout="slider"] .txn__viewport { order: 2; }
  .txn[data-txn-layout="slider"] .txn__actions { order: 3; }
  .txn__viewport { max-width: 100%; }   /* overflow stays hidden (base); JS transforms the track */
  .txn__viewport .txn-card {
    min-width: 0;
    flex: 0 0 100% !important;   /* one card per view on mobile */
    width: 100% !important;
    max-width: 100%;
  }
  /* Slider CTA flexes so it never pushes the prev/next arrows out. */
  .txn[data-txn-layout="slider"] .txn__actions .txn__cta { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (max-width: 560px) {
  .txn__cards { grid-template-columns: 1fr; }
}

/* people-grid.css */
/* ==========================================================================
   Component: People archive grid (search + expertise filter, reuses .tcard)
   ========================================================================== */
/* Stack controls → grid with a real flex gap (not a margin) so it's the
   detectable, semantic Content gap token. */
.pgrid-sec .container { display: flex; flex-direction: column; gap: var(--content-gap); }
.pgrid__controls { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.pgrid__search {
  flex: 0 0 300px; max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--colour-medium-sand);
  background: var(--colour-white);
  font: inherit; line-height: 1.2; color: var(--colour-dark-green);
}
.pgrid__search:focus { outline: 2px solid var(--colour-primary-green); outline-offset: 0; }
.pgrid__filter { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 0; min-width: 0; }
.chip {
  padding: 8px 14px; border: none; cursor: pointer; white-space: nowrap;
  background: var(--colour-light-sand); color: var(--colour-dark-green);
  font-family: var(--font-alt); font-size: var(--text-small);
}
.chip:hover { color: var(--colour-primary-green); }
.chip.is-active { background: var(--colour-primary-green); color: var(--colour-white); }

/* Dropdown filter mode: fixed-width select, search fills the rest of the row. */
.pgrid__select {
  flex: 0 0 260px; max-width: 100%;
  /* Match .pgrid__search box model exactly (both border-box) so heights align;
     extra right padding leaves room for the design-system chevron. */
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--colour-medium-sand);
  background-color: var(--colour-white);
  font: inherit; line-height: 1.2; color: var(--colour-dark-green);
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /* Design-system down chevron (matches .btn-icon--arrow), primary green. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ae42' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
.pgrid__select:focus { outline: 2px solid var(--colour-primary-green); outline-offset: 0; }
.pgrid__select::-ms-expand { display: none; }
.pgrid__controls--dropdown { flex-wrap: nowrap; }
.pgrid__controls--dropdown .pgrid__search { flex: 1 1 auto; }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }

/* Scroll reveal — subtle elastic scale-in, staggered left→right per row.
   Hidden state is only applied once JS adds .is-reveal (so no-JS shows cards). */
.pgrid.is-reveal .tcard { transform: translateY(22px) scale(.94); transition: transform .6s cubic-bezier(.34, 1.45, .5, 1); }
.pgrid.is-reveal .tcard.is-inview { transform: translateY(0) scale(1); }
.tcard__tag-static { font-family: var(--font-alt); font-size: var(--text-tiny); text-transform: uppercase; letter-spacing: .02em; color: var(--colour-light-sand); }
.pgrid__empty { color: var(--color-text-muted); }

/* Listing layout only: reveal the expertise tags on hover / keyboard focus. */
.pgrid .tcard__tags {
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,.61,.36,1),
              max-height .5s cubic-bezier(.22,.61,.36,1), margin-top .5s cubic-bezier(.22,.61,.36,1);
}
.pgrid .tcard:hover .tcard__tags,
.pgrid .tcard:focus-within .tcard__tags {
  margin-top: var(--space-xxs); max-height: 48px; opacity: 1; transform: translateY(0);
}

@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pgrid__search { flex: 1 1 100%; }
  .pgrid__filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pgrid__filter::-webkit-scrollbar { display: none; }
  .pgrid__controls--dropdown { flex-wrap: wrap; }
  .pgrid__select { flex: 1 1 100%; }
}
@media (max-width: 480px) { .pgrid { grid-template-columns: 1fr; } }

/* pagehead.css */
/* ==========================================================================
   Component: Page header (image + overlaid title, dark-green intro band)
   ========================================================================== */
.pagehead { background: var(--colour-dark-green); }
.pagehead__media {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-dark-grey);
  min-height: 540px;
  display: flex;
  align-items: flex-end;
}
/* No image set → dark-green header band (spot missing header images easily). */
.pagehead--empty .pagehead__media { background: var(--colour-dark-green); }
.pagehead--empty .pagehead__media::after { display: none; }
.pagehead__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;            /* flush cover by default (motion off) */
  object-fit: cover;
  z-index: 0;
}
/* Parallax on: oversize so the drift has room. */
.kl-parallax .pagehead__img { top: -30%; height: 160%; will-change: transform; }
/* Ken Burns slow zoom (desktop only, opt-in via data-kenburns). Animates the
   `scale` property so it composes with the parallax `transform` (translate)
   rather than overriding it. is-inview is toggled by the observer in main.js. */
@media (min-width: 768px) {
  .pagehead[data-kenburns].is-inview .pagehead__img {
    animation: kl-pagehead-kenburns 18s ease-out forwards;
  }
}
@keyframes kl-pagehead-kenburns { from { scale: 1; } to { scale: 1.12; } }
@media (prefers-reduced-motion: reduce) {
  .pagehead[data-kenburns] .pagehead__img { animation: none !important; }
}
/* darkening overlay for legible white title */
.pagehead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two black gradients: top→bottom (keeps the nav readable) + left→right (anchors the title) */
  background:
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 35%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 35%, rgba(0,0,0,.05) 100%);
}
.pagehead__media .container { position: relative; z-index: 2; width: 100%; }
/* Section eyebrow — small bold green label (parent nav item) above the title */
.pagehead__eyebrow {
  font-weight: var(--weight-bold);
  font-size: var(--text-large);
  color: var(--colour-primary-green);
  margin-bottom: var(--space-xs);
}
.pagehead__eyebrow a { color: inherit; text-decoration: none; }
.pagehead__eyebrow a:hover,
.pagehead__eyebrow a:focus { text-decoration: underline; }

.pagehead__title {
  color: var(--colour-white);
  font-weight: var(--weight-light);
  font-size: var(--title-xl);          /* hero headers use Title XL (home hero keeps XXL) */
  line-height: var(--title-xl-lh);
  letter-spacing: -0.02em;
  padding-bottom: var(--space-lg);
  max-width: 50%;            /* never wider than half the header on desktop */
}
/* News article hero: smaller title than section pageheads + 1000px frame, 350px tall */
.pagehead--news .pagehead__media { min-height: 350px; }
.pagehead--news .pagehead__title { font-size: var(--title-l); max-width: 70%; }
.pagehead--news .container { max-width: calc(1000px + 2 * var(--sec-pad-h)); margin-inline: auto; }
/* Dark-green hero variant (no image). Keeps the default banner height + the
   default flex bottom-alignment, so content sits at the bottom with padding. */
.pagehead--dark { background: var(--colour-dark-green); }
.pagehead--dark .pagehead__media { background: none; }
.pagehead--dark .pagehead__media::after { display: none; }
/* People-highlight hero: mirrors the people-detail header — sand background,
   news banner content (category/date/title) on the left, cut-out headshot
   filling the banner height, bottom-aligned, inside the 1000px content frame. */
.pagehead--person { background: var(--colour-light-sand); }
.pagehead--person .pagehead__media { background: none; }      /* keep default min-height (banner height) */
.pagehead--person .pagehead__media::after { display: none; }   /* no dark overlay */
.pagehead--person .container {
  max-width: calc(1000px + 2 * var(--sec-pad-h)); margin-inline: auto;
  position: relative; align-self: stretch;                     /* fill the banner height */
  display: flex; align-items: flex-end; padding-block: var(--sec-pad-v);
}
.pagehead--person .pagehead__head { position: relative; z-index: 1; flex: 1 1 auto; }
.pagehead--person .pagehead__title { color: var(--colour-dark-green); padding-bottom: 0; }
.pagehead--person .pagehead__meta { color: var(--colour-dark-green); }
.pagehead--person .pagehead__meta .n-meta__date,
.pagehead--person .pagehead__meta .n-meta__read { color: var(--colour-dark-green); }
/* Headshot fills the banner height, anchored bottom-right (like person.php) */
.pagehead--person .pagehead__person {
  position: absolute; right: 0; bottom: 0;
  height: 100%; width: auto; max-width: 46%;
  object-fit: contain; object-position: bottom right;
}
@media (max-width: 768px) {
  .pagehead--person .pagehead__person { max-width: 40%; }
}
.pagehead--dark .pagehead__title { color: var(--colour-white); }
.pagehead--dark .pagehead__meta { color: var(--colour-white); }

@media (max-width: 768px) {
  /* Definite height frames the parallax-oversized image (the box is overflow:hidden),
     so the hero image can't spill past the frame on mobile. */
  .pagehead__media { min-height: 0; height: 340px; }
  /* Variants with no background image / special layouts keep flexible height. */
  .pagehead--dark .pagehead__media,
  .pagehead--person .pagehead__media { height: auto; min-height: 300px; }
  .pagehead--news .pagehead__media { height: 300px; }
  .pagehead__title { max-width: 100%; }   /* full-width title on mobile (keeps Title XL) */
  .pagehead__img { object-position: center; }                       /* centre the image on mobile */
}

/* person.css */
/* ==========================================================================
   Component: Person detail header
   ========================================================================== */
.person { background: var(--colour-light-sand); overflow: hidden; }
.person__inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-lg); align-items: stretch; }
/* Top-level groups separated by the content gap (inspector-highlighted);
   vertical section padding uses the content pad token. */
.person__info { padding-block: var(--sec-pad-v); display: flex; flex-direction: column; gap: var(--content-gap); }
.person__head { display: flex; flex-direction: column; gap: var(--space-xs); }   /* eyebrow / name / role — tight */
.person__contact-group { display: flex; flex-direction: column; }
.person__spec { display: flex; flex-direction: column; gap: var(--space-sm); }     /* label → tags — tight */
.person__eyebrow { font-weight: var(--weight-bold); font-size: var(--text-large); color: var(--colour-primary-green); }
.person__eyebrow a { color: inherit; text-decoration: none; }
.person__eyebrow a:hover, .person__eyebrow a:focus { text-decoration: underline; }
.person__name { font-weight: var(--weight-light); font-size: var(--title-xxl); line-height: var(--title-xxl-lh); letter-spacing: -0.02em; color: var(--colour-dark-green); }
.person__role { font-size: var(--title-s); font-weight: var(--weight-light); color: var(--colour-dark-green); }
/* Show/hide contact details toggle */
/* Fixed width so "Show…" and "Hide…" don't change the button's size on toggle */
.person__toggle { width: 240px; }
/* Collapsible panel — slides open (grid 0fr→1fr animates the auto height) */
.person__details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .4s ease, opacity .4s ease, margin-top .4s ease;
}
.person__details.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: var(--space-sm); }
.person__details > * { min-height: 0; overflow: hidden; }   /* required for the grid-rows slide */
@media (prefers-reduced-motion: reduce) { .person__details { transition: none; } }

.person__contact { display: flex; flex-direction: column; gap: var(--gap-s); }
.person__c-row { display: flex; gap: var(--gap-m); font-size: var(--text-medium); }
.person__c-row dt { color: var(--colour-dark-green); flex: 0 0 96px; }
.person__c-row dd { margin: 0; }
.person__c-row a { color: var(--colour-primary-green); text-decoration: underline; }
.person__c-row a:hover { color: var(--colour-green-active); }
.person__spec-label { color: var(--colour-dark-green); }
.person__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.person__tag { display: inline-block; background: var(--colour-dark-green); color: var(--colour-white); font-family: var(--font-alt); font-size: var(--text-tiny); padding: 6px 12px; transition: background-color .4s ease, color .4s ease; }
a.person__tag:hover, a.person__tag:focus { background: var(--colour-primary-green); color: var(--colour-white); }
/* Photo fills the header height (driven by the left column's content) and stays
   anchored to the bottom. Absolute so the image's own size never grows the row. */
.person__photo { position: relative; align-self: stretch; min-height: 0; }
/* On page load: rise + fade in from the bottom. (The <img> itself is reserved for
   the JS scroll parallax, so the entrance lives on the wrapper to avoid clashing.) */
.person__photo { animation: kl-photo-rise .9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes kl-photo-rise {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .person__photo { animation: none; }
}
.person__photo img {
  position: absolute;
  inset: auto 0 0 0;        /* pin to bottom, full width box */
  margin-inline: auto;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  will-change: transform;
}

/* ---- Bio: short intro (left, intro-card style) + body / experience list (right) ---- */
.pbio__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-lg); align-items: start; }
.pbio__intro, .pbio__intro p { font-size: var(--title-m); line-height: var(--title-m-lh); letter-spacing: -0.02em; font-weight: var(--weight-light); color: var(--colour-dark-green); }
/* Scroll-driven colour fill: words start in dark sand and fill to dark green,
   word-by-word in reading order (left→right, top→bottom) as the section scrolls. */
.pbio__intro.is-scrollfill { --fill-from: var(--colour-medium-sand); --fill-to: var(--colour-dark-green); }
.pbio__intro.is-scrollfill .kl-fw { color: var(--fill-from); transition: color .4s ease; }
.pbio__intro.is-scrollfill .kl-fw.is-filled { color: var(--fill-to); }
.pbio__intro p + p { margin-top: var(--space-sm); }
.pbio__body { font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--colour-dark-green); }
.pbio__body p + p, .pbio__body p + ul, .pbio__body ul + p { margin-top: var(--space-sm); }
.pbio__body ul { padding-left: 1.2em; list-style: disc; }
.pbio__body li { margin-bottom: var(--space-xs); }
.pbio__body strong { color: var(--colour-dark-green); font-weight: var(--weight-bold); }

/* Keep the short intro pinned while the body scrolls past (side layout only) */
@media (min-width: 901px) {
  .kl-anim .pbio--intro-side .pbio__intro { position: sticky; top: var(--sticky-col-top); }
}
/* Intro-top layout: the intro spans full width on top; the biography detail sits
   in the RIGHT half below (50/50, left half empty) on desktop. Stacks on mobile. */
.pbio--intro-top .pbio__grid { grid-template-columns: 1fr; gap: var(--content-gap); }
@media (min-width: 901px) {
  .pbio--intro-top .pbio__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); }
  .pbio--intro-top .pbio__intro { grid-column: 1 / -1; }   /* full-width intro on top */
  .pbio--intro-top .pbio__body  { grid-column: 2 / 3; }     /* detail in the right half */
}
@media (max-width: 900px) {
  .pbio__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

@media (max-width: 768px) {
  .person__inner { grid-template-columns: 1fr; align-items: start; }
  .person__info { padding-bottom: var(--space-md); }
  .person__name { font-size: var(--title-l); }
  .person__photo { align-self: auto; }
  .person__photo img { position: static; inset: auto; height: auto; max-height: 420px; }
}

/* news.css */
/* ==========================================================================
   Component: News — card grid + compact row
   ========================================================================== */
.news { background: var(--colour-white); }
.news__heading { font-weight: var(--weight-light); font-size: var(--title-l); letter-spacing: -0.02em; color: var(--colour-dark-green); margin-bottom: var(--space-lg); }

/* shared meta + author */
.n-meta { display: flex; gap: var(--space-sm); align-items: center; font-size: var(--text-tiny); color: var(--color-text-muted); }
.n-meta__date { background: var(--colour-light-sand); padding: 3px 8px; color: var(--colour-dark-green); }
.n-author { display: flex; align-items: center; gap: 8px; font-size: var(--text-small); color: var(--colour-dark-green); }
.n-author img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--colour-medium-sand); }

/* Grid cards */
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.ncard { display: flex; flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--colour-medium-sand); }
.ncard__title { font-size: var(--text-large); line-height: var(--text-large-lh); color: var(--colour-dark-green); transition: color .4s ease; }
.ncard:hover .ncard__title { color: var(--colour-primary-green); }
.ncard .n-author { margin-top: auto; }

/* Pager */
.news__pager { display: flex; justify-content: center; gap: var(--gap-xs); margin-top: var(--space-lg); }
.news__page { min-width: 32px; height: 32px; padding: 0 8px; border: none; background: none; color: var(--colour-dark-green); font: inherit; font-size: var(--text-small); cursor: pointer; }
.news__page:hover { color: var(--colour-primary-green); }
.news__page.is-active { background: var(--colour-primary-green); color: var(--colour-white); }

/* Compact rows */
.news__rows { display: flex; flex-direction: column; }
.nrow { display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--colour-medium-sand); }
.nrow__content { display: flex; flex-direction: column; gap: var(--space-xs); }
.nrow__title { font-weight: var(--weight-light); font-size: var(--title-s); line-height: var(--title-s-lh); color: var(--colour-dark-green); transition: color .4s ease; }
.nrow:hover .nrow__title { color: var(--colour-primary-green); }

@media (max-width: 900px) { .news__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .news__grid { grid-template-columns: 1fr; }
  .nrow { grid-template-columns: 1fr; }
  .nrow .n-author { display: none; }
}

/* ==========================================================================
   News archive: category tabs + filterable card grid + pagination
   ========================================================================== */
.newsarch { background: var(--colour-light-sand); }
/* meta row holds the category chip, then date, then read-time */
.newsarch .n-meta { flex-wrap: wrap; }
.newsarch .n-meta__date { background: none; padding: 0; }   /* date no longer in a pill */

/* Tab filter (design-system component: .tabs / .tab) — equal-width, square, bordered */
.tabs { display: flex; flex-wrap: nowrap; gap: 0; margin-bottom: var(--space-lg); border: 1px solid var(--colour-medium-sand); }
.tab {
  flex: 1 1 0; min-width: 0; text-align: center;
  appearance: none; background: var(--colour-white); border: none; cursor: pointer; font: inherit;
  font-size: var(--text-small); color: var(--colour-dark-green);
  padding: 14px 16px; border-radius: 0;
  transition: color .4s ease, background-color .4s ease;
}
.tab:hover { color: var(--colour-primary-green); }
.tab.is-active { background: var(--colour-primary-green); color: var(--colour-white); }

.newsarch__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
/* Equal height PER ROW: each card fills its row's height (grid rows auto-size to
   the tallest card in that row), so dividers line up across each row — and it
   re-balances automatically as the grid drops to 2 then 1 column. */
.newsarch__grid .ncard { height: 100%; }
.ncard--cat { gap: var(--space-sm); }
.ncard--cat { border-bottom-color: var(--colour-medium-sand); }
/* Clickable category chip on each card → filters the grid (sits first in the meta row) */
.ncard__cat {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--font-alt); font-size: var(--text-tiny);
  color: var(--colour-dark-green); background: var(--colour-white);
  border: none; padding: 5px 10px; transition: color .4s ease;
}
.ncard__cat:hover, .ncard__cat:focus { color: var(--colour-primary-green); }
.ncard__title { text-align: left; }
a.ncard__title { display: block; }

/* Media variant: feature image below the title; masonry built from JS columns so
   cards flow left→right, top→bottom (row order) while sizing to their content. */
.newsarch--media .newsarch__grid { display: flex; gap: var(--grid-gap); align-items: flex-start; }
.newsarch__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--grid-gap); }
.ncard__media { display: block; }
.ncard__media img { display: block; width: 100%; height: auto; border: 1px solid var(--colour-medium-sand); }
/* All listing cards use the larger (Title M) title */
.newsarch .ncard__title { font-size: var(--title-m); line-height: var(--title-m-lh); }

/* Sticky category tabs below the fixed header (desktop + mobile) */
.newsarch .tabs {
  position: sticky; top: var(--nav-height); z-index: 20;
  background: var(--colour-white);         /* white bar */
  margin-bottom: var(--space-md);
  border: 0;                               /* no stroke around the bar */
}
/* White tabs, green active, full-height vertical divider between each item. */
.newsarch .tab { background: var(--colour-white); }
.newsarch .tab.is-active { background: var(--colour-primary-green); color: var(--colour-white); }
.newsarch .tab + .tab { border-left: 1px solid var(--colour-medium-sand); }
@media (max-width: 560px) { .newsarch .tabs { top: 82px; } }

.newsarch__empty { color: var(--color-text-muted); margin-top: var(--space-lg); }
.newsarch__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xl, 64px); }
.newspag__btn {
  width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--colour-white); color: var(--colour-dark-green); font-size: var(--text-small);
  border: none; border-radius: 0; cursor: pointer; transition: background-color .4s ease, color .4s ease;
}
.newspag__btn:hover:not(:disabled) { background: var(--colour-medium-sand); }
.newspag__btn.is-active { background: var(--colour-primary-green); color: var(--colour-white); }
.newspag__btn--arrow { background: none; color: var(--colour-primary-green); }
.newspag__btn--arrow:hover:not(:disabled) { background: none; color: var(--colour-green-active); }
.newspag__btn--arrow svg { width: 22px; height: 22px; }
.newspag__btn:disabled { opacity: .35; cursor: default; }
/* Inactive / blocked arrows use dark sand (not faded green) */
.newspag__btn--arrow:disabled { color: var(--colour-dark-sand); opacity: 1; }
.newspag__gap { min-width: 24px; text-align: center; color: var(--colour-dark-green); }

/* Reusable category label: white chip, green on hover */
.n-cat {
  display: inline-block; font-family: var(--font-alt); font-size: var(--text-tiny);
  color: var(--colour-dark-green); background: var(--colour-white); padding: 5px 10px;
  transition: color .4s ease;
}
a.n-cat:hover { color: var(--colour-primary-green); }

/* Article hero meta (category + date + read) overlaid on the banner, above the title */
.pagehead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--colour-white); font-size: var(--text-tiny); }
.pagehead__meta .n-meta__date, .pagehead__meta .n-meta__read { background: none; padding: 0; color: var(--colour-white); }

/* "Other Articles" — stacked list of rows with a divider under each */
.otherart { display: flex; flex-direction: column; }
.otherart__row { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--colour-medium-sand); }
.otherart__title { font-weight: var(--weight-light); font-size: var(--title-s); line-height: var(--title-s-lh); color: var(--colour-dark-green); transition: color .4s ease; }
.otherart__row:hover .otherart__title { color: var(--colour-primary-green); }
.otherart .n-meta__date, .otherart .n-meta__read { background: none; padding: 0; }
.news--related { background: var(--colour-light-sand); padding-block: var(--space-md); }   /* reduced from --sec-pad-v */

@media (max-width: 900px) { .newsarch__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .newsarch__grid { grid-template-columns: 1fr; }
  /* Tabs scroll horizontally on mobile rather than squashing */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
}

/* ==========================================================================
   Single news article
   ========================================================================== */
/* Related people — People-slider cards, up to 3 per row inside the 1000px frame */
.article-people__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 760px) { .article-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .article-people__grid { grid-template-columns: 1fr; } }

/* News detail uses a narrower 1000px reading column (rest of the app is wider).
   Constrain the inner .container of hero, body and related so content = 1000px. */
.article { background: var(--colour-white); padding-top: var(--content-gap); }   /* smaller gap after the hero */
.article .container,
.news--related .container { max-width: calc(1000px + 2 * var(--sec-pad-h)); margin-inline: auto; }

/* The 1000px frame itself is centred in the section (margin-inline:auto above);
   content stays left-aligned. */
/* Tighter gap between the "Other Articles" heading and the list */
.news--related .news__heading { margin-bottom: var(--space-sm); }
.news--related .otherart__row:first-child { padding-top: 0; }
.article__meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.article__cat { font-family: var(--font-alt); font-size: var(--text-tiny); color: var(--colour-white); background: var(--colour-dark-green); padding: 5px 10px; transition: background-color .4s ease; }
.article__cat:hover { background: var(--colour-primary-green); }
.article__date { font-size: var(--text-tiny); color: var(--color-text-muted); }
.article__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); color: var(--colour-dark-green); }
.article__body p + p, .article__body p + figure, .article__body figure + p, .article__body p + ul { margin-top: var(--space-sm); }
.article__body h2, .article__body h3 { color: var(--colour-dark-green); font-weight: var(--weight-light); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.article__body a { color: var(--colour-primary-green); text-decoration: underline; }
.article__body strong { color: var(--colour-dark-green); }
.article__body ul { padding-left: 1.2em; list-style: disc; }
/* Featured image at the top of the article body (not the hero) */
.article__feature { margin: 0 0 var(--space-md); }
.article__feature img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* In-body media (rebuilt from the old "modules") */
.news-figure { margin: var(--space-md) 0; }
.news-figure img { width: 100%; height: auto; border-radius: 4px; }
.news-figure--feat img { border: 1px solid var(--colour-medium-sand); border-radius: 0; }
.news-video { position: relative; padding-top: 56.25%; margin: var(--space-md) 0; }
.news-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; }
.news--related { background: var(--colour-light-sand); padding-block: var(--space-md); }   /* reduced from --sec-pad-v */

/* footer.css */
/* ==========================================================================
   Component: Footer (Figma 13248:23284)
   Medium-grey band: "Get in touch" + four city cards (Adelaide overlays the
   office details), then a divider with logo, nav links and credits.
   ========================================================================== */
.footer {
  background: var(--colour-medium-grey);
  color: var(--color-text-invert);
}

/* ---- Get in touch band ------------------------------------------------ */
.footer__contact { padding-top: var(--sec-pad-v); }            /* section padding (top of footer) */
.footer__intro { margin-bottom: var(--content-gap); }          /* title group → location tiles */
.footer__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
}
.footer__lead {
  font-weight: var(--weight-light);
  font-size: var(--title-s);
  line-height: var(--title-s-lh);
  margin-top: var(--space-xxs);          /* tight gap under the "Get in touch" title */
  color: var(--colour-light-sand);
}

/* City cards — column count tracks how many locations are configured */
.footer__cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
.footer__cities[data-count="1"] { grid-template-columns: 1fr; }
.footer__cities[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.footer__cities[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

/* Single location: intro on the left, the one location on the right (50/50) */
.footer__contact--single .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--content-gap);
  align-items: start;
}
.footer__contact--single .footer__intro { margin-bottom: 0; }

/* No locations: drop the whole contact band AND the divider line, keeping only
   the bottom band (logo / links / credits) with its own top padding. */
.footer--no-contact .footer__bottom { margin-top: 0; }
.footer--no-contact .footer__bottom .footer__bar { border-top: 0; padding-top: var(--sec-pad-v); }
.foot-city { display: flex; flex-direction: column; gap: var(--gap-m); }

/* Frame entrance: each card rises in, staggered (added by JS via .is-armed;
   no-JS / reduced-motion = no hiding). The photo inside drifts on SCROLL
   (data-parallax, handled in main.js) so frame + image move at different
   speeds — a "window" depth effect. */
.footer__cities.is-armed .foot-city {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1s ease, transform 1.4s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rd, 0ms);
}
.footer__cities.is-armed .foot-city.is-inview {
  opacity: 1;
  transform: translateY(0);
}
.foot-city:focus-visible { outline: 2px solid var(--colour-primary-green); outline-offset: 4px; }
.foot-city__img {
  position: relative;
  aspect-ratio: 307.5 / 263;
  overflow: hidden;
  background: linear-gradient(135deg, #5b6b60, #2f3a33);
}
/* Photo overhangs the frame top & bottom so the scroll parallax has room to
   drift without exposing a gap. Scroll drift uses `transform` (set by main.js);
   the hover zoom uses the independent `scale` property so the two compose. */
.foot-city__photo {
  position: absolute; left: 0; right: 0;
  top: -60px; height: calc(100% + 120px);
  width: 100%;
  object-fit: cover;
  transition: scale .6s cubic-bezier(.22,.61,.36,1);
}
.foot-city:hover .foot-city__photo,
.foot-city:focus-within .foot-city__photo { scale: 1.06; }
.foot-city__name {
  font-weight: var(--weight-light);
  font-size: var(--title-m);
  line-height: var(--title-m-lh);
}

/* Office-details overlay — revealed on hover/focus of each location card */
.foot-city__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(68,68,68,.55), rgba(40,40,40,.92));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* details anchored to the bottom… */
  align-items: flex-start;     /* …left corner */
  gap: var(--space-sm);
  padding: var(--space-md);     /* with padding from the edges */
  font-size: var(--text-regular);
  line-height: var(--text-regular-lh);   /* Text Regular */
  font-weight: var(--weight-light);
  color: var(--colour-light-sand);
  opacity: 0;
  transition: opacity .4s ease;
}
.foot-city__overlay > * { transform: translateY(14px); transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.foot-city:hover .foot-city__overlay,
.foot-city:focus-within .foot-city__overlay { opacity: 1; }
.foot-city:hover .foot-city__overlay > *,
.foot-city:focus-within .foot-city__overlay > * { transform: translateY(0); }
.foot-city__lines a { color: var(--colour-white); text-decoration: underline; }
.foot-city__lines a:hover { color: var(--colour-green-hover); }
.foot-city__address { font-style: normal; }

/* No photo set: show a solid dark-green tile with the details visible (no image
   to reveal on hover), so the location is still clearly presented. */
.foot-city--noimg .foot-city__img { background: var(--colour-dark-green); }
.foot-city--noimg .foot-city__overlay { opacity: 1; background: transparent; }
.foot-city--noimg .foot-city__overlay > * { transform: none; }

/* Touch devices (no hover): show the details so they're not hidden */
@media (hover: none) {
  .foot-city__overlay { opacity: 1; }
}

/* ---- Bottom band: logo / links / credits ------------------------------ */
.footer__bottom {
  margin-top: var(--content-gap);        /* content gap: get-in-touch group → bottom band */
  padding-bottom: var(--sec-pad-v);      /* section padding (bottom of footer) */
}
/* Divider sits on the inner bar (inside the section padding) so it spans the
   content width, not the full padded container, and uses medium sand. */
.footer__bottom .footer__bar {
  border-top: 1px solid var(--colour-light-sand);
  padding-top: 46px;
}
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.footer__logo img { height: 51px; width: auto; }
/* Text wordmark fallback (until a Brand logo is uploaded). */
.footer__logo .logo__text { display:inline-block; color:#fff; font-weight:700; font-size:22px; letter-spacing:.01em; white-space:nowrap; }
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-md);
  font-family: var(--font-alt);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
}
.footer__nav a:hover { color: var(--colour-green-hover); }

.footer__credits {
  margin-top: var(--content-gap);        /* logo/sitemap row → copyright/links row */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-small);
  color: var(--colour-light-sand);       /* copyright + legal links share one colour */
}
.footer__copy { display: flex; align-items: center; gap: var(--space-sm); }
.footer__copy p { font-weight: var(--weight-light); }
/* LinkedIn icon sits right after the copyright line */
.footer__social { position: relative; display: inline-flex; flex: 0 0 auto; }   /* icon wrapper — no text, no line-height needed */
.footer__social img { display: block; width: 26px; height: 26px; border-radius: 2px; }
/* Green (Kain) variant cross-fades in on hover; layered over the base icon. */
.footer__social-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.footer__social:hover .footer__social-hover { opacity: 1; }
/* Fallback when there's no green variant (a custom uploaded icon): dim on hover. */
.footer__social-base { transition: opacity .3s ease; }
.footer__social:hover .footer__social-base:only-child { opacity: .8; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.footer__legal a { color: var(--colour-light-sand); text-decoration: underline; }
.footer__legal a:hover { color: var(--colour-green-hover); }

/* ---- Tablet: keep location details readable as tiles narrow --------------- */
@media (min-width: 768px) and (max-width: 1200px) {
  /* Give a 4-location row wider tiles sooner (2 per row) so text isn't crushed. */
  .footer__cities[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
  /* Tighter overlay padding + smaller type so the address always fits the tile. */
  .foot-city__overlay { padding: var(--space-sm); gap: var(--space-xs); font-size: var(--text-small); line-height: var(--text-small-lh); }
  .foot-city__name { font-size: var(--title-s); line-height: var(--title-s-lh); }
}

/* ---- Mobile ----------------------------------------------------------- */
@media (max-width: 900px) {
  /* Only 4+ locations collapse to two per row; 2 and 3 stay on one row. */
  .footer__cities[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  /* Centre the logo above a 3×2 grid of the main links */
  .footer__bar { flex-direction: column; align-items: center; gap: var(--space-md); }
  .footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    width: 100%;
    justify-items: center;   /* centre each link within its column */
    text-align: center;
  }
  /* Legal links on a single row (no wrapping to a 2nd row); each item's own
     text may run onto two lines instead. Copyright moves below and is centred. */
  .footer__credits { flex-direction: column-reverse; align-items: center; gap: var(--space-sm); text-align: center; }
  .footer__legal { display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--space-xs) var(--space-sm); }
  .footer__legal a { text-align: center; }
  /* Single-location intro/location stacks full width */
  .footer__contact--single .container { grid-template-columns: 1fr; }
  .footer__contact--single .footer__intro { margin-bottom: var(--content-gap); }
  /* Locations stack one per row: square photo on the left, the location details
     (the desktop hover overlay) shown inline on its right. */
  .footer__cities[data-count] { grid-template-columns: 1fr; }
  .foot-city__img {
    display: flex; align-items: stretch; gap: var(--space-md);
    aspect-ratio: auto; height: auto; overflow: visible; background: none;
  }
  .foot-city__photo {
    position: static; top: auto; left: auto; right: auto;
    flex: 0 0 40%; width: 40%; aspect-ratio: 1 / 1; height: auto;
    object-fit: cover; border-radius: 4px;
  }
  .foot-city__overlay {
    position: static; inset: auto; opacity: 1;   /* always visible on mobile */
    background: none; padding: 0; flex: 1 1 0; justify-content: center;
    transform: none;
  }
  .foot-city__overlay > * { transform: none; }
}

/* content-media.css */
/* ==========================================================================
   Component: Content + Media split (Figma 13646:16946 / 16947)
   Text one side, image the other. Orientation left/right; stacks on mobile.
   ========================================================================== */
.cm { background: var(--colour-white); }
.cm--sand { background: var(--colour-light-sand); }
.cm__inner {
  display: flex;
  align-items: stretch;            /* image column matches the content column height */
  gap: var(--content-gap);
}
.cm__text  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--content-gap); }
/* Media frame clips the image; the image overhangs top & bottom so it can drift
   on scroll (data-parallax, handled in main.js) without exposing a gap. */
.cm__media { flex: 1 1 0; min-width: 0; min-height: 350px; position: relative; overflow: hidden; border-radius: 4px; }

.cm__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}
.cm__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); color: var(--colour-dark-green); }
.cm__body p + p { margin-top: var(--space-sm); }
.cm__actions { }

.cm__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* flush cover by default (parallax off) */
/* Parallax on: oversize so the image can drift on scroll. */
.kl-parallax .cm__img { top: -34px; height: calc(100% + 68px); will-change: transform; }

/* Image side: default is image right (text first). For image-left, flip order. */
.cm--img-left .cm__media { order: -1; }

/* Stack earlier (≤1024px): text (content) on top, image below — both orientations. */
@media (max-width: 1024px) {
  .cm__inner { flex-direction: column; align-items: stretch; gap: var(--content-gap); }
  .cm--img-left .cm__media,
  .cm--img-right .cm__media { order: 1; }
  /* Once stacked, give the media a real height (flex:1 1 0 + min-height collapses
     to zero on iOS Safari, so the absolutely-positioned image would vanish). */
  .cm__media { flex: none; height: 320px; }
}

/* awards.css */
/* ==========================================================================
   Component: Awards / Accolades list (Figma 13650:17324)
   Intro column + multi-column award list. Style variants: default/light/dark.
   ========================================================================== */
.awards__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
}
.awards__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--content-gap); }
/* Intro pinned while the (taller) list scrolls past — SIDE layout only
   (the title-on-top layout is not sticky). */
@media (min-width: 901px) {
  .kl-anim .awards--intro-side .awards__intro { position: sticky; top: var(--sticky-col-top); align-self: flex-start; }
}
.awards__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
}
/* Intro-top layout: title spans full width above the two-column body + list. */
.awards__title--top { margin-bottom: var(--content-gap); }
.awards__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); }
.awards__actions { }

/* List — two columns on desktop */
.awards__list {
  flex: 1.2 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
}
.awards__list--single { grid-template-columns: 1fr; }   /* one award per row */
.awards__item {
  padding-block: var(--space-sm);
  border-bottom: 1px solid currentColor;
}
.awards__item-title { font-weight: var(--weight-bold); font-size: var(--text-medium); line-height: var(--text-medium-lh); }
.awards__item-text { font-size: var(--text-regular); line-height: var(--text-regular-lh); margin-top: 8px; }
/* Title green, description grey (on white/sand); dark variant keeps light text */
.awards--default .awards__item-title, .awards--light .awards__item-title { color: var(--colour-dark-green); }
.awards--default .awards__item-text, .awards--light .awards__item-text { color: var(--colour-dark-green); }
.awards__item-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-top: var(--space-xxs);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--colour-primary-green);
}
.awards__item-link:hover { color: var(--colour-green-hover); }
/* No URL → plain label (no arrow, no link colour/underline). */
.awards__item-label { display: inline-block; margin-top: var(--space-xxs); font-size: var(--text-small); font-weight: var(--weight-bold); }

/* ---- Style variants --------------------------------------------------- */
.awards--default { background: var(--colour-white); color: var(--colour-dark-green); }
.awards--default .awards__body { color: var(--colour-dark-green); }
.awards--default .awards__item { border-color: var(--colour-medium-sand); }

.awards--light { background: var(--colour-light-sand); color: var(--colour-dark-green); }
.awards--light .awards__body { color: var(--colour-dark-green); }
.awards--light .awards__item { border-color: var(--colour-dark-sand); }

.awards--dark { background: var(--colour-dark-green); color: var(--colour-white); }
.awards--dark .awards__title { color: var(--colour-light-sand); }
.awards--dark .awards__body { color: var(--colour-light-sand); }
.awards--dark .awards__item { border-color: rgba(242,239,226,.25); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .awards__inner { flex-direction: column; gap: var(--content-gap); }
}
@media (max-width: 560px) {
  .awards__list { grid-template-columns: 1fr; column-gap: 0; }
}

/* info-grid.css */
/* ==========================================================================
   Component: Info Grid / Program details (Figma 13650:18619)
   Intro column + two-column grid of label/value pairs with divider lines.
   ========================================================================== */
.infogrid__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
}
.infogrid__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--content-gap); }
.infogrid__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
}
.infogrid__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); }
.infogrid__body p + p { margin-top: var(--space-sm); }
.infogrid__actions { }

/* Grid of pairs — 2 columns, divider line above each row of cells */
.infogrid__grid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.infogrid__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
  padding-block: var(--space-sm);
  border-bottom: 1px solid currentColor;     /* one continuous line under each row */
}
.infogrid__row:first-child { padding-top: 0; }   /* first row aligns with the left column top */
.infogrid__cell { display: flex; flex-direction: column; min-width: 0; }
.infogrid__label { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--colour-primary-green); margin-bottom: 6px; }
.infogrid__value { font-size: var(--text-medium); font-weight: var(--weight-bold); line-height: var(--text-medium-lh); }

/* ---- Style variants --------------------------------------------------- */
.infogrid--default { background: var(--colour-white); color: var(--colour-dark-green); }
.infogrid--default .infogrid__body { color: var(--colour-dark-green); }
.infogrid--default .infogrid__row { border-color: var(--colour-medium-sand); }

.infogrid--light { background: var(--colour-light-sand); color: var(--colour-dark-green); }
.infogrid--light .infogrid__body { color: var(--colour-dark-green); }
.infogrid--light .infogrid__row { border-color: var(--colour-dark-sand); }

.infogrid--dark { background: var(--colour-dark-green); color: var(--colour-white); }
.infogrid--dark .infogrid__title { color: var(--colour-white); }
.infogrid--dark .infogrid__body { color: var(--colour-light-sand); }
.infogrid--dark .infogrid__row { border-color: var(--colour-medium-sand); }

/* ---- Stats variant (Figma 13650:24582) -------------------------------- */
/* DESKTOP: stacked figures (as before), each with a medium sand/brown divider. */
.infogrid__stats { gap: 0; }
.infogrid__stat {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--colour-dark-sand);   /* medium sand/brown line, all surfaces */
}
.infogrid__stat:first-child { padding-top: 0; }
.infogrid__figure {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-primary-green);
}
.infogrid__figure:not(:last-child) { margin-bottom: var(--space-xs); }   /* no gap when there's no caption */
.infogrid__caption { font-size: var(--text-medium); line-height: var(--text-medium-lh); }
.infogrid--dark .infogrid__caption { color: var(--colour-light-sand); }
.infogrid--default .infogrid__caption,
.infogrid--light .infogrid__caption { color: var(--colour-dark-green); }

/* Intro column pins below the nav while the right column scrolls past — SIDE
   layout only (the title-on-top layout is not sticky). Desktop only. */
@media (min-width: 901px) {
  .infogrid__inner { align-items: start; }
  .kl-anim .infogrid--intro-side .infogrid__intro {
    position: sticky;
    top: var(--sticky-col-top);
    align-self: start;
  }
}

/* Intro-top layout: title spans full width above the two-column body + grid. */
.infogrid__title--top { margin-bottom: var(--content-gap); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .infogrid__inner { flex-direction: column; gap: var(--content-gap); }
}
@media (max-width: 560px) {
  .infogrid__row { grid-template-columns: 1fr; row-gap: var(--space-sm); }
}

/* MOBILE stats: 3-column grid with vertical dividers; horizontal dividers appear
   only BETWEEN rows (never under a single/last row); equal top+bottom padding. */
@media (max-width: 767.98px) {
  .infogrid__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .infogrid__stat {
    padding: var(--space-sm) var(--space-xs);        /* equal top & bottom */
    border-bottom: 0;
    border-right: 1px solid var(--colour-dark-sand);  /* vertical line */
  }
  .infogrid__stat:nth-child(3n)   { border-right: 0; padding-right: 0; }
  .infogrid__stat:nth-child(3n+1) { padding-left: 0; }
  .infogrid__stat:nth-child(n+4)  { border-top: 1px solid var(--colour-dark-sand); }  /* line only between rows */
  .infogrid__stat:first-child     { padding-top: var(--space-sm); }   /* keep equal padding on the first block too */
}

/* feature-cards.css */
/* ==========================================================================
   Component: Feature Cards (Figma 13650:19897 + 13650:20196)
   Intro + icon feature cards. Intro position top/side; surface sand/white.
   ========================================================================== */
.fcards__inner { display: flex; flex-direction: column; gap: var(--content-gap); }

.fcards__intro { display: flex; flex-direction: column; gap: var(--content-gap); }
.fcards__intro-content { display: flex; flex-direction: column; gap: var(--content-gap); }
.fcards__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
  margin: 0;
}
.fcards__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); color: var(--colour-dark-green); max-width: 60ch; }
.fcards__actions { }

/* Intro top (Figma 20196): title on the left, description + button on the right */
@media (min-width: 768px) {
  .fcards--intro-top .fcards__intro {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--content-gap);
  }
  .fcards--intro-top .fcards__title { flex: 1 1 0; min-width: 0; }
  .fcards--intro-top .fcards__intro-content { flex: 1 1 0; min-width: 0; }
}

/* Card grid */
.fcards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.fcards__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.fcards__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.fcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-radius: 4px;
}
.fcard__ic { color: var(--colour-primary-green); }
.fcard__icon { width: 50px; height: 51px; }   /* match the Expertise card icon size */
/* Reserve two lines for the title so every card's description starts at the same
   height (icons + titles already align at the top of each card). */
.fcard__title { font-weight: var(--weight-light); font-size: var(--title-s); line-height: var(--title-s-lh); color: var(--colour-dark-green); min-height: calc(var(--title-s) * var(--title-s-lh) * 2); }
.fcard__text { font-size: var(--text-small); line-height: var(--text-small-lh); color: var(--colour-dark-green); }

/* ---- Surfaces (background + card style are independent) ---------------- */
/* Section background */
.fcards--bg-sand  { background: var(--colour-light-sand); }
.fcards--bg-white { background: var(--colour-white); }
/* White cards */
.fcards--cards-white .fcard { background: var(--colour-white); }
/* Green cards — mirrors the Expertise card: dark-green fill, sand title, white text */
.fcards--cards-green .fcard { background: var(--colour-dark-green); }
.fcards--cards-green .fcard__title { color: var(--colour-light-sand); }
.fcards--cards-green .fcard__text  { color: var(--colour-white); }
/* White card on a white background needs a hairline so it stays visible */
.fcards--bg-white.fcards--cards-white .fcard { border: 1px solid var(--colour-medium-sand); }

/* ---- Intro beside the cards (Figma 19897) ----------------------------- */
@media (min-width: 901px) {
  .fcards--intro-side .fcards__inner { flex-direction: row; align-items: flex-start; gap: var(--content-gap); }
  .fcards--intro-side .fcards__intro { flex: 1 1 0; min-width: 0; }
  .fcards--intro-side .fcards__grid  { flex: 1.2 1 0; min-width: 0; grid-template-columns: repeat(2, 1fr); }
  .fcards--intro-side .fcards__grid[data-count="1"] { grid-template-columns: 1fr; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .fcards__grid,
  .fcards__grid[data-count="2"],
  .fcards__grid[data-count="3"] { grid-template-columns: 1fr 1fr; }
  .fcards__title { font-size: var(--title-l); }
}
@media (max-width: 560px) {
  .fcards__grid,
  .fcards__grid[data-count="2"],
  .fcards__grid[data-count="3"] { grid-template-columns: 1fr; }
}

/* logo-strip.css */
/* ==========================================================================
   Component: Logo Strip (Figma 13650:20017)
   Heading + intro (two columns), then a row of client logos.
   ========================================================================== */
.logos { background: var(--colour-light-sand); }
/* Background variants. The track carries the SAME colour as its backdrop so the
   logos' mix-blend: multiply blends against it (see note on .logos__track). */
.logos--sand  { background: var(--colour-light-sand); }
.logos--white { background: var(--colour-white); }
.logos--white .logos__track { background: var(--colour-white); }
.logos .container { display: flex; flex-direction: column; gap: var(--space-lg); }

.logos__head { display: flex; gap: var(--content-gap); align-items: flex-start; }
.logos__title {
  flex: 1 1 0;
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}
.logos__intro { flex: 1 1 0; font-size: var(--text-small); line-height: var(--text-small-lh); color: var(--colour-dark-green); }

/* ---- Autoplay marquee (single row) ------------------------------------ */
/* JS-driven marquee (js/logos.js): autoplay, pause on hover, draggable. */
.logos__slider { overflow: hidden; width: 100%; cursor: grab; touch-action: pan-y; }
.logos__slider.is-grabbing { cursor: grabbing; }
.logos__track {
  display: flex;
  align-items: center;
  gap: var(--content-gap);      /* official spacing token — the inspector highlights this */
  width: max-content;
  will-change: transform;
  /* Sand backdrop INSIDE the (transformed) track so the logos' multiply blends
     against sand — the transform isolates the blend group, so the section bg
     alone wouldn't reach the images. This is what makes white boxes disappear. */
  background: var(--colour-light-sand);
}
/* Spacing lives on each item (not a flex gap) so the duplicated set loops
   seamlessly. ~6 logos visible on desktop via the min-width. */
.logos__item {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 150px;                 /* fixed slot width; spacing comes from the track gap */
}
.logos__link { display: flex; align-items: center; justify-content: center; width: 100%; }
.logos__img {
  /* Fill the 150px slot width; height stays proportional (contain). A max-height
     keeps a rare tall/square logo from dominating — it then contains to width. */
  width: 100%;
  height: auto;
  max-height: 70px;   /* caps tall/square logos so nothing dominates */
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;   /* white logo backgrounds merge into the sand */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;       /* so dragging the row never starts an image drag */
}
.logos__name {
  font-weight: var(--weight-bold);
  font-size: var(--title-s);
  letter-spacing: -0.01em;
  color: var(--colour-dark-green);
  white-space: nowrap;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .logos__head { flex-direction: column; gap: var(--content-gap); }
  .logos__title { font-size: var(--title-l); }
  .logos__item { min-width: 150px; }
}

/* cta.css */
/* ==========================================================================
   Component: CTA Banner (Figma 13650:20309)
   Full-bleed background image + dark-green overlay, centred content.
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Background image: same scroll-parallax + Ken Burns as the full-width image band.
   The media box (oversized) drifts on scroll via [data-parallax]; the image
   slow-zooms while in view (.is-inview toggled by main.js). */
.cta__media {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%;            /* overflow room for the parallax drift */
  z-index: -2;
  will-change: transform;
}
.cta__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}
.cta.is-inview .cta__img { animation: kl-kenburns 14s ease-out forwards; }
.cta__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--colour-dark-green), var(--colour-dark-green));
  opacity: .82;
}
@media (prefers-reduced-motion: reduce) {
  .cta__media { position: absolute; top: 0; height: 100%; transform: none; }
  .cta.is-inview .cta__img { animation: none; }
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--content-gap);
  max-width: 760px;
  padding-inline: 0;   /* override the .container side gutters */
}
.cta__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-white);
}
.cta__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); color: var(--colour-light-sand); }
.cta__actions { }

/* ---- Sand variant: flat sand background, dark-green text (no image/overlay) --- */
.cta--sand { background: var(--colour-light-sand); }
.cta--sand .cta__title { color: var(--colour-dark-green); }
.cta--sand .cta__body { color: var(--colour-dark-green); }

/* Restore side gutters on mobile so the content doesn't touch the screen edges. */
@media (max-width: 900px) {
  .cta__inner { padding-inline: var(--sec-pad-h); }
}

/* accordion.css */
/* ==========================================================================
   Component: Accordion / FAQ  (Figma node 13650:21952)
   Optional intro column + list of expandable rows (native <details>).
   Closed: question in dark green with a sand "+" button.
   Open:   question turns primary green, button becomes "−", answer revealed.
   ========================================================================== */
.accordion__inner {
  /* 820px of CONTENT; the +padding keeps the container gutters (mobile) without
     eating into the 820 (the class also carries .container's side padding). */
  max-width: calc(var(--flex-content-narrow) + 2 * var(--sec-pad-h));
  margin-inline: auto;
}
.accordion__intro { margin-bottom: var(--content-gap); }
.accordion__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
}
.accordion__lead { font-size: var(--text-medium); line-height: var(--text-medium-lh); margin-top: var(--content-gap); }
.accordion__lead p + p { margin-top: var(--space-sm); }

.accordion__item { border-bottom: 1px solid var(--colour-medium-sand); }

/* Question row */
.accordion__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  font-size: var(--title-s);              /* 24px */
  font-weight: var(--weight-light);
  line-height: var(--title-s-lh);
  letter-spacing: -0.01em;
  color: var(--colour-dark-green);
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q-text { flex: 1 1 auto; min-width: 0; }

/* Open state: question turns primary green */
.accordion__item[open] > .accordion__q .accordion__q-text { color: var(--colour-primary-green); }

/* Toggle button — reuses the design-system open/close button (.btn-icon--toggle):
   shows "+" when closed, "−" (Reduce state) when open, and turns green on open. */
.accordion__icon { flex: 0 0 auto; }
.accordion__icon .accordion__minus { display: none; }
.accordion__item[open] > .accordion__q .accordion__icon { background: var(--colour-green-active); }
.accordion__item[open] > .accordion__q .accordion__icon .accordion__plus  { display: none; }
.accordion__item[open] > .accordion__q .accordion__icon .accordion__minus { display: block; }

/* Answer */
.accordion__a-inner {
  font-size: var(--text-small);          /* 14px */
  line-height: var(--text-small-lh);
  color: var(--colour-dark-green);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-md);
  max-width: 720px;
}
.accordion__a-inner p + p,
.accordion__a-inner ul + p,
.accordion__a-inner p + ul { margin-top: var(--space-xs); }
.accordion__a-inner ul { padding-left: 1.2em; list-style: disc; }
.accordion__a-inner li { margin-bottom: 6px; }

/* Smooth open / close via a measured height transition (set in main.js) — only
   when JS enhancement is active. The author `display:block` keeps the panel
   rendered even while the <details> is closed, so the collapse animates too.
   Without JS, native <details> still expands/collapses. */
.accordion__list.is-enhanced .accordion__a {
  display: block;
  overflow: hidden;
  height: 0;
  transition: height .38s cubic-bezier(.4, 0, .2, 1);
  will-change: height;
}
/* Content fades in/out alongside the height so the reveal feels smooth, not abrupt. */
.accordion__list.is-enhanced .accordion__a-inner {
  opacity: 0;
  transition: opacity .3s ease;
}
.accordion__list.is-enhanced .accordion__item[open] > .accordion__a > .accordion__a-inner { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .accordion__list.is-enhanced .accordion__a { transition: none; }
  .accordion__list.is-enhanced .accordion__a-inner { transition: none; }
}

/* ---- Style variants --------------------------------------------------- */
.accordion--default { background: var(--colour-white); }
.accordion--light   { background: var(--colour-light-sand); }
.accordion--light .accordion__icon { background: var(--colour-white); }
.accordion--light .accordion__item[open] > .accordion__q .accordion__icon { background: var(--colour-medium-sand); }

/* form.css */
/* ==========================================================================
   Component: Contact / enquiry form. Intro column + branded form fields.
   ========================================================================== */
.kform-sec--default { background: var(--colour-white); }
.kform-sec--sand    { background: var(--colour-light-sand); }

.kform-sec__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
}
.kform-sec__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--content-gap); }
.kform-sec__title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}
.kform-sec__body { font-size: var(--text-medium); line-height: var(--text-medium-lh); color: var(--colour-dark-green); }
.kform-sec__body p + p { margin-top: var(--space-sm); }

/* ---- Form ------------------------------------------------------------- */
.kform { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-m); }
.kform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-m); }
.kform__field { display: flex; flex-direction: column; gap: var(--gap-s); min-width: 0; }
.kform__label {
  font-family: var(--font-alt);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--colour-dark-green);
}
.kform__label em { font-style: normal; color: var(--colour-dark-green); text-transform: none; letter-spacing: 0; }
.kform__input {
  font: inherit;
  font-size: var(--text-medium);
  color: var(--colour-dark-green);
  background: var(--colour-white);
  border: 1px solid var(--colour-medium-sand);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.kform-sec--default .kform__input { background: var(--colour-light-sand); }
.kform__input::placeholder { color: var(--colour-light-grey); }
.kform__input:focus {
  outline: none;
  border-color: var(--colour-primary-green);
  box-shadow: 0 0 0 2px rgba(0, 174, 66, .18);
}
.kform__textarea { resize: vertical; min-height: 120px; }
.kform__actions { margin-top: var(--gap-s); }

/* Front-end success state (see main.js): hide inputs, show the message */
.kform.is-sent .kform__row,
.kform.is-sent .kform__field,
.kform.is-sent .kform__actions { display: none; }
.kform__success {
  font-size: var(--text-large);
  line-height: var(--text-large-lh);
  color: var(--colour-dark-green);
  padding: var(--gap-l);
  background: var(--colour-white);
  border-left: 3px solid var(--colour-primary-green);
}
.kform-sec--default .kform__success { background: var(--colour-light-sand); }

/* ---- Contact Form 7 integration -------------------------------------- */
/* CF7 wraps the form in .wpcf7 > form.wpcf7-form; give that column the same
   flex layout the static .kform had, and tidy CF7's own field wrappers. */
.kform--cf7 { flex: 1 1 0; min-width: 0; }
.kform--cf7 .wpcf7-form { display: flex; flex-direction: column; gap: var(--gap-m); }
.kform--cf7 .wpcf7-form br { display: none; }                 /* drop CF7's auto <br> between blocks */
.kform-sec .wpcf7-form-control-wrap { display: block; }       /* so inputs span full width */
.kform-sec .wpcf7 .kform__input { width: 100%; }
.kform-sec .wpcf7-not-valid-tip { color: #c0392b; font-size: var(--text-tiny); margin-top: var(--gap-xs); }
.kform-sec .wpcf7-not-valid { border-color: #c0392b; }
.kform-sec .wpcf7-response-output {
  margin: var(--gap-s) 0 0;
  padding: 10px 14px;
  font-size: var(--text-small);
  border: 1px solid var(--colour-medium-sand);
}
.kform-sec .wpcf7-spinner { margin-left: var(--gap-s); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  /* Stack the columns and let them fill the width (flex-start would keep them
     content-width → the form looked half-size). */
  .kform-sec__inner { flex-direction: column; align-items: stretch; gap: var(--content-gap); }
  .kform-sec__intro, .kform { width: 100%; }
}
@media (max-width: 560px) {
  .kform__row { grid-template-columns: 1fr; }
}

/* errorpage.css */
/* ==========================================================================
   Message pages — 404 (not found) + Thank you (form confirmation).
   Left-aligned brand hero band, then supporting content, then the footer.
   ========================================================================== */

/* ---- Shared hero band ------------------------------------------------- */
.errhero { padding-block: clamp(96px, 16vh, 200px); }
.errhero--light { background: var(--colour-light-sand); }
.errhero--dark  { background: var(--colour-dark-green); }

/* "404" — identical to the title below it (weight, size, line-height,
   letter-spacing); ONLY the colour differs (muted gold/sand). */
.errhero__eyebrow {
  font-weight: var(--weight-light);
  font-size: var(--title-xxl);
  line-height: var(--title-xxl-lh);
  letter-spacing: -0.03em;
  color: var(--colour-dark-sand);
  margin-bottom: var(--space-sm);
}
.errhero__title {
  font-weight: var(--weight-light);
  font-size: var(--title-xxl);
  line-height: var(--title-xxl-lh);
  letter-spacing: -0.03em;
}
.errhero--light .errhero__title { color: var(--colour-dark-green); }
.errhero--dark  .errhero__title { color: var(--colour-white); }
/* Thank-you title: first line light sand, second line white. */
.errhero__title-1 { color: var(--colour-light-sand); }

.errhero__text {
  font-size: var(--text-large);
  line-height: var(--text-large-lh);
  margin-top: var(--content-gap);
  color: var(--colour-dark-green);
}
.errhero__text a { color: var(--colour-primary-green); text-decoration: underline; }
.errhero__text a:hover { color: var(--colour-green-hover); }

.errhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m);
  margin-top: var(--space-lg);
}

/* ---- Thank-you "next steps" (intro left + numbered steps right) -------- */
.tysteps { background: var(--colour-white); }
.tysteps__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--content-gap) var(--space-xl, 64px);
  align-items: start;
}
.tysteps__intro-title {
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}
.tysteps__intro-text {
  font-size: var(--text-medium);
  line-height: var(--text-medium-lh);
  color: var(--colour-dark-green);
  margin-top: var(--content-gap);
}
.tysteps__cta { align-self: flex-start; margin-top: var(--content-gap); }
.tysteps__list { display: flex; flex-direction: column; }
.tystep {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--colour-medium-sand);
}
.tystep:first-child { padding-top: 0; }
.tystep:last-child { border-bottom: 0; }
.tystep__title {
  font-weight: var(--weight-light);
  font-size: var(--title-s);
  line-height: var(--title-s-lh);
  color: var(--colour-dark-green);
}
.tystep__text {
  font-size: var(--text-regular);
  line-height: var(--text-regular-lh);
  color: var(--colour-dark-green);
  margin-top: var(--space-xs);
}
.tystep__link {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  margin-top: var(--space-sm);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  color: var(--colour-primary-green);
}
.tystep__link:hover { color: var(--colour-green-hover); }

@media (max-width: 900px) {
  .tysteps__inner { grid-template-columns: 1fr; gap: var(--content-gap); }
}
@media (max-width: 560px) {
  .errhero__actions .btn { flex: 1 1 auto; }
}

/* showcase.css */
/* ==========================================================================
   Component: Showcase  (Figma 14200:7214, re-branded to Kain)
   Dark-green gradient hero band: headline + supporting copy + CTA + rating,
   over a draggable carousel of practice-area cards (image + label + tags).
   Reuses Kain tokens, buttons and the exper slider mechanics.
   ========================================================================== */
.showcase {
  position: relative;
  background:
    radial-gradient(120% 90% at 15% 0%, #2f5139 0%, rgba(47,81,57,0) 55%),
    linear-gradient(160deg, var(--colour-dark-green) 0%, #14231a 100%);
  color: var(--colour-white);
  overflow: hidden;
}
.showcase .container {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

/* ---- Eyebrow / section labels ------------------------------------------ */
.showcase__eyebrow {
  font-family: var(--font-alt);
  font-size: var(--text-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-medium-sand);
}

/* ---- Top: headline + meta --------------------------------------------- */
.showcase__top {
  display: flex;
  gap: var(--content-gap);
  align-items: flex-end;
  justify-content: space-between;
}
.showcase__title {
  flex: 1 1 60%;
  font-weight: var(--weight-light);
  font-size: var(--title-xxl);
  line-height: var(--title-xxl-lh);
  letter-spacing: -0.04em;
  max-width: 16ch;
}
.showcase__meta {
  flex: 1 1 34%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.showcase__lead {
  font-weight: var(--weight-light);
  font-size: var(--text-large);
  line-height: var(--text-large-lh);
  color: #e7ecdf;
}
.showcase__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Rating cluster */
.showcase__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font-size: var(--text-small);
  color: #e7ecdf;
}
.showcase__stars { display: inline-flex; gap: var(--gap-xs); color: var(--colour-green-hover); }
.showcase__stars svg { width: 16px; height: 16px; }
.showcase__rating strong { color: var(--colour-white); font-weight: var(--weight-bold); }

/* ---- Section divider under the eyebrow -------------------------------- */
.showcase__rule {
  display: flex; align-items: center; gap: var(--space-sm);
}
.showcase__rule::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: rgba(242,239,226,.22);
}

/* ---- Carousel --------------------------------------------------------- */
.showcase__viewport { overflow: hidden; }
.showcase__track { display: flex; gap: var(--grid-gap); cursor: grab; user-select: none; }
.showcase__track.is-grabbing { cursor: grabbing; }

.sc-card {
  flex: 0 0 auto;              /* width set by JS */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--colour-white);
  background: var(--colour-medium-grey);
  transition: transform .25s ease;
}
.sc-card:hover { transform: translateY(-6px); }
/* Photo layer */
.sc-card__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.sc-card:hover .sc-card__media { transform: scale(1.05); }
/* Legibility gradient */
.sc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,35,26,0) 35%, rgba(20,35,26,.88) 100%);
}
.sc-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-xxs); }
.sc-card__title {
  font-weight: var(--weight-regular);
  font-size: var(--title-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sc-card__tags {
  font-family: var(--font-alt);
  font-size: var(--text-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-medium-sand);
}
.sc-card__tags span { color: var(--colour-green-hover); margin: 0 4px; }
/* Corner arrow — uses the design-system square arrow button (.btn-icon--arrow);
   this class only positions it. */
.sc-card__arrow {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2;
}

/* ---- Controls --------------------------------------------------------- */
.showcase__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.showcase__dots { display: flex; gap: var(--gap-s); }
.showcase__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(242,239,226,.3); border: none; cursor: pointer; transition: background-color .2s ease; }
.showcase__dot.is-active { background: var(--colour-primary-green); }
.showcase__nav { display: flex; gap: var(--space-xs); }
/* Arrow buttons on dark: sand base already flips to green on hover via base.css */

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .showcase__top { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .showcase__title { max-width: 100%; }
  .showcase__meta { max-width: 100%; }
}

/* why-us.css */
/* ==========================================================================
   Component: Why Us  (Figma 14200:7310, re-branded to Kain)
   Section header (heading left, supporting copy right) over a row of dark
   feature cards. Tiles are top-aligned and sized to their collapsed content
   (icon + title); on hover a tile grows downward to reveal its description and
   bullet list. Card widths stay fixed — only height changes. Touch devices
   tap to toggle (JS). Stacks open on mobile.
   ========================================================================== */
.whyus { background: var(--colour-white); color: var(--colour-dark-green); }
.whyus--sand { background: var(--colour-light-sand); }   /* sand background variant (colours otherwise unchanged) */
.whyus .container { display: flex; flex-direction: column; gap: var(--content-gap); }

/* ---- Header ----------------------------------------------------------- */
.whyus__eyebrow {
  font-family: var(--font-alt);
  font-size: var(--text-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-dark-green);
}
.whyus__rule { border: 0; height: 1px; background: var(--colour-medium-sand); margin: var(--space-sm) 0 0; }
.whyus__head { display: flex; gap: var(--content-gap); align-items: flex-start; }
.whyus__title {
  flex: 1 1 0;
  font-weight: var(--weight-light);
  font-size: var(--title-l);
  line-height: var(--title-l-lh);
  letter-spacing: -0.03em;
  color: var(--colour-dark-green);
  max-width: 18ch;
}
.whyus__lead {
  flex: 1 1 0;
  align-self: flex-end;
  font-weight: var(--weight-light);
  font-size: var(--text-large);
  line-height: var(--text-large-lh);
  color: var(--colour-dark-green);
  max-width: 48ch;
}

/* ---- Card row (top-aligned; each tile grows its own height) ----------- */
.whyus__row {
  display: flex;
  gap: var(--grid-gap);
  align-items: flex-start;     /* tiles hang from the top; heights independent */
}
.whyus-card {
  position: relative;
  flex: 1 1 0;                 /* equal, fixed widths — only height changes */
  min-width: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--colour-dark-green);
  color: var(--colour-white);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: background-color .25s ease;
}
.whyus-card:hover,
.whyus-card.is-open { background: #223a2c; }

/* Icon chip */
.whyus-card__icon {
  width: 44px; height: 44px; flex: none;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,174,66,.16);
  color: var(--colour-green-hover);
}
.whyus-card__icon svg { width: 22px; height: 22px; }

.whyus-card__title {
  margin-top: var(--space-sm);
  font-weight: var(--weight-regular);
  font-size: var(--title-s);
  line-height: var(--title-s-lh);
  color: #f7f4ed;
}
.whyus-card:hover .whyus-card__title,
.whyus-card.is-open .whyus-card__title { color: var(--colour-white); }

/* Revealed detail — collapsed to zero height, grows down on hover/open */
.whyus-card__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.whyus-card:hover .whyus-card__detail,
.whyus-card.is-open .whyus-card__detail {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1), opacity .4s ease .1s;
}
.whyus-card__detail > * { min-height: 0; overflow: hidden; padding-top: var(--space-sm); }
.whyus-card__desc {
  font-weight: var(--weight-light);
  font-size: var(--text-medium);
  line-height: var(--text-medium-lh);
  color: #dfe6d9;
  margin-bottom: var(--space-sm);
}
.whyus-card__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.whyus-card__list li {
  position: relative;
  padding-left: var(--space-sm);
  font-size: var(--text-medium);
  color: #eef2e9;
}
.whyus-card__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px;
  background: var(--colour-primary-green);
  border-radius: 2px;
}

/* ---- Footer note ------------------------------------------------------ */
.whyus__note {
  font-family: var(--font-alt);
  font-size: var(--text-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-dark-green);
  max-width: 28ch;
}

/* ---- Responsive: stack, all cards open -------------------------------- */
@media (max-width: 900px) {
  .whyus__head { flex-direction: column; gap: var(--space-sm); }
  .whyus__title { max-width: 100%; font-size: var(--title-l); }
  .whyus__lead { align-self: flex-start; max-width: 100%; }
  .whyus__row { flex-direction: column; }
  .whyus-card { flex: none; cursor: default; }
  .whyus-card__detail { grid-template-rows: 1fr; opacity: 1; }
}

/* content-split.css */
/* ==========================================================================
   Component: Content Split showcase (Figma 14599:7249)
   Whole-frame element: intro (title + lead + CTA) → three value cards →
   text/image splits in both orientations. Design-system demo only for now
   (static content, not wired to admin). Brand tokens only — no hard-coded values.
   ========================================================================== */
.csplit { background: var(--colour-light-sand); }
.csplit__inner { display: flex; flex-direction: column; gap: var(--content-gap); }

/* ---- Intro ------------------------------------------------------------- */
.csplit__intro { display: flex; flex-direction: column; gap: var(--content-gap); }
.csplit__title {
  font-weight: var(--weight-light);
  font-size: var(--title-xl);
  line-height: var(--title-xl-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}
.csplit__intro-group { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 632px; }
.csplit__lead { font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--colour-dark-grey); }

/* ---- Value cards ------------------------------------------------------- */
.csplit__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.csplit-card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--colour-white); border-radius: 5px; padding: 25px;
}
.csplit-card__icon { width: 59px; height: 60px; color: var(--colour-primary-green); flex: 0 0 auto; }
.csplit-card__icon svg { width: 100%; height: 100%; display: block; }
.csplit-card__content { display: flex; flex-direction: column; gap: var(--space-xs); }
.csplit-card__title { font-weight: var(--weight-light); font-size: var(--title-m); line-height: var(--title-m-lh); color: var(--colour-dark-green); }
.csplit-card__text { font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--color-text-muted); }

/* ---- Text + image split (orientation set by DOM order) ----------------- */
.csplit__media { display: flex; gap: var(--content-gap); align-items: center; }
.csplit__img {
  flex: 1 1 0; min-width: 0; align-self: stretch; min-height: 350px;
  object-fit: cover; border-radius: 4px; background: var(--colour-medium-sand);
}
.csplit__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--content-gap); }
/* Middle split: 60% image / 40% text (matches the Figma layout). */
.csplit__media--split-60 .csplit__img  { flex: 3 1 0; }
.csplit__media--split-60 .csplit__body { flex: 2 1 0; }
.csplit__content { display: flex; flex-direction: column; gap: var(--space-sm); }
.csplit__mtitle {
  font-weight: var(--weight-light);
  font-size: var(--title-xl);
  line-height: var(--title-xl-lh);
  letter-spacing: -0.02em;
  color: var(--colour-dark-green);
}
.csplit__mtext { font-size: var(--text-regular); line-height: var(--text-regular-lh); color: var(--colour-dark-grey); }

/* ---- Mobile: stack cards and splits ------------------------------------ */
@media (max-width: 767.98px) {
  .csplit__cards { grid-template-columns: 1fr; }
  .csplit__media { flex-direction: column; align-items: stretch; }
  /* Image always on top, before the text — regardless of desktop orientation.
     flex:none + fixed height so the image keeps its size once stacked (iOS Safari
     collapses flex:1 1 0 + min-height to zero). */
  .csplit__img { width: 100%; order: -1; flex: none; height: 320px; }
}