/* ============================================================
   AHAD PADANIA — personal site
   Bold editorial system. Cream · Ink · Orange.
   (live-reload verified)
   ============================================================ */

:root{
  --cream:      #F4EEDE;
  --cream-2:    #EAE2CE;   /* alt section band */
  --cream-3:    #E1D8C2;
  --ink:        #17110B;   /* warm near-black */
  --ink-2:      #1F1710;
  --orange:     #F1541F;
  --orange-ink: #C33F12;
  --muted:      #6E6455;   /* body on cream */
  --muted-2:    #A79C88;   /* faint labels */
  --line:       #cdc3ad;   /* hairlines on cream */
  --line-dk:    #38302533;
  --on-dark:    #EFE7D6;
  --on-dark-mut:#9B9789;

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 64px);

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --f-body: "Figtree", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--orange); color:#fff; }

/* ---------- shared layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.band{ padding:clamp(64px,9vw,120px) 0; }
.band--dark{ background:var(--ink); color:var(--on-dark); }
.band--alt{ background:var(--cream-2); }
.rule{ border:0; border-top:1.5px solid var(--ink); margin:0; opacity:.9; }
.rule--soft{ border-top:1px solid var(--line); }

/* ---------- type ---------- */
.kicker{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  margin:0 0 1.2rem;
}
.kicker--mut{ color:var(--muted-2); }
.dark .kicker--mut, .band--dark .kicker--mut{ color:var(--on-dark-mut); }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:900; line-height:.92; letter-spacing:-.02em; margin:0; text-transform:uppercase; }
.display{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  line-height:.86; letter-spacing:-.025em;
  font-size:clamp(3.2rem, 11vw, 9rem);
}
.h-xl{ font-size:clamp(2.6rem,7vw,5.4rem); line-height:.92; }
.h-lg{ font-size:clamp(2rem,4.6vw,3.4rem); }
.h-md{ font-size:clamp(1.5rem,3vw,2.1rem); }
.orange{ color:var(--orange); }
.lede{
  font-family:var(--f-body); font-weight:400; text-transform:none;
  font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.5; color:var(--muted);
  letter-spacing:0; max-width:44ch;
}
.band--dark .lede{ color:var(--on-dark-mut); }
.muted{ color:var(--muted); }
.meta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{ width:50px; height:50px; display:block; flex:none; border-radius:12px; }
.brand__word{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:1.35rem; letter-spacing:-.01em; line-height:1;
}
.brand__word .dot{ color:var(--orange); }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.nav__links a:not(.nav__cta){
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:400; position:relative; padding:6px 0;
}
.nav__links a:not(.nav__cta):hover{ color:var(--orange); }
.nav__links a.active{ color:var(--orange); }
.nav__cta{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); padding:12px 22px; border-radius:999px;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.nav__cta:hover{ background:var(--orange); color:#fff; transform:translateY(-1px); }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ display:block; width:24px; height:2.5px; background:var(--ink); margin:5px 0; transition:.3s var(--ease); }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ opacity:0; }
.nav.open .nav__burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:15px 30px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:disabled{ opacity:.55; cursor:default; transform:none !important; }
.btn--fill{ background:var(--orange); color:#fff; }
.btn--fill:hover{ transform:translateY(-2px); background:#ff6a35; }
.btn--ghost{ border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.band--dark .btn--ghost{ border-color:var(--on-dark); color:var(--on-dark); }
.band--dark .btn--ghost:hover{ background:var(--on-dark); color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--ink); color:var(--on-dark); overflow:hidden; position:relative; }
.hero__in{ display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center;
  min-height:clamp(560px,86vh,880px); padding-top:clamp(40px,7vw,80px); padding-bottom:clamp(40px,7vw,80px); }
.hero__kicker{ color:var(--orange); }
.hero h1{ color:var(--on-dark); margin:.4rem 0 0; }
.hero h1 .l{ display:block; }
.hero__sub{ margin:2rem 0 2.4rem; color:var(--on-dark-mut); max-width:42ch; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; }
.hero__cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero__photo{ position:relative; justify-self:end; width:min(100%,420px); aspect-ratio:4/5; }
.hero__arch{ position:absolute; inset:0; background:var(--orange); border-radius:999px 999px 20px 20px; }
.hero__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 28%; border-radius:999px 999px 20px 20px; mix-blend-mode:normal; }
.hero__badge{ position:absolute; left:-14px; bottom:26px; background:var(--cream); color:var(--ink);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 14px; border-radius:10px; font-weight:700; box-shadow:0 12px 30px #0006; }

/* ---------- marquee ---------- */
.marquee{ background:var(--ink); color:var(--cream); border-top:1px solid #ffffff14; border-bottom:1px solid #ffffff14;
  padding:22px 0; overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; gap:0; animation:scroll 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.01em; padding:0 34px; display:inline-flex; align-items:center; }
.marquee__track b{ color:var(--orange); font-weight:900; padding:0 14px; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats .stat{ padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px); border-left:1px solid var(--line); }
.stats .stat:first-child{ border-left:0; }
.stat__num{ font-family:var(--f-display); font-weight:900; font-size:clamp(2.6rem,5vw,4rem); line-height:1; letter-spacing:-.03em; }
.stat__lab{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.8rem; }

/* ---------- feature split ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.feature__img{ position:relative; min-height:clamp(320px,44vw,560px); overflow:hidden; }
.feature__img img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.feature__tag{ position:absolute; left:22px; bottom:22px; background:var(--ink); color:var(--cream);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; font-weight:700; }
.feature__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,6vw,90px); }
.feature__body .divider{ width:96px; border-top:2px solid var(--ink); margin:2rem 0 1.2rem; }
.arrow-link{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; display:inline-flex; gap:10px; align-items:center; }
.arrow-link:hover{ color:var(--orange); }
.arrow-link:hover .ar{ transform:translateX(6px); }
.ar{ transition:transform .25s var(--ease); }

/* ---------- method / 3-up ---------- */
.method__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,64px); margin-top:clamp(40px,5vw,64px); }
.method__item .top{ border-top:2px solid var(--ink); padding-top:1rem; }
.method__no{ font-family:var(--f-mono); color:var(--orange); font-size:.8rem; letter-spacing:.1em; font-weight:700; }
.method__item h3{ font-size:clamp(1.3rem,2.4vw,1.9rem); margin:.6rem 0 .8rem; }
.method__item p{ color:var(--muted); margin:0; }

/* ---------- latest writing ---------- */
.writing__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.wlist{ margin-top:clamp(24px,3vw,40px); }
.wrow{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  padding:clamp(20px,2.4vw,30px) 0; border-top:1.5px solid var(--ink); transition:padding-left .3s var(--ease); }
.wrow:last-child{ border-bottom:1.5px solid var(--ink); }
.wrow:hover{ padding-left:14px; }
.wrow h3{ font-size:clamp(1.3rem,3vw,2.1rem); transition:color .2s var(--ease); }
.wrow:hover h3{ color:var(--orange); }
.wrow .meta{ text-align:right; white-space:nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--on-dark); padding:clamp(56px,7vw,96px) 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:clamp(48px,6vw,80px); }
.footer__big{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; line-height:.85; font-size:clamp(3rem,6vw,4.6rem); letter-spacing:-.02em; }
.footer__big .o{ color:var(--orange); }
.footer p{ color:var(--on-dark-mut); max-width:34ch; margin:1.4rem 0 0; }
.footer__col h4{ font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.2em; color:var(--orange); text-transform:uppercase; margin:6px 0 18px; }
.footer__col a{ display:block; color:var(--on-dark); padding:6px 0; font-size:.98rem; opacity:.9; }
.footer__col a:hover{ color:var(--orange); opacity:1; }
.footer__bar{ border-top:1px solid #ffffff1a; padding:22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer__bar span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--on-dark-mut); text-transform:uppercase; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.phead{ padding:clamp(56px,8vw,120px) 0 clamp(40px,5vw,72px); }
.phead h1{ font-size:clamp(3.4rem,12vw,9rem); line-height:.84; }
.phead .lede{ margin-top:1.8rem; }
.phead__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,64px); align-items:center; }
.phead__photo{ justify-self:end; }

