@charset "UTF-8";
/* ==========================================================================
   Neo Nutrition Solutions - design system
   Brand source of truth: the Neo-nutrition Solutions logo
     leaf green  #488437   wordmark orange #F08518   wordmark black #000000
   Everything below is derived from those three.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root {
    /* brand */
    --green:        #488437;
    --green-700:    #3A6B2C;
    --green-800:    #2C5221;
    --green-900:    #1C3615;
    --green-600:    #58994A;
    --green-300:    #A9CE9C;
    --green-100:    #DCEBD5;
    --green-050:    #F1F7ED;

    --orange:       #F08518;
    --orange-700:   #CE6D0A;
    --orange-300:   #F8C184;
    --orange-100:   #FDE7CD;
    --orange-050:   #FEF6EC;

    --forest:       #14301A;   /* deep section background */
    --forest-soft:  #1E4426;

    /* neutrals - warm, never cold grey */
    --ink:          #10140F;
    --ink-800:      #262B24;
    --ink-700:      #3E453C;
    --ink-500:      #6C7468;
    --ink-400:      #8D9488;
    --ink-300:      #B6BBB1;
    --line:         #E3E6DE;
    --line-soft:    #EFF1EB;
    --canvas:       #FFFFFF;
    --canvas-alt:   #FAFAF5;
    --sand:         #F4F1E7;
    --sand-deep:    #EBE6D7;

    /* semantic */
    --ok:           #2F7D32;
    --ok-bg:        #E8F3E6;
    --warn:         #B26A00;
    --warn-bg:      #FDF1DF;
    --bad:          #B3261E;
    --bad-bg:       #FBE9E7;
    --info:         #1B5E8C;
    --info-bg:      #E6F0F7;

    /* typography */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* scale (fluid) */
    --t-xs:   0.75rem;
    --t-sm:   0.8125rem;
    --t-base: 0.9375rem;
    --t-md:   1.0625rem;
    --t-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
    --t-xl:   clamp(1.375rem, 0.8vw + 1.2rem, 1.625rem);
    --t-2xl:  clamp(1.75rem, 1.4vw + 1.4rem, 2.25rem);
    --t-3xl:  clamp(2.125rem, 2.4vw + 1.6rem, 3rem);
    --t-4xl:  clamp(2.5rem, 4vw + 1.5rem, 4.25rem);
    --t-5xl:  clamp(2.45rem, 5.2vw + 1.1rem, 5.5rem);

    /* space */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
    --s-11: 96px; --s-12: 128px;

    /* shape */
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

    /* elevation - soft, warm, never harsh black */
    --sh-1: 0 1px 2px rgba(16, 20, 15, .05);
    --sh-2: 0 2px 8px rgba(16, 20, 15, .06), 0 1px 2px rgba(16, 20, 15, .04);
    --sh-3: 0 8px 28px rgba(16, 20, 15, .08), 0 2px 6px rgba(16, 20, 15, .04);
    --sh-4: 0 20px 56px rgba(16, 20, 15, .12), 0 4px 12px rgba(16, 20, 15, .06);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --container: 1200px;
    --container-wide: 1360px;
    --container-text: 720px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/**
 * The hidden attribute has to win, always.
 *
 * The browser's own rule is `[hidden] { display: none }` at element
 * specificity, so ANY class that sets `display` silently defeats it. That is
 * not a cosmetic problem: `.popup` and `.mpick` are `position: fixed; inset: 0`
 * overlays at a high z-index with `opacity: 0`, so losing this battle leaves an
 * invisible full-screen sheet swallowing every click on the page. It looks
 * exactly like the page has frozen.
 *
 * !important is right here. `hidden` means hidden, with no exceptions, and a
 * component should not have to remember to re-assert it.
 */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-md);
    line-height: 1.65;
    color: var(--ink-800);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* Icons sit inside running text, so they opt back into inline flow. */
.icon { display: inline-block; vertical-align: -0.18em; flex: none; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
a { color: var(--green-700); text-decoration-color: color-mix(in srgb, var(--green) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--green-800); }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }
small { font-size: var(--t-sm); }
strong, b { font-weight: 600; }
::selection { background: var(--green-100); color: var(--green-900); }
:focus-visible { outline: 2.5px solid var(--green); outline-offset: 2px; border-radius: 3px; }
.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;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--green); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* Shown only to signed-in staff while the public site is closed, because the
   one thing worse than maintenance mode is forgetting it is on. */
.maint-strip {
    background: var(--orange-100); color: var(--ink-800);
    border-bottom: 2px solid var(--orange);
    padding: var(--s-3) var(--s-5); text-align: center; font-size: var(--t-sm);
}
.maint-strip a { color: var(--green-800); font-weight: 600; }

/* ----------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }
.section { padding-block: var(--s-10); }
.section--tight { padding-block: var(--s-8); }
.section--alt { background: var(--canvas-alt); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--forest); color: #E9EFE6; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #FFFFFF; }
.section--dark a { color: var(--green-300); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-4); align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .section { padding-block: var(--s-9); }
    .container { padding-inline: var(--s-4); }
}

/* ------------------------------------------------------------- typography */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--green-700); margin: 0 0 var(--s-3);
    display: inline-flex; align-items: center; gap: var(--s-2);
}
.section--dark .eyebrow { color: var(--green-300); }
.eyebrow::before {
    content: ''; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; flex: none;
}
.display { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.display--hero { font-size: var(--t-5xl); }
.lede { font-size: var(--t-lg); line-height: 1.6; color: var(--ink-700); max-width: 62ch; }
.section--dark .lede { color: #C8D4C3; }
.muted { color: var(--ink-500); }
.tiny { font-size: var(--t-xs); letter-spacing: .02em; }
.mark { color: var(--orange-700); }
.underline-brush {
    background-image: linear-gradient(transparent 62%, var(--orange-100) 62%, var(--orange-100) 92%, transparent 92%);
}
.text-center { text-align: center; }
.section-head { max-width: 760px; margin-bottom: var(--s-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--t-lg); color: var(--ink-700); margin-bottom: 0; }
.section--dark .section-head p { color: #BFCDBA; }

/* --------------------------------------------------------------- buttons */
.btn {
    --btn-bg: var(--green); --btn-fg: #fff; --btn-bd: var(--green);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-family: var(--font-body); font-size: var(--t-base); font-weight: 600; letter-spacing: .005em;
    padding: 13px 24px; border-radius: var(--r-pill); border: 1.5px solid var(--btn-bd);
    background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; white-space: nowrap;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
    box-shadow: var(--sh-1);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-3); color: var(--btn-fg); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn .icon { flex: none; }
.btn--primary { --btn-bg: var(--green); --btn-bd: var(--green); }
.btn--primary:hover { --btn-bg: var(--green-700); --btn-bd: var(--green-700); }
.btn--accent { --btn-bg: var(--orange); --btn-bd: var(--orange); --btn-fg: #22160A; }
.btn--accent:hover { --btn-bg: var(--orange-700); --btn-bd: var(--orange-700); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); box-shadow: none; }
.btn--ghost:hover { --btn-bd: var(--green); --btn-fg: var(--green-800); background: var(--green-050); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--sand); --btn-bd: var(--sand); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); box-shadow: none; }
.btn--outline-light:hover { --btn-bd: #fff; background: rgba(255,255,255,.1); }
.btn--sm { padding: 9px 16px; font-size: var(--t-sm); }
.btn--lg { padding: 16px 32px; font-size: var(--t-md); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.link-arrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 600; font-size: var(--t-base); text-decoration: none; color: var(--green-700);
}
.link-arrow .icon { transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ----------------------------------------------------------------- cards */
.card {
    background: var(--canvas); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s-7);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--green-300); }
.card--flat { box-shadow: none; }
.card--pad-sm { padding: var(--s-5); }
.card__icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: var(--green-050); color: var(--green-700); margin-bottom: var(--s-5);
}
.card__title { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.card__meta { font-size: var(--t-sm); color: var(--ink-500); }

/* service card - editorial, not a boxy tile */
.service-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
/* 4:3. This was 16/10 and I tightened it to 16/9 for density, which cost
   picture: 16/9 discards 26.9% of the average photograph here and badly crops
   six of fourteen, against 17.6% and one at 4:3. Density is not worth showing
   half a photograph. */
.service-card__media { aspect-ratio: 4 / 3; background: var(--sand); position: relative; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
/*
 * Every summary gets the same three lines.
 *
 * Without this the summaries ran five to seven lines depending on the service,
 * so no two cards were the same height - and because the grid stretches each
 * card to match the tallest in its row, the short ones ended up with a band of
 * empty space above the price. Measured: 83px of dead space in most cards and
 * 150px in the shortest. Equal text blocks mean equal cards and no band.
 */
/* Two lines' worth of room for the name, whether it needs one or two. A
   one-line name left its card 20px shorter than its neighbours, and the grid
   made up the difference as empty space above the price. */
.service-card__body .card__title { min-height: 2.4em; }

.service-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--s-3);
}
.service-card__tag {
    position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
    background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--green-800); padding: 6px 12px; border-radius: var(--r-pill);
}
.service-card__price { font-weight: 600; color: var(--ink); }
.service-card__foot {
    margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
/* Keeps "Details" on the right even when prices are hidden and it is the
   only thing in the row. */
.service-card__foot > .link-arrow { margin-left: auto; }

/* ------------------------------------------------------------------ pills */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
    padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap;
    background: var(--line-soft); color: var(--ink-700);
}
.pill--ok    { background: var(--ok-bg);   color: var(--ok); }
.pill--warn  { background: var(--warn-bg); color: var(--warn); }
.pill--bad   { background: var(--bad-bg);  color: var(--bad); }
.pill--info  { background: var(--info-bg); color: var(--info); }
.pill--muted { background: var(--line-soft); color: var(--ink-500); }
.pill--brand { background: var(--green-050); color: var(--green-800); }
.pill--accent{ background: var(--orange-050); color: var(--orange-700); }

