/* ============================================================
   TAMIR KFIR — Engineering Better Movement
   Design system inspired by landonorris.com aesthetics:
   bone/khaki ↔ deep olive themes · volt accent · serif×grotesk
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-italic.woff2") format("woff2");
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --bone:#ECEAE1;
  --bone-2:#E2DFD3;
  --stone:#C7C3B2;
  --olive:#262A1F;
  --deep:#15170F;
  --ink:#1E2018;
  --volt:#D9FF3F;
  --volt-deep:#A8C71B;
  --violet:#7B6CFF;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,76px);
  --hdr-h:84px;
  --ease:cubic-bezier(.65,.05,0,1);
  --ease-soft:cubic-bezier(.25,.1,.25,1);
}

/* theme palettes — body[data-theme] drives everything */
body[data-theme="light"]{--bg:var(--bone);--fg:var(--ink);--muted:rgba(30,32,24,.62);--line:rgba(30,32,24,.16);--card:rgba(30,32,24,.04);--accent:var(--volt-deep);}
body[data-theme="stone"]{--bg:var(--stone);--fg:var(--ink);--muted:rgba(30,32,24,.66);--line:rgba(30,32,24,.2);--card:rgba(30,32,24,.05);--accent:var(--volt-deep);}
body[data-theme="dark"]{--bg:var(--olive);--fg:var(--bone);--muted:rgba(236,234,225,.6);--line:rgba(236,234,225,.16);--card:rgba(236,234,225,.05);--accent:var(--volt);}
body[data-theme="deep"]{--bg:var(--deep);--fg:var(--bone);--muted:rgba(236,234,225,.55);--line:rgba(236,234,225,.14);--card:rgba(236,234,225,.045);--accent:var(--volt);}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html,body{width:100%}
html{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  background:var(--bg);color:var(--fg);
  transition:background-color .8s var(--ease-soft),color .8s var(--ease-soft);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.gutter{padding-left:var(--gutter);padding-right:var(--gutter)}
::selection{background:var(--volt);color:var(--ink)}

/* film grain */
.grain{
  position:fixed;inset:-40px;z-index:2000;pointer-events:none;
  background:url("../img/noise.png") repeat;background-size:132px;
  opacity:.055;mix-blend-mode:overlay;
  animation:grain 1.1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(10px,-12px)}
  60%{transform:translate(-8px,-6px)}80%{transform:translate(12px,10px)}100%{transform:translate(0,0)}
}

/* custom cursor (fine pointers only) */
.cursor{display:none}
@media (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;z-index:3000;pointer-events:none;
    width:10px;height:10px;border-radius:50%;
    background:var(--volt);mix-blend-mode:difference;
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease-soft),height .25s var(--ease-soft),opacity .25s;
    opacity:0;
  }
  body.cur-on .cursor{opacity:1}
  .cursor.is-hover{width:44px;height:44px}
}

/* ---------- logo system: masked tint + chrome sheen ---------- */
.logo-tint{
  display:block;background-color:currentColor;
  -webkit-mask:url("../img/logo-tk-mask.png") center/contain no-repeat;
  mask:url("../img/logo-tk-mask.png") center/contain no-repeat;
}
.sheen{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("../img/logo-tk-mask.png") center/contain no-repeat;
  mask:url("../img/logo-tk-mask.png") center/contain no-repeat;
  background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.55) 47%,rgba(217,255,63,.85) 52%,rgba(255,255,255,.4) 57%,transparent 66%);
  background-size:300% 100%;background-repeat:no-repeat;
  animation:sheen 5.6s cubic-bezier(.55,.1,.3,1) infinite;
}
.sheen--slow{animation-duration:8.5s}
@keyframes sheen{
  0%{background-position:140% 0}
  32%{background-position:-45% 0}
  100%{background-position:-45% 0}
}
.hero__ghost{
  position:absolute;right:-3vw;top:13vh;
  width:min(44vw,720px);
  opacity:.34;mix-blend-mode:screen;
  pointer-events:none;
}
.hero__ghost img{width:100%;height:auto;display:block}
.sheen--ghost-a{animation-duration:7s}
.sheen--ghost-b{
  animation-duration:11s;animation-delay:3.2s;
  background:linear-gradient(108deg,transparent 40%,rgba(217,255,63,.9) 50%,rgba(123,190,255,.65) 55%,transparent 64%);
  background-size:300% 100%;background-repeat:no-repeat;
}
body.no-motion .sheen{animation:none;background:none}

/* ---------- typography helpers ---------- */
.serif-i{font-family:var(--serif);font-style:italic;font-weight:340;letter-spacing:-.01em}
.eyebrow{
  font-size:.72rem;font-weight:640;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.75em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);flex:none}
h2{
  font-family:var(--sans);font-weight:790;font-stretch:112%;
  font-size:clamp(2rem,5vw,4.1rem);line-height:1.02;
  letter-spacing:-.015em;text-transform:uppercase;
  margin:.55em 0 .4em;
}
h2 .serif-i{font-weight:330;text-transform:none;font-size:1.04em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 1.9em;border-radius:999px;
  font-size:.8rem;font-weight:680;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease-soft),background-color .3s,color .3s,border-color .3s;
  will-change:transform;
}
.btn__t{position:relative;z-index:1}
.btn--volt{background:var(--volt);color:#161809;box-shadow:0 10px 34px -12px rgba(217,255,63,.55)}
.btn--volt:hover{background:#e6ff70}
.btn--ghost{border-color:var(--line);color:var(--fg);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--fg)}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark:hover{background:#000}
.btn--ink{background:#161809;color:var(--volt)}
.btn--big{padding:1.35em 2.6em;font-size:.92rem}
.linkline{
  display:inline-flex;gap:.5em;align-items:baseline;
  font-size:.78rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:.45em;
  transition:border-color .3s,color .3s;
}
.linkline:hover{border-color:var(--accent);color:var(--accent)}
.linkline i{font-style:normal;transition:transform .3s var(--ease-soft)}
.linkline:hover i{transform:translate(3px,2px)}

/* ============================================================
   PRELOADER
============================================================ */
.pre{
  position:fixed;inset:0;z-index:4000;
  background:var(--deep);color:var(--bone);
  display:flex;align-items:center;justify-content:center;
}
.pre__inner{display:flex;flex-direction:column;align-items:center;gap:18px;transform:translateY(6px)}
.pre__mark{width:116px;height:62px;color:var(--volt)}
.pre__word{font-weight:740;font-stretch:118%;letter-spacing:.42em;font-size:.82rem;text-indent:.42em}
.pre__line{width:180px;height:1px;background:rgba(236,234,225,.18);overflow:hidden}
.pre__bar{display:block;height:100%;width:100%;background:var(--volt);transform:scaleX(0);transform-origin:left}
.pre__count{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05rem;color:var(--muted)}

/* ============================================================
   HEADER
============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,2.6vw,40px);
  transition:transform .5s var(--ease);
}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr__brand{display:flex;align-items:center;gap:12px}
.hdr__logo{position:relative;display:block;width:64px}
.hdr__logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
body[data-theme="light"] .hdr__logo img,body[data-theme="stone"] .hdr__logo img{filter:drop-shadow(0 1px 4px rgba(15,17,9,.45)) contrast(1.15) brightness(.82)}
.hdr__right{display:flex;align-items:center;gap:14px}
.hdr__cta{padding:.95em 1.6em}
.burger{
  width:52px;height:52px;border-radius:14px;
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(10px);
  transition:border-color .3s,background-color .8s var(--ease-soft);
}
.burger span{display:block;width:20px;height:2px;background:var(--fg);transition:transform .4s var(--ease),translate .4s var(--ease)}
.burger span:first-child{width:14px;align-self:flex-start;margin-left:16px}
.burger:hover{border-color:var(--fg)}
body.menu-open .burger span:first-child{transform:translate(3px,4.5px) rotate(45deg);width:20px;margin-left:16px}
body.menu-open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ============================================================
   MENU OVERLAY
============================================================ */
.menu{position:fixed;inset:0;z-index:900;visibility:hidden;pointer-events:none}
.menu__bg{position:absolute;inset:0;background:var(--deep);transform:translateY(-102%)}
.menu__inner{
  position:relative;height:100%;display:flex;align-items:flex-end;justify-content:space-between;
  gap:6vw;padding:calc(var(--hdr-h) + 3vh) var(--gutter) 7vh;
  color:var(--bone);
}
.menu__list{display:flex;flex-direction:column;gap:.1em}
.menu__list a{
  display:flex;align-items:baseline;gap:.6em;
  font-family:var(--sans);font-weight:780;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vh,3.4rem);line-height:1.16;letter-spacing:-.01em;
  transition:color .3s;
}
.menu__list a em{font-family:var(--serif);font-style:italic;font-weight:300;font-size:.38em;color:var(--volt);letter-spacing:.08em}
.menu__list a:hover{color:var(--volt)}
.menu__aside{display:flex;flex-direction:column;gap:1.6em;text-align:right;padding-bottom:.6em}
.menu__tag{font-family:var(--serif);font-weight:300;font-size:1.35rem;line-height:1.3}
.menu__tag i{color:var(--volt)}
.menu__mail{font-size:.85rem;letter-spacing:.12em;border-bottom:1px solid rgba(236,234,225,.25);padding-bottom:.4em;align-self:flex-end}
.menu__mail:hover{color:var(--volt);border-color:var(--volt)}
.menu__fly{font-size:.68rem;font-weight:660;letter-spacing:.3em;color:var(--muted)}

/* ============================================================
   HERO
============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:clip}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__vid{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease-soft);
  filter:saturate(.92);
}
.hero__vid.is-live{opacity:1}
.hero__media{background:url("../img/hero-poster.jpg") center 38%/cover no-repeat #15170F}
.hero__shade{
  position:absolute;inset:0;
  background:
    linear-gradient(12deg,rgba(13,15,8,.88) 8%,rgba(13,15,8,.42) 42%,rgba(13,15,8,.18) 66%,rgba(13,15,8,.5) 100%);
}
.hero__content{position:relative;padding-bottom:clamp(88px,15vh,150px);width:100%}
.hero__title{
  text-transform:uppercase;color:var(--bone);
  line-height:.92;letter-spacing:-.018em;
  margin-bottom:.35em;
}
.hero__l{display:block;overflow:hidden}
.hero__l .hl-inner{display:inline-block;will-change:transform}
.hero__l--sans{font-weight:820;font-stretch:118%;font-size:clamp(3rem,9.6vw,9rem)}
.hero__l--serif{
  font-family:var(--serif);font-style:italic;font-weight:280;text-transform:none;
  font-size:clamp(2.6rem,8vw,7.6rem);color:var(--volt);
  margin:.02em 0 .02em .04em;
}
.hero__l--xl{font-size:clamp(3.2rem,10.6vw,10rem)}
.hero__sub{font-size:clamp(1rem,1.5vw,1.25rem);color:rgba(236,234,225,.82);max-width:34ch;margin-bottom:2.2em}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap}

/* HUD spec card */
.hud{
  position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(96px,16vh,160px);
  width:min(300px,72vw);
  padding:18px 20px 14px;
  border:1px solid rgba(236,234,225,.22);
  background:rgba(13,15,8,.38);backdrop-filter:blur(12px);
  color:var(--bone);
}
.hud::before,.hud::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--volt);
}
.hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hud__label{
  display:flex;align-items:center;gap:.7em;
  font-size:.62rem;font-weight:680;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,234,225,.66);margin-bottom:12px;
}
.hud__dot{width:7px;height:7px;border-radius:50%;background:var(--volt);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,255,63,.55)}55%{box-shadow:0 0 0 8px rgba(217,255,63,0)}}
.hud__rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  padding:.55em 0;border-top:1px solid rgba(236,234,225,.14);
  font-size:.78rem;font-weight:560;letter-spacing:.1em;text-transform:uppercase;
}
.hud__rows em{color:var(--volt);font-weight:740;font-size:.85rem}
.hud__rows b{font-weight:790}

