/* ============================================
   SAFETY & WELLNESS PAGE
   ============================================ */

/* Shared section title */
.sf-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.6px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}


/* ============================================
   1. HERO — Architectural grid + bold statement
   ============================================ */
.sf-hero {
    position: relative;
    background: #FFFFFF;
    /* Clip any decorative text (e.g. the giant ghost "Safety") that
       overshoots the viewport at very narrow widths, so the hero
       never triggers horizontal page scroll. */
    overflow: hidden;
}

/* Engraved-certificate crosshatch — same pattern used on the Ethics & Compliance
   hero, ported here so both "commitment" pages share a visual language.
   Two layers of fine 1px lines at +45° / -45° every 11px. The existing ::before
   below fades the pattern under the header bar so it doesn't compete with nav. */
.sf-hero__grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(50, 48, 47, 0.045) 0,
            rgba(50, 48, 47, 0.045) 1px,
            transparent 1px,
            transparent 11px),
        repeating-linear-gradient(-45deg,
            rgba(50, 48, 47, 0.045) 0,
            rgba(50, 48, 47, 0.045) 1px,
            transparent 1px,
            transparent 11px);
    pointer-events: none;
}

.sf-hero__grid-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom, #FFFFFF, transparent);
    z-index: 1;
}

.sf-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-12);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 160px var(--container-padding) clamp(80px, 10vw, 140px);
    align-items: start;
}

.sf-hero__left {
    position: relative;
    /* Grid items default to min-width:auto (≈ longest unbreakable
       word). On phones that floor was holding the column wider
       than the viewport allows, preventing the headings and lead
       paragraph from reflowing to the available width. */
    min-width: 0;
}

/* Right column sticks to the viewport while the longer left column scrolls past it,
   so the cert-badge cluster stays in view through the merged hero + philosophy area. */
.sf-hero__right {
    position: sticky;
    top: 120px;
    align-self: start;
}

/* Philosophy "Our House" block — merged into the hero left column, shifted left
   under the title so it shares the page with the sticky badge cluster on the right. */
.sf-hero__philosophy {
    margin-top: clamp(var(--space-8), 8vw, var(--space-12));
    padding-top: clamp(var(--space-6), 4vw, var(--space-8));
    border-top: 0.5px solid #c8c8c8;
    max-width: 600px;
}

.sf-hero__philosophy-lead {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.6px;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-6);
}

.sf-hero__philosophy-lead em {
    font-style: normal;
    font-family: 'Dancing Script', cursive;
    font-size: 1.15em;
}

.sf-hero__philosophy-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
    overflow-wrap: anywhere;
}

.sf-hero__ghost {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 14vw, 13rem);
    font-weight: 800;
    color: rgba(50, 48, 47, 0.03);
    line-height: 0.85;
    letter-spacing: -0.04em;
    display: block;
    margin-bottom: var(--space-2);
    pointer-events: none;
    user-select: none;
}

.sf-hero__line--display {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--color-text-primary);
    display: block;
}

.sf-hero__line--script {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    display: block;
    position: relative;
    padding-bottom: 0.2em;
}

.sf-hero__line--script::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 50%;
    height: 0.18em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M 4,8 C 50,3 130,2 200,6 C 270,10 350,8 396,5 C 350,11 270,15 200,12 C 130,9 50,12 4,13 Z' fill='%23FF1A0F' opacity='0.92'/%3E%3Cpath d='M 12,10 C 70,7 150,6 210,9 C 270,12 360,10 390,8' stroke='%23FF1A0F' stroke-width='1' fill='none' opacity='0.45' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.sf-hero__line--pillars {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    font-weight: var(--font-regular);
    line-height: var(--leading-snug);
    letter-spacing: -0.6px;
    color: var(--color-text-secondary);
    display: block;
    margin-top: var(--space-4);
}

