/* =============================================================================
   polish.css — visual elevation layer.
   Loaded LAST so it wins on cascade specificity. Refines the existing design
   without touching the underlying CSS. Remove this stylesheet's <link> to
   revert in one second.

   Scope: public marketing pages only (not /admin/* — that's already its own
   density-tuned design).
   ============================================================================= */

:root {
  /* Layered shadow scale — softer, more modern than flat 1-layer shadows. */
  --sh-soft-sm:  0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --sh-soft-md:  0 6px 16px -6px rgba(15, 23, 42, .12), 0 2px 4px rgba(15, 23, 42, .04);
  --sh-soft-lg:  0 24px 48px -12px rgba(15, 23, 42, .18), 0 8px 16px -8px rgba(15, 23, 42, .08);
  --sh-soft-xl:  0 40px 80px -20px rgba(15, 23, 42, .22), 0 16px 32px -16px rgba(15, 23, 42, .10);

  /* Ring used on focus + accent borders for that "real designer" feel. */
  --ring-navy:   0 0 0 4px color-mix(in srgb, var(--c-navy) 18%, transparent);
  --ring-orange: 0 0 0 4px color-mix(in srgb, var(--c-orange) 22%, transparent);

  /* Refined gradients for hero / CTA / accent surfaces. */
  --grad-hero-mesh:
    radial-gradient(60rem 35rem at 88% 8%,  rgba(8, 145, 178, .14), transparent 65%),
    radial-gradient(55rem 32rem at 6% 92%,  rgba(249, 115, 22, .14), transparent 65%),
    radial-gradient(38rem 22rem at 50% 50%, rgba(59, 91, 191, .08), transparent 70%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  --grad-warm-deep: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%);
  --grad-navy-rich: linear-gradient(160deg, #1e3a8a 0%, #172554 100%);
}

/* ───────────────────────────────────────────────────────────────────
   Page-wide refinements (don't apply to admin).
   .admin-body opt-out is via :not selectors where needed.
   ─────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body:not(.admin-body) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Beautiful selection state. */
body:not(.admin-body) ::selection {
  background: color-mix(in srgb, var(--c-orange) 25%, transparent);
  color: var(--c-navy-dark);
}

/* Crisper focus rings throughout the public site. */
body:not(.admin-body) :focus-visible {
  outline: none;
  box-shadow: var(--ring-orange);
  border-radius: 6px;
}

/* ───────────────────────────────────────────────────────────────────
   Header — sticky, glassmorphic on scroll.
   The .is-scrolled class is toggled by main.js when scrollY > 8.
   ─────────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .88);
  border-bottom-color: var(--c-border);
  box-shadow: 0 4px 24px -16px rgba(15, 23, 42, .18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, .96); }
}

/* ───────────────────────────────────────────────────────────────────
   Buttons — calmer gradient on primary, smoother hover lift.
   We disable the moving "sheen" pseudo-element since the new hover
   already feels modern without the carnival shine.
   ─────────────────────────────────────────────────────────────────── */

body:not(.admin-body) .btn {
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, color .2s;
}
body:not(.admin-body) .btn--primary {
  background: var(--grad-warm-deep);
  border: 0;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(234, 88, 12, .55);
  animation: none;
}
body:not(.admin-body) .btn--primary::before { content: none; }
body:not(.admin-body) .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(234, 88, 12, .55), 0 4px 10px -2px rgba(234, 88, 12, .25);
}
body:not(.admin-body) .btn--primary:active { transform: translateY(0); }

body:not(.admin-body) .btn--secondary {
  background: var(--c-surface);
  color: var(--c-navy);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--sh-soft-sm);
}
body:not(.admin-body) .btn--secondary:hover {
  transform: translateY(-2px);
  background: var(--c-surface);
  color: var(--c-navy-dark);
  border-color: var(--c-navy-light);
  box-shadow: var(--sh-soft-md);
}

/* Kill the spinning shine on public-site buttons too — it dates the page. */
body:not(.admin-body) .btn--sheen::after { content: none; }

