/* ============================================================
   Ridown India — design system
   Achromatic. Photography is the only colour, and it is muted.
   ============================================================ */

:root{
  /* palette */
  --ink:        #0B0B0C;
  --ink-2:      #141416;
  --ink-3:      #1D1D20;
  --paper:      #FFFFFF;
  --paper-2:    #F5F5F5;
  --paper-3:    #EBEBEB;

  /* semantic (light section defaults) */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --muted:      #6B6B70;
  --faint:      #73737D;
  --line:       rgba(11,11,12,.11);
  --line-soft:  rgba(11,11,12,.07);
  --chip:       rgba(11,11,12,.05);
  --err:        #C0362C;   /* the only non-neutral on the page, and only for errors */
  --err-soft:   rgba(192,54,44,.10);
  --btn-fg:       #FFFFFF;
  --btn-bg:       var(--ink);
  --btn-bg-hover: #2A2A2E;
  --btn-line:       rgba(11,11,12,.17);
  --btn-line-hover: rgba(11,11,12,.38);

  /* type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* metrics */
  --wrap: 1240px;
  --gut: clamp(20px, 4.2vw, 48px);
  --sec-y: clamp(84px, 10.5vw, 164px);
  --r: 4px;
  --r-lg: 14px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

.theme-dark{
  --bg:        var(--ink);
  --fg:        #FFFFFF;
  --muted:     rgba(255,255,255,.60);
  --faint:     rgba(255,255,255,.54);
  --line:      rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);
  --chip:      rgba(255,255,255,.07);
  --btn-fg:       var(--ink);
  --btn-bg:       #FFFFFF;
  --btn-bg-hover: #E8E8E4;
  --btn-line:       rgba(255,255,255,.24);
  --btn-line-hover: rgba(255,255,255,.45);
  color-scheme: dark;
  background:var(--bg);
  color:var(--fg);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--ink);color:#fff}
.theme-dark ::selection{background:#fff;color:var(--ink)}

:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;padding:12px 18px;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ---------- layout ---------- */
section[id],main[id],footer[id]{scroll-margin-top:96px}

.sec{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-block:var(--sec-y);
}
/* a neutral tint separates two light sections; a hairline only when both are white */
.sec--soft{--bg:var(--paper-2)}
.sec + .sec:not(.theme-dark):not(.sec--soft){border-top:1px solid var(--line)}
.sec + .sec:not(.theme-dark){padding-top:clamp(64px,7vw,104px)}
.sec:has(+ .sec:not(.theme-dark)){padding-bottom:clamp(64px,7vw,104px)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1560px}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.6875rem;font-weight:500;letter-spacing:.155em;text-transform:uppercase;
  color:var(--faint);
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.85;flex:none;
}
.h1{
  font-family:var(--display);
  font-size:clamp(2.7rem, 7.1vw, 6.1rem);
  line-height:.97;letter-spacing:-.038em;font-weight:500;
}
.h2{
  font-family:var(--display);
  font-size:clamp(1.95rem, 4.3vw, 3.4rem);
  line-height:1.04;letter-spacing:-.032em;font-weight:500;
}
.h3{
  font-family:var(--display);
  font-size:clamp(1.0625rem, 1.35vw, 1.3rem);
  line-height:1.25;letter-spacing:-.018em;font-weight:500;
}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.012em}
.lead{
  font-size:clamp(1.0625rem, 1.35vw, 1.28rem);
  line-height:1.52;color:var(--muted);letter-spacing:-.012em;font-weight:400;
}
.body{color:var(--muted);font-size:.9375rem;line-height:1.66}
.measure{max-width:56ch}
.measure-sm{max-width:44ch}

/* ---------- buttons ---------- */
.btn{
  --pad: 14px 22px;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:var(--pad);border-radius:999px;
  font-size:.875rem;font-weight:500;letter-spacing:-.008em;white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--solid{background:var(--btn-bg);color:var(--btn-fg)}
.btn--solid:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}
.btn--solid:active{transform:translateY(0)}
.btn--line{border:1px solid var(--btn-line);color:var(--fg);background:transparent}
.btn--line:hover{border-color:var(--btn-line-hover);transform:translateY(-1px)}
.btn--line:active{transform:translateY(0)}
.btn--sm{--pad:10px 17px;font-size:.8125rem}

