/* =========================================================
   Nurse Oversight Story page (slug: nurse-oversight)
   -----------------------------------------------------------
   Bold, editorial redesign. Sections alternate WHITE and
   DEEP NAVY BLUE. HosPall gold appears on both surfaces as
   accent details. Floating blurred blobs drift behind the
   content for depth. Elements slide in from left/right/up
   on scroll via [data-reveal] hooks (script inline in
   page-nurse-oversight.php). Reduced-motion users get a
   static, immediate-reveal composition.

   Section palette map (top -> bottom):
     hero        WHITE + blue/gold ambient
     why         NAVY  + gold accent line
     journey     WHITE + gold vertical timeline, alt sides
     clinical    NAVY  + three white cards floating
     reach       WHITE + huge gold "24/7" ghost typography
     closer      NAVY  + three white cards, gold rules

   Scope: every selector is namespaced under `.nurse-page`.
   ========================================================= */

.nurse-page {
    --nurse-white: #ffffff;
    --nurse-blue: #1a3e66;
    --nurse-blue-deep: #0f2a4b;
    --nurse-blue-mid: #255487;
    --nurse-blue-tint: #e6eef9;
    --nurse-gold: #c9b27a;
    --nurse-gold-dark: #8a7a4e;
    /* Bright warm gold for eyebrows + small caps labels. Previously
       #5a4a22 (a very dark bronze) which read almost black on both
       navy and white sections and killed the "gold" feel. #a88a3c is
       clearly gold at eyebrow scale, meets AA Large on white (~4.3:1),
       and pairs with the mid-tone --nurse-gold above on navy. */
    --nurse-gold-deep: #a88a3c;
    --nurse-ink: #12233a;
    --nurse-muted: #4a5b74;
    --nurse-line: rgba(37, 84, 135, 0.16);

    color: var(--nurse-ink);
    overflow: hidden;
    position: relative;
    /* Isolate paint from the sticky site header. Without this, the
       browser has to recompute paints across the entire viewport
       every time a blurred blob animates, which starved the header's
       transitions and made dropdown hover feel glitchy. */
    contain: paint;
}

/* ==============================================================
   REVEAL HOOKS   scoped override of the global [data-reveal].
   Direction driven by data-reveal="slide-left|slide-right|
   slide-up|scale". Adding .is-revealed (from the inline
   IntersectionObserver in page-nurse-oversight.php) resets
   the transform / opacity to their resting state.
   ============================================================== */
.nurse-page [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.nurse-page [data-reveal="slide-left"] {
    transform: translate3d(-42px, 0, 0);
}

.nurse-page [data-reveal="slide-right"] {
    transform: translate3d(42px, 0, 0);
}

.nurse-page [data-reveal="slide-up"] {
    transform: translate3d(0, 42px, 0);
}

.nurse-page [data-reveal="scale"] {
    transform: scale(0.94);
}

.nurse-page [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.nurse-page [data-reveal].is-revealed[data-reveal-delay="1"] {
    transition-delay: 0.08s;
}

.nurse-page [data-reveal].is-revealed[data-reveal-delay="2"] {
    transition-delay: 0.16s;
}

.nurse-page [data-reveal].is-revealed[data-reveal-delay="3"] {
    transition-delay: 0.24s;
}

.nurse-page [data-reveal].is-revealed[data-reveal-delay="4"] {
    transition-delay: 0.32s;
}

.nurse-page [data-reveal].is-revealed[data-reveal-delay="5"] {
    transition-delay: 0.4s;
}

.nurse-page [data-reveal].is-revealed[data-reveal-delay="6"] {
    transition-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
    .nurse-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==============================================================
   FLOATING AMBIENT ELEMENTS   blurred blobs + gold sparks
   ============================================================== */
.nurse-page__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.nurse-page__blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    /* 60px blur (was 90) cuts paint area by ~55%. Still very soft. */
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform;
}

.nurse-page__blob--blue-lg {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle at 30% 30%, #6aa6ff 0%, rgba(106, 166, 255, 0) 70%);
    opacity: 0.42;
}

.nurse-page__blob--blue-md {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle at 40% 40%, #a3c8ff 0%, rgba(163, 200, 255, 0) 68%);
    opacity: 0.55;
}

.nurse-page__blob--gold {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at 40% 40%, var(--nurse-gold) 0%, rgba(201, 178, 122, 0) 68%);
    opacity: 0.28;
}

.nurse-page__blob--light-blue {
    width: 540px;
    height: 540px;
    background: radial-gradient(circle at 40% 60%, rgba(207, 224, 247, 0.9) 0%, rgba(207, 224, 247, 0) 72%);
    opacity: 0.72;
}

@keyframes nurse-drift-a {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(50px, 38px, 0) scale(1.08);
    }
}

