/*
 * Wellbrook Medical — site styles. There is no build step: this file is
 * served exactly as written.
 *
 * COLOUR, TYPE AND SPACE ARE DIALS (#426, moved here in #427). The first
 * section is Dials (github.com/joops/dials), copied verbatim from _template
 * between its begin and end markers. It works out every colour, text size,
 * space size and corner from a few values called dials. "This site's dials",
 * straight after it, is the ONLY place in the file where a colour or a scale
 * value is typed.
 *
 *   - Change the look by changing a dial: --brand for the teal, --size-min/
 *     --size-max and --ratio-min/--ratio-max for the type scale, --space-min/
 *     --space-max for spacing, --radius-base for corners.
 *   - Everything else reads a token: --surface*, --text*, --border*, --link,
 *     --focus, the --brand-* group (and --info-*, --success-* ...), --size-*,
 *     --space-*, --radius-*, --border-width-*. Never a hex, rgb(), hsl() or
 *     named colour.
 *   - A wash, a band or a quiet coloured border is a pattern built from
 *     tokens, declared once with a comment (the hero washes and the service
 *     card's rule below, the form message boxes' borders), never a token of
 *     its own. Every dial, token and pattern is in the reference for the
 *     version in the section's first line:
 *     github.com/joops/dials/blob/v0.4.0/docs/tokens.md.
 *   - The page follows the visitor's light or dark setting unless they pick
 *     one with the switcher in the header (data-scheme on <html>, set before
 *     first paint by partials/scheme-head.html).
 *   - The rules, and the full token list, are in refs/design/DESIGN.md
 *     ("Dials"). check-system.sh holds the section to _template's copy word
 *     for word, and fails a raw colour outside the dials block.
 */

/* ═══ Dials ═══ dials:begin ═════════════════════════════════════════════
 * Dials v0.4.2, VERBATIM. Never edit anything between this marker and the
 * end marker: check-system.sh fails the site if its copy differs from
 * _template's by a word. Each marker appears once; never write either in
 * prose. Set dials in "This site's dials" below; an upgrade
 * of Dials is a template change plus a migration of every site.
 * ═══════════════════════════════════════════════════════════════════════ */
/*! Dials v0.4.2 | MIT | https://github.com/joops/dials */
/* Dials: an AI-first CSS framework. This file is dials-colour.css, then
   dials-scale.css, then the fallback for older browsers; dials-base.css is optional.
   Its defaults are the Default theme: the device's own faces, nothing to load.
   The Dials house theme is themes/dials.css.
*/
/* ============================================================
   Dials: colour (dials-colour.css)
   Dials: seven colours and a few numbers, the only typed values.
   Derived: surfaces, text, lines and groups, worked out live with
   color-mix() and relative colour, in light and dark.
   Groups: .is-{group} points the ungrouped tokens at a group.
   Dials live on :root (and :host); the derived chain is declared on
   :root, [data-dials] and :host, so setting a dial on any
   [data-dials] element re-derives every token inside it.
   Needs color-mix(), light-dark() and relative colour. Don't
   register these with @property: they must resolve where they're
   used, which is what makes .is-dark bands work.
   ============================================================ */
:root, :host {
  /* ---- Colour dials: any CSS colour, preferably HSL ---- */
  --brand:     hsl(221 83% 53%);  /* the main colour: links, focus, primary buttons */
  --secondary: hsl(262 52% 55%);  /* a second colour: highlights and secondary actions (was --accent) */
  --success:   hsl(142 64% 38%);  /* status: done, saved, live */
  --warning:   hsl(38 92% 50%);  /* status: check this */
  --danger:    hsl(0 72% 51%);  /* status: errors and destructive actions */
  --info:      hsl(199 89% 42%);  /* status: neutral news */
  --grey:      hsl(220 9% 50%);  /* the hue and strength of the tint in paper and ink */

  /* ---- Number dials ---- */
  --balance: 0;              /* 1: every fill at --fill-lightness, so they carry equal weight. 0: exactly as set */
  --fill-lightness: 0.52;    /* the shared OKLCH lightness used when --balance is 1 */
  --dark-lift: 0.06;         /* how much lighter the fills are in dark */
  --tint-strength: 10%;      /* how much colour goes into a soft tint */
  --tint-vividness: 1;       /* 1-3: how saturated soft tints are, for crisper pastels */
  --text-contrast: 0;        /* 0-30: strengthens body, muted and quiet text and strong borders, for paper and ink that sit close together */
  --white-text-until: 0.179; /* fills below this luminance get white text, above it black. 0.179 gives each fill whichever contrasts more; held between 0.175 and 0.18333, where both still give 4.5:1: black needs (L + 0.05) / 0.05 >= 4.5, so L >= 0.175; white needs 1.05 / (L + 0.05) >= 4.5, so L <= 1.05 / 4.5 - 0.05 = 0.18333 */

  /* ---- Paper and ink: near-white and near-black, tinted by --grey at these OKLCH lightnesses.
     To use exact colours instead, set --paper-light, --paper-dark, --ink-light and/or
     --ink-dark (unset by default) to any colour. ---- */
  --paper-lightness: 0.985;       /* page background in light */
  --paper-dark-lightness: 0.17;   /* page background in dark */
  --ink-lightness: 0.2;           /* strongest text in light */
  --ink-dark-lightness: 0.95;     /* strongest text in dark */
}

/* Follow the visitor's light or dark setting. To force one, set
   :root { color-scheme: light; } (or dark) after dials.css. */
:root { color-scheme: light dark; }

:root, [data-dials], :host {
  /* ---- Internal: paper, ink and the six fills, worked out from the dials ---- */
  --dl-paper-light: var(--paper-light, oklab(from var(--grey) var(--paper-lightness) calc(a * 0.12) calc(b * 0.12)));
  --dl-paper-dark:  var(--paper-dark,  oklab(from var(--grey) var(--paper-dark-lightness) calc(a * 0.15) calc(b * 0.15)));
  --dl-ink-light:   var(--ink-light,   oklab(from var(--grey) var(--ink-lightness) calc(a * 0.25) calc(b * 0.25)));
  --dl-ink-dark:    var(--ink-dark,    oklab(from var(--grey) var(--ink-dark-lightness) calc(a * 0.12) calc(b * 0.12)));
  --dl-paper: light-dark(var(--dl-paper-light), var(--dl-paper-dark));
  --dl-ink:   light-dark(var(--dl-ink-light), var(--dl-ink-dark));
  --dl-paper-grey: oklab(from var(--dl-paper) l 0 0);  /* paper without its tint: soft tints mix into this, so they keep their own hue */

  --dl-secondary-dial: var(--accent, var(--secondary));  /* --accent is --secondary's old name: while a site still sets it, it wins */
  --dl-brand-base:     oklab(from var(--brand)              calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
  --dl-secondary-base: oklab(from var(--dl-secondary-dial)  calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
  --dl-success-base:   oklab(from var(--success)            calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
  --dl-warning-base:   oklab(from var(--warning)            calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
  --dl-danger-base:    oklab(from var(--danger)             calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
  --dl-info-base:      oklab(from var(--info)               calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
  --dl-brand:     light-dark(var(--dl-brand-base), oklab(from var(--dl-brand-base) calc(l + var(--dark-lift)) a b));
  --dl-secondary: light-dark(var(--dl-secondary-base), oklab(from var(--dl-secondary-base) calc(l + var(--dark-lift)) a b));
  --dl-success:   light-dark(var(--dl-success-base), oklab(from var(--dl-success-base) calc(l + var(--dark-lift)) a b));
  --dl-warning:   light-dark(var(--dl-warning-base), oklab(from var(--dl-warning-base) calc(l + var(--dark-lift)) a b));
  --dl-danger:    light-dark(var(--dl-danger-base), oklab(from var(--dl-danger-base) calc(l + var(--dark-lift)) a b));
  --dl-info:      light-dark(var(--dl-info-base), oklab(from var(--dl-info-base) calc(l + var(--dark-lift)) a b));

  /* ---- Surfaces ---- */
  --surface:         var(--dl-paper);                                            /* the page background */
  --surface-raised:  oklab(from var(--dl-paper) calc(l + 0.03) calc(a * 0.5) calc(b * 0.5));  /* cards, fields, popovers */
  --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper));     /* wells, table headers, quiet panels */
  --surface-sunken:  color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper));     /* code, inset areas, disabled fills */
  --surface-overlay: color-mix(in oklab, black 45%, transparent);                /* the scrim behind a dialog */

  /* ---- Text ---- */
  --text-strong:   var(--dl-ink);                                                                         /* headings, labels, emphasis */
  --text:          color-mix(in oklab, var(--dl-ink) calc(86% + var(--text-contrast) * 0.4%), var(--dl-paper));  /* body text */
  --text-muted:    color-mix(in oklab, var(--dl-ink) calc(70% + var(--text-contrast) * 1%), var(--dl-paper));    /* secondary text */
  --text-quiet:    color-mix(in oklab, var(--dl-ink) calc(64% + var(--text-contrast) * 1.2%), var(--dl-paper));  /* captions, dates, placeholders */
  --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper));                                /* disabled controls: exempt from contrast rules */
  --link:          var(--brand-on-soft);                                                                  /* links: 4.5:1 on every surface */
  --link-hover:    light-dark(color(from var(--dl-brand-hover) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-hover) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));  /* links on hover: a step stronger (the link 0.08 darker in OKLCH lightness in light, lighter in dark), and on to 7:1 if that's short */

  /* ---- Lines and effects ---- */
  --border-quiet:  color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper));   /* dividers that should barely show */
  --border:        color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper));  /* card and table borders: decorative */
  --border-strong: color-mix(in oklab, var(--dl-ink) calc(46% + var(--text-contrast) * 1%), var(--dl-paper));  /* field and control borders: 3:1 on surfaces */
  --focus:         var(--brand-on-soft);                                     /* the focus ring: opaque, 4.5:1 on surfaces */
  --selection:     color-mix(in oklab, var(--dl-brand) 22%, var(--dl-paper));  /* selected text background */
  --shadow-color:  light-dark(color-mix(in oklab, black 10%, transparent), color-mix(in oklab, black 45%, transparent));  /* the colour of shadows */
  --shadow-s: 0 1px 3px var(--shadow-color);    /* a slight lift: buttons, chips */
  --shadow-m: 0 4px 14px var(--shadow-color);   /* cards */
  --shadow-l: 0 12px 32px var(--shadow-color);  /* popovers, menus, dialogs */

  /* ---- Hover and pressed: the second half of a color-mix(), from Web Awesome.
     Use as color-mix(in oklch, var(--solid), var(--mix-hover)). The text colour's lightness is flipped
     in OKLab, keeping its a and b: grey text has no hue a browser will read back (Chrome 157 reads it
     as none, which paints pink), so this reads none. ---- */
  --mix-hover:  oklab(from currentColor calc(1 - l) a b) 12%;  /* hover: away from the text colour */
  --mix-active: oklab(from currentColor calc(1 - l) a b) 22%;  /* pressed: further still */

  /* ---- Groups: brand, secondary, neutral, success, warning, danger, info. Five roles each:
     solid      a solid fill
     on-solid   text on it: white or black, whichever contrasts more (its sRGB luminance, as painted, vs --white-text-until)
     soft       a tinted background: the colour, held at L 0.7 or lighter in light (0.6 or darker in dark), mixed in OKLab
                into paper with its own tint taken out, so a blue soft stays blue on cream paper. Its vividness scales
                the mix's a and b, never its chroma and hue: a tint is too pale to carry a hue a browser will read back
                (Chrome 157 reads it as none, which paints pink), so no colour here reads a hue from a mix or from paper
     on-soft    text on soft, and coloured text on the page: the fill, moved only as far as 4.5:1 needs
     line       borders, icons and large text (24px, or 18.66px bold, and up): the dial, moved only as far as 3:1 needs

     Coloured text and lines follow one rule: keep the colour, and move it only as far as its
     contrast target needs, on the least contrasting background it sits on: its own soft tint,
     --surface-lowered or --surface-raised (--surface always lies between them). Only its
     linear-light RGB is scaled, which keeps the channels' ratios, so hue and saturation stay
     (in dark, until a channel reaches 1).
     --link-hover is the same rule at 7:1, starting from the link a step stronger.
       Y   the colour's luminance, 0.2126 r + 0.7152 g + 0.0722 b in linear sRGB (clipped to sRGB first)
       Yb  that background's luminance, as painted (clipped to sRGB)
       T   the target, plus 0.1 headroom so painting in 8 bits can't round it under the line
       light: Yt = (Yb + 0.05) / (T + 0.1) - 0.05; scale r, g and b by min(1, Yt / Y)
       dark:  Yt = (T + 0.1) * (Yb + 0.05) - 0.05; scale r, g and b by max(1, Yt / Y), each capped
              at 1; if a capped channel leaves it short, mix towards white only as far as Yt needs:
              by (Yt - Y1) / (1 - Y1), where Y1 is the luminance after scaling
     A colour that already passes keeps its exact value. CSS works out a relative colour from
     one colour's channels only, so the steps carry their numbers in colours:
       --dl-surfaces-y       the luminance of --surface-lowered in green, of --surface-raised in blue
       --dl-{group}-under    plus the soft tint's in red, mixed 50/50: Yb is min(2r, 4g, 4b) in light, max in dark
       --dl-{group}-text,    the colour, mixed 50/50 with a black whose alpha is s Yt, where s is 3 in
       --dl-{group}-line,    light (Yt is at most 0.29 there) and 1 in dark: scaling it up means Firefox
       --dl-brand-hover      rounding a mix's alpha to three decimals costs a third as much. Mixing
                             premultiplies, so the mix has alpha a = (1 + s Yt) / 2 and channels c / 2a:
                             the colour's channels are r * 2a, and Yt is (2a - 1) / s
       on-soft, line, hover  unpack both and scale, as above ---- */
  --dl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))));

