/*
  =====================================================================
  Our Company Section — Stickley on Security / VYFI  v3
  Spectre.css compatible.
  Font: Public Sans (loaded via theme or add @import below if needed)
  Fixes: vertical align, padding, font, orange stats bar,
         solutions cols, legacy pull full-height, real icons.
  =====================================================================
*/

/*
  If Public Sans is not already loaded by your theme, uncomment:
  @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
*/

/* ─── SECTION BASE ─────────────────────────────────────────────────── */
.sos-company-section,
.sos-company-section * {
    font-family: 'Public Sans', sans-serif;
    box-sizing: border-box;
}

.sos-company-section {
    background: var(--white);
    overflow: hidden;
}

/* ─── EYEBROW ───────────────────────────────────────────────────────── */
.sos-eyebrow {
    display: inline-block;
    font-family: 'Public Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    border-bottom: 2px solid var(--teal);
    padding-bottom: 3px;
    margin-bottom: 20px;
}

.sos-eyebrow--light {
    color: var(--cloud);
    border-bottom-color: rgba(217, 244, 251, 0.5);
}

/* ─── 1. INTRO ──────────────────────────────────────────────────────── */
.sos-intro {
    display: flex;
    align-items: stretch;
    /* both cols same height */
}

.sos-intro__text {
    flex: 0 0 50%;
    background: var(--white);
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical centre */
}

.sos-intro__heading {
    font-family: 'Public Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--teal);
    margin: 6px 0 24px;
}

.sos-intro__text p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--charcoal);
    margin-bottom: 14px;
}

.sos-intro__text p:last-child {
    margin-bottom: 0;
}

.sos-intro__image {
    flex: 0 0 50%;
    min-height: 380px;
    overflow: hidden;
}

.sos-intro__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── 2. LEGACY BAND ────────────────────────────────────────────────── */
/*
  Key fix: the outer .sos-legacy is display:flex with align-items:stretch.
  .sos-legacy__pull has NO explicit height — it stretches to match its
  sibling, which means its background fills the full row height.
*/
.sos-legacy {
    display: flex;
    align-items: stretch;
    background: var(--teal);
    /* fallback if children don't cover */
    color: var(--white);
}

.sos-legacy__pull {
    flex: 0 0 33.333%;
    background: rgba(0, 0, 0, 0.22);
    /* darker overlay on teal = full-height darker panel */
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.sos-legacy__quote {
    font-family: 'Public Sans', sans-serif;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--cloud);
    margin: 0;
    border-left: 3px solid var(--cloud);
    padding-left: 18px;
}

.sos-legacy__since {
    font-size: 0.8rem;
    color: rgba(217, 244, 251, 0.7);
    margin: 0;
    letter-spacing: 0.04em;
}

.sos-legacy__since strong {
    color: var(--cloud);
}

.sos-legacy__body {
    flex: 1;
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical centre */
}

.sos-legacy__label {
    font-size: 1rem;
    color: var(--cloud);
    margin-bottom: 14px;
}

.sos-legacy__body p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 14px;
}

.sos-legacy__body p:last-child {
    margin-bottom: 0;
}

.sos-legacy__body strong {
    color: var(--white);
}

/* ─── 3. SOLUTIONS INTRO ────────────────────────────────────────────── */
.sos-solutions-intro {
    padding: 52px 52px 44px;
    background: var(--white);
    border-bottom: 1px solid var(--dust);
}

/*
  Two <p> tags become two equal columns via CSS grid.
  No Spectre column classes on the <p> elements — avoids the
  "p.column.col-6 has no background" grey-box problem entirely.
*/
.sos-solutions-intro__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 12px;
}

.sos-solutions-intro__cols p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--charcoal);
    margin: 0;
    padding-right: 40px;
}

.sos-solutions-intro__cols p:last-child {
    padding-right: 0;
    padding-left: 40px;
    border-left: 1px solid var(--dust);
}

