/* ============================================
   SUBCONTRACTOR PAGE — N.Sani Design System
   BEM prefix: sc-
   ============================================ */

/* ============================================
   1. HERO — Split Layout
   ============================================ */
.sc-hero {
    position: relative;
    padding: clamp(140px, 16vh, 200px) 0 clamp(80px, 10vh, 140px);
    background: #fafaf8;
    overflow: hidden;
}

.sc-hero__grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(10, 17, 25, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 17, 25, 0.012) 1px, transparent 1px),
        linear-gradient(rgba(10, 17, 25, 0.005) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 17, 25, 0.005) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
    pointer-events: none;
}

.sc-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    align-items: center;
    position: relative; z-index: 1;
}

.sc-hero__ghost {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 12vw, 12rem);
    font-weight: 800;
    color: var(--color-text-primary);
    opacity: 0.04;
    position: absolute;
    top: -0.3em;
    left: -0.05em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.sc-hero__label-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.sc-hero__label-line {
    width: 40px;
    height: 2px;
    background: var(--color-text-primary);
}

.sc-hero__label {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.sc-hero__title {
    margin-bottom: var(--space-6);
}

.sc-hero__title-main {
    display: block;
    font-family: var(--font-heading);
    /* Floor bumped from 2.5rem → 3rem so "Become a" lands as a
       confident headline on phones instead of looking like a small
       intro. vw middle bumped to 7vw so it scales up faster on
       tablet/medium-screen widths too. */
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--color-text-primary);
}

.sc-hero__title-script {
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    /* Floor bumped from 2rem → 2.4rem so the cursive "Subcontractor"
       reads as a strong follow-on word on phones. Still narrow enough
       in Dancing Script that the word fits a ~272px content area on
       a 320px viewport without overflow. */
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: var(--space-2);
    position: relative;
    padding-bottom: 8px;
}

.sc-hero__title-script::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: clamp(10px, 1.2vw, 16px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    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");
}

.sc-hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: var(--space-8);
}

.sc-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
}

.sc-hero__cta:hover {
    background: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.sc-hero__cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: transform var(--duration-base) var(--ease-out);
}

.sc-hero__cta:hover .sc-hero__cta-arrow {
    transform: translateX(3px);
}

/* Hero form card */
.sc-hero__right {
    position: relative;
}

.sc-hero__form-card {
    position: relative;
    background: #fff;
    border: 1.5px solid rgba(10, 17, 25, 0.06);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(32px, 3.5vw, 48px);
    padding-top: clamp(90px, 9vw, 130px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.06);
}

.sc-hero__form-icon {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -30%);
    width: clamp(120px, 12vw, 160px);
    height: clamp(120px, 12vw, 160px);
    background: #fff;
    border: 1.5px solid rgba(10, 17, 25, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.sc-hero__form-icon svg {
    width: 60%;
    height: 60%;
    color: #C0392B;
}

.sc-hero__form-header {
    margin-bottom: var(--space-8);
}

.sc-hero__form-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.15;
    margin-bottom: var(--space-2);
}

.sc-hero__form-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.sc-hero__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.2vw, 16px);
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

.sc-hero__form-group {
    position: relative;
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

.sc-hero__form-row .sc-hero__form-group {
    margin-bottom: 0;
}

.sc-hero__form-group input,
.sc-hero__form-group select {
    width: 100%;
    padding: 18px 16px 8px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: rgba(10, 17, 25, 0.025);
    border: 1.5px solid rgba(10, 17, 25, 0.08);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--duration-base) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}

.sc-hero__form-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.sc-hero__form-group input:focus,
.sc-hero__form-group select:focus {
    border-color: rgba(10, 17, 25, 0.25);
}

.sc-hero__form-group label {
    position: absolute;
    top: 14px; left: 16px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    opacity: 0.5;
    pointer-events: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.sc-hero__form-group input:focus + label,
.sc-hero__form-group input:not(:placeholder-shown) + label,
.sc-hero__form-group select:focus + label,
.sc-hero__form-group select:not([value=""]):valid + label {
    top: 5px;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.4;
}

/* Select always shows label up since it has a selected option */
.sc-hero__form-group select + label {
    top: 5px;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.4;
}

.sc-hero__form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    padding: 16px 32px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    margin-top: var(--space-4);
}

