/* Ahaan Singhania — site
   Palette and type are the guideline values (AS-Brand Guidelines, Qi Studio 2026).
   Derived tokens are marked as derived. */

@font-face{font-family:"Zalando Sans Expanded";src:url(../fonts/zalando-sans-expanded.woff2) format("woff2");
  font-weight:200 900;font-display:swap}
@font-face{font-family:"Lexend Deca";src:url(../fonts/lexend-deca.woff2) format("woff2");
  font-weight:100 900;font-display:swap}

:root{
  /* primary */
  --ignite:#d10208;      /* Ignite Red */
  --obsidian:#000000;    /* Obsidian Black */
  --cloud:#f2f2f2;       /* Cloud Grey */
  /* secondary */
  --merlot:#5e050b;      /* Merlot Red */
  --graphite:#0f141a;    /* Graphite Grey */
  --slate:#49535c;       /* Slate Grey */
  /* derived — text tints that pass contrast on black */
  --ignite-lite:#ff4d55; /* derived: small red text on black, 5.9:1 */
  --grey:#b9bec4;        /* derived: body copy on black, 10.9:1 */
  --grey-2:#7f8891;      /* derived: meta on black, 5.5:1 */
  --rule:rgba(242,242,242,.14);

  --afterglow:linear-gradient(100deg,#cfdcdf 0%,#e3949d 20%,#d10208 44%,#5e050b 62%,#0b0203 78%,#2f444b 100%);

  --display:"Zalando Sans Expanded","Helvetica Neue",Arial,sans-serif;
  --body:"Lexend Deca","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(18px,4vw,64px);
  --ease:cubic-bezier(.2,.7,.1,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--obsidian);color-scheme:dark}
body{background:var(--obsidian);color:var(--grey);font-family:var(--body);font-weight:300;
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ignite);color:#fff}

/* ── type ── */
.display{font-family:var(--display);font-weight:400;color:var(--cloud);
  font-size:clamp(34px,4.6vw,76px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.eyebrow{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ignite-lite);margin-bottom:22px}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--grey);max-width:44ch;margin-top:24px}
.body{max-width:52ch;margin-top:18px;color:var(--grey-2)}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;
  font-size:13px;letter-spacing:.06em;color:#fff;background:var(--ignite);padding:16px 26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background .3s var(--ease)}
