/*
 * 4S Door Pro website — design system.
 *
 * Hand-written rather than Tailwind on purpose: deployment here is `git pull`,
 * and adding a Node build step to the critical path of shipping a copy change
 * buys nothing at this size. One file, no compile, cache-busted by ?v= in the
 * layout.
 *
 * Every colour below is the token used by the iOS/Android app
 * (homeseva/lib/core/theme/app_colors.dart), copied exactly so the two surfaces
 * cannot drift. The *layout* is deliberately nothing like the app's: this is
 * built for a mouse and a wide screen — multi-column grids, a sticky booking
 * rail, hover states, a mega-menu — because a phone layout stretched across
 * 1440px is not a desktop site.
 */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ink: #0D1B2E;
  --navy: #16346F;
  --primary: #1F4FD8;
  --primary-pressed: #2A5CE8;
  --primary-tint: #EEF3FE;
  --slate-blue: #AAB8CE;

  --surface: #FFFFFF;
  --canvas: #F4F6F9;
  --canvas-outer: #E9EDF3;
  --surface-subtle: #F8FAFD;
  --border: #E3E8EF;
  --divider: #EEF1F5;

  --text-primary: #0D1B2E;
  --text-secondary: #3D4B5F;
  --text-muted: #5C6B7F;
  --text-faint: #8A96A6;
  --text-fainter: #B4BECC;

  --success: #0E9F6E;
  --success-dark: #0B8A5F;
  --success-tint: #E5F5EE;
  --star: #F59E0B;
  --danger: #D64545;

  /* Offer gradients, straight from the prototype. */
  --grad-promo: linear-gradient(135deg, #16346F, #1F4FD8);
  --grad-salon: linear-gradient(135deg, #3B1D5E, #7C3AED);
  --grad-cleaning: linear-gradient(135deg, #0B4A3A, #0E9F6E);
  --grad-repairs: linear-gradient(135deg, #7A2E0E, #EA580C);

  --shadow-card: 0 1px 3px rgba(13, 27, 46, .05);
  --shadow-hover: 0 8px 20px rgba(31, 79, 216, .14);
  --shadow-cta: 0 10px 28px rgba(31, 79, 216, .4);
  --shadow-float: 0 8px 24px rgba(13, 27, 46, .3);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Wider than a blog, narrower than full-bleed: keeps a 4-up service grid at a
     comfortable card size on a 1440px screen without stretching on a 27" one. */
  --page: 1200px;
  --gutter: 24px;

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
/* The same OFL variable fonts the app bundles, self-hosted: no third-party
   request on first paint, and no flash of a fallback face. */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/Sora.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text-primary);
}

h1 { font-size: clamp(32px, 4vw, 52px); }
h2 { font-size: clamp(26px, 2.6vw, 36px); }
h3 { font-size: 20px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Keyboard users must be able to see where they are. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 100;
  background: var(--surface); color: var(--primary);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ─── Layout primitives ──────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(48px, 6vw, 88px); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.section--canvas { background: var(--canvas); }
.section--subtle { background: var(--surface-subtle); }

.stack > * + * { margin-top: var(--s, 16px); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}

.lede {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 62ch;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease,
              transform .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none;
}

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-pressed); box-shadow: var(--shadow-hover); }

.btn--cta { background: var(--primary); color: #fff; box-shadow: var(--shadow-cta); }
.btn--cta:hover { background: var(--primary-pressed); }

.btn--ghost {
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn--ghost:hover { background: var(--primary-tint); }

.btn--quiet {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn--quiet:hover { background: var(--canvas); color: var(--text-primary); }

.btn--onDark {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
}
.btn--onDark:hover { background: rgba(255, 255, 255, .22); }

.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: var(--success-dark); }

.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--sm { padding: 9px 15px; font-size: 14px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.card--pad { padding: 22px; }

/* Reserved for genuinely clickable cards; the lift is the affordance. */
.card--link {
  display: block;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--slate-blue);
  text-decoration: none;
}

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* For rails whose length is driven by data rather than design — "popular right
   now" is however many services staff have flagged. A fixed 4-column grid makes
   three items look like a row that failed to load; auto-fit makes any count
   look deliberate. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

/* ─── Chips & badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge--primary { background: var(--primary-tint); color: var(--primary); }
.badge--success { background: var(--success-tint); color: var(--success-dark); }
.badge--star { background: #FEF3E2; color: #B45309; }
.badge--danger { background: #FBE9E9; color: var(--danger); }
.badge--onDark { background: rgba(255, 255, 255, .16); color: #fff; }

.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.rating svg { fill: var(--star); width: 14px; height: 14px; }

.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text-primary);
}
.price small {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
}
.price del { color: var(--text-fainter); font-weight: 500; font-size: 15px; }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.input, .select, .textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.input::placeholder { color: var(--text-fainter); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.field-error { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 6px; }
.field-hint { color: var(--text-faint); font-size: 13px; margin-top: 6px; }

.alert {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  border: 1px solid transparent;
  margin-bottom: 20px;
}
.alert--info { background: var(--primary-tint); color: var(--navy); border-color: #D5E1FB; }
.alert--success { background: var(--success-tint); color: var(--success-dark); border-color: #BFE7D5; }
.alert--error { background: #FBE9E9; color: #9B2C2C; border-color: #F3CFCF; }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: var(--r-xs); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav__link {
  padding: 9px 13px;
  /* "Sign in" wrapped onto two lines at 390px, which reads as a broken
     header rather than a link. */
  white-space: nowrap;
  border-radius: var(--r-xs);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  background: var(--primary-tint);
  color: var(--primary);
  text-decoration: none;
}

/* Search sits in the header on desktop because browsing by name is the most
   common entry point after the category grid.

   Shaped as a pill to match the location chip and cart beside it — as a 10px
   rounded rectangle it was the only square-ish control in a row of pills, which
   made it read as an empty input well rather than a button-like control. */
.header-search {
  /* Not `flex: 1`: as a growing item the row squeezed it back down to 118px and
     clipped its own placeholder to "Search s". Sized to the text it has to hold,
     and allowed to shrink no further. */
  flex: 0 1 210px;
  min-width: 176px;
  position: relative;
}
.header-search .input {
  height: 40px;
  padding: 0 14px 0 36px;
  border-radius: var(--r-pill);
  background: var(--surface-subtle);
  font-size: 13.5px;
  font-weight: 600;
}
.header-search .input::placeholder { color: var(--text-faint); font-weight: 600; }
.header-search .input:hover { border-color: var(--slate-blue); }
.header-search .input:focus {
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.header-search svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}
.header-search .input:focus ~ svg,
.header-search:focus-within svg { color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.cart-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 17px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.cart-pill:hover { background: var(--navy); text-decoration: none; }
.cart-pill__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mega-menu: a marketplace with 5 categories and 32 services can show all of it
   at once on a desktop, which beats making people click into each category to
   find out what is inside.

   Anchored to `.site-header`, not to the link. Centring a 940px panel on a link
   that sits ~360px from the left edge pushed half of it off-screen, where it was
   clipped — so the positioning context is the header (sticky, therefore a
   containing block) and the panel is centred on the page instead. */
.has-mega { position: static; }

/* The hover target has to reach the panel, or the menu is unusable.

   `.mega` is flush to the *header's* bottom edge, but the nav item is only 24px
   tall and sits centred in a 72px bar — so its box ended 24px above where the
   panel began. A pointer travelling down from the link crossed that band
   hovering neither element, `:hover` dropped, and the menu closed before it
   could be entered. Stretching the item to the full height of the bar closes
   the band; it changes nothing visually, because the link stays centred. */
.nav { align-self: stretch; }
.has-mega {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.has-mega > .mega { display: none; }
.has-mega:hover > .mega,
.has-mega:focus-within > .mega { display: grid; }

.mega {
  position: absolute;
  /* Flush to the header, so there is no dead gap to cross with the mouse and
     no need for a bridging element. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  border-top: 0;
  box-shadow: 0 18px 48px rgba(13, 27, 46, .16);
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  /* Above the page, below nothing else on the header. */
  z-index: 60;
}

.mega__col > a.mega__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.mega__col a { display: block; font-size: 13.5px; color: var(--text-muted); padding: 5px 0; }
.mega__col a:hover { color: var(--primary); text-decoration: none; }

.nav-toggle { display: none; }

/* ─── Page hero ──────────────────────────────────────────────────────────── */
/*
   Secondary pages used to open with black text on white, which read as an
   unfinished draft next to the home page. This gives every one of them a proper
   masthead in the brand's ink, with an optional photograph behind it.
*/
.page-hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(13,27,46,.95) 15%, rgba(13,27,46,.7) 60%, rgba(13,27,46,.35) 100%);
}
.page-hero__inner { position: relative; padding-block: clamp(40px, 5vw, 74px); }
.page-hero h1 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); }
.page-hero .lede { color: #C6D4EC; margin-top: 14px; }
.page-hero .eyebrow { color: #8FB2FF; }
.page-hero .crumbs { padding-top: 0; color: #8FB2FF; }
.page-hero .crumbs a { color: #C6D4EC; }
.page-hero .crumbs a:hover { color: #fff; }

/* A row of headline figures. Real ones, queried — a hardcoded "10,000+ happy
   customers" is the fastest way to lose the trust the page is asking for. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.stats--onLight { border-top-color: var(--border); }
.stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  color: #fff;
  letter-spacing: -0.02em;
}
.stats--onLight div strong { color: var(--text-primary); }
.stats div span { font-size: 13.5px; color: #AAB8CE; }
.stats--onLight div span { color: var(--text-muted); }

/* ─── Jump nav ───────────────────────────────────────────────────────────── */
/* Sticky category chips on the long all-services page: 32 services is a lot of
   scrolling, and a table of contents that follows you turns it into two clicks. */
.chipnav {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.chipnav ul {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chipnav ul::-webkit-scrollbar { display: none; }
.chipnav a {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 700;
}
.chipnav a:hover, .chipnav a[aria-current="true"] {
  background: var(--primary-tint);
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

/* ─── Feature blocks ─────────────────────────────────────────────────────── */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-tint);
  color: var(--primary);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature h3 { font-size: 16.5px; }
.feature p { color: var(--text-muted); font-size: 14.5px; margin-top: 5px; }

/* ─── CTA band ───────────────────────────────────────────────────────────── */
/* Closes a page with the action it is arguing for, rather than dumping the
   reader straight into the footer. */
.cta-band { background: var(--grad-promo); color: #fff; }
.cta-band__inner {
  padding-block: clamp(40px, 5vw, 66px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; max-width: 24ch; }
.cta-band p { color: rgba(255, 255, 255, .82); margin-top: 10px; max-width: 52ch; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Category band (all-services page) ──────────────────────────────────── */
.cat-band { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: start; }
.cat-band__aside { position: sticky; top: 140px; }
.cat-band__cover { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.cat-band__cover img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Professional cards ─────────────────────────────────────────────────── */
.pro-tile { overflow: hidden; display: flex; flex-direction: column; }
.pro-tile__media { aspect-ratio: 1/1; background: var(--canvas); position: relative; }
.pro-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.pro-tile__badge { position: absolute; top: 10px; right: 10px; }
.pro-tile__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.pro-tile__skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ─── Steps as cards ─────────────────────────────────────────────────────── */
.step-card { position: relative; }
.step-card__n {
  display: grid;
  margin-bottom: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(31, 79, 216, .35);
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13, 27, 46, .96) 12%,
                                      rgba(13, 27, 46, .74) 46%,
                                      rgba(13, 27, 46, .34) 100%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
  padding-block: clamp(56px, 7vw, 104px);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero p.lede { color: #C6D4EC; }
.hero__points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.hero__points li {
  display: flex; align-items: center; gap: 11px;
  color: #DEE7F5; font-size: 15px;
}
.hero__points svg { width: 19px; height: 19px; flex-shrink: 0; color: #5B8DEF; }
.hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* A booking form in the hero, so the primary action needs no scroll. */
.hero__card {
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--r-xl);
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.trust-bar {
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .22);
  position: relative;
}
.trust-bar ul {
  list-style: none; margin: 0; padding: 18px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.trust-bar li { text-align: center; color: #C6D4EC; font-size: 13.5px; }
.trust-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.02em;
}

/* ─── Category & service cards ───────────────────────────────────────────── */
.cat-card { overflow: hidden; }
.cat-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--canvas); }
.cat-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__body { padding: 16px 18px 18px; }
/* Two lines' worth, so "7 services" sits on the same baseline across the row
   whether the category name wraps or not. */
.cat-card__body h3 { font-size: 16.5px; min-height: 2.3em; }
.cat-card__meta { color: var(--text-faint); font-size: 13px; margin-top: 3px; }

.svc-card { overflow: hidden; display: flex; flex-direction: column; }
.svc-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--canvas); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__badge { position: absolute; top: 10px; left: 10px; }
.svc-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3 { font-size: 16px; margin-bottom: 4px; }
.svc-card__desc {
  color: var(--text-muted); font-size: 13.5px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--divider);
}
.svc-card__row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-faint); }

/* ─── Service detail ────────────────────────────────────────────────────── */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 40px;
  align-items: start;
}

/* The price and the button follow you down a long page of includes and reviews;
   on a phone this un-sticks and drops below the content. */
.book-rail { position: sticky; top: 96px; }

.includes { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.includes li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-secondary); }
.includes svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 2px; }

.review { padding: 18px 0; border-bottom: 1px solid var(--divider); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.review__who { font-weight: 700; font-size: 14px; }

.pro-card { display: flex; gap: 14px; align-items: center; }
.pro-card img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ─── Steps ──────────────────────────────────────────────────────────────── */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 60px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
}
.step h3 { font-size: 17px; margin-bottom: 4px; }
.step p { color: var(--text-muted); font-size: 14.5px; }

/* ─── Disclosures ────────────────────────────────────────────────────────── */
details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "";
  width: 9px; height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
details[open] > summary::after { transform: rotate(-135deg); }

/* ─── Tables & summaries ─────────────────────────────────────────────────── */
.summary { list-style: none; margin: 0; padding: 0; }
.summary li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: 14.5px; color: var(--text-muted);
}
.summary li span:last-child { color: var(--text-primary); font-weight: 600; }
.summary li.is-discount span:last-child { color: var(--success); }
.summary li.is-total {
  border-top: 1px solid var(--border);
  margin-top: 8px; padding-top: 14px;
  font-size: 17px; color: var(--text-primary); font-weight: 700;
}
.summary li.is-total span:last-child { font-family: var(--font-display); font-size: 21px; }

.line-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--divider); }
.line-item:last-child { border-bottom: 0; }
.line-item img { width: 88px; height: 66px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.line-item__main { flex: 1; min-width: 0; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.qty button {
  width: 34px; height: 34px;
  background: var(--surface); border: 0; cursor: pointer;
  color: var(--primary); font-size: 17px; font-weight: 700;
}
.qty button:hover { background: var(--primary-tint); }
.qty span { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; }

/* ─── Choice grids (dates, slots, payment) ───────────────────────────────── */
.choices { display: grid; gap: 10px; }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
.choices--4 { grid-template-columns: repeat(4, 1fr); }

.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice > span {
  display: block;
  padding: 12px 10px;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.choice:hover > span { border-color: var(--slate-blue); }
.choice input:checked + span {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary);
}
.choice input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.choice input:disabled + span { opacity: .45; cursor: not-allowed; }
.choice strong { display: block; font-family: var(--font-display); font-size: 17px; }
.choice small { display: block; color: var(--text-faint); font-size: 12px; font-weight: 600; }
.choice input:checked + span small { color: var(--primary); }

/* ─── Tracking timeline ──────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 26px 34px; }
.timeline li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border);
  box-shadow: inset 0 0 0 5px var(--surface);
}
.timeline li::after {
  content: "";
  position: absolute; left: 8px; top: 22px; bottom: 0;
  width: 2px; background: var(--border);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li.is-done::before { background: var(--success); }
.timeline li.is-done::after { background: var(--success); }
.timeline li.is-current::before { background: var(--primary); box-shadow: inset 0 0 0 5px var(--surface), 0 0 0 4px var(--primary-tint); }
.timeline__label { font-weight: 700; font-size: 15px; }
.timeline li:not(.is-done):not(.is-current) .timeline__label { color: var(--text-fainter); }
.timeline__detail { color: var(--text-muted); font-size: 13.5px; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: #AAB8CE; padding-block: 56px 28px; }
.site-footer h4 {
  color: #fff; font-size: 14px; font-family: var(--font-ui);
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer a { color: #AAB8CE; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.site-footer__brand img { width: 34px; height: 34px; border-radius: var(--r-xs); }
.site-footer__bottom {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); padding-block: 18px; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--primary); }

/* ─── Empty states ───────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 64px 24px; }
.empty svg { width: 44px; height: 44px; color: var(--text-fainter); margin: 0 auto 16px; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--text-muted); max-width: 44ch; margin-inline: auto; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-band { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cat-band__aside { position: static; }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .book-rail { position: static; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1200px) {
  /* Dropped rather than squeezed. Between roughly 1100px and 1200px the nav,
     search, location chip and cart together overflowed the row by ~54px, and the
     page scrolled sideways. Every page carries its own search field, so the
     header's is the right thing to lose first. */
  .header-search { display: none; }
}

/* The nav collapses here rather than at 860px: once the location chip joined the
   row, four nav links plus search, sign-in and cart overflowed by ~90px at
   900px. */
@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r-pill);
    background: var(--surface-subtle); border: 1px solid var(--border);
    cursor: pointer;
  }
  .site-header[data-open="true"] .nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 12px var(--gutter) 20px; gap: 2px;
    z-index: 55;
  }
  .site-header[data-open="true"] .mega { display: none; }
  /* Stacked, not a row: undo the desktop stretch so the link fills the width. */
  .nav, .has-mega { align-self: auto; }
  .has-mega { display: block; }
}

