/* ═════ tokens — the reference's world: near-white ground, pure black type, one saturated fill per panel ═════ */
:root{
  --paper:#FFFFFF;
  --gut:clamp(20px,5vw,72px);
  --ink:#000000;
  --ink-2:#4A4A4A;
  --dim:#8E8E8E;
  --rule:#E4E4E4;
  --accent:#EF5A37;

  --cyan:#1FD0EE;
  --mint:#CEF9D8;
  --lime:#D9F36B;
  --pink:#FF8FC4;
  --sun:#FFC93D;
  --violet:#B9A6FF;

  --f:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:16px; line-height:1.5; letter-spacing:0;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--ink); color:var(--paper)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ═════ announcement + nav ═════ */
.ann{
  position:fixed; top:0; left:0; right:0; z-index:60; background:var(--paper);
  text-align:center; padding:11px 16px; font-size:14px; font-weight:400;
}
.ann a{color:var(--accent)}
.ann .a-sm{display:none}
.ann .a-lg{display:inline}
.ann a:hover{text-decoration:underline}

nav{
  position:fixed; top:38px; left:0; right:0; z-index:60; background:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--gut); gap:20px;
}
.brand{display:flex; align-items:baseline; gap:7px; font-weight:800; font-size:23px; letter-spacing:-.04em}
.brand .mk{font-size:26px; line-height:1}
.brand .lbl{
  font-size:13px; font-weight:500; letter-spacing:-.01em; color:var(--ink);
  transition:opacity .3s ease;
}
.nlinks{display:none; gap:34px; align-items:center; font-size:14px; font-weight:500}
.nlinks a{opacity:.9; transition:opacity .2s}
.nlinks a:hover{opacity:.5}
@media(min-width:1000px){.nlinks{display:flex}}
.pill{
  background:var(--ink); color:var(--paper); border-radius:999px;
  padding:11px 32px; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--ink); transition:background .3s, color .3s;
}
.pill:hover{background:transparent; color:var(--ink)}
.pill:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ═════ hero ═════ */
.hero{padding:200px var(--gut) 0; max-width:1560px; margin:0 auto}
h1{
  font-weight:700; font-size:clamp(38px,6.2vw,80px); line-height:1;
  letter-spacing:-.0375em; margin:0 0 32px; max-width:15ch; text-wrap:balance;
}
h1 .w{display:inline-block; overflow:hidden; vertical-align:top}
h1 .w i{display:inline-block; font-style:normal; transform:translateY(105%)}
.hsub{font-size:clamp(15px,1.7vw,19px); color:var(--ink); max-width:70ch; margin:0 0 40px; letter-spacing:.2px}
.hcta{display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding-bottom:80px}
.ghost{
  border:1px solid var(--ink); border-radius:999px; padding:11px 32px; font-size:14px; font-weight:500;
  display:inline-flex; align-items:center; gap:9px; transition:background .3s, color .3s;
}
.ghost:hover{background:var(--ink); color:var(--paper)}

