/* ════════════════════════════════════════════════════════════════════
   STEEL STRIP HERO — cinematic single-image composition (Precision
   Strips page only). Same family as nails-hardware-hero.css / wire-
   rods-hero.css / structural-tubes-hero.css (eyebrow, two-tone heading,
   2×2 feature grid, CTA row, full-bleed visual), built around the
   reference photo (Hero/Steel_Strip.jpg/webp/avif — stacked slit steel
   strip coils in a factory aisle). The photo itself stays untouched;
   everything else — the royal-blue/orange atmosphere, the scrim, a
   royal-blue shadow tint + screen-blended coil glow, the light sweep,
   a faint orange network layer, scattered orange pulses, a curved
   bottom accent and the trust strip — is layered on top with CSS only
   (plus one small inline SVG for the network lines/curve), all
   transform/opacity driven so it stays GPU-cheap. Dark royal blue is
   the dominant brand color throughout; orange is used as a deliberately
   sparing accent, never as a wash over the whole hero.
   ════════════════════════════════════════════════════════════════════ */

.ss-hero {
  --ss-navy-deep: #020817;
  --ss-navy: #061A3A;
  --ss-navy2: #08265A;
  --ss-orange: #FF6A00;
  --ss-orange-hot: #FF8A1F;
  --ss-orange-deep: #D9480A;
  --ss-cta-end: #FF5A00;
  --ss-white: #F5F7FA;
  --ss-silver: #C7D0DE;

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 2rem) 1.75rem 5.5rem;
  min-height: calc(100svh - var(--nav-h));
  background:
    radial-gradient(ellipse 46% 60% at 12% 42%, rgba(15, 64, 140, .32), transparent 68%),
    radial-gradient(ellipse 55% 48% at 86% 58%, rgba(255, 106, 0, .1), transparent 65%),
    linear-gradient(150deg, var(--ss-navy-deep) 0%, var(--ss-navy) 55%, var(--ss-navy2) 100%);
  color: var(--ss-white);
}

.ss-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── faint technological network layer: a dark-royal-blue dot grid plus a
   handful of thin orange connector lines/nodes, masked toward the left/
   middle content area. Purely decorative, low-opacity, never competes
   with the headline — static background-image (no per-frame paint) with
   only the fade-in and two node pulses animated ── */
.ss-network {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.6s ease .25s;
  background-image: radial-gradient(rgba(110, 155, 220, .55) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 32% 46%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 68% 62% at 32% 46%, #000 0%, transparent 78%);
}
.ss-loaded .ss-network { opacity: .22; }
.ss-network-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-network-lines line { stroke: var(--ss-orange-hot); stroke-width: 1; opacity: .4; }
.ss-network-lines circle { fill: var(--ss-orange-hot); }
.ss-node-pulse { animation: ssNodePulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ss-node-pulse.ss-node-pulse-b { animation-delay: 1.4s; }
@keyframes ssNodePulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
}

/* ── small orange light pulses scattered across the hero: a distinct,
   fixed-position complement to the drifting embers below, evoking status
   lights on factory/network equipment ── */
.ss-pulses { position: absolute; inset: 0; }
.ss-pulse {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ss-orange-hot);
  box-shadow: 0 0 8px 2px rgba(255, 138, 31, .5);
  opacity: 0;
}
.ss-loaded .ss-pulse { animation: ssPulseGlow var(--ss-pulse-dur, 3.2s) ease-in-out var(--ss-pulse-delay, 0s) infinite; }
@keyframes ssPulseGlow {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50% { opacity: .8; transform: scale(1.2); }
}
.ss-pulse-1 { top: 14%; left: 36%; --ss-pulse-dur: 3.4s; --ss-pulse-delay: .2s; }
.ss-pulse-2 { top: 62%; left: 20%; --ss-pulse-dur: 2.8s; --ss-pulse-delay: 1.1s; }
.ss-pulse-3 { top: 40%; left: 6%;  --ss-pulse-dur: 3.6s; --ss-pulse-delay: .6s; }
.ss-pulse-4 { top: 80%; left: 44%; --ss-pulse-dur: 3.1s; --ss-pulse-delay: 1.8s; }
.ss-pulse-5 { top: 20%; left: 68%; --ss-pulse-dur: 2.6s; --ss-pulse-delay: .4s; }
.ss-pulse-6 { top: 55%; left: 84%; --ss-pulse-dur: 3.9s; --ss-pulse-delay: 1.4s; }
.ss-pulse-7 { top: 8%;  left: 56%; --ss-pulse-dur: 3.3s; --ss-pulse-delay: 2.1s; }
.ss-pulse-8 { top: 88%; left: 28%; --ss-pulse-dur: 2.9s; --ss-pulse-delay: .9s; }

