/* ═══════════════ IMPACT CASES — SHARED STYLES ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --black:#13161b;
  --panel:#1c2127;
  --plate:#262c33;
  --seam:rgba(255,255,255,.06);
  --tan:#c9b489;
  --grey:#97a3ad;
  --grey-hi:#cfd8df;
  --white:#f2f5f7;
  --red:#d31f2b;
  --red-hi:#f03540;
  --red-dim:rgba(211,31,43,.12);
  --cq-blue:#5a82d2;
  --cq-blue-hi:#7ba3e8;
  --cq-blue-dim:rgba(90,130,210,.16);
  --mono:'Share Tech Mono',monospace;
  --cond:'Saira Condensed',sans-serif;
  --body:'Saira',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

html{scroll-behavior:smooth;font-size:17.5px}
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
img{display:block;max-width:100%}

.wrap{width:min(1280px,93%);margin-inline:auto}

.kicker{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--mono);font-size:1rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red-hi);
}
.kicker::before,.kicker::after{content:'';height:1px;width:30px;background:var(--red)}
.kicker.left::after,.kicker.left::before{display:none}

/* section tag — trailing gradient line, for sub-headers that introduce a block */
.tag-line{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--mono);font-weight:700;font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-hi);margin:0 0 1.6rem;text-shadow:0 0 18px rgba(211,31,43,.55);
}
.tag-line::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,rgba(211,31,43,.7),transparent)}

h1,h2,h3{font-family:var(--cond);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.h-xl{font-size:clamp(3rem,7.4vw,5.8rem);font-weight:900;letter-spacing:-.014em;line-height:.94}
.h-lg{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800;margin-top:.8rem;letter-spacing:-.006em;line-height:1}
/* trademark mark on a headline — rides high off the last letter, small enough
   that it reads as a mark and not part of the word */
.h-tm{font-style:normal;font-size:.26em;font-weight:700;vertical-align:top;line-height:1.6;letter-spacing:0;opacity:.75;margin-left:.05em}
.lede{color:var(--grey-hi);font-weight:300;font-size:clamp(1.05rem,1.55vw,1.2rem);line-height:1.62;max-width:62ch;margin-top:1.2rem;letter-spacing:.004em}
.btn.hero-brochure{
  margin-top:1.6rem;
  background:rgba(211,31,43,.12);
  box-shadow:inset 0 0 0 2px var(--red);
  color:var(--white);
  text-shadow:0 0 14px rgba(211,31,43,.4);
}
.btn.hero-brochure:hover{background:var(--red);box-shadow:inset 0 0 0 2px var(--red-hi);color:#fff}

.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--cond);font-weight:700;font-size:1.05rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 2rem;cursor:pointer;border:0;
  transition:.25s var(--ease);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn-solid{background:var(--red);color:#fff}
.btn-solid:hover{background:var(--red-hi);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--red);color:var(--red-hi)}

.rv{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* word-by-word hero subtitle reveal — each word fades/rises in on its own,
   staggered by js, so the sentence appears to assemble itself on load */
.wd-reveal .wd{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(3px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft),filter .5s var(--ease-soft)}
.wd-reveal.wd-go .wd{opacity:1;transform:translateY(0);filter:blur(0)}
/* test/screenshot helper (?nointro=1): pin viewport-height heroes to a fixed height */
html.no-vh-hero .hero{min-height:0!important;padding:13rem 0 6rem}

section{padding:8rem 0;position:relative}
[id]{scroll-margin-top:124px}
.lede{margin-bottom:.4rem}

.tex{
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px;
}
/* Contact/quote section: studio-white-stack.webp as a fixed parallax backdrop */
.tex-contact{
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(8,10,12,.88),rgba(8,10,12,.92)),
    url("../images/studio-white-stack.webp");
  background-size:52px 52px,52px 52px,cover,cover;
  background-position:0 0,0 0,center,center;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-attachment:scroll,scroll,fixed,fixed;
}
.tex-contact > .wrap{position:relative;z-index:1}

/* Company section: LOL.webp as a full-scale hero background, text stays readable */
.company-hero{
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(8,10,12,.72),rgba(8,10,12,.82)),
    url("../images/Conquest Rackmount Folder/LOL.jpg");
  background-size:52px 52px,52px 52px,cover,cover;
  background-position:0 0,0 0,center,center;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-attachment:scroll,scroll,scroll,scroll;
}
.company-hero > .wrap{position:relative;z-index:1}
.company-hero .lede{
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
}
/* Core Capabilities section: HHERO.webp as a full-scale scrolling hero background */
.cap-hero{
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(8,10,12,.74),rgba(8,10,12,.84)),
    url("../images/Conquest Rackmount Folder/HHERO.webp");
  background-size:52px 52px,52px 52px,cover,cover;
  background-position:0 0,0 0,center,center;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-attachment:scroll,scroll,scroll,scroll;
}
.cap-hero > .wrap{position:relative;z-index:1}
/* Single Lid Customization section: SAM.webp as a pinned backdrop behind the whole (very tall) section.
   Uses position:sticky instead of background-attachment:fixed — fixed backgrounds force a full
   repaint of the image on every scroll frame and were causing scroll jank on this long section. */
.sam-hero{
  position:relative;
  padding-top:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px,52px 52px;
  background-position:0 0,0 0;
  background-repeat:repeat,repeat;
}
/* section's own top padding moved onto .wrap so the sticky bg (a normal-flow child)
   can start flush at the section's top edge instead of being pushed down by it */
.sam-hero > .wrap{padding-top:8rem}
.sam-hero-bg{
  position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(8,10,12,.76),rgba(8,10,12,.9)),
    url("../images/Capabilitys/SAM.webp");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.sam-hero > .wrap{position:relative;z-index:1}
/* Rackmount Customization section: open ConQuest rackmount as a full-scale scrolling hero background */
.rack-hero{
  position:relative;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(8,10,12,.76),rgba(8,10,12,.86)),
    url("../images/111.webp");
  background-size:52px 52px,52px 52px,cover,cover;
  background-position:0 0,0 0,center,center;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-attachment:scroll,scroll,scroll,scroll;
}
.rack-hero > .wrap{position:relative;z-index:1}
.hazard{
  height:8px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,#0a0c0e 14px 28px);
  opacity:.85;
  animation:hazard-slide 1.6s linear infinite;
}
/* 39.598px = one stripe period (28px) projected horizontally, so the loop wraps seamlessly */
@keyframes hazard-slide{to{background-position:39.598px 0}}

/* ═══════════════ RIVETED SEAM DIVIDER ═══════════════
   Alternative to .hazard for pages that want a calmer boundary. Reads as a
   strip of riveted 5052 plate: a brushed band, a row of struck rivet heads
   lit from above, and a slow specular sweep. Markup:
     <div class="seam-rivet"><span class="seam-sheen"></span></div>
   Accent comes from --sr (band edge + rivet rim) and --sr-core (the lit
   crown of each rivet), so a page recolors it by setting those two, e.g.
   .seam-rivet.sr-red. Both are bare RGB triplets, not colors. */
.seam-rivet{
  --sr:201,180,137;      /* desert tan, the default */
  --sr-core:232,218,186;
  position:relative;height:14px;overflow:hidden;
  background:
    linear-gradient(180deg,#151a1f 0%,#0d1114 42%,#070a0c 58%,#111519 100%);
  border-top:1px solid rgba(var(--sr),.26);
  border-bottom:1px solid rgba(0,0,0,.85);
}
/* brand accents — ConQuest blue, Target tan (the default), P.E.T.S. orange,
   plus Impact red for pages that aren't brand-specific */
.seam-rivet.sr-red{--sr:211,31,43;  --sr-core:255,138,144}
.seam-rivet.sr-blue{--sr:90,130,210; --sr-core:176,205,255}
.seam-rivet.sr-orange{--sr:232,115,31; --sr-core:255,196,146}
/* brushed silver — for pages that aren't tied to a single case brand */
.seam-rivet.sr-silver{--sr:184,194,206; --sr-core:242,247,252}
/* brushed-metal grain */
.seam-rivet::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
}
/* rivet heads — a lit crown offset above its dark seat. Geometry is tuned to
   the 14px band height; changing that height means rescaling these offsets. */
.seam-rivet::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 6px 8.6px,rgba(0,0,0,.8) 0 2.7px,transparent 3.2px),
    radial-gradient(circle at 6px 7.4px,rgba(var(--sr-core),.95) 0 1.7px,rgba(var(--sr),.42) 1.7px 2.5px,transparent 2.8px);
  background-size:24px 100%;
}
/* specular sweep — the one moving part, far slower than the hazard stripe */
.seam-sheen{
  position:absolute;top:0;bottom:0;left:-32%;width:30%;pointer-events:none;
  background:linear-gradient(90deg,
    transparent,rgba(var(--sr),.14) 42%,rgba(255,255,255,.11) 50%,rgba(var(--sr),.14) 58%,transparent);
  animation:seamSweep 9s linear infinite;
}
@keyframes seamSweep{to{left:106%}}
@media(prefers-reduced-motion:reduce){.seam-sheen{animation:none;display:none}}
.classif{
  display:inline-block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--tan);
  border:1px dashed rgba(201,180,137,.45);padding:.45rem 1rem;
}

/* ═══════════════ NAV ═══════════════ */
header{
  position:fixed;inset:0 0 auto 0;z-index:300;
  transition:.3s var(--ease);
  /* always-on scrim so the nav stays legible over hero photos before any scroll */
  background:linear-gradient(180deg,rgba(10,12,14,.9) 0%,rgba(10,12,14,.5) 55%,rgba(10,12,14,0) 100%);
}
header.scrolled{
  background:rgba(10,12,14,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--seam);
}
header.hide{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:104px}
header .wrap{width:min(1360px,95%)}
header .logo-img{width:190px;height:75px}
.logo-img{
  width:234px;height:92px;flex:none;
  background-image:url('../images/logo-square.webp');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.nav-links{display:flex;gap:.4rem;list-style:none;align-items:center;margin-left:1rem;margin-right:auto}
.nav-links a{
  font-family:var(--cond);font-weight:700;font-size:.96rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--red-hi);padding:.46rem .8rem;position:relative;transition:.25s var(--ease);
  background:rgba(8,10,12,.42);
  box-shadow:inset 0 0 0 1px rgba(211,31,43,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.nav-links a:hover,.nav-links a.active{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1px var(--red);text-shadow:none}
/* Request Quote shares the same chip look */
.nav-quote{color:var(--red-hi)!important}
.nav-quote:hover,.nav-quote.active{background:var(--red);color:#fff!important;box-shadow:inset 0 0 0 1px var(--red)}
.nav-tel{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:#fff;transition:.25s}

/* nav collapses to the burger menu — 6 links fit inline down to ~960px */
@media(max-width:1000px){
  .nav-links,.nav-tel{display:none}
  .burger{display:flex}
  header.open .nav-links{
    display:flex;flex-direction:column;align-items:flex-start;
    position:absolute;top:100%;left:0;right:0;padding:1.6rem 4%;gap:1.3rem;
    background:rgba(10,12,14,.98);border-bottom:1px solid var(--seam);
  }
}

/* ═══════════════ PAGE HERO (interior pages) ═══════════════ */
.page-hero{
  position:relative;padding:13rem 0 5rem;overflow:hidden;
}
.page-hero .ph-photo{position:absolute;inset:0;z-index:0}
.page-hero .ph-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) saturate(.96);
}
/* The contact photo is square, so object-fit:cover scales it to the hero's width
   and leaves no horizontal overflow — object-position can't shift it sideways.
   Scaling up past the frame is what creates the room to slide it left. The 1.24
   settle gives 12% of overflow a side, so the -10% shift keeps ~2% in hand and
   never exposes an edge; push the two together if it needs to go further.
   .ph-photo.ph-photo-contact (not just .ph-photo-contact) so this outranks the
   generic `.page-hero .ph-photo img` settle-zoom further down the file — that
   rule has equal specificity and comes later, so it was silently winning and
   kbSettleContact never actually ran. */
.page-hero .ph-photo.ph-photo-contact img{
  filter:brightness(1.25) saturate(.96);
  animation:kbSettleContact 26s var(--ease-soft) both;
}
@keyframes kbSettleContact{
  from{transform:translateX(-10%) scale(1.30)}
  to{transform:translateX(-10%) scale(1.24)}
}
@media(prefers-reduced-motion:reduce){
  .page-hero .ph-photo.ph-photo-contact img{animation:none;transform:translateX(-10%) scale(1.24)}
}
.page-hero .ph-photo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,rgba(10,12,14,.94) 12%,rgba(10,12,14,.66) 50%,rgba(10,12,14,.18) 100%),
    linear-gradient(0deg,var(--black) 0,transparent 30%);
}
.page-hero .wrap{position:relative;z-index:2}
.crumbs{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);margin-bottom:1.2rem;
}
.crumbs a{color:var(--grey);text-decoration:none}
.crumbs a:hover{color:var(--red-hi)}
.crumbs b{color:var(--tan);font-weight:400}

/* ═══════════════ HOME HERO ═══════════════ */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:10rem 0 6rem;position:relative;overflow:hidden;
}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:68% center;
  filter:brightness(.94) saturate(.98) contrast(1.04);
  /* slight fixed over-scale so scroll-parallax (js) never exposes an edge;
     the perpetual Ken-Burns zoom was removed for a calmer, more premium feel */
  transform:scale(1.04);
}
.hero-photo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(95deg,rgba(10,12,14,.88) 10%,rgba(10,12,14,.58) 48%,rgba(10,12,14,.06) 80%),
    linear-gradient(0deg,var(--black) 0,transparent 22%),
    linear-gradient(180deg,rgba(10,12,14,.5) 0,transparent 16%);
}
/* Home upper region: one continuous HUD-plate backdrop behind
   everything from below the hero down through the product lines;
   the overlay only feathers the two seams so the plate itself reads. */