.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.875rem;font-weight:500;color:var(--fg);
  padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease);
}
.tlink:hover{background-size:100% 1px}
.tlink .ar{transition:transform .45s var(--ease)}
.tlink:hover .ar{transform:translateX(4px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-top:18px;
  transition:padding-top .5s var(--ease);
}
.nav.is-stuck{padding-top:10px}
.nav__inner{
  width:min(var(--wrap), calc(100vw - var(--gut)*2));
  margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  padding:11px 11px 11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .55s var(--ease), border-color .55s var(--ease), backdrop-filter .55s var(--ease), box-shadow .55s var(--ease);
}
.nav.is-stuck .nav__inner{
  background:rgba(11,11,12,.9);
  border-color:rgba(255,255,255,.1);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.6);
}
.brand{display:flex;align-items:center;gap:9px;color:#fff;flex:none}
.brand img{height:15px;width:auto}
.brand b{font-family:var(--display);font-size:1.0625rem;font-weight:500;letter-spacing:-.026em}
.brand span{font-weight:400;opacity:.55}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links a{
  padding:8px 14px;border-radius:999px;
  font-size:.8125rem;font-weight:450;color:rgba(255,255,255,.62);
  transition:color .35s var(--ease), background .35s var(--ease);
}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav__cta{flex:none}
.nav .btn--solid{background:#fff;color:var(--ink)}
.nav .btn--solid:hover{background:#E8E8E4}
.nav__burger{display:none;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.18);align-items:center;justify-content:center}
.nav__burger i{display:block;width:16px;height:1.5px;background:#fff;position:relative;transition:transform .4s var(--ease), background .2s}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:#fff;transition:transform .4s var(--ease)}
.nav__burger i::before{top:-5px}
.nav__burger i::after{top:5px}
body.menu-open .nav__burger i{background:transparent}
body.menu-open .nav__burger i::before{transform:translateY(5px) rotate(45deg)}
body.menu-open .nav__burger i::after{transform:translateY(-5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;
  padding:96px var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
body.menu-open .menu{opacity:1;visibility:visible;transform:none}
.menu a.m{
  display:block;font-family:var(--display);font-size:clamp(2rem,9vw,3rem);
  letter-spacing:-.035em;font-weight:500;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.menu__foot{color:rgba(255,255,255,.5);font-size:.8125rem;display:grid;gap:4px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-top:clamp(140px, 17vw, 210px);
  padding-bottom:0;
  overflow:clip;
}
.hero::after{ /* soft vignette at the top so the nav always reads */
  content:"";position:absolute;inset:0 0 auto 0;height:220px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.hero::before{ /* fine grain — invisible until you look for it, kills banding in the black */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero__pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  font-size:.75rem;font-weight:450;letter-spacing:-.005em;color:rgba(255,255,255,.82);
}
.hero__pill .dot{
  width:6px;height:6px;border-radius:50%;background:#fff;flex:none;position:relative;
}
.hero__pill .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:1}70%,100%{transform:scale(1.5);opacity:0}}

.hero h1{margin-top:clamp(20px,2.4vw,28px);max-width:16ch}
.hero__grid{margin-top:clamp(14px,2.2vw,32px);max-width:545px}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ---------- hero headline: masked, word-by-word ---------- */
.hh{line-height:.88;letter-spacing:-.042em}
.ln{
  display:block;overflow:hidden;
  padding-bottom:.18em;margin-bottom:-.15em;   /* room for serif descenders inside the mask */
}
.w{
  display:inline-block;will-change:transform;
  transform:translate3d(0,130%,0) rotate(var(--rot,3deg));
  transform-origin:0 100%;
  transition:transform 1.25s var(--ease-out) var(--d,0ms);
}
.is-ready .w{transform:none}
/* the accent word settles last, and condenses as it lands */
.ow{
  letter-spacing:.085em;
  transition:transform 1.45s var(--ease-out) var(--d,0ms),
             letter-spacing 1.6s var(--ease-out) var(--d,0ms);
}
.is-ready .ow{letter-spacing:-.014em}
.fade-up{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) var(--d,0ms), transform .9s var(--ease) var(--d,0ms)}
.is-ready .fade-up{opacity:1;transform:none}

.hero__media{
  position:relative;margin-top:clamp(42px,5.4vw,76px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.6s var(--ease-out) .5s;
}
.is-ready .hero__media{clip-path:inset(0 0 0 0)}
.hero__media img{
  width:100%;aspect-ratio:16/8.1;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.74);
  transform:scale(1.14);opacity:0;
  transition:transform 2.4s var(--ease-out) .5s, opacity 1.2s ease .5s;
}
.is-ready .hero__media img{transform:scale(1);opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.05) 38%, rgba(11,11,12,.62) 100%);
}
.hero__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero__cap div{padding:18px clamp(14px,2vw,26px);border-left:1px solid rgba(255,255,255,.14)}
.hero__cap div:first-child{border-left:0}
.hero__cap dt{font-size:.75rem;font-weight:450;line-height:1.25;letter-spacing:-.004em;color:rgba(255,255,255,.5)}
.hero__cap dd{margin:5px 0 0;font-family:var(--display);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;letter-spacing:-.02em}

@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   SPLIT HEAD (sticky label column)
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,332px) minmax(0,1fr);gap:clamp(28px,5vw,88px)}
.split__side{align-self:start;position:sticky;top:112px}
.split__side .h2{margin-top:18px}
.split__side p{margin-top:clamp(13px,1.6vw,18px)}
.split__side .tlink{margin-top:26px}