/* ── drifting ember particles: same floating-pulse technique as the
   home hero / other product heroes, but kept over the plain navy content
   side (left ~55%) rather than the photo — the photo already has its
   own baked-in sparks at the cutter head, so this reads as ambient
   atmosphere behind the text instead of a duplicate spark layer ── */
.ss-particles { position: absolute; inset: 0; overflow: hidden; }
.ss-particle {
  position: absolute; bottom: -5%; left: var(--x, 30%);
  width: var(--size, 3px); height: var(--size, 3px); border-radius: 50%;
  background: var(--hue, var(--ss-orange-hot));
  box-shadow: 0 0 6px 1px var(--hue, rgba(255, 162, 61, .6));
  opacity: 0;
  animation: ssParticleFloat var(--dur, 16s) ease-in var(--delay, 0s) infinite;
}
@keyframes ssParticleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .7; }
  85% { opacity: .3; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 16px)); opacity: 0; }
}

/* ══ LAYOUT — content column ~40%, visual takes the rest full-bleed ══ */
.ss-inner { position: relative; z-index: 5; width: 100%; max-width: 1400px; margin: 0 auto; }
.ss-content { min-width: 0; }
@media (min-width: 960px) { .ss-content { max-width: min(650px, 41%); } }

/* ══ BREADCRUMB — reflow into the narrow content column, recolor for
   the dark navy background (base .breadcrumb assumes a light page) ══ */
.ss-hero .breadcrumb { max-width: none; margin: 0 0 1rem; padding: 0; font-size: .74rem; }
.ss-hero .breadcrumb a { color: var(--ss-silver); }
.ss-hero .breadcrumb a:hover { color: var(--ss-orange-hot); }
.ss-hero .breadcrumb .bc-sep { color: rgba(255, 255, 255, .25); }
.ss-hero .breadcrumb .bc-current { color: var(--ss-orange-hot); }

/* ══ EYEBROW — short orange rule, then label. Hover widens the letter-
   spacing, same small flex as the home hero's .hero-kicker:hover ══ */
.ss-eyebrow { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; cursor: default; }
.ss-eyebrow-rule { width: 28px; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, var(--ss-orange), var(--ss-orange-hot)); border-radius: 2px; }
.ss-eyebrow-text {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ss-orange-hot);
  transition: letter-spacing .35s ease, color .35s ease;
}
.ss-eyebrow:hover .ss-eyebrow-text { letter-spacing: .22em; color: var(--ss-white); }

/* ══ HEADLINE — two lines, two-tone ══ */
.ss-hero h1.ss-heading {
  text-transform: uppercase; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 5.2vw, 6.5rem); line-height: .88; letter-spacing: -.02em;
  margin: 0 0 1.15rem;
}
.ss-line { display: block; overflow: hidden; padding-bottom: .1em; }
.ss-line-inner { display: block; color: var(--ss-white); }

/* same small flex as the home hero's gradient headline: a slow ember
   shimmer sliding across the fill plus a breathing glow, text-only —
   no new shape added over the photo */
.ss-line-inner.ss-accent {
  background: linear-gradient(100deg, var(--ss-orange), var(--ss-orange-hot));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%;
  animation: ssEmberShift 6s ease-in-out infinite, ssGradGlow 4s ease-in-out infinite;
}
@keyframes ssEmberShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ssGradGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 106, 0, .25)); }
  50% { filter: drop-shadow(0 0 18px rgba(255, 106, 0, .5)); }
}

