/* ============================================================================
   QCS — Quality Civil Solutions  ·  concept.scalus.app/qcs
   Brand system pulled from the QCS Capability Profile (Jun 2026).
   OFFICIAL palette (brand guide):
     · Blue   #01466B  — Pantone 2955  (primary)
     · Slate  #323D45  — Pantone 433   (secondary, the dark half of the logo)
   Two-colour identity — no third accent colour. Slate is the accent.
   Signature device: the continuous looping "Q→S" line that snakes the corners.
   Type: humanist sans, big light statement type with a trailing full stop.
   ========================================================================== */

:root{
  --navy:      #01466B;   /* PRIMARY — Pantone 2955 (brand blue)           */
  --navy-2:    #0a3a5c;   /* slightly deeper for gradient end             */
  --navy-3:    #033a5a;   /* mid                                           */
  --steel:     #1d6a96;   /* lighter tint of brand blue — links/headings  */
  --steel-2:   #2a7cab;   /* hover                                         */
  --slate:     #323D45;   /* SECONDARY — Pantone 433 (charcoal slate)     */
  --slate-2:   #46535d;   /* lighter slate                                */
  --ink:       #232b31;   /* body text on light (slate-derived)           */
  --muted:     #5e6970;   /* secondary text                               */
  --line:      #dde3e7;   /* hairlines on light                           */
  --paper:     #ffffff;
  --paper-2:   #f3f6f8;   /* off-white section                            */
  --accent:    #323D45;   /* the single brand accent = slate              */
  --on-navy:   #e6eef4;   /* body text on navy                            */
  --on-navy-d: #9ab6c9;   /* dim text on navy                             */

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 4px;                /* QCS is angular — minimal radius               */

  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --disp: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.18,1);   /* smooth, gentle deceleration */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--steel); text-decoration:none; }
a:hover{ color:var(--steel-2); }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:600; line-height:1.04; letter-spacing:-.01em; color:var(--navy); margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }

/* eyebrow — the brand uses a thin rule + arrow after each section label */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin:0 0 22px;
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:0;
  border-top:1.5px solid var(--steel);
  position:relative; opacity:.6;
}
.eyebrow.on-navy{ color:#fff; }
.eyebrow.on-navy::after{ border-color:rgba(255,255,255,.5); }

/* the trailing-full-stop statement type, reversed out of dark or photo */
.statement{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(34px,6.2vw,76px); line-height:1.0; letter-spacing:-.02em;
}
.statement .dot{ color:var(--steel); }
.sec--navy .statement .dot,
.who-statement .statement .dot,
.hero .statement .dot{ color:#7fb4d4; }

/* ---- buttons --------------------------------------------------------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:.02em;
  padding:15px 28px; border-radius:var(--r); border:1.5px solid var(--bg);
  cursor:pointer; transition:transform .5s var(--ease), background .45s var(--ease), box-shadow .5s var(--ease);
  position:relative;
}
.btn:hover{ background:var(--navy-2); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px -16px rgba(1,70,107,.7); }
/* primary CTA — white block on navy fields, brand-blue label */
.btn--white{ --bg:#ffffff; --fg:var(--navy); border-color:#ffffff; }
.btn--white:hover{ background:#eef4f8; color:var(--navy); }
/* slate accent button — for use on light fields */
.btn--slate{ --bg:var(--slate); --fg:#fff; border-color:var(--slate); }
.btn--slate:hover{ background:var(--slate-2); color:#fff; }
.btn--ghost{ background:transparent; --fg:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px); }
.btn--outline{ background:transparent; --fg:var(--navy); border-color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:#fff; }
.btn .arr{ transition:transform .45s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ============================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:transparent; backdrop-filter:none;
  transition:background .55s var(--ease), box-shadow .55s var(--ease), backdrop-filter .55s var(--ease);
}
.nav.scrolled{
  background:rgba(255,255,255,.92); box-shadow:0 1px 0 var(--line);
  backdrop-filter:saturate(160%) blur(10px);
}
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav .logo img{ height:38px; width:auto; transition:opacity .55s var(--ease); }
.nav .logo .l-dark{ display:none; }
.nav.scrolled .logo .l-white{ display:none; }
.nav.scrolled .logo .l-dark{ display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; transition:color .4s var(--ease);
}
.nav.scrolled .nav-links a{ color:var(--slate); }
.nav-links a:hover{ color:#fff; opacity:.8; }
.nav.scrolled .nav-links a:hover{ color:var(--steel); opacity:1; }
.nav-cta{ background:#fff; color:var(--navy) !important; padding:11px 20px; border-radius:var(--r); border:1.5px solid #fff; }
.nav-cta:hover{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.6); }
.nav.scrolled .nav-cta{ background:var(--navy); color:#fff !important; border-color:var(--navy); }
.nav.scrolled .nav-cta:hover{ background:var(--slate); border-color:var(--slate); color:#fff !important; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.45s var(--ease); }
.nav.scrolled .nav-toggle span{ background:var(--navy); }

/* ============================================================================
   HERO — navy field carrying the signature Q→S line + statement
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(20,98,140,.42), transparent 60%),
    linear-gradient(160deg, #013455 0%, var(--navy) 45%, #012f4d 100%);
  color:#fff; overflow:hidden; padding-top:120px; padding-bottom:64px;
}
/* video behind the navy field — shown more clearly (full colour, higher opacity) */
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.98;
}
/* black semi-transparent wash — keeps the video visible but makes text easy to read */
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* even overall darkening, slightly lighter at the very top so the nav floats clean */
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.48) 34%, rgba(0,0,0,.54) 100%),
    /* a touch more on the left where the headline + copy + stats sit */
    linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.24) 55%, rgba(0,0,0,.14) 100%);
}
/* hero background line motif removed entirely */
.hero .line-motif{ display:none; }
/* ---- animated signature lines (used in hero + photo bands + CTA) ------- */
.line-motif path{ fill:none; }
/* base lines: draw themselves in once, slowly */
.lm-draw{
  stroke:rgba(255,255,255,.22); stroke-width:2.4;
  stroke-dasharray:2800; stroke-dashoffset:2800;
  animation:lmDraw 5.2s cubic-bezier(.16,.8,.28,1) .2s forwards;
}
.lm-draw.lm-2{ animation-duration:4.5s; animation-delay:.8s; }
@keyframes lmDraw{ to{ stroke-dashoffset:0; } }
/* flow lines: a bright dash that travels the path forever (progress / movement) */
.lm-flow{
  stroke:rgba(142,200,235,1); stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:140 2800;
  filter:drop-shadow(0 0 12px rgba(142,194,222,.85)) drop-shadow(0 0 4px rgba(220,240,255,.6));
  animation:lmFlow 7.2s linear 1.4s infinite;
}
.lm-flow.lm-flow-2{ stroke-dasharray:100 1100; animation-duration:6s; animation-delay:2.2s; opacity:.92; }
/* enhanced flowing motion with pulse glow */
.band-motif .lm-flow{
  animation:lmFlowPulse 6.8s cubic-bezier(.16,.8,.28,1) 1.2s infinite;
  filter:drop-shadow(0 0 16px rgba(142,200,235,.9)) drop-shadow(0 0 6px rgba(220,240,255,.7));
}
.band-motif .lm-draw{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.2));
}
@keyframes lmFlow{ from{ stroke-dashoffset:2800; } to{ stroke-dashoffset:0; } }
@keyframes lmFlowPulse{
  0%{ stroke-dashoffset:2800; opacity:.7; }
  50%{ opacity:1; }
  100%{ stroke-dashoffset:0; opacity:.7; }
}

.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; width:100%;
  text-shadow:0 1px 18px rgba(0,0,0,.35); }