/* ---------- section head rhythm ---------- */
.eyebrow + .h2{margin-top:clamp(12px,1.4vw,18px)}
.h2 + .lead{margin-top:clamp(14px,1.6vw,20px)}

/* ---------- pillar rows (editorial list) ---------- */
.rows{border-top:1px solid var(--line)}
.row{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:42px minmax(0,232px) minmax(0,1fr);
  gap:clamp(16px,2.2vw,30px);align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.row::after{                       /* the row's own rule draws in — nothing else moves */
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--fg);
  transition:width .7s var(--ease);
}
.row:hover::after{width:100%}
.row__ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);color:var(--fg);
  transition:border-color .45s var(--ease);
}
.row:hover .row__ico{border-color:var(--fg)}
.row__ico svg{width:19px;height:19px}
.row h3{padding-top:9px;transition:transform .55s var(--ease)}
.row:hover h3{transform:translateX(2px)}
.row p{padding-top:11px;max-width:46ch;transition:color .45s var(--ease)}
.row:hover p{color:var(--fg)}

/* ============================================================
   WAY (manifesto)
   ============================================================ */
.way{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(30px,3.6vw,46px)}
.way__list{border-top:1px solid var(--line)}
.way__item{
  padding:19px 2px;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.way__item::before{
  content:"";position:absolute;left:-2px;right:-2px;top:0;bottom:0;z-index:-1;
  background:var(--chip);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.way__item:hover::before{transform:scaleX(1)}
.way__n{
  font-family:var(--display);font-size:.75rem;font-weight:500;letter-spacing:.08em;
  color:var(--faint);flex:none;width:22px;font-variant-numeric:tabular-nums;
}
.way__t{
  font-family:var(--display);
  font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.08;letter-spacing:-.032em;font-weight:500;
}
.way__t em{font-style:normal;color:var(--faint)}
.way__fig{position:relative;border-radius:var(--r-lg);overflow:hidden}
.way__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.92)}
.way__fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-size:.75rem;color:rgba(255,255,255,.7);
  background:linear-gradient(transparent, rgba(0,0,0,.72));
}

/* ============================================================
   COMPARE
   ============================================================ */
/* ---------- the case for working here: three statements, no table ---------- */
.claims{margin-top:clamp(30px,3.6vw,50px);border-top:1px solid var(--line)}
.claim{
  display:grid;
  grid-template-columns:clamp(44px,5vw,68px) minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(12px,2.6vw,40px);row-gap:0;align-items:start;
  padding:clamp(28px,3.4vw,46px) 0;border-bottom:1px solid var(--line);
  opacity:.3;transition:opacity .7s var(--ease);
}
.claim.on{opacity:1}
.claim__n{
  font-family:var(--display);font-size:.6875rem;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;color:var(--faint);padding-top:.55em;
}
.claim__t{
  font-family:var(--display);
  font-size:clamp(1.45rem,3.1vw,2.5rem);line-height:1.1;letter-spacing:-.032em;
  font-weight:500;
}
.claim__s{
  padding-top:.5em;font-size:.9375rem;line-height:1.66;color:var(--muted);max-width:40ch;
}
@media (max-width:900px){
  .claim{grid-template-columns:clamp(40px,5vw,60px) minmax(0,1fr)}
  .claim__s{grid-column:2/3;padding-top:9px;max-width:52ch}
}
@media (max-width:640px){
  .claim{grid-template-columns:1fr;row-gap:0;padding:26px 0}
  .claim__n{padding-top:0;margin-bottom:8px}
  .claim__s{grid-column:1/-1;padding-top:9px}
}