.home-upper{
  position:relative;
  background:
    linear-gradient(180deg,rgba(10,12,14,.55) 0,rgba(10,12,14,.12) 14%,rgba(10,12,14,.12) 78%,rgb(12,15,18) 100%),
    url("../images/home-backdrop-hud.webp") center/cover no-repeat;
  background-attachment:scroll,scroll;
}
/* let the backdrop glow through the marquee band instead of flat panel grey */
.home-upper .strip{background:rgba(17,19,22,.55)}
.reticle{position:absolute;inset:0;z-index:1;pointer-events:none}
.reticle i{position:absolute;width:26px;height:26px;border-color:rgba(255,255,255,.25);border-style:solid;border-width:0}
.reticle i:nth-child(1){top:124px;left:3.5%;border-top-width:1px;border-left-width:1px}
.reticle i:nth-child(2){top:124px;right:3.5%;border-top-width:1px;border-right-width:1px}
.reticle i:nth-child(3){bottom:26px;left:3.5%;border-bottom-width:1px;border-left-width:1px}
.reticle i:nth-child(4){bottom:26px;right:3.5%;border-bottom-width:1px;border-right-width:1px}
.hero-inner{position:relative;z-index:2;max-width:800px}
.hero-tag{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tan);border:1px solid rgba(201,180,137,.4);
  background:rgba(201,180,137,.07);padding:.55rem 1.1rem;margin-bottom:1.7rem;
}
.hero-tag i{width:7px;height:7px;background:var(--red);animation:blip 1.6s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
.hero h1 em{font-style:normal;color:var(--red)}
.hero h1 .stroke{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
.hero-sub{margin-top:1.4rem;text-shadow:0 1px 14px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem}
.hero-specline{
  display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:3.2rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--grey);
}
.hero-specline b{color:var(--tan);font-weight:400}

/* ═══════════════ HERO TYPE SEQUENCE ═══════════════
   Every hero on the site runs off one clock. --t0 is when the hero starts
   (pushed back on a genuine entry so nothing moves behind the splash);
   --t1 is when its headline has finished landing, written per hero by js
   from the actual character count, so whatever comes after the headline
   follows it instead of guessing at a fixed delay.

   Three treatments, all built by js from plain markup:
     .hero-type  — home only. Big words rise out of their own masks, slow.
     .hero-stamp — every other headline. Prints letter by letter, fast.
     .hero-quick — the small copy under a headline. Word by word, faster still.
   ═══════════════════════════════════════════════════ */
.hero-seq{--t0:.25s;--t1:.9s;--glow:211,31,43}
html.intro .hero-seq{--t0:2.95s}

.hero-type .ht-w,.hero-quick .ht-w{
  display:inline-block;overflow:hidden;
  /* padding keeps descenders and the text-stroke out of the clip; the matching
     negative margins plus vertical-align:bottom keep the line boxes exactly the
     height they were before the words were wrapped (no layout shift) */
  padding:.14em .08em .2em;margin:-.14em -.08em -.2em;
  vertical-align:bottom;
}
.hero-type .ht-i,.hero-quick .ht-i{display:inline-block}
/* letters split individually, but each word stays nowrap so a line still
   breaks between words and never mid-word */
.hero-stamp .ht-wd{display:inline-block;white-space:nowrap}
.hero-stamp .ht-c{display:inline-block}

@media (prefers-reduced-motion:no-preference){
  /* held blank until js has split the text, so nothing flashes fully-formed */
  .hero-type,.hero-stamp,.hero-quick{opacity:0}
  .hero-type.ht-ready,.hero-stamp.ht-ready,.hero-quick.ht-ready{opacity:1}

  .hero-type .ht-i{animation:htWord 1.15s cubic-bezier(.16,1,.3,1) both}
  .hero-stamp .ht-c{animation:htChar .38s cubic-bezier(.2,.85,.25,1) both}
  .hero-quick .ht-i{animation:htWordFast .5s cubic-bezier(.2,.85,.25,1) both}

  /* shared furniture, sequenced around the headline */
  .hero-seq .crumbs{animation:htRise .6s var(--ease) var(--t0) both}
  .hero-seq .hero-tag{animation:htRise .7s var(--ease) calc(var(--t0) + .08s) both}
  .hero-seq .hero-ctas,
  .hero-seq .hero-brochure{animation:htRise .7s var(--ease) calc(var(--t0) + var(--t1) + .3s) both}

  /* home hero keeps its own slower cadence */
  .hero-seq.hero-slow .hero-tag{animation:htRise .95s var(--ease) var(--t0) both}
  .hero-seq.hero-slow .hero-sub{animation:htRise 1.1s var(--ease) calc(var(--t0) + .95s) both}
  .hero-seq.hero-slow .hero-ctas{animation:htRise 1s var(--ease) calc(var(--t0) + 1.3s) both}
}
@keyframes htWord{
  0%  {opacity:0;transform:translateY(125%);filter:blur(7px)}
  55% {opacity:1}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes htWordFast{
  0%  {opacity:0;transform:translateY(105%)}
  100%{opacity:1;transform:none}
}
/* each character snaps up with a muzzle-flash that dies as it lands, like a
   stencil being stamped on. --glow is written per hero by js from that
   headline's own accent colour, so the flash is tan on a tan page and
   ConQuest blue on a ConQuest one; the value below is the fallback. */
@keyframes htChar{
  0%  {opacity:0;transform:translateY(.42em) scaleY(.86);text-shadow:0 0 0 rgba(var(--glow),0)}
  35% {opacity:1;text-shadow:0 0 22px rgba(var(--glow),.75)}
  100%{opacity:1;transform:none;text-shadow:0 0 0 rgba(var(--glow),0)}
}
@keyframes htRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Hero HUD boot sequence: reticle corners "acquire" into place with a red
   lock flash, then the spec readout prints in left-to-right, like a targeting
   system powering up. Base state below is the final/resting state so
   reduced-motion visitors simply see it settled. ── */
@media (prefers-reduced-motion:no-preference){
  .reticle i{animation:reticleAcquire .55s var(--ease) both}
  .reticle i:nth-child(1){animation-delay:.30s}
  .reticle i:nth-child(2){animation-delay:.40s}
  .reticle i:nth-child(3){animation-delay:.50s}
  .reticle i:nth-child(4){animation-delay:.60s}
  .hero-specline span{animation:specBoot .55s var(--ease) both}
  .hero-specline span:nth-child(1){animation-delay:.72s}
  .hero-specline span:nth-child(2){animation-delay:.88s}
  .hero-specline span:nth-child(3){animation-delay:1.04s}

  /* on a sequenced hero the corners acquire as the first word lands and the
     readout prints last, after the headline has finished deploying */
  .hero-seq .reticle i:nth-child(1){animation-delay:var(--t0)}
  .hero-seq .reticle i:nth-child(2){animation-delay:calc(var(--t0) + .1s)}
  .hero-seq .reticle i:nth-child(3){animation-delay:calc(var(--t0) + .2s)}
  .hero-seq .reticle i:nth-child(4){animation-delay:calc(var(--t0) + .3s)}
  .hero-seq .hero-specline span:nth-child(1){animation-delay:calc(var(--t0) + var(--t1) + .1s)}
  .hero-seq .hero-specline span:nth-child(2){animation-delay:calc(var(--t0) + var(--t1) + .26s)}
  .hero-seq .hero-specline span:nth-child(3){animation-delay:calc(var(--t0) + var(--t1) + .42s)}
}
@keyframes reticleAcquire{
  0%  {opacity:0;transform:scale(1.85);border-color:rgba(211,31,43,0)}
  55% {opacity:1;border-color:rgba(211,31,43,.9)}
  100%{opacity:1;transform:scale(1);border-color:rgba(255,255,255,.25)}
}
@keyframes specBoot{
  0%  {opacity:0;transform:translateY(5px);clip-path:inset(0 100% 0 0)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}

/* ═══════════════ ENTRY SPLASH (first screen on site entry only) ═══════════════ */
/* A full-screen intro shown the moment someone opens the site — the logo on black with
   a red targeting line scanning through it — which then lifts away to the home page.
   Inert unless <html> carries .intro (set once by the head script on a genuine entry). */
#intro-screen{display:none}
html.intro #intro-screen{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:fixed;inset:0;z-index:9999;background:var(--black);
  /* faint tactical grid field behind the logo */
  background-image:
    radial-gradient(circle at 50% 42%,rgba(211,31,43,.14),transparent 55%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:100% 100%,62px 62px,62px 62px;
  animation:intro-out .7s 2.35s var(--ease) both;
}
@keyframes intro-out{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}

html.intro #intro-screen .intro-inner{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  position:relative;z-index:2;
}
/* Logo fades up in the centre of the splash. */
html.intro #intro-screen .intro-logo{
  width:min(460px,74vw);height:175px;
  background:url('../images/logo-square.webp') center/contain no-repeat;
  filter:contrast(1.05);
  opacity:0;animation:intro-logo-in 1s .3s ease both;
}
@keyframes intro-logo-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Red underline grows out beneath the logo. */
html.intro #intro-screen .intro-underline{
  width:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red) 20%,var(--red) 80%,transparent);
  box-shadow:0 0 14px rgba(211,31,43,.7);
  animation:intro-underline .85s 1.15s var(--ease) both;
}
@keyframes intro-underline{from{width:0;opacity:0}to{width:260px;opacity:1}}

/* Tagline fades up under the underline. */
html.intro #intro-screen .intro-tag{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--tan);padding-left:.42em;
  opacity:0;animation:intro-tag-in .9s 1.5s ease both;
}
@keyframes intro-tag-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bright targeting line with a soft glow halo, scanning top → bottom across the splash
   and straight through the logo. Transform-driven (no costly box-shadow repaint). */
.scan-line{display:none}
html.intro #intro-screen .scan-line{
  display:block;position:absolute;left:0;right:0;top:0;height:90px;z-index:3;
  pointer-events:none;transform:translateY(-90px);will-change:transform,opacity;
  background:linear-gradient(90deg,
    transparent 0%,rgba(211,31,43,.0) 6%,var(--red) 32%,#ffe1e3 50%,var(--red) 68%,rgba(211,31,43,.0) 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 42%,#000 48%,#000 52%,rgba(0,0,0,.18) 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 42%,#000 48%,#000 52%,rgba(0,0,0,.18) 58%,transparent 100%);
  animation:scan-sweep 1.5s .35s cubic-bezier(.45,0,.55,1) both;
}
@keyframes scan-sweep{
  0%{transform:translateY(-90px);opacity:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(100vh);opacity:0}
}

