/* ==========================================================================
   Nordic Fiber Solutions — Design System
   Typography: Lexend (display) + Source Sans 3 (body) — "Corporate Trust" pairing
   ========================================================================== */

:root{
  /* ---- Color: Trust & Authority (B2B Service) ----
     Navy primary + neutral grey. Accent reserved for CTAs only. */
  --navy-900:#020617;
  --navy-800:#0f172a;
  --navy-700:#1e293b;
  --navy-600:#334155;
  --navy-500:#475569;

  /* Text — tuned for WCAG AA/AAA on white */
  --ink:#020617;
  --text-body:#1e293b;   /* 13.0:1 on white */
  --text-muted:#475569;  /*  7.5:1 on white — AAA */
  --text-faint:#59677d;  /*  5.8:1 on white, 5.2:1 on tinted surfaces — AA */

  /* Surfaces */
  --white:#ffffff;
  --bg-light:#eef4fb;
  --bg-light-2:#e3edf9;
  --bg-tint:#e4eef9;
  --bg-tint-2:#d7e6f6;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;

  /* Accent — CTA use only, never decorative */
  --accent:#0369a1;
  --accent-dark:#075985;
  --accent-glow:#7dd3fc;  /* on-dark accent only */

  /* Trust signals */
  --trust:#1e40af;
  --success:#059669;
  --metric:#b45309;
  --gold:#d97706;
  --destructive:#dc2626;

  /* Type — Corporate Trust pairing */
  --font-display:'Lexend', system-ui, sans-serif;
  --font-body:'Source Sans 3', system-ui, sans-serif;
  /* Prose only. body stays on --font-body so nav, buttons, labels and form
     controls keep the sans — a serif submit button reads as a mistake. */
  --font-prose:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:'Source Sans 3', system-ui, sans-serif;

  /* Spacing */
  --section-pad:112px;
  --section-pad-sm:72px;
  --container-w:1200px;

  /* Radius — conservative, corporate */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --badge-height:48px;

  /* Shadow — restrained depth */
  --shadow-sm:0 1px 3px rgba(2,6,23,0.08);
  --shadow-md:0 4px 6px rgba(2,6,23,0.10);
  --shadow-lg:0 12px 28px rgba(2,6,23,0.13);

  /* Motion */
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-800);
  margin:0;
  line-height:1.14;
  letter-spacing:-0.015em;
}

h1{font-size:clamp(2.35rem,4.5vw,3.85rem); font-weight:700; line-height:1.12;}
h2{font-size:clamp(1.85rem,3vw,2.5rem); font-weight:700; line-height:1.18;}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem); font-weight:600; line-height:1.3;}
h4{font-size:1.05rem; font-weight:600; line-height:1.4;}

p{
  margin:0;
  font-family:var(--font-prose);
  /* Source Serif runs a touch smaller on the body than Source Sans at the
     same size, so nudge up to keep the measure reading the same. */
  font-size:1.04rem;
  line-height:1.72;
}
/* Small print stays sans: it is UI text, not prose. */
.form-note, .case-note, .footer-bottom p, .stat-label{font-family:var(--font-body);}

/* Newspaper-style run-in lead: the opening words of the About story set large,
   running straight into the paragraph.
   line-height:1 is load-bearing. Without it the taller inline box stretches the
   first line and the paragraph's leading goes visibly uneven against the rest of
   the story. That also caps the size: the paragraph's own line box is 28.6px
   (16.64px x 1.72), so 1.75rem (28px) is the largest the run-in can be while the
   first line still matches every other line. */
.story-runin{
  font-family:var(--font-prose);
  font-size:1.75rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.015em;
  color:var(--navy-800);
}
@media (max-width:640px){
  .story-runin{font-size:1.45rem;}
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:18px;
}
.kicker::before{
  content:'';
  width:22px;
  height:2px;
  background:var(--accent);
  display:inline-block;
}
.kicker.on-dark{color:var(--accent-glow);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.98rem;
  padding:16px 30px;
  border-radius:8px;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn:active{transform:scale(0.97);}
.btn-primary{
  background:var(--navy-800);
  color:var(--white);
  box-shadow:0 8px 24px rgba(15,23,42,0.22);
}
.btn-primary:hover{
  background:var(--accent);
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 36px rgba(3,105,161,0.32);
}
.btn-ghost{
  background:transparent;
  color:var(--navy-800);
  border-color:var(--border-strong);
}
.btn-ghost:hover{
  border-color:var(--navy-800);
  transform:translateY(-2px);
}
.btn-on-dark{
  background:var(--accent);
  color:var(--white);
}
.btn-on-dark:hover{
  background:var(--white);
  color:var(--navy-800);
  transform:translateY(-2px) scale(1.02);
}
.btn-outline-on-dark{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,0.35);
}
.btn-outline-on-dark:hover{
  border-color:var(--white);
  transform:translateY(-2px);
}
.btn-sm{padding:12px 22px; font-size:0.9rem;}
.btn-block{width:100%;}
.btn-nav{padding:12px 24px; font-size:0.9rem;}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--navy-800);
  position:relative;
}
.link-arrow svg{transition:transform .3s var(--ease-out);}
.link-arrow:hover svg{transform:translateX(6px);}
.link-arrow::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  height:1.5px; width:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.link-arrow:hover::after{transform:scaleX(1);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--border);
  box-shadow:0 4px 24px rgba(15,23,42,0.05);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  /* Wordmark from logo concept 22: Space Grotesk capitals */
  font-family:'Space Grotesk', var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--navy-800);
  flex-shrink:0;
}
.logo-mark{
  width:40px;height:40px;
  flex-shrink:0;
  transition:transform .5s var(--ease-spring);
}
/* Scale rather than tilt: a tilted N reads as falling over. */
.logo:hover .logo-mark{transform:scale(1.07);}
.logo-text-sub{
  display:block;
  font-family:'Space Grotesk', var(--font-mono);
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-top:1px;
}
.main-nav ul{display:flex; gap:38px;}
.nav-link{
  position:relative;
  font-weight:600;
  font-size:0.95rem;
  color:var(--text-body);
  padding:8px 0;
  transition:color .25s ease;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background:var(--navy-800);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav-link:hover{color:var(--navy-800);}
.nav-link:hover::after{transform:scaleX(1); transform-origin:left;}
.nav-link.active{color:var(--navy-800);}
.nav-link.active::after{transform:scaleX(1);}

.header-actions{display:flex; align-items:center; gap:18px;}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;height:42px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:10px;
}
.nav-toggle span{
  width:18px;height:2px;
  background:var(--navy-800);
  margin:0 auto;
  transition:transform .3s var(--ease-out), opacity .3s ease;
}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:fixed;
  top:0; right:0;
  width:min(360px,86vw);
  height:100%;
  background:var(--navy-800);
  z-index:1100;
  padding:32px 28px;
  transform:translateX(100%);
  transition:transform .45s var(--ease-out);
  display:flex;
  flex-direction:column;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-top{display:flex; justify-content:flex-end; margin-bottom:40px;}