.hero-eyebrow{
  font-family:var(--disp); font-weight:600; letter-spacing:.22em; font-size:14px;
  text-transform:uppercase; color:#b9dcef; margin-bottom:22px;
  display:inline-flex; align-items:center; gap:12px;
}
.hero-eyebrow::before{ content:""; width:28px; height:2px; background:#b9dcef; opacity:.9; }
.hero h1{ color:#fff; font-size:clamp(40px,6.6vw,82px); line-height:.98; margin-bottom:24px; }
.hero h1 em{ font-style:normal; color:#cfe2ee; }
.hero-sub{ font-size:clamp(17px,2vw,21px); color:#eef4f8; max-width:46ch; margin-bottom:34px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-tag{
  margin-top:42px; font-family:var(--disp); font-weight:600; letter-spacing:.04em;
  font-size:clamp(18px,2.4vw,26px); color:#fff;
}
.hero-tag .b{ color:#b9dcef; }

/* right column — capability quick facts on the navy */
.hero-facts{ display:grid; gap:18px; }
.hero-fact{
  border-left:3px solid rgba(255,255,255,.7); padding:6px 0 6px 18px;
}
.hero-fact b{ display:inline-block; font-family:var(--disp); font-size:32px; color:#fff; line-height:1; }
.hero-fact .plus{ display:inline-block; font-family:var(--disp); font-style:normal; font-size:32px; color:#fff; line-height:1; }
.hero-fact span{ display:block; font-size:14.5px; color:#e3edf3; letter-spacing:.02em; }

/* scroll cue */
.scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.scrollcue i{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(.2);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 50.1%{transform-origin:bottom} 100%{transform:scaleY(.2);transform-origin:bottom} }

/* ============================================================================
   LOGO MARQUEE — Tier-1 partners (white logos, rolling, dissolves on both ends)
   ========================================================================== */
.partners{ background:var(--paper); padding:38px 0; border-bottom:1px solid var(--line); }

/* navy band so the white logos read; rolls full-bleed edge to edge */
.partners--band{
  background:var(--navy);
  padding:clamp(40px,5vw,60px) 0;
  border-top:none; border-bottom:none;
  overflow:hidden;
}
.partners-kicker{
  text-align:center;
  font-family:var(--disp); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; font-size:13px;
  color:rgba(230,238,244,.62);
  margin:0 0 30px;
}

/* viewport that dissolves (fades to nothing) on the left + right edges */
.logo-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,
     transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(90deg,
     transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* the moving track — set A + set B, so a -50% shift loops seamlessly */
.logo-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:clamp(18px,2.4vw,36px);
  animation:logo-scroll 46s linear infinite;
  will-change:transform;
}
.logo-marquee:hover .logo-track{ animation-play-state:paused; }

@keyframes logo-scroll{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-50%,0,0); }
}

/* each logo sits in a rounded frosted tile — logo on top, name beneath */
.logo-chip{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  width:clamp(190px,18vw,224px);     /* identical width for every chip */
  height:clamp(118px,13vw,140px);
  padding:18px clamp(18px,2vw,26px);
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.logo-chip:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-2px);
}
/* logos are pre-padded to a 360×120 canvas, so a fixed box makes every mark
   appear the SAME size while keeping its own proportions */
.logo-chip img{
  width:clamp(116px,12vw,144px);
  height:clamp(38px,4vw,48px);
  object-fit:contain;
  opacity:.92;
  filter:brightness(0) invert(1);   /* hard-guarantee pure white regardless of source */
}
.logo-chip:hover img{ opacity:1; }
/* small company name — same font for all, uniform weight/size */
.logo-name{
  font-family:var(--disp);
  font-weight:600;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(230,238,244,.66);
  white-space:nowrap;
}

/* respect reduced motion — freeze the roll, let it wrap to a centred row */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .logo-marquee{ -webkit-mask-image:none; mask-image:none; }
}

/* ============================================================================
   GENERIC SECTION SCAFFOLD
   ========================================================================== */
.sec{ padding:clamp(72px,10vw,128px) 0; }
.sec--alt{ background:var(--paper-2); }
.sec--navy{ background:var(--navy); color:var(--on-navy); }
.sec--navy h2,.sec--navy h3{ color:#fff; }
.sec-head{ max-width:760px; margin-bottom:54px; }
.sec-head h2{ font-size:clamp(30px,4.4vw,52px); margin-bottom:18px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.lead{ font-size:clamp(17px,1.9vw,20px); color:var(--muted); }
.sec--navy .lead{ color:var(--on-navy-d); }

/* ---- WHO WE ARE (split with statement) ------------------------------- */
/* slick editorial layout: headline across the top, photo + copy below */
.who-top{ max-width:880px; margin-bottom:clamp(36px,5vw,56px); }
.who-head{
  font-size:clamp(28px,3.9vw,46px); line-height:1.1; letter-spacing:-.02em;
  color:var(--navy); margin:0; max-width:20ch;
}
.who-head .dot{ color:var(--steel); }
.who{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,72px); align-items:center; }
.who-body{ max-width:54ch; }
.who-body p{ margin:0 0 18px; color:var(--muted); font-size:16.5px; line-height:1.75; }
.who-body .lead-p{ font-size:20px; line-height:1.6; color:var(--slate); font-weight:500; margin-bottom:22px;
  padding-left:18px; border-left:3px solid var(--steel); }
.who-body p:last-of-type{ margin-bottom:26px; }

/* ============================================================================
   SERVICES / EXPERTISE GRID
   ========================================================================== */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc{
  background:var(--paper); border:1.5px solid var(--line); border-radius:8px;
  padding:30px 28px 28px; position:relative; overflow:hidden;
  transition:transform .65s var(--ease), box-shadow .65s var(--ease), border-color .6s var(--ease);
}
.sec--alt .svc{ background:#fff; }
.svc::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--slate), rgba(50,61,69,.6), transparent);
  transition:width .75s var(--ease); }
.svc::after{
  content:""; position:absolute; inset:0; background:radial-gradient(600px at var(--mx,50%) var(--my,50%),
    rgba(142,200,235,.08) 0%, transparent 80%);
  opacity:0; pointer-events:none; transition:opacity .4s ease-out;
}
.svc:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -24px rgba(1,70,107,.42); border-color:rgba(29,106,150,.3); }
.svc:hover::before{ width:100%; }
.svc:hover::after{ opacity:1; }
.svc-ic{ width:48px; height:48px; border-radius:6px; background:var(--paper-2);
  display:grid; place-items:center; margin-bottom:18px; color:var(--steel); }
.sec--alt .svc-ic{ background:#eef3f6; }
.svc-ic svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; }
.svc h3{ font-size:21px; margin-bottom:12px; }
.svc ul{ list-style:none; margin:0; padding:0; }
.svc li{ font-size:14.5px; color:var(--muted); padding:4px 0 4px 18px; position:relative; }
.svc li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px;
  background:var(--steel); border-radius:1px; transform:rotate(45deg); }