.sf-hero__lead {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: 480px;
    margin-top: var(--space-4);
    /* Allow long compound words (e.g. "injury-free", URLs) to break
       cleanly so the lead never blows out the container at narrow
       widths. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Cert cluster sits in the right sidebar; styling lives in cert-cluster.css */
.sf-hero__right .cert-cluster {
    margin: 0 auto;
}

@media (max-width: 900px) {
    /* Page-level horizontal scroll guard. If anywhere on the page a
       child blows out the viewport width (cert-cluster satellites
       overflowing on narrow phones, decorative ghost text, etc.),
       this stops the body from becoming horizontally scrollable —
       which is what makes content "appear" to stick out past the
       right edge on mobile even when its own width is fine. */
    main#main-content {
        overflow-x: clip;
    }

    .sf-hero__inner {
        grid-template-columns: 1fr;
        padding-top: 130px;
        /* Hard width clamp on the grid container itself so it can't
           ever extend past the viewport, regardless of what's inside
           (cert cluster's 600×600 footprint with absolute satellites,
           any inline transform from scripts, etc.). overflow-x: clip
           prevents content from triggering page-level horizontal
           scroll while still allowing vertical layout to flow. */
        max-width: 100%;
        overflow-x: clip;
    }
    .sf-hero__right { position: static; top: auto; }
    .sf-hero__right .cert-cluster {
        margin-top: var(--space-8);
    }

    /* Defensive width caps on every text-bearing block in the hero
       LEFT column only. Each `<p>` was rendering past the viewport's
       right edge — the column wasn't constraining children even with
       min-width:0 set. Forcing max-width:100% + min-width:0 +
       box-sizing:border-box on every descendant guarantees the
       paragraphs can never be wider than the grid cell they live in.
       IMPORTANT: this rule deliberately excludes .sf-hero__right —
       the cert-cluster there is `width: 600px; max-width: 100%` and
       relies on keeping its 600×600 layout box so the absolute-
       positioned satellites land at their correct pixel coordinates,
       then visually scales via transform: scale(...). Forcing
       max-width:100% on the column made the cluster shrink and the
       satellites scatter out of formation. */
    .sf-hero__left {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .sf-hero__title,
    .sf-hero__title > *,
    .sf-hero__lead,
    .sf-hero__philosophy,
    .sf-hero__philosophy-lead,
    .sf-hero__philosophy-body,
    .sf-reveal,
    .sf-reveal__panel,
    .sf-reveal__panel-inner {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}


/* ============================================
   2. PHILOSOPHY — Centered editorial
   ============================================ */
.sf-philosophy {
    background: #F2F2F2;
    padding: var(--section-padding) 0;
    border-top: 0.5px solid #c8c8c8;
    border-bottom: 0.5px solid #c8c8c8;
    position: relative;
}

/* Tick marks */
.sf-philosophy::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 0 / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 100% / 100% 5px no-repeat;
}

.sf-philosophy__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.sf-philosophy__lead {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.6px;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-6);
}

.sf-philosophy__lead em {
    font-style: normal;
    font-family: 'Dancing Script', cursive;
    font-size: 1.15em;
}

.sf-philosophy__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
}


/* ============================================
   2B. FULL-WIDTH IMAGE BREAK
   ============================================ */
.sf-image-break {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}

.sf-image-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.3) contrast(1.05);
}


/* ============================================
   3 & 9. SPLIT — Image + text (reversible)
   ============================================ */
.sf-split {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.sf-split__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
    max-width: none;
    margin: 0;
    padding: 0 var(--space-4) 0 0;
    align-items: center;
}

.sf-split--reversed .sf-split__inner {
    grid-template-columns: 1fr 1.4fr;
    padding: 0 0 0 var(--space-4);
}

.sf-split--reversed .sf-split__inner {
    direction: rtl;
}

.sf-split--reversed .sf-split__inner > * {
    direction: ltr;
}

.sf-split__image {
    overflow: hidden;
    min-height: clamp(500px, 70vw, 800px);
    border-radius: var(--radius-lg);
    position: relative;
}

.sf-split__image img {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.sf-split__text {
    padding: var(--space-10) clamp(2rem, 5vw, 5rem);
}

.sf-split__text p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
}