/* ---------- timeline (story) ---------- */
.timeline{ display:grid; gap:0; }
.tl{ display:grid; grid-template-columns:120px 1fr; gap:clamp(16px,3vw,48px); padding:clamp(26px,3.4vw,42px) 0; border-top:1.5px solid var(--ink); }
.tl:last-child{ border-bottom:1.5px solid var(--ink); }
.tl__year{ font-family:var(--f-display); font-weight:900; color:var(--orange); font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1; }
.tl__body h3{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.6rem; }
.tl__body p{ color:var(--muted); margin:0; max-width:60ch; }
.story__timeline{ max-width:900px; margin:0 auto; }
.story__split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:start; }
.story__aside{ position:sticky; top:100px; }
.story__aside figcaption{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.story__aside img{ border:1.5px solid var(--ink); }

/* ---------- projects ---------- */
.pgrid{ display:grid; grid-template-columns:1fr 1fr; }
.pcard{ padding:clamp(32px,4vw,58px) clamp(20px,3vw,50px); border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink);
  transition:background .3s var(--ease); position:relative; }
.pgrid .pcard:nth-child(2n){ border-right:0; }
.pcard:hover{ background:var(--cream-2); }
.pcard__top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.pcard__no{ font-family:var(--f-mono); color:var(--orange); font-weight:700; font-size:.82rem; letter-spacing:.1em; }
.pcard__cat{ font-family:var(--f-mono); color:var(--muted-2); font-weight:700; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
.pcard h3{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin:clamp(28px,4vw,56px) 0 .8rem; }
.pcard p{ color:var(--muted); margin:0 0 1rem; max-width:46ch; }
.pcard .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:1rem; }
.tag{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--muted); }

