/* =========================================================================
   MC Surface Solutions — site.css
   Design system: "The Clean Line"
   Palette: ink #0B0E13 · mist #F4F6F8 · azure #1668FF
   Type: Bricolage Grotesque (display) · Hanken Grotesk (body) · Space Mono (mono)
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:        #0B0E13;
  --ink-2:      #0E131B;
  --panel:      #141A22;
  --panel-2:    #1A222D;
  --paper:      #F4F6F8;
  --paper-2:    #E9EDF2;

  --azure:      #1668FF;
  --azure-bright:#3B82FF;
  --azure-glow: #6AA8FF;

  --mist:       #F4F6F8;
  --muted-dark: #9AA6B6;   /* secondary text on dark */
  --muted-light:#566173;   /* secondary text on light */

  --r-sm: 9px;
  --r:    16px;
  --r-lg: 26px;

  --gut: clamp(20px, 5vw, 48px);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,.61,.27,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* default (dark) theme channel */
  --bg: var(--ink);
  --fg: var(--mist);
  --muted: var(--muted-dark);
  --border: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.22);
  --chip: rgba(255,255,255,.05);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:"Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--azure); color:#fff; }
:focus-visible{ outline:2px solid var(--azure-glow); outline-offset:3px; border-radius:4px; }

/* ---------- Typography ---------- */
h1,h2,h3,.display{
  font-family:"Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.02;
}
.h1{ font-size:clamp(2.6rem, 1.3rem + 5.6vw, 5.4rem); line-height:.98; }
.h2{ font-size:clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height:1.02; }
.h3{ font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); font-weight:600; letter-spacing:-.01em; }
.lede{ font-size:clamp(1.08rem,1rem + .5vw,1.32rem); color:var(--muted); line-height:1.55; }

.mono{ font-family:"Hanken Grotesk", system-ui, sans-serif; }

/* eyebrow = mono label + drawn line (the signature motif) */
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--azure-glow);
}
.eyebrow .ln{
  display:block; width:46px; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease-out) .05s;
}
.in .eyebrow .ln{ transform:scaleX(1); }
.hero .eyebrow .ln{ transform:scaleX(1); }
.eyebrow--dark{ color:var(--azure); }

/* ---------- Layout ---------- */
.wrap{ width:min(var(--maxw), 100% - (var(--gut) * 2)); margin-inline:auto; }
.section{ padding:clamp(74px, 9vw, 138px) 0; position:relative; }
.s-dark{  --bg:var(--ink);   --fg:var(--mist); --muted:var(--muted-dark);
          --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.22); --chip:rgba(255,255,255,.05);
          background:var(--ink); color:var(--mist); }
.s-panel{ --bg:var(--ink-2); --fg:var(--mist); --muted:var(--muted-dark);
          --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.22); --chip:rgba(255,255,255,.05);
          background:var(--ink-2); color:var(--mist); }
.s-light{ --bg:var(--paper); --fg:var(--ink); --muted:var(--muted-light);
          --border:rgba(11,14,19,.14); --border-strong:rgba(11,14,19,.26); --chip:rgba(11,14,19,.035);
          background:var(--paper); color:var(--ink); }
.s-light .eyebrow{ color:var(--azure); }

.section-head{ max-width:62ch; }
.section-head .lede{ margin-top:22px; }
.section-head .eyebrow{ margin-bottom:24px; }

.center{ text-align:center; margin-inline:auto; }

/* hairline divider with a blue node (the line) */
.rule{ height:1px; background:var(--border); position:relative; }
.rule::before{ content:""; position:absolute; left:0; top:0; height:1px; width:64px; background:var(--azure); box-shadow:0 0 12px var(--azure); }

/* ---------- Buttons ---------- */
.btn{
  --bw:1px;
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:15px 24px; border-radius:var(--r-sm);
  font-weight:600; letter-spacing:.005em; font-size:.98rem;
  border:var(--bw) solid transparent;
  transition:transform .35s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--azure); color:#fff; box-shadow:0 8px 28px -10px rgba(22,104,255,.7); }
