/* =========================================================
   ZOHDI RIZVI — PORTFOLIO  |  styles.css
   ========================================================= */

/* ── RESET & TOKENS ─────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; }
img, video, svg { max-width: 100%; height: auto; }

:root {
  --bg:    #0e0e0e;
  --bg2:   #131313;
  --bg3:   #191919;
  --w:     #f0ece4;
  --mid:   rgba(240,236,228,.68);
  --dim:   rgba(240,236,228,.45);
  --gold:  #c8a84b;
  --gold2: #e4c97a;
  --rule:  rgba(240,236,228,.10);
  --serif: 'Playfair Display', serif;
  --sans:  'DM Sans', sans-serif;
  --mono:  'Space Mono', monospace;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--bg); color: var(--w);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  overflow-x: hidden; cursor: none;
}

/* ── CURSOR ─────────────────────────────────────────── */
#cur {
  position: fixed; z-index: 9999;
  width: 10px; height: 10px;
  background: var(--w); border-radius: 50%;
  pointer-events: none; mix-blend-mode: difference;
  transform: translate(-50%,-50%);
  transition: width .35s cubic-bezier(.16,1,.3,1),
              height .35s cubic-bezier(.16,1,.3,1);
}
body.hov  #cur { width: 40px; height: 40px; }
body.link #cur { background: var(--gold); width: 16px; height: 16px; }

/* ── PROGRESS BAR ───────────────────────────────────── */
#prog {
  position: fixed; top: 0; left: 0; z-index: 9990;
  height: 2px; background: var(--gold);
  width: 0; transition: width .08s linear;
}

/* ── PAGE SYSTEM ────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ── REVEAL ANIMATIONS ──────────────────────────────── */
.rv {
  opacity: 0; transform: translateY(24px);
  transition: opacity .95s cubic-bezier(.16,1,.3,1),
              transform .95s cubic-bezier(.16,1,.3,1);
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .10s; }
.rv.d2 { transition-delay: .20s; }
.rv.d3 { transition-delay: .30s; }
.rv.d4 { transition-delay: .45s; }
.fade { opacity: 0; transition: opacity 1.1s ease; }
.fade.in { opacity: 1; }

/* ── NAV ────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.5rem; height: 64px;
  transition: background .4s, border-color .4s;
}
.nav.scrolled {
  background: rgba(14,14,14,.92);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(16px);
}
.nav-logo {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  color: var(--w); cursor: pointer; letter-spacing: .01em;
  transition: opacity .25s; text-decoration: none;
}
.nav-logo:hover { opacity: .65; }
.nav-logo em { color: var(--gold); font-style: normal; }

.nav-links { display: flex; align-items: center; gap: 2.2rem; }
.nav-a {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
  cursor: pointer; text-decoration: none;
  transition: color .25s; white-space: nowrap; position: relative;
}
.nav-a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--gold); transition: width .3s;
}
.nav-a:hover { color: var(--w); }
.nav-a:hover::after { width: 100%; }

.nav-btn {
  background: var(--w) !important; color: var(--bg) !important;
  padding: .42rem 1.2rem; font-weight: 500;
}
.nav-btn::after { display: none !important; }
.nav-btn:hover { background: var(--gold) !important; }

/* ── HAMBURGER BUTTON ─────────────────────────────── */
.ham {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: .5rem; width: 40px; height: 40px; flex-shrink: 0;
}
.ham span {
  display: block; width: 22px; height: 1.5px;
  background: var(--w); border-radius: 1px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s;
  transform-origin: center;
}
.ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* LinkedIn nav link: always visible, styled in gold */
.nav-li::after { display: none !important; }
.nav-li { color: var(--gold) !important; }

/* ── FOOTER ─────────────────────────────────────────── */
.foot {
  background: #0a0a0a; border-top: 1px solid var(--rule);
  padding: 2rem 3.5rem;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: .5rem;
}
.foot span, .foot a {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .12em; color: var(--dim); text-decoration: none;
}
.foot .fb { color: var(--gold) !important; cursor: pointer; }

/* =========================================================
   HOME — HERO
   ========================================================= */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; background: var(--bg);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-glow {
  position: absolute; top: -20%; right: -10%;
  width: 800px; height: 800px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(200,168,75,.06) 0%, transparent 65%);
}
.hero-inner {
  position: relative; z-index: 1; width: 100%;
  max-width: 1200px; margin: 0 auto;
  padding: 80px 3.5rem 5rem;
  display: grid; grid-template-columns: 1fr 340px;
  gap: 5rem; align-items: center;
}
.h-eyebrow {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem;
}
.h-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.h-h1 {
  font-family: var(--serif); font-size: clamp(3rem,5.5vw,5.4rem);
  font-weight: 900; line-height: 1.02; color: var(--w);
  margin-bottom: 1.8rem; letter-spacing: -.025em;
}
.h-h1 em { color: var(--gold); font-style: italic; }
.h-sub {
  font-size: .98rem; line-height: 1.82; color: var(--mid);
  max-width: 500px; margin-bottom: 3rem;
}

