/* Self-hosted fonts: latin + latin-ext. The Devanagari file holds only the six watermark glyphs. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face { font-family: 'Tiro Devanagari Sanskrit'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/tiro-devanagari-sanskrit-subset.woff2) format('woff2'); unicode-range: U+91f, U+926, U+937, U+93f, U+943, U+94d}

/* Drishtim — site stylesheet. Tokens first; sections follow page order. */
:root{
  --ink:#0A0A09;
  --paper:#EDEBE5;
  --flare:#FF4D1C;
  --acid:#D8FF3E;
  --panel:#161614;
  --muted:#6b675e;
  --body:#3a3833;
  --strike:#7a766d;
  --white:#fff;
  --cream:#FBF6EE;
  --on-ink:rgba(237,235,229,.72);
  --on-ink-label:rgba(237,235,229,.55);
  --rule-ink:rgba(237,235,229,.15);
  --rule-paper:rgba(10,10,9,.14);
  --arch:'Archivo',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --grot:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad-x:clamp(20px,4vw,56px);
  --pad-y:clamp(48px,8vw,112px);
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);font-family:var(--grot);color:var(--ink);-webkit-font-smoothing:antialiased}
body.case{background:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:opacity .2s}
a:hover{opacity:.62}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
h1,h2,h3,p{margin:0}
[id]{scroll-margin-top:72px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* scroll reveal: hidden only when JS is running and motion is allowed */
html.js [data-reveal]{opacity:0;transform:translateY(48px);will-change:transform,opacity}
/* The first screen animates in CSS so it never waits for JavaScript. The h1 slides without fading: it is the largest paint. */
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes slide{from{transform:translateY(28px)}}
.enter>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.enter>h1{animation-name:slide}
.enter>:nth-child(2){animation-delay:.06s}.enter>:nth-child(3){animation-delay:.12s}.enter>:nth-child(4){animation-delay:.18s}.enter>:nth-child(5){animation-delay:.24s}

/* shared */
.wrap{max-width:1440px;margin:0 auto;padding:var(--pad-y) var(--pad-x)}
.stack{display:flex;flex-direction:column;gap:clamp(24px,3.5vw,40px)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-ink{background:var(--ink);color:var(--paper)}
.on-flare{background:var(--flare);color:var(--ink)}
.eyebrow{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.eyebrow.flare{color:var(--flare)}
.eyebrow.deep{color:#C2360F}
.display{font:900 clamp(46px,8vw,120px)/.84 var(--arch);font-stretch:62%;text-transform:uppercase}
.display em{font:italic 400 clamp(40px,7vw,104px)/.95 var(--serif);text-transform:none;letter-spacing:-.02em}
.display em.flare{color:var(--flare)}
.display em.paper{color:var(--paper)}
.display em.block{display:block}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.head>div{display:flex;flex-direction:column;gap:14px}
.lede{max-width:420px;font:16px/1.6 var(--grot);color:var(--body)}
.on-ink .lede{color:rgba(237,235,229,.68)}
.pill{display:inline-block;padding:clamp(14px,2vw,17px) clamp(20px,3vw,26px);border-radius:100px;font:700 15px var(--grot);white-space:nowrap}
.pill.ink{background:var(--ink);color:var(--paper)}
.pill.ghost{background:rgba(10,10,9,.1)}
.pill.flare{background:var(--flare);color:var(--ink)}
.hex{clip-path:var(--hex);display:flex;align-items:center;justify-content:center;flex:none;background:var(--flare);color:var(--ink);font-family:var(--arch);font-weight:900;font-stretch:62%}
.mark{display:block}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:var(--flare);color:var(--ink)}
.nav-in{max-width:1440px;margin:0 auto;padding:10px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font:900 18px var(--arch);font-stretch:125%;letter-spacing:.04em}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);font:700 13px var(--grot);letter-spacing:.06em;text-transform:uppercase}
.nav-cta{padding:10px 18px;background:var(--ink);color:var(--paper);border-radius:100px;font:700 13px var(--grot);white-space:nowrap;display:flex;align-items:center;gap:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--acid);animation:pulse 2s infinite}
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);align-items:center;justify-content:center;font:600 22px var(--grot)}
.menu{display:none;background:var(--ink);color:var(--paper);padding:12px 20px 24px;flex-direction:column}
.menu a:not(.pill){padding:14px 0;border-bottom:1px solid var(--rule-ink);font:900 40px/1 var(--arch);font-stretch:62%;text-transform:uppercase}
.menu .pill{margin-top:18px;padding:16px;text-align:center}

