/* ============================================================
   APEX ALPHA GRAPHIX — V4 LIVE-3D LAYER + FINAL AUTHORITY
   "Precision Is the Identity" — physical, tactile, technical.
   Loaded LAST on every page. Owns:
   - The single spacing system (one gutter, one wrap width,
     one section rhythm, one grid gap, one card padding)
   - The header / mobile-nav system (mobile-first: the safe
     layout is the default, desktop is the enhancement)
   - Hero: the V3 photographic composition on EVERY viewport
     (the 3D cut-reveal stage was shelved in round 2)
   - Material Laboratory, Process 3D stage, before/after drag
   - Gallery light sweep, portfolio parallax, section rises
   - Physical micro-interactions (press tension, edge sweeps)
   Red #E10600 is functional only: cut lines, edges, CTAs.
   No vertical red line exists in page flow — the cut line
   lives inside the 3D canvas, nowhere else.
   ============================================================ */

/* ================= THE SPACING SYSTEM =================
   Every container, section and grid on every page resolves
   to these tokens. One gutter: 24px desktop / 20px phone.
   One wrap: 1360px. One section rhythm + one tight rhythm. */
:root{
  --v4-spring:cubic-bezier(.34,1.45,.5,1);
  --gutter:1.5rem;
  --wrap-w:1360px;
  --sec:clamp(4.5rem,8vw,6.5rem);
  --sec-tight:clamp(3.25rem,6vw,4.5rem);
  --gap:1.25rem;
  --hdr-h:76px;
}
@media(max-width:900px){ :root{ --hdr-h:66px; } }
@media(max-width:560px){ :root{ --gutter:1.25rem; } }

/* one container — header, heroes, sections, footer, bands */
.wrap,.v3-wrap,.header-in,.page-hero .wrap,.cta-band .wrap,
.site-footer .wrap,.v3-hero__in,.v3-hero__meta{
  width:min(var(--wrap-w),calc(100% - var(--gutter)*2));
  margin-inline:auto;
}

/* one section rhythm */
.section{padding:var(--sec) 0}
.section--tight{padding:var(--sec-tight) 0}
.v3-sec{padding:var(--sec) 0}
.v3-sec--tight{padding:var(--sec-tight) 0}
.v3-principles{padding:var(--sec) 0}
.v3-commercial{padding:var(--sec) 0}
.cta-band{padding:var(--sec-tight) 0}
.page-hero{padding:calc(var(--hdr-h) + clamp(2.75rem,6vw,4.25rem)) 0 clamp(3rem,6vw,4.5rem)}

/* one grid gap + one card padding */
.grid,.steps,.contact-cards,.price-teaser,.mini-gallery,
.pf-grid,.g-grid,.chapter,.v4-lab__grid{gap:var(--gap)}
.svc-card .card-body{padding:1.5rem}
.step{padding:1.5rem}
.contact-card{padding:1.5rem}
.price-chip{padding:1.25rem 1.5rem}
.v3-head{margin-bottom:3rem}

/* footer: one top rhythm on every page (was double-stacked
   on inner pages: footer padding + grid padding) */
.site-footer{padding:var(--sec-tight) 0 0}
.footer-grid{padding:0 0 2.75rem;gap:2.5rem}
.footer-social{margin-top:0;padding:2rem 0 0}
.footer-bottom{margin-top:2.75rem}

/* price rows: hover tints only — no sideways text shift */
.price-row:hover{padding-left:0}

/* call-bar clearance: the fixed bar can never sit on content */
@media(max-width:900px){
  body{padding-bottom:calc(4.25rem + env(safe-area-inset-bottom))}
}

/* split-media frame offset would escape the gutter on mobile */
@media(max-width:900px){ .split-media::after{display:none} }