/* ═══════════════ MARQUEE ═══════════════ */
.strip{
  border-block:1px solid var(--seam);background:var(--panel);
  overflow:hidden;padding:1rem 0;white-space:nowrap;
}
.strip-track{display:inline-flex;gap:3.2rem;animation:marquee 38s linear infinite}
.strip span{
  font-family:var(--cond);font-weight:600;font-size:1rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);display:inline-flex;align-items:center;gap:3.2rem;
}
.strip span::after{content:'▪';color:var(--red);font-size:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ═══════════════ PRODUCT CARDS ═══════════════ */
.prod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod-grid.two{grid-template-columns:repeat(2,1fr)}
.pcard{
  position:relative;overflow:hidden;cursor:pointer;background:var(--plate);
  border:1px solid var(--seam);
  aspect-ratio:3/3.7;
  transition:border-color .3s;
  display:block;text-decoration:none;color:inherit;
}
.pcard:hover{border-color:rgba(211,31,43,.6)}
/* ConQuest (blueprint-blue line) cards hover blue instead of Impact-red, site-wide */
.pcard:has(.pcard-brand.cq):hover{border-color:rgba(90,130,210,.7)}
.pcard:nth-child(1),.pcard:nth-child(2){aspect-ratio:3/2.35}
.prod-grid.even{grid-template-columns:repeat(2,1fr);gap:18px}
.prod-grid.even .pcard{aspect-ratio:16/10!important;box-shadow:0 14px 38px rgba(0,0,0,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.prod-grid.even .pcard:hover{transform:translateY(-6px);border-color:var(--tan);box-shadow:0 0 0 2px var(--tan),0 0 40px rgba(201,180,137,.55),0 22px 56px rgba(0,0,0,.6)}
.prod-grid.even .pcard img{filter:brightness(.92) saturate(1.04)}
.prod-grid.even .pcard:hover img{filter:brightness(.95) saturate(1.12);transform:scale(1.1)}
@media(max-width:760px){.prod-grid.even{grid-template-columns:1fr}}
.brand-select{gap:20px}
.pcard-wrap{display:flex;flex-direction:column}
.spec-table{
  border:1px solid var(--seam);border-top:none;
  background:rgba(10,12,14,.92);
  padding:.5rem 0;
}
.spec-row{
  display:grid;grid-template-columns:1fr 1.4fr;
  padding:.45rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  gap:1rem;align-items:baseline;
}
.spec-row-last{border-bottom:none}
.spec-key{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.38);white-space:nowrap;
}
.spec-val{
  font-family:var(--sans);font-size:.78rem;font-weight:400;
  color:rgba(255,255,255,.82);line-height:1.45;
}
.cq-table .spec-key{color:#6a8fc0}
.cq-table .spec-val{color:#c2d4ee}
.tg-table .spec-key{color:rgba(201,180,137,.55)}
.tg-table .spec-val{color:var(--tan)}
/* ── Case-file treatment: each spec table reads as a classified dossier —
   a header strip (accent tab + "Field Specification" + brand designation)
   and HUD corner ticks framing the panel. ── */
.spec-table{position:relative}
.spec-table::before,.spec-table::after{
  content:'';position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:rgba(255,255,255,.28);border-style:solid;border-width:0;z-index:1;
}
.spec-table::before{top:6px;left:6px;border-top-width:1px;border-left-width:1px}
.spec-table::after{bottom:6px;right:6px;border-bottom-width:1px;border-right-width:1px}
.cq-table::before,.cq-table::after{border-color:rgba(90,130,210,.55)}
.tg-table::before,.tg-table::after{border-color:rgba(201,180,137,.55)}
.spec-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 1.1rem .65rem;margin-bottom:.35rem;
  border-bottom:1px solid var(--seam);background:rgba(255,255,255,.022);
}
.spec-head-tag{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.spec-head-tag::before{content:'';width:15px;height:2px;background:var(--red)}
.spec-head-brand{
  font-family:var(--cond);font-weight:700;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.cq-table .spec-head-tag::before{background:var(--cq-blue)}
.cq-table .spec-head-brand{color:#9db8e8}
.tg-table .spec-head-tag::before{background:var(--tan)}
.tg-table .spec-head-brand{color:var(--tan)}
.pcard-specs-below{
  display:flex;gap:.7rem;flex-wrap:wrap;
  padding:.75rem 1rem;
  background:rgba(10,12,14,.85);
  border:1px solid var(--seam);border-top:none;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .35s .05s,padding .45s var(--ease);
}
.pcard-wrap:hover .pcard-specs-below{max-height:100px;opacity:1;padding:.75rem 1rem}
.pcard-specs-below span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--tan);
  border:1px solid rgba(201,180,137,.35);padding:.28rem .65rem;text-transform:uppercase;
}
.pcard-specs-below.cq-specs span,
.pcard-specs.cq-specs span{
  color:#9db8e8;border-color:rgba(90,130,210,.5);background:rgba(38,70,140,.22);
}
.brand-select .pcard-wrap{min-width:0}
.brand-select .pcard{width:100%;aspect-ratio:auto!important;height:600px;min-height:0;box-shadow:0 16px 44px rgba(0,0,0,.55);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.brand-select .pcard:hover{transform:translateY(-6px);border-color:var(--tan);box-shadow:0 0 0 2px var(--tan),0 0 44px rgba(201,180,137,.62),0 26px 64px rgba(0,0,0,.62)}
/* ConQuest card glows blueprint-blue on hover (matches its measurement sweep) instead of Target red */
.brand-select .pcard:has(.pcard-brand.cq):hover{border-color:#5a82d2;box-shadow:0 0 0 2px #5a82d2,0 0 44px rgba(90,130,210,.62),0 26px 64px rgba(0,0,0,.62)}
.brand-select .pcard img{filter:brightness(1.05) saturate(1.05)}
.brand-select .pcard:hover img{filter:brightness(1) saturate(1.12);transform:scale(1.11)}
.brand-select .pcard-desc{max-width:52ch}
/* the two home brand cards keep their corner brackets and lock-on readout, but not
   the line that travels down the card on hover (tan on Target, blue on ConQuest) */
.brand-select .pcard .hud-scan,
.brand-select .pcard .cq-measure{display:none}
.pcard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.94) saturate(.96);
  transition:transform .7s var(--ease),filter .45s;
}
.pcard:hover img{transform:scale(1.06);filter:brightness(1.02) saturate(1.04)}
.pcard::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,12,14,.94) 0,rgba(10,12,14,.72) 16%,rgba(10,12,14,.16) 44%,transparent 62%);
}
.pcard-id{
  position:absolute;top:1rem;left:1.1rem;z-index:2;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--tan);
}
.pcard-brand{
  position:absolute;top:1rem;right:1.1rem;z-index:3;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;padding:.3rem .65rem;
  text-transform:uppercase;white-space:nowrap;
}
.pcard-brand.cq{background:rgba(10,12,14,.72);border:1px solid rgba(90,130,210,.9);color:#9db8e8}
.pcard-brand.tg{background:rgba(10,12,14,.72);border:1px solid rgba(201,180,137,.8);color:var(--tan)}
/* brand-accurate bar colour regardless of grid position — the nth-child(even)
   rule alone left odd-positioned Target cards (Single Lid, Half Rack, Chiller)
   with the default red bar instead of desert tan */
.pcard:has(.pcard-brand.cq) .pcard-bar{background:var(--cq-blue)}
.pcard:has(.pcard-brand.tg) .pcard-bar{background:var(--tan)}
.pcard-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.4rem}
.pcard-title{font-family:var(--cond);font-weight:800;font-size:1.5rem;text-transform:uppercase;line-height:1.02}
.pcard-bar{width:36px;height:3px;background:var(--red);margin:.75rem 0 .85rem;transition:width .4s var(--ease)}
.pcard:hover .pcard-bar{width:70px}
.pcard-desc{
  font-size:.85rem;color:var(--grey-hi);font-weight:300;line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s .08s;
}
.pcard:hover .pcard-desc{max-height:200px;opacity:1}
.pcard-specs{
  display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s .14s;
}
.pcard:hover .pcard-specs{max-height:120px;opacity:1}
.pcard-specs span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--tan);
  border:1px solid rgba(201,180,137,.8);padding:.28rem .6rem;text-transform:uppercase;
  background:rgba(10,12,14,.72);white-space:nowrap;
}

/* ═══════════════ DETAIL ROWS (products page) ═══════════════ */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:4.5rem 0;border-bottom:1px solid var(--seam)}
.detail:last-of-type{border-bottom:0}
.detail.flip .d-photo{order:2}
.d-photo{border:1px solid var(--seam);position:relative}
.d-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:brightness(.85)}
.d-photo figcaption{
  position:absolute;bottom:0;left:0;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;padding:.55rem 1rem;
}
/* hide the red caption labels on feature-section photos */
.feat figcaption{display:none}
.d-name{font-family:var(--cond);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:900;text-transform:uppercase}
.d-name span{color:var(--red)}
.d-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tan);margin-top:.45rem}
.d-copy{color:var(--grey-hi);font-weight:300;margin-top:1.1rem;font-size:.97rem}
.d-specs{list-style:none;margin-top:1.5rem;display:grid;gap:.65rem}
.d-specs li{
  display:flex;gap:.9rem;align-items:baseline;font-size:.89rem;color:var(--grey-hi);
  padding-bottom:.65rem;border-bottom:1px dashed var(--seam);font-weight:300;
}
.d-specs li b{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-hi);min-width:128px;font-weight:400}

/* ═══════════════ VS TOGGLE — 4 angular boxes, sits tight under the hazard
   stripe: ConQuest (blueprint-blue), Target (tan), P.E.T.S. (orange), Molded/Plastics (blueprint-blue) ═══ */
.vs-row{display:flex;align-items:stretch;gap:1rem;flex-wrap:wrap;margin:0 0 1rem}
.vs-switch{display:flex;gap:1rem;width:min(800px,100%);margin:0;background:none;border:0;position:static}
.vs-btn{
  flex:1;position:relative;text-align:left;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.015);border:0;color:var(--grey);
  padding:1.15rem 1.3rem 1rem;transition:transform .3s var(--ease),background .3s,opacity .3s;
}
/* bold underline bar that fills in on the active pane, in brand color */
.vs-btn::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease),background .3s;
}
.vs-btn.on::after{transform:scaleX(1)}
.vs-btn[data-pane="conquest"].on::after{background:var(--cq-blue)}
.vs-btn[data-pane="target"].on::after{background:var(--tan)}
.vs-btn[data-pane="pets"].on::after{background:#e8731f}
.vs-btn:not(.on){opacity:.6}
.vs-btn:not(.on):hover{opacity:.88}
/* corner brackets instead of a solid box — thin lines that tighten
   and pick up the brand color on hover / when this pane is active */
.vs-btn .crn{position:absolute;width:14px;height:14px;pointer-events:none;transition:border-color .3s var(--ease),width .3s var(--ease),height .3s var(--ease)}
.vs-btn .crn-tl{top:0;left:0;border-top:1px solid rgba(255,255,255,.28);border-left:1px solid rgba(255,255,255,.28)}
.vs-btn .crn-tr{top:0;right:0;border-top:1px solid rgba(255,255,255,.28);border-right:1px solid rgba(255,255,255,.28)}
.vs-btn .crn-bl{bottom:0;left:0;border-bottom:1px solid rgba(255,255,255,.28);border-left:1px solid rgba(255,255,255,.28)}
.vs-btn .crn-br{bottom:0;right:0;border-bottom:1px solid rgba(255,255,255,.28);border-right:1px solid rgba(255,255,255,.28)}
.vs-btn:hover{transform:translateY(-3px)}
.vs-btn:hover .crn{border-color:rgba(255,255,255,.55)}
.vs-btn .bx-kick{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:inherit;opacity:.6;margin-bottom:.4rem;transition:opacity .3s;
}
.vs-btn .bx-label{
  display:block;font-family:var(--cond);font-weight:800;font-size:1.3rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--grey-hi);opacity:.8;transition:color .3s,opacity .3s;
}
.vs-btn .bx-label i{font-style:normal;opacity:.7;font-size:.7em}
.vs-btn:hover .bx-kick,.vs-btn:hover .bx-label{opacity:1}
.vs-btn.on{transform:translateY(-2px);background:rgba(255,255,255,.03)}
.vs-btn.on .crn{width:20px;height:20px}
.vs-btn.on .bx-kick,.vs-btn.on .bx-label{opacity:1}
.vs-btn[data-pane="conquest"].on{background:rgba(90,130,210,.14)}
.vs-btn[data-pane="conquest"].on .crn{border-color:var(--cq-blue)}
.vs-btn[data-pane="conquest"].on .bx-kick{color:var(--cq-blue-hi)}
.vs-btn[data-pane="conquest"].on .bx-label{color:#fff}
.vs-btn[data-pane="target"].on{background:rgba(201,180,137,.14)}
.vs-btn[data-pane="target"].on .crn{border-color:var(--tan)}
.vs-btn[data-pane="target"].on .bx-kick{color:var(--tan)}
.vs-btn[data-pane="target"].on .bx-label{color:#fff}
.vs-btn[data-pane="pets"].on{background:rgba(232,115,31,.14)}
.vs-btn[data-pane="pets"].on .crn{border-color:#e8731f}
.vs-btn[data-pane="pets"].on .bx-kick{color:#f0995a}
.vs-btn[data-pane="pets"].on .bx-label{color:#fff}
/* Plastics is a distinct destination (the polymer/blueprint page), not a toggle —
   pushed to the right and tinted blueprint-blue to read as "leaves this page" */
.vs-plastics{
  margin-left:auto;flex:1;min-width:230px;max-width:360px;position:relative;
  display:flex;flex-direction:column;justify-content:center;text-decoration:none;
  background:rgba(255,255,255,.015);border:0;padding:1.15rem 1.3rem 1rem;
  transition:transform .3s var(--ease),background .3s;
}
.vs-plastics .crn{position:absolute;width:14px;height:14px;pointer-events:none;transition:border-color .3s var(--ease)}
.vs-plastics .crn-tl{top:0;left:0;border-top:1px solid rgba(242,245,247,.35);border-left:1px solid rgba(242,245,247,.35)}
.vs-plastics .crn-tr{top:0;right:0;border-top:1px solid rgba(242,245,247,.35);border-right:1px solid rgba(242,245,247,.35)}
.vs-plastics .crn-bl{bottom:0;left:0;border-bottom:1px solid rgba(242,245,247,.35);border-left:1px solid rgba(242,245,247,.35)}
.vs-plastics .crn-br{bottom:0;right:0;border-bottom:1px solid rgba(242,245,247,.35);border-right:1px solid rgba(242,245,247,.35)}
.vs-plastics .bx-kick{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--white);opacity:.85;margin-bottom:.4rem;
}
.vs-plastics .bx-label{
  display:flex;align-items:center;gap:.5em;font-family:var(--cond);font-weight:800;
  font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;color:var(--grey-hi);transition:color .3s;
}
.vs-plastics:hover{transform:translateY(-3px);background:rgba(255,255,255,.03)}
.vs-plastics:hover .crn{border-color:var(--white)}
.vs-plastics:hover .bx-label{color:#fff}
.vs-plastics svg{transition:transform .25s}
.vs-plastics:hover svg{transform:translateX(3px)}
@media (max-width:680px){
  .vs-row{flex-direction:column}
  .vs-switch{width:100%}
  .vs-plastics{margin-left:0;max-width:none;width:100%}
}
@media (max-width:560px){
  .vs-switch{flex-direction:column}
}
.vs-pane{display:none;grid-template-columns:1.05fr 1fr;gap:2.4rem;align-items:center}
.vs-pane.show{display:grid}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.vs-photo{position:relative;border:1px solid var(--seam)}
.vs-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:brightness(.88)}
.vs-photo figcaption{
  position:absolute;bottom:0;left:0;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;padding:.6rem 1.1rem;
}
.vs-name{font-family:var(--cond);font-size:clamp(1.8rem,3.1vw,2.5rem);font-weight:900;text-transform:uppercase}
.vs-name span{color:var(--red)}
#pane-conquest .vs-name span{color:var(--cq-blue)}
#pane-conquest .vs-photo figcaption{background:var(--cq-blue);color:#fff}
#pane-conquest .vs-specs li b{color:var(--cq-blue-hi)}
#pane-conquest .vs-sub{color:var(--cq-blue-hi)}
#pane-target .vs-name span{color:var(--tan)}
#pane-pets .vs-name span{color:#e8731f}
#pane-pets .vs-sub{color:#e8731f}
#pane-pets .vs-photo figcaption{background:#e8731f;color:#0a0c0e;padding:.8rem 1.1rem .7rem}
#pane-pets .vs-photo img{object-position:center top;transform:scale(1.07);transform-origin:center top}
#pane-pets .vs-specs li b{color:#e8731f}
/* Target photo box mirrors the home page's triple-shot lineup so all four
   cases (2 in the main shot, 1 in each side panel) are visible, full scale */
.vs-photo-triple{aspect-ratio:4/3;overflow:hidden}
.vs-photo-triple img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(.98)}
.vs-photo-triple .pct-grid{position:absolute;inset:0;display:grid;grid-template-rows:58% 42%;grid-template-columns:1fr 1fr;gap:2px}
.vs-photo-triple .pct-main{grid-column:1/-1;position:relative;overflow:hidden}
.vs-photo-triple .pct-sub{position:relative;overflow:hidden}
.vs-photo-triple .pct-sub:last-of-type img{object-position:center 60%}
#pane-target .vs-photo figcaption{background:var(--tan);color:#0a0c0e;z-index:2}
.vs-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tan);margin-top:.3rem}
.vs-copy{color:var(--grey-hi);font-weight:300;margin-top:.7rem;font-size:.93rem}
.vs-specs{list-style:none;margin-top:1rem;display:grid;gap:.45rem}
.vs-specs li{
  display:flex;gap:.9rem;align-items:baseline;font-size:.86rem;color:var(--grey-hi);
  padding-bottom:.45rem;border-bottom:1px dashed var(--seam);font-weight:300;
}
.vs-specs li b{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-hi);min-width:128px;font-weight:400}