.btn:hover{background:#ec0a12}
.btn--sm{padding:11px 16px;font-size:11px}
.btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(242,242,242,.35)}
.btn--ghost:hover{background:rgba(242,242,242,.08)}
.link{font-family:var(--display);font-size:13px;color:var(--grey);border-bottom:1px solid var(--rule);padding-bottom:3px}
.link:hover{color:#fff;border-color:var(--ignite)}

/* ── preloader ── */
.loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center}
.loader__mark{width:min(34vw,260px);overflow:visible}
.loader__mark path{fill:transparent;stroke:var(--ignite);stroke-width:.8;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.loader__count{position:absolute;left:var(--gutter);bottom:28px;font-family:var(--display);
  font-size:11px;letter-spacing:.22em;color:var(--grey-2)}

/* ── chrome: the guideline header rule ── */
.chrome{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:22px;
  padding:16px var(--gutter);mix-blend-mode:normal;pointer-events:none}
.chrome>*{pointer-events:auto}
.chrome::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,0) 100%)}
.chrome__mark svg{width:46px;height:auto;fill:var(--ignite);display:block}
.chrome__rule{flex:1;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);height:28px;
  font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.chrome__rule>span{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome__section{text-align:center;color:var(--cloud)}
.chrome__meta{border-left:1px solid var(--rule);height:100%;display:flex;align-items:center}
@media (max-width:760px){.chrome__rule{grid-template-columns:1fr auto}.chrome__name{display:none}
  .chrome__section{text-align:left}.chrome__meta{display:none}}

/* ── the connective thread layer: above section art, below all copy ── */
.threads{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;visibility:hidden}
.hero__line,.hero__foot,.beats,.untangle__tags,.untangle__progress,.statement__text,.pattern__copy{z-index:3}
.beats,.untangle__tags,.untangle__progress{position:absolute}
.statement__text{position:relative}

/* ════════ 01 HERO ════════ */
.hero{height:340vh;position:relative}
.hero__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__bridge{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
/* the film section slides UNDER nothing: it starts exactly where the hero pin lets go, and stays invisible until then */
.untangle{margin-top:-100vh;margin-top:-100svh}
.untangle__pin{visibility:hidden}
.untangle__pin.is-live{visibility:visible}
.hero__rings{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.hero__rings i{position:absolute;left:0;top:0;border:1px solid rgba(242,242,242,.09);border-radius:50%;
  transform:translate(-50%,-50%)}
.hero__line{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;
  padding:0 var(--gutter);font-family:var(--display);font-weight:300;color:var(--cloud);
  font-size:clamp(30px,3.8vw,68px);line-height:1.04;letter-spacing:-.035em;
  text-shadow:0 0 38px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.8)}
.hero__half{display:flex;flex-direction:column;flex:1;will-change:transform}
.hero__half--l{text-align:right;align-items:flex-end}
.hero__half--r{text-align:left;align-items:flex-start;color:var(--ignite)}
.hero__gap{flex:0 0 clamp(200px,30vw,520px)}
.split{display:block;white-space:nowrap}
.hero__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:30px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero__sub{max-width:34ch;font-size:15px;color:var(--grey)}
.hero__scroll{font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey-2);display:flex;align-items:center;gap:12px}
.hero__scroll span{width:44px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.hero__scroll span::after{content:"";position:absolute;inset:0;background:var(--ignite);
  animation:scan 2.2s var(--ease) infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (max-width:760px){
  .hero__line{flex-direction:column;gap:0}
  .hero__half--l,.hero__half--r{align-items:center;text-align:center}
  .hero__line{margin-top:-6vh}
  .hero__gap{flex-basis:30vh}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .hero__scroll{display:none}
}

/* ════════ 02 UNTANGLE ════════ */
.untangle{height:420vh;position:relative}
.untangle__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.untangle__film{position:absolute;inset:0;width:100%;height:100%}
.untangle__shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 62%),
             linear-gradient(0deg,rgba(0,0,0,.6),transparent 30%)}
.untangle__tags{list-style:none;position:absolute;inset:0;pointer-events:none}
.untangle__tags li{position:absolute;left:var(--x);top:var(--y);font-family:var(--display);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cloud);padding:6px 10px;
  border:1px solid rgba(242,242,242,.22);background:rgba(0,0,0,.35);backdrop-filter:blur(4px);
  opacity:0;white-space:nowrap}
.beats{position:absolute;left:var(--gutter);top:50%;width:min(540px,86vw)}
.beat{position:absolute;left:0;top:0;opacity:0;visibility:hidden}
.beat .display{font-size:clamp(32px,4vw,66px)}
@media (max-width:760px){
  .untangle__shade{background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 42%,rgba(0,0,0,0) 72%)}
  .beats{top:auto;bottom:70px;transform:none;width:auto;right:var(--gutter)}
  .beat{top:auto;bottom:0;transform:none}
  .untangle__tags li:nth-child(n+4){display:none}
  .untangle__tags li{font-size:9.5px}
}
.untangle__progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:30px;height:1px;background:var(--rule)}
.untangle__progress span{position:absolute;inset:0;background:var(--ignite);transform-origin:0 50%;transform:scaleX(0)}

/* ════════ 03 STATEMENT ════════ */
.statement{padding:28vh var(--gutter) 22vh;position:relative}
.statement__text{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.3vw,56px);line-height:1.18;
  letter-spacing:-.03em;max-width:24ch;margin:0 auto;color:var(--cloud);text-wrap:pretty}
.statement__text .word{opacity:.14;transition:none}
@media (min-width:1100px){.statement__text{max-width:30ch}}

/* ════════ 04 PATTERN ════════ */
.pattern{height:320vh;position:relative}
.pattern__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pattern__grid{position:absolute;inset:0;width:100%;height:100%}
.pattern__copy{position:absolute;left:var(--gutter);bottom:clamp(40px,10vh,110px);max-width:560px;
  padding:34px 34px 30px;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);
  border:1px solid var(--rule);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.pattern__copy .display{font-size:clamp(28px,3vw,48px)}
.pattern__copy .lede{font-size:clamp(15px,1.1vw,18px)}
.tally{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:1px solid var(--rule)}
.tally__item{display:flex;flex-direction:column;gap:8px;padding:16px 16px 0 0}
.tally__item+.tally__item{padding-left:18px;border-left:1px solid var(--rule)}
.tally__n{font-family:var(--body);font-weight:300;font-size:clamp(34px,3vw,46px);line-height:1;letter-spacing:-.04em;
  color:var(--cloud);font-variant-numeric:tabular-nums}
