#prog{position:fixed;top:0;left:0;height:2px;background:var(--lapis);z-index:300;width:0}
.chero{padding:150px 28px 0;position:relative}
.chero .kicker{margin-bottom:22px}
.chero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,7vw,104px);line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.chero h1 i{font-style:italic;color:var(--lapis)}
.chero .lede{margin-top:28px;max-width:48ch;font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:var(--ink-body)}
.chero .media{margin-top:52px;height:56vh;min-height:340px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.chero .media i{position:absolute;inset:-10% 0;background:repeating-linear-gradient(45deg,var(--paper-2) 0 14px,#DAD3C5 14px 28px);will-change:transform}
.chero .media span{position:relative;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  background:var(--paper);padding:9px 15px;border:1px solid var(--hair)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.meta div{background:var(--paper);padding:26px 24px}
.meta div p{margin-top:9px;font-size:14.5px;line-height:1.55}
.hmetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;padding:76px 28px}
.hmetrics div b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(50px,7vw,96px);line-height:1;color:var(--lapis);letter-spacing:-.03em}
.hmetrics div p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:26ch}
.wrap{display:grid;grid-template-columns:200px 1fr;gap:56px;padding:0 28px 90px;max-width:1400px;margin:0 auto}
.index{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:11px;padding-top:6px}
.index a{display:flex;gap:10px;align-items:baseline;opacity:.45;transition:opacity .4s}
.index a.on{opacity:1}
.index a.on .mono{color:var(--lapis)}
.body{max-width:1040px}
.sec p,.sec h2,.sec h3,.pull,.sec ul{max-width:72ch}
.sec{padding:56px 0;border-top:1px solid var(--hair)}
.sec:first-child{border-top:none;padding-top:10px}
.sec > .mono{margin-bottom:20px}
.sec h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.8vw,52px);line-height:1.04;letter-spacing:-.02em;margin-bottom:24px}
.sec h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,2.3vw,30px);letter-spacing:-.01em;margin:38px 0 14px;line-height:1.15}
.sec p{font-size:17.5px;line-height:1.7;color:var(--ink-body);margin-bottom:17px}
.sec p strong{color:var(--ink);font-weight:400}
.sec em{font-style:italic;color:var(--ink)}
.pull{margin:40px 0;padding:26px 0 26px 26px;border-left:2px solid var(--lapis)}
.pull p{font-family:var(--f-display);font-size:clamp(20px,2.4vw,30px);line-height:1.3;color:var(--ink);margin:0;letter-spacing:-.01em}
.pull cite{display:block;margin-top:14px;font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:34px 0}
.cards article{background:var(--paper);padding:26px 22px}
.cards article h4{font-family:var(--f-display);font-size:22px;font-weight:400;margin:10px 0;letter-spacing:-.01em}
.cards article p{font-size:14.5px;line-height:1.62;margin:0;color:var(--ink-2)}
.phases{margin:34px 0}
.phase{display:grid;grid-template-columns:96px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--hair)}
.phase:last-child{border-bottom:1px solid var(--hair)}
.phase h4{font-family:var(--f-display);font-size:21px;font-weight:400;margin-bottom:7px;letter-spacing:-.01em}
.phase p{font-size:14.5px;line-height:1.62;margin:0;color:var(--ink-2)}
.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:34px 0}
.impact div{background:var(--paper);padding:28px 22px}
.impact b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-size:clamp(34px,4.4vw,58px);font-weight:400;color:var(--lapis);line-height:1;letter-spacing:-.03em}
.impact span{display:block;margin-top:11px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.attrib{padding:26px 0 0;border-top:1px solid var(--hair);margin-top:44px}
.next{border-top:1px solid var(--hair);background:var(--paper-2);padding:78px 28px;display:block}
.next .mono{margin-bottom:14px}
.next h3{font-family:var(--f-display);font-size:clamp(32px,5.4vw,74px);font-weight:400;letter-spacing:-.03em;line-height:1.02;
  transition:transform .7s var(--ease)}
.next:hover h3{transform:translateX(14px)}
@media(max-width:960px){
  .wrap{grid-template-columns:1fr;gap:0;padding:0 20px 70px}
  .index{display:none}
  .chero{padding:120px 20px 0}
  .hmetrics{padding:56px 20px;gap:28px}
  nav{padding:14px 18px}
  .phase{grid-template-columns:1fr;gap:8px}
}
.chero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,7vw,104px);line-height:1.02;letter-spacing:-.03em;max-width:14ch}
.banner{padding:80px 28px;border-bottom:1px solid var(--hair)}
.banner p{font-family:var(--f-display);font-size:clamp(26px,4.4vw,62px);line-height:1.1;letter-spacing:-.025em;max-width:20ch}
.banner p em{font-style:italic;color:var(--lapis)}
.banner .mono{margin-top:22px}
.index{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:11px;padding-top:56px}
.sec:first-child{border-top:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:34px 0}
.cards article h4{font-family:var(--f-display);font-size:21px;font-weight:400;margin:10px 0;letter-spacing:-.01em}
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin:34px 0}
.scope div{background:var(--paper);padding:26px 20px}
.scope b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-size:clamp(32px,4vw,52px);font-weight:400;color:var(--lapis);line-height:1;letter-spacing:-.03em}
.scope span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.finding{border-top:1px solid var(--hair);padding:26px 0}
.finding:last-of-type{border-bottom:1px solid var(--hair)}
.finding h4{font-family:var(--f-display);font-size:23px;font-weight:400;margin-bottom:9px;letter-spacing:-.01em}
.finding p{margin-bottom:10px}
.finding .tag{display:inline-block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--lapis);color:var(--lapis);padding:5px 10px}
.ab{margin:44px 0;padding:38px 30px;border:1px solid var(--lapis);background:var(--paper-2)}
.ab .big{font-variant-numeric:lining-nums;font-family:var(--f-display);font-size:clamp(56px,10vw,132px);line-height:.92;color:var(--lapis);letter-spacing:-.04em}
.ab h4{font-family:var(--f-display);font-size:clamp(22px,2.6vw,34px);font-weight:400;margin:6px 0 16px;letter-spacing:-.02em}
.ab p{margin:0;font-size:16px}
.steps{margin:34px 0}
.step{display:grid;grid-template-columns:62px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--hair)}
.step:last-child{border-bottom:1px solid var(--hair)}
.step .n{font-family:var(--f-display);font-size:34px;color:var(--lapis);line-height:1;letter-spacing:-.02em}
.step h4{font-family:var(--f-display);font-size:22px;font-weight:400;margin-bottom:8px;letter-spacing:-.01em}
.step p{font-size:14.5px;line-height:1.62;margin:0;color:var(--ink-2)}
@media(max-width:960px){
  .wrap{grid-template-columns:1fr;gap:0;padding:0 20px 70px}
  .index{display:none}
  .chero{padding:120px 20px 0}
  .banner{padding:56px 20px}
  nav{padding:14px 18px}
  .step{grid-template-columns:1fr;gap:8px}
}
.chero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,7vw,104px);line-height:1.02;letter-spacing:-.03em;max-width:15ch}
.hmetrics div b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(46px,6.4vw,92px);line-height:1;color:var(--lapis);letter-spacing:-.03em}
.impact b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-size:clamp(30px,4vw,52px);font-weight:400;color:var(--lapis);line-height:1;letter-spacing:-.03em}
.banner p{font-family:var(--f-display);font-size:clamp(26px,4.4vw,62px);line-height:1.1;letter-spacing:-.025em;max-width:22ch}
.scope b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-size:clamp(28px,3.6vw,46px);font-weight:400;color:var(--lapis);line-height:1;letter-spacing:-.03em}
.fig{margin:46px 0}
.fig img{display:block;width:100%;height:auto;border-radius:2px}
.fig figcaption{margin-top:14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.7;max-width:64ch}
.fig figcaption b{color:var(--lapis);font-weight:400}
.fig.artefact{background:var(--paper-2);border:1px solid var(--hair);padding:26px}
.fig.artefact img{max-width:940px;margin:0 auto;background:transparent}
.fig.artefact figcaption{margin:16px auto 0;max-width:940px}
.fig.tall.artefact img{max-width:min(var(--w,720px),100%)}
.fig.photo img{background:var(--paper-2)}
.fig.showcase{background:var(--paper);border-color:transparent;padding:0}
.fig.showcase img{max-width:min(var(--w,1040px),100%);margin:0 auto}
.fig.showcase figcaption{max-width:1040px}
@media(max-width:960px){
  .fig{margin:34px 0}
  .fig.artefact{padding:14px}
  .fig figcaption{font-size:10px}
}

