/* ==========================================================================
   Alpha Land Surveys — one-page site
   Sections: 1 tokens · 2 base · 3 layout · 4 controls · 5 loader · 6 chrome
             7 hero · 8 marquee · 9 sections · 10 cards/3D · 11 contact/footer
             12 responsive · 13 motion
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */
:root{
  --paper:#F4F2EC; --paper-2:#EAE7DD; --surface:#FFFFFF; --surface-2:#F8F7F2;
  --ink:#0A1622; --ink-2:#15232F; --muted:#4B565F; --faint:#7E8892;
  --line:#E2DED2; --line-strong:#CBC5B4;
  --accent:#C2410C; --accent-2:#E2632A; --accent-soft:rgba(194,65,12,.09);
  --cyan:#0E7490; --cyan-2:#0E9BB5; --cyan-soft:rgba(14,116,144,.09);
  --amber:#C98A16; --amber-soft:rgba(201,138,22,.10);
  --panel-1:#04101A; --panel-2:#0A2230; --panel-line:rgba(120,220,240,.14);
  --on-dark:#EAF4F6; --on-dark-dim:#9FB3BC;
  --shadow-sm:0 2px 10px rgba(10,22,34,.06);
  --shadow-md:0 14px 34px -14px rgba(10,22,34,.22);
  --shadow-lg:0 30px 70px -30px rgba(10,22,34,.34);
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --shell:1200px; --gutter:22px; --header-h:70px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------- 2. base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.028em; line-height:1.06; font-family:var(--font); }
h1{ font-size:clamp(29px,3.5vw,52px); }
h2{ font-size:clamp(27px,3.7vw,46px); }
h3{ font-size:19px; letter-spacing:-.015em; line-height:1.3; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
em{ font-style:normal; color:var(--accent); }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }
[id]{ scroll-margin-top:calc(var(--header-h) + 18px); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------- 3. layout */
.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding:clamp(58px,7.4vw,104px) 0; position:relative; }
.section--tight{ padding:clamp(40px,5vw,64px) 0; }
.bg-soft{ background:var(--paper-2); }
.bg-surface{ background:var(--surface); }
.center{ text-align:center; }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(26px,3.4vw,44px); }
.section-head .aside{ max-width:44ch; color:var(--muted); font-size:14.6px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.75; }
.grey{ color:var(--muted); }
.small{ font-size:13.6px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }

/* ----------------------------------------------------------- 4. controls */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 24px; border-radius:999px; font-weight:650; font-size:15px; letter-spacing:-.01em;
  border:1px solid transparent; transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 12px 28px -12px rgba(194,65,12,.6); }
.btn--accent:hover{ background:var(--accent-2); transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(194,65,12,.65); }
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--light{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn--light:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.btn--sm{ padding:11px 18px; font-size:13.6px; }
.btn--block{ width:100%; }
.lbl-sm{ display:none; }
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:12.6px; font-weight:550; color:var(--muted);
}
.pill .pip{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px var(--cyan-soft); }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:650; color:var(--accent); }
.link-arrow svg{ width:16px; height:16px; transition:transform .35s var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(5px); }
.icon-btn{
  display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:border-color .3s var(--ease),transform .3s var(--ease-out),background .3s var(--ease);
}
.icon-btn:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.theme-toggle{ display:none; }
.icon-btn svg{ width:19px; height:19px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:0 0 10px 0; }
.skip:focus{ left:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------------- 5. loader */
#loader{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  background:linear-gradient(160deg,#04101A 0%,#0A2230 100%); color:#EAF4F6;
  transition:opacity .6s var(--ease),visibility .6s;
}
#loader::before{
  content:""; position:absolute; inset:0; opacity:.9;
  background:
    radial-gradient(680px 420px at 74% 16%,rgba(28,190,215,.20),transparent 70%),
    radial-gradient(560px 400px at 18% 84%,rgba(226,99,42,.18),transparent 72%);
}
#loader.is-done{ opacity:0; visibility:hidden; }
.ldr{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:24px; text-align:center; }
.ldr__grid{ position:absolute; inset:-40px -60px; opacity:.5;
  background-image:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%); }
.ldr__mark{ display:flex; gap:.02em; font-size:clamp(30px,6.6vw,58px); font-weight:800; text-transform:uppercase; letter-spacing:.06em; overflow:hidden; }
.ldr__mark span{ display:block; opacity:0; transform:translateY(.8em) rotate(3deg); animation:ldrIn .7s var(--ease-out) forwards; animation-delay:calc(var(--n) * 52ms + 100ms); }
@keyframes ldrIn{ to{ opacity:1; transform:none } }
.ldr__sub{ margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.42em; text-transform:uppercase; color:var(--on-dark-dim); opacity:0; animation:ldrFade .7s var(--ease) .5s forwards; }
.ldr__bar{ margin-top:26px; width:min(280px,64vw); height:2px; background:rgba(255,255,255,.16); border-radius:99px; overflow:hidden; opacity:0; animation:ldrFade .5s var(--ease) .6s forwards; }
.ldr__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan-2),var(--accent-2)); animation:ldrFill 1.7s cubic-bezier(.5,.05,.2,1) .2s forwards; }
@keyframes ldrFill{ 0%{width:0} 45%{width:54%} 74%{width:80%} 100%{width:100%} }
.ldr__count{ margin-top:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; color:var(--on-dark-dim); opacity:0; animation:ldrFade .5s var(--ease) .6s forwards; }
@keyframes ldrFade{ to{ opacity:1 } }