.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ forms */
.field { margin-bottom: var(--s-5); }
.field__label {
    display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-700);
    margin-bottom: var(--s-2); letter-spacing: .01em;
}
.field__hint { font-size: var(--t-xs); color: var(--ink-500); margin-top: 6px; }
.field__error { font-size: var(--t-xs); color: var(--bad); margin-top: 6px; font-weight: 500; }
.input, .select, .textarea {
    width: 100%; padding: 12px 14px; font-size: var(--t-base);
    background: var(--canvas); border: 1.5px solid var(--line); border-radius: var(--r-md);
    color: var(--ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
/* A value the person can read but not change. Looks like a field so the form
   still scans as a form, but is visibly inert rather than a disabled input
   that looks broken. */
.input--static {
    background: var(--line-soft); border-style: solid; border-color: transparent;
    color: var(--ink-700); margin: 0; cursor: default;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent);
}
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--bad); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
    appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236C7468' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
/*
 * A row of fields that fits its container, not the viewport.
 *
 * This was `1fr 1fr`, and grid items default to `min-width: auto` - so a
 * column could never shrink below its content's minimum width. A native date
 * input measures 165px at its narrowest (the browser's own widget), so two of
 * them plus the gap need 346px. In the schedule page's side panel the row is
 * 334px, and the second field ran 12px out of the panel and off the screen.
 *
 * A media query cannot fix that: the viewport is wide, it is the panel that is
 * narrow. So the track count follows the container - two columns while each
 * can hold a date field, one column when they cannot - and `min-width: 0`
 * stops any future wide-minimum control doing the same thing again.
 *
 * `auto-fit` collapses the tracks it has no items for, so a two-field row
 * still renders as two equal halves exactly as before.
 */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--s-4);
}
.field-row > * { min-width: 0; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-700); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: none; }

/* choice chips - used by the goal selector and booking */
.choice {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: var(--canvas); cursor: pointer; text-align: left;
    transition: all .18s var(--ease);
}
.choice:hover { border-color: var(--green-300); background: var(--green-050); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__title { font-weight: 600; color: var(--ink); }
.choice__sub { font-size: var(--t-sm); color: var(--ink-500); }
.choice.is-selected, .choice:has(input:checked) {
    border-color: var(--green); background: var(--green-050);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
}

/* ---------------------------------------------------------------- alerts */
.alert {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
    border: 1px solid transparent; font-size: var(--t-base); margin-bottom: var(--s-5);
}
.alert .icon { flex: none; margin-top: 2px; }
.alert--success { background: var(--ok-bg);   border-color: color-mix(in srgb, var(--ok) 25%, transparent);   color: #1E5720; }
.alert--error   { background: var(--bad-bg);  border-color: color-mix(in srgb, var(--bad) 25%, transparent);  color: #8C1C16; }
.alert--warning { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 25%, transparent); color: #7A4800; }
.alert--info    { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: #124663; }

/* ----------------------------------------------------------- empty state */
.empty {
    text-align: center; padding: var(--s-10) var(--s-6);
    border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--canvas-alt);
}
.empty__icon {
    width: 60px; height: 60px; margin: 0 auto var(--s-5); border-radius: 50%;
    display: grid; place-items: center; background: var(--green-050); color: var(--green-600);
}
.empty h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.empty p { color: var(--ink-500); max-width: 42ch; margin-inline: auto; }

/* --------------------------------------------------------------- site nav */
.topbar {
    background: var(--forest); color: #CBD8C6; font-size: var(--t-xs); letter-spacing: .01em;
}
.topbar a { color: #DDE7D9; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: 9px; }
.topbar__links { display: flex; gap: var(--s-5); align-items: center; }
@media (max-width: 860px) { .topbar { display: none; } }

.header {
    position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-2); }
.header__inner { display: flex; align-items: center; gap: var(--s-6); padding-block: var(--s-4); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { height: 42px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); letter-spacing: -.01em; }
.brand__sub { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }

.nav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav__link {
    position: relative; padding: 9px 14px; border-radius: var(--r-pill);
    font-size: var(--t-base); font-weight: 500; color: var(--ink-700); text-decoration: none;
    transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__link:hover { color: var(--green-800); background: var(--green-050); }
.nav__link.is-active { color: var(--green-800); font-weight: 600; }
.nav__link.is-active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px;
    height: 2px; background: var(--orange); border-radius: 2px;
}
.nav__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-4); }
.nav-toggle {
    display: none; width: 44px; height: 44px; border: 1.5px solid var(--line); background: #fff;
    border-radius: var(--r-md); align-items: center; justify-content: center; margin-left: auto;
}
@media (max-width: 1024px) {
    .nav { display: none; }
    .nav-toggle { display: inline-flex; }
}

.mobile-nav {
    position: fixed; inset: 0; z-index: 90; background: var(--canvas);
    display: flex; flex-direction: column; padding: var(--s-5);
    transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.mobile-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); text-decoration: none;
}
.mobile-nav__link:hover { color: var(--green-700); }
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-3); }

/* sticky mobile booking bar */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: none; gap: var(--s-3); padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
@media (max-width: 860px) { .sticky-cta { display: flex; } body { padding-bottom: 74px; } }

/* ---------------------------------------------------- the chat launcher */
/*
 * A floating "can we help?" button, bottom right. On a phone it sits above
 * the sticky booking bar rather than on top of it.
 */
.chat-launch { position: fixed; right: 18px; bottom: 18px; z-index: 60;
               display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 860px) { .chat-launch { bottom: 86px; } }
/* Narrower on a phone, where the greeting sits over the page rather than in
   the margin beside it. */
@media (max-width: 560px) {
    .chat-launch__bubble { max-width: 190px; padding: 10px 26px 10px 12px; }
    .chat-launch__bubble p { font-size: var(--t-xs); }
}

.chat-launch__btn {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--green); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 24px rgba(16, 20, 15, .22);
    transition: transform .18s var(--ease), background .18s var(--ease);
}
.chat-launch__btn:hover { transform: translateY(-2px); }
.chat-launch__btn:active { transform: translateY(0); }

/*
 * The nudge: three bounces, then it stops. A button that bounces for ever is
 * not an invitation, it is a fly in the room - so it runs a few times, and
 * only once per visit (the script adds the class a single time).
 */
@keyframes chatNudge {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-9px); }
    45%      { transform: translateY(0); }
    60%      { transform: translateY(-4px); }
    75%      { transform: translateY(0); }
}
.chat-launch__btn.is-nudging { animation: chatNudge 1.4s var(--ease) 3; }

/* The greeting that pops out beside it. */
.chat-launch__bubble {
    position: relative; max-width: 240px; background: var(--canvas);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 12px 30px 12px 14px; box-shadow: var(--sh-2);
    animation: chatPop .32s cubic-bezier(.22, .61, .36, 1) both;
}
.chat-launch__bubble p { margin: 0; font-size: var(--t-sm); color: var(--ink-800); }
@keyframes chatPop { from { opacity: 0; transform: translateY(8px) scale(.96); } }

.chat-launch__close {
    position: absolute; top: 6px; right: 8px; background: none; border: none;
    font-size: 20px; line-height: 1; color: var(--ink-400); cursor: pointer; padding: 2px 4px;
}
.chat-launch__close:hover { color: var(--ink); }