.btn--primary:hover{ background:var(--azure-bright); transform:translateY(-2px); box-shadow:0 14px 36px -10px rgba(22,104,255,.85); }
.btn--ghost{ border-color:var(--border-strong); color:var(--fg); background:transparent; }
.btn--ghost:hover{ border-color:var(--azure-glow); color:var(--fg); transform:translateY(-2px); background:var(--chip); }
.btn--lg{ padding:18px 30px; font-size:1.05rem; }
.btn--block{ width:100%; justify-content:center; }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------- Header / Nav ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:rgba(8,11,16,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(255,255,255,.09);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:inline-flex; align-items:center; gap:13px; color:#fff; }
.brand .mark{ width:38px; height:38px; flex:none; }
.brand b{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.06rem; letter-spacing:-.01em; line-height:1; }
.brand .bt span{ display:block; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--azure-glow); margin-top:3px; }
.brand .bt{ display:flex; flex-direction:column; }
.brand-logo{ height:52px; width:52px; border-radius:50%; display:block; }
.footer .brand-logo{ height:84px; width:84px; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  position:relative; padding:9px 14px; font-size:.95rem; color:#cdd5e0; border-radius:8px;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px;
  background:var(--azure-glow); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:#fff; }

.nav-cta{ display:inline-flex; align-items:center; gap:18px; }
.nav-phone{ display:inline-flex; align-items:center; gap:9px; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.92rem; color:#fff; font-weight:700; letter-spacing:.01em; }
.nav-phone svg{ width:16px; height:16px; color:var(--azure-glow); }

.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.03); align-items:center; justify-content:center; }
.nav-toggle .bars{ position:relative; width:20px; height:12px; }
.nav-toggle .bars i{ position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; transition:transform .35s var(--ease), top .35s var(--ease), opacity .2s; }
.nav-toggle .bars i:nth-child(1){ top:0; }
.nav-toggle .bars i:nth-child(2){ top:5px; }
.nav-toggle .bars i:nth-child(3){ top:10px; }

/* mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:rgba(8,11,16,.98);
  backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gut); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.mobile-menu a{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(2rem,9vw,2.8rem); color:#fff; padding:10px 0; opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.mobile-menu .mm-meta{ margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.mobile-menu .mm-meta a{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:1rem; color:var(--azure-glow); }
body.nav-open{ overflow:hidden; }
body.nav-open .mobile-menu{ opacity:1; visibility:visible; }
body.nav-open .mobile-menu a{ opacity:1; transform:none; }
body.nav-open .mobile-menu a:nth-child(1){ transition-delay:.08s; }
body.nav-open .mobile-menu a:nth-child(2){ transition-delay:.13s; }
body.nav-open .mobile-menu a:nth-child(3){ transition-delay:.18s; }
body.nav-open .mobile-menu a:nth-child(4){ transition-delay:.23s; }
body.nav-open .mobile-menu a:nth-child(5){ transition-delay:.28s; }
body.nav-open .nav-toggle .bars i:nth-child(1){ top:5px; transform:rotate(45deg); }
body.nav-open .nav-toggle .bars i:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle .bars i:nth-child(3){ top:5px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,11,16,.55) 0%, rgba(8,11,16,.15) 32%, rgba(8,11,16,.35) 60%, rgba(8,11,16,.92) 100%),
    linear-gradient(95deg, rgba(8,11,16,.75) 0%, rgba(8,11,16,.18) 46%, rgba(8,11,16,0) 72%);
}
.hero__scan{ position:absolute; top:0; bottom:0; width:2px; left:0; z-index:1; background:linear-gradient(180deg, transparent, var(--azure-glow) 18%, var(--azure) 50%, var(--azure-glow) 82%, transparent); box-shadow:0 0 26px 2px rgba(22,104,255,.8); opacity:0; }
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px, 9vh, 104px); padding-top:120px; }
.hero__grid{ display:grid; gap:34px; max-width:920px; }
.hero h1{ max-width:14ch; }
.hero h1 .word{ display:inline-block; }
.hero .lede{ max-width:50ch; color:#d2dae6; }
.hero .accent{ color:var(--azure-glow); }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:6px; }
.hero__meta span{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#aeb9c8; display:inline-flex; align-items:center; gap:9px; }
.hero__meta span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--azure); }
.scroll-cue{ position:absolute; left:var(--gut); bottom:26px; z-index:2; display:inline-flex; align-items:center; gap:11px; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:#9aa6b6; }
.scroll-cue .bar{ width:1px; height:34px; background:linear-gradient(var(--azure-glow), transparent); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; inset:0; background:var(--azure); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* hero load animation */
.hero__img{ animation:heroWipe 1150ms var(--ease) 120ms both; }
.hero__scan{ animation:heroScan 1270ms var(--ease) 0ms both; }
.hero .anim{ opacity:0; transform:translateY(26px); animation:rise .85s var(--ease-out) both; }
.hero .anim.d1{ animation-delay:.55s; } .hero .anim.d2{ animation-delay:.7s; }
.hero .anim.d3{ animation-delay:.85s; } .hero .anim.d4{ animation-delay:1s; }
@keyframes heroWipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes heroScan{ 0%{ left:0; opacity:0; } 8%{ opacity:1; } 88%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- Marquee trust strip ---------- */
.trust{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ink-2); }
.trust .wrap{ display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; justify-content:space-between; padding:22px 0; }
.trust li{ display:inline-flex; align-items:center; gap:11px; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:#aeb9c8; }
.trust li svg{ width:17px; height:17px; color:var(--azure-glow); flex:none; }

/* ---------- Services (interactive list) ---------- */
.svc{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:start; }
.svc__list{ border-top:1px solid var(--border); }
.svc__row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 6px; border-bottom:1px solid var(--border); cursor:default; transition:padding-left .4s var(--ease); }
.svc__row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--azure); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.svc__row .num{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.74rem; color:var(--muted); width:42px; flex:none; }
.svc__row .nm{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(1.3rem,1rem + 1.4vw,2rem); letter-spacing:-.01em; flex:1; transition:color .3s var(--ease); }
.svc__row .ic{ width:34px; height:34px; flex:none; color:var(--muted); transition:color .3s var(--ease), transform .4s var(--ease); }
.svc__row.is-active{ padding-left:22px; }
.svc__row.is-active::before{ transform:scaleY(1); }
.svc__row.is-active .ic{ color:var(--azure-glow); transform:rotate(0); }
.svc__row.is-active .nm{ color:var(--fg); }
.svc__desc{ display:block; max-width:50ch; color:var(--muted); font-size:.96rem; margin-top:10px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s; }
.svc__row.is-active .svc__desc{ max-height:140px; opacity:1; }

.svc__media{ position:sticky; top:104px; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--panel); }
.svc__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease), transform 1.2s var(--ease); }
.svc__media img.show{ opacity:1; transform:scale(1); }
.svc__media .tag{ position:absolute; left:16px; bottom:16px; z-index:2; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(8,11,16,.55); backdrop-filter:blur(6px); padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.14); }
.svc__media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -80px 80px -40px rgba(8,11,16,.6); pointer-events:none; }

/* ---------- Before / After ---------- */
.ba-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:center; }
.ba{ position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; border:1px solid var(--border-strong); --pos:50%; user-select:none; touch-action:pan-y; box-shadow:0 30px 70px -34px rgba(0,0,0,.7); }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ z-index:1; }
.ba__before{ z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__before-grime{ position:absolute; inset:0; z-index:3; clip-path:inset(0 calc(100% - var(--pos)) 0 0); pointer-events:none;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(74,58,40,.45), transparent 70%),
    radial-gradient(50% 40% at 70% 75%, rgba(40,46,40,.5), transparent 70%),
    linear-gradient(180deg, rgba(20,16,12,.25), rgba(20,16,12,.15));
  mix-blend-mode:multiply; }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--azure); box-shadow:0 0 18px 1px rgba(22,104,255,.8); z-index:4; transform:translateX(-1px); }