/* ══ SUPPORTING HEADLINE — short orange underline beneath ══ */
.ss-subhead {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 700; color: var(--ss-white);
  text-transform: none;
  font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.3;
  margin: 0 0 1.2rem; padding-bottom: .6rem;
}
.ss-subhead::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ss-orange), var(--ss-orange-hot));
}

.ss-desc {
  color: var(--ss-silver); font-size: clamp(.92rem, .95vw, 1.02rem); line-height: 1.65;
  max-width: 500px; margin: 0 0 1.7rem; font-weight: 500;
  padding: .85rem 1.1rem;
  background: linear-gradient(135deg, rgba(7, 26, 58, .55), rgba(7, 26, 58, .24));
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 106, 0, .22); border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(2, 8, 20, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ══ FOUR FEATURES — compact 2×2 grid ══ */
.ss-features { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1.8rem; }
.ss-feature {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  padding: .55rem .9rem .55rem .55rem;
  background: rgba(7, 25, 55, .78);
  border: 1px solid rgba(255, 106, 0, .30); border-radius: .75rem;
  box-shadow: 0 6px 18px rgba(2, 8, 20, .35), inset 0 1px 0 rgba(40, 90, 160, .20);
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.ss-feature-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 106, 0, .3), rgba(6, 26, 58, .95));
  border: 1.5px solid rgba(255, 106, 0, .55);
  box-shadow: 0 0 14px rgba(255, 106, 0, .2), inset 0 0 8px rgba(255, 106, 0, .12);
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease, filter .3s ease;
}
.ss-feature-icon svg { width: 16px; height: 16px; stroke: var(--ss-orange-hot); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── idle "flex" pulse: a soft ring breathing outward behind each icon ── */
.ss-feature-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ss-orange-hot);
  box-shadow: 0 0 0 0 rgba(255, 106, 0, .5);
  opacity: 0;
  animation: ssIconFlex 2.6s cubic-bezier(.22, 1, .36, 1) infinite;
}
.ss-feature:nth-child(1) .ss-feature-icon::after { animation-delay: 0s; }
.ss-feature:nth-child(2) .ss-feature-icon::after { animation-delay: .65s; }
.ss-feature:nth-child(3) .ss-feature-icon::after { animation-delay: 1.3s; }
.ss-feature:nth-child(4) .ss-feature-icon::after { animation-delay: 1.95s; }

@keyframes ssIconFlex {
  0% { transform: scale(1); opacity: .9; }
  75% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.ss-feature h4 {
  text-transform: uppercase; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; color: var(--ss-white); margin: 0; line-height: 1.3; transition: color .3s ease;
}
.ss-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 0, .55);
  background: rgba(9, 30, 64, .86);
  box-shadow: 0 10px 26px rgba(2, 8, 20, .4), inset 0 1px 0 rgba(60, 120, 200, .28);
}
.ss-feature:hover .ss-feature-icon { transform: scale(1.05); filter: brightness(1.12); box-shadow: 0 0 18px rgba(255, 106, 0, .4), inset 0 0 10px rgba(255, 106, 0, .18); }
.ss-feature:hover h4 { color: var(--ss-orange-hot); }

/* ══ CTA ROW ══ */
.ss-cta-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.ss-cta {
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: .28rem .28rem .28rem 1.45rem; border-radius: 3rem; text-decoration: none;
  background: linear-gradient(135deg, var(--ss-orange-hot), var(--ss-cta-end));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(255, 90, 0, .38), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease;
}
.ss-cta-label { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; }
.ss-cta-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; flex-shrink: 0;
  transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.ss-cta-arrow svg { width: 15px; height: 15px; }
