/* ==========================================================================
   Home Sure — rebranded fork of the Sure Fix site (see surefix/ for the
   original build history). Same layout/functionality throughout, brand
   system swapped to Home Sure's logo palette: red #EC0F1D + navy #152841
   (sampled from assets/images/logo.png), Bengaluru appliance-repair content.
   ========================================================================== */

:root {
  --ink: #152841;
  --ink-soft: #5b6478;
  --accent: #ec0f1d;
  --accent-2: #f5453a;
  --gray: #8a94a6;
  --bg: #f7f8fa;
  --bg-warm: #fdecec;
  --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, .section-head h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--gray); font-size: 16px; }

/* Services (all-services) page hero band — soft red-to-transparent
   gradient wash behind the eyebrow/heading, matching the client's
   "service-page-design" reference. */
.services-hero { padding: 44px 0 6px; background: linear-gradient(180deg, rgba(236, 15, 29, 0.09), rgba(236, 15, 29, 0) 70%); }

.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; }
.avatar-row span img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.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; }

/* Enlarged trust bar used inside the hero visual (replaces the old
   quick-enquiry form there — that form now lives on the Contact page) */
.hero__trust--visual { padding: 24px 30px; gap: 20px; box-shadow: 0 30px 60px -16px rgba(11, 27, 69, 0.25); }
.hero__trust--visual .avatar-row span { width: 48px; height: 48px; margin-left: -16px; }
.hero__trust--visual .hero__trust-text { font-size: 14.5px; }
.hero__trust--visual .hero__trust-text strong { font-size: 18px; }
.hero__trust--visual .stars { font-size: 13px; }
/* Floats the trust bar over the technician photo's feet, centered and
   slightly overlapping the bottom edge of hero__visual-core. */
.hero__trust--floating { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); z-index: 2; width: max-content; }

/* Hero visual: technician photo filling the panel, trust bar floating over
   its lower edge, plus the existing asymmetric glass chip badges. */
.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(236, 15, 29, 0.16), rgba(21, 40, 65, 0.08));
  overflow: visible;
}
.hero__technician {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 100%; width: auto; max-width: 94%; object-fit: contain; object-position: bottom;
}
.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); } }

/* Quick call-back enquiry form (Contact page) — matches the client's
   "Enquiry Form Design" reference pixel-for-pixel: navy banner with a
   glowing bolt badge and two-line heading, icon-prefixed inputs, a flat
   solid-red submit button, and a divided 3-icon trust row underneath.
   Client-side only for now: shows a success state on submit, nothing is
   saved to the DB yet — that's Phase 2. */
.quick-form {
  width: 100%; max-width: 460px; margin: 0 auto; overflow: hidden;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -16px rgba(11, 27, 69, 0.35);
}
.quick-form__banner { position: relative; background: var(--ink); color: #fff; text-align: center; padding: 34px 26px 30px; overflow: hidden; }
.quick-form__banner-icon {
  position: relative; z-index: 1;
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: #fff; color: var(--accent); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.quick-form__banner-icon::before, .quick-form__banner-icon::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14); z-index: -1;
}
.quick-form__banner-icon::after { inset: -30px; border-color: rgba(255, 255, 255, 0.08); }
.quick-form__title { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.25; margin-bottom: 10px; color: #fff; }
.quick-form__title span { display: block; color: var(--accent); font-size: 1.08em; }
.quick-form__subtitle { font-size: 15px; color: rgba(255, 255, 255, 0.75); }
.quick-form__body { padding: 28px 26px 26px; }
.quick-form__field { position: relative; margin-bottom: 16px; }
.quick-form__field i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 16px; pointer-events: none;
}
.quick-form__field input {
  width: 100%; padding: 16px 16px 16px 50px; 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);
}
.quick-form__field input:focus { outline: none; border-color: var(--accent); }
.quick-form__submit {
  width: 100%; margin-top: 4px; padding: 17px 28px; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--accent); color: #fff; border-radius: 14px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px;
  box-shadow: 0 16px 30px -12px rgba(236, 15, 29, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.quick-form__submit:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(236, 15, 29, 0.65); }