/* ───────────────────────────────────────────────────────────────────
   Hero — richer mesh gradient + a glow ring under the sample-pricing card.
   ─────────────────────────────────────────────────────────────────── */

.hero { background: var(--grad-hero-mesh); padding-block: var(--s-9); }
.hero::after {
  /* Subtle dotted overlay for tactile depth — invisible on small screens. */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .055) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: radial-gradient(60rem 35rem at 50% 30%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(60rem 35rem at 50% 30%, #000 30%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hero__title-accent {
  background: var(--grad-warm-deep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__lede { color: var(--c-ink-muted); }

/* Hero sample-pricing card — glass with soft orange glow under it. */
.hero__card {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: var(--sh-soft-xl);
  position: relative;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hero__card::after {
  content: '';
  position: absolute;
  inset: 20% -8% -20% -8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(249, 115, 22, .25), transparent 70%);
  filter: blur(36px);
  z-index: -1;
  opacity: .9;
}
.hero__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 56px 96px -24px rgba(15, 23, 42, .28), var(--sh-soft-md);
}

/* Hero trust stats — bigger numbers, gradient-clipped, comfortable rhythm. */
.hero__trust { margin-top: var(--s-7); }
.hero__trust strong {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.4rem);
  background: linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ───────────────────────────────────────────────────────────────────
   Section heads — bigger, more confident.
   ─────────────────────────────────────────────────────────────────── */

.section-head { text-align: center; max-width: 64ch; margin: 0 auto var(--s-6); }
.section-head__title {
  font-size: clamp(1.875rem, 2.5vw + 1rem, 2.75rem);
  letter-spacing: -0.015em;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-ink);
}
.section-head__lede { color: var(--c-ink-muted); font-size: var(--fs-lg); margin-top: var(--s-3); }
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-orange-dark);
  margin-bottom: var(--s-3);
}

/* ───────────────────────────────────────────────────────────────────
   Trust strip — better visual treatment, subtle separator pills.
   ─────────────────────────────────────────────────────────────────── */

.trust-strip {
  background: var(--c-bg);
  border-block: 1px solid var(--c-border);
  padding-block: var(--s-5);
}
.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5) var(--s-6);
  width: var(--container);
  margin-inline: auto;
}
.trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--c-ink-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
}
.trust-strip__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange) 18%, transparent);
}

/* ───────────────────────────────────────────────────────────────────
   Generic card + form-card lift on the public site.
   ─────────────────────────────────────────────────────────────────── */

body:not(.admin-body) .form-card {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface);
  box-shadow: var(--sh-soft-md);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