/* ================= HEADER — production geometry, V4 skin ====
   Round 3: brand placement matches the LIVE site exactly (the
   reference standard). Live measurements: header 76px (66px at
   <=900px); container min(1280px,94%); brand lockup = logo at
   52px height + name 1.02rem/.14em + tagline .58rem/.3em;
   nav pushed right by margin-left:auto; phone + quote CTA
   after it. Mobile (<=900px, the base here): logo 42px,
   tagline and CTA retire — quote/call live in the menu and
   the call bar, exactly as on the live site — hamburger at
   the right edge. Compaction tiers 901-1249 / 901-1149 /
   901-999 are ported from the live stylesheet so the row
   fits at every desktop width. The panel still opens from
   EITHER contract — header.open (homepage, v3.js) or
   nav.open (inner pages, main.js). */
.site-header{height:var(--hdr-h);transition:background .35s ease,border-color .35s ease}
.site-header.open,.site-header:has(.main-nav.open){
  z-index:500;background:rgba(10,10,10,.94);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:var(--v3-line-soft);
}
.header-in{
  width:min(1280px,94%);height:100%;
  padding-top:0;padding-bottom:0;gap:1.4rem;
}
.brand{gap:.7rem;flex:none;margin-right:0}
.brand img{width:auto;height:42px;object-fit:contain}
.brand-text{line-height:1.05}
.brand-name{font-size:1.02rem;letter-spacing:.14em;white-space:nowrap;display:block}
.brand-tag{display:none;font-size:.58rem;letter-spacing:.3em;margin-top:3px}
.main-nav{margin-left:auto}
.nav-toggle{display:flex;flex:none;margin-left:auto}
.header-cta{display:none}
.header-phone{display:none}
.header-cta .btn{
  display:inline-flex;white-space:nowrap;flex:none;
  padding:.62rem 1.05rem;font-size:.8rem;letter-spacing:.1em;
}
.site-header .main-nav{
  position:fixed;top:var(--hdr-h);left:0;right:0;bottom:auto;z-index:60;
  background:rgba(8,8,8,.985);border-bottom:1px solid var(--v3-line);
  padding:.4rem var(--gutter) 5.25rem;
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;
  box-shadow:0 30px 50px rgba(0,0,0,.5);
}
.site-header.open .main-nav,.site-header .main-nav.open{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:60;
}
.main-nav .nav-list{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  list-style:none;margin:0;padding:0;
}
.main-nav .nav-list>li{border-bottom:1px solid var(--v3-line-soft)}
.main-nav .nav-link{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:var(--font-display);font-size:1.5rem;letter-spacing:.05em;
  padding:.8rem 0;text-transform:uppercase;
}
.main-nav .nav-link::after{display:none}
.main-nav .dropdown{
  position:static;transform:none;left:auto;top:auto;min-width:0;width:auto;
  background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:0;margin:0;opacity:1;visibility:visible;pointer-events:auto;display:none;
}
.main-nav .has-dropdown.open .dropdown{display:block;padding:.1rem 0 .9rem}
.main-nav .dropdown a{
  display:block;padding:.55rem 0 .55rem 1.1rem;
  border-left:2px solid var(--v3-line-soft);border-radius:0;
}
.main-nav .dropdown a:hover{border-left-color:var(--v3-red);background:rgba(255,255,255,.04)}
/* quote + call rows injected into the mobile menu by v4.js */
.nav-quote-item{display:none}
.main-nav .nav-quote-item{display:block;border-bottom:0;padding-top:1.15rem}
.nav-quote-btn{
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#0a0a0a;text-decoration:none;
  font-weight:800;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1rem 1.2rem;transition:background .25s,color .25s;
}
.nav-quote-btn:hover{background:var(--v3-red);color:#fff}
.nav-call-link{
  display:flex;align-items:center;justify-content:center;margin-top:.6rem;
  border:1px solid var(--v3-line);color:#fff;text-decoration:none;
  font-weight:800;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1.2rem;transition:border-color .25s;
}
.nav-call-link:hover{border-color:var(--v3-red)}
@media(min-width:901px){
  .brand img{height:52px}
  .brand-tag{display:block}
  .nav-toggle{display:none}
  .header-cta{display:flex;align-items:center;gap:.7rem;flex:none}
  .header-phone{display:inline-flex}
  .site-header .main-nav{
    position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    background:transparent;border:0;padding:0;max-height:none;overflow:visible;z-index:auto;
    box-shadow:none;
  }
  .main-nav .nav-list{flex-direction:row;align-items:center;gap:1.7rem}
  .main-nav .nav-list>li{border-bottom:0}
  .main-nav .nav-link{
    display:inline-flex;width:auto;justify-content:flex-start;
    font-family:var(--font-body);font-size:.8rem;font-weight:800;letter-spacing:.18em;
    padding:.4rem 0;
  }
  .main-nav .nav-link::after{display:block}
  .main-nav .dropdown{
    position:absolute;top:calc(100% + .9rem);left:50%;transform:translate(-50%,8px);
    min-width:300px;width:auto;background:#101010;border:1px solid var(--v3-line);
    box-shadow:0 24px 60px rgba(0,0,0,.55);padding:.6rem;
    opacity:0;visibility:hidden;pointer-events:none;display:block;
    transition:opacity .25s,transform .25s,visibility .25s;
  }
  .main-nav .has-dropdown:hover .dropdown,
  .main-nav .has-dropdown:focus-within .dropdown,
  .main-nav .has-dropdown.open .dropdown{
    opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;
  }
  .main-nav .dropdown a{padding:.65rem .8rem;border-left:2px solid transparent}
  .main-nav .nav-quote-item{display:none}
}
/* compaction tiers ported from the live stylesheet — the full
   desktop row only fits from ~1250px up; below that every
   element steps down a size, and the phone number, then the
   quote button, retire gracefully instead of clipping. */
@media(min-width:901px) and (max-width:1249px){
  .header-in{gap:.9rem}
  .brand{gap:.6rem}
  .brand img{height:46px}
  .brand-name{font-size:.92rem;letter-spacing:.1em}
  .brand-tag{font-size:.53rem;letter-spacing:.18em}
  .main-nav .nav-list{gap:.9rem}
  .main-nav .nav-link{letter-spacing:.12em}
  .header-cta{gap:.55rem}
}
@media(min-width:901px) and (max-width:1149px){
  .header-phone span{display:none}
}
@media(min-width:901px) and (max-width:999px){
  .header-cta .btn{display:none}
}

/* ================= micro-interactions: physical press ================= */
.btn,.lx-btn,.v3-btn,.pf-filter,.filter-btn,.v3-areas a,.social-link,.v3-quote-alt a{
  transition:transform .38s var(--v4-spring),background .28s,color .28s,border-color .28s,box-shadow .28s;
}
.btn:active,.lx-btn:active,.v3-btn:active{ transform:scale(.975) translateY(1px); }
.pf-filter:active,.filter-btn:active{ transform:scale(.96); }
.v3-areas a:active,.social-link:active{ transform:scale(.96); }
.price-row{ transition:background .25s,transform .38s var(--v4-spring); }
.price-row:active{ transform:scale(.995); }
.chapter,.v3-principle,.v3-commercial__val{ transition:transform .38s var(--v4-spring); }
.pf-item,.g-item{ transition:opacity .35s var(--v3-ease),transform .38s var(--v4-spring); }
.pf-item:active,.g-item:active{ transform:scale(.99); }

/* red edge sweep on primary CTAs — hover AND keyboard focus.
   The cut line runs the bottom edge of the button itself. */
.v3-btn--solid,.btn--gold,.btn--red{ position:relative;overflow:hidden; }
.v3-btn--solid::after,.btn--gold::after,.btn--red::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--v3-red);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--v3-ease);pointer-events:none;
}
.v3-btn--solid:hover::after,.btn--gold:hover::after,.btn--red:hover::after,
.v3-btn--solid:focus-visible::after,.btn--gold:focus-visible::after,.btn--red:focus-visible::after{
  transform:scaleX(1);transform-origin:0 50%;
}

