/*
 * Best Doctors and Clinics, India. Ported from the bestdoctors.sg system
 * (teal, coral, Fraunces display, Inter body) with the fixes from
 * docs/research/sg-site-study.md and design-and-tech-research.md:
 *  - coral text-safe at #C2412A (5.14:1 with white); #F2674A is decorative only
 *  - WhatsApp button in a dark green that passes with white text
 *  - 44px touch targets, visible focus, scroll padding for the sticky header
 *  - no numbered ranks, no WebGL, no blur on phones
 */

:root {
	--c-primary: #0E4F5C;
	--c-primary-700: #0A3A44;
	--c-primary-900: #062A31;
	--c-primary-050: #EAF3F4;
	--c-accent: #C2412A;
	--c-accent-700: #A3341F;
	--c-accent-soft: #F2674A;
	--c-wa: #0F7A3F;
	--c-wa-700: #0B5E30;
	--c-ok: #0F6B4A;
	--c-warn: #8A4B00;
	--c-warn-bg: #FFF5E6;
	--c-ink: #0F1B1E;
	--c-body: #33474B;
	--c-slate: #5B6B6E;
	--c-line: #E3EBEB;
	--c-soft: #F4F8F8;
	--c-white: #FFFFFF;
	--font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", sans-serif;
	--font-display: Fraunces, Georgia, "Times New Roman", "Noto Serif", serif;
	--maxw: 1180px;
	--narrow: 760px;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow-sm: 0 1px 2px rgba(6, 42, 49, .06), 0 1px 3px rgba(6, 42, 49, .05);
	--shadow: 0 6px 18px rgba(6, 42, 49, .08);
	--ease: cubic-bezier(.4, 0, .2, 1);
	--header-h: 72px;
	--tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--font-sans); color: var(--c-body); background: var(--c-white); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary); text-underline-offset: .18em; }
a:hover { color: var(--c-accent-700); }
:focus-visible { outline: 3px solid var(--c-accent-soft); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.02em; }
h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container--narrow { max-width: calc(var(--narrow) + 4rem); }
.container--profile { max-width: calc(880px + 4rem); }
.site-main { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4rem); }
.site-main--home { padding-block: 0; }
.section { padding-block: clamp(2.5rem, 7vw, 5rem); }
.section--soft { background: var(--c-soft); }
.section__head { max-width: 660px; margin-bottom: 2rem; }
.section__head p { color: var(--c-slate); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: var(--c-primary); margin: 0 0 .5rem; }
.eyebrow--light { color: #CFE6E9; }
.lede { font-size: 1.12rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--c-ink); color: #fff; padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: .75rem 1.35rem; border-radius: 100px; border: 0; font: inherit; font-weight: 600; font-size: .98rem; line-height: 1.1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.btn--sm { padding: .55rem 1rem; font-size: .92rem; }
.btn--primary { background: var(--c-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--c-accent-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-line); }
.btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--light { background: #fff; color: var(--c-primary-700); }
.btn--light:hover { color: var(--c-accent-700); }
.btn--wa { background: var(--c-wa); color: #fff; }
.btn--wa:hover { background: var(--c-wa-700); color: #fff; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-line); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.1; min-height: var(--tap); }
.brand:hover { color: var(--c-ink); }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__amp { color: var(--c-primary); font-weight: 500; }
@media (min-width: 640px) { .brand__name { white-space: nowrap; } }
.main-nav { display: none; }
.main-nav ul { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.main-nav a { color: var(--c-ink); font-weight: 500; font-size: .95rem; text-decoration: none; padding-block: .6rem; position: relative; white-space: nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--c-accent-soft); transition: right .25s var(--ease); }
.main-nav a:hover::after { right: 0; }
.header-cta { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.header-cta__clinic { display: none; }
.mobile-nav { position: relative; }
.nav-toggle { list-style: none; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: var(--tap); height: var(--tap); padding: 0 11px; cursor: pointer; border-radius: 10px; }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle span { display: block; height: 2px; background: var(--c-ink); border-radius: 2px; }
.mobile-nav__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(86vw, 320px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; }
.mobile-nav__panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav__panel a { display: flex; align-items: center; min-height: var(--tap); padding: .4rem .75rem; color: var(--c-ink); text-decoration: none; border-radius: 8px; font-weight: 500; }
.mobile-nav__panel a:hover { background: var(--c-soft); }
@media (min-width: 640px) { .header-cta__clinic { display: inline-flex; } }
@media (min-width: 1120px) { .main-nav { display: block; margin-left: 1rem; } .mobile-nav { display: none; } }
@media (min-width: 1120px) and (max-width: 1299px) { .header-cta__clinic { display: none; } .main-nav ul { gap: .9rem; } }

/* Breadcrumbs */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0 0 1.25rem; font-size: .88rem; color: var(--c-slate); }
.crumbs li + li::before { content: "\203A"; margin-right: .3rem; color: var(--c-slate); }
.crumbs a { color: var(--c-slate); display: inline-flex; align-items: center; min-height: 32px; }

/* Home */
.hero { background: linear-gradient(180deg, var(--c-primary-050), #fff 75%); }
.hero__inner { padding-block: clamp(2.5rem, 8vw, 5rem); }
.hero__copy { max-width: 680px; }
.hero__em { font-style: italic; font-weight: 500; color: var(--c-accent); }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--c-slate); max-width: 46ch; }
.searchbar { display: flex; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--c-line); border-radius: 100px; box-shadow: var(--shadow); padding: .35rem .35rem .35rem 1.1rem; max-width: 600px; margin-top: 1.5rem; }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; color: var(--c-ink); background: transparent; min-height: var(--tap); }
.hero__popular { margin-top: 1rem; font-size: .92rem; color: var(--c-slate); }
.hero__popular a { display: inline-flex; align-items: center; min-height: var(--tap); margin-right: .6rem; }

.specgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .75rem; }
.speccard { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.speccard:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.speccard__name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--c-ink); }
.speccard__short { font-size: .9rem; color: var(--c-slate); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.step { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.25rem; }
.step__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 700; margin-bottom: .75rem; }
.step a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

