/* ==========================================================================
   Sure Fix — index3 concept
   Standalone build (no WordPress/Assimox theme dependency), same brand
   system as index.html / index2.html (orange #FF9800 + navy #0B1B45,
   Sure Fix logo, Bangalore appliance-repair content) but a distinct layout:
   asymmetric hero visual, featured/highlighted service card, icon-badge
   brand chips, connected-line process steps, static testimonial trio
   instead of a carousel.
   ========================================================================== */

:root {
  --ink: #0b1b45;
  --ink-soft: #5b6478;
  --accent: #ff9800;
  --accent-2: #ff9d1e;
  --gray: #8a94a6;
  --bg: #f7f8fa;
  --bg-warm: #fdf3e9;
  --card: #ffffff;
  --border: #ececec;

  --glass-bg: rgba(255, 255, 255, 0.35);
  --glass-bg-strong: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.51);
  --glass-radius: 16px;
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --glass-blur: blur(8.6px);

  --r-lg: 24px;
  --r-md: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1240px;
}

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

/* Spam honeypot — real users never see or fill this field (bots often
   fill every field they find in the DOM, so this is the tell). Kept off
   the layout entirely rather than display:none, since some bots skip
   display:none fields specifically. */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* The native `hidden` attribute has the same CSS specificity as a single
   class selector, so any element whose class also sets `display` (e.g.
   `.locate-card { display: flex; }`) stays visible even when JS sets
   `.hidden = true` — the author-stylesheet class rule wins the tie against
   the UA stylesheet's `[hidden] { display: none }`. This forces `hidden`
   to always actually hide the element, everywhere on the site. */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink-soft);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { position: relative; z-index: 2; }
::selection { background: var(--accent); color: #fff; }

/* ==========================================================================
   Background mesh (fixed, behind everything, gives the glass something
   to actually blur — flat solid backgrounds make backdrop-filter invisible)
   ========================================================================== */

.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
.bg-mesh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
}
.bg-mesh span:nth-child(1) { width: 520px; height: 520px; top: -160px; left: -120px; background: var(--accent); animation: drift1 24s ease-in-out infinite; }
.bg-mesh span:nth-child(2) { width: 460px; height: 460px; top: 20%; right: -160px; background: #c7d2e8; animation: drift2 28s ease-in-out infinite; }
.bg-mesh span:nth-child(3) { width: 420px; height: 420px; bottom: -140px; left: 15%; background: var(--accent-2); opacity: 0.2; animation: drift1 26s ease-in-out infinite reverse; }

@keyframes drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, 60px); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, 50px); } }

@media (prefers-reduced-motion: reduce) {
  .bg-mesh span { animation: none; }
}

/* ==========================================================================
   Glass utility
   ========================================================================== */

.glass {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(255, 152, 0, 0.55);
}
.btn--primary:hover { transform: translateY(-3px); background: #f08a00; }
.btn--glass {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: var(--glass-blur);
}
.btn--glass:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.85); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow i { font-size: 8px; }

.section-head { max-width: 620px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--gray); font-size: 16px; }

.pad { padding: 100px 0; }
.pad-sm { padding: 70px 0; }
@media (max-width: 900px) { .pad { padding: 64px 0; } .pad-sm { padding: 48px 0; } }

/* Scroll reveal (mirrors the site-wide mechanism already proven on index.html) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader__logo {
  width: 74px; height: 74px;
  animation: pulse 1.4s ease-in-out infinite;
}
.preloader__logo img { width: 100%; height: 100%; object-fit: contain; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.85); opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) { .preloader__logo { animation: none; } }

/* ==========================================================================
   Topbar + Nav
   ========================================================================== */
