/* ==========================================================================
   ER Auto Service — Riverview concept (web2)
   Page sections. Tokens, nav, footer and buttons live in styles.css.
   ========================================================================== */

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  color: #fff;
  min-height: min(86vh, 740px);
  display: flex;
  align-items: center;
}
/* Background-image instead of an <img>: at this section's proportions the
   container is wider (2.29:1 measured) than the photo (1.78:1), so a plain
   cover-fit is always bound by width — the photo already fills edge to edge
   with zero horizontal slack, so object-position's X had nothing to move
   (verified: no change at any value). Same fix as .auto-repair-media and
   .tires-media — the ::before layer is scaled up past that minimum cover
   size so there's real room left/right for background-position to use. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #000;
}
.hero-media::before {
  content: '';
  position: absolute; inset: 0;
  /* Fade layer sits on top of the photo layer — softens the hard seam where
     .hero-media's black background meets this box's own left edge (left:35%). */
  background-image:
    linear-gradient(115deg, #000 0%, rgba(0, 0, 0, 0) 30%),
    url('../assets/img/Herohome.png');
  background-size: 100% 100%, cover;
  background-repeat: no-repeat, no-repeat;
  left: 35%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.78) 36%, rgba(10,10,11,0.32) 66%, rgba(10,10,11,0.08) 100%),
    linear-gradient(to top, rgba(10,10,11,0.5), transparent 45%);
}
/* .hero-inner also carries .wrap's margin-inline:auto — as a flex item of
   .hero that auto margin would shrink-to-fit and re-center the whole column,
   which is what was pushing the copy toward the middle. width:100% pins it
   to the full row first, so .wrap only centers the 1280px content column
   itself and the copy stays flush left inside it. */
.hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(3rem, 8vw, 5rem); }

/* Scroll-linked entrance, same mechanism as caliaji/dang's hero: JS tracks
   this element's IntersectionObserver ratio continuously (not just once)
   and writes opacity/transform straight to the inline style each frame it
   changes, so the block fades + scales in as it enters the viewport and
   reverses if it scrolls back out. The transition here is what makes each
   of those JS-driven updates glide instead of jump; .is-inview is just a
   hook for the staggered child reveal below. */
.hero-copy {
  max-width: 700px;
  text-align: left;
  opacity: 0;
  transform: translateX(-40px) scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.hero-title {
  font-size: clamp(1.85rem, 1.2rem + 3.3vw, 3.1rem);
  color: #fff;
}
/* Once .hero-copy crosses into view, each child gets its own staggered
   fade-up — same delays as the reference (title/lede/actions/lang ~ its
   headline/sub/btns/more-link). .hero-title gets its own keyframes (not
   the shared hero-in) so the rise doesn't wipe out the .display--lean skew
   once the animation's fill-mode settles. */
.hero-copy.is-inview .hero-title { animation: hero-title-in 0.6s ease-out 0.1s both; }
.hero-copy.is-inview .hero-lede { animation: hero-in 0.6s ease-out 0.3s both; }
.hero-copy.is-inview .hero-actions { animation: hero-in 0.8s ease-out 0.5s both; }
.hero-copy.is-inview .hero-lang { animation: hero-in 0.7s ease-out 0.7s both; }

/* Each phrase holds its own line so "New & Used Tires &" never breaks mid-line. */
.hero-title-line { display: block; white-space: nowrap; }
.hero-title-accent { color: var(--ember); }

.hero-lede {
  color: var(--chrome);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  max-width: 42ch;
}

.hero-actions {
  margin-block: 1.75rem 1.4rem;
}

.hero-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--chrome);
  margin: 0;
}
.hero-lang i { color: var(--ember); }