/* ================= section rise (one-time, 12px, gentle) ====
   v4.js adds .v4-rise only when JS + IO are available, so a
   no-JS page is never left invisible. Fires once, then done. */
.v4-rise{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s var(--v3-ease)}
.v4-rise.v4-in{opacity:1;transform:none}
[data-v3-reveal]{transform:translateY(12px)}
[data-v3-reveal].in{transform:none}

/* ================= gallery light sweep =================
   A highlight that tracks the pointer across the vinyl surface.
   Transform/opacity only; the layer itself never intercepts. */
.pf-item,.g-item{ isolation:isolate; }
.v4-light{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .45s ease;will-change:transform;
}
.v4-light i{
  position:absolute;top:0;left:0;width:150%;padding-top:150%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 34%,transparent 62%);
  mix-blend-mode:soft-light;
}
.pf-item:hover .v4-light,.pf-item:focus-visible .v4-light,
.g-item:hover .v4-light,.g-item:focus-visible .v4-light{ opacity:1; }
.pf-item figcaption,.g-item figcaption{ z-index:2; }

/* gentle scroll parallax on portfolio imagery — desktop,
   fine pointer only; driven by the --plx var from v4.js */
@media(hover:hover) and (pointer:fine) and (min-width:901px){
  .pf-item img{transform:translate3d(0,var(--plx,0px),0) scale(1.14)}
  .pf-item:hover img,.pf-item:focus-visible img{transform:translate3d(0,var(--plx,0px),0) scale(1.19)}
  .g-item img:not(.swap-img){transform:translate3d(0,var(--plx,0px),0) scale(1.14)}
  .g-item:hover img:not(.swap-img),.g-item:focus-visible img:not(.swap-img){transform:translate3d(0,var(--plx,0px),0) scale(1.19)}
}

