/* ==========================================================================
   1. 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-grey-text: #776E84;
  --color-graphic-embellishment-1: #EADFDD;

  /* ------------------------------------------------------------------------
     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.
     --spx is the proportional scale factor: 1 at 1920px, 0.75 at 1440px,
     0.6667 at 1280px, etc. Every spacing/sizing value below that uses
     calc(...px * var(--spx)) scales down smoothly as the window narrows.
  */
  --design-width: 1920px;
  --desktop-width: clamp(768px, 100vw, var(--design-width));
  --spx: calc(var(--desktop-width) / var(--design-width));

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


  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type1
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type1) v4.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: 50px;  /* A: top of the group -> first h2 */
  --gap-1-b: 20px;  /* B: h2 -> p */
  --gap-1-c: 0px;  /* C: p -> p */
  --gap-1-d: 50px;  /* D: bottom of one section -> h2 of next section, same group */
  --gap-1-e: 0px;  /* E: p -> first li/ul */
  --gap-1-f: 0px;  /* F: li -> li */
  --gap-1-g: 50px;  /* G: bottom of last section -> bottom of the group */
  --gap-1-h: 30px;  /* H: h2 -> first li/ul (when no p in between) */
  --gap-1-i: 0px;  /* I: li -> p (paragraph following a list) */
  --gap-1-j: 50px;  /* J: block above -> trust line (whatever precedes it: h2, p, li or ul) */


  /* ------------------------------------------------------------------------
     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: 50px;  /* A: top of the group -> h2 (padding-top) */
  --gap-2-b: 50px;  /* B: h2 -> first plain p */
  --gap-2-c: 16px;  /* C: plain p -> plain p (intro paragraphs) */
  --gap-2-d: 50px;  /* D: last plain p -> first .faq-question */
  --gap-2-e: 50px;  /* E: bottom of last item -> bottom of the group (padding-bottom) */
  --gap-2-f: 20px;  /* F: .faq-question -> .faq-answer */
  --gap-2-g: 20px;  /* G: .faq-answer -> .faq-answer-link */
  --gap-2-h: 80px;  /* H: .faq-answer-link -> next .faq-question */


  /* ------------------------------------------------------------------------
     Content-block group gaps: block-group--type3 (stage progression variant)
     ------------------------------------------------------------------------
     Ref file: "Section Settings (block-group--type3) v1.png"
  */
  --gap-3-a: 50px; /* top of group -> h2 */
  --gap-3-b: 50px; /* h2 -> first p */
  --gap-3-c: 50px; /* p -> p (repeats across the paragraph run) */
  --gap-3-d: 50px; /* last p -> stage-progression */
  --gap-3-e: 50px; /* 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: 60px;   /* top of group -> header row (padding-top on group) */
  --gap-4-b: 21px;   /* header row -> first section bar */
  --gap-4-c: 10px;   /* section bar -> first row */
  --gap-4-d: 12px;   /* row -> row */
  --gap-4-e: 38px;   /* last row of a section -> next section bar */
  --gap-4-f: 60px;   /* last row -> bottom of group (padding-bottom on group) */
  --gap-4-g: 5px;    /* column gap, header row */
  --gap-4-h: 5px;    /* column gap, body rows */
  --gap-4-i: 20px;   /* gap between title and note inside a section bar */
  --gap-4-j: 50px;   /* h2 -> fee table */
 
  /* ---- 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: 78px;        /* min height of header boxes */
  --size-4-bar-h: 53px;         /* min height of section bars */
  --size-4-row-h: 40px;         /* min height of body rows */
  --size-4-cell-pad-x: 14px;    /* left/right padding inside cells */
  --size-4-bar-pad-x: 24px;     /* left/right padding inside section bars */
  --size-4-font-head: 22px;     /* header row text */
  --size-4-font-bar-title: 18px;/* section bar title */
  --size-4-font-bar-note: 12px; /* section bar note */
  --size-4-font-row: 18px;      /* body row 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.08;          /* unitless, not scaled */

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

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

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


}

/* 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;
  background-color:var(--color-background-neutral);
}

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

/* --- 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;
}

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

#header-placeholder {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --- Logo --- */

.logo img {
  height: calc(115px * var(--spx));
  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);

  /* "Full-bleed" trick: makes the header span the full viewport width even though it sits inside a page that may have its own padding/margins */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 1px solid var(--color-graphic-embellishment-1); /* thin dividing line between header and scrolling content */
}