@media (max-width: 600px) {
  /* .hero centers hero-copy vertically by default — fine on desktop, but on
     the home hero specifically the technician's face sits high in the frame
     (near the top of the box; a height-constrained `cover` crop always shows
     the photo's full height, so that band is fixed, see .hero-title below).
     A vertically-centered text block's middle lands almost exactly on the
     face no matter how short the block is. Bottom-aligning instead keeps
     the (now-shorter) text block low, clear of that band, without needing
     to touch the image or markup. Scoped to .home-hero only — the other
     pages' hero photos don't have this problem and shouldn't change. */
  .home-hero { align-items: flex-end; }

  /* Centered hero on phones. The title's per-line nowrap is what let the
     mobile size grow this far in the first place — it also means there was
     a hard ceiling before it clipped. Letting it wrap here removes that
     ceiling entirely, so size is no longer a trade-off against overflow. */
  .hero-copy { text-align: center; margin-inline: auto; }
  .hero-title-line { white-space: normal; }
  /* Smaller than the pre-photo-fix size on purpose: the 3 .hero-title-line
     spans each wrap again at this width (their nowrap is off here too),
     rendering as 6 stacked visual lines tall enough to run straight through
     the technician's face — which the mobile background-position fix below
     can't move (a height-constrained `cover` crop against a landscape photo
     always shows the photo's full height, so the face's vertical band is
     fixed no matter the horizontal pan). Fewer/shorter wrapped lines clears
     that band instead. */
  .hero-title { font-size: clamp(1.7rem, 1rem + 4vw, 2.4rem); }
  .hero-lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  /* Side by side instead of stacked — each button shares the row width
     evenly (flex:1) with a smaller size, so both fit on one line and the
     text below drops a line versus two full-width stacked buttons. */
  .hero-actions .btn { flex: 1; padding: 0.7rem 0.5rem; font-size: 0.66rem; }
  .hero-actions .btn-face { justify-content: center; gap: 0.4rem; white-space: nowrap; }
  .hero-lang { justify-content: center; }
  /* .display--lean's transform:none alone isn't enough here — this
     animation bakes skewX(-6deg) directly into its own keyframes, and an
     animated transform overrides a static one for as long as it's applied.
     Swap to the skew-free keyframes below so the entrance doesn't re-add
     the exact tilt we just turned off. */
  .hero-copy.is-inview .hero-title { animation-name: hero-title-in-mobile; }

  /* The desktop photo layer (left:35% + its own 115deg fade-from-black
     gradient) was only ever tuned for a wide, short box — text on solid
     black to the left, photo fading in on the right. In a phone's narrow,
     tall box that same 115deg gradient covers far more of the box in black
     (gradient angle geometry depends on the box's own aspect ratio), and the
     photo's un-set background-position defaults to 0% 0% (top-left crop),
     landing on a fairly empty part of the source photo. Net effect: a
     mobile hero that's nearly solid black with barely any recognizable
     photo. Fixed the same way every other page's hero already handles a
     photo at any width — full-bleed (no left offset), a sensible focal
     point, cover, and let the existing .hero-scrim (unchanged, already a
     full-coverage dark wash) carry all the text-contrast work instead of a
     second baked-in gradient. */
  .hero-media::before {
    left: 0;
    background-image: url('../assets/img/Herohome.png');
    background-position: 30% center;
    background-size: cover;
  }
}

/* Slides in from the left instead of rising from below. */
@keyframes hero-in {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

/* Same left-to-right slide as hero-in, but keeps the display--lean skew in its end state. */
@keyframes hero-title-in {
  from { opacity: 0; transform: translateX(-24px) skewX(-6deg); }
  to   { opacity: 1; transform: skewX(-6deg); }
}

/* Mobile version of the above — no skew, matching .display--lean turning off
   under the same breakpoint. */
@keyframes hero-title-in-mobile {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy { opacity: 1; transform: none; transition: none; }
  .hero-copy.is-inview .hero-title,
  .hero-copy.is-inview .hero-lede,
  .hero-copy.is-inview .hero-actions,
  .hero-copy.is-inview .hero-lang { animation: none; }
}

/* ---------- Trust strip -------------------------------------------------- */

.trust-strip { background: var(--paper); border-bottom: 1px solid var(--paper-dim); }
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 0;
  padding-block: 1.4rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: clamp(0.75rem, 2.2vw, 1.75rem);
  border-right: 1px solid var(--paper-dim);
}
.trust-item:first-child { padding-inline-start: 0; }
.trust-item:last-child { padding-inline-end: 0; border-right: none; }
.trust-badge {
  display: flex; align-items: center; justify-content: center;
  color: var(--ember);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1;
}
.trust-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.74rem, 1.2vw, 0.84rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-text b { color: var(--ember-text); font-size: 1.15em; }

@media (max-width: 700px) {
  .trust-strip-inner { row-gap: 1.1rem; column-gap: 1.25rem; }
  .trust-item {
    flex-basis: calc(50% - 0.625rem);
    justify-content: center;
    white-space: normal;
    padding-inline: 0;
    border-right: none;
  }
  .trust-badge { font-size: 1.7rem; }
}

/* Tires — full-bleed background like Auto Repair, but mirrored: the photo
   shows on the LEFT and the copy sits on the RIGHT, on its own white scrim. */