@keyframes nurse-drift-b {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-40px, -55px, 0) scale(1.12);
    }
}

@keyframes nurse-drift-c {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-55px, 30px, 0) scale(0.95);
    }
}

@keyframes nurse-drift-d {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(45px, -35px, 0) scale(1.1);
    }
}

.nurse-page__blob--anim-a {
    animation: nurse-drift-a 44s ease-in-out infinite alternate;
}

.nurse-page__blob--anim-b {
    animation: nurse-drift-b 58s ease-in-out infinite alternate;
}

.nurse-page__blob--anim-c {
    animation: nurse-drift-c 48s ease-in-out infinite alternate;
}

.nurse-page__blob--anim-d {
    animation: nurse-drift-d 66s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .nurse-page__blob {
        animation: none;
    }
}

/* Floating gold "sparks" for the navy sections. */
.nurse-page__spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nurse-gold);
    opacity: 0.5;
    box-shadow: 0 0 24px rgba(201, 178, 122, 0.55);
    will-change: transform, opacity;
    animation: nurse-spark 6s ease-in-out infinite;
}

.nurse-page__spark--sm {
    width: 4px;
    height: 4px;
    opacity: 0.35;
    animation-duration: 8s;
}

.nurse-page__spark--lg {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    animation-duration: 7s;
}

@keyframes nurse-spark {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.35;
    }

    50% {
        transform: translate3d(0, -10px, 0) scale(1.15);
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nurse-page__spark {
        animation: none;
    }
}

/* ==============================================================
   SHARED TYPOGRAPHY
   ============================================================== */
.nurse-page__section-eyebrow {
    margin: 0 0 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nurse-gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.nurse-page__section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--nurse-gold);
    border-radius: 999px;
}

.nurse-page__section-header {
    text-align: center;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    max-width: 820px;
    position: relative;
    z-index: 2;
}

.nurse-page__section-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--nurse-blue-deep);
}

.nurse-page__inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--nurse-blue-mid);
    text-decoration: none;
    border-bottom: 1px solid var(--nurse-gold);
    padding: 0.15rem 0;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.nurse-page__inline-link:hover,
.nurse-page__inline-link:focus-visible {
    color: var(--nurse-gold-deep);
    border-bottom-color: var(--nurse-gold-dark);
}

.nurse-page__inline-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.nurse-page__inline-link:hover .nurse-page__inline-arrow,
.nurse-page__inline-link:focus-visible .nurse-page__inline-arrow {
    transform: translateX(4px);
}

/* ==============================================================
   1. HERO   NAVY, framed team-banner image + intro copy
   --------------------------------------------------------------
   2026-07-16 rev 2: the `nurse-oversight-banner.png` photo now
   lives as a framed <figure> in the LEFT grid track (see
   `.nurse-page__hero-visual` below) rather than a full-bleed
   background layer. The hero background reverts to the original
   solid-navy gradient + gold hotspot so the framed photo reads
   as a proper card on top of the navy panel.
   ============================================================== */
.nurse-page__hero {
    position: relative;
    padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(ellipse at 50% -10%, rgba(201, 178, 122, 0.12) 0%, transparent 55%),
        linear-gradient(135deg, var(--nurse-blue) 0%, var(--nurse-blue-deep) 100%);
    color: #ffffff;
    overflow: hidden;
}