/* ------------------------------------------------------------- 6. chrome */
.topbar{ background:var(--ink); color:rgba(244,242,236,.78); font-size:12.4px; letter-spacing:.03em; }
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover{ color:#fff; }
.topbar svg{ width:13px; height:13px; opacity:.8; }
.topbar .dot{ width:6px; height:6px; border-radius:50%; background:#37D39B; display:inline-block; box-shadow:0 0 0 4px rgba(55,211,155,.18); }
.header{
  position:sticky; top:0; z-index:120; background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.header.is-stuck{ border-color:var(--line); box-shadow:0 10px 30px -22px rgba(10,22,34,.4); }
.header__inner{ display:flex; align-items:center; gap:18px; min-height:var(--header-h); }
.wordmark{ display:flex; flex-direction:column; line-height:1; margin-right:auto; }
.wordmark__name{ font-weight:800; font-size:22px; letter-spacing:.02em; text-transform:uppercase; }
.wordmark__sub{ margin-top:5px; font-family:var(--mono); font-size:8.6px; letter-spacing:.34em; text-transform:uppercase; color:var(--faint); }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{ padding:9px 13px; border-radius:999px; font-size:14.2px; font-weight:550; color:var(--muted); transition:color .25s var(--ease),background .25s var(--ease); }
.nav a:hover{ color:var(--ink); background:var(--surface-2); }
.nav a[aria-current]{ color:var(--ink); }
.nav a[aria-current]::after{ content:""; display:block; height:2px; margin-top:6px; border-radius:2px; background:var(--accent); }
.header__actions{ display:flex; align-items:center; gap:9px; margin-left:6px; }
.burger{ display:none; }
.burger span{ display:block; width:19px; height:1.7px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease-out),opacity .3s var(--ease); }
.burger span+span{ margin-top:5px; }
.burger.is-open span:nth-child(1){ transform:translateY(6.7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg); }
.drawer{ position:fixed; inset:0; z-index:200; display:none; }
.drawer.open{ display:block; }
.drawer__bd{ position:absolute; inset:0; background:color-mix(in srgb,var(--ink) 55%,transparent); backdrop-filter:blur(4px); animation:fade .3s var(--ease); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,88vw); background:var(--surface);
  border-left:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg); animation:slideIn .45s var(--ease-out);
}
@keyframes slideIn{ from{ transform:translateX(100%) } to{ transform:none } }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.drawer__links{ display:flex; flex-direction:column; padding:14px 0; }
.drawer__links a{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:15px 4px; border-bottom:1px solid var(--line); font-size:18px; font-weight:600; }
.drawer__links a span{ font-family:var(--mono); font-size:11px; color:var(--faint); }
.drawer__links a:active{ color:var(--accent); }
.drawer__foot{ margin-top:auto; padding-top:18px; display:grid; gap:11px; }
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:150; display:none;
  grid-template-columns:repeat(4,1fr); gap:2px; padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--line);
}
.mbar a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px; border-radius:12px; font-size:10.4px; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
.mbar a svg{ width:20px; height:20px; }
.mbar a.primary{ color:#fff; background:var(--accent); }
.fab{
  position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:140;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity .35s var(--ease),transform .45s var(--ease-out);
}
.fab.show{ opacity:1; pointer-events:auto; transform:none; }
.fab svg{ width:19px; height:19px; }
#toast{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translate(-50%,16px);
  z-index:300; max-width:min(92vw,460px); padding:13px 20px; border-radius:999px;
  background:var(--ink); color:var(--paper); font-size:13.6px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease),transform .4s var(--ease-out);
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* --------------------------------------------------------------- 7. hero */
.hero{ padding:clamp(26px,4vw,54px) 0 clamp(40px,5vw,72px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(720px 520px at 18% 12%,#000 0%,transparent 74%);
}
.hero__grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(28px,4vw,58px); align-items:center; position:relative; }
.hero h1{ margin-top:20px; max-width:16ch; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln>span{ display:block; transform:translateY(108%); }
html.is-ready .hero h1 .ln>span{ transform:none; transition:transform 1.05s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms + 120ms); }
.hero__rot{ margin-top:20px; font-size:clamp(16px,1.6vw,19px); color:var(--muted); }
.rotator{ display:inline-block; position:relative; vertical-align:bottom; min-width:9.6ch; }
.rotator .swap{ position:absolute; left:0; top:0; white-space:nowrap; font-weight:700; color:var(--accent); opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease),transform .5s var(--ease-out); }
.rotator .swap.on{ opacity:1; transform:none; }
.rotator .sizer{ visibility:hidden; font-weight:700; }
.lede{ margin-top:18px; font-size:16.4px; color:var(--muted); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero__note{ display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; font-size:13px; color:var(--faint); }
.hero__note span{ display:inline-flex; align-items:center; gap:7px; }
.hero__note svg{ width:15px; height:15px; color:var(--cyan); }

/* the 3D instrument viewport */
.hud{ position:absolute; inset:0; pointer-events:none; font-family:var(--mono); font-size:9.6px; letter-spacing:.14em; color:rgba(180,225,240,.72); text-transform:uppercase; }
.hud__c{ position:absolute; width:14px; height:14px; border:1px solid rgba(150,230,250,.5); }
.hud__c--tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
.hud__c--tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.hud__c--bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
.hud__c--br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.hud__tl{ position:absolute; top:16px; left:34px; display:grid; gap:3px; }
.hud__br{ position:absolute; bottom:16px; right:34px; text-align:right; display:grid; gap:3px; }
.hud b{ color:#8FF0FF; font-weight:600; }
.hud .bar{ display:inline-block; width:52px; height:3px; border-radius:2px; background:rgba(150,230,250,.25); overflow:hidden; vertical-align:1px; }
.hud .bar i{ display:block; height:100%; background:#8FF0FF; animation:scanBar 2.6s var(--ease) infinite; }
@keyframes scanBar{ 0%{width:14%} 55%{width:82%} 100%{width:14%} }
.float-tag{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-md); font-size:12.4px; font-weight:600; white-space:nowrap;
}
.float-tag svg{ width:15px; height:15px; color:var(--cyan); }
.float-tag--a{ top:24%; left:-30px; animation:floaty 6.5s ease-in-out infinite; }
.float-tag--b{ bottom:22%; left:-30px; animation:floaty 7.4s ease-in-out .8s infinite; }
.float-tag--c{ top:52%; right:-30px; animation:floaty 8.1s ease-in-out .4s infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }
.cue{ display:flex; align-items:center; gap:10px; margin-top:26px; font-family:var(--mono); font-size:10.4px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.cue i{ display:block; width:34px; height:1px; background:var(--line-strong); position:relative; overflow:hidden; }
.cue i::after{ content:""; position:absolute; inset:0; background:var(--accent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)} }

/* ------------------------------------------------------------ 8. marquee */
.marquee{ border-block:1px solid var(--line); background:var(--surface); overflow:hidden; }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marq 40s linear infinite; }
.marquee span{
  display:inline-flex; align-items:center; padding:16px 0; font-family:var(--mono); font-size:12.6px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.marquee span::after{ content:""; width:5px; height:5px; margin:0 24px; border-radius:50%; background:var(--accent); }
@keyframes marq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ------------------------------------------------------------ 9. sections */
/* services */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,22px); }
.svc{
  position:relative; padding:26px 24px 24px; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); transform-style:preserve-3d;
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease-out);
}
.svc::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(340px 200px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);
  transition:opacity .5s var(--ease); mix-blend-mode:soft-light;
}
.svc:hover::after{ opacity:1; }
[data-tilt]{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); }
.svc__ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.svc__ico svg{ width:24px; height:24px; }
.svc:nth-child(3n+2) .svc__ico{ background:var(--cyan-soft); color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 22%,transparent); }
.svc:nth-child(3n) .svc__ico{ background:var(--amber-soft); color:var(--amber); border-color:color-mix(in srgb,var(--amber) 24%,transparent); }
.svc p{ margin-top:10px; color:var(--muted); font-size:14.6px; }
.svc__meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.svc__meta span{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:4px 9px; }

