/* ============================================================
   THE KETTLE BLACK — thekettleblack.in
   Brand: monochrome + single plum accent. Editorial. Spare.
   ============================================================ */

:root{
  --ink:#000000;
  --ink-soft:#1A1A1A;
  --cream:#F6F7F2;
  --cream-2:#EEEDE6;
  --cream-3:#E2DDD4;
  --stone:#808080;
  --stone-soft:#6b655e;
  --plum:#6B2D5C;
  --plum-deep:#4A1E40;
  --plum-tint:#F0E4EC;

  --disp:'Cormorant Garamond', Georgia, serif;
  --body:'Open Sans', system-ui, -apple-system, sans-serif;

  --hair:1px solid rgba(0,0,0,.12);
  --hair-light:1px solid rgba(255,255,255,.16);
  --wrap:1120px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* ---- the plum dot, the one spark ---- */
.dot{color:var(--plum)}

.wordmark{
  font-family:var(--disp);
  font-weight:500;
  letter-spacing:.02em;
}

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stone);
  margin-bottom:22px;
}
.eyebrow--light{color:rgba(255,255,255,.66)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:14px;
  letter-spacing:.04em;
  padding:14px 26px;
  border:1px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--plum);border-color:var(--plum);color:#fff}
.btn--primary:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--sm{padding:10px 18px;font-size:13px}
.btn--lg{padding:17px 34px;font-size:15px}
.btn--block{display:flex;width:100%;margin-top:auto}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(246,247,242,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:var(--hair);
  transition:box-shadow .3s var(--ease);
}
.nav.is-scrolled{box-shadow:0 1px 24px rgba(0,0,0,.06)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px}
.nav__brand{display:flex;align-items:center;line-height:0;flex:0 0 auto}
/* logo aspect locked — never stretched or compressed */
.nav__logo{height:38px;width:auto;max-width:none;flex:none;object-fit:contain;display:block}
.nav__cta{display:inline-flex;align-items:center;gap:8px}
.nav__cta-icon{display:none}
.nav__right{display:flex;align-items:center;gap:22px}
.nav__enable{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink);padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap}
.nav__enable:hover{color:var(--plum);border-color:var(--plum)}

/* ============ HERO ============ */
.hero{padding:clamp(70px,13vh,150px) 0 clamp(56px,9vh,110px);position:relative}
.hero__title{
  font-family:var(--disp);
  font-weight:500;
  font-size:clamp(46px,9vw,104px);
  line-height:1.0;
  letter-spacing:-.005em;
  margin-bottom:30px;
}
.hero__sub{
  font-weight:300;
  font-size:clamp(18px,2.4vw,23px);
  line-height:1.55;
  max-width:42ch;
  color:var(--ink-soft);
  margin-bottom:38px;
}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__note{
  margin-top:46px;font-family:var(--disp);font-style:italic;
  font-size:19px;color:var(--stone);
}

/* ============ PROOF BAR ============ */
.proof{border-block:var(--hair);background:var(--cream)}
.proof__inner{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-block:22px}
.proof__label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.proof__list{display:flex;align-items:center;gap:14px;flex-wrap:wrap;list-style:none;font-family:var(--disp);font-size:20px;font-weight:500}
.proof__list .sep{color:var(--cream-3)}
.proof__list .muted{font-family:var(--body);font-size:12px;letter-spacing:.04em;color:var(--stone)}

/* ============ SECTION SHELL ============ */
.section{padding:clamp(64px,10vw,128px) 0}
.section--tint{background:var(--cream-2)}
.section__head{max-width:60ch;margin-bottom:clamp(40px,6vw,72px)}
.section__head--center{margin-inline:auto;text-align:center}
.section__title{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.005em;
}
.section__lead{margin-top:20px;font-weight:300;font-size:clamp(17px,2vw,20px);color:var(--ink-soft);line-height:1.6}

/* ============ CARDS (2 options) ============ */
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{
  display:flex;flex-direction:column;
  border:var(--hair);background:var(--cream);
  padding:clamp(28px,3.4vw,46px);
}
.card--alt{background:#fff}
.card__tag{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--plum);margin-bottom:18px}
.card__title{font-family:var(--disp);font-weight:500;font-size:clamp(30px,3.6vw,42px);line-height:1.04;margin-bottom:16px}
.card__desc{color:var(--ink-soft);font-weight:300;margin-bottom:24px}
.card__list{list-style:none;margin-bottom:30px;display:flex;flex-direction:column;gap:11px}
.card__list li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-soft)}
.card__list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--plum);border-radius:50%}

