:root{
  color-scheme:light;
  --bg:#f3f4ee;
  --surface:#ffffff;
  --surface-2:#e8ebe2;
  --text:#11150e;
  --muted:#5f665b;
  --line:rgba(17,21,14,.14);
  --line-strong:rgba(17,21,14,.25);
  --accent:#72b400;
  --accent-2:#00a77b;
  --accent-violet:#7058df;
  --radius:24px;
  --shell:1240px;
  --header-h:82px;
  --mx:50%;
  --my:50%;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080808;
  --surface:#101010;
  --surface-2:#151515;
  --text:#f2efe8;
  --muted:#9f9b94;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --accent:#c9ff4a;
  --accent-2:#88ffd1;
  --accent-violet:#9a8cff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden;overflow-x:clip}
html.menu-open{overflow:hidden;overscroll-behavior:none}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(201,255,74,.055),transparent 18rem),
    radial-gradient(circle at 15% 10%,rgba(154,140,255,.05),transparent 32rem),
    radial-gradient(circle at 85% 25%,rgba(136,255,209,.045),transparent 30rem),
    var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
  position:relative;
  cursor:auto;
}
main{overflow-x:hidden;overflow-x:clip}

[v-cloak]{display:none}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
::selection{background:var(--accent);color:#080808}

.page-noise{
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.scroll-progress{
  position:fixed;
  inset:0 auto auto 0;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-violet));
  z-index:1200;
}