@media (max-width: 860px) {
  .chipnav { top: 0; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .trust-bar ul { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  /* Tighten the header so brand, location, cart and menu fit one line. Adding
     the area chip pushed the row 9px past the viewport at 390px, which is enough
     to make the whole page scroll sideways. */
  .site-header__bar { gap: 8px; }
  /* The icon still links home; the wordmark is the cheapest thing to drop. */
  .brand span { display: none; }
  .area-chip { padding: 9px 10px; }
  .cart-pill { padding: 10px 11px; }
  .nav__link { padding: 9px 8px; }
  .cart-pill { padding: 10px 13px; }
  .cart-pill span:not(.cart-pill__count) { display: none; }
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
  .trust-bar ul { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .choices--3 { grid-template-columns: 1fr 1fr; }
  .line-item img { width: 64px; height: 52px; }
}

/* Someone who has asked for less motion gets none of the decorative kind. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .card--link:hover { transform: none; }
  .cat-card:hover .cat-card__media img { transform: none; }
}

/* Print: nobody prints a marketplace, but a booking confirmation gets printed. */
@media print {
  .site-header, .site-footer, .btn, .nav { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ─── Location picker ────────────────────────────────────────────────────── */
/*
   Sits in the header because where you are changes what is bookable, so it has
   to be visible and changeable from every page rather than buried in checkout.
*/
.area-picker { position: relative; flex-shrink: 0; }

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  max-width: 190px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.area-chip:hover { border-color: var(--primary); color: var(--primary); }
.area-chip svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--primary); }
.area-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-chip__caret { width: 13px; height: 13px; color: var(--text-faint); }
.area-chip[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }

.area-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  z-index: 70;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(13, 27, 46, .18);
  padding: 18px;
}
.area-pop__title { font-weight: 800; font-size: 14.5px; margin: 0 0 12px; }
.area-pop__msg { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.area-pop__form { display: flex; gap: 8px; margin-top: 12px; }
.area-pop__form .input { padding-block: 10px; }
.area-pop__label {
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 16px 0 8px;
}
.area-pop__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-height: 210px;
  overflow-y: auto;
}
.area-pop__list button {
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13.5px;
  cursor: pointer;
}
.area-pop__list button:hover { background: var(--primary-tint); color: var(--primary); }
.area-pop__list button[aria-current="true"] {
  background: var(--primary-tint); color: var(--primary); font-weight: 700;
}

/* Sits between the header and the content when coverage is partial, because a
   missing category needs explaining where the gap is, not in a footnote. */
.notice-bar {
  background: #FEF6E7;
  border-bottom: 1px solid #F6E4BF;
  color: #7A4E0B;
  font-size: 14px;
}
.notice-bar__inner {
  padding-block: 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.notice-bar a { color: #7A4E0B; font-weight: 700; text-decoration: underline; }

/* ─── Error pages ────────────────────────────────────────────────────────── */
.error-page { text-align: center; padding-block: clamp(56px, 9vw, 120px); }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--primary-tint);
}
.error-page h1 { margin-top: -12px; }
.error-page p { color: var(--text-muted); max-width: 46ch; margin: 14px auto 0; }
.error-page__actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .area-chip span { display: none; }
  .area-chip { max-width: none; padding: 9px 11px; }
  .area-pop { width: min(320px, calc(100vw - 32px)); }
}

/* ─── Banner ─────────────────────────────────────────────────────────────── */
/*
   The home page's first section: a full-bleed image banner that rotates.

   The old hero reused the phone app's photograph, which is 1080x1920 — portrait.
   Letterboxed across a desktop it showed a sliver of a vertical image and read as
   a mistake. These are 2000x1000 landscape crops fetched for this purpose.

   Built on radio inputs rather than a slider library: the dots are labels, the
   slides are siblings, and it works with no JavaScript at all. A few lines of JS
   only add auto-advance, and even that respects prefers-reduced-motion.
*/
.banner { position: relative; background: var(--ink); overflow: hidden; }

.banner__slides { position: relative; }

.banner input { position: absolute; opacity: 0; pointer-events: none; }

.banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
}
/* Only the checked slide sits in flow, and it is what gives the banner its
   height. An earlier version also pinned the first slide with :first-of-type,
   which put two slides in the flow at once and doubled the banner to 1234px the
   moment you clicked a different dot. The first input carries `checked`, so the
   rule below covers the initial render on its own. */

