/* Caliber Detail Co. — Dark OLED showroom rebuild
   Register: private showroom at night. One car, one light bar, black floor reflecting paint.
   Tokens per ui-ux-pro-max (Dark Mode OLED + action red) fused with locked direction:
   Space Grotesk / DM Sans, caliper red #FF3B30, near-blacks tinted toward the brand hue.
   Elevation is 3-step surface lightness (void -> carbon -> panel -> raise), never drop shadows. */

:root {
  /* surfaces (warm-tinted near-blacks, not stock navy-dark) */
  --void: #080606;        /* page */
  --carbon: #100c0c;      /* alternating bands */
  --panel: #171212;       /* cards */
  --raise: #201918;       /* hover / lifted */
  --edge: rgba(255, 236, 232, 0.09);
  --edge-strong: rgba(255, 236, 232, 0.18);
  /* ink */
  --chrome: #edeae9;      /* primary text — 16.4:1 on void */
  --silver: #a8a19f;      /* muted text — 7.3:1 on panel */
  /* the one chromatic accent: caliper red */
  --red: #ff3b30;         /* 5.7:1 on void */
  --red-soft: rgba(255, 59, 48, 0.14);
  --red-glow: rgba(255, 59, 48, 0.35);
  /* type */
  --display: "Space Grotesk", "Segoe UI", sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  /* rhythm */
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --r-lg: 16px;
  --r-md: 10px;
  --r-sm: 8px;
  /* motion */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-weight: 380;
  background: var(--void);
  color: var(--chrome);
  line-height: 1.65;
  letter-spacing: 0.011em; /* light-on-dark compensation */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--red); color: #0a0707; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); color: var(--chrome); text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; }
.accent { color: var(--red); }

.kicker {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
}

/* ---------- sheen: the showroom light bar (the one delight) ----------
   Sweeps the hero once on load, then rewards hover on car imagery. */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.15) 50%, transparent 58%);
  transform: translateX(-135%);
}
.sheen:hover::after { transform: translateX(135%); transition: transform 0.9s ease; }
@keyframes lightbar { from { transform: translateX(-135%); } to { transform: translateX(135%); } }
.sheen.sweep::after { animation: lightbar 1.15s ease 0.4s 1 both; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--pad);
  background: rgba(8, 6, 6, 0.86);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--edge);
  transition: background 0.25s, border-color 0.25s;
}
.topbar.scrolled { background: rgba(8, 6, 6, 0.96); border-bottom-color: var(--edge-strong); }
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .tick { color: var(--red); }
.nav { display: flex; gap: 0.25rem; }
.nav a {
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 450;
  color: var(--silver);
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.nav a:hover, .nav a:focus-visible { color: var(--chrome); background: rgba(255, 236, 232, 0.06); }

.topbar-actions { display: flex; align-items: center; gap: 0.8rem; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0.6rem;
}
.nav-toggle span { display: block; height: 2px; background: var(--chrome); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(8, 6, 6, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--edge);
    padding: 0.4rem 0 0.8rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.95rem var(--pad); border-radius: 0; }
  .nav-toggle { display: flex; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 60;
  background: var(--red);
  color: #0a0707;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus-visible { top: 0.6rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.015em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0 1.6rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); border-color: var(--red); color: #0a0707; }
.btn-red:hover, .btn-red:focus-visible {
  background: #ff554b;
  border-color: #ff554b;
  box-shadow: 0 6px 28px var(--red-glow);
}
.btn-ghost { background: transparent; border-color: var(--edge-strong); color: var(--chrome); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.btn-small { min-height: 40px; padding: 0 1.1rem; font-size: 0.85rem; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-areas: "copy" "stage" "spec";
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(2rem, 4vw, 3.25rem);
  padding: calc(4.5rem + clamp(2rem, 6vh, 5rem)) var(--pad) clamp(2.5rem, 6vh, 4.5rem);
  background: radial-gradient(58% 48% at 50% 20%, rgba(255, 59, 48, 0.08), transparent 72%);
}
.hero-copy { grid-area: copy; max-width: 52rem; display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 { margin: 1.1rem 0 1.4rem; }
.hero-sub { max-width: 34rem; color: var(--silver); font-size: 1.08rem; margin-inline: auto; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; justify-content: center; }

.hero-stage {
  grid-area: stage;
  width: 100%;
  max-width: 58rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
}
.hero-stage img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 6, 0.65), transparent 42%);
  pointer-events: none;
}
.hero-caption {
  position: absolute;
  bottom: 0.9rem;
  right: 1.1rem;
  z-index: 3;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 234, 233, 0.9);
}