.nurse-page__hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1360px;
    margin: 0 auto;
    /* Two-column grid, photo side slightly favoured (5fr copy / 6fr
       photo) and a wider container (1360px) so the framed team photo
       on the right reads noticeably bigger than the copy stack on the
       left. Mobile collapses to a single column and stacks copy above
       the framed photo. */
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    text-align: left;
}

@media (max-width: 900px) {
    .nurse-page__hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Framed team photo card in the left hero column. Real <img>
   (not a background) so we get proper alt text + native lazy
   image behaviour. `aspect-ratio: 1 / 1` matches the source PNG
   (421×419) and reserves the correct vertical space before load. */
.nurse-page__hero-visual {
    margin: 0;
    width: 100%;
    border-radius: clamp(14px, 1.8vw, 22px);
    overflow: hidden;
    box-shadow:
        0 30px 60px -30px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(201, 178, 122, 0.4);
}

.nurse-page__hero-visual-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* High-quality downscale on Chromium so the rounded-corner clip
       doesn't force a low-quality re-raster. Matches the leader-frame
       and team hero image tuning elsewhere on the site. */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* When the two-column hero is active, override the base title/lede
   auto margins (which were designed for the previous centred
   single-column layout) so the copy left-aligns cleanly inside its
   own column. Mobile media query restores centring by using the
   collapsed single-column grid + text-align: center on the parent. */
.nurse-page__hero-copy .nurse-page__hero-title {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.nurse-page__hero-copy .nurse-page__hero-lede {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 900px) {

    .nurse-page__hero-copy .nurse-page__hero-title,
    .nurse-page__hero-copy .nurse-page__hero-lede {
        margin-left: auto;
        margin-right: auto;
    }
}

.nurse-page__hero-inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.nurse-page__eyebrow {
    margin: 0 0 1.35rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nurse-gold-deep);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.nurse-page__eyebrow::before,
.nurse-page__eyebrow::after {
    content: "";
    display: inline-block;
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--nurse-gold), transparent);
    border-radius: 999px;
}

.nurse-page__hero-title {
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
    max-width: 20ch;
}

.nurse-page__hero-accent {
    color: var(--nurse-gold);
    font-style: italic;
    display: inline-block;
    position: relative;
}

.nurse-page__hero-accent::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -8px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--nurse-gold), transparent);
    border-radius: 999px;
    opacity: 0.75;
}

.nurse-page__hero-lede {
    margin: 0 auto;
    max-width: 60ch;
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

/* Inline gold highlight for a single term inside body copy on the
   hero lede (e.g. "we are Nurse-Managed"). Kept upright and semibold
   so it reads as branded emphasis, not as a decorated title accent
   like .nurse-page__hero-accent (italic + underlined). */
.nurse-page__lede-accent {
    color: var(--nurse-gold);
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
}

/* Hero jump-link: small, quiet call to the nurse-stories section
   further down the page. Gold underline on hover so it feels like
   a branded link rather than a button. Down-arrow signals "below". */
.nurse-page__hero-jump {
    margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
}

@media (max-width: 900px) {
    .nurse-page__hero-jump {
        text-align: center;
    }
}

.nurse-page__hero-jump-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nurse-gold);
    text-decoration: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid transparent;
    padding: 0.15rem 0.05rem;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nurse-page__hero-jump-link:hover,
.nurse-page__hero-jump-link:focus-visible {
    color: var(--nurse-white);
    border-bottom-color: var(--nurse-gold);
    outline: none;
}

.nurse-page__hero-jump-arrow {
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.25s ease;
}

.nurse-page__hero-jump-link:hover .nurse-page__hero-jump-arrow,
.nurse-page__hero-jump-link:focus-visible .nurse-page__hero-jump-arrow {
    transform: translateY(3px);
}

