/* =============================================================
   TECNIFIX — styles.css
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced-motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Official Tecnifix brand palette (MANUAL_MAESTRO_TECNIFIX v1.0) */
  --bg:         #0D0D0D;   /* Negro Tecnifix */
  --bg-2:       #121212;
  --surface:    #171717;   /* dark card per brand manual */
  --surface-2:  #1f1f1f;
  --ink:        #f5f5f5;
  --ink-mute:   #A6A6A6;   /* Gris plata oficial */
  --ink-dim:    #707070;
  --yellow:     #FFD000;   /* Amarillo Tecnifix */
  --yellow-2:   #e0b400;
  --yellow-soft: rgba(255, 208, 0, 0.14);
  --line:       rgba(245, 245, 245, 0.12);
  --line-strong: #333333;  /* Bordes oficiales */
  --white:      #ffffff;
  --success:    #3ecf6e;
  --danger:     #ff6b6b;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1240px;
  --nav-height: 84px;
  --radius-button: 8px;   /* official */
  --radius-card: 12px;    /* official */

  /* Fluid spacing scale — replaces one-off fixed values across the sheet */
  --page-gutter:        clamp(1rem, 3vw, 2.5rem);
  --space-section-sm:   clamp(3.5rem, 6vw, 5rem);
  --space-section:      clamp(4.5rem, 7vw, 7rem);
  --space-section-lg:   clamp(5.5rem, 9vw, 8rem);
  --space-block:        clamp(1.5rem, 3vw, 2.75rem);
  --space-head:         clamp(1.75rem, 4vw, 3.25rem);
  --space-grid:         clamp(1rem, 2vw, 1.75rem);
  --card-padding:       clamp(1.25rem, 2.5vw, 1.9rem);

  --gradient-1: #FFD000;
  --gradient-2: #ff8a00;
  --gradient-3: #7a5cff;
}

@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: 40%; }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; font-family: var(--display); }
::selection { background: var(--yellow); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--yellow); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section { padding-block: var(--space-section); position: relative; }
.section-tight { padding-block: var(--space-section-sm); }
.section-spacious { padding-block: var(--space-section-lg); }

.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }

.section-head { max-width: 640px; margin-bottom: var(--space-head); }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 700; margin-bottom: .9rem; }
.section-sub { color: var(--ink-mute); font-size: 1.05rem; max-width: 56ch; }
.section-head.is-center .section-sub { margin-inline: auto; }

.divider { height: 1px; background: var(--line); border: 0; }

/* =============================================================
   4. Typography
   ============================================================= */
.text-mute { color: var(--ink-mute); }
.text-yellow { color: var(--yellow); }

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: var(--radius-button);
  font-weight: 600; font-size: .95rem;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--yellow); color: #0D0D0D;
  box-shadow: 0 4px 14px rgba(255,208,0,0.18), 0 1px 3px rgba(0,0,0,0.3);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(255,208,0,0.28), 0 8px 18px rgba(0,0,0,0.35); background: var(--yellow-2); }
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-ghost {
  border: 1px solid var(--line-strong); color: var(--ink); background: transparent;
}
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1rem; }

/* Nav — solid brand black at all times so the logo artwork's own black
   background blends in seamlessly (raster logo has no alpha channel yet). */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-height);
  display: flex; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.nav-logo { display: flex; align-items: center; gap: .5rem; }
/* Sized by width (not height) so it reads clearly at every breakpoint —
   the wordmark stays visible down to 340px; only truly tiny headers fall
   back to the isotipo alone. */
.nav-logo .logo-full { width: 175px; height: auto; display: block; }
.nav-logo .logo-compact { height: 44px; width: 44px; display: none; }
@media (max-width: 339px) {
  .nav-logo .logo-full { display: none; }
  .nav-logo .logo-compact { display: block; }
}
@media (min-width: 600px) { .nav-logo .logo-full { width: 195px; } }
@media (min-width: 1200px) { .nav-logo .logo-full { width: 215px; } }
.nav-links { display: none; align-items: center; gap: 2.1rem; }
@media (min-width: 1200px) { .nav-links { display: flex; } }
.nav-link { position: relative; font-size: .95rem; padding: .25rem 0; color: var(--ink-mute); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--yellow);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
/* Below 1200px the hamburger menu already repeats both CTAs (see
   .nav-mobile), so the header keeps only the logo, language switcher and
   burger — avoids a yellow "Get a Quote" sitting right on top of
   the hero's own primary CTA on phones/tablets, and gives the full nav
   (links + phone + CTA) room to breathe once it appears. */
