/* ==========================================================================
   0. Variables & Reset
   ========================================================================== */

:root {
  /* Core brand colors, used throughout the site */
  --color-background-neutral: #FAF4F2;
  --color-background-darker: #F5EDEA;
  --color-logo-primary: #582C44;
  --color-logo-secondary: #B0808E;
  --color-logo-secondary-dark: #8D5868;  /* darker secondary for small text, passes WCAG AA */
  --color-logo-grey-text: #776E84;
  --color-logo-grey-text-dark: #6E667A;   /* darker grey for small text, passes WCAG AA */
  --color-graphic-embellishment-1: #EADFDD;
  --color-graphic-embellishment-2: #EED6D3; /* care cards, fees table */

  /* ------------------------------------------------------------------------
     Wix-style desktop proportional scaling
     ------------------------------------------------------------------------
     The desktop design is treated as a 1920px coordinate system.
     --desktop-width is capped at 1920px, so designs do not grow beyond
     their native size on wider monitors.
     --u is ONE DESIGN PIXEL, as a length: 1px at 1920px wide, 0.75px at 1440px,
     0.6667px at 1280px, etc. Every spacing/sizing value below is written
     calc(N * var(--u)), where N is a plain number of design pixels, and so
     scales down smoothly as the window narrows.
     (--u divides a length by a plain number, which works in every browser.
     The older way, dividing a length by a length, only works in very recent
     Chrome/Edge/Safari and not in Firefox.)

     IMPORTANT: every variable that gets multiplied by --u or --ts-u is a plain
     number of design pixels with NO unit (--gap-1-a: 50, not 50px). That includes
     values set inline in the HTML, e.g. style="--line-x: 120", not "120px".
     Font sizes that used to be in rem are now design pixels too (1rem = 16).

     TEXT (hybrid model): font sizes use --t instead of --u. --t is --u blended with
     the browser's own text size (see --text-fixed-share below), so text grows when
     people zoom in or raise their browser's default text size, while layout
     (spacing, boxes, images) keeps scaling with --u exactly as before.
     At 1920px wide and above every text size equals its design size. At 1024px
     and below --t is just --u, so tablet and phone layouts are unchanged.

     The mobile/tablet layout takes over at 1024px and below. --u still runs
     from 0.4px (768px and below) up to 0.53px (1024px) there, but that layout uses
     fixed px for text and most spacing, so only the few rules that still use
     --u grow slightly on tablets.
  */
  --design-px: 1920;                                   /* design canvas width, unitless */
  --design-width: calc(var(--design-px) * 1px);        /* the same width as a length */
  --desktop-width: clamp(768px, 100vw, var(--design-width));
  --u: calc(var(--desktop-width) / var(--design-px));  /* ONE design pixel, as a length (length / number works in every browser) */

  /* TEXT SIZE DIAL (hybrid text model, see the comment at the top of :root).
     0 = text scales only with the window width (old behaviour: browser zoom has no effect on text).
     1 = text never scales with the window width (always full size; layout boxes still shrink).
     0.25 means a quarter of every text size follows the browser's own text size (so it grows on zoom),
     and three quarters still follows the window width. Text is exactly its design size at 1920px wide
     (and wider) whatever this is set to. Raise it for more zoom effect, lower it to stay closer to the
     old proportional look at 1280-1440px. */
  --text-fixed-share: 0.25;

  /* Same dial for LARGE display text (the h1, the italic "trust line" statements, hero lede, step numbers,
     phone number). Large text is already easy to read and sits in fixed-size boxes, so it stays purely
     proportional (0 = exactly as before). A small value such as 0.05 gives it a little zoom effect, but
     check the h1 and the trust lines for extra line breaks at 1025-1100px if you raise it. */
  --text-fixed-share-display: 0;

  /* ONE TEXT DESIGN PIXEL, as a length. Same idea as --u but blended with the browser's text size:
     1px at 1920px wide (and wider), smaller on narrower windows, never smaller than the fixed share.
     Font sizes are written calc(N * var(--t)), where N = design pixels. 0.0625rem = 1/16 of a rem. */
  --t: calc(var(--text-fixed-share) * 0.0625rem + (1 - var(--text-fixed-share)) * var(--u));

  /* Same, for large display text (uses the display share). */
  --t-display: calc(var(--text-fixed-share-display) * 0.0625rem + (1 - var(--text-fixed-share-display)) * var(--u));

  /* TABLET TEXT SCALE (tablet and phone layout, 1024px wide and below).
     The four --size-font-*-m values below are the tablet/phone text sizes. They are fluid:
       - 640px wide and narrower (phones): exactly the phone size (25px, 22px, 16px, 14px),
       - growing smoothly with the window width to 8/7 of that size at 1024px wide (body text 14px -> 16px),
       - with a rem part, so they also grow with the browser's text size and with zoom.
     They are also the minimum size for desktop text (the max(...) floors on h2, p and list items), so
     desktop text is never smaller than the tablet text and there is no dip at the 1024px breakpoint.
     The one exception is h3, whose desktop minimum is its own value, --size-font-h3-min (see below).
     To change a size: P = size in px at 640px and below, Q = size in px at 1024px:
        vw part = (Q - P) / 3.84      rem part = (P - 6.4 * vw part) / 16
        clamp(P/16 rem, rem part + vw part vw, Q/16 rem)
     Example, body text 14px -> 16px: vw part = 0.52083, rem part = 0.66667, giving the p expression below. */

  /* Default h1 size. Desktop: unitless design px, scaled by --t; tablet/phone: see TABLET TEXT SCALE above. */
  --size-font-h1: 75.2;
  --size-font-h1-m: clamp(1.5625rem, 0.625rem + 2.34375vw, 2.125rem);

  /* Default h2 size. Desktop: unitless design px, scaled by --t; tablet/phone: see TABLET TEXT SCALE above. */
  --size-font-h2: 40;
  --size-font-h2-m: clamp(1.375rem, 1.04762rem + 0.81845vw, 1.57143rem);

  /* Default h3 size. Desktop: unitless design px, scaled by --t; tablet/phone: see TABLET TEXT SCALE above. */
  --size-font-h3: 24;
  --size-font-h3-m: clamp(1rem, 0.7619rem + 0.59524vw, 1.14286rem);
  --size-font-h3-min: 1rem;   /* DESKTOP minimum for h3 (the phone size). Deliberately NOT the tablet size above, so desktop h3 stays as it was; h3 therefore shrinks slightly when you cross 1024px. */

  /* Default paragraph size. Desktop: unitless design px, scaled by --t; tablet/phone: see TABLET TEXT SCALE above. */
  --size-font-p: 24;
  --size-font-p-m: clamp(0.875rem, 0.66667rem + 0.52083vw, 1rem);

  /* Small text, on the same tablet scale as the sizes above (phone size up to 640px wide, x8/7 at 1024px).
     Like p, h2 and li, each is also the minimum size for the same text on desktop, so nothing shrinks at 1024px. */
  /* One design pixel of trust-line (italic statement) text on tablet/phone: 0.4px up to 640px wide, 0.5333px at 1024px. */
  --trust-unit-m: clamp(0.025rem, 0.01111rem + 0.03472vw, 0.03333rem);     
  --size-font-label-m: clamp(0.8125rem, 0.61905rem + 0.48363vw, 0.92857rem);     /* eyebrow labels: 13px -> 14.9px */
  --size-font-caption-m: clamp(0.75rem, 0.57143rem + 0.44643vw, 0.85714rem);   /* logo captions, testimonial role: 12px -> 13.7px */
  --size-font-small-m: clamp(0.625rem, 0.47619rem + 0.37202vw, 0.71429rem);     /* footer tagline and legal: 10px -> 11.4px */

  /* Nominal width of the centred text column on non-home pages, on the 1920px design canvas (scaled by --u) */
  --nominal-content-width: 1300;

  /* Max width of the single text column used by the mobile/tablet layout (1024px and below).
     Header, content blocks, hero, divider and home sections all share it, so they line up. */
  --m-col-w: 640px;

  --m-pad-page: 28px;   /* mobile left/right inset, shared by header, content, divider */

  /* Button border thickness: 1.5 design px at 1920px wide, never thinner than 1px.
     Change 1.5 to make all button borders thicker or thinner. */
  --btn-border-w: max(1px, calc(1.5 * var(--u)));

  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type1
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type1) v5.png"

     Structure vs. color are two separate, independently-combinable classes:
       - .block-group--type1 carries the STRUCTURE (padding/gap behavior).
         A future structurally-different block (e.g. an FAQ group) gets its
         own .block-group--type2, with its own --gap-2-x variable set below,
         entirely independent of this one.
       - .block-group--pale / .block-group--dark carry ONLY the background
         color, and are reused across every structural type (type1, type2,
         type3, ...) rather than being redefined per type. Apply both
         classes together on the same element, e.g.
         class="block-group--type1 block-group--pale".

     Naming convention: --gap-1-x means "belongs to block-group--type1's
     structure, controls gap X (per the spacing diagram)". Each variable
     drives exactly one rendered gap in this structural type only — no two
     gaps share a variable or a property, and nothing here affects any
     other block-group type added later (those get their own --gap-N-x
     set, scoped to their own selectors, entirely independent of these).
     Since color is now a separate, reusable class, gap values apply
     identically to the pale and dark variants of type1 — there is no
     "gap-1-2" concept anymore, only gap-1 (shared by both colors of
     type1) and, later, gap-2 (shared by both colors of type2), etc.
     NOTE: this system is not used on the home page — see the separate
     .home-stripe-1 / .home-stripe-2 classes under the HOME PAGE section
     below, which are fully independent.
  */
  --gap-1-a: 50;  /* A: top of the group -> first h2 */
  --gap-1-b: 24;  /* B: h2 -> p */
  --gap-1-c: 24;  /* C: p -> p */
  --gap-1-d: 50;  /* D: bottom of one section -> h2 of next section, same group */
  --gap-1-e: 10;  /* E: p -> first li/ul */
  --gap-1-f: 5;   /* F: li -> li */
  --gap-1-g: 50;  /* G: bottom of last section -> bottom of the group */
  --gap-1-h: 30;  /* H: h2 -> first li/ul (when no p in between) */
  --gap-1-i: 24;  /* I: li -> p (paragraph following a list) */
  --gap-1-j: 50;  /* J: block above -> trust line (whatever precedes it: h2, p, li or ul) */
  --gap-1-k: 30;  /* K: block above -> .item-heading (h3), whatever precedes it */
  --gap-1-l: 0;   /* L: .item-heading (h3) -> description p */
  --gap-1-m: 44;  /* M: last description p -> .p-after-items */
  --gap-1-n: 5;   /* N: .item-heading (h3) -> first ul */

  /* type1 .item-heading (h3) typography */
  --h3-1-weight: 700;
  --h3-1-color: var(--color-logo-secondary-dark);

  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type2 (FAQ variant)
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type2) v1.png"

     Structurally independent from block-group--type1: shares the same
     .content-block / h2 / p building blocks, but adds three FAQ-specific
     paragraph classes (.faq-question, .faq-answer, .faq-answer-link) with
     their own gap variables, entirely separate from --gap-1-x.
  */
  --gap-2-a: 50;  /* A: top of the group -> h2 (padding-top) */
  --gap-2-b: 24;  /* B: h2 -> first plain p */
  --gap-2-c: 16;  /* C: plain p -> plain p (intro paragraphs) */
  --gap-2-d: 50;  /* D: last plain p -> first .faq-question */
  --gap-2-e: 50;  /* E: bottom of last item -> bottom of the group (padding-bottom) */
  --gap-2-f: 5;  /* F: .faq-question -> .faq-answer */
  --gap-2-g: 5;  /* G: .faq-answer -> .faq-answer-link */
  --gap-2-h: 50;  /* H: .faq-answer-link -> next .faq-question */
  --gap-2-i: 80;  /* I: .faq-answer-link -> next h2 (as used on RESOURCES page)*/


  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type3 (stage progression variant)
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type3) v1.png"
  */
  --gap-3-a: 50; /* top of group -> h2 */
  --gap-3-b: 50; /* h2 -> first p */
  --gap-3-c: 50; /* p -> p (repeats across the paragraph run) */
  --gap-3-d: 50; /* last p -> stage-progression */
  --gap-3-e: 50; /* stage-progression -> bottom of group */



  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type4 (consults fee table)
     ------------------------------------------------------------------------
  */

  /* ---- TYPE 4 (fee table): gaps - one variable per rendered gap ---- */
  --gap-4-a: 50;   /* top of group -> header row (padding-top on group) */
  --gap-4-b: 21;   /* header row -> first section bar */
  --gap-4-c: 20;   /* section bar -> first row */
  --gap-4-d: 12;   /* row -> row */
  --gap-4-e: 38;   /* last row of a section -> next section bar */
  --gap-4-f: 50;   /* last row or p if added -> bottom of group (padding-bottom on group) */
  --gap-4-g: 5;    /* column gap, header row */
  --gap-4-h: 5;    /* column gap, body rows */
  --gap-4-i: 20;   /* gap between title and note inside a section bar */
  --gap-4-j: 50;   /* h2 -> fee table */
  --gap-4-k: 64;   /* last .fee-row -> .fee-note paragraph */

  /* ---- TYPE 4: column widths (ratios only, shared by header + body rows) ---- */
  --cols-4: minmax(0, 3.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

  /* ---- TYPE 4: text alignment per column: left | center | right ---- */
  --align-4-head-1: center;
  --align-4-head-2: center;
  --align-4-head-3: center;
  --align-4-head-4: center;
  --align-4-col-1: right;
  --align-4-col-2: center;
  --align-4-col-3: center;
  --align-4-col-4: center;

  /* ---- TYPE 4: sizes (not gaps) ---- */
  --size-4-head-h: 68;        /* min height of header boxes */
  --size-4-bar-h: 43;         /* min height of section bars */
  --size-4-row-h: 25;         /* min height of body rows */
  --size-4-cell-pad-x: 14;    /* left/right padding inside cells */
  --size-4-bar-pad-x: 24;     /* left/right padding inside section bars */
  --size-4-font-head: 22;     /* header row text */
  --size-4-font-bar-title: 22;/* section bar title */
  --size-4-font-bar-note: 13; /* section bar note */
  --size-4-font-row: 18;      /* body row text */
  --size-4-font-note: 20;     /* .fee-note paragraph text */

  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type5 (CTA with quarter-circle arcs)
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type5) v1.png"
  */

  --circ-5-alpha: 0.05;          /* unitless, not scaled */

  --circ-5-tl-r: 200;
  --circ-5-tl-x: 0;
  --circ-5-tl-y: 0;

  --circ-5-br-r: 190;
  --circ-5-br-x: 40;
  --circ-5-br-y: 40;

  /* Type 5 – gaps */
  --gap-5-a: 50;
  --gap-5-b: 40;
  --gap-5-c: 20;
  --gap-5-d: 50;


   /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type6 (areas-of-care cards, 4 x 2)
     ------------------------------------------------------------------------
     Always exactly 8 cards in a 4-column x 2-row grid, portrait cards,
     centred on the page. The left/right margin between the grid and the
     page edge is whatever is left over after 4 x card width + 3 x column gap.
     All other properties (fonts, colors, radii, borders, button padding)
     are plain rules in the type6 section further down, not variables.
  */
  --gap-6-a: 50;   /* A: top of the group -> h2 (padding-top on group) */
  --gap-6-b: 50;   /* B: h2 -> top of first row of cards */
  --gap-6-c: 28;   /* C: vertical gap between the two rows of cards */
  --gap-6-d: 30;   /* D: horizontal gap between the four columns of cards */
  --gap-6-e: 30;   /* E: card h3 -> first p */
  --gap-6-f: 8;    /* F: card p -> p */
  --gap-6-g: 30;   /* G: top of card -> h3 (padding-top on card) */
  --gap-6-h: 30;   /* H: left/right edge of card -> content (padding-left/right on card) */
  --gap-6-i: 45;   /* I: bottom of button -> bottom of card (padding-bottom on card) */
  --gap-6-j: 65;  /* J: bottom of cards -> bottom of the group (padding-bottom on group) */

  /* ---- TYPE 6: card size (not gaps) ---- */
  --size-6-card-w: 330;   /* card width */
  --size-6-card-h: 550;   /* card minimum height (buttons line up across each row) */


     /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type7 (Text and trust-line or image)
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type7) v1.png"
  */

  --gap-7-a: 50;   /* top of group -> h2 (padding-top)            */
  --gap-7-b: 30;   /* h2 -> first p                               */
  --gap-7-c: 24;   /* p -> p                                      */
  --gap-7-d: 50;   /* last p -> bottom of group (padding-bottom)  */
  --nudge-7-e: 0;   /* vertical nudge of trust-line from centred (+ down, - up) */
  --gap-7-f: 0;   /* left edge -> text column                     */
  --gap-7-g: 900;  /* left edge -> trust-line                     */
  --gap-7-h: 40;   /* mobile only: text block -> trust-line (stacked) */

  --size-7-text-w: 700;  /* text column width                     */
  --size-7-w: 400;       /* trust-line image width                */
  --size-7-w-m: 200px;   /* mobile only: trust-line image width, in real px (not scaled) */
  --align-7-tl: left;       /* trust-line text alignment            */
  --size-7-font-tl: 43;   /* trust-line font size                 */

  /* Blobs (decorative shapes behind a trust-line image). Positions are measured
     from the image's top-left corner; negative values poke out past the image.
     Default is none, so each instance opts in with an inline style. */
  --blob1-7-display: none;    /* block | none */
  --blob1-7-top: -30;
  --blob1-7-left: -30;
  --blob1-7-width: 140;
  --blob1-7-height: 140;

  --blob2-7-display: none;    /* block | none */
  --blob2-7-top: 300;
  --blob2-7-left: -30;
  --blob2-7-width: 200;
  --blob2-7-height: 170;

}