/* ═══════════════ INDUSTRIES ═══════════════ */
.ind-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:3rem}
.ind-grid.big{grid-template-columns:repeat(4,1fr)}
.ind{
  position:relative;background:var(--plate);border:1px solid var(--seam);
  padding:1.9rem 1rem 1.6rem;text-align:center;cursor:default;
  transition:.3s var(--ease);
}
.ind:hover{border-color:rgba(211,31,43,.6);transform:translateY(-5px)}
.ind-ico{width:44px;height:44px;margin:0 auto 1rem;color:var(--red-hi)}
.ind-ico svg{width:100%;height:100%}
.ind-name{font-family:var(--cond);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-hi)}
.ind-tip{
  position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);
  width:235px;background:#0e1116;border:1px solid rgba(211,31,43,.5);
  padding:.9rem 1rem;font-size:.78rem;line-height:1.5;color:var(--grey-hi);font-weight:300;
  opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:30;text-align:left;
}
.ind-tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:rgba(211,31,43,.5);
}
.ind:hover .ind-tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* industry feature cards (industries page) */
.sector-card{
  display:grid;grid-template-columns:1fr 1.4fr;background:var(--plate);
  border:1px solid var(--seam);overflow:hidden;transition:border-color .3s;
}
.sector-card:hover{border-color:rgba(211,31,43,.5)}
.sector-card .sc-photo{overflow:hidden;min-height:230px}
.sector-card .sc-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.92);transition:.5s var(--ease)}
.sector-card:hover .sc-photo img{transform:scale(1.05);filter:brightness(1.04)}
.sector-card .sc-body{padding:1.8rem}
.sector-card h3{font-size:1.45rem;font-weight:800}
.sector-card p{font-size:.88rem;color:var(--grey);font-weight:300;margin-top:.7rem;line-height:1.65}
.sector-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:3rem}

/* clickable sector cards (link to case studies) */
.sector-card[href]{text-decoration:none;color:inherit;cursor:pointer}
.sc-cta{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.sc-cta svg{transition:transform .25s var(--ease)}
.sector-card[href]:hover .sc-cta{color:var(--red-hi)}
.sector-card[href]:hover .sc-cta svg{transform:translateX(4px)}

/* ═══════════════ CASE STUDY — FIELD FILES ═══════════════ */
.case-hero{
  position:relative;padding:12rem 0 4rem;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px),
    radial-gradient(circle at 58% 50%,rgba(211,31,43,.10),transparent 62%),
    var(--black);
}
/* radar overlay (markup injected by main.js) — covers the whole hero */
.hero-radar{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hr-scope{
  position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
  width:clamp(640px,94vw,1320px);aspect-ratio:1;
}
.hr-rings{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 59px,rgba(240,53,64,.16) 59px 60px),
    linear-gradient(rgba(240,53,64,.13) 0 0) 50% 50%/100% 1px no-repeat,
    linear-gradient(rgba(240,53,64,.13) 0 0) 50% 50%/1px 100% no-repeat,
    radial-gradient(circle at 50% 50%,rgba(240,53,64,.06),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(240,53,64,.2),inset 0 0 90px rgba(240,53,64,.1);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 66%,transparent 75%);
          mask-image:radial-gradient(circle at 50% 50%,#000 66%,transparent 75%);
}
.hr-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(240,53,64,.5),rgba(240,53,64,.1) 30deg,transparent 64deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 66%,transparent 75%);
          mask-image:radial-gradient(circle at 50% 50%,#000 66%,transparent 75%);
  animation:radarSweep 6s linear infinite;
}
@keyframes radarSweep{to{transform:rotate(360deg)}}
/* blips light up as the sweep passes over them */
.hr-blip{
  position:absolute;width:10px;height:10px;border-radius:50%;
  left:calc(50% + sin(var(--a) * 1deg) * var(--r) * 50%);
  top:calc(50% - cos(var(--a) * 1deg) * var(--r) * 50%);
  background:var(--red-hi);box-shadow:0 0 12px var(--red-hi),0 0 4px #fff;
  opacity:0;transform:translate(-50%,-50%) scale(.4);
  animation:hrBlip 6s linear infinite;
  animation-delay:calc(var(--a) / 360 * 6s);
}
@keyframes hrBlip{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  3%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  10%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
  46%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0}
}
/* shading — darker over the headline so text stays crisp */
.hr-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg,var(--black) 6%,rgba(10,12,14,.74) 38%,rgba(10,12,14,.16) 70%,transparent 100%),
    linear-gradient(0deg,var(--black) 0,transparent 40%);
}
.case-hero .wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .hr-sweep,.hr-blip{animation:none}
  .hr-blip{opacity:.7}
}

.dossier{display:flex;flex-direction:column;gap:1.6rem;margin-top:3rem}
.casefile{
  position:relative;background:var(--plate);border:1px solid var(--seam);
  border-left:3px solid var(--red);padding:2.3rem 2.2rem;
  transition:border-color .3s,transform .3s var(--ease);
}
.casefile:hover{border-left-color:var(--red-hi);transform:translateX(3px)}
.casefile-head{
  display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;
  border-bottom:1px solid var(--seam);padding-bottom:1.3rem;margin-bottom:1.7rem;
}
.cf-fileno{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;color:var(--grey)}
.cf-title{font-size:1.65rem;font-weight:800;margin-top:.45rem;letter-spacing:.01em}
.cf-stamp{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tan);border:1px solid rgba(201,180,137,.4);padding:.4rem .75rem;white-space:nowrap;
}
.cf-grid{display:grid;gap:1rem}
.cf-block{
  padding:1rem 1.1rem;border:1px solid transparent;border-left:2px solid rgba(211,31,43,.25);
  transition:.3s var(--ease);
}
.cf-block:hover{
  border-color:rgba(211,31,43,.4);border-left-color:var(--red);
  background:rgba(211,31,43,.05);transform:translateX(4px);
}
.cf-label{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:.7rem;
  transition:color .3s var(--ease);
}
.cf-label::before{content:'';width:8px;height:8px;background:var(--red);
  transform:rotate(45deg);transition:.3s var(--ease)}
.cf-block:hover .cf-label{color:var(--red-hi)}
.cf-block:hover .cf-label::before{background:var(--red-hi);transform:rotate(45deg) scale(1.3);box-shadow:0 0 10px var(--red)}
.cf-block p{color:var(--grey-hi);font-weight:300;font-size:.98rem;line-height:1.72}
.cf-block.quote p{
  border-left:2px solid rgba(201,180,137,.45);padding-left:1.1rem;
  color:var(--tan);font-style:italic;
}
.cf-features{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem}
.cf-features li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--grey-hi);
  background:var(--panel);border:1px solid var(--seam);padding:.5rem .9rem;
}

/* ═══════════════ CUSTOMIZATION — PHASE CONVEYOR ═══════════════ */
.cust-philosophy{
  border:1px solid var(--seam);border-left:3px solid var(--red);background:var(--plate);
  padding:2.2rem 2.4rem;margin-top:2.4rem;
}
.cust-philosophy .pq{
  font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.05;color:var(--white);
}
.cust-philosophy .pq em{font-style:normal;color:var(--red)}
.cust-philosophy p{color:var(--grey-hi);font-weight:300;margin-top:1rem;max-width:64ch}

/* live moving conveyor of phases */
.conveyor{
  border-block:1px solid var(--seam);
  background:linear-gradient(90deg,var(--panel),#0d1013 50%,var(--panel));
  overflow:hidden;padding:1.5rem 0;white-space:nowrap;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.conveyor-track{display:inline-flex;align-items:stretch;gap:0;animation:conveyor 26s linear infinite}
.conveyor:hover .conveyor-track{animation-play-state:paused}
@keyframes conveyor{to{transform:translateX(-50%)}}
.cv-step{
  display:inline-flex;align-items:center;gap:1.1rem;padding:0 2.4rem;
  border-right:1px dashed rgba(255,255,255,.12);
}
.cv-no{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);border:1px solid rgba(211,31,43,.5);padding:.45rem .7rem;flex-shrink:0;
}
.cv-step b{
  font-family:var(--cond);font-weight:800;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--white);
}
.cv-arrow{color:var(--red);font-size:1.2rem;padding:0 .2rem}

/* numbered phase cards */
.phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:3rem}
.phase{
  position:relative;background:var(--plate);border:1px solid var(--seam);
  padding:2.4rem 1.6rem 1.8rem;overflow:hidden;transition:.3s var(--ease);
}
.phase::before{
  content:attr(data-no);position:absolute;top:-1.4rem;right:.4rem;
  font-family:var(--cond);font-weight:900;font-size:6rem;line-height:1;
  color:rgba(211,31,43,.1);transition:.3s var(--ease);
}
.phase:hover{border-color:rgba(211,31,43,.55);transform:translateY(-6px)}
.phase:hover::before{color:rgba(211,31,43,.22)}
.phase .ph-tag{
  font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-hi);display:block;margin-bottom:.7rem;
}
.phase h3{font-size:1.4rem;font-weight:800;position:relative}
.phase p{color:var(--grey-hi);font-weight:300;font-size:.92rem;line-height:1.6;margin-top:.7rem;position:relative}

/* customization area cards — links */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:3rem}
.area{
  position:relative;display:flex;flex-direction:column;
  background:var(--black);border:1px solid var(--seam);padding:2rem 1.7rem;
  text-decoration:none;color:inherit;transition:.3s var(--ease);overflow:hidden;
}
.area::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.area:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 0 30px rgba(211,31,43,.28)}
.area:hover::after{transform:scaleX(1)}
.area .ar-ico{width:40px;height:40px;color:var(--red-hi);margin-bottom:1.1rem;transition:.3s var(--ease)}
.area:hover .ar-ico{transform:scale(1.12)}
.area .ar-ico svg{width:100%;height:100%}
.area h3{font-size:1.25rem;font-weight:800;color:var(--white)}
.area p{color:var(--grey-hi);font-weight:300;font-size:.9rem;line-height:1.6;margin-top:.6rem}
.area .sc-cta{margin-top:auto;padding-top:1.3rem}

/* customization detail panels (kept for sub-feature styling on detail pages) */
.ap-lede{
  font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.1;color:var(--white);
}
.ap-lede em{font-style:normal;color:var(--red)}
.area-panel > p{color:var(--grey-hi);font-weight:300;margin-top:1rem;max-width:70ch;line-height:1.7}
.ap-subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.8rem}
.ap-feat{background:var(--black);border:1px solid var(--seam);padding:1.3rem 1.3rem}
.ap-feat h4{
  font-family:var(--mono);font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-hi);font-weight:700;margin-bottom:.6rem;
}
.ap-feat p{color:var(--grey-hi);font-weight:300;font-size:.88rem;line-height:1.6}
.ap-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.ap-chips li{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--grey-hi);
  background:var(--black);border:1px solid var(--seam);padding:.6rem 1rem;transition:.25s var(--ease);
}
.ap-chips li:hover{border-color:var(--red);color:var(--white)}
@media(max-width:760px){.ap-subgrid{grid-template-columns:1fr}}

@media(max-width:860px){
  .phase-grid{grid-template-columns:1fr 1fr}
  .area-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .phase-grid{grid-template-columns:1fr}
}

/* ═══════════════ STATS / WHY ═══════════════ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:3rem}
.stat{
  background:var(--black);border:1px solid var(--seam);padding:1.7rem 1.3rem;
  position:relative;
}
.stat::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--red)}
.stat-num{font-family:var(--cond);font-weight:900;font-size:clamp(2.3rem,4vw,3.3rem);line-height:1}
.stat-num sup{font-size:52%;color:var(--red-hi);top:-.5em}
.stat-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:.6rem}
.why-points{list-style:none;display:grid;gap:1.05rem;margin-top:2.4rem}
.why-points li{display:flex;gap:1rem;align-items:flex-start;font-size:.94rem;color:var(--grey-hi);font-weight:300}
.why-points .tick{
  flex:none;width:22px;height:22px;margin-top:2px;color:var(--red-hi);
  border:1px solid rgba(211,31,43,.55);display:grid;place-items:center;font-size:.7rem;
}
.why-photos{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.why-photos figure{position:relative;overflow:hidden}
.why-photos figure:nth-child(1){grid-column:span 2;aspect-ratio:16/8.6}
.why-photos figure:nth-child(n+2){aspect-ratio:1/1}
.why-photos img{width:100%;height:100%;object-fit:cover;filter:brightness(.97);transition:.55s var(--ease)}
/* feather the studio shots into the page bg so they blend in instead of sitting
   in hard-edged boxes — the vignette colour matches the site background exactly */
.why-photos figure::after{content:'';position:absolute;inset:-1px;pointer-events:none;
  box-shadow:inset 0 0 58px 20px var(--black),inset 0 0 22px 6px var(--black);
  transition:box-shadow .55s var(--ease)}
.why-photos figure:hover img{transform:scale(1.05);filter:brightness(1)}
.why-photos figure:hover::after{box-shadow:inset 0 0 44px 12px var(--black)}


/* ═══════════════ GALLERY ═══════════════ */
.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem}
.gal{position:relative;overflow:hidden;aspect-ratio:1/1.05;cursor:pointer}
.gal img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(.85);
  transition:filter .5s,transform .6s var(--ease);
}
.gal:hover img{filter:brightness(.95) saturate(1.05);transform:scale(1.05)}
.gal::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,14,.8),transparent 45%)}
.gal span{
  position:absolute;bottom:1rem;left:1.1rem;z-index:2;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-hi);
  opacity:0;transform:translateY(6px);transition:.3s;
}
.gal:hover span{opacity:1;transform:none}

