@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

/* Safety 2 — "Back Up Our Battle Skies" campaign page.
   Deliberately styled apart from the rest of the site: aged-paper ground, ink
   navy, poster oxblood and condensed stencil display type, all drawn from the
   printed field posters. Site chrome (header/footer) is untouched, and the
   shared components at the bottom of this file (buttons, form card) keep the
   same shapes as the other pages so the page still reads as APX. */

:root {
    --brand-red: #ED1B24;
    --brand-amber: #FAA621;
    --hero-text: #FFFFFF;
    --form-radius: 15px;
    --btn-radius: 10px;
    --section-radius: 30px;
    --max-content: 1400px;

    /* Campaign palette, sampled from the posters */
    --ink: #14212B;
    --ink-2: #1E2E3A;
    --oxblood: #8E2019;
    --paper: #EFE7D6;
    --paper-2: #E4D8C0;
    --cream: #F8F3E7;
    --gold: #C9962C;
    --display: "Oswald", "Inter", sans-serif;
}

.safety-page {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: var(--paper);
    /* Faint paper tooth so large flat areas don't look digital */
    background-image:
        radial-gradient(circle at 20% 15%, rgba(142, 32, 25, 0.05), transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(20, 33, 43, 0.06), transparent 50%);
}

/* ---- Shared campaign bits ------------------------------------------- */

/* The stacked, slant-ended bars used as the campaign's rule mark. */
.chevrons {
    display: block;
    width: 92px;
    height: 31px;
    flex: 0 0 auto;
    color: var(--oxblood);
}

.chevrons--center { margin: 0 auto 22px; }
.chevrons--gold   { color: var(--gold); }

/* Scoped under .safety-page so it outranks the page-wide paragraph colour. */
.safety-page .eyebrow-stencil {
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
    margin: 0 0 14px;
}

.safety-page .eyebrow-stencil--gold { color: var(--gold); }

.safety-page h1,
.safety-page h2,
.safety-page h3 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 1.02;
    color: var(--ink);
}

.safety-page p {
    color: #2A3742;
}

/* ---- Hero: "Back Up Our Battle Skies" banner ------------------------ */