/* The panel. */
.chat-launch__panel {
    width: min(320px, calc(100vw - 36px)); background: var(--canvas);
    border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
    box-shadow: 0 18px 44px rgba(16, 20, 15, .22);
    animation: chatPop .26s cubic-bezier(.22, .61, .36, 1) both;
}
.chat-launch__head {
    position: relative; padding: 14px 40px 12px 16px;
    background: var(--green); color: #fff;
}
.chat-launch__head strong { display: block; font-size: var(--t-base); }
.chat-launch__head .tiny { color: rgba(255, 255, 255, .78); }
.chat-launch__head .chat-launch__close { color: rgba(255, 255, 255, .8); top: 10px; }
.chat-launch__head .chat-launch__close:hover { color: #fff; }

.chat-launch__body { padding: 14px 14px 6px; }
.chat-launch__says {
    margin: 0 0 12px; font-size: var(--t-sm); color: var(--ink-800);
    background: var(--green-050); border-radius: var(--r-md); padding: 10px 12px;
}
.chat-launch__option {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 10px 12px; margin-bottom: 8px; font-size: var(--t-sm);
    border: 1px solid var(--line); border-radius: var(--r-md);
    color: var(--ink); text-decoration: none; background: var(--canvas);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.chat-launch__option:hover { border-color: var(--green); background: var(--green-050); }
.chat-launch__foot { display: flex; gap: 8px; padding: 6px 14px 12px; }
.chat-launch__foot .btn { flex: 1; }
.chat-launch__note {
    margin: 0; padding: 0 14px 14px; font-size: var(--t-xs); color: var(--ink-500);
}

@media (prefers-reduced-motion: reduce) {
    .chat-launch__btn.is-nudging { animation: none; }
    .chat-launch__bubble, .chat-launch__panel { animation: none; }
}
.sticky-cta .btn { flex: 1; }
.sticky-cta .btn--icon { flex: 0 0 52px; padding: 13px 0; }

/* ------------------------------------------------------------------- hero */
/* Tighter at the top so the call-to-action buttons land above the fold.
   There is already 171px above this - utility strip, navigation and the
   announcement bar - and all of that is content. This padding was not. */
.hero { position: relative; padding-block: var(--s-7) var(--s-10); overflow: hidden; }
.hero::before {
    content: ''; position: absolute; inset: 0 0 auto auto; width: 58%; height: 100%;
    background: radial-gradient(90% 70% at 70% 20%, var(--green-050) 0%, transparent 70%);
    pointer-events: none;
}
.hero__grid {
    /* The picture column used to be the narrower of the two. With a smaller
       headline the text needs less room, so the photograph gets the larger
       share - which makes it bigger without cropping it any harder. */
    /* 1.25, not 1.35: at 1.35 the text column fell to 477px and the two
       call-to-action buttons needed exactly 477px, so they wrapped onto two
       lines. A few pixels either way decides whether that row breaks. */
    position: relative; display: grid; grid-template-columns: 1fr 1.25fr;
    gap: var(--s-8); align-items: center;
}
/* Its own size rather than --t-5xl (which tops out at 88px). A two-line
   sentence at 88px dominates the page and pushes everything else below the
   fold. Capped at 62px, and the lower bound is unchanged so phones are
   unaffected. --t-5xl itself is left alone, so other page headings keep the
   size they have. */
.hero__title {
    font-size: clamp(2.15rem, 2.6vw + 1.05rem, 3.25rem);
    margin-bottom: var(--s-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__media { position: relative; }
.hero__media img {
    width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-4);
    /* 5:4. The shape is a trade: taller shows more of the photograph but
       crops a landscape one harder. Measured across the clinic's own 14
       images, the original 4:5 discarded 36% and badly cropped eight of them;
       4:3 was the least wasteful at 17.6% but left the frame looking squat,
       and square - which restored the size - took 44% off a 16:9 group
       photograph, 22% from each side, which cut the person on the left in
       half. 3:2 takes 16% off that same photograph, keeps everyone in frame,
       and being shorter helps the buttons clear the fold. The width lost is
       bought back by giving the column more of the grid. */
    aspect-ratio: 3 / 2; object-fit: cover;
}
.hero__card {
    position: absolute; left: -28px; bottom: 40px; background: #fff;
    border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-4);
    display: flex; gap: var(--s-4); align-items: center; max-width: 290px;
    border: 1px solid var(--line-soft);
}
.hero__card .icon-badge {
    width: 44px; height: 44px; border-radius: 12px; background: var(--orange-050);
    color: var(--orange-700); display: grid; place-items: center; flex: none;
}
@media (max-width: 1024px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
    .hero__media { order: -1; max-width: 520px; }
    .hero__media img { aspect-ratio: 16 / 11; }
    .hero__card { left: auto; right: 16px; bottom: -24px; }
}
@media (max-width: 720px) {
    .hero { padding-block: var(--s-6) var(--s-9); }
    .hero__grid { gap: var(--s-6); }
    .hero__card { position: static; margin-top: var(--s-4); max-width: none; padding: var(--s-4); }
}

/* trust strip */
.trust { border-block: 1px solid var(--line); background: var(--canvas-alt); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding-block: var(--s-7); }
.trust__item { display: flex; gap: var(--s-3); align-items: flex-start; }
.trust__item .icon { color: var(--green); flex: none; margin-top: 2px; }
.trust__item strong { display: block; font-size: var(--t-base); color: var(--ink); }
.trust__item span { font-size: var(--t-sm); color: var(--ink-500); }
@media (max-width: 860px) { .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (max-width: 480px) { .trust__grid { grid-template-columns: 1fr; } }

/* stat block */
.stats { display: flex; gap: var(--s-8); flex-wrap: wrap; margin-top: var(--s-8); }
.stat__value { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; color: var(--green-800); line-height: 1; }
.stat__label { font-size: var(--t-sm); color: var(--ink-500); margin-top: 6px; }

/* ------------------------------------------------------------- step list */
.steps { counter-reset: step; display: grid; gap: var(--s-6); }
.step { position: relative; padding-left: 76px; }
.step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--orange);
    width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--orange-100);
    display: grid; place-items: center; background: var(--orange-050);
}
.step h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.step p { color: var(--ink-600, var(--ink-700)); margin-bottom: 0; }

/* ------------------------------------------------------------ team cards */
.person { text-align: left; }
.person__photo {
    aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
    background: var(--sand); margin-bottom: var(--s-4); position: relative;
}
/* Crop towards the top. A centred crop on a head-and-shoulders photograph
   takes the top of the head off; faces sit in the upper third. */
.person__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
    transition: transform .5s var(--ease);
}
.person:hover .person__photo img { transform: scale(1.04); }
.person__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.person__role { font-size: var(--t-sm); color: var(--green-700); font-weight: 600; }
.person__focus { font-size: var(--t-sm); color: var(--ink-500); margin-top: var(--s-2); }

/* placeholder art for images that are not uploaded yet */
.ph {
    position: relative; width: 100%; height: 100%;
    background:
        radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, var(--green) 16%, transparent), transparent 70%),
        radial-gradient(50% 50% at 80% 80%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%),
        var(--sand);
    display: grid; place-items: center; color: color-mix(in srgb, var(--green) 55%, var(--ink-400));
}
.ph__label {
    font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    margin-top: var(--s-2); opacity: .75;
}

/* ------------------------------------------------------------ article bits */
.article-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.article-card__media {
    aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden;
    background: var(--sand); margin-bottom: var(--s-4);
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__cat { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-700); }
.article-card__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; margin: 8px 0; color: var(--ink); }
.article-card:hover .article-card__title { color: var(--green-800); }
.article-card__meta { font-size: var(--t-sm); color: var(--ink-500); margin-top: auto; padding-top: var(--s-3); }

/* ----------------------------------------------------------- ad placements */
.ad-slot { margin-block: var(--s-7); }
.ad {
    position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-alt) 100%);
    padding: var(--s-6); display: grid; gap: var(--s-5);
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ad:hover { box-shadow: var(--sh-3); border-color: var(--green-300); }
.ad__label {
    position: absolute; top: var(--s-4); right: var(--s-4);
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-400); font-weight: 600;
}
.ad__eyebrow { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); font-weight: 600; }
.ad__title { font-family: var(--font-display); font-size: var(--t-xl); margin: 8px 0; }
.ad--inline { grid-template-columns: 220px 1fr; align-items: center; }
.ad--inline .ad__media { aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; background: var(--sand); }
.ad--inline .ad__media img { width: 100%; height: 100%; object-fit: cover; }
.ad__logo { max-height: 34px; width: auto; opacity: .9; }
@media (max-width: 720px) { .ad--inline { grid-template-columns: 1fr; } }

/* Card formats other than the default. A tile is compact enough for a
   sidebar or a portal column; a strip is one line of text and a link. */
.ad--tile { padding: var(--s-5); gap: var(--s-4); }
.ad--tile .ad__title { font-size: var(--t-lg); }
.ad--sidebar { padding: var(--s-5); }
.ad--sidebar .ad__title { font-size: var(--t-lg); }
.ad--strip { padding: var(--s-4) var(--s-5); }
.ad--strip .ad__title { font-size: var(--t-base); font-family: var(--font-ui); margin: 0; }
.ad--strip .ad__label { position: static; display: block; margin-bottom: 2px; }

/* The surface an advert sits on is chosen by the clinic, not the advertiser,
   so a careful page cannot be broken by somebody else's brand colours. */
