/* Pain and Wellness Clinic: the page tokens (DIRECTION.md: Linen & Harbour, Newsreader + Hanken Grotesk)
   and the little the Taste kit lacks. Loaded after the kit's stylesheets. */
:root {
  --p-bg: #f3f1ec; --p-surface: #e6e2d9; --p-ink: #1d2530; --p-muted: #5a6270;
  --p-accent: #2c5877; --p-accent-ink: #ffffff; --p-action: #2c5877; --p-action-ink: #ffffff;
  --p-inv-bg: #1d2530; --p-inv-surface: #273141; --p-inv-ink: #f3f1ec; --p-inv-muted: #b7bec9;
  --p-inv-accent: #9fc3de; --p-inv-accent-ink: #1d2530; --p-inv-action: #9fc3de; --p-inv-action-ink: #1d2530;
  --font-display: "Newsreader", Georgia, serif;
  --font-text: "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.018em;
  --display-tracking-xl: -0.025em;
  --ly-scale: 1.06;
  /* a broad, partly older audience (PRODUCT.md): body text one step up from the kit's 16 */
  --t-body: 17px;
}
@media (min-width: 1024px) { :root { --t-body: 18px; } }

body { font-size: var(--t-body); }
::selection { background: color-mix(in oklab, var(--p-accent) 22%, var(--p-bg)); color: var(--p-ink); }
.ground-inverse ::selection { background: color-mix(in oklab, var(--p-inv-accent) 35%, var(--p-inv-bg)); color: var(--p-inv-ink); }
html { accent-color: var(--p-accent); }
a { text-underline-offset: 0.18em; }

/* the client's logo (reference/old-images/logo-1.png on a transparent ground) */
.nav__logo img { display: block; height: 44px; width: auto; }
@media (max-width: 639px) { .nav__logo img { height: 34px; } }

/* team tiles: the old headshots are 390 x 260 (3:2) */
#team .tile { --tile-ratio: 3 / 2; }
#team .tile__media > img { object-position: 50% 30%; }
.tile__role { color: var(--muted); font-size: var(--t-small); margin-top: calc(-1 * var(--s-3)); }

/* the contact page's three blocks: location, phone, hours */
.contact-list { display: grid; gap: var(--s-3); align-content: start; }
.contact-list h2, .contact-list h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; margin: 0; }
.contact-list address { font-style: normal; }
.contact-phone { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.contact-phone:hover { color: var(--action); text-decoration: underline; }

/* the plain pages (privacy, 404) */
.prose { max-width: 64ch; }
.prose h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); }
.prose p, .prose li { max-width: 64ch; }

/* team: one portrait a row on a phone, so no portrait is drawn at a different size from the others */
@media (max-width: 639px) { #team .grid > .tile { grid-column: 1 / -1; } }

/* contact: room between the lead and the three blocks */
.contact-grid { margin-top: var(--s-8); }
@media (max-width: 1023px) { .contact-grid { margin-top: var(--s-7); } .contact-grid > [class*="span-"] + [class*="span-"] { margin-top: var(--s-7); } }

/* ---------------------------------------------------------------- v2: the old site's pages in the new design */

/* long reading sections (before your visit, the FAQ, benefits) grow with their text instead of one fixed screen */

/* home: the three intro columns (we keep ahead, how you benefit, office hours) */

.hours-card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-6); }
.hours-card .hours { gap: var(--s-3) var(--s-5); }

/* footer row 1: the old site's band (locate us, call us, book in) */
.close--band .band__item { display: grid; gap: var(--s-2); align-content: start; }
.band__label { margin: 0; color: var(--muted); font-size: var(--t-small); }
.band__big { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.1; letter-spacing: var(--display-tracking); color: var(--ink); text-decoration: none; justify-self: start; }
.band__big:hover { color: var(--action); text-decoration: underline; text-decoration-thickness: 1px; }

@media (max-width: 1023px) { .close--band .grid > [class*="span-"] { grid-column: 1 / -1; } .close--band .grid { row-gap: var(--s-6); } }
.footer__head { font: 500 var(--t-body)/1.3 var(--font-text); margin: 0; }
.footer__lede { max-width: 48ch; }

