/* ================================================================
   ESTATE LABS — style.css
   MIT-tier precision. Dark silicon. Electric blue.
   Fonts: Bricolage Grotesque · Fraunces · Space Mono
   ================================================================ */

/* ── CSS CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  --bg:          #020202;
  --bg2:         #080808;
  --bg3:         #0f0f0f;
  --white:       #ffffff;
  --off:         #f0eee9;
  --dim:         rgba(240,238,233,0.55);
  --faint:       rgba(240,238,233,0.25);
  --ghost:       rgba(240,238,233,0.07);
  --line:        rgba(240,238,233,0.08);
  --blue:        #0052ff;
  --blue-hi:     #3d7bff;
  --blue-glow:   rgba(0,82,255,0.2);
  --blue-glow2:  rgba(0,82,255,0.08);
  --blue-dim:    rgba(0,82,255,0.35);

  --f-display:   'Bricolage Grotesque', sans-serif;
  --f-serif:     'Fraunces', Georgia, serif;
  --f-mono:      'Space Mono', monospace;
  --f-body:      'Bricolage Grotesque', sans-serif;

  --nav-h:       68px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease2:       cubic-bezier(0.4, 0, 0.2, 1);

  --r:           8px;
  --r-sm:        4px;
}

/* ── RESET ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  font-size:16px;
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--bg);
  color:var(--off);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:0;background:none;cursor:none}
em{font-family:var(--f-serif);font-style:italic}
strong{font-weight:600}
img,svg{display:block;max-width:100%}

/* ── CURSOR ─────────────────────────────────── */
#cursor-blob{
  position:fixed;
  width:360px;height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,82,255,0.10) 0%,transparent 70%);
  pointer-events:none;
  z-index:9990;
  transform:translate(-50%,-50%);
  transition:transform 0.55s var(--ease),opacity 0.4s;
  will-change:transform;
  filter:blur(0);
}
#cursor-dot{
  position:fixed;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--blue-hi);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.08s linear,width 0.25s var(--ease),height 0.25s var(--ease),background 0.25s;
  will-change:transform;
  mix-blend-mode:difference;
}
#cursor-dot.hover{
  width:48px;height:48px;
  background:rgba(0,82,255,0.18);
  mix-blend-mode:normal;
  border:1.5px solid var(--blue-dim);
}
@media(hover:none){
  #cursor-blob,#cursor-dot{display:none}
  body{cursor:auto}
  button{cursor:pointer}
}

/* ── PROGRESS ─────────────────────────────────── */
#progress{
  position:fixed;
  top:0;left:0;
  width:0%;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  z-index:10000;
  box-shadow:0 0 10px var(--blue);
  transition:width 0.06s linear;
  pointer-events:none;
}

/* ── TYPOGRAPHY ─────────────────────────────────── */
.display-h2{
  font-family:var(--f-display);
  font-size:clamp(38px,5.5vw,80px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.03em;
  color:var(--white);
}
.display-h2 em{
  font-family:var(--f-serif);
  font-weight:300;
  color:var(--blue-hi);
  letter-spacing:-0.01em;
}
.text-lg{
  font-size:clamp(16px,1.7vw,18px);
  line-height:1.8;
  color:var(--dim);
  font-weight:300;
}
.text-md{
  font-size:clamp(13px,1.4vw,15px);
  line-height:1.9;
  color:var(--faint);
  font-weight:300;
}
.text-lg strong,.text-md strong{color:var(--off);font-weight:500}

/* ── LAYOUT ─────────────────────────────────── */
.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
@media(min-width:768px){.wrap{padding:0 48px}}

.section{padding:clamp(80px,11vw,152px) 0}
.section-dark{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-cta{
  background:var(--bg);
  border-top:1px solid var(--line);
  position:relative;
  overflow:hidden;
  padding:clamp(100px,14vw,200px) 0;
}

/* ── REVEAL ─────────────────────────────────── */
.js-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.85s var(--ease),transform 0.85s var(--ease);
}
.js-reveal.visible{opacity:1;transform:translateY(0)}

.js-split-row .h1-word{
  display:inline-block;
  opacity:0;
  transform:translateY(60px) rotateX(-15deg);
  transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);
  transform-origin:bottom;
  will-change:transform,opacity;
}
.js-split-row.visible .h1-word{opacity:1;transform:translateY(0) rotateX(0deg)}

