/* Self-hosted fonts — see assets/fonts/ */
@font-face {
    font-family: 'Gelasio';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/gelasio-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Gelasio';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/gelasio-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Gelasio';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/gelasio-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Gelasio';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/gelasio-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Commack Dental Associates
   Visual system matched to the franklin.dental reference design: plum +
   lavender palette, Gelasio display / Poppins body, uppercase headings with
   wide tracking, square-cornered buttons, flat 100px section rhythm.
   Implementation is original — only the design language is shared.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
    /* Brand */
    --brand-900: #182730;
    --brand-800: #1D3240;
    --brand-700: #095182;   /* button hover                          */
    --brand:     #0C65A1;   /* primary — 6.2:1 on white, 5.5:1 on tint */
    --brand-400: #4A6B82;
    --brand-200: #B7CAD7;
    --tint:      #EAF2F7;  /* alternating section band              */
    --tint-dark: #D6E5EE;

    /* Neutrals */
    --ink:      #152128;   /* headings                              */
    --body:     #333333;   /* body copy                             */
    --muted:    #4B5C66;
    --line:     #D5E3ED;
    --line-2:   #E7EFF5;
    --white:    #FFFFFF;

    --focus:    #0C65A1;
    --error:    #B3261E;
    --success:  #1B6E3C;

    /* Type — Gelasio display, Poppins body */
    --font-display: 'Gelasio', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
    --step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.125rem);   /* body 18px */
    --step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem);  /* h4   24px */
    --step-2:  clamp(1.4rem, 1.15rem + 1.1vw, 2.125rem);  /* h3   34px */
    --step-3:  clamp(1.75rem, 1.3rem + 2vw, 3rem);        /* h2   48px */
    --step-4:  clamp(2.1rem, 1.4rem + 3.1vw, 4rem);       /* h1   64px */

    /* Space — the reference uses a flat 100px band rhythm */
    --gap:      clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    /* Gutter between flex columns. Every row re-declares it locally, so a row
       that needs a wider or tighter gutter changes one value and its column
       widths follow. */
    --gutter:   var(--gap);
    --section:  clamp(3.5rem, 2rem + 5vw, 6.25rem);
    --shell:    1480px;
    --shell-narrow: 820px;

    --radius:   0px;       /* the reference design is entirely square */
    --radius-s: 0px;
    --radius-l: 0px;

    --shadow-1: 0 1px 3px rgba(24, 39, 48, .07), 0 6px 18px rgba(24, 39, 48, .06);
    --shadow-2: 0 12px 28px rgba(24, 39, 48, .12);
    --shadow-3: 0 24px 54px rgba(24, 39, 48, .18);

    --header-h: 134px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
    margin: 0;
    background: var(--white);
    color: var(--body);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    overflow-x: clip;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
picture { display: contents; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .55em;
    font-family: var(--font-display);
    color: var(--ink);
    text-transform: uppercase;
    text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 500; line-height: 1.2; letter-spacing: .09em; }
h2 { font-size: var(--step-3); font-weight: 500; line-height: 1.4; letter-spacing: .02em; }
h3 { font-size: var(--step-2); font-weight: 400; line-height: 1.2; letter-spacing: .02em; }
h4 { font-size: var(--step-1); font-weight: 400; line-height: 1.3; letter-spacing: .02em; }
h5, h6 {
    font-family: var(--font-body); font-size: var(--step-0);
    font-weight: 600; line-height: 1.5; letter-spacing: .04em;
}

/* Registered mark. Emitted by reg_filter() in include/config.php, so it lands
   on every (R) in body copy without touching the content files. line-height 0
   keeps the raised glyph from stretching the line box in display headings. */
/* The mark and the text it sits in are wrapped together by reg_filter(), so a
   flex or grid parent treats the pair as one item and can never space them
   apart. Inline and shrinkable, so it changes nothing in normal flow. */
.reg-lockup { display: inline; min-width: 0; }

.reg {
    font-size: max(13px, .5em);
    vertical-align: super;
    line-height: 0;
    letter-spacing: 0;
}

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }

ul, ol { margin: 0 0 1.4em; padding-left: 1.35em; }
li { margin-bottom: .45em; line-height: 1.65; }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
table { border-collapse: collapse; width: 100%; }

:where(button, input, select, textarea) { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-200); color: var(--brand-900); }

/* -------------------------------------------------------------- utility */
.shell { width: min(100% - 3rem, var(--shell)); margin-inline: auto; }
@media (max-width: 600px) { .shell { width: min(100% - 60px, var(--shell)); } }
.shell-narrow { width: min(100% - 3rem, var(--shell-narrow)); margin-inline: auto; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--sand,
.section--mist { background: var(--tint); }
.section--dark { background: var(--brand); color: #DDE9F1; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

/* Two bands of the same colour in a row read as one band, so the first one's
   bottom padding and the second one's top padding stack into a single outsized
   gap. One of them is enough. */
:is(.section--mist, .section--sand) + :is(.section--mist, .section--sand),
.section--dark + .section--dark { padding-top: 0; }

.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 999;
    background: var(--brand); color: #fff; padding: .85rem 1.3rem;
    font-family: var(--font-body); font-size: .875rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

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

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: .8125rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--brand); margin-bottom: 1rem; line-height: 1.6;
}
/* Light enough to clear 4.5:1 over the hero scrim's worst case, not just
   over the solid plum bands. */