.mobile-nav-close{
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  color:var(--white);
  font-size:1.2rem;
}
.mobile-nav ul{display:flex; flex-direction:column; gap:6px;}
.mobile-nav li{
  opacity:0; transform:translateX(24px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.mobile-nav.open li{opacity:1; transform:translateX(0);}
.mobile-nav.open li:nth-child(1){transition-delay:.08s;}
.mobile-nav.open li:nth-child(2){transition-delay:.14s;}
.mobile-nav.open li:nth-child(3){transition-delay:.2s;}
.mobile-nav.open li:nth-child(4){transition-delay:.26s;}
.mobile-nav.open li:nth-child(5){transition-delay:.32s;}
.mobile-nav .nav-link{
  color:rgba(255,255,255,0.82);
  font-size:1.4rem;
  font-family:var(--font-display);
  font-weight:700;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.mobile-nav .nav-link::after{display:none;}
.mobile-nav .nav-link.active{color:var(--white);}
.mobile-nav-cta{margin-top:auto; padding-top:30px;}
.nav-scrim{
  position:fixed; inset:0;
  background:rgba(5,14,34,0.55);
  z-index:1050;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
.nav-scrim.open{opacity:1; pointer-events:auto;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:96px 0 var(--section-pad);
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(3,105,161,0.16), transparent 62%),
    radial-gradient(700px 460px at -5% 20%, rgba(125,211,252,0.22), transparent 60%),
    linear-gradient(180deg, #f2f7fd 0%, var(--white) 72%);
  overflow:hidden;
}
.hero-bg-shape{
  position:absolute;
  top:-120px; right:-180px;
  width:760px;height:760px;
  z-index:0;
  opacity:0.9;
  animation:heroShapeFloat 14s ease-in-out infinite;
  transform-origin:60% 40%;
}
@keyframes heroShapeFloat{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}
  50%{transform:translate(-18px,22px) rotate(3deg) scale(1.03);}
}
.hero-visual{animation:heroVisualFloat 6s ease-in-out 1.1s infinite;}
@keyframes heroVisualFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
#fiberPathHero{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:fiberDraw 2.4s var(--ease-out) .3s forwards;
}
@keyframes fiberDraw{ to{stroke-dashoffset:0;} }
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr 0.85fr;
  gap:64px;
  align-items:center;
}
.hero-eyebrow-row{display:flex; align-items:center; gap:14px; margin-bottom:26px;}
.hero h1{margin-bottom:26px;}
.hero h1 .accent-word{color:var(--accent);}
.hero-sub{
  font-size:1.15rem;
  color:var(--text-muted);
  max-width:560px;
  margin-bottom:38px;
}
.hero-cta-row{display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.hero-visual{
  position:relative;
  aspect-ratio:1/1.05;
}
.hero-stats-mini{
  display:flex;
  gap:34px;
  margin-top:56px;
  padding-top:40px;
  border-top:1px solid var(--border);
}
.hero-stats-mini .mini-stat-num{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:700;
  color:var(--navy-800);
}
.hero-stats-mini .mini-stat-label{
  font-size:0.82rem;
  color:var(--text-muted);
  margin-top:2px;
}

/* anim */
.reveal-up{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.reveal-up.in{opacity:1; transform:translateY(0);}
.reveal-left{opacity:0; transform:translateX(-46px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);}
.reveal-left.in{opacity:1; transform:translateX(0);}
.reveal-scale{opacity:0; transform:scale(.88); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring);}
.reveal-scale.in{opacity:1; transform:scale(1);}
.d1{transition-delay:.08s;} .d2{transition-delay:.18s;} .d3{transition-delay:.28s;} .d4{transition-delay:.38s;} .d5{transition-delay:.48s;}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0;
  height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-glow));
  z-index:1200;
  transition:width .1s linear;
}
/* ---------- Sections generic ---------- */
section{padding:var(--section-pad) 0;}
.section-tight{padding:calc(var(--section-pad) * .7) 0; background:var(--bg-light);}

/* Tinted surface — the main alternating band */
.section-alt{
  background:linear-gradient(180deg, var(--bg-tint) 0%, var(--bg-light) 100%);
  border-top:1px solid rgba(3,105,161,0.10);
  border-bottom:1px solid rgba(3,105,161,0.10);
}

/* Softer wash for sections that sit on white */
.section-wash{position:relative; overflow:hidden; background:var(--white);}
.section-wash::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(680px 400px at 88% 6%, rgba(3,105,161,0.13), transparent 68%),
    radial-gradient(560px 360px at 4% 94%, rgba(125,211,252,0.20), transparent 68%);
  pointer-events:none;
}
.section-wash > .container{position:relative; z-index:1;}

.section-navy{background:var(--navy-800); color:rgba(255,255,255,0.86);}
.section-navy h2, .section-navy h3, .section-navy h4{color:var(--white);}
.section-head{max-width:680px; margin-bottom:64px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{color:var(--text-muted); font-size:1.08rem; margin-top:18px;}
.section-navy .section-head p{color:rgba(255,255,255,0.62);}
.section-foot-link{margin-top:48px; text-align:center;}

/* ---------- Stats strip ---------- */
.stats-strip{
  background:var(--navy-800);
  position:relative;
  overflow:hidden;
}
.stats-strip::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(1200px 320px at 15% 0%, rgba(3,105,161,0.22), transparent 60%),
             radial-gradient(900px 300px at 90% 100%, rgba(125,211,252,0.14), transparent 60%);
}
.stats-row{
  position:relative;
  display:grid;
  /* minmax(0,1fr), not 1fr: the default min is auto, so "100,000+" forced its
     own column wider than the others and the four cells came out uneven. */
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* Four stats need a 2x2 step before stacking, or the numbers shrink to
   nothing on tablets. The dividers have to be rebuilt per row there. */
@media (max-width:1000px){
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-item{padding:48px 28px;}
  .stat-item:nth-child(2n){border-right:none;}
  .stat-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,0.12);}
}
.stat-item{
  padding:58px 22px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.12);
  transition:transform .4s var(--ease-out);
}
.stat-item:hover{transform:translateY(-6px);}
.stat-item:hover .stat-num{color:var(--accent-glow);}
.stat-num{transition:color .4s ease;}
.stat-item:last-child{border-right:none;}
.stat-num{
  font-family:var(--font-display);
  font-weight:700;
  /* Sized down from clamp(2.6rem,5vw,4rem): that was set for three stats.
     With "100,000+" in a quarter-width cell it overran the column. */
  font-size:clamp(1.9rem,3vw,2.8rem);
  color:var(--white);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
}
.stat-num .plus{color:var(--accent-glow);}
.stat-label{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);
}

/* ---------- Pillars ---------- */
.pillars-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.pillar-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:48px 44px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
  position:relative;
  overflow:hidden;
}
.pillar-card::before{
  content:'';
  position:absolute; left:0; top:0; height:4px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-glow));
  transition:width .5s var(--ease-out);
}
.pillar-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.pillar-card:hover::before{width:100%;}
.pillar-icon{
  width:60px;height:60px;
  border-radius:16px;
  background:var(--bg-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
  color:var(--navy-800);
  transition:transform .5s var(--ease-spring), background .3s ease, color .3s ease;
}
.pillar-card:hover .pillar-icon{
  transform:rotate(-8deg) scale(1.08);
  background:var(--navy-800);
  color:var(--accent-glow);
}
.pillar-card h3{margin-bottom:14px;}
.pillar-card p{color:var(--text-muted); margin-bottom:26px;}
.pillar-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
  background:rgba(3,105,161,0.08);
  padding:6px 12px;
  border-radius:100px;
  margin-bottom:20px;
}

/* ---------- Process ---------- */
.process-list{display:flex; flex-direction:column;}
.process-step{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:36px;
  padding:40px 0;
  border-top:1px solid var(--border);
  position:relative;
}
.process-step:last-child{border-bottom:1px solid var(--border);}
.process-num{
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:700;
  color:var(--border-strong);
  transition:color .4s ease;
}
.process-step.in .process-num{color:var(--accent);}
.process-body h3{margin-bottom:10px;}
.process-body p{color:var(--text-muted); max-width:640px;}
.process-tag{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:8px;
  display:block;
}