/* hero */
.hero{position:relative;background:var(--flare);overflow:hidden}
.watermark{position:absolute;font-family:'Tiro Devanagari Sanskrit',serif;pointer-events:none;user-select:none}
.hero .watermark{left:clamp(10px,3vw,40px);bottom:-30px;font-size:clamp(180px,24vw,340px);line-height:.7;color:rgba(10,10,9,.07)}
.hero-in{position:relative;max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,88px) var(--pad-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:26px}
.hero-copy .eyebrow{letter-spacing:.16em}
.hero h1{font:900 clamp(58px,11vw,156px)/.83 var(--arch);font-stretch:62%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.hero h1 em{font:italic 400 clamp(56px,10.6vw,150px)/.9 var(--serif);text-transform:none;color:var(--paper);letter-spacing:-.02em}
.hero-lead{max-width:520px;font:500 clamp(17px,1.4vw,20px)/1.5 var(--grot);text-wrap:pretty}
.row{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:18px;flex-wrap:wrap;font:500 13px var(--grot)}
.trust span{display:flex;align-items:center;gap:6px}
.trust b{font:900 18px var(--arch)}
.trust i{opacity:.4;font-style:normal}
.hero-art{position:relative;height:clamp(360px,48vw,660px)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.ring.r1{width:380px;height:380px;border:10px solid var(--ink)}
.ring.r2{width:600px;height:600px;border:3px solid rgba(10,10,9,.5)}
.ring.r3{width:860px;height:860px;border:2px solid rgba(10,10,9,.28)}
.ring.r4{width:1160px;height:1160px;border:2px solid rgba(10,10,9,.14)}
/* HeroLoop stage: a 640x660 composition, scaled to fit by JS (--s) */
.stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center}
.loop{width:640px;height:660px}
.loop>*{position:absolute;will-change:transform}
.loop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop .pulse{left:320px;top:330px;width:600px;height:600px;border-radius:50%;border:3px solid var(--ink);transform:translate(-50%,-50%);opacity:0}
.loop .back{left:302px;top:142px;width:230px;height:409px;border-radius:18px;overflow:hidden;opacity:.92;box-shadow:0 20px 50px rgba(10,10,9,.28);transform:rotate(7deg)}
.loop .front{left:154px;top:82px;width:268px;height:476px;border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:0 30px 70px rgba(10,10,9,.35);transform:rotate(-4deg)}
.loop .front img{opacity:0}
.loop .front img.on{opacity:1}
.loop .bars{top:12px;left:12px;right:12px;display:flex;gap:4px}
.loop .bars span{flex:1;height:3px;border-radius:2px;background:rgba(237,235,229,.35);overflow:hidden}
.loop .bars i{display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
.loop .sticker{right:26px;bottom:74px;padding:10px 14px;background:var(--paper);border-radius:14px;box-shadow:0 14px 34px rgba(10,10,9,.25);display:flex;flex-direction:column;gap:2px;transform:rotate(3deg)}
.loop .sticker small{font:500 10px var(--mono);letter-spacing:.12em;color:var(--muted)}
.loop .sticker span{font:italic 400 22px/1.1 var(--serif);white-space:nowrap}

/* marquee */
.marquee{background:var(--ink);color:var(--paper);padding:18px 0;overflow:hidden;white-space:nowrap}
.marquee div{display:inline-block;font:900 36px var(--arch);font-stretch:62%;text-transform:uppercase;animation:mq 34s linear infinite}
.marquee i{font:italic 400 36px var(--serif);color:var(--flare);padding:0 18px}

/* work */
.stories3{min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,12px)}
.stories3 figure{margin:0;display:flex;flex-direction:column}
.stories3 img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.stories3 figcaption{padding:clamp(6px,1.2vw,10px) clamp(8px,1.4vw,14px);background:var(--flare);font:900 clamp(13px,2.2vw,22px)/.95 var(--arch);font-stretch:62%;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--ink);color:var(--paper);border-radius:28px 0 28px 0;overflow:hidden}
.stats>div{padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--rule-ink)}
.stats>div:last-child{border-right:0}
.stats b{font:900 clamp(42px,6vw,96px)/.82 var(--arch);font-stretch:62%;color:var(--flare);font-variant-numeric:tabular-nums}
.stats span{font-size:14px;color:rgba(237,235,229,.68)}
.self-start{align-self:flex-start}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.strip-head b{font:900 clamp(24px,3vw,34px)/1 var(--arch);font-stretch:62%;text-transform:uppercase}
.strip-head span{font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted)}
.strip-block{display:flex;flex-direction:column;gap:16px}
.strip{min-width:0;overflow:hidden;margin:0 calc(-1 * var(--pad-x));padding:4px 0}
.strip-track{display:flex;gap:12px;width:max-content;animation:mq 70s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip img{flex:none;height:clamp(300px,30vw,380px);width:auto;border-radius:14px}
.quote-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px;align-items:end;padding-top:24px;border-top:1px solid rgba(10,10,9,.15)}
.quote{font:italic 400 clamp(26px,3.4vw,48px)/1.1 var(--serif);text-wrap:pretty}
.client{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:14px/1.4 var(--grot);color:var(--body)}
.logo-tile{width:clamp(120px,13vw,160px);aspect-ratio:1;flex:none;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(10,10,9,.12);display:flex;align-items:center;justify-content:center}
.logo-tile img{width:74%;height:auto}

