/* ================= 01 TOKENS ================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root{
  /* colour — palette */
  --bg:#F3F3EC; --navy:#11132B; --magenta:#FF008C; --pink:#FF82BE; --lilac:#B69CD0;
  --light:#F9F9F6; --nav-active:#E5E0D6;
  --magenta-hover:#e0007c; --white:#fff; --black:#000;
  /* colour — off-palette, values unchanged pending decision */
  --magenta-dark:#C8008C; /* brand PMS 675 — filled status tag background */
  --tbc-grey-1:#E5E5E0; --tbc-grey-2:#6b6b66;
  /* colour — navy alphas */
  --navy-a05:rgba(17,19,43,.05); --navy-a06:rgba(17,19,43,.06); --navy-a08:rgba(17,19,43,.08);
  --navy-a15:rgba(17,19,43,.15); --navy-a20:rgba(17,19,43,.2); --navy-a40:rgba(17,19,43,.4);
  /* still hard-coded rgba (not tokenised): rgba(255,0,140,0) gradient stops · rgba(255,130,190,0) · rgba(0,0,0,.2) · rgba(0,0,0,.25) · rgba(0,0,0,.06) · rgba(249,249,246,.15) · rgba(255,255,255,.15) */
  /* type */
  --fs-12:12px;--fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-24:24px;
  --fs-28:28px; --fs-32:32px; --fs-36:36px; --fs-40:40px; --fs-44:44px; --fs-48:48px; --fs-56:56px; --fs-60:60px; --fs-72:72px;
  /* role type scale (desktop values; stepped in 03 LAYOUT at ≤1200 / ≤1024 / ≤768) */
  --fs-display:var(--fs-60); --ls-display:-2px; --lh-display:1;
  --fs-h2:var(--fs-48); --ls-h2:-2px; --lh-h2:1;
  --fs-quote:var(--fs-28);
  --fs-title-xl:var(--fs-24); --fs-title-lg:var(--fs-22); --fs-title:var(--fs-20);
  --fs-body-lg:var(--fs-18); --fs-body:var(--fs-16); --fs-small:var(--fs-14);
  --fs-feature:var(--fs-16);
  --fs-lead:var(--fs-20);
  --fs-h2-sm:var(--fs-40); /* smaller h2 (promo-split, boxed CTA, --sm heads); 36 ≤1024 · 32 ≤768 · 28 ≤360 (Lucia 22 Oct: was 48) */
  --fs-h3:var(--fs-24); /* card-level heading under h2-sm: CTA cards, enquiry blocks, property detail, role panel; 22 ≤768 (Lucia 22 Oct: was 28) */ /* lead intro (.section-head__intro--lead): --fs-lead 20 · 20 ≤1024 · 18 ≤768 */
  --fs-quote-name:var(--fs-18); --fs-quote-org:var(--fs-14); /* quote attribution; stepped ≤1200 / ≤768 */
  /* spacing / shape / elevation */
  --space-btn-row:16px; /* gap between buttons in a row (decision K) — .btn-row, icon-button pairs */
  --space-content-cta:60px; /* section content → its CTA button row. Audit: most common visible gap is 60px at 1440, 900 and 390 → one value */
  --space-head-content:60px; /* section heading group → first content. Audit: most common gap is 60px at 1440 and at 390, so no ≤768 step */
  --space-same-bg-collapse:60px; /* top padding removed from the 2nd of two adjacent same-background sections (data-bg); 40 ≤1024 · 30 ≤768 */
  --space-section-lg:120px; --space-section-md:80px; --space-section-sm:60px;
  --homes-card-gap:20px; /* gap between home cards: homepage .homes-row (row + stacked), Homes tablet carousel, .homes-grid columns and ≤1024 rows */
  --radius-sm:4px;
  --shadow-menu:0 8px 24px 0 var(--navy-a20);
  --search-border:1.5px solid var(--navy); /* finder search bar, submit divider + suggestions dropdown (default width, all states) */
  --shadow-suggest:0 12px 12px 0 rgba(0,0,0,.1); /* search suggestions dropdown (Figma 587:19381) */
  /* layout */
  --gutter:40px; /* content side padding: 40 desktop · 24 at ≤1024 · 16 at ≤768 (set in 03 LAYOUT) */
  --pad:max(40px, calc((100vw - 1400px) / 2));
  /* one 12-col grid column within the 1400px container */
  --colw:calc((min(100vw - 160px, 1400px) - 220px) / 12);
  --w8:calc(8 * var(--colw) + 7 * 20px); /* centred heading / intro width = 8 of 12 columns (Lucia 22 Oct); tablet and phone below */
  /* assets */
  --quote-blob:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNDAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzODkuNjQgMjguNDc1NUMxMzg5LjMzIDE1LjA5MjQgMTM5MC42OCA1Ljk5MzgzIDEzODguMDIgNS42ODI4OEMxMzU5LjY3IDIuMzY4MTUgMTMxNi4zNSA2LjQwNTkzIDEyODQuOTIgNS43NjEyOEMxMTc5LjQ0IDMuNTk3NTIgMTA3Ni40MiA1Ljk5MzQxIDk3MS4wMTYgNS45OTM0MUM4OTggNS45OTM0MSA4NjEgMy40ODQzNyA3OTMuNzM1IDIuMDUzNjlDNzYxLjg5MSAxLjM3NjM4IDczMS4wNjMgMy42NTk4MiA2OTguNzk4IDMuNDg0MzdDNTY1Ljk5OCAyLjc2MjIyIDQzNC42MjQgMS41NzkxOSAzMDIuMjY4IDAuMTI1Mzg0QzIwNC4wOTUgLTAuOTUyOTYyIDEwNy4wMjUgNS4yNzg4NyA5LjQ3ODE4IDUuMjc4ODdDNS40MzMyNSA3Mi4wMTA2IC00IDE0MC4zNDcgNC4wMDQ2OSAyMDYuODYxQzkuOTk3NDcgMjU2LjY1OCAtMi44NzI2NSAzMTEuODE4IDAuNjA3Njc4IDM1OC4yMThDMS4xMTYwNiAzNjQuOTk2IDEuNjMwNDQgMzk4LjEyOCAxLjYzMDQ0IDM5OC4xMjhDMS42MzA0NCAzOTguMTI4IDAuOTQzOTQ1IDM5OS4zNDEgMi44MTY5MyAzOTkuMzQxQzk4LjY1NjIgMzk5LjM0MSAxOTguMjUgMzk4Ljg4OCAyOTQuMzUzIDM5OS44MTRDNDU4LjMxIDQwMS4zOTQgNjE5LjIxOSAzOTIuMjY3IDc4NC4xODMgMzk1LjgyOEM4ODkuMjc3IDM5OC4wOTYgOTkzLjMxMSAzOTcuMTkyIDEwOTguNjggMzk2LjI3N0wxMTA2LjEzIDM5Ni4yMTJDMTE4OS42NSAzOTUuNDg4IDEyNzQuMDkgNDAxLjY3MSAxMzU3Ljc5IDM5Ny4yODNDMTM2NS4xOSAzOTYuODk2IDEzOTMuMjMgMzk5LjI1IDEzOTcuMzIgMzk2LjI5MUMxMzk5LjA0IDM5NS4wNSAxNDAwLjE4IDM5MC4wMTggMTM5OS45OCAzODAuODQ5QzEzOTkuMDIgMzM2LjcwOSAxMzkzLjkgMjkzLjc2NyAxMzk1LjE0IDI0OC42MjNDMTM5Ni45NyAxODIuMzUyIDEzOTEuMzYgMTAxLjQyNiAxMzg5LjY0IDI4LjQ3NTVaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTUwXzY3NzgpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTUwXzY3NzgiIHgxPSI3MDAiIHkxPSIwIiB4Mj0iNzAwIiB5Mj0iNDAwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjgyQkUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGODJCRSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
  /* same artwork with preserveAspectRatio="none" so background-size:100% 100% stretches it to any box (≤1200 quote frame) */
  --quote-blob-stretch:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCAxNDAwIDQwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzODkuNjQgMjguNDc1NUMxMzg5LjMzIDE1LjA5MjQgMTM5MC42OCA1Ljk5MzgzIDEzODguMDIgNS42ODI4OEMxMzU5LjY3IDIuMzY4MTUgMTMxNi4zNSA2LjQwNTkzIDEyODQuOTIgNS43NjEyOEMxMTc5LjQ0IDMuNTk3NTIgMTA3Ni40MiA1Ljk5MzQxIDk3MS4wMTYgNS45OTM0MUM4OTggNS45OTM0MSA4NjEgMy40ODQzNyA3OTMuNzM1IDIuMDUzNjlDNzYxLjg5MSAxLjM3NjM4IDczMS4wNjMgMy42NTk4MiA2OTguNzk4IDMuNDg0MzdDNTY1Ljk5OCAyLjc2MjIyIDQzNC42MjQgMS41NzkxOSAzMDIuMjY4IDAuMTI1Mzg0QzIwNC4wOTUgLTAuOTUyOTYyIDEwNy4wMjUgNS4yNzg4NyA5LjQ3ODE4IDUuMjc4ODdDNS40MzMyNSA3Mi4wMTA2IC00IDE0MC4zNDcgNC4wMDQ2OSAyMDYuODYxQzkuOTk3NDcgMjU2LjY1OCAtMi44NzI2NSAzMTEuODE4IDAuNjA3Njc4IDM1OC4yMThDMS4xMTYwNiAzNjQuOTk2IDEuNjMwNDQgMzk4LjEyOCAxLjYzMDQ0IDM5OC4xMjhDMS42MzA0NCAzOTguMTI4IDAuOTQzOTQ1IDM5OS4zNDEgMi44MTY5MyAzOTkuMzQxQzk4LjY1NjIgMzk5LjM0MSAxOTguMjUgMzk4Ljg4OCAyOTQuMzUzIDM5OS44MTRDNDU4LjMxIDQwMS4zOTQgNjE5LjIxOSAzOTIuMjY3IDc4NC4xODMgMzk1LjgyOEM4ODkuMjc3IDM5OC4wOTYgOTkzLjMxMSAzOTcuMTkyIDEwOTguNjggMzk2LjI3N0wxMTA2LjEzIDM5Ni4yMTJDMTE4OS42NSAzOTUuNDg4IDEyNzQuMDkgNDAxLjY3MSAxMzU3Ljc5IDM5Ny4yODNDMTM2NS4xOSAzOTYuODk2IDEzOTMuMjMgMzk5LjI1IDEzOTcuMzIgMzk2LjI5MUMxMzk5LjA0IDM5NS4wNSAxNDAwLjE4IDM5MC4wMTggMTM5OS45OCAzODAuODQ5QzEzOTkuMDIgMzM2LjcwOSAxMzkzLjkgMjkzLjc2NyAxMzk1LjE0IDI0OC42MjNDMTM5Ni45NyAxODIuMzUyIDEzOTEuMzYgMTAxLjQyNiAxMzg5LjY0IDI4LjQ3NTVaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTUwXzY3NzgpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTUwXzY3NzgiIHgxPSI3MDAiIHkxPSIwIiB4Mj0iNzAwIiB5Mj0iNDAwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjgyQkUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGODJCRSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
}

/* ================= 02 BASE (reset, body, a11y, focus) ================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--navy);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
a{text-decoration:none;color:var(--navy)}
/* focus + a11y */
/* Focus ring colour is a token: default magenta; components/contexts on a magenta or pink ground set --focus-ring:var(--navy)
   (see "focus-ring contexts" in 04 COMPONENTS). Every focus rule reads var(--focus-ring). */
:root{--focus-ring:var(--magenta)}
/* Text fields (inputs, selects, textareas, search fields) focus in navy, not magenta: the pink ring is not CareChoice branding on form fields (Lucia, 15 Oct). Buttons and links keep the magenta ring. */
input:not([type="checkbox"]):not([type="radio"]),textarea,select,.finder-search,.searchbar,.signup-input{--focus-ring:var(--navy)}
/* No focus / active ring on any text field, site-wide (Lucia 28 Oct): the text caret and an open list show the state. Checkboxes, radios, buttons and links keep their ring. */
input:not([type="checkbox"]):not([type="radio"]):focus,input:not([type="checkbox"]):not([type="radio"]):focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible{outline:none;box-shadow:none}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--navy);color:var(--light);padding:12px 20px;border-radius:var(--radius-sm);font-weight:600}
.skip:focus{left:16px;top:16px}
main:focus{outline:none} /* main is only focused programmatically via the skip link */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ================= 03 LAYOUT (container, section caps) ================= */
.container{padding-left:var(--pad);padding-right:var(--pad)}
/* global 1400px content cap: backgrounds stay full-bleed, inner content centered */
.topbar,.mainhead,.svc-inner,.stories-inner,.homes-inner,.trusted-inner,.why-inner,.careers-inner,.faq-inner,.footer-inner{max-width:1400px;width:100%;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.finder-inner{max-width:1400px;width:100%;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)} /* Marker.io CAR-201 (Josh 27 Oct): the four starting-point cards span the same width as "Support for different needs" below (was 1160px) */
.finder-inner>.search-block{width:100%;max-width:1080px;margin-left:auto;margin-right:auto} /* heading and search keep their 1080px width */
/* gutter steps (live only; canvas/embed keep their own gutters in 06) */
@media (max-width:1024px){body:not(.canvas-mode){--gutter:24px}}
@media (max-width:1024px){body:not(.canvas-mode){--w8:calc((100vw - 2 * var(--gutter) - 220px) * 2 / 3 + 140px)}} /* 8/12 of the content width */
@media (max-width:768px){body:not(.canvas-mode){--gutter:16px}}
@media (max-width:768px){body:not(.canvas-mode){--w8:100%}}
/* role type scale steps (live only) */
@media (max-width:1200px){body:not(.canvas-mode){--fs-display:var(--fs-56);--fs-quote:var(--fs-24);--fs-feature:var(--fs-14);--fs-quote-name:var(--fs-16)}}
@media (max-width:1024px){body:not(.canvas-mode){--ls-display:-1.5px;--fs-h2:var(--fs-44);--ls-h2:-1.5px;--fs-title-xl:var(--fs-22);--fs-title-lg:var(--fs-20);--fs-lead:var(--fs-20);--space-same-bg-collapse:40px;--fs-h2-sm:var(--fs-36)}}
@media (max-width:768px){body:not(.canvas-mode){--fs-display:var(--fs-48);--ls-display:-1px;--fs-h2:var(--fs-40);--ls-h2:-1px;--fs-quote:var(--fs-22);--fs-title-xl:var(--fs-22);--fs-title-lg:var(--fs-20);--fs-title:var(--fs-20);--fs-body-lg:var(--fs-16);--fs-quote-name:var(--fs-14);--fs-quote-org:var(--fs-12);--fs-lead:var(--fs-18);--space-same-bg-collapse:30px;--fs-h2-sm:var(--fs-32);--fs-h3:var(--fs-22)}}

/* ================= 04 COMPONENTS ================= */
/* ---------- btn ---------- */
/* reset first (so <button>/<input type="submit"> match <a>): no UA bevel/border; bordered variants re-declare border below */
.btn{-webkit-appearance:none;appearance:none;border:0;background-clip:padding-box;font:inherit;display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-body);font-weight:600;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none}
.btn__icon{width:24px;height:24px;flex:0 0 auto;background:currentColor;-webkit-mask:url(../assets/Icon-arrow-right.svg) center/contain no-repeat;mask:url(../assets/Icon-arrow-right.svg) center/contain no-repeat}
.btn__icon-img{width:24px;height:24px}
/* extra label text hidden visually on mobile, still read by screen readers */
@media (max-width:768px){body:not(.canvas-mode) .btn__label-extra{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
.btn--primary{gap:8px;background:var(--magenta);color:var(--bg);padding:12px 24px}
.btn--primary:hover{background:var(--magenta-hover)}
/* header enquiry — non-height differences only: centred, no gap, --white text, line-height 1.4, no wrap */
.btn--header{justify-content:center;gap:normal;color:var(--white);line-height:1.4;border:0;white-space:nowrap}
.btn--light{gap:8px;white-space:nowrap;background:var(--bg);color:var(--navy);line-height:1.4;padding:0 24px;border:0}
.btn--light:hover{background:var(--white)}
.btn--outline{gap:8px;border:1px solid var(--navy);background:transparent;color:var(--navy);padding:0 24px} /* gap only matters with .btn__icon, like --primary / --light; transparent so a <button> does not get the browser's grey */
.btn--outline:hover{background:var(--navy);color:var(--light)}
.btn--outline-on-pink{white-space:nowrap;background:transparent;color:var(--light);line-height:1.4;padding:0 24px;border:1.5px solid var(--bg)}
.btn--outline-on-pink:hover{background:rgba(249,249,246,.15)}

/* ---------- focus-ring contexts (magenta / pink grounds → navy ring) ---------- */
.btn--primary,.search-submit,.tabs__tab[aria-selected="true"],.megamenu__cta,.hero,.page-hero--pink,.funded,.accordion__item.is-open,.cta-card--lilac,.cta-band--boxed{--focus-ring:var(--navy)}

/* ---------- btn-row ---------- */
.btn-row{display:flex;gap:var(--space-btn-row)}
.btn-row[hidden]{display:none} /* finder "Load more" row: display:flex would otherwise keep it visible when hidden */
.btn-row--center{justify-content:center}
.btn-row--middle{align-items:center}
.btn-row--wrap{flex-wrap:wrap}

/* ---------- arrow-link ---------- */
/* Swap triggers live on .hover-scope (the card/panel/link whose state drives the swap).
   .hover-scope            → :hover + :focus-visible (finder, services, homes cards)
   .hover-scope--fine-pointer → :hover only, gated to fine pointers (mega-menu CTA panel)
   .hover-scope--focus-only   → :focus-visible only (mega-menu CTA link) */
.arrow-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:var(--fs-body);color:var(--navy)}
.arrow-link__icon{position:relative;width:36px;height:36px;flex:0 0 auto}
.arrow-link__icon img{position:absolute;inset:0;width:36px;height:36px;display:block}
.arrow-link__hover{opacity:0}
.hover-scope:not(.hover-scope--fine-pointer):not(.hover-scope--focus-only):hover .arrow-link__default,.hover-scope:not(.hover-scope--fine-pointer):focus-visible .arrow-link__default{opacity:0}
.hover-scope:not(.hover-scope--fine-pointer):not(.hover-scope--focus-only):hover .arrow-link__hover,.hover-scope:not(.hover-scope--fine-pointer):focus-visible .arrow-link__hover{opacity:1}
@media (hover:hover) and (pointer:fine){
  .hover-scope--fine-pointer:hover .arrow-link__default{opacity:0}
  .hover-scope--fine-pointer:hover .arrow-link__hover{opacity:1}
}
/* fade variant (mega-menu CTA): own assets, default image in flow, 200ms opacity fade */
.arrow-link--fade .arrow-link__default{position:static;inset:auto}
.arrow-link--fade img{transition:opacity 200ms ease-out}

/* ---------- icon-btn ---------- */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.icon-btn__img{width:36px;height:34px}
.icon-btn--prev .icon-btn__img{transform:rotate(180deg)}
.icon-btn--lg{width:44px;height:44px}
.icon-btn--sm{position:relative;width:36px;height:34px}
/* 44×44 hit area; the visual arrow stays 36×34 in place */
.icon-btn--sm::before{content:"";position:absolute;inset:-5px -4px}
/* news arrows add a hover opacity; stories arrows have no hover */
.icon-btn--sm:hover{opacity:.75}

/* ---------- hl (heading highlight) ---------- */
.hl{position:relative;display:inline-block;padding:0 var(--hl-pad-x,0);margin:0 var(--hl-margin-x,0)}
.hl__text{position:relative;z-index:1}
.hl__img{position:absolute;left:var(--hl-left,0);top:var(--hl-top,auto);bottom:var(--hl-bottom,auto);width:var(--hl-width,100%);height:var(--hl-height,auto);max-width:var(--hl-max-width,100%);margin-top:var(--hl-mt,0);transform:var(--hl-transform,none);z-index:var(--hl-z,0);pointer-events:var(--hl-pe,none);object-fit:fill}
.hl--brush{--hl-pad-x:24px;--hl-margin-x:-24px;--hl-top:0;--hl-height:100%;--hl-max-width:none}
/* brush follows the text: one stroke per wrapped line (image drawn as the inline text background, cloned across line breaks) */
.hl--brush{display:inline;padding:0;margin:0}
.hl--brush .hl__img{display:none}
.hl--brush .hl__text{padding:0 .33em;margin:0 -.33em;background:url(../assets/Line-hero.svg) no-repeat 0 50%/100% 1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* underline just under the letters (top 4px above the word's box bottom). It may cross its own word's descenders (g, p, y) but must never reach
   the next line's letters (Lucia 28 Oct): thin strokes fit as they are; the taller hero strokes are anchored by their bottom edge instead (below) */
.hl--under{--hl-top:100%;--hl-mt:-4px;--hl-z:auto;--hl-pe:auto;line-height:1} /* box = 1em on every heading, so the gap is the same whatever the line height */
.hl--bottom{--hl-bottom:2px}
.hl--deep{--hl-bottom:-.08em;line-height:1} /* Lucia 28 Oct: was calc(-.1em - 10px), too far under the word; now just below the letters, still clear of the next line */
.hl--wide{--hl-pad-x:.1em;--hl-left:50%;--hl-top:50%;--hl-transform:translate(-50%,-50%);--hl-width:calc(100% + .7em);--hl-height:130%;--hl-max-width:none} /* circle centred on the word; width = word + 2 × .45em overhang (100% = word + 2 × pad) */
.hl--wide-ratio{--hl-width:130%} /* homepage "Stories": keeps the original word-proportional width */
.hl--center,.hl--center-lg{--hl-pad-x:6px;--hl-left:50%;--hl-top:50%;--hl-transform:translate(-50%,-50%);--hl-height:100%;--hl-max-width:none}
.hl--center-lg{--hl-pad-x:8px}
/* .hl--band: brush band behind the lower part of the text line (inner-page headings); image src set per instance; phrase kept on one line, wraps normally only on very narrow screens */
.hl--band{--hl-left:-.08em;--hl-top:.2em;--hl-height:.72em;--hl-width:calc(100% + .16em);--hl-max-width:none}
.hl--band .hl__text{white-space:nowrap}
.hl--band .hl__text{background-repeat:no-repeat;background-size:0 0} /* optional per-line fallback: same image as inline background-image on .hl__text, only sized (shown) where a rule lets the phrase wrap */
@media (max-width:360px){body:not(.canvas-mode) .hl--band .hl__text{white-space:normal}}
/* .hl--lower: moves the image down 8px (6 ≤1024 · 4 ≤768) from its variant position, via the variant's own offset property */
.hl--lower{--hl-mt:8px}
.hl--bottom.hl--lower{--hl-bottom:-6px} /* 2px − 8px */
@media (max-width:1024px){body:not(.canvas-mode) .hl--lower{--hl-mt:6px}body:not(.canvas-mode) .hl--bottom.hl--lower{--hl-bottom:-4px}}
@media (max-width:768px){body:not(.canvas-mode) .hl--lower{--hl-mt:4px}body:not(.canvas-mode) .hl--bottom.hl--lower{--hl-bottom:-2px}}
@media (max-width:768px){body:not(.canvas-mode) .hl--wide{--hl-pad-x:.1875em;--hl-width:calc(100% + .525em);--hl-height:112%}body:not(.canvas-mode) .hl--wide-ratio{--hl-width:112%}}

/* ---------- divider ---------- */
.divider{display:block;max-width:100%;pointer-events:none;-webkit-user-select:none;user-select:none}
/* Line assets use *-1p5-r4.svg copies: 1.5px non-scaling stroke, viewBox padded each side (2 units; 5 card, 8 footer, 10 nav — enough for the stroke at the narrowest width) so the wave is never clipped.
   Negative margins equal to that padding keep the layout box identical (percent margins = padding/viewBox-width of the full-width line). */
.divider--nav{width:100%;height:auto;margin:calc(-10 / 1920 * 100%) 0}
.divider--finder{width:121px;height:7px;margin:-2px 0;flex:0 0 auto}
.divider--why{width:100%;height:auto;margin:calc(-2 / 281 * 100%) 0}
.divider--card{width:100%;height:auto;margin:calc(-5 / 671 * 100%) 0}
.divider--megamenu{width:100%;height:7px}
.divider--news-vertical{height:17px;width:auto;margin:0 -2px;flex:0 0 auto}
.divider--footer{width:100%;height:auto;margin:calc(-8 / 1401 * 100%) 0}
@media (max-width:768px){body:not(.canvas-mode) .divider--finder{width:20px}}

/* ---------- eyebrow ---------- */
.eyebrow{display:block;height:auto;max-width:100%}
.eyebrow--services{width:262px}
.eyebrow--careers{width:314px}
@media (max-width:768px){body:not(.canvas-mode) .eyebrow--careers{width:176px}}

/* ---------- section-head ---------- */
/* Heading group wrapper on all 10 homepage sections. Default = centred column (why, services, homes, careers, faq, funded).
   --block: plain block wrapper for a lone heading inside a section-specific layout (finder, stories, trusted, news).
   --start: start-aligned text (trusted). */
.section-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.section-head--block{display:block;flex-direction:row;gap:normal;align-items:normal}
.section-head--start{text-align:start;align-items:flex-start} /* align-items: left-aligns flex children (illustration, h2); no effect with --block (trusted) */
.section-head--narrow{max-width:var(--w8);margin-left:auto;margin-right:auto;text-align:center} /* Lucia 22 Oct: centred heading group = 8 of 12 columns (≈847px at 1440), heading and lead intro the same width */
.section-head--narrow .section-head__intro--lead{max-width:none}
.section-head__title{margin:0;font-size:var(--fs-h2);font-weight:600;letter-spacing:var(--ls-h2);line-height:var(--lh-h2);color:var(--navy)}
.section-head__title--center{text-align:center}
.section-head__title--relative{position:relative}
.section-head__title--inline{position:relative;display:inline-block}
.section-head__intro{margin:0;font-size:var(--fs-body-lg);font-weight:400;letter-spacing:-.3px;line-height:1.5;color:var(--navy)}

/* ---------- section (generic page section wrapper) ---------- */
/* Vertical padding = what the homepage sections use: --space-section-lg desktop and tablet, --space-section-sm at ≤768.
   Inner .container is capped at 1400px with var(--gutter) side padding (the plain .container uses --pad, min 40px). */
.section{padding:var(--space-section-lg) 0}
.section>.container{max-width:1400px;width:100%;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);display:flex;flex-direction:column;gap:var(--space-head-content)} /* children stack: heading group → content */
.section--light{background:var(--light)} /* #F9F9F6 sections on inner pages */
@media (max-width:768px){body:not(.canvas-mode) .section{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}}
/* ---------- section spacing (data-bg) ----------
   Every content section in <main> that declares data-bg (light | cream) has the same padding --sec-pad top and bottom:
   --space-section-lg (120) on desktop and tablet, --space-section-sm (60) at <=768. Applies to .section, .faq, .stories, and .news / .trusted when they declare data-bg (the homepage ones do not).
   Two neighbours with DIFFERENT backgrounds keep the full padding on both sides (gap 240 / 120 mobile).
   Two neighbours with the SAME background each use half of --sec-pad-same on the shared side: gap 160 (desktop and tablet) / 60 mobile.
   (Breadcrumb → first section and section → .funded keep half of --sec-pad.)
   The pink closing band (.funded, gradient) keeps its own padding; its top shows its base colour (data-base="light", else cream),
   so the section above it also halves its bottom when that colour matches. The hero (.page-hero) is never part of a pair.
   Special cases stay: .section--collapse-bottom (boxed band joined to the section above), .section--collapse-top (homepage),
   .section--title (title -> content). */
:root{--sec-pad:var(--space-section-lg);--sec-pad-same:160px}
@media (max-width:768px){body:not(.canvas-mode){--sec-pad:var(--space-section-sm);--sec-pad-same:var(--space-section-sm)}}
body main>:is(.section,.faq,.stories,.news,.trusted)[data-bg]:not(.section--collapse-top){padding-top:var(--sec-pad)}
body main>:is(.section,.faq,.stories,.news,.trusted)[data-bg]:not(.section--collapse-bottom,.section--title){padding-bottom:var(--sec-pad)}
body main>[data-bg="light"]:not(.page-hero)+:is(.section,.faq,.stories,.news,.trusted)[data-bg="light"],
body main>[data-bg="cream"]:not(.page-hero)+:is(.section,.faq,.stories,.news,.trusted)[data-bg="cream"]{padding-top:calc(var(--sec-pad-same) / 2)}
body main>.breadcrumb[data-bg]+:is(.section,.faq,.stories,.news,.trusted)[data-bg]{padding-top:calc(var(--sec-pad) / 2)} /* breadcrumb → first section stays 60 (half of --sec-pad) */
body main>:is(.section,.faq,.stories,.news,.trusted)[data-bg="light"]:not(.section--collapse-bottom,.section--title):has(+ [data-bg="light"]),
body main>:is(.section,.faq,.stories,.news,.trusted)[data-bg="cream"]:not(.section--collapse-bottom,.section--title):has(+ [data-bg="cream"]){padding-bottom:calc(var(--sec-pad-same) / 2)}
body main>:is(.section,.faq,.stories,.news,.trusted)[data-bg="light"]:not(.section--collapse-bottom,.section--title):has(+ .funded[data-base="light"]),
body main>:is(.section,.faq,.stories,.news,.trusted)[data-bg="cream"]:not(.section--collapse-bottom,.section--title):has(+ .funded:not([data-base])){padding-bottom:calc(var(--sec-pad) / 2)}
/* .section--collapse-bottom: section followed by a same-background section whose top is already collapsed — bottom = collapse / 2,
   so the visible gap (bottom + next top) is half the normal same-bg gap: 30 / 20 (≤1024) / 15 (≤768) */
body .section.section--collapse-bottom{padding-bottom:calc(var(--space-same-bg-collapse) / 2)}
body main>.section--collapse-bottom[data-bg]+:is(.section,.faq,.stories,.news,.trusted)[data-bg]{padding-top:calc(var(--sec-pad) / 2)} /* the joined boxed band keeps its tight gap (not the 160 same-bg gap) */
/* homepage same-background neighbours (sections without data-bg): why → services, services → stories, careers → news, news → FAQ use the same 160 / 60 gap (Lucia, 15 Oct) */
body main>.why:has(+ .services),body main>.services:has(+ .stories),body main>.careers:has(+ .news),body main>.news:has(+ .faq){padding-bottom:calc(var(--sec-pad-same) / 2)}
body main>.why+.services.services,body main>.services+.stories.stories,body main>.careers+.news.news,body main>.news+.faq.faq{padding-top:calc(var(--sec-pad-same) / 2)}

/* ---------- page-title ---------- */
/* interim — replace with the page-hero component when it exists */
.page-title{margin:0;font-size:var(--fs-display);font-weight:600;letter-spacing:var(--ls-display);line-height:var(--lh-display);color:var(--navy)}

/* ---------- card-service-grid (2-col grid of default .card-service; .svc-grid = alias used by the homepage tabs panel) ---------- */
.card-service-grid,.svc-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;row-gap:0;align-items:stretch}
/* a single card is centred at one-column width; an odd last card (homepage tab with 5, a 7-card grid) stays left in column 1, in line with the rows above */
.card-service-grid > .card-service:only-child,.svc-grid > .card-service:only-child{grid-column:1 / -1;justify-self:center;width:calc((100% - 60px) / 2)}
@media (max-width:1024px){
  /* tablet keeps 2 columns, 40px column gap (matches the other tablet grids) */
  body:not(.canvas-mode) .card-service-grid,body:not(.canvas-mode) .svc-grid{column-gap:40px}
  body:not(.canvas-mode) .card-service-grid > .card-service:only-child,body:not(.canvas-mode) .svc-grid > .card-service:only-child{width:calc((100% - 40px) / 2)}
}
@media (max-width:768px){
  body:not(.canvas-mode) .card-service-grid > .card-service:only-child,body:not(.canvas-mode) .svc-grid > .card-service:only-child{grid-column:auto;justify-self:stretch;width:auto}
  body:not(.canvas-mode) .card-service-grid,body:not(.canvas-mode) .svc-grid{grid-template-columns:1fr}
}

/* ---------- section-head__media (decorative illustration above the h2; size from the img width/height attributes) ---------- */
.section-head__media{display:block;max-width:100%;height:auto}
.section-head__media--center{align-self:center;margin-left:auto;margin-right:auto} /* centre the illustration on the page inside a start-aligned head */

/* ---------- section-head__intro--lead ---------- */
.section-head__intro--lead{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.3px;max-width:var(--w8);margin-left:auto;margin-right:auto;text-align:center}
.section-head--start .section-head__intro--lead{margin-left:0;margin-right:0;text-align:left} /* a start-aligned head keeps its lead intro left-aligned under the heading (v2, CAR-115) */

/* ---------- breadcrumb ---------- */
.breadcrumb{max-width:1400px;width:100%;margin-left:auto;margin-right:auto;padding:12px var(--gutter)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font-size:var(--fs-14);line-height:1.5;color:var(--navy)}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--navy);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb img{width:16px;height:16px;flex:0 0 auto;display:block}
/* breadcrumb inside the pink page hero */
.page-hero .breadcrumb{max-width:none;margin:0 0 28px;padding:0}
.page-hero--centered>.breadcrumb{max-width:calc(1400px - 2 * var(--gutter));margin:0 auto 40px;text-align:left}
/* breadcrumb inside a hero sits 12px under the header like every other page (= .breadcrumb padding-top); the heading below keeps its place */
.page-hero__text>.breadcrumb:first-child{margin-top:-28px;margin-bottom:40px} /* breadcrumb → heading 40px (Lucia 21 Oct, was 56) */ /* hero text padding-top 40 */
.page-hero--centered>.breadcrumb:first-child{margin-top:-48px;margin-bottom:88px} /* centred hero padding-top 60 */
.page-hero--pink .breadcrumb ol,.page-hero--pink .breadcrumb a,.page-hero--pink .breadcrumb [aria-current]{color:var(--navy)} /* Lucia 28 Oct: navy on pink (was light) */