/* case study hero image */
.chero .media img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;z-index:2}
.chero .media i{z-index:1}

/* side-by-side research artefacts */
.fig.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.fig.pair figcaption{grid-column:1/-1;margin-top:2px}
.fig.pair .cell{background:var(--paper-2);border:1px solid var(--hair);padding:18px}
.fig.pair .cell img{width:100%;height:auto}
@media(max-width:760px){.fig.pair{grid-template-columns:1fr}}

/* ---------- video: click-to-play facade (no player JS until asked for) ---------- */
.video{position:relative;margin-top:52px;overflow:hidden;aspect-ratio:16/9.02;
  background:radial-gradient(120% 90% at 50% 40%,#25231F 0%,#141311 70%,#0E0D0C 100%)}
.video::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 46px)}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video button{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.video button::before{content:"";position:absolute;inset:0;background:transparent}
.play{position:relative;display:flex;align-items:center;gap:16px;background:var(--paper);
  padding:16px 26px 16px 22px;transition:transform .5s var(--ease)}
.video button:hover .play{transform:translateY(-2px)}
.play i{display:block;width:0;height:0;border-left:15px solid var(--lapis);
  border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.play span{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.video figcaption,.video + .vcap{margin-top:14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2)}
@media(max-width:760px){.play{padding:13px 20px 13px 17px}.play span{font-size:10px}}

.vlabel{position:absolute;left:24px;bottom:20px;z-index:2;pointer-events:none;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,233,225,.62)}
.video button{z-index:3}
@media(max-width:760px){.vlabel{left:16px;bottom:14px;font-size:9px}}

/* phone-screen groups */
.fig.screens{background:var(--paper-2);border:1px solid var(--hair);padding:30px 26px}
.fig.screens .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;align-items:end;justify-items:center}
.fig.screens img{width:100%;max-width:300px;height:auto}
.fig.screens figcaption{margin-top:22px}
@media(max-width:700px){.fig.screens{padding:20px 16px}.fig.screens .row{gap:18px}}

