/* =====================================================================
   Spray Yard V3: motion layer on top of styles.css
   - Readable and static by default (no JS / reduced motion).
   - html.motion = motion allowed. html.full = desktop with a fine pointer
     (scroll-linked hero/statement fade, cursor ring, magnetic buttons).
     html.lite = phones, tablets and touch screens: simple fade-ins only.
   - Only transform and opacity are animated on scroll. No pinning, no
     scroll-jacking, no animated filters/blur/backdrop-filter.
   ===================================================================== */
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --chrome-text: linear-gradient(100deg, #6f6f77 0%, #f7f7f9 16%, #9c9ca4 30%, #ffffff 44%, #5f5f67 58%, #e4e4e8 72%, #8a8a92 86%, #f2f2f4 100%);
}
html { scroll-padding-top: calc(var(--header-h) + 18px); }
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* ---------- performance: no live blur behind moving content ---------- */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,10,11,.9); }
.site-header.is-scrolled { background: rgba(10,10,11,.96); }
.reel-item figcaption { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,10,11,.9); }
.rfq { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,10,11,.9); }

/* ---------- shared bits ---------- */
.chrome-text, .chrome-words .sw > span {
  background: var(--chrome-text); background-size: 240% 100%; background-position: 35% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.w, .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span, .sw > span { display: inline-block; }

.scroll-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; will-change: transform; }

/* reveal on scroll (only hidden when motion is on) */
html.motion [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
html.motion [data-reveal].in { opacity: 1; transform: none; }
html.motion.full .split-h .w > span { transform: translate3d(0, 108%, 0); transition: transform .9s var(--ease); transition-delay: calc(var(--wi) * .05s); }
html.motion.full .split-h .muted-h .w > span { transition-delay: calc(.12s + var(--wi) * .05s); }
html.motion.full .split-h.in .w > span { transform: none; }
/* lite: whole-block fades only */
html.motion.lite [data-reveal] { transform: translate3d(0, 14px, 0); transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: 0s; }
html.motion.lite .split-h { opacity: 0; transition: opacity .6s ease-out; }
html.motion.lite .split-h.in { opacity: 1; }

/* magnetic + tilt (desktop only) */
html.full [data-magnetic] { transition: transform .45s var(--ease), background-color .2s, border-color .2s, color .2s; }
html.full [data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.reel-item figure[data-tilt] { transform-style: flat; }
html.lite .sheen::after { display: none; }

/* =====================================================================
   CURSOR RING (desktop, fine pointer; added by JS)
   .cursor-ring is positioned by JS (transform only); .cr is the visual.
   Over the coverage section it becomes a mini radar.
   ===================================================================== */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor [data-tilt] { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; will-change: transform; transform: translate3d(-200px, -200px, 0); }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); transition: opacity .25s; }
.cursor-ring { width: 0; height: 0; }
.cr { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,153,0,.65); transform: scale(var(--rs, 1)); transition: transform .35s var(--ease), background-color .3s, border-color .3s, opacity .25s; }
.cr-glow, .cr-sweep, .cr-cross, .cr-blip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cr-glow { inset: -1px; border-radius: 50%; box-shadow: 0 0 14px 2px rgba(255,153,0,.45), inset 0 0 10px rgba(255,153,0,.25); }
.cr-sweep { inset: 0; border-radius: 50%; overflow: hidden; background: conic-gradient(from 0deg, rgba(255,153,0,.75) 0deg, rgba(255,153,0,.18) 50deg, transparent 95deg, transparent 360deg); }
.cr-cross { inset: 0; border-radius: 50%; background:
  linear-gradient(rgba(255,153,0,.35), rgba(255,153,0,.35)) 50% 50% / 100% 1px no-repeat,
  linear-gradient(rgba(255,153,0,.35), rgba(255,153,0,.35)) 50% 50% / 1px 100% no-repeat,
  radial-gradient(circle, transparent 0 31%, rgba(255,153,0,.35) 32% 33.5%, transparent 34.5%); }