.ad--sand { background: var(--sand); }
.ad--dark {
    background: var(--forest); border-color: transparent; color: #E7EFE4;
}
.ad--dark .ad__title, .ad--dark .ad__eyebrow { color: #FFF; }
.ad--dark .ad__label, .ad--dark .muted { color: #B9C8B4; }
.ad--dark .btn--ghost { color: #FFF; border-color: rgba(255, 255, 255, .35); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--forest); color: #B9C8B4; padding-block: var(--s-10) var(--s-7); }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600;
             letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer a { color: #C8D6C3; text-decoration: none; font-size: var(--t-base); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--s-8); }
.footer__links { display: grid; gap: 10px; }
.footer__bottom {
    margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.12);
    display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
    font-size: var(--t-sm); color: #9FB09A;
}
.footer__brand img { height: 54px; width: auto; margin-bottom: var(--s-4); }
.social { display: flex; gap: var(--s-3); }
.social a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.08); color: #D5E0D1; transition: background .18s var(--ease);
}
.social a:hover { background: var(--green); color: #fff; }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- utilities */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.hide { display: none !important; }
@media (max-width: 860px) { .hide-mobile { display: none !important; } }
@media (min-width: 861px) { .hide-desktop { display: none !important; } }

/* Reveal on scroll. The hidden state is applied only once JavaScript has
   confirmed it can observe and un-hide, so a script failure can never leave
   content invisible. */
/* Shorter and shallower than before: 600ms with a 14px lift reads as a page
   still loading. 280ms and 8px reads as the page settling. */
.js-reveal .reveal { opacity: 0; transform: translateY(8px); transition: opacity .28s var(--ease), transform .28s var(--ease); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
/* Already painted when the script ran, so it must never animate at all. */
.js-reveal .reveal--instant { opacity: 1; transform: none; transition: none; }

/* Page transitions are defined once, at the end of this file. */

/* ------------------------------------------------------- goal selector */
.goal-picker { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--canvas); box-shadow: var(--sh-2); }
.goal-picker__tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    border-bottom: 1px solid var(--line); background: var(--canvas-alt);
    overflow-x: auto; scrollbar-width: none;
}
.goal-picker__tabs::-webkit-scrollbar { display: none; }
.goal-tab {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: var(--s-5) var(--s-3); border: 0; background: transparent;
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-500);
    border-bottom: 3px solid transparent; min-width: 132px;
    transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.goal-tab:hover { color: var(--green-800); background: var(--green-050); }
.goal-tab.is-active { color: var(--green-800); background: var(--canvas); border-bottom-color: var(--orange); }
.goal-tab__icon {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--green-050); color: var(--green-700); transition: background .18s var(--ease);
}
.goal-tab.is-active .goal-tab__icon { background: var(--orange-050); color: var(--orange-700); }
.goal-tab__label { line-height: 1.25; text-align: center; }
.goal-panel { display: none; grid-template-columns: 1.6fr .9fr; gap: var(--s-8); padding: var(--s-9) var(--s-8); }
.goal-panel.is-active { display: grid; animation: fadeUp .35s var(--ease); }
.goal-panel h3 { font-size: var(--t-2xl); }
.goal-panel__aside { display: grid; gap: var(--s-3); align-content: start; }
.goal-fact {
    display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5);
    background: var(--canvas-alt); border: 1px solid var(--line-soft); border-radius: var(--r-md);
    color: var(--green-700);
}
.goal-fact span { display: block; }
.goal-fact strong { color: var(--ink); font-size: var(--t-base); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
    .goal-panel { grid-template-columns: 1fr; padding: var(--s-7) var(--s-5); gap: var(--s-6); }
    .goal-tab { min-width: 118px; padding: var(--s-4) var(--s-2); font-size: var(--t-xs); }
}

/* ---------------------------------------------------------- lead magnet */
.magnet {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-9);
    align-items: center; background: var(--sand); border-radius: var(--r-xl); padding: var(--s-9);
}
.magnet__form { box-shadow: var(--sh-3); }
@media (max-width: 900px) { .magnet { grid-template-columns: 1fr; padding: var(--s-6); gap: var(--s-6); } }

.tick-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: 10px; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-base); color: var(--ink-700); }
.tick-list .icon { color: var(--green); flex: none; margin-top: 4px; }

/* -------------------------------------------------------------- misc */
.icon-badge { display: grid; place-items: center; }
.breadcrumbs { font-size: var(--t-sm); color: var(--ink-500); padding-block: var(--s-5); }
.breadcrumbs a { color: var(--ink-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--green-700); }
.breadcrumbs span { margin-inline: 8px; opacity: .5; }

.page-head { padding-block: var(--s-9) var(--s-8); background: var(--canvas-alt); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head .lede { margin-bottom: 0; }

.prose { font-size: var(--t-md); line-height: 1.75; color: var(--ink-700); }
.prose h2 { font-size: var(--t-2xl); margin-top: 1.8em; }
.prose h3 { font-size: var(--t-xl); margin-top: 1.6em; }
.prose p { margin-bottom: 1.1em; }
.prose ul, .prose ol { margin-bottom: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--r-md); margin-block: 1.6em; }
.prose blockquote {
    margin: 1.8em 0; padding: var(--s-5) var(--s-6); border-left: 3px solid var(--orange);
    background: var(--orange-050); border-radius: 0 var(--r-md) var(--r-md) 0;
    font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink-800);
}
.prose a { font-weight: 500; }

/* ------------------------------------------------------------- accordions */
.faq {
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--canvas); margin-bottom: var(--s-3); overflow: hidden;
}
.faq[open] { border-color: var(--green-300); box-shadow: var(--sh-2); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5); cursor: pointer; font-weight: 600; color: var(--ink);
    list-style: none; font-size: var(--t-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-800); }
.faq summary .icon { flex: none; color: var(--ink-400); transition: transform .2s var(--ease); }
.faq[open] summary .icon { transform: rotate(180deg); color: var(--green); }
.faq__body { padding: 0 var(--s-5) var(--s-5); color: var(--ink-700); font-size: var(--t-base); line-height: 1.7; }

/* ------------------------------------------------------- sidebar category */
.side-cat {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: 9px var(--s-3); border-radius: var(--r-sm); text-decoration: none;
    color: var(--ink-700); font-size: var(--t-base);
}
.side-cat:hover { background: var(--green-050); color: var(--green-800); }
.side-cat.is-active { background: var(--green-050); color: var(--green-800); font-weight: 600; }

/* ==========================================================================
   Hero carousel
   Slides cross-fade with a slow drift. Without JavaScript the first slide
   simply stays in place, so the hero never renders empty.
   ========================================================================== */
.carousel { position: relative; }
.carousel__frame {
    /* Matches .hero__media img - see the note there on why 3:2. */
    position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-xl);
    overflow: hidden; box-shadow: var(--sh-4); background: var(--sand);
    isolation: isolate;
}
.carousel__slide {
    position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
    transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Which part of a picture survives the crop. A wide group shot in a narrower
   box loses its edges, and which edge matters is a property of the photograph,
   not of the layout - so it is set per slide in the admin. */
.carousel__slide img.focus-left   { object-position: 20% center; }
.carousel__slide img.focus-right  { object-position: 80% center; }
.carousel__slide img.focus-top    { object-position: center 20%; }
.carousel__slide img.focus-bottom { object-position: center 80%; }
/* A very slight drift, starting at the picture's true size.
   It used to start at scale(1.015) and run to scale(1.075) and hold - so the
   hero was never shown unzoomed, and finished 7.5% enlarged on top of an
   already heavy crop. That is most of what "too zoomed in" meant. */
.carousel__slide.is-active img { animation: heroDrift 14s var(--ease) forwards; }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.025); } }

.carousel__controls {
    position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px; z-index: 3;
    background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px) saturate(150%);
    border-radius: var(--r-pill); padding: 5px 7px; box-shadow: var(--sh-2);
}
.carousel__arrow {
    width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
    display: grid; place-items: center; color: var(--ink-700);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.carousel__arrow:hover { background: var(--green-050); color: var(--green-800); }
.carousel__dots { display: flex; align-items: center; gap: 5px; }
.carousel__dot {
    position: relative; width: 26px; height: 4px; padding: 0; border: 0;
    border-radius: 2px; background: var(--line); overflow: hidden;
    transition: width .35s var(--ease), background .2s var(--ease);
}
.carousel__dot:hover { background: var(--green-300); }
.carousel__dot.is-active { width: 42px; background: var(--green-100); }
.carousel__dot-fill {
    position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green); border-radius: 2px;
}
.carousel__dot.is-active .carousel__dot-fill { width: 100%; transform-origin: left; }
.carousel.is-playing .carousel__dot.is-active .carousel__dot-fill {
    animation: dotFill linear forwards; animation-duration: var(--slide-ms, 6000ms);
}
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The caption card cross-fades in step with the slide. */
.hero__card { display: grid; }
.hero__card-item {
    grid-area: 1 / 1; display: flex; gap: var(--s-4); align-items: center;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.hero__card-item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }

@media (max-width: 1024px) {
    .carousel__frame { aspect-ratio: 16 / 11; }
}
@media (max-width: 720px) {
    .carousel__controls { bottom: var(--s-3); }
    .carousel__arrow { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .carousel__slide.is-active img { animation: none; }
    .carousel.is-playing .carousel__dot.is-active .carousel__dot-fill { animation: none; }
}

/* ==========================================================================
   Motion layer - prototype-style page transitions and micro-interactions.
   Deliberately restrained: short durations, no bounce, and every rule is
   switched off under prefers-reduced-motion.
   ========================================================================== */
/* Page transitions are defined once, at the end of this file. */


/* ---------------------------------------------------- micro-interactions */
.nav__link { transition: color .15s var(--ease), background .15s var(--ease); }
.nav__link.is-active::after { animation: navUnderline .35s var(--ease) both; transform-origin: left; }
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.btn { position: relative; overflow: hidden; }
.btn::after {
    content: ''; position: absolute; inset: 0; background: currentColor;
    opacity: 0; transition: opacity .2s var(--ease); pointer-events: none;
}
.btn:active::after { opacity: .08; transition-duration: 0s; }

.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy::before {
    content: ''; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    border-radius: 50%; animation: spin .6s linear infinite;
}
.btn--ghost.is-busy::before, .btn--light.is-busy::before {
    border-color: rgba(16, 20, 15, .25); border-top-color: var(--green);
}
@keyframes spin { to { transform: rotate(360deg); } }

.card--hover, .service-card, .article-card, .person { will-change: transform; }
.service-card:active, .card--hover:active { transform: translateY(-1px); }

.link-arrow { position: relative; }
.link-arrow::after {
    content: ''; position: absolute; left: 0; right: 22px; bottom: -3px; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .28s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }

.input, .select, .textarea { transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); }
.pill, .choice, .side-cat, .tab { transition: all .18s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .nav__link.is-active::after { animation: none; }
    .link-arrow::after { transition: none; }
}

/* ==========================================================================
   Booking journey
   ========================================================================== */
.bk { padding-block: var(--s-8) var(--s-11); }
/* minmax(0,...) matters here: the scrolling date strip has a wide min-content
   size, and a bare 1fr would let it push the summary column off screen. */
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--s-9); align-items: start; }
.bk-grid > * { min-width: 0; }
.bk-heading { font-size: var(--t-3xl); margin-bottom: var(--s-3); }
@media (max-width: 980px) {
    .bk-grid { grid-template-columns: 1fr; gap: var(--s-7); }
    .bk-summary { order: -1; }
}

/* ------------------------------------------------------------ step rail */
.bk-steps { margin-bottom: var(--s-8); }
.bk-steps ol {
    list-style: none; margin: 0 0 var(--s-4); padding: 0;
    display: flex; gap: var(--s-5); overflow-x: auto; scrollbar-width: none;
}
.bk-steps ol::-webkit-scrollbar { display: none; }
.bk-step { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: var(--t-sm); color: var(--ink-400); }
.bk-step__dot {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--line-soft); color: var(--ink-400); font-size: var(--t-xs); font-weight: 700; flex: none;
    border: 1.5px solid transparent; transition: all .25s var(--ease);
}
.bk-step.is-done { color: var(--green-800); }
.bk-step.is-done .bk-step__dot { background: var(--green-100); color: var(--green-800); }
.bk-step.is-now { color: var(--ink); font-weight: 600; }
.bk-step.is-now .bk-step__dot { background: var(--green); color: #fff; border-color: var(--green-100); box-shadow: 0 0 0 4px var(--green-050); }
.bk-steps__bar { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.bk-steps__bar span { display: block; height: 100%; background: var(--green); border-radius: 2px; transition: width .45s var(--ease); }
@media (max-width: 720px) {
    .bk-step__label { display: none; }
    .bk-step.is-now .bk-step__label { display: inline; }
    .bk-steps ol { gap: var(--s-3); }
}

/* --------------------------------------------------------- option cards */
.bk-options { display: grid; gap: var(--s-3); }
.bk-option {
    position: relative; display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: var(--canvas); cursor: pointer; transition: all .18s var(--ease);
}
.bk-option:hover { border-color: var(--green-300); background: var(--green-050); }
.bk-option input { position: absolute; opacity: 0; pointer-events: none; }
.bk-option:has(input:checked) {
    border-color: var(--green); background: var(--green-050);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
}
.bk-option:has(input:checked)::after {
    content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--green);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
    background-color: var(--green);
}
.bk-option:has(input:checked)::before {
    content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--green);
}
.bk-option__icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: var(--green-050); color: var(--green-700); flex: none;
}
.bk-option__avatar {
    width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none;
    background: var(--green-050); color: var(--green-800); display: grid; place-items: center; font-weight: 600;
}
.bk-option__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bk-option__body { display: grid; gap: 3px; min-width: 0; }
.bk-option__title { font-weight: 600; color: var(--ink); }
.bk-option__sub { font-size: var(--t-sm); color: var(--ink-500); }
.bk-option__meta { font-size: var(--t-xs); color: var(--ink-400); display: flex; align-items: center; gap: 5px; }
.bk-option__price { margin-left: auto; padding-left: var(--s-4); font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 560px) {
    .bk-option { flex-wrap: wrap; }
    .bk-option__price { margin-left: 62px; padding-left: 0; }
}

.bk-fieldset { border: 0; padding: 0; margin: 0; }
.bk-fieldset legend { padding: 0; margin-bottom: var(--s-3); }
.bk-pick-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 560px) { .bk-pick-2 { grid-template-columns: 1fr; } }

.bk-actions {
    display: flex; gap: var(--s-3); align-items: center; justify-content: space-between;
    margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-soft);
}
@media (max-width: 560px) {
    .bk-actions { flex-direction: column-reverse; }
    .bk-actions .btn { width: 100%; }
}

/* ------------------------------------------------------- dates and slots */
.bk-dates {
    display: flex; gap: var(--s-2); width: 100%; min-width: 0; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: thin;
}
.bk-date {
    flex: 0 0 auto; width: 84px; padding: var(--s-3) 6px; border: 1.5px solid var(--line);
    border-radius: var(--r-md); background: var(--canvas); text-align: center; display: grid; gap: 1px;
    transition: all .18s var(--ease);
}
.bk-date:hover { border-color: var(--green-300); background: var(--green-050); }
.bk-date.is-active { border-color: var(--green); background: var(--green-050); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent); }
.bk-date__dow { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.bk-date__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.bk-date__mon { font-size: var(--t-xs); color: var(--ink-500); }
.bk-date__count { font-size: 10px; color: var(--green-700); font-weight: 600; margin-top: 3px; }
.bk-date.is-active .bk-date__dow, .bk-date.is-active .bk-date__num { color: var(--green-800); }

.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-2); }
.bk-slot {
    padding: 12px 8px; border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: var(--canvas); font-size: var(--t-base); font-weight: 500; color: var(--ink-700);
    transition: all .15s var(--ease);
}
.bk-slot:hover { border-color: var(--green); color: var(--green-800); background: var(--green-050); }
.bk-slot.is-active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

/* -------------------------------------------------------------- summary */
.bk-summary { position: sticky; top: 96px; display: grid; gap: var(--s-4); }
@media (max-width: 980px) { .bk-summary { position: static; } }
.bk-sum-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.bk-sum-row:last-of-type { border-bottom: 0; }
.bk-sum-row__k { color: var(--ink-500); display: flex; align-items: center; gap: 7px; flex: none; }
.bk-sum-row__v { text-align: right; font-weight: 500; color: var(--ink); }
.bk-sum-total {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
    margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1.5px solid var(--line);
}
.bk-sum-total strong { font-family: var(--font-display); font-size: var(--t-xl); color: var(--green-800); }
.bk-assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bk-assure li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-500); }
.bk-assure .icon { color: var(--green); flex: none; margin-top: 2px; }

/* -------------------------------------------------------------- payment */
.bk-method-panel {
    margin: calc(var(--s-3) * -1 + 2px) 0 0; padding: var(--s-5);
    border: 1.5px solid var(--green-100); border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md); background: var(--green-050);
}
.bk-bank { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-5); font-size: var(--t-sm); }
.bk-bank dt { color: var(--ink-500); }
.bk-bank dd { margin: 0; font-weight: 600; color: var(--ink); }
.bk-secure {
    display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-6);
    padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
    background: var(--canvas-alt); border: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-500);
}
.bk-secure .icon { color: var(--green); flex: none; margin-top: 1px; }

.bk-awaiting { text-align: center; padding: var(--s-9) var(--s-6); }
.bk-awaiting__spinner { width: 54px; height: 54px; margin: 0 auto var(--s-5); position: relative; }
.bk-awaiting__spinner span {
    position: absolute; inset: 0; border: 3px solid var(--green-100);
    border-top-color: var(--green); border-radius: 50%; animation: spin .9s linear infinite;
}
.bk-awaiting.is-failed .bk-awaiting__spinner span { border-color: var(--bad-bg); border-top-color: var(--bad); animation: none; }

/* --------------------------------------------------------- confirmation */
.bk-confirm { max-width: 760px; margin-inline: auto; text-align: center; }
.bk-confirm__badge {
    width: 78px; height: 78px; margin: 0 auto var(--s-5); border-radius: 50%;
    display: grid; place-items: center; background: var(--ok-bg); color: var(--ok);
    animation: popIn .5s var(--ease) both;
}
@keyframes popIn { from { transform: scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-confirm__badge { animation: none; } }

.bk-ticket { margin-top: var(--s-8); text-align: left; overflow: hidden; }
.bk-ticket__main { display: grid; grid-template-columns: 168px 1fr; }
.bk-ticket__when {
    background: var(--forest); color: #fff; padding: var(--s-6) var(--s-5);
    display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center;
}
.bk-ticket__dow { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--green-300); }
.bk-ticket__day { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; }
.bk-ticket__mon { font-size: var(--t-sm); color: #C8D6C3; }
.bk-ticket__time { margin-top: var(--s-3); font-weight: 600; font-size: var(--t-md); }
.bk-ticket__detail { padding: var(--s-6); }
.bk-dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px var(--s-4); margin: 0; font-size: var(--t-sm); }
.bk-dl dt { color: var(--ink-500); }
.bk-dl dd { margin: 0; color: var(--ink); }
.bk-ticket__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 680px) {
    .bk-ticket__main { grid-template-columns: 1fr; }
    .bk-ticket__when { padding: var(--s-5); }
    .bk-ticket__day { font-size: 2.2rem; }
    .bk-dl { grid-template-columns: 1fr; gap: 2px var(--s-4); }
    .bk-dl dt { margin-top: 10px; font-size: var(--t-xs); }
}