body:not(.admin-body) .form-card--accent {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-warning-bg) 30%, #fff) 0%, #fff 60%);
  border-color: color-mix(in srgb, var(--c-orange) 25%, var(--c-border));
}
body:not(.admin-body) .form-card > h2 {
  font-size: clamp(1.25rem, 1.4vw + .5rem, 1.65rem);
  letter-spacing: -.01em;
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────
   FAQ items — glassier collapse panels with smoother chevron.
   ─────────────────────────────────────────────────────────────────── */

.faq-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--sh-soft-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
}
.faq-item:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-soft-md);
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--c-navy) 20%, var(--c-border));
  box-shadow: var(--sh-soft-lg);
}
.faq-item summary { font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────
   Pay page — make it feel like a real, modern checkout.
   ─────────────────────────────────────────────────────────────────── */

.pay-card {
  background: linear-gradient(180deg, #fff, #fbfbfd);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: var(--sh-soft-lg);
}
.pay-card__amount {
  font-size: clamp(2.5rem, 3vw + 1rem, 3.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--grad-navy-rich);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pay-card__safe {
  border-top: 1px dashed var(--c-border);
  padding-top: .75rem;
  margin-top: 1rem;
  color: var(--c-ink-muted);
  font-size: 0.82rem;
}

/* Simulated dev checkout (already styled — light touch only). */
.sim-checkout { border-radius: 14px; box-shadow: var(--sh-soft-md); }

/* ───────────────────────────────────────────────────────────────────
   Section that lists service cards (services page) — hover lift.
   ─────────────────────────────────────────────────────────────────── */

body:not(.admin-body) .service-card,
body:not(.admin-body) .card,
body:not(.admin-body) [class*='-card']:not(.pay-card):not(.hero__card):not(.form-card):not(.form-card--accent) {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

/* ───────────────────────────────────────────────────────────────────
   Footer — modern dark gradient with brand glow.
   ─────────────────────────────────────────────────────────────────── */

.site-footer {
  background:
    radial-gradient(60rem 30rem at 10% 10%, rgba(8, 145, 178, .14), transparent 65%),
    radial-gradient(60rem 30rem at 90% 90%, rgba(249, 115, 22, .12), transparent 65%),
    linear-gradient(180deg, #0b1228 0%, #060a18 100%);
  color: rgba(255, 255, 255, .82);
  padding-block: var(--s-6) var(--s-6);
  position: relative;
  overflow: hidden;
}
/* When the footer comes right after the CTA band, kill the gap entirely so
   the orange band flows seamlessly into the dark footer rows. */
.cta-band + .site-footer { padding-top: var(--s-5); margin-top: 0; }
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
}
.site-footer__heading {
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.site-footer a { color: rgba(255, 255, 255, .82); transition: color .15s; }
.site-footer a:hover { color: var(--c-orange); }
.site-footer__about { color: rgba(255, 255, 255, .65); line-height: 1.7; }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  color: rgba(255, 255, 255, .55);
}

/* Footer logo treatment. */
.site-logo--footer .site-logo__mark { color: var(--c-orange); }
.site-logo--footer .site-logo__name { color: #fff; }
.site-logo--footer .site-logo__tag  { color: rgba(255, 255, 255, .55); }

/* ───────────────────────────────────────────────────────────────────
   CTA band (the orange call-to-action strip between sections).
   ─────────────────────────────────────────────────────────────────── */

.cta-band {
  background: var(--grad-warm-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(40rem 20rem at 80% 0%, rgba(255, 255, 255, .18), transparent 60%);
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────
   Scroll-reveal animation — fade + slide on first appearance.
   Already wired in main.js via .is-in; we just style it.
   ─────────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal="right"] { transform: translateX(20px); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────────────────────────────────────────────────
   Standalone auth pages (admin login, forgot/reset, change-password)
   — rendered with layouts/auth.ejs, NO public header/footer. Full-screen
   gradient backdrop, glass card, brand mark at the top, premium feel.
   ─────────────────────────────────────────────────────────────────── */

.auth-body {
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(60rem 36rem at 12% 18%, rgba(8, 145, 178, .22), transparent 65%),
    radial-gradient(55rem 32rem at 88% 84%, rgba(249, 115, 22, .22), transparent 65%),
    radial-gradient(40rem 25rem at 50% 50%, rgba(59, 91, 191, .14), transparent 70%),
    linear-gradient(160deg, #eef3fb 0%, #fbf6ee 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}
.auth-body::before {
  /* Soft dotted texture for tactile depth — subtle, masked at edges. */
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image:    radial-gradient(60rem 40rem at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(60rem 40rem at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
  opacity: .55;
}
.auth-body .flash { max-width: 480px; margin: 1rem auto 0; }

.auth-body .auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  position: relative;
}

/* Brand mark above the card so the page has identity without a nav bar. */
.auth-body .auth-shell::before {
  content: 'Infinite Comfort';
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--c-navy);
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glassy card. */
.auth-body .auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  box-shadow:
    0 30px 80px -20px rgba(15, 23, 42, .25),
    0 12px 24px -12px rgba(15, 23, 42, .15),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
}
/* Soft top accent line — premium feel. */
.auth-body .auth-card::before {
  content: '';
  position: absolute;
  inset: 0 1.25rem auto 1.25rem;
  height: 3px;
  background: var(--grad-warm-deep);
  border-radius: 0 0 4px 4px;
  opacity: .9;
}

.auth-body .auth-card__head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-body .auth-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-dark) 100%);
  color: #fff;
  font-size: 22px;
  margin-bottom: 0.85rem;
  box-shadow: 0 10px 24px -8px rgba(30, 58, 138, .45);
}
.auth-body .auth-card__head h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0 0 .4rem;
}
.auth-body .auth-card__head p {
  color: var(--c-ink-muted);
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.55;
}

/* Tighter, more refined form fields inside the auth card. */
.auth-body .auth-form { gap: 1rem; }
.auth-body .field__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--c-ink-muted);
  text-transform: uppercase;
}
.auth-body .field input {
  padding: 0.7rem 0.85rem;
  font-size: 0.98rem;
  border: 1px solid var(--c-border-strong);
  background: rgba(255, 255, 255, .85);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-body .field input:focus {
  border-color: var(--c-navy);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-navy) 16%, transparent);
}

/* Sign-in button — full width, warm gradient, lift on hover. */
.auth-body .auth-form__submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  background: var(--grad-warm-deep);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 28px -10px rgba(234, 88, 12, .55);
  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out);
}
.auth-body .auth-form__submit:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(234, 88, 12, .60), 0 6px 12px -4px rgba(234, 88, 12, .3);
}
.auth-body .auth-form__submit:active { transform: translateY(0); }
.auth-body .auth-form__submit[disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
/* Disable any moving sheen pseudo on auth pages. */
.auth-body .btn--sheen::after,
.auth-body .btn--primary::before { content: none; }

/* Inline link row below the form. */
.auth-body .auth-card__links {
  text-align: center;
  margin-top: 1.25rem !important;
  font-size: 0.85rem !important;
  color: var(--c-ink-muted) !important;
}
.auth-body .auth-card__links a {
  color: var(--c-navy);
  font-weight: 500;
  text-decoration: none;
}
.auth-body .auth-card__links a:hover { color: var(--c-orange-dark); text-decoration: underline; }

/* Error banner. */
.auth-body .auth-card__error {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid color-mix(in srgb, var(--c-danger) 30%, var(--c-border));
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

/* Smooth entry — card fades + lifts in on first paint. */
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-body .auth-card { animation: auth-card-in .55s var(--ease-out) both; }
}

/* ───────────────────────────────────────────────────────────────────
   Small touches — anchor underline animation, link hover ↗, etc.
   ─────────────────────────────────────────────────────────────────── */

body:not(.admin-body) p a:not(.btn) {
  color: var(--c-navy);
  text-decoration-color: color-mix(in srgb, var(--c-navy) 30%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s, color .15s;
}
body:not(.admin-body) p a:not(.btn):hover {
  color: var(--c-orange-dark);
  text-decoration-color: var(--c-orange);
}

/* =============================================================================
   v2 polish pass — global "zoom-out", smaller forms, mobile fit.
   Loaded last, so every override below is intentional.
   ============================================================================= */

/* ── Tighter design tokens ─────────────────────────────────────────────────── */
:root {
  /* Body shrinks one notch — everything keyed off it follows. */
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(1.875rem, 2.5vw + 0.75rem, 2.5rem);
  --fs-4xl: clamp(2.125rem, 4vw + 0.75rem, 3.5rem);

  --container: min(1140px, 92vw);
  --header-h: 76px;
}

/* Slightly tighter line-height on body for the new scale. */
body { font-size: var(--fs-md); line-height: 1.5; }

/* Section ledes inherited the larger --fs-lg — keep, but cap their max width. */
.section-head__lede { max-width: 56ch; margin-inline: auto; }

/* ── Section rhythm: less air = more content per scroll = "less confusing". ── */
section,
.hero,
.about-story,
.home-areas,
.reviews-carousel-section,
.faq-section,
.contact-section,
.cta-band,
.trust-strip {
  padding-block: var(--s-7);
}

/* Header height drop. */
.site-header { min-height: var(--header-h); }
.site-header__bar { min-height: var(--header-h); padding-block: var(--s-3); }

/* ── Smaller forms (every input/select/textarea, anywhere) ─────────────────── */
.field, .form-row { margin-bottom: var(--s-3); }
.field__label   { font-size: 0.875rem; font-weight: 600; }
.field__hint    { font-size: 0.8125rem; color: var(--c-ink-faint); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.field input,
.field select,
.field textarea {
  padding: 0.55rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline-offset: 1px; }

textarea { min-height: 5.5rem; }

/* Compact buttons. */
.btn       { padding: 0.55rem 1.05rem; font-size: 0.9375rem; border-radius: var(--r-sm); }
.btn--lg   { padding: 0.7rem 1.4rem;   font-size: 1rem; }
.btn--sm   { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }

/* Form wrappers: cap width so contact / book / pay forms don't sprawl. */
.contact-form,
.book__form,
.pay__form,
form.stack { max-width: 560px; margin-inline: auto; }
.contact-form > *,
.book__form > * { width: 100%; }

/* ── Section heading block: a touch more compact ───────────────────────────── */
.section-head { margin-bottom: var(--s-6); }

/* ── Hero: tighten ─────────────────────────────────────────────────────────── */
.hero__title { line-height: 1.05; }
.hero__lede  { font-size: var(--fs-lg); max-width: 50ch; }
.hero__trust strong { font-size: var(--fs-xl); }
.hero__card  { padding: var(--s-5); }

/* ── Card grids: smaller, friendlier minimums ─────────────────────────────── */
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s-5);
}

/* =============================================================================
   MOBILE — make every page fit and centre correctly.
   Anything below 720px needs to behave like a phone.
   ============================================================================= */
@media (max-width: 720px) {

  :root { --container: min(560px, 94vw); }

  body { font-size: 0.9375rem; }
  h1   { font-size: clamp(1.875rem, 7vw, 2.375rem); }
  h2   { font-size: clamp(1.5rem,  5.5vw, 1.875rem); }
  h3   { font-size: 1.1875rem; }

  /* Sections get less vertical air on phones (avoids "where am I?" feeling). */
  section,
  .hero,
  .about-story,
  .home-areas,
  .reviews-carousel-section,
  .faq-section,
  .contact-section,
  .cta-band,
  .trust-strip { padding-block: var(--s-6); }

  /* Force every two-column grid to stack — many pages don't have their own MQ. */
  .two-col,
  .hero__inner,
  .contact-grid,
  .areas-grid,
  .cta-band__inner,
  .stat-pair,
  .invoice-grid,
  .form-row,
  .contact-form__row,
  .book__grid,
  .pay__grid { grid-template-columns: 1fr !important; gap: var(--s-4); }

  /* Hero card no longer floats next to the headline. */
  .hero__card { margin-top: var(--s-5); }

  /* Hero CTAs stack full-width for thumb taps. */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  /* Hero stats: 2 columns instead of 4. */
  .hero__trust { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s-3) !important; }

  /* Centre every section head — easier to scan. */
  .section-head { text-align: center; padding-inline: 0; }

  /* Stat / value cards: single column. */
  .card-grid,
  .about-story__stats { grid-template-columns: 1fr !important; gap: var(--s-4); }

  /* Forms: full-width inside their max-width wrapper. */
  .contact-form,
  .book__form,
  .pay__form,
  form.stack { padding-inline: 0; }
  .contact-form__row { grid-template-columns: 1fr !important; gap: var(--s-3) !important; }

  /* Service-area iframe — clip with sane height. */
  .areas-map iframe,
  .contact-map iframe { width: 100%; min-height: 240px; aspect-ratio: 4 / 3; border-radius: var(--r-md); }

  /* Trust strip: wrap evenly. */
  .trust-strip__inner { gap: var(--s-3); justify-content: center; }
  .trust-strip__item  { font-size: 0.8125rem; }

  /* Header: tighten brand text + hide the chunky brand tag. */
  .site-logo__tag { display: none; }
  .site-logo__name { font-size: 1rem; }
  .emergency-pill__label { font-size: 0.75rem; }

  /* Reviews carousel: keep it readable. */
  .reviews-carousel__slide .review-quote { padding: var(--s-4); }
  .review-quote__body { font-size: 1rem; }

  /* FAQ accordion: tighter chevron + summary. */
  .faq-item__bar { padding-block: 0.85rem; }
}