/* ================= HERO — photographic, every viewport ====
   Round 2: the 3D cut-reveal stage is SHELVED (owner's call).
   The hero is the V3 photographic composition everywhere —
   headline block, framed bmw-carbon-detail photo band, meta
   row. No stage markup, no stage CSS, no hero scene download.
   .v3-hero__img is NEVER hidden by mode: data-v4-mode now
   governs only the Lab and Process scenes. */
/* mobile hero: clear the fixed header with a chosen gap */
@media(max-width:900px){
  .v3-hero__in{padding-top:calc(var(--hdr-h) + 2.4rem)}
}
/* Round 3 — mobile stacking GUARANTEE. These rules repeat the
   v3.css <=900px hero block at higher specificity (.v3-hero X,
   0,2,0 beats 0,1,0) in the last-loaded sheet, so the stacked
   mobile composition — headline block, full-width photo band,
   meta row — is unconditional: no desktop hero rule from any
   earlier layer can squeeze the split layout into a phone. */
@media(max-width:900px){
  .v3-hero{justify-content:flex-start}
  .v3-hero .v3-hero__img{
    position:relative;width:100%;height:46svh;min-height:320px;
    order:2;animation:none;
  }
  .v3-hero .v3-hero__img img{object-position:50% 26%}
  .v3-hero .v3-hero__img::before{background:linear-gradient(0deg,var(--v3-ink),transparent 45%)}
  .v3-hero .v3-hero__in{order:1}
  .v3-hero .v3-hero__meta{order:3;margin-top:2.2rem}
  .v3-hero h1{font-size:clamp(3.4rem,17vw,5.6rem)}
}
@media(max-width:560px){
  .v3-hero__meta{
    gap:.55rem 1.25rem;letter-spacing:.18em;font-size:.7rem;
    margin-top:2rem;padding:1.1rem 0 1.3rem;
  }
  /* eyebrow: tighter tracking keeps it to two lines max, and the
     red rule pins to the FIRST line instead of floating centred
     beside the middle line (v3.css used align-items:center) */
  .v3-hero__kick{
    align-items:flex-start;gap:.7rem;
    font-size:.64rem;letter-spacing:.2em;line-height:1.75;
  }
  .v3-hero__kick i{width:2.2rem;margin-top:.42rem}
}