.cr-blip { width: 4px; height: 4px; left: 66%; top: 30%; margin: -2px; border-radius: 50%; background: #ffd08a; box-shadow: 0 0 6px #ff9900; }
html.cursor-hover .cr { --rs: 1.75; background: rgba(255,153,0,.12); border-color: rgba(255,153,0,.9); }
html.cursor-media .cr { --rs: 2.2; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.7); }
html.cursor-hide .cursor-dot, html.cursor-hide .cr { opacity: 0; }
/* radar mode: sweep spins only while active */
html.cursor-radar .cr { --rs: 1.9; border-color: rgba(255,153,0,.9); background: rgba(255,153,0,.06); }
html.cursor-radar.cursor-radar-map .cr { --rs: 2.5; }
html.cursor-radar .cr-glow, html.cursor-radar .cr-sweep, html.cursor-radar .cr-cross { opacity: 1; }
html.cursor-radar .cr-blip { opacity: 1; animation: crblip 1.4s linear infinite; }
html.cursor-radar .cr-sweep { animation: spin 1.5s linear infinite; }
html.cursor-radar .cursor-dot { opacity: .9; }
@keyframes crblip { 0%, 55% { opacity: 0; } 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   HERO: side by side, copy left, photo right fading into the dark.
   Intro: photo fades + settles; headline words rise. Scroll: photo and
   copy fade out (opacity + slight scale) into "Sprayed. Not plated."
   ===================================================================== */
.hx { position: relative; isolation: isolate; margin-top: calc(var(--header-h) * -1); background: var(--bg); }
.hx-sticky { position: relative; min-height: min(100svh, 940px); display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); }
.hx-grid { position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 58%); mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 58%); }
.hx-media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-img { position: absolute; top: 0; bottom: 0; left: 42%; right: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.hx-img picture { display: block; width: 100%; height: 100%; }
.hx-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.hx-fade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,0) 24%), linear-gradient(180deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,0) 18%); }
.hx-caption { position: absolute; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); bottom: 34px; margin: 0; display: flex; gap: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #cfcfd6; }
.hx-inner { position: relative; width: 100%; padding-block: clamp(40px, 5vw, 80px) clamp(64px, 8vw, 110px); }
.hx-copy { max-width: 660px; }
.hx-eyebrow { align-items: flex-start; line-height: 1.7; }
.hx-eyebrow::before { margin-top: .8em; }
.hx-eyebrow .eb-break { display: block; }
.hx-eyebrow .eb-dot { display: none; }
.hx-title { font-size: clamp(2.6rem, min(5.6vw, 8.4vh), 5.6rem); font-weight: 800; font-stretch: 106%; letter-spacing: -0.03em; line-height: .95; text-wrap: initial; }
.hx-title .ln { display: inline; }
.hx-lead { margin-top: clamp(16px, 2.6vh, 28px); font-size: clamp(1rem, 1.2vw, 1.1rem); color: #cfcfd6; max-width: 58ch; }
.hx-ctas { margin-top: clamp(20px, 3.2vh, 34px); }
.hx-spec { margin-top: clamp(22px, 3.6vh, 44px); }

/* scroll-linked layers (JS writes transform/opacity on these three only) */
html.motion.full .hx-media, html.motion.full .hx-copy { will-change: transform, opacity; }

/* intro: photo fades in and settles, words rise, supporting copy fades */
html.motion .hx-img { opacity: 0; transform: scale(1.06); transform-origin: 60% 40%; }
html.motion .hx-title .w > span { transform: translate3d(0, 110%, 0); }
html.motion .hx-eyebrow, html.motion .hx-lead, html.motion .hx-ctas, html.motion .hx-spec, html.motion .hx-caption { opacity: 0; transform: translate3d(0, 16px, 0); }
html.is-ready .hx-img { opacity: 1; transform: none; transition: opacity 1.3s ease-out, transform 1.8s var(--ease); }
html.is-ready .hx-title .w > span { transform: none; transition: transform 1s var(--ease) calc(.12s + var(--wi) * .06s); }
html.is-ready .hx-title .ln + .ln .w > span { transition-delay: calc(.3s + var(--wi) * .06s); }
html.is-ready .hx-eyebrow, html.is-ready .hx-lead, html.is-ready .hx-ctas, html.is-ready .hx-spec, html.is-ready .hx-caption { opacity: 1; transform: none; transition: opacity .8s ease-out, transform .9s var(--ease); }
html.is-ready .hx-eyebrow { transition-delay: .05s; }
html.is-ready .hx-lead { transition-delay: .55s; }
html.is-ready .hx-ctas { transition-delay: .68s; }
html.is-ready .hx-spec { transition-delay: .8s; }
html.is-ready .hx-caption { transition-delay: .9s; }
/* lite: no word-by-word, just one soft fade of the copy */
html.motion.lite .hx-title .w > span { transform: none; }
html.motion.lite .hx-title { opacity: 0; }
html.is-ready.lite .hx-title { opacity: 1; transition: opacity .7s ease-out .1s; }
html.motion.lite .hx-img { transform: none; }

@media (max-width: 960px) {
  .hx-sticky { display: block; min-height: 0; }
  .hx-media { position: relative; inset: auto; height: 108vw; max-height: 580px; min-height: 330px; }
  .hx-img { left: 0; -webkit-mask-image: none; mask-image: none; }
  .hx-img img { object-position: 50% 8%; }
  .hx-fade { background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,11,.45) 22%, rgba(10,10,11,0) 50%), linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,0) 22%); }
  .hx-caption { right: var(--gutter); bottom: 14px; font-size: .62rem; }
  .hx-eyebrow { font-size: .72rem; letter-spacing: .14em; line-height: 1.6; }
  .hx-inner { padding-block: 18px 40px; }
  .hx-grid { -webkit-mask-image: none; mask-image: none; opacity: .55; }
}