.sc-hero__form-submit:hover {
    background: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sc-hero__form-stamp {
    position: absolute;
    bottom: 12px; right: 16px;
    display: flex; gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(10, 17, 25, 0.1);
}

/* ============================================================
   Hero entrance animation (page load)
   1. Ghost watermark fades in to 0.04 alpha
   2. Label line grows 0 → 40px, then label text fades in
   3. Title lines mask-reveal (rise from beneath baseline)
   4. Subtitle fades up
   5. Brush underline draws in left → right
   6. CTA pill fades up
   7. Form card lifts in (shadow included, no white-card ghost)
   8. Form header + fields fade-up staggered after card settles
   ============================================================ */

/* Ghost watermark */
.sc-hero__ghost {
    opacity: 0;
    transform: scale(0.98);
    transform-origin: left top;
    animation: scHeroGhost 1100ms cubic-bezier(0.22, 1, 0.36, 1) 50ms forwards;
}

/* Label row */
.sc-hero__label-line {
    width: 0;
    animation: scHeroLabelLine 450ms cubic-bezier(0.65, 0, 0.35, 1) 130ms forwards;
}
.sc-hero__label {
    opacity: 0;
    transform: translateX(-6px);
    animation: scHeroLabelText 500ms cubic-bezier(0.22, 1, 0.36, 1) 280ms forwards;
}

/* Title mask reveal */
.sc-hero__title-main,
.sc-hero__title-script {
    display: inline-block;
    overflow: hidden;
    padding: 0.05em 0.04em;
    margin: -0.05em -0.04em;
}
.sc-hero__title-inner {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
    animation: scHeroLineRise 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sc-hero__title-main   .sc-hero__title-inner { animation-delay: 180ms; }
.sc-hero__title-script .sc-hero__title-inner { animation-delay: 280ms; }

/* Brush underline */
.sc-hero__title-script::after {
    transform-origin: left center;
    transform: scaleX(0);
    animation: scHeroBrush 550ms cubic-bezier(0.65, 0, 0.35, 1) 700ms forwards;
}

/* Subtitle + CTA */
.sc-hero__subtitle {
    opacity: 0;
    transform: translateY(18px);
    animation: scHeroFadeUp 600ms cubic-bezier(0.22, 1, 0.36, 1) 580ms forwards;
}
.sc-hero__cta {
    opacity: 0;
    transform: translateY(14px);
    animation: scHeroFadeUp 550ms cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards;
}

/* Form card lifts in as one piece (shadow included).
   Scoped to .sc-hero so the same form rendered in the bottom
   contact section doesn't also animate on page load. */
.sc-hero .sc-hero__form-card {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transform-origin: center bottom;
    will-change: transform, opacity;
    animation: scHeroCardLift 850ms cubic-bezier(0.22, 1, 0.36, 1) 250ms forwards;
}

/* Form contents fade up subtly after the card settles, so the form looks like
   it's "populating" rather than appearing pre-filled inside an empty card. */
.sc-hero .sc-hero__form-header,
.sc-hero .sc-hero__form > * {
    opacity: 0;
    transform: translateY(10px);
    animation: scHeroFadeUp 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sc-hero .sc-hero__form-icon {
    opacity: 0;
    animation: scHeroIconFadeIn 500ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
}
.sc-hero .sc-hero__form-header          { animation-delay: 670ms; }
.sc-hero .sc-hero__form > *:nth-child(1) { animation-delay: 730ms; }
.sc-hero .sc-hero__form > *:nth-child(2) { animation-delay: 770ms; }
.sc-hero .sc-hero__form > *:nth-child(3) { animation-delay: 810ms; }
.sc-hero .sc-hero__form > *:nth-child(4) { animation-delay: 850ms; }
.sc-hero .sc-hero__form > *:nth-child(5) { animation-delay: 890ms; }
.sc-hero .sc-hero__form > *:nth-child(6) { animation-delay: 930ms; }
.sc-hero .sc-hero__form > *:nth-child(7) { animation-delay: 970ms; }

@keyframes scHeroGhost {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 0.04; transform: scale(1); }
}
@keyframes scHeroLabelLine {
    from { width: 0; }
    to   { width: 40px; }
}
@keyframes scHeroLabelText {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scHeroLineRise {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
}
@keyframes scHeroBrush {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes scHeroFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scHeroCardLift {
    from { opacity: 0; transform: translateY(40px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scHeroIconFadeIn {
    from { opacity: 0; transform: translate(-50%, calc(-30% + 10px)); }
    to   { opacity: 1; transform: translate(-50%, -30%); }
}

@media (prefers-reduced-motion: reduce) {
    .sc-hero__ghost,
    .sc-hero__label-line,
    .sc-hero__label,
    .sc-hero__title-inner,
    .sc-hero__title-script::after,
    .sc-hero__subtitle,
    .sc-hero__cta,
    .sc-hero .sc-hero__form-card,
    .sc-hero .sc-hero__form-icon,
    .sc-hero .sc-hero__form-header,
    .sc-hero .sc-hero__form > * {
        animation: none;
    }
    .sc-hero__ghost                { opacity: 0.04; transform: none; }
    .sc-hero__label-line           { width: 40px; }
    .sc-hero__label                { opacity: 1; transform: none; }
    .sc-hero__title-inner          { transform: none; }
    .sc-hero__title-script::after  { transform: scaleX(1); }
    .sc-hero__subtitle             { opacity: 1; transform: none; }
    .sc-hero__cta                  { opacity: 1; transform: none; }
    .sc-hero .sc-hero__form-card   { opacity: 1; transform: none; }
    .sc-hero .sc-hero__form-icon   { opacity: 1; transform: translate(-50%, -30%); }
    .sc-hero .sc-hero__form-header,
    .sc-hero .sc-hero__form > *    { opacity: 1; transform: none; }
}

/* ============================================
   2. STATS STRIP
   ============================================ */
.sc-stats {
    background: var(--color-navy);
    padding: clamp(40px, 5vw, 64px) 0;
}

.sc-stats__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 4vw, 64px);
    flex-wrap: wrap;
}

.sc-stats__item {
    text-align: center;
    flex: 1;
    min-width: 140px;
}

.sc-stats__number {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-pure-white);
    line-height: 1;
}

.sc-stats__suffix {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 300;
    color: var(--color-pure-white);
    opacity: 0.6;
}

.sc-stats__label {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: var(--space-2);
}

.sc-stats__divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================
   3. IMPORTANT POLICIES — Blueprint Cards
   ============================================ */
.sc-policies {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #F5F5F5;
}

.sc-policies__header {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    margin-bottom: clamp(48px, 6vw, 80px);
}

.sc-policies__label-line {
    display: block;
    width: 40px; height: 2px;
    background: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

.sc-policies__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.sc-policies__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-width: 600px;
}

.sc-policies__grid {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 32px);
}

.sc-policies__card {
    position: relative;
    background: #1a1814;
    border-radius: clamp(16px, 2vw, 28px);
    padding: clamp(40px, 4vw, 64px);
    padding-bottom: clamp(96px, 9vw, 130px);
    overflow: hidden;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

.sc-policies__card-grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.sc-policies__card-corners { position: absolute; inset: 0; pointer-events: none; }
.sc-policies__corner { position: absolute; width: 20px; height: 20px; }
.sc-policies__corner::before,
.sc-policies__corner::after {
    content: ''; position: absolute; background: rgba(255, 255, 255, 0.25);
}
.sc-policies__corner::before { width: 1px; height: 100%; }
.sc-policies__corner::after { width: 100%; height: 1px; }
.sc-policies__corner--tl { top: 16px; left: 16px; }
.sc-policies__corner--tl::before { left: 0; top: 0; }
.sc-policies__corner--tl::after { left: 0; top: 0; }
.sc-policies__corner--tr { top: 16px; right: 16px; }
.sc-policies__corner--tr::before { right: 0; top: 0; }
.sc-policies__corner--tr::after { right: 0; top: 0; }
.sc-policies__corner--bl { bottom: 16px; left: 16px; }
.sc-policies__corner--bl::before { left: 0; bottom: 0; }
.sc-policies__corner--bl::after { left: 0; bottom: 0; }
.sc-policies__corner--br { bottom: 16px; right: 16px; }
.sc-policies__corner--br::before { right: 0; bottom: 0; }
.sc-policies__corner--br::after { right: 0; bottom: 0; }

.sc-policies__card-content {
    position: relative; z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sc-policies__card-code {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 600;
    color: var(--color-pure-white);
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: var(--space-5);
}

.sc-policies__card-title {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 500;
    color: var(--color-pure-white);
    line-height: 1.3;
    margin-bottom: var(--space-4);
}

.sc-policies__card-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 400px;
}

.sc-policies__card-list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sc-policies__card-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
    max-width: 420px;
}

.sc-policies__card-list i {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.25em;
}

.sc-policies__card-arrow {
    position: absolute;
    bottom: clamp(28px, 3vw, 44px);
    right:  clamp(28px, 3vw, 44px);
    width: clamp(52px, 5vw, 64px);
    height: clamp(52px, 5vw, 64px);
    border-radius: 50%;
    background: var(--color-pure-white);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    text-decoration: none;
    z-index: 2;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.sc-policies__card-arrow:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ============================================
   4. IN OUR HOUSE — Workplace Philosophy
   ============================================ */
.sc-house {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #fafaf8;
}

.sc-house__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
}

.sc-house__header {
    max-width: 880px;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.sc-house__label-line {
    display: block;
    width: 40px; height: 2px;
    background: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

.sc-house__heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-text-primary);
    letter-spacing: -1px;
    margin-bottom: var(--space-5);
}

.sc-house__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-secondary);
    max-width: 720px;
}

.sc-house__feature {
    position: relative;
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
    aspect-ratio: 16 / 8;
    margin: 0 0 clamp(56px, 7vw, 96px);
}

.sc-house__feature-img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.sc-house__feature-frame { position: absolute; inset: 0; pointer-events: none; }
.sc-house__feature-corner {
    position: absolute;
    width: 40px; height: 40px;
}
.sc-house__feature-corner::before,
.sc-house__feature-corner::after {
    content: ''; position: absolute;
    background: rgba(255, 255, 255, 0.5);
}
.sc-house__feature-corner::before { width: 1px; height: 100%; }
.sc-house__feature-corner::after { width: 100%; height: 1px; }
.sc-house__feature-corner--tl { top: 20px; left: 20px; }
.sc-house__feature-corner--tl::before { left: 0; }
.sc-house__feature-corner--tl::after { top: 0; }
.sc-house__feature-corner--br { bottom: 20px; right: 20px; }
.sc-house__feature-corner--br::before { right: 0; }
.sc-house__feature-corner--br::after { bottom: 0; }

.sc-house__pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 56px);
}