.banner input:nth-of-type(1):checked ~ .banner__slides .banner__slide:nth-of-type(1),
.banner input:nth-of-type(2):checked ~ .banner__slides .banner__slide:nth-of-type(2),
.banner input:nth-of-type(3):checked ~ .banner__slides .banner__slide:nth-of-type(3) {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
}

.banner__media { position: absolute; inset: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Weighted to the left, where the copy sits, so the photograph stays readable
     on the right instead of being flattened by a full-width scrim. */
  background: linear-gradient(100deg,
    rgba(13, 27, 46, .97) 0%,
    rgba(13, 27, 46, .93) 38%,
    rgba(13, 27, 46, .66) 66%,
    rgba(13, 27, 46, .34) 100%);
}

.banner__inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(60px, 8vw, 118px);
  max-width: 640px;
}
.banner h1 { color: #fff; font-size: clamp(30px, 4vw, 52px); }
.banner__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #DEE7F5;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 18px;
}
.banner__eyebrow b { color: #fff; }
.banner p { color: #C6D4EC; font-size: 17px; margin-top: 16px; max-width: 52ch; }
.banner__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* Dots. Labels, so they are clickable without script. */
.banner__dots {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  z-index: 4;
  display: flex; justify-content: center; gap: 9px;
}
.banner__dots label {
  width: 34px; height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background-color .2s ease;
}
.banner__dots label:hover { background: rgba(255, 255, 255, .55); }
.banner input:nth-of-type(1):checked ~ .banner__dots label:nth-of-type(1),
.banner input:nth-of-type(2):checked ~ .banner__dots label:nth-of-type(2),
.banner input:nth-of-type(3):checked ~ .banner__dots label:nth-of-type(3) { background: #fff; }
.banner input:focus-visible ~ .banner__dots label { outline: 2px solid #fff; outline-offset: 3px; }

/* ─── Trust strip ────────────────────────────────────────────────────────── */
/*
   Directly under the banner. Every line answers a doubt an Indian customer
   actually voices before booking a stranger into their home: is he verified, will
   the price change, can I pay after, and can I pay by UPI.
*/
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--border); }
.trust-strip ul {
  list-style: none; margin: 0; padding: 20px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-strip li { display: flex; gap: 11px; align-items: flex-start; }
.trust-strip svg { width: 21px; height: 21px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.trust-strip strong { display: block; font-size: 14.5px; }
.trust-strip span { font-size: 13px; color: var(--text-muted); }

/* ─── Testimonials ───────────────────────────────────────────────────────── */
.quote { display: flex; flex-direction: column; height: 100%; }
.quote__stars { display: flex; gap: 2px; margin-bottom: 12px; }
.quote__stars svg { width: 15px; height: 15px; fill: var(--star); }
.quote blockquote { margin: 0; font-size: 15px; color: var(--text-secondary); flex: 1; line-height: 1.65; }
.quote__who { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); }
.quote__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary);
  font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.quote__name { font-weight: 700; font-size: 14px; }
.quote__meta { font-size: 12.5px; color: var(--text-faint); }

/* ─── WhatsApp float ─────────────────────────────────────────────────────── */
/*
   A floating WhatsApp button. Not decoration for this market: it is where an
   Indian customer expects to be able to reach a business, and it costs nothing
   to support — a wa.me link opens the app on a phone and web on a desktop.
*/
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #073B22;
  font-weight: 800;
  font-size: 14.5px;
  box-shadow: 0 10px 26px rgba(7, 59, 34, .3);
}
.wa-float:hover { background: #1FBE5A; text-decoration: none; color: #073B22; }
.wa-float svg { width: 21px; height: 21px; fill: currentColor; }

/* ─── Payment row ────────────────────────────────────────────────────────── */
.pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pay-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: .02em;
}

@media (max-width: 1080px) {
  .trust-strip ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .banner__inner { padding-block: 52px 64px; }
  .banner__dots { bottom: 14px; }
  .trust-strip ul { grid-template-columns: 1fr; gap: 14px; padding: 16px 0; }
  .wa-float { right: 14px; bottom: 14px; padding: 12px 14px; }
  /* The label would crowd a small screen; the mark is universally understood. */
  .wa-float span { display: none; }
}

/* ─── Page head (funnel pages) ───────────────────────────────────────────── */
/*
   Cart, checkout, sign-in and account pages.

   These are mid-funnel, so a full photographic masthead would be noise — but the
   bare heading on white they had before left 85px of empty space above a 37px
   title and 56px below it. This is a compact bar: tight padding, a subtle ground,
   and room for a step indicator or an action on the right.
*/
.page-head {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}
.page-head__inner {
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-head .eyebrow { margin: 0 0 2px; }
.page-head h1 { font-size: clamp(24px, 2.4vw, 30px); }

/* Where you are in the booking flow. Three steps is short enough to show in
   full, and knowing there is an end reduces the drop-off at the cart. */
.steps-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.steps-bar span {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-fainter); font-weight: 700; white-space: nowrap;
}
.steps-bar b {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--border);
  color: var(--surface);
  font-size: 12px;
}
.steps-bar .is-current { color: var(--primary); }
.steps-bar .is-current b { background: var(--primary); }
.steps-bar .is-done { color: var(--success); }
.steps-bar .is-done b { background: var(--success); }
.steps-bar i {
  width: 22px; height: 1px; background: var(--border); flex-shrink: 0;
}

/* ─── Search card (home) ─────────────────────────────────────────────────── */
/*
   Overlaps the banner rather than sitting in a flat band beneath it. The flat
   version read as an afterthought stapled under the photograph; lifting it onto
   the image is the pattern booking sites use because it puts the one action the
   page wants directly on top of the thing that sold it.
*/
.search-card {
  position: relative;
  z-index: 5;
  margin-top: -58px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 22px 54px rgba(13, 27, 46, .16);
  padding: 26px 28px;
}
.search-card__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.search-card__form { display: flex; gap: 10px; }
.search-card__form .input { padding-block: 15px; font-size: 15.5px; }
.search-card__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.search-card__chips > span:first-child {
  font-size: 12.5px; font-weight: 800; color: var(--text-faint);
  letter-spacing: .04em; text-transform: uppercase;
}

/* A slim figures strip, instead of four oversized numbers in a column. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}
.figures div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.02em;
}
.figures div span { font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 860px) {
  .search-card { margin-top: -34px; padding: 20px; }
  .figures { grid-template-columns: 1fr 1fr; }
  .steps-bar { display: none; }
}