.hero__scroll{
  position:absolute;left:clamp(16px,3vw,44px);bottom:clamp(26px,4.5vh,42px);
  display:flex;align-items:center;gap:14px;
  font-size:.64rem;font-weight:660;letter-spacing:.3em;text-transform:uppercase;color:rgba(236,234,225,.7);
}
.hero__scroll i{width:64px;height:1px;background:rgba(236,234,225,.35);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--volt);transform:translateX(-100%);animation:scrollhint 2.2s var(--ease) infinite}
@keyframes scrollhint{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(102%)}}

/* ============================================================
   MANIFESTO — word highlight sweep
============================================================ */
.manifesto{position:relative;min-height:250vh}
.manifesto__sticky{
  position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;gap:7vh;
  padding-top:14vh;padding-bottom:10vh;
}
.manifesto__sticky::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 36% 44%, rgba(217,255,63,.075), transparent 72%),
    radial-gradient(34% 30% at 64% 62%, rgba(123,108,255,.055), transparent 72%);
}
.manifesto__text{
  font-family:var(--sans);font-weight:730;font-stretch:110%;
  font-size:clamp(1.7rem,4.5vw,3.9rem);line-height:1.18;text-transform:uppercase;
  letter-spacing:-.012em;max-width:22ch;
}
.manifesto__text .w{position:relative;display:inline-block;white-space:pre}
.manifesto__text .w__bg{
  position:absolute;inset:-.06em -.08em;background:var(--volt);
  transform:scaleX(0);transform-origin:left;z-index:0;
}
.manifesto__text .w__t{position:relative;z-index:1;color:rgba(236,234,225,.22)}
.manifesto__text .w.kw .w__t{
  font-family:var(--serif);font-style:italic;font-weight:320;text-transform:none;
  font-size:1.08em;letter-spacing:0;
}
.manifesto__text .w.is-on .w__t{color:var(--bone)}
.manifesto__text .w.kw.is-on .w__t{color:var(--volt)}
.manifesto__foot{max-width:52ch;color:var(--muted);font-size:.95rem}

/* ============================================================
   PROOF — marquees + shrinking media + drawn mark
============================================================ */
.proof{position:relative;min-height:300vh}
.proof__sticky{
  position:sticky;top:0;height:100vh;overflow:clip;
  display:flex;flex-direction:column;justify-content:center;
}
.mq{white-space:nowrap;pointer-events:none;user-select:none}
.mq__inner{display:inline-flex;will-change:transform}
.mq--a{font-family:var(--serif);font-style:italic;font-weight:270;font-size:clamp(3rem,9vw,8.4rem);color:var(--bone);opacity:.92}
.mq--a .mq__inner{gap:0}
.mq--b{
  font-weight:830;font-stretch:120%;text-transform:uppercase;
  font-size:clamp(1.6rem,4.6vw,4rem);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(236,234,225,.8);
  margin-top:2vh;
}
.proof__media{
  position:absolute;inset:0;margin:auto;z-index:2;
  width:min(66vw,860px);height:min(66vh,640px);
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
.proof__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(0) sepia(0);
}
.proof__mark{
  position:absolute;inset:0;margin:auto;width:44%;height:fit-content;
  filter:drop-shadow(0 10px 36px rgba(0,0,0,.5));
}
.proof__mark img{width:100%;height:auto;display:block}
.proof__cap{
  position:absolute;left:0;bottom:-2.6em;
  font-size:.68rem;font-weight:660;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}

/* ============================================================
   DIARY — morphing collage + quote
============================================================ */
.diary{position:relative;padding:10vh 0 14vh}
.zone{display:block;height:1px}
.diary__grid{position:relative;display:flex;justify-content:space-between;gap:4vw;margin:8vh 0}
.diary__grid--b{align-items:flex-start}
.polaroid{
  --tilt:0deg;
  width:min(320px,38vw);
}
.polaroid img{
  width:100%;height:auto;
  filter:saturate(.92) contrast(1.04);
  box-shadow:0 34px 70px -30px rgba(15,17,9,.55);
}
.polaroid figcaption{
  display:flex;align-items:center;gap:.8em;
  padding-top:12px;
  font-size:.6rem;font-weight:680;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.polaroid figcaption::before{content:"";width:7px;height:7px;background:var(--accent);flex:none}
.diary__ph--1{margin-top:4vh}
.diary__ph--2{margin-top:14vh;width:min(280px,34vw)}
.diary__ph--3{width:min(360px,40vw)}
.diary__ph--4{margin-top:10vh;width:min(340px,40vw)}
.diary__ph--5{margin-top:-4vh;width:min(250px,30vw)}
.diary__quote{max-width:900px;margin:6vh auto;text-align:center}
.diary__quote p{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.3;
  letter-spacing:-.01em;
}
.diary__quote cite{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-top:2.4em;font-style:normal}
.diary__cite-name{font-family:var(--serif);font-style:italic;font-size:1.5rem;font-weight:340}
.diary__cite-scribble{width:150px;height:16px;color:var(--accent)}
.diary__cite-role{font-size:.62rem;font-weight:660;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.diary__foot{text-align:center;color:var(--muted);font-size:.95rem;letter-spacing:.04em}

/* ============================================================
   ON COURT / OFF COURT
============================================================ */
.onoff{padding:16vh 0 10vh;position:relative;overflow:clip}
.onoff__kicker{margin-bottom:9vh}
.onoff__h{margin-top:.5em}
.onoff__h .serif-i{font-size:1.05em}
.onoff__h-b{color:var(--muted)}
.onoff__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6vw;
  max-width:1100px;
}
.onoff__t{
  display:flex;align-items:baseline;gap:.35em;
  text-transform:uppercase;line-height:1;margin-bottom:.5em;
}
.onoff__t-serif{
  position:relative;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;
  font-size:clamp(2.6rem,5.6vw,4.6rem);
}
.onoff__t-sans{font-weight:830;font-stretch:118%;font-size:clamp(2.4rem,5.2vw,4.4rem);letter-spacing:-.015em}
.onoff__scribble{
  position:absolute;left:-18%;top:-26%;width:136%;height:150%;
  color:var(--volt-deep);pointer-events:none;
}
body[data-theme="dark"] .onoff__scribble,body[data-theme="deep"] .onoff__scribble{color:var(--volt)}
.onoff__col p{color:var(--muted);max-width:34ch;margin-bottom:1.6em}
.onoff__faces{
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,44px);
  margin:11vh auto 0;padding:0 var(--gutter);
}
.onoff__face{width:min(500px,44vw);will-change:transform}
.onoff__face img{aspect-ratio:4/4.6;object-fit:cover;width:100%;height:auto;filter:grayscale(1) contrast(1.04)}
.onoff__face--r img{aspect-ratio:4/5.4}
.onoff__face figcaption{
  margin-top:.9em;font-size:.62rem;font-weight:680;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.onoff__face--r figcaption{text-align:right}
.principles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;
  margin-top:12vh;padding-top:5vh;border-top:1px solid var(--line);
}
.principles em{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.4rem;color:var(--accent);
}
.principles h4{
  font-size:.95rem;font-weight:740;letter-spacing:.06em;text-transform:uppercase;margin:.7em 0 .5em;
}
.principles p{font-size:.88rem;color:var(--muted);max-width:30ch}