/* ---------- btn__icon--down (in-page scroll buttons) ---------- */
.btn__icon--down{transform:rotate(90deg)}

/* ---------- page-hero (inner-page hero: text left aligned to the container, .media-frame--page flush right) ---------- */
.page-hero{display:flex;align-items:stretch;column-gap:98px;min-height:460px;background:var(--bg)} /* v2 (Josh 21 Oct): shorter inner-page banner than the homepage (651); min 460 so the photo itself is never under 380px tall (Lucia 21 Oct: avoid heavy crops) */
.page-hero__text{flex:0 0 calc(55.625% - 98px);min-width:0;display:flex;flex-direction:column;padding:40px 0 60px calc(max(0px, (100vw - 1400px) / 2) + var(--gutter))}
.page-hero__intro{margin-top:20px;font-size:var(--fs-body-lg);line-height:1.5;letter-spacing:-.3px;color:var(--navy)}
.page-hero__intro p{margin:0}
.page-hero__intro a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.page-hero__intro p+p{margin-top:1.5em} /* one blank line between paragraphs */
.page-hero__text .btn-row{margin-top:32px;flex-wrap:wrap}
.page-hero__media{flex:0 0 min(44.375%, 850px);min-width:0} /* Lucia 22 Oct: capped at 850px; text column keeps its width and the 98px gap, the space left over on wide screens stays empty on the right */ /* 852px of 1920 */
/* --pink: pink hero (Figma 558:11289 / 590:19731) — light text like the homepage hero; use .btn--light + .btn--outline-on-pink; navy focus ring (decision B) */
.page-hero--pink{background:var(--pink)}
.page-hero--pink .page-title,.page-hero--pink .page-hero__intro{color:var(--navy)}
@media (max-width:1024px){
  body:not(.canvas-mode) .page-hero{column-gap:40px}
  body:not(.canvas-mode) .page-hero__text{flex:0 0 calc(55% - 40px)}
  body:not(.canvas-mode) .page-hero__media{flex:0 0 45%}
}
@media (max-width:768px){
  body:not(.canvas-mode) .page-hero{flex-direction:column;row-gap:0}
  body:not(.canvas-mode) .page-hero__text{flex:0 0 auto;width:100%;padding:40px var(--gutter)}
  body:not(.canvas-mode) .page-hero__media{flex:0 0 auto;width:100%;order:-1} /* photo above the text on phones, as on the homepage (Lucia 21 Oct) */
  /* Lucia 21 Oct: breadcrumb stays on top, above the photo — the text column opens up (display:contents) so its parts can be ordered around the photo */
  body:not(.canvas-mode) .page-hero__text{display:contents}
  body:not(.canvas-mode) .page-hero__text>*{margin-left:var(--gutter);margin-right:var(--gutter)}
  body:not(.canvas-mode) .page-hero__text>.breadcrumb:first-child{order:-2;margin:0;padding:20px var(--gutter)}
  body:not(.canvas-mode) .page-hero__text>.page-title{margin-top:32px}
  body:not(.canvas-mode) .page-hero__text>:last-child{margin-bottom:40px}
}

/* ---------- media-frame--page (852×510 at 1920; two half-height gradient bands, photo inset 60px ≈ 7.04% of the width) ---------- */
.media-frame--page{position:relative;display:block;width:100%;aspect-ratio:852 / 510;box-sizing:border-box;background:linear-gradient(to right,rgba(255,0,140,0),var(--magenta)) top/100% 50% no-repeat,linear-gradient(to right,var(--magenta),rgba(255,0,140,0)) bottom/100% 50% no-repeat}
.media-frame--page .media-frame__img{position:absolute;left:7.042%;top:11.765%;width:85.916%;height:76.471%;object-fit:cover}
/* inside the hero at >768: frame stretches to the hero row height (min 500px); bands stay half height each (background-size 100% 50%); fixed px photo inset */
.page-hero__media.media-frame--page{aspect-ratio:auto;height:auto;min-height:460px}
.page-hero__media.media-frame--page .media-frame__img{inset:40px;left:40px;top:40px;width:calc(100% - 80px);height:calc(100% - 80px)}
@media (max-width:1024px){body:not(.canvas-mode) .page-hero__media.media-frame--page .media-frame__img{left:40px;top:40px;width:calc(100% - 80px);height:calc(100% - 80px)}}
@media (max-width:768px){
  body:not(.canvas-mode) .page-hero{min-height:0}
  body:not(.canvas-mode) .page-hero__media.media-frame--page{aspect-ratio:4 / 3;min-height:0}
  body:not(.canvas-mode) .page-hero__media.media-frame--page .media-frame__img{inset:auto;left:24px;top:24px;width:calc(100% - 48px);height:calc(100% - 48px)} /* 4:3 banner photo on phones, 24px inset like the homepage (Lucia 21 Oct) */
} /* 60px of 510 tall / 852 wide = 60px on every side at any width */

/* ---------- media-split (media left, content right) ---------- */
.media-split{display:grid;grid-template-columns:minmax(0,690fr) minmax(0,550fr);column-gap:80px;align-items:stretch;min-height:400px}
.media-split__media{position:relative;min-height:400px}
/* two columns: photo fills the row height (row = content height, min 400px) */
.media-split__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.media-split__content{align-self:start}
.media-split__content{display:flex;flex-direction:column;gap:28px;min-width:0} /* text fills its grid column (was padded 118px on the right) */
.media-split__content p{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--navy)}
@media (max-width:1024px){
  body:not(.canvas-mode) .media-split{grid-template-columns:1fr 1fr;column-gap:40px}
}
@media (max-width:768px){
  body:not(.canvas-mode) .media-split{grid-template-columns:1fr;row-gap:32px;min-height:0}
  /* stacked: photo back in flow with its 690/500 ratio */
  body:not(.canvas-mode) .media-split__media{min-height:0}
  body:not(.canvas-mode) .media-split__media img{position:static;height:auto;aspect-ratio:690 / 500}
}

/* ---------- checklist ---------- */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-16);line-height:1.5;color:var(--navy)}
.checklist img{width:24px;height:24px;flex:0 0 auto;display:block} /* 24px icon = 1.5 × 16px line → aligned to the first line */

/* ---------- card-feature-grid--3 (3 equal columns, no gap: dividers join into one line) ---------- */
.card-feature-grid--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media (max-width:768px){body:not(.canvas-mode) .card-feature-grid--3{grid-template-columns:1fr;flex-wrap:wrap;row-gap:24px}} /* flex-wrap: .card-feature-grid{display:flex} in 05 wins over the grid display, so wrap is needed for 1 column */

/* ---------- filter-bar + filter-chip ---------- */
.filter-bar{background:var(--bg);padding:8px 0}
.filter-bar__inner{position:relative;max-width:1400px;margin:0 auto;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:16px}
.filter-bar__chips{display:flex;gap:8px;min-width:0}
.filter-bar__tools{display:flex;align-items:center;gap:8px;flex:0 0 auto} /* Filter button group (Careers job lists) */
@media (max-width:768px){body:not(.canvas-mode) .filter-bar__inner{flex-wrap:wrap}body:not(.canvas-mode) .filter-bar__tools{flex:1 1 100%}}
.filter-chip{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:6px 16px;border:0;border-radius:var(--radius-sm);background:var(--light);font-family:inherit;font-size:var(--fs-16);font-weight:400;line-height:1.5;color:var(--navy);white-space:nowrap;cursor:pointer}
.filter-chip::before{content:"";position:absolute;inset:-4px 0} /* 44px hit area, 36px visual */
.filter-chip[aria-pressed="true"],.filter-chip[aria-expanded="true"]{background:var(--pink)}
.filter-chip img{width:20px;height:20px;display:block}
.filter-chip .filter-chip__close{display:none}
.filter-chip[aria-expanded="true"] .filter-chip__open{display:none}
.filter-chip[aria-expanded="true"] .filter-chip__close{display:block}
@media (max-width:768px){body:not(.canvas-mode) .filter-bar__chips{overflow-x:auto;scrollbar-width:none;margin:-4px 0 -4px calc(-1 * var(--gutter));padding:4px 0 4px var(--gutter)}body:not(.canvas-mode) .filter-bar__chips::-webkit-scrollbar{display:none}}

/* ---------- checkbox (native input visually hidden + custom box) ---------- */
.checkbox{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:var(--fs-16);line-height:1.5;color:var(--navy);cursor:pointer}
.checkbox input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
.checkbox__box{flex:0 0 16px;width:16px;height:16px;box-sizing:border-box;background:var(--bg);border:1px solid rgba(17,19,43,.1);border-radius:2px}
.checkbox input:checked+.checkbox__box{border-color:transparent;background:url(../assets/icon-checkbox-checked-r4.svg) center/contain no-repeat}
.checkbox input:focus-visible+.checkbox__box{outline:3px solid var(--focus-ring);outline-offset:2px}

/* ---------- filter-panel (overlay below the filter bar) ---------- */
.filter-panel{position:absolute;top:calc(100% + 9px);right:var(--gutter);z-index:60;width:min(744px,calc(100% - 2 * var(--gutter)));box-sizing:border-box;background:var(--light);border-radius:var(--radius-sm);padding:32px;display:flex;flex-direction:column;gap:32px;box-shadow:var(--shadow-menu)}
.filter-panel[hidden]{display:none}
.filter-panel__groups{display:flex;flex-wrap:wrap;gap:32px 40px}
.filter-panel fieldset{flex:0 0 200px;min-width:0;margin:0;padding:0;border:0}
.filter-panel legend{padding:8px 0;font-size:var(--fs-16);line-height:1.5;color:rgba(17,19,43,.6)}
.filter-panel__divider{display:block;width:100%;height:auto}
.filter-panel__footer{display:flex;justify-content:space-between;align-items:center;gap:16px}
.filter-panel__clear{padding:12px 0;border:0;background:none;font-family:inherit;font-size:var(--fs-16);font-weight:600;color:var(--navy);cursor:pointer}
@media (max-width:768px){body:not(.canvas-mode) .filter-panel{left:var(--gutter);width:auto}body:not(.canvas-mode) .filter-panel fieldset{flex:1 1 calc(50% - 20px)}}
@media (max-width:480px){body:not(.canvas-mode) .filter-panel fieldset{flex-basis:100%}}

/* ---------- logo-grid ---------- */
.logo-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.logo-grid li{width:140px;height:140px;box-sizing:border-box;padding:20px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center}
.logo-grid img{width:100px;height:100px;object-fit:contain;display:block}
@media (max-width:768px){body:not(.canvas-mode) .logo-grid:not(.marquee__set){display:grid;grid-template-columns:repeat(2,140px);justify-content:center;gap:20px}} /* Lucia 21 Oct: two columns centred on phones, 20px between logos across and down */
[data-bg="cream"] .logo-grid li{background:var(--light)} /* circles stay visible on a cream section (About is all cream since v2, CAR-131) */

/* ---------- split (text column + flexible aside) ---------- */
.split{display:grid;grid-template-columns:571px minmax(0,1fr);column-gap:139px;max-width:1300px;margin-left:auto;margin-right:auto}
@media (max-width:1024px){body:not(.canvas-mode) .split{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (max-width:768px){body:not(.canvas-mode) .split{grid-template-columns:1fr;row-gap:32px}}

/* ---------- promo-split (magenta-dark panel: text + photo) ---------- */
.promo-split{--focus-ring:var(--navy);display:grid;grid-template-columns:3fr 2fr;max-width:1040px;margin-left:auto;margin-right:auto;border-radius:var(--radius-sm);overflow:hidden;background:var(--magenta-dark)} /* 1040 max (was the full container): narrower band, Marker.io CAR-116 (v2) */
.promo-split__text{padding:60px var(--gutter);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.promo-split__body{max-width:600px;display:flex;flex-direction:column;gap:20px}
.promo-split__title{margin:0;font-size:var(--fs-h2-sm);font-weight:600;letter-spacing:-2px;line-height:1;color:var(--light)}
.promo-split__body p{margin:0;font-size:var(--fs-16);line-height:1.6;color:var(--light)}
.promo-split__media{position:relative}
.promo-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1024px){body:not(.canvas-mode) .promo-split__media{min-height:400px}}
@media (max-width:768px){body:not(.canvas-mode) .promo-split{grid-template-columns:minmax(0,1fr)}body:not(.canvas-mode) .promo-split__text .btn{max-width:100%;white-space:normal;text-align:center}body:not(.canvas-mode) .promo-split__media{min-height:0}body:not(.canvas-mode) .promo-split__media img{position:static;height:auto;aspect-ratio:700 / 582}}

/* ---------- region-map (Figma 539:9046 "Support across Victoria": map of Victoria, region chips, contact card on the active pin) ---------- */
/* Map art is drawn at 1840 x 700 (assets/vic-map-r4.svg); pins sit on it in those units (--x/--y). The SHARED region-map script scales and
   pans the layer (--s, --ox, --oy on the viewport) so the active pin stays in view on narrower screens, and places the card above it.
   Without the script the map shows at full size with Melbourne active. */
.region-map{position:relative;margin:80px var(--gutter) 0} /* Figma: 80px from the heading group, 40px side gutters */
.region-map__viewport{--s:1;--ox:0px;--oy:0px;position:relative;height:700px;overflow:hidden;border:1px solid rgba(17,19,43,.2);border-radius:8px;background:var(--bg)}
.region-map__layer{position:absolute;left:0;top:0;width:1840px;height:700px;transform:translate(var(--ox),var(--oy)) scale(var(--s));transform-origin:0 0}
.region-map__img{display:block;width:1840px;height:700px;max-width:none;pointer-events:none}
.region-map__pin{position:absolute;left:calc(var(--x) * 1px - 18px);top:calc(var(--y) * 1px - 17px);width:36px;height:34px;padding:0;border:0;background:none;cursor:pointer;transform:scale(calc(1 / var(--s)));transform-origin:50% 50%;opacity:.55;transition:opacity .2s ease}
.region-map__pin img{display:block;width:36px;height:34px}
.region-map__pin:hover{opacity:1}
.region-map__pin.is-active{visibility:hidden} /* drawn by .region-map__marker, above the chip panel */
.region-map__marker{position:absolute;left:833px;top:477px;z-index:3;width:36px;height:34px;pointer-events:none}
.region-map__marker img{display:block;width:36px;height:34px}
.region-map__card{position:absolute;left:821px;top:331px;z-index:3;display:flex;flex-direction:column;gap:24px;padding:16px 20px;background:var(--pink);border:1.5px solid var(--navy);border-radius:4px;color:var(--navy)}
.region-map[data-ready] .region-map__layer{transition:transform .45s ease}
.region-map[data-ready] .region-map__card,.region-map[data-ready] .region-map__marker{transition:left .45s ease,top .45s ease} /* no animation on first paint */
.region-map__name{margin:0;font-size:24px/* TBC: off-scale (Figma 24) */;font-weight:600;line-height:1.2;letter-spacing:-.5px;white-space:nowrap}
.region-map__line{display:block;width:100%;height:2px;margin-top:-16px}
.region-map__contact{margin:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-16);line-height:1.2}
.region-map__contact div{display:flex;gap:8px}
.region-map__contact dt{width:20px;flex:none}
.region-map__contact dd{margin:0;white-space:nowrap}
.region-map__contact a{color:inherit;text-decoration:none}
.region-map__contact a:hover{text-decoration:underline}
.region-map__chips{position:absolute;left:23px;bottom:23px;z-index:2;width:500px;max-width:calc(100% - 46px);box-sizing:border-box;display:flex;flex-wrap:wrap;gap:12px;padding:16px;background:var(--white);border:1px solid rgba(17,19,43,.15);border-radius:8px}
.region-map__chip{padding:6px 16px;border:0;border-radius:4px;background:var(--bg);color:var(--navy);font:inherit;font-size:var(--fs-16);font-weight:600;line-height:1.5;cursor:pointer;transition:background-color .2s ease}
.region-map__chip:hover{background:var(--nav-active)}
.region-map__chip[aria-pressed="true"]{background:var(--pink)}
.region-map__chip:focus-visible,.region-map__pin:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:1024px){body:not(.canvas-mode) .region-map__viewport{height:560px}body:not(.canvas-mode) .region-map__chips{position:static;width:auto;max-width:none;margin-top:16px}} /* chips below the map, so no pin hides under them */
@media (max-width:768px){body:not(.canvas-mode) .region-map__viewport{height:420px}}
@media (prefers-reduced-motion:reduce){.region-map[data-ready] .region-map__layer,.region-map[data-ready] .region-map__card,.region-map[data-ready] .region-map__marker{transition:none}}

/* ---------- tag ---------- */
.tag{line-height:1;text-transform:uppercase}
/* Two variants by design: --filled = status label on media (e.g. "Available now" on a home card);
   --plain = category/topic label in text flow (e.g. news card topic). */
.tag--filled{background:var(--magenta-dark);color:var(--light);font-size:var(--fs-12);font-weight:500;letter-spacing:-.1px;padding:8px 24px}
.tag--plain{font-size:var(--fs-body);font-weight:600;color:var(--navy)}

/* ---------- media-frame ---------- */
/* The three variants share almost nothing, so there is no .media-frame base rule. --hero and --home share the
   band + inset structure (pink fill, two magenta gradient bands, inset photo); --news is a different technique
   (background gradients revealed by padding on card hover/focus-within). __img is shared by all three. */
.media-frame--hero,.media-frame--home{position:relative;background:var(--pink)}
.media-frame--hero{overflow:hidden;--mf-band:240px;--mf-inset:clamp(32px,9%,60px)}
.media-frame--home{--mf-band:136px;--mf-inset:24px}
@media (max-width:768px){body:not(.canvas-mode) .media-frame--home{--mf-inset:16px}} /* Lucia 21 Oct: 16px photo inset on phones */
.media-frame__band{position:absolute;left:0;right:0;height:var(--mf-band);z-index:1;pointer-events:none}
.media-frame__band--top{top:0;background:linear-gradient(to right,rgba(255,0,140,0),var(--magenta))}
.media-frame__band--bottom{bottom:0;background:linear-gradient(to left,rgba(255,0,140,0),var(--magenta))}
.media-frame__inset{position:absolute;inset:var(--mf-inset);z-index:2;overflow:hidden}
.media-frame__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.media-frame--news{display:block;width:100%;aspect-ratio:400/260;box-sizing:border-box;padding:0;overflow:hidden;background:linear-gradient(to right,rgba(255,0,140,0),var(--magenta)) top/100% 50% no-repeat,linear-gradient(to left,rgba(255,0,140,0),var(--magenta)) bottom/100% 50% no-repeat;transition:padding .25s ease}
.card-news:hover .media-frame--news,.card-news:focus-within .media-frame--news{padding:20px}
.media-frame--news>img{display:block;width:100%;height:100%;object-fit:cover} /* fills the frame inside its padding, so the hover inset is equal on all four sides */

/* ---------- card-service ---------- */
/* default = Services tab card (<a>, arrow bottom-right); --compact = mega-menu card (<div>, stretched title link, hover shift).
   Default-only rules are scoped with :where(.card-service:not(.card-service--compact)) and compact rules with
   :where(.card-service--compact), so every selector keeps the specificity of the single-class rule it replaced. */
.card-service{display:flex;flex-direction:column}
.card-service__row{flex:1 1 auto;display:flex;gap:24px;align-items:flex-start}
.card-service__icon{flex:0 0 auto;display:block}
.card-service__body{display:flex;flex-direction:column;min-width:0}
.card-service__title{margin:0;font-weight:600;color:var(--navy)}
.card-service__desc{margin:0;font-weight:400;color:var(--navy)}
.card-service:where(:not(.card-service--compact)){color:var(--navy)}
.card-service:where(:not(.card-service--compact)):hover{text-decoration:none}
:where(.card-service:not(.card-service--compact)) .card-service__row{padding:48px 0}
:where(.card-service:not(.card-service--compact)) .card-service__icon{width:80px;height:80px}
:where(.card-service:not(.card-service--compact)) .card-service__body{flex:1 1 auto;gap:12px}
:where(.card-service:not(.card-service--compact)) .card-service__title{font-size:var(--fs-title);line-height:24px}
:where(.card-service:not(.card-service--compact)) .card-service__desc{font-size:var(--fs-body);line-height:26px}
.card-service__arrow{align-self:flex-end}
/* --compact. Row keeps translateX(0) at rest so it is always the containing block of the stretched link ::after;
   the ::after left/right counter-shift keeps the hit area + focus ring on the card during the 20px hover shift. */
.card-service--compact{position:relative}
:where(.card-service--compact) .card-service__row{padding:24px 0;transform:translateX(0);transition:transform 250ms ease-out}
:where(.card-service--compact) .card-service__icon{width:60px;height:60px}
:where(.card-service--compact) .card-service__body{flex:1 1 0;gap:8px}
:where(.card-service--compact) .card-service__title{font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-16);line-height:1.5;letter-spacing:-.3px}
:where(.card-service--compact) .card-service__desc{font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-14);line-height:1.5}
:where(.card-service--compact) .card-service__title a{color:var(--navy)}
:where(.card-service--compact) .card-service__title a::after{content:"";position:absolute;inset:0 0 -2.5px 0;transition:left 250ms ease-out,right 250ms ease-out}
:where(.card-service--compact) .card-service__title a:focus-visible{outline:none}
:where(.card-service--compact) .card-service__title a:focus-visible::after{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
/* bottom margin −.5px − 2px line padding */
:where(.card-service--compact) .card-service__divider{margin:auto 0 -2.5px;flex-shrink:0}
.card-service--compact:has(a:focus-visible) .card-service__row{transform:translateX(20px)}
.card-service--compact:has(a:focus-visible) .card-service__title a::after{left:-20px;right:20px}
@media (hover:hover) and (pointer:fine){
  .card-service--compact:hover .card-service__row{transform:translateX(20px)}
  .card-service--compact:hover .card-service__title a::after{left:-20px;right:20px}
}

/* ---------- card-persona ---------- */
.card-persona{display:flex;gap:24px;align-items:flex-start;background:var(--white);border-radius:var(--radius-sm);padding:32px;color:var(--navy)}
.card-persona:hover{text-decoration:none}
.card-persona__media{flex:0 0 120px;width:120px;height:120px}
.card-persona__media img{width:120px;height:120px;display:block}
.card-persona__body{display:flex;flex-direction:column;gap:20px;min-width:0}
.card-persona__title{margin:0;font-size:var(--fs-title);font-weight:600;line-height:24px;color:var(--navy)}
.card-persona__desc{margin:0;font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--navy)}

/* ---------- card-home ---------- */
.card-home{display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--navy-a05);border-radius:var(--radius-sm);overflow:hidden;color:var(--navy)}
.card-home:hover{text-decoration:none}
/* ratio = desktop media size at 1920: ((1400 cap − 2×40 gutter − 2×20 gap) / 3 − 2×1.5 border) × 272 = 423.67 × 272 */
.card-home__media{aspect-ratio:1271 / 816;width:100%}
.card-home__tag{position:absolute;left:0;top:24px;z-index:3}
.card-home__body{display:flex;flex-direction:column;gap:24px;padding:29px 22px}
.card-home__name{margin:0;font-size:var(--fs-title);font-weight:600;letter-spacing:-.3px;color:var(--navy);text-align:left}
.card-home__features{display:flex;flex-direction:column;gap:12px}
.card-home__feature-row{display:flex;gap:12px}
.card-home__feature{display:flex;align-items:center;gap:8px;font-size:var(--fs-feature);font-weight:400;letter-spacing:-.1px;color:var(--navy);min-width:0}
.card-home__feature--left{flex:0 0 60%;min-width:0}
.card-home__feature--right{flex:0 0 40%;min-width:0}
@media (max-width:768px){body:not(.canvas-mode) .card-home__tag{top:16px}body:not(.canvas-mode) .card-home__body>.card-home__meta{margin-top:-20px}body:not(.canvas-mode) .card-home__body{padding:16px}body:not(.canvas-mode) .card-home__features,body:not(.canvas-mode) .card-home__feature-row{gap:4px}body:not(.canvas-mode) .card-home__feature-row{flex-direction:column}body:not(.canvas-mode) .card-home__feature--left,body:not(.canvas-mode) .card-home__feature--right{flex:0 0 auto}} /* Lucia 21 Oct, phones: tag 16px from the top, card body padding 16px, name / meta lines 4px apart; six features in one column, 4px apart */
.card-home__feature-icon{width:24px;height:24px;flex:0 0 auto}

/* ---------- card-news ---------- */
.card-news{display:flex;flex-direction:column;gap:25px}
.card-news__body{flex:1 1 auto;display:flex;flex-direction:column;gap:16px;text-align:left}
.card-news__meta{display:flex;align-items:center;gap:12px}
.card-news__date{font-size:var(--fs-body);font-weight:600;line-height:16px;text-transform:uppercase;color:var(--navy)}
.card-news__heading{display:flex;flex-direction:column;gap:12px}
.card-news__title{margin:0;font-size:var(--fs-title);font-weight:500;line-height:1.5;color:var(--navy)}
.card-news__excerpt{margin:0;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* TBC: align with .arrow-link in phase 6 */
.card-news__more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-body);font-weight:600;color:var(--navy);text-decoration:none}
.card-news__more img{width:24px;height:24px;flex:0 0 auto}
/* the whole card is clickable (Lucia 28 Oct): the "Read more" link stretches over the card; keyboard and screen readers still get one link */
.card-news{position:relative}
.card-news__more::after{content:"";position:absolute;inset:0;z-index:1}

/* ---------- scroll-carousel ---------- */
/* Root [data-scroll-carousel] holds a track [data-scroll-track] + optional [data-scroll-prev]/[data-scroll-next] buttons.
   >1024: the track keeps its section layout (no carousel styles). ≤1024: single scroll-snap row bleeding to the viewport edges.
   Items are the track's direct children. Behaviour: SHARED scroll-carousel script in index.html. */