.sc-house__pillar {
    padding-top: clamp(28px, 3.5vw, 44px);
    border-top: 3px solid rgba(0, 0, 0, 0.12);
}

.sc-house__pillar-num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.18em;
    margin-bottom: var(--space-4);
}

/* Typography mirrors .project-detail__breakdown-item-title/text — bold heading,
   20/28 body. Source: assets/css/project-detail.css "From concept to completion". */
.sc-house__pillar-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    margin-bottom: clamp(12px, 1.5vw, 20px);
}

.sc-house__pillar-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: var(--font-regular);
    line-height: 1.4;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .sc-house__pillars {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .sc-house__pillar + .sc-house__pillar {
        margin-top: var(--space-6);
    }
}

/* ============================================
   6. PREQUALIFICATION — Split Accordion
   ============================================ */
.sc-prequalify {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #F5F5F5;
}

.sc-prequalify__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(48px, 6vw, 100px);
}

.sc-prequalify__sticky {
    position: sticky;
    top: 120px;
}

.sc-prequalify__label-line {
    display: block;
    width: 40px; height: 2px;
    background: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

.sc-prequalify__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.sc-prequalify__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 400px;
    margin-bottom: var(--space-8);
}

.sc-prequalify__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
}

.sc-prequalify__cta:hover {
    background: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.sc-prequalify__cta-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

/* Accordion shared */
.sc-accordion {
    border-bottom: 1px solid rgba(10, 17, 25, 0.1);
}

.sc-accordion__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: clamp(20px, 2.5vw, 28px) 0;
    background: none; border: none; cursor: pointer;
    text-align: left;
}