.nurse-page__hero::after {
    display: none;
}

/* ==============================================================
   2. WHY   WHITE, editorial two-column with gold accent bar
   ============================================================== */
.nurse-page__why {
    position: relative;
    padding: clamp(4.5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(37, 84, 135, 0.10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: var(--nurse-ink);
    overflow: hidden;
}

.nurse-page__why-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (max-width: 860px) {
    .nurse-page__why-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

.nurse-page__why-lead {
    position: relative;
    padding-left: clamp(1.5rem, 3vw, 2.25rem);
}

.nurse-page__why-lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 3px;
    background: linear-gradient(180deg, var(--nurse-gold) 0%, transparent 100%);
    border-radius: 999px;
}

.nurse-page__why-lead .nurse-page__section-eyebrow {
    color: var(--nurse-gold-deep);
}

.nurse-page__why-lead .nurse-page__section-eyebrow::before {
    background: var(--nurse-gold);
}

.nurse-page__why-lead-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--nurse-blue-deep);
}

.nurse-page__why-lead-accent {
    color: var(--nurse-gold-dark);
    font-style: italic;
}

.nurse-page__why-copy {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.nurse-page__why-body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.02rem, 1.3vw, 1.14rem);
    line-height: 1.75;
    color: var(--nurse-muted);
}

/* ==============================================================
   3. JOURNEY   NAVY, alternating-side steps, gold timeline
   ============================================================== */
.nurse-page__journey {
    position: relative;
    padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(ellipse at 90% 20%, rgba(201, 178, 122, 0.10), transparent 55%),
        linear-gradient(135deg, var(--nurse-blue-deep) 0%, var(--nurse-blue) 100%);
    color: #ffffff;
    overflow: hidden;
}

/* Journey section is navy, so promote the shared eyebrow/title to
   light + slightly larger so the section header reads confidently. */
.nurse-page__journey .nurse-page__section-eyebrow {
    color: var(--nurse-gold);
}

.nurse-page__journey .nurse-page__section-eyebrow::before {
    background: var(--nurse-gold);
}

.nurse-page__journey .nurse-page__section-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.nurse-page__journey-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
}

.nurse-page__journey-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.nurse-page__journey-list::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    bottom: 12px;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
            transparent 0%,
            var(--nurse-gold) 8%,
            var(--nurse-gold-dark) 50%,
            var(--nurse-gold) 92%,
            transparent 100%);
    border-radius: 999px;
    opacity: 0.7;
}

.nurse-page__step {
    position: relative;
    padding: 0 0 clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: start;
    gap: 1rem;
}

.nurse-page__step:last-child {
    padding-bottom: 0;
}

.nurse-page__step:nth-child(odd) .nurse-page__step-body {
    grid-column: 1 / 2;
    text-align: right;
    padding-right: clamp(1rem, 2vw, 2rem);
}

.nurse-page__step:nth-child(even) .nurse-page__step-body {
    grid-column: 3 / 4;
    text-align: left;
    padding-left: clamp(1rem, 2vw, 2rem);
}