.topbar {
  position: relative; z-index: 50;
  padding: 10px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.topbar__left { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar__item { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.topbar__item i { color: var(--accent); font-size: 12px; }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.topbar__social {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border);
  font-size: 12px; color: var(--ink);
  transition: all 0.3s var(--ease);
}
.topbar__social:hover { background: var(--accent); color: #fff; border-color: transparent; }
@media (max-width: 640px) { .topbar { display: none; } }

.navbar { position: sticky; top: 0; z-index: 100; padding: 16px 0; }
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 10px 14px 10px 20px; border-radius: 999px;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.navbar.scrolled .navbar__inner { background: rgba(255, 255, 255, 0.75); box-shadow: var(--glass-shadow); }

.logo { display: flex; align-items: center; gap: 10px; }
.logo__icon { width: 40px; height: 40px; object-fit: contain; }
.logo__text { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu a {
  display: block; padding: 10px 16px; border-radius: 999px;
  font-family: 'Outfit', sans-serif; font-size: 14.5px; font-weight: 500;
  color: var(--ink-soft); transition: all 0.3s var(--ease);
}
.nav-menu a:hover { color: var(--ink); background: rgba(255, 152, 0, 0.08); }

.navbar__actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
}
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: all 0.3s var(--ease); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .navbar__actions .btn--primary { display: none; }
}

.drawer {
  position: fixed; top: 0; right: -100%; width: min(320px, 86vw); height: 100%;
  z-index: 200; padding: 90px 26px 40px; overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  transition: right 0.5s var(--ease);
}
.drawer.open { right: 0; }
.drawer__close { position: absolute; top: 22px; right: 22px; }
.drawer ul li { border-bottom: 1px solid var(--border); }
.drawer ul li a { display: block; padding: 15px 4px; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px; color: var(--ink); }
.drawer__cta { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.drawer-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(11, 27, 69, 0.35); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: all 0.4s var(--ease);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 60px 0 40px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; margin-bottom: 22px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink); }
.hero__badge i { color: var(--accent); }
.hero h1 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 20px; }
.hero h1 span { color: var(--accent); }
.hero__lead { font-size: 17px; max-width: 480px; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero__trust { display: flex; align-items: center; gap: 16px; padding: 14px 20px; width: fit-content; }
.avatar-row { display: flex; }
.avatar-row span {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; margin-left: -12px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12.5px; color: #fff;
}
.avatar-row span:first-child { margin-left: 0; }
.avatar-row span:nth-child(1) { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.avatar-row span:nth-child(2) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.avatar-row span:nth-child(3) { background: linear-gradient(135deg, #10b981, #22d3ee); }
.avatar-row span:nth-child(4) { background: var(--ink); font-size: 11px; }
.avatar-row span i { font-size: 14px; }
.hero__trust-text strong { display: block; font-size: 14px; color: var(--ink); }
.hero__trust-text { font-size: 12.5px; color: var(--gray); }
.stars { color: var(--accent); font-size: 11px; letter-spacing: 2px; }

/* Hero visual: asymmetric floating glass badges, no photo dependency */
.hero__visual { position: relative; height: 540px; }
.hero__visual-core {
  position: absolute; top: 30px; left: 40px; right: 90px; bottom: 90px;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255, 152, 0, 0.16), rgba(11, 27, 69, 0.08));
  display: flex; align-items: center; justify-content: center;
}
.hero__visual-icon {
  width: 130px; height: 130px; border-radius: 36px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; color: var(--accent);
  animation: float-mid 5s ease-in-out infinite;
}
@keyframes float-mid { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* Homepage hero quick-enquiry mini-form (FRD Form 1 — Name + Mobile).
   Client-side only for now: shows a success state on submit, nothing is
   saved to the DB yet — that's Phase 2. */
.hero__quick-form {
  width: 100%; max-width: 360px; padding: 0; overflow: hidden;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -16px rgba(11, 27, 69, 0.5);
}
.hero__quick-form-eyebrow {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff;
  padding: 18px 26px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
}
.hero__quick-form-eyebrow i { color: var(--accent); font-size: 15px; }
.hero__quick-form-body { padding: 28px 26px 24px; }
.hero__quick-form .form-row { margin-bottom: 16px; }
.hero__quick-form .form-row input {
  width: 100%; padding: 15px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.hero__quick-form .form-row input:focus { outline: none; border-color: var(--accent); }
.hero__quick-form-submit { width: 100%; justify-content: center; margin-top: 4px; min-height: 52px; font-size: 15px; }
.hero__quick-form-consent { font-size: 11.5px; line-height: 1.5; color: var(--gray); text-align: center; margin: 12px 0 0; }
.hero__quick-form-consent a { color: var(--accent); text-decoration: underline; }
.hero__quick-form-hint { display: none; font-size: 12.5px; color: #d9463f; margin: -8px 0 12px; font-weight: 500; }
.hero__quick-form-hint.is-visible { display: block; }
.hero__quick-form-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--gray); margin-top: 18px;
}
.hero__quick-form-success { text-align: center; padding: 30px 0; }
.hero__quick-form-success i { display: block; font-size: 46px; color: #2fa86b; margin-bottom: 12px; }
.hero__quick-form-success p { margin: 0; font-size: 14.5px; color: var(--ink); }
.wa-confirm-btn { margin-top: 16px; display: inline-flex; }

.hero__chip {
  position: absolute;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--ink);
  animation: float-slow 6s ease-in-out infinite;
}
.hero__chip i { color: var(--accent); font-size: 15px; }
.hero__chip--1 { top: 0; left: 0; animation-delay: 0s; }
.hero__chip--2 { top: 16%; right: 0; animation-delay: 1s; }
.hero__chip--3 { bottom: 10%; left: -6%; animation-delay: 2s; }
.hero__chip--4 { bottom: 0; right: 10%; animation-delay: 0.5s; }
@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { height: 480px; margin-top: 10px; }
  .hero__chip { display: none; }
  .hero__visual-core { top: 16px; left: 16px; right: 16px; bottom: 16px; }
}
@media (max-width: 400px) {
  .hero__quick-form-body { padding: 18px 16px; }
  .hero__quick-form-eyebrow { padding: 14px 16px; }
}

/* Marquee */
.marquee-wrap { padding: 16px 0; overflow: hidden; margin: 0 24px; max-width: var(--container); margin-left: auto; margin-right: auto; border-radius: 999px; }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee 26s linear infinite; }
.marquee-track span { display: flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }
.marquee-track span i { color: var(--accent); font-size: 12px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   Why Choose Us — asymmetric row (icon left, stacked text right) instead
   of the uniform card grid used on index.html
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.why-item { display: flex; align-items: flex-start; gap: 16px; padding: 24px; min-width: 0; }
.why-item__icon {
  flex: 0 0 50px; width: 50px; height: 50px; border-radius: 14px;
  background: rgba(255, 152, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.why-item h3 { font-size: 16.5px; margin-bottom: 4px; }
.why-item p { font-size: 13.5px; color: var(--gray); }
@media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Services — 3-column grid with one featured (scaled) card for variety
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  padding: 30px 26px; display: flex; flex-direction: column;
  min-width: 0;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -14px rgba(11, 27, 69, 0.18); }
.svc-card__icon {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 54px;
  background: rgba(255, 152, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  margin-bottom: 18px;
}
.svc-card__icon img { width: 60%; height: 60%; object-fit: contain; }
.svc-card h3 { font-size: 19px; margin-bottom: 6px; }
.svc-card p { font-size: 14px; color: var(--gray); margin-bottom: 20px; }
.svc-card__link {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13.5px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 11px 18px; border-radius: 999px; width: 100%;
  box-shadow: 0 10px 22px -10px rgba(255, 152, 0, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.svc-card__link i { font-size: 11px; transition: transform 0.3s var(--ease); }
.svc-card:hover .svc-card__link { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(255, 152, 0, 0.7); }
.svc-card:hover .svc-card__link i { transform: translateX(4px); }

/* Visually distinguished only (gradient + slightly larger icon/text) — no
   grid-column/row spanning. With exactly 6 service cards (matching the FRD's
   6 dedicated appliance pages), a spanning featured card leaves an orphaned
   last card with empty cells beside it at every breakpoint; a same-size cell
   avoids that entirely while still standing out visually. */
.svc-card--featured {
  background: linear-gradient(160deg, rgba(255, 152, 0, 0.14), rgba(255, 255, 255, 0.5));
}
.svc-card--featured .svc-card__icon { width: 60px; height: 60px; flex-basis: 60px; font-size: 28px; }
.svc-card--featured h3 { font-size: 21px; }

@media (max-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .svc-card { padding: 20px 16px; min-width: 0; }
  .svc-card h3 { font-size: 16px; }
}
@media (max-width: 380px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Brands — round badge chips
   ========================================================================== */
.brands-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  min-height: 84px; padding: 16px; text-align: center;
  min-width: 0;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.brand-chip span { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.brand-chip:hover { transform: translateY(-5px); border-color: var(--accent); }
.brand-chip:hover span { color: var(--accent); }
@media (max-width: 1080px) { .brands-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .brand-chip { min-height: 68px; } .brand-chip span { font-size: 13.5px; } }
@media (max-width: 380px) { .brands-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Process — connected numbered nodes
   ========================================================================== */
.process-row { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.process-step { text-align: center; padding: 0 8px; min-width: 0; flex: 1 1 240px; max-width: 280px; }
.process-step__num {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px;
  position: relative; z-index: 1;
}
.process-step:nth-child(odd) .process-step__num { background: var(--accent); }
.process-step h3 { font-size: 16.5px; margin-bottom: 6px; }
.process-step p { font-size: 13.5px; color: var(--gray); }
.process-arrow { flex: 0 0 auto; align-self: center; margin-top: 12px; font-size: 18px; color: var(--accent); opacity: 0.6; }
@media (max-width: 860px) {
  .process-row { flex-direction: column; align-items: center; gap: 4px; }
  .process-step { max-width: 340px; }
  .process-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-bar { padding: 46px 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { text-align: center; }
.stat__num { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); color: var(--accent); }
.stat__label { font-size: 13px; color: var(--gray); margin-top: 6px; }
@media (max-width: 700px) { .stats-bar { grid-template-columns: 1fr 1fr; padding: 34px 20px; } }

/* ==========================================================================
   Testimonials — auto-scrolling carousel at every breakpoint (not just
   mobile); shows more cards side by side as the viewport widens, but
   always scrolls/auto-advances rather than switching to a static grid
   ========================================================================== */
.testi-grid {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 8px; margin: 0 -4px; scrollbar-width: none;
}
.testi-grid::-webkit-scrollbar { display: none; }
.testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.testi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.testi-dot.is-active { background: var(--accent); transform: scale(1.3); }
.testi-card { padding: 28px 24px; min-width: 0; flex: 0 0 84%; scroll-snap-align: center; }
.testi-card i.quote { font-size: 22px; color: var(--accent); opacity: 0.6; margin-bottom: 14px; display: block; }
.testi-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; }
.testi-foot { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 16px;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); }
.testi-role { font-size: 12px; color: var(--gray); }
/* Fixed px widths (not percentages) from here up — guarantees the row's
   total content width exceeds the container at every desktop size, so
   there's always real overflow to scroll/auto-advance through instead of
   the cards happening to fit exactly and the carousel going inert. */
@media (min-width: 480px) { .testi-card { flex-basis: 340px; } }
@media (min-width: 1300px) { .testi-card { flex-basis: 380px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; }
.faq-q h3 { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.faq-q .plus {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease);
}
.faq-item.open .faq-q .plus { transform: rotate(135deg); background: var(--accent); border-color: transparent; color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { padding: 0 24px 22px; color: var(--gray); font-size: 14px; max-width: 620px; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
  padding: 54px 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(11, 27, 69, 0.06));
}
.cta-banner h2 { font-size: clamp(22px, 3vw, 30px); max-width: 460px; }
.cta-banner__phone { display: flex; align-items: center; gap: 14px; }
.cta-banner__phone-icon {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  background: var(--accent); color: #fff;
  display: flex !important; align-items: center; justify-content: center; font-size: 20px;
}
.cta-banner__phone-icon i { display: flex !important; align-items: center; justify-content: center; line-height: 1; }
.cta-banner__phone span { display: block; font-size: 12px; color: var(--gray); }
.cta-banner__phone strong { font-family: 'Outfit', sans-serif; font-size: 20px; color: var(--ink); }
@media (max-width: 620px) { .cta-banner { padding: 36px 22px; justify-content: center; text-align: center; } .cta-banner__phone { flex-direction: column; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 80px 0 0; }
.footer-panel { padding: 54px 44px 34px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 44px; }
.footer-about p { font-size: 14px; color: var(--gray); margin: 18px 0 22px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--ink);
  transition: all 0.3s var(--ease);
}
.footer-social a:hover { background: var(--accent); color: #fff; border-color: transparent; }
.footer h4 { font-size: 15px; margin-bottom: 20px; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: 13.5px; color: var(--gray); transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--accent); }
.footer-contact { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--gray); }
.footer-contact i { color: var(--accent); margin-top: 3px; font-size: 12px; }
.footer-bottom {
  padding: 20px 0; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--gray);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } .footer-panel { padding: 40px 22px 26px; } }

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed; bottom: 26px; right: 26px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff; font-size: 28px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transition: all 0.3s var(--ease);
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55); color: #fff; }
.whatsapp-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: #25d366; opacity: 0.55;
  animation: whatsapp-pulse 2.2s ease-out infinite;
}
@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (max-width: 600px) { .whatsapp-float { width: 50px; height: 50px; font-size: 24px; bottom: 18px; right: 18px; } }

/* ==========================================================================
   Appliance pages (washing-machine.php, refrigerator.php, etc.)
   ========================================================================== */

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); padding: 18px 0 0; }
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb i { font-size: 9px; }
.breadcrumb span { color: var(--ink); font-weight: 500; }

/* Simple page hero (appliance pages, contact, blog, legal) */
.page-hero { padding: 34px 0 50px; text-align: center; }
.page-hero__icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 18px;
  background: rgba(255, 152, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.page-hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.page-hero p { max-width: 560px; margin: 0 auto; font-size: 16px; color: var(--gray); }
.page-hero__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* Full-width service-page banner (its own section, no text/CTA on top of
   it) — a real <img> at width:100%/height:auto so the section is exactly
   as tall as the complete photo; nothing gets cropped. Runs edge-to-edge
   of the viewport since it's a bare <section>/<img> with no .container
   wrapper constraining its width. */
.page-banner__img { display: block; width: 100%; height: auto; }

/* Booking widget — full 8-step flow (Type → Brand → Problem → Service →
   Location, Google Map → Schedule → Contact + OTP → Review), matching the
   client's reference booking-flow design (icon-cards for selection) adapted
   to our glass/orange brand. Options are real <input radio/checkbox> under
   the hood styled as cards, so selection works with zero JS and stays
   keyboard/screen-reader accessible; the step machinery itself (which step
   is visible, map, slot generation, OTP mock) needs JS regardless. Nothing
   submits to a server yet — that's Phase 2. */
.booking-widget { padding: 34px 30px; max-width: 760px; margin: -10px auto 0; }
.booking-widget__label { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 12px; display: block; }
.booking-widget__label small { font-weight: 400; color: var(--gray); font-size: 12px; }
.booking-widget__sublabel { font-size: 13px; color: var(--gray); margin: -8px 0 16px; }
.problem-group-label { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin: 20px 0 10px; }
.problem-group-label:first-of-type { margin-top: 0; }

/* Slim progress bar (label + % + fill) — used at every breakpoint so the
   flow stays visually consistent across all 6 service pages and devices,
   rather than a dot-per-step indicator that gets cramped past ~5 steps. */
.booking-progress { margin-bottom: 26px; }
.booking-progress__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.booking-progress__label { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 11.5px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; }
.booking-progress__pct { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px; color: var(--accent); }
.booking-progress__track { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.booking-progress__fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s var(--ease); }

/* Steps: JS toggles .is-active to show/hide (this flow needs JS regardless,
   for the map and slot generation, so no no-JS fallback is attempted) */
.booking-step { display: none; }
.booking-step.is-active { display: block; }

.booking-widget__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.booking-widget__actions-right { display: flex; align-items: center; gap: 8px; }
.booking-widget__hint {
  display: none; font-size: 13px; color: #d9463f; margin: -12px 0 16px; font-weight: 500;
}
.booking-widget__hint.is-visible { display: block; }

.btn--sm { padding: 9px 16px; font-size: 12.5px; }
.btn--text { background: transparent; color: var(--gray); padding: 11px 10px; }
.btn--text:hover { color: var(--accent); }

/* Icon-cards — appliance type / brand / problem selection */
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.option-grid--brand { grid-template-columns: repeat(2, 1fr); }
.option-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 18px 12px 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--border);
  cursor: pointer; transition: all 0.2s var(--ease); user-select: none; min-width: 0;
}
.option-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.option-input:checked + .option-card { border-color: var(--accent); background: rgba(255, 152, 0, 0.08); box-shadow: 0 8px 20px -10px rgba(255, 152, 0, 0.5); }
.option-input:focus-visible + .option-card { outline: 2px solid var(--ink); outline-offset: 2px; }
.option-card__icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--ink);
  transition: all 0.2s var(--ease);
}
.option-input:checked + .option-card .option-card__icon { background: #fff; color: var(--accent); }
.option-card__icon img { width: 78%; height: 78%; object-fit: contain; }
.option-card__name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.25; }
.option-card__check {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5); transition: all 0.2s var(--ease);
}
.option-input:checked + .option-card .option-card__check { opacity: 1; transform: scale(1); }