--dl-brand-under: color-mix(in srgb-linear, color(from var(--brand-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-brand-text:  color-mix(in srgb-linear, color(from var(--dl-brand-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-brand-line:  color-mix(in srgb-linear, color(from var(--brand) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --brand-solid:    var(--dl-brand);
  --brand-on-solid: color(from var(--dl-brand) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --brand-soft:     oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-brand) max(l, 0.7) a b), oklab(from var(--dl-brand) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
  --brand-on-soft:  light-dark(color(from var(--dl-brand-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --brand-line:     light-dark(color(from var(--dl-brand-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-secondary-under: color-mix(in srgb-linear, color(from var(--secondary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-secondary-text:  color-mix(in srgb-linear, color(from var(--dl-secondary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-secondary-line:  color-mix(in srgb-linear, color(from var(--dl-secondary-dial) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --secondary-solid:    var(--dl-secondary);
  --secondary-on-solid: color(from var(--dl-secondary) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --secondary-soft:     oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-secondary) max(l, 0.7) a b), oklab(from var(--dl-secondary) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
  --secondary-on-soft:  light-dark(color(from var(--dl-secondary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --secondary-line:     light-dark(color(from var(--dl-secondary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --neutral-solid:    var(--dl-ink);
  --neutral-on-solid: var(--dl-paper);
  --neutral-soft:     var(--surface-lowered);
  --neutral-on-soft:  var(--text);
  --neutral-line:     var(--border);

  --dl-success-under: color-mix(in srgb-linear, color(from var(--success-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-success-text:  color-mix(in srgb-linear, color(from var(--dl-success-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-success-line:  color-mix(in srgb-linear, color(from var(--success) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --success-solid:    var(--dl-success);
  --success-on-solid: color(from var(--dl-success) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --success-soft:     oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-success) max(l, 0.7) a b), oklab(from var(--dl-success) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
  --success-on-soft:  light-dark(color(from var(--dl-success-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --success-line:     light-dark(color(from var(--dl-success-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-warning-under: color-mix(in srgb-linear, color(from var(--warning-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-warning-text:  color-mix(in srgb-linear, color(from var(--dl-warning-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-warning-line:  color-mix(in srgb-linear, color(from var(--warning) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --warning-solid:    var(--dl-warning);
  --warning-on-solid: color(from var(--dl-warning) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --warning-soft:     oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-warning) max(l, 0.7) a b), oklab(from var(--dl-warning) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
  --warning-on-soft:  light-dark(color(from var(--dl-warning-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --warning-line:     light-dark(color(from var(--dl-warning-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-danger-under: color-mix(in srgb-linear, color(from var(--danger-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-danger-text:  color-mix(in srgb-linear, color(from var(--dl-danger-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-danger-line:  color-mix(in srgb-linear, color(from var(--danger) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --danger-solid:    var(--dl-danger);
  --danger-on-solid: color(from var(--dl-danger) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --danger-soft:     oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-danger) max(l, 0.7) a b), oklab(from var(--dl-danger) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
  --danger-on-soft:  light-dark(color(from var(--dl-danger-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --danger-line:     light-dark(color(from var(--dl-danger-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));

  --dl-info-under: color-mix(in srgb-linear, color(from var(--info-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
  --dl-info-text:  color-mix(in srgb-linear, color(from var(--dl-info-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --dl-info-line:  color-mix(in srgb-linear, color(from var(--info) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
  --info-solid:    var(--dl-info);
  --info-on-solid: color(from var(--dl-info) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
  --info-soft:     oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-info) max(l, 0.7) a b), oklab(from var(--dl-info) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
  --info-on-soft:  light-dark(color(from var(--dl-info-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --info-line:     light-dark(color(from var(--dl-info-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
  --dl-brand-hover: color-mix(in srgb-linear, color(from light-dark(oklab(from var(--brand-on-soft) calc(l - 0.08) a b), oklab(from var(--brand-on-soft) calc(l + 0.08) a b)) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (7 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (7 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));

  /* ---- Ungrouped: components use these; .is-{group} points them at a group ---- */
  --solid:    var(--brand-solid);
  --on-solid: var(--brand-on-solid);
  --soft:     var(--brand-soft);
  --on-soft:  var(--brand-on-soft);
  --line:     var(--brand-line);

  /* ---- Deprecated: --accent's tokens, renamed --secondary-*. They still work; rename them ---- */
  --accent-solid:    var(--secondary-solid);     /* deprecated: use --secondary-solid */
  --accent-on-solid: var(--secondary-on-solid);  /* deprecated: use --secondary-on-solid */
  --accent-soft:     var(--secondary-soft);      /* deprecated: use --secondary-soft */
  --accent-on-soft:  var(--secondary-on-soft);   /* deprecated: use --secondary-on-soft */
  --accent-line:     var(--secondary-line);      /* deprecated: use --secondary-line */
}
.is-brand     { --solid: var(--brand-solid);     --on-solid: var(--brand-on-solid);     --soft: var(--brand-soft);     --on-soft: var(--brand-on-soft);     --line: var(--brand-line); }
.is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
.is-neutral   { --solid: var(--neutral-solid);   --on-solid: var(--neutral-on-solid);   --soft: var(--neutral-soft);   --on-soft: var(--neutral-on-soft);   --line: var(--neutral-line); }
.is-success   { --solid: var(--success-solid);   --on-solid: var(--success-on-solid);   --soft: var(--success-soft);   --on-soft: var(--success-on-soft);   --line: var(--success-line); }
.is-warning   { --solid: var(--warning-solid);   --on-solid: var(--warning-on-solid);   --soft: var(--warning-soft);   --on-soft: var(--warning-on-soft);   --line: var(--warning-line); }
.is-danger    { --solid: var(--danger-solid);    --on-solid: var(--danger-on-solid);    --soft: var(--danger-soft);    --on-soft: var(--danger-on-soft);    --line: var(--danger-line); }
.is-info      { --solid: var(--info-solid);      --on-solid: var(--info-on-solid);      --soft: var(--info-soft);      --on-soft: var(--info-on-soft);      --line: var(--info-line); }
.is-accent    { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }  /* deprecated: use .is-secondary */
/* A light or dark band: its own scheme, and its own background and text worked out in it */
.is-light { color-scheme: light; background-color: var(--surface); color: var(--text); }
.is-dark  { color-scheme: dark;  background-color: var(--surface); color: var(--text); }
/* ============================================================
   Dials: type and space (dials-scale.css)
   A few dials set every text size and every space size, the way
   Utopia (utopia.fyi) works them out, but the maths runs in the
   browser: change a dial and the whole scale follows. Leading is
   worked out the same way, for whatever size it's used at. This
   file sets no type on any element: only
   dials-base.css does that. Dials live on
   :root (and :host); the derived scale is declared on :root,
   [data-dials] and :host, so a dial set on a [data-dials] element
   re-derives the sizes inside it.
   ============================================================ */
:root, :host {
  /* ---- Dials ---- */
  --screen-min: 360;       /* the screen widths the scale runs between, in px */
  --screen-max: 1240;
  --size-min: 16;          /* body text at the narrowest and widest screens, in px */
  --size-max: 18;
  --ratio-min: 1.2;        /* each step is this much bigger than the last: 1.2 minor third, */
  --ratio-max: 1.25;       /* 1.25 major third, 1.333 perfect fourth, 1.5 fifth, 1.618 golden */
  --space-min: var(--size-min);  /* --space-s at each end, in px: follows body text */
  --space-max: var(--size-max);  /* size unless you set a number */
  --space-density: 1;      /* scales every space size: 0.8 compact, 1.25 roomy */
  --radius-base: 10;       /* corner radius of cards and fields, in px (a number, not a length) */

  /* Faces: set per site, and load them yourself (each theme file names its Google Fonts link) */
  --font-body: ui-sans-serif, system-ui, sans-serif;  /* body text and controls */
  --font-heading: ui-sans-serif, system-ui, sans-serif;  /* headings */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* code, kbd, samp, pre */

  /* Border widths: every border and outline uses one of these */
  --border-width-s: 1px;   /* hairlines: cards, fields, tables */
  --border-width-m: 2px;   /* emphasis; outline offsets */
  --border-width-l: 3px;   /* focus rings, quote bars, active tabs */

  /* ---- Leading: one dial for the rhythm of the type ---- */
  /* --leading-body: 1.5;      line height at body size (--size-0), unitless. Every larger size keeps the same gap between lines, so it gets proportionally tighter; the space after paragraphs is one body line */
  /* --font-accent: var(--font-body);  a third face, for ledes, pull quotes or buttons; read it as var(--font-accent, var(--font-body)) */
}

:root, [data-dials], :host {
  /* ---- Internal: worked out from the dials, never edited by hand ---- */
  --dl-screen-range: calc(var(--screen-max) - var(--screen-min));
  --dl-fluid: calc((100vw - var(--screen-min) * 1px) / var(--dl-screen-range) * 16);  /* 0 at the narrowest, 16px at the widest */
  --dl-min-0: calc(var(--size-min) / 16);
  --dl-max-0: calc(var(--size-max) / 16);
  --dl-min--1: calc(var(--dl-min-0) / var(--ratio-min));
  --dl-max--1: calc(var(--dl-max-0) / var(--ratio-max));
  --dl-min--2: calc(var(--dl-min--1) / var(--ratio-min));
  --dl-max--2: calc(var(--dl-max--1) / var(--ratio-max));
  --dl-min-1: calc(var(--dl-min-0) * var(--ratio-min));
  --dl-max-1: calc(var(--dl-max-0) * var(--ratio-max));
  --dl-min-2: calc(var(--dl-min-1) * var(--ratio-min));
  --dl-max-2: calc(var(--dl-max-1) * var(--ratio-max));
  --dl-min-3: calc(var(--dl-min-2) * var(--ratio-min));
  --dl-max-3: calc(var(--dl-max-2) * var(--ratio-max));
  --dl-min-4: calc(var(--dl-min-3) * var(--ratio-min));
  --dl-max-4: calc(var(--dl-max-3) * var(--ratio-max));
  --dl-min-5: calc(var(--dl-min-4) * var(--ratio-min));
  --dl-max-5: calc(var(--dl-max-4) * var(--ratio-max));
  --dl-min-6: calc(var(--dl-min-5) * var(--ratio-min));
  --dl-max-6: calc(var(--dl-max-5) * var(--ratio-max));
  --dl-min-7: calc(var(--dl-min-6) * var(--ratio-min));
  --dl-max-7: calc(var(--dl-max-6) * var(--ratio-max));
  --dl-min-8: calc(var(--dl-min-7) * var(--ratio-min));
  --dl-max-8: calc(var(--dl-max-7) * var(--ratio-max));

  /* ---- Font sizes: --size-0 is body text; each number up or down is one step of the ratio,
     running in a straight line between its two ends ---- */
  --size--2: clamp(min(var(--dl-min--2), var(--dl-max--2)) * 1rem, var(--dl-min--2) * 1rem + (var(--dl-max--2) - var(--dl-min--2)) * var(--dl-fluid), max(var(--dl-min--2), var(--dl-max--2)) * 1rem);
  --size--1: clamp(min(var(--dl-min--1), var(--dl-max--1)) * 1rem, var(--dl-min--1) * 1rem + (var(--dl-max--1) - var(--dl-min--1)) * var(--dl-fluid), max(var(--dl-min--1), var(--dl-max--1)) * 1rem);
  --size-0: clamp(min(var(--dl-min-0), var(--dl-max-0)) * 1rem, var(--dl-min-0) * 1rem + (var(--dl-max-0) - var(--dl-min-0)) * var(--dl-fluid), max(var(--dl-min-0), var(--dl-max-0)) * 1rem);
  --size-1: clamp(min(var(--dl-min-1), var(--dl-max-1)) * 1rem, var(--dl-min-1) * 1rem + (var(--dl-max-1) - var(--dl-min-1)) * var(--dl-fluid), max(var(--dl-min-1), var(--dl-max-1)) * 1rem);
  --size-2: clamp(min(var(--dl-min-2), var(--dl-max-2)) * 1rem, var(--dl-min-2) * 1rem + (var(--dl-max-2) - var(--dl-min-2)) * var(--dl-fluid), max(var(--dl-min-2), var(--dl-max-2)) * 1rem);
  --size-3: clamp(min(var(--dl-min-3), var(--dl-max-3)) * 1rem, var(--dl-min-3) * 1rem + (var(--dl-max-3) - var(--dl-min-3)) * var(--dl-fluid), max(var(--dl-min-3), var(--dl-max-3)) * 1rem);
  --size-4: clamp(min(var(--dl-min-4), var(--dl-max-4)) * 1rem, var(--dl-min-4) * 1rem + (var(--dl-max-4) - var(--dl-min-4)) * var(--dl-fluid), max(var(--dl-min-4), var(--dl-max-4)) * 1rem);
  --size-5: clamp(min(var(--dl-min-5), var(--dl-max-5)) * 1rem, var(--dl-min-5) * 1rem + (var(--dl-max-5) - var(--dl-min-5)) * var(--dl-fluid), max(var(--dl-min-5), var(--dl-max-5)) * 1rem);
  --size-6: clamp(min(var(--dl-min-6), var(--dl-max-6)) * 1rem, var(--dl-min-6) * 1rem + (var(--dl-max-6) - var(--dl-min-6)) * var(--dl-fluid), max(var(--dl-min-6), var(--dl-max-6)) * 1rem);
  --size-7: clamp(min(var(--dl-min-7), var(--dl-max-7)) * 1rem, var(--dl-min-7) * 1rem + (var(--dl-max-7) - var(--dl-min-7)) * var(--dl-fluid), max(var(--dl-min-7), var(--dl-max-7)) * 1rem);  /* display type */
  --size-8: clamp(min(var(--dl-min-8), var(--dl-max-8)) * 1rem, var(--dl-min-8) * 1rem + (var(--dl-max-8) - var(--dl-min-8)) * var(--dl-fluid), max(var(--dl-min-8), var(--dl-max-8)) * 1rem);  /* display type: the top of the scale */

  /* ---- Leading: worked out for the size of the element it's used on ---- */
  /* --leading is a length: apply it on each element that sets a font size (dials-base.css applies it to every
     element), never on a wrapper for its children to inherit, where it would pass on one fixed length. */
  --dl-leading-body: var(--leading-body, 1.5);
  /* the body's gap between lines at every larger size (1em + the body gap), so bigger text gets proportionally
     tighter lines; smaller text keeps the body ratio; no size goes below 1.05 */
  --leading: max(1.05em, min(var(--dl-leading-body) * 1em, 1em + (var(--dl-leading-body) - 1) * var(--size-0)));  /* line height for the size it's on: the same gap between lines as body text at every larger size */
  --space-paragraph: calc(var(--dl-leading-body) * var(--size-0));  /* one body line: the space after paragraphs and other blocks; headings take two above and half below */

  /* ---- Space: multiples of the space base (Utopia's t-shirt sizes), times the density ---- */
  --dl-space-min: calc(var(--space-min) / 16 * var(--space-density));
  --dl-space-max: calc(var(--space-max) / 16 * var(--space-density));
  --space-3xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.25 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.25rem));
  --space-2xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem));
  --space-xs: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem));
  --space-s: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem));
  --space-m: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem));
  --space-l: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
  --space-xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
  --space-2xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
  --space-3xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem));
  --space-4xl: clamp(calc(var(--dl-space-min) * 8rem), calc(var(--dl-space-min) * 8rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 8) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem));
  /* One-up pairs: small on phones, the next size up on desktops */
  --space-3xs-2xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem));
  --space-2xs-xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem));
  --space-xs-s: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem));
  --space-s-m: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem));
  --space-m-l: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
  --space-l-xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
  --space-xl-2xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
  --space-2xl-3xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem));
  --space-3xl-4xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem));
  /* Skip pairs, for gutters and section padding that need a bigger swing */
  --space-s-l: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
  --space-m-xl: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
  --space-l-2xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));

  /* ---- Corners ---- */
  --radius-s: calc(var(--radius-base) * 0.5px);
  --radius-m: calc(var(--radius-base) * 1px);
  --radius-l: calc(var(--radius-base) * 1.6px);
  --radius-pill: 999px;
}
/* ============================================================
   Dials: the fallback (src/fallback.css, built into the end of dials.css)
   For browsers with color-mix() but without relative colour or
   light-dark(): Chrome and Edge 111-122, Safari 16.2-17, Firefox
   113-127. They can't work out the derived chain above, so this
   block works every public colour token out again from the same
   dials, with color-mix() alone. It comes after the chain and uses
   the same selectors, so it wins there; a site's own file, loaded
   after dials.css, still wins over it. It never sets a dial.
   Approximations, held to the same contrast as the chain (the
   contrast check's --fallback mode):
   - The page is light. .is-dark bands are dark, .is-light bands light.
   - Paper and ink come from --grey at fixed mixes, so the four
     lightness dials, --balance, --dark-lift, --tint-vividness and
     --text-contrast have no effect. --paper-light and friends do.
   - on-solid text can't follow the fill's luminance: each group has a
     fixed choice, and its fill is pulled a fixed amount towards the
     other end so the text keeps 4.5:1 in every Dials theme. White on
     brand, secondary, danger and info, whose fills are darkened; black
     on success, whose fill is lightened, and warning, as set.
   - Coloured text and lines can't move only as far as their target
     needs: on-soft is the dial mixed a fixed amount into ink (so --link
     and --focus too), line a smaller amount, and --link-hover further
     still. The amounts hold 4.5:1 and 3:1 on every surface and soft
     tint, for every theme and for extreme dials, so they over-shoot for
     most colours. Ink is near-black on a light page and near-white in an
     .is-dark band, so the same mix works in both.
   - No calc() and no percentages computed inside color-mix(): only
     literal percentages and dials that are one (--tint-strength).
   ============================================================ */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
  /* ---- Internal: the scheme switches, literal percentages a band can flip ---- */
  :root, :host, .is-light {
    color-scheme: light;
    --dl-fb-dark: 0%;     /* how much of the dark paper and ink to use */
    --dl-fb-raise: 38%;   /* how much white lifts --surface-raised */
    --dl-fb-shadow: 10%;  /* the strength of shadows */
  }
  .is-dark {
    color-scheme: dark;
    --dl-fb-dark: 100%;
    --dl-fb-raise: 4%;
    --dl-fb-shadow: 45%;
  }

  /* Bands are declared here too, so every token is worked out again in a band's own scheme */
  :root, [data-dials], :host, .is-light, .is-dark {
    /* ---- Internal: paper, ink and the six fills ---- */
    --dl-paper-light: var(--paper-light, color-mix(in oklab, var(--grey) 20%, white));
    --dl-paper-dark:  var(--paper-dark,  color-mix(in oklab, var(--grey) 30%, black));
    --dl-ink-light:   var(--ink-light,   color-mix(in oklab, var(--grey) 34%, black));
    --dl-ink-dark:    var(--ink-dark,    color-mix(in oklab, var(--grey) 17%, white));
    --dl-paper: color-mix(in oklab, var(--dl-paper-dark) var(--dl-fb-dark), var(--dl-paper-light));
    --dl-ink:   color-mix(in oklab, var(--dl-ink-dark) var(--dl-fb-dark), var(--dl-ink-light));
    --dl-brand:   color-mix(in oklab, var(--brand) 72%, black);
    --dl-secondary: color-mix(in oklab, var(--accent, var(--secondary)) 67%, black);
    --dl-success: color-mix(in oklab, var(--success) 85%, white);
    --dl-warning: var(--warning);
    --dl-danger:  color-mix(in oklab, var(--danger) 78%, black);
    --dl-info:    color-mix(in oklab, var(--info) 61%, black);

    /* ---- Surfaces ---- */
    --surface:         var(--dl-paper);
    --surface-raised:  color-mix(in oklab, white var(--dl-fb-raise), var(--dl-paper));
    --surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper));
    --surface-sunken:  color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper));
    --surface-overlay: color-mix(in oklab, black 45%, transparent);

    /* ---- Text: a step stronger than the chain's defaults, to cover --text-contrast ---- */
    --text-strong:   var(--dl-ink);
    --text:          color-mix(in oklab, var(--dl-ink) 94%, var(--dl-paper));
    --text-muted:    color-mix(in oklab, var(--dl-ink) 89%, var(--dl-paper));
    --text-quiet:    color-mix(in oklab, var(--dl-ink) 86%, var(--dl-paper));
    --text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper));
    --link:          var(--brand-on-soft);
    --link-hover:    color-mix(in oklab, var(--brand) 20%, var(--dl-ink));

    /* ---- Lines and effects ---- */
    --border-quiet:  color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper));
    --border:        color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper));
    --border-strong: color-mix(in oklab, var(--dl-ink) 64%, var(--dl-paper));
    --focus:         var(--brand-on-soft);
    --selection:     color-mix(in oklab, var(--brand) 22%, var(--dl-paper));
    --shadow-color:  color-mix(in oklab, black var(--dl-fb-shadow), transparent);
    --shadow-s: 0 1px 3px var(--shadow-color);
    --shadow-m: 0 4px 14px var(--shadow-color);
    --shadow-l: 0 12px 32px var(--shadow-color);
    --mix-hover:  black 12%;
    --mix-active: black 22%;

    /* ---- Groups: soft mixed into paper, on-soft and line mixed towards ink ---- */
    --brand-solid:    var(--dl-brand);
    --brand-on-solid: white;
    --brand-soft:     color-mix(in oklab, var(--brand) var(--tint-strength), var(--dl-paper));
    --brand-on-soft:  color-mix(in oklab, var(--brand) 26%, var(--dl-ink));
    --brand-line:     color-mix(in oklab, var(--brand) 40%, var(--dl-ink));

    --secondary-solid:    var(--dl-secondary);
    --secondary-on-solid: white;
    --secondary-soft:     color-mix(in oklab, var(--accent, var(--secondary)) var(--tint-strength), var(--dl-paper));
    --secondary-on-soft:  color-mix(in oklab, var(--accent, var(--secondary)) 26%, var(--dl-ink));
    --secondary-line:     color-mix(in oklab, var(--accent, var(--secondary)) 40%, var(--dl-ink));

    --neutral-solid:    var(--dl-ink);
    --neutral-on-solid: var(--dl-paper);
    --neutral-soft:     var(--surface-lowered);
    --neutral-on-soft:  var(--text);
    --neutral-line:     var(--border);

    --success-solid:    var(--dl-success);
    --success-on-solid: black;
    --success-soft:     color-mix(in oklab, var(--success) var(--tint-strength), var(--dl-paper));
    --success-on-soft:  color-mix(in oklab, var(--success) 26%, var(--dl-ink));
    --success-line:     color-mix(in oklab, var(--success) 40%, var(--dl-ink));

    --warning-solid:    var(--dl-warning);
    --warning-on-solid: black;
    --warning-soft:     color-mix(in oklab, var(--warning) var(--tint-strength), var(--dl-paper));
    --warning-on-soft:  color-mix(in oklab, var(--warning) 26%, var(--dl-ink));
    --warning-line:     color-mix(in oklab, var(--warning) 40%, var(--dl-ink));

    --danger-solid:    var(--dl-danger);
    --danger-on-solid: white;
    --danger-soft:     color-mix(in oklab, var(--danger) var(--tint-strength), var(--dl-paper));
    --danger-on-soft:  color-mix(in oklab, var(--danger) 26%, var(--dl-ink));
    --danger-line:     color-mix(in oklab, var(--danger) 40%, var(--dl-ink));

    --info-solid:    var(--dl-info);
    --info-on-solid: white;
    --info-soft:     color-mix(in oklab, var(--info) var(--tint-strength), var(--dl-paper));
    --info-on-soft:  color-mix(in oklab, var(--info) 26%, var(--dl-ink));
    --info-line:     color-mix(in oklab, var(--info) 40%, var(--dl-ink));

    /* ---- Ungrouped ---- */
    --solid:    var(--brand-solid);
    --on-solid: var(--brand-on-solid);
    --soft:     var(--brand-soft);
    --on-soft:  var(--brand-on-soft);
    --line:     var(--brand-line);

    /* ---- Deprecated: the old names for the secondary group ---- */
    --accent-solid:    var(--secondary-solid);
    --accent-on-solid: var(--secondary-on-solid);
    --accent-soft:     var(--secondary-soft);
    --accent-on-soft:  var(--secondary-on-soft);
    --accent-line:     var(--secondary-line);
  }
  /* the group classes again, so they still win on a [data-dials] element or a band */
  .is-brand     { --solid: var(--brand-solid);     --on-solid: var(--brand-on-solid);     --soft: var(--brand-soft);     --on-soft: var(--brand-on-soft);     --line: var(--brand-line); }
  .is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
  .is-neutral   { --solid: var(--neutral-solid);   --on-solid: var(--neutral-on-solid);   --soft: var(--neutral-soft);   --on-soft: var(--neutral-on-soft);   --line: var(--neutral-line); }
  .is-success   { --solid: var(--success-solid);   --on-solid: var(--success-on-solid);   --soft: var(--success-soft);   --on-soft: var(--success-on-soft);   --line: var(--success-line); }
  .is-warning   { --solid: var(--warning-solid);   --on-solid: var(--warning-on-solid);   --soft: var(--warning-soft);   --on-soft: var(--warning-on-soft);   --line: var(--warning-line); }
  .is-danger    { --solid: var(--danger-solid);    --on-solid: var(--danger-on-solid);    --soft: var(--danger-soft);    --on-soft: var(--danger-on-soft);    --line: var(--danger-line); }
  .is-info      { --solid: var(--info-solid);      --on-solid: var(--info-on-solid);      --soft: var(--info-soft);      --on-soft: var(--info-on-soft);      --line: var(--info-line); }
  .is-accent    { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
}
/* Generated by tools/fallback.mjs from dials.css (src/colour.css 192f968f0b78d4df): the defaults in
   the light scheme. Don't edit. The last resort, for browsers without color-mix() (Chrome and Edge
   before 111, Safari before 16.2, Firefox before 113, all 2022 or older): they can't work anything
   out, so every colour token is flat and they get the house colours, light only. Colour dials have no
   effect there; type and space work as normal. */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root, [data-dials], :host, .is-light, .is-dark {
    color-scheme: light;
    --surface: #f9fafc;
    --surface-raised: #feffff;
    --surface-lowered: #eef0f2;
    --surface-sunken: #e4e5e7;
    --surface-overlay: rgb(0 0 0 / 45%);
    --text-strong: #151619;
    --text: #2f3033;
    --text-muted: #505154;
    --text-quiet: #5d5e61;
    --text-disabled: #999a9d;
    --link: #2362e9;
    --link-hover: #0743c2;
    --border-quiet: #e7e8ea;
    --border: #d7d8db;
    --border-strong: #86878a;
    --focus: #2362e9;
    --selection: #c9dbfc;
    --shadow-color: rgb(0 0 0 / 10%);
    --shadow-s: 0 1px 3px rgb(0 0 0 / 10%);
    --shadow-m: 0 4px 14px rgb(0 0 0 / 10%);
    --shadow-l: 0 12px 32px rgb(0 0 0 / 10%);
    --mix-hover: black 12%;
    --mix-active: black 22%;
    --brand-solid: #2463eb;
    --brand-on-solid: #ffffff;
    --brand-soft: #e9f1ff;
    --brand-on-soft: #2362e9;
    --brand-line: #2463eb;
    --secondary-solid: #7c51c8;
    --secondary-on-solid: #ffffff;
    --secondary-soft: #f1eefc;
    --secondary-on-soft: #7c51c8;
    --secondary-line: #7c51c8;
    --neutral-solid: #151619;
    --neutral-on-solid: #f9fafc;
    --neutral-soft: #eef0f2;
    --neutral-on-soft: #2f3033;
    --neutral-line: #d7d8db;
    --success-solid: #239f50;
    --success-on-solid: #000000;
    --success-soft: #eaf4eb;
    --success-on-soft: #197c3d;
    --success-line: #229c4f;
    --warning-solid: #f59f0a;
    --warning-on-solid: #000000;
    --warning-soft: #faf1e7;
    --warning-on-soft: #976003;
    --warning-line: #bd7906;
    --danger-solid: #dc2828;
    --danger-on-solid: #ffffff;
    --danger-soft: #ffece9;
    --danger-on-soft: #d02525;
    --danger-line: #dc2828;
    --info-solid: #0c8eca;
    --info-on-solid: #000000;
    --info-soft: #e9f2f9;
    --info-on-soft: #0773a4;
    --info-line: #0c8eca;
    --accent-solid: #7c51c8;
    --accent-on-solid: #ffffff;
    --accent-soft: #f1eefc;
    --accent-on-soft: #7c51c8;
    --accent-line: #7c51c8;
  }
}
/* ═══ dials:end (Dials) ═════════════════════════════════════════════════ */

/* ═══ This site's dials ═════════════════════════════════════════════════
 * The ONLY place a colour or a scale value is typed. The values reproduce
 * Wellbrook's look before Dials (its --palette-hue 185, --palette-chroma
 * 0.104, --l-solid 0.52 and --u-* anchors), so the site looks the same in
 * light; dark mode is new (#427).
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Colour dials. Each is a group with five roles: --brand-solid,
     * --brand-on-solid, --brand-soft, --brand-on-soft and --brand-line. */
    --brand: hsl(175 100% 24%);     /* the practice teal (#0d9488) at OKLCH lightness 0.52, as the site has always drawn it: darkened so white button text holds 5.1:1 */
    --secondary: hsl(312 27% 43%);  /* the second brand colour, 150 degrees round from the teal; nothing on the site uses it yet */
    --tertiary: var(--brand);       /* Wellbrook has no third brand colour */
    --success: hsl(127 53% 29%);
    --warning: hsl(37 74% 54%);
    --danger: hsl(2 60% 45%);
    --info: hsl(202 74% 36%);       /* also the far end of the hero's wash */
    --grey: hsl(171 12% 42%);       /* the hue and strength of the tint in paper and ink: the teal's hue, muted */

    /* Paper and ink, exact. Light: a white page and the deep navy the site
     * has always used for headings. Dark: a blue-slate page, a step lighter
     * than the navy bands (below), and near-white ink. */
    --paper-light: hsl(0 0% 100%);
    --ink-light: hsl(221 47% 8%);
    --paper-dark: hsl(208 35% 10%);
    --ink-dark: hsl(201 35% 95%);

    /* Fills get 0.1 lighter in dark: a mid-lightness teal loses contrast
     * against a dark page. */
    --dark-lift: 0.1;
    /* Soft tints as the site drew them: --brand-soft lands on the old pale
     * teal (OKLCH 0.96, chroma 0.026) on white paper. */
    --tint-strength: 13%;
    --tint-vividness: 1.9;

    /* Type and space: body text 16px on a 320px phone to 18px at 1240px, each
     * step 1.2x (phone) to 1.25x (desktop) the last; --space-s 16px to 20px. */
    --screen-min: 320;
    --screen-max: 1240;
    --size-min: 16;
    --size-max: 18;
    --ratio-min: 1.2;
    --ratio-max: 1.25;
    --space-min: 16;
    --space-max: 20;
    --space-density: 1;

    /* Line height (Dials v0.4): --leading-body at body size, 1.5 as the site
     * has always set body text. Dials works out --leading from it for the
     * size of the element it's on (the form fields and labels read it). The
     * site's own headings, ledes and small print keep the template's old
     * ladder (--leading-s, --leading-m ...), frozen in "Old names" at the
     * values they always had, as are its weights and letter spacing. */
    --leading-body: 1.5;
    /* Two line heights of the site's own, outside any ladder: the 404 page's
     * big numeral, set solid, and its quick links, whose line box is exactly
     * the 24px WCAG target. */
    --leading-numeral: 0.9;
    --leading-target: 24px;

    /* Corners: --radius-s 6px, --radius-m 12px (cards), --radius-l 19.2px */
    --radius-base: 12;
    /* Accent rules and active states are 4px, not Dials' 3px */
    --border-width-l: 4px;

    /* Faces: Nunito Sans from Google Fonts, Mackinac from Adobe Fonts (both
     * linked in each page's <head>) */
    --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'p22-mackinac-pro', Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The dark bands (the footer and .section-dark, class="is-dark" with
 * data-dials) keep the navy they have always been, so on a dark page they
 * still read as bands, a step darker than the page. */
[data-dials].is-dark {
    --paper-dark: hsl(221 47% 8%);
}

/* The visitor's own choice from the header's switcher. With none, the page
 * follows the device: Dials' color-scheme: light dark. Only where Dials can
 * draw a dark page: elsewhere (Dials' fallback) the page is always light, and
 * a forced dark scheme would only darken the browser's own controls on it. */
@supports (color: oklch(from red l c h)) and (color: light-dark(red, red)) {
    :root[data-scheme="light"] { color-scheme: light; }
    :root[data-scheme="dark"] { color-scheme: dark; }
}

/* ── The tertiary group ───────────────────────────────────────────────────
 * A third brand colour, typically doing button and CTA work, that is neither
 * a tint of the brand nor a status colour (practices routinely have one:
 * "Button Brown", "Morning Orange"). Dials has no third brand group, so the
 * template adds one with the same five roles, worked out the way Dials v0.2.0
 * works out its own groups (each formula is Dials' brand formula with the
 * tertiary colour in it), from public tokens only. Set --tertiary above;
 * never set these. class="is-tertiary" points --solid and friends at it,
 * like .is-secondary. Declared on bands too, so a band's group follows the
 * band's own scheme.
 *
 *   --tertiary-on-soft  the fill, moved only as far as 4.5:1 needs on the
 *                       least contrasting of its soft tint, --surface-lowered
 *                       and --surface-raised; a colour that passes is kept
 *   --tertiary-line     the dial, moved only as far as 3:1 needs, the same way
 *
 * Dials carries the numbers those two need in its internal --dl-* plumbing,
 * which nothing outside Dials may read, so the template works the same
 * numbers out again from public tokens in its own --tpl-* properties: the
 * luminance of --surface-lowered and --surface-raised (Dials' --dl-surfaces-y)
 * and of the soft tint, and the colour carrying its target. They are the
 * template's plumbing: never use or set a --tpl-* property anywhere else. */
:root, [data-dials], .is-light, .is-dark {
    --tpl-tertiary-base:  oklab(from var(--tertiary) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
    --tertiary-solid:     light-dark(var(--tpl-tertiary-base), oklab(from var(--tpl-tertiary-base) calc(l + var(--dark-lift)) a b));
    --tertiary-on-solid:  color(from var(--tertiary-solid) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
    --tertiary-soft:      oklab(from color-mix(in oklab, light-dark(oklab(from var(--tertiary-solid) max(l, 0.7) a b), oklab(from var(--tertiary-solid) min(l, 0.6) a b)) var(--tint-strength), oklab(from var(--surface) l 0 0)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
    --tpl-surfaces-y:     color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))));
    --tpl-tertiary-under: color-mix(in srgb-linear, color(from var(--tertiary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--tpl-surfaces-y));
    --tpl-tertiary-text:  color-mix(in srgb-linear, color(from var(--tpl-tertiary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
    --tpl-tertiary-line:  color-mix(in srgb-linear, color(from var(--tertiary) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
    --tertiary-on-soft:   light-dark(color(from var(--tpl-tertiary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
    --tertiary-line:      light-dark(color(from var(--tpl-tertiary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
}
.is-tertiary { --solid: var(--tertiary-solid); --on-solid: var(--tertiary-on-solid); --soft: var(--tertiary-soft); --on-soft: var(--tertiary-on-soft); --line: var(--tertiary-line); }
/* The tertiary group in older browsers: without relative colour or
 * light-dark() (iOS 16 and 17, Safari before 18, Chrome and Edge before 123,
 * Firefox before 128) the derivation above cannot be worked out, and Dials'
 * own fallback covers only Dials' groups. So, the way Dials' fallback does
 * its groups, under the same condition and with the same selectors as the
 * derivation: the five roles again with color-mix(in oklab, ...) alone, from
 * --tertiary and the paper (--surface) and ink (--text-strong) Dials'
 * fallback has already worked out. As in Dials v0.2.0's fallback, on-soft is
 * the colour mixed 26% into ink and the line 40% into ink; neither can move
 * only as far as it needs there, so both over-shoot for most colours. Text
 * on the fill is a fixed white, with the fill pulled towards black as Dials
 * pulls --brand (72%), so it keeps 4.5:1. A site with a very light
 * --tertiary checks it: check-contrast.mjs --fallback. */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
    :root, [data-dials], .is-light, .is-dark {
        --tertiary-solid:    color-mix(in oklab, var(--tertiary) 72%, black);
        --tertiary-on-solid: white;
        --tertiary-soft:     color-mix(in oklab, var(--tertiary) var(--tint-strength), var(--surface));
        --tertiary-on-soft:  color-mix(in oklab, var(--tertiary) 26%, var(--text-strong));
        --tertiary-line:     color-mix(in oklab, var(--tertiary) 40%, var(--text-strong));
    }
}

/* ── The template's own tokens ────────────────────────────────────────────
 * What Dials does not cover: the measure, the grid, the shared control
 * corner, the tap target, layers and motion. None of them is a colour, a text
 * size or a space size. Line height is Dials' --leading; weights and letter
 * spacing are written on the elements that use them, as plain numbers and em
 * (the template's old --leading-*, --tracking-* and --weight-* are in "Old
 * names" below, which is where this site's base layer reads them from). */
:root {
    /* --- Weight -------------------------------------------------------- */
    /* THREE WEIGHTS, DELIBERATELY: 400 body, 600 emphasis (nav, labels,
     * buttons, eyebrows, strong) and 700 headline. A fourth needs a reason:
     * the face has a visibly distinct cut AND the three are not creating
     * enough contrast. A flat hierarchy is almost always a spacing or size
     * problem, not a weight problem. */

    /* --- Measure ------------------------------------------------------- */
    --measure: 65ch;                 /* body copy, where a container asks for it (.measure) */
    --measure-tight: 45ch;           /* card and caption copy */

    /* --- Grid ---------------------------------------------------------- */
    /* Deliberately minimal: the container and gutter are fluid, placement is
     * left to each layout. Use .u-container and .u-grid below. */
    --grid-max-width: 75rem;   /* Wellbrook's 1200px measure */
    --grid-gutter: var(--space-s-l);
    --grid-columns: 12;

    /* --- Corners beyond Dials' three ----------------------------------- */
    --radius-xs: calc(var(--radius-base) * 0.333px);  /* tags, inline chips, the focus ring: a third of --radius-m, so it follows --radius-base */
    --radius-round: 50%;                   /* avatars */
    --control-radius: var(--radius-s);     /* buttons AND fields: a site sets this once, both follow */

    /* --- Touch targets ------------------------------------------------- */
    /* The smallest box a finger hits reliably: 44px (WCAG 2.5.5, Apple's
     * HIG). A fixed dimension rather than spacing, so it does not scale. */
    --target-min: 2.75rem;

    /* --- Inset shadows, from Dials' --shadow-color ------------------------ */
    --shadow-inner-s: inset 0 1px 2px 0 var(--shadow-color);
    --shadow-inner-m: inset 0 2px 6px 0 var(--shadow-color);

    /* --- Layers -------------------------------------------------------- */
    /* Six values, so z-index is never invented at the call site. */
    --layer-behind: -1;    /* decorative washes sitting behind content */
    --layer-base: 1;
    --layer-raised: 2;      /* hover cards, sticky rows */
    --layer-nav: 3;         /* sticky header */
    --layer-overlay: 4;     /* dropdowns, popovers */
    --layer-modal: 5;       /* dialogs and their backdrop */
    --layer-top: 2147483647;/* skip links, live-region alerts */

    /* --- Motion -------------------------------------------------------- */
    --duration-fast: 120ms;   /* hover, focus */
    --duration-base: 220ms;   /* most transitions */
    --duration-slow: 400ms;   /* entrances */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --reveal-distance: 1.5rem;

    /* --- The fixed header bar: a dimension, not spacing. The hero, the
     * inner-page hero and the mobile menu clear it by this much. */
    --header-h: 4.5rem;
}

/* ═══ Old names ═══ aliases:begin ═══════════════════════════════════════
 * The template's token names before Dials (#426), each pointing at the Dials
 * token that replaces it, so markup, the Form controls section and any site
 * layer written against them keep working until #427 migrates the live
 * sites. NEVER use one in new work: use the name on the right. Delete this
 * whole block (down to aliases:end) once nothing reads any of them.
 *
 * Declared on [data-dials] and the .is-light/.is-dark bands as well as
 * :root, so a re-themed scope's or a band's aliases follow its own dials and
 * scheme, as Dials' own tokens do (its fallback works them out again there). Names Dials took over with a new meaning are NOT
 * here: --surface is now the PAGE (the old raised --surface is
 * --surface-raised), --secondary is the second brand colour's dial (it used
 * to be its fill: that is --secondary-solid), --accent is that dial's old
 * Dials name (deprecated in Dials v0.2.0: never set it), --success/--warning/
 * --danger/--info/--tertiary are dials (the fill is --success-solid ...), and --border, --border-strong, --space-*,
 * --radius-s/m/l, --shadow-* and --font-* are Dials' own. The --u-*,
 * --palette-*, --hue-*, --chroma-*, --l-* and --scheme dials are gone: set
 * the Dials dials instead. */
:root, [data-dials], .is-light, .is-dark {
    --primary: var(--brand-solid);
    --primary-hover: light-dark(oklab(from var(--brand-solid) calc(l - 0.07) a b), oklab(from var(--brand-solid) calc(l + 0.07) a b));
    --primary-light: oklab(from var(--brand-solid) calc(l + 0.11) a b);
    --primary-muted: color-mix(in oklab, var(--brand-solid) 15%, var(--surface));
    --primary-pale: var(--brand-soft);
    --on-primary: var(--brand-on-solid);
    --secondary-hover: light-dark(oklab(from var(--secondary-solid) calc(l - 0.07) a b), oklab(from var(--secondary-solid) calc(l + 0.07) a b));
    --secondary-light: oklab(from var(--secondary-solid) calc(l + 0.11) a b);
    --secondary-pale: var(--secondary-soft);
    --on-secondary: var(--secondary-on-solid);
    --tertiary-hover: light-dark(oklab(from var(--tertiary-solid) calc(l - 0.07) a b), oklab(from var(--tertiary-solid) calc(l + 0.07) a b));
    --tertiary-pale: var(--tertiary-soft);
    --on-tertiary: var(--tertiary-on-solid);
    --accent-dark: var(--primary-hover);
    --accent-pale: var(--brand-soft);
    --success-pale: var(--success-soft);
    --warning-pale: var(--warning-soft);
    --danger-pale: var(--danger-soft);
    --info-pale: var(--info-soft);
    --ink-strong: var(--text-strong);
    --ink: var(--text);
    --ink-mid: var(--text-muted);
    --ink-soft: var(--text-quiet);
    --bg: var(--surface);
    --on-bg: var(--text);
    --on-surface: var(--text);
    --step--2: var(--size--2);
    --step--1: var(--size--1);
    --step-0: var(--size-0);
    --step-1: var(--size-1);
    --step-2: var(--size-2);
    --step-3: var(--size-3);
    --step-4: var(--size-4);
    --step-5: var(--size-5);
    --step-6: var(--size-6);
    --step-7: var(--size-7);
    --step-8: var(--size-8);
    --border-thin: var(--border-width-s);
    --border-medium: var(--border-width-m);
    --border-thick: var(--border-width-l);

    /* The template's type ladder before Dials v0.3 (#436), FROZEN at its old
     * values, so a site layer written against it renders exactly as it did.
     * They do not follow Dials, and the template reads none of them: line
     * height is var(--leading), and weights and letter spacing are plain
     * values on each element. check-system.sh accepts these values only
     * exactly as written here. */
    --weight-400: 400;
    --weight-600: 600;
    --weight-700: 700;
    --leading-xs: 1.05;
    --leading-s: 1.18;
    --leading-m: 1.3;
    --leading-l: 1.5;
    --leading-xl: 1.6;
    --tracking-xs: -0.02em;
    --tracking-s: -0.01em;
    --tracking-m: 0;
    --tracking-l: 0.04em;
    --tracking-xl: 0.08em;
}
/* ═══ aliases:end (Old names) ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
 * RESET
 *
 * Josh Comeau's Custom CSS Reset (joshwcomeau.com/css/custom-css-reset/),
 * lightly adapted. Normalises browser defaults so the base layer below is
 * building on the same ground in every browser. Leave this alone; make
 * design decisions in the base layer and the tokens above it.
 * ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;   /* line height: the base layer's body rule, from --leading-body */
}

/* Media is block-level and never overflows its container. */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Form controls inherit typography rather than using browser chrome. */
:where(input, button, textarea, select) { font: inherit; }   /* zero specificity: "Form controls" below must win */

/* Long words and URLs wrap instead of forcing a horizontal scrollbar. */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* A new stacking context on the root, so app-level layers cannot escape. */
#root, #__next { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ELEMENT BASE LAYER
 *
 * Bare elements are styled here so a page is correct with no classes at
 * all. Without this, an unclassed <h2> falls back to the browser default
 * and whoever writes the page patches it with an inline style — which is
 * how a site ends up with a different heading treatment per page.
 *
 * Every heading has a matching .h1-.h6 class. Use the ELEMENT for document
 * structure (SEO, screen readers, outline) and the CLASS for appearance,
 * so an <h1> can look like an eyebrow without lying about the hierarchy:
 *
 *     <h1 class="h4">Still the page's real heading, just smaller</h1>
 *
 * Sites override these; they are a floor, not a straitjacket.
 * ═══════════════════════════════════════════════════════════════════════ */

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--size-0);
    font-weight: var(--weight-400);
    line-height: var(--leading-body);   /* a number, so it inherits as one; --leading is a length */
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

/* Headings ─────────────────────────────────────────────────────────────
 * Margins are top-heavy on purpose: a heading belongs to what follows it,
 * so the space above is larger than the space below. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: var(--space-l) 0 var(--space-s);
    font-family: var(--font-heading);
    font-weight: var(--weight-700);
    line-height: var(--leading-s);
    letter-spacing: var(--tracking-xs);
    color: var(--text-strong);
    text-wrap: balance;
}

:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) + * {
    margin-top: 0;
}

/* A heading opening its container needs no space above it. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
    margin-top: 0;
}

h1, .h1 { font-size: var(--size-5); }
h2, .h2 { font-size: var(--size-4); }
h3, .h3 { font-size: var(--size-3); }
h4, .h4 { font-size: var(--size-2); }
h5, .h5 { font-size: var(--size-1); line-height: var(--leading-m); }
/* A small heading at body size, sentence case — for panel and card titles
 * that sit below the .h5 step but should not become an uppercase label. */
.h6-plain {
    font-size: var(--size-0);
    line-height: var(--leading-m);
    letter-spacing: normal;
    text-transform: none;
}

h6, .h6 {
    font-size: var(--size-0);
    line-height: var(--leading-m);
    letter-spacing: var(--tracking-m);
    text-transform: uppercase;
}

/* A highlighted phrase inside a heading. One mechanism, not three. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) em {
    font-style: italic;
    color: var(--brand-on-soft);
}

/* Text ─────────────────────────────────────────────────────────────── */
p, ul, ol, dl, blockquote, figure, table, pre {
    margin: 0 0 var(--space-m);
}

/*
 * Line length is a container's job, not every paragraph's — capping each <p>
 * leaves text hugging the left of any column already sized for reading.
 * Use .measure (or set a width on the container) where prose needs it.
 */
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* Opening paragraph: larger and looser than body copy. */
.lede {
    max-width: 600px;
    font-size: var(--size-1);
    line-height: var(--leading-xl);
    color: var(--text-muted);
}

/* Small label above a heading. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-bottom: var(--space-s);
    font-size: var(--size--2);
    font-weight: var(--weight-600);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    color: var(--brand-on-soft);
}

/* The short rule that sets an eyebrow off from the heading below it. */
.eyebrow::before {
    content: '';
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--brand-solid);
    color: var(--brand-on-solid);
}

small, .text-small { font-size: var(--size--1); }

strong, b { font-weight: var(--weight-700); }

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

ul, ol { padding-left: var(--space-m); }

/*
 * List spacing applies to PROSE lists only. Navigation, button groups and
 * card grids are lists too, and flow margins on those knock flex/grid items
 * out of alignment (the site header) or balloon the spacing (the footer).
 *
 * Presence of a class is not the test — a footer nav is a nav whether or not
 * anyone put a class on it — so navigation context opts out explicitly.
 */
:where(ul, ol) > li { margin-bottom: var(--space-2xs); }
:where(ul, ol) > li:last-child { margin-bottom: 0; }

nav ul, nav ol,
header ul, header ol,
footer ul, footer ol,
menu {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

nav li, header li, footer li, menu li {
    margin-bottom: 0;
}

/* A list explicitly used for layout carries no bullets, indent or margin. */
:where(ul, ol)[class] {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

:where(ul, ol)[class] > li { margin-bottom: 0; }

blockquote {
    /* The quote bar is a quiet border in the group's colour: Dials' subtle
     * border pattern (tokens.md, "A subtle border in a group's colour"),
     * declared here rather than at :root so it follows an .is-* class on the
     * quote. --line itself is a strong 3:1 line since Dials v0.2.0; 30% of
     * it keeps the bar about as light as it was before (the pattern's
     * example is 40%: a step darker). Decoration: no contrast promised. */
    --quote-bar: color-mix(in oklab, var(--line) 30%, var(--border));
    padding-left: var(--space-m);
    border-left: var(--border-width-l) solid var(--quote-bar);
    color: var(--text-muted);
    font-style: italic;
}

hr {
    height: 0;
    margin: var(--space-l) 0;
    border: 0;
    border-top: var(--border-width-s) solid var(--border);
}

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Media ────────────────────────────────────────────────────────────────
 * Images are rounded by default. The square-photo bug on Wellbrook was an
 * <img> with no radius sitting beside cards that had one. */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-radius: var(--radius-m);
    background: var(--surface-raised);
}

/*
 * Logos, icons and inline SVG are not photographs — a background plate and a
 * radius are wrong for them, and show up as a white box on a dark footer.
 */
img[class*="logo"], img[class*="icon"], .logo img, svg {
    border-radius: 0;
    background: none;
}

/* Opt out where a radius is wrong: full-bleed art, decorative crops. */
img.is-flush, .is-flush img { border-radius: 0; background: none; }

figure { margin-inline: 0; }

figcaption {
    margin-top: var(--space-2xs);
    font-size: var(--size--1);
    color: var(--text-quiet);
}

/* Tables ───────────────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th, td {
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: var(--border-width-s) solid var(--border);
    vertical-align: top;
}

th {
    font-weight: var(--weight-600);
    color: var(--text-strong);
}

tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════
 * A text field's look, and every focus ring on the site, are set ONCE,
 * here: by the --field-* and --focus-ring* tokens and a few base rules.
 * Every text-like control on the site (contact, search, careers, booking,
 * anything mediflare.js or Connect writes) inherits it, so they match by
 * construction.
 *
 * - This section is copied VERBATIM from _template and never edited in a
 *   site: check-system.sh fails the site if its copy differs by a character.
 *   A site differs only in TOKEN VALUES, set in the site layer's own :root,
 *   below this section (a later :root wins over the defaults here).
 * - Never restyle a control inside a component. A component rule may place
 *   a field (grid, margin, width) but never sets its border, radius,
 *   background or height -- check-system.sh fails the site if one does.
 * - Fields and buttons share ONE corner, --control-radius: set it in the
 *   site layer's :root and both follow. Never set --field-radius
 *   (check-system.sh fails it), except to 0px in underline mode below;
 *   pill buttons mean pill fields.
 * - The base rules are at zero specificity (:where), so any token change
 *   reaches every field and nothing here outranks a deliberate override.
 * - ONE focus ring per site, on links, buttons and fields alike: an outline
 *   in --focus-ring at --focus-ring-w. No other rule sets a focus outline,
 *   colour or box-shadow (check-system.sh fails one); outline-offset may be
 *   adjusted where a ring would be clipped.
 * - Underline-only fields: set --field-border-w: 0,
 *   --field-border-bottom: var(--border-width-s) solid <colour> and
 *   --field-radius: 0px (an underline has no corners to share; a rounded
 *   one curves at its ends, and buttons keep --control-radius); optionally
 *   --field-focus-border-bottom: var(--focus-ring-w) solid var(--focus-ring)
 *   so the underline thickens with the ring. No extra rules. Underline
 *   mode is the only time a site sets --field-radius, and check-system.sh
 *   then requires the 0px.
 * - Colours follow the band. The colour tokens are declared on the page
 *   AND on every .is-light/.is-dark band and [data-dials] scope, as Dials
 *   declares its own: a browser on Dials' fallback (no relative colour)
 *   works a token out once per scope, so declared on :root alone a field
 *   in a dark band kept the light page's border and ring. A site that
 *   changes a field COLOUR sets it on the same four selectors, after this
 *   section (:root, [data-dials], .is-light, .is-dark { --field-...: ... }),
 *   or a band keeps the default. Sizes are set on :root only.
 * - A panel on a ground that is not a Dials surface (a brand fill) re-sets
 *   the leaf colour tokens on the container, never the rules:
 *     .brand-panel {
 *         --focus-ring: var(--brand-on-solid);
 *         --field-border: var(--brand-on-solid);
 *     }
 *   --focus-ring must reach >= 3:1 against every ground it is drawn on.
 * The guard finds this section by the begin/end markers; keep both.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
    --field-h: var(--target-min);                 /* the single-line height: exact, never below the 44px target */
    --field-textarea-h: calc(var(--field-h) * 3); /* the textarea's minimum height */
    --field-pad-block: var(--space-2xs);          /* textarea only; a one-line field centres its text in --field-h */
    --field-pad-inline: var(--space-xs);
    --field-font-size: max(var(--size-0), 1rem);  /* never below 16px, or iOS zooms the page on focus */
    --field-leading: var(--leading);              /* Dials' leading, worked out at the field's own size */
    --field-weight: 400;                          /* one weight wherever the field sits */
    --field-label-weight: 600;                    /* the label's weight: the site's emphasis weight */
    --field-radius: var(--control-radius);        /* = the .btn radius, by construction; never set it */
    --field-textarea-radius: min(var(--field-radius), var(--radius-l));   /* a pill textarea is a capsule; cap it */
    --field-border-w: var(--border-width-s);
    /* Unset by default, so they follow --field-border-w/--field-border:
     * --field-border-bottom          the resting bottom edge (underline mode)
     * --field-focus-border-bottom    the bottom edge while focused
     * --field-focus-outline          the field's ring; leave it to the default */
    --focus-ring-w: var(--border-width-m);        /* >= --field-border-w, so the ring covers the border */
}

/* The colours, on the bands too (see above). */
:root, [data-dials], .is-light, .is-dark {
    --field-bg: var(--surface-raised);            /* fields sit on the raised surface, as cards do */
    --field-ink: var(--text);
    --field-border: var(--border-strong);         /* Dials' control border: 3:1 on every surface */
    --field-border-hover: var(--text-quiet);
    --field-placeholder: var(--text-quiet);
    --focus-ring: var(--focus);                   /* Dials' focus ring: >= 3:1 on every surface, light and dark */
}

/* THE focus ring: every interactive element, always. Fields refine the
 * offset and radius below; nothing else sets a focus outline. */
:focus-visible {
    outline: var(--focus-ring-w) solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

label {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: var(--size--1);
    font-weight: var(--field-label-weight);
    line-height: var(--leading);
    color: var(--text-strong);
}

/* THE base rule. Every text-like control: text, email, tel, search, number,
 * date, url, password, select and textarea -- not checkboxes, radios,
 * ranges, files or button-type inputs. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea) {
    --_field-radius: var(--field-radius);
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: var(--field-h);
    min-height: var(--field-h);
    padding: 0 var(--field-pad-inline);
    font: inherit;
    font-size: var(--field-font-size);
    font-weight: var(--field-weight);
    line-height: var(--field-leading);
    color: var(--field-ink);
    background-color: var(--field-bg);
    border: var(--field-border-w) solid var(--field-border);
    border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
    border-radius: var(--_field-radius);
    box-shadow: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}

:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):hover {
    border-color: var(--field-border-hover);
}

/* One edge on focus. The offset pulls the ring in by the border's width, so
 * it is drawn ON the border (covering it) rather than outside it; the border
 * and shadow are held at rest so nothing draws a second edge. Specificity
 * 0,1,0 and later than the global :focus-visible, so it wins over that one
 * (whose offset and radius suit links, not fields). In underline mode the
 * bottom edge may take --field-focus-border-bottom as well. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus {
    border-color: var(--field-border);
    border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
    box-shadow: none;
    outline: none;
}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus-visible {
    outline: var(--field-focus-outline, var(--focus-ring-w) solid var(--focus-ring));
    outline-offset: calc(var(--field-border-w) * -1);
    border-bottom: var(--field-focus-border-bottom, var(--field-border-bottom, var(--field-border-w) solid var(--field-border)));
    border-radius: var(--_field-radius);
}

:where(textarea) {
    --_field-radius: var(--field-textarea-radius);
    height: auto;
    min-height: var(--field-textarea-h);
    padding-block: var(--field-pad-block);
    resize: vertical;
}

/* The chevron is one conic-gradient wedge in --field-ink: tokens only, no
 * image, so it recolours with the palette and the scheme. (Two half-square
 * linear gradients leave a seam where they meet.) */
:where(select) {
    padding-inline-end: calc(var(--field-pad-inline) * 2 + var(--space-xs));
    background-image: conic-gradient(from -45deg at 50% 100%, var(--field-ink) 90deg, transparent 0);
    background-position: calc(100% - var(--field-pad-inline)) 50%;
    background-size: calc(var(--space-3xs) * 2.5) calc(var(--space-3xs) * 1.25);
    background-repeat: no-repeat;
    cursor: pointer;
}
:where(select[multiple], select[size]) { height: auto; padding-block: var(--field-pad-block); padding-inline-end: var(--field-pad-inline); background-image: none; }

:where(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; }

/* The browser's own clear (x) in a search box, redrawn as a mask so it takes
 * --field-ink instead of the browser's grey. */
:where(input[type=search])::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 1em;
    block-size: 1em;
    cursor: pointer;
    background-color: var(--field-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-solid); }

fieldset { margin: 0 0 var(--space-m); padding: 0; border: 0; }

/* ═══ form-controls:end (Form controls & focus) ═════════════════════════ */

/* Wellbrook's field look: the contact form's fields, which every other field
 * (search included) now matches. Set here, after the section's defaults, so
 * these win; never restyle a control in a component. */
:root {
    --field-h: var(--target-min);                 /* 44px: the contact fields' 46-48px normalised to the search row's button */
    --field-pad-block: 0.75rem;
    --field-pad-inline: 1rem;
    --control-radius: calc(var(--radius-base) * 0.667px);   /* buttons AND fields: the Book button's 8px corner, two thirds of a card's, so it follows --radius-base */
    --field-border-w: 1.5px;
    /* the field colours are the section's, with one of Wellbrook's own below */
    --focus-ring-w: var(--border-width-m);         /* 2px */

    /* Wellbrook's own shades. Each is derived from a Dials token, so it
     * follows the dials and the colour scheme; none is typed (#427). */
    --header-glass: color-mix(in oklab, var(--surface) 92%, transparent);        /* the frosted plate behind the fixed header */
    --hero-glow: color-mix(in oklab, var(--brand-solid) 8%, transparent);        /* the radial glow in the home hero */
    --hero-rule: color-mix(in oklab, var(--brand-solid) 15%, transparent);       /* the rule above the hero stats */
    /* Washes and a band: Dials' gradient patterns (tokens.md, "Gradients are
     * patterns"), blended in OKLab. A wash runs between two soft tints, so
     * body text and headings keep 4.5:1 anywhere on it; never put an
     * --*-on-soft on one. The band is decoration only: no text on it. */
    --hero-wash: linear-gradient(in oklab 135deg, var(--brand-soft), var(--info-soft));          /* the home hero: the brand tint to the info tint */
    --page-hero-wash: linear-gradient(in oklab 135deg, var(--brand-soft), color-mix(in oklab, var(--brand-soft), var(--info-soft)));   /* inner-page heroes: half as far */
    --card-band: linear-gradient(in oklab 90deg, var(--brand-solid), color-mix(in oklab, var(--brand-solid) 40%, var(--surface)));   /* the service card's top rule: the fill fading to a pale teal */
    --photo-plate: color-mix(in oklab, var(--text-strong) 10%, transparent);     /* behind a photo on a dark band while it loads */
    --photo-plate-soft: color-mix(in oklab, var(--text-strong) 8%, transparent);
    --on-fill-copy: color-mix(in oklab, var(--brand-on-solid) 90%, transparent); /* secondary text on the teal strip */
    --on-fill-divider: color-mix(in oklab, var(--brand-on-solid) 18%, transparent); /* between the strip's items */
    --on-fill-disc: color-mix(in oklab, var(--brand-on-solid) 15%, transparent);    /* the strip's icon discs */
}

/* Wellbrook's one field colour of its own: the contact fields never changed
 * on hover. Every other field and ring colour is the section's (fields on the
 * raised surface, the --focus ring). Declared on the same four selectors as
 * the section's colours, so a band keeps it in Dials' fallback too. */
:root, [data-dials], .is-light, .is-dark {
    --field-border-hover: var(--border-strong);
}

/* The teal strip: the ring would vanish on its own colour. */
.strip { --focus-ring: var(--brand-on-solid); }

/* Buttons ──────────────────────────────────────────────────────────────
 * .btn is the base; variants change colour, sizes change scale. Applies to
 * <button>, <a class="btn"> and inputs alike. */

/* Cards ────────────────────────────────────────────────────────────────
 * Deliberately minimal — a surface with a radius. Sites compose their own
 * card variants on top; modelling every one here would be guesswork. */
.card {
    padding: var(--space-m);
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-m);
}

/* Utility ──────────────────────────────────────────────────────────── */
.visually-hidden, .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * The base layer gives bare headings space above them, which is right for
 * flowing prose. These classes sit inside laid-out sections that already
 * control their own spacing, so they opt out.
 */
.hero-title,
.section-heading,
.page-hero h1 {
    margin-top: 0;
}

html { scroll-behavior: smooth; }

body { overflow-x: hidden; }   /* the rest of body is the base layer's */

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--neutral-solid);
    color: var(--neutral-on-solid);
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--radius-m);
    z-index: var(--layer-overlay);
    font-weight: var(--weight-600);
}

.skip-link:focus {
    top: 1rem;
}

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

/* ─── REVEAL ANIMATIONS ──────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.72s cubic-bezier(0.22,1,0.36,1),
                transform 0.72s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.32s; }
.reveal-delay-4 { transition-delay: 0.44s; }

/* ─── HEADER ─────────────────────────────────────────────── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-nav);
    border-bottom: var(--border-width-s) solid var(--border);
    transition: box-shadow 0.3s;
}

.header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--header-glass);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    z-index: var(--layer-behind);
}

.header.scrolled { box-shadow: var(--shadow-s); }

.header-inner {   /* also .u-container in the markup */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 36px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.nav {
    --nav-gap: var(--space-m);   /* the bar's gap, a step per band below; the switcher reads it */
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    list-style: none;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    transition: color 0.2s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--brand-solid);
    color: var(--brand-on-solid);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}

.nav-links a:hover,
.nav-links a.active { color: var(--brand-on-soft); }

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* ─── NAV DROPDOWN ──────────────────────────────────────── */
.nav-dropdown {
    position: relative;
    cursor: pointer;
}

.nav-dropdown > button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-muted);
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    padding: 0;
    transition: color 0.2s;
    position: relative;
}

.nav-dropdown > button::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--brand-solid);
    color: var(--brand-on-solid);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}

.nav-dropdown > button:hover,
.nav-dropdown > button[aria-expanded="true"] {
    color: var(--brand-on-soft);
}

.nav-dropdown > button:hover::after,
.nav-dropdown > button[aria-expanded="true"]::after {
    transform: scaleX(1);
}

.nav-dropdown > button svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.nav-dropdown > button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    min-width: 200px;
    padding: var(--space-2xs);
    z-index: var(--layer-overlay);
    list-style: none;
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--border);
}

.nav-dropdown-menu::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--surface-raised);
}

.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    cursor: pointer;
}

.nav-dropdown-menu a::after {
    display: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
}

.nav-buttons {
    display: flex;
    gap: var(--space-xs);
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--target-min);   /* the 44px tap target, every size and variant */
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--control-radius);
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    border: none;
    font-family: inherit;
}

.btn-outline {
    background: transparent;
    color: var(--brand-on-soft);
    border: 1.5px solid var(--brand-solid);
}

.btn-outline:hover {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
}

/* A flat fill (#427): the old gradient ran to a lighter teal that held the
 * white label at only 2.96:1. Hover and pressed mix the fill away from its
 * label (Dials' --mix-*), so the label keeps its contrast in both schemes. */
.btn-primary {
    background: var(--brand-solid);
    color: var(--brand-on-solid);
    box-shadow: 0 2px 4px color-mix(in oklab, var(--brand-solid) 20%, transparent);
}

.btn-primary:hover {
    background: color-mix(in oklch, var(--brand-solid), var(--mix-hover));
    color: var(--brand-on-solid);   /* a:hover (0,1,1) otherwise turns the label the link colour, teal on teal */
    box-shadow: 0 4px 8px color-mix(in oklab, var(--brand-solid) 30%, transparent);
    transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-large {
    padding: var(--space-xs) var(--space-m);
    font-size: var(--size-0);
}

/*
 * ON THE TEAL STRIP
 *
 * A dark band is class="is-dark" (.section-dark, the footer): Dials works
 * every token out again in the dark scheme, so nothing here is needed for
 * it. The teal strip is a brand FILL instead, so its text is the fill's own
 * --brand-on-solid, and the two buttons invert on it: the solid one goes to
 * the raised surface, the outline picks up a translucent edge in the label
 * colour. Put .on-dark on the button or any ancestor.
 */
.on-dark,
.strip {
    color: var(--brand-on-solid);
}

.on-dark :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.strip :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--brand-on-solid);
}

.on-dark .btn-primary,
.btn-primary.on-dark {
    background: var(--surface-raised);
    color: var(--brand-on-soft);
    box-shadow: none;
}

.on-dark .btn-primary:hover,
.btn-primary.on-dark:hover {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
    transform: translateY(-1px);
}

.on-dark .btn-outline,
.btn-outline.on-dark {
    color: var(--brand-on-solid);
    border-color: color-mix(in oklab, var(--brand-on-solid) 40%, transparent);
}

.on-dark .btn-outline:hover,
.btn-outline.on-dark:hover {
    background: color-mix(in oklab, var(--brand-on-solid) 12%, transparent);
    color: var(--brand-on-solid);
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--brand-soft), color-mix(in oklab, var(--brand-soft), var(--info-soft)), var(--info-soft));   /* for browsers without gradient interpolation, which drop the next line */
    background: var(--hero-wash);
    min-height: calc(100vh - var(--header-h));
    padding-top: var(--header-h);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, var(--hero-glow) 0%, transparent 70%);
    pointer-events: none;
}

.hero-inner {   /* also .u-container in the markup */
    padding-block: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);   /* wider and the 52px title wraps to three lines at 1440 */
    align-items: center;
    position: relative;
}

.hero-content {
    max-width: 540px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    background: var(--surface-raised);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-pill);
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--brand-on-soft);
    box-shadow: var(--shadow-s);
    margin-bottom: var(--space-m);
}

.hero-badge svg {
    width: 16px;
    height: 16px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: var(--weight-700);
    color: var(--text-strong);
    line-height: var(--leading-s);
    margin-bottom: var(--space-m);
}

.hero-title span {
    color: var(--brand-on-soft);
}

.hero-description {
    font-size: var(--size-1);
    color: var(--text-quiet);
    margin-bottom: var(--space-l);
    line-height: var(--leading-xl);
}

.hero-buttons {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: var(--space-l);
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: var(--border-width-s) solid var(--hero-rule);
}

.stat { text-align: left; }

.stat-value {
    font-size: var(--size-2);
    font-weight: var(--weight-700);
    color: var(--text-strong);
}

.stat-label {
    font-size: var(--size--1);
    color: var(--text-quiet);
}

/* Hero Visual / Card */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: stretch;
}

.hero-img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
    object-fit: cover;
}

/* ─── SECTION SHARED ─────────────────────────────────────── */
.section { padding: var(--space-3xl) 0; }
.section-alt { background: var(--brand-soft); }

/* The template's container. Wellbrook's measure and gutter are set as its
 * tokens in the site layer's :root (--grid-max-width, --grid-gutter). */
.u-container {
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--grid-gutter);
}

.section-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: var(--weight-700);
    line-height: var(--leading-s);
    letter-spacing: var(--tracking-xs);
    color: var(--text-strong);
    max-width: 520px;
}

.section-heading em,
.page-hero h1 em,
.hero-title em {
    font-style: italic;
    color: var(--brand-on-soft);
}

/* ─── SERVICES GRID ──────────────────────────────────────── */
.services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    gap: var(--space-l);
    flex-wrap: wrap;
}

.services-intro {
    font-size: var(--size-0);
    line-height: var(--leading-xl);
    color: var(--text-muted);
    max-width: 360px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
}

.service-card {
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-l) var(--space-l) var(--space-l);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
}

.section-alt .service-card {
    background: var(--surface-raised);
    border-color: transparent;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-solid), color-mix(in oklab, var(--brand-solid) 40%, var(--surface)));   /* for browsers without gradient interpolation, which drop the next line */
    background: var(--card-band);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-m);
}

.service-card:hover::before { transform: scaleX(1); }

.service-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-s);
    background: var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-m);
}

.service-icon svg {
    color: var(--brand-on-soft);
}

.service-title {
    font-family: var(--font-body);
    font-size: var(--size-1);
    font-weight: var(--weight-600);
    color: var(--text-strong);
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.service-body {
    font-size: var(--size--1);
    line-height: var(--leading-xl);
    color: var(--text-muted);
    margin-bottom: var(--space-m);
}

.service-link {
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--brand-on-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    transition: gap 0.2s;
}

.service-card:hover .service-link { gap: var(--space-2xs); }

.section-dark .section-heading { max-width: 100%; }

/* ─── ABOUT SECTION ──────────────────────────────────────── */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.about-visual { position: relative; }

.about-img-main {
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--photo-plate);
}

.about-img-float {
    position: absolute;
    bottom: -28px;
    right: -28px;
    width: 52%;
    border-radius: var(--radius-m);
    overflow: hidden;
    border: var(--border-width-l) solid var(--surface);   /* the band's own ground, so the float reads as cut out of it */
    box-shadow: var(--shadow-l);
    aspect-ratio: 4/3;
    background: var(--photo-plate-soft);
}

.about-body {
    font-size: var(--size-0);
    line-height: var(--leading-xl);
    color: var(--text);
    margin: var(--space-m) 0 var(--space-l);
}

.about-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.about-point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    font-size: var(--size--1);
    color: var(--text-strong);
}

.about-point svg {
    flex-shrink: 0;
    margin-top: calc(var(--space-3xs) / 2);
    color: var(--brand-on-soft);
}

/* ─── HIGHLIGHT STRIP ────────────────────────────────────── */
.strip {
    background: var(--brand-solid);
    color: var(--brand-on-solid);
    padding: var(--space-xl) 0;
}

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

.strip-item {
    padding: var(--space-m) var(--space-l);
    display: flex;
    align-items: center;
    gap: var(--space-s);
    border-right: var(--border-width-s) solid var(--on-fill-divider);
}

.strip-item:last-child { border-right: none; }

.strip-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-round);
    background: var(--on-fill-disc);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.strip-text .t1 {
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--brand-on-solid);
}

.strip-text .t2 {
    font-size: var(--size--1);
    color: var(--on-fill-copy);
    margin-top: calc(var(--space-3xs) / 2);
}

/* ─── CONTACT SECTION ────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-map {
    border-radius: var(--radius-l);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-m);
}

.info-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.info-block {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
}

.info-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-s);
    background: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-s);
}

.section-alt .info-icon { background: var(--surface-raised); }

.info-icon svg { color: var(--brand-on-soft); }

.info-text .label {
    font-size: var(--size--2);
    font-weight: var(--weight-600);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    color: var(--text-quiet);
    margin-bottom: var(--space-3xs);
}

.info-text .val {
    font-size: var(--size--1);
    color: var(--text);
    line-height: var(--leading-l);
}

.info-text .val a {
    color: var(--text);
    transition: color 0.2s;
}

.info-text .val a:hover { color: var(--link); }

.contact-cta {
    margin-top: var(--space-l);
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* ─── CONTACT FORM ───────────────────────────────────────── */
.form-section {
    padding: var(--space-3xl) 0;
}

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

.form-group {
    margin-bottom: var(--space-s);
}

.form-group label {
    display: block;
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--text);
    margin-bottom: var(--space-3xs);
}

.form-group label .required {
    color: var(--danger-on-soft);
    margin-left: calc(var(--space-3xs) / 2);
}

[data-mf-feedback] {
    /* A quiet border in the box's colour: Dials' subtle border pattern
     * (tokens.md, "A subtle border in a group's colour"), declared on the
     * component, one per status below. --*-line itself is a strong 3:1
     * line since Dials v0.2.0. Decoration: no contrast promised. */
    border: var(--border-width-s) solid var(--feedback-border);
    margin-top: var(--space-s);
    padding: var(--space-s) var(--space-s);
    border-radius: var(--radius-m);
    font-size: var(--size-0);
    line-height: var(--leading-l);
}

[data-mf-feedback][data-status="success"] {
    --feedback-border: color-mix(in oklab, var(--success-line) 40%, var(--border));
    background: var(--success-soft);
    color: var(--success-on-soft);
}

[data-mf-feedback][data-status="error"] {
    --feedback-border: color-mix(in oklab, var(--danger-line) 40%, var(--border));
    background: var(--danger-soft);
    color: var(--danger-on-soft);
}

/* ─── LEGAL PAGES ───────────────────────────────────────── */
.legal-content h2 {
    font-size: var(--size-1);
    font-weight: var(--weight-700);
    color: var(--text-strong);
    margin: var(--space-l) 0 var(--space-xs);
}

.legal-content h3 {
    font-size: var(--size-1);
    font-weight: var(--weight-600);
    color: var(--text-strong);
    margin: var(--space-l) 0 var(--space-2xs);
}

.legal-content p {
    color: var(--text-muted);
    line-height: var(--leading-xl);
    margin-bottom: var(--space-s);
}

.legal-content ul {
    list-style: disc;
    padding-left: var(--space-m);
    margin-bottom: var(--space-s);
}

.legal-content li {
    color: var(--text-muted);
    line-height: var(--leading-xl);
    margin-bottom: var(--space-3xs);
}

.legal-content a {
    color: var(--brand-on-soft);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--link) 30%, transparent);
    text-underline-offset: 2px;
}

.legal-content a:hover {
    text-decoration-color: var(--link);
}

 ───────────────────────────────────────── */
.hours-table {
    width: 100%;
    border-collapse: collapse;
}

.hours-table td {
    padding: var(--space-3xs) 0;
    font-size: var(--size--1);
    line-height: var(--leading-l);
    vertical-align: top;
}

.hours-table td:first-child {
    font-weight: var(--weight-600);
    color: var(--text);
    padding-right: var(--space-m);
    white-space: nowrap;
}

.hours-table td:last-child {
    color: var(--text-muted);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
    padding: var(--space-xl) 0 var(--space-l);
}

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

.footer-brand .logo-img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-brand p {
    font-size: var(--size--1);
    line-height: var(--leading-xl);
    color: var(--text-muted);
    margin-top: var(--space-s);
}

.footer-col h4 {
    font-size: var(--size--2);
    font-weight: var(--weight-600);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    color: var(--brand-on-soft);   /* the band's own teal: Dials holds it at 4.5:1 on the dark ground */
    margin-bottom: var(--space-s);
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.footer-col ul li {
    font-size: var(--size--1);
    line-height: var(--leading-m);
}

.footer-col ul li a {
    color: var(--text-muted);
    transition: color 0.2s;
}

.footer-col ul li a:hover { color: var(--text-strong); }

.footer-col p {
    font-size: var(--size--1);
    line-height: var(--leading-xl);
    color: var(--text-muted);
}

.footer-col p a {
    transition: color 0.2s;
}

.footer-col p a:hover { color: var(--text-strong); }

.footer-bottom {
    border-top: var(--border-width-s) solid var(--border);
    padding-top: var(--space-m);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
}

.footer-bottom p {
    font-size: var(--size--1);
    color: var(--text-quiet);
}

.footer-bottom a {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.footer-bottom a:hover {
    color: var(--text-muted);
    text-decoration-color: color-mix(in oklab, currentColor 60%, transparent);
}

/* ─── PAGE HERO (inner pages) ────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, var(--brand-soft), color-mix(in oklab, var(--brand-soft), var(--info-soft)));   /* for browsers without gradient interpolation, which drop the next line */
    background: var(--page-hero-wash);
    padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-2xl);
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-size: var(--size-5);
    font-weight: var(--weight-700);
    line-height: var(--leading-s);
    letter-spacing: var(--tracking-xs);
    color: var(--text-strong);
    margin-bottom: var(--space-s);
}

/* ─── TEAM GRID ──────────────────────────────────────────── */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-m);
}

.team-card {
    flex: 0 1 calc(33.333% - 1rem);
    min-width: 260px;
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}

.team-avatar {
    width: 80px;
    height: 80px;
    background: var(--brand-solid);
    color: var(--brand-on-solid);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-s);
    position: relative;
    overflow: hidden;
}

.team-avatar svg {
    width: 36px;
    height: 36px;
    color: var(--brand-on-solid);
}

.team-card h3 {
    font-size: var(--size-1);
    font-weight: var(--weight-600);
    color: var(--text-strong);
    margin-bottom: var(--space-3xs);
}

.team-card .role {
    font-size: var(--size--1);
    color: var(--brand-on-soft);
    font-weight: var(--weight-600);
    margin-bottom: var(--space-xs);
}

.team-card .bio {
    font-size: var(--size--1);
    color: var(--text-muted);
    line-height: var(--leading-l);
}

/* ─── DOCTORS PAGE ──────────────────────────────────────── */
.doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-l);
}

.doctor-card {
    background: var(--surface-raised);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-l) var(--space-l) var(--space-l);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
}

.doctor-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}

.doctor-card .doctor-avatar {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-round);
    background: var(--brand-solid);
    color: var(--brand-on-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-m);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-s);
}

.doctor-card .doctor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-round);
    position: relative;
    z-index: var(--layer-base);
}

.doctor-card .doctor-avatar svg {
    width: 48px;
    height: 48px;
    color: var(--brand-on-solid);
    position: absolute;
}

.doctor-card h3 {
    font-size: var(--size-1);
    font-weight: var(--weight-700);
    color: var(--text-strong);
    margin-bottom: var(--space-3xs);
}

.doctor-qualifications {
    font-size: var(--size--1);
    color: var(--text-quiet);
    font-weight: var(--weight-600);
    letter-spacing: var(--tracking-l);
    margin-bottom: var(--space-s);
}

.doctor-card .bio {
    font-size: var(--size--1);
    color: var(--text-muted);
    line-height: var(--leading-xl);
    margin-bottom: var(--space-s);
}

.doctor-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-m);
    padding-top: var(--space-s);
    border-top: var(--border-width-s) solid var(--border);
}