/* ============ TIMELINE (process) ============ */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:var(--hair)}
.timeline__step{padding:34px 24px 8px 0;border-right:var(--hair);position:relative}
.timeline__step:last-child{border-right:0}
.timeline__step::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--plum)}
.timeline__num{font-family:var(--disp);font-size:48px;font-weight:500;color:var(--cream-3);display:block;line-height:1;margin-bottom:14px}
.timeline__step h3{font-family:var(--disp);font-weight:600;font-size:23px;margin-bottom:8px}
.timeline__step p{font-size:14px;color:var(--stone-soft);line-height:1.55;padding-right:10px}

/* ============ DARK — AI CONTROL CENTRE ============ */
.section--dark{background:var(--ink);color:var(--cream)}
.section__title--light{color:#fff}
.section__lead--light{color:rgba(255,255,255,.7)}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.skill{background:var(--ink);padding:clamp(26px,2.6vw,38px)}
.skill h3{font-family:var(--disp);font-weight:600;font-size:24px;margin-bottom:10px;color:#fff}
.skill h3::after{content:".";color:var(--plum)}
.skill p{font-size:14px;color:rgba(255,255,255,.62);line-height:1.55}
.skill--more{background:var(--plum-deep)}
.skill--more h3::after{content:""}

/* ============ CASES ============ */
.cases{display:flex;flex-direction:column;border-top:var(--hair)}
.case{display:grid;grid-template-columns:.8fr 2fr;gap:40px;padding:clamp(30px,4vw,52px) 0;border-bottom:var(--hair)}
.case__name{font-family:var(--disp);font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.05}
.case__sector{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-top:8px}
.case__body p{color:var(--ink-soft);font-weight:300;max-width:60ch}
.case__body em{color:var(--stone);font-style:italic}
.case__stat{margin-top:18px;font-family:var(--disp);font-style:italic;font-size:21px;color:var(--ink)}
.case__stat span{color:var(--plum);font-style:normal;font-weight:600}

/* ============ TRAINING ============ */
.training__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.training__quote{font-family:var(--disp);font-style:italic;font-size:26px;color:var(--plum);margin:28px 0 30px;line-height:1.3}
.stages{list-style:none;display:flex;flex-direction:column;gap:2px}
.stage{display:flex;gap:24px;align-items:flex-start;background:var(--cream);padding:26px 28px;border:var(--hair)}
.stage__num{font-family:var(--disp);font-weight:500;font-size:40px;line-height:1;color:var(--plum);min-width:38px}
.stage h3{font-family:var(--disp);font-weight:600;font-size:24px;margin-bottom:4px}
.stage p{font-size:14.5px;color:var(--stone-soft);line-height:1.55}

/* ============ WHY ============ */
.why{list-style:none;display:flex;flex-direction:column;gap:6px;border-top:var(--hair);padding-top:18px}
.why li{
  font-family:var(--disp);font-weight:500;
  font-size:clamp(26px,4.4vw,50px);line-height:1.18;
  letter-spacing:-.01em;display:flex;align-items:baseline;gap:18px;
  padding:8px 0;
}
.why li .dot{font-size:.4em;transform:translateY(-.25em)}
.why__line{margin-top:34px;max-width:62ch;font-weight:300;font-size:clamp(17px,2vw,20px);color:var(--ink-soft)}

/* ============ CTA ============ */
.cta{text-align:center;background:var(--cream-2);border-top:var(--hair)}
.cta__title{font-family:var(--disp);font-weight:500;font-size:clamp(42px,8vw,88px);line-height:1}
.cta__sub{margin:20px auto 36px;font-weight:300;font-size:clamp(18px,2.2vw,22px);color:var(--ink-soft);max-width:40ch}
.cta__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta__email{margin-top:26px;font-size:15px;color:var(--stone)}
.cta__email a{border-bottom:1px solid var(--plum);color:var(--plum);padding-bottom:1px}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(48px,7vw,80px) 0 30px}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:var(--hair-light)}
.footer__logo{width:190px;height:auto;max-width:60vw;object-fit:contain;margin-bottom:16px}
.footer__by{margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;opacity:.92}
.footer__brand p{font-size:14px;max-width:30ch}
.footer__nav{display:flex;flex-direction:column;gap:10px}
.footer__nav a{font-size:14px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.8)}
.footer__nav a:hover{color:#fff}
.footer__contact{display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer__contact a:hover{color:#fff}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.45)}

/* ============ SEGMENT CARDS (3) ============ */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.1);border:var(--hair)}
.seg{background:var(--cream);padding:clamp(28px,3vw,42px)}
.seg__num{font-family:var(--disp);font-size:34px;font-weight:500;color:var(--cream-3);display:block;margin-bottom:18px}
.seg__title{font-family:var(--disp);font-weight:600;font-size:26px;margin-bottom:12px}
.seg__title::after{content:".";color:var(--plum)}
.seg p{font-size:15px;color:var(--stone-soft);line-height:1.6}

/* ============ BENEFITS ============ */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,0,0,.1);border:var(--hair)}
.benefit{background:var(--cream-2);padding:clamp(28px,3.4vw,48px)}
.benefit h3{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.6vw,30px);margin-bottom:12px}
.benefit h3::after{content:".";color:var(--plum)}
.benefit p{color:var(--ink-soft);font-weight:300;font-size:16px;line-height:1.6;max-width:46ch}