/* ─── 4. SERVICE CARDS ──────────────────────────────────────────────── */
/*
  2×2 grid via CSS grid. No Spectre columns — avoids gap/background issues.
  Last card (.sos-service--edu) spans full width via grid-column.
*/
.sos-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--dust);
    /* gap colour */
}

.sos-service {
    background: var(--white);
}

.sos-service__inner {
    padding: 44px 44px 48px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Icon image */
.sos-service__icon-wrap {
    margin-bottom: 20px;
}

.sos-service__icon-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
}

.sos-service__title {
    font-family: 'Public Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--teal);
    line-height: 1.3;
    margin: 0 0 14px;
}

.sos-service__lead {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--charcoal);
    margin-bottom: 16px;
}

.sos-service__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sos-service__list li {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--charcoal);
    padding: 10px 0 10px 18px;
    border-bottom: 1px solid var(--dust);
    position: relative;
}

.sos-service__list li:first-child {
    border-top: 1px solid var(--dust);
}

.sos-service__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
}

/* Education card: spans both columns */
.sos-service--edu {
    grid-column: 1 / -1;
    background: var(--cloud2);
}

.sos-service__inner--edu {
    padding: 44px 44px 52px;
}

/* Icon + title/lead row for edu card */
.sos-service__edu-header {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 28px;
}

.sos-service__edu-header .sos-service__icon-wrap {
    flex-shrink: 0;
    margin-bottom: 0;
}

.sos-service__edu-header .sos-service__title {
    margin-bottom: 10px;
}

.sos-service__edu-header .sos-service__lead {
    margin-bottom: 0;
}

/* 3-column education sub-grid */
.sos-edu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--dust);
}

.sos-edu-item {
    background: var(--white);
    padding: 24px 28px 28px;
}

.sos-edu-label {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--teal);
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cloud);
}

.sos-edu-item p:not(.sos-edu-label) {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--charcoal);
    margin: 0;
}

/* ─── 5. ORANGE STATS BAR ────────────────────────────────────────────── */
.sos-stats {
    display: flex;
    background: var(--orange);
}

.sos-stats__item {
    flex: 1;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.sos-stats__item:last-child {
    border-right: none;
}

.sos-stats__num {
    font-family: 'Public Sans', sans-serif;
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    letter-spacing: -0.02em;
}

.sos-stats__num sup {
    font-size: 1.1rem;
    font-weight: 700;
    vertical-align: super;
}

.sos-stats__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 6px;
    line-height: 1.4;
}

/* ─── 6. REACH BAND ──────────────────────────────────────────────────── */
.sos-reach {
    background: var(--teal);
    color: var(--white);
}

.sos-reach__inner {
    padding: 52px 52px;
    max-width: 860px;
    /* keep long lines readable */
}

.sos-reach__inner p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 14px;
}

.sos-reach__inner p:last-child {
    margin-bottom: 0;
}

.sos-reach__inner strong {
    color: var(--white);
}

/* ─── 7. CLOSING CTA ────────────────────────────────────────────────── */
.sos-close {
    display: flex;
    align-items: center;
    background: var(--cloud2);
    border-top: 1px solid var(--dust);
}

.sos-close__copy {
    flex: 1;
    padding: 52px 52px;
    border-right: 1px solid var(--dust);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sos-close__label {
    font-size: 1rem;
    color: var(--teal);
    margin-bottom: 14px;
}

.sos-close__copy p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--charcoal);
    margin-bottom: 14px;
}

.sos-close__copy p:last-child {
    margin-bottom: 0;
}

.sos-close__copy strong {
    color: var(--teal);
}