/* stats as a spec readout line, not metric tiles */
.specline {
  grid-area: spec;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 3rem;
  width: 100%;
  max-width: 58rem;
  border-top: 1px solid var(--edge);
  padding-top: 1.5rem;
  margin-top: clamp(1rem, 3vh, 2rem);
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--silver);
}
.specline strong { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--red); margin-right: 0.45rem; }

/* ---------- sections ---------- */
section { padding: clamp(4rem, 9vw, 7.5rem) var(--pad); }
.section-head { margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem); max-width: 48rem; text-align: center; }
.section-sub { margin: 1rem auto 0; color: var(--silver); max-width: 40rem; }

/* ---------- services bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.cell {
  grid-column: span 3;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.cell:hover { border-color: var(--edge-strong); background: var(--raise); transform: translateY(-3px); }
.cell img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cell-copy { padding: 1.25rem 1.4rem 1.5rem; }
.cell h3 { font-size: 1.12rem; font-weight: 500; margin-bottom: 0.35rem; }
.cell p { font-size: 0.95rem; color: var(--silver); }

.cell-hero { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; }
.cell-hero img { aspect-ratio: auto; flex: 1; min-height: 0; }
.cell-hero h3 { font-size: 1.5rem; }
.cell-tall { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.cell-tall img { aspect-ratio: auto; flex: 1; min-height: 0; }

.cell-split {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}
.cell-split .cell-copy {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: 2.25rem;
  align-content: center;
  padding: 1.9rem 2rem;
}
.cell-split h3.cell-second { margin-top: 0; }
.cell-split p { margin-bottom: 0; }
.cell-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge); }
.cell-imgs .sheen { height: 100%; }
.cell-imgs img { height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover; }

@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .cell { grid-column: span 1; }
  .cell-hero, .cell-tall, .cell-split { grid-column: span 2; grid-row: auto; }
  .cell-hero img, .cell-tall img { aspect-ratio: 16 / 9; flex: none; }
  .cell-split { grid-template-columns: 1fr; }
  .cell-split .cell-copy { grid-auto-flow: row; grid-template-rows: none; row-gap: 0.35rem; }
  .cell-split h3.cell-second { margin-top: 1.1rem; }
  .cell-imgs img { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .cell { grid-column: span 2; }
}

/* ---------- before / after ---------- */
.proof { background: var(--carbon); }
.ba {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-lg);
  user-select: none;
  touch-action: pan-y;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); will-change: clip-path; }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--red);
  transform: translateX(-50%);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ba-grip {
  position: absolute;
  width: 3rem; height: 3rem;
  background: #0a0707;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px var(--red-glow);
}
.ba-tag {
  position: absolute;
  top: 1rem;
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(8, 6, 6, 0.75);
  backdrop-filter: blur(6px);
  color: var(--chrome);
  pointer-events: none;
}
.ba-tag-l { left: 1rem; }
.ba-tag-r { right: 1rem; color: var(--red); }