.nav-actions .btn-ghost,
.nav-actions .btn-primary { display: none; }
@media (min-width: 1200px) {
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary { display: inline-flex; }
}

.nav-lang {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-mute); transition: border-color .3s, color .3s;
}
.nav-lang:hover { border-color: var(--yellow); color: var(--yellow); }
.nav-mobile .nav-lang { margin-top: .4rem; }

.nav-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; align-items: center;
}
@media (min-width: 1200px) { .nav-burger { display: none; } }
.nav-burger span { width: 22px; height: 2px; background: var(--ink); transition: transform .35s var(--ease-soft), opacity .35s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: #060606;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); pointer-events: auto; }
.nav-mobile nav { display: flex; flex-direction: column; align-items: center; gap: 1.7rem; }
.nav-mobile a { font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.nav-mobile .btn { margin-top: 1rem; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  transition: border-color .45s var(--ease-soft), transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.card:hover { border-color: rgba(255,208,0,0.35); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }

.has-tilt { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; }
.has-tilt:hover { transition-duration: .15s; }

/* Forms */
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-mute); }
.field input,
.field select,
.field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  font: inherit; transition: border-color .3s, background-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--yellow); background: #232323;
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.checkbox-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 640px) { .checkbox-grid { grid-template-columns: 1fr 1fr; } }
.checkbox-item { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.checkbox-item input { width: 17px; height: 17px; accent-color: var(--yellow); flex-shrink: 0; }
.checkbox-item label { font-size: .92rem; }

.form-note { font-size: .82rem; color: var(--ink-dim); }

.cta-form { position: relative; }
.cta-form.is-sent .cta-form-fields { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.cta-form-fields { transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft); }
.cta-submit { position: relative; }
.cta-submit .cta-submit-spinner { display: none; }
.is-sending .cta-submit-label { visibility: hidden; }
.is-sending .cta-submit-spinner {
  display: block; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(13,13,13,0.3); border-top-color: #0D0D0D; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success {
  display: none; text-align: center; padding: 2.5rem 1rem;
}
.form-success.is-visible { display: block; }
.form-success .check {
  width: 56px; height: 56px; border-radius: 50%; background: var(--yellow-soft);
  display: grid; place-items: center; margin: 0 auto 1.2rem;
}

/* Accordion (FAQ) — native <details>/<summary>, works with zero JS */
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left; font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  cursor: pointer; list-style: none;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--yellow);
  transform: translate(-50%, -50%);
}
.accordion-trigger .plus::before { width: 14px; height: 2px; }
.accordion-trigger .plus::after { width: 2px; height: 14px; transition: transform .3s var(--ease-soft); }
.accordion-item[open] .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion-panel-inner {
  padding-bottom: 1.4rem; color: var(--ink-mute); max-width: 64ch;
  animation: accordionIn .3s var(--ease-out);
}
@keyframes accordionIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Stat */
.stat { text-align: center; }
.stat-value { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--yellow); }
.stat-label { color: var(--ink-mute); font-size: .88rem; margin-top: .3rem; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-mute);
}

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Premium tech background effects (CSS-only, no libraries/CDNs) ---
   Applied sparingly: hero (grid-overlay upgrade below), repair-services,
   social and final-CTA only — never globally. Stays behind content
   (z-index -2/-1), respects prefers-reduced-motion and disables its
   drift on touch devices where it can't be appreciated and only costs
   battery. */
.tech-bg-pattern { position: relative; isolation: isolate; }
.tech-bg-pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,208,0,0.16) 1px, transparent 1.6px);
  background-size: 46px 46px;
  opacity: .3;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 30%, transparent 100%);
  animation: techDrift 100s linear infinite;
}
@keyframes techDrift { from { background-position: 0 0; } to { background-position: 92px 92px; } }
@media (prefers-reduced-motion: reduce) { .tech-bg-pattern::before { animation: none; } }
@media (hover: none) and (pointer: coarse) { .tech-bg-pattern::before { animation: none; } }

.section-ambient-glow { position: relative; isolation: isolate; }
.section-ambient-glow::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 55%; height: 65%; top: -8%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,208,0,0.07), transparent 70%);
}

/* Static ambient glow behind the B2B card — no animation, just depth. */
.b2b-ambient-glow { position: relative; isolation: isolate; }
.b2b-ambient-glow::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -16% -10%;
  background: radial-gradient(circle at 50% 40%, rgba(255,208,0,0.16), transparent 65%);
  filter: blur(4px);
}