/* Availability pill */
.h-avail {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(34,197,94,.3); padding: .38rem .9rem;
  margin-bottom: 2rem; background: rgba(34,197,94,.06);
  max-width: 100%;
}
.h-avail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; animation: pulse-g 2.2s ease infinite;
}
@keyframes pulse-g {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  60%     { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.h-avail-t {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(240,236,228,.45);
}

/* Buttons */
.h-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem; }
.btn-g {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase; background: var(--gold); color: #0e0e0e;
  padding: .9rem 2.2rem; text-decoration: none; cursor: pointer; border: none;
  transition: background .25s, transform .25s cubic-bezier(.16,1,.3,1);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-g:hover { background: var(--gold2); transform: translateY(-2px); }
.btn-o {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase; background: none; color: var(--mid);
  border: 1px solid rgba(240,236,228,.18); padding: .9rem 2.2rem;
  text-decoration: none; cursor: pointer;
  transition: border-color .25s, color .25s, transform .25s cubic-bezier(.16,1,.3,1);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-o:hover { border-color: var(--w); color: var(--w); transform: translateY(-2px); }

/* KPIs */
.h-kpis {
  display: flex; gap: 3rem; padding-top: 2.5rem;
  border-top: 1px solid var(--rule); flex-wrap: wrap;
}
.kpi-n { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--w); line-height: 1; }
.kpi-l { font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-top: .3rem; }

/* Hero photo */
.h-photo-col { position: relative; }
.h-photo {
  width: 100%; display: block;
  object-fit: cover; object-position: center 12%;
  -webkit-mask-image: radial-gradient(ellipse 80% 88% at 52% 40%, black 35%, transparent 68%);
  mask-image: radial-gradient(ellipse 80% 88% at 52% 40%, black 35%, transparent 68%);
}
.contact-photo-blend {
  width: 100%; display: block;
  object-fit: cover; object-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 35%, black 38%, transparent 70%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 35%, black 38%, transparent 70%);
}
.h-photo-tag {
  position: absolute; bottom: 1.5rem; left: -1.5rem;
  background: rgba(0,0,0,.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(200,168,75,.25); padding: .65rem 1.1rem;
}
.h-photo-tag .r { font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.h-photo-tag .n { font-family: var(--serif); font-size: .85rem; font-weight: 700; color: var(--w); }

/* ── BRANDS ──────────────────────────────────────────── */
.brands {
  background: var(--bg2); padding: 2.5rem 3.5rem;
  border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule);
}
.brands-lbl { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); text-align: center; margin-bottom: 1.5rem; }
.brands-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 3rem; }
.brand-img { height: 24px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .22; transition: opacity .3s, transform .3s; }
.brand-img:hover { opacity: .55; transform: scale(1.08); }

/* ── ABOUT ───────────────────────────────────────────── */
.about { padding: 9rem 3.5rem; border-bottom: 1px solid var(--rule); }
.about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.sec-eye { font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.2rem; display: block; }
.sec-h2 { font-family: var(--serif); font-size: clamp(2rem,3.5vw,3rem); font-weight: 700; line-height: 1.08; margin-bottom: 2rem; letter-spacing: -.015em; }
.sec-h2 em { font-style: italic; color: var(--gold); }
.body-p { font-size: .97rem; line-height: 1.85; color: var(--mid); margin-bottom: 1rem; }
.body-p strong { color: var(--w); }
.body-p a { color: var(--gold); text-underline-offset: 3px; }

.strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; margin-top: 2.5rem; }
.strip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s; }
.strip img:hover { transform: scale(1.05); filter: brightness(1.1); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.chip { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--rule); padding: .3rem .85rem; transition: all .25s; cursor: default; }
.chip:hover { border-color: var(--w); color: var(--w); background: rgba(240,236,228,.06); }

.exp-list { display: flex; flex-direction: column; }
.exp-item { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); transition: padding-left .35s cubic-bezier(.16,1,.3,1); }
.exp-item:first-child { border-top: 1px solid var(--rule); }
.exp-item:hover { padding-left: .7rem; }
.exp-co { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--w); margin-bottom: .2rem; }
.exp-role { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.exp-yr { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; color: var(--dim); margin-bottom: .7rem; }
.exp-pt { font-size: .88rem; line-height: 1.7; color: var(--mid); padding-left: .9rem; position: relative; margin-bottom: .2rem; }
.exp-pt::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-size: .8rem; }
.exp-pt strong { color: var(--w); }

/* =========================================================
   WORK — FULL-BLEED CASE STUDY PANELS
   ========================================================= */
.work-header { padding: 7rem 3.5rem 2rem; max-width: 1200px; margin: 0 auto; }
.w-eye { font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); margin-bottom: 1rem; display: block; }
.w-h2 { font-family: var(--serif); font-size: clamp(2rem,3.5vw,3rem); font-weight: 700; letter-spacing: -.015em; color: var(--w); }

