/* ============================================================
   VeriCoreIP — "The V-Core / Silicon-Glass"
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:            #04070D;
  --bg-2:          #070C15;
  --bg-3:          #050A11;

  --text:          #DCE9F5;
  --text-strong:   #F2F8FD;
  --muted:         #8CA1B8;
  --muted-dim:     #6E8399;

  --cyan:          #6FD3F7;
  --cyan-bright:   #A8E8FF;
  --cyan-soft:     #7FD9F5;
  --cyan-deep:     #2E9FD4;
  --amber:         #D98A4A;

  --line:          rgba(140,200,240,.14);
  --line-strong:   rgba(140,200,240,.30);
  --panel:         linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.014));
  --panel-hover:   linear-gradient(180deg, rgba(120,205,245,.10), rgba(255,255,255,.02));

  --shell:         1200px;
  --r-sm:          10px;
  --r-md:          16px;
  --r-lg:          22px;

  --ease:          cubic-bezier(.22,.68,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
h1,h2,h3{ line-height:1.22; margin:0; color:var(--text-strong); font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
.mono{ font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:#04070D; padding:.7rem 1.1rem; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.15rem;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(4,7,13,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-block:.75rem;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }
.brand-mark{ width:30px; height:30px; display:block; }
.brand-name{
  font-size:1.16rem; font-weight:600; letter-spacing:-.005em; color:var(--text-strong);
}

.primary-nav{ display:flex; align-items:center; gap:2rem; }
.nav-list{ display:flex; align-items:center; gap:2.1rem; }
.nav-list a{
  font-size:.855rem; font-weight:500; letter-spacing:.045em;
  color:rgba(220,233,245,.62);
  transition:color .22s var(--ease);
  position:relative; padding-block:.3rem;
}
.nav-list a:hover{ color:var(--text-strong); }
.nav-list a.is-active{ color:var(--text-strong); }
.nav-list a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}

.nav-toggle{
  display:none; width:42px; height:38px; border:1px solid var(--line);
  border-radius:9px; background:rgba(255,255,255,.03); cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-toggle span{ display:block; width:17px; height:1.6px; background:var(--text); border-radius:2px;
  transition:transform .28s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ============================================================
   HERO — the V-Core scene
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

.hero-scene{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* deep space background */
.scene-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 50% 96%, rgba(24,58,84,.55) 0%, transparent 58%),
    radial-gradient(90% 60% at 50% 12%,  rgba(14,32,52,.60) 0%, transparent 70%),
    linear-gradient(180deg, #05080F 0%, #04070D 42%, #04080E 66%, #02050A 100%);
}

/* ── Scene anchors ───────────────────────────────────────────
   The V's vertex is drawn at 62% of the hero (y=558 in the SVG's
   1600×900 box). Horizon, floor and light pool all key off that
   line — change one and change the rest.
   ──────────────────────────────────────────────────────────── */

/* warm horizon band, sitting just below the vertex so the pillar copy
   above it stays on dark ground */
.scene-horizon{
  position:absolute; left:-10%; right:-10%; top:56%; height:17%;
  background:
    radial-gradient(58% 100% at 24% 70%, rgba(216,140,76,.52), transparent 70%),
    radial-gradient(58% 100% at 76% 70%, rgba(216,140,76,.52), transparent 70%),
    radial-gradient(92% 100% at 50% 78%, rgba(196,116,60,.28), transparent 76%);
  filter:blur(26px);
}

/* perspective grid floor */
.scene-floor-wrap{
  position:absolute; left:0; right:0; top:62%; bottom:0;
  overflow:hidden;
}
.scene-floor{
  position:absolute; left:-70%; right:-70%; top:0; height:420%;
  background-image:
    linear-gradient(rgba(133,196,236,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,196,236,.16) 1px, transparent 1px);
  background-size:94px 94px;
  transform:perspective(330px) rotateX(69deg);
  transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.45) 38%, transparent 76%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.45) 38%, transparent 76%);
}

/* light pool spilling across the floor */
.scene-pool{
  position:absolute; left:50%; top:62%; transform:translate(-50%,-30%);
  width:min(84%,1020px); height:26%;
  background:radial-gradient(ellipse at center, rgba(198,238,255,.30), rgba(110,196,245,.10) 44%, transparent 74%);
  filter:blur(30px);
}