.ba__knob{ position:absolute; top:50%; left:var(--pos); width:52px; height:52px; transform:translate(-50%,-50%); z-index:5; border-radius:50%; background:rgba(8,11,16,.6); border:2px solid var(--azure); backdrop-filter:blur(4px); display:grid; place-items:center; box-shadow:0 0 24px rgba(22,104,255,.5); }
.ba__knob::before, .ba__knob::after{ content:""; position:absolute; width:0; height:0; border-block:6px solid transparent; }
.ba__knob::before{ border-right:8px solid #fff; left:13px; }
.ba__knob::after{ border-left:8px solid #fff; right:13px; }
.ba__lbl{ position:absolute; top:14px; z-index:4; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; padding:6px 11px; border-radius:7px; background:rgba(8,11,16,.6); backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,.16); color:#fff; }
.ba__lbl.b{ left:14px; } .ba__lbl.a{ right:14px; color:var(--azure-glow); }
.ba__range{ position:absolute; inset:0; z-index:6; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }

/* ---------- Process timeline ---------- */
.proc{ position:relative; display:grid; gap:0; }
.proc__line{ position:absolute; left:27px; top:18px; bottom:34px; width:2px; background:var(--border); z-index:0; }
.proc__line span{ position:absolute; inset:0; background:linear-gradient(var(--azure-glow),var(--azure)); transform:scaleY(0); transform-origin:top; box-shadow:0 0 14px rgba(22,104,255,.5); transition:transform 1.1s var(--ease); }
.proc.in .proc__line span{ transform:scaleY(1); }
.proc__step{ position:relative; z-index:1; display:grid; grid-template-columns:56px 1fr; gap:clamp(20px,3vw,42px); padding:clamp(24px,3.4vw,44px) 0; align-items:start; }
.proc__step + .proc__step{ border-top:1px solid var(--border); }
.proc__dot{ width:56px; height:56px; border-radius:50%; border:1px solid var(--border-strong); background:var(--ink); display:grid; place-items:center; font-family:"Hanken Grotesk", system-ui, sans-serif; font-weight:700; font-size:1rem; color:var(--muted); transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s; }
.proc__step.in .proc__dot{ color:#fff; border-color:var(--azure); background:var(--azure); box-shadow:0 0 0 6px rgba(22,104,255,.14), 0 0 26px rgba(22,104,255,.45); }
.proc__step .st-k{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--azure-glow); margin-bottom:10px; }
.proc__step p{ color:var(--muted); margin-top:10px; max-width:52ch; }

/* ---------- Value props ---------- */
.vals{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.vals .v{ background:var(--bg); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:14px; min-height:190px; }
.vals .v .vk{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--azure); }
.vals .v .vt{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1.18rem; letter-spacing:-.01em; margin-top:auto; }
.vals .v p{ color:var(--muted); font-size:.92rem; }
.vals .v svg{ width:26px; height:26px; color:var(--fg); }

/* ---------- Gallery grid (controlled montage) ---------- */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:clamp(12px,1.4vw,18px); height:clamp(460px,54vw,640px); }
.gal figure{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--panel); }
.gal figure img, .gal figure video{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gal figure:hover img, .gal figure:hover video{ transform:scale(1.05); }
.gal figcaption{ position:absolute; left:14px; bottom:14px; z-index:2; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(8,11,16,.5); backdrop-filter:blur(6px); padding:7px 11px; border-radius:7px; border:1px solid rgba(255,255,255,.14); }
.gal figure::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -70px 60px -40px rgba(8,11,16,.55); pointer-events:none; }
.ga-feature{ grid-column:1/3; grid-row:1/3; }
.ga-b{ grid-column:3/5; grid-row:1/2; }
.ga-c{ grid-column:3/4; grid-row:2/3; }
.ga-d{ grid-column:4/5; grid-row:2/3; }