/* --- 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(28px * var(--spx)) calc(60px * var(--spx));
}

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

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

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

.main-nav a:hover .nav-label {
  text-decoration: underline;
}

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

.book-button {
  background-color:var(--color-logo-primary);
  color:var(--color-background-neutral);
  padding: calc(23px * var(--spx)) calc(43px * var(--spx));
  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(27px * var(--spx));
  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(18px * var(--spx)); /* 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);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: calc(8px * var(--spx)) 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.7px * var(--spx)) calc(15px * var(--spx));
  font-size: calc(21.12px * var(--spx));
  white-space: nowrap;
  color:var(--color-logo-primary);
}

.dropdown a:hover {
  background-color:var(--color-background-neutral);
  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(6px * var(--spx));
  margin-bottom: calc(1px * var(--spx));
  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(14px * var(--spx));
  height: calc(9px * var(--spx));
}

.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;
}

/* --- Header: mobile layout (≤768px) ---
   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: 768px) {
  .main-nav {
    display: none;
  }

  /* When the hamburger has been clicked, show the nav as a full-width stacked list below the header row */
  body.nav-open .main-nav {
    display: block;
    width: 100%;
    order: 5;
    background-color:var(--color-background-neutral);
  }

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

  body.nav-open .main-nav a {
    display: block;
    padding: calc(12px * var(--spx)) 0;
  }

  /* Dropdowns become static (not floating/absolute) so they expand inline within the stacked mobile list */
  body.nav-open .dropdown {
    position: static;
    box-shadow: none;
    padding-left: calc(16px * var(--spx));
  }

  .site-header-inner {
    max-width: calc(var(--nominal-content-width) * var(--spx));
    margin: 0 auto;
    padding: calc(16px * var(--spx)) calc(24px * var(--spx));
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .logo {
    order: 1;
  }

  .hamburger {
    display: flex;
    order: 2;
  }

  /* 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;
  }
}

/* --- Header: narrow desktop tweak (1024px–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 768px. */

@media (min-width: 1024px) and (max-width: 1100px) {
  .main-nav ul {
    gap: calc(12px * var(--spx));
  }

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


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

.hero {
  padding: calc(64px * var(--spx)) 0;
  text-align: center;
}

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

.hero h1 {
  font-size: calc(75.2px * var(--spx));
  font-weight: 400;
  color:var(--color-logo-primary);
  margin-bottom: calc(70px * var(--spx));
}

.hero p {
  font-size: calc(24px * var(--spx));
  line-height: 1.6;
  color:var(--color-logo-primary);
  margin-bottom: calc(16px * var(--spx));
  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(--spx));
  margin: 0 auto;
  padding: 0 calc(24px * var(--spx));
}

.content-block h2 {
  font-size: calc(40px * var(--spx));
  font-weight: 400;
  color:var(--color-logo-primary);
}

.content-block p {
  font-size: calc(24px * var(--spx));
  line-height: 1.6;
  color:var(--color-logo-primary);
}

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

.content-block li {
  line-height: 1.6;
  color:var(--color-logo-primary);
  font-size: calc(24px * var(--spx));
}

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

/* --------------------------------------------------------------------------
   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(--spx));
  padding-bottom: calc(var(--gap-1-g) * var(--spx));
}

/* --- 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(--spx));
}

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   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 <em> for the italic/secondary-color
   treatment — the same pattern already used for h1 em / h2 em elsewhere.

   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 (".hero p", ".content-block 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(43px * var(--spx));
  line-height: 1.4;
  color: var(--color-logo-primary);
  text-align: left;
}

.trust-line em {
  font-style: italic;
  color: var(--color-logo-secondary);
}

/* --- 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(--spx));
}

/* --------------------------------------------------------------------------
   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 ".content-block p" — only the
   one differentiating property is added per class:
     .faq-question     -> bold
     .faq-answer       -> italic
     .faq-answer-link  -> different color (placeholder below; swap for
                           the specific color once decided)
   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(--spx));
  padding-bottom: calc(var(--gap-2-e) * var(--spx));
}

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

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

.content-block .faq-answer-link {
  color: var(--color-logo-secondary); /* placeholder — replace once you've chosen the actual color */
}

/* --- 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(--spx));
}

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

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

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

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

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

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

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

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

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

/* === .stage-progression: reusable within type3, styling only === */
.block-group--type3 .stage-progression {
  font-style: italic;
  font-family: 'Playfair Display', serif;
  font-size: calc(40px * var(--spx));
  color: var(--color-logo-secondary);
}