.sc-accordion__number {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    font-weight: 300;
    color: var(--color-text-secondary);
    opacity: 0.4;
    min-width: 32px;
}

.sc-accordion__trigger-text {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.sc-accordion__icon {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    transition: transform var(--duration-base) var(--ease-out);
}

.sc-accordion__trigger[aria-expanded="true"] .sc-accordion__icon {
    transform: rotate(45deg);
}

.sc-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}

.sc-accordion__trigger[aria-expanded="true"] + .sc-accordion__body {
    max-height: 800px;
    padding-bottom: var(--space-8);
}

.sc-accordion__body p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 600px;
    padding-left: 48px;
}

.sc-accordion__list {
    list-style: none;
    padding: 0 0 0 48px;
    counter-reset: acc-item;
}

.sc-accordion__list li {
    counter-increment: acc-item;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    padding: var(--space-2) 0;
    padding-left: 32px;
    position: relative;
}

.sc-accordion__list li::before {
    content: counter(acc-item, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    opacity: 0.4;
    letter-spacing: 0.05em;
}

/* ============================================
   7. HELPFUL LINKS — Grid
   ============================================ */
.sc-links {
    padding: clamp(80px, 10vw, 120px) 0;
    background: #fafaf8;
}

.sc-links__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
}

.sc-links__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.sc-links__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: clamp(32px, 4vw, 56px);
}

.sc-links__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
}

.sc-links__card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 32px);
    background: #fff;
    border: 1.5px solid rgba(10, 17, 25, 0.08);
    border-radius: clamp(12px, 1.5vw, 20px);
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
}

.sc-links__card:hover {
    border-color: rgba(10, 17, 25, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.sc-links__card-icon {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.sc-links__card-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    flex: 1;
}

.sc-links__card-arrow {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    opacity: 0;
    transform: translateX(-4px);
    transition: all var(--duration-base) var(--ease-out);
}

.sc-links__card:hover .sc-links__card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   8. SUPPLIER DIVERSITY — Split CTA
   ============================================ */
.sc-supplier {
    padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px);
    background: #fafaf8;
}

.sc-supplier__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 32px);
    align-items: stretch;
}

.sc-supplier__card {
    position: relative;
    background: #1a1814;
    border-radius: clamp(16px, 2vw, 28px);
    padding: clamp(48px, 5vw, 72px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sc-supplier__card-grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.sc-supplier__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-pure-white);
    margin-bottom: var(--space-6);
    position: relative; z-index: 1;
}

.sc-supplier__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 420px;
    margin-bottom: var(--space-8);
    position: relative; z-index: 1;
}

.sc-supplier__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: var(--color-pure-white);
    border-radius: 50%;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
    position: relative; z-index: 1;
}

.sc-supplier__cta:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.sc-supplier__image-wrap {
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
}

.sc-supplier__image {
    width: 100%; height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* ============================================
   9. SECTION DIVIDER
   ============================================ */
.sc-divider {
    padding: clamp(24px, 3vw, 40px) 0;
    background: #F5F5F5;
}

.sc-divider__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.sc-divider__line {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        rgba(10, 17, 25, 0.15) 0,
        rgba(10, 17, 25, 0.15) 4px,
        transparent 4px,
        transparent 8px
    );
}

.sc-divider__label {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.5;
    white-space: nowrap;
}

/* ============================================
   10. GET PAID — Large Typography
   ============================================ */
.sc-getpaid {
    padding: clamp(100px, 12vw, 180px) 0 clamp(60px, 8vw, 100px);
    background: #F5F5F5;
}

.sc-getpaid__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
}

.sc-getpaid__title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -2px;
    color: var(--color-text-primary);
    margin-bottom: var(--space-8);
}

.sc-getpaid__title em {
    font-family: 'Dancing Script', cursive;
    font-style: normal;
    font-weight: 700;
}

.sc-getpaid__subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 700px;
}

/* ============================================
   11. FEATURES — Split (List + Video)
   ============================================ */
.sc-features {
    padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
    background: #F5F5F5;
}

.sc-features__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(48px, 6vw, 100px);
    align-items: center;
}

.sc-features__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: var(--space-8);
}

.sc-features__list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-10);
}

.sc-features__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.sc-features__check {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.sc-features__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);
}

.sc-features__cta:hover {
    background: #333;
}

.sc-features__cta-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.sc-features__video-wrap {
    position: relative;
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.sc-features__video-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
}

.sc-features__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    border: none; cursor: pointer;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    color: var(--color-text-primary);
    transition: all var(--duration-base) var(--ease-out);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sc-features__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* ============================================
   12. EDITORIAL — Smarter Way Split
   ============================================ */
.sc-editorial {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #fafaf8;
}

.sc-editorial__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(48px, 6vw, 100px);
    align-items: center;
}

.sc-editorial__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
    letter-spacing: -0.5px;
}

.sc-editorial__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.sc-editorial__note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(10, 17, 25, 0.08);
}

.sc-editorial__visual {
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.sc-editorial__image {
    width: 100%; height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* ============================================
   13. 3-STEP PROCESS
   ============================================ */
.sc-steps {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #F5F5F5;
}

.sc-steps__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 1.6vw, 28px);
}

/* Sliding-pill aesthetic (matches .co-about__indicator + map popup + project cards):
   white bg, soft warm border, 18px radius, soft elevated shadow,
   house motion curve on hover lift. */
.sc-steps__step {
    flex: 1;
    text-align: center;
    padding: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px);
    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);
}

.sc-steps__step: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);
}

.sc-steps__number {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 300;
    color: var(--color-text-primary);
    opacity: 0.08;
    line-height: 1;
    margin-bottom: var(--space-4);
}