/* ---------- Why us ---------- */
.why-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.why-list{display:flex; flex-direction:column; gap:28px;}
.why-item{display:flex; gap:20px; align-items:flex-start;}
.why-check{
  width:32px;height:32px;
  border-radius:9px;
  background:rgba(3,105,161,0.1);
  color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.why-item h4{margin-bottom:6px;}
.why-item p{color:var(--text-muted);}
.why-visual{
  background:var(--navy-800);
  border-radius:var(--r-lg);
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
}

/* ---------- Case studies ---------- */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.case-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:38px 32px;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.case-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
.case-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--navy-700);
  padding:5px 11px;
  border-radius:100px;
  margin-bottom:22px;
}
.case-result{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  color:var(--navy-800);
  margin:18px 0 14px;
  line-height:1.25;
}
.case-challenge{color:var(--text-muted); font-size:0.95rem;}
.case-divider{height:1px; background:var(--border); margin:22px 0;}
.case-metric{display:flex; align-items:baseline; gap:8px;}
.case-metric-num{font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--accent-dark);}
.case-metric-label{font-size:0.82rem; color:var(--text-muted);}
.case-note{
  text-align:center;
  margin-top:36px;
  font-size:0.85rem;
  color:var(--text-faint);
  font-style:italic;
}

/* ---------- Logos ---------- */
.logos-strip-label{
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:40px;
}
.logos-strip-mask{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-row{
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation:logosMarquee 24s linear infinite;
}
.logos-row:hover{animation-play-state:paused;}
@keyframes logosMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-placeholder{
  width:132px;height:44px;
  flex-shrink:0;
  border-radius:8px;
  background:repeating-linear-gradient(135deg, var(--border) 0 8px, transparent 8px 16px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--text-faint);
  filter:grayscale(1);
  opacity:0.5;
  transition:transform .35s var(--ease-out), filter .35s ease, opacity .35s ease;
}
.logo-placeholder:hover{transform:translateY(-4px); filter:grayscale(0); opacity:1;}

/* Static carrier logo row.
   Heights are set per logo rather than shared. AT&T is a symbol-plus-wordmark lockup, so
   matching its box height to the two pure wordmarks would make its lettering far smaller
   than theirs; these values match the lettering instead, which is what the eye compares.
   Shown in full brand color — all three carriers' guidelines restrict recoloring their
   marks, so the usual grayscale logo-strip treatment isn't available here. */
.logos-row-static{
  animation:none;
  width:auto;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:64px;
}
.carrier-logo{
  width:auto;
  flex-shrink:0;
  opacity:0.9;
  transition:opacity .35s ease, transform .35s var(--ease-out);
}
.carrier-logo:hover{opacity:1; transform:translateY(-3px);}
.carrier-logo-att{height:78px;}
.carrier-logo-verizon{height:38px;}
.carrier-logo-tmobile{height:32px;}
/* Stepped down in two stages rather than one: at full size the row is ~590px wide,
   which would collide with the container just below the 860px breakpoint. */
@media (max-width:860px){
  .logos-row-static{gap:44px;}
  .carrier-logo-att{height:62px;}
  .carrier-logo-verizon{height:30px;}
  .carrier-logo-tmobile{height:26px;}
}
@media (max-width:640px){
  .logos-row-static{gap:18px;}
  .carrier-logo-att{height:44px;}
  .carrier-logo-verizon{height:21px;}
  .carrier-logo-tmobile{height:19px;}
}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testi-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:38px 34px;
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.testi-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent;}
.testi-stars{transition:transform .3s var(--ease-spring);}
.testi-card:hover .testi-stars{transform:scale(1.08);}
.testi-stars{display:flex; gap:4px; color:var(--gold);}
.testi-quote{font-size:1.05rem; color:var(--navy-800); line-height:1.65;}
.testi-person{display:flex; align-items:center; gap:14px; margin-top:auto;}
.testi-avatar{
  width:46px;height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex;align-items:center;justify-content:center;
  color:var(--white); font-family:var(--font-display); font-weight:700; font-size:0.95rem;
}
.testi-name{font-weight:700; color:var(--navy-800); font-size:0.92rem;}
.testi-role{font-size:0.82rem; color:var(--text-muted);}

/* ---------- Final CTA ---------- */
.final-cta{
  background:var(--navy-800);
  border-radius:var(--r-lg);
  padding:80px 64px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(600px 260px at 50% 0%, rgba(3,105,161,0.25), transparent 70%);
}
.final-cta-inner{position:relative;}
.final-cta h2{color:var(--white); max-width:640px; margin:0 auto 20px;}
.final-cta p{color:rgba(255,255,255,0.62); max-width:520px; margin:0 auto 38px; font-size:1.05rem;}
.final-cta-actions{display:flex; gap:20px; justify-content:center; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,0.6); padding:88px 0 0;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo{color:var(--white);}
.footer-brand p{margin:20px 0 26px; max-width:280px; font-size:0.92rem; line-height:1.7;}
.footer-social{display:flex; gap:12px;}
.footer-social a{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.footer-social a:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-3px);}
.footer-col h4{color:var(--white); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:20px; font-family:var(--font-mono); font-weight:500;}
.footer-col ul{display:flex; flex-direction:column; gap:12px;}
.footer-col a{font-size:0.94rem; transition:color .25s ease, padding-left .25s ease;}
.footer-col a:hover{color:var(--white); padding-left:4px;}
.footer-contact-item{margin-bottom:16px;}
.footer-contact-item span{display:block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.35); margin-bottom:4px;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 0;
  font-size:0.85rem;
}
.footer-bottom a:hover{color:var(--white);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:72px 0 90px;
  background:
    radial-gradient(760px 420px at 85% -10%, rgba(3,105,161,0.18), transparent 62%),
    radial-gradient(600px 380px at -5% 110%, rgba(125,211,252,0.24), transparent 62%),
    linear-gradient(180deg, #e8f1fb 0%, var(--bg-light) 100%);
  position:relative;
  overflow:hidden;
}
.page-hero .container{position:relative; z-index:1;}
.page-hero h1{max-width:760px;}
.page-hero-sub{font-size:1.1rem; color:var(--text-muted); max-width:600px; margin-top:22px;}
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.78rem; color:var(--text-faint);
  margin-bottom:24px; text-transform:uppercase; letter-spacing:0.06em;
}
.breadcrumb a:hover{color:var(--accent-dark);}


/* ---------- Photo page hero (inner pages) ---------- */
/* A band rather than a full screen: the 100dvh treatment stays unique to home,
   so the inner pages read as subordinate to it. If the photo is missing or
   fails to load the navy gradient underneath stands on its own. */
.page-hero--photo{
  min-height:clamp(330px, 46vh, 460px);
  display:flex;
  align-items:flex-end;
  padding:78px 0 54px;
  background:
    radial-gradient(900px 520px at 78% 0%, rgba(3,105,161,0.42), transparent 64%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color:rgba(255,255,255,0.85);
  isolation:isolate;
}
.page-hero--tall{min-height:clamp(400px, 58vh, 560px); padding:92px 0 64px;}
.page-hero-media{position:absolute; inset:0; z-index:0;}
.page-hero-media .slot-img{
  display:block; width:100%; height:100%;
  /* Subjects sit high in all four photos, so anchor near the top: at 38%
     the crop was clipping the top of heads on the contact and careers shots. */
  object-fit:cover; object-position:center 20%;
}
.page-hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.83) 38%, rgba(2,6,23,0.54) 66%, rgba(2,6,23,0.32) 100%),
    linear-gradient(180deg, rgba(2,6,23,0.40) 0%, rgba(2,6,23,0.16) 40%, rgba(2,6,23,0.74) 100%);
}
/* The hero is a flex row, so without an explicit width the container shrinks to
   fit its text and the auto margins then centre that narrow box — which pushed
   the inner-page headings inboard of the 1200px grid every other section uses. */