.doctor-meta-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2xs);
    font-size: var(--size--1);
    color: var(--text-muted);
    line-height: var(--leading-l);
    text-align: center;
}

.doctor-meta-item svg {
    color: var(--brand-on-soft);
    flex-shrink: 0;
    margin-top: 1px;
}

.doctor-book-btn {
    margin-top: auto;
    font-size: var(--size--1);
    padding: var(--space-2xs) var(--space-s);
}

.doctor-days {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    font-size: var(--size--2);
    color: var(--text-quiet);
    margin-top: var(--space-xs);
}

.doctor-days svg {
    color: var(--text-quiet);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .doctors-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── MOBILE MENU ────────────────────────────────────────── */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2xs);
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--surface-raised);
    border-bottom: var(--border-width-s) solid var(--border);
    box-shadow: var(--shadow-m);
    z-index: var(--layer-nav);
    padding: var(--space-s) var(--space-m) var(--space-m);
}

.mobile-menu.open { display: block; }

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin-bottom: var(--space-s);
}

.mobile-menu ul a {
    display: block;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--size-0);
    font-weight: var(--weight-600);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.mobile-menu ul a:hover,
.mobile-menu ul a.active {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
}

.mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--size-0);
    font-weight: var(--weight-600);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.mobile-submenu-toggle:hover {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
}

