/* ===== About page — builds on home.css (vars, header, nav, button, ico-arrow, footer, kicker, short-rule) ===== */
.swrap{width:min(var(--max),calc(100% - 64px));margin:auto}
.nav a.active{color:var(--teal)}
.ab h1,.ab h2{font-family:Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.015em;margin:0}
.ab .sq{display:inline-block;width:.26em;height:.26em;background:var(--teal);border-radius:3px;margin-left:.12em;vertical-align:baseline}
.ab section{position:relative}
/* photo placeholder treatment (swap background-image for real photos) */
.ab-photo,.ab-origin-photo,.ab-beyond-photo,.ab-hero-photo{background-size:cover;background-position:center}

/* ---------- HERO ---------- */
.ab-hero{overflow:hidden;display:flex;align-items:center;min-height:600px;padding:150px 0 64px;background:linear-gradient(90deg,#03111e 0%,#03111e 36%,rgba(3,17,30,.74) 52%,rgba(3,17,30,.06) 100%)}
.ab-hero-photo{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0;background-image:url('assets/images/hero-jd.jpg?v=p1');background-position:center 22%;filter:saturate(1.06) contrast(1.04)}
.ab-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%)}
.ab-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(3,17,30,.5),transparent 30%)}
.ab-hero-inner{position:relative;z-index:2}
.ab-hero h1{font-size:clamp(46px,5vw,80px);line-height:1;font-weight:700;margin:14px 0 0;text-shadow:0 2px 12px rgba(0,0,0,.34)}
.ab-hero-sub{max-width:46ch;font-size:16px;line-height:1.6;color:#cdd6db;margin:26px 0 0}
.ab-hero-sign{position:absolute;right:8%;bottom:20%;width:210px;max-width:24vw;opacity:.92;z-index:3;pointer-events:none}

/* ---------- generic split (operator) ---------- */
.ab-split{background:linear-gradient(180deg,#061827,#04131f);border-top:1px solid var(--line);padding:64px 0}
.ab-split-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.ab-photo{border-radius:14px;min-height:380px;background-image:url('assets/images/jd-laptop.jpg?v=p1');background-position:center 18%;border:1px solid rgba(255,255,255,.1)}
.ab-split-copy h2{font-size:34px;line-height:1.12;margin:14px 0 22px}
.ab-split-copy p{font-size:14.5px;line-height:1.7;color:#aab4bb;margin:0 0 18px;max-width:60ch}
.ab-split-copy .button{margin-top:8px}

/* ---------- WHAT I DO (white) ---------- */
.ab-wid{background:#f4f3ef;color:var(--ink);padding:46px 0;border-top:1px solid var(--line)}
.ab-wid-grid{position:relative;display:grid;grid-template-columns:1.4fr repeat(4,1fr);align-items:center;gap:0 30px}
.ab-wid-grid::before{content:"";position:absolute;inset:-18px 0;background:radial-gradient(ellipse 64% 150% at 64% 50%,rgba(19,209,207,.15),rgba(19,209,207,.04) 52%,transparent 75%);filter:blur(16px);pointer-events:none;z-index:0}
.ab-wid-grid>*{position:relative;z-index:1}
.ab-wid-head{padding-right:24px}
.ab-wid-head .section-kicker{color:#0c9aa1}
.ab-wid-head h2{font-size:30px;line-height:1.12;margin:12px 0 0;color:#0a1824}
.ab-wid-head .short-rule{background:var(--teal)}
.ab-wid-item{text-align:center;padding:0 16px;border-left:1px solid #d8d6d0}
.ab-wid-item img{width:50px;height:50px;margin:0 auto 12px;display:block;filter:drop-shadow(0 0 8px rgba(19,209,207,.45)) drop-shadow(0 0 2px rgba(19,209,207,.4))}
.ab-wid-item h3{font-family:Inter,sans-serif;font-size:15px;letter-spacing:.02em;margin:0 0 8px;color:#0a1824;text-transform:uppercase}
.ab-wid-item p{font-size:13px;line-height:1.5;color:#5a6670;margin:0}

/* ---------- WHERE IT STARTED ---------- */
.ab-origin{overflow:hidden;background:#04131f;border-top:1px solid var(--line);padding:70px 0;min-height:380px;display:flex;align-items:center}
.ab-origin-photo{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0;background-image:linear-gradient(135deg,#0c2436,#061827);background-position:center}
.ab-origin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#04131f 0%,#04131f 42%,rgba(4,19,31,.55) 56%,transparent 74%)}
.ab-origin-inner{position:relative;z-index:2}
.ab-origin-copy{max-width:560px}
.ab-origin-copy h2{font-size:34px;line-height:1.12;margin:14px 0 22px}
.ab-origin-copy p{font-size:14.5px;line-height:1.7;color:#aab4bb;margin:0 0 16px;max-width:52ch}

/* ---------- EXPERIENCE + BELIEFS ---------- */
.ab-cred{background:linear-gradient(180deg,#061827,#04131f);border-top:1px solid var(--line);padding:60px 0}
.ab-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;max-width:1080px}
.ab-cred-col .section-kicker{margin-bottom:26px;display:block}
.ab-cred-item{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ab-cred-item:last-child{border-bottom:0}
.ab-check,.ab-belief{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.ab-check svg,.ab-belief svg{fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(19,209,207,.45))}
.ab-check svg{width:24px;height:24px}
.ab-belief svg{width:40px;height:40px}
.ab-check{border:1px solid rgba(19,209,207,.4);box-shadow:0 0 16px rgba(19,209,207,.12) inset}
.ab-cred-item h3{font-size:15px;letter-spacing:.02em;margin:2px 0 7px;text-transform:uppercase}
.ab-cred-item p{font-size:13.5px;line-height:1.6;color:#9fb0b8;margin:0;max-width:46ch}

/* ---------- BEYOND BUILDING ---------- */
.ab-beyond{overflow:hidden;background:#03111e;border-top:1px solid var(--line);padding:76px 0;min-height:360px;display:flex;align-items:center}
.ab-beyond-photo{position:absolute;top:0;left:0;bottom:0;width:50%;z-index:0;background-image:url('assets/images/jd-bike.jpg?v=p1');background-position:center}
.ab-beyond::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(270deg,#03111e 0%,#03111e 42%,rgba(3,17,30,.55) 56%,transparent 76%)}
.ab-beyond-inner{position:relative;z-index:2;display:flex;justify-content:flex-end}
.ab-beyond-copy{max-width:560px}
.ab-beyond-copy h2{font-size:38px;line-height:1.08;margin:14px 0 22px}
.ab-beyond-copy p{font-size:15px;line-height:1.7;color:#bcc6cc;margin:0 0 16px;max-width:48ch}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .ab-hero-photo{width:54%;opacity:.7}
  .ab-split-grid{grid-template-columns:1fr;gap:34px}
  .ab-photo{min-height:300px}
  .ab-wid-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .ab-wid-head{grid-column:1/-1;text-align:center;padding:0}
  .ab-wid-item{border-left:0}
  .ab-origin-photo,.ab-beyond-photo{width:100%;opacity:.32}
  .ab-cred-grid{grid-template-columns:1fr;gap:40px}
  .ab-beyond-inner{justify-content:flex-start}
}
@media(max-width:680px){
  .swrap{width:min(var(--max),calc(100% - 34px))}
  .ab-hero{min-height:520px;padding-top:120px}
  .ab-hero-photo{inset:0;width:100%;opacity:.35}
  .ab-wid-grid{grid-template-columns:1fr 1fr}
}