.page-hero--photo .container{z-index:2; width:100%;}
.page-hero--photo h1{color:var(--white);}
.page-hero--photo .page-hero-sub{color:rgba(255,255,255,0.86);}
.page-hero--photo .breadcrumb{color:rgba(255,255,255,0.76);}
.page-hero--photo .breadcrumb a{color:rgba(255,255,255,0.92);}
.page-hero--photo .breadcrumb a:hover{color:var(--accent-glow);}
@media (max-width:860px){
  /* No room for a side-by-side split, so the copy spans the width and the
     scrim has to darken top-to-bottom instead of left-to-right. */
  .page-hero--photo{min-height:clamp(300px, 40vh, 390px); padding:58px 0 40px;}
  .page-hero--tall{min-height:clamp(340px, 48vh, 440px); padding:66px 0 48px;}
  .page-hero-scrim{
    background:linear-gradient(180deg, rgba(2,6,23,0.82) 0%, rgba(2,6,23,0.74) 38%, rgba(2,6,23,0.93) 100%);
  }
  .page-hero-media .slot-img{object-position:center 22%;}
}

/* ---------- Services page ---------- */
/* Offset jump-scroll targets so the sticky header never covers the heading */
.service-detail{scroll-margin-top:100px;}
.service-detail .service-block{scroll-margin-top:112px;}
.service-detail.is-focused{animation:serviceFocusPulse 1.3s ease-out;}
@keyframes serviceFocusPulse{
  0%{box-shadow:inset 0 0 0 0 rgba(3,105,161,0.22);}
  30%{box-shadow:inset 0 0 0 5px rgba(3,105,161,0.12);}
  100%{box-shadow:inset 0 0 0 0 rgba(3,105,161,0);}
}

.service-choice-card{
  width:100%;
  background:var(--white);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.service-choice-card:hover{border-color:var(--accent);}
.service-choice-card:focus-visible, .next-service-prompt:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.service-choice-card.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(3,105,161,0.14), var(--shadow-md);
}
.service-choice-card.is-selected::before{width:100%;}
.service-choice-card .pillar-icon{background:rgba(3,105,161,0.1); color:var(--accent-dark);}

.choice-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding:11px 20px;
  border-radius:8px;
  background:var(--accent);
  color:var(--white);
  font-weight:600;
  font-size:0.9rem;
  transition:background .3s ease, transform .35s var(--ease-spring), gap .3s ease, box-shadow .3s ease;
  box-shadow:0 6px 18px rgba(3,105,161,0.24);
}
.choice-cta svg{transition:transform .3s ease;}
.service-choice-card:hover .choice-cta, .next-service-prompt:hover .choice-cta{
  background:var(--accent-dark);
  gap:12px;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(3,105,161,0.32);
}

.next-service-prompt{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:8px;
  padding:26px 30px;
  background:rgba(3,105,161,0.05);
  border:1.5px solid rgba(3,105,161,0.2);
  border-radius:var(--r-md);
  font-family:inherit;
  cursor:pointer;
  text-align:left;
  transition:border-color .3s ease, background .3s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
.next-service-prompt:hover{background:rgba(3,105,161,0.09); border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.next-service-prompt .choice-cta{margin-top:0;}
.next-service-label{
  display:block;
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--accent-dark); margin-bottom:4px;
}
.next-service-prompt h4{font-size:1.1rem;}

.service-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  padding:96px 0;
  border-bottom:1px solid var(--border);
}
.service-block:last-child{border-bottom:none;}
.service-block.reverse{direction:rtl;}
.service-block.reverse > *{direction:ltr;}
.service-visual{
  aspect-ratio:5/4.4;
  border-radius:var(--r-lg);
  background:var(--navy-800);
  position:relative;
  overflow:hidden;
}
.service-list{margin:28px 0 34px; display:flex; flex-direction:column; gap:14px;}
.service-list li{display:flex; gap:12px; align-items:flex-start; color:var(--text-body); font-size:0.98rem;}
.service-list li svg{flex-shrink:0; margin-top:3px; color:var(--accent-dark);}
.service-meta-row{display:flex; gap:36px; margin-bottom:30px; flex-wrap:wrap;}
.service-meta-item span{display:block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); margin-bottom:6px;}
.service-meta-item strong{color:var(--navy-800); font-family:var(--font-display); font-size:1rem;}
.deliverables-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px;}
.deliverable-chip{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
  font-size:0.88rem;
  font-weight:600;
  color:var(--navy-800);
  display:flex; gap:10px; align-items:center;
  transition:transform .3s var(--ease-out), border-color .3s ease, background .3s ease;
}
.deliverable-chip:hover{transform:translateX(4px); border-color:var(--accent); background:var(--white);}
.deliverable-chip svg{color:var(--accent-dark); flex-shrink:0;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:28px 0;
  background:none; border:none; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--navy-800);
}
.faq-q{transition:color .3s ease;}
.faq-q:hover{color:var(--accent-dark);}
.faq-icon{
  width:32px;height:32px; flex-shrink:0;
  border-radius:9px;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:background .3s ease, border-color .3s ease, transform .45s var(--ease-spring);
}
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute;
  background:var(--navy-800);
  transition:transform .3s ease, background .3s ease;
}
.faq-icon::before{width:12px;height:2px;}
.faq-icon::after{width:2px;height:12px;}
.faq-item.open .faq-icon{background:var(--navy-800); transform:rotate(90deg);}
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after{background:var(--white);}
.faq-item.open .faq-icon::after{transform:scaleY(0);}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s var(--ease-out), padding .3s ease;
}
.faq-a p{padding-bottom:28px; color:var(--text-muted); max-width:680px;}
.faq-item.open .faq-a{max-height:280px;}

/* ---------- About page ---------- */
/* Heading left, narrative right. Aligned to the top rather than centred: the
   story now runs to six paragraphs, and centring left the heading floating
   halfway down an empty column. */
.story-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start;}
/* It had no stacking rule at all, so the two columns kept splitting the width
   right down to phone sizes — 121px of heading beside 150px of body text. */
@media (max-width:860px){
  .story-grid{grid-template-columns:1fr; gap:26px;}
}
/* Four across on the full grid. Below 1040px four cards get too narrow to hold
   a sentence, so they fold to two and then to one. */
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.value-card{
  padding:34px 28px 36px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  text-align:left;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
             border-color .3s ease;
}
.value-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent);
}
.value-card h4{font-size:1.2rem;}
.value-card p{
  color:var(--text-muted);
  margin-top:12px;
  font-size:0.95rem;
}
/* The icon tile is the same component the homepage service cards use, so the
   two sections read as one system. */
.value-card .pillar-icon{margin-bottom:24px;}
.value-card:hover .pillar-icon{
  transform:rotate(-8deg) scale(1.08);
  background:var(--navy-800);
  color:var(--accent-glow);
}

/* Values on navy. Same surface/border values the other dark cards use. */
.section-navy .value-card{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}
.section-navy .value-card:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(125,211,252,0.45);
  box-shadow:none;
}
.section-navy .value-card p{color:rgba(255,255,255,0.70);}
.section-navy .value-card .pillar-icon{
  background:rgba(125,211,252,0.14);
  color:var(--accent-glow);
}
.section-navy .value-card:hover .pillar-icon{
  background:var(--accent-glow);
  color:var(--navy-900);
}
@media (max-width:1040px){
  .values-grid{grid-template-columns:repeat(2,1fr);}
}