/* At 1024px and below the text model is unchanged: --t and --t-display are just --u, exactly as before the hybrid text model. */
@media (max-width: 1024px) {
  :root {
    --t: var(--u);
    --t-display: var(--u);
  }
}


/* ==========================================================================
   1. Visual adjustments
   ========================================================================== */

/* Remove Android tap highlight */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Remove default browser margin/padding and make width/height calculations include border + padding (so sizing behaves predictably everywhere) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ==========================================================================
   2. Base / Typography
   ========================================================================== */

body {
  margin: 0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1rem;
  background-color:var(--color-background-neutral);
}

h1 {
  font-size: calc(var(--size-font-h1) * var(--t-display));
  color: var(--color-logo-primary);
}
@media (max-width: 1024px) {
  h1 {
    font-size: var(--size-font-h1-m);
  }
}

h2 {
  font-size: max(calc(var(--size-font-h2) * var(--t)), var(--size-font-h2-m));
  color: var(--color-logo-primary);
}
@media (max-width: 1024px) {
  h2 {
    font-size: var(--size-font-h2-m);
  }
}

h3 {
  font-size: max(calc(var(--size-font-h3) * var(--t)), var(--size-font-h3-min));
  color: var(--color-logo-primary);
}
@media (max-width: 1024px) {
  h3 {
    font-size: var(--size-font-h3-m);
  }
}

/* Headings use a serif display font for a more editorial feel */
h1, h2 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Every paragraph gets the one site-wide size, colour and line-height. Rules below only override them where a paragraph must differ. */
p {
  font-size: max(calc(var(--size-font-p) * var(--t)), var(--size-font-p-m));
  color: var(--color-logo-primary);
  line-height: 1.55;
}
@media (max-width: 1024px) {
  p {
    font-size: var(--size-font-p-m);
  }
}

/* Footer paragraphs keep taking their colour and line-height from the footer (light text on the dark background)
   instead of the defaults above. :where() keeps this rule's specificity at zero, so footer classes such as
   .footer-tagline still win. */
:where(.site-footer) p {
  color: inherit;
  line-height: inherit;
}



/* --- In-content links ---
   Scoped to .inner (used by the hero, content blocks, and authorisation
   sections) so this only affects links embedded within body text — not
   the site navigation, which uses its own <li>/<a> markup and needs its
   own distinct maroon color, independent of hover/visited state. */

.inner a {
  color: inherit;
  font: inherit;
  text-decoration: underline;
}

.inner a:visited,
.inner a:hover,
.inner a:active {
  color: inherit;
}

/* Viewport-specific line breaks.
   <br>                    breaks the line at every viewport size.
   <br class="br-mobile">  breaks the line only on phones   (640px and below).
   <br class="br-tablet">  breaks the line only on tablets  (641px to 1024px).
   <br class="br-desktop"> breaks the line only on desktops (1025px and above).
   Classes can be combined: <br class="br-tablet br-mobile"> breaks on tablets AND phones.
   Always keep a space next to the <br> so the words don't join when it's hidden. */
br.br-mobile,
br.br-tablet,
br.br-desktop { display: none; }               /* hidden everywhere by default... */

@media (width <= 640px) {
  br.br-mobile { display: inline; }            /* ...then each one is switched on in its own range */
}
@media (width > 640px) and (width <= 1024px) {
  br.br-tablet { display: inline; }
}
@media (width > 1024px) {
  br.br-desktop { display: inline; }
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */


/* --- Logo --- */

.logo img {
  height: calc(115 * var(--u));
  width: auto;
  display: block;
}

/* --- Header shell ---
   This element only handles the sticky, full-width background band.
   Layout (flex/padding/alignment) lives on .site-header-inner instead,
   so that the background can span edge-to-edge while the content inside
   stays lined up with the rest of the page's centered content column. */

.site-header {
  background-color:var(--color-background-neutral);
  width: 100%;
  border-bottom: 1px solid var(--color-graphic-embellishment-1); /* thin dividing line between header and scrolling content */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- Header content row ---
   Holds the logo, nav, hamburger and Book Now button in a single flex row,
   spaced apart with space-between (logo left, nav/button right). */

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(28 * var(--u)) calc(60 * var(--u));
  max-width: var(--design-width);   /* 1920px: the same cap the rest of the design uses */
  margin: 0 auto;                   /* centres the capped row in the full-width header band */
}

/* --- Main navigation menu (desktop) --- */

.main-nav > ul {
  display: flex;
  list-style: none;
  gap: calc(24 * var(--u));
  margin: 0;
  padding: 0;
}

.main-nav a {
  color:var(--color-logo-primary);
  font-size: calc(21 * var(--t));
  text-decoration: none;
}

.main-nav a:hover .nav-label,
.main-nav a[aria-current="page"] .nav-label,
.main-nav a[data-current-section] .nav-label {
  text-decoration: underline;
}

/* --- "Book Now" pill button --- */

.book-button {
  background-color:var(--color-logo-primary);
  color:var(--color-background-neutral);
  padding: calc(23 * var(--u)) calc(43 * var(--u));
  border-radius: 999px; /* very large to render as semi-circular */
  text-decoration: none;
  font-weight: 400;
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(27 * var(--t));
  line-height: 1;
  display: inline-block;
}

/* --- Dropdown submenus (STAGES / CARE / RESOURCES) --- */

/* Each top-level nav item is a positioning anchor for its dropdown */
.main-nav li {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: calc(18 * var(--u)); /* Gap between menu bottom and top of dropdown window. Invisible bridge — keeps hover unbroken */
  z-index: 10;
}

.dropdown-inner {
  background-color: var(--color-background-neutral);
  border-radius: calc(16 * var(--u));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: calc(8 * var(--u)) 0;
  list-style: none;
}

/* Show the dropdown on mouse hover or keyboard focus */
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: block;
}

.dropdown-inner li {
  display: block;
}

.dropdown a {
  display: block;
  padding: calc(9.7 * var(--u)) calc(15 * var(--u));
  font-size: calc(21.12 * var(--t));
  white-space: nowrap;
  color:var(--color-logo-primary);
}

.dropdown a:hover {
  background-color:var(--color-background-neutral);
  text-decoration: underline;
}

.dropdown a[aria-current="page"] {
  text-decoration: underline;
}

/* Small chevron down-arrow icon next to dropdown nav items, which flips upside down when the dropdown is open */
.dropdown-arrow {
  display: inline-block;
  margin-left: calc(6 * var(--u));
  margin-bottom: calc(1 * var(--u));
  vertical-align: middle;
  transform-origin: center;
  transition: transform 0.4s ease;
}

.has-dropdown:hover .dropdown-arrow {
  transform: rotate(-180deg);
}

.dropdown-arrow svg {
  display: block;
  width: calc(14 * var(--u));
  height: calc(9 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-arrow {
    transition: none;
  }
}

.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* --- Hamburger menu button (mobile only) ---
   Hidden by default on desktop; switched to visible inside the mobile media query below. */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color:var(--color-logo-primary);
  border-radius: 2px;
}

/* --- Mobile menu close "X" button ---
   Hidden on desktop; shown inside the mobile media query below. */

.nav-close {
  display: none;
}

/* --- Book Now button inside the mobile menu ---
   Hidden on desktop (the header already has its own Book Now button);
   shown inside the mobile media query below. The .main-nav prefix is needed
   so this beats the generic ".main-nav a" colour/size rules. */

.main-nav .book-button--menu {
  display: none;
}

/* --- Header: mobile layout (≤1024px) ---
   Constrains the header row to the same centered column width as the
   page's text content, then rearranges it into two lines:
     Line 1: LOGO (left)  |  HAMBURGER (right)
     Line 2: BOOK NOW (centered)
   Full nav links are hidden in favor of the hamburger button. */

@media (max-width: 1024px) {
  .main-nav {
    display: none;
  }

  /* ----------------------------------------------------------------------
     Full-screen mobile menu
     ----------------------------------------------------------------------
     FIXED font sizes (plain px, deliberately NOT multiplied by --u) so the
     menu text never scales with the viewport. Change them here:
  */
  body.nav-open {
    overflow: hidden; /* stop the page scrolling behind the open menu */
  }

  body.nav-open .main-nav {
    --mobile-nav-font-top: 1.5rem;  /* top-level items: HOME, ABOUT, STAGES... */
    --mobile-nav-font-sub: 1.125rem;  /* dropdown items */

    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    z-index: 200;
    padding: 6px 24px 48px; /* top padding leaves room for the X */
    background-color: var(--color-background-neutral);
    text-align: left;
  }

  /* Close "X" (two crossed bars), pinned top-right of the screen */
  body.nav-open .nav-close {
    display: block;
    position: sticky;         /* was: fixed */
    top: 6px;                 /* where it sticks when the menu scrolls */
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: 0 -14px -30px auto;  /* top | right | bottom | left */
    background: none;
    /* background: rgba(255, 0, 0, 0.2); */  /* uncomment temporarily to see the tap area */
    border: none;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
  }

  body.nav-open .nav-close::before,
  body.nav-open .nav-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-logo-primary);
  }

  body.nav-open .nav-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  body.nav-open .nav-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  body.nav-open .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Top-level items (fixed size) */
  body.nav-open .main-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin: 11.4px 0;              /* was padding: spacing stays, but isn't clickable */
    padding: 0;
    font-size: var(--mobile-nav-font-top);
    line-height: 1.3;
  }

  /* Chevron: enlarged tap target, fixed size. JS makes tapping it toggle
     the dropdown instead of following the link. */
  body.nav-open .main-nav .dropdown-arrow {
    margin: 0 0 0 4px;
    padding: 12px 14px;
    cursor: pointer;
  }

  body.nav-open .main-nav .dropdown-arrow svg {
    width: 16px;
    height: 11px;
  }

  /* Dropdowns: hidden until their parent <li> gets .open (toggled by the
     chevron). These selectors are deliberately more specific than the
     desktop :hover / :focus-within rules, so touch "sticky hover" can never
     open a dropdown when a top-level label is tapped. */
  body.nav-open .main-nav .has-dropdown .dropdown {
    display: none;
    position: static;
    padding: 0;
    box-shadow: none;
  }

  body.nav-open .main-nav .has-dropdown.open .dropdown {
    display: block;
  }

  body.nav-open .main-nav .dropdown-inner {
    background-color: var(--color-background-neutral);
    border: 1px solid var(--color-graphic-embellishment-1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 8px 0;
    margin: 4px 0 12px;
  }

  /* Dropdown items (fixed size) */
  body.nav-open .main-nav .dropdown a {
    display: block;
    padding: 10px 12px;
    font-size: var(--mobile-nav-font-sub);
    line-height: 1.35;
    white-space: normal; /* long labels wrap instead of overflowing */
  }

  /* Book Now button at the bottom of the menu, centred (fixed size) */
  body.nav-open .main-nav .book-button--menu {
    display: block;
    width: fit-content;
    margin: 32px auto 0;
    padding: 16px 36px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-background-neutral);
    background-color: var(--color-logo-primary);
    text-align: center;
  }

  /* Chevron: no hover rotation on touch; rotate only when open */
  body.nav-open .main-nav .has-dropdown .dropdown-arrow {
    transform: none;
  }

  body.nav-open .main-nav .has-dropdown.open .dropdown-arrow {
    transform: rotate(-180deg);
  }

  .site-header-inner {
    max-width: var(--m-col-w);
    margin: 0 auto;
    padding: 9px 0px; /* Adjust vertical and horizontal padding around logo and hamburger */
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .logo {
    order: 1;
    margin-left: var(--m-pad-page);
  }

  .hamburger {
    display: flex;
    order: 2;
    margin-right: var(--m-pad-page);
  }

  /* Invisible full-width spacer: forces the Book Now button to wrap onto its own line below the logo/hamburger row */
  .site-header-inner::after {
    content: "";
    flex-basis: 100%;
    order: 3;
  }

  .book-button {
    order: 4;
    margin: 16px auto 0;
    font-size: clamp(0.9375rem, 0.66667rem + 0.67708vw, 1.1rem);   /* 15px on phones, 17.6px at 1024px */
  }
}

/* --- Header: narrow desktop tweak (1025px–1100px) ---
   At this in-between width, tighten up nav spacing/font size slightly
   so the full desktop nav still fits comfortably before switching to
   the mobile hamburger layout at 1024px. */

@media (width > 1024px) and (width <= 1100px) {
  .main-nav ul {
    gap: calc(12 * var(--u));
  }

  .main-nav a {
    font-size: calc(21.12 * var(--t));
  }
}


/* ==========================================================================
   4. Hero Section
   ========================================================================== */

.hero {
  padding: calc(50 * var(--u)) 0;
  text-align: center;
}

.hero .inner {
  max-width: calc(var(--nominal-content-width) * var(--u));
  margin: 0 auto;
  padding: 0 calc(24 * var(--u));
}

.hero h1 {
  font-weight: 400;
  margin-bottom: calc(70 * var(--u));
}

.hero p {
  margin-bottom: calc(16 * var(--u));
  text-align: left;
}