/* ═══════════════ CAPABILITIES ═══════════════ */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:3rem}
.cap{
  background:var(--plate);border:1px solid var(--seam);padding:1.9rem 1.6rem;
  position:relative;transition:.3s var(--ease);overflow:hidden;
}
.cap::after{
  content:'';position:absolute;inset:auto 0 0 0;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.cap:hover{border-color:rgba(211,31,43,.5);transform:translateY(-4px)}
.cap:hover::after{transform:none}
.cap-num{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;color:var(--red-hi)}
.cap h3{font-size:1.35rem;font-weight:700;margin-top:.65rem}
.cap p{font-size:.86rem;color:var(--grey);font-weight:300;margin-top:.65rem;line-height:1.6}

/* process split (capabilities page) */
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:3rem}
.proc-grid .d-photo img{aspect-ratio:4/3.2}

/* ═══════════════ CTA BAND ═══════════════ */
.band{position:relative;padding:4.2rem 0;overflow:hidden;background:var(--panel)}
.band::before{
  content:'';position:absolute;inset:0;
  background:url('../images/logo-square.webp') center/auto 80% no-repeat;
  opacity:.10;
}
.band-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.band h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:900}
.band h2 em{font-style:normal;color:var(--red)}
.band p{color:var(--grey-hi);font-weight:300;margin-top:.5rem;max-width:54ch}

/* full-scale variant: bigger CTA band (currently used on capabilities.html) */
.band-xl{padding:7.5rem 0}
.band-xl::before{background-size:auto 130%}
.band-xl .band-inner{gap:3rem}
.band-xl h2{font-size:clamp(2.4rem,5vw,4rem)}
.band-xl p{font-size:1.1rem;max-width:60ch}
.band-xl .btn{font-size:1.05rem;padding:1.1rem 2.2rem}

/* ═══════════════ QUOTE / CONTACT ═══════════════ */
.q-grid{display:grid;grid-template-columns:1fr;gap:4.5rem;align-items:start}
.q-intro{color:var(--grey-hi);font-weight:300;font-size:.98rem;line-height:1.68;margin-top:1.1rem;max-width:52ch}
.q-info-rows{display:grid;gap:1.35rem;margin-top:2.5rem}
.q-row{display:flex;gap:1.1rem;align-items:flex-start}
.q-ico{
  flex:none;width:46px;height:46px;border:1px solid rgba(211,31,43,.5);
  background:var(--red-dim);display:grid;place-items:center;color:var(--red-hi);
}
.q-row b{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);display:block;font-weight:400;margin-bottom:.25rem}
.q-row span,.q-row a{font-size:1rem;color:var(--white);text-decoration:none;font-weight:500;line-height:1.5}
.q-row a:hover{color:var(--red-hi)}

/* sales rep callout card */
.rep-card{
  display:flex;gap:1.3rem;align-items:flex-start;margin-top:2.4rem;
  background:var(--panel);border:1px solid var(--seam);border-left:3px solid var(--red);
  padding:1.7rem 1.9rem;
}
.rep-avatar{
  flex:none;width:52px;height:52px;border-radius:50%;
  background:var(--red-dim);border:1px solid rgba(211,31,43,.5);
  display:grid;place-items:center;color:var(--red-hi);
  font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.03em;
}
.rep-info{flex:1;min-width:0}
.rep-label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey);display:block;margin-bottom:.4rem;
}
.rep-info h4{font-family:var(--cond);font-weight:800;font-size:1.3rem;text-transform:uppercase;margin-bottom:.35rem}
.rep-info>a{color:var(--red-hi);text-decoration:none;font-weight:600;font-size:.92rem;display:inline-block;margin-bottom:.7rem}
.rep-info>a:hover{color:var(--white)}
.rep-note{font-size:.82rem;color:var(--grey);font-weight:300;line-height:1.58;margin:0}
.q-form{
  background:var(--black);border:1px solid var(--seam);padding:2.5rem;position:relative;
}
.q-form .qf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-form h3{font-size:1.6rem;margin-bottom:.4rem;font-weight:800}
.q-form>p{font-size:.85rem;color:var(--grey);font-weight:300;margin-bottom:1.8rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-group{margin-bottom:1.05rem}
.f-group label{
  display:block;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:.45rem;
}
.f-group input,.f-group select,.f-group textarea{
  width:100%;background:var(--panel);border:1px solid var(--seam);
  padding:.85rem 1rem;color:var(--white);font-family:var(--body);font-size:.92rem;
  outline:none;transition:border-color .25s;border-radius:0;
}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{border-color:var(--red)}
.f-group ::placeholder{color:#56616b}
.f-group select option{background:var(--black)}
.f-group textarea{min-height:120px;resize:vertical}
.f-submit{width:100%;justify-content:center;margin-top:.4rem}

/* trust badges (contact page) */
.trust-badges{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.t-badge{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-hi);border:1px solid var(--seam);background:var(--plate);
  padding:.6rem 1rem;
}
.t-badge svg{color:var(--red-hi);flex:none}

/* ═══════════════ TIMELINE (about page) ═══════════════ */
.timeline{position:relative;margin-top:3.5rem;padding-left:2.2rem}
.timeline::before{
  content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--red),rgba(211,31,43,.15));
}
.tl-item{position:relative;padding-bottom:2.6rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-2.2rem;top:6px;width:16px;height:16px;
  background:var(--black);border:2px solid var(--red);transform:rotate(45deg);
}
.tl-year{
  font-family:var(--mono);font-size:.95rem;font-weight:700;letter-spacing:.18em;color:var(--red-hi);
}
.tl-title{font-family:var(--cond);font-weight:800;font-size:1.4rem;text-transform:uppercase;margin-top:.3rem}
.tl-text{font-size:.92rem;color:var(--grey);font-weight:300;margin-top:.45rem;max-width:62ch;line-height:1.65}

/* fact tiles (about page) */
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:3rem}
.fact{
  background:var(--plate);border:1px solid var(--seam);padding:1.8rem 1.5rem;
  position:relative;transition:.3s var(--ease);
}
.fact::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--red)}
.fact:hover{border-color:rgba(211,31,43,.5);transform:translateY(-4px)}
.fact b{font-family:var(--cond);font-weight:800;font-size:1.5rem;text-transform:uppercase;display:block;line-height:1.05}
.fact span{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);display:block;margin-top:.6rem;line-height:1.7}

/* client name grid (about page) */
/* rolling clients marquee */
.client-marquee{
  overflow:hidden;margin-top:3rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.client-track{display:flex;width:max-content;animation:clientRoll 48s linear infinite}
.client-marquee:hover .client-track{animation-play-state:paused}
@keyframes clientRoll{to{transform:translateX(-50%)}}
.client{
  flex:none;min-width:210px;margin-right:10px;
  background:var(--plate);border:1px solid var(--seam);
  padding:1.3rem 1rem;text-align:center;
  font-family:var(--cond);font-weight:700;font-size:1.05rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grey-hi);
  transition:.3s var(--ease);
}
.client:hover{border-color:rgba(211,31,43,.55);color:#fff;transform:translateY(-3px)}
.client small{
  display:block;font-family:var(--mono);font-size:.56rem;font-weight:400;
  letter-spacing:.2em;color:var(--grey);margin-top:.3rem;
}
@media(prefers-reduced-motion:reduce){.client-track{animation:none;flex-wrap:wrap}}

/* affiliation badges */
.affil-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.5rem}
.affil{
  display:flex;align-items:center;gap:.7rem;
  background:var(--plate);border:1px solid var(--seam);padding:1rem 1.4rem;
  font-family:var(--cond);font-weight:700;font-size:1.05rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-hi);transition:.3s;
}
.affil:hover{border-color:rgba(211,31,43,.5);color:#fff}
.affil svg{color:var(--red-hi);flex:none}

/* ═══════════════ FOOTER ═══════════════ */
footer{background:#0d1014;border-top:1px solid var(--seam);padding:4.2rem 0 2rem}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:3rem;margin-bottom:3.2rem}
.f-about .logo-img{margin-bottom:1.2rem}
.f-about p{font-size:.85rem;color:var(--grey);font-weight:300;max-width:32ch;line-height:1.7}
.f-col b{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:1.25rem;font-weight:400}
.f-col ul{list-style:none;display:grid;gap:.6rem}
.f-col a{font-size:.88rem;color:var(--grey-hi);text-decoration:none;font-weight:300;transition:color .2s}
.f-col a:hover{color:var(--red-hi)}
.f-bottom{
  border-top:1px solid var(--seam);padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:#4f5a64;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1080px){
  .prod-grid,.prod-grid.two{grid-template-columns:1fr 1fr}
  .ind-grid,.ind-grid.big{grid-template-columns:repeat(4,1fr)}
  .why-grid,.vs-pane.show,.detail,.proc-grid{grid-template-columns:1fr;gap:2.6rem}
  .detail.flip .d-photo{order:0}
  .caps{grid-template-columns:1fr 1fr}
  .gal-strip{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .sector-list{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  header{background:rgba(10,12,14,.96)}
  section{padding:4.2rem 0}
  .page-hero{padding:10rem 0 3.5rem}
  .prod-grid,.prod-grid.two{grid-template-columns:1fr}
  .pcard,.pcard:nth-child(1),.pcard:nth-child(2){aspect-ratio:4/3.4}
  .pcard-desc,.pcard-specs{max-height:none;opacity:1}
  .ind-grid,.ind-grid.big{grid-template-columns:1fr 1fr}
  .ind-tip{display:none}
  .stat-row{grid-template-columns:1fr}
  .caps,.gal-strip{grid-template-columns:1fr}
  .q-grid{grid-template-columns:1fr;gap:2.6rem}
  .f-row{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;gap:2.2rem}
  .q-form{padding:1.7rem}
  .logo-img{width:192px;height:75px}
  .sector-card{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:1fr}
}

/* ═══════════════ ENTRANCE SPLASH ═══════════════ */
#intro{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(211,31,43,.16),transparent 55%),var(--black);
  transition:transform .9s var(--ease),visibility .9s;
}
/* curtain lift — slides up to reveal the site */
#intro.done{transform:translateY(-100%);visibility:hidden}
/* glowing red edge pinned to the curtain bottom — sweeps up as it opens */
.intro-edge{
  position:absolute;left:0;bottom:0;width:100%;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--red) 18%,var(--red-hi) 50%,var(--red) 82%,transparent);
  box-shadow:0 0 22px 3px rgba(240,53,64,.75),0 0 6px var(--red-hi);
  opacity:0;animation:introEdge .6s var(--ease) 1s forwards;
}
@keyframes introEdge{to{opacity:1}}
/* #1 BRACKET — the bottom edge + the two pull-up uprights read as one frame.
   As the pull begins the bottom bar flares white-hot, so the three sides feel
   connected and the whole bracket hauls the curtain up together. */
#intro.pulling .intro-edge{animation:introEdgeFlare .6s var(--ease) forwards}
@keyframes introEdgeFlare{
  0%{box-shadow:0 0 22px 3px rgba(240,53,64,.75),0 0 6px var(--red-hi)}
  40%{box-shadow:0 0 46px 9px rgba(240,53,64,1),0 0 16px #fff;
      background:linear-gradient(90deg,transparent,#fff 16%,#fff 84%,transparent)}
  100%{box-shadow:0 0 30px 5px rgba(240,53,64,.9),0 0 10px var(--red-hi)}
}
/* rocket-thrust streaks — fire downward as the curtain lifts */
.intro-thrust{
  position:absolute;left:0;bottom:0;width:100%;height:46%;z-index:2;
  display:flex;justify-content:center;align-items:flex-start;gap:1.8vw;pointer-events:none;
}
.intro-thrust i{
  display:block;width:3px;height:calc(var(--h,100) * 1%);border-radius:2px;
  background:linear-gradient(180deg,#fff,var(--red-hi) 22%,rgba(240,53,64,.55) 55%,transparent 100%);
  box-shadow:0 0 12px rgba(240,53,64,.7);
  transform:scaleY(0);transform-origin:top center;opacity:0;
  transition:transform .85s var(--ease) var(--d,0s),opacity .85s var(--ease) var(--d,0s);
}
#intro.done .intro-thrust i{transform:scaleY(1);opacity:.9}
/* PULL-UP LINES — two red beams that streak up from the bottom a beat before the
   curtain lifts, as if hauling the intro away. JS sits them on the bold grid lines
   flanking the centre beam so they track the same grid. */
.intro-pull{
  position:absolute;bottom:0;width:2px;height:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(240,53,64,0),var(--red) 32%,var(--red-hi) 72%,#fff);
  box-shadow:0 0 14px rgba(240,53,64,.7),0 0 5px var(--red-hi);
  opacity:0;
}
#intro.pulling .intro-pull{animation:introPull .7s var(--ease) both}
@keyframes introPull{
  0%{height:0;opacity:0}
  14%{opacity:1}
  100%{height:106%;opacity:.95}
}
@media(prefers-reduced-motion:reduce){.intro-edge{animation:none;opacity:1}.intro-thrust{display:none}.intro-pull{display:none}}
/* cool red line drawing from top to bottom */
#intro::before{
  content:'';position:absolute;top:0;left:50%;width:2px;height:100%;z-index:1;
  transform:translateX(-50%) scaleY(0);transform-origin:top center;
  background:linear-gradient(180deg,transparent 0,rgba(240,53,64,.2) 8%,var(--red) 55%,var(--red-hi) 100%);
  box-shadow:0 0 18px rgba(240,53,64,.7),0 0 4px var(--red-hi);
  animation:introBeam 1.7s var(--ease) .15s forwards;
}
/* glowing head that races down the line */
#intro::after{
  content:'';position:absolute;top:0;left:50%;width:13px;height:13px;border-radius:50%;z-index:1;
  transform:translate(-50%,-50%);background:#fff;
  box-shadow:0 0 22px 5px var(--red-hi),0 0 10px 2px #fff;opacity:0;
  animation:introHead 1.7s var(--ease) .15s forwards;
}
@keyframes introBeam{from{transform:translateX(-50%) scaleY(0)}to{transform:translateX(-50%) scaleY(1)}}
@keyframes introHead{0%{top:0;opacity:0}6%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.intro-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(240,53,64,.5) 0 1.2px,transparent 1.7px),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.05) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.05) 38px 39px),
    repeating-linear-gradient(0deg,transparent 0 154px,rgba(255,255,255,.09) 154px 156px),
    repeating-linear-gradient(90deg,transparent 0 154px,rgba(255,255,255,.09) 154px 156px);
  background-size:156px 156px,39px 39px,39px 39px,156px 156px,156px 156px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 74%);
          mask-image:radial-gradient(circle at 50% 50%,#000 26%,transparent 74%);
  /* grid held static so the red beam can sit on a grid line (aligned by JS) */
}
/* a red light bar sweeping down behind the logo */
.intro-grid::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,transparent 0,rgba(240,53,64,.10) 48%,rgba(240,53,64,.22) 50%,rgba(240,53,64,.10) 52%,transparent 100%);
  background-size:100% 26%;background-repeat:no-repeat;
  animation:heroScan 4.5s linear infinite;
}
.intro-inner{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.3rem;
  animation:introIn 1s var(--ease) both;
}
.intro-logo{
  width:min(620px,88vw);height:230px;
  background:url('../images/logo-square.webp') center/contain no-repeat;
}
/* #2 LOGO GLINT — as the centre scan-head races down past the logo (~1s), the logo
   catches a bright specular pulse, as if the beam is energizing it. */