/* the glass V */
.scene-v{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
}
.v-arm{ paint-order:fill stroke; }

/* broad supplementary bloom — deliberately diffuse, so it reads correctly
   at any aspect ratio even though the crisp core lives inside the SVG */
.scene-vertex{
  position:absolute; left:50%; top:62%; transform:translate(-50%,-50%);
  width:min(56vw,620px); aspect-ratio:1.35;
  background:radial-gradient(ellipse at center,
    rgba(180,230,255,.22) 0%, rgba(110,198,244,.12) 30%, transparent 66%);
  filter:blur(40px);
}
.scene-beam{
  position:absolute; left:50%; top:2%; bottom:38%; width:min(26vw,260px);
  transform:translateX(-50%);
  background:linear-gradient(to top, rgba(178,231,255,.16), rgba(140,214,250,.05) 45%, transparent 80%);
  filter:blur(34px);
}
.scene-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(105% 78% at 50% 52%, transparent 40%, rgba(2,5,10,.72) 100%),
    linear-gradient(180deg, rgba(3,6,12,.80) 0%, transparent 22%);
}

/* ---------- hero content ---------- */
.hero-content{
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column;
  padding-top:clamp(5.25rem,9.5vh,7.25rem);
  padding-bottom:clamp(1rem,2.5vh,1.75rem);
  padding-inline:clamp(1.15rem,4vw,2rem);
}

.hero-head{ text-align:center; max-width:760px; margin-inline:auto; }

.hero-title{
  font-size:clamp(1.72rem,4.6vw,3.35rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-soft);
  text-shadow:0 0 34px rgba(111,211,247,.34), 0 0 76px rgba(76,168,220,.20);
  margin-bottom:.85rem;
}
.hero-sub{
  font-size:clamp(.92rem,1.4vw,1.06rem);
  font-weight:400;
  color:rgba(206,226,242,.66);
  letter-spacing:.015em;
  line-height:1.55;
  margin-bottom:clamp(.9rem,2.2vh,1.45rem);
}

.btn-outline{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.78rem 1.65rem;
  border:1px solid rgba(160,220,255,.40);
  border-radius:999px;
  background:rgba(10,26,42,.30);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#CFEDFC;
  font-size:.90rem; font-weight:500; letter-spacing:.035em;
  transition:border-color .28s var(--ease), background .28s var(--ease),
             box-shadow .28s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.btn-outline svg{ width:15px; height:15px; flex-shrink:0; transition:transform .28s var(--ease); }
.btn-outline:hover{
  border-color:rgba(190,238,255,.85);
  background:rgba(28,66,96,.42);
  color:#EAF8FF;
  box-shadow:0 0 0 1px rgba(140,220,255,.12), 0 8px 34px rgba(70,170,225,.28);
  transform:translateY(-1px);
}
.btn-outline:hover svg{ transform:translateX(3px); }

/* ---------- the four pillars ---------- */
/* Default: a plain 2×2 grid under the CTA. The V-formation below is opt-in,
   and only when there is genuinely room for it. */
.pillars{
  position:relative; flex:1;
  margin:clamp(1.5rem,4vh,3rem) auto 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.2rem 1rem; justify-items:center; max-width:460px;
}

.pillar{ text-align:center; width:100%; max-width:190px; }
.pillar-icon{ display:block; margin:0 auto .8rem; width:34px; height:34px; }
.pillar-icon svg{
  width:100%; height:100%;
  fill:none; stroke:var(--cyan); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(111,211,247,.45));
}
.pillar h2{
  font-size:1.06rem; font-weight:600; letter-spacing:.005em;
  color:var(--text-strong); margin-bottom:.35rem;
  text-shadow:0 1px 12px rgba(3,7,14,.9), 0 0 3px rgba(3,7,14,.8);
}
.pillar p{
  font-size:.80rem; line-height:1.62; color:rgba(196,213,228,.86); letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(3,7,14,.95), 0 0 3px rgba(3,7,14,.85);
}