.mobile-submenu-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.mobile-submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mobile-submenu-toggle[aria-expanded="true"] {
    color: var(--brand-on-soft);
}

.mobile-submenu {
    display: none;
    list-style: none;
    padding-left: var(--space-s);
}

.mobile-submenu.open {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.mobile-submenu a {
    display: block;
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.mobile-submenu a:hover,
.mobile-submenu a.active {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
}

.mobile-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.mobile-menu-buttons .btn {
    justify-content: center;
    width: 100%;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }

    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
        text-align: center;
    }

    .hero-content {
        max-width: 600px;
        margin: 0 auto;
        order: -1;
    }

    .hero-img {
        min-height: 0;
        max-height: 320px;
        border-radius: var(--radius-m);
    }

    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }

    .about-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .about-img-float { right: 0; }
    .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .form-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .strip-grid { grid-template-columns: repeat(2, 1fr); }
    .strip-item:nth-child(2) { border-right: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
}

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

    .hero-stats {
        flex-direction: column;
        gap: var(--space-s);
        align-items: center;
    }

    .stat { text-align: center; }

    .services-grid { grid-template-columns: 1fr; }
    .strip-grid { grid-template-columns: 1fr; }
    .strip-item {
        border-right: none;
        border-bottom: var(--border-width-s) solid var(--on-fill-divider);
    }
    .strip-item:last-child { border-bottom: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .about-img-float { display: none; }
    .page-hero { padding: calc(var(--header-h) + var(--space-m)) 0 var(--space-xl); }
    .team-card { flex: 0 0 100%; }
}

