/* =========================================================
   AstraShilp — 1:1 client build
   ========================================================= */
:root{
  --bg:#03060e;
  --ink:#eef2f8;
  --soft:#d4dbe6;
  --gray:#9aa9bd;
  --muted:#7f8ca0;
  --cyan:#36d4ff;
  --cyan-2:#1ea8d8;
  --blue:#1f78ea;
  --blue-deep:#1657c4;
  --blue-bright:#16b6ff;
  --teal:#19e0c4;
  --green:#1f9b72;
  --line:rgba(120,150,190,.16);
  --card:rgba(10,20,38,.46);
  --maxw:calc(1536 * var(--u, 1px));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  background:var(--bg);
  color:var(--soft);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* full-page starfield */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.nav,.hero,.who,.services,.work,.frame,.build,.footer{position:relative;z-index:1}

.container{max-width:calc(1620 * var(--u, 1px));margin:0 auto;padding:0 4.2vw}
.c-cyan{color:var(--cyan)}
.c-blue{color:var(--blue-bright)}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:clamp(calc(12 * var(--u, 1px)),1.05vw,calc(16 * var(--u, 1px)));
  letter-spacing:.42em;font-weight:500;color:var(--cyan);
  text-transform:uppercase;
}
.eyebrow-wide{letter-spacing:.5em;color:#cfd6e0;font-weight:400;font-size:clamp(calc(15 * var(--u, 1px)),1.55vw,calc(26 * var(--u, 1px)))}
.eyebrow.center{text-align:center}
.eyebrow.teal{color:#14d7c0}
.eyebrow.wide-track{letter-spacing:.5em}

.rule{display:block;height:calc(1 * var(--u, 1px));border:0}
.rule-glow{
  width:calc(120 * var(--u, 1px));background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  position:relative;box-shadow:0 0 calc(14 * var(--u, 1px)) rgba(54,212,255,.6);
}
.rule-glow::after{content:"";position:absolute;left:50%;top:50%;width:calc(34 * var(--u, 1px));height:calc(3 * var(--u, 1px));
  transform:translate(-50%,-50%);background:#bdecff;border-radius:calc(3 * var(--u, 1px));
  box-shadow:0 0 calc(12 * var(--u, 1px)) calc(3 * var(--u, 1px)) rgba(120,220,255,.9);filter:blur(calc(.3 * var(--u, 1px)))}
.rule-glow.short{width:calc(120 * var(--u, 1px))}
.center-rule{margin:calc(14 * var(--u, 1px)) auto 0}
.rule-teal{width:calc(150 * var(--u, 1px));background:linear-gradient(90deg,transparent,#1f78ea 35%,#16d9bf 65%,transparent);
  box-shadow:0 0 calc(14 * var(--u, 1px)) rgba(30,160,200,.5);position:relative}
.rule-teal::after{content:"";position:absolute;left:50%;top:50%;width:calc(30 * var(--u, 1px));height:calc(3 * var(--u, 1px));transform:translate(-50%,-50%);
  background:#bdfff0;border-radius:calc(3 * var(--u, 1px));box-shadow:0 0 calc(12 * var(--u, 1px)) calc(3 * var(--u, 1px)) rgba(120,255,230,.8)}
.rule-teal.small{width:calc(96 * var(--u, 1px));margin-top:calc(18 * var(--u, 1px))}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:'Montserrat',sans-serif;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  font-size:clamp(calc(11 * var(--u, 1px)),.92vw,calc(15 * var(--u, 1px)));line-height:1;white-space:nowrap;
  padding:1.15em 1.7em;border-radius:calc(2 * var(--u, 1px));transition:.25s;
}
.btn .arr{font-size:1.1em;transform:translateY(.02em)}
.btn-primary{background:linear-gradient(180deg,#1f74e6,#1657c4);color:#fff;
  box-shadow:0 calc(8 * var(--u, 1px)) calc(30 * var(--u, 1px)) calc(-8 * var(--u, 1px)) rgba(31,120,234,.7)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:rgba(255,255,255,.02);color:#e9eef5;border:calc(1 * var(--u, 1px)) solid rgba(160,180,210,.28)}
.btn-ghost:hover{border-color:rgba(54,212,255,.6);background:rgba(54,212,255,.05)}
.btn-outline{background:rgba(255,255,255,.015);color:#e9eef5;border:calc(1 * var(--u, 1px)) solid rgba(120,150,190,.4)}
.btn-outline:hover{border-color:var(--cyan)}
.btn.wide{padding:1.25em 2.6em;letter-spacing:.24em}

/* =================== NAV =================== */
.nav{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:1.7vw 3vw;gap:2vw;z-index:50;
}
.brand{display:flex;align-items:center;gap:.85em}
.brand-mark{display:block;width:clamp(calc(40 * var(--u, 1px)),3vw,calc(54 * var(--u, 1px)))}
.brand-mark .ah-logo{width:100%;height:auto;overflow:visible}
.brand-text{display:flex;flex-direction:column;gap:.32em}
.brand-name{font-weight:400;letter-spacing:.34em;font-size:clamp(calc(16 * var(--u, 1px)),1.5vw,calc(25 * var(--u, 1px)));color:#f1f4f8}
.brand-tag{font-weight:500;letter-spacing:.24em;font-size:clamp(calc(6.5 * var(--u, 1px)),.56vw,calc(9.5 * var(--u, 1px)));color:#7f8ca0}
.nav-links{display:flex;gap:clamp(calc(20 * var(--u, 1px)),2.5vw,calc(46 * var(--u, 1px)))}
.nav-links a{font-size:clamp(calc(11 * var(--u, 1px)),.95vw,calc(15.5 * var(--u, 1px)));letter-spacing:.22em;font-weight:500;color:#aeb6c2;
  text-transform:uppercase;padding-bottom:calc(6 * var(--u, 1px));position:relative;transition:.2s}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(1.5 * var(--u, 1px));
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 calc(10 * var(--u, 1px)) rgba(54,212,255,.8)}
.nav-cta{border-color:rgba(54,212,255,.45)}
.nav.scrolled{position:fixed;background:rgba(4,8,16,.82);-webkit-backdrop-filter:blur(calc(12 * var(--u, 1px)));backdrop-filter:blur(calc(12 * var(--u, 1px)));
  padding-top:.9vw;padding-bottom:.9vw;border-bottom:calc(1 * var(--u, 1px)) solid var(--line);animation:navdrop .3s ease}
@keyframes navdrop{from{transform:translateY(calc(-10 * var(--u, 1px)));opacity:.6}to{transform:none;opacity:1}}

/* =================== HERO =================== */
.hero{min-height:100vh;overflow:hidden;background:#01030a}
/* The menu bar is absolute, so the hero picture used to run underneath it.
   It now starts where the bar ends — --nav-h is measured and published by
   motion.js; the fallback keeps the old full-bleed look if script is off. */
.hero-bg{position:absolute;inset:0;z-index:0;
  top:var(--nav-h,0px);height:calc(100% - var(--nav-h,0px))}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
/* shared layer for services / work / build space imagery */
.plate{position:absolute;mix-blend-mode:screen;pointer-events:none}

.hero-inner{position:absolute;left:4.2vw;top:30.5%;max-width:74%;z-index:2}
.hero-title{font-weight:300;color:#eff1ef;letter-spacing:.005em;line-height:.98;white-space:nowrap;
  font-size:clamp(calc(44 * var(--u, 1px)),6.1vw,calc(97 * var(--u, 1px)));margin:.16em 0 .28em}
.hero-title .dot{color:#eff1ef}
.hero-title .glow{color:var(--cyan);text-shadow:0 0 calc(34 * var(--u, 1px)) rgba(54,212,255,.5),0 0 calc(70 * var(--u, 1px)) rgba(54,212,255,.25)}
.hero-sub{font-weight:300;color:#dbe1ea;font-size:clamp(calc(18 * var(--u, 1px)),2.15vw,calc(34 * var(--u, 1px)));letter-spacing:.005em}
.hero .rule-glow{margin:3.2vh 0}
.hero-lead{font-weight:300;color:#c7cfda;font-size:clamp(calc(13 * var(--u, 1px)),1.6vw,calc(25 * var(--u, 1px)));line-height:1.45;margin-top:6.4vh;margin-bottom:3.4vh}
.hero-actions{display:flex;gap:1.1vw;flex-wrap:wrap}

.trusted{position:absolute;left:0;right:0;bottom:2.4vh;z-index:2;text-align:center;padding:0 4vw}
.trusted::before{content:"";display:block;height:calc(1 * var(--u, 1px));background:linear-gradient(90deg,transparent,rgba(150,175,205,.28),transparent);
  margin:0 auto 2.4vh;max-width:calc(1500 * var(--u, 1px))}
.trusted-label{font-size:clamp(calc(10 * var(--u, 1px)),.9vw,calc(14 * var(--u, 1px)));letter-spacing:.3em;color:#1aa8cf;font-weight:500;margin-bottom:1.6vh}
.trusted-logos{display:flex;align-items:center;justify-content:center;gap:clamp(calc(14 * var(--u, 1px)),2vw,calc(34 * var(--u, 1px)));
  flex-wrap:wrap;color:#c9d2dd}
.tl{font-size:clamp(calc(13 * var(--u, 1px)),1.35vw,calc(24 * var(--u, 1px)));letter-spacing:.12em;font-weight:500;opacity:.92;line-height:1.05;text-align:center}
.tl small{font-size:.42em;letter-spacing:.18em;opacity:.8;font-weight:600}
.tl-serif{font-family:Georgia,'Times New Roman',serif;letter-spacing:.16em;font-weight:400}
.tl-wide{letter-spacing:.2em;font-weight:600;transform:scaleX(1.04)}
.tl-stack{font-weight:600;letter-spacing:.1em}
.tdiv{width:calc(1 * var(--u, 1px));height:clamp(calc(22 * var(--u, 1px)),2.2vw,calc(40 * var(--u, 1px)));background:rgba(150,175,205,.28)}

/* =================== WHO WE ARE =================== */
.who{padding:7vw 0;background:linear-gradient(180deg,#01040e,#020611 60%,#01040d)}
.who-top{margin-bottom:5vh}
.who-grid{max-width:calc(1620 * var(--u, 1px));margin:0 auto;padding:0 4.2vw;display:grid;
  grid-template-columns:1fr 1.06fr;gap:4vw;align-items:start}
.who-copy .eyebrow{margin-bottom:calc(14 * var(--u, 1px))}
.who-head{font-weight:300;color:#f1f4f8;line-height:1.16;letter-spacing:.005em;
  font-size:clamp(calc(28 * var(--u, 1px)),3.35vw,calc(53 * var(--u, 1px)));margin:3vh 0}
.who-accent{font-weight:300;color:var(--cyan);line-height:1.28;font-size:clamp(calc(20 * var(--u, 1px)),2.25vw,calc(35 * var(--u, 1px)));margin-bottom:3vh}
.who-body{color:#aab6c6;font-weight:300;line-height:1.85;font-size:clamp(calc(14 * var(--u, 1px)),1.18vw,calc(19 * var(--u, 1px)));max-width:34em;margin-top:3vh}

/* One studio image (11 Sep 2026), replacing the four-up film collage.
   The collage was 70% wide and pushed right so the four crops read as a
   cluster; a single frame with this much detail in it — the site on the
   laptop, the printed collateral — needs the whole column to stay legible,
   so it fills the grid track and ends on the page gutter.
   Its aspect comes from the img's own width/height attributes, so swapping
   the picture for one of another shape needs no CSS change. */
.who-gallery{display:block;width:100%;margin-left:0}

/* Top edge lined up with the CAP of "The way businesses", not with its box.
   The heading's box starts at the grid line the picture starts on, but the
   letters begin lower down by the half-leading plus the font's ascender gap —
   43px at 1536 — so box-aligning them left the picture visibly riding high.
   3vh is .who-head's own top margin (so the two track together) and .315em is
   that optical gap, measured on Jost: (1.16-1)/2 leading + .235 ascender. */
@media(min-width:901px){
  .who-gallery{margin-top:calc(3vh + .315 * clamp(calc(28 * var(--u, 1px)),3.35vw,calc(53 * var(--u, 1px))))}
}
/* 10% larger, grown leftward into the column gap so it still finishes on the
   page gutter. Only from 1250px up: the copy column's longest line and the
   picture are 99px apart at 1536 but only 45px at 1024, so below this the
   extra width would run into the text. */
@media(min-width: 1138.34px){
  .who-gallery{width:110%;margin-left:-10%}
}
.who-gallery>div{overflow:hidden;border-radius:calc(2 * var(--u, 1px))}
.who-gallery img{width:100%;height:auto;display:block;border-radius:calc(2 * var(--u, 1px))}

/* =================== WHAT WE DO =================== */
.services{padding:6vw 0 0;background:radial-gradient(120% 80% at 50% 120%,#071a2c 0%,#03080f 55%,#01040c 100%);overflow:hidden}
.svc-galaxy{top:2%;right:0;width:23%;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(0deg,transparent,#000 14%);-webkit-mask-composite:source-in;mask-composite:intersect}
.svc-constell{top:2%;left:0;width:13.5%;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(270deg,transparent,#000 26%);mask-image:linear-gradient(270deg,transparent,#000 26%)}
.svc-earth{bottom:0;left:0;width:100%;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(0deg,#000 55%,transparent);mask-image:linear-gradient(0deg,#000 55%,transparent)}
.services .container{position:relative;z-index:2;padding-bottom:11vw}
.sec-head{font-weight:300;color:#f0f3f8;line-height:1.25;letter-spacing:.01em;
  font-size:clamp(calc(24 * var(--u, 1px)),2.9vw,calc(47 * var(--u, 1px)));margin-top:2vh}
.sec-head.center{text-align:center}
.sec-head.big{font-size:clamp(calc(30 * var(--u, 1px)),3.4vw,calc(58 * var(--u, 1px)))}
.svc-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1vw;margin-top:4.5vh}
.card{
  border:calc(1 * var(--u, 1px)) solid rgba(90,130,180,.22);border-radius:calc(8 * var(--u, 1px));
  background:linear-gradient(180deg,rgba(12,24,44,.5),rgba(6,14,28,.32));
  padding:1.7vw 1.25vw 2vw;transition:.3s;
  min-height:calc(330 * var(--u, 1px));min-width:0;
}
.card:hover{border-color:rgba(54,212,255,.5);box-shadow:0 0 calc(30 * var(--u, 1px)) calc(-6 * var(--u, 1px)) rgba(40,140,220,.35);transform:translateY(calc(-4 * var(--u, 1px)))}
.card-ico{width:clamp(calc(40 * var(--u, 1px)),3.2vw,calc(54 * var(--u, 1px)));margin-bottom:2.1vh}
.card-ico svg{width:100%;height:auto}
.card h3{color:#eef2f8;font-weight:500;letter-spacing:.05em;line-height:1.25;
  font-size:clamp(calc(14 * var(--u, 1px)),1.18vw,calc(20 * var(--u, 1px)));text-transform:uppercase;margin-bottom:1.6vh}
.card p{color:#9aa7b8;font-weight:300;line-height:1.7;font-size:clamp(calc(12 * var(--u, 1px)),.92vw,calc(15 * var(--u, 1px)))}

/* =================== FEATURED WORK =================== */
.work{padding:6vw 0;background:radial-gradient(120% 90% at 50% 0%,#061528 0%,#03080f 50%,#02050d 100%);overflow:hidden}
.work-galaxy{top:0;right:0;width:21%;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(0deg,transparent,#000 10%);-webkit-mask-composite:source-in;mask-composite:intersect}
.work-constell{top:1%;left:0;width:13%;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(270deg,transparent,#000 26%);mask-image:linear-gradient(270deg,transparent,#000 26%)}
.work .container{position:relative;z-index:2}
.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5vw;margin-top:5vh}
.work-card{display:block;border:calc(1 * var(--u, 1px)) solid rgba(90,130,180,.2);border-radius:calc(8 * var(--u, 1px));overflow:hidden;
  background:linear-gradient(180deg,rgba(10,22,42,.5),rgba(5,12,26,.3));transition:.3s}
.work-card:hover{border-color:rgba(40,160,210,.55);transform:translateY(calc(-5 * var(--u, 1px)));box-shadow:0 calc(16 * var(--u, 1px)) calc(40 * var(--u, 1px)) calc(-16 * var(--u, 1px)) rgba(20,90,160,.6)}
.wc-img{aspect-ratio:380/338;overflow:hidden}
.wc-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.work-card:hover .wc-img img{transform:scale(1.05)}
.work-card h3{color:#eef2f8;font-weight:400;font-size:clamp(calc(14 * var(--u, 1px)),1.18vw,calc(20 * var(--u, 1px)));padding:2.2vh 1.4vw .6vh;letter-spacing:.01em}
.wc-rule{display:block;height:calc(2 * var(--u, 1px));width:calc(46 * var(--u, 1px));margin:0 1.4vw .8vh;
  background:linear-gradient(90deg,#1f78ea,#16d9bf);border-radius:calc(2 * var(--u, 1px))}
.work-card p{color:#94a3b5;font-weight:300;line-height:1.6;font-size:clamp(calc(12 * var(--u, 1px)),.95vw,calc(15.5 * var(--u, 1px)));padding:0 1.4vw 2.4vh}
.work-foot{display:flex;justify-content:center;margin-top:5vh}

/* =================== FRAMEWORK =================== */
.frame{padding:6vw 0 7vw;overflow:hidden;
  background:radial-gradient(100% 120% at 0% 50%,#06122a 0%,transparent 38%),
             radial-gradient(100% 120% at 100% 50%,#06122a 0%,transparent 38%),
             linear-gradient(180deg,#02060f,#020815 50%,#02060f)}
.frame-neb{position:absolute;top:0;bottom:0;width:34%;z-index:0;pointer-events:none;mix-blend-mode:screen}
.frame-neb.left{left:0;background:radial-gradient(60% 50% at 18% 42%,rgba(40,90,170,.35),transparent 70%),
  radial-gradient(40% 35% at 8% 70%,rgba(30,200,170,.14),transparent 70%)}
.frame-neb.right{right:0;background:radial-gradient(60% 50% at 82% 42%,rgba(40,90,170,.33),transparent 70%),
  radial-gradient(40% 35% at 92% 30%,rgba(30,170,200,.14),transparent 70%)}
.frame .container{position:relative;z-index:2}
.frame .sec-head.big{margin-top:1.6vh}
.frame-row{display:flex;align-items:center;justify-content:center;gap:2.6vw;margin-top:6vh;flex-wrap:nowrap}
.frame-flow{display:flex;align-items:flex-start;justify-content:center}
.fi{width:clamp(calc(150 * var(--u, 1px)),13vw,calc(210 * var(--u, 1px)));text-align:center}
.fi-circle{
  width:clamp(calc(96 * var(--u, 1px)),8.4vw,calc(140 * var(--u, 1px)));height:clamp(calc(96 * var(--u, 1px)),8.4vw,calc(140 * var(--u, 1px)));border-radius:50%;margin:0 auto 2.4vh;
  display:flex;align-items:center;justify-content:center;position:relative;
  border:calc(1 * var(--u, 1px)) solid rgba(120,200,255,.5);
  background:radial-gradient(circle at 50% 50%,rgba(20,60,120,.35),rgba(4,12,28,.2) 70%);
  box-shadow:0 0 calc(28 * var(--u, 1px)) calc(-2 * var(--u, 1px)) rgba(60,160,255,.5),inset 0 0 calc(22 * var(--u, 1px)) rgba(40,120,220,.25);
}
.fi-circle::before,.fi-circle::after{content:"";position:absolute;width:calc(5 * var(--u, 1px));height:calc(5 * var(--u, 1px));border-radius:50%;
  background:#bfe6ff;box-shadow:0 0 calc(8 * var(--u, 1px)) calc(2 * var(--u, 1px)) rgba(120,210,255,.9)}
.fi-circle::before{top:calc(-2 * var(--u, 1px));left:50%;transform:translateX(-50%)}
.fi-circle::after{bottom:8%;right:10%}
.fi-circle svg{width:46%;height:auto}
.fi h4{color:#eaf0f7;font-weight:500;letter-spacing:.08em;font-size:clamp(calc(12 * var(--u, 1px)),1.05vw,calc(17 * var(--u, 1px)));margin-bottom:1.3vh}
.fi p{color:#9aa7b8;font-weight:300;line-height:1.6;font-size:clamp(calc(12 * var(--u, 1px)),.92vw,calc(15 * var(--u, 1px)))}
.fi-link{align-self:flex-start;margin-top:clamp(calc(48 * var(--u, 1px)),4.2vw,calc(70 * var(--u, 1px)));width:clamp(calc(28 * var(--u, 1px)),3vw,calc(54 * var(--u, 1px)));height:calc(1 * var(--u, 1px));
  background:linear-gradient(90deg,#2f86f0,#16d9bf);box-shadow:0 0 calc(8 * var(--u, 1px)) rgba(40,160,220,.7);flex:none}
.frame-eq{font-weight:200;color:#dfe6ef}
.frame-eq .eq{font-size:clamp(calc(34 * var(--u, 1px)),3.6vw,calc(60 * var(--u, 1px)))}
.frame-logo{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4vh}
.frame-logo .logo-lg{display:block;width:clamp(calc(150 * var(--u, 1px)),13.5vw,calc(220 * var(--u, 1px)))}
.logo-lg .ah-logo{width:100%;height:auto;overflow:visible;display:block}
.logo-word{letter-spacing:.42em;font-weight:300;color:#eef2f8;font-size:clamp(calc(15 * var(--u, 1px)),1.45vw,calc(24 * var(--u, 1px)));padding-left:.42em}

/* =================== LET'S BUILD =================== */
.build{padding:8vw 0;overflow:hidden;min-height:60vh;display:flex;align-items:center;
  background:radial-gradient(80% 120% at 6% 50%,#06142b 0%,#03080f 42%,#02050d 100%)}
.build-limb{left:0;top:0;height:100%;width:auto;mix-blend-mode:screen;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.build-inner{position:relative;z-index:2;max-width:calc(1620 * var(--u, 1px));margin:0 auto;padding:0 4.2vw;width:100%;
  display:grid;grid-template-columns:1fr 1.15fr;gap:5vw;align-items:center}
.build-head{font-weight:300;color:#eef2f8;line-height:1.12;font-size:clamp(calc(32 * var(--u, 1px)),3.5vw,calc(58 * var(--u, 1px)));padding-left:6vw}
.build-copy{color:#c4cdd9;font-weight:300;line-height:1.7;font-size:clamp(calc(15 * var(--u, 1px)),1.4vw,calc(23 * var(--u, 1px)));margin-bottom:4.5vh;max-width:30em}
.build-actions{display:flex;gap:1.6vw;flex-wrap:wrap}
.gradient-edge{border:calc(1 * var(--u, 1px)) solid transparent;border-radius:calc(3 * var(--u, 1px));position:relative;
  background:
    linear-gradient(#040a14,#040a14) padding-box,
    linear-gradient(120deg,#1f78ea,#1f9b72) border-box;}
.gradient-edge.green{background:
    linear-gradient(#040a14,#040a14) padding-box,
    linear-gradient(120deg,#1f9b72,#13b58a) border-box;}
.gradient-edge:hover{filter:brightness(1.15)}
.bi{width:1.3em;height:1.3em;flex:none}

/* =================== FOOTER =================== */
.footer{padding:6vw 0 3vw;background:linear-gradient(180deg,#02060f,#020814)}
.footer-grid{max-width:calc(1620 * var(--u, 1px));margin:0 auto;padding:0 4.2vw;
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.4fr;gap:3vw}
.f-brand .logo-lg{display:block;width:clamp(calc(150 * var(--u, 1px)),13vw,calc(210 * var(--u, 1px)))}
.f-brand .logo-word{display:block;margin-top:1.4vh}
.f-rule{margin:2.4vh 0}
.f-desc{color:#9aa7b8;font-weight:300;line-height:1.8;font-size:clamp(calc(13 * var(--u, 1px)),1.05vw,calc(17 * var(--u, 1px)));margin-bottom:2vh;max-width:22em}
.f-col{padding-top:2vh}
.f-title{font-size:clamp(calc(13 * var(--u, 1px)),1.1vw,calc(18 * var(--u, 1px)));letter-spacing:.12em;color:#2f9fe6;font-weight:500;
  text-transform:uppercase;margin-bottom:.6em;padding-bottom:1.4vh;position:relative}
.f-title::after{content:"";position:absolute;left:0;bottom:0;width:calc(62 * var(--u, 1px));height:calc(2 * var(--u, 1px));
  background:linear-gradient(90deg,#1f78ea,transparent)}
.f-col a{display:flex;align-items:center;gap:.9em;color:#aeb9c8;font-weight:300;
  font-size:clamp(calc(13 * var(--u, 1px)),1.08vw,calc(18 * var(--u, 1px)));padding:1.05vh 0;transition:.2s}
.f-col a:hover{color:#fff}
.f-connect a{gap:1em}
.si{width:1.35em;height:1.35em;flex:none}
.f-brand{position:relative}
.footer-grid .f-col:nth-child(2){border-left:calc(1 * var(--u, 1px)) solid rgba(120,150,190,.16);padding-left:3vw}
.footer-bottom{max-width:calc(1620 * var(--u, 1px));margin:5vh auto 0;padding:0 4.2vw;text-align:center}
.f-line{display:block;height:calc(1 * var(--u, 1px));background:rgba(120,150,190,.16);margin-bottom:4vh}
.footer-bottom p{color:#8593a6;font-weight:300;font-size:clamp(calc(12 * var(--u, 1px)),1vw,calc(16 * var(--u, 1px)));letter-spacing:.02em}

/* =================== RESPONSIVE =================== */
@media(max-width:900px){
  .nav{flex-wrap:wrap;gap:1rem;padding:calc(18 * var(--u, 1px)) 5vw}
  .nav-links{order:3;width:100%;justify-content:center;gap:calc(18 * var(--u, 1px));flex-wrap:wrap}
  .nav-cta{font-size:calc(11 * var(--u, 1px))}
  .hero-inner{position:relative;left:0;top:0;max-width:100%;padding:calc(120 * var(--u, 1px)) 6vw 0}
  .hero{min-height:auto;padding-bottom:calc(340 * var(--u, 1px))}
  .hero-bg .plate-earth{width:90%;bottom:calc(120 * var(--u, 1px))}
  .hero-bg .plate-galaxy{width:54%}
  .trusted{position:relative;margin-top:calc(40 * var(--u, 1px))}
  .who-grid{grid-template-columns:1fr;gap:6vw}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:3vw}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:3vw}
  .frame-row{flex-direction:column;gap:6vh}
  .frame-flow{flex-direction:column;align-items:center;gap:4vh}
  .fi-link{display:none}
  .build-inner{grid-template-columns:1fr;gap:5vh}
  .build-head{padding-left:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:6vw}
  .footer-grid .f-col:nth-child(2){border-left:0;padding-left:0}
}
@media(max-width:560px){
  .svc-grid,.work-grid,.footer-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* =========================================================
   POSITIONING UPDATE — additive rules only.
   New content slots that the existing design had no element
   for. No existing selector is modified.
   ========================================================= */

/* supporting line under a centred section head (services) */
.sec-sub{color:#9aa7b8;font-weight:300;line-height:1.85;
  font-size:clamp(calc(14 * var(--u, 1px)),1.18vw,calc(19 * var(--u, 1px)));max-width:60ch;margin:2.6vh auto 0}
.sec-sub.center{text-align:center}

/* "Include" lists inside the existing service cards */
.card ul{list-style:none;margin-top:2.2vh;display:grid;gap:.75vh}
.card li{position:relative;padding-left:1.05em;color:#8d9aac;font-weight:300;
  line-height:1.6;font-size:clamp(calc(11 * var(--u, 1px)),.84vw,calc(14 * var(--u, 1px)))}
.card li::before{content:"";position:absolute;left:0;top:.6em;width:calc(4 * var(--u, 1px));height:calc(4 * var(--u, 1px));
  border-radius:50%;background:var(--cyan);opacity:.7}

/* three intelligence blocks + closing line (who we are).
   Centred and grouped, the way the framework section states the same three —
   each block anchored by the gradient rule the work cards already use. */
.who-intel-wrap{margin-top:7.5vh}
.who-intel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(calc(30 * var(--u, 1px)),3vw,calc(66 * var(--u, 1px)));max-width:calc(1180 * var(--u, 1px));margin:0 auto;text-align:center}
.wi-rule{display:block;height:calc(2 * var(--u, 1px));width:calc(46 * var(--u, 1px));margin:0 auto 2.2vh;border-radius:calc(2 * var(--u, 1px));
  background:linear-gradient(90deg,#1f78ea,#16d9bf)}
.wi h4{color:#eaf0f7;font-weight:500;letter-spacing:.08em;
  font-size:clamp(calc(12 * var(--u, 1px)),1.05vw,calc(17 * var(--u, 1px)));margin-bottom:1.4vh}
.wi p{color:#9aa7b8;font-weight:300;line-height:1.7;font-size:clamp(calc(12 * var(--u, 1px)),.92vw,calc(15 * var(--u, 1px)));
  max-width:20em;margin:0 auto}
.who-close{text-align:center;color:#c4cdd9;font-weight:300;letter-spacing:.01em;
  line-height:1.5;font-size:clamp(calc(14 * var(--u, 1px)),1.3vw,calc(21 * var(--u, 1px)));margin-top:6.5vh}

/* The hero headline is now a single two-line lock-up — "INTELLIGENCE FOR THE /
   NEXT GENERATION." — set in one style, so both lines share a left edge and the
   old optical correction (which nudged line 1 only) would now break it. */
.hero-title{text-indent:0}

/* framework lock-up line */
.frame-logo .logo-tag{color:#aab6c6;font-weight:300;letter-spacing:.01em;
  font-size:clamp(calc(12 * var(--u, 1px)),1vw,calc(16 * var(--u, 1px)))}

@media(max-width:900px){
  .who-intel{grid-template-columns:1fr;gap:4.5vh}
  .who-intel-wrap{margin-top:6vh}
  .who-close{margin-top:5vh}
}


/* ---------------------------------------------------------
   Hero type, 20% down from the original scale (10 Sep 2026).
   .hero-title is not listed: it is measured against .hero-sub
   at runtime, so it follows automatically. Minimums are held
   a little above a straight 0.8x so small screens stay legible.
   --------------------------------------------------------- */
.eyebrow-wide{font-size:clamp(calc(13 * var(--u, 1px)),1.24vw,calc(21 * var(--u, 1px)))}
.hero-sub{font-size:clamp(calc(16 * var(--u, 1px)),1.72vw,calc(27 * var(--u, 1px)))}
.hero-lead{font-size:clamp(calc(12.5 * var(--u, 1px)),1.28vw,calc(20 * var(--u, 1px)))}


/* ============================================================
   Section header — one component, identical on every page.
   Centred label, centred glow rule beneath it.
   ============================================================ */
.sechead { width: 100%; text-align: center; margin: 0 auto; position: relative; z-index: 6; }
.sechead__eb {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(calc(12 * var(--u, 1px)), 1.05vw, calc(16 * var(--u, 1px)));
  letter-spacing: .42em; font-weight: 500; color: #36d4ff;
  text-transform: uppercase; text-align: center; margin: 0; line-height: 1.4;
}
.sechead__rule {
  display: block; height: calc(1 * var(--u, 1px)); border: 0; width: calc(120 * var(--u, 1px)); margin: calc(14 * var(--u, 1px)) auto 0;
  background: linear-gradient(90deg, transparent, #36d4ff, transparent);
  position: relative; box-shadow: 0 0 calc(14 * var(--u, 1px)) rgba(54, 212, 255, .6);
}
.sechead__rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(34 * var(--u, 1px)); height: calc(3 * var(--u, 1px));
  transform: translate(-50%, -50%); background: #bdecff; border-radius: calc(3 * var(--u, 1px));
  box-shadow: 0 0 calc(12 * var(--u, 1px)) calc(3 * var(--u, 1px)) rgba(120, 220, 255, .9);
}
/* the gap under the header, used by sections that start with a label */
.sechead--gap { margin-top: clamp(calc(64 * var(--u, 1px)), 9vh, calc(110 * var(--u, 1px))); }
/* overlaying a full-bleed visual: a fixed distance below the menu bar,
   the same distance on every page */
.sechead--top {
  position: absolute; left: 0; right: 0; top: var(--sechead-top, calc(118 * var(--u, 1px)));
  margin: 0; z-index: 6; pointer-events: none;
}