/* The V-formation from the reference art. It needs width either side of the
   centred headline AND height between the two rows — at 1080×700 the third
   headline line lands straight on the top-left pillar. Both dimensions are
   required, so anything smaller keeps the grid above. */
@media (min-width:1080px) and (min-height:760px){
  /* Lifted out of the flow and keyed to the hero itself, so the pairs land
     where the reference puts them: the top pair flanking the CTA, the bottom
     pair closing on the vertex at 62%. `pointer-events` is dropped on the
     container because it overlays the headline and CTA. */
  .pillars{
    position:absolute; inset:0; margin:0; min-height:0;
    display:block; max-width:none;
    pointer-events:none;
  }
  .pillar{
    position:absolute; width:170px; max-width:none;
    pointer-events:auto;
  }
  .pillar-tl{ left:12%;  top:29%; }
  .pillar-tr{ right:12%; top:29%; }
  .pillar-bl{ left:25%;  top:50%; }
  .pillar-br{ right:25%; top:50%; }
}

/* Shorter laptop screens still running the V-formation: the two rows are only
   ~21% of the hero apart, so trim the block height to keep them clear. */
@media (min-width:1080px) and (min-height:760px) and (max-height:880px){
  .pillar-icon{ width:28px; height:28px; margin-bottom:.55rem; }
  .pillar h2{ font-size:.98rem; }
  .pillar p{ font-size:.75rem; line-height:1.5; }
}

.hero-strip{
  text-align:center;
  margin-top:auto; padding-top:clamp(1.1rem,2.6vh,2rem);
  font-size:clamp(.62rem,1.3vw,.74rem);
  text-transform:uppercase; letter-spacing:.36em;
  color:rgba(163,190,212,.52);
}
.hero-strip span{ color:rgba(111,211,247,.7); margin-inline:.35em; }

/* ============================================================
   STATS
   ============================================================ */
.stats{
  position:relative; z-index:3;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,20,34,.72), rgba(6,12,21,.72));
  backdrop-filter:blur(10px);
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:2.3rem;
}
.stat{ text-align:center; padding-inline:1rem; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat-num{
  display:block; font-size:clamp(1.5rem,3vw,2.05rem); font-weight:500;
  color:var(--cyan-bright); letter-spacing:-.01em;
  text-shadow:0 0 26px rgba(111,211,247,.30);
}
.stat-label{
  display:block; margin-top:.35rem;
  font-size:.79rem; letter-spacing:.045em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.9rem 0; padding-block:2rem; }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); padding-top:1.9rem; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ position:relative; padding-block:clamp(4.5rem,9vw,7.5rem); }
.section-alt{
  background:var(--bg-2);
  border-block:1px solid var(--line);
}
.section-alt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 55% at 50% 0%, rgba(46,159,212,.09), transparent 70%);
}
.section-alt > *{ position:relative; }

.section-head{ max-width:720px; margin-bottom:clamp(2.6rem,5vw,4rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.735rem; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan));
}
.section-title{
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  font-weight:600; letter-spacing:-.02em; margin-bottom:1rem;
}
.section-sub{ font-size:clamp(.98rem,1.5vw,1.09rem); color:var(--muted); line-height:1.72; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.35rem;
}
.card{
  position:relative;
  padding:1.85rem 1.7rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(140,210,250,.42);
  box-shadow:0 18px 48px rgba(0,0,0,.46), 0 0 0 1px rgba(111,211,247,.10), 0 0 46px rgba(46,159,212,.16);
}
.card-icon{
  display:grid; place-items:center;
  width:46px; height:46px; margin-bottom:1.2rem;
  border:1px solid rgba(111,211,247,.26);
  border-radius:12px;
  background:rgba(46,159,212,.10);
}
.card-icon svg{
  width:23px; height:23px;
  fill:none; stroke:var(--cyan); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ font-size:1.15rem; margin-bottom:.65rem; }
.card > p{ font-size:.935rem; color:var(--muted); line-height:1.72; }
.card-list{
  margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid var(--line);
  display:grid; gap:.55rem;
}
.card-list li{
  position:relative; padding-left:1.35rem;
  font-size:.87rem; color:rgba(180,199,216,.82);
}
.card-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 9px rgba(111,211,247,.7);
}

