/* =====================================================
   CAR GRAPHENE COATING — "OBSIDIAN LAB" DESIGN SYSTEM
   v2.0 · Luxury automotive × material science
   Palette: obsidian / graphite / silver / emerald
   Type: Marcellus (display) · Manrope (body) · IBM Plex Mono (spec)
   ===================================================== */

:root {
  /* Surfaces — carbon black stack */
  --ink:        #0a0b0d;   /* carbon base */
  --ink-2:      #0d0f12;
  --ink-3:      #131519;
  --panel:      #17191e;
  --line:       rgba(255,255,255,0.10);
  --line-soft:  rgba(255,255,255,0.055);

  /* Text — WCAG-checked on --ink */
  --silver:     #f2f4f6;   /* headings   ~16.8:1 */
  --steel:      #bcc3cc;   /* body       ~9.6:1  */
  --mist:       #8f97a2;   /* secondary  ~5.6:1  */

  /* Accent — racing crimson (bold automotive) */
  --em:         #ff4655;   /* accent red — 5.5:1 on carbon, UI-safe */
  --em-deep:    #b30f24;
  --em-dim:     rgba(255,70,85,0.10);
  --em-line:    rgba(255,70,85,0.38);
  --em-grad:    linear-gradient(150deg,#ff5460 0%,#e01b31 55%,#b30f24 100%);

  /* Semantic states (never red on this theme) */
  --ok:         #2ecf7f;
  --ok-dim:     rgba(46,207,127,0.12);
  --ok-line:    rgba(46,207,127,0.35);

  /* Metals */
  --metal:      linear-gradient(115deg,#f7f9fb 0%,#c6cdd5 30%,#f7f9fb 52%,#99a2ac 78%,#eaeef2 100%);
  --gold:       #e7c164;

  /* Carbon-fibre weave (subtle, workshop texture) */
  --carbon:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.016) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);

  /* Type */
  --f-disp:     'Kanit', 'Arial Narrow', sans-serif;
  --f-body:     'Manrope', system-ui, sans-serif;
  --f-mono:     'IBM Plex Mono', ui-monospace, monospace;

  /* Rhythm */
  --sec-pad:    clamp(72px, 11vw, 150px);
  --wrap:       1240px;
  --r:          14px;
  --ease:       cubic-bezier(.22,.8,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001s !important; transition-duration:.001s !important; }
}
body {
  background:var(--ink);
  color:var(--steel);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
input,select,textarea { font:inherit; }
::selection { background:var(--em-deep); color:#fff; }

.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
.section { padding-block:var(--sec-pad); position:relative; }

.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.skip-link {
  position:fixed; top:-60px; left:16px; z-index:1000;
  background:var(--em-grad); color:#fff;
  padding:10px 18px; border-radius:8px; font-weight:700;
  transition:top .2s var(--ease);
}
.skip-link:focus { top:12px; }

/* Focus visibility */
:focus-visible { outline:2px solid var(--em); outline-offset:3px; border-radius:4px; }

/* ---------- Preloader ---------- */
#preloader {
  position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .5s var(--ease), visibility .5s;
}
#preloader.done { opacity:0; visibility:hidden; }
.pre-inner { display:grid; place-items:center; gap:22px; color:var(--em); }
.pre-hex { width:52px; animation:preSpin 2.4s linear infinite; }
@keyframes preSpin { to { transform:rotate(360deg); } }
.pre-word {
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.45em;
  color:var(--mist);
  animation:preFade 1.6s ease-in-out infinite alternate;
}
@keyframes preFade { from{opacity:.4} to{opacity:1} }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-mono); font-size:.82rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:16px 30px; border-radius:8px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn:active { transform:translateY(1px) scale(.99); }

.btn-solid {
  background:var(--em-grad); color:#fff; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.3),
             0 0 0 1px rgba(255,70,85,.28), 0 12px 34px -12px rgba(224,27,49,.6);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.btn-solid:hover {
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.3),
             0 0 0 1px rgba(255,70,85,.45), 0 18px 46px -12px rgba(224,27,49,.7);
}

.btn-ghost {
  color:var(--silver); border-color:var(--line);
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover { border-color:var(--em-line); color:var(--em); background:var(--em-dim); transform:translateY(-2px); }

.btn-wa { background:#1fb355; color:#fff; }
.btn-wa:hover { background:#25d366; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(37,211,102,.5); }

.btn-lg  { padding:19px 38px; font-size:.88rem; }
.btn-sm  { padding:11px 20px; font-size:.74rem; }
.btn-full{ width:100%; }

/* ---------- Header ---------- */
#siteHeader {
  position:fixed; inset-inline:0; top:0; z-index:200;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding-block:18px;
}
#siteHeader.scrolled {
  background:rgba(7,9,11,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-soft);
  padding-block:10px;
}
.header-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand { display:flex; align-items:center; gap:12px; color:var(--silver); }
.brand-mark { width:38px; color:var(--em); flex:none; }
.brand-mark.lg { width:44px; }
.brand-text {
  font-family:var(--f-mono); font-size:.8rem; font-weight:500; letter-spacing:.22em; line-height:1.35;
}
.brand-text em { display:block; font-style:normal; font-size:.58rem; letter-spacing:.3em; color:var(--mist); }

#siteNav ul { display:flex; gap:4px; }
#siteNav a {
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist); padding:9px 13px; border-radius:6px;
  transition:color .2s, background .2s;
}
#siteNav a:hover, #siteNav a.active { color:var(--silver); background:rgba(255,255,255,.04); }