/* ============================================================
   PRODUCT — exploded insole
============================================================ */
.product{position:relative}
.product__pin{position:relative;min-height:100vh;display:flex;align-items:center;overflow:clip}
.product__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 30% 55%,rgba(123,108,255,.16),transparent 70%),
    radial-gradient(30% 40% at 72% 30%,rgba(217,255,63,.05),transparent 70%);
}
.product__wrap{
  width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:center;
  padding-top:12vh;padding-bottom:12vh;
}
.product__stage{position:relative;aspect-ratio:16/10.5;will-change:transform}
.product__bodywrap{position:absolute;inset:0 0 8% 0;display:flex;align-items:center;justify-content:center;will-change:transform}
.product__body{max-width:90%;max-height:86%;width:auto;height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.angles{position:absolute;left:0;bottom:0;display:flex;gap:8px;z-index:3}
.angle{
  display:flex;gap:.8em;align-items:baseline;
  padding:.62em 1.05em;border:1px solid rgba(242,239,231,.22);
  background:rgba(4,12,24,.05);backdrop-filter:blur(8px);
  font-size:.6rem;font-weight:680;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  cursor:pointer;transition:border-color .3s,color .3s;
}
.angle em{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05em}
.angle:hover{border-color:rgba(242,239,231,.5);color:var(--fg)}
.angle.is-active{border-color:var(--volt);color:var(--fg)}
.angle.is-active em{color:var(--volt)}
.scanline{
  position:absolute;left:2%;right:2%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--volt) 30%,var(--volt) 70%,transparent);
  box-shadow:0 0 18px rgba(217,255,63,.75);
  opacity:0;
}
.anno{position:absolute;display:flex;align-items:center;gap:0}
.anno__line{
  display:block;height:1px;width:clamp(40px,6vw,110px);
  background:var(--volt);transform-origin:left;position:relative;
}
.anno__line::before{
  content:"";position:absolute;left:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;
  background:var(--volt);box-shadow:0 0 12px rgba(217,255,63,.9);
}
.anno__label{
  padding:.55em .9em;border:1px solid rgba(236,234,225,.22);
  background:rgba(13,15,8,.55);backdrop-filter:blur(8px);
  font-size:.6rem;font-weight:680;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  display:flex;gap:.9em;align-items:baseline;
}
.anno__label em{color:var(--volt);font-weight:760}
.anno--1{left:2%;top:24%}
.anno--2{left:58%;top:12%}
.anno--3{right:-2%;top:58%;flex-direction:row-reverse}
.anno--3 .anno__line{transform-origin:right}
.anno--3 .anno__line::before{left:auto;right:-4px}
.anno--4{left:12%;top:82%}
.product__copy p{color:var(--muted);max-width:42ch;margin-bottom:1.3em}
.product__copy strong{color:var(--fg);font-weight:700}
.product__copy .serif-i{color:var(--accent)}
.chip{
  display:inline-flex;align-items:center;gap:.8em;
  padding:.8em 1.3em;border:1px solid var(--line);border-radius:999px;
  font-size:.68rem;font-weight:660;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
  margin-top:.6em;
}
.chip__dot{width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px rgba(123,108,255,.9)}

/* ============================================================
   METHOD — horizontal steps
============================================================ */
.method{position:relative;padding-top:14vh}
.method__head{max-width:980px;margin-bottom:7vh}
.method__lede{color:var(--muted);max-width:56ch}
.method__wrap{overflow:clip}
.method__track{
  display:flex;gap:clamp(16px,2.4vw,34px);
  padding:0 var(--gutter) 14vh;
  will-change:transform;
}
.step{
  flex:none;width:clamp(300px,34vw,460px);
  border:1px solid var(--line);background:var(--card);
  padding:clamp(22px,2.6vw,38px);
  display:flex;flex-direction:column;min-height:clamp(360px,52vh,480px);
  position:relative;
}
.step--intro{
  justify-content:flex-end;gap:1.4em;background:transparent;border-style:dashed;
  width:clamp(280px,30vw,420px);
}
.step--intro img{width:100%;height:auto;aspect-ratio:4/3.1;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.step--intro p{
  font-family:var(--sans);font-weight:740;font-stretch:112%;text-transform:uppercase;
  font-size:1.25rem;line-height:1.3;
}
.step--intro p .serif-i{text-transform:none;color:var(--accent);font-size:1.05em}
.step__n{
  font-family:var(--serif);font-style:italic;font-weight:280;
  font-size:clamp(3rem,5vw,4.6rem);line-height:1;color:var(--accent);
}
.step h3{
  font-size:1.05rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;
  margin:.9em 0 .7em;
}
.step p{font-size:.92rem;color:var(--muted);max-width:36ch}
.step__meta{
  margin-top:auto;padding-top:1.6em;
  font-size:.6rem;font-weight:660;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);
}

/* ============================================================
   SOLUTIONS — spec-card grid
============================================================ */
.sol{padding:6vh 0 12vh}
.sol__head{max-width:900px;margin-bottom:6vh}
.sol__lede{color:var(--muted);max-width:52ch}
.sol__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);
}
.card{
  position:relative;border:1px solid var(--line);background:var(--card);
  padding:10px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .35s,transform .35s var(--ease-soft),background-color .35s;
  will-change:transform;
}
.card::after{
  content:"";position:absolute;top:10px;right:10px;width:10px;height:10px;
  border-top:1px solid var(--accent);border-right:1px solid var(--accent);
  opacity:0;transition:opacity .35s;
}
.card:hover{border-color:rgba(217,255,63,.5);transform:translateY(-6px)}
.card:hover::after{opacity:1}
.card figure{overflow:hidden;aspect-ratio:4/3.4;background:#0E100A}
.card img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.92);
  transition:filter .5s var(--ease-soft),transform .8s var(--ease-soft);
}
.card:hover img{filter:grayscale(0) contrast(1);transform:scale(1.05)}
.card__meta{padding:2px 6px 10px;display:flex;flex-direction:column;gap:4px}
.card__meta em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--accent);font-size:.85rem}
.card__meta h3{font-size:.92rem;font-weight:760;letter-spacing:.1em;text-transform:uppercase}
.card__meta p{font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.sol__cta{margin-top:7vh;font-size:1rem;color:var(--muted);display:flex;gap:1.2em;align-items:baseline;flex-wrap:wrap}

/* arc divider deep→light */
.arc{
  height:clamp(70px,12vh,130px);
  background:var(--deep);
  clip-path:ellipse(74% 100% at 50% 0%);
  margin-bottom:-1px;
}

/* ============================================================
   FOUNDER
============================================================ */
.founder{padding:14vh 0 12vh;overflow:clip}
.founder__wrap{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.founder__media{position:relative;min-height:460px}
.founder__main{width:min(520px,100%);position:relative;z-index:2}
.founder__mini{position:absolute;width:180px;z-index:3}
.founder__mini img{box-shadow:0 0 0 6px var(--bg),0 30px 60px -24px rgba(15,17,9,.6);transition:box-shadow .8s var(--ease-soft)}
.founder__mini--1{right:4%;top:-6%}
.founder__mini--2{right:-2%;bottom:-8%;width:160px}
.founder__copy p{color:var(--muted);max-width:46ch;margin-bottom:1.3em}
.founder__copy .serif-i{color:var(--fg)}
.founder__principle{
  font-family:var(--serif);font-weight:320;font-style:italic;
  font-size:1.5rem;line-height:1.35;color:var(--fg)!important;
  border-left:2px solid var(--accent);padding-left:1em;margin:1.6em 0 2em!important;
}
.founder__copy .btn{margin-top:.4em}

/* ============================================================
   FINALE — volt wall
============================================================ */
.finale{position:relative}
.finale__statement{padding-top:8vh;padding-bottom:12vh;max-width:1000px}
.finale__lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.32;letter-spacing:-.008em;
  margin-top:1em;
}
.finale__lede .serif-i{color:var(--volt-deep)}
.wall{
  position:relative;overflow:clip;
  min-height:130svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;
  text-align:center;
  background:
    radial-gradient(48% 26% at 50% 64%,rgba(217,255,63,.18),transparent 72%),
    linear-gradient(180deg,var(--bone) 0%,var(--stone) 9%,#70745A 20%,var(--olive) 36%,#101207 60%,var(--deep) 100%);
}
.wall__fly{
  position:relative;z-index:2;
  text-transform:uppercase;color:var(--bone);
  line-height:.92;letter-spacing:-.02em;
  padding-top:26vh;
}
.wall__fly-a{display:block;font-family:var(--serif);font-style:italic;font-weight:300;text-transform:none;font-size:clamp(3rem,9vw,8.6rem);color:var(--volt)}
.wall__fly-b{display:block;font-weight:840;font-stretch:120%;font-size:clamp(3.6rem,12vw,11.4rem)}
.wall__fly-b em{color:var(--volt)}
.wall__insole{
  position:relative;z-index:1;width:min(820px,86vw);margin-top:-2vh;
  filter:drop-shadow(0 60px 80px rgba(0,0,0,.65)) drop-shadow(0 0 70px rgba(217,255,63,.22));
  will-change:transform;
}
.wall__cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.4em;padding-bottom:10vh}
.wall__note{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(236,234,225,.66)}

/* ============================================================
   FOOTER
============================================================ */
.foot{background:var(--deep);color:var(--bone);padding-top:2vh}
.foot__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:5vw;
  padding-top:6vh;padding-bottom:6vh;
  border-top:1px solid rgba(236,234,225,.12);
}
.foot__mark{width:74px;height:40px;color:var(--volt)}
.foot__name{font-weight:790;font-stretch:118%;letter-spacing:.34em;margin:14px 0 10px;font-size:.9rem}
.foot__tag{font-size:.88rem;color:rgba(236,234,225,.55);max-width:36ch}
.foot__col{display:flex;flex-direction:column;gap:.7em}
.foot__col h4{
  font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(236,234,225,.45);margin-bottom:.6em;
}
.foot__col a{font-size:.92rem;color:rgba(236,234,225,.85);width:fit-content;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.foot__col a:hover{color:var(--volt);border-color:var(--volt)}
.foot__legal{
  display:flex;justify-content:space-between;gap:2em;flex-wrap:wrap;
  padding-top:2.4vh;padding-bottom:3.4vh;
  border-top:1px solid rgba(236,234,225,.1);
  font-size:.72rem;color:rgba(236,234,225,.45);letter-spacing:.06em;
}
.foot__fly{letter-spacing:.3em}

/* ============================================================
   REVEAL PRIMITIVES (JS sets initial states; CSS = final state)
============================================================ */
.split-line{display:block;overflow:hidden}
.split-line>div{will-change:transform}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1100px){
  .sol__grid{grid-template-columns:repeat(3,1fr)}
  .product__wrap{grid-template-columns:1fr;gap:7vh}
  .product__stage{max-width:720px;margin:0 auto;width:100%}
  .founder__wrap{grid-template-columns:1fr;gap:9vh}
}
@media (max-width:820px){
  :root{--hdr-h:70px}
  .hdr__cta{display:none}
  .hdr__mark{width:34px;height:37px}
  .menu__inner{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:7vh}
  .menu__aside{text-align:left;align-items:flex-start}
  .menu__mail{align-self:flex-start}
  .hero{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .hero__content{padding-top:calc(var(--hdr-h) + 16px)}
  .hero__media{position:absolute}
  .hud{position:static;width:auto;margin:10px var(--gutter) 72px}
  .hero__content{padding-bottom:30px}
  .hero__l--sans{font-size:clamp(2.2rem,10vw,3.4rem);font-stretch:110%}
  .hero__l--serif{font-size:clamp(2rem,9vw,3rem)}
  .hero__l--xl{font-size:clamp(2.5rem,11.6vw,3.9rem)}
  .hero__content{padding-bottom:64px}
  .hero__scroll{display:none}
  .manifesto{min-height:210vh}
  .manifesto__text{max-width:100%}
  .proof{min-height:260vh}
  .proof__media{width:82vw;height:56vh}
  .proof__cap{bottom:-3.2em}
  .diary__grid{flex-wrap:wrap;justify-content:center;gap:26px}
  .polaroid{width:min(300px,72vw)!important;margin:0!important}
  .onoff__grid{grid-template-columns:1fr;gap:7vh}
  .onoff__faces{flex-direction:column;align-items:center;gap:30px}
  .onoff__face{width:min(440px,86vw)!important}
  .principles{grid-template-columns:1fr;gap:6vh}
  .method__track{flex-direction:column;padding-bottom:8vh}
  .step{width:100%;min-height:0}
  .step--intro{width:100%;min-height:0;flex-direction:row;align-items:center;justify-content:center;text-align:center;gap:18px;border-style:dashed;padding:26px 18px}
  .step--intro img{display:none}
  .sol__grid{grid-template-columns:repeat(2,1fr)}
  .founder__media{min-height:0;padding:0 0 90px}
  .founder__main{margin:0 auto}
  .founder__mini{width:140px}
  .founder__mini--1{right:-2%;top:-5%}
  .founder__mini--2{right:6%;bottom:0}
  .foot__grid{grid-template-columns:1fr;gap:5vh}
  .wall{min-height:110svh}
  .angles{position:static;justify-content:center;margin-top:16px}
  .anno__label{font-size:.5rem;letter-spacing:.16em}
  .anno__line{width:26px}
  .anno--3{right:0}
}
@media (max-width:480px){
  .sol__grid{grid-template-columns:1fr 1fr;gap:10px}
  .card__meta h3{font-size:.78rem}
  .card__meta p{display:none}
  .btn{padding:1em 1.5em}
}

/* ============================================================
   QA MODE + REDUCED MOTION — everything visible, no motion
============================================================ */
body.no-motion .grain{animation:none}
body.no-motion .hero__scroll i::after{animation:none}
body.no-motion .hud__dot{animation:none}
body.no-motion .manifesto{min-height:0}
body.no-motion .manifesto__text .w__t{color:var(--fg)}
body.no-motion .manifesto__text .w.kw .w__t{color:var(--accent)}
body.no-motion .proof{min-height:0}
body.no-motion .proof__sticky{position:relative;height:auto;padding:10vh 0}
body.no-motion .proof__media{position:relative;inset:auto;margin:5vh auto}
body.no-motion .pre{display:none}
@media (prefers-reduced-motion:reduce){
  .grain,.hero__scroll i::after,.hud__dot{animation:none!important}
}

/* ============================================================
   INNER PAGES LAYER
============================================================ */
/* page transition veil */
.veil{position:fixed;inset:-1px 0;z-index:1200;background:var(--deep);pointer-events:auto}
.veil::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:34px;transform:translate(-50%,-50%);background:url("../img/logo-tk-silver.png") center/contain no-repeat;opacity:.5}
body.no-motion .veil{display:none}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:.7em;align-items:center;font-size:.72rem;font-weight:660;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(1.2rem,3vh,2.2rem)}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;color:var(--accent)}