.ss-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 36px rgba(255, 90, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.ss-cta:hover .ss-cta-arrow { transform: translateX(5px); }
.ss-cta:focus-visible { outline: 2px solid var(--ss-white); outline-offset: 3px; }

.ss-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .92rem 1.6rem; border-radius: 3rem; text-decoration: none;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ss-white); background: rgba(2, 8, 20, .5); border: 1.5px solid rgba(255, 106, 0, .4);
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.ss-cta-secondary:hover { transform: translateY(-2px); border-color: var(--ss-orange-hot); background: rgba(217, 72, 10, .16); box-shadow: 0 0 16px rgba(255, 106, 0, .25); }
.ss-cta-secondary:focus-visible { outline: 2px solid var(--ss-white); outline-offset: 3px; }

/* same small flex as the home hero's CTA shine-sweep on hover */
.ss-cta, .ss-cta-secondary { position: relative; overflow: hidden; }
.ss-cta::after, .ss-cta-secondary::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.ss-cta:hover::after, .ss-cta-secondary:hover::after { left: 125%; }

/* ══ HERO VISUAL — the single reference photo, full-bleed, one scrim ══ */
.ss-visual { position: relative; overflow: hidden; margin: 0; }
.ss-visual-frame { position: absolute; inset: 0; transition: transform .4s ease-out; }
.ss-visual-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 66%;
  transform: scale(var(--ss-img-scale, 1));
  filter: saturate(1.08) contrast(1.02) brightness(1.22);
}

/* readability scrim, exact stops requested: dark navy on the text side,
   fading out by ~70% width so the steel strips stay bright and metallic */
.ss-visual-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 8, 22, .8) 0%, rgba(3, 8, 22, .62) 24%, rgba(3, 8, 22, .3) 47%, rgba(3, 8, 22, .06) 70%, rgba(3, 8, 22, 0) 100%),
    linear-gradient(180deg, rgba(2, 8, 20, .26) 0%, transparent 14%, transparent 76%, rgba(2, 8, 20, .34) 100%);
}

/* royal-blue wash in shadow regions only — overlay blend darkens the dim
   factory background while leaving the bright steel coils untouched */
.ss-visual-tint {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(10, 40, 95, .2);
  mix-blend-mode: overlay;
}

/* controlled warm glow around the coils/factory lights, screen-blended so
   it only lifts the already-bright areas rather than washing the photo */
.ss-visual-glow {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 52% 56% at 72% 54%, rgba(255, 130, 30, .3), transparent 72%);
  mix-blend-mode: screen;
}

/* subtle animated highlight sweeping across the reference photo's own
   orange diagonal — a reflection passing over it, never a new shape */
.ss-sweep {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(122deg, transparent 42%, rgba(255, 210, 160, .12) 49%, rgba(255, 210, 160, .2) 50%, rgba(255, 210, 160, .12) 51%, transparent 58%);
  background-size: 260% 260%; background-position: 120% 0%;
  animation: ssSweep 7s ease-in-out infinite; mix-blend-mode: screen;
}
@keyframes ssSweep { 0%, 100% { background-position: 120% 0%; } 50% { background-position: -20% 100%; } }

.ss-visual { position: absolute; inset: 0; z-index: 0; }

/* ══ BOTTOM TRUST STRIP — overlaid on the photo's own baked-in info bar ══ */
.ss-trust {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1.8rem; padding: .85rem 1.75rem;
  background: rgba(2, 8, 20, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 106, 0, .18);
}

/* elegant curved orange accent straddling the trust strip's top border —
   the "thin curved line" tying the visual into the strip beneath it */