/* ─── FOCUS STYLES ──────────────────────────────────────── */
/* The card lifts with a focused link inside it, as on hover; the ring itself
 * is the global one (Form controls & focus). */
.service-card:focus-within,
a.service-card:focus {
    transform: translateY(-6px);
}

.footer-col ul li a,
.footer-col p a,
.info-text .val a {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    text-underline-offset: 2px;
}

.info-text .val a {
    text-decoration-color: var(--border);
}

.info-text .val a:hover {
    text-decoration-color: var(--link);
}

.footer-col ul li a:hover,
.footer-col p a:hover {
    text-decoration-color: currentColor;
}

/* ── 404 ──────────────────────────────────────────────────────────────
 * Served for any unmatched path, so it stands alone: say what happened, then
 * offer the way back rather than leaving a dead end.
 *
 * Deliberately written against fallbacks rather than this site's own token
 * names - every site in the fleet has a different vocabulary, and a 404 that
 * silently loses its layout because one variable is spelt differently is
 * worse than one that is slightly plainer. */
.notfound {
    padding-block: var(--space-3xl-4xl) var(--space-2xl-3xl);
    text-align: center;
}
.notfound__inner { max-width: 46rem; margin-inline: auto; }

/* Decorative, aria-hidden in the markup - the <h1> carries the meaning. Sized
 * large but kept at a legible contrast: a very pale numeral fails WCAG even
 * when it is ornamental. */
