/* ── HERO ──────────────────────────────────────────────────── */
.sp-hero {
    position:        relative;
    height:          80vh;
    min-height:      520px;
    max-height:      780px;
    display:         flex;
    align-items:     center;
    overflow:        hidden;
}
.sp-hero-img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 55%;
    filter:          brightness(.45) contrast(1.08);
    animation:       spZoom 14s ease-out forwards;
}
@keyframes spZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1.0); }
}
.sp-hero::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
    z-index:    1;
}
.sp-hero-content {
    position:   relative;
    z-index:    2;
    max-width:  var(--max-w);
    margin:     0 auto;
    padding:    0 var(--pad-x);
    width:      100%;
    animation:  spFade 1.2s ease both .3s;
}
@keyframes spFade {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
.sp-hero-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.85);
    display:        block;
    margin-bottom:  18px;
}
.sp-hero-title {
    font-family:    var(--ff-display);
    font-size:      clamp(34px, 5.5vw, 66px);
    font-weight:    400;
    color:          #f8f4ee;
    line-height:    1.1;
    letter-spacing: .05em;
    margin-bottom:  6px;
    max-width:      680px;
}
.sp-hero-title em {
    font-style:  italic;
    font-family: var(--ff-editorial);
    font-weight: 300;
    color:       rgba(212,175,80,.9);
}
.sp-hero-rule {
    width:      48px;
    height:     2px;
    background: var(--red);
    margin:     22px 0;
}
.sp-hero-sub {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px, 1.8vw, 20px);
    font-weight:    300;
    font-style:     italic;
    color:          rgba(248,244,238,.78);
    line-height:    1.65;
    max-width:      520px;
    margin-bottom:  36px;
}
.sp-hero-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .22em;
    text-transform:  uppercase;
    color:           var(--carbon);
    background:      rgba(212,175,80,.95);
    border:          1px solid rgba(212,175,80,.95);
    padding:         15px 36px;
    text-decoration: none;
    transition:      background .2s, color .2s;
}
.sp-hero-cta:hover { background: #f5f5f0; border-color: #f5f5f0; }


/* ── WHY US STRIP ───────────────────────────────────────────── */
.sp-why {
    background:  var(--carbon);
    border-top:  3px solid var(--red);
}
.sp-why-inner {
    max-width:   var(--max-w);
    margin:      0 auto;
    padding:     0 var(--pad-x);
    display:     grid;
    grid-template-columns: repeat(3, 1fr);
}
.sp-why-item {
    padding:        clamp(28px,4vw,48px) clamp(20px,3vw,40px);
    border-right:   1px solid #1a1a1a;
    text-align:     center;
}
.sp-why-item:last-child { border-right: none; }
.sp-why-icon {
    font-size:      28px;
    line-height:    1;
    margin-bottom:  12px;
    display:        block;
    color:          rgba(212,175,80,.8);
}
.sp-why-heading {
    font-family:    var(--ff-display);
    font-size:      clamp(15px,1.6vw,18px);
    font-weight:    400;
    color:          #ccc;
    letter-spacing: .06em;
    margin-bottom:  8px;
}
.sp-why-body {
    font-family:    var(--ff-ui);
    font-size:      12px;
    color:          #555;
    line-height:    1.7;
    letter-spacing: .03em;
}


/* ── SECTION WRAPPER ────────────────────────────────────────── */
.sp-section {
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   clamp(64px,8vw,100px) var(--pad-x);
}
.sp-section-label {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  12px;
}
.sp-section-title {
    font-family:    var(--ff-display);
    font-size:      clamp(24px,3vw,36px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .05em;
    line-height:    1.2;
    margin-bottom:  8px;
}
.sp-section-rule {
    width:      40px;
    height:     2px;
    background: var(--red);
    margin:     18px 0 32px;
}


/* ── PROCESS STEPS ─────────────────────────────────────────── */
.sp-process { background: var(--chalk); }

.sp-steps {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.sp-step {
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            clamp(32px,5vw,80px);
    align-items:    center;
    padding:        clamp(48px,6vw,80px) 0;
    border-bottom:  1px solid var(--rule);
}
.sp-step:last-child { border-bottom: none; }

/* Alternate image left/right */
.sp-step:nth-child(even) .sp-step-img { order: 2; }
.sp-step:nth-child(even) .sp-step-body { order: 1; }

.sp-step-img {
    position:       relative;
    aspect-ratio:   4/3;
    overflow:       hidden;
}
.sp-step-img img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    transition:     transform .7s ease;
}
.sp-step-img:hover img { transform: scale(1.04); }

/* Step number badge */
.sp-step-img::before {
    content:         attr(data-step);
    position:        absolute;
    top:             20px;
    left:            20px;
    z-index:         2;
    font-family:     var(--ff-display);
    font-size:       11px;
    letter-spacing:  .2em;
    color:           rgba(212,175,80,.9);
    background:      rgba(15,15,15,.72);
    padding:         6px 14px;
    text-transform:  uppercase;
}

.sp-step-body {}
.sp-step-num {
    font-family:    var(--ff-display);
    font-size:      clamp(56px,7vw,80px);
    font-weight:    400;
    color:          var(--rule);
    line-height:    1;
    display:        block;
    margin-bottom:  4px;
    letter-spacing: -.02em;
}
.sp-step-heading {
    font-family:    var(--ff-display);
    font-size:      clamp(20px,2.4vw,28px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .04em;
    line-height:    1.2;
    margin-bottom:  16px;
}
.sp-step-rule {
    width:      32px;
    height:     2px;
    background: var(--red);
    margin:     0 0 20px;
}
.sp-step-copy {
    font-family:    var(--ff-ui);
    font-size:      14px;
    color:          #666;
    line-height:    1.85;
    letter-spacing: .02em;
}
.sp-step-copy strong { color: var(--carbon); font-weight: 500; }

/* Guarantee callout box */
.sp-guarantee {
    margin-top:     24px;
    background:     var(--warm);
    border-left:    3px solid rgba(212,175,80,.7);
    padding:        16px 20px;
}
.sp-guarantee p {
    font-family:    var(--ff-editorial);
    font-size:      14px;
    font-style:     italic;
    color:          #555;
    line-height:    1.7;
    margin:         0;
}
.sp-guarantee strong { color: var(--carbon); font-style: normal; }


/* ── WHAT WE BUY ────────────────────────────────────────────── */
.sp-buy { background: var(--surface); }

.sp-buy-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   3px;
    margin-top:            8px;
}

.sp-buy-panel {
    position:    relative;
    overflow:    hidden;
    aspect-ratio: 4/3;
}
.sp-buy-panel img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    filter:      brightness(.65);
    transition:  transform .6s ease, filter .4s ease;
}
.sp-buy-panel:hover img { transform: scale(1.05); filter: brightness(.55); }
.sp-buy-panel-body {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:    28px 24px;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
}
.sp-buy-panel-tag {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.8);
    margin-bottom:  6px;
    display:        block;
}
.sp-buy-panel-title {
    font-family:    var(--ff-display);
    font-size:      clamp(18px,2.2vw,26px);
    font-weight:    400;
    color:          #f5f0e8;
    letter-spacing: .05em;
    line-height:    1.2;
}
.sp-buy-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 10px;
}
.sp-buy-chip {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(212,175,80,.75);
    border:         1px solid rgba(212,175,80,.3);
    padding:        4px 10px;
}