[data-scroll-carousel]{--scroll-carousel-gap:40px} /* shared track gap; only read by the ≤1024 rules below (tablet 769–1024 = 40px) */
/* FLAG: disabled arrow style proposed by Ven — not in Figma, pending Lucia */
[data-scroll-prev][aria-disabled="true"],[data-scroll-next][aria-disabled="true"]{opacity:.4;cursor:default}
@media (max-width:1024px){
  body:not(.canvas-mode) [data-scroll-carousel]:not(.scroll-carousel--tablet-only) .scroll-carousel__track{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:var(--scroll-carousel-gap);align-self:stretch;width:auto;box-sizing:border-box;margin:-8px calc(-1 * var(--gutter));padding:8px var(--gutter);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  body:not(.canvas-mode) [data-scroll-carousel]:not(.scroll-carousel--tablet-only) .scroll-carousel__track::-webkit-scrollbar{display:none}
  body:not(.canvas-mode) [data-scroll-carousel]:not(.scroll-carousel--tablet-only) .scroll-carousel__track>*{flex:0 0 calc((100% - var(--scroll-carousel-gap)) / 2 - 48px);min-width:0;max-width:none;scroll-snap-align:start}
}
/* --tablet-only: carousel at 769–1024 only; outside that range the track keeps its section layout */
@media (min-width:769px) and (max-width:1024px){
  body:not(.canvas-mode) [data-scroll-carousel].scroll-carousel--tablet-only .scroll-carousel__track{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:var(--scroll-carousel-gap);align-self:stretch;width:auto;box-sizing:border-box;margin:-8px calc(-1 * var(--gutter));padding:8px var(--gutter);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  body:not(.canvas-mode) [data-scroll-carousel].scroll-carousel--tablet-only .scroll-carousel__track::-webkit-scrollbar{display:none}
  body:not(.canvas-mode) [data-scroll-carousel].scroll-carousel--tablet-only .scroll-carousel__track>*{flex:0 0 calc((100% - var(--scroll-carousel-gap)) / 2 - 48px);min-width:0;max-width:none;scroll-snap-align:start}
}
@media (max-width:768px){
  /* ≤768 gap 16px (Marker.io CAR-150, v2: cards read as one row; was 40px) — every sideways card row on mobile */
  body:not(.canvas-mode) [data-scroll-carousel]{--scroll-carousel-gap:16px}
  body:not(.canvas-mode) [data-scroll-carousel]:not(.scroll-carousel--tablet-only) .scroll-carousel__track>*{flex-basis:85%}
}

/* ---------- card-video ---------- */
.card-video{position:relative;display:flex;flex-direction:column;gap:20px;color:var(--navy)} /* relative: keeps its .sr-only text inside the scroll track (it widened the page at 768) */
.card-video:hover{text-decoration:none}
/* ratio = desktop size at 1920 (360 × 231.7): (1400 cap − 2×40 gutter − 2×80 list padding − 2×40 gap) / 3 = 360 wide */
.card-video__media{position:relative;display:block;aspect-ratio:360 / 231.7;width:100%;overflow:hidden;border-radius:0;background:var(--navy)}
.card-video__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.card-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.card-video__play img{width:36px;height:34px}
.property-detail__block .card-video__play{width:80px;height:76px}.property-detail__block .card-video__play img{width:72px;height:68px} /* property video tour: wide frame (main column) */
.card-video__title{margin:0;font-size:var(--fs-title-lg);font-weight:600;line-height:1.3;letter-spacing:-.5px;color:var(--navy)}
/* playing in place (SHARED video-inline, CAR-196): the YouTube player fills the thumbnail's box */
.card-video.is-playing .card-video__media iframe,.rich-text__video.is-playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rich-text__video.is-playing{aspect-ratio:16 / 9;background:var(--navy)}

/* ---------- card-feature (proof point: illustration + divider + title + text) ---------- */
.card-feature{display:flex;flex-direction:column;gap:20px}
.card-feature__media{width:120px;height:120px}
.card-feature__title{margin:0;padding-right:40px;font-size:var(--fs-title);font-weight:400;letter-spacing:-.5px;line-height:1.3;color:var(--navy)}
.card-feature__text{margin:0;padding-right:40px;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--navy)}

/* ---------- card-highlight (bordered card; .is-active only where a page still opts in with [data-highlight-scroll]; none do since Josh 27 Oct, CAR-212/213) ---------- */
.job-list>.card-highlight{text-decoration:none;color:inherit;gap:12px}.job-list>.card-highlight[hidden]{display:none}.job-list>.card-highlight .arrow-link{margin-top:auto} /* job cards: whole card links to the job board */
.job-list>.card-highlight:hover,.job-list>.card-highlight:focus-visible{background:var(--pink)}
/* hero-centred: pink hero with centred title + full-bleed photo strip (Figma 682:5665, Frontline careers) */
.hero-centred{background:var(--pink);padding:80px 0;overflow:hidden}
.hero-centred__inner{max-width:calc(var(--w8) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.hero-centred .page-title{margin:0;text-align:center;color:var(--navy)} /* Lucia 28 Oct: navy text on pink (was light), as the homepage hero (CAR-161) */ /* white text on the pink hero (Figma 682:5721) */
.hero-centred__intro{margin:0;font-size:var(--fs-body-lg);line-height:1.5;color:var(--navy)}
.hero-centred .btn-row{margin-top:12px}
.hero-centred__strip{position:relative;margin-top:80px}
.marquee{overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:marquee-left var(--marquee-dur,140s) linear infinite} /* slow, calm drift (~33px/s): one 11-photo set per 140s */
.marquee--7{--marquee-dur:90s} /* 7-photo set at the same speed */
.marquee__set{display:flex;gap:10px;padding-right:10px}
.marquee__set img{flex:0 0 416px;width:416px;height:260px;object-fit:cover;display:block}
.marquee:hover .marquee__track,.marquee.is-paused .marquee__track{animation-play-state:paused}
.marquee .marquee__pause{position:absolute;right:var(--gutter);bottom:-50px} /* below the strip, in the hero padding */
.marquee--logos{position:relative;margin-top:calc(60px - var(--space-head-content));--marquee-dur:75s;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} /* Accommodation partners (CAR-134): 17 logos drift slowly, edges fade; 40px under the text (Lucia) */
.marquee--logos .marquee__set{flex-wrap:nowrap;gap:32px;padding-right:32px} /* padding = gap keeps the loop seamless */
.marquee--logos .marquee__set li{flex:0 0 120px;width:120px;height:120px;padding:18px}
.marquee--logos .marquee__set img{flex:none;width:84px;height:84px}
.marquee--logos{padding-bottom:58px}.marquee--logos .marquee__pause{bottom:0;right:auto;left:50%;transform:translateX(-50%)} /* centred under the strip, inside the mask */
.marquee--logos .marquee__pause img{filter:brightness(0);opacity:.85} /* white hero icon made dark for the light section */
@media (max-width:768px){body:not(.canvas-mode) .marquee--logos{margin-top:calc(60px - var(--space-head-content))}body:not(.canvas-mode) .marquee--logos .marquee__set li{flex-basis:96px;width:96px;height:96px;padding:14px}body:not(.canvas-mode) .marquee--logos .marquee__set img{flex-basis:auto;width:68px;height:68px}}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.marquee__pause{display:none}}
@media (max-width:768px){body:not(.canvas-mode) .hero-centred{padding:60px 0}body:not(.canvas-mode) .hero-centred__strip{margin-top:40px}body:not(.canvas-mode) .marquee__set img{flex-basis:240px;width:240px;height:150px}body:not(.canvas-mode) .marquee__track{animation-duration:calc(var(--marquee-dur,140s) * .7)}}
/* tabs--pills: pill tab row (Figma 682:5665 frontline roles) on top of SHARED tabs */
.tabs--pills{display:flex;flex-direction:column;align-items:center;gap:50px;margin-top:20px}
.tabs--pills .tabs__list{flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.tabs--pills .tabs__tab{flex:0 0 auto;height:auto;padding:10px 18px;border-radius:999px;background:var(--white);font-size:var(--fs-16);font-weight:400;letter-spacing:0;line-height:1.2;text-transform:uppercase}
.tabs--pills .tabs__tab[aria-selected="true"]{background:var(--pink);color:var(--navy);border-radius:999px} /* Marker.io CAR-168 (Josh 26 Oct): role names bigger, 14 → 16px */
.tabs--pills .tabs__tab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.tabs--pills .tabs__panel{width:100%}
.role-panel{display:grid;grid-template-columns:minmax(0,599fr) minmax(0,581fr);column-gap:140px;align-items:start;padding:0 40px;box-sizing:border-box}
.role-panel[hidden]{display:none}
.role-panel__text{display:flex;flex-direction:column;gap:16px}
.role-panel__title{margin:0;font-size:var(--fs-h3);font-weight:400;letter-spacing:-.5px;line-height:1.2;color:var(--navy)}
.role-panel__desc{margin:0;font-size:var(--fs-body-lg);line-height:1.6;color:var(--navy)}
.role-panel__label{margin:0;font-size:var(--fs-16);font-weight:600;line-height:1.5;color:var(--navy)}
.role-panel__media img{display:block;width:100%;height:400px;object-fit:cover}
@media (max-width:1024px){body:not(.canvas-mode) .role-panel{column-gap:60px;padding:0}}
@media (max-width:768px){body:not(.canvas-mode) .tabs--pills{gap:32px}body:not(.canvas-mode) .tabs--pills .tabs__list{flex-wrap:wrap;justify-content:center} /* all role pills visible on mobile (Marker.io CAR-160: Internship was off-screen in a sideways scroll) */body:not(.canvas-mode) .role-panel{grid-template-columns:minmax(0,1fr);row-gap:32px}body:not(.canvas-mode) .role-panel__media img{height:240px}}
body main>.section.section--gap-funded[data-bg="light"]:not(.section--collapse-bottom):has(+ .funded[data-base="light"]){padding-bottom:calc(var(--sec-pad) / 2 + 60px)} /* Careers inner pages: apply steps → closing band, +60px (Lucia, 15 Oct) */
.trusted .card-highlight .checklist{margin:0}
/* team-card: "Say hello to your future team" (Business support careers) — photo on top, light body with team name, open vacancies and arrow link */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.team-card{display:flex;flex-direction:column;border-radius:var(--radius-sm);background:var(--light);color:var(--navy);text-decoration:none;overflow:hidden}
.team-card__photo{display:block;width:100%;aspect-ratio:362 / 228;object-fit:cover}
.team-card__body{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;padding:32px 28px 40px}
.team-card__title{margin:0;font-size:var(--fs-24);font-weight:600;letter-spacing:-.3px;line-height:1.3}
.team-card__count{font-size:var(--fs-16);line-height:1.5}
.team-card__arrow{margin-top:16px}
@media (max-width:1024px){body:not(.canvas-mode) .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:768px){body:not(.canvas-mode) .team-grid{grid-template-columns:minmax(0,1fr)}body:not(.canvas-mode) .team-card__body{padding:24px 20px 28px}}
.media-split-stack{display:flex;flex-direction:column;gap:120px;margin-top:var(--space-head-content)} /* stacked text / photo rows (Business support office benefits) */
@media (max-width:768px){body:not(.canvas-mode) .media-split-stack{gap:60px}}
.btn--disabled{opacity:.6;cursor:default;pointer-events:none} /* placeholder button with no destination yet (About: client handbook coming soon) */
.eyebrow-label,.media-split--portrait .media-split__content p.eyebrow-label,.split__text p.eyebrow-label{margin:0;font-size:var(--fs-20);font-weight:300;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:var(--navy)} /* small uppercase label + wavy line above a heading (Figma 633:17017: VISION / MISSION / VALUES on About) */
.eyebrow-label__line{margin:0 0 4px}
/* gc: General Content template body (privacy, feedback and complaints, Customer Reference Group…) — one readable column */
/* .gc (General Content body) replaced by .rich-text (15 Oct) — see "rich-text" below */
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch} /* Careers inner pages: role / team / benefit boxes (card-highlight, static) */
.role-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.role-grid .card-highlight .checklist{margin:0}
@media (max-width:1024px){body:not(.canvas-mode) .role-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){body:not(.canvas-mode) .role-grid,body:not(.canvas-mode) .role-grid--3{grid-template-columns:minmax(0,1fr)}}
.card-highlight{display:flex;flex-direction:column;gap:20px;border:1.5px solid var(--navy);border-radius:var(--radius-sm);padding:32px;background:transparent;transition:background-color .3s ease}
.card-highlight.is-active{background:var(--pink)}
@media (prefers-reduced-motion:reduce){.card-highlight,.card-numbered__item{transition:none}}
.card-highlight__title{margin:0;font-size:var(--fs-title-xl);font-weight:400;letter-spacing:-.5px;line-height:1.3;color:var(--navy)}
.card-highlight__text{margin:0;font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--navy)}

/* ---------- megamenu (panel + neutralisers for .mainnav a rules inside it) ---------- */
.megamenu{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--bg);box-shadow:none;border:0;border-radius:0}
.megamenu{transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s}.megamenu[hidden]{display:block;opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}@media (prefers-reduced-motion:reduce){.megamenu,.megamenu[hidden]{transition:none;transform:none}}
/* Figma drop shadow 0 8 24 0 #11132B @20%. On a pseudo so clip-path trims only the top edge without clipping the caret (top:-5px). */
.megamenu::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:var(--shadow-menu);clip-path:inset(0 -40px -40px -40px);pointer-events:none}
.megamenu__line{position:absolute;top:-2px;left:0;width:100%;height:10px;display:block;z-index:1;pointer-events:none}
.megamenu__caret{position:absolute;top:-5px;left:0;width:20.64px;height:12.13px;display:block;z-index:2;pointer-events:none}
.megamenu__inner{max-width:1400px;width:100%;margin-left:auto;margin-right:auto;padding:32px 40px;box-sizing:border-box;display:flex;flex-direction:row;gap:60px;align-items:flex-start}
.megamenu__grid{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.megamenu__row{display:flex;gap:40px;align-items:stretch}
.megamenu__row>.card-service{flex:1 1 0;min-width:0;max-width:670px}
.megamenu__row>.card-service:only-child{flex:0 0 calc((100% - 40px) / 2)} /* odd last card (Disability services has 5): same width as the cards above, left column */
.megamenu__row:last-child .card-service__title a::after{bottom:0}
.megamenu__row:last-child .card-service__divider{display:none} /* no line under the last row of a mega menu */
.megamenu__cta{flex:0 0 335px;width:335px;box-sizing:border-box;background:var(--pink);border-radius:var(--radius-sm);padding:24px 32px 32px 32px;display:flex;flex-direction:column;gap:20px;overflow:hidden}
.megamenu__cta-head{padding-right:60px}
.megamenu__cta-title{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-20);font-weight:600;line-height:1.2;letter-spacing:-.5px;color:var(--bg)}
.megamenu__cta-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:'Inter',system-ui,sans-serif;font-size:var(--fs-16);font-weight:600;line-height:1.4;color:var(--bg)}
.megamenu__cta-link img{width:36px;height:36px;display:block}
.megamenu__illustration{display:block;width:100%;height:auto}
/* whole CTA panel = click/hover area for "Talk to our team" (link stays the only interactive element) */
.megamenu__cta{position:relative;cursor:pointer}
.megamenu__cta-link::after{content:"";position:absolute;inset:0;z-index:1}
.megamenu__cta-link:focus-visible{outline:none}
.megamenu__cta:has(.megamenu__cta-link:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
/* neutralise the .mainnav a / a::before / a:hover / a img nav-item rules inside the panel */
.mainnav .megamenu a{position:static;display:inline;gap:0;padding:0;margin:0;text-indent:0;border-radius:0;background:none;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;white-space:normal;color:inherit}
.mainnav .megamenu a::before{content:none}
/* megamenu--compact (Marker.io CAR-37, Lucia 16 Oct): small dropdown under one nav item (Disability Accommodation: CareChoice Homes, About SDA), not the full-width mega menu.
   Same SHARED megamenu behaviour (hover / click / Esc); list look = the site dropdown (thin navy border, attached under the item). */
.megamenu-item--compact{position:relative}
.megamenu--compact{left:0;right:auto;top:calc(100% + 10px);width:max-content;min-width:220px;padding:8px 0;border:1.5px solid var(--navy);border-radius:var(--radius-sm);background:var(--bg)}
.megamenu--compact::before{content:none}
.megamenu__list{list-style:none;margin:0;padding:0}
.header .megamenu--compact .megamenu__list a{display:block;padding:10px 20px;font-size:var(--fs-16);line-height:1.5;color:var(--navy);white-space:nowrap}
.header .megamenu--compact .megamenu__list a:hover,.header .megamenu--compact .megamenu__list a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.header .megamenu--compact .megamenu__list a[aria-current="page"]{font-weight:600}
.mainnav .megamenu a:hover{background:none}
.mainnav .megamenu .megamenu__cta-link{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-16);font-weight:600;line-height:1.4;letter-spacing:normal;color:var(--bg)}
.mainnav .megamenu .megamenu__cta-link img{width:36px;height:36px;display:block}

/* ---------- mobile-menu (≤1023 since 28 Oct, Marker.io CAR-205: the full menu scales down to fit from 1024px; was ≤1309, ≤1439 before; the .hamburger toggle stays in the site-header section) ---------- */
/* full-width panel directly under the header (--mm-top = header bottom, set by the SHARED script), filling the rest of the viewport */
.mobile-menu{display:none;position:fixed;left:0;right:0;top:var(--mm-top,0px);height:calc(100dvh - var(--mm-top,0px));background:var(--bg);z-index:200;overflow-y:auto;overscroll-behavior:contain}
body.is-menu-open .mobile-menu{display:block}
/* CTA bottom alignment: column with a 60px gap (minimum space above the CTA) + margin-top:auto on the CTA takes any remaining height */
.mobile-menu__inner{display:flex;flex-direction:column;gap:60px;min-height:100%}
.mobile-menu__navblock{display:flex;flex-direction:column;gap:1px}
.mobile-menu__line{display:block;width:100%;height:4px}
.mobile-menu__nav{display:flex;flex-direction:column;gap:1px}
.mobile-menu__row{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:16px var(--gutter);margin:0;border:0;background:none;font-family:inherit;font-size:var(--fs-18);line-height:24px;letter-spacing:-.3px;font-weight:400;color:var(--navy);text-align:left;text-decoration:none;cursor:pointer}
.mobile-menu__chevron{width:24px;height:24px;flex:0 0 auto;display:block;transform:rotate(180deg);transition:transform .2s ease} /* icon points up */
.mobile-menu__disclosure[aria-expanded="true"] .mobile-menu__chevron{transform:none}
.mobile-menu__group{display:flex;flex-direction:column}
.mobile-menu__sub{list-style:none;margin:0;padding:0 calc(var(--gutter) + 16px) 20px} /* +20px under the last item, above the group divider */
.mobile-menu__sub[hidden]{display:none}
.mobile-menu__sub a{display:block;padding:8px 0;font-size:var(--fs-16);line-height:1.5;letter-spacing:-.3px;font-weight:400;color:var(--navy);text-decoration:none}
.mobile-menu__divider{display:block;position:relative;width:100%;height:1px;overflow:visible} /* 1px slot (Figma 587:19512) */
.mobile-menu__divider img{position:absolute;left:0;top:-.5px;width:100%;height:2px;display:block} /* 2px box centred on the slot (−50% inset) keeps the hand-drawn waviness */
.mobile-menu__cta{margin-top:auto;display:flex;flex-direction:column;gap:20px;padding:16px;background:var(--pink);border-radius:4px 4px 0 0}
.mobile-menu__cta .btn{width:100%;justify-content:center}
.mobile-menu__illustration{display:block;width:100%;height:auto}

/* ---------- tabs (roving tabindex; ≤768 the tab row scrolls horizontally — see services) ---------- */
.tabs__list{display:flex;position:relative;z-index:1;margin-bottom:-6px}
.tabs__tab{position:relative;flex:1 1 0;height:40px;padding:4px 20px;border:0;background:transparent;font-family:inherit;font-weight:500;font-size:var(--fs-18);letter-spacing:-.3px;color:var(--navy);cursor:pointer;text-align:center}
.tabs__tab[aria-selected="true"]{background:var(--magenta);color:var(--light);border-radius:4px 4px 0 0}
.tabs__tab::before{content:"";position:absolute;top:-4px;bottom:-4px;left:0;right:0}
.tabs__underline{position:relative;display:flow-root} /* flow-root: stops the stroke's negative margins collapsing through */
.tabs__underline-fill{position:absolute;left:0;top:0;width:100%;height:auto;z-index:2;display:block}
.tabs__underline-stroke{display:block;width:100%;height:auto;margin:calc(-2 / 927 * 100%) 0;position:relative;z-index:3}
.tabs__panel[hidden]{display:none}
.tabs__panel .svc-cta{margin-top:40px}

/* ---------- quote-carousel ---------- */
.quote-carousel__frame{position:relative;width:100%;max-width:1400px;height:400px;margin:0 auto}
.quote-carousel__bg{position:absolute;inset:0;width:100%;height:100%;background:var(--quote-blob) no-repeat center/100% 100%;z-index:0}
.quote-carousel__mark{position:absolute;width:88px;height:67px;z-index:2}
.quote-carousel__mark--tl{left:82px;top:-0.41px}
.quote-carousel__mark--br{right:93px;bottom:-0.41px}
.quote-carousel__mark--br{display:block;background:var(--magenta);-webkit-mask:url(../assets/Quote-2.svg) center/contain no-repeat;mask:url(../assets/Quote-2.svg) center/contain no-repeat}
.quote-carousel__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:32px;align-items:center;text-align:center;padding:32px 237px 90px;box-sizing:border-box;z-index:1}
.quote-carousel__body{position:relative;z-index:2;max-width:926px;margin:0;display:flex;flex-direction:column;gap:32px;align-items:center}
.quote-carousel__text{white-space:pre-line;margin:0;font-size:var(--fs-quote);font-weight:600;line-height:1.3;letter-spacing:-.5px;color:var(--navy)}
.quote-carousel__attr{position:absolute;bottom:68px;left:0;right:0;margin:0;padding:0;line-height:1.2;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;color:var(--navy);z-index:2}
.quote-carousel__name{font-size:var(--fs-quote-name);font-weight:500;font-style:italic;letter-spacing:-.2px}
.quote-carousel__org{font-size:var(--fs-quote-org);font-weight:500;font-style:italic}
.quote-carousel__controls{position:static;z-index:2;display:flex;align-items:center;justify-content:center;gap:20px;margin-top:-36px}
.quote-carousel__dots{display:flex;gap:0;align-items:center}
.quote-carousel__dot{position:relative;width:24px;height:24px;padding:0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px}
.quote-carousel__dot img{display:none}
.quote-carousel__dot::before{content:"";display:block;width:24px;height:24px;background:var(--navy);opacity:.35;-webkit-mask:url(../assets/Dot.svg) center/contain no-repeat;mask:url(../assets/Dot.svg) center/contain no-repeat}
.quote-carousel__dot[aria-current="true"]::before{opacity:1;-webkit-mask-image:url(../assets/Dot-star.svg);mask-image:url(../assets/Dot-star.svg)}
.quote-carousel__dot::after{content:"";position:absolute;inset:-10px}

/* ---------- accordion ---------- */
/* was inline style="margin:0" on each FAQ h3 */
.accordion__heading{margin:0}
.accordion__item{border:1.5px solid var(--navy);border-radius:var(--radius-sm);background:transparent;transition:background-color .3s ease}
.accordion__item.is-open{background:var(--pink)}
.accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:20px 28px;background:none;border:0;text-align:left;font-family:inherit;font-size:var(--fs-title);font-weight:500;letter-spacing:-.5px;line-height:1.5;color:var(--navy);cursor:pointer}
.accordion__trigger .accordion__icon{width:24px;height:24px;flex:0 0 auto;transition:transform .3s ease}
.accordion__item.is-open .accordion__trigger .accordion__icon{transform:scaleY(-1)}
.accordion__panel{display:grid;grid-template-rows:0fr;min-height:0;overflow:hidden;transition:grid-template-rows .3s ease}
.accordion__item.is-open .accordion__panel{grid-template-rows:1fr}
.accordion__panel-inner{min-height:0;overflow:hidden;opacity:0;transition:opacity .25s ease}
.accordion__panel-body{padding:0 28px 20px;font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--navy)}
.accordion__item.is-open .accordion__panel-inner{opacity:1}
/* ≤768: 20px from the item border on every side — trigger carries top/sides (and bottom when closed), panel body carries sides + bottom when open; question → answer gap (trigger bottom 20 + body top 0) unchanged */
@media (max-width:768px){
  body:not(.canvas-mode) .accordion__trigger{padding:20px}
  body:not(.canvas-mode) .accordion__panel-body{padding:0 20px 20px}
}

/* ================= About SDA components (Figma 499:4301) ================= */

/* ---------- page-hero--centered (no media; centred text block; combinable with --pink) ---------- */
.page-hero--centered{display:block;min-height:0;padding:60px var(--gutter)}
.page-hero.page-hero--centered .page-hero__text{max-width:var(--w8);margin:0 auto;padding:0;align-items:center;text-align:center}
.page-hero--centered .page-title{text-align:center}
.page-hero--centered .page-hero__intro{line-height:1.5}
.page-hero--centered .btn-row{justify-content:center}

/* ---------- cta-card (pink link card: title, description, arrow link, illustration) + 2-col grid ---------- */
.cta-card{display:flex;flex-direction:column;gap:20px;padding:24px 32px 32px;border-radius:var(--radius-sm);background:var(--pink);color:var(--navy);text-decoration:none}
.cta-card:hover{text-decoration:none}
.cta-card__text{display:flex;flex-direction:column;gap:16px;padding-right:79px}
.cta-card__title{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-.5px;color:var(--navy)}
.cta-card__desc{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--navy)}
.cta-card .arrow-link{align-self:flex-start}
.cta-card--lilac{background:var(--lilac)}
.cta-card--white{background:var(--white)} /* Contact route cards (Figma 646:26597) */
.cta-card--lilac .arrow-link__hover{content:url(../assets/button-arrow-45-hover-lilac.svg)} /* hover arrow fill matches the lilac card (pink is for pink cards); markup should also point at the -lilac file */ /* SIL card (Figma 499:5196); text, link + arrow stay navy */
.cta-card__illustration{display:block;height:200px;width:auto;max-width:100%;object-fit:contain;object-position:left center;align-self:flex-start}
@media (max-width:1024px){body:not(.canvas-mode) .cta-card__illustration{height:160px}}
.cta-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:768px){body:not(.canvas-mode) .cta-card-grid{grid-template-columns:minmax(0,1fr)}body:not(.canvas-mode) .cta-card__text{padding-right:0}}

/* ---------- media-pair (two equal photos) ---------- */
.media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.media-pair img{display:block;width:100%;height:auto;aspect-ratio:680 / 455;object-fit:cover}
@media (max-width:768px){body:not(.canvas-mode) .media-pair{grid-template-columns:minmax(0,1fr);gap:16px}}

/* ---------- cta-band--boxed (on .funded-inner — the Funded CTA band as a rounded panel inside the container; section keeps the page background) ---------- */
div.funded-inner.cta-band--boxed{max-width:none;width:100%;margin:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px;padding:80px 120px;border-radius:var(--radius-sm);background:linear-gradient(to bottom,rgba(255,130,190,.6),var(--pink))}
div.cta-band--boxed .section-head__title{font-size:var(--fs-h2-sm)}
div.cta-band--boxed .section-head__intro{max-width:var(--w8);font-size:var(--fs-16);line-height:1.5}
@media (max-width:1024px){body:not(.canvas-mode) div.funded-inner.cta-band--boxed{padding:60px 40px;gap:40px}}
@media (max-width:768px){body:not(.canvas-mode) div.funded-inner.cta-band--boxed{padding:40px 24px}}

/* ---------- card-numbered (bordered numbered list; static since Josh 27 Oct removed the scroll highlight, CAR-212/213; [data-highlight-scroll] on the root would bring it back) ---------- */
.card-numbered{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.card-numbered__item{display:flex;gap:20px;padding:32px;border:1.5px solid var(--navy);border-radius:var(--radius-sm);transition:background-color .3s ease}
.card-numbered__num{flex:0 0 60px;font-size:var(--fs-48);font-weight:300;line-height:1.3;letter-spacing:-3px;color:var(--navy)}
.card-numbered__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:20px}
.card-numbered__title{margin:0;font-size:var(--fs-24);font-weight:400;line-height:1.3;letter-spacing:-.5px;color:var(--navy)}
.card-numbered__text{margin:0;font-size:var(--fs-16);line-height:1.6;color:var(--navy)}
.card-numbered__item.is-active{background:var(--pink)} /* set by SHARED highlight-scroll, same as .card-highlight */
@media (max-width:768px){body:not(.canvas-mode) .card-numbered__item{padding:24px}body:not(.canvas-mode) .card-numbered__num{font-size:var(--fs-40)}}

/* ---------- stat (centred number + label group) ---------- */
.stat{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:80px;text-align:center}
.stat__item{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--navy)}
.stat__num{font-size:var(--fs-h2);font-weight:400;letter-spacing:-2px;line-height:1}
.stat__label{font-size:var(--fs-small);line-height:1.3}
@media (max-width:768px){body:not(.canvas-mode) .stat{flex-direction:column;align-items:center;gap:32px}}

/* ---------- accordion--steps (numbered steps; same SHARED accordion script) ---------- */
.accordion--steps{display:flex;flex-direction:column}
.accordion__divider{display:block;width:100%;height:auto}
.accordion--steps .accordion__item,.accordion--steps .accordion__item.is-open{border:0;border-radius:0;background:transparent}
.accordion--steps .accordion__trigger{align-items:flex-start;gap:12px;padding:32px 0}
.accordion__step{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.accordion__step-label{position:relative;font-size:var(--fs-16);font-weight:400;line-height:1.3;letter-spacing:0}
.accordion__step-circle{position:absolute;left:-8px;top:-4px;width:64px;height:25px;max-width:none;pointer-events:none}
.accordion__step-title{font-size:var(--fs-quote);font-weight:400;line-height:1.3;letter-spacing:-.2px}
.accordion--steps .accordion__icon,.accordion--steps .accordion__item.is-open .accordion__trigger .accordion__icon{transform:none;transition:none}
.accordion--steps .accordion__icon--open,.accordion--steps .accordion__item.is-open .accordion__icon--closed{display:none}
.accordion--steps .accordion__item.is-open .accordion__icon--open{display:block}
.accordion--steps .accordion__panel-body{padding:0 0 32px;display:flex;flex-direction:column;gap:16px;line-height:1.5}
.accordion--steps .accordion__panel-body p{margin:0}
@media (max-width:768px){body:not(.canvas-mode) .accordion--steps .accordion__trigger{padding:24px 0}body:not(.canvas-mode) .accordion--steps .accordion__panel-body{padding:0 0 24px}}
/* list-dot (Marker.io CAR-44): bullet = the carousel dot (assets/Dot.svg), navy */
.list-dot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.list-dot li{display:flex;align-items:baseline;gap:12px}
.list-dot li::before{content:"";flex:0 0 8px;width:8px;height:8px;background:var(--navy);-webkit-mask:url(../assets/Dot.svg) center/contain no-repeat;mask:url(../assets/Dot.svg) center/contain no-repeat;align-self:flex-start;margin-top:calc(.5lh - 4px)}
/* list-chevron (bullet list with the hand-drawn chevron marker) */
.list-chevron{list-style:none;margin:0;padding:0 0 0 2px;display:flex;flex-direction:column;gap:4px}
.list-chevron li{display:flex;align-items:baseline;gap:12px}
.list-chevron li::before{content:"";flex:0 0 6px;width:6px;height:7px;background:url(../assets/icon-list-chevron-r4.svg) center/contain no-repeat;transform:rotate(90deg) scaleY(-1);align-self:flex-start;margin-top:calc(.5lh - 3.5px)} /* centred on the first line, so it stays at the top when an item wraps */

/* ---------- small section-head / grid helpers (About SDA) ---------- */
.section-head__title--sm{font-size:var(--fs-h2-sm)} /* centred h2 at the smaller h2 size */
.section-head__intro--sm{max-width:689px;margin-left:auto;margin-right:auto;font-size:var(--fs-16);line-height:1.5} /* short centred note under content */
.cta-card-grid--narrow{width:100%;max-width:926px;margin-left:auto;margin-right:auto}
.cta-card-grid--3{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;grid-template-columns:repeat(3,minmax(0,1fr))} /* three route cards in one row (Contact) */
@media (max-width:1024px){body:not(.canvas-mode) .cta-card-grid--3{grid-template-columns:minmax(0,1fr);max-width:640px}}
/* ---------- contact-routes (Contact, Round 1 brief): four route cards — title, phone / email, action button ---------- */
.contact-route{gap:16px}
.contact-route .cta-card__title{font-size:var(--fs-24);line-height:1.3} /* Lucia 21 Oct: 28 → 24 on the four channel cards */
.contact-route{align-items:center;text-align:center} /* Lucia 21 Oct: channel cards centred */
.contact-route .arrow-link{align-self:center;width:auto;justify-content:center}
.contact-route__media{display:block;width:auto;height:100px;max-width:100%;margin-bottom:8px} /* existing illustrations (Lucia 21 Oct): chat, magnifier, briefcase, key */
.contact-route__media--wide{transform:scale(1.07)} /* wide, short drawings (briefcase, form) scaled to the same drawn area as the chat and magnifier; layout unchanged */
.contact-route__label{margin:0 0 -12px;font-size:var(--fs-16);font-weight:400;line-height:1.5;color:var(--navy)} /* "Email" / "Phone number" in regular weight on its own line, 4px above the value (card gap 16) */
.contact-route__value{margin:0;font-size:var(--fs-16);font-weight:600;line-height:1.5;overflow-wrap:normal} /* long addresses break after the @ (<wbr>), never mid-word */ /* 16px so the longest address (feedbackandcomplaints@…) stays on one line in the 2-column grid */
.contact-route__value a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.contact-route .arrow-link{margin-top:auto}
/* newsletter CTA in the closing band: the footer signup field, centred */
.funded-cta .contact-signup{align-items:center}
.funded-cta .contact-signup .signup-field{width:360px}

/* ---------- contact-details: phone / email / address row (Contact, Josh's sitemap) ---------- */
.contact-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:1200px;margin:0 auto;color:var(--navy)}
.contact-details__item{display:flex;flex-direction:column;gap:8px;padding:24px 0 0;border-top:1.5px solid var(--navy)}
.contact-details__label{display:flex;align-items:center;gap:12px;margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.5}
.contact-details__icon{flex:0 0 auto;width:32px;height:32px}
.contact-details__value{margin:0;font-size:var(--fs-18);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.contact-details__value a{color:inherit;text-decoration:none}
.contact-details__note{display:block;margin-top:4px;font-size:var(--fs-14);font-weight:400;line-height:1.5}
.contact-details__value a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1024px){body:not(.canvas-mode) .contact-details{grid-template-columns:minmax(0,1fr);max-width:640px;gap:24px}}
/* --illustrated (Figma 535:7858, service template 627:6728): the illustration spans the card's content width (389 at desktop) and sits at the bottom, so both cards line up */
.cta-card-grid--illustrated .cta-card__illustration{width:100%;height:auto;max-width:389px;margin-top:auto;align-self:center}
@media (max-width:1024px){body:not(.canvas-mode) .cta-card-grid--illustrated .cta-card__illustration{height:auto}} /* keep proportions (the generic card illustration is 160px tall here) */
.split+.media-pair{margin-top:20px} /* container gap 60 + 20 = 80px split → photos */