.nurse-page__step-marker {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 2;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--nurse-blue-mid) 0%, var(--nurse-blue-deep) 100%);
    color: #ffffff;
    box-shadow:
        0 0 0 6px #ffffff,
        0 0 0 8px var(--nurse-gold),
        0 12px 24px -12px rgba(15, 42, 75, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nurse-page__step:hover .nurse-page__step-marker {
    transform: scale(1.06);
    box-shadow:
        0 0 0 6px #ffffff,
        0 0 0 10px var(--nurse-gold),
        0 18px 34px -14px rgba(15, 42, 75, 0.6);
}

.nurse-page__step-number {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.nurse-page__step-body {
    position: relative;
    background: #ffffff;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: 16px;
    border: 1px solid var(--nurse-line);
    box-shadow: 0 18px 40px -28px rgba(15, 42, 75, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.nurse-page__step:hover .nurse-page__step-body {
    transform: translateY(-3px);
    border-color: var(--nurse-gold);
    box-shadow: 0 24px 48px -28px rgba(15, 42, 75, 0.45);
}

/* Notch pointing from the card toward the timeline */
.nurse-page__step-body::before {
    content: "";
    position: absolute;
    top: 24px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid var(--nurse-line);
    transform: rotate(45deg);
    transition: border-color 0.3s ease;
}

.nurse-page__step:nth-child(odd) .nurse-page__step-body::before {
    right: -8px;
    border-left: 0;
    border-bottom: 0;
}

.nurse-page__step:nth-child(even) .nurse-page__step-body::before {
    left: -8px;
    border-right: 0;
    border-top: 0;
}

.nurse-page__step:hover .nurse-page__step-body::before {
    border-color: var(--nurse-gold);
}

.nurse-page__step-tag {
    margin: 0 0 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nurse-gold-deep);
}

.nurse-page__step-title {
    margin: 0 0 0.7rem;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.7vw, 1.35rem);
    line-height: 1.28;
    color: var(--nurse-blue-deep);
}

.nurse-page__step-text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--nurse-muted);
}

.nurse-page__step-rail {
    display: none;
}

/* Collapse to single-column on narrow viewports */
@media (max-width: 780px) {
    .nurse-page__journey-list::before {
        left: 26px;
        transform: none;
    }

    .nurse-page__step {
        grid-template-columns: 52px 1fr;
        gap: 1rem;
    }

    .nurse-page__step-marker {
        grid-column: 1 / 2;
        width: 52px;
        height: 52px;
        box-shadow:
            0 0 0 4px #ffffff,
            0 0 0 6px var(--nurse-gold),
            0 10px 20px -10px rgba(15, 42, 75, 0.5);
    }

    .nurse-page__step-number {
        font-size: 1.1rem;
    }

    .nurse-page__step:nth-child(odd) .nurse-page__step-body,
    .nurse-page__step:nth-child(even) .nurse-page__step-body {
        grid-column: 2 / 3;
        text-align: left;
        padding-left: clamp(1.15rem, 3vw, 1.5rem);
        padding-right: clamp(1.15rem, 3vw, 1.5rem);
    }

    .nurse-page__step:nth-child(odd) .nurse-page__step-body::before,
    .nurse-page__step:nth-child(even) .nurse-page__step-body::before {
        left: -8px;
        right: auto;
        border-left: 1px solid var(--nurse-line);
        border-bottom: 1px solid var(--nurse-line);
        border-right: 0;
        border-top: 0;
    }
}

/* ==============================================================
   4. CLINICAL LAYER   WHITE, three cards with subtle borders
   ============================================================== */
.nurse-page__clinical {
    position: relative;
    /* Zero section-level padding so the white background sits flush
       against the sections above and below with no visible frame.
       Inner spacing lives on `.nurse-page__clinical-inner` (see
       below) so cards still have breathing room on narrow screens. */
    padding: 0;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(37, 84, 135, 0.08), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: var(--nurse-ink);
    overflow: hidden;
}

.nurse-page__clinical-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    /* Moved from `.nurse-page__clinical`: modest vertical padding for
       header + card breathing room, small horizontal padding so cards
       don't touch the viewport edge on narrow screens. */
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.nurse-page__clinical .nurse-page__section-eyebrow {
    color: var(--nurse-gold-deep);
}

.nurse-page__clinical .nurse-page__section-eyebrow::before {
    background: var(--nurse-gold);
}

.nurse-page__clinical .nurse-page__section-title {
    color: var(--nurse-blue-deep);
}

.nurse-page__clinical-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 960px) {
    .nurse-page__clinical-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.nurse-page__clinical-panel {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem);
    background: #ffffff;
    color: var(--nurse-ink);
    border-radius: 20px;
    border: 1px solid var(--nurse-line);
    box-shadow:
        0 20px 40px -28px rgba(15, 42, 75, 0.35),
        0 0 0 1px rgba(37, 84, 135, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.nurse-page__clinical-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: clamp(1.75rem, 3vw, 2.25rem);
    width: 4px;
    height: 32px;
    background: var(--nurse-gold);
    border-radius: 0 999px 999px 0;
}

.nurse-page__clinical-panel:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 52px -28px rgba(15, 42, 75, 0.45),
        0 0 0 1px rgba(201, 178, 122, 0.35);
}

