:root{
  --ink:#fff;--muted:#c6d4ec;--navy:#020a2e;--navy2:#061444;--cyan:#16dcf2;--cyan2:#23aee8;
  --line:rgba(87,204,255,.24);--panel:rgba(2,10,46,.38);--shadow:0 18px 70px rgba(0,0,0,.24)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;background:var(--navy);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}

/* Header */
.site-header{position:fixed;z-index:80;top:0;left:0;right:0;height:72px;display:grid;grid-template-columns:1fr 190px 1fr;align-items:center;padding:0 clamp(24px,5vw,88px);transition:.3s;background:linear-gradient(to bottom,rgba(1,7,35,.58),rgba(1,7,35,.08) 72%,transparent)}
.site-header.scrolled{height:66px;background:rgba(2,9,40,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(56,197,241,.10)}
.nav-side{display:flex;gap:28px;align-items:center}.nav-side.right{justify-content:flex-end}
.nav-link{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#eef7ff;opacity:.78;position:relative;padding:9px 0}
.nav-link:hover,.nav-link.active{opacity:1}.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--cyan)}
.header-brand{display:flex;justify-content:center;align-items:center}.header-brand img{width:150px;height:auto;display:block}
.menu-toggle,.mobile-nav{display:none}

.page{background:var(--navy);line-height:1}

/*
  Artwork scenes use the artwork's native 1672 x 941 ratio.
  No large fade overlays, no artificial overlap and no cover-cropping on desktop.
  This keeps the top/bottom edges in the exact position the illustrations were made for.
*/
.scene{position:relative;width:100%;aspect-ratio:1672/941;height:auto;overflow:hidden;background:transparent;margin:0;isolation:isolate}
.scene + .scene{margin-top:-7vw}
.scene-media{position:absolute;inset:0;overflow:hidden;z-index:0}
.scene-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transform:none!important}
/* Later scenes feather into the scene above inside the physical overlap. This removes the hard navy/black strip while preserving the illustrations. */
.scene + .scene .scene-media{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.72) 54%,#000 78%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.72) 54%,#000 78%)}
.scene::before,.scene::after{display:none}