/* ---------- media-split--equal (two equal columns) ---------- */
.media-split--equal{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:120px}

/* ---------- card-feature--text (no illustration; wavy top line) + 4-column grid ---------- */
.card-feature__line{display:block;width:100%;height:auto;margin-bottom:12px} /* 20px card gap + 12 = 32px line → title */
.card-feature--text .card-feature__text+.card-feature__text{margin-top:-8px} /* several short paragraphs in one text card: 12px apart (card gap 20 − 8) */
.card-feature-grid--3.card-feature-grid--text{gap:40px}
.card-feature-grid--text>.card-feature .card-feature__title,.card-feature-grid--text>.card-feature .card-feature__text{padding-right:0}
.card-feature-grid.card-feature-grid--wrap{flex-wrap:wrap;row-gap:60px}.card-feature-grid.card-feature-grid--wrap>.card-feature{flex:0 0 33.333%} /* 6 cards = 2 rows of 3 (Careers reasons to join) */
.card-feature-grid.card-feature-grid--4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;align-items:start}
@media (max-width:1024px){body:not(.canvas-mode) .card-feature-grid.card-feature-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){body:not(.canvas-mode) .card-feature-grid.card-feature-grid--4{grid-template-columns:minmax(0,1fr);gap:24px}}

/* ================= 05 SECTIONS (page order) ================= */

/* ---------- site-header (topbar · mainhead · megamenu · enquiry · hamburger · mobile menu) ---------- */
.header{background:var(--bg);position:sticky;top:0;z-index:100}
.topbar{padding-top:4px;padding-bottom:2px}
.topbar .row{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.tb-search{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--light);border:0;padding:4px 12px;border-radius:var(--radius-sm);height:36px;font-size:var(--fs-body);font-weight:500;color:var(--navy);line-height:1.4}
.tb-search img{width:24px;height:24px;flex:0 0 auto}
.tb-right{display:flex;align-items:center;gap:12px}
.tb-item{position:relative;display:inline-flex;align-items:center;gap:8px;padding:4px 12px;height:36px;border-radius:var(--radius-sm);font-size:var(--fs-body);font-weight:500;color:var(--navy);line-height:1.4}
.tb-item:hover{background:var(--nav-active)}
.tb-item img{width:28px;height:28px;flex:0 0 auto}
.tb-item--phone{font-size:var(--fs-18);font-weight:700;letter-spacing:-.2px} /* Marker.io CAR-47: phone number more prominent (email removed from the top bar, CAR-46) */
.tb-item--phone img{width:32px;height:32px}
/* invisible ≥44px hit area, no effect on rendered box */
/* Top-bar About Us (dropdown of About page anchors) + Contact us (Josh 21 Oct: moved beside the phone number; desktop only, the hamburger menu has them below 1440) */
.tb-nav{position:relative}
.tb-item--link{padding:4px 8px;font-size:var(--fs-16);font-weight:400;letter-spacing:-.3px;gap:4px} /* 8px side padding like the main nav items */
.tb-nav{display:inline-flex;align-items:center}
.tb-item--with-chev{padding-right:2px} /* About Us is a link to the About page; the chevron beside it opens the section list (Lucia 21 Oct) */
.tb-chev{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:36px;margin:0 4px 0 0;padding:0;background:none;border:0;border-radius:var(--radius-sm);cursor:pointer}
.tb-chev:hover{background:var(--nav-active)}
.tb-chev img{width:16px;height:16px;transition:transform .2s ease}
.tb-chev[aria-expanded="true"] img{transform:rotate(180deg)}
.tb-chev:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.tb-nav+.tb-item--link{margin-left:-8px} /* About Us chevron → Contact us 20px, the main nav rhythm */
button.tb-item{background:none;border:0;margin:0;font-family:inherit;cursor:pointer}
.tb-item--link img{width:16px;height:16px}
.megamenu--end{left:auto;right:0}
@media (max-width:1023px){body:not(.canvas-mode) .tb-nav,body:not(.canvas-mode) .tb-item--link{display:none}}
section[id],.media-split[id]{scroll-margin-top:var(--site-header-h,0px)} /* in-page anchors (About Us submenu) land below the sticky header */
.tb-search::before,.tb-item::before{content:"";position:absolute;top:-4px;bottom:-4px;left:0;right:0}
/* divider */
.nav-divider{display:block;width:100%}
.mainhead{padding-top:14px;padding-bottom:14px}
.mainhead .row{display:flex;justify-content:space-between;align-items:center;gap:16px} /* logo → menu → CTA: 16px minimum (six-branch menu) */
.logo img{width:215px;height:auto}
/* ≥24px-tall hit area when the logo shrinks (e.g. 1201px); visually unchanged */
.logo{position:relative}
.logo::before{content:"";position:absolute;inset:-2px 0}
.mainnav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} /* gap 4 + 8px item padding again (Lucia 21 Oct): About Us / Contact us moved to the top bar, so the four items have room */
.mainnav>li{flex-shrink:0} /* items keep their width, so the hover box always wraps the chevron */
.mainnav a,.mainnav .megamenu-trigger{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--radius-sm);font-size:var(--fs-16);font-weight:400;letter-spacing:-.3px;color:var(--navy);line-height:24px;white-space:nowrap}
.mainnav a:hover,.mainnav .megamenu-trigger:hover{background:var(--nav-active)}
.mainnav a img,.mainnav .megamenu-trigger img{width:16px;height:16px}
/* current page / section (Marker.io CAR-120, Lucia 28 Oct): label in magenta-dark, no underline. Items without a dropdown get .is-current
   (SHARED nav-current); items with a dropdown stay navy and the page's own link inside the dropdown is marked instead */
.mainnav>li.is-current>a,.tb-item--link.is-current,.header .megamenu a[aria-current="page"]{color:var(--magenta-dark)}
/* invisible ≥44px hit area (item stays 32px tall) */
.mainnav a::before,.mainnav .megamenu-trigger::before{content:"";position:absolute;top:-6px;bottom:-6px;left:0;right:0}
.mainnav .megamenu-trigger{background:transparent;border:0;margin:0;font-family:inherit;cursor:pointer}
.megamenu-trigger img{transition:transform .2s ease}
.megamenu-trigger[aria-expanded="true"] img{transform:rotate(180deg)}
/* split nav item: link (navigates) + chevron toggle; the wrapper carries the old trigger box (padding, radius, hover) so the pair looks like one item */
.megamenu-split{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-sm)}
.megamenu-split:hover{background:var(--nav-active)}
.mainnav .megamenu-split__link{padding:0;border-radius:0}
.mainnav .megamenu-split__link:hover{background:none}
.mainnav .megamenu-split__link::before{top:-10px;bottom:-10px;left:-12px;right:0}
.mainnav .megamenu-split__toggle{display:inline-flex;align-items:center;padding:0;border-radius:0;line-height:0}
.mainnav .megamenu-split__toggle:hover{background:transparent}
.mainnav .megamenu-split__toggle::before{top:-10px;bottom:-10px;left:-4px;right:-12px}
/* mobile split row: page link + chevron disclosure button */
.mobile-menu__row--split{cursor:default}
.mobile-menu__row-link{flex:1 1 auto;min-width:0;color:inherit;font:inherit;letter-spacing:inherit}
.mobile-menu__row--split .mobile-menu__disclosure{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;margin:0;border:0;background:none;cursor:pointer}
.mobile-menu__row--split .mobile-menu__disclosure::before{content:"";position:absolute;inset:-10px}
/* hamburger + mobile menu */
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.hamburger:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* toggle icon: hand-drawn menu icon when closed, close icon when open — both 32×32, centred in the 44×44 button */
.hamburger__open,.hamburger__close{width:32px;height:32px;display:block}
.hamburger__close{display:none}
.hamburger[aria-expanded="true"] .hamburger__open{display:none}
.hamburger[aria-expanded="true"] .hamburger__close{display:block}
@media (max-width:1023px){body:not(.canvas-mode) .megamenu{display:none}}

/* Marker.io CAR-205 (Lucia 28 Oct): full menu down to 1024px. From 1309 to 1024 the logo (215 → 140), menu text (16 → 14), item padding and the
   enquiry button scale down with the screen so everything fits on one row; the hamburger menu is used below 1024 */
@media (min-width:1024px) and (max-width:1309px){ /* each value runs linearly from its 1024px size to its full size at 1310px */
  body:not(.canvas-mode) .logo img{width:calc(140px + (100vw - 1024px) * 0.2622)}
  body:not(.canvas-mode) .mainhead .row{gap:calc(10px + (100vw - 1024px) * 0.0210)}
  body:not(.canvas-mode) .mainnav{gap:calc(0px + (100vw - 1024px) * 0.0140)}
  body:not(.canvas-mode) .mainnav a,body:not(.canvas-mode) .mainnav .megamenu-trigger{padding:4px calc(5px + (100vw - 1024px) * 0.0105);font-size:calc(14px + (100vw - 1024px) * 0.0070);gap:calc(2px + (100vw - 1024px) * 0.0070)}
  body:not(.canvas-mode) .btn--header{padding:calc(10px + (100vw - 1024px) * 0.0070) calc(14px + (100vw - 1024px) * 0.0350);font-size:calc(14px + (100vw - 1024px) * 0.0070)}
}
@media (max-width:1023px){
  body:not(.canvas-mode) .mainnav{display:none}
  body:not(.canvas-mode) .btn-enquiry{display:none}
  body:not(.canvas-mode) .hamburger{display:inline-flex}
}
@media (max-width:768px){
  body:not(.canvas-mode) .mainhead{padding-top:10px;padding-bottom:10px} /* was 14px / 14px */
  body:not(.canvas-mode) .logo img{width:auto;height:52px} /* ratio kept */
  body:not(.canvas-mode) .tb-search span{display:none}
  body:not(.canvas-mode) .tb-item.tb-email{display:none}
}

/* ---------- hero ---------- */
/* one flush full-bleed band: pink left (fills to col-8 start), image right (col 8 -> right edge) */
.hero{display:flex;align-items:stretch;height:651px;overflow:hidden;column-gap:0;background:var(--pink)} /* pink behind the capped image too, so wide screens show pink (not cream) on the right */
.hero-left{flex:0 0 calc(var(--pad) + 7 * var(--colw) + 140px);min-width:0;height:651px;background:var(--pink);display:flex;flex-direction:column;padding:60px 40px 60px calc(max(0px, (100vw - 1400px) / 2) + var(--gutter))} /* text starts on the page content edge, like the logo and every .section>.container (1400 max, --gutter inside) */
.hero-left .content{max-width:640px}
.hero-headline{position:relative;display:inline;margin:0}
.hero h1{position:relative;margin:0;font-size:var(--fs-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--navy)} /* Marker.io CAR-161 (Hannah, CareChoice): navy text on the pink hero for contrast (was light) */
.hero-body{margin:20px 0 0;max-width:560px;font-size:var(--fs-body-lg);font-weight:400;line-height:1.5;letter-spacing:-.3px;color:var(--navy)}
.hero-cta{margin-top:32px}
.hero-bottom{display:flex;justify-content:flex-start;align-items:center;gap:20px;width:auto;max-width:100%;margin-top:auto;padding-top:48px}
.hero__dots{display:flex;align-items:center;gap:0;width:96px}
.hero__dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:none;border:0}
.hero__dot img{width:24px;height:24px}
.hero__dot::before,.hero__pause::before{content:"";position:absolute;top:-10px;bottom:-10px;left:-10px;right:-10px}
.hero__pause{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;padding:0;background:none;border:0}
.hero__pause img{width:36px;height:34px}
/* right half: .media-frame--hero (pink fill, magenta gradient bands, inset photo) */
.hero-right{flex:1 1 auto;min-width:0;max-width:850px;height:651px} /* Lucia 22 Oct: same 850px cap as the inner-page banner; extra width on wide screens stays empty on the right */
@media (max-width:1024px){
  body:not(.canvas-mode) .hero-left{padding-left:var(--gutter)}
}
@media (max-width:768px){
  body:not(.canvas-mode) .hero{flex-direction:column;height:auto;column-gap:0}
  body:not(.canvas-mode) .hero-left{flex-basis:auto;width:100%;height:auto;padding:48px var(--gutter)}
  body:not(.canvas-mode) .hero-left .content{max-width:none}
  body:not(.canvas-mode) .hero-cta{flex-wrap:wrap}
  body:not(.canvas-mode) .hero-right{flex-basis:auto;width:100%;max-width:none;height:auto;aspect-ratio:4 / 3;order:-1} /* Lucia 21 Oct: photo above the text on phones (the text area growing / shrinking per slide no longer moves it), 4:3 like every banner photo on phones */
  body:not(.canvas-mode) .media-frame--hero{--mf-inset:24px}
  /* Marker.io CAR-149 (v2) + Lucia 21 Oct: the text area follows the active slide — only the active slide takes space, the others fade over it
     out of flow, so heading → text → buttons → dots always sit at their normal spacing whatever the text length */
  body:not(.canvas-mode) .hero-slides{display:block;position:relative}
  body:not(.canvas-mode) .hero-slide{position:absolute;top:0;left:0;right:0;transition:none} /* the outgoing slide hides at once (it would overlap the shorter new slide while fading); the new one still fades in */
  body:not(.canvas-mode) .hero-slide.is-active{position:relative;transition:opacity .6s ease,visibility 0s}
  body:not(.canvas-mode) .hero-bottom{justify-content:center;padding-top:32px} /* dots + pause centred (Lucia 21 Oct) */
}
@media (max-width:480px){
  body:not(.canvas-mode) .hero-left{padding:40px var(--gutter)}
}