.cs-panel {
  position: relative; min-height: 70vh; display: flex; align-items: center;
  overflow: hidden; cursor: pointer; border-top: 1px solid var(--rule);
}
.cs-panel-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1); will-change: transform;
}
.cs-panel:hover .cs-panel-photo { transform: scale(1.05); }
/* Mockup-style image: soft radial fade to blend screenshot into dark background */
.cs-panel-photo--mockup {
  -webkit-mask-image: radial-gradient(ellipse 56% 78% at 76% 50%, black 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 56% 78% at 76% 50%, black 40%, transparent 78%);
}
.cs-panel-grad {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(10,10,12,.97) 0%,  rgba(10,10,12,.88) 38%,
    rgba(10,10,12,.6)  55%, rgba(10,10,12,.15) 75%, transparent 100%);
}
.cs-panel-inner { position: relative; z-index: 2; padding: 4.5rem 3.5rem; max-width: 600px; }
.cs-panel-tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); margin-bottom: .85rem; }
.cs-panel-rule { height: 1px; background: rgba(240,236,228,.2); margin-bottom: 2rem; width: 240px; }
.cs-panel-co { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; display: block; }
.cs-panel-h { font-family: var(--serif); font-size: clamp(1.8rem,3.2vw,2.8rem); font-weight: 700; line-height: 1.1; color: var(--w); margin-bottom: 1.1rem; letter-spacing: -.01em; }
.cs-panel-desc { font-size: .93rem; line-height: 1.78; color: var(--mid); max-width: 480px; margin-bottom: 2rem; }
.cs-panel-metrics { display: flex; gap: 2.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.cs-pm .n { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--w); line-height: 1; }
.cs-pm .l { font-family: var(--mono); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-top: .2rem; }
.cs-panel-cta {
  display: inline-flex; align-items: center; gap: .7rem;
  border: 1px solid rgba(240,236,228,.3); padding: .72rem 1.8rem; border-radius: 100px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--w); text-decoration: none;
  transition: background .3s, border-color .3s, gap .35s cubic-bezier(.16,1,.3,1);
  background: rgba(240,236,228,.05); backdrop-filter: blur(8px);
}
.cs-panel-cta:hover { background: rgba(200,168,75,.15); border-color: var(--gold); color: var(--gold); gap: 1.1rem; }
.cs-panel-arr { display: inline-block; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.cs-panel:hover .cs-panel-arr { transform: translateX(5px); }

/* ── STRIDE ──────────────────────────────────────────── */
.stride { padding: 9rem 3.5rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stride-in { max-width: 1200px; margin: 0 auto; }
.stride-top { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; margin-bottom: 4rem; }
.stride-img { width: 100%; display: block; filter: brightness(.85); margin: 3rem 0; }
.stride-grid { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.stride-cell { padding: 1.8rem 1.4rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background .3s; }
.stride-cell:hover { background: rgba(240,236,228,.04); }
.stride-cell:hover .sl { color: var(--gold); -webkit-text-stroke-color: transparent; }
.stride-cell:hover .sw { color: var(--gold); }
.sl { font-family: var(--serif); font-size: 2.8rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 1.5px rgba(240,236,228,.18); color: transparent; margin-bottom: .7rem; transition: color .3s, -webkit-text-stroke-color .3s; }
.sw { font-family: var(--mono); font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); margin-bottom: .4rem; transition: color .3s; }
.sd { font-size: .82rem; line-height: 1.7; color: var(--dim); }

/* ── HIDDEN SECTIONS ──────────────────────────────── */
.stride { display: none !important; }
[data-scroll="stride"] { display: none !important; }

/* ── RECOMMENDATIONS ────────────────────────────────── */
.recs { padding: 9rem 3.5rem; border-bottom: 1px solid var(--rule); }
.recs-in { max-width: 1200px; margin: 0 auto; }
.recs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.rec-card { overflow: hidden; border: 1px solid var(--rule); transition: border-color .3s, transform .5s cubic-bezier(.16,1,.3,1); }
.rec-card:hover { border-color: rgba(240,236,228,.4); transform: translateY(-5px); }
.rec-card img { width: 100%; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.rec-card:hover img { transform: scale(1.02); }

/* ── CONTACT ─────────────────────────────────────────── */
.contact { padding: 9rem 3.5rem; border-bottom: 1px solid var(--rule); }
.contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.c-h { font-family: var(--serif); font-size: clamp(2.2rem,4vw,4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; margin-bottom: 1.5rem; }
.c-h em { font-style: italic; color: var(--gold); }
.c-email { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--w); text-decoration: none; border-bottom: 1.5px solid rgba(240,236,228,.35); padding-bottom: .15rem; display: inline-block; transition: opacity .25s; margin-bottom: 2.5rem; }
.c-email:hover { opacity: .5; }
.socials { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.soc { font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color .25s; }
.soc:hover { color: var(--w); }

/* =========================================================
   CASE STUDY — SHARED STYLES
   ========================================================= */
.cs-hero { min-height: 82vh; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cs-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; }
.cs-hero-over { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,12,.97) 0%, rgba(10,10,12,.7) 45%, rgba(10,10,12,.25) 100%); }
.cs-hero-c { position: relative; z-index: 2; padding: 4rem 3.5rem; max-width: 900px; }
.cs-bc { display: flex; gap: .7rem; margin-bottom: 2rem; flex-wrap: wrap; }
.cs-bc span { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); cursor: pointer; transition: color .2s; }
.cs-bc span:hover, .cs-bc .bcur { color: var(--w); cursor: default; }
.cs-bc .bsep { cursor: default; color: var(--rule); }
.cs-co { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; }
.cs-co img { height: 20px; filter: brightness(0) invert(1); opacity: .5; }
.cs-co-t { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cs-eye { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; display: block; }
.cs-title { font-family: var(--serif); font-size: clamp(2.5rem,5.5vw,5rem); font-weight: 900; line-height: 1.02; color: var(--w); margin-bottom: 1.2rem; letter-spacing: -.025em; }
.cs-sub { font-size: 1rem; line-height: 1.78; color: var(--mid); max-width: 620px; font-style: italic; }

.cs-meta { background: var(--bg2); border-bottom: 1px solid var(--rule); padding: 2rem 3.5rem; }
.cs-meta-in { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.cs-ml { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem; }
.cs-mv { font-size: .88rem; line-height: 1.62; color: var(--mid); }

.cs-stat-bar { border-bottom: 1px solid var(--rule); padding: 2.5rem 3.5rem; background: var(--bg3); }
.cs-stat-in { display: flex; gap: 4rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.cs-sn { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--w); }
.cs-sl { font-family: var(--mono); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-top: .3rem; }

.cs-body { padding: 6rem 0 8rem; }
.sec, .sec-col { max-width: 1200px; margin: 0 auto; padding: 0 3.5rem; }
.sec-col { max-width: 740px; }
.s-eye { font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: .85rem; }
.s-h { font-family: var(--serif); font-size: clamp(1.6rem,2.8vw,2.4rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin-bottom: 1.5rem; }
.s-h em { font-style: italic; color: var(--gold); }
.cs-p { font-size: .97rem; line-height: 1.88; color: var(--mid); margin-bottom: 1rem; }
.cs-p strong { color: var(--w); }

.pq { border-left: 2px solid var(--gold); padding: 1.2rem 0 1.2rem 2rem; margin: 2.5rem 0; }
.pq-t { font-family: var(--serif); font-size: clamp(1.1rem,1.8vw,1.4rem); font-style: italic; line-height: 1.62; color: var(--w); margin-bottom: .5rem; }
.pq-a { font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }

.hmw { background: rgba(240,236,228,.04); border-left: 2.5px solid var(--gold); padding: 2rem 2.5rem; margin: 2rem 0; }
.hmw p { font-family: var(--serif); font-size: clamp(.98rem,1.7vw,1.18rem); font-style: italic; line-height: 1.72; color: var(--w); }
.hmw strong { color: var(--gold); font-style: normal; }

.img-full { width: 100%; display: block; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.img-cap { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-align: center; padding: .85rem 2rem; background: var(--bg2); border-bottom: 1px solid var(--rule); }
.img-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--rule); margin: 2rem 0; }
.img-2col img { width: 100%; display: block; transition: opacity .3s; }
.img-2col img:hover { opacity: .85; }

.pain-g { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--rule); margin: 2rem 0; }
.pain-c { padding: 2rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background .25s; }
.pain-c:nth-child(3n) { border-right: none; }
.pain-c:hover { background: rgba(240,236,228,.04); }
.pain-n { font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .4rem; }
.pain-ico { font-size: 1.25rem; margin-bottom: .4rem; display: block; }
.pain-tt { font-size: .92rem; font-weight: 700; color: var(--w); margin-bottom: .35rem; }
.pain-bd { font-size: .85rem; line-height: 1.7; color: var(--mid); }
.pain-bd strong { color: var(--w); }

.persona-g { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); margin: 2rem 0; }
.persona-c { padding: 2rem; border-right: 1px solid var(--rule); transition: background .25s; }
.persona-c:last-child { border-right: none; }
.persona-c:hover { background: rgba(240,236,228,.04); }
.pbadge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rule); padding: .25rem .7rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .8rem; }
.pbadge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.pname { font-size: .95rem; font-weight: 700; color: var(--w); margin-bottom: .3rem; }
.pq-cs { border-left: 2px solid var(--rule); padding: .6rem .8rem; margin: .5rem 0; font-size: .88rem; line-height: 1.68; color: var(--mid); font-style: italic; }
.ptag { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--rule); padding: .15rem .5rem; display: inline-block; margin: .15rem; }

