/* ===== p-solutions.css — editorial zig-zag solutions page ===== */
main#top{background:#fff; color:var(--on-light)}

/* ---------- DARK CINEMATIC HERO ---------- */
.sol-hero{position:relative; background:var(--black); color:var(--fg); overflow:hidden; border-bottom:1px solid var(--line-2)}
.sol-hero .bg{position:absolute; inset:0; z-index:0}
.sol-hero .bg img{width:100%; height:100%; object-fit:cover; opacity:.28}
.sol-hero .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,.78) 55%, rgba(11,11,11,.96) 100%)}
.sol-hero .container{position:relative; z-index:1; padding:clamp(4.2rem,9vw,8rem) 0 clamp(3rem,6vw,5rem)}
.sol-eyebrow{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-mute); display:flex; align-items:center; gap:.8em}
.sol-eyebrow .ln{width:64px; height:1px; background:var(--line)}
.sol-hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem); letter-spacing:-.035em; line-height:1.0; font-weight:500; margin:1.1rem 0 0; max-width:16ch}
.sol-hero h1 em{font-style:normal; color:var(--brand)}
.sol-hero .lead{max-width:58ch; margin-top:1.4rem; color:var(--fg-dim); font-size:clamp(1.04rem,1.4vw,1.22rem); line-height:1.6}
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:clamp(2.4rem,5vw,3.6rem)}
.pillar{background:var(--black); padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; transition:background .15s}
.pillar:hover{background:var(--g950)}
.pillar .pn{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand)}
.pillar .pt{font-size:1.06rem; letter-spacing:-.01em; color:var(--fg); line-height:1.2}
.pillar .pd{font-size:.82rem; color:var(--fg-mute); line-height:1.45}
@media(max-width:860px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}

/* ---------- LIGHT INTRO STRIP ---------- */
.sol-intro{border-bottom:1px solid var(--line-light)}
.sol-intro .container{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.4rem,4vw,4rem); align-items:baseline; padding:clamp(2.6rem,5vw,4rem) 0}
.sol-intro .k{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute)}
.sol-intro p{font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.45; letter-spacing:-.015em; color:var(--on-light); max-width:40ch}
.sol-intro p b{color:var(--brand); font-weight:500}
@media(max-width:760px){.sol-intro .container{grid-template-columns:1fr; gap:.6rem}}

/* ---------- ZIG-ZAG FEATURE ROWS ---------- */
.zig{border-bottom:1px solid var(--line-light)}
.zig .container{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5.5rem); align-items:center; padding:clamp(3rem,6vw,5.6rem) 0}
.zig:nth-of-type(even) .z-media{order:-1}
.zig-num{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute); display:flex; align-items:center; gap:.7em; margin-bottom:1rem}
.zig-num b{color:var(--brand); font-weight:500}
.zig-num .ln{width:42px; height:1px; background:var(--line-light)}
.z-body h2{font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-.03em; line-height:1.04; font-weight:500; color:var(--on-light); max-width:16ch}
.z-body .ztext{color:var(--on-light-dim); line-height:1.62; margin-top:1rem; max-width:50ch; font-size:1.02rem}
.zlist{list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.9rem; max-width:48ch}
.zlist li{display:flex; gap:.8em; align-items:flex-start; font-size:.96rem; color:var(--on-light); line-height:1.45}
.zlist li .ck{flex:none; margin-top:.18em; color:var(--brand); display:inline-flex}
.z-cta{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-top:1.9rem}
.z-link{display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; color:var(--on-light); border-bottom:1px solid var(--on-light); padding-bottom:.2em; transition:color .15s, border-color .15s}
.z-link svg{transition:transform .15s}
.z-link:hover{color:var(--brand); border-color:var(--brand)} .z-link:hover svg{transform:translateX(3px)}

/* media frame */
.z-media{position:relative}
.z-frame{position:relative; border:1px solid var(--line-light); border-radius:var(--r-marketing); overflow:hidden; background:#f4f4f2}
.z-frame img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.z-tag{position:absolute; left:14px; bottom:14px; z-index:2; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:rgba(11,11,11,.72); backdrop-filter:blur(6px); border-radius:var(--r-pill); padding:.42em .8em}
@media(max-width:820px){
  .zig .container{grid-template-columns:1fr; gap:1.8rem}
  .zig:nth-of-type(even) .z-media{order:-1}
  .z-media{order:-1}
}

/* ---------- BY INDUSTRY TILE ROW ---------- */
.byind{padding:clamp(3rem,6vw,5.2rem) 0; border-bottom:1px solid var(--line-light)}
.byind-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; margin-bottom:2rem}
.byind-head .k{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute); display:flex; align-items:center; gap:.8em}
.byind-head .k .ln{width:42px; height:1px; background:var(--line-light)}
.byind-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem); letter-spacing:-.03em; font-weight:500; margin-top:.7rem; max-width:20ch}
.itiles{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.itile{position:relative; display:block; border-radius:var(--r-marketing); overflow:hidden; aspect-ratio:3/4; color:#fff; border:1px solid var(--line-light)}
.itile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.itile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,11,.05) 35%, rgba(11,11,11,.82) 100%)}
.itile:hover img{transform:scale(1.05)}
.itile .lab{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.25rem}
.itile .lab .n{font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.62)}
.itile .lab .t{font-size:1.04rem; letter-spacing:-.015em; line-height:1.15; display:inline-flex; align-items:center; gap:.4em}
.itile .lab .t .ar{color:var(--brand); opacity:0; transform:translateX(-4px); transition:.2s var(--ease)}
.itile:hover .lab .t .ar{opacity:1; transform:none}
@media(max-width:900px){.itiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.itiles{grid-template-columns:repeat(2,1fr)}}

/* ---------- HOW WE DELIVER (light, hairline list) ---------- */
.deliver{padding:clamp(3rem,6vw,5rem) 0; border-bottom:1px solid var(--line-light)}
.deliver .k{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute); display:flex; align-items:center; gap:.8em; margin-bottom:1.6rem}
.deliver .k .ln{width:42px; height:1px; background:var(--line-light)}
.dgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(2rem,4vw,3.5rem)}
.dcol{border-top:1px solid var(--on-light); padding-top:1.3rem}
.dcol .dn{font-family:var(--mono); font-size:.72rem; color:var(--brand); letter-spacing:.04em}
.dcol h3{font-size:1.25rem; letter-spacing:-.02em; font-weight:500; margin:.5rem 0 .55rem; color:var(--on-light)}
.dcol p{color:var(--on-light-dim); font-size:.94rem; line-height:1.55}
@media(max-width:760px){.dgrid{grid-template-columns:1fr; gap:0}.dcol{margin-top:1.6rem}.dcol:first-child{margin-top:0}}

/* ---------- DARK CTA BAND ---------- */
.sol-cta{background:var(--black); color:var(--fg); padding:clamp(3.4rem,7vw,6rem) 0}
.sol-cta .inner{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.6rem,4vw,3rem); align-items:center}
.sol-cta .eyebrow2{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand)}
.sol-cta h2{font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.03em; line-height:1.02; font-weight:500; margin:.9rem 0 0; max-width:18ch}
.sol-cta p{color:var(--fg-dim); line-height:1.6; margin-top:1rem; max-width:42ch}
.sol-cta .acts{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end}
.sol-cta .note{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-mute); margin-top:1.2rem; width:100%; text-align:right}
@media(max-width:760px){.sol-cta .inner{grid-template-columns:1fr}.sol-cta .acts{justify-content:flex-start}.sol-cta .note{text-align:left}}