/* ── SECTION EYEBROW ─────────────────────────────────── */
.section-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(36px,5vw,64px);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--faint);
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.eyebrow-num{
  color:var(--blue);
  font-family:var(--f-mono);
  font-size:11px;
}

/* ── BUTTONS ─────────────────────────────────── */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  font-family:var(--f-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--bg);
  background:var(--off);
  padding:14px 28px;
  border-radius:var(--r-sm);
  border:1.5px solid var(--off);
  transition:color 0.38s var(--ease),
             border-color 0.38s var(--ease),
             transform 0.3s var(--ease),
             box-shadow 0.3s;
  white-space:nowrap;
}
.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--blue);
  transform:translateX(-102%);
  transition:transform 0.42s var(--ease);
  z-index:0;
  border-radius:var(--r-sm);
}
.btn-primary > *{position:relative;z-index:1}
.btn-primary:hover{
  color:var(--white);
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 16px 48px rgba(0,82,255,0.28);
}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-xl{padding:18px 44px;font-size:15px;border-radius:var(--r)}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--faint);
  border:1.5px solid var(--line);
  padding:14px 28px;
  border-radius:var(--r-sm);
  transition:color 0.3s,border-color 0.3s,background 0.3s;
}
.btn-ghost:hover{color:var(--off);border-color:var(--faint);background:var(--ghost)}
.btn-ghost:active{transform:scale(0.98)}

.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--off);
  border:1px solid var(--line);
  padding:9px 20px;
  border-radius:100px;
  transition:color 0.3s,border-color 0.3s,background 0.3s,box-shadow 0.3s;
  white-space:nowrap;
}
.btn-pill:hover{border-color:var(--blue-dim);color:var(--white);box-shadow:0 0 20px var(--blue-glow2)}

/* ── HEADER ─────────────────────────────────── */
#header{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--nav-h);
  z-index:900;
  transition:background 0.5s,border-color 0.5s,transform 0.45s var(--ease);
  border-bottom:1px solid transparent;
}
#header.scrolled{
  background:rgba(2,2,2,0.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom-color:var(--line);
}
#header.hidden{transform:translateY(-100%)}
.header-inner{
  max-width:1180px;
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  gap:32px;
  padding:0 24px;
}
@media(min-width:768px){.header-inner{padding:0 48px}}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--white);
  flex-shrink:0;
}
.logo span{color:var(--blue)}
.logo-icon{flex-shrink:0;transition:transform 0.4s var(--ease)}
.logo:hover .logo-icon{transform:rotate(90deg)}

.nav-links{
  display:none;
  align-items:center;
  gap:28px;
  margin-left:auto;
}
@media(min-width:900px){.nav-links{display:flex}}
.nav-links a{
  font-family:var(--f-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--faint);
  transition:color 0.25s;
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;right:100%;
  height:1px;
  background:var(--blue);
  transition:right 0.35s var(--ease);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{right:0}

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
@media(min-width:900px){.header-right{margin-left:0}}

.burger{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:6px;
  transition:opacity 0.2s;
}
@media(min-width:900px){.burger{display:none}}
.burger span{
  display:block;
  width:22px;height:1.5px;
  background:var(--off);
  border-radius:2px;
  transition:transform 0.3s var(--ease),opacity 0.3s,width 0.3s;
}
.burger span:last-child{width:14px}
.burger:hover span:last-child{width:22px}

/* ── MOBILE OVERLAY ─────────────────────────────────── */
.mob-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,2,2,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  z-index:800;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transform:translateY(-100%);
  transition:transform 0.6s var(--ease);
  border-bottom:1px solid var(--line);
}
.mob-overlay.open{transform:translateY(0)}
.mob-x{
  position:absolute;
  top:22px;right:24px;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--off);
  transition:border-color 0.3s;
}
.mob-x:hover{border-color:var(--blue-dim)}
.mob-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.mob-link{
  font-family:var(--f-display);
  font-size:clamp(34px,9vw,56px);
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--faint);
  transition:color 0.25s;
  line-height:1.15;
}
.mob-link:hover,.mob-link:active{color:var(--white)}
.mob-cta{
  margin-top:24px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue-hi);
  border:1px solid var(--blue-dim);
  padding:13px 32px;
  border-radius:var(--r-sm);
  transition:background 0.3s,color 0.3s;
}
.mob-cta:hover{background:var(--blue);color:var(--white)}

