/* =========================================================
   KUMBR Studio — Solutions v16
   White hero (About-style) · GSAP icon animations · Enhanced panels
   ========================================================= */

/* Header — starts dark on white hero, not needed since hero is white */
.header--sol .nav-logo-dark{display:block}
.header--sol .nav-logo-white{display:none}
.header--sol .menu-btn-label{color:var(--dark)}
.header--sol .menu-line{background:var(--dark)}

*{box-sizing:border-box}

/* =========================================================
   HERO — About-style, white background
   ========================================================= */
.sl-hero{
    position:relative;
    min-height:100vh;
    background:#f4f4f2;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}


.sl-hero-content{
    position:relative;z-index:2;
    text-align:center;
    padding:0 var(--pad);max-width:1100px;
    width:100%;overflow:hidden;
}

/* Eyebrow */
.sl-hero-ey{
    font-family:var(--font-body);font-size:10px;font-weight:300;
    letter-spacing:.4em;text-transform:uppercase;
    color:var(--gold);
    margin-bottom:clamp(32px,5vh,60px);
    opacity:0;
}

/* Heading */
.sl-hero-heading{display:block}
.sl-hero-line{
    display:flex;justify-content:center;align-items:baseline;
    gap:.3em;overflow:hidden;line-height:1.12;
}
.sl-word{
    display:inline-block;
    font-family:var(--font);
    font-size:clamp(36px,5.5vw,82px);
    font-weight:700;color:var(--dark);
    letter-spacing:-.04em;
    opacity:0;transform:translateY(110%);
    white-space:pre;flex-shrink:0;
}
.sl-word--gold{color:var(--gold);font-style:italic}

/* Scroll indicator */
.sl-hero-scroll{
    margin-top:clamp(40px,6vh,80px);
    display:flex;flex-direction:column;align-items:center;gap:14px;
    opacity:0;
}
.sl-scroll-line{
    width:1px;height:50px;
    background:linear-gradient(to bottom, var(--gold), transparent);
    position:relative;overflow:hidden;
}
.sl-scroll-line::after{
    content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
    background:var(--dark);
    animation:slScrollPulse 2s ease-in-out infinite;
}
@keyframes slScrollPulse{0%{top:-100%}100%{top:100%}}
.sl-scroll-text{
    font-family:var(--font-body);font-size:9px;
    letter-spacing:.25em;text-transform:uppercase;
    color:rgba(0,0,0,.25);
}

/* Floating shapes */
.sl-hero-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
.sl-shape{position:absolute;border:1px solid rgba(0,0,0,.04);border-radius:2px}
.sl-shape--1{width:120px;height:120px;top:15%;right:12%;transform:rotate(15deg)}
.sl-shape--2{width:80px;height:80px;bottom:20%;left:10%;border-radius:50%;transform:rotate(-10deg)}
.sl-shape--3{width:60px;height:120px;top:60%;right:25%;transform:rotate(35deg)}

/* =========================================================
   PANELS
   ========================================================= */
.sl-panels{position:relative;z-index:2}

.sl-panel{
    position:relative;width:100%;min-height:100vh;
    overflow:hidden;
    box-shadow:0 -30px 60px rgba(0,0,0,.4);
}

/* Panel backgrounds — explicit per section */
#brand{background:#0a0a09}
#digital{background:#f4f4f2}
#marketing{background:#f4f4f2}
#production{background:#0a0a09}
#ai{background:#f4f4f2}

/* ── SPLIT ── */
.sl-panel-split{
    display:grid;grid-template-columns:1fr 1fr;
    min-height:100vh;align-items:stretch;
}

/* ── LEFT: Icon area ── */
.sl-panel-left{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    padding:clamp(60px,8vh,100px) clamp(40px,4vw,80px);
}

/* SVG icon container */
.sl-panel-icon{
    position:relative;z-index:1;
    width:clamp(180px,16vw,280px);
    height:clamp(180px,16vw,280px);
}
.sl-panel-icon svg{width:100%;height:100%;overflow:visible}

/* Icon strokes — initial state */
.sl-icon-line{
    fill:none;stroke-width:1.2;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:600;stroke-dashoffset:600;
}
.sl-icon-dot{
    opacity:0;
    transform-origin:center;
}

/* Dark panel icons = white strokes */
.sl-panel.sl-dark .sl-icon-line{stroke:rgba(255,255,255,.25)}
.sl-panel.sl-dark .sl-icon-dot{fill:var(--gold)}
/* White panel icons = dark strokes */
.sl-panel.sl-light .sl-icon-line{stroke:rgba(0,0,0,.15)}
.sl-panel.sl-light .sl-icon-dot{fill:var(--gold)}

/* Accent glow behind icon */
.sl-icon-glow{
    position:absolute;
    width:clamp(250px,22vw,400px);height:clamp(250px,22vw,400px);
    border-radius:50%;filter:blur(80px);
    opacity:0;
    top:50%;left:50%;transform:translate(-50%,-50%);
    pointer-events:none;z-index:0;
}
.sl-panel.sl-dark .sl-icon-glow{background:rgba(var(--gold-rgb),.06)}
.sl-panel.sl-light .sl-icon-glow{background:rgba(var(--gold-rgb),.04)}

/* ── RIGHT: Content ── */
.sl-panel-right{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(60px,8vh,120px) clamp(40px,5vw,100px);
    position:relative;z-index:1;
}
.sl-panel.sl-dark .sl-panel-right{border-left:1px solid rgba(255,255,255,.04)}
.sl-panel.sl-light .sl-panel-right{border-left:1px solid rgba(0,0,0,.04)}

/* Title */
.sl-panel-title{
    font-family:var(--font);
    font-size:clamp(44px,5vw,80px);
    font-weight:700;line-height:.92;letter-spacing:-.05em;
    margin:0 0 8px;
    opacity:0;transform:translateY(40px);
}
.sl-panel-title em{font-weight:300;font-style:italic;display:block;margin-top:4px;color:var(--gold)}

.sl-panel.sl-dark .sl-panel-title{color:#fff}
.sl-panel.sl-light .sl-panel-title{color:var(--dark)}

/* Accent line */
.sl-panel-line{width:0;height:2px;background:var(--gold);margin:clamp(20px,2.5vh,32px) 0;border-radius:2px}

/* Lead */
.sl-panel-lead{
    font-family:var(--font-body);font-size:clamp(15px,1.2vw,19px);
    font-weight:300;line-height:1.75;max-width:480px;margin:0 0 12px;
    opacity:0;transform:translateY(20px);
}
.sl-panel.sl-dark .sl-panel-lead{color:rgba(255,255,255,.4)}
.sl-panel.sl-light .sl-panel-lead{color:rgba(0,0,0,.45)}

/* Body */
.sl-panel-body{
    font-family:var(--font-body);font-size:clamp(12px,.85vw,14px);
    font-weight:300;line-height:1.8;max-width:440px;margin:0 0 clamp(28px,3vh,40px);
    opacity:0;transform:translateY(16px);
}
.sl-panel.sl-dark .sl-panel-body{color:rgba(255,255,255,.15)}
.sl-panel.sl-light .sl-panel-body{color:rgba(0,0,0,.22)}

/* Tags */
.sl-panel-tags{display:flex;flex-wrap:wrap;gap:8px;opacity:0;transform:translateY(16px)}
.sl-ptag{
    font-family:var(--font-body);font-size:clamp(10px,.75vw,12px);
    font-weight:400;letter-spacing:.06em;text-transform:uppercase;
    padding:9px 18px;border-radius:100px;
    transition:all .4s var(--ease);cursor:default;
}
.sl-panel.sl-dark .sl-ptag{color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.06)}
.sl-panel.sl-light .sl-ptag{color:rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.06)}
.sl-ptag:hover{border-color:var(--gold)!important;color:var(--gold)!important;transform:translateY(-2px)!important}