/* ── FAQ ────────────────────────────────────────────────────── */
.sp-faq { background: var(--warm); }
.sp-faq-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
    border-top:     1px solid var(--rule);
}
.sp-faq-item {
    border-bottom:  1px solid var(--rule);
}
.sp-faq-btn {
    width:           100%;
    background:      none;
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         22px 0;
    cursor:          pointer;
    text-align:      left;
}
.sp-faq-q {
    font-family:    var(--ff-display);
    font-size:      clamp(15px,1.6vw,18px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .02em;
    line-height:    1.3;
}
.sp-faq-arr {
    flex-shrink:  0;
    width:        20px;
    height:       20px;
    border:       1px solid var(--rule);
    display:      flex;
    align-items:  center;
    justify-content:center;
    font-size:    14px;
    color:        var(--muted);
    transition:   transform .22s ease, background .22s ease;
    line-height:  1;
}
.sp-faq-item.is-open .sp-faq-arr {
    transform:  rotate(45deg);
    background: var(--carbon);
    color:      #fff;
    border-color: var(--carbon);
}
.sp-faq-panel {
    overflow:   hidden;
    max-height: 0;
    transition: max-height .35s ease;
}
.sp-faq-panel-inner {
    padding:        0 0 24px;
    font-family:    var(--ff-ui);
    font-size:      14px;
    color:          #666;
    line-height:    1.85;
    max-width:      680px;
}
.sp-faq-panel-inner strong { color: var(--carbon); }


/* ── CONTACT CTA ────────────────────────────────────────────── */
.sp-cta {
    background:    var(--carbon);
    border-top:    3px solid var(--red);
    position:      relative;
    overflow:      hidden;
}
.sp-cta::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.01) 0px, rgba(255,255,255,.01) 1px,
        transparent 1px, transparent 44px
    );
    pointer-events: none;
}
.sp-cta-inner {
    max-width:   var(--max-w);
    margin:      0 auto;
    padding:     clamp(64px,8vw,96px) var(--pad-x);
    text-align:  center;
    position:    relative;
    z-index:     1;
}
.sp-cta-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    display:        block;
    margin-bottom:  16px;
}
.sp-cta-title {
    font-family:    var(--ff-display);
    font-size:      clamp(26px,4vw,48px);
    font-weight:    400;
    color:          #f5f5f0;
    letter-spacing: .06em;
    line-height:    1.15;
    margin-bottom:  12px;
}
.sp-cta-title em {
    font-style:  italic;
    font-family: var(--ff-editorial);
    color:       rgba(212,175,80,.85);
}
.sp-cta-rule {
    width:      40px;
    height:     1px;
    background: var(--red);
    margin:     20px auto 28px;
}
.sp-cta-copy {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px,1.6vw,19px);
    font-weight:    300;
    font-style:     italic;
    color:          #666;
    line-height:    1.7;
    max-width:      560px;
    margin:         0 auto 40px;
}
.sp-cta-actions {
    display:         flex;
    gap:             16px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   40px;
}
.sp-wa-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           #f5f5f0;
    background:      #1e4a1e;
    border:          1px solid #2a6a2a;
    padding:         15px 32px;
    text-decoration: none;
    transition:      background .2s;
}
.sp-wa-btn:hover { background: #264e26; }
.sp-email-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           #888;
    background:      transparent;
    border:          1px solid #2a2a2a;
    padding:         15px 32px;
    text-decoration: none;
    transition:      border-color .2s, color .2s;
}
.sp-email-btn:hover { border-color: #555; color: #ccc; }

.sp-cta-reassurance {
    display:    flex;
    gap:        32px;
    justify-content: center;
    flex-wrap:  wrap;
    border-top: 1px solid #1a1a1a;
    padding-top:28px;
}
.sp-cta-point {
    font-family:    var(--ff-ui);
    font-size:      11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          #333;
    display:        flex;
    align-items:    center;
    gap:            8px;
}
.sp-cta-point::before {
    content:        '✓';
    color:          rgba(212,175,80,.7);
    font-size:      13px;
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sp-why-inner { grid-template-columns: 1fr; }
    .sp-why-item  { border-right: none; border-bottom: 1px solid #1a1a1a; }
    .sp-why-item:last-child { border-bottom: none; }

    .sp-step {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: clamp(36px,5vw,56px) 0;
    }
    .sp-step:nth-child(even) .sp-step-img  { order: 0; }
    .sp-step:nth-child(even) .sp-step-body { order: 0; }

    .sp-buy-grid { grid-template-columns: 1fr; }
    .sp-buy-panel { aspect-ratio: 3/2; }
}
@media (max-width: 600px) {
    .sp-hero      { height: 70vh; }
    .sp-cta-actions { flex-direction: column; align-items: center; }
    .sp-wa-btn, .sp-email-btn { width: 100%; justify-content: center; max-width: 300px; }
    .sp-step-num  { font-size: 48px; }
}