.header-actions { display:flex; align-items:center; gap:16px; }
.header-phone {
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.05em; color:var(--steel);
  transition:color .2s;
}
.header-phone svg { width:16px; height:16px; color:var(--em); }
.header-phone:hover { color:var(--em); }

#navToggle {
  display:none; flex-direction:column; gap:7px; padding:8px; z-index:210;
}
#navToggle span {
  width:26px; height:1.5px; background:var(--silver);
  transition:transform .3s var(--ease), opacity .3s;
}
#navToggle[aria-expanded="true"] span:first-child { transform:translateY(4.25px) rotate(45deg); }
#navToggle[aria-expanded="true"] span:last-child  { transform:translateY(-4.25px) rotate(-45deg); }

/* ---------- Scroll reveal ---------- */
.anim { opacity:0; transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); }
.anim[data-anim="up"]    { transform:translateY(36px); }
.anim[data-anim="left"]  { transform:translateX(-44px); }
.anim[data-anim="right"] { transform:translateX(44px); }
.anim.on { opacity:1; transform:none; }

/* ---------- Section headers ---------- */
.sec-head { max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.sec-eyebrow {
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--em); margin-bottom:18px;
  display:flex; align-items:center; gap:14px;
}
.sec-eyebrow::before { content:''; width:36px; height:1px; background:var(--em); flex:none; }
.sec-head h2 {
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.9rem,4.2vw,3.3rem); line-height:1.14;
  color:var(--silver); letter-spacing:.005em;
}
.sec-head h2 em {
  font-style:normal;
  background:var(--em-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sec-sub { margin-top:18px; color:var(--mist); max-width:560px; }

/* =====================================================
   HERO
   ===================================================== */
.hero {
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  padding-top:96px;
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  opacity:.5;
  filter:saturate(1.05) contrast(1.16) brightness(.92);
  mask-image:linear-gradient(180deg,#000 55%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%);
}
.hero-sheen {
  position:absolute; inset:0;
  background:
    radial-gradient(56% 42% at 76% 28%, rgba(224,27,49,.11) 0%, transparent 64%),
    radial-gradient(46% 56% at 16% 80%, rgba(150,165,185,.05) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #0a0b0d 0%, #0d0f12 55%, #0a0b0d 100%);
}
.hero-lattice {
  position:absolute; inset:-2%;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='166' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16.2v32.4L28 64.8 0 48.6V16.2z M28 64.8L56 81v16.2M28 64.8L0 81v16.2' fill='none' stroke='%23aab3bd' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
  mask-image:radial-gradient(70% 70% at 65% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 70% at 65% 40%, #000 30%, transparent 75%);
  will-change:transform;
}
.hero-beam {
  position:absolute; top:-30%; right:-8%;
  width:56vw; height:160%;
  background:linear-gradient(100deg, transparent 42%, rgba(236,239,242,.045) 50%, transparent 58%);
  transform:rotate(6deg);
  animation:beamDrift 11s ease-in-out infinite alternate;
}
@keyframes beamDrift { from{ transform:rotate(6deg) translateX(-4%);} to{ transform:rotate(6deg) translateX(7%);} }

.hero-inner { position:relative; z-index:1; }

.hero-kicker {
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--mist); display:flex; align-items:center; gap:16px; margin-bottom:34px;
}
.kicker-line { width:52px; height:1px; background:var(--em); flex:none; }

.hero-title {
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2.6rem,7.4vw,5.6rem);
  line-height:1.06; color:var(--silver); letter-spacing:.002em;
  margin-bottom:30px;
}
.hero-title span { display:block; }
.hero-accent {
  background:var(--metal);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:metalSweep 6.5s ease-in-out infinite;
}
@keyframes metalSweep { 0%,100%{background-position:0% 0} 50%{background-position:100% 0} }

.hero-sub {
  font-size:clamp(1rem,1.4vw,1.14rem); color:var(--steel);
  max-width:560px; margin-bottom:42px; font-weight:300;
}
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:66px; }

.hero-proof {
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line-soft);
  padding-top:30px; max-width:760px;
}
.hero-proof > div {
  padding-right:clamp(28px,4vw,56px); margin-right:clamp(28px,4vw,56px);
  border-right:1px solid var(--line-soft);
}
.hero-proof > div:last-child { border-right:0; margin-right:0; padding-right:0; }
.hero-proof dt {
  font-family:var(--f-disp); font-size:clamp(1.9rem,3vw,2.6rem);
  color:var(--silver); line-height:1;
}
.hero-proof dd {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mist); margin-top:8px;
}