.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,240px)); gap:28px; justify-content:center;}
.team-card{text-align:left;}
.team-photo{
  aspect-ratio:1/1.05;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.team-photo span{
  font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:rgba(255,255,255,0.85);
  transition:transform .45s var(--ease-spring);
}
.team-card:hover .team-photo{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.team-card:hover .team-photo span{transform:scale(1.1);}
.team-name{font-weight:700; color:var(--navy-800); font-size:1.02rem;}
.team-role{font-size:0.86rem; color:var(--accent-dark); margin-top:2px; font-family:var(--font-mono); letter-spacing:0.02em;}

.timeline{position:relative; max-width:820px; margin:0 auto;}
.timeline::before{
  content:''; position:absolute; left:120px; top:0; bottom:0; width:1.5px; background:var(--border-strong);
}
.timeline-item{
  display:grid; grid-template-columns:120px 1fr; gap:36px; padding:32px 0; position:relative;
}
.timeline-year{font-family:var(--font-display); font-weight:700; color:var(--navy-800); font-size:1.3rem;}
.timeline-dot{
  position:absolute; left:114px; top:38px;
  width:13px;height:13px; border-radius:50%;
  background:var(--white); border:2.5px solid var(--accent);
}
.timeline-item.in .timeline-dot{animation:timelineDotPulse 2.2s ease-out .3s 1;}
@keyframes timelineDotPulse{
  0%{box-shadow:0 0 0 0 rgba(3,105,161,0.45);}
  70%{box-shadow:0 0 0 12px rgba(3,105,161,0);}
  100%{box-shadow:0 0 0 0 rgba(3,105,161,0);}
}
.timeline-body h4{margin-bottom:8px;}
.timeline-body p{color:var(--text-muted);}

/* Timeline under the story heading, using the column the heading leaves empty. */
.story-timeline{
  list-style:none;
  margin-top:48px;
  padding-left:34px;
  position:relative;
}
/* The rail fades out below the last dot rather than stopping dead, so the
   sequence reads as ongoing instead of finished. */
.story-timeline::before{
  content:'';
  position:absolute; left:6px; top:8px; bottom:4px;
  width:2px;
  background:linear-gradient(180deg,
    var(--accent) 0%,
    var(--accent) 62%,
    rgba(3,105,161,0.22) 100%);
  border-radius:2px;
}
.story-timeline li{position:relative; padding-bottom:30px;}
.story-timeline li:last-child{padding-bottom:0;}
.story-timeline li::before{
  content:'';
  position:absolute; left:-34px; top:4px;
  width:14px; height:14px; box-sizing:border-box;
  border-radius:50%;
  background:var(--white);
  border:3px solid var(--accent);
}
.story-timeline-year{
  display:block;
  font-family:var(--font-display); font-weight:700;
  color:var(--accent); font-size:1.18rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}
.story-timeline-label{
  display:block;
  /* --text-body rather than --text-muted: at this size the muted grey went
     weak next to the brighter years. */
  color:var(--text-body); font-size:1rem; margin-top:3px;
}
@media (max-width:860px){
  .story-timeline{margin-top:30px; margin-bottom:6px;}
}
@media (max-width:640px){
  .story-timeline li{padding-bottom:24px;}
  .story-timeline-year{font-size:1.08rem;}
  .story-timeline-label{font-size:0.95rem;}
}

/* ---------- Careers page ---------- */
.why-join-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.why-join-card{
  padding:36px 30px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.why-join-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent;}
.why-join-card:hover .pillar-icon{transform:rotate(-8deg) scale(1.08); background:var(--navy-800); color:var(--accent-glow);}
.why-join-card .pillar-icon{margin-bottom:22px;}
.traits-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
.trait-chip{
  padding:12px 22px;
  border-radius:100px;
  background:var(--white);
  border:1px solid var(--border-strong);
  font-weight:600;
  font-size:0.92rem;
  color:var(--navy-800);
  transition:transform .3s var(--ease-spring), border-color .3s ease, background .3s ease, color .3s ease;
}
.trait-chip:hover{
  transform:translateY(-4px) scale(1.04);
  border-color:var(--accent);
  background:var(--navy-800);
  color:var(--white);
}
.roles-list{display:flex; flex-direction:column; gap:16px;}
.role-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:30px 34px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color .3s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
.role-card:hover{border-color:var(--accent); transform:translateX(6px); box-shadow:var(--shadow-sm);}
.role-title{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--navy-800); margin-bottom:8px;}
.role-meta{display:flex; gap:16px; flex-wrap:wrap;}
.role-desc{font-size:0.98rem; color:var(--text-muted); margin:4px 0 12px; max-width:600px;}
.role-meta span{
  font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint);
  display:flex; align-items:center; gap:6px;
}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  align-items:flex-start;
}
.contact-form-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:48px;
  box-shadow:var(--shadow-md);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.form-group{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.form-group label{font-size:0.85rem; font-weight:600; color:var(--navy-800);}
.form-group input, .form-group select, .form-group textarea{
  padding:15px 16px;
  border-radius:11px;
  border:1.5px solid var(--border);
  background:var(--bg-light);
  font-size:0.96rem;
  color:var(--ink);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(3,105,161,0.12);
}
.form-group textarea{resize:vertical; min-height:120px;}
.form-group input[type="file"]{padding:11px; border-style:dashed; cursor:pointer; font-size:0.9rem; color:var(--text-muted);}
.form-group input[type="file"]::file-selector-button{margin-right:14px; padding:9px 16px; border:0; border-radius:8px;
  background:var(--navy-800); color:#fff; font-family:inherit; font-weight:600; font-size:0.85rem; cursor:pointer; transition:background .2s ease;}
.form-group input[type="file"]::file-selector-button:hover{background:var(--accent);}
.label-optional{font-weight:400; color:var(--text-faint);}
/* UI hint, so it stays on the sans rather than the prose serif */
.field-hint{font-family:var(--font-body); font-size:0.8rem; color:var(--text-faint); margin:0;}
.field-hint.is-error{color:#b91c1c; font-weight:600;}
.form-note{font-size:0.8rem; color:var(--text-faint); margin-top:16px;}

.contact-side-card{
  background:var(--navy-800);
  color:rgba(255,255,255,0.8);
  border-radius:var(--r-lg);
  padding:40px;
  margin-bottom:24px;
}
.contact-side-card h4{color:var(--white); margin-bottom:18px;}
.contact-info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;}
.contact-info-row:last-child{margin-bottom:0;}
.contact-info-row svg{color:var(--accent-glow); flex-shrink:0; margin-top:2px;}
.contact-info-row span{display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.42); font-family:var(--font-mono); margin-bottom:3px;}
.contact-info-row strong{font-weight:600; color:var(--white); font-size:0.95rem;}
.contact-side-note{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px;
}
.contact-side-note h4{margin-bottom:12px;}
.contact-side-note p{color:var(--text-muted); font-size:0.94rem;}

/* ---------- Thank you page ---------- */
.thankyou-section{
  min-height:80vh;
  display:flex; align-items:center;
  padding:80px 0;
}
.thankyou-inner{text-align:center; max-width:640px; margin:0 auto;}
.thankyou-icon{
  width:88px;height:88px;
  border-radius:50%;
  background:rgba(3,105,161,0.1);
  color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 32px;
}
.thankyou-inner h1{margin-bottom:20px;}
.thankyou-inner p{color:var(--text-muted); font-size:1.1rem; margin-bottom:12px;}
.thankyou-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin:48px 0; text-align:left;
}
.thankyou-step{padding:24px; border:1px solid var(--border); border-radius:var(--r-md);}
.thankyou-step-num{
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--accent-dark); margin-bottom:10px; display:block;
}
.thankyou-step h4{margin-bottom:6px; font-size:0.95rem;}
.thankyou-step p{font-size:0.85rem; color:var(--text-muted); margin:0;}
.thankyou-actions{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:16px;}