/* page hero */
.phero{position:relative;min-height:82svh;display:flex;align-items:flex-end;overflow:clip;padding-top:calc(var(--hdr-h) + 6vh);padding-bottom:clamp(2.6rem,7vh,5rem)}
.phero__media{position:absolute;inset:0;z-index:0}
.phero__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.phero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,23,15,.42) 0%,rgba(21,23,15,.18) 42%,rgba(21,23,15,.86) 100%)}
.phero__content{position:relative;z-index:1;width:100%}
.phero__title{font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:-.028em;line-height:.95;font-size:clamp(2.7rem,9vw,8.2rem)}
.phero__title .pl{display:block;overflow:clip}
.phero__title .hl-inner{display:inline-block;will-change:transform}
.phero__title .serif-i{text-transform:none;font-weight:320;letter-spacing:-.015em}
.phero__sub{max-width:58ch;color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.55;margin-top:clamp(1.1rem,2.6vh,1.9rem)}
.phero--media .phero__sub{color:rgba(236,234,225,.78)}
.phero__scroll{position:absolute;right:var(--gutter);bottom:clamp(2.6rem,7vh,5rem);z-index:1;display:flex;align-items:center;gap:.7em;font-size:.68rem;font-weight:660;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.phero__scroll i{width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.phero__scroll i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--accent);animation:drip 1.8s var(--ease-soft) infinite}
@keyframes drip{to{top:110%}}

/* generic content section */
.sect{padding-top:clamp(4rem,11vh,8.5rem);padding-bottom:clamp(4rem,11vh,8.5rem);position:relative}
.sect--tight{padding-top:clamp(2.4rem,6vh,4.5rem);padding-bottom:clamp(2.4rem,6vh,4.5rem)}
.sect--line{border-top:1px solid var(--line)}
.sect__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.2rem,6vw,7rem);align-items:start}
.sect__aside{position:sticky;top:calc(var(--hdr-h) + 2.2rem)}
.sect__h{font-weight:760;font-stretch:108%;letter-spacing:-.02em;line-height:1.04;font-size:clamp(1.9rem,3.8vw,3.6rem);max-width:16ch;text-wrap:balance}
.sect__h .serif-i{font-weight:330}
.sect__body>p{max-width:62ch;color:var(--muted);font-size:clamp(1rem,1.35vw,1.18rem);margin-bottom:1.2em}
.sect__body>p strong{color:var(--fg);font-weight:680}
.sect__body>p em.serif-i{color:var(--fg)}
.lead{font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.4;font-weight:540;letter-spacing:-.012em;color:var(--fg)!important;max-width:38ch!important}

/* poetic stacked lines */
.flow{display:grid;gap:.35em;margin:1.6em 0 2em;padding-left:1.4em;border-left:2px solid var(--accent)}
.flow li{font-family:var(--serif);font-style:italic;font-weight:330;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.35;color:var(--fg)}
.flow li b{font-weight:640}

/* numbered / bulleted rows */
.rows{border-top:1px solid var(--line);margin-top:1.4em}
.rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.6vw,2.4rem);align-items:baseline;padding:clamp(1rem,2.4vh,1.6rem) 0;border-bottom:1px solid var(--line)}
.rows em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--accent);font-size:.95rem;min-width:2ch}
.rows h4{font-weight:720;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.01em}
.rows p{color:var(--muted);font-size:.98rem;max-width:58ch;margin-top:.25em}

/* full-bleed media band w/ parallax img */
.band{position:relative;height:clamp(320px,68vh,720px);overflow:clip}
.band img{width:100%;height:126%;object-fit:cover;will-change:transform}
.band__cap{position:absolute;left:var(--gutter);bottom:1.4rem;z-index:1;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(236,234,225,.85);background:rgba(21,23,15,.55);padding:.55em 1em;backdrop-filter:blur(6px)}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,3rem);margin-top:clamp(2rem,5vh,3.4rem)}
.stats li{border-top:1px solid var(--line);padding-top:1rem}
.stats b{display:block;font-weight:800;font-stretch:112%;font-size:clamp(2.2rem,5vw,4.4rem);letter-spacing:-.03em;line-height:1;color:var(--fg)}
.stats b i{font-style:normal;color:var(--accent)}
.stats span{display:block;margin-top:.4em;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* fame / talents grid */
.fame-head{display:flex;align-items:baseline;gap:1.2rem;margin:clamp(2.6rem,7vh,4.6rem) 0 clamp(1.2rem,3vh,2rem)}
.fame-head em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--accent);font-size:1rem}
.fame-head h3{font-weight:780;font-stretch:110%;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(1.5rem,3.4vw,2.8rem)}
.fame-head i{flex:1;height:1px;background:var(--line)}
.fame{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,42vw),1fr));gap:clamp(14px,2.2vw,28px)}
.fame .polaroid{margin:0}
.fame .polaroid img{aspect-ratio:4/5;object-fit:cover;object-position:center top}