/* ============================================================
   EXPERTISE
   ============================================================ */
.expertise-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2.4rem 2rem;
}
.ex-title{
  font-size:.80rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--cyan); padding-bottom:.85rem; margin-bottom:1.15rem;
  border-bottom:1px solid var(--line);
}
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips li{
  padding:.42rem .78rem;
  font-size:.815rem; color:rgba(199,216,231,.86);
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(255,255,255,.028);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.chips li:hover{
  border-color:rgba(111,211,247,.45); color:var(--text-strong); background:rgba(46,159,212,.12);
}

/* ============================================================
   ABOUT / WHY
   ============================================================ */
.why-layout{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
@media (max-width:900px){ .why-layout{ grid-template-columns:1fr; } }
.why-intro .btn-solid{ margin-top:1.9rem; }

.why-list{ display:grid; gap:1.9rem; }
.why-item{ display:grid; grid-template-columns:auto 1fr; gap:1.35rem; align-items:start; }
.why-num{
  font-size:.86rem; font-weight:500; color:var(--cyan);
  padding-top:.15rem; letter-spacing:.04em;
}
.why-item h3{ font-size:1.1rem; margin-bottom:.5rem; }
.why-item p{ font-size:.935rem; color:var(--muted); line-height:1.72; }

/* ============================================================
   ENGAGEMENT MODELS
   ============================================================ */
.model-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.35rem; align-items:start; }
.model{
  position:relative;
  padding:2rem 1.75rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
.model:hover{ transform:translateY(-4px); border-color:rgba(140,210,250,.38); }
.model-featured{
  border-color:rgba(111,211,247,.42);
  background:linear-gradient(180deg, rgba(46,159,212,.16), rgba(255,255,255,.02));
  box-shadow:0 16px 50px rgba(0,0,0,.42), 0 0 44px rgba(46,159,212,.16);
}
.model-badge{
  position:absolute; top:-.72rem; left:1.75rem;
  padding:.2rem .68rem;
  font-size:.665rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em;
  color:#04070D; background:var(--cyan); border-radius:999px;
}
.model-name{ font-size:1.22rem; margin-bottom:.3rem; }
.model-tag{
  font-size:.755rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--cyan); margin-bottom:1.05rem;
}
.model-desc{ font-size:.935rem; color:var(--muted); line-height:1.72; }
.model-list{
  margin-top:1.3rem; padding-top:1.25rem; border-top:1px solid var(--line);
  display:grid; gap:.6rem;
}
.model-list li{
  position:relative; padding-left:1.5rem; font-size:.87rem; color:rgba(180,199,216,.85);
}
.model-list li::before{
  content:""; position:absolute; left:.05rem; top:.48em;
  width:9px; height:5px; border-left:1.7px solid var(--cyan); border-bottom:1.7px solid var(--cyan);
  transform:rotate(-45deg);
}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; }
@media (max-width:1040px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){  .steps{ grid-template-columns:1fr; } }
.step{
  position:relative; padding:1.85rem 1.5rem 1.6rem;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel);
}
.step-num{
  display:grid; place-items:center;
  width:38px; height:38px; margin-bottom:1.1rem;
  border-radius:50%;
  border:1px solid rgba(111,211,247,.42);
  background:rgba(46,159,212,.12);
  color:var(--cyan-bright); font-size:.94rem;
  box-shadow:0 0 22px rgba(46,159,212,.22);
}
.step h3{ font-size:1.03rem; margin-bottom:.55rem; }
.step p{ font-size:.895rem; color:var(--muted); line-height:1.7; }
.step-when{
  display:inline-block; margin-top:1.1rem;
  font-size:.715rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--cyan); padding:.28rem .62rem;
  border:1px solid rgba(111,211,247,.26); border-radius:6px;
  background:rgba(46,159,212,.08);
}

/* ============================================================
   CAREERS
   ============================================================ */