/* ---------------------------------------------------------------- v3: every old page, its own words */

/* home: the hero's second line, and the old slider's other two slides as two tiles */

.slides .tile { --tile-ratio: 16 / 10; }

/* home: team call to action (the old "Use our contact page..." strip) */

#team a.tile { text-decoration: none; }

/* about */

.benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.benefits li { padding: var(--s-5) 0 var(--s-5) 36px; border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); position: relative; max-width: 60ch; }
.benefits li::before { content: ""; position: absolute; left: 4px; top: calc(var(--s-5) + 0.55em); width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.benefits strong { font-weight: 500; }
@media (max-width: 1023px) { .benefits { grid-template-columns: minmax(0, 1fr); } }

/* doctors */

.doc-role { margin-top: var(--s-2); }
.quals { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }

@media (max-width: 1023px) { #profile .grid > [class*="span-"] { grid-column: 1 / -1; } #profile .grid { row-gap: var(--s-6); } }

/* educational resources, privacy, 404 */
.resources p, .prose p { max-width: 64ch; margin: 0; }
.prose { display: grid; gap: var(--s-4); }
.prose h2 { margin: var(--s-5) 0 0; }

/* contact */
.contact-list p { margin: 0; }
.contact-phone { font-size: inherit; font-family: inherit; min-height: 0; display: inline; color: var(--action); text-decoration: underline; }
.quals { list-style: none; padding-left: 0; }
.quals li { padding-left: 1.2em; text-indent: -1.2em; }
.quals li::before { content: "\2013\00a0\00a0"; }

/* ---------------------------------------------------------------- round 2 (client feedback, 8 Nov 2026) */

/* sections sized by their content with even, moderate gaps (the kit's one-screen-per-section heights
   left huge empty gaps). :not(.x-none) lifts these over the kit's own height rules. */
/* the first section clears the fixed header */
/* two light sections in a row get one gap between them, not two */
/* the footer's band sits a gap under the last light section; its link rows follow at the same rhythm */
footer.closing > .wrap { row-gap: var(--s-8); }

/* FAQ: every answer collapsed until its question is clicked, like the old site */
.acc { border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.acc__item { border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.acc__item > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 44px; padding: var(--s-5) 0; cursor: pointer; }
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__item > summary h2 { font: 500 var(--t-lead)/1.4 var(--font-text); letter-spacing: 0; margin: 0; transition: color 150ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .acc__item > summary:hover h2 { color: var(--action); } }
.acc__item > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: var(--r-sm); }
.acc__icon { flex: none; position: relative; width: 20px; height: 20px; color: var(--action); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease); }
.acc__icon::after { transform: rotate(90deg); }
.acc__item[open] .acc__icon::after { transform: rotate(0deg); }
.acc__body { display: grid; gap: var(--s-3); padding: 0 0 var(--s-6); }
.acc__body p { margin: 0; max-width: 64ch; }
.faq-page { max-width: 860px; }
@media (prefers-reduced-motion: reduce) { .acc__icon::before, .acc__icon::after, .acc__item > summary h2 { transition: none; } }

/* contact: the Google Map from the old site */
.map-frame { position: relative; aspect-ratio: 16 / 6; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.map-frame > :is(iframe, img) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
@media (max-width: 1023px) { .map-frame { aspect-ratio: 16 / 9; } }
@media (max-width: 639px) { .map-frame { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------- Stage 4: design review fixes (design only) */

/* bigger small text for older patients (was 14 / 13) */
:root { --t-small: 16px; --t-label: 15px; }
.nav .btn { font-size: 16px; }

/* one h2 size across the site (was 28, 33 and 48px) */
:root { --t-h2: clamp(28px, 1.2vw + 16px, 36px); }
.intro-cols h2, .visit-step > h2 { font-size: var(--t-h2); }

/* phone number in the header at every width: an icon on phones, icon and number from 640px */

.nav__call { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; border-radius: var(--r-btn); }
.nav__call svg { flex: none; color: var(--action); }
.nav__call:hover .nav__call-num { text-decoration: underline; }
.nav__call:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
@media (max-width: 639px) { .nav__call-num { display: none; } .nav__actions { gap: var(--s-2); } }

/* tap targets at least 44px: footer band links, breadcrumbs */
.band__big { display: inline-flex; align-items: center; min-height: 44px; }

/* focus ring on the map */
.map-frame:focus-within { outline: 2px solid var(--action); outline-offset: 3px; }

/* hours: the times never break across lines */
.hours dd { white-space: nowrap; }
@media (max-width: 639px) { .hours-card { padding: var(--s-5); } .hours-card .hours { column-gap: var(--s-4); } }

/* contact: the phone number set large */
.contact-phone { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.2; }
html .contact-list .contact-phone { display: inline-flex; align-items: center; min-height: 44px; }

/* typeset: the footer's serif paragraph gets reading leading */
.footer__lede { line-height: 1.45; }

/* ---------------------------------------------------------------- Taste pass (8 Nov 2026): the kit's rhythm restored */
/* every main section is the kit's one or two screens again. The one exception: the FAQ's collapsed list, which must
   grow when its answers open (the old site's accordion), is at least one screen and grows. */
html main > .section.section--grow:not(.x-none) { height: auto; min-height: 100vh; min-height: 100svh; }
html main > .section.section--grow:not(.x-none) > .wrap { height: auto; }

/* ---- the opening screen of every page (Taste: the hero fills the first screen alone, with its action) */

.hero--page h1 { font-size: var(--t-h1); line-height: 1.04; }
.hero--page .hero__h2 { font-size: var(--t-h2); line-height: 1.15; margin-top: var(--s-6); }
.hero--page .hero__lead { font-size: var(--t-lead); line-height: 1.55; max-width: 56ch; color: var(--ink); }
.hero-copy > .hero__lead { margin-top: var(--s-4); }
.hero--statement.hero--page .hero__lead { margin-top: var(--s-5); max-width: 64ch; }
.hero--statement.hero--page .btn-row { margin-top: var(--s-6); }
.hero__prose { margin-top: var(--s-5); max-width: 68ch; }
.hero__prose h2 { font-size: var(--t-card); font-family: var(--font-text); font-weight: 500; letter-spacing: 0; margin: var(--s-4) 0 0; }
.hero--page .frame--photo { border-radius: var(--r-lg); overflow: hidden; }
/* doctors: a smaller name so the qualifications fit the first screen */
.hero--doctor h1 { font-size: clamp(38px, 2.4vw + 18px, 56px); }
.hero--doctor .doc-quals { margin-top: var(--s-5); font-size: var(--t-body); }
.hero--doctor .doc-quals .quals { gap: 2px; }
.hero--doctor .doc-role { margin-top: var(--s-2); }

/* ---- home: welcome, the words left and the clinic's photograph right (text left, visual right) */
.welcome { align-items: stretch; height: 100%; }

@media (max-width: 1023px) { .welcome { height: auto; } .welcome > [class*="span-"] { grid-column: 1 / -1; }  }

/* ---- team band: bigger portraits fill the screen */
.team-grid { margin-top: var(--s-2); }
#team .tile { --tile-ratio: 4 / 3; }

/* ---- contact: the details, then the map takes what is left of the first screen */
.contact-hero { height: 100%; display: flex; flex-direction: column; gap: var(--s-7); }
.contact-hero .contact-grid { margin-top: 0; }
.contact-hero .map-frame { flex: 1 1 0; min-height: 260px; aspect-ratio: auto; }

@media (max-width: 1023px) { .contact-hero { height: auto; } .contact-hero .map-frame { flex: none; aspect-ratio: 4 / 3; } }
.map-frame iframe:focus-visible { outline: 3px solid var(--action); outline-offset: -3px; }

/* ---- nav: one link size; the phone menu button on the right line */
.nav__call { font-size: 15px; }

#team .team-grid > .tile.span-6 { --tile-ratio: 16 / 9; }

/* doctors: the old 390x260 headshot at its own shape, never stretched to the screen's height */
.hero--doctor .hero-visual { height: auto; aspect-ratio: 3 / 2; align-self: start; }
@media (min-width: 1024px) { .hero--doctor .hero-visual { grid-column: 8 / span 5; } }

/* ---- Taste pass, round 2 */
/* the phone icon stays in the bar on a phone (the kit hides everything there but the main button) */
@media (max-width: 1023px) { html .nav:not(.is-open) .nav__actions > .nav__call:not(.x-none) { display: inline-flex; } }
@media (max-width: 359px) {
  html .nav:not(.is-open) .nav__actions > .btn--primary:not(.x-none) { display: none; }
}

/* the one secondary button: an outline in the ink, so it stands off the linen */
html .btn--secondary:not(.x-none) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 40%, transparent); }
/* the map shows the focus ring */
.map-frame iframe:focus { outline: 3px solid var(--action); outline-offset: -3px; }
/* doctors: the headshot never wider than the screen */
.hero--doctor .hero-visual { max-width: 100%; }
.hero--doctor .doc-role + .btn-row { margin-top: var(--s-5); }
/* qualifications start on the text's own edge */
.quals li { padding-left: 0; text-indent: 0; }
/* benefits: the two columns run line to line */
.benefits li { max-width: none; }
/* FAQ: the collapsed list fits two screens; it still grows when answers open */
.acc__item > summary { padding: var(--s-4) 0; }
/* other doctors: each headshot at its own size beside the name, the row line to line */
@media (min-width: 1024px) {
  .team-grid > .tile.span-6 { grid-template-columns: minmax(0, 390px) minmax(0, 1fr); column-gap: var(--s-5); align-items: end; }
  .team-grid > .tile.span-6 > .tile__media { grid-row: 1 / span 2; }
  .team-grid > .tile.span-6 { --tile-ratio: 3 / 2; }
}
/* about: the team band ends with the action */
.team__btns { margin-top: var(--s-7); }

/* ---- Taste pass, round 3 */
@media (min-width: 1024px) { .team-grid > .tile.span-6 > .tile__media { grid-row: 1 / span 2; } }
.team-grid > .tile.span-6 { --tile-ratio: 3 / 2; }
/* one look for the main action on every ground: the harbour blue button, also on the dark band */
html .ground-inverse .btn--primary:not(.x-none) { background: var(--p-action); color: var(--p-action-ink); }
html .ground-inverse .btn--primary:not(.x-none):hover { background: color-mix(in oklab, var(--p-action) 88%, #fff); }

/* qualifications: the dash hangs outside the text's edge, so the words start on the line */
.quals li { position: relative; }
.quals li::before { position: absolute; right: 100%; top: 0; content: "\2013\00a0"; }
/* contact: the three blocks one height */
.contact-grid { align-items: stretch; }
/* the map: a ring on the frame and on the map itself when it takes the focus */
.map-frame:has(iframe:focus) { outline: 3px solid var(--action); outline-offset: 3px; }

/* before your visit: steps 6 and 7 side by side, each title over its words */

@media (min-width: 1024px) {
  .team-grid > .tile.span-6 { grid-template-rows: minmax(0, 1fr) auto auto; row-gap: var(--s-1); }
  .team-grid > .tile.span-6 > .tile__media { grid-row: 1 / -1; }
  .team-grid > .tile.span-6 > .tile__head { grid-column: 2; grid-row: 2; }
  .team-grid > .tile.span-6 > .tile__role { grid-column: 2; grid-row: 3; margin-top: 0; }
}

/* ---------------------------------------------------------------- Stage 5: motion pass (plans/002-004) */
/* 002: a press shrinks to 0.97 from the centre, 120ms ease-out; colours keep the kit's timings */
html:not([data-motion="off"]) .btn:not(.x-none):active { transform: scale(.97); transition-duration: 150ms, 150ms, 150ms, 150ms, 120ms; }

/* 004: the photo zoom on hover under 300ms */
/* review fixes (review-animations, 8 Nov 2026) */
/* the press shrinks in place: from the hover lift, not down out of it */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .btn:not(.x-none):active { transform: translateY(-1px) scale(.97); }
}
/* the photo zoom lands inside the 300ms budget */
:root { --m-image: 240ms; --m-image-out: 200ms; }
/* touch screens: no hover underline left stuck after a tap (focus still shows it) */
@media (hover: none) {
  .nav__link:hover:not(:focus-visible)::before { transform: scaleX(0); }
  html:not([data-motion="off"]) :is(.link, .m-link, p a:not([class]), .footer .link):hover:not(:focus-visible) {
    background-size: 0% 1px, 100% 1px; background-position: right 0 bottom 0, 0 100%;
  }
  html:not([data-motion="off"]) .footer ul a:hover:not(:focus-visible) { background-size: 0% 1px, 0% 1px; }
}

/* ---------------------------------------------------------------- Stage 6: hover states the test loop found missing */
.nav__logo img, .footer__logo img { transition: opacity 150ms var(--ease); }
.nav__call, .footer__legal a { transition: color 150ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .nav__logo:hover img, .footer__logo:hover img { opacity: .72; }
  .nav__call:hover { color: var(--action); }
  .footer__legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
}

/* ---------------------------------------------------------------- break-ui fixes (worst-case content) */
/* a long name never pushes a tile past the screen */
.tile, .tile__head, .tile__head > h3 { min-width: 0; }
.tile__head > h3, .hero h1, .crumbs [aria-current] { overflow-wrap: anywhere; }
/* a missing photo: the person's initials on a calm panel */
.is-missing { position: relative; background: color-mix(in oklab, var(--p-accent) 18%, var(--p-surface)); display: grid; place-items: center; }
.is-missing > img[hidden] { display: none; }
.photo-initials { font: var(--display-weight) clamp(40px, 6vw, 88px)/1 var(--font-display); letter-spacing: var(--display-tracking); color: var(--p-accent); }
.hero-visual.is-missing { min-height: 240px; }
/* the kit's red debugging outline (placeholders, broken images) never shows to visitors; the checkers still read the attributes */
html [data-placeholder] { outline: none !important; }
html main > .section.section--cta-only:not(.x-none) { min-height: 0; }

/* ---------------------------------------------------------------- client feedback, 8 Nov 2026 (after Stage 7) */
/* sections sized by their content with one even gap (the one-screen-per-section rule left large empty gaps).
   The home hero still fills the first screen on a desktop. */
:root { --sec: 80px; }
@media (max-width: 639px) { :root { --sec: 56px; } }
html main > :is(.section, .hero):not(.x-none):not(.hero--slides) { height: auto; min-height: 0; padding-top: var(--sec); padding-bottom: calc(var(--sec) + var(--bar)); }
html main > :is(.section, .hero):not(.x-none) > :is(.wrap, .container) { height: auto; }
html main > .hero:not(.x-none):not(.hero--slides) { padding-top: calc(var(--nav) + var(--s-8)); }
html main > .hero.hero--page:not(.x-none):not(.hero--slides) { padding-bottom: var(--s-8); }
/* a light section after a light hero or section: one gap, not two */
html main > :is(.hero, .section):not(.ground-inverse):not(.ground-surface) + .section:not(.ground-inverse):not(.ground-surface):not(.x-none) { padding-top: 0; }
html body footer.closing:not(.x-none) { height: auto; min-height: 0; padding-top: var(--s-8); padding-bottom: calc(var(--s-8) + var(--bar)); }
html body footer.closing:not(.x-none) > .wrap { height: auto; row-gap: var(--s-8); }
/* the split heroes (About, doctors) keep their photograph's shape now the hero is not a full screen */
.hero--page .hero-visual { height: auto; aspect-ratio: 3 / 2; align-self: start; }
.hero--page.hero--statement .hero__in { height: auto; }

/* ---- home welcome: the old site's three blocks side by side */
.welcome { row-gap: var(--s-7); }
.welcome h2 { font-size: var(--t-h3); line-height: 1.2; margin: 0; }
.welcome p { max-width: 42ch; }
@media (max-width: 1023px) { .welcome > [class*="span-"] { grid-column: 1 / -1; } }

/* ---- before your visit: one simple numbered list, single column */
.visit-list { list-style: none; margin: 0; padding: 0; max-width: 760px; display: grid; }
.visit-item { padding: var(--s-6) 0; border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.visit-item:first-child { border-top: 0; padding-top: 0; }
.visit-item > h2 { display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--s-4); }
.visit-item__n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font: 500 var(--t-body)/1 var(--font-text); background: var(--p-accent); color: var(--p-accent-ink); }
.visit-item__body { display: grid; gap: var(--s-3); padding-left: calc(40px + var(--s-4)); }
.visit-item__body p { margin: 0; max-width: 66ch; }
@media (max-width: 639px) { .visit-item__body { padding-left: 0; } }

/* ---- the strip above the footer (find us, phone, send us a message): a shaded panel, tight padding */
.close--band { background: var(--p-surface); border-radius: var(--r-lg); padding: var(--s-6) var(--s-7); }
.close--band .grid { align-items: center; }
.close--band .band__item { gap: 0; }
.close--band .band__big { font-size: var(--t-h3); }
@media (max-width: 1023px) { .close--band { padding: var(--s-5); } .close--band .grid { row-gap: var(--s-4); } }
.closing__links .footer__head { margin-top: 0; }

/* ---- FAQ: the answer slides open and closed (site.js animates the height; 240ms open, 200ms close) */
.acc__item.is-animating { overflow: hidden; }
/* the home hero keeps its full-screen frame on a desktop (the content-height rule above must not collapse it) */
@media (min-width: 1024px) {
  html main > .hero.hero--slides:not(.x-none) > .wrap { height: 100%; }
}
/* welcome on a tablet: the first two blocks side by side, office hours across under them */
@media (min-width: 640px) and (max-width: 1023px) {
  .welcome > .span-4 { grid-column: span 6; }
  .welcome > .hours-card { grid-column: 1 / -1; }
}
/* contact: the map has its own shape (the split heroes' photo rule does not apply to it) */
html .hero--contact .map-frame.hero-visual { aspect-ratio: 16 / 6; min-height: 0; flex: none; width: 100%; height: auto; align-self: stretch; }
@media (max-width: 1023px) { html .hero--contact .map-frame.hero-visual { aspect-ratio: 16 / 9; } }
@media (max-width: 639px) { html .hero--contact .map-frame.hero-visual { aspect-ratio: 4 / 3; } }
/* contact: the phone number reads as plain text like the fax line, a quiet underline shows it can be tapped */
html .contact-list .contact-phone:not(.x-none) { display: inline; min-height: 0; font: inherit; color: inherit; background: none; padding: 0;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { html .contact-list .contact-phone:not(.x-none):hover { color: var(--action); text-decoration-color: currentColor; } }
/* one gap above the footer: a last section with no ground of its own gives up its bottom padding */
html main > :is(.section, .hero):last-child:not(.ground-inverse):not(.ground-surface):not(.hero--slides):not(.x-none) { padding-bottom: 0; }
/* polish: a page-top photograph never wider than the screen (the kit's 200px minimum height pushed it at 320) */
html .hero--page .hero-visual:not(.x-none) { min-height: 0; width: 100%; max-width: 100%; }
/* polish: an arrow link inside a sentence flows with the words (the kit's inline-flex split "Pulse Test." from its link text) */
:is(p, li, dd) > a.link { display: inline; }
:is(p, li, dd) > a.link::after { margin-left: .3em; }
/* polish: a time range never breaks across lines */
.nw { white-space: nowrap; }

/* an arrow link on its own line keeps the kit's 44px tap target */
.welcome p:last-child > a.link, .contact-list p > a.link { display: inline-flex; }
@media (max-width: 639px) { .welcome p:last-child > a.link, .contact-list p > a.link { min-height: 44px; } }
/* the today marker is the bold row alone: the kit's dot wrapped onto its own line on phones */
.hours dt.is-today::after { display: none; }

/* ---------------------------------------------------------------- home hero: one rounded picture, the old slider's three slides
   Pictures and their words slide together (a scroll-snap track, so a phone swipes it natively);
   the blue shade and the Contact button stay put above them. */
.slides { --pad: clamp(20px, 3.6vw, 56px); --cta-h: 52px; position: relative; isolation: isolate; height: 100%; min-height: 0; border-radius: 28px; overflow: hidden; background: #1c2c3c; color: #fff; }
.slides__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides__track::-webkit-scrollbar { display: none; }
.slides__track:focus { outline: none; }
.slides:has(.slides__track:focus-visible) { outline: 3px solid var(--action); outline-offset: 3px; }
.slide { flex: 0 0 100%; position: relative; scroll-snap-align: start; scroll-snap-stop: always; }
.slide__media { position: absolute; inset: 0; }
.slide__media > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) 35%; }
/* the soft harbour-blue shade, rising from the bottom left like the photographs' own blue */
.slides__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 100% at 0% 100%, rgb(30 62 90 / .95) 0%, rgb(44 88 119 / .8) 36%, rgb(58 104 138 / .4) 62%, rgb(58 104 138 / 0) 84%),
    linear-gradient(to top, rgb(20 36 52 / .35), rgb(20 36 52 / 0) 45%); }