.bk-next { margin-top: var(--s-9); text-align: left; }
.bk-next__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.bk-next__list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.bk-next__list li > span {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: var(--green-050); color: var(--green-700);
}
.bk-next__list strong { display: block; font-size: var(--t-base); }
.bk-next__list p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-500); }

/* -------------------------------------------------------------- receipt */
.receipt { max-width: 760px; margin: var(--s-8) auto; padding-inline: var(--s-4); }
.receipt__sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-9); }
.receipt__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-6); flex-wrap: wrap; }
.receipt__head img { height: 52px; width: auto; }
.receipt__meta { text-align: right; }
.receipt__meta h1 { font-size: var(--t-2xl); margin: 0 0 4px; }
.receipt__meta p { margin: 0; font-size: var(--t-sm); }
.receipt__parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin: var(--s-8) 0; }
.receipt__parties h2 { font-family: var(--font-body); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px; }
.receipt__parties p { font-size: var(--t-sm); line-height: 1.7; margin: 0; }
.receipt__table { width: 100%; border-collapse: collapse; margin-top: var(--s-6); font-size: var(--t-sm); }
.receipt__table th { text-align: left; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); padding: 10px 0; border-bottom: 1.5px solid var(--line); }
.receipt__table td { padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.receipt__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.receipt__table tfoot td { border-bottom: 0; padding: 7px 0; }
.receipt__total td { border-top: 1.5px solid var(--line); padding-top: var(--s-4); font-size: var(--t-lg); font-weight: 600; color: var(--green-800); }
.receipt__payment { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); margin-top: var(--s-7); padding: var(--s-5); background: var(--canvas-alt); border-radius: var(--r-md); }
.receipt__payment span { display: block; font-size: var(--t-xs); color: var(--ink-500); margin-bottom: 2px; }
.receipt__payment strong { font-size: var(--t-sm); }
.receipt__foot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); text-align: center; }
.receipt__foot p { margin: 0 0 4px; font-size: var(--t-sm); }
.receipt__actions { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
@media (max-width: 600px) { .receipt__parties { grid-template-columns: 1fr; } .receipt__sheet { padding: var(--s-6); } }
@media print {
    .receipt { margin: 0; padding: 0; max-width: none; }
    .receipt__sheet { border: 0; border-radius: 0; padding: 0; }
    body { background: #fff; }
}

/* The selected-option tick: green disc (::before) with a white check (::after). */
.bk-option:has(input:checked)::after { background-color: #fff; }

/* ==========================================================================
   Page transitions - the only place they are defined.

   Pass one cross-faded the whole document, which exposed the background for a
   few frames and read as a white flash. Pass two froze the chrome - top bar,
   header, footer - so only the page body animated. That fixed the flash and
   introduced a worse problem.

   Pass two ran the outgoing body for 190ms and the incoming body for 360ms
   starting at 20ms, and sent them in opposite directions: the old one lifted
   6px while the new one rose from 12px below. So for 170ms BOTH bodies were
   painted, each half transparent, offset from each other - two copies of the
   page sliding through one another. Worst between pages of different lengths,
   which is why clicking a card into a long page looked the messiest.

   The rule here is simply that two pages are never on screen at once. The
   outgoing body is gone on the first frame; the incoming one settles in over
   200ms against the canvas, which is the site's own background colour and not
   white, with the chrome held still throughout. One thing moves, once.
   ========================================================================== */
html { background: var(--canvas); }

/* Opt in to cross-document transitions. Chrome and Edge honour this; every
   other browser ignores it and gets the ordinary instant page swap. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* The console sidebar does not move between pages, so naming it keeps it
   visually still while only the content area changes. */
.side { view-transition-name: console-side; }

.topbar { view-transition-name: site-topbar; }
.header { view-transition-name: site-header; }
.footer { view-transition-name: site-footer; }
main    { view-transition-name: page-body; }

/* Chrome: swap instantly, never animate, never move. */
::view-transition-group(site-topbar),
::view-transition-group(site-header),
::view-transition-group(site-footer) { animation-duration: 0.001s; }

::view-transition-old(site-topbar),
::view-transition-old(site-header),
::view-transition-old(site-footer) { animation: none; opacity: 0; }

::view-transition-new(site-topbar),
::view-transition-new(site-header),
::view-transition-new(site-footer) { animation: none; opacity: 1; }

/* The root holds whatever is left over. Swapping it instantly removes the dip
   to white that the default cross-fade produced. */
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: none; opacity: 1; }

/*
 * The body box itself must not be animated either.
 *
 * By default the browser morphs each group's geometry between the old and the
 * new snapshot - so going from a short page to a long one stretched the whole
 * content area over 250ms. That is a second, slower movement underneath the
 * fade, and between pages of different lengths it is the one that reads as the
 * page shifting about. The new body simply appears at its own size.
 */
::view-transition-group(page-body),
::view-transition-group(root) { animation-duration: 0.001s; }

/* The outgoing body does not animate. Any fade on it, however short, means a
   window in which the incoming body is translucent and the old page shows
   through - which is the ghosting this is here to prevent. */
::view-transition-old(page-body) { animation: none; opacity: 0; }

/* Only the incoming body moves, and only forwards. */
::view-transition-new(page-body) { animation: nnsPageIn 0.2s cubic-bezier(.22, .61, .36, 1) both; }

@keyframes nnsPageIn { from { opacity: 0; transform: translateY(6px); } }

/*
 * The same settle for browsers with no view transitions, applied by opt-in.
 *
 * This used to read `html:not(.has-vt)`, which meant any layout that forgot to
 * set the class got the fallback animation ON TOP of the real transition -
 * two entrances at once. Four of the six layouts had forgotten it. Opting in
 * instead means a layout that says nothing simply gets no animation, which is
 * a dull failure rather than a broken one.
 */
@media (prefers-reduced-motion: no-preference) {
    html.no-vt main { animation: nnsPageIn 0.28s cubic-bezier(.22, .61, .36, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(page-body) { animation: none; }
    html.no-vt main { animation: none; }
}

/* The booking and receipt surfaces use the same treatment. */
.bk, .receipt { view-transition-name: none; }

/* ==========================================================================
   Two-column splits.

   These were previously written as inline grid-template-columns, which a media
   query cannot override - so on a phone the second column was simply clipped
   off the right-hand edge. Expressed as classes they collapse properly.

   minmax(0, ...) on both tracks so wide children (tables, scrolling strips,
   long words) shrink instead of forcing the layout wider than the viewport.
   ========================================================================== */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--s-5);
    align-items: start;
}
.split--even    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--content { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
.split--form    { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split--aside   { grid-template-columns: minmax(0, 1fr) 300px; }
.split--media   { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
.split--flip    { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.split--wide-gap { gap: var(--s-9); }
.split--centre  { align-items: center; }

@media (max-width: 980px) {
    .split, .split--even, .split--content, .split--form,
    .split--aside, .split--media, .split--flip {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-6);
    }
    /* On one column the summary/aside belongs under the main content, except
       where it is the page's primary context. */
    .split--aside-first > :last-child { order: -1; }
}

/* ==========================================================================
   Intake questionnaire + account step
   Added with the structured pre-consultation form, the account wall and
   signed-in pricing.
   ========================================================================== */

/* --- the questionnaire -------------------------------------------------- */
.intake {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--canvas-alt);
    overflow: hidden;
}
.intake__head {
    padding: var(--s-5) var(--s-5) var(--s-4);
    background: var(--green-050);
    border-bottom: 1px solid var(--line);
}
.intake__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-2);
    font-size: var(--t-lg);
    font-family: var(--font-display);
    color: var(--green-900);
}
.intake__title svg { color: var(--green); flex: none; }
.intake__sub { margin: 0; font-size: var(--t-sm); color: var(--ink-500); line-height: 1.55; }
.intake__private {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    color: var(--green-700);
    font-weight: 600;
    white-space: nowrap;
}

.intake__group { border-top: 1px solid var(--line); }
.intake__group:first-of-type { border-top: 0; }

.intake__summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--t-fast);
}
.intake__summary::-webkit-details-marker { display: none; }
.intake__summary:hover { background: var(--green-050); }
.intake__summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.intake__summary > svg {
    margin-left: auto;
    flex: none;
    color: var(--ink-400);
    transition: transform var(--t-fast);
}
.intake__group[open] > .intake__summary > svg { transform: rotate(180deg); }
.intake__legend { font-weight: 650; color: var(--ink); }
.intake__note { font-size: var(--t-sm); color: var(--ink-500); }