.dl { margin: 2rem 0; }
.dl-item { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); transition: padding-left .35s cubic-bezier(.16,1,.3,1); }
.dl-item:first-child { border-top: 1px solid var(--rule); }
.dl-item:hover { padding-left: .65rem; }
.dl-n { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.dl-t { font-size: .95rem; font-weight: 700; color: var(--w); margin-bottom: .4rem; line-height: 1.4; }
.dl-b { font-size: .9rem; line-height: 1.78; color: var(--mid); }
.dl-b strong { color: var(--w); }
.dl-note { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--dim); margin-top: .4rem; font-style: italic; line-height: 1.7; }

.tl { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--rule); margin: 2rem 0; }
.tl-c { padding: 1.8rem 1.5rem; border-right: 1px solid var(--rule); transition: background .25s; }
.tl-c:last-child { border-right: none; }
.tl-c:hover { background: rgba(240,236,228,.04); }
.tl-c:hover .tl-d { background: var(--gold); }
.tl-d { width: 7px; height: 7px; border-radius: 50%; background: rgba(240,236,228,.3); margin-bottom: .8rem; transition: background .25s; }
.tl-dt { font-family: var(--mono); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.tl-tt { font-size: .9rem; font-weight: 700; color: var(--w); margin-bottom: .35rem; }
.tl-bd { font-size: .82rem; line-height: 1.68; color: var(--mid); }

.ss { position: relative; background: var(--bg2); border: 1px solid var(--rule); margin: 2rem 0; overflow: hidden; }
.ss-slide { display: none; }
.ss-slide.on { display: block; }
.ss-slide img { width: 100%; display: block; }
.ss-bar { background: var(--bg3); border-top: 1px solid var(--rule); padding: .8rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.ss-t { font-size: .85rem; font-style: italic; color: var(--mid); }
.ss-ct { font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; color: var(--dim); }
.ss-btns { position: absolute; bottom: 3.4rem; right: .9rem; display: flex; gap: .3rem; }
.ss-btn { width: 32px; height: 32px; background: rgba(14,14,14,.7); border: 1px solid var(--rule); color: var(--w); cursor: pointer; font-family: var(--mono); font-size: .7rem; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.ss-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.ss-dots { position: absolute; bottom: 3.55rem; left: .9rem; display: flex; gap: .4rem; }
.ss-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(240,236,228,.2); cursor: pointer; transition: background .2s; }
.ss-dot.on { background: var(--w); }

.impact { background: var(--bg2); border: 1px solid var(--rule); margin: 3rem 0; }
.impact-in { padding: 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.imp-n { font-family: var(--serif); font-size: 2.8rem; font-weight: 900; color: var(--gold); line-height: 1; margin-bottom: .4rem; }
.imp-t { font-family: var(--mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: .5rem; }
.imp-b { font-size: .88rem; line-height: 1.7; color: var(--mid); }

.lrns { margin: 2rem 0; }
.lrn { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); transition: padding-left .35s cubic-bezier(.16,1,.3,1); }
.lrn:first-child { border-top: 1px solid var(--rule); }
.lrn:hover { padding-left: .65rem; }
.lrn-n { font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: .3rem; }
.lrn-t { font-size: .95rem; font-weight: 700; color: var(--w); margin-bottom: .4rem; line-height: 1.4; }
.lrn-b { font-size: .9rem; line-height: 1.78; color: var(--mid); }
.lrn-b strong { color: var(--w); }

.cs-cta { background: var(--bg2); border-top: 1px solid var(--rule); padding: 5rem 3.5rem; text-align: center; margin-top: 4rem; }
.cta-h { font-family: var(--serif); font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 700; margin-bottom: 1rem; letter-spacing: -.01em; }
.cta-h em { font-style: italic; color: var(--gold); }
.cta-p { font-size: .95rem; color: var(--mid); line-height: 1.8; margin-bottom: 2.5rem; max-width: 440px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.dp { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); margin: 2rem 0; }
.dp-c { padding: 2rem; border-right: 1px solid var(--rule); }
.dp-c:last-child { border-right: none; }
.dp-b { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rule); padding: .25rem .7rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .8rem; }
.dp-t { font-size: .95rem; font-weight: 700; color: var(--w); margin-bottom: .5rem; }
.dp-bd { font-size: .88rem; line-height: 1.75; color: var(--mid); }
.dp-bd strong { color: var(--w); }
.dp-ul { list-style: none; margin-top: .8rem; }
.dp-ul li { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--mid); padding: .2rem 0; display: flex; gap: .4rem; line-height: 1.6; min-width: 0; }
.dp-ul li::before { content: '→'; color: var(--gold); flex-shrink: 0; }

.iter { margin: 2rem 0; }
.iter-item { padding: 1.8rem 0; border-bottom: 1px solid var(--rule); transition: padding-left .35s cubic-bezier(.16,1,.3,1); }
.iter-item:first-child { border-top: 1px solid var(--rule); }
.iter-item:hover { padding-left: .65rem; }
.iter-n { font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .3rem; }
.iter-t { font-size: .95rem; font-weight: 700; color: var(--w); margin-bottom: .4rem; line-height: 1.4; }
.iter-b { font-size: .9rem; line-height: 1.78; color: var(--mid); }
.iter-b strong { color: var(--w); }
.iter-tags { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.itag { font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .65rem; border: 1px solid; }
.itag.piv { color: #92400e; border-color: #fbbf24; background: rgba(251,191,36,.06); }
.itag.shp { color: #166534; border-color: #4ade80; background: rgba(74,222,128,.06); }
.itag.exp { color: #1e40af; border-color: #60a5fa; background: rgba(96,165,250,.06); }
.itag.dsc { color: var(--dim); border-color: var(--rule); }

.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; }
.q-blk { background: var(--bg2); padding: 2rem; border: 1px solid var(--rule); transition: border-color .3s; }
.q-blk:hover { border-color: rgba(240,236,228,.35); }
.q-t { font-family: var(--serif); font-size: .93rem; font-style: italic; line-height: 1.7; color: var(--w); margin-bottom: 1rem; }
.q-a { font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* =========================================================
   SGT — NEW COMPONENTS
   ========================================================= */

/* Project phases timeline */
.cs-phases {
  background: var(--bg2); border-bottom: 1px solid var(--rule);
  padding: 2rem 3.5rem;
}
.cs-phase-in {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center;
}
.cs-phase {
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem; flex: 0 0 auto; padding: 0 .5rem;
}
.cs-phase-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(200,168,75,.2) 100%);
  min-width: 40px;
}
.cs-ph-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(200,168,75,.5);
}
.cs-ph-label {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--w);
}
.cs-ph-sub {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .08em; color: var(--dim);
}

/* Scale / context row */
.cs-context-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule); margin: 2rem 0;
}
.cs-ctx {
  padding: 1.5rem; border-right: 1px solid var(--rule);
  transition: background .25s;
}
.cs-ctx:last-child { border-right: none; }
.cs-ctx:hover { background: rgba(240,236,228,.03); }
.cs-ctx-n {
  font-family: var(--serif); font-size: 2rem; font-weight: 700;
  color: var(--w); line-height: 1; margin-bottom: .35rem;
}
.cs-ctx-l {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); line-height: 1.55;
}

