/* ════════════════════════════════════════════════════════
   AW FIREGUARD — PARTNERSHIPS PAGE
   Template: page-partnerships.php (slug: partnerships)
   Self-contained: redeclares the shared design tokens and the
   shared components it reuses (container, eyebrow, buttons, hero,
   section-header, CTA banner) so it matches the other page CSS
   files, then adds the partnership-specific sections.
   ════════════════════════════════════════════════════════ */

/* box-sizing reset, required so width:100% + padding-inline doesn't overflow
   the viewport (matches every other page CSS file in this theme). */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --red: #C0272D;
    --red-dark: #A01E23;
    --bg: #F4F2EF;
    --bg-dark: #1E2530;
    --card-bg: #FFFFFF;
    --text: #1A1A1A;
    --text-muted: #636363;
    --text-light: #EDE9E3;
    --text-dim: #7B8695;
    --border: rgba(0, 0, 0, 0.08);
    --border-light: rgba(255, 255, 255, 0.10);

    --font-body: 'Libre Franklin', system-ui, sans-serif;
    --font-display: 'Bebas Neue', Impact, sans-serif;

    --max-w: 1200px;
    --section-py: 96px;
    --radius: 8px;
    --radius-lg: 12px;

    --shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.07);
}


/* ════════════════════════════════════════════════════════
   SHARED PRIMITIVES
   ════════════════════════════════════════════════════════ */
.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: 24px;
}

.eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
}

.eyebrow--on-dark {
    color: #FF6B6B;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.btn-primary:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
}

.btn-outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.btn-outline-white:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-red-solid {
    display: inline-block;
    padding: 15px 28px;
    background: var(--red);
    color: #fff;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.18s ease;
    align-self: flex-start;
}

.btn-red-solid:hover {
    background: var(--red-dark);
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 56px;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.125rem);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.03em;
    margin-bottom: 16px;
    text-wrap: balance;
}

.section-header p {
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.72;
    text-wrap: pretty;
}


/* ════════════════════════════════════════════════════════
   HERO — dark centred
   ════════════════════════════════════════════════════════ */
.hero {
    min-height: 60vh;
    background-color: var(--bg-dark);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 24px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(30, 37, 48, 0.82);
    z-index: 0;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

.hero__eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF6B6B;
    margin-bottom: 20px;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 4.75rem);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.03em;
    margin-bottom: 24px;
    line-height: 1.02;
    text-wrap: balance; /* even line lengths — no single-word orphan line */
}

.hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.125rem);
    font-weight: 300;
    color: var(--text-light);
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 40px;
    line-height: 1.75;
    opacity: 0.92;
    text-wrap: pretty; /* prevents a lone last-word orphan */
}

.hero__ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════
   INTRO LEAD
   ════════════════════════════════════════════════════════ */
.partner-intro {
    padding: var(--section-py) 0 calc(var(--section-py) - 24px);
    background: var(--bg);
}

.partner-intro__inner {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.partner-intro__inner h2 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.03em;
    margin-bottom: 20px;
    line-height: 1.08;
    text-wrap: balance;
}

.partner-intro__inner p {
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.8;
    text-wrap: pretty;
}

.partner-intro__inner p + p {
    margin-top: 18px;
}


/* ════════════════════════════════════════════════════════
   PARTNERSHIP SERVICES — checklist grid
   ════════════════════════════════════════════════════════ */
.partner-services {
    padding: var(--section-py) 0;
    background: var(--card-bg);
    border-block: 1px solid var(--border);
}

.partner-services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 40px;
    max-width: 960px;
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.partner-services__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.partner-services__item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    border-color: rgba(192, 39, 45, 0.25);
}

.partner-services__check {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(192, 39, 45, 0.10);
    color: var(--red);
    margin-top: 1px;
}

.partner-services__check svg {
    width: 16px;
    height: 16px;
}

.partner-services__label {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    font-weight: 500;
}


/* ════════════════════════════════════════════════════════
   WHY PARTNER — dark feature band
   ════════════════════════════════════════════════════════ */
.partner-why {
    padding: var(--section-py) 0;
    background: var(--bg-dark);
    color: #fff;
}

.partner-why__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.partner-why__text h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.03em;
    margin-bottom: 18px;
    line-height: 1.05;
    text-wrap: balance;
}

.partner-why__text p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text-light);
    opacity: 0.9;
    text-wrap: pretty;
}