/* masonry gallery (full Our Work page) */
.mgrid{ column-count:3; column-gap:clamp(12px,1.4vw,18px); }
.mgrid figure{ position:relative; margin:0 0 clamp(12px,1.4vw,18px); border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--panel); break-inside:avoid; }
.mgrid figure img, .mgrid figure video, .mgrid figure .cta__poster{ width:100%; height:auto; display:block; transition:transform 1s var(--ease); }
.mgrid figure:hover img, .mgrid figure:hover video{ transform:scale(1.04); }
.mgrid figcaption{ position:absolute; left:14px; bottom:14px; z-index:2; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(8,11,16,.5); backdrop-filter:blur(6px); padding:7px 11px; border-radius:7px; border:1px solid rgba(255,255,255,.14); }
.mgrid figure::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -70px 60px -40px rgba(8,11,16,.55); pointer-events:none; }
.mgrid .clip{ position:relative; }
.mgrid .clip .cta__poster{ position:absolute; inset:0; height:100%; object-fit:cover; z-index:0; }
.mgrid .clip video{ position:relative; z-index:1; }
@media (max-width:900px){ .mgrid{ column-count:2; } }
@media (max-width:560px){ .mgrid{ column-count:1; } }

/* ---------- CTA band ---------- */
.cta{ position:relative; overflow:hidden; background:var(--ink-2); }
.cta__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(34px,5vw,72px); align-items:center; }
.cta h2{ max-width:18ch; }
.cta .lede{ margin-top:20px; max-width:46ch; }
.cta__media{ position:relative; aspect-ratio:9/13; border-radius:var(--r); overflow:hidden; border:1px solid var(--border-strong); box-shadow:0 30px 70px -34px rgba(0,0,0,.8); background:var(--panel); }
.cta__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cta__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.cta__media .badge{ position:absolute; top:14px; left:14px; z-index:2; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(8,11,16,.55); backdrop-filter:blur(6px); padding:7px 11px; border-radius:7px; border:1px solid rgba(255,255,255,.16); display:inline-flex; gap:8px; align-items:center; }
.cta .glow{ position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(22,104,255,.28), transparent 65%); top:-160px; right:-120px; filter:blur(30px); pointer-events:none; }

/* ---------- Footer ---------- */
.footer{ background:#070A0F; border-top:1px solid var(--border); padding:clamp(56px,7vw,84px) 0 38px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer .brand b{ font-size:1.2rem; }
.footer__bio{ color:var(--muted-dark); max-width:34ch; margin-top:20px; font-size:.95rem; }
.social{ display:flex; gap:12px; margin-top:24px; }
.social a{ width:44px; height:44px; border:1px solid var(--border); border-radius:11px; display:grid; place-items:center; color:#b7c1cf; transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease); }
.social a:hover{ color:#fff; border-color:var(--azure-glow); background:var(--chip); transform:translateY(-2px); }
.social a svg{ width:21px; height:21px; }
.footer h4{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azure-glow); margin-bottom:18px; }
.footer__col a, .footer__col p{ display:block; color:#b7c1cf; padding:6px 0; font-size:.96rem; transition:color .25s var(--ease); }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:clamp(40px,6vw,64px); padding-top:26px; border-top:1px solid var(--border); }
.footer__bottom p, .footer__bottom a{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.72rem; letter-spacing:.08em; color:#7b8696; }

/* ---------- Page hero (interior pages) ---------- */
.phero{ position:relative; padding:calc(74px + 96px) 0 clamp(48px,7vw,86px); overflow:hidden; background:var(--ink); }
.phero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--border); }
.phero .glow{ position:absolute; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(22,104,255,.2), transparent 64%); top:-220px; left:-120px; filter:blur(20px); pointer-events:none; }
.phero h1{ max-width:16ch; margin-top:24px; }
.phero .lede{ margin-top:24px; max-width:54ch; }
.crumbs{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dark); }
.crumbs a:hover{ color:#fff; }
.crumbs .sep{ color:var(--azure); margin:0 8px; }

/* ---------- Service detail blocks ---------- */
.svcd{ display:grid; gap:clamp(48px,7vw,96px); }
.svcd__item{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.svcd__item:nth-child(even) .svcd__media{ order:2; }
.svcd__media{ position:relative; aspect-ratio:5/4; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); }
.svcd__media img{ width:100%; height:100%; object-fit:cover; }
.svcd__media .tag{ position:absolute; left:16px; bottom:16px; font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(8,11,16,.55); backdrop-filter:blur(6px); padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.14); }
.svcd__body .eyebrow{ margin-bottom:18px; }
.svcd__body h2{ margin-bottom:18px; }
.svcd__body p{ color:var(--muted); }
.feat{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.feat li{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.74rem; letter-spacing:.04em; color:var(--fg); border:1px solid var(--border); padding:8px 13px; border-radius:999px; display:inline-flex; gap:8px; align-items:center; }
.feat li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--azure); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,72px); align-items:center; }
.about-media{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/5; }
.about-media img{ width:100%; height:100%; object-fit:cover; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.stat{ border:1px solid var(--border); border-radius:var(--r); padding:clamp(22px,2.6vw,32px); background:var(--chip); }
.stat .sk{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--azure); }
.stat .sv{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem); margin-top:14px; letter-spacing:-.02em; }
.stat p{ color:var(--muted); font-size:.9rem; margin-top:6px; }