.scene-content{position:absolute;z-index:5;inset:0;display:flex;align-items:center;padding:clamp(84px,8vw,145px) clamp(28px,8vw,150px)}
.scene-content.center{justify-content:center;text-align:center}.scene-content.left{justify-content:flex-start}.scene-content.right{justify-content:flex-end}
.copy{max-width:570px;text-shadow:0 3px 24px rgba(0,0,0,.52)}.copy.center{max-width:700px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;color:#78e8f5}
.eyebrow:before{content:"";width:26px;height:1px;background:#69e8f5}
.copy h1,.copy h2{margin:0;line-height:1.04;letter-spacing:-.025em;font-weight:760}
.copy h1{font-size:clamp(40px,4.4vw,72px)}.copy h2{font-size:clamp(34px,3.65vw,60px)}
.copy p{margin:18px 0 0;max-width:570px;font-size:clamp(15px,1.05vw,18px);line-height:1.68;color:#d8e3f5}
.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:25px}.center .actions{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 20px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.27);transition:.2s}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#031038;box-shadow:0 8px 22px rgba(22,220,242,.16)}.btn.primary:hover{transform:translateY(-1px);box-shadow:0 11px 30px rgba(22,220,242,.25)}.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* Brand hierarchy */
.hero-logo{width:min(390px,62vw);height:auto;display:block;filter:drop-shadow(0 14px 30px rgba(0,0,0,.28));margin:0 auto 12px}
.hero-copy{display:flex;flex-direction:column;align-items:center;transform:translateY(1.5vw)}.hero-copy p{max-width:580px;text-align:center}
.scroll-indicator{position:absolute;z-index:6;bottom:8.2vw;left:50%;transform:translateX(-50%);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:#d8f5ff;opacity:.68}
.scroll-indicator:after{content:"";display:block;width:1px;height:28px;background:linear-gradient(var(--cyan),transparent);margin:8px auto 0}

.service-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 26px;margin-top:23px}.service-index a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:700}.service-index a span{font-size:9px;color:#5fd7ed;letter-spacing:.12em}
.plain-list{margin-top:22px;display:grid;gap:7px}.plain-list div{padding:9px 0;border-bottom:1px solid var(--line);color:#e7f0ff;line-height:1.55}
.metric-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:25px}.metric{min-width:115px}.metric b{display:block;font-size:24px;color:#fff}.metric span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#77def0}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:27px}.feature-strip div{padding:14px 0;border-top:1px solid var(--line)}.feature-strip b{display:block;font-size:13px;margin-bottom:5px}.feature-strip span{font-size:12px;color:#c2d0e9;line-height:1.5}
.contact-stack{display:grid;gap:10px;margin-top:23px}.contact-line{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}.contact-line span:first-child{color:#77dff0;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.contact-line span:last-child,.contact-line a{font-weight:700}
.form-wrap{width:min(540px,100%);padding:26px;border-radius:18px;background:rgba(1,8,36,.34);border:1px solid rgba(91,217,242,.17);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .full{grid-column:1/-1}.form-wrap input,.form-wrap textarea,.form-wrap select{width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(1,8,36,.50);color:#fff;padding:12px 13px;border-radius:9px;outline:none}.form-wrap textarea{min-height:118px;resize:vertical}.form-wrap input:focus,.form-wrap textarea:focus,.form-wrap select:focus{border-color:var(--cyan)}.form-wrap label{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9edff1;margin:2px 0 7px}.form-note{font-size:11px;color:#a7b7d7;line-height:1.55;margin-top:11px}

/* Footer continues from the same navy rather than creating a hard band */
.footer{position:relative;z-index:10;margin-top:-2px;padding:48px clamp(28px,8vw,150px) 28px;background:linear-gradient(to bottom,var(--navy) 0%,#010726 42%,#010726 100%);border-top:0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:48px}.footer-brand{width:155px;height:auto;display:block}.footer p{color:#a8b8d4;line-height:1.7;max-width:390px;font-size:13px}.footer h4{margin:0 0 13px;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#63dff1}.footer-links{display:grid;gap:9px}.footer-links a{font-size:13px;color:#cbd7ed}.footer-links a:hover{color:#51dff3}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:35px;padding-top:17px;border-top:1px solid rgba(255,255,255,.07);font-size:10px;color:#899abc}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto;padding:0 20px}.nav-side{display:none}.header-brand{justify-content:flex-start}.header-brand img{width:142px}
  .menu-toggle{display:flex;justify-self:end;width:44px;height:44px;border:0;background:transparent;position:relative}.menu-toggle:before,.menu-toggle:after{content:"";position:absolute;right:6px;width:25px;height:2px;background:#fff;transition:.25s}.menu-toggle:before{top:16px}.menu-toggle:after{top:26px}.menu-toggle.open:before{top:21px;transform:rotate(45deg)}.menu-toggle.open:after{top:21px;transform:rotate(-45deg)}
  .mobile-nav{position:fixed;z-index:79;inset:0;background:rgba(1,7,35,.97);padding:100px 28px 40px;flex-direction:column;gap:4px}.mobile-nav.open{display:flex}.mobile-nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:18px;font-weight:700}
  /* Mobile deliberately uses cover because a 16:9 scene cannot fill a portrait viewport without cropping. */
  .scene{aspect-ratio:auto;height:100svh;min-height:700px;margin:0}.scene + .scene{margin-top:-56px}.scene-media img{object-fit:cover;object-position:center}.scene + .scene .scene-media{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}
  .scene-content{padding:100px 24px 72px}.copy{max-width:560px}.scene-content.right,.scene-content.left,.scene-content.center{justify-content:center;text-align:center}.scene-content .copy{margin:auto}.eyebrow:before{display:none}.actions{justify-content:center}.service-index{grid-template-columns:1fr;text-align:left}.feature-strip{grid-template-columns:1fr}.form-wrap{margin:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.scroll-indicator{bottom:34px}.hero-copy{transform:none}
}
@media (max-width:620px){
  .site-header{height:66px}.header-brand img{width:132px}.scene{height:100svh;min-height:680px}.copy h1{font-size:44px}.copy h2{font-size:37px}.copy p{font-size:15px}.hero-logo{width:260px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.contact-line{align-items:flex-start;flex-direction:column;gap:6px}.footer{padding-left:22px;padding-right:22px}.footer-bottom{font-size:10px}
}