/* --- Hero --- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-height) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden; isolation: isolate;
}
.hero-gradient {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle 560px at var(--mx) var(--my), rgba(255,208,0,0.16) 0%, transparent 60%),
    radial-gradient(circle 700px at calc(var(--mx) + 18%) calc(var(--my) - 14%), rgba(255,138,0,0.10) 0%, transparent 60%),
    var(--bg);
  filter: blur(10px);
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,208,0,0.16) 1.2px, transparent 1.6px),
    linear-gradient(rgba(245,245,245,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,245,0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 100%);
  animation: techDrift 120s linear infinite;
}
@media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) {
  .hero-grid-overlay { animation: none; }
}
/* Hero grid — simplified to two items: the main copy column and the
   standalone B2B card. The media slider and service selector used to
   live here too; they now live in the #repair-services section below
   (see "Repair services" block further down this file).
   - <1080px: one column, copy above the B2B card, natural height.
   - >=1080px: copy ~58%, B2B card ~42% — wider card, still secondary to the H1. */
.hero-content { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; }
.hero-col-copy { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 2.75rem); min-width: 0; }
@media (min-width: 1080px) {
  .hero-content {
    /* minmax floor keeps the B2B card from shrinking so far its own CTA
       button crowds the corner accents at the narrow end of this range. */
    grid-template-columns: 1fr minmax(320px, 30%);
    align-items: start; gap: clamp(2rem, 4vw, 3rem);
  }
}

.hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 700; margin-bottom: 1.3rem; line-height: .98; }
.hero-title .line { display: block; }
.hero-title .line:not(.text-yellow) { font-size: 1.3em; }
.hero-title .line.text-yellow { margin-top: .35em; }
html[lang="en"] .hero-title .line.text-yellow { font-size: 1.15em; margin-top: .55em; }
html[lang="en"] .hero-title .line:not(.text-yellow) { font-size: 1.4em; }
/* From 1080px up, copy shares the row with media (and, >=1280px, B2B too),
   so the column is much narrower than the old two-thirds-width layout.
   The unscaled max size would wrap this headline into 5-6 short lines —
   scale it down for both narrower desktop tiers. */
@media (min-width: 1080px) { .hero-title { font-size: clamp(2rem, 2.4vw, 2.6rem); } }
.hero-sub { font-size: 1.15rem; color: var(--ink-mute); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 639px) {
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .hero-actions .btn { width: 100%; }
}
.hero-trust { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Mobile hero: compact title/copy + its own earlier 3-button CTA group, so
   the main actions land on the first screen instead of after the full
   desktop-length copy. Desktop keeps .hero-title-desktop/.hero-sub-desktop
   and the original 2-button .hero-actions untouched — only one title/sub
   variant and one CTA group is ever visible at a given width. */
.hero-title-desktop, .hero-title-mobile { display: block; }
.hero-title-mobile { display: none; }
.hero-sub-mobile { display: none; }
.hero-cta-mobile { display: none; }
@media (max-width: 699px) {
  .hero { padding-top: calc(var(--nav-height) + 1.1rem); padding-bottom: 1.5rem; }
  .hero-title { font-size: clamp(2.55rem, 12vw, 4rem); line-height: .98; }
  .hero-title-desktop { display: none; }
  .hero-title-mobile { display: block; }
  .hero-title-mobile .line { overflow-wrap: break-word; }
  html[lang="en"] .hero-title-mobile .line:not(.text-yellow) { font-size: 1.05em; }
  html[lang="en"] .hero-title-mobile .line.text-yellow { font-size: 1em; margin-top: .35em; }
  .hero-sub-desktop { display: none; }
  .hero-sub-mobile { display: block; }
  .hero-cta-mobile { display: flex; flex-direction: column; gap: 11px; }
  .hero-cta-mobile-btn { width: 100%; min-height: 48px; }
  .hero-cta-mobile-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--yellow); }
  .hero-actions { display: none; }
}

/* Magnetic CTAs — JS sets transform on mousemove/leave; CSS only handles the glow. */
.btn[data-magnetic] { transition: box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft); will-change: transform; }
.btn-primary[data-magnetic]:hover, .btn-primary[data-magnetic]:focus-visible, .btn-primary[data-magnetic]:active { box-shadow: 0 22px 44px rgba(255,208,0,0.34), 0 8px 18px rgba(0,0,0,0.35); }
.btn-ghost[data-magnetic]:hover, .btn-ghost[data-magnetic]:focus-visible, .btn-ghost[data-magnetic]:active { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(255,208,0,0.25), 0 10px 26px rgba(255,208,0,0.14); }

/* --- Repair-services selector — single synchronized device/service picker
   (card style) driving the media slideshow in #repair-services. Always a
   2-column x 3-row grid, per spec, at every width. --- */