.area-list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.area-list li{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.82rem; letter-spacing:.04em; border:1px solid var(--border); border-radius:999px; padding:10px 18px; display:inline-flex; gap:10px; align-items:center; }
.area-list li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--azure); box-shadow:0 0 8px var(--azure); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(34px,5vw,72px); align-items:start; }
.contact-card{ min-width:0; }
.contact-card{ border:1px solid var(--border); border-radius:var(--r); padding:clamp(26px,3vw,40px); background:var(--chip); }
.contact-big{ display:block; }
.contact-big .ck{ font-family:"Hanken Grotesk", system-ui, sans-serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--azure-glow); }
.contact-big .cv{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.3rem,1rem + 1.6vw,2.5rem); letter-spacing:-.02em; margin-top:10px; display:flex; align-items:center; gap:14px; transition:color .25s; min-width:0; overflow-wrap:anywhere; }
.contact-big .cv svg{ width:30px; height:30px; color:var(--azure); flex:none; }
.contact-big:hover .cv{ color:var(--azure-glow); }
.contact-big + .contact-big{ margin-top:30px; padding-top:30px; border-top:1px solid var(--border); }
.contact-note{ color:var(--muted); margin-top:14px; font-size:.95rem; }
.checklist{ margin-top:8px; }
.checklist li{ display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--border); color:var(--fg); }
.checklist li:last-child{ border-bottom:0; }
.checklist li svg{ width:20px; height:20px; color:var(--azure); flex:none; margin-top:2px; }
.checklist li b{ font-weight:600; }
.checklist li span{ display:block; color:var(--muted); font-size:.92rem; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .nav-links, .nav-phone span.lbl{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .svc{ grid-template-columns:1fr; }
  .svc__media{ display:none; }
  .svc__row{ cursor:pointer; }
  .ba-wrap{ grid-template-columns:1fr; }
  .cta__grid{ grid-template-columns:1fr; }
  .cta__media{ max-width:300px; }
  .svcd__item{ grid-template-columns:1fr; }
  .svcd__item:nth-child(even) .svcd__media{ order:0; }
  .about-grid, .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .vals{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer .brand{ grid-column:1 / -1; }
  .stat-row{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:1fr 1fr; grid-template-rows:none; height:auto; }
  .gal figure{ aspect-ratio:1/1; }
  .ga-feature{ grid-column:1/3; grid-row:auto; aspect-ratio:16/11; }
  .ga-b{ grid-column:1/3; grid-row:auto; aspect-ratio:16/10; }
  .ga-c,.ga-d{ grid-column:auto; grid-row:auto; }
}
@media (max-width: 520px){
  .vals{ grid-template-columns:1fr; }
  .trust .wrap{ justify-content:flex-start; }
  .hero__inner{ padding-top:96px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__img{ clip-path:none !important; }
  .hero .anim{ opacity:1 !important; transform:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .scroll-cue .bar::after{ display:none; }
}