/* ============================================================
   Build 4 You Solutions — website styles (buildless, plain CSS)
   Brand palette pulled from the B4Y Designer app + logo.
   Design language: dark, cinematic, blueprint precision.
   EDIT colors here once; they apply site-wide.
   ============================================================ */

:root {
  /* ---- Brand palette (DARK cinematic theme) ---- */
  --slate: #37434C;            /* brand slate */
  --slate-700: #2b343b;
  --accent: #3E83C3;           /* primary accent blue */
  --accent-600: #336fa8;       /* accent hover */
  --accent-light: #67aef0;     /* the "4" blue — highlights */
  --bluegray: #A9B8C5;

  /* Dark theme surfaces */
  --ink: #11171c;              /* deepest background */
  --ink-800: #161e24;          /* page background */
  --ink-700: #1c262d;          /* raised panels / cards */
  --ink-600: #243038;          /* hover / borders-on-dark */
  --bg: #161e24;               /* page background (dark) */
  --panel: #1c262d;            /* cards / panels (dark) */
  --line: rgba(255,255,255,0.10); /* hairlines on dark */
  --text: #e7edf2;             /* body text (light on dark) */
  --text-strong: #ffffff;      /* headings */
  --text-muted: #9fb0bd;       /* secondary text */
  --success: #38c08a;          /* "insured/licensed" trust green */

  /* ---- Type scale (fluid) ---- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(1.95rem, 1.6rem + 1.8vw, 3rem);
  --step-4: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

  /* ---- Spacing & shape ---- */
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(55, 67, 76, 0.06), 0 2px 6px rgba(55, 67, 76, 0.06);
  --shadow-md: 0 6px 24px rgba(55, 67, 76, 0.10);
  --shadow-lg: 0 20px 50px rgba(55, 67, 76, 0.16);
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: var(--accent-light); text-decoration: none; }
a:hover { color: #8cc3f5; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.06; color: var(--text-strong); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

/* Big cinematic section headline */
.display-xl { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Section variants */
.section--panel { background: var(--ink-700); }
.section--deep { background: var(--ink); }

/* Eyebrow label — small structural marker, blueprint vernacular */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.eyebrow::before {
  content: ""; width: 28px; height: 0; border-top: 2px solid var(--accent);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  padding: 0.85rem 1.5rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(62,131,195,0.30); }
.btn--primary:hover { background: var(--accent-600); color: #fff; box-shadow: 0 10px 30px rgba(62,131,195,0.42); transform: translateY(-1px); }
.btn--solid-slate { background: var(--accent); color: #fff; }
.btn--solid-slate:hover { background: var(--accent-600); color: #fff; }
.btn--ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,0.28); }
.btn--ghost:hover { border-color: var(--accent-light); color: var(--accent-light); }
.btn--light { background: #fff; color: var(--slate); }
.btn--light:hover { background: #eef3f8; color: var(--slate); }
.btn--lg { padding: 1rem 1.85rem; font-size: 1.05rem; }
.btn--glass { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.btn--glass:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* ---- Blueprint grid background utility ---- */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(103,174,240,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,174,240,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---- Accessibility ---- */
:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; background: var(--slate); color: #fff;
  padding: 0.6rem 1rem; border-radius: 8px; z-index: 200; transition: top .2s;
}
.skip-link:focus { top: 0.5rem; color: #fff; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Icon base */
.icon { display: block; }

/* ---- Scroll reveal (premium touch; disabled for reduced-motion) ---- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header[data-state="top"] { background: linear-gradient(180deg, rgba(17,23,28,0.55), transparent); }
.site-header[data-state="scrolled"] {
  background: rgba(17,23,28,0.92); backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-logo { height: 36px; width: auto; flex: 0 0 auto; }
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: #fff; letter-spacing: -0.02em;
}
.brand-4 { color: var(--accent-light); }
/* ---- Primary nav (links + Services dropdown) ---- */
.nav { display: none; gap: 1.85rem; align-items: center; }
.nav-link {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: rgba(255,255,255,0.88); position: relative; padding-block: 0.25rem;
  background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--accent-light); transition: width .2s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }
.nav-caret { transition: transform .2s ease; }

/* Services dropdown */
.nav-item--has-menu { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 230px; padding: 0.5rem; z-index: 120;
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Invisible "bridge" fills the gap between the Services button and the menu so
   moving the mouse down into the list doesn't drop the hover (the menu stays
   open and the links are clickable without needing a click first). */
.nav-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem;
}
.nav-menu a {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: rgba(255,255,255,0.86); padding: 0.6rem 0.75rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.nav-menu a:hover { background: var(--ink-600); color: #fff; }
.nav-menu-all { margin-top: 0.25rem; border-top: 1px solid var(--line); color: var(--accent-light); padding-top: 0.7rem; }
/* Open on hover (desktop) or when JS sets data-open (click / keyboard / touch). */
.nav-item--has-menu:hover .nav-menu,
.nav-item--has-menu[data-open] .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-item--has-menu:hover .nav-caret,
.nav-item--has-menu[data-open] .nav-caret { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: 0.85rem; }
.header-phone { display: none; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 600; color: #fff; }
.header-phone:hover { color: var(--accent-light); }
.header-phone-icon { color: var(--accent-light); }
.header-quote { display: none; }

/* ---- Mobile hamburger button (hidden on desktop) ---- */
.nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; cursor: pointer;
  background: none; border: 0; flex: 0 0 auto;
}
.nav-burger-bar { height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 820px) {
  .nav { display: flex; }
  .header-phone { display: inline-flex; }
  .nav-burger { display: none; }
}
@media (min-width: 1020px) {
  .header-quote { display: inline-flex; }
}

/* ---- Mobile: nav becomes a slide-down panel toggled by the burger ---- */
@media (max-width: 819px) {
  .nav {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 110;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 1.1rem 1.25rem;
    background: rgba(17,23,28,0.98); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    max-height: calc(100dvh - 64px); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav[data-open] { display: flex; transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-link { font-size: 1.05rem; padding: 0.9rem 0.25rem; width: 100%; }
  .nav-link::after { display: none; }
  .nav > .nav-link, .nav-item--has-menu { border-bottom: 1px solid var(--line); }
  .nav-toggle { justify-content: space-between; width: 100%; }
  /* On mobile the dropdown is an inline accordion, not a floating popover. */
  .nav-menu {
    position: static; transform: none; min-width: 0; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none; padding: 0 0 0.5rem 0.6rem;
    display: none;
  }
  .nav-item--has-menu[data-open] .nav-menu { display: flex; }
  .nav-item--has-menu:hover .nav-menu { /* no hover-open on touch */ display: none; }
  .nav-item--has-menu[data-open]:hover .nav-menu { display: flex; }
  .nav-menu a { font-size: 1rem; padding: 0.7rem 0.5rem; }
  .nav-menu-all { border-top: 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88vh, 760px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(4rem, 12vh, 8rem) 0;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(180deg, rgba(43,52,59,0.78) 0%, rgba(43,52,59,0.55) 40%, rgba(43,52,59,0.92) 100%),
    var(--hero-img);
  background-size: cover; background-position: center;
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: -1; opacity: 0.35; mix-blend-mode: overlay;
}
.hero-inner { color: #fff; max-width: 760px; padding-bottom: clamp(3rem, 8vh, 5rem); }
.eyebrow--ondark { color: #cfe0f1; }
.eyebrow--ondark::before { border-color: var(--accent-light); }
.hero-title {
  color: #fff; margin-top: 1rem;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; font-weight: 800;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hl { color: var(--accent-light); }
.hero-sub {
  margin-top: 1.5rem; max-width: 52ch; font-size: var(--step-1);
  color: #e3eaf0; line-height: 1.55; text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero-stats {
  position: relative; z-index: 1; margin-top: auto;
  background: rgba(43,52,59,0.55); border-top: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem;
  padding-block: 1.5rem;
}
.stat { color: #fff; }
.stat-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.5vw, 1.5rem); color: #fff; line-height: 1.1;
}
.stat-label { display: block; font-size: var(--step--1); color: #b9c6d1; margin-top: 0.2rem; }
@media (min-width: 820px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .stat + .stat { border-left: 1px solid rgba(255,255,255,0.12); padding-left: 1.5rem; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-lead { margin-top: 1rem; color: var(--text-muted); font-size: var(--step-1); line-height: 1.55; }
.service-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.service-card {
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  position: relative; overflow: hidden;
}
.service-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px;
  background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .2s ease;
}
.service-card:hover { transform: translateY(-5px); background: var(--ink-600); border-color: rgba(103,174,240,0.35); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.service-card:hover::after { transform: scaleY(1); }
.service-icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 14px; background: rgba(62,131,195,0.16); color: var(--accent-light);
  border: 1px solid rgba(103,174,240,0.28);
}
.service-title { margin-top: 1.15rem; }
.service-desc { margin-top: 0.6rem; color: var(--text-muted); }
.service-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--accent-light);
}
.service-link .link-arrow { transition: transform .15s ease; }
.service-link:hover .link-arrow { transform: translateX(4px); }

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: step;
}
.process-step {
  position: relative; padding: 1.9rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(28,38,45,0.85), rgba(22,30,36,0.85));
}
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(103,174,240,0.55);
  letter-spacing: -0.03em;
}
.step-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; background: rgba(62,131,195,0.16); color: var(--accent-light);
}
.step-title { margin-top: 1.1rem; font-size: 1.3rem; }
.step-desc { margin-top: 0.55rem; color: var(--text-muted); font-size: 0.97rem; }
@media (min-width: 980px) {
  .process-step:not(:last-child)::after {
    content: ""; position: absolute; top: 3.2rem; right: -0.75rem; width: 1.5rem; height: 2px;
    background: linear-gradient(90deg, rgba(103,174,240,0.5), transparent); z-index: 1;
  }
}
/* Compact one-line process used on the homepage teaser (full version on the
   Services hub uses .process-grid above). */
.process-mini {
  list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 880px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 0.9rem;
}
.process-mini li {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--text);
  background: linear-gradient(180deg, rgba(28,38,45,0.85), rgba(22,30,36,0.85));
  border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.25rem;
}
.process-mini__num {
  font-weight: 800; color: transparent; -webkit-text-stroke: 1.2px rgba(103,174,240,0.7);
  letter-spacing: -0.02em;
}

/* ============================================================
   WORK
   ============================================================ */
.work-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.work-spotlight {
  margin: 0 0 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-700);
  box-shadow: var(--shadow-md);
}
.work-spotlight img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.work-spotlight__caption {
  padding: 1rem 1.2rem 1.15rem;
  color: var(--text-muted);
  font-size: var(--step--1);
}
.work-tile {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-700); aspect-ratio: 16 / 11;
}
.work-tile--feature { aspect-ratio: 16 / 12; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work-tile:hover img { transform: scale(1.05); }
.work-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.3rem; color: #fff;
  background: linear-gradient(transparent, rgba(8,12,15,0.55) 40%, rgba(8,12,15,0.92));
}
.work-tag {
  align-self: flex-start; font-family: var(--font-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 0.3rem 0.65rem; border-radius: 999px;
  margin-bottom: 0.35rem;
}
.work-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }
.work-tile--feature .work-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.work-loc { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--step--1); color: #cfd8e0; }
.work-loc svg { color: var(--accent-light); }
.work-cta {
  margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--line);
}
.work-cta p { color: var(--text-muted); max-width: 48ch; }
@media (min-width: 720px) {
  .work-layout { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .work-layout { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .work-tile { aspect-ratio: 4 / 3; }
  .work-tile--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ============================================================
   WHY US
   ============================================================ */
.why-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.why-lead { margin-top: 1.1rem; color: var(--text-muted); font-size: var(--step-1); max-width: 46ch; line-height: 1.55; margin-bottom: 1.75rem; }
.why-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.why-item {
  display: flex; gap: 1rem; padding: 1.4rem;
  background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .2s ease, transform .2s ease;
}
.why-item:hover { border-color: rgba(103,174,240,0.35); transform: translateY(-3px); }
.why-icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px; background: rgba(62,131,195,0.16); color: var(--accent-light);
}
.why-title { font-size: 1.15rem; }
.why-desc { margin-top: 0.35rem; color: var(--text-muted); font-size: 0.95rem; }
@media (min-width: 920px) {
  .why-inner { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; }
  .why-list { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   DESIGNER PROMO
   ============================================================ */
.designer {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(62,131,195,0.28), transparent 60%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));
  color: #e6edf3;
}
.designer-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.eyebrow--light { color: var(--accent-light); }
.eyebrow--light::before { border-color: var(--accent-light); }
.designer-title { color: #fff; }
.designer-sub { margin-top: 1.1rem; color: #b8c4ce; font-size: var(--step-1); max-width: 48ch; line-height: 1.5; }
.designer-note {
  margin-top: 1.1rem;
  max-width: 42ch;
  color: #d6dee5;
  font-size: var(--step--1);
  line-height: 1.6;
}
.designer-feats { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.designer-feats li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 500; color: #d6dee5; }
.designer-feats .feat-ic { color: var(--accent-light); flex-shrink: 0; }
.designer-btn { margin-top: 1.75rem; }
.designer-visual { display: flex; justify-content: center; }
.designer-mock {
  width: 100%; max-width: 420px; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock-bar { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; background: #eef2f6; border-bottom: 1px solid var(--line); }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--bluegray); }
.mock-body { padding: 1.25rem; display: grid; gap: 0.75rem; background-color: #fff; }
.mock-room { height: 140px; border-radius: 8px; border: 2px solid var(--accent); background: rgba(62,131,195,0.08); }
.mock-row { display: flex; gap: 0.75rem; }
.mock-chip { height: 38px; flex: 1; border-radius: 6px; background: #eef2f6; border: 1px solid var(--line); }
.mock-chip.wide { flex: 1; background: var(--accent-light); opacity: 0.5; }
@media (min-width: 900px) {
  .designer-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--ink); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.contact-lead { margin-top: 1rem; color: var(--text-muted); font-size: var(--step-1); max-width: 42ch; }
.contact-promise {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(103,174,240,0.18);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(62,131,195,0.12), rgba(62,131,195,0.04));
  max-width: 42rem;
}
.contact-promise strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-strong);
}
.contact-promise p {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}
.contact-methods { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: 1rem; }
.contact-methods li { display: flex; align-items: center; gap: 0.9rem; }
.cm-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(62,131,195,0.16); color: var(--accent-light); flex-shrink: 0;
}
.cm-label { display: block; font-size: var(--step--1); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.cm-value { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.cm-value:hover { color: var(--accent-light); }
.contact-form-wrap {
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4); padding: clamp(1.5rem, 4vw, 2.25rem);
}
.form-title { margin-bottom: 1.25rem; }
.form-intro {
  margin: -0.5rem 0 1.25rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 48ch;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--text); }
input, select, textarea {
  font-family: var(--font-body); font-size: var(--step-0); padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-800); color: var(--text);
  width: 100%;
}
input::placeholder, textarea::placeholder { color: #71808c; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(62,131,195,0.25); }
textarea { resize: vertical; }
.form-submit { width: 100%; margin-top: 0.5rem; }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.form-note { margin-top: 0.85rem; font-size: var(--step--1); color: var(--text-muted); text-align: center; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: #cfd8e0; padding-block: 3.5rem 6rem; margin-top: 0; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid; gap: 2.5rem; grid-template-columns: 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-logo { height: 40px; width: auto; flex: 0 0 auto; }
.footer-name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.footer-4 { color: var(--accent-light); }
.footer-tagline { margin-top: 0.85rem; color: #aebcc7; font-style: italic; }
.footer-area { margin-top: 0.4rem; color: #8d9aa4; font-size: var(--step--1); }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h4 { color: #fff; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
.footer-col a { color: #cfd8e0; }
.footer-col a:hover { color: var(--accent-light); }
.footer-legal {
  padding-top: 1.75rem; display: flex; flex-direction: column; gap: 0.35rem;
  font-size: var(--step--1); color: #8d9aa4;
}
.legal-badge {
  display: inline-block; margin-left: 0.5rem; color: var(--accent-light);
  font-weight: 600;
}
.legal-line { color: #7e8b95; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 760px) {
  .site-footer { padding-bottom: 3.5rem; }
}

/* ============================================================
   STICKY CALL BAR (mobile)
   ============================================================ */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--slate); box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
  padding: 0.4rem; gap: 0.4rem;
}
.sticky-call__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: #fff; padding: 0.7rem 0.4rem; border-radius: 8px;
}
.sticky-call__btn--call { background: var(--accent); }
.sticky-call__btn--text { background: var(--accent-600); }
.sticky-call__btn--quote { background: rgba(255,255,255,0.12); }
.sticky-call__btn:hover { color: #fff; filter: brightness(1.06); }
@media (min-width: 760px) { .sticky-call { display: none; } }

/* ============================================================
   TRUST BAR  (credentials, just under the hero)
   ============================================================ */
.trustbar {
  background:
    linear-gradient(180deg, rgba(28,38,45,0.98), rgba(22,30,36,0.98));
  border-block: 1px solid var(--line);
}
.trustbar-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;
  padding-block: 1.4rem;
}
.trust-item {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--text); font-family: var(--font-body);
  min-height: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.trust-item--static { cursor: default; }
a.trust-item:hover {
  color: var(--text);
  border-color: rgba(103,174,240,0.28);
  background: rgba(103,174,240,0.06);
  transform: translateY(-2px);
}
a.trust-item:hover .trust-sub { color: var(--accent-light); }
.trust-ic { color: var(--accent-light); flex: none; }
.trust-item .trust-text { display: flex; flex-direction: column; line-height: 1.2; }
.trust-item strong { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); font-size: 0.98rem; }
.trust-sub { font-size: var(--step--1); color: var(--text-muted); transition: color .15s ease; }
@media (min-width: 720px) {
  .trustbar-inner { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   SECTION CTA  (repeated primary call-to-action band)
   ============================================================ */
.section-cta {
  margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}
.section-cta p { color: var(--text-muted); max-width: 52ch; font-size: var(--step-1); }
/* Standalone CTA (service-detail pages): its own band, no divider line. */
.section-cta--standalone { margin-top: 0; padding-top: 0; border-top: 0; }
.section-cta--standalone h2 { margin-bottom: 0.4rem; }
@media (min-width: 760px) {
  .section-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (max-width: 759px) {
  .section { padding-block: 3.25rem; }
  .section-head { margin-bottom: 2rem; }
  .section-lead { font-size: 1.06rem; }
  .display-xl { font-size: clamp(2rem, 10vw, 3.1rem); line-height: 1.04; }

  .site-header[data-state="top"] { background: rgba(17,23,28,0.82); backdrop-filter: blur(8px); }
  .header-inner { min-height: 64px; gap: 0.75rem; }
  .brand { gap: 0.5rem; min-width: 0; }
  .brand-logo { height: 32px; }
  .brand-name { font-size: 1.05rem; }
  .header-cta { margin-left: auto; }

  .hero {
    min-height: auto;
    padding-block: 5.75rem 0;
  }
  .hero-inner { padding-bottom: 2.5rem; }
  .hero-title { font-size: clamp(2.35rem, 12vw, 3.8rem); }
  .hero-sub { font-size: 1.04rem; max-width: 34ch; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 54px;
  }
  .stat-row {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding-block: 1.1rem;
  }
  .stat {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .stat:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .service-card,
  .process-step,
  .why-item,
  .contact-form-wrap {
    padding: 1.35rem;
  }

  .work-spotlight { margin-bottom: 1.5rem; }
  .work-meta { padding: 1.1rem; }
  .work-title,
  .work-tile--feature .work-title { font-size: 1.22rem; }
  .work-cta,
  .section-cta {
    margin-top: 2.2rem;
    padding-top: 1.5rem;
    text-align: left;
  }
  .work-cta .btn,
  .section-cta .btn {
    width: 100%;
  }

  .why-inner,
  .designer-inner,
  .contact-grid {
    gap: 2rem;
  }

  .designer-mock { max-width: 100%; }
  .mock-room { height: 120px; }

  .area-shell {
    padding: 1.5rem 1rem 1.75rem;
    border-radius: 22px;
  }
  .area-list {
    margin-top: 2rem;
    gap: 0.55rem;
  }
  .area-list li {
    width: calc(50% - 0.35rem);
    text-align: center;
    padding-inline: 0.85rem;
  }

  .contact-methods {
    margin-top: 1.35rem;
    gap: 0.85rem;
  }
  .contact-methods li { align-items: flex-start; }
  .field-row { grid-template-columns: 1fr; }
  .form-submit { min-height: 54px; }

  .footer-grid { gap: 2rem; }
  .site-footer { padding-block: 3rem 6rem; }
}

/* Centered section head variant (service area) */
.section-head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
/* Left-aligned head (explicit; default is already left) */
.section-head--left { margin-inline: 0; text-align: left; }

/* ============================================================
   INNER-PAGE HERO + BREADCRUMBS (services hub, service pages, etc.)
   The site header is position:fixed, so inner pages add top padding
   to clear it (the homepage hero is full-height and absorbs this).
   ============================================================ */
.page-hero { padding-top: clamp(7rem, 12vw, 9.5rem); }
.page-hero .section-head { max-width: 760px; }
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.crumbs {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--text-muted);
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent-light); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ============================================================
   SERVICE-DETAIL PAGES (Phase 3): intro split, included list,
   photo strip, FAQ, related services. Reuses existing tokens.
   ============================================================ */
/* Intro: copy on one side, a feature photo on the other */
.svc-intro { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) { .svc-intro { grid-template-columns: 1.05fr 0.95fr; align-items: center; } }
.svc-intro__body p { color: var(--text-muted); font-size: var(--step-1); line-height: 1.6; margin-top: 1rem; }
.svc-intro__media { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.svc-intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* "What's included" check list */
.included-list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 0.85rem; }
@media (min-width: 620px) { .included-list { grid-template-columns: 1fr 1fr; gap: 0.85rem 1.5rem; } }
.included-list li { position: relative; padding-left: 2rem; color: var(--text); line-height: 1.5; }
.included-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Photo strip: 1–3 finished-project shots */
.photo-strip { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 720px) { .photo-strip--3 { grid-template-columns: repeat(3, 1fr); } .photo-strip--2 { grid-template-columns: repeat(2, 1fr); } }
.photo-strip figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.photo-strip img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* FAQ — plain <details>, no JS, accessible */
.faq-list { margin-top: 1.75rem; display: grid; gap: 0.75rem; max-width: 820px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--ink-700); overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-family: var(--font-display);
  font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--accent-light); line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 1.25rem 1.2rem; color: var(--text-muted); line-height: 1.6; }

/* Related services chips at the bottom of each detail page */
.related-services { display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; margin-top: 1.75rem; }
.related-services a {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  color: var(--text); background: var(--ink-700); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.55rem 1.1rem; transition: border-color .2s ease, color .2s ease;
}
.related-services a:hover { border-color: var(--accent-light); color: var(--accent-light); }

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area-shell {
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(17,23,28,0.6), rgba(17,23,28,0.82));
  box-shadow: var(--shadow-md);
}
.area-list {
  list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 860px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.7rem;
}
.area-list li {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  color: var(--text); background: var(--ink-700); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.55rem 1.1rem;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.area-list li:hover {
  transform: translateY(-2px);
  border-color: rgba(103,174,240,0.34);
  color: var(--text-strong);
}
.area-counties { margin-top: 1.75rem; text-align: center; color: var(--text-muted); font-size: var(--step--1); }
.area-count { color: var(--accent-light); font-family: var(--font-display); }

/* ============================================================
   BEFORE / AFTER COMPARE SLIDER
   Two photos stacked in one frame; the "before" layer is clipped
   by a draggable native range input. Keyboard-accessible for free.
   ============================================================ */
.ba { margin: 0 0 2rem; }
.ba-stage {
  --ba-pos: 50%;
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--ink-700); box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  /* Let the visitor drag the compare slider without the page scrolling away. */
  touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The "before" layer sits on top, clipped to the slider position. */
.ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
/* Smooth glide ONLY during the one-time intro nudge — dragging stays instant. */
.ba-stage[data-ba-nudging] .ba-before-wrap { transition: clip-path 0.45s ease; }
.ba-stage[data-ba-nudging] .ba-handle { transition: left 0.45s ease, transform 0.15s ease; }
/* Divider line at the split. */
.ba-before-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: var(--accent-light); box-shadow: 0 0 0 1px rgba(8,12,15,0.35);
}
.ba-tag {
  position: absolute; top: 0.9rem; z-index: 3;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: rgba(8,12,15,0.6); backdrop-filter: blur(2px);
  padding: 0.3rem 0.6rem; border-radius: 999px;
}
.ba-tag--before { left: 0.9rem; }
.ba-tag--after  { right: 0.9rem; }
/* The range input stays for keyboard access, but pointer drag (main.js) is the
   primary control, so the input no longer needs to intercept pointer events —
   that's what let drags "slip". Keep it focusable for keyboard users only. */
.ba-range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; opacity: 0; -webkit-appearance: none; appearance: none;
  pointer-events: none; /* the stage handles pointer drags */
}
.ba-range:focus-visible + .ba-handle { outline: 3px solid var(--accent-light); outline-offset: 3px; }
/* Visible round handle, positioned at the split. Bigger + bordered so it reads
   clearly against any photo. pointer-events off so the stage gets the drag. */
.ba-handle {
  position: absolute; top: 50%; left: var(--ba-pos); z-index: 3;
  transform: translate(-50%, -50%); pointer-events: none;
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--accent-light);
  border: 3px solid #fff;
  box-shadow: 0 2px 14px rgba(8,12,15,0.55);
  transition: transform 0.15s ease;
}
/* Subtle grow while actively dragging for tactile feedback. */
.ba-stage[data-ba-dragging] .ba-handle { transform: translate(-50%, -50%) scale(1.08); }

/* "You can slide the other way" hint: a pulsing chevron on the side that still
   has hidden image. When the split is shoved to one edge, the chevron on the
   OPPOSITE side pulses to invite dragging back. Hidden once you're in the
   middle (both sides already visible). */
.ba-hint {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  pointer-events: none; color: #fff; opacity: 0;
  filter: drop-shadow(0 1px 3px rgba(8,12,15,0.7));
  transition: opacity 0.25s ease;
}
.ba-hint--left  { left: 0.9rem; }
.ba-hint--right { right: 0.9rem; }
/* Show the chevron pointing toward the hidden image, and pulse it. */
.ba-stage[data-ba-edge="left"]  .ba-hint--right { opacity: 0.95; animation: baNudgeR 1.4s ease-in-out infinite; }
.ba-stage[data-ba-edge="right"] .ba-hint--left  { opacity: 0.95; animation: baNudgeL 1.4s ease-in-out infinite; }
/* While dragging, drop the hint so it's not distracting. */
.ba-stage[data-ba-dragging] .ba-hint { opacity: 0 !important; animation: none !important; }
@keyframes baNudgeR { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(6px); } }
@keyframes baNudgeL { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-6px); } }

.ba-caption {
  padding: 1rem 0.2rem 0; color: var(--text-muted); font-size: var(--step--1); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ba-img, .ba-before-wrap, .ba-handle { transition: none; }
  /* Keep the hint visible (so the affordance still exists) but stop it pulsing. */
  .ba-stage[data-ba-edge="left"]  .ba-hint--right,
  .ba-stage[data-ba-edge="right"] .ba-hint--left { animation: none; }
}