.partner-why__checklist {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.partner-why__check {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.partner-why__check-icon {
    flex-shrink: 0;
    margin-top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 107, 107, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-why__check-icon svg {
    width: 13px;
    height: 13px;
    color: #FF6B6B;
}

.partner-why__check-text {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--text-light);
    line-height: 1.6;
}


/* ════════════════════════════════════════════════════════
   CLOSING STATEMENT
   ════════════════════════════════════════════════════════ */
.partner-closing {
    padding: var(--section-py) 0;
    background: var(--bg);
}

.partner-closing__inner {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

/* Large brand quotation mark opening the statement. line-height < 1 keeps it
   from adding a big empty band above the eyebrow. */
.partner-closing__quote {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(4.5rem, 9vw, 6.5rem);
    line-height: 0.6;
    color: var(--red);
    margin-bottom: 20px;
    user-select: none;
}

.partner-closing .eyebrow {
    margin-bottom: 22px;
}

.partner-closing__inner p {
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.7;
    color: var(--text);
    font-weight: 300;
    text-wrap: pretty;
}


/* ════════════════════════════════════════════════════════
   CTA BANNER
   ════════════════════════════════════════════════════════ */
.cta-section {
    padding: 48px 0 var(--section-py);
    background: var(--bg);
}

.cta-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.cta-card__image {
    min-height: 320px;
}

.cta-card__body {
    background: var(--card-bg);
    padding: 60px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

/* Kill the browser's default h3/p margins so the flex gap is the only
   spacing — otherwise the UA margins stack on top of it and blow open
   the heading-to-body gap. */
.cta-card__body > * {
    margin-block: 0;
}

.cta-card__body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.03em;
}

.cta-card__body p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.72;
}

.cta-card__phone {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: -4px;
}

.cta-card__phone a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.cta-card__phone a:hover {
    color: var(--red);
}


/* ════════════════════════════════════════════════════════
   RESPONSIVE
   Mobile-first clamps already cover most sizing; these
   breakpoints only handle structural reflow (columns, grid)
   and edge cases at very narrow / very wide viewports so the
   page renders the same on any phone/tablet at a given width
   (iPhone SE, iPhone 12 Pro, iPhone 14 Pro Max, small/large
   Android, iPad mini/Air) instead of drifting between devices.
   ════════════════════════════════════════════════════════ */

/* Prevent any section from ever forcing horizontal scroll on
   a stretched or ultra-narrow viewport. */
.hero,
.partner-intro,
.partner-services,
.partner-why,
.partner-closing,
.cta-section {
    max-width: 100vw;
    overflow-x: clip;
}

@media (max-width: 960px) {
    .partner-why__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-py: 64px;
    }

    .partner-services__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cta-card {
        grid-template-columns: 1fr;
    }

    .cta-card__image {
        min-height: 240px;
    }

    /* Once the card stacks, centre the body and stretch the button the way
       About and Services do, so the CTA reads the same on every template.
       The desktop rule pins the button left (align-self: flex-start), which
       has to be released here or it sits off to one side under centred text. */
    .cta-card__body {
        padding: 44px 32px;
        text-align: center;
        align-items: center;
    }

    .cta-card__body .btn-red-solid {
        align-self: stretch;
        width: 100%;
    }
}

/* Covers all phones in portrait: iPhone SE/12/13/14 (and Pro Max),
   and common Android widths (360-430px). Clamp paddings/gaps here
   instead of leaving them fixed so a 360px phone and a 430px phone
   render the same layout proportionally, with no cut-off text. */
@media (max-width: 600px) {
    :root {
        --section-py: 56px;
    }

    .container {
        padding-inline: clamp(16px, 4.5vw, 24px);
    }

    .hero {
        min-height: 52vh;
        padding: 48px clamp(16px, 4.5vw, 24px);
    }

    .hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero__ctas .btn {
        width: 100%;
    }

    .section-header,
    .partner-intro__inner,
    .partner-why__text,
    .partner-closing__inner {
        /* Narrower than the container so wrapped lines keep clear of the
           fixed click-to-call button parked in the bottom-right corner. */
        max-width: min(90%, 480px);
        margin-inline: auto;
    }

    .section-header {
        margin-bottom: 36px;
    }

    .partner-services__item {
        padding: 16px;
        gap: 12px;
    }

    .partner-why__inner {
        gap: 32px;
    }

    .partner-why__checklist {
        gap: 18px;
    }

    .partner-closing__quote {
        font-size: clamp(3.5rem, 16vw, 4.5rem);
    }

    .partner-closing__inner p {
        font-size: 1.125rem;
        line-height: 1.6;
    }

    .cta-card__body {
        padding: 36px 24px;
    }

    .cta-card__phone {
        margin-top: 4px;
    }
}

/* ── Phone type scale ──────────────────────────────────────
   This block used to shrink every heading with a vw-driven clamp
   (hero h1 down to 6.9vw, roughly 27px on a 390px screen) as a
   workaround for text clipping off the right edge. The real cause
   of that clipping was the missing box-sizing reset at the top of
   this file, not the type size, so the shrink has been removed and
   the page now renders at the same phone type scale as About,
   Services, and Contact: hero h1 2.6rem, section h2 2rem, CTA h3
   1.5rem. Only the checklist label and the unbreakable-string
   guard are still worth keeping here. */
@media (max-width: 600px) {
    /* Keep the longest checklist labels on one line at 360px too */
    .partner-services__label {
        font-size: 0.9375rem;
    }

    /* Final safety net: nothing clips off the right edge, even if a
       long unbreakable string (URL, part number) is entered in ACF. */
    .hero h1,
    .hero__sub,
    .section-header h2,
    .partner-intro__inner,
    .partner-why__text,
    .partner-services__label,
    .partner-why__check-text,
    .partner-closing__inner p,
    .cta-card__body {
        overflow-wrap: break-word;
    }
}