.quick-form__submit i { font-size: 15px; }
.quick-form-hint { display: none; font-size: 12.5px; color: #d9463f; margin: -8px 0 12px; font-weight: 500; }
.quick-form-hint.is-visible { display: block; }
.quick-form-success { text-align: center; padding: 30px 0; }
.quick-form-success i { display: block; font-size: 46px; color: #2fa86b; margin-bottom: 12px; }
.quick-form-success p { margin: 0; font-size: 14.5px; color: var(--ink); }
.wa-confirm-btn { margin-top: 16px; display: inline-flex; }
.quick-form__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--gray); text-align: center; margin: 18px 0 0; justify-content: center; }
.quick-form__consent i { margin-top: 2px; }
.quick-form__consent a { color: var(--accent); text-decoration: underline; }
@media (max-width: 400px) { .quick-form__body { padding: 20px 18px; } .quick-form__banner { padding: 26px 18px 22px; } }

.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; }
}

/* Phones only (desktop/tablet keep the taller contain-fit card above) — the
   photo's tall portrait ratio combined with height:100%/max-width:94% left
   a dead gap above the head once max-width clamped the width but height
   stayed at 100%. Shorter card + object-fit:cover fills it edge-to-edge
   instead, cropping the toolbox before it crops the face. */
@media (max-width: 640px) {
  .hero__visual { height: 300px; }
  .hero__visual-core { top: 10px; left: 10px; right: 10px; bottom: 10px; }
  .hero__technician { width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .hero__trust--floating { bottom: -18px; }
}

/* 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; }
/* Large product-style image (not a small tinted icon circle) and a flat
   solid "Book Now" button — matches the client's "service-page-design"
   reference. Used identically on the homepage's 6-card teaser grid and the
   full 9-card services.php grid. */
.svc-card {
  padding: 24px 22px 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: 100%; height: 168px; border-radius: 14px;
  background: rgba(11, 27, 69, 0.03);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.svc-card__icon img { width: 78%; height: 78%; object-fit: contain; }
.svc-card h3 { font-size: 18px; margin-bottom: 6px; }
.svc-card p { font-size: 10.5px; line-height: 1.4; color: var(--gray); margin-bottom: 18px; }
.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: var(--accent);
  padding: 13px 18px; border-radius: 999px; width: 100%;
  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 26px -10px rgba(236, 15, 29, 0.55); }
.svc-card:hover .svc-card__link i { transform: translateX(4px); }

/* Visually distinguished only (gradient tint + slightly larger title) — 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(236, 15, 29, 0.1), rgba(255, 255, 255, 0.5));
}
.svc-card--featured h3 { font-size: 20px; }
.services-view-all { text-align: center; margin-top: 34px; }

/* Stays a 3-column grid down to phone widths (per client request) — cards
   shrink instead of reflowing to 2/1 columns, so all sizing scales down
   together rather than just the gap/padding. */
@media (max-width: 640px) {
  .services-grid { gap: 10px; }
  .svc-card { padding: 14px 10px 12px; min-width: 0; }
  .svc-card__icon { height: 74px; margin-bottom: 10px; border-radius: 10px; }
  .svc-card h3 { font-size: 12px; margin-bottom: 3px; }
  .svc-card p { font-size: 9.5px; margin-bottom: 10px; }
  .svc-card__link { font-size: 10.5px; padding: 8px 6px; gap: 4px; }
  .svc-card__link i { display: none; }
}
@media (max-width: 380px) {
  .services-grid { gap: 6px; }
  .svc-card { padding: 10px 6px 9px; }
  .svc-card__icon { height: 60px; margin-bottom: 7px; }
  .svc-card h3 { font-size: 10.5px; }
  .svc-card p { font-size: 8.5px; margin-bottom: 8px; }
  .svc-card__link { font-size: 9.5px; padding: 7px 4px; }
}

/* ==========================================================================
   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; }

/* ==========================================================================
   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-about .footer-service-area { font-size: 13px; color: var(--ink-soft); font-weight: 500; margin: -14px 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); }

/* Contact page only — the quick call-back form sits directly below and
   already carries the page's context, so this hero reads as redundant
   vertical space on small screens. Desktop keeps it. */
@media (max-width: 640px) {
  .page-hero--contact { display: none; }
}

/* Full-width service-page banner (its own section, no text/CTA on top of
   it). Runs edge-to-edge of the viewport since it's a bare <section>/<img>
   with no .container wrapper constraining its width. On large desktop
   screens a plain width:100%/height:auto scales these 1.5–1.78 aspect
   posters up to 900px+ tall, which read as oversized/heavy — capped with a
   max-height + object-fit:cover on wider viewports so the banner stays a
   sensible height while still filling the width; mobile/tablet keep the
   uncropped natural aspect ratio since there's no excess width to fill. */
.page-banner__img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .page-banner__img { height: 420px; object-fit: cover; object-position: center; }
}
/* Opt-out for posters where the 420px desktop crop cuts off something that
   matters (set via $bannerNatural on the individual appliance page) — falls
   back to the original uncropped width:100%/height:auto at every size. */