/* =====================================================================
   STATEMENT "Sprayed. Not plated." (short, overlaps the hero's tail)
   ===================================================================== */
.stmt { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 110px) clamp(40px, 5vw, 70px); text-align: center; overflow: clip; }
.stmt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 55%, rgba(255,255,255,.05), transparent 70%); pointer-events: none; }
.stmt .sec-code { justify-content: center; }
.stmt .sec-code::after { display: none; }
.stmt-title { margin: 16px 0 0; font-weight: 900; font-stretch: 120%; letter-spacing: -0.045em; line-height: .86; font-size: clamp(3rem, 10.5vw, 10.5rem); text-wrap: initial; }
.stmt-line { display: block; }
.stmt-sub { margin: 24px auto 0; max-width: 44ch; color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.25rem); }
/* desktop: overlap the hero's faded tail so it reads as one transition */
@media (min-width: 961px) {
  .stmt { margin-top: -14vh; padding-top: 0; }
  html.motion.full .stmt-line, html.motion.full .stmt .sec-code, html.motion.full .stmt-sub { opacity: 0; will-change: transform, opacity; }
}
/* lite + desktop fallbacks: one quick fade when it scrolls in */
html.motion.lite .stmt-inner { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s ease-out, transform .7s ease-out; }
html.motion.lite .stmt.in .stmt-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* one sheen pass when the statement arrives (desktop only, not looping) */
  html.motion.full .stmt.in .chrome-words .sw > span { animation: sheen 2.6s var(--ease-io) .2s 1 both; }
  @keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
}

/* ---------- services quick-jump ---------- */
.qj { position: relative; z-index: 2; padding-block: 0 clamp(28px, 4vw, 44px); }
.qj-inner { display: flex; align-items: center; justify-content: center; gap: 14px 18px; flex-wrap: wrap; }
.qj-label { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.qj-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qj-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; font-weight: 700; font-size: .9rem; line-height: 1.2; transition: border-color .2s, color .2s, background-color .2s; }
.qj-chip span { font-family: var(--mono); font-size: .7rem; color: var(--accent); letter-spacing: .06em; }
.qj-chip:hover, .qj-chip:focus-visible { border-color: var(--accent); background: rgba(255,153,0,.1); }
.qj-chip--lead { border-color: rgba(255,153,0,.55); }
@media (max-width: 960px) {
  .qj-inner { justify-content: flex-start; flex-wrap: nowrap; padding-inline: 0; }
  .qj-label { display: none; }
  .qj-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px var(--gutter); width: 100%; }
  .qj-list::-webkit-scrollbar { display: none; }
  .qj-chip { white-space: nowrap; }
}