/* ---------- finder ---------- */
.finder{background:var(--bg);padding:var(--space-section-lg) 0}
.finder-inner{display:flex;flex-direction:column;gap:60px}
.finder-group{display:flex;flex-direction:column;gap:20px}
.search-block{display:flex;flex-direction:column;gap:40px}
/* A11Y NOTE (WCAG 2.4.7): focus is indicated by the suggestion dropdown opening directly below the field on focus, plus the text caret. Decision by Lucia. */
.searchbar{display:flex;align-items:stretch;justify-content:space-between;border:var(--search-border);border-radius:var(--radius-sm);overflow:hidden;background:transparent}
.searchbar .left{display:flex;align-items:center;gap:8px;padding-left:20px;flex:1 1 auto;min-width:0}
.searchbar img.si{width:32px;height:32px;flex:0 0 auto}
.searchbar input{flex:1 1 auto;min-width:0;border:0;background:transparent;font-family:inherit;font-weight:500;font-size:var(--fs-20);letter-spacing:-.2px;color:var(--navy);height:60px;padding:0}
.searchbar input::placeholder{color:var(--navy);opacity:1}
/* native search "×" hidden — only .searchbar__clear is shown */
.searchbar input[type="search"]::-webkit-search-cancel-button,.searchbar input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.searchbar input[type="search"]::-ms-clear{display:none}
/* input outline off; the bar looks the same focused or not (see A11Y NOTE on .searchbar) */
.searchbar input:focus,.searchbar input:focus-visible{outline:none}
.searchbar:focus-within input{font-size:var(--fs-20);line-height:1.4;letter-spacing:-.2px;color:var(--navy)}
.searchbar .left{padding-right:12px} /* Figma pr 12: clear button sits 12px before the submit */
.searchbar__clear{position:relative;flex:0 0 24px;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.searchbar__clear[hidden]{display:none}
.searchbar__clear img{width:24px;height:24px;display:block}
.searchbar__clear::before{content:"";position:absolute;inset:-10px} /* 44×44 hit area */
/* suggestions dropdown: sits in the form between the field and the submit (DOM/tab order: input → clear → links → Search).
   >768 it is absolutely positioned against .search-suggest-root (not clipped by the form's overflow), overlaying content
   8px below the whole bar at full bar width; ≤768 it flows between the field and the button (see finder ≤768). */
.search-suggest-root{position:relative}
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;background:var(--bg);border:var(--search-border);border-radius:var(--radius-sm);padding:16px 20px;box-shadow:var(--shadow-suggest);display:flex;flex-direction:column;gap:16px;text-align:left} /* FLAG: results block layout proposed by Ven, pending Lucia (16px between results and Popular) */
.search-suggest__block{display:flex;flex-direction:column;gap:10px}
.search-suggest__block[hidden],.search-suggest__list[hidden],.search-suggest__empty[hidden]{display:none}
.search-suggest__empty{margin:0;font-size:var(--fs-16);font-weight:400;line-height:1.4;color:var(--navy)}
.search-suggest[hidden]{display:none}
.search-suggest__label{margin:0;font-size:var(--fs-14);line-height:1.4;color:var(--navy);opacity:.7}
.search-suggest__list{list-style:none;margin:0;padding:0}
.search-suggest__link{display:block;padding:6px 0;font-size:var(--fs-16);font-weight:600;line-height:1.4;color:var(--navy);text-decoration:none}
.search-suggest__link:hover{text-decoration:underline} /* = site text-link hover (footer contact links) */
.search-submit{flex:0 0 auto;height:60px;background:var(--magenta);border:0;border-left:var(--search-border);padding:12px 24px;color:var(--light);font-weight:600;font-size:var(--fs-18);cursor:pointer;white-space:nowrap}
.search-submit:hover{background:var(--magenta-hover)}
.finder-divider{display:flex;align-items:center;justify-content:center;gap:20px}
.finder-divider span{font-weight:600;font-size:var(--fs-body-lg);letter-spacing:-.3px;line-height:24px;color:var(--navy);text-align:center}
.finder-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* --row (Marker.io CAR-99, v2): one row of four persona cards, illustration on top (as tablet / mobile) */
.finder-grid--row{grid-template-columns:repeat(4,minmax(0,1fr))}
.finder-grid--row .card-persona{flex-direction:column;gap:16px;padding:20px} /* Lucia 21 Oct: 20px on every side */
.finder-grid--row .card-persona__body{flex:1 1 auto}
.finder-grid--row .card-persona__cta{margin-top:auto}
@media (max-width:1024px){body:not(.canvas-mode) .finder-grid--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){
  /* stacked card (illustration on top) at tablet + mobile; 769–1024 keeps the desktop 2×2 grid (gap 20px) */
  body:not(.canvas-mode) .card-persona{flex-direction:column;gap:16px}
  body:not(.canvas-mode) .card-persona__media,body:not(.canvas-mode) .card-persona__media img{width:120px;height:120px;flex:0 0 auto}
  /* equal-height cards per row (grid stretch): body fills the card, arrow link pinned to the bottom */
  body:not(.canvas-mode) .card-persona__body{flex:1 1 auto}
  body:not(.canvas-mode) .card-persona__cta{margin-top:auto}
}
@media (max-width:768px){
  body:not(.canvas-mode) .card-persona{padding:20px}
  /* persona on mobile = tablet layout (illustration on top); the "horizontal on mobile" experiment was removed (Lucia, 16 Oct) */
  body:not(.canvas-mode) .finder-grid{grid-template-columns:1fr}
  body:not(.canvas-mode) .searchbar{flex-direction:column;border:0;overflow:visible;gap:12px}
  body:not(.canvas-mode) .searchbar .left{border:var(--search-border);border-radius:var(--radius-sm);height:56px;padding:0 16px}
  body:not(.canvas-mode) .searchbar input{height:54px;font-size:var(--fs-16)}
  body:not(.canvas-mode) .search-submit{width:100%;height:56px;border:0;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-16)}
  /* dropdown in flow under the field: 8px above it, 16px to the Search button (bar gap 12 −4 / +4); closed = gap stays 12px */
  body:not(.canvas-mode) .search-suggest{position:static;margin:-4px 0 4px}
  body:not(.canvas-mode) .finder{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- why ---------- */
.why{background:var(--light);padding:var(--space-section-md) 0 40px}
.why-inner{display:flex;flex-direction:column;gap:60px}
.why-row,.card-feature-grid{display:flex;gap:0;align-items:flex-start} /* .card-feature-grid = reusable name; .why-row kept on the homepage */
.why-row>.card-feature,.card-feature-grid>.card-feature{flex:1 1 0;min-width:0}
@media (max-width:1024px){
  body:not(.canvas-mode) .why-row{flex-wrap:wrap}
  body:not(.canvas-mode) .card-feature{flex:1 1 calc(33.333% - 16px)}
}
@media (max-width:768px){
  body:not(.canvas-mode) .why-row{row-gap:24px}
  body:not(.canvas-mode) .card-feature{flex:1 1 100%}
  body:not(.canvas-mode) .card-feature__title,body:not(.canvas-mode) .card-feature__text{padding-right:0}
  body:not(.canvas-mode) .why{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- services ---------- */
.services{background:var(--light);padding:var(--space-section-lg) 0}
.svc-inner{display:flex;flex-direction:column;gap:100px}
.svc-title{max-width:var(--w8);margin:0 auto}
.svc-tabsblock{display:flex;flex-direction:column;gap:40px}
.svc-tabs{width:926px;max-width:100%;margin:0 auto}
/* service card grid → 04 COMPONENTS .card-service-grid (.svc-grid is its alias on the homepage tabs panel) */
@media (max-width:1024px){
  /* content → CTA = system gap at tablet + mobile (was 40px; desktop keeps 40 — see report) */
  body:not(.canvas-mode) .tabs__panel .svc-cta{margin-top:var(--space-content-cta)}
}
@media (max-width:768px){
  /* tab row: one scrollable line bleeding to the viewport edges; underline spans the row's full scroll width.
     Grid column = the tabs' max-content width (list min-width = visible row width); the underline is size-contained so it
     only follows that column and never widens it. */
  body:not(.canvas-mode) .svc-inner{gap:var(--space-head-content)} /* was 100px at all widths */
  body:not(.canvas-mode) .svc-tabs{width:auto;max-width:none;display:grid;grid-template-columns:max-content;margin:-6px calc(-1 * var(--gutter)) 0;padding:6px var(--gutter) 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
  body:not(.canvas-mode) .svc-tabs::-webkit-scrollbar{display:none}
  body:not(.canvas-mode) .svc-tabs .tabs__underline{contain:inline-size}
  body:not(.canvas-mode) .svc-tabs .tabs__list{min-width:calc(100vw - 2 * var(--gutter))}
  body:not(.canvas-mode) .svc-tabs .tabs__tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  body:not(.canvas-mode) :where(.card-service:not(.card-service--compact)) .card-service__row{display:grid;grid-template-columns:auto 1fr auto;column-gap:20px;row-gap:12px;padding:32px 0;align-items:start} /* title → description 12px, as before (Lucia 28 Oct) */
  body:not(.canvas-mode) :where(.card-service:not(.card-service--compact)) .card-service__icon{grid-column:1;grid-row:1 / span 2}
  body:not(.canvas-mode) :where(.card-service:not(.card-service--compact)) .card-service__body{display:contents} /* title and text join the row grid: the arrow sits on the title row, the text under the title in the same column */
  body:not(.canvas-mode) :where(.card-service:not(.card-service--compact)) .card-service__title{grid-column:2;grid-row:1;align-self:center}
  body:not(.canvas-mode) :where(.card-service:not(.card-service--compact)) .card-service__desc{grid-column:2;grid-row:2} /* text stays in the left column, clear of the arrow column (Lucia 28 Oct) */
  body:not(.canvas-mode) .card-service__arrow{grid-column:3;grid-row:1;align-self:center;justify-self:end;margin:-6px 0} /* arrow on the right, on the title row (Marker.io CAR-218, Josh / Lucia 28 Oct); -6px so the 36px arrow never makes a one-line title row taller */
  body:not(.canvas-mode) .services{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- stories ---------- */
.stories{background:var(--light);padding:var(--space-section-lg) 0} /* standard section padding; homepage keeps its 60px top via .section--collapse-top */
@media (max-width:1024px){body:not(.canvas-mode) .stories{padding-top:var(--space-section-md)}}
.stories-inner{display:flex;flex-direction:column;gap:60px}
.video-list{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:50px;padding:0 80px}
@media (max-width:1200px){
  /* the frame (wraps quote + name + org) carries the blob itself and grows with the text: padding 60 at 769–1200, 40 / 24 at ≤768.
     Marks are centred on the frame's top / bottom edge (half outside); --qc-mark-h = mark height. The outside half sits in the
     60px .stories-inner gap; --qc-mark-over adds margin only if that half were ever taller than the gap (currently 0). */
  body:not(.canvas-mode) .quote-carousel{--qc-mark-h:67px;--qc-mark-over:max(0px, calc(var(--qc-mark-h) / 2 - 60px))}
  body:not(.canvas-mode) .quote-carousel__frame{aspect-ratio:auto;height:auto;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;box-sizing:border-box;padding:60px;margin:var(--qc-mark-over) auto;background:var(--quote-blob-stretch) no-repeat center/100% 100%}
  body:not(.canvas-mode) .quote-carousel__bg{display:none}
  body:not(.canvas-mode) .quote-carousel__content{position:static;inset:auto;transform:none;width:100%;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
  body:not(.canvas-mode) .quote-carousel__attr{position:static;margin:0}
  body:not(.canvas-mode) .quote-carousel__mark{position:absolute;z-index:2;transform:none}
  body:not(.canvas-mode) .quote-carousel__mark--tl{left:60px;top:calc(var(--qc-mark-h) / -2);bottom:auto}
  body:not(.canvas-mode) .quote-carousel__mark--br{right:60px;top:auto;bottom:calc(var(--qc-mark-h) / -2)}
  body:not(.canvas-mode) .quote-carousel__controls{margin-top:var(--qc-mark-over)}
}
@media (max-width:1024px){
  body:not(.canvas-mode) .video-list{grid-template-columns:1fr;padding:0}
}
@media (max-width:768px){
  body:not(.canvas-mode) .quote-carousel{--qc-mark-h:48px}
  body:not(.canvas-mode) .quote-carousel__frame{padding:40px 24px}
  body:not(.canvas-mode) .quote-carousel__mark{width:64px;height:48px}
  body:not(.canvas-mode) .quote-carousel__mark--tl{left:32px}
  body:not(.canvas-mode) .quote-carousel__mark--br{right:32px}
  body:not(.canvas-mode) .stories{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}
/* .section--collapse-top: homepage-only modifier — section starts with --space-section-sm top padding at every width */
.section--collapse-top,body:not(.canvas-mode) .section--collapse-top{padding-top:var(--space-section-sm)}
@media (max-width:480px){
  body:not(.canvas-mode) .quote-carousel__mark--tl{left:20px}
  body:not(.canvas-mode) .quote-carousel__mark--br{right:20px}
}

/* ---------- homes ---------- */
.homes{background:var(--bg);padding:var(--space-section-lg) 0}
.homes-inner{display:flex;flex-direction:column;gap:60px}
.homes-title .section-head__intro{max-width:var(--w8)}
.homes-row{display:flex;gap:var(--homes-card-gap)}
.homes-row>.card-home{flex:1 1 0;min-width:0}
/* homepage homes carousel (Marker.io CAR-78): 6 cards, 3 in view on desktop, Previous / Next under the row (news-controls pattern); tablet/mobile keep the shared scroll-carousel sizes */
.homes-carousel{display:flex;flex-direction:column;gap:40px;width:100%}
.homes-carousel .homes-row{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.homes-carousel .homes-row::-webkit-scrollbar{display:none}
.homes-carousel .homes-row>.card-home{flex:0 0 calc((100% - 2 * var(--homes-card-gap)) / 3);scroll-snap-align:start}
.homes-controls .icon-btn[aria-disabled="true"]{opacity:.35;cursor:default}
@media (max-width:1024px){
  body:not(.canvas-mode) .homes-row{flex-wrap:wrap}
  body:not(.canvas-mode) .card-home{flex:1 1 calc(50% - 10px)}
}
@media (min-width:769px) and (max-width:1024px){
  /* Homes carousel gap = desktop .homes-row gap (20px) */
  body:not(.canvas-mode) .homes-inner > [data-scroll-carousel],body:not(.canvas-mode) .homes-listing > .container > [data-scroll-carousel]{--scroll-carousel-gap:var(--homes-card-gap)}
  /* cards keep their desktop width: at 1440 each card is (1320 content − 2 × 20 gap) / 3 = 426.67px */
  body:not(.canvas-mode) .homes-inner > [data-scroll-carousel] .scroll-carousel__track > .card-home,body:not(.canvas-mode) .homes-listing > .container > [data-scroll-carousel] .scroll-carousel__track > .card-home{flex:0 0 calc(1280px / 3);max-width:none} /* .homes-listing: same Homes row on inner pages */
}
@media (max-width:768px){
  body:not(.canvas-mode) .card-home{flex:1 1 100%}
  body:not(.canvas-mode) .homes{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- homes-grid (card-home listing grid: 3 / 2 / 1 columns) ---------- */
/* desktop: rows 60px (Figma), columns --homes-card-gap; ≤1024 rows = --homes-card-gap too (homepage stacked Homes cards) */
.card-home[hidden],.btn[hidden]{display:none} /* component display rules would otherwise override [hidden] (load-more) */
.homes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px var(--homes-card-gap)}
@media (max-width:1024px){body:not(.canvas-mode) .homes-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--homes-card-gap)}}
@media (min-width:769px) and (max-width:907px){body:not(.canvas-mode) .homes-grid{grid-template-columns:minmax(0,453px);justify-content:center}} /* 2 cols only when each card ≥ 420px: (container − 20) / 2 ≥ 420 from 908px */
@media (max-width:768px){body:not(.canvas-mode) .homes-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- trusted ---------- */
.trusted{background:var(--light);padding:var(--space-section-lg) 0}
.trusted-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.trusted-left{flex:0 1 571px;min-width:0;max-width:571px;display:flex;flex-direction:column;gap:20px}
.trusted-left .section-head__intro{margin-top:20px} /* clears the deep highlight under "complex support." */
.trusted-left{position:sticky;top:calc(var(--site-header-h,0px) + 40px)} /* Lucia 21 Oct: heading, intro and button stay in view under the header while the cards scroll (from 1201px; stacked below) */
.trusted-acc{margin:32px 0 0;font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--navy)}
.trusted-right{flex:0 1 690px;min-width:0;max-width:690px;display:flex;flex-direction:column;gap:20px}
@media (max-width:1200px){
  body:not(.canvas-mode) .trusted-inner{flex-direction:column;align-items:stretch;gap:48px}
  body:not(.canvas-mode) .trusted-left,body:not(.canvas-mode) .trusted-right{flex:1 1 auto;max-width:none}
  body:not(.canvas-mode) .trusted-left{position:static}
  /* Lucia 21 Oct: stacked, the button comes after the cards — the left column opens up (display:contents) so heading → cards → button */
  body:not(.canvas-mode) .trusted-left{display:contents}
  body:not(.canvas-mode) .trusted-right{order:1}
  body:not(.canvas-mode) .trusted-left>.btn-row{order:2;margin-top:-8px}
}
@media (max-width:768px){
  body:not(.canvas-mode) .card-highlight{padding:24px}
}
@media (max-width:768px){
  body:not(.canvas-mode) .trusted{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- careers ---------- */
.careers{background:var(--bg);padding:var(--space-section-lg) 0}
.careers-inner{display:flex;flex-direction:column;gap:60px} /* heading → content 60 (was 100), CAR-101 */
.careers-content{display:flex;gap:80px;align-items:stretch}
.careers-left{flex:810 1 0;min-width:0}
.careers-left img{width:100%;height:560px;object-fit:cover;border-radius:0;display:block} /* 560 (was 800): shallower section, Marker.io CAR-101 (v2) */
.careers-right{flex:590 1 0;min-width:280px;display:flex;flex-direction:column;gap:65px}
.careers-copy{max-width:511px;padding-right:25px;display:flex;flex-direction:column;gap:29px}
.careers-copy p{margin:0;font-size:var(--fs-body-lg);font-weight:300;line-height:1.6;color:var(--navy)}
.careers-right>img{flex:1 1 0;min-height:0;width:100%;object-fit:cover;border-radius:0;display:block}
@media (max-width:1024px){
  body:not(.canvas-mode) .careers-inner{gap:60px}
}
@media (min-width:769px) and (max-width:1024px){
  /* tablet: desktop two-column layout; column gap = desktop 80 / 1320 content width, as a %. Both columns stretch to one row
     height so the photo bottoms align: the large photo's desktop ratio (717.43 × 800) sets the default row height and it
     grows (cover) if the right column needs more; the small photo takes the remaining height (min 160px). */
  body:not(.canvas-mode) .careers-content{gap:6.0606%;align-items:stretch}
  body:not(.canvas-mode) .careers-left{display:flex;flex-direction:column}
  body:not(.canvas-mode) .careers-left img{flex:1 1 auto;height:auto;aspect-ratio:717.43 / 800;object-fit:cover}
  /* flex-basis 0 (not auto) so the image's own intrinsic height never adds to the row height */
  body:not(.canvas-mode) .careers-right>img{flex:1 1 0;min-height:160px;height:auto;object-fit:cover}
}
@media (max-width:768px){
  body:not(.canvas-mode) .careers{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
  /* eyebrow + heading, then the photo row, then copy + buttons. .careers-content and .careers-right are unboxed
     (display:contents) so the title block, both photos and the copy are all flex items of .careers-inner, ordered with
     'order' (DOM / reading order unchanged; photos are not focusable). Photo split = desktop widths at 1440
     (717.43 : 522.57 = 810 : 590); bottoms aligned. Gaps: heading → photos 60px (= the .careers-inner heading-to-content
     gap at ≤1024), photos → copy 40px (= the photos ↔ text gap of the previous order). */
  body:not(.canvas-mode) .careers-inner{flex-direction:row;flex-wrap:wrap;align-items:flex-end;column-gap:16px;row-gap:0}
  body:not(.canvas-mode) .careers-content,body:not(.canvas-mode) .careers-right{display:contents}
  body:not(.canvas-mode) .careers-title{order:1;flex:1 1 100%;margin:0}
  body:not(.canvas-mode) .careers-copy{order:4;flex:1 1 100%;max-width:none;padding-right:0;margin:40px 0 0}
  body:not(.canvas-mode) .careers-left{order:2;flex:810 1 0;min-width:0;width:auto;margin:60px 0 0}
  body:not(.canvas-mode) .careers-left img{width:100%;height:auto;max-height:none;aspect-ratio:717.43 / 800;object-fit:cover}
  /* small photo ratio = desktop 522.57 × ≈456 (its desktop height fills the column under the copy — estimated) */
  body:not(.canvas-mode) .careers-right>img{order:3;flex:590 1 0;min-width:0;min-height:0;width:100%;height:auto;max-height:none;aspect-ratio:523 / 456;object-fit:cover;align-self:flex-end;margin:60px 0 0}
}

/* ---------- news ---------- */
.news{background:var(--bg);padding:var(--space-section-sm) 0 112px;position:relative}
.news-inner{max-width:1400px;margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:60px}
.news-cards{width:100%;display:flex;gap:40px;justify-content:center;align-items:stretch}
.news-cards>.card-news{flex:1 1 0;max-width:490px}
.news-arrows{display:flex;align-items:center;gap:var(--space-btn-row)} /* 36px arrows, 44px hit areas (4px each side) → 8px between hit areas */
.news-controls{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
/* mobile (Marker.io CAR-135 / 150 / 151 / 152 / 153, v2): homes row = swipe only, no arrows, button centred; news = arrows centred above a centred View all;
   homepage section buttons (Trusted, Careers) centred */
@media (max-width:768px){
  body:not(.canvas-mode) .homes-controls .news-arrows{display:none}
  body:not(.canvas-mode) .news-controls{flex-direction:column;justify-content:center;gap:24px}
  body:not(.canvas-mode) .trusted .btn-row,body:not(.canvas-mode) .careers-cta{justify-content:center}
}
@media (max-width:1200px){
  body:not(.canvas-mode) .news-cards{flex-wrap:wrap;gap:60px}
  body:not(.canvas-mode) .card-news{flex:1 1 calc(50% - 30px);max-width:none}
}
@media (max-width:768px){
  body:not(.canvas-mode) .news{padding:var(--space-section-sm) 0}
  body:not(.canvas-mode) .card-news{flex:1 1 100%}
}

/* ---------- faq ---------- */
.faq{background:var(--bg);padding:var(--space-section-sm) 0 var(--space-section-lg)}
.faq-inner{display:flex;flex-direction:column;gap:60px}
.faq-title,.stories-title{width:100%;max-width:var(--w8);margin-left:auto;margin-right:auto} /* centred titles share the 8-column width */
.faq-list{width:926px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
@media (max-width:1024px){
  body:not(.canvas-mode) .faq-list{width:100%}
}
@media (max-width:768px){
  body:not(.canvas-mode) .faq{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- funded ---------- */
.funded{background:linear-gradient(to bottom,rgba(255,130,190,0) 5%,var(--pink) 100%);padding:var(--space-section-sm) var(--pad) 100px}
.funded__contact{font-weight:700;color:var(--navy);text-decoration:none} /* phone / email in a closing band: bold, no underline (Careers) */
.funded__contact:hover{text-decoration:underline;text-underline-offset:3px}
.funded__note{margin:0;font-size:var(--fs-13);line-height:1.5;color:var(--navy);text-align:center} /* small print under the closing band buttons */
.funded[data-base="light"]{background-color:var(--light)} /* base under the pink gradient = --light, so the band starts the same colour as a light section above it (the gradient's top is transparent) */
.faq[data-bg="light"]{background:var(--light)} /* faq is cream by default; data-bg="light" puts it on light */
.stories[data-bg="cream"]{background:var(--bg)} /* stories is light by default; data-bg="cream" puts it on cream */ /* TAC & WorkSafe (Figma 535:8151): FAQ on light, between the light testimonial and the closing band */
.funded-inner{max-width:var(--w8);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:60px}
@media (max-width:1024px){
  body:not(.canvas-mode) .funded{padding-left:var(--gutter);padding-right:var(--gutter)}
  body:not(.canvas-mode) .funded-inner{gap:var(--space-content-cta)} /* intro → button row; was a literal 60px (same value) */
}
@media (max-width:768px){
  body:not(.canvas-mode) .funded-cta{width:100%;flex-direction:column}
  body:not(.canvas-mode) .funded-cta a{width:100%;justify-content:center}
}
@media (max-width:768px){
  body:not(.canvas-mode) .funded{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}
}

/* ---------- site-footer ---------- */
.site-footer{position:relative;background:var(--bg);padding:100px 0 30px}
.footer-inner{position:relative;display:flex;flex-direction:column;gap:40px}
@media (max-width:768px){body:not(.canvas-mode) .site-footer{padding-top:var(--space-section-sm)}} /* was 100px at all widths */
/* Marker.io CAR-55 (Lucia 16 Oct): logo on its own row; the link columns and, as the last column, the mailing-list sign-up sit below it (.footer-main) */
.footer-top{display:flex;align-items:flex-start;gap:60px} /* Lucia 21 Oct: logo, link columns and sign-up in one row */
.footer-brand{display:flex;flex:0 0 215px}
.footer-main{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:40px 20px}
.footer-main>.footer-navs{flex:1 1 0}
.footer-main>.footer-connect{flex:0 0 253px;display:flex;flex-direction:column;gap:24px} /* sign-up + social icons (CAR-102) */
@media (max-width:1200px){body:not(.canvas-mode) .footer-top{flex-direction:column}body:not(.canvas-mode) .footer-brand{flex:0 0 auto}body:not(.canvas-mode) .footer-main{flex:0 0 auto;width:100%;flex-direction:column;align-items:stretch}body:not(.canvas-mode) .footer-main>.footer-connect{flex:0 0 auto}}
.footer-brand .f-logo{width:215px;height:auto}
.footer-social{display:flex;align-items:center;gap:12px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px}
.footer-social a img{width:46px;height:46px;object-fit:contain}
.footer-social a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.footer-navs{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px} /* six branch columns + contact details: 4 + 3 */
.footer-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:15px}
.footer-stack{min-width:0;display:flex;flex-direction:column;gap:60px} /* one footer column holding one or two link groups */
.footer-stack>.footer-col{flex:0 0 auto} /* groups keep their own height, so the gap between two groups is always 60px */
.footer-col h3{margin:0;font-size:var(--fs-14);font-weight:600;line-height:13px;text-transform:uppercase;color:var(--navy);opacity:1}
.footer-col a{position:relative;font-size:var(--fs-small);font-weight:400;line-height:21px;color:var(--navy)}
/* ≥24px-tall hit area (21px line + 2px each side); the 15px column gap keeps neighbours from overlapping */
.footer-col a::before{content:"";position:absolute;inset:-2px 0}
.footer-col a:first-of-type{padding-top:8px}
.footer-col .footer-social a{padding-top:0}
.footer-col a:hover{text-decoration:underline}
.footer-rule{width:100%;display:block;line-height:0}
.footer-ack{display:flex;gap:60px;align-items:flex-start;justify-content:space-between}
.footer-flags{display:flex;gap:8px;flex:0 0 auto}
.footer-flags img{width:42px;height:28px;object-fit:cover}
.footer-ack-left p{margin:0;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--black)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-bottom .c1{font-size:var(--fs-small);font-weight:400;color:var(--navy)}
.footer-bottom .c2{font-size:13.1px/* TBC: off-scale */;font-weight:400;color:var(--navy)}
.footer-signup{display:flex;flex-direction:column;gap:16px}
.signup-label{display:flex;align-items:center;gap:12px;color:var(--navy)}
.signup-ico{width:28px;height:18px;flex:0 0 auto;display:block}
.signup-label span{font-size:var(--fs-16);font-weight:300;letter-spacing:-.2px}
.signup-field{position:relative;display:block;width:253px;max-width:100%}
.signup-input{width:100%;box-sizing:border-box;padding:16px 56px 16px 23px;border:1px solid var(--navy);border-radius:0;background:transparent;font-size:var(--fs-14);font-weight:400;color:var(--navy);font-family:inherit}
.signup-input::placeholder{color:var(--navy);opacity:1}
.signup-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.signup-btn{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:51px;height:21px;padding:0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.signup-btn img{width:51px;height:21px;display:block}
/* 44px-tall hit area; the visible 51×21 arrow is unchanged */
.signup-btn::before{content:"";position:absolute;inset:-12px 0}
.signup-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* ≤768: full-width field; input text stops before the arrow (51px arrow + 14px right offset + 8px) */
@media (max-width:768px){
  body:not(.canvas-mode) .footer-signup{width:100%;max-width:none}
  body:not(.canvas-mode) .signup-field{width:100%;max-width:none}
  body:not(.canvas-mode) .signup-input{padding-right:73px}
}
.footer-col-contact .a1,.footer-col-contact .a2{margin:0;font-size:var(--fs-small);font-weight:400;line-height:21px;color:var(--navy)}
.footer-col-contact a{color:var(--navy)}
.footer-col-contact .a1{margin-top:0} /* NDIS / ABN under the Contact us links, same spacing as the links (Lucia 21 Oct) */
.footer-col-contact a:hover{text-decoration:underline}
.footer-col a:focus-visible,.footer-col-contact a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.footer-ack-left{flex:1 1 auto;max-width:680px;display:flex;flex-direction:column;gap:24px}
.footer-logos{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap;align-items:center}
.footer-ack-right{flex:0 0 auto;max-width:100%;display:flex;flex-direction:column;gap:0}
.footer-reg{margin:0;width:0;min-width:100%;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--black)}
.footer-logos a,.footer-logos .partner-logo{display:inline-flex;align-items:center;justify-content:center;width:99px;height:99px;box-sizing:border-box;background:var(--bg);border:1px solid transparent;border-radius:65px;padding:10px} /* +10% (Marker.io CAR-88, Lucia 15 Oct): was 90px */
.footer-logos img{max-width:100%;max-height:79px;object-fit:contain;display:block}
.footer-logos a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:1200px){
  body:not(.canvas-mode) .footer-navs{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:32px 20px}
  body:not(.canvas-mode) .footer-stack{flex:1 1 calc(50% - 10px)}
}
@media (max-width:768px){
  body:not(.canvas-mode) .footer-top{gap:40px}
  body:not(.canvas-mode) .footer-stack{flex:1 1 100%;gap:0}
  body:not(.canvas-mode) .footer-navs{gap:0} /* Lucia 21 Oct: the accordion rows form one even list (was 0 inside a column group, 32 between groups) */
  body:not(.canvas-mode) .footer-ack{flex-direction:column;gap:24px} /* flags → text 24, as sign-up → socials */
  body:not(.canvas-mode) .footer-logos{flex-wrap:wrap}
  body:not(.canvas-mode) .footer-bottom{padding-right:0}
}

/* ---------- PAGE: disability-accommodation (homes listing grid, partners split text, Figma spacing) ---------- */
.container+.homes-listing__filter{margin-top:var(--space-head-content)} /* heading container in the same section → filter */
body main>.section--title[data-bg],.section--title{padding-bottom:0} /* page title section directly followed by its content section (wins over the ≤768 .section padding) */
body main>.section--title[data-bg]+.section[data-bg]{padding-top:var(--space-head-content)} /* title → content = heading-to-content gap at every width (overrides the same-bg collapse) */
.homes-listing__body{max-width:1400px;width:100%;margin:0 auto;padding:24px var(--gutter) 0;display:flex;flex-direction:column;gap:var(--space-content-cta)}
/* hero "feels like yours." (.hl--band) does not fit the 55% text column at 769–~841px: wrap it and draw the band per line (box-decoration-break) */
@media (min-width:769px) and (max-width:860px){body:not(.canvas-mode) .page-hero .hl--band{display:inline;padding:0;margin:0}body:not(.canvas-mode) .page-hero .hl--band .hl__text{white-space:normal;padding:0 .08em;margin:0 -.08em;background-size:100% .72em;background-position:0 .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}body:not(.canvas-mode) .page-hero .hl--band .hl__img{display:none}}
.split__text{display:flex;flex-direction:column;gap:20px}
/* --sticky: text column sticks under the header while the aside scrolls; releases at the end of the .split row (>768 only) */
.split--sticky{align-items:start}
.split--sticky>.split__text:first-child{position:sticky;top:calc(var(--site-header-h, 0px) + 40px);align-self:start}
@media (max-width:768px){body:not(.canvas-mode) .split--sticky>.split__text:first-child{position:static}}
.split__text p{margin:0;font-size:var(--fs-16);line-height:1.6;color:var(--navy)}
.split__text p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} /* inline link in hero / split text (Careers statement link) */

/* ---------- PAGE: disability-accommodation — sticky filter bar (scoped to the [data-filter] root, so it releases at the end of the grid) ---------- */
.homes-listing__filter{--filter-bar-h:52px} /* 8 + 36 chip + 8 */
.homes-listing__filter .filter-bar{position:sticky;top:calc(var(--site-header-h,0px) - 1px);z-index:90} /* 1px overlap under the header closes sub-px gaps */
.homes-listing__filter .filter-bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px;background:var(--bg);pointer-events:none} /* cream extension above the bar, sits under the header */ /* below .header (100) / megamenu (inside header) / mobile menu (200); above cards */
.homes-listing__filter .filter-panel{max-height:calc(100vh - var(--site-header-h,0px) - var(--filter-bar-h) - 16px);overflow-y:auto}
#homes{scroll-margin-top:var(--site-header-h,0px)}

/* ---------- hero carousel (slides crossfade; controls live) ---------- */
.hero-slides{display:grid}
.hero-slide{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.hero-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.hero h2.hero-headline{position:relative;margin:0;font-size:var(--fs-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--navy)}
.hero-right .media-frame__inset{position:absolute}
.hero-img{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-img.is-active{opacity:1}
.hero-video{display:block}
.hero-video>img{display:block;width:100%;height:100%;object-fit:cover}
.hero-video__play{position:absolute;left:50%;top:50%;width:80px;height:80px;transform:translate(-50%,-50%)}
.hero-video__play img{width:80px;height:80px} /* Marker.io CAR-89: Riley video slide (play mark is decorative; the slide button opens the video) */
.hero__dot img{transition:transform .25s ease,opacity .25s ease}
.hero__dot:hover img{transform:scale(1.15)}
.hero__dot[aria-current="true"] img{transform:none}
.hero__pause img{transition:opacity .2s ease}
.hero__pause:hover img{opacity:.8}
.hero__pause.is-paused img{content:url(../assets/button-play-white-r5.svg)}
@media (prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active,.hero-img,.hero-img.is-active{transition:none}}

/* ---------- site-search (header search panel; reuses .searchbar + .search-suggest__* parts) ---------- */
.site-search{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--bg);transition:opacity .24s cubic-bezier(.2,.7,.2,1),transform .24s cubic-bezier(.2,.7,.2,1),visibility 0s}
.site-search::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:var(--shadow-menu);clip-path:inset(0 -40px -40px -40px);pointer-events:none} /* shadow on the sides and bottom only, none above */
.site-search[hidden]{display:block;opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.site-search__inner{max-width:1160px;margin:0 auto;padding:28px var(--gutter) 32px}
.site-search__row{display:block}
.site-search__row .searchbar{flex:1 1 auto;min-width:0;background:var(--light)}
.site-search__suggest{display:flex;flex-direction:column;gap:20px;margin-top:24px}
.site-search__suggest .search-suggest__link{transition:color .15s ease}
.site-search__suggest .search-suggest__link:hover,.site-search__suggest .search-suggest__link:focus-visible{color:var(--magenta-dark)}
.site-search__scrim{position:fixed;inset:0;z-index:99;background:var(--navy-a40);opacity:1;transition:opacity .24s ease,visibility 0s}
.site-search__scrim[hidden]{display:block;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
.tb-search[aria-expanded="true"]{background:var(--nav-active)}
@media (max-width:768px){body:not(.canvas-mode) .site-search__row{display:block}body:not(.canvas-mode) .site-search__row .searchbar{flex-direction:row;border:var(--search-border);overflow:hidden}body:not(.canvas-mode) .site-search__row .searchbar .left{border:0;height:auto;padding:0 0 0 12px}body:not(.canvas-mode) .site-search__row .search-submit{display:none}}
@media (prefers-reduced-motion:reduce){.site-search,.site-search[hidden],.site-search__scrim,.site-search__scrim[hidden]{transition:none;transform:none}}

/* ================= 06 PROTOTYPE-ONLY (canvas / view toggle / embed) ================= */
/* Note: every max-width media rule in 05 is wrapped in body:not(.canvas-mode) so the canvas artboard stays at the frozen 1920 desktop layout. */
/* view-mode toggle */
.view-toggle{position:fixed;right:20px;bottom:20px;z-index:2000;background:var(--navy);color:var(--light);border:0;border-radius:999px;padding:12px 20px;font-family:inherit;font-size:var(--fs-14);font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);min-height:44px}
.view-toggle:hover{background:var(--black)}
.view-toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
body.canvas-mode{background:var(--tbc-grey-1);overflow:hidden;height:100vh;cursor:grab}
body.canvas-mode.panning{cursor:grabbing}
body.canvas-mode #artboard{width:1920px;margin:0;background:var(--bg);pointer-events:none;overflow:hidden}
body.canvas-mode .header{position:static}
/* canvas: two artboards side by side */
#cvMobile{display:none}
.cv-label{display:none}
.cv-frame{display:block;border:1px solid var(--navy-a15);background:var(--white)}
body.canvas-mode #canvasStage{position:fixed;top:0;left:0;transform-origin:0 0;display:flex;gap:120px;align-items:flex-start;width:max-content;margin:0;will-change:transform}
body.canvas-mode .cv-board{flex:0 0 auto}
body.canvas-mode .cv-label{display:block;font-size:var(--fs-32);font-weight:600;color:var(--tbc-grey-2);margin-bottom:20px;text-align:left}
body.canvas-mode #cvMobile{display:block}
body.canvas-mode #cvMobile .cv-frame{width:390px;pointer-events:none}
/* canvas zoom/pan controls */
.canvas-controls{display:none}
body.canvas-mode .canvas-controls{display:flex;position:fixed;left:50%;top:16px;bottom:auto;transform:translateX(-50%);z-index:2000;align-items:center;gap:4px;background:var(--navy);border-radius:999px;padding:6px 8px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.canvas-controls button{width:36px;height:36px;border:0;background:transparent;color:var(--light);font-size:var(--fs-20);line-height:1;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.canvas-controls button:hover{background:rgba(255,255,255,.15)}
.canvas-controls button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.canvas-controls #zoomFit{width:auto;padding:0 14px;font-size:13px/* TBC: off-scale */;font-weight:600}
.canvas-controls #zoomPct{color:var(--light);font-size:13px/* TBC: off-scale */;min-width:46px;text-align:center}
/* frozen 1920 desktop gutters in canvas mode */
.canvas-mode .topbar,.canvas-mode .mainhead,.canvas-mode .svc-inner,.canvas-mode .stories-inner,.canvas-mode .homes-inner,.canvas-mode .trusted-inner,.canvas-mode .why-inner,.canvas-mode .faq-inner,.canvas-mode .footer-inner{max-width:none;width:100%;margin:0;padding-left:260px;padding-right:260px}
.canvas-mode .finder-inner{max-width:none;width:100%;margin:0;padding-left:380px;padding-right:380px}
.canvas-mode .careers-inner{max-width:none;width:100%;margin:0;padding-left:160px;padding-right:160px}
.canvas-mode .funded{padding-left:0;padding-right:0}
.canvas-mode .funded-inner{max-width:926px;margin:0 auto;padding:0}
.canvas-mode .hero-left{flex:0 0 1088px;width:auto;height:651px;padding:60px 40px 60px 260px}
.canvas-mode .hero-right{flex:1 1 auto;width:auto;height:651px}
/* embedded mobile artboard: 16px gutters. Mobile widths only: the desktop canvas frame is embedded too (?embed=1) and must keep the page grid */
@media (max-width:768px){
  html.embed .topbar,html.embed .mainhead,html.embed .svc-inner,html.embed .stories-inner,html.embed .homes-inner,html.embed .trusted-inner,html.embed .why-inner,html.embed .careers-inner,html.embed .faq-inner,html.embed .footer-inner,html.embed .finder-inner,html.embed .funded,html.embed .hero-left{padding-left:16px;padding-right:16px}
  html.embed .news-inner{padding-left:16px;padding-right:16px}
}

/* ================= 07 REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){:where(.card-service--compact) .card-service__row,:where(.card-service--compact) .card-service__title a::after{transition:none}}
@media (prefers-reduced-motion:reduce){.arrow-link--fade img{transition:none}}
@media (prefers-reduced-motion:reduce){.megamenu-trigger img{transition:none}}
@media (prefers-reduced-motion:reduce){.mobile-menu__chevron{transition:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media (prefers-reduced-motion:reduce){.accordion__panel,.accordion__panel-inner,.accordion__trigger .accordion__icon,.accordion__item{transition:none}}

/* ================= 08 LIBRARY PAGE ONLY (style-guide.html — scoped to body.library, never used by site pages) ================= */
body.library .lib-title{margin:0;font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-h2);color:var(--navy)}
body.library .lib-lead{margin:0;max-width:760px;font-size:var(--fs-body-lg);line-height:1.6;color:var(--navy)}
body.library .lib-group{display:flex;flex-direction:column;gap:0;scroll-margin-top:140px}
body.library .lib-group__title{margin:0 0 8px;font-size:var(--fs-title-xl);font-weight:600;color:var(--navy);padding-bottom:12px;border-bottom:2px solid var(--navy)}
body.library .lib-entry{display:flex;flex-direction:column;gap:20px;padding:40px 0;border-bottom:1px solid var(--navy-a15);scroll-margin-top:140px}
body.library .lib-entry__title{margin:0;font-size:var(--fs-title);font-weight:600;color:var(--navy)}
body.library .lib-entry__title code{font-size:var(--fs-14);font-weight:400;opacity:.7}
body.library .lib-demo{border:1px dashed var(--navy-a40);border-radius:var(--radius-sm);padding:32px var(--gutter);background:var(--bg);display:flex;flex-direction:column;gap:20px;min-width:0}
body.library .lib-row{display:flex;flex-wrap:wrap;gap:var(--space-btn-row);align-items:center}
body.library .lib-row--pink{background:var(--pink);padding:24px;border-radius:var(--radius-sm)}
body.library .lib-caption{display:block;font-size:var(--fs-14);color:var(--navy);opacity:.7;margin:0}
body.library .lib-hl,body.library .lib-div{display:flex;flex-direction:column;gap:8px}
body.library .lib-w-half{max-width:640px;width:100%}
body.library .lib-w-third{max-width:430px;width:100%}
body.library .lib-code summary{cursor:pointer;font-weight:600;font-size:var(--fs-14);color:var(--navy)}
body.library .lib-code pre{margin:12px 0 0;max-height:420px;overflow:auto;background:var(--navy);color:var(--light);padding:16px;border-radius:var(--radius-sm);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
body.library .lib-meta{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:8px 24px;margin:0;font-size:var(--fs-14);line-height:1.6;color:var(--navy)}
body.library .lib-meta dt{font-weight:600}
body.library .lib-meta dd{margin:0}
body.library .lib-meta code,body.library .lib-table code{font-size:.92em}
body.library .lib-table-wrap{overflow-x:auto}
body.library .lib-table{width:100%;border-collapse:collapse;font-size:var(--fs-14);color:var(--navy)}
body.library .lib-table th,body.library .lib-table td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--navy-a15)}
body.library .lib-table th{font-weight:600;border-bottom:2px solid var(--navy)}
body.library .lib-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
body.library .lib-swatch{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:start;font-size:var(--fs-14);color:var(--navy)}
body.library .lib-swatch__chip{grid-row:span 3;width:48px;height:48px;border-radius:var(--radius-sm);border:1px solid var(--navy-a15)}
body.library .lib-swatch__name{font-weight:600}
body.library .lib-swatch__use{opacity:.7}
@media (max-width:768px){body.library .lib-meta{grid-template-columns:1fr}body.library .lib-meta dd{margin-bottom:8px}}

/* ---- style guide shell (sidebar + content) ---- */
body.library .lib{display:block;max-width:1400px;margin:0 auto;padding:60px var(--gutter) 120px}
.sg-shell{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:64px;align-items:start}
.sg-head{grid-column:1 / -1;padding-bottom:48px;margin-bottom:48px;border-bottom:2px solid var(--navy)}
.sg-eyebrow{margin:0 0 12px;font-size:var(--fs-14);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--magenta-dark)}
.sg-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:28px 0 0;font-size:var(--fs-14);font-weight:600}
.sg-links a{text-decoration:underline;text-underline-offset:3px}
.sg-side{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;padding-right:8px;font-size:var(--fs-14)}
.sg-side ul{list-style:none;margin:0;padding:0}
.sg-side>nav>ul>li{margin:0 0 20px}
.sg-side>nav>ul>li>a{display:block;font-weight:700;font-size:var(--fs-16);padding:4px 0;border-bottom:1px solid var(--navy-a20);margin-bottom:6px}
.sg-side li li a{display:block;padding:3px 0;opacity:.8}
.sg-side a:hover{text-decoration:underline;opacity:1}
.sg-content{min-width:0;display:flex;flex-direction:column;gap:80px}
body.library .lib-group__title{font-size:var(--fs-h2-sm);letter-spacing:-1px;line-height:1.05;font-weight:700;border-bottom:2px solid var(--navy);padding-bottom:16px}
body.library .lib-entry{padding:48px 0}
body.library .lib-row .tag,body.library .lib-demo>.tag{position:static}
body.library .lib-demo{background:var(--light);border:1px solid var(--navy-a15);border-style:solid}
body.library .lib-h-hero{height:420px}
body.library .lib-h-hero .hero-right,body.library .lib-h-hero .media-frame--hero{height:100%}
@media (max-width:1024px){
  .sg-shell{grid-template-columns:1fr}
  .sg-side{position:static;max-height:none;margin-bottom:48px;padding:20px;background:var(--light);border:1px solid var(--navy-a15);border-radius:var(--radius-sm)}
  .sg-side>nav>ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 24px}
  .sg-side li ul{display:none}
  .sg-side>nav>ul>li{margin:0}
}
/* foundations */
.sg-found>section{padding:48px 0;border-top:1px solid var(--navy-a20)}.sg-found>section:first-child{border-top:0;padding-top:20px}
.sg-found>section>h2{margin:0 0 12px;font-size:var(--fs-40);letter-spacing:-1px;line-height:1.1;font-weight:700}
.sg-found p.note{max-width:760px;margin:0 0 32px;line-height:1.5}
body.library code{font:500 13px/1.4 ui-monospace,Menlo,monospace;background:var(--navy-a06);padding:2px 6px;border-radius:3px;margin-right:6px}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.sg-sw{display:flex;flex-direction:column;gap:4px}
.sg-sw__chip{height:96px;border-radius:var(--radius-sm);border:1px solid var(--navy-a20);margin-bottom:8px}
.sg-sw span{font-size:var(--fs-small);opacity:.8}
.sg-ty{display:grid;grid-template-columns:300px 1fr;gap:32px;padding:24px 0;border-bottom:1px solid var(--navy-a15);align-items:baseline}
.sg-ty__meta{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-small)}
.sg-h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-h2);font-weight:700}
.sg-quote{font-size:var(--fs-quote);line-height:1.3;font-weight:500}
.sg-t1{font-size:var(--fs-title-xl);font-weight:600}.sg-t2{font-size:var(--fs-title);font-weight:600}
.sg-lead{font-size:var(--fs-lead);line-height:1.5}.sg-bl{font-size:var(--fs-body-lg);line-height:1.5}
.sg-b{font-size:var(--fs-body);line-height:1.5}.sg-s{font-size:var(--fs-small)}
.sg-sp{display:grid;grid-template-columns:1fr 220px;gap:8px 24px;align-items:center;padding:12px 0;border-bottom:1px solid var(--navy-a15)}
.sg-sp__bar{height:16px;background:var(--magenta);max-width:100%}
.sg-sp span{grid-column:1 / -1;font-size:var(--fs-small)}
.sg-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:32px;border-radius:var(--radius-sm)}
.sg-row--pink{background:var(--pink)}.sg-row--cream{background:var(--bg);border:1px solid var(--navy-a15)}
.sg-shape{display:flex;flex-wrap:wrap;gap:32px}
.sg-shape div{width:200px;height:100px;display:flex;align-items:center;justify-content:center;background:var(--light);font-size:var(--fs-small);text-align:center;padding:8px}
.sg-rules{max-width:760px;line-height:1.6;padding-left:20px}.sg-rules li{margin-bottom:8px}

.sg-found{counter-reset:sg}
.sg-found>section>h2::before{counter-increment:sg;content:counter(sg,decimal-leading-zero) " ";color:var(--magenta);margin-right:12px}
.sg-group{margin:0 0 56px}.sg-group h3{margin:0 0 6px;font-size:var(--fs-24);font-weight:700;letter-spacing:-.5px}
.sg-group>p{max-width:760px;margin:0 0 20px;line-height:1.5}
.sg-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sg-pair{padding:24px;border-radius:var(--radius-sm);border:1px solid var(--navy-a15);display:flex;flex-direction:column;gap:6px;min-height:140px}
.sg-pair b{font-size:var(--fs-title);letter-spacing:-.3px}.sg-pair em{margin-top:auto;font-size:var(--fs-small);opacity:.85}
.sg-minor{margin:0 0 56px}.sg-minor summary{cursor:pointer;font-weight:600;font-size:var(--fs-title);padding:12px 0}.sg-minor>p{max-width:760px;margin:0 0 20px;line-height:1.5}
@media (max-width:1024px){.sg-ty{grid-template-columns:1fr;gap:8px}.sg-ty__sample,.sg-found .sg-ty div{min-width:0;overflow-wrap:anywhere}.sg-sp{grid-template-columns:1fr}}
@media (max-width:768px){body.library .lib-meta{grid-template-columns:1fr}.sg-found .sg-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
body.library .lib-entry{min-width:0}
body.library .lib-demo{max-width:100%;overflow-x:auto}
body.library .sg-content{overflow-x:clip}

/* ---------- line breaking: no single-word last lines in headings or intro text ---------- */
.hero .hero-headline{display:block}
.hero-headline,.page-title,.section-head__title,.section-head__intro,.hero-body,.page-hero__intro,.card-feature__title,.cta-card__title{text-wrap:balance}
.hero-body,.page-hero__intro,.section-head__intro,.card-feature__text,.card-service__text,.card-news__title,.quote-carousel__text{text-wrap:pretty}
main :is(h1,h2,h3,h4),.accordion__heading,.accordion__trigger{text-wrap:balance}
main :is(p,li,figcaption,dd){text-wrap:pretty}
/* smallest phones (≤480): display 40, h2 36 so headline phrases do not strand a single word */
@media (max-width:480px){body:not(.canvas-mode){--fs-display:var(--fs-40);--fs-h2:var(--fs-36)}}
@media (max-width:360px){body:not(.canvas-mode){--fs-display:34px;--fs-h2:30px;--fs-h2-sm:var(--fs-28)}}

/* ---------- PAGE: about ---------- */
/* ===== PAGE: about (about.html). All rules scoped under .page-about (<main class="page-about">). Tokens only, no new colours. ===== */

/* ---------- split--hero (About hero, Figma 631:16785): title | intro column at 56.6%–93.7% of the row (793 / 519 / 88 of 1400), title top-aligned with the intro; full container width ---------- */
.split--hero{max-width:none;grid-template-columns:minmax(0,793fr) minmax(0,519fr) minmax(0,88fr);column-gap:0;align-items:start}
.split--hero>.split__text:first-child{padding-right:40px}
.split--hero .page-title{max-width:571px} /* breaks after "Taking care" as in Figma (430px heading box) */
.split--hero p{font-size:var(--fs-body-lg)}
@media (max-width:1024px){body:not(.canvas-mode) .split--hero{grid-template-columns:1fr 1fr;column-gap:40px}body:not(.canvas-mode) .split--hero>.split__text:first-child{padding-right:0}}
@media (max-width:768px){body:not(.canvas-mode) .split--hero{grid-template-columns:1fr;row-gap:32px}}
/* ---------- media-pair--hero: wide + narrow photo, same height, 10px apart (871 / 519 × 600 in Figma), 100px under the split ---------- */
.media-pair--hero{grid-template-columns:minmax(0,871fr) minmax(0,519fr);gap:10px}
.media-pair--hero img:first-child{aspect-ratio:871 / 440}
.media-pair--hero img:last-child{aspect-ratio:519 / 440} /* 440 tall at 1440 (was 600): shorter photo row, Marker.io CAR-130 (v2) */
.split+.media-pair--hero{margin-top:40px}
@media (max-width:768px){body:not(.canvas-mode) .media-pair--hero{grid-template-columns:minmax(0,1fr);gap:10px}body:not(.canvas-mode) .media-pair--hero img:first-child,body:not(.canvas-mode) .media-pair--hero img:last-child{aspect-ratio:680 / 455}body:not(.canvas-mode) .split+.media-pair--hero{margin-top:0}}

/* ---------- media-split--reverse (photo on the right; About rows alternate) ---------- */
.media-split--reverse{grid-template-columns:minmax(0,550fr) minmax(0,690fr)}
.media-split--reverse>.media-split__media{order:2}
@media (max-width:1024px){body:not(.canvas-mode) .media-split--reverse{grid-template-columns:1fr 1fr}}
@media (max-width:768px){body:not(.canvas-mode) .media-split--reverse{grid-template-columns:1fr}body:not(.canvas-mode) .media-split--reverse>.media-split__media{order:0}} /* stacked: photo first, like every media-split */

/* ---------- homes-finder (Accommodation overview vacancy finder, Round 1; Figma 677:5326 / 677:5327) ----------
   One bordered search bar (suburb or postcode | radius | Search) + navy Filter button that opens the shared .filter-panel below it;
   "Active Filters" pills (removable) + Clear all; card grid with Load more (6 at a time). Scripts: SHARED filter v5 + homes-finder v2. */
.finder-sticky{position:sticky;top:calc(var(--site-header-h,0px) - 1px);z-index:90;margin-top:calc(var(--space-head-content) - 16px);padding:16px 0;background:var(--bg)} /* search bar sticks under the header while the homes scroll; 1px overlap closes sub-px gaps */
.finder-sticky__inner{max-width:1400px;width:100%;margin:0 auto;padding:0 var(--gutter);box-sizing:border-box;display:flex;flex-direction:column;gap:20px}
.homes-finder .homes-listing__body{padding-top:24px} /* bar → cards = 16 (sticky padding) + 24 = 40px */
.finder-bar{position:relative;display:flex;align-items:stretch;gap:12px}
.finder-search{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;min-height:60px;box-sizing:border-box;border:1.5px solid var(--navy);border-radius:var(--radius-sm)}
.finder-search__field{position:relative;display:flex;align-items:center;min-width:0}
.finder-search__field--place{flex:1 1 0}
.finder-search__field--radius{flex:0 0 29%;border-left:1.5px solid var(--navy)}
.finder-search__icon{position:absolute;left:20px;top:50%;width:24px;height:24px;transform:translateY(-50%);pointer-events:none}
.finder-search__input{display:block;width:100%;height:100%;min-height:57px;margin:0;padding:0 56px 0 20px;box-sizing:border-box;border:0;border-radius:0;background:transparent url(../assets/Icon-arrow-down-2.svg) no-repeat right 20px center / 20px 20px;font-family:inherit;font-size:var(--fs-body);line-height:1.5;color:var(--navy);-webkit-appearance:none;appearance:none}
.finder-search__field--place .finder-search__input{padding-left:56px}
select.finder-search__input{cursor:pointer}
.finder-search__input::placeholder{color:var(--navy);opacity:1}
/* browser datalist arrows hidden; only the Figma chevron (background image) shows. One rule per pseudo-element: an unknown one would drop the whole list */
.finder-search__input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.finder-search__input::-webkit-calendar-picker-indicator{display:none!important;opacity:0;-webkit-appearance:none}
.finder-search__input::-webkit-list-button{display:none!important;opacity:0;-webkit-appearance:none}
.finder-search__input:focus,.finder-search__input:focus-visible{outline:none} /* no thick focus outline on dropdown fields (Lucia, 15 Oct): the open list, the arrow and the text caret show the state */
.finder-search__submit{flex:0 0 auto;align-self:stretch;min-height:0;border-radius:0 calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px) 0} /* inner radius: the form no longer clips (dropdowns must overflow it) */
.finder-search__select{text-align:left;cursor:pointer} /* radius trigger: button with the same look as the field */
/* suburb + radius dropdowns = homepage search suggestions (Figma 587:19381), 8px under the bar, as wide as their field */
.finder-suggest{top:calc(100% + 1.5px);left:-1.5px;right:-1.5px;max-height:320px;overflow-y:auto;gap:0;padding:8px 0;border-top:0;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--bg);box-shadow:none} /* site dropdown style (= .dropdown__list, Lucia 15 Oct): list hangs right under the bar, no gap, no shadow; same colour as the field (the bar is transparent on the cream finder) */
.finder-suggest .finder-suggest__option{padding:12px 20px;font-weight:400;line-height:1.5}
.finder-suggest .finder-suggest__option[aria-selected="true"]{font-weight:600} /* = .dropdown__option */
.finder-search__input[aria-expanded="true"]{background-image:url(../assets/Icon-arrow-up-2.svg)} /* arrow turns up while the list is open */
.finder-search__field--radius .finder-suggest{left:0}
.finder-suggest__option{width:100%;margin:0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
.finder-suggest__option:hover,.finder-suggest__option:focus-visible{text-decoration:underline}
.finder-suggest__option:focus-visible{outline:none}
.finder-filter-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:60px;padding:0 24px;border:0;border-radius:var(--radius-sm);background:var(--navy);color:var(--bg);font-family:inherit;font-size:var(--fs-body);font-weight:600;line-height:1.4;cursor:pointer}
.finder-filter-btn img{display:block;width:24px;height:24px}
.finder-filter-btn .finder-filter-btn__close,.finder-filter-btn[aria-expanded="true"] .finder-filter-btn__open{display:none}
.finder-filter-btn[aria-expanded="true"] .finder-filter-btn__close{display:block}
.finder-filter-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.finder-bar .filter-panel{top:calc(100% + 12px);right:0;max-height:calc(100vh - var(--site-header-h,0px) - 120px);overflow-y:auto}
.finder-active{display:flex;align-items:center;justify-content:space-between;gap:12px 16px}
.finder-active[hidden]{display:none}
.finder-active__left{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0}
.finder-active__label{font-size:var(--fs-body);font-weight:600;line-height:1.5;color:var(--navy)}
.finder-active__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.finder-active__pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;box-sizing:border-box;border:1.5px solid var(--navy);border-radius:999px;background:none;font-family:inherit;font-size:var(--fs-body);font-weight:600;line-height:1.5;color:var(--navy);cursor:pointer}
.finder-active__pill img{display:block;width:16px;height:16px}
.finder-active__pill:hover{background:var(--nav-active)}
.finder-active__clear{flex:0 0 auto;padding:12px 0;border:0;background:none;font-family:inherit;font-size:var(--fs-body);font-weight:600;color:var(--navy);cursor:pointer}
.finder-active__pill:focus-visible,.finder-active__clear:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.finder-search__note{margin:-8px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--navy)}
.card-home__meta{margin:-16px 0 0;font-size:var(--fs-small);line-height:1.4;color:var(--navy)}
.homes-grid>.card-home.is-paged-out{display:none}
.homes-finder .homes-listing__count:empty{display:none}
@media (max-width:768px){
  body:not(.canvas-mode) .finder-bar{flex-wrap:wrap}
  /* Lucia 16 Oct: suburb and radius stacked in one bordered box, Search full width below it (as the homepage search on mobile), slimmer Filter button */
  body:not(.canvas-mode) .finder-search{flex:1 1 100%;flex-wrap:wrap;border:0}
  body:not(.canvas-mode) .finder-search__field--place{flex:1 1 100%;border:1.5px solid var(--navy);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
  body:not(.canvas-mode) .finder-search__field--radius{flex:1 1 100%;border:1.5px solid var(--navy);border-top:0;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
  body:not(.canvas-mode) .finder-search__submit{flex:1 1 100%;justify-content:center;min-height:48px;margin-top:12px;border-radius:var(--radius-sm)}
  body:not(.canvas-mode) .finder-suggest{position:absolute;margin:0} /* keep overlaying (homepage ≤768 puts its dropdown in flow) */
  body:not(.canvas-mode) .finder-filter-btn{flex:1 1 100%;justify-content:center;min-height:48px}
  body:not(.canvas-mode) .finder-bar .filter-panel{left:0;right:0;width:auto}
  body:not(.canvas-mode) .finder-active{flex-wrap:wrap}
}
/* finder-toggle on mobile (CAR-206, Lucia 28 Oct): the search and filter tools keep their full layout until the bar sticks under the header
   (scrolled past); then they fold into one "Search and filter" frame. Tapping it opens the full tools again with a close (×) on that row.
   .is-stuck / .is-open are set by the page script (disability-accommodation.html). */
.finder-toggle{display:none}
.finder-tools{display:flex;flex-direction:column;gap:20px}
@media (max-width:768px){
  body:not(.canvas-mode) .finder-sticky.is-stuck{padding:12px 0}
  body:not(.canvas-mode) .finder-sticky.is-stuck .finder-sticky__inner{gap:12px}
  body:not(.canvas-mode) .finder-sticky.is-stuck .finder-toggle{display:flex;align-items:center;width:100%;min-height:48px;padding:0 56px;box-sizing:border-box;border:1.5px solid var(--navy);border-radius:var(--radius-sm);background:transparent url(../assets/Icon-search.svg) no-repeat 16px center / 24px 24px;font-family:inherit;font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--navy);text-align:left;cursor:pointer;position:relative}
  body:not(.canvas-mode) .finder-sticky.is-stuck .finder-toggle::after{content:"";position:absolute;right:16px;top:50%;width:24px;height:24px;transform:translateY(-50%);background:url(../assets/icon-filter-navy-r5.svg) no-repeat center / 24px 24px}
  body:not(.canvas-mode) .finder-sticky.is-stuck.is-open .finder-toggle{min-height:32px;padding:0 40px 0 0;border:0;background-image:none}
  body:not(.canvas-mode) .finder-sticky.is-stuck.is-open .finder-toggle::after{right:0;background-image:url(../assets/mobile-menu-close-r4.svg)} /* × closes the tools again */
  body:not(.canvas-mode) .finder-toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
  body:not(.canvas-mode) .finder-sticky.is-stuck:not(.is-open) .finder-tools{display:none}
}

/* ---------- media-split--portrait (About rows, Figma 633:16935): two equal columns 160px apart (660 | 660 of 1480), portrait photo 660 × 810,
   text block max 507px centred vertically; with --reverse the text sits 60px in from its column's left edge ---------- */
.media-split--portrait{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10.8%;min-height:0}
.media-split--portrait>.media-split__media{min-height:0;height:600px;align-self:center} /* fixed 600px photo height on every portrait row (Lucia, 15 Oct; was 660 × 810 from Figma) */
.media-split--portrait>.media-split__content{align-self:center;max-width:507px;gap:15px}
.media-split--portrait.media-split--reverse>.media-split__content{margin-left:9%}
.media-split--portrait .section-head__title{font-size:var(--fs-h2-sm);letter-spacing:-1px;line-height:1.2}
.media-split--portrait .media-split__content p{font-size:var(--fs-body)}
.media-split--portrait .media-split__content .btn-row{margin-top:17px}
.container>.media-split--portrait+.media-split--portrait{margin-top:40px} /* 100px between rows (60px container gap + 40px; Lucia, 15 Oct) */
@media (max-width:768px){body:not(.canvas-mode) .container>.media-split--portrait+.media-split--portrait{margin-top:0}}
@media (max-width:1024px){body:not(.canvas-mode) .media-split--portrait{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}body:not(.canvas-mode) .media-split--portrait.media-split--reverse>.media-split__content{margin-left:0}}
@media (max-width:768px){body:not(.canvas-mode) .media-split--portrait{grid-template-columns:1fr}body:not(.canvas-mode) .media-split--portrait>.media-split__media{height:auto}body:not(.canvas-mode) .media-split--portrait>.media-split__content{max-width:none}}

/* --landscape (with --portrait): 660 × 495 photo (Careers values, Figma 636:23175) */
.media-split--portrait.media-split--landscape>.media-split__media{height:auto;aspect-ratio:660 / 495} /* height from the column width (the portrait 600px height + this ratio made the photo ~800px wide and cover the text, Marker.io CAR-118/157) */
/* ---------- promo-split--pink: pink panel, navy text, left-aligned (Careers "Find your next role", Figma 636:20365) ---------- */
.promo-split--pink{background:var(--pink)}
.promo-split--pink .promo-split__text{align-items:flex-start;text-align:left;gap:28px;padding:80px}
.promo-split--pink .promo-split__title,.promo-split--pink .promo-split__body p{color:var(--navy)}
.promo-split--pink .promo-split__body+.promo-split__body{margin-top:32px}
@media (max-width:768px){body:not(.canvas-mode) .promo-split--pink .promo-split__text{padding:40px var(--gutter)}}
/* ---------- video-list--2: two video cards, centred (Careers stories, Figma 636:20820) ---------- */
.video-list--2{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 140px}
.video-list--1{grid-template-columns:minmax(0,560px);justify-content:center;padding:0} /* one video under a quote carousel (Accommodation, CAR-92) */
@media (max-width:1024px){body:not(.canvas-mode) .video-list--2{padding:0}}
@media (max-width:768px){body:not(.canvas-mode) .video-list--2{grid-template-columns:1fr}}

/* card-person as a <button> (opens its .person-dialog): reset the native button look */
button.card-person{width:100%;margin:0;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}

/* ---------- person-dialog (team member details, modal <dialog>; opened by SHARED person-dialog) ----------
   Round photo | name, role (small caps), qualifications, bio. Padding sits on __inner so a click on the dialog element itself = backdrop. */
.person-dialog{width:calc(100% - 2 * var(--gutter));max-width:1200px;max-height:calc(100% - 80px);margin:auto;padding:0;border:0;border-radius:var(--radius-sm);background:var(--bg);color:var(--navy);overflow:auto;overscroll-behavior:contain}
.person-dialog::backdrop{background:rgba(17,19,43,.4)} /* = --navy-a40; ::backdrop does not inherit custom properties in every browser */
html:has(.person-dialog[open]){overflow:hidden}
.person-dialog__inner{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:80px;align-items:start;padding:80px}
.person-dialog__photo{width:240px;height:240px;border-radius:var(--radius-sm);object-fit:cover;object-position:50% 20%;background:var(--light)}
.person-dialog__body{display:flex;flex-direction:column;gap:20px;padding-right:40px}
.person-dialog__name{margin:0;font-size:var(--fs-h2-sm);font-weight:600;letter-spacing:-1px;line-height:1.1}
.person-dialog__role{margin:0;font-size:var(--fs-small);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.person-dialog__body p{margin:0;font-size:var(--fs-body-lg);line-height:1.6}
.person-dialog__body .person-dialog__role{font-size:var(--fs-small);line-height:1.4}
.person-dialog__body .person-dialog__qual{font-size:var(--fs-body);font-style:italic}
.person-dialog__close{position:absolute;top:24px;right:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.person-dialog__close img{width:24px;height:24px}
.person-dialog__close:hover{background:var(--light)}
.person-dialog__close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:1024px){body:not(.canvas-mode) .person-dialog__inner{grid-template-columns:180px minmax(0,1fr);column-gap:40px;padding:60px 40px}body:not(.canvas-mode) .person-dialog__photo{width:180px;height:180px}body:not(.canvas-mode) .person-dialog__body{padding-right:24px}}
@media (max-width:768px){body:not(.canvas-mode) .person-dialog{max-height:calc(100% - 32px)}body:not(.canvas-mode) .person-dialog__inner{grid-template-columns:1fr;row-gap:24px;padding:56px 24px 32px}body:not(.canvas-mode) .person-dialog__photo{width:140px;height:140px}body:not(.canvas-mode) .person-dialog__body{padding-right:0}body:not(.canvas-mode) .person-dialog__close{top:8px;right:8px}}

/* ---------- split extras: illustration under the heading / centred in its column; --center aligns the two columns vertically ---------- */
.split__illo{display:block;width:100%;max-width:458px;height:auto;margin-top:40px}
.split__illo--center{max-width:300px;margin:0 auto}
.split--center{align-items:center}
@media (max-width:768px){body:not(.canvas-mode) .split__illo{max-width:320px;margin-top:20px}body:not(.canvas-mode) .split__illo--center{max-width:220px;margin:0 auto}}

/* ---------- timeline (About "18+ years": start label → end label on a line with a dot at each end, text under it; Figma 635:19664) ---------- */
.timeline{width:100%;max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.timeline__track{position:relative;list-style:none;margin:0;padding:0 0 32px;display:flex;justify-content:space-between;font-size:var(--fs-16);line-height:1.5;color:var(--navy)}
.timeline__track::before{content:"";position:absolute;left:10px;right:10px;bottom:9px;height:1.5px;background:var(--navy)}
.timeline__track li{position:relative}
.timeline__track li::after{content:"";position:absolute;bottom:-32px;left:0;width:20px;height:20px;border-radius:50%;background:var(--navy)}
.timeline__track li:last-child::after{left:auto;right:0}
.timeline>p{margin:0;font-size:var(--fs-16);line-height:1.6;color:var(--navy)}
.timeline>.btn-row{margin-top:20px}

/* ---------- card-person (team member link: hand-drawn top line, square photo (CAR-50), name, role, pink "View profile" (CAR-51); Figma 636:21970) ---------- */
.card-person-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 40px}
.card-person-grid>li{min-width:0}
/* --scroll (Marker.io CAR-154 / 155, v2): one sideways row, 3 tiles in view on desktop, Previous / Next under it (homes / news row pattern) */
.team-carousel{display:flex;flex-direction:column;gap:40px;width:100%}
.card-person-grid--scroll{display:flex;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.card-person-grid--scroll::-webkit-scrollbar{display:none}
.card-person-grid--scroll>li{flex:0 0 calc((100% - 2 * 40px) / 3);scroll-snap-align:start}
.news-controls.team-controls{justify-content:center} /* Meet the team arrows centred at every width (Lucia 21 Oct) */
.team-controls .icon-btn[aria-disabled="true"]{opacity:.35;cursor:default}
@media (max-width:1024px){body:not(.canvas-mode) .card-person-grid--scroll>li{flex-basis:calc((100% - 40px) / 2)}}
.card-person{display:flex;flex-direction:column;gap:20px;color:var(--navy);text-decoration:none}
.card-person__line{display:block;width:100%;height:auto}
.card-person__row{display:flex;align-items:center;gap:20px}
.card-person__photo{flex:0 0 120px;width:120px;height:120px;border-radius:var(--radius-sm);object-fit:cover;object-position:50% 20%;background:var(--bg)}
.card-person__body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.card-person__name{margin:0;font-size:var(--fs-title);font-weight:500;line-height:1.3}
.card-person__role{font-size:var(--fs-small);line-height:1.4}
.card-person__link{margin-top:8px;font-size:var(--fs-body);font-weight:600;color:var(--magenta-dark);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s ease} /* Marker.io CAR-51 (16 Oct): pink, no arrow. --magenta-dark, not --magenta: 4.5:1 on light / cream */
.card-person:hover .card-person__link,.card-person:focus-visible .card-person__link{text-decoration-color:currentColor}
.card-person:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
@media (max-width:1024px){body:not(.canvas-mode) .card-person-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){body:not(.canvas-mode) .card-person__photo{flex-basis:96px;width:96px;height:96px}}

/* Arrow links inside .card-feature (statement / Customer Reference Group / team profile): hug their content instead of stretching across the card */
.page-about .card-feature .arrow-link{align-self:flex-start}

/* Boxed CTA band inside a plain .section: navy focus ring on the pink panel (same as .funded; without it the ring is magenta on pink).
   Suggested global fix: add .cta-band--boxed to the --focus-ring:var(--navy) selector list at the top of styles.css and drop this rule. */
.page-about .cta-band--boxed{--focus-ring:var(--navy)}

/* ---------- PAGE: property-listing ---------- */
/* ---------- PAGE: property-listing (scope: .page-property on <main>; Figma 631:8491, layout only — sizes/icons follow the system) ---------- */
.page-property .section--title .tag{align-self:flex-start} /* title → tag = the section-head gap */
.page-property .section-head__intro a{text-decoration:underline;text-underline-offset:3px}

/* ---------- property-gallery (photo row with dots; Figma 631:10050) ----------
   Each photo is as wide as the property-detail main column below (8 of the 12 grid columns), scroll-snap; the next photo peeks. Arrows and dots sit in a row under the first photo.
   SHARED property-gallery script: dot click scrolls to its photo, prev/next step one photo, the dot of the photo in view is aria-current. */
.property-gallery{position:relative}
.property-gallery__track{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}
.property-gallery__track::-webkit-scrollbar{display:none}
.property-gallery__track:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.property-gallery__item{flex:0 0 calc((100% - 220px) * 8 / 12 + 140px);margin:0;scroll-snap-align:start;aspect-ratio:926 / 618;border-radius:var(--radius-sm);overflow:hidden;background:var(--light)}
.property-gallery__item img{display:block;width:100%;height:100%;object-fit:cover}
/* controls: the homepage quote-carousel row (icon-btn--lg arrows + quote-carousel__dot), left-aligned under the first photo */
.property-gallery__controls{width:calc((100% - 220px) * 8 / 12 + 140px);display:flex;align-items:center;justify-content:flex-start;gap:20px;margin-top:24px}
.property-gallery [data-gallery-prev][aria-disabled="true"],.property-gallery [data-gallery-next][aria-disabled="true"]{opacity:.4;cursor:default}
/* Marker.io CAR-42 (16 Oct): controls sit on the first photo — arrows at its sides, dots in a white pill at its foot (same width and ratio as the photo) */
.property-gallery__controls{position:absolute;left:0;top:0;aspect-ratio:926 / 618;margin-top:0;justify-content:space-between;padding:0 16px;box-sizing:border-box;pointer-events:none}
.property-gallery__controls>*{pointer-events:auto}
.property-gallery__controls .icon-btn{background:var(--white);border-radius:50%}
.property-gallery__controls .icon-btn[aria-disabled="true"]{opacity:.6}
.property-gallery__controls .quote-carousel__dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:2px 8px;background:var(--white);border-radius:999px}
@media (max-width:1024px){body:not(.canvas-mode) .property-gallery__item{flex-basis:80%}body:not(.canvas-mode) .property-gallery__controls{width:80%}}
@media (max-width:768px){
  body:not(.canvas-mode) .property-gallery__item{flex-basis:88%}
  body:not(.canvas-mode) .property-gallery__controls{width:88%;padding:0 8px}
}

/* ---------- property-detail (content column + sticky "at a glance" aside; Figma 631:9957) ----------
   12-col site grid (20px gaps): main 8 columns | 1 empty column | aside 3 columns. Each block: h2 + hand-drawn line + body. ≤1024 one column, aside first. */
.property-detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:start}
.property-detail__main{grid-column:1 / span 8}
.property-detail__aside{grid-column:10 / span 3}
.property-detail__main{display:flex;flex-direction:column;gap:var(--space-section-sm)}
.property-detail__block{display:flex;flex-direction:column;gap:24px}
.property-detail__title{margin:0;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.5px;line-height:1.2;color:var(--navy)}
.property-detail__divider{margin-top:-8px}
.property-detail__body{display:flex;flex-direction:column;gap:16px}
.property-detail__body p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--navy)}
.property-detail__body .btn-row{margin-top:16px}
.property-detail__plan{display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--white)}
.property-detail__plan img{display:block;width:100%;height:auto}
.property-detail__plan:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.property-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px} /* icon grid (Josh 14 Oct mock-up), 2 columns inside the 8-column main */
.property-features__item{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 20px;box-sizing:border-box;border-radius:var(--radius-sm);background:var(--light);font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--navy)}
.property-features__icon{flex:0 0 24px;width:24px;height:24px;display:block}
@media (max-width:768px){body:not(.canvas-mode) .property-features{grid-template-columns:minmax(0,1fr)}}
.property-detail__map{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius-sm);overflow:hidden;background:var(--light)} /* embedded suburb map (Round 1, Josh: map on the property page) */
.property-detail__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.property-detail__notice{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--radius-sm);background:var(--light)} /* SDA funding notice before enquiring (live listing copy) */
.property-detail__block>.property-detail__notice{margin-top:24px}
.property-detail__notice p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--navy)}
.property-detail__notice a{font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.property-partner{display:flex;flex-direction:column;gap:12px;padding-bottom:32px;border-bottom:1.5px solid var(--navy)} /* CAR-165: first in the sidebar, rule below it */ /* SDA housing partner in the right column (Josh 14 Oct) */
.property-partner__label{margin:0;font-size:var(--fs-body);line-height:1.4;color:var(--navy)}
.property-partner__logo{display:block;width:auto;max-width:200px;max-height:80px;object-fit:contain;object-position:left center}
.property-partner__name{margin:0;font-size:var(--fs-16);font-weight:600;line-height:1.4;color:var(--navy)} /* partner name under the logo (CAR-113) */
.property-detail__cta{align-self:flex-start}
.property-detail__aside{position:sticky;top:calc(var(--site-header-h,0px) + 40px);display:flex;flex-direction:column;gap:32px}
.property-detail__facts{margin:0;display:flex;flex-direction:column;gap:16px}
.property-detail__facts div{display:grid;grid-template-columns:24px minmax(0,1fr) fit-content(55%);column-gap:12px;align-items:center} /* one row per fact: icon (the card-home feature icons) | label | value (at most 55%, a long value wraps) */
.property-detail__fact-icon{width:24px;height:24px}
.property-detail__facts dt{font-size:var(--fs-body);line-height:1.4;color:var(--navy)}
.property-detail__facts dd{margin:0;font-size:var(--fs-body-lg);font-weight:600;line-height:1.3;color:var(--navy);text-align:right}
@media (max-width:1024px){
  body:not(.canvas-mode) .property-detail{grid-template-columns:minmax(0,1fr);row-gap:var(--space-section-sm)}
  body:not(.canvas-mode) .property-detail__main,body:not(.canvas-mode) .property-detail__aside{grid-column:auto}
  body:not(.canvas-mode) .property-detail__aside{position:static;order:-1}
}
@media (max-width:768px){body:not(.canvas-mode) .property-detail__title{font-size:var(--fs-h3)}}

/* ---------- PAGE: careers ---------- */
/* ============================================================================
   PAGE: careers  (careers.html; scope: .page-careers on <main>)
   No new component. One accessibility fix for the existing boxed CTA band:
   ============================================================================ */

/* Boxed CTA band ("Our values.") inside a plain .section: navy focus ring on the pink panel (same as .funded; without it the ring on
   .btn--light is magenta on pink). Same fix as .page-about .cta-band--boxed; suggested global fix: add .cta-band--boxed to the
   --focus-ring:var(--navy) selector list at the top of styles.css and drop both page-scoped rules. */
.page-careers .cta-band--boxed{--focus-ring:var(--navy)}

/* in-page targets of the hero buttons clear the sticky header (same as #homes) */
.page-careers #vacancies,.page-careers #offer{scroll-margin-top:var(--site-header-h,0px)}

/* ---------- PAGE: news ---------- */
/* ============================================================================
   PAGE: news  (news.html; the .news-grid + text-only .card-news variant are also used by news-article.html "More news")
   Merge into styles.css section 05 (page-specific), after the .card-news / .cta-card rules.
   Only existing tokens; no new colours. Breakpoints 1200 / 1024 / 768 / 480 (wrapped in body:not(.canvas-mode) like existing rules).
   ============================================================================ */

/* ---------- news-grid: card-news listing grid, 3 / 2 / 1 columns ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 40px}
@media (max-width:1024px){body:not(.canvas-mode) .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}}
@media (max-width:768px){body:not(.canvas-mode) .news-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---------- news-listing: load-more root (grid → button row → status), --space-content-cta apart ---------- */
.news-listing{display:flex;flex-direction:column;gap:var(--space-content-cta)}

/* ---------- card-news--text: article card with no photo; the hand-drawn wavy line (same artwork as .card-feature--text) sits where the media frame would ---------- */
.card-news--text{gap:20px}
.card-news__line{display:block;width:100%;height:auto}
.card-news[hidden]{display:none} /* .card-news{display:flex} would otherwise override [hidden] (load-more) */

/* ---------- cta-card-grid--single: one full-width card (featured article); combine with --narrow ---------- */
.cta-card-grid--single{grid-template-columns:minmax(0,1fr)}

/* "Read more" link on the text-only card gets a 44px target (the photo card keeps the original 24px link) */
.card-news--text .card-news__more{min-height:44px}

/* ---------- PAGE: news-article ---------- */
/* ============================================================================
   PAGE: news-article  (news-article.html)
   Merge into styles.css section 05 (page-specific). Also needs the .news-grid / .card-news--text rules from news.css ("More news").
   Only existing tokens; no new colours. Breakpoints 1200 / 1024 / 768 / 480 (wrapped in body:not(.canvas-mode) like existing rules).
   ============================================================================ */

/* ---------- article column: head, body and footer share one left edge (926px column; body text capped at a readable measure) ---------- */
.article-col{display:flex;flex-direction:column;gap:var(--space-head-content);width:100%;max-width:926px;margin-left:auto;margin-right:auto}

/* ---------- article-head: category · date, then the h1 at the h2 size (long headlines) ---------- */
.article-head{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.article-head .page-title{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-h2)}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.article-meta__date{font-size:var(--fs-body);font-weight:600;line-height:16px;text-transform:uppercase;color:var(--navy)}

/* ---------- article-lead + article-figure (News single): standfirst under the h1, featured image under the head ---------- */
.article-lead{margin:0;max-width:760px;font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.3px;color:var(--navy)}
.article-figure{margin:0}
.article-figure img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-sm)}
.article-figure figcaption{margin-top:8px;font-size:var(--fs-small);line-height:1.5;color:var(--navy)}
.article-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* ---------- rich-text: ONE set of content blocks for every article-style and simple page (News single, General Content: privacy,
   terms, feedback / complaints, Customer Reference Group…). Blocks: h2–h6, paragraph, lead, strong / em / links, lists (nested),
   quote, figure + caption, video, table, note, download, divider, buttons. Text column 760px. (Lucia, 15 Oct) ---------- */
