:root{
  --art-hero:url("../assets/images/design/hero-student-writing.svg");
  --art-brain:url("../assets/images/design/pen-wires-brain.svg");
  --art-loop:url("../assets/images/design/checking-loop.svg");
  --art-school:url("../assets/images/design/school-panel.svg");
  --art-coaching:url("../assets/images/design/coaching-panel.svg");
  --art-university:url("../assets/images/design/university-panel.svg");
  --art-steps:url("../assets/images/design/how-it-works-steps.svg");
  --art-teacher-ai:url("../assets/images/design/teacher-ai.svg");
  --art-map:url("../assets/images/design/rajasthan-map.svg");
  --u:calc(min(100vw, 1920px) / 1920);
  --cu:var(--u);
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --night:#1F2156;
  --hi:#FAF40B;
  --sun:#F2D205;
  --orange:#F27805;
  --head:"Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sans:"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
  box-sizing:border-box;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
a,button{touch-action:manipulation}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:1rem;top:-100px;z-index:200;background:var(--hi);color:var(--ink);padding:.8rem 1.1rem;border-radius:10px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:calc(1rem + env(safe-area-inset-top,0px))}
main:focus{outline:none}

/* ---------- art crops: one SVG per frame, cropped with background maths ---------- */
.frame > .art{margin-bottom:-1px;max-width:calc(var(--W) * 1px);margin-inline:auto}
.art{
  --cx:0;--cy:0;--cw:var(--W);--ch:var(--H);
  display:block;width:100%;
  aspect-ratio:var(--cw)/var(--ch);
  background-image:var(--img);background-repeat:no-repeat;
  background-size:calc(var(--W) / var(--cw) * 100%) auto;
  background-position:calc(var(--cx) / max(1, var(--W) - var(--cw)) * 100%) calc(var(--cy) / max(1, var(--H) - var(--ch)) * 100%);
}

/* ---------- framed sections: text is placed on the illustration in design pixels ---------- */
section{container-type:inline-size;position:relative}
.frame{--W:1920;--H:1080}
.t{position:absolute;left:calc(50% + (var(--x) - var(--W) / 2) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u))}