/* ============================================================================
   STATS BAND (navy) — with progress bar animations
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; position:relative; animation:statPulse 4.5s cubic-bezier(.22,.61,.18,1) 2.2s infinite; }
.stat::before{
  content:""; position:absolute; top:-14px; left:0; right:0; height:2.5px;
  background:linear-gradient(90deg, transparent, rgba(142,200,235,.95), transparent);
  opacity:0; animation:statProgress 2.1s cubic-bezier(.23,.66,.22,1) forwards,
    linePulse 4.2s ease-in-out 2.1s infinite;
}
.stat::after{
  content:""; position:absolute; bottom:-18px; left:0; right:0; height:1.8px;
  background:linear-gradient(90deg, transparent, rgba(142,200,235,.7), transparent);
  opacity:0; animation:statGlow 2.4s ease-out forwards,
    linePulse 4.8s ease-in-out 2.4s infinite;
}
.stat::before, .stat::after { box-shadow:0 0 16px rgba(142,200,235,.6); }
/* two values per prop: 1st tunes the draw-in, 2nd staggers the soft linePulse loop */
.stat:nth-child(1){ animation:statPulse 5.2s cubic-bezier(.22,.61,.18,1) 2.2s infinite; }
.stat:nth-child(1)::before{ animation-delay:.3s, 2.1s; animation-duration:2.4s, 4.2s; }
.stat:nth-child(1)::after{ animation-delay:.4s, 2.4s; animation-duration:2.8s, 4.8s; }
.stat:nth-child(2){ animation:statPulse 4.8s cubic-bezier(.22,.61,.18,1) 2.4s infinite; }
.stat:nth-child(2)::before{ animation-delay:.5s, 2.3s; animation-duration:2.3s, 4.5s; }
.stat:nth-child(2)::after{ animation-delay:.6s, 2.6s; animation-duration:2.7s, 5.1s; }
.stat:nth-child(3){ animation:statPulse 5.1s cubic-bezier(.22,.61,.18,1) 2.3s infinite; }
.stat:nth-child(3)::before{ animation-delay:.7s, 2.5s; animation-duration:2.5s, 4.4s; }
.stat:nth-child(3)::after{ animation-delay:.8s, 2.8s; animation-duration:2.9s, 5s; }
.stat:nth-child(4){ animation:statPulse 4.6s cubic-bezier(.22,.61,.18,1) 2.5s infinite; }
.stat:nth-child(4)::before{ animation-delay:.9s, 2.7s; animation-duration:2.2s, 4.6s; }
.stat:nth-child(4)::after{ animation-delay:1s, 3s; animation-duration:2.6s, 4.9s; }
@keyframes statProgress{ from{ opacity:0; width:0; transform:scaleX(0); } to{ opacity:1; width:100%; transform:scaleX(1); } }
@keyframes statGlow{ from{ opacity:0; width:0; } to{ opacity:.8; width:100%; } }
@keyframes statPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.92; } }
/* soft, continuous breathing glow on the stat lines (after the draw-in) */
@keyframes linePulse{
  0%,100%{ opacity:.45; box-shadow:0 0 10px rgba(142,200,235,.35); }
  50%{ opacity:1; box-shadow:0 0 22px rgba(142,200,235,.85); }
}
.stat b{ display:inline-block; font-family:var(--disp); font-weight:600;
  font-size:clamp(40px,6vw,68px); color:#fff; line-height:1; animation:numberGrow .8s cubic-bezier(.22,.61,.18,1) 1.2s both; }
.stat .plus{ display:inline-block; font-family:var(--disp); font-style:normal; font-weight:600;
  font-size:clamp(40px,6vw,68px); color:#fff; line-height:1; animation:numberGrow .8s cubic-bezier(.22,.61,.18,1) 1.2s both; }
.stat b .u{ color:#8ec2de; }
.stat span{ display:block; margin-top:10px; font-size:14.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-navy-d); animation:fadeInUp .7s cubic-bezier(.22,.61,.18,1) 1.8s both; }
@keyframes numberGrow{ from{ opacity:0; transform:scale(.8) translateY(12px); } to{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* ============================================================================
   VALUES
   ========================================================================== */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value{ background:var(--navy); color:#fff; border-radius:8px; padding:28px 28px 30px;
  border-left:4px solid rgba(255,255,255,.5); transition:transform .65s var(--ease), border-color .5s var(--ease), box-shadow .6s var(--ease);
  box-shadow:0 8px 20px -12px rgba(1,42,64,.3); position:relative; overflow:hidden; }
.value::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px at var(--mx,50%) var(--my,50%),
    rgba(142,200,235,.12) 0%, transparent 80%);
  opacity:0; pointer-events:none; transition:opacity .4s ease-out;
}
.value:hover{ transform:translateY(-5px); border-color:#fff; box-shadow:0 14px 36px -14px rgba(1,42,64,.5); }
.value:hover::before{ opacity:1; }
.value h3{ color:#fff; font-size:18px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; position:relative; z-index:1; }
.value p{ margin:0; color:var(--on-navy); font-size:15px; position:relative; z-index:1; }

/* ============================================================================
   TEAM  (real headshots + bios from the Capability Profile)
   ========================================================================== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
.member{ text-align:center; }
.member-photo{
  width:124px; height:124px; border-radius:50%; margin:0 auto 18px;
  overflow:hidden; position:relative; background:var(--paper-2);
  box-shadow:0 0 0 1px var(--line), 0 0 0 6px #fff, 0 0 0 7px var(--line);
}
.sec--alt .member-photo{ box-shadow:0 0 0 1px var(--line), 0 0 0 6px var(--paper-2), 0 0 0 7px var(--line); }
.member-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02); }
.member h3{ font-size:19px; margin-bottom:2px; }
.member .role{ font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel); margin-bottom:12px; }
.member p{ margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

/* ============================================================================
   PROJECT PHOTO BANDS (real QCS site imagery)
   ========================================================================== */
.who-photo{ border-radius:10px; overflow:hidden; position:relative; align-self:stretch;
  min-height:380px; box-shadow:0 40px 80px -44px rgba(1,70,107,.6); }
.who-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.6;
  transition:transform 1.4s var(--ease); }
.who-photo:hover img{ transform:scale(1.045); }
.who-photo .cap{
  position:absolute; left:0; right:0; bottom:0; padding:30px 22px 16px; color:#fff; z-index:2;
  background:linear-gradient(transparent, rgba(1,42,64,.88));
  font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:.04em;
}
.photo-band{ position:relative; min-height:clamp(340px,42vw,500px); display:flex; align-items:center;
  overflow:hidden; color:#fff; }
.photo-band img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  animation:bandKen 26s ease-in-out infinite alternate; }
@keyframes bandKen{ from{ transform:scale(1.04); } to{ transform:scale(1.13); } }
/* dark anchor on the left so the headline sits on contrast (text is centred vertically) */
.photo-band::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(75deg, rgba(1,42,64,.82) 0%, rgba(1,42,64,.42) 42%, rgba(1,70,107,.06) 78%, rgba(1,70,107,0) 100%); }
.photo-band .band-motif{ position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.55; pointer-events:none; }
.photo-band .pb-in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--pad); width:100%; }
.photo-band .statement{ color:#fff; max-width:16ch; font-size:clamp(28px,4.6vw,52px); }
.photo-band p{ color:var(--on-navy); max-width:50ch; margin-top:14px; font-size:clamp(16px,1.8vw,19px); }

/* projects gallery strip */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery figure{ margin:0; border-radius:8px; overflow:hidden; position:relative; box-shadow:0 12px 30px -18px rgba(1,70,107,.3); }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .95s var(--ease), filter .8s var(--ease); }
.gallery figure:hover img{ transform:scale(1.08); filter:brightness(1.15); }
.gallery figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 18px 14px; color:#fff;
  background:linear-gradient(transparent, rgba(1,35,55,.92)); font-family:var(--disp); font-weight:600;
  font-size:13.5px; letter-spacing:.04em; transition:transform .45s var(--ease); }