.notfound__code {
    font-size: calc(var(--size-6) * 1.75);   /* about 86px on a phone, 120px on a desktop: a Dials size, not a fourth bespoke clamp */
    font-weight: 700;
    line-height: var(--leading-numeral);
    margin: 0 0 var(--space-s-l);
    opacity: 0.55;
}
.notfound h1 { margin-top: 0; }
.notfound__lede { font-size: 1.125rem; line-height: var(--leading-l); margin-inline: auto; max-width: 40rem; }

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: center;
    margin-top: var(--space-l);
}

.notfound__links {
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: 1px solid currentColor;
    /* The rule is a hairline of the surrounding ink rather than a named border
     * token, so it works whatever the site's palette is. */
    border-color: color-mix(in oklab, currentColor 22%, transparent);
}
.notfound__links-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-s);
}
.notfound__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-m);
    justify-content: center;
}
.notfound__links a {
    display: inline-block;
    /* WCAG 2.2 target size. */
    min-height: 24px;
    line-height: var(--leading-target);
    font-weight: 600;
}

/* Heading-level preservation (SEO outline fix). These headings changed tag level so the page
   outline has no skipped levels; each class re-applies the exact declarations the old tag had,
   so the rendering is unchanged. Repeated class = specificity above every element-based rule. */