/* end CTA band */
.endcta{text-align:center;padding-top:clamp(5rem,15vh,10rem);padding-bottom:clamp(5rem,15vh,10rem);position:relative;overflow:clip}
.endcta__k{margin-bottom:1.2rem;justify-content:center;display:inline-flex}
.endcta__h{font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:-.03em;line-height:.96;font-size:clamp(2.4rem,7.4vw,6.6rem);margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.endcta__h .serif-i{text-transform:none;font-weight:320}
.endcta__sub{color:var(--muted);max-width:52ch;margin:0 auto clamp(1.8rem,4.5vh,2.8rem);font-size:clamp(1rem,1.4vw,1.2rem)}
.endcta__row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* mini next-page footer nav */
.nextp{display:flex;justify-content:space-between;align-items:center;gap:2rem;border-top:1px solid var(--line);padding-top:clamp(1.6rem,4vh,2.6rem);padding-bottom:clamp(1.6rem,4vh,2.6rem)}
.nextp span{font-size:.72rem;font-weight:660;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.nextp a{font-weight:780;font-stretch:110%;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(1.3rem,3.2vw,2.4rem);transition:color .3s}
.nextp a:hover{color:var(--accent)}
.nextp a i{font-style:normal;color:var(--accent)}

/* menu with page links (11 items) */
.menu__list--pages a{font-size:clamp(1.15rem,4.2vh,2.5rem);line-height:1.22}

/* responsive */
@media (max-width:900px){
  .sect__grid{grid-template-columns:minmax(0,1fr)}
  .sect__aside{position:static;margin-bottom:.4rem}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .phero{min-height:66svh}
  .phero__scroll{display:none}
  .fame .polaroid{width:auto!important}
  .fame .polaroid figcaption{font-size:.55rem;letter-spacing:.12em}
}
@media (min-width:901px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ============================================================
   RTL LAYER — Hebrew pages (html[dir=rtl])
   English display headlines stay LTR; Hebrew body flows RTL
   ============================================================ */
[dir=rtl] body{font-family:var(--sans)}
[dir=rtl] .hero__line,[dir=rtl] .phero__title,[dir=rtl] .endcta__h,[dir=rtl] .manifesto__text,
[dir=rtl] .wall__word,[dir=rtl] .mq__inner,[dir=rtl] .stats b,[dir=rtl] .fame-head h3,
[dir=rtl] .sect__h,[dir=rtl] .sol__cardtitle,[dir=rtl] .flow,[dir=rtl] .founder__h,
[dir=rtl] .nextp a,[dir=rtl] .brandline,[dir=rtl] .wall__fly,[dir=rtl] .menu__fly,[dir=rtl] .foot__fly{direction:ltr}
[dir=rtl] .phero__title,[dir=rtl] .sect__h,[dir=rtl] .endcta__h,[dir=rtl] .fame-head h3{text-align:right}
[dir=rtl] .phero--media .phero__title,[dir=rtl] .phero__title{text-align:right}
[dir=rtl] .eyebrow,[dir=rtl] .crumbs,[dir=rtl] .band__cap,[dir=rtl] .stats span,
[dir=rtl] .hud__label,[dir=rtl] .polaroid figcaption,[dir=rtl] .foot__tag,[dir=rtl] .menu__label,
[dir=rtl] .nextp span,[dir=rtl] .btn{letter-spacing:.05em}
[dir=rtl] .flow{border-left:0;border-right:2px solid var(--accent);padding-left:0;padding-right:clamp(1.2rem,3vw,2.4rem)}
[dir=rtl] .band__cap{left:auto;right:var(--gutter)}
[dir=rtl] .phero__scroll{right:auto;left:var(--gutter)}
[dir=rtl] .method__track{direction:ltr}
[dir=rtl] .step{direction:rtl;text-align:right}
[dir=rtl] .step--intro{direction:ltr}
[dir=rtl] .rows li{text-align:right}
[dir=rtl] .menu__list--pages a{letter-spacing:0}
[dir=rtl] .hud{direction:rtl}
@media (min-width:901px){
  [dir=rtl] .hero__hud{right:auto;left:clamp(16px,3vw,44px)}
}
[dir=rtl] .linkline i,[dir=rtl] .nextp a i{transform:scaleX(-1);display:inline-block}
[dir=rtl] .linkline:hover i{transform:scaleX(-1) translate(-3px,2px)}
[dir=rtl] .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- mobile founder photo deck ---------- */
@media (max-width:820px){
  .founder__media.deck{padding:0 0 54px}
  .deck .polaroid{
    position:absolute!important;left:50%!important;right:auto!important;top:0!important;bottom:auto!important;
    width:min(330px,84vw)!important;margin:0!important;
    touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  }
  .deck .polaroid img{width:100%;aspect-ratio:4/4.3;object-fit:cover;-webkit-user-drag:none}
  .deck .founder__mini img{box-shadow:0 26px 60px -26px rgba(15,17,9,.6)}
  .deck .polaroid figcaption{opacity:0;transition:opacity .35s}
  .deck .polaroid.is-front figcaption{opacity:1}
  .deck__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
  .deck__dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
  .deck__dots i.on{background:var(--accent);transform:scale(1.3)}
}
@media (min-width:821px){.deck__dots{display:none}}

/* ---------- solutions zigzag ---------- */
.sect--flip .sect__grid{direction:rtl}
.sect--flip .sect__grid>*{direction:ltr}
[dir="rtl"] .sect--flip .sect__grid{direction:ltr}
[dir="rtl"] .sect--flip .sect__grid>*{direction:rtl}

/* solution hero videos */
.phero__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}

/* ---------- solutions index: hover video preview / mobile snap strip ---------- */
.solx{position:relative}
.solx__list{display:grid;grid-template-columns:1fr 1fr;column-gap:5vw}
.solx__row{
  position:relative;display:flex;align-items:baseline;gap:1em;
  padding:1.02em 4px;border-bottom:1px solid var(--line);
}
.solx__row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent);transition:width .55s var(--ease);
}
.solx__row:hover::after{width:100%}
.solx__row em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--accent);font-size:.85rem;min-width:2.2ch}
.solx__row h3{
  font-size:clamp(1rem,1.45vw,1.4rem);font-weight:780;font-stretch:112%;
  text-transform:uppercase;letter-spacing:.02em;
  transition:transform .35s var(--ease-soft),color .35s;
}
.solx__row:hover h3{transform:translateX(8px);color:var(--fg)}
[dir="rtl"] .solx__row:hover h3{transform:translateX(-8px)}
.solx__tag{margin-inline-start:auto;font-size:.66rem;color:var(--muted);letter-spacing:.03em;max-width:22ch;text-align:end}
.solx__arrow{font-style:normal;color:var(--muted);transition:transform .35s var(--ease-soft),color .35s}
.solx__row:hover .solx__arrow{color:var(--accent);transform:translateX(4px)}
[dir="rtl"] .solx__row:hover .solx__arrow{transform:translateX(-4px)}
.solx__preview{
  position:fixed;left:0;top:0;z-index:80;width:min(400px,27vw);aspect-ratio:16/9;
  pointer-events:none;opacity:0;transform:scale(.92);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft);
  will-change:transform;
}
.solx__preview.on{opacity:1;transform:scale(1)}
.solx__preview video{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
@media (max-width:820px){
  .solx__list{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    padding:4px var(--gutter) 20px;margin:0 calc(var(--gutter)*-1);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .solx__list::-webkit-scrollbar{display:none}
  .solx.gutter{padding-left:0;padding-right:0}
  .solx__row{
    flex:0 0 70vw;scroll-snap-align:center;
    flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.4em;
    aspect-ratio:4/4.7;padding:18px;border:1px solid var(--line);border-bottom:1px solid var(--line);
    background:linear-gradient(185deg,rgba(10,12,6,.05) 30%,rgba(10,12,6,.82) 82%),var(--bg) center/cover no-repeat;
  }
  .solx__row::after{display:none}
  .solx__row h3{font-size:1.15rem;color:var(--bone)}
  .solx__row em{font-size:.9rem}
  .solx__tag{margin-inline-start:0;text-align:start;color:rgba(242,239,231,.72)}
  .solx__arrow{display:none}
  .solx__preview{display:none}
}

/* mobile menu overflow fix: never clip items above the viewport */
@media (max-width:820px){
  .menu__inner{
    justify-content:flex-start;
    gap:4vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-top:calc(var(--hdr-h) + 1.5vh);
    padding-bottom:max(5vh, env(safe-area-inset-bottom));
  }
  .menu__list a{font-size:clamp(1.05rem,3vh,1.55rem);line-height:1.3}
  .menu__list a em{font-size:.45em}
  .menu__tag{font-size:1.15rem}
  .menu__aside{gap:1.1em;padding-bottom:0}
}

/* mobile: compact the on/off faces, the portrait was eating a full screen of scroll */
@media (max-width:820px){
  .onoff{padding:10vh 0 8vh}
  .onoff__kicker{margin-bottom:6vh}
  .onoff__faces{gap:22px}
  .onoff__face{width:min(320px,72vw)!important}
  .onoff__face img{aspect-ratio:4/4.2}
  .onoff__face--r img{aspect-ratio:4/4.6;object-position:50% 18%}
}

/* solutions zigzag: image + title are links; solution hero eyebrow = breadcrumbs */
.sect__hlink,.sect__medialink{display:block;color:inherit}
.phero__eyebrow a{color:inherit;transition:color .3s}
.phero__eyebrow a:hover{color:var(--accent)}

/* ============================================================
   WP THEME OVERRIDES (2026-07-05) — post-launch design tweaks.
   Appended after the static baseline; edit here, not above.
   ============================================================ */

/* --- generic small trademark mark --- */
.tm{font-size:.42em;vertical-align:super;letter-spacing:.02em;font-style:normal;font-weight:600}

/* --- hero ticker strip (marquee under the hero) --- */
.hero-ticker{
  position:relative;z-index:2;overflow:clip;white-space:nowrap;
  pointer-events:none;user-select:none;
  background:var(--deep);
  border-top:1px solid rgba(236,234,225,.12);
  border-bottom:1px solid rgba(236,234,225,.12);
  padding:.9em 0;
}
.hero-ticker .mq__inner{display:inline-flex}
.hero-ticker span{font-size:.82rem;font-weight:660;letter-spacing:.28em;text-transform:uppercase;color:var(--bone)}
.hero-ticker span b{font-weight:790;color:var(--volt)}
.hero-ticker span i{font-style:normal;color:var(--volt);margin:0 1.15em}

/* --- header: bigger logo + tagline next to it --- */
.hdr__logo{width:86px}
.hdr__tagline{
  font-size:.72rem;font-weight:680;letter-spacing:.3em;text-transform:uppercase;
  color:var(--fg);opacity:.85;white-space:nowrap;
}
@media (max-width:760px){.hdr__tagline{display:none}}

/* --- diary foot quote: larger --- */
.diary__foot{font-size:1.3rem}

/* --- "+28%" bump for the site's smallest text styles --- */
.eyebrow{font-size:.92rem}
.linkline{font-size:1rem}
.menu__mail{font-size:1.09rem}
.menu__fly{font-size:.87rem}
.hud__label{font-size:.79rem}
.hud__rows li{font-size:1rem}
.hud__rows em{font-size:1.09rem}
.hero__scroll{font-size:.82rem}
.phero__scroll{font-size:.87rem}
.proof__cap{font-size:.87rem}
.polaroid figcaption{font-size:.77rem}
.diary__cite-role{font-size:.79rem}
.onoff__face figcaption{font-size:.79rem}
.onoff__col p{font-size:1.28em;max-width:36ch}
.principles p{font-size:1.13rem;max-width:32ch}
.angle{font-size:.77rem}
.anno__label{font-size:.77rem}
.chip{font-size:.87rem}
.step__meta{font-size:.77rem}
.solx__tag{font-size:.84rem}
.wall__note{font-size:1.02rem}
.foot__tag{font-size:1.13rem;max-width:38ch}
.foot__col h4{font-size:.79rem}
.foot__legal{font-size:.92rem}
.crumbs{font-size:.92rem}
.band__cap{font-size:.96rem}
@media (max-width:900px){.anno__label{font-size:.64rem}}

/* --- method heading: keep "Dynamic Motion Control™" on one line --- */
.method__head h2 .serif-i{white-space:nowrap}
@media (max-width:640px){.method__head h2 .serif-i{white-space:normal}}

/* --- solutions heading: “you” sized to match the sans words --- */
.sol__head h2 .serif-i{font-size:1.18em}

/* --- wall finale: fonts swapped between the two lines --- */
.wall__fly-a{
  font-family:var(--sans);font-style:normal;font-weight:840;font-stretch:120%;
  text-transform:uppercase;
}
.wall__fly-b{
  font-family:var(--serif);font-style:italic;font-weight:300;font-stretch:100%;
  text-transform:none;
}

/* --- manifesto foot: larger (2026-07-05) --- */
.manifesto__foot{font-size:1.3rem;max-width:56ch}

/* --- solutions hub: orbital explorer + jump menu (2026-07-05) --- */
@property --oa{syntax:'<angle>';inherits:false;initial-value:0deg}
.solhub-orbit{position:relative;padding:clamp(3rem,9vh,6.5rem) 0 clamp(2.4rem,6vh,4.5rem);display:flex;flex-direction:column;align-items:center;gap:2.4rem;overflow:clip}
.orbit{--rA:clamp(96px,15vw,150px);--rB:clamp(160px,25vw,250px);--chip:clamp(44px,6.6vw,62px);position:relative;width:calc(var(--rB)*2 + var(--chip) + 18px);aspect-ratio:1;flex:none}
.orbit::before,.orbit::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(236,234,225,.11);border-radius:50%;pointer-events:none}
.orbit::before{width:calc(var(--rA)*2);height:calc(var(--rA)*2)}
.orbit::after{width:calc(var(--rB)*2);height:calc(var(--rB)*2)}
.orbit__chip{position:absolute;left:50%;top:50%;width:var(--chip);aspect-ratio:1;border-radius:50%;z-index:1;
  transform:translate(-50%,-50%) rotate(var(--oa)) translateY(calc(var(--r)*-1)) rotate(calc(var(--oa)*-1));
  animation:tk-orbit var(--dur,90s) linear infinite}
.orbit__chip--a{--r:var(--rA);--dur:70s}
.orbit__chip--b{--r:var(--rB);--dur:115s;animation-direction:reverse}
@keyframes tk-orbit{from{--oa:var(--a0,0deg)}to{--oa:calc(var(--a0,0deg) + 360deg)}}
.orbit:hover .orbit__chip,.orbit:focus-within .orbit__chip{animation-play-state:paused}
.orbit__chip img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1px solid rgba(236,234,225,.28);filter:saturate(.8) contrast(1.02);box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .35s var(--ease-soft),filter .35s,border-color .35s}
.orbit__chip:hover img,.orbit__chip:focus-visible img{transform:scale(1.16);filter:saturate(1.05);border-color:var(--volt)}
.orbit__tip{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(4px);white-space:nowrap;font-size:.68rem;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);background:rgba(13,15,8,.94);border:1px solid rgba(236,234,225,.16);padding:.5em .95em;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:6}
.orbit__chip:hover .orbit__tip,.orbit__chip:focus-visible .orbit__tip{opacity:1;transform:translateX(-50%) translateY(0)}
.orbit__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(96px,13vw,130px);aspect-ratio:1;border-radius:50%;z-index:2;cursor:pointer;border:1px solid rgba(217,255,63,.4);background:radial-gradient(circle at 34% 30%,rgba(236,234,225,.1),rgba(13,15,8,.94) 62%);box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease-soft),border-color .35s,box-shadow .35s}
.orbit__core:hover,.orbit__core:focus-visible{transform:translate(-50%,-50%) scale(1.06);border-color:var(--volt);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 44px rgba(217,255,63,.26)}
.orbit__mark{width:56%;aspect-ratio:527/280;color:var(--volt)}
.orbit__core::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(217,255,63,.35);animation:tk-pulse 2.6s var(--ease-soft) infinite}
@keyframes tk-pulse{0%{transform:scale(.86);opacity:0}30%{opacity:1}100%{transform:scale(1.24);opacity:0}}
.orbit__hint{font-size:.87rem;font-weight:660;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 1rem}