/* ═════ outline marquee ═════ */
.mq{overflow:hidden; padding:26px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.mq-t{display:flex; width:max-content; animation:mv 26s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mq-s{display:flex; align-items:center; gap:34px; padding-right:34px}
.mq-s span{
  font-weight:800; font-size:clamp(26px,3.4vw,40px); letter-spacing:normal; white-space:nowrap;
  color:var(--paper); -webkit-text-stroke:1px var(--ink); text-transform:uppercase;
}
.mq-s svg{width:clamp(20px,2.6vw,32px); flex:none}

/* ═════ full-bleed black panel ═════ */
.slab{background:var(--ink); color:var(--paper); padding:clamp(70px,10vw,140px) var(--gut); position:relative; overflow:hidden}
.slab-in{max-width:1560px; margin:0 auto}
.slab h2{
  font-weight:700; font-size:clamp(30px,5.6vw,74px); line-height:1.03; letter-spacing:-.038em;
  margin:0 0 26px; max-width:19ch; text-wrap:balance;
}
.slab p{color:#B4B4B4; font-size:clamp(15px,1.6vw,18px); max-width:62ch; margin:0}
.slab .figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:#232323; margin-top:64px; border:1px solid #232323}
.slab .fig{background:var(--ink); padding:26px 22px}
.slab .fig b{display:block; font-size:clamp(32px,4.6vw,54px); font-weight:700; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.slab .fig i{display:block; font-style:normal; font-size:12.5px; color:#8A8A8A; margin-top:10px; letter-spacing:.4px}

/* ═════ section frame ═════ */
.sec{padding:clamp(70px,9vw,130px) var(--gut); max-width:1560px; margin:0 auto}
.eyebrow{font-size:14px; color:var(--dim); margin:0 0 16px}
h2.big{
  font-weight:700; font-size:clamp(30px,5.4vw,70px); line-height:1.03; letter-spacing:-.038em;
  margin:0 0 22px; max-width:20ch; text-wrap:balance;
}
.lede{color:var(--ink-2); font-size:clamp(15px,1.6vw,18px); max-width:68ch; margin:0 0 54px}

/* ═════ EXPANDING COLUMNS — the signature interaction ═════ */
.cols{display:flex; height:min(78vh,620px); border:1px solid var(--rule); overflow:hidden}
.col{
  flex:1; position:relative; cursor:pointer; overflow:hidden;
  border-right:1px solid var(--rule); background:var(--paper);
  transition:flex-grow .72s cubic-bezier(.16,1,.3,1), background-color .72s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; justify-content:space-between; padding:38px 26px;
}
.col:last-child{border-right:0}
.col .ct{
  font-weight:700; font-size:clamp(26px,7vw,100px); line-height:1; letter-spacing:-.04em;
  color:#787878; transition:color .6s ease; max-width:9ch;
}
.col .cd{
  font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.92); max-width:34ch;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease .16s, transform .55s cubic-bezier(.16,1,.3,1) .16s;
}
.col .cstack{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease .24s, transform .55s cubic-bezier(.16,1,.3,1) .24s;
}
.col .cstack b{
  font-weight:500; font-size:11.5px; letter-spacing:.4px; padding:4px 10px; color:#FAFBFF;
  border:1px solid rgba(255,255,255,.5); border-radius:999px; white-space:nowrap;
}
.col .arrow{
  width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.55);
  display:grid; place-items:center; flex:none; transition:background .4s, border-color .4s, transform .5s;
}
.col .arrow svg{width:22px}
.col.on{flex-grow:4.2; background:var(--fill)}
.col.on .ct{color:#FAFBFF}
.col.on .cd,.col.on .cstack{opacity:1; transform:none}
.col.on .arrow{background:#FAFBFF; border-color:#FAFBFF; transform:rotate(0)}
.col.on .arrow svg{stroke:var(--ink)}
.col:focus-visible{outline:2px solid var(--accent); outline-offset:-4px}
.colhint{font-size:13px; color:var(--dim); margin-top:16px}
@media(max-width:900px){
  .cols{flex-direction:column; height:auto}
  .col{border-right:0; border-bottom:1px solid var(--rule); padding:26px 22px; gap:18px}
  .col .ct{max-width:none}
  .col .cd,.col .cstack{opacity:1; transform:none}
  .col.on{background:var(--fill)}
  .col .arrow{width:46px;height:46px}
}

/* ═════ project cards ═════ */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:52px 30px}
.card{display:block; width:100%; text-align:left; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
.card .shot{
  aspect-ratio:16/9; border-radius:28.8px; overflow:hidden; position:relative;
  background:var(--bg,#111); display:grid; place-items:center; padding:24px;
}
.card .shot::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.06); opacity:0; transition:opacity .4s;
}
.card:hover .shot::after{opacity:1}
.card .shot .mark{
  font-weight:800; font-size:clamp(26px,3.6vw,44px); letter-spacing:-.05em; line-height:1;
  color:var(--fg,#fff); text-align:center; transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.card:hover .shot .mark{transform:scale(1.06)}
.card .shot .badge{
  position:absolute; top:14px; left:14px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.9); color:#000; padding:5px 10px; border-radius:999px; font-weight:500;
}
.card h3{font-weight:600; font-size:19px; letter-spacing:-.025em; margin:20px 0 10px}
.card p{margin:0; color:var(--ink); font-size:16px; line-height:1.5; max-width:44ch}

/* ═════ split: capability accordion + logo grid ═════ */
.split{display:grid; grid-template-columns:1fr; gap:56px}
@media(min-width:960px){.split{grid-template-columns:1fr 1.15fr; gap:70px}}
.lgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 20px; align-content:start}
.lg{
  display:grid; place-items:center; text-align:center; gap:8px;
  filter:grayscale(1) opacity(.5); transition:filter .4s;
}
.lg:hover{filter:none}
.lg .g{font-weight:700; font-size:15px; letter-spacing:-.03em}
.lg .s{font-size:10.5px; color:var(--dim); letter-spacing:.6px}
.acc{border-top:1px solid var(--ink)}
.ai{border-bottom:1px solid var(--ink)}
.ah{
  width:100%; background:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 2px;
  font-weight:600; font-size:clamp(15px,1.8vw,19px); letter-spacing:-.02em;
}
.ah:hover{opacity:.6}
.ah:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chev{width:20px; height:20px; flex:none; transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ai.open .chev{transform:rotate(180deg)}
.ab{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.ai.open .ab{grid-template-rows:1fr}
.ab>div{overflow:hidden}
.ab p{margin:0 0 22px; color:var(--ink-2); font-size:14.5px; line-height:1.55; max-width:56ch}

/* ═════ timeline strip ═════ */
.tl{display:grid; gap:0; border-top:1px solid var(--rule)}
.tr{
  display:grid; grid-template-columns:150px 1fr auto; gap:26px; align-items:baseline;
  padding:26px 2px; border-bottom:1px solid var(--rule);
  transition:padding-left .4s cubic-bezier(.16,1,.3,1), background-color .4s;
}
.tr:hover{padding-left:16px; background:#F6F6F6}
.tr .yr{font-size:13px; color:var(--dim); letter-spacing:.4px}
.tr .rl{font-weight:600; font-size:clamp(17px,2.2vw,24px); letter-spacing:-.028em}
.tr .rl small{display:block; font-weight:400; font-size:14px; color:var(--ink-2); margin-top:5px; letter-spacing:0}
.tr .pl{font-size:13px; color:var(--dim); text-align:right; white-space:nowrap}
@media(max-width:760px){.tr{grid-template-columns:1fr; gap:6px}.tr .pl{text-align:left}}

/* ═════ closing white block with rounded bottom over black footer ═════ */
.tail{background:var(--paper); border-radius:0 0 50px 50px; position:relative; z-index:2}
.clocks{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:0 var(--gut) clamp(56px,8vw,96px)}
.clock{
  border:1px solid var(--ink); border-radius:999px; padding:12px 24px; font-size:15px;
  font-variant-numeric:tabular-nums;
}
.clock b{font-weight:600}
footer{background:var(--ink); color:var(--paper); margin-top:-50px; padding-top:50px}
.wordmark{
  padding:clamp(20px,3vw,40px) 20px 0; text-align:center;
  font-weight:800; font-size:clamp(26px,8vw,118px); line-height:.86; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden;
}
.fbar{
  max-width:1560px; margin:0 auto; padding:clamp(30px,4vw,54px) var(--gut) 54px;
  border-top:1px solid #262626; margin-top:clamp(30px,4vw,54px);
  display:grid; gap:26px; align-items:center;
}
@media(min-width:900px){.fbar{grid-template-columns:auto 1fr auto}}
.soc{display:flex; gap:12px}
.soc a{
  width:38px;height:38px;border-radius:50%;border:1px solid #333; display:grid; place-items:center;
  transition:background .3s, border-color .3s;
}
.soc a:hover{background:var(--paper); border-color:var(--paper)}
.soc a:hover svg{fill:var(--ink)}
.soc svg{width:16px; fill:var(--paper); transition:fill .3s}
.flinks{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; font-size:14px}
.flinks a:hover{color:var(--accent)}
.fnote{font-size:13px; color:#8A8A8A; line-height:1.6; text-align:right}
@media(max-width:900px){.fnote{text-align:left}}


/* ═════ MEGA MENU — big link list left, two featured cards right ═════ */
.nlinks .drop{
  position:relative; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:none; border:0; font:inherit; color:inherit; padding:0;
  transition:opacity .3s ease;
}
.nlinks .drop svg{width:13px; transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nlinks .drop[aria-expanded="true"] svg{transform:rotate(180deg)}
nav.dimmed .nlinks a,nav.dimmed .nlinks .drop{opacity:.32}
nav.dimmed .nlinks .drop[aria-expanded="true"]{opacity:1}
.megawrap{
  position:fixed; left:0; right:0; top:111px; z-index:55; background:var(--paper);
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .62s cubic-bezier(.16,1,.3,1), visibility .62s;
}
.megawrap.open{max-height:min(72vh,660px); visibility:visible; overflow-y:auto}
.mpanel{display:none; max-width:1560px; margin:0 auto; padding:44px var(--gut) 60px}
.mpanel.on{display:grid; grid-template-columns:1fr; gap:40px}
@media(min-width:1000px){.mpanel.on{grid-template-columns:300px 1fr; gap:56px}}
.mlist{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.mlist a{
  font-weight:700; font-size:clamp(24px,2.7vw,33px); letter-spacing:-.035em; line-height:1.1;
  transition:opacity .25s;
}
.mlist a:hover{opacity:.45}
.mfeat{display:grid; grid-template-columns:1fr; gap:26px}
@media(min-width:760px){.mfeat{grid-template-columns:1fr 1fr}}
.mcard{display:block; text-align:left; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer}
.mcard .mimg{
  aspect-ratio:16/9; border-radius:28.8px; padding:26px; position:relative; overflow:hidden;
  display:grid; align-items:center; background:var(--bg,#111);
}
.mcard .mimg .tagl{position:absolute; top:16px; left:20px; font-size:11px; letter-spacing:.1em; font-weight:600; color:var(--fg,#fff); opacity:.8}
.mcard .mimg .tagr{position:absolute; top:16px; right:20px; font-size:11px; letter-spacing:.14em; font-weight:600; color:var(--fg,#fff); opacity:.8}
.mcard .mimg b{
  font-weight:800; font-size:clamp(19px,2.1vw,29px); line-height:1.08; letter-spacing:-.04em;
  color:var(--fg,#fff); max-width:15ch; transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.mcard:hover .mimg b{transform:translateX(5px)}
.mcard .mcap{margin-top:14px; font-size:15.5px; line-height:1.45; max-width:40ch}
.mcard:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
main{transition:border-radius .5s ease}
body.menuopen main{border-radius:22px 22px 0 0; overflow:hidden}

/* ═════ CASE STUDY DETAIL — tag rail left, story right ═════ */
.cs{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(22px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), visibility .5s;
}
.cs.open{opacity:1; visibility:visible; transform:none}
.cs-close{
  position:sticky; top:0; z-index:3; background:var(--paper);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:18px var(--gut); border-bottom:1px solid var(--rule); max-width:1400px; margin:0 auto;
}
.cs-close .k{font-size:13px; color:var(--dim)}
.cs-x{
  border:1px solid var(--ink); background:none; border-radius:999px; cursor:pointer;
  padding:10px 22px; font:inherit; font-size:13.5px; display:inline-flex; align-items:center; gap:9px;
  transition:background .3s,color .3s;
}
.cs-x:hover{background:var(--ink); color:var(--paper)}
.cs-body{max-width:1400px; margin:0 auto; padding:0 26px 90px}
.cs-hero{
  border-radius:28.8px; margin:30px 0 44px; padding:clamp(34px,7vw,86px) clamp(24px,4vw,54px);
  display:grid; place-items:center; min-height:clamp(190px,26vw,330px); background:var(--bg,#111);
}
.cs-hero span{font-weight:800; font-size:clamp(30px,6vw,80px); letter-spacing:-.05em; color:var(--fg,#fff); text-align:center; line-height:1}
.cs-title{font-weight:700; font-size:clamp(26px,4.4vw,54px); letter-spacing:-.038em; line-height:1.05; margin:0 0 40px; max-width:22ch}
.cs-grid{display:grid; grid-template-columns:1fr; gap:44px}
@media(min-width:900px){.cs-grid{grid-template-columns:280px 1fr; gap:70px}}
.cs-rail h4{font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:-.03em; margin:0 0 16px}
.cs-rail ul{list-style:none; margin:0 0 40px; padding:0}
.cs-rail li{padding:7px 0; font-size:15px; color:var(--ink-2)}
.cs-story p{font-size:16.5px; line-height:1.65; color:var(--ink); margin:0 0 20px; max-width:66ch}
.cs-story p:first-child{font-size:clamp(17px,2vw,21px); font-weight:500}
.cs-story .kpi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:34px 0 8px;
}
.cs-story .kpi div{background:var(--paper); padding:20px 18px}
.cs-story .kpi b{display:block; font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.04em; line-height:1}
.cs-story .kpi i{display:block; font-style:normal; font-size:12px; color:var(--dim); margin-top:8px}
body.locked{overflow:hidden}

/* ═════ wordmark → contact reveal ═════ */
.wordmark{position:relative; display:block; cursor:pointer}
.wordmark .wm-say{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  font-size:clamp(15px,1.9vw,24px); font-weight:500; letter-spacing:-.01em;
  color:var(--ink); mix-blend-mode:difference; opacity:0;
  transition:opacity .45s ease; pointer-events:none;
}
.wordmark:hover .wm-say{opacity:1}
.wordmark:focus-visible{outline:2px solid var(--accent); outline-offset:6px}


/* ═════ CONTACT FORM — underline fields, chip multi-select ═════ */
.form-wrap{display:grid; grid-template-columns:1fr; gap:56px}
@media(min-width:1000px){.form-wrap{grid-template-columns:1.05fr .95fr; gap:80px}}
.fkick{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:0 0 12px}
.form h3{font-weight:700; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.035em; margin:0 0 20px}
.form .fp{color:var(--ink-2); font-size:15.5px; line-height:1.6; margin:0 0 14px; max-width:52ch}
.form .fp b{color:var(--ink); font-weight:600}
.fld{margin:44px 0 0}
.fld label{display:block; font-size:17px; font-weight:400; margin-bottom:30px}
.fld input,.fld textarea{
  width:100%; border:0; border-bottom:1px solid var(--ink); background:none;
  font:inherit; font-size:16px; color:var(--ink); padding:0 0 10px; border-radius:0;
  transition:border-color .3s;
}
.fld textarea{resize:vertical; min-height:56px}
.fld input:focus,.fld textarea:focus{outline:0; border-bottom-width:2px; border-color:var(--accent)}
.chipset{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.chip{
  border:1px solid var(--ink); border-radius:999px; background:none; cursor:pointer;
  font:inherit; font-size:14px; padding:9px 18px; color:var(--ink);
  transition:background .25s, color .25s;
}
.chip:hover{background:#EFEFEF}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.submit{
  margin-top:46px; background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  border-radius:999px; padding:17px 62px; font:inherit; font-size:16px; cursor:pointer;
  transition:background .3s,color .3s;
}
.submit:hover{background:transparent; color:var(--ink)}
.submit:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.fnote2{font-size:13.5px; color:var(--dim); margin-top:16px; max-width:48ch}
.collage{display:grid; gap:14px; align-content:start; position:sticky; top:130px}
.tile{border-radius:28.8px; min-height:clamp(150px,20vw,230px); display:grid; place-items:center; padding:26px; position:relative; overflow:hidden}
.tile b{font-weight:800; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.045em; line-height:1.05; text-align:center}
.tile i{position:absolute; right:16px; bottom:14px; font-style:normal; font-size:11.5px; opacity:.75}
@media(max-width:999px){.collage{position:static}}

/* ═════ OFFICES ═════ */
.offices{border-top:1px solid var(--rule); margin-top:clamp(50px,7vw,90px)}
.office{
  display:grid; grid-template-columns:1fr; gap:18px; align-items:center;
  padding:clamp(30px,4vw,52px) 0; border-bottom:1px solid var(--rule);
}
@media(min-width:900px){.office{grid-template-columns:330px 1fr 1.2fr auto; gap:40px}}
.office .pic{border-radius:4px; min-height:170px; display:grid; place-items:center; padding:20px}
.office .pic span{font-weight:800; font-size:clamp(20px,2.4vw,30px); letter-spacing:-.04em; text-align:center}
.office .city{font-weight:700; font-size:clamp(24px,3.2vw,40px); letter-spacing:-.038em}
.office .addr{font-size:15px; color:var(--ink-2); line-height:1.55; max-width:42ch}
.office .mail{font-size:14.5px; font-weight:600; white-space:nowrap}
.office .mail:hover{color:var(--accent)}


/* ═════ SOLUTION PAGE — full page opened from the dropdown ═════ */
.pg{
  position:fixed; inset:0; z-index:98; background:var(--paper); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), visibility .5s;
}
.pg.open{opacity:1; visibility:visible; transform:none}
.pg-bar{
  position:sticky; top:0; z-index:3; background:var(--paper); border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 26px;
  max-width:1400px; margin:0 auto;
}
.pg-bar .k{font-size:13px; color:var(--dim)}
.pg-body{max-width:1400px; margin:0 auto; padding:clamp(44px,6vw,78px) 26px 90px}
.pg-top{display:grid; grid-template-columns:1fr; gap:48px}
@media(min-width:960px){.pg-top{grid-template-columns:1fr 1.12fr; gap:80px}}
.pg-top h2{font-weight:700; font-size:clamp(34px,6vw,64px); letter-spacing:-.04em; line-height:1.02; margin:0 0 28px}
.pg-top .pp{font-size:16.5px; line-height:1.65; color:var(--ink); margin:0 0 20px; max-width:52ch}
.pg-rule{width:210px; height:2px; background:var(--ink); margin:34px 0 22px}
.pg-lab{font-weight:600; font-size:16px; margin:0 0 30px}
.pg-work{margin-top:clamp(60px,9vw,120px)}
.pg-work h3{font-weight:700; font-size:clamp(24px,3.4vw,40px); letter-spacing:-.035em; margin:0 0 40px}

/* ═════ reveal ═════ */
/* content is visible by default; JS opts in to the animation so nothing
   depends on scripts running (no-JS, crawlers, or a stalled observer) */
.rv{opacity:1; transform:none}
html.anim .rv{opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
html.anim .rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  h1 .w i{transform:none}
  .col .cd,.col .cstack{opacity:1;transform:none}
}

/* ═════ WORK HEADER — label / huge title / note ═════ */
.workhead{display:grid; grid-template-columns:1fr; gap:26px; align-items:start; margin-bottom:54px}
@media(min-width:1000px){.workhead{grid-template-columns:1fr 2fr 1fr; gap:40px; align-items:center}}
.workhead .wl{font-size:15px; color:var(--ink-2)}
.workhead .wc{text-align:left}
@media(min-width:1000px){.workhead .wc{text-align:center}}
.workhead .wc .pre{font-size:clamp(17px,2vw,24px); font-weight:500; margin:0 0 4px}
.workhead .wc h2{font-weight:700; font-size:clamp(44px,8vw,104px); letter-spacing:-.05em; line-height:.95; margin:0}
.workhead .wr{font-size:15.5px; color:var(--ink-2); line-height:1.55; max-width:34ch}

/* ═════ IMPACT CARDS — tag pills, hover CTA, results panel ═════ */
.wgrid{display:grid; grid-template-columns:1fr; gap:26px}
@media(min-width:900px){.wgrid{grid-template-columns:1fr 1fr}}
.wcard{
  position:relative; display:block; border-radius:28.8px; overflow:hidden;
  min-height:clamp(320px,42vw,560px); background:var(--bg,#111);
  display:flex; flex-direction:column; justify-content:space-between; padding:20px;
}
.wcard .tags{display:flex; flex-wrap:wrap; gap:8px}
.wcard .tags span{
  background:var(--paper); color:var(--ink); border-radius:8px; padding:6px 12px;
  font-size:12.5px; font-weight:500; letter-spacing:.2px;
}
.wcard .bigmark{
  position:absolute; inset:0; display:grid; place-items:center; padding:40px; pointer-events:none;
}
.wcard .bigmark b{
  font-weight:800; font-size:clamp(34px,6vw,78px); letter-spacing:-.05em; line-height:1;
  color:var(--fg,#fff); text-align:center; transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.wcard:hover .bigmark b{transform:scale(1.05)}
.wcard .view{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  background:var(--ink); color:var(--paper); border-radius:10px; padding:16px 28px;
  font-size:13.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  opacity:0; transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); z-index:2;
}
.wcard:hover .view,.wcard:focus-visible .view{opacity:1; transform:translate(-50%,-50%) scale(1)}
.wcard .results{
  position:relative; z-index:1; background:var(--paper); border-radius:10px; padding:20px 22px;
}
.wcard .results h4{font-weight:500; font-size:clamp(15px,1.7vw,19px); letter-spacing:-.015em; margin:0 0 18px; color:var(--ink)}
.wcard .results .rrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px}
.wcard .results .rl{font-size:12.5px; color:var(--ink-2); line-height:1.35; margin-bottom:6px}
.wcard .results .rv2{font-weight:700; font-size:clamp(20px,2.5vw,30px); letter-spacing:-.04em; line-height:1}
.wcard:focus-visible{outline:2px solid var(--accent); outline-offset:4px}

/* ═════ GET IN TOUCH — split hero + tabbed form ═════ */
.git{display:grid; grid-template-columns:1fr; gap:52px}
@media(min-width:1000px){.git{grid-template-columns:.85fr 1.15fr; gap:70px}}
.git h2{font-weight:700; font-size:clamp(46px,7.4vw,96px); letter-spacing:-.05em; line-height:.94; margin:0 0 26px}
.git .gsub{font-weight:600; font-size:clamp(18px,2.2vw,26px); letter-spacing:-.025em; color:var(--ink-2); margin:0 0 44px; max-width:20ch}
.git .glab{font-size:14px; color:var(--ink-2); margin:0 0 18px}
.founders{display:flex; gap:18px; flex-wrap:wrap}
.founder{
  background:var(--paper); border:1px solid var(--rule); border-radius:6px;
  padding:22px 26px; text-align:center; min-width:190px;
}
.founder img{width:128px;height:128px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:1px solid var(--rule)}
.founder .fno{width:128px;height:128px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:#EFEFEF;font-weight:700;font-size:30px;letter-spacing:-.04em}
.founder b{display:block; font-weight:600; font-size:16px}
.founder i{display:block; font-style:normal; font-size:14px; color:var(--ink-2); margin-top:4px}
.tabs{display:flex; gap:clamp(20px,4vw,56px); flex-wrap:wrap; margin-bottom:44px}
.tab{
  background:none; border:0; padding:0 0 8px; font:inherit; cursor:pointer; text-align:left;
  color:var(--dim); border-bottom:2px solid transparent; transition:color .3s, border-color .3s;
}
.tab .t1{display:block; font-size:13px; font-weight:500}
.tab .t2{display:block; font-weight:700; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.035em}
.tab[aria-selected="true"]{color:var(--ink); border-color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.grid2{display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,38px)}
@media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.gf label{display:block; font-size:14.5px; color:var(--ink); margin-bottom:12px}
.gf label i{font-style:normal; color:var(--accent)}
.gf input,.gf select,.gf textarea{
  width:100%; border:0; border-bottom:1px solid #C9C9C9; background:none; border-radius:0;
  font:inherit; font-size:16px; color:var(--ink); padding:0 0 12px;
  transition:border-color .3s;
}
.gf textarea{resize:vertical; min-height:110px}
.gf input::placeholder,.gf textarea::placeholder{color:#B4B4B4}
.gf input:focus,.gf select:focus,.gf textarea:focus{outline:0; border-color:var(--ink)}
.gf select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23555' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:18px;
}
.subrow{display:flex; align-items:stretch; margin-top:48px; width:max-content; max-width:100%}
.subrow button{
  background:var(--ink); color:var(--paper); border:0; cursor:pointer; font:inherit;
  font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:20px 34px;
  transition:background .3s;
}
.subrow .sarr{background:var(--paper); border:1px solid var(--ink); display:grid; place-items:center; width:62px}
.subrow .sarr svg{width:20px}
.subrow button:hover{background:#222}
.subrow button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.gnote{font-size:13.5px; color:var(--dim); margin-top:18px; max-width:52ch}


/* ═════ DARK SERVICES — numbered rows with category chips ═════ */
.svc{background:#0A0A0A; color:var(--paper); padding:clamp(64px,8vw,120px) 0; border-radius:28.8px; margin:0 var(--gut)}
.svc-in{max-width:1560px; margin:0 auto; padding:0 clamp(20px,3vw,48px)}
.svchead{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:clamp(46px,6vw,86px)}
@media(min-width:1000px){.svchead{grid-template-columns:1fr 3fr; align-items:start}}
.svchead .sl{font-size:15px; font-weight:500; color:var(--paper); padding-top:14px}
.svchead h2{font-weight:700; font-size:clamp(46px,8vw,104px); letter-spacing:-.05em; line-height:.95; margin:0}
.svchead .ss{font-size:clamp(16px,2vw,23px); color:#C9C9C9; margin:10px 0 0; letter-spacing:-.01em}
.srow{
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  padding:clamp(26px,3.4vw,44px) clamp(18px,2.4vw,36px); border-radius:14px;
  border-bottom:1px solid #1E1E1E; position:relative;
  transition:background .55s ease;
}
.srow:last-child{border-bottom:0}
@media(min-width:1000px){.srow{grid-template-columns:70px 150px 1.15fr 1fr 70px; gap:26px}}
.srow .sn{font-size:15px; color:#8A8A8A; font-variant-numeric:tabular-nums}
.srow .slogo{font-weight:800; font-size:20px; letter-spacing:.06em; color:var(--tint,#8A8A8A); transition:color .5s}
.srow .slogo small{display:block; font-weight:400; font-size:10px; letter-spacing:.14em; color:#6A6A6A; margin-top:3px}
.srow h3{font-weight:700; font-size:clamp(23px,2.9vw,36px); letter-spacing:-.035em; line-height:1.1; margin:0 0 16px; max-width:16ch}
.srow p{color:#A8A8A8; font-size:15px; line-height:1.5; margin:0; max-width:38ch}
.srow .cats{font-size:13px; color:#8A8A8A; margin:0 0 14px}
.srow .cpills{display:flex; flex-wrap:wrap; gap:9px}
.srow .cpills span{
  background:var(--paper); color:#0A0A0A; border-radius:999px; padding:8px 15px;
  font-size:13px; font-weight:500; white-space:nowrap;
}
.srow .cpills span.more{background:#2A2A2A; color:#B4B4B4}
.srow .sarrow{
  width:52px;height:52px;border-radius:50%;border:1px solid #3A3A3A; display:grid; place-items:center;
  justify-self:start; transition:background .4s, border-color .4s;
}
@media(min-width:1000px){.srow .sarrow{justify-self:end}}
.srow .sarrow svg{width:19px; stroke:var(--paper); transition:stroke .4s}
.srow:hover,.srow:focus-within{background:linear-gradient(100deg, var(--glow,rgba(255,255,255,.05)) 0%, rgba(10,10,10,0) 62%)}
.srow:hover .slogo{color:var(--tint,#fff)}
.srow:hover .sarrow{background:var(--paper); border-color:var(--paper)}
.srow:hover .sarrow svg{stroke:#0A0A0A}
.srow a.sfull{position:absolute; inset:0; border-radius:14px}
.srow a.sfull:focus-visible{outline:2px solid var(--paper); outline-offset:-4px}


/* ═════ BUDGET BUILDER — home only ═════ */
.bud{background:var(--paper); border-top:1px solid var(--rule)}
.bud .bhead{max-width:none}
.bud h2{font-weight:700; font-size:clamp(30px,5.4vw,72px); letter-spacing:-.045em; line-height:1; margin:0 0 22px; max-width:none; text-wrap:nowrap}
.bud h2 em{font-style:normal; display:block; color:var(--dim)}
@media(max-width:640px){.bud h2{text-wrap:balance}}
.bud .blede{color:var(--ink-2); font-size:clamp(15px,1.7vw,18.5px); max-width:60ch; margin:0 0 54px}

.bwrap{display:grid; grid-template-columns:1fr; gap:44px}
@media(min-width:1000px){.bwrap{grid-template-columns:1.02fr .98fr; gap:64px}}

.brail{border:1px solid var(--ink); border-radius:16px; padding:clamp(24px,3vw,40px)}
.bnum{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.bnum .amt{
  font-weight:700; font-size:clamp(44px,7vw,86px); letter-spacing:-.055em; line-height:1;
  font-variant-numeric:tabular-nums; transition:color .3s;
}
.bnum .per{font-size:15px; color:var(--dim)}
.bsub{font-size:14.5px; color:var(--ink-2); margin:0 0 30px}

.btrack{position:relative; margin:34px 0 12px}
.btrack input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:38px; background:none;
  margin:0; display:block; cursor:pointer;
}
.btrack .bar{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:10px; border-radius:999px; background:#EAEAEA; pointer-events:none; overflow:hidden;
}
.btrack .fill{
  position:absolute; inset:0 auto 0 0; width:var(--pct,30%);
  background:linear-gradient(90deg,var(--mint),var(--cyan) 42%,var(--violet) 74%,var(--sun));
  border-radius:999px; transition:width .18s ease;
}
.btrack input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%;
  background:var(--ink); border:4px solid var(--paper); box-shadow:0 0 0 1px var(--ink);
  cursor:grab; transition:transform .2s;
}
.btrack input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12); cursor:grabbing}
.btrack input[type=range]::-moz-range-thumb{
  width:30px; height:30px; border-radius:50%; background:var(--ink);
  border:4px solid var(--paper); box-shadow:0 0 0 1px var(--ink); cursor:grab;
}
.btrack input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:6px; border-radius:999px}
.bticks{display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-top:2px}

.bchips{margin-top:38px}
.bchips .bl{font-size:14.5px; margin:0 0 16px}

.bcard{
  border:1px solid var(--rule); border-radius:16px; padding:clamp(24px,3vw,38px);
  background:var(--tint,#F6F6F6); transition:background .5s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; gap:18px;
}
.bcard .btier{font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.bcard h3{font-weight:700; font-size:clamp(24px,3.2vw,38px); letter-spacing:-.038em; line-height:1.06; margin:0}
.bcard .bp{margin:0; font-size:15.5px; line-height:1.55; color:rgba(0,0,0,.74)}
.bcard ul{margin:0; padding:0; list-style:none; display:grid; gap:1px; background:rgba(0,0,0,.13); border-radius:8px; overflow:hidden}
.bcard li{background:var(--tint,#F6F6F6); padding:11px 14px; font-size:14.5px; display:flex; gap:11px; align-items:flex-start; transition:background .5s}
.bcard li::before{content:"✓"; font-weight:700; flex:none; opacity:.55}
.bmeta{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(0,0,0,.13); border-radius:8px; overflow:hidden}
.bmeta div{background:var(--tint,#F6F6F6); padding:13px 15px; transition:background .5s}
.bmeta .k{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.bmeta .v{font-weight:700; font-size:17px; letter-spacing:-.025em; margin-top:4px}
.bfade{animation:bfade .45s cubic-bezier(.16,1,.3,1)}
@keyframes bfade{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
.bcta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px}
.bnote{font-size:13px; color:var(--ink-2); margin:14px 0 0; max-width:52ch}


/* ═════ HERO SERVICE STRIP — the moving list of what we do ═════ */
.hstrip{margin:0 calc(var(--gut) * -1) 34px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hstrip-t{display:flex; width:max-content; animation:hs 34s linear infinite}
.hstrip:hover .hstrip-t{animation-play-state:paused}
@keyframes hs{to{transform:translateX(-50%)}}
.hstrip-s{display:flex; align-items:center; gap:12px; padding-right:12px}
.hstrip-s b{
  font-weight:600; font-size:clamp(15px,1.8vw,21px); letter-spacing:-.02em; white-space:nowrap;
  border:1px solid var(--ink); border-radius:999px; padding:11px 24px; color:var(--ink);
  transition:background .3s, color .3s;
}
.hstrip-s b:hover{background:var(--ink); color:var(--paper)}
.hstrip-s b.fill{background:var(--ink); color:var(--paper)}
.hstrip-s b.more{border-style:dashed; color:var(--dim)}
.hstrip-s i{font-style:normal; color:var(--accent); font-size:18px; flex:none}
h1 em{font-style:normal; color:var(--dim)}



/* ═════════════════════════════════════════════════════════════════
   MOBILE — hamburger + slide-in sidebar, and a full responsive pass
   ═════════════════════════════════════════════════════════════════ */

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:11px; margin-right:-8px;
  background:none; border:0; cursor:pointer; flex:none;
}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .25s}
.burger span:nth-child(1){width:22px}
.burger span:nth-child(2){width:22px}
.burger span:nth-child(3){width:14px}
body.navopen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navopen .burger span:nth-child(2){opacity:0}
body.navopen .burger span:nth-child(3){width:22px; transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media(min-width:1000px){.burger{display:none}}

.scrim{
  position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.42);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
body.navopen .scrim{opacity:1; visibility:visible}
@media(min-width:1000px){.scrim{display:none}}

.side{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(420px,88vw); background:var(--paper);
  transform:translateX(101%); transition:transform .52s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; overflow-y:auto;
  border-left:1px solid var(--rule);
}
body.navopen .side{transform:none}
@media(min-width:1000px){.side{display:none}}
.side-top{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rule)}
.side-x{
  width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.side-x svg{width:15px}
.side-x:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.side nav.sn{display:flex; flex-direction:column; padding:14px 22px 8px}
.side nav.sn > a{
  font-weight:700; font-size:clamp(26px,7vw,34px); letter-spacing:-.035em;
  padding:14px 0; border-bottom:1px solid var(--rule);
}
.side nav.sn > a:last-of-type{border-bottom:0}
.side .sgroup{border-bottom:1px solid var(--rule); padding:6px 0}
.side .sgroup > b{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding:14px 0 8px; font-weight:500}
.side .sgroup a{display:block; font-size:18px; font-weight:600; letter-spacing:-.02em; padding:9px 0}
.side .sfoot{margin-top:auto; padding:24px 22px 34px; display:grid; gap:12px}
.side .sfoot .pill,.side .sfoot .ghost{justify-content:center; width:100%}
.side .sfoot .smeta{font-size:13px; color:var(--dim); line-height:1.6; margin:8px 0 0}

/* ── page-level responsive pass ── */
@media(max-width:999px){
  nav{padding:10px var(--gut)}
  .nlinks{display:none}
  nav .pill{display:none}
  .hero{padding:140px var(--gut) 0}
  .megawrap{display:none}
}
@media(max-width:760px){
  .ann{font-size:12px; padding:9px 12px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ann .a-lg{display:none}
  .ann .a-sm{display:inline}
  nav{top:34px}
  .hero{padding:126px var(--gut) 0}
  h1{font-size:clamp(34px,10.5vw,58px); letter-spacing:-.03em; max-width:none}
  .hsub{font-size:15.5px}
  .hcta{gap:10px; padding-bottom:56px}
  .hcta .pill,.hcta .ghost{font-size:13px; padding:11px 22px}
  .hstrip{margin-bottom:28px}
  .hstrip-s b{font-size:15px; padding:9px 17px}
  .mq{padding:18px 0}
  .sec{padding:clamp(52px,11vw,80px) var(--gut)}
  h2.big{font-size:clamp(28px,8.4vw,40px); max-width:none}
  .lede{font-size:15.5px; margin-bottom:36px}
  .workhead{margin-bottom:34px; gap:14px}
  .workhead .wc h2{font-size:clamp(40px,15vw,60px)}
  .workhead .wr{max-width:none}
  .wgrid{gap:18px}
  .wcard{min-height:0; padding:14px; border-radius:20px}
  .wcard .bigmark{position:static; padding:44px 10px 34px}
  .wcard .view{display:none}
  .wcard .results{padding:16px 16px 18px}
  .wcard .results .rrow{grid-template-columns:1fr 1fr; gap:14px}
  .cards{grid-template-columns:1fr; gap:34px}
  .card .shot{border-radius:20px}
  .col{padding:22px 18px}
  .col .ct{font-size:clamp(30px,11vw,46px)}
  .col .arrow{width:44px;height:44px}
  .svc{margin:0 12px; border-radius:20px}
  .svc-in{padding:0 18px}
  .svchead{margin-bottom:34px}
  .svchead h2{font-size:clamp(42px,15vw,64px)}
  .srow{padding:24px 14px; gap:14px}
  .srow .sn{font-size:13px}
  .srow .slogo{font-size:17px}
  .srow h3{font-size:clamp(21px,6.4vw,27px); max-width:none}
  .srow p{max-width:none}
  .srow .cpills span{font-size:12px; padding:7px 13px}
  .brail{padding:22px 18px; border-radius:20px}
  .bcard{padding:22px 18px; border-radius:20px}
  .bnum .amt{font-size:clamp(38px,13vw,56px)}
  .bmeta{grid-template-columns:1fr}
  .git h2{font-size:clamp(44px,15vw,68px)}
  .git .gsub{font-size:19px; max-width:none}
  .founder{min-width:0; flex:1 1 140px; padding:16px}
  .founder img,.founder .fno{width:88px;height:88px}
  .tabs{gap:20px; margin-bottom:30px}
  .tab .t2{font-size:19px}
  .subrow{width:100%}
  .subrow button{flex:1; padding:17px 18px; font-size:13px}
  .subrow .sarr{width:54px}
  .tr{padding:20px 2px}
  .tr .rl{font-size:19px}
  .cs-title{font-size:clamp(25px,7.6vw,36px); max-width:none}
  .cs-hero{border-radius:20px; margin:20px 0 30px}
  .cs-story p:first-child{font-size:17px}
  .pg-top h2,.pg-h{font-size:clamp(34px,11vw,50px)}
  .office{padding:26px 0}
  .office .pic{min-height:130px}
  .clocks{gap:9px}
  .clock{font-size:13.5px; padding:10px 17px}
  .tail{border-radius:0 0 26px 26px}
  footer{margin-top:-26px; padding-top:26px}
  .wordmark{font-size:clamp(20px,8vw,50px)}
  .fbar{gap:20px; padding-bottom:40px}
  .flinks{justify-content:flex-start; gap:18px}
  .fnote{text-align:left}
  .mcard .mimg{border-radius:20px}
  .lgrid{grid-template-columns:repeat(2,1fr); gap:26px 16px}
  .form .fld{margin-top:32px}
  .chipset{gap:8px}
  .chip{font-size:13px; padding:8px 14px}
}
@media(max-width:420px){
  :root{--gut:18px}
  .founders{gap:12px}
  .wcard .results .rrow{grid-template-columns:1fr}
  .lgrid{grid-template-columns:1fr 1fr}
}


/* ═════ REAL SCREENSHOTS on cards ═════ */
.card .shot.has-img{padding:0; background:var(--bg)}
.card .shot img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .shot img{transform:scale(1.035)}
.badge.live{left:auto; right:14px; background:#111; color:#fff; display:inline-flex; align-items:center; gap:6px}
.badge.live::before{content:""; width:6px;height:6px;border-radius:50%;background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:lp 2.2s infinite}
@keyframes lp{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* impact cell = screenshot card + name + description underneath */
.wcell{display:flex; flex-direction:column}
.wcard.has-img{padding:0; overflow:hidden; min-height:0; aspect-ratio:16/10; justify-content:space-between}
.wcard.has-img .wshot{object-position:top left}
.wcard .wshot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .8s cubic-bezier(.16,1,.3,1)}
.wcard.has-img:hover .wshot{transform:scale(1.04)}
.wcard .wtop{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px}
.wcard.has-img .results{position:relative; z-index:2; margin:0 20px 20px; border-radius:14px}
.wcard:not(.has-img) .wtop{padding:0}
.livedot{
  background:rgba(10,10,10,.86); color:#fff; border-radius:8px; padding:6px 12px;
  font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.livedot::before{content:""; width:6px;height:6px;border-radius:50%;background:#4ADE80; animation:lp 2.2s infinite}
.wname{font-weight:700; font-size:clamp(19px,2.1vw,24px); letter-spacing:-.028em; margin:20px 0 8px}
.wdesc{margin:0; font-size:16px; line-height:1.5; color:var(--ink); max-width:46ch}

/* live link on a case page */
.livelink{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 24px}
.livelink a{
  display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:var(--paper);
  border-radius:999px; padding:11px 24px; font-size:14px; font-weight:500;
  border:1px solid var(--ink); transition:background .3s, color .3s;
}
.livelink a:hover{background:transparent; color:var(--ink)}
.livelink a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.liveurl{font-size:13.5px; color:var(--dim)}

/* case hero becomes the real screenshot */
.cs-hero.has-img{padding:0; overflow:hidden; min-height:0; aspect-ratio:16/9; display:block}
.cs-hero.has-img img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}

@media(max-width:760px){
  .wcard.has-img{min-height:0; aspect-ratio:4/3}
  .wcard .wtop{padding:14px}
  .wcard.has-img .results{margin:0 14px 14px}
  .wname{margin:16px 0 6px}
  .wdesc{font-size:15px}
  .livelink a{padding:11px 20px; font-size:13.5px}
}


/* ═════ marquees keep moving ═════
   The blanket reduced-motion reset above kills every animation. These two strips
   are the design, so they are re-enabled explicitly — slower under reduced-motion,
   and both pause on hover and on keyboard focus (WCAG 2.2.2). */
.mq-t{animation:mv 26s linear infinite !important}
.hstrip-t{animation:hs 34s linear infinite !important}
.mq:hover .mq-t,.mq:focus-within .mq-t,
.hstrip:hover .hstrip-t,.hstrip:focus-within .hstrip-t{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  .mq-t{animation-duration:64s !important}
  .hstrip-t{animation-duration:80s !important}
}


/* ═════ ARYA PATEL page ═════ */
.bio{display:grid; grid-template-columns:1fr; gap:36px; align-items:center}
@media(min-width:900px){.bio{grid-template-columns:minmax(0,380px) 1fr; gap:64px}}
.bio-photo{border-radius:28.8px; overflow:hidden; background:var(--panel,#F2F2F2); aspect-ratio:1}
.bio-photo img{width:100%; height:100%; object-fit:cover; display:block}
.bio-main h1{font-size:clamp(46px,8vw,92px); margin:0 0 22px; max-width:none}
.bio-lede{font-size:clamp(16px,1.9vw,20px); line-height:1.55; color:var(--ink); max-width:52ch; margin:0 0 34px}

.quals{display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:28.8px; overflow:hidden}
@media(min-width:820px){.quals{grid-template-columns:repeat(3,1fr)}}
.qual{background:var(--paper); padding:clamp(26px,3vw,38px); position:relative; transition:background .5s}
.qual::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--q)}
.qual:hover{background:color-mix(in srgb, var(--q) 16%, var(--paper))}
.qtag{
  display:inline-block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ink); border-radius:999px; padding:5px 13px; margin:8px 0 18px;
}
.qual h3{font-weight:700; font-size:clamp(20px,2.3vw,26px); letter-spacing:-.03em; line-height:1.12; margin:0 0 10px}
.qwhere{font-weight:600; font-size:15px; margin:0 0 14px; color:var(--ink)}
.qnote{margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
@media(max-width:760px){
  .bio-photo{max-width:280px}
  .quals{border-radius:20px}
}


/* ═════ service sub-brand marks (App.Dot, Web.Dot …) ═════ */
.srow .slogo{display:flex; flex-direction:column; line-height:1}
.srow .slogo em{font-style:normal; font-weight:800; font-size:20px; letter-spacing:.02em; color:var(--paper); opacity:.9}
.srow:hover .slogo em{color:var(--tint)}
.srow .slogo small{margin-top:6px}
.brand .mk{letter-spacing:-.05em}

/* ═════ image-led case study ═════ */
.csband{padding:0 var(--gut) clamp(50px,7vw,90px)}
.csfig{margin:0; max-width:1560px; margin-inline:auto}
.csfig img{
  width:100%; display:block; border-radius:28.8px; border:1px solid var(--rule);
  background:var(--bg,#eee);
}
.csfig figcaption{margin-top:16px; font-size:13.5px; color:var(--dim)}
.csfig figcaption a{text-decoration:underline}
.cspull{padding-top:clamp(50px,7vw,90px); padding-bottom:clamp(50px,7vw,90px)}
.pullq{
  font-weight:700; font-size:clamp(24px,3.6vw,44px); letter-spacing:-.035em; line-height:1.15;
  max-width:22ch; margin:0; padding-left:clamp(16px,2vw,28px);
  border-left:5px solid var(--bg,var(--accent));
}
@media(max-width:760px){
  .csfig img{border-radius:20px}
  .pullq{font-size:clamp(21px,6.6vw,28px); max-width:none}
}

/* hidden tab fields must actually collapse in the grid */
.gf [data-modes][hidden]{display:none !important}
.tab{transition:color .3s, border-color .3s, opacity .3s}


/* ═════ POWERED BY IITians ═════ */
.iit{background:var(--ink); color:var(--paper); padding:clamp(72px,10vw,140px) var(--gut)}
.iit-in{max-width:1560px; margin:0 auto}
.iit-kick{font-size:14px; color:#8A8A8A; margin:0 0 22px}
.iit-big{
  font-weight:800; font-size:clamp(38px,7.4vw,104px); letter-spacing:-.05em; line-height:.98;
  margin:0 0 30px; max-width:16ch; text-wrap:balance;
}
.iit-big em{font-style:normal; color:var(--accent)}
.iit-big span{color:var(--paper)}
.iit-sub{color:#B4B4B4; font-size:clamp(16px,1.8vw,20px); line-height:1.55; max-width:62ch; margin:0}
.iit-sub strong{color:var(--paper); font-weight:600}
.iit-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:#242424; border:1px solid #242424; margin-top:clamp(44px,6vw,72px)}
.iit-cell{background:var(--ink); padding:26px 22px}
.iit-cell b{display:block; font-size:clamp(22px,2.8vw,34px); font-weight:700; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums}
.iit-cell i{display:block; font-style:normal; font-size:13px; color:#8A8A8A; margin-top:10px}

/* ═════ case-study gallery ═════ */
.csduo{
  display:grid; grid-template-columns:1fr; gap:34px; align-items:center;
  background:var(--bg); border-radius:28.8px; padding:clamp(28px,4vw,56px);
  max-width:1560px; margin-inline:auto;
}
@media(min-width:900px){.csduo{grid-template-columns:1fr .8fr; gap:56px}}
.csduo-copy h3{font-weight:700; font-size:clamp(24px,3.2vw,40px); letter-spacing:-.035em; line-height:1.08; margin:0 0 16px; color:#000}
.csduo-copy p{margin:0 0 22px; font-size:16px; line-height:1.55; color:rgba(0,0,0,.75); max-width:44ch}
.csduo-copy .livelink{margin:0}
.csduo-copy .livelink a{background:#000; border-color:#000; color:#fff}
.csduo-copy .livelink a:hover{background:transparent; color:#000}
.csduo-copy .liveurl{color:rgba(0,0,0,.55)}
.csphone{margin:0; justify-self:center}
.csphone img{
  width:min(300px,72vw); display:block; border-radius:26px;
  border:8px solid #111; box-shadow:0 26px 60px rgba(0,0,0,.28);
}

/* app shot peeking on a card hover */
.card .shot .cardapp{
  position:absolute; right:6%; bottom:-14%; width:26%; height:auto; object-fit:contain;
  border-radius:10px; border:4px solid #111; box-shadow:0 14px 34px rgba(0,0,0,.32);
  transform:translateY(16px) rotate(3deg); opacity:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.card:hover .shot .cardapp{transform:translateY(-6%) rotate(-2deg); opacity:1}

@media(max-width:760px){
  .csduo{border-radius:20px}
  .csphone img{width:min(230px,62vw); border-width:6px}
  .card .shot .cardapp{display:none}
}


/* ═════ founder + team cards: three across, monogram tiles that actually fit ═════ */
.founders{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.founder{min-width:0; padding:20px 14px}
.founder img,.founder .fno{width:100%; max-width:132px; aspect-ratio:1; height:auto}
.founder .fno{
  border-radius:50%; background:var(--chipbg,#F0F0F0); display:grid; place-content:center; gap:2px;
  margin:0 auto 16px; text-align:center; padding:10px;
}
.founder .fno span{display:block; font-weight:800; font-size:clamp(20px,2.4vw,30px); letter-spacing:-.04em; line-height:1}
.founder .fno small{
  display:block; font-size:clamp(9px,1vw,11px); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); line-height:1.2;
}
.founder b{font-size:15px}
.founder i{font-size:13.5px}
@media(max-width:560px){
  .founders{grid-template-columns:1fr 1fr}
  .founder:first-child{grid-column:1 / -1}
  .founder:first-child img{max-width:150px}
}


/* ═════════════════════════════════════════════════════════
   SIZING FIXES — tablet tier, section seams, column controls
   ═════════════════════════════════════════════════════════ */

/* two black sections were butting together with no seam */
.iit + .svc{margin-top:clamp(18px,2.4vw,34px)}
.svc{position:relative; z-index:1}
.iit{border-bottom:1px solid #1C1C1C}

/* ── TABLET: 768–1199. The desktop grid is too tight here and the
      mobile rules stop at 760, so this band had nothing. ── */
@media(min-width:761px) and (max-width:1199px){
  :root{--gut:clamp(28px,4.5vw,56px)}
  h1{font-size:clamp(44px,7vw,68px)}
  h2.big{font-size:clamp(30px,4.6vw,48px)}
  .hero{padding:150px var(--gut) 0}
  .hstrip-s b{font-size:17px; padding:10px 19px}

  .cards{grid-template-columns:repeat(2,1fr); gap:40px 24px}
  .wgrid{grid-template-columns:repeat(2,1fr); gap:22px}
  .wcard.has-img{aspect-ratio:4/3}
  .wcard .results{padding:16px 16px 18px}
  .wcard .results .rrow{grid-template-columns:1fr 1fr; gap:12px}
  .wcard .results .rv2{font-size:22px}
  .wname{font-size:20px}
  .wdesc{font-size:15px}

  .workhead{grid-template-columns:1fr; gap:14px}
  .workhead .wc{text-align:left}
  .workhead .wc h2{font-size:clamp(52px,9vw,84px)}
  .workhead .wr{max-width:56ch}

  /* the five columns are unreadable at tablet width — stack them */
  .cols{flex-direction:column; height:auto}
  .col{border-right:0; border-bottom:1px solid var(--rule); padding:26px 24px; gap:18px}
  .col .ct{max-width:none; font-size:clamp(34px,6vw,54px)}
  .col .cd,.col .cstack{opacity:1; transform:none}
  .col:not(.on) .cd{color:var(--ink-2)}
  .col:not(.on) .cstack b{border-color:rgba(0,0,0,.3); color:var(--ink)}
  .col:not(.on) .arrow{border-color:rgba(0,0,0,.3)}
  .col:not(.on) .arrow svg{stroke:var(--ink)}
  .colnav{display:none}

  .srow{grid-template-columns:52px 118px 1fr; gap:20px; row-gap:16px}
  .srow > div:nth-child(5){grid-column:2 / -1}
  .srow .sarrow{grid-column:2 / -1; justify-self:start}
  .svchead{grid-template-columns:1fr}
  .svchead h2{font-size:clamp(52px,9vw,86px)}

  .bwrap{grid-template-columns:1fr; gap:26px}
  .git{grid-template-columns:1fr; gap:40px}
  .git h2{font-size:clamp(52px,9vw,80px)}
  .form-wrap{grid-template-columns:1fr; gap:44px}
  .collage{position:static; grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr; gap:44px}
  .quals{grid-template-columns:1fr 1fr}
  .bio{grid-template-columns:1fr; gap:30px}
  .bio-photo{max-width:320px}
  .csduo{grid-template-columns:1fr; gap:30px}
  .cs-grid{grid-template-columns:1fr; gap:32px}
  .office{grid-template-columns:220px 1fr; row-gap:12px}
  .office .addr,.office .mail{grid-column:2}
  .mpanel.on{grid-template-columns:1fr; gap:30px}
  .mfeat{grid-template-columns:1fr 1fr}
  .lgrid{grid-template-columns:repeat(3,1fr)}
  .iit-big{font-size:clamp(46px,8vw,76px)}
  .tr{grid-template-columns:120px 1fr; row-gap:6px}
  .tr .pl{grid-column:2; text-align:left}
}

/* quals grid was left without a desktop rule after the third card went */
@media(min-width:820px){.quals{grid-template-columns:1fr 1fr}}

/* ── prev / next controls for the expanding columns ── */
.colnav{display:flex; gap:10px; align-items:center; margin-top:18px}
.colnav button{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--ink); background:none;
  cursor:pointer; display:grid; place-items:center; transition:background .3s, color .3s, opacity .3s;
}
.colnav button svg{width:17px; stroke:var(--ink)}
.colnav button:hover{background:var(--ink)}
.colnav button:hover svg{stroke:var(--paper)}
.colnav button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.colnav button[disabled]{opacity:.28; cursor:default}
.colnav button[disabled]:hover{background:none}
.colnav button[disabled]:hover svg{stroke:var(--ink)}
.colnav .cpos{font-size:13px; color:var(--dim); margin-left:6px; font-variant-numeric:tabular-nums}
@media(max-width:900px){.colnav{display:none}}

/* the enquiry form flashes when the budget builder hands off to it */
.gf.carried{animation:carried 2.2s ease}
@keyframes carried{0%{box-shadow:0 0 0 0 rgba(239,90,55,.35)}18%{box-shadow:0 0 0 10px rgba(239,90,55,.14)}100%{box-shadow:0 0 0 0 rgba(239,90,55,0)}}


/* ═════ centered hero with the IITians closer ═════ */
.hero-c{text-align:center}
.hero-c h1{margin-inline:auto; max-width:none}
.hero-c .hsub{margin-inline:auto}
.hero-c .hcta{justify-content:center}
.h1-iit{
  display:inline-block; font-size:.42em; font-weight:700; letter-spacing:-.02em;
  color:var(--accent); margin-top:.32em;
}
@media(max-width:760px){.h1-iit{font-size:.52em}}


/* ═════ where we operate ═════ */
.ops{text-align:center}
.opsgrid{display:grid; grid-template-columns:1fr; gap:16px; max-width:1020px; margin:0 auto}
@media(min-width:700px){.opsgrid{grid-template-columns:repeat(3,1fr)}}
.opsbox{
  border:1px solid var(--rule); border-radius:28.8px; padding:clamp(28px,3.4vw,44px) 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
  background:var(--paper);
}
.opsbox::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--f)}
.opsbox:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,.08)}
.opsbox .flag{font-size:44px; line-height:1}
.opsbox b{font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em}
.opsbox i{font-style:normal; font-size:14px; color:var(--ink-2); line-height:1.5; max-width:26ch}
.opsclock{
  margin-top:8px; font-size:13.5px; font-variant-numeric:tabular-nums;
  border:1px solid var(--ink); border-radius:999px; padding:7px 16px;
}
@media(max-width:699px){.opsbox{border-radius:20px}}


/* ═════ impact card fix: no more white box floating over the screenshot.
   Image is a clean top band; the results panel docks below it. ═════ */
.wcard.has-img{aspect-ratio:auto; display:flex; flex-direction:column; min-height:0; padding:0}
.wcard.has-img .wshot{
  position:static; inset:auto; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; object-position:top center; display:block;
}
.wcard.has-img .wtop{position:absolute; top:0; left:0; right:0; z-index:2; padding:16px 18px}
.wcard.has-img .results{
  position:relative; z-index:1; margin:0; border-radius:0;
  border-top:1px solid var(--rule); background:var(--paper); padding:20px 22px 24px;
}
.wcard.has-img .view{top:31%}
@media(max-width:1199px){
  .wcard.has-img{aspect-ratio:auto}
  .wcard.has-img .results{margin:0; padding:16px 16px 18px}
}

/* the tail keeps only the curve over the black footer — no stray content */
.tail-slim{height:clamp(34px,5vw,60px)}

/* live badge must actually sit right — the earlier .card .shot .badge rule outranked it */
.card .shot .badge.live{left:auto; right:14px}

/* the black Services box never touches its neighbours — clear space above and below,
   whatever module precedes it (home IIT slab, about team slab, arya page sections) */
.svc{margin:clamp(30px,4.5vw,64px) var(--gut) !important}
.iit{border-bottom:0}


/* ═════ "IITians" cycles through a few brand colours — held, then a soft swap ═════ */
@keyframes iit-hero{
  0%,26%{color:var(--accent)}
  33%,59%{color:var(--ink)}
  66%,92%{color:#7C5CE0}
  100%{color:var(--accent)}
}
.h1-iit{animation:iit-hero 9s ease-in-out infinite !important}

@keyframes iit-dark{
  0%,22%{color:var(--accent)}
  28%,47%{color:var(--paper)}
  53%,72%{color:var(--sun)}
  78%,94%{color:var(--cyan)}
  100%{color:var(--accent)}
}
.iit-big em{animation:iit-dark 11s ease-in-out infinite !important}

/* a colour fade is not motion — keep it under reduced-motion, just slower */
@media (prefers-reduced-motion:reduce){
  .h1-iit{animation-duration:14s !important}
  .iit-big em{animation-duration:16s !important}
}

.hsub strong{color:var(--ink); font-weight:600}

/* IITians: black in the hero (on white), white in the dark slab */
.h1-iit,.iit-big em{animation:none !important}
.h1-iit{color:var(--ink) !important}
.iit-big em{color:var(--paper) !important}

/* more lines in the strip means a longer track — keep the speed readable */
.mq-t{animation-duration:64s !important}


/* ═════ fluent word ticker — the word slides, the box eases to its new width ═════ */
.rotw{
  display:inline-block; position:relative; overflow:hidden;
  vertical-align:bottom; line-height:inherit; will-change:width;
  transition:width .52s cubic-bezier(.16,1,.3,1) !important;
}
.rotw .rw{
  display:inline-block; white-space:nowrap; will-change:transform,opacity;
  transition:transform .44s cubic-bezier(.16,1,.3,1), opacity .3s ease !important;
}
.rotw .rw.is-out{transform:translateY(-104%); opacity:0}
.rotw .rw.is-next{transform:translateY(104%); opacity:0; transition:none !important}

/* the ticking word owns its colour (set per-word in JS); ease it on the swap */
.rotw .rw{transition:transform .44s cubic-bezier(.16,1,.3,1), opacity .3s ease, color .4s ease !important}
h1 em{color:var(--dim)}


/* ═════ stat rows: separate rounded cards instead of one hairline grid ═════ */
.iit-row,.slab .figs{
  background:none !important; border:0 !important; gap:14px !important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
}
.iit-cell,.slab .fig{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:26px 24px 24px !important;
  position:relative; overflow:hidden;
  transition:background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.iit-cell::after,.slab .fig::after{
  content:""; position:absolute; left:24px; top:0; width:28px; height:3px;
  background:var(--accent); border-radius:0 0 3px 3px; opacity:.85;
}
.iit-cell:nth-child(2)::after,.slab .fig:nth-child(2)::after{background:var(--cyan)}
.iit-cell:nth-child(3)::after,.slab .fig:nth-child(3)::after{background:var(--lime)}
.iit-cell:nth-child(4)::after,.slab .fig:nth-child(4)::after{background:var(--violet)}
.iit-cell:nth-child(5)::after,.slab .fig:nth-child(5)::after{background:var(--sun)}
.iit-cell:hover,.slab .fig:hover{
  background:rgba(255,255,255,.085) !important;
  border-color:rgba(255,255,255,.22);
  transform:translateY(-4px);
}
@media(max-width:760px){
  .iit-cell,.slab .fig{border-radius:16px; padding:22px 20px 20px !important}
  .iit-row,.slab .figs{gap:10px !important}
}


/* budget cards size to their content and sit top-aligned in the grid —
   a percentage min-height here fed back into the grid and inflated both boxes */
.bwrap{align-items:start}
.brail,.bcard{height:auto; min-height:0; align-self:start}


/* team cards show a cluster of people, not an institutional badge */
.founder .faces{
  display:flex; justify-content:center; align-items:center;
  height:132px; margin:0 auto 16px;
}
.founder .faces span{
  width:60px; height:60px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--ink);
  border:2px solid var(--paper);
}
.founder .faces span:not(:first-child){margin-left:-18px}
.founder .faces span:nth-child(1){background:#DFE9FF}
.founder .faces span:nth-child(2){background:#FFE6D6}
.founder .faces span:nth-child(3){background:#DFF6E6}
@media(max-width:560px){
  .founder .faces{height:96px}
  .founder .faces span{width:46px;height:46px;font-size:17px}
  .founder .faces span:not(:first-child){margin-left:-14px}
}


/* project name sits above its card; description below. No duplicated caption. */
.wcell .wname{margin:0 0 14px; font-size:clamp(20px,2.2vw,26px)}
.wcell .wdesc{margin-top:16px}
.wcard.has-img{aspect-ratio:16/9}
.wcard.has-img .wshot{aspect-ratio:16/9}
.wcard.has-img .view{top:50%}


/* the /FINTECH /IOS+ANDROID pills live under the description now, not over the shot */
.wtags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.wtags span{
  border:1px solid var(--rule); border-radius:999px; padding:7px 14px;
  font-size:12.5px; font-weight:500; letter-spacing:.3px; color:var(--ink-2);
  background:var(--paper); transition:border-color .3s, color .3s;
}
.wcell:hover .wtags span{border-color:var(--ink); color:var(--ink)}
/* only the Live chip stays on the image, top-right */
.wcard .wtop{justify-content:flex-end}
@media(max-width:760px){.wtags span{font-size:12px; padding:6px 12px}}


/* the ticker mask was clipping descenders (g, y, p) and accents.
   Give the box room top and bottom, then pull it back so the line does not shift. */
.rotw{
  padding:.16em 0 .22em !important;
  margin:-.16em 0 -.22em !important;
}


/* every column fill is a light colour, so the open column reads in ink, not white.
   (White only worked on the reference's darker cyan.) */
.col.on .ct{color:var(--ink) !important}
.col .cd{color:rgba(0,0,0,.74) !important}
.col .cstack b{border-color:rgba(0,0,0,.34) !important; color:rgba(0,0,0,.86) !important}
.col .arrow{border-color:rgba(0,0,0,.3) !important}
.col .arrow svg{stroke:var(--ink)}
.col.on .arrow{background:var(--ink) !important; border-color:var(--ink) !important}
.col.on .arrow svg{stroke:var(--paper)}


/* ── iOS: keep the sidebar clear of the notch and the home indicator ── */
.side{
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.side-top{position:sticky; top:0; background:var(--paper); z-index:2}
.side .sfoot{padding-bottom:calc(34px + env(safe-area-inset-bottom, 0px))}

/* ── ticker: enough room that descenders and accents are never clipped ── */
.rotw{
  padding:.20em 0 .30em !important;
  margin:-.20em 0 -.30em !important;
}


/* the IITians block is a rounded card like Services, not a full-bleed band */
.iit{
  margin:clamp(30px,4.5vw,64px) var(--gut);
  padding:clamp(56px,7vw,104px) clamp(24px,4vw,64px);
  border-radius:28.8px;
  border-bottom:0;
}
.iit-in{max-width:none}
@media(max-width:760px){
  .iit{margin:clamp(24px,4vw,40px) 12px; padding:44px 22px; border-radius:20px}
}


/* ═════ mobile: the columns become a vertical accordion.
   Same behaviour as the desktop strip — one open, the rest collapsed to a title. ═════ */
@media(max-width:900px){
  .cols{border:1px solid var(--rule); border-radius:20px; overflow:hidden}
  .col{
    padding:0 !important; gap:0 !important; cursor:pointer;
    border-bottom:1px solid var(--rule); border-right:0;
    display:block !important; background:var(--paper);
    transition:background .5s cubic-bezier(.16,1,.3,1);
  }
  .col:last-child{border-bottom:0}
  .col.on{background:var(--fill)}

  /* the title row is always visible and carries the open/close affordance */
  .col .ct{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 20px; margin:0; max-width:none;
    font-size:clamp(26px,7.6vw,34px) !important; line-height:1.1;
    color:#787878;
  }
  .col.on .ct{color:var(--ink) !important}
  .col .ct::after{
    content:""; flex:none; width:13px; height:13px; border-right:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor; transform:rotate(45deg) translateY(-3px);
    transition:transform .45s cubic-bezier(.16,1,.3,1); opacity:.55;
  }
  .col.on .ct::after{transform:rotate(-135deg) translateY(-3px); opacity:1}

  /* body collapses to nothing and eases open */
  .cbody{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
  .col.on .cbody{grid-template-rows:1fr}
  .cbody-in{overflow:hidden}
  .col .cd{
    opacity:1 !important; transform:none !important; max-width:none;
    padding:0 20px; margin:0 0 16px; font-size:15px; line-height:1.55;
  }
  .col .cstack{opacity:1 !important; transform:none !important; padding:0 20px; margin:0}
  .col .arrow{margin:18px 20px 24px}
}

/* desktop wraps the title naturally at ~9ch, so no hard <br> is needed */
.col .ct{max-width:9ch}
@media(max-width:900px){.col .ct{max-width:none}}

/* all four IITians cells are now labels, not counters — even the type down a notch */
.iit-cell b{font-size:clamp(20px,2.2vw,27px); line-height:1.15}


/* ═════ service rows: explicit grid areas so the heading can sit beside the .DOT mark ═════ */
.srow{
  grid-template-columns:70px 150px minmax(0,1.15fr) minmax(0,1fr) 70px;
  grid-template-areas:
    "num logo title cats arrow"
    "num logo desc  cats arrow";
  align-items:center; row-gap:10px;
}
.srow .sn{grid-area:num}
.srow .slogo{grid-area:logo}
.srow h3{grid-area:title; margin:0}
.srow .sdesc{grid-area:desc; margin:0}
.srow .scats{grid-area:cats}
.srow .sarrow{grid-area:arrow}

/* tablet + mobile: number on its own line, then MARK + HEADING side by side */
@media(max-width:1199px){
  .srow{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "num   num"
      "logo  title"
      "desc  desc"
      "cats  cats"
      "arrow arrow";
    align-items:center; row-gap:14px; column-gap:18px;
  }
  .srow > div:nth-child(5){grid-column:auto}
  .srow .sarrow{justify-self:start}
  .srow .slogo{align-self:center}
  .srow h3{max-width:none; font-size:clamp(21px,5.6vw,28px)}
  .srow .sdesc{max-width:none}
}



/* ═════ sidebar: fixed header, scrolling body ═════
   The whole panel used to scroll, so the brand and close button slid up under
   the iOS status bar. Header is now a non-scrolling flex child with its own
   safe-area padding; only the links scroll. */
.side{
  display:flex; flex-direction:column;
  overflow:hidden !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.side-top{
  position:static !important; flex:0 0 auto;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 22px 16px;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.side-top .brand{font-size:21px}
.side nav.sn{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 22px 8px;
}
.side .sfoot{
  flex:0 0 auto; margin-top:0;
  border-top:1px solid var(--rule);
  padding:20px 22px calc(22px + env(safe-area-inset-bottom, 0px));
}


/* ═════ edge safety: never let content touch the screen edge ═════
   The gutter now has a real floor and folds in the device's own safe-area
   insets, so notches and rounded corners in landscape are respected too. */
:root{
  --gut-min:22px;
  --gut:calc(clamp(22px, 5vw, 72px) + env(safe-area-inset-left, 0px));
}
@media(max-width:420px){
  :root{--gut:calc(22px + env(safe-area-inset-left, 0px))}
}
nav{
  padding-left:max(var(--gut), env(safe-area-inset-left, 0px)) !important;
  padding-right:max(var(--gut), env(safe-area-inset-right, 0px)) !important;
}
.ann{
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}


/* the range input is in normal flow while .bar is absolute, so the gradient was
   painting over the thumb. Put the input (and its thumb) above the track. */
.btrack .bar{z-index:1}
.btrack input[type=range]{position:relative; z-index:2}
.btrack input[type=range]::-webkit-slider-thumb{
  box-shadow:0 0 0 1px var(--ink), 0 3px 10px rgba(0,0,0,.22);
}
.btrack input[type=range]::-moz-range-thumb{
  box-shadow:0 0 0 1px var(--ink), 0 3px 10px rgba(0,0,0,.22);
}


/* ═════ HOW WE WORK — cards drift in one after another, then breathe ═════ */

/* entrance: each card rises and settles, staggered down the row */
.steps .step{
  opacity:0;
  animation:step-in .85s cubic-bezier(.16,1,.3,1) forwards;
}
.rv.in .step, .steps.in .step{animation-play-state:running}
.steps .step:nth-child(1){animation-delay:.05s}
.steps .step:nth-child(2){animation-delay:.20s}
.steps .step:nth-child(3){animation-delay:.35s}
.steps .step:nth-child(4){animation-delay:.50s}

/* once settled, hand over to the float — the inner wrapper carries it so the
   entrance transform and the idle transform never fight each other */
.step-body{display:contents}
.steps .step::after{content:none}

/* the float lives on the card itself after the entrance finishes */
.steps .step:nth-child(1){animation-delay:.05s, 1.0s}
.steps .step:nth-child(2){animation-delay:.20s, 1.6s}
.steps .step:nth-child(3){animation-delay:.35s, 2.2s}
.steps .step:nth-child(4){animation-delay:.50s, 2.8s}

/* hover still lifts, and pauses the drift so it feels intentional */
.step:hover{animation-play-state:running, paused; transform:translateY(-10px)}

/* no ghost numeral any more — the card leads with the timing chip */
.step-n{display:none}
.step-when{margin-top:0}

/* the desktop stagger is now part of the float, so drop the static offsets */
@media(min-width:1200px){
  .steps{margin-bottom:0}
  .steps .step:nth-child(2):hover,
  .steps .step:nth-child(3):hover,
  .steps .step:nth-child(4):hover{transform:translateY(-10px)}
}

/* mobile gets the same treatment, just a shorter drift */
@media(max-width:759px){
  .steps .step{animation-duration:.7s, 5.5s}
}





/* ═════ sidebar header: guaranteed clearance ═════
   env(safe-area-inset-top) is 0 in Safari here, so the brand and close button
   sat under the status bar. A hard minimum guarantees the gap either way. */
.side-top{
  padding-top:max(26px, calc(16px + env(safe-area-inset-top, 0px))) !important;
  padding-bottom:18px !important;
  min-height:74px; display:flex; align-items:center; justify-content:space-between;
}
.side-top .brand{line-height:1.1}

/* ═════ step cards: visibility never depends on an animation ═════
   The entrance now rides the existing reveal (transition, not keyframes), so a
   card can never be stranded at opacity 0. Only the float is a keyframe. */
.steps .step{
  opacity:1 !important;
  animation:step-float 6s ease-in-out infinite !important;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s ease;
}
html.anim .steps.rv:not(.in) .step{opacity:0 !important; transform:translateY(30px)}
html.anim .steps.rv.in .step{opacity:1 !important}
@media (prefers-reduced-motion:reduce){
  .steps .step{animation-duration:11s !important}
}



/* ═════ Our Work: three across so more of the portfolio shows ═════ */
@media(min-width:1000px){
  .wgrid{grid-template-columns:repeat(3,1fr); gap:26px}
  .wcard.has-img{aspect-ratio:16/10}
  .wcell .wname{font-size:clamp(18px,1.7vw,22px)}
  .wcell .wdesc{font-size:15px}
}
@media(min-width:761px) and (max-width:999px){.wgrid{grid-template-columns:repeat(2,1fr)}}


/* ═════ HOW WE WORK — one line edge to edge, cards threaded onto it ═════
   The path is generated in JS at the container's real pixel size so the cards
   can be placed exactly on the curve, and the draw is tied to scroll position
   rather than fired once. */
.steps-wrap{
  position:relative;
  /* break out of the page gutter so the line truly runs edge to edge */
  margin-left:calc(var(--gut) * -1);
  margin-right:calc(var(--gut) * -1);
  padding:clamp(30px,5vw,70px) var(--gut) clamp(40px,6vw,90px);
}
.steps-line{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.steps-track{opacity:.9}
.steps-draw{stroke-dasharray:var(--len,3000); stroke-dashoffset:var(--len,3000)}

.steps{position:relative; z-index:1; align-items:start}

/* each card is lifted onto the curve by JS via --ride */
/* visible by default; JS opts in to the scroll reveal, so a card is never
   stranded invisible if the handler does not run */
/* the bead that sits on the line at each card */
.step::after{
  content:""; position:absolute; top:-10px; left:50%; width:15px; height:15px;
  border-radius:50%; background:var(--s); border:3px solid var(--paper); z-index:2;
  transform:translate(-50%,0) scale(0);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 10px rgba(0,0,0,.16);
}
.step.on::after{transform:translate(-50%,0) scale(1)}

@media(max-width:1199px){
  .steps-line{display:none}
  .steps .step{transform:none !important}
  .steps-wrap{margin-left:0; margin-right:0; padding-left:0; padding-right:0}
}


/* the cards are positioned by --ride, so nothing else may drive their transform */
.steps .step{animation:none !important}
.steps .step:nth-child(1),.steps .step:nth-child(2),
.steps .step:nth-child(3),.steps .step:nth-child(4){animation:none !important}
/* ═════ HOW WE WORK — restored card + grid base ═════ */
.steps{
  display:grid; grid-template-columns:1fr; gap:20px;
  position:relative; z-index:1; align-items:start;
}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr); gap:22px}}
@media(min-width:1200px){.steps{grid-template-columns:repeat(4,1fr); gap:22px}}

.steps .step{
  position:relative; overflow:visible; isolation:isolate;
  background:var(--paper); border:1px solid var(--rule); border-radius:22px;
  padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.steps .step::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--s); border-radius:22px 22px 0 0; z-index:1;
}
.steps .step-when{
  position:relative; z-index:1; align-self:flex-start; margin-top:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:999px; padding:6px 13px;
}
.steps .step h3{
  position:relative; z-index:1; margin:6px 0 0;
  font-weight:700; font-size:clamp(19px,1.9vw,23px); letter-spacing:-.028em; line-height:1.18;
}
.steps .step p{
  position:relative; z-index:1; margin:0;
  font-size:15px; line-height:1.55; color:var(--ink-2);
}
@media(max-width:759px){
  .steps .step{border-radius:18px; padding:22px 20px 24px}
}


/* ═════ HOW WE WORK — cards threaded onto one line, edge to edge ═════
   At desktop each card is positioned absolutely at a point ON the curve, so the
   line enters one side of the card and leaves the other. Nothing is offset or
   approximated: JS asks the path for its exact y at each card's x. */
.steps-wrap{
  position:relative;
  margin-left:calc(var(--gut) * -1);
  margin-right:calc(var(--gut) * -1);
  padding:0 var(--gut);
}
.steps-line{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.steps-draw{stroke-dasharray:var(--len,3000); stroke-dashoffset:var(--len,3000)}
.steps{position:relative; z-index:1}

.steps .step{
  background:var(--paper); border:1px solid var(--rule); border-radius:22px;
  padding:24px 22px 26px; display:flex; flex-direction:column; gap:11px;
  box-shadow:0 6px 22px rgba(0,0,0,.07);
  position:relative;
  /* clip so the coloured cap follows the rounded corners instead of
     spilling past them */
  overflow:hidden;
}
.steps .step::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--s); border-radius:22px 22px 0 0;
}

@media(min-width:1200px){
  /* JS sets the wrap height and each card's left/top from the curve */
  .steps{position:static}
  .steps .step{
    position:absolute; margin:0;
    width:var(--cw,300px);
    transform:translateY(var(--slide,26px));
    opacity:0;
    transition:opacity .6s ease, transform .75s cubic-bezier(.16,1,.3,1);
  }
  .steps .step.on{opacity:1; transform:translateY(0)}
}
@media(max-width:1199px){
  .steps{display:grid; gap:18px; grid-template-columns:1fr}
  .steps-line{display:none}
  .steps-wrap{margin:0; padding:0}
}
@media(min-width:760px) and (max-width:1199px){.steps{grid-template-columns:repeat(2,1fr)}}


/* ═════ mobile: the same thread, running vertically ═════
   A line down the left with the cards hung off it, drawn as you scroll. */
@media(max-width:1199px){
  .steps-wrap{position:relative; margin:0; padding:0 0 0 34px}
  .steps-line{display:block; position:absolute; left:0; top:0; width:34px; height:100%; z-index:0}
  .steps{display:grid; gap:20px; grid-template-columns:1fr; position:relative; z-index:1}
  .steps .step{opacity:0; transform:translateX(18px);
    transition:opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1)}
  .steps .step.on{opacity:1; transform:none}
  /* the bead where the line meets each card */
  .steps .step::after{
    content:""; position:absolute; left:-34px; top:32px; width:13px; height:13px;
    border-radius:50%; background:var(--s); border:3px solid var(--paper);
    transform:translateX(-50%) scale(0); z-index:3;
    transition:transform .45s cubic-bezier(.34,1.56,.64,1) .15s;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .steps .step.on::after{transform:translateX(-50%) scale(1)}
}
@media(min-width:760px) and (max-width:1199px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps .step::after{display:none}
  .steps-wrap{padding-left:0}
  .steps-line{display:none}
}