/* Research methodology grid */
.cs-research-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule); margin: 2rem 0;
}
.cs-rg-item {
  padding: 2rem 1.5rem; border-right: 1px solid var(--rule);
  transition: background .25s;
}
.cs-rg-item:last-child { border-right: none; }
.cs-rg-item:hover { background: rgba(240,236,228,.03); }
.cs-rg-n {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700;
  color: var(--gold); line-height: 1; margin-bottom: .4rem;
}
.cs-rg-t {
  font-size: .88rem; font-weight: 700; color: var(--w); margin-bottom: .4rem;
}
.cs-rg-b { font-size: .8rem; line-height: 1.65; color: var(--dim); }

/* Key insight callout */
.cs-insight {
  background: rgba(200,168,75,.06);
  border: 1px solid rgba(200,168,75,.25);
  border-left: 3px solid var(--gold);
  padding: 2rem 2.5rem; margin: 2rem 0;
}
.cs-insight-label {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
}
.cs-insight-p {
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.6vw, 1.12rem);
  font-style: italic; line-height: 1.72; color: var(--w);
}
.cs-insight-p strong { font-style: normal; color: var(--gold); }

/* Before / After comparison */
.ba-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; background: var(--rule); margin: 2rem 0;
}
.ba-col { background: var(--bg2); }
.ba-badge {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .55rem 1.2rem; display: block;
}
.before-badge {
  background: rgba(240,236,228,.05); color: var(--dim);
  border-bottom: 1px solid var(--rule);
}
.after-badge {
  background: rgba(200,168,75,.1); color: var(--gold);
  border-bottom: 1px solid rgba(200,168,75,.2);
}
.ba-img { width: 100%; display: block; }
.ba-list {
  list-style: none; padding: 1.2rem 1.5rem; margin: 0;
}
.ba-list li {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .05em; color: var(--mid);
  padding: .4rem 0; display: flex; gap: .6rem;
  line-height: 1.55; border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.ba-list li:last-child { border-bottom: none; }
.ba-list li::before { content: '✕'; color: rgba(240,100,100,.7); flex-shrink: 0; }
.after-list li::before { content: '✓'; color: #4ade80; }

/* Pain card — text label replacing emoji */
.pain-ico-txt {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
  padding-bottom: .4rem; border-bottom: 1px solid rgba(200,168,75,.2);
}

/* Slideshow "Solves for" annotation */
.ss-why {
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .05em; color: var(--dim);
  margin-top: .25rem; line-height: 1.6;
}

/* Design decision constraint note */
.dl-note {
  font-family: var(--mono); font-size: .52rem;
  letter-spacing: .06em; color: var(--dim);
  margin-top: .5rem; padding: .65rem .9rem;
  border-left: 2px solid rgba(200,168,75,.3);
  line-height: 1.65; font-style: italic;
}

/* =========================================================
   RESPONSIVE — PROFESSIONAL MOBILE OVERHAUL
   Three breakpoints: 1024 · 768 · 480 · 375
   ========================================================= */

/* ── Touch devices: disable custom cursor ────────────────── */
@media (pointer: coarse) {
  body { cursor: auto; }
  #cur { display: none; }
  #prog { height: 3px; }
}

/* ── 1024px — Tablets landscape ─────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; padding: 80px 2.5rem 4rem; }
  .about-in, .contact-in { grid-template-columns: 1fr; gap: 4rem; }
  .stride-top { grid-template-columns: 1fr; gap: 3rem; }
  .h-photo-col { display: none; }

  .cs-meta-in { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .impact-in { grid-template-columns: 1fr 1fr; }
  .dp, .persona-g, .pain-g { grid-template-columns: 1fr; }
  .pain-c { border-right: none; }
  .dp-c { border-right: none; border-bottom: 1px solid var(--rule); }
  .persona-c { border-right: none; border-bottom: 1px solid var(--rule); }
  .persona-c:last-child { border-bottom: none; }
  .tl { grid-template-columns: 1fr 1fr; }
  .stride-grid { grid-template-columns: repeat(3, 1fr); }
  .q-grid { grid-template-columns: 1fr; }

  .cs-research-grid { grid-template-columns: 1fr 1fr; }
  .cs-rg-item:nth-child(even) { border-right: none; }
  .cs-context-row { grid-template-columns: 1fr 1fr; }
  .cs-ctx:nth-child(2) { border-right: none; }
  .cs-ctx:last-child { border-top: 1px solid var(--rule); grid-column: 1 / -1; border-right: none; }
  .ba-wrap { grid-template-columns: 1fr; }
  .img-2col { grid-template-columns: 1fr; }
}

/* ── 768px — Tablets portrait / large phones ─────────────── */
@media (max-width: 768px) {
  /* Nav */
  .nav { padding: 0 1.25rem; height: 58px; }
  .ham { display: flex; }
  /* Hide all nav-links on mobile; only show when hamburger opens them */
  .nav-links:not(.mob-open) { display: none !important; }
  .nav-links.mob-open {
    display: flex !important;
    /* Use absolute positioning within nav stacking context to avoid clipping */
    position: absolute; top: 58px; left: 0; right: 0;
    background: rgba(10,10,12,.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.25rem;
    gap: 1.8rem;
    border-bottom: 1px solid var(--rule);
    z-index: 10;
  }
  .nav-links.mob-open .nav-a {
    display: flex !important;
    font-size: .75rem; letter-spacing: .18em;
  }
  .nav-links.mob-open .nav-li { display: flex !important; }

  /* Global padding — single source of truth at mobile */
  :root { --px: 1.25rem; }
  .hero-inner { padding: 70px var(--px) 3.5rem; }
  .about, .contact, .recs, .stride, .brands { padding-left: var(--px); padding-right: var(--px); }
  .about { padding-top: 5rem; padding-bottom: 5rem; }
  .contact { padding-top: 5rem; padding-bottom: 5rem; }
  .recs { padding-top: 5rem; padding-bottom: 5rem; }
  .stride { padding-top: 5rem; padding-bottom: 5rem; }
  .work-header { padding: 4rem var(--px) 1.5rem; }
  .foot { padding: 1.5rem var(--px); flex-direction: column; text-align: center; gap: .75rem; }

  /* Case study global */
  .cs-hero-c { padding: 2.5rem var(--px) 2rem; }
  .cs-meta { padding: 1.5rem var(--px); }
  .cs-stat-bar { padding: 1.75rem var(--px); }
  .cs-panel-inner { padding: 2.5rem var(--px); max-width: 100%; }
  .cs-cta { padding: 3.5rem var(--px); }
  .cs-phases { padding: 1.5rem var(--px); }
  .sec, .sec-col { padding-left: var(--px); padding-right: var(--px); }

  /* Hero */
  .h-h1 { font-size: clamp(2.2rem, 7.5vw, 3rem); line-height: 1.06; margin-bottom: 1.2rem; }
  .h-sub { font-size: .92rem; margin-bottom: 2rem; }
  .h-btns { margin-bottom: 2.5rem; flex-direction: column; gap: .75rem; }
  .h-btns .btn-g, .h-btns .btn-o { width: 100%; justify-content: center; text-align: center; }
  .h-kpis { gap: 1.5rem; padding-top: 1.75rem; flex-wrap: wrap; }
  .kpi-n { font-size: 1.7rem; }

  /* Brands */
  .brands-row { gap: 1.25rem 2rem; }

  /* About */
  .about-in { gap: 3rem; }
  .strip { grid-template-columns: repeat(2, 1fr); gap: 3px; }
  .exp-item:hover { padding-left: 0; }

  /* Work panels — stacked card on mobile for readability */
  .cs-panel { flex-direction: column; min-height: unset; }
  .cs-panel-photo {
    position: relative !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    height: 240px; width: 100%; flex-shrink: 0; z-index: 1;
  }
  .cs-panel-photo--mockup {
    background-size: cover !important;
    background-position: center 20% !important;
    height: 260px;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 40%, transparent 80%) !important;
    mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 40%, transparent 80%) !important;
  }
  .cs-panel-grad { display: none; }
  .cs-panel-inner { background: var(--bg2); border-top: 1px solid var(--rule); }
  .cs-panel-h { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .cs-panel-desc { font-size: .88rem; }
  .cs-panel-metrics { gap: 1.5rem; margin-bottom: 1.75rem; }

  /* Stride */
  .stride-grid { grid-template-columns: repeat(2, 1fr); }
  .stride-img { margin: 1.5rem 0; }

  /* Recs */
  .recs-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* CS hero — stronger overlay + tighter height for mobile readability */
  .cs-hero { min-height: 50vh; }
  .cs-hero-over {
    /* !important overrides any inline style so mobile is always readable */
    background: linear-gradient(to top,
      rgba(10,10,12,1) 0%, rgba(10,10,12,.98) 40%,
      rgba(10,10,12,.88) 65%, rgba(10,10,12,.75) 82%,
      rgba(10,10,12,.65) 100%) !important;
  }
  .cs-title { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -.018em; }
  .cs-sub { font-size: .9rem; }

  /* Meta */
  .cs-meta-in { grid-template-columns: 1fr; gap: 1.1rem; }

  /* Stats bar */
  .cs-stat-in { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; flex-wrap: unset; }
  .cs-sn { font-size: 1.75rem; }

  /* Body headings */
  .s-h { font-size: clamp(1.4rem, 5vw, 2rem); }
  .sec-h2 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); }

  /* Phase timeline — horizontal scroll */
  .cs-phases { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cs-phase-in { min-width: max-content; gap: 0; padding-bottom: .25rem; }
  .cs-phase { padding: 0 .75rem; }
  .cs-phase-line { min-width: 28px; }

  /* Context row */
  .cs-context-row { grid-template-columns: 1fr; }
  .cs-ctx { border-right: none; border-bottom: 1px solid var(--rule); }
  .cs-ctx:last-child { border-bottom: none; }

  /* Research grid: 2 col */
  .cs-research-grid { grid-template-columns: 1fr 1fr; }
  .cs-rg-item:nth-child(even) { border-right: none; }
  .cs-rg-item:nth-child(3),
  .cs-rg-item:nth-child(4) { border-top: 1px solid var(--rule); }

  /* Pain grid */
  .pain-g { grid-template-columns: 1fr; }
  .pain-c { border-right: none; }

  /* Personas */
  .persona-g { grid-template-columns: 1fr; }

  /* Slideshow */
  .ss-bar { flex-direction: column; gap: .3rem; align-items: flex-start; padding: .75rem 1rem; }
  .ss-ct { align-self: flex-end; margin-top: -.3rem; }
  .ss-why { display: none; }
  .ss-btn { width: 38px; height: 38px; font-size: .8rem; }
  .ss-btns { bottom: 3.1rem; right: .75rem; }
  .ss-dots { bottom: 3.3rem; left: .75rem; }

  /* Before/After */
  .ba-wrap { grid-template-columns: 1fr; }

  /* Impact */
  .impact-in { grid-template-columns: 1fr 1fr; padding: 2rem var(--px); gap: 1.75rem; }

  /* Timeline component */
  .tl { grid-template-columns: 1fr 1fr; }
  .tl-c { border-right: none; border-bottom: 1px solid var(--rule); }
  .tl-c:nth-child(even) { border-left: 1px solid var(--rule); }

  /* Dual path */
  .dp { grid-template-columns: 1fr; }
  .dp-c { border-right: none; border-bottom: 1px solid var(--rule); }

  /* UT quotes */
  .q-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-h { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
  .cta-btns { flex-direction: column; align-items: stretch; gap: .75rem; }
  .cta-btns .btn-g, .cta-btns .btn-o { width: 100%; justify-content: center; }

  /* img-2col: single column on mobile */
  .img-2col { grid-template-columns: 1fr; }

  /* Callouts */
  .cs-insight { padding: 1.5rem; }
  .hmw { padding: 1.5rem 1.75rem; }
  .pq { padding-left: 1.25rem; }

  /* Learnings / decisions hover effect off */
  .lrn:hover, .dl-item:hover, .exp-item:hover,
  .iter-item:hover { padding-left: 0; }

  /* Text wrapping — flex containers + letter-spacing */
  .cs-co { flex-wrap: wrap; }
  .cs-co-t { white-space: normal; letter-spacing: .12em; }
  .h-eyebrow { letter-spacing: .2em; white-space: normal; }
  .cs-eye { letter-spacing: .18em; }
  .s-eye { letter-spacing: .18em; }
  .sec-eye { letter-spacing: .22em; }
  .w-eye { letter-spacing: .22em; }
  .img-cap { letter-spacing: .1em; }
}

/* ── 480px — Standard phones ─────────────────────────────── */
@media (max-width: 480px) {
  :root { --px: 1rem; }

  /* Nav */
  .nav { padding: 0 var(--px); height: 56px; }
  .nav-logo { font-size: .95rem; }
  .nav-links.mob-open { top: 56px; }
  .nav-links.mob-open .nav-li { display: flex !important; }

  /* All horizontal padding from single token */
  .hero-inner, .about, .contact, .recs, .stride, .brands,
  .work-header, .sec, .sec-col, .cs-hero-c, .cs-meta,
  .cs-stat-bar, .cs-phases, .cs-panel-inner, .cs-cta,
  .foot { padding-left: var(--px); padding-right: var(--px); }
  .impact-in { padding-left: var(--px); padding-right: var(--px); }

  /* Vertical rhythm reductions */
  .hero-inner { padding-top: 66px; padding-bottom: 3rem; }
  .about, .contact, .recs, .stride { padding-top: 4rem; padding-bottom: 4rem; }
  .work-header { padding-top: 3rem; }
  .cs-body { padding: 3rem 0 4.5rem; }
  .cs-cta { padding-top: 3rem; padding-bottom: 3rem; }

  /* Typography scale-down */
  .h-h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .h-sub { font-size: .88rem; line-height: 1.72; }
  .h-eyebrow { font-size: .52rem; margin-bottom: 1.4rem; }
  .h-avail-t { font-size: .5rem; }
  .kpi-n { font-size: 1.55rem; }
  .kpi-l { font-size: .46rem; }
  .h-kpis { gap: 1.2rem; padding-top: 1.5rem; }

  .sec-h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .s-h { font-size: clamp(1.25rem, 6vw, 1.65rem); }
  .cs-title { font-size: clamp(1.75rem, 8.5vw, 2.5rem); letter-spacing: -.016em; }
  .cta-h { font-size: clamp(1.35rem, 6.5vw, 1.9rem); }
  .c-h { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .w-h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .pq-t { font-size: clamp(.95rem, 4.5vw, 1.15rem); }
  .hmw p { font-size: clamp(.88rem, 4vw, 1rem); }
  .cs-insight-p { font-size: .95rem; }
  .body-p { font-size: .9rem; line-height: 1.75; }
  .cs-p { font-size: .9rem; line-height: 1.78; }
  .cs-sub { font-size: .88rem; }

  /* Buttons */
  .btn-g, .btn-o { padding: .85rem 1.4rem; font-size: .58rem; }

  /* Stats bar: 2×2 grid */
  .cs-stat-in { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .cs-sn { font-size: 1.55rem; }
  .cs-sl { font-size: .44rem; }

  /* CS meta */
  .cs-meta-in { gap: 1rem; }
  .cs-ml { font-size: .46rem; }
  .cs-mv { font-size: .84rem; line-height: 1.55; }

  /* Research grid: 1 column */
  .cs-research-grid { grid-template-columns: 1fr; }
  .cs-rg-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .cs-rg-item:nth-child(3),
  .cs-rg-item:nth-child(4) { border-top: none; }
  .cs-rg-item:last-child { border-bottom: none; }
  .cs-rg-n { font-size: 2rem; }
  .cs-rg-t { font-size: .84rem; }
  .cs-rg-b { font-size: .76rem; }

  /* Context row */
  .cs-ctx-n { font-size: 1.7rem; }
  .cs-ctx-l { font-size: .46rem; }
  .cs-ctx { padding: 1.25rem; }

  /* Insight */
  .cs-insight { padding: 1.25rem; }
  .cs-insight-label { font-size: .46rem; }

  /* Impact: 1 column */
  .impact-in { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .imp-n { font-size: 2.2rem; }
  .imp-t { font-size: .48rem; }
  .imp-b { font-size: .84rem; }

  /* Stride: 2 cols */
  .stride-grid { grid-template-columns: 1fr 1fr; }
  .stride-cell { padding: 1.1rem .9rem; }
  .sl { font-size: 2.2rem; }
  .sw { font-size: .5rem; }
  .sd { font-size: .78rem; }

  /* Strip: 2 columns */
  .strip { grid-template-columns: repeat(2, 1fr); }

  /* Case study panels */
  .cs-panel { min-height: unset; }
  .cs-panel-photo { height: 200px; }
  .cs-panel-h { font-size: clamp(1.3rem, 5.5vw, 1.75rem); }
  .cs-panel-desc { font-size: .84rem; margin-bottom: 1.5rem; }
  .cs-panel-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
  .cs-pm .n { font-size: 1.1rem; }
  .cs-pm .l { font-size: .65rem; }
  .cs-panel-tag { font-size: .68rem; }
  .cs-panel-cta { font-size: .68rem; padding: .6rem 1.4rem; }

  /* Learnings & decisions */
  .lrn-t, .dl-t { font-size: .9rem; }
  .lrn-b, .dl-b { font-size: .875rem; }
  .lrn-n, .dl-n { font-size: .65rem; }
  .dl-note { display: none; }

  /* Iteration items */
  .iter-t { font-size: .88rem; }
  .iter-b { font-size: .84rem; }

  /* Timeline */
  .tl { grid-template-columns: 1fr; }
  .tl-c { border-right: none; border-left: none; border-bottom: 1px solid var(--rule); padding: 1.2rem .75rem; }
  .tl-c:last-child { border-bottom: none; }

  /* Callouts */
  .hmw { padding: 1.25rem 1.5rem; }
  .pq { padding: 1rem 0 1rem 1rem; margin: 1.5rem 0; }
  .img-cap { font-size: .65rem; padding: .65rem var(--px); }

  /* Slideshow buttons larger for touch */
  .ss-btn { width: 42px; height: 42px; font-size: .85rem; }
  .ss-bar { padding: .65rem var(--px); }

  /* Contact */
  .c-email { font-size: 1rem; }

  /* Chips & tags */
  .chip { font-size: .65rem; padding: .25rem .7rem; }
  .ptag { font-size: .65rem; }

  /* Persona */
  .pbadge { font-size: .65rem; }
  .pname { font-size: .9rem; }
  .pq-cs { font-size: .84rem; }

  /* UT quotes */
  .q-t { font-size: .9rem; }
  .q-a { font-size: .65rem; }
  .q-blk { padding: 1.5rem; }

  /* Letter-spacing reductions for narrow screens */
  .h-eyebrow { letter-spacing: .14em; }
  .cs-eye { letter-spacing: .14em; }
  .s-eye { letter-spacing: .14em; }
  .cs-co-t { letter-spacing: .1em; }
  .img-cap { letter-spacing: .08em; }
  .cs-sl { letter-spacing: .1em; }
  .cs-ml { letter-spacing: .12em; }
  .sec-eye { letter-spacing: .16em; }
  .w-eye { letter-spacing: .16em; }
  .h-avail-t { letter-spacing: .1em; }
  .brands-lbl { letter-spacing: .16em; }
  .cs-ph-label { letter-spacing: .1em; }
  .cs-ph-sub { letter-spacing: .06em; }
  .dl-n { letter-spacing: .12em; }
  .dl-note { letter-spacing: .06em; }
  .lrn-n { letter-spacing: .12em; }
  .iter-n { letter-spacing: .12em; }
  .tl-dt { letter-spacing: .1em; }
  .pain-n { letter-spacing: .1em; }
  .exp-role { letter-spacing: .1em; }
  .exp-yr { letter-spacing: .08em; }
  .soc { letter-spacing: .12em; }
  .chip { letter-spacing: .08em; }
  .ptag { letter-spacing: .08em; }
  .itag { letter-spacing: .06em; }

  /* Flex min-width: 0 so text truncates/wraps instead of overflowing */
  .cs-co-t { flex: 1; min-width: 0; }
  .dp-ul li, .ba-list li { min-width: 0; }
}

/* ── 375px — Small phones ────────────────────────────────── */
@media (max-width: 375px) {
  :root { --px: .875rem; }

  .h-h1 { font-size: 1.8rem; }
  .cs-title { font-size: 1.65rem; }
  .sec-h2 { font-size: 1.45rem; }
  .s-h { font-size: 1.2rem; }
  .c-h { font-size: 1.65rem; }
  .cta-h { font-size: 1.3rem; }
  .cs-panel-h { font-size: 1.25rem; }
  .cs-panel-photo { height: 180px; }
  .w-h2 { font-size: 1.45rem; }
  .h-sub, .cs-sub, .body-p, .cs-p { font-size: .9rem; }

  .cs-sn { font-size: 1.4rem; }
  .imp-n { font-size: 1.9rem; }
  .cs-ctx-n { font-size: 1.5rem; }
  .cs-rg-n { font-size: 1.75rem; }

  .stride-grid { grid-template-columns: 1fr; }
  .stride-cell { padding: 1rem .875rem; }

  .cs-panel-metrics { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .cs-panel-cta { padding: .58rem 1.1rem; font-size: .68rem; }

  .btn-g, .btn-o { padding: .8rem 1.1rem; font-size: .68rem; }

  /* Letter-spacing for 375px — keep tight but readable */
  .h-eyebrow { letter-spacing: .12em; }
  .cs-eye { letter-spacing: .12em; }
  .s-eye { letter-spacing: .12em; }
  .img-cap { letter-spacing: .07em; }
  .cs-sl { letter-spacing: .08em; }
  .brands-lbl { letter-spacing: .14em; }
  .dl-n { letter-spacing: .1em; }
  .lrn-n { letter-spacing: .1em; }
  .sec-eye { letter-spacing: .14em; }
  .w-eye { letter-spacing: .14em; }
  .dl-note { letter-spacing: .05em; }
  .pain-n { letter-spacing: .08em; }
  .tl-dt { letter-spacing: .08em; }
}