.careers{
  position:relative;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,16,28,.9), rgba(5,10,18,.9));
  padding-block:clamp(2.8rem,5vw,3.8rem);
}
.careers::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 130% at 50% 100%, rgba(46,159,212,.13), transparent 70%);
}
.careers-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap;
}
.careers-title{ font-size:clamp(1.3rem,2.5vw,1.75rem); margin-bottom:.7rem; }
.careers-sub{ font-size:.95rem; color:var(--muted); max-width:620px; line-height:1.7; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ position:relative; }
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 78% 40%, rgba(46,159,212,.10), transparent 70%);
}
.contact-layout{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }

.contact-assure{ display:grid; gap:.8rem; margin-top:2rem; }
.contact-assure li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.905rem; color:rgba(190,209,226,.88);
}
.contact-assure svg{ width:16px; height:16px; flex-shrink:0; margin-top:.32em; color:var(--cyan); }

.contact-direct{
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.contact-direct-label{
  font-size:.735rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:.42rem;
}
.contact-email{
  font-size:1.05rem; color:var(--cyan-bright);
  border-bottom:1px solid rgba(111,211,247,.35); padding-bottom:2px;
  transition:border-color .22s var(--ease);
}
.contact-email:hover{ border-color:var(--cyan-bright); }

/* ---------- form ---------- */
.contact-form{
  padding:clamp(1.6rem,3vw,2.3rem);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; gap:1.15rem;
}
.field{ display:grid; gap:.42rem; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.field label{
  font-size:.815rem; font-weight:500; letter-spacing:.03em; color:rgba(199,216,231,.88);
}
.req{ color:var(--cyan); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:.72rem .9rem;
  background:rgba(3,7,13,.55);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.925rem;
  color:var(--text-strong);
  transition:border-color .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.62; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236FD3F7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:13px;
  padding-right:2.3rem;
}
.field select option{ background:#070C15; color:var(--text-strong); }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(140,161,184,.55); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(111,211,247,.65);
  background:rgba(8,18,30,.7);
  box-shadow:0 0 0 3px rgba(46,159,212,.16);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#E4665C; }
.err{ font-size:.79rem; color:#F08A80; min-height:0; }
.err:empty{ display:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn-solid{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.85rem 1.7rem;
  border:0; border-radius:999px;
  background:linear-gradient(180deg,#7FDCFB,#2E9FD4);
  color:#03080F;
  font-size:.93rem; font-weight:600; letter-spacing:.015em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(46,159,212,.30);
  transition:transform .22s var(--ease), box-shadow .28s var(--ease), filter .22s var(--ease);
}
.btn-solid svg{ width:15px; height:15px; transition:transform .28s var(--ease); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(46,159,212,.44); filter:brightness(1.06); }
.btn-solid:hover svg{ transform:translateX(3px); }
.btn-solid:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn-block{ width:100%; margin-top:.3rem; }

.form-note{ font-size:.775rem; color:var(--muted-dim); line-height:1.6; }
.form-status{ font-size:.885rem; margin-top:.2rem; }
.form-status:empty{ display:none; }
.form-status.ok{ color:#63D9A8; }
.form-status.bad{ color:#F08A80; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-3);
  padding-top:clamp(3rem,6vw,4.5rem);
}
.footer-inner{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,2fr);
  gap:clamp(2.2rem,5vw,4rem);
  padding-bottom:3rem;
}
@media (max-width:860px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-blurb{ margin-top:1.1rem; font-size:.905rem; color:var(--muted); line-height:1.72; max-width:340px; }
.footer-strip{
  margin-top:1.4rem;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.24em; color:rgba(163,190,212,.45);
}
.footer-strip span{ color:rgba(111,211,247,.6); margin-inline:.3em; }

.footer-nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2rem; }
.footer-col h3{
  font-size:.755rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-strong); margin-bottom:1rem;
}
.footer-col ul{ display:grid; gap:.62rem; }
.footer-col a{
  font-size:.885rem; color:var(--muted);
  transition:color .22s var(--ease);
}
.footer-col a:hover{ color:var(--cyan); }

.footer-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.5rem;
  border-top:1px solid var(--line);
  font-size:.815rem; color:var(--muted-dim);
}
.footer-legal a:hover{ color:var(--cyan); }

/* ============================================================
   RESPONSIVE — nav drawer
   ============================================================ */
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:fixed; inset:0 0 auto 0;
    top:0; padding:5.5rem 1.5rem 2rem;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(4,7,13,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%);
    transition:transform .4s var(--ease);
    z-index:-1;
  }
  .primary-nav.is-open{ transform:translateY(0); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list a{
    display:block; padding:1rem .25rem; font-size:1rem; letter-spacing:.02em;
    border-bottom:1px solid var(--line);
  }
  .nav-list a.is-active::after{ display:none; }
}

@media (max-width:899px){
  .hero{ min-height:auto; }
  .hero-content{ padding-top:7rem; padding-bottom:2.5rem; }
  .hero-strip{ padding-top:2.5rem; }

  /* the V is cropped hard on narrow screens — dial it back so the
     pillar copy stays readable where the glass crosses it */
  .scene-v{ opacity:.55; }
  .scene-vertex{ opacity:.7; }
  .scene-vignette{
    background:
      radial-gradient(105% 70% at 50% 46%, transparent 30%, rgba(2,5,10,.78) 100%),
      linear-gradient(180deg, rgba(3,6,12,.86) 0%, transparent 26%);
  }
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   PAGE HEADER — the compact V used on every page except Home
   ============================================================ */
.pagehead{
  position:relative;
  min-height:clamp(290px,40vh,400px);
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--line);
}
.pagehead-scene{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Its V is drawn in a 1600×420 box with the vertex at 86%, so the scene
   layers are re-anchored to that line rather than the home page's 62%. */
.pagehead .scene-horizon{ top:78%; height:15%; filter:blur(20px); }
.pagehead .scene-floor-wrap{ top:86%; }
.pagehead .scene-pool{ top:86%; width:min(88%,1100px); height:22%; }
.pagehead .scene-vertex{ top:86%; width:min(48vw,540px); aspect-ratio:1.6; }
/* The page-head copy is left-aligned and sits straight over the glow, so the
   scrim is weighted to the left: text stays readable, the V still reads on
   the right. The scene itself is dialled back — here it is trim, not subject. */
.pagehead .scene-v{ opacity:.62; }
.pagehead .scene-vertex{ opacity:.5; }
.pagehead .scene-vignette{
  background:
    linear-gradient(90deg, rgba(2,5,10,.90) 0%, rgba(2,5,10,.62) 42%, rgba(2,5,10,.12) 72%, transparent 88%),
    radial-gradient(115% 95% at 50% 90%, transparent 32%, rgba(2,5,10,.72) 100%),
    linear-gradient(180deg, rgba(3,6,12,.88) 0%, transparent 36%);
}
.pagehead-title,
.pagehead-sub{ text-shadow:0 1px 16px rgba(3,7,14,.85); }

/* On narrow screens the copy runs the full width, so a left-weighted scrim
   leaves the right-hand end of each line sitting on a glass edge. Go uniform
   and darker instead. */
@media (max-width:900px){
  .pagehead .scene-v{ opacity:.4; }
  .pagehead .scene-vignette{
    background:
      linear-gradient(180deg, rgba(3,6,12,.90) 0%, rgba(2,5,10,.58) 42%, rgba(2,5,10,.76) 100%),
      radial-gradient(125% 100% at 50% 94%, transparent 28%, rgba(2,5,10,.70) 100%);
  }
}

.pagehead-inner{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(6.5rem,13vh,8.5rem) clamp(2rem,4.5vh,3.2rem);
}
.pagehead-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.9rem;
}
.pagehead-eyebrow::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan));
}
.pagehead-title{
  font-size:clamp(1.75rem,4vw,2.9rem);
  font-weight:600; letter-spacing:-.02em; margin-bottom:.9rem;
  max-width:20ch;
}
.pagehead-sub{
  font-size:clamp(.98rem,1.5vw,1.1rem);
  color:var(--muted); line-height:1.72; max-width:62ch;
}

