/* ==========================================================================
   Hinkapin Health — Global Stylesheet
   Design language: deep navy + warm gold accent, serif display headings
   (Playfair Display) over clean sans body copy (Inter). Fully responsive,
   accessible, and built with CSS custom properties for easy re-theming.
   ========================================================================== */

:root {
    --navy-900: #0a1d38;
    --navy-800: #0e2646;
    --navy-700: #14315a;
    --navy-600: #1b3f70;
    --navy-tint: #eef2f8;
    --blue-soft: #dbe9fb;
    --blue-hover: #c2dbf8;
    --gold-600: #b8862f;
    --gold-500: #c99b3c;
    --gold-400: #dcb35c;
    --gold-700: #8a6423; /* text-safe gold: 5.35:1 on white — use for small/bold gold text where --gold-600 (3.2:1) fails WCAG AA */
    --gold-tint: #fbf3e2;
    --teal-600: #1c8a7a;
    --ink: #16232f;
    --ink-muted: #55677a;
    --line: #e2e7ee;
    --bg-soft: #f5f7fa;
    --white: #ffffff;
    --radius: 10px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 3px rgba(10, 29, 56, 0.08);
    --shadow-md: 0 12px 30px -12px rgba(10, 29, 56, 0.25);
    --font-display: "Poppins", Arial, sans-serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-script: "Caveat", cursive;
    --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden belongs on html, not just body: the mobile nav drawer is
   position:fixed + translateX(100%) just past the right edge when closed,
   and fixed-position elements are sized against the viewport, not body's
   box — body's own overflow can't clip them. Setting it on the root
   scroller (html) suppresses that hairline horizontal scroll everywhere. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-900); margin: 0 0 .5em; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0 0 1em; color: var(--ink-muted); font-weight: 500; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--navy-900); color: #fff;
    padding: .75rem 1.25rem; z-index: 2000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.icon { width: 22px; height: 22px; }