/* ================= MATERIAL LABORATORY ================= */
.v4-lab{ position:relative; }
.v4-lab__grid{
  display:grid;grid-template-columns:1.55fr 1fr;gap:2.2rem;align-items:start;margin-top:1rem;
}
@media(max-width:960px){ .v4-lab__grid{ grid-template-columns:1fr; } }
.v4-lab__stage{
  position:relative;background:#0d0d0d;border:1px solid var(--v3-line);
  aspect-ratio:16/10.4;overflow:hidden;
}
.v4-lab__stage canvas{ display:block;width:100%;height:100%;cursor:grab;touch-action:none; }
.v4-lab__stage canvas:active{ cursor:grabbing; }
html:not([data-v4-mode="3d"]) .v4-lab__stage{ display:none; }
.v4-lab__hint{
  position:absolute;left:1rem;bottom:.9rem;z-index:3;pointer-events:none;
  font-size:.66rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55);
  display:flex;align-items:center;gap:.6rem;
}
.v4-lab__hint::before{ content:"";width:8px;height:8px;background:var(--v3-red);flex:none; }
.v4-lab__fallback{ display:none; }
html:not([data-v4-mode="3d"]) .v4-lab__fallback{ display:block; }
.v4-lab__fallback img{ width:100%;aspect-ratio:16/10.4;object-fit:cover;border:1px solid var(--v3-line); }
.v4-lab__fallback figcaption{
  font-size:.7rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--v3-faint);margin-top:.7rem;
}
/* controls */
.v4-lab__panel{ border:1px solid var(--v3-line);background:var(--v3-panel);padding:1.6rem; }
.v4-lab__finishes{ display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem; }
.v4-finish{
  font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--v3-dim);border:1px solid var(--v3-line);
  padding:.6rem .9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;
  transition:color .25s,border-color .25s,background .25s,transform .38s var(--v4-spring);
}
.v4-finish:active{ transform:scale(.96); }
.v4-finish i{ width:12px;height:12px;flex:none;border:1px solid rgba(255,255,255,.25); }
.v4-finish:hover{ color:#fff;border-color:rgba(255,255,255,.5); }
.v4-finish[aria-pressed="true"]{ background:#fff;color:#0a0a0a;border-color:#fff; }
.v4-lab__readout{ border-top:2px solid var(--v3-red);padding-top:1.1rem;margin-bottom:1.4rem; }
.v4-lab__name{ font-family:var(--font-display);font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.05; }
.v4-lab__behave{ color:#dcdcd6;font-size:.97rem;margin-top:.55rem;line-height:1.55; }
.v4-lab__tech{ color:var(--v3-faint);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:.7rem; }
.v4-ctl{ margin-top:1.1rem; }
.v4-ctl label{
  display:flex;justify-content:space-between;font-size:.68rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--v3-dim);margin-bottom:.5rem;
}
.v4-ctl label output{ color:#fff; }
.v4-ctl input[type="range"]{
  width:100%;appearance:none;-webkit-appearance:none;height:2px;background:var(--v3-line);outline-offset:4px;cursor:pointer;
}
.v4-ctl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;background:#0a0a0a;border:2px solid var(--v3-red);cursor:grab;
}
.v4-ctl input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;background:#0a0a0a;border:2px solid var(--v3-red);border-radius:0;cursor:grab;
}
.v4-toggle{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:1.3rem;cursor:pointer;
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--v3-dim);
  background:none;border:0;padding:0;font-family:inherit;
}
.v4-toggle .v4-toggle__box{
  width:38px;height:20px;border:1px solid var(--v3-line);position:relative;flex:none;transition:background .25s,border-color .25s;
}
.v4-toggle .v4-toggle__box::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;transition:transform .3s var(--v4-spring);
}
.v4-toggle[aria-pressed="true"]{ color:#fff; }
.v4-toggle[aria-pressed="true"] .v4-toggle__box{ background:var(--v3-red);border-color:var(--v3-red); }
.v4-toggle[aria-pressed="true"] .v4-toggle__box::after{ transform:translateX(18px); }
.v4-lab__note{ color:var(--v3-faint);font-size:.86rem;margin-top:1.3rem;line-height:1.55; }

/* inner-page lab wrapper (service pages use style.css scaffolding) */
.v4-lab--page{ background:var(--v3-bg);border-block:1px solid var(--v3-line-soft); }
.v4-lab--page .v4-lab__head h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.5vw,3.2rem);color:#fff;margin:.8rem 0 .6rem;line-height:1.02;
}
.v4-lab--page .v4-lab__head p{ color:var(--v3-dim);max-width:56ch; }