.solnav{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.solnav.is-open{visibility:visible;pointer-events:auto}
.solnav__bg{position:absolute;inset:0;background:rgba(8,9,5,.74);backdrop-filter:blur(14px);opacity:0;transition:opacity .35s}
.solnav.is-open .solnav__bg{opacity:1}
.solnav__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(18px);width:min(880px,92vw);max-height:86svh;overflow:auto;background:linear-gradient(180deg,rgba(21,23,15,.98),rgba(13,15,8,.98));border:1px solid rgba(236,234,225,.14);padding:clamp(1.6rem,4vw,2.8rem);opacity:0;transition:opacity .35s,transform .45s var(--ease-soft)}
.solnav.is-open .solnav__panel{opacity:1;transform:translate(-50%,-50%)}
.solnav__head{display:flex;align-items:center;gap:1.4em;margin-bottom:1.6rem}
.solnav__head h3{font-weight:760;font-stretch:110%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.3rem,2.6vw,2rem)}
.solnav__close{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,234,225,.25);color:var(--bone);background:transparent;cursor:pointer;font-size:1rem;transition:border-color .3s,color .3s,transform .3s}
.solnav__close:hover{border-color:var(--volt);color:var(--volt);transform:rotate(90deg)}
.solnav__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.15rem 2.4rem;padding:0;margin:0}
@media (max-width:640px){.solnav__list{grid-template-columns:1fr}}
.solnav__list a{display:flex;align-items:center;gap:1em;padding:.55em .4em;border-bottom:1px solid rgba(236,234,225,.08);color:var(--bone);transition:color .25s}
.solnav__list em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--accent);font-size:.95rem;min-width:2.2ch}
.solnav__list span{font-weight:640;letter-spacing:.04em;font-size:.98rem;text-transform:uppercase}
.solnav__list img{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-left:auto;flex:none;filter:saturate(.8);border:1px solid rgba(236,234,225,.18);transition:transform .3s,filter .3s,border-color .3s}
.solnav__list a:hover{color:var(--volt)}
.solnav__list a:hover img{transform:scale(1.12);filter:saturate(1.05);border-color:var(--volt)}
html.solnav-lock,html.solnav-lock body{overflow:hidden!important}

.solfab{position:fixed;right:clamp(14px,2.6vw,30px);bottom:clamp(14px,3vh,30px);z-index:110;width:62px;height:62px;border-radius:50%;border:1px solid rgba(217,255,63,.45);background:radial-gradient(circle at 34% 30%,rgba(236,234,225,.1),rgba(13,15,8,.96) 62%);box-shadow:0 16px 40px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease-soft),border-color .3s}
.solfab.is-show{opacity:1;transform:none;pointer-events:auto}
.solfab:hover{border-color:var(--volt)}
.solfab__mark{width:52%;aspect-ratio:527/280;color:var(--volt)}
.solhub-sect{scroll-margin-top:70px}
@media (prefers-reduced-motion:reduce){
  .orbit__chip{animation:none}
  .orbit__core::after{animation:none}
}

/* --- hub hero: orbit beside the title on desktop (2026-07-05) --- */
.solhub-orbit--hero{padding:clamp(2.4rem,6vh,4rem) 0 0;gap:1.7rem}
.solhub-orbit--hero .orbit{--rA:clamp(84px,9.5vw,124px);--rB:clamp(142px,16vw,212px);--chip:clamp(40px,4.4vw,54px)}
.solhub-orbit--hero .orbit__core{width:clamp(84px,9vw,112px)}
.solhub-orbit--hero .orbit__hint{font-size:.74rem;letter-spacing:.22em}
@media (max-width:999px){
  .solhub-orbit--hero{margin-inline:auto}
}
@media (min-width:1000px){
  .phero--hub__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(1.5rem,4vw,4rem)}
  .solhub-orbit--hero{padding:0;margin-bottom:clamp(.4rem,3vh,2rem)}
}

/* --- desktop: ticker visible inside the first viewport (2026-07-05) --- */
@media (min-width:1000px){
  /* hero + solutions strip share the first viewport; strip is 3 rows here, 2 rows ≥1200 */
  .hero{min-height:calc(100svh - 112px)}
  /* solutions hero: keep the orbit hint clear of the SCROLL indicator */
  .solhub-orbit--hero{margin-bottom:clamp(2.8rem,5vh,3.8rem)}
}