.rich-text{max-width:760px;font-size:var(--fs-body-lg);line-height:1.6;color:var(--navy)}
.rich-text>*{margin:0}
.rich-text>*+*{margin-top:24px}
.rich-text>h2{margin-top:56px;font-size:var(--fs-28);font-weight:600;letter-spacing:-.5px;line-height:1.2}
.rich-text>h3{margin-top:40px;font-size:var(--fs-24);font-weight:600;letter-spacing:-.5px;line-height:1.3}
.rich-text>h4{margin-top:32px;font-size:var(--fs-20);font-weight:600;letter-spacing:-.3px;line-height:1.4}
.rich-text>h5{margin-top:32px;font-size:var(--fs-18);font-weight:600;line-height:1.4}
.rich-text>h6{margin-top:32px;font-size:var(--fs-14);font-weight:600;line-height:1.4;letter-spacing:.04em;text-transform:uppercase}
.rich-text>:is(h2,h3,h4,h5,h6)+*{margin-top:16px}
.rich-text>:first-child{margin-top:0}
.rich-text>:is(h2,h3){scroll-margin-top:calc(var(--site-header-h, 0px) + 24px)} /* in-page links (e.g. Feedback route cards) land below the sticky header */
.rich-text .rich-text__lead{font-size:var(--fs-lead);line-height:1.5;letter-spacing:-.3px}
.rich-text strong,.rich-text b{font-weight:600}
.rich-text a:not(.btn):not(.arrow-link){color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;overflow-wrap:anywhere}
.rich-text a:not(.btn):not(.arrow-link):hover{color:var(--magenta-dark)}
.rich-text small{font-size:var(--fs-small)}
/* lists: bullets use the site's hand-drawn chevron (as .list-chevron); numbers are semibold */
.rich-text ul,.rich-text ol{margin-left:0;padding-left:0}
.rich-text ul{list-style:none}
.rich-text ul>li{position:relative;padding-left:22px}
.rich-text ul>li::before{content:"";position:absolute;left:2px;top:calc(.5lh - 3.5px);width:6px;height:7px;background:url(../assets/icon-list-chevron-r4.svg) center/contain no-repeat;transform:rotate(90deg) scaleY(-1)}
.rich-text ol{padding-left:24px}
.rich-text ol>li::marker{font-weight:600}
.rich-text li+li,.rich-text li>ul,.rich-text li>ol{margin-top:8px}
/* quote */
.rich-text blockquote{padding:4px 0 4px 24px;border-left:3px solid var(--pink)}
.rich-text blockquote p{margin:0;font-size:var(--fs-24);font-weight:500;line-height:1.4;letter-spacing:-.5px}
.rich-text blockquote footer{margin-top:12px;font-size:var(--fs-small);line-height:1.5}
/* figure (image + caption) and video (thumbnail linking out, play button as .card-video) */
.rich-text figure img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.rich-text figcaption{margin-top:8px;font-size:var(--fs-small);line-height:1.5}
.rich-text .rich-text__figure--small{max-width:420px} /* square / portrait artwork (e.g. award graphics) at a smaller size */
.rich-text__video{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden}
.rich-text__video img{aspect-ratio:16 / 9;object-fit:cover;border-radius:0}
.rich-text__play{position:absolute;left:50%;top:50%;width:80px;height:80px;transform:translate(-50%,-50%)}
.rich-text__play img{width:80px;height:80px;aspect-ratio:auto}
/* table: wrapper scrolls sideways on small screens */
.rich-text__table{overflow-x:auto}
.rich-text table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--fs-body);line-height:1.5}
.rich-text caption{margin-bottom:12px;font-size:var(--fs-small);font-weight:600;text-align:left}
.rich-text th,.rich-text td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--navy-a20)}
.rich-text thead th{border-bottom:1.5px solid var(--navy);font-weight:600}
.rich-text tbody th{font-weight:600}
.rich-text tbody tr:nth-child(even){background:var(--light)}
/* note (callout), divider, buttons, download */
.rich-text__note{padding:24px 32px;border-radius:var(--radius-sm);background:var(--white)}
.rich-text__note>*{margin:0}
.rich-text__note>*+*{margin-top:8px}
.rich-text__note p{font-size:var(--fs-body)}
.rich-text hr{height:1px;margin:48px 0;border:0;background:var(--navy-a20)}
.rich-text>.btn-row,.rich-text>.arrow-link{margin-top:32px}
@media (max-width:768px){
  body:not(.canvas-mode) .rich-text>h2{margin-top:40px;font-size:var(--fs-24)}
  body:not(.canvas-mode) .rich-text>h3{margin-top:32px;font-size:var(--fs-22)}
  body:not(.canvas-mode) .rich-text blockquote p{font-size:var(--fs-20)}
  body:not(.canvas-mode) .rich-text__note{padding:20px 24px}
  body:not(.canvas-mode) .rich-text__play,body:not(.canvas-mode) .rich-text__play img{width:56px;height:56px}
}