/* ==========================================================================
   5. Content Blocks — block-group--typeX (pale / dark color variants)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Group wrapper (.block-group--type1, combined with .block-group--pale
   or .block-group--dark)
   --------------------------------------------------------------------------
   Wraps each consecutive run of same-type content-block sections. Between
   the structural class and the color class it owns:
     - the background color for that whole run (color class)
     - gap A (padding-top, before the first section's h2) (structural class)
     - gap G (padding-bottom, after the last section's content) (structural class)
   Padding is used (not margin) so A/G never collapse through into the
   surrounding page background — they always render inside this colored box.

   All structural rules in this section are deliberately scoped to
   ".block-group--type1" specifically (not to a generic ".block-group"),
   so that adding a new structural block-group type later (e.g. an FAQ
   group) cannot inherit or collide with any of these --gap-1-x rules.
   Each new structural type gets its own fully independent set of
   variables and selectors (e.g. --gap-2-x for .block-group--type2).

   .block-group--pale / .block-group--dark are intentionally separate,
   reusable color classes — not baked into the structural class name —
   so the same two color options can be combined with any structural
   type (type1, type2, ...) without redefining background-color for each
   new combination. Apply both classes together in markup, e.g.
   class="block-group--type1 block-group--pale". The labels "pale" and
   "dark" are arbitrary variant names for convenience, not literal
   descriptions of the actual color values — don't assume the "dark"
   variant is necessarily the visually darker of the two if the palette
   changes later.

   .content-block is a single shared class (sections using either color
   variant are structurally and visually identical apart from
   background) — it exists purely so gap D can count "is there a
   preceding sibling section in this same group".

   NOT used on the home page — see .home-stripe-1 / .home-stripe-2 in the
   HOME PAGE section below, which are a separate, independent system.
   -------------------------------------------------------------------------- */

.block-group--pale {
  --block-bg: var(--color-background-neutral); /* Expose color as a variable to use when auto setting fee table text color */
  background-color: var(--block-bg);
}

.block-group--dark {
  --block-bg: var(--color-background-darker); /* Expose color as a variable to use when auto setting fee table text color */
  background-color: var(--block-bg);
}

/* --------------------------------------------------------------------------
   Individual sections (.content-block)
   --------------------------------------------------------------------------
   Fully transparent — background comes from the parent .block-group--pale
   / .block-group--dark color class instead. .inner still handles
   horizontal centering.
   -------------------------------------------------------------------------- */

.content-block {
  background-color: transparent;
}

.content-block .inner {
  max-width: calc(var(--nominal-content-width) * var(--u));
  margin: 0 auto;
  padding: 0 calc(24 * var(--u));
}

.content-block h2 {
  font-weight: 400;
}

.content-block ul {
  padding-left: calc(48 * var(--u));
}

.content-block li {
  line-height: 1.6;
  color:var(--color-logo-primary);
  font-size: max(calc(24 * var(--t)), var(--size-font-p-m));
}

.content-block li::marker {
  color:var(--color-logo-primary);
}

@media (max-width: 1024px) {
  .content-block li { font-size: var(--size-font-p-m); }
}

/* --------------------------------------------------------------------------
   B, C, E, F, H, I — gaps between elements within one section's .inner
   --------------------------------------------------------------------------
   Each rule matches a distinct, non-overlapping sibling pair, so each
   variable controls exactly one gap:
     h2 + p   -> B      p + p   -> C
     p + ul   -> E      li + li -> F
     h2 + ul  -> H      ul + p  -> I
   H covers a list that follows an h2 directly (no p in between); I covers
   a paragraph that follows a list directly — targeted via ul + p (the ul
   is the actual sibling of the following p; li + p can never match since
   li is nested inside the ul, not a sibling of anything outside it).
   F remains scoped to li + li only, and is unaffected by the addition of I.
   Scoped to .block-group--type1 specifically (not a bare ".inner"), so a
   future structural block-group type's own h2+p, p+p, etc. pairs are
   completely unaffected by --gap-1-x values. Since color is a separate
   class, these rules apply identically to the pale and dark variants —
   there is no need to repeat them per color.
   -------------------------------------------------------------------------- */

.block-group--type1 {
  padding-top: calc(var(--gap-1-a) * var(--u));
  padding-bottom: calc(var(--gap-1-g) * var(--u));
}

/* --- D: gap between two sections inside one group. The "+" combinator
   means this only ever matches a section that has a preceding sibling
   section, so it never fires on a group's first section (where gap A
   already applies via the group's padding-top). Uses a descendant
   combinator (not ">") so it still matches even if a section is nested
   one level deeper inside the group than expected. --- */

.block-group--type1 .content-block + .content-block {
  margin-top: calc(var(--gap-1-d) * var(--u));
}

.block-group--type1 h2 + p {
  margin-top: calc(var(--gap-1-b) * var(--u));
}

.block-group--type1 p + p {
  margin-top: calc(var(--gap-1-c) * var(--u));
}

.block-group--type1 p + ul {
  margin-top: calc(var(--gap-1-e) * var(--u));
}

.block-group--type1 li + li {
  margin-top: calc(var(--gap-1-f) * var(--u));
}

.block-group--type1 h2 + ul {
  margin-top: calc(var(--gap-1-h) * var(--u));
}

.block-group--type1 ul + p {
  margin-top: calc(var(--gap-1-i) * var(--u));
}

.block-group--type1 .item-heading + ul {
  margin-top: calc(var(--gap-1-n) * var(--u)); /* N: .item-heading (h3) -> first ul */
}

/* --------------------------------------------------------------------------
   Trust line
   --------------------------------------------------------------------------
   Reusable two-part statement ("Plain lead-in. Italic emphasis phrase.")
   used site-wide: in the hero, and as the last block inside a
   block-group--type1 section (either color variant). Always a single <p>,
   with the second part wrapped in <span class="text-italic text-color-secondary">
   for the italic/secondary-color treatment.

   Doubled ".trust-line.trust-line" selector is the same specificity trick
   used for ".page-home.page-home" below: two identical classes outrank
   any single-class + type selector (e.g. ".hero p"), so
   this base style always wins regardless of which container it sits in,
   with no !important needed.
   -------------------------------------------------------------------------- */

.trust-line.trust-line {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: calc(43 * var(--t-display));
  line-height: 1.4;
  color: var(--color-logo-primary);
  text-align: center;
}
@media (max-width: 1024px) {
  .trust-line.trust-line {
    font-size: calc(43 * var(--trust-unit-m));
  }
}

.hero .trust-line {
  padding-top: calc(64 * var(--u));
}


/* --- J: gap between the trust line and whatever block precedes it,
   when used as the last block inside a type1 group. This targets
   .trust-line directly rather than a sibling combinator (h2 + .trust-line,
   p + .trust-line, etc.), so it applies no matter what element type comes
   before it. Specificity (.block-group--type1 + .trust-line = one class
   + one class) beats every existing single-class + two-type sibling rule
   above (h2 + p, p + p, ul + p, etc.) on the class-count column, so J
   always overrides them regardless of source order — no !important
   needed, and no separate rule required per preceding element type.
   The gap from the trust line down to the bottom of the group is still
   handled by the group's own --gap-1-g padding-bottom; nothing extra
   is needed for that side. --- */

.block-group--type1 .trust-line {
  margin-top: calc(var(--gap-1-j) * var(--u));
}

/* --------------------------------------------------------------------------
   type1 sub-items: .item-heading (h3) + .p-after-items
   -------------------------------------------------------------------------- */

.block-group--type1 .item-heading {
  font-weight: var(--h3-1-weight);
  color: var(--h3-1-color);
  line-height: 1.6;
  margin-top: calc(var(--gap-1-k) * var(--u));      /* K */
}

.block-group--type1 .item-heading + p {
  margin-top: calc(var(--gap-1-l) * var(--u));      /* L */
}

.block-group--type1 .p-after-items {
  margin-top: calc(var(--gap-1-m) * var(--u));      /* M */
}

/* --------------------------------------------------------------------------
   Inline emphasis spans (site-wide, typography only, combinable)
   -------------------------------------------------------------------------- */

.text-bold   { font-weight: 700; }
.text-italic { font-style: italic; }
.text-color-secondary { color: var(--color-logo-secondary-dark); }

/* --------------------------------------------------------------------------
   Free line: <span class="plain-line" style="--line-x:..; --line-y:..; --line-len:..; --line-angle:.."></span>
   --line-t (thickness), --line-c (colour) and --line-z (stacking) can also be set
   Goes inside any element that has position: relative (the "anchor"); add the
   class .line-anchor to an element to make it one. Coordinates are measured
   from the anchor's top-left corner (x right, y down), as plain numbers (no px), scaled by --u.
   -------------------------------------------------------------------------- */
.line-anchor {
  position: relative;
}

.plain-line {
  --line-x: 0;                                /* start point, from the anchor's left */
  --line-y: 0;                                /* start point, from the anchor's top */
  --line-len: 100;                            /* length */
  --line-angle: 0deg;                           /* 0deg = right, 90deg = down, 180deg = left, -90deg = up */
  --line-t: 0.25;                                /* thickness */
  --line-c: var(--color-logo-primary);        /* colour */
  --line-z: 0;                                  /* stacking: -1 = behind content */

  position: absolute;
  left: calc(var(--line-x) * var(--u));
  top: calc(var(--line-y) * var(--u));
  width: calc(var(--line-len) * var(--u));
  height: calc(var(--line-t) * var(--u));
  background-color: var(--line-c);
  border-radius: 999px;                         /* rounded ends; set 0px for square ends */
  transform-origin: 0 50%;                      /* rotate around the start point */
  transform: translateY(-50%) rotate(var(--line-angle));
  z-index: var(--line-z);
  pointer-events: none;
}