#intro .intro-logo{animation:introLogoGlint 1.7s var(--ease) .15s both}
@keyframes introLogoGlint{
  0%,42%{filter:contrast(1.04) brightness(1)}
  52%{filter:contrast(1.12) brightness(1.7) drop-shadow(0 0 22px rgba(240,53,64,.85))}
  66%{filter:contrast(1.04) brightness(1.06)}
  100%{filter:contrast(1.04) brightness(1)}
}
@media(prefers-reduced-motion:reduce){#intro .intro-logo{animation:none}}
.intro-line{width:0;height:2px;background:var(--red);box-shadow:0 0 12px var(--red);
  animation:introLine 1.3s var(--ease) .45s forwards}
.intro-tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--tan);opacity:0;animation:introTag .8s ease 1s forwards;
}
@keyframes introIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes introLine{to{width:min(300px,58vw)}}
@keyframes introTag{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .intro-grid,.intro-grid::after,.intro-inner{animation:none}
  .intro-line{width:240px;animation:none}
  .intro-tag{opacity:1;animation:none}
  #intro::before{transform:translateX(-50%) scaleY(1);animation:none}
  #intro::after{display:none}
}

/* about page — full-width aluminum banner */
.alum-banner{position:relative;margin-top:3rem;border:1px solid var(--seam);overflow:hidden}
.alum-banner img{width:100%;height:auto;display:block;filter:brightness(.82) saturate(.9) contrast(1.03)}
.alum-banner::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,12,14,.35) 0,transparent 22%,transparent 78%,rgba(10,12,14,.5) 100%),
    radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(10,12,14,.45) 100%);
}

/* full-bleed variant: edge-to-edge banner (currently used on capabilities.html) */
.alum-banner-full{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-left:none;border-right:none}

/* ═══════════════ SCROLL PROGRESS BAR ═══════════════ */
#progress{
  position:fixed;top:0;left:0;height:6px;width:100%;z-index:400;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;
  background:linear-gradient(90deg,var(--red),var(--red-hi));
  box-shadow:0 0 14px rgba(240,53,64,.75);
  transition:transform .08s linear,background .4s ease,box-shadow .4s ease;
}
/* subtle 3D hover-tilt on cards */
.pcard,.area,.phase,.casefile,.sector-card{will-change:transform}
@media(prefers-reduced-motion:reduce){#progress{display:none}}

/* ═══════════════ HAZARD TAPE (static — perpetual roll removed for restraint) ═══════════════ */

/* ═══════════════ FOOTER MINI RADAR ═══════════════ */
footer{position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:1}
.footer-radar{
  position:absolute;right:-55px;bottom:-55px;width:330px;height:330px;border-radius:50%;
  z-index:0;pointer-events:none;opacity:.55;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 31px,rgba(240,53,64,.15) 31px 32px),
    linear-gradient(rgba(240,53,64,.12) 0 0) 50% 50%/100% 1px no-repeat,
    linear-gradient(rgba(240,53,64,.12) 0 0) 50% 50%/1px 100% no-repeat,
    radial-gradient(circle at 50% 50%,rgba(240,53,64,.06),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(240,53,64,.2);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 73%);
          mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 73%);
}
/* static, faint glow wedge — the perpetual sweep was removed so the only
   animated radar on the site is the case-hero scope (its signature motion) */
.footer-radar .fr-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 18deg,rgba(240,53,64,.16),rgba(240,53,64,.04) 30deg,transparent 64deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 73%);
          mask-image:radial-gradient(circle at 50% 50%,#000 60%,transparent 73%);
}
@media(prefers-reduced-motion:reduce){
  .hazard{animation:none}
  .footer-radar .fr-sweep{animation:none}
}

/* ═══════════════ UNIFIED PHOTOGRAPHY GRADE ═══════════════ */
.pcard img,.d-photo img,.vs-photo img,.gal img{
  filter:saturate(.96) contrast(1.05) brightness(1.02);
  transition:filter .5s var(--ease),transform .6s var(--ease);
}
.pcard:hover img,.d-photo:hover img,.vs-photo:hover img,.gal:hover img{
  filter:saturate(1.06) contrast(1.06) brightness(1.08);
}
/* parallax depth — give the photo extra bleed so the shift never exposes an edge */
.hero-photo,.page-hero .ph-photo{top:-10%;height:120%;will-change:transform}