@media (min-width: 900px) {
  .page-banner__img--natural { height: auto; object-fit: initial; }
}

/* 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; }

/* Sticky, clickable step nav — numbered circles overlapping a connecting
   fill line, pinned near the top of the viewport (not just the top of the
   widget) so it's usable while scrolled deep into a long step like Problem,
   without needing to scroll back up first. Only steps up to the current one
   are clickable (jumping ahead would skip validation); this replaces the
   old plain label+%+bar indicator. */
.booking-stepper { position: sticky; top: 84px; z-index: 5; margin: 0 0 28px; padding: 16px 6px 6px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); border-radius: 14px; }
.booking-stepper__track { position: relative; display: flex; justify-content: space-between; }
.booking-stepper__track::before { content: ''; position: absolute; top: 15px; left: 16px; right: 16px; height: 3px; background: var(--border); border-radius: 99px; }
.booking-stepper__fill { position: absolute; top: 15px; left: 16px; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; transition: width 0.4s var(--ease); }
.booking-stepper__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; cursor: default; }
.booking-stepper__step.is-clickable { cursor: pointer; }
.booking-stepper__circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--gray);
  transition: all 0.3s var(--ease);
}
.booking-stepper__label { font-family: 'Outfit', sans-serif; font-size: 10.5px; font-weight: 600; color: var(--gray); white-space: nowrap; }
.booking-stepper__step.is-done .booking-stepper__circle { background: var(--accent); border-color: var(--accent); color: #fff; }
.booking-stepper__step.is-active .booking-stepper__circle { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(236, 15, 29, 0.15); }
.booking-stepper__step.is-active .booking-stepper__label,
.booking-stepper__step.is-done .booking-stepper__label { color: var(--ink); }
.booking-stepper__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
  .booking-stepper__label { display: none; }
  .booking-stepper__circle { width: 26px; height: 26px; font-size: 11px; }
  .booking-stepper__track::before, .booking-stepper__fill { top: 12px; }
}

/* 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: var(--accent); }

/* 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; }

/* Trust-icon row under the quick-form submit button, matching the "100%
   Privacy / Quick Response / No Spam" reference layout — vertical dividers
   between each item, dropped on narrow screens where the row wraps. */
.quick-form-badges { display: flex; align-items: center; justify-content: center; margin-top: 22px; }
.quick-form-badges__item { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.quick-form-badges__divider { width: 1px; height: 34px; background: var(--border); flex: 0 0 auto; }
.quick-form-badges__icon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.quick-form-badges__text { display: flex; flex-direction: column; font-size: 11px; color: var(--gray); line-height: 1.4; text-align: left; }
.quick-form-badges__text strong { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink); }
@media (max-width: 480px) {
  .quick-form-badges { flex-wrap: wrap; gap: 14px 0; }
  .quick-form-badges__divider { display: none; }
  .quick-form-badges__item { padding: 0 10px; }
}

.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; }
.legal-content a { color: var(--accent); text-decoration: underline; }
@media (max-width: 600px) { .legal-content { padding: 26px 20px; } }