/* Extra-small (≤ 420px): kill horizontal spill on the tiniest screens. */
@media (max-width: 420px) {
  :root { --container: min(360px, 94vw); }
  .site-actions .btn--ghost { display: none; }  /* keep just Book + 24/7 */
  .hero__trust { gap: var(--s-2) !important; }
  .hero__trust strong { font-size: 1.25rem; }
}

/* Brand logo image (replaces the placeholder SVG mark) */
.site-logo__mark--img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-logo__mark--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Roomier nav bar — bigger logo + more breathing room between items */
:root { --header-h: 92px; }

.site-header__bar {
  min-height: var(--header-h);
  padding-block: var(--s-4);
  gap: var(--s-7);              /* logo | nav | actions */
}

/* Larger brand mark since the wordmark is gone */
.site-logo__mark--img {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
}
.site-logo--icon-only { gap: 0; }
.site-logo--icon-only .site-logo__text { display: none; }

/* Wider gaps between main nav links */
.site-nav { gap: var(--s-5); }
.site-nav a { padding-inline: 0.25rem; }

/* Slightly looser action cluster on the right */
.site-actions { gap: var(--s-3); }

/* Mobile: keep logo a touch smaller so the hamburger has room */
@media (max-width: 720px) {
  :root { --header-h: 76px; }
  .site-logo__mark--img { width: 48px; height: 48px; border-radius: 10px; }
}