.hero-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.hero-selector-item {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem .5rem; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(38,38,38,0.5); color: #FFFFFF; text-align: center; font-size: .85rem; font-weight: 600;
  min-height: 76px;
  transition: border-color .3s var(--ease-out), background-color .3s, transform .3s var(--ease-soft);
}
.service-selector-icon {
  width: 28px; height: 28px; flex: 0 0 28px; color: #E6E6E6;
  transition: color 180ms ease, transform 180ms ease;
}
.hero-selector-item:hover,
.hero-selector-item:focus-visible {
  border-color: rgba(255,208,0,0.65); transform: translateY(-2px);
}
.hero-selector-item:hover .service-selector-icon,
.hero-selector-item:focus-visible .service-selector-icon { color: var(--yellow); }
.hero-selector-item.is-active { border-color: var(--yellow); background: rgba(255,208,0,0.08); color: #FFFFFF; }
.hero-selector-item.is-active .service-selector-icon { color: var(--yellow); }
.hero-selector-item:active { border-color: var(--yellow); transform: scale(.98); }
@media (max-width: 719px) { .service-selector-icon { width: 24px; height: 24px; flex-basis: 24px; } }
@media (min-width: 720px) and (max-width: 1079px) { .service-selector-icon { width: 26px; height: 26px; flex-basis: 26px; } }
.hero-service-desc { font-size: .92rem; color: var(--ink-mute); max-width: 48ch; min-height: 2.6em; margin-top: 1rem; }
.hero-service-desc a { color: var(--yellow); font-weight: 600; white-space: nowrap; }

/* --- Hero media: slide crossfade + dots + autoplay toggle --- */
.hero-media { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4/5; isolation: isolate; }
/* Tablet: the media becomes a wide horizontal panel instead of an
   excessively tall portrait block. Desktop: a slightly wider panel that
   leaves room for the B2B card overlay without towering over the text. */
@media (min-width: 720px) and (max-width: 1079px) { .hero-media { aspect-ratio: 16 / 9; } }
@media (min-width: 1080px) { .hero-media { aspect-ratio: 16 / 10; } }
.hero-slides { position: relative; width: 100%; height: 100%; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity .4s var(--ease-out);
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--op-desktop, center);
  animation: ambientZoom 30s ease-in-out infinite;
}
@media (max-width: 719px) {
  .hero-slide img { object-position: var(--op-mobile, var(--op-desktop, center)); }
}
@keyframes ambientZoom {
  0%, 100% { transform: scale(1.02); }
  50% { transform: scale(1.06); }
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.75) 100%);
}
.hero-media-badge {
  position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 3;
  background: rgba(13,13,13,0.75); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,208,0,0.35); border-radius: 14px; padding: .9rem 1.1rem;
  font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--ink);
}
.hero-dots {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 3; transform: translateX(-50%);
  display: flex; justify-content: center; gap: .5rem;
}
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background-color .3s, transform .3s; }
.hero-dot.is-active { background: var(--yellow); transform: scale(1.3); }
.hero-autoplay-toggle {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13,13,13,0.7); border: 1px solid var(--line); color: var(--ink); font-size: .85rem;
}
.hero-autoplay-toggle:hover { border-color: var(--yellow); color: var(--yellow); }

/* --- Wholesale B2B hero card --- */
/* Stays in normal flow (below the image) at every breakpoint. An absolute
   corner-overlay looked right at the old 4:5 image height, but once the
   image became a shorter 16:10 panel the fixed-size card ended up covering
   ~half of it — so the card never floats over the image; it sits under it,
   full width, keeping the glow/lift hover effects without any risk of
   covering the slider. */
.hero-wholesale-card {
  position: relative; width: 100%; padding: 1.6rem;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid rgba(255,208,0,0.3); border-radius: var(--radius-card);
  overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 40px -12px rgba(255,208,0,0.25);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-soft), box-shadow .4s var(--ease-out);
}
.wholesale-corner { position: absolute; width: 16px; height: 16px; z-index: 1; pointer-events: none; border-color: rgba(255,208,0,0.5); }
.wholesale-corner--tl { top: 7px; left: 7px; border-top: 2px solid; border-left: 2px solid; border-radius: 5px 0 0 0; }
.wholesale-corner--tr { top: 7px; right: 7px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 5px 0 0; }
.wholesale-corner--bl { bottom: 7px; left: 7px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 5px; }
.wholesale-corner--br { bottom: 7px; right: 7px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 5px 0; }
.hero-wholesale-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(circle 180px at var(--gx, 50%) var(--gy, 50%), rgba(255,208,0,0.32), transparent 70%);
  transition: opacity .4s var(--ease-out); pointer-events: none;
}
.hero-wholesale-card.is-glowing::before { opacity: 1; }
.hero-wholesale-card:hover,
.hero-wholesale-card:active,
.hero-wholesale-card.is-glowing {
  border-color: rgba(255,208,0,0.65);
  transform: translateY(-5px);
  box-shadow: 0 0 50px -8px rgba(255,208,0,0.4), 0 20px 40px -12px rgba(0,0,0,0.5);
}
.hero-wholesale-kicker {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: .5rem;
}
.hero-wholesale-title { position: relative; z-index: 1; font-size: 1.3rem; line-height: 1.2; margin-bottom: .6rem; }
.hero-wholesale-desc { position: relative; z-index: 1; font-size: .87rem; color: var(--ink-mute); margin-bottom: 1rem; }
/* Single column at every width — items read as one clear list, not a
   2-column grid that can misalign row heights across languages. */