/* ── HERO ─────────────────────────────────── */
#hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  padding:calc(var(--nav-h) + 72px) 24px 60px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
@media(min-width:768px){#hero{padding-left:48px;padding-right:48px}}
@media(min-width:1200px){#hero{max-width:1180px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}

#hero-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.hero-content{
  position:relative;
  z-index:1;
  max-width:900px;
  margin-bottom:clamp(48px,7vw,96px);
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--faint);
  border:1px solid var(--line);
  padding:7px 16px;
  border-radius:100px;
  margin-bottom:clamp(24px,4vw,44px);
}
.badge-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--blue);
  flex-shrink:0;
  animation:bdot 2.5s ease-in-out infinite;
}
@keyframes bdot{
  0%,100%{box-shadow:0 0 0 0 rgba(0,82,255,0.5)}
  50%{box-shadow:0 0 0 5px rgba(0,82,255,0)}
}

.hero-h1{
  font-family:var(--f-display);
  font-size:clamp(52px,8.5vw,120px);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.04em;
  color:var(--white);
  margin-bottom:clamp(24px,4vw,44px);
  perspective:800px;
}
.h1-row{
  display:block;
  overflow:hidden;
  padding-bottom:0.08em;
}
.h1-accent .h1-word{
  font-family:var(--f-serif);
  font-weight:300;
  font-style:italic;
  color:var(--blue-hi);
  letter-spacing:-0.015em;
}
.h1-heavy{font-weight:800}

/* Animated underline on h1-heavy */
.h1-heavy{position:relative}
.h1-heavy::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  animation:ruleDraw 0.9s var(--ease) 1.6s forwards;
}
@keyframes ruleDraw{to{transform:scaleX(1)}}

.hero-sub{
  font-size:clamp(15px,1.8vw,19px);
  line-height:1.75;
  color:var(--dim);
  max-width:520px;
  font-weight:300;
  margin-bottom:clamp(28px,4vw,44px);
}
.hero-sub strong{color:var(--off);font-weight:500}

.hero-ctas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

/* Hero stats bar */
.hero-stats{
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  width:fit-content;
  background:rgba(255,255,255,0.018);
  backdrop-filter:blur(12px);
}
.hstat{
  padding:clamp(16px,2.5vw,24px) clamp(20px,3vw,36px);
  text-align:center;
  position:relative;
  transition:background 0.3s;
}
.hstat:hover{background:var(--ghost)}
.hstat-sep{width:1px;background:var(--line);align-self:stretch;flex-shrink:0}
.hstat-n{
  display:block;
  font-family:var(--f-mono);
  font-size:clamp(22px,3vw,36px);
  font-weight:700;
  color:var(--blue-hi);
  line-height:1;
  margin-bottom:5px;
  letter-spacing:-0.02em;
}
.hstat-l{
  display:block;
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--faint);
}