.sc-steps__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 144px; height: 144px;
    border-radius: 50%;
    background: var(--color-text-primary);
    color: var(--color-pure-white);
    font-size: 3.6rem;
    margin-bottom: var(--space-4);
}

.sc-steps__title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.sc-steps__desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 280px;
    margin: 0 auto;
}

.sc-steps__connector {
    width: 1px;
    align-self: stretch;
    min-height: 200px;
    background: repeating-linear-gradient(
        180deg,
        rgba(10, 17, 25, 0.12) 0,
        rgba(10, 17, 25, 0.12) 4px,
        transparent 4px,
        transparent 8px
    );
    margin-top: 48px;
}

/* ============================================
   14. BENEFITS — Nested Circle Chart
   ============================================ */
.sc-benefits {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #0D0D0D;
}

.sc-benefits__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
}

.sc-benefits__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
}

.sc-benefits__intro {
    align-self: center;
}

.sc-benefits__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.5px;
}

.sc-benefits__chart {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    justify-self: center;
}

.sc-benefits__ring {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) scale(0.94);
    opacity: 0;
    border: none;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: opacity 520ms cubic-bezier(0.4, 0, 0.1, 1),
                transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                filter var(--duration-base) var(--ease-out);
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    clip-path: circle(50%);
}

.sc-benefits__chart.is-revealed .sc-benefits__ring {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.sc-benefits__chart.is-revealed .sc-benefits__ring--1 { transition-delay: 0ms,   0ms,   0ms; }
.sc-benefits__chart.is-revealed .sc-benefits__ring--2 { transition-delay: 110ms, 110ms, 0ms; }
.sc-benefits__chart.is-revealed .sc-benefits__ring--3 { transition-delay: 220ms, 220ms, 0ms; }
.sc-benefits__chart.is-revealed .sc-benefits__ring--4 { transition-delay: 330ms, 330ms, 0ms; }

.sc-benefits__ring:hover {
    filter: brightness(1.15);
}

.sc-benefits__ring-icon-minus { display: none; }
.sc-benefits__ring--active .sc-benefits__ring-icon-plus { display: none; }
.sc-benefits__ring--active .sc-benefits__ring-icon-minus { display: inline-flex; }

/* Sliding indicator — single morphing element that tracks the active ring */
.sc-benefits__indicator {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 4px solid #ffffff;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    width: 0;
    z-index: 5;
    transition: width 520ms cubic-bezier(0.4, 0, 0.1, 1),
                opacity 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.sc-benefits__indicator--visible {
    opacity: 1;
}

/* Sizes & per-layer colors — outermost (--1) darkest, innermost (--4) lightest */
.sc-benefits__ring--1 { width: 100%; z-index: 1; background: #141312; }
.sc-benefits__ring--2 { width: 76%;  z-index: 2; background: #1C1B1B; }
.sc-benefits__ring--3 { width: 54%;  z-index: 3; background: #32302F; }
.sc-benefits__ring--4 { width: 32%;  z-index: 4; background: #4C4846; }

.sc-benefits__ring-label {
    position: absolute;
    right: clamp(14px, 2vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
}

.sc-benefits__ring-label i {
    font-size: 1.75em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
}

.sc-benefits__ring--4 .sc-benefits__ring-label {
    right: clamp(8px, 1.2vw, 16px);
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
}

.sc-benefits__panel {
    color: #fff;
    transition: opacity var(--duration-base) var(--ease-out);
}

.sc-benefits__panel--fading {
    opacity: 0;
}

.sc-benefits__panel-num {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: var(--space-5);
}

.sc-benefits__panel-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.5px;
    margin-bottom: var(--space-5);
}

.sc-benefits__panel-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
    max-width: 480px;
}

@media (max-width: 1100px) {
    .sc-benefits__layout {
        grid-template-columns: 1fr;
        gap: clamp(32px, 5vw, 56px);
        justify-items: center;
        text-align: center;
    }
    .sc-benefits__heading {
        max-width: 600px;
    }
    .sc-benefits__chart {
        max-width: 440px;
    }
    .sc-benefits__panel {
        max-width: 520px;
    }
    .sc-benefits__panel-desc {
        margin: 0 auto;
    }
}

/* ============================================
   15. TESTIMONIALS — Quote Cards
   ============================================ */
.sc-testimonials {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #F5F5F5;
}

.sc-testimonials__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
}

.sc-testimonials__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: clamp(40px, 5vw, 64px);
}

.sc-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

.sc-testimonials__card {
    position: relative;
    background: #fff;
    border: 1.5px solid rgba(10, 17, 25, 0.06);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(32px, 3.5vw, 48px);
    display: flex;
    flex-direction: column;
}

.sc-testimonials__quote-mark {
    font-family: var(--font-heading);
    font-size: clamp(9rem, 12vw, 15rem);
    font-weight: 700;
    color: var(--color-text-primary);
    opacity: 0.06;
    line-height: 1;
    text-align: center;
    margin-bottom: var(--space-2);
}

.sc-testimonials__quote {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--space-8);
}

.sc-testimonials__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-testimonials__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.sc-testimonials__role {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.sc-testimonials__stamp {
    position: absolute;
    bottom: 16px; right: 16px;
    display: flex; gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(10, 17, 25, 0.15);
}

/* ============================================
   16. PARTNER — Split with Image
   ============================================ */
.sc-partner {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #3D2E1D;
}

.sc-partner__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(48px, 6vw, 100px);
    align-items: center;
}

.sc-partner__image-wrap {
    border-radius: clamp(16px, 2vw, 28px);
    overflow: hidden;
}

.sc-partner__image {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
}

.sc-partner__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-6);
}