.tires { position: relative; overflow: hidden; min-height: 22rem; display: flex; align-items: center; }

.tires-media {
  position: absolute; inset: 0; z-index: 0;
  background-color: #fff;
  background-image: url('../assets/img/llanta.jpeg');
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: left center;
}
.tires-inner { position: relative; z-index: 1; width: 100%; padding-inline: var(--gutter); display: flex; justify-content: flex-end; }
.tires-copy { max-width: 560px; }

@media (max-width: 860px) {
  .tires { min-height: 0; background: #fff; }
  /* Tire photo dropped on mobile — .tires carries its own white background
     now instead of getting it from the (hidden) photo layer. */
  .tires-media { display: none; }
  .tires-inner { justify-content: center; }
  .tires-copy { max-width: none; width: 100%; text-align: center; }
  .tires-copy .btn { display: block; width: 100%; }
  .tires-copy .btn-face { justify-content: center; }
}

.why-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.why-title { margin-bottom: 1rem; text-align: center; }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; }
}

.why-media img {
  width: 100%; height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Auto-repair — the photo is the section's own background, not a grid
   column: same absolute-media + scrim device as .hero, so the copy sits on
   top and the image itself stays anchored to the right of the section. */
.auto-repair { position: relative; overflow: hidden; min-height: 32rem; display: flex; align-items: center; }

/* Background-image instead of an <img>: at this section's wide/short
   proportions, a plain cover-fit always ends up bound by width (the image
   already fills edge to edge), leaving no horizontal room to pan. The
   ::before layer is deliberately scaled up past that minimum cover size —
   scale(1.4) on top of an already-covering background — so there's real
   slack for the background-position-x/y pixel offsets below to move the
   crop within. */
.auto-repair-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.auto-repair-media::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/img/imagenbannew.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 500px;
  background-position-y: -151px;
  transform: scale(1.4);
}
.auto-repair-scrim {
  position: absolute; inset: 0;
  /* The left half of the section is flat, solid black — a hard color stop,
     not a fade, so the copy sits on true black rather than a thinning wash.
     Past that stop the same black cuts away on a diagonal, along the
     gradient's own angle, clearing by the right edge so the photo reads
     on its own there. */
  background:
    linear-gradient(115deg, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.97) 50%, rgba(10,10,11,0) 82%),
    rgba(10,10,11,0.3);
}
.auto-repair-inner { position: relative; z-index: 1; width: 100%; padding-inline: var(--gutter); }
.auto-repair-copy { max-width: 60%; }

@media (max-width: 860px) {
  .auto-repair { min-height: 0; }
  .auto-repair-media::before { background-position: 50% center; }
  .auto-repair-copy { max-width: none; }
  .auto-repair-copy .btn { display: block; width: 100%; }
  .auto-repair-copy .btn-face { justify-content: center; }
}

/* ---------- Tires --------------------------------------------------------- */

.chip-row { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--paper-dim); color: var(--ink);
  font-weight: 700; font-size: 0.86rem;
  white-space: nowrap;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-pill);
}
.chip i { color: var(--ember); }

@media (max-width: 860px) {
  /* Two per row, centered, instead of flex-wrapping wherever they fit.
     Placed after the base .chip-row rule (not up with the rest of Tires'
     mobile overrides) so display:grid actually wins the cascade — same
     specificity, so source order decides, and the base rule used to come
     after that block and silently win back display:flex. */
  .chip-row { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 0.5rem; }
  .chip { font-size: 0.8rem; padding: 0.5rem 0.85rem; gap: 0.45rem; }
}