/* Hero scroll hint */
.hero-scroll{
  position:absolute;
  bottom:32px;left:48px;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:1;
}
@media(min-width:640px){.hero-scroll{display:flex}}
.hs-line{
  width:1px;height:52px;
  background:var(--line);
  overflow:hidden;
  position:relative;
}
.hs-line::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:var(--blue);
  animation:hsDrop 2.4s ease-in-out infinite;
}
@keyframes hsDrop{
  0%{transform:translateY(-100%);opacity:1}
  100%{transform:translateY(250%);opacity:0}
}
.hero-scroll span{
  font-family:var(--f-mono);
  font-size:8px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--faint);
  writing-mode:vertical-lr;
}

/* ── TICKER ─────────────────────────────────── */
.ticker{
  overflow:hidden;
  padding:13px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg2);
}
.ticker-inner{
  display:flex;
  width:max-content;
  animation:tick 36s linear infinite;
  will-change:transform;
  gap:0;
}
.ticker-inner:hover{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-group{
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
}
.ticker-group span{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--faint);
  padding:0 24px;
  transition:color 0.25s;
}
.ticker-group span:hover{color:var(--blue-hi)}
.ticker-group i{
  font-style:normal;
  color:var(--blue);
  opacity:0.35;
  font-size:10px;
  flex-shrink:0;
}

/* ── ABOUT ─────────────────────────────────── */
.about-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-bottom:clamp(52px,8vw,96px);
}
@media(min-width:768px){
  .about-layout{
    grid-template-columns:5fr 7fr;
    gap:clamp(40px,6vw,80px);
    align-items:start;
  }
}
.about-body-col{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Pillars */
.pillars{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
@media(min-width:600px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{
  padding:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:background 0.35s;
}
.pillar::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s var(--ease);
}
.pillar:hover::before{transform:scaleX(1)}
.pillar:hover{background:var(--ghost)}
.pillar:nth-child(4n){border-right:none}
@media(max-width:999px) and (min-width:600px){
  .pillar:nth-child(2n){border-right:none}
  .pillar:nth-child(3),.pillar:nth-child(4){border-bottom:none}
}
@media(max-width:599px){
  .pillar:last-child{border-bottom:none}
  .pillar{border-right:none}
}
@media(min-width:1000px){
  .pillar:nth-child(4){border-right:none}
  .pillar{border-bottom:none}
}
.pillar-icon{
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-hi);
  margin-bottom:20px;
  transition:border-color 0.3s,background 0.3s;
}
.pillar:hover .pillar-icon{border-color:var(--blue-dim);background:var(--blue-glow2)}
.pillar h3{
  font-family:var(--f-display);
  font-size:clamp(16px,1.8vw,18px);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--white);
  margin-bottom:10px;
}
.pillar p{
  font-size:13px;
  line-height:1.8;
  color:var(--faint);
  font-weight:300;
}

/* ── SERVICES ─────────────────────────────────── */
.services-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:clamp(40px,6vw,64px);
}
.services-desc{max-width:240px;text-align:right}
@media(max-width:640px){.services-desc{text-align:left;max-width:100%}}

.svc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
@media(min-width:600px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.svc-grid{grid-template-columns:repeat(3,1fr)}}

.svc-card{
  background:var(--bg2);
  padding:clamp(28px,4vw,44px);
  position:relative;
  overflow:hidden;
  transition:background 0.4s;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.svc-card:hover{background:#0c0c0c}

/* Animated top border */
.svc-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:0%;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  transition:width 0.55s var(--ease);
  box-shadow:0 0 12px var(--blue-glow);
}
.svc-card:hover::before{width:100%}

.svc-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 110%,var(--blue-glow2),transparent);
  opacity:0;
  transition:opacity 0.5s;
  pointer-events:none;
}
.svc-card:hover .svc-glow{opacity:1}