/* type scale, set in 1920-wide design pixels so it scales with the artwork */
.display{font-family:var(--head);font-weight:800;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.xl{font-size:calc(132 * var(--cu))}
.l{font-size:calc(96 * var(--cu))}
.m{font-size:calc(70 * var(--cu));line-height:1.06}
.s{font-size:calc(48 * var(--cu));line-height:1.08}
.lead{font-size:max(16px, calc(30 * var(--cu)));line-height:1.35;font-weight:420;text-wrap:pretty}
.body{font-size:max(15px, calc(24 * var(--cu)));line-height:1.45;font-weight:420;text-wrap:pretty}
.note{font-weight:600;font-size:max(15px, calc(24 * var(--cu)));line-height:1.3}

/* ---------- 1. hero ---------- */
.hero{--img:var(--art-hero);background:var(--night);color:#fff}
.site-head{position:absolute;inset:0 0 auto;z-index:20;color:#fff}
.nav{max-width:1920px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding:calc(36 * var(--u)) calc(72 * var(--u))}
.nav-toggle{display:none}
.nav-menu{display:contents}
.brand{font-family:var(--head);font-weight:800;font-size:max(20px, calc(32 * var(--u)));letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.4em}
.brand i{display:inline-block;width:.9em;height:.9em;border-radius:.18em;background:var(--hi);transform:rotate(-8deg);box-shadow:.14em .14em 0 #8F92FF}
.nav ul{display:flex;gap:calc(40 * var(--u));align-items:center;font-size:max(15px, calc(22 * var(--u)));font-weight:520}
.nav a{text-decoration:none}
.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:.25em}
.btn{display:inline-block;background:var(--hi);color:var(--ink);padding:.6em 1.05em .65em;border-radius:999px;font-weight:650;text-decoration:none;transition:transform .15s}
.btn:hover{transform:rotate(-2deg) scale(1.03)}
.hero h1{text-align:center;color:#fff}
.hero .lead{text-align:center;color:#D8DAFF;margin:0 auto}
.hero .note{color:#D8DAFF;font-weight:450;text-align:center;margin-top:calc(30 * var(--u))}
.hero .note strong{color:#fff;font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .lead{animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
  .hero .note{animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(.25em)}}

/* ---------- 2. why handwriting ---------- */
.why{--img:var(--art-brain);background:#fff}
.why h2{text-align:center}
.why .sides{display:contents}
.why .side h3{font-family:var(--head);font-weight:800;font-size:calc(44 * var(--u));letter-spacing:-.02em;line-height:1}
.why .side .note{margin-top:.35em;color:#3a3a3a;font-weight:500}
.why .side.r{text-align:right}
.why .mid{text-align:center}
.research{--cu:calc(.9 * var(--u));background:#fff;padding:calc(130 * var(--u)) calc(96 * var(--u)) calc(140 * var(--u));border-top:1px solid #EDEDF3}
.research h2{text-align:center;margin-bottom:calc(80 * var(--cu))}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(48 * var(--cu));max-width:1700px;margin:0 auto;padding:0;list-style:none}
.fact{background:#fff;border:1.5px solid #E7E7EF;border-radius:28px;padding:2.4rem 2rem 2.2rem;box-shadow:8px 9px 0 #FAF40B;text-align:center}
.fact b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(2.2rem,3.6vw,4.4rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:.35em;color:var(--ink)}
.fact .body{max-width:20em;margin:0 auto;color:#444}

/* ---------- 3. the checking loop ---------- */
.loop{--W:1920;--H:2112;--img:var(--art-loop);background:#fff}
.loop .split{color:#fff}
.loop .split.r{text-align:right}
.loop .a .s{margin-bottom:.4em}
.loop .a .body{color:#3b3b3b}
.loop .b .note{margin-bottom:.5em;color:#5254EB}
.loop .b .body{margin-top:.6em;max-width:22em;color:#3b3b3b}
.loop .art.m2{display:none}

/* ---------- 4–6. horizontal: where it works ---------- */
.hs{height:300vh;height:300svh;--a-fg:#fff}
.hs[data-active="0"]{--a-fg:var(--ink)}
.hs[data-active="0"] .tabs button[aria-current="true"]{color:#FECE42}
.hs-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hs-head{position:absolute;inset:0 0 auto;z-index:2;max-width:1920px;margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding:calc(64 * var(--u)) calc(96 * var(--u)) 0;color:var(--a-fg);transition:color .4s}
.hs-head h2{font-size:calc(60 * var(--u));max-width:9em}
.tabs{display:flex;gap:.4rem;font-size:max(14px, calc(20 * var(--u)));font-weight:600}
.tabs button{font:inherit;color:inherit;background:none;border:2px solid currentColor;border-radius:999px;padding:.45em 1em;cursor:pointer;opacity:.6;transition:opacity .2s,background .2s,color .2s}
.tabs button[aria-current="true"]{opacity:1;background:var(--a-fg);color:var(--tab-on,#5254EB)}
.hs[data-active="1"]{--tab-on:#0393FF}
.hs[data-active="2"]{--tab-on:#3E9A2B}
.track{display:flex;height:100%;will-change:transform}
.panel{flex:0 0 100vw;height:100%;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:calc(80 * var(--u));padding:calc(200 * var(--u)) calc(140 * var(--u)) calc(60 * var(--u)) calc(110 * var(--u))}
.box{container-type:size;width:100%;height:100%;display:grid;place-items:center;min-height:0}
.panel .art{width:min(100cqw, calc(100cqh * var(--cw) / var(--ch)))}
.p4{background:#FECE42}.p5{background:#0393FF}.p6{background:#5CC140}
.card{max-width:620px;width:100%;filter:drop-shadow(.6rem .6rem 0 rgba(26,26,26,.18))}
.card header{background:var(--ink);color:#fff;border-radius:10px 10px 0 0;display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem .85rem 1.4rem;font-weight:650;font-size:clamp(15px,1.25vw,22px)}
.card header svg{width:2.1em;height:2.1em;background:#fff;border-radius:6px;padding:.38em;color:var(--ink)}
.card .in{background:#fff;border-radius:0 0 14px 14px;padding:clamp(1.3rem,2.6vw,2.6rem) clamp(1.3rem,2.4vw,2.4rem)}
.card h3{font-family:var(--head);font-size:clamp(2.3rem,4.4vw,5rem);font-weight:800;letter-spacing:-.02em;line-height:1}
.card .sub{font-family:var(--head);font-size:clamp(1.15rem,1.65vw,1.9rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-top:.7em}
.card .txt{font-size:clamp(.95rem,1.05vw,1.2rem);line-height:1.5;color:#444;margin-top:.7em;max-width:30em}
.card .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2em}
.card .tags li{border:1.5px solid var(--ink);border-radius:999px;padding:.25em .8em;font-size:clamp(.85rem,.95vw,1.05rem);font-weight:560}

/* ---------- 7. how it works ---------- */
.how{--W:1920;--H:948;--img:var(--art-steps);--cu:calc(.9 * var(--u));background:#fff;padding:calc(130 * var(--u)) calc(96 * var(--u)) calc(110 * var(--u));text-align:center}
.how h2{margin-bottom:calc(20 * var(--cu))}
.how > .body{color:#555;margin-bottom:calc(64 * var(--cu))}
.steps{padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(30 * var(--cu));max-width:1700px;margin:0 auto;counter-reset:s}
.step{container-type:inline-size;position:relative;text-align:left}
.step-photo-wrap,.step-icon{display:none}
.step .art{--cy:90;--cw:534;--ch:815}
.step:nth-child(1) .art{--cx:127}.step:nth-child(2) .art{--cx:692}.step:nth-child(3) .art{--cx:1258}
.step .k{position:absolute;left:7.5%;top:7%;transform:translateY(-50%);color:#fff;font-weight:650;font-size:4.4cqw}
.step .tx{position:absolute;left:7.5%;top:16.4%;width:85%}
.step h3{font-size:10.6cqw}
.step p{width:85%;margin-top:.9em;font-size:max(15px,4.2cqw);line-height:1.4;font-weight:470}

/* ---------- 8. you teach, it checks ---------- */
.split8{--img:var(--art-teacher-ai);background:#1B5C4A;color:#fff}
.split8 .lead{color:#CFEBDD;margin-top:.7em;max-width:17em}
.split8 .note{color:#CFEBDD;font-weight:500}
.feat li{display:grid;grid-template-columns:1.35em 1fr;gap:.55em;align-items:start;font-size:max(16px,calc(30 * var(--u)));font-weight:560;line-height:1.2;padding:.42em 0;border-bottom:1.5px solid rgba(255,255,255,.18)}
.feat li:last-child{border:0}
.feat svg{width:1.3em;height:1.1em;color:var(--hi);margin-top:-.05em}
.split8 .r .note{margin-bottom:.35em}

/* ---------- 9. press ---------- */
.press{--cu:calc(.9 * var(--u));background:var(--sun);padding:calc(120 * var(--u)) calc(96 * var(--u)) calc(130 * var(--u))}
.press h2{text-align:center;margin-bottom:calc(80 * var(--cu))}
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(48 * var(--cu));max-width:1700px;margin:0 auto}
.article{background:#fff;border-radius:28px;padding:2.2rem 1.8rem 2rem;box-shadow:8px 9px 0 #D9B800;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.press-logo{display:block;height:clamp(56px,6vw,104px);width:auto;max-width:100%}
.article p{font-size:clamp(1.05rem,1.35vw,1.55rem);font-weight:640;line-height:1.25;letter-spacing:-.01em;max-width:17em;text-wrap:balance}
.awards{max-width:1700px;margin:calc(110 * var(--cu)) auto 0;position:relative;background:#fff;border-radius:28px;box-shadow:8px 9px 0 #D9B800;padding:3rem 2rem 2.4rem}
.awards h3{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);background:#fff;border-radius:16px;padding:.3em .9em;font-family:var(--head);font-weight:800;font-size:clamp(1.1rem,1.6vw,1.9rem);letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.awards ul{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:2rem 3rem}
.award-logo{display:block;height:clamp(54px,5.4vw,100px);width:auto;max-width:100%}

/* ---------- 10. scale ---------- */
.scale{--W:1620;--H:540;--img:var(--art-map);background:var(--orange);color:#fff;padding:calc(110 * var(--u)) 0 calc(120 * var(--u))}
.scale h2{max-width:1920px;margin-inline:auto;padding:0 calc(200 * var(--u));font-size:calc(100 * var(--u))}
.scale .art{width:84.4%;max-width:1620px;margin:calc(40 * var(--u)) auto 0}
.stats{max-width:1920px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(60 * var(--u));padding:0 calc(150 * var(--u));margin-top:calc(50 * var(--u));text-align:center}
.stat .note{display:inline-block;background:#fff;color:var(--ink);border-radius:999px;padding:.3em 1em;position:relative;z-index:1;margin-bottom:-.6em;font-size:max(14px,calc(22 * var(--u)));font-weight:650;box-shadow:0 0 0 4px var(--orange)}
.stat b{display:block;background:#fff;color:#1F3A8F;border-radius:999px;font-family:var(--head);font-weight:800;font-size:calc(84 * var(--u));letter-spacing:-.02em;line-height:1;padding:.4em .3em .38em}
.stat .body{margin:1em auto 0;max-width:20em;font-weight:560}

/* ---------- FAQ ---------- */
.faq{--cu:calc(.9 * var(--u));background:#fff;padding:calc(140 * var(--u)) calc(96 * var(--u)) calc(150 * var(--u))}
.faq h2{text-align:center;margin-bottom:calc(70 * var(--cu))}
.qa-list{max-width:980px;margin:0 auto;border-top:1.5px solid #E4E4EC}
.qa{border-bottom:1.5px solid #E4E4EC}
.qa h3{font:inherit;margin:0}
.qa button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:1.4rem;padding:1.6rem .4rem;cursor:pointer;font-family:var(--head);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.5rem);letter-spacing:-.01em;color:var(--ink)}
.qa button span{flex:1}
.qa button:focus-visible{outline:3px solid #5254EB;outline-offset:2px;border-radius:8px}
.qa i{order:-1;position:relative;flex:0 0 1.5rem;height:1.5rem;border-radius:50%}
.qa i::before,.qa i::after{content:"";position:absolute;left:50%;top:50%;width:1.15rem;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.qa i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa button[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa button:hover span{color:#5254EB}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.ans > div{overflow:hidden}
.ans p{padding:0 .4rem 1.7rem 3.3rem;max-width:44em;font-size:clamp(1rem,1.05vw,1.15rem);line-height:1.6;color:#4a4a4a;opacity:0;transition:opacity .3s}
.qa.open .ans{grid-template-rows:1fr}
.qa.open .ans p{opacity:1;transition-delay:.08s}

/* ---------- CTA ---------- */
.cta{background:#5254EB;overflow:hidden;padding:calc(170 * var(--u)) calc(96 * var(--u));display:grid;place-items:center}
.cta .wave{position:absolute;inset:0;width:100%;height:100%}
.cta-card{position:relative;background:#fff;border-radius:28px;max-width:760px;width:100%;text-align:center;padding:clamp(2.2rem,4vw,3.6rem) clamp(1.5rem,4vw,3.6rem);box-shadow:10px 11px 0 #1F2156;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cta-card:hover{transform:scale(1.015)}
.cta-card h2{font-size:clamp(1.9rem,3.2vw,3.2rem);color:var(--ink)}
.cta-card p{margin:1em auto 0;max-width:28em;font-size:clamp(1rem,1.2vw,1.25rem);line-height:1.55;color:#4a4a4a}
.cta-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.cbtn{display:inline-block;border-radius:999px;padding:.95em 1.6em;font-weight:650;font-size:clamp(1rem,1.1vw,1.15rem);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .25s}
.cbtn.primary{background:#5254EB;color:#fff}
.cbtn.ghost{background:#fff;color:#5254EB;box-shadow:inset 0 0 0 2px #5254EB}
.cbtn:hover{transform:scale(1.07)}
.cbtn.primary:hover{box-shadow:0 10px 24px -8px rgba(82,84,235,.6)}
.cbtn.ghost:hover{background:#F0F0FF}
.cbtn:focus-visible{outline:3px solid #1F2156;outline-offset:3px}

/* ---------- footer ---------- */
.foot{background:#fff;color:var(--ink);padding:clamp(3.5rem,6vw,6rem) clamp(1.5rem,5vw,6rem) 2rem}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:2.5rem;max-width:1500px;margin:0 auto}
.foot .brand{color:var(--ink);font-size:1.4rem}
.foot .brand i{box-shadow:.14em .14em 0 #5254EB}
.foot h4{font-family:var(--head);font-weight:700;font-size:1.05rem;margin:0 0 1rem;letter-spacing:-.005em}
.fcol p,.fcol address,.fcol li{font-size:.95rem;line-height:1.6;font-style:normal;color:#3d3d3d;overflow-wrap:anywhere}
.fcol p + h4,.fcol address + p + h4,.fcol .muted + h4{margin-top:1.8rem}
.fcol ul{display:grid;gap:.55rem}
.fcol a{text-decoration:none}
.fcol a:hover{text-decoration:underline;text-underline-offset:.2em}
.fcol .muted{color:#777;margin-top:.4rem}
.fcol address{margin-bottom:.6rem}
.social{display:flex;gap:1rem}
.social a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid #DADAE3;color:var(--ink);transition:transform .3s,border-color .3s}
.social a:hover{transform:scale(1.1);border-color:var(--ink);text-decoration:none}
.social svg{width:1.05rem;height:1.05rem}
.foot-base{max-width:1500px;margin:3.5rem auto 0;padding-top:1.4rem;border-top:1.5px solid #E4E4EC;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.88rem;color:#666}
.foot-base a{color:inherit}


/* ---------- wide-screen background bleed ---------- */
@media (min-width:901px){
  .why{background:#FAF40B}
  .loop{background:linear-gradient(#1A134A 0 calc(515 * var(--u)), #fff calc(515 * var(--u)))}
}

/* ================= narrow screens: text leaves the canvas and stacks ================= */
@media (max-width:900px){
  .t{position:static;width:auto}
  .frame{display:flex;flex-direction:column}
  .xl{font-size:clamp(2.8rem,13vw,4.4rem)}
  .l{font-size:clamp(2.3rem,10vw,3.4rem)}
  .m{font-size:clamp(2rem,8.6vw,2.8rem)}
  .s{font-size:1.6rem}
  .lead{font-size:1.1rem}.body{font-size:1rem}.note{font-size:1rem}

  html{scroll-padding-top:calc(var(--head-h, 76px) + 12px)}
  .site-head{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);background:var(--night);box-shadow:0 1px 0 rgba(255,255,255,.08);color:#fff}
  .nav{position:relative;z-index:2;padding:1rem 1.25rem}
  .brand{position:relative;z-index:2;min-height:44px}
  .nav-toggle{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
  .nav-toggle:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
  .nav-toggle-icon{position:relative;display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:background .2s}
  .nav-toggle-icon::before,.nav-toggle-icon::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s}
  .nav-toggle-icon::before{top:-6px}
  .nav-toggle-icon::after{top:6px}
  .site-head.menu-open .nav-toggle-icon{background:transparent}
  .site-head.menu-open .nav-toggle-icon::before{transform:translateY(6px) rotate(45deg)}
  .site-head.menu-open .nav-toggle-icon::after{transform:translateY(-6px) rotate(-45deg)}
  .nav-menu{position:fixed;inset:0;z-index:1;display:none;background:var(--night);padding:calc(76px + env(safe-area-inset-top,0px)) 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));overflow-y:auto;overflow-x:hidden}
  .site-head.menu-open .nav-menu{display:block;animation:menu-in .25s both}
  @keyframes menu-in{from{opacity:0;transform:translateY(-.5rem)}}
  body.menu-open{overflow:hidden}
  .nav-menu ul{display:flex;flex-direction:column;align-items:stretch;gap:.15rem;font-size:1.15rem;font-weight:600}
  .nav-menu li{display:block}
  .nav-menu a:not(.btn){display:flex;align-items:center;min-height:52px;padding:.4rem .2rem;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none}
  .nav-menu .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:1.25rem;font-size:1.05rem;padding:.85em 1.2em}

  .hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(740px,calc(100svh - var(--head-h,76px)),840px)}
  .hero .t{position:relative;left:auto;top:auto;z-index:1;padding:2rem 1.5rem 0}
  .hero .art{position:absolute;inset:0;order:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;background-size:cover;background-position:center top}
  .hero .note{margin-top:1.2rem}

  .why{--art-brain:url("../assets/images/design/pen-wires-brain-mobile.svg");background:#FAF20B}
  .why h2{order:-2;padding:3.5rem 1.5rem 2rem}
  .why>.art{position:absolute;order:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
  .why .sides{display:flex;flex-direction:column;gap:12px;padding:0;background:#fff;order:0}
  .why .side,.why .side.r{position:relative;left:auto;top:auto;display:flex;flex-direction:column;min-width:0;padding:0 0 1.3rem;background:#FAF20B;text-align:left}
  .why .side{--cx:16;--cw:929;--cy:165;--ch:748}
  .why .side.r{--cx:1041;--cw:862;--cy:191;--ch:694}
  .why .side::before{content:"";display:block;width:100%;aspect-ratio:var(--cw) / var(--ch);background-image:var(--art-brain);background-repeat:no-repeat;background-size:calc(1920 / var(--cw) * 100%) auto;background-position:calc(var(--cx) / (1920 - var(--cw)) * 100%) calc(var(--cy) / (1080 - var(--ch)) * 100%);margin-bottom:.9rem}
  .why .side h3,.why .side .note{overflow-wrap:anywhere}
  .why .side h3{font-size:1.5rem;padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.5rem,env(safe-area-inset-right,0px))}
  .why .side .note{font-size:1rem;padding-left:max(1.5rem,env(safe-area-inset-left,0px));padding-right:max(1.5rem,env(safe-area-inset-right,0px));margin-top:.35em}
  .why .mid{order:3;background:#fff;padding:2rem 1.5rem 2.5rem;text-align:center}
  .research{padding:3.5rem 1.25rem 4rem}
  .research h2{margin-bottom:2rem}
  .facts{grid-template-columns:1fr;gap:1.4rem}
  .fact{padding:1.8rem 1.5rem}
  .fact b{font-size:2.4rem}

  .loop .split{position:static;background:#1A134A;padding:2.6rem 1.5rem 0;text-align:left}
  .loop .split.r{text-align:left;padding-top:0}
  .loop .split.lf{padding-bottom:0}
  .loop .art.m1{--cx:380;--cw:1160;--ch:1100}
  .loop .art.m1{background-color:#fff}
  .loop .art.m1{order:2}
  .loop .split{order:0}.loop .split.r{order:1}
  .loop .split.r{padding-bottom:1.6rem}
  .loop .a{order:3;padding:2.5rem 1.5rem 1.5rem}
  .loop .art.m2{display:block;order:4;--cx:330;--cy:1100;--cw:1000;--ch:840}
  .loop .b{order:5;padding:1.5rem 1.5rem 3.5rem}
  .loop .split.r br{display:none}

  .hs{height:auto;background:#fff;padding:3.5rem 0 4rem}
  .hs-sticky{position:static;height:auto;overflow:visible}
  .hs-head{position:static;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:none;padding:0 1.25rem;color:var(--ink);transition:none}
  .hs-head h2{font-size:clamp(1.9rem,8vw,2.6rem);max-width:12em}
  .tabs{flex-wrap:wrap;gap:.5rem;font-size:1rem}
  .tabs button{min-height:44px;padding:.6em 1.05em;font-weight:650;opacity:1;border-color:var(--ink);color:var(--ink)}
  .hs[data-active] .tabs button[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .track{display:grid;grid-template-columns:minmax(0,1fr);height:auto;transform:none!important;gap:1.25rem;padding:1.75rem 1.25rem 0;will-change:auto}
  .panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:0;height:auto;min-height:0;padding:0;border-radius:28px;overflow:hidden;box-shadow:0 16px 32px -24px rgba(26,26,26,.45);align-items:stretch}
  .box{container-type:inline-size;width:100%;height:auto;display:block;min-height:0;padding:1.25rem 1.25rem 0}
  .panel .art{width:100%;height:auto}
  .card{max-width:none;width:100%;filter:none;padding:1.1rem 1.25rem 1.4rem}
  .card header{font-size:15px;padding:.6rem .7rem .6rem 1rem}
  .card .in{padding:1.1rem 1.2rem 1.3rem}
  .card h3{font-size:clamp(2rem,8vw,2.6rem)}
  .card .sub{font-size:1.1rem;margin-top:.5em}
  .card .txt{font-size:1rem}
  .panel,.box,.card,.fact,.stat,.article,.cta-card,.step,.cta-btns,.cbtn{min-width:0}
  .cbtn{max-width:100%}
  .card h3,.card .txt,.fact .body,.stat .body,.article p,.cta-card h2,.cta-card p{overflow-wrap:anywhere}

  .how{padding:4rem 1.25rem}
  .how > .body{margin-bottom:2rem}
  .steps{grid-template-columns:minmax(0,1fr);max-width:520px;gap:1.25rem}

  .split8 .t{padding:0 1.5rem}
  .split8 .l-col{padding-top:3.5rem}
  .split8 .art{order:3;--cy:470;--ch:610;--cx:160;--cw:1640}
  .split8 .r{order:2;padding-top:2rem;padding-bottom:1rem}

  .press{padding:4rem 1.25rem}
  .press h2{margin-bottom:2rem}
  .articles{grid-template-columns:1fr;gap:1.4rem}
  .awards{margin-top:3.5rem;padding:2.6rem 1rem 1.6rem}
  .awards ul{gap:1.6rem 2rem}
  .awards h3{white-space:normal;max-width:80%;text-align:center}
  .award-logo{height:48px}

  .scale{padding:3.5rem 0}
  .scale h2{padding:0 1.5rem;font-size:2.6rem}
  .scale .art{width:100%;margin-top:1rem}
  .stats{grid-template-columns:1fr;gap:2.2rem;padding:0 1.5rem}
  .stat b{font-size:min(3rem,15vw)}

  .faq{padding:4rem 1.25rem}
  .faq h2{margin-bottom:1.6rem}
  .qa button{padding:1.25rem .2rem;gap:1rem}
  .ans p{padding:0 .2rem 1.4rem 2.5rem}
  .cta{padding:4.5rem 1.25rem}
  .cta-btns{flex-direction:column;align-items:stretch}

  .step{--step-bg:#0393FF;display:flex;flex-direction:column;background:var(--ink);border-radius:16px;overflow:hidden}
  .step:nth-child(2){--step-bg:#F98C10}
  .step:nth-child(3){--step-bg:#5CC140}
  .step .art{display:none}
  .step .k{position:static;transform:none;order:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1rem 1.25rem;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.2;letter-spacing:0}
  .step .step-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:8px;background:#fff;color:var(--ink)}
  .step .step-icon svg{display:block;width:26px;height:26px}
  .step .tx{position:static;order:1;width:auto;padding:1.3rem 1.25rem 1.5rem;background:var(--step-bg)}
  .step h3{font-size:clamp(1.8rem,7.2vw,2.5rem);line-height:1.05}
  .step p{width:auto;margin-top:.7em;font-size:1rem;line-height:1.5;font-weight:480;color:rgba(0,0,0,.8)}
  .step-photo-wrap{display:block;order:2;padding:0 1.25rem 1.25rem;background:var(--step-bg)}
  .step-photo{display:block;width:100%;height:auto;border-radius:10px;object-fit:cover}

  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.2rem 1.5rem}
  .fcol{min-width:0}
  .foot .brand{flex-wrap:wrap}
  .fcol:first-child,.fcol.wide{grid-column:1/-1}
  .fcol p,.fcol address,.fcol li{font-size:1rem}
  .fcol ul{gap:0}
  .fcol li a,.fcol p a{display:inline-flex;align-items:center;min-height:44px}
  .foot-base{font-size:.95rem}
  .foot-base a,.foot .brand{display:inline-flex;align-items:center;min-height:44px}
  .social a{width:44px;height:44px}
  .cta .cbtn{min-height:48px}

  .nav,.nav-menu,.hero .t,.why h2,.why .mid,.research,.loop .split,.loop .a,.loop .b,.hs-head,.track,.how,.split8 .t,.press,.scale h2,.stats,.faq,.cta,.foot{
    padding-left:max(1.25rem, env(safe-area-inset-left,0px));
    padding-right:max(1.25rem, env(safe-area-inset-right,0px));
  }
  .foot{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
}
@media (min-width:600px) and (max-width:900px){
  .why .sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0}
  .why .side h3,.why .side .note{padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
}
@media (hover:none){
  .btn:hover,.cbtn:hover,.cta-card:hover,.social a:hover{transform:none}
  .cbtn.primary:hover{box-shadow:none}
  .cbtn.ghost:hover{background:#fff}
  .social a:hover{border-color:#DADAE3}
  .qa button:hover span{color:var(--ink)}
  .nav a:not(.btn):hover{text-decoration:none}
}
@media (prefers-reduced-motion:reduce){
  .ans,.ans p,.qa i::before,.qa i::after,.cta-card,.cbtn,.social a,.btn,.tabs button,.hs-head,.nav-menu,.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after,.skip-link{transition:none}
  .site-head.menu-open .nav-menu{animation:none}
}