/* ---------- PAGE: tac-worksafe-support ---------- */
/* ================= PAGE: tac-worksafe-support — to merge into styles.css, 05 SECTIONS =================
   Small refinements for content that sits inside existing components. Scoped under .page-tac (set on <main>).
   Existing tokens only, no new colours. */

/* service cards (.card-feature--text) carry a chevron list under the intro text */

/* inline text links must be distinguishable without colour (global a has no underline) */
.page-tac .checklist a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* FAQ answers hold paragraphs, a chevron list and a trailing arrow link: stack them with a 16px rhythm */
.page-tac .accordion__panel-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.page-tac .accordion__panel-body>*{margin:0}

/* arrow links inside split text columns and numbered step cards keep their own width (parents are flex columns) */
.page-tac .split__text .arrow-link,.page-tac .card-numbered__body .arrow-link{align-self:flex-start}

/* stories heading group: intro sentence under the h2 */
.stories-title .section-head__intro{max-width:var(--w8);margin:20px auto 0} /* title → intro 20px, the site-wide section-head gap (was TAC only; Lucia 28 Oct: Frontline stories intro sat on the title) */

/* ---------- PAGE: enquiry ---------- */
/* ================= PAGE: enquiry (Intake & Referral form) — to merge into styles.css, 05 SECTIONS =================
   styles.css has no text-input / select / textarea / inline-error / summary / success styles, so this block adds them.
   Scoped under .page-enquiry (set on <main> in enquiry.html). Existing tokens only, no new colours.
   Reuses: .checkbox (box border darkened here for 3:1 non-text contrast, 44px target), .btn, .arrow-link, .list-chevron, .section-head. */
.page-enquiry .enq{width:100%;max-width:1080px;margin:0 auto; /* 1080 (was 926): wider form, Marker.io CAR-159 — fields stay a readable width (not edge to edge, James) */ display:flex;flex-direction:column;gap:80px}
.page-enquiry .enq-block{display:flex;flex-direction:column;gap:32px}
.page-enquiry .enq-block__title{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-.5px;color:var(--navy);scroll-margin-top:calc(var(--site-header-h, 0px) + 24px)}
.page-enquiry .enq-block__title:focus{outline:none} /* only focused programmatically (hero "Complete the enquiry form" anchor) */
.page-enquiry .enq-steps{padding-left:0}
.page-enquiry .enq-steps li{font-size:var(--fs-body);line-height:1.6}

/* form layout: fieldsets > 2-column grid (1 column ≤768) */
.page-enquiry .enq-form{display:flex;flex-direction:column;gap:56px}
.page-enquiry .enq-form[hidden]{display:none}
.page-enquiry .enq-req-note{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--navy)}
.page-enquiry .enq-group{min-width:0;margin:0;padding:0;border:0}
.page-enquiry .enq-group__legend{padding:0;margin:0 0 24px;font-size:var(--fs-title-xl);font-weight:600;line-height:1.3;letter-spacing:-.5px;color:var(--navy)}
.page-enquiry .enq-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:start}
.page-enquiry .enq-field{display:flex;flex-direction:column;gap:8px;min-width:0;grid-column:span 3}
.page-enquiry .enq-field--third{grid-column:span 2}
.page-enquiry .enq-field .enq-hint{margin:0}
.page-enquiry .enq-field--full{grid-column:1 / -1}
.page-enquiry .enq-fields>.enq-note{margin-top:0} /* in the field grid: same 24px gap as every field */
.page-enquiry .enq-field--solo{grid-column:1 / -1} /* half field without a partner (set by the form script): fields are always two equal halves or one full row */
.page-enquiry .enq-field--short{grid-column:1 / -1;max-width:calc((100% - 24px) / 2)} /* one short field on its own row (Title) */
.page-enquiry .enq-subgroup{min-width:0;margin:0;padding:0;border:0}
.page-enquiry .enq-subgroup>legend{margin-bottom:8px}
.page-enquiry .enq-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}

/* labels, hints, required marker */
.page-enquiry .enq-label{padding:0;font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--navy)}
.page-enquiry .enq-hint{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--navy)}
.page-enquiry .enq-req{color:var(--magenta-dark)} /* #C8008C on --light 5.2:1, on --white 5.5:1 */

/* text input, select, textarea (focus ring comes from the global :focus-visible rule) */
.page-enquiry .enq-input{display:block;width:100%;min-height:48px;margin:0;padding:12px 16px;border:1.5px solid var(--navy);border-radius:var(--radius-sm);background:var(--white);font-family:inherit;font-size:var(--fs-body);font-weight:400;line-height:1.5;color:var(--navy);scroll-margin-top:calc(var(--site-header-h, 0px) + 24px)}
.page-enquiry textarea.enq-input{min-height:140px;resize:vertical}
.page-enquiry select.enq-input{padding-right:52px;-webkit-appearance:none;appearance:none;cursor:pointer;background:var(--white) url(../assets/Icon-arrow-down-2.svg) no-repeat right 16px center / 24px 24px}

/* checkbox (existing component) — darker box + 44px target inside the form */
.page-enquiry .checkbox{min-height:44px;padding:10px 0;align-items:flex-start}
.page-enquiry .checkbox__box{margin-top:4px;border:1.5px solid var(--navy);background:var(--white)}
.page-enquiry .checkbox a,.page-enquiry .enq-link{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* inline error + invalid state (message text + thicker border, never colour alone) */
.page-enquiry .enq-error{margin:0;font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--magenta-dark)}
.page-enquiry .enq-error[hidden]{display:none}
.page-enquiry .enq-input[aria-invalid="true"],.page-enquiry .checkbox input[aria-invalid="true"]+.checkbox__box{border-color:var(--magenta-dark);box-shadow:0 0 0 1px var(--magenta-dark)}

/* error summary (focused on a failed submit) */
.page-enquiry .enq-summary{padding:24px 32px;border:2px solid var(--magenta-dark);border-radius:var(--radius-sm);background:var(--white);color:var(--navy);scroll-margin-top:calc(var(--site-header-h, 0px) + 24px)}
.page-enquiry .enq-summary[hidden]{display:none}
.page-enquiry .enq-summary__title{margin:0 0 16px;font-size:var(--fs-title-xl);font-weight:600;line-height:1.3;letter-spacing:-.5px}
.page-enquiry .enq-summary__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.page-enquiry .enq-summary__list a{font-weight:600;color:var(--magenta-dark);text-decoration:underline;text-underline-offset:3px}

/* success confirmation (hidden until a valid submit) — navy on pink, navy focus ring */
.page-enquiry .enq-success{--focus-ring:var(--navy);display:flex;flex-direction:column;gap:16px;padding:40px;border-radius:var(--radius-sm);background:var(--pink);color:var(--navy);scroll-margin-top:calc(var(--site-header-h, 0px) + 24px)}
.page-enquiry .enq-success[hidden]{display:none}
.page-enquiry .enq-success p{margin:0;font-size:var(--fs-body-lg);line-height:1.5}
.page-enquiry .enq-success__title{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:-.5px}
.page-enquiry .enq-success a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* funding information note (live site shows this as a popup; here inline, shown when the funding answer is No or Unsure) */
.page-enquiry .enq-note{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:8px;padding:24px;border:1px solid var(--navy-a20);border-radius:var(--radius-sm);background:var(--bg)}
.page-enquiry .enq-note[hidden]{display:none}
.page-enquiry .enq-note p{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--navy)}
/* path choice (participant / referrer): two radio choice cards (ROUND1-NOTES decision 4); white card like .card-persona, navy border + radio dot when selected */
html:has(.page-enquiry),body:has(.page-enquiry){overflow-anchor:none} /* choosing a path reveals the form above the PDF option: keep the view on the cards instead of letting the browser's scroll anchoring jump down */
.page-enquiry .enq-form__body{display:flex;flex-direction:column;gap:56px}
/* form inside a General Content page (Feedback & Complaints): same left-aligned 760px column and h2 size as the .rich-text around it */
.page-general.page-enquiry .enq{max-width:760px;margin-left:auto;margin-right:auto}
/* General Content (v2, Marker.io CAR-122): the 760px text column and the page title sit centred on the page (were flush left) */
.page-general .section--title .section-head,.page-general .rich-text{max-width:760px;margin-left:auto;margin-right:auto;width:100%}
.page-general.page-enquiry .enq-block__title{font-size:var(--fs-28);letter-spacing:-.5px;line-height:1.2}
@media (max-width:768px){body:not(.canvas-mode) .page-general.page-enquiry .enq-block__title{font-size:var(--fs-24)}}
.page-enquiry .enq-form__body[hidden]{display:none}
.page-enquiry .enq-path__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.page-enquiry .enq-path__card{position:relative;display:flex;align-items:center;gap:24px;padding:24px 56px 24px 24px;border:1.5px solid transparent;border-radius:var(--radius-sm);background:var(--white);color:var(--navy);cursor:pointer;transition:border-color .2s ease}
.page-enquiry .enq-path__card:hover{border-color:var(--navy-a20)}
.page-enquiry .enq-path__card:has(.enq-path__input:checked){border-color:var(--navy)}
.page-enquiry .enq-path__card:has(.enq-path__input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.page-enquiry .enq-path__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}
.page-enquiry .enq-path__media{flex:0 0 96px;width:96px;height:96px}
.page-enquiry .enq-path__media img{display:block;width:96px;height:96px}
.page-enquiry .enq-path__title{font-size:var(--fs-title);font-weight:600;line-height:1.3}
.page-enquiry .enq-path__mark{position:absolute;top:20px;right:20px;width:24px;height:24px;box-sizing:border-box;border:1.5px solid var(--navy);border-radius:50%;background:var(--white)}
.page-enquiry .enq-path__input:checked~.enq-path__mark{background:var(--navy);box-shadow:inset 0 0 0 4px var(--white)} /* radio dot */
.page-enquiry .enq-path__input[aria-invalid="true"]~.enq-path__mark{border-color:var(--magenta-dark);box-shadow:0 0 0 1px var(--magenta-dark)}
.page-enquiry .enq-path .enq-error{margin-top:12px}
/* wording that differs per path: <span data-path-text="referrer|participant"> inside one label */
.page-enquiry [data-path-text]{display:none}
.page-enquiry .enq-form[data-path="referrer"] [data-path-text="referrer"],.page-enquiry .enq-form[data-path="participant"] [data-path-text="participant"]{display:inline}
.page-enquiry .enq-fields>[hidden],.page-enquiry .enq-group[hidden]{display:none}
.page-enquiry .enq-living{display:grid;padding:0;gap:24px}
/* "Only an initial is required at this time." (spreadsheet: info icon; navy instead of the blue in the note, to stay in the palette) */
.page-enquiry .enq-hint--info{display:flex;align-items:flex-start;gap:8px}
.page-enquiry .enq-info-icon{flex:0 0 20px;color:var(--navy)}
/* CAPTCHA placeholder in its passed state, as in Josh's mock-up (Cloudflare Turnstile at build; widget colours are Cloudflare's) */
.page-enquiry .enq-captcha{display:flex;align-items:center;gap:12px;width:300px;max-width:100%;min-height:56px;padding:0 16px;box-sizing:border-box;border:1px solid var(--navy-a20);border-radius:var(--radius-sm);background:var(--white);font-size:var(--fs-body);line-height:1.4;color:var(--navy)}
.page-enquiry .enq-captcha__tick{position:relative;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#1e8e3e}
.page-enquiry .enq-captcha__tick::after{content:"";position:absolute;left:8px;top:5px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.page-enquiry .enq-captcha__brand{margin-left:auto;font-size:var(--fs-12);opacity:.7}
/* group note under a legend (Feedback form "Your details") */
.page-enquiry .enq-group__intro{margin:-8px 0 24px;font-size:var(--fs-body);line-height:1.5;color:var(--navy)}
/* confirmation page (Josh's mock-up p.7): pink panel, large heading, back button */
.page-enquiry .enq-thanks{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;max-width:890px;margin:0 auto;padding:56px;box-sizing:border-box;border-radius:var(--radius-sm);background:var(--pink);color:var(--navy)}
.page-enquiry .enq-thanks__title{margin:0 0 8px;font-size:var(--fs-h2);font-weight:600;line-height:1.1;letter-spacing:var(--ls-h2)}
.page-enquiry .enq-thanks p{margin:0;font-size:var(--fs-body-lg);line-height:1.5}
.page-enquiry .enq-thanks a:not(.btn){font-weight:700;text-decoration:underline;text-underline-offset:3px}
.page-enquiry .enq-thanks .btn-row{margin-top:16px}
@media (max-width:768px){body:not(.canvas-mode) .page-enquiry .enq-thanks{padding:32px 24px}body:not(.canvas-mode) .page-enquiry .enq-thanks__title{font-size:var(--fs-40);letter-spacing:-1px}}

@media (max-width:1024px){
  body:not(.canvas-mode) .page-enquiry .enq{gap:60px}
}
@media (max-width:768px){
  body:not(.canvas-mode) .page-enquiry .enq-form{gap:40px}
  body:not(.canvas-mode) .page-enquiry .enq-form__body{gap:40px}
  body:not(.canvas-mode) .page-enquiry .enq-path__cards{grid-template-columns:minmax(0,1fr);gap:12px}
  body:not(.canvas-mode) .page-enquiry .enq-path__card{gap:16px;padding:16px 52px 16px 16px}
  body:not(.canvas-mode) .page-enquiry .enq-path__media,body:not(.canvas-mode) .page-enquiry .enq-path__media img{flex-basis:64px;width:64px;height:64px}
  body:not(.canvas-mode) .page-enquiry .enq-path__mark{top:50%;margin-top:-12px}
  body:not(.canvas-mode) .page-enquiry .enq-fields,body:not(.canvas-mode) .page-enquiry .enq-checks{grid-template-columns:minmax(0,1fr)}
  body:not(.canvas-mode) .page-enquiry .enq-field,body:not(.canvas-mode) .page-enquiry .enq-field--third{grid-column:1 / -1}
  body:not(.canvas-mode) .page-enquiry .enq-field--short{max-width:none}
  body:not(.canvas-mode) .page-enquiry .enq-summary{padding:20px 24px}
  body:not(.canvas-mode) .page-enquiry .enq-success{padding:24px}
  body:not(.canvas-mode) .page-enquiry .enq-submit .btn{width:100%;justify-content:center}
}
@media (max-width:480px){
  body:not(.canvas-mode) .page-enquiry .enq-note{padding:20px}
  body:not(.canvas-mode) .page-enquiry .enq-success{padding:20px}
}

/* ---------- dropdown (SHARED select-dropdown v1): one dropdown style site-wide (Lucia, 15 Oct; Josh's enquiry mock-up) ----------
   Closed: the field (white, 1.5px navy border, down arrow). Open: the arrow turns up and the list hangs right under the field,
   same border, square top corners; no thick focus outline (Lucia: the open list and the arrow show the state). */
.dropdown{position:relative}
.dropdown__native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;opacity:0;pointer-events:none}
.dropdown__trigger{display:flex;align-items:center;width:100%;min-height:48px;margin:0;padding:12px 52px 12px 16px;box-sizing:border-box;border:1.5px solid var(--navy);border-radius:var(--radius-sm);background:var(--white) url(../assets/Icon-arrow-down-2.svg) no-repeat right 16px center / 24px 24px;font-family:inherit;font-size:var(--fs-body);line-height:1.5;color:var(--navy);text-align:left;cursor:pointer}
.dropdown__trigger:focus,.dropdown__trigger:focus-visible{outline:none;box-shadow:none}
.dropdown__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown.is-open .dropdown__trigger{border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:url(../assets/Icon-arrow-up-2.svg)}
.dropdown__trigger:disabled{cursor:default;opacity:.5}
.dropdown__list{position:absolute;top:100%;left:0;right:0;z-index:40; /* background = the trigger's (white form fields) */ margin:-1.5px 0 0;padding:8px 0;list-style:none;box-sizing:border-box;border:1.5px solid var(--navy);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--white)}
.dropdown__list:focus{outline:none}
.dropdown__list[hidden]{display:none}
.dropdown__option{padding:12px 16px;font-size:var(--fs-body);line-height:1.5;color:var(--navy);cursor:pointer}
.dropdown__option:hover,.dropdown__option.is-active{text-decoration:underline;text-underline-offset:3px}
.dropdown__option[aria-selected="true"]{font-weight:600}
.page-enquiry .dropdown__trigger[aria-invalid="true"]{border-color:var(--magenta-dark);box-shadow:0 0 0 1px var(--magenta-dark)}

/* ---------- download-band: full-width pink band, text + button left, illustration right (Figma 642:23882; Make an Enquiry referral form) ---------- */
.download-band{padding:80px 0;background:var(--pink);color:var(--navy)}
.download-band__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:132px;width:100%;max-width:1162px;margin:0 auto}
.download-band__text{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:600px}
.download-band__title{margin:0;font-size:var(--fs-28);font-weight:400;line-height:1.2;letter-spacing:-.5px}
.download-band__steps{margin:0;padding-left:0}
.download-band__steps li{font-size:var(--fs-body-lg);line-height:1.5;letter-spacing:-.5px}
.download-band .enq-link{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.download-band .btn-row{margin-top:4px}
.download-band__illustration{flex:0 0 auto;width:348px;height:auto;max-width:100%}
@media (max-width:1024px){body:not(.canvas-mode) .download-band__inner{gap:60px}body:not(.canvas-mode) .download-band__illustration{width:260px}}
@media (max-width:768px){body:not(.canvas-mode) .download-band{padding:60px 0}body:not(.canvas-mode) .download-band__inner{flex-direction:column;gap:40px}body:not(.canvas-mode) .download-band__title{font-size:var(--fs-24)}body:not(.canvas-mode) .download-band__steps li{font-size:var(--fs-body)}body:not(.canvas-mode) .download-band__illustration{width:220px;align-self:center}}

/* ---------- SDA vacancies: result count and empty state ---------- */
.homes-listing__count{margin:0 0 calc(20px - var(--space-content-cta));font-size:var(--fs-body);color:var(--navy)} /* count → grid = 20px: offsets the body's flex gap (--space-content-cta, meant for grid → button) */
.homes-listing__empty{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:40px 0}
.homes-listing__empty[hidden],.homes-grid[hidden]{display:none}
.homes-listing__empty p{margin:0;font-size:var(--fs-title);font-weight:600;color:var(--navy)}
.homes-grid>[hidden]{display:none}

/* ---------- PAGE: tac lucia ---------- */
/* ================= PAGE: tac-worksafe-support — Lucia-language refinements (scope: .page-tac on the main element) =================
   Layout glue for her existing components only. Tokens only; no new colours, no backgrounds, no borders. */

/* .split is capped at 1300px and centred inside the 1400px container, which indented the split sections ~50px
   from every other section. Let it use the full container so every heading starts on the same left edge. */
.page-tac .split{max-width:none}

/* TAC / WorkSafe explainer cards: description at the 18px body-lg size (default .cta-card__desc is 14px). */
.page-tac .cta-card__desc{font-size:var(--fs-body-lg);line-height:1.5}


/* service rows hold an intro, a chevron list and (WorkSafe discharge) a closing line + arrow link */
.page-tac .card-service__body .arrow-link{align-self:flex-start}
.page-tac .card-service__body .list-chevron{color:var(--navy)}


/* inline links inside feature titles must be distinguishable without colour (global a has no underline) */
.page-tac .card-feature__title a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* section CTA button under a service row */
.page-tac .section-head__title .hl--band{display:inline} /* "Recovery looks different for everyone.": inline (not inline-block) so the full stop after the band stays on its line */
@media (max-width:480px){body:not(.canvas-mode) .page-tac .section-head__title .hl--band{padding:0;margin:0}body:not(.canvas-mode) .page-tac .section-head__title .hl--band .hl__img{display:none}body:not(.canvas-mode) .page-tac .section-head__title .hl--band .hl__text{white-space:normal;padding:0 .08em;margin:0 -.08em;background:url(../assets/hl-band-different-for-everyone-r4.svg) no-repeat 0 .3em/100% .72em;-webkit-box-decoration-break:clone;box-decoration-break:clone}} /* phones: the phrase does not fit one line; wrap it and draw the band per line (same recipe as the hero "feels like yours.") */
.page-tac .card-service-grid + .btn-row{margin-top:48px}
@media (max-width:768px){body:not(.canvas-mode) .page-tac .card-service-grid + .btn-row{margin-top:32px}}

/* Three service rows (WorkSafe): one even row of three columns with the icon above the title, instead of 2 + 1 orphan.
   Below 1100px the rows run in a single column, icon beside the text, like the other service lists. */
@media (min-width:1101px){
  .page-tac .card-service-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
  .page-tac .card-service-grid--3>.card-service:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
  .page-tac .card-service-grid--3 .card-service__row{flex-direction:column;gap:20px}
  .page-tac .card-service-grid--3 .card-service__title{min-height:48px} /* two title lines high, so the intro text starts level in all three columns */
}
@media (max-width:1100px){
  body:not(.canvas-mode) .page-tac .card-service-grid--3{grid-template-columns:1fr}
  body:not(.canvas-mode) .page-tac .card-service-grid--3>.card-service:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
}

/* ---------- footer accordion (mobile: titles toggle their links; desktop unchanged) ---------- */
.footer-col__panel{display:block}
.footer-col__inner{display:flex;flex-direction:column;gap:15px;min-width:0}
.footer-col__toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;padding:0;margin:0;background:none;border:0;border-bottom:1px solid var(--navy-a20);font:inherit;font-size:var(--fs-14);font-weight:600;line-height:13px;letter-spacing:inherit;text-transform:uppercase;color:var(--navy);text-align:left;cursor:pointer}
.footer-col__toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.footer-col__chev{width:16px;height:16px;flex:0 0 auto;transition:transform .25s ease}
.footer-col__toggle[aria-expanded="true"] .footer-col__chev{transform:rotate(180deg)}
@media (max-width:768px){body:not(.canvas-mode) .footer-col{gap:0}
  body:not(.canvas-mode) .footer-col__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease,visibility 0s}
  body:not(.canvas-mode) .footer-col__panel[data-collapsed]{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s linear .3s}
  body:not(.canvas-mode) .footer-col__inner{overflow:hidden;min-height:0;padding-bottom:0}
  body:not(.canvas-mode) .footer-col__panel:not([data-collapsed]) .footer-col__inner{padding:4px 0 20px}}
@media (prefers-reduced-motion:reduce){.footer-col__panel,.footer-col__panel[data-collapsed],.footer-col__chev{transition:none!important}}

/* ---------- m-scroll: mobile left/right scroll for long card stacks ---------- */
/* <= 768px a stack of cards becomes one swipeable row: snap points, the next card peeking (82% wide), no scrollbar. Same track recipe as
   .scroll-carousel. Add .m-scroll to the list/grid whose direct children are the cards (.m-scroll--sm = narrower cards, for short facts).
   Desktop and tablet layouts are untouched. The SHARED m-scroll script adds keyboard focus while the row overflows. */