@media (max-width: 900px) {
    /* SF-SPLIT (used by the Health & Wellness section, .sf-split--reversed)
       --------------------------------------------------------------
       The desktop layout pairs a 1.4fr text column with a 1fr image
       column where the image is `position: relative` + `min-height:
       clamp(500px, 70vw, 800px)` and the inner <img> is `position:
       absolute; top: -15%; height: 130%;` so a JS parallax loop can
       translateY it without revealing edges. On mobile that scheme
       breaks down: the 500px image floor is taller than a phone
       portrait viewport, the parallax transform keeps mutating
       inline style each frame even though the layout has collapsed
       to a single column, and the inner padding/direction tricks
       leave the text edge-to-edge. Resolve all three on mobile. */
    /* IMPORTANT: the desktop selector `.sf-split--reversed .sf-split__inner`
       (specificity 0,2,0) sets grid-template-columns: 1fr 1.4fr. A mobile
       rule targeting only `.sf-split__inner` (0,1,0) loses the cascade,
       so the Health & Wellness section was staying in 2-column at mobile
       — text squeezed to ~107px on a 320px viewport (the "thin strip"),
       image hogged the rest. Both rules below have to re-state
       grid-template-columns:1fr explicitly at their own specificity. */
    .sf-split__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: 0 var(--container-padding);
        align-items: stretch;
    }
    .sf-split--reversed .sf-split__inner {
        grid-template-columns: 1fr;
        direction: ltr;
        padding: 0 var(--container-padding);
    }
    .sf-split__image {
        /* Drop the 500-800px desktop min-height entirely and let an
           aspect-ratio drive the image height proportionally to the
           viewport width. min-height:0 unsets the desktop value. */
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-md);
    }
    .sf-split__image img {
        /* Take the inner <img> out of absolute parallax mode — on
           mobile the image just fills its now-aspect-ratio'd parent
           in normal flow. `transform: none !important` overrides the
           inline translateY the parallax rAF script keeps writing. */
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: 100%;
        transform: none !important;
    }
    .sf-split__text {
        /* Desktop padding uses clamp(2rem, 5vw, 5rem) horizontal which
           stacks on top of the inner's own padding on mobile. Drop the
           horizontal cushion so text aligns to the container padding. */
        padding: var(--space-6) 0;
    }

    /* User-requested mobile reorder for the Health & Wellness section:
       image at TOP, title + text below. The image is naturally second
       in DOM, so flip it ahead via order. */
    .sf-split__image {
        order: -1;
    }
    .sf-split__text {
        order: 1;
    }

    /* === .sf-reveal — Mobile "read more" disclosure ===
       Mirrors the .sv-hero-reveal pattern from the services-page
       popup: a 44px black circle with a + icon (made from two
       absolutely-positioned bars) that rotates 45° into an × on
       open. The paragraph panel uses the grid-template-rows
       0fr → 1fr trick for a smooth content-aware height
       animation without a hardcoded max-height. */
    .sf-reveal {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 100%;
        margin-top: var(--space-4);
    }
    .sf-reveal__btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 0;
        padding: 0;
        background: #0A1119;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
        transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                    box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    }
    .sf-reveal__btn:hover {
        transform: scale(1.06);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
    .sf-reveal__btn:focus-visible {
        outline: 2px solid var(--color-orange, #C0392B);
        outline-offset: 3px;
    }
    .sf-reveal__icon {
        position: relative;
        width: 16px;
        height: 16px;
        display: inline-block;
        transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1);
    }
    .sf-reveal__icon-bar {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        border-radius: 1px;
    }
    .sf-reveal__icon-bar:nth-child(1) { width: 14px; height: 2px;  transform: translate(-50%, -50%); }
    .sf-reveal__icon-bar:nth-child(2) { width: 2px;  height: 14px; transform: translate(-50%, -50%); }
    .sf-reveal__btn[aria-expanded="true"] .sf-reveal__icon {
        transform: rotate(45deg);
    }
    .sf-reveal__panel {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        margin-top: 0;
        transition: grid-template-rows 520ms cubic-bezier(0.4, 0, 0.1, 1),
                    opacity 420ms cubic-bezier(0.4, 0, 0.1, 1),
                    margin-top 520ms cubic-bezier(0.4, 0, 0.1, 1);
        width: 100%;
    }
    .sf-reveal__panel > * {
        min-height: 0;
        overflow: hidden;
    }
    /* Strip the trailing paragraph margin and any margin on the
       inner wrapper itself — paragraph margin-bottom escapes the
       grid row when collapsed and reads as empty space below the
       button. */
    .sf-reveal__panel-inner {
        margin: 0;
    }
    .sf-reveal__panel-inner > p:last-child {
        margin-bottom: 0;
    }
    .sf-reveal__btn[aria-expanded="true"] + .sf-reveal__panel {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: var(--space-4);
    }
}

/* Desktop / tablet-landscape: the read-more disclosure is mobile-only.
   Hide the trigger button entirely and let the panel render as plain
   inline content (no grid-rows trick, no opacity collapse) so all
   three paragraphs are visible as before. */
@media (min-width: 901px) {
    .sf-reveal__btn {
        display: none;
    }
    .sf-reveal__panel {
        display: block;
    }
}