.slide__text { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + var(--cta-h) + var(--s-6)); }
html .hero .slide__title { margin: 0; max-width: 13ch; color: #fff; text-wrap: balance;
  font: var(--display-weight) clamp(34px, 2.9vw + 14px, 66px)/1.04 var(--font-display); letter-spacing: -0.025em; }
.slide__sub { display: block; margin-top: var(--s-4); max-width: 40ch; color: rgb(255 255 255 / .9);
  font: 400 clamp(17px, .35vw + 15px, 20px)/1.5 var(--font-text); letter-spacing: 0; }

/* the white button, like the reference's "Book a call" */
html .slides__cta:not(.x-none) { position: absolute; z-index: 3; left: var(--pad); bottom: var(--pad); height: var(--cta-h); padding: 0 22px 0 26px; gap: 10px;
  border-radius: 999px; background: #fff; color: var(--ink); }
.slides__cta .m-arrow__stem { opacity: 1; transform: none; }
.slides__cta .m-arrow { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  html .slides__cta:not(.x-none):hover { background: #e9eef2; }
  .slides__cta:hover .m-arrow { transform: translateX(3px); }
}
.slides__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* tablet: the box keeps a wide shape instead of filling a tall screen */
@media (min-width: 640px) and (max-width: 1023px) {
  html main > .hero.hero--slides:not(.x-none) { height: auto; min-height: 0; padding-top: calc(var(--nav) + var(--s-5)); padding-bottom: var(--s-7); }
  html .hero > .wrap > .slides.hero-text { height: auto; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--nav) - 48px); min-height: 320px; }
}
/* phone: a wide box like the desktop one (3:2, at least 232px tall for the words); swipe to move */
@media (max-width: 639px) {
  html main > .hero.hero--slides:not(.x-none) { height: auto; min-height: 0; padding-top: calc(var(--nav) + var(--s-4)); padding-bottom: var(--sec); }
  .slides { --cta-h: 48px; border-radius: 22px; }
  html .hero > .wrap > .slides.hero-text { height: auto; aspect-ratio: 3 / 2; min-height: 232px; }
  html .hero .slide__title { font-size: 30px; max-width: none; }
  .slide__sub { margin-top: var(--s-3); font-size: 16px; }
  .slide__text { bottom: calc(var(--pad) + var(--cta-h) + var(--s-5)); }
  .slides__shade { background:
    radial-gradient(150% 85% at 0% 100%, rgb(30 62 90 / .95) 0%, rgb(44 88 119 / .78) 38%, rgb(58 104 138 / .3) 66%, rgb(58 104 138 / 0) 88%),
    linear-gradient(to top, rgb(20 36 52 / .45), rgb(20 36 52 / 0) 55%); }
  html .slides__cta:not(.x-none) { padding: 0 18px 0 22px; }
}