.intake__body {
    padding: 0 var(--s-5) var(--s-5);
    display: grid;
    gap: var(--s-4);
}
.intake__body .field { margin-bottom: 0; }

/* Checkbox groups read as tappable chips: far faster on a phone than a
   column of tick boxes, and it keeps a long list to a few lines. */
.chip-set { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-check { position: relative; display: inline-flex; }
.chip-check input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.chip-check span {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--canvas);
    font-size: var(--t-sm);
    color: var(--ink-700);
    transition: all var(--t-fast);
}
.chip-check input:hover + span { border-color: var(--green-300); }
.chip-check input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.chip-check input:checked + span {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-weight: 600;
}
.intake-multi { border: 0; padding: 0; margin: 0; }
.intake-multi > .field__label { margin-bottom: var(--s-2); }

/* --- the account step --------------------------------------------------- */
.auth-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--line-soft);
    border-radius: var(--r-pill);
}
.auth-switch__btn {
    flex: 1;
    padding: 10px var(--s-4);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    transition: all var(--t-fast);
}
.auth-switch__btn.is-active {
    background: var(--canvas);
    color: var(--green-900);
    box-shadow: 0 1px 3px rgba(16, 20, 15, .1);
}
.auth-pane { display: none; }
.auth-pane.is-active { display: block; }

.bk-identity {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--canvas-alt);
}
.bk-identity__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-900);
    font-weight: 700;
}
.bk-identity > div { display: flex; flex-direction: column; min-width: 0; }
.bk-identity > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-identity > a { margin-left: auto; flex: none; }

.bk-held {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4);
    border: 1px dashed var(--green-300);
    border-radius: var(--r-md);
    background: var(--green-050);
    font-size: var(--t-sm);
    color: var(--green-900);
    line-height: 1.55;
}
.bk-held svg { flex: none; margin-top: 2px; color: var(--green); }

/* --- payment honesty ---------------------------------------------------- */
.bk-method-panel--warn { padding-top: var(--s-2); }
.bk-holdnote {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: var(--s-3) 0 0;
    font-size: var(--t-sm);
    color: var(--ink-500);
    line-height: 1.5;
}
.bk-holdnote svg { flex: none; margin-top: 2px; }

/* --- prices behind the sign-in --------------------------------------- */
.service-card__price--locked {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-500);
    text-decoration: none;
}
a.service-card__price--locked:hover { color: var(--green-700); }
.bk-sum-total--locked strong { font-size: var(--t-sm); font-weight: 600; color: var(--ink-500); }
.bk-sum-total--locked span { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 640px) {
    .intake__head,
    .intake__summary { padding-left: var(--s-4); padding-right: var(--s-4); }
    .intake__body { padding-left: var(--s-4); padding-right: var(--s-4); }
    .intake__summary { flex-wrap: wrap; }
    .intake__note { flex-basis: 100%; }
    .intake__summary > svg { margin-left: auto; }
}

/* ==========================================================================
   BMI calculator
   ========================================================================== */
.bmi-form .panel__body { padding: var(--s-6); }
.bmi-more > summary {
    cursor: pointer;
    padding: var(--s-2) 0;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--green-700);
    list-style: none;
}
.bmi-more > summary::-webkit-details-marker { display: none; }
.bmi-more > summary::before { content: "+ "; font-weight: 700; }
.bmi-more[open] > summary::before { content: "\2212  "; }

.bmi-result {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--canvas);
    padding: var(--s-6);
    box-shadow: 0 2px 14px rgba(16, 20, 15, .05);
}
.bmi-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.bmi-result__label {
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.bmi-result__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    color: var(--green-900);
    font-variant-numeric: tabular-nums;
}
.bmi-result__cat { font-size: var(--t-sm); padding: 7px 15px; }

.bmi-scale { margin: var(--s-6) 0 var(--s-5); }
.bmi-scale__bar {
    position: relative;
    display: flex;
    height: 14px;
    border-radius: var(--r-pill);
    overflow: hidden;
}
.bmi-scale__seg { display: block; }
.bmi-scale__pin {
    position: absolute;
    top: -5px;
    width: 4px;
    height: 24px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--canvas);
}
.bmi-scale__ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: var(--t-xs);
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
}

.bmi-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.bmi-fact {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--canvas-alt);
}
.bmi-fact__k {
    display: block;
    font-size: var(--t-xs);
    color: var(--ink-500);
    margin-bottom: 3px;
    line-height: 1.35;
}
.bmi-fact strong {
    display: block;
    font-size: var(--t-lg);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.bmi-fact .pill { font-size: var(--t-xs); vertical-align: middle; margin-left: 4px; }

.bmi-result__msg {
    margin: 0 0 var(--s-5);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--ink-700);
}

.bmi-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-top: var(--s-5);
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: var(--green-050);
    border: 1px solid var(--green-100);
}
.bmi-cta strong { display: block; color: var(--green-900); margin-bottom: 3px; }
.bmi-cta span   { display: block; font-size: var(--t-sm); color: var(--ink-700); line-height: 1.5; max-width: 46ch; }

.table tr.is-you td { background: var(--ok-bg); font-weight: 650; }

.tick-list--plain { list-style: none; padding: 0; margin: 0; }
.tick-list--plain li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--ink-700);
}
.tick-list--plain li:last-child { border-bottom: 0; }

.mini-link {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
}
.mini-link:last-child { border-bottom: 0; }
.mini-link svg { flex: none; margin-top: 2px; color: var(--green); }
.mini-link strong { display: block; font-size: var(--t-sm); color: var(--ink); }
.mini-link em     { display: block; font-size: var(--t-xs); color: var(--ink-500); font-style: normal; line-height: 1.45; }
.mini-link:hover strong { color: var(--green-700); }

/* ==========================================================================
   Page hero: photograph beside the words
   ========================================================================== */
.phero {
    padding-block: var(--s-9) var(--s-8);
    background: linear-gradient(180deg, var(--green-050) 0%, var(--canvas) 100%);
    border-bottom: 1px solid var(--line-soft);
}
.phero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(var(--s-6), 5vw, var(--s-10));
    align-items: center;
}
.phero__copy h1 {
    margin: 0 0 var(--s-4);
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.1;
}
.phero__copy .lede { margin-bottom: 0; max-width: 54ch; }
.phero__copy .breadcrumbs { margin-bottom: var(--s-4); }

.phero__media {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 7 / 5;
    background: var(--sand);
    box-shadow: 0 18px 46px -22px rgba(20, 48, 26, .45);
}
.phero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* A whisper of brand colour over the photograph, so every hero sits in the
   same family whichever picture the clinic loads. */
.phero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(72, 132, 55, .12), rgba(20, 48, 26, .04) 55%, transparent);
    pointer-events: none;
}

.phero--plain .phero__inner { grid-template-columns: minmax(0, 1fr); }
.phero--plain .phero__copy  { max-width: 70ch; }