.icon-sm { width: 17px; height: 17px; flex-shrink: 0; }
.icon-lg { width: 34px; height: 34px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    padding: 14px 26px; border-radius: 8px; font-weight: 600; font-size: .95rem; letter-spacing: -0.01em;
    border: 1px solid transparent; white-space: nowrap;
    transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out,
                box-shadow .3s ease-in-out, transform .2s ease-in-out;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(10,29,56,.35); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-sm { padding: 9px 16px; font-size: .85rem; }
.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-gold { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-400); }
.btn-outline-navy { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-outline-navy:hover { background: var(--navy-900); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }
.btn-link {
    color: var(--navy-800); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; margin: 0; font-family: inherit; font-size: inherit; cursor: pointer; text-align: left;
}
.btn-link .icon { width: 16px; height: 16px; transition: transform .15s ease; }
.btn-link:hover .icon { transform: translateX(3px); }
.btn-link-gold { color: var(--gold-700); }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-900); color: #cfdaea; font-size: .82rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 9px 24px; flex-wrap: wrap; gap: 6px; }
.topbar-left { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-left a, .topbar-emergency { display: inline-flex; align-items: center; gap: 6px; color: #cfdaea; }
.topbar-left a:hover { color: #fff; }
.topbar-emergency { color: #f0c4c4; font-weight: 600; }
.lang-select { color: #cfdaea; }

/* ---------- Header / Nav ---------- */
.site-header {
    background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 500;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -14px rgba(10,29,56,.35); }
.site-header.header-hidden { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 20px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-badge { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: block; }
.brand-word { font-weight: 700; color: var(--navy-900); font-size: 1.2rem; }
.brand-word span { font-weight: 400; }

.main-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-menu { display: flex; gap: 20px; flex-wrap: nowrap; }
.nav-menu a { display: inline-block; white-space: nowrap; font-weight: 600; letter-spacing: -0.01em; font-size: .86rem; color: var(--ink); padding: 8px 1px; border-bottom: 2px solid transparent; transition: color .3s ease-in-out, border-color .3s ease-in-out; }
.nav-menu a:hover, .nav-menu a.active { color: var(--navy-800); border-bottom-color: var(--gold-500); }
.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-cta { flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; padding: 6px; color: var(--navy-900); flex-shrink: 0; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

/* ---------- Nav dropdown (mega-menu) ---------- */
/* Positioning context for .dropdown-panel is .main-nav (below), not this li —
   see the note on .dropdown-panel for why. */
.nav-dropdown-wrap { display: flex; align-items: center; }
.nav-dropdown-wrap a { padding-right: 4px; }
/* Padding widens the hit target to >=24x24px (was 22x33 — failed Lighthouse's
   touch target size/spacing check) without changing the caret's visible size. */
.dropdown-caret {
    background: none; border: none; padding: 8px 5px 8px 5px; margin: 0; cursor: pointer;
    color: var(--ink); display: inline-flex; align-items: center; line-height: 0;
}
.dropdown-caret .icon-sm { transition: transform .2s ease-in-out; }
.nav-item.has-dropdown:hover .dropdown-caret .icon-sm,
.nav-item.has-dropdown:focus-within .dropdown-caret .icon-sm,
.dropdown-caret[aria-expanded="true"] .icon-sm { transform: rotate(180deg); }

/* The panel used to center itself under the Resources link via left:50% +
   translateX(-50%). Resources sits well to the right of the nav's own
   center, so a 560px-wide panel centered on it ran ~100px past the
   viewport's right edge on common laptop widths (1280–1550px) — visible
   horizontal page overflow. Anchoring it to .main-nav's right edge instead
   (the boundary just before the Login button) keeps it inside the header
   at every width; .main-nav is the positioning context, not the li, so the
   panel doesn't drift right as more nav items are added later. */
.main-nav { position: relative; }
.dropdown-panel {
    position: absolute; top: 100%; right: 0; left: auto; transform: translateY(8px);
    width: min(560px, calc(100vw - 48px)); background: #fff; border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -18px rgba(10,29,56,.28); border: 1px solid var(--line);
    padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s;
    z-index: 600;
}
.nav-item.has-dropdown:hover .dropdown-panel,
.nav-item.has-dropdown:focus-within .dropdown-panel,
.dropdown-panel.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.dropdown-columns { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-content: start; }
.dropdown-col { display: flex; flex-direction: column; }
.dropdown-col a {
    display: block; padding: 9px 8px; border-radius: 8px; font-size: .88rem; font-weight: 600;
    color: var(--ink); transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.dropdown-col a:hover, .dropdown-col a:focus-visible { background: var(--navy-tint); color: var(--navy-800); }

/* Scoped as ".dropdown-panel .dropdown-feature" (specificity 0,2,0), not just
   ".dropdown-feature" (0,1,0) — this link also matches ".nav-menu a" (0,1,1),
   which outranks a bare class selector and was silently forcing it back to
   inline-block/nowrap, breaking the flex column layout and stopping the
   title/date text from wrapping (white-space:nowrap is inherited by them
   from that rule too, hence the explicit reset below). */
.dropdown-panel .dropdown-feature {
    grid-column: 2; display: flex; flex-direction: column; gap: 8px; padding: 12px;
    border-radius: var(--radius-lg); background: var(--bg-soft); transition: background-color .2s ease-in-out;
    white-space: normal;
}
.dropdown-feature:hover, .dropdown-feature:focus-visible { background: var(--navy-tint); }
.dropdown-feature-media {
    position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-tint);
}
.dropdown-feature-media img { width: 100%; height: 100%; min-width: 0; object-fit: cover; display: block; }
.dropdown-feature-cta {
    position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
    background: var(--navy-900); color: #fff; font-family: var(--font-display); font-weight: 500;
    font-size: .74rem; letter-spacing: .01em; padding: 6px 11px 6px 12px; border-radius: 999px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, gap .2s ease-in-out;
}
.dropdown-feature-cta .icon-sm { width: 13px; height: 13px; }
.dropdown-feature:hover .dropdown-feature-cta,
.dropdown-feature:focus-visible .dropdown-feature-cta { background: var(--gold-500); color: var(--navy-900); gap: 9px; }
.dropdown-feature .badge-pill { align-self: flex-start; }
.dropdown-feature-title { font-family: var(--font-display); font-weight: 500; font-size: .92rem; color: var(--navy-900); line-height: 1.3; }
.dropdown-feature-date { font-size: .76rem; font-weight: 600; color: #7c8aa0; letter-spacing: .02em; }

/* Who We Serve — a richer mega-menu: two labeled audience groups (each with a
   small leading icon per link) plus a dark, gold-accented partner CTA panel,
   reusing the Resources dropdown's positioning/animation but its own 3-column
   layout since it carries a third block (the CTA) instead of one feature card. */
.dropdown-panel-wide {
    width: min(760px, calc(100vw - 48px));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 6px 26px;
    /* Don't stretch columns to match the tallest one — the CTA card is kept
       short (no badge, one-line body) to sit close to the link lists' own
       height, so it should size to its own content, not inflate to match. */
    align-items: start;
}
/* Each audience group sits in its own stretched grid column (row height set
   by the taller CTA card next to it) — without this, the group's label+links
   would hug the top and leave a dead gap below, same problem the CTA cards
   already solve for themselves with justify-content:center. */
.dropdown-group { display: flex; flex-direction: column; justify-content: center; }
.dropdown-group-label {
    display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--gold-700); margin-bottom: 10px; padding: 0 8px;
}
.dropdown-col-icons a { display: flex; align-items: center; gap: 10px; }
.dropdown-col-icons a .icon-sm { width: 18px; height: 18px; color: var(--gold-600); flex-shrink: 0; }

/* Specificity note (see the comment above .dropdown-panel .dropdown-feature):
   a bare ".dropdown-feature--panel" (0,1,0) would lose to that ancestor-qualified
   base rule (0,2,0) regardless of source order, so this must match or beat it. */
.dropdown-panel .dropdown-feature.dropdown-feature--panel {
    grid-column: 3; background: var(--navy-900); color: #fff; border-radius: var(--radius-lg);
    padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.dropdown-panel .dropdown-feature.dropdown-feature--panel:hover,
.dropdown-panel .dropdown-feature.dropdown-feature--panel:focus-visible { background: var(--navy-900); }
.badge-pill-on-navy { background: rgba(255, 255, 255, .12); color: var(--gold-400); align-self: flex-start; }
.badge-pill-on-tint { background: #fff; color: var(--gold-700); align-self: flex-start; }
.dropdown-feature-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #fff; line-height: 1.25; }
.dropdown-feature-cta-title--dark { color: var(--navy-900); }
.dropdown-feature-cta-body { font-size: .84rem; color: rgba(255, 255, 255, .8); line-height: 1.55; }
.dropdown-feature-cta-body--dark { color: var(--ink-muted); }
/* align-self:stretch + centered, wrapping text — Who We Serve's short "Talk
   With Our Team" fit fine at flex-start in its wide 3-col panel, but these
   narrower 2-col cards need the button to fill the card and wrap rather
   than overflow it if the label runs long. */
.dropdown-feature-cta-btn { align-self: stretch; margin-top: 2px; justify-content: center; white-space: normal; text-align: center; }
/* Specificity note (as above): this <a> also matches ".nav-menu a" (0,1,1),
   which was silently overriding .btn-navy/.btn-gold's own text color —
   invisible on .btn-navy specifically (dark ink on dark navy). Scope through
   the dropdown panel to beat it, including its own :hover/.active rule. */
.dropdown-panel .dropdown-feature-cta-btn.btn-navy,
.dropdown-panel .dropdown-feature-cta-btn.btn-navy:hover { color: #fff; }
.dropdown-panel .dropdown-feature-cta-btn.btn-gold,
.dropdown-panel .dropdown-feature-cta-btn.btn-gold:hover { color: var(--navy-900); }

/* For Patients — a two-group list in a single column (so long labels like
   "What to Expect on Surgery Day" get their own full-width line) beside a
   warm, checklist-style support card: a softer sibling to Who We Serve's
   dark CTA panel rather than a repeat of it. */
.dropdown-panel-list { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.dropdown-stacked { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.dropdown-col-single { grid-column: 1; justify-content: center; }

.dropdown-panel .dropdown-feature.dropdown-feature--soft { background: var(--gold-tint); justify-content: center; }
.dropdown-panel .dropdown-feature.dropdown-feature--soft:hover,
.dropdown-panel .dropdown-feature.dropdown-feature--soft:focus-visible { background: var(--gold-tint); }
.dropdown-feature-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dropdown-feature-checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: .83rem; font-weight: 600; color: var(--navy-800); line-height: 1.35; }
.dropdown-feature-checklist .icon-sm { color: var(--gold-600); flex-shrink: 0; margin-top: 2px; }

/* Our Approach — a flat icon list (these five are parallel pillars, not a
   sequence, so no numbering) beside a light navy-tint card. */
.dropdown-panel .dropdown-feature.dropdown-feature--tint { background: var(--navy-tint); justify-content: center; }
.dropdown-panel .dropdown-feature.dropdown-feature--tint:hover,
.dropdown-panel .dropdown-feature.dropdown-feature--tint:focus-visible { background: var(--navy-tint); }

/* Company — pairs the list with a real "get in touch" card (the site's own
   phone/email) instead of more marketing copy. */
.dropdown-panel .dropdown-feature.dropdown-feature--contact { background: var(--navy-900); justify-content: center; gap: 12px; }
.dropdown-panel .dropdown-feature.dropdown-feature--contact:hover,
.dropdown-panel .dropdown-feature.dropdown-feature--contact:focus-visible { background: var(--navy-900); }
/* Specificity note (as above): these anchors also match ".nav-menu a" (0,1,1),
   so a bare ".dropdown-contact-row" (0,1,0) would lose its color/display to
   it — scope through the feature panel to comfortably outrank that rule. */
.dropdown-feature--contact .dropdown-contact-row {
    display: flex; align-items: center; gap: 10px; color: #fff; font-size: .88rem;
    font-weight: 600; white-space: normal;
}
/* Flex items don't shrink below their content's intrinsic width by default,
   so the email address was overflowing the card instead of wrapping. */
.dropdown-feature--contact .dropdown-contact-row span { min-width: 0; overflow-wrap: break-word; }
.dropdown-feature--contact .dropdown-contact-row .icon-sm { color: var(--gold-400); flex-shrink: 0; }
.dropdown-feature--contact a.dropdown-contact-row:hover,
.dropdown-feature--contact a.dropdown-contact-row:focus-visible { color: var(--gold-400); }
.dropdown-feature--contact .dropdown-contact-row--muted { color: rgba(255, 255, 255, .72); font-size: .78rem; font-weight: 500; }
.dropdown-feature--contact .dropdown-contact-row--muted .icon-sm { color: rgba(255, 255, 255, .55); }

@media (max-width: 860px) {
    .nav-dropdown-wrap { justify-content: space-between; width: 100%; }
    .dropdown-caret { padding: 12px 4px; }
    .dropdown-panel {
        position: static; transform: none; width: auto; box-shadow: none; border: none;
        border-radius: 0; padding: 4px 0 8px 12px; display: none; grid-template-columns: 1fr;
        background: var(--bg-soft); opacity: 1; visibility: visible; pointer-events: auto;
    }
    .nav-item.has-dropdown:hover .dropdown-panel,
    .nav-item.has-dropdown:focus-within .dropdown-panel,
    .dropdown-panel.is-open {
        display: grid;
        /* Undo the desktop centering transform — this rule's specificity also
           wins on mobile since it's not media-scoped, so it must be repeated
           here to keep the panel in normal (static) flow instead of shifted
           left by 50% of its own width. */
        transform: none;
    }
    .dropdown-columns { grid-template-columns: 1fr; gap: 0; }
    .dropdown-panel.dropdown-panel-wide { grid-template-columns: 1fr; gap: 0; width: auto; }
    .dropdown-panel.dropdown-panel-list { grid-template-columns: 1fr; gap: 0; width: auto; }
    .dropdown-stacked { gap: 0; }
    .dropdown-group-label { margin-top: 10px; }
    .dropdown-panel .dropdown-feature.dropdown-feature--panel { display: none; }
    .dropdown-panel .dropdown-col a { display: block; width: 100%; border-bottom: 1px solid var(--line); padding: 12px 4px; border-radius: 0; white-space: normal; }
    .dropdown-panel .dropdown-feature { display: none; }
}

/* ---------- Hero sections ---------- */
.hero { padding: 70px 0 80px; }
.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.eyebrow { color: var(--navy-700); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: 14px; display: block; }
.eyebrow-gold { color: var(--gold-700); }
.eyebrow-on-dark { color: var(--gold-400); }
h1.display { font-size: clamp(2.1rem, 4vw, 3rem); }
.hero p.lede { font-size: 1.12rem; max-width: 46em; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 26px; }

.hero-dark { background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%); color: #fff; }
.hero-dark h1, .hero-dark h2, .hero-dark h3 { color: #fff; }
.hero-dark p { color: #c6d2e2; }

.hero-panel {
    background: var(--navy-tint); border-radius: var(--radius-lg); padding: 40px; position: relative; overflow: hidden;
}
.hero-panel h2 { font-size: 1.5rem; }

.hero-check-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.hero-check-list li { display: flex; gap: 10px; align-items: flex-start; color: #dbe4f1; font-weight: 500; }
.hero-check-list .icon { color: var(--gold-400); flex-shrink: 0; margin-top: 2px; }

/* ---------- Homepage hero photo (image stretches the full height of the hero row) ---------- */
.hero-split-photo { align-items: stretch; gap: 56px; min-height: 620px; }
.hero-split-photo .hero-content { display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
/* This hero's headline is a full sentence rather than the short taglines other
   pages use, so it gets its own smaller scale instead of shrinking h1.display
   globally (which would undersize every other page's short hero title). */
.hero-split-photo h1.display { font-size: clamp(1.6rem, 1rem + 1.7vw, 2.2rem); line-height: 1.22; }
.hero-media {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-md); min-height: 420px; background: var(--navy-tint);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .6s ease; }
.hero-media:hover img { transform: scale(1.035); }
.hero-media::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: linear-gradient(205deg, rgba(10, 29, 56, 0) 48%, rgba(10, 29, 56, .4) 100%);
}
.hero-media-badge {
    position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2;
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-sm);
}
.hero-media-badge .icon-circle { margin-bottom: 0; flex-shrink: 0; }
.hero-media-badge span:last-child { font-family: var(--font-display); font-weight: 500; font-size: .86rem; line-height: 1.3; color: var(--navy-900); }

/* ---------- Placeholder media blocks ---------- */
.ph-media {
    background: repeating-linear-gradient(135deg, #eef1f6, #eef1f6 10px, #e6eaf1 10px, #e6eaf1 20px);
    border: 1.5px dashed #b9c3d1; border-radius: var(--radius-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #7c8aa0; text-align: center; padding: 20px; min-height: 220px;
}
.ph-media .icon-lg { color: #97a4b8; }
.ph-media span.ph-label { font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-portrait { aspect-ratio: 3 / 4; }
.ph-wide { aspect-ratio: 16 / 9; }
.ph-banner { aspect-ratio: 21 / 9; }
.ph-round { border-radius: 50%; aspect-ratio: 1/1; }

.founder-photo {
    aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-md); background: var(--navy-tint);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Overview video card (opens the popup player) ---------- */
.video-feature {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4;
    background: #0a1420; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .5);
    display: block; width: 100%; padding: 0; margin: 0; border: 0; font: inherit; cursor: pointer;
}
.video-feature-media { width: 100%; height: 100%; object-fit: cover; display: block; background: #0a1420; }
.video-feature::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(10, 20, 32, .45), rgba(10, 20, 32, 0) 55%);
}
.video-play-btn {
    position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, .75); color: #fff;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .55);
    transition: transform .25s ease-in-out, background-color .25s ease-in-out, box-shadow .25s ease-in-out;
}
.video-play-btn::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35);
    opacity: 0; transform: scale(.85); transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}
/* The triangle glyph's visual weight sits left of its true center — nudge it
   right so it reads as centered inside the round button rather than off. */
.video-play-icon { display: flex; margin-left: 2px; }
.video-feature:hover .video-play-btn, .video-feature:focus-visible .video-play-btn {
    background: rgba(255, 255, 255, .34); transform: scale(1.08); box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .6);
}
.video-feature:hover .video-play-btn::after, .video-feature:focus-visible .video-play-btn::after { opacity: 1; transform: scale(1); }

/* ---------- Homepage "See the Model in Action" three-column layout ---------- */
/* .section-navy.model-action-section (not just .model-action-section) so this
   beats the plain .section-navy { background: var(--navy-900) } rule further
   down the sheet — that shorthand resets background-image too, regardless of
   source order, unless this selector is more specific. */
.section-navy.model-action-section {
    background-image: linear-gradient(180deg, rgba(10, 18, 32, .25), rgba(10, 18, 32, .5)), url('../images/model-action-bg.jpg');
    background-size: cover; background-position: center;
}
.model-action-grid {
    display: grid; grid-template-columns: 1fr .95fr .8fr; gap: 36px; align-items: start;
}
.model-action-side-card {
    background: #fff; border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; justify-content: center;
}
.model-action-side-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.model-action-side-card p { margin-bottom: 16px; }
/* Beats the .section-navy h2/h3/p rules further down the sheet regardless of
   source order — the side card is a light panel sitting inside a dark
   section, so it needs its own (higher-specificity) text colors, not the
   dark-section ones. */
.section-navy .model-action-side-card h3 { color: var(--navy-900); }
.section-navy .model-action-side-card p { color: var(--ink-muted); }

@media (max-width: 1100px) {
    .model-action-grid { grid-template-columns: 1fr 1fr; }
    .model-action-side-card { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .model-action-grid { grid-template-columns: 1fr; }
    .video-feature { aspect-ratio: 16 / 9; }
}

/* ---------- Overview video popup ---------- */
.video-modal {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
    position: absolute; inset: 0; background: rgba(6, 12, 22, .82);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.video-modal-dialog {
    position: relative; width: min(920px, 100%); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .65); background: #000;
}
/* object-fit:cover matters even before playback starts: with no object-fit,
   the poster image stretches non-uniformly to fill this 16:9 box, distorting
   it (the poster source isn't 16:9) — cover crops instead of warping it. */
.video-modal-media { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; object-fit: cover; }
.video-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(10, 20, 32, .6); border: 1.5px solid rgba(255, 255, 255, .4); color: #fff;
    transition: background-color .2s ease-in-out, transform .2s ease-in-out;
}
.video-modal-close .icon { width: 18px; height: 18px; }
.video-modal-close:hover, .video-modal-close:focus-visible { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
body.has-video-modal-open { overflow: hidden; }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-tight { padding: 60px 0; }
.section-soft { background: var(--bg-soft); }
.section-tint { background: var(--navy-tint); }
.section-navy { background: var(--navy-900); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p { color: #c6d2e2; }
.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.divider-gold { width: 56px; height: 3px; background: var(--gold-500); margin: 18px 0; border-radius: 3px; }
.section-head .divider-gold { margin-left: auto; margin-right: auto; }
.section-head.left .divider-gold { margin-left: 0; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px;
    box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease-in-out;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card-num { color: var(--gold-700); font-weight: 700; font-size: .85rem; letter-spacing: .05em; margin-bottom: 8px; display: block; }

/* Icon inside a card/box rises and turns slightly on hover, in step with
   the card's own lift — a small cue that the whole block is interactive. */
.card:hover .icon-circle, .service-card:hover .icon-circle,
.specialty-card:hover .icon-circle, .value-item:hover .icon-circle {
    transform: translateY(-2px) rotate(-4deg);
}
.icon-circle { transition: transform .3s ease-in-out, background-color .3s ease-in-out; }

/* ---------- Same hover-lift as .card, extended to every other card/panel
   block on the site (service cards, dark CTA panels, office/contact boxes,
   the video feature, form cards, the pricing tool) so hovering any of them
   reads the same way. ---------- */
.service-card, .dark-panel, .panel-dark, .office-box, .video-feature,
.model-action-side-card, .form-card, .pricing-finder {
    transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
}
.service-card:hover, .office-box:hover, .video-feature:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-md);
}

/* Small pills/badges pop slightly on hover — relationship-list tags,
   recognition badges, the surgery-pricing step badges. */
.relationship-list span, .badge-pill, .recognition-badge, .step-badge {
    display: inline-flex; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.relationship-list span:hover, .badge-pill:hover, .recognition-badge:hover, .step-badge:hover {
    transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-sm);
}

/* ---------- Horizontally scrollable card row (e.g. "Why Employers Partner With Us") ---------- */
.scroll-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.scroll-section-head .section-head { margin-bottom: 40px; }
.scroll-controls { display: flex; gap: 10px; flex-shrink: 0; margin-bottom: 40px; }
.scroll-btn {
    width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff;
    color: var(--navy-800); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease-in-out;
}
.scroll-btn .icon-sm { transition: transform .2s ease-in-out; }
.scroll-btn-prev .icon-sm { transform: rotate(180deg); }
.scroll-btn:hover:not(:disabled), .scroll-btn:focus-visible:not(:disabled) {
    background: var(--navy-900); color: #fff; border-color: var(--navy-900); transform: translateY(-2px);
}
.scroll-btn:disabled { opacity: .35; cursor: default; }

.scroll-track {
    display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    padding: 4px 0 14px; scrollbar-width: none; -ms-overflow-style: none;
}
.scroll-track::-webkit-scrollbar { display: none; }
.scroll-card {
    flex: 0 0 auto; width: min(300px, 80vw); scroll-snap-align: start;
}
/* The peeking last card carries a clear blue tint (on-brand for a medical site — the
   palette's navy family, not the gold accent) as a "there's more — scroll me" cue while
   the row is untouched. The moment any card in the row is hovered, that cue is no longer
   needed (the visitor has found the interaction), so it reverts to white — while whichever
   card is actually under the cursor (last one included) takes a deeper blue hover tint. */
.scroll-card:last-child { background: var(--blue-soft); }
.scroll-track:hover .scroll-card:last-child { background: #fff; }
.scroll-card:hover { background: var(--blue-hover); }
.scroll-track:hover .scroll-card:last-child:hover { background: var(--blue-hover); }

@media (max-width: 700px) {
    .scroll-section-head { align-items: center; }
    .scroll-section-head .section-head, .scroll-controls { margin-bottom: 28px; }
    .scroll-card { width: 84vw; }
}

.icon-circle {
    width: 58px; height: 58px; border-radius: 50%; background: var(--navy-tint); color: var(--navy-800);
    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.icon-circle-dark { background: var(--navy-800); color: var(--gold-400); }
.icon-circle-gold { background: var(--gold-tint); color: var(--gold-600); }
.icon-circle-sm { width: 44px; height: 44px; }

/* ---------- Stat bar ---------- */
.stat-bar { background: var(--navy-tint); border-radius: var(--radius-lg); padding: 44px 20px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 24px; }
.stat-bar .stat b { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--navy-900); }
.stat-bar .stat span { color: var(--ink-muted); font-size: .92rem; }
.stat-bar .stat .icon-circle { margin: 0 auto 14px; }

/* ---------- Values / icon list ---------- */
.value-item { text-align: left; }
.value-item .icon-circle { width: 50px; height: 50px; }

/* ---------- Process steps ---------- */
.process-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.process-step { flex: 1; min-width: 140px; text-align: center; }
.process-step .step-badge {
    width: 54px; height: 54px; border-radius: 50%; background: var(--navy-900); color: var(--gold-400);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-family: var(--font-display); font-weight: 700;
}
.process-arrow { align-self: center; color: #b9c3d1; margin-top: 22px; }
.process-step h3 { font-size: 1rem; margin-bottom: 6px; }
.process-step p { font-size: .9rem; }

/* ---------- Leadership / team ---------- */
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.team-card .ph-media { border-radius: 0; border-width: 0 0 1px; aspect-ratio: 4/5; min-height: 0; }
.team-card-body { padding: 18px 20px; }
.team-card-body h4 { margin-bottom: 2px; font-size: 1.05rem; }
.team-card-body .role { color: var(--ink-muted); font-size: .88rem; }
.team-card-body .social-row { margin-top: 10px; }
.team-card-body .social-row a { color: var(--navy-800); }

/* ---------- Timeline (About Us story) ---------- */
.timeline-block { display: grid; grid-template-columns: 1fr; gap: 60px; }
.timeline-item { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.timeline-item .tl-content { padding-top: 6px; }
.timeline-item.reverse .tl-media { order: 2; }
.timeline-item.reverse .tl-content { order: 1; }

.recognition-list { display: flex; flex-direction: column; gap: 0; }
.recognition-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.recognition-item:last-child { border-bottom: none; }
.recognition-item h3 { font-size: 1.02rem; margin-bottom: 4px; }
.recognition-item p { margin: 0; font-size: .92rem; }

/* ---------- CTA banner ---------- */
.cta-banner {
    background: var(--navy-900); color: #fff; border-radius: var(--radius-lg);
    padding: 40px 46px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-banner h3 { color: #fff; margin-bottom: 6px; }
.cta-banner p { color: #c6d2e2; margin: 0; }
.cta-banner.gold-line { border: 1px solid rgba(201,155,60,.4); }
.cta-banner-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--gold-400); flex-shrink: 0; }
.cta-flex-left { display: flex; align-items: center; gap: 20px; }

/* ---------- Homepage split CTA (before footer) ---------- */
.cta-split {
    display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.cta-split-text { padding: 40px 54px; display: flex; flex-direction: column; justify-content: center; }
.cta-split-eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cta-split-eyebrow-row .eyebrow { margin-bottom: 0; }
.cta-split-eyebrow-line { display: block; width: 46px; height: 2px; background: var(--gold-500); flex-shrink: 0; }
.cta-split-text h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); margin-bottom: 16px; }
.cta-split-text > p { color: var(--ink-muted); max-width: 44ch; margin-bottom: 30px; }
.cta-split-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-split-sep { display: block; width: 1px; align-self: stretch; min-height: 44px; background: var(--line); }
.cta-split-schedule { display: flex; align-items: center; gap: 14px; }
.cta-split-schedule .icon-circle { margin-bottom: 0; flex-shrink: 0; }
.cta-split-schedule-text { display: flex; flex-direction: column; gap: 4px; }
.cta-split-schedule-text strong { font-size: .92rem; color: var(--ink); }
.cta-split-media { min-height: 320px; aspect-ratio: 812 / 553; align-self: start; }
.cta-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Logos strip ---------- */
.logos-strip { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.logos-strip .logo-ph {
    width: 130px; height: 46px; border: 1px dashed #c7ceda; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: var(--ink-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: 4px;
}

/* ---------- Testimonials ---------- */
.testimonial-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.testimonial-card .icon.quote-icon { color: var(--gold-500); width: 30px; height: 30px; margin-bottom: 14px; }
.testimonial-card p.quote { color: var(--ink); font-style: italic; font-size: 1.02rem; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-person .ph-media { width: 48px; height: 48px; min-height: 0; border-radius: 50%; }
.testimonial-person strong { display: block; font-size: .92rem; }
.testimonial-person span { font-size: .82rem; color: var(--ink-muted); }
.stars { display: flex; gap: 3px; color: var(--gold-500); margin-bottom: 10px; }
.stars .icon { width: 15px; height: 15px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; }
.form-field.full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--navy-900); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--navy-700); background: #fff; }
textarea { resize: vertical; min-height: 130px; }
/* Scoped through the always-white card ancestor (0,2,0) so this reliably
   beats ".hero-dark p" / ".section-navy p" (0,1,1) when a light form card —
   .form-card or .pricing-finder — sits inside a dark hero/section: this hint
   is always on the card's own white background, never the dark one behind it. */
.form-card .form-hint, .pricing-finder .form-hint { font-size: .8rem; color: var(--ink-muted); margin-top: 10px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }
.alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: .92rem; font-weight: 500; }
.alert-success { background: #e6f6ef; color: #146c43; border: 1px solid #b7e4cc; }
.alert-error { background: #fdecec; color: #a3231e; border: 1px solid #f6c2c0; }
.field-error { color: #b3261e; font-size: .8rem; margin-top: 5px; }

/* ---------- Contact page specifics ---------- */
.contact-info-row { display: flex; gap: 30px; flex-wrap: wrap; margin: 30px 0 40px; }
.contact-info-row > div { display: flex; gap: 12px; align-items: flex-start; }
.contact-info-row .icon-circle { margin-bottom: 0; flex-shrink: 0; }
.contact-info-row strong { display: block; }
.contact-info-row span.label { color: var(--ink-muted); font-size: .85rem; }
.other-ways .link-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.other-ways .link-row:hover { border-color: var(--navy-700); }
.office-box { background: var(--navy-900); color: #fff; border-radius: var(--radius); padding: 22px; margin-top: 14px; }
.office-box p { color: #dbe4f1; margin: 0 0 6px; display: flex; gap: 10px; align-items: flex-start; }
.offices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.office-item { display: flex; gap: 10px; }

/* ---------- Pricing finder ---------- */
.pricing-finder { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); }
.pricing-finder h2 { font-size: 1.35rem; }
.pf-step-label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .88rem; color: var(--navy-900); margin-bottom: 8px; }
.pf-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.specialty-card { text-align: center; padding: 26px 16px; }
.specialty-card .icon-circle { margin: 0 auto 14px; }
.specialty-card h3 { font-size: 1rem; }

/* ---------- Feature list w/ side icons ---------- */
.side-icon-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.side-icon-list li:last-child { border-bottom: none; }
.side-icon-list .icon-circle-sm { margin-bottom: 0; flex-shrink: 0; }
/* Used at two different heading depths across pages depending on what
   precedes it in that page's outline (h3 when nested under a panel h3,
   h4 when it's the section's own first sub-level) — same visual size either way. */
.side-icon-list h3, .side-icon-list h4 { font-size: 1rem; margin-bottom: 3px; }
.side-icon-list p { font-size: .9rem; margin: 0; }

/* ---------- Two column with dark panel (Who it's for) ---------- */
.split-panel { display: grid; grid-template-columns: 1fr 1.3fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.split-panel .panel-dark { background: var(--navy-900); color: #fff; padding: 46px; display: flex; flex-direction: column; justify-content: center; }
.split-panel .panel-dark h3 { color: #fff; }
.split-panel .panel-dark p { color: #c6d2e2; }
.split-panel .panel-light { background: var(--bg-soft); padding: 12px 40px; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.max-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
/* Standard visually-hidden pattern: present to screen readers/heading-order
   tooling, removed from sighted layout without affecting visual design. */
.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;
}
.badge-pill {
    display: inline-flex; align-items: center; gap: 6px; background: var(--gold-tint); color: var(--gold-700);
    padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}
.hipaa-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.25); color: #cfdaea; padding: 7px 14px; border-radius: 8px; font-size: .78rem; font-weight: 600; margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #b8c4d6; padding-top: 64px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 50px; }
.footer-brand p { color: #93a2b8; font-size: .9rem; max-width: 280px; }
.brand-footer .brand-word { color: #fff; }
.footer-social { display: flex; gap: 12px; margin: 16px 0 4px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #cfdaea; transition: background-color .3s ease-in-out, color .3s ease-in-out; }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--gold-500); color: var(--navy-900); animation: gelatine .5s ease-in-out; }

@keyframes gelatine {
    0%, 100% { transform: scale(1, 1); }
    25% { transform: scale(.9, 1.1); }
    50% { transform: scale(1.1, .9); }
    75% { transform: scale(.95, 1.05); }
}
.footer-col h3 { color: var(--gold-400); font-family: var(--font-body); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a:hover { color: #fff; }
.footer-contact p { display: flex; gap: 10px; align-items: flex-start; color: #b8c4d6; font-size: .9rem; }
.footer-contact .emergency { color: #f0a5a5; font-weight: 700; }
/* The global "p { color: var(--ink-muted) }" rule (line 59) is tuned for
   light backgrounds and was silently darkening this copyright line to
   2.9:1 against the navy footer — restore the footer's own light tone
   (already 9.5:1 here) instead of inheriting that global default. */
.footer-bottom p { color: inherit; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .82rem; }
.footer-bottom ul { display: flex; gap: 20px; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Scroll-reveal (progressive enhancement) ----------
   Elements only fade/rise in once JS has confirmed it can run the
   IntersectionObserver (html.js) — with JS disabled or before that
   class lands, everything stays fully visible. */
html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}
/* --reveal-i (set per element in main.js, cycling 0-5) staggers siblings
   that enter the viewport together — e.g. a 4-card row — so they rise in
   as a quick left-to-right wave instead of all at once. */
html.js .reveal.reveal-visible {
    opacity: 1; transform: translateY(0);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
html.js .reveal-stagger.reveal-visible > * { transition-delay: calc(var(--reveal-i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- About Us page ---------- */
.about-hero { padding-top: 34px; }
.about-hero p.lede.about-hero-lede { margin-top: 14px; font-size: .95rem; max-width: 42em; color: var(--ink-muted); }

.about-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: stretch; }
.about-profile-left { display: flex; flex-direction: column; }
.about-profile-text { padding-top: 2px; display: flex; flex-direction: column; }

.about-profile-card {
    margin-top: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 22px 22px 26px; box-shadow: var(--shadow-md);
}
.about-profile-top { display: flex; align-items: stretch; gap: 22px; }
.about-profile-photo {
    flex: 0 0 44%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--navy-tint);
}
.about-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-profile-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }

.about-profile-name { padding-bottom: 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.about-profile-name strong { color: var(--navy-900); font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.about-profile-name span { color: var(--gold-700); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }

.about-stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.about-stat-item {
    display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; font-weight: 600; color: var(--navy-800); line-height: 1.3;
}
.about-stat-item .icon { width: 22px; height: 22px; color: var(--gold-600); flex-shrink: 0; margin-top: 1px; }

@media (max-width: 420px) {
    .about-profile-top { flex-direction: column; }
    .about-profile-photo { flex-basis: auto; width: 100%; }
    .about-profile-info { margin-top: 18px; }
    .about-profile-name { padding-bottom: 14px; }
}

.about-profile-text .eyebrow { margin-bottom: 10px; }
.about-profile-text h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.about-profile-intro { margin-top: auto; margin-bottom: auto; }
.about-profile-intro p { font-size: 1rem; line-height: 1.75; }
.about-signature {
    display: flex; align-items: baseline; gap: 14px; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.signature-script { font-family: var(--font-script); font-size: 2.1rem; color: var(--navy-900); line-height: 1; }
.signature-caption { font-size: .84rem; color: var(--ink-muted); }

/* Shared two-column media/content split used by "Our Story" and the NTTC section */
.about-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; align-items: center; }
.about-split--balanced { align-items: stretch; }
.about-split-reverse .about-split-media { order: 2; }
.about-split-reverse .about-split-content { order: 1; }

.about-split-media { position: relative; padding-bottom: 34px; }

.about-real-photo {
    position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-md); background: var(--navy-tint);
}
.about-real-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
    transition: transform .6s ease;
}
.about-real-photo:hover img { transform: scale(1.035); }

/* The NTTC facility photo is a wide exterior shot — a tall 4:5 portrait crop would slice off
   the building signage on narrow screens, so give it its own, wider ratio below desktop. */
.about-nttc-photo { aspect-ratio: 16 / 10; }
.about-nttc-photo img { object-position: center 32%; }

/* On wide screens, size the real photo to match the height of its sibling text column instead
   of letting a portrait aspect-ratio force extra height / blank space around shorter copy. */
@media (min-width: 1001px) {
    .about-split-media--photo { display: flex; flex-direction: column; }
    .about-split-media--photo .about-real-photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
    .about-split-media--photo .about-real-photo img { position: absolute; inset: 0; }
}

.about-quote-card {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold-500);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 20px 22px; margin: -34px 24px 0; position: relative; z-index: 1;
    transition: box-shadow .3s ease, transform .3s ease;
}
.about-quote-card:hover { box-shadow: 0 22px 40px -16px rgba(15, 35, 65, .28); transform: translateY(-3px); }
.about-quote-card .icon-lg { color: var(--gold-500); margin-bottom: 6px; }
.about-quote-card p { font-family: var(--font-display); font-size: 1rem; color: var(--navy-900); margin-bottom: 8px; }
.about-quote-by { font-size: .82rem; font-weight: 700; color: var(--ink-muted); letter-spacing: .02em; }

.about-mini-features { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.about-mini-feature {
    display: flex; align-items: center; gap: 9px; font-size: .84rem; font-weight: 600; color: var(--navy-800);
    background: var(--navy-tint); border-radius: 999px; padding: 9px 16px;
    transition: background-color .25s ease, transform .25s ease;
}
.about-mini-feature:hover { background: var(--gold-tint); transform: translateY(-2px); }
.about-mini-feature .icon { width: 18px; height: 18px; color: var(--gold-600); flex-shrink: 0; }

.about-profile-card { transition: box-shadow .3s ease, transform .3s ease; }
.about-profile-card:hover { box-shadow: 0 24px 44px -18px rgba(15, 35, 65, .26); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .about-real-photo img,
    .about-quote-card,
    .about-mini-feature,
    .about-profile-card {
        transition: none;
    }
    .about-real-photo:hover img,
    .about-quote-card:hover,
    .about-mini-feature:hover,
    .about-profile-card:hover {
        transform: none;
    }
}

/* Recognition publication badges — simple lettermarks/wordmarks, not real logos */
.recognition-item-inner { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 420px; min-width: 0; }
.recognition-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; white-space: nowrap;
    border-radius: var(--radius); padding: 9px 12px; font-size: .74rem; margin-top: 2px;
}
.recognition-badge-d { background: var(--navy-900); color: var(--gold-400); }
.recognition-badge-dm { background: var(--navy-tint); color: var(--navy-800); border: 1px solid var(--line); }
.recognition-badge-becker { background: var(--gold-tint); color: var(--gold-700); border: 1px solid var(--gold-400); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-split, .hero-split-photo, .timeline-item, .split-panel, .offices-grid, .cta-split, .about-profile-grid, .about-split { grid-template-columns: 1fr; }
    .cta-split-media { min-height: 0; aspect-ratio: 812 / 553; order: -1; }
    .cta-split-text { padding: 44px 36px; }
    .timeline-item.reverse .tl-media, .timeline-item.reverse .tl-content { order: 0; }
    .about-split-reverse .about-split-media, .about-split-reverse .about-split-content { order: 0; }
    .about-profile-card { max-width: 420px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .stat-bar { grid-template-columns: repeat(2, 1fr); }
    .offices-grid { grid-template-columns: 1fr; }
    .hero-split-photo { min-height: 0; gap: 36px; }
    .hero-split-photo .hero-content { padding: 0; }
    .hero-media { min-height: 0; aspect-ratio: 16 / 11; }
}

@media (max-width: 860px) {
    .main-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 85%); background: #fff; transform: translateX(100%);
        transition: transform .25s ease; box-shadow: -10px 0 30px rgba(0,0,0,.15); padding: 90px 26px 26px; z-index: 900;
        overflow-y: auto; overflow-x: hidden; justify-content: flex-start; }
    .main-nav.open { transform: translateX(0); }
    .nav-menu { flex-direction: column; gap: 4px; width: 100%; }
    .nav-menu a { display: block; width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--line); white-space: normal; flex-shrink: 0; }
    .nav-item, .nav-menu > li { width: 100%; flex-shrink: 0; }
    .nav-toggle { display: block; position: relative; z-index: 950; }
    .header-cta span { display: none; }
    .header-cta { padding: 10px 12px; }
    .topbar-left { display: none; }
    .process-row { flex-direction: column; align-items: stretch; }
    .process-arrow { display: none; }
    .nav-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(10,29,56,.4); z-index: 850; }
}
.nav-backdrop { display: none; }

@media (max-width: 700px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .about-quote-card { margin-left: 0; margin-right: 0; }
    .recognition-item-inner { flex-basis: 100%; }
    .stat-bar { grid-template-columns: 1fr 1fr; }
    .cta-banner { flex-direction: column; align-items: flex-start; }
    .cta-split-text { padding: 34px 24px; }
    .cta-split-actions { gap: 18px; }
    .cta-split-sep { display: none; }
    section { padding: 56px 0; }
    .hero { padding: 44px 0 50px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}


.hero-photo.ph-media {
    position: relative;
    height: 350px;
    min-height: 350px;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px;
}

.hero-photo.ph-media::before,
.hero-photo.ph-media::after {
    display: none !important;
    content: none !important;
}

.hero-photo .ph-label,
.hero-photo svg {
    display: none !important;
}

.hero-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center 42%;
    transition: transform .6s ease;
}
.hero-photo:hover img { transform: scale(1.035); }

@media (max-width: 768px) {
    .hero-photo.ph-media {
        height: 300px;
        min-height: 300px;
        margin-top: 12px;
    }
}
.care-photo {
    height: 340px;
    overflow: hidden;
    border-radius: 16px;
    background: #eef2f8;
}

.care-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}
.care-photo:hover img { transform: scale(1.035); }
.employer-cta-section {
    padding: 30px 0 72px;
}

.employer-cta-editorial {
    display: grid;
    grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr);
    overflow: hidden;
    border: 1px solid #b8d0e5;
    border-radius: 18px;
    background: #fbfaf6;
}

.employer-cta-editorial__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    padding: 48px 58px;
    border-radius: 17px;
    background: #092442;
}

.employer-cta-editorial__intro .eyebrow {
    margin-bottom: 20px;
}

.employer-cta-editorial__intro h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    line-height: 1.1;
}

.employer-cta-editorial__action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px 10%;
}

.employer-cta-editorial__line {
    width: 100%;
    height: 1px;
    margin-bottom: 34px;
    background: #d4a738;
    opacity: .9;
}

.employer-cta-editorial__line--bottom {
    margin-top: 34px;
    margin-bottom: 0;
}

.employer-cta-editorial__action h3 {
    max-width: 700px;
    margin: 0 0 30px;
    color: #092442;
    font-size: clamp(1.5rem, 2.55vw, 2.45rem);
    font-weight: 500;
    line-height: 1.2;
}

.employer-cta-editorial__button {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    overflow: hidden;
    border-radius: 10px;
    background: #092442;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.employer-cta-editorial__button > span:first-child {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 25px;
}

.employer-cta-editorial__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    background: #d4a738;
    color: #092442;
}

.employer-cta-editorial__button:hover {
    background: #12395f;
    color: #fff;
}

.employer-cta-editorial__button:hover .employer-cta-editorial__button-icon {
    background: #e0b649;
}

@media (max-width: 767px) {
    .employer-cta-editorial {
        grid-template-columns: 1fr;
    }

    .employer-cta-editorial__intro {
        min-height: auto;
        padding: 38px 28px;
        border-radius: 0;
    }

    .employer-cta-editorial__action {
        padding: 34px 28px;
    }

    .employer-cta-editorial__action h3 {
        font-size: 1.6rem;
    }

    .employer-cta-editorial__button {
        align-self: stretch;
    }

    .employer-cta-editorial__button > span:first-child {
        flex: 1;
        padding: 0 18px;
    }
}
.card p:last-child {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
}



.dropdown-col a {
    display: block;
    font-size: 0.78rem!important;
    font-weight: 500!important;
}


.card h3 {
    line-height: 1.55rem!important;
}



.partner-logo-section {
    padding: 76px 0 !important;
}

.partner-logo-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    max-width: 920px !important;
    margin: 42px auto 0 !important;
}

.partner-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 142px !important;
    padding: 28px 34px !important;
    border: 1px solid #d7e0e9 !important;
    border-radius: 12px !important;
    background: #fff !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.partner-logo-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 26px rgba(9, 36, 66, .10) !important;
}

.partner-logo-item img {
    display: block !important;
    width: 100% !important;
    max-width: 180px !important;
    height: 68px !important;
    object-fit: contain !important;
}

@media (max-width: 767px) {
    .partner-logo-grid {
        grid-template-columns: 1fr !important;
        max-width: 310px !important;
        gap: 16px !important;
    }

    .partner-logo-item {
        min-height: 120px !important;
    }
}



 p{
     font-weight: 400!important;
 }
 
 
 .hero {
    padding: 60px 0 70px!important;
}