/* ---------- Auto repair ---------------------------------------------------- */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  margin: 1.75rem 0 2.25rem;
  max-width: none;
}
.icon-tile {
  background: #0d0d0d;
  border: 1px solid var(--iron-hi);
  border-radius: 16px;
  padding: 1rem 0.4rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.icon-tile img { width: 52px; height: 52px; object-fit: contain; }
.icon-tile span { font-size: 0.78rem; font-weight: 600; color: var(--chrome); line-height: 1.25; }

@media (max-width: 480px) {
  .icon-grid { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
  .icon-tile { padding: 1rem 0.5rem; gap: 0.5rem; }
  .icon-tile img { width: 42px; height: 42px; }
  .icon-tile span { font-size: 0.75rem; }
}

/* ---------- Why choose / about ---------------------------------------------- */

.reasons { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.reason { display: flex; gap: 1rem; align-items: flex-start; }
.reason-badge {
  flex: none; width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--ember); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.reason-title { margin: 0 0 0.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; }
.reason-desc { margin: 0; color: #4B4F57; font-size: 0.93rem; max-width: 42ch; }

/* ---------- Financing ------------------------------------------------------- */

.financing { background: linear-gradient(135deg, var(--ember-dark), var(--ember)); color: #fff; }
.financing-grid {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 860px) {
  .financing-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
.financing-copy .display { color: #fff; margin-bottom: 0.35rem; }
.financing-title { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); }

/* Matches .financing-title's size — scoped to this one heading only, so the
   rest of the .display--lg headings on the page keep their normal size. */
.reviews-title {
  /* Long line (48 chars) held to one row — overrides the 34ch cap from
     .sec-head--center .display and scales down enough on narrow phones
     to still fit without wrapping. */
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.8rem, 0.35rem + 2vw, 1.5rem);
}
@media (max-width: 600px) {
  /* Even the clamp's floor is still wider than a 390px phone can hold on
     one line — let it wrap there instead of clipping off the right edge. */
  .reviews-title { white-space: normal; }
}
.financing-sub {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: rgba(255,255,255,0.92); margin: 0;
}
.financing-logos {
  background: #fff; border-radius: 20px;
  padding: 1.4rem clamp(1.5rem, 3vw, 2.5rem);
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem);
  justify-content: center;
}
.fin-divider { width: 1px; align-self: stretch; background: var(--paper-dim); }
.fin-logo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.3rem; white-space: nowrap;
}
.fin-logo em { font-style: normal; font-weight: 500; font-size: 0.62em; color: #4B4F57; }
.fin-logo--snap { color: #1E8E3E; }
.fin-logo--snap b { color: var(--ember); font-weight: 800; }
.fin-logo--acima { color: #00958F; text-transform: lowercase; }
.fin-logo-img { height: 64px; width: auto; flex: none; }
.fin-logo-img--acima { height: 42px; }
@media (max-width: 860px) {
  .fin-logo-img { height: 44px; }
  .fin-logo-img--acima { height: 29px; }
}
.financing-note p { margin: 0 0 1.1rem; max-width: 30ch; color: rgba(255,255,255,0.92); }
.financing-cta { background: var(--ink); border-color: var(--ink); }
.financing-cta:hover { background: var(--iron); border-color: var(--iron); color: #fff; }
@media (max-width: 860px) { .financing-note p { max-width: 40ch; margin-inline: auto; } }

/* ---------- Reviews ---------------------------------------------------------- */

/* Full-bleed like .auto-repair-inner: drop the 1280px .wrap cap, keep only
   the side gutter, so the carousel gets the full viewport width to lay out
   its cards (still just as many visible — .review-card's flex-basis scales
   off 100% either way). */
.reviews .wrap { max-width: none; }

.stars { color: var(--ember); font-size: 1.1rem; display: flex; gap: 0.25rem; justify-content: center; margin-top: 0.85rem; }
.stars--sm { font-size: 0.78rem; justify-content: flex-start; margin: 0.6rem 0; }

.reviews-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.9rem;
  row-gap: 0.4rem;
}
.reviews-head .stars { margin-top: 0; line-height: 1; transform: translateY(-0.2em); font-size: 1.6rem; }
.reviews-head .display { margin-inline: 0; }

.reviews-carousel { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.2rem; }
.reviews-track {
  display: flex; gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 0.5rem;
  flex: 1;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 clamp(260px, 80vw, 330px);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(10,10,11,0.08);
}

/* Four cards visible at once on wide screens, instead of ~3 fixed-width ones. */
@media (min-width: 1000px) {
  .review-card { flex-basis: calc((100% - 3 * 1.25rem) / 4); }
}
.review-head { display: flex; align-items: center; gap: 0.75rem; }
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: hsl(var(--avatar-hue, 0) 68% 42%);
  color: #fff; font-weight: 700; font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.92rem; flex: none;
}
.review-name { margin: 0; font-weight: 700; font-size: 0.94rem; }
.review-meta { margin: 0; font-size: 0.76rem; color: #6B6F76; }
.review-source { margin-left: auto; font-size: 0.72rem; color: #6B6F76; white-space: nowrap; }
.review-text { margin: 0; font-size: 0.9rem; color: #33363B; }

.review-nav {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--paper-dim); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.review-nav:hover { background: var(--ember); color: #fff; border-color: var(--ember); }

@media (max-width: 640px) {
  /* The arrows plus their gaps were eating ~110px on a phone, squeezing the
     track down until the (viewport-relative) card width no longer fit in
     what was left — cards showed half-cut, arrows floating oddly to the
     sides. Dropping the arrows on phones gives the track the full width;
     swipe/scroll plus the dots below cover navigation there instead. */
  .review-nav { display: none; }
}

.review-dots { display: flex; gap: 0.25rem; justify-content: center; margin-top: 1.4rem; }
/* The button is a 28px tap target — comfortably bigger than the 8px dot it
   draws via ::before, so the visible dot stays small while the hit area
   doesn't. */
.review-dot {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.review-dot::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chrome-dim);
  transition: width 0.25s var(--ease-out), background 0.25s var(--ease-out), border-radius 0.25s var(--ease-out);
}
.review-dot.is-active::before { background: var(--ember); width: 22px; border-radius: 5px; }

/* ---------- Other services ---------------------------------------------------- */

/* Full-bleed like .reviews .wrap: drop the 1280px cap, keep the side gutter. */
.other-services .wrap { max-width: none; }

.services-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 1.5rem;
}
@media (max-width: 760px) {
  .services-row { grid-template-columns: 1fr; }
}

.services-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .services-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .services-tiles { grid-template-columns: 1fr; } }

/* Each tile is its own photo background (dropped in via inline style, since
   the source photo differs per tile) with a bottom scrim so the label reads
   over any image — same device as .auto-repair, scaled down to card size. */
.service-tile {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  min-height: 14rem;
  background-color: var(--iron);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.55) 45%, rgba(10,10,11,0) 75%);
}
.service-tile-body { position: relative; z-index: 1; padding: 1.25rem; text-align: left; }
.service-tile-body h3 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.01em; margin: 0 0 0.3rem; color: #fff;
}
.service-tile-body p { margin: 0; font-size: 0.78rem; color: rgba(255,255,255,0.75); }

.services-tiles-cta { display: flex; align-items: center; }
.services-tiles-cta .btn { white-space: nowrap; }
@media (max-width: 760px) { .services-tiles-cta { justify-content: center; margin-top: 0.5rem; } }

/* ---------- Visit / map / contact ---------------------------------------------- */

.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "copy map" "form form";
  gap: clamp(2rem, 4vw, 3rem);
  width: 100%;
  padding-inline: var(--gutter);
}
@media (min-width: 1150px) {
  .visit-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "copy map form"; }
}
@media (max-width: 760px) {
  .visit-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "map" "form"; }
}
.visit-copy { grid-area: copy; }
.visit-title { white-space: nowrap; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); }
.map-frame { grid-area: map; }
.visit-form-wrap { grid-area: form; }