/* ---------- companies ---------- */
.crow{ display:grid; grid-template-columns:1.1fr 1.3fr .6fr; gap:clamp(18px,3vw,40px); align-items:center;
  padding:clamp(26px,3.4vw,44px) 0; border-top:1.5px solid var(--ink); transition:padding-left .3s var(--ease); }
.companies-list .crow:last-child{ border-bottom:1.5px solid var(--ink); }
.crow:hover{ padding-left:14px; }
.crow__name{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,4.4vw,3.4rem); line-height:.9; letter-spacing:-.02em; }
.crow:hover .crow__name{ color:var(--orange); }
.crow__desc{ color:var(--muted); margin:0; }
.crow__meta{ text-align:right; }
.crow__role{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); font-weight:700; }
.crow__span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:6px; }

/* ---------- blog grid ---------- */
.feat-post{ display:block; background:var(--ink); color:var(--on-dark); border-radius:6px; overflow:hidden; padding:clamp(36px,6vw,72px);
  position:relative; transition:transform .3s var(--ease); }
.feat-post:hover{ transform:translateY(-4px); }
.feat-post .kicker{ color:var(--orange); }
.feat-post h2{ color:var(--on-dark); font-size:clamp(2.4rem,6vw,5rem); line-height:.88; max-width:16ch; }
.feat-post p{ color:var(--on-dark-mut); max-width:52ch; margin-top:1.4rem; }
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); }
.bcard{ padding:clamp(30px,3.4vw,48px) clamp(20px,2.6vw,40px); border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink);
  min-height:clamp(220px,24vw,300px); display:flex; flex-direction:column; transition:background .3s var(--ease); }