@media (max-width:768px){
  body:not(.canvas-mode) .m-scroll.m-scroll{position:relative;display:flex;flex-wrap:nowrap;grid-template-columns:none;align-items:stretch;gap:20px;width:auto;max-width:none;box-sizing:border-box;margin:-8px calc(-1 * var(--gutter));padding:8px var(--gutter);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body:not(.canvas-mode) .m-scroll::-webkit-scrollbar{display:none}
  body:not(.canvas-mode) .m-scroll:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
  body:not(.canvas-mode) .m-scroll>*{flex:0 0 82%;min-width:0;max-width:none;width:auto;scroll-snap-align:start}
  body:not(.canvas-mode) .m-scroll.m-scroll--sm>*{flex-basis:44%}
  /* service rows: icon above the title, so the text gets the full card width */
  body:not(.canvas-mode) .m-scroll .card-service__row{flex-direction:column;gap:16px;padding:24px 0}
  body:not(.canvas-mode) .m-scroll .card-service__icon{width:64px;height:64px}
}

/* ---------- PAGE: service pages (complex-care, supported-independent-living, community-access, hospital-discharge-support, home-nursing, forensic-disability-support, respite-support, positive-behaviour-support) ---------- */
/* inline links in body copy must be distinguishable without colour (global a has no underline) */
.page-service p a,.page-service .section-head__intro a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ---------- Accommodation finder: B1–B5 (agreement + Marker.io, 15 Oct) ---------- */
/* B1: list / map toggle */
.homes-view-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:calc(20px - var(--space-content-cta))}
.homes-view-bar .homes-listing__count{margin:0}
.homes-view{display:inline-flex;margin-left:auto;border:1.5px solid var(--navy);border-radius:var(--radius-sm);overflow:hidden}
.homes-view__btn{min-width:72px;padding:8px 16px;border:0;background:transparent;color:var(--navy);font:inherit;font-size:var(--fs-16);font-weight:600;line-height:1.2;cursor:pointer}
.homes-view__btn+.homes-view__btn{border-left:1.5px solid var(--navy)}
.homes-view__btn[aria-pressed="true"]{background:var(--navy);color:var(--light)}
.homes-view__btn:hover:not([aria-pressed="true"]){background:var(--nav-active)}
.homes-view__btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
/* B1: map of all homes (art from region-map: assets/vic-map-r4.svg, 1840 x 700 units) */
.homes-map{position:relative}
.homes-map[hidden]{display:none}
.homes-map__viewport{position:relative;height:640px;overflow:hidden;border:1px solid rgba(17,19,43,.2);border-radius:8px;background:var(--light);cursor:grab;touch-action:none}
.homes-map__viewport.is-dragging{cursor:grabbing}
.homes-map__layer{--s:1;position:absolute;left:0;top:0;width:1840px;height:700px;transform-origin:0 0}
.homes-map__img{display:block;width:1840px;height:700px;max-width:none;pointer-events:none;user-select:none}
.homes-map__pin{position:absolute;left:calc(var(--x) * 1px - 18px);top:calc(var(--y) * 1px - 17px);width:36px;height:34px;padding:0;border:0;background:none;cursor:pointer;transform:scale(calc(1 / var(--s)));transform-origin:50% 50%;opacity:.6;transition:opacity .2s ease}
.homes-map__pin img{display:block;width:36px;height:34px}
.homes-map__pin:hover,.homes-map__pin.is-active{opacity:1;z-index:2}
.homes-map__pin.is-active{transform:scale(calc(1.3 / var(--s)))}
.homes-map__pin[hidden]{display:none}
.homes-map__pin:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;opacity:1}
.homes-map__zoom{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;border:1px solid rgba(17,19,43,.15);border-radius:var(--radius-sm);background:var(--white);overflow:hidden}
.homes-map__zoom-btn{width:40px;height:40px;border:0;background:none;color:var(--navy);font:inherit;font-size:22px/* TBC: icon glyph size */;font-weight:600;line-height:1;cursor:pointer}
.homes-map__zoom-btn+.homes-map__zoom-btn{border-top:1px solid rgba(17,19,43,.15)}
.homes-map__zoom-btn:hover{background:var(--nav-active)}
.homes-map__zoom-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.homes-map__card{position:absolute;left:16px;top:16px;display:flex;gap:16px;width:400px;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px;background:var(--white);border:1px solid rgba(17,19,43,.15);border-radius:8px;color:var(--navy)}
.homes-map__card:empty{display:none}
.homes-map__card-img{flex:0 0 140px;width:140px;height:110px;object-fit:cover;border-radius:var(--radius-sm)}
.homes-map__card-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.homes-map__tag{padding:6px 12px}
.homes-map__name{margin:0;font-size:var(--fs-title);font-weight:600;line-height:1.2;letter-spacing:-.3px}
.homes-map__meta{margin:0;font-size:var(--fs-small);line-height:1.4}
@media (max-width:768px){
  body:not(.canvas-mode) .homes-map__viewport{height:440px}
  body:not(.canvas-mode) .homes-map__card{position:static;width:auto;max-width:none;margin-top:12px}
  body:not(.canvas-mode) .homes-map__card-img{flex-basis:96px;width:96px;height:96px}
}

/* ---------- Notices that must be noticed (Marker.io CAR-110 / 112, v2): SDA funding notice on property pages and the housing note in the enquiry form.
   Pink tint + magenta-dark left rule + info icon (same glyph as the form's info hint). ---------- */
.property-detail__notice,.page-enquiry .enq-note{position:relative;padding:24px 24px 24px 64px;border:0;border-left:4px solid var(--magenta-dark);border-radius:var(--radius-sm);background:rgba(255,130,190,.16)}
.property-detail__notice::before,.page-enquiry .enq-note::before{content:"";position:absolute;left:24px;top:24px;width:24px;height:24px;background:var(--magenta-dark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18A9 9 0 0 1 10 1Zm-1 7.5v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-2 0Zm1-4a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18A9 9 0 0 1 10 1Zm-1 7.5v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-2 0Zm1-4a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:768px){body:not(.canvas-mode) .property-detail__notice,body:not(.canvas-mode) .page-enquiry .enq-note{padding:20px 20px 20px 56px}body:not(.canvas-mode) .property-detail__notice::before,body:not(.canvas-mode) .page-enquiry .enq-note::before{left:20px;top:20px}}

/* ---------- benefit-grid (Careers "We care about the people who care", Marker.io CAR-139, v2): one tile per benefit ---------- */
.benefit-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.benefit-tile{display:flex;flex-direction:column;gap:20px;padding:32px 24px;border-radius:var(--radius-sm);background:var(--white);font-size:var(--fs-body);line-height:1.5;color:var(--navy)}
.benefit-tile__icon{display:block;width:32px;height:32px}
.benefit-note{margin:24px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--navy);text-align:center}

/* ---------- footer v2 (Marker.io CAR-102 / 103 / 104) ---------- */
.footer-col--links{display:flex;flex-direction:column;gap:20px}
.footer-col--links .footer-col__main{padding-top:0;font-size:var(--fs-14);font-weight:600;line-height:1.3;text-transform:uppercase;color:var(--navy)}
.footer-ack-item{flex:1 1 0;min-width:0;display:flex;align-items:flex-start;gap:16px}
.footer-ack-item p{margin:0;max-width:440px;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--black)}
.footer-badges{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:32px 60px;margin-top:40px}
.footer-badges__group{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:768px){body:not(.canvas-mode) .footer-ack-item{flex-direction:column;gap:12px}body:not(.canvas-mode) .footer-badges{flex-direction:column}body:not(.canvas-mode) .footer-col.footer-col--links{gap:20px;padding:16px 0}}

/* ---------- svc-layout: service page with a sidebar of in-page links (v2 SIL sample, Josh 21 Oct, CAR-142/156) ----------
   Main content first in the source; the sidebar (short list of links + CTA) sits on the left from 1025px and sticks under the header.
   Each .svc-block = one section of the agreed order: description, what to expect, why choose, who we support, team, testimonials. */
.svc-layout{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"nav main";column-gap:80px;align-items:start}
.svc-layout__main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:100px}
.svc-layout__nav{grid-area:nav;position:sticky;top:calc(var(--site-header-h,0px) + 40px)}
.svc-layout__nav-title{margin:0 0 16px;font-size:var(--fs-14);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.svc-layout__nav ul{list-style:none;margin:0;padding:0;border-left:1.5px solid rgba(17,19,43,.2)}
.svc-layout__nav li a{display:block;margin-left:-1.5px;padding:10px 0 10px 20px;border-left:3px solid transparent;font-size:var(--fs-16);line-height:1.4;color:var(--navy);transition:border-color .2s ease}
.svc-layout__nav li a:hover{border-left-color:var(--pink)}
.svc-layout__nav li a[aria-current="true"]{border-left-color:var(--magenta);font-weight:600}
.svc-layout__nav .btn{margin-top:32px}
.svc-block{display:flex;flex-direction:column;gap:24px;min-width:0}
.svc-block>.section-head__title{margin:0;text-align:left}
.svc-block__subtitle{margin:24px 0 0;font-size:var(--fs-24);font-weight:600;letter-spacing:-.5px;line-height:1.3;color:var(--navy)}
.svc-block .rich-text{max-width:760px} /* readable line length (James: avoid full-width body copy) */
.svc-block .cta-card-grid,.svc-block .section-head{margin:0;max-width:none}
.svc-block .media-split{margin:0}
.svc-block .stories-inner{padding:0;max-width:none;margin-top:32px} /* room for the quote mark that sits over the frame top */
.svc-block .faq-list{width:100%;margin:0} /* FAQs in the sidebar layout fill the content column */
.svc-block .quote-carousel__frame{max-width:none}
/* Lucia 21 Oct: inside the sidebar layout the column is narrow, so the quote frame always grows with its text (the ≤1200 fluid frame),
   with at least 40px above and below the text at every width */
.svc-block .quote-carousel{--qc-mark-h:67px}
.svc-block .quote-carousel__frame{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;box-sizing:border-box;padding:60px 48px;background:var(--quote-blob-stretch) no-repeat center/100% 100%}
.svc-block .quote-carousel__bg{display:none}
.svc-block .quote-carousel__content{position:static;inset:auto;width:100%;padding:0}
.svc-block .quote-carousel__attr{position:static;margin:0}
.svc-block .quote-carousel__mark{position:absolute;z-index:2;transform:none}
.svc-block .quote-carousel__mark--tl{left:48px;top:calc(var(--qc-mark-h) / -2);bottom:auto}
.svc-block .quote-carousel__mark--br{right:48px;top:auto;bottom:calc(var(--qc-mark-h) / -2)}
@media (max-width:768px){body:not(.canvas-mode) .svc-block .quote-carousel{--qc-mark-h:48px}body:not(.canvas-mode) .svc-block .quote-carousel__frame{padding:40px 24px}}
@media (max-width:1024px){
  body:not(.canvas-mode) .svc-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "main";row-gap:48px}
  body:not(.canvas-mode) .svc-layout__nav{position:static}
  body:not(.canvas-mode) .svc-layout__nav ul{display:flex;flex-wrap:wrap;gap:8px;border-left:0}
  body:not(.canvas-mode) .svc-layout__nav li a{margin:0;padding:8px 14px;border:1.5px solid var(--navy);border-radius:999px;font-size:var(--fs-14)}
  body:not(.canvas-mode) .svc-layout__nav li a[aria-current="true"]{border-color:var(--magenta)}
  body:not(.canvas-mode) .svc-layout__nav .btn{display:none}
  body:not(.canvas-mode) .svc-layout__main{gap:80px}
}

/* ---------- Contact v2 (client "Contact us page 14 Oct 2026" doc, Josh 21 Oct: CAR-123/124/95) ---------- */
.cta-card-grid--4{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))} /* four contact channels in one row */
@media (max-width:1200px){body:not(.canvas-mode) .cta-card-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body:not(.canvas-mode) .cta-card-grid--4{grid-template-columns:minmax(0,1fr)}}
.contact-where{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:60px;align-items:start} /* offices and hours beside the map */
.contact-where__text{display:flex;flex-direction:column;gap:24px;font-size:var(--fs-body-lg);line-height:1.5;color:var(--navy)}
.contact-where__text>*{margin:0}
.contact-where__text .section-head__title{text-align:left}
.contact-details--stack{grid-template-columns:minmax(0,1fr);max-width:none;margin:8px 0 0}
.contact-details--stack .contact-details__value a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1024px){
  body:not(.canvas-mode) .contact-where{grid-template-columns:minmax(0,1fr);row-gap:40px}
}
/* office-map: all of Victoria in pink with the office pins and labels (Josh's reference image, CAR-66 / CAR-211). The art and state names
   scale with the map (SVG, 1000 x 802 units); the office labels are HTML, anchored at the leader ends (--x/--y in % of the map) */
.office-map{position:relative;margin:0;container-type:inline-size;border:1px solid var(--navy-a20);border-radius:8px;overflow:hidden;background:var(--white)}
.office-map__art{display:block;width:100%;height:auto}
.office-map__state{font-family:inherit;font-size:28px;font-weight:600;letter-spacing:.5px;fill:var(--tbc-grey-2)}
.office-map__state--vic{font-size:64px;font-weight:700;letter-spacing:0;fill:var(--magenta-dark)}
.office-map__state--sea{letter-spacing:0;font-weight:500}
.office-map__leader{stroke:var(--navy);stroke-width:2.5}
.office-map__label{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);padding:.35em .7em;background:var(--white);border:1.5px solid var(--navy);border-radius:var(--radius-sm);color:var(--navy);font-size:clamp(12px, 3.2cqi, 18px);font-weight:600;line-height:1.2;white-space:nowrap}
.office-map__label--ne{transform:translateY(-100%)} /* bottom-left corner on the leader end */
.office-map__label--sw{transform:translateX(-100%)} /* top-right corner on the leader end */

/* heading-num: numbered section headings (Feedback and complaints, CAR-121: "like in the draft, sections numbered") */
.heading-num{display:flex;align-items:baseline;gap:8px}
.heading-num__n{flex:0 0 auto;font-weight:inherit;color:inherit} /* Lucia 21 Oct: same colour and weight as the heading */
.heading-num__n::after{content:"."}

/* footer-base (Figma 481:17234, Lucia 21 Oct): acknowledgement left (three flags in one row, one line of text), logos right, in one row */
.footer-base{display:flex;align-items:flex-start;justify-content:space-between;gap:40px 60px;margin-top:0}
.footer-base .footer-ack{flex:0 1 571px;flex-direction:column;justify-content:flex-start;gap:24px}
.footer-base .footer-ack p{margin:0;font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--black)}
.footer-base .footer-ack-item{flex-direction:column;gap:12px} /* CAR-103 (Lucia 21 Oct): flags above their text at every width */
.footer-base .footer-ack-item .footer-flags{flex:0 0 auto}
.footer-base .footer-ack-item p{max-width:none}
.footer-base .footer-badges{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end;gap:40px;margin-top:0}
.footer-base .footer-badges__group{gap:16px}
.footer-logos .partner-logo.partner-logo--plain{width:100px;padding:0;background:none;border:0;border-radius:0} /* BSI mark sits on the footer, no circle */
.footer-logos .partner-logo--plain img{width:100px;max-height:none}
@media (max-width:1280px){body:not(.canvas-mode) .footer-base{flex-direction:column}body:not(.canvas-mode) .footer-base .footer-ack{flex-basis:auto;max-width:640px}body:not(.canvas-mode) .footer-base .footer-badges{flex-wrap:wrap;justify-content:flex-start}}
@media (max-width:768px){body:not(.canvas-mode) .footer-base .footer-badges{flex-direction:column}}

/* ---------- section-tabs: in-page section links that stick under the header (v2 trial on PBS, Lucia 21 Oct; idea from mariamontessori.org/about-us)
   Full-width row under the banner, sticky below the site header; pills, the section in view highlighted; scrolls sideways when it does not fit (phones). */
.section-tabs{position:sticky;top:calc(var(--site-header-h,0px) - 1px);z-index:80;background:var(--bg);border-bottom:1px solid rgba(17,19,43,.15)}
.section-tabs__list{list-style:none;max-width:1400px;margin:0 auto;padding:12px var(--gutter);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.section-tabs__list::-webkit-scrollbar{display:none}
.section-tabs__list>li{flex:0 0 auto}
.section-tabs__link{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;font-size:var(--fs-16);line-height:1.3;color:var(--navy);white-space:nowrap;transition:background-color .2s ease}
.section-tabs__link:hover{background:var(--nav-active)}
.section-tabs__link[aria-current="true"]{background:var(--white)} /* active pill: white, regular weight (Lucia 21 Oct) */
.section-tabs__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
body:has(.section-tabs) main section[id]{scroll-margin-top:calc(var(--site-header-h,0px) + 64px)} /* anchors land below header + tab row */
@media (max-width:768px){body:not(.canvas-mode) .section-tabs__list{padding:8px var(--gutter);gap:4px}body:not(.canvas-mode) .section-tabs__link{min-height:36px;padding:6px 12px;font-size:var(--fs-14)}}

/* enq-reveal: "Submit your feedback online" button that opens the feedback form (CAR-129) */
.enq-reveal{margin-top:8px}

/* org-cards: external complaints bodies (Feedback and complaints, Further options) — one card per body:
   name + one line on the left, labelled contact details on the right; stacked on phones (Lucia 21 Oct) */
.rich-text .org-cards{display:flex;flex-direction:column;gap:16px}
.org-card{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;padding:24px 28px;border-radius:var(--radius-sm);background:var(--white)}
.org-card__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.rich-text .org-card__title{margin:0;font-size:var(--fs-18);font-weight:600;line-height:1.35;letter-spacing:-.2px}
.rich-text .org-card__text{margin:0;font-size:var(--fs-16);line-height:1.5}
.org-card__contact{display:flex;flex-direction:column;gap:12px;margin:0;padding-left:24px;border-left:1px solid rgba(17,19,43,.15)}
.org-card__row{display:flex;flex-direction:column;gap:2px}
.org-card__row dt{font-size:var(--fs-14);line-height:1.4;color:var(--navy);opacity:.7}
.org-card__row dd{margin:0;font-size:var(--fs-16);font-weight:600;line-height:1.4}
@media (max-width:768px){body:not(.canvas-mode) .org-card{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}body:not(.canvas-mode) .org-card__contact{padding:16px 0 0;border-left:0;border-top:1px solid rgba(17,19,43,.15)}}

/* services--no-icons: homepage "Support for different needs" without the service icons (client request via James, 22 Oct; icons kept in the markup) */
.services--no-icons .card-service__icon{display:none}
@media (max-width:1024px){body:not(.canvas-mode) .services--no-icons .card-service__row{grid-template-columns:1fr auto;column-gap:20px}body:not(.canvas-mode) .services--no-icons .card-service__title{grid-column:1}body:not(.canvas-mode) .services--no-icons .card-service__desc{grid-column:1}body:not(.canvas-mode) .services--no-icons .card-service__arrow{grid-column:2}} /* arrow on the title row, text in the left column (CAR-218) */

/* SIL final copy (Josh 27 Oct): audit figures left-aligned in the sidebar layout column; small note under the Homes link */
.stat--start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} /* Lucia 28 Oct: spread edge to edge — first pair on the left, middle in the centre, last on the right */
.stat--start .stat__item:first-child{justify-self:start}
.stat--start .stat__item:nth-child(2){justify-self:center}
.stat--start .stat__item:last-child{justify-self:end}
.stat--start .stat__item{align-items:center;text-align:center} /* number centred over its label */
.stat--start+.rich-text{margin-bottom:36px} /* 60px between the audit line and the cards below (24px block gap + 36) */
.svc-note{font-size:var(--fs-small);color:var(--navy)}
@media (max-width:768px){body:not(.canvas-mode) .stat--start{display:grid;gap:16px}body:not(.canvas-mode) .stat--start+.rich-text{margin-bottom:16px}body:not(.canvas-mode) .card-feature-grid--wrap.m-scroll>.card-feature{flex-basis:82%}} /* swipe row keeps the usual 82% cards */

/* Marker.io CAR-187 (Josh 26 Oct): the videos follow the staff quotes closely (80px from the carousel arrows to the heading, was 160) */
body main>.stories[data-bg]+.section.section--follows-stories[data-bg]{padding-top:0} /* specific enough to beat the same-background gap rule (it never applied before, Lucia 28 Oct) */

/* Marker.io CAR-215 (Josh 27 Oct): a short caption under a logo circle (NDIS "Registered provider"); rows spaced so it never touches the circle below */
.logo-grid--captioned{row-gap:48px}
.logo-grid--captioned li{position:relative}
.logo-grid__caption{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:var(--fs-14);font-weight:600;line-height:1.3;color:var(--navy)}
@media (max-width:768px){body:not(.canvas-mode) .logo-grid--captioned:not(.marquee__set){row-gap:48px}}

/* Marker.io CAR-214 (Josh 27 Oct): footer column titles are links; the repeated "All …" link in each list shows on phones only,
   where the title becomes the open / close button. NDIS / ABN sit under the social icons. */
.footer-col h3 .footer-col__title-link{color:inherit;font:inherit;line-height:inherit;text-transform:inherit;padding:0}
.footer-col h3 .footer-col__title-link::before{inset:-6px 0}
.footer-col h3 .footer-col__title-link:hover{text-decoration:underline}
.footer-col__overview{display:none}
.footer-col__inner>.footer-col__overview:first-child+a{padding-top:8px}
.footer-connect .footer-reg-id{margin:0;font-size:var(--fs-small);font-weight:400;line-height:21px;color:var(--navy)}
@media (max-width:768px){
  body:not(.canvas-mode) .footer-col__overview{display:block}
  body:not(.canvas-mode) .footer-col__inner>.footer-col__overview:first-child+a{padding-top:0}
}

/* Marker.io CAR-202 (Josh 27 Oct): the Previous / Next arrows of the card rows (homes, news, team) were hard to see; same arrow, drawn larger (36 → 44px) */
.news-arrows .icon-btn--sm{width:44px;height:42px}
.news-arrows .icon-btn--sm .icon-btn__img{width:44px;height:42px}


/* SIL Next steps (Lucia 28 Oct): two call-to-action cards; the links sit on the same line at the bottom of both cards */
.cta-card-grid--actions .cta-card .arrow-link{margin-top:auto}


/* Lucia 28 Oct (CAR-161): homepage hero underlines (a different one per slide) keep one thickness whatever the word length */
.hero .hl--under{--hl-height:.24em;--hl-top:auto;--hl-mt:0;--hl-bottom:-.08em}

/* Lucia 28 Oct: underline highlights in the pink centred heroes keep one thickness (as the homepage hero) */
.hero-centred .hl--under{--hl-height:.24em;--hl-top:auto;--hl-mt:0;--hl-bottom:-.08em}

/* Lucia 28 Oct: top bar "About Us" — one hover / open background around the link and its chevron together (they were two separate boxes) */
.tb-nav{border-radius:var(--radius-sm)}
.tb-nav:hover,.tb-nav:has(.tb-chev[aria-expanded="true"]){background:var(--nav-active)}
.tb-nav>.tb-item:hover,.tb-nav>.tb-chev:hover{background:none}

/* Lucia 28 Oct: careers heroes — the breadcrumb sits on the pink, at the top like the pink centred page heroes (About SDA, News) */
.hero-centred>.breadcrumb{width:calc(100% - 2 * var(--gutter));max-width:calc(1400px - 2 * var(--gutter));margin:-68px auto 88px;padding:0;text-align:left} /* same position as .page-hero--centered: 12px from the top, 88px above the title */
@media (max-width:768px){body:not(.canvas-mode) .hero-centred>.breadcrumb{margin-top:-48px}} /* hero padding is 60px here: crumb stays 12px from the top */

/* Marker.io CAR-186 (Josh 26 Oct): CareChoice value icons (from the current website) on the Careers values cards */
.card-highlight__icon{display:block;width:56px;height:56px;margin-bottom:4px}
/* Lucia 28 Oct: the icon sits beside the title and text (left column, centred on them), not above */
.card-highlight:has(>.card-highlight__icon){display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:24px;row-gap:12px;align-items:start}
.card-highlight>.card-highlight__icon{grid-row:1 / span 2;align-self:start;margin:0} /* top-aligned with the title (Lucia 28 Oct) */
.card-highlight__icon img{display:block;width:100%;height:100%} /* animated icon (as on the current site); the still one when reduced motion is on */
.card-highlight:has(>.card-highlight__icon)>:not(.card-highlight__icon){grid-column:2}


/* Forms, 28 Oct (ported from the WordPress theme). Short answers (Title, Postcode) on a row of their own, as wide as First name (Marker.io CAR-207, CAR-209). */
.page-enquiry .enq-field--narrow { grid-column: 1 / -1; max-width: calc(50% - 12px); }
@media (max-width: 768px) { body:not(.canvas-mode) .page-enquiry .enq-field--narrow { max-width: none; } }
/* Conditional notes that set their own display (the attendant care note is a flex row). */
.page-enquiry [data-show-when][hidden] { display: none; }
/* Wording that names the plan picked: <span data-plan-text="NDIS|TAC|WorkSafe|">, toggled by the form script. */
.page-enquiry [data-plan-text][hidden] { display: none; }
.page-enquiry .enq-subgroup > .enq-hint--info { margin-top: 16px; }

/* Marker.io CAR-216 (Josh 28 Oct): the footer filled the whole phone screen. ≤768: tighter section gaps (40 → 24), flags beside their text,
   partner logos 99 → 60px so all five sit in one row, smaller accreditation mark, less top/bottom padding */
@media (max-width:768px){
  body:not(.canvas-mode) .site-footer{padding:40px 0 24px}
  body:not(.canvas-mode) .footer-inner,body:not(.canvas-mode) .footer-top,body:not(.canvas-mode) .footer-main,body:not(.canvas-mode) .footer-base{gap:24px}
  body:not(.canvas-mode) .footer-main>.footer-connect{gap:16px}
  body:not(.canvas-mode) .footer-base .footer-ack{gap:16px}
  body:not(.canvas-mode) .footer-base .footer-ack-item{flex-direction:row;align-items:flex-start;gap:12px}
  body:not(.canvas-mode) .footer-flags{gap:6px}
  body:not(.canvas-mode) .footer-base .footer-ack-item .footer-flags{flex:0 0 66px} /* both texts start at the same x, whatever the number of flags */
  body:not(.canvas-mode) .footer-flags img{width:30px;height:20px}
  body:not(.canvas-mode) .footer-base .footer-badges{gap:16px}
  body:not(.canvas-mode) .footer-base .footer-badges__group{gap:8px}
  body:not(.canvas-mode) .footer-logos{gap:8px}
  body:not(.canvas-mode) .footer-logos a,body:not(.canvas-mode) .footer-logos .partner-logo{width:60px;height:60px;padding:6px}
  body:not(.canvas-mode) .footer-logos img{max-height:46px}
  body:not(.canvas-mode) .footer-logos .partner-logo.partner-logo--plain{width:64px;height:auto;padding:0}
  body:not(.canvas-mode) .footer-logos .partner-logo--plain img{width:64px}
}

/* to-top (SHARED to-top, Marker.io CAR-217): round back-to-top button on phones, the site's circled arrow turned up. bottom:88px keeps it clear
   of the prototype's "Canvas view" pill; on the live site it can sit at 24px */
.to-top{display:none}
@media (max-width:768px){
  body:not(.canvas-mode) .to-top{position:fixed;right:16px;bottom:88px;z-index:95;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--bg);box-shadow:0 4px 12px var(--navy-a20);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
  body:not(.canvas-mode) .to-top.is-shown{opacity:1;visibility:visible}
  body:not(.canvas-mode) .to-top img{width:36px;height:34px;transform:rotate(-90deg)}
  body:not(.canvas-mode) .to-top:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
}

/* Heading line height +10–20% for H2–H6 (Lucia 28 Oct: more air, easier to read; H1 / hero display unchanged).
   Large section titles 1 → 1.15, small H2s 1.1 / 1.2 → 1.25 / 1.35, card and block titles 1.2 → 1.35 and 1.3 → 1.45.
   :root body … outranks the per-breakpoint rules (body:not(.canvas-mode) …) so the new values hold at every width. */
:root{--lh-h2:1.15;--lh-display:1.15} /* H1 / hero display too (Lucia 28 Oct, after H2–H6): 1 → 1.15 */
:root body :is(h2,h3,h4,h5,h6):is(.section-head__title,.promo-split__title){line-height:1.15}
:root body .media-split--portrait :is(h2,h3).section-head__title{line-height:1.35}
:root body :is(h2,h3).person-dialog__name{line-height:1.25}
:root body :is(h2,h3,h4):is(.property-detail__title,.card-persona__title,.card-service__title,.role-panel__title,.card-home__name){line-height:1.35}
:root body :is(h2,h3,h4):is(.cta-card__title,.enq-block__title,.card-feature__title,.card-highlight__title,.card-numbered__title,.card-person__name,.card-video__title,.enq-summary__title,.svc-block__subtitle){line-height:1.45}
:root body .rich-text>h2{line-height:1.35}
:root body .rich-text>h3{line-height:1.45}
:root body .rich-text>:is(h4,h5,h6){line-height:1.55}

/* Breadcrumb on one line (Lucia 28 Oct): never wraps; the current page name shortens with "…" when the trail is wider than the screen.
   Earlier crumbs keep their full text; they may shrink too only on very narrow screens. */
.breadcrumb ol{flex-wrap:nowrap;min-width:0;overflow:hidden}
.breadcrumb li{flex:0 1 auto;min-width:0;white-space:nowrap}
.breadcrumb li>a,.breadcrumb li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breadcrumb li:not(:last-child){flex-shrink:0}
@media (max-width:360px){body:not(.canvas-mode) .breadcrumb li:not(:last-child){flex-shrink:1}}

/* Partner logos spread across the full content width whenever the footer base stacks (≤1280: tablet and phone; Lucia 28 Oct) */
@media (max-width:1280px){
  body:not(.canvas-mode) .footer-base .footer-badges{align-self:stretch;width:100%}
  body:not(.canvas-mode) .footer-base .footer-badges__group:has(.footer-logos>:nth-child(2)){align-self:stretch;flex:1 1 auto}
  body:not(.canvas-mode) .footer-logos:has(>:nth-child(2)){width:100%;flex-wrap:nowrap;justify-content:flex-start;gap:12px} /* logos grow to fill the row, 12px apart (Lucia 28 Oct) */
  body:not(.canvas-mode) .footer-logos:has(>:nth-child(2))>.partner-logo{flex:1 1 0;width:auto;height:auto;aspect-ratio:1;min-width:0;padding:4px}
  body:not(.canvas-mode) .footer-logos:has(>:nth-child(2))>.partner-logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain} /* logo art fills its circle */
  /* BSI mark: takes one of the five logo slots above (width = (row − 4 × 12px) / 5), height from its own ratio (Lucia 28 Oct) */
  body:not(.canvas-mode) .footer-base .footer-badges__group:has(.partner-logo--plain){flex:1 1 100%;align-self:stretch}
  body:not(.canvas-mode) .footer-base .footer-badges__group:has(.partner-logo--plain) .footer-logos{width:100%}
  body:not(.canvas-mode) .footer-logos .partner-logo.partner-logo--plain{width:calc((100% - 48px) / 5);height:auto}
  body:not(.canvas-mode) .footer-logos .partner-logo--plain img{width:100%;height:auto;max-height:none}
}