/* ===== Experience page (#204) — builds on home.css (vars, header, nav, button, footer, cta-band) ===== */
.swrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.nav a.active{color:var(--teal)}
.ex h1,.ex h2,.ex h3{font-family:Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.012em;margin:0}
.ex .sq{display:inline-block;width:.22em;height:.22em;background:var(--teal);border-radius:3px;margin-left:.08em;vertical-align:baseline}
.ex section{position:relative}

/* ---------- HERO ---------- */
.ex-hero{overflow:hidden;display:flex;align-items:center;min-height:560px;padding:150px 0 56px;background:linear-gradient(90deg,#03111e 0%,#03111e 36%,rgba(3,17,30,.72) 52%,rgba(3,17,30,.06) 100%)}
.ex-hero-photo{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;background:url('assets/images/hero-jd.jpg?v=p1') center 18%/cover;filter:saturate(1.05) contrast(1.04)}
.ex-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#03111e 0%,#03111e 38%,rgba(3,17,30,.5) 52%,transparent 70%)}
.ex-hero-inner{position:relative;z-index:2;max-width:600px}
.ex-hero h1{font-size:clamp(46px,5vw,84px);line-height:.98;font-weight:700;margin:14px 0 0}
.ex-hero-sub{font-size:16px;line-height:1.6;color:#cdd6db;margin:24px 0 0;max-width:46ch}
.ex-hero-sign{position:absolute;right:8%;bottom:22%;width:200px;max-width:22vw;opacity:.9;z-index:3;pointer-events:none}

/* ---------- BRAND SLIDER ---------- */
.ex-track-sec{background:linear-gradient(180deg,#061827,#04131f);border-top:1px solid var(--line);padding:54px 0}
.ex-track-head h2{font-size:30px;line-height:1.06;margin:12px 0 0}
.ex-track-head{margin-bottom:30px}
.ex-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:rgba(19,209,207,.4) transparent;padding-bottom:14px}
.ex-scroll::-webkit-scrollbar{height:7px}
.ex-scroll::-webkit-scrollbar-thumb{background:rgba(19,209,207,.4);border-radius:4px}
.ex-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:4px}
.ex-rail{position:relative;display:flex;gap:24px;padding-top:34px;width:max-content}
.ex-rail::before{content:"";position:absolute;left:2%;right:2%;top:9px;height:1px;background:linear-gradient(90deg,transparent,rgba(19,209,207,.4) 6%,rgba(19,209,207,.4) 94%,transparent)}
.ex-bcard{position:relative;flex:0 0 270px;scroll-snap-align:start;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.22));background-clip:padding-box;padding:28px 26px;display:flex;flex-direction:column;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.ex-bcard:hover{border-color:rgba(19,209,207,.45);box-shadow:0 0 28px rgba(19,209,207,.14);transform:translateY(-4px)}
.ex-bnode{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px 3px rgba(19,209,207,.55);border:3px solid #061827}
.ex-blogo{height:54px;display:flex;align-items:center;margin-bottom:18px}
.ex-blogo img{max-height:46px;max-width:160px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.ex-brole{color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.03em;line-height:1.35;text-transform:uppercase}
.ex-byears{color:#8b97a0;font-size:12.5px;margin:4px 0 14px}
.ex-bdesc{font-size:13.5px;line-height:1.55;color:#aab4bb;margin:0 0 18px}
.ex-bstats{margin-top:auto;display:flex;flex-direction:column;gap:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
.ex-bstat strong{display:block;font-family:Oswald,sans-serif;font-weight:700;font-size:21px;color:var(--teal);line-height:1;text-transform:uppercase}
.ex-bstat span{display:block;font-size:11px;letter-spacing:.03em;color:#9fb0b8;margin-top:4px;text-transform:uppercase}

/* ---------- LEADERSHIP LEVERS (white) ---------- */
.ex-levers{background:#f4f3ef;color:var(--ink);padding:48px 0;border-top:1px solid var(--line)}
.ex-levers-grid{position:relative;display:grid;grid-template-columns:1.3fr repeat(4,1fr);align-items:start;gap:0 28px}
.ex-levers-grid::before{content:"";position:absolute;inset:-18px 0;background:radial-gradient(ellipse 64% 150% at 66% 50%,rgba(19,209,207,.13),rgba(19,209,207,.04) 52%,transparent 75%);filter:blur(16px);pointer-events:none;z-index:0}
.ex-levers-grid>*{position:relative;z-index:1}
.ex-levers-head h2{font-size:30px;line-height:1.1;color:#0a1824}
.ex-levers-head .short-rule{background:var(--teal);margin-top:16px}
.ex-lever{padding-left:24px;border-left:1px solid #d8d6d0}
.ex-lever-ic{width:40px;height:40px;display:inline-flex;margin-bottom:16px}
.ex-lever-ic svg{width:100%;height:100%;fill:none;stroke:#0c9aa1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(19,209,207,.4))}
.ex-lever h3{font-family:Inter,sans-serif;font-size:14px;letter-spacing:.02em;margin:0 0 10px;color:#0a1824;text-transform:uppercase}
.ex-lever p{font-size:13px;line-height:1.55;color:#5a6670;margin:0}

/* ---------- EXPLORE CASE STUDIES ---------- */
.ex-explore{background:#04131f;border-top:1px solid var(--line);padding:56px 0}
.ex-explore-grid{display:grid;grid-template-columns:1.15fr repeat(3,1fr);gap:28px;align-items:start}
.ex-explore-head h2{font-size:30px;line-height:1.06;margin:12px 0 18px}
.ex-explore-head p{font-size:14px;color:#aab4bb;line-height:1.6;margin:0 0 24px;max-width:34ch}
.ex-explore-link{display:inline-flex;align-items:center;gap:10px;color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.05em}
.ex-ecard{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));background-clip:padding-box;padding:30px 28px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.ex-ecard:hover{border-color:rgba(19,209,207,.4);box-shadow:0 0 26px rgba(19,209,207,.12);transform:translateY(-4px)}
.ex-ecard-ic{width:46px;height:46px;display:inline-flex;margin-bottom:22px}
.ex-ecard-ic svg{width:100%;height:100%;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(19,209,207,.5))}
.ex-ecard h3{font-size:17px;line-height:1.15;margin:0 0 12px}
.ex-ecard p{font-size:13.5px;line-height:1.55;color:#aab4bb;margin:0 0 20px;flex:1}
.ex-ecard .ex-explore-link{margin-top:auto}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .ex-hero-photo{width:52%;opacity:.6}
  .ex-levers-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .ex-levers-head{grid-column:1/-1}
  .ex-lever{border-left:0;padding-left:0}
  .ex-explore-grid{grid-template-columns:1fr 1fr}
  .ex-explore-head{grid-column:1/-1}
}
@media(max-width:680px){
  .swrap{width:min(var(--max),calc(100% - 34px))}
  .ex-hero-photo{inset:0;width:100%;opacity:.3}
  .ex-levers-grid{grid-template-columns:1fr}
  .ex-explore-grid{grid-template-columns:1fr}
}