.trustlist { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.trustlist li { border-left: 3px solid var(--c-primary); padding-left: 1rem; }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 0; }
.counts div { background: var(--c-soft); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.counts dt { font-size: .85rem; color: var(--c-slate); }
.counts dd { margin: 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--c-ink); }

.band { background: var(--c-primary); color: #fff; }
.band__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding-block: clamp(2rem, 6vw, 3.5rem); }
.band h2, .band p { color: #fff; }
.band p { max-width: 56ch; opacity: .92; }

.postgrid { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.postgrid > li { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.postgrid h3 { font-family: var(--font-display); font-size: 1.15rem; }
.postgrid h3 a { text-decoration: none; color: var(--c-ink); }

/* Profiles */
.profile__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.profile__mono, .lcard__mono { display: grid; place-items: center; flex: none; background: var(--c-primary); color: #fff; font-family: var(--font-display); font-weight: 600; }
.profile__mono { width: 72px; height: 72px; border-radius: 50%; font-size: 1.6rem; }
.profile__name { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin-bottom: .2rem; }
.profile__quals { color: var(--c-slate); margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.panel { border-top: 1px solid var(--c-line); padding-block: 1.5rem; }
.panel__title { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.panel__sub { font-size: 1rem; margin: 1rem 0 .5rem; }
.facts { margin: 0; display: grid; gap: .1rem; }
.facts__row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .25rem 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--c-line); }
.facts dt { color: var(--c-slate); font-size: .95rem; }
.facts dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
@media (max-width: 520px) { .facts__row { grid-template-columns: 1fr; } }
.note { font-size: .92rem; color: var(--c-slate); margin: .6rem 0 0; }
.note--warn { color: var(--c-warn); background: var(--c-warn-bg); border-radius: var(--radius-sm); padding: .6rem .8rem; }
.fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin: 0; }
.fee__amount { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; color: var(--c-ink); }
.fee__covers { color: var(--c-slate); }
.places { list-style: none; padding: 0; margin: 0; }
.places li { padding: .5rem 0; border-bottom: 1px dashed var(--c-line); }
.places__hours { display: block; font-size: .9rem; color: var(--c-slate); }
.whylisted { background: var(--c-primary-050); border-radius: var(--radius-sm); padding: .9rem 1rem; margin: 1.5rem 0 1rem; font-size: .95rem; }
.whylisted p { margin: 0; }
.related ul { padding-left: 1.1em; }
.related li { margin: .25rem 0; }
.cols { columns: 2 220px; column-gap: 2rem; padding-left: 1.1em; }

/* Listing cards */
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lcard { display: flex; gap: .9rem; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem; background: #fff; }
.lcard[hidden] { display: none; }
.lcard__mono { width: 52px; height: 52px; border-radius: 12px; font-size: 1.15rem; }
.lcard--place .lcard__mono { background: var(--c-primary-700); }
.lcard__body { min-width: 0; }
.lcard__kicker { font-size: .8rem; color: var(--c-slate); margin: 0 0 .15rem; }
.lcard__title { font-family: var(--font-display); font-size: 1.12rem; margin: 0 0 .25rem; }
.lcard__title a { color: var(--c-ink); text-decoration: none; }
.lcard__title a:hover { color: var(--c-primary); text-decoration: underline; }
.lcard__meta { font-size: .9rem; color: var(--c-slate); margin: 0 0 .2rem; }
.lcard__fact { font-size: .88rem; margin: 0 0 .2rem; color: var(--c-warn); }
.lcard__fact--ok { color: var(--c-ok); }
.lcard__upgraded { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .1rem .45rem; border-radius: 6px; background: var(--c-warn-bg); color: var(--c-warn); vertical-align: middle; }

/* Specialty and city pages */
.crosshead { margin-bottom: 1rem; }
.localstats { font-size: 1.05rem; color: var(--c-body); max-width: 70ch; }
.filters { margin: 0 0 1rem; }
.filters__open { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: .5rem 1rem; border: 1.5px solid var(--c-line); border-radius: 100px; font-weight: 600; cursor: pointer; color: var(--c-primary); }
.filters__open::-webkit-details-marker { display: none; }
.filters__count:not(:empty) { background: var(--c-primary); color: #fff; border-radius: 100px; padding: 0 .5rem; font-size: .8rem; }
.filters__tray { margin-top: .75rem; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem; background: #fff; }
.filters__group { border: 0; padding: 0; margin: 0 0 .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.filters__group legend { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; width: 100%; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: .35rem .8rem; border: 1px solid var(--c-line); border-radius: 100px; cursor: pointer; font-size: .92rem; }
.chip:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-050); }
.chip__n { color: var(--c-slate); }
.filters__foot { display: flex; gap: .5rem; justify-content: flex-end; border-top: 1px solid var(--c-line); padding-top: .75rem; }
.filters__empty { margin-top: 1rem; }
.method { margin-top: 1.5rem; background: var(--c-soft); border-left: 3px solid var(--c-primary); padding: .9rem 1rem; font-size: .95rem; }
.method p { margin: 0; }
.citylinks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .25rem 1rem; }
.citylinks li { display: flex; align-items: center; gap: .4rem; min-height: var(--tap); }
.citylinks__n { font-size: .85rem; color: var(--c-slate); }
.pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pills a { display: inline-flex; align-items: center; min-height: var(--tap); padding: .3rem .9rem; border-radius: 100px; background: var(--c-primary-050); text-decoration: none; }
.guidelist { padding-left: 1.1em; }
.guidelist li { margin: .3rem 0; }
.state__name { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; margin-top: 1.5rem; }

/* Prose and tables */
/* Reading text keeps a comfortable measure; tools and grids use the full width. */
.prose { max-width: none; }
.prose > :where(p, h2, h3, h4, ul, ol, blockquote, details, .wp-block-table, .wp-block-details, .person, .formcard, .byline, .emptynote) { max-width: var(--narrow); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2rem; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tablewrap caption { text-align: left; padding: .7rem .9rem; color: var(--c-slate); font-size: .88rem; }
.tablewrap th, .tablewrap td { text-align: left; padding: .6rem .9rem; border-top: 1px solid var(--c-line); vertical-align: top; }
.tablewrap thead th { background: var(--c-soft); font-size: .85rem; color: var(--c-slate); }
.tablewrap .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.guide-meta { color: var(--c-slate); font-size: .92rem; }

/* Forms */
.enquiry { display: grid; gap: .25rem; max-width: 640px; }
.fgrid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field { margin: 0 0 .75rem; display: grid; gap: .3rem; }
.field label { font-weight: 600; font-size: .95rem; color: var(--c-ink); }
.opt { font-weight: 400; color: var(--c-slate); }
.field input, .field textarea, .wp-block-search__input { font: inherit; min-height: var(--tap); padding: .55rem .75rem; border: 1px solid #B9C7C9; border-radius: var(--radius-sm); background: #fff; color: var(--c-ink); width: 100%; }
.field textarea { resize: vertical; }
.hint { font-size: .85rem; color: var(--c-slate); }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; margin: .25rem 0 .75rem; }
.consent input { width: 22px; height: 22px; margin-top: .1rem; flex: none; }
.formstatus { border-radius: var(--radius-sm); padding: .7rem .9rem; }
.formstatus--ok { background: #E7F5EE; color: var(--c-ok); }
.formstatus--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.wp-block-search__inside-wrapper { display: flex; gap: .5rem; }
.wp-block-search__button { font: inherit; font-weight: 600; min-height: var(--tap); padding: .55rem 1.1rem; border-radius: 100px; border: 0; background: var(--c-accent); color: #fff; cursor: pointer; }

/* Footer */
.site-footer { background: var(--c-primary-900); color: #D6E3E5; margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); padding-block: 3rem 2rem; }
.site-footer__brand { grid-column: 1 / -1; max-width: 560px; }
.site-footer__name { font-family: var(--font-display); font-size: 1.3rem; color: #fff; margin-bottom: .5rem; }
.site-footer__head { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.site-footer p { color: #D6E3E5; }
.site-footer__base { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.25rem 2rem; font-size: .88rem; }
@media (min-width: 1000px) { .site-footer__brand { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .actions, .filters, .enquiry { display: none; } }

/*
 * Homepage practice areas: the .sg scroll index, rebuilt without photos or
 * WebGL. Default (no JavaScript, phones, short screens) is a stack of cards.
 * site.js adds [data-live] on wide screens to pin the section and swap panels
 * as you scroll, [data-js] to draw the icons in, and [data-reveal] to fade the
 * stacked cards up. Inactive tab text is at .62 alpha, which still clears
 * 4.5:1 on the dark ground; .sg dimmed its list to .34 and failed.
 */
.areas { --g: #062A31; --g2: #0A3A44; --ink-l: #F3EFE7; --dim-l: rgba(243, 239, 231, .76); --line-l: rgba(243, 239, 231, .14); --cyan: #7FE0EC; position: relative; background: linear-gradient(180deg, var(--g) 0%, var(--g2) 100%); color: var(--ink-l); }
.areas h2 { color: #fff; margin-bottom: .4em; }
.areas a:focus-visible, .areas button:focus-visible { outline-color: var(--cyan); }
.areas__skip { position: absolute; left: 1rem; top: -4rem; z-index: 5; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1.1rem; border-radius: 999px; background: #fff; color: var(--c-primary); font-weight: 600; text-decoration: none; }
.areas__skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; white-space: nowrap; }
.areas__skip:focus { top: 1rem; }
.areas__sticky { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.areas__inner { display: grid; gap: 1.75rem; }
.areas__lead { color: var(--dim-l); max-width: 46ch; margin: 0; }
.areas__counter, .areas__list { display: none; }
.areas__stage { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

.area { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-l); background: linear-gradient(160deg, rgba(14, 79, 92, .55), rgba(6, 42, 49, .2)); }
.area__art { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line-l);
	background: linear-gradient(rgba(243, 239, 231, .045) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, rgba(243, 239, 231, .045) 1px, transparent 1px) 0 0 / 32px 100%, radial-gradient(circle at 50% 55%, rgba(127, 224, 236, .12), transparent 60%); }
.area__rings { position: absolute; left: 50%; top: 50%; width: 170px; aspect-ratio: 1; transform: translate(-50%, -50%); }
.area__rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(127, 224, 236, .24); animation: area-breathe 5s ease-in-out infinite paused; }
.area__rings i:nth-child(2) { inset: 15%; border-color: rgba(243, 239, 231, .13); animation-delay: -1.6s; }
.area__rings i:nth-child(3) { inset: 31%; border-color: rgba(242, 103, 74, .34); background: radial-gradient(circle, rgba(127, 224, 236, .16), transparent 70%); animation-delay: -3.2s; }
.area.is-in .area__rings i, .area.is-active .area__rings i { animation-play-state: running; }
@keyframes area-breathe { 50% { transform: scale(1.05); opacity: .6; } }
.area__icon { position: relative; z-index: 1; width: 84px; height: 84px; overflow: visible; }
.area__icon path { fill: none; stroke: var(--c-accent-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.area__icon path + path { stroke: var(--cyan); }
.area__num { position: absolute; right: .9rem; bottom: -.15em; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.2rem, 9vw, 4.5rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(243, 239, 231, .24); font-variant-numeric: tabular-nums; }
.area__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.25rem 1.4rem; }
.area__tag { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.area__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.area__blurb { margin: 0; max-width: 46ch; color: var(--dim-l); }
.area__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .15rem 0 0; padding: 0; }
.area__chips li { font-size: .82rem; padding: .35em .8em; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; }
.area__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: auto; padding-top: .4rem; }
.area__count { margin: 0; font-size: .9rem; color: var(--dim-l); font-variant-numeric: tabular-nums; }
.area__count b { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: #fff; }
.area__cta { display: inline-flex; align-items: center; gap: .45em; min-height: var(--tap); padding: 0 1.15rem; border-radius: 999px; background: var(--c-accent); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .25s var(--ease), transform .25s var(--ease); }
.area__cta:hover { background: var(--c-accent-700); color: #fff; transform: translateY(-1px); }

/* Icons draw in, one stroke after another, when a card arrives or a panel turns on. */
.areas[data-js] .area__icon path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1) calc(.15s + var(--i, 0) * .2s); }
.areas[data-js] .area.is-in .area__icon path, .areas[data-js] .area.is-active .area__icon path { stroke-dashoffset: 0; }
.areas[data-reveal] .area { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.areas[data-reveal] .area.is-in { opacity: 1; transform: none; }

/* The scroll index. --n panels, about 20vh of scroll each. */
.areas[data-live] { height: calc(var(--n) * 20vh + 100vh); }
.areas[data-live] .areas__sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; padding-block: 0; overflow: hidden; }
.areas[data-live] .areas__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.areas[data-live] .areas__counter { display: block; margin: 1.1rem 0 .6rem; font-size: .78rem; letter-spacing: .14em; color: var(--dim-l); font-variant-numeric: tabular-nums; }
.areas[data-live] .areas__counter b { color: #fff; font-weight: 600; }
.areas[data-live] .areas__list { display: flex; flex-direction: column; position: relative; padding-left: 1.4rem; }
.areas__rail { position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; overflow: hidden; background: var(--line-l); }
.areas__fill { position: absolute; inset: 0; background: var(--c-accent-soft); transform-origin: top; transform: scaleY(0); transition: transform .35s cubic-bezier(.5, 0, .2, 1); }
.areas__tab { appearance: none; display: flex; align-items: center; min-height: 34px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.2; letter-spacing: -.01em; color: rgba(243, 239, 231, .62); transition: color .35s var(--ease), transform .35s var(--ease); }
.areas__tab:hover { color: rgba(243, 239, 231, .9); }
.areas__tab[aria-selected="true"] { color: #fff; transform: translateX(6px); }
.areas__tab[aria-selected="true"]::after { content: ""; width: .45em; height: .45em; margin-left: .5em; border-radius: 50%; background: var(--c-accent-soft); }
.areas[data-live] .areas__stage { position: relative; display: block; height: min(70vh, 560px); }
.areas[data-live] .area { position: absolute; inset: 0; grid-template-rows: minmax(0, 1fr) auto; opacity: 0; visibility: hidden; background: linear-gradient(160deg, #0E4F5C, #062A31 75%); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .65); transition: opacity .6s ease, visibility 0s linear .6s; }
.areas[data-live] .area.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.areas[data-live] .area__art { height: auto; }
.areas[data-live] .area__rings { width: clamp(220px, 26vw, 330px); }
.areas[data-live] .area__icon { width: clamp(110px, 13vw, 170px); height: auto; transform: scale(1.1); transition: transform 1.6s cubic-bezier(.2, .7, .1, 1); }
.areas[data-live] .area.is-active .area__icon { transform: none; }
.areas[data-live] .area__num { font-size: clamp(5rem, 9vw, 8rem); right: 1.25rem; }
.areas[data-live] .area__body { padding: clamp(1.25rem, 2.4vw, 1.9rem); }
@media (max-height: 820px) { .areas[data-live] .areas__lead { display: none; } }
@media (pointer: coarse) { .areas__tab { min-height: var(--tap); } }

.areas__more { padding-block: clamp(1.5rem, 4vw, 2.25rem) 0; }
.areas__more-label { margin: 0 0 .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-slate); }
.chiplinks { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; padding: 0; }
.chiplinks a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ink); font-size: .95rem; text-decoration: none; transition: border-color .2s var(--ease); }
.chiplinks a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.areas__all { display: inline-flex; align-items: center; gap: .4em; min-height: var(--tap); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .area__rings i { animation: none; } }

/* Rendered area art: the .sg slow zoom-out, on arrival or when a panel turns on. */
.area__art--img { background: #062A31; }
.area__art--img::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, rgba(6, 42, 49, .85), transparent); pointer-events: none; }
.area__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area__frame { position: absolute; inset: 0; }
.areas[data-js] .area__frame { transform: scale(1.08); transition: transform 6s cubic-bezier(.2, .7, .1, 1); }
.areas[data-js] .area:is(.is-in, .is-active) .area__frame { transform: none; }
.area__art--img .area__num { z-index: 1; }
.area__art--img { height: auto; aspect-ratio: 1344 / 576; }
.areas[data-live] .area__art--img { aspect-ratio: auto; }

/*
 * Living art: each body system moves in its own way (positions and timings
 * in bdin_area_motion()). The organ layer is a copy of the same picture,
 * masked to the organ, so a heartbeat or a breath never moves the room
 * behind it. Only the panel on show animates; reduced motion gets none of it.
 */
.area__organ, .area__fx { position: absolute; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.areas[data-js] .area__fx, .areas[data-js] .is-armed .area__organ { display: block; }
.area__organ { --m: radial-gradient(ellipse var(--mw) var(--mh) at var(--cx) var(--cy), #000 60%, transparent 100%); background: center / cover no-repeat; transform-origin: var(--o, 50% 50%); -webkit-mask-image: var(--m); mask-image: var(--m); }
.area__organ::before, .area__organ::after { content: ""; position: absolute; display: none; mix-blend-mode: screen; }
.area__organ[data-sweep]::after { display: block; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .3) 50%, transparent 80%); transform: translateX(-120%); }
.area__organ[data-scan]::before { display: block; left: 0; right: 0; top: 0; height: 18%; --sc: 127, 224, 236; background: linear-gradient(to bottom, transparent, rgba(var(--sc), .3) 88%, rgba(255, 255, 255, .85) 100%); transform: translateY(-100%); }
.area__organ[data-scan="coral"]::before { --sc: 255, 128, 100; }

.area__fx i { position: absolute; left: var(--x); top: var(--y); width: var(--s, 20%); transform: translate(-50%, -50%); opacity: 0; border-radius: 50%; mix-blend-mode: screen; }
.area__fx .is-coral { --fc: rgba(255, 120, 92, .75); }
.area__fx .is-cyan { --fc: rgba(127, 224, 236, .75); }
.fx-glow, .fx-glowbeat { aspect-ratio: 1; background: radial-gradient(circle, var(--fc) 0, transparent 68%); }
.fx-ring { aspect-ratio: var(--ar, 1); border: 1.5px solid var(--fc); box-shadow: 0 0 14px var(--fc); }
.area__fx .fx-spark { width: clamp(10px, 1.5vw, 20px); aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, #fff 0 14%, transparent 16%), linear-gradient(90deg, transparent, #fff, transparent) center / 100% 2px no-repeat, linear-gradient(transparent, #fff, transparent) center / 2px 100% no-repeat; }
.area__fx .fx-dot { width: 9px; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 28%, var(--fc) 48%, transparent 72%); }

/* On: the panel being shown (pinned index) or a card that has arrived (stacked). */
.areas[data-js] .area:is(.is-in, .is-active) .area__fx i { animation: var(--fxa) var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
.fx-glow { --fxa: fx-glow; }
.fx-glowbeat { --fxa: fx-glowbeat; }
.fx-ring { --fxa: fx-ring; }
.area__fx .fx-spark { --fxa: fx-spark; }
.area__fx .fx-dot { --fxa: fx-dot; }
.areas[data-js] .area:is(.is-in, .is-active)[data-motion="beat"] .area__organ { animation: bd-beat 1.15s ease-in-out infinite; }
.areas[data-js] .area:is(.is-in, .is-active)[data-motion="breathe"] .area__organ { animation: bd-breathe 5s ease-in-out infinite alternate; }
.areas[data-js] .area:is(.is-in, .is-active)[data-motion="swell"] .area__organ { animation: bd-swell 4s ease-in-out infinite alternate; }
.areas[data-js] .area:is(.is-in, .is-active)[data-motion="wobble"] .area__organ { animation: bd-wobble 3.2s ease-in-out infinite; }
.areas[data-js] .area:is(.is-in, .is-active) .area__organ[data-sweep]::after { animation: bd-sweep 7s ease-in-out var(--sd, 0s) infinite; }
.areas[data-js] .area:is(.is-in, .is-active) .area__organ[data-scan]::before { animation: bd-scan 4.5s linear infinite; }

@keyframes bd-beat { 0%, 60%, 100% { transform: none; } 12% { transform: scale(1.045); } 24% { transform: scale(1.005); } 36% { transform: scale(1.03); } }
@keyframes bd-breathe { to { transform: scale(1.035, 1.022); } }
@keyframes bd-swell { to { transform: scale(1.02); } }
@keyframes bd-wobble { 0%, 100% { transform: none; } 30% { transform: scale(1.022, .984); } 60% { transform: scale(.99, 1.014); } }
@keyframes bd-sweep { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(340%); } }
@keyframes bd-scan { to { transform: translateY(560%); } }
@keyframes fx-glow { 0%, 100% { opacity: .12; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: .75; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes fx-glowbeat { 0%, 62%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.95); } 12% { opacity: .9; transform: translate(-50%, -50%) scale(1.08); } 24% { opacity: .35; transform: translate(-50%, -50%) scale(1); } 36% { opacity: .7; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes fx-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes fx-spark { 0%, 45%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); } }
@keyframes fx-dot { 0% { left: var(--x); top: var(--y); opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: var(--x2); top: var(--y2); opacity: 0; } }

/* ------------------------------------------------------------------
 * Forms, people, finder, find a doctor, guides and cost tables.
 * ------------------------------------------------------------------ */
.field select { font: inherit; min-height: var(--tap); padding: .5rem 2.2rem .5rem .75rem; border: 1px solid #B9C7C9; border-radius: var(--radius-sm); color: var(--c-ink); width: 100%; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E4F5C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid rgba(14, 79, 92, .35); outline-offset: 1px; border-color: var(--c-primary); }
.hint { font-size: .85rem; color: var(--c-slate); }
.opt { font-weight: 400; color: var(--c-slate); }
.small { font-size: .875rem; color: var(--c-slate); }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--c-body); max-width: 62ch; }

.formcard { margin: 2rem 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-soft); scroll-margin-top: calc(var(--header-h) + 1rem); }
.formcard__title { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.formcard .formstatus { margin: 0 0 1rem; }

.person { display: flex; gap: 1rem; align-items: flex-start; margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--c-line); border-left: 4px solid var(--c-primary); border-radius: var(--radius-sm); background: #fff; }
.person > div { min-width: 0; }
.person p { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.person__mono { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--c-primary); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.person__role { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-slate); }
.person__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--c-ink); }
.person__quals { font-family: var(--font-sans); font-size: .95rem; font-weight: 400; color: var(--c-body); }
.person__reg, .person__note { font-size: .9rem; color: var(--c-slate); }

.alertbox { margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: #FDECE8; border: 1px solid #F5C3B8; color: #5A1D12; }
.alertbox__title { margin: 0 0 .5rem; font-weight: 700; }
.alertbox ul { margin: 0 0 .6rem; padding-left: 1.2rem; columns: 2 280px; column-gap: 2rem; }
.alertbox li { margin-bottom: .25rem; break-inside: avoid; }
.alertbox p:last-child { margin: 0; font-size: .95rem; }

.finder__search { max-width: 560px; }
.finder__search input { font-size: 1.05rem; }
.finder__jump { margin: 1rem 0 1.5rem; }
.finder__jump a { min-height: 38px; font-size: .9rem; }
.finder__group { scroll-margin-top: calc(var(--header-h) + 1rem); }
.finder__group h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 2rem 0 .75rem; }
.finder__none { padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--c-warn-bg); color: var(--c-warn); }
.concerns { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.concern { padding: 1rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; display: flex; flex-direction: column; gap: .35rem; }
.concern p { margin: 0; }
.concern__label { font-weight: 600; color: var(--c-ink); }
.concern__note { font-size: .93rem; }
.concern__foot { margin-top: auto !important; padding-top: .35rem; display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; font-size: .9rem; }
.concern__find { font-weight: 600; }
.concern__src { color: var(--c-slate); font-size: .82rem; }
.badge { display: inline-block; padding: .2em .6em; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--c-primary-050); color: var(--c-primary); }
.badge--ok { background: #E7F5EE; color: var(--c-ok); }
.badge--alert { background: #FDECE8; color: #9B2C17; }

.dfinder { display: grid; gap: .25rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-items: end; margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-soft); }
.dfinder__go { margin: 0 0 .75rem; }
.dfinder__go .btn { width: 100%; }
.dresults { scroll-margin-top: calc(var(--header-h) + 1rem); }
.dresults__count { color: var(--c-slate); }
.emptynote { padding: 1.1rem 1.25rem; border: 1px dashed #B9C7C9; border-radius: var(--radius-sm); color: var(--c-body); background: #fff; }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--c-line); text-decoration: none; }
.pager span { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }

.hubsec { margin: 2.25rem 0; }
.guidegrid { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.guidecard { padding: 1.1rem 1.2rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.guidecard:hover { border-color: #B9C7C9; box-shadow: var(--shadow-sm); }
.guidecard p { margin: .4rem 0 0; font-size: .93rem; }
.guidecard__title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--c-ink); text-decoration: none; }
.guidecard__title:hover { color: var(--c-primary); text-decoration: underline; }
.guidecard__date { color: var(--c-slate); font-size: .82rem !important; }

.byline { margin: .25rem 0 1.5rem; font-size: .9rem; color: var(--c-slate); }
.byline a { color: inherit; }
.byline__pending { color: var(--c-warn); }

.costtable { margin: 1.5rem 0; overflow-x: auto; }
.costtable table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.costtable th, .costtable td { padding: .7rem .75rem; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.costtable thead th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-slate); border-bottom-width: 2px; }
.costtable tbody th { font-weight: 600; color: var(--c-ink); }
.costtable__covers { display: block; font-weight: 400; font-size: .85rem; color: var(--c-slate); }
.costtable figcaption { margin-top: .75rem; font-size: .88rem; color: var(--c-slate); }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.prose .wp-block-table th, .prose .wp-block-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prose details { border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.prose details summary { cursor: pointer; font-weight: 600; color: var(--c-ink); }
.prose details[open] summary { margin-bottom: .5rem; }

.capsule { padding: 1rem 1.2rem; border-left: 4px solid var(--c-accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--c-soft); color: var(--c-ink); font-size: 1.05rem; }

/* QA fixes, 2 Nov 2026. */
/* The whole card is the tap target, not just the name. */
.lcard { position: relative; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.lcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lcard:hover { box-shadow: var(--shadow-sm); }
.wp-block-search { margin-bottom: 1.25rem; }
.searchhelp { margin: 0 0 1.25rem; }
.searchhelp a { background: var(--c-primary-050); border-color: transparent; color: var(--c-primary); font-weight: 600; }

@media (max-width: 639px) {
	/* Two lines for the name, never three. */
	.brand { font-size: 1rem; }
	.brand__name { display: block; max-width: 7.4em; line-height: 1.12; }
	.hero__popular a { min-height: 36px; }

	/* Sixteen chips would fill the screen: one line that scrolls sideways. */
	.finder__jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem)); padding: 0 clamp(1rem, 4vw, 2rem) .5rem; scrollbar-width: thin; }
	.finder__jump a { flex: none; white-space: nowrap; }

	/* Cost table: stacked rows, with every figure visible and labelled. */
	.costtable { overflow: visible; }
	.costtable table { min-width: 0; }
	.costtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.costtable tbody, .costtable tr, .costtable tbody th, .costtable td { display: block; width: auto; }
	.costtable tr { padding: .8rem 0; border-bottom: 1px solid var(--c-line); }
	.costtable tbody th, .costtable td { padding: .15rem 0; border: 0; }
	.costtable td::before { content: attr(data-label); display: block; margin-top: .4rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-slate); }
}

/* Homepage on phones: six fields, then a button. */
.areas[data-collapsed] .area:nth-child(n+7) { display: none; }
.areas__showwrap { margin: 1rem 0 0; text-align: center; }
.areas__showwrap[hidden] { display: none; }
.areas[data-live] .areas__showwrap { display: none; }

/* What to do next, under every guide. */
.nextsteps { margin: 2.5rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--c-line); }
.nextsteps__title { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.nextsteps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.nextsteps a { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.nextsteps a:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.nextsteps__kicker { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
.nextsteps__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--c-ink); }

/* Guide tables on phones: stacked rows, every column visible and labelled. */
@media (max-width: 639px) {
	.is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.is-stackable, .is-stackable tbody, .is-stackable tr, .is-stackable td, .is-stackable tbody th { display: block; width: auto; }
	.is-stackable tr { padding: .75rem 0; border-bottom: 1px solid var(--c-line); }
	.prose .is-stackable td, .prose .is-stackable th { padding: .15rem 0; border: 0; }
	.is-stackable tr > :first-child { font-weight: 600; color: var(--c-ink); }
	.is-stackable td[data-label]:not(:empty)::before { content: attr(data-label); display: block; margin-top: .4rem; font-size: .72rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--c-slate); }
	.is-stackable td:empty { display: none; }
}

/* ------------------------------------------------------------------
 * The new look, 2 Nov 2026: dark header and hero, page heads with their
 * own art, guide cards that show a figure, and quiet motion.
 * ------------------------------------------------------------------ */
.site-header { background: var(--c-primary-900); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.brand, .brand:hover { color: #fff; }
.brand__amp { color: #A9CBCF; }
.brand__mark rect { fill: #fff; }
.brand__mark path { stroke: var(--c-primary); }
.main-nav a { color: #D5E6E7; }
.main-nav a:hover { color: #fff; }
.site-header .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.site-header .btn--ghost:hover { color: #fff; border-color: #fff; }
.nav-toggle span { background: #fff; }
.site-header :focus-visible { outline-color: var(--c-accent-soft); }

/* Hero */
.hero { position: relative; overflow: hidden; color: #D5E6E7; background: radial-gradient(900px 620px at 76% 42%, #0F5563 0%, var(--c-primary-700) 48%, var(--c-primary-900) 100%); }
.hero__inner { display: grid; gap: 2.25rem; align-items: center; padding-block: clamp(2.25rem, 6vw, 4.5rem); }
.hero__copy { max-width: none; min-width: 0; }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.04; margin-bottom: .45em; }
.hero__em { color: var(--c-accent-soft); }
.hero__lead { font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.55; max-width: 34em; margin-bottom: 1.6rem; }
.searchbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; margin: 0; padding: .45rem; border: 0; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.searchbar__field { display: block; padding: .45rem .85rem; color: var(--c-slate); font-size: .75rem; font-weight: 600; border-bottom: 1px solid var(--c-line); }
.searchbar__field:nth-of-type(2) { border-bottom: 0; }
.searchbar__field span { display: block; }
.searchbar input, .searchbar select { display: block; width: 100%; min-height: 34px; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: 500 1rem var(--font-sans); }
.searchbar__field:focus-within { background: var(--c-soft); border-radius: 10px; }
.searchbar .btn { border-radius: 11px; min-height: 50px; font-size: 1rem; padding-inline: 1.75rem; }

.routes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin-top: .9rem; }
.routes a { display: block; padding: .75rem .9rem; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; color: var(--c-slate); font-size: .875rem; line-height: 1.35; text-decoration: none; transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.routes b { display: block; margin-bottom: .1rem; color: var(--c-ink); font-size: .97rem; font-weight: 600; }
.routes a:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--shadow); color: var(--c-slate); }
.routes--dark a { border-color: rgba(255, 255, 255, .17); background: rgba(255, 255, 255, .06); color: #BFD6D8; }
.routes--dark b { color: #fff; }
.routes--dark a:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); color: #D5E6E7; box-shadow: none; }
.routes--dark a:focus-visible { outline-color: #fff; }

.hero__stage { position: relative; min-width: 0; }
.hero__art { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; background: var(--c-primary-900); }
.hero__art img { width: 100%; height: 100%; object-fit: cover; animation: hero-drift 14s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.07); } }
.fact { display: block; padding: .85rem 1rem; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); color: var(--c-body); font-size: .85rem; line-height: 1.4; text-decoration: none; transition: transform .18s var(--ease); }
.fact:hover { color: var(--c-body); transform: translateY(-2px); }
.fact small { display: block; margin-bottom: .2rem; color: var(--c-primary); font-size: .72rem; font-weight: 600; }
.fact strong { display: block; margin-bottom: .15rem; color: var(--c-ink); font: 600 1.2rem/1.2 var(--font-display); }
.fact span { display: block; margin-top: .3rem; color: var(--c-slate); font-size: .72rem; text-decoration: underline; }
.fact--a { display: none; }
.fact--b { position: relative; margin: -1.75rem .75rem 0; }

.proof { border-bottom: 1px solid var(--c-line); }
.proof__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; padding-block: 1.5rem; }
.proof p { margin: 0; color: var(--c-slate); font-size: .875rem; line-height: 1.4; }
.proof b { display: block; color: var(--c-ink); font: 600 1.9rem/1.1 var(--font-display); }

@media (min-width: 960px) {
	.hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.25rem; }
	.hero__art { aspect-ratio: 1; }
	.searchbar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
	.searchbar__field { border-bottom: 0; border-right: 1px solid var(--c-line); }
	.searchbar__field:nth-of-type(2) { border-right: 0; }
	.fact--a { display: block; position: absolute; right: -14px; top: 30px; width: 232px; }
	.fact--b { position: absolute; left: -30px; bottom: 30px; width: 285px; margin: 0; }
	.proof__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
	.routes--dark { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Page heads: every inner page opens on the dark band. */
.site-main--flush { padding-top: 0; }
.pagehead { position: relative; overflow: hidden; color: #D5E6E7; background: linear-gradient(100deg, var(--c-primary-900) 0%, var(--c-primary-700) 52%, var(--c-primary) 100%); }
.pagehead__inner { position: relative; z-index: 1; padding-block: clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 4vw, 3rem); }
.pagehead__text { max-width: 760px; }
.pagehead h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; margin-bottom: .4em; overflow-wrap: anywhere; }
.pagehead__lead { margin: 0; max-width: 40em; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.55; }
.pagehead a { color: #fff; }
.pagehead a:hover { color: #fff; }
.pagehead :focus-visible { outline-color: #fff; }
.pagehead .crumbs ol { flex-wrap: nowrap; margin-bottom: .75rem; color: #9CBDC0; }
.pagehead .crumbs li { flex: none; }
.pagehead .crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 32px; }
.pagehead .crumbs li + li::before { color: #9CBDC0; }
.pagehead .crumbs a { color: #BFD6D8; }
.pagehead .byline { margin: 0; color: #BFD6D8; }
.pagehead .byline__pending { color: #FFD79A; }
.pagehead__art { height: 130px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.pagehead__art img { width: 100%; height: 100%; object-fit: cover; }
.pagebody { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }
@media (min-width: 960px) {
	.pagehead--art .pagehead__inner { min-height: 280px; display: flex; align-items: center; }
	.pagehead--art .pagehead__text { max-width: 58%; }
	.pagehead__art { position: absolute; inset: 0 0 0 auto; width: 56%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
}

/* Guides */
.guidegrid { gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
.guidecard { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--radius); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.guidecard:hover { transform: translateY(-3px); border-color: var(--c-line); box-shadow: 0 14px 30px rgba(6, 42, 49, .1); }
.guidecard__art { height: 128px; background: radial-gradient(420px 150px at 80% 0, #0F5563, var(--c-primary-900)); }
.guidecard__art img { width: 100%; height: 100%; object-fit: cover; }
/* No render for this subject yet: the brand mark on the ruled ground. */
.guidecard__art:empty { display: grid; place-items: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 7v18M7 16h18' stroke='%23F2674A' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 44px no-repeat, linear-gradient(rgba(243, 239, 231, .05) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(243, 239, 231, .05) 1px, transparent 1px) 0 0 / 24px 100%, radial-gradient(420px 150px at 80% 0, #0F5563, var(--c-primary-900)); }
.guidecard__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.15rem 1.05rem; }
.guidecard p { margin: 0; }
.guidecard__kind { color: var(--c-primary); font-size: .75rem !important; font-weight: 600; }
.guidecard__title { margin: .25rem 0 .55rem; font-size: 1.14rem; }
.guidecard__title::after { content: ""; position: absolute; inset: 0; }
.guidecard__figure { color: var(--c-accent); font-size: .95rem !important; font-weight: 600; line-height: 1.35; }
.guidecard__date { margin-top: auto !important; padding-top: .6rem; }
.hubsec h2 { margin-bottom: .75rem; }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.guide-layout__body { min-width: 0; max-width: var(--narrow); }
.toc { border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-soft); font-size: .92rem; }
.toc summary { display: flex; align-items: center; min-height: var(--tap); padding: 0 1rem; color: var(--c-ink); font-weight: 600; cursor: pointer; }
.toc ol { list-style: none; margin: 0; padding: 0 .5rem .6rem; }
.toc a { display: block; padding: .35rem .5rem; border-left: 2px solid transparent; color: var(--c-slate); line-height: 1.35; text-decoration: none; }
.toc a:hover { color: var(--c-primary); }
.toc a.is-here { border-left-color: var(--c-accent-soft); color: var(--c-ink); font-weight: 600; }
@media (min-width: 1000px) {
	.guide-layout { grid-template-columns: minmax(0, var(--narrow)) 270px; justify-content: space-between; gap: 3rem; }
	.guide-layout .toc { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
	.guide-layout__body { grid-column: 1; grid-row: 1; }
	.toc summary { pointer-events: none; list-style: none; }
	.toc summary::-webkit-details-marker { display: none; }
}
.capsule { padding: 1.15rem 1.35rem; border-left-width: 5px; background: var(--c-primary-050); }

/* Listings */
.lcard { transition: transform .18s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.lcard:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--shadow); }
.lcard--place { border-top: 3px solid var(--c-primary); }
.lcard--place .lcard__title { margin-bottom: .4rem; }
.lcard__fact--open { color: var(--c-slate); }
.panel__title a { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--c-ink); }
.panel__title a:hover { color: var(--c-primary); text-decoration: underline; }
.dresults__next { margin-top: 2rem; font-size: 1.35rem; }

/* Homepage sections */
.section__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.step { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.step__n { background: var(--c-primary-050); color: var(--c-primary); font-family: var(--font-display); font-size: 1.15rem; }
.trustlist li { position: relative; padding: 1.25rem 1.25rem 1.25rem 3.4rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.trustlist li::before { content: ""; position: absolute; left: 1.1rem; top: 1.3rem; width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.trustlist p { margin: 0; font-size: .96rem; }
.trustlist { margin-bottom: 0; }
.band { background: radial-gradient(800px 320px at 85% 20%, #0F5563, var(--c-primary-900)); }

/* Arrivals. Only what starts below the fold, and never without JavaScript. */
.will-rise { opacity: 0; transform: translateY(16px); }
.will-rise.is-seen { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

@media (prefers-reduced-motion: reduce) {
	.hero__art img { animation: none; }
	.will-rise { opacity: 1; transform: none; }
}
@media print { .pagehead { background: none; color: inherit; } .pagehead h1 { color: var(--c-ink); } .toc, .pagehead__art { display: none; } }
.allguides { margin: 1.5rem 0 0; }
@media (max-width: 639px) { .site-main--home .guidegrid li:nth-child(n+5) { display: none; } }

/* Listing pages: cards use the whole page, not the reading column. */
.prose > :where(.guidegrid, .linkcards, .hubsec, .citycards) { max-width: none; }
.prose > .guidegrid { margin-top: 0; }
@media (min-width: 1100px) { .guidegrid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1099px) { .guidegrid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* One guide on its own: art beside the words, so it does not sit alone in a corner. */
@media (min-width: 700px) {
	.guidegrid:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
	.guidecard:only-child { flex-direction: row; }
	.guidecard:only-child .guidecard__art { flex: 0 0 46%; height: auto; min-height: 220px; }
	.guidecard:only-child .guidecard__body { padding: 1.5rem 1.75rem; justify-content: center; }
	.guidecard:only-child .guidecard__title { font-size: 1.45rem; }
	.guidecard:only-child .guidecard__date { margin-top: 0 !important; }
}
.linkcards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.linkcards li { position: relative; padding: 1rem 1.15rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-soft); color: var(--c-slate); font-size: .92rem; line-height: 1.4; transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.linkcards li:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.linkcards a { display: block; margin-bottom: .15rem; color: var(--c-ink); font-size: 1.02rem; font-weight: 600; text-decoration: none; }
.linkcards a::after { content: ""; position: absolute; inset: 0; }
.linkcards a:hover { color: var(--c-primary); }
.citycards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.citycard { position: relative; padding: 1.1rem 1.2rem; border: 1px solid var(--c-line); border-top: 3px solid var(--c-primary); border-radius: var(--radius); background: #fff; transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.citycard:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--shadow); }
.citycard a { display: block; color: var(--c-ink); font: 600 1.3rem/1.2 var(--font-display); letter-spacing: -.01em; text-decoration: none; }
.citycard a::after { content: ""; position: absolute; inset: 0; }
.citycard span { display: block; margin-top: .25rem; color: var(--c-slate); font-size: .875rem; }