.s2-hero {
    position: relative;
    border-radius: var(--section-radius);
    overflow: hidden;
    background: var(--ink);
    /* Sun-ray burst behind the artwork, so the banner sits in a scene
       rather than floating on a flat block. */
    background-image:
        repeating-conic-gradient(from 210deg at 50% 8%,
            rgba(255, 255, 255, 0.045) 0deg 6deg,
            transparent 6deg 14deg),
        linear-gradient(180deg, #1B2B36 0%, #101A22 100%);
    /* The site header is absolutely positioned over the top of the page, so the
       banner needs to start below it rather than under the nav. */
    padding: 180px 40px 40px;
    text-align: center;
    box-sizing: border-box;
    /* On desktop the whole hero -- banner plus buttons -- has to land inside the
       first screen, so the section fills the viewport (less the page's 10px
       gutters) and the banner is sized by the height that's left rather than by
       width. --hero-chrome is everything stacked around the artwork: this
       section's padding, the frame's border and padding, and the button row. */
    --hero-chrome: 360px;
    min-height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.s2-hero-frame {
    /* The banner is exactly 4:3, so the width that makes it exactly as tall as
       the leftover space is that height x 4/3, plus the 24px of border+padding
       this frame adds. Whichever of that and 1320px is smaller wins. */
    width: 100%;
    max-width: min(1320px, calc((100vh - var(--hero-chrome)) * 4 / 3 + 24px));
    box-sizing: border-box;
    margin: 0 auto;
    border: 2px solid rgba(233, 219, 191, 0.35);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.s2-hero-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.s2-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.s2-hero .btn-ghost {
    background: transparent;
    color: var(--cream);
    border: 2px solid rgba(248, 243, 231, 0.55);
    border-radius: var(--btn-radius);
    padding: 18px 24px;
}

.s2-hero .btn-ghost:hover,
.s2-hero .btn-ghost:focus {
    background: var(--cream);
    color: var(--ink);
}

/* ---- Campaign statement --------------------------------------------- */

.s2-campaign {
    max-width: 1180px;
    margin: 0 auto;
    padding: 96px 20px 40px;
    text-align: center;
}

.s2-campaign h2 {
    margin: 0 0 26px;
    font-size: 68px;
}

.s2-campaign h2 .accent { color: var(--oxblood); }

.s2-lede {
    font-size: 21px;
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto;
}

/* "EVERY WORKER. EVERY TASK. EVERY SHIFT." — stencilled sign-off. */
.s2-drumbeat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 40px auto 0;
    padding: 18px 28px;
    max-width: 780px;
    background: var(--ink);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(20, 33, 43, 0.25);
}

.s2-drumbeat span {
    font-family: var(--display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cream);
}

/* ---- Poster rail ----------------------------------------------------- */

.s2-posters {
    padding: 70px 0 90px;
    overflow: hidden;
}

.s2-posters-head {
    max-width: var(--max-content);
    margin: 0 auto 38px;
    padding: 0 20px;
    text-align: center;
}

.s2-posters-head h3 {
    margin: 0 0 10px;
    font-size: 34px;
}

.s2-posters-head p {
    margin: 0;
    font-size: 17px;
    color: #55636D;
}

.s2-rail-viewport {
    /* Fade the ends so posters drift in and out instead of popping. */
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.s2-rail {
    --poster-h: 330px;
    --gap: 34px;
    display: flex;
    align-items: flex-end;
    gap: var(--gap);
    width: max-content;
    padding: 14px 0 26px;
    margin: 0;
    list-style: none;
    animation: s2-marquee 60s linear infinite;
}

.s2-rail-viewport:hover .s2-rail,
.s2-rail.is-paused {
    animation-play-state: paused;
}

/* Hold the rail still while a keyboard user is tabbing along it, so posters
   don't slide out from under the focus ring. Closing the viewer only returns
   focus here for keyboard users (see the script on the page), so this can't
   leave a mouse user with a frozen rail. */
.s2-rail-viewport:focus-within .s2-rail {
    animation-play-state: paused;
}

@keyframes s2-marquee {
    from { transform: translateX(0); }
    /* The set is duplicated once, so half the width is one full loop. */
    to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

.s2-rail li { flex: 0 0 auto; }

.s2-poster-btn {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.s2-poster-btn img {
    height: var(--poster-h);
    width: auto;
    display: block;
    border: 6px solid var(--cream);
    border-radius: 3px;
    box-shadow: 0 16px 34px rgba(20, 33, 43, 0.32);
}

.s2-poster-btn:hover,
.s2-poster-btn:focus-visible {
    transform: translateY(-10px) rotate(-0.6deg);
    filter: saturate(1.06);
    outline: none;
}

.s2-poster-btn:focus-visible img {
    border-color: var(--brand-red);
}

.s2-rail-hint {
    text-align: center;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: var(--display);
    font-weight: 500;
    color: #6B7880;
}

/* ---- Lightbox -------------------------------------------------------- */

.s2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
    background: rgba(11, 18, 24, 0.97);
    backdrop-filter: blur(4px);
}

.s2-lightbox.is-open { display: flex; }

body.s2-lightbox-open { overflow: hidden; }

.s2-lightbox-figure {
    margin: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.s2-lightbox-figure img {
    max-height: 78vh;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    border: 10px solid var(--cream);
    border-radius: 3px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.s2-lightbox-caption {
    text-align: center;
    color: var(--cream);
    max-width: 560px;
}

.s2-lightbox-caption strong {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.s2-lightbox-caption span {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-style: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.s2-lb-btn {
    position: absolute;
    background: rgba(248, 243, 231, 0.12);
    border: 2px solid rgba(248, 243, 231, 0.4);
    color: var(--cream);
    border-radius: 50%;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.s2-lb-btn:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
}

/* The close button takes focus when the viewer opens, so keep that state a
   quiet ring rather than a full red fill shouting from the corner. */
.s2-lb-btn:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.s2-lb-prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.s2-lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.s2-lb-close { right: 24px; top: 24px; }

/* ---- Commitment banner ("Every Worker. Every Task. Every Shift.") ---- */

.s2-commitment {
    margin: 20px auto 70px;
    max-width: var(--max-content);
    border-radius: var(--section-radius);
    overflow: hidden;
    position: relative;
    color: var(--cream);
    background: var(--ink) url('/wp-content/uploads/2026/08/safety/banner-every-worker.jpg') no-repeat center right / cover;
}

/* The artwork carries its own headline on the right, so the copy sits in the
   dark left third and the scrim only deepens what's already there. */
.s2-commitment::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 22, 29, 0.94) 0%, rgba(14, 22, 29, 0.86) 34%, rgba(14, 22, 29, 0.25) 58%, transparent 74%);
    pointer-events: none;
}

/* Only used below the tablet breakpoint — see the stacked variant there. */
.s2-commitment-art { display: none; }

.s2-commitment-inner {
    position: relative;
    padding: 96px 60px;
    max-width: 620px;
}

.s2-commitment h2 {
    color: var(--cream);
    font-size: 46px;
    margin: 0 0 22px;
}

.s2-commitment p {
    color: rgba(248, 243, 231, 0.86);
    margin: 0 0 36px;
}

/* ---- Thank Safety + form -------------------------------------------- */

.s2-thanks {
    padding: 20px 20px 100px;
    display: flex;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
    max-width: var(--max-content);
    margin: 0 auto;
}

.s2-thanks .thanks-text { flex: 1 1 400px; }

.s2-thanks h2 {
    margin: 0 0 20px;
    font-size: 56px;
}

.s2-thanks .thanks-text > p { margin: 0 0 32px; }

/* "THE BEST PART OF THE DAY IS GOING HOME SAFE" — the campaign's closing
   stamp, styled like the plate at the foot of every printed poster. */
.s2-homesafe {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    border: 3px solid var(--oxblood);
    border-radius: 4px;
    background: var(--cream);
    box-shadow: 6px 6px 0 rgba(142, 32, 25, 0.18);
}

.s2-homesafe span {
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

/* ---- Buttons (shared shapes with the rest of the site) --------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.395px;
    line-height: 1;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-light {
    background: #FFFFFF;
    color: #000000;
    border-radius: var(--btn-radius);
    padding: 20px 24px;
    flex-direction: row-reverse;
}

.btn-light:hover,
.btn-light:focus {
    background: var(--brand-amber);
}

.btn-submit {
    background: var(--brand-red);
    color: #FFFFFF;
    border-radius: var(--btn-radius);
    padding: 20px 24px;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.39px;
    margin-top: 15px;
    filter: drop-shadow(0 14.798px 39.46px rgba(245, 123, 128, 0.50));
}

.btn-submit:hover,
.btn-submit:focus {
    background: #000000;
}

/* ---- Form card (shared design with other pages) --------------------- */

.contact-form-card {
    flex: 1 1 400px;
    background: linear-gradient(145deg, var(--brand-red) 12%, #FFFFFF 139%);
    border-radius: var(--section-radius);
    padding: 57px;
    color: var(--hero-text);
}

.contact-form-card h3 {
    color: var(--hero-text);
    margin: 0;
    font-family: "Helvetica Now Display", "Inter", sans-serif;
    text-transform: none;
    letter-spacing: -1.7px;
}

.contact-form-card .form-intro {
    color: var(--hero-text);
    margin: 10px 0 35px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.field { position: relative; }

.field input,
.field textarea {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    color: #1a1a1a;
    border: 0;
    border-radius: var(--form-radius);
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
    padding: 18px 60px 18px 22px;
}

.field textarea {
    resize: vertical;
    min-height: 200px;
    padding-top: 22px;
    padding-right: 22px;
}

.field input::placeholder,
.field textarea::placeholder { color: #999; }

.field input:focus,
.field textarea:focus {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}

.field.has-icon::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.field.icon-name::after  { background-image: url('/wp-content/uploads/2025/12/user.png'); }
.field.icon-email::after { background-image: url('/wp-content/uploads/2025/12/msg.png'); }
.field.icon-phone::after { background-image: url('/wp-content/uploads/2025/12/call.png'); }

.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;
}

/* ---- Motion preferences --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .s2-rail {
        animation: none;
        width: auto;
    }
    .s2-rail-viewport {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .s2-poster-btn { transition: none; }
    .s2-poster-btn:hover,
    .s2-poster-btn:focus-visible { transform: none; }
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 1440px) {
    .s2-hero { padding: 172px 28px 36px; --hero-chrome: 344px; }
    .s2-campaign { padding: 76px 20px 30px; }
    .s2-campaign h2 { font-size: 56px; }
    .s2-lede { font-size: 19px; }
    .s2-drumbeat span { font-size: 23px; }
    .s2-rail { --poster-h: 290px; --gap: 28px; }
    .s2-commitment-inner { padding: 78px 46px; }
    .s2-commitment h2 { font-size: 40px; }
    .s2-thanks h2 { font-size: 46px; }
    .btn-light, .s2-hero .btn-ghost { font-size: 18px; padding: 18px 20px; }
    .btn-submit { font-size: 18px; }
    .field input, .field textarea { font-size: 16px; }
}

@media (max-width: 1036px) {
    /* Tablets and phones scroll anyway, and a viewport-height cap would leave
       the banner tiny in landscape -- so the fit-on-one-screen rule is desktop
       only and the banner goes back to being sized by width here. */
    .s2-hero { padding: 140px 18px 36px; min-height: 0; }
    .s2-hero-frame { max-width: 1320px; }
    .s2-campaign { padding: 60px 20px 20px; }
    .s2-campaign h2 { font-size: 44px; }
    .s2-drumbeat { flex-direction: column; gap: 12px; padding: 20px; }
    .s2-drumbeat span { font-size: 20px; text-align: center; }
    .s2-posters { padding: 50px 0 70px; }
    .s2-rail { --poster-h: 250px; --gap: 22px; }
    /* Overlaying the copy would cover the artwork's own headline at this width,
       so the banner stacks: full art on top, copy on solid ink beneath. */
    .s2-commitment {
        background-image: none;
        background-color: #0E161D;
    }
    .s2-commitment::before { display: none; }
    .s2-commitment-art {
        display: block;
        width: 100%;
        height: auto;
    }
    .s2-commitment-inner { padding: 40px 30px 60px; max-width: none; }
    .s2-thanks { padding: 20px 20px 70px; flex-direction: column; gap: 28px; }
    .s2-thanks h2 { font-size: 40px; }
    .contact-form-card { padding: 35px; }
    .s2-lightbox { padding: 24px 16px 90px; }
    .s2-lb-prev  { left: 50%; top: auto; bottom: 20px; transform: translateX(-70px); }
    .s2-lb-next  { right: 50%; top: auto; bottom: 20px; transform: translateX(70px); }
    .s2-lightbox-figure img { max-height: 62vh; }
}

@media (max-width: 767px) {
    .s2-hero { padding: 118px 10px 28px; border-radius: 18px; }
    .s2-hero-frame { padding: 6px; }
    .s2-hero-actions { margin-top: 28px; }
    .s2-campaign { padding: 46px 16px 12px; }
    .s2-campaign h2 { font-size: 34px; }
    .s2-lede { font-size: 17px; }
    .s2-posters-head h3 { font-size: 26px; }
    .s2-rail { --poster-h: 200px; --gap: 16px; }
    .s2-poster-btn img { border-width: 4px; }
    .s2-commitment { border-radius: 18px; }
    .s2-commitment-inner { padding: 30px 20px 46px; }
    .s2-thanks { padding: 16px 16px 60px; }
    .s2-thanks h2 { font-size: 34px; }
    .s2-homesafe { flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
    .s2-homesafe span { font-size: 19px; }
    .contact-form-card { padding: 28px 22px; }
    .s2-lightbox-caption strong { font-size: 19px; }
}

/* Short desktop windows (a 768p laptop with a full browser chrome, say) have
   very little height left once the 170px site header is cleared, so trim the
   padding and buttons here to give the banner back as much of it as possible.
   Comes last in the file so it wins over the width-based tiers above. */
@media (min-width: 1037px) and (max-height: 860px) {
    .s2-hero {
        padding-top: 172px;
        padding-bottom: 24px;
        --hero-chrome: 316px;
    }
    .s2-hero-actions { margin-top: 20px; }
    .s2-hero .btn-light,
    .s2-hero .btn-ghost { font-size: 17px; padding: 14px 20px; }
}