/* ---------- 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(--spx));
  padding-bottom: calc(var(--gap-4-f) * var(--spx));
}
 
/* 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(--spx));
}

.block-group--type4 .fee-head-row {
  column-gap: calc(var(--gap-4-g) * var(--spx));
  align-items: stretch;
  min-height: calc(var(--size-4-head-h) * var(--spx));
}
 
.block-group--type4 .fee-row {
  column-gap: calc(var(--gap-4-h) * var(--spx));
  align-items: center;
  min-height: calc(var(--size-4-row-h) * var(--spx));
}
 
/* 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(--spx));
  background-color: var(--color-logo-primary);
  color: var(--color-4-text-on-bar);
  font-size: calc(var(--size-4-font-head) * var(--spx));
  font-weight: 600;
  line-height: 1.3;
}
 
/* Body cells */
.block-group--type4 .fee-row > * {
  padding: 0 calc(var(--size-4-cell-pad-x) * var(--spx));
  color: var(--color-logo-primary);
  font-size: calc(var(--size-4-font-row) * var(--spx));
  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(--spx));
  align-items: center;
  min-height: calc(var(--size-4-bar-h) * var(--spx));
  padding: 0 calc(var(--size-4-bar-pad-x) * var(--spx));
  background-color: var(--color-logo-secondary);
  color: var(--color-4-text-on-bar);
  white-space: nowrap;
}
 
.block-group--type4 .fee-section-title {
  font-size: calc(var(--size-4-font-bar-title) * var(--spx));
  font-weight: 700;
  line-height: 1.2;
}
 
.block-group--type4 .fee-section-note {
  font-size: calc(var(--size-4-font-bar-note) * var(--spx));
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
}
 
/* 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(--spx)); }
.block-group--type4 .fee-section-bar + .fee-row      { margin-top: calc(var(--gap-4-c) * var(--spx)); }
.block-group--type4 .fee-row + .fee-row              { margin-top: calc(var(--gap-4-d) * var(--spx)); }
.block-group--type4 .fee-row + .fee-section-bar      { margin-top: calc(var(--gap-4-e) * var(--spx)); }
 
/* 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); }


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

/* 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(--spx));
  height: calc(var(--circ-5-tl-r) * 2 * var(--spx));
  left: calc((var(--circ-5-tl-x) - var(--circ-5-tl-r)) * var(--spx));
  top: calc((var(--circ-5-tl-y) - var(--circ-5-tl-r)) * var(--spx));
}

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

/* 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-logo-primary);
}

.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(--spx));
}

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


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

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

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

@media (max-width: 768px) {
  .divider-authorisation {
    padding: 16px 24px;
  }
}


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

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

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

.authorisation p {
  font-size: calc(17px * var(--spx));
  color:var(--color-logo-grey-text);
  line-height: 1.5;
  margin-bottom: calc(8px * var(--spx));
}


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

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

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

.footer-col {
  flex: 1;
}

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

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

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

.footer-tagline {
  font-size: calc(16px * var(--spx));
  line-height: 1.4;
  color:var(--color-background-neutral);
  margin-bottom: calc(16px * var(--spx));
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: calc(24px * var(--spx));
  margin-bottom: calc(24px * var(--spx));
}

.footer-social a {
  color:var(--color-background-neutral);
  text-decoration: none;
  font-size: calc(14.4px * var(--spx));
}

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

.footer-legal { /* Copyright and ABN */
  font-size: calc(18px * var(--spx));
  color:var(--color-background-neutral);
  margin-bottom: calc(4px * var(--spx));
}

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

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

/* ==========================================================================
   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(800px * var(--spx));
  margin: 0 auto;
  padding: calc(32px * var(--spx)) calc(24px * var(--spx));
}

/* --------------------------------------------------------------------------
   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(138px * var(--spx));
  padding-bottom: calc(150px * var(--spx));   /* raise and lower the bottom of the hero section without impacting position of elements in hero */
}

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

.page-home .hero h1 {
  font-size: calc(84px * var(--spx));
  padding-top: calc(32px * var(--spx));
  line-height: 1.1;
  margin-bottom: calc(24px * var(--spx));
}

.page-home .hero h1 em {
  font-style: italic;
  color: var(--color-logo-secondary);
}