.hero-scroll {
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:1;
  width:26px; height:44px; border:1px solid var(--line); border-radius:16px;
  display:flex; justify-content:center; padding-top:9px;
}
.hero-scroll span {
  width:3px; height:9px; border-radius:2px; background:var(--em);
  animation:wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(13px);opacity:0} 100%{opacity:0} }

/* =====================================================
   TRUST BAR
   ===================================================== */
.trustbar { border-block:1px solid var(--line-soft); background:var(--ink-2); }
.trust-row {
  display:flex; align-items:center; gap:clamp(20px,4vw,48px);
  padding-block:26px; flex-wrap:wrap;
}
.trust-label {
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mist); flex:none;
}
.trust-list { display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,42px); }
.trust-list li {
  font-family:var(--f-disp); font-size:1.02rem; color:var(--mist);
  letter-spacing:.06em; transition:color .3s;
}
.trust-list li:hover { color:var(--silver); }

/* =====================================================
   SCIENCE
   ===================================================== */
.science { background:var(--ink); }
.science-grid {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,90px); align-items:center;
}
.lede {
  font-family:var(--f-disp); font-size:clamp(1.2rem,1.9vw,1.5rem);
  color:var(--silver); line-height:1.55; margin-bottom:22px;
}
.science-copy > p:not(.lede) { color:var(--steel); margin-bottom:34px; }
.science-copy strong { color:var(--silver); font-weight:600; }

.spec-table { width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td {
  text-align:left; padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
  font-size:.92rem;
}
.spec-table thead th {
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mist); border-bottom:1px solid var(--line);
}
.spec-table tbody th { font-weight:500; color:var(--steel); }
.spec-table td { color:var(--mist); }
.spec-table .hl { color:var(--em); font-weight:600; }
.spec-table tbody tr:hover { background:rgba(255,255,255,.02); }

.science-visual {
  background:var(--ink-3);
  border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(24px,3vw,42px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.lattice-svg { width:100%; height:auto; }
.visual-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.visual-tags span {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  color:var(--em); background:var(--em-dim);
  border:1px solid var(--em-line); border-radius:100px; padding:5px 13px;
}

/* =====================================================
   BENEFITS
   ===================================================== */
.benefits { background:var(--ink-2); border-block:1px solid var(--line-soft); }
.bene-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);
}
.bene-card {
  padding:clamp(26px,3vw,44px);
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  position:relative; transition:background .35s var(--ease);
}
.bene-card::after {
  content:''; position:absolute; left:0; top:0; width:2px; height:0;
  background:var(--em-grad); transition:height .4s var(--ease);
}
.bene-card:hover { background:rgba(46,230,168,.03); }
.bene-card:hover::after { height:100%; }
.bene-n {
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.3em; color:var(--em);
  display:block; margin-bottom:20px;
}
.bene-card h3 {
  font-family:var(--f-disp); font-weight:400; font-size:1.28rem;
  color:var(--silver); margin-bottom:12px; line-height:1.3;
}
.bene-card p { font-size:.93rem; color:var(--mist); }

.inline-cta {
  margin-top:64px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.inline-cta p { font-family:var(--f-disp); font-size:1.25rem; color:var(--silver); }

/* =====================================================
   PROCESS
   ===================================================== */
.proc-list { max-width:840px; }
.proc-step {
  display:flex; gap:clamp(22px,3.5vw,48px);
  padding-block:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line-soft);
  align-items:flex-start;
}
.proc-step:first-child { border-top:1px solid var(--line-soft); }
.proc-idx {
  font-family:var(--f-disp); font-size:clamp(2rem,3.4vw,3rem);
  color:transparent; -webkit-text-stroke:1px var(--em);
  line-height:1; flex:none; width:2.2ch;
  transition:color .35s var(--ease);
}
.proc-step:hover .proc-idx { color:var(--em); }
.proc-body h3 {
  font-family:var(--f-disp); font-weight:400; font-size:1.3rem; color:var(--silver);
  margin-bottom:8px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.proc-tag {
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em;
  color:var(--mist); border:1px solid var(--line); border-radius:100px; padding:3px 12px;
}
.proc-body p { color:var(--mist); font-size:.94rem; max-width:560px; }

/* =====================================================
   GALLERY — draggable before/after
   ===================================================== */
.gallery { background:var(--ink-2); border-block:1px solid var(--line-soft); }

.ba-compare {
  position:relative; height:clamp(300px,44vw,460px);
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  cursor:ew-resize; user-select:none; touch-action:pan-y;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.ba-side { position:absolute; inset:0; }
.ba-a { clip-path:inset(0 0 0 50%); }
.ba-paint { position:absolute; inset:0; }
.ba-paint.dull {
  background:
    repeating-linear-gradient(115deg, transparent 0 5px, rgba(255,255,255,.017) 5px 6px),
    repeating-linear-gradient(65deg, transparent 0 7px, rgba(255,255,255,.012) 7px 8px),
    radial-gradient(90% 100% at 50% 0%, #2a2d31 0%, #1b1e22 55%, #131519 100%);
}
.ba-paint.gloss {
  background:
    radial-gradient(60% 45% at 32% 22%, rgba(236,239,242,.16) 0%, transparent 55%),
    radial-gradient(45% 35% at 74% 68%, rgba(224,27,49,.10) 0%, transparent 60%),
    linear-gradient(160deg, #14181d 0%, #0a0d11 45%, #10151b 75%, #070a0d 100%);
}
.ba-paint.gloss::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 44%, rgba(255,255,255,.09) 50%, transparent 56%);
  animation:glossSweep 5.5s ease-in-out infinite;
}
@keyframes glossSweep { 0%,100%{transform:translateX(-32%)} 50%{transform:translateX(32%)} }

.ba-tag {
  position:absolute; bottom:18px; left:18px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist); background:rgba(7,9,11,.75);
  border:1px solid var(--line); border-radius:100px; padding:7px 15px;
  backdrop-filter:blur(6px);
}
.ba-tag-a { left:auto; right:18px; color:var(--em); border-color:var(--em-line); }

.ba-handle {
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--em); transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 26px rgba(255,70,85,.55);
}
.ba-grip {
  position:absolute; width:46px; height:46px; border-radius:50%;
  background:var(--ink); border:1.5px solid var(--em);
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.7rem; color:var(--em); letter-spacing:-.06em;
  box-shadow:0 8px 26px rgba(0,0,0,.6);
}