.visit-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.85rem; }
.visit-facts li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--chrome); }
.visit-facts i { color: var(--ember); margin-top: 0.2rem; }
.visit-facts a { color: var(--chrome); }
.visit-facts a:hover { color: var(--ember); }

.visit-hours {
  background: var(--iron); border: 1px solid var(--iron-hi); border-radius: 18px;
  padding: 1.25rem 1.4rem; margin-bottom: 1.75rem; max-width: 320px;
}
.visit-hours h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.visit-hours p { margin: 0; font-size: 0.88rem; color: var(--chrome); }

.visit-actions { margin-top: 0.5rem; }
@media (max-width: 760px) {
  .visit-actions { flex-direction: column; }
  .visit-actions .btn { display: block; width: 100%; }
  .visit-actions .btn-face { justify-content: center; }
}

.map-frame { border-radius: 24px; overflow: hidden; min-height: 320px; border: 1px solid var(--iron-hi); }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

.visit-form-wrap {
  background: var(--iron); border: 1px solid var(--iron-hi); border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.visit-form-title { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }
.visit-form-sub { margin: 0 0 1.25rem; font-size: 0.88rem; color: var(--chrome-dim); }
.visit-form { display: grid; gap: 0.9rem; }
.visit-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 420px) { .visit-form-row { grid-template-columns: 1fr; } }

.field {
  width: 100%; background: var(--ink); border: 1px solid var(--iron-hi); border-radius: 14px;
  padding: 0.85rem 1.1rem; color: #fff; font-family: var(--font-body); font-size: 0.94rem;
}
.field::placeholder { color: var(--chrome-dim); }
.field:focus { outline: none; border-color: var(--ember); }
textarea.field { resize: vertical; min-height: 110px; }
.visit-form-submit { justify-self: stretch; text-align: center; margin-top: 0.2rem; }