.tally__item--lit .tally__n{color:var(--ignite-lite)}
.tally__l{font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);line-height:1.5}
@media (max-width:760px){.pattern__copy{left:12px;right:12px;padding:24px}}

/* ════════ 05 WORK ════════ */
.work{position:relative;padding-top:18vh}
.work__head{padding:0 var(--gutter);margin-bottom:6vh;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.work__head .eyebrow{flex-basis:100%;margin-bottom:0}
.work__all{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cloud);padding:16px 0;border-bottom:1px solid var(--ignite)}
.work__all svg{width:18px;fill:none;stroke:var(--ignite-lite);stroke-width:1.6;transition:transform .4s var(--ease)}
.work__all:hover svg{transform:translateX(6px)}
.chrome__nav{display:flex;gap:18px}
.chrome__link{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cloud);padding:10px 4px;border-bottom:1px solid transparent;transition:border-color .3s}
.chrome__link:hover{border-color:var(--ignite)}
@media (max-width:760px){.chrome__nav{display:none}}
.work__scroller{position:relative}
.work__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.work__track{display:flex;gap:22px;padding:0 var(--gutter);will-change:transform}
.card{flex:0 0 clamp(300px,27vw,440px);height:min(72vh,640px);background:var(--graphite);
  border:1px solid rgba(242,242,242,.08);padding:26px 26px 24px;display:flex;flex-direction:column;
  position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  transition:background .5s var(--ease),border-color .5s var(--ease)}
.card::before{content:"";position:absolute;inset:0;background:var(--afterglow);opacity:0;
  mix-blend-mode:screen;transition:opacity .6s var(--ease);pointer-events:none}
.card.is-active{border-color:rgba(209,2,8,.5)}
.card.is-active::before{opacity:.07}
.card__top{display:flex;justify-content:space-between;font-family:var(--display);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.card__n{color:var(--ignite-lite)}
.card__vis{flex:1;display:grid;place-items:center;min-height:0;padding:18px 0}
.card__title{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.55vw,25px);line-height:1.15;
  letter-spacing:-.025em;color:var(--cloud)}
.card__body{font-size:14px;line-height:1.55;color:var(--grey-2);margin-top:12px}
.card__status{align-self:flex-start;margin-top:18px;font-family:var(--display);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cloud);padding:7px 10px;border:1px solid var(--rule)}
@media (max-width:900px){
  .work__pin{position:relative;height:auto;display:block}
  .work__track{flex-direction:column;transform:none!important}
  .card{flex:none;height:auto;min-height:540px}
}

/* card visuals — all drawn in brand, animated when the card is centred */
.vis{width:min(100%,230px);height:auto;overflow:visible}
.vis line,.vis path,.vis polygon,.vis rect{transition:all .9s var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
.vis text{font-family:var(--display);font-size:24px;fill:var(--cloud);letter-spacing:-.03em}
.vis--ring line{stroke:var(--slate);stroke-width:5;stroke-linecap:butt}
.is-active .vis--ring line{stroke:var(--ignite)}
.vis--voice rect{fill:var(--slate);transform-origin:center;transform-box:fill-box}
.is-active .vis--voice rect:not(.doc){fill:var(--ignite)}
.vis--voice .doc{fill:var(--slate);transform:scaleX(.08);transform-origin:0 50%}
.is-active .vis--voice .doc{transform:scaleX(1);fill:var(--cloud);transition-delay:calc(600ms + var(--i) * 140ms)}
.vis--board rect{fill:var(--slate)}
.vis--board .cell{fill:none;stroke:var(--slate)}
.vis--board g{opacity:.25;transition:opacity .6s var(--ease);transition-delay:calc(var(--i) * 180ms)}
.is-active .vis--board g{opacity:1}
.is-active .vis--board .tag{fill:var(--ignite)}
.vis--modules polygon{fill:none;stroke:var(--slate);stroke-width:1.5}
.is-active .vis--modules polygon{fill:rgba(209,2,8,.16);stroke:var(--ignite)}
.vis--flow .wall{fill:none;stroke:var(--slate);stroke-width:2}
.vis--flow .lane{fill:none;stroke:var(--ignite);stroke-width:1.6;stroke-dasharray:260;stroke-dashoffset:260}
.is-active .vis--flow .lane{stroke-dashoffset:0;transition-duration:2s;transition-delay:calc(var(--i) * 260ms)}
.vis--pulse path{fill:none;stroke:var(--slate);stroke-width:2;stroke-dasharray:320;stroke-dashoffset:320}
.is-active .vis--pulse path{stroke:var(--ignite);stroke-dashoffset:0;transition-duration:1.8s}
.vis--ask path{fill:none;stroke:var(--slate);stroke-width:1.5}
.vis--ask rect{fill:var(--slate)}
.is-active .vis--ask .a{fill:rgba(209,2,8,.14);stroke:var(--ignite);transition-delay:.5s}
.is-active .vis--ask rect{fill:var(--cloud);transition-delay:.8s}

/* ════════ 06 METHOD ════════ */
.method{height:300vh;position:relative}
.method__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;
  grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;padding:0 var(--gutter)}