/* ---------- packages ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 70rem; margin-inline: auto; }
@media (max-width: 960px) { .pkg-grid { grid-template-columns: 1fr; max-width: 34rem; } }
.pkg {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.7rem;
  position: relative;
  transition: border-color 0.25s, transform 0.25s;
}
.pkg:hover { border-color: var(--edge-strong); transform: translateY(-3px); }
.pkg-hot {
  border-color: rgba(255, 59, 48, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.3), 0 14px 60px rgba(255, 59, 48, 0.12);
}
.pkg-hot:hover { border-color: var(--red); }
.pkg-num { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); }
.pkg-hot .pkg-num { color: var(--red); }
.pkg-flag {
  position: absolute;
  top: -0.85rem;
  right: 1.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--red);
  color: #0a0707;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
}
.pkg h3 { font-size: 1.5rem; font-weight: 500; margin: 0.55rem 0 0.1rem; }
.pkg-price { font-family: var(--display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.02em; margin-bottom: 1.1rem; display: flex; align-items: baseline; gap: 0.4rem; }
.pkg-price .lead { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--silver); }
.pkg-hot .pkg-price { color: var(--red); }
.pkg ul { list-style: none; display: grid; gap: 0.5rem; margin-bottom: 1.3rem; }
.pkg li { padding-left: 1.15rem; position: relative; font-size: 0.95rem; color: var(--chrome); }
.pkg li::before { content: "/"; position: absolute; left: 0; color: var(--red); font-family: var(--display); font-weight: 500; }
.pkg-meta { border-top: 1px solid var(--edge); padding-top: 0.9rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); }
.pkg-note { margin-top: 1.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); text-align: center; }

/* ---------- gallery ---------- */
.gallery { background: var(--carbon); }
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 960px) { .gal-grid { grid-template-columns: 1fr; max-width: 34rem; } }
.gal-grid figure { margin: 0; }
.gal-grid .sheen { border: 1px solid var(--edge); border-radius: var(--r-lg); }
.gal-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.6s ease; }
.gal-grid .sheen:hover img { transform: scale(1.045); }
.gal-grid figcaption { margin-top: 0.65rem; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--silver); }

/* ---------- reviews ---------- */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 66rem;
  margin-inline: auto;
}
.review-grid blockquote {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 1.9rem 2rem;
}
/* lead quote: full-width feature, scaled up to carry the row — equal weight, no dead band */
.review-lead {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.6rem, 5vw, 3.5rem);
  background: linear-gradient(160deg, var(--raise), var(--panel));
}
.review-lead p { font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2.3rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; max-width: 40rem; }
.review-grid p { font-size: 1.02rem; line-height: 1.55; }
.review-grid footer { margin-top: 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--silver); }
.review-lead footer { margin-top: 1.3rem; }
@media (max-width: 700px) {
  .review-grid { grid-template-columns: 1fr; }
}

/* ---------- booking ---------- */
.book { background: var(--carbon); }
.book-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 70rem;
  margin-inline: auto;
}
.book-copy h2 { margin-top: 0.9rem; }
.book-copy > p { color: var(--silver); margin-top: 1.1rem; max-width: 28rem; }
.book-facts { list-style: none; margin-top: 2.2rem; display: grid; gap: 0.8rem; }
.book-facts strong {
  color: var(--red);
  margin-right: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.book-facts a { color: inherit; text-underline-offset: 3px; }
.book-form { display: grid; gap: 1.05rem; align-content: start; }
.book-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--silver);
}
.book-form input, .book-form textarea {
  font: 1rem var(--body);
  letter-spacing: 0.01em;
  color: var(--chrome);
  background: #0d0a0a;
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-sm);
  padding: 0.85rem 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.book-form input::placeholder, .book-form textarea::placeholder { color: rgba(168, 161, 159, 0.55); }
.book-form input:focus, .book-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.form-done { color: var(--chrome); font-weight: 600; }
.form-err { color: #ff9d95; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; }
.book-form input[aria-invalid="true"] { border-color: #ff9d95; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--edge);
  padding: 2.4rem var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--silver);
}
.footer .wordmark { color: var(--chrome); }
.foot-tag { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.2rem; }
.foot-meta a { color: inherit; text-underline-offset: 3px; }
.foot-credit a { color: var(--red); text-underline-offset: 3px; }

