/* British Premier website: design system v3 (DESIGN.md). One stylesheet for every page, mobile first.
v3 (19 Oct 2026): the landing pages' visual language (../../landing-pages/site/lp-files/styles.css) is the source
for tokens, type, buttons, cards and sections. Rounded-rectangle buttons (12px); pills only for small accent chips.
1. Tokens 2. Base and type 3. Global chrome (header, menu, phone bar, footer)
4. Components, numbered as in DESIGN.md section 3 5. Page layouts 6. Styleguide only
The styleguide page (/styleguide/) shows every component with real copy. */
:root {
--ink: #1F2933;
--text: #3A4754;
--muted: #637587;
--blue: #0073E6;
--blue-deep: #0059B3;
--paper: #FFFFFF;
--mist: #F3F7FB;
--line: #DBE6F0;
--tint: #E6F1FC;
--tint-2: #EAF3FD;
--tint-line: #CCE3FA;
--close: #E3EEFB;
--wa: #25D366;
--wa-hover: #1EBE5A;
--wa-ink: #111B21; /* WhatsApp's own text colour on its green buttons (whatsapp.com, checked 20 Oct): 8.8:1, white was 1.98:1 */
--wa-shadow: 0 8px 18px -10px rgba(18, 140, 70, .55);
--green: #16A34A;
--green-tint: #DCFCE7;
--wash: linear-gradient(160deg, #D1FAE5 0%, #DBEAFE 55%, #C7DCFB 100%);
--grad-primary: linear-gradient(135deg, #0059B3, #0073E6);
--shadow-sm: 0 2px 8px rgba(0, 115, 230, .06);
--shadow: 0 4px 16px rgba(0, 115, 230, .12);
--shadow-lg: 0 8px 32px rgba(0, 115, 230, .16);
--r: 12px;
--r-lg: 16px;
--r-xl: 24px;
--r-pill: 999px;
--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
--fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
--fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
--fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
--fs-body: 1.0625rem;
--fs-small: .9375rem;
--top-h: 66px;
--stack: 32px;
--h2-gap: 24px; /* heading to its text: clearly more than ... */
--p-gap: 14px; /* ... paragraph to paragraph (Gregory 20 Oct) */
}
@media (min-width: 960px) { :root { --stack: 48px; --h2-gap: 28px; } }
@media (min-width: 1180px) { :root { --top-h: 76px; } }
/* ---------- 2. Base and type ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
margin: 0; background: var(--paper); color: var(--text);
font: 400 var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
svg { flex: none; }
svg.i { width: 1em; height: 1em; }
a { color: var(--blue-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid #2F62C8; outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address, blockquote { margin: 0; }
p, li, dd { text-wrap-style: pretty; }
address { font-style: normal; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
strong, b { color: var(--ink); font-weight: 600; }
/* the landing pages' blue highlight: one phrase in the H1 and in the recurring section headings */
.hl { color: var(--blue); }
h1 .hl {
background: linear-gradient(100deg, #0052C4 0%, #0073E6 45%, #1A8CFF 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: var(--r);
background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }
/* sections: 64 / 96 px, white and mist alternate (as on the landing pages) */
.sec { padding: 64px 0; }
.sec-white { background: var(--paper); }
.sec-mist { background: var(--mist); }
@media (min-width: 960px) { .sec { padding: 96px 0; } }
.sec .wrap > * + * { margin-top: var(--stack); }
.sec-intro { font-size: var(--fs-lead); line-height: 1.55; max-width: 60ch; }
/* 7. Prose: one 68ch column, left-aligned */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--p-gap); }
.prose > h2 + * { margin-top: var(--h2-gap); }
.prose > h2 + h3, .prose > h2 + h4 { margin-top: var(--h2-gap); }
.prose > * + h3, .prose > * + h4 { margin-top: 28px; }
.prose > h3 + *, .prose > h4 + * { margin-top: 4px; }
/* sub-headings inside running text: one style on every page, the article's (Gregory 20 Oct: one size, two weights) */
.prose > h3, .prose > h4 { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; letter-spacing: 0; }
.prose ul, .prose ol, .faq-a ul, .faq-a ol, .gl-row ul, .gl-row ol { padding-left: 1.25em; }
.prose li + li, .faq-a li + li { margin-top: 6px; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose li::marker, .faq-a li::marker { color: var(--blue); }
.prose ol > li::marker { font-weight: 600; }
.sub { color: var(--ink); }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--mist); color: var(--ink); font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--ink); min-width: 11em; }
/* ---------- 3. Global chrome ---------- */
/* Header: white bar with the landing pages' soft blue shadow. Logo + menu only (no phone number: Gregory 19 Oct). */
.top { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.top:has(.nav-m[open]) { z-index: 70; }
.top-in { display: flex; align-items: center; gap: 24px; height: var(--top-h); }
.brand { display: block; flex: none; margin-right: auto; border-radius: 6px; }
.logo { height: 42px; width: auto; }
.nav-d { display: none; }
.nav-d > ul { display: flex; align-items: center; justify-content: flex-end; gap: 4px; list-style: none; padding: 0; } /* the top bar only, not the dropdown lists */
.nav-d a {
position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 12px;
color: var(--ink); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
/* Top items (Gregory 20 Oct, option A): hover = the pale grey the dropdown links use; the selected section = the site's
light-blue tint with 12px corners, the same marker as the current page inside a dropdown, the icon tiles and the
decision boxes. No underline. */
.nav-d > ul > li > a, .nav-top { border-radius: var(--r); transition: background-color .15s ease, color .15s ease; }
.nav-d > ul > li > a:hover, .nav-top:hover, .has-sub.open .nav-top { background: var(--mist); color: var(--blue-deep); }
.nav-d a.is-active, .nav-top.is-active, .nav-d a.is-active:hover, .nav-top.is-active:hover, .has-sub.open .nav-top.is-active { background: var(--tint); color: var(--blue-deep); }
/* Desktop dropdowns (approved structure, built 20 Oct). A top item opens its list on click or keyboard (site.js), and on
hover after 0.3 s; the list stays 0.4 s after the pointer leaves, so crossing to it never closes it (NN/g, Baymard).
Two levels only; the group's overview page is its first link. Without JavaScript, keyboard focus opens it. */
.nav-d li { position: relative; }
.nav-top {
position: relative; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 12px;
border: 0; background: none; color: var(--ink); font: 600 .9375rem/1 var(--font); white-space: nowrap; cursor: pointer;
}
.nav-top svg { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.nav-top:hover svg, .has-sub.open .nav-top svg, .nav-top.is-active svg { color: var(--blue-deep); }
.has-sub.open .nav-top svg { transform: rotate(180deg); }
.nav-sub {
position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 280px; padding: 8px;
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
visibility: hidden; opacity: 0; transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, visibility 0s linear .4s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* bridge from the label */
.has-sub:hover .nav-sub { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease .3s, transform .15s ease .3s, visibility 0s linear .3s; }
.has-sub.open .nav-sub { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease, transform .15s ease, visibility 0s; }
html:not(.js) .has-sub:focus-within .nav-sub { visibility: visible; opacity: 1; transform: none; }
.nav-sub ul { display: grid; gap: 2px; list-style: none; padding: 0; }
.nav-sub-cols { display: grid; grid-template-columns: auto auto; column-gap: 8px; min-width: 0; }
.nav-col { min-width: 240px; }
.nav-col-h { padding: 8px 14px 4px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* as the phone menu's labels */
.nav-d .nav-sub a {
display: flex; min-height: 44px; padding: 10px 14px; border-radius: var(--r);
color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.3; white-space: normal;
}
.nav-d .nav-sub a:hover { background: var(--mist); color: var(--blue-deep); }
.nav-d .nav-sub a[aria-current] { background: var(--tint); color: var(--blue); }
/* Booking button in the header (Gregory 20 Oct): a compact WhatsApp button, sticky with the header on computers and
tablets; phones have the bottom bar instead, so there is always exactly one sticky booking button */
.top-book { display: none; flex: none; }
.top-book .btn { min-height: 44px; padding: 0 16px; gap: 8px; font-size: .9375rem; }
.top-book .btn svg { width: 20px; height: 20px; }
@media (min-width: 860px) { .top-book { display: block; } }
.nav-m > summary { list-style: none; }
.nav-m > summary::-webkit-details-marker { display: none; }
.nav-btn {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink);
font-weight: 600; cursor: pointer; user-select: none;
}
.nav-btn svg { width: 20px; height: 20px; color: var(--blue); }
.nav-m .i-shut, .nav-m[open] .i-open { display: none; }
.nav-m[open] .i-shut { display: block; }
.nav-panel {
position: absolute; left: 0; right: 0; top: 100%;
max-height: calc(100vh - var(--top-h)); max-height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
padding: 8px 20px 32px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 24px 32px -16px rgba(0, 58, 115, .22);
display: grid; gap: 0 32px; align-content: start;
}
@media (min-width: 640px) { .nav-panel { grid-template-columns: 1fr 1fr; padding: 16px 32px 32px; } }
.nav-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav-group ul { list-style: none; padding: 0; }
/* group labels are small capitals, clearly labels and not links; the links are the main type (Gregory 20 Oct: the
phone menu's labels and links competed) */
.nav-group-h { margin: 6px 0 2px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav-group a { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--fs-body); font-weight: 500; text-decoration: none; }
.nav-group a:hover, .nav-group a[aria-current] { color: var(--blue-deep); text-decoration: underline; }
.nav-single a { font-weight: 600; }
.nav-phone { padding: 16px 0 0; }
.nav-phone a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.nav-phone svg { width: 18px; height: 18px; color: var(--blue); }
@media (min-width: 1180px) {
.logo { height: 38px; }
.nav-d { display: block; flex: 1; }
.nav-m { display: none; }
/* a tighter bar (Gregory 21 Oct: a Home item, and the bar was already 74 px wider than the page, audit H1), so the
button ends on the page's content edge: the logo 38 px tall (was 48), the items 14 px (was 15) with 8 px either side
(was 12) and 4 px apart (so a selected and a hovered item never touch, Gregory 21 Oct), 16 px between logo, menu
and button (was 24) */
.top-in { gap: 16px; }
.nav-d > ul { gap: 4px; }
.nav-d > ul > li > a, .nav-d .nav-top { padding: 0 8px; font-size: .875rem; }
.top-book .btn { font-size: .875rem; }
}
.crumbs { font-size: var(--fs-small); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin: 0 .5em; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--blue-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }
@media (max-width: 639px) {
.crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
.crumbs li { flex: none; }
.crumbs li:last-child { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 32px; }
}
/* phone bar: always on screen on phones, hidden only while the menu is open */
.mbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11, 27, 63, .10);
}
.mbar .btn { width: 100%; min-height: 50px; }
/* hidden while a main booking button (hero, closing) is mostly on screen, so there is never two (site.js 7; Gregory
20 Oct, as on the landing pages). Without JavaScript the bar simply stays. */
.mbar { transition: transform .2s ease, visibility 0s; }
.cta-in-view .mbar, html.js:not(.scrolled) .mbar { transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.menu-open .mbar { display: none; }
html:has(.nav-m[open]) .mbar { display: none; }
@media (max-width: 859px) { body { padding-bottom: calc(71px + env(safe-area-inset-bottom)); } }
@media (min-width: 860px) { .mbar { display: none; } }
/* Footer: the page's own pale tint, as on the landing pages (Gregory 5 Oct: no dark footer) */
.foot { padding: 56px 0 32px; background: var(--mist); border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.foot-grid { display: grid; gap: 32px; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 48px; } }
/* wide screens: each link column only as wide as its links, the space shared between them, so the last column ends on
the page's right edge and the gaps look even, while every column stays left-aligned (Gregory 22 Oct) */
@media (min-width: 1180px) { .foot-grid { grid-template-columns: repeat(4, auto); justify-content: space-between; }
.foot-clinic { max-width: 290px; } } /* the address column as wide as its wrapped lines, like the link columns */
.foot-name, .foot-h { color: var(--ink); font-weight: 700; }
.foot-h { margin-bottom: 8px; }
.foot-clinic > * + * { margin-top: 8px; }
.foot ul { list-style: none; padding: 0; }
.foot a { color: var(--blue-deep); text-decoration: none; }
.foot a:hover { text-decoration: underline; color: var(--blue-deep); }
.foot-col li a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-clinic a { display: inline-flex; align-items: center; min-height: 36px; }
.foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.foot-legal p + p { margin-top: 4px; }
/* ---------- 4. Components ---------- */
/* 1. Booking button (the landing pages' button: 12px corners, WhatsApp green, soft green shadow) 2. Reassurance line */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
min-height: 54px; padding: 0 1.5em; border: 0; border-radius: var(--r);
font: 600 1rem/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer;
transition: background-color .15s ease; -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 1.3em; height: 1.3em; }
.btn-wa { background: var(--wa); color: var(--wa-ink); box-shadow: var(--wa-shadow); } /* WhatsApp's official scheme (Gregory 20 Oct) */
.btn-wa:hover { background: var(--wa-hover); color: var(--wa-ink); }
/* the hero's second button (Gregory 21 Oct): outline, same shape and height as the WhatsApp button, green first;
"See available times" opens the booking widget (not wired yet). Phones: stacked, full width */
.act-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-line { background: var(--paper); color: var(--blue-deep); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn-line:hover { background: var(--tint); }
.btn-line svg { color: var(--blue); }
@media (max-width: 559px) { .hero .act-btns { flex-direction: column; } }
.btn-line { background: var(--paper); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn-line:hover { background: var(--tint); color: var(--blue); }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* the reassurance line sits under the button, as on the landing pages (Gregory 21 Oct: it was beside it) */
.act { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.reassure { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.reassure svg { width: 1.05em; height: 1.05em; }
.smallprint { margin-top: 16px; font-size: .875rem; line-height: 1.45; color: var(--muted); }
/* 3. Trust chips: the one place pills are used (small accents in the hero) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px 6px 11px;
border-radius: 17px; background: rgba(255, 255, 255, .85); border: 1px solid var(--tint-line); /* 17 = half the one-line height: */
font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--ink); /* a pill on one line, tidy on two */
}
.chip svg { width: 16px; height: 16px; color: var(--blue); }
/* "You'll see:" faces */
.seen { display: flex; align-items: center; gap: 12px; }
.seen-faces { display: flex; flex: none; }
.seen-faces > * + * { margin-left: -10px; }
.face {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
object-fit: cover; object-position: 50% 22%; background: var(--mist); font-size: .8125rem; font-weight: 600;
}
.face.initials { background: var(--tint); color: var(--blue); }
.face-more { background: var(--ink); color: #fff; }
.seen-text { font-size: var(--fs-small); line-height: 1.45; color: var(--text); }
.seen-label { color: var(--muted); }
.seen-text a { color: var(--ink); font-weight: 600; text-decoration: none; }
.seen-text a:hover { color: var(--blue-deep); text-decoration: underline; }
/* 4. Clinician card: the landing pages' card. Round photo with a light-blue ring, name, role in blue,
who they see / helps with / languages, credentials with green ticks, full-width button, profile link. */
/* Grid: every card in a row shares the same lines (CSS subgrid), so "Who they see", "Helps with", "Languages", the
credentials and the button sit at the same height across the row (Gregory 19 Oct). Each part has a fixed line, so a
missing part leaves a gap instead of moving the rest up. Rows start on the left; a short last row leaves its space free. */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; row-gap: 0; justify-content: start; margin-bottom: -24px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Every clinician card is one column of the same grid on every page, however many cards there are (Gregory 20 Oct:
the lone "Specialist programmes" card was wider than the cards above it). A short row leaves its space empty. */
.card {
display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; min-width: 0; margin-bottom: 24px;
padding: 24px 22px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card-ph { grid-row: 1; position: relative; justify-self: center; padding-bottom: 14px; } /* photo + experience badge */
.card-name { grid-row: 2; align-self: end; } /* name sits right on its role, even when a neighbour's name wraps */
.card-role { grid-row: 3; }
.card-facts { display: contents; }
.card-facts .f-sees { grid-row: 4; }
.card-facts .f-helps { grid-row: 5; }
.card-facts .f-lang { grid-row: 6; }
.card-creds { grid-row: 7; }
.card-act { grid-row: 8; }
.card-facts > div { margin-top: 14px; }
.card-facts > .f-sees { margin-top: 22px; }
.card-photo { display: block; justify-self: center; align-self: start; width: 132px; height: 132px; border-radius: 50%; text-decoration: none; }
.card-photo picture { width: 100%; height: 100%; }
/* "tile" photo (option, 20 Oct): the cut-out standing on the hero gradient, as wide as the card */
.card-ph:has(.card-photo-tile) { justify-self: stretch; }
.card-photo.card-photo-tile { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 232px;
overflow: hidden; border-radius: var(--r); background: var(--wash); }
.card-photo-tile picture { display: block; width: auto; height: 100%; }
.card-cut { display: block; width: auto; height: 100%; }
.card-img { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--tint-line); object-fit: cover; object-position: 50% 22%; background: var(--mist); }
.initials { display: grid; place-items: center; background: var(--tint); color: var(--blue); font-weight: 700; letter-spacing: .02em; line-height: 1; user-select: none; }
.card-img.initials { font-size: 2.5rem; }
.card-name { margin-top: 8px; font-size: 1.375rem; line-height: 1.2; text-align: center; }
/* years-of-experience badge (Gregory 20 Oct): a small accent pill on the photo's lower edge, cards and profiles */
.exp-badge { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center;
gap: 5px; padding: 4px 11px 4px 8px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--tint-line);
box-shadow: var(--shadow-sm); color: var(--blue-deep); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.exp-badge svg { width: 15px; height: 15px; flex: none; color: var(--blue); }
.portrait { position: relative; width: fit-content; } /* the badge centres on the photo, not the column */
.portrait .exp-badge { bottom: -12px; left: 8px; transform: none; } /* phones: the badge is wider than the 132 px photo */
@media (min-width: 960px) { .portrait { width: auto; } .portrait .exp-badge { left: 50%; transform: translateX(-50%); } }
.card-name a { color: var(--ink); text-decoration: none; }
.card-name a:hover { color: var(--blue-deep); text-decoration: underline; }
.card-role { margin-top: 6px; color: var(--blue); font-weight: 600; font-size: 1rem; line-height: 1.4; text-align: center; }
.card-facts dt { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.card-facts dd { margin-top: 2px; color: var(--ink); line-height: 1.5; }
.card-creds { display: grid; gap: 9px; margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .9375rem; line-height: 1.45; }
.card-creds li { display: flex; align-items: flex-start; gap: 10px; }
.tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: .1em; border-radius: 50%; background: var(--green-tint); color: var(--green); }
.tick svg { width: 12px; height: 12px; }
.card-act { display: grid; gap: 4px; align-self: end; padding-top: 22px; }
.card-act .btn { width: 100%; padding: 0 12px; }
.card-more { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.card-more:hover { text-decoration: underline; }
@media (min-width: 960px) {
.card { padding: 28px 26px 16px; }
.card-photo { width: 148px; height: 148px; }
.card-name { font-size: 1.5rem; }
}
.group-h { font-size: 1.375rem; }
/* a group heading above a services list (home "All our services and conditions") is a group heading, not a text
sub-heading: larger than the service names under it (Gregory 20 Oct: it had come out smaller) */
.prose:has(+ .svc-grid) > h3:last-child { font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.sec .wrap > .group-h { margin-top: 56px; }
.sec .wrap > .group-h + .cards { margin-top: 20px; }
/* 5. Steps: the landing pages' step cards with a blue numbered tile */
.steps { display: grid; gap: 16px; list-style: none; padding: 0; counter-reset: step; }
.step {
position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; padding: 22px 20px;
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); counter-increment: step;
}
.step::before {
content: counter(step); grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px;
border-radius: var(--r); background: var(--grad-primary); color: #fff; font-weight: 600; font-size: 1.0625rem;
}
.step > * { grid-column: 2; }
.step-t { align-self: center; min-height: 42px; display: flex; align-items: center; color: var(--ink); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.step-d { margin-top: 6px; }
.step-t + .step-d { margin-top: 4px; }
.step-d:first-child { grid-row: 1 / span 2; align-self: center; margin-top: 0; }
/* steps use the clinician cards' grid and breakpoints, so a step is always as wide as a card (20 Oct) */
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) {
/* one step width everywhere (the cards' 3 columns); 4 or 5 steps continue on a second row, from the left */
.step { display: block; padding: 28px 26px; }
.step::before { margin-bottom: 18px; }
.step-t { min-height: 0; display: block; }
.step-t + .step-d { margin-top: 8px; }
}
/* 6. Checklist: the landing pages' "People often talk to us about" tiles */
.checks { display: grid; gap: 12px; list-style: none; padding: 0; }
@media (min-width: 720px) { .checks { grid-template-columns: 1fr 1fr; gap: 14px 20px; } }
.checks > li {
display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px;
background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
color: var(--ink); font-weight: 500; line-height: 1.45; /* one weight for every checklist, short or long (21 Oct) */
}
/* a checklist of "**Title.** Text" items: the title on its own line, the text under it (as in the lead-in lists) */
.checks-lead .li-t { display: block; font-weight: 600; color: var(--ink); }
.checks-lead .li-d { display: block; margin-top: 3px; font-weight: 400; color: var(--text); }
@media (min-width: 720px) { .checks > li { padding: 18px 20px; } }
.checks > li > svg { width: 24px; height: 24px; margin-top: -1px; padding: 5px; border-radius: 8px; background: var(--tint); color: var(--blue); }
.checks ul { margin-top: 6px; padding-left: 1.2em; font-weight: 400; color: var(--text); }
/* 8. Comparison, and path cards: the landing pages' panels (icon tile, blue title) */
.compare { display: grid; gap: 16px; }
@media (min-width: 760px) {
.compare-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
/* path cards: two per row at most (three across was cramped, Gregory 19 Oct). A short last row starts on the left and
leaves its space free (for an illustration later); never a lone card centred under the others (Gregory 19 Oct). */
.paths { display: grid; gap: 20px; }
.path { min-width: 0; }
@media (min-width: 760px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 960px) { .path { padding: 32px; } }
.panel, .path { padding: 28px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.cmp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cmp-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--blue); }
.cmp-ico svg { width: 26px; height: 26px; }
.panel-t, .path-t { font-size: 1.375rem; line-height: 1.25; color: var(--blue); }
.panel > .panel-t, .path > .path-t { margin-bottom: 12px; }
.cmp-head > .panel-t, .cmp-head > .path-t { margin-bottom: 0; }
.panel-list { display: grid; gap: 8px; list-style: none; padding: 0; }
.panel-list > li { position: relative; padding-left: 20px; }
.panel-list > li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.path p + p { margin-top: 12px; }
/* service cards (S01 "Other services"): the clinicians as faces at the bottom, level across the row */
.path { display: flex; flex-direction: column; }
.path-with { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.path > p:has(+ .path-with) { margin-bottom: 20px; }
.path-with .seen-label { color: var(--muted); }
/* a panel's "See a ... first if" line: at the bottom, under a hairline, so both panels' lines sit level */
.panel { display: flex; flex-direction: column; }
.panel-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); }
.panel-list:has(+ .panel-foot) { margin-bottom: 20px; } /* at least 20px above the line; the footer's auto margin does the rest */
/* 9. CTA band (mid-page): the landing pages' "choose" box */
.band {
display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px;
border-radius: var(--r-lg); background: var(--tint-2); color: var(--ink);
}
.band-text > * + * { margin-top: 10px; }
.band-text > h2 + * { margin-top: var(--h2-gap); }
.band-text p { max-width: 62ch; font-size: 1.125rem; line-height: 1.5; }
.band-text .band-title { font-size: 1.375rem; line-height: 1.25; } /* one title size in every band, or
(20 Oct) */
.band-text p + p, .band-text .band-title ~ p { font-size: 1rem; color: var(--text); } /* one text size under every band title (21 Oct) */
.band-title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.band-act .act { flex-direction: column; align-items: stretch; }
@media (min-width: 720px) {
.band { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 32px; }
.band-act { flex: none; }
}
/* 10. FAQ: heading on the left, questions on the right (desktop), as on the landing pages */
.faq-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .sec .wrap.faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 64px; align-items: start; } .sec .wrap.faq-grid > * + * { margin-top: 0; } }
.faq-head > * + * { margin-top: var(--p-gap); }
.faq-head > h2 + * { margin-top: var(--h2-gap); }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 0; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.faq-item summary:hover .faq-q { color: var(--blue-deep); }
.faq-i { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--tint); stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.faq-item[open] .faq-v { display: none; }
.faq-a { max-width: 68ch; padding: 0 44px 22px 0; }
.faq-a > * + * { margin-top: 12px; }
.faq-item[open] .faq-a { animation: faq-open .2s ease-out; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 11. Where we are: the landing pages' "Find us" (address on the left, clinic photo on the right; the photo
becomes the map when someone taps "Show the map") */
.where-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .where-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } }
.where-text > * + * { margin-top: 16px; }
.where-text h2 + .sec-intro { margin-top: var(--h2-gap); }
.where-name { margin-top: 24px !important; color: var(--ink); font-weight: 700; }
.where-addr { margin-top: 6px !important; font-size: 1.1875rem; line-height: 1.5; color: var(--ink); }
.where-facts { display: grid; gap: 8px; list-style: none; padding: 0; color: var(--muted); line-height: 1.5; }
.where-facts li { display: flex; align-items: flex-start; gap: 10px; }
.where-facts svg { width: 18px; height: 18px; margin-top: 3px; color: var(--blue); }
.where-facts a { color: var(--ink); font-weight: 600; text-decoration: none; }
.where-facts a:hover { text-decoration: underline; }
.where-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 20px !important; }
.where-links a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--blue); }
.where-links a:hover { text-decoration: underline; }
.where-links svg { width: 18px; height: 18px; }
.where-map { position: relative; }
.map-ph { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; }
.map-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.map-ph-btn {
position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
border-radius: var(--r); background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 58, 115, .18); color: var(--blue); font-weight: 600;
}
.map-ph-btn svg { width: 18px; height: 18px; }
.map-ph:hover .map-ph-btn { background: #fff; text-decoration: underline; }
.map-frame { display: block; width: 100%; aspect-ratio: 4 / 3; min-height: 280px; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); }
/* 12. At a glance */
.glance { max-width: 900px; }
.gl-list { border-top: 1px solid var(--line); }
.gl-row { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.gl-row dt { color: var(--ink); font-weight: 700; }
.gl-row dd { margin: 0; }
.gl-row ol { margin-top: 6px; }
.gl-solo { padding: 14px 0; border-bottom: 1px solid var(--line); }
/* the label column follows the list's own width, not the screen's: full lists get 220px labels, the half-width list
beside the home "under one roof" text gets a compact column instead of a squeezed value column (Gregory 21 Oct) */
.glance { container-type: inline-size; }
@container (min-width: 420px) { .gl-row { grid-template-columns: 124px minmax(0, 1fr); gap: 20px; } }
@container (min-width: 600px) { .gl-row { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; } }
/* home: "under one roof" prose with the facts beside it, in one section */
.roof { display: grid; gap: 40px; }
@media (min-width: 1000px) { .sec .wrap > .roof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
/* the facts beside it are the same "At a glance" list as on every other page (no box, same rows; 20 Oct), under a
small label; the text stays in view while the longer list scrolls past (21 Oct) */
.roof .glance-h { margin: 6px 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
@media (min-width: 1000px) { .sec .wrap > .roof > .prose { position: sticky; top: calc(var(--top-h) + 32px); } }
/* 13. Services list: typographic rows with hairlines (no boxes) */
.svc-grid { display: grid; gap: 0 40px; list-style: none; padding: 0; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
/* the page's icon in the panels' light-blue tile, a size down (Gregory 21 Oct: icons make the list read as
customer-facing, not as page links) */
.svc-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--blue); }
.svc-ic svg { width: 22px; height: 22px; }
.svc-b { flex: 1; min-width: 0; padding-top: 1px; }
.svc-a { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; text-decoration: none; }
.svc-a::after { content: ""; position: absolute; inset: 0; }
.svc-a svg { width: 18px; height: 18px; margin-top: 2px; color: var(--blue); transition: transform .15s ease; }
.svc:hover .svc-a { color: var(--blue-deep); }
.svc:hover .svc-a svg { transform: translateX(3px); }
.svc p { margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.sec .wrap > .prose + .svc-grid { margin-top: 20px; }
/* sources, "Last updated" */
.sec-sources { padding: 48px 0; }
.sec-sources h2 { font-size: var(--fs-h3); letter-spacing: -.01em; }
.sources { display: grid; gap: 8px; list-style: none; padding: 0 !important; font-size: var(--fs-small); line-height: 1.5; }
.sources li + li { margin-top: 0; }
.sources a { overflow-wrap: anywhere; }
.updated { margin-top: 24px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.sec-meta { padding-top: 0; }
.sec-meta .updated { margin-top: 0; }
/* ---------- 5. Page layouts ---------- */
/* Hero: the landing pages' hero. The white glass card (up to 640px) sits on the gradient; the photo is not boxed:
on computers it fills the right half of the hero, on phones it runs across the top and the card starts below it.
.hero-photo = a clinic photo the gradient fades into; .hero-cutout = a clinician cut out of their photo, standing
on the gradient, with a name tag (the psychology landing page); .hero-person = profiles; .hero-plain = no photo. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 16px 0 56px; background: var(--wash); }
.hero .crumbs { position: relative; z-index: 1; margin-bottom: 16px; }
.hero .wrap > .hero-grid:first-child { padding-top: 16px; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero-copy {
position: relative; z-index: 1; padding: 26px 22px; border-radius: var(--r-xl);
background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow-lg);
}
.hero h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 2.9rem); }
.hero-copy > .lead { margin-top: 18px; max-width: 34em; }
.hero-role, .hero-intro { margin-top: 12px; max-width: 46ch; }
.hero-above { margin-top: 24px; color: var(--ink); font-weight: 600; }
/* the approved "UK-trained" line, naming the page's own clinicians (20 Oct audit H10) */
.hero-proof { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; max-width: 46ch;
color: var(--text); font-size: var(--fs-small); line-height: 1.5; }
.hero-proof svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.hero-copy > .hero-proof + .hero-above { margin-top: 14px; }
.hero-copy > .act { margin-top: 26px; }
.hero-copy > .hero-above + .act { margin-top: 14px; }
.hero-copy > .chips { margin-top: 26px; }
/* a hairline between the buttons (+ reassurance line) and the trust pills: action above, facts below (Gregory 21 Oct) */
.hero .act + .chips { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
/* hero card options (20 Oct, /options/hero-card/): the landing pages' ticked lines; reassurance under the button */
.hero-ticks { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 10px; }
.hero-ticks li { display: flex; align-items: flex-start; gap: .7em; color: var(--ink); font-weight: 600; line-height: 1.45; }
.hero-ticks .tick { margin-top: .05em; }
.hero-card-ticks .hero-copy > .act, .hero-card-mixed .hero-copy > .act { flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 559px) { .hero-card-ticks .hero-copy > .act, .hero-card-mixed .hero-copy > .act { align-items: stretch; } .hero-card-ticks .reassure, .hero-card-mixed .reassure { justify-content: center; } }
.hero-copy > .seen { margin-top: 22px; }
@media (max-width: 559px) { .hero .act .btn { width: 100%; } .hero .act { align-items: stretch; } .hero .reassure { justify-content: center; } }
.hero-photo, .hero-cutout { padding-top: 236px; }
.hero-fig { position: absolute; top: 0; left: 0; right: 0; height: 310px; margin: 0; }
.hero-fig picture { position: relative; z-index: -2; height: 100%; }
.hero-fig img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash);
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 170px, #000 300px);
mask-image: linear-gradient(180deg, transparent 0, transparent 170px, #000 300px);
}
.hero-fig figcaption {
position: absolute; z-index: 1; left: 20px; top: 212px; transform: translateY(-100%); display: grid; gap: 1px;
padding: 8px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 115, 230, .14);
font-size: .8125rem; line-height: 1.3; color: var(--muted);
}
.hero-fig figcaption b { color: var(--ink); font-weight: 600; }
@media (min-width: 768px) { .hero-fig figcaption { left: 32px; } }
/* phones/tablets: the cut-out is cut where the card starts, so the card never sits over her */
.hero-cutout .hero-fig { height: 236px; overflow: hidden; }
.hero-cutout .hero-fig picture { z-index: 0; display: flex; justify-content: center; align-items: flex-end; height: 300px; }
.hero-cutout .hero-fig img { width: auto; height: 100%; object-fit: contain; }
.hero-no-phone-photo { padding-top: 16px; }
.hero-no-phone-photo .hero-fig { display: none; }
.hero-no-phone-photo::after { display: none; }
@media (min-width: 960px) {
.hero { padding: 24px 0 88px; }
.hero .crumbs { margin-bottom: 24px; }
.hero-copy { padding: 40px 40px 36px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero-photo, .hero-cutout, .hero-no-phone-photo { display: flex; align-items: center; min-height: 640px; padding: 48px 0 72px; }
.hero-photo > .wrap, .hero-cutout > .wrap { width: 100%; }
.hero-photo .hero-grid, .hero-cutout .hero-grid { display: block; }
.hero-photo .hero-copy, .hero-cutout .hero-copy { max-width: 640px; }
.hero-no-phone-photo .hero-fig { display: block; }
.hero-no-phone-photo::after { display: block; }
/* the photo area is the right half of a 1440px canvas centred on the page, so it stays beside the card on wide screens */
.hero-fig { top: 0; bottom: 0; left: auto; right: max(0px, calc((100% - 1440px) / 2)); width: min(50%, 720px); height: auto; }
/* a clinic photo fills the whole right half, up to the screen edge on wide screens (Gregory 20 Oct: it stopped short
of the edge); the gradient still fades into its left side. Cut-outs and team heroes keep the 1440px canvas, so the
people stay next to the card. */
.hero-photo .hero-fig { left: 50%; right: 0; width: auto; }
.hero-photo::after { -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 64%); mask-image: linear-gradient(90deg, #000 50%, transparent 64%); }
.hero-fig figcaption { left: max(116px, calc(696px - 100%)); top: auto; bottom: 72px; transform: none; padding: 10px 16px; font-size: .875rem; }
.hero-cutout .hero-fig { height: auto; overflow: visible; }
.hero-cutout { align-items: flex-end; } /* the card's bottom = the name tag's bottom (both 72px up; Gregory 20 Oct) */
.hero-cutout .hero-fig picture { display: block; height: 100%; overflow: hidden; }
.hero-cutout .hero-fig img { position: absolute; top: 5.6%; left: 50%; transform: translateX(-50%); width: auto; height: 98%; }
}
.hero-plain .hero-copy { max-width: 760px; }
/* profile: portrait left (the landing pages' white-framed photo), card right */
.portrait-img, .portrait img { width: 132px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-lg); border: 4px solid #fff; box-shadow: var(--shadow-lg); }
.portrait-img.initials { height: 165px; font-size: 2.75rem; }
.hero-person h1 { max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2vw, 2.875rem); }
.hero-person .hero-role { max-width: 40ch; }
@media (min-width: 960px) {
.hero-person .hero-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
.portrait-img, .portrait img { width: 100%; border-width: 5px; border-radius: var(--r-xl); }
.portrait-img.initials { height: auto; aspect-ratio: 4 / 5; font-size: 5rem; }
}
.sec-lead { padding-bottom: 0; }
.sec-lead + .sec { padding-top: 32px; }
.sec-lead p { font-size: var(--fs-lead); line-height: 1.55; }
.sec-cards .wrap > .prose + .cards { margin-top: 32px; }
.sec-glance .wrap > .prose + .glance, .sec-steps .wrap > .prose + .steps { margin-top: 32px; }
.where-extra { max-width: 68ch; }
.where-lead { padding-top: 56px; }
/* Closing: the landing pages' closing block. Solid soft blue, centred, team faces above the heading. */
.final { padding: 72px 0; background: var(--close); text-align: center; }
@media (min-width: 960px) { .final { padding: 104px 0; } }
.final h2 { max-width: 24ch; margin: 0 auto; }
.final-sub { max-width: 34em; margin: var(--h2-gap) auto 0; font-size: var(--fs-lead); line-height: 1.55; }
.final .act { justify-content: center; align-items: center; flex-direction: column; gap: 16px; margin-top: 26px; }
.final .reassure { display: block; text-align: center; }
.final .reassure svg { display: inline-block; vertical-align: -2px; margin-right: .4em; }
.final .smallprint { margin-top: 8px; }
.faces { display: flex; justify-content: center; margin-bottom: 22px; }
.faces picture { display: block; }
.faces img, .faces .initials { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid #fff; box-shadow: 0 8px 18px -8px rgba(0, 58, 115, .45); }
.faces .initials { font-size: 1.5rem; }
.faces > * + * { margin-left: -18px; }
@media (max-width: 479px) { .faces img, .faces .initials { width: 68px; height: 68px; } .faces > * + * { margin-left: -14px; } }
/* contact form, beside its text and the other ways to reach us (Gregory 21 Oct: the section looked half empty) */
.msg-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .msg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }
/* beside the contact form: a card per phone number and one for the hours (Gregory 30 Oct); icon tile as the services list */
.reach-cards { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.msg-text .reach-cards { padding-left: 0; } /* not a prose list: no indent */
.msg-text .reach-cards li + li { margin-top: 0; }
.reach-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line);
border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; }
a.reach-card:hover { border-color: var(--tint-line); box-shadow: var(--shadow); }
a.reach-card:hover .reach-v { color: var(--blue-deep); }
.reach-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--blue); }
.reach-ic .i { width: 20px; height: 20px; }
.reach-b { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.reach-label { font-size: var(--fs-small); color: var(--muted); }
.reach-v { font-weight: 700; color: var(--ink); }
.reach-sub { font-size: var(--fs-small); color: var(--muted); }
.msg-form .cform { max-width: none; margin-top: 0 !important; }
.where-tag { color: var(--muted); font-weight: 400; }
.ft-tag { color: inherit; opacity: .75; }
.cform { display: grid; gap: 16px; max-width: 34rem; margin-top: 24px !important; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; color: var(--ink); }
.field input, .field textarea {
width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #B9C9D9; border-radius: var(--r);
font: inherit; color: var(--ink); background: var(--paper);
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--blue); }
.form-note { font-size: var(--fs-small); color: var(--muted); }
.cform .btn { justify-self: start; }
/* sending (Gregory 30 Oct, site.js): fields hide once sent; the bots-only field never shows */
.cform [hidden] { display: none !important; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #B42318; font-size: var(--fs-small); }
.form-done { font-weight: 600; color: var(--ink); outline: none; }
/* 404 */
.nf { padding: 64px 0 96px; background: var(--wash); text-align: center; }
.nf-in { max-width: 640px; margin: 0 auto; }
.nf-in > * + * { margin-top: 16px; }
.nf-in h1 { max-width: none; }
.nf-links { display: grid; gap: 4px 24px; max-width: 520px; margin: 24px auto !important; padding: 16px 24px; list-style: none; text-align: left; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); }
@media (min-width: 560px) { .nf-links { grid-template-columns: 1fr 1fr; } }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.nf-links a:hover { text-decoration: underline; }
.nf .act { align-items: center; margin-top: 24px; }
/* ---------- 6. Styleguide only ---------- */
.sg-label { font-size: var(--fs-h3); }
.sg-row { margin-top: 16px; }
.sg-tokens { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); list-style: none; padding: 0; font-size: var(--fs-small); }
.sg-tokens li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.sg-tokens code { grid-column: 2; color: var(--ink); font-weight: 600; }
.sg-tokens span:not(.sg-chip) { grid-column: 2; overflow-wrap: anywhere; color: var(--muted); }
.sg-chip { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); }
.sg-none { background: repeating-linear-gradient(45deg, var(--mist) 0 4px, var(--paper) 4px 8px); }
.sg-types { display: grid; gap: 16px; list-style: none; padding: 0; }
.sg-types li { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sg-types code { font-size: var(--fs-small); color: var(--muted); }
.sg-type { color: var(--ink); }
.sg-h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.sg-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.sg-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.sg-body { font-size: var(--fs-body); }
.sg-small { font-size: var(--fs-small); }
.sg-space { display: grid; gap: 8px; list-style: none; padding: 0; }
.sg-space li { display: flex; align-items: center; gap: 16px; font-size: var(--fs-small); }
.sg-bar { display: block; height: 16px; border-radius: 4px; background: var(--blue); }
/* ---------- WhatsApp box on computers (site.js 6; same box and wording as the landing pages, Gregory 20 Oct) ---------- */
.wa-box { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
background: rgba(11, 36, 64, .55); }
.wa-box[hidden] { display: none; }
html.wa-box-open { overflow: hidden; }
.wa-box-card { position: relative; width: min(100%, 380px); padding: 36px 32px 28px; border-radius: var(--r-xl);
background: var(--paper); box-shadow: var(--shadow-lg); text-align: center; }
.wa-box-card h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.wa-box-help { margin: 8px auto 0; max-width: 28ch; color: var(--text); font-size: 1rem; line-height: 1.5; }
.wa-box-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%;
background: transparent; color: var(--muted); font: 400 1.75rem/1 var(--font); cursor: pointer; }
.wa-box-x:hover { background: var(--mist); color: var(--ink); }
.wa-box-qr { display: grid; place-items: center; width: 240px; height: 240px; margin: 20px auto 0;
border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.wa-box-qr svg { width: 238px; height: 238px; border-radius: var(--r); }
.wa-box-wait { color: var(--muted); font-size: var(--fs-small); }
.wa-box-web { display: inline-block; margin-top: 18px; color: var(--blue-deep); font-size: var(--fs-small); text-decoration: none; }
.wa-box-web:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .top, .mbar, .skip, .where-map { display: none !important; } body { padding-bottom: 0; } }
/* Profile H1: name large, role on its own line */
.h1-name { display: block; }
.h1-role { display: block; margin-top: 8px; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.3; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
/* Trust chips: tighter on phones so short chips pair up */
@media (max-width: 600px) {
.chip { min-height: 32px; padding: 5px 11px 5px 9px; font-size: 13.5px; gap: 6px; }
.chips { gap: 6px; }
}
/* v3 layout refinements (19 Oct, v3) */
.sec-cont { padding-top: 0; }
/* Notes under the steps: the landing pages' light-blue note tiles, side by side on computers */
/* notes after the steps sit on the steps' own grid, each note two step-columns wide (Gregory 21 Oct: the callout under
three step cards matched none of them): full width where the steps run two across, two of the three columns where
they run three across; more than one note stack, each the same width */
.notes { display: grid; gap: 16px; }
@media (min-width: 720px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .note { grid-column: span 2; } }
@media (min-width: 1060px) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec .wrap > .steps + .notes { margin-top: 24px; }
.note {
display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
border-radius: var(--r); background: #EEF6FE; border: 1px solid var(--tint-line); color: var(--ink); line-height: 1.5;
}
.note > svg { width: 24px; height: 24px; margin-top: 1px; color: var(--blue); }
/* ---------- Clinician-led heroes (options for Gregory, 19 Oct; /options/heroes/) ----------
Same card; the right half (computers) or the top band (phones) shows the page's own clinicians. */
.hero-team { padding-top: 264px; }
.hero-team .hero-fig { z-index: 0; height: 264px; }
.hero-team .hero-fig picture { position: static; z-index: auto; height: auto; }
.hero-team .hero-fig img { height: auto; }
.tag {
display: grid; gap: 1px; padding: 7px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .95);
box-shadow: 0 4px 14px rgba(0, 115, 230, .14); font-size: .8125rem; line-height: 1.3; color: var(--muted); white-space: nowrap; text-align: left;
}
.tag b { color: var(--ink); font-weight: 600; }
/* A. Team cut-outs: standing together, faded at the bottom and the outer edges */
.tm-cut { overflow: hidden; }
.tm-row { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; }
.tm-cut .pp { position: relative; flex: none; height: 96%; }
.tm-cut .pp + .pp { margin-left: -6%; }
.tm-cut .pp:nth-child(2) { z-index: 2; }
.tm-cut.tm-back .pp:nth-child(2) { z-index: 0; } /* the middle person behind the other two (the home, Gregory 21 Oct) */
.tm-cut.tm-back .pp:nth-child(1), .tm-cut.tm-back .pp:nth-child(3) { z-index: 1; }
.tm-cut .pp.pp-front:nth-child(n) { z-index: 3; } /* pages.json hero_front: this person in front of the other two (psychiatry: Dr Sadia, Gregory 22 Oct) */
/* equal slots (every team hero since 21 Oct, Gregory; pages.json hero_equal: false = the old larger middle): the three
people the same size, the middle one still in front. Phones by height (the others: 96 % middle, 82 % sides), computers by width (68 % / 54 %); the group as wide as
before, so the outer faces sit where they did */
@media (max-width: 959px) {
.tm-cut.team-n3.tm-equal .pp:nth-child(n) { height: 88%; }
.tm-cut.team-n3.tm-equal .pp + .pp { margin-left: -14%; }
}
@media (min-width: 960px) {
.hero-team-cut .tm-cut.team-n3.tm-equal .pp:nth-child(n) { width: 58%; }
.hero-team-cut .tm-cut.team-n3.tm-equal .pp + .pp { margin-left: -19%; }
}
/* --pp-scale (build.py: clinicians.json cut.scale, or pages.json hero_sizes, e.g. the home's Dr Kiran 0.92): grown or
shrunk from the bottom; a larger one at the sides from the outer corner, so the face moves inwards, never off the
panel's edge */
.tm-people .pp[style*="--pp-scale"] { transform: scale(var(--pp-scale)); transform-origin: 50% 100%; }
.tm-people .pp[style*="--pp-scale"]:first-child:not(:only-child) { transform-origin: 0 100%; }
.tm-people .pp[style*="--pp-scale"]:last-child:not(:only-child) { transform-origin: 100% 100%; }
/* smaller than 1: at the sides from the inner corner instead, so the person shrinks towards the middle, not off the edge */
.tm-people .pp.pp-shrink:first-child:not(:only-child) { transform-origin: 100% 100%; }
.tm-people .pp.pp-shrink:last-child:not(:only-child) { transform-origin: 0 100%; }
/* a cut-out on a wider canvas (data/clinicians.json "bleed"): enlarged from the bottom centre in every position, so the
face stays where a normal crop puts it and the arms run on past the slot instead of ending in a straight line */
.tm-people .pp.pp-bleed:nth-child(n) { transform-origin: 50% 100%; }
.tm-cut.team-n3 .pp:nth-child(1), .tm-cut.team-n3 .pp:nth-child(3) { height: 82%; }
.tm-cut.team-n3 .pp + .pp { margin-left: -12%; }
.tm-cut .pp picture, .tm-cut .pp img { height: 100%; width: auto; }
/* the bottom and side fades are baked into the cut-out files (tools/make_cutouts.sh): CSS masks on these photos
failed to paint in Chromium (19 Oct) */
.tm-cut .tag { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 10px; font-size: .75rem; }
/* B. Portrait pair: white-framed portraits, staggered */
.tm-frames .fr { position: absolute; width: 30%; }
.tm-frames .fr:nth-child(1) { left: 14%; top: 7%; z-index: 1; }
.tm-frames .fr:nth-child(2) { right: 14%; top: 24%; z-index: 2; }
.tm-frames.team-n1 .fr { left: 35%; }
.tm-frames .fr img, .tm-lead .fr img {
width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
border: 4px solid #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.tm-frames .tag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 5px 10px; font-size: .75rem; }
.tm-frames .tag span { display: none; }
/* C. Lead clinician and team */
.tm-lead { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 20px; }
.tm-lead .fr { position: relative; flex: none; width: 116px; }
.tm-lead .tag { display: none; }
.tm-lead .seen { max-width: 220px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 115, 230, .12); flex-wrap: wrap; }
/* D. Faces in circles: the cards' ringed round photos in a loose cluster */
.tm-circles .ci { position: absolute; aspect-ratio: 1; }
.tm-circles .ci picture, .tm-circles .ci img { width: 100%; height: 100%; }
.tm-circles .ci img { border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 4px solid var(--tint-line); box-shadow: 0 0 0 4px #fff, var(--shadow-lg); }
.tm-circles .ci-more { display: grid; place-items: center; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 4px #fff, var(--shadow); color: var(--blue); font-weight: 700; font-size: 1.125rem; }
.tm-circles .tag { display: none; }
.tm-circles .ci:nth-child(1) { width: 40%; left: 12%; top: 4%; }
.tm-circles .ci:nth-child(2) { width: 30%; right: 10%; top: 30%; }
.tm-circles .ci:nth-child(3) { width: 24%; left: 4%; top: 56%; }
.tm-circles.team-n2 .ci-more { width: 13%; left: 8%; top: 64%; }
.tm-circles.team-n3 .ci-more { width: 12%; right: 26%; top: 4%; }
/* phones: the band is wide and short, so size the circles by its height */
@media (max-width: 959px) {
.tm-circles .ci:nth-child(1) { width: auto; height: 62%; left: 28%; top: 4%; }
.tm-circles .ci:nth-child(2) { width: auto; height: 46%; right: 14%; left: auto; top: 36%; }
.tm-circles .ci:nth-child(3) { width: auto; height: 38%; left: 8%; top: 52%; }
.tm-circles.team-n2 .ci-more, .tm-circles.team-n3 .ci-more { width: auto; height: 20%; left: auto; right: 10%; top: 8%; }
.tm-frames .fr { width: auto; height: 62%; }
.tm-frames .fr picture, .tm-frames .fr img { height: 100%; width: auto; }
}
@media (min-width: 960px) {
.hero-team { display: flex; align-items: center; min-height: 660px; padding: 48px 0 72px; }
.hero-team > .wrap { width: 100%; }
.hero-team .hero-grid { display: block; }
/* the people area starts 24px after the card ends, so nobody sits behind the card */
.hero-team { --card-w: 520px; }
.hero-team .hero-copy { max-width: var(--card-w); }
.hero-team .hero-fig { height: auto; width: auto; left: calc(max(0px, (100% - 1160px) / 2) + 32px + var(--card-w) + 24px); }
/* A */
.tm-cut .pp { height: auto; width: 58%; }
.tm-cut .pp + .pp { margin-left: -12%; }
.tm-cut.team-n3 .pp:nth-child(2) { width: 48%; }
.tm-cut.team-n3 .pp:nth-child(1), .tm-cut.team-n3 .pp:nth-child(3) { height: auto; width: 40%; }
.tm-cut.team-n3 .pp + .pp { margin-left: -14%; }
.tm-cut .pp picture, .tm-cut .pp img { width: 100%; height: auto; }
.tm-cut .tag { bottom: 28px; padding: 7px 12px; font-size: .8125rem; }
/* B */
.tm-frames .fr { width: 44%; }
.tm-frames .fr:nth-child(1) { left: 2%; top: 9%; }
.tm-frames .fr:nth-child(2) { right: 2%; top: 30%; }
.tm-frames.team-n1 .fr { left: 26%; width: 50%; }
.tm-frames .fr img { border-width: 5px; border-radius: var(--r-xl); }
.tm-frames .tag { left: 18px; bottom: -18px; transform: none; padding: 8px 14px; font-size: .8125rem; }
.tm-frames .tag span { display: block; }
.tm-frames .fr:nth-child(2) .tag { left: auto; right: 18px; } /* keeps the right-hand tag inside the hero */
.tm-cut.team-n3 .pp:nth-child(1) .tag, .tm-cut.team-n3 .pp:nth-child(3) .tag { bottom: 72px; } /* staggered, so the three tags never overlap */
/* C */
.tm-lead { flex-direction: column; gap: 36px; padding: 0; }
.tm-lead .fr { width: 300px; }
.tm-lead .fr img { border-width: 5px; border-radius: var(--r-xl); }
.tm-lead .tag { display: grid; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); padding: 9px 16px; font-size: .875rem; }
.tm-lead .seen { max-width: 380px; padding: 12px 18px 12px 12px; }
/* D */
.tm-circles .tag { display: grid; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 6px 12px; }
.tm-circles .ci:nth-child(1) { width: 48%; left: 26%; top: 6%; }
.tm-circles .ci:nth-child(2) { width: 34%; right: 0; top: 50%; }
.tm-circles .ci:nth-child(3) { width: 32%; left: 0; top: 54%; }
.tm-circles.team-n2 .ci:nth-child(1) { width: 50%; left: 4%; }
.tm-circles.team-n2 .ci:nth-child(2) { width: 38%; right: 2%; top: 46%; }
.tm-circles.team-n2 .ci-more { width: 15%; left: 20%; top: 76%; }
.tm-circles.team-n3 .ci-more { width: 15%; left: 4%; right: auto; top: 14%; }
}
@media (min-width: 1180px) { .hero-team { --card-w: 620px; } }
/* Option A on computers: the group stands on the same line as the bottom of the card (Gregory 19 Oct), not on the
bottom edge of the hero */
@media (min-width: 960px) {
.hero-team-cut { align-items: flex-end; }
.hero-team-cut .hero-fig { bottom: 72px; }
}
/* Team picture, finish D (Gregory 21 Oct; compared on /options/hero-visual/ and /options/hero-d/): on computers the
people stand in an invisible panel exactly as tall as the hero card, from 24px after the card to the page's content
edge (where the trust bar ends); its edges crop them, its bottom corners take the card's rounding. No fill, edge or
shadow. Phones keep the strip across the top. */
@media (min-width: 960px) {
.hero-team-cut .hero-grid { position: relative; }
.hero-team-cut .hero-grid .hero-fig { top: 0; bottom: 0; left: calc(var(--card-w) + 24px); right: 0; width: auto; height: auto;
overflow: hidden; border-radius: var(--r-xl); }
.hero-team-cut .tm-cut-bowl .tm-people { border-radius: 0; }
/* no background, the hero's mint rising behind the people and gone a little above their heads (Gregory 21 Oct,
/options/home-team/ 3); no name tags (/options/hero-polish/ 17). The layer's height follows the panel's width, as
the people do (452 px wide: 420 px; their heads end ~295 px up). Straight from the bottom up; only the outer 12 %
each side fade out, so the mint never meets the bluer hero background in a straight edge. Phones: no background. */
.hero-team-mint .hero-grid .hero-fig { isolation: isolate; }
.hero-team-mint .hero-grid .hero-fig::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
aspect-ratio: 452 / 420; background: linear-gradient(to top, #D1FAE5 0%, rgba(209, 250, 229, .75) 40%, rgba(209, 250, 229, 0) 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }
/* frosted glass (live for part of 21 Oct, /options/hero-polish/ 18): now only on /options/home-team/ */
.hero-team-glass .hero-grid .hero-fig { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); }
/* no breadcrumbs (the home): the grid's own 16px top padding sits above the card, so the panel starts there too */
.hero-team-cut .wrap > .hero-grid:first-child .hero-fig { top: 16px; }
.hero-team-cut .tm-cut .tag { bottom: 20px; }
/* three people: the lead (centre) larger; the group is 136% of the panel, so 18% hangs past each side */
.hero-team-cut .tm-cut.team-n3 .pp { flex: none; }
.hero-team-cut .tm-cut.team-n3 .pp:nth-child(2) { width: 68%; }
.hero-team-cut .tm-cut.team-n3 .pp:nth-child(1), .hero-team-cut .tm-cut.team-n3 .pp:nth-child(3) { width: 54%; }
.hero-team-cut .tm-cut.team-n3 .pp + .pp { margin-left: -20%; }
.hero-team-cut .tm-cut.team-n3 .pp:nth-child(1) .tag, .hero-team-cut .tm-cut.team-n3 .pp:nth-child(3) .tag { bottom: 64px; }
.hero-team-cut .tm-cut.team-n3 .tm-tags .pp:first-child .tag { left: 34%; transform: none; } /* 18% of the panel = 34% of this person */
.hero-team-cut .tm-cut.team-n3 .tm-tags .pp:last-child .tag { left: auto; right: 34%; transform: none; }
/* two people: equal, overlapping */
.hero-team-cut .tm-cut.team-n2 .pp { flex: none; width: 64%; }
.hero-team-cut .tm-cut.team-n2 .pp + .pp { margin-left: -26%; }
.hero-team-cut .tm-cut.team-n2 .tm-tags .pp:first-child .tag { left: 4%; transform: none; }
.hero-team-cut .tm-cut.team-n2 .tm-tags .pp:last-child .tag { left: auto; right: 4%; transform: none; }
}
/* Phones and tablets, finish D (Gregory 21 Oct: "a card contour instead of the circle"): the picture is as wide as
the card and ends exactly at its top edge; its top corners take the card's rounding, its sides crop the people in
line with the card's edges, and the card's own top corners go square, so picture and card read as one card with a
photo header (no overlap: the frosted card would show the people through it) */
@media (max-width: 959px) {
.hero-team-cut .hero-fig { left: 20px; right: 20px; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.hero-team-cut .tm-cut-bowl .tm-people { border-radius: 0; }
.hero-team-cut .hero-copy { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent; }
}
@media (min-width: 768px) and (max-width: 959px) { .hero-team-cut .hero-fig { left: 32px; right: 32px; } }
/* A1-A3: the group's bottom edge is one continuous curve from the first person's outer edge to the last one's
(Gregory 19 Oct). The photo layer is clipped; the name tags sit on their own layer, so they are never cut. */
.tm-cut-arc .tm-people, .tm-cut-bowl .tm-people, .tm-cut-circle .tm-people { overflow: hidden; }
.tm-cut-arc .tm-people { border-radius: 0 0 50% 50% / 0 0 24% 24%; } /* A1: a shallow arc */
.tm-cut-bowl .tm-people, .tm-cut-circle .tm-people { border-radius: 0 0 9999px 9999px; } /* A2/A3: half a circle as wide as the group */
.tm-cut-circle .tm-people, .tm-cut-circle .tm-tags { left: 6%; right: 6%; }
.tm-disc { /* A3: the same circle, drawn softly behind them */
position: absolute; left: 6%; right: 6%; bottom: 0; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 50% 32%, #fff 0%, rgba(255, 255, 255, .8) 48%, rgba(204, 227, 250, .75) 100%);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9);
}
/* phones: the top band is wide and short, so a true half-circle would cut the outer people across the chest; the
same curve, flattened (an ellipse as wide as the group) */
@media (max-width: 959px) { .tm-cut-bowl .tm-people { border-radius: 0 0 50% 50% / 0 0 34% 34%; } }
/* one clinician with a photo on the page: a little larger, centred in the curve */
@media (min-width: 960px) { .tm-cut.team-n1 .pp { width: 66%; } }
/* options page only */
.opt-intro { padding: 48px 0 24px; background: var(--paper); }
.opt-h { padding: 40px 0 16px; background: var(--paper); border-top: 6px solid var(--ink); }
.opt-k { color: var(--blue); font-weight: 700; font-size: .875rem; }
.opt-t { margin-top: 4px; color: var(--ink); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.opt-n { margin-top: 8px; max-width: 68ch; color: var(--muted); }
.opt-page { padding: 10px 0; background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; font-weight: 600; }
.opt-page .wrap { display: block; }
.opt-cuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 24px; }
@media (min-width: 720px) { .opt-cuts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.opt-cut { display: grid; align-content: end; overflow: hidden; border-radius: var(--r-lg); background: var(--wash); }
.opt-cut img { display: block; width: 100%; height: auto; }
.opt-cut figcaption { display: grid; padding: 10px 12px 12px; background: var(--paper); font-size: .875rem; line-height: 1.35; }
.opt-cut figcaption span { color: var(--muted); font-size: .8125rem; }
/* Article: a run of text-only sections in one band (the side panel was removed, Gregory 19 Oct).
Styles for visual variety, compared at /options/sections/ (pages.json "article_style" picks one):
A .art-side side headings · B .art-photo text and photos, zigzag · C .art-guide numbered cards · D .art-lead key line first */
.article-part + .article-part { margin-top: 64px; }
@media (min-width: 960px) { .article-part + .article-part { margin-top: 88px; } }
/* A. Side headings: heading in a left column, in view while its section is read; text on the right; hairlines */
@media (min-width: 1000px) {
.art-side .article-part { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 68ch); column-gap: 72px; align-items: start; }
.art-side .article-part .prose { display: contents; }
.art-side .article-part > *, .art-side .article-part .prose > * { grid-column: 2; }
.art-side .article-part .prose > h2 {
grid-column: 1; grid-row: 1 / span 60; position: sticky; top: calc(var(--top-h) + 32px);
font-size: clamp(1.5rem, 1.1rem + .9vw, 2rem);
}
.art-side .article-part .prose > h2 + * { margin-top: 0; }
.art-side .article-part + .article-part { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--line); }
}
/* B. Text and photos, zigzag: the clinic's rooms and the page's clinicians, alternating sides */
.art-fig { margin: 0; }
.art-fig img { width: 100%; height: auto; object-fit: cover; }
.art-room img { aspect-ratio: 16 / 10; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.art-person { width: min(70%, 260px); }
.art-person img { aspect-ratio: 4 / 5; object-position: 50% 18%; border: 5px solid #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.art-photo .article-part { display: grid; gap: 28px; }
.art-photo .article-part + .article-part { margin-top: 72px; }
@media (min-width: 1000px) {
.art-photo .article-part { grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: 64px; align-items: center; }
.art-photo .art-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 62ch); }
.art-photo .art-flip .art-fig { order: -1; }
.art-room img { aspect-ratio: 4 / 3; }
.art-person { justify-self: center; width: min(100%, 300px); }
.art-photo .article-part + .article-part { margin-top: 104px; }
}
/* C. Numbered cards: each section in a white card on a light band, with a large blue number */
.sec.art-guide { background: var(--mist); }
.art-guide .article-main { counter-reset: part; display: grid; gap: 20px; }
.art-guide .article-part {
counter-increment: part; padding: 28px 22px; background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.art-guide .article-part + .article-part { margin-top: 0; }
.art-guide .article-part::before {
content: counter(part, decimal-leading-zero); display: block; margin-bottom: 12px;
color: var(--blue); font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
}
@media (min-width: 1000px) {
.art-guide .article-main { gap: 24px; }
.art-guide .article-part { display: grid; grid-template-columns: 112px minmax(0, 68ch); column-gap: 24px; max-width: 960px; padding: 48px 56px 48px 40px; }
.art-guide .article-part::before { grid-column: 1; grid-row: 1 / span 20; margin: 0; font-size: 3.5rem; }
.art-guide .article-part > * { grid-column: 2; }
}
/* D. Key line first: a short blue rule above each heading; the first paragraph set larger with a blue line beside it.
.art-keyline = the vertical line and larger first paragraph only (used with A for option E) */
.art-lead .article-part .prose > h2::before { content: ""; display: block; width: 48px; height: 4px; margin-bottom: 20px; border-radius: 2px; background: var(--blue); }
.art-lead .article-part .prose > h2 + p, .art-keyline .article-part .prose > h2 + p {
margin-top: var(--h2-gap); padding-left: 20px; border-left: 3px solid var(--blue);
color: var(--ink); font-size: var(--fs-lead); line-height: 1.5;
}
@media (min-width: 960px) { .art-lead .article-part + .article-part { margin-top: 104px; } }
@media (min-width: 1000px) { .art-side.art-keyline .article-part .prose > h2 + p { margin-top: 0; } } /* E: key line starts level with the side heading */
/* E's text column follows one type rule (Gregory 20 Oct: "the cleanest possible look"): one size (body, 17px), two
weights (400 text, 600 emphasis and sub-headings), one line height (1.6). The key line stands out by its colour only
(no line, Gregory 20 Oct), not by size; sub-headings by weight and the space above them, not by size. The side heading is the
only large type. */
.art-keyline .article-part .prose > h2 + p { font-size: var(--fs-body); line-height: 1.6; padding-left: 0; border-left: 0; } /* no vertical line (Gregory 20 Oct); the key line is the darker first paragraph */
.art-keyline .article-part .prose h3, .art-keyline .article-part .prose h4, .art-keyline .article-part .prose .sub {
font-size: var(--fs-body); font-weight: 600; line-height: 1.6; letter-spacing: 0; color: var(--ink);
}
.art-keyline .article-part .prose > * + h3, .art-keyline .article-part .prose > * + h4, .art-keyline .article-part .prose > * + .sub { margin-top: 28px; }
.art-keyline .article-part .prose > h2 + h3, .art-keyline .article-part .prose > h2 + h4, .art-keyline .article-part .prose > h2 + .sub { margin-top: var(--h2-gap); }
.art-keyline .article-part .prose > h3 + *, .art-keyline .article-part .prose > h4 + *, .art-keyline .article-part .prose > .sub + * { margin-top: 4px; }
.art-keyline .article-part .prose li + li { margin-top: 8px; }
@media (max-width: 959px) { .tm-cut.team-n3 .tag { display: none; } }
/* ---------- Menu: selected-item options (for Gregory, 20 Oct; /options/menu/) ---------- */
.opt-nav { padding: 12px 0 20px; background: var(--paper); }
.opt-nav .top { position: relative; z-index: auto; box-shadow: none; border-top: 1px solid var(--line); }
.opt-nav + .opt-nav { padding-top: 0; }
/* Old (before 20 Oct): blue text and underline, kept for reference */
.nav-style-old .nav-d a.is-active, .nav-style-old .nav-top.is-active { background: none; color: var(--blue); }
.nav-style-old .nav-d a.is-active::after, .nav-style-old .nav-top.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--blue); }
/* A: soft highlight (live since 20 Oct) */
.nav-style-a .nav-d a.is-active, .nav-style-a .nav-top.is-active { background: var(--tint); border-radius: var(--r); color: var(--blue-deep); }
.nav-style-a .nav-d a.is-active::after, .nav-style-a .nav-top.is-active::after { display: none; }
.nav-style-a .nav-top.is-active svg { color: var(--blue-deep); }
/* B: blue text only */
.nav-style-b .nav-d a.is-active::after, .nav-style-b .nav-top.is-active::after { display: none; }
/* C: dot under the label (centred on the words, not the arrow) */
.nav-style-c .nav-d a.is-active::after, .nav-style-c .nav-top.is-active::after {
left: 50%; right: auto; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%);
}
.nav-style-c .nav-top.is-active::after { left: calc(50% - 10px); }
/* D: tab bar on the header's bottom edge */
.nav-style-d .nav-d a.is-active::after, .nav-style-d .nav-top.is-active::after {
left: 8px; right: 8px; bottom: calc((44px - var(--top-h)) / 2 - 1px); height: 3px; border-radius: 3px 3px 0 0;
}
/* E: quiet menu, the selected item dark with a short blue line */
.nav-style-e .nav-d > ul > li > a, .nav-style-e .nav-top { color: var(--muted); }
.nav-style-e .nav-d > ul > li > a:hover, .nav-style-e .nav-top:hover { color: var(--ink); }
.nav-style-e .nav-d a.is-active, .nav-style-e .nav-top.is-active { color: var(--ink); }
.nav-style-e .nav-top.is-active svg { color: var(--ink); }
.nav-style-e .nav-d a.is-active::after, .nav-style-e .nav-top.is-active::after { left: 12px; right: auto; width: 18px; }
/* ---------- Home hero team options (Gregory 20 Oct; /options/home-hero/, options page only until one is chosen) ---------- */
.hh-people { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; overflow: hidden;
border-radius: 0 0 50% 50% / 0 0 30% 30%; }
@media (min-width: 960px) { .hh-people { border-radius: 0 0 9999px 9999px; } }
.hh .pp { position: relative; flex: none; }
.hh .pp picture, .hh .pp img { display: block; width: 100%; height: auto; }
/* A: five on one curve, the middle one largest and in front */
.hh-lineup .pp { margin-left: -10%; }
.hh-lineup .pp-0 { margin-left: 0; }
.hh-lineup .pp-0, .hh-lineup .pp-4 { width: 25%; z-index: 1; }
.hh-lineup .pp-1, .hh-lineup .pp-3 { width: 31%; z-index: 2; }
.hh-lineup .pp-2 { width: 38%; z-index: 3; }
/* B: two rows, like a team photo */
.hh-rows .hh-back, .hh-rows .hh-front { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; }
.hh-rows .hh-back { bottom: 22%; }
.hh-rows .hh-front { z-index: 2; }
.hh-rows .hh-front .pp { width: 26%; margin-left: -7%; }
.hh-rows .hh-back .pp { width: 21%; margin-left: -3%; }
.hh-rows .hh-front .pp-0, .hh-rows .hh-back .pp-0 { margin-left: 0; }
.hh-rows .hh-front .pp-2 { z-index: 2; }
/* C: one face with a "Meet our clinicians" card (the round faces from the "You'll see" line) */
.hh-teamcard { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px;
padding: 10px 16px 10px 10px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .94); box-shadow: var(--shadow);
color: var(--ink); text-decoration: none; }
.hh-teamcard:hover b { color: var(--blue-deep); text-decoration: underline; }
.hh-faces { display: flex; }
.hh-faces .face { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; object-position: 50% 22%; }
.hh-faces > * + * { margin-left: -9px; }
.hh-teamtext { display: grid; font-size: .8125rem; line-height: 1.3; }
.hh-teamtext b { font-size: .9375rem; }
.hh-teamtext span { color: var(--muted); }
@media (max-width: 559px) { .hh-teamtext span { display: none; } .hh-faces .face { width: 26px; height: 26px; } }
@media (min-width: 960px) { .hh-lead .hh-teamcard { right: 24px; bottom: 200px; padding: 14px 20px 14px 14px; } .hh-faces .face { width: 38px; height: 38px; } }
/* D: the whole team in one row under the text, across the hero */
.hh-strip .hh-people { border-radius: 0; }
.hh-strip .pp { width: 22%; margin-left: -5%; }
.hh-strip .pp-0 { margin-left: 0; }
@media (min-width: 960px) {
.hh-strip.hero-team { align-items: flex-start; min-height: 0; padding-bottom: 280px; }
.hh-strip .hero-fig { left: max(0px, calc((100% - 1440px) / 2)); right: max(0px, calc((100% - 1440px) / 2)); top: auto; bottom: 0; width: auto; height: 250px; }
.hh-strip .pp { width: 12%; margin-left: -2.2%; }
.hh-strip .pp-0 { margin-left: 0; }
}
/* home team options, round 2 (20 Oct): bigger groups that may run under the card's edge, a shallow curve so the outer
people are not cut, and the team card's faces drawn in front (the hero photo rules sent them behind the card) */
.hh-teamcard picture { position: static; z-index: auto; height: auto; }
.hh-teamcard .face { width: 32px; height: 32px; }
/* A, round 2: a group in depth. The middle person stands in front and largest; the others stand a little further back
and higher, fading out at the bottom (faded cut-outs), so the group fills the height without cutting anyone. */
.hh-lineup .hh-people { display: block; border-radius: 0; overflow: visible; }
.hh-lineup .pp { position: absolute; bottom: 0; margin: 0; transform: translateX(-50%); height: 74%; width: auto; }
.hh-lineup .pp picture, .hh-lineup .pp img { width: auto; height: 100%; }
.hh-lineup .pp-2 { left: 50%; z-index: 5; }
.hh-lineup .pp-1 { left: 27%; height: 61%; bottom: 7%; z-index: 4; }
.hh-lineup .pp-3 { left: 73%; height: 61%; bottom: 7%; z-index: 4; }
.hh-lineup .pp-0 { left: 9%; height: 50%; bottom: 14%; z-index: 3; }
.hh-lineup .pp-4 { left: 91%; height: 50%; bottom: 14%; z-index: 3; }
.hh-teamcard img { position: static; transform: none; top: auto; left: auto; }
@media (min-width: 960px) {
.hh-lineup .hero-fig { bottom: 0; }
.hh-lineup .pp-2 { height: 86%; }
.hh-lineup .pp-1, .hh-lineup .pp-3 { height: 72%; bottom: 8%; }
.hh-lineup .pp-0, .hh-lineup .pp-4 { height: 60%; bottom: 16%; }
.hh-lineup .pp-0 { left: 11%; } .hh-lineup .pp-4 { left: 89%; }
.hh-rows .hh-people { border-radius: 0 0 50% 50% / 0 0 20% 20%; }
.hh-rows .hh-front .pp { width: 26%; margin-left: -7%; }
.hh-rows .hh-back .pp { width: 21%; margin-left: -3%; }
.hh-rows .hh-front .pp-0, .hh-rows .hh-back .pp-0 { margin-left: 0; }
.hh-rows .hh-back { bottom: 24%; }
.hh-teamcard .face, .hh-teamcard img { width: 38px; height: 38px; }
}
/* round 3: A less crowded (smaller, spread); C's faces win over the cut-out hero's own photo rules */
@media (min-width: 960px) {
.hh-lineup .pp-2 { height: 68%; }
.hh-lineup .pp-1, .hh-lineup .pp-3 { height: 56%; bottom: 7%; }
.hh-lineup .pp-0, .hh-lineup .pp-4 { height: 46%; bottom: 14%; }
.hh-lineup .pp-1 { left: 26%; } .hh-lineup .pp-3 { left: 74%; }
.hh-lineup .pp-0 { left: 12%; } .hh-lineup .pp-4 { left: 90%; }
}
.hh-lead .hh-teamcard picture { display: block; position: static; z-index: auto; width: auto; height: auto; overflow: visible; }
.hh-lead .hh-teamcard img { position: static; transform: none; width: 32px; height: 32px; object-fit: cover; }
@media (min-width: 960px) { .hh-lead .hh-teamcard img { width: 38px; height: 38px; } }
@media (min-width: 960px) { .hh-lineup .pp-3 { left: 71%; } .hh-lineup .pp-4 { left: 87%; } }
/* C2: the team card sits where Ms Ghania's name tag was (the figcaption's place) */
.hh-leadtag .hh-teamcard { right: auto; bottom: auto; left: 20px; top: 212px; transform: translateY(-100%); }
@media (min-width: 768px) { .hh-leadtag .hh-teamcard { left: 32px; } }
@media (min-width: 960px) { .hh-leadtag .hh-teamcard { left: max(116px, calc(696px - 100%)); top: auto; bottom: 72px; right: auto; transform: none; } }
@media (max-width: 559px) {
.hh-leadtag .hh-teamcard { max-width: calc(100% - 40px); gap: 10px; padding: 8px 12px 8px 8px; }
.hh-lead .hh-teamcard img { width: 26px; height: 26px; }
.hh-faces > * + * { margin-left: -10px; }
}
/* ---------- Team bar under the home hero (option C3, 20 Oct): the landing pages' trust strip, with the team ---------- */
/* the bar under the hero, one component: the team bar (home) and the licence strip (hubs, services) */
.team-strip, .trust-strip { position: relative; z-index: 2; margin-top: -36px;
background: linear-gradient(transparent 36px, var(--paper) 36px); } /* the hero shows behind its top half */
@media (min-width: 960px) { .team-strip, .trust-strip { margin-top: -48px; background: linear-gradient(transparent 48px, var(--paper) 48px); } }
.tstrip-lead > span > b { font-size: 1.0625rem; }
.tstrip-marks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.tstrip-marks li { min-width: 0; }
.tstrip-marks b { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.tstrip-marks span { display: block; margin-top: 3px; font-size: .75rem; line-height: 1.35; color: var(--muted); }
@media (min-width: 860px) { .tstrip-marks { flex: 1; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 20px 32px; }
.tstrip-marks span { white-space: nowrap; } }
.tstrip { display: flex; flex-direction: column; gap: 16px; padding: 18px; background: var(--paper); border-radius: 18px;
box-shadow: 0 1px 2px rgba(0, 58, 115, .06), 0 18px 40px -18px rgba(0, 58, 115, .35); }
.tstrip-lead { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
color: var(--ink); text-decoration: none; }
.tstrip-lead > svg { flex: none; width: 30px; height: 30px; color: var(--blue); }
.tstrip-lead b { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.tstrip-lead > span > span { display: block; margin-top: 3px; font-size: .75rem; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.tstrip-lead:hover b { color: var(--blue-deep); text-decoration: underline; }
.tstrip-faces { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; }
.tstrip-faces a { display: grid; justify-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: .75rem; font-weight: 600; line-height: 1.2; text-align: center; }
.tstrip-faces a:hover span { color: var(--blue-deep); text-decoration: underline; }
.tstrip-faces .face { width: 48px; height: 48px; border: 2px solid var(--tint-line); }
@media (min-width: 860px) {
.tstrip { flex-direction: row; align-items: center; gap: 28px; padding: 20px 28px; }
.tstrip-lead { flex: none; padding: 0 28px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
.tstrip-faces { flex: 1; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.tstrip-faces .face { width: 52px; height: 52px; }
}
.opt-after { padding: 48px 0 64px; background: var(--paper); color: var(--muted); font-size: .875rem; }
.team-strip + .sec, .trust-strip + .sec { padding-top: 48px; } /* as the landing pages' trust strip */
@media (min-width: 960px) { .team-strip + .sec, .trust-strip + .sec { padding-top: 72px; } }
/* option C on phones: the band is too short for both labels, so the team card takes the name tag's place (as C2) */
@media (max-width: 959px) { .hh-lead:not(.hh-leadtag) .hero-fig figcaption { display: none; }
.hh-lead:not(.hh-leadtag) .hh-teamcard { right: auto; bottom: auto; left: 20px; top: 212px; transform: translateY(-100%); max-width: calc(100% - 40px); } }
/* the team bar on the line between two sections (home, Gregory 20 Oct): half the colour above, half the colour below */
.team-edge { position: relative; z-index: 2; background: linear-gradient(var(--edge-top, var(--paper)) 50%, var(--edge-bottom, var(--mist)) 50%); }
.sec:has(+ .team-edge) { padding-bottom: 48px; }
.team-edge + .sec { padding-top: 48px; }
@media (min-width: 960px) { .sec:has(+ .team-edge) { padding-bottom: 64px; } .team-edge + .sec { padding-top: 64px; } }
/* ---------- Phones: the photo sits directly on the card's top edge, as on the landing pages (Gregory 20 Oct: it
looked disconnected). No gap under a photo band, and the breadcrumbs move above the photo. ---------- */
@media (max-width: 959px) {
.hero-cutout .wrap > .hero-grid:first-child, .hero-photo .wrap > .hero-grid:first-child, .hero-team .wrap > .hero-grid:first-child { padding-top: 0; }
.hero-team:has(.crumbs), .hero-photo:has(.crumbs), .hero-cutout:has(.crumbs) { padding-top: 0; }
.hero-team .crumbs, .hero-photo .crumbs, .hero-cutout .crumbs { display: flex; align-items: center; height: 44px; }
.hero-team:has(.crumbs) .hero-fig, .hero-photo:has(.crumbs) .hero-fig, .hero-cutout:has(.crumbs) .hero-fig { top: 44px; }
.hero-team:has(.crumbs) .hero-grid { margin-top: 264px; }
.hero-photo:not(.hero-no-phone-photo):has(.crumbs) .hero-grid, .hero-cutout:has(.crumbs) .hero-grid { margin-top: 236px; }
.hero-no-phone-photo:has(.crumbs) .hero-grid { margin-top: 12px; } /* no photo on phones (Contact): no photo space */
.hero-photo:has(.crumbs)::after {
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 214px, #000 344px);
mask-image: linear-gradient(180deg, transparent 0, transparent 214px, #000 344px);
}
}
/* in-page targets (topic links land on their section, 20 Oct): clear of the sticky header */
.article-part[id], section[id], .faq-item[id] { scroll-margin-top: calc(var(--top-h) + 16px); }
/* Lead-in lists (every item starts with a bold title; Gregory 20 Oct): the title on its own line, the explanation
under it in the text colour; numbered ones get small round markers instead of big blue digits */
.leadin { list-style: none; padding-left: 0 !important; display: grid; gap: 18px; }
.leadin > li, .art-keyline .article-part .prose .leadin > li + li, .prose .leadin > li + li { margin-top: 0; }
.leadin .li-t { display: block; color: var(--ink); font-weight: 600; line-height: 1.45; }
.leadin .li-d { display: block; margin-top: 3px; color: var(--text); }
ol.leadin { counter-reset: li; }
ol.leadin > li { position: relative; padding-left: 42px; counter-increment: li; }
ol.leadin > li::before { content: counter(li); position: absolute; left: 0; top: -1px; display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--blue-deep); font-size: .875rem; font-weight: 700; }
/* Profiles on phones (Gregory 20 Oct): the clinician's cut-out across the top on the gradient, standing on the card,
as the home hero; the years badge sits on the photo. Computers keep the portrait beside the card. */
.prof-fig { display: none; }
@media (max-width: 959px) {
.hero-person-cut { padding-top: 0; }
.hero-person-cut .portrait { display: none; }
.hero-person-cut .prof-fig { display: block; top: 44px; height: 236px; overflow: hidden; }
.hero-person-cut .prof-fig picture { position: relative; z-index: 0; display: flex; justify-content: center; align-items: flex-start; height: 100%; }
.hero-person-cut .prof-fig img { width: auto; height: 128%; object-fit: contain; }
.hero-person-cut .prof-fig .exp-badge { left: 20px; right: auto; bottom: 14px; transform: none; }
.hero-person-cut .crumbs { display: flex; align-items: center; height: 44px; }
.hero-person-cut .hero-grid { margin-top: 236px; }
}
/* Compact people row (Gregory 21 Oct, trial on /anxiety-treatment/): small photo, name, role, one credential, the
years badge, then a WhatsApp text link ("Book with ...") and "View profile". Fixed tracks (3 / 2 / 1, as the cards) */
.people { display: grid; gap: 12px; list-style: none; padding: 0; }
@media (min-width: 720px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; } }
@media (min-width: 1060px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; } }
.sec .wrap > .prose + .people { margin-top: 28px; }
.person { display: flex; flex-direction: column; padding: 16px 16px 4px; border: 1px solid var(--line);
border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); }
.person-top { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
.person-head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; } /* fits a two-line name + the badge */
.person-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.person-n::after { content: ""; position: absolute; inset: 0; } /* the whole top of the tile opens the profile */
.person-top:hover .person-n { color: var(--blue-deep); text-decoration: underline; }
.person-ph { flex: none; line-height: 0; }
.person-ph picture { display: block; line-height: 0; }
.person .face { width: 56px; height: 56px; border-radius: 50%; }
.person .face.initials { font-size: 1rem; }
.person-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-n { color: var(--ink); font-weight: 600; line-height: 1.3; text-decoration: none; }
.person-r { margin-top: 10px; font-size: var(--fs-small); line-height: 1.35; color: var(--blue); }
/* the cards' ticked credentials, smaller (Gregory 21 Oct) */
.person-creds { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.4; color: var(--text); }
.person-creds li { display: flex; align-items: flex-start; gap: 8px; }
.person .exp-badge { position: static; transform: none; box-shadow: none; } /* the card's badge, under the name beside the photo (Gregory 21 Oct) */
/* the links sit in a footer row at the bottom of every tile, so they line up across a row (as on the cards) */
.person-links { display: flex; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: auto;
border-top: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; }
.person-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.person-links a:hover { text-decoration: underline; }
.person-wa { color: var(--wa-ink); }
.person-wa svg { width: 18px; height: 18px; flex: none; color: var(--wa); }
.person-more { color: var(--blue); }
/* ---------- /options/booking-widget/ (mock, Gregory 21 Oct): where the online booking widget goes ---------- */
.bw-note { padding: 10px 0; background: var(--tint); border-bottom: 1px solid var(--tint-line); font-size: var(--fs-small); color: var(--ink); }
.bw-note a { font-weight: 600; }
.bw-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
color: var(--blue); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; white-space: nowrap; }
.bw-more svg { width: 16px; height: 16px; }
.bw-more:hover { text-decoration: underline; }
/* the widget card (drawn from Gregory's screenshot with the site's tokens) */
.bw-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); text-align: left; color: var(--ink); }
.bw-title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.bw-sub { margin-top: 4px; font-size: var(--fs-small); color: var(--text); }
.bw-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.bw-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--line);
border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.bw-slot span { font-size: .8125rem; color: var(--text); }
.bw-slot b { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.bw-slot:hover, .bw-slot.is-on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.bw-pick { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.bw-nav { display: flex; gap: 4px; }
.bw-nav button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.bw-nav button:disabled { color: var(--line); cursor: default; }
.bw-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.bw-d { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border: 0; border-radius: 10px; background: var(--mist);
color: var(--ink); font: inherit; cursor: pointer; }
.bw-d span { font-size: .8125rem; color: var(--text); }
.bw-d b { font-size: 1.125rem; font-weight: 700; }
.bw-d.is-off { background: none; color: var(--muted); cursor: default; }
.bw-d.is-off span, .bw-d.is-off b { color: var(--muted); font-weight: 400; }
.bw-d.is-on { background: var(--blue); color: #fff; }
.bw-d.is-on span { color: #fff; }
.bw-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.bw-foot a { color: var(--text); text-decoration: none; white-space: nowrap; }
/* 2. closing: the WhatsApp ask left, the widget right on computers; stacked on phones (WhatsApp first) */
.bw-final { display: grid; gap: 36px; }
.bw-final-w { width: 100%; max-width: 460px; margin: 0 auto; }
@media (min-width: 960px) {
.bw-final { grid-template-columns: minmax(0, 1fr) 460px; align-items: center; gap: 64px; }
.bw-final-ask { text-align: left; }
.bw-final-ask .faces { justify-content: flex-start; }
.bw-final-ask h2, .bw-final-ask .final-sub { margin-left: 0; }
.final .bw-final-ask .act { align-items: flex-start; }
.final .bw-final-ask .reassure { text-align: left; }
}
/* the widget opened from the hero: a dialog on computers, a sheet from the bottom on phones */
.bw-dialog { width: calc(100% - 32px); max-width: 460px; padding: 0; border: 0; background: none; overflow: visible; }
.bw-dialog::backdrop { background: rgba(17, 27, 33, .45); }
.bw-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--mist);
color: var(--ink); font-size: 1.375rem; line-height: 1; cursor: pointer; }
@media (max-width: 559px) {
.bw-dialog { width: 100%; max-width: none; margin: auto 0 0; }
.bw-dialog .bw-card { border-radius: 20px 20px 0 0; padding-bottom: 32px; }
}
/* the booking pop-up mock behind "See available times" (preview build only, assets/booking-mock.js; Gregory 22 Oct):
soonest times or a day, then one field (a WhatsApp number), then a confirmation. Every screen: a header (the title,
close) over a divider, a body that scrolls, and a footer line. */
.bm .bm-card { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.bm-head { position: relative; padding: 18px 24px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F4F8FE 0%, var(--paper) 100%); }
.bm-head .bw-title { padding-right: 44px; }
.bm-body { padding: 4px 24px 24px; overflow-y: auto; }
.bm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--line);
background: var(--mist); font-size: .75rem; color: var(--muted); }
.bm-foot span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.bm-foot svg { width: 13px; height: 13px; }
.bm .bw-x { top: 14px; right: 16px; }
/* no blue ring on the close button (Gregory 22 Oct: it read as the main action); keyboard focus shows a darker fill */
.bm .bm-card:focus, .bm .bw-x:focus { outline: none; }
.bm .bw-x:focus-visible { background: var(--line); box-shadow: inset 0 0 0 2px #B9C9D9; }
/* step 1: who calls (the page's specialists' faces) and three small promises */
.bm-who { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-small); color: var(--text); line-height: 1.45; }
.bm-faces { display: flex; flex: none; }
.bm-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--tint); border: 2px solid #fff; }
.bm-faces img + img { margin-left: -10px; }
.bm-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bm-perks span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--blue-deep); font-size: .75rem; font-weight: 600; }
.bm-perks svg { width: 13px; height: 13px; }
.bm-h { margin-top: 20px; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.bm .bw-slots { margin-top: 10px; }
.bm .bw-slot { cursor: pointer; font: inherit; background: var(--paper); color: var(--ink); text-align: left; }
.bm .bw-slot b { white-space: nowrap; }
@media (max-width: 559px) { .bm .bw-slot { padding: 10px 12px; } .bm .bw-slot b { font-size: 1.0625rem; } }
.bm-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.bm-day { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: 10px;
background: var(--mist); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.bm-day span { font-size: .8125rem; color: var(--text); }
.bm-day b { font-size: 1rem; font-weight: 700; }
.bm-day:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.bm-day.is-on { background: var(--blue); color: #fff; }
.bm-day.is-on span { color: #fff; }
/* step 2: the chosen time (with "Change"), one field, the button, what happens next */
.bm-when { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--mist); color: var(--ink); }
.bm-when > svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.bm-when > span { display: grid; gap: 1px; }
.bm-when small { font-size: .75rem; color: var(--text); }
.bm-change { margin-left: auto; padding: 6px 2px; border: 0; background: none; color: var(--blue-deep); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.bm-change:hover { text-decoration: underline; }
.bm-form { display: grid; gap: 10px; margin-top: 18px; }
.bm-label { font-weight: 600; color: var(--ink); }
.bm-phone { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.bm-phone input { min-height: 50px; padding: 10px 14px; border: 1px solid #B9C9D9; border-radius: var(--r); font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--paper); }
.bm-phone input:focus-visible { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.bm-err { font-size: var(--fs-small); color: #B42318; }
/* the confirm button is the brand blue, not WhatsApp green (Gregory 22 Oct): it books the call; WhatsApp only carries
the confirmation, and the page's green buttons stay the WhatsApp way to book */
.bm-go { width: 100%; justify-content: center; margin-top: 4px; background: linear-gradient(100deg, #0052C4 0%, #0073E6 100%); color: #fff;
box-shadow: 0 6px 18px rgba(0, 89, 179, .25); }
.bm-go:hover { background: linear-gradient(100deg, #00459F 0%, #0062C4 100%); color: #fff; }
.bm-next { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--tint-line); border-radius: 12px; background: #F4F8FE; }
.bm-next-h { font-size: .8125rem; font-weight: 700; color: var(--ink); }
.bm-next ol { display: grid; gap: 10px; margin-top: 10px; padding: 0; list-style: none; }
.bm-next li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--text); }
.bm-next li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--blue); }
.bm-next li.is-done svg { color: #12A150; }
.bm-next b { color: var(--ink); }
/* step 3 */
.bm-booked { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bm-booked svg { width: 20px; height: 20px; color: #12A150; flex: none; }
.bm-close { width: 100%; justify-content: center; margin-top: 18px; }
/* inline in the closing section (preview only): the card grows with its content, no inner scroll */
.bm-inline .bm-card { max-height: none; border-radius: var(--r-xl); } /* overflow stays hidden: the header and footer
fills keep the card's round corners */
.bm-inline .bm-body { overflow: visible; }
.bm-inline { min-height: 420px; text-align: left; }
@media (max-width: 559px) {
.bm .bm-card { max-height: 92vh; max-height: 92dvh; }
.bm-inline .bm-card { max-height: none; }
.bm-head, .bm-body, .bm-foot { padding-left: 20px; padding-right: 20px; }
}
/* ---------- /options/hero-visual/ (21 Oct): three finishes for the team picture, computers only ---------- */
@media (min-width: 960px) {
/* all three end at the trust bar's edge (the page content edge), as tried on the booking-widget mock */
/* A. Panel: as tall as the card, the cut-out cards' gradient, the card's corners and shadow; its edges crop */
.hv-a .hero-team .hero-grid, .hv-d .hero-team .hero-grid { position: relative; }
.hv-a .hero-team .hero-fig, .hv-d .hero-team .hero-fig { top: 0; bottom: 0; left: calc(var(--card-w) + 24px); right: 0; width: auto; height: auto;
overflow: hidden; border-radius: var(--r-xl); }
.hv-a .hero-team .hero-fig { background: var(--wash); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow-lg); }
/* D: as A without the fill, edge or shadow (Gregory 21 Oct) */
.hv-a .tm-cut-bowl.team-n3 .pp, .hv-d .tm-cut-bowl.team-n3 .pp { flex: none; }
.hv-a .tm-cut-bowl.team-n3 .pp:nth-child(2), .hv-d .tm-cut-bowl.team-n3 .pp:nth-child(2) { width: 68%; }
.hv-a .tm-cut-bowl.team-n3 .pp:nth-child(1), .hv-a .tm-cut-bowl.team-n3 .pp:nth-child(3),
.hv-d .tm-cut-bowl.team-n3 .pp:nth-child(1), .hv-d .tm-cut-bowl.team-n3 .pp:nth-child(3) { width: 54%; }
.hv-a .tm-cut-bowl.team-n3 .pp + .pp, .hv-d .tm-cut-bowl.team-n3 .pp + .pp { margin-left: -20%; }
.hv-a .tm-cut-bowl.team-n3 .tm-tags .pp:first-child .tag, .hv-d .tm-cut-bowl.team-n3 .tm-tags .pp:first-child .tag { left: 34%; transform: none; }
.hv-a .tm-cut-bowl.team-n3 .tm-tags .pp:last-child .tag, .hv-d .tm-cut-bowl.team-n3 .tm-tags .pp:last-child .tag { left: auto; right: 34%; transform: none; }
.hv-a .tm-cut .tag, .hv-d .tm-cut .tag { bottom: 20px; }
.hv-a .tm-cut.team-n3 .pp:nth-child(1) .tag, .hv-a .tm-cut.team-n3 .pp:nth-child(3) .tag,
.hv-d .tm-cut.team-n3 .pp:nth-child(1) .tag, .hv-d .tm-cut.team-n3 .pp:nth-child(3) .tag { bottom: 64px; }
/* D with two people (/options/hero-d2/): equal widths, overlapping, 1% past each side; tags at the outer edges */
.hv-d .tm-cut-bowl.team-n2 .pp { flex: none; width: 64%; }
.hv-d .tm-cut-bowl.team-n2 .pp + .pp { margin-left: -26%; }
.hv-d .tm-cut-bowl.team-n2 .tm-tags .pp:first-child .tag { left: 4%; transform: none; }
.hv-d .tm-cut-bowl.team-n2 .tm-tags .pp:last-child .tag { left: auto; right: 4%; transform: none; }
}
}
/* ---------- /options/hero-bg/ (21 Oct): backgrounds for the team picture panel, no outlines ---------- */
.hb .hero-fig { isolation: isolate; }
.hb-wash .hero-fig { background: var(--wash); }
.hb-glass .hero-fig { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); }
.hb-spot .hero-fig::before { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(100deg, #0052C4 0%, #0073E6 45%, #1A8CFF 100%); /* the h1 highlight's gradient (Gregory 21 Oct); the circle reaches the
panel's (card's) edges and fades softly */
-webkit-mask-image: radial-gradient(circle farthest-side at 50% 50%, #000 0%, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .2) 85%, transparent 100%);
mask-image: radial-gradient(circle farthest-side at 50% 50%, #000 0%, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .2) 85%, transparent 100%); }
.hb-mesh .hero-fig { background: radial-gradient(60% 55% at 12% 18%, #D1FAE5 0%, rgba(209, 250, 229, 0) 70%),
radial-gradient(55% 60% at 92% 22%, #E4E3FD 0%, rgba(228, 227, 253, 0) 70%),
radial-gradient(75% 60% at 50% 100%, #CFE3FB 0%, rgba(207, 227, 251, 0) 75%), #F2F7FD; }
.hb-arcs .hero-fig { background: radial-gradient(circle at 50% 100%, #C9E0FA 0 52%, #E1EEFD 52% 74%, rgba(225, 238, 253, 0) 74%); } /* the outer arc rises above the heads */
.hb-clinic .hero-fig { background: rgba(255, 255, 255, .2); }
.hb-clinic .hero-fig::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: url(/assets/img/reception-1200.jpg) center / cover;
filter: blur(9px) saturate(.85) brightness(1.06); }
.hb-blue .hero-fig { background: linear-gradient(160deg, #4C9BF0 0%, #0B5FC5 100%); }
/* ---------- /options/hero-polish/ (21 Oct): finishing touches for the team picture, no outlines ---------- */
.hp .hero-fig { isolation: isolate; }
/* 3. depth: a close contact shadow and a wide soft one, in the brand's deep blue rather than grey */
.hp-depth .tm-people .pp img { filter: drop-shadow(0 0 2px rgba(12, 40, 84, .18)) drop-shadow(0 6px 26px rgba(12, 40, 84, .34)); }
/* 4. name and role: solid white (frosted read grey over the suits), the role in a quieter second line */
.hp-roles .tm-cut .tag { padding: 7px 12px; background: #fff; box-shadow: 0 6px 20px rgba(12, 40, 84, .16); font-size: .75rem; }
.hp-roles .tm-cut .tag b { font-size: .8125rem; }
/* 6. white glass: as white as the hero card (80% white); the backdrop's colour is kept (saturate) so it never greys */
.hp-glass .hero-fig { background: linear-gradient(165deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 55%, rgba(255, 255, 255, .7) 100%);
-webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 18px 44px -12px rgba(0, 89, 179, .2); }
/* 11-16. one tag for the whole picture instead of name cards, at the bottom or the top of the frame */
.hp-frost .hero-fig { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg); }
.hp-onetag { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(12, 40, 84, .16);
color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.hp-onetag .i { width: 18px; height: 18px; color: var(--blue); flex: none; }
.hp-teamlink { color: var(--ink); text-decoration: none; } /* 20-22: a link to the page's team section */
.hp-teamlink:hover { color: var(--blue-deep); box-shadow: 0 8px 24px rgba(12, 40, 84, .22); }
.hp-teamlink .i:last-child { width: 16px; height: 16px; color: var(--muted); margin-right: -4px; }
.hp-pill-b .hp-onetag, .hp-pill-t .hp-onetag { bottom: 16px; } /* phones: always at the bottom, the heads fill the top */
@media (min-width: 960px) { .hp-pill-b .hp-onetag { bottom: 24px; } .hp-pill-t .hp-onetag { top: 24px; bottom: auto; }
.hp-plain .hp-onetag { padding: 0; background: none; box-shadow: none; } /* 14: plain text and icon on the glass */
}
/* 5. topics: frosted chips floating in the space above the heads */
.hp-topics { display: none; }
@media (min-width: 960px) {
.hp-roles .tm-cut.team-n3 .pp:nth-child(1) .tag, .hp-roles .tm-cut.team-n3 .pp:nth-child(3) .tag { bottom: 76px; }
.hp-topics { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hp-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--r);
background: #fff; box-shadow: 0 6px 20px rgba(12, 40, 84, .12); color: var(--ink); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.hp-chip .i { width: 16px; height: 16px; color: var(--blue); }
.hp-chip:nth-child(odd) { left: 6%; } /* two tidy columns, stepped down in turn */
.hp-chip:nth-child(even) { right: 6%; }
.hp-chip:nth-child(1) { top: 6%; }
.hp-chip:nth-child(2) { top: 13%; }
.hp-chip:nth-child(3) { top: 20%; }
.hp-chip:nth-child(4) { top: 27%; }
/* 9-10. names on top: each card sits 10px above its person's head (--head: where the head starts in the photo);
the side cards keep 16px from the panel's edges; a long name wraps rather than cover the lead's head */
.hp-top .hero-team-cut .tm-cut.team-n3 .tm-tags .pp .tag { bottom: calc(100% - var(--head, 8%) + 10px); white-space: normal; }
.hp-top .hero-team-cut .tm-cut.team-n3 .tm-tags .pp:first-child .tag { left: 40%; max-width: 64%; }
.hp-top .hero-team-cut .tm-cut.team-n3 .tm-tags .pp:nth-child(2) .tag { left: auto; right: 31%; transform: none; max-width: 52%;
bottom: calc(100% - var(--head, 8%) + 22px); } /* the lead's card ends where his head ends and sits a little higher,
clear of both side cards */
.hp-top .hero-team-cut .tm-cut.team-n3 .tm-tags .pp:last-child .tag { right: 40%; max-width: 58%; }
}
@media (min-width: 960px) and (max-width: 1179px) { /* narrower panel: the cards wrap and grow taller, so the lead's goes higher */
.hp-top .hero-team-cut .tm-cut.team-n3 .tm-tags .pp:nth-child(2) .tag { bottom: calc(100% - var(--head, 8%) + 60px); }
}