/* Dark variant, used on corporate wellness. */
.phero--dark {
    background: var(--forest);
    border-bottom: 0;
}
.phero--dark h1,
.phero--dark .phero__copy strong { color: #fff; }
.phero--dark .lede { color: #C6D4C1; }
.phero--dark .eyebrow { color: var(--green-300); }
.phero--dark .breadcrumbs,
.phero--dark .breadcrumbs a { color: #9DB098; }
.phero--dark .phero__media { box-shadow: 0 22px 56px -24px rgba(0, 0, 0, .7); }

@media (max-width: 900px) {
    .phero { padding-block: var(--s-7) var(--s-6); }
    .phero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
    .phero__media { aspect-ratio: 16 / 10; order: -1; }
}

/* Curated "see also" block and external-link marker. */
.see-also {
    margin-top: var(--s-8);
    padding: var(--s-5) var(--s-6);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--green-050);
}
.see-also__title {
    margin: 0 0 var(--s-3);
    font-size: var(--t-base);
    font-family: var(--font-display);
    color: var(--green-900);
}
.see-also ul { margin: 0; padding: 0; list-style: none; }
.see-also li { padding: 6px 0; }
.see-also li a { font-weight: 600; }
.see-also li span { display: block; font-size: var(--t-sm); color: var(--ink-500); }

.prose a.ext-link::after {
    content: "\2197";
    display: inline-block;
    margin-left: 2px;
    font-size: .85em;
    opacity: .65;
}

/* --------------------------------------------------------------------------
   Hero carousel: keep the caption card clear of the controls.

   The caption card and the slide controls were both laid out over the bottom
   of the image, and between roughly 720px and 1200px the frame is too narrow
   to hold both: the controls (z-index 3) sat straight on top of the caption
   text. Two rules fix it for good.

   1. Below 1200px the card drops out of the image and sits under it. There is
      simply not enough width for a 290px card and a 210px control pill side
      by side once the frame is under about 500px.
   2. Above 1200px the card keeps its overlapping position bottom-left, so the
      controls move bottom-right where they can never reach it.
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) {
    .carousel__controls {
        left: auto;
        right: var(--s-4);
        transform: none;
    }
}

@media (max-width: 1200px) {
    .hero__card {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: var(--s-5);
        max-width: none;
        padding: var(--s-4) var(--s-5);
    }
    /* Each slide's caption is a grid cell, so the tallest one sets the height
       and the card does not jump as the carousel rotates. */
    .hero__card-item { align-items: flex-start; }
}

/* ==========================================================================
   Promotional banners, popups and article prose furniture
   ========================================================================== */

/* --- banners ------------------------------------------------------------ */
.promo {
    overflow: hidden;
    transition: height .24s var(--ease), opacity .24s var(--ease);
}
.promo.is-going { height: 0 !important; opacity: 0; }
.promo__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-block: 11px;
    min-height: 46px;
}
.promo__img { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.promo__text {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}
.promo__text strong { font-weight: 650; }
.promo__cta {
    margin-left: auto;
    flex: none;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s var(--ease);
}
.promo__close {
    flex: none;
    width: 28px; height: 28px;
    border: 0; background: transparent;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    opacity: .65;
    border-radius: 50%;
}
.promo__close:hover { opacity: 1; }

.promo--brand  { background: var(--green);     color: #fff; }
.promo--dark   { background: var(--forest);    color: #fff; }
.promo--accent { background: var(--orange);    color: #fff; }
.promo--soft   { background: var(--sand);      color: var(--ink); }

.promo--brand .promo__cta,
.promo--dark .promo__cta,
.promo--accent .promo__cta { background: rgba(255, 255, 255, .95); color: var(--green-900); }
.promo--brand .promo__cta:hover,
.promo--dark .promo__cta:hover,
.promo--accent .promo__cta:hover { background: #fff; }
.promo--soft .promo__cta { background: var(--green); color: #fff; }
.promo--brand .promo__close,
.promo--dark .promo__close,
.promo--accent .promo__close { color: #fff; }

/* --- popups ------------------------------------------------------------- */
.popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--s-5);
    opacity: 0;
    transition: opacity .24s var(--ease);
}
.popup.is-open { opacity: 1; }
.popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 15, .55);
    backdrop-filter: blur(3px);
}
.popup__panel {
    position: relative;
    width: min(460px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--canvas);
    border-radius: var(--r-lg);
    box-shadow: 0 28px 70px -20px rgba(16, 20, 15, .55);
    transform: translateY(14px) scale(.98);
    transition: transform .28s var(--ease);
}
.popup.is-open .popup__panel { transform: none; }
.popup__close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    font-size: 22px;
    line-height: 1;
    color: var(--ink-700);
    cursor: pointer;
}
.popup__close:hover { background: #fff; color: var(--ink); }
.popup__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.popup__body { padding: var(--s-6); }
.popup__title {
    margin: 0 0 var(--s-3);
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    line-height: 1.15;
    color: var(--green-900);
}
.popup__text { margin: 0 0 var(--s-5); color: var(--ink-700); line-height: 1.6; }
.popup__form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.popup__form .input { flex: 1 1 190px; margin: 0; }
.popup__small { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--ink-500); }

@media (prefers-reduced-motion: reduce) {
    .popup, .popup__panel, .promo { transition: none; }
}

/* --- article prose extras ---------------------------------------------- */
.callout {
    margin: var(--s-6) 0;
    padding: var(--s-5);
    border-radius: var(--r-md);
    border-left: 3px solid var(--green);
    background: var(--green-050);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child  { margin-bottom: 0; }
.callout--tip     { border-left-color: var(--green);  background: var(--green-050); }
.callout--note    { border-left-color: var(--ink-300); background: var(--canvas-alt); }
.callout--warning { border-left-color: var(--warn);   background: var(--warn-bg); }
.callout--key     { border-left-color: var(--orange); background: var(--orange-050); }

.prose-figure { margin: var(--s-7) 0; }
.prose-figure img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.prose-figure figcaption {
    margin-top: var(--s-3);
    font-size: var(--t-sm);
    color: var(--ink-500);
    text-align: center;
}
.prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--line-soft);
    font-size: .9em;
}
.prose h2, .prose h3 { scroll-margin-top: 90px; }

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

@media (max-width: 720px) {
    .promo__inner { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
    .promo__cta { margin-left: 0; }
    .promo__close { position: absolute; top: 6px; right: 10px; }
    .promo { position: relative; }
    .popup { padding: var(--s-3); align-items: end; }
    .popup__panel { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* --- testimonial collection --------------------------------------------- */
.rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating__star { position: relative; cursor: pointer; margin: 0; }
.rating__star input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.rating__star > span:first-of-type { color: var(--line); transition: color .12s var(--ease); display: block; }
/* Reversed order means a checked star and everything after it in the DOM
   (visually to its left) light up together - the chosen one through :has(),
   the hovered one through the plain sibling combinator. */
.rating__star input:checked ~ span:first-of-type,
.rating__star:has(input:checked) ~ .rating__star > span:first-of-type,
.rating__star:hover > span:first-of-type,
.rating__star:hover ~ .rating__star > span:first-of-type { color: var(--orange); }
.rating__star input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.success-mark {
    display: inline-grid;
    place-items: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--ok-bg);
    color: var(--ok);
}

/* --------------------------------------------------------------- partners */
.partners {
    list-style: none; margin: var(--s-7) 0 0; padding: 0;
    display: grid; gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: center;
}
.partners__item { display: grid; place-items: center; }
.partners__item a, .partners__item > span {
    display: grid; place-items: center; width: 100%; min-height: 72px;
    padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-md);
    background: var(--canvas);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.partners__item a:hover { border-color: var(--green-300); transform: translateY(-2px); }
.partners__item img {
    max-width: 100%; max-height: 52px; width: auto; height: auto;
    object-fit: contain;
    /* Logos arrive in every colour. Muted until hovered keeps the row calm
       without stripping the brand entirely. */
    filter: grayscale(1); opacity: .72; transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.partners__item a:hover img { filter: none; opacity: 1; }
.partners__name { font-weight: 600; color: var(--ink-700); font-size: var(--t-sm); text-align: center; }

/* ---------------------------------------------- a category with few services */
/*
 * Four of five service categories here hold exactly one service, and a
 * four-column grid gave each of them one card and three empty columns - an
 * expanse of nothing beside a single tile.
 *
 * So the layout follows the content rather than the other way round. A lone
 * service becomes a wide card with the picture beside the text, which fills
 * the row and looks deliberate; two sit side by side at half width each.
 * Three or more use the dense grid as before.
 */
.service-card--wide { flex-direction: row; }
.service-card--wide .service-card__media {
    flex: 0 0 42%;
    aspect-ratio: auto;          /* height comes from the text beside it */
    min-height: 260px;
}
.service-card--wide .service-card__body {
    flex: 1 1 auto;
    padding: var(--s-7);
    justify-content: center;
}
.service-card--wide .service-card__summary {
    -webkit-line-clamp: 4;       /* there is room for a fourth line here */
    font-size: var(--t-md);
}
.service-card--wide .card__title { font-size: var(--t-xl) !important; min-height: 0; }

@media (max-width: 760px) {
    /* Back to a normal card on a phone - 42% of a 375px screen is a stamp. */
    .service-card--wide { flex-direction: column; }
    .service-card--wide .service-card__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
    .service-card--wide .service-card__body { padding: var(--s-5); }
}

/* ------------------------------------------------------- density on wide */
/* Three cards across a 1200px container leaves each one wider than its
   content needs, which reads as empty space. A fourth column at desktop
   width fixes that without shrinking anything on a phone. */
@media (min-width: 1100px) {
    .grid-3.grid--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Contact page

   The three ways to reach somebody, a portrait of whoever answers, and a map.
   ========================================================================== */
.contact-ways { display: grid; gap: var(--s-3); }
.contact-way {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: var(--canvas); border: 1.5px solid var(--line);
    border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
    transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-way:hover {
    border-color: var(--green); transform: translateY(-1px); box-shadow: var(--sh-2);
}
.contact-way__icon {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: var(--r-md);
    background: var(--green-050); color: var(--green-900);
}
.contact-way__text { display: grid; gap: 2px; margin-right: auto; }
.contact-way__text strong { font-size: var(--t-md); }
.contact-way svg:last-child { color: var(--ink-400); flex: none; }

/* The portrait sits in the same 4/5 frame the About page uses, so the two
   pages feel like one site. */
.contact-portrait {
    aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden;
    box-shadow: var(--sh-4); background: var(--canvas-alt);
}
.contact-portrait img,
.contact-portrait .ph { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------- map */
.map-card {
    background: var(--canvas); border: 1.5px solid var(--line);
    border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3);
}
.map-card__frame {
    display: block; width: 100%; height: 420px; border: 0;
    background: var(--canvas-alt);
}
.map-card__frame--empty { display: grid; place-items: center; }
.map-card__foot {
    display: flex; flex-wrap: wrap; gap: var(--s-4);
    align-items: center; justify-content: space-between;
    padding: var(--s-5) var(--s-6); border-top: 1.5px solid var(--line);
}
@media (max-width: 760px) {
    .map-card__frame { height: 300px; }
    .map-card__foot { padding: var(--s-4) var(--s-5); }
    .map-card__foot .row { width: 100%; }
    .map-card__foot .btn { flex: 1 1 auto; justify-content: center; }
}