.option-card--compact { flex-direction: row; text-align: left; padding: 12px 14px; gap: 10px; }
.option-card__badge {
  width: 34px; height: 34px; border-radius: 9px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--gray);
}
.option-input:checked + .option-card--compact .option-card__badge { background: #fff; color: var(--accent); }
@media (min-width: 480px) { .option-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .option-grid--brand { grid-template-columns: repeat(3, 1fr); } }

/* Location step — detect-my-location / manual address (no visible map;
   Geocoder + Places Autocomplete run headless) */
.locate-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 26px 20px; margin-bottom: 20px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 152, 0, 0.1), rgba(255, 255, 255, 0.6));
  border: 1.5px dashed rgba(255, 152, 0, 0.4);
}
.locate-card__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 4px;
  box-shadow: 0 8px 18px -6px rgba(255, 152, 0, 0.55);
}
.locate-card h3 { font-size: 15.5px; margin: 0; }
.locate-card p { font-size: 13px; color: var(--gray); max-width: 320px; margin: 0 0 4px; }
.locate-card [data-action="locate"].is-loading { opacity: 0.7; pointer-events: none; }

.detected-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 20px;
  border-radius: 14px; background: rgba(47, 168, 107, 0.08); border: 1.5px solid rgba(47, 168, 107, 0.35);
  color: #1f7a4d; font-size: 18px;
}
.detected-card__body { flex: 1; min-width: 0; }
.detected-card__title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12.5px; color: #1f7a4d; }
.detected-card__addr { font-size: 13.5px; color: var(--ink); margin-top: 2px; line-height: 1.4; }