.sc-partner__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-on-dark-muted);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.sc-partner__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-on-dark);
    text-decoration: none;
    transition: gap var(--duration-base) var(--ease-out);
}

.sc-partner__cta:hover {
    gap: var(--space-3);
}

/* ============================================
   17. FAQ — Split Accordion
   ============================================ */
.sc-faq-wrap {
    position: relative;
    background-color: #1a1814;
    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;
}

.sc-faq {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #F5F5F5;
}

.sc-faq__inner {
    max-width: 1100px;
    margin: 0 auto;
    /* Reduced floor (was 24) and tightened gap (was 6vw) so the FAQ
       doesn't shrink-wrap as aggressively on narrow viewports. The
       existing @media(max-width:1023px) block further down already
       stacks the grid to a single column for tablets and below. */
    padding: 0 clamp(16px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(40px, 5vw, 100px);
}

.sc-faq__sticky {
    position: sticky;
    top: 120px;
}

.sc-faq__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.sc-faq__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ============================================
   18. BOTTOM CTA — Dark Banner
   ============================================ */
.sc-bottom-cta {
    position: relative;
    background: #1a1814;
    padding: clamp(80px, 10vw, 140px) 0;
    overflow: hidden;
}

.sc-bottom-cta__grid-bg {
    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;
}

/* ============================================
   19. CONTACT / APPLY — Form Section
   ============================================ */
.sc-contact {
    padding: clamp(80px, 10vw, 140px) 0;
    background: #fafaf8;
}

/* Dark variant — used on subcontractor page so the bottom of the page has visual weight.
   Sibling .sc-bottom-grid below provides the white-background gap with continuing grid. */
.sc-contact--dark {
    position: relative;
    background: #121212;
    overflow: hidden;
}

/* White spacer below the dark section — same 40×40 grid as above, drawn in dark on white
   so the grid visually carries over from the dark band into the gap before the footer. */
.sc-bottom-grid {
    height: clamp(60px, 8vw, 120px);
    background-color: var(--color-pure-white, #ffffff);
    background-image:
        linear-gradient(rgba(10, 17, 25, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 17, 25, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
}

.sc-contact--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.sc-contact--dark .sc-contact__inner {
    position: relative;
    z-index: 1;
}

.sc-contact--dark .sc-contact__heading,
.sc-contact--dark .sc-contact__info-value {
    color: var(--color-pure-white);
}

.sc-contact--dark .sc-contact__desc,
.sc-contact--dark .sc-contact__info-icon {
    color: rgba(255, 255, 255, 0.7);
}

.sc-contact--dark .sc-contact__info-label {
    color: rgba(255, 255, 255, 0.5);
}

.sc-contact--dark .sc-contact__info-value:hover {
    color: var(--color-orange);
}

.sc-contact__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(48px, 6vw, 100px);
    align-items: start;
}

.sc-contact__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.sc-contact__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-10);
}

.sc-contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.sc-contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.sc-contact__info-icon {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.sc-contact__info-label {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.6;
    margin-bottom: 2px;
}

.sc-contact__info-value {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
}

.sc-contact__info-value:hover {
    text-decoration: underline;
}

/* When the shared prequalification form (sc-prequalify-form-loader.js)
   is rendered in the bottom contact column, give it top breathing room
   so the form card's overhanging hard-hat icon clears the heading/info
   block above it (in single-column mobile layout especially). */
.sc-contact__right > .sc-hero__form-card {
    margin-top: clamp(40px, 5vw, 60px);
}

/* Form */
.sc-contact__form {
    background: #fff;
    border: 1.5px solid rgba(10, 17, 25, 0.06);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(32px, 4vw, 48px);
}

.sc-contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(12px, 1.5vw, 20px);
    min-width: 0;
}

/* `min-width: 0` is critical — without it, grid items default to
   `min-width: auto` (their content's min-content), and the
   `<select>` inside one of the form groups has options like
   "Experienced Professionals" whose content width (~220px) was
   forcing every form group — and the form row, and the form, and
   every parent up the chain — wider than the viewport on narrow
   phones. With `min-width: 0` here and on the inputs/select/textarea
   themselves, the row can shrink as small as the viewport allows. */
.sc-contact__form-group {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.sc-contact__form-group--full {
    margin-bottom: clamp(20px, 2.5vw, 28px);
}

.sc-contact__form-group input,
.sc-contact__form-group textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 16px 16px 8px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: rgba(10, 17, 25, 0.03);
    border: 1.5px solid rgba(10, 17, 25, 0.08);
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--duration-base) var(--ease-out);
}

.sc-contact__form-group input:focus,
.sc-contact__form-group textarea:focus {
    border-color: rgba(10, 17, 25, 0.25);
}

.sc-contact__form-group label {
    position: absolute;
    top: 12px; left: 16px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    opacity: 0.6;
    pointer-events: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.sc-contact__form-group input:focus + label,
.sc-contact__form-group input:not(:placeholder-shown) + label,
.sc-contact__form-group textarea:focus + label,
.sc-contact__form-group textarea:not(:placeholder-shown) + label {
    top: 4px;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

.sc-contact__form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.sc-contact__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-pure-white);
    background: var(--color-text-primary);
    padding: 14px 40px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
}