/* ============ PROMISE ============ */
.promise{margin-top:54px;border-left:3px solid var(--plum);padding:6px 0 6px 30px;max-width:70ch}
.promise__lead{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--plum);margin-bottom:12px}
.promise__body{font-family:var(--disp);font-size:clamp(22px,3vw,30px);line-height:1.4;font-weight:400}
.promise__body strong{font-weight:600}

/* ============ WORK SHOWCASE ============ */
.work{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,72px);align-items:center;padding:clamp(36px,5vw,70px) 0;border-top:var(--hair)}
.work--rev{grid-template-columns:1fr 1.05fr}
.work--rev .work__media{order:2}
.work__media{border:var(--hair);background:#fff;box-shadow:0 30px 60px -34px rgba(0,0,0,.4);overflow:hidden}
.work__media img{width:100%;display:block}
.work__head{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.work__logo{height:30px;width:auto}
.work__tag{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--plum);border:1px solid var(--plum);padding:5px 11px;border-radius:999px}
.work__tag--time{color:var(--ink-soft);border-color:rgba(0,0,0,.18)}
.work__title{font-family:var(--disp);font-weight:500;font-size:clamp(28px,3.4vw,40px);line-height:1.06;margin-bottom:10px}
.work__link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--plum);margin-bottom:18px;letter-spacing:.01em}
.work__link svg{flex:none}
.work__link:hover{color:var(--plum-deep);text-decoration:underline}
.work__stack-note{font-size:13.5px;font-weight:300;color:var(--stone-soft);font-style:italic;max-width:52ch;margin:-4px 0 16px;line-height:1.5}
.work__desc{color:var(--ink-soft);font-weight:300;font-size:16px;line-height:1.62;max-width:54ch;margin-bottom:22px}
.work__stack-label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-bottom:12px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);background:var(--cream);border:var(--hair);padding:6px 11px;border-radius:999px}
.work--rev .chips li{background:#fff}
.work-mini{display:grid;grid-template-columns:.8fr 2fr;gap:40px;align-items:start;padding:clamp(30px,4vw,48px) 0;border-top:var(--hair);border-bottom:var(--hair)}
.work-mini__name{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.05}
.work-mini__sector{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:8px}
.work-mini__desc{color:var(--ink-soft);font-weight:300;font-size:16px;line-height:1.62;max-width:60ch}

/* ============ ENABLE AI teaser ============ */
.enable__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.enable__badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--plum);padding:7px 14px;border-radius:999px;margin-bottom:20px}
.enable__quote{font-family:var(--disp);font-style:italic;font-size:26px;color:var(--plum);margin:26px 0 30px;line-height:1.3}
.enable__swipe{display:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:12px}
.enable__swipe span{color:var(--plum)}

/* ============ ABOUT ============ */
.about__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(40px,6vw,80px);align-items:start}
.about__lead{font-weight:300;font-size:clamp(16px,1.7vw,18px);color:var(--ink-soft);line-height:1.7;margin-top:18px;max-width:58ch}
.about__lead em{font-style:italic}
.about__eq{font-family:var(--disp);font-size:clamp(21px,2.5vw,28px);line-height:1.4;margin-top:28px;border-left:3px solid var(--plum);padding-left:22px}
.about__eq strong{color:var(--plum);font-weight:600}
.about__human{font-family:var(--disp);font-style:italic;font-size:25px;color:var(--stone);margin-top:26px}
.about__side{background:#fff;border:var(--hair);padding:clamp(24px,3vw,34px)}
.about__side-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin:0 0 13px}
.about__side .chips{margin-bottom:28px}
.chips--plum li{border-color:rgba(107,45,92,.28);color:var(--plum);background:rgba(107,45,92,.05)}
.about__cv{list-style:none;display:flex;flex-direction:column;gap:13px}
.about__cv li{position:relative;padding-left:18px;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.about__cv li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--plum);border-radius:50%}
.about__cv strong{color:var(--ink);font-weight:600}
.about__linkedin{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:14px;font-weight:600;color:var(--plum)}
.about__linkedin:hover{text-decoration:underline}