/* Optional: add class "line--no-mobile" to hide a line at 1024px and below */
@media (max-width: 1024px) {
  .plain-line.line--no-mobile {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   block-group--type2 (FAQ variant)
   --------------------------------------------------------------------------
   Structurally separate from block-group--type1: still uses the shared
   .content-block h2 / p rules for the heading and intro paragraphs, but
   introduces three FAQ-specific paragraph classes used only inside this
   structural type. Each is still a plain <p>, so it still inherits the
   base font-size/line-height/color from the base "p" rule — only the
   one differentiating property is added per class:
     .faq-question     -> bold
     .faq-answer       -> italic
     .faq-answer-link  -> secondary brand colour
   Combine with .block-group--pale or .block-group--dark for background
   color, same as type1, e.g. class="block-group--type2 block-group--pale".
   -------------------------------------------------------------------------- */

.block-group--type2 {
  padding-top: calc(var(--gap-2-a) * var(--u));
  padding-bottom: calc(var(--gap-2-e) * var(--u));
}

.faq-question {
  font-weight: 700;
}

.faq-answer {
  font-style: italic;
}

.content-block .faq-answer-link {
  color: var(--color-logo-secondary-dark);
  display: block;
   padding-left: 2.6em;
    text-indent: -0.80em;
}

.content-block .faq-answer-link::before {
  content: "→"; margin-right: 0.6em;
  display: inline-block;
  text-decoration: none;
}


/* --- B, C, D, F, G, H: gaps between elements within one type2 section.
   p + .faq-question (D) and .faq-answer-link + .faq-question (H) both
   have one extra class in the selector compared to the generic p + p
   (C) rule, so they automatically win on specificity wherever they
   apply — no need for any override trick beyond writing them directly. --- */

.block-group--type2 h2 + p {
  margin-top: calc(var(--gap-2-b) * var(--u));
}

.block-group--type2 p + p {
  margin-top: calc(var(--gap-2-c) * var(--u));
}

.block-group--type2 p + .faq-question {
  margin-top: calc(var(--gap-2-d) * var(--u));
}

.block-group--type2 .faq-question + .faq-answer {
  margin-top: calc(var(--gap-2-f) * var(--u));
}

.block-group--type2 .faq-answer + .faq-answer-link {
  margin-top: calc(var(--gap-2-g) * var(--u));
}

.block-group--type2 .faq-answer-link + .faq-question {
  margin-top: calc(var(--gap-2-h) * var(--u));
}

.block-group--type2 .faq-answer-link + h2 {
  margin-top: calc(var(--gap-2-i) * var(--u));
}

/* === block-group--type3 structural rules === */
.block-group--type3 {
  padding-top: calc(var(--gap-3-a) * var(--u));
  padding-bottom: calc(var(--gap-3-e) * var(--u));
}

.block-group--type3 h2 + p {
  margin-top: calc(var(--gap-3-b) * var(--u));
}

.block-group--type3 p + p {
  margin-top: calc(var(--gap-3-c) * var(--u));
}

.block-group--type3 p + .stage-progression {
  margin-top: calc(var(--gap-3-d) * var(--u));
}

/* === .stage-progression: reusable within type3, styling only === */
.block-group--type3 .stage-progression {
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-size: calc(30 * var(--t));
  color: var(--color-logo-secondary-dark);
  text-align: center;
}

@media (max-width: 1024px) {
  .block-group--type3 .stage-progression {
    font-size: clamp(1.0625rem, 0.80208rem + 0.65104vw, 1.21875rem);
  }
}

/* ---------- TYPE 4: fee table ---------- */

/* Gaps A and F: padding on the group so they never collapse */
.block-group--type4 {
  --color-4-text-on-bar: var(--block-bg, #ffffff); /* Set bar text color to match block background (pale or dark) */
  padding-top: calc(var(--gap-4-a) * var(--u));
  padding-bottom: calc(var(--gap-4-f) * var(--u));
}

/* Header row + body rows share the same column template */
.block-group--type4 .fee-head-row,
.block-group--type4 .fee-row {
  display: grid;
  grid-template-columns: var(--cols-4);
}

.block-group--type4 h2 + .fee-table {
  margin-top: calc(var(--gap-4-j) * var(--u));
}

.block-group--type4 .fee-head-row {
  column-gap: calc(var(--gap-4-g) * var(--u));
  align-items: stretch;
  min-height: calc(var(--size-4-head-h) * var(--u));
}

.block-group--type4 .fee-row {
  column-gap: calc(var(--gap-4-h) * var(--u));
  align-items: center;
  min-height: calc(var(--size-4-row-h) * var(--u));
}

/* Header cells: plum boxes, content vertically centred */
.block-group--type4 .fee-head-row > * {
  display: grid;
  align-content: center;
  padding: 0 calc(var(--size-4-cell-pad-x) * var(--u));
  background-color: var(--color-logo-primary);
  color: var(--color-4-text-on-bar);
  font-size: calc(var(--size-4-font-head) * var(--t));
  font-weight: 600;
  line-height: 1.3;
}

/* Body cells */
.block-group--type4 .fee-row > * {
  padding: 0 calc(var(--size-4-cell-pad-x) * var(--u));
  color: var(--color-logo-primary);
  font-size: calc(var(--size-4-font-row) * var(--t));
  line-height: 1.2;
  white-space: nowrap;
}

/* Section bars: full width, ignore the column grid */
.block-group--type4 .fee-section-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: calc(var(--gap-4-i) * var(--u));
  align-items: center;
  min-height: calc(var(--size-4-bar-h) * var(--u));
  padding: 0 calc(var(--size-4-bar-pad-x) * var(--u));
  background-color: var(--color-graphic-embellishment-2);
  color: var(--color-logo-primary);
  white-space: nowrap;
}

.block-group--type4 .fee-section-title {
  font-size: calc(var(--size-4-font-bar-title) * var(--t));
  font-weight: 700;
  line-height: 1.2;
}

.block-group--type4 .fee-section-note {
  font-size: calc(var(--size-4-font-bar-note) * var(--t));
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
}

/* Desktop only. The bars and cells are nowrap, but with larger text a long bar note
   or a long first-column cell may wrap onto a second line instead of
   spilling out of its box. Rows and bars already have min-height, so they simply grow. */
@media (width > 1024px) {
  .block-group--type4 .fee-section-note,
  .block-group--type4 .fee-row > * {
    white-space: normal;
  }
}

/* Vertical gaps B, C, D, E: margin-top on the second element of each pair */
.block-group--type4 .fee-head-row + .fee-section-bar { margin-top: calc(var(--gap-4-b) * var(--u)); }
.block-group--type4 .fee-section-bar + .fee-row      { margin-top: calc(var(--gap-4-c) * var(--u)); }
.block-group--type4 .fee-row + .fee-row              { margin-top: calc(var(--gap-4-d) * var(--u)); }
.block-group--type4 .fee-row + .fee-section-bar      { margin-top: calc(var(--gap-4-e) * var(--u)); }

/* Note paragraph after the last fee row (gap K). Direct class targeting, so
   it applies whatever precedes it; (0,2,0) beats single-class + type selectors like ".hero p". */
.block-group--type4 .fee-note {
  margin-top: calc(var(--gap-4-k) * var(--u));
  font-size: calc(var(--size-4-font-note) * var(--t));
  font-style: italic;
}

/* Column text alignment (edit the variables in :root, not these) */
.block-group--type4 .fee-head-row > :nth-child(1) { text-align: var(--align-4-head-1); }
.block-group--type4 .fee-head-row > :nth-child(2) { text-align: var(--align-4-head-2); }
.block-group--type4 .fee-head-row > :nth-child(3) { text-align: var(--align-4-head-3); }
.block-group--type4 .fee-head-row > :nth-child(4) { text-align: var(--align-4-head-4); }

.block-group--type4 .fee-row > :nth-child(1) { text-align: var(--align-4-col-1); }
.block-group--type4 .fee-row > :nth-child(2) { text-align: var(--align-4-col-2); }
.block-group--type4 .fee-row > :nth-child(3) { text-align: var(--align-4-col-3); }
.block-group--type4 .fee-row > :nth-child(4) { text-align: var(--align-4-col-4); }

@media (max-width: 1024px) {

  .block-group--type4 .fee-table {
    white-space: normal;
  }

  .block-group--type4 h2 + .fee-table {
    margin-top: 28px;
  }

  /* Narrower first column than desktop, so the three number columns have room */
  .block-group--type4 .fee-head-row,
  .block-group--type4 .fee-row {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3px;
  }

  .block-group--type4 .fee-head-row {
    min-height: 0;
  }

  .block-group--type4 .fee-head-row > * {
    padding: 8px 3px;
    font-size: var(--size-font-caption-m);
    overflow-wrap: anywhere;
  }

  .block-group--type4 .fee-row {
    min-height: 0;
  }

  .block-group--type4 .fee-row > * {
    padding: 0 3px;
    font-size: var(--size-font-caption-m);
    white-space: normal;
    overflow-wrap: anywhere;   /* safety net: only breaks a word if it would otherwise spill out of its column */
  }

  /* Section bars: title on one line, note underneath */
  .block-group--type4 .fee-section-bar {
    grid-template-columns: 1fr;
    row-gap: 4px;
    min-height: 0;
    padding: 8px 12px;
    white-space: normal;
  }

  .block-group--type4 .fee-section-title {
    font-size: var(--size-font-p-m);
  }

  .block-group--type4 .fee-section-note {
    font-size: var(--size-font-small-m);
    text-align: left;
  }

  .block-group--type4 .fee-section-note:empty {
    display: none;
  }

  /* Vertical gaps */
  .block-group--type4 .fee-head-row + .fee-section-bar { margin-top: 12px; }
  .block-group--type4 .fee-section-bar + .fee-row      { margin-top: 12px; }
  .block-group--type4 .fee-row + .fee-row              { margin-top: 10px; }
  .block-group--type4 .fee-row + .fee-section-bar      { margin-top: 24px; }

  .block-group--type4 .fee-note {
    margin-top: 24px;
    font-size: var(--size-font-small-m);
  }

  /* Service names read better left-aligned when they wrap on a narrow screen */
  .block-group--type4 .fee-row > :nth-child(1) {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .block-group--type4 .fee-head-row > * {
    font-weight: 400;
    padding: 8px 1px;
    font-size: 0.7rem;
  }
}

/* ===== block-group--type5 ===== */
.block-group--type5 {
  position: relative;
  overflow: hidden;
  background-color: var(--color-logo-secondary-dark);
  padding-top: calc(var(--gap-5-a) * var(--u));
  padding-bottom: calc(var(--gap-5-d) * var(--u));
}

/* Corner arcs */
.block-group--type5::before,
.block-group--type5::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, var(--circ-5-alpha));
  pointer-events: none;
}

.block-group--type5::before {
  width: calc(var(--circ-5-tl-r) * 2 * var(--u));
  height: calc(var(--circ-5-tl-r) * 2 * var(--u));
  left: calc((var(--circ-5-tl-x) - var(--circ-5-tl-r)) * var(--u));
  top: calc((var(--circ-5-tl-y) - var(--circ-5-tl-r)) * var(--u));
}

.block-group--type5::after {
  width: calc(var(--circ-5-br-r) * 2 * var(--u));
  height: calc(var(--circ-5-br-r) * 2 * var(--u));
  right: calc((var(--circ-5-br-x) - var(--circ-5-br-r)) * var(--u));
  bottom: calc((var(--circ-5-br-y) - var(--circ-5-br-r)) * var(--u));
}

/* Content sits above the arcs */
.block-group--type5 .content-block {
  position: relative;
  z-index: 1;
}

/* Typography */
.block-group--type5 h2,
.block-group--type5 p {
  margin: 0;
}

.block-group--type5 .content-block h2 {
  color: var(--color-background-neutral);
}

.block-group--type5 .content-block p {
  color: var(--color-background-neutral);
}

.block-group--type5 .content-block p a {
  color: inherit;
  text-decoration: underline;
}

/* Gaps between elements */
.block-group--type5 h2 + p {
  margin-top: calc(var(--gap-5-b) * var(--u));
}

.block-group--type5 p + p {
  margin-top: calc(var(--gap-5-c) * var(--u));
}

/* ===== block-group types 1, 2, 3 and 5: MOBILE (1024px and below) =====
   Fixed px (not x --u, which varies from 0.4px on phones to 0.53px at 1024px). Same selectors
   as the desktop rules above, placed after them, so they win by source order.
   --m-N-x is the mobile version of --gap-N-x. Tune everything from the variables. */
@media (max-width: 1024px) {

  /* ---- TYPE 1 ---- */
  .block-group--type1 {
    --m-1-a: 44px;   /* A: top of group -> first h2 */
    --m-1-b: 20px;   /* B: h2 -> p */
    --m-1-c: 16px;   /* C: p -> p */
    --m-1-d: 40px;   /* D: section -> next section in the same group */
    --m-1-e: 12px;   /* E: p -> first ul */
    --m-1-f: 8px;    /* F: li -> li */
    --m-1-g: 44px;   /* G: last section -> bottom of group */
    --m-1-h: 20px;   /* H: h2 -> ul (no p between) */
    --m-1-i: 16px;   /* I: ul -> p */
    --m-1-j: 32px;   /* J: block above -> trust line */
    --m-1-k: 24px;   /* K: block above -> .item-heading */
    --m-1-l: 0px;    /* L: .item-heading -> description p */
    --m-1-n: 4px;    /* N: .item-heading -> first ul */
    --m-1-m: 24px;   /* M: last description p -> .p-after-items */
    --m-1-ul: 24px;  /* bullet indent (left padding on lists) */

    padding-top: var(--m-1-a);
    padding-bottom: var(--m-1-g);
  }

  .block-group--type1 .content-block + .content-block { margin-top: var(--m-1-d); }
  .block-group--type1 h2 + p                          { margin-top: var(--m-1-b); }
  .block-group--type1 p + p                           { margin-top: var(--m-1-c); }
  .block-group--type1 p + ul                          { margin-top: var(--m-1-e); }
  .block-group--type1 li + li                         { margin-top: var(--m-1-f); }
  .block-group--type1 h2 + ul                         { margin-top: var(--m-1-h); }
  .block-group--type1 ul + p                          { margin-top: var(--m-1-i); }
  .block-group--type1 .trust-line                     { margin-top: var(--m-1-j); }
  .block-group--type1 .item-heading                   { margin-top: var(--m-1-k); }
  .block-group--type1 .item-heading + p               { margin-top: var(--m-1-l); }
  .block-group--type1 .item-heading + ul              { margin-top: var(--m-1-n); }
  .block-group--type1 .p-after-items                  { margin-top: var(--m-1-m); }
  .block-group--type1 ul                              { padding-left: var(--m-1-ul); }

  /* ---- TYPE 2 (FAQ) ---- */
  .block-group--type2 {
    --m-2-a: 44px;   /* A: top of group -> h2 */
    --m-2-b: 24px;   /* B: h2 -> first plain p */
    --m-2-c: 16px;   /* C: plain p -> plain p */
    --m-2-d: 32px;   /* D: last plain p -> first .faq-question */
    --m-2-e: 44px;   /* E: bottom of last item -> bottom of group */
    --m-2-f: 10px;   /* F: .faq-question -> .faq-answer */
    --m-2-g: 10px;   /* G: .faq-answer -> .faq-answer-link */
    --m-2-h: 40px;   /* H: .faq-answer-link -> next .faq-question */

    padding-top: var(--m-2-a);
    padding-bottom: var(--m-2-e);
  }

  .block-group--type2 h2 + p                           { margin-top: var(--m-2-b); }
  .block-group--type2 p + p                            { margin-top: var(--m-2-c); }
  .block-group--type2 p + .faq-question                { margin-top: var(--m-2-d); }
  .block-group--type2 .faq-question + .faq-answer      { margin-top: var(--m-2-f); }
  .block-group--type2 .faq-answer + .faq-answer-link   { margin-top: var(--m-2-g); }
  .block-group--type2 .faq-answer-link + .faq-question { margin-top: var(--m-2-h); }

  /* ---- TYPE 3 (stage progression) ---- */
  .block-group--type3 {
    --m-3-a: 44px;   /* top of group -> h2 */
    --m-3-b: 24px;   /* h2 -> first p */
    --m-3-c: 16px;   /* p -> p */
    --m-3-d: 32px;   /* last p -> stage-progression */
    --m-3-e: 44px;   /* stage-progression -> bottom of group */

    padding-top: var(--m-3-a);
    padding-bottom: var(--m-3-e);
  }

  .block-group--type3 h2 + p                  { margin-top: var(--m-3-b); }
  .block-group--type3 p + p                   { margin-top: var(--m-3-c); }
  .block-group--type3 p + .stage-progression  { margin-top: var(--m-3-d); }

  /* ---- TYPE 5 (CTA) ---- */
  .block-group--type5 {
    --m-5-a: 44px;   /* top of group -> h2 */
    --m-5-b: 20px;   /* h2 -> p */
    --m-5-c: 16px;   /* p -> p */
    --m-5-d: 44px;   /* bottom of last p -> bottom of group */

    padding-top: var(--m-5-a);
    padding-bottom: var(--m-5-d);
  }

  .block-group--type5 h2 + p { margin-top: var(--m-5-b); }
  .block-group--type5 p + p  { margin-top: var(--m-5-c); }
}

/* ===== block-group--type6 (areas-of-care cards, 4 x 2) =====
   Combine with .block-group--pale / .block-group--dark for the section
   background, e.g. <div class="block-group--type6 block-group--pale">.

   Markup: .content-block > .inner > h2 + .card-grid > 8 x .card
   Each .card holds an h3, one or more p, and an a.card-button.
   Use <br class="br-desktop"> / <br class="br-mobile"> inside the h3 to
   control wrapping (those helpers are defined site-wide in section 2).
   Mobile rules (1024px and below) are in the type6 MOBILE block below.
*/

/* Gaps A and J: padding on the group so they never collapse */
.block-group--type6 {
  padding-top: calc(var(--gap-6-a) * var(--u));
  padding-bottom: calc(var(--gap-6-j) * var(--u));
}

/* .inner is sized to exactly the grid width (4 cards + 3 column gaps), so the
   h2 shares the grid's left edge and both stay centred together. Three
   classes beat the shared ".content-block .inner" (max-width + 24px padding). */
.block-group--type6 .content-block .inner {
  max-width: calc((4 * var(--size-6-card-w) + 3 * var(--gap-6-d)) * var(--u));
  padding: 0;
}

/* --- h2 --- */
.block-group--type6 .content-block h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  padding-left: calc(12 * var(--u));   /* nudge h2 in from the grid's left edge; 0px = flush */
}

/* B: h2 -> card grid */
.block-group--type6 h2 + .card-grid {
  margin-top: calc(var(--gap-6-b) * var(--u));
}

/* --- Card grid: 4 fixed-width columns, centred. C = row gap, D = column gap --- */
.block-group--type6 .card-grid {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--size-6-card-w) * var(--u)));
  column-gap: calc(var(--gap-6-d) * var(--u));
  row-gap: calc(var(--gap-6-c) * var(--u));
  justify-content: center;
}

/* --- Card: fixed size, flex column so the button can be pinned to the bottom.
   G = padding-top, H = padding-left/right, I = padding-bottom (button -> card bottom) --- */
.block-group--type6 .card {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--size-6-card-h) * var(--u));
  padding: calc(var(--gap-6-g) * var(--u)) calc(var(--gap-6-h) * var(--u)) calc(var(--gap-6-i) * var(--u));
  background-color:var(--color-graphic-embellishment-2);
  border-radius: calc(24 * var(--u));    /* card corner radius */
}

/* --- Card h3 --- */
.block-group--type6 .card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(26 * var(--t));
  font-weight: 400;
  line-height: 1;
}

/* Card p: tighter line-height than the 1.55 default */
.block-group--type6 .card p {
  font-size: calc(20 * var(--t));
  line-height: 1.5;
}

/* E: h3 -> first p.   F: p -> p */
.block-group--type6 h3 + p {
  margin-top: calc(var(--gap-6-e) * var(--u));
}

.block-group--type6 p + p {
  margin-top: calc(var(--gap-6-f) * var(--u));
}

/* --- Card button (pill link), pinned to the bottom of the card by margin-top: auto.
   Three classes (0,3,0) so it beats the shared ".inner a:visited / :hover / :active"
   rule (0,2,1) in every link state, as well as ".inner a" underline/font:inherit. --- */
.block-group--type6 .card .card-button {
  margin-top: auto;
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(20 * var(--t));
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--color-logo-grey-text-dark);              /* button font color */
  background-color: var(--color-background-neutral); /* button background */
  border-radius: 999px;                            /* button corner radius; 999px = full pill */
  padding: calc(16 * var(--u)) calc(20 * var(--u));   /* top/bottom  left/right */
}


/* ===== block-group--type6: MOBILE (1024px and below) =====
   Single centred column of stacked cards; paragraphs hidden, so each card
   shows only its h3 and button. Placed after the desktop type6 rules and
   using the same selectors, so it wins by source order. Plain px values
   (not x --u, which varies from 0.4px on phones to 0.53px at 1024px). Only the card width
   scales, off the viewport width. */
@media (max-width: 1024px) {

  .block-group--type6 {

    --m-6-a: 36px;   /* top of group -> h2 (padding-top on group) */
    --m-6-b: 24px;   /* h2 -> first card */
    --m-6-c: 16px;   /* gap between stacked cards */
    --m-6-d: 20px;   /* card h3 -> button */
    --m-6-btn-w: 240px;   /* button width (fixed) */
    --m-6-g: 28px;   /* top of card -> h3 (padding-top on card) */
    --m-6-h: 24px;   /* left/right edge of card -> content */
    --m-6-i: 24px;   /* bottom of button -> bottom of card (padding-bottom on card) */
    --m-6-j: 44px;   /* bottom of last card -> bottom of group (padding-bottom on group) */

    padding-top: var(--m-6-a);
    padding-bottom: var(--m-6-j);
  }

  .block-group--type6 .content-block h2 {
    padding-left: 0;          /* nudge h2 in from the column's left edge; 0 = flush */
  }

  .block-group--type6 h2 + .card-grid {
    margin-top: var(--m-6-b);
  }

  /* One column, as wide as .inner; row-gap is the gap between stacked cards */
  .block-group--type6 .card-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--m-6-c);
  }

  .block-group--type6 .card {
    min-height: 0;
    padding: var(--m-6-g) var(--m-6-h) var(--m-6-i);
    border-radius: 16px;
  }

  .block-group--type6 .card h3 {
    text-align: center;
  }

  /* Paragraphs hidden on mobile (also hidden from screen readers) */
  .block-group--type6 .card p {
    display: none;
  }

  /* Button now sits a fixed gap below the h3 instead of being pinned to the card bottom */
  .block-group--type6 .card .card-button {
    margin-top: var(--m-6-d);
    width: var(--m-6-btn-w);
    max-width: 60%;          /* safety: never wider than the card's content area */
    align-self: center;       /* centre the narrower button in the card */
    font-size: 1rem;
    padding: 12px 16px;
  }
}