.gallery figure:hover figcaption{ transform:translateY(-3px); }

/* ============================================================================
   WHY QCS (feature grid on alt)
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 40px; }
.why{ position:relative; padding-left:24px; }
.why::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--steel), rgba(29,106,150,.35));
  transform:scaleY(0); transform-origin:top;
}
.js-anim .why.in::before{ animation:whyHeight 1s cubic-bezier(.22,.61,.18,1) forwards; }
@keyframes whyHeight{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
/* if JS/animation off, show the line statically */
.why:not(.in)::before{ transform:scaleY(1); }
.why .n{ font-family:var(--disp); font-weight:700; font-size:14px; color:var(--steel);
  letter-spacing:.12em; display:block; margin-bottom:6px; }
.why h3{ font-size:20px; margin:0 0 10px; }
.why p{ margin:0; color:var(--muted); font-size:15.5px; }

/* ============================================================================
   LOCATIONS
   ========================================================================== */
.locs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.loc{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:28px; position:relative; }
.loc .pin{ width:34px; height:34px; color:var(--steel); margin-bottom:14px; }
.loc h3{ font-size:20px; margin-bottom:6px; }
.loc .state{ font-family:var(--disp); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:13px; color:var(--steel); margin-bottom:14px; }
.loc address{ font-style:normal; color:var(--muted); font-size:15px; line-height:1.5; }