/* about / why */
.about__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about__media img{ width:100%; aspect-ratio:3/2.1; object-fit:cover; }
.about__badge{
  position:absolute; left:16px; bottom:16px; padding:12px 16px; border-radius:14px;
  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(8px);
  border:1px solid var(--line); box-shadow:var(--shadow-md); font-size:12.6px; color:var(--muted);
}
.about__badge b{ display:block; color:var(--ink); font-size:14.4px; }
.points{ display:grid; gap:14px; margin-top:22px; }
.points li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--muted); }
.points svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--cyan); }
.points b{ color:var(--ink); font-weight:650; }
.counters{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:26px; }
.cstat{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; background:var(--surface-2); }
.cstat b{ display:block; font-size:26px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.cstat b span{ display:inline; font:inherit; }
.cstat span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* process */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
.steps::before{ content:""; position:absolute; left:6%; right:6%; top:26px; height:1px; background:var(--line); }
.step{ position:relative; padding-top:56px; }
.step__n{
  position:absolute; top:0; left:0; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:14px; font-weight:700;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--accent); box-shadow:var(--shadow-sm);
}
.step h3{ font-size:16.4px; }
.step p{ margin-top:8px; color:var(--muted); font-size:14px; }

/* showreel */
.reel__frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; background:#050D14;
  box-shadow:var(--shadow-lg); aspect-ratio:16/9;
}
.reel__frame img.reel__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
#reelVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,26,.06) 30%,rgba(4,16,26,.72) 100%);
}
.reel__play{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center; gap:0; color:#fff;
}
.reel__play .ring{
  position:relative; width:86px; height:86px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px);
  transition:transform .4s var(--ease-out),background .35s var(--ease);
}
.reel__play:hover .ring{ transform:scale(1.07); background:rgba(255,255,255,.22); }
.reel__play .ring::before{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(255,255,255,.24); animation:pulseRing 2.6s var(--ease) infinite; }
@keyframes pulseRing{ 0%{ transform:scale(.9); opacity:.9 } 70%{ transform:scale(1.16); opacity:0 } 100%{ opacity:0 } }
.reel__play svg{ width:26px; height:26px; margin-left:3px; }
.reel__frame.is-playing .reel__play{ opacity:0; pointer-events:none; }
.reel__meta{ position:absolute; left:20px; right:20px; bottom:18px; z-index:4; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; color:#EAF4F6; }
.reel__meta h3{ font-size:19px; }
.reel__meta p{ font-size:13px; color:rgba(234,244,246,.75); margin-top:4px; }
.reel__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.reel__chips span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }

/* work / flip cards */
.work{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px); }
.flip{ perspective:1200px; min-height:340px; cursor:pointer; min-width:0; max-width:100%; }
.flip__in{ position:relative; width:100%; height:100%; min-height:340px; transform-style:preserve-3d; transition:transform .8s var(--ease-out); }
.flip.is-flipped .flip__in{ transform:rotateY(180deg); }
@media (hover:hover){ .flip:hover .flip__in{ transform:rotateY(180deg); } }
.flip__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.flip__face img{ width:100%; height:100%; object-fit:cover; }
.flip__face--f::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,16,24,.08) 22%,rgba(6,16,24,.62) 58%,rgba(6,16,24,.96) 100%); }
.flip__label{ position:absolute; left:16px; right:16px; bottom:16px; color:#F2F7F8; }
.flip__label b{ display:block; font-size:17px; font-weight:700; text-shadow:0 2px 10px rgba(5,14,20,.75); }
.flip__label span{ display:block; margin-top:5px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,247,248,.88); text-shadow:0 1px 8px rgba(5,14,20,.8); }
.flip__face--b{ transform:rotateY(180deg); background:var(--ink); color:var(--paper); padding:22px; display:flex; flex-direction:column; }
.flip__face--b h3{ color:var(--paper); font-size:17.4px; }
.flip__face--b ul{ display:grid; gap:9px; margin-top:14px; }
.flip__face--b li{ display:flex; gap:9px; font-size:13.4px; color:rgba(244,242,236,.82); }
.flip__face--b li svg{ width:15px; height:15px; flex:none; margin-top:4px; color:#5FD3E6; }
.flip__face--b .foot{ margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10.4px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,242,236,.6); }

/* deliverables */
.deliv{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.4vw,48px); align-items:center; }
.deliv__media{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.deliv__media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }
.deliv__media img:first-child{ grid-row:span 2; height:100%; object-fit:cover; aspect-ratio:3/4.4; }
.deliv__media img:last-child{ aspect-ratio:4/3; object-fit:cover; }
.deliv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-top:22px; }
.deliv__grid li{ display:flex; gap:10px; align-items:flex-start; font-size:14.4px; color:var(--muted); }
.deliv__grid li b{ color:var(--ink); font-weight:650; }
.deliv__grid svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--accent); }
.deliv__num{ font-family:var(--mono); font-size:10.4px; color:var(--faint); }

/* reviews */
.reviews__vp{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 18px; scrollbar-width:none; }
.reviews__vp::-webkit-scrollbar{ display:none; }
.rv{ flex:0 0 min(420px,86%); scroll-snap-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.rv__stars{ display:flex; gap:3px; color:var(--amber); }
.rv__stars svg{ width:15px; height:15px; fill:currentColor; }
.rv p{ margin-top:14px; color:var(--muted); font-size:15px; }
.rv__who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.rv__av{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--cyan-soft); color:var(--cyan); font-weight:700; font-size:14px; }
.rv__who b{ display:block; font-size:14.4px; }
.rv__who span{ font-size:12.4px; color:var(--faint); }
.reviews__ctl{ display:flex; align-items:center; gap:12px; }
.reviews__idx{ font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.14em; }
.dots{ display:flex; gap:7px; }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:background .3s var(--ease),transform .3s var(--ease-out); }
.dots i.is-on{ background:var(--accent); transform:scale(1.25); }

