/* ============================================================
   ZION INNOVATES — shared stylesheet
   Rewritten to match reference background: deep navy corners,
   one bright saturated blue glow, silver/ice highlights, no violet.
   ============================================================ */

:root{
  --void:#050A1F;
  --navy1:#0A1440;
  --navy2:#122A6E;
  --navy3:#173585;
  --blue:#2F5FFF;
  --blue-deep:#1A3FCC;
  --sky:#3D7FE0;
  --ice:rgba(243,247,255,0.92);
  --white:#FFFFFF;
  --ink:#0B1440;
  --ink-soft:rgba(11,20,64,0.70);
  --ink-dim:rgba(11,20,64,0.46);
  --muted:var(--ink-soft);
  --muted-dim:var(--ink-dim);
  --glass-bg:rgba(11,20,64,0.03);
  --glass-bg-hover:rgba(11,20,64,0.05);
  --glass-br:rgba(11,20,64,0.10);
  --card-bg:#FFFFFF;
  --card-bg-hover:#F7F9FF;
  --card-br:rgba(11,20,64,0.09);
  --card-br-hover:rgba(11,20,64,0.18);
  --display:'Plus Jakarta Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  /* kept for backward compatibility with earlier violet-based rules */
  --violet:#2F5FFF;
  --deep:#050A1F;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--display);
  color:var(--ink);
  background:
    radial-gradient(1000px 600px at 78% 0%, rgba(47,95,255,0.08), transparent 60%),
    linear-gradient(180deg, #F6F9FF 0%, #EEF3FF 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

.bg-layer{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  will-change:transform;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background-image:
    linear-gradient(rgba(47,95,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,95,255,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.2) 75%, transparent 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.2) 75%, transparent 100%);
}
.bg-node{
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 5px rgba(47,95,255,0.12), 0 0 14px rgba(47,95,255,0.5);
  animation:nodePulse 4.5s ease-in-out infinite;
}
.bg-node-1{top:14%; left:18%; animation-delay:0s;}
.bg-node-2{top:8%; left:64%; animation-delay:1.1s;}
.bg-node-3{top:38%; left:82%; animation-delay:2.2s;}
.bg-node-4{top:52%; left:10%; animation-delay:0.6s;}
.bg-node-5{top:72%; left:46%; animation-delay:1.8s;}
.bg-node-6{top:88%; left:74%; animation-delay:3s;}
@keyframes nodePulse{
  0%,100%{opacity:0.35; transform:scale(1);}
  50%{opacity:1; transform:scale(1.6);}
}
.bg-circuit{position:absolute; inset:0; opacity:0.5;}
.bg-circuit path{
  fill:none; stroke:var(--blue); stroke-width:1; stroke-dasharray:6 10; opacity:0.18;
  animation:circuitFlow 40s linear infinite;
}
@keyframes circuitFlow{
  to{stroke-dashoffset:-320;}
}

.bg-sky{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.bg-sun{
  position:absolute;
  top:8%; right:10%;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(200,225,255,0.55) 35%, rgba(143,199,255,0.18) 65%, transparent 75%);
  box-shadow:0 0 80px 40px rgba(143,199,255,0.25), 0 0 140px 80px rgba(200,225,255,0.12);
  animation:sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse{
  0%,100%{transform:scale(1); opacity:0.85;}
  50%{transform:scale(1.08); opacity:1;}
}
.bg-kite{
  position:absolute;
  bottom:36vh; left:10%;
  width:100px; height:auto;
  transform-origin:50% 8%;
  animation:kiteFloat 9s ease-in-out infinite;
}
@keyframes kiteFloat{
  0%{transform:translate(0, 0) rotate(-5deg);}
  20%{transform:translate(22px, -18px) rotate(4deg);}
  40%{transform:translate(-14px, -30px) rotate(-4deg);}
  60%{transform:translate(-28px, -10px) rotate(3deg);}
  80%{transform:translate(10px, -24px) rotate(-3deg);}
  100%{transform:translate(0, 0) rotate(-5deg);}
}
.bg-cloud{
  position:absolute;
  width:120px; height:44px;
  background:rgba(255,255,255,0.8);
  border-radius:100px;
  filter:blur(1px);
}
.bg-cloud::before, .bg-cloud::after{
  content:'';
  position:absolute;
  background:rgba(255,255,255,0.8);
  border-radius:50%;
}
.bg-cloud::before{width:60px; height:60px; top:-28px; left:14px;}
.bg-cloud::after{width:48px; height:48px; top:-18px; right:16px;}
.bg-cloud-1{top:14%; width:210px; height:72px; opacity:0.92; animation:cloudDrift1 48s linear infinite;}
.bg-cloud-1::before{width:96px; height:96px; top:-44px; left:22px;}
.bg-cloud-1::after{width:78px; height:78px; top:-30px; right:26px;}
.bg-cloud-2{top:24%; width:150px; height:54px; opacity:0.8; animation:cloudDrift2 62s linear infinite; animation-delay:-15s;}
.bg-cloud-2::before{width:68px; height:68px; top:-32px; left:16px;}
.bg-cloud-2::after{width:56px; height:56px; top:-20px; right:18px;}
.bg-cloud-3{top:10%; width:250px; height:82px; opacity:0.85; animation:cloudDrift3 70s linear infinite; animation-delay:-40s;}
.bg-cloud-3::before{width:112px; height:112px; top:-50px; left:26px;}
.bg-cloud-3::after{width:92px; height:92px; top:-34px; right:30px;}
.bg-cloud-4{top:32%; width:165px; height:60px; opacity:0.78; animation:cloudDrift1 55s linear infinite; animation-delay:-28s;}
.bg-cloud-4::before{width:74px; height:74px; top:-34px; left:18px;}
.bg-cloud-4::after{width:60px; height:60px; top:-22px; right:20px;}
@keyframes cloudDrift1{
  0%{transform:translateX(-20vw);}
  100%{transform:translateX(120vw);}
}
@keyframes cloudDrift2{
  0%{transform:translateX(-15vw);}
  100%{transform:translateX(115vw);}
}
@keyframes cloudDrift3{
  0%{transform:translateX(-25vw);}
  100%{transform:translateX(125vw);}
}

.bg-mountains{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:-1;
  height:52vh;
  height:52dvh;
  min-height:280px;
  overflow:hidden;
  pointer-events:none;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.bg-mtn{
  position:absolute;
  bottom:0; left:0;
  width:130%;
  height:100%;
}
.bg-mtn path{fill-rule:evenodd;}
.bg-mtn-back{
  opacity:0.32;
  animation:mtnDriftBack 46s ease-in-out infinite;
}
.bg-mtn-back path{fill:var(--sky);}
.bg-mtn-mid{
  opacity:0.26;
  animation:mtnDriftMid 36s ease-in-out infinite;
}
.bg-mtn-mid path{fill:var(--blue);}
.bg-mtn-front{
  opacity:0.22;
  animation:mtnDriftFront 28s ease-in-out infinite;
}
.bg-mtn-front path{fill:var(--navy3);}
@keyframes mtnDriftBack{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-9%);}
}
@keyframes mtnDriftMid{
  0%,100%{transform:translateX(-3%);}
  50%{transform:translateX(-14%);}
}
@keyframes mtnDriftFront{
  0%,100%{transform:translateX(-2%);}
  50%{transform:translateX(-12%);}
}

.bg-trees{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:-1;
  height:14vh;
  height:14dvh;
  min-height:70px;
  overflow:hidden;
  pointer-events:none;
}
.bg-tree{
  position:absolute;
  bottom:0;
  width:34px; height:auto;
  color:var(--navy3);
  opacity:0.4;
  transform-origin:bottom center;
  animation:treeSway 5s ease-in-out infinite;
}
.bg-tree-1{left:6%; width:30px; opacity:0.32; animation-duration:5.4s;}
.bg-tree-2{left:16%; width:44px; opacity:0.42; animation-duration:4.6s; animation-delay:-1.2s;}
.bg-tree-3{left:58%; width:36px; opacity:0.36; animation-duration:5.8s; animation-delay:-2.5s;}
.bg-tree-4{left:78%; width:48px; opacity:0.44; animation-duration:5s; animation-delay:-0.8s;}
.bg-tree-5{left:90%; width:28px; opacity:0.3; animation-duration:4.8s; animation-delay:-3s;}
@keyframes treeSway{
  0%,100%{transform:rotate(-1.5deg);}
  50%{transform:rotate(1.5deg);}
}

.bg-bird{
  position:absolute;
  width:40px; height:20px;
  color:var(--navy3);
  opacity:0.5;
}
.bg-bird path{
  transform-box:fill-box;
  transform-origin:center;
  animation:birdFlap 1.1s ease-in-out infinite;
}
.bg-bird-1{top:16%; animation:birdFly1 34s linear infinite;}
.bg-bird-2{top:22%; width:32px; height:16px; opacity:0.42; animation:birdFly2 42s linear infinite; animation-delay:-10s;}
.bg-bird-2 path{animation-duration:0.9s; animation-delay:-0.3s;}
.bg-bird-3{top:11%; width:36px; height:18px; opacity:0.46; animation:birdFly1 38s linear infinite; animation-delay:-22s;}
.bg-bird-3 path{animation-duration:1s; animation-delay:-0.6s;}
.bg-bird-4{top:28%; width:34px; height:17px; opacity:0.4; animation:birdFly2 36s linear infinite; animation-delay:-4s;}
.bg-bird-4 path{animation-duration:1.05s; animation-delay:-0.1s;}
.bg-bird-5{top:8%; width:30px; height:15px; opacity:0.38; animation:birdFly1 46s linear infinite; animation-delay:-30s;}
.bg-bird-5 path{animation-duration:0.85s; animation-delay:-0.45s;}
.bg-bird-6{top:19%; width:44px; height:22px; opacity:0.48; animation:birdFly2 40s linear infinite; animation-delay:-17s;}
.bg-bird-6 path{animation-duration:1.15s; animation-delay:-0.75s;}
@keyframes birdFly1{
  0%{transform:translateX(-10vw) translateY(0);}
  50%{transform:translateX(55vw) translateY(-18px);}
  100%{transform:translateX(115vw) translateY(0);}
}
@keyframes birdFly2{
  0%{transform:translateX(-10vw) translateY(0);}
  50%{transform:translateX(55vw) translateY(14px);}
  100%{transform:translateX(115vw) translateY(0);}
}
@keyframes birdFlap{
  0%,100%{transform:scaleY(1);}
  50%{transform:scaleY(0.55);}
}

.bg-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
}
.bg-blob-1{
  width:560px; height:560px; top:-140px; right:-100px;
  background:radial-gradient(circle, rgba(47,95,255,0.16), transparent 70%);
  animation:blobFloat1 24s ease-in-out infinite;
}
.bg-blob-2{
  width:480px; height:480px; top:55vh; left:-140px;
  background:radial-gradient(circle, rgba(61,127,224,0.14), transparent 70%);
  animation:blobFloat2 30s ease-in-out infinite;
}
.bg-blob-3{
  width:420px; height:420px; top:110vh; right:-80px;
  background:radial-gradient(circle, rgba(143,199,255,0.18), transparent 70%);
  animation:blobFloat3 26s ease-in-out infinite;
}
@keyframes blobFloat1{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-50px,60px);}
}
@keyframes blobFloat2{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(60px,-40px);}
}
@keyframes blobFloat3{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-40px,-50px);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sky);
  display:flex; align-items:center; gap:8px;
}
.eyebrow-lg{
  font-size:16px;
  font-weight:700;
  letter-spacing:0.1em;
}
.hero-eyebrow{
  font-family:var(--display);
  font-size:18px;
  font-weight:700;
  letter-spacing:0.03em;
}
.hl{
  background:linear-gradient(90deg, var(--sky), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
}

/* ---------- glass card base ---------- */
.glass{
  background:var(--card-bg);
  border:1px solid var(--card-br);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.glass:hover{background:var(--card-bg-hover); transform:translateY(-2px); border-color:var(--card-br-hover); box-shadow:0 14px 32px rgba(0,0,0,0.22);}

/* ---------- nav ---------- */
header{position:sticky; top:0; z-index:100; padding:22px 0 0; width:100%; display:flex; flex-direction:column; align-items:center;}
nav{
  width:100%; max-width:1200px; margin:0 auto; padding:14px 22px 14px 26px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.75);
  border:1px solid var(--glass-br);
  border-radius:999px;
  backdrop-filter:blur(18px);
  box-shadow:0 4px 20px rgba(11,20,64,0.06);
  margin-left:32px; margin-right:32px;
}
.logo{
  font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
  color:var(--ink);
}
.logo-mark{
  width:42px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.logo-mark img{width:100%; height:100%; object-fit:contain;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a.navlink{font-size:14px; color:var(--muted); font-weight:500; transition:color 0.2s ease;}
.nav-links a.navlink:hover{color:var(--ink);}
.nav-cta{
  font-size:13.5px; font-weight:700;
  background:var(--ink); color:var(--white);
  padding:11px 22px; border-radius:999px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(11,20,64,0.22);}

.nav-toggle{
  display:none;
  width:38px; height:38px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none;
  flex-direction:column;
  max-width:1200px; margin:10px 32px 0;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--glass-br);
  border-radius:20px;
  backdrop-filter:blur(18px);
  box-shadow:0 12px 32px rgba(11,20,64,0.12);
  overflow:hidden;
  max-height:0;
  transition:max-height 0.3s ease;
}
.mobile-menu.is-open{max-height:520px;}
.mobile-navlink{
  display:block;
  padding:16px 22px;
  font-size:15px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--glass-br);
}
.mobile-navlink:last-child{border-bottom:none;}
.mobile-navlink-cta{color:var(--blue-deep);}

/* ---------- buttons ---------- */
.btn-primary{
  font-size:14px; font-weight:700;
  background:var(--ink); color:var(--white);
  padding:15px 26px; border-radius:999px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  display:inline-block;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(11,20,64,0.22);}
.btn-ghost{
  font-size:14px; font-weight:600;
  padding:15px 26px; border-radius:999px;
  border:1px solid var(--glass-br);
  color:var(--ink);
  transition:all 0.2s ease;
  display:inline-block;
}
.btn-ghost:hover{background:var(--glass-bg); border-color:rgba(255,255,255,0.3);}

/* ---------- hero ---------- */
.hero{position:relative; padding:88px 0 60px; overflow:visible;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.hero-inner .eyebrow{margin-bottom:22px; display:block;}
/* ---------- hero intro animation ---------- */
@keyframes heroFadeUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes heroArtIn{
  from{opacity:0; transform:translateY(14px) scale(0.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.hero-inner .eyebrow{
  animation:heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:0.05s;
}
h1.hero-title span:nth-of-type(1){
  animation:heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:0.15s;
}
h1.hero-title span:nth-of-type(2){
  animation:heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:0.26s;
}
.hero-sub{
  animation:heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:0.38s;
}
.hero-actions{
  animation:heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:0.5s;
}
.hero-art{
  animation:heroArtIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:0.3s;
}

h1.hero-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(42px, 5.4vw, 66px);
  line-height:1.04; letter-spacing:-0.02em; margin-bottom:24px;
}
h1.hero-title span{display:block; white-space:nowrap;}
h1.hero-title .fade{color:var(--muted); font-weight:700;}
.hero-sub{font-size:16.5px; line-height:1.65; color:var(--muted); max-width:460px; margin-bottom:36px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

.hero-art{position:relative; height:480px;}
.art-glow{
  position:absolute; inset:0;
  background:radial-gradient(220px 220px at 50% 55%, rgba(47,95,255,0.32), transparent 70%);
  filter:blur(6px);
}
.hero-art svg{position:relative; width:100%; height:100%;}
.cloud{
  position:absolute; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,0.55), rgba(143,199,255,0.15));
  filter:blur(1px);
  box-shadow:0 8px 24px rgba(0,0,0,0.25), inset 0 0 20px rgba(255,255,255,0.2);
  animation:float 7s ease-in-out infinite;
}
.cloud.c1{width:56px; height:56px; top:6%; right:8%; animation-delay:0s;}
.cloud.c2{width:34px; height:34px; top:20%; left:2%; animation-delay:1.4s;}
.cloud.c3{width:26px; height:26px; bottom:22%; right:2%; animation-delay:2.6s;}
@keyframes float{0%,100%{transform:translateY(0px);} 50%{transform:translateY(-14px);}}
.tower-group{animation:hover-drift 7s ease-in-out infinite; transform-origin:center;}
@keyframes hover-drift{0%,100%{transform:translateY(0px);} 50%{transform:translateY(-8px);}}

/* ---------- tag pills + stack strip ---------- */
.tagrow{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; padding:16px 0 90px;}
.tagpill{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--glass-br); background:var(--glass-bg);
  letter-spacing:0.02em;
}
.stack-strip{border-top:1px solid var(--glass-br); padding-top:34px; text-align:center;}
.stack-label{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-dim); display:block; margin-bottom:20px;}
.stack-row{display:flex; justify-content:center; flex-wrap:wrap; gap:28px 40px;}
.stack-item{font-family:var(--display); font-weight:700; font-size:15px; color:var(--muted); letter-spacing:-0.01em; transition:color 0.2s ease;}
.stack-item:hover{color:var(--ink);}

/* ---------- section shared ---------- */
section{padding:90px 0; position:relative;}

.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.section-head{max-width:600px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head .eyebrow{margin-bottom:14px; display:block;}
h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px, 3.2vw, 38px);
  letter-spacing:-0.015em; line-height:1.16;
}
.section-head p{margin-top:14px; color:var(--muted); font-size:15.5px; line-height:1.6;}