/* ============================================================
   HOME — service teasers
   ============================================================ */
.teasers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.15rem;
}
.teaser{
  display:flex; flex-direction:column; gap:.6rem;
  padding:1.6rem 1.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.teaser:hover{
  transform:translateY(-4px);
  border-color:rgba(140,210,250,.42);
  box-shadow:0 16px 42px rgba(0,0,0,.44), 0 0 40px rgba(46,159,212,.14);
}
.teaser-icon{
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:.35rem;
  border:1px solid rgba(111,211,247,.26);
  border-radius:11px;
  background:rgba(46,159,212,.10);
}
.teaser-icon svg{
  width:20px; height:20px;
  fill:none; stroke:var(--cyan); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.teaser h3{ font-size:1.06rem; }
.teaser p{ font-size:.9rem; color:var(--muted); line-height:1.68; flex:1; }
.teaser-more{
  font-size:.83rem; font-weight:500; color:var(--cyan);
  display:inline-flex; align-items:center; gap:.4rem;
}
.teaser-more svg{ width:13px; height:13px; transition:transform .28s var(--ease); }
.teaser:hover .teaser-more svg{ transform:translateX(3px); }

/* ============================================================
   CLOSING CTA BAND
   ============================================================ */
.cta-band{
  position:relative;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg, rgba(9,18,31,.92), rgba(5,10,18,.92));
  padding-block:clamp(3.2rem,6.5vw,5rem);
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 130% at 50% 106%, rgba(46,159,212,.17), transparent 70%);
}
.cta-band .shell{ position:relative; }
.cta-band h2{
  font-size:clamp(1.45rem,2.9vw,2.1rem);
  letter-spacing:-.02em; margin-bottom:.85rem;
}
.cta-band p{
  font-size:1.02rem; color:var(--muted); line-height:1.72;
  max-width:56ch; margin:0 auto 1.9rem;
}
.cta-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CAREERS PAGE
   ============================================================ */
