/* =========================================================
   ARS Professional Cleaning Services — styles
   Palette sampled from the logo (assets/logo.png):
     #0f71aa  logo primary blue (swoosh + "ARS")
     #a8e0fa  logo light sky blue (inner swoosh + sparkles)
   Everything else is a tint/shade of those two on white.
   ========================================================= */
:root {
  /* Blue-only palette anchored on the logo blue */
  --navy: #0a2540;       /* deep navy — headings, high contrast */
  --navy-900: #061a33;   /* footer */
  --navy-700: #0d3561;
  --blue: #0f71aa;       /* LOGO BLUE (anchor) */
  --blue-600: #0b5d8d;   /* darker logo blue */
  --azure-text: #1570cc; /* vivid azure that passes AA on white/ice (4.97:1) — eyebrows, links */
  --azure-deep: #1877d6;
  --azure: #1e90ff;      /* vivid azure — decorative only (icons, glows, sparkles), never small text */
  --blue-500: #1e90ff;
  --sky: #a8e0fa;        /* logo sky blue */
  --blue-300: #9fd0f3;
  --blue-200: #cde6fb;
  --blue-100: #e3f1ff;
  --ice: #eaf6ff;
  --blue-50: #f4faff;
  --white: #ffffff;
  --ink: #10233a;
  --muted: #4f6478;      /* 5.6:1 on ice */
  --line: #dfeaf7;

  --grad-cta: linear-gradient(135deg, #0b5d8d 0%, #0f71aa 30%, #1877d6 78%, #1e90ff 100%);
  --grad-chip: linear-gradient(135deg, #0f71aa 0%, #1e90ff 100%);
  --grad-deep: linear-gradient(120deg, #0a2540 0%, #0f71aa 55%, #1877d6 100%);
  --grad-band: linear-gradient(180deg, #eaf6ff 0%, #f4faff 55%, #ffffff 100%);
  --glow: 0 12px 30px -12px rgba(30, 144, 255, .7), 0 4px 12px -6px rgba(15, 113, 170, .45);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, .05), 0 2px 8px rgba(10, 37, 64, .05);
  --shadow: 0 14px 34px -14px rgba(10, 37, 64, .22);
  --shadow-lg: 0 34px 70px -24px rgba(10, 37, 64, .3);
  --header-h: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231e90ff' d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--navy); line-height: 1.2; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.section-sub, .lead { text-wrap: pretty; }
h3, h4 { font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--font-body); letter-spacing: .01em; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(15, 113, 170, .6); }
.btn-primary:hover { background: var(--blue-600); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(15, 113, 170, .7); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--blue-200); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue-300); outline-offset: 2px;
}

/* ---------- Header (kept white so the logo sits naturally) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(7, 43, 66, .35); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo { height: 80px; width: auto; }
#site-logo-footer { height: 92px; }
.site-footer .brand { background: #fff; border-radius: 18px; padding: 10px 18px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5); }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.main-nav ul { display: flex; gap: 30px; }
.main-nav ul a { color: var(--ink); font-weight: 500; font-size: 15px; position: relative; padding: 6px 0; }
.main-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); border-radius: 2px; }
.main-nav ul a:hover { color: var(--blue); }
.main-nav ul a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle { display: inline-flex; padding: 3px; background: var(--blue-100); border-radius: 999px; }
.lang-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: 600 12.5px/1 var(--font-body); letter-spacing: .06em; padding: 7px 11px; border-radius: 999px; transition: background .2s, color .2s;
}
.lang-btn.is-active { background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; padding: 0; position: relative; }
.nav-toggle .bar { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle .bar:nth-of-type(2) { top: 15px; }
.nav-toggle .bar:nth-of-type(3) { top: 21px; }
.nav-toggle .bar:nth-of-type(4) { top: 27px; }
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(2) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-of-type(4) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 80px 0 112px; background: linear-gradient(180deg, var(--blue-50) 0%, #fff 100%); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.blob-1 { width: 520px; height: 520px; background: var(--blue-200); top: -200px; right: -120px; }
.blob-2 { width: 380px; height: 380px; background: #dff2fc; bottom: -160px; left: -120px; }
.blob-3 { width: 220px; height: 220px; background: #eef8fe; top: 40%; left: 45%; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--sky); }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); line-height: 1.08; margin-bottom: 22px; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--blue); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 540px; margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-note { font-size: 14.5px; color: var(--muted); margin: 0; }
.hero-note a { font-weight: 600; }


/* ---------- Sections ---------- */
.section { padding: 112px 0; }
.section-soft { background: var(--blue-50); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.section-head .eyebrow { justify-content: center; }
.section h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.section-sub { color: var(--muted); font-size: 1.06rem; }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 30px 32px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); }
.icon-wrap {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(135deg, var(--blue-100), #fff); border: 1px solid var(--blue-200);
}
.icon-wrap svg, .why-icon svg, .ci svg, .success-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: .97rem; margin: 0; }

/* ---------- Why ---------- */
.why-inner { display: grid; grid-template-columns: .72fr 1.28fr; gap: 56px; align-items: start; }
.why-intro { position: sticky; top: calc(var(--header-h) + 40px); }
.why-intro .btn { margin-top: 10px; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.why-list li { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.why-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-100); display: grid; place-items: center; }
.why-icon svg { width: 22px; height: 22px; }
.why-list h3 { font-size: 1.02rem; margin-bottom: 6px; }
.why-list p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ---------- Area ---------- */
.area-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.area-map svg { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow); }
.city-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; }
.city-list li {
  padding: 8px 16px; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-200);
  color: var(--navy); font-weight: 500; font-size: 14.5px;
}
.city-list li:first-child { background: var(--blue); color: #fff; border-color: var(--blue); }
.area-note { color: var(--muted); font-size: .97rem; margin: 0; }

/* ---------- Reviews (placeholder) ---------- */
.placeholder-note {
  display: inline-block; margin: 6px 0 0; font-size: 13px; color: var(--muted);
  background: #fff; border: 1px dashed var(--blue-300); border-radius: 999px; padding: 5px 14px;
}
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.review-card.is-placeholder { border-style: dashed; border-color: var(--blue-300); }
.review-card blockquote { margin: 0 0 18px; font-family: var(--font-display); font-size: 1.2rem; font-style: italic; color: var(--navy); }
.review-card figcaption { font-size: 14px; color: var(--muted); }

/* ---------- Quote ---------- */
.contact-list { display: grid; gap: 18px; margin-top: 30px; }
.contact-list li { display: flex; align-items: center; gap: 16px; }
.ci { width: 48px; height: 48px; border-radius: 14px; background: var(--blue-100); display: grid; place-items: center; flex-shrink: 0; }
.ci svg { width: 22px; height: 22px; }
.contact-list div { min-width: 0; }
.contact-list small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.contact-list a, .contact-list span { color: var(--navy); font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--blue); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 15.5px/1.4 var(--font-body); color: var(--ink);
  background: var(--blue-50); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px;
  transition: border-color .2s, background .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 116px; }