/* Hero — floating logo (replaces the sample-pricing card) */
.hero__logo-float {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--s-5);
  pointer-events: none;          /* purely decorative */
  isolation: isolate;
}

/* Soft, color-matched halo behind the logo */
.hero__logo-float::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, rgba(249, 115, 22, 0.28), transparent 55%),
    radial-gradient(circle at 70% 55%, rgba(8, 145, 178, 0.30), transparent 55%);
  filter: blur(40px);
  z-index: -1;
  animation: heroLogoHalo 6s ease-in-out infinite alternate;
}

/* Floor shadow that softens / pulses with the bob */
.hero__logo-float::after {
  content: '';
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 60%;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.18), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  animation: heroLogoShadow 5s ease-in-out infinite;
}

.hero__logo-float img {
  width: 100%;
  height: auto;
  object-fit: contain;
  will-change: transform;
  animation: heroLogoFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 22px 30px rgba(15, 23, 42, 0.18));
}

@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0)   rotate(-0.5deg); }
  50%      { transform: translateY(-14px) rotate(0.5deg); }
}
@keyframes heroLogoShadow {
  0%, 100% { transform: translateX(-50%) scaleX(1)    scaleY(1);    opacity: 0.55; }
  50%      { transform: translateX(-50%) scaleX(0.82) scaleY(0.7);  opacity: 0.30; }
}
@keyframes heroLogoHalo {
  from { opacity: 0.8; transform: scale(1);    }
  to   { opacity: 1;   transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-float img,
  .hero__logo-float::after,
  .hero__logo-float::before { animation: none; }
}

@media (max-width: 720px) {
  .hero__logo-float { max-width: 320px; padding: var(--s-4); }
}

/* Footer logo: transparent PNG on a dark background — no white plate */
.site-logo__mark--footer {
  background: transparent !important;
  box-shadow: none !important;
  width: 48px;
  height: 48px;
  border-radius: 0;
}
.site-logo__mark--footer img { object-fit: contain; }