/* --- hero film button + full-film lightbox (2026-07-05) --- */
.hero__film{position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(26px,4.5vh,42px);z-index:3;display:flex;align-items:center;gap:1em;background:transparent;border:0;cursor:pointer;color:var(--bone)}
.hero__film-disc{position:relative;width:clamp(56px,6vw,72px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(217,255,63,.5);background:rgba(13,15,8,.42);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--volt);transition:transform .35s var(--ease-soft),border-color .3s,background .3s;flex:none}
.hero__film-disc svg{width:34%;margin-left:6%}
.hero__film-disc::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(217,255,63,.35);animation:tk-pulse 2.6s var(--ease-soft) infinite}
.hero__film:hover .hero__film-disc,.hero__film:focus-visible .hero__film-disc{transform:scale(1.08);border-color:var(--volt);background:rgba(13,15,8,.6)}
.hero__film-label{font-size:.8rem;font-weight:680;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.5)}

.filmbox{position:fixed;inset:0;z-index:130;visibility:hidden;pointer-events:none}
.filmbox.is-open{visibility:visible;pointer-events:auto}
.filmbox__bg{position:absolute;inset:0;background:rgba(5,6,3,.86);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.filmbox.is-open .filmbox__bg{opacity:1}
.filmbox__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);width:min(1100px,94vw);opacity:0;transition:opacity .35s,transform .45s var(--ease-soft)}
.filmbox.is-open .filmbox__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
.filmbox__panel video{width:100%;aspect-ratio:16/9;display:block;background:#000;border:1px solid rgba(236,234,225,.16);box-shadow:0 40px 120px rgba(0,0,0,.65)}
.filmbox__close{position:absolute;right:0;top:-56px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,234,225,.3);color:var(--bone);background:rgba(13,15,8,.5);cursor:pointer;font-size:1rem;transition:border-color .3s,color .3s,transform .3s}
.filmbox__close:hover{border-color:var(--volt);color:var(--volt);transform:rotate(90deg)}
html.filmbox-lock,html.filmbox-lock body{overflow:hidden!important}

/* --- align "Watch the film" with the hero CTA row (2026-07-05) ---
   CTA row bottom sits clamp(88px,15vh,150px) above the hero bottom
   (.hero__content padding). Match centers: + half CTA height (~25px)
   − half disc height. */
.hero__film{bottom:calc(clamp(88px,15vh,150px) + 25px - clamp(56px,6vw,72px)/2)}

/* --- mobile solutions deck: video cards (2026-07-05) --- */
.solx__vid{display:none}
@media (max-width:820px){
  .solx__row{overflow:clip}
  .solx__vid{
    display:block;position:absolute;inset:0;z-index:0;
    width:100%;height:100%;object-fit:cover;
    pointer-events:none;filter:saturate(.9);
  }
  /* legibility gradient above the video (the desktop hover-underline ::after
     is display:none here, so it is free to reuse) */
  .solx__row::after{
    content:"";display:block;position:absolute;inset:0;z-index:1;
    height:auto;width:auto;background:linear-gradient(185deg,rgba(10,12,6,.05) 30%,rgba(10,12,6,.82) 82%);
    pointer-events:none;transition:none;
  }
  .solx__row>em,.solx__row>h3,.solx__row>.solx__tag{position:relative;z-index:2}
}

/* --- per-card caption position on mobile deck + contact box (2026-07-05) --- */
@media (max-width:820px){
  .solx__row--captop{justify-content:flex-start}
  .solx__row--captop::after{background:linear-gradient(5deg,rgba(10,12,6,.05) 30%,rgba(10,12,6,.82) 82%)}
}
.cbox{
  border:1px solid var(--line);background:var(--card);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  display:flex;flex-direction:column;gap:1.4rem;max-width:560px;
}
.cbox__text{color:var(--muted);max-width:44ch}
.cbox__mail{
  font-weight:680;letter-spacing:.06em;font-size:1.15rem;color:var(--fg);
  width:fit-content;border-bottom:1px solid var(--line);padding-bottom:.35em;
  transition:color .3s,border-color .3s;
}
.cbox__mail:hover{color:var(--volt);border-color:var(--volt)}
.cbox__mail i{font-style:normal}
.cbox__row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cbox__icons{display:flex;gap:.8rem}
.cbox__icon{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);color:var(--fg);
  display:flex;align-items:center;justify-content:center;
  transition:color .3s,border-color .3s,transform .3s;
}
.cbox__icon svg{width:46%;height:46%}
.cbox__icon:hover{color:var(--volt);border-color:var(--volt);transform:translateY(-3px)}

/* --- remarks-doc round (2026-07-06): bigger headings/copy, 4-up diary,
       mobile refinements --- */
h2{font-size:clamp(2.3rem,5.6vw,4.7rem)}
.sect__h{font-size:clamp(2.1rem,4.2vw,4rem)}
.method__lede{font-size:1.15rem}
.step p{font-size:1.05rem}
.founder__copy>p{font-size:1.12rem}

.diary__grid--quad{justify-content:center;gap:2.4vw}
.diary__grid--quad .diary__ph{margin-top:0;width:min(255px,20vw)}
.diary__grid--quad .diary__ph:nth-child(2){margin-top:7vh}
.diary__grid--quad .diary__ph:nth-child(4){margin-top:5vh}

.solfab__toc{display:none}
@media (max-width:820px){
  .diary__grid--quad{gap:20px}
  .diary__grid--quad .diary__ph{width:min(300px,42vw)}
  /* hero film button: icon only on mobile */
  .hero__film-label{display:none}
  /* solutions hub: skip the orbit, keep a persistent pill launcher (TK + list) */
  .solhub-orbit--hero{display:none}
  .solfab{opacity:1;transform:none;pointer-events:auto;width:auto;height:56px;border-radius:999px;padding:0 16px;gap:10px}
  .solfab__mark{width:40px}
  .solfab__toc{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--bone)}
}

/* mobile fab pill: explicit geometry (no overflow past viewport) */
@media (max-width:820px){
  .solfab{right:14px;bottom:16px;width:auto;min-width:0;max-width:calc(100vw - 28px);height:56px;display:inline-flex;align-items:center;justify-content:center}
}

/* --- founder minis: no bone ring, larger (2026-07-06) --- */
.founder__mini{width:240px}
.founder__mini--2{width:220px}
.founder__mini img{box-shadow:0 30px 60px -24px rgba(15,17,9,.6)}
@media (max-width:900px){.founder__mini{width:185px}.founder__mini--2{width:170px}}

/* --- fame grids: captions must never overflow their column (2026-07-06) --- */
.fame .polaroid{min-width:0}
.fame .polaroid figcaption{
  font-size:.66rem;letter-spacing:.14em;line-height:1.6;
  flex-wrap:wrap;overflow-wrap:anywhere;
}

/* --- founder media: room for the enlarged minis (2026-07-06) --- */
.founder__media{min-height:640px}
.founder__mini--1{right:2%;top:-4%}
.founder__mini--2{right:-2%;bottom:-6%}
@media (max-width:900px){.founder__media{min-height:0}}

/* --- orbit chips: sport pictograms instead of photo crops (2026-07-06) --- */
.orbit__ico{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,rgba(236,234,225,.09),rgba(13,15,8,.92) 64%);
  border:1px solid rgba(236,234,225,.28);color:var(--bone);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .35s var(--ease-soft),color .35s,border-color .35s,background .35s;
}
.orbit__ico svg{width:52%;height:52%}
.orbit__chip:hover .orbit__ico,.orbit__chip:focus-visible .orbit__ico{
  transform:scale(1.16);color:var(--volt);border-color:var(--volt);
}

/* --- proof marquee: team logos ride the line (2026-07-06) --- */
.mq--a .mq__logo{height:.82em;width:auto;display:inline-block;vertical-align:middle;margin:0 .12em;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}

/* --- hero video framing: the hero is ~54px shorter than a 16:9 screen (the
   ticker strip), so cover-fit overflows and must crop somewhere. Anchoring to
   the bottom dumped the whole overflow on TOP and clipped figures' heads.
   Bias slightly toward the top so heads stay safe while the lower-third baked
   subtitles still clear the crop. */
.hero__vid{object-position:center 38%}

/* --- footer: contact icons instead of words (2026-07-06) --- */
.foot__social{display:flex;gap:.7rem;margin:.15em 0 .3em}
.foot__icon{
  width:42px;height:42px;border-radius:50%;flex:none;
  border:1px solid rgba(236,234,225,.25);color:rgba(236,234,225,.85);
  display:flex;align-items:center;justify-content:center;
  transition:color .3s,border-color .3s,transform .3s;
}
.foot__icon svg{width:46%;height:46%}
.foot__icon:hover{color:var(--volt);border-color:var(--volt);transform:translateY(-2px)}

/* --- solutions launcher: TK + TOC pill on all viewports (2026-07-06) --- */
.solfab{width:auto;height:60px;border-radius:999px;padding:0 18px;gap:11px}
.solfab__mark{width:40px}
.solfab__toc{display:flex;align-items:center;justify-content:center;width:21px;height:21px;color:var(--bone);transition:color .3s}
.solfab:hover .solfab__toc{color:var(--volt)}

/* --- footer icons: win over .foot__col a{width:fit-content}, larger (2026-07-06) --- */
.foot__col a.foot__icon{
  width:48px;height:48px;flex:none;border-bottom:0;
  display:flex;align-items:center;justify-content:center;
}
.foot__icon svg{width:50%;height:50%}

/* --- overlay menu: dark blurred glass instead of a solid slab (2026-07-06) --- */
.menu__bg{
  background:rgba(13,15,8,.8);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
  backdrop-filter:blur(16px) saturate(.9);
}