/* store buttons */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;align-items:center}
.store{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--ink);padding:13px 22px;
  position:relative;overflow:hidden;z-index:1}
.store::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);
  transition:transform .5s var(--ease);z-index:-1}
.store:hover{color:var(--paper)}
.store:hover::before{transform:translateY(0)}
.store b{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:400}
.store svg{width:17px;height:19px;flex:none}
.store.soon{border-color:var(--hair);color:var(--ink-2);cursor:default}
.store.soon::before{display:none}
/* app-store marketing screens carry their own copy, so show them plain and large */
.fig.appstore{background:transparent;border:0;padding:0}
.fig.appstore .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;align-items:start;justify-items:center}
.fig.appstore img{width:100%;max-width:340px;height:auto;border-radius:4px}
.fig.appstore figcaption{margin-top:20px}
@media(max-width:640px){.fig.appstore .row{gap:16px}}

@media(max-width:760px){
  .chero{padding-top:104px}
  .chero .media{height:38vh;min-height:220px}
  .video{margin-top:32px}
  .meta div{padding:20px 18px}
  .banner p{font-size:clamp(24px,7.4vw,34px)}
  .fig.appstore img{max-width:100%}
  .stores{gap:10px}
  .store{padding:0 18px}
}

@media(max-width:640px){.fig figcaption{font-size:11px;letter-spacing:.08em;line-height:1.65}}