.hl-4a.hl-4a.hl-4a.hl-4a{box-sizing:border-box;color:var(--brand-on-soft);font-family:var(--font-heading);font-size:var(--size--2);font-weight:var(--weight-600);letter-spacing:var(--tracking-xl);line-height:var(--leading-s);margin-bottom:var(--space-s);margin-left:0;margin-right:0;margin-top:0px;overflow-wrap:break-word;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-transform:uppercase;text-wrap-mode:initial;text-wrap-style:balance}
.hl-3a.hl-3a.hl-3a.hl-3a{box-sizing:border-box;color:var(--text-strong);font-family:var(--font-heading);font-size:var(--size-1);font-weight:var(--weight-700);letter-spacing:var(--tracking-xs);line-height:var(--leading-s);margin-bottom:var(--space-3xs);margin-left:0;margin-right:0;margin-top:var(--space-l);overflow-wrap:break-word;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-wrap-mode:initial;text-wrap-style:balance}

/* ─── SITE SEARCH ────────────────────────────────────────── */
/*
 * One placement at every width: a trigger (data-mf-search-open) opens the
 * overlay mediflare.js builds (.mf-search-overlay), styled here with this
 * site's tokens. The overlay is a centred card over a dimmed page above
 * 640px, and full screen at 640px and below. The same element at every
 * width; only these rules change.
 *
 * Exactly one trigger shows at any width:
 *   - above 640px, .search-trigger in .nav-buttons, a button styled as the
 *     search field (magnifier + "Search…"), hidden with .nav-buttons;
 *   - at 640px and below, .header-search-open, an icon beside the hamburger.
 *     Never inside the mobile menu: search hidden behind the hamburger is
 *     search most patients never find.
 * The first trigger in the page carries data-label/data-placeholder, which
 * the overlay's box takes from it.
 */

/* The header row is tight in two bands: just above 640px (logo, trigger, two
 * buttons, hamburger) and just above 1024px (where the six nav links come
 * back). There the trigger shortens to magnifier + "Search" and the gaps close
 * up a step; past that only the logo gives way, shrinking proportionally
 * (never below a step from the nav), so no nav label and no button wraps. */
.header-inner { column-gap: var(--space-xs); }

.header .logo {
    flex: 0 1 auto;
    min-inline-size: 0;
}

.header .logo-img { max-inline-size: 100%; }