.bgrid .bcard:nth-child(3n){ border-right:0; }
.bcard:hover{ background:var(--cream-2); }
.bcard__cat{ font-family:var(--f-mono); color:var(--orange); font-weight:700; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }
.bcard h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:clamp(20px,3vw,40px) 0 auto; }
.bcard__read{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:1.4rem; }

/* ---------- connect ---------- */
.connect__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.ctrack .cway{ padding:clamp(22px,2.6vw,34px) 0; border-top:1.5px solid var(--ink); }
.ctrack .cway:last-child{ border-bottom:1.5px solid var(--ink); }
.cway h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.5rem; }
.cway p{ color:var(--muted); margin:0; }
.cway a.big{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:-.02em; display:inline-block; margin-top:.2rem; word-break:break-word; }
.cway a.big:hover{ color:var(--orange); }
.form{ background:var(--ink); color:var(--on-dark); padding:clamp(30px,4vw,52px); border-radius:6px; }
.form .kicker{ color:var(--orange); }
.field{ margin-top:1.8rem; }
.field label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-mut); display:block; margin-bottom:.6rem; }
.field input,.field textarea{ width:100%; background:transparent; border:0; border-bottom:1.5px solid #ffffff2e; color:var(--on-dark);
  font-family:var(--f-body); font-size:1.05rem; padding:10px 2px; outline:none; transition:border-color .25s var(--ease); }