/* ---------- Privacy page ---------- */
.legal-content{max-width:800px; margin:0 auto;}
.legal-content h2{margin:48px 0 18px; font-size:1.5rem;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p, .legal-content li{color:var(--text-body); margin-bottom:14px;}
.legal-content ul{padding-left:22px; list-style:disc; margin-bottom:14px;}
.legal-updated{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:40px; display:block;
}

/* ---------- Fiber line decorative ---------- */
.fiber-pulse{
  offset-path:path('M0,60 C150,10 300,110 460,60 S 760,10 900,60');
  animation:travel 5.5s linear infinite;
}
@keyframes travel{
  0%{offset-distance:0%; opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{offset-distance:100%; opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  .reveal-up, .reveal-left, .reveal-scale{opacity:1; transform:none; filter:none;}
}

/* ---------- Utilities ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .hero-visual{max-width:480px; margin:0 auto;}
  .why-grid{grid-template-columns:1fr;}
  .service-block{grid-template-columns:1fr; gap:40px;}
  .service-block.reverse{direction:ltr;}
  .why-join-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
}
@media (max-width:860px){
  .main-nav{display:none;}
  .header-actions .btn-nav{display:none;}
  .nav-toggle{display:flex;}
  :root{--section-pad:84px;}
  .pillars-grid{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  /* Stay 2x2 on phones. Stacking the four stats in one column, on top of the
     112px padding every <section> gets, turned the strip into a full screen of
     scrolling. The 1000px rule above already draws the 2x2 dividers. */
  .stats-strip{padding:26px 0;}
  .stat-item{padding:22px 8px;}
  .stat-num{font-size:clamp(1.35rem,7.2vw,1.75rem);}
  .stat-label{font-size:0.66rem;letter-spacing:.08em;margin-top:6px;line-height:1.35;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .process-step{grid-template-columns:60px 1fr; gap:20px;}
  .process-num{font-size:1.8rem;}
  .deliverables-grid{grid-template-columns:1fr;}
  .thankyou-steps{grid-template-columns:1fr;}
  .final-cta{padding:56px 28px;}
  .timeline::before{left:52px;}
  .timeline-item{grid-template-columns:52px 1fr; gap:20px;}
  .timeline-dot{left:46px;}
}
@media (max-width:640px){
  .container{padding:0 20px;}
  h1{font-size:clamp(2.1rem,8vw,2.8rem);}
  .contact-form-card{padding:28px 22px;}
  .final-cta-actions{flex-direction:column; width:100%;}
  .final-cta-actions .btn{width:100%;}
  .hero-cta-row{flex-direction:column; align-items:flex-start; gap:18px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; gap:12px; text-align:center;}
  .values-grid{grid-template-columns:1fr;}
}

/* ---------- Tabular figures (prevents number width shift) ---------- */
.stat-num, .case-metric-num, .timeline-year, .mini-stat-num,
.value-num, .process-num, .thankyou-step-num, .metric-value{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- Hero trust bar (Trust & Authority proof strip) ---------- */
.trust-bar{
  display:flex;
  flex-wrap:wrap;
  gap:14px 30px;
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.trust-bar li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.92rem;
  font-weight:600;
  color:var(--text-muted);
}
.trust-bar svg{
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--success);
}
@media (max-width:640px){
  .trust-bar{gap:12px 20px;}
  .trust-bar li{font-size:0.88rem;}
}

/* ---------- Touch targets: enforce 44x44 minimum (WCAG / Apple HIG / MD) ---------- */
.nav-toggle{width:44px; height:44px;}
.mobile-nav-close{width:44px; height:44px;}
.footer-social a{width:44px; height:44px;}

/* Inline text links: expand tap height without moving the underline */
.link-arrow{padding:11px 0;}
.link-arrow::after{bottom:7px;}

/* Footer nav links: comfortable tap height */
.footer-col ul a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.footer-col ul{gap:0;}

/* Footer contact links */
.footer-contact-item a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Breadcrumb links */
.breadcrumb a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.logo{min-height:44px;}
.footer-col ul a{min-width:44px;}
.footer-bottom a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.main-nav .nav-link{display:inline-flex; align-items:center; min-height:44px;}
.breadcrumb a{min-width:44px; justify-content:flex-start;}

/* ---------- Color: richer surfaces & accents ---------- */

/* Testimonials on navy */
.section-navy .testi-card{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}
.section-navy .testi-card:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(125,211,252,0.45);
}
.section-navy .testi-quote{color:#f1f5f9;}
.section-navy .testi-name{color:#ffffff;}
.section-navy .testi-role{color:rgba(255,255,255,0.66);}
.section-navy .testi-avatar{
  background:linear-gradient(135deg,var(--accent),#0ea5e9);
  color:#ffffff;
}
.section-navy .section-head p{color:rgba(255,255,255,0.68);}

/* Icon chips carry brand color instead of grey */
.pillar-icon{
  background:linear-gradient(135deg, rgba(3,105,161,0.12), rgba(125,211,252,0.20));
  color:var(--accent-dark);
}

/* Tags */
.pillar-tag{
  background:rgba(3,105,161,0.10);
  color:var(--accent-dark);
}
.case-tag{background:var(--accent-dark);}

/* Check marks in service lists / why-list */
.why-check{
  background:rgba(5,150,105,0.12);
  color:var(--success);
}
.service-list li svg{color:var(--success);}

/* Metric figures get their own accent */
.case-metric-num{color:var(--metric);}
.value-num{color:var(--accent-dark);}

/* Kickers inside dark sections must use the on-dark accent */
.section-navy .kicker, .page-hero--photo .kicker, .stats-strip .kicker{color:var(--accent-glow);}
.section-navy .kicker::before{background:var(--accent-glow);}

/* Footer micro-labels were too faint against navy */
.footer-contact-item span{color:rgba(255,255,255,0.62);}

/* ==========================================================================
   Image slots — placeholders describing the photo that belongs here.
   To use a real photo, replace the whole .image-slot div with:
     <img src="images/your-file.jpg" alt="Describe the photo" class="slot-img">
   ========================================================================== */
.image-slot{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:clamp(20px,6%,38px);
  background:linear-gradient(150deg,var(--navy-800) 0%, var(--navy-700) 55%, #17324f 100%);
  border-radius:inherit;
  overflow:hidden;
}
.image-slot::after{
  content:'';
  position:absolute; inset:12px;
  border:1.5px dashed rgba(125,211,252,0.30);
  border-radius:calc(var(--r-lg) - 6px);
  pointer-events:none;
}
.slot-head{
  display:flex; align-items:center; gap:9px;
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-glow);
}
.slot-head svg{width:17px; height:17px; flex-shrink:0;}
.slot-prompt{
  font-family:var(--font-body);
  font-size:clamp(0.86rem,1.15vw,0.99rem);
  line-height:1.6;
  color:#eef4fb;
  margin:0;
}
.slot-meta{
  margin-top:auto;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.62);
}
.slot-meta strong{color:rgba(255,255,255,0.86); font-weight:600;}

/* Real photos drop straight in with the same shape */
.slot-img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

/* Portrait slots (team headshots) are tighter — smaller type */
.team-photo .image-slot{padding:18px; gap:10px;}
.team-photo .slot-prompt{font-size:0.78rem; line-height:1.5;}
.team-photo .slot-head{font-size:0.6rem; letter-spacing:0.1em;}
.team-photo .image-slot::after{inset:9px;}

@media (max-width:640px){
  .slot-prompt{font-size:0.85rem;}
  .slot-meta{font-size:0.68rem;}
}

/* Team headshot slots are small — tighten so the prompt always fits */
.team-photo .image-slot{padding:14px; gap:7px; justify-content:flex-start;}
.team-photo .slot-head{font-size:0.55rem; letter-spacing:0.08em; gap:6px;}
.team-photo .slot-head svg{width:14px; height:14px;}
.team-photo .slot-prompt{font-size:0.73rem; line-height:1.45;}
.team-photo .slot-meta{font-size:0.62rem; line-height:1.35;}

/* Slot containers hold no in-flow content, so auto margins would collapse them */
.hero-visual, .why-visual, .service-visual, .team-photo{width:100%;}

/* ==========================================================================
   Full-screen hero (homepage)
   ========================================================================== */
.hero-full{
  position:relative;
  --header-h:85px;
  min-height:calc(100svh - var(--header-h));   /* svh avoids the mobile URL-bar jump */
  min-height:calc(100dvh - var(--header-h));
  padding:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy-900);
  isolation:isolate;
}
.hero-full .hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-full .hero-media .slot-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}
/* Placeholder fills the whole screen while there is no photo yet */
.hero-full .hero-slot{
  border-radius:0;
  justify-content:center;
  align-items:flex-end;
  text-align:right;
  padding:clamp(24px,5vw,72px);
}
.hero-full .hero-slot::after{inset:20px; border-radius:4px;}
.hero-full .hero-slot .slot-prompt{max-width:46ch;}
.hero-full .hero-slot .slot-meta{margin-top:14px;}

/* Scrim keeps the headline readable over any photo */
.hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(2,6,23,0.94) 0%, rgba(2,6,23,0.90) 45%, rgba(2,6,23,0.74) 62%, rgba(2,6,23,0.36) 85%, rgba(2,6,23,0.28) 100%),
    linear-gradient(180deg, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.12) 34%, rgba(2,6,23,0.62) 100%);
  pointer-events:none;
}