.svc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.svc-n{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--blue);
  opacity:0.5;
  transition:opacity 0.3s;
}
.svc-card:hover .svc-n{opacity:1}
.svc-ico{
  width:36px;height:36px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-hi);
  transition:transform 0.4s var(--ease),border-color 0.3s,background 0.3s;
  flex-shrink:0;
}
.svc-card:hover .svc-ico{
  transform:scale(1.12) rotate(-8deg);
  border-color:var(--blue-dim);
  background:var(--blue-glow2);
}
.svc-card h3{
  font-family:var(--f-display);
  font-size:clamp(18px,2vw,22px);
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--white);
  line-height:1.15;
  flex-shrink:0;
}
.svc-card h3 em{
  font-family:var(--f-serif);
  font-weight:300;
  color:var(--blue-hi);
  font-style:italic;
}
.svc-card p{
  font-size:13px;
  line-height:1.8;
  color:var(--faint);
  font-weight:300;
  flex:1;
}
.svc-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.svc-tag{
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue);
  opacity:0.55;
  transition:opacity 0.3s;
}
.svc-card:hover .svc-tag{opacity:1}
.svc-arrow{
  color:var(--blue-hi);
  font-size:14px;
  transition:transform 0.3s var(--ease),opacity 0.3s;
  opacity:0;
}
.svc-card:hover .svc-arrow{
  opacity:1;
  transform:translate(3px,-3px);
}

/* ── PROCESS ─────────────────────────────────── */
.process-track{
  margin-top:clamp(40px,6vw,64px);
  position:relative;
}
.process-line{
  position:absolute;
  top:30px;
  left:0;right:0;
  height:1px;
  background:var(--line);
  overflow:hidden;
  display:none;
}
@media(min-width:900px){.process-line{display:block}}
.process-line::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.process-line.animate::after{transform:scaleX(1)}

.process-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media(min-width:600px){.process-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.process-steps{grid-template-columns:repeat(4,1fr)}}

.pstep{
  padding:clamp(24px,3.5vw,40px);
  padding-left:0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background 0.35s;
}
@media(min-width:600px){
  .pstep{border-bottom:none;border-right:1px solid var(--line);padding:clamp(28px,4vw,48px)}
  .pstep:last-child{border-right:none}
  .pstep:nth-child(2){border-right:1px solid var(--line)}
}
@media(min-width:900px){
  .pstep{border-right:1px solid var(--line)}
  .pstep:last-child{border-right:none}
}
@media(max-width:599px){.pstep:last-child{border-bottom:none}}
.pstep:hover{background:var(--ghost)}

.pstep-dot{
  width:60px;height:60px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  position:relative;
  z-index:1;
  background:var(--bg);
  transition:border-color 0.35s,background 0.35s,box-shadow 0.35s;
}
.pstep:hover .pstep-dot{
  border-color:var(--blue-dim);
  background:var(--blue-glow2);
  box-shadow:0 0 24px var(--blue-glow);
}
.pstep-dot span{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--blue-hi);
  transition:color 0.3s;
}

/* Ripple on dot */
.pstep-dot::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(0,82,255,0.15);
  animation:pRipple 3s ease-out infinite;
  opacity:0;
}
.pstep:hover .pstep-dot::after{opacity:1}
@keyframes pRipple{
  0%{transform:scale(0.7);opacity:1}
  100%{transform:scale(1.4);opacity:0}
}

.pstep-body h3{
  font-family:var(--f-display);
  font-size:clamp(17px,1.9vw,20px);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--white);
  margin-bottom:10px;
}
.pstep-body p{
  font-size:13px;
  line-height:1.8;
  color:var(--faint);
  font-weight:300;
}

/* ── TEAM ─────────────────────────────────── */
.team-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:clamp(40px,6vw,64px);
}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr)}}

.team-card{
  background:var(--bg2);
  padding:clamp(32px,5vw,60px);
  position:relative;
  overflow:hidden;
  transition:background 0.35s;
}
.team-card:hover{background:#0a0a0a}

.tc-stripe{
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.55s var(--ease);
}
.team-card:hover .tc-stripe{transform:scaleX(1)}

.tc-initial{
  width:60px;height:60px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);
  font-size:26px;
  font-weight:800;
  color:var(--blue-hi);
  letter-spacing:-0.03em;
  margin-bottom:20px;
  transition:border-color 0.3s,background 0.3s;
}
.team-card:hover .tc-initial{border-color:var(--blue-dim);background:var(--blue-glow2)}