.field input::placeholder,.field textarea::placeholder{ color:#ffffff3a; }
.field input:focus,.field textarea:focus{ border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:80px; }
.form .btn{ width:100%; justify-content:center; margin-top:2rem; }
.form__note{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:#7fd18a; margin-top:1rem; min-height:1em; }

/* ---------- article (long form) ---------- */
.article{ padding:clamp(40px,6vw,80px) 0 clamp(40px,6vw,80px); }
.backlink{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted); display:inline-flex; gap:8px; }
.backlink:hover{ color:var(--orange); }
.article__head{ max-width:820px; margin:clamp(24px,4vw,40px) auto clamp(30px,5vw,52px); }
.article__cat{ font-family:var(--f-mono); color:var(--orange); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.article__head h1{ font-size:clamp(2.3rem,6vw,4.2rem); line-height:.96; margin:1.1rem 0 1.4rem; }
.article__meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.article__meta span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.article__meta .sep{ color:var(--muted-2); }
.article__body{ max-width:680px; margin:0 auto; }
.article__body > p{ font-size:1.14rem; line-height:1.78; color:#2b2319; margin:0 0 1.5rem; }
.article__body .lead{ font-size:1.3rem; line-height:1.6; color:var(--ink); }
.article__body h2{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(1.35rem,3vw,1.9rem); letter-spacing:-.01em; line-height:1.02; margin:2.6rem 0 1rem; }
.article__body strong{ font-weight:600; color:var(--ink); }
.article__body a{ color:var(--orange-ink); text-decoration:underline; text-underline-offset:3px; }
.article__body blockquote{ margin:2.2rem 0; padding:.2rem 0 .2rem 1.5rem; border-left:3px solid var(--orange);
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; line-height:1.06; letter-spacing:-.01em;
  font-size:clamp(1.35rem,3vw,1.9rem); color:var(--ink); }
.article__body ul{ padding-left:1.2rem; margin:0 0 1.5rem; }
.article__body li{ font-size:1.14rem; line-height:1.7; color:#2b2319; margin-bottom:.7rem; }
.article__foot{ max-width:680px; margin:clamp(40px,5vw,64px) auto 0; padding-top:1.5rem; border-top:1.5px solid var(--ink);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.byline{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- pull quote band ---------- */
.quote{ background:var(--ink); color:var(--on-dark); text-align:center; padding:clamp(60px,9vw,130px) 0; }
.quote p{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; line-height:.98;
  font-size:clamp(2rem,5.5vw,4.4rem); letter-spacing:-.02em; max-width:20ch; margin:0 auto; }

/* ---------- scroll progress bar ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--orange); z-index:100; transition:width .08s linear; }

/* ---------- carousel / slider ---------- */
.carousel{ overflow:hidden; }
.slider{ position:relative; margin-top:clamp(28px,4vw,48px); overflow:hidden; }
.slider__track{ display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.slide{ min-width:100%; margin:0; position:relative; }
.slide img{ width:100%; height:clamp(340px,52vw,620px); object-fit:cover; display:block; }
.slide figcaption{ position:absolute; inset:auto 0 0 0; padding:clamp(22px,4vw,44px);
  background:linear-gradient(to top, rgba(9,7,5,.9), rgba(9,7,5,.35) 55%, transparent);
  color:var(--on-dark); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.slider__btn{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  background:rgba(20,16,11,.5); color:#fff; border:1px solid #ffffff30; cursor:pointer; font-size:1.5rem; line-height:1;
  display:grid; place-items:center; backdrop-filter:blur(6px); transition:background .25s var(--ease), transform .25s var(--ease); z-index:2; }
.slider__btn:hover{ background:var(--orange); border-color:transparent; transform:translateY(-50%) scale(1.07); }
.slider__prev{ left:18px; } .slider__next{ right:18px; }
.slider__dots{ display:flex; gap:10px; justify-content:center; margin-top:22px; }
.slider__dot{ width:9px; height:9px; border-radius:50%; background:#ffffff33; border:0; cursor:pointer; padding:0; transition:background .25s var(--ease), transform .25s var(--ease); }
.slider__dot.active{ background:var(--orange); transform:scale(1.3); }
@media (max-width:640px){ .slider__btn{ width:40px; height:40px; font-size:1.2rem; } .slider__prev{ left:10px; } .slider__next{ right:10px; } }

/* ============================================================
   reveal on scroll
   ============================================================ */
/* reveals are a progressive enhancement: only hide when JS is active,
   so content is always visible if JS or IntersectionObserver fails. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; gap:36px; }
  .hero__photo{ justself:start; order:-1; width:min(78%,340px); }
  .feature{ grid-template-columns:1fr; }
  .method__grid{ grid-template-columns:1fr; gap:28px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats .stat:nth-child(3){ border-left:0; }
  .stats .stat{ border-top:1px solid var(--line); }
  .stats .stat:first-child,.stats .stat:nth-child(2){ border-top:0; }
  .pgrid{ grid-template-columns:1fr; }
  .pgrid .pcard{ border-right:0; }
  .bgrid{ grid-template-columns:1fr; }
  .bgrid .bcard{ border-right:0; }
  .connect__grid{ grid-template-columns:1fr; }
  .phead__grid{ grid-template-columns:1fr; gap:36px; }
  .phead__photo{ order:0; justify-self:start; width:min(70%,320px); }
  .story__split{ grid-template-columns:1fr; }
  .story__aside{ position:static; order:-1; }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .crow{ grid-template-columns:1fr; gap:8px; }
  .crow__meta{ text-align:left; }
  .tl{ grid-template-columns:70px 1fr; }
}
@media (max-width:640px){
  .nav__links{
    position:fixed; inset:74px 0 auto 0; background:var(--ink); flex-direction:column; align-items:flex-start;
    gap:0; padding:12px var(--pad) 26px; transform:translateY(-120%); transition:transform .35s var(--ease); z-index:40;
  }
  .nav.open .nav__links{ transform:none; }
  .nav__links a{ color:var(--on-dark); font-size:.9rem; padding:16px 0; width:100%; border-bottom:1px solid #ffffff12; letter-spacing:.16em; }
  .nav__links .nav__cta{ margin-top:16px; }
  .nav__burger{ display:block; }
  .quote p{ font-size:clamp(1.7rem,8vw,2.4rem); }
}