/* =========================================================
   WHY KUMBR — Manifesto-style centered breaker
   ========================================================= */
.sl-why{
    position:relative;overflow:hidden;
    background:#0a0a09;
    padding:clamp(100px,16vh,200px) 0;
    box-shadow:0 -30px 60px rgba(0,0,0,.4);
}
.sl-why-inner{
    max-width:1200px;margin:0 auto;
    padding:0 var(--pad);
    text-align:center;overflow:hidden;
}

/* Manifesto text */
.sl-manifesto{margin-bottom:clamp(60px,10vh,120px)}
.sl-manifesto-line{
    display:flex;justify-content:center;align-items:baseline;
    gap:.25em;overflow:hidden;line-height:1.12;
}
.sl-mw{
    display:inline-block;
    font-family:var(--font);
    font-size:clamp(32px,5.5vw,82px);
    font-weight:700;letter-spacing:-.04em;
    color:#fff;white-space:pre;
    transform:translateY(110%);opacity:0;
}
.sl-mw--gold{
    color:var(--gold);font-weight:300;font-style:italic;
}

/* Stats row — horizontal */
.sl-why-stats-row{
    display:flex;justify-content:center;align-items:center;
    gap:clamp(24px,4vw,60px);
    opacity:0;transform:translateY(30px);
}
.sl-stat{text-align:center}
.sl-stat-n{
    font-family:var(--font);font-size:clamp(40px,5vw,72px);
    font-weight:700;letter-spacing:-.04em;color:var(--gold);
    font-variant-numeric:tabular-nums;line-height:1;display:inline;
}
.sl-stat-s{font-family:var(--font);font-size:clamp(18px,2vw,32px);font-weight:300;color:var(--gold);opacity:.5}
.sl-stat-l{
    display:block;font-family:var(--font-body);font-size:clamp(9px,.7vw,11px);font-weight:400;
    letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.18);margin-top:8px;
}
.sl-stat-divider{
    width:1px;height:clamp(40px,5vh,60px);
    background:rgba(255,255,255,.06);flex-shrink:0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Global overflow fix */
.page-solutions{overflow-x:hidden}

@media(max-width:1024px){
    .sl-panel-split{grid-template-columns:1fr;min-height:auto}
    .sl-panel{min-height:auto}
    .sl-panel-left{min-height:40vh;padding:clamp(60px,8vh,100px) var(--pad)}
    .sl-panel-right{
        padding:clamp(48px,6vh,80px) var(--pad) clamp(60px,8vh,100px);
        border-left:none!important;
        border-top:1px solid rgba(255,255,255,.04);
    }
    .sl-panel.sl-light .sl-panel-right{border-top-color:rgba(0,0,0,.04)}
}

@media(max-width:768px){
    /* Hero */
    .sl-hero{min-height:100svh;padding:0 20px}
    .sl-hero-content{padding:0 16px}
    .sl-hero-line{flex-wrap:wrap;gap:.15em;justify-content:center}
    .sl-word{font-size:clamp(32px,10vw,52px);white-space:normal;flex-shrink:1}
    .sl-hero-ey{font-size:9px;letter-spacing:.3em}
    .sl-shape{display:none}

    /* Panels */
    .sl-panel-left{min-height:30vh;padding:clamp(48px,6vh,80px) 20px}
    .sl-panel-icon{width:clamp(120px,30vw,160px);height:clamp(120px,30vw,160px)}
    .sl-panel-right{padding:clamp(36px,5vh,60px) 20px clamp(48px,6vh,80px)}
    .sl-panel-title{font-size:clamp(36px,10vw,52px)}
    .sl-panel-lead{font-size:clamp(14px,3.5vw,17px);max-width:100%}
    .sl-panel-body{font-size:clamp(12px,3vw,14px);max-width:100%}
    .sl-panel-tags{gap:6px}
    .sl-ptag{padding:7px 14px;font-size:clamp(9px,2.4vw,11px)}

    /* Panels */
    .sl-panel-right{overflow:hidden}
    .sl-panel-lead,.sl-panel-body{max-width:100%}

    /* Why */
    .sl-why{padding:clamp(60px,10vh,120px) 0}
    .sl-why-inner{padding:0 20px}
    .sl-manifesto-line{flex-wrap:wrap;gap:.15em;justify-content:center}
    .sl-mw{font-size:clamp(26px,7.5vw,44px);white-space:normal}
    .sl-manifesto{margin-bottom:clamp(40px,8vh,80px)}
    .sl-why-stats-row{flex-wrap:wrap;gap:24px 32px;justify-content:center}
    .sl-stat-divider{display:none}
    .sl-stat-n{font-size:clamp(36px,9vw,56px)}
}

@media(max-width:480px){
    .sl-word{font-size:clamp(28px,9vw,42px)}
    .sl-panel-title{font-size:clamp(32px,9vw,42px)}
    .sl-panel-icon{width:100px;height:100px}
    .sl-mw{font-size:clamp(22px,6.5vw,36px);white-space:normal}
    .sl-stat-n{font-size:clamp(32px,8vw,48px)}
    .sl-hero-ey{font-size:8px;margin-bottom:24px}
    .sl-hero-scroll{margin-top:32px}
}