/* links within a page (About's "Meet The Team") glide down instead of jumping, and stop just under the fixed bar.
   Reduced motion: the kit's reduced-motion block sets scroll-behavior back to auto. */
html:not([data-motion="off"]) { scroll-behavior: smooth; scroll-padding-top: var(--nav); }

/* coloured bands (the dark team band, shaded panels): less room above, below and under the heading */
main > .section:is(.ground-inverse, .ground-surface) { --sec: 56px; --head-gap: var(--s-6); --ly-head-gap: var(--s-6); }
main > .section:is(.ground-inverse, .ground-surface) .team-grid { margin-top: 0; }
main > .section:is(.ground-inverse, .ground-surface) .team__btns { margin-top: var(--s-6); }
@media (max-width: 639px) { main > .section:is(.ground-inverse, .ground-surface) { --sec: 40px; --head-gap: var(--s-5); --ly-head-gap: var(--s-5); } }

/* footer: one shaded panel. Its top band (find us, phone, message) is a shade darker. The copyright line sits under the panel. */
.footer__panel { background: var(--p-surface); border-radius: var(--r-lg); overflow: hidden; }
html .footer__panel .close--band { border-radius: 0; padding: var(--s-6) var(--s-7); background: color-mix(in oklab, var(--p-surface) 94%, var(--p-ink)); }
.footer__panel .closing__links { padding: var(--s-7); }
.footer__panel .closing__links > .grid { row-gap: var(--s-6); }
html footer.closing .footer__legal { margin-top: var(--s-5); padding: 0 var(--s-7); border-top: 0; }
@media (max-width: 639px) {
  html .footer__panel .close--band, .footer__panel .closing__links { padding: var(--s-5); }
  html footer.closing .footer__legal { padding: 0 var(--s-5); }
}
html body footer.closing:not(.x-none) > .wrap { grid-template-rows: auto; row-gap: 0; }