.sos-close__cta {
    flex: 0 0 280px;
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────── */
.sos-btn {
    display: inline-block;
    font-family: 'Public Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    padding: 14px 26px;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    width: 100%;
}

.sos-btn--primary {
    background: var(--orange);
    color: var(--white) !important;
    border: 2px solid var(--orange);
}

.sos-btn--primary:hover {
    background: #b83d18;
    border-color: #b83d18;
    color: var(--white) !important;
}

.sos-btn--outline {
    background: transparent;
    color: var(--teal) !important;
    border: 2px solid var(--teal);
}

.sos-btn--outline:hover {
    background: var(--teal);
    color: var(--white) !important;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* Intro stacks */
    .sos-intro {
        flex-direction: column;
    }

    .sos-intro__text,
    .sos-intro__image {
        flex: 0 0 100%;
    }

    .sos-intro__text {
        padding: 40px 32px;
        border-right: none;
        border-bottom: 1px solid var(--dust);
    }

    .sos-intro__image {
        min-height: 260px;
    }

    /* Legacy stacks */
    .sos-legacy {
        flex-direction: column;
    }

    .sos-legacy__pull {
        flex: 0 0 auto;
        padding: 36px 32px;
    }

    .sos-legacy__body {
        padding: 36px 32px;
    }

    /* Solutions cols stack */
    .sos-solutions-intro {
        padding: 40px 32px 32px;
    }

    .sos-solutions-intro__cols {
        grid-template-columns: 1fr;
    }

    .sos-solutions-intro__cols p:last-child {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--dust);
        padding-top: 20px;
        margin-top: 4px;
    }

    /* Service cards: 1 column */
    .sos-services {
        grid-template-columns: 1fr;
    }

    .sos-service--edu {
        grid-column: auto;
    }

    .sos-service__inner,
    .sos-service__inner--edu {
        padding: 36px 32px 40px;
    }

    .sos-service__edu-header {
        flex-direction: column;
        gap: 16px;
    }

    /* Edu sub-grid stacks */
    .sos-edu-grid {
        grid-template-columns: 1fr;
    }

    /* Stats: wrap if needed */
    .sos-stats {
        flex-wrap: wrap;
    }

    .sos-stats__item {
        flex: 0 0 33.333%;
        padding: 28px 24px;
    }

    /* Reach */
    .sos-reach__inner {
        padding: 40px 32px;
    }

    /* Close stacks */
    .sos-close {
        flex-direction: column;
        align-items: stretch;
    }

    .sos-close__copy {
        padding: 40px 32px;
        border-right: none;
        border-bottom: 1px solid var(--dust);
    }

    .sos-close__cta {
        flex: none;
        padding: 32px 32px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .sos-btn {
        width: auto;
        flex: 1 1 auto;
    }
}

@media (max-width: 540px) {
    .sos-intro__text {
        padding: 32px 24px;
    }

    .sos-intro__heading {
        font-size: 1.4rem;
    }

    .sos-legacy__pull,
    .sos-legacy__body {
        padding: 28px 24px;
    }

    .sos-solutions-intro {
        padding: 32px 24px 24px;
    }

    .sos-service__inner,
    .sos-service__inner--edu {
        padding: 28px 24px 32px;
    }

    .sos-stats__item {
        flex: 0 0 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 24px 24px;
    }

    .sos-stats__item:last-child {
        border-bottom: none;
    }

    .sos-reach__inner {
        padding: 32px 24px;
    }

    .sos-close__copy,
    .sos-close__cta {
        padding: 28px 24px;
    }
}

/* ─── LAST LIST ITEM: no bottom border ────────────────────────────── */
.sos-service__list li:last-child {
    border-bottom: none;
}

/* ─── AOS: prevent layout flash before animate ────────────────────── */
/*
  AOS hides elements until they animate in. If your theme's AOS init
  uses data-aos on elements that are above the fold, they'll be
  invisible until scroll. Set a short once:true + offset in your
  AOS.init() call to handle this gracefully, e.g.:
    AOS.init({ once: true, offset: 60, duration: 700 });
  The data-aos-duration/delay attributes on each element override
  the global default, so you get per-element control.
*/