/* Reduced motion: snap-open the panel, no slide-in. */
@media (prefers-reduced-motion: reduce) {
    .sf-reveal__btn,
    .sf-reveal__icon,
    .sf-reveal__panel {
        transition: none !important;
    }
}


/* ============================================
   4. EMPOWERING — Text + numbered steps
   ============================================ */
.sf-empower {
    position: relative;
    background: #E8E8E6;
    padding: var(--section-padding) 0;
    overflow: hidden;
}

.sf-empower::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #FFFFFF 0%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.sf-empower__inner {
    position: relative;
    z-index: 1;
}

.sf-empower__inner {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 1fr;
    gap: var(--space-12);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    align-items: center;
}

.sf-empower__visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-empower__icon {
    font-size: clamp(8rem, 14vw, 13rem);
    color: #C0392B;
    line-height: 1;
}

.sf-empower__text p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
}

/* Numbered step frames */
.sf-empower__frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sf-empower__frame-inner {
    background: #fafaf8;
    border: 0.5px solid #c8c8c8;
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
}

.sf-empower__frame-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 0 / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 100% / 100% 5px no-repeat;
}

.sf-empower__frame-num {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: rgba(50, 48, 47, 0.06);
    flex-shrink: 0;
    line-height: 1;
}

.sf-empower__frame-label {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.6px;
}

@media (max-width: 900px) {
    .sf-empower__inner { grid-template-columns: 1fr; }
    .sf-empower__icon { font-size: clamp(6rem, 22vw, 9rem); }
}


/* ============================================
   5. LEADERSHIP — Spotlight card
   ============================================ */
.sf-leadership {
    background: #FFFFFF;
    padding: var(--section-padding) 0 0;
}

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

.sf-leadership__intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: var(--text-max-width);
    margin: 0 0 var(--space-10);
}

.sf-leadership__card {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: #fafaf8;
    border: 0.5px solid #c8c8c8;
    padding: var(--space-5);
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

.sf-leadership__card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 0 / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 100% / 100% 5px no-repeat;
}

.sf-leadership__card-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.sf-leadership__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-leadership__card-name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.6px;
    margin: 0;
}

.sf-leadership__card-role {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}


/* ============================================
   6. SAFETY PRINCIPLES — Numbered strips
   ============================================ */
.sf-principles {
    background: #1a1814;
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

/* Blueprint grid */
.sf-principles::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.sf-principles__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.sf-principles__header {
    position: relative;
    margin-bottom: var(--space-12);
}

.sf-principles__ghost {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.02);
    line-height: 0.85;
    display: block;
    margin-bottom: var(--space-2);
    pointer-events: none;
    user-select: none;
}

.sf-principles__header .sf-section-title {
    color: #FFFFFF;
}

.sf-principles__header p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.5);
    line-height: var(--leading-normal);
    max-width: 540px;
    margin: 0;
}

/* Principle strips — staircase row */
.sf-principles__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    gap: clamp(10px, 1.2vw, 18px);
}

.sf-principles__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-6) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sf-principles__item:nth-child(1) { min-height: 200px; }
.sf-principles__item:nth-child(2) { min-height: 260px; }
.sf-principles__item:nth-child(3) { min-height: 320px; }
.sf-principles__item:nth-child(4) { min-height: 380px; }
.sf-principles__item:nth-child(5) { min-height: 440px; }

.sf-principles__item:last-child {
    border-bottom: none;
}

.sf-principles__item-num {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    min-width: 60px;
    line-height: 1;
}

.sf-principles__item-text {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.6px;
    line-height: var(--leading-snug);
    margin: 0;
}


/* ============================================
   7. ENVIRONMENTAL — Clean text
   ============================================ */
.sf-env {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.sf-env {
    overflow: hidden;
}

.sf-env__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0 0 var(--container-padding);
    display: grid;
    grid-template-columns: minmax(0, 540px) 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.sf-env__inner p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
}

.sf-env__image {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.25);
    margin-right: calc(50% - 50vw);
    margin-top: calc(var(--section-padding) * -1);
    margin-bottom: calc(var(--section-padding) * -1);
    align-self: stretch;
}

.sf-env__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
}

.sf-env__quote {
    margin: var(--space-8) 0 0;
    padding: var(--space-6) 0 0;
    border-top: 0.5px solid #c8c8c8;
    position: relative;
}