/* ---------- quick stats ---------- */
#quick-stats{padding:20px 0 40px;}
.quick-stats-row{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:20px; max-width:900px; margin:0 auto;
  border-top:1px solid var(--card-br); border-bottom:1px solid var(--card-br);
  padding:36px 0;
}
.quick-stat{text-align:center;}
.quick-stat .stat-num{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(30px, 4vw, 42px); color:var(--blue-deep); letter-spacing:-0.01em;
}
.quick-stat-label{
  font-size:12.5px; color:var(--muted); margin-top:6px; display:block;
}

/* ---------- familiar / pain points ---------- */
.familiar-wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:20px;}
.familiar-card{
  width:320px; padding:38px 30px; text-align:center;
  border-radius:18px;
  background:rgba(194,207,252,0.42);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1.5px solid rgba(94,140,255,0.45);
  box-shadow:0 20px 44px rgba(11,20,64,0.14), inset 0 1px 0 rgba(255,255,255,0.5);
  position:relative;
  overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.familiar-card::before{
  content:'\201C';
  position:absolute; top:-10px; left:16px;
  font-family:var(--display); font-size:110px; font-weight:800;
  color:rgba(47,95,255,0.16);
  line-height:1; pointer-events:none;
  z-index:0;
}
.familiar-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.12) 22%, transparent 45%);
  pointer-events:none;
  z-index:0;
}
.familiar-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px rgba(5,10,31,0.45), 0 0 0 1px rgba(94,150,255,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  border-color:rgba(94,150,255,0.4);
}
.familiar-icon{
  width:48px; height:48px; border-radius:14px; margin:0 auto 20px;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  box-shadow:0 0 0 6px rgba(47,95,255,0.12), 0 10px 22px rgba(47,95,255,0.35);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.familiar-icon svg{width:21px; height:21px;}
.familiar-quote{
  font-family:var(--display); font-weight:800; font-style:italic; font-size:16.5px; line-height:1.42;
  margin-bottom:14px; color:var(--ink);
  position:relative; z-index:1;
}
.familiar-copy{color:var(--ink-soft); font-size:13.6px; line-height:1.62; position:relative; z-index:1;}

/* ---------- capabilities ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
.cap-grid-2{grid-template-columns:repeat(2, 1fr);}
.cap-grid-3{grid-template-columns:repeat(3, 1fr);}
.cap-card{padding:26px 22px; display:flex; flex-direction:column; gap:20px; min-height:210px;}
.cap-card-lg{padding:36px 32px; min-height:280px; justify-content:flex-start;}
.cap-top{display:flex; justify-content:space-between; align-items:flex-start;}
.cap-icon{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  display:flex; align-items:center; justify-content:center;
}
.cap-icon svg{width:20px; height:20px;}
.cap-arrow{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--glass-br);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:13px;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cap-arrow:hover{background:var(--glass-bg-hover); color:var(--ink); border-color:rgba(11,20,64,0.24);}
.cap-title{font-family:var(--display); font-weight:700; font-size:16.5px;}
.cap-copy{color:var(--muted); font-size:13.8px; line-height:1.55;}

/* ---------- services (expandable list) ---------- */
.services-list{
  max-width:880px; margin:0 auto;
  display:flex; flex-direction:column; gap:16px;
}
.service-row{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--card-br);
  border-left:4px solid transparent;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(11,20,64,0.06);
  transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.service-row.is-open{
  border-color:var(--card-br);
  border-left-color:var(--accent-a, var(--blue));
  box-shadow:0 16px 36px rgba(11,20,64,0.14);
  transform:translateY(-2px);
}
.service-ghost-num{
  position:absolute; top:6px; right:26px;
  font-family:var(--display); font-weight:800; font-size:64px;
  color:var(--ink); opacity:0.04; line-height:1;
  pointer-events:none; user-select:none;
}
.service-header{
  position:relative; width:100%; display:flex; align-items:center; gap:20px;
  padding:28px 28px; background:none; border:none; cursor:pointer;
  text-align:left; font-family:inherit;
}
.service-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(11,20,64,0.16);
  transition:transform 0.3s ease;
}
.service-icon svg{width:23px; height:23px;}
.service-row.is-open .service-icon{transform:scale(1.06);}
.service-heading{display:flex; flex-direction:column; flex-grow:1; gap:4px;}
.service-tagline{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-a, var(--blue-deep));
}
.service-title{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-0.01em; color:var(--ink);}
.service-chevron{
  font-size:18px; color:var(--muted); flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--card-br);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.service-row.is-open .service-chevron{transform:rotate(180deg); color:var(--accent-a, var(--blue-deep)); border-color:var(--accent-a, var(--blue));}