.method__draw svg{width:100%;height:auto;overflow:visible}
.method__draw path{fill:rgba(209,2,8,0);stroke:var(--ignite);stroke-width:.45;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.method__copy .display{font-size:clamp(28px,3vw,50px)}
.steps{list-style:none;margin-top:30px;border-top:1px solid var(--rule);position:relative;--mx:-999px;--my:-999px}
.steps::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(209,2,8,.18),transparent 70%)}
.step{position:relative;display:grid;grid-template-columns:52px 1fr 34px;gap:14px;align-items:start;
  padding:18px 14px 18px 18px;border-bottom:1px solid var(--rule);cursor:pointer;outline:none;
  transition:background .45s var(--ease)}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ignite);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.step__n{font-family:var(--display);font-size:12px;letter-spacing:.12em;color:var(--grey-2);padding-top:5px;transition:color .3s}
.step h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em;color:var(--cloud)}
.step__main>p{font-size:14.5px;color:var(--grey);margin-top:6px;max-width:48ch}
.step__get{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s,margin .5s var(--ease);
  font-size:14px;color:var(--cloud);max-width:48ch;margin-top:0}
.step__get>div{overflow:hidden}
.step__get span{display:block;font-family:var(--display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ignite-lite);margin-bottom:4px}
.step__arrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--rule);opacity:.55;transition:all .4s var(--ease)}
.step__arrow svg{width:16px;fill:none;stroke:var(--cloud);stroke-width:1.6}
.step:hover .step__arrow{opacity:1;border-color:rgba(242,242,242,.5)}
.step.is-on .step__n{color:var(--ignite-lite)}
.step.is-on::before{transform:scaleY(.3)}
.step.is-focus{background:linear-gradient(90deg,rgba(209,2,8,.16),rgba(15,20,26,.7) 55%,rgba(15,20,26,0))}
.step.is-focus::before{transform:scaleY(1)}
.step.is-focus .step__get{grid-template-rows:1fr;opacity:1;margin-top:12px}
.step.is-focus .step__arrow{opacity:1;background:var(--ignite);border-color:var(--ignite);transform:rotate(-45deg)}
.step:focus-visible{box-shadow:inset 0 0 0 1px var(--ignite-lite)}
.method__draw svg{transition:filter .6s var(--ease)}
.method[data-stage="3"] .method__draw svg{filter:drop-shadow(0 0 30px rgba(209,2,8,.5))}
@media (max-width:900px){
  .method{height:auto}
  .method__pin{position:relative;height:auto;grid-template-columns:1fr;padding:14vh var(--gutter)}
  .method__draw{max-width:420px}
}

/* ════════ 07 OWNERSHIP ════════ */
.own{display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;padding:20vh var(--gutter)}
.own__media{height:min(84vh,820px);overflow:hidden;position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.own__media img{width:100%;height:120%;object-fit:cover;object-position:50% 40%}
.stats{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-top:1px solid var(--rule)}
.stats>div{padding:22px 20px 22px 0;border-bottom:1px solid var(--rule)}
.stats>div:nth-child(odd){border-right:1px solid var(--rule)}
.stats>div:nth-child(even){padding-left:22px}
.stats dt{font-family:var(--display);font-weight:300;font-size:clamp(34px,3.4vw,56px);letter-spacing:-.045em;
  color:var(--cloud);line-height:1}
.stats dt.rupee{font-family:var(--body)}   /* the display face has no rupee glyph */
.stats dd{font-size:13.5px;color:var(--grey-2);margin-top:8px;max-width:26ch}
@media (max-width:900px){.own{grid-template-columns:1fr}.own__media{height:70vh}}

/* ════════ 08 ABOUT ════════ */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:end;padding:6vh var(--gutter) 20vh}
.about__photo{position:relative;overflow:hidden}
.about__photo img{width:100%;height:auto;filter:saturate(1.05)}
.about__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,transparent 30%)}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__photo{order:-1}}