/* ============================================================================
   CTA / CONTACT (form → /api/lead)
   ========================================================================== */
.cta{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#013455,var(--navy) 55%,#012f4d); color:#fff;
}
.cta .line-motif{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.cta .line-motif .lm-draw{ stroke:rgba(255,255,255,.16); }
.cta-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.cta h2{ color:#fff; font-size:clamp(32px,4.6vw,56px); margin-bottom:18px; }
.cta-lead{ color:var(--on-navy); font-size:18px; max-width:42ch; margin-bottom:28px; }
.cta-contacts{ display:grid; gap:14px; margin-top:30px; }
.cta-contact{ display:flex; gap:14px; align-items:center; }
.cta-contact svg{ width:20px; height:20px; stroke:#8ec2de; fill:none; stroke-width:1.8; flex:none; }
.cta-contact a, .cta-contact span{ color:#fff; }
.cta-contact small{ display:block; color:var(--on-navy-d); font-size:13px; }

.form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:8px; padding:clamp(26px,3.4vw,40px); backdrop-filter:blur(6px); }
.form h3{ color:#fff; font-size:24px; margin-bottom:6px; }
.form .fnote{ color:var(--on-navy-d); font-size:14px; margin:0 0 22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--disp); font-weight:600; color:var(--on-navy-d); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.96); border:1.5px solid transparent; border-radius:var(--r);
  padding:13px 15px; font:inherit; font-size:16px; color:var(--ink); transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color:var(--steel); box-shadow:0 0 0 3px rgba(29,106,150,.28); }
.form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-ok{ display:none; text-align:center; padding:24px 8px; }
.form-ok.show{ display:block; }
.form-ok svg{ width:54px; height:54px; stroke:#8ec2de; fill:none; stroke-width:1.6; margin:0 auto 14px; }
.form-ok h3{ margin-bottom:8px; }
.form-ok p{ color:var(--on-navy); margin:0; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.foot{ background:#082836; color:var(--on-navy-d); padding:56px 0 30px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start; }
.foot .logo img{ height:42px; margin-bottom:18px; }
.foot p{ font-size:14.5px; max-width:40ch; margin:0 0 6px; }
.foot h4{ color:#fff; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:9px; font-size:14.5px; }
.foot a{ color:var(--on-navy-d); }
.foot a:hover{ color:#fff; }
.foot-bot{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:13px; }
.foot-bot a.scalus{ color:var(--on-navy-d); }
.foot-bot a.scalus:hover{ color:#fff; }

/* ============================================================================
   REVEAL
   ========================================================================== */
.js-anim .reveal{ opacity:0; transform:translateY(24px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease); }
.js-anim .reveal.in{ opacity:1; transform:none; }
.js-anim .reveal.d1{ transition-delay:.14s; } .js-anim .reveal.d2{ transition-delay:.28s; }
.js-anim .reveal.d3{ transition-delay:.42s; } .js-anim .reveal.d4{ transition-delay:.56s; }
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{ opacity:1; transform:none; transition:none; }
  .line-motif path{ animation:none !important; stroke-dashoffset:0; }
  .lm-flow{ display:none; }
  .hero-bg, .photo-band img.bg{ animation:none; }
  .scrollcue i{ animation:none; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-facts{ grid-template-columns:repeat(3,1fr); }
  .who{ grid-template-columns:1fr; }
  .svc-grid,.values,.why-grid,.locs{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; gap:34px 26px; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; gap:36px 20px; }
  .cta-grid,.foot-top{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--navy); flex-direction:column; align-items:flex-start; gap:8px;
    padding:96px 28px 28px; transform:translateX(100%); transition:transform .6s var(--ease);
    box-shadow:-20px 0 50px -20px rgba(0,0,0,.6); }
  .nav-links.open{ transform:none; }
  .nav-links a{ color:#fff; font-size:18px; padding:10px 0; }
  .nav.scrolled .nav-links a{ color:#fff; }
  .nav-toggle{ display:block; z-index:70; }
  .svc-grid,.values,.why-grid,.locs,.hero-facts,.stats,.gallery{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; gap:28px 18px; }
  .hero-facts{ gap:14px; }
  .stat{ text-align:center; }
}