.service-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.4s ease;
}
.service-row.is-open .service-body{grid-template-rows:1fr;}
.service-body-inner{overflow:hidden;}
.service-divider{margin:0 28px; border-top:1px solid var(--card-br);}
.service-desc{
  color:var(--muted); font-size:14.5px; line-height:1.7;
  max-width:560px; padding:20px 28px 0;
}
.service-tags-label{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted-dim); padding:20px 28px 0; display:block;
}
.service-tags{display:flex; flex-wrap:wrap; gap:8px; padding:10px 28px 4px;}
.service-tag{
  font-size:12.5px; font-weight:600; color:var(--accent-a, var(--blue-deep));
  padding:7px 14px; border-radius:999px;
  background:#EEF3FF;
  background:color-mix(in srgb, var(--accent-a, var(--blue)) 10%, white);
}
.service-cta{margin:22px 28px 28px; padding:10px 20px; font-size:13px; display:inline-block;}

/* ---------- approach layers ---------- */
.layer-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.layer-card{padding:28px 24px;}
.layer-num{font-family:var(--mono); font-size:12px; color:var(--sky); display:block; margin-bottom:16px;}
.layer-name{font-family:var(--display); font-weight:800; font-size:19px; margin-bottom:12px;}
.layer-copy{color:var(--muted); font-size:14.2px; line-height:1.62;}

