/* Vyakaar Engineers. Layout follows the Elevra reference: cool grey page, white rounded cards,
   two-tone headlines, pill buttons, blue-sky imagery, dark navy footer. */
:root{
  color-scheme: light;
  --bg:#f2f4f6;
  --card:#ffffff;
  --ink:#14163a;        /* card navy, taken almost to black */
  --cta:#0b0e1c;        /* black call-to-action */
  --blue:#004aad;       /* card royal blue */
  --cyan:#b4f6ff;       /* card light cyan */
  --teal:#62c2ac;       /* logo teal */
  --red:#ff3131;        /* logo red */
  --muted:#596074;
  --soft:#8b93a3;
  --line:#e3e6ea;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --r:14px;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.soft{color:var(--soft)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.brand img{width:30px;height:30px}
.links{display:flex;gap:26px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.links a{text-decoration:none;font-size:14.5px;color:var(--ink)}
.links a:hover,.links a.on{color:var(--muted)}
.menu{display:none;border:0;background:var(--card);border-radius:999px;padding:9px 16px;font:inherit;cursor:pointer}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;border:0;background:var(--ink);color:#fff;text-decoration:none;font:500 14.5px var(--body);cursor:pointer;transition:background .25s,color .25s,transform .15s}
.btn:hover{background:var(--blue);transform:translateY(-1px)}
.btn.ghost:hover,footer .btn:hover,.result .btn:hover,.still .btn:hover{background:var(--cyan);color:var(--ink)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.wide{width:100%;padding:13px 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #b9c0c9;border-radius:999px;padding:7px 14px;font-size:13.5px;background:transparent;color:var(--ink);font-family:var(--body)}
button.chip{cursor:pointer}
button.chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.num{display:inline-block;background:var(--cyan);border-radius:8px;padding:4px 9px;font-size:12.5px}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--cyan);border-radius:8px;padding:6px 10px;font-size:13px}

/* section heads */
section.band{padding:110px 0 0}
section.band.last{padding-bottom:110px}
.head{max-width:760px;margin:0 auto 44px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:18px}
.eyebrow::before{content:"";width:15px;height:15px;background:url(img/logo.svg) center/contain no-repeat}
.head h2,.h2{font-size:clamp(32px,4.4vw,52px)}
.head h2 .soft,.h2 .soft{display:block}
.head p{color:var(--muted);margin-top:16px;font-size:15.5px}
.card{background:var(--card);border-radius:var(--r);padding:22px}
.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.note{font-size:13px;color:var(--muted)}
.ph{background-size:cover;background-position:center;border-radius:var(--r);position:relative;overflow:hidden;color:#fff}
.glass{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border-radius:12px;padding:16px 18px;color:#fff;font-size:15px;line-height:1.45}
.glass b{display:flex;align-items:center;gap:7px;font-weight:400;font-size:12.5px;margin-bottom:10px}
.glass b::before{content:"";width:11px;height:11px;border-radius:50%;background:#fff}
.glass a{display:inline-block;margin-top:14px;font-size:13.5px;text-decoration:none}
.glass small{display:block;margin-top:10px;opacity:.8;font-size:12.5px}

/* hero */
.hero{padding:64px 0 0}
.hero .top{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,56px);max-width:17ch}
.hero h1 .soft{display:block}
.hero .side p{color:var(--muted);max-width:44ch;margin-bottom:18px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.trio{display:grid;grid-template-columns:.92fr 1fr 1fr;gap:10px;margin-top:44px}
.trio>*{min-height:410px}
.trio .stat{display:flex;flex-direction:column}
.trio .stat span{font-size:13.5px}
.trio .stat b{font:400 clamp(52px,6vw,76px)/1 var(--display);letter-spacing:-.04em;margin-top:14px}
.trio .stat p{margin-top:auto;color:var(--muted);max-width:36ch}
.trio .ph{display:grid;place-items:center;padding:24px}
.trio .glass{max-width:270px}

/* about stats */
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.about h2{margin-bottom:26px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border-radius:var(--r);padding:20px;min-height:200px;display:flex;flex-direction:column}
.tile b{font:400 clamp(30px,3.2vw,42px)/1 var(--display);letter-spacing:-.04em}
.tile h3{font-size:17px;letter-spacing:-.02em;margin-top:auto}
.tile p{font-size:13.5px;color:var(--muted);margin-top:6px}
.tile.ph p{color:rgba(255,255,255,.85)}
.marq{margin-top:70px;text-align:center}
.marq small{font-size:13px;letter-spacing:.02em;text-transform:uppercase}
.ticker{overflow:hidden;margin-top:22px;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.ticker div{display:flex;gap:56px;width:max-content;animation:tick 46s linear infinite;font:600 20px var(--display);letter-spacing:-.02em;color:#8f99a5;white-space:nowrap}
@keyframes tick{to{transform:translateX(-50%)}}

/* stacked service cards */
.stack{display:grid;gap:12px}
.svc{background:var(--card);border-radius:var(--r);padding:8px;display:grid;grid-template-columns:minmax(260px,.56fr) 1fr;gap:22px;position:sticky;box-shadow:0 -8px 30px rgba(33,45,61,.07)}
.svc .ph{min-height:440px;border-radius:10px;display:flex;align-items:flex-end;padding:18px}
.svc .glass{width:100%;max-width:300px}
.svc .txt{padding:16px 16px 12px 0;display:flex;flex-direction:column;gap:12px}
.svc h3{font-size:clamp(30px,3.8vw,46px)}
.svc .one{color:var(--muted);max-width:40ch;font-size:15.5px}
.svc .sp{flex:1;min-height:20px}
.svc h4{font-size:18px;letter-spacing:-.02em}
.svc .detail{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px}
.svc .detail div{background:var(--bg);border-radius:10px;padding:14px 16px}
.svc .detail b{display:block;font-weight:500;margin-bottom:4px}
.svc ul{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:4px}
.mini{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-decoration:none;background:var(--card);border-radius:var(--r);padding:16px 18px}
.mini h3{font-size:17px;letter-spacing:-.02em}
.mini p{font-size:13.5px;color:var(--muted)}
.mini em{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* why us */
.why{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center}
.why .big{font:400 clamp(52px,6vw,76px)/1 var(--display);letter-spacing:-.04em;color:var(--blue)}
.why p{color:var(--soft);font-size:18px;line-height:1.45;margin-top:18px;max-width:30ch;font-family:var(--display);letter-spacing:-.02em}
.why p b{color:var(--ink);font-weight:500}
.bars{position:relative;padding:8px 0 44px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 16.666%)}
.bar{margin:0 0 26px}
.bar small{display:block;font-size:13px;margin-bottom:8px;padding-left:2px}
.bar div{display:flex;align-items:center;gap:12px}
.bar i{display:block;height:34px;border-radius:999px;background:var(--card)}
.bar.on i{background:var(--blue)}
.bar span{font-size:12.5px;color:var(--muted);line-height:1.3}
.bars .axis{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.sides{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:56px}
.sides .card{min-height:230px;display:flex;flex-direction:column;gap:10px}
.sides h3{font-size:22px}
.sides p{color:var(--muted);font-size:14px}
.sides .m{margin-top:auto;color:var(--ink);font-size:15px;padding-top:14px;border-top:1px solid var(--line)}

/* process */
.proc{background:var(--card);border-radius:var(--r);padding:8px;display:flex;gap:8px;height:400px}
.pstep{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 clamp(84px,11%,150px);background:var(--bg);border-radius:10px;padding:18px 12px;font-size:14px;color:var(--muted);text-align:center;position:relative;overflow:hidden;transition:flex-grow .7s cubic-bezier(.16,1,.3,1)}
.pstep em{font-style:normal;color:var(--ink)}
.pstep .lb{position:absolute;top:18px;left:8px;right:8px;z-index:1}
.pstep[aria-selected="true"] .lb{left:20px}
.pstep::before{content:"";position:absolute;inset:0;background:var(--img) var(--pos,center)/auto 100%;background-size:cover;opacity:0;transition:opacity .5s}
.pstep::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(16,18,60,.6));opacity:0;transition:opacity .5s}
.pstep .in{position:absolute;left:20px;bottom:20px;width:min(440px,70vw);text-align:left;z-index:1;opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s}
.pstep[aria-selected="true"]{flex-grow:1;color:#fff;text-align:left;padding-left:20px;cursor:default}
.pstep[aria-selected="true"] em{color:#fff}
.pstep[aria-selected="true"]::before,.pstep[aria-selected="true"]::after{opacity:1}
.pstep[aria-selected="true"] .in{opacity:1;transform:none;transition:opacity .5s .3s,transform .6s .3s cubic-bezier(.16,1,.3,1)}
.pstep .in h3{font-size:34px;color:#fff}
.pstep .in p{max-width:44ch;margin-top:8px;font-size:15px;color:rgba(255,255,255,.9)}
.pstep:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* stage tiles */
.stages{overflow:hidden;padding:6px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strack{display:flex;width:max-content;animation:tick 48s linear infinite}
.stages:hover .strack,.stages:focus-within .strack{animation-play-state:paused}
.stage{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 250px;margin-right:10px;height:340px;border-radius:var(--r);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px;position:relative;overflow:hidden}
.stage::after{content:"";position:absolute;inset:55% 0 0;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);mask-image:linear-gradient(transparent,#000 70%)}
.stage span{position:relative;z-index:1;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:6px 12px;font-size:13px;transition:background .25s,color .25s}
.stage:hover span{background:rgba(255,255,255,.4)}
.stage[aria-selected="true"]{box-shadow:inset 0 0 0 3px var(--blue)}
.stage[aria-selected="true"] span{background:#fff;color:var(--ink)}
.stage:focus-visible{box-shadow:inset 0 0 0 3px var(--cyan)}
.where{display:grid;grid-template-columns:1fr 1fr auto;gap:28px;align-items:center;margin-top:16px}
.where b{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-bottom:6px}
.where p{font:500 18px/1.35 var(--display);letter-spacing:-.02em}

/* case study */
.case{background:var(--card);border-radius:var(--r);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.case .l{padding:14px 16px 16px;display:flex;flex-direction:column;gap:18px}
.case h3{font-size:clamp(26px,3vw,34px);max-width:16ch;margin-top:20px}
.case .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:13.5px;color:var(--muted)}
.case .two b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.case .r{display:grid;grid-template-rows:1fr auto;gap:8px}
.case .ph{min-height:300px;border-radius:10px;display:flex;align-items:flex-end;padding:14px;font-size:13px}
.case .mx{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.case .mx div{background:var(--bg);border-radius:10px;padding:16px}
.case .mx b{font:400 40px/1 var(--display);letter-spacing:-.04em;display:block;margin-bottom:8px}
.case .mx span{font-size:13px;color:var(--muted)}

/* commitments (reference: testimonial row) */
.quad{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.quad .card{min-height:320px;display:flex;flex-direction:column;gap:10px}
.quad .who{display:flex;align-items:center;gap:10px;font-size:13px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.quad .who i{width:30px;height:30px;border-radius:8px;background:var(--cyan) url(img/logo.svg) center/62% no-repeat}
.quad .who span{color:var(--muted);display:block;font-size:12px}
.quad h3{font:500 20px/1.3 var(--display);letter-spacing:-.025em;margin-top:auto}
.quad .ph{padding:22px;display:flex;flex-direction:column}
.quad .ph b{font:400 56px/1 var(--display);letter-spacing:-.04em}
.quad .ph b small{font-size:22px;opacity:.8}
.quad .ph p{font-size:13.5px;margin-top:10px;opacity:.9}
.quad .ph .btn{margin-top:auto;background:var(--ink)}

/* self-check */
.check{display:grid;grid-template-columns:1fr 340px;gap:10px;align-items:start}
.q{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.yn{display:flex;gap:6px;flex:none}
.result{position:sticky;top:84px;min-height:300px;padding:22px;display:flex;flex-direction:column}
.result .big{font:400 60px/1 var(--display);letter-spacing:-.04em}
.result h3{font-size:22px;margin:14px 0 8px;color:#fff}
.result p{font-size:14px;opacity:.92;margin-bottom:18px}
.result .btn{margin-top:auto;background:#fff;color:var(--ink)}

/* faq */
.faq{max-width:720px;margin:0 auto;display:grid;gap:8px}
details{background:var(--card);border-radius:12px;padding:0 18px}
summary{cursor:pointer;list-style:none;padding:17px 0;font:500 17px var(--display);letter-spacing:-.025em;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:300;font-size:24px;line-height:.9}
details[open] summary::after{content:"\00d7"}
details p{color:var(--muted);padding:0 0 18px;max-width:52ch;font-size:14px}
.faq h3{font-size:13px;font-family:var(--body);letter-spacing:0;color:var(--muted);margin:20px 0 2px}
.still{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 22px;min-height:118px}
.still h3{font-size:19px;color:#fff}
.still p{font-size:13.5px;opacity:.9;max-width:34ch;margin-top:6px}
.still .btn{background:#fff;color:var(--ink);flex:none}

/* insights */
.post{height:360px;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.post::before{content:"";position:absolute;inset:0;background:inherit;transition:filter .5s,transform .7s cubic-bezier(.16,1,.3,1)}
.post:hover::before{filter:blur(6px);transform:scale(1.07)}
.post::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(8,18,32,.6))}
.post>*{position:relative;z-index:1}
.post .meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.post .meta span:first-child{background:#fff;color:var(--ink);border-radius:999px;padding:5px 11px}
.post h3{font-size:21px;line-height:1.2;max-width:19ch;color:#fff}
.article{max-width:680px;margin:0 auto}
.article h1{font-size:clamp(32px,4.4vw,48px);margin:14px 0 28px}
.article p,.article li{font-size:17px;line-height:1.7;color:#3a4553}
.article p{margin-bottom:20px}
.article b{color:var(--ink);font-weight:600}
.article ol,.article ul{padding-left:22px;margin:0 0 20px;display:grid;gap:10px}

/* tables, forms, misc pages */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;font-size:12.5px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.v{font-variant-numeric:tabular-nums;white-space:nowrap}
.tw{overflow-x:auto}
.role{font-size:12px;border-radius:999px;padding:3px 10px;background:var(--bg);white-space:nowrap}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
input,select,textarea{font:inherit;color:inherit;background:var(--bg);border:1px solid transparent;border-radius:10px;padding:11px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background-color:#fff}
.tools input{max-width:260px;background-color:var(--card)}
.gl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gl div{background:var(--card);border-radius:var(--r);padding:18px 20px}
.gl h3{font-size:17px;letter-spacing:-.02em}
.gl p{color:var(--muted);font-size:14px;margin-top:6px}
.contact{display:grid;grid-template-columns:1fr 380px;gap:10px;align-items:start}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form label{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
form .full{grid-column:1/-1}
textarea{min-height:120px;resize:vertical}
.out{grid-column:1/-1;background:var(--bg);border-radius:10px;padding:16px;font-size:14px;white-space:pre-wrap}
.info{display:grid;gap:18px}
.info b{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-bottom:3px}
.pagehead{padding:70px 0 0}
.pagehead h1{font-size:clamp(36px,5vw,58px);max-width:16ch}
.pagehead h1 .soft{display:block}
.pagehead p{color:var(--muted);font-size:16.5px;margin-top:18px;max-width:60ch}
.banner{background:var(--cyan);border-radius:12px;padding:14px 16px;font-size:14px;margin-top:22px;max-width:70ch}
.tl{display:grid}
.tl div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.tl div:last-child{border-bottom:0}
.tl span{font-size:13px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:s}
.step{background:var(--card);border-radius:var(--r);padding:20px;counter-increment:s;min-height:190px;display:flex;flex-direction:column}
.step::before{content:"Step / 0" counter(s);font-size:13px;color:var(--muted);margin-bottom:auto;padding-bottom:26px}
.step h3{font-size:19px}
.step p{color:var(--muted);font-size:13.5px;margin-top:6px}

/* footer */
footer{background:var(--ink);color:#fff;margin-top:110px;padding:90px 0 34px}
footer .ready{text-align:center;margin-bottom:84px}
footer .ready small{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
footer .ready small::before{content:"";width:11px;height:11px;border-radius:50%;background:#fff}
footer .ready h2{font-size:clamp(32px,4.4vw,52px);margin:18px 0 14px}
footer .ready h2 .soft{display:block;color:var(--cyan)}
footer .ready p{color:#aab4c0;margin-bottom:22px}
footer .ready .btn{background:#fff;color:var(--ink)}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;font-size:14px}
footer h4{font:400 12.5px var(--body);letter-spacing:0;color:#93a0b0;margin-bottom:14px}
footer .cols a{display:block;text-decoration:none;padding:5px 0}
footer .cols a:hover{color:#aab4c0}
footer .cols p{line-height:1.9}
footer .word{display:flex;align-items:center;gap:.22em;font:700 clamp(44px,10.5vw,150px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:56px 0 30px}
footer .word i{flex:none;width:.95em;height:.95em;border-radius:50%;background:#fff url(img/logo.svg) center/64% no-repeat}
footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#aab4c0}

@media (max-width:920px){
  .hero .top,.about,.svc,.why,.case,.check,.contact{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr}.trio>*{min-height:300px}.trio .stat{grid-column:1/-1;order:-1;min-height:220px}
  .g3,.g4,.steps,.quad,.sides{grid-template-columns:repeat(2,1fr)}
  .svc{position:static}.svc .ph{min-height:240px}.svc .txt{padding:6px 12px 12px}
  .stage{height:260px;flex-basis:200px}
  .where{grid-template-columns:1fr}
  .proc{flex-direction:column;height:auto}.pstep{flex:0 0 auto;text-align:left}.pstep[aria-selected="true"]{min-height:300px}
  footer .cols{grid-template-columns:1fr 1fr}
  .result{position:static}
  .menu{display:block}
  .links{display:none;position:absolute;left:16px;right:16px;top:60px;transform:none;background:var(--card);border-radius:16px;padding:18px;flex-direction:column;align-items:flex-start;box-shadow:0 20px 40px rgba(33,45,61,.14)}
  .links.open{display:flex}
  .nav .wrap>.btn{display:none}
  section.band{padding-top:76px}
}
@media (max-width:560px){
  .g2,.g3,.g4,.steps,.gl,form,.svc .detail,.quad,.sides,.trio,.case .two{grid-template-columns:1fr}
  .mini{grid-template-columns:auto 1fr}.mini em{display:none}
  .tl div{grid-template-columns:1fr;gap:4px}
  .q{flex-direction:column;align-items:flex-start}
  .still{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}html{scroll-behavior:auto}.btn,.stage,.pstep,.pstep::before,.pstep .in,.post::before{transition:none}.strack{animation:none}.stages{overflow-x:auto}}

/* motion support */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
section{overflow:clip}
.svc{will-change:transform}
.vid{padding:0!important}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc{will-change:auto}

/* hover on image cards: picture drifts in, glass note lifts and brightens, arrow nudges */
.ph:has(>.glass){isolation:isolate}
.ph:has(>.glass)::before{content:"";position:absolute;inset:0;background:inherit;z-index:-1;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.ph:has(>.glass):hover::before{transform:scale(1.09)}
.glass{transition:transform .6s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s,box-shadow .6s}
.ph:hover>.glass{transform:translateY(-8px);background:rgba(255,255,255,.27);border-color:rgba(255,255,255,.6);box-shadow:0 18px 40px rgba(16,18,60,.25)}
.glass .go{display:inline-block;margin-top:14px;font-size:13.5px}
.glass a i,.glass .go i{display:inline-block;font-style:normal;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ph:hover .glass a i,.ph:hover .glass .go i{transform:translateX(6px)}
.vid video{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.vid:hover video{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.ph::before,.glass,.glass a i,.vid video{transition:none}}

/* landing banner: wide video with two glass notes */
.trio.one{display:block}
.trio .vid.wide{height:clamp(400px,46vw,580px);min-height:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px!important}
.vid.wide .shade{position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(16,18,60,.6))}
.vid.wide .glass{position:relative;max-width:310px;text-decoration:none}
.stat-g strong{display:block;font:400 clamp(44px,5vw,64px)/1 var(--display);letter-spacing:-.04em;margin-bottom:10px}
@media (max-width:640px){.trio .vid.wide{height:auto;min-height:520px;flex-direction:column;justify-content:flex-end;align-items:stretch}.vid.wide .glass{max-width:none}}

/* grouped service cards on the landing page */
.grp .txt{padding:34px 28px 28px 14px;gap:0}
.grp .lbl{display:flex;align-items:center;gap:12px;font-size:15px;margin-bottom:22px}
.grp .lbl .num{border-radius:999px;padding:6px 12px}
.grp h3{margin-bottom:14px}
.grp .one{font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:52ch;color:#4a5072;margin-bottom:30px}
.grp h4{font-size:17px;margin-bottom:12px}
.grp .chips{margin-bottom:26px}
.grp .rec{color:var(--muted);max-width:52ch;font-size:15.5px;margin-bottom:30px}
.grp .acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:auto}
.grp .acts .btn{padding:14px 22px;font-size:15.5px}
.grp .acts i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.grp .acts a:hover i{transform:translate(3px,-3px)}
.grp .more{font-weight:500;text-underline-offset:5px}
.glass.sit{background:rgba(16,18,60,.82);border-color:rgba(255,255,255,.22);max-width:340px;font-size:15.5px}
.glass.sit b{font-weight:500;font-size:13.5px;margin-bottom:6px}
.glass.sit b::before{display:none}
.ph:hover>.glass.sit{background:rgba(16,18,60,.9);border-color:rgba(255,255,255,.4)}
@media (max-width:920px){.grp .txt{padding:18px 14px 16px}}

/* page width follows the reference: content spans about 80% of the window on desktop */
@media (min-width:1200px){.wrap{max-width:none;padding:0 10.2vw}}

/* compact wide card (training) */
.wcard{background:var(--card);border-radius:var(--r);padding:8px;display:grid;grid-template-columns:minmax(220px,.3fr) 1fr;gap:22px;margin-top:12px;position:relative;z-index:1}
.wcard .ph{min-height:260px;border-radius:10px}
.wcard .wtxt{display:flex;flex-direction:column;justify-content:center;padding:24px 28px 24px 14px}
.wcard h3{font-size:clamp(26px,2.8vw,38px)}
.wcard .one{margin-bottom:22px}
.wcard .acts{margin-top:0}
@media (max-width:920px){.wcard{grid-template-columns:1fr}.wcard .ph{min-height:200px}.wcard .wtxt{padding:8px 14px 16px}}

/* ---- sizes measured from the reference at desktop: fixed px, no viewport scaling ---- */
body{font-size:16px}
h1,h2,.svc h3,.wcard h3,.case h3{font-weight:500;letter-spacing:-.04em}
.nav .wrap{height:72px}
.links{gap:28px}.links a{font-size:16px}
.btn{background:var(--cta);height:44px;padding:0 20px;font-size:16px;font-weight:500}
.btn:hover{background:var(--blue)}
.chip{font-size:14.5px;padding:8px 14px}
.eyebrow{font-size:14px;margin-bottom:18px}
.hero{padding-top:72px}
.hero h1,.pagehead h1{font-size:clamp(38px,4.2vw,64px);line-height:1.08}
.hero .side p{font-size:16px;line-height:1.55;margin-bottom:22px;max-width:46ch}
.pagehead p{font-size:16.5px}
.head{max-width:820px;margin-bottom:48px}
.head h2,.h2,footer .ready h2{font-size:clamp(34px,3.6vw,56px);line-height:1.1}
.head p{font-size:15.5px;margin-top:16px}
section.band{padding-top:clamp(84px,9vw,150px)}
.tile b{font-size:clamp(32px,2.8vw,44px)}
.stat-g strong{font-size:56px}
.glass{font-size:15px;padding:16px 18px}
.vid.wide video{filter:contrast(1.1) saturate(1.15) brightness(.86)}
.vid.wide .shade{inset:0;background:linear-gradient(rgba(11,14,28,.08),rgba(11,14,28,.12) 45%,rgba(11,14,28,.62))}
.trio .vid.wide{height:clamp(400px,36vw,560px)}
.why .big,.case .mx b{color:var(--ink)}
.bar.on i{background:var(--ink)}
footer{background:var(--cta)}

/* service cards: every size and gap taken from the reference card */
.stack{gap:20px}
.svc.grp{padding:10px;gap:28px;grid-template-columns:minmax(280px,.55fr) 1fr;border-radius:16px}
.grp .ph{min-height:540px;border-radius:10px;padding:24px}
.grp .txt{padding:16px 16px 16px 0;gap:0}
.grp .lbl{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:22px}
.grp .lbl .num{background:var(--bg);color:var(--ink);border-radius:8px;padding:4px 9px;font-size:13px}
.grp h3{font-size:clamp(30px,3.2vw,48px);line-height:1.1;margin-bottom:12px}
.grp .one{color:var(--muted);font-size:16px;line-height:1.45;max-width:34ch;margin-bottom:0}
.grp .sp{flex:1;min-height:28px}
.grp h4{font-size:20px;letter-spacing:-.03em;margin-bottom:12px}
.grp .chips{gap:10px;margin-bottom:24px}
.grp .chip{font-size:14.5px;padding:8px 13px;border-color:#9aa1ad}
.grp .btn.wide{width:100%;height:44px}
.glass.sit{background:rgba(20,22,58,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.34);max-width:280px;font-size:15px;line-height:1.4;padding:16px}
.glass.sit b{display:flex;font-weight:400;font-size:13.5px;margin-bottom:8px}
.glass.sit b::before{display:block;width:12px;height:12px}
.ph:hover>.glass.sit{background:rgba(20,22,58,.55);border-color:rgba(255,255,255,.6)}
.wcard .acts .btn{height:44px}
.wcard .one{font-size:16px;color:var(--muted);max-width:60ch}
.wcard h3{font-size:clamp(26px,2.4vw,36px)}
@media (max-width:920px){.svc.grp{grid-template-columns:1fr}.grp .ph{min-height:260px}.grp .txt{padding:8px 10px 12px}}

.hero h1{max-width:none}
.hero .acts{align-items:center;gap:26px}
.hero .acts .btn{height:44px}
.hero .acts i,.wcard .acts i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hero .acts a:hover i{transform:translate(3px,-3px)}
.hero .more{font-weight:500;font-size:16px;text-decoration:none}

/* hero: proportions measured from the reference hero */
.nav .wrap{height:76px}
.links{gap:18px}
.hero{padding-top:96px}
.hero .top{grid-template-columns:65.1% 34.9%;gap:0;align-items:center}
.hero h1{font-size:clamp(38px,4.2vw,64px);line-height:1.1;font-weight:400;max-width:none}
.head h2,.h2,footer .ready h2{font-weight:400}
.hero .side p{font-size:16px;line-height:1.4;margin-bottom:22px;max-width:none;padding-right:8px}
.hero .side .row{gap:16px}
.trio{grid-template-columns:.93fr 1fr 1fr;gap:8px;margin-top:54px}
.trio>*{min-height:0;height:480px}
.trio .stat{padding:16px}
.trio .stat span{font-size:14px}
.trio .stat b{font:400 60px/1 var(--display);letter-spacing:-.04em;margin-top:18px}
.trio .stat p{font-size:16px;line-height:1.4;max-width:none}
.trio .glass{max-width:280px;padding:16px;font-size:16px;line-height:1.4}
.trio .glass b{font-size:14px;margin-bottom:18px}
.trio .glass .go{margin-top:20px;font-size:16px}
.trio .vid video{filter:contrast(1.08) saturate(1.12) brightness(.9)}
.grid{gap:8px}.tiles{gap:8px}
@media (max-width:920px){.hero{padding-top:56px}.hero .top{grid-template-columns:1fr;gap:28px}.trio{grid-template-columns:1fr 1fr}.trio>*{height:320px}.trio .stat{grid-column:1/-1;order:-1;height:240px}}
@media (max-width:560px){.trio{grid-template-columns:1fr}.trio>*{height:300px}.trio .stat{height:220px}}
/* training card: slimmer, with a clear gap from the service stack */
.wcard{margin-top:36px;grid-template-columns:minmax(200px,.26fr) 1fr}
.wcard .ph{min-height:190px}
.wcard .wtxt{padding:14px 24px 14px 8px}
.wcard .one{margin-bottom:16px}
@media (max-width:920px){.wcard{grid-template-columns:1fr}}

/* footer wordmark: Vyakaar and Engineers share one slot and trade places */
footer .word{font-size:clamp(40px,9.2vw,132px);overflow:hidden;padding:.08em 0}
footer .morph{display:inline-grid}
footer .morph .w{grid-area:1/1;white-space:nowrap}
footer .morph .w2{visibility:hidden}
footer .morph .w>div{will-change:transform,filter,opacity}
/* header: link size, weight and spacing as in the reference */
.links{gap:16px}
.links a{font-size:16px;font-weight:400;letter-spacing:-.01em}
.brand img{width:32px;height:32px}

.pstep .in p{max-width:52ch}
.pstep::before{background-size:150% auto}
.pstep::after{inset:0;background:linear-gradient(rgba(16,18,60,.38),rgba(16,18,60,0) 28%,rgba(16,18,60,0) 46%,rgba(16,18,60,.66))}

/* photos and clips supplied by the client side */
.pstep::before{background-size:cover}
.hasvid>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hasvid>.shade{position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(11,14,28,.28),rgba(11,14,28,.62))}
.hasvid>*:not(video):not(.shade){position:relative;z-index:1}
.result .rbody{display:flex;flex-direction:column;flex:1}
.result .rbody .btn{margin-top:auto}
.trio a.ph::after{content:"";position:absolute;inset:0;background:rgba(11,14,28,.22);z-index:-1}
.post::before{background-position:center}
/* stage tiles: labels must read on pale photos too */
.stage::after{inset:50% 0 0;background:linear-gradient(rgba(11,14,28,0),rgba(11,14,28,.62));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:linear-gradient(transparent,#000 75%)}
.stage span{background:rgba(11,14,28,.5);border-color:rgba(255,255,255,.45);font-size:14px;font-weight:500}
.stage:hover span{background:rgba(11,14,28,.7)}
.stage[aria-selected="true"] span{background:#fff;color:var(--ink);border-color:#fff}
/* footer spacing measured from the reference footer */
footer{padding:110px 0 40px}
footer .ready{margin-bottom:128px}
footer .ready small{font-size:14px;letter-spacing:.02em}
footer .ready h2{margin:26px 0 22px}
footer .ready p{font-size:16px;margin-bottom:22px}
footer .cols{font-size:16px;gap:0}
footer h4{font-size:14px;margin-bottom:22px}
footer .cols a{padding:8px 0;line-height:1.4}
footer .cols p{line-height:38.4px}
footer .word{margin:76px 0 76px;padding:0;font-size:clamp(40px,8.7vw,150px);letter-spacing:.02em;gap:.2em}
footer .word i{width:1.07em;height:1.07em}
footer .base{font-size:16px}
@media (max-width:920px){footer{padding-top:72px}footer .ready{margin-bottom:72px}footer .cols{gap:28px 0}footer .word{margin:48px 0}}

.grp .one{max-width:46ch}
/* process panels: slower, softer open */
.pstep{transition:flex-grow 1s cubic-bezier(.22,1,.36,1)}
.pstep::before,.pstep::after{transition:opacity .8s ease}
.pstep::before{transform:scale(1.06);transition:opacity .8s ease,transform 1.4s cubic-bezier(.22,1,.36,1)}
.pstep[aria-selected="true"]::before{transform:none}
.pstep .in{transition:opacity .25s ease,transform .25s ease}
.pstep[aria-selected="true"] .in{transition:opacity .7s ease .35s,transform .9s cubic-bezier(.22,1,.36,1) .35s}
.pstep .lb{transition:color .4s ease}
/* self-check result: as tall as the questions, with the clip showing through */
.check{align-items:stretch}
.result{position:relative;top:auto;min-height:420px}
.result>.shade{background:linear-gradient(rgba(11,14,28,.5),rgba(11,14,28,.1) 52%,rgba(11,14,28,.3))}
.result video{filter:brightness(1.08) saturate(1.1)}
@media (prefers-reduced-motion:reduce){.pstep,.pstep::before,.pstep::after,.pstep .in{transition:none}}

/* hero: video and founder stat merged into one wide card, third card unchanged */
.trio{grid-template-columns:1.93fr 1fr}
.trio .vid.duo{display:flex;align-items:flex-end;justify-content:flex-start;padding:24px!important}
.vid.duo .shade{position:absolute;inset:0;background:linear-gradient(rgba(11,14,28,.05),rgba(11,14,28,.1) 45%,rgba(11,14,28,.55))}
.vid.duo .glass{position:relative;max-width:320px;background:rgba(20,22,58,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vid.duo .stat-g strong{font-size:60px;font-weight:400;margin:6px 0 12px}
@media (max-width:920px){.trio{grid-template-columns:1fr}.trio>*{height:340px}}

/* brand red, used only where the page points at a problem */
:root{--red-text:#d42020}
.glass.sit b::before{background:var(--red)}
.where b.warn{color:var(--red-text);display:flex;align-items:center;gap:8px}
.where b.warn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.yn .chip[data-a="n"][aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
footer .ready small::before{background:var(--red)}
.letter .stamp{border-color:var(--red-text);color:var(--red-text)}
::selection{background:var(--red);color:#fff}
/* search fields: magnifier icon, and room for the full placeholder */
input[type="search"]{padding-left:42px;background-repeat:no-repeat;background-position:15px 50%;background-size:17px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596074' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E")}
.tools input{max-width:340px;width:340px}
@media (max-width:560px){.tools input{width:100%;max-width:none}}
/* header: the current page is marked, not greyed out */
.links a{position:relative;padding:6px 0;transition:color .2s}
.links a:hover{color:var(--blue)}
.links a.on{color:var(--ink);font-weight:600}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.links a.on::after,.links a:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.links a::after{transition:none}}

/* FAQ: plus turns into a cross, panel eases open and shut */
summary::after,details[open] summary::after{content:"+";transition:transform .4s cubic-bezier(.22,1,.36,1);transform-origin:50% 55%}
details[open]:not([data-closing]) summary::after{transform:rotate(45deg)}
details[data-closing] p{opacity:0;transition:opacity .2s}
summary{outline:none}
details:has(summary:focus-visible){box-shadow:0 0 0 2px var(--blue)}
@media (prefers-reduced-motion:reduce){summary::after{transition:none}}

/* founder page */
.fhero{display:grid;grid-template-columns:minmax(260px,.62fr) 1fr;gap:56px;align-items:center}
.fphoto{min-height:520px;background:var(--cta);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.fphoto span{font:400 96px/1 var(--display);letter-spacing:-.04em;color:#fff}
.fphoto small{font-size:13px;color:#aab4c0}
.fhero h1{max-width:none;font-size:clamp(34px,3.6vw,56px)}
.fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;border-top:1px solid var(--line)}
.fstats>div{padding:18px 18px 0 0}
.fstats>div+div{padding-left:18px;border-left:1px solid var(--line)}
.fstats small{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.fstats b{display:block;font:500 22px/1.2 var(--display);letter-spacing:-.03em}
.fstats span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
@media (max-width:920px){.fhero{grid-template-columns:1fr;gap:28px}.fphoto{min-height:320px}}
@media (max-width:560px){.fstats{grid-template-columns:1fr}.fstats>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:18px}}

/* ---- founder page, in the Ballast manner: warm paper, serif display, square edges, thin rules ---- */
body.bl-page{--bg:#f3f1ed;--line:#dcd8d0;--ink:#141414;--muted:#6f6b64;--deep:#8a1c1f;background:var(--bg)}
body.bl-page .nav{border-bottom:1px solid var(--line)}
body.bl-page footer{margin-top:0}
.bl{color:var(--ink);font-size:15px}
.bl h1,.bl h2,.bl h3,.bl h4,.bl-line{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:var(--ink)}
.bl small{font-size:12px;color:var(--muted)}
.bl p{color:var(--muted);line-height:1.5}
.bl p b{color:var(--ink);font-weight:400}
.bl-hero{position:relative;min-height:calc(100vh - 76px);min-height:max(640px,calc(100svh - 76px));display:flex;align-items:stretch;overflow:clip}
.bl-hero .wrap{position:relative;width:100%;display:flex;flex-direction:column;padding-top:clamp(70px,12vh,150px);padding-bottom:28px}
.bl-photo{position:absolute;top:0;bottom:44px;right:0;left:64%;background:linear-gradient(#dedbd5,#c9c5bd);display:flex;align-items:flex-end;justify-content:center;padding:20px}
.bl-photo span{font-size:12px;color:#6f6b64}
.bl-hero h1{font-size:clamp(64px,12.6vw,214px);line-height:.82;letter-spacing:-.04em;white-space:nowrap;position:relative}
.bl-under{display:grid;grid-template-columns:minmax(220px,300px) minmax(280px,400px);gap:clamp(40px,8vw,150px);margin-top:auto;padding-top:48px;max-width:62%}
.bl-intro p{color:var(--ink);font-size:16px;line-height:1.45;margin-bottom:26px}
.bl-btn{display:inline-block;background:var(--deep);color:#fff;text-decoration:none;font-size:13.5px;padding:14px 22px;transition:background .25s}
.bl-btn:hover{background:var(--ink)}
.bl-dot{display:block;margin-top:16px}
.bl-dot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--deep);margin-right:9px}
.bl-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:0;align-content:start}
.bl-stats div{border-bottom:1px solid var(--line);padding:9px 0 11px}
.bl-stats dt{font-size:11px;color:var(--muted);margin-bottom:5px}
.bl-stats dd{margin:0;font-size:13.5px}
.bl-cap{position:absolute;left:calc(64vw);bottom:14px;white-space:nowrap}
.bl-sec{padding:clamp(80px,11vw,170px) 0 0}
.bl-label{display:block;margin-bottom:clamp(28px,4vw,56px)}
.bl-list{display:grid;grid-template-columns:1.9fr 1fr;gap:48px;align-items:start}
.bl-lines{display:grid}
.bl-line{all:unset;cursor:pointer;font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:clamp(40px,5vw,76px);line-height:1.12;letter-spacing:-.025em;color:#aaa69e;transition:color .35s}
.bl-line[aria-selected="true"],.bl-line:hover{color:var(--ink)}
.bl-line:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.bl-side{padding-top:14px;max-width:340px}
.bl-side p{font-size:14px;margin-bottom:14px}
.bl-side p+p{color:var(--ink)}
.bl-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,7vw,120px);align-items:start}
.bl-cols>div{display:grid;gap:10px;max-width:290px}
.bl-cols>div:nth-child(2){margin-top:0}
.bl-cols h3{font-size:clamp(30px,2.9vw,44px);line-height:1.05;letter-spacing:-.025em}
.bl-cols p{font-size:14px}
.bl-img{background-size:cover;background-position:center;aspect-ratio:4/3;margin:18px 0 26px}
.bl-img.tall{aspect-ratio:3/4}
.bl-cols>div>.bl-img:first-child{margin-top:0}
.bl-prog{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,8vw,140px);align-items:end}
.bl h2{font-size:clamp(48px,6.3vw,96px);line-height:.95;letter-spacing:-.025em}
.bl-prog p{max-width:44ch;margin:26px 0 28px}
.bl-rows>div{padding:0 0 18px}
.bl-rows h4{font-size:24px;letter-spacing:-.01em;line-height:1.2}
.bl-rows p{font-size:13px;margin-top:4px}
.bl-about{display:grid;grid-template-columns:48% 1fr;margin-top:clamp(80px,11vw,170px);align-items:center}
.bl-about .bl-img{margin:0;aspect-ratio:auto;min-height:min(86vh,760px);filter:grayscale(1)}
.bl-about-t{padding:60px clamp(24px,8vw,120px);max-width:640px}
.bl-about h2{font-size:clamp(36px,3.8vw,58px);line-height:1.04}
.bl-about p{margin-top:22px;font-size:14.5px}
.bl-about h2+p{margin-top:clamp(40px,7vw,110px)}
.bl-link{display:inline-block;margin-top:28px;color:var(--ink);font-size:14px;text-underline-offset:5px}
.bl-dark{background:#141414;color:#fff;margin-top:clamp(80px,11vw,170px);padding:clamp(80px,10vw,150px) 0 clamp(70px,8vw,120px);border-bottom:1px solid #2a2a2a}
.bl-dark h2,.bl-dark h4{color:#fff}
.bl-dark p{color:#8f8b84}.bl-dark p b{color:#fff}
.bl-dark-top{display:grid;grid-template-columns:1.9fr 1fr;gap:48px;align-items:center}
.bl-dark-top p{font-size:14px;max-width:320px}
.bl-time{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(60px,8vw,110px);border-top:1px solid #3a3a3a}
.bl-time>div{position:relative;padding:26px 24px 0 0}
.bl-time>div::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;border:1px solid #8f8b84;background:#141414}
.bl-time>div:first-child::before{background:#fff;border-color:#fff}
.bl-time small{color:#8f8b84}
.bl-time h4{font-size:22px;letter-spacing:-.01em;margin:10px 0 6px}
.bl-time p{font-size:13px}
@media (max-width:920px){
  .bl-hero{min-height:0;display:block}
  .bl-photo{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:360px;margin-top:36px}
  .bl-hero h1{white-space:normal}
  .bl-under{max-width:none;grid-template-columns:1fr;gap:28px}
  .bl-cap{position:static;display:block;margin-top:18px}
  .bl-list,.bl-prog,.bl-about,.bl-dark-top{grid-template-columns:1fr}
  .bl-cols{grid-template-columns:1fr}.bl-cols>div{max-width:none}
  .bl-about .bl-img{min-height:320px}
  .bl-time{grid-template-columns:1fr 1fr;row-gap:44px}
  .bl-time>div:nth-child(n+3){border-top:1px solid #3a3a3a}
}

/* founder portrait: title stops at the photo's empty edge, clear of the face */
.bl-photo{background-size:cover;background-position:50% 22%}
.bl-hero h1{font-size:clamp(60px,10.6vw,186px)}

/* about page (site style) */
.ph.duo{display:flex;align-items:flex-end;padding:24px}
.ph.duo .shade{position:absolute;inset:0;background:linear-gradient(rgba(11,14,28,.05),rgba(11,14,28,.1) 45%,rgba(11,14,28,.55))}
.ph.duo .glass{position:relative;max-width:360px;background:rgba(20,22,58,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ph.duo .stat-g strong{font:400 30px/1.15 var(--display);letter-spacing:-.03em;margin:6px 0 12px}
.trio .stat b{font-size:clamp(40px,4vw,60px)}
.sides .card.dark{background:var(--cta);color:#fff;text-decoration:none}
.sides .card.dark h3{color:#fff}.sides .card.dark p{color:#aab4c0}
.sides .card.dark .m{color:#fff;border-top-color:#2a2e45}
.sides .card.dark .num{color:var(--ink)}
.sides .m b{font-weight:500}

/* founder portrait: never taller than a portrait crop, so the face is not cut on narrow or tall windows */
.bl-hero{min-height:clamp(600px,calc(100svh - 76px),860px)}
.bl-photo{bottom:auto;height:min(calc(100% - 44px),calc(36vw * 1.42));background-position:50% 12%;padding:0;overflow:visible}
.bl-photo small{position:absolute;top:100%;left:0;margin-top:10px;white-space:nowrap}
@media (max-width:920px){.bl-photo{height:auto;aspect-ratio:4/5;max-height:520px;width:100%;margin:28px 0 40px}}

/* ---- phones: shorter page. Rows of cards become one swipe row, secondary text and images drop out ---- */
@media (max-width:640px){
  section.band{padding-top:56px}
  section.band.last{padding-bottom:56px}
  .head{margin-bottom:26px}
  .head p{display:none}
  .m-hide,.marq,.bars,.trio a.ph,.case .two,.case .r>.ph,.glass.sit,.grp .lbl,.tile p,.wcard .ph,.wcard .more,.sides .card>p:not(.m),.quad .card .note,.pagehead p+p{display:none}
  .stack:not(#svc-list),.sides,.quad,.grid.g3:has(.post),.grid.g4:has(.post),.steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -24px;padding:0 24px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stack:not(#svc-list)::-webkit-scrollbar,.sides::-webkit-scrollbar,.quad::-webkit-scrollbar,.grid::-webkit-scrollbar{display:none}
  .stack:not(#svc-list)>*,.sides>*,.quad>*,.grid.g3:has(.post)>*,.grid.g4:has(.post)>*,.steps>*{flex:0 0 84%;scroll-snap-align:center}
  .svc.grp{padding:8px;gap:0}
  .grp .ph{min-height:150px;padding:0}
  .grp .txt{padding:14px 8px 8px}
  .grp h3{font-size:26px}.grp .sp{min-height:16px}
  .grp .chips{flex-wrap:nowrap;overflow:hidden;margin-bottom:16px}
  .grp .chip{white-space:nowrap}
  .sides .card{min-height:0}
  .quad .card{min-height:200px}.quad .ph{min-height:200px}
  .post{height:260px}
  .trio>*{height:260px}
  .tile{min-height:132px;padding:16px}
  .tile b{font-size:26px}.tile h3{font-size:15px}
  .wcard{margin-top:16px}.wcard .wtxt{padding:14px}
  .pstep[aria-selected="true"]{min-height:230px}
  .stage{height:200px;flex-basis:160px}
  .case .l{gap:12px}.case h3{margin-top:8px;font-size:24px}
  .why{gap:20px}.why .big{font-size:44px}
  .sides{margin-top:26px}
  footer{margin-top:64px;padding-top:64px}
  footer .ready{margin-bottom:56px}
  footer .ready h2{font-size:30px}
  footer .word{margin:36px 0}
  /* founder page */
  .bl-sec{padding-top:64px}
  .bl-cols .bl-img,.bl-stats,.bl-about p+p{display:none}
  .bl-cols{gap:26px}
  .bl-line{font-size:34px}
  .bl h2{font-size:40px}
  .bl-about,.bl-dark{margin-top:64px}
  .bl-about .bl-img{min-height:240px}
  .bl-about-t{padding:28px 24px}
  .bl-about h2+p{margin-top:20px}
  .bl-dark{padding:64px 0}
  .bl-time{margin-top:40px;row-gap:32px}
  .bl-photo{max-height:380px;margin:16px 0 36px}
}

/* phones: no frosted-glass blur (it smears on mobile browsers), and cards never wider than their slot */
@media (max-width:640px){
  .glass,.glass.sit,.ph.duo .glass,.vid.duo .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,16,40,.72);border-color:rgba(255,255,255,.22)}
  .stage::after{backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;-webkit-mask-image:none;inset:45% 0 0;background:linear-gradient(rgba(11,14,28,0),rgba(11,14,28,.7))}
  .stage span{background:rgba(11,14,28,.78);border-color:rgba(255,255,255,.3)}
  .stages{mask-image:none;-webkit-mask-image:none}
  .ticker{mask-image:none;-webkit-mask-image:none}
  .post:hover::before{filter:none;transform:none}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .stack:not(#svc-list)>*,.sides>*,.quad>*,.steps>*{min-width:0}
  .svc.grp{grid-template-columns:minmax(0,1fr)}
  .grp .txt{min-width:0}
  .grp .chips{flex-wrap:wrap;overflow:visible;gap:6px}
  .grp .chip,.chip{white-space:normal;font-size:13px;padding:6px 11px}
  .grp .one{max-width:none;font-size:15px}
  .btn{white-space:nowrap}
  .grp .btn.wide{white-space:normal;height:auto;min-height:44px;padding:10px 16px;text-align:center}
}