.hero-full .hero-content{
  position:relative;
  z-index:2;
  max-width:min(720px, 100%);
  margin-right:auto;
  padding-top:120px;
  padding-bottom:130px;
}
.hero-full h1{color:var(--white); margin-bottom:24px;}
.hero-full h1 .accent-word{color:var(--accent-glow);}
.hero-full .hero-sub{
  color:rgba(255,255,255,0.90);
  max-width:60ch;
  margin-bottom:36px;
}
.hero-full .kicker{margin-bottom:20px;}
.hero-full .trust-bar{border-top-color:rgba(255,255,255,0.22);}
.trust-bar.on-dark li{color:rgba(255,255,255,0.92);}
.trust-bar.on-dark svg{color:var(--accent-glow);}

/* Scroll cue */
.hero-scroll-cue{
  position:absolute;
  left:50%; bottom:26px;
  transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-height:44px; padding:6px 14px;
  font-size:0.7rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.82);
  transition:color .3s ease;
}
.hero-scroll-cue svg{width:20px; height:20px; animation:cueBob 2.4s ease-in-out infinite;}
.hero-scroll-cue:hover{color:var(--white);}
@keyframes cueBob{
  0%,100%{transform:translateY(0); opacity:0.75;}
  50%{transform:translateY(5px); opacity:1;}
}