.sf-env__quote-mark {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.8;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: var(--space-2);
}

.sf-env__quote p {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    letter-spacing: -0.4px;
    margin: 0;
}

@media (max-width: 900px) {
    /* SF-ENV (Environmental section)
       --------------------------------------------------------------
       Desktop bleeds the image to the right viewport edge (via
       `margin-right: calc(50% - 50vw)`) AND vertically up/down into
       the section's padding (via `margin-top/bottom: calc(--section-
       padding * -1)`), plus stretches the grid cell with align-self
       and a `height: 100%` on the <img>. On mobile only the
       horizontal bleed and grid columns get reset — every other
       bleed trick still fires, so the image overflows into section
       padding above and below and reads as broken. Strip all four
       bleed mechanisms (vertical margins, align-self, the inner
       img's 100% height) so the image sits cleanly in its grid
       cell above the text. */
    .sf-env__inner {
        grid-template-columns: 1fr;
        padding: 0 var(--container-padding);
        gap: var(--space-6);
    }
    .sf-env__image {
        order: -1;
        margin: 0;                       /* kill ALL bleed margins */
        border-radius: var(--radius-md); /* pill-aesthetic corners */
        align-self: auto;                /* don't stretch the row */
    }
    .sf-env__image img {
        /* Let aspect-ratio drive height instead of `height:100%` of
           a parent with no explicit height. */
        height: auto;
        aspect-ratio: 16 / 10;
    }
}


/* ============================================
   8. QUOTE — Large centered
   ============================================ */
.sf-quote {
    background: #FFFFFF;
    padding: clamp(4rem, 8vw, 8rem) 0;
    border-top: 0.5px solid #c8c8c8;
    border-bottom: 0.5px solid #c8c8c8;
    position: relative;
}

.sf-quote::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 0 / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 100% / 100% 5px no-repeat;
}

.sf-quote__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
    position: relative;
}

.sf-quote__mark {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 800;
    color: rgba(50, 48, 47, 0.04);
    line-height: 0.5;
    display: block;
    margin-bottom: var(--space-4);
    pointer-events: none;
}

.sf-quote__text {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    letter-spacing: -0.6px;
    margin: 0;
    font-style: italic;
}


/* ============================================
   10. CERTIFICATIONS — Cert badge cards
   ============================================ */
.sf-cert {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

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

.sf-cert__intro {
    max-width: 760px;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.sf-cert__intro p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
}

/* Cert grid — each card is its own little certification box */
.sf-cert__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(var(--space-3), 1.5vw, var(--space-5));
}

.sf-cert__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #FFFFFF;
    border: 0.5px solid #d8d8d4;
    border-radius: 14px;
    box-shadow: 0 14px 36px -22px rgba(0, 0, 0, 0.18),
                0 2px 4px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.sf-cert__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.24),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Logo plate at the top of each card — generous breathing room, soft tinted bg */
.sf-cert__card-mark {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(110px, 12vw, 140px);
    padding: var(--space-5) var(--space-5);
    background: #fafaf8;
    border-bottom: 0.5px solid #ececea;
}

.sf-cert__card-logo {
    max-width: 80%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sf-cert__card-name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.3px;
    margin: var(--space-4) var(--space-5) var(--space-2);
}

.sf-cert__card-desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 var(--space-5) var(--space-5);
}


/* ============================================
   11. CTA
   ============================================ */
.sf-cta {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.sf-cta__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

.sf-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--text-section);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.6px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-8);
}

.sf-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 18px 44px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--duration-base) var(--ease-out),
                gap var(--duration-base) var(--ease-out);
}

.sf-cta__btn:hover {
    background: var(--color-navy);
    gap: var(--space-4);
}

.sf-cta__btn i {
    font-size: 1.1rem;
}

/* ============================================
   PAGE-WIDE PILL FAMILY — Mirrors .co-about__indicator + map popup +
   project cards + contact buttons + tracks + projects-carousel +
   related-projects + ct-links + sc-steps + services-panel cards.
   Applies to every box-like component on the safety page.
   ============================================ */