.field input::placeholder, .field textarea::placeholder { color: #98a9b8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-100); }
.field.has-error input, .field.has-error select { border-color: #d9534f; background: #fff7f7; }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select-wrap select { padding-right: 40px; cursor: pointer; }
.form-error { margin: 0; color: #b03a36; font-size: 14px; background: #fff3f3; border-radius: 10px; padding: 10px 14px; }
.form-fine { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.success-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--blue-100); display: grid; place-items: center; }
.success-icon svg { width: 34px; height: 34px; stroke-width: 2.2; }
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #b5c9d8; padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr .9fr; gap: 48px; padding-bottom: 56px; }
.footer-brand p { margin-top: 18px; max-width: 300px; font-size: 15px; }
.site-footer h4 { color: #fff; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { display: grid; gap: 10px; font-size: 15px; }
.site-footer a { color: #b5c9d8; }
.site-footer a:hover { color: var(--sky); }
.footer-contact a { overflow-wrap: anywhere; }
.ph { color: #7d95a8; font-style: italic; }
.ph::before { content: "◌ "; }
.small { font-size: 13px; margin-top: 12px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); transition: background .2s, color .2s; }
.socials a:hover { background: var(--blue); color: #fff; }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; padding-bottom: 28px; font-size: 14px; }
.footer-bottom p { margin: 0; }

.mobile-call { display: none; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    background: #fff; padding: 20px 24px 28px; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(7, 43, 66, .3);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .25s, visibility .25s;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul li + li { border-top: 1px solid var(--line); }
  .main-nav ul a { display: block; padding: 14px 4px; font-size: 17px; }
  .main-nav ul a::after { display: none; }
  .nav-cta { width: 100%; padding: 14px; font-size: 16px; }
  .header-actions { margin-left: auto; }
  .why-inner { grid-template-columns: 1fr; gap: 40px; }
  .why-intro { position: static; text-align: center; max-width: 640px; margin: 0 auto; }
  .why-intro .eyebrow { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  :root { --header-h: 76px; }
  .site-logo { height: 62px; }

  .hero { padding: 48px 0 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .area-inner { grid-template-columns: 1fr; gap: 48px; }
  .area-map { max-width: 520px; margin: 0 auto; width: 100%; }
  .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .section { padding: 80px 0; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .footer-bottom { padding-bottom: 96px; }
  .hero .eyebrow { letter-spacing: .12em; font-size: 11.5px; text-wrap: balance; }
  .hero .eyebrow::before { display: none; }
  .container { padding: 0 20px; }
  .hero { padding: 36px 0 64px; }
  .hero h1 { font-size: 2.45rem; }
  .lead { font-size: 1.05rem; margin-bottom: 28px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .section { padding: 68px 0; }
  .section-head { margin-bottom: 40px; }
  .services-grid, .why-list { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 28px 24px 24px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; }
  .mobile-call {
    position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 90;
    display: flex; opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: opacity .3s, transform .3s var(--ease), visibility .3s; align-items: center; justify-content: center; gap: 10px;
    background: var(--blue); color: #fff; font-weight: 600; padding: 15px; border-radius: 999px;
    box-shadow: 0 14px 30px -10px rgba(7, 43, 66, .55);
  }
  .mobile-call.is-visible { opacity: 1; visibility: visible; transform: none; }
  .mobile-call:hover { color: #fff; background: var(--blue-600); }
}

@media (max-width: 380px) {
  .site-logo { height: 54px; }
  .lang-btn { padding: 7px 9px; }
}

/* =========================================================
   v2 components: gallery, reviews badge, booking widget, lightbox
   ========================================================= */
.muted-line { display: block; font-style: normal; font-weight: 500 !important; color: var(--muted) !important; font-size: .92rem !important; }
.site-footer .muted { color: #7d95a8; font-size: 13.5px; }
.footer-links { margin-top: 16px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
html.lb-open { overflow: hidden; }

/* ---------- Gallery ---------- */
.ba-grid { display: grid; gap: 28px; margin-bottom: 28px; }
.ba-card { margin: 0; }
.ba-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ba-card.has-composite .ba-row { grid-template-columns: 1.93fr .8fr; }
.ba {
  --pos: 50%;
  position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1080 / 560;
  background: var(--blue-100); box-shadow: var(--shadow); cursor: ew-resize; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer img, .ba-layer .ph-media { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(7, 43, 66, .08), 0 0 18px rgba(7, 43, 66, .25); outline: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 22px -6px rgba(7, 43, 66, .45); transition: transform .2s var(--ease);
}
.ba-knob svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba.is-dragging .ba-knob, .ba-handle:focus-visible .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
.ba-handle:focus-visible .ba-knob { box-shadow: 0 0 0 4px var(--blue-300), 0 8px 22px -6px rgba(7, 43, 66, .45); }
.ba-tag {
  position: absolute; top: 16px; z-index: 2; pointer-events: none;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .92); color: var(--navy); box-shadow: var(--shadow-sm);
}
.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; background: var(--blue); color: #fff; }
.ba-composite, .photo-tile {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  border-radius: var(--radius); background: var(--blue-100); box-shadow: var(--shadow);
}
.ba-composite img, .photo-tile img, .photo-tile .ph-media, .ba-composite .ph-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease);
}
.ba-composite:hover img, .photo-tile:hover img { transform: scale(1.04); }
.photo-zoom {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); display: grid; place-items: center; opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s var(--ease); box-shadow: var(--shadow-sm);
}
.photo-zoom svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.ba-composite:hover .photo-zoom, .photo-tile:hover .photo-zoom, .ba-composite:focus-visible .photo-zoom, .photo-tile:focus-visible .photo-zoom { opacity: 1; transform: none; }
.ba-card figcaption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: var(--navy); font-weight: 600; font-size: .98rem; }
.ba-hint {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--blue-200); color: var(--blue); font-size: 12.5px; font-weight: 600;
}
.ba-hint::before { content: "↔"; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.photo-tile { aspect-ratio: 1 / 1; }
.photo-tile.is-wide { grid-column: span 2; aspect-ratio: auto; }
.gallery-more { text-align: center; margin: 32px 0 0; }
.gallery-more a { font-weight: 600; border-bottom: 1.5px solid var(--blue-200); padding-bottom: 2px; }
.gallery-more a:hover { border-color: var(--blue); }

/* placeholder slots (only shown when a config path is empty or an image fails to load) */
.ph-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--blue-50) 0 14px, #fff 14px 28px); border: 2px dashed var(--blue-300);
  border-radius: inherit; font-size: 14px; font-weight: 600; text-align: center;
}
.ph-before { background: repeating-linear-gradient(135deg, #eef1f3 0 14px, #f7f8f9 14px 28px); }
.ph-icon { width: 34px; height: 34px; fill: none; stroke: var(--blue-500); stroke-width: 1.5; }
.ph-badge { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); background: #fff; border: 1px dashed var(--blue-300); padding: 2px 10px; border-radius: 999px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 64px 72px; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(5, 25, 40, .88); backdrop-filter: blur(4px); }
.lb-figure { position: relative; margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lb-media img { max-width: min(1200px, calc(100vw - 144px)); max-height: calc(100vh - 160px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lb-media .ph-media { width: min(720px, 80vw); aspect-ratio: 4 / 3; }
.lb-figure figcaption { color: #e3eef6; margin-top: 14px; font-size: 15px; text-align: center; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; transition: background .2s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .25); }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Reviews badge ---------- */
.rating-badge {
  display: flex; align-items: center; gap: 18px; width: fit-content; margin: 0 auto;
  padding: 22px 34px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--navy); transition: transform .25s var(--ease), box-shadow .25s;
}
.rating-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--navy); }
.rating-g svg { width: 44px; height: 44px; }
.rating-score { font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--navy); }
.rating-meta { display: flex; flex-direction: column; gap: 6px; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 22px; height: 22px; fill: var(--azure); }
.rating-count { font-size: 15px; color: var(--muted); font-weight: 500; }
.reviews-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ico-star { fill: var(--azure); }

/* ---------- Booking ---------- */
.book-inner { display: grid; grid-template-columns: .78fr 1.22fr; gap: 56px; align-items: start; }
.book-aside { position: sticky; top: calc(var(--header-h) + 32px); }
.booking-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 36px 40px 32px; box-shadow: var(--shadow-lg); }
.steps { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: none; }
.steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.step-num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid var(--blue-200); background: #fff; color: var(--muted); font-size: 14px; transition: all .3s var(--ease);
}
.steps li.is-current { color: var(--navy); }
.steps li.is-current .step-num { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--blue-100); }
.steps li.is-done .step-num { background: var(--blue-100); border-color: var(--blue-100); color: var(--blue); font-size: 0; }
.steps li.is-done .step-num::after { content: "✓"; font-size: 15px; }
.progress { height: 4px; border-radius: 4px; background: var(--blue-100); overflow: hidden; margin-bottom: 28px; }
.progress span { display: block; height: 100%; width: 33.33%; background: linear-gradient(90deg, var(--blue), var(--blue-500)); border-radius: inherit; transition: width .4s var(--ease); }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 20px; }
.step-title { padding: 0; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--navy); }
.field .label, .field label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.opt { font-weight: 400; color: var(--muted); }
.hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.choice-grid { display: grid; gap: 10px; border-radius: 14px; }
.choice-4 { grid-template-columns: repeat(4, 1fr); }
.choice-2 { grid-template-columns: 1fr 1fr; }
.choice { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%;
  padding: 14px 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--blue-50);
  font-size: 14px; font-weight: 600; color: var(--navy); text-align: center; line-height: 1.25;
  transition: border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.choice-box svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.choice-row { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 16px; text-align: left; }
.choice-row strong { display: block; font-size: 15px; }
.choice-row small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
.choice:hover .choice-box { border-color: var(--blue-300); background: #fff; }
.choice input:checked + .choice-box { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-100); }
.choice input:focus-visible + .choice-box { outline: 3px solid var(--blue-300); outline-offset: 2px; }
.has-error.choice-grid .choice-box, .has-error.slot-grid .choice-box { border-color: #e3a5a3; background: #fff7f7; }
.date-time { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.slot-grid { display: grid; gap: 10px; }
.slot { flex-direction: row; padding: 13px 10px; }

/* calendar */
.calendar { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; }
.calendar.has-error { border-color: #e3a5a3; background: #fffafa; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: 600; color: var(--navy); font-size: 15px; }
.cal-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--blue); }
.cal-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cal-nav:hover:not(:disabled) { background: var(--blue-50); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; }
.cal-wd.is-weekend { opacity: .5; }
.cal-day {
  aspect-ratio: 1 / 1; border: 0; border-radius: 10px; background: var(--blue-50); color: var(--navy);
  font: 600 14px/1 var(--font-body); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.cal-day:hover:not(:disabled) { background: var(--blue-200); }
.cal-day:disabled { background: transparent; color: #c2ccd5; cursor: default; font-weight: 400; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--blue-200); }
.cal-day.is-selected { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(15, 113, 170, .7); }
.cal-selected { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--blue); min-height: 1.2em; }

.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.step-nav #btn-next, .step-nav #btn-submit { margin-left: auto; min-width: 180px; }
#booking-form .form-error { margin-top: 18px; }
#booking-form .form-fine { margin-top: 16px; }
.booking-done { text-align: center; padding: 8px 4px; outline: none; }
.booking-done h3 { font-family: var(--font-display); font-size: 1.9rem; }
.booking-done > p { color: var(--muted); max-width: 460px; margin: 0 auto 22px; }
.summary { text-align: left; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sum-title { padding: 12px 18px; background: var(--blue-50); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.sum-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14.5px; }
.sum-row dt { color: var(--muted); }
.sum-row dd { margin: 0; color: var(--navy); font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.done-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0; max-width: none !important; }

/* ---------- v2 responsive ---------- */
@media (max-width: 1080px) {
  .book-inner { grid-template-columns: 1fr; gap: 40px; }
  .book-aside { position: static; }
  .book-aside .contact-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .ba-card.has-composite .ba-row { grid-template-columns: 1fr; }
  .ba-composite { aspect-ratio: 4 / 5; max-width: 420px; width: 100%; margin: 0 auto; }
  .date-time { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .photo-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .photo-tile.is-wide { aspect-ratio: 16 / 10; }
  .ba-tag { top: 10px; padding: 4px 10px; font-size: 11px; }
  .ba-tag-before { left: 10px; } .ba-tag-after { right: 10px; }
  .ba-knob { width: 44px; height: 44px; }
  .booking-card { padding: 24px 18px 22px; border-radius: 20px; }
  .steps .step-label { display: none; }
  .steps li.is-current .step-label { display: inline; }
  .choice-4 { grid-template-columns: 1fr 1fr; }
  .choice-2 { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: 1fr 1fr; }
  .step-nav .btn { flex: 1; min-width: 0 !important; }
  .book-aside .contact-list { grid-template-columns: 1fr; }
  .sum-row { grid-template-columns: 1fr; gap: 2px; }
  .rating-badge { padding: 18px 22px; gap: 14px; }
  .rating-score { font-size: 2.6rem; }
  .rating-g svg { width: 36px; height: 36px; }
  .stars svg { width: 18px; height: 18px; }
  .reviews-cta .btn { flex: 1 1 100%; }
  .lightbox { padding: 56px 10px; }
  .lb-media img { max-width: calc(100vw - 20px); max-height: calc(100vh - 150px); }
  .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; }
  .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); }
}

/* stronger selected states */
.choice-box { position: relative; }
.choice input:checked + .choice-box::after {
  content: "✓"; position: absolute; top: 7px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
}
.choice input:checked + .choice-box.slot { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 8px 18px -8px rgba(15, 113, 170, .7); }
.choice input:checked + .choice-box.slot::after { display: none; }

/* progressive enhancement: without JS the booking form is one long native form */
html:not(.js) .js-only, html:not(.js) .calendar, html:not(.js) .booking-head { display: none !important; }
html:not(.js) .step + .step { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
html.js .date-native { display: none; }

/* =========================================================
   v3 THEME — vibrant blue-only accents, sparkles, hero photo composition
   (overrides earlier rules)
   ========================================================= */
a { color: var(--azure-text); }
a:hover { color: var(--navy); }
::selection { background: var(--blue-200); color: var(--navy); }

/* Buttons: blue → lighter blue gradient with soft glow */
.btn-primary {
  background: var(--grad-cta); background-size: 140% 100%; background-position: 0 0;
  color: #fff; border: 0; box-shadow: var(--glow); text-shadow: 0 1px 1px rgba(10, 37, 64, .25);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-position .4s var(--ease);
}
.btn-primary:hover { background: var(--grad-cta); background-size: 140% 100%; background-position: 100% 0; color: #fff; transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(30, 144, 255, .75), 0 6px 14px -6px rgba(15, 113, 170, .5); }
.btn-ghost { border-color: var(--blue-200); color: var(--navy); background: rgba(255, 255, 255, .9); }
.btn-ghost:hover { border-color: var(--azure); color: var(--azure-text); box-shadow: 0 10px 24px -14px rgba(30, 144, 255, .7); }

/* Eyebrows become small sparkle badges */
.eyebrow {
  padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-200);
  color: var(--azure-text); box-shadow: 0 6px 16px -12px rgba(30, 144, 255, .8); gap: 8px;
}
.eyebrow::before { content: ""; width: 12px; height: 12px; background: var(--sparkle) center / contain no-repeat; }
.section-soft .eyebrow, .hero .eyebrow { background: rgba(255, 255, 255, .85); }
h1, h2 { color: var(--navy); }

/* Header */
.main-nav ul a::after { background: var(--grad-chip); height: 2px; }
.main-nav ul a:hover { color: var(--azure-text); }
.lang-toggle { background: var(--ice); }
.lang-btn.is-active { color: var(--blue); }

/* Hero */
.hero { background:
    radial-gradient(900px 500px at 85% 10%, rgba(30, 144, 255, .14), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(168, 224, 250, .35), transparent 60%),
    linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
  padding: 72px 0 112px; }
.hero .blob { display: none; }
.hero h1 em { color: var(--azure-text); background: linear-gradient(120deg, #0f71aa, #1877d6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-note a { color: var(--blue); }

.hero-photos { position: relative; min-height: 540px; isolation: isolate; }
.hv-blob { position: absolute; border-radius: 50%; filter: blur(8px); z-index: -1; }
.hv-blob-1 { width: 380px; height: 380px; right: -40px; top: -30px; background: radial-gradient(circle at 30% 30%, #a8e0fa 0%, #cde6fb 45%, rgba(205, 230, 251, 0) 70%); }
.hv-blob-2 { width: 300px; height: 300px; left: -30px; bottom: -20px; background: radial-gradient(circle at 60% 40%, rgba(30, 144, 255, .35) 0%, rgba(30, 144, 255, .12) 45%, rgba(30, 144, 255, 0) 70%); }
.hv-ring { position: absolute; z-index: -1; width: 230px; height: 230px; right: 6%; bottom: 2%; border-radius: 50%; border: 1.5px dashed var(--blue-300); }
.hv-sparkle { position: absolute; z-index: 2; fill: var(--azure); filter: drop-shadow(0 4px 10px rgba(30, 144, 255, .45)); animation: twinkle 4.5s ease-in-out infinite; }
.hv-sparkle.s1 { width: 30px; height: 30px; top: 2%; left: 30%; }
.hv-sparkle.s2 { width: 18px; height: 18px; top: 12%; left: 24%; fill: var(--sky); animation-delay: -1.5s; }
.hv-sparkle.s3 { width: 22px; height: 22px; bottom: 6%; right: 2%; animation-delay: -3s; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.75) rotate(20deg); opacity: .7; } }

.hv-main, .hv-small { position: absolute; margin: 0; overflow: hidden; background: var(--ice); }
.hv-main { top: 40px; right: 0; width: 88%; aspect-ratio: 4 / 3.2; border-radius: 32px; box-shadow: var(--shadow-lg); }
.hv-small { left: 0; bottom: 0; width: 40%; aspect-ratio: 4 / 5; border-radius: 24px; border: 6px solid #fff; box-shadow: 0 28px 50px -20px rgba(10, 37, 64, .45); }
.hv-main img, .hv-small img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  background: linear-gradient(200deg, rgba(10, 37, 64, 0) 55%, rgba(10, 37, 64, .25) 100%); pointer-events: none; }

.hv-badges { display: contents; }
.glass-badge {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 16px 34px -16px rgba(10, 37, 64, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
  animation: floaty 7s ease-in-out infinite;
}
a.glass-badge:hover { color: var(--navy); transform: translateY(-2px); }
.glass-badge strong { font-size: 15px; }
.gb-stars svg { width: 18px; height: 18px; fill: var(--azure); filter: drop-shadow(0 2px 4px rgba(30, 144, 255, .4)); }
.gb-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-chip); box-shadow: 0 4px 10px -4px rgba(30, 144, 255, .8); }
.gb-ico svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gb-rating { top: 8px; left: 4%; }
.gb-free { top: 44%; right: -18px; animation-delay: -2.3s; }
.gb-hours { bottom: 26px; left: 44%; animation-delay: -4.6s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .glass-badge, .hv-sparkle { animation: none; } }

/* Service cards: colorful blue icon chips */
.service-card { border-color: var(--line); }
.service-card:hover { border-color: var(--blue-200); box-shadow: 0 22px 44px -22px rgba(30, 144, 255, .45); }
.icon-wrap { border: 0; background: var(--grad-chip); box-shadow: 0 10px 22px -10px rgba(30, 144, 255, .75); }
.icon-wrap svg { stroke: #fff; }
.service-card:nth-child(2) .icon-wrap { background: linear-gradient(135deg, #0a2540, #0f71aa); box-shadow: 0 10px 22px -10px rgba(10, 37, 64, .6); }
.service-card:nth-child(3) .icon-wrap { background: linear-gradient(135deg, #1877d6, #6fb8ff); }
.service-card:nth-child(4) .icon-wrap { background: linear-gradient(135deg, #0b5d8d, #1e90ff); }
.service-card:nth-child(5) .icon-wrap { background: linear-gradient(135deg, #a8e0fa, #e3f1ff); box-shadow: 0 10px 22px -10px rgba(30, 144, 255, .5); }
.service-card:nth-child(5) .icon-wrap svg { stroke: var(--blue); }
.service-card:nth-child(6) .icon-wrap { background: linear-gradient(135deg, #0d3561, #1877d6); }
.why-icon, .ci { background: linear-gradient(135deg, var(--ice), #d6ebff); box-shadow: inset 0 0 0 1px rgba(30, 144, 255, .12); }
.why-icon svg, .ci svg { stroke: var(--azure-text); }

/* Soft blue gradient section bands */
#gallery { background:
  radial-gradient(800px 380px at 100% 0%, rgba(30, 144, 255, .10), transparent 65%),
  radial-gradient(700px 360px at 0% 100%, rgba(168, 224, 250, .30), transparent 65%),
  linear-gradient(180deg, #eaf6ff 0%, #f6fbff 100%); }
#area { background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 100%); }
#book { background:
  radial-gradient(900px 420px at 10% 0%, rgba(168, 224, 250, .45), transparent 60%),
  radial-gradient(700px 400px at 100% 100%, rgba(30, 144, 255, .12), transparent 60%),
  linear-gradient(180deg, #f4faff 0%, #eaf6ff 100%); }
.why-list li:hover { border-color: var(--blue-200); }
.city-list li:first-child { background: var(--grad-cta); border-color: transparent; box-shadow: var(--glow); }
.city-list li { background: #fff; }
.section-head h2 { position: relative; }

/* Gallery accents */
.ba-tag-after { background: var(--grad-cta); }
.ba-knob svg { stroke: var(--azure-text); }
.ba-hint { color: var(--azure-text); }

/* Reviews badge (blue stars, monochrome G) */
.rating-badge { border-color: var(--blue-200); box-shadow: 0 22px 48px -24px rgba(30, 144, 255, .55); }
.rating-g { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-chip); color: #fff; box-shadow: var(--glow); }
.rating-g svg { width: 26px !important; height: 26px !important; }
.stars svg, .ico-star { fill: var(--azure); }

/* Booking card with gradient header band */
.booking-card { padding-top: 0; overflow: hidden; border-color: var(--blue-200); }
.booking-head {
  position: relative; margin: 0 -40px 30px; padding: 22px 40px 20px; background: var(--grad-deep); color: #fff; overflow: hidden;
}
.booking-head::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 224, 250, .45), rgba(168, 224, 250, 0) 70%); }
.bh-sparkle { position: absolute; right: 26px; top: 18px; width: 20px; height: 20px; fill: var(--sky); opacity: .9; }
.bh-title { position: relative; margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.booking-head .steps { position: relative; margin-bottom: 14px; }
.booking-head .steps li { color: #fff; }
.booking-head .step-num { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.booking-head .steps li.is-current .step-num { background: #fff; border-color: #fff; color: var(--blue); box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); }
.booking-head .steps li.is-done .step-num { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; }
.booking-head .progress { position: relative; background: rgba(255, 255, 255, .22); margin-bottom: 0; }
.booking-head .progress span { background: linear-gradient(90deg, #a8e0fa, #ffffff); }
.choice input:checked + .choice-box { border-color: var(--azure-deep); box-shadow: 0 0 0 4px var(--blue-100), 0 10px 20px -14px rgba(30, 144, 255, .8); }
.choice input:checked + .choice-box::after { background: var(--grad-chip); }
.choice input:checked + .choice-box.slot { background: var(--grad-cta); border-color: transparent; box-shadow: var(--glow); }
.cal-day.is-selected { background: var(--grad-cta); box-shadow: var(--glow); }
.sum-title { background: linear-gradient(90deg, var(--ice), #fff); color: var(--azure-text); }
.success-icon { background: var(--grad-chip); box-shadow: var(--glow); }
.success-icon svg { stroke: #fff !important; }

/* Footer: deep navy gradient */
.site-footer { background: linear-gradient(160deg, #061a33 0%, #0a2540 55%, #0d3561 100%); position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 144, 255, .22), rgba(30, 144, 255, 0) 70%); pointer-events: none; }
.site-footer .container { position: relative; }
.site-footer a:hover { color: var(--sky); }
.socials a:hover { background: var(--grad-chip); }

.mobile-call { background: var(--grad-cta) !important; box-shadow: var(--glow) !important; }
.placeholder-note { border-color: var(--blue-300); }

/* Hero photos: responsive */
@media (max-width: 1080px) {
  .gb-free { right: -6px; }
}
@media (max-width: 920px) {
  .hero-photos { min-height: 0; max-width: 560px; margin: 8px auto 0; width: 100%; padding-bottom: 70px; }
  .hv-main { position: relative; top: 0; width: 100%; }
  .hv-small { width: 34%; bottom: 0; left: -4px; }
  .gb-free { top: auto; right: 8px; bottom: 120px; }
  .gb-hours { left: auto; right: 8px; bottom: 72px; }
  .gb-rating { top: 14px; left: 14px; }
  .booking-head { margin: 0 -40px 26px; }
}
@media (max-width: 640px) {
  .hero-photos { padding-bottom: 0; }
  .hv-main { aspect-ratio: 4 / 3; border-radius: 24px; }
  .hero-photos { padding-top: 22px; }
  .hv-small { width: 32%; left: auto; right: -4px; bottom: auto; top: 0; border-width: 4px; border-radius: 18px; }
  .hv-ring, .hv-sparkle.s3 { display: none; }
  .hv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .glass-badge { position: static; animation: none; font-size: 13px; padding: 8px 13px; background: #fff; border-color: var(--blue-200); box-shadow: 0 8px 20px -14px rgba(10, 37, 64, .5); }
  .gb-ico { width: 22px; height: 22px; }
  .booking-head { margin: 0 -18px 22px; padding: 18px 18px 16px; }
  .bh-title { font-size: 11.5px; }
}

/* =========================================================
   v4 MOTION THEME — more blue surface + tasteful movement
   Only transform/opacity are animated; everything is switched
   off under prefers-reduced-motion (see end of file).
   ========================================================= */
:root {
  --sparkle-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E");
  --sparkle-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a8e0fa' d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0z'/%3E%3C/svg%3E");
  /* white text passes AA on every stop of these (darkest → #1570cc 4.97:1) */
  --grad-hero: linear-gradient(120deg, #061a33 0%, #0a2540 28%, #0b3f6e 52%, #0f71aa 78%, #1877d6 100%);
  --grad-card: linear-gradient(150deg, #0b3f6e 0%, #0f71aa 55%, #1570cc 100%);
  --grad-band-deep: linear-gradient(110deg, #061a33 0%, #0a2540 32%, #0b4a7f 68%, #0f71aa 100%);
}

/* ---------- Header: glassy at top, solid + shadow + gradient hairline on scroll ---------- */
.site-header { background: rgba(255, 255, 255, .96); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #0f71aa, #1e90ff 50%, #a8e0fa); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.site-header.is-scrolled { background: #fff; box-shadow: 0 12px 30px -18px rgba(10, 37, 64, .45); border-bottom-color: transparent; }
.site-header.is-scrolled::after { transform: scaleX(1); }
.main-nav ul a::after { transform-origin: center; height: 2.5px; bottom: -2px; }
.main-nav ul a.is-active { color: var(--blue); }
.main-nav ul a.is-active::after { transform: scaleX(1); }

/* ---------- Buttons: lift + shine sweep ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-18deg); transition: transform .8s var(--ease);
}
.btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.btn-ghost::after, .btn-light::after { background: linear-gradient(105deg, rgba(30, 144, 255, 0), rgba(30, 144, 255, .16) 50%, rgba(30, 144, 255, 0)); }
.btn-light { background: #fff; color: var(--navy); border: 0; box-shadow: 0 14px 34px -12px rgba(168, 224, 250, .75), 0 4px 12px -6px rgba(0, 0, 0, .3); }
.btn-light:hover { color: var(--blue); transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(168, 224, 250, .9), 0 6px 16px -8px rgba(0, 0, 0, .35); }
.btn-outline-light { color: #fff; background: rgba(6, 26, 51, .22); border: 1.5px solid rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-outline-light:hover { color: #fff; border-color: #fff; background: rgba(6, 26, 51, .32); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5); }
.btn-outline-light svg { fill: currentColor; }

/* ---------- Hero: rich blue gradient, aurora, particles ---------- */
.hero { --rise: -780px; background: var(--grad-hero); color: #fff; padding: 84px 0 124px; }
.hero h1 { color: #fff; }
.hero h1 em { color: #a8e0fa; background: linear-gradient(120deg, #a8e0fa 0%, #ffffff 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .lead { color: #e3f0fc; }
.hero .eyebrow { background: rgba(255, 255, 255, .08); border-color: rgba(168, 224, 250, .4); color: #d8eeff; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .eyebrow::before { background-image: var(--sparkle-sky); }
.hero-note { color: #cfe3f5; }
.hero-note a { color: #a8e0fa; }
.hero-note a:hover { color: #fff; }

.hero .blob { display: block; position: absolute; border-radius: 50%; filter: none; opacity: 1; will-change: transform; }
.hero .blob-1 { width: 780px; height: 780px; top: -340px; right: -220px; background: radial-gradient(circle, rgba(30, 144, 255, .55) 0%, rgba(30, 144, 255, .18) 40%, rgba(30, 144, 255, 0) 68%); animation: aurora-a 22s ease-in-out infinite alternate; }
.hero .blob-2 { width: 640px; height: 640px; bottom: -320px; left: -200px; background: radial-gradient(circle, rgba(168, 224, 250, .22) 0%, rgba(168, 224, 250, 0) 65%); animation: aurora-b 26s ease-in-out infinite alternate; }
.hero .blob-3 { width: 540px; height: 540px; top: 28%; left: 40%; background: radial-gradient(circle, rgba(21, 112, 204, .38) 0%, rgba(21, 112, 204, 0) 66%); animation: aurora-c 30s ease-in-out infinite alternate; }
.hero-sheen { position: absolute; top: -50%; bottom: -50%; left: -30%; width: 60%; background: linear-gradient(105deg, rgba(168, 224, 250, 0) 35%, rgba(168, 224, 250, .09) 50%, rgba(168, 224, 250, 0) 65%); animation: sheen 14s ease-in-out infinite; will-change: transform; }
@keyframes aurora-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-160px, 110px, 0) scale(1.15); } }
@keyframes aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(180px, -90px, 0) scale(1.2); } }
@keyframes aurora-c { 0% { transform: translate3d(0, 0, 0) scale(.9); } 100% { transform: translate3d(-120px, -70px, 0) scale(1.1); } }
@keyframes sheen { 0%, 15% { transform: translateX(-60%); } 85%, 100% { transform: translateX(260%); } }

.particles { position: absolute; inset: 0; }
.pt {
  position: absolute; left: var(--x); bottom: -24px; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(168, 224, 250, .55) 40%, rgba(168, 224, 250, 0) 70%);
  animation: rise var(--dur) linear var(--delay) infinite; will-change: transform, opacity;
}
.pt-star { border-radius: 0; width: calc(var(--s) + 6px); height: calc(var(--s) + 6px); background: var(--sparkle-white) center / contain no-repeat; }
@keyframes rise {
  0% { transform: translate3d(0, 0, 0) scale(.5) rotate(0); opacity: 0; }
  12% { opacity: .9; }
  50% { transform: translate3d(var(--dx), calc(var(--rise) * .5), 0) scale(1) rotate(90deg); }
  85% { opacity: .65; }
  100% { transform: translate3d(calc(var(--dx) * -.5), var(--rise), 0) scale(.7) rotate(180deg); opacity: 0; }
}

/* hero photos on blue: glows, rotating ring, drift + parallax-lite (--py set by JS) */
.hv-blob-1 { background: radial-gradient(circle at 40% 40%, rgba(168, 224, 250, .45) 0%, rgba(168, 224, 250, .12) 45%, rgba(168, 224, 250, 0) 70%); }
.hv-blob-2 { background: radial-gradient(circle at 60% 40%, rgba(30, 144, 255, .55) 0%, rgba(30, 144, 255, .15) 45%, rgba(30, 144, 255, 0) 70%); }
.hv-ring { border: 1.5px dashed rgba(168, 224, 250, .55); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hv-sparkle.s1 { fill: #fff; filter: drop-shadow(0 0 12px rgba(168, 224, 250, .9)); }
.hv-sparkle.s2, .hv-sparkle.s3 { fill: var(--sky); filter: drop-shadow(0 0 10px rgba(168, 224, 250, .8)); }
.hv-main { box-shadow: 0 44px 90px -30px rgba(0, 8, 24, .7), 0 0 0 1px rgba(255, 255, 255, .18); translate: 0 calc(var(--py, 0) * -.05px); animation: drift 10s ease-in-out infinite; }
.hv-small { border-color: rgba(255, 255, 255, .95); box-shadow: 0 30px 60px -20px rgba(0, 8, 24, .65); translate: 0 calc(var(--py, 0) * .06px); animation: drift 8s ease-in-out -3s infinite reverse; }
.glass-badge { translate: 0 calc(var(--py, 0) * -.09px); box-shadow: 0 18px 40px -16px rgba(0, 8, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .86); }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Marquee strip ---------- */
.marquee {
  position: relative; overflow: hidden; padding: 20px 0; background: linear-gradient(90deg, #e3f1ff, #f4faff 50%, #e3f1ff);
  border-bottom: 1px solid var(--blue-200);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; will-change: transform; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group li { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; font-weight: 500; color: var(--navy); }
.marquee-group li::after { content: ""; width: 16px; height: 16px; background: var(--sparkle) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(30, 144, 255, .5)); }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Service cards: gradient fill + white icon on hover, lift + shine ---------- */
#services { background: radial-gradient(900px 420px at 50% 0%, rgba(168, 224, 250, .22), transparent 70%), #fff; }
.service-card { overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px -22px rgba(15, 113, 170, .45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.service-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-card); opacity: 0; transition: opacity .45s var(--ease); }
.service-card::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-150%) skewX(-16deg); transition: transform 1s var(--ease); }
.service-card > * { position: relative; z-index: 1; }
.service-card h3, .service-card p { transition: color .35s var(--ease); }
.icon-wrap { transition: transform .45s var(--ease), background .3s, box-shadow .3s; }
.icon-wrap svg { transition: stroke .3s; }
.service-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 34px 60px -26px rgba(15, 113, 170, .7); }
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { transform: translateX(420%) skewX(-16deg); }
.service-card:hover h3, .service-card:hover p { color: #fff; }
.service-card:hover .icon-wrap { background: #fff !important; transform: rotate(-6deg) scale(1.06); box-shadow: 0 12px 26px -12px rgba(0, 8, 24, .55) !important; }
.service-card:hover .icon-wrap svg { stroke: var(--blue) !important; }

/* ---------- Stats band (real facts only) ---------- */
.stats-band { position: relative; overflow: hidden; padding: 66px 0; color: #fff;
  background: radial-gradient(640px 320px at 88% 0%, rgba(30, 144, 255, .38), transparent 62%), radial-gradient(520px 260px at 6% 100%, rgba(168, 224, 250, .14), transparent 60%), var(--grad-band-deep); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.stat { position: relative; text-align: center; }
.stat + .stat::before { content: ""; position: absolute; left: -12px; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)); }
.stat a { display: block; color: inherit; border-radius: 16px; }
.stat a:hover { color: inherit; }
.stat-num { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 4.2vw, 3.3rem); line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; transition: transform .35s var(--ease); }
.stat-num [data-count] { display: inline-block; }
.stat a:hover .stat-num { transform: translateY(-4px); }
.stat-star { width: .55em; height: .55em; fill: #a8e0fa; filter: drop-shadow(0 0 10px rgba(168, 224, 250, .8)); animation: twinkle 4s ease-in-out infinite; }
.stat-label { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 500; letter-spacing: .02em; color: #fff; }
.band-sparkle { position: absolute; fill: #a8e0fa; opacity: .85; filter: drop-shadow(0 0 10px rgba(168, 224, 250, .7)); animation: twinkle 5s ease-in-out infinite; pointer-events: none; }
.bs1 { width: 22px; height: 22px; left: 4%; top: 22%; }
.bs2 { width: 14px; height: 14px; right: 5%; bottom: 20%; animation-delay: -2s; }
.bs3 { width: 24px; height: 24px; right: 8%; top: 18%; animation-delay: -1s; }
.bs4 { width: 14px; height: 14px; left: 46%; bottom: 14%; animation-delay: -3s; }

/* ---------- Gallery / area / reviews / book bands ---------- */
#gallery { background: radial-gradient(800px 380px at 100% 0%, rgba(30, 144, 255, .14), transparent 65%), radial-gradient(700px 360px at 0% 100%, rgba(168, 224, 250, .4), transparent 65%), linear-gradient(180deg, #e3f1ff 0%, #f4faff 100%); }
#area { background: radial-gradient(700px 380px at 0% 50%, rgba(168, 224, 250, .35), transparent 65%), linear-gradient(180deg, #eaf6ff 0%, #f4faff 100%); }
#reviews { background: radial-gradient(700px 300px at 50% 40%, rgba(168, 224, 250, .25), transparent 70%), #fff; }
.rating-badge { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.rating-badge:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -26px rgba(30, 144, 255, .7); }
.rating-score { display: inline-block; font-variant-numeric: lining-nums tabular-nums; }
.city-list li { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.city-list li:hover { transform: translateY(-2px); border-color: var(--azure); box-shadow: 0 10px 20px -14px rgba(30, 144, 255, .8); }
.pin-pulse { transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.8s ease-out infinite; }
.pin-pulse.pp2 { animation-delay: -1.4s; }
@keyframes pin-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- Why: card hover, portrait-ready intro ---------- */
.why-list li { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.why-list li:hover { transform: translateY(-4px); border-color: var(--blue-300); box-shadow: 0 22px 44px -24px rgba(30, 144, 255, .55); }
.why-icon { transition: transform .35s var(--ease); }
.why-list li:hover .why-icon { background: var(--grad-chip); transform: scale(1.06); }
.why-list li:hover .why-icon svg { stroke: #fff; }
.why-portrait { position: relative; margin: 0 0 28px; max-width: 340px; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 34px 70px -28px rgba(15, 113, 170, .6); background: var(--ice); }
.why-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(30, 144, 255, 0) 60%, rgba(10, 37, 64, .25)); pointer-events: none; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; padding: 86px 0; color: #fff;
  background: linear-gradient(120deg, #061a33 0%, #0a2540 22%, #0d4f86 62%, #0f71aa 100%); }
.cta-glow { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.cg1 { width: 560px; height: 560px; left: -160px; top: -300px; background: radial-gradient(circle, rgba(30, 144, 255, .42), rgba(30, 144, 255, 0) 66%); animation: aurora-b 20s ease-in-out infinite alternate; }
.cg2 { width: 460px; height: 460px; right: -160px; bottom: -300px; background: radial-gradient(circle, rgba(168, 224, 250, .16), rgba(168, 224, 250, 0) 66%); animation: aurora-a 24s ease-in-out infinite alternate; }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-copy h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 10px; }
.cta-copy p { color: #fff; font-size: 1.08rem; margin: 0; max-width: 560px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; flex-shrink: 0; }

/* ---------- Reveal: smoother, staggered (--rd set per element by JS) ---------- */
.reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .8s var(--ease) var(--rd, 0ms), transform .8s var(--ease) var(--rd, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .why-portrait { margin: 0 auto 28px; }
  .cta-inner { flex-direction: column; text-align: center; gap: 28px; }
  .cta-copy p { margin: 0 auto; }
  .cta-actions { justify-content: center; }
}
@media (max-width: 920px) {
  .hero { --rise: -1200px; padding: 56px 0 88px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .stat:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  .hero { background: linear-gradient(165deg, #061a33 0%, #0a2540 30%, #0b3f6e 55%, #0f71aa 80%, #1877d6 100%); padding: 40px 0 72px; }
  .hero .blob-1 { width: 520px; height: 520px; top: -220px; right: -260px; }
  .hero .blob-3 { left: 10%; top: 55%; }
  .pt-desk { display: none; }
  .marquee { padding: 15px 0; }
  .marquee-group li { font-size: 1.12rem; gap: 28px; padding-right: 28px; }
  .stats-band { padding: 52px 0; }
  .stat-label { font-size: 13.5px; text-wrap: balance; }
  .bs2 { bottom: auto; top: 14px; right: 6%; }
  .cta-band { padding: 68px 0; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .service-card:hover { transform: translateY(-4px); }
}

/* ---------- Reduced motion: no animation, no parallax, static marquee ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .particles, .hero-sheen { display: none; }
  .hv-main, .hv-small, .glass-badge { translate: none !important; }
  .marquee-track { width: 100%; }
  .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: 6px; width: 100%; }
  .marquee-group + .marquee-group { display: none; }
}

/* ---------- v4: portrait hero composition (owner photos, 4:5) ---------- */
.hero-photos { min-height: 580px; }
.hv-main { top: 10px; right: 0; width: 74%; aspect-ratio: 4 / 5; }
.hv-small { left: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 5; }
.hv-blob-1 { right: -60px; top: -40px; }
.gb-rating { top: 34px; left: 0; }
.gb-free { top: 46%; right: -22px; }
.gb-hours { bottom: 18px; left: 46%; }
.hv-sparkle.s1 { top: 0; left: 14%; }
.hv-sparkle.s2 { top: 12%; left: 6%; }
@media (max-width: 1080px) { .gb-free { right: -6px; } }
@media (max-width: 920px) {
  .hero-photos { min-height: 0; max-width: 480px; }
  .hv-main { top: 0; width: 100%; aspect-ratio: 4 / 4.6; }
  .hv-small { width: 38%; left: -10px; bottom: 0; }
  .gb-rating { top: 16px; left: 16px; }
  .gb-free { top: auto; right: 12px; bottom: 132px; }
  .gb-hours { left: auto; right: 12px; bottom: 82px; }
}
@media (max-width: 640px) {
  .hero-photos { max-width: none; }
  .hv-main { aspect-ratio: 1 / 1; }
  .hv-small { width: 34%; left: auto; right: -4px; top: 0; bottom: auto; }
}

/* ---------- v4: "Our Work" bento showcase (featured + tall + 2) ---------- */
.photo-grid.is-bento { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 330px; grid-auto-flow: dense; gap: 22px; }
.photo-grid.is-bento .photo-tile { aspect-ratio: auto; height: 100%; border-radius: 26px; box-shadow: 0 26px 50px -30px rgba(10, 37, 64, .55); }
.photo-grid.is-bento .is-featured { grid-row: span 2; }
.photo-grid.is-bento .is-tall { grid-row: span 2; }
.photo-grid.is-bento .photo-tile img { transition: transform .9s var(--ease); }
.photo-grid.is-bento .photo-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0) 60%, rgba(10, 37, 64, .28) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.photo-grid.is-bento .photo-tile:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(15, 113, 170, .7); }
.photo-grid.is-bento .photo-tile { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
@media (max-width: 920px) {
  .photo-grid.is-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 250px; gap: 14px; }
  .photo-grid.is-bento .is-featured { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 640px) {
  .photo-grid.is-bento { grid-auto-rows: 190px; gap: 12px; }
  .photo-grid.is-bento .photo-tile { border-radius: 20px; }
}
.photo-grid.is-bento .photo-zoom { z-index: 1; }

/* =========================================================
   v5: Our Work showcase (before/after + filtered grid), owner portrait, trust badges
   ========================================================= */
/* pill tabs (pair switcher + gallery filter) */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-tab {
  position: relative; border: 1px solid var(--blue-200); background: #fff; color: var(--navy); cursor: pointer;
  font: 600 14px/1 var(--font-body); padding: 10px 18px; border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s, color .2s;
}
.pill-tab:hover { border-color: var(--azure); color: var(--azure-text); transform: translateY(-1px); }
.pill-tab.is-active { background: var(--grad-cta); color: #fff; border-color: transparent; box-shadow: var(--glow); text-shadow: 0 1px 1px rgba(10, 37, 64, .25); }

/* before/after showcase card */
.ba-wrap {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; margin: 0 0 56px;
  padding: 36px; border-radius: 30px; background: rgba(255, 255, 255, .78); border: 1px solid #fff;
  box-shadow: 0 34px 70px -40px rgba(15, 113, 170, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ba-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azure-text); }
.ba-kicker::before { content: ""; width: 12px; height: 12px; background: var(--sparkle) center / contain no-repeat; }
.ba-caption { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 12px; color: var(--navy); text-wrap: balance; }
.ba-text { color: var(--muted); margin: 0 0 22px; }
.ba-wrap .pill-tabs { margin-bottom: 20px; }
.ba-drag { margin: 0; font-size: 14px; font-weight: 600; color: var(--azure-text); }
.ba-stage { display: flex; justify-content: center; }
.ba-wrap .ba-grid { margin: 0; width: 100%; display: flex; justify-content: center; }
.ba-wrap .ba-card { width: 100%; display: flex; justify-content: center; }
.ba-wrap .ba-card[hidden] { display: none !important; }
.ba-wrap .ba-card figcaption { display: none; }
.ba-wrap .ba-row { width: 100%; justify-items: center; }
.ba-wrap .ba { aspect-ratio: var(--ar, 4 / 3); height: 540px; width: auto; max-width: 100%; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(10, 37, 64, .6); animation: tile-in .6s var(--ease) both; }
.ba-wrap .ba-tag { top: 14px; }

/* filter tabs above the grid */
.gallery-filter { justify-content: center; margin: 0 0 26px; }

/* photo grid: adaptive showcase (layout classes come from js/gallery.js) */
.photo-grid.is-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 20px; }
.photo-grid.is-bento .photo-tile { grid-row: auto; grid-column: auto; animation: tile-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.photo-grid.is-bento .d-feat { grid-column: span 2; grid-row: span 2; }
.photo-grid.is-bento .d-wide { grid-column: span 2; }
.photo-grid.is-bento .d-full { grid-column: 1 / -1; }
.photo-grid.is-bento.lay-4 { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 320px; }
.photo-grid.is-bento.lay-4 .d-feat { grid-column: auto; grid-row: span 2; }
.photo-grid.is-bento .d-tall { grid-row: span 2; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* owner portrait card */
.why-intro { position: static; }
.why-portrait { margin: 0 0 30px; max-width: 320px; border-radius: 28px; overflow: visible; border: 0; background: none; box-shadow: none; aspect-ratio: auto; position: relative; }
.why-portrait::after { display: none; }
.why-portrait::before { content: ""; position: absolute; inset: 18px -14px -14px 18px; border-radius: 30px; background: var(--grad-chip); opacity: .9; z-index: 0; }
.why-portrait img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; border: 6px solid #fff; box-shadow: 0 30px 60px -28px rgba(10, 37, 64, .6); }
.why-portrait figcaption {
  position: absolute; z-index: 2; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -16px rgba(10, 37, 64, .6); color: var(--navy); line-height: 1.2;
}
.why-portrait figcaption strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
.why-portrait figcaption span { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--azure-text); }

/* trust strip (BBB + COBID) */
.trust-strip {
  display: grid; grid-template-columns: .7fr 2fr; gap: 0; margin-top: 64px; border-radius: 28px; overflow: hidden;
  background: #fff; border: 1px solid var(--blue-200); box-shadow: 0 30px 60px -38px rgba(15, 113, 170, .6);
}
.trust-bbb { display: flex; align-items: center; gap: 16px; padding: 30px; color: #fff; background: var(--grad-band-deep); }
.trust-bbb .trust-kicker { color: #cfe9ff; }
.trust-bbb .trust-name { color: #fff; }
.trust-cobid { padding: 28px 32px; }
.trust-cobid-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.trust-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-chip); box-shadow: var(--glow); }
.trust-bbb .trust-icon { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.trust-icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azure-text); }
.trust-name { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.cert-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 14px; }
.cert-badge {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--blue-50);
  border: 1px solid var(--blue-200); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.cert-badge:hover { transform: translateY(-3px); border-color: var(--azure); box-shadow: 0 16px 30px -18px rgba(30, 144, 255, .8); }
.cert-mark {
  flex-shrink: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  font: 700 14px/1 var(--font-body); letter-spacing: .06em; color: #fff; background: var(--grad-cta);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(15, 113, 170, .8);
}
.cert-logo { flex-shrink: 0; width: 56px; height: 56px; object-fit: contain; }
.cert-name { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.trust-note { margin: 0; font-size: 13.5px; color: var(--muted); }

/* hero trust row (on blue) */
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-trust li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(168, 224, 250, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-trust svg, .footer-trust svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: #a8e0fa; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* footer trust */
.footer-trust { display: grid; gap: 8px; margin-top: 18px; }
.footer-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #dbe9f5; font-weight: 500; }

@media (max-width: 1080px) {
  .why-portrait { margin: 0 auto 30px; }
  .trust-strip { grid-template-columns: 1fr; }
  .ba-wrap { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .ba-wrap .pill-tabs { justify-content: center; }
  .ba-wrap .ba { height: auto; width: 100%; max-width: 560px; }
  .ba-wrap .ba[style*="4 / 5"] { max-width: 440px; }
}
@media (max-width: 920px) {
  .photo-grid.is-bento, .photo-grid.is-bento.lay-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; gap: 12px; }
  .photo-grid.is-bento .photo-tile { grid-column: auto; grid-row: auto; }
  .photo-grid.is-bento .m-feat { grid-column: span 2; grid-row: span 2; }
  .photo-grid.is-bento .m-tall { grid-row: span 2; }
  .photo-grid.is-bento .m-wide { grid-column: span 2; }
  .cert-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .photo-grid.is-bento, .photo-grid.is-bento.lay-4 { grid-auto-rows: 165px; }
  .ba-wrap { padding: 20px 16px; border-radius: 24px; margin-bottom: 40px; }
  .trust-bbb, .trust-cobid { padding: 22px 20px; }
  .hero-trust li { font-size: 12.5px; }
}
.footer-trust li { align-items: flex-start; line-height: 1.4; }
.footer-trust svg { margin-top: 1px; }
/* AA: keep white text on these small elements over the darker end of the blue range (>= 4.97:1) */
.pill-tab.is-active, .cert-mark { background: linear-gradient(135deg, #0b5d8d 0%, #0f71aa 50%, #1570cc 100%); }

/* =========================================================
   v6: FAQ (accordion — markup generated by tools/build_faq.py; behavior in js/main.js)
   Without JS every answer stays open. Collapsing animates grid rows (0fr ↔ 1fr);
   closed panels get visibility:hidden so screen readers / tab order skip them.
   ========================================================= */
.faq-section { position: relative; overflow: hidden; overflow: clip; background: linear-gradient(180deg, #fff 0%, var(--ice) 55%, var(--blue-50) 100%); }
.faq-glow { position: absolute; width: 620px; height: 620px; right: -220px; top: -160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(30, 144, 255, .16), rgba(30, 144, 255, 0) 66%); animation: aurora-a 22s ease-in-out infinite alternate; }
.faq-inner { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-intro h2 { margin-bottom: 14px; text-wrap: balance; }
.faq-intro .section-sub { margin-bottom: 30px; }

.faq-help { position: relative; overflow: hidden; padding: 28px; border-radius: 26px; color: #fff; background: var(--grad-card);
  box-shadow: 0 30px 60px -32px rgba(15, 113, 170, .8); }
.faq-help::after { content: ""; position: absolute; width: 90px; height: 90px; right: 18px; top: 16px; opacity: .22;
  background: var(--sparkle-white) center / contain no-repeat; animation: faq-twinkle 6s ease-in-out infinite; }
.faq-help-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; margin-bottom: 16px;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.faq-help-icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.faq-help-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: #fff; }
.faq-help-text { margin: 0 0 20px; color: #e3f1ff; font-size: 15px; }
.faq-help-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.faq-help-actions .btn { gap: 8px; }
@keyframes faq-twinkle { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .16; } 50% { transform: scale(1.05) rotate(20deg); opacity: .3; } }

.faq-list { display: grid; gap: 14px; counter-reset: faq; }
.faq-item {
  position: relative; border-radius: 22px; background: rgba(255, 255, 255, .92); border: 1px solid var(--blue-200);
  box-shadow: 0 14px 30px -26px rgba(10, 37, 64, .45);
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), background .3s;
}
.faq-item::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--grad-chip); transform: scaleY(0); transition: transform .4s var(--ease); }
.faq-item:hover { border-color: var(--blue-300); box-shadow: 0 20px 38px -26px rgba(30, 144, 255, .7); transform: translateY(-2px); }
.faq-item.is-open { background: #fff; border-color: var(--azure); box-shadow: 0 26px 50px -30px rgba(15, 113, 170, .75); }
.faq-item.is-open::before { transform: scaleY(1); }
.faq-q { margin: 0; font: inherit; }
.faq-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--navy); font: 600 1.06rem/1.35 var(--font-body); border-radius: 22px;
}
.faq-btn:hover .faq-q-text { color: var(--azure-text); }
.faq-btn:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 2px; }
.faq-num {
  flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  font: 700 13px/1 var(--font-body); letter-spacing: .04em; color: var(--azure-text); background: var(--blue-100);
  transition: background .3s var(--ease), color .3s, box-shadow .3s;
}
.faq-item.is-open .faq-num { color: #fff; background: linear-gradient(135deg, #0b5d8d 0%, #0f71aa 50%, #1570cc 100%); box-shadow: var(--glow); }
.faq-q-text { flex: 1; min-width: 0; transition: color .2s; }
.faq-icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--blue-200); background: #fff;
  transition: transform .45s var(--ease), background .3s, border-color .3s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--azure-text); transition: transform .45s var(--ease), background .3s; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon { transform: rotate(180deg); background: var(--grad-chip); border-color: transparent; }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: #fff; }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }

.faq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease), visibility 0s linear 0s; }
.faq-panel-inner { min-height: 0; overflow: hidden; }
.faq-panel p { margin: 0; padding: 0 24px 22px 76px; color: var(--muted); font-size: 1rem; line-height: 1.7;
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.faq-panel a { color: var(--azure-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue-300); text-underline-offset: 3px; }
.faq-panel a:hover { text-decoration-color: currentColor; }
.js .faq-item:not(.is-open) .faq-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease), visibility 0s linear .45s; }
.js .faq-item:not(.is-open) .faq-panel p { opacity: 0; transform: translateY(-6px); }

@media (max-width: 1080px) {
  .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro { position: static; text-align: center; max-width: 640px; margin: 0 auto; }
  .faq-help { text-align: left; }
}
@media (max-width: 640px) {
  .faq-btn { gap: 12px; padding: 16px 14px; font-size: 1rem; }
  .faq-num { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
  .faq-icon { width: 28px; height: 28px; }
  .faq-panel p { padding: 0 16px 18px 16px; font-size: .97rem; }
  .faq-help { padding: 22px 20px; }
  .faq-help-actions .btn { flex: 1 1 auto; justify-content: center; }
  .faq-item:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-glow, .faq-help::after { animation: none; }
  .faq-item:hover { transform: none; }
}

/* v6: nav has 6 links now — keep labels on one line and tighten spacing on narrower desktops (Spanish labels are longer) */
@media (min-width: 1081px) {
  .main-nav ul a { white-space: nowrap; }
}
@media (min-width: 1081px) and (max-width: 1360px) {
  .main-nav ul { gap: 20px; }
  .main-nav ul a { font-size: 14px; }
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .main-nav ul { gap: 14px; }
  .main-nav { gap: 16px; }
}

/* =========================================================
   v7: "Text us" (SMS) — floating button on every page + inline links
   Desktop: pill with label and a tooltip showing the number (SMS links may not open on computers).
   Mobile: round icon button bottom-right, next to the sticky "Call Now" bar; respects safe areas.
   ========================================================= */
.sms-fab {
  position: fixed; z-index: 95; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border-radius: 999px;
  font: 600 15px/1 var(--font-body); color: #fff; background: var(--grad-cta);
  box-shadow: 0 18px 36px -12px rgba(30, 144, 255, .75), 0 6px 14px -6px rgba(15, 113, 170, .5), inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .3s, visibility .3s;
}
.sms-fab:hover, .sms-fab:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(30, 144, 255, .85), 0 8px 18px -8px rgba(15, 113, 170, .6); }
.sms-fab:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.sms-fab svg { position: relative; width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sms-fab-label { position: relative; white-space: nowrap; }
.sms-fab-pulse { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: sms-pulse 3s ease-out infinite; }
@keyframes sms-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 144, 255, .5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(30, 144, 255, 0); } }
.sms-fab-tip {
  position: absolute; right: 0; bottom: calc(100% + 12px); padding: 9px 13px; border-radius: 12px; white-space: nowrap;
  font: 500 13.5px/1.2 var(--font-body); color: #fff; background: var(--navy); box-shadow: 0 14px 30px -12px rgba(10, 37, 64, .6);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.sms-fab-tip::after { content: ""; position: absolute; right: 26px; top: 100%; border: 6px solid transparent; border-top-color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .sms-fab:hover .sms-fab-tip, .sms-fab:focus-visible .sms-fab-tip { opacity: 1; visibility: visible; transform: none; }
}
.sms-fab.is-tucked { opacity: 0; visibility: hidden; transform: translateY(16px); }
.sms-inline { white-space: nowrap; }
@media (max-width: 640px) {
  .sms-fab { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; padding: 0; justify-content: center; gap: 0; }
  .sms-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sms-fab-tip { display: none; }
  .sms-fab svg { width: 24px; height: 24px; }
  /* sticky call bar makes room for the round SMS button on its right */
  .mobile-call { right: calc(84px + env(safe-area-inset-right, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sms-fab-pulse { animation: none !important; }
  .sms-fab, .sms-fab-tip { transition: none; }
}

/* =========================================================
   v8: ARS Assistant — guided estimate chat (js/assistant.js)
   Bubble sits ABOVE the "Text us" button (same right edge); on phones the sticky
   "Call Now" bar keeps its spot to the left of the SMS button, so nothing overlaps.
   The bubble steps aside while the booking form is on screen (like the SMS button).
   Panel: floating card on desktop, full-height sheet on phones.
   ========================================================= */
.ars-fab {
  position: fixed; z-index: 96; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; padding: 0; border: 2px solid var(--blue-200); border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 18px 36px -14px rgba(15, 113, 170, .6), 0 6px 14px -6px rgba(10, 37, 64, .3), 0 0 0 4px rgba(30, 144, 255, .14);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .3s, visibility .3s;
}
.ars-fab:hover { transform: translateY(-2px) scale(1.03); border-color: var(--azure); }
.ars-fab:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; }
.ars-fab-main { width: 28px; height: 28px; fill: var(--blue); filter: drop-shadow(0 3px 6px rgba(30, 144, 255, .4)); }
.ars-fab-spark { position: absolute; width: 12px; height: 12px; top: 10px; right: 10px; fill: var(--azure); animation: ars-twinkle 3.2s ease-in-out infinite; }
.ars-fab-ring { position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; }
.ars-fab.has-dot .ars-fab-ring { animation: sms-pulse 2.6s ease-out infinite; }
.ars-fab-dot { position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--azure); border: 2px solid #fff; transform: scale(0); transition: transform .3s var(--ease); }
.ars-fab.has-dot .ars-fab-dot { transform: scale(1); }
.ars-fab.is-tucked { opacity: 0; visibility: hidden; transform: translateY(16px); }
@keyframes ars-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(25deg); opacity: .75; } }

/* Teaser bubble (once per session) */
.ars-teaser {
  position: fixed; z-index: 96; right: calc(96px + env(safe-area-inset-right, 0px)); bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  max-width: 270px; display: flex; align-items: flex-start; gap: 2px;
  background: #fff; color: var(--ink); border-radius: 18px 18px 6px 18px; padding: 4px 4px 4px 0;
  box-shadow: 0 22px 44px -16px rgba(10, 37, 64, .45), 0 0 0 1px rgba(15, 113, 170, .12);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 100% 100%; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ars-teaser.is-in { opacity: 1; transform: none; }
.ars-teaser[hidden] { display: none; }
.ars-teaser-text { flex: 1; text-align: left; background: none; border: 0; padding: 10px 4px 10px 14px; font: 500 14px/1.45 var(--font-body); color: var(--navy); cursor: pointer; border-radius: 14px; }
.ars-teaser-text:hover { color: var(--blue-600); }
.ars-teaser-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ice); display: grid; place-items: center; cursor: pointer; }
.ars-teaser-x svg { width: 14px; height: 14px; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; }
.ars-teaser-x:hover { background: var(--blue-100); }

/* With the chat bubble stacked above it, the SMS tooltip opens to the LEFT of the SMS button */
html.has-ars-chat .sms-fab-tip { right: calc(100% + 12px); bottom: 50%; transform: translate(4px, 50%); }
html.has-ars-chat .sms-fab-tip::after { right: auto; left: 100%; top: 50%; margin-top: -6px; border-top-color: transparent; border-left-color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  html.has-ars-chat .sms-fab:hover .sms-fab-tip, html.has-ars-chat .sms-fab:focus-visible .sms-fab-tip { transform: translate(0, 50%); }
}

/* While the chat is open, the floating buttons step aside */
html.ars-chat-open .ars-fab, html.ars-chat-open .ars-teaser, html.ars-chat-open .sms-fab, html.ars-chat-open .mobile-call { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }

/* Panel */
.ars-panel {
  position: fixed; z-index: 150; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px)); height: min(660px, calc(100vh - 44px)); height: min(660px, calc(100dvh - 44px));
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 22px;
  box-shadow: 0 40px 80px -24px rgba(10, 37, 64, .45), 0 0 0 1px rgba(15, 113, 170, .12);
  opacity: 0; transform: translateY(14px) scale(.97); transform-origin: 100% 100%; transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.ars-panel.is-in { opacity: 1; transform: none; }
.ars-panel[hidden] { display: none; }
.ars-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; color: #fff; background: var(--grad-deep); position: relative; }
.ars-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px rgba(168, 224, 250, .35); position: relative; }
.ars-avatar svg { width: 22px; height: 22px; fill: var(--azure); }
.ars-avatar::after { content: ""; position: absolute; right: -1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--sky); border: 2px solid #0f71aa; }
.ars-head-txt { flex: 1; min-width: 0; }
.ars-title { margin: 0; font: 600 16px/1.2 var(--font-body); color: #fff; }
.ars-sub { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ars-lang { flex: none; display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.ars-lang button { border: 0; background: none; color: #fff; font: 600 12px/1 var(--font-body); padding: 7px 9px; border-radius: 999px; cursor: pointer; min-width: 32px; }
.ars-lang button.is-active { background: #fff; color: var(--blue-600); }
.ars-icon-btn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.ars-icon-btn:hover { background: rgba(255, 255, 255, .16); }
.ars-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ars-head button:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }

.ars-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px 10px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, var(--ice) 0%, #f6fbff 100%); }
.ars-log:focus-visible { outline: 3px solid var(--blue-300); outline-offset: -3px; }
.ars-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; animation: ars-in .3s var(--ease) both; }
.ars-msg.is-user { align-self: flex-end; max-width: 85%; }
.ars-msg-av { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-chip); }
.ars-msg-av svg { width: 13px; height: 13px; fill: #fff; }
.ars-bubble { min-width: 0; padding: 10px 13px; border-radius: 16px 16px 16px 5px; background: #fff; color: var(--ink); font-size: 14.5px; line-height: 1.5; box-shadow: 0 1px 2px rgba(10, 37, 64, .06), 0 4px 14px -8px rgba(10, 37, 64, .2); overflow-wrap: anywhere; }
.ars-bubble p { margin: 0; }
.ars-bubble p + p, .ars-bubble p + .ars-links { margin-top: 8px; }
.is-user .ars-bubble { background: var(--grad-chip); color: #fff; border-radius: 16px 16px 5px 16px; white-space: pre-wrap; }
.ars-strong { font-weight: 600; color: var(--navy); }
.ars-muted { color: var(--muted); font-size: 13.5px; }
@keyframes ars-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ars-typing .ars-bubble { display: inline-flex; gap: 4px; padding: 13px 14px; }
.ars-typing .ars-bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-300); animation: ars-dot 1.1s ease-in-out infinite; }
.ars-typing .ars-bubble span:nth-child(2) { animation-delay: .15s; }
.ars-typing .ars-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes ars-dot { 0%, 60%, 100% { transform: translateY(0); background: var(--blue-300); } 30% { transform: translateY(-4px); background: var(--azure); } }

.ars-summary { width: 100%; }
.ars-sum-title { font-weight: 700; color: var(--navy); margin-bottom: 6px !important; }
.ars-summary dl { margin: 0; }
.ars-sum-row { display: grid; grid-template-columns: minmax(84px, 38%) 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ars-sum-row dt { color: var(--muted); }
.ars-sum-row dd { margin: 0; font-weight: 600; color: var(--navy); white-space: pre-wrap; }

.ars-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ars-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 600 13px/1.2 var(--font-body); color: var(--blue-600); background: var(--blue-100); }
.ars-link-btn:hover { color: #fff; background: var(--blue); }
.ars-link-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ars-link-btn.is-primary { color: #fff; background: var(--grad-cta); }

.ars-composer { flex: none; max-height: 58%; overflow-y: auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fff; }
.ars-composer:empty { display: none; }
.ars-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ars-chips + .ars-chips { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ars-btn { font: 600 14px/1.25 var(--font-body); border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.ars-chip { padding: 9px 14px; border: 1.5px solid var(--blue-200); background: #fff; color: var(--blue-600); text-align: left; animation: ars-in .3s var(--ease) both; }
.ars-chip:hover { border-color: var(--azure); background: var(--ice); }
.ars-chip.is-selected { border-color: var(--blue); background: var(--blue-100); }
.ars-chips-cta .ars-chip:first-child { color: #fff; border-color: transparent; background: var(--grad-cta); }
.ars-btn-primary { padding: 10px 18px; border: 0; color: #fff; background: var(--grad-cta); box-shadow: 0 10px 22px -12px rgba(30, 144, 255, .8); }
.ars-btn-primary:hover { transform: translateY(-1px); }
.ars-btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }
.ars-btn-ghost { padding: 9px 15px; border: 1.5px solid var(--blue-200); background: #fff; color: var(--blue-600); }
.ars-btn-ghost:hover { border-color: var(--azure); background: var(--ice); }
.ars-btn-back { margin-right: auto; padding: 9px 6px; border: 0; background: none; color: var(--muted); }
.ars-btn-back::before { content: "← "; }
.ars-btn-back:hover { color: var(--navy); }
.ars-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ars-nav:first-child { margin-top: 0; }
.ars-form { margin: 0; }
.ars-field { margin-bottom: 8px; min-width: 0; }
.ars-field label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--navy); }
.ars-input { width: 100%; box-sizing: border-box; font: 16px/1.4 var(--font-body); color: var(--ink); padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfdff; resize: vertical; }
.ars-input:focus { border-color: var(--blue); background: #fff; }
.ars-input[aria-invalid="true"] { border-color: #d9534f; background: #fff7f7; }
textarea.ars-input { min-height: 72px; max-height: 160px; }
.ars-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ars-err { margin: 4px 0 0; font-size: 12.5px; color: #b03a36; }
.ars-fine { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ars-composer.is-busy { min-height: 0; }

@media (max-width: 640px) {
  .ars-fab { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
  .ars-fab-main { width: 26px; height: 26px; }
  .ars-fab-spark { top: 8px; right: 8px; width: 11px; height: 11px; }
  .ars-teaser { right: calc(80px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: min(260px, calc(100vw - 104px)); }
  .ars-teaser-text { font-size: 13.5px; padding: 9px 2px 9px 12px; }
  .ars-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; transform: translateY(24px); transform-origin: 50% 100%; }
  .ars-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .ars-field-row { grid-template-columns: 1fr; gap: 0; }
  html.ars-chat-open, html.ars-chat-open body { overflow: hidden; }
  html.has-ars-chat .footer-bottom { padding-bottom: 150px; }
}
@media (max-width: 360px) {
  .ars-sub { display: none; }
  .ars-head { gap: 8px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ars-fab, .ars-teaser, .ars-panel, .ars-fab-dot { transition: none; }
  .ars-fab-spark, .ars-fab.has-dot .ars-fab-ring, .ars-msg, .ars-chip { animation: none !important; }
  .ars-typing .ars-bubble span { animation: none; opacity: .7; }
  .ars-panel, .ars-teaser { transform: none; }
}