/* Header sits transparent over the hero until the user scrolls */
body[data-page="home"] .site-header:not(.scrolled){
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body[data-page="home"] .site-header:not(.scrolled) .logo,
body[data-page="home"] .site-header:not(.scrolled) .nav-link{color:var(--white);}
body[data-page="home"] .site-header:not(.scrolled) .logo-text-sub{color:var(--accent-glow);}
body[data-page="home"] .site-header:not(.scrolled) .nav-link::after{background:var(--white);}
body[data-page="home"] .site-header:not(.scrolled) .btn-primary{
  background:var(--white);
  color:var(--navy-800);
}
body[data-page="home"] .site-header:not(.scrolled) .nav-toggle{border-color:rgba(255,255,255,0.55);}
body[data-page="home"] .site-header:not(.scrolled) .nav-toggle span{background:var(--white);}

@media (max-width:860px){
  .hero-full .hero-content{padding-top:56px; padding-bottom:84px;}
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(2,6,23,0.82) 0%, rgba(2,6,23,0.76) 45%, rgba(2,6,23,0.90) 100%);
  }
  .hero-full .hero-slot{align-items:flex-start; text-align:left;}
}
@media (max-width:640px){
  .hero-full .hero-cta-row{flex-direction:column; align-items:stretch; gap:12px;}
  .hero-full .hero-cta-row .btn{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-cue svg{animation:none;}
}

/* Compact the full-screen hero on small phones so it fits one screen */
@media (max-width:640px){
  .hero-full .hero-content{padding-top:40px; padding-bottom:72px;}
  .hero-full h1{font-size:2rem; line-height:1.16; margin-bottom:16px;}
  .hero-full .kicker{margin-bottom:14px; font-size:0.72rem;}
  .hero-full .hero-sub{
    font-size:1rem;
    line-height:1.6;
    margin-bottom:24px;
  }
  .hero-full .hero-cta-row{gap:10px;}
  .hero-full .btn{padding:14px 24px;}
  .hero-full .trust-bar{
    margin-top:26px;
    padding-top:20px;
    gap:9px 18px;
  }
  .hero-full .trust-bar li{font-size:0.82rem;}
  .hero-full .trust-bar svg{width:17px; height:17px;}
  .hero-scroll-cue{bottom:14px; font-size:0.62rem;}
}

/* Hero placeholder must never collide with the headline.
   Pin it bottom-right, and drop the long prompt on narrow screens. */
.hero-full .hero-slot{
  justify-content:flex-end;
  align-items:flex-end;
  text-align:right;
  padding:clamp(20px,4vw,56px);
  padding-bottom:clamp(56px,7vw,92px);
}
.hero-full .hero-slot .slot-prompt{
  max-width:38ch;
  color:rgba(238,244,251,0.72);
}
.hero-full .hero-slot .slot-head{color:rgba(125,211,252,0.75);}
.hero-full .hero-slot .slot-meta{margin-top:10px; color:rgba(255,255,255,0.55);}

@media (max-width:1180px){
  /* Not enough clear space beside the headline — show only the short label */
  .hero-full .hero-slot .slot-prompt{display:none;}
  .hero-full .hero-slot{padding-bottom:clamp(64px,9vw,96px);}
}
@media (max-width:860px){
  .hero-full .hero-slot{align-items:flex-end; text-align:right;}
}

/* On narrow screens park the placeholder label in the gap under the header */
@media (max-width:1180px){
  .hero-full .hero-slot{
    justify-content:flex-start;
    align-items:flex-end;
    text-align:right;
    padding:14px 20px 0;
  }
  .hero-full .hero-slot .slot-meta{margin-top:2px;}
}

/* Hero must sit UNDER the transparent header, or its white text lands on white page bg */
body[data-page="home"] .hero-full{
  margin-top:calc(-1 * var(--header-h));
  min-height:100svh;
  min-height:100dvh;
}
body[data-page="home"] .hero-full .hero-content{
  padding-top:calc(64px + var(--header-h));
  padding-bottom:90px;
}
@media (max-width:860px){
  body[data-page="home"] .hero-full .hero-content{padding-top:calc(48px + var(--header-h));}
  body[data-page="home"] .hero-full .hero-slot{padding-top:calc(14px + var(--header-h));}
}
@media (max-width:640px){
  body[data-page="home"] .hero-full .hero-content{padding-top:calc(34px + var(--header-h));}
}
@media (max-width:860px){
  /* filename line is in the HTML comment anyway — keep the hero clean */
  .hero-full .hero-slot .slot-meta{display:none;}
}
#what-we-do{scroll-margin-top:85px;}

/* Hero photo focal point: subjects sit in the right third of the source
   image, so narrow viewports must bias the crop right or they get cropped out. */
.hero-full .hero-media .slot-img{object-position:58% center;}
@media (max-width:1180px){
  .hero-full .hero-media .slot-img{object-position:70% center;}
}
@media (max-width:860px){
  .hero-full .hero-media .slot-img{object-position:80% center;}
}
.main-nav .nav-link{min-width:44px; justify-content:center;}

/* Logo mark: "Rising N" (concept 22). The inline SVG reads its colours from
   these tokens, so the same markup works on the white header and on dark
   surfaces (footer, transparent home header over the hero photo). */
.logo{--lg-ink:#0F172A; --lg-acc:#0369A1; --lg-sk:#38BDF8; --lg-glow:#D3ECFB; --lg-paper:#FFFFFF;}
.site-footer .logo,
body[data-page="home"] .site-header:not(.scrolled) .logo{
  --lg-ink:#EEF4FB; --lg-acc:#38BDF8; --lg-sk:#7DD3FC; --lg-glow:rgba(56,189,248,.26); --lg-paper:#0F172A;}
.site-footer .logo{--lg-paper:#020617;}

/* ---------- Hero: shift copy left, reveal more of the photograph ----------
   The hero breaks out of the centred 1200px container so the text column
   starts near the viewport edge, leaving the right half to the image. */
/* NOTE: this element carries BOTH .container and .hero-content, so it must
   be styled in one rule — max-width here includes the left padding. */
.hero-full .hero-content{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  /* Start the copy on the same gutter the header logo uses, so the two line
     up, but let the section itself run full-bleed. */
  padding-left:max(22px, calc((100% - var(--container-w)) / 2 + 32px));
  padding-right:26px;
}
/* Cap the copy itself so the right half of the frame stays photograph */
.hero-full .hero-content > *{max-width:640px;}

/* Scrim retuned: text now ends around 48%, so the falloff starts earlier
   and finishes lighter, letting more of the photo through on the right. */
.hero-scrim{
  background:
    linear-gradient(90deg, rgba(2,6,23,0.93) 0%, rgba(2,6,23,0.88) 36%, rgba(2,6,23,0.60) 54%, rgba(2,6,23,0.24) 76%, rgba(2,6,23,0.14) 100%),
    linear-gradient(180deg, rgba(2,6,23,0.52) 0%, rgba(2,6,23,0.10) 34%, rgba(2,6,23,0.58) 100%);
}
@media (max-width:1180px){
  .hero-full .hero-content > *{max-width:560px;}
}
@media (max-width:860px){
  /* Narrow screens have no room for a side-by-side split — go back to full width */
  .hero-full .hero-content > *{max-width:100%;}
  .hero-full .hero-content{padding-right:22px;}
  .hero-scrim{
    background:linear-gradient(180deg, rgba(2,6,23,0.82) 0%, rgba(2,6,23,0.76) 45%, rgba(2,6,23,0.90) 100%);
  }
}

/* ==========================================================================
   Process timeline — a fiber line that lights as you scroll through the steps
   ========================================================================== */
.process-list{position:relative;}

/* Unlit track, running between the first and last node centres.
   56px = 22px step padding + half the 68px node. */
.process-list::before{
  content:'';
  position:absolute;
  left:33px;
  top:var(--track-top, 56px);
  bottom:var(--track-bottom, 56px);
  width:2px;
  background:var(--border-strong);
  border-radius:2px;
}
/* The drawn strand. Its height is set from JS to follow scroll position, so the
   line reads as being drawn in rather than as a light source moving along it —
   a glow needs a dark ground to register, and this section sits on a pale one. */
.process-fill{
  position:absolute;
  left:33px;
  top:var(--track-top, 56px);
  width:2px; height:0;
  /* Solid, not a gradient: a gradient on a growing element re-maps its colours
     as the element extends, so the drawn line would subtly shift hue while it
     draws. A drawn line should just be a line. */
  background:var(--accent);
  border-radius:2px;
  z-index:1;
}

.process-step{
  grid-template-columns:68px 1fr;
  gap:30px;
  padding:22px 0;
  border-top:none;
  align-items:start;
}
.process-step:last-child{border-bottom:none;}

.process-num{
  width:68px; height:68px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
  border:2px solid var(--border-strong);
  color:var(--text-faint);
  font-size:1.3rem;
  position:relative; z-index:2;
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out),
             color .45s var(--ease-out), box-shadow .45s var(--ease-out),
             transform .45s var(--ease-spring);
}
.process-step.is-active .process-num{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
  box-shadow:0 0 0 7px rgba(3,105,161,0.12);
  transform:scale(1.06);
}

.process-body{padding-top:12px;}
.process-step .process-tag{transition:color .4s ease;}
.process-step.is-active .process-tag{color:var(--accent-dark);}

@media (max-width:860px){
  .process-step{grid-template-columns:54px 1fr; gap:18px; padding:18px 0;}
  .process-num{width:54px; height:54px; font-size:1.05rem;}
  .process-list::before{left:26px; top:var(--track-top, 45px); bottom:var(--track-bottom, 45px);}
  .process-fill{left:26px; top:var(--track-top, 45px);}
  .process-body{padding-top:7px;}
}


/* Netlify Forms honeypot: off-screen rather than display:none, since some
   bots skip fields that are display:none. */
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Careers: Why Join + What We Look For, side by side ---------- */
/* Replaces the full-width 3x2 card grid plus a separate traits section, which
   together ran to ~2,400px at tablet width. */
.join-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:48px; align-items:center;}
.join-main .section-head{margin-bottom:34px;}
.perks{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px;}
.perk{display:flex; gap:14px; align-items:flex-start;}
.perk-icon{flex-shrink:0; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(3,105,161,0.12), rgba(125,211,252,0.20)); color:var(--accent-dark);}
.perk-icon svg{width:20px; height:20px;}
.perk h4{font-size:1rem; margin:2px 0 4px;}
.perk p{font-size:0.9rem; line-height:1.55; color:var(--text-muted); margin:0;}
.join-side{background:var(--navy-800); color:#fff; border-radius:var(--r-md); padding:34px 30px;
  box-shadow:0 18px 40px -22px rgba(15,23,42,0.55);}
.join-side h3{color:#fff; font-size:1.3rem; line-height:1.3; margin:4px 0 20px;}
.join-side .traits-row{justify-content:flex-start; gap:10px;}
.join-side .trait-chip{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); color:#fff; padding:9px 16px; font-size:0.86rem;}
.join-side .btn{margin-top:26px;}
@media (max-width:1000px){ .join-grid{grid-template-columns:1fr; gap:36px;} }
@media (max-width:640px){ .perks{grid-template-columns:1fr; gap:20px;} .join-side{padding:28px 22px;} }