.gal-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.case-card {
  background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease);
}
.case-card:hover { border-color:var(--em-line); transform:translateY(-4px); }
.case-photo { aspect-ratio:16/9; overflow:hidden; background:var(--ink-2); position:relative; }
.case-photo::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(10,11,13,.55) 100%);
}
.case-photo::before {
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; z-index:1;
  background:var(--em-grad); transition:right .45s var(--ease);
}
.case-card:hover .case-photo::before { right:0; }
.case-photo img {
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.1) saturate(1.02) brightness(.95);
  transition:transform .6s var(--ease), filter .4s;
}
.case-card:hover .case-photo img { transform:scale(1.05); filter:contrast(1.12) saturate(1.1) brightness(1); }
.case-body { padding:24px; }
.case-card h3 { font-family:var(--f-disp); font-weight:400; font-size:1.14rem; color:var(--silver); }
.case-city {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--em); margin:8px 0 10px;
}
.case-body p:last-child { font-size:.9rem; color:var(--mist); }

/* Real before/after photos (sit above the CSS paint fallback) */
.ba-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  filter:contrast(1.1) brightness(.96);
}
.ba-tag { z-index:2; }

/* Studio photo strip */
.photo-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;
}
.strip-item {
  border-radius:12px; overflow:hidden; border:1px solid var(--line-soft);
  background:var(--ink-3); position:relative;
}
.strip-item img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform .6s var(--ease), filter .5s;
  filter:grayscale(.4) contrast(1.08) brightness(.94);
}
.strip-item:hover img { transform:scale(1.06); filter:grayscale(0) contrast(1.1) saturate(1.08); }
.strip-item figcaption {
  position:absolute; inset-inline:0; bottom:0;
  padding:26px 14px 12px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver);
  background:linear-gradient(180deg,transparent, rgba(7,9,11,.85));
}

/* =====================================================
   PACKAGES
   ===================================================== */