/* ==========================================================
   block-group--type7
   h2 + text column, with a free-positioned trust-line.
   All values are unitless px, scaled by var(--u).
   Overlay layout: text column and trust-line share one grid cell,
   each placed by its own left offset.
   ========================================================== */
.block-group--type7 {
  padding-top: calc(var(--gap-7-a) * var(--u));
  padding-bottom: calc(var(--gap-7-d) * var(--u));
}

.block-group--type7 .content-block .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Both children occupy the same cell; the taller one sets the height */
.block-group--type7 .inner > .text-col,
.block-group--type7 .inner > .trust-line {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

/* Text column */
.block-group--type7 .text-col {
  margin-left: calc(var(--gap-7-f) * var(--u));
  width: calc(var(--size-7-text-w) * var(--u));
  max-width: calc(100% - var(--gap-7-f) * var(--u));
}

.block-group--type7 .text-col h2,
.block-group--type7 .text-col p {
  margin: 0;
}

.block-group--type7 .text-col h2 + p {
  margin-top: calc(var(--gap-7-b) * var(--u));
}

.block-group--type7 .text-col p + p {
  margin-top: calc(var(--gap-7-c) * var(--u));
}

/* Trust-line: positioned by --gap-7-g; --nudge-7-e is a signed vertical nudge from centred */
.block-group--type7 .inner > .trust-line {
  margin-left: calc(var(--gap-7-g) * var(--u));
  position: relative;
  isolation: isolate;   /* own stacking context, so the blobs (z-index: -1) sit behind the image but never behind the group background */
  top: calc(var(--nudge-7-e) * var(--u));   /* signed nudge; doesn't affect layout */
  text-align: var(--align-7-tl);
  font-size: calc(var(--size-7-font-tl) * var(--t-display));
}

/* Trust-line as an image */
.block-group--type7 .trust-line img {
  display: block;
  width: calc(var(--size-7-w) * var(--u));
  height: auto;
  max-width: none;
  border-radius: calc(24 * var(--u));
}

/* Blobs: ::before = blob 1, ::after = blob 2.
   Positioned from the trust-line's top-left corner (the image's corner).
   Hidden unless --blobN-7-display is set to block. */
.block-group--type7 .inner > .trust-line::before,
.block-group--type7 .inner > .trust-line::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: var(--color-graphic-embellishment-1);
  border-radius: calc(24 * var(--u));
  pointer-events: none;
}

.block-group--type7 .inner > .trust-line::before {
  display: var(--blob1-7-display);
  top: calc(var(--blob1-7-top) * var(--u));
  left: calc(var(--blob1-7-left) * var(--u));
  width: calc(var(--blob1-7-width) * var(--u));
  height: calc(var(--blob1-7-height) * var(--u));
}

.block-group--type7 .inner > .trust-line::after {
  display: var(--blob2-7-display);
  top: calc(var(--blob2-7-top) * var(--u));
  left: calc(var(--blob2-7-left) * var(--u));
  width: calc(var(--blob2-7-width) * var(--u));
  height: calc(var(--blob2-7-height) * var(--u));
}


@media (max-width: 1024px) {


  /* Stack text and trust-line in separate rows, full width, no desktop offsets */
  .block-group--type7 .inner > .text-col,
  .block-group--type7 .inner > .trust-line {
    grid-row: auto;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-left: 0;
  }

  /* Gap between the text block and the trust-line (--gap-7-h) */
  .block-group--type7 .inner > .trust-line {
    margin-top: calc(var(--gap-7-h) * var(--u));
    top: 0;   /* cancels the desktop --nudge-7-e nudge */
    text-align: center;   /* always centred on mobile, whatever --align-7-tl is set to */
    font-size: calc(var(--size-7-font-tl) * var(--trust-unit-m));
  }

  /* Trust-line image: own mobile width, centred on the screen */
  .block-group--type7 .trust-line img {
    width: var(--size-7-w-m);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Blobs are never shown on mobile */
  .block-group--type7 .inner > .trust-line::before,
  .block-group--type7 .inner > .trust-line::after {
    display: none;
  }

}

/* ==========================================================================
   6. Divider (Authorisation)
   ========================================================================== */

hr {
  max-width: calc(var(--nominal-content-width) * var(--u));
  margin: calc(16 * var(--u)) auto;
  border: none;
  border-top: 1px solid var(--color-logo-primary);
}

.divider-authorisation {
  background-color:var(--color-background-darker);
  padding: calc(16 * var(--u)) 0;
}

@media (max-width: 1024px) {
  .divider-authorisation {
    padding: 16px var(--m-pad-page);
  }

  /* same width as the text above and below it */
  .divider-authorisation hr {
    max-width: calc(var(--m-col-w) - 2 * var(--m-pad-page));
  }
}


/* ==========================================================================
   7. Authorisation
   ========================================================================== */

.authorisation {
  background-color:var(--color-background-darker);
  padding: 0 0 calc(24 * var(--u));
}

.authorisation .inner {
  max-width: calc(var(--nominal-content-width) * var(--u));
  margin: 0 auto;
  padding: 0 calc(24 * var(--u));
}

.authorisation p {
  color:var(--color-logo-grey-text-dark);
  line-height: 1.5;
  margin-bottom: calc(8 * var(--u));
}

@media (max-width: 1024px) {
  .content-block .inner,
  .hero .inner,
  .authorisation .inner {
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-page);
  }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
  background-color:var(--color-logo-primary);
  color:var(--color-background-neutral);
  padding: calc(48 * var(--u)) calc(24 * var(--u));
}

/* Three-column layout: About (left) | Social (center) | Contact (right) */
.footer-inner {
  max-width: calc(1650 * var(--u));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(32 * var(--u));
}

.footer-col {
  flex: 1;
}

.footer-col-about {
  text-align: left;
}

.footer-col-social {
  text-align: center;
  flex: 0 0 auto;   /* just wide enough for the icons; About and Contact (flex: 1) split the rest equally */
}

.footer-col-contact {
  text-align: right;
}

.footer-tagline {
  font-size: max(calc(16 * var(--t)), var(--size-font-small-m));
  line-height: 1.4;
  color:var(--color-background-neutral);
  margin-bottom: calc(16 * var(--u));
  font-style: italic;
}

.footer-tagline .footer-brand {
  font-weight: 700;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--u));
  margin-bottom: calc(24 * var(--u));
  position: relative;
  left: calc(0 * var(--u));      /* Social icons horizontal position */
}

.footer-social a {
  color:var(--color-background-neutral);
  text-decoration: none;
}

.footer-social svg {
  display: block;                      /* removes the small gap inline SVGs leave below themselves */
  width: calc(55 * var(--u));      /* icon size at full width; scales with the viewport */
  height: calc(55 * var(--u));
}

.footer-phone {
  margin-bottom: calc(16 * var(--u));
  font-size: calc(20 * var(--t));
}

.footer-legal { /* Copyright and ABN */
  font-size: max(calc(18 * var(--t)), var(--size-font-small-m));
  color:var(--color-background-neutral);
  margin-bottom: calc(4 * var(--u));
  font-weight: 400;
}

/* Stack the three footer columns vertically and center everything on narrow screens */
@media (max-width: 1024px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-col-about,
  .footer-col-social,
  .footer-col-contact {
    text-align: center;
  }

  .footer-tagline  {
    font-size: var(--size-font-small-m);
    margin-bottom: 14px;
  }

  .footer-phone  {
  font-size: 1.125rem;
  margin-bottom: 24px;
  }

  .footer-legal  {
  font-size: var(--size-font-small-m);
  }

  /* Hide the ABN line on mobile (all pages) */
  .footer-abn {
    display: none;
  }

  /* Social icon size on mobile (all pages) */
  .footer-social {
    --m-footer-icon-size: 40px;      /* width and height of each icon */
  }

  .footer-social svg {
    width: var(--m-footer-icon-size);
    height: var(--m-footer-icon-size);
  }


}

/* ==========================================================================
   HOME PAGE — additional styles only
   --------------------------------------------------------------------------
   Every rule below is scoped
   under body.page-home (added only to the home page's <body> tag), so it
   layers on top of the shared rules above without editing or overriding
   them globally — other pages that use .hero, .content-block, etc. are
   completely unaffected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home page section background stripes
   --------------------------------------------------------------------------
   .home-stripe-1 / .home-stripe-2 are standalone, home-page-only classes
   used purely for alternating background color + a centered content
   column. They are intentionally independent of .block-group /
   .content-block and the --gap-1-x system used on resource-style pages:
   the home page's internal spacing (headings, paragraphs, list items
   within .approach-text, .areas-of-care, etc.) is already fully governed
   by its own bespoke rules further down this file, so these two classes
   do only two jobs each — background color, and the .inner container's
   max-width/centering/padding — and nothing else. Renaming or retuning
   --gap-1-x on other pages has zero effect here, and vice versa.
   -------------------------------------------------------------------------- */

.page-home .home-stripe-1 {
  background-color: var(--color-background-darker);
}

.page-home .home-stripe-2 {
  background-color: var(--color-background-neutral);
}

.page-home .home-stripe-1 > .inner,
.page-home .home-stripe-2 > .inner {
  max-width: calc(1732 * var(--u));
  margin: 0 auto;
  padding: calc(32 * var(--u)) calc(24 * var(--u));
}

/* Narrower container for this section only (overrides the 1732px stripe width).
   Four classes, so it beats ".page-home .home-stripe-2 > .inner" whatever the file order. */
.page-home .home-stripe-2.credentials > .inner {
  max-width: calc(1300 * var(--u));
}

/* --------------------------------------------------------------------------
   Hero — home page layout (two columns: text + image)
   The shared .hero / .hero .inner / .hero h1 / .hero p rules above are left
   exactly as they were; these just add/override the few properties needed
   for the home page's specific layout.
   -------------------------------------------------------------------------- */

.page-home .hero {
  text-align: left;
  padding-top: calc(100 * var(--u));
  padding-bottom: calc(70 * var(--u));   /* raise and lower the bottom of the hero section without impacting position of elements in hero */
}

.page-home .hero .inner {
  max-width: calc(1732 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(64 * var(--u));
}

.page-home .hero h1 {
  padding-top: calc(80 * var(--u));
  line-height: 1.1;
  margin-bottom: calc(24 * var(--u));
}

/* --------------------------------------------------------------------------
   Hero text column
   --------------------------------------------------------------------------
   display:flex + flex-direction:column + a fixed min-height turns this
   column into a deliberately-sized box: whatever content sits inside it,
   the box itself is always at least min-height tall. Combined with
   margin-top: auto on .hero-buttons (below), the button row always gets
   pushed down to the very bottom of that box — so it reliably ends up
   below the image's bottom edge, regardless of exactly how many lines
   the heading or paragraphs wrap to at any given screen size.
   -------------------------------------------------------------------------- */
.page-home .hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Tuned to sit comfortably above this column's natural content height
     AND above the image's total occupied height (image height + its own
     top/bottom margin), so the "poke" below the image is reliable. If you
     change the hero copy length, the heading font size, or the image
     size/margins, re-check this number against those. */
  min-height: calc(1220 * var(--u));
  padding-bottom: calc(110 * var(--u));  /* Adjust vertical position of hero section buttons */
}

.page-home .hero-image {
  flex: 1;
  min-width: 0;
}

/* Higher specificity than the shared ".hero p" rule (two classes beat one
   class + one type), so this wins without needing !important */
.page-home .hero-lede {
  padding-top: calc(53 * var(--u));
  padding-bottom: calc(80 * var(--u));
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: calc(48 * var(--t-display));
  line-height: 1.5;
}

.page-home .hero-p {
  line-height: 1.5;
  padding-bottom: calc(20 * var(--u));
}

/* Row that holds the two hero buttons. margin-top: auto (in a column flex
   parent) soaks up all of .hero-text's leftover space above this row,
   pinning the buttons to the bottom of the column — see the comment on
   .page-home .hero-text above. */
.page-home .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centres the buttons within the text column */
  gap: calc(50 * var(--u));
  margin-top: auto;
}

.page-home .hero-image img {
  border-radius: calc(24 * var(--u));
  margin-top: calc(68 * var(--u));
  margin-bottom: calc(48 * var(--u));
  width: calc(790 * var(--u));
  height: auto;
}

/* Mobile hero rules live in the "HOME PAGE - MOBILE" block after the Our Approach section. */


/* --------------------------------------------------------------------------
   Shared helpers used across the new home page sections below
   (buttons, placeholders, eyebrow labels) — all new class names, additive.
   -------------------------------------------------------------------------- */

.page-home .centered {
  text-align: center;
}

.page-home .eyebrow-label {
  font-size: max(calc(19 * var(--t)), var(--size-font-label-m));
  line-height: normal;
  color: var(--color-logo-secondary-dark);
  letter-spacing: 0.05em;
  margin-bottom: calc(42 * var(--u));
}

.page-home .eyebrow-label.centered {
  text-align: center;
}

.page-home .intro-text {
  max-width: calc(900 * var(--u));
  margin-left: auto;
  margin-right: auto;
}

