/* Laundry Wash & Fold Pickup - single-page site */

:root {
  --navy: #0f2a4a;
  --navy-deep: #091d35;
  --cobalt: #2457e6;
  --cobalt-dark: #1b45bd;
  --powder: #e9f1fb;
  --powder-deep: #d6e5f7;
  --paper: #ffffff;
  --ink: #1b2430;
  --ink-soft: #55606e;
  --line: #d9e0e8;
  --tag: #ffd166;
  --ok: #1a8a5c;
  --ok-bg: #e6f6ee;
  --warn: #b4542a;
  --warn-bg: #fdf0e8;
  --bg: #ffffff;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --gutter: clamp(16px, 5vw, 64px);
  --maxw: 1180px;
  --shadow: 0 18px 40px -24px rgba(15, 42, 74, 0.35);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; color-scheme: light only; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); color: var(--navy); margin: 0 0 12px; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); font-weight: 800; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 12px; }
a { color: var(--cobalt); }
em { font-style: normal; color: var(--cobalt); }

.eyebrow {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 10px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 999px;
  font: 600 1rem var(--body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background .15s, transform .15s;
}
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-sm { padding: 10px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; margin-top: 14px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--tag); outline-offset: 2px;
}

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px 8px 12px 12px;
  background: linear-gradient(180deg, var(--cobalt) 0 55%, var(--tag) 55% 100%);
  position: relative;
}
.brand-mark::after { content: ""; position: absolute; left: 9px; right: 9px; top: -6px; height: 8px; border: 3px solid var(--cobalt); border-bottom: 0; border-radius: 8px 8px 0 0; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--navy); margin: 0; }
.topnav { display: flex; gap: 22px; margin-left: auto; }
.topbar-contact { color: var(--navy); font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.topbar-contact::before { content: "💬 "; }
@media (max-width: 820px) { .topbar-contact { display: none; } }
.topnav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.topnav a:hover { color: var(--navy); }
@media (max-width: 820px) { .topnav { display: none; } .topbar .btn { margin-left: auto; } }

/* Layout */
main { display: block; }
.section { padding: clamp(64px, 9vw, 120px) var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
.section-tint { max-width: none; background: var(--powder); }
.section-tint > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-tint .section-head { margin-left: 0; }
.section-lede { color: var(--ink-soft); font-size: 1.08rem; }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 560px; margin: 18px 0 28px; }
.zipcheck label { display: block; font-weight: 600; margin-bottom: 8px; }
.zipcheck-row { display: flex; gap: 10px; max-width: 520px; }
.zipcheck input {
  flex: 1; min-width: 0; padding: 14px 16px; font: 500 1.1rem var(--body);
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  letter-spacing: 0.06em;
}
.zipcheck-result { margin-top: 12px; min-height: 1.5em; font-weight: 500; max-width: 520px; }
.zipcheck-result.ok { color: var(--ok); }
.zipcheck-result.warn { color: var(--warn); }
.trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-soft); font-size: 0.95rem; }
.trust li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.contact-note { margin: 18px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.contact-note a { font-weight: 600; }
.guardrails { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guardrails li { background: var(--paper); border-left: 4px solid var(--tag); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.95rem; color: var(--ink-soft); }
.guardrails strong { color: var(--navy); display: block; margin-bottom: 2px; }
@media (max-width: 860px) { .guardrails { grid-template-columns: 1fr; } }
.ticket-rules { font-size: 0.8rem; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }
.footer-contact-lead { color: var(--navy); font-weight: 600; margin: 14px 0 4px; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-ticket { max-width: 420px; }
  .zipcheck-row { flex-direction: column; }
}

/* The ticket - signature element */
.ticket {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: -1px; right: -1px; height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--bg) 4px, transparent 4.5px) left top / 14px 10px repeat-x;
}
.ticket::before { top: -1px; }
.ticket::after { bottom: -1px; transform: scaleY(-1); }
.ticket-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem;
  padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px;
}
.ticket-no { background: var(--tag); color: #3b2a00; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.05em; }
.ticket-lines { margin: 0; }
.ticket-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ticket-lines dt { color: var(--ink-soft); }
.ticket-lines dd { margin: 0; font-weight: 600; }
.ticket-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.ticket-total strong { font-family: var(--display); font-size: 2rem; color: var(--navy); font-weight: 800; }
.ticket-note { font-size: 0.85rem; color: var(--ink-soft); margin: 14px 0 0; }
.hero-ticket { transform: rotate(-1.5deg); }
.value-big { font-family: var(--display); font-weight: 800; font-size: 3rem; color: var(--navy); margin: 4px 0 4px; line-height: 1; }
.value-big span { font-size: 1.1rem; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }
.value-sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 10px; }
.value-sub strong { color: var(--navy); }
.ticket-lines dd s { color: var(--ink-soft); font-weight: 400; margin-right: 4px; }
.ticket-per { font-size: 0.88rem; color: var(--ok); font-weight: 600; margin: 8px 0 0; }
.calc-first { margin-top: 4px; color: var(--ink); }
.compare { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-top: 20px; }
.compare > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; }
.compare-us { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.compare-us .eyebrow { color: var(--ok); }
.compare-them .eyebrow { color: var(--ink-soft); }
.compare ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.compare li { margin-bottom: 8px; }
.compare-us li::marker { color: var(--ok); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-ticket { animation: settle .6s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes settle { from { opacity: 0; transform: rotate(-4deg) translateY(16px); } to { opacity: 1; transform: rotate(-1.5deg) translateY(0); } }
}

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; }
.steps li p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
.step-n {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--navy); color: #fff; font: 800 1.1rem var(--display); margin-bottom: 16px;
}
.steps li:nth-child(2) .step-n { background: var(--tag); color: #3b2a00; }
.steps li:nth-child(2) { border-color: var(--tag); }
.steps li:nth-child(2)::after { content: "your part"; position: absolute; top: 24px; right: 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6400; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.price-big { font-family: var(--display); font-weight: 800; font-size: 2.6rem; color: var(--navy); margin: 0 0 6px; line-height: 1; }
.price-big span { font-size: 1rem; font-weight: 600; color: var(--ink-soft); margin-left: 2px; }
.price-sub { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
@media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } }

.calc { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 40px); }
.calc-controls p { color: var(--ink-soft); }
.calc-hint { font-size: 0.9rem; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0 12px; }
.stepper button { width: 52px; height: 52px; border: 0; background: var(--powder); color: var(--navy); font-size: 1.5rem; cursor: pointer; }
.stepper button:hover { background: var(--powder-deep); }
.stepper output { min-width: 80px; text-align: center; font: 800 1.8rem var(--display); color: var(--navy); }
.calc .ticket { box-shadow: none; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* Accept / don't accept */
.accept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.accept { border-radius: var(--radius); padding: 26px 28px; border: 1px solid var(--line); }
.accept.yes { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.accept.no { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.accept h3 { margin-bottom: 12px; }
.accept.yes h3 { color: var(--ok); }
.accept.no h3 { color: var(--warn); }
.accept ul { margin: 0; padding-left: 20px; }
.accept li { margin-bottom: 8px; }
.policy-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; font-size: 0.95rem; color: var(--ink-soft); }
.policy-strip div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.policy-strip strong { color: var(--navy); display: block; margin-bottom: 4px; }
@media (max-width: 860px) { .accept-grid { grid-template-columns: 1fr; } .policy-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .policy-strip { grid-template-columns: 1fr; } }

/* Service area */
.flex-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.flex-strip div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.flex-strip strong { font-family: var(--display); font-size: 1.15rem; color: var(--navy); }
.flex-strip span { color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 860px) { .flex-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .flex-strip { grid-template-columns: 1fr; } }
.cities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.zone { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.zone-day { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--navy); margin: 0; }
.zone-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin: 0 0 10px; }
.zone ul { list-style: none; margin: 0; padding: 0; color: var(--ink-soft); font-size: 0.95rem; }
.zone li { padding: 3px 0; }
@media (max-width: 1000px) { .cities { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cities { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .cities { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--cobalt); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-soft); margin: 0 0 16px; max-width: 680px; }

/* Booking */
.section-book { background: var(--navy-deep); color: #e8eef6; max-width: none; }
.section-book > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section-book .eyebrow { color: var(--tag); }
.section-book h2 { color: #fff; }
.section-book .section-lede { color: #b9c6d8; }
.booking { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field label span { font-weight: 400; color: #b9c6d8; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font: 500 1rem var(--body);
  border: 1.5px solid #2c4569; border-radius: var(--radius-sm); background: #0f2440; color: #fff;
}
.field input::placeholder { color: #7d8fa8; }
.field input:invalid:not(:placeholder-shown):not(:focus) { border-color: #e39a7a; }
.field-help { font-size: 0.85rem; margin: 0; min-height: 1.2em; color: #b9c6d8; }
.field-help.ok { color: #7fe0b3; }
.field-help.warn { color: #ffb38a; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 0.95rem; color: #d7e0ec; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--cobalt); }
.booking-ticket { position: sticky; top: 84px; --paper: #ffffff; --ink: #1b2430; --ink-soft: #55606e; --navy: #0f2a4a; --line: #d9e0e8; --bg: #091d35; color: #1b2430; }
.booking-ticket.busy { opacity: 0.7; pointer-events: none; }
@media (max-width: 900px) { .booking { grid-template-columns: 1fr; } .booking-ticket { position: static; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* Footer */
.footer { padding: 48px var(--gutter) 32px; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; color: var(--ink-soft); font-size: 0.95rem; }
.footer .brand-name { margin-bottom: 8px; }
.footer-cities p:last-child { line-height: 1.8; }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; font-size: 0.85rem; }
@media (max-width: 720px) { .footer { grid-template-columns: 1fr; } }


/* Business accounts */
.biz-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto; padding: 20px 26px;
  background: var(--navy); color: #e8eef6; border-radius: var(--radius); text-decoration: none;
  transform: translateY(-36px);
}
.biz-banner strong { color: #fff; }
.biz-banner-link { font-weight: 700; color: var(--tag); white-space: nowrap; }
.biz-banner:hover .biz-banner-link { text-decoration: underline; }
@media (max-width: 1240px) { .biz-banner { margin-left: var(--gutter); margin-right: var(--gutter); } }
.biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.biz-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; border-top: 4px solid var(--cobalt); }
.biz-card p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
.biz-also { color: var(--ink-soft); font-size: 0.95rem; margin: 16px 0 40px; max-width: 760px; }
.biz-how { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; margin-bottom: 40px; }
.biz-steps ol { padding-left: 20px; margin: 0; color: var(--ink-soft); }
.biz-steps li { margin-bottom: 12px; }
.biz-steps strong { color: var(--navy); }
.biz-form { background: var(--powder); border-radius: var(--radius); padding: clamp(20px, 4vw, 36px); }
.biz-form h3 { margin-bottom: 4px; }
.biz-form-lede { color: var(--ink-soft); margin-bottom: 20px; }
.biz-form .field input, .biz-form .field select, .biz-form .field textarea { background: var(--paper); color: var(--ink); border-color: var(--line); }
.biz-form .field label span { color: var(--ink-soft); }
.biz-form .field-help { color: var(--ink-soft); }
.biz-form .field-help.ok { color: var(--ok); }
.biz-form .field-help.warn { color: var(--warn); }
.biz-form .btn { margin-top: 18px; }
.biz-form .ticket-note { margin-top: 12px; }
@media (max-width: 1000px) { .biz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .biz-how { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .biz-grid { grid-template-columns: 1fr; } }


/* Designed for */
.designed { padding-top: 0; }
.designed .section-head { margin-bottom: 24px; }
.designed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.designed-list li { background: var(--powder); color: var(--navy); font-weight: 600; font-size: 0.95rem; padding: 10px 16px; border-radius: 999px; }
.designed-biz { margin: 28px 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.designed-biz a { font-weight: 600; }


/* Airy pass */
.hero-points { list-style: none; padding: 0; margin: 20px 0 30px; display: grid; gap: 8px; color: var(--ink-soft); font-size: 1.1rem; }
.hero-points li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); margin-right: 12px; vertical-align: middle; }
.trust li { font-size: 0.9rem; }
.hero-ticket .ticket-lines { margin-top: 6px; }
.steps li { border: 0; background: transparent; padding: 0 8px 0 0; }
.steps li p { font-size: 1rem; }
.steps li:nth-child(2) { border: 0; }
.steps li:nth-child(2)::after { right: auto; left: 52px; top: 8px; }
.steps li:nth-child(2) .step-n { margin-right: 80px; }
.price-card { padding: 28px 26px; }
.price-points { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.98rem; }
.price-points li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.calc-controls .stepper { margin-top: 12px; }
.policy-line { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; color: var(--ink-soft); font-size: 0.95rem; }
.policy-line strong { color: var(--navy); }
@media (max-width: 720px) { .policy-line { grid-template-columns: 1fr; } }
.accept { padding: 24px 26px; }
.accept li { margin-bottom: 6px; }
.faq summary { padding: 18px 0; }
.footer { grid-template-columns: 1.1fr 1fr; padding-top: 56px; }
.footer-links .eyebrow { margin: 18px 0 6px; }
.footer-links .eyebrow:first-child { margin-top: 0; }
.footer-cities-toggle summary { cursor: pointer; color: var(--cobalt); font-weight: 600; list-style: none; }
.footer-cities-toggle summary::-webkit-details-marker { display: none; }
.footer-cities-toggle summary::after { content: " +"; }
.footer-cities-toggle[open] summary::after { content: " −"; }
.footer-cities-toggle p { margin-top: 8px; line-height: 1.8; }


/* Contact callouts */
.zipcheck .contact-note { margin-top: 6px; }
.book-contact { color: #b9c6d8; margin-top: 4px; }
.book-contact a { color: var(--tag); }

/* Mobile centering pass */
@media (max-width: 600px) {
  .hero { text-align: center; padding-top: 40px; }
  .hero-points { justify-items: center; text-align: left; }
  .hero-points li { display: flex; align-items: center; gap: 12px; }
  .hero-points li::before { margin-right: 0; flex: none; }
  .zipcheck { margin: 0 auto; max-width: 420px; }
  .zipcheck label { text-align: left; }
  .trust { justify-content: center; }
  .hero-ticket { margin: 12px auto 0; transform: none; }
  .section-head { text-align: center; margin-left: auto; margin-right: auto; }
  .designed-list { justify-content: center; }
  .designed-biz { text-align: center; }
  .steps li { text-align: left; padding: 0; }
  .calc-controls { text-align: center; }
  .calc-first { justify-content: center; }
  .footer { text-align: center; }
  .footer-links .eyebrow { margin-top: 22px; }
}

@media (max-width: 720px) { .footer { grid-template-columns: 1fr; } .footer-links { min-width: 0; } }


/* Minimal pricing overview */
.price-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px clamp(40px, 8vw, 96px); margin-bottom: 24px; }
.price-row .price-big { margin: 0; }
.price-label { color: var(--ink-soft); font-size: 0.95rem; margin: 4px 0 0; }
.price-note { color: var(--ink-soft); max-width: 560px; margin: 0 0 28px; }
@media (max-width: 600px) {
  .price-row { grid-template-columns: 1fr; justify-content: center; text-align: center; gap: 20px; }
  .price-note { margin-left: auto; margin-right: auto; text-align: center; }
  #pricing .btn { display: flex; max-width: 320px; margin: 0 auto; }
  .hero .lede { margin-left: auto; margin-right: auto; }
}


/* ===== Polish pass ===== */

/* 1. Hero flows straight from the nav */
.hero { padding-top: clamp(20px, 2.8vw, 40px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; }
.hero .eyebrow { margin-top: 0; }

/* 2. Card top aligns with the headline (eyebrow height + its margin) */
.hero-ticket { margin-top: calc(0.8rem * 1.55 + 10px); transform: rotate(-1.2deg); }
@media (max-width: 860px) { .hero-ticket { margin-top: 8px; transform: none; } }

/* 3. Checklist as an aligned grid with consistent check marks */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 28px; max-width: 520px; font-size: 0.95rem; color: var(--ink); }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li::before {
  content: "✓"; display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok); font-size: 0.8rem; font-weight: 700;
}
@media (max-width: 600px) { .trust { justify-content: start; margin-left: auto; margin-right: auto; max-width: 420px; } }

/* 4. Step cards */
.steps-cards { gap: 20px; }
.steps-cards li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 24px; transition: transform .2s, box-shadow .2s;
}
.steps-cards li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.steps-cards .step-n {
  width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; margin-bottom: 18px; margin-right: 0;
}
.steps-cards li:nth-child(2) { border-color: var(--tag); }
.steps-cards li:nth-child(2)::after { left: auto; right: 20px; top: 26px; }
.steps-cards li h3 { margin-bottom: 8px; }
.steps-cards li p { color: var(--ink-soft); }
@media (max-width: 600px) { .steps-cards li { padding: 22px 20px; text-align: left; } }

/* 5. Designed-for grid */
.designed { padding-top: 0; }
.designed-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.designed-grid li {
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 14px 18px; text-align: center; font-weight: 600; color: var(--navy); font-size: 0.98rem;
}
.designed-biz { margin-top: 28px; }
@media (max-width: 900px) { .designed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .designed-grid { grid-template-columns: 1fr; } }

/* 6. Pricing panel */
.price-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow);
}
.price-cards { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.price-card { border-radius: var(--radius); padding: 28px 28px 24px; background: var(--powder); border: 0; }
.price-card-main { background: var(--navy); color: #dfe7f2; }
.price-card-main .price-big, .price-card-main .price-label-top { color: #fff; }
.price-card-main .price-sub { color: #b9c6d8; }
.price-label-top { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 10px; }
.price-card .price-big { font-size: clamp(2.6rem, 4.5vw, 3.6rem); margin: 0 0 10px; }
.price-sub { font-size: 0.98rem; margin: 0 0 16px; max-width: 34ch; }
.price-foot { display: inline-block; font-weight: 700; font-size: 0.9rem; padding: 6px 12px; border-radius: 999px; background: var(--tag); color: #3b2a00; margin: 0; }
.price-foot-free { background: var(--ok-bg); color: var(--ok); }
.price-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 8px 0; }
.price-terms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--ink-soft); font-size: 0.95rem; }
.price-terms li::before { content: "·"; margin-right: 8px; color: var(--cobalt); font-weight: 700; }
@media (max-width: 760px) {
  .price-cards { grid-template-columns: 1fr; }
  .price-panel-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .price-terms { justify-content: center; }
  .price-panel-foot .btn { width: 100%; }
}


/* Booking: number input + window */
.field input[type="number"] { -moz-appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button, .field input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
#bTicketWeeklyRow dd { color: var(--ok); }


/* ===== Booking controls: stepper + calendar ===== */
.bag-stepper { display: flex; align-items: stretch; border: 1.5px solid #2c4569; border-radius: var(--radius-sm); overflow: hidden; background: #0f2440; height: 50px; }
.bag-stepper button {
  width: 50px; flex: none; border: 0; background: #16304f; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.bag-stepper button:hover { background: #1f3d63; }
.bag-stepper button:disabled { color: #5c6f8a; cursor: default; background: #12293f; }
.bag-stepper input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; text-align: center;
  font: 700 1.15rem var(--display); border-left: 1.5px solid #2c4569; border-right: 1.5px solid #2c4569; border-radius: 0; padding: 0;
}
.bag-stepper input:focus-visible { outline: 2px solid var(--tag); outline-offset: -3px; }
.field input[type="date"] { height: 50px; color-scheme: dark; font: 500 1rem var(--body); }
.field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.9; }
.field select { height: 50px; }

/* ===== Laundry ticket: value breakdown ===== */
.booking-ticket .ticket-lines dd s { color: var(--ink-soft); font-weight: 400; }
.booking-ticket .ticket-lines dd strong { color: var(--ok); }
.ticket-perk { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); font-size: 0.88rem; font-weight: 600; }
.ticket-total-pop { margin-top: 14px; padding: 14px 16px; border-top: 0; border-radius: var(--radius-sm); background: var(--powder); align-items: center; }
.ticket-total-pop span { font-weight: 600; color: var(--navy); }
.ticket-total-pop strong { font-size: 2.2rem; }
.ticket-assure { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 0.85rem; color: var(--ink-soft); }
.ticket-assure li { display: flex; align-items: center; gap: 6px; }
.ticket-assure li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; }
.ticket-secure { margin: 16px 0 0; font-size: 0.82rem; color: var(--ink-soft); text-align: center; }
.ticket-secure::before { content: "🔒 "; }
.booking-ticket .btn-block { margin-top: 8px; }


/* ===== Booking section: spacing and micro-copy ===== */
.section-book .section-head { margin-bottom: 36px; }
.booking { gap: 40px; }
.form-grid { gap: 24px 20px; }
.field { gap: 8px; }
.field label { line-height: 1.35; }
.field label span { display: block; font-weight: 400; font-size: 0.86rem; color: #a9b8cc; margin-top: 2px; }
.field-help { margin-top: 2px; }
.field-wide .check { margin-top: 2px; }
.field-wide .check + .check { margin-top: 12px; }
.check { align-items: flex-start; gap: 12px; line-height: 1.45; color: #d7e0ec; }
.check strong { color: #fff; font-weight: 600; }
.check a { color: var(--tag); }
.booking-ticket { padding: 26px 28px 28px; top: 88px; }
.booking-ticket .ticket-lines div { padding: 8px 0; }
#bTicketWeeklyRow dd small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.8rem; margin-top: 2px; }
#bTicketWeeklyRow dd { text-align: right; }
@media (max-width: 900px) { .booking { gap: 32px; } }


/* Ticket: coordination note */
.ticket-coord { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--powder); color: var(--navy); font-size: 0.88rem; font-weight: 600; text-align: center; }
.ticket-secure { margin-top: 10px; }


/* ===== Hero value card ===== */
.hero-card .value-big { margin-top: 6px; }
.hero-card .value-sub { margin-bottom: 14px; }
.hero-bonus { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); font-size: 0.92rem; line-height: 1.45; }
.hero-bonus strong { color: var(--ok); }
.hero-badges { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 8px; font-size: 0.9rem; color: var(--ink); }
.hero-badges li { display: flex; align-items: center; gap: 10px; }
.hero-badges li::before {
  content: "✓"; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--powder); color: var(--cobalt); font-size: 0.75rem; font-weight: 700;
}
.hero-card .btn-block { margin-top: 16px; }

/* FAQ sits after the dark booking section, so give it room */
#faq { padding-top: clamp(64px, 8vw, 104px); }


/* ===== Policies block ===== */
#policies { padding-bottom: 0; }
.accept-note { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.accept.yes .accept-note { color: var(--ok); }
.accept.no .accept-note a { color: var(--warn); font-weight: 600; }

/* ===== FAQ: two columns on tablets and up ===== */
.faq-grid { max-width: none; }
@media (min-width: 768px) {
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
  .faq-grid details { break-inside: avoid; }
}

/* ===== Spinning hero badge ===== */
.hero-card { overflow: visible; }
.spin-badge { position: absolute; top: -34px; right: -26px; width: 104px; height: 104px; }
.spin-badge-bg { fill: var(--tag); }
.spin-badge-text { font: 700 11.5px var(--body); letter-spacing: 0.14em; fill: #3b2a00; }
.spin-badge-mid { font: 800 22px var(--display); fill: #3b2a00; }
.spin-badge-text, .spin-badge-bg { transform-origin: 60px 60px; }
@media (prefers-reduced-motion: no-preference) {
  .spin-badge-text { animation: spin 18s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
@media (max-width: 860px) { .spin-badge { top: -28px; right: 8px; width: 88px; height: 88px; } }

/* ===== Scroll reveals (only when JS is running) ===== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .steps-cards li.reveal.in:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }


/* ===== Effects pass ===== */

/* Ambient hero glow (very soft, slow drift) */
.hero { position: relative; }
.hero-glow {
  position: absolute; inset: -10% -5% auto auto; width: 62%; height: 120%; pointer-events: none; z-index: -1;
  background:
    radial-gradient(38% 45% at 70% 30%, color-mix(in srgb, var(--cobalt) 14%, transparent), transparent 70%),
    radial-gradient(28% 32% at 30% 70%, color-mix(in srgb, var(--tag) 22%, transparent), transparent 70%);
  filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: drift 16s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 4%, 0) scale(1.06); } }
}
@media (max-width: 860px) { .hero-glow { width: auto; inset: -5% 0 auto 0; animation: none; transform: none; } }

/* Headline lines rise in on load */
.hero h1 .line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line { opacity: 0; transform: translateY(22px); animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .hero h1 .line:nth-child(2) { animation-delay: .1s; }
  .hero h1 .line:nth-child(3) { animation-delay: .2s; }
  .hero .lede, .hero .zipcheck, .hero .trust { opacity: 0; animation: rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .hero .lede { animation-delay: .3s; } .hero .zipcheck { animation-delay: .4s; } .hero .trust { animation-delay: .5s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* Buttons: shine sweep + lift */
.btn-primary { position: relative; overflow: hidden; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cobalt) 70%, transparent); transition: background .15s, transform .15s, box-shadow .2s; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .5s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--cobalt) 80%, transparent); }
.btn-primary:hover::after { left: 120%; }
.btn-primary:active { transform: translateY(1px); }

/* Nav gains a shadow once scrolled */
.topbar { transition: box-shadow .2s; }
.topbar.scrolled { box-shadow: 0 6px 24px -18px rgba(15,42,74,.45); }

/* Zip checker feedback */
.zipcheck input { transition: border-color .2s, box-shadow .2s; }
.zipcheck input.is-ok { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.zipcheck input.is-warn { border-color: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 16%, transparent); }
.zipcheck-result.ok a { display: inline-block; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .zipcheck-result.pop { animation: pop .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes pop { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .zipcheck-result.ok a { animation: nudge 1.6s ease-in-out .6s 2; }
  @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
}

/* Ticket total bump */
@media (prefers-reduced-motion: no-preference) {
  .ticket-total strong.bump { animation: bump .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes bump { 0% { transform: scale(.94); color: var(--cobalt); } 100% { transform: scale(1); } }
}

/* Cards: lift + step badge tilt */
.price-card, .designed-grid li, .accept { transition: transform .2s, box-shadow .2s; }
.price-card:hover, .accept:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.designed-grid li:hover { transform: translateY(-2px); border-color: var(--cobalt); }
.step-n { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.steps-cards li:hover .step-n { transform: rotate(-6deg) scale(1.06); }

/* FAQ: smooth open */
.faq details p { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: faqin .3s ease both; }
  @keyframes faqin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Sticky mobile CTA bar */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 94%, transparent); color: #e8eef6; backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.5);
  transform: translateY(120%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.sticky-cta strong { color: var(--tag); }
.sticky-cta span { font-size: 0.9rem; }
.sticky-cta.show { transform: none; opacity: 1; }
@media (max-width: 900px) { .sticky-cta { display: flex; } }


/* ===== Policy block: scannable lists + fine print ===== */
.accept h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.accept-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.9rem; font-weight: 800; color: #fff; }
.accept.yes .accept-icon { background: var(--ok); }
.accept.no .accept-icon { background: var(--warn); }
.accept-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.accept-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.accept-list li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.72rem; font-weight: 800; margin-top: 2px; }
.accept.yes .accept-list li::before { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.accept.no .accept-list li::before { content: "✕"; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.accept-list strong { color: var(--navy); }
.accept-note { padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--ink-soft) 35%, transparent); }
.why-bedding { margin-top: 24px; padding: 22px 26px; border-radius: var(--radius); background: var(--powder); border-left: 4px solid var(--cobalt); }
.why-bedding h3 { margin-bottom: 6px; font-size: 1.05rem; }
.why-bedding p { margin: 0; color: var(--ink-soft); max-width: 72ch; }
.fine-print-title { margin: 40px 0 16px; font-size: 1.1rem; }
.fine-print { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fine-print li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; }
.fine-print strong { display: block; color: var(--navy); margin-bottom: 3px; }
@media (max-width: 960px) { .fine-print { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fine-print { grid-template-columns: 1fr; } .why-bedding { padding: 18px 20px; } }


/* ===== Form: bag note, detergent toggle, trust badge ===== */
.field-note { margin: 2px 0 0; font-size: 0.84rem; color: #a9b8cc; line-height: 1.4; }
.field-label { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.field-label span { display: block; font-weight: 400; font-size: 0.86rem; color: #a9b8cc; margin-top: 2px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg-opt > span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid #2c4569; background: #0f2440; transition: border-color .15s, background .15s; }
.seg-opt strong { color: #fff; font-weight: 600; }
.seg-opt small { color: #a9b8cc; font-size: 0.82rem; }
.seg-opt input:checked + span { border-color: var(--tag); background: #16304f; box-shadow: inset 0 0 0 1px var(--tag); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--tag); outline-offset: 2px; }
.ticket-trust { margin: 14px 0 0; font-size: 0.82rem; color: var(--navy); font-weight: 600; text-align: center; }
.ticket-trust::before { content: "✓ "; color: var(--ok); }
@media (max-width: 420px) { .seg { grid-template-columns: 1fr; } }

/* ===== Gift cards ===== */
.gift { padding-bottom: 0; }
.gift-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; background: var(--navy); color: #dfe7f2; border-radius: 20px; padding: clamp(24px, 4vw, 40px); }
.gift-copy .eyebrow { color: var(--tag); }
.gift-copy h2 { color: #fff; margin-bottom: 10px; }
.gift-copy p { color: #b9c6d8; margin: 0; max-width: 46ch; }
.gift-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gift-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 14px 14px 12px; border-radius: var(--radius-sm); border: 1.5px solid #2c4569; background: #0f2440; color: #dfe7f2; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, transform .15s; }
.gift-opt strong { font: 800 1.5rem var(--display); color: #fff; }
.gift-opt span { font-size: 0.8rem; color: #a9b8cc; }
.gift-opt:hover { transform: translateY(-2px); border-color: #4b6a99; }
.gift-opt.is-selected { border-color: var(--tag); box-shadow: inset 0 0 0 1px var(--tag); background: #16304f; }
.gift-options .btn-block { grid-column: 1 / -1; margin-top: 6px; }
.gift-note { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; color: #a9b8cc; text-align: center; }
@media (max-width: 860px) { .gift-panel { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .gift-options { grid-template-columns: 1fr; } }

/* ===== Policy: three cards ===== */
.policy-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.policy-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; }
.policy-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.1rem; }
.policy-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--navy); color: #fff; font: 800 0.95rem var(--display); flex: none; }
.policy-sub { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 14px 0 8px; }
.policy-sub.yes { color: var(--ok); } .policy-sub.no { color: var(--warn); }
.policy-card .accept-list li::before { content: "✓"; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.policy-card .accept-list.no li::before { content: "✕"; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.policy-card .accept-list li { font-size: 0.95rem; }
.policy-why { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.policy-why a { font-weight: 600; }
.ready-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; }
.ready-list li { padding-left: 16px; position: relative; }
.ready-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); }
.ready-list strong { color: var(--navy); }
@media (max-width: 960px) { .policy-cards { grid-template-columns: 1fr; } }


/* ===== Wow pass ===== */

/* Marquee banner */
.marquee { overflow: hidden; background: var(--navy); color: #fff; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.mq-track { display: flex; width: max-content; }
.mq-group { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font: 600 0.95rem var(--display); letter-spacing: 0.02em; }
.mq-item { opacity: .95; }
.mq-dot { color: var(--tag); font-size: 0.8rem; }
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: marquee 38s linear infinite; }
  .marquee:hover .mq-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}
@media (max-width: 600px) { .mq-group { font-size: 0.88rem; gap: 20px; padding-right: 20px; } }

/* Section headings: accent underline that draws in on reveal */
.section-head h2 { position: relative; display: inline-block; padding-bottom: 6px; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--tag)); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.8,.2,1) .15s; }
.section-head h2.in::after, .no-js .section-head h2::after { transform: scaleX(1); }
@media (max-width: 600px) { .section-head h2::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; } .section-head h2.in::after { transform: translateX(-50%) scaleX(1); } }

/* Steps: progress line behind the cards */
#how { position: relative; }
.steps-line { position: relative; height: 0; }
.steps-line span { position: absolute; left: 4%; right: 4%; top: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cobalt), var(--tag) 45%, var(--cobalt)); background-size: 200% 100%; opacity: .35; transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .2s; }
.steps-line.in span { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .steps-line.in span { animation: shimmer 4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } }
@media (max-width: 960px) { .steps-line { display: none; } }

/* Primary buttons: slow animated gradient */
.btn-primary { background: linear-gradient(120deg, var(--cobalt), #3d6bff 40%, var(--cobalt) 80%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .btn-primary { animation: btnflow 6s ease-in-out infinite; } @keyframes btnflow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } } }
.btn-primary:hover { background-position: 100% 0; }

/* Hero: floating shapes + card lift */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.fl { position: absolute; font-size: 28px; opacity: .55; filter: saturate(.9); }
.fl-1 { left: 58%; top: 8%; } .fl-2 { left: 92%; top: 62%; font-size: 34px; } .fl-3 { left: 63%; top: 84%; } .fl-4 { left: 84%; top: 6%; font-size: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .fl { animation: floaty 7s ease-in-out infinite; }
  .fl-2 { animation-duration: 9s; animation-delay: -2s; } .fl-3 { animation-duration: 8s; animation-delay: -4s; } .fl-4 { animation-duration: 6s; animation-delay: -1s; }
  @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(5deg); } }
  .hero-card { animation: settle .6s cubic-bezier(.2,.8,.2,1) both, hover-bob 6s ease-in-out 1s infinite; }
  @keyframes hover-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
}
.hero-card { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.hero-card:hover { box-shadow: 0 30px 60px -30px rgba(15, 42, 74, 0.45); }
@media (max-width: 860px) { .floaters { display: none; } }

/* Designed-for pills: staggered pop on reveal */
.designed-grid li { transition: transform .2s, border-color .2s, box-shadow .2s; }
.designed-grid li:hover { box-shadow: 0 10px 24px -16px rgba(36,87,230,.5); }

/* Pricing panel: soft animated border glow */
.price-panel { position: relative; }
.price-panel::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: linear-gradient(120deg, var(--cobalt), var(--tag), var(--cobalt)); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .price-panel::before { animation: borderflow 8s linear infinite; } @keyframes borderflow { to { background-position: 300% 0; } } }

/* Gift options: pulse the selected one once */
@media (prefers-reduced-motion: no-preference) {
  .gift-opt.is-selected { animation: selpulse .4s ease; }
  @keyframes selpulse { 0% { transform: scale(.97); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
}

/* Count-up number */
.count { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* reveal-soft: no fade (just triggers the .in state for underlines and lines) */
.js .reveal-soft { opacity: 1; transform: none; }


/* ===== Policy cards: alignment and spacing fix ===== */
.policy-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 24px; }
.policy-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; }
.policy-card h3 { margin: 0 0 18px; }
.policy-card > *:last-child { margin-bottom: 0; }
.policy-sub { margin: 0 0 10px; }
.policy-sub.no { margin-top: 18px; }
.policy-card .accept-list { gap: 9px; }
.policy-card .accept-list li { font-size: 0.95rem; line-height: 1.45; }
.policy-card .accept-list li::before { margin-top: 3px; }
.policy-why { margin: 20px 0 0; padding: 16px 18px; border: 0; border-top: 0; border-radius: var(--radius-sm); background: var(--powder); border-left: 3px solid var(--cobalt); font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.policy-why strong { display: block; color: var(--navy); margin-bottom: 4px; font-size: 0.92rem; }
.policy-why p { margin: 0; }
.ready-list { gap: 13px; }
.ready-list li { font-size: 0.95rem; line-height: 1.5; padding-left: 18px; }
.ready-list li::before { top: 0.6em; }
@media (max-width: 1080px) and (min-width: 769px) { .policy-cards { grid-template-columns: 1fr 1fr; } .policy-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 768px) { .policy-cards { grid-template-columns: 1fr; gap: 16px; } .policy-card { padding: 22px 20px; } }


/* =========================================================
   Responsive + polish pass
   ========================================================= */

/* --- Header: dark navy to match the booking section --- */
.topbar { background: color-mix(in srgb, var(--navy-deep) 92%, transparent); border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar .brand-name, .topbar .brand { color: #fff; }
.topbar .brand-name em { color: var(--tag); }
.topbar .brand-mark::after { border-color: var(--tag); }
.topbar .brand-mark { background: linear-gradient(180deg, var(--tag) 0 55%, #fff 55% 100%); }
.topnav a { color: #c9d4e3; }
.topnav a:hover { color: #fff; }
.topbar-contact { color: var(--tag); }
.topbar.scrolled { box-shadow: 0 8px 30px -16px rgba(0,0,0,.6); }

/* --- Section rhythm: tighter on phones --- */
@media (max-width: 600px) {
  .section { padding-top: 48px; padding-bottom: 48px; }
  .section-head { margin-bottom: 24px; }
  h2 { font-size: 1.6rem; }
  .section-lede { font-size: 1rem; }
}

/* --- Hero card: keep the badge clear of the tag on every width --- */
.hero-card .ticket-head { padding-right: 56px; }
.spin-badge { top: -30px; right: -18px; width: 96px; height: 96px; }
@media (max-width: 860px) {
  .hero { padding-top: 24px; }
  .hero-ticket { max-width: 100%; margin-top: 12px; }
  .hero-card .ticket-head { flex-wrap: wrap; gap: 8px; padding-right: 0; }
  .spin-badge { position: static; width: 68px; height: 68px; margin: -6px auto 6px; display: block; }
  .hero-card .value-big { font-size: 2.6rem; }
  .hero-card .value-sub { font-size: 0.92rem; margin-bottom: 10px; }
  .hero-bonus { font-size: 0.88rem; padding: 9px 12px; margin-bottom: 10px; }
  .hero-badges { gap: 6px; font-size: 0.88rem; }
  .hero-card .btn-block { margin-top: 12px; }
  .hero .lede { font-size: 1.05rem; margin: 12px auto 20px; }
  .trust { margin-top: 20px; gap: 8px 16px; font-size: 0.86rem; }
  .contact-note { font-size: 0.88rem; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
  .spin-badge { top: -26px; right: -12px; width: 84px; height: 84px; }
}

/* --- How it works: visual icon per step --- */
.steps-cards li { position: relative; padding-top: 22px; }
.step-visual { display: grid; place-items: center; width: 100%; height: 108px; border-radius: 12px; margin-bottom: 16px; color: var(--cobalt); background: linear-gradient(160deg, var(--powder), #fff); border: 1px solid var(--line); }
.step-visual svg { width: 56px; height: 56px; }
.steps-cards li:nth-child(2) .step-visual { color: #8a6400; background: linear-gradient(160deg, #fff4cf, #fff); border-color: #ffe08a; }
.steps-cards li:nth-child(3) .step-visual { color: var(--ok); background: linear-gradient(160deg, var(--ok-bg), #fff); }
.steps-cards li:nth-child(4) .step-visual { color: var(--navy); background: linear-gradient(160deg, var(--powder-deep), #fff); }
.steps-cards .step-n { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 9px; font-size: 0.95rem; margin: 0; box-shadow: 0 4px 12px -6px rgba(15,42,74,.5); }
.steps-cards li:nth-child(2)::after { top: 14px; right: 12px; left: auto; }
.steps-cards li h3 { font-size: 1.08rem; }
@media (max-width: 960px) { .steps-cards { grid-template-columns: 1fr 1fr; gap: 14px; } .step-visual { height: 84px; } .step-visual svg { width: 44px; height: 44px; } .steps-cards li { padding: 18px 16px; } }
@media (max-width: 600px) { .steps-cards li p { font-size: 0.92rem; } .steps-cards li h3 { font-size: 1rem; } }
@media (max-width: 400px) { .steps-cards { grid-template-columns: 1fr; } }

/* --- Designed for: icon tiles --- */
.designed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.designed-grid li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--radius); font-size: 0.95rem; }
.d-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--powder); color: var(--cobalt); }
.d-icon svg { width: 22px; height: 22px; }
.designed-grid li:hover .d-icon { background: var(--cobalt); color: #fff; }
@media (max-width: 900px) { .designed-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .designed-grid li { padding: 10px 12px; font-size: 0.88rem; gap: 10px; } .d-icon { width: 34px; height: 34px; } .d-icon svg { width: 18px; height: 18px; } }

/* --- Pricing: smaller panel --- */
.price-panel { padding: clamp(14px, 2vw, 22px); border-radius: 18px; }
.price-card { padding: 22px 22px 20px; }
.price-card .price-big { font-size: clamp(2.2rem, 3.6vw, 2.9rem); margin-bottom: 6px; }
.price-sub { margin-bottom: 12px; font-size: 0.95rem; }
.price-panel-foot { padding: 16px 6px 0; }
@media (max-width: 760px) {
  .price-cards { gap: 10px; }
  .price-card { padding: 16px 16px 14px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label label" "big sub" "foot foot"; column-gap: 14px; align-items: center; }
  .price-label-top { grid-area: label; margin-bottom: 4px; }
  .price-card .price-big { grid-area: big; font-size: 2rem; margin: 0; }
  .price-sub { grid-area: sub; margin: 0; font-size: 0.9rem; }
  .price-foot { grid-area: foot; margin-top: 10px; justify-self: start; }
  .price-terms { gap: 6px 16px; font-size: 0.88rem; }
  .price-panel-foot { padding-top: 12px; }
}

/* --- Booking: compact on phones, ticket on top --- */
@media (max-width: 900px) {
  .booking { display: flex; flex-direction: column; gap: 20px; }
  .booking-ticket { order: -1; padding: 18px 18px 20px; }
  .booking-ticket .ticket-lines div { padding: 5px 0; font-size: 0.92rem; }
  .ticket-total-pop { margin-top: 10px; padding: 10px 12px; }
  .ticket-total-pop strong { font-size: 1.7rem; }
  .ticket-assure { display: none; }
  .ticket-per { margin-top: 6px; font-size: 0.82rem; }
  .ticket-perk { margin-top: 8px; padding: 6px 10px; font-size: 0.82rem; }
  .ticket-coord, .ticket-trust, .ticket-secure { font-size: 0.78rem; margin-top: 8px; }
  .ticket-coord { padding: 7px 10px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .field-wide { grid-column: 1 / -1; }
  .field { gap: 5px; }
  .field label, .field-label { font-size: 0.9rem; }
  .field label span, .field-label span, .field-note, .field-help { font-size: 0.78rem; }
  .field input, .field select, .field textarea, .bag-stepper, .field input[type="date"], .field select { height: 46px; padding-top: 10px; padding-bottom: 10px; font-size: 0.95rem; }
  .field textarea { height: auto; }
  .bag-stepper button { width: 44px; }
  .seg-opt > span { padding: 9px 10px; }
  .seg-opt small { font-size: 0.76rem; }
  .check { font-size: 0.86rem; gap: 10px; }
  .field-wide .check + .check { margin-top: 8px; }
  .section-book .section-head { margin-bottom: 20px; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field:nth-child(1), .form-grid .field:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .form-grid { grid-template-columns: 1fr; } .form-grid .field { grid-column: auto; } .field-wide { grid-column: auto; } }

/* --- Policies + gift + FAQ compaction on phones --- */
@media (max-width: 600px) {
  .policy-card { padding: 18px 16px; }
  .policy-card h3 { font-size: 1rem; margin-bottom: 12px; }
  .policy-card .accept-list li, .ready-list li { font-size: 0.9rem; }
  .ready-list { gap: 9px; }
  .policy-why { padding: 12px 14px; font-size: 0.85rem; }
  .gift-panel { padding: 20px 18px; gap: 18px; }
  .gift-copy h2 { font-size: 1.45rem; }
  .gift-copy p { font-size: 0.95rem; }
  .gift-options { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gift-opt { padding: 10px 8px 8px; align-items: center; text-align: center; }
  .gift-opt strong { font-size: 1.25rem; }
  .gift-opt span { font-size: 0.7rem; }
  .faq summary { padding: 14px 0; font-size: 0.95rem; }
  .faq details p { font-size: 0.92rem; }
  .marquee { padding: 10px 0; }
  .footer { padding-top: 40px; }
}


/* Hard caps so icons never inflate (SVG default sizing) */
.step-visual { height: 96px; max-height: 96px; overflow: hidden; }
.step-visual svg, .steps-cards .step-visual svg { width: 48px !important; height: 48px !important; max-width: 48px; max-height: 48px; }
.d-icon svg { width: 22px !important; height: 22px !important; }
@media (max-width: 960px) { .step-visual { height: 76px; max-height: 76px; } .step-visual svg, .steps-cards .step-visual svg { width: 38px !important; height: 38px !important; } }
@media (max-width: 600px) { .d-icon svg { width: 18px !important; height: 18px !important; } }

/* Final mobile overrides (placed last on purpose) */
@media (max-width: 900px) and (min-width: 381px) {
  .booking .form-grid { grid-template-columns: 1fr 1fr !important; }
  .booking .form-grid .field-wide { grid-column: 1 / -1 !important; }
  .booking .form-grid .field:nth-child(1), .booking .form-grid .field:nth-child(5) { grid-column: 1 / -1; }
  .seg { grid-template-columns: 1fr 1fr !important; }
  .seg-opt > span { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; }
  .seg-opt strong { font-size: 0.9rem; }
}
@media (max-width: 380px) { .seg { grid-template-columns: 1fr !important; } }

/* Phone form: two columns down to 340px */
@media (max-width: 900px) and (min-width: 341px) {
  .booking .form-grid { grid-template-columns: 1fr 1fr !important; }
  .booking .form-grid .field-wide { grid-column: 1 / -1 !important; }
  .booking .form-grid .field:nth-child(1), .booking .form-grid .field:nth-child(5) { grid-column: 1 / -1; }
  .seg { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 340px) { .booking .form-grid, .seg { grid-template-columns: 1fr !important; } }

/* Desktop hero card: badge sits above the card corner, tag moves under the title */
@media (min-width: 861px) {
  .hero-card .ticket-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 88px; }
  .spin-badge { top: -22px; right: -14px; width: 92px; height: 92px; }
}




/* ===== Designed for: polished icon tiles ===== */
.designed-nice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.designed-nice .d-tile {
  --tint: var(--cobalt);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left;
  padding: 20px 18px 18px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.designed-nice .d-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--tint) 55%, transparent); border-color: color-mix(in srgb, var(--tint) 45%, var(--line)); }
.designed-nice .d-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 14%, var(--paper)); color: var(--tint);
  transition: background .2s, color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.designed-nice .d-icon svg { width: 26px !important; height: 26px !important; }
.designed-nice .d-tile:hover .d-icon { background: var(--tint); color: #fff; transform: rotate(-6deg) scale(1.05); }
.designed-nice .d-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.designed-nice .d-copy strong { font: 700 1rem var(--display); color: var(--navy); letter-spacing: -0.01em; line-height: 1.2; }
.designed-nice .d-copy small { font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); }
.designed-nice .d-tile.d-home { --tint: #2457e6; } .designed-nice .d-tile.d-parents { --tint: #d9486e; } .designed-nice .d-tile.d-pro { --tint: #0f2a4a; } .designed-nice .d-tile.d-student { --tint: #e08a00; }
.designed-nice .d-tile.d-nurse { --tint: #1a8a5c; } .designed-nice .d-tile.d-senior { --tint: #b4542a; } .designed-nice .d-tile.d-apt { --tint: #6b46c1; } .designed-nice .d-tile.d-gym { --tint: #0e8fa8; }
@media (max-width: 960px) { .designed-nice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) {
  .designed-nice .d-tile { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; }
  .designed-nice .d-icon { width: 42px; height: 42px; border-radius: 12px; flex: none; }
  .designed-nice .d-icon svg { width: 22px !important; height: 22px !important; }
  .designed-nice .d-copy strong { font-size: 0.95rem; }
  .designed-nice .d-copy small { font-size: 0.78rem; }
}
@media (max-width: 400px) { .designed-nice { grid-template-columns: 1fr; } }
.designed-biz { margin-top: 26px; }

/* Designed for: per-tile tint wins over the generic icon rule */
.designed-nice .d-tile .d-icon { color: var(--tint) !important; background: color-mix(in srgb, var(--tint) 14%, var(--paper)) !important; }
.designed-nice .d-tile:hover .d-icon { color: #fff !important; background: var(--tint) !important; }


/* Designed for: icon + label only */
.designed-nice .d-tile { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.designed-nice .d-icon { flex: none; width: 46px; height: 46px; }
.designed-nice .d-copy strong { font-size: 1rem; }
@media (max-width: 600px) { .designed-nice .d-tile { padding: 12px 14px; gap: 12px; } .designed-nice .d-icon { width: 40px; height: 40px; } .designed-nice .d-copy strong { font-size: 0.95rem; } }


/* =====================================================
   Booking section: mobile fix (final overrides)
   ===================================================== */

/* Bug 1: hidden ticket rows must actually hide (a flex rule was overriding [hidden]) */
.ticket-lines div[hidden], .booking-ticket [hidden] { display: none !important; }

/* Bug 2: no orange glow on untouched required fields */
.field input:invalid:not(:placeholder-shown):not(:focus) { border-color: #2c4569; }
.field input.touched:invalid, .field select.touched:invalid { border-color: #e39a7a; }

@media (max-width: 900px) {
  /* Order: heading, form, then a compact ticket with the pay button. */
  .booking { display: flex; flex-direction: column; gap: 18px; }
  .booking-ticket { order: 2; position: static; padding: 16px 16px 18px; }
  .section-book .section-head { margin-bottom: 18px; }
  .section-book .section-lede { font-size: 0.95rem; }
  .book-contact { font-size: 0.85rem; }

  /* Form: two tidy columns, full-width for name, address, notes, checks */
  .booking .form-grid { grid-template-columns: 1fr 1fr !important; gap: 12px 10px; }
  .booking .form-grid .field { gap: 4px; }
  .booking .form-grid .field-wide { grid-column: 1 / -1 !important; }
  .booking .form-grid .field:nth-child(1) { grid-column: 1 / -1; }   /* name */
  .booking .form-grid .field:nth-child(4) { grid-column: 1 / -1; }   /* zip full width, not orphaned */
  .booking .form-grid .field:nth-child(5) { grid-column: 1 / -1; }   /* address */
  .field label, .field-label { font-size: 0.88rem; }
  .field label span, .field-label span { font-size: 0.74rem; margin-top: 1px; }
  .field-note, .field-help { font-size: 0.74rem; min-height: 0; }
  .field-help:empty { display: none; }
  .field input, .field select, .field input[type="date"] { height: 44px; padding: 8px 12px; font-size: 0.95rem; }
  .bag-stepper { height: 44px; }
  .bag-stepper button { width: 42px; font-size: 1.2rem; }
  .bag-stepper input { font-size: 1.05rem; }
  .field textarea { min-height: 64px; padding: 8px 12px; font-size: 0.95rem; }
  .seg { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .seg-opt > span { padding: 8px 10px; gap: 1px; }
  .seg-opt strong { font-size: 0.88rem; }
  .seg-opt small { font-size: 0.72rem; }
  .check { font-size: 0.84rem; gap: 10px; line-height: 1.35; }
  .check input { width: 16px; height: 16px; margin-top: 2px; }
  .field-wide .check + .check { margin-top: 8px; }

  /* Ticket: only the money, the date, the perk, the total, the button */
  .booking-ticket .ticket-head { font-size: 0.72rem; padding-bottom: 8px; margin-bottom: 6px; }
  .booking-ticket .ticket-lines div { padding: 4px 0; font-size: 0.9rem; }
  .booking-ticket .ticket-perk { margin-top: 6px; padding: 6px 10px; font-size: 0.8rem; }
  .booking-ticket .ticket-total-pop { margin-top: 8px; padding: 10px 12px; }
  .booking-ticket .ticket-total-pop strong { font-size: 1.6rem; }
  .booking-ticket .ticket-per { font-size: 0.8rem; margin-top: 4px; }
  .booking-ticket .ticket-coord { display: none; }
  .booking-ticket .ticket-trust, .booking-ticket .ticket-secure { font-size: 0.74rem; margin-top: 6px; }
  .booking-ticket .btn-block { margin-top: 10px; padding: 13px 18px; }
  .booking-ticket .ticket-note { font-size: 0.78rem; margin-top: 8px; }
}
@media (max-width: 340px) { .booking .form-grid, .seg { grid-template-columns: 1fr !important; } }

/* Detergent options: label and hint on separate lines everywhere */
.seg-opt > span { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 2px; }
.seg-opt strong, .seg-opt small { display: block; }


/* ===== Policies: accordion cards, compact ===== */
.policy-acc { align-items: start; }
.policy-acc .policy-card { padding: 0; overflow: hidden; }
.policy-acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; font: 700 1.05rem var(--display); color: var(--navy); letter-spacing: -0.01em;
}
.policy-acc summary::-webkit-details-marker { display: none; }
.policy-acc summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--cobalt); transition: transform .2s; }
.policy-acc details[open] summary::after { content: "−"; }
.policy-acc .policy-body { padding: 0 20px 20px; }
.policy-acc .policy-sub { margin: 0 0 8px; }
.policy-acc .policy-sub.no { margin-top: 14px; }
.policy-acc .accept-list { gap: 6px; }
.policy-acc .accept-list li { font-size: 0.92rem; line-height: 1.4; }
.policy-acc .ready-list { gap: 9px; }
.policy-acc .ready-list li { font-size: 0.92rem; line-height: 1.45; }
.policy-acc .policy-why { margin-top: 14px; padding: 12px 14px; font-size: 0.86rem; }
@media (prefers-reduced-motion: no-preference) {
  .policy-acc details[open] .policy-body { animation: faqin .25s ease both; }
}
/* Desktop: all three open, side by side, summaries act as headings */
@media (min-width: 961px) {
  /* Always expanded on desktop regardless of the open attribute: render the body as a normal block */
  .policy-acc details { display: block; }
  .policy-acc details > .policy-body { display: block !important; }
  .policy-acc details:not([open]) > .policy-body { display: block !important; }
  .policy-acc summary { pointer-events: none; padding-bottom: 12px; display: flex; }
  .policy-acc summary::after { display: none; }
}
/* Phone: tighter still */
@media (max-width: 600px) {
  #policies .section-head { margin-bottom: 14px; }
  .policy-acc { gap: 10px; }
  .policy-acc summary { padding: 14px 16px; font-size: 0.98rem; }
  .policy-acc .policy-body { padding: 0 16px 16px; }
  .policy-acc .accept-list li, .policy-acc .ready-list li { font-size: 0.88rem; }
  .policy-acc .ready-list { gap: 8px; }
  .policy-acc .policy-icon { width: 26px; height: 26px; font-size: 0.85rem; }
}

/* ===== How it works: dark navy band ===== */
#how { max-width: none; background: linear-gradient(180deg, var(--navy-deep) 0%, #0d2444 100%); color: #dfe7f2; position: relative; }
#how > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
#how .eyebrow { color: var(--tag); }
#how h2 { color: #fff; }
#how .section-lede { color: #b9c6d8; }
#how .count { color: var(--tag); }
#how .section-head h2::after { background: linear-gradient(90deg, var(--tag), #fff); }
#how .steps-cards li { background: #fff; border-color: rgba(255,255,255,.12); box-shadow: 0 18px 40px -28px rgba(0,0,0,.6); }
#how .steps-cards li h3 { color: var(--navy); }
#how .steps-cards li p { color: var(--ink-soft); }
#how .steps-cards li:hover { box-shadow: 0 26px 50px -26px rgba(0,0,0,.7); }
#how .steps-line span { opacity: .55; }
/* soft glow behind the cards */
#how::before { content: ""; position: absolute; inset: auto 10% 0 10%; height: 55%; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--cobalt) 35%, transparent), transparent 70%); }
#how .section-head, #how .steps, #how .steps-line { position: relative; }
/* the marquee sits directly above: give it a hairline separation instead of merging */
.marquee { border-bottom: 1px solid rgba(255,255,255,.14); }

/* How it works: tighter top and bottom */
#how { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }
#how .section-head { margin-bottom: 26px; }
@media (max-width: 600px) { #how { padding-top: 30px; padding-bottom: 30px; } #how .section-head { margin-bottom: 18px; } }

/* Marquee: yellow stripe instead of navy */
.marquee { background: var(--tag); color: #2a1f00; border-top: 0; border-bottom: 0; padding: 12px 0; }
.mq-group { font-weight: 700; }
.mq-item { opacity: 1; }
.mq-dot { color: #2a1f00; opacity: .55; }

/* How it works: compact step cards on phones */
@media (max-width: 600px) {
  #how .steps-cards { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  #how .steps-cards li { padding: 14px 12px 12px; padding-top: 14px; border-radius: 12px; }
  #how .step-visual { height: 56px !important; max-height: 56px !important; margin-bottom: 10px; border-radius: 10px; }
  #how .step-visual svg, #how .steps-cards .step-visual svg { width: 28px !important; height: 28px !important; }
  #how .steps-cards .step-n { width: 24px; height: 24px; font-size: 0.8rem; top: 8px; left: 8px; border-radius: 7px; }
  #how .steps-cards li:nth-child(2)::after { font-size: 0.6rem; top: 10px; right: 8px; letter-spacing: 0.06em; }
  #how .steps-cards li h3 { font-size: 0.92rem; margin-bottom: 4px; line-height: 1.2; }
  #how .steps-cards li p { font-size: 0.8rem; line-height: 1.35; }
  #how .section-lede { font-size: 0.92rem; }
}
@media (max-width: 340px) { #how .steps-cards { grid-template-columns: 1fr !important; } }

/* =====================================================
   Booking: compact everywhere (nothing removed)
   ===================================================== */
#book { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.section-book .section-head { margin-bottom: 20px; }
.section-book .section-head h2 { margin-bottom: 6px; }
.section-book .section-lede { margin-bottom: 4px; }
.book-contact { margin-top: 2px; }
.booking { gap: 24px; }
.booking .form-grid { gap: 12px 14px; }
.booking .form-grid .field { gap: 3px; }
.field label, .field-label { font-size: 0.88rem; line-height: 1.25; }
.field label span, .field-label span { font-size: 0.76rem; margin-top: 0; }
.field-note, .field-help { font-size: 0.76rem; margin-top: 1px; line-height: 1.3; }
.field-help:empty { display: none; }
.field input, .field select, .field input[type="date"] { height: 42px; padding: 6px 12px; font-size: 0.95rem; }
.bag-stepper { height: 42px; }
.bag-stepper button { width: 40px; font-size: 1.15rem; }
.bag-stepper input { font-size: 1rem; }
.field textarea { min-height: 52px; height: 52px; padding: 7px 12px; font-size: 0.95rem; rows: 2; }
.seg { gap: 8px; }
.seg-opt > span { padding: 7px 10px !important; gap: 0 !important; }
.seg-opt strong { font-size: 0.86rem; }
.seg-opt small { font-size: 0.72rem; }
.check { font-size: 0.84rem; line-height: 1.3; gap: 9px; }
.check input { width: 15px; height: 15px; margin-top: 2px; }
.field-wide .check + .check { margin-top: 6px !important; }
/* Ticket, compact but complete */
.booking-ticket { padding: 16px 16px 16px; }
.booking-ticket .ticket-head { font-size: 0.72rem; padding-bottom: 8px; margin-bottom: 6px; }
.booking-ticket .ticket-lines div { padding: 3px 0; font-size: 0.9rem; }
.booking-ticket .ticket-perk { margin-top: 6px; padding: 5px 10px; font-size: 0.8rem; }
.booking-ticket .ticket-total-pop { margin-top: 8px; padding: 8px 12px; }
.booking-ticket .ticket-total-pop strong { font-size: 1.5rem; }
.booking-ticket .ticket-per { font-size: 0.78rem; margin-top: 4px; }
.booking-ticket .ticket-assure { margin-top: 8px; gap: 3px 10px; font-size: 0.78rem; }
.booking-ticket .ticket-coord { margin-top: 8px; padding: 6px 10px; font-size: 0.78rem; }
.booking-ticket .ticket-trust, .booking-ticket .ticket-secure { font-size: 0.74rem; margin-top: 5px; }
.booking-ticket .btn-block { margin-top: 8px; padding: 12px 18px; }
.booking-ticket .ticket-note { font-size: 0.76rem; margin-top: 6px; }
.booking-ticket { top: 76px; }
@media (max-width: 900px) {
  .booking { gap: 14px; }
  .booking .form-grid { gap: 10px 10px; }
  .section-book .section-head { margin-bottom: 14px; }
  .field input, .field select, .field input[type="date"], .bag-stepper { height: 40px; }
  .bag-stepper button { width: 38px; }
  .field textarea { min-height: 48px; height: 48px; }
  .booking-ticket .ticket-assure { display: none; }
}

/* Booking on phones: shave the heading block, checkbox block, and bag/date row */
@media (max-width: 900px) {
  .section-book .section-head { margin-bottom: 10px; }
  .section-book .section-head h2 { font-size: 1.45rem; margin-bottom: 4px; }
  .section-book .section-lede { font-size: 0.9rem; line-height: 1.35; margin-bottom: 2px; }
  .book-contact { font-size: 0.8rem; line-height: 1.3; }
  .field-note { line-height: 1.25; }
  .check { font-size: 0.8rem; line-height: 1.25; gap: 8px; }
  .field-wide .check + .check { margin-top: 4px !important; }
  .field-wide .check strong { font-weight: 600; }
  #book { padding-top: 32px; padding-bottom: 32px; }
}

/* =====================================================
   Global section rhythm: tighter, consistent
   ===================================================== */
.section { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.section-head { margin-bottom: 24px; }
.section-head h2 { margin-bottom: 8px; }
.section-head .section-lede { margin-bottom: 0; }
#designed { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }
#how { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(32px, 4vw, 48px); }
#policies { padding-bottom: 0; }
#gift { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: 0; }
#faq { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero { padding-bottom: clamp(36px, 5vw, 64px); }

/* Pricing: compact panel */
#pricing .section-head { margin-bottom: 18px; }
.price-panel { padding: 14px; border-radius: 16px; }
.price-cards { gap: 12px; }
.price-card { padding: 18px 20px 16px; }
.price-label-top { margin-bottom: 6px; font-size: 0.72rem; }
.price-card .price-big { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: 4px; line-height: 1; }
.price-sub { margin-bottom: 10px; font-size: 0.92rem; }
.price-foot { padding: 5px 10px; font-size: 0.82rem; }
.price-panel-foot { padding: 12px 4px 0; gap: 12px; }
.price-terms { font-size: 0.9rem; gap: 6px 20px; }
.price-panel-foot .btn { padding: 12px 20px; }
@media (max-width: 760px) {
  .price-card { padding: 12px 14px 12px; }
  .price-card .price-big { font-size: 1.8rem; }
  .price-sub { font-size: 0.86rem; }
  .price-panel-foot { padding-top: 10px; }
  .price-terms { font-size: 0.84rem; gap: 4px 14px; }
}

/* Designed for: less air */
.designed-nice { gap: 12px; }
.designed-nice .d-tile { padding: 14px 16px; }
.designed-biz { margin-top: 18px; font-size: 0.92rem; }

/* Gift panel and FAQ: less air */
.gift-panel { padding: clamp(18px, 3vw, 28px); gap: clamp(18px, 3vw, 36px); }
.gift-copy h2 { margin-bottom: 6px; }
.faq summary { padding: 13px 0; }
.faq details p { margin-bottom: 12px; }
#faq .section-head { margin-bottom: 14px; }

/* Phones: one notch tighter still */
@media (max-width: 600px) {
  .section { padding-top: 32px; padding-bottom: 32px; }
  #designed, #gift, #faq { padding-top: 30px; }
  #faq { padding-bottom: 36px; }
  .section-head { margin-bottom: 14px; }
  .hero { padding-bottom: 28px; }
  .designed-nice { gap: 8px; }
  .designed-nice .d-tile { padding: 10px 12px; }
  .gift-panel { padding: 16px; }
  .faq summary { padding: 11px 0; font-size: 0.92rem; }
}


/* ===== Mobile hamburger menu ===== */
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; margin-left: 4px; }
.nav-toggle span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 3px solid var(--tag); outline-offset: 2px; }
.mobile-menu { display: none; }
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .topbar .topbar-cta { margin-left: auto; padding: 9px 14px; font-size: 0.85rem; }
  .mobile-menu {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 0; z-index: 19;
    padding: calc(64px + env(safe-area-inset-top, 0px)) var(--gutter) 22px;
    background: color-mix(in srgb, var(--navy-deep) 97%, transparent); backdrop-filter: blur(12px);
    box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); border-bottom: 1px solid rgba(255,255,255,.08);
    animation: menuin .22s ease both;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { color: #fff; text-decoration: none; font: 600 1.05rem var(--display); padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .mobile-menu a:last-of-type { border-bottom: 0; }
  .mobile-menu a:active { color: var(--tag); }
  .mobile-menu-contact { margin: 14px 0 0; font-size: 0.9rem; color: #b9c6d8; }
  .mobile-menu-contact a { color: var(--tag); font-weight: 600; }
  .mobile-menu-contact:empty { display: none; }
  body.menu-open { overflow: hidden; }
  @keyframes menuin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu { animation: none; } }

/* Mobile menu: sit above the header, full-size button */
@media (max-width: 820px) {
  .topbar { z-index: 30; }
  .mobile-menu { z-index: 25; }
  .nav-toggle { flex: none; width: 44px; min-width: 44px; margin-left: 2px; }
  .topbar { gap: 10px; padding-left: 14px; padding-right: 10px; }
  .topbar .brand-name { font-size: 0.95rem; }
  .topbar .topbar-cta { padding: 8px 12px; font-size: 0.82rem; }
}
@media (max-width: 820px) { .mobile-menu { padding-top: calc(84px + env(safe-area-inset-top, 0px)); } }


/* ===== Policy cards: final polish (grid, icons, note typography) ===== */
.policy-cards.policy-acc { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 24px; }
.policy-acc .policy-card { min-width: 0; }
.policy-acc .policy-body { padding: 0 20px 20px; }
.policy-acc .policy-body > *:last-child { margin-bottom: 0; }

/* Icons: fixed-size, baseline-locked, never wrap against text */
.policy-acc .accept-list li { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; font-size: 0.93rem; line-height: 1.45; overflow-wrap: anywhere; }
.policy-acc .accept-list li::before { width: 20px; height: 20px; margin-top: 1px; font-size: 0.7rem; line-height: 20px; text-align: center; place-items: initial; }
.policy-acc .ready-list li { padding-left: 18px; overflow-wrap: anywhere; font-size: 0.93rem; line-height: 1.5; }
.policy-acc .ready-list li::before { top: 0.62em; }

/* Note under card 1: same weight system as the bullet leads */
.policy-acc .policy-why { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--powder); border-left: 3px solid var(--cobalt); }
.policy-acc .policy-why strong { display: block; font: 700 0.9rem/1.3 var(--body); color: var(--navy); margin-bottom: 3px; }
.policy-acc .policy-why p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.policy-acc .policy-why a { color: var(--cobalt); font-weight: 600; }

/* Sub-headings and list leads share one weight */
.policy-acc .policy-sub { font-weight: 700; }
.policy-acc .ready-list strong { font-weight: 700; }

@media (max-width: 960px) { .policy-cards.policy-acc { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) {
  .policy-cards.policy-acc { gap: 10px; }
  .policy-acc .policy-body { padding: 0 16px 16px; }
  .policy-acc .accept-list li, .policy-acc .ready-list li { font-size: 0.88rem; }
  .policy-acc .policy-why { padding: 10px 12px; }
  .policy-acc .policy-why p { font-size: 0.84rem; }
}

/* =====================================================================
   PHONE = DESKTOP. Final overrides: same design on every screen, only
   scaled. Undo every earlier mobile rule that changed layout or style.
   ===================================================================== */
@media (max-width: 900px) {
  /* Alignment: left-aligned like desktop, not centered */
  .hero, .section-head, .designed-biz, .calc-controls, .footer, .price-note { text-align: left !important; }
  .section-head { margin-left: 0 !important; margin-right: 0 !important; }
  .hero .lede { margin-left: 0 !important; margin-right: 0 !important; }
  .zipcheck { margin-left: 0 !important; max-width: 100% !important; }
  .trust { justify-content: start !important; margin-left: 0 !important; max-width: 100% !important; }

  /* Hero card: keep the tilt and the corner badge exactly like desktop */
  .hero-ticket { transform: rotate(-1.2deg) !important; margin: 24px 0 0 !important; max-width: 100% !important; }
  .hero-card { animation: settle .6s cubic-bezier(.2,.8,.2,1) both, hover-bob 6s ease-in-out 1s infinite !important; }
  .hero-card .ticket-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding-right: 72px !important; flex-wrap: nowrap !important; }
  .spin-badge { position: absolute !important; top: -22px !important; right: -10px !important; width: 84px !important; height: 84px !important; margin: 0 !important; display: block !important; }
  .hero-card .value-big { font-size: 3rem !important; }
  .hero-card .value-sub { font-size: 0.95rem !important; }
  .hero-bonus { font-size: 0.92rem !important; padding: 10px 14px !important; }
  .hero-badges { font-size: 0.9rem !important; gap: 8px !important; }

  /* Steps: same white cards, same icon panel, one per row so they read like desktop */
  #how .steps-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
  #how .steps-cards li { padding: 26px 24px 24px !important; padding-top: 22px !important; border-radius: var(--radius) !important; text-align: left !important; }
  #how .step-visual { height: 96px !important; max-height: 96px !important; margin-bottom: 16px !important; border-radius: 12px !important; }
  #how .step-visual svg, #how .steps-cards .step-visual svg { width: 48px !important; height: 48px !important; }
  #how .steps-cards .step-n { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; top: 12px !important; left: 12px !important; border-radius: 9px !important; }
  #how .steps-cards li:nth-child(2)::after { font-size: 0.72rem !important; top: 14px !important; right: 12px !important; }
  #how .steps-cards li h3 { font-size: 1.08rem !important; }
  #how .steps-cards li p { font-size: 1rem !important; }

  /* Designed for: same tiles, two per row */
  .designed-nice { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .designed-nice .d-tile { flex-direction: row !important; padding: 14px 16px !important; }

  /* Pricing: same panel and cards, stacked */
  .price-cards { grid-template-columns: 1fr !important; }
  .price-card { display: block !important; padding: 22px 22px 20px !important; }
  .price-card .price-big { font-size: 2.4rem !important; margin-bottom: 6px !important; }
  .price-sub { font-size: 0.95rem !important; margin-bottom: 12px !important; }
  .price-panel-foot { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
  .price-terms { justify-content: flex-start !important; }
  .price-panel-foot .btn { width: 100% !important; }

  /* Booking: same order as desktop (form, then ticket), every ticket line present */
  .booking { display: flex !important; flex-direction: column !important; gap: 24px !important; }
  .booking-ticket { order: 2 !important; position: static !important; padding: 22px 24px 24px !important; }
  .booking-ticket .ticket-assure { display: grid !important; }
  .booking-ticket .ticket-coord { display: block !important; }
  .booking-ticket .ticket-total-pop strong { font-size: 2rem !important; }
  .booking .form-grid { grid-template-columns: 1fr 1fr !important; gap: 16px 14px !important; }
  .booking .form-grid .field:nth-child(1), .booking .form-grid .field:nth-child(5), .booking .form-grid .field-wide { grid-column: 1 / -1 !important; }
  .booking .form-grid .field:nth-child(4) { grid-column: auto !important; }
  .field input, .field select, .field input[type="date"], .bag-stepper { height: 46px !important; }
  .seg { grid-template-columns: 1fr 1fr !important; }

  /* Policies: same three cards, all open, stacked. No accordion on phones. */
  .policy-cards.policy-acc { grid-template-columns: 1fr !important; gap: 16px !important; }
  .policy-acc summary { pointer-events: none !important; padding-bottom: 12px !important; }
  .policy-acc summary::after { display: none !important; }
  .policy-acc details > .policy-body { display: block !important; }
  .policy-acc .policy-card { padding: 0 !important; }

  /* Gift cards: same three options in a row */
  .gift-options { grid-template-columns: repeat(3, 1fr) !important; }
  .gift-opt { align-items: flex-start !important; text-align: left !important; }

  /* FAQ: single column is the only change */
  .faq-grid { grid-template-columns: 1fr !important; }

  /* Section rhythm: desktop values scaled, not restyled */
  .section { padding-top: 48px !important; padding-bottom: 48px !important; }
  #how { padding-top: 36px !important; padding-bottom: 36px !important; }
  .section-head { margin-bottom: 24px !important; }
  h2 { font-size: 1.7rem !important; }
}
@media (max-width: 340px) {
  .designed-nice { grid-template-columns: 1fr !important; }
  .gift-options { grid-template-columns: 1fr !important; }
  .booking .form-grid { grid-template-columns: 1fr !important; }
}

/* ===== Phone = desktop, pass 2: remove every remaining style difference the diff found ===== */
@media (max-width: 900px) {
  .d-tile { border-radius: 16px !important; }
  .d-icon { border-radius: 14px !important; }
  .price-card, .price-card-main { align-items: normal !important; display: block !important; grid-template-areas: none !important; }
  .price-panel-foot { flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; }
  .price-panel-foot .btn { width: auto !important; }
  .booking { display: grid !important; grid-template-columns: 1fr !important; }
  .booking-ticket { order: 0 !important; position: sticky !important; top: 88px !important; }
  .policy-card { display: block !important; }
  .faq.faq-grid { display: grid !important; grid-template-columns: 1fr !important; align-items: start !important; }
}
@media (max-width: 900px) {
  .trust { justify-content: normal !important; }
  .booking { flex-direction: row !important; }
}
@media (max-width: 900px) { .price-terms { justify-content: normal !important; } }

/* How it works on phones: same cards, two per row, scaled */
@media (max-width: 900px) {
  #how .steps-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  #how .steps-cards li { padding: 18px 14px 14px !important; padding-top: 18px !important; }
  #how .step-visual { height: 64px !important; max-height: 64px !important; margin-bottom: 12px !important; }
  #how .step-visual svg, #how .steps-cards .step-visual svg { width: 32px !important; height: 32px !important; }
  #how .steps-cards .step-n { width: 26px !important; height: 26px !important; font-size: 0.82rem !important; top: 8px !important; left: 8px !important; }
  #how .steps-cards li:nth-child(2)::after { font-size: 0.6rem !important; top: 10px !important; right: 8px !important; }
  #how .steps-cards li h3 { font-size: 0.95rem !important; margin-bottom: 4px !important; }
  #how .steps-cards li p { font-size: 0.82rem !important; line-height: 1.35 !important; }
}
@media (max-width: 340px) { #how .steps-cards { grid-template-columns: 1fr !important; } }

/* Mobile menu: compact, starts exactly under the header, explicit close button, tap outside to close */
.menu-backdrop { display: none; }
@media (max-width: 820px) {
  .mobile-menu { top: var(--menu-top, 64px) !important; padding-top: 6px !important; padding-bottom: 12px !important; max-height: calc(100vh - var(--menu-top, 64px)); overflow-y: auto; }
  .mobile-menu a { padding: 9px 4px !important; font-size: 0.98rem !important; }
  .mobile-menu-contact { margin: 8px 0 0 !important; font-size: 0.84rem !important; }
  .mobile-menu-close { margin-top: 10px; width: 100%; padding: 10px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.07); color: #fff; font: 600 0.92rem var(--display); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .mobile-menu-close:active { background: rgba(255,255,255,.14); }
  .menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 18; background: rgba(9,29,53,.45); }
}