.ss-bottom-curve {
  position: absolute; left: 0; right: 0; top: 0; transform: translateY(-70%);
  width: 100%; height: 24px; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 106, 0, .4));
}
.ss-bottom-curve path { fill: none; stroke: url(#ssCurveGrad); stroke-width: 2.5; opacity: .6; }
.ss-trust-item {
  position: relative; display: flex; align-items: center; gap: .55rem;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1);
}
.ss-trust-item:not(:last-child)::after {
  content: ''; position: absolute; right: -.9rem; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.ss-trust-icon { flex-shrink: 0; width: 17px; height: 17px; stroke: var(--ss-orange-hot); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: filter .3s ease; }
.ss-trust-text {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.3; color: var(--ss-silver);
  /* prevent .ss-hero's mobile text-align:center from centering this line
     and the bolder strong line separately, which drifts them out of
     alignment with each other since they differ in natural width */
  text-align: left;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1);
}
.ss-trust-text strong { display: block; color: var(--ss-white); font-size: .72rem; }
.ss-trust-item:hover { transform: translateY(-1px); }
.ss-trust-item:hover .ss-trust-icon { filter: drop-shadow(0 0 6px rgba(255, 106, 0, .65)); }
.ss-trust-item:hover .ss-trust-text { transform: translateY(-1px); }

/* ══ ENTRANCE (JS flips .ss-loaded on .ss-hero) ══ */
.ss-eyebrow, .ss-line-inner, .ss-subhead, .ss-desc, .ss-feature, .ss-cta, .ss-cta-secondary {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}
.ss-loaded .ss-eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
.ss-loaded .ss-line:nth-child(1) .ss-line-inner { opacity: 1; transform: none; transition-delay: .14s; }
.ss-loaded .ss-line:nth-child(2) .ss-line-inner { opacity: 1; transform: none; transition-delay: .24s; }
.ss-loaded .ss-subhead { opacity: 1; transform: none; transition-delay: .34s; }
.ss-loaded .ss-desc { opacity: 1; transform: none; transition-delay: .42s; }
.ss-loaded .ss-feature:nth-child(1) { opacity: 1; transform: none; transition-delay: .5s; }
.ss-loaded .ss-feature:nth-child(2) { opacity: 1; transform: none; transition-delay: .56s; }
.ss-loaded .ss-feature:nth-child(3) { opacity: 1; transform: none; transition-delay: .62s; }
.ss-loaded .ss-feature:nth-child(4) { opacity: 1; transform: none; transition-delay: .68s; }
.ss-loaded .ss-cta { opacity: 1; transform: none; transition-delay: .78s; }
.ss-loaded .ss-cta-secondary { opacity: 1; transform: none; transition-delay: .84s; }

.ss-cta, .ss-cta-secondary { transform: translateY(16px) scale(.97); }
.ss-loaded .ss-cta, .ss-loaded .ss-cta-secondary { transform: none; }

.ss-visual { opacity: 0; transform: scale(1.02); transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.ss-loaded .ss-visual { opacity: 1; transform: none; }

.ss-trust { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: .9s; }
.ss-loaded .ss-trust { opacity: 1; transform: none; }

.ss-bg, .ss-visual-frame { transition: transform .4s ease-out; will-change: transform; }
.ss-content { transition: transform .4s ease-out; }

/* very subtle standing "camera flex": a barely-perceptible scale breathe
   combined with a 1-2px horizontal/vertical drift, once entrance settles.
   Transform-only, GPU-friendly, never rotates or tilts the machinery. */
.ss-loaded .ss-visual-frame img { animation: ssFlex 11s ease-in-out infinite; }
@keyframes ssFlex {
  0%   { transform: scale(var(--ss-img-scale, 1)) translate3d(-2px, -1px, 0); }
  50%  { transform: scale(calc(var(--ss-img-scale, 1) * 1.012)) translate3d(2px, 1px, 0); }
  100% { transform: scale(var(--ss-img-scale, 1)) translate3d(-2px, -1px, 0); }
}

/* ══ TABLET / MOBILE: .ss-visual flows in normal document order after
   .ss-inner once it drops out of absolute full-bleed mode ══ */
@media (max-width: 959px) {
  /* text and features stack centered over the same full-bleed photo, no
     separate boxed card — matches the homepage / leadership hero */
  .ss-hero { display: block; padding: calc(var(--nav-h) + 1.75rem) 1.5rem 8rem; min-height: auto; text-align: center; }
  .ss-content { max-width: none; }

  .ss-eyebrow { justify-content: center; }
  .ss-desc { margin-left: auto; margin-right: auto; }
  .ss-cta-row { justify-content: center; }

  .ss-visual-frame img { object-position: 58% 44%; }
  .ss-visual-scrim {
    background:
      linear-gradient(180deg, rgba(2, 8, 20, .62) 0%, rgba(2, 8, 20, .28) 20%, rgba(3, 8, 22, .22) 38%, rgba(3, 8, 22, .5) 60%, rgba(2, 8, 20, .84) 78%, var(--ss-navy-deep) 96%),
      linear-gradient(90deg, rgba(2, 8, 20, .34) 0%, transparent 45%, transparent 60%, rgba(2, 8, 20, .22) 100%);
  }

  .ss-features { gap: .55rem; }
  .ss-trust { gap: 1.2rem 1.6rem; padding: .8rem 1.25rem; }

  /* tablet: keep the network/pulse layers but dial down their presence,
     and ease off the coil glow slightly, per the "reduce decorative
     effects" guidance for this breakpoint */
  .ss-loaded .ss-network { opacity: .14; }
  .ss-pulse { transform: scale(.85); }
  .ss-visual-glow { opacity: .7; }
}

@media (max-width: 640px) {
  .ss-hero { padding: calc(var(--nav-h) + 1.4rem) 1.15rem 11rem; }
  .ss-hero h1.ss-heading { font-size: clamp(2.5rem, 12vw, 3.4rem); }

  .ss-eyebrow { margin-bottom: .75rem; }
  .ss-subhead { font-size: clamp(1.15rem, 5vw, 1.35rem); }
  .ss-desc { margin-bottom: 1.3rem; max-width: none; }

  .ss-features { margin-bottom: 1.4rem; }
  .ss-feature { padding: .5rem .8rem .5rem .5rem; }
  .ss-feature-icon { width: 30px; height: 30px; }

  .ss-cta-row { flex-direction: column; align-items: stretch; }
  .ss-cta, .ss-cta-secondary { width: 100%; }
  .ss-cta-label { flex: 1; text-align: center; }

  .ss-visual-frame img { object-position: 62% 40%; }

  .ss-trust { flex-direction: column; align-items: flex-start; gap: .75rem; padding: .9rem 1.15rem; }
  .ss-trust-item::after { display: none; }
}

/* ══ ACCESSIBILITY: reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  .ss-eyebrow, .ss-line-inner, .ss-subhead, .ss-desc, .ss-feature, .ss-cta, .ss-cta-secondary, .ss-visual, .ss-trust {
    transition: opacity .4s ease !important; transform: none !important;
  }
  .ss-feature-icon::after { animation: none !important; display: none; }
  .ss-sweep, .ss-loaded .ss-visual-frame img, .ss-line-inner.ss-accent, .ss-particle, .ss-pulse, .ss-node-pulse { animation: none !important; }
  .ss-particles, .ss-pulses { display: none; }
  .ss-network { transition: none !important; opacity: .16 !important; }
  .ss-bg, .ss-visual-frame, .ss-content, .ss-network { transition: none !important; }
  .ss-feature:hover, .ss-feature:hover .ss-feature-icon { transform: none !important; }
  .ss-eyebrow:hover .ss-eyebrow-text { letter-spacing: .15em; }
  .ss-cta::after, .ss-cta-secondary::after { display: none; }
  .ss-trust-item, .ss-trust-icon, .ss-trust-text { transition: none !important; }
}

/* ══ LOW-END MOBILE: decorative background-position sweep/drift forces a
   repaint every frame and (where paired) costs extra compositing via
   mix-blend-mode; simplify it away below the tablet breakpoint regardless
   of the user's reduced-motion preference, since most low-end-phone users
   won't have that OS setting enabled. Network dot-grid, node pulses and
   the scattered orange pulses are dropped here too — none are essential
   on a small screen and it keeps low-end mobile paint-cheap ══ */
@media (max-width: 760px) {
  .ss-sweep { animation: none !important; mix-blend-mode: normal; }
  .ss-network, .ss-pulses { display: none; }
}

/* ══ LOW-POWER MODE: same sweep/decoration simplification as the mobile
   breakpoint above, keyed off device capability (.low-power-mode)
   instead of viewport width ══ */
.low-power-mode .ss-sweep { animation: none !important; mix-blend-mode: normal; }
.low-power-mode .ss-network, .low-power-mode .ss-pulses { display: none; }