.page-home .btn {
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(22 * var(--t));
  padding: calc(24 * var(--u)) calc(40 * var(--u));
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Note on ".page-home.page-home" below: the shared rule
   ".inner a:visited, .inner a:hover, .inner a:active { color: inherit; }"
   (see section 2, Base/Typography — left untouched) has specificity
   (2 classes, 1 type), because a pseudo-class like :visited counts as a
   class for specificity purposes. A plain ".page-home .btn-outline" is
   only (2 classes, 0 type), which TIES on the class column and then
   loses on the type column — so once a "#" link is clicked and becomes
   :visited, its color silently reverts to black. Repeating ".page-home"
   adds a third class, clearing that tie outright (no reliance on source
   order), so these always win regardless of visited state.
   -------------------------------------------------------------------------- */

.page-home.page-home .btn-outline {
  color: var(--color-logo-primary);
  background-color: transparent;
  font-weight: 400;
}

/* Solid maroon-on-cream button — used for the hero's "Book a consultation" */
.page-home.page-home .btn-primary {
  background-color: var(--color-logo-primary);
  color: var(--color-background-neutral);
  font-weight: 400;
}

/* Solid cream-on-maroon button — used for the CTA section's button, so it
   reads as a bright pill against that section's mauve background */
.page-home.page-home .btn-solid {
  background-color: var(--color-background-neutral);
  color: var(--color-logo-primary);
  font-weight: 400;
}


/* --------------------------------------------------------------------------
   Our Approach section
   -------------------------------------------------------------------------- */

.page-home .approach {
  padding-top: calc(100 * var(--u));
  padding-bottom: calc(100 * var(--u));   /* bottom padding of this section */
}

/* Container width for this section only. Currently the same as the stripe (1732px), so it only matters if the stripe width changes.
   Four classes, so it beats ".page-home .home-stripe-1 > .inner" whatever the file order. */
.page-home .approach > .inner.approach-inner {
  max-width: calc(1732 * var(--u));
}

.page-home .approach-inner {
  display: flex;
  align-items: center;                 /* vertical centring of both columns */
  gap: calc(80 * var(--u));
}

/* Left: the image column takes whatever width the text column doesn't */
.page-home .approach-image {
  position: relative;
  flex: 1;
  min-width: 0;
  left: calc(2 * var(--u));
}

.page-home .approach-image img {
  display: block;
  /* width: 100%;
  height: auto; */
  width: calc(800 * var(--u));
  height: auto;
  border-radius: calc(24 * var(--u));
  position: relative;
  z-index: 2;                          /* above the blobs (z-index: 1) */
}

/* Right: fixed-width text column */
.page-home .approach-text {
  flex: 0 0 auto;
  width: calc(760 * var(--u));         /* the text column width */
  padding-left: calc(40 * var(--u));   /* text placement inside the column */
  padding-right: 0;
  text-align: left;
}

/* Soft rounded-rectangle shapes peeking out from behind the photo */
.page-home .blob {
  position: absolute;
  z-index: 1;
  background-color: var(--color-graphic-embellishment-1);
  border-radius: calc(24 * var(--u));
}

.page-home .blob-1 {
  top: calc(-30 * var(--u));
  left: calc(-30 * var(--u));
  width: calc(140 * var(--u));
  height: calc(140 * var(--u));
}

.page-home .blob-2 {
  bottom: calc(-34 * var(--u));
  right: calc(10 * var(--u));
  width: calc(200 * var(--u));
  height: calc(170 * var(--u));
}

.page-home .approach-text h2 {
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: calc(20 * var(--u));
}

.page-home .approach-text > p:not(.eyebrow-label) {
  margin-bottom: calc(32 * var(--u));
}

.page-home .approach-steps {
  list-style: none;
}

.page-home .approach-steps li {
  display: flex;
  gap: calc(24 * var(--u));
  margin-bottom: calc(28 * var(--u));
}

.page-home .approach-steps li:last-child {
  margin-bottom: 0;
}

.page-home .step-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(45 * var(--t-display));
  color: var(--color-logo-secondary-dark);
  line-height: 1;
  flex-shrink: 0;
}

.page-home .step-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  margin-bottom: calc(6 * var(--u));
}

.page-home .step-body p {
  line-height: 1.5;
}

/* ==========================================================================
   HOME PAGE - MOBILE (max-width: 1024px): Hero + Our Approach
   --------------------------------------------------------------------------
   Placed AFTER the hero, shared-helper and approach rules so that, at equal
   specificity, these win by source order. Every rule is scoped to .page-home.

   Sizes here are FIXED px (not multiplied by --u), the same approach the
   shared mobile menu uses, so text stays readable on a phone instead of
   shrinking with the viewport. Tune the look from the variables below.
   ========================================================================== */
@media (max-width: 1024px) {

  .page-home {
    --m-pad-hero: 12px;      /* hero left/right padding */
    --m-pad-section: var(--m-pad-page);   /* left/right padding for the sections below the hero */
    --m-section-y: 44px;     /* top/bottom padding of the sections below the hero */
    --m-body-lh: 1.45;
    --m-lede: clamp(1.0625rem, 0.54167rem + 1.30208vw, 1.375rem);
    --m-label: var(--size-font-label-m);   /* "OUR APPROACH" style eyebrow labels (tablet scale, see :root) */
  }

  /* ---------------------------- HERO ----------------------------
     Layout: a 2-column grid. h1 and lede sit in the left column;
     the narrow portrait spans those three rows on the right. The two
     paragraphs and the button then run full width underneath.
     .hero-text uses display: contents, so its children take part in the
     grid directly (no HTML restructuring needed). */
  .page-home .hero {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .page-home .hero .inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36%;
    grid-template-rows: auto auto 1fr;   /* lede row absorbs any extra image height */
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-hero);
  }

  .page-home .hero-text {
    display: contents;
  }

  .page-home .hero h1 {
    grid-column: 1;
    grid-row: 2;
    line-height: 1.1;
    padding-top: 0;
    margin-bottom: 0;
  }

  .page-home .hero-lede {
    grid-column: 1;
    grid-row: 3;
    font-size: var(--m-lede);
    line-height: 1.4;
    padding-top: 28px;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .page-home .hero-image {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .page-home .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 24px;
    border-radius: 14px;
  }

  .page-home .hero-p {
    grid-column: 1 / -1;
    line-height: var(--m-body-lh);
    padding-bottom: 0;
    margin-bottom: 20px;
  }

  .page-home .hero-buttons {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  /* Mobile shows only the outline button */
  .page-home .hero .btn-primary {
    display: none;
  }

  /* "Explore Our Care" buttons: hero + Areas of Care share one rule so they stay identical.
     Tune both from these four values. */
  .page-home .hero .btn-outline,
  .page-home .areas-of-care .btn-outline {
    --m-btn-font-size: 0.9375rem;
    --m-btn-font-style: normal;    /* normal | italic */
    --m-btn-pad-y: 16px;           /* space above and below the text */
    --m-btn-pad-x: 20px;           /* space left and right of the text */

    font-size: var(--m-btn-font-size);
    font-style: var(--m-btn-font-style);
    padding: var(--m-btn-pad-y) var(--m-btn-pad-x);
    text-align: center;
  }

  /* ------------------------- OUR APPROACH -------------------------
     Image and decorative blobs are removed; text becomes one column. */
  .page-home .approach {
    padding-top: var(--m-section-y);
    padding-bottom: var(--m-section-y);
  }

  /* 4 classes, same as the desktop rule it overrides; wins by source order */
  .page-home .approach > .inner.approach-inner {
    display: block;
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-section);
  }

  .page-home .approach-image {
    display: none;   /* also hides both .blob elements inside it */
  }

  .page-home .approach-text {
    width: 100%;
    padding-left: 0;
  }

  .page-home .approach-text .eyebrow-label {
    font-size: var(--m-label);
    text-align: center;
    margin-bottom: 32px;
  }

  .page-home .approach-text h2 {
    text-align: center;
    margin-bottom: 32px;
  }

  .page-home .approach-text > p:not(.eyebrow-label) {
    line-height: var(--m-body-lh);
    margin-bottom: 32px;
  }

  .page-home .approach-steps li {
    margin-bottom: 22px;
  }

  .page-home .step-number {
    display: none;
  }

  .page-home .step-body h3 {
    margin-bottom: 6px;
  }

  .page-home .step-body p {
    line-height: var(--m-body-lh);
  }
}


/* --------------------------------------------------------------------------
   Areas of Care section
   -------------------------------------------------------------------------- */

.page-home .areas-of-care {
  padding-top: calc(100 * var(--u));
  padding-bottom: calc(100 * var(--u));   /* bottom padding of this section */
}

.page-home .areas-of-care h2 {
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: calc(48 * var(--u));
}

.page-home .areas-of-care .intro-text {
  margin-bottom: calc(90 * var(--u));
}

.page-home .care-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(30 * var(--u));
  margin-bottom: calc(90 * var(--u));
}

.page-home .care-card {
  background-color: #ffffff;
  border: 1px solid var(--color-graphic-embellishment-1);
  border-radius: calc(24 * var(--u));
  overflow: hidden;
}

.page-home .care-card .card-image {
  display: block;
  width: 100%;
  height: auto;               /* needed: cancels the height attribute so aspect-ratio can work */
  aspect-ratio: 4 / 3;        /* change this to reshape every card image */
  object-fit: cover;          /* crop to fill, never stretch */
  object-position: center;    /* e.g. "center top" to keep faces in frame */
  border-bottom: 1px solid var(--color-graphic-embellishment-1);
}

.page-home .care-card-body {
  padding: calc(27 * var(--u));
}

.page-home .care-card-body h3 {
  font-family: 'Inter', Arial, sans-serif;
  margin-bottom: calc(10 * var(--u));
}

.page-home .care-card-body h3 a {
  color: var(--color-logo-primary);
  font-weight: 700;
  text-decoration: underline;
}

.page-home .care-card-body p {
  line-height: 1.5;
  color: var(--color-logo-grey-text);
}

/* Areas of Care - mobile: section padding, eyebrow, heading, intro and care cards */
@media (max-width: 1024px) {
  .page-home .areas-of-care {
    padding-top: var(--m-section-y);
    padding-bottom: var(--m-section-y);
  }

  .page-home .areas-of-care > .inner {
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-section);
  }

  .page-home .areas-of-care .eyebrow-label {
    font-size: var(--m-label);
    margin-bottom: 26px;
  }

  .page-home .areas-of-care h2 {
    margin-bottom: 24px;
  }

  .page-home .areas-of-care .intro-text {
    line-height: var(--m-body-lh);
    text-align: left;
    max-width: none;          /* drop the desktop centred-column width */
    margin-left: 0;
    margin-right: 0;
  }

  /* ---- Care cards (mobile) ----
     Tune everything from these variables. */
  .page-home .care-cards {
    /* 1) Card size and spacing */
    --m-card-width: 100%;            /* e.g. 100%, 320px */
    --m-card-height: auto;          /* e.g. auto, 380px */
    --m-card-gap: 40px;             /* vertical space between cards */
    row-gap: var(--m-card-gap);
    grid-template-columns: minmax(0, 1fr);

    /* 2) Card image height (width follows the card) */
    --m-card-img-height: 280px;

    /* 3) h3 */
    --m-card-h3-font: 'Inter', Arial, sans-serif;
    --m-card-h3-color: var(--color-logo-primary);
    --m-card-h3-weight: 700;
    --m-card-h3-padding: 20px 20px 8px 20px;   /* top right bottom left */

    /* 4) p */
    --m-card-p-font: 'Inter', Arial, sans-serif;
    --m-card-p-color: var(--color-logo-grey-text);
    --m-card-p-weight: 400;
    --m-card-p-padding: 0 20px 20px 20px;      /* top right bottom left */

  }

  .page-home .care-card {
    width: var(--m-card-width);
    height: var(--m-card-height);
    justify-self: center;            /* centres the card if it's narrower than its column */
  }

  .page-home .care-card .card-image {
    aspect-ratio: auto;              /* cancels the desktop 4/3 so the height below applies */
    height: var(--m-card-img-height);
    object-position: center top;     /* image sits at the top of the card; any cropping comes off the bottom */
  }

  /* The body's own padding is removed so the h3 and p paddings are the only spacing */
  .page-home .care-card-body {
    padding: 0;
  }

  .page-home .care-card-body h3 {
    margin: 0;
    padding: var(--m-card-h3-padding);
    font-family: var(--m-card-h3-font);
  }

  /* Colour and weight are set on the link, because the h3 contains an <a> */
  .page-home .care-card-body h3 a {
    color: var(--m-card-h3-color);
    font-weight: var(--m-card-h3-weight);
  }

  .page-home .care-card-body p {
    margin: 0;
    padding: var(--m-card-p-padding);
    font-family: var(--m-card-p-font);
    font-weight: var(--m-card-p-weight);
    color: var(--m-card-p-color);
  }

}


/* --------------------------------------------------------------------------
   Patient Stories section
   -------------------------------------------------------------------------- */

.page-home .patient-stories {
  padding-top: calc(100 * var(--u));
  padding-bottom: calc(100 * var(--u));   /* bottom padding of this section */
}

.page-home .patient-stories h2 {
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: calc(48 * var(--u));
}


/* --------------------------------------------------------------------------
   Testimonials slider (Patient Stories)
   --------------------------------------------------------------------------
   Sizing: every size is calc(Npx * var(--ts-u)). --ts-u is the site's --u
   scale multiplied by --ts, so the slider scales with the viewport exactly like
   the rest of the home page. --ts is the ONE knob that replaces the old Wix
   scale script: 1 = the original 670px-wide design, 1.1 = 10% bigger, etc.
   -------------------------------------------------------------------------- */

.page-home .testimonial-slider {
  --ts: 1.6;                                      /* overall slider size */
  --ts-u: calc(var(--u) * var(--ts));           /* one "slider pixel" */
  --ts-t: calc(var(--t) * var(--ts));           /* one "slider text pixel" (font sizes only) */
  --ts-text-grey: var(--color-logo-grey-text-dark);

  width: calc(670 * var(--ts-u));
  max-width: 100%;
  margin: 0 auto;
}

.page-home .testimonial-viewport {
  overflow: hidden;
}

/* The row of slides. All slides stretch to the tallest one, so the slider
   height adapts to the text and never clips a long testimonial. */
.page-home .testimonial-track {
  display: flex;
  touch-action: pan-y pinch-zoom;                            /* vertical scroll stays native; horizontal is the swipe */
}

.page-home .testimonial-slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(20 * var(--ts-u)) calc(40 * var(--ts-u));
}

.page-home .testimonial-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: calc(18 * var(--ts-t));
  line-height: 1.8;
  color: var(--color-logo-primary);
  margin-bottom: calc(18 * var(--ts-u));
}

.page-home .testimonial-quote p {
  font-size: inherit;
  line-height: inherit;
}

.page-home .testimonial-author {
  display: block;
  font-style: normal;
}

.page-home .testimonial-name {
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: max(calc(14 * var(--ts-t)), var(--size-font-p-m));   /* name stays one step above the role, as on phones */
  color: var(--ts-text-grey);
  margin-bottom: calc(4 * var(--ts-u));
}

.page-home .testimonial-role {
  display: block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: max(calc(12 * var(--ts-t)), var(--size-font-caption-m));
  color: var(--ts-text-grey);
}

/* --- Controls: [ < ]  o o o  [ > ] in one centred row (no absolute positioning) --- */

.page-home .testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(17 * var(--ts-u));
  margin-top: calc(8 * var(--ts-u));
}

/* "display:flex" above would otherwise override the HTML hidden attribute */
.page-home .testimonial-controls[hidden] {
  display: none;
}

.page-home .testimonial-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(34 * var(--ts-u));
  height: calc(34 * var(--ts-u));
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-logo-secondary);
  color: var(--color-logo-secondary);             /* the SVG strokes use currentColor */
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .page-home .testimonial-arrow:hover {
    box-shadow: 0 4px 10px rgba(88, 44, 68, 0.2);
  }
}

.page-home .testimonial-arrow:active {            /* replaces the old JS ".pressed" class */
  transform: scale(0.82);
  opacity: 0.65;
}

.page-home .testimonial-arrow svg {
  width: calc(16 * var(--ts-u));
  height: calc(16 * var(--ts-u));
}

.page-home .testimonial-dots {
  display: flex;
  align-items: center;
}

/* Each dot is a <button> with generous padding (easy to tap); the visible dot is drawn by ::before */
.page-home .testimonial-dot {
  display: flex;
  align-items: center;
  padding: calc(10 * var(--ts-u)) calc(3 * var(--ts-u));
  background: none;
  border: 0;
  cursor: pointer;
}

.page-home .testimonial-dot::before {
  content: "";
  display: block;
  width: calc(7 * var(--ts-u));
  height: calc(7 * var(--ts-u));
  border-radius: 999px;
  background: var(--color-logo-secondary);
  transition: width 0.35s ease, background 0.25s ease, transform 0.18s ease;
}

.page-home .testimonial-dot[aria-current="true"]::before {
  width: calc(22 * var(--ts-u));
  background: var(--color-logo-secondary-dark);
}

.page-home .testimonial-dot:active::before {
  transform: scale(0.7);
}

.page-home .testimonial-dot.is-pulsing::before {
  animation: testimonialDotPulse 0.28s ease;
}

@keyframes testimonialDotPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.78); }
  100% { transform: scale(1); }
}