.sc-contact__submit:hover {
    background: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1023px) {
    .sc-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
    .sc-hero__ghost { font-size: clamp(4rem, 15vw, 8rem); }
    .sc-hero__portrait-wrap { max-width: 500px; }
    .sc-policies__grid { grid-template-columns: 1fr; }
    .sc-prequalify__inner { grid-template-columns: 1fr; }
    .sc-prequalify__sticky { position: static; }
    .sc-features__inner { grid-template-columns: 1fr; }
    .sc-editorial__inner { grid-template-columns: 1fr; }
    .sc-editorial__visual { order: -1; }
    .sc-benefits__grid { grid-template-columns: repeat(2, 1fr); }
    .sc-testimonials__grid { grid-template-columns: 1fr; max-width: 600px; }
    .sc-partner__inner { grid-template-columns: 1fr; }
    .sc-faq__inner { grid-template-columns: 1fr; }
    .sc-faq__sticky { position: static; }
    .sc-supplier__inner { grid-template-columns: 1fr; }
    .sc-contact__inner { grid-template-columns: 1fr; }
    .sc-links__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .sc-stats__inner { flex-direction: column; gap: var(--space-6); }
    .sc-stats__divider { width: 60px; height: 1px; }

    /* FAQ on mobile — the inner's 4vw padding plus the accordion body's
       desktop 48px left indent (meant to visually offset body text from
       a leading number on wider layouts) steals far too much horizontal
       width on phones, so questions wrap awkwardly and the answers feel
       boxed in. Tighten inner padding and drop the body indent. */
    .sc-faq__inner {
        padding: 0 16px;
    }
    .sc-accordion__body p {
        padding-left: 0;
    }
    .sc-accordion__trigger-text {
        /* Allow flex item to shrink below its content min-width so long
           questions wrap on each word rather than blowing out the row. */
        min-width: 0;
        word-wrap: break-word;
    }

    /* ============================================================
       3-STEP PARTNERSHIP — Mobile redesign
       ------------------------------------------------------------
       Replaces the previous "three boring stacked cards" mobile
       layout with a composite hero unit:
         (1) all three step icons hoisted out of their cards and
             overlapped into a single "triple bubble" cluster at
             the top of the section (one visual element instead
             of three repeated chrome blocks);
         (2) each step title rendered as a -45° tilted stamp chip
             anchored to its bubble — diagonal labels read like
             postage stamps pinned to the cluster;
         (3) descriptions live in a clean numbered column below
             the cluster, with a thin accent bar and the big
             01/02/03 numeral as the typographic anchor.
       ============================================================ */
    .sc-steps {
        padding: clamp(56px, 9vw, 96px) 0 clamp(48px, 8vw, 80px);
        overflow: hidden; /* contain the rotated stamp chips */
    }

    .sc-steps__inner {
        position: relative;
        flex-direction: column;
        gap: 0;
        /* Top padding reserves space for the bubble cluster + horizontal
           title labels. Outer chips sit ABOVE bubbles 1 and 3, middle
           chip sits BELOW the dipped bubble 2. Horizontal (non-rotated)
           chips need only ~26px of vertical space each, so the cluster
           zone is much shorter than the previous slanted-stamp version. */
        padding: 210px 20px 0;
    }

    /* Vertical seam dropping from the middle chip into the description
       column — visually ties the hero composite to the numbered list. */
    .sc-steps__inner::before {
        content: '';
        position: absolute;
        top: 196px;
        left: 50%;
        width: 1px;
        height: 12px;
        background: linear-gradient(180deg,
            rgba(10, 17, 25, 0.35) 0%,
            rgba(10, 17, 25, 0) 100%);
    }

    /* Each step shifts from "card" to "row in a list" — number on the
       left, description on the right, hair-thin divider between. */
    .sc-steps__step {
        position: static;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: var(--space-4);
        align-items: start;
        text-align: left;
        padding: var(--space-5) 0;
        background: transparent;
        border: 0;
        border-top: 1px solid rgba(10, 17, 25, 0.08);
        border-radius: 0;
        box-shadow: none;
    }

    .sc-steps__inner > .sc-steps__step:nth-child(1) {
        border-top: 0;
    }

    .sc-steps__step:hover {
        transform: none;
        box-shadow: none;
    }

    /* === Triple bubble cluster === Each .sc-steps__check is yanked
       out of its parent card and absolute-positioned into the top
       zone of .sc-steps__inner. Three 92px circles overlap
       horizontally to read as a single composite "triple bubble"
       icon — the section's hero visual. The middle bubble dips
       down ~20px to create a soft triangular silhouette. Cards
       are at :nth-child(1, 3, 5) because dotted connectors sit
       between them. Bubble top:46/66 leaves ~36px of vertical
       headroom above the outer bubbles for horizontal chip labels. */
    .sc-steps__check {
        position: absolute;
        top: 46px;
        width: 92px;
        height: 92px;
        font-size: 2.2rem;
        margin: 0;
        border: 3px solid var(--color-pure-white);
        box-shadow: 0 22px 44px -18px rgba(10, 17, 25, 0.45),
                    0 4px 10px rgba(10, 17, 25, 0.08);
    }

    .sc-steps__inner > .sc-steps__step:nth-child(1) .sc-steps__check {
        left: calc(50% - 118px);
        background: var(--color-text-primary);
        z-index: 3;
    }

    .sc-steps__inner > .sc-steps__step:nth-child(3) .sc-steps__check {
        left: calc(50% - 46px);
        top: 66px; /* dip the middle bubble to create the triangle silhouette */
        background: #4a4948;
        z-index: 2;
    }

    .sc-steps__inner > .sc-steps__step:nth-child(5) .sc-steps__check {
        left: calc(50% + 26px);
        background: var(--color-text-primary);
        z-index: 1;
    }

    /* === Horizontal title chips === Each title is hoisted out of
       its card and centered horizontally on its bubble's center x.
       Outer chips (1 + 3) sit ABOVE the top-middle of their bubble;
       middle chip (2) sits BELOW the bottom-middle of the dipped
       bubble. translate(-50%, -50%) makes (left, top) the chip's
       geometric center so positioning is symmetric — no rotation,
       chips read horizontally as clean pill-shaped step labels. */
    .sc-steps__title {
        position: absolute;
        margin: 0;
        padding: 6px 12px;
        min-width: 86px;
        background: var(--color-text-primary);
        color: var(--color-pure-white);
        font-family: var(--font-heading);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        line-height: 1;
        text-align: center;
        border-radius: 4px;
        white-space: nowrap;
        transform: translate(-50%, -50%);
        box-shadow: 0 8px 18px -8px rgba(10, 17, 25, 0.5);
    }

    /* Bubble 1 (left): chip sits ABOVE top-middle of bubble.
       left = bubble1 center x (50% - 72px); top: 23 puts chip
       center ~10px above bubble's top edge (y=46). */
    .sc-steps__inner > .sc-steps__step:nth-child(1) .sc-steps__title {
        left: calc(50% - 72px);
        top: 23px;
    }

    /* Bubble 2 (middle, dipped): chip sits BELOW bottom-middle.
       left = bubble2 center x (50%); top: 181 puts chip center
       ~10px below bubble's bottom edge (y=158). */
    .sc-steps__inner > .sc-steps__step:nth-child(3) .sc-steps__title {
        left: 50%;
        top: 181px;
        background: var(--color-orange); /* warm accent on the middle chip */
    }

    /* Bubble 3 (right): chip sits ABOVE top-middle of bubble.
       left = bubble3 center x (50% + 72px); top matches chip 1. */
    .sc-steps__inner > .sc-steps__step:nth-child(5) .sc-steps__title {
        left: calc(50% + 72px);
        top: 23px;
    }

    /* Big decorative numbers move into the description row as the
       typographic anchor. 01 / 02 / 03 read as the list spine. */
    .sc-steps__number {
        display: block;
        grid-column: 1;
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        opacity: 0.22;
        margin: 0;
        padding-top: 2px;
    }

    .sc-steps__desc {
        grid-column: 2;
        font-size: 0.92rem;
        line-height: 1.55;
        max-width: 100%;
        margin: 0;
        color: var(--color-text-primary);
        opacity: 0.78;
    }

    .sc-steps__connector {
        display: none;
    }
    .sc-benefits__grid { grid-template-columns: 1fr; }
    .sc-links__grid { grid-template-columns: 1fr; }
    .sc-contact__form-row { grid-template-columns: 1fr; }
    .sc-hero__portrait-wrap { aspect-ratio: 3 / 4; }

    /* Contact form mobile compression — the default `.sc-contact` layout
       reserves ~112px of horizontal chrome on phones (24px outer × 2 +
       32px form-padding × 2), which left every input visibly cramped
       and the form overflowing on narrow viewports. Tighten everything. */
    .sc-contact {
        padding: clamp(48px, 8vw, 80px) 0;
    }

    .sc-contact__inner {
        padding: 0 var(--space-3);
        gap: var(--space-8);
    }

    .sc-contact__form {
        padding: var(--space-3);
        border-radius: 14px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sc-contact__form-row {
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }

    /* 16px input font prevents iOS Safari from auto-zooming on focus */
    .sc-contact__form-group input,
    .sc-contact__form-group textarea,
    .sc-contact__form-group select {
        font-size: 16px;
        padding: 14px 14px 6px;
    }

    .sc-contact__form-group select {
        padding-right: 36px;
        background-position: right 12px center;
    }

    .sc-contact__form-group label {
        left: 14px;
        font-size: 14px;
    }

    .sc-contact__heading {
        font-size: 1.75rem;
    }

    .sc-contact__desc {
        margin-bottom: var(--space-6);
    }

    .sc-contact__submit {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    .form-file__label {
        padding: 12px 14px;
    }

    /* Belt-and-suspenders: every element inside .sc-contact must be
       allowed to shrink below its min-content. Without this, a single
       offender (a `<select>` option, a nowrap label, an email address)
       was holding the entire section's width hostage. */
    .sc-contact,
    .sc-contact *,
    .sc-contact *::before,
    .sc-contact *::after {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sc-contact {
        overflow-x: hidden;
    }

    /* Hero prequalification form — same edge-to-edge mobile treatment.
       Tighten the hero's outer container padding and the form card's
       horizontal padding so inputs get the maximum width. Keep the
       large top padding intact for the overlapping icon. */
    .sc-hero__inner {
        padding: 0 var(--space-3);
    }

    .sc-hero__form-card {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .sc-hero__form-row {
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .sc-hero__form-group input,
    .sc-hero__form-group select {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .sc-hero { padding-top: 120px; }
    /* The previous override here shrank the title (2rem / 1.6rem) on
       small phones, which is the opposite of what reads well — the
       hero became weak. Removed those font-size declarations so the
       base clamp (3rem / 2.4rem floors) carries through to phones. */
}


/* ====================================================================
   .sf-reveal — Mobile-only "read more" disclosure component
   Same shared pattern as the safety / sustainability / cert pages.
   Black-circle + button collapses long body paragraphs on mobile,
   hidden entirely on desktop where everything renders inline.
   ==================================================================== */
@media (max-width: 900px) {
    .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;
    }
    .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);
    }
}

@media (min-width: 901px) {
    .sf-reveal__btn { display: none; }
    .sf-reveal__panel { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-reveal__btn,
    .sf-reveal__icon,
    .sf-reveal__panel {
        transition: none !important;
    }
}