/* glass backdrop must never carry a transform (iOS orders transformed
   backdrop-filter layers under composited content); it fades instead.
   isolate keeps the whole overlay one atomic layer above the page. */
.menu{isolation:isolate}
.menu__bg{transform:none;opacity:0;z-index:0}
.menu__inner{z-index:1}

/* --- solutions hub: sections play their card video in place of the photo --- */
.solhub-sect .polaroid .solhub-vid{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:#0d0f08;
}

/* --- wall finale: single floating insole, pure CSS, TRANSPARENT (no video/box) ---
   just the transparent insole cutout hovering with a gentle 3D tilt and a volt
   light-sweep. One object only, so there is no shoe-orientation problem, and the
   background is genuinely transparent — the section + its volt glow show through. */
.wall__flyer{
  position:relative; z-index:1;
  width:min(440px,78vw);
  margin-top:-3vh;                 /* tighter gap under the "It's time to fly" slogan */
  perspective:1500px;
  will-change:transform;
}
.wall__flyer-3d{
  position:relative;
  transform-style:preserve-3d;
  animation:tkFlyerFloat 8.5s ease-in-out infinite;
  will-change:transform;
}
.wall__flyer-img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 36px 46px rgba(0,0,0,.55)) drop-shadow(0 8px 30px rgba(217,255,63,.16));
}
/* volt light-sweep, clipped to the insole shape, mixing additively */
.wall__flyer-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(107deg, transparent 43%, rgba(217,255,63,.5) 49%, rgba(236,234,225,.32) 52%, transparent 59%);
  background-size:300% 100%; background-repeat:no-repeat;
  -webkit-mask:url(../img/insole-flyer.webp) center/contain no-repeat;
          mask:url(../img/insole-flyer.webp) center/contain no-repeat;
  mix-blend-mode:screen;
  animation:tkFlyerSheen 8.5s ease-in-out infinite;
}
@keyframes tkFlyerFloat{
  0%,100%{ transform:translateY(0)     rotateX(6deg) rotateY(-8deg) rotateZ(-.6deg); }
  50%    { transform:translateY(-3.6%) rotateX(3deg) rotateY(6deg)  rotateZ(.6deg); }
}
@keyframes tkFlyerSheen{
  0%,22%   { background-position:190% 0; }
  50%,100% { background-position:-90% 0; }
}
@media (max-width:760px){ .wall__flyer{ width:min(310px,74vw); margin-top:-2vh; } }
@media (prefers-reduced-motion:reduce){
  .wall__flyer-3d{ animation:none; transform:rotateX(5deg) rotateY(-6deg); }
  .wall__flyer-sheen{ animation:none; opacity:0; }
}

/* --- hero solutions strip: static TWO-ROW grid of all solutions (replaces the
   scrolling slogan ticker) — very clear icon + short label, all visible at once,
   no motion. Column count steps down on narrow screens so nothing scrolls. --- */
.hero-solx{
  position:relative;z-index:2;
  background:var(--deep);
  border-top:1px solid rgba(236,234,225,.12);
  border-bottom:1px solid rgba(236,234,225,.12);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.24rem;
  padding:.5rem clamp(10px,3vw,40px);
  align-content:center;
}
.hero-solx__item{
  display:flex;align-items:center;gap:.5em;min-width:0;
  padding:.32rem .55rem;border-radius:999px;
  color:var(--bone);text-decoration:none;border:1px solid transparent;
  transition:background .25s var(--ease-soft),border-color .25s,color .25s;
}
.hero-solx__item:hover,.hero-solx__item:focus-visible{
  background:rgba(236,234,225,.06);border-color:rgba(217,255,63,.45);color:var(--volt);outline:none;
}
.hero-solx__ico{flex:none;width:18px;height:18px;display:flex;color:var(--volt)}
.hero-solx__ico svg{width:100%;height:100%}
.hero-solx__label{
  font-size:.72rem;font-weight:650;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (min-width:440px){ .hero-solx{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:560px){ .hero-solx{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:860px){ .hero-solx{grid-template-columns:repeat(7,minmax(0,1fr))} }
@media (min-width:1200px){
  .hero-solx{grid-template-columns:repeat(10,minmax(0,1fr))}   /* exactly two rows for 20 */
  .hero{min-height:calc(100svh - 82px)}
}
@media (prefers-reduced-motion:reduce){ .hero-solx__item{transition:none} }

/* --- proof "trusted" image: full landscape shot fills the landscape frame;
   slight top bias keeps Tamir's head safe if the frame goes wide on short screens --- */
.proof__media img{object-position:center 35%}

/* --- hero lead line above the CTAs (brand statement, media-only hero) --- */
.hero__lead{
  font-size:clamp(1.5rem,3.5vw,2.9rem);
  font-weight:820;letter-spacing:.015em;line-height:1.05;
  text-transform:uppercase;color:var(--bone);
  margin:0 0 1.05em;max-width:none;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
@media (max-width:760px){ .hero__lead{font-size:clamp(1.35rem,7vw,2rem)} }

/* --- solutions hub: solutions-at-a-glance grid (icon + label), same style as
   the homepage strip but relaxed into a centered 5-column board on the page --- */
.hero-solx--hub{
  background:none;border:0;
  max-width:1120px;margin:clamp(1.4rem,4vh,3rem) auto 0;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem 1rem;
}
.hero-solx--hub .hero-solx__ico{width:20px;height:20px}
.hero-solx--hub .hero-solx__label{font-size:.84rem;letter-spacing:.02em}
@media (max-width:900px){ .hero-solx--hub{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:600px){ .hero-solx--hub{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* --- proof "trusted": square portrait with championship logos orbiting it
   (replaces the horizontal logo marquees; the ✦ stars are gone) --- */
.proof__media--sq{--sz:min(52vh,460px);width:var(--sz)!important;height:var(--sz)!important;overflow:visible;border-radius:8px}
.proof__media--sq>img{border-radius:8px}
.proof__ring{
  --r:calc(var(--sz)*0.86);
  position:absolute;inset:0;margin:auto;pointer-events:none;z-index:3;
  animation:proofSpin 48s linear infinite;
}
.proof__logo{
  position:absolute;top:50%;left:50%;
  width:clamp(42px,4.8vw,62px);height:clamp(42px,4.8vw,62px);
  display:grid;place-items:center;border-radius:50%;
  background:rgba(21,23,15,.82);border:1px solid rgba(236,234,225,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1*var(--r))) rotate(calc(-1*var(--a)));
}
.proof__logo img{width:64%;height:64%;object-fit:contain;animation:proofSpin 48s linear infinite reverse}
@keyframes proofSpin{to{transform:rotate(360deg)}}
@media (max-width:760px){ .proof__media--sq{--sz:min(74vw,330px)} }
@media (prefers-reduced-motion:reduce){ .proof__ring,.proof__logo img{animation:none} }

/* --- solutions hub: hero shrinks so the homepage-style solutions strip lands at
   the bottom of the FIRST viewport (heights match the strip's rows per breakpoint).
   The title is ALSO capped by viewport HEIGHT (min(..,13vh)) and the top padding
   trimmed, so on short/wide windows the tall content can't push the 2nd strip row
   below the fold. --- */
@media (min-width:1000px){
  .phero--hub{min-height:calc(100svh - 112px);padding-top:calc(var(--hdr-h) + 3vh);padding-bottom:clamp(1.6rem,3.5vh,3rem)}
  .phero--hub .phero__title{font-size:min(clamp(2.7rem,9vw,8.2rem), 13vh)}
  .phero--hub .phero__sub{margin-top:clamp(.8rem,2vh,1.5rem)}
}
@media (min-width:1200px){ .phero--hub{min-height:calc(100svh - 82px)} }

/* --- homepage "Meet Tamir" founder: the main photo is LANDSCAPE, so the
   portrait-tuned overlapping minis collided with it + their captions. Flow the
   two minis in a tidy row BELOW the main instead of scattering over it. --- */
#tamir .founder__media{min-height:0}
#tamir .founder__mini{position:relative;display:inline-block;vertical-align:top;width:min(46%,232px);top:auto;right:auto;bottom:auto;left:auto;margin:2rem 0 0}
#tamir .founder__mini--1{margin-right:5%}

/* --- header tagline "IT'S TIME TO FLY™": loads white; each letter takes the
   green tone one after another (JS adds .is-volt per letter), holds, then all
   reset to white — looping on the same 5.6s cycle as the TK logo sheen --- */
.hdr__tagline{color:var(--bone);opacity:1}
.hdr__tagline .tg-l{transition:color .3s ease}
.hdr__tagline .tg-l.is-volt{color:var(--volt)}
body[data-theme="light"] .hdr__tagline,body[data-theme="stone"] .hdr__tagline{color:var(--ink)}
body[data-theme="light"] .hdr__tagline .tg-l.is-volt,body[data-theme="stone"] .hdr__tagline .tg-l.is-volt{color:var(--volt-deep)}

/* --- DMC chip dot: brand green instead of purple --- */
.chip__dot{background:var(--volt);box-shadow:0 0 12px rgba(217,255,63,.9)}

/* --- tagline ™: the global .tm (.42em) is too small at this size --- */
.hdr__tagline .tm{font-size:.72em;font-weight:700}

/* --- wall finale: the TK mark ascends (replaces the insole) — rises with the
   existing scroll tween on #wallInsole (outer), levitates gently (inner), and
   carries the logo's light sweep. --- */
.wall__mark{position:relative;z-index:1;width:min(460px,68vw);margin-top:-2vh;will-change:transform}
.wall__mark-float{position:relative;animation:tkMarkFloat 7s ease-in-out infinite;will-change:transform}
.wall__mark-float img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 44px 70px rgba(0,0,0,.55)) drop-shadow(0 0 64px rgba(217,255,63,.16));
}
@keyframes tkMarkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.2%)}}
@media (max-width:760px){ .wall__mark{width:min(320px,72vw)} }
@media (prefers-reduced-motion:reduce){ .wall__mark-float{animation:none} }