/* ---------- stats ---------- */
.stats{
  margin-top:clamp(34px,4.4vw,60px);
  background:var(--ink);color:#fff;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
}
.stat{padding:clamp(20px,2.3vw,28px);border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:0}
.stat b{
  display:block;font-family:var(--display);
  font-size:clamp(1.65rem,3.1vw,2.6rem);line-height:1;letter-spacing:-.04em;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.stat__l{
  display:flex;align-items:center;gap:7px;margin-top:10px;
  font-size:.75rem;font-weight:450;line-height:1.25;letter-spacing:-.004em;
  color:rgba(255,255,255,.55);white-space:nowrap;
}
.stat__l svg{width:15px;height:15px;flex:none;color:#fff;opacity:1}

/* ============================================================
   GALLERY
   ============================================================ */
.gal{overflow:hidden;margin-top:clamp(34px,4vw,54px)}
.gal__row{display:flex;gap:14px;width:max-content;will-change:transform}
.gal__row--a{animation:drift 74s linear infinite}
.gal__row--b{animation:drift 92s linear infinite reverse;margin-top:14px}
.gal:hover .gal__row{animation-play-state:paused}
.gal figure{
  flex:none;width:clamp(230px,26vw,392px);border-radius:10px;overflow:hidden;margin:0;background:var(--ink-2);
}
.gal figure img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.9);
  transform:scale(1.02);
  transition:filter .7s var(--ease), transform .9s var(--ease);
}
.gal figure:hover img{filter:grayscale(0) contrast(1.02) brightness(1);transform:scale(1.06)}

/* ============================================================
   FEATURES
   ============================================================ */
.feats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line);
}
.feat{
  padding:clamp(24px,2.8vw,38px) clamp(20px,2.4vw,34px);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  position:relative;
}
.feat:nth-child(3n+1){border-left:0;padding-left:0}
.feat__ico{display:block;width:23px;height:23px;color:var(--fg);transition:transform .55s var(--ease)}
.feat__ico svg{width:100%;height:100%;display:block}
.feat:hover .feat__ico{transform:translateY(-3px)}
.feat h3{margin-top:22px}
.feat p{margin-top:9px}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{position:relative;margin-top:clamp(34px,4vw,60px);padding-left:clamp(30px,4.4vw,56px)}
.steps__rail{position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.steps__rail i{position:absolute;inset:0 auto 0 0;width:1px;background:var(--fg);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .15s linear}
.step{
  position:relative;padding:0 0 clamp(34px,4vw,58px);
  opacity:.34;transition:opacity .65s var(--ease);
}
.step.on{opacity:1}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:calc(clamp(30px,4.4vw,56px)*-1);top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  transform:translateX(-4px);transition:background .5s var(--ease), border-color .5s var(--ease);
}
.step.on::before{background:var(--fg);border-color:var(--fg)}
.step__n{font-size:.75rem;font-weight:450;line-height:1.25;letter-spacing:-.004em;color:var(--faint);font-variant-numeric:tabular-nums}
.step h3{margin-top:10px;font-size:clamp(1.25rem,2.2vw,1.7rem);letter-spacing:-.03em}
.step p{margin-top:10px;max-width:52ch}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{position:relative;overflow:clip}
.quote__bg{position:absolute;inset:0}
.quote__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.34) contrast(1.15)}
.quote__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.7),rgba(11,11,12,.45) 45%,rgba(11,11,12,.86))}
.quote .wrap{position:relative;z-index:1;text-align:center}
.quote blockquote{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.6rem,4.1vw,3.05rem);line-height:1.1;letter-spacing:-.035em;
  max-width:19ch;margin:26px auto 0;
}
.quote cite{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:28px;font-style:normal;
}
.quote__by img{height:15px;width:auto;opacity:.55}
.quote__by b{
  font-family:var(--display);font-size:.9375rem;font-weight:500;letter-spacing:-.026em;
  color:rgba(255,255,255,.62);
}
.quote__by span{font-weight:400;opacity:.62}

/* ============================================================
   CTA
   ============================================================ */