.tc-info{margin-bottom:16px}
.tc-info h3{
  font-family:var(--f-display);
  font-size:clamp(22px,2.5vw,28px);
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--white);
  margin-bottom:4px;
}
.tc-role{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-hi);
  opacity:0.7;
}

.tc-bio{
  font-size:14px;
  line-height:1.85;
  color:var(--faint);
  font-weight:300;
  margin-bottom:28px;
}

.tc-footer{
  padding-top:20px;
  border-top:1px solid var(--line);
  transition:border-color 0.3s;
}
.team-card:hover .tc-footer{border-color:var(--blue-dim)}
.tc-link{
  font-family:var(--f-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--blue-hi);
  transition:letter-spacing 0.3s;
}
.tc-link:hover{letter-spacing:0.02em}

/* ── CTA ─────────────────────────────────── */
#cta-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.cta-inner{
  position:relative;
  z-index:1;
  max-width:660px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cta-badge{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--blue-hi);
  background:var(--blue-glow2);
  border:1px solid var(--blue-dim);
  padding:7px 18px;
  border-radius:100px;
  margin-bottom:clamp(24px,4vw,40px);
}
.cta-h2{
  font-family:var(--f-display);
  font-size:clamp(42px,7.5vw,100px);
  font-weight:800;
  line-height:0.98;
  letter-spacing:-0.04em;
  color:var(--white);
  margin-bottom:clamp(20px,3vw,32px);
}
.cta-h2 em{
  font-family:var(--f-serif);
  font-weight:300;
  font-style:italic;
  color:var(--blue-hi);
  letter-spacing:-0.01em;
}
.cta-body{
  max-width:440px;
  text-align:center;
  margin-bottom:clamp(32px,5vw,48px);
}
.cta-actions{margin-bottom:20px}
.cta-note{
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ── FOOTER ─────────────────────────────────── */
#footer{
  border-top:1px solid var(--line);
  padding:clamp(32px,5vw,56px) 0;
}
.footer-body{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
  margin-bottom:28px;
}
.footer-brand .logo{margin-bottom:12px;font-size:17px}
.footer-brand p{
  font-size:12px;
  line-height:1.7;
  color:var(--faint);
}
.footer-nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media(min-width:640px){.footer-nav{flex-direction:row;gap:24px;align-items:center}}
.footer-nav a{
  font-family:var(--f-display);
  font-size:12px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--faint);
  transition:color 0.25s;
}
.footer-nav a:hover{color:var(--blue-hi)}
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--faint);
}
.footer-bar em{font-family:var(--f-serif);font-style:italic;color:var(--blue-hi)}

/* ── RESPONSIVE ─────────────────────────────────── */
@media(max-width:480px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-ghost{justify-content:center;text-align:center}
  .hero-stats{
    flex-direction:column;
    width:100%;
    max-width:none;
    border-radius:var(--r);
  }
  .hstat{padding:14px 20px}
  .hstat-sep{width:100%;height:1px;align-self:stretch}
  .services-head{flex-direction:column}
  .services-desc{max-width:100%;text-align:left}
  #header .btn-pill{display:none}
  .footer-nav{flex-direction:column}
}

@media(max-width:360px){
  .hero-h1{font-size:clamp(40px,13vw,56px)}
  .wrap{padding:0 16px}
  .header-inner{padding:0 16px}
}

/* ── REDUCED MOTION ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.15s!important;
  }
  .js-reveal,.js-split-row .h1-word{transform:none}
  .ticker-inner{animation:none}
  .hero-h1 .h1-heavy::after{animation:none;transform:scaleX(1)}
}

/* ── TOUCH DEVICES ─────────────────────────────────── */
@media(hover:none){
  .svc-card::before,.tc-stripe,.pillar::before{display:none}
  .svc-card:active{background:#0d0d0d}
  .btn-primary:active{transform:scale(0.97)}
  .btn-ghost:active{background:var(--ghost)}
}