/* Visible keyboard focus */
.page-home .testimonial-arrow:focus-visible,
.page-home .testimonial-dot:focus-visible {
  outline: 2px solid var(--color-logo-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .testimonial-arrow,
  .page-home .testimonial-dot::before {
    transition: none;
  }
  .page-home .testimonial-dot.is-pulsing::before {
    animation: none;
  }
}

/* Mobile: --u varies below the breakpoint (0.4px to 0.53px), so use plain px (as the Wix mobile version did) */
@media (max-width: 1024px) {
  .page-home .testimonial-slider {
    --ts-u: 1px;                                  /* 1px: calc(18 * 1px) = 18px */
    --ts-t: 1px;                                  /* same for slider text sizes */
    width: 100%;
  }

  .page-home .testimonial-quote {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .page-home .patient-stories .eyebrow-label {
    font-size: var(--m-label);
    margin-bottom: 26px;
  }

    .page-home .patient-stories {
    padding-top: var(--m-section-y);
    padding-bottom: var(--m-section-y);
  }

  .page-home .patient-stories > .inner {
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-section);
  }

  .page-home .patient-stories h2 {
    margin-bottom: 24px;
  }

}

/* --------------------------------------------------------------------------
   Credentials & Affiliations section
   -------------------------------------------------------------------------- */

.page-home .credentials {
  padding-top: calc(100 * var(--u));
  padding-bottom: calc(100 * var(--u));   /* bottom padding of this section */
}

.page-home .credentials h2 {
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: calc(48 * var(--u));
}

.page-home .credentials .intro-text {
  margin-bottom: calc(100 * var(--u)); /* gap immediately above logo cards */
  max-width: calc(1200 * var(--u));   /* new: the line is about 1,100px wide at this size */
}

/* 3 columns x 2 rows of equally spaced logo containers */
.page-home .logo-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(340 * var(--u)));   /* card width: change this number */
  justify-content: center;                                       /* keeps the narrower grid centred */
  gap: calc(32 * var(--u));
  margin-bottom: calc(100 * var(--u)); /* gap immediately below logo cards */
}

/* Card wrapper: <figure> holding the logo box + its caption (<figcaption>) */
.page-home .logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
   /* top/bottom  left/right */
  padding: calc(20 * var(--u)) calc(10 * var(--u));
  background-color: var(--color-background-darker);
  border: 1px solid var(--color-graphic-embellishment-1);
  border-radius: calc(24 * var(--u));
}

.page-home .logo-card .logo-image {
  display: block;
  width: 90%;
  height: auto;                 /* cancels the height attribute so aspect-ratio works */
  aspect-ratio: 5 / 2;          /* the logo box shape */
  object-fit: contain;          /* whole logo always visible, never cropped or stretched */
  object-position: center;
  padding: calc(8 * var(--u));   /* breathing room so logos don't touch the edge */
}

.page-home .logo-card figcaption {
  font-size: max(calc(16 * var(--t)), var(--size-font-caption-m));
  line-height: 1.3;
  text-align: center;
  color: var(--color-logo-primary);
}

/* --------------------------------------------------------------------------
   Credentials & Affiliations - mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .page-home .credentials {
    padding-top: var(--m-section-y);
    padding-bottom: var(--m-section-y);
  }

  /* 4 classes, to match the desktop rule that sets this section's wider max-width */
  .page-home .home-stripe-2.credentials > .inner {
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-section);
  }

  .page-home .credentials .eyebrow-label {
    font-size: var(--m-label);
    margin-bottom: 26px;
  }

  .page-home .credentials h2 {
    margin-bottom: 24px;
  }

  .page-home .credentials .intro-text {
    line-height: var(--m-body-lh);
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 32px;             /* gap above the first logo card */
  }

  /* Logo cards: one column, stacked. Tune everything from these variables. */
  .page-home .logo-grid {
    --m-logo-gap: 20px;                          /* vertical space between cards */
    --m-logo-grid-gap-below: 32px;               /* space between the last card and the resources line */
    --m-logo-cap-size: var(--size-font-caption-m);  /* figcaption font size (tablet scale, see :root) */
    --m-logo-cap-padding: 0 10px 0 10px;         /* figcaption padding: top right bottom left */

    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--m-logo-gap);
    margin-bottom: var(--m-logo-grid-gap-below);
  }

  .page-home .logo-card figcaption {
    font-size: var(--m-logo-cap-size);
    padding: var(--m-logo-cap-padding);
  }

  .page-home .credentials .resources-line {
    line-height: var(--m-body-lh);
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   CTA section (above footer) — new section, not present on other pages
   -------------------------------------------------------------------------- */

.page-home .cta {
  position: relative;
  overflow: hidden;
  background-color: var(--color-logo-secondary-dark);
  padding: calc(100 * var(--u)) 0;
}

/* Large, soft circles bleeding in from opposite corners */
.page-home .cta-circle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, var(--circ-5-alpha));
  pointer-events: none;
}

.page-home .cta-circle-tl {
  top: calc(-120 * var(--u));
  left: calc(-120 * var(--u));
  width: calc(420 * var(--u));
  height: calc(420 * var(--u));
}

.page-home .cta-circle-br {
  bottom: calc(-140 * var(--u));
  right: calc(-140 * var(--u));
  width: calc(420 * var(--u));
  height: calc(420 * var(--u));
}

.page-home .cta-inner {
  position: relative;
  z-index: 1;
  max-width: calc(1650 * var(--u));
  margin: 0 auto;
  padding: 0 calc(24 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(64 * var(--u));
}

.page-home .cta-text,
.page-home .cta-info {
  flex: 1;
  min-width: 0;
}

.page-home .cta-text h2 {
  font-weight: 400;
  color: var(--color-background-neutral);
  margin-bottom: calc(50 * var(--u));
}

.page-home .cta-text p {
  color: var(--color-background-neutral);
  margin-bottom: calc(50 * var(--u));
}

/* First of the two CTA paragraphs: no gap, so it reads as one block like the mockup */
.page-home .cta-text .cta-lead {
  margin-bottom: calc(20 * var(--u));
}

.page-home .cta-info {
  display: flex;
  flex-direction: column;
  gap: calc(44 * var(--u)); /* Vertical gap between phone and addess blocks */
}

.page-home .cta-pill {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  background-color: rgba(88, 44, 68, 0.15);
  border-radius: calc(20 * var(--u));
  min-height: calc(100 * var(--u));        /* pill minimum height, applies to both pills */
  padding: 0 calc(28 * var(--u));           /* Sides only, height now controls the vertical size */
  color: var(--color-background-neutral);   /* so ".inner a:visited { color: inherit }" resolves to cream, not black */
}

/* <address> is italic by default in browsers */
.page-home address.cta-pill {
  font-style: normal;
}

.page-home .cta-icon {
  flex-shrink: 0;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 50%;
  background-color: var(--color-logo-secondary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background-neutral);
}

.page-home .cta-icon svg {
  width: calc(35 * var(--u));
  height: calc(35 * var(--u));
}

.page-home .cta-pill-text {
  font-size: calc(24 * var(--t));
  color: var(--color-background-neutral);
}

.page-home .cta-pill-phone .cta-pill-text {
  font-size: calc(40 * var(--t-display));      /* phone number size */
}

.page-home .cta-pill-address .cta-pill-text {
  font-size: calc(26 * var(--t));      /* address size */
}

/* Phone number is now a tel: link; the shared ".inner a" underline is switched off for it */
.page-home a.cta-pill-text {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   CTA section - mobile (1024px and below)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* 1 + 2: hide both decorative circles */
  .page-home .cta-circle-tl,
  .page-home .cta-circle-br {
    display: none;
  }

  .page-home .cta {
    padding: var(--m-section-y) 0;
  }

  /* One column. .cta-text and .cta-info use display: contents (below), so their
     children (heading, paragraphs, button, pills) become direct items of this flex
     column and can be reordered. Tune everything from these variables. */
  .page-home .cta-inner {
    --m-cta-pill-width: 90%;               /* 4: width of both pills (e.g. 100%, 320px) */
    --m-cta-pill-gap: 16px;                 /* vertical gap between the two pills */
    --m-cta-pill-padding: 14px 16px;        /* inside each pill: vertical horizontal */
    --m-cta-phone-size: 1.25rem;               /* phone number text */
    --m-cta-address-size: var(--size-font-label-m);   /* address text (tablet scale, see :root) */
    --m-cta-icon-size: 32px;                /* round icon (the glyph inside scales with it) */
    --m-cta-btn-size: 1rem;                 /* button font size */
    --m-cta-btn-pad-y: 16px;                /* button space above and below the text */
    --m-cta-btn-pad-x: 20px;                /* button space left and right of the text */
    --m-cta-btn-gap: 28px;                  /* space between the address pill and the button */

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: var(--m-col-w);
    padding: 0 var(--m-pad-section);
  }

  .page-home .cta-text,
  .page-home .cta-info {
    display: contents;
  }

  .page-home .cta-text h2 {
    margin-bottom: 20px;
  }

  .page-home .cta-text p {
    line-height: var(--m-body-lh);
    margin-bottom: 28px;                    /* gap above the phone pill */
  }

  .page-home .cta-text .cta-lead {
    margin-bottom: 16px;
  }

  /* 4 + 5: pills - adjustable width and vertical gap, centred on the screen */
  .page-home .cta-pill {
    align-self: center;
    width: var(--m-cta-pill-width);
    max-width: 100%;
    min-height: 0;                          /* desktop uses a minimum height; mobile grows with its text */
    padding: var(--m-cta-pill-padding);
    gap: 12px;
    border-radius: 16px;
  }

  .page-home .cta-pill-address {
    margin-top: var(--m-cta-pill-gap);
  }

  .page-home .cta-pill-phone .cta-pill-text {
    font-size: var(--m-cta-phone-size);
  }

  .page-home .cta-pill-address .cta-pill-text {
    font-size: var(--m-cta-address-size);
    line-height: 1.35;
  }

  .page-home .cta-icon {
    width: var(--m-cta-icon-size);
    height: var(--m-cta-icon-size);
  }

  .page-home .cta-icon svg {
    width: calc(var(--m-cta-icon-size) * 0.7);
    height: calc(var(--m-cta-icon-size) * 0.7);
  }

  /* 6 + 7 + 8 + 9: button - centred, below the address pill, adjustable text size and padding */
  .page-home .cta .btn-solid {
    order: 1;                               /* every other item has order 0, so the button comes last */
    align-self: center;
    margin-top: var(--m-cta-btn-gap);
    font-size: var(--m-cta-btn-size);
    padding: var(--m-cta-btn-pad-y) var(--m-cta-btn-pad-x);
    text-align: center;
  }

}

/* --------------------------------------------------------------------------
   Footer - mobile, HOME PAGE ONLY
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-home .footer-phone {
    display: none;     /* the number already appears in the CTA section above */
  }
}


/* CONTACT page */

/* Google Map */
.google-map-embed {
  width: 100%;
  max-width: calc(1000 * var(--u));
  aspect-ratio: 16 / 9;   /* change to 4 / 3, or set a fixed height instead */
  margin: calc(56 * var(--u)) auto;
  border-radius: calc(24 * var(--u));
  overflow: hidden;
}

.google-map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* BVMC photo */
.bvmc-photo {
  width: 100%;
  max-width: calc(800 * var(--u));
  margin: calc(24 * var(--u)) auto;
}

.bvmc-photo img {
  display: block;
  width: 100%;
  height: auto;           /* keeps natural proportions */
  border-radius: calc(24 * var(--u));
}

/* Google Reviews logo */
.google-reviews-logo {
  width: 100%;
  max-width: calc(400 * var(--u));
  margin: calc(56 * var(--u)) auto;
}

.google-reviews-logo img {
  display: block;
  width: 100%;
  height: auto;           /* keeps natural proportions */
}

.google-reviews-logo a:hover img {
  opacity: 0.8;
}

/* CONTACT page: MOBILE (1024px and below)
   Fixed px (not x --u, which varies from 0.4px on phones to 0.53px at 1024px). Tune from the variables. */
@media (max-width: 1024px) {
  :root {
    --m-contact-radius: 16px;       /* corner radius of map and photo */
    --m-contact-map-ratio: 4 / 3;   /* map shape (desktop is 16 / 9) */
    --m-contact-gap: 32px;          /* space above and below map and logo */
    --m-contact-photo-gap: 24px;    /* space above and below the photo */
    --m-contact-logo-w: 200px;      /* Google Reviews logo width */
  }

  .google-map-embed {
    max-width: none;                /* fill the text column instead of capping at 400px */
    aspect-ratio: var(--m-contact-map-ratio);
    margin: var(--m-contact-gap) auto;
    border-radius: var(--m-contact-radius);
  }

  .bvmc-photo {
    max-width: none;                /* fill the text column instead of capping at 320px */
    margin: var(--m-contact-photo-gap) auto;
  }

  .bvmc-photo img {
    border-radius: var(--m-contact-radius);
  }

  .google-reviews-logo {
    max-width: var(--m-contact-logo-w);
    margin: var(--m-contact-gap) auto;
  }
}

/* TABLET (641px to 1024px): two cards across instead of one. */
@media (width > 640px) and (width <= 1024px) {
  .block-group--type6 .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  /* With two cards across, let the button use the card's full content width so its label stays on two lines */
  .block-group--type6 .card .card-button {
    max-width: 100%;
  }

  .page-home .care-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .page-home .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}

/* ==========================================================================
   TABLET LAYOUT (641px to 1024px): added at the end of this file.
   - Everything tablet-specific is in the blocks below, all using
     (width > 640px) and (width <= 1024px), with one structural step at 769px.
   - Desktop rules (1025px and above) are unchanged, except the one heading-spacing fix
     directly below (type 1: p + h2).
   - Phone rules (640px and below) are unchanged except the POLISH block at the very end
     of this file (footer margins, type 6 card margins, hero and fee-table spacing, corner radii,
     hamburger tap size, hero picture shape).
   - Tablet variables are --tb-*. Text sizes still come from the existing --size-font-*-m tokens.
   ========================================================================== */

/* ==========================================================================
   FIX (all widths): an h2 that follows a paragraph or list in the same
   type 1 section had no space above it. Uses gap D (desktop) / --m-1-d (phone, tablet).
   ========================================================================== */
.block-group--type1 p + h2,
.block-group--type1 ul + h2 {
  margin-top: calc(var(--gap-1-d) * var(--u));
}
@media (max-width: 1024px) {
  .block-group--type1 p + h2,
  .block-group--type1 ul + h2 { margin-top: var(--m-1-d); }
}

/* ==========================================================================
   TABLET LAYER (641px to 1024px): all tablet-specific design lives below.
   Query is (width > 640px) so there is no gap at fractional widths.
   Variables are --tb-*. Never uses --u for text.
   ========================================================================== */