.hero-wholesale-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; }
.hero-wholesale-list li { font-size: .98rem; color: var(--ink-mute); padding-left: 1.3rem; position: relative; }
.hero-wholesale-list li::before { content: "✓"; position: absolute; left: 0; color: var(--yellow); font-weight: 700; transition: color .3s; }
.hero-wholesale-card:hover .hero-wholesale-list li::before,
.hero-wholesale-card.is-glowing .hero-wholesale-list li::before { color: var(--yellow-2); text-shadow: 0 0 8px rgba(255,208,0,0.6); }
.hero-wholesale-card .btn { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; }

/* --- Repair services (moved slider + selector) section --- */
.repair-services-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.repair-services-layout { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 1200px) {
  .repair-services-layout { grid-template-columns: 62fr 38fr; align-items: start; }
}
.repair-services-media .hero-media {
  border: 1px solid rgba(255,208,0,0.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 30px 60px -24px rgba(0,0,0,0.55), 0 0 36px -14px rgba(255,208,0,0.2);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.repair-services-media .hero-media:hover {
  border-color: rgba(255,208,0,0.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07) inset, 0 34px 64px -20px rgba(0,0,0,0.6), 0 0 46px -10px rgba(255,208,0,0.28);
}

/* --- Stats bar --- */
.stats-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-grid); }
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Services --- */
/* Flexbox (not grid) is what lets an incomplete last row (2 cards) center
   itself automatically via justify-content — grid would left-align a
   partial row under the first N columns instead. Natural card height:
   no stretch, no forced min-height. */
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-grid); }
.service-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  flex: 1 1 320px; max-width: 400px;
}
@media (min-width: 720px) { .service-card { flex-basis: calc(50% - var(--space-grid) / 2); max-width: calc(50% - var(--space-grid) / 2); } }
@media (min-width: 1080px) { .service-card { flex-basis: calc(33.333% - var(--space-grid) * 2 / 3); max-width: calc(33.333% - var(--space-grid) * 2 / 3); } }
.service-card-img { aspect-ratio: 16/10; overflow: hidden; }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-soft); }
.service-card:hover .service-card-img img { transform: scale(1.08); }
.service-card-body { padding: var(--card-padding); display: flex; flex-direction: column; gap: 1rem; }
.service-card-title { font-size: 1.3rem; font-weight: 700; }
.service-issue-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.service-issue-list li { font-size: .9rem; color: var(--ink-mute); padding-left: 1.1rem; position: relative; }
.service-issue-list li::before { content: "—"; position: absolute; left: 0; color: var(--yellow); }
.service-card-cta { padding-top: .3rem; }

/* --- Accessories --- */
.accessories-section { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .accessories-section { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.accessories-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; }
.accessories-img img { width: 100%; height: 100%; object-fit: cover; }

/* --- Buy & Sell --- */
.buysell-section { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .buysell-section { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.buysell-points { display: flex; flex-direction: column; gap: .7rem; margin: 1.3rem 0 1.6rem; }
.buysell-points li { font-size: .95rem; color: var(--ink-mute); padding-left: 1.4rem; position: relative; }
.buysell-points li::before { content: "✓"; position: absolute; left: 0; color: var(--yellow); font-weight: 700; }

/* --- Process --- */
/* Kept at fixed 1/2/4 columns (not auto-fit) — the numbered steps must read
   in a predictable order, unlike the card grids below. */
.process-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-grid); align-items: stretch; }
@media (min-width: 720px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-grid .card { height: 100%; }
.process-step-num { font-family: var(--mono); font-size: 2.2rem; color: var(--yellow-soft); -webkit-text-stroke: 1px var(--yellow); color: transparent; margin-bottom: 1rem; }
.process-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.process-desc { color: var(--ink-mute); font-size: .93rem; }

/* --- Wholesale & Mail-In cards — same visual language as the hero B2B
   card (thin gold border + soft glow) so the two feel like one system. */
.wholesale-panel-card {
  border-color: rgba(255,208,0,0.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 30px -14px rgba(255,208,0,0.2);
}
.wholesale-panel-card:hover { border-color: rgba(255,208,0,0.5); }
.wholesale-panel-title { display: flex; align-items: center; gap: .6rem; }
.wholesale-panel-icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--yellow); }

/* --- Values --- */
.values-grid {
  display: grid; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-grid);
}
.value-card { display: flex; gap: 1rem; align-items: flex-start; }
.value-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--yellow-soft); display: grid; place-items: center; color: var(--yellow); font-family: var(--display); font-weight: 700; }
.value-title { font-weight: 700; margin-bottom: .3rem; }
.value-desc { color: var(--ink-mute); font-size: .92rem; }