.sf-leadership__card,
.sf-empower__frame-inner,
.sf-principles__item {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sf-leadership__card:hover,
.sf-empower__frame-inner:hover,
.sf-principles__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Kill all tick-mark / corner-tick decorations — pill aesthetic replaces them. */
.sf-leadership__card::after,
.sf-empower__frame-inner::after { display: none; }

/* Principles items live on a dark section but their original text was white.
   Now that the pill normalization makes them white, flip text to dark and
   replace the joined-row border-bottom dividers with gap + padding. */
.sf-principles__item {
    padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2vw, 28px);
    border-bottom: none;
}
.sf-principles__list { gap: clamp(12px, 1.4vw, 20px); }
.sf-principles__item-num  { color: rgba(0, 0, 0, 0.22); font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.sf-principles__item-text { color: var(--color-text-primary); }

/* ============================================
   FLOATING PAGE NAV — Pill bar anchored to viewport bottom.
   ============================================ */
.sf-page-nav {
    position: fixed;
    left: 50%;
    bottom: clamp(16px, 2vw, 28px);
    transform: translateX(-50%);
    z-index: 50;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sf-page-nav::-webkit-scrollbar { display: none; }

.sf-page-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
    padding: clamp(10px, 1vw, 14px) clamp(20px, 2vw, 28px);
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 999px;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}

.sf-page-nav__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    transition: background 220ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sf-page-nav__link:hover { background: rgba(0, 0, 0, 0.04); }

/* Anchor offset so the fixed site header doesn't cover section tops. */
#sf-philosophy, #sf-leading, #sf-empower, #sf-leadership,
#sf-safety, #sf-env, #sf-health, #sf-cert {
    scroll-margin-top: 100px;
}

/* Pad the final CTA so the floating nav has clearance. */
.sf-cta { padding-bottom: clamp(96px, 10vw, 140px); }

@media (max-width: 900px) {
    /* ============================================================
       MOBILE / TABLET — Rotated bar-chart metaphor
       ------------------------------------------------------------
       Desktop expresses the L.I.F.E. principles as a 5-column
       grid with progressive bottom-aligned min-heights — a rising
       staircase reading left-to-right. On phones / tablets that
       layout collapses to a flat single-column stack and the
       "rising" cue is lost.
       Mobile reinterpretation: stack the cards vertically, anchor
       each to the LEFT edge of the container, and stair-step the
       WIDTHS instead of heights — 68% → 76% → 84% → 92% → 100%.
       The right edges cascade outward step by step, so the eye
       reads it as a horizontal bar chart with bars getting longer
       top-to-bottom — same ascending rhythm as the desktop chart,
       just rotated 90° onto the vertical reading axis.
       Card-number marks also tint progressively darker per step,
       turning the static 01/02/03/04/05 into a visual "intensity"
       gauge that reinforces the growth.
       ============================================================ */
    .sf-principles__list {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: clamp(10px, 2vw, 16px);
    }

    .sf-principles__item:nth-child(n) {
        min-height: 0;
        /* Override the grid item's default `stretch` so each card
           sizes to its own explicit width instead of filling the
           1fr column. justify-self pins them all to the left. */
        justify-self: start;
    }

    /* Width staircase — bars get longer per step. min-width keeps
       the top card from squeezing below readable size on 320px
       phones where 68% of the inner container is ~180px. */
    .sf-principles__item:nth-child(1) { width: 68%; min-width: 200px; }
    .sf-principles__item:nth-child(2) { width: 76%; min-width: 220px; }
    .sf-principles__item:nth-child(3) { width: 84%; }
    .sf-principles__item:nth-child(4) { width: 92%; }
    .sf-principles__item:nth-child(5) { width: 100%; }

    /* Number-mark "intensity ramp" — faint at the top, bold at the
       bottom. Pairs with the width progression to read as a single
       coherent ascending gauge instead of five independent cards. */
    .sf-principles__item:nth-child(1) .sf-principles__item-num { color: rgba(0, 0, 0, 0.10); }
    .sf-principles__item:nth-child(2) .sf-principles__item-num { color: rgba(0, 0, 0, 0.14); }
    .sf-principles__item:nth-child(3) .sf-principles__item-num { color: rgba(0, 0, 0, 0.18); }
    .sf-principles__item:nth-child(4) .sf-principles__item-num { color: rgba(0, 0, 0, 0.22); }
    .sf-principles__item:nth-child(5) .sf-principles__item-num { color: rgba(0, 0, 0, 0.30); }
}

@media (max-width: 600px) {
    .sf-page-nav { max-width: calc(100vw - 16px); }
    .sf-page-nav__pill { padding: 8px 16px; gap: 4px; }
    .sf-page-nav__link { font-size: var(--text-xs); padding: 6px 10px; }
}