/* services */
.raw{position:relative;min-height:clamp(240px,34vw,420px);border:2px solid var(--flare);border-radius:0 clamp(40px,9vw,120px) 0 0;overflow:hidden;background:#000}
.raw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 66%}
.raw span{position:absolute;left:14px}
.raw .tag{top:14px;padding:6px 10px;background:var(--paper);color:var(--ink);font:500 11px var(--mono);letter-spacing:.1em}
.raw .becomes{top:50px;padding:6px 10px;background:var(--flare);color:var(--ink);font:700 12px var(--grot)}
.raw .cap{bottom:14px;max-width:calc(100% - 28px);padding:10px 16px;background:var(--ink);font:italic 400 clamp(20px,2.6vw,28px)/1.05 var(--serif);color:var(--paper)}
.svc{min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(max(150px,calc(25% - 15px)),1fr));gap:clamp(14px,2vw,22px) clamp(12px,2vw,20px);align-items:start}
.svc>div{display:flex;flex-direction:column;gap:10px;min-width:0}
.card{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--panel)}
.card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:3px}
.card .bars span{flex:1;height:3px;border-radius:2px;background:rgba(237,235,229,.4)}
.card .bars span:first-child{background:var(--paper)}
.card .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(40px,5vw,56px);aspect-ratio:1;border-radius:50%;background:rgba(10,10,9,.6);display:flex;align-items:center;justify-content:center}
.card .play::after{content:"";border-left:14px solid var(--paper);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.ad{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper);color:var(--ink)}
.ad-top{display:flex;align-items:center;gap:7px;padding:8px 10px}
.ad-top .av{flex:none;width:24px;height:24px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.ad-top .av img{width:17px;height:auto}
.ad-top div{display:flex;flex-direction:column;min-width:0}
.ad b{font:700 11px/1.2 var(--grot);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad small{font:10px/1.2 var(--grot);color:var(--muted)}
.ad-img{position:relative;flex:1;min-height:0}
.ad-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 84%}
.ad-bot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px}
.ad-bot span{flex:none;padding:6px 10px;background:var(--flare);border-radius:100px;font:700 11px var(--grot)}
.ident{position:absolute;inset:0;background:var(--cream);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,2vw,22px)}
.ident>div:first-child{flex:1;display:flex;align-items:center;justify-content:center}
.ident img{width:62%;height:auto}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.swatches span{aspect-ratio:1;border-radius:6px}
.svc-label{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.svc-label small{font:500 11px var(--mono);color:rgba(237,235,229,.5)}
.svc-label b{font:900 clamp(18px,2.2vw,26px)/1 var(--arch);font-stretch:62%;text-transform:uppercase;color:var(--flare)}
.svc p{font:clamp(13px,1.3vw,15px)/1.45 var(--grot);color:var(--on-ink)}

/* terms */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(32px,5vw,72px)}
.terms-copy{display:flex;flex-direction:column;gap:18px;max-width:460px}
.terms-copy .display{font-size:clamp(46px,7vw,104px)}
.terms-copy .display em{font-size:clamp(40px,6vw,92px)}
.terms-copy p{font:16px/1.6 var(--grot);color:var(--body)}
.cmp{display:flex;flex-direction:column}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
.cmp-head{padding:0 0 12px;border-bottom:3px solid var(--ink);font:500 11px var(--mono);letter-spacing:.1em}
.cmp-head span:nth-child(2){color:var(--strike)}
.cmp-row{padding:18px 0;border-bottom:1px solid var(--rule-paper);align-items:center;font:16px var(--grot);transition:background .2s}
.cmp-row:hover{background:rgba(255,77,28,.08)}
.cmp-row .k{font-weight:700}
.cmp-row .them{color:var(--strike);text-decoration:line-through}
.cmp-row .us{font-weight:700;display:flex;align-items:center;gap:10px}
.cmp-row .us::before{content:"";width:10px;height:11px;flex:none;background:var(--flare);clip-path:var(--hex)}
.cmp-row .them i{display:none;font-style:normal}