/* ═══════════════ CONSISTENT FLOATING IMAGERY ═══════════════ */
/* one cohesive grade across all product/content photos */
.d-photo img,.vs-photo img,.gal img,.feat figure img,.wc-photos figure img,.pcard img{
  filter:saturate(.96) contrast(1.05) brightness(1.02);
  transition:filter .5s var(--ease),transform .6s var(--ease);
}
.d-photo:hover img,.vs-photo:hover img,.gal:hover img,.feat figure:hover img,.pcard:hover img{
  filter:saturate(1.06) contrast(1.06) brightness(1.08);
}
/* lift framed photos off the page so they "float" */
.d-photo,.vs-photo,.feat figure,.wc-photos figure{
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px var(--seam);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.d-photo:hover,.vs-photo:hover,.feat figure:hover{
  box-shadow:0 40px 80px -22px rgba(0,0,0,.78),0 0 0 1px rgba(211,31,43,.4);
  transform:translateY(-4px);
}

/* ═══════════════ LOGO WALL (client marquee, refined) ═══════════════ */
.client{
  filter:grayscale(1) brightness(.9);opacity:.72;
  transition:filter .35s var(--ease),opacity .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.client:hover{filter:grayscale(0) brightness(1.05);opacity:1}
.client img{filter:grayscale(1);transition:filter .35s var(--ease)}
.client:hover img{filter:grayscale(0)}

/* ═══════════════ PRODUCTS STICKY JUMP-BAR ═══════════════
   Base look, used as-is on every page that has this bar (about.html,
   capabilities.html, target-pets.html, etc). */
.prod-subnav{
  position:sticky;top:0;z-index:250;
  background:rgba(10,12,14,.97);backdrop-filter:blur(12px);
  border-block:1px solid var(--seam);
}
/* products.html only: carries the #brands "spec plate" language down with
   it — same brushed diagonal hairline texture and a brand-color top edge
   (swaps with the active pane, matching the plate's photo-bar/rivet
   accents) — so the bar reads as a continuation of that section. Scoped to
   body.tg-page (products.html's body class) so the other pages that reuse
   this same .prod-subnav component are unaffected. */
body.tg-page .prod-subnav{
  background:
    repeating-linear-gradient(125deg,rgba(255,255,255,.022) 0 1px,transparent 1px 8px),
    rgba(10,12,14,.97);
  border-top:2px solid var(--cq-blue);
  transition:border-color .4s var(--ease-soft,ease);
}
body.tg-page:has(#pane-target.show) .prod-subnav{border-top-color:var(--tan)}
body.tg-page:has(#pane-pets.show) .prod-subnav{border-top-color:#e8731f}
.psub-wrap{display:flex;align-items:center;gap:1.4rem;height:58px}
.psub-label{
  flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tan);
}
.psub-label::after{content:'';display:inline-block;width:18px;height:1px;background:var(--red);margin-left:.7rem;vertical-align:middle}
.psub-links{
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);
          mask-image:linear-gradient(90deg,#000 96%,transparent);
}
.psub-links::-webkit-scrollbar{display:none}
.psub-links a{
  flex:none;font-family:var(--cond);font-weight:600;font-size:.92rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--grey-hi);padding:.4rem .9rem;transition:.2s var(--ease);
  box-shadow:inset 0 0 0 1px var(--seam);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.psub-links a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(211,31,43,.6)}
.psub-links a.on{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1px var(--red)}
/* keep anchored rows clear of the sticky jump-bar when jumped to (the fixed
   header auto-hides past the bar, so only the ~54px bar remains) */
.prod-subnav ~ section .detail[id]{scroll-margin-top:72px}
@media(max-width:680px){
  .psub-wrap{gap:.9rem;height:52px}
  .psub-label{display:none}
}

/* ═══════════════ BACK TO TOP ═══════════════ */
#toTop{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:280;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--red);color:#fff;border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s,visibility .3s;
}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--red-hi);transform:translateY(-3px)}
@media(max-width:680px){#toTop{width:42px;height:42px;right:1rem;bottom:1rem}}

/* ═══════════════ GO BACK (site-wide, stays top-left) ═══════════════ */
#goBack{
  position:fixed;left:1rem;top:140px;z-index:260;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--red);color:#fff;border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  opacity:0;visibility:hidden;will-change:transform;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s,opacity .3s var(--ease),visibility .3s;
}
#goBack.show{opacity:1;visibility:visible}
#goBack:hover{background:var(--red-hi);transform:translateX(-3px)}
#goBack:active{transform:translateX(-1px)}
@media(max-width:680px){#goBack{width:42px;height:42px;left:.8rem;top:120px}}

/* ═══════════════ TARGET AREA — desert-tan clickable chrome ═══════════════
   On products.html the ConQuest/Target toggle swaps which pane carries
   .show — key every tan override off that, so ConQuest stays red and only
   the Target slide goes desert tan */
.tg-page:has(#pane-target.show) #toTop,
.tg-page:has(#pane-target.show) #goBack{background:var(--tan);color:#0a0c0e}
.tg-page:has(#pane-target.show) #toTop:hover{background:#ddc9a0}
.tg-page:has(#pane-target.show) #goBack:hover{background:#ddc9a0}
/* Request Quote and the active "Products" nav link stay red — they're
   navigation chrome that leaves this page/section, not part of the Target
   slide itself, so they shouldn't imply you're "in" Target */
/* second (sticky "Jump To") nav bar that appears after the hazard stripe */
.tg-page:has(#pane-target.show) .psub-links a.on{background:var(--tan);color:#0a0c0e;box-shadow:inset 0 0 0 1px var(--tan)}
.tg-page:has(#pane-target.show) .psub-links a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(201,180,137,.6)}

/* ── CONQUEST AREA — blueprint-blue clickable chrome, same swap mechanism ── */
.tg-page:has(#pane-conquest.show) #toTop,
.tg-page:has(#pane-conquest.show) #goBack{background:var(--cq-blue);color:#fff}
.tg-page:has(#pane-conquest.show) #toTop:hover,
.tg-page:has(#pane-conquest.show) #goBack:hover{background:var(--cq-blue-hi)}
.tg-page:has(#pane-conquest.show) .psub-links a.on{background:var(--cq-blue);color:#fff;box-shadow:inset 0 0 0 1px var(--cq-blue)}
.tg-page:has(#pane-conquest.show) .psub-links a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(90,130,210,.6)}

/* ── P.E.T.S. AREA — rescue-orange clickable chrome, same swap mechanism ── */
.tg-page:has(#pane-pets.show) #toTop,
.tg-page:has(#pane-pets.show) #goBack{background:#e8731f;color:#0a0c0e}
.tg-page:has(#pane-pets.show) #toTop:hover,
.tg-page:has(#pane-pets.show) #goBack:hover{background:#ff8a3d}
.tg-page:has(#pane-pets.show) .psub-links a.on{background:#e8731f;color:#0a0c0e;box-shadow:inset 0 0 0 1px #e8731f}
.tg-page:has(#pane-pets.show) .psub-links a:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(232,115,31,.6)}

/* ── CLIENT LOGO STRIP (home page) ── */
.logo-strip{
  background:var(--panel);
  border-top:1px solid var(--seam);
  border-bottom:1px solid var(--seam);
  padding:2.4rem 0;
  overflow:hidden;
}
.logo-strip-head{
  text-align:center;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grey);
  margin-bottom:1.8rem;
}
.logo-strip-head::before,.logo-strip-head::after{
  content:'';display:inline-block;width:40px;height:1px;
  background:var(--seam);vertical-align:middle;margin:0 .9rem;
}
.logo-track-wrap{
  /* the track is far wider than the viewport; the mask only fades it visually,
     so this is what stops it adding horizontal scroll to the whole page */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{
  display:flex;width:max-content;
  animation:logoRoll 71s linear infinite reverse;
  align-items:center;gap:0;
}
/* the marquee runs continuously — hovering or touching it must not pause it */
@keyframes logoRoll{to{transform:translateX(-50%)}}
.logo-item{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  padding:0 3rem;
  border-right:1px solid var(--seam);
}
.logo-item:last-child{border-right:none}
.logo-item img{
  height:32px;width:auto;max-width:160px;
  filter:brightness(0) invert(1);
  opacity:.55;
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.logo-item:hover img{opacity:.9;filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(310deg)}
/* long, low wordmarks would be squashed by the fixed 32px height + 160px cap,
   so size these off width and let the height follow. --wide is ~8:1 marks
   (Kongsberg); --xwide is General Dynamics, which is a ~22:1 ribbon */
.logo-item--wide img{height:auto;width:240px;max-width:240px}
.logo-item--xwide img{height:auto;width:320px;max-width:320px}
/* marks that read small at 32px — stacked lockups and fine two-line type */
.logo-item--lg img{height:44px;max-width:300px}
/* --xl for the stacked Dynetics lockup, whose wordmark is only part of its
   height; --sm pulls back marks that carry too much weight at 32px */
.logo-item--xl img{height:56px;max-width:300px}
.logo-item--sm img{height:26px}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center}}
@media(max-width:680px){
  .logo-item img{height:26px;max-width:120px}
  .logo-item{padding:0 2rem}
  .logo-item--wide img{width:175px;max-width:175px}
  .logo-item--xwide img{width:230px;max-width:230px}
  .logo-item--lg img{height:36px;max-width:245px}
  .logo-item--xl img{height:44px;max-width:245px}
  .logo-item--sm img{height:22px}
}

/* ═══════════════ PREMIUM SURFACE TREATMENT ═══════════════ */
/* 1 — FILM GRAIN: a fixed, ultra-faint static noise field over the whole site.
   Stops the dark backgrounds reading as flat digital black — they look "graded",
   like film. Pure CSS (inline SVG turbulence) so it works over file:// with no
   asset. Sits above content but below the entry splash (z-index 99999); never
   intercepts pointer events. */
body::before{
  content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* 2 — MACHINED TOP EDGE: a faint light-catch along the TOP border of panel
   surfaces — like light grazing the milled edge of an aluminum case. Recolours
   only the top border (the other three sides keep --seam), giving a subtle
   "lit-from-above" depth across every card. */
.stat,.cap,.fact,.ind,.area,.phase,.casefile,.sector-card,
.cust-philosophy,.affil,.t-badge,.q-form,.client,.cf-features li,.ap-feat{
  border-top-color:rgba(255,255,255,.13);
}

/* ═══════════════ TARGETING LOCK-ON (product card hover) ═══════════════ */
/* A weapon-sight acquisition: four corner brackets snap inward, a scan line
   sweeps the image once, and a "TARGET LOCKED" readout blips in. Injected into
   every .pcard by main.js; skipped entirely under prefers-reduced-motion.
   pointer-events:none so the card's link still receives every click. */
.pcard-hud{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hud-c{
  position:absolute;width:20px;height:20px;
  border:2px solid var(--tan);box-shadow:0 0 8px rgba(201,180,137,.55);
  opacity:0;transition:opacity .2s var(--ease),transform .3s var(--ease);
}
.hud-c.tl{top:13px;left:13px;border-right:0;border-bottom:0;transform:translate(-11px,-11px)}
.hud-c.tr{top:13px;right:13px;border-left:0;border-bottom:0;transform:translate(11px,-11px)}
.hud-c.bl{bottom:13px;left:13px;border-right:0;border-top:0;transform:translate(-11px,11px)}
.hud-c.br{bottom:13px;right:13px;border-left:0;border-top:0;transform:translate(11px,11px)}
/* brackets snap home, staggered, with a hair of overshoot built into the ease */
.pcard:hover .hud-c{opacity:1;transform:translate(0,0)}
.pcard:hover .hud-c.tr{transition-delay:.04s}
.pcard:hover .hud-c.bl{transition-delay:.08s}
.pcard:hover .hud-c.br{transition-delay:.12s}

.hud-scan{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--tan) 18%,#fff 50%,var(--tan) 82%,transparent);
  box-shadow:0 0 14px rgba(201,180,137,.8);
}
.pcard:hover .hud-scan{animation:hudScan .85s var(--ease) .12s}
@keyframes hudScan{
  0%{opacity:0;top:0}
  9%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;top:100%}
}

.hud-lock{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.86);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tan);background:rgba(8,10,12,.66);border:1px solid rgba(201,180,137,.7);
  padding:.42rem .8rem;white-space:nowrap;backdrop-filter:blur(2px);
  box-shadow:0 0 16px rgba(201,180,137,.35);
  opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);
}
/* readout confirms only after the brackets have locked */
.pcard:hover .hud-lock{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.5s}

/* ═══════════════ BLUEPRINT SCAN (ConQuest card hover) ═══════════════ */
/* ConQuest is the industrial / riveted-aluminum line (blue accent), so its cards
   get an engineering-schematic treatment instead of Target's red weapon-sight:
   a blue measurement line sweeps once. Injected by main.js for .pcard-brand.cq cards. */
.cq-measure{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(140,175,232,.95) 15%,#e3eeff 50%,rgba(140,175,232,.95) 85%,transparent);
  box-shadow:0 0 12px rgba(140,175,232,.7);
}
.pcard:hover .cq-measure{animation:cqMeasure .9s var(--ease) .1s}
@keyframes cqMeasure{
  0%{opacity:0;top:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;top:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM PASS  —  appended overrides (safe to remove as a block)
   Four moves to read more "expensive":
   1. Tighten the red so it's deliberate, not constant
   2. Layered shadows + a milled top-edge highlight on every plate
   3. Slow, soft motion
   (Film grain already lives in the PREMIUM SURFACE block above, now at ~2.8%.)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* gentle expo-style ease — long, smooth settle */
  --ease-soft:cubic-bezier(.16,1,.3,1);
}

/* ── 1 · COLOR DISCIPLINE ──────────────────────────────────────────────
   The nav was six red-outlined chips on every page. Now the links rest as
   quiet machined chips and the single red moment in the bar is the CTA. */
.nav-links a{
  color:var(--grey-hi);
  background:rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:color .35s var(--ease-soft),background-color .35s var(--ease-soft),box-shadow .35s var(--ease-soft);
}
.nav-links a:hover{
  background:rgba(211,31,43,.14);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(211,31,43,.6);text-shadow:none;
}
.nav-links a.active{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1px var(--red)}
/* Request Quote is the one always-on red accent in the nav */
.nav-quote{
  color:#fff!important;background:var(--red);
  box-shadow:inset 0 0 0 1px var(--red);
}
.nav-quote:hover{background:var(--red-hi);box-shadow:inset 0 0 0 1px var(--red-hi)}

/* Demote secondary red labels to tan — keeps one clear accent per row.
   Spec-key labels in detail/vs rows and the case-file section labels. */
.d-specs li b,.vs-specs li b{color:var(--tan)}
.cf-label{color:var(--tan)}
.cf-block:hover .cf-label{color:var(--white)}
.cf-label::before{background:var(--tan)}
.cf-block:hover .cf-label::before{background:var(--red);box-shadow:0 0 10px rgba(211,31,43,.6)}

/* ── 2 · DEPTH · machined-plate shadows ────────────────────────────────
   Resting layered shadow + an inset top highlight, so panels feel like
   milled aluminum catching light from above rather than flat rectangles.
   Hover rules (border/transform) defined earlier keep winning by specificity. */
.stat,.cap,.fact,.ind,.area,.phase,.casefile,.sector-card,
.cust-philosophy,.q-form,.client,.affil,.t-badge,.pcard{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.4),
    0 16px 34px -18px rgba(0,0,0,.62);
}

/* ── 3 · SLOWER, SOFTER MOTION ─────────────────────────────────────────
   Card and button transitions stretched to ~.45s on the soft ease. */
.ind,.cap,.fact,.area,.phase,.casefile,.sector-card,.stat,.client,.affil{
  transition:
    transform .45s var(--ease-soft),
    border-color .45s var(--ease-soft),
    box-shadow .45s var(--ease-soft),
    background-color .45s var(--ease-soft),
    color .45s var(--ease-soft);
}
.btn{transition:.42s var(--ease-soft)}
.btn-solid:hover,.btn-ghost:hover{transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════════════════════
   POLISH PASS 2 — appended overrides (safe to remove as a block)
   · hover zoom extended to detail/gallery photos
   · lift + tinted glow on base product cards
   · spec-index numbering on section kickers (CSS counter — no copy change)
   · one slow settle-zoom on hero photos (no perpetual loop)
   · nav shrinks after scroll
   ═══════════════════════════════════════════════════════════════════════ */

/* hover zoom — cards already zoom; extend to detail rows and galleries */
.d-photo,.vs-photo,.gal{overflow:hidden}
.d-photo:hover img,.vs-photo:hover img,.gal:hover img{transform:scale(1.05)}

/* pressure equalization valve feature photos: source crop shows a stray
   line along the bottom edge, zoom in slightly and anchor higher to crop it out */
.d-photo img.pev-zoom{transform:scale(1.15);object-position:center 30%}
.d-photo:hover img.pev-zoom{transform:scale(1.2)}

/* base .pcard lift + tinted glow (even/brand-select grids keep their own
   stronger hover; ConQuest cards glow blueprint-blue, not red) */
.pcard{
  transition:border-color .45s var(--ease-soft),transform .45s var(--ease-soft),
             box-shadow .45s var(--ease-soft);
}
.pcard:hover{
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(211,31,43,.16),
    0 22px 44px -14px rgba(0,0,0,.6);
}
.pcard:has(.pcard-brand.cq):hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(90,130,210,.16),
    0 22px 44px -14px rgba(0,0,0,.6);
}


/* hero settle-zoom — a single slow Ken-Burns-style ease from 1.12 down to
   the 1.04 parallax over-scale, then holds. One-shot, so it keeps the calm
   feel that removing the perpetual zoom was after. */
.hero-photo img,.page-hero .ph-photo img{animation:kbSettle 26s var(--ease-soft) both}
@keyframes kbSettle{from{transform:scale(1.12)}to{transform:scale(1.04)}}

/* nav shrink — bar slims once .scrolled lands (main.js toggles it at 40px) */
.nav{transition:height .3s var(--ease)}
.logo-img{transition:width .3s var(--ease),height .3s var(--ease)}
header.scrolled .nav{height:72px}
header.scrolled .logo-img{width:150px;height:59px}

@media(prefers-reduced-motion:reduce){
  .hero-photo img,.page-hero .ph-photo img{animation:none;transform:scale(1.04)}
  .pcard:hover,.btn-solid:hover,.btn-ghost:hover{transform:none}
}

/* draw-in underline — a red rule sketches itself under each detail-row
   heading when the row's .rv reveal fires */
.d-name{position:relative;padding-bottom:.6rem}
.d-name::after{
  content:'';position:absolute;left:0;bottom:0;width:70px;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease-soft) .4s;
}
.rv.in .d-name::after,.slide-l.in .d-name::after,.slide-r.in .d-name::after{
  transform:scaleX(1);
}

/* tan/red rhythm — every other detail row and product card swaps its red
   accent for desert tan so long pages don't read monochrome */
.detail:nth-of-type(even) .d-name span{color:var(--tan)}
.detail:nth-of-type(even) .d-name::after{background:var(--tan)}
.detail:nth-of-type(even) .d-photo figcaption{background:var(--tan);color:#0a0c0e}
.prod-grid .pcard:nth-child(even) .pcard-bar,
.prod-grid .pcard-wrap:nth-child(even) .pcard-bar{background:var(--tan)}
/* ...but a ConQuest-branded card keeps its blue accent even when it lands on an
   even slot (e.g. Rackmount as the 2nd card) — brand colour wins over the rhythm */
.prod-grid .pcard:has(.pcard-brand.cq) .pcard-bar,
.prod-grid .pcard-wrap:has(.pcard-brand.cq) .pcard-bar{background:var(--cq-blue)}

/* ConQuest Single Lid and Rackmount carry the blueprint-blue ConQuest accent,
   overriding the default odd/even tan rhythm and the base red */
#conquest-single .d-name span,
#conquest-rackmount .d-name span{color:var(--cq-blue)}
#conquest-single .d-name::after,
#conquest-rackmount .d-name::after{background:var(--cq-blue)}
#conquest-single .d-photo figcaption,
#conquest-rackmount .d-photo figcaption{background:var(--cq-blue);color:#fff}
#conquest-single .d-specs li b,
#conquest-rackmount .d-specs li b{color:var(--cq-blue-hi)}
#conquest-single .btn-solid,
#conquest-rackmount .btn-solid{background:var(--cq-blue);color:#fff}
#conquest-single .btn-solid:hover,
#conquest-rackmount .btn-solid:hover{background:var(--cq-blue-hi)}

/* Target lineup goes desert-tan across the board */
#target-single .d-name span,
#target-halfrack .d-name span,
#target-chiller .d-name span{color:var(--tan)}
#target-single .d-name::after,
#target-halfrack .d-name::after,
#target-chiller .d-name::after{background:var(--tan)}
#target-single .d-photo figcaption,
#target-halfrack .d-photo figcaption,
#target-chiller .d-photo figcaption{background:var(--tan);color:#0a0c0e}
#target-single .btn-solid,
#target-rackmount .btn-solid,
#target-halfrack .btn-solid,
#target-dualwide .btn-solid,
#target-chiller .btn-solid,
#target-emi .btn-solid{background:var(--tan);color:#0a0c0e}
#target-single .btn-solid:hover,
#target-rackmount .btn-solid:hover,
#target-halfrack .btn-solid:hover,
#target-dualwide .btn-solid:hover,
#target-chiller .btn-solid:hover,
#target-emi .btn-solid:hover{background:#ddc9a0}

/* P.E.T.S. carries its own orange accent, matching the toggle pane above —
   no desert-tan here since it's no longer a Target sub-line */
#pets .d-name span{color:#e8731f}
#pets .d-name::after{background:#e8731f}
#pets .d-photo figcaption{background:#e8731f;color:#0a0c0e}
#pets .btn-solid{background:#e8731f;color:#0a0c0e}
#pets .btn-solid:hover{background:#ff8a3d}

/* CTA band parallax — the logo watermark counter-drifts as the band crosses
   the viewport (offset fed by main.js via --band-py); over-scaled so the
   shift never exposes an edge */
.band::before{
  transform:translate3d(0,var(--band-py,0px),0) scale(1.18);
  will-change:transform;
}

/* .no-frame — drop the border/box-shadow frame and the forced 4:3 crop,
   letting a photo show at its natural scale instead of a cropped tile */
.d-photo.no-frame{border:none;box-shadow:none;background:none}
.d-photo.no-frame:hover{box-shadow:none;transform:none}
.d-photo.no-frame img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
}


/* ═══════════════ NAV DIRECTION BOARD ═══════════════
   A nav item that owns a menu drops a vertical "direction board" on hover:
   column 1 lists the product lines, hovering a line slides out column 2 with
   that line's models. The markup is injected by js/main.js so every page in
   the site gets the same board without touching each file. */
.nav-links > li{position:relative}
.nav-has-menu > a{padding-right:1.8rem!important}
.nf-caret{
  position:absolute;right:.72rem;top:calc(50% - 1px);
  width:0;height:0;pointer-events:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.65;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-has-menu.nf-open .nf-caret{transform:rotate(180deg);opacity:1}
.nf-toggle{display:none}

.nf{
  position:absolute;top:calc(100% + 10px);left:-4px;z-index:5;
  display:flex;align-items:flex-start;
  background:linear-gradient(180deg,rgba(19,22,27,.985),rgba(12,14,17,.985));
  border:1px solid var(--seam);border-top:2px solid var(--red);
  box-shadow:0 28px 64px rgba(0,0,0,.62),0 2px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(-9px);
  transition:opacity .22s var(--ease),transform .3s var(--ease-soft),visibility .22s;
}
/* bridges the gap between the nav chip and the board so the hover never breaks */
.nf::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-has-menu.nf-open .nf{opacity:1;visibility:visible;transform:translateY(0)}

/* strip the nav-chip look off every link inside the board */
.nav-links .nf a{
  background:none;box-shadow:none;clip-path:none;text-shadow:none;
  padding:0;white-space:normal;font-family:var(--body);font-size:1rem;
  letter-spacing:normal;text-transform:none;transition:.22s var(--ease);
}
.nav-links .nf a:hover{background:none;box-shadow:none}

/* ── column 1 : the lines ── */
.nf-lines{padding:.55rem;min-width:206px}
.nf-head{
  display:block;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  padding:.15rem .5rem .5rem;
}
.nav-links .nf .nf-line{
  display:flex;align-items:center;gap:.55rem;
  padding:.42rem .55rem;border-left:2px solid transparent;
  font-family:var(--cond);font-weight:700;font-size:.88rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--grey-hi);
}
/* the line names all read white — the brand accent stays on the hover bar and
   the sub-column heading. nowrap lets column 1 size itself to the longest
   name instead of wrapping it */
.nf-line span{flex:1 1 auto;color:var(--white);white-space:nowrap}
.nf-line em{margin-left:auto;font-style:normal;font-size:.95rem;line-height:1;opacity:0;transform:translateX(-5px);transition:.22s var(--ease)}
.nav-links .nf .nf-line:hover,.nav-links .nf .nf-line.on{
  background:rgba(255,255,255,.05);color:#fff;
  border-left-color:var(--nf-accent,var(--red));
}
.nav-links .nf .nf-line:hover em,.nav-links .nf .nf-line.on em{opacity:.85;transform:none}

/* ── column 2 : the models, slides open on hover ── */
.nf-models{
  width:0;overflow:hidden;opacity:0;align-self:stretch;
  transition:width .34s var(--ease-soft),opacity .2s var(--ease);
}
.nf.has-sub .nf-models{width:236px;opacity:1;border-left:1px solid var(--seam)}
.nf-sub{display:none;padding:.55rem .6rem;width:236px}
.nf-sub.on{display:block;animation:nfSlide .32s var(--ease-soft) both}
@keyframes nfSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.nf-sub-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;
  padding:.15rem .3rem .45rem;border-bottom:1px solid var(--seam);margin-bottom:.28rem;
}
.nf-sub-name{
  font-family:var(--cond);font-weight:800;font-size:.86rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--nf-accent,var(--red));
}
.nav-links .nf .nf-all{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap;
}
.nav-links .nf .nf-all:hover{color:#fff}
.nav-links .nf .nf-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.36rem .5rem;border-left:2px solid transparent;
}
.nf-item b{
  display:block;flex:1 1 auto;font-family:var(--cond);font-weight:700;font-size:.84rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--white);transition:.2s var(--ease);
}
.nav-links .nf .nf-item:hover,.nav-links .nf .nf-item.on{background:rgba(255,255,255,.055);border-left-color:var(--nf-accent,var(--red))}
.nav-links .nf .nf-item:hover b,.nav-links .nf .nf-item.on b{color:#fff}
/* a model that nests again carries the same chevron column 1 uses */
.nf-item em{
  font-style:normal;font-size:.95rem;line-height:1;color:var(--nf-accent,var(--red));
  opacity:0;transform:translateX(-5px);transition:.22s var(--ease);
}
.nav-links .nf .nf-item:hover em,.nav-links .nf .nf-item.on em{opacity:.9;transform:none}

/* ── column 3 : the systems under a model, same slide-open as column 2 ── */
.nf-more{
  width:0;overflow:hidden;opacity:0;align-self:stretch;
  transition:width .34s var(--ease-soft),opacity .2s var(--ease);
}
.nf.has-more .nf-more{width:236px;opacity:1;border-left:1px solid var(--seam)}
.nf-nest{display:none;padding:.55rem .6rem;width:236px}
.nf-nest.on{display:block;animation:nfSlide .32s var(--ease-soft) both}

@media(prefers-reduced-motion:reduce){
  .nf,.nf-models,.nf-more,.nf-sub.on,.nf-nest.on{transition:none;animation:none}
}

/* ── burger menu : the board becomes a stacked accordion ── */
@media(max-width:1000px){
  header.open .nav-links > li{width:100%}
  header.open .nav-has-menu{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
  .nf-caret{display:none}
  .nf-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:34px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.14);color:var(--grey-hi);cursor:pointer;
  }
  .nf-toggle::after{
    content:'';width:0;height:0;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid currentColor;transition:transform .25s var(--ease);
  }
  .nav-has-menu.nf-open .nf-toggle{background:var(--red);border-color:var(--red);color:#fff}
  .nav-has-menu.nf-open .nf-toggle::after{transform:rotate(180deg)}
  .nf{
    position:static;flex:1 0 100%;flex-direction:column;
    opacity:1;visibility:visible;transform:none;display:none;
    margin:.15rem 0 .3rem;background:rgba(255,255,255,.03);
    border:0;border-left:2px solid var(--red);box-shadow:none;backdrop-filter:none;
  }
  .nav-has-menu.nf-open .nf{display:flex}
  .nf::before{display:none}
  .nf-lines{min-width:0;width:100%;padding:.6rem .5rem}
  .nf-models,.nf.has-sub .nf-models,
  .nf-more,.nf.has-more .nf-more{
    width:100%;opacity:1;overflow:visible;border-left:0;border-top:1px solid var(--seam);
  }
  .nf-sub,.nf-nest{width:100%;padding:.6rem .5rem}
  /* the third level indents so the stack still reads as a hierarchy */
  .nf-nest{background:rgba(255,255,255,.03);border-left:2px solid var(--nf-accent,var(--tan))}
  .nav-links .nf .nf-item em{opacity:.9;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION PASS — appended overrides (safe to remove as a whole block)
   Everything already animated now moves further and faster:
   · scroll reveals travel more, unblur and settle instead of just fading
   · directional reveals (.slide-l / .slide-r) actually slide
   · hovers lift higher and zoom deeper
   · the running tracks (marquee, conveyor, client + logo rolls, radar,
     hazard stripe) all run quicker
   · idle elements drift, so a parked screen is never completely still
   Every addition is switched off under prefers-reduced-motion at the end.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── scroll reveal — longer travel, a little scale and defocus so blocks
      arrive under their own weight rather than blinking on ── */
.rv{
  opacity:0;
  transform:translateY(60px) scale(.965);
  filter:blur(5px);
  transition:opacity .8s var(--ease-soft),transform 1s var(--ease-soft),filter .7s var(--ease-soft);
}
.rv.in{opacity:1;transform:none;filter:blur(0)}

/* directional reveals — a shared default for these (only the Resource Centre
   uses them today, and it styles its own .ev-thumb variants on top) */
.slide-l,.slide-r{
  opacity:0;
  transition:opacity .8s var(--ease-soft),transform 1s var(--ease-soft);
}
.slide-l{transform:translateX(-110px)}
.slide-r{transform:translateX(110px)}
.slide-l.in,.slide-r.in{opacity:1;transform:none}

/* ── fast-scroll reveal — js adds .rv-fast when the page is moving quicker than
      the choreography can keep up with, or when a block is already level with
      the reading line. Same arrival, just cut short: no stagger, and the
      travel/unblur run in a quarter of a second so a flick never lands on a
      blank screen or on text still coming out of focus. ── */
.rv.rv-fast,.slide-l.rv-fast,.slide-r.rv-fast{
  transition-duration:.26s;
  transition-delay:0s;
}
/* the heading underline draws with it rather than trailing a beat behind */
.rv-fast .d-name::after{transition:transform .3s var(--ease-soft) 0s}

/* the underline under a revealed heading draws faster and wider */
.d-name::after{transition:transform .7s var(--ease-soft) .25s}
.rv.in .d-name::after,.slide-l.in .d-name::after,.slide-r.in .d-name::after{transform:scaleX(1.35)}

/* ── hover — more lift, more zoom ── */
.pcard:hover{transform:translateY(-9px)}
.brand-select .pcard:hover{transform:translateY(-12px)}
.pcard:hover img{transform:scale(1.11)}
.brand-select .pcard:hover img{transform:scale(1.16)}
.pcard:hover .pcard-bar{width:96px}
.d-photo:hover img,.vs-photo:hover img,.gal:hover img{transform:scale(1.09)}
.d-photo:hover img.pev-zoom{transform:scale(1.26)}
.why-photos img{transition:transform .6s var(--ease-soft),filter .55s var(--ease)}
.why-photos a:hover img,.why-photos figure:hover img{transform:scale(1.08)}
.sector-card:hover .sc-photo img{transform:scale(1.09)}
.btn-solid:hover,.btn-ghost:hover{transform:translateY(-4px)}
.ind:hover,.cap:hover,.fact:hover,.area:hover,.phase:hover,
.casefile:hover,.sector-card:hover,.stat:hover{transform:translateY(-7px)}
.client:hover,.affil:hover{transform:translateY(-5px) scale(1.04)}

/* ── running tracks — same loops, shorter periods ── */
.strip-track{animation-duration:24s}
.conveyor-track{animation-duration:17s}
.client-track{animation-duration:30s}
.logo-track{animation-duration:46s}
.hazard{animation-duration:1s}
.seam-sheen{animation-duration:5.5s}
.hr-sweep{animation-duration:3.6s}
.hr-blip{animation-duration:3.6s}
.hero-tag i{animation-duration:1.1s}
/* the footer radar's wedge was left static; give it its sweep back */
@media (prefers-reduced-motion:no-preference){
  .footer-radar .fr-sweep{animation:radarSweep 7s linear infinite}
}

/* ── idle drift — the hero photo no longer parks. A slow push-in/pull-out
      that reverses forever, on top of the js parallax offset. ── */
@media (prefers-reduced-motion:no-preference){
  .hero-photo img,.page-hero .ph-photo img{
    animation:kbDrift 34s var(--ease-soft) infinite alternate;
  }
  @keyframes kbDrift{
    from{transform:scale(1.05) translate3d(0,0,0)}
    to{transform:scale(1.14) translate3d(-1.4%,-1.2%,0)}
  }

  /* a shine sweeps across solid buttons every few seconds so the primary
     call to action keeps catching the eye without a hover */
  .btn-solid{position:relative;overflow:hidden}
  .btn-solid::after{
    content:'';position:absolute;top:0;bottom:0;left:-40%;width:34%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
    transform:skewX(-18deg);pointer-events:none;
    animation:btnShine 4.6s ease-in-out infinite;
  }
  @keyframes btnShine{0%,62%{left:-40%}100%{left:128%}}

  /* section kickers breathe — the rules either side pulse their reach.
     scaleX, not width, so the pulse never reflows the text beside it */
  .kicker::before{transform-origin:right center}
  .kicker::after{transform-origin:left center}
  .kicker::before,.kicker::after{animation:kickerPulse 3.2s var(--ease) infinite alternate}
  @keyframes kickerPulse{from{transform:scaleX(.6);opacity:.5}to{transform:scaleX(1.25);opacity:1}}

  /* the tag-line's trailing gradient sweeps along instead of sitting still */
  .tag-line::after{
    background:linear-gradient(90deg,rgba(211,31,43,.7),rgba(211,31,43,.15),rgba(211,31,43,.7));
    background-size:220% 100%;
    animation:tagSweep 5s linear infinite;
  }
  @keyframes tagSweep{to{background-position:-220% 0}}

  /* back-to-top / go-back nudge in their travel direction while idle */
  #toTop.show svg{animation:navNudge 2.4s var(--ease) infinite}
  @keyframes navNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

  /* CTA band arrows lean forward and back */
  .band .btn svg,.sc-cta svg{animation:arrowNudge 2.2s var(--ease) infinite}
  @keyframes arrowNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
}

@media(prefers-reduced-motion:reduce){
  .rv,.slide-l,.slide-r{transform:none;filter:none;transition:opacity .3s}
  .btn-solid::after,.kicker::before,.kicker::after,.tag-line::after,
  #toTop.show svg,.band .btn svg,.sc-cta svg{animation:none}
  .hero-photo img,.page-hero .ph-photo img{animation:none;transform:scale(1.04)}
  .pcard:hover,.brand-select .pcard:hover,.btn-solid:hover,.btn-ghost:hover,
  .ind:hover,.cap:hover,.fact:hover,.area:hover,.phase:hover,
  .casefile:hover,.sector-card:hover,.stat:hover,.client:hover,.affil:hover{transform:none}
}