/* =====================================================================
   01 CHROME: compact row (no pinning). Five steps as a short list;
   the photo plays the five stages once on enter (opacity only) and
   hovering/focusing a step shows that stage.
   ===================================================================== */
.v2caps { padding-top: clamp(56px, 7vw, 96px); }
.v2caps .caps-head { margin-bottom: clamp(32px, 4vw, 56px); }
.v2caps .caps-head h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); font-weight: 850; letter-spacing: -0.035em; line-height: .95; }
.chrome-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.cr-media { display: flex; flex-direction: column; gap: 10px; }
.cr-copy { position: relative; }
.cr-copy .cap-num { top: -40px; right: 0; font-size: clamp(6rem, 11vw, 10rem); }
.cr-copy h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 850; letter-spacing: -0.03em; line-height: .98; }
.cr-lead { color: var(--muted); font-size: 1.04rem; max-width: 52ch; margin: 16px 0 0; }
.cr-copy .cap-list { margin: 18px 0 18px; }
.story-hint { margin: 0 0 8px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.story-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: #111; overflow: hidden; }
.story-frame .reg { z-index: 4; }
.story-layer { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; }
.story-layer picture, .story-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-c img { object-position: 50% 30%; }
.sl-prep, .sl-base, .sl-b, .sl-c { opacity: 0; }
html.motion .sl-prep, html.motion .sl-base, html.motion .sl-b, html.motion .sl-c { transition: opacity .6s ease-out; }
.chrome-row[data-active="1"] .sl-prep, .chrome-row[data-active="2"] .sl-base { opacity: 1; }
.chrome-row[data-active="4"] .sl-b, .chrome-row[data-active="5"] .sl-c { opacity: 1; }
.story-glint { position: absolute; inset: 0; z-index: 3; border-radius: 10px; pointer-events: none; overflow: hidden; }
.story-glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: translate3d(-160%, 0, 0) skewX(-12deg); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .chrome-row[data-active="3"] .story-glint::before { animation: glint 1.2s var(--ease-io) .15s 1 both; }
  @keyframes glint { 0% { transform: translate3d(-160%, 0, 0) skewX(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate3d(340%, 0, 0) skewX(-12deg); opacity: 0; } }
}
.story-hud { position: absolute; z-index: 5; left: 14px; bottom: 14px; padding: 10px 12px; background: rgba(10,10,11,.88); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 6px; min-width: 156px; }
.hud-stage { margin: 0 0 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hud-stage b { color: var(--accent); font-size: .88rem; }
.coat-stack { display: flex; flex-direction: column-reverse; gap: 3px; margin: 0; padding: 0; list-style: none; }
.coat-stack li { position: relative; height: 18px; border-radius: 3px; border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.coat-stack li::before { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.coat-stack li.on::before { transform: scaleX(1); }
.coat-stack li span { position: relative; z-index: 1; display: block; padding: 1px 8px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #e8e8ec; mix-blend-mode: difference; }
.coat-stack li[data-layer="1"]::before { background: #55555d; }
.coat-stack li[data-layer="2"]::before { background: #050506; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.coat-stack li[data-layer="3"]::before { background: var(--chrome); }
.coat-stack li[data-layer="4"]::before { background: linear-gradient(135deg, #ffe3a3 0%, #b07a1c 35%, #ffd77a 60%, #7a4f0e 100%); }
.coat-stack li[data-layer="5"]::before { background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); }
.story-note { margin: 0; text-align: center; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #77777f; }
.steps5 { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.steps5 .st { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); outline: none; cursor: default; }
.steps5 .st-num { font-family: var(--mono); font-size: .78rem; font-weight: 700; color: rgba(255,153,0,.55); padding-top: 3px; transition: color .3s; }
.steps5 .st-txt { color: var(--muted); font-size: .93rem; line-height: 1.5; }
.steps5 .st-txt strong { display: block; color: var(--text); font-family: var(--font-display); font-stretch: 112%; font-size: 1.02rem; font-weight: 750; }
html.motion .steps5 .st { opacity: .55; transition: opacity .35s; }
html.motion .steps5 .st.is-active, html.motion .steps5 .st:hover, html.motion .steps5 .st:focus-visible { opacity: 1; }
.steps5 .st.is-active .st-num, .steps5 .st:hover .st-num { color: var(--accent); }
.steps5 .st:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.story-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 22px 0 0; }
@media (min-width: 961px) {
  .story-frame { max-height: calc(100vh - var(--header-h) - 120px); }
  .steps5 .st-txt { font-size: .9rem; }
}
@media (max-width: 960px) {
  .chrome-row { grid-template-columns: minmax(0, 1fr); }
  .cr-copy .cap-num { top: -24px; font-size: 5rem; }
  .story-hud { left: 10px; bottom: 10px; padding: 8px 10px; min-width: 0; }
  .coat-stack { flex-direction: row; } .coat-stack li { flex: 1; height: 8px; } .coat-stack li span { display: none; }
  .hud-stage { margin-bottom: 6px; }
}

/* =====================================================================
   02-04 SERVICES: plain cards in normal flow (no stacking / pinning)
   ===================================================================== */
.services2 { padding-top: clamp(56px, 7vw, 96px); }
.services2-head { padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.services2-head h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-weight: 850; letter-spacing: -0.035em; line-height: .95; max-width: 16ch; }
.stack { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(28px, 4vw, 48px); }
.sc-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: min(58vh, 520px); background: linear-gradient(155deg, #19191c 0%, #0e0e10 60%); border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; }
.sc:nth-child(even) .sc-media { order: 2; }
.sc-media { position: relative; overflow: hidden; min-height: 300px; }
.sc-media picture, .sc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.full .sc-media img { transition: transform 1s var(--ease); }
html.full .sc-media:hover img { transform: scale(1.04); }
.sc-media .reg { z-index: 2; }
.sc-media .reg-tl { left: 14px; top: 14px; } .sc-media .reg-tr { right: 14px; top: 14px; } .sc-media .reg-bl { left: 14px; bottom: 14px; } .sc-media .reg-br { right: 14px; bottom: 14px; }
.sc-copy { position: relative; padding: clamp(26px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.sc-num { position: absolute; top: 12px; right: 26px; font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(5rem, 10vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,153,0,.3); pointer-events: none; }
.sc-copy h3 { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 850; letter-spacing: -0.025em; margin-bottom: 16px; }
.sc-copy > p:not(.batch-tag) { color: var(--muted); font-size: 1.04rem; max-width: 46ch; margin: 0; }
.services2 .specialist { margin-top: clamp(56px, 7vw, 96px); }
html.motion .sc { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s ease-out, transform .8s var(--ease); }
html.motion .sc.in { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .sc-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 16px; }
  .sc:nth-child(even) .sc-media { order: 0; }
  .sc-media { aspect-ratio: 4 / 3; min-height: 0; }
  .sc-num { font-size: 5.5rem; top: 0; }
}

/* =====================================================================
   NUMBERS
   ===================================================================== */
.numbers { border-block: 1px solid var(--line); background: linear-gradient(180deg, #0c0c0e, var(--bg)); }
.numbers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.num { padding: clamp(36px, 6vw, 80px) 0; text-align: center; }
.num + .num { border-left: 1px solid var(--line); }
.num-val { margin: 0; font-family: var(--font-display); font-weight: 900; font-stretch: 122%; font-size: clamp(2.8rem, 9vw, 8.5rem); line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.num-val small { font-size: .45em; letter-spacing: 0; }
.num-label { margin: 14px 0 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) { .num-label { font-size: .6rem; letter-spacing: .08em; padding-inline: 4px; } }

/* =====================================================================
   FEATURED WORK: native sideways scroll (no scroll-jacking)
   ===================================================================== */
.work-head { margin-bottom: 28px; }
.reel { overscroll-behavior-x: contain; }
html.full .reel { scroll-snap-type: x proximity; cursor: grab; scrollbar-width: none; }
html.full .reel::-webkit-scrollbar { display: none; }
html.full .reel.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
html.full .reel.is-dragging img { pointer-events: none; }
.reel-item img { transition: none; }
html.full .reel-item img { transition: transform .8s var(--ease); }
.work-meter { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.wm-bar { position: relative; flex: 0 0 220px; height: 2px; background: var(--line-strong); overflow: hidden; }
.wm-bar span { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.12); will-change: transform; }
.wm-txt { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 960px) { .work-meter { display: none; } }

/* =====================================================================
   RADAR blips (transform/opacity pulse instead of animated box-shadow)
   ===================================================================== */
.blip { position: absolute; z-index: 2; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent); }
.blip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,153,0,.7); opacity: 0; }
.b1 { left: 31%; top: 37%; } .b2 { left: 66%; top: 63%; } .b3 { left: 61%; top: 24%; }
@media (prefers-reduced-motion: no-preference) {
  .blip::after { animation: blip 3s ease-out infinite; }
  .b2::after { animation-delay: 1s; } .b3::after { animation-delay: 2s; }
  @keyframes blip { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(4.5); opacity: 0; } }
}
html.lite .sweep { animation-duration: 12s; }
html.full .radar { cursor: none; }

.footer-band p { background: var(--chrome-text); background-size: 260% 100%; background-position: 40% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
html.motion.full .footer-band p { will-change: transform; }

/* =====================================================================
   Reduced motion: everything static and readable
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .story-layer, .coat-stack li::before, [data-magnetic], [data-tilt] { transition: none !important; }
}

/* =====================================================================
   TICKER: refined hairline band (replaces the solid orange block)
   Thin dark band, hairline borders, small letter-spaced muted caps,
   small orange diamond separators, slow constant loop, soft edge fade.
   ===================================================================== */
.ticker { position: relative; background: transparent; color: #c9c7c2; border-block: 1px solid rgba(255,255,255,.08); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
.ticker-track { display: flex; width: max-content; }
.ticker ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker li { display: flex; align-items: center; gap: 30px; padding: 13px 0 13px 30px; font-family: var(--mono); font-stretch: normal; font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .28em; white-space: nowrap; color: #c9c7c2; }
.ticker li::after { content: ""; width: 4px; height: 4px; background: var(--accent); transform: rotate(45deg); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ticker-track { animation: ticker 70s linear infinite; will-change: transform; }
  html.motion .ticker:hover .ticker-track { animation-play-state: paused; }
  html.motion.lite .ticker-track { animation-duration: 60s; }
}
@keyframes ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 960px) { .ticker li { font-size: .64rem; letter-spacing: .22em; gap: 22px; padding: 11px 0 11px 22px; } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none !important; } }
.ticker-track { animation-duration: 70s; }

/* v3.1: show off the booth photo more in aerospace & defence */
.sector-media img { filter: grayscale(.35) contrast(1.05) brightness(.95); object-position: 60% 50%; }
.sector-media::after { background:
  linear-gradient(90deg, rgba(7,8,10,.9) 0%, rgba(7,8,10,.72) 38%, rgba(7,8,10,.42) 70%, rgba(7,8,10,.5) 100%),
  linear-gradient(180deg, rgba(7,8,10,.55) 0%, rgba(7,8,10,0) 22%, rgba(7,8,10,0) 78%, rgba(7,8,10,.6) 100%); }
.sector .blueprint { opacity: .45; }
.sector-copy h2, .sector-copy .section-intro { text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.sector-copy .section-intro { color: #d6d6dc; }
.rfq { background: rgba(10,10,11,.86); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
@media (max-width: 900px) {
  .sector-media::after { background: linear-gradient(180deg, rgba(7,8,10,.78) 0%, rgba(7,8,10,.7) 50%, rgba(7,8,10,.85) 100%); }
}

/* v4: capabilities intro removed, chrome row follows the ticker directly */
.v2caps { padding-top: clamp(40px, 5vw, 72px); }
.v2caps .chrome-row { border-top: 0; padding-top: 0; }