/* ================= PROCESS — 3D stage + static fallback ================= */
.v4-proc-stage{
  position:relative;background:#0d0d0d;border:1px solid var(--v3-line);
  aspect-ratio:16/8.6;overflow:hidden;margin-bottom:2.2rem;display:none;
}
html[data-v4-mode="3d"] .v4-proc-stage{ display:block; }
.v4-proc-stage canvas{ display:block;width:100%;height:100%; }
.v4-proc-tag{
  position:absolute;left:1rem;bottom:.9rem;z-index:3;pointer-events:none;
  font-size:.66rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.55);
  display:flex;align-items:center;gap:.6rem;
}
.v4-proc-tag::before{ content:"";width:8px;height:8px;background:var(--v3-red);flex:none; }
.v4-proc-fallback{ margin:0 0 2.2rem;display:block; }
html[data-v4-mode="3d"] .v4-proc-fallback{ display:none; }
.v4-proc-fallback img{ width:100%;aspect-ratio:16/8.6;object-fit:cover;border:1px solid var(--v3-line); }
.v4-proc-fallback figcaption{
  font-size:.7rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--v3-faint);margin-top:.7rem;
}
.process__step{ background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;width:100%; }
.process__step[data-stage-btn]{ cursor:pointer; }
.process__step .process__no{ transition:color .3s; }
.process__step[aria-pressed="true"] .process__no{ color:var(--v3-red); }
.process__step[aria-pressed="true"] h3{ color:#fff; }
.process__step:focus-visible{ outline:2px solid var(--v3-red);outline-offset:4px; }
@media(max-width:560px){ .v4-proc-stage,.v4-proc-fallback img{ aspect-ratio:4/3.4; } }

/* ================= BEFORE / AFTER — honest drag ================= */
.v4-ba{ position:relative;margin-top:1rem; }
.v4-ba__frame{
  position:relative;overflow:hidden;border:1px solid var(--v3-line);
  aspect-ratio:16/8.4;background:#000;touch-action:none;user-select:none;
}
@media(max-width:700px){ .v4-ba__frame{ aspect-ratio:4/3.6; } }
.v4-ba__img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none; }
.v4-ba__img--after{ clip-path:inset(0 0 0 var(--ba-x,50%)); }
.v4-ba__tag{
  position:absolute;top:1rem;z-index:4;font-size:.66rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:#fff;background:rgba(8,8,8,.78);padding:.45rem .7rem;pointer-events:none;
}
.v4-ba__tag--before{ left:1rem;border-left:2px solid #fff; }
.v4-ba__tag--after{ right:1rem;border-right:2px solid var(--v3-red); }
.v4-ba__handle{
  position:absolute;top:0;bottom:0;left:var(--ba-x,50%);width:2px;background:var(--v3-red);z-index:5;
  transform:translateX(-1px);cursor:ew-resize;border:0;padding:0;
}
.v4-ba__handle::after{
  content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--v3-red);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.1em;
  padding:.5rem .55rem;white-space:nowrap;
}
.v4-ba__handle:focus-visible{ outline:2px solid #fff;outline-offset:3px; }
.v4-ba__note{ color:var(--v3-faint);font-size:.88rem;margin-top:.9rem;max-width:70ch; }
.v4-ba__note b{ color:#dcdcd6; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  .btn:active,.v3-btn:active,.pf-item:active,.g-item:active{ transform:none; }
  .v4-light{ display:none; }
  .v4-rise{opacity:1;transform:none;transition:none}
  .pf-item img,.g-item img{transform:none !important}
}

/* V4 final authority: eyebrow labels unified to the precision label system
   (style.css set them in Cormorant italic — V1 gold-era language; V4 labels are Manrope) */
.eyebrow{font-family:'Manrope',Helvetica,Arial,sans-serif !important;font-style:normal !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.32em}