/* --- Reviews --- */
.reviews-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-bottom: 2.5rem; }
.reviews-stars { color: var(--yellow); font-size: 1.4rem; letter-spacing: .1em; }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 960px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { display: flex; flex-direction: column; gap: 1rem; }
.review-quote { color: var(--ink-mute); font-style: italic; }
.review-name { font-weight: 700; font-size: .92rem; }

/* Reviews empty-state — reserved, premium panel; no fake stars/counts. */
.reviews-placeholder-panel {
  max-width: 620px; margin-inline: auto; text-align: center;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  position: relative; isolation: isolate; overflow: hidden;
}
.reviews-placeholder-panel::before {
  content: ""; position: absolute; z-index: -1; inset: -20%; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(255,208,0,0.08), transparent 65%);
}
.reviews-placeholder-panel .kicker { justify-content: center; }
.reviews-placeholder-panel .section-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.reviews-placeholder-panel .section-sub { margin-inline: auto; }

/* --- FAQ --- */
.faq-list { max-width: 760px; }

/* --- Hours / Location (premium panel) --- */
.location-section { padding-block: clamp(3rem, 6vw, 5rem); }
.location-panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), var(--surface);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55);
}
.location-panel::after {
  content: ""; position: absolute; top: -30%; right: -10%; z-index: -1;
  width: 55%; height: 70%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,208,0,0.07), transparent 70%);
}
.location-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 1100px) { .location-grid { grid-template-columns: 36fr 64fr; align-items: start; } }
.location-info .section-title { margin-bottom: 12px; }

.location-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--ink-mute);
  margin-top: 0; margin-bottom: clamp(18px, 3vw, 22px);
}
.location-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.location-status.is-open::before { background: var(--yellow); box-shadow: 0 0 8px rgba(255,208,0,0.6); }

/* Compact schedule: two rows only (Monday–Saturday combined, Sunday),
   same at every breakpoint — no wrap risk, no per-day cards. */
.hours-table { margin-bottom: clamp(20px, 3vw, 24px); }
.hours-row {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 34px; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: .85rem;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row span:first-child { color: var(--ink); font-weight: 600; }
.hours-row span:last-child { color: var(--ink-mute); }
.hours-row-sunday span:last-child { color: var(--yellow); font-weight: 600; }

.location-contact { display: flex; flex-direction: column; gap: .7rem; margin-bottom: clamp(18px, 3vw, 22px); }
.contact-line { display: flex; align-items: flex-start; gap: .8rem; font-size: 1rem; word-break: break-word; }
.contact-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--yellow); margin-top: .15rem; }
.contact-line a { color: var(--ink); }
.contact-line a:hover, .contact-line a:focus-visible { color: var(--yellow); }

.location-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.location-actions .btn { min-height: 44px; flex: 1 1 auto; padding: .7rem 1.1rem; }
.location-actions .btn:hover { transform: translateY(-2px); }
.location-btn-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.location-actions .location-action-primary { flex-basis: 100%; }
.location-actions .btn:not(.location-action-primary) { flex: 1 1 0; }
.location-btn-tertiary { background: transparent; border-color: transparent; color: var(--ink-mute); }
.location-btn-tertiary:hover, .location-btn-tertiary:focus-visible { color: var(--yellow); border-color: rgba(255,208,0,0.3); }
@media (max-width: 359px) { .location-actions .btn, .location-actions .btn:not(.location-action-primary) { flex-basis: 100%; } }