/* --------------------------------------------------------------------------
   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(1220px * var(--spx));
  padding-bottom: calc(40px * var(--spx));  /* Adjust vertical position of hero section buttons */
}

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

/* Small pill-shaped label sitting above the H1 */
.page-home .eyebrow-tag {
  display: inline-block;
  font-size: calc(18px * var(--spx));
  color: var(--color-logo-secondary);
  background-color: var(--color-graphic-embellishment-1);
  /* border: 1px solid var(--color-graphic-embellishment-1); */
  border-radius: 999px;
  padding: calc(6px * var(--spx)) calc(30px * var(--spx));
  margin-bottom: calc(24px * var(--spx));
  text-align: center;
  align-self: flex-start;   /*opts out of the flex container's stretch*/
}

/* 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(53px * var(--spx));
  padding-bottom: calc(80px * var(--spx));
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: calc(48px * var(--spx));
  line-height: 1.5;
}

.page-home .hero-p {
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(24px * var(--spx));
  color: var(--color-logo-primary);
  line-height: 1.5;
  padding-bottom: calc(20px * var(--spx));
}

/* 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;
  gap: calc(20px * var(--spx));
  margin-top: auto;
}

.page-home .hero-image .img-placeholder {
  border-radius: calc(24px * var(--spx));
  margin-top: calc(88px * var(--spx));
  margin-bottom: calc(48px * var(--spx));
  width: calc(790px * var(--spx));
  height: calc(1055px * var(--spx));
}

@media (max-width: 768px) {
  .page-home .hero .inner {
    flex-direction: column;
  }

  /* The min-height / auto-margin poke effect only makes sense in the
     two-column desktop layout; once the columns stack, let the text
     column size itself normally. */
  .page-home .hero-text {
    min-height: 0;
  }

  .page-home .hero-buttons {
    margin-top: calc(16px * var(--spx));
  }
}


/* --------------------------------------------------------------------------
   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: calc(19px * var(--spx));
  color: var(--color-logo-secondary);
  letter-spacing: 0.05em;
  margin-bottom: calc(12px * var(--spx));
}

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

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

/* Generic placeholder box standing in for a real photo/image asset */
.page-home .img-placeholder {
  width: 100%;
  height: 100%;
  min-height: calc(280px * var(--spx));
  background-color: var(--color-graphic-embellishment-1);
  border: 1px dashed var(--color-logo-secondary);
  border-radius: calc(12px * var(--spx));
}

