/* ============================================================
   NOLA Insurance Agency LLC — Premium theme
   ============================================================ */

:root {
  --navy: #3d0a0f;
  --navy-2: #4f1016;
  --ink: #271111;
  --body: #674b4f;
  --muted: #a58a8d;
  --line: #f1e8e9;
  --bg: #ffffff;
  --bg-soft: #fcf6f7;
  --bg-tint: #fbeef0;
  --brand: #d62828;
  --brand-2: #ff5a5f;
  --gold: #e0863e;
  --gold-2: #f2a05c;
  --grad: linear-gradient(120deg, #ff5a5f 0%, #e02f4b 55%, #b81d3a 100%);
  --grad-gold: linear-gradient(120deg, #f2a05c, #e0863e);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(79, 16, 22, 0.06);
  --shadow: 0 16px 40px rgba(79, 16, 22, 0.12);
  --shadow-lg: 0 30px 70px rgba(79, 16, 22, 0.20);
  --max: 1300px;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Default zoom baked in at 125% — everything is rem/clamp based, so this
   scales the whole site proportionally, just like a 125% browser zoom. */
html { font-size: 125%; scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}
a { text-decoration: none; color: var(--brand); transition: color .2s ease, opacity .2s ease; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 12px; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; letter-spacing: -0.025em; }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.35rem; font-weight: 700; }
p { margin: 0 0 1rem; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Gold gradient text — for accents on dark/red backgrounds (e.g. CTA band) */
.grad-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Keep multi-word phrases together so headings wrap at natural points */
.nowrap { white-space: nowrap; }
.eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.9rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s ease, background .25s ease, color .2s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(224,47,75,0.38); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(224,47,75,0.46); }
.btn-glass { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,0.2); color: #fff; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-outline:hover { background: #fff; color: var(--navy); }
.btn-full { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 12px;
  height: 68px; display: flex; align-items: center; gap: 1.5rem;
}
.logo { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.logo-badge {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 13px;
  filter: drop-shadow(0 6px 16px rgba(61, 10, 15, 0.45));
}
.logo-badge svg { width: 100%; height: 100%; }
.logo-text { font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; }
.logo-dim { color: var(--muted); font-weight: 600; }
.menu { display: flex; gap: 1.35rem; margin: 0 auto; }
.menu a { color: var(--ink); font-size: 0.95rem; font-weight: 500; opacity: 0.82; white-space: nowrap; }
/* Chinese labels run longer; tighten the desktop nav so it stays a single line */
html[lang="zh"] .menu { gap: 1rem; }
html[lang="zh"] .menu a { font-size: 0.9rem; }
html[lang="zh"] .nav-inner { gap: 0.85rem; }
html[lang="zh"] .nav-cta { font-size: 0.85rem; padding: 0.55rem 1rem; }
.menu a:hover, .menu a.active { opacity: 1; color: var(--brand); }
.nav-cta {
  background: var(--ink); color: #fff; font-size: 0.9rem; font-weight: 600;
  padding: 0.6rem 1.2rem; border-radius: 999px; white-space: nowrap;
}
.nav-cta:hover { color: #fff; background: var(--brand); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #ffeaea;
  min-height: 100vh;
  min-height: 100svh;                /* mobile-safe viewport unit */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 12vh, 160px) 0 0;
  background: linear-gradient(160deg, #330810 0%, #3d0a0f 45%, #5c1222 100%);
  overflow: hidden;
}
.hero > .hero-inner { flex: 1 1 auto; align-content: center; margin-top: auto; margin-bottom: auto; width: 100%; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.orb-1 { width: 420px; height: 420px; background: #ff5a5f; top: -120px; right: -80px; animation: float 14s ease-in-out infinite; }
.orb-2 { width: 360px; height: 360px; background: #b81d3a; bottom: -140px; left: -60px; animation: float 18s ease-in-out infinite reverse; }
.orb-3 { width: 260px; height: 260px; background: #ff8a3d; top: 40%; left: 55%; opacity: 0.35; animation: float 16s ease-in-out infinite; }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%);
}
@keyframes float { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-26px) translateX(14px); } }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 56px; align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  color: #d6e2ff; font-size: 0.85rem; font-weight: 600;
  padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #4be08b; box-shadow: 0 0 0 0 rgba(75,224,139,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(75,224,139,0.55); } 70% { box-shadow: 0 0 0 10px rgba(75,224,139,0); } 100% { box-shadow: 0 0 0 0 rgba(75,224,139,0); } }
.hero h1 { color: #fff; margin-bottom: 1.2rem; }
.hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: #b9c7e6; max-width: 46ch; margin-bottom: 2rem; }
.hero-sub strong { color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.4rem; }
.hero-trust li { font-size: 0.9rem; color: #9fb2d6; }
.hero-trust strong { display: block; font-size: 1.4rem; color: #fff; font-family: var(--serif); font-weight: 600; }

.hero-card {
  background: rgba(255,255,255,0.97);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.hero-card-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.avatar {
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: none;
  background: linear-gradient(145deg, #5c1222, #3d0a0f 55%, #2a0609);
  color: transparent;
  background-clip: padding-box;
  border: 1.5px solid rgba(242, 198, 107, 0.55);
  border-radius: 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900; font-size: 1.7rem; line-height: 1;
  box-shadow: 0 8px 18px rgba(61, 10, 15, 0.4);
  position: relative;
}
.avatar::after {
  content: attr(data-mono, "N");
  content: "N";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #fbe6b4, #f2c66b 40%, #e0863e 70%, #b8702c);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900; font-size: 1.7rem;
}
.hc-name { font-weight: 800; font-size: 1.1rem; color: var(--ink); margin: 0; }
.hc-name span { color: var(--brand); }
.hc-role { color: var(--muted); font-size: 0.88rem; margin: 0; }
.hc-rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--body); margin-bottom: 1.1rem; }
.hc-rating span { color: var(--gold); letter-spacing: 2px; }
.hc-list { margin-bottom: 1.3rem; }
.hc-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.hc-list li:last-child { border-bottom: 0; }
.hc-list span { color: var(--muted); }
.hc-list em { font-style: normal; font-weight: 700; color: var(--ink); }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: bob 2s ease-in-out infinite;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.scroll-hint:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); color: #fff; }
.scroll-hint svg { width: 22px; height: 22px; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- Stats ---------- */
.stats { background: var(--navy); padding: 54px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat-num { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.4rem); color: #fff; line-height: 1; }
.stat-label { display: block; margin-top: 0.5rem; color: #9fb2d6; font-size: 0.95rem; }

/* ---------- Sections ---------- */
.section { padding: 124px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 72px; }
.section-head h2 { margin-bottom: 0.8rem; }
.section-sub { font-size: 1.12rem; color: var(--body); }

/* ---------- About ---------- */
.about { background: var(--bg-soft); }
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
.about-photo {
  background: var(--grad); color: #fff; border-radius: var(--radius-lg);
  padding: 48px 32px; text-align: center; box-shadow: var(--shadow-lg);
}
.avatar-lg { width: 96px; height: 96px; border-radius: 26px; margin: 0 auto 1rem; box-shadow: none; }
.avatar-lg::after { font-size: 3.4rem; }
.ap-name {
  font-family: var(--serif); font-weight: 600; margin: 0;
  /* Fluid size so "NOLA Insurance Agency LLC" scales to fit the card width and
     stays on a single line on any phone (no lone "LLC" wrapping to line 2). */
  font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  white-space: nowrap;
  line-height: 1.2;
}
.ap-role { color: rgba(255,255,255,0.85); font-size: 0.92rem; margin: 0.2rem 0 0; }
.about-badge {
  position: absolute; right: -14px; bottom: -60px; z-index: 3;
  background: #fff; border-radius: var(--radius); padding: 16px 20px;
  display: flex; align-items: center; gap: 0.8rem; box-shadow: var(--shadow);
}
.ab-num { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--brand); }
.ab-text { font-size: 0.82rem; color: var(--body); line-height: 1.3; }
.about-copy p { font-size: 1.08rem; }
.about-links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm); }
.chip:hover { color: var(--brand); border-color: var(--brand-2); }

/* ---------- Coverage ---------- */
/* Wider container for the coverage cards so they read as rectangles */
.coverage .wrap { max-width: 1640px; }
.cov-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start;
  perspective: 1600px;
}

/* Card shell — handles the idle float */
.cov-card { position: relative; }
.cov-card.float { animation: cov-float 5s ease-in-out infinite; }
.cov-card.float:nth-child(2) { animation-delay: -1.6s; animation-duration: 5.8s; }
.cov-card.float:nth-child(3) { animation-delay: -3.2s; animation-duration: 5.4s; }
@keyframes cov-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* Inner — handles the 3D flip */
.cov-inner {
  position: relative; height: 100%; min-height: 400px;
  transition: transform .7s var(--ease);
  transform-style: preserve-3d;
}
.cov-card.flipped .cov-inner { transform: rotateY(180deg); }
.cov-card.flipped { animation-play-state: paused; }

.cov-front, .cov-back {
  border-radius: var(--radius);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cov-front {
  background: var(--bg); border: 1px solid var(--line);
  padding: 44px 40px;
  box-shadow: 0 18px 44px rgba(79, 16, 22, 0.14), 0 4px 12px rgba(79, 16, 22, 0.08);
  height: 100%;
  transition: box-shadow .3s ease;
}
.cov-card:not(.flipped):hover .cov-front { box-shadow: 0 30px 66px rgba(79, 16, 22, 0.22), 0 8px 18px rgba(79, 16, 22, 0.12); }
.cov-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background: var(--bg); border: 1px solid var(--line);
  padding: 44px 40px;
  box-shadow: 0 18px 44px rgba(79, 16, 22, 0.14), 0 4px 12px rgba(79, 16, 22, 0.08);
  display: flex; flex-direction: column; justify-content: center;
  cursor: pointer;
}

/* Feature (Commercial) styling for both faces */
.cov-card-feature .cov-front,
.cov-card-feature .cov-back { background: linear-gradient(180deg, #3d0a0f, #631f2c); border-color: transparent; color: #ffeaea; box-shadow: var(--shadow); }
.cov-card-feature h3, .cov-card-feature .cov-desc { color: #fff; }
.cov-card-feature .cov-pill { background: rgba(255,255,255,0.1); color: #ffd9d9; border-color: rgba(255,255,255,0.16); }
.cov-card-feature .cov-pill:hover { background: rgba(255,255,255,0.2); }
.cov-card-feature .cov-back-title { color: #fff; }
.cov-card-feature .cov-back-desc { color: #cdd9f0; }
.cov-card-feature .cov-back-btn { color: #9fb2d6; }

.cov-icon {
  width: 66px; height: 66px; display: grid; place-items: center;
  border-radius: 18px; background: var(--bg-tint); color: var(--brand);
  margin-bottom: 1.5rem;
}
.cov-icon svg { width: 34px; height: 34px; }
.cov-card-feature .cov-icon { background: rgba(255,255,255,0.14); color: #fff; }
.cov-front h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.cov-desc { font-size: 1.08rem; margin-bottom: 1.6rem; }
.cov-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cov-pill {
  font-family: inherit; cursor: pointer;
  background: var(--bg-tint); color: var(--navy-2); border: 1px solid var(--line);
  font-size: 0.92rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px;
  transition: background .2s ease, transform .12s ease, border-color .2s ease;
}
.cov-pill:hover { background: #fff; border-color: var(--brand-2); transform: translateY(-1px); }
.cov-pill:active { transform: translateY(0); }

/* Back face content */
.cov-back-title { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: 0.7rem; }
.cov-back-desc { font-size: 1.02rem; line-height: 1.6; color: var(--body); margin-bottom: 1.6rem; }
.cov-back-hint { display: block; margin-top: 0.9rem; text-align: center; font-size: 0.78rem; color: var(--muted); }
.cov-card-feature .cov-back-hint { color: #9fb2d6; }
.cov-card-feature .cov-quote { background: #fff; color: var(--navy); box-shadow: none; }
.cov-card-feature .cov-quote:hover { background: var(--gold); color: var(--navy); }
/* keep clicks on inner content from missing the back handler */
.cov-back-title, .cov-back-desc, .cov-back-hint { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cov-card.float { animation: none; }
  .cov-inner { transition: none; }
}

/* ---------- Why ---------- */
.why { background: var(--bg-soft); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s ease; }
.why-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.why-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--bg-tint); font-size: 1.5rem; margin-bottom: 1rem; }
.why-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.why-item p { font-size: 0.96rem; margin: 0; }

/* ---------- Carriers marquee ---------- */
.carriers { padding-bottom: 108px; }
.carriers .section-head { margin-bottom: 56px; }
.marquee { position: relative; overflow: hidden; padding: 28px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Smart gapping: each tile hugs its logo's real width (no fixed width), so the
   flex gap gives EVEN spacing between logos regardless of shape. Sizing is done
   with real height (via --s) instead of transform, so the layout box grows with
   the logo and the spacing stays balanced. */
.marquee-track .logo-tile {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none; padding: 0;
}
.marquee-track .logo-tile img {
  width: auto;
  height: calc(46px * var(--s, 1));   /* --s now scales real height */
  max-width: 260px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity .25s ease, transform .25s var(--ease);
}
/* Inline SVG logos (crisp vector wordmarks) size the same way via --s height */
.marquee-track .logo-tile.logo-svg svg {
  width: auto;
  height: calc(46px * var(--s, 1));
  max-width: 260px;
  opacity: 0.92;
  transition: opacity .25s ease, transform .25s var(--ease);
}
.marquee-track .logo-tile.logo-geico { color: #004c97; }   /* GEICO blue (svg uses currentColor) */
/* JPG logos ship with a solid white background (no alpha). Multiply drops the
   white against the white page so they read as transparent too. */
.marquee-track .logo-tile.on-white img { mix-blend-mode: multiply; }
.marquee-track .logo-tile:hover img,
.marquee-track .logo-tile:hover svg { opacity: 1; transform: scale(1.06); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Coverage Quiz (card deck) ---------- */
.quiz { background: var(--bg-soft); position: relative; overflow: hidden; }

/* Big full-bleed card layout: copy on the left, a huge card jammed against —
   and bleeding past — the right AND bottom edges of the screen.
   Extra top padding gives the lifted, tilted card room so its top corner,
   accent bar, and badge stay fully inside the section (never clipped). */
.quiz { min-height: 92vh; display: flex; align-items: center; padding-top: 160px; }
.quiz > .quiz-layout {
  display: grid; grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 40px; align-items: center; width: 100%;
}
.quiz-intro { max-width: 460px; }
.quiz-intro .eyebrow { margin-bottom: 1rem; }
.quiz-intro h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 1.1rem; text-align: left; }
.quiz-intro .section-sub { font-size: 1.15rem; margin-bottom: 2rem; }

/* The stage lets the deck overflow toward the right AND bottom of the viewport. */
.quiz-stage { position: relative; min-height: 640px; }

/* Kill the centered section-top gold ornament here — the quiz uses a custom
   left-aligned layout, so the centered flourish looks misplaced. Cover both the
   plain and adjacent-sibling forms of the separator. */
.quiz.section::before,
.section + .quiz.section::before,
.coverage + .quiz.section::before { display: none !important; content: none !important; }
.quiz-intro .eyebrow::before, .quiz-intro .eyebrow::after,
.quiz-intro h2::before, .quiz-intro h2::after { display: none !important; content: none !important; }

.quiz-progress {
  height: 8px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-bottom: 16px;
  box-shadow: inset 0 1px 2px rgba(79,16,22,0.06);
}
.quiz-progress-bar {
  display: block; height: 100%; width: 0%; min-width: 8px;
  background: var(--grad); border-radius: 999px;
  box-shadow: 0 0 12px rgba(214,40,40,0.4);
  transition: width .5s var(--ease);
}
.quiz-step-label {
  text-align: center; font-size: 0.88rem; font-weight: 700;
  color: var(--brand); margin: 0 0 26px; letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Deck holds stacked cards — BIG and wide, tilted, sliding OFF the right edge of
   the viewport so its right third disappears under the screen edge.
   The negative right (in vw) is calculated from the wrap gutter so the card
   reaches past the true viewport edge, not just the wrap boundary. */
.quiz-deck {
  position: absolute; top: -300px;  /* lifted, but not so high the top rides out of the section */
  left: 300px;                /* pushed right → narrower/thinner card body */
  right: calc(-50vw + 50%);   /* pushes the right edge all the way to viewport edge... */
  margin-right: -140px;       /* ...then slides it further under the screen edge */
  width: auto; max-width: none; height: 820px;   /* taller so the bottom runs off-screen */
  perspective: 1800px;
  transform-origin: top right;   /* pivot from the top-right so that corner anchors up */
  transition: transform .6s var(--ease);
}
/* Steeper tilt: bottom swings toward lower-right, top-right corner rides the top
   edge; the right side slides under the screen edge, bottom runs off-section. */
.quiz-stage:not(.engaged) .quiz-deck { transform: rotate(-11deg); }
.quiz-stage.engaged .quiz-deck { transform: rotate(-8deg); }

.quiz-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 64px 68px;
  box-shadow: var(--shadow-lg);
  transition: transform .55s var(--ease), opacity .5s var(--ease), box-shadow .5s ease;
  transform-origin: center bottom;
  will-change: transform, opacity;
  overflow: hidden;
}
/* Soft gradient wash + top accent bar for a premium feel */
.quiz-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--grad);
}
.quiz-card::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,95,0.10), transparent 70%);
  pointer-events: none;
}

/* Stacked look: cards behind peek out slightly */
.quiz-card[data-stack="0"] { transform: translateY(0) scale(1) rotate(0); z-index: 5; opacity: 1; }
.quiz-card[data-stack="1"] { transform: translateY(18px) scale(0.955) rotate(-1.4deg); z-index: 4; opacity: 1; box-shadow: var(--shadow); }
.quiz-card[data-stack="2"] { transform: translateY(34px) scale(0.91) rotate(1.2deg); z-index: 3; opacity: 1; box-shadow: var(--shadow-sm); }
.quiz-card[data-stack="hidden"] { transform: translateY(46px) scale(0.88); z-index: 1; opacity: 0; pointer-events: none; }
/* Answered card swipes off toward the top-right */
.quiz-card[data-stack="gone"] {
  transform: translate(75%, -85%) rotate(14deg) scale(0.9);
  opacity: 0; z-index: 6; pointer-events: none;
}
/* Only the top card is interactive */
.quiz-card:not([data-stack="0"]) .quiz-opt { pointer-events: none; }

/* Header row: step number pill + counter */
.quiz-card-num {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--serif); font-size: 0.82rem; font-weight: 700;
  color: #fff; background: var(--grad);
  letter-spacing: 0.06em; padding: 0.35rem 0.85rem;
  border-radius: 999px; margin-bottom: 1.4rem;
  box-shadow: 0 6px 16px rgba(214,40,40,0.28);
}
.quiz-q {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem); line-height: 1.16;
  color: var(--ink); margin-bottom: 2rem;
  max-width: 16ch;
}
.quiz-opts { display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto; }
.quiz-opt {
  position: relative;
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--bg-tint); border: 1.5px solid transparent;
  border-radius: var(--radius-sm); padding: 1.05rem 1.3rem;
  font-size: 1.05rem; font-weight: 600; color: var(--navy-2);
  transition: background .22s ease, border-color .22s ease, transform .16s var(--ease), box-shadow .22s ease;
}
/* Leading dot marker */
.quiz-opt::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--brand-2); background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
/* Trailing arrow that slides in on hover */
.quiz-opt::after {
  content: "→"; margin-left: auto; color: var(--brand);
  font-weight: 700; opacity: 0; transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.quiz-opt:hover {
  background: #fff; border-color: var(--brand-2);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.quiz-opt:hover::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(214,40,40,0.14); }
.quiz-opt:hover::after { opacity: 1; transform: translateX(0); }
.quiz-opt:active { transform: translateY(0); }
/* Brief highlight on the picked answer as the card flies off */
.quiz-opt.chosen {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px rgba(214,40,40,0.32);
}
.quiz-opt.chosen::before { background: #fff; border-color: #fff; }
.quiz-opt.chosen::after { opacity: 1; transform: translateX(0); color: #fff; }

/* Result card */
.quiz-result { background: linear-gradient(160deg, #fff 0%, var(--bg-tint) 100%); justify-content: center; }
/* Keep all result content within the on-screen (left) portion of the card,
   since the card's right side bleeds off the viewport. */
.quiz-result > * { max-width: 620px; }
.quiz-result-badge {
  align-self: flex-start;
  background: var(--grad); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.45rem 1rem; border-radius: 999px; margin-bottom: 1.2rem;
  box-shadow: 0 6px 16px rgba(214,40,40,0.28);
}
.quiz-result .quiz-q { margin-bottom: 0.7rem; max-width: 14ch; }
.quiz-rec-hint { font-size: 0.86rem; color: var(--muted); margin: 0 0 1rem; }
.quiz-rec-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; padding: 0; }
.quiz-rec-list li { list-style: none; animation: quizPop .4s var(--ease) both; }
/* Clickable coverage chip — compact so all fit in the visible area */
.quiz-rec-chip {
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.42rem 0.85rem; font-size: 0.86rem; font-weight: 600; color: var(--navy-2);
  box-shadow: var(--shadow-sm);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .14s var(--ease), box-shadow .2s ease;
}
.quiz-rec-chip::before {
  content: "✓"; color: var(--brand); font-weight: 800; font-size: 0.78rem;
  transition: color .2s ease;
}
.quiz-rec-chip:hover { border-color: var(--brand-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.quiz-rec-chip.is-active {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px rgba(214,40,40,0.3);
}
.quiz-rec-chip.is-active::before { content: "▾"; color: #fff; }
.quiz-rec-empty {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.6rem 1.15rem; font-size: 0.98rem; font-weight: 600; color: var(--navy-2);
}
@keyframes quizPop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Description panel — smoothly expands under the chips (grid-rows trick) */
.quiz-rec-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease), margin .38s var(--ease), opacity .3s ease;
  opacity: 0; margin-bottom: 0;
}
.quiz-rec-detail.open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 1.6rem; }
.quiz-rec-detail-inner { overflow: hidden; }
.quiz-rec-detail.open .quiz-rec-detail-inner {
  border-left: 3px solid var(--brand);
  background: linear-gradient(90deg, rgba(214,40,40,0.06), transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.9rem 1.2rem;
}
.quiz-rec-detail-title {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); margin: 0 0 0.25rem;
}
.quiz-rec-detail-desc { font-size: 0.88rem; color: var(--body); line-height: 1.55; margin: 0; max-width: 42ch; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.2rem; }
/* Start over sits on the white card, so give it dark-on-light styling instead
   of the hero's white .btn-outline (which was nearly invisible here). */
.quiz-restart {
  background: #fff; color: var(--navy-2);
  border: 1.5px solid var(--line);
}
.quiz-restart:hover { background: var(--bg-tint); color: var(--brand); border-color: var(--brand-2); }
/* Slimmer result buttons — the base .btn padding + heavy glow looked too chunky */
.quiz-result-actions .btn {
  padding: 0.55rem 1.15rem; font-size: 0.9rem; line-height: 1.2;
}
.quiz-result-actions .btn-primary { box-shadow: 0 6px 16px rgba(224,47,75,0.28); }
.quiz-disclaimer { font-size: 0.82rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Tablet/down: stack to one column, bring the deck fully into view, centered */
@media (max-width: 980px) {
  .quiz { min-height: 0; display: block; }
  .quiz > .quiz-layout { grid-template-columns: 1fr; gap: 36px; }
  .quiz-intro { max-width: none; text-align: center; margin: 0 auto; }
  .quiz-intro h2 { text-align: center; }
  .quiz-progress { max-width: 420px; margin-left: auto; margin-right: auto; }
  /* "Step 01" is already shown inside the card, so the "Question X of Y"
     label above the deck is redundant on mobile — hide it. */
  .quiz-step-label { display: none; }
  .quiz-stage { min-height: 0; }
  /* On mobile the deck is a straight, in-flow panel. Let its height follow the
     ACTIVE card's content (auto) instead of a fixed value — so every card keeps
     tidy, even padding top and bottom regardless of how many options it has. */
  .quiz-deck {
    position: relative; top: auto; left: auto; right: auto;
    transform: none !important; margin: 0 auto;
    width: 100%; max-width: 560px; height: auto; min-height: 0;
  }
  .quiz-q { max-width: none; }
  /* Don't shove the options to the very bottom edge (that swallowed the card's
     bottom padding on the longer questions). Let them sit just below the
     question with normal spacing. */
  .quiz-opts { margin-top: 0; }
  .quiz-card { justify-content: flex-start; }
  /* The active card defines the deck height; the cards behind it are pinned on
     top of it (absolute) so they don't add their own height. */
  .quiz-card { position: absolute; top: 0; left: 0; right: 0; }
  .quiz-card[data-stack="0"] { position: relative; }
  /* Behind cards only exist for the layered "stacked deck" edge. Cap them to the
     active card's height and hide their content so a taller upcoming card can't
     poke its options out from under the front card. */
  .quiz-card:not([data-stack="0"]) { height: 100%; }
  .quiz-card:not([data-stack="0"]) > * { visibility: hidden; }
}
@media (max-width: 600px) {
  .quiz-card { padding: 34px 28px 38px; }
  .quiz-q { margin-bottom: 1.6rem; }
  .quiz-opts { gap: 0.65rem; }
  .quiz-opt { padding: 0.9rem 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-card { transition: opacity .2s ease; }
  .quiz-rec-list li { animation: none; }
  .quiz-deck { transition: none; }
}

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item.open { border-color: var(--brand-2); box-shadow: var(--shadow); }
.faq-q {
  width: 100%; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: none; border: 0; text-align: left;
  padding: 24px 28px;
  font-size: 1.1rem; font-weight: 700; color: var(--ink);
  transition: color .2s ease;
}
.faq-q:hover { color: var(--brand); }
/* Plus / minus icon in a soft circular badge */
.faq-ico {
  position: relative; flex: none; width: 34px; height: 34px;
  border-radius: 50%; background: var(--bg-tint);
  transition: background .25s ease, transform .3s var(--ease);
}
.faq-item.open .faq-ico { background: var(--grad); transform: rotate(180deg); }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s ease, background .25s ease;
}
.faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-ico::before,
.faq-item.open .faq-ico::after { background: #fff; }
.faq-item.open .faq-ico::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
/* Answer collapses via grid-rows for smooth height animation */
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  margin: 0; padding: 0 28px 26px;
  font-size: 1.02rem; color: var(--body); line-height: 1.7;
  max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--bg-soft); }
.rating-summary {
  display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  justify-content: center; margin-top: 1.2rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.2rem; box-shadow: var(--shadow-sm);
}
.rs-stars { color: var(--gold); letter-spacing: 2px; }
.rating-summary strong { color: var(--ink); font-size: 1rem; }
.rs-count { color: var(--muted); font-size: 0.9rem; }

/* Two-row auto-scrolling carousel */
.tcarousel {
  position: relative; overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tcarousel + .tcarousel { margin-top: 22px; }
.tcarousel-track { display: flex; gap: 22px; width: max-content; will-change: transform; }
.tcarousel-track[data-dir="left"]  { animation: scroll-left 60s linear infinite; }
.tcarousel-track[data-dir="right"] { animation: scroll-right 60s linear infinite; }
.tcarousel:hover .tcarousel-track { animation-play-state: paused; }
@keyframes scroll-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.quote {
  flex: none; width: 380px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 0.9rem; }
.quote blockquote { font-size: 1.02rem; color: var(--ink); line-height: 1.6; margin: 0 0 1.4rem; flex: 1; }
.quote-author { display: flex; align-items: center; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.qa-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(79,16,22,0.14); background: var(--bg-tint); }
.qa-info { display: flex; flex-direction: column; line-height: 1.3; }
.qa-info strong { color: var(--ink); font-size: 0.98rem; font-weight: 700; }
.qa-info em { font-style: normal; color: var(--muted); font-size: 0.85rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, #d62828, #e02f4b 60%, #b81d3a); color: #fff; padding: 84px 0; text-align: center; }
.cta-inner h2 { color: #fff; margin-bottom: 0.6rem; }
.cta-inner p { color: rgba(255,255,255,0.9); font-size: 1.15rem; margin-bottom: 1.8rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Contact ---------- */
.contact-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }
.contact-list { margin-top: 1.6rem; }
.contact-list li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ci-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--bg-tint); border-radius: 12px; font-size: 1.2rem; }
.ci-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.contact-list a { color: var(--ink); font-weight: 600; }
.contact-list a:hover { color: var(--brand); }

/* Form panel + toggle */
.form-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.form-toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px; margin-bottom: 1.5rem;
}
.toggle-btn {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  /* Fluid size so both labels — including the long "Schedule an Appointment" —
     fit any viewport without overflowing the pill. */
  font-size: clamp(0.72rem, 2.6vw, 0.9rem);
  font-weight: 700; line-height: 1.15;
  color: var(--muted); padding: 0.7rem 0.5rem; border-radius: 999px;
  transition: color .25s ease;
  min-width: 0;               /* let the grid cell shrink instead of overflowing */
  white-space: normal;        /* allow wrapping on very narrow phones */
  overflow-wrap: break-word;
}
.toggle-btn.active { color: #fff; }
.toggle-slider {
  position: absolute; z-index: 1; top: 5px; left: 5px;
  width: calc(50% - 5px); height: calc(100% - 10px);
  background: var(--grad); border-radius: 999px;
  box-shadow: 0 6px 16px rgba(224,47,75,0.4);
  transition: transform .3s var(--ease);
}
.form-toggle.appt .toggle-slider { transform: translateX(100%); }

.form.is-hidden { display: none; }

.form { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; display: flex; flex-direction: column; gap: 1rem; }
/* Static labels for date/select fields that can't use :placeholder-shown */
.field-filled input, .field-filled select { padding: 1.35rem 1rem 0.6rem; color: var(--ink); }
.label-static { position: absolute; left: 1rem; top: 0.5rem; font-size: 0.74rem; font-weight: 700; color: var(--brand); pointer-events: none; }
.field input[type="date"] { color: var(--ink); }

/* ---------- Booking (two-step) ---------- */
.booking-step { display: flex; flex-direction: column; gap: 1.2rem; }
.booking-step.is-hidden { display: none; }

/* Step indicator */
.booking-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 1.4rem; }
.bstep { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.bstep.active { color: var(--brand); }
.bstep.done { color: var(--ink); }
.bstep-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }

/* Calendar — wide rectangle */
.cal { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-title { font-weight: 800; color: var(--ink); font-size: 1.15rem; }
.cal-nav {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cal-nav:hover:not(:disabled) { background: var(--brand); color: #fff; border-color: var(--brand); }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-day {
  aspect-ratio: 16 / 10;          /* landscape rectangle cells */
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; border-radius: 12px;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.cal-day:hover:not(:disabled):not(.empty) { background: var(--bg-tint); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day:disabled { color: var(--muted); opacity: 0.4; cursor: not-allowed; background: transparent; border-color: transparent; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--brand-2); }
.cal-day.selected { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(224,47,75,0.4); }
.cal-hint { margin: 1rem 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* Time slots — full width row of pills */
.slots { display: flex; flex-direction: column; }
.slots-label { font-weight: 700; color: var(--ink); font-size: 0.95rem; margin: 0 0 0.8rem; }
.slot-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start; }
.slot {
  border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 0.75rem 0.4rem; font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
}
.slot:hover { border-color: var(--brand-2); transform: translateY(-1px); }
.slot.selected { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(224,47,75,0.4); }
.slot-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; }

/* Step 2 details */
.booking-back {
  align-self: flex-start; background: none; border: 0; cursor: pointer;
  color: var(--brand); font-family: inherit; font-size: 0.9rem; font-weight: 700; padding: 0;
}
.booking-back:hover { color: var(--navy); }
.picked {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.8rem 1rem; font-weight: 700; color: var(--navy-2); font-size: 0.95rem;
}
.picked-ico { font-size: 1.15rem; }
.field { position: relative; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--bg-soft);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.35rem 1rem 0.6rem; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { resize: vertical; min-height: 100px; }
.field select { padding: 1rem; color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(214,40,40,0.12); }
.field label { position: absolute; left: 1rem; top: 1.05rem; font-size: 1rem; color: var(--muted); pointer-events: none; transition: transform .18s var(--ease), font-size .18s var(--ease); }

/* ---------- Custom brand dropdown (replaces the generic native select UI) ---------- */
.cs-native { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs { position: relative; }
.cs-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-family: inherit; font-size: 1rem; cursor: pointer; text-align: left;
  color: var(--muted); background: var(--bg-soft);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cs-trigger:hover { border-color: var(--brand-2); }
.cs.open .cs-trigger,
.cs-trigger:focus-visible {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px rgba(214,40,40,0.10);
}
.cs-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-value:not(.cs-placeholder) { color: var(--ink); font-weight: 600; }
.cs-caret { width: 18px; height: 18px; flex: none; color: var(--brand); transition: transform .3s var(--ease); }
.cs.open .cs-caret { transform: rotate(180deg); }

/* The panel — soft, branded, no harsh contrast */
.cs-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(79,16,22,0.16), 0 6px 16px rgba(79,16,22,0.08);
  padding: 8px;
  opacity: 0; transform: translateY(-8px) scale(0.99);
  transform-origin: top center; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.cs.open .cs-panel { opacity: 1; transform: none; pointer-events: auto; }

.cs-group { padding: 4px 0; }
.cs-group + .cs-group { border-top: 1px solid var(--line); margin-top: 4px; }
.cs-group-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand); margin: 6px 12px 4px; opacity: 0.85;
}
.cs-option {
  width: 100%; display: flex; align-items: center; gap: 0.65rem;
  font-family: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 10px;
  padding: 0.6rem 0.85rem; font-size: 0.98rem; font-weight: 500; color: var(--body);
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.cs-option::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-2); opacity: 0; transform: scale(0.6);
  transition: opacity .15s ease, transform .15s ease; flex: none;
}
/* Soft branded hover — a gentle tint, never a jarring block of color */
.cs-option:hover, .cs-option.cs-active {
  background: var(--bg-tint); color: var(--ink); padding-left: 1rem;
}
.cs-option:hover::before, .cs-option.cs-active::before { opacity: 1; transform: scale(1); }
/* Currently selected item */
.cs-option.cs-selected { color: var(--brand); font-weight: 700; }
.cs-option.cs-selected::before { opacity: 1; transform: scale(1); background: var(--brand); }

/* Soft custom scrollbar for the panel */
.cs-panel::-webkit-scrollbar { width: 10px; }
.cs-panel::-webkit-scrollbar-track { background: transparent; }
.cs-panel::-webkit-scrollbar-thumb { background: var(--bg-tint); border-radius: 999px; border: 3px solid #fff; }
.cs-panel::-webkit-scrollbar-thumb:hover { background: #f0d7da; }
.cs-panel { scrollbar-width: thin; scrollbar-color: var(--bg-tint) transparent; }

@media (prefers-reduced-motion: reduce) {
  .cs-panel, .cs-caret, .cs-option { transition: none; }
}

/* Backdrop shown behind the dropdown on mobile, when it becomes a bottom sheet */
.cs-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(43, 8, 12, 0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease);
}
.cs-backdrop.show { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .cs-backdrop { transition: none; }
}
/* Prevent the page from scrolling behind an open bottom sheet on mobile */
body.cs-sheet-lock { overflow: hidden; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-0.72rem); font-size: 0.74rem; color: var(--brand); font-weight: 700;
}
.form-note { font-size: 0.92rem; min-height: 1.2em; margin: 0; }
.form-note.success { color: #12805c; font-weight: 600; }
.form-note.error { color: #d33; font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #9fb2d6; padding: 64px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.12); }

/* Full-width horizontal map banner */
.footer-map-wrap { padding-top: 34px; }
.footer-map {
  display: block; position: relative;
  height: 340px;             /* fixed viewport we crop the map into */
  border-radius: 16px; overflow: hidden;   /* clips Google's UI chrome */
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
}
/* Oversize the iframe and shift it so Google's top info card and the whole
   bottom bar (Keyboard shortcuts / Map data / Terms / Report a map error /
   logo) fall outside the clipped container. */
.footer-map iframe {
  display: block; border: 0;
  position: absolute;
  top: -110px; left: -2%;
  width: 104%; height: calc(100% + 220px);
  filter: grayscale(0.35) contrast(1.05);
  transition: filter .3s ease;
  pointer-events: none;
}
.footer-map:hover iframe { filter: grayscale(0) contrast(1); }
.footer-map-addr {
  position: absolute; left: 16px; bottom: 16px;
  padding: 0.55rem 0.95rem;
  background: rgba(61,10,15,0.82); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.88rem; font-weight: 600; line-height: 1.3;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
}
.footer-lockup { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.footer-badge {
  width: 40px; height: 40px; flex: none;
  border-radius: 13px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
.footer-badge svg { width: 100%; height: 100%; display: block; }
.footer-logo { color: #fff; display: inline-block; margin-bottom: 0; }
.footer-brand p { font-size: 0.95rem; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
.footer-col a { display: block; color: #9fb2d6; font-size: 0.95rem; margin-bottom: 0.6rem; }
.footer-col a:hover { color: #fff; }
.footer-tag { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #cdd9f0; font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 999px; margin: 0 0.4rem 0.4rem 0; }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 22px; font-size: 0.85rem; color: #8397b8; }
.footer-legal p { margin: 0; color: #8397b8; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb, .pulse, .scroll-hint, .marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .about-grid { grid-template-columns: 1fr; gap: 70px; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .cov-cards { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-map { height: 240px; }
}

/* Collapse the nav to a hamburger earlier — 7 links + CTA + toggle won't fit
   on tablets / small laptops (especially at the 125% base zoom). */
@media (max-width: 1024px) {
  .nav-inner { justify-content: space-between; gap: 1rem; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .lang-toggle { margin-left: auto; }
  .menu {
    position: absolute; top: 72px; left: 0; right: 0; margin: 0;
    background: rgba(255,255,255,0.97); backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    flex-direction: column; gap: 0; padding: 8px 16px 20px;
    border: 1px solid var(--line); border-radius: 18px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
    box-shadow: var(--shadow);
  }
  .menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; opacity: 1; }
  .menu a:last-child { border-bottom: 0; }
  .menu a::before { display: none; }
  /* Dropdown panel is white even at the top of the hero, so force dark text */
  .nav:not(.scrolled) .menu a,
  .nav .menu a { color: var(--ink); text-shadow: none; opacity: 1; }
  .nav .menu a:hover, .nav .menu a.active { color: var(--brand); }
  .nav-toggle.open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .nav-inner { justify-content: space-between; gap: 1rem; }
  .lang-toggle { width: 36px; height: 36px; font-size: 0.72rem; margin-left: auto; }
  .menu a { font-size: 1.05rem; }
  .section { padding: 88px 0; }
  .field-row { grid-template-columns: 1fr; }
  .quote { width: 300px; }
  .slot-list { grid-template-columns: repeat(3, 1fr); }
  .cal-day { aspect-ratio: 1 / 1; }
  .footer-legal { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero { padding: 110px 0 0; }
  .why-grid, .footer-grid, .stats-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1; }
  /* keep large serif numbers from touching the edges */
  .stat-num { font-size: clamp(2.2rem, 12vw, 3rem); }
  .stats-grid { gap: 1.4rem; }
}

/* ============================================================
   Ambient backgrounds, texture & richer motion (additive)
   ============================================================ */

/* Make section stacking contexts safe for decorative layers */
.about, .why, .testimonials, .contact, .stats, .cta-band { position: relative; isolation: isolate; }
/* .contact needs to paint above .footer: the "What do you need to insure?"
   dropdown panel overflows past the section's bottom edge, and since .footer
   is a later sibling with its own stacking context (position: relative), it
   would otherwise render on top and hide the open dropdown behind it. */
.contact { z-index: 2; }
.about > .wrap, .why > .wrap, .testimonials > .wrap,
.contact > .wrap, .stats > .wrap { position: relative; z-index: 1; }

/* Soft dotted texture used on light sections */
.about::before, .why::before, .contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(214, 40, 40, 0.06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 55%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 55%, transparent 85%);
  opacity: 0.9;
}

/* Floating colour auras — soft blurred blobs that drift behind content */
.about::after, .why::after, .testimonials::after, .contact::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  filter: blur(90px); opacity: 0.4;
  background: radial-gradient(circle at 30% 30%, rgba(255, 90, 95, 0.55), transparent 70%);
  animation: aura-drift 22s ease-in-out infinite;
}
.about::after   { top: -120px; right: -90px; }
.why::after     { bottom: -160px; left: -110px; background: radial-gradient(circle at 30% 30%, rgba(184, 29, 58, 0.5), transparent 70%); animation-duration: 26s; }
.testimonials::after { top: -140px; left: 40%; background: radial-gradient(circle at 30% 30%, rgba(255, 138, 61, 0.4), transparent 70%); animation-duration: 30s; }
.contact::after { bottom: -140px; right: -80px; background: radial-gradient(circle at 30% 30%, rgba(224, 47, 75, 0.45), transparent 70%); animation-duration: 24s; }

@keyframes aura-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -24px) scale(1.12); }
}

/* Subtle grid texture on dark stats band */
.stats::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%);
}

/* Living sheen across the CTA band */
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: cta-sheen 7s ease-in-out infinite;
}
.cta-band > .wrap { position: relative; z-index: 1; }
@keyframes cta-sheen {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* ---------- Animated gradient text & accents ---------- */
.grad {
  background-size: 200% 200%;
  animation: grad-shift 8s ease infinite;
}
@keyframes grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Animated underline on nav links */
.menu a { position: relative; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.menu a:hover::after, .menu a.active::after { transform: scaleX(1); }

/* ---------- Richer reveal: fade + rise + slight blur & scale ---------- */
.reveal { filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in { filter: blur(0); }

/* ---------- Card & item hover polish ---------- */
.cov-front, .cov-back { transition: box-shadow .3s ease, transform .35s var(--ease); }
.why-item { position: relative; overflow: hidden; }
.why-item::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--grad); opacity: 0;
  transition: opacity .35s ease;
}
.why-item > * { position: relative; z-index: 1; }
.why-item:hover { border-color: transparent; }
.why-item:hover::before { opacity: 0.06; }
.why-ico { transition: transform .35s var(--ease); }
.why-item:hover .why-ico { transform: translateY(-3px) rotate(-6deg) scale(1.06); }

/* Quote cards lift a touch more with a warm ring on hover */
.quote { transition: transform .35s var(--ease), box-shadow .35s ease, border-color .3s ease; }
.quote:hover { border-color: var(--brand-2); }

/* Carrier logos get a gentle lift + full opacity on hover */
.marquee-track .logo-tile:hover img { transform: translateY(-4px) scale(1.06); opacity: 1; }

/* Buttons: soft glow pulse on primary + shine sweep on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease);
}
.btn-primary:hover::after { left: 130%; }

/* Chips / links micro-interaction */
.chip { transition: transform .22s var(--ease), color .2s ease, border-color .2s ease, box-shadow .25s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Pill hover ripple already exists; add gradient tint on active card pills */
.cov-pill:hover { box-shadow: 0 6px 14px rgba(214,40,40,0.14); }

/* Scroll hint gets a soft glowing ring */
.scroll-hint { box-shadow: 0 0 0 0 rgba(255,90,95,0.4); }

/* Respect reduced-motion: disable all the new ambient motion */
@media (prefers-reduced-motion: reduce) {
  .about::after, .why::after, .testimonials::after, .contact::after,
  .cta-band::after, .grad { animation: none !important; }
  .btn-primary::after, .menu a::after { transition: none; }
  .reveal { filter: none; transition: none; }
}

/* Animated gradient on the big feature panels (hero card avatar, about photo) */
.about-photo, .avatar, .toggle-slider {
  background-size: 180% 180%;
  animation: grad-shift 10s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .about-photo, .avatar, .toggle-slider { animation: none; }
}

/* ============================================================
   UNIQUE FLOATING NAV + ORNAMENTAL DESIGN SYSTEM
   ============================================================ */

/* ---- Floating capsule navigation ---- */
.nav {
  position: fixed;                   /* float over the hero */
  top: 14px; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding: 0 clamp(12px, 4vw, 40px);
  pointer-events: none;              /* let the inner capsule own the clicks */
}
.nav-inner {
  pointer-events: auto;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  height: 64px;
  padding: 0 10px 0 16px;
  border-radius: 999px;
  gap: 1rem;
  /* frosted glass */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 10px 30px rgba(79, 16, 22, 0.16),
    0 2px 8px rgba(79, 16, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), background .4s ease;
}

/* Gradient "aura" border drawn with a masked pseudo-element */
.nav-inner::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;                    /* border thickness */
  background: linear-gradient(120deg, #ff5a5f, #e02f4b 40%, #ff8a3d 70%, #ff5a5f);
  background-size: 250% 250%;
  animation: nav-border 9s ease infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes nav-border {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Subtle scroll-elevation: nav tightens when page is scrolled */
.nav.scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 16px 40px rgba(79, 16, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

/* ---- At the very top: hide only the capsule container; keep the elements ---- */
/* At the top (no .scrolled) the frosted capsule disappears —
   no background, border, or shadow — but the logo / menu / CTA stay visible. */
.nav:not(.scrolled) .nav-inner {
  background: transparent;
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav:not(.scrolled) .nav-inner::before {
  opacity: 0;               /* hide the gradient aura border of the capsule */
}
.nav-inner::before {
  transition: opacity .35s var(--ease);
}
/* Elements inside stay visible and interactive at all times */
.nav .nav-inner > * {
  opacity: 1;
  pointer-events: auto;
}

/* At the top the capsule is transparent over the dark hero,
   so switch the text to light for legibility. */
.nav:not(.scrolled) .logo,
.nav:not(.scrolled) .logo-text,
.nav:not(.scrolled) .menu a {
  color: #fff;
}
.nav:not(.scrolled) .logo-dim {
  color: rgba(255, 255, 255, 0.72);
}
.nav:not(.scrolled) .menu a {
  opacity: 0.92;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.nav:not(.scrolled) .menu a:hover,
.nav:not(.scrolled) .menu a.active {
  color: #fff;
  opacity: 1;
}
.nav .logo,
.nav .logo-text,
.nav .logo-dim,
.nav .menu a {
  transition: color .35s var(--ease), opacity .35s var(--ease);
}

/* ---- Gilded ornament beneath the nav at the very top; fades out on scroll ---- */
.nav-inner::after {
  content: "";
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 72%);
  height: 14px;
  pointer-events: none;
  background:
    /* center gilded diamond dot */
    radial-gradient(circle at 50% 50%, var(--gold-2) 0 3px, transparent 3.5px) 50% 50% / 100% 100% no-repeat,
    /* flanking hairline, faded away from the center dot */
    linear-gradient(90deg, transparent, rgba(224, 134, 62, 0.55) 24%, transparent 46%, transparent 54%, rgba(224, 134, 62, 0.55) 76%, transparent) 50% 50% / 100% 1px no-repeat;
  opacity: 0.85;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* On scroll the ornament smoothly disappears */
.nav.scrolled .nav-inner::after {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

/* Ornamental logo badge — gilded ring + diamond corner marks */
.logo-badge {
  position: relative;
  border-radius: 12px;
  overflow: visible;
}
.logo-badge::before {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, var(--gold-2), var(--gold)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.9;
  animation: badge-spin 12s linear infinite;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* Nav links: refined ornamental hover with a small diamond marker */
.menu a {
  padding: 0.4rem 0.2rem;
  transition: color .25s ease, opacity .25s ease;
}
.menu a::before {
  content: "";
  position: absolute; left: 50%; top: 1px;
  width: 5px; height: 5px;
  background: var(--brand-2);
  transform: translateX(-50%) rotate(45deg) scale(0);
  transition: transform .28s var(--ease);
  border-radius: 1px;
}
.menu a:hover::before, .menu a.active::before { transform: translateX(-50%) rotate(45deg) scale(1); }

/* CTA becomes a gradient pill with gilded edge */
.nav-cta {
  position: relative;
  background: var(--grad);
  box-shadow: 0 8px 20px rgba(224, 47, 75, 0.38);
  overflow: hidden;
}
.nav-cta::after {
  content: "";
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease);
}
.nav-cta:hover { background: var(--grad); transform: translateY(-1px); }
.nav-cta:hover::after { left: 140%; }

/* Circular EN / 中文 language toggle beside the CTA */
.lang-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid rgba(224, 134, 62, 0.6);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.lang-toggle .lang-label {
  line-height: 1;
  pointer-events: none;
}
.lang-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--gold-2);
  box-shadow: 0 6px 16px rgba(224, 134, 62, 0.28);
}
/* Chinese state — filled gilded look */
.lang-toggle[data-lang="cn"] {
  background: var(--grad-gold);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(224, 134, 62, 0.4);
}
/* At the very top the capsule is transparent, so lighten the toggle */
.nav:not(.scrolled) .lang-toggle[data-lang="en"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* Nav floats over the hero — no body offset needed */

/* Keep the collapsed dropdown anchored to the floating capsule */
@media (max-width: 1024px) {
  .menu {
    top: 72px;
    left: 0;
    right: 0;
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(79, 16, 22, 0.22);
    overflow: hidden;
  }
  .menu a::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-inner::before, .logo-badge::before { animation: none; }
}

/* ============================================================
   ORNAMENTAL FLOURISHES (site-wide)
   ============================================================ */

/* Eyebrow gets flanking gilded ticks — like a classic ornament */
.section-head .eyebrow, .about-copy .eyebrow, .contact-info .eyebrow {
  position: relative;
  padding: 0 0.2rem;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section-head .eyebrow::before { right: 100%; margin-right: 12px; transform: translateY(-50%) scaleX(-1); }
.section-head .eyebrow::after  { left: 100%;  margin-left: 12px; }

/* Ornamental divider under each centered section heading:
   a hairline flanking a rotated gilded diamond in the middle.
   The hairline (::before) does NOT rotate; only the diamond (::after) does. */
.section-head h2 { position: relative; padding-bottom: 26px; }
.section-head h2::before {
  content: "";
  position: absolute; left: 50%; bottom: 5px;
  transform: translateX(-50%);
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.7;
}
.section-head h2::after {
  content: "";
  position: absolute; left: 50%; bottom: 1px;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
}
/* hide the hairline directly behind the diamond so they don't overlap oddly */
.section-head h2::before { -webkit-mask: linear-gradient(90deg, #000 0 45%, transparent 45% 55%, #000 55% 100%); mask: linear-gradient(90deg, #000 0 45%, transparent 45% 55%, #000 55% 100%); }

/* Corner flourishes framing the coverage grid removed per request */
.cov-cards { position: relative; }

/* Gilded top-edge accent on light cards + quote cards */
.cov-front, .quote, .why-item, .form-panel, .hero-card {
  position: relative;
}
.cov-front::after,
.quote::after,
.form-panel::after {
  content: "";
  position: absolute; top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}
/* keep the feature (Commercial) card's own top accent brighter */
.cov-card-feature .cov-front::after { background: linear-gradient(90deg, transparent, var(--gold-2), transparent); opacity: 0.9; }

/* Ornamental quotation mark on testimonials */
.quote blockquote::before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 3.2rem; line-height: 0;
  color: var(--gold);
  opacity: 0.35;
  position: relative; top: 0.35em; margin-right: 0.05em;
}

/* Section-to-section ornamental separator (thin gilded scroll motif) */
/* Section-to-section separator ornament removed per request (the stray
   "half dot + line" motif between sections). */

/* Hero: add a faint ornamental corner frame inside the hero card */
.hero-card::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(224, 134, 62, 0.35);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}

/* Gilded double-rule flourish above the footer legal row */
.footer-legal { position: relative; }

/* CTA band: corner bracket ornaments removed per request */
.cta-inner { position: relative; }

@media (max-width: 640px) {
  .cov-cards::before, .cov-cards::after { display: none; }
}

/* Ensure every section can host its ornamental separator */
.section { position: relative; }

/* ============================================================
   RICHER GOLD ORNAMENTS + BACKGROUND DETAIL (additive, v2)
   ============================================================ */

/* ---- Gold damask/wallpaper texture behind light sections ---- */
.about > .wrap, .why > .wrap, .contact > .wrap, .testimonials > .wrap { position: relative; z-index: 2; }

/* A repeating ornamental motif drawn as an inline SVG data-URI.
   Very low opacity so it reads as a subtle gilded wallpaper. */
.about, .why, .testimonials, .contact {
  --ornament: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<g fill='none' stroke='%23e0863e' stroke-width='1.1' opacity='0.6'>\
<path d='M60 12c10 12 10 24 0 34-10-10-10-22 0-34z'/>\
<path d='M60 108c10-12 10-24 0-34-10 10-10 22 0 34z'/>\
<path d='M12 60c12 10 24 10 34 0-10-10-22-10-34 0z'/>\
<path d='M108 60c-12 10-24 10-34 0 10-10 22-10 34 0z'/>\
<circle cx='60' cy='60' r='4'/>\
<circle cx='60' cy='60' r='11'/>\
</g></svg>");
}
.about::before, .why::before, .contact::before {
  /* was a plain dot texture; layer the gold motif on top of it */
  background-image:
    var(--ornament),
    radial-gradient(rgba(214, 40, 40, 0.05) 1px, transparent 1.4px);
  background-size: 120px 120px, 26px 26px;
  opacity: 0.5;
}
/* testimonials had no ::before texture — give it one now */
.testimonials::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--ornament);
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 82%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 82%);
  opacity: 0.4;
}

/* ---- Gold corner filigree framing every centered section head ---- */
/* Gold corner filigree framing section heads removed per request */
.section-head { position: relative; }

/* ---- Gilded frame around the about photo ---- */
.about-photo { position: relative; }
.about-photo::before {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(242, 160, 92, 0.55);
  border-radius: calc(var(--radius-lg) - 10px);
}
.about-photo::after {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border-radius: calc(var(--radius-lg) - 10px);
  background:
    linear-gradient(var(--gold), var(--gold)) left 10px top -1px / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right 10px bottom -1px / 26px 2px no-repeat;
  opacity: 0.85;
}

/* ---- Gold divider flourish above the footer legal row ---- */
.footer-legal::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 12px;
  background:
    radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px) 50% 50% / 14px 12px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: 0.5;
}

/* Corner filigree framing the hero removed per request */
.hero { }

/* ---- Gilded sparkle accents scattered subtly (decorative) ---- */
.why-ico::after, .cov-icon::after {
  content: "";
  position: absolute; top: -6px; right: -6px;
  width: 10px; height: 10px;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) center / 100% 2px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) center / 2px 100% no-repeat;
  opacity: 0; transform: scale(0.6) rotate(0deg);
  transition: opacity .3s ease, transform .4s var(--ease);
}
.why-ico, .cov-icon { position: relative; }
.why-item:hover .why-ico::after,
.cov-card:hover .cov-icon::after { opacity: 0.9; transform: scale(1) rotate(90deg); }

/* ---- Warm gold radial glow layered into dark bands ---- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -160px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 320px; border-radius: 50%;
  filter: blur(80px); opacity: 0.16;
  background: radial-gradient(circle, var(--gold), transparent 70%);
}
.footer > * { position: relative; z-index: 1; }

/* Hero gets an extra warm gold aura in the mix */
.hero .orb-3 { background: #f2c15c; }




/* ============================================================
   Stats now live at the bottom of the full-height hero
   ============================================================ */
.hero .stats {
  background: transparent;
  padding: clamp(20px, 4vh, 40px) 0 clamp(28px, 5vh, 48px);
  margin-top: auto;               /* pin the counters to the bottom of the hero */
  width: 100%;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* soft gilded hairline accent above the counters */
.hero .stats::before {
  content: "";
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(320px, 70%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.7;
}
.hero .stat-num  { color: #fff; }
.hero .stat-label { color: #d9b8bd; }

/* Scroll hint sits clearly in the hero, above the stats band seam */
.hero .scroll-hint { bottom: clamp(140px, 20vh, 210px); }

/* On short screens, let the hero grow instead of squishing content */
@media (max-height: 720px) {
  .hero { min-height: auto; padding-top: clamp(96px, 14vh, 150px); padding-bottom: 12px; }
  .hero .scroll-hint { display: none; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero .scroll-hint { display: none; }
  .hero .stats { margin-top: 32px; }
}

/* ============================================================
   About copy legibility — lift text off the ornament pattern
   ============================================================ */
.about-copy p {
  color: #3a2a2c;                      /* darker than --body for stronger contrast */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);  /* soft halo so text pops off the pattern */
}
.about-copy h2 {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}
/* Fade the wallpaper ornament a touch more behind the about copy so text stays crisp */
.about::before { opacity: 0.32; }

/* ============================================================
   About media — deeper shadows so the card & badge lift off the page
   ============================================================ */
.about-photo {
  box-shadow:
    0 40px 80px rgba(79, 16, 22, 0.32),
    0 16px 32px rgba(79, 16, 22, 0.22),
    0 4px 10px rgba(79, 16, 22, 0.14);
}
/* subtle text shadow inside the red card so the white text reads crisply */
.about-photo .ap-name,
.about-photo .ap-role,
.about-photo .avatar-lg {
  text-shadow: 0 2px 8px rgba(61, 10, 15, 0.45);
}
.about-photo .avatar-lg {
  box-shadow: 0 10px 24px rgba(61, 10, 15, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.about-badge {
  box-shadow:
    0 24px 50px rgba(79, 16, 22, 0.28),
    0 8px 18px rgba(79, 16, 22, 0.18);
}
.about-links .chip {
  box-shadow: 0 8px 20px rgba(79, 16, 22, 0.16);
}

/* ============================================================
   Contact section — deeper shadows + legibility over the pattern
   ============================================================ */
.form-panel {
  box-shadow:
    0 44px 90px rgba(79, 16, 22, 0.30),
    0 18px 36px rgba(79, 16, 22, 0.20),
    0 4px 12px rgba(79, 16, 22, 0.12);
}
/* contact icons lift off the pattern */
.contact-list .ci-ico {
  box-shadow: 0 10px 24px rgba(79, 16, 22, 0.18);
}
/* contact info text: darker + soft white halo so it reads over the gold motif */
.contact-info h2,
.contact-info .section-sub,
.contact-list a,
.contact-list .ci-label {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}
.contact-info .section-sub { color: #4a3436; }
.contact-list a { color: #2a1416; }
/* fade the wallpaper ornament a bit behind the contact copy */
.contact::before { opacity: 0.3; }

/* ============================================================
   Contact icon pins — stronger fill so they read over the pattern
   ============================================================ */
.contact-list .ci-ico {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 26px rgba(214, 40, 40, 0.35);
}

/* ============================================================
   SVG icon sizing (replacing former emoji glyphs)
   ============================================================ */
.why-ico svg { width: 26px; height: 26px; color: var(--brand); }
.contact-list .ci-ico svg { width: 22px; height: 22px; }

/* inline icon inside the hero phone button */
.btn .btn-ico { width: 18px; height: 18px; flex: none; }

/* pin icon inside the footer map address pill */
.footer-map-addr { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-map-addr .addr-ico { width: 15px; height: 15px; flex: none; }

/* ---------- Design switcher (demo only) ---------- */
.switcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  display: flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff;
  padding: 8px 10px; border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.switcher-label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .7; margin-right: 2px;
}
.switcher .sw {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; color: #f0d9b5; font-weight: 700; font-size: .9rem;
}
.switcher .sw:hover { background: rgba(255,255,255,.14); color: #fff; }
.switcher .sw.active { background: var(--gold); color: var(--navy); }

/* ============================================================
   MOBILE RESPONSIVENESS PASS (Design 3)
   Fixes: layout-widening decorations, 125% base zoom on phones,
   oversized hero/buttons/stats, and safe overflow clipping.
   ============================================================ */

/* 1) Stop decorative absolutely-positioned layers from widening the
      layout viewport on mobile (root cause of horizontal scroll / zoom-out).
      overflow-x:hidden alone is not enough because the mobile layout
      viewport still expands to the widest painted element. Clip at the
      section level and rein in the blurred auras. */
@media (max-width: 1024px) {
  html, body { overflow-x: clip; }
  .hero, .about, .why, .testimonials, .contact, .cta-band, .stats,
  .carriers, main, footer { overflow-x: clip; }

  /* Blurred colour auras: keep them inside the viewport */
  .about::after, .why::after, .testimonials::after, .contact::after {
    width: 300px; height: 300px; filter: blur(70px);
  }
  .about::after   { right: -40px; }
  .why::after     { left: -50px; }
  .testimonials::after { left: 20%; }
  .contact::after { right: -30px; }

  /* Hero orbs shrink so they don't spill past the edges */
  .orb-1 { width: 260px; height: 260px; right: -60px; }
  .orb-2 { width: 220px; height: 220px; left: -50px; }
  .orb-3 { width: 180px; height: 180px; }
}

/* 2) Phones: drop the baked-in 125% zoom so rem sizing is phone-appropriate. */
@media (max-width: 760px) {
  html { font-size: 106.25%; }          /* ~17px base instead of 20px */

  .wrap { padding: 0 18px; }

  /* Hero: comfortable stacked layout */
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-sub { font-size: 1.02rem; max-width: none; }
  .hero-card { padding: 22px; }

  /* CTA buttons stack full-width and stay tappable (>=44px tall) */
  .hero-cta { gap: 0.7rem; }
  .hero-cta .btn { width: 100%; justify-content: center; padding: 0.95rem 1.2rem; }

  /* Trust row wraps cleanly */
  .hero-trust { gap: 1rem 1.6rem; }

  /* Stats: 2-up grid reads better than cramped 4-up */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}

/* 3) Small phones */
@media (max-width: 430px) {
  html { font-size: 100%; }             /* 16px base */
  .wrap { padding: 0 16px; }
  .hero h1 { font-size: clamp(2rem, 10vw, 2.6rem); }
  .stat-num { font-size: clamp(2rem, 11vw, 2.6rem); }
  .section { padding: 64px 0; }

  /* Shrink the demo design switcher so it doesn't crowd the corner */
  .switcher { right: 10px; bottom: 10px; padding: 6px 8px; gap: 4px; }
  .switcher .sw { width: 26px; height: 26px; font-size: .82rem; }
  .switcher-label { display: none; }
}

/* ============================================================
   MOBILE READINESS PASS 2 (Design 3) — component-level fixes
   Builds on the earlier pass: testimonials, carriers marquee,
   mobile menu alignment, touch targets, booking calendar,
   contact/footer polish, and landscape phones.
   ============================================================ */

/* --- Mobile menu: align the dropdown with the 64px floating capsule
       (was anchored at 72px) and respect notch safe areas. --- */
@media (max-width: 1024px) {
  /* Anchor the collapsed dropdown to the 64px floating capsule + safe areas. */
  .nav .menu {
    top: calc(64px + 14px + 8px);      /* capsule height + top offset + gap */
    left: clamp(12px, 4vw, 40px);
    right: clamp(12px, 4vw, 40px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
  }

  /* Closed state — force it with a higher-specificity selector so no earlier
     .menu rule can leave it visible. This is the fix for the menu that was
     "always open" on mobile. */
  .nav .menu:not(.open) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    visibility: hidden;
  }
  /* Open state wins over the closed rule above. */
  .nav .menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  /* Bigger, easier tap targets in the open menu */
  .menu a { padding: 1rem 0.4rem; }

  /* Legibility: the dropdown panel is white, but the "not scrolled" hero
     styles force white text + a glow shadow on the links, which made them
     nearly invisible and blurry inside the panel. Force dark, sharp text. */
  .nav .menu a,
  .nav:not(.scrolled) .menu a {
    color: var(--ink);
    opacity: 1;
    text-shadow: none;
  }
  .nav .menu a:hover,
  .nav .menu a.active,
  .nav:not(.scrolled) .menu a:hover,
  .nav:not(.scrolled) .menu a.active {
    color: var(--brand);
    opacity: 1;
  }
}

/* --- Tablet band (761–1024px still runs at the 125% base zoom):
       give the coverage + why grids a comfortable 2-up layout. --- */
@media (max-width: 1024px) and (min-width: 761px) {
  .cov-cards { grid-template-columns: 1fr 1fr; }
}

/* --- Phones: component sizing --- */
@media (max-width: 760px) {
  /* Testimonials: cards scale to the viewport instead of a fixed 300px,
     and tap pauses the auto-scroll (hover doesn't exist on touch). */
  .quote { width: min(84vw, 340px); padding: 24px 22px; }
  .tcarousel-track:active { animation-play-state: paused; }

  /* Carriers marquee: smaller logos + tighter gap so the strip reads well */
  .marquee-track { gap: 40px; }
  .marquee-track .logo-tile img,
  .marquee-track .logo-tile.logo-svg svg { height: calc(38px * var(--s, 1)); max-width: 180px; }

  /* Coverage flip cards: shorter min-height on phones */
  .cov-inner { min-height: 340px; }
  .cov-front, .cov-back { padding: 34px 28px; }

  /* Touch targets: keep interactive controls >= 44px tall */
  .cov-pill { min-height: 40px; }
  .faq-q { padding: 20px 20px; }
  .faq-a-inner p { padding: 0 20px 22px; }
  .cs-trigger { padding: 1rem; min-height: 48px; }
  .cs-option { min-height: 44px; }

  /* Custom dropdown becomes a bottom sheet on phones: pinned to the bottom
     of the viewport, full width, rounded top corners, with a drag-handle
     affordance instead of floating below the trigger like a desktop menu. */
  .cs-panel {
    position: fixed; z-index: 50;
    top: auto; left: 0; right: 0; bottom: 0;
    max-height: 72vh;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--line); border-bottom: 0;
    box-shadow: 0 -12px 40px rgba(79,16,22,0.22);
    padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
    opacity: 0; transform: translateY(100%);
    transform-origin: bottom center;
    transition: opacity .26s var(--ease), transform .32s var(--ease);
  }
  /* The open state is matched two ways: `.cs.open .cs-panel` for the normal
     nested case, and `.cs-panel.open` for when JS "ports" the panel out to
     a direct child of <body> (see script.js) so `position: fixed` truly
     pins to the viewport instead of a blurred/transformed ancestor. */
  .cs.open .cs-panel, .cs-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  /* Drag-handle affordance at the top of the sheet */
  .cs-panel::before {
    content: ""; display: block; margin: 2px auto 10px;
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--line); flex: none;
  }
  .cs-group-label { margin: 6px 12px 6px; }
  .cs-option { min-height: 48px; font-size: 1rem; }

  /* Contact form panel: trim padding so inputs get more room */
  .form-panel { padding: 24px 20px; }
  .cta-inner p { font-size: 1.05rem; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* Booking calendar / slots fit a narrow screen */
  .cal { padding: 18px 16px; }
  .slot-list { grid-template-columns: repeat(2, 1fr); }
}

/* --- Small phones --- */
@media (max-width: 430px) {
  .quote { width: 86vw; }
  .marquee-track { gap: 32px; }
  .marquee-track .logo-tile img,
  .marquee-track .logo-tile.logo-svg svg { height: calc(34px * var(--s, 1)); max-width: 150px; }

  /* Section headings breathe less on tiny screens */
  .section-head { margin-bottom: 44px; }

  /* Footer: stack legal + tighten map */
  .footer-map { height: 200px; }
  .footer-legal { gap: 0.4rem; }

  /* CTA band a touch tighter */
  .cta-band { padding: 60px 0; }
}

/* --- Landscape phones (short viewports): let the hero size to content
       instead of forcing full-height, and drop the scroll hint. --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 96px 0 48px; }
  .scroll-hint { display: none; }
}

/* ============================================================
   CARRIERS MARQUEE — MOBILE IMAGE FIX (Design 3)
   ------------------------------------------------------------
   Some phones rendered the white-background JPG logos (Chubb,
   Lloyd's) as blank. Root cause: `mix-blend-mode: multiply`
   fails on many mobile GPUs when the element sits inside the
   marquee's -webkit-mask-image group while the track animates,
   collapsing the blended layer to nothing.

   Fix: stop depending on blend mode for visibility. Give the
   on-white logos a real white rounded card so they read cleanly
   on every device, and keep multiply only as a progressive
   enhancement on pointer (desktop) devices.
   ============================================================ */

/* Default: on-white JPG logos sit on their own white pill — no blend needed. */
.marquee-track .logo-tile.on-white {
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.08);
}
.marquee-track .logo-tile.on-white img {
  mix-blend-mode: normal;   /* override the earlier multiply so it can't blank out */
  opacity: 1;
}

/* Progressive enhancement: only re-enable the seamless multiply blend on
   devices that use a fine pointer (desktops), where it renders reliably. */
@media (hover: hover) and (pointer: fine) {
  .marquee-track .logo-tile.on-white {
    background: none;
    padding: 0;
    box-shadow: none;
  }
  .marquee-track .logo-tile.on-white img { mix-blend-mode: multiply; }
}

/* Belt-and-suspenders for touch phones: guarantee full opacity and normal
   blending on the whole strip so no logo can render invisible. */
@media (max-width: 760px) {
  .marquee-track .logo-tile img,
  .marquee-track .logo-tile.logo-svg svg { opacity: 1; }
  .marquee-track .logo-tile img { mix-blend-mode: normal; }
  .marquee-track .logo-tile.on-white {
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
  }
}

/* ============================================================
   FOOTER — MOBILE POLISH (Design 3)
   ------------------------------------------------------------
   Cleans up the phone footer: even spacing rhythm, a tidy
   single-column stack, a properly sized map with a readable
   address pill, and a legal row that clears the gold dotted
   divider instead of colliding with it.
   ============================================================ */
@media (max-width: 760px) {
  .footer { padding: 48px 0 28px; text-align: left; }

  /* Single, evenly spaced column stack. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 30px;
  }

  /* Brand block reads as the header of the stack. */
  .footer-brand p { max-width: none; font-size: 1rem; line-height: 1.6; }

  /* Column headings: a touch more separation from their links. */
  .footer-col h4 {
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
  }
  .footer-col a {
    font-size: 1rem;
    margin-bottom: 0.55rem;
    padding: 2px 0;              /* larger tap target */
  }

  /* Licensed-in tags wrap cleanly on their own line. */
  .footer-col:last-child { display: flex; flex-direction: column; }
  .footer-tag { font-size: 0.85rem; padding: 0.4rem 0.9rem; }

  /* Map: comfortable height, rounded, with the address pill anchored inside. */
  .footer-map-wrap { padding-top: 8px; }
  .footer-map {
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
  }
  /* The desktop crop lifts the iframe 110px to hide Google's chrome, but on a
     short mobile map that pushed the visible slice onto empty map margin. Use a
     gentler crop so the pin + streets stay centered in view. */
  .footer-map iframe {
    top: -70px; left: -3%;
    width: 106%; height: calc(100% + 150px);
  }
  /* Compact address pill: hugs its text (no full-width bar), smaller type,
     tighter padding, and a smaller pin icon. */
  .footer-map-addr {
    left: 10px; right: auto; bottom: 10px;
    max-width: calc(100% - 20px);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    padding: 0.4rem 0.7rem;
    gap: 0.3rem;
    text-align: left;
  }
  .footer-map-addr .addr-ico { width: 12px; height: 12px; }

  /* Legal row: stacked, centered, and pushed clear of the gold dotted
     divider so the copyright never overlaps it. */
  .footer-legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding-top: 34px;
    margin-top: 20px;
    font-size: 0.82rem;
    line-height: 1.5;
  }
  .footer-legal p { max-width: 34ch; }
}

/* Extra-small phones: keep the same tidy stack, just a hair tighter. */
@media (max-width: 430px) {
  .footer { padding: 44px 0 26px; }
  .footer-grid { gap: 30px; }
  .footer-map { height: 200px; }
}

/* ============================================================
   CONTACT / QUOTE FORM — MOBILE OPTIMIZATION (Design 3)
   ------------------------------------------------------------
   Smart, fluid scaling for the request/appointment form on any
   phone: a toggle that never overflows, comfortable touch
   targets, and inputs sized to stop iOS from auto-zooming on
   focus. Everything uses clamp()/fluid units so it adapts from
   the smallest phones up to tablets.
   ============================================================ */
@media (max-width: 760px) {
  /* Panel padding scales with the viewport instead of a fixed value. */
  .form-panel { padding: clamp(18px, 5vw, 28px); }

  /* Request/Appointment toggle: two equal, centered cells that hold their
     wrapping labels neatly inside the pill. Taller so wrapped text has room. */
  .form-toggle { padding: 4px; }
  .toggle-btn { padding: 0.65rem 0.4rem; min-height: 46px; }

  /* Fields: 16px input text prevents iOS Safari from zooming in on focus —
     the single most common "form not optimized" complaint on mobile. */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
    padding: 1.4rem 0.95rem 0.6rem;
  }
  .field textarea { min-height: 120px; }
  .field label { font-size: 16px; top: 1.15rem; }
  /* Keep the floated (active) label small so it sits above the value. */
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
    font-size: 0.72rem;
  }

  /* Email + phone stack on phones (already 1fr at <=760 elsewhere) — confirm. */
  .field-row { grid-template-columns: 1fr; gap: 0.9rem; }

  /* Custom insurance-type dropdown: comfortable tap height + 16px text. */
  .cs-trigger { min-height: 52px; font-size: 16px; }
  .cs-value { font-size: 16px; }
  /* Sheet mode already caps height at 72vh (see the bottom-sheet rules
     above) — don't re-shrink it here to 45vh. */

  /* Send button: full width, solid tap target. */
  .form .btn,
  .form .btn-primary { width: 100%; min-height: 52px; justify-content: center; }
}

/* Very small phones: shrink the toggle type a touch more so the long
   "Schedule an Appointment" label stays on as few lines as possible. */
@media (max-width: 380px) {
  .toggle-btn { font-size: clamp(0.68rem, 3.4vw, 0.8rem); }
}

/* ============================================================
   ABOUT CARD — MOBILE (Design 3)
   Give the red "NOLA Insurance Agency LLC" card a little more
   inner width on phones so the fluid name never has to wrap.
   ============================================================ */
@media (max-width: 760px) {
  .about-photo { padding: 40px clamp(16px, 5vw, 28px); }
}