.cta__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(30px,5vw,80px);align-items:end}
.cta h2{margin-top:20px;max-width:13ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cards a,.cards div{
  background:var(--bg);padding:17px 18px;
  display:grid;grid-template-columns:34px minmax(0,1fr) 15px;gap:14px;align-items:center;
  transition:background .4s var(--ease);
}
.cards a:hover{background:var(--paper-2)}
.cards__i{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--fg);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.cards__i svg{width:17px;height:17px}
.cards a:hover .cards__i{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cards__b{display:flex;flex-direction:column;gap:3px;min-width:0}
.cards__ar{color:var(--faint);justify-self:end;opacity:0;transform:translate(-3px,3px);transition:opacity .35s var(--ease), transform .35s var(--ease)}
.cards a:hover .cards__ar{opacity:1;transform:none}
.cards .k{font-size:.75rem;font-weight:450;line-height:1.25;letter-spacing:-.004em;color:var(--faint)}
.cards .v{font-size:.9375rem;font-weight:450;letter-spacing:-.01em}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding-top:clamp(56px,6.4vw,88px);overflow:clip}
.foot__top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,.7fr));gap:clamp(26px,3.4vw,48px)}
.foot__brand{display:flex;align-items:center;gap:10px}
.foot__brand b{letter-spacing:-.028em}
.foot__brand img{height:17px;width:auto}
.foot__brand b{font-family:var(--display);font-size:1.05rem;font-weight:500;letter-spacing:-.024em}
.foot__brand span{font-weight:400;opacity:.55}
.foot p.body{color:rgba(255,255,255,.55);margin-top:16px;max-width:34ch}
.foot h4{margin:0 0 15px;font-size:.75rem;font-weight:450;line-height:1.25;letter-spacing:-.004em;color:rgba(255,255,255,.45)}
.foot li+li{margin-top:10px}
.foot li a,.foot li span{font-size:.875rem;color:rgba(255,255,255,.66);transition:color .35s var(--ease)}
.foot li a:hover{color:#fff}
.foot__word{display:block;width:100%;margin-top:clamp(40px,5vw,72px);overflow:visible}
.foot__word text{
  font-family:var(--display);font-weight:500;font-size:132px;
  fill:none;stroke:#fff;stroke-width:1;paint-order:stroke;
}
.foot__word tspan{stroke-opacity:.03;transition:stroke-opacity .45s var(--ease)}
@media (prefers-reduced-motion:reduce){ .foot__word tspan{stroke-opacity:.17!important} }
.foot__bar{
  margin-top:clamp(22px,3vw,40px);padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.75rem;color:rgba(255,255,255,.44);
}
.foot__bar a:hover{color:#fff}

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .7s var(--ease) var(--d,0ms), transform .7s var(--ease) var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .split{grid-template-columns:1fr}
  .split__side{position:static}
  .way{grid-template-columns:1fr}
  .way__fig{order:-1}
  .way__fig img{aspect-ratio:16/10}
  .cta__grid{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(3n+1){border-left:0}
  .stat:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .nav.is-stuck .nav__inner{background:rgba(11,11,12,.92)}
  .hero__grid{grid-template-columns:1fr;align-items:start}
  .hero__media img{aspect-ratio:16/12}
  .hero__cap{grid-template-columns:repeat(2,1fr)}
  .hero__cap div:nth-child(3),.hero__cap div:nth-child(4){border-top:1px solid rgba(255,255,255,.14)}
  .hero__cap div:nth-child(odd){border-left:0}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat:nth-child(3n+1){border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,34px)}
  .feat:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:640px){
  /* stack every pair of page CTAs full width on phones: bigger tap targets
     and no mismatched button widths */
  .cta__actions,.hero__actions{flex-direction:column;align-items:stretch;gap:9px}
  .cta__actions .btn,.hero__actions .btn{width:100%;justify-content:center;padding:15px 22px}
  .split__side .btn{width:100%;justify-content:center;padding:15px 22px}
  .row{grid-template-columns:38px 1fr;column-gap:16px;row-gap:0;padding:22px 0}
  .row__ico{width:38px;height:38px;border-radius:9px}
  .row h3{padding-top:8px}
  .row p{grid-column:2/3;padding-top:7px}   /* title and body read as one block */
  .feats{grid-template-columns:1fr}
  .feat{border-left:0!important;padding-left:0!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.12)}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .foot__top{grid-template-columns:1fr}
  .hero__media{border-radius:10px 10px 0 0}
  .hero__media img{aspect-ratio:4/5}
  .hero__cap div{padding:14px 16px}
  .hero__cap dd{font-size:.9375rem}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal],.fade-up,.step,.claim{opacity:1!important;transform:none!important}
  .w{transform:none!important}
  .ow{letter-spacing:-.014em!important}
  .hero__media{clip-path:none!important}
  .hero__media img{opacity:1!important;transform:none!important}
}