/* footer: "We keep ahead" is the footer's hero line in the heading serif, the contact details sit on the right,
   lined up under "Send us a message" */
html footer .closing__links .footer__lede { margin: 0; max-width: 38ch; color: var(--ink);
  font: var(--display-weight) clamp(22px, .8vw + 16px, 28px)/1.35 var(--font-display); letter-spacing: var(--display-tracking); }
.footer__panel .closing__links > .grid { align-items: center; }
.footer__panel .footer__contact { align-self: center; }
html footer .footer__panel .footer__contact ul { gap: var(--s-4); margin: 0; font-size: clamp(17px, .4vw + 14px, 20px); line-height: 1.4; }
@media (min-width: 640px) and (max-width: 1023px) {
  html .footer__panel .closing__links > .grid > .footer__about { grid-column: 1 / span 6; }
  html .footer__panel .closing__links > .grid > .footer__contact { grid-column: 7 / -1; }
}
@media (max-width: 639px) {
  html .footer__panel .closing__links > .grid > :is(.footer__about, .footer__contact) { grid-column: 1 / -1; }
}
/* the address is plain text: it flows as one line (the phone tap-size rule made it a flex row) */
html body footer.closing .footer__contact li:not(:has(a)) { display: block; min-height: 0; }
/* the labels on the footer's darker band: a deeper grey so they keep 4.5:1 contrast there (4.97:1) */
html .footer__panel .close--band .band__label { color: #4f5765; }

/* home hero on a desktop: sized so the three blocks under it (we keep ahead, how you benefit, office hours) also fit
   on the first screen when the screen is tall enough. The hero takes what is left: the screen, less the bar, the gaps
   and the blocks' height (--wh, measured at each width), between 340px and 640px tall. */
@media (min-width: 1024px) {
  :root { --wh: 292px; }
  html main > .hero.hero--slides:not(.x-none) { height: auto; min-height: 0; padding-top: calc(var(--nav) + var(--s-6)); padding-bottom: var(--s-7); }
  html main > .hero.hero--slides:not(.x-none) > .wrap { height: auto; }
  html .hero > .wrap > .slides.hero-text { height: clamp(340px, calc(100svh - var(--nav) - var(--s-6) - var(--s-7) - var(--wh) - var(--s-5)), 640px); }
}
@media (min-width: 1152px) { :root { --wh: 268px; } }
@media (min-width: 1440px) { :root { --wh: 240px; } }

/* team: every profile the same size. On a tablet the kit put two in a row and stretched the third across;
   the three stay in one row there instead */
@media (min-width: 640px) and (max-width: 1023px) {
  html main .team-grid > .tile.span-4:not(.x-none):nth-child(n of .tile):nth-last-child(n of .tile) { grid-column: auto / span 4; }
}