/* coverage */
.cover{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(22px,3vw,44px); align-items:center; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.chips span{ padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:13.4px; color:var(--muted); transition:border-color .3s var(--ease),color .3s var(--ease),transform .35s var(--ease-out); }
.chips span:hover{ border-color:var(--accent); color:var(--ink); transform:translateY(-2px); }
.map-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:14px; box-shadow:var(--shadow-sm); }
.map-card svg{ width:100%; height:auto; }

/* faq */
.faq{ display:grid; gap:12px; max-width:900px; margin-inline:auto; }
.faq__item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; transition:border-color .3s var(--ease),box-shadow .3s var(--ease); }
.faq__item.is-open{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.faq__q{ width:100%; display:flex; align-items:center; gap:16px; text-align:left; padding:18px 20px; font-size:15.6px; font-weight:600; }
.faq__q .n{ font-family:var(--mono); font-size:11px; color:var(--faint); }
.faq__q .ic{ margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--accent); transition:transform .45s var(--ease-out),background .3s var(--ease); }
.faq__item.is-open .faq__q .ic{ transform:rotate(45deg); background:var(--accent-soft); }
.faq__q .ic svg{ width:15px; height:15px; }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.faq__a p{ padding:0 20px 20px 55px; color:var(--muted); font-size:14.6px; }

/* --------------------------------------------------- 11. contact + foot */
.contact{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(22px,3vw,42px); align-items:start; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.form{ padding:clamp(20px,2.6vw,30px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:grid; gap:7px; margin-bottom:14px; }
.field label{ font-family:var(--mono); font-size:10.4px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 15px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2);
  font-size:15px; transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--cyan); background:var(--surface); box-shadow:0 0 0 4px var(--cyan-soft); }