.header .nav { flex: none; }

.search-trigger {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2xs);
    inline-size: 7.5rem;   /* 10rem until the colour scheme switcher joined the bar (#427): it holds "Search…" with the field's padding */
    padding-inline: var(--space-xs) var(--space-s);
    font-size: var(--size--1);
    font-weight: var(--weight-400);
    white-space: nowrap;
    color: var(--text-muted);
    background: var(--field-bg);
    border: var(--field-border-w) solid var(--field-border);   /* drawn as a field: same tokens */
    border-radius: var(--field-radius);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.search-trigger svg { flex: none; }

/* The ellipsis is drawn, not spoken: the name stays "Search this site". */
.search-trigger__text::after { content: "…" / ""; }

.search-trigger:hover {
    color: var(--brand-on-soft);
}

.search-trigger:focus-visible {
    outline-offset: calc(var(--field-border-w) * -1);   /* it is drawn as a field: the ring sits on its border */
}

/* With the links gone, the hamburger sits a step from the buttons. */
@media (max-width: 1024px) {
    .header .nav { --nav-gap: var(--space-xs); }
}

/* The two tight bands: the trigger is the magnifier alone, still drawn as
 * a field, a square one touch target wide (its name stays "Search this
 * site", from aria-label). It was magnifier + "Search" until the colour
 * scheme switcher joined the bar (#427). */
@media (min-width: 641px) and (max-width: 767px), (min-width: 1025px) and (max-width: 1199px) {
    .search-trigger {
        inline-size: var(--target-min);
        justify-content: center;
        padding-inline: 0;
    }
    .search-trigger__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .header .nav-buttons { gap: var(--space-2xs); }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .header .nav { --nav-gap: var(--space-s); }
    .header .nav-links { gap: var(--space-xs); }
}

.mf-search__form {
    display: flex;
    flex-direction: column;
}

.mf-search__status {
    margin: var(--space-2xs) 0 0;
    font-size: var(--size--1);
    line-height: var(--leading-m);
    color: var(--text-muted);
}

.mf-search__status:empty { display: none; }

.mf-search__results {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin-top: var(--space-2xs);
    max-block-size: min(60vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* display: flex above would otherwise beat the hidden attribute. */
.mf-search__results[hidden] { display: none; }

.mf-search__link {
    display: block;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-s);
    color: var(--text);
    overflow-wrap: anywhere;
    transition: background var(--duration-fast) var(--ease-out);
}

.mf-search__link:hover,
.mf-search__link:focus-visible {
    background: var(--brand-soft);
}

/* Inside a scrolling list an outset ring is clipped, so it sits inset. */
.mf-search__link:focus-visible {
    outline-offset: calc(var(--focus-ring-w) * -1);
    border-radius: var(--radius-s);
}

.mf-search__title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--size-0);
    font-weight: var(--weight-700);
    line-height: var(--leading-s);
    letter-spacing: var(--tracking-s);
    color: var(--text-strong);
}

.mf-search__excerpt {
    display: block;
    margin-top: var(--space-3xs);
    font-size: var(--size--1);
    line-height: var(--leading-l);
    color: var(--text);
}

.mf-search__excerpt mark {
    background: var(--selection);
    color: var(--text-strong);
    border-radius: var(--radius-xs);
}


/* Phones: the trigger beside the hamburger, the same size and ink. Only
 * where .nav-buttons (and so .search-trigger) is hidden. */
.header-search-open {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    padding: 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-s);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.header-search-open:hover {
    color: var(--brand-on-soft);
    background: var(--brand-soft);
}

@media (max-width: 640px) {
    .header-search-open { display: inline-flex; }
    /* Only the trigger and the hamburger are left in the bar here. */
    .header .nav { --nav-gap: var(--space-3xs); }
}

/* The overlay, full screen (the phone layout, and the base for the card
 * below). One bar holds Close, the field and Search, in that order (Close
 * first, matching the focus order); the results scroll beneath it, inside
 * the overlay. mediflare.js locks the page behind.
 *
 * Styled only through :not([hidden]): a display of its own would override
 * the browser's [hidden] { display: none } and the overlay would never close.
 *
 * The bar is the overlay's own header, spanning the first row; the box's
 * children join the overlay's grid through subgrid, so the field and Search
 * sit in that row beside Close while the results run the full width below.
 * The first column is exactly one touch target wide because the only thing
 * in it is Close, which lives inside the spanning bar and so cannot size it. */
.mf-search-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--layer-modal);
    display: grid;
    grid-template-columns: var(--target-min) minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--space-xs) var(--space-2xs);
    padding-block-start: max(var(--space-xs), env(safe-area-inset-top));
    padding-inline: max(var(--space-s), env(safe-area-inset-left)) max(var(--space-s), env(safe-area-inset-right));
    background: var(--surface-raised);
}

.mf-search-overlay__header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    padding-block-end: var(--space-xs);
    border-bottom: var(--border-width-s) solid var(--border);
}

/* The text "Close" stays as the button's name; an icon shows instead. */
.mf-search-overlay__close {
    position: relative;
    z-index: var(--layer-base);   /* above the box, which spans this row too */
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    padding: 0;
    font-size: 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-s);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.mf-search-overlay__close::before {
    content: "";
    inline-size: 1.5rem;
    block-size: 1.5rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mf-search-overlay__close:hover {
    color: var(--brand-on-soft);
    background: var(--brand-soft);
}

.mf-search-overlay__close:focus-visible {
    outline-offset: calc(var(--focus-ring-w) * -1);
}

.mf-search--overlay,
.mf-search--overlay .mf-search__form {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-items: start;
}

.mf-search--overlay .mf-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mf-search--overlay .mf-search__input {
    grid-column: 2;
    grid-row: 1;
}

.mf-search--overlay .mf-search__submit {
    grid-column: 3;
    grid-row: 1;
    block-size: var(--target-min);
    padding-inline: var(--space-s);
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    color: var(--brand-on-solid);
    background: var(--brand-solid);
    border: 0;
    border-radius: var(--control-radius);
    cursor: pointer;
}

.mf-search--overlay .mf-search__submit:hover {
    background: color-mix(in oklch, var(--brand-solid), var(--mix-hover));
    color: var(--brand-on-solid);
}

.mf-search--overlay .mf-search__status {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

.mf-search--overlay .mf-search__results {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: stretch;
    max-block-size: none;
    min-block-size: 0;
    margin: 0;
    padding-block-end: max(var(--space-s), env(safe-area-inset-bottom));
}

/* Close shows as an ×; its text "Close" is hidden (font-size: 0), and the alt
 * text below completes its name as "Close search". The zero-width space is
 * there because an empty string generates no box, and so no alt text. A
 * browser without CSS alt text drops the declaration and names it "Close". */
.mf-search-overlay__close::after { content: "\200b" / "search"; }

/* Above 640px the same overlay is a centred card (the DocSearch pattern):
 * offset from the top rather than vertically centred, so it grows downward
 * with its results up to max-block-size, past which the results scroll inside
 * it. A press on the dimmed page closes it (mediflare.js, #249).
 *
 * Stacking: the backdrop is body::after at --layer-modal, above the fixed
 * header (--layer-nav) and the nav dropdown (--layer-overlay). The card sits
 * one above it, since body::after follows the overlay in tree order and at
 * an equal z-index would paint over it. */
@media (min-width: 641px) {
    .mf-search-overlay:not([hidden]) {
        inset: var(--space-2xl) 0 auto;
        z-index: calc(var(--layer-modal) + 1);
        inline-size: calc(100% - 2 * var(--space-m));
        max-inline-size: 38.75rem;   /* the card's width before --grid-max-width became the 75rem container */
        max-block-size: calc(100dvh - 2 * var(--space-2xl));
        margin-inline: auto;
        padding: var(--space-s);
        border-radius: var(--radius-l);
        box-shadow: var(--shadow-l);
    }

    .mf-search--overlay .mf-search__results {
        padding-block-end: 0;
    }

    html[data-mf-search-overlay="open"] body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--layer-modal);
        background: var(--surface-overlay);
        -webkit-backdrop-filter: blur(calc(var(--space-3xs) / 2));
        backdrop-filter: blur(calc(var(--space-3xs) / 2));
    }
}

/* Opening is a short fade and settle, and nothing at all under reduced
 * motion. Closing is immediate. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
    .mf-search-overlay:not([hidden]) {
        animation: search-card-in var(--duration-base) var(--ease-out);
    }

    html[data-mf-search-overlay="open"] body::after {
        animation: search-backdrop-in var(--duration-base) var(--ease-out);
    }
}

@keyframes search-card-in {
    from { opacity: 0; transform: scale(0.98); }
}

@keyframes search-backdrop-in {
    from { opacity: 0; }
}

/* ─── COLOUR SCHEME SWITCHER ─────────────────────────────── */
/*
 * Light, dark or match the device (#427). One icon button in the header bar,
 * beside the hamburger on phones and at the end of the bar above 1024px,
 * opens a small card in the style of the Patients dropdown: a labelled
 * group of three buttons, the current one pressed (aria-pressed) and
 * ticked. The button shows the current choice: a sun, a moon, or a half
 * disc for "match device".
 *
 * The choice is <html data-scheme="light|dark"> (none = follow the device),
 * set before first paint by partials/scheme-head.html from localStorage and
 * by the switcher's script in partials/scripts.html. That head script also
 * sets data-scheme-ui, and only in a browser that can draw a dark page
 * (relative colour and light-dark(), Dials' own condition): elsewhere the
 * page is always light, so the switcher stays hidden, and so it does with
 * no script at all.
 */
.scheme {
    position: relative;
    display: none;
    flex: none;
    /* A short step from the bar's buttons rather than the bar's full gap:
     * its 44px box already has air round the icon. */
    margin-inline-start: calc(var(--space-3xs) - var(--nav-gap, 0px));
}

/* Twice guarded: the head script sets data-scheme-ui only where both tests
 * pass, and the rule itself asks the same of the browser, so the switcher
 * never shows, or flashes, where a dark page cannot be drawn. */
@supports (color: oklch(from red l c h)) and (color: light-dark(red, red)) {
    :root[data-scheme-ui] .scheme { display: block; }
}

.scheme__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}

.scheme__toggle:hover,
.scheme__toggle[aria-expanded="true"] {
    color: var(--brand-on-soft);
    background: var(--brand-soft);
}

/* The button shows the current choice; "match device" when there is none. */
.scheme__icon { display: none; }
:root:not([data-scheme]) .scheme__icon--auto,
:root[data-scheme="light"] .scheme__icon--light,
:root[data-scheme="dark"] .scheme__icon--dark { display: block; }

.scheme__menu {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    right: 0;
    z-index: var(--layer-overlay);
    min-inline-size: 13rem;
    padding: var(--space-2xs);
    background: var(--surface-raised);
    color: var(--text);
    border: var(--border-width-s) solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
}

.scheme__menu[hidden] { display: none; }

/* The pointer, as on the Patients dropdown, centred on the button. */
.scheme__menu::before,
.scheme__menu::after {
    content: '';
    position: absolute;
    right: calc(var(--target-min) / 2);
    translate: 50% 0;
    border: solid transparent;
}

.scheme__menu::before {
    top: -12px;
    border-width: 6px;
    border-bottom-color: var(--border);
}

.scheme__menu::after {
    top: -10px;
    border-width: 5px;
    border-bottom-color: var(--surface-raised);
}

.scheme__label {
    margin: 0;
    padding: var(--space-3xs) var(--space-xs) var(--space-2xs);
    font-size: var(--size--2);
    font-weight: var(--weight-600);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    color: var(--text-quiet);
}

.scheme__option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    inline-size: 100%;
    min-block-size: var(--target-min);
    padding: 0 var(--space-xs);
    font-family: inherit;
    font-size: var(--size--1);
    font-weight: var(--weight-600);
    text-align: start;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.scheme__option + .scheme__option { margin-top: var(--space-3xs); }

.scheme__option:hover,
.scheme__option[aria-pressed="true"] {
    color: var(--brand-on-soft);
    background: var(--brand-soft);
}

/* Inside the card an outset ring would touch its edge, so it sits inset. */
.scheme__option:focus-visible {
    outline-offset: calc(var(--focus-ring-w) * -1);
    border-radius: var(--radius-s);
}

.scheme__option svg { flex: none; }

/* The tick on the pressed choice: drawn, not spoken (aria-pressed says it). */
.scheme__tick {
    margin-inline-start: auto;
    visibility: hidden;
}

.scheme__option[aria-pressed="true"] .scheme__tick { visibility: visible; }

/* ─── THE LOGO ON A DARK PAGE ────────────────────────────── */
/* The logo's "MEDICAL CENTRE" is slate, which fades into a dark page, so a
 * dark page shows logo-dark.webp: the same artwork with that line in pale
 * slate (the teal is unchanged). Only where the page can be dark at all,
 * under Dials' own condition; the footer keeps its white logo on the band. */
.logo-img--dark { display: none; }

@supports (color: oklch(from red l c h)) and (color: light-dark(red, red)) {
    :root[data-scheme="dark"] .header .logo-img--light { display: none; }
    :root[data-scheme="dark"] .header .logo-img--dark { display: block; }

    @media (prefers-color-scheme: dark) {
        :root:not([data-scheme="light"]) .header .logo-img--light { display: none; }
        :root:not([data-scheme="light"]) .header .logo-img--dark { display: block; }
    }
}

/* ─── CONNECT WIDGETS ON A DARK PAGE ─────────────────────── */
/* The Your Health hub and the newsletter sign-up are drawn by the Connect
 * widget (connect.mediflare.cloud) in its own light colours, and it does not
 * follow the page's scheme: on a dark page its tabs and labels inherit pale
 * text on its own white cards. So the widgets stay light, always: the light
 * scheme and ink inside them, and on a dark page a light panel behind them,
 * drawn as a spread shadow so the layout does not move. */
#mediflare-yourhealth-hub,
#mediflare-newsletter-signup {
    color-scheme: light;
    color: var(--text);
}

@supports (color: oklch(from red l c h)) and (color: light-dark(red, red)) {
    :root[data-scheme="dark"] :is(#mediflare-yourhealth-hub, #mediflare-newsletter-signup):not(:empty) {
        background: var(--surface);
        border-radius: var(--radius-m);
        box-shadow: 0 0 0 var(--space-s) var(--surface);
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-scheme="light"]) :is(#mediflare-yourhealth-hub, #mediflare-newsletter-signup):not(:empty) {
            background: var(--surface);
            border-radius: var(--radius-m);
            box-shadow: 0 0 0 var(--space-s) var(--surface);
        }
    }
}