[hidden]{ display:none !important; }
.careers-simple{
  max-width:720px;
  display:grid;
  gap:1.4rem;
}
.notice{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.5rem 1.6rem;
  border:1px solid rgba(111,211,247,.30);
  border-radius:var(--r-md);
  background:rgba(46,159,212,.09);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.careers-simple .notice{ margin-bottom:0; }
.notice svg{ width:21px; height:21px; flex-shrink:0; margin-top:.15rem; color:var(--cyan); }
.notice h2{ font-size:1.1rem; margin-bottom:.45rem; }
.notice p{ font-size:.945rem; color:var(--muted); line-height:1.72; }

.cv-layout{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
}
@media (max-width:900px){ .cv-layout{ grid-template-columns:1fr; } }

.disciplines{ display:grid; gap:.65rem; margin-top:1.6rem; }
.disciplines li{
  position:relative; padding-left:1.5rem;
  font-size:.925rem; color:rgba(190,209,226,.88);
}
.disciplines li::before{
  content:""; position:absolute; left:.05rem; top:.52em;
  width:9px; height:5px;
  border-left:1.7px solid var(--cyan); border-bottom:1.7px solid var(--cyan);
  transform:rotate(-45deg);
}
.cv-card{
  padding:clamp(1.6rem,3vw,2.2rem);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--panel);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cv-card h2{ font-size:1.2rem; margin-bottom:.7rem; }
.cv-card p{ font-size:.94rem; color:var(--muted); line-height:1.72; }
.cv-card .btn-solid{ margin-top:1.6rem; width:100%; }
.cv-note{ margin-top:1.1rem; font-size:.79rem; color:var(--muted-dim); line-height:1.6; }
.cv-invitation{ text-align:center; }
.cv-upload-form{
  display:grid;
  gap:1.15rem;
}
.cv-upload-form .field{ margin:0; }
.cv-upload-form .btn-solid{ margin-top:.35rem; }
.cv-upload-form input[type="file"]{ padding:.7rem; }
.cv-upload-form input[type="file"]::file-selector-button{
  border:1px solid var(--line-bright);
  border-radius:6px;
  background:rgba(46,159,212,.12);
  color:var(--text);
  font:inherit;
  font-size:.82rem;
  padding:.55rem .75rem;
  margin-right:.8rem;
  cursor:pointer;
}
.file-help{ margin-top:.45rem; font-size:.78rem !important; color:var(--muted-dim) !important; }