/* how a month works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.steps>div{padding:28px 24px 0 0;display:flex;flex-direction:column;gap:12px}
.steps .hex{width:84px;height:96px;font-size:40px;line-height:1}
.steps b{font:700 20px var(--grot)}
.steps p{font:15px/1.55 var(--grot);color:rgba(237,235,229,.65)}
.chart-card{display:flex;flex-direction:column;gap:16px;padding:clamp(18px,3vw,28px);background:var(--panel);border:1.5px solid rgba(237,235,229,.14);border-radius:32px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.chart-head b{font:700 22px var(--grot)}
.chart-head em{font:italic 400 30px var(--serif);color:var(--flare)}
.chart-head span{font:500 11px var(--mono);letter-spacing:.1em;color:rgba(237,235,229,.5)}
.chart-box{position:relative;width:100%;aspect-ratio:1200/250;overflow:hidden}
.chart{position:absolute;left:0;top:0;width:1200px;height:250px;transform:scale(var(--s,1));transform-origin:left top}
.chart>*{position:absolute}
.chart .tile{left:0;top:22px;width:150px;height:188px;background:var(--flare);border-radius:16px;padding:14px;color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;transform-origin:left bottom}
.chart .tile small{font:500 12px var(--mono);letter-spacing:.1em}
.chart .tile b{font:900 34px/.9 var(--arch);font-stretch:62%;text-transform:uppercase}
.chart .line{left:172px;top:230px;height:2px;width:1028px;background:var(--flare);transform-origin:left}
.chart .col{top:0;height:250px}
.chart .col i{position:absolute;left:0;right:0;height:44px;border-radius:8px;transform-origin:bottom}
.chart .col span{position:absolute;left:0;bottom:26px;font:500 13px var(--mono);color:rgba(237,235,229,.55)}
.chart.small .tile{width:100px;padding:10px;border-radius:12px}
.chart.small .tile b{font-size:26px}
.chart.small .col i{border-radius:6px}
.chart.small .col span{font-size:15px}
.legend{display:flex;gap:20px;flex-wrap:wrap;font:13px var(--grot);color:rgba(237,235,229,.7)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px}

/* plans */
.plans{position:relative;overflow:hidden}
.plans .wrap{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.badge{position:relative;width:clamp(104px,10vw,132px);aspect-ratio:1;flex:none}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge text{font:700 19px var(--grot);letter-spacing:3px}
.badge span{position:absolute;left:50%;top:50%;width:40%;height:46%;transform:translate(-50%,-50%);background:var(--ink);clip-path:var(--hex)}
.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.goal{padding:18px 20px;border-radius:20px;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:background .2s,transform .2s}
.goal:hover,.goal[aria-checked="true"]{transform:translateY(-3px)}
.goal[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.goal-top{display:flex;justify-content:space-between;align-items:center;font:500 11px var(--mono);letter-spacing:.12em;opacity:.75}
.radio{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center}
.goal[aria-checked="true"] .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acid)}
.goal b{font:900 clamp(26px,2.4vw,32px)/.95 var(--arch);font-stretch:62%;text-transform:uppercase}
.goal>span:last-child{font:14px/1.4 var(--grot);opacity:.8}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:clamp(14px,2vw,22px);align-items:stretch}
.rec{position:relative;padding:clamp(22px,3.4vw,40px);background:var(--ink);color:var(--paper);border-radius:40px 40px 40px 6px;box-shadow:0 30px 70px rgba(10,10,9,.35);display:flex;flex-direction:column;gap:22px}
.rec-tag{position:absolute;right:clamp(14px,3vw,28px);top:-20px;padding:9px 14px;background:var(--acid);color:var(--ink);border-radius:100px;font:700 12px var(--grot);letter-spacing:.06em}
.kind{font:500 11px var(--mono);letter-spacing:.12em;color:rgba(237,235,229,.6)}
.rec-head{display:flex;flex-direction:column;gap:8px}
.rec-name{font:900 clamp(44px,5vw,72px)/.84 var(--arch);font-stretch:62%;text-transform:uppercase}
.rec-why{font:italic 400 clamp(22px,2.2vw,28px)/1.2 var(--serif);color:rgba(237,235,229,.85);text-wrap:pretty}
.vis{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--panel);border-radius:24px}
.vis-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.dots{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-end}
.dots i{animation:pop .45s cubic-bezier(.2,.8,.2,1.2) both}
.vis-row>span{font:700 15px var(--grot);white-space:nowrap}
.vis-row b{font:900 24px var(--arch);font-stretch:62%}
.items{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.items li{display:flex;align-items:flex-start;gap:10px;font:15px/1.4 var(--grot)}
.items li::before{content:"";flex:none;margin-top:4px;width:11px;height:12px;background:var(--acid);clip-path:var(--hex)}
.rec-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--rule-ink);margin-top:auto}
.rec-foot>div{display:flex;flex-direction:column;gap:4px}
.price-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font:italic 400 clamp(48px,5vw,72px)/1 var(--serif);color:var(--acid)}
.per{font:15px var(--grot);color:rgba(237,235,229,.65)}
.daily{font:500 13px var(--grot);color:rgba(237,235,229,.7)}
.rec-cta{gap:8px!important;align-items:stretch;min-width:min(100%,240px)}
.rec-cta a{padding:17px 24px;text-align:center}
.rec-cta small{font:12px var(--grot);color:rgba(237,235,229,.6);text-align:center}
.others{display:flex;flex-direction:column;gap:12px}
.others>.kind{color:var(--ink)}
.other{width:100%;padding:20px 22px;background:var(--paper);border-radius:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;transition:transform .2s,box-shadow .2s}
.other:hover{transform:translateX(6px);box-shadow:0 14px 34px rgba(10,10,9,.18)}
.other small{font:500 10px var(--mono);letter-spacing:.12em;color:var(--muted)}
.other .op{grid-row:span 3;font:italic 400 clamp(28px,2.6vw,36px)/1 var(--serif);text-align:right}
.other .op span{display:block;font:12px var(--grot);color:var(--muted)}
.other b{font:900 26px/.95 var(--arch);font-stretch:62%;text-transform:uppercase}
.other>span:last-child{font:14px/1.4 var(--grot);color:var(--body)}
.unsure{padding:20px 22px;border-radius:24px;background:rgba(10,10,9,.1);display:flex;flex-direction:column;gap:6px}
.unsure b{font:900 24px/.95 var(--arch);font-stretch:62%;text-transform:uppercase}
.unsure span{font:14px/1.45 var(--grot)}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.promises>div{padding:22px;background:var(--ink);color:var(--paper);border-radius:24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.promises .hex{width:44px;height:50px;font-size:20px}
.promises b{display:block;margin-bottom:4px;font:900 24px/.95 var(--arch);font-stretch:62%;text-transform:uppercase}
.promises p{font:14px/1.5 var(--grot);color:var(--on-ink)}
.faq{display:flex;flex-direction:column;background:var(--paper);border-radius:28px;padding:8px clamp(18px,3vw,32px)}
.faq-item{padding:18px 0;border-bottom:1px solid var(--rule-paper);display:flex;flex-direction:column;gap:8px}
.faq-item:last-child{border-bottom:0}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:16px;font:700 17px var(--grot)}
.faq-q i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font:500 18px/1 var(--grot)}
.faq-q i::after{content:"+"}
.faq-q[aria-expanded="true"] i::after{content:"–"}
.faq-a{max-width:760px;font:15px/1.6 var(--grot);color:var(--body)}
.faq-a[hidden]{display:none}