.nurse-page__clinical-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37, 84, 135, 0.1) 0%, rgba(201, 178, 122, 0.14) 100%);
    color: var(--nurse-blue-mid);
    flex: 0 0 auto;
}

.nurse-page__clinical-icon svg {
    width: 26px;
    height: 26px;
}

.nurse-page__clinical-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.6vw, 1.3rem);
    line-height: 1.25;
    color: var(--nurse-blue-deep);
}

.nurse-page__clinical-body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--nurse-muted);
}

/* ==============================================================
   5. REACHABLE   NAVY with giant translucent gold "24/7"
   ============================================================== */
.nurse-page__reach {
    position: relative;
    padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    /* Flat navy. The photo backdrop that used to sit behind the giant
       "24/7" ghost was reading as clutter and fighting the outlined
       gold typography for attention. Solid nurse-blue-deep keeps the
       "24/7" as the single hero element in the section. */
    background: var(--nurse-blue-deep);
    color: #ffffff;
    overflow: hidden;
    min-height: 380px;
    text-align: center;
}

.nurse-page__reach::before {
    content: "24/7";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(18rem, 42vw, 34rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(201, 178, 122, 0.35);
    text-stroke: 2px rgba(201, 178, 122, 0.35);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0.9;
    white-space: nowrap;
}

.nurse-page__reach-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

.nurse-page__reach .nurse-page__section-eyebrow {
    justify-content: center;
    display: inline-flex;
    /* On the navy "When something happens" section this eyebrow is the
       narrative hook, not a tiny label. Scale it up so it reads as a
       real intro heading; slightly tighter letter-spacing keeps it
       comfortable at the larger size. */
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: 0.16em;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.nurse-page__reach .nurse-page__section-eyebrow::before {
    width: 48px;
    height: 3px;
}

.nurse-page__reach-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.nurse-page__reach-body {
    margin: 0 auto 1.5rem;
    max-width: 60ch;
    font-family: var(--font-sans);
    font-size: clamp(1.02rem, 1.3vw, 1.14rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.nurse-page__reach .nurse-page__inline-link {
    color: #ffffff;
    border-bottom-color: var(--nurse-gold);
}

.nurse-page__reach .nurse-page__inline-link:hover,
.nurse-page__reach .nurse-page__inline-link:focus-visible {
    color: var(--nurse-gold);
    border-bottom-color: var(--nurse-gold);
}

.nurse-page__reach-meta {
    margin: 0.5rem 0 0;
}

/* ==============================================================
   5b. STORIES   CREAM, three true-story cards + navy callout
   --------------------------------------------------------------
   Sits between JOURNEY (navy) and CLINICAL (white). Warm cream
   background differentiates it from the plain-white clinical
   panels that follow, and pairs naturally with the gold accents
   used elsewhere on the page. Each `.nurse-page__story` is a white
   card with a gold left-edge rail (same visual DNA as the journey
   step markers). The closing `.nurse-page__stories-callout` flips
   to a navy panel so "Why it matters" reads as a firm summary.
   ============================================================== */
.nurse-page__stories {
    position: relative;
    /* No section-level padding — the cream background stretches edge
       to edge and inner spacing is delegated to `.nurse-page__stories-inner`
       (see below). Zero bottom padding is intentional so the "Why it
       matters" navy callout sits flush against the top padding of the
       next section (`.nurse-page__clinical`) with no visible gap. */
    padding: 0;
    background:
        radial-gradient(ellipse at 20% -10%, rgba(201, 178, 122, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #fdfaf3 0%, #f6f0e0 100%);
    color: var(--nurse-ink);
    overflow: hidden;
    scroll-margin-top: 96px;
}

.nurse-page__stories-inner {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
    /* Moved from `.nurse-page__stories`: modest vertical padding so
       the section header has breathing room from the journey above,
       and just enough horizontal padding so the cards don't touch
       the viewport edge on narrow screens. */
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem) 0;
}

.nurse-page__stories-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.nurse-page__stories-lede {
    margin: 1.25rem 0 0;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: var(--nurse-muted);
}

.nurse-page__stories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.nurse-page__story {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3rem);
    background: #ffffff;
    border-radius: clamp(14px, 1.6vw, 22px);
    box-shadow:
        0 22px 44px -28px rgba(15, 42, 75, 0.28),
        0 0 0 1px rgba(15, 42, 75, 0.06);
    overflow: hidden;
}

/* Gold rail along the left edge, echoing the journey markers. */
.nurse-page__story::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--nurse-gold) 0%, var(--nurse-gold-dark) 100%);
    border-radius: 4px 0 0 4px;
}

.nurse-page__story-title {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    line-height: 1.2;
    color: var(--nurse-blue-deep);
}

.nurse-page__story-body p {
    margin: 0 0 0.85rem;
    font-family: var(--font-sans);
    font-size: clamp(0.98rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    color: var(--nurse-muted);
}

.nurse-page__story-body p:last-child {
    margin-bottom: 0;
}

/* Closing "Why it matters" panel. Navy card that mirrors the
   `.nurse-page__reach` treatment further down the page so the two
   navy moments rhyme. */
.nurse-page__stories-callout {
    position: relative;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding: clamp(2rem, 3.5vw, 3rem);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(201, 178, 122, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, var(--nurse-blue) 0%, var(--nurse-blue-deep) 100%);
    color: #ffffff;
    border-radius: clamp(14px, 1.8vw, 22px);
    box-shadow: 0 30px 60px -30px rgba(15, 30, 55, 0.55);
}

.nurse-page__stories-callout-title {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.2;
    color: var(--nurse-gold);
}

.nurse-page__stories-callout-body p {
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}

.nurse-page__stories-callout-body p:last-child {
    margin-bottom: 0;
}

/* ==============================================================
   6. CLOSER (Keep reading)   WHITE, three cards with subtle borders
   ============================================================== */
.nurse-page__closer {
    position: relative;
    padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(201, 178, 122, 0.10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: var(--nurse-ink);
    overflow: hidden;
}

.nurse-page__closer-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.nurse-page__closer-title {
    margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem);
    max-width: 640px;
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--nurse-blue-deep);
}

.nurse-page__closer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 960px) {
    .nurse-page__closer-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.nurse-page__closer-card {
    display: flex;
}

.nurse-page__closer-link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    padding: clamp(1.5rem, 2.5vw, 1.9rem);
    background: #ffffff;
    color: var(--nurse-ink);
    border-radius: 18px;
    border: 1px solid var(--nurse-line);
    text-decoration: none;
    box-shadow: 0 20px 40px -28px rgba(15, 42, 75, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.nurse-page__closer-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--nurse-gold) 0%, var(--nurse-gold-dark) 100%);
}

.nurse-page__closer-link:hover,
.nurse-page__closer-link:focus-visible {
    transform: translateY(-5px);
    border-color: var(--nurse-gold);
    box-shadow: 0 28px 52px -30px rgba(15, 42, 75, 0.45);
    outline: none;
}

.nurse-page__closer-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nurse-gold-deep);
}

.nurse-page__closer-card-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--nurse-blue-deep);
}

.nurse-page__closer-card-body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--nurse-muted);
    flex: 1 1 auto;
}

.nurse-page__closer-arrow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nurse-blue-mid);
    transition: transform 0.25s ease;
}

.nurse-page__closer-link:hover .nurse-page__closer-arrow,
.nurse-page__closer-link:focus-visible .nurse-page__closer-arrow {
    transform: translateX(4px);
}