.pack-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; align-items:stretch;
}
.pack-card {
  background:var(--carbon), var(--ink-3); border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:var(--r); padding:clamp(28px,3vw,42px);
  display:flex; flex-direction:column; position:relative;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.pack-card:hover { transform:translateY(-6px); border-color:var(--line); }
.pack-popular {
  border-color:var(--em-line);
  background:var(--carbon), linear-gradient(180deg, rgba(224,27,49,.08) 0%, var(--ink-3) 45%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 80px -30px rgba(224,27,49,.3);
}
.pack-popular:hover { border-color:var(--em); }
.pack-flag {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  background:var(--em-grad); color:#fff; font-weight:600;
  border-radius:100px; padding:7px 18px; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px -6px rgba(224,27,49,.6);
}
.pack-name { font-family:var(--f-disp); font-weight:400; font-size:1.7rem; color:var(--silver); letter-spacing:.04em; }
.pack-sub {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mist); margin:6px 0 26px;
}
.pack-price { font-family:var(--f-disp); font-size:clamp(2.4rem,3.6vw,3.1rem); color:var(--silver); line-height:1; margin-bottom:28px; }
.pack-price sup { font-size:.44em; color:var(--em); margin-right:2px; top:-.7em; position:relative; }
.pack-popular .pack-price {
  background:var(--em-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pack-feats { flex:1; display:grid; gap:12px; margin-bottom:32px; }
.pack-feats li { display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--steel); line-height:1.5; }
.pack-feats svg { width:15px; height:15px; color:var(--em); flex:none; margin-top:4px; }
.feat-no { color:var(--mist); opacity:.6; }
.feat-no span { width:15px; flex:none; text-align:center; }
.pack-note { text-align:center; margin-top:34px; font-size:.84rem; color:var(--mist); }

/* =====================================================
   WARRANTY
   ===================================================== */
.warranty-wrap { max-width:820px; }
.wr-card {
  background:var(--carbon), var(--ink-3); border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -30px rgba(0,0,0,.8);
  border-radius:var(--r); padding:clamp(26px,3.5vw,44px);
}
.wr-tabs {
  display:flex; gap:4px; background:var(--ink);
  border:1px solid var(--line-soft); border-radius:10px; padding:4px; margin-bottom:26px;
}
.wr-tab {
  flex:1; padding:11px; border-radius:7px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); transition:background .25s, color .25s;
}
.wr-tab.active { background:var(--em-grad); color:#fff; font-weight:600; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.wr-tab:not(.active):hover { color:var(--silver); }

.wr-form label {
  display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mist); margin-bottom:10px;
}
.wr-row { display:flex; gap:12px; }
.wr-row input {
  flex:1; background:var(--ink); border:1px solid var(--line);
  border-radius:8px; color:var(--silver);
  padding:15px 18px; font-size:1rem; letter-spacing:.04em;
  transition:border-color .25s, box-shadow .25s;
}
.wr-row input:focus { outline:none; border-color:var(--em-line); box-shadow:0 0 0 3px var(--em-dim); }
.wr-row input::placeholder { color:var(--mist); opacity:.6; }
.wr-hint { margin-top:14px; font-size:.8rem; color:var(--mist); }
.wr-hint code {
  font-family:var(--f-mono); font-size:.76rem; color:var(--em);
  background:var(--em-dim); border-radius:5px; padding:2px 7px;
}

.wr-result:not(:empty) { margin-top:28px; }
.wr-res-card {
  border:1px solid var(--line); border-radius:12px; padding:28px;
  background:var(--ink-2); animation:resIn .4s var(--ease);
}
@keyframes resIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.wr-res-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.wr-res-name { font-family:var(--f-disp); font-size:1.4rem; color:var(--silver); }
.wr-res-veh { font-size:.86rem; color:var(--mist); margin-top:3px; }
.wr-status {
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  border-radius:100px; padding:8px 18px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
}
.wr-status::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.wr-status.ok  { color:var(--ok); background:var(--ok-dim); border:1px solid var(--ok-line); }
.wr-status.exp { color:#ff7a7a; background:rgba(255,110,110,.1); border:1px solid rgba(255,110,110,.3); }

.wr-res-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
.wr-field span {
  display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mist); margin-bottom:5px;
}
.wr-field strong { font-weight:500; color:var(--steel); font-size:.94rem; }
.wr-field .em { color:var(--em); font-weight:600; }

.wr-maint { margin-top:24px; }
.wr-maint > span {
  display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mist); margin-bottom:10px;
}
.wr-dots { display:flex; gap:7px; }
.wr-dot {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.64rem; color:var(--mist);
}
.wr-dot.used { background:var(--em-grad); color:#fff; border-color:transparent; font-weight:600; }

.wr-none {
  border:1px solid var(--line); border-radius:12px; padding:32px; text-align:center;
  background:var(--ink-2); animation:resIn .4s var(--ease);
}
.wr-none h3 { font-family:var(--f-disp); font-weight:400; color:var(--silver); margin-bottom:8px; }
.wr-none p { font-size:.9rem; color:var(--mist); }
.wr-none a { color:var(--em); }
.wr-err { color:#ff9a9a; font-size:.88rem; text-align:center; padding:14px; }

/* =====================================================
   REVIEWS
   ===================================================== */
.reviews { background:var(--ink-2); border-block:1px solid var(--line-soft); }

/* Google rating badge */
.g-badge {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:-30px 0 40px;
}
.g-badge-main {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:100px; padding:12px 22px;
  transition:border-color .25s, transform .25s var(--ease);
}
.g-badge-main:hover { border-color:var(--em-line); transform:translateY(-2px); }
.g-logo { width:20px; height:20px; }
.g-score { font-family:var(--f-disp); font-size:1.3rem; color:var(--silver); }
.g-stars { color:var(--gold); letter-spacing:2px; font-size:.85rem; }
.g-count { font-size:.84rem; color:var(--mist); }
.g-badge-main:hover .g-count { color:var(--em); }

.rev-src {
  display:inline-block; margin-top:6px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  color:var(--mist); text-transform:uppercase;
}
.rev-src:hover { color:var(--em); }
.rev-more { text-align:center; margin-top:36px; }
.rev-more a {
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.1em; color:var(--em);
}
.rev-more a:hover { text-decoration:underline; text-underline-offset:5px; }

.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rev-card {
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; gap:18px;
  transition:transform .3s var(--ease), border-color .3s;
}
.rev-card:hover { transform:translateY(-5px); border-color:var(--line); }
.rev-stars { color:var(--gold); letter-spacing:5px; font-size:.95rem; }
.rev-quote {
  font-family:var(--f-disp); font-size:1.06rem; line-height:1.65; color:var(--steel);
  flex:1;
}
.rev-card footer cite { display:block; font-style:normal; font-weight:600; color:var(--silver); font-size:.95rem; }
.rev-card footer span { font-size:.78rem; color:var(--mist); font-family:var(--f-mono); letter-spacing:.05em; }

/* =====================================================
   FAQ
   ===================================================== */
.faq-wrap { max-width:820px; }
.faq-item {
  border-bottom:1px solid var(--line-soft);
}
.faq-item:first-of-type { border-top:1px solid var(--line-soft); }
.faq-item summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 4px;
  font-family:var(--f-disp); font-size:1.14rem; color:var(--silver);
  transition:color .25s;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--em); }