/* ════════ 09 CLOSE ════════ */
.close{position:relative;padding:22vh var(--gutter) 30px;overflow:hidden}
.close__glow{position:absolute;left:-20%;right:30%;top:-10%;height:70%;
  background:radial-gradient(ellipse at 30% 40%,rgba(209,2,8,.32),rgba(94,5,11,.18) 45%,transparent 70%);
  filter:blur(40px);pointer-events:none}
.close__word{fill:var(--cloud)}   /* guideline: one colour for the wordmark, no substitutes */
.close__line{max-width:18ch;position:relative}
.close .lede,.close .eyebrow{position:relative}
.close__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:40px;position:relative}
.close__wordmark{display:block;width:100%;height:auto;margin-top:18vh;position:relative;overflow:visible}
.foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:30px;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--display);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.foot a:hover{color:#fff}

/* ── reduced motion: everything readable, nothing pinned or scrubbed ── */
@media (prefers-reduced-motion:reduce){
  .hero,.untangle,.pattern,.method{height:auto}
  .hero__pin,.untangle__pin,.pattern__pin,.method__pin{position:relative;height:auto;min-height:100vh}
  .beats{position:relative;top:auto;transform:none;padding:20vh 0}
  .beat{position:relative;transform:none;opacity:1;visibility:visible;margin-bottom:12vh}
  .statement__text .word{opacity:1}
  .loader{display:none}
  .step{opacity:1}
  .method__draw path{stroke-dashoffset:0;fill:var(--ignite)}
}

/* ════════ PHONE PASS ════════ */
@media (max-width:760px){
  /* header: a real bar, so copy never shows through behind the mark */
  .chrome{padding:10px var(--gutter);gap:12px}
  .chrome::before{height:100%;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(242,242,242,.06)}
  .chrome__mark svg{width:38px}
  .chrome__rule{height:24px;letter-spacing:.1em;font-size:9.5px}
  .chrome__rule>span{padding:0 10px}
}
@media (max-width:900px){
  /* selected work: one swipeable row instead of seven full-height cards */
  .work{padding-top:12vh}
  .work__head{margin-bottom:28px}
  .work__pin{position:relative;height:auto;display:block;overflow:visible}
  .work__track{flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    gap:12px;padding:0 var(--gutter) 4px;scroll-padding:0 var(--gutter);scrollbar-width:none;transform:none!important}
  .work__track::-webkit-scrollbar{display:none}
  .card{flex:0 0 min(84vw,380px);height:auto;min-height:0;scroll-snap-align:start;padding:20px 20px 22px}
  .card__vis{flex:none;height:132px;padding:8px 0}
  .card__vis .vis{width:128px}
  .card__title{font-size:20px}
  .card__body{font-size:14px;margin-top:10px}
  .work__dots{display:flex;align-items:center;gap:14px;padding:18px var(--gutter) 0;font-family:var(--display);font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
  .work__dots i{display:block;flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden}
  .work__dots i::after{content:"";position:absolute;inset:0;background:var(--ignite);transform-origin:0 50%;transform:scaleX(var(--p,.14));transition:transform .4s var(--ease)}
  .work__dots b{font-weight:400;color:var(--cloud)}

  /* method: the monogram is a marker here, not a poster */
  .method__pin{padding:12vh var(--gutter) 10vh;gap:28px}
  .method__draw{max-width:190px}
  .step{grid-template-columns:36px 1fr 30px;padding:16px 8px 16px 12px}
  .step__arrow{width:30px;height:30px}

  .own{padding:12vh var(--gutter);gap:28px}
  .own__media{height:52vh}
  .about{gap:28px}
  .close{padding-top:14vh}
  .close__wordmark{margin-top:10vh}
}
@media (min-width:901px){.work__dots{display:none}}