.field-label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 13px; color: var(--ink);
  cursor: pointer; transition: all 0.2s var(--ease); user-select: none;
}
.option-input:checked + .chip-pill { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Google Places autocomplete dropdown (injected into <body> by the Maps JS
   API, outside our normal DOM/CSS scope) — restyled to match the site and
   raised above everything so it isn't clipped by the booking widget. */
.pac-container {
  z-index: 4000; margin-top: 6px; border-radius: 14px; border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  font-family: 'Inter', sans-serif;
}
.pac-item { padding: 10px 14px; font-size: 13.5px; border-color: var(--border); }
.pac-item-query { font-size: 13.5px; }

/* Schedule step */
.emergency-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 20px;
  border-radius: 16px; background: linear-gradient(135deg, var(--ink), #16295e); color: #fff;
  cursor: pointer; border: 1.5px solid transparent; transition: all 0.2s var(--ease);
}
.emergency-card:hover { transform: translateY(-2px); }
.emergency-card.is-active { border-color: var(--accent); box-shadow: 0 10px 26px -12px rgba(255, 152, 0, 0.6); }
.emergency-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.emergency-card.is-disabled:hover { transform: none; }
.emergency-card.is-disabled .emergency-card__sub { color: rgba(255, 255, 255, 0.8); font-style: italic; }
.emergency-card__icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--accent); flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
}
.emergency-card__body { flex: 1; }
.emergency-card__title { display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; }
.emergency-card__sub { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-top: 2px; }
.emergency-card__check {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); flex: 0 0 20px;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; opacity: 0;
  transition: all 0.2s var(--ease);
}
.emergency-card.is-active .emergency-card__check { background: #fff; border-color: var(--accent); opacity: 1; }
.emergency-card__check i { color: #ff9800; }

/* Quick date row + custom calendar */
.date-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.date-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 4px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; transition: all 0.2s var(--ease); min-width: 0;
}
.date-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.date-card.selected { border-color: var(--accent); background: rgba(255, 152, 0, 0.08); box-shadow: 0 8px 18px -10px rgba(255, 152, 0, 0.5); }
.date-card__dow { font-size: 10.5px; font-weight: 700; color: var(--gray); text-transform: uppercase; }
.date-card.selected .date-card__dow { color: var(--accent); }
.date-card__num { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.date-card__mon { font-size: 10px; color: var(--gray); font-weight: 600; }
.date-card--custom { color: var(--accent); }
.date-card--custom i { font-size: 15px; margin-bottom: 2px; }
@media (max-width: 420px) { .date-row { grid-template-columns: repeat(3, 1fr); row-gap: 8px; } }

.calendar-panel { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head__title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav__btn { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink); }
.cal-nav__btn:hover:not(:disabled) { background: rgba(255, 152, 0, 0.12); color: var(--accent); }
.cal-nav__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dow { font-size: 10.5px; font-weight: 700; color: var(--gray); padding: 4px 0; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all 0.15s var(--ease); }
.cal-day:hover:not(.is-disabled):not(.is-empty) { background: rgba(255, 152, 0, 0.12); color: var(--accent); }
.cal-day.is-disabled { color: var(--border); pointer-events: none; }
.cal-day.is-empty { pointer-events: none; }
.cal-day.selected { background: var(--accent); color: #fff; box-shadow: 0 4px 10px -2px rgba(255, 152, 0, 0.5); }

/* Grouped time slots */
.slot-group { margin-bottom: 16px; }
.slot-group__title { display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.slot-group__title i { color: var(--accent); }
.slot-wrap { display: flex; flex-wrap: wrap; gap: 9px; }
.slot-grid__empty { font-size: 13.5px; color: var(--gray); }
.slot-chip-btn {
  padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 13px; color: var(--ink);
  cursor: pointer; transition: all 0.2s var(--ease); user-select: none;
}
.slot-chip-btn:hover { border-color: var(--accent); }
.slot-chip-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Contact + phone/OTP */
.phone-input-row { display: flex; gap: 8px; }
.phone-prefix {
  display: flex; align-items: center; justify-content: center; padding: 0 14px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg);
  font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--gray);
}
.otp-row { display: flex; gap: 10px; margin: 8px 0 4px; }
.otp-box {
  width: 48px; height: 54px; text-align: center; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 20px;
  border: 1.5px solid var(--border); border-radius: 12px; background: #fff; transition: all 0.15s var(--ease);
}
.otp-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.15); }
.otp-box.is-error { border-color: #d9463f; animation: otp-shake 0.35s ease; }
.otp-box.is-success { border-color: #2fa86b; background: rgba(47, 168, 107, 0.08); }
@keyframes otp-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.otp-msg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 9px 12px; border-radius: 10px; margin-top: 10px; }
.otp-msg--error { color: #d9463f; background: rgba(217, 70, 63, 0.08); }
.otp-msg--success { color: #2fa86b; background: rgba(47, 168, 107, 0.08); }
.otp-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.link-btn { background: none; border: none; color: var(--accent); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }
.link-btn:disabled { color: var(--gray); cursor: default; }
.otp-demo-hint { font-size: 11px; color: var(--gray); background: var(--bg); border: 1px dashed var(--border); padding: 8px 11px; border-radius: 9px; margin-top: 14px; }

/* Review step — label left, value left-aligned right after it (was
   right-aligned, which left a ragged left edge whenever a longer value
   like the address or schedule text wrapped to a second line) */
.review-summary { margin-bottom: 20px; }
.review-summary__row {
  display: flex; align-items: baseline; gap: 20px; padding: 12px 0;
  border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.review-summary__row:last-child { border-bottom: none; }
.review-summary__row span { color: var(--gray); flex: 0 0 110px; text-align: left; }
.review-summary__row strong { color: var(--ink); font-weight: 600; text-align: left; flex: 1; min-width: 0; }
.price-card { background: linear-gradient(135deg, var(--ink), #16295e); color: #fff; border-radius: 16px; padding: 20px 22px; margin-bottom: 20px; }
.price-card__top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.price-card__top strong { font-family: 'Outfit', sans-serif; font-size: 22px; color: var(--accent-2); }
.price-card__note { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); margin-top: 8px; }

.booking-thankyou { text-align: center; padding: 10px 0; }
.booking-thankyou__icon { font-size: 52px; color: #2fa86b; display: block; margin-bottom: 14px; }
.booking-thankyou h3 { font-size: 24px; margin-bottom: 8px; }
.booking-thankyou p { color: var(--gray); margin-bottom: 18px; }
.booking-thankyou__id, .booking-thankyou__window { font-size: 14px; margin-bottom: 8px; }
.booking-thankyou__next { text-align: left; background: var(--bg); border-radius: 14px; padding: 16px 20px; margin: 20px 0; }
.booking-thankyou__next h4 { font-size: 13.5px; margin-bottom: 8px; }
.booking-thankyou__next p { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin-bottom: 0; padding: 5px 0; }
.booking-thankyou__next p i { color: #2fa86b; }
.booking-thankyou__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 420px) {
  .option-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .otp-box { width: 42px; height: 48px; font-size: 18px; }
}

/* Common issues grid — reuses the .why-grid two-column icon+text layout */
.issues-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.issue-item { display: flex; align-items: flex-start; gap: 16px; padding: 24px; min-width: 0; }
.issue-item__icon {
  flex: 0 0 50px; width: 50px; height: 50px; border-radius: 14px;
  background: rgba(255, 152, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.issue-item h3 { font-size: 16.5px; margin-bottom: 4px; }
.issue-item p { font-size: 13.5px; color: var(--gray); }
@media (max-width: 700px) { .issues-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .booking-widget { padding: 26px 18px; } }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: start; }
.contact-form { padding: 34px 30px; }
.contact-form__hint { font-size: 13px; color: #d9463f; margin: -8px 0 16px; font-weight: 500; }
.contact-form__success { padding: 60px 30px; text-align: center; }
.contact-form__success i { display: block; font-size: 44px; color: #2fa86b; margin-bottom: 14px; }
.contact-form__success p { font-size: 15px; color: var(--ink); margin: 0; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 8px; }
.form-row input, .form-row textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); }
.form-row textarea { resize: vertical; min-height: 110px; }

.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info__card { padding: 26px; display: flex; align-items: flex-start; gap: 16px; }
.contact-info__icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 152, 0, 0.1); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.contact-info__card h3 { font-size: 15px; margin-bottom: 4px; }
.contact-info__card p { font-size: 13.5px; color: var(--gray); margin: 0; }
.contact-info__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 8px 0; font-size: 13.5px; }
.hours-table td:first-child { color: var(--ink); font-weight: 500; }
.hours-table td:last-child { color: var(--gray); text-align: right; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .contact-form { padding: 24px 18px; } }

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { overflow: hidden; min-width: 0; transition: transform 0.3s var(--ease); }
.blog-card:hover { transform: translateY(-6px); }
.blog-card__media {
  height: 170px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255, 152, 0, 0.18), rgba(11, 27, 69, 0.08));
  position: relative;
}
.blog-card__media i { font-size: 40px; color: var(--accent); opacity: 0.7; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__tag {
  position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-family: 'Outfit', sans-serif; text-transform: uppercase;
  background: rgba(11, 27, 69, 0.75); color: #fff; letter-spacing: 0.03em;
}
.blog-card__body { padding: 22px; }
.blog-card__date { font-size: 12px; color: var(--gray); margin-bottom: 10px; }
.blog-card h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.35; }
.blog-card__link { font-size: 13px; font-weight: 600; font-family: 'Outfit', sans-serif; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-post { max-width: 760px; margin: 0 auto; }
.blog-post__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--gray); margin-bottom: 18px; }
.blog-post__body { font-size: 16px; color: var(--ink-soft); }
.blog-post__body p { margin-bottom: 18px; }
.blog-post__body h2 { font-size: 22px; margin: 30px 0 14px; }

/* ==========================================================================
   Legal pages (privacy, terms, refund)
   ========================================================================== */

.legal-content { max-width: 780px; margin: 0 auto; padding: 36px 34px; }
.legal-content__updated { font-size: 13px; color: var(--gray); margin-bottom: 26px; }
.legal-content h2 { font-size: 19px; margin: 28px 0 12px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 14px; }
.legal-content ul { padding-left: 20px; margin-bottom: 14px; }
.legal-content li { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 8px; list-style: disc; }
@media (max-width: 600px) { .legal-content { padding: 26px 20px; } }