@media (width > 640px) and (width <= 1024px) {

  :root {
    --tb-col-w: 960px;                                              /* outer container width (content = this minus 2 x --tb-pad) */
    --tb-pad: clamp(28px, calc(28px + (100vw - 641px) * 0.03133), 40px);   /* side gutter: 28px at 641 -> 40px at 1024 */
    --tb-logo-h: clamp(46px, calc(46px + (100vw - 641px) * 0.03133), 58px); /* header logo height: 46 -> 58 */
    --tb-fs-small: clamp(0.75rem, 0.6454rem + 0.261vw, 0.8125rem);   /* footer small text: 12px -> 13px (never below 12) */
  }

  /* ---------------- HEADER: one compact row ---------------- */
  .site-header-inner {
    max-width: var(--tb-col-w);
    flex-wrap: nowrap;
    gap: 16px;
    padding: 10px var(--tb-pad);
  }
  .site-header-inner::after { display: none; }
  .logo { order: 1; margin: 0 auto 0 0; }
  .logo img { height: var(--tb-logo-h); }
  .book-button {
    order: 2;
    margin: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 26px;
  }
  .hamburger {
    order: 3;
    margin: 0 -9px 0 0;       /* bars line up with the container edge */
    width: 44px;
    height: 44px;
    padding: 13px 9px;        /* 44 x 44 tap target around the 26px-wide bars */
  }

  /* ---------------- HOME HERO ---------------- */
  .page-home .hero { padding-top: 40px; padding-bottom: 56px; }
  /* Picture (700 x 935 file) sits beside the headline, lede AND both paragraphs; buttons run full width below.
     The extra row (1fr) absorbs any height the picture has over the text. */
  .page-home .hero .inner {
    max-width: var(--tb-col-w);
    padding: 0 var(--tb-pad);
    grid-template-columns: minmax(0, 1fr) 40%;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 32px;
  }
  .page-home .hero h1 { grid-row: 1; padding-top: 4px; }
  .page-home .hero-lede { grid-row: 2; padding-top: 20px; padding-bottom: 24px; }
  .page-home .hero-p { grid-column: 1; }
  .page-home .hero-image { grid-row: 1 / 5; }
  .page-home .hero-image img { margin: 0 0 32px; aspect-ratio: 700 / 935; }   /* matches the tablet file, so no layout shift while it loads */
  .page-home .hero-buttons { grid-column: 1 / -1; grid-row: auto; gap: 16px; margin-top: 4px; }
  .page-home .hero .btn-primary { display: inline-block; }
  .page-home .hero .btn-outline,
  .page-home .hero .btn-primary {
    --m-btn-font-size: 1rem;
    --m-btn-pad-y: 15px;
    --m-btn-pad-x: 28px;
    font-size: var(--m-btn-font-size);
    padding: var(--m-btn-pad-y) var(--m-btn-pad-x);
    line-height: 1;
  }

  /* ---------------- FOOTER: three columns, as on desktop ---------------- */
  .site-footer { padding: 32px var(--tb-pad); }
  .footer-inner {
    max-width: var(--tb-col-w);
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    text-align: left;
  }
  .footer-col-about   { text-align: left;  flex: 1; }
  .footer-col-social  { text-align: center; flex: 0 0 auto; }
  .footer-col-contact { text-align: right; flex: 1; }
  .footer-tagline { font-size: var(--tb-fs-small); line-height: 1.5; margin-bottom: 0; }
  .footer-legal { font-size: var(--tb-fs-small); line-height: 1.5; text-wrap: balance; }
  .footer-phone { font-size: 1.0625rem; margin-bottom: 8px; }
  .page-home .footer-phone, .footer-abn { display: block; }   /* shown on tablet (hidden on phones) */
  .footer-social { --m-footer-icon-size: 44px; gap: 16px; margin-bottom: 0; }
}

/* ==========================================================================
   TABLET LAYER, PART 2: content blocks and home sections (641px to 1024px)
   Reading width is held to about 38rem (about 75 characters) wherever running text sits.
   ========================================================================== */
@media (width > 640px) and (width <= 1024px) {

  h1, h2 { text-wrap: balance; }   /* progressive enhancement: avoids one-word last lines */

  /* ---- Page hero (all pages except home): centred 40rem column ---- */
  .hero { padding: 48px 0 48px; }
  .hero .inner { max-width: calc(40rem + 2 * var(--tb-pad)); padding: 0 var(--tb-pad); }
  .hero h1 { margin-bottom: 28px; }
  .hero p { margin-bottom: 16px; }
  .hero .trust-line { padding-top: 24px; margin-bottom: 0; }

  /* ---- Types 1, 2, 5: one centred text column ---- */
  .block-group--type1 .content-block .inner,
  .block-group--type2 .content-block .inner,
  .block-group--type5 .content-block .inner {
    max-width: calc(38rem + 2 * var(--tb-pad));
    padding: 0 var(--tb-pad);
  }

  /* ---- Type 3: text at reading width, the stage line may use a wider column ---- */
  .block-group--type3 .content-block .inner { max-width: calc(46rem + 2 * var(--tb-pad)); padding: 0 var(--tb-pad); }
  .block-group--type3 h2,
  .block-group--type3 p:not(.stage-progression) { max-width: 38rem; margin-left: auto; margin-right: auto; }

  /* ---- Type 4 (fee table): full container width ---- */
  .block-group--type4 .content-block .inner { max-width: var(--tb-col-w); padding: 0 var(--tb-pad); }
  .block-group--type4 .fee-section-note { font-size: var(--size-font-caption-m); }
  .block-group--type4 .fee-note { font-size: var(--size-font-caption-m); }

  /* ---- Type 6 (care cards): descriptions shown, 2 across at every tablet width (8 cards = 4 even rows; 3 across would leave an orphan row) ---- */
  .block-group--type6 .content-block .inner { max-width: var(--tb-col-w); padding: 0 var(--tb-pad); }
  .block-group--type6 .card-grid { column-gap: 20px; row-gap: 20px; }
  .block-group--type6 .card { padding: 24px 22px 24px; }
  .block-group--type6 .card h3 { text-align: left; margin-bottom: 16px; }   /* minimum space between the h3 and the paragraphs */
  .block-group--type6 .card p + p { margin-top: 10px; }
  .block-group--type6 .card p { display: block; font-size: var(--size-font-p-m); line-height: 1.5; }
  /* Centre the paragraph(s) vertically between the h3 and the button: spare height in the card is split equally above and below them */
  .block-group--type6 .card p:first-of-type { margin-top: auto; }
  .block-group--type6 .card p:last-of-type { margin-bottom: auto; }
  .block-group--type6 .card .card-button { margin-top: 16px; }   /* minimum space between the paragraphs and the button */
  
  /* ---- Type 7: stacked inside a centred column ---- */
  .block-group--type7 .content-block .inner { max-width: calc(38rem + 2 * var(--tb-pad)); padding: 0 var(--tb-pad); }
  .block-group--type7 .trust-line img { width: 100%; max-width: 320px; }

  /* ---- Home: shared container and centred intro text ---- */
  .page-home .approach > .inner.approach-inner,
  .page-home .areas-of-care > .inner,
  .page-home .patient-stories > .inner,
  .page-home .home-stripe-2.credentials > .inner,
  .page-home .cta-inner { max-width: var(--tb-col-w); padding: 0 var(--tb-pad); }
  .page-home .areas-of-care .intro-text,
  .page-home .credentials .intro-text { text-align: center; max-width: 38rem; margin-left: auto; margin-right: auto; }
  .page-home .credentials .resources-line { text-align: center; max-width: 38rem; margin-left: auto; margin-right: auto; }
  .page-home .approach-text { max-width: 38rem; margin-left: auto; margin-right: auto; }

  /* Testimonials: reading width, 44px arrows, dots at least 24px wide */
  .page-home .testimonial-slider { max-width: 44rem; }
  .page-home .testimonial-arrow { width: 44px; height: 44px; }
  .page-home .testimonial-dot { padding: 12px 9px; }

  /* CTA below 769: stacked, in a centred column */
  .page-home .cta-inner { max-width: calc(38rem + 2 * var(--tb-pad)); }
}

/* ==========================================================================
   Single structural step at 769px
   ========================================================================== */
@media (width > 768px) and (width <= 1024px) {

  /* Type 7: text left, trust line / image right (DOM order unchanged) */
  .block-group--type7 .content-block .inner {
    max-width: var(--tb-col-w);
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: center;
  }
  .block-group--type7 .inner > .text-col { grid-column: 1; grid-row: 1; }
  .block-group--type7 .inner > .trust-line { grid-column: 2; grid-row: 1; margin-top: 0; }

  /* Home: approach, image beside text */
  .page-home .approach > .inner.approach-inner { display: flex; align-items: center; gap: 48px; }
  .page-home .approach-image { display: block; flex: 0 0 42%; position: relative; left: 0; }
  .page-home .approach-image img { width: 100%; height: auto; border-radius: 16px; }
  .page-home .approach-image .blob { display: none; }
  .page-home .approach-text { flex: 1; max-width: none; margin: 0; }
  .page-home .approach-text .eyebrow-label,
  .page-home .approach-text h2 { text-align: left; }

  /* Home: logo cards three across */
  .page-home .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Home: CTA in two columns */
  .page-home .cta-inner { max-width: var(--tb-col-w); flex-direction: row; align-items: center; gap: 48px; }
  .page-home .cta-text { display: block; flex: 1; min-width: 0; }
  .page-home .cta-info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 16px; }
  .page-home .cta-pill { width: 100%; align-self: stretch; }
  .page-home .cta-pill-address { margin-top: 0; }
  .page-home .cta .btn-solid { display: inline-block; margin-top: 8px; }
}


/* ==========================================================================
   POLISH, PHONE AND TABLET (1024px and below). Desktop is not touched.
   One set of values so phones and tablets match: 16px corners, 44px section spacing,
   28px side margins (--m-pad-page).
   ========================================================================== */
@media (max-width: 1024px) {

  /* Corner radius: one value (16px) for cards, pictures and pills (was a mix of 9.6, 14 and 16px) */
  .page-home .hero-image img,
  .page-home .approach-image img,
  .page-home .blob,
  .page-home .care-card,
  .page-home .logo-card,
  .block-group--type7 .trust-line img,
  .block-group--type7 .inner > .trust-line::after { border-radius: 16px; }

  /* Fee table section: same top and bottom space (44px) as every other section (was about 20px) */
  .block-group--type4 { padding-top: 44px; padding-bottom: 44px; }
}

/* Phones only (640px and below) */
@media (width <= 640px) {

  /* Hero picture reserves its real shape (600 x 1349 file) so the page does not jump as it loads */
  .page-home .hero-image img { aspect-ratio: 600 / 1349; }

  /* Footer side margins match the page (28px), was about 9.6px */
  .site-footer { padding: 32px var(--m-pad-page); }

  /* Type 6 cards line up with the page margins (28px), was inset about 35px at 390px wide */
  .block-group--type6 .content-block .inner { max-width: var(--m-col-w); padding: 0 var(--m-pad-page); }

  /* Page hero (all pages except home): same rhythm as the sections, 32px above, 44px below (was 20px and 26px) */
  .hero { padding: 32px 0 44px; }
  .hero .trust-line { margin-bottom: 0; }

  /* Hamburger: 44 x 44px tap target, bars stay exactly where they were */
  .hamburger { width: 44px; height: 44px; padding: 12px 8px; margin-right: calc(var(--m-pad-page) - 8px); box-sizing: border-box; }
}


/* ==========================================================================
   ADJUSTABLE CONTROLS (change the numbers in this section)
   Everything here is a variable with its current value as the default,
   so leaving them alone changes nothing.
   ========================================================================== */

/* ---- Phones (640px and below) ---- */
@media (width <= 640px) {

  /* 1. Home hero: top position of the headline and lede (the picture stays put).
        The number is pixels at a 390px-wide phone; it scales with the screen width
        (at 320px wide, 20 becomes about 16px; at 640px wide, about 33px).
        0 = as now. Positive moves the text down, negative moves it up. */
  .page-home .hero {
    --m-hero-text-top: 0;
    --m-hero-ref-w: 390;
  }
  .page-home .hero h1 {
    margin-top: calc(var(--m-hero-text-top) * 100vw / var(--m-hero-ref-w));
  }

  /* 3. Logo cards: width as a share of the page content width (or a length such as 280px).
        The card height follows automatically. */
  .page-home .logo-grid { --m-logo-card-w: 100%; }
  .page-home .logo-card {
    width: var(--m-logo-card-w);
    max-width: 100%;
    justify-self: center;
  }

  /* 4, 5, 6. Care cards (card-grid).
        --m-6-grid-w   width of the card column AND its heading, as a share of the page content width
                       (or a length such as 300px). Card heights follow automatically.
        --m-6-btn-font  font size of the button text.
        --m-6-h3-size   font size of the card h3. */
  .block-group--type6 {
    --m-6-grid-w: 100%;
    --m-6-btn-font: 1rem;
    --m-6-h3-size: 22px;   /* <-- change this value to adjust h3 font size on mobile */
  }
  .block-group--type6 .content-block h2,
  .block-group--type6 .card-grid {
    width: var(--m-6-grid-w);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .block-group--type6 .card .card-button { font-size: var(--m-6-btn-font); }
  .block-group--type6 .card h3 { font-size: var(--m-6-h3-size); }
}

/* ---- Tablets (641px to 1024px) ---- */
@media (width > 640px) and (width <= 1024px) {

  /* 6. Care cards (card-grid): font size of the card h3 */
  .block-group--type6 { --tb-6-h3-size: 26px; }   /* <-- change this value to adjust h3 font size on tablet */
  .block-group--type6 .card h3 { font-size: var(--tb-6-h3-size); }
}

/* ==========================================================================
   BUTTONS: colour swap on hover / tap, with a border that follows the text colour
   ========================================================================== */

/* Border = always the same colour as the text (currentColor), so it swaps with it.
   .page-home.page-home matches the specificity of your existing .btn-outline rule. */
.book-button,
.page-home.page-home .btn,
.block-group--type6 .card .card-button {
  border: var(--btn-border-w) solid currentColor;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Header "Book Now" (and the copy inside the mobile menu) */
.book-button:hover,
.book-button:active,
body.nav-open .main-nav .book-button--menu:hover,
body.nav-open .main-nav .book-button--menu:active {
  background-color: var(--color-background-neutral);
  color: var(--color-logo-primary);
}

/* Home page buttons */
.page-home.page-home .btn-outline:hover,
.page-home.page-home .btn-outline:active {
  background-color: var(--color-logo-primary);
  color: var(--color-background-neutral);
}

.page-home.page-home .btn-primary:hover,
.page-home.page-home .btn-primary:active {
  background-color: var(--color-background-neutral);
  color: var(--color-logo-primary);
}

.page-home.page-home .btn-solid:hover,
.page-home.page-home .btn-solid:active {
  background-color: var(--color-logo-primary);
  color: var(--color-background-neutral);
}

/* Care card buttons (type 6) */
.block-group--type6 .card .card-button:hover,
.block-group--type6 .card .card-button:active {
  background-color: var(--color-logo-grey-text-dark);
  color: var(--color-background-neutral);
}

@media (prefers-reduced-motion: reduce) {
  .book-button,
  .page-home.page-home .btn,
  .block-group--type6 .card .card-button {
    transition: none;
  }
}

/* ==========================================================================
   ACCESSIBILITY HELPERS
   ========================================================================== */

/* Text for screen readers only (e.g. "Book Now<span class="visually-hidden"> with Dr ...</span>") */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus ring. Brand maroon instead of the blue I suggested earlier:
   it has strong contrast on your cream and pink backgrounds. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-logo-primary);
  outline-offset: 3px;
}

/* On the mauve CTA/type 5 sections and the maroon footer, maroon would be
   too faint (or invisible), so use cream there. */
.block-group--type5 :focus-visible,
.page-home .cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-background-neutral);
}

/* Home page care cards: centre the p text vertically in the space below the h3, at all viewport sizes */
.page-home .care-card {
  display: flex;
  flex-direction: column;
}

.page-home .care-card .card-image {
  flex-shrink: 0;            /* the image keeps its height */
}

.page-home .care-card-body {
  flex: 1;                   /* the body fills whatever height is left under the image */
  display: flex;
  flex-direction: column;
}

.page-home .care-card-body p:first-of-type { margin-top: auto; }
.page-home .care-card-body p:last-of-type  { margin-bottom: auto; }

.page-home .care-card-body p {
  font-size: max(calc(20 * var(--t)), var(--size-font-p-m));
}

@media (max-width: 1024px) {
  .page-home .care-card-body p {
    font-size: var(--size-font-p-m);   /* or a fixed value such as 0.9375rem */
  }
}

[id] {
  scroll-margin-top: 250px; /* adjust to your header height */
}

html {
  scroll-behavior: smooth;
}