.faq-x { position:relative; width:16px; height:16px; flex:none; }
.faq-x::before, .faq-x::after {
  content:''; position:absolute; background:var(--em); transition:transform .3s var(--ease);
}
.faq-x::before { top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-x::after  { left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%); }
.faq-item[open] .faq-x::after { transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-item > p {
  padding:0 4px 26px; color:var(--mist); font-size:.95rem; max-width:88%;
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-grid {
  display:grid; grid-template-columns:1.35fr .85fr; gap:clamp(28px,4vw,56px);
  align-items:start;
}
.c-form {
  background:var(--carbon), var(--ink-3); border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -30px rgba(0,0,0,.8);
  border-radius:var(--r); padding:clamp(26px,3.5vw,46px);
}
.f-2col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { margin-bottom:20px; }
.field label {
  display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mist); margin-bottom:9px;
}
.req { color:var(--em); }
.field input, .field select, .field textarea {
  width:100%; background:var(--ink); border:1px solid var(--line);
  border-radius:8px; color:var(--silver);
  padding:14px 16px; font-size:.96rem;
  transition:border-color .25s, box-shadow .25s;
}
.field :is(input,select,textarea):focus {
  outline:none; border-color:var(--em-line); box-shadow:0 0 0 3px var(--em-dim);
}
.field ::placeholder { color:var(--mist); opacity:.55; }
.field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),linear-gradient(135deg,var(--mist) 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; cursor:pointer; }
.field select option { background:var(--ink-3); }
.field textarea { resize:vertical; min-height:88px; }
.field input:user-invalid { border-color:rgba(255,110,110,.55); }

.hp-field { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.c-status:not(:empty) {
  margin-top:16px; padding:14px 18px; border-radius:8px; font-size:.9rem;
  animation:resIn .35s var(--ease);
}
.c-status.ok  { background:var(--ok-dim); border:1px solid var(--ok-line); color:var(--ok); }
.c-status.err { background:rgba(255,110,110,.08); border:1px solid rgba(255,110,110,.3); color:#ff9a9a; }
.c-privacy { margin-top:14px; font-size:.78rem; color:var(--mist); text-align:center; }

.c-side { display:grid; gap:20px; }
.c-block {
  background:var(--ink-3); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:28px;
}
.c-block h3 { font-family:var(--f-disp); font-weight:400; font-size:1.2rem; color:var(--silver); margin-bottom:14px; }
.c-big {
  display:block; font-family:var(--f-disp); font-size:1.7rem; color:var(--em);
  margin-bottom:18px; letter-spacing:.02em;
}
.c-big:hover { text-decoration:underline; text-underline-offset:6px; }
.c-block address { font-style:normal; color:var(--steel); font-size:.94rem; line-height:1.7; }
.c-hours { margin-top:10px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color:var(--mist); }
.c-map { display:inline-block; margin-top:14px; color:var(--em); font-size:.88rem; }
.c-map:hover { text-decoration:underline; text-underline-offset:4px; }
.c-assure ul { display:grid; gap:11px; }
.c-assure li {
  display:flex; gap:11px; font-size:.9rem; color:var(--steel);
}
.c-assure li::before { content:'✓'; color:var(--em); font-weight:700; }

/* =====================================================
   FOOTER
   ===================================================== */
#siteFooter { background:var(--ink-2); border-top:1px solid var(--line-soft); }
.footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(30px,4vw,60px); padding-block:clamp(52px,7vw,84px);
}
.f-brand .brand-mark { color:var(--em); margin-bottom:18px; }
.f-name { font-family:var(--f-mono); font-size:.82rem; letter-spacing:.26em; color:var(--silver); margin-bottom:14px; }
.f-desc { font-size:.9rem; color:var(--mist); max-width:300px; margin-bottom:22px; }
.f-social { display:flex; gap:10px; }
.f-social a {
  width:40px; height:40px; border:1px solid var(--line); border-radius:9px;
  display:grid; place-items:center; color:var(--mist);
  transition:color .25s, border-color .25s, transform .25s var(--ease);
}
.f-social a:hover { color:var(--em); border-color:var(--em-line); transform:translateY(-3px); }
.f-social svg { width:17px; height:17px; }

.f-col h3 {
  font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--silver); margin-bottom:20px;
}
.f-col a { display:block; font-size:.9rem; color:var(--mist); padding-block:6px; transition:color .2s, padding-left .2s; }
.f-col a:hover { color:var(--em); padding-left:5px; }
.f-col address { font-style:normal; font-size:.9rem; color:var(--mist); line-height:2; }
.f-hours { margin-top:12px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--mist); }

.f-bottom {
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-block:22px; font-size:.8rem; color:var(--mist);
}
.f-fine { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; }