/* ============================================================
   TOUCH — no sticky hover states on devices without a pointer
   ============================================================ */
@media (hover:none){
  .way__item:hover::before{transform:scaleX(0)}
  .row:hover::after{width:0}
  .row:hover .row__ico{border-color:var(--line)}
  .row:hover h3{transform:none}
  .row:hover p{color:var(--muted)}
  .gal figure:hover img{filter:grayscale(1) contrast(1.06) brightness(.9);transform:scale(1.02)}
  .feat:hover .feat__ico{transform:none}
  .tlink:hover{background-size:0% 1px}
  .btn--solid:hover,.btn--line:hover{transform:none}
  .btn--line:hover{background:transparent;border-color:var(--btn-line)}
}

/* ============================================================
   APPLY DIALOG
   Fields are hairline-underlined rather than filled: the rest of the page
   has no filled boxes, and grey wells made the form look like a different
   product. On phones it becomes a bottom sheet.
   ============================================================ */
.modal{
  border:0;padding:0;background:transparent;color:var(--ink);
  width:min(600px, calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);
  overflow:visible;
  opacity:0;transform:translate3d(0,12px,0) scale(.985);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  will-change:transform,opacity;
}
.modal.is-open{opacity:1;transform:none}
.modal::backdrop{background:rgba(6,6,7,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
/* three fixed bands: header, scrolling fields, action. No sticky, because a
   sticky child inside a padded scroll container resolves its offset against
   the content box and paints under the scrolled content. */
.modal__inner{
  --pad:clamp(22px,3vw,32px);
  position:relative;background:var(--paper);border-radius:18px;
  display:flex;flex-direction:column;
  max-height:calc(100dvh - 32px);overflow:hidden;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.5);
}
#applyBody{display:flex;flex-direction:column;min-height:0;flex:1}
.modal__head{
  flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;
  padding:var(--pad) var(--pad) 15px;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.modal__inner.is-scrolled .modal__head{border-bottom-color:var(--line)}
.modal__sub{grid-column:1/-1}
.modal__close{
  flex:none;width:32px;height:32px;border-radius:999px;margin:-4px -4px 0 0;
  display:grid;place-items:center;color:var(--faint);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.modal__close:hover{background:var(--paper-2);color:var(--ink)}
.modal__t{margin-top:8px;font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.03em}
.modal__sub{margin-top:9px;max-width:46ch;font-size:.9375rem;line-height:1.55}

.form{display:flex;flex-direction:column;min-height:0;flex:1}
.form__fields{
  display:grid;grid-template-columns:1fr 1fr;gap:2px clamp(20px,2.6vw,32px);
  overflow-y:auto;overscroll-behavior:contain;min-height:0;
  padding:0 var(--pad) var(--pad);
}
.form__full{grid-column:1/-1}
.form label,.form .fld{display:block;min-width:0;padding-top:18px}
.form label>span,.form .fld>span{display:block;margin-bottom:7px;color:var(--muted);font-size:.8125rem;font-weight:450;line-height:1.25;letter-spacing:-.006em}
.form input,.form select,.form textarea{
  width:100%;font:inherit;font-size:.9375rem;letter-spacing:-.008em;color:var(--ink);
  background:transparent;
  border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;resize:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form select{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.form :is(input,select,textarea):focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(11,11,12,.09);
}
.form :is(input,textarea)::placeholder{color:#9A9AA0}
.form [aria-invalid="true"]{border-color:var(--err)}
.form [aria-invalid="true"]:focus{border-color:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.form__err{
  display:flex;align-items:flex-start;gap:6px;
  margin-top:7px;font-size:.75rem;line-height:1.45;color:var(--err);font-weight:450;
}
.form__foot{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:16px var(--pad) var(--pad);
  border-top:1px solid var(--line);background:var(--paper);
}
.form__note{font-size:.75rem;color:var(--faint);max-width:32ch;margin:0}
.form button[disabled]{opacity:.55;pointer-events:none}

.modal__done{padding:var(--pad);overflow-y:auto}
.modal__tick{
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:var(--ink);color:#fff;margin-bottom:18px;
}
.modal__done h2{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:500;letter-spacing:-.03em}
.modal__done p{margin-top:10px;max-width:44ch;color:var(--muted);font-size:.9375rem;line-height:1.62}
.modal__done .btn{margin-top:24px}

/* ---------- custom select ---------- */
.sel{position:relative}
.sel__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sel__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:inherit;font-size:.9375rem;letter-spacing:-.008em;color:var(--ink);text-align:left;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sel__btn:hover{border-color:rgba(11,11,12,.26)}
.sel__btn:focus-visible,.sel.is-open .sel__btn{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,11,12,.09);
}
.sel__chev{color:var(--muted);flex:none;transition:transform .3s var(--ease)}
.sel.is-open .sel__chev{transform:rotate(180deg)}
.sel__list{
  position:fixed;z-index:20;margin:0;padding:5px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 48px -18px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.05);
  max-height:min(300px, 58dvh);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-4px) scale(.99);
  transition:opacity .18s var(--ease), transform .22s var(--ease);
}
.sel__list.is-in{opacity:1;transform:none}
.sel__list li{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:7px;cursor:pointer;
  font-size:.875rem;line-height:1.35;letter-spacing:-.008em;color:var(--muted);
  transition:background .15s linear, color .15s linear;
}
.sel__list li .tick{width:13px;height:13px;flex:none;opacity:0;color:var(--ink)}
.sel__list li[aria-selected="true"]{color:var(--ink);font-weight:450}
.sel__list li[aria-selected="true"] .tick{opacity:1}
.sel__list li.is-active{background:var(--paper-2);color:var(--ink)}

/* ---------- phones: bottom sheet ---------- */
/* Apple-style sheet: the title bar and the primary action stay put while the
   fields scroll between them. */
@media (max-width:640px){
  .modal{
    width:100%;max-width:none;max-height:100dvh;
    margin:auto auto 0;                 /* pin to the bottom edge */
    transform:translate3d(0,100%,0);
    transition:transform .46s var(--ease), opacity .2s linear;
  }
  /* blurring a full-screen backdrop behind a sliding sheet drops frames on
     phones; a plain scrim costs nothing and reads the same */
  .modal::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,6,7,.66)}
  .modal.is-open{transform:none}
  .modal__inner{
    --pad:20px;
    border-radius:20px 20px 0 0;
    max-height:90dvh;
    box-shadow:0 -20px 60px -20px rgba(0,0,0,.45);
  }
  .modal__head{padding-top:28px}
  .modal__head::before{
    content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--paper-3);
  }
  .modal__sub{margin-top:9px}
  .form__foot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .modal__done{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .form__fields{grid-template-columns:1fr}
  .form__foot{flex-direction:column-reverse;align-items:stretch;gap:9px}
  .form__foot .btn{justify-content:center;padding:15px 22px}
  .form__note{max-width:none;text-align:center;font-size:.6875rem}
}

/* scroll-lit belief statement — the one scroll-linked moment on the page */
.quote blockquote .wq{opacity:.17;transition:opacity .18s linear}
@media (prefers-reduced-motion:reduce){ .quote blockquote .wq{opacity:1!important} }

/* nav: the section you are in */
.nav__links a[aria-current]{color:#fff;background:rgba(255,255,255,.1)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  display:flex;align-items:flex-start;gap:20px;justify-content:space-between;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:clamp(1.0625rem,1.45vw,1.2rem);
  font-weight:500;letter-spacing:-.022em;line-height:1.35;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.faq__chev{
  flex:none;margin-top:3px;color:var(--muted);
  transition:transform .45s var(--ease), color .3s var(--ease);
}
.faq__i summary:hover .faq__chev{color:var(--fg)}
.faq__i[open] .faq__chev{transform:rotate(180deg);color:var(--fg)}
.faq__a{padding:0 44px 24px 0}
.faq__a p{font-size:.9375rem;line-height:1.66;color:var(--muted);max-width:60ch}
.faq__i[open] .faq__a{animation:faqIn .5s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (max-width:640px){ .faq__a{padding-right:0} }
@media (prefers-reduced-motion:reduce){ .faq__i[open] .faq__a{animation:none} }

/* the six principles: numeral, name, one-line gloss beneath */
.way__item{
  display:grid;grid-template-columns:24px minmax(0,1fr);
  column-gap:clamp(14px,2vw,24px);row-gap:5px;align-items:baseline;
}
.way__n{width:auto}
.way__t{font-size:clamp(1.25rem,2.5vw,1.85rem)}
.way__s{
  grid-column:2/3;font-size:.875rem;line-height:1.5;color:var(--muted);
  max-width:46ch;
}

/* ============================================================
   BRAND STRIP
   The supplied logos are built for dark backgrounds (coloured mark, white
   wordmark), so the band is dark. Greyscale rather than a flat white fill:
   several marks are a coloured shape with white knocked out of it, and
   flattening them to one colour turned them into featureless blobs.
   Desaturating keeps every logo's internal structure. Hover returns the real
   brand colour, the same move the photo gallery makes.
   ============================================================ */
.brands{
  background:var(--ink);
  padding-block:clamp(28px,3.2vw,40px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.brands__k{
  font-size:.75rem;font-weight:450;line-height:1.25;letter-spacing:-.004em;
  color:rgba(255,255,255,.42);margin-bottom:clamp(18px,2.2vw,26px);
}
.brands__vp{
  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);
}
.brands__track{display:flex;width:max-content;animation:drift 46s linear infinite}
.brands__track.is-driven{animation:none}          /* JS takes over to ease the speed */
.brands__l{
  display:flex;align-items:center;flex:none;
  /* the seam between the two copies must be exactly one gap, so the trailing
     padding matches the gap and there is no leading padding at all */
  gap:var(--brand-gap);
  padding-right:var(--brand-gap);
}
.brands{--brand-gap:clamp(34px,4.6vw,70px)}
.brands__l a{display:block;line-height:0;transition:transform .45s var(--ease)}
.brands__l a:hover{transform:scale(1.09)}
.brands__l img{
  height:var(--h,24px);width:auto;
  filter:grayscale(1) brightness(calc(1.45 * var(--b,1))) contrast(.92);opacity:.78;
  transition:opacity .4s var(--ease), filter .5s var(--ease);
}
.brands__l a:hover img{filter:none;opacity:1}
.brands__l a:focus-visible img{filter:none;opacity:1}
@media (max-width:820px){
  .brands{--brand-gap:34px}
  .brands__l img{height:calc(var(--h,24px) * .88)}
  .brands__track{animation-duration:34s}
}
@media (max-width:520px){
  .brands__l img{height:calc(var(--h,24px) * .78)}
  .brands__track{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){
  .brands__track,.gal__row{animation:none}
  .brands__l a:hover{transform:none}
}
@media (hover:none){ .brands__l a:hover img{filter:grayscale(1) brightness(calc(1.45 * var(--b,1))) contrast(.92);opacity:.78} }

/* ---------- commitment to India ---------- */
.commit{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,48px);
}
.commit__k{
  font-size:.6875rem;font-weight:500;letter-spacing:.155em;text-transform:uppercase;color:var(--faint);
}
.commit .h3{margin-top:14px;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.024em}
.commit .body{margin-top:12px;max-width:62ch}
.commit__nums{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(26px,3vw,36px);border-top:1px solid var(--line);
}
.commit__nums div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:20px 16px 0;border-left:1px solid var(--line)}
.commit__nums div:first-child{border-left:0;padding-left:0}
.commit__nums dd{
  font-family:var(--display);font-size:clamp(1.65rem,3.1vw,2.6rem);line-height:1;
  letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg);
}
.commit__nums dt{font-size:.75rem;font-weight:450;line-height:1.3;color:var(--faint)}
.commit__q{margin-top:clamp(28px,3.2vw,40px);padding-top:clamp(24px,2.8vw,32px);border-top:1px solid var(--line)}
.commit__q p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.22;letter-spacing:-.012em;color:var(--fg);max-width:34ch;
}
.commit__q cite{display:block;margin-top:14px;font-style:normal;font-size:.8125rem;color:var(--faint)}
.commit .tlink{margin-top:26px}
@media (max-width:640px){
  .commit__nums div{padding:16px 10px 0}
  .commit__nums dd{font-size:1.5rem}
}

/* spam honeypot for Netlify Forms: invisible to people, filled only by bots */
.form__hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}