/* ---------- principles ---------- */
.principles{display:grid; grid-template-columns:1.1fr 1fr; gap:18px;}
.principle-stack{display:flex; flex-direction:column; gap:18px;}
.principle-card{padding:26px 26px; display:flex; gap:18px; align-items:flex-start;}
.badge{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg, var(--navy3), var(--blue));
  border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
}
.badge svg{width:24px; height:24px;}
.principle-title{font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:6px;}
.principle-copy{color:var(--muted); font-size:13.8px; line-height:1.55;}
.principle-card.tall{padding:32px 28px; display:block;}
.principle-card.tall .badge{margin-bottom:20px;}

/* ---------- process (6-step) ---------- */
.step-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:56px 20px;}
.step-card{
  position:relative; padding:46px 26px 32px; text-align:center;
  border-color:var(--glass-br);
  transition:background 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent, var(--sky));
  box-shadow:0 20px 40px -12px var(--accent-shadow, rgba(47,95,255,0.35));
}
.step-badge{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:19px; color:#fff;
  border:5px solid var(--void);
  box-shadow:0 8px 20px var(--accent-shadow, rgba(47,95,255,0.35));
  transition:transform 0.3s ease;
}
.step-card:hover .step-badge{transform:translateX(-50%) scale(1.08);}
.step-title{font-family:var(--display); font-weight:700; font-size:17px; line-height:1.32; margin:22px 0 12px;}
.step-divider{
  width:28px; height:2px; margin:0 auto 14px;
  background:linear-gradient(90deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
  border-radius:2px; opacity:0.7;
}
.step-copy{color:var(--muted); font-size:13.4px; line-height:1.6;}
.step-copy + .step-copy{margin-top:10px;}

/* ---------- process journey (zig-zag / mobile timeline) ---------- */
.process-journey{padding:20px 0 10px;}
.process-journey-wrap{
  position:relative;
  max-width:640px; margin:0 auto;
  padding-left:44px;
}
.process-journey-wrap::before{
  content:'';
  position:absolute; left:14px; top:6px; bottom:6px; width:2px;
  background:var(--card-br);
}
.process-path{display:none;}

.process-step{
  position:relative;
  display:flex; align-items:flex-start; gap:20px;
  margin-bottom:42px;
  opacity:0; transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.process-step:last-child{margin-bottom:0;}
.process-step.is-visible{opacity:1; transform:translateY(0);}

.process-node{
  position:absolute; left:-44px; top:0;
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:13px;
  box-shadow:0 6px 16px rgba(11,20,64,0.18);
  transition:transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.4s ease;
  z-index:2;
}
.process-node.is-active{
  transform:scale(1.22);
  box-shadow:0 0 0 6px rgba(47,95,255,0.16), 0 10px 24px rgba(47,95,255,0.35);
}
.process-content{max-width:none;}
.process-content .step-title{
  font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:10px; color:var(--ink);
}
.process-content .step-divider{
  width:26px; height:2px; margin:0 0 12px;
  background:linear-gradient(90deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
  border-radius:2px; opacity:0.7;
}
.process-content .step-copy{color:var(--muted); font-size:13.6px; line-height:1.65;}
.process-content .step-copy + .step-copy{margin-top:8px;}

@media (min-width:901px){
  .process-journey-wrap::before{display:none;}
  .process-journey-wrap{
    max-width:1500px;
    padding-left:0;
    height:650px;
  }
  .process-path{
    display:block;
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none;
  }
  .process-path-bg{fill:none; stroke:var(--card-br); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .process-path-line{
    fill:none; stroke:url(#processGrad); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:3600; stroke-dashoffset:3600;
    transition:stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .process-journey.is-visible .process-path-line{stroke-dashoffset:0;}

  .process-step{
    position:absolute;
    flex-direction:column; align-items:center;
    width:230px; margin-bottom:0;
    gap:0;
    text-align:center;
    transform:translate(-50%, 10px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .process-step.is-visible{transform:translate(-50%, 0);}
  .process-step.is-upper{transform:translate(-50%, -10px);}
  .process-step.is-upper.is-visible{transform:translate(-50%, 0);}

  .step-pos-1{left:8.33%; top:17%;}
  .step-pos-2{left:25%; top:83%;}
  .step-pos-3{left:41.67%; top:17%;}
  .step-pos-4{left:58.33%; top:83%;}
  .step-pos-5{left:75%; top:17%;}
  .step-pos-6{left:91.67%; top:83%;}

  .process-node{
    position:relative; left:auto; top:auto;
    width:64px; height:64px; font-size:20px;
    z-index:3;
  }
  .process-content{
    position:absolute; left:50%; width:230px;
    transform:translateX(-50%);
    z-index:2;
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.6);
    border-radius:16px;
    padding:18px 18px 20px;
    box-shadow:0 10px 30px rgba(11,20,64,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .is-upper .process-content{top:calc(100% + 20px);}
  .is-lower .process-content{bottom:calc(100% + 20px);}
  .process-content .step-divider{margin-left:auto; margin-right:auto;}
}
@media (min-width:901px) and (max-width:1180px){
  .process-journey-wrap{max-width:96vw;}
  .process-step{width:190px;}
  .process-content{width:190px;}
}

/* ---------- what-you-get banner ---------- */
.banner{padding:70px 0; text-align:center;}
.banner .eyebrow{justify-content:center; margin-bottom:20px; font-size:16px; letter-spacing:0.22em;}
.banner .eyebrow.hl{background:linear-gradient(90deg, var(--sky), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.banner h2{font-size:clamp(28px, 4vw, 42px); max-width:760px; margin:0 auto;}
.banner p{color:var(--muted); font-size:15.5px; line-height:1.65; max-width:600px; margin:20px auto 0;}
.capability-preview-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:32px;
  margin-top:44px; padding-top:36px; border-top:1px solid var(--card-br);
  max-width:680px; margin-left:auto; margin-right:auto;
}
.capability-preview{display:flex; flex-direction:column; align-items:center; gap:12px; width:120px;}
.capability-preview-icon{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(11,20,64,0.14);
}
.capability-preview-icon svg{width:22px; height:22px;}
.capability-preview span{font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.3;}

/* ---------- why-us (team) ---------- */
.whyus-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
.whyus-copy h2{margin-bottom:22px;}
.whyus-copy p{color:var(--muted); font-size:16px; line-height:1.75; max-width:480px; margin-bottom:34px;}
.whyus-copy p strong{color:var(--ink); font-weight:700;}
.whyus-actions{display:flex; gap:14px; flex-wrap:wrap;}
.whyus-collage{display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:auto auto; gap:14px;}
.whyus-photo{
  border-radius:18px; border:1px solid var(--glass-br);
  background:linear-gradient(135deg, rgba(47,95,255,0.14), rgba(143,199,255,0.10));
  min-height:150px; position:relative; overflow:hidden;
}
.whyus-photo img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:0;}
.whyus-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,10,31,0) 60%, rgba(5,10,31,0.35) 100%);
  pointer-events:none; z-index:1;
}
.whyus-photo-label{font-family:var(--mono); font-size:11.5px; color:var(--muted-dim); letter-spacing:0.04em; position:relative; z-index:1;}
.whyus-photo.p1{grid-column:1; grid-row:1; min-height:230px;}
.whyus-photo.p2{grid-column:2; grid-row:1 / span 2;}
.whyus-photo.p3{grid-column:1; grid-row:2;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.contact-copy h2{margin-bottom:16px;}
.contact-copy p{color:var(--muted); font-size:15.5px; line-height:1.65; max-width:420px; margin-bottom:28px;}
.contact-card{background:#FFFFFF; border:1px solid var(--card-br); box-shadow:0 12px 40px rgba(11,20,64,0.10); border-radius:26px; padding:34px; color:var(--void);}
.contact-card h3{font-family:var(--display); font-weight:800; font-size:19px; margin-bottom:22px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.field{
  background:#fff; border:1px solid rgba(5,10,31,0.12); border-radius:999px;
  padding:14px 18px; font-size:13.5px; color:var(--void);
  font-family:var(--display); width:100%; outline:none;
  transition:border-color 0.2s ease;
}
.field::placeholder{color:rgba(5,10,31,0.45);}
.field:focus{border-color:var(--blue);}
.field.full{grid-column:1 / -1;}
.contact-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:18px;}
.submit-btn{
  width:46px; height:46px; border-radius:50%;
  background:var(--void); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.2s ease, background 0.2s ease;
  border:none; cursor:pointer; font-size:16px;
}
.submit-btn:hover{transform:translateX(3px); background:var(--blue);}
.social-row{display:flex; gap:8px;}
.social-pill{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(5,10,31,0.14);
  display:flex; align-items:center; justify-content:center;
  color:var(--void); font-family:var(--mono); font-size:11px; font-weight:600;
  cursor:pointer; transition:background 0.2s ease, border-color 0.2s ease;
}
.social-pill:hover{background:rgba(5,10,31,0.06); border-color:rgba(5,10,31,0.28);}

/* ---------- footer ---------- */
footer{padding:70px 0 36px; background:var(--void); color:var(--white); margin-top:60px;}
.footer-top{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.14); margin-bottom:28px;
}
.footer-brand .logo{color:var(--white);}
.footer-tag{font-size:14px; margin-top:10px; max-width:280px; line-height:1.5; color:rgba(224,232,255,0.66);}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:rgba(224,232,255,0.42); margin-bottom:14px; font-weight:500;}
.footer-col a{display:block; font-size:14px; color:rgba(224,232,255,0.66); margin-bottom:9px; transition:color 0.2s ease;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12.5px; color:rgba(224,232,255,0.42); font-family:var(--mono);}

/* ---------- cta ---------- */
.cta{background:var(--blue-deep); color:#fff;}
.cta-inner{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.cta h2{color:#fff; max-width:520px;}
.cta .btn-primary{background:var(--void); color:#fff;}
.cta .btn-primary:hover{background:#0A0D1F;}

/* ---------- sub-page header ---------- */
.page-header{padding:168px 0 60px; text-align:center;}
.page-header .eyebrow{justify-content:center; margin-bottom:20px;}
.page-header h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px, 5vw, 52px); letter-spacing:-0.02em; line-height:1.08;
  max-width:760px; margin:0 auto;
}
.page-header p{color:var(--muted); font-size:16px; line-height:1.65; max-width:560px; margin:20px auto 0;}
.back-link{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-bottom:26px; transition:color 0.2s ease;}
.back-link:hover{color:var(--sky);}

/* ---------- mission / vision ---------- */
.mv-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-bottom:20px;}
.mv-card{
  padding:40px 36px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 44px rgba(11,20,64,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
}
.mv-card::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.12) 30%, transparent 55%);
  pointer-events:none;
  z-index:0;
}
.mv-card::after{
  content:'';
  position:absolute; top:-40%; left:-20%;
  width:70%; height:180%;
  background:linear-gradient(100deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 35%, transparent 55%);
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:0;
}
.mv-icon, .mv-title, .mv-copy{position:relative; z-index:1;}
#mission-vision .mv-card{
  transition:transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.8s ease, box-shadow 0.2s ease;
  opacity:0;
}
#mission-vision .mv-card:nth-child(1){transform:translateX(-90px);}
#mission-vision .mv-card:nth-child(2){transform:translateX(90px);}
#mission-vision.is-visible .mv-card{transform:translateX(0); opacity:1;}
.mv-card:nth-child(1){
  background:linear-gradient(135deg, var(--sky), var(--blue) 130%);
  border:1px solid rgba(148,180,255,0.3);
}
.mv-card:nth-child(2){
  background:linear-gradient(135deg, #6C93F2, var(--sky) 130%);
  border:1px solid rgba(148,180,255,0.3);
}
.mv-icon{
  width:48px; height:48px; border-radius:14px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.mv-icon svg{width:22px; height:22px;}
.mv-title{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-0.02em; margin-bottom:14px; color:#fff;}
.mv-copy{color:rgba(255,255,255,0.82); font-size:15px; line-height:1.75;}
.values-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.value-card{padding:30px 26px;}
.value-num{
  font-family:var(--display); font-weight:800; font-size:34px;
  color:var(--sky); display:block; margin-bottom:14px;
  letter-spacing:-0.02em;
}
.value-title{font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:10px;}
.value-copy{color:var(--muted); font-size:13.8px; line-height:1.6;}

/* ---------- team (carousel) ---------- */
.team-marquee{
  overflow:hidden; padding:30px 0 10px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.team-track{display:flex; gap:22px; width:max-content;}
.team-float{flex-shrink:0; width:250px; animation:team-bob 4.6s ease-in-out infinite;}
.team-float:nth-child(2n){animation-duration:5.3s; animation-delay:0.5s;}
.team-float:nth-child(3n){animation-duration:5.9s; animation-delay:1s;}
.team-float:nth-child(4n){animation-duration:5s; animation-delay:1.5s;}
@keyframes team-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
.team-card{padding:0; overflow:hidden; width:100%;}
.team-photo{
  height:220px;
  background:linear-gradient(135deg, rgba(47,95,255,0.16), rgba(143,199,255,0.12));
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--glass-br);
}
.team-avatar{
  width:76px; height:76px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:26px; color:#fff;
}
.team-info{padding:24px 24px 28px;}
.team-name{font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:4px;}
.team-role{font-family:var(--mono); font-size:12px; color:var(--sky); letter-spacing:0.04em; margin-bottom:14px; display:block;}
.team-tags{display:flex; flex-wrap:wrap; gap:8px;}
.team-tag{font-size:11.5px; color:var(--muted); border:1px solid var(--glass-br); padding:5px 11px; border-radius:999px;}

/* ---------- investment options ---------- */
.option-card{padding:32px 28px; display:flex; flex-direction:column;}
.option-label{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--sky); display:block; margin-bottom:14px;}
.option-title{font-family:var(--display); font-weight:800; font-size:20px; margin-bottom:10px;}
.option-desc{color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px;}
.option-benefits{list-style:none; margin-bottom:22px; flex-grow:1;}
.option-benefits li{
  font-size:13.5px; color:var(--muted); line-height:1.7; padding-left:20px; position:relative;
}
.option-benefits li::before{
  content:'';
  position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%;
  background:var(--sky);
}
.option-price{font-family:var(--display); font-weight:800; font-size:26px; color:var(--ink); margin-bottom:6px;}
.option-price span{font-size:13px; font-weight:500; color:var(--muted);}
.option-disclaimer{font-size:12px; color:var(--muted-dim); line-height:1.5; font-style:italic;}

/* ---------- partners ---------- */
.partners-row{display:flex; justify-content:center; gap:20px; flex-wrap:wrap;}
.partner-badge{
  padding:28px 44px; font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:-0.01em; text-align:center;
}

/* ---------- story timeline ---------- */
/* ---------- story: editorial timeline ---------- */
.story-intro{max-width:680px; margin:0 auto 70px; text-align:center;}
.story-intro .eyebrow{justify-content:center; margin-bottom:20px;}
.story-headline{
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px, 3.4vw, 38px); letter-spacing:-0.015em; line-height:1.2;
  margin-bottom:26px;
}
.story-lead{color:var(--muted); font-size:15.5px; line-height:1.75; margin-bottom:14px;}

.timeline{position:relative; max-width:980px; margin:0 auto 80px;}
.timeline-line{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:var(--card-br); transform:translateX(-50%);
}
.timeline-progress{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--blue), var(--sky));
  transition:height 0.1s linear;
}
.timeline-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:50px 0;
  opacity:0; transform:translateY(28px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.timeline-item.is-visible{opacity:1; transform:translateY(0);}
.timeline-node{
  position:absolute; left:50%; top:58px; transform:translate(-50%, -50%) scale(0.7);
  width:16px; height:16px; border-radius:50%;
  background:var(--card-bg); border:3px solid var(--card-br);
  transition:transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.4s ease, background 0.4s ease;
  z-index:2;
}
.timeline-item.is-visible .timeline-node{
  transform:translate(-50%, -50%) scale(1);
  border-color:var(--blue);
  background:linear-gradient(135deg, var(--blue), var(--sky));
}
.timeline-content{
  width:calc(50% - 50px);
  transition:opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
.timeline-year{
  font-family:var(--display); font-weight:800; font-size:clamp(32px, 4vw, 46px);
  letter-spacing:-0.02em; color:var(--ink); display:block; margin-bottom:10px;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.timeline-item.is-visible .timeline-year{opacity:1; transform:translateY(0);}
.timeline-title{
  font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:14px;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.5s ease 0.08s, transform 0.5s ease 0.08s;
}
.timeline-item.is-visible .timeline-title{opacity:1; transform:translateY(0);}
.timeline-copy{
  color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:10px;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.5s ease 0.16s, transform 0.5s ease 0.16s;
}
.timeline-item.is-visible .timeline-copy{opacity:1; transform:translateY(0);}
.timeline-photos-collage{
  width:calc(50% - 50px);
  height:320px;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  grid-template-rows:1fr 0.8fr;
  gap:12px;
  flex-shrink:0;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.5s ease 0.22s, transform 0.5s ease 0.22s;
}
.timeline-item.is-visible .timeline-photos-collage{opacity:1; transform:translateY(0);}
.timeline-photos-collage .timeline-photo.p1{grid-column:1; grid-row:1 / span 2;}
.timeline-photos-collage .timeline-photo.p2{grid-column:2; grid-row:1;}
.timeline-photos-collage .timeline-photo.p3{grid-column:2; grid-row:2;}

.timeline-photos-collage.variant-b{grid-template-columns:0.85fr 1.15fr;}
.timeline-photos-collage.variant-b .timeline-photo.p1{grid-column:1; grid-row:1;}
.timeline-photos-collage.variant-b .timeline-photo.p2{grid-column:1; grid-row:2;}
.timeline-photos-collage.variant-b .timeline-photo.p3{grid-column:2; grid-row:1 / span 2;}

.timeline-photos-collage.variant-c{grid-template-rows:0.75fr 1.25fr;}
.timeline-photos-collage.variant-c .timeline-photo.p1{grid-column:1 / span 2; grid-row:1;}
.timeline-photos-collage.variant-c .timeline-photo.p2{grid-column:1; grid-row:2;}
.timeline-photos-collage.variant-c .timeline-photo.p3{grid-column:2; grid-row:2;}
.timeline-photo{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--card-br);
  background:linear-gradient(135deg, rgba(47,95,255,0.12), rgba(143,199,255,0.10));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.timeline-photo::before{
  content:'';
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(11,20,64,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,20,64,0.05) 1px, transparent 1px);
  background-size:16px 16px;
}
.timeline-photo img{width:100%; height:100%; object-fit:cover; object-position:center 20%; position:relative; z-index:1;}
.timeline-photo-label{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:9.5px; color:var(--muted-dim);
  letter-spacing:0.02em; text-align:center; padding:0 6px;
}
.timeline-stats{display:flex; gap:28px; margin-top:20px; flex-wrap:wrap;}
.timeline-stat{display:flex; flex-direction:column;}
.stat-num{font-family:var(--display); font-weight:800; font-size:28px; color:var(--blue-deep);}
.stat-label{font-size:12px; color:var(--muted); margin-top:2px;}
.timeline-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.timeline-tag{
  font-family:var(--mono); font-size:11px; color:var(--ink-soft);
  border:1px solid var(--card-br); padding:6px 12px; border-radius:999px;
}
.timeline-shift{
  display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--ink);
}
.timeline-shift-sm{font-size:11px; color:var(--muted);}
.shift-arrow{color:var(--sky);}
.timeline-item-strong .timeline-content{
  background:var(--card-bg); border:1px solid var(--card-br); border-radius:18px;
  padding:28px 26px; box-shadow:0 8px 24px rgba(11,20,64,0.10);
}

.story-turning-point{max-width:600px; margin:0 auto; text-align:center;}
.turning-line{
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px, 2.8vw, 30px); letter-spacing:-0.01em; line-height:1.4;
  color:var(--ink); margin-bottom:6px;
}
.turning-line:last-child{color:var(--muted); font-weight:600; font-size:clamp(16px, 2vw, 20px);}

/* ---------- team (grid, homepage) ---------- */
.team2-marquee{
  overflow:hidden;
  padding:34px 0;
  margin:-14px 0 -8px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.team2-track{
  display:flex;
  gap:16px;
  width:max-content;
}
.team2-card{
  padding:26px 18px; text-align:center; width:150px; flex-shrink:0;
  transition:transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
  position:relative;
  filter:blur(2.5px);
  opacity:0.62;
}
.team2-card.is-active{
  transform:scale(1.16);
  z-index:2;
  box-shadow:0 16px 36px rgba(11,20,64,0.18);
  border-color:var(--card-br-hover);
  filter:blur(0);
  opacity:1;
}
.team2-marquee.no-motion .team2-card{filter:none; opacity:1;}
.team2-avatar{
  width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:20px; color:#fff;
  overflow:hidden;
}
.team2-avatar-photo{background:none;}
.team2-avatar-photo img{width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block;}
.team2-name{font-family:var(--display); font-weight:700; font-size:14.5px; margin-bottom:4px;}
.team2-role{font-size:11.5px; color:var(--muted); line-height:1.4; display:block;}

/* ---------- transparency chart ---------- */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.chart-card{padding:32px 30px;}
.chart-period{font-family:var(--mono); font-size:12px; color:var(--sky); margin-bottom:22px; letter-spacing:0.04em;}
.chart-row{display:grid; grid-template-columns:90px 1fr 52px; gap:12px; align-items:center; margin-bottom:14px;}
.chart-label{font-size:13px; color:var(--muted);}
.chart-track{height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden;}
.chart-fill{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--blue), var(--sky));}
.chart-pct{font-family:var(--mono); font-size:12px; color:var(--ink); text-align:right;}

/* ---------- clients (sliding marquee) ---------- */
.client-marquee{
  overflow:hidden;
  padding:30px 0 10px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.client-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:client-scroll 48s linear infinite;
}
.client-marquee:hover .client-track{animation-play-state:paused;}
@keyframes client-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.client-card{
  width:280px; flex-shrink:0;
  padding:34px 28px; text-align:center;
  position:relative; overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.client-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
}
.client-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,20,64,0.14);
  border-color:var(--accent-a, var(--blue));
}
.client-icon{
  width:52px; height:52px; border-radius:15px; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--accent-a, var(--blue)), var(--accent-b, var(--sky)));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(11,20,64,0.16);
}
.client-icon svg{width:24px; height:24px;}
.client-logo{
  width:64px; height:64px; border-radius:16px; margin:0 auto 18px;
  background:#fff;
  border:1px solid var(--card-br);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(11,20,64,0.10);
  padding:8px;
}
.client-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.client-sector{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-a, var(--blue-deep));
  display:block; margin-bottom:10px;
}
.client-name{
  font-family:var(--display); font-weight:800; font-size:18px; line-height:1.35; color:var(--ink);
  min-height:48px; display:flex; align-items:center; justify-content:center;
}