/* --- Premium map frame --- */
.map-premium-frame {
  position: relative; border-radius: 22px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255,208,0,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 40px -12px rgba(255,208,0,0.18);
  background: var(--surface);
  height: 340px;
  transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.map-premium-frame:hover {
  border-color: rgba(255,208,0,0.8);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 34px 64px -20px rgba(0,0,0,0.6), 0 0 54px -10px rgba(255,208,0,0.26);
}
@media (min-width: 700px) and (max-width: 1099px) { .map-premium-frame { height: 420px; } }
@media (min-width: 1100px) { .map-premium-frame { height: 490px; } }
.map-premium-frame::before {
  content: ""; position: absolute; inset: 6px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
}
/* Bottom-left (not top-left) so it never sits under Google's own place
   info-window, which the embed draws near the pin at the top of the map —
   a real link now (opens Google Maps), not just a decorative tag. */
.map-premium-label {
  position: absolute; bottom: 14px; left: 36px; z-index: 3;
  background: rgba(13,13,13,0.75); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,208,0,0.35); border-radius: 999px;
  padding: .4rem .9rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--yellow); text-transform: uppercase;
  transition: border-color .3s, background-color .3s;
}
.map-premium-label:hover, .map-premium-label:focus-visible {
  border-color: rgba(255,208,0,0.7); background: rgba(13,13,13,0.9);
}
.map-premium-corner { position: absolute; width: 20px; height: 20px; z-index: 3; pointer-events: none; border-color: rgba(255,208,0,0.55); }
.map-premium-corner--tl { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; border-radius: 6px 0 0 0; }
.map-premium-corner--tr { top: 8px; right: 8px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 6px 0 0; }
.map-premium-corner--bl { bottom: 8px; left: 8px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 6px; }
.map-premium-corner--br { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 6px 0; }
.map-embed { position: relative; z-index: 1; width: 100%; height: 100%; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4) invert(0.92) contrast(0.9); }
@media (prefers-reduced-motion: reduce) {
  .map-premium-frame, .map-premium-frame:hover, .location-actions .btn:hover { transition: none; transform: none; }
}

/* --- Final CTA --- */
.final-cta { text-align: center; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); padding: 4rem 2rem; position: relative; overflow: hidden; isolation: isolate; }
.final-cta::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient(circle at 50% 30%, rgba(255,208,0,0.14), transparent 60%);
}
.final-cta .section-title { max-width: 26ch; margin-inline: auto; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.8rem; }

/* --- Footer --- */
.footer { border-top: 1px solid var(--line); padding: 4rem 0 2.2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.6rem; margin-bottom: 3rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-desc { color: var(--ink-mute); font-size: .92rem; max-width: 32ch; }
.footer-col-title { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--ink-mute); font-size: .92rem; padding: .35rem 0; transition: color .3s; }
.footer-col a:hover { color: var(--yellow); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid var(--line); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .85rem; color: var(--ink-dim); }
.footer-legal a:hover { color: var(--yellow); }
.footer-copy { font-size: .85rem; color: var(--ink-dim); }

/* --- Page header (sub-pages) --- */
.page-hero { padding-top: calc(var(--nav-height) + 3.5rem); padding-bottom: 3rem; }
.page-hero .section-title { max-width: 40ch; }
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: 1.4rem; margin: 2.2rem 0 .8rem; }
.legal-content h3 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
.legal-content p, .legal-content li { color: var(--ink-mute); margin-bottom: .9rem; }
.legal-content ul { padding-left: 1.3rem; list-style: disc; }
.legal-content a { color: var(--yellow); text-decoration: underline; }
.legal-updated { font-family: var(--mono); font-size: .82rem; color: var(--ink-dim); margin-bottom: 2rem; }

/* Credits page */
.credits-list li { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--ink-mute); font-size: .92rem; }
.credits-list a { color: var(--yellow); }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Square pay box — hidden until a real Square link replaces the placeholder */
.pay-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.6rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pay-box[data-square-placeholder] { display: none; }

/* Google review CTA — hidden until a real review link replaces the placeholder */
[data-review-placeholder] { display: none; }

/* --- Social media — three premium cards, original to Tecnifix.
   Flexbox (like .services-grid) so an incomplete row centers itself. --- */