.page-loader{
  position:fixed;
  inset:0;
  z-index:2000;
  color:var(--text);
  background:var(--bg);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.loader-grid{
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(800px) rotateX(58deg) translateY(12%);
  transform-origin:center bottom;
}
.loader-copy{
  position:relative;
  z-index:2;
  width:min(86vw,760px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:18px;
}
.loader-kicker{
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
.loader-percent{
  font-size:clamp(70px,14vw,190px);
  font-weight:800;
  line-height:.75;
  letter-spacing:-.08em;
}

.cursor-shell{
  position:fixed;
  left:0;
  top:0;
  z-index:1900;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.cursor-dot,
.cursor-ring{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.cursor-dot{
  width:8px;
  height:8px;
  background:var(--accent);
  box-shadow:0 0 18px rgba(201,255,74,.55);
}
.cursor-ring{
  width:52px;
  height:52px;
  border:1.5px solid #fff;
  mix-blend-mode:difference;
  display:grid;
  place-items:center;
  backdrop-filter:blur(5px);
  transition:
    width .14s ease,
    height .14s ease,
    border-color .14s ease,
    background .14s ease;
}
.cursor-label{
  opacity:0;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  color:#080808;
  transform:scale(.7);
  transition:opacity .18s ease,transform .18s ease;
}
.cursor-shell.is-active .cursor-ring{
  width:72px;
  height:72px;
  background:var(--accent);
  border-color:var(--accent);
}
.cursor-shell.is-active .cursor-label{
  opacity:1;
  transform:scale(1);
}
.cursor-shell.is-text .cursor-ring{
  width:5px;
  height:58px;
  border-radius:5px;
  background:var(--accent-2);
  border-color:var(--accent-2);
}

.section-shell{
  width:min(calc(100% - 40px),var(--shell));
  margin-inline:auto;
}
.section-pad{padding-block:120px}

.site-header{
  width:min(calc(100% - 40px),var(--shell));
  min-height:var(--header-h);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  column-gap:18px;
  align-items:center;
  position:relative;
  z-index:100;
}
.brand{grid-column:1;grid-row:1}
.header-status{grid-column:2;grid-row:1}
.nav{grid-column:3;grid-row:1}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand-mark{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--text);
  color:var(--bg);
  font-weight:900;
  letter-spacing:-.04em;
}
.brand-copy{display:grid;gap:1px}
.brand-copy strong{font-size:13px;letter-spacing:.01em}
.brand-copy small{color:var(--muted);font-size:11px}
.header-status{
  justify-self:center;
  display:flex;
  gap:9px;
  align-items:center;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(201,255,74,.07),0 0 22px rgba(201,255,74,.28);
}
.nav{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
}
.nav>a:not(.nav-cta){color:var(--muted);transition:color .2s ease}
.nav>a:hover{color:var(--text)}
.nav-cta{
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:999px;
}
.menu-toggle{
  display:none;
  background:none;
  border:0;
  width:42px;
  height:42px;
  padding:11px;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:1px;
  background:var(--text);
  margin:6px 0;
  transform-origin:center;
  transition:transform .22s ease,opacity .18s ease,background-color .18s ease;
}
.menu-toggle.active span:first-child{transform:translateY(3.5px) rotate(45deg);background:var(--accent)}
.menu-toggle.active span:last-child{transform:translateY(-3.5px) rotate(-45deg);background:#fff}

.theme-toggle{
  width:68px;
  height:38px;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:999px;
  display:block;
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1500;
  touch-action:manipulation;
  color:var(--text);
  background:linear-gradient(135deg,#dfff8d,#9df5d7);
  box-shadow:0 12px 34px rgba(40,70,20,.2);
  transition:transform .2s ease,background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.theme-toggle::before{
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 12px rgba(20,30,15,.24);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .25s ease;
}
.theme-toggle::after{
  content:"Light mode";
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  width:max-content;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--text);
  background:var(--surface);
  box-shadow:0 10px 28px rgba(20,30,15,.14);
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(5px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.theme-toggle:hover{transform:translateY(-2px) scale(1.03)}
.theme-toggle.menu-hidden{opacity:0;visibility:hidden;pointer-events:none}
.theme-toggle:hover::after,.theme-toggle:focus-visible::after{opacity:1;transform:translateY(0)}
.theme-icon{position:absolute;top:50%;z-index:2;font-size:16px;line-height:1;transform:translateY(-50%);transition:opacity .2s ease,color .2s ease}
.theme-label{display:none}
.theme-sun{left:10px;color:#17210b}
.theme-moon{right:10px;color:#183229;opacity:.55}
html[data-theme="dark"] .theme-toggle{background:linear-gradient(135deg,#1d2330,#12151c);box-shadow:0 12px 34px rgba(0,0,0,.42)}
html[data-theme="dark"] .theme-toggle::before{transform:translateX(30px);background:#c9ff4a}
html[data-theme="dark"] .theme-toggle::after{content:"Dark mode"}
html[data-theme="dark"] .theme-sun{opacity:.45;color:#f2efe8}
html[data-theme="dark"] .theme-moon{opacity:1;color:#080808}

.hero{
  min-height:calc(100svh - var(--header-h));
  display:grid;
  align-items:center;
  position:relative;
  padding-block:72px 96px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
  gap:54px;
  align-items:center;
  position:relative;
  z-index:2;
}
.eyebrow{
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}
.hero-title{
  margin:0;
  max-width:860px;
  font-size:clamp(58px,7vw,112px);
  line-height:.88;
  letter-spacing:-.07em;
  font-weight:780;
}
.accent-line{
  display:block;
  color:var(--muted);
  font-weight:500;
}
.hero-lead{
  max-width:730px;
  margin:32px 0 0;
  font-size:clamp(18px,1.8vw,23px);
  line-height:1.5;
  color:#c3bfb7;
  letter-spacing:-.02em;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:38px;
}
.button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:750;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.button:hover{transform:translateY(-2px)}
.button-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#07120d;border-color:transparent;box-shadow:0 12px 28px rgba(72,145,35,.22)}
.button-primary:hover{background:linear-gradient(135deg,#93d928,#27c89b);box-shadow:0 16px 34px rgba(72,145,35,.3)}
.button-ghost{background:var(--surface);box-shadow:0 8px 24px rgba(20,30,15,.07)}
.button-ghost:hover{background:var(--surface-2);border-color:var(--line-strong)}
.hero-stack{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:0;
  margin:32px 0 0;
  list-style:none;
}
.hero-stack li,
.tag-list li{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-stage{
  min-height:520px;
  border:1px solid var(--line);
  border-radius:32px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(201,255,74,.06),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  perspective:1000px;
  box-shadow:0 50px 130px rgba(0,0,0,.34);
}
.stage-grid{
  position:absolute;
  inset:0;
  opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent 2%,#000 38%,#000 80%,transparent);
}
.object-scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  perspective:900px;
}
.cube-wrap{
  width:150px;
  height:150px;
  transform-style:preserve-3d;
  transform:rotateX(-18deg) rotateY(28deg);
}
.cube{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}
.cube-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,255,74,.7);
  background:rgba(201,255,74,.055);
  box-shadow:inset 0 0 45px rgba(201,255,74,.04);
  backdrop-filter:blur(2px);
}
.cube-face span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--accent);
  text-shadow:0 0 18px rgba(201,255,74,.42);
}
.face-front{transform:translateZ(75px)}
.face-back{transform:rotateY(180deg) translateZ(75px)}
.face-right{transform:rotateY(90deg) translateZ(75px)}
.face-left{transform:rotateY(-90deg) translateZ(75px)}
.face-top{transform:rotateX(90deg) translateZ(75px)}
.face-bottom{transform:rotateX(-90deg) translateZ(75px)}

.object-orbit{
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  transform-style:preserve-3d;
}
.orbit-a{transform:rotateX(68deg) rotateZ(18deg)}
.orbit-b{transform:rotateY(68deg) rotateZ(-22deg);border-color:rgba(136,255,209,.16)}
.orbit-c{width:410px;height:410px;transform:rotateX(78deg) rotateZ(40deg);border-color:rgba(154,140,255,.12)}
.object-orbit::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  top:-5px;
  left:50%;
  background:var(--accent);
  box-shadow:0 0 20px rgba(201,255,74,.65);
}
.particle{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 18px rgba(136,255,209,.75);
}
.p1{left:16%;top:22%}
.p2{right:18%;top:31%}
.p3{left:25%;bottom:21%}
.p4{right:22%;bottom:18%}
.p5{left:48%;top:11%}
.p6{right:9%;top:55%}
.stage-meta{
  position:absolute;
  inset:auto 18px 18px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.hero-scroll-cue{
  position:absolute;
  left:0;
  bottom:28px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.hero-scroll-cue i{
  width:46px;
  height:1px;
  background:var(--line-strong);
  position:relative;
  overflow:hidden;
}
.hero-scroll-cue i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:translateX(-100%);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{transform:translateX(-100%)}
  50%,100%{transform:translateX(100%)}
}

.hero-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(4px);
  opacity:.7;
}
.orb-one{
  width:420px;
  height:420px;
  right:-240px;
  top:10%;
  border:1px solid rgba(201,255,74,.14);
}
.orb-two{
  width:220px;
  height:220px;
  left:-150px;
  bottom:12%;
  background:rgba(136,255,209,.035);
  border:1px solid rgba(136,255,209,.12);
}

.marquee-wrap{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:17px 0;
}
.marquee{
  width:max-content;
  display:flex;
  align-items:center;
  gap:24px;
  color:#c9c5be;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}
.marquee i{color:var(--accent);font-style:normal}

.section-transition{position:relative}
.section-wipe{
  position:absolute;
  inset:0 -100vw;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.012),transparent);
  clip-path:inset(100% 0 0 0);
}

.section-head{
  display:grid;
  grid-template-columns:1fr minmax(280px,520px);
  gap:60px;
  align-items:end;
  margin-bottom:46px;
}
.section-head h2,
.contact h2{
  margin:0;
  font-size:clamp(42px,5vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
}
.section-intro{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.filters button{
  border:1px solid var(--line);
  color:var(--muted);
  background:transparent;
  padding:9px 13px;
  border-radius:999px;
  cursor:pointer;
  font-size:11px;
}
.filters button.active{
  color:#0a0a0a;
  background:var(--text);
  border-color:var(--text);
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.project-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.02);
  transform-style:preserve-3d;
  will-change:transform;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.project-card:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.project-link{display:block;padding:14px 14px 22px}
.project-visual{
  height:300px;
  border-radius:calc(var(--radius) - 9px);
  padding:14px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate;
  transform:translateZ(24px);
}
.project-visual::before{
  content:"";
  position:absolute;
  inset:18% -12% auto auto;
  width:64%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  z-index:-1;
}
.tone-1{background:linear-gradient(145deg,#1a2630,#153e36)}
.tone-2{background:linear-gradient(145deg,#3e2e28,#8c5e46)}
.tone-3{background:linear-gradient(145deg,#201f45,#593b7a)}
.tone-4{background:linear-gradient(145deg,#17354e,#315f6a)}
.tone-5{background:linear-gradient(145deg,#382f15,#736126)}
.tone-6{background:linear-gradient(145deg,#243522,#426540)}
.browser-chrome{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  gap:5px;
}
.browser-chrome span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
}
.project-scanline{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
  transform:translateY(-110%);
  opacity:.45;
}
.visual-word{
  font-size:clamp(46px,7vw,92px);
  font-weight:820;
  letter-spacing:-.08em;
  line-height:.78;
  opacity:.93;
}
.visual-line{
  height:5px;
  width:65%;
  background:rgba(255,255,255,.7);
  margin-top:22px;
  border-radius:99px;
}
.visual-line.short{
  width:38%;
  opacity:.42;
  margin-top:9px;
}
.project-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 8px 0;
  transform:translateZ(14px);
}
.project-meta p{
  margin:0 0 4px;
  color:var(--accent);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.project-meta h3{
  margin:0;
  font-size:25px;
  letter-spacing:-.03em;
}
.arrow{
  font-size:24px;
  transition:transform .25s ease;
}
.project-card:hover .arrow{transform:translate(4px,-4px)}
.project-description{
  margin:14px 8px 0;
  color:var(--muted);
  line-height:1.65;
  font-size:13px;
}
.tag-list{
  list-style:none;
  padding:0 8px;
  margin:18px 0 0;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.capability{
  min-height:340px;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.capability::after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  right:-90px;
  top:-90px;
  background:var(--accent);
  filter:blur(1px);
  opacity:0;
  transform:scale(.2);
  transition:opacity .35s ease,transform .45s ease;
}
.capability:hover::after{
  opacity:.07;
  transform:scale(1);
}
.capability-num{
  color:var(--accent);
  font-size:10px;
  letter-spacing:.12em;
}
.capability h3{
  font-size:25px;
  margin:76px 0 14px;
  letter-spacing:-.035em;
}
.capability p{
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  min-height:64px;
}
.capability ul{
  list-style:none;
  padding:18px 0 0;
  margin:18px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  gap:8px;
}
.capability li{
  color:#c3bfb7;
  font-size:11px;
}

.horizontal-lab{
  height:400vh;
  position:relative;
}
.horizontal-pin{
  height:100vh;
  position:sticky;
  top:0;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.horizontal-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.lab-panel{
  width:100vw;
  height:100vh;
  flex:0 0 100vw;
  display:grid;
  place-items:center;
  padding:clamp(28px,7vw,110px);
  position:relative;
  border-right:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%,rgba(201,255,74,.04),transparent 26rem),
    var(--bg);
}
.lab-panel p{
  margin:0;
  max-width:1000px;
  text-align:center;
  font-size:clamp(44px,7vw,110px);
  line-height:.94;
  letter-spacing:-.065em;
}
.lab-index{
  position:absolute;
  top:8vh;
  left:6vw;
  color:var(--accent);
  font-size:11px;
  letter-spacing:.16em;
}

.timeline{border-top:1px solid var(--line)}
.timeline-row{
  display:grid;
  grid-template-columns:150px 1fr 1.35fr;
  gap:34px;
  padding:32px 24px;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.timeline-date{
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding-top:5px;
}
.timeline-role h3{
  margin:0 0 4px;
  font-size:18px;
}
.timeline-role p,
.timeline-copy{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.statement-card,
.contact-card{
  border:1px solid var(--line);
  border-radius:32px;
  padding:clamp(34px,6vw,76px);
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
}
.statement-text{
  margin:0;
  max-width:1060px;
  font-size:clamp(34px,5.2vw,72px);
  line-height:1.04;
  letter-spacing:-.055em;
}
.statement-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:64px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.statement-steps span{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.contact-card{
  text-align:left;
  background:var(--text);
  color:#090909;
  position:relative;
  overflow:hidden;
}
.contact-card::after{
  content:"";
  position:absolute;
  width:380px;
  height:380px;
  right:-120px;
  bottom:-220px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
}
.contact-card .eyebrow{color:#4e5f18}
.contact-card h2{max-width:930px}
.contact-card>p:not(.eyebrow){
  max-width:700px;
  font-size:16px;
  line-height:1.7;
  color:#5c5953;
}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
  position:relative;
  z-index:2;
}
.contact-card .button-primary{
  background:#090909;
  color:#fff;
  border-color:#090909;
}
.contact-card .button-ghost{
  background:#fff;
  border-color:rgba(0,0,0,.22);
  color:#090909;
}
.contact-card .button-primary:hover,
.contact-card .button-ghost:hover{
  background:#c9ff4a;
  color:#081006;
  border-color:#9acb28;
}
.contact-number{
  margin-top:18px;
  color:#5c5953;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.social-rail{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:110;
  display:grid;
  gap:8px;
}
.social-rail a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(9,9,9,.65);
  backdrop-filter:blur(12px);
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.social-rail a:hover{
  background:var(--accent);
  color:#080808;
  border-color:var(--accent);
  transform:scale(1.08);
}

.site-footer{
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.noscript{
  position:fixed;
  bottom:0;
  inset-inline:0;
  background:#fff;
  color:#000;
  padding:12px;
  text-align:center;
  z-index:2000;
}

@media (hover:hover) and (pointer:fine){
  body,
  a,
  button{cursor:none}
  .cursor-shell{opacity:1}
}

@media(max-width:1100px){
  .header-status{display:none}
  .site-header{grid-template-columns:1fr auto}
  .nav{grid-column:2;grid-row:1}
}

@media(max-width:960px){
  .section-pad{padding-block:90px}
  .hero-grid{grid-template-columns:1fr;gap:54px}
  .hero-stage{max-width:680px;width:100%;min-height:460px}
  .section-head{grid-template-columns:1fr;gap:20px}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .timeline-row{grid-template-columns:110px 1fr}
  .timeline-copy{grid-column:2}
  .social-rail{right:10px}
}

@media(max-width:720px){
  :root{--header-h:70px}

  .section-shell,
  .site-header{width:calc(100% - 28px);max-width:var(--shell)}
  .section-pad{padding-block:72px}
  .brand-copy small{display:none}
  .site-header{grid-template-columns:minmax(0,1fr) 44px;column-gap:6px}
  .brand{min-width:0}
  .brand-copy{min-width:0}
  .brand-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .theme-toggle{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:108px;height:40px;box-shadow:0 6px 20px rgba(40,70,20,.18)}
  .theme-toggle::before{width:32px;height:32px}
  html[data-theme="dark"] .theme-toggle::before{transform:translateX(68px)}
  .theme-icon{font-size:15px}
  .theme-sun{left:11px}
  .theme-moon{right:11px}
  .theme-label{display:block;position:absolute;right:15px;top:50%;z-index:3;transform:translateY(-50%);font-size:12px;font-weight:800;line-height:1;color:#15200e;pointer-events:none}
  html[data-theme="dark"] .theme-label{left:15px;right:auto;color:#f2efe8}
  .theme-toggle::after{display:none!important;content:none!important}
  .theme-toggle:hover{transform:none}
  .menu-toggle{grid-column:2;grid-row:1}

  .menu-toggle{
    display:block;
    position:relative;
    z-index:201;
    justify-self:end;
    width:42px;
    min-width:42px;
    margin:0;
    transform:none!important;
  }

  .site-header{transform:none!important;filter:none!important}

  .nav{
    position:fixed;
    inset:0;
    z-index:200;
    padding:105px 24px 30px;
    width:100vw;
    max-width:100vw;
    height:100vh;
    height:100dvh;
    margin:0;
    justify-self:stretch;
    color:var(--text);
    background:rgba(243,244,238,.99);
    backdrop-filter:none;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    transform:translateY(-105%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .28s ease,opacity .2s ease,visibility 0s linear .28s;
  }
  .nav.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .nav a{
    display:block;
    width:100%;
    color:var(--text)!important;
    font-size:30px;
    padding:17px 0;
    border-bottom:1px solid var(--line);
  }
  .nav-cta{border:0;border-radius:0}
  html[data-theme="dark"] .nav{background:rgba(8,8,8,.99)}
  html:not([data-theme="dark"]) .menu-toggle.active span{background:#11150e}

  .hero{
    min-height:auto;
    padding-block:58px 72px;
  }
  .hero-title{font-size:clamp(54px,16vw,88px)}
  .hero-lead{font-size:18px}
  .hero-stage{min-height:390px}
  .cube-wrap{width:112px;height:112px}
  .face-front{transform:translateZ(56px)}
  .face-back{transform:rotateY(180deg) translateZ(56px)}
  .face-right{transform:rotateY(90deg) translateZ(56px)}
  .face-left{transform:rotateY(-90deg) translateZ(56px)}
  .face-top{transform:rotateX(90deg) translateZ(56px)}
  .face-bottom{transform:rotateX(-90deg) translateZ(56px)}
  .object-orbit{width:230px;height:230px}
  .orbit-c{width:320px;height:320px}
  .hero-scroll-cue{display:none}

  .project-grid{grid-template-columns:1fr}
  .project-visual{height:250px}
  .capability-grid{grid-template-columns:1fr}

  .horizontal-lab{height:auto}
  .horizontal-pin{height:auto;position:relative;top:auto;overflow:visible;display:block}
  .horizontal-track{display:grid;width:100%;will-change:auto;transform:none!important}
  .lab-panel{width:100%;height:auto;min-height:62svh;flex:none;padding:72px 20px;border-right:0;border-bottom:1px solid var(--line)}
  .lab-panel p{font-size:clamp(42px,13vw,72px)}

  .timeline-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:26px 18px;
  }
  .timeline-copy{grid-column:auto;margin-top:8px}

  .statement-steps{grid-template-columns:repeat(2,1fr)}
  .contact-card{border-radius:24px}
  .contact-actions{align-items:stretch}
  .contact-actions .button{width:100%;text-align:center}

  .social-rail{
    position:static;
    top:auto;
    right:auto;
    bottom:auto;
    transform:none;
    width:min(calc(100% - 28px),420px);
    margin:20px auto 8px;
    justify-content:center;
    grid-auto-flow:column;
    grid-template-columns:repeat(4,42px);
    padding:6px;
    border:1px solid var(--line);
    background:var(--surface);
    backdrop-filter:none;
    border-radius:999px;
  }
  .social-rail a{width:42px;height:42px}

  .site-footer{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    align-items:flex-start;
    padding-block:24px 72px;
  }
}

@media(max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important;overscroll-behavior-x:none}
  #app,main,.hero-copy,.section-shell,.site-header{max-width:100%}
  html.motion-ready .reveal-local.reveal-left,
  html.motion-ready .reveal-local.reveal-right{transform:translate3d(0,28px,0) scale(.985)}
  html.motion-ready .reveal-local.is-inview{transform:none}
}

/* V7.13 — dependable Android/iOS touch rendering */
@media(max-width:720px), (pointer:coarse), (hover:none){
  .gsap-text-heading,
  .gsap-word-wrap,
  .gsap-word{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
  }
  .gsap-word{will-change:auto!important}
  .gsap-word-wrap{overflow:visible;clip-path:none!important}
  .theme-toggle::after{display:none!important;content:none!important}
  .section-head{align-items:start}
  .section-head h2{min-height:0}
  .project-card,.capability,.cms-card,.timeline-row,.statement-card,.contact-card{
    content-visibility:visible!important;
    contain:none!important;
  }
}

@supports(padding:max(0px)){
  @media(max-width:720px){
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
    .nav{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(30px,env(safe-area-inset-bottom))}
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* ==========================================================
   V4 — animated code editor + reversible scroll choreography
   ========================================================== */

.hero-code-panel{
  min-height:540px;
  border:1px solid var(--line);
  border-radius:30px;
  position:relative;
  overflow:visible;
  perspective:1200px;
  transform-style:preserve-3d;
}

.editor-shell{
  min-height:540px;
  height:100%;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  z-index:3;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    #0c0d0f;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 50px 120px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;
}

.editor-shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:8;
  opacity:.14;
  background:
    linear-gradient(transparent 50%,rgba(255,255,255,.018) 50%);
  background-size:100% 4px;
  mix-blend-mode:screen;
}

.editor-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(201,255,74,.045) 48%,
    transparent 60%,
    transparent 100%
  );
  transform:translateX(-120%);
  animation:editorSweep 5.2s ease-in-out infinite;
}

@keyframes editorSweep{
  0%,18%{transform:translateX(-120%)}
  58%,100%{transform:translateX(120%)}
}

.editor-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(55px);
  pointer-events:none;
  z-index:1;
}
.glow-a{
  width:180px;
  height:180px;
  right:-45px;
  top:44px;
  background:rgba(201,255,74,.11);
}
.glow-b{
  width:150px;
  height:150px;
  left:-60px;
  bottom:75px;
  background:rgba(136,255,209,.08);
}

.editor-toolbar{
  min-height:48px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:0 15px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.018);
}

.editor-dots{
  display:flex;
  gap:6px;
}
.editor-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
}
.editor-dots span:nth-child(1){background:#ff6b65}
.editor-dots span:nth-child(2){background:#e8c35a}
.editor-dots span:nth-child(3){background:#70c66b}

.editor-tabs{
  height:48px;
  display:flex;
  align-items:stretch;
  gap:2px;
  min-width:0;
}
.editor-tab{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  color:#686d75;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  border-inline:1px solid transparent;
}
.editor-tab.active{
  color:#d9ddd9;
  background:#0f1114;
  border-inline-color:rgba(255,255,255,.055);
  box-shadow:inset 0 -1px 0 var(--accent);
}
.tab-dot{
  width:6px;
  height:6px;
  border-radius:2px;
}
.js-dot{background:#e5d257}
.php-dot{background:#8f96c9}

.editor-state{
  display:flex;
  align-items:center;
  gap:8px;
  color:#70757e;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.editor-breadcrumb{
  min-height:33px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:#555b65;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:8px;
}
.editor-breadcrumb strong{
  color:#999fa7;
  font-weight:500;
}
.editor-breadcrumb b{
  color:#343941;
  font-weight:400;
}

.editor-body{
  height:300px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(136,255,209,.025),transparent 18rem),
    #0c0e11;
}

.active-line-marker{
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:15px;
  height:20px;
  opacity:0;
  background:
    linear-gradient(90deg,rgba(201,255,74,.06),rgba(201,255,74,.015),transparent);
  border-left:2px solid var(--accent);
  pointer-events:none;
}

.code-rail{
  padding-top:15px;
  display:grid;
  grid-template-rows:repeat(13,20px);
  justify-items:end;
  padding-right:10px;
  color:#3c424c;
  border-right:1px solid rgba(255,255,255,.045);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  line-height:20px;
  user-select:none;
}

.code-view{
  margin:0;
  padding:15px 16px 15px 14px;
  overflow:hidden;
  color:#a7adb5;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:10px;
  line-height:20px;
  tab-size:2;
}
.code-view code{
  display:block;
}
.code-line{
  display:block;
  height:20px;
  white-space:pre;
  transform-origin:left center;
}
.token-purple{color:#c39df3}
.token-blue{color:#83c5ff}
.token-green{color:#a9d18e}
.token-yellow{color:#e7c86d}

.terminal-panel{
  border-top:1px solid rgba(255,255,255,.065);
  background:#090b0d;
}
.terminal-head{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  color:#606770;
  border-bottom:1px solid rgba(255,255,255,.045);
  font-size:8px;
  letter-spacing:.12em;
}
.terminal-tools{
  color:#3f454d;
  letter-spacing:0;
  font-size:10px;
}
.terminal-content{
  min-height:112px;
  padding:11px 15px 12px;
  display:grid;
  align-content:start;
  gap:6px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  color:#7d838b;
}
.terminal-line{
  min-height:15px;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  overflow:hidden;
}
.terminal-prompt{color:var(--accent)}
.terminal-path{color:#81b9dc}
.terminal-command{
  color:#d2d5d8;
  display:inline-block;
  clip-path:inset(0 100% 0 0);
}
.terminal-caret{
  width:6px;
  height:12px;
  background:var(--accent);
  opacity:.85;
  animation:terminalBlink .8s steps(1) infinite;
}
@keyframes terminalBlink{50%{opacity:0}}
.terminal-output{
  opacity:0;
  transform:translateY(4px);
  padding-left:2px;
}
.terminal-ok{color:#74d38b;margin-right:5px}
.build-time{
  color:#535a63;
  margin-left:8px;
}

.editor-footer{
  min-height:25px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding:0 13px;
  background:#101316;
  border-top:1px solid rgba(255,255,255,.045);
  color:#4e555e;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:7px;
}

.code-badge{
  position:absolute;
  z-index:6;
  min-width:118px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(9,10,11,.8);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  transform:translateZ(65px);
}
.code-badge span{
  display:block;
  color:#626872;
  font-size:7px;
  letter-spacing:.12em;
}
.code-badge strong{
  display:block;
  margin-top:3px;
  color:var(--accent);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
}
.badge-top{
  right:-24px;
  top:78px;
}
.badge-bottom{
  left:-26px;
  bottom:78px;
}
.badge-bottom strong{color:var(--accent-2)}

.code-panel-meta{
  position:absolute;
  z-index:5;
  left:18px;
  right:18px;
  bottom:-29px;
  display:flex;
  justify-content:space-between;
  color:#555b64;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.13em;
}

/* Scroll animation helpers.
   JS deliberately keeps transforms instead of clearing them,
   so every motion can reverse cleanly when the user scrolls back. */
.scroll-cycle{
  will-change:transform,opacity,filter;
}
.project-link.scroll-cycle{
  transform-origin:center top;
}
.capability.scroll-cycle{
  transform-origin:center center;
}

@media(max-width:960px){
  .hero-code-panel{
    max-width:680px;
    width:100%;
    min-height:520px;
  }
}

@media(max-width:720px){
  .hero-code-panel{
    min-height:490px;
    margin-bottom:12px;
  }
  .editor-shell{
    min-height:490px;
    border-radius:24px;
  }
  .editor-body{height:270px}
  .code-view{
    font-size:8px;
    padding-right:8px;
  }
  .editor-tab:nth-child(2){display:none}
  .editor-state{display:none}
  .editor-toolbar{grid-template-columns:auto 1fr}
  .code-badge{display:none}
  .code-panel-meta{bottom:-23px}
  .editor-footer{gap:9px}
}

@media(max-width:440px){
  .editor-body{
    grid-template-columns:34px minmax(0,1fr);
  }
  .code-rail{
    padding-right:7px;
    font-size:8px;
  }
  .code-view{
    font-size:7.25px;
    padding-left:8px;
  }
}


/* ==========================================================
   V5 — AOS + Lenis + CMS / platform experience
   ========================================================== */

html.lenis,
html.lenis body{
  height:auto;
}
.lenis.lenis-smooth{
  scroll-behavior:auto!important;
}
.lenis.lenis-smooth [data-lenis-prevent]{
  overscroll-behavior:contain;
}
.lenis.lenis-stopped{
  overflow:hidden;
}

.cms-section{
  position:relative;
}
.cms-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.cms-card{
  min-height:290px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at 90% 5%,rgba(201,255,74,.045),transparent 9rem),
    rgba(255,255,255,.018);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  position:relative;
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.cms-card::after{
  content:"";
  position:absolute;
  inset:auto -55px -70px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .3s ease;
}
.cms-card:hover{
  border-color:rgba(201,255,74,.34);
  background:rgba(255,255,255,.026);
  box-shadow:0 28px 80px rgba(0,0,0,.22);
}
.cms-card:hover::after{
  transform:scale(1.35) translate(-10px,-10px);
  border-color:rgba(201,255,74,.13);
}
.cms-card-wide{
  grid-column:span 3;
  min-height:210px;
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  align-items:center;
  gap:26px;
}
.cms-logo-plate{
  width:74px;
  height:74px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#f3f1eb;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 14px 35px rgba(0,0,0,.18);
  position:relative;
  z-index:2;
}
.cms-logo-plate img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}
.highlevel-plate img{
  width:46px;
  height:46px;
  border-radius:9px;
}
.cms-card-copy{
  position:relative;
  z-index:2;
}
.cms-level{
  display:inline-block;
  margin-bottom:8px;
  color:var(--accent);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.cms-card h3{
  margin:0 0 10px;
  font-size:24px;
  letter-spacing:-.04em;
}
.cms-card p{
  margin:0;
  max-width:48ch;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}
.cms-card-wide p{
  max-width:75ch;
}

/* SplitText generates word spans inside selected headings. */
.split-word{
  display:inline-block;
  will-change:transform,opacity,filter;
}

@media(max-width:960px){
  .cms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cms-card-wide{grid-column:span 2}
}
@media(max-width:720px){
  .cms-grid{grid-template-columns:1fr}
  .cms-card-wide{
    grid-column:auto;
    grid-template-columns:1fr;
    min-height:290px;
  }
  .cms-card{min-height:260px}
}


/* ==========================================================
   V6 — guaranteed local scroll animation layer
   This is intentionally independent of GSAP/AOS so normal
   section animations still work even if a CDN is unavailable.
   ========================================================== */

html.motion-ready .reveal-local{
  opacity:0;
  transform:translate3d(0,42px,0) scale(.985);
  filter:blur(9px);
  transition:
    opacity .68s cubic-bezier(.2,.75,.2,1),
    transform .76s cubic-bezier(.2,.75,.2,1),
    filter .72s cubic-bezier(.2,.75,.2,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:transform,opacity,filter;
}

html.motion-ready .reveal-local.reveal-left{
  transform:translate3d(-54px,20px,0) rotate(-.7deg);
}

html.motion-ready .reveal-local.reveal-right{
  transform:translate3d(54px,20px,0) rotate(.7deg);
}

html.motion-ready .reveal-local.reveal-scale{
  transform:translate3d(0,22px,0) scale(.93);
}

html.motion-ready .reveal-local.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1) rotate(0);
  filter:blur(0);
}

html.motion-ready .word-reveal{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.06em;
  margin-bottom:-.06em;
}

html.motion-ready .word-reveal > span{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,115%,0) rotateX(-26deg);
  filter:blur(6px);
  transform-origin:50% 100%;
  transition:
    transform .66s cubic-bezier(.18,.8,.2,1),
    opacity .46s ease,
    filter .55s ease;
  transition-delay:var(--word-delay,0ms);
}

html.motion-ready .word-reveal.is-inview > span{
  opacity:1;
  transform:translate3d(0,0,0) rotateX(0);
  filter:blur(0);
}

/* Listing children animate independently. */
html.motion-ready .list-stagger > *{
  opacity:0;
  transform:translate3d(0,16px,0);
  filter:blur(4px);
  transition:
    opacity .48s ease,
    transform .58s cubic-bezier(.2,.75,.2,1),
    filter .5s ease;
  transition-delay:var(--child-delay,0ms);
}

html.motion-ready .list-stagger.is-inview > *{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

/* Project cards also reveal their inner visual pieces. */
html.motion-ready .project-card.reveal-local .project-visual{
  clip-path:inset(10% 5% 10% 5% round 18px);
  transform:translateZ(24px) scale(1.03);
  transition:
    clip-path .72s cubic-bezier(.2,.75,.2,1),
    transform .78s cubic-bezier(.2,.75,.2,1);
}

html.motion-ready .project-card.reveal-local.is-inview .project-visual{
  clip-path:inset(0 0 0 0 round 18px);
  transform:translateZ(24px) scale(1);
}

/* Actual CMS logos with local fallback marks. */
.cms-logo-plate{
  position:relative;
  isolation:isolate;
}
.cms-logo-plate img{
  position:relative;
  z-index:2;
}
.cms-logo-fallback{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  font-size:clamp(26px,3vw,46px);
  font-weight:900;
  letter-spacing:-.05em;
  color:rgba(255,255,255,.3);
}

/* Code editor CSS fallback animation.
   GSAP enhances this when available, but the editor still visibly
   animates without GSAP. */
html.motion-ready .hero-code-panel .code-line{
  opacity:0;
  transform:translateX(-10px);
  clip-path:inset(0 100% 0 0);
}

html.motion-ready .hero-code-panel.code-fallback-ready .code-line{
  animation:codeLineIn .42s cubic-bezier(.2,.75,.2,1) forwards;
}

html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(1){animation-delay:.10s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(2){animation-delay:.16s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(3){animation-delay:.22s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(4){animation-delay:.28s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(5){animation-delay:.34s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(6){animation-delay:.40s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(7){animation-delay:.46s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(8){animation-delay:.52s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(9){animation-delay:.58s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(10){animation-delay:.64s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(11){animation-delay:.70s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(12){animation-delay:.76s}
html.motion-ready .hero-code-panel.code-fallback-ready .code-line:nth-child(13){animation-delay:.82s}

@keyframes codeLineIn{
  to{
    opacity:1;
    transform:translateX(0);
    clip-path:inset(0 0 0 0);
  }
}

html.motion-ready .hero-code-panel.code-fallback-ready .terminal-command{
  animation:terminalType 1.1s steps(24,end) .95s forwards;
}

@keyframes terminalType{
  to{clip-path:inset(0 0 0 0)}
}

html.motion-ready .hero-code-panel.code-fallback-ready .terminal-output{
  animation:terminalOutput .42s ease forwards;
}
html.motion-ready .hero-code-panel.code-fallback-ready .output-one{animation-delay:2.05s}
html.motion-ready .hero-code-panel.code-fallback-ready .output-two{animation-delay:2.28s}
html.motion-ready .hero-code-panel.code-fallback-ready .output-three{animation-delay:2.51s}

@keyframes terminalOutput{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Keep content readable if the user explicitly requests reduced motion. */
@media(prefers-reduced-motion:reduce){
  html.motion-ready .reveal-local,
  html.motion-ready .word-reveal > span,
  html.motion-ready .list-stagger > *,
  html.motion-ready .hero-code-panel .code-line,
  html.motion-ready .terminal-command,
  html.motion-ready .terminal-output{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    animation:none!important;
    transition:none!important;
  }
}


/* ==========================================================
   V7 — GSAP H1 + H2 word reveal
   ========================================================== */
.gsap-text-heading{
  perspective:900px;
  transform-style:preserve-3d;
}

.gsap-word-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding:.06em 0 .11em;
  margin:-.06em 0 -.11em;
  perspective:700px;
}

.gsap-word{
  display:inline-block;
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

.hero-title .gsap-word-wrap{
  overflow:visible;
  clip-path:inset(-14% -5% -16% -5%);
}

.section-head h2 .gsap-word-wrap,
.contact-card h2 .gsap-word-wrap{
  clip-path:inset(-8% -4% -14% -4%);
}

@media(prefers-reduced-motion:reduce){
  .gsap-word{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}


/* ==========================================================
   V7.2 — portrait placeholder + interactive scroll polish
   ========================================================== */

.about-visual{
  --sectionGlow:0;
  position:relative;
}

.about-visual::before{
  content:"";
  position:absolute;
  inset:8% -8% auto;
  height:72%;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 42%,
      rgba(201,255,74,calc(.055 * var(--sectionGlow))),
      transparent 30rem);
  opacity:.9;
}

.about-visual-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);
  gap:72px;
  align-items:center;
}

.about-copy .section-intro{
  max-width:720px;
  margin-top:24px;
}

.about-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:36px;
}

.about-points > div{
  min-height:150px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.018);
  display:grid;
  align-content:start;
  gap:8px;
}

.about-points span{
  color:var(--accent);
  font-size:9px;
  letter-spacing:.12em;
}

.about-points strong{
  font-size:16px;
  letter-spacing:-.02em;
}

.about-points small{
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}

.portrait-wrap{
  position:relative;
  transform-style:preserve-3d;
  perspective:1000px;
}

.portrait-frame{
  aspect-ratio:4/5;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--line);
  background:#0c0d0f;
  box-shadow:0 40px 100px rgba(0,0,0,.34);
}

.portrait-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.portrait-frame img{
  width:100%;
  height:112%;
  object-fit:cover;
  display:block;
  transform:translateY(-5%);
  filter:saturate(.88) contrast(1.04);
}

.portrait-gridlines{
  position:absolute;
  inset:0;
  opacity:.22;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mix-blend-mode:screen;
}

.portrait-sheen{
  position:absolute;
  top:-18%;
  bottom:-18%;
  width:28%;
  left:-38%;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.16),
    rgba(201,255,74,.08),
    transparent
  );
  filter:blur(5px);
}

.portrait-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:14px 4px 0;
}

.portrait-meta span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.portrait-meta strong{
  font-size:11px;
  letter-spacing:.02em;
}

/* Subtle section glow driven by GSAP custom property. */
main > section:not(.hero){
  --sectionGlow:0;
}

main > section:not(.hero)::after{
  content:"";
  position:absolute;
  inset:10% 0 auto;
  height:30%;
  pointer-events:none;
  opacity:calc(.16 * var(--sectionGlow));
  background:radial-gradient(circle at 50% 50%,rgba(136,255,209,.12),transparent 34rem);
  filter:blur(10px);
  z-index:-2;
}

/* Lenis-friendly defaults */
html.lenis,
html.lenis body{
  height:auto;
}

.lenis.lenis-smooth{
  scroll-behavior:auto!important;
}

.lenis.lenis-stopped{
  overflow:hidden;
}

@media(max-width:960px){
  .about-visual-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .portrait-wrap{
    max-width:620px;
    width:100%;
  }
}

@media(max-width:720px){
  .about-points{
    grid-template-columns:1fr;
  }

  .portrait-frame{
    border-radius:22px;
  }
}


/* ==========================================================
   V7.3 — lightweight cursor / interaction performance
   ========================================================== */

.cursor-shell{
  /* Paint containment clipped the absolutely-positioned cursor children
     because the shell itself has no dimensions. */
  contain:layout style;
  will-change:transform;
}

@media(hover:hover) and (pointer:fine){
  .cursor-shell.cursor-ready{opacity:1}
}

.cursor-dot,
.cursor-ring{
  left:0;
  top:0;
  will-change:transform;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
}

.cursor-ring{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:
    width .18s ease,
    height .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    opacity .18s ease,
    scale .12s ease;
}

.cursor-ring.cursor-pressed{
  scale:.82;
}

.project-card,
.portrait-wrap,
.editor-shell,
.magnetic{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Only promote heavy interactive elements while fine-pointer interaction exists. */
@media(hover:hover) and (pointer:fine){
  .project-card:hover,
  .portrait-wrap:hover,
  .hero-code-panel:hover .editor-shell{
    will-change:transform;
  }
}

/* Avoid painting off-screen sections when supported.
   Browser still reserves layout size, while skipping expensive rendering work. */
@supports(content-visibility:auto){
  #work,
  #about-visual,
  #capabilities,
  #experience,
  .statement,
  #contact{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}

/* V7.6 lightweight and mobile stability layer */
html.low-motion *,html.low-motion *::before,html.low-motion *::after{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.low-motion .page-noise,
html.low-motion .portrait-sheen,
html.low-motion .project-scanline{display:none!important}
@media(max-width:720px), (pointer:coarse){
  .cursor-shell{display:none!important}
  .section-wipe{display:none}
  .project-card,.capability,.timeline-row{transform-style:flat!important}
}

/* V7.9 light theme surface corrections */
body,.site-header,.project-card,.capability,.cms-card,.timeline-row,.statement-card,.contact-card,.button-ghost,.theme-toggle{
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
html:not([data-theme="dark"]) .project-card,
html:not([data-theme="dark"]) .capability,
html:not([data-theme="dark"]) .cms-card,
html:not([data-theme="dark"]) .timeline-row,
html:not([data-theme="dark"]) .statement-card,
html:not([data-theme="dark"]) .contact-card,
html:not([data-theme="dark"]) .editor-shell{
  background-color:rgba(255,255,255,.78);
  box-shadow:0 22px 70px rgba(30,40,22,.08);
}
html:not([data-theme="dark"]) .nav{background-color:rgba(243,244,238,.98)}
html:not([data-theme="dark"]) .page-noise{opacity:.018;mix-blend-mode:multiply}
html:not([data-theme="dark"]) .social-rail a{background:rgba(255,255,255,.85)}
html:not([data-theme="dark"]) .code-view,
html:not([data-theme="dark"]) .editor-body,
html:not([data-theme="dark"]) .terminal-panel{color:#f2efe8}
html[data-theme="dark"] .theme-toggle{box-shadow:0 8px 28px rgba(0,0,0,.28)}
@media(prefers-reduced-motion:reduce){
  .theme-toggle,.theme-icon,body{transition:none!important}
}

/* V7.10 vivid light palette and aligned header */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(114,180,0,.13),transparent 20rem),
    radial-gradient(circle at 12% 8%,rgba(112,88,223,.09),transparent 35rem),
    radial-gradient(circle at 88% 22%,rgba(0,167,123,.10),transparent 32rem),
    var(--bg);
}
html:not([data-theme="dark"]) .nav-cta{
  color:#07120d;
  border-color:rgba(84,135,0,.35);
  background:linear-gradient(135deg,rgba(201,255,74,.52),rgba(136,255,209,.42));
}
html:not([data-theme="dark"]) .eyebrow,
html:not([data-theme="dark"]) .cms-level{color:#4f7c00}
html:not([data-theme="dark"]) .status-dot{background:#65a500;box-shadow:0 0 0 5px rgba(101,165,0,.12),0 0 20px rgba(101,165,0,.25)}
html:not([data-theme="dark"]) .page-loader{background:linear-gradient(145deg,#f7f8f2,#e9f1df)}
html[data-theme="dark"] .page-loader{background:linear-gradient(145deg,#050505,#0d120b)}
.site-header>.brand,.site-header>.header-status,.site-header>.nav,.site-header>.menu-toggle{align-self:center}

/* V7.11 contact contrast, timeline spacing and official HighLevel mark */
.contact-card{
  background:#f5f2eb!important;
  color:#090909!important;
}
.contact-card h2,.contact-card p{color:#090909}
.contact-card .eyebrow{color:#4f7c00!important}
.contact-card .contact-number{color:#5c5953}
.highlevel-plate{
  width:132px;
  padding:12px;
  background:#fff;
}
.highlevel-plate .ghl-logo{
  width:108px;
  height:auto;
  max-height:52px;
  object-fit:contain;
}
.timeline-row:hover{background:rgba(114,180,0,.035)}
html[data-theme="dark"] .timeline-row:hover{background:rgba(201,255,74,.025)}