/* ---------- project highlights (sliding row, Foxico-style) ---------- */
.highlights-split{
  display:grid; grid-template-columns:minmax(384px, 0.85fr) 1.15fr;
  gap:48px; align-items:center;
  max-width:1320px; margin:0 auto;
}
.highlights-left{display:flex; flex-direction:column;}
.highlights-progress{display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.highlights-progress-num{
  font-family:var(--mono); font-weight:600; font-size:13px; color:var(--blue-deep);
}
.highlights-progress-line{
  width:60px; height:2px; background:var(--card-br); border-radius:2px; overflow:hidden;
}
.highlights-progress-fill{
  height:100%; width:16.66%; background:var(--blue);
  transition:width 0.4s ease;
}
.highlights-text{
  transition:opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  margin-bottom:28px;
}
.highlights-text.hl-out{
  opacity:0; transform:translateY(-8px); filter:blur(3px);
}
.highlights-text.hl-in-start{
  transition:none !important;
  opacity:0; transform:translateY(8px); filter:blur(3px);
}
.highlights-eyebrow{margin-bottom:16px; display:inline-flex;}
.highlight-title-lg{
  font-family:var(--display); font-weight:800; font-size:clamp(30px, 3.4vw, 44px);
  color:var(--ink); margin-bottom:16px; letter-spacing:-0.02em; line-height:1.1;
}
.highlight-desc-lg{
  color:var(--muted); font-size:15px; line-height:1.75; max-width:384px; margin-bottom:18px;
}
.highlights-left .highlight-tag{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--blue-deep); display:inline-block;
  border:1px solid var(--card-br); padding:7px 14px; border-radius:999px;
}
.highlights-cta{align-self:flex-start;}