/* ---------- reveal (content visible unless JS is present to animate it back in) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.7s var(--ease-quart); }
.js .reveal.in { opacity: 1; transform: none; }

/* ======================================================================
   CINEMATIC MOTION LAYER
   Load choreography, hero atmosphere, scroll life, micro-interactions.
   All entrance states are gated under html.anim (added only when JS runs
   AND motion is allowed) so content is never hidden without a way back.
   ====================================================================== */

/* scroll progress rail */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 60;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--red), #ff8079);
  box-shadow: 0 0 12px var(--red-glow);
  pointer-events: none;
}

/* --- load-choreography initial states (only while animating) --- */
.anim .topbar { transform: translateY(-100%); }
.anim .scroll-progress { opacity: 0; }
.anim .hero .kicker,
.anim .hero-sub,
.anim .hero-ctas .btn,
.anim .hero-stage,
.anim .specline > span { opacity: 0; }

/* headline line-mask reveal — FAIL-OPEN: the headline is fully visible by default.
   The masked hidden state is applied ONLY by GSAP (inline, via fromTo), which then
   guarantees it animates back to visible. No CSS rule hides the H1, so if the motion
   layer never runs the headline still shows. */
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line-in { display: inline-block; will-change: transform; }

/* --- hero atmosphere: a slow drifting bay light --- */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(44% 52% at 50% 22%, var(--red-soft), transparent 68%);
  animation: heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: 0.55; }
  100% { transform: translate3d(3%, 2%, 0)  scale(1.16);  opacity: 1; }
}
.hero-stage img { will-change: transform; }

/* --- micro-interaction: light-sweep on buttons --- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
  transform: translateX(-140%);
  transition: transform 0.6s var(--ease-quart);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(140%); }

/* --- micro-interaction: nav underline --- */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem;
  bottom: 0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s var(--ease-quart);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* --- cards: add glow to the existing lift --- */
.cell { transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease-quart), box-shadow 0.3s ease; }
.pkg  { transition: border-color 0.25s, transform 0.3s var(--ease-quart), box-shadow 0.3s ease; }
.cell:hover { box-shadow: 0 14px 46px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--red-glow); }
.pkg:hover  { box-shadow: 0 14px 46px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--red-glow); }

/* --- recommended package: a quiet breathing glow --- */
.pkg-hot { animation: hotPulse 3.6s ease-in-out infinite; }
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.30), 0 14px 60px rgba(255, 59, 48, 0.12); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.55), 0 18px 72px rgba(255, 59, 48, 0.22); }
}

/* --- before/after: pulse the grip to invite the drag --- */
.ba-grip { animation: gripPulse 2.4s ease-in-out infinite; }
@keyframes gripPulse {
  0%, 100% { box-shadow: 0 0 24px var(--red-glow); }
  50%      { box-shadow: 0 0 10px var(--red-glow), 0 0 0 7px rgba(255, 59, 48, 0.12); }
}

/* steady numerals for count-ups */
.stat-num, .pkg-price { font-variant-numeric: tabular-nums; }

/* ---------- reduced motion: designed, responsive, no sweeps ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* content is never hidden by motion */
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-title .line-in { transform: none !important; }

  /* stop continuous + entrance animations and decorative sweeps */
  .hero::before,
  .pkg-hot,
  .ba-grip { animation: none !important; }
  .sheen::after, .sheen.sweep::after { animation: none !important; transition: none !important; transform: translateX(-135%) !important; }
  .btn::after { display: none !important; }

  /* keep interaction feedback obvious: scale + colour + glow, never a slide */
  .cell, .pkg { transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-quart) !important; }
  .cell:hover, .pkg:hover {
    transform: scale(1.015) !important;
    border-color: var(--red) !important;
    box-shadow: 0 0 0 1px var(--red-glow), 0 8px 30px rgba(255, 59, 48, 0.16) !important;
  }
  .gal-grid img { transition: transform 0.25s var(--ease-quart) !important; }
  .gal-grid .sheen:hover img { transform: scale(1.035) !important; }
}