.page-home .btn {
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(22px * var(--spx));
  padding: calc(24px * var(--spx)) calc(40px * var(--spx));
  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 {
  border: 1px solid var(--color-logo-primary);
  color: var(--color-logo-primary);
  background-color: transparent;
}

/* 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: 700;
}

/* 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: 700;
}


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

.page-home .approach-inner {
  display: flex;
  align-items: center;
  gap: calc(80px * var(--spx));
}

.page-home .approach-image,
.page-home .approach-text {
  flex: 1;
  min-width: 0;
}

.page-home .approach-image {
  position: relative;
}

.page-home .approach-image .img-placeholder {
  position: relative;
  z-index: 2;
  aspect-ratio: 4 / 3;
  border-style: solid;
}

/* 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(24px * var(--spx));
}

.page-home .blob-1 {
  top: calc(-24px * var(--spx));
  left: calc(-24px * var(--spx));
  width: calc(150px * var(--spx));
  height: calc(150px * var(--spx));
}

.page-home .blob-2 {
  bottom: calc(-24px * var(--spx));
  right: calc(-24px * var(--spx));
  width: calc(200px * var(--spx));
  height: calc(150px * var(--spx));
}

.page-home .approach-text h2 {
  font-size: calc(48px * var(--spx));
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-logo-primary);
  margin-bottom: calc(20px * var(--spx));
}

.page-home .approach-text h2 em {
  font-style: italic;
  color: var(--color-logo-secondary);
}

.page-home .approach-text > p {
  font-size: calc(22px * var(--spx));
  line-height: 1.6;
  color: var(--color-logo-primary);
  margin-bottom: calc(32px * var(--spx));
}

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

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

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

.page-home .step-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: calc(28px * var(--spx));
  color: var(--color-graphic-embellishment-1);
  line-height: 1;
  flex-shrink: 0;
}

.page-home .step-body h3 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(22px * var(--spx));
  font-weight: 700;
  color: var(--color-logo-primary);
  margin-bottom: calc(6px * var(--spx));
}

.page-home .step-body p {
  font-size: calc(20px * var(--spx));
  line-height: 1.5;
  color: var(--color-logo-primary);
}

@media (max-width: 768px) {
  .page-home .approach-inner {
    flex-direction: column;
  }

  .page-home .blob-1,
  .page-home .blob-2 {
    display: none;
  }
}


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

.page-home .areas-of-care h2 {
  font-size: calc(40px * var(--spx));
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-logo-primary);
  margin-bottom: calc(24px * var(--spx));
}

.page-home .areas-of-care h2 em {
  font-style: italic;
  color: var(--color-logo-secondary);
}

.page-home .areas-of-care .intro-text {
  font-size: calc(22px * var(--spx));
  line-height: 1.6;
  color: var(--color-logo-primary);
  margin-bottom: calc(48px * var(--spx));
}

.page-home .care-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24px * var(--spx));
  margin-bottom: calc(48px * var(--spx));
}

.page-home .care-card {
  background-color: var(--color-background-neutral);
  border: 1px solid var(--color-graphic-embellishment-1);
  border-radius: calc(12px * var(--spx));
  overflow: hidden;
}

.page-home .care-card .card-image {
  min-height: calc(180px * var(--spx));
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-graphic-embellishment-1);
}

.page-home .care-card-body {
  padding: calc(20px * var(--spx));
}

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

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

.page-home .care-card-body p {
  font-size: calc(17px * var(--spx));
  line-height: 1.5;
  color: var(--color-logo-grey-text);
}

@media (max-width: 1024px) {
  .page-home .care-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .page-home .care-cards {
    grid-template-columns: 1fr;
  }
}


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

.page-home .patient-stories h2 {
  font-size: calc(40px * var(--spx));
  font-weight: 400;
  color: var(--color-logo-primary);
  margin-bottom: calc(40px * var(--spx));
}

.page-home .patient-stories h2 em {
  font-style: italic;
  color: var(--color-logo-secondary);
}

/* Stand-in box for the future testimonial slider widget */
.page-home .testimonial-slider-placeholder {
  min-height: calc(240px * var(--spx));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-logo-secondary);
  border-radius: calc(12px * var(--spx));
  color: var(--color-logo-grey-text);
  font-size: calc(20px * var(--spx));
}


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

.page-home .credentials h2 {
  font-size: calc(40px * var(--spx));
  font-weight: 400;
  color: var(--color-logo-primary);
  margin-bottom: calc(16px * var(--spx));
}

.page-home .credentials h2 em {
  font-style: italic;
  color: var(--color-logo-secondary);
}

.page-home .credentials .intro-text {
  font-size: calc(22px * var(--spx));
  color: var(--color-logo-primary);
  margin-bottom: calc(48px * var(--spx));
}

/* 3 columns x 2 rows of equally spaced logo containers */
.page-home .logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32px * var(--spx));
  margin-bottom: calc(48px * var(--spx));
}

.page-home .logo-placeholder {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background-neutral);
  border: 1px dashed var(--color-logo-secondary);
  border-radius: calc(8px * var(--spx));
  color: var(--color-logo-grey-text);
  font-size: calc(18px * var(--spx));
}

.page-home .resources-line {
  font-size: calc(20px * var(--spx));
  color: var(--color-logo-primary);
}

@media (max-width: 600px) {
  .page-home .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


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

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

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

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

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

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

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

.page-home .cta-text h2 {
  font-size: calc(48px * var(--spx));
  font-weight: 400;
  color: var(--color-background-neutral);
  margin-bottom: calc(24px * var(--spx));
}

.page-home .cta-text h2 em {
  font-style: italic;
}

.page-home .cta-text p {
  font-size: calc(20px * var(--spx));
  line-height: 1.6;
  color: var(--color-background-neutral);
  margin-bottom: calc(32px * var(--spx));
}

.page-home .cta-info {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--spx));
}

.page-home .cta-pill {
  display: flex;
  align-items: center;
  gap: calc(20px * var(--spx));
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: calc(16px * var(--spx));
  padding: calc(20px * var(--spx)) calc(28px * var(--spx));
}

.page-home .cta-icon {
  flex-shrink: 0;
  width: calc(48px * var(--spx));
  height: calc(48px * var(--spx));
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background-neutral);
}

.page-home .cta-icon svg {
  width: calc(22px * var(--spx));
  height: calc(22px * var(--spx));
}

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

@media (max-width: 768px) {
  .page-home .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}