/* crew */
.crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.crew>div{display:flex;flex-direction:column;gap:12px}
.portrait{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(10,10,9,.06) 0 10px,transparent 10px 20px);display:flex;align-items:center;justify-content:center}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait small{font:11px var(--mono);color:var(--muted)}
.portrait b{position:absolute;left:0;bottom:0;padding:10px 14px;background:var(--flare);font:900 clamp(20px,2.2vw,28px)/.9 var(--arch);font-stretch:62%;text-transform:uppercase}
.crew .role{font:700 16px var(--grot)}
.crew .ask{font:italic 400 22px/1.2 var(--serif);color:var(--body)}

/* talk */
.talk{position:relative;overflow:hidden}
.talk .watermark{right:-30px;top:-40px;font-size:clamp(200px,26vw,360px);line-height:.8;color:rgba(237,235,229,.04)}
.talk-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,72px);align-items:center}
.talk-copy{display:flex;flex-direction:column;gap:24px}
.talk-copy .display{font-size:clamp(50px,9vw,136px)}
.talk-copy .display em{font-size:clamp(46px,8vw,120px)}
.talk-copy>p{max-width:460px;font:17px/1.55 var(--grot);color:var(--on-ink)}
.inbox{display:flex;gap:12px;align-items:center;font:14px/1.4 var(--grot);color:rgba(237,235,229,.65)}
.inbox>span:first-child{width:52px;height:52px;flex:none;border-radius:50%;background:var(--flare);display:flex;align-items:center;justify-content:center}
.talk-links{display:flex;gap:24px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.1em;color:var(--on-ink-label);text-transform:uppercase}
.chat{background:var(--paper);color:var(--ink);border:2px solid var(--paper);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:clamp(6px,1vw,14px) clamp(6px,1vw,14px) 0 var(--flare)}
.chat-head{padding:16px 20px;background:var(--flare);display:flex;align-items:center;gap:12px}
.chat-head .av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.chat-head>div{display:flex;flex-direction:column;gap:2px}
.chat-head b{font:700 15px var(--grot)}
.status{display:flex;align-items:center;gap:6px;font:500 12px var(--grot)}
.status i{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink);background:#e0b320}
.open .status i,.open .bubble-dot{background:#3ccf5e}
.chat-reset{margin-left:auto;font:500 10px var(--mono);letter-spacing:.1em}
.thread{padding:20px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.msg{align-self:flex-start;max-width:84%;padding:11px 15px;border-radius:16px 16px 16px 4px;background:#fff;font:15px/1.45 var(--grot);animation:pop .35s cubic-bezier(.2,.8,.2,1.1) both}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px}
.msg.typing{padding:14px 16px;display:flex;gap:5px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:dot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}
.msg.typing i:nth-child(3){animation-delay:.3s}
.chips{padding:14px 20px 20px;border-top:1px solid rgba(10,10,9,.1);display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:11px 16px;background:#fff;border-radius:100px;font:600 14px var(--grot);transition:background .2s,color .2s}
.chip:hover{background:var(--ink);color:var(--paper)}
.chips a{padding:11px 16px;background:var(--ink);color:var(--paper);border-radius:100px;font:700 14px var(--grot)}

/* footer */
.foot{background:var(--flare);color:var(--ink);overflow:hidden}
.case .foot{border-top:1px solid rgba(10,10,9,.2)}
.foot-row{max-width:1440px;margin:0 auto;padding:clamp(28px,4vw,48px) var(--pad-x) 0;display:flex;justify-content:space-between;align-items:center;gap:14px 32px;flex-wrap:wrap}
.foot-mail{font:italic 400 clamp(26px,3vw,34px)/1 var(--serif)}
.foot-links{display:flex;gap:10px 20px;flex-wrap:wrap;font:600 14px var(--grot)}
.foot-links span{font:500 11px var(--mono);letter-spacing:.1em;align-self:center;opacity:.7}
.foot-word{max-width:1440px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.foot-word svg{display:block;width:100%;height:auto;overflow:visible;margin-top:clamp(16px,2.4vw,28px)}
.foot-word text{font:900 470px var(--arch);font-stretch:62%}

/* floating chat button */
.bubble{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:30;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;background:var(--ink);color:var(--paper);border-radius:100px;box-shadow:0 10px 30px rgba(10,10,9,.35);font:700 14px var(--grot);transition:opacity .25s,transform .25s}
.bubble.hide{opacity:0;transform:translateY(12px);pointer-events:none}
.bubble>span:first-child{position:relative;width:36px;height:36px;border-radius:50%;background:var(--flare);display:flex;align-items:center;justify-content:center}
.bubble-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#e0b320}

/* ---------- case study ---------- */
.case .nav-in{gap:16px}
.case .nav-links{gap:clamp(12px,2vw,24px)}
.case .nav-cta{padding:10px 18px;letter-spacing:0;text-transform:none}
.cs-head{max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,88px) var(--pad-x) clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(28px,4vw,56px);align-items:end}
.cs-head>div:first-child{display:flex;flex-direction:column;gap:18px}
.cs-head h1{font:900 clamp(52px,9vw,136px)/.84 var(--arch);font-stretch:62%;text-transform:uppercase;text-wrap:balance}
.cs-head h1 em{display:block;font:italic 400 clamp(46px,8vw,120px)/.95 var(--serif);text-transform:none;color:var(--flare);letter-spacing:-.02em}
.cs-head p{max-width:560px;font:clamp(16px,1.4vw,19px)/1.6 var(--grot);color:var(--body);text-wrap:pretty}
.info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:clamp(18px,2.4vw,28px);background:#fff;border-radius:28px;box-shadow:0 20px 50px rgba(10,10,9,.08)}
.info>img{width:clamp(90px,10vw,130px);height:auto}
.info dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.info dl div{display:flex;flex-direction:column;gap:3px}
.info dt{font:500 10px var(--mono);letter-spacing:.12em;color:var(--muted)}
.info dd{margin:0;font:600 14px/1.35 var(--grot)}
.cs-row{max-width:1440px;margin:0 auto;padding:0 var(--pad-x)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.shot{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:#dcd8cf}
.problem{margin-top:clamp(48px,7vw,104px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,72px)}
.split.center{align-items:center}
.split>div{display:flex;flex-direction:column;gap:16px}
.cs-h2{font-size:clamp(44px,7vw,104px);line-height:.86}
.cs-h2 em{font-size:clamp(40px,6vw,92px)}
.problem .prose{gap:18px;font:clamp(16px,1.4vw,18px)/1.65 var(--grot);color:rgba(237,235,229,.78)}
.chapters{display:flex;flex-direction:column;gap:clamp(40px,6vw,80px)}
.chapter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,4vw,56px);align-items:center}
.chapter>div:first-child{display:flex;flex-direction:column;gap:16px}
.chapter.flip>div:first-child{order:1}
.ch-top{display:flex;align-items:center;gap:14px}
.ch-top .hex{width:56px;height:64px;font-size:26px}
.ch-top span:last-child{font:500 12px var(--mono);letter-spacing:.14em;color:var(--muted)}
.chapter h3{font:900 clamp(38px,5vw,72px)/.88 var(--arch);font-stretch:62%;text-transform:uppercase}
.chapter p{max-width:520px;font:clamp(15px,1.3vw,17px)/1.65 var(--grot);color:var(--body)}
.ch-stat{display:flex;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid rgba(10,10,9,.15)}
.ch-stat b{font:900 clamp(48px,5vw,72px)/.85 var(--arch);font-stretch:62%;color:var(--flare)}
.ch-stat span{font:14px/1.4 var(--grot);color:var(--body)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.band{max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}
.band div{display:flex;flex-direction:column;gap:6px}
.band b{font:900 clamp(56px,7vw,112px)/.82 var(--arch);font-stretch:62%}
.band span{font:500 14px/1.4 var(--grot)}
.feed-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.feed-head span{font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(calc(50% - 6px),200px),1fr));gap:clamp(8px,1.2vw,14px)}
.gallery .shot{border-radius:16px}
.cs-quote{gap:22px!important}
.cs-quote .quote{font-size:clamp(30px,3.6vw,52px);line-height:1.12}
.cs-quote .client{color:rgba(237,235,229,.7);gap:16px;flex-wrap:nowrap}
.cs-quote .logo-tile{width:72px;border-radius:16px;box-shadow:none}
.next{padding:clamp(22px,3vw,36px);background:var(--panel);border-radius:28px}
.next .eyebrow{color:var(--acid)}
.next b{font:900 clamp(30px,3vw,44px)/.9 var(--arch);font-stretch:62%;text-transform:uppercase}
.next p{font:15px/1.6 var(--grot);color:var(--on-ink)}
.cta-band{max-width:1440px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--pad-x);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.cta-band .display{font-size:clamp(48px,8vw,120px)}
.cta-band .display em{font-size:clamp(44px,7vw,104px)}
.cta-band .pill{padding:17px 26px}

/* ---------- mobile (the design's 760px flip) ---------- */
@media (max-width:759px){
  .nav-in,.case .nav-in{padding-top:8px;padding-bottom:8px}
  .logo{font-size:16px;gap:8px}
  .logo .mark{width:26px;height:26px}
  .menu-btn{width:40px;height:40px;font-size:19px}
  .case .nav-cta{padding:9px 14px}
  .case .nav-in{gap:10px}
  .case .nav-links{gap:10px;font-size:12px;white-space:nowrap}
  .case .logo{font-size:14px;gap:6px}
  [id]{scroll-margin-top:56px}
  .nav-links,.nav .nav-cta{display:none}
  .case .nav-links,.case .nav .nav-cta{display:flex}
  .menu-btn{display:flex}
  .menu.open{display:flex}
  .cmp{gap:10px}
  .cmp-head{display:none}
  .cmp-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px;background:#fff;border:0;border-radius:18px 18px 18px 4px}
  .cmp-row:hover{background:#fff}
  .cmp-row .k{font:500 11px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
  .cmp-row .them{font-size:15px}
  .cmp-row .them i{display:inline}
  .cmp-row .us{font-size:18px;gap:8px}
  .bubble{padding:8px}
  .bubble>span:last-child{display:none}
  .info{grid-template-columns:1fr}
}