/* ============ MEET ME ============ */
.meet__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,6vw,84px);align-items:center}
.meet__lead{font-weight:300;font-size:clamp(16px,1.7vw,18px);color:var(--ink-soft);line-height:1.7;margin-top:18px;max-width:58ch}
.meet__lead strong{font-weight:600;color:var(--ink)}
.meet__human{font-family:var(--disp);font-style:italic;font-size:26px;color:var(--plum);margin-top:28px}
.meet__photos{position:relative;padding:4px}
/* opaque photos, washed + plum-tinted so they merge with the site; subtle hairline border */
.meet__photo{position:relative;background:#fff;padding:0;border:1px solid rgba(107,45,92,.22);
  box-shadow:0 24px 52px -34px rgba(74,30,64,.45)}
.meet__photo img{display:block;width:100%;height:auto;filter:saturate(.8) contrast(.96) brightness(1.02)}
/* plum wash for the washed look — no transparency on the image itself */
.meet__photo::after{content:"";position:absolute;inset:0;background:var(--plum);opacity:.16;
  mix-blend-mode:multiply;pointer-events:none}
.meet__photo--base{width:66%;margin-top:15%}
.meet__photo--over{position:absolute;top:0;right:0;width:51%}
@media(max-width:760px){
  .meet__grid{grid-template-columns:1fr;gap:34px}
  .meet__photos{padding:0 0 10px;max-width:460px;margin:0 auto}
  .meet__photo--base{width:70%;margin-top:14%}
  .meet__photo--over{width:54%;top:0;right:0}
}

/* ============ REACH BOXES ============ */
.reach{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:680px;margin:42px auto 0}
.reach__box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  background:#fff;border:var(--hair);padding:clamp(28px,4vw,42px) 24px;transition:border-color .2s,transform .2s,box-shadow .2s}
.reach__box:hover{border-color:var(--plum);transform:translateY(-2px);box-shadow:0 20px 40px -28px rgba(0,0,0,.45)}
.reach__icon{color:var(--plum);margin-bottom:10px;line-height:0}
.reach__label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.reach__value{font-family:var(--disp);font-size:clamp(20px,2.4vw,26px);font-weight:500;color:var(--ink)}
.reach__box:hover .reach__value{color:var(--plum)}
@media(max-width:560px){.reach{grid-template-columns:1fr;gap:14px}}

/* ============ CONTACT FORM ============ */
.contact{max-width:680px;margin:38px auto 0;text-align:left}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:block;margin-bottom:20px}
.field>span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:8px}
.field>span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--stone);font-weight:400}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:var(--hair);border-radius:0;padding:13px 14px;transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.contact__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.contact__note{font-size:13px;color:var(--stone)}
.contact__status{margin-top:16px;font-size:14px;font-weight:600;color:var(--plum);min-height:1.2em}
.contact__status.is-err{color:#C0392B}

/* ============ REVEAL ANIM ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .cards-3{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .work,.work--rev{grid-template-columns:1fr;gap:26px}
  .work--rev .work__media{order:-1}
  .enable__grid{grid-template-columns:1fr;gap:34px}
  .about__grid{grid-template-columns:1fr;gap:32px}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline__step{border-right:0;border-bottom:var(--hair)}
  .timeline__step:nth-child(odd){border-right:var(--hair)}
  .skills{grid-template-columns:1fr 1fr}
  .training__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:16px}
  .nav__enable{display:none}
  /* shrink CTA to icon on mobile */
  .nav__cta{padding:0;width:44px;height:44px;justify-content:center;border-radius:50%;gap:0}
  .nav__cta-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav__cta-icon{display:block}
  /* stages -> horizontal swipe carousel on mobile */
  .stages{flex-direction:row;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stages::-webkit-scrollbar{display:none}
  .stage{flex:0 0 78%;flex-direction:column;gap:10px;scroll-snap-align:start}
  .stage__num{font-size:34px}
  .enable__swipe{display:block}
  .contact__row{grid-template-columns:1fr;gap:0}
  .timeline{grid-template-columns:1fr}
  .timeline__step{border-right:0 !important}
  .skills{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .hero__cta .btn,.cta__actions .btn{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}