.section--dark .eyebrow,
.page-hero .eyebrow,
.hero__content .eyebrow,
.cta-band .eyebrow { color: #E9F1F6; }

.lede { font-size: 1.125rem; line-height: 1.9; color: var(--body); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.rule { width: 70px; height: 3px; background: var(--brand); margin: 0 0 1.5rem; }
.section-head--center .rule { margin-inline: auto; }
/* The brand rule is the band's own colour on the solid blue sections. */
.section--dark .rule,
.cta-band .rule { background: #E9F1F6; }

/* --------------------------------------------------------------- buttons */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    --btn-bd: var(--brand);
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    padding: .85em 1.7em;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1.6px solid var(--btn-bd);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: .875rem; font-weight: 600;
    letter-spacing: .05em; line-height: 1.4;
    text-decoration: none; cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); color: var(--btn-fg); }

.btn--gold { --btn-bg: var(--brand); --btn-bd: var(--brand); }
.btn--gold:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--brand); --btn-bd: var(--brand); }
.btn--outline:hover { --btn-bg: var(--brand); --btn-fg: #fff; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brand); --btn-bd: var(--brand); }
.btn--ghost:hover { --btn-bg: var(--brand); --btn-fg: #fff; }

.btn--light { --btn-bg: #fff; --btn-fg: var(--brand); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--brand); --btn-bd: #fff; }

.btn--wide { width: 100%; }
.btn--lg { padding: 1em 2.1em; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Under 575px every button fills the width and its row stacks. The header
   CTAs are already display:none below 620px, so the header is untouched. */
@media (max-width: 575.98px) {
    .btn { width: 100%; }
    .btn-row,
    .page-hero__actions,
    .cta-band__actions { flex-direction: column; align-items: stretch; }
    /* .cta-band__actions is a flex item of .cta-band__inner and would
       otherwise size to its content, boxing the buttons into a narrow column. */
    .cta-band__actions { width: 100%; align-self: stretch; }
    .btn--lg{padding:1em;}
}

.link-arrow {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; color: var(--brand);
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- header */
/* A single white row: logo left, nav centre, CTA buttons right. Below 1300px
   the nav collapses behind the Menu toggle; at 1300px and up it lays out
   horizontally (see the min-width: 1300px block further down). */
.site-header {
    position: sticky; top: 0; z-index: 90;
    background: #fff;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 2px 16px rgba(24, 39, 48, .10); }

.header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    padding: 10px 30px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: auto; height: auto; max-width: min(400px, 46vw); }

.header__actions { display: flex; align-items: center; gap: 1rem; flex: none; }

/* Header buttons: 48px tall, square, 2px border, tracked uppercase. */
.header__cta {
    min-height: 48px;
    padding: .75rem 1.25rem;
    border-width: 2px;
    font-size: .875rem;
    letter-spacing: .07em;
    white-space: nowrap;
}
@media (max-width: 1599px) { .header__cta--tertiary { display: none; } }
@media (max-width: 900px)  { .header__cta:not(.header__cta--call) { display: none; } }
@media (max-width: 620px)  { .header__cta--call { display: none; } }

/* ------------------------------------------------------------ navigation */
/* Menu toggle — hamburger plus a visible "Menu" label, as in the reference. */
.nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 48px; padding: .6rem .35rem;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: .9375rem; color: var(--ink);
    transition: color .16s var(--ease);
}
.nav-toggle:hover { color: var(--brand); }
.nav-toggle__label { line-height: 1; }

.nav-toggle__bars { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
    transition: transform .22s var(--ease), top .22s var(--ease);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* Full-width panel dropping below the header. */
.nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
body.nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 1299px) { body.nav-open { overflow: hidden; } }

.nav__list {
    list-style: none; margin: 0 auto; padding: 1.25rem clamp(1rem, 0.4rem + 2vw, 2.5rem) 2rem;
    width: min(100% , var(--shell));
    display: flex; flex-direction: column; gap: 0;
}
.nav__item { border-bottom: 1px solid var(--line-2); }
.nav__item:last-of-type { border-bottom: 0; }

.nav__link {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: 1rem .25rem;
    font-family: var(--font-body); font-size: .9375rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    transition: color .16s var(--ease);
}
.nav__link:hover, .nav__item[data-open="true"] > .nav__link { color: var(--brand); }
.nav__link[aria-current="page"], .nav__link.is-section { color: var(--brand); }
.nav__caret { display: inline-flex; transition: transform .2s var(--ease); }
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
    list-style: none; margin: 0; padding: 0 0 .9rem .25rem;
    --gutter: 1.5rem;
    display: none; flex-wrap: wrap;
    gap: 0 var(--gutter);
}
.nav__item[data-open="true"] > .nav__panel { display: flex; }
.nav__panel > li { flex: 0 0 auto; min-width: 0; width: calc(25% - var(--gutter) * 9 / 12); }
@media (max-width: 1100px) { .nav__panel > li { width: calc(33.3333% - var(--gutter) * 8 / 12); } }
@media (max-width: 820px)  { .nav__panel > li { width: calc(50%      - var(--gutter) * 6 / 12); } }
@media (max-width: 560px)  { .nav__panel > li { width: 100%; } }
.nav__panel a {
    display: block; padding: .6rem .5rem;
    font-family: var(--font-body); font-size: .875rem; font-weight: 400;
    letter-spacing: .03em; color: var(--body); text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .14s var(--ease), border-color .14s var(--ease), background-color .14s var(--ease);
}
.nav__panel a:hover { color: var(--brand); border-left-color: var(--brand); background: var(--tint); }
.nav__panel a[aria-current="page"] { color: var(--brand); border-left-color: var(--brand); font-weight: 600; }

/* Phone / booking repeated at the foot of the panel for the narrow widths
   where the header buttons are hidden. */
.nav__mobile-cta { padding: 1.5rem .25rem 0; display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid var(--line); }
@media (min-width: 901px) { .nav__mobile-cta { display: none; } }

.nav-scrim {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(21, 33, 40, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
/* From 1300px the menu is a horizontal bar in the header row and the toggle
   disappears; below that it collapses back behind the toggle. */
@media (min-width: 1300px) {
    .nav {
        position: static; flex: 1 1 auto;
        display: flex; justify-content: center;
        background: none; border: 0; box-shadow: none;
        max-height: none; overflow: visible;
        opacity: 1; visibility: visible; transform: none;
    }
    .nav__list {
        display: flex; flex-direction: row; align-items: center; gap: .1rem;
        width: auto; padding: 0; margin: 0;
    }
    .nav__item { border-bottom: 0; position: relative; }
    .nav__link {
        justify-content: center; white-space: nowrap;
        padding: .65rem .55rem; font-size: .78rem; letter-spacing: .05em;
    }
    .nav__link[aria-current="page"]::after,
    .nav__link.is-section::after {
        content: ''; position: absolute; left: .55rem; right: .55rem; bottom: .3rem;
        height: 2px; background: var(--brand);
    }

    .nav__panel {
        position: absolute; top: calc(100% + 10px); left: 0;
        min-width: 260px; padding: .5rem;
        background: #fff;
        border: 1px solid var(--line); border-top: 3px solid var(--brand);
        box-shadow: var(--shadow-3);
    }
    .nav__panel > li { width: 100%; }
    .nav__panel--mega {
        left: 50%; transform: translateX(-50%);
        width: min(88vw, 700px);
    }
    .nav__panel--mega > li { width: calc(33.3333% - var(--gutter) * 8 / 12); }
    .nav__panel a { border-left: 0; }
    .nav__panel a:hover, .nav__panel a[aria-current="page"] { border-left: 0; }

    .nav-toggle, .nav__mobile-cta { display: none; }
}

/* Just above the breakpoint everything has to share one row, so tighten the
   gaps and tracking until there is room to breathe again. */
@media (min-width: 1300px) and (max-width: 1499px) {
    .header__inner { gap: 1rem; padding-inline: 1rem; }
    .nav__link { padding: .65rem .38rem; font-size: .73rem; letter-spacing: .02em; }
    .header__cta { padding: .75rem .85rem; letter-spacing: .04em; }
}
/* The toggle disappears at exactly 1300px, so the roomiest the row can be
   there is still narrower than the block above allows. Squeeze once more. */
@media (min-width: 1300px) and (max-width: 1379px) {
    .header__inner { gap: .5rem; }
    .header__cta { padding: .75rem .65rem; }
}
/* ------------------------------------------------------------------- hero */
.hero { position: relative; background: var(--brand-900); isolation: isolate; }
/* Every slide shares one 1x1 cell, so all of them stay in flow and the track
   takes the height of the tallest. Absolute slides collapsed the track to its
   min-height floor and the content spilled out the bottom. */
.hero__slides { position: relative; display: flex; min-height: clamp(520px, 74vh, 720px); }

/* Each slide is a full-width flex item that hands the width straight back, so
   every one of them starts at the same offset and the track still takes the
   height of the tallest. */
.hero__slide {
    position: relative; flex: 0 0 100%; width: 100%; margin-right: -100%;
    display: flex; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .85s var(--ease), visibility .85s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Flat black scrim over the photograph, as in the reference design. Depth is
   62% rather than 50% so the small type still clears 4.5:1 even where the
   photograph underneath is at its lightest. */
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .62); }

.hero__content {
    padding-block: clamp(4rem, 9vw, 7rem);
    max-width: 900px; margin-inline: auto; text-align: center; color: #fff;
}
.hero h1, .hero .hero__title {
    color: #fff; font-size: var(--step-4); font-weight: 500;
    line-height: 1.2; letter-spacing: .09em; text-transform: uppercase;
    margin-bottom: .5em;
}
.hero__sub {
    font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.9;
    color: #E9F1F6; margin: 0 auto 2.25rem; max-width: 58ch;
}
.hero .btn-row { justify-content: center; }

.hero__dots {
    position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 2.5rem);
    display: flex; justify-content: center; gap: .55rem; z-index: 3;
}
.hero__dot {
    width: 38px; height: 3px; padding: 0; border: 0;
    background: rgba(255, 255, 255, .4); cursor: pointer;
    transition: background-color .22s var(--ease), width .22s var(--ease);
}
.hero__dot.is-active { background: #fff; width: 58px; }
.hero__dot:hover { background: rgba(255, 255, 255, .7); }

/* Interior page banner */
.page-hero {
    position: relative; isolation: isolate;
    background: var(--brand); color: #D6E5EE;
    padding-block: clamp(4.5rem, 4vw + 3rem, 7.5rem);
    overflow: hidden; text-align: center;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover;object-position: top;}
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .2); }
.page-hero--plain::after { background: var(--brand); }
.page-hero__actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* Under 768px the banner stacks into one column -- photograph on top, copy
   beneath it -- instead of laying the text over the image. The media div is
   already first in the markup, so flex column needs no reordering. The scrim
   goes with it: the copy now sits on the solid brand panel, not the photo. */
@media (max-width: 767px) {
    .page-hero { display: flex; flex-direction: column; padding-block: 0; }
    /* Explicit height, not aspect-ratio: as a flex item with auto height the
       box is content-sized, so the photograph's own ratio would win and the
       banner height would vary per page. A fixed box keeps object-fit in
       charge and every banner the same height. */
    .page-hero__media {
        position: static; z-index: auto; flex: none;
        width: 100%; height: clamp(200px, 55vw, 320px);
        overflow: hidden;
    }
    .page-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .page-hero::after { display: none; }
    .page-hero > .shell { padding-block: clamp(2rem, 5vw + 1rem, 3rem); }
}
.page-hero h1 { color: #fff; margin-inline: auto; margin-bottom: .35em; }
.page-hero__sub {
    max-width: 62ch; margin-inline: auto; color: #D6E5EE;
    font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.85;
}

.breadcrumbs {
    font-family: var(--font-body); font-size: .75rem;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.breadcrumbs li { display: flex; align-items: center; gap: .45rem; margin: 0; color: #D6E5EE; }
.breadcrumbs li + li::before { content: '/'; opacity: .6; }
.breadcrumbs a { color: #D6E5EE; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------- prose */
/* .prose { max-width: 74ch; } */
.prose > :first-child { margin-top: 0; }
/* Long-form article headings stay sentence case — uppercase at this length
   hurts readability, which the reference design never has to handle. */
.prose h2, .prose h3, .prose h4, .prose h5 { text-transform: none; letter-spacing: .01em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; color: var(--ink); }
.prose h3 { font-size: var(--step-1); margin-top: 1.9em; color: var(--brand); }
.prose h4 {
    font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600;
    margin-top: 1.7em; color: var(--ink);
}
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose img { margin: 2rem 0; box-shadow: var(--shadow-1); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 1.7em; margin-bottom: .7em; }
.prose ul > li::before {
    content: ''; position: absolute; left: .2em; top: .62em;
    width: 8px; height: 8px; background: var(--brand);
}
.prose ol { padding-left: 1.3em; }
.prose ol > li::marker { color: var(--brand); font-weight: 600; }
.prose li > p { margin-bottom: .6em; }
.prose li > b, .prose li > strong { display: block; color: var(--ink); margin-bottom: .3em; }
.prose blockquote {
    margin: 2.25rem 0; padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--brand); background: var(--tint);
    font-family: var(--font-display); font-size: 1.25rem; line-height: 1.7; color: var(--ink);
}
.prose table { margin: 2rem 0; font-size: .9375rem; }
.prose th, .prose td { padding: .85rem 1rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--tint); color: var(--ink); font-weight: 600; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 2rem 0; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------- download cards */
.dl-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    background: #fff; border: 1px solid var(--line);
    padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    text-decoration: none; color: var(--body);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dl-card:hover { border-color: var(--brand); box-shadow: var(--shadow-2); text-decoration: none; }
.dl-card__icon {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    background: var(--tint); color: var(--brand); margin-bottom: .9rem;
}
.dl-card:hover .dl-card__icon { background: var(--brand); color: #fff; }
.dl-card__title {
    font-family: var(--font-display); font-size: var(--step-1);
    color: var(--ink); line-height: 1.3;
}
.dl-card__meta { font-size: .8125rem; color: var(--muted); letter-spacing: .03em; }

/* Centred reading measure for standalone copy blocks. */
.measure-center { max-width: 74ch; margin-inline: auto; text-align: center; }

/* ------------------------------------------------------- card icon badge */
.card__icon {
    display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
    background: var(--tint); color: var(--brand); margin-bottom: 1rem;
}
.card > h3 { font-size: var(--step-1); text-transform: none; letter-spacing: .01em; }
.card .prose { max-width: none; }
.card .prose p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ map embed */
.map-embed { position: relative; aspect-ratio: 4 / 3; background: var(--tint); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------- video gallery
   The iframe is absolutely positioned so it contributes nothing to content
   sizing -- that is what lets aspect-ratio stay authoritative on the frame. */
.video-card { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.video-card__frame { position: relative; aspect-ratio: 16 / 9; background: var(--brand-900); }
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__title {
    margin-top: .85rem;
    font-family: var(--font-body); font-size: .9375rem; font-weight: 600;
    line-height: 1.5; color: var(--ink);
}

/* --------------------------------------------------------- content layout */
/* Single column since the sidebar was removed. The wrapper stays so the 157
   interior pages keep their markup unchanged; .prose caps line length at 74ch. */
.layout-aside {
    display: flex; flex-direction: column;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
}

.card {
    background: #fff; border: 1px solid var(--line);
    padding: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
}
.card--accent { background: var(--brand); color: #D6E5EE; border-color: var(--brand); }
.card--accent h2, .card--accent h3, .card--accent h4 { color: #fff; }
.card--accent a:not(.btn) { color: #fff; }
.card--sand { background: var(--tint); border-color: var(--tint-dark); }
.card h2, .card h3 { font-size: var(--step-1); }
.card > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- info lists */
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
/* Two up where the entries are short enough to read side by side. */
.info-list--2col {
    --gutter: 2.5rem;
    flex-flow: row wrap; gap: 1rem var(--gutter);
    justify-content: center;
}
.info-list--2col > li { flex: 0 0 auto; min-width: 0; width: calc(50% - var(--gutter) * 6 / 12); }
@media (max-width: 820px) { .info-list--2col > li { width: 100%; } }
.info-list li { display: flex; gap: .8rem; align-items: flex-start; margin: 0; line-height: 1.7; }
.info-list svg { flex: none; margin-top: .3em; color: var(--brand); }
.card--accent .info-list svg,
.section--dark .info-list svg { color: #B7D0E1; }
.info-list a { text-decoration: none; }
.info-list a:hover { text-decoration: underline; }

.hours { width: 100%; font-size: .9375rem; border:0 !important;}
.hours th, .hours td { padding: .55rem .3rem; border: 0; text-align: left; line-height: 1.5; }
.hours th { font-weight: 400; color: inherit; background: none; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line-2); }
.card--accent .hours tr + tr th, .card--accent .hours tr + tr td,
.site-footer .hours tr + tr th, .site-footer .hours tr + tr td { border-top-color: rgba(255,255,255,.16); }
.hours .is-closed { color: var(--muted); }
.card--accent .hours .is-closed,
.section--dark .hours .is-closed { color: #AFC8D8; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--brand); font-weight: 600; }
.card--accent .hours tr.is-today th, .card--accent .hours tr.is-today td,
.section--dark .hours tr.is-today th, .section--dark .hours tr.is-today td { color: #fff; font-weight: 600; }
.site-footer .hours tr + tr th, .site-footer .hours tr + tr td { border-top-color: var(--tint-dark); }

/* ------------------------------------------------------------------ grids */
.row {
    --gutter: var(--gap);
    display: flex; flex-wrap: wrap;
    gap: var(--gutter);
    /* A short last line sits in the middle of the row rather than stranded
       against the left edge. A full line fills the width exactly, so centring
       it changes nothing — only the remainder moves. */
    justify-content: center;
}
.row > * { min-width: 0; }

/* Subtracted amounts below are shown for the 30px default gutter.            */
.col-1  { flex: 0 0 auto; width: calc(8.3333%  - var(--gutter) * 11 / 12); } /* 12 per row → 30 × 11/12 = 27.5px */
.col-2  { flex: 0 0 auto; width: calc(16.6666% - var(--gutter) * 10 / 12); } /*  6 per row → 30 × 10/12 = 25px   */
.col-3  { flex: 0 0 auto; width: calc(25%      - var(--gutter) * 9 / 12); }  /*  4 per row → 30 ×  9/12 = 22.5px */
.col-4  { flex: 0 0 auto; width: calc(33.3333% - var(--gutter) * 8 / 12); }  /*  3 per row → 30 ×  8/12 = 20px   */
.col-5  { flex: 0 0 auto; width: calc(41.6666% - var(--gutter) * 7 / 12); }  /*  pairs with col-7 → 17.5px       */
.col-6  { flex: 0 0 auto; width: calc(50%      - var(--gutter) * 6 / 12); }  /*  2 per row → 30 ×  6/12 = 15px   */
.col-7  { flex: 0 0 auto; width: calc(58.3333% - var(--gutter) * 5 / 12); }  /*  pairs with col-5 → 12.5px       */
.col-8  { flex: 0 0 auto; width: calc(66.6666% - var(--gutter) * 4 / 12); }  /*  pairs with col-4 → 10px         */
.col-9  { flex: 0 0 auto; width: calc(75%      - var(--gutter) * 3 / 12); }  /*  pairs with col-3 → 7.5px        */
.col-10 { flex: 0 0 auto; width: calc(83.3333% - var(--gutter) * 2 / 12); }  /*  pairs with col-2 → 5px          */
.col-11 { flex: 0 0 auto; width: calc(91.6666% - var(--gutter) * 1 / 12); }  /*  pairs with col-1 → 2.5px        */
.col-12 { flex: 0 0 auto; width: 100%; }                                     /*  alone on its line → no gap      */

/* The card grids are that same row with the column width set on the container
   instead of on each child. Auto-fit tracks used to pick the count from the
   space available; flex needs the counts spelled out, so each step down is a
   breakpoint placed where the old minimum track width used to run out. */
.grid {
    --gutter: var(--gap);
    display: flex; flex-wrap: wrap;
    gap: var(--gutter);
    justify-content: center;
}
.grid > * { flex: 0 0 auto; min-width: 0; }

.grid--2 > * { width: calc(50%      - var(--gutter) * 6 / 12); }  /* 2 per row */
.grid--3 > * { width: calc(33.3333% - var(--gutter) * 8 / 12); }  /* 3 per row */
.grid--4 > * { width: calc(25%      - var(--gutter) * 9 / 12); }  /* 4 per row */

@media (max-width: 1100px) { .grid--4 > * { width: calc(33.3333% - var(--gutter) * 8 / 12); } }
@media (max-width: 860px)  { .grid--4 > * { width: calc(50%      - var(--gutter) * 6 / 12); } }
@media (max-width: 620px)  { .grid--4 > * { width: 100%; } }

@media (max-width: 1000px) { .grid--3 > * { width: calc(50%      - var(--gutter) * 6 / 12); } }
@media (max-width: 680px)  { .grid--3 > * { width: 100%; } }

@media (max-width: 740px)  { .grid--2 > * { width: 100%; } }

/* Cards take their own height instead of stretching to the tallest in the row.
   For a grid whose cards hold lists of very different lengths, stretching
   leaves the short ones with a stretch of empty white below the last item. */
.grid--start { align-items: flex-start; }

/* ------------------------------------------------------------- media card */
.mcard {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.mcard:hover { border-color: var(--brand); box-shadow: var(--shadow-2); }
.mcard__media { position: relative; overflow: hidden; background: var(--tint); aspect-ratio: 4 / 3;}
.mcard__media img { width: 100%; height: 100%; transition: transform .5s var(--ease); object-fit: cover;}
.mcard:hover .mcard__media img { transform: scale(1.05); }
.mcard__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; gap: .7rem; }
.mcard__title {
    font-family: var(--font-display); font-size: var(--step-1); font-weight: 400;
    line-height: 1.3; letter-spacing: .02em; text-transform: uppercase;
    margin: 0; color: var(--ink); transition: color .18s var(--ease);
}
.mcard:hover .mcard__title { color: var(--brand); }
.mcard__text { margin: 0; font-size: .9375rem; line-height: 1.8; color: var(--body); flex: 1; }
.mcard__more { margin-top: .4rem; }

/* Compact link chips */
.chip-grid {
    --gutter: .6rem;
    display: flex; flex-wrap: wrap; gap: var(--gutter); 
    list-style: none; margin: 0; padding: 0;
}
.chip-grid li { flex: 0 0 auto; min-width: 0; margin: 0; width: calc(33.3333% - var(--gutter) * 8 / 12);}
@media (max-width: 800px)  { .chip-grid li { width: calc(50% - var(--gutter) * 6 / 12); } }
@media (max-width: 540px)  { .chip-grid li { width: 100%; } }
.chip {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: 1rem 1.2rem;
    background: #fff; border: 1px solid var(--line);
    color: var(--ink); text-decoration: none;
    font-family: var(--font-body); font-size: .875rem; font-weight: 500;
    letter-spacing: .04em; line-height: 1.5;
    transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
    height: 100%;
}
.chip:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.chip svg { flex: none; color: var(--brand); transition: color .18s var(--ease); }
.chip:hover svg { color: #fff; }

/* ------------------------------------------------------------ feature row */
.feature {
    --gutter: clamp(2rem, 1rem + 4.5vw, 5rem);
    display: flex; flex-wrap: wrap;
    gap: var(--gutter); align-items: center; justify-content: center;
}
.feature > * { flex: 0 0 auto; min-width: 0; width: calc(50% - var(--gutter) * 6 / 12); }
@media (max-width: 820px) { .feature > * { width: 100%; } }
/* Images keep their own proportions — no forced ratio, no cropping. */
.feature__media img { width: 100%; height: auto; }
.feature--reverse .feature__media { order: 2; }
@media (max-width: 820px) { .feature--reverse .feature__media { order: 0; } }
.feature__body > :last-child { margin-bottom: 0; }

/* A video row hands the frame more of the width. At 16:9 an embed is shorter
   than a photograph of the same width, so it needs the extra to hold its own
   beside the copy. */
/* col-7 / col-5 — the nearest twelfths to the 1.35fr / 1fr split this row
   used to carry. */
.feature--media-wide > .feature__media { width: calc(58.3333% - var(--gutter) * 5 / 12); }
.feature--media-wide > .feature__body  { width: calc(41.6666% - var(--gutter) * 7 / 12); }
@media (max-width: 900px) { .feature--media-wide > * { width: 100%; } }

/* Copy that will not fit beside the picture. A feature row is only as tall as
   its media before the text starts stretching it, so the overflow runs full
   width underneath instead of leaving dead space alongside the image. */
.feature__rest { margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.feature__rest > :last-child { margin-bottom: 0; }
/* .feature__rest .measure { max-width: 78ch; } */
.feature__rest .prose.measure { margin-inline: 0; }

/* The imported copy marks whole sentences up as headings. Set at display size
   they swamp the column they sit in, so a long one steps down and a very long
   one also drops the uppercase, reading as the statement it actually is. */
.h-long  { font-size: var(--step-2); }
.h-xlong { font-size: var(--step-1); text-transform: none; letter-spacing: .01em; line-height: 1.5; }

/* A list set full width under a feature row reads as columns rather than as
   one long ladder down the page. */
.feature__rest--list .prose ul { columns: 2; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
.feature__rest--list .prose li { break-inside: avoid; }
@media (max-width: 700px) { .feature__rest--list .prose ul { columns: 1; } }

/* --------------------------------------------------------------- CTA band */
.cta-band {
    background: var(--brand); color: #D6E5EE;
    padding-block: clamp(3.25rem, 2rem + 4vw, 5.5rem);
}
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 .45em; max-width: 24ch; }
.cta-band p { margin: 0; max-width: 58ch; color: #D6E5EE; line-height: 1.9; }
.cta-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.cta-band--center { text-align: center; }
.cta-band--center .cta-band__inner { flex-direction: column; }
.cta-band--center h2, .cta-band--center p { max-width: 60ch; margin-inline: auto; }
.cta-band--center .cta-band__actions { justify-content: center; }

@media only screen and (max-width: 1200px){
    .cta-band__inner{
        justify-content: center;
        text-align: center;
    }
}
/* ------------------------------------------------------------- statements */
.statement {
    background: var(--tint);
    padding-block: clamp(3rem, 2rem + 3.4vw, 5rem);
    text-align: center;
}
.statement h2 { max-width: 26ch; margin-inline: auto; color: var(--ink); }

/* ------------------------------------------------------- content blocks */
/* An interior page's body sections: the heading sits in its own narrow column
   beside its copy, which reads as an edited article and uses the width a
   single centred column would otherwise leave empty. The heading sticks while
   its own section scrolls, so you always know which part you are reading. */
.blocks > .block + .block {
    margin-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
    padding-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
    border-top: 1px solid var(--line);
}
.block {
    --gutter: clamp(1.5rem, .8rem + 2.4vw, 3.5rem);
    display: flex; flex-wrap: wrap; gap: var(--gutter);
}
.block__head { flex: 0 0 auto; width: calc(33.3333% - var(--gutter) * 8 / 12); min-width: 0; align-self: flex-start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.block__body { flex: 0 0 auto; width: calc(66.6666% - var(--gutter) * 4 / 12); min-width: 0; }
.block__head h2, .block__head h3 { font-size: var(--step-2); margin: 0; }
.block__body > :last-child { margin-bottom: 0; }
.block__body .prose { max-width: none; }
.section--mist .block + .block,
.section--sand .block + .block { border-top-color: var(--tint-dark); }
@media (max-width: 860px) {
    .block { --gutter: .8rem; }
    .block__head, .block__body { width: 100%; }
    .block__head { position: static; }
}

/* A picture belonging to one content block, set above its copy. Its own rule
   rather than .prose img, so the top of the block stays flush with its heading
   and a gallery of them keeps the grid's own spacing. */
.block__figure { margin: 0 0 1.6rem; }
.block__figure img { display: block; width: 100%; height: auto; margin: 0; box-shadow: var(--shadow-1); }
.block__figure figure { margin: 0; }
.gallery.block__figure { --gutter: 1rem; }
.gallery.block__figure > * { width: calc(50% - var(--gutter) * 6 / 12); }
@media (max-width: 640px) { .gallery.block__figure > * { width: 100%; } }

/* ------------------------------------------------------------------ steps */
/* Numbered treatment sequence. The rule above each item reads as one broken
   line across the row, so the steps stay legible as an ordered series even
   once they wrap to a single column. */
.steps {
    --gutter: var(--gap);
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--gutter); justify-content: center;
}
/* A column, so the picture can be pushed to the foot of the item. The copy
   above it runs to different lengths from step to step, and left in normal
   flow the pictures land at two different heights across the row. */
.steps > li {
    flex: 0 0 auto; min-width: 0; width: calc(25% - var(--gutter) * 9 / 12);
    margin: 0; padding-top: 1.5rem; border-top: 3px solid var(--line);
    display: flex; flex-direction: column;
}
@media (max-width: 1000px) { .steps > li { width: calc(50% - var(--gutter) * 6 / 12); } }
@media (max-width: 560px)  { .steps > li { width: 100%; } }
.steps__num {
    display: block; margin-bottom: .7rem;
    font-family: var(--font-display); font-size: 1.875rem; font-weight: 500;
    line-height: 1; letter-spacing: .08em; color: var(--brand-200);
}
.steps h3 {
    font-size: var(--step-1); text-transform: none; letter-spacing: .01em;
    margin-bottom: .5em;
}
.steps p { margin: 0; font-size: .9375rem; line-height: 1.85; }
/* The picture closes the step rather than opening it, so the rule, number and
   heading keep their rhythm across the row. margin-top:auto takes up whatever
   the copy left over, which lines the pictures up on one band; padding-top
   holds the gap open when there is nothing spare. */
.steps__media { margin: 0;; padding-bottom: 1.4rem; }
/* A fixed ratio so a replacement picture of another shape cannot pull the row
   out of line again. */
.steps__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.section--dark .steps > li { border-top-color: rgba(255, 255, 255, .28); }
.section--dark .steps__num { color: #8FB6CF; }

/* --------------------------------------------------------------- accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
    width: 100%; padding: 1.45rem .25rem;
    background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--font-display); font-size: 1.1875rem; font-weight: 400;
    letter-spacing: .02em; color: var(--ink); line-height: 1.45;
    transition: color .16s var(--ease);
}
.accordion__btn:hover { color: var(--brand); }
.accordion__icon {
    flex: none; position: relative; width: 24px; height: 24px; margin-top: .2em;
    border: 1.6px solid var(--brand);
    transition: background-color .2s var(--ease), transform .25s var(--ease);
}
.accordion__icon::before, .accordion__icon::after {
    content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: var(--brand);
}
.accordion__icon::before { width: 11px; height: 2px; }
.accordion__icon::after { width: 2px; height: 11px; transition: opacity .2s var(--ease); }
.accordion__btn[aria-expanded="true"] .accordion__icon { background: var(--brand); }
.accordion__btn[aria-expanded="true"] .accordion__icon::before { background: #fff; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { opacity: 0; }
/* The panel snaps open — it is not transitioned. A closed panel keeps its box
   in the flow, clipped to no height, so a deep link to #faq-3 still lands on
   the right item before the script opens it. */
.accordion__panel { height: 0; overflow: hidden; }
.accordion__panel[data-open="true"] { height: auto; }
.accordion__inner { overflow: hidden; }
.accordion__inner > div { padding: 0 .25rem 1.6rem; }
.accordion__inner p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ forms */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form__row {
    --gutter: 1.25rem;
    display: flex; flex-wrap: wrap; gap: var(--gutter); justify-content: center;
}
.form__row > * { flex: 0 0 auto; min-width: 0; width: calc(50% - var(--gutter) * 6 / 12); }
@media (max-width: 560px) { .form__row > * { width: 100%; } }

.field { display: flex; flex-direction: column; gap: .45rem; }
.field label {
    font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.field .req { color: var(--error); margin-left: .2em; }

.field input, .field textarea, .field select {
    width: 100%; padding: .9rem 1rem;
    background: #fff; border: 1.6px solid var(--line); border-radius: 0;
    font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--ink);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #596F7D; }
.field input:hover, .field textarea:hover { border-color: var(--brand-200); }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(50, 79, 98, .16);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--error input, .field--error textarea { border-color: var(--error); }
.field--error input:focus, .field--error textarea:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }

.field__error { font-size: .8125rem; line-height: 1.6; color: var(--error); font-weight: 500; }
.field__hint  { font-size: .8125rem; line-height: 1.6; color: var(--muted); }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: 1.1rem 1.25rem; font-size: .9375rem; line-height: 1.7; border: 1px solid;
}
.alert svg { flex: none; margin-top: .3em; }
.alert--ok { background: #EDF7F0; border-color: #BFE0CB; color: var(--success); }
.alert--err { background: #FDF0EF; border-color: #F2CFCC; color: var(--error); }
.alert p { margin: 0; }
.alert strong { display: block; margin-bottom: .1em; }

.form-shell {
    background: #fff; border: 1px solid var(--line);
    padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem);
}

/* --------------------------------------------------------------- video */
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-900); }
.video iframe, .video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video__btn {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    width: 100%; border: 0; background: rgba(21, 33, 40, .42); cursor: pointer;
    transition: background-color .22s var(--ease);
}
.video__btn:hover { background: rgba(21, 33, 40, .2); }
.video__play {
    display: flex; align-items: center; justify-content: center; width: 76px; height: 76px;
    background: var(--brand); color: #fff;
    transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.video__btn:hover .video__play { transform: scale(1.08); background: var(--brand-700); }
.video__caption { margin-top: .8rem; font-size: .8125rem; letter-spacing: .04em; color: var(--muted); }

.map-embed { border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; height: 440px; border: 0; }
@media (max-width: 700px) { .map-embed iframe { height: 330px; } }
iframe { display: block;}
/* -------------------------------------------------------------- post card */
.post-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); text-decoration: none;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.post-card:hover { border-color: var(--brand); box-shadow: var(--shadow-2); }
.post-card__media { overflow: hidden; background: var(--tint); }
.post-card__media img { width: 100%; height: auto; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card__date {
    font-family: var(--font-body); font-size: .75rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
/* Article titles are full sentences — keep them readable. */
.post-card__title {
    font-family: var(--font-display); font-size: 1.1875rem; font-weight: 400;
    line-height: 1.45; letter-spacing: .01em; text-transform: none;
    margin: 0; color: var(--ink);
}
.post-card:hover .post-card__title { color: var(--brand); }
.post-card__text { margin: 0; font-size: .9rem; line-height: 1.8; color: var(--body); flex: 1; }

.post-meta {
    display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; justify-content: center;
    font-family: var(--font-body); font-size: .8125rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
.post-meta span { display: inline-flex; align-items: center; gap: .5em; }

/* ------------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; list-style: none; margin: 3.25rem 0 0; padding: 0; }
.pagination li { margin: 0; }
.pagination a, .pagination span {
    display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 .85rem;
    border: 1px solid var(--line); text-decoration: none;
    font-family: var(--font-body); font-size: .875rem; font-weight: 500; color: var(--body);
    transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.pagination a:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.pagination [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .is-gap { border: 0; }

.archive-nav { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.archive-nav li { margin: 0; }
.archive-nav a {
    display: block; padding: .55rem 1.15rem; border: 1px solid var(--line);
    font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; color: var(--body);
    transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.archive-nav a:hover, .archive-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ----------------------------------------------------------------- doctor */
.doctor-card { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: flex-start; }
.doctor-card > * { flex: 0 0 auto; min-width: 0; }
.doctor-card__photo { width: 280px; }
.doctor-card > :not(.doctor-card__photo) { flex: 1 1 0; }
@media (max-width: 760px) { .doctor-card > * { flex: 0 0 100%; width: 100%; } }
/* The square only shapes the initials placeholder; a real photograph keeps
   its own proportions. */
.doctor-card__photo {
    aspect-ratio: 1; overflow: hidden;
    background-color: var(--brand);
    background-image: linear-gradient(150deg, var(--brand-400), var(--brand-900));
    display: flex; align-items: center; justify-content: center;
}
.doctor-card__photo:has(img) { aspect-ratio: auto; background-image: none; }
.doctor-card__photo img { width: 100%; height: auto; }
.doctor-card__initials { font-family: var(--font-display); font-size: 4rem; letter-spacing: .08em; color: #fff; }
.doctor-card__role {
    font-family: var(--font-body); font-size: .75rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: .75rem;
}

/* ------------------------------------------------------ patient library */
/* The topic picture. On the old site it sat in a 250px sidebar; this layout
   dropped the sidebar and the article runs the full width, so the picture
   floats beside the opening copy -- which also pulls those first long lines
   back to a readable length instead of leaving it stranded above them. */
/* Capped: these are 400px-wide originals, so letting the stacked layout
   stretch one across a 900px column would only make it soft. */
.library__lead { margin: 0 0 1.4rem; max-width: 420px; }
.library__lead img { display: block; width: 100%; height: auto; margin: 0; box-shadow: var(--shadow-1); }
@media (min-width: 900px) {
    .library__lead { float: right; width: 340px; margin: .3rem 0 1.5rem 2.5rem; }
}
/* The index is a directory: one card per subject, its picture leading, then
   the guides inside it. Built on .mcard's conventions so it sits in the same
   family as the service and blog cards. */
.lib-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.lib-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-2); }

.lib-card__media { display: block; overflow: hidden; background: var(--tint); }
/* A fixed ratio: the originals run from 250px to 836px wide and in every shape
   from square to panoramic, and left alone they would give every card a
   different masthead depth. */
.lib-card__media img { display: block; width: 100%; height: auto; margin: 0; object-fit: cover; }

.lib-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.6rem; }
.lib-card__title {
    font-family: var(--font-display); font-size: var(--step-1); font-weight: 400;
    line-height: 1.3; letter-spacing: .02em; text-transform: none;
    margin: 0; color: var(--ink);
}
.lib-card__count {
    margin: .5rem 0 1rem;
    font-family: var(--font-body); font-size: .75rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
.lib-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lib-card__list li { margin: 0; }
.lib-card__list li + li { border-top: 1px solid var(--line-2); }
.lib-card__list a {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .72rem 0;
    font-family: var(--font-body); font-size: .9375rem; line-height: 1.5;
    color: var(--body); text-decoration: none;
    transition: color .16s var(--ease);
}
.lib-card__list a:hover { color: var(--brand); }
.lib-card__list svg { flex: none; color: var(--brand-200); transition: color .16s var(--ease), transform .16s var(--ease); }
.lib-card__list a:hover svg { color: var(--brand); transform: translateX(3px); }

/* --------------------------------------------------------------- gallery */
.gallery {
    --gutter: var(--gap);
    display: flex; flex-wrap: wrap; gap: var(--gutter); justify-content: center;
}
.gallery > * { flex: 0 0 auto; min-width: 0; width: calc(33.3333% - var(--gutter) * 8 / 12); }
@media (max-width: 1000px) { .gallery > * { width: calc(50% - var(--gutter) * 6 / 12); } }
@media (max-width: 640px)  { .gallery > * { width: 100%; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; }
.gallery figcaption { margin-top: .7rem; font-size: .8125rem; color: var(--muted); text-align: center; }

/* --------------------------------------------------------------- reviews */
.review-cta {
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center;
    padding: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
    border: 1px solid var(--tint-dark); background: var(--tint);
}
.stars { display: inline-flex; gap: .25rem; color: var(--brand); }

/* ---------------------------------------------------------------- reviews */
.reviews__slider { position: relative; }
.reviews__track {
    display: flex; gap: var(--gap);
    /* No scroll-behavior:smooth here -- combined with mandatory snapping it
       stops the track scrolling programmatically at all. */
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: .5rem;
}
.reviews__track::-webkit-scrollbar { width: 0; height: 0; }
.reviews__track > * { flex: 0 0 min(100%, 380px); scroll-snap-align: start; }
.review-card {
    background: #fff; border: 1px solid var(--line);
    padding: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
    display: flex; flex-direction: column; gap: 1rem;
}
.review-card__text { margin: 0; line-height: 1.9; quotes: 'C' 'D'; }

.reviews__track { --per-view: 4; }
.reviews__track > * {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
}
@media (max-width: 1299px) { .reviews__track { --per-view: 3; } }
@media (max-width: 1024px)  { .reviews__track { --per-view: 2; } }
@media (max-width: 600px)  { .reviews__track { --per-view: 1; } }

/* .review-card__text::before { content: open-quote; }
.review-card__text::after  { content: close-quote; }

/* Four lines by default. Scoped to .js so that without JavaScript -- where the
   Read more button could not work -- the full review stays readable. */
.js .review-card__text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
}
/* Expanded keeps the exact same box height and scrolls the text inside it. */
.js .review-card.is-expanded .review-card__text {
    display: block; -webkit-line-clamp: none;
    max-height: calc(4 * 1.9em);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: .5rem;
}
.review-card__more {
    align-self: flex-start;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--brand);
}
.review-card__more:hover { text-decoration: underline; }
.review-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; }
.review-card__name { font-style: normal; font-weight: 600; color: var(--ink); }
/*.review-card__meta {margin-top: auto;}*/
.review-card__src { font-size: .8125rem; color: var(--muted); }
.review-card__demo {
    font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
    padding: .15rem .5rem; border: 1px dashed var(--muted); color: var(--muted);
}
.reviews__nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.reviews__arrow {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1.6px solid var(--brand-200); color: var(--brand); cursor: pointer;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.reviews__arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.reviews__arrow[data-reviews-prev] svg { transform: rotate(180deg); }

/* ---------------------------------------------------------------- footer */
.site-footer > .shell { width: 100%; max-width: none; padding-inline: clamp(30px, 0.4rem + 2vw, 2.5rem); }
.site-footer { background: var(--tint); color: var(--body); font-size: .9375rem; }
.site-footer a { color: var(--body); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.footer__main {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 30px; justify-content: space-between;
    padding-block: clamp(3.25rem, 2rem + 3.4vw, 5rem);
}
.footer__brand { min-width: 0; max-width: 400px; width: 100%; }
.footer__col { min-width: 0; }
.footer__col--hours { }
/* nav sits flush to the right edge: content width, no leftover gap */
.footer__col--nav { }
@media (max-width: 1000px) {
    .footer__main > * { flex: 1 1 40%; }
}
@media (max-width: 580px) {
    .footer__main > * { flex: 1 1 100%; }
}

.footer__title {
    font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.25rem;
}
.site-footer h2, .site-footer h3, .site-footer h4 { color: var(--ink); }
.footer__brand img { height: 89px; width: auto; margin-bottom: 1.25rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer__list li { margin: 0; line-height: 1.6; }

.footer__social { display: flex; gap: .65rem; margin-top: 1.4rem; }
.footer__social a {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1.6px solid var(--brand-200); color: var(--brand);
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Three centred lines: copyright, legal links, then the practice keyword line. */
.footer__bottom {
    border-top: 1px solid var(--tint-dark);
    padding-block: 1.6rem;
    display: flex; flex-direction: column; align-items: center;
    gap: .7rem;
    text-align: center;
    font-size: .8125rem; letter-spacing: .03em;
}
.footer__copy { margin: 0; }

.footer__legal {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    row-gap: .35rem;
}
.footer__legal li { margin: 0; display: flex; align-items: center; }
/* Separator rides with the preceding item, so a wrap never starts on a pipe. */
.footer__legal li:not(:last-child)::after {
    content: '|'; margin: 0 .8rem; color: var(--tint-dark);
}
.footer__seo { color: var(--muted); font-size: .75rem; letter-spacing: .05em; margin: 0; }

/* ------------------------------------------------------------- utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.flow > * + * { margin-top: 1.25rem; }

.to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70;
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    background: var(--brand); color: #fff; border: 0; cursor: pointer;
    box-shadow: var(--shadow-2);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s, background-color .18s var(--ease);
    padding: 0 !important
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-700); }
@media (max-width: 600px) { .to-top { display: none; } }

/* Reveal-on-scroll. Content is visible by default; `reveal-on` is added by the
   inline head script only when IntersectionObserver exists and motion is
   allowed, so a JS failure can never leave content invisible. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); }
.reveal-on [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-on [data-reveal] { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- print */
@media print {
    .site-header, .nav-scrim, .to-top, .cta-band, .site-footer .footer__main, .hero__dots { display: none !important; }
    body { color: #000; font-size: 11pt; line-height: 1.5; }
    .page-hero { background: none; color: #000; padding-block: 0 1rem; text-align: left; }
    .page-hero::after, .page-hero__media { display: none; }
    .page-hero h1, .page-hero__sub { color: #000; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
    .card, .form-shell { border: 1px solid #ccc; box-shadow: none; }
}