.social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.5vw, 1.5rem); }
.social-card {
  position: relative; flex: 1 1 280px; max-width: 360px;
  display: flex; flex-direction: column; gap: .5rem;
  padding: clamp(1.5rem, 3vw, 1.9rem);
  background: rgba(23,23,23,0.7); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-top: 2px solid var(--social-accent, var(--line-strong));
  border-radius: var(--radius-card); overflow: hidden; isolation: isolate;
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-soft), box-shadow .35s var(--ease-out);
}
.social-card:hover, .social-card:focus-visible {
  border-color: rgba(255,208,0,0.55); border-top-color: var(--yellow);
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.5), 0 0 34px -14px rgba(255,208,0,0.22);
}
.social-card--instagram { --social-accent: #d6499a; }
.social-card--tiktok { --social-accent: #3fd6cf; }
.social-card--facebook { --social-accent: #4267ff; }
.social-card-icon { width: 30px; height: 30px; color: var(--yellow); margin-bottom: .3rem; }
.social-card-title { font-size: 1.15rem; font-weight: 700; }
.social-card-handle { font-family: var(--mono); font-size: .82rem; color: var(--ink-dim); margin-top: -.3rem; }
.social-card-desc { color: var(--ink-mute); font-size: .92rem; }
.social-card-cta { margin-top: .5rem; font-weight: 600; font-size: .9rem; color: var(--ink); transition: color .3s; }
.social-card:hover .social-card-cta, .social-card:focus-visible .social-card-cta { color: var(--yellow); }
.social-card[data-social-soon] { pointer-events: none; }
.social-card[data-social-soon] .social-card-cta { color: var(--ink-dim); }

/* Real repair gallery */
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-grid); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item {
  position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/5; isolation: isolate;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); }
.gallery-item:hover img, .gallery-item:focus-within img, .gallery-item:active img { transform: scale(1.06); }
.gallery-item:hover, .gallery-item:focus-within {
  border-color: rgba(255,208,0,0.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 20px 44px -18px rgba(0,0,0,0.5), 0 0 24px -10px rgba(255,208,0,0.25);
}
.gallery-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(13,13,13,0.85) 100%);
}
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem 1.2rem;
  font-family: var(--display); color: var(--ink); font-size: 1.02rem; font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.gallery-item figcaption::before {
  content: ""; display: block; width: 26px; height: 2px; background: var(--yellow);
  margin-bottom: .55rem; transition: width .35s var(--ease-out);
}
.gallery-item:hover figcaption::before, .gallery-item:focus-within figcaption::before { width: 42px; }

/* --- Reusable section CTA block — used after Gallery/Process/FAQ (text +
   1-2 buttons) and, in its "subtle" variant, after Why-Tecnifix/Social
   (a single tertiary text link, no button box). --- */
.section-cta { margin-top: var(--space-head); text-align: center; }
.section-cta-text { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-bottom: 1.1rem; }
.section-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.section-cta-subtle { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.section-cta-link { color: var(--yellow); font-weight: 600; }
.section-cta-link:hover, .section-cta-link:focus-visible { text-decoration: underline; }
.social-cta-text { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0; color: var(--ink-mute); }

/* Buy & Sell / Accessories — primary + secondary CTA pair */
.buysell-actions, .accessories-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* Reviews — persistent "ask about recent repairs" CTA next to the
   Google-reviews link, which stays hidden until a real URL exists. */
.reviews-contact-cta { margin-top: 1.5rem; }
[data-review-placeholder] ~ .reviews-contact-cta { margin-top: 1.5rem; }

/* --- Sticky mobile quick-action bar — homepage only, hidden entirely at
   >=700px (matches the mobile-hero breakpoint), toggled visible by JS
   once the hero has scrolled past and hidden again once the footer is
   in view, so it never sits on top of the final CTA / footer links. */
.sticky-cta-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .5rem;
  padding: .6rem var(--page-gutter);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(13,13,13,0.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
@media (max-width: 699px) {
  .sticky-cta-mobile.is-visible { display: flex; }
}
.sticky-cta-mobile-btn { flex: 1 1 0; min-height: 44px; padding: .55rem .4rem; font-size: .8rem; gap: .35rem; }
.sticky-cta-mobile-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--yellow); }
.btn-primary .sticky-cta-mobile-icon { color: #0D0D0D; }

/* Quote form — progressive step reveal (JS-enhanced; all fields remain in the
   DOM and fully usable without JS, so nothing is ever hidden without a script). */
.quote-steps-nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.quote-step-pill {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-dim);
  transition: border-color .3s, color .3s;
}
.quote-step-pill.is-active { border-color: var(--yellow); color: var(--yellow); }
.quote-step-pill.is-done { border-color: var(--line-strong); color: var(--ink-mute); }
.quote-step.is-revealing { animation: quoteStepIn .5s var(--ease-out); }
@keyframes quoteStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =============================================================
   8. Responsive helpers already inline per component (mobile-first)
   ============================================================= */

/* =============================================================
   9. Reduced-motion — only truly intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-slide img { animation: none; }
  .hero-slide { transition: none; }
  .hero-wholesale-card, .hero-wholesale-card::before { transition: none; }
  .social-card, .repair-services-media .hero-media { transition: none; }
  html { scroll-behavior: auto; }
}