/* =====================================================
   FLOATING ELEMENTS
   ===================================================== */
.fab-wa {
  position:fixed; right:22px; bottom:88px; z-index:150;
  width:54px; height:54px; border-radius:50%;
  background:#1fb355; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.55);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.fab-wa svg { width:27px; height:27px; }
.fab-wa:hover { transform:scale(1.08); box-shadow:0 14px 38px -8px rgba(37,211,102,.7); }

#toTop {
  position:fixed; right:22px; bottom:24px; z-index:150;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(11,14,17,.85); color:var(--silver);
  display:grid; place-items:center; backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .3s, transform .3s var(--ease), border-color .25s;
}
#toTop.show { opacity:1; pointer-events:auto; transform:none; }
#toTop:hover { border-color:var(--em-line); color:var(--em); }
#toTop svg { width:18px; height:18px; }

/* Mobile CTA dock */
.cta-dock {
  position:fixed; inset-inline:0; bottom:0; z-index:180;
  display:none;
  background:rgba(7,9,11,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.dock-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--silver); border:1px solid var(--line); border-radius:9px;
  padding:13px 8px; min-height:44px;
}
.dock-btn svg { width:16px; height:16px; }
.dock-primary { background:var(--em-grad); color:#fff; border-color:transparent; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1080px) {
  #siteNav ul { gap:0; }
  #siteNav a { padding:9px 9px; font-size:.7rem; }
  .header-phone span { display:none; }
  .science-grid { grid-template-columns:1fr; }
  .science-visual { max-width:480px; }
  .bene-grid { grid-template-columns:repeat(2,1fr); }
  .rev-grid, .pack-grid, .gal-cases { grid-template-columns:1fr 1fr; }
  .pack-card:last-child { grid-column:span 2; max-width:60%; margin-inline:auto; width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:820px) {
  /* Mobile nav drawer */
  #siteNav {
    position:fixed; inset:0; z-index:190;
    background:rgba(7,9,11,.97); backdrop-filter:blur(20px);
    display:grid; place-items:center;
    opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
  }
  #siteNav.open { opacity:1; visibility:visible; }
  #siteNav ul { flex-direction:column; text-align:center; gap:8px; }
  #siteNav a { font-size:1.05rem; padding:14px 24px; letter-spacing:.24em; }
  #navToggle { display:flex; }
  .header-actions .btn { display:none; }
  .header-phone { display:none; }

  .contact-grid { grid-template-columns:1fr; }
  .rev-grid, .gal-cases { grid-template-columns:1fr; }
  .photo-strip { grid-template-columns:1fr 1fr; }
  .pack-grid { grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .pack-card:last-child { grid-column:auto; max-width:none; }
  .hero-proof > div { padding-right:22px; margin-right:22px; }
  .proc-idx { width:1.6ch; }
}

@media (max-width:640px) {
  .bene-grid { grid-template-columns:1fr; }
  .f-2col { grid-template-columns:1fr; }
  .wr-row { flex-direction:column; }
  .wr-tabs { flex-direction:column; }
  .hero { padding-top:110px; min-height:auto; padding-bottom:80px; }
  .hero-scroll { display:none; }
  .hero-proof { gap:20px; }
  .hero-proof > div { border-right:0; padding-right:0; margin-right:26px; }
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
  .footer-grid { grid-template-columns:1fr; }
  .cta-dock { display:flex; }
  .fab-wa { display:none; }            /* dock replaces it on mobile */
  #toTop { bottom:calc(76px + env(safe-area-inset-bottom)); }
  body { padding-bottom:70px; }        /* room for dock */
  .faq-item > p { max-width:100%; }
}

/* ---------- Print ---------- */
@media print {
  #siteHeader, .fab-wa, #toTop, .cta-dock, .hero-bg, #preloader { display:none !important; }
  body { background:#fff; color:#000; }
}

/* ---------- v2.2 reskin: override inline-SVG accent colors from CSS ---------- */
.lattice-svg circle { fill:var(--em); }
#hexGrad stop:first-child { stop-color:#ff5460; }
#hexGrad stop:last-child  { stop-color:#b30f24; }

/* =====================================================
   v3.0 "CARBON CRIMSON" OVERRIDE LAYER
   AutoDetail-inspired: topbar, bold display type, notched
   buttons, Google review cards, CTA band, cinematic hero
   (Append-only layer — nothing above is logic-coupled)
   ===================================================== */

/* ---------- Bold automotive display type ---------- */
.hero-title, .sec-head h2, .pack-name, .pack-price,
.proc-idx, .wr-res-name, .cta-band h2 {
  font-family:var(--f-disp);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.015em;
}
.hero-title { font-weight:700; line-height:1.02; font-size:clamp(2.5rem,6.8vw,5.1rem); }
.sec-head h2 { line-height:1.12; }
.lede, .rev-quote, .bene-card h3, .proc-body h3, .case-card h3,
.faq-item summary, .c-block h3, .wr-none h3, .inline-cta p {
  font-family:var(--f-disp); font-weight:500; letter-spacing:.01em;
}
.hero-proof dt { font-family:var(--f-disp); font-weight:600; }
.c-big { font-family:var(--f-disp); font-weight:600; letter-spacing:.03em; }

/* ---------- Notched (clipped-corner) buttons — signature automotive cut ---------- */
.btn { border-radius:4px; clip-path:var(--notch, polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)); }
.btn-sm { clip-path:polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

/* ---------- Topbar ---------- */
.topbar {
  position:fixed; inset-inline:0; top:0; z-index:210;
  background:linear-gradient(90deg, var(--em-deep), #7c0a18 55%, var(--em-deep));
  border-bottom:1px solid rgba(0,0,0,.35);
}
.topbar-row {
  display:flex; align-items:center; gap:22px;
  min-height:36px; flex-wrap:nowrap; overflow:hidden;
}
.tb-item {
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  color:#ffd9dc; white-space:nowrap; transition:color .2s;
}
a.tb-item:hover { color:#fff; }
.tb-spacer { flex:1; }
.tb-review { color:#fff; font-weight:500; }

/* push header + hero below topbar */
#siteHeader { top:36px; }
.topbar { transition:transform .3s var(--ease); }
/* On scroll: slide topbar away, dock header to top (progressive enhancement) */
body:has(#siteHeader.scrolled) .topbar { transform:translateY(-100%); }
body:has(#siteHeader.scrolled) #siteHeader { top:0; }
.hero { padding-top:132px; }

/* ---------- Cinematic hero photo grade ---------- */
.hero-photo {
  opacity:.5;
  filter:saturate(1.05) contrast(1.14) brightness(.92);
}
.hero-sheen {
  background:
    radial-gradient(58% 44% at 78% 30%, rgba(232,29,36,.10) 0%, transparent 65%),
    radial-gradient(50% 60% at 18% 78%, rgba(140,160,180,.05) 0%, transparent 60%),
    linear-gradient(105deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.72) 45%, rgba(10,10,11,.38) 100%),
    linear-gradient(180deg, transparent 62%, var(--ink) 100%);
}
.hero-lattice { opacity:.10; }
.hero-accent {
  background:var(--em-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:none;
}
.hero-kicker { color:#f3b7bb; }
.kicker-line { background:var(--em); height:2px; }

/* Red edge accent on framed media */
.science-visual, .ba-compare, .case-card, .strip-item {
  position:relative;
}
.science-visual::before, .ba-compare::before {
  content:''; position:absolute; left:0; top:14%; bottom:14%; width:3px;
  background:var(--em-grad); z-index:3; border-radius:0 3px 3px 0;
}

/* ---------- Google review cards (AutoDetail pattern) ---------- */
.rev-top { display:flex; align-items:center; gap:14px; }
.rev-avatar {
  width:46px; height:46px; border-radius:50%; flex:none;
  background:var(--em-grad);
  display:grid; place-items:center;
  font-family:var(--f-disp); font-weight:600; font-size:1.15rem; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -4px rgba(224,27,49,.5);
}
.rev-who { flex:1; min-width:0; }
.rev-who cite { display:block; font-style:normal; font-weight:600; color:var(--silver); font-size:.98rem; }
.rev-date { font-size:.74rem; color:var(--mist); font-family:var(--f-mono); }
.rev-g { width:22px; height:22px; flex:none; }
.rev-rateline {
  font-size:.78rem; color:var(--mist);
  display:flex; align-items:center; gap:8px;
}
.rev-rateline .rev-stars { font-size:.85rem; letter-spacing:3px; }
.rev-card footer { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.rev-card footer span { font-size:.76rem; color:var(--mist); font-family:var(--f-mono); letter-spacing:.04em; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(100deg, rgba(10,10,11,.9) 30%, rgba(156,13,19,.55)),
    var(--carbon, none),
    var(--ink-2);
  border-block:1px solid var(--line-soft);
  padding-block:clamp(44px,6vw,72px);
  position:relative; overflow:hidden;
}
.cta-band::after {
  content:''; position:absolute; top:-40%; right:-6%;
  width:42%; height:180%;
  background:linear-gradient(100deg, transparent 45%, rgba(232,29,36,.13) 50%, transparent 55%);
  transform:rotate(8deg); pointer-events:none;
}
.cta-band-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.cta-band h2 {
  font-size:clamp(1.5rem,3.2vw,2.4rem); color:var(--silver); line-height:1.15; max-width:560px;
}
.cta-band h2 em {
  font-style:normal;
  background:var(--em-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cta-band-btns { display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Carbon texture on key panels ---------- */
.pack-card, .wr-card, .c-form { background-image:var(--carbon, none); }

/* ---------- Mobile adjustments for topbar ---------- */
@media (max-width:820px) {
  .tb-mail, .tb-hours { display:none; }
  .topbar-row { justify-content:space-between; }
}
@media (max-width:640px) {
  .topbar { display:none; }        /* dock owns mobile CTAs */
  #siteHeader { top:0; }
  .hero { padding-top:104px; }
  .cta-band-btns { width:100%; }
  .cta-band-btns .btn { flex:1; }
}