.highlights-right{position:relative;}
.highlights-row-wrap{
  overflow:hidden;
  outline:none;
  padding:44px 0;
  margin:-44px 0;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.highlights-row{
  display:flex; gap:18px;
  transition:transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.highlights-card{
  flex:0 0 auto;
  width:210px;
  display:flex; flex-direction:column; gap:10px;
  transform:scale(1);
  transform-origin:left center;
  transition:transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.5s ease;
  position:relative;
  filter:blur(2.4px);
}
.highlights-card.is-active{
  transform:scale(1.18);
  z-index:2;
  filter:blur(0);
  margin-right:44px;
}
.highlights-card-tag{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color 0.4s ease;
}
.highlights-card.is-active .highlights-card-tag{color:var(--blue-deep);}
.highlights-card .highlight-photo{
  height:290px; border-radius:20px;
  box-shadow:0 16px 40px rgba(11,20,64,0.14);
  border:1px solid var(--card-br);
  transition:box-shadow 0.5s ease;
}
.highlights-card.is-active .highlight-photo{
  box-shadow:0 26px 60px rgba(11,20,64,0.24);
}

.highlights-row-controls{
  display:flex; align-items:center; gap:16px;
  margin-top:26px;
}
.highlights-arrow{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--card-br); background:var(--card-bg);
  color:var(--ink); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.highlights-arrow:hover{background:var(--blue); color:#fff; border-color:var(--blue); transform:scale(1.06);}
.highlights-dots{display:flex; gap:8px; margin-left:auto;}
.highlights-dot{
  width:8px; height:8px; border-radius:999px; border:none;
  background:var(--card-br); cursor:pointer; padding:0;
  transition:width 0.3s ease, background 0.3s ease;
}
.highlights-dot.is-active{width:22px; background:var(--blue);}

.highlight-photo{
  height:100%;
  background:linear-gradient(135deg, rgba(47,95,255,0.14), rgba(143,199,255,0.12));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.highlight-photo::before{
  content:'';
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(11,20,64,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,20,64,0.05) 1px, transparent 1px);
  background-size:24px 24px;
}
.highlight-photo img{
  width:100%; height:100%;
  object-fit:cover;
  position:relative; z-index:1;
  display:block;
}
.highlight-photo-label{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:12px; color:var(--muted-dim);
  letter-spacing:0.04em;
  pointer-events:none;
}

/* ---------- residential projects ---------- */
.projects-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:28px;}
.project-card{padding:24px 22px;}
.project-icon{
  width:44px; height:44px; border-radius:13px; margin-bottom:16px;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(47,95,255,0.28);
}
.project-icon svg{width:22px; height:22px;}
.project-loc{font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:8px;}
.project-spec{font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.5;}
.project-value{font-family:var(--mono); font-size:15px; color:var(--sky); font-weight:600;}
.section-closing{text-align:center; color:var(--muted); font-size:15px; line-height:1.65; max-width:640px; margin:0 auto; font-style:italic;}

/* ---------- testimonials ---------- */
.testimonial-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.testimonial-card{padding:26px 24px; display:flex; flex-direction:column;}
.testimonial-stars{display:flex; gap:3px; margin-bottom:14px;}
.testimonial-stars svg{width:15px; height:15px; color:#F5A623;}
.testimonial-bubble{
  position:relative;
  background:#F2F5FF;
  border-radius:16px 16px 16px 4px;
  padding:18px 20px;
  margin-bottom:20px;
}
.testimonial-bubble-tail{
  position:absolute; bottom:0; left:-6px;
  width:16px; height:16px;
  background:#F2F5FF;
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.testimonial-quote{font-size:14.5px; line-height:1.65; color:var(--ink);}
.testimonial-footer{display:flex; align-items:center; gap:12px; margin-top:auto;}
.testimonial-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.testimonial-avatar svg{width:19px; height:19px;}
.testimonial-meta{display:flex; flex-direction:column; flex-grow:1;}
.testimonial-name{font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink);}
.testimonial-sub{font-size:11.5px; color:var(--muted);}
.testimonial-verified{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:0.04em; color:var(--blue-deep);
  background:#EAF1FF; padding:4px 9px; border-radius:999px;
  white-space:nowrap;
}

/* ---------- faq accordion ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto;}
.faq-item{padding:22px 26px; cursor:pointer;}
.faq-item summary{
  font-family:var(--display); font-weight:700; font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:20px; color:var(--sky); flex-shrink:0; transition:transform 0.2s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--muted); font-size:14px; line-height:1.65; margin-top:14px;}

/* ---------- timeline photo lightbox ---------- */
.timeline-photo{cursor:pointer;}
.timeline-photo img{transition:transform 0.3s ease;}
.timeline-photo:hover img{transform:scale(1.05);}
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,10,31,0.88);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
  opacity:0;
  transition:opacity 0.25s ease;
}
.lightbox.is-open{display:flex; opacity:1;}
.lightbox-stage{
  max-width:900px; max-height:82vh;
  display:flex; flex-direction:column; align-items:center;
  transform:scale(0.96);
  transition:transform 0.25s ease;
}
.lightbox.is-open .lightbox-stage{transform:scale(1);}
.lightbox-stage img{
  max-width:100%; max-height:74vh;
  border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
  object-fit:contain;
}
.lightbox-caption{
  color:rgba(243,247,255,0.75);
  font-size:13px; margin-top:16px; text-align:center;
  font-family:var(--mono);
}
.lightbox-close{
  position:absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,0.2);}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:26px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, transform 0.2s ease;
}
.lightbox-nav:hover{background:rgba(255,255,255,0.2);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
@media (max-width:640px){
  .lightbox{padding:16px;}
  .lightbox-nav{width:42px; height:42px; font-size:20px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
  .lightbox-close{top:12px; right:12px; width:38px; height:38px;}
}

/* ---------- founder's note ---------- */
.founder-section{padding:80px 0;}
.founder-section .eyebrow{justify-content:center; display:flex; margin-bottom:26px;}
.founder-placeholder{max-width:680px; margin:0 auto; padding:40px 40px; text-align:center;}
.founder-placeholder p{color:var(--muted); font-size:14.5px; line-height:1.7;}
.founder-signoff{text-align:center; font-family:var(--display); font-weight:700; font-size:17px; margin-top:28px; color:var(--ink);}

/* ---------- contact success ---------- */
.contact-success{font-size:12.5px; color:var(--blue-deep); margin-top:12px; text-align:center; font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{height:360px; order:-1;}
  .cap-grid{grid-template-columns:repeat(2, 1fr);}
  .layer-grid{grid-template-columns:1fr;}
  .quick-stats-row{grid-template-columns:repeat(2, 1fr); row-gap:24px;}
  .principles{grid-template-columns:1fr;}
  .step-grid{grid-template-columns:repeat(2, 1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .whyus-grid{grid-template-columns:1fr; gap:36px;}
  .whyus-copy p{max-width:none;}
  .mv-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr 1fr;}
  .chart-grid{grid-template-columns:1fr;}
  .projects-grid{grid-template-columns:1fr 1fr;}
  .highlights-split{grid-template-columns:1fr; gap:32px;}
  .highlight-desc-lg{max-width:none;}
  .testimonial-grid{grid-template-columns:1fr;}
  .timeline-content{width:calc(50% - 34px);}
}
@media (max-width:1050px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{display:flex;}
}
@media (max-width:640px){
  .mobile-menu{margin-left:16px; margin-right:16px;}
  nav{margin-left:16px; margin-right:16px;}
  .wrap{padding:0 20px;}
  .hero{padding:56px 0 30px;}
  .bg-mountains{height:90px;}
  .bg-kite{bottom:13vh; width:70px;}
  .timeline-photo{height:80px;}
  h1.hero-title{font-size:clamp(30px, 8.5vw, 42px);}
  .quick-stats-row{grid-template-columns:1fr 1fr; row-gap:26px;}
  .cap-grid{grid-template-columns:1fr;}
  .step-grid{grid-template-columns:1fr; gap:44px 0;}
  .familiar-card{width:100%;}
  .field-row{grid-template-columns:1fr;}
  .footer-top{flex-direction:column;}
  .page-header{padding:130px 0 40px;}
  .values-grid{grid-template-columns:1fr;}
  .team-float{width:220px;}
  .team2-card{width:130px;}
  .projects-grid{grid-template-columns:1fr;}
  .highlights-card{width:160px;}
  .highlights-card .highlight-photo{height:220px;}
  .chart-row{grid-template-columns:70px 1fr 44px; gap:8px;}
  .partners-row{flex-direction:column; align-items:center;}
  .client-card{width:230px;}

  .service-ghost-num{font-size:44px; top:2px; right:16px;}
  .service-header{gap:14px; padding:20px 18px;}
  .service-icon{width:40px; height:40px;}
  .service-icon svg{width:18px; height:18px;}
  .service-title{font-size:17px;}
  .service-desc{padding:16px 18px 0;}
  .service-tags-label{padding:16px 18px 0;}
  .service-tags{padding:10px 18px 4px;}
  .service-cta{margin:18px 18px 22px;}

  .timeline-line{left:14px; transform:none;}
  .timeline-item{flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:34px 0 34px 40px;}
  .timeline-node{left:14px; top:6px; transform:translate(-50%, 0) scale(0.7);}
  .timeline-item.is-visible .timeline-node{transform:translate(-50%, 0) scale(1);}
  .timeline-content{width:100%; order:1;}
  .timeline-photos-collage{
    width:100%; margin-top:20px; height:auto; order:2;
    grid-template-columns:repeat(3, 1fr) !important;
    grid-template-rows:auto !important;
    gap:8px !important;
  }
  .timeline-photos-collage .timeline-photo{
    grid-column:auto !important;
    grid-row:auto !important;
    height:110px !important;
  }
}

a:focus-visible, button:focus-visible{outline:2px solid var(--sky); outline-offset:3px;}