.field textarea{ min-height:104px; resize:vertical; }
.form__note{ margin-top:12px; font-size:12.6px; color:var(--faint); }
#formOk{ display:none; margin-top:14px; padding:13px 16px; border-radius:12px; background:var(--cyan-soft); border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent); color:var(--ink); font-size:13.6px; }
#formOk.show{ display:block; }
.info{ display:grid; gap:12px; }
.crow{ display:flex; gap:15px; align-items:flex-start; padding:18px; }
.crow__ico{ width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--accent); }
.crow__ico svg{ width:19px; height:19px; }
.crow .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.crow b{ display:block; font-size:16px; margin-top:3px; }
.crow p{ font-size:13.6px; color:var(--muted); margin-top:3px; }
.crow a:hover{ color:var(--accent); }
.cta-band{
  margin-top:clamp(34px,4vw,54px); border-radius:var(--radius-lg); padding:clamp(26px,3.4vw,44px);
  background:linear-gradient(150deg,#0A2230 0%,#04101A 70%); color:#EAF4F6; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:linear-gradient(rgba(140,225,245,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(140,225,245,.14) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(600px 300px at 82% 20%,#000,transparent 72%);
}
.cta-band__in{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.cta-band h2{ font-size:clamp(24px,3vw,38px); color:#F2F7F8; }
.cta-band p{ margin-top:10px; color:rgba(234,244,246,.72); font-size:14.6px; max-width:52ch; }
.footer{ background:var(--ink); color:rgba(244,242,236,.72); padding:clamp(40px,5vw,64px) 0 26px; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(20px,2.6vw,40px); }
.footer h4{ font-size:12px; font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(244,242,236,.5); margin-bottom:14px; }
.footer ul{ display:grid; gap:9px; font-size:14px; }
.footer a:hover{ color:#fff; }
.footer .wordmark__name{ color:#F4F2EC; }
.footer .wordmark__sub{ color:rgba(244,242,236,.5); }
.footer__brand p{ margin-top:14px; font-size:13.8px; max-width:38ch; }
.footer__bottom{ margin-top:clamp(28px,3.4vw,44px); padding-top:20px; border-top:1px solid rgba(244,242,236,.14); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.6px; color:rgba(244,242,236,.55); }

/* --------------------------------------------------------- 12. responsive */
@media (max-width:1080px){
  :root{ --shell:960px; }
  .nav{ display:none; }
  .burger{ display:grid; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
  .services{ grid-template-columns:1fr 1fr; }
  .work{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps{ grid-template-columns:1fr 1fr; }
  .steps::before{ display:none; }
  .contact,.deliv,.cover,.grid-2{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer__brand{ grid-column:span 3; }
  .reviews__vp{ scroll-snap-type:x proximity; }
}
@media (max-width:820px){
  :root{ --header-h:62px; --radius:16px; --radius-lg:20px; --gutter:18px; }
  body{ font-size:15px; padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .topbar{ font-size:11.4px; }
  .topbar .shell{ min-height:32px; }
  .topbar .hide-m{ display:none; }
  .wordmark__name{ font-size:18px; }
  .wordmark__sub{ font-size:7.6px; letter-spacing:.22em; white-space:nowrap; }
  .header .btn--accent{ white-space:nowrap; }
  .icon-btn{ width:40px; height:40px; }
  .header .btn--accent{ padding:10px 14px; font-size:13.2px; gap:7px; }
  .mbar{ display:grid; }
  .fab{ bottom:calc(76px + env(safe-area-inset-bottom)); }
  h1{ font-size:clamp(27px,8.4vw,38px); max-width:20ch; }
  h2{ font-size:clamp(24px,7vw,32px); }
  .hero{ padding-top:20px; }
  .hero__rot{ font-size:15.4px; }
  .lede{ font-size:15px; }
  .hero__cta .btn{ flex:1 1 46%; padding:14px 18px; min-height:50px; }
  .hero__note{ gap:12px; font-size:12px; }
    .float-tag{ padding:8px 12px; font-size:11.4px; animation:none; }
  .float-tag--a{ top:31%; left:8px; right:auto; }
  .float-tag--b{ bottom:58px; left:8px; right:auto; }
  .float-tag--c{ display:none; }
    .hud{ font-size:8.6px; }
  .hud .bar{ width:36px; }
        .marquee span{ font-size:11.4px; padding:13px 0; } .marquee span::after{ margin:0 16px; }
  .marquee__track{ animation-duration:30s; }
  .section{ padding:52px 0; }
  .services,.work,.steps,.counters,.deliv__grid,.form__row{ grid-template-columns:1fr; }
  .work{ gap:14px; }
  .flip,.flip__in{ min-height:300px; }
  @media (hover:none){ .flip:active .flip__in{ transform:rotateY(180deg); } }
  .deliv__media img:first-child{ aspect-ratio:4/3; grid-row:auto; }
  .deliv__media{ grid-template-columns:1fr 1fr; }
  .steps{ gap:22px; }
  .step{ padding-top:0; padding-left:64px; }
  .step__n{ width:46px; height:46px; font-size:12.6px; }
  .rv{ flex-basis:88%; padding:20px; }
  .faq__a p{ padding-left:20px; }
  .cta-band__in{ flex-direction:column; align-items:flex-start; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:span 2; }
  #toast{ bottom:calc(84px + env(safe-area-inset-bottom)); font-size:12.8px; padding:12px 16px; }
  .reel__meta{ left:14px; right:14px; bottom:14px; }
  .reel__meta h3{ font-size:16.4px; }
  .reel__meta p{ display:none; }
  .reel__play .ring{ width:68px; height:68px; }
}
@media (max-width:430px){
  .header__inner{ gap:12px; }
  .wordmark__name{ font-size:16.6px; letter-spacing:.015em; }
  .wordmark__sub{ font-size:7px; letter-spacing:.12em; }
  .icon-btn{ width:38px; height:38px; }
  .icon-btn svg{ width:17px; height:17px; }
  .header .btn--accent .lbl{ display:none; }
  .header .btn--accent .lbl-sm{ display:inline; }
  .wordmark__name{ font-size:17px; }
  .header .btn--accent{ padding:10px 12px; font-size:12.8px; }
  .deliv__media{ grid-template-columns:1fr; }
  .deliv__media img:first-child{ aspect-ratio:16/10; }
  .chips span{ font-size:12.6px; padding:8px 12px; }
}
@media (max-width:374px){
  .header__inner{ gap:10px; }
  .header .btn--accent .lbl-sm{ display:none; }          /* icon-only CTA below 375px */
  .header .btn--accent{ padding:11px; }
  .btn--accent svg{ width:16px; height:16px; }
}

/* -------------------------------------------------------------- 13. motion */
.reveal{ opacity:0; transform:translate3d(0,26px,0); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease-out),transform .95s var(--ease-out); transition-delay:calc(var(--i,0) * 80ms); }
.reveal--scale{ transform:translate3d(0,26px,0) scale(.97); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero h1 .ln>span{ transform:none !important; }
  #loader{ display:none !important; }
  [data-tilt]{ transform:none !important; }
}

/* ==========================================================================
   14. hero video + scroll-driven motion graphics
   (dark mode removed — single light theme only)
   ========================================================================== */

/* ---- top scroll progress bar ---- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:320; pointer-events:none; background:rgba(10,22,34,.06); }
.progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan-2),var(--accent-2)); box-shadow:0 0 14px rgba(226,99,42,.45); transition:width .12s linear; }

/* ---- services: sticky stacking cards ---- */
.services--stack{ display:block; max-width:900px; margin-inline:auto; }
.svc-stack{ position:relative; }
.services--stack .svc{
  position:sticky; top:calc(var(--header-h) + 22px + var(--i,0) * 13px);
  margin-bottom:20px; box-shadow:var(--shadow-md); transform-origin:50% 0; will-change:transform;
}
.services--stack .svc:last-child{ margin-bottom:0; }
.services--stack .svc::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent); opacity:0; transition:opacity .4s var(--ease);
}
.services--stack .svc:hover::before{ opacity:1; }

/* ---- process: vertical timeline with a scroll-filled rail ---- */
.steps{ display:block; position:relative; max-width:880px; margin-inline:auto; padding-left:0; }
.steps::before{ display:none; }
.steps__rail{ position:absolute; left:27px; top:12px; bottom:12px; width:2px; background:var(--line); border-radius:2px; z-index:0; }
.steps__fill{ position:absolute; left:0; top:0; width:100%; height:calc(var(--p,0) * 100%); background:linear-gradient(180deg,var(--accent),var(--cyan-2)); border-radius:2px; }
.step{ position:static; display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start; padding:20px 0; }
.step__n{ position:relative; z-index:1; top:auto; left:auto; width:56px; height:56px; background:var(--paper); border-color:var(--line-strong); transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease-out),box-shadow .4s var(--ease); }
.step.is-on .step__n{ background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.06); box-shadow:0 10px 26px -12px rgba(194,65,12,.6); }
.step__body h3{ font-size:17.4px; }
.step.is-on .step__body h3{ color:var(--ink); }
.step__body p{ margin-top:8px; color:var(--muted); font-size:14.6px; }

/* ---- scroll-drawn contour lines ---- */
.contours{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; }
.contours path{ fill:none; stroke:var(--line-strong); stroke-width:1.3; stroke-linecap:round; }
#coverage .shell{ position:relative; z-index:1; }

/* ---- image wipe reveal (clip-path driven by scroll) ---- */
/* clip the media inside (not the observed box) so IntersectionObserver still sees the element */
[data-wipe] > img, [data-wipe] > svg, [data-wipe] > picture{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease-out) .05s; }
[data-wipe].is-in > img, [data-wipe].is-in > svg, [data-wipe].is-in > picture{ clip-path:inset(0 0 0 0); }

/* ---- fade-only reveal (no transform — safe for sticky children) ---- */
.reveal--fade{ opacity:0; }
.reveal--fade.is-in{ opacity:1; transition:opacity .9s var(--ease-out) }

/* ---- section head motion ---- */
.reveal.is-in .eyebrow::before,
.section-head.is-in .eyebrow::before{ animation:lineGrow .9s var(--ease-out) both .1s; }
@keyframes lineGrow{ from{ transform:scaleX(0); transform-origin:left } to{ transform:none } }
.section-head h2{ will-change:transform,opacity; }
.reveal.is-in h2,.section-head.is-in h2{ animation:headIn 1s var(--ease-out) both; }
@keyframes headIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

/* ---- scroll-velocity reactive marquee ---- */
.marquee__track{ will-change:transform; }

/* ---- tilt/parallax extras ---- */

@media (max-width:820px){
  .services--stack .svc{ position:static; margin-bottom:16px; box-shadow:var(--shadow-sm); }
  .steps__rail{ left:22px; }
  .step{ grid-template-columns:48px 1fr; gap:16px; }
  .step__n{ width:48px; height:48px; }
}

/* ==========================================================================
   15. hero (3D) polish + stats band
   ========================================================================== */
.hero{ padding-top:clamp(30px,4.5vw,64px); padding-bottom:clamp(44px,5.5vw,84px); }
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(640px 420px at 78% 42%, rgba(14,116,144,.10), transparent 70%),
    radial-gradient(520px 360px at 14% 12%, rgba(194,65,12,.08), transparent 70%);
}
.hero .ln{ display:block; overflow:hidden; }
.hero .ln > span{ display:block; transform:translateY(110%); opacity:0; transition:transform 1s var(--ease-out),opacity .6s var(--ease); }
.hero h1.is-in .ln > span{ transform:none; opacity:1; }
.hero h1.is-in .ln:nth-child(2) > span{ transition-delay:.1s; }
.hero .reveal{ transition-delay:calc(var(--i,0) * 70ms); }
.hero h1.reveal{ transform:none; }           /* lines animate individually */

/* ---- stats band ---- */
.statsec{ padding-top:clamp(28px,3.5vw,48px); padding-bottom:clamp(28px,3.5vw,48px); }
.band{
  position:relative; overflow:hidden; border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(135deg,#0B1C2A 0%,#0A1622 55%,#0D2433 100%);
  color:#F2F7F8; padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,46px);
  box-shadow:0 30px 70px -40px rgba(10,22,34,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.band__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(140,225,245,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(140,225,245,.12) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 400px at 70% 50%,#000 0%,transparent 78%);
  animation:gridDrift 30s linear infinite;
}
.band__glow{
  position:absolute; width:520px; height:520px; right:-160px; top:-240px; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle,rgba(41,196,214,.22),transparent 62%); filter:blur(8px);
}
.band__head{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:10px 24px; margin-bottom:clamp(20px,2.6vw,30px); padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); }
.band__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10.6px; letter-spacing:.2em; text-transform:uppercase; color:#8FE3F0; }
.band__eyebrow i{ width:26px; height:2px; background:linear-gradient(90deg,#29C4D6,#F4AA3A); border-radius:2px; }
.band__head p{ font-size:13.6px; color:rgba(242,247,248,.62); margin:0; }
.band__list{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.kpi{
  position:relative; padding:6px clamp(16px,2.2vw,30px) 14px; display:grid; gap:6px; align-content:start;
  border-left:1px solid rgba(255,255,255,.1);
  opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);
  transition-delay:calc(.15s + var(--i,0) * 110ms);
}
.kpi:first-child{ border-left:0; padding-left:0; }
.band.is-in .kpi{ opacity:1; transform:none; }
.kpi__ico{ width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#8FE3F0; margin-bottom:8px; }
.kpi__ico svg{ width:13px; height:13px; }
.kpi b{
  display:flex; align-items:baseline; gap:3px; font-size:clamp(34px,3.6vw,50px); font-weight:800; line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:#fff;
}
.kpi b span{ font:inherit; color:inherit; }
.kpi b em{ font-style:normal; font-size:.55em; font-weight:700; color:#FF9A5C; transform:translateY(-.1em); }
.kpi__k{ font-size:14.4px; font-weight:600; color:#F2F7F8; margin-top:4px; }
.kpi__s{ font-family:var(--mono); font-size:10.4px; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,247,248,.48); }
.kpi__bar{ display:block; height:3px; width:100%; margin-top:12px; border-radius:3px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
.kpi__bar::after{ content:""; position:absolute; inset:0; width:var(--w,60%); border-radius:3px; background:linear-gradient(90deg,#29C4D6,#F4AA3A); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-out); transition-delay:calc(.45s + var(--i,0) * 110ms); }
.band.is-in .kpi__bar::after{ transform:scaleX(1); }

@media (max-width:1080px){
  .band__list{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .kpi:nth-child(3){ border-left:0; padding-left:0; }
  .kpi:nth-child(3),.kpi:nth-child(4){ padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
}
@media (max-width:430px){
  .band{ padding:22px 18px; border-radius:var(--radius); }
  .band__list{ grid-template-columns:1fr 1fr; column-gap:16px; row-gap:18px; }
  .kpi{ padding:0 0 10px; border-left:0; }
  .kpi:nth-child(3),.kpi:nth-child(4){ padding-top:16px; }
  .kpi b{ font-size:30px; }
  .kpi__ico{ width:24px; height:24px; border-radius:7px; margin-bottom:6px; }
  .kpi__ico svg{ width:12px; height:12px; }
  .kpi__k{ font-size:13px; }
  .kpi__s{ font-size:9.4px; }
  .band__head p{ font-size:12.6px; }
}

/* ==========================================================================
   16. hero visual (photo stage + animated survey overlay) · motion v3 · mobile
   ========================================================================== */
@media (min-width:1081px){ .hero__grid{ grid-template-columns:1.04fr .96fr; } }
.hero__contours{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.hero__contours path{ fill:none; stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; }
.is-ready .hero__contours path{ animation:drawPath 2.6s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes drawPath{ to{ stroke-dashoffset:0 } }

.hero__visual{ position:relative; }
.stage{
  position:relative; transform-style:preserve-3d; transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out);
}
.stage__main{
  position:relative; margin:0; aspect-ratio:7/5; border-radius:calc(var(--radius) + 6px); overflow:hidden;
  box-shadow:0 40px 90px -46px rgba(10,22,34,.55), 0 0 0 1px rgba(10,22,34,.06);
  background:#0A1622; transform:translateZ(0);
}
.stage__main img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.03); transform:scale(1.04); transition:transform 1.6s var(--ease-out); }
.hero__visual.is-in .stage__main img{ transform:scale(1); }
.stage__main::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,16,26,.38) 0%,rgba(4,16,26,0) 32%,rgba(4,16,26,.08) 70%,rgba(4,16,26,.6) 100%); pointer-events:none; }
.survey{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.survey__grid path{ fill:none; stroke:rgba(190,240,255,.16); stroke-width:1; stroke-dasharray:3 7; }
.survey__poly{ fill:rgba(244,170,58,.07); stroke:#FFB13D; stroke-width:2.2; stroke-linejoin:round; filter:url(#glow); stroke-dasharray:1; stroke-dashoffset:1; }
.survey__diag{ fill:none; stroke:rgba(143,240,255,.7); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; }
.is-in .survey__poly{ animation:drawPath 1.7s var(--ease-out) .35s forwards; }
.is-in .survey__diag{ animation:drawPath 1.2s var(--ease-out) 1.6s forwards; stroke-dasharray:1; }
.survey__node{ opacity:0; transform-box:fill-box; transform-origin:center; }
.is-in .survey__node{ animation:nodePop .7s var(--ease-out) forwards; animation-delay:var(--d,1s); }
.survey__node .dot{ fill:#FFB13D; stroke:#fff; stroke-width:1.6; }
.survey__node .ring{ fill:none; stroke:rgba(255,177,61,.55); stroke-width:1.4; transform-box:fill-box; transform-origin:center; animation:ringPulse 2.6s ease-out infinite; animation-delay:var(--d,1s); }
@keyframes nodePop{ 0%{ opacity:0; transform:scale(.3) } 60%{ opacity:1; transform:scale(1.25) } 100%{ opacity:1; transform:scale(1) } }
@keyframes ringPulse{ 0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(1.9); opacity:0 } }
.survey__dim,.survey__area{ opacity:0; transform-box:fill-box; transform-origin:center; }
.is-in .survey__dim,.is-in .survey__area{ animation:dimIn .7s var(--ease-out) forwards; animation-delay:var(--d,1.3s); }
@keyframes dimIn{ from{ opacity:0; transform:translateY(6px) scale(.92) } to{ opacity:1; transform:none } }
.survey__dim rect{ fill:rgba(6,18,28,.78); stroke:rgba(255,255,255,.18); }
.survey__dim text{ fill:#fff; font-family:var(--mono); font-size:11.5px; font-weight:600; text-anchor:middle; letter-spacing:.02em; }
.survey__area rect{ fill:rgba(6,18,28,.82); stroke:rgba(143,240,255,.35); }
.survey__area .k{ fill:#8FF0FF; font-family:var(--mono); font-size:8.6px; letter-spacing:.2em; text-anchor:middle; }
.survey__area .v{ fill:#fff; font-family:var(--sans); font-size:13.5px; font-weight:800; text-anchor:middle; letter-spacing:-.01em; }
.survey__cross{ fill:none; stroke:#8FF0FF; stroke-width:1.3; opacity:.9; transform:translate(430px,300px); transition:transform 1.2s var(--ease-out); }
.survey__cross .c{ fill:#8FF0FF; stroke:none; }
.survey__cross{ animation:crossDrift 11s ease-in-out infinite alternate; }
@keyframes crossDrift{ 0%{ transform:translate(300px,210px) } 35%{ transform:translate(470px,170px) } 70%{ transform:translate(440px,350px) } 100%{ transform:translate(270px,330px) } }
.survey__scan{ fill:rgba(143,240,255,.55); filter:url(#glow); animation:scanDown 5.8s linear infinite; opacity:.8; }
@keyframes scanDown{ 0%{ transform:translateY(-4px) } 100%{ transform:translateY(504px) } }
.stage__main .hud{ z-index:3; }
.stage__main .hud__tl{ left:30px; top:18px; }
.stage__main .hud__br{ right:30px; bottom:18px; }
.stage__main .hud b{ font-variant-numeric:tabular-nums; }

.stage__sub{
  position:absolute; left:-46px; bottom:-38px; width:31%; margin:0; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(10,22,34,.55), 0 0 0 6px var(--paper); background:#111; z-index:4;
  animation:floaty 7.5s ease-in-out .6s infinite;
}
.stage__sub img{ width:100%; height:100%; object-fit:cover; display:block; }
.stage__sub figcaption{ position:absolute; left:0; right:0; bottom:0; padding:28px 12px 11px; font-size:11px; color:rgba(255,255,255,.82); background:linear-gradient(180deg,transparent,rgba(4,16,26,.88)); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.stage__sub figcaption b{ display:block; color:#fff; font-family:var(--sans); font-size:13px; letter-spacing:0; text-transform:none; margin-bottom:2px; }
.stage__badge{
  position:absolute; right:-28px; top:-22px; z-index:4; display:flex; align-items:center; gap:11px; padding:12px 16px 12px 12px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md); animation:floaty 6.4s ease-in-out infinite;
}
.stage__badge-ico{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#E9F7F2; color:#128A5A; }
.stage__badge b{ display:block; font-size:13.6px; letter-spacing:-.01em; }
.stage__badge em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:1px; }
.float-tag--a{ top:auto; bottom:24%; left:auto; right:-34px; animation:floaty 6.5s ease-in-out .3s infinite; }
.float-tag--b{ top:15%; bottom:auto; left:-34px; animation:floaty 7.4s ease-in-out .9s infinite; }

/* ---- headings: word-by-word rise ---- */
.section-head h2 .w,.band__head h2 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.section-head h2 .w > span{ display:inline-block; transform:translateY(110%); opacity:0; }
.section-head.is-in h2 .w > span{ animation:wordUp .9s var(--ease-out) forwards; animation-delay:calc(var(--i,0) * 55ms); }
@keyframes wordUp{ to{ transform:none; opacity:1 } }
.section-head.is-in h2{ animation:none; }                    /* replaces the old block fade */
.section-head .aside{ opacity:0; transform:translateY(10px); transition:opacity .8s var(--ease-out) .35s,transform .8s var(--ease-out) .35s; }
.section-head.is-in .aside{ opacity:1; transform:none; }

/* ---- header: hides on scroll down, returns on scroll up ---- */
.header{ transition:transform .45s var(--ease-out),box-shadow .3s var(--ease),border-color .3s var(--ease); }
.header.is-hidden{ transform:translateY(-110%); }
.header.is-hidden .nav a::after{ opacity:0; }

/* ---- buttons: shine sweep + magnetic ---- */
.btn{ position:relative; overflow:hidden; }
.btn--accent::before{ content:""; position:absolute; top:-40%; bottom:-40%; width:36%; left:-50%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:left .7s var(--ease-out); pointer-events:none; }
.btn--accent:hover::before{ left:125%; }
.btn[data-mag]{ transition:transform .35s var(--ease-out),box-shadow .3s var(--ease),background .3s var(--ease); }

/* ---- cards: image zoom + lift ---- */
.flip__face--f img{ transition:transform 1.1s var(--ease-out); }
.flip:hover .flip__face--f img{ transform:scale(1.06); }
.svc{ transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),border-color .4s var(--ease),filter .4s var(--ease); }
.rv{ transition:transform .5s var(--ease-out),box-shadow .5s var(--ease); }
.rv:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.deliv__item{ transition:transform .45s var(--ease-out),border-color .4s var(--ease),box-shadow .4s var(--ease); }
.deliv__item:hover{ transform:translateX(6px); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.chip{ transition:transform .35s var(--ease-out),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); }
.chip:hover{ transform:translateY(-3px); background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---- reviews: progress indicator for auto-advance ---- */
.reviews__bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:14px; }
.reviews__bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width .2s linear; }

/* ---- stagger helpers (set --i on siblings) ---- */
.reveal{ transition-delay:calc(var(--i,0) * 60ms); }

/* ==================================================== mobile tuning ==== */
@media (max-width:1080px){
  .hero__visual{ order:-1; max-width:680px; margin-inline:auto; width:100%; padding:16px 0 44px; }
  .stage__sub{ left:-14px; bottom:-26px; width:30%; }
  .stage__badge{ right:-10px; top:-14px; }
  .float-tag--a{ right:-8px; }
  .float-tag--b{ left:-8px; }
}
@media (max-width:820px){
  :root{ --gutter:18px; }
  .section{ padding:clamp(48px,11vw,72px) 0; }
  .section--tight{ padding:34px 0; }
  .section-head{ margin-bottom:22px; gap:12px; }
  .section-head .aside{ font-size:14px; }
  h2{ font-size:clamp(25px,6.6vw,34px); letter-spacing:-.025em; }
  .hero{ padding-top:14px; padding-bottom:40px; }
  .hero__grid{ gap:26px; }
  .hero__visual{ order:-1; padding:18px 0 40px; }
  .stage__main{ aspect-ratio:5/4; border-radius:var(--radius); }
  .stage__main .hud{ font-size:8.8px; }
  .stage__main .hud__tl{ left:24px; top:14px; }
  .stage__main .hud__br{ right:24px; bottom:14px; }
  .survey__dim text{ font-size:13px; }
  .survey__area .v{ font-size:15px; }
  .stage__sub{ display:none; }
  .stage__badge{ right:auto; left:6px; top:auto; bottom:-18px; padding:10px 14px 10px 10px; border-radius:14px; }
  .stage__badge-ico{ width:28px; height:28px; }
  .float-tag{ animation:none; }
  .float-tag--a{ display:none; }
  .float-tag--b{ display:none; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .hero__note{ gap:10px 14px; }
  .band__head{ margin-bottom:14px; padding-bottom:14px; }
  .marquee__item{ font-size:11px; }
  .svc{ padding:20px 18px; }
  .svc h3{ font-size:17px; }
  .svc__ico{ width:42px; height:42px; }
  .steps__rail{ left:21px; }
  .step{ padding:14px 0; }
  .step__body h3{ font-size:16px; }
  .step__body p{ font-size:14px; }
  .work{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .flip{ aspect-ratio:4/5; }
  .flip__label b{ font-size:14.6px; }
  .flip__label span{ font-size:9px; }
  .deliv__item{ padding:14px 14px; }
  .rv{ flex:0 0 86%; padding:20px 18px; }
  .faq__q{ padding:16px 16px; font-size:15px; }
  .faq__a p{ font-size:14.2px; }
  .form{ padding:20px 16px; }
  .crow{ padding:16px; }
  .cta-band{ padding:26px 20px; }
  .footer{ padding-top:44px; }
  input,select,textarea{ font-size:16px !important; }   /* stops iOS auto-zoom */
  .fab{ width:46px; height:46px; }
}
@media (max-width:430px){
  .hero__visual{ padding:14px 0 34px; }
  .work{ grid-template-columns:minmax(0,1fr); }
  .flip{ aspect-ratio:16/11; }
  .rv{ flex:0 0 90%; }
  .hero__note span{ font-size:12px; }
  .kpi b{ font-size:28px; }
}
@media (hover:none){
  .svc:hover,.rv:hover,.deliv__item:hover,.chip:hover{ transform:none; }
  .btn--accent::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero__contours path,.survey__poly,.survey__diag,.survey__node,.survey__dim,.survey__area{ animation:none !important; stroke-dashoffset:0; opacity:1; }
  .survey__cross,.survey__scan,.stage__sub,.stage__badge{ animation:none !important; }
}

/* overflow safety: grid items may never force their track wider than the viewport */
.services,.work,.deliv__grid,.about__grid,.contact__grid,.footer__grid,.hero__grid{ min-width:0; }
.services > *,.work > *,.hero__grid > *{ min-width:0; }

/* ==========================================================================
   17. light loader + light stats band (client feedback: no dark panels)
   ========================================================================== */
#loader{ background:linear-gradient(160deg,#FBFAF7 0%,#F4F2EC 100%); color:var(--ink); }
#loader::before{
  opacity:1;
  background:
    radial-gradient(640px 420px at 76% 14%,rgba(14,116,144,.12),transparent 70%),
    radial-gradient(560px 400px at 16% 86%,rgba(194,65,12,.12),transparent 72%);
}
.ldr__grid{ opacity:.7; background-image:linear-gradient(rgba(10,22,34,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,22,34,.07) 1px,transparent 1px); }
.ldr__mark{ color:var(--ink); }
.ldr__mark span:last-child{ color:var(--accent); }
.ldr__sub{ color:var(--muted); }
.ldr__bar{ background:rgba(10,22,34,.1); }
.ldr__bar i{ background:linear-gradient(90deg,var(--cyan),var(--accent)); }
.ldr__count{ color:var(--muted); }

.band{
  background:linear-gradient(135deg,#FFFFFF 0%,#FBF8F2 60%,#F3F7F8 100%);
  color:var(--ink); border:1px solid var(--line);
  box-shadow:0 30px 70px -44px rgba(10,22,34,.28), inset 0 1px 0 #fff;
}
.band__grid{ opacity:.55; background-image:linear-gradient(rgba(14,116,144,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,144,.08) 1px,transparent 1px); }
.band__glow{ background:radial-gradient(circle,rgba(14,116,144,.14),transparent 62%); }
.band::after{ content:""; position:absolute; left:-120px; bottom:-220px; width:460px; height:460px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(194,65,12,.10),transparent 62%); }
.band__head{ border-bottom-color:var(--line); }
.band__eyebrow{ color:var(--cyan); }
.band__eyebrow i{ background:linear-gradient(90deg,var(--cyan),var(--accent)); }
.band__head p{ color:var(--muted); }
.kpi{ border-left-color:var(--line); }
.kpi__ico{ background:#EAF4F6; border-color:#D5E8EC; color:var(--cyan); }
.kpi b{ color:var(--ink); }
.kpi b em{ color:var(--accent); }
.kpi__k{ color:var(--ink); }
.kpi__s{ color:var(--faint); }
.kpi__bar{ background:rgba(10,22,34,.08); }
.kpi__bar::after{ background:linear-gradient(90deg,var(--cyan),var(--accent)); }
@media (max-width:1080px){ .kpi:nth-child(3),.kpi:nth-child(4){ border-top-color:var(--line); } }