/* ==========================================================================
   Shady Hollow Suds — Booking Landing Page
   Fonts: Fredoka (display) / Inter (body) — matches printed flyer system
   ========================================================================== */

@font-face { font-family:'Fredoka'; font-weight:700; src:url('Fredoka-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Fredoka'; font-weight:600; src:url('Fredoka-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Fredoka'; font-weight:500; src:url('Fredoka-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:400; src:url('Inter-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:600; src:url('Inter-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:700; src:url('Inter-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:900; src:url('Inter-Black.ttf') format('truetype'); font-display:swap; }

:root{
  /* Brand palette — lifted directly from the printed flyer */
  --navy:#0B4F73;
  --blue:#1C8FCC;
  --blue-deep:#124E73;
  --card-blue:#4274B9;
  --card-teal:#0099a7;
  --purple:#5F499E;
  --green:#2AA84A;
  --card-green:#32A649;
  --maroon:#B84359;
  --orange:#C76E29;
  --gold:#F2A400;
  --yellow:#FFD966;
  --badge-red:#C7112F;
  --badge-black:#141414;

  --bg:#FFFFFF;
  --bg-cream:#FDF4EC;
  --bg-soft:#F7FAFB;
  --text:#20303A;
  --text-body:#3E4C53;
  --text-muted:#7A8890;
  --text-faint:#9AA6AB;
  --border:#D9E2E5;

  --radius-sm:0.5rem;
  --radius-md:0.9rem;
  --radius-lg:1.5rem;
  --radius-pill:999px;

  --shadow-card: 0 2px 10px rgba(11,79,115,0.07), 0 1px 2px rgba(11,79,115,0.06);
  --shadow-lift: 0 12px 28px rgba(11,79,115,0.14);

  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.975rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --text-hero: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  color:var(--text-body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:'Fredoka', sans-serif; margin:0; line-height:1.08; color:var(--text); }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:640px; margin-inline:auto; padding-inline:var(--space-5); }
@media (min-width:900px){ .container{ max-width:880px; } }

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

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  width:100%;
  aspect-ratio: 1371 / 1080;
  /* never crop so much that the logo strip at the bottom is cut off */
  max-height: max(62vh, 27vw);
  overflow:hidden;
  background:var(--blue-deep);
}
.hero picture{ display:block; width:100%; height:100%; }
.hero img{
  width:100%; height:100%; object-fit:cover; object-position:center 100%;
}
/* hero gradient overlay removed Oct 2026 */
.hero-ribbon{
  position:absolute; left:calc(-1 * var(--space-2));
  /* sit just below the "SHADY HOLLOW SUDS" wall letters when they are visible */
  top:max(var(--space-5), calc(100% - 61vw));
  z-index:2;
  background:var(--yellow); color:var(--navy);
  font-family:'Fredoka'; font-weight:700; font-size:var(--text-sm);
  padding:var(--space-2) var(--space-6) var(--space-2) var(--space-5);
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  transform:rotate(-3deg);
  box-shadow:var(--shadow-card);
  letter-spacing:0.02em;
}

/* ---------------- Logo band ---------------- */
.logo-band{
  background:linear-gradient(180deg, var(--blue-deep) 0%, var(--navy) 100%);
  padding: var(--space-8) var(--space-5) var(--space-10);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.logo-band .tagline{
  margin-top:var(--space-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-1);
}
.tagline-line1{
  font-family:'Fredoka'; font-weight:700;
  font-size:clamp(1.6rem, 1.25rem + 3vw, 2.6rem);
  color:var(--yellow);
  letter-spacing:0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,0.25);
  line-height:1.1;
  white-space:nowrap;
}
@media (max-width:420px){
  .tagline-line1{ white-space:normal; }
}
.tagline-line2{
  font-family:'Fredoka'; font-weight:500;
  font-size:var(--text-lg);
  color:#FFFFFF;
  opacity:0.92;
}

/* ---------------- Book Now CTA ---------------- */
.book-cta{
  position:relative;
  text-align:center;
  padding: var(--space-10) var(--space-5) var(--space-6);
  background:var(--bg-soft);
}
.ask-question-btn{
  display:inline-block;
  margin:0 auto var(--space-4);
  text-decoration:none;
  font-family:'Fredoka'; font-weight:600;
  font-size:var(--text-xs);
  color:var(--navy);
  background:#fff;
  padding: var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);
  border:2px solid var(--navy);
  box-shadow:var(--shadow-card);
  transition: transform 0.18s ease, background 0.18s ease;
  z-index:2;
}
.ask-question-btn:hover{ transform:translateY(-1px); background:var(--bg-soft); }
@media (min-width:640px){
  .ask-question-btn{
    position:absolute;
    top:var(--space-4);
    right:var(--space-5);
    margin:0;
  }
}
.book-cta__eyebrow{
  font-size:var(--text-sm); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--space-2);
}
.book-cta__link{
  display:inline-block;
  text-decoration:none;
  font-family:'Fredoka'; font-weight:700;
  font-size:var(--text-2xl);
  color:var(--navy);
  background:var(--yellow);
  padding: var(--space-4) var(--space-10);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lift);
  border:3px solid var(--navy);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.book-cta__link:hover{ transform:translateY(-2px) scale(1.02); }
.book-cta__sub{
  margin-top:var(--space-4);
  font-size:var(--text-sm);
  color:var(--text-muted);
}

/* ---------------- Booking form ---------------- */
.booking{
  padding: var(--space-10) 0 var(--space-6);
  background:var(--bg);
}
.booking .section-title{
  font-size:var(--text-2xl);
  text-align:center;
  margin-bottom:var(--space-2);
}
.booking .section-sub{
  text-align:center; color:var(--text-muted); font-size:var(--text-base);
  margin-bottom:var(--space-8);
}
.form-card{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
}
@media (min-width:900px){ .form-card{ padding:var(--space-10); } }

.field-group{ margin-bottom:var(--space-8); }
.field-group legend, .field-group .legend{
  font-family:'Fredoka'; font-weight:600; font-size:var(--text-lg);
  color:var(--navy); margin-bottom:var(--space-3); display:block;
}

/* Calendar */
.cal-hint{
  font-size:var(--text-xs); color:var(--text-faint); margin-bottom:var(--space-3);
  display:flex; align-items:center; gap:var(--space-2);
}
.cal-hint .swatch{
  width:14px; height:14px; border-radius:4px; background:#E3E7E9; border:1px solid var(--border); display:inline-block;
}
.calendar{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-4); box-shadow:var(--shadow-card);
}
.calendar__header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-3);
}
.calendar__month{ font-family:'Fredoka'; font-weight:600; font-size:var(--text-base); color:var(--text); }
.calendar__nav{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-size:var(--text-base); color:var(--navy); font-weight:700;
}
.calendar__nav:disabled{ opacity:0.35; cursor:not-allowed; }
.calendar__grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:var(--space-1);
  text-align:center;
}
.calendar__dow{
  font-size:var(--text-xs); font-weight:700; color:var(--text-faint); padding-block:var(--space-1);
}
.calendar__day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--text-body);
  border:1px solid transparent; background:transparent;
}
.calendar__day.is-empty{ visibility:hidden; }
.calendar__day.is-open{ background:#EAF6EE; color:var(--green); font-weight:700; border-color:#CDEBD6; }
.calendar__day.is-open:hover{ background:var(--green); color:#fff; }
.calendar__day.is-booked{ background:#E3E7E9; color:#B7BEC2; text-decoration:line-through; cursor:not-allowed; }
.calendar__day.is-past{ background:transparent; color:#DCE2E4; cursor:not-allowed; }
.calendar__day.is-selected{ background:var(--navy) !important; color:#fff !important; box-shadow:0 0 0 3px rgba(11,79,115,0.25); }

.date-select-row{
  margin-top:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-2);
}

/* Time slots */
.time-slot-block{ margin-top:var(--space-6); }
.time-slot-label{
  display:block; font-size:var(--text-sm); font-weight:600; color:var(--text); margin-bottom:var(--space-2);
}
.time-slot-hours{ font-weight:400; color:var(--text-muted); }
.cal-hint .swatch--time{ background:#E3E7E9; border-radius:50%; }
.time-slots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2);
  margin-top:var(--space-3);
}
@media (min-width:640px){ .time-slots{ grid-template-columns:repeat(4,1fr); } }
.time-slot{
  font-family:'Inter'; font-weight:600; font-size:var(--text-xs);
  padding:var(--space-2) var(--space-1); border-radius:var(--radius-sm);
  border:1px solid var(--border); background:#fff; color:var(--text-body);
  text-align:center; line-height:1.3;
}
.time-slot.is-open{ background:#EAF6EE; color:var(--green); border-color:#CDEBD6; font-weight:700; }
.time-slot.is-open:hover{ background:var(--green); color:#fff; }
.time-slot.is-taken, .time-slot.is-toolate, .time-slot.is-needservice{
  background:#E3E7E9; color:#B7BEC2; text-decoration:line-through; cursor:not-allowed;
}
.time-slot.is-selected{ background:var(--navy) !important; color:#fff !important; box-shadow:0 0 0 3px rgba(11,79,115,0.25); text-decoration:none; }
.time-slot:disabled{ cursor:not-allowed; }
.time-slot-summary{
  margin-top:var(--space-3); font-size:var(--text-sm); font-weight:600; color:var(--navy); min-height:1.2em;
}
.time-slot-empty{ font-size:var(--text-sm); color:var(--text-muted); font-style:italic; grid-column:1/-1; padding:var(--space-2) 0; }
label{ font-size:var(--text-sm); font-weight:600; color:var(--text); }
select, input[type="text"], input[type="tel"]{
  font-family:'Inter'; font-size:var(--text-base); color:var(--text);
  padding:var(--space-3) var(--space-4);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; width:100%;
}
select:focus, input:focus{ outline:2px solid var(--blue); outline-offset:1px; }

.form-grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-4);
}
@media (min-width:640px){
  .form-grid.cols-2{ grid-template-columns:1fr 1fr; }
  .form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
}
.field{ display:flex; flex-direction:column; gap:var(--space-2); }

/* Service toggle buttons */
.service-toggles{
  display:grid; grid-template-columns:1fr; gap:var(--space-3);
}
/* Packages always stacked in one column (Oct 26, 2026) */
.service-toggles{ grid-template-columns:1fr; }
.svc-btn{
  --svc-color: var(--card-blue);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  background:#fff; border:2px solid var(--svc-color); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4); text-align:left;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.svc-btn[data-color="teal"]{ --svc-color: var(--card-teal); }
.svc-btn[data-color="blue"]{ --svc-color: var(--card-blue); }
.svc-btn[data-color="purple"]{ --svc-color: var(--purple); }
.svc-btn[data-color="green"]{ --svc-color: var(--card-green); }
.svc-btn[data-color="maroon"]{ --svc-color: var(--maroon); }
.svc-btn[data-color="orange"]{ --svc-color: var(--orange); }
.svc-btn__left{ display:flex; align-items:center; gap:var(--space-3); }
.svc-btn__num{
  width:28px; height:28px; border-radius:50%; background:var(--svc-color); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Fredoka'; font-weight:700; font-size:var(--text-sm);
  flex-shrink:0;
}
.svc-btn__title{ font-weight:700; color:var(--text); font-size:var(--text-sm); }
.svc-btn__sub{ font-size:var(--text-xs); color:var(--text-muted); display:block; }
.svc-btn__price{ font-family:'Fredoka'; font-weight:700; color:var(--svc-color); font-size:var(--text-base); white-space:nowrap; }
.svc-btn.is-active{ background:var(--svc-color); }
.svc-btn.is-active .svc-btn__title, .svc-btn.is-active .svc-btn__sub{ color:#fff; }
.svc-btn.is-active .svc-btn__price{ color:#fff; }
.svc-btn.is-active .svc-btn__num{ background:#fff; color:var(--svc-color); }
.svc-btn:active{ transform:scale(0.98); }

.total-row{
  margin-top:var(--space-4);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-cream); border:1.5px dashed var(--orange); border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);
}
.total-row__label{ font-size:var(--text-sm); font-weight:700; color:var(--text); }
.total-row__value{ font-family:'Fredoka'; font-weight:700; font-size:var(--text-lg); color:var(--orange); }

.special-services{
  margin-top:var(--space-4);
  background:#244D70;
  color:#FFFFFF;
  border-radius:var(--radius-md);
  padding:var(--space-5);
  border-left:4px solid #00EAFF;
  box-shadow:var(--shadow-card);
}
.special-services__header-img{
  display:block; margin:0 auto var(--space-4); max-width:100%; height:auto;
  border-radius:var(--radius-md);
}
.special-services__title{
  font-family:'Fredoka', sans-serif; font-weight:700;
  font-size:clamp(1.4375rem, 1.3125rem + 0.625vw, 1.75rem);
  color:#FFFFFF; text-align:center; margin-bottom:var(--space-3);
}
.special-services__intro{
  font-size:var(--text-sm); color:#E8E8E8; line-height:1.55; margin-bottom:var(--space-3);
}
.special-services__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.special-services__list li{
  position:relative; padding-left:1.5rem;
  font-size:var(--text-sm); line-height:1.55; color:#F0F0F0;
}
.special-services__list li::before{
  content:'\2713'; position:absolute; left:0; top:0;
  color:#00EAFF; font-weight:700;
}
.special-services__list strong{ color:#00EAFF; }

.submit-row{ margin-top:var(--space-8); text-align:center; }
.submit-btn{
  font-family:'Fredoka'; font-weight:700; font-size:var(--text-xl);
  background:var(--green); color:#fff; border:none;
  padding:var(--space-4) var(--space-12); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lift);
  width:100%;
}
@media (min-width:640px){ .submit-btn{ width:auto; } }
.submit-btn:hover{ background:#218c3d; }
.form-msg{
  margin-top:var(--space-4); text-align:center; font-size:var(--text-sm); font-weight:600;
  padding:var(--space-3); border-radius:var(--radius-sm); display:none;
}
.form-msg.is-error{ display:block; background:#FBEAEC; color:var(--maroon); }
.form-msg.is-success{ display:block; background:#E9F7EC; color:var(--green); }

/* ---------------- Services detail ---------------- */
.services{
  background:var(--bg-soft);
  padding:var(--space-16) 0;
}
.services .section-title{ text-align:center; font-size:var(--text-xl); margin-bottom:var(--space-2); }
.services .section-title .accent{ color:var(--green); }
.services .section-sub{ text-align:center; color:var(--text-muted); margin-bottom:var(--space-8); }
.svc-card{
  position:relative;
  background:#fff; border-radius:var(--radius-md); border:1.5px solid var(--border);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4);
  display:flex; gap:var(--space-4); align-items:flex-start;
}
.svc-card[data-color="teal"]{ border-color:var(--card-teal); background:var(--bg-soft); }
.svc-card[data-color="blue"]{ border-color:var(--card-blue); background:var(--bg-soft); }
.svc-card[data-color="purple"]{ border-color:var(--purple); background:var(--bg-soft); }
.svc-card[data-color="green"]{ border-color:var(--card-green); background:var(--bg-soft); }
.svc-card[data-color="maroon"]{ border-color:var(--maroon); background:var(--bg-soft); }
.svc-card[data-color="orange"]{ border-color:var(--orange); background:var(--bg-cream); border-width:2px; }
.svc-card__num{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka'; font-weight:700; color:#fff; font-size:var(--text-base);
}
.svc-card[data-color="teal"] .svc-card__num{ background:var(--card-teal); }
.svc-card[data-color="blue"] .svc-card__num{ background:var(--card-blue); }
.svc-card[data-color="purple"] .svc-card__num{ background:var(--purple); }
.svc-card[data-color="green"] .svc-card__num{ background:var(--card-green); }
.svc-card[data-color="maroon"] .svc-card__num{ background:var(--maroon); }
.svc-card[data-color="orange"] .svc-card__num{ background:var(--orange); }
.svc-card__body{ flex:1; min-width:0; }
.svc-card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; }
.svc-card__title{ font-family:'Fredoka'; font-weight:600; font-size:var(--text-base); color:var(--text); }
.svc-card__label{ font-size:var(--text-xs); font-weight:700; color:var(--text-muted); margin-left:var(--space-2); }
.svc-card__price{ font-family:'Fredoka'; font-weight:700; font-size:var(--text-lg); white-space:nowrap; }
.svc-card[data-color="teal"] .svc-card__price{ color:var(--card-teal); }
.svc-card[data-color="blue"] .svc-card__price{ color:var(--card-blue); }
.svc-card[data-color="purple"] .svc-card__price{ color:var(--purple); }
.svc-card[data-color="green"] .svc-card__price{ color:var(--card-green); }
.svc-card[data-color="maroon"] .svc-card__price{ color:var(--maroon); }
.svc-card[data-color="orange"] .svc-card__price{ color:var(--orange); }
.svc-card__desc{ font-size:var(--text-sm); color:var(--text-body); margin-top:var(--space-1); }
.best-tag{
  position:absolute; top:-13px; left:var(--space-5);
  background:linear-gradient(180deg,var(--yellow),var(--gold));
  color:var(--navy); font-family:'Fredoka'; font-weight:700; font-size:var(--text-xs);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  border:1.5px solid var(--navy); transform:rotate(-2deg);
}

/* ---------------- Who We Are ---------------- */
.who-we-are{ padding:var(--space-16) 0 var(--space-8); background:var(--bg-soft); }
.who-we-are .section-title{ text-align:center; font-size:var(--text-xl); margin-bottom:var(--space-5); }
.who-we-are .section-title .accent{ color:var(--card-green); }
.who-arrows{ color:var(--purple); font-family:'Fredoka'; }
.who-arrows--end{ color:var(--maroon); }
.who-we-are__body{
  max-width:56ch; margin-inline:auto; text-align:center;
  font-size:var(--text-base); color:var(--text-body); line-height:1.6;
}

/* ---------------- Footer ---------------- */
.site-footer{
  background:linear-gradient(180deg, var(--blue) 0%, var(--navy) 100%);
  color:#fff; padding:var(--space-12) 0 var(--space-8);
}
.site-footer__cta{ font-family:'Fredoka'; font-weight:700; color:var(--yellow); font-size:var(--text-xl); margin-bottom:var(--space-3); }
.site-footer__row{ font-size:var(--text-base); margin-bottom:var(--space-2); font-weight:600; }
.site-footer__row a{ text-decoration:none; }
.site-footer__meta{ margin-top:var(--space-6); font-size:var(--text-sm); color:rgba(255,255,255,0.75); }
.site-footer__legal{
  margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid rgba(255,255,255,0.2);
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6);
  font-size:var(--text-xs); color:rgba(255,255,255,0.65);
}
.site-footer__legal a{ text-decoration:underline; }

/* Legal pages */
.legal-page{ max-width:680px; margin:0 auto; padding:var(--space-16) var(--space-5); }
.legal-page h1{ font-size:var(--text-xl); margin-bottom:var(--space-6); }
.legal-page h2{ font-size:var(--text-lg); margin-top:var(--space-8); margin-bottom:var(--space-3); }
.legal-page p{ margin-bottom:var(--space-4); line-height:1.65; color:var(--text-body); }
.legal-page a.back{ display:inline-block; margin-bottom:var(--space-8); color:var(--navy); font-weight:700; text-decoration:none; }

.time-slot-notice{ font-style:normal; color:#7A4E00; background:#FFF6DB; border:1px solid #F2D58A; border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); line-height:1.45; }
.time-slot-notice strong{ display:block; color:#5C3B00; margin-bottom:2px; }

/* Extra service colors (added Oct 2026) */
.svc-btn[data-color="navy"]{ --svc-color:#0B4F73; }
.svc-card[data-color="navy"]{ border-color:#0B4F73; background:var(--bg-soft); }
.svc-card[data-color="navy"] .svc-card__num{ background:#0B4F73; }
.svc-card[data-color="navy"] .svc-card__price{ color:#0B4F73; }
.svc-btn[data-color="sky"]{ --svc-color:#1C7FB8; }
.svc-card[data-color="sky"]{ border-color:#1C7FB8; background:var(--bg-soft); }
.svc-card[data-color="sky"] .svc-card__num{ background:#1C7FB8; }
.svc-card[data-color="sky"] .svc-card__price{ color:#1C7FB8; }
.svc-btn[data-color="aqua"]{ --svc-color:#0E8C7E; }
.svc-card[data-color="aqua"]{ border-color:#0E8C7E; background:var(--bg-soft); }
.svc-card[data-color="aqua"] .svc-card__num{ background:#0E8C7E; }
.svc-card[data-color="aqua"] .svc-card__price{ color:#0E8C7E; }
.svc-btn[data-color="indigo"]{ --svc-color:#3B47A8; }
.svc-card[data-color="indigo"]{ border-color:#3B47A8; background:var(--bg-soft); }
.svc-card[data-color="indigo"] .svc-card__num{ background:#3B47A8; }
.svc-card[data-color="indigo"] .svc-card__price{ color:#3B47A8; }
.svc-btn[data-color="red"]{ --svc-color:#C7112F; }
.svc-card[data-color="red"]{ border-color:#C7112F; background:var(--bg-soft); }
.svc-card[data-color="red"] .svc-card__num{ background:#C7112F; }
.svc-card[data-color="red"] .svc-card__price{ color:#C7112F; }
.svc-btn[data-color="pink"]{ --svc-color:#C23A78; }
.svc-card[data-color="pink"]{ border-color:#C23A78; background:var(--bg-soft); }
.svc-card[data-color="pink"] .svc-card__num{ background:#C23A78; }
.svc-card[data-color="pink"] .svc-card__price{ color:#C23A78; }
.svc-btn[data-color="gold"]{ --svc-color:#B07A00; }
.svc-card[data-color="gold"]{ border-color:#B07A00; background:var(--bg-soft); }
.svc-card[data-color="gold"] .svc-card__num{ background:#B07A00; }
.svc-card[data-color="gold"] .svc-card__price{ color:#B07A00; }
.svc-btn[data-color="lime"]{ --svc-color:#5E8F14; }
.svc-card[data-color="lime"]{ border-color:#5E8F14; background:var(--bg-soft); }
.svc-card[data-color="lime"] .svc-card__num{ background:#5E8F14; }
.svc-card[data-color="lime"] .svc-card__price{ color:#5E8F14; }
.svc-btn[data-color="brown"]{ --svc-color:#8A5A2B; }
.svc-card[data-color="brown"]{ border-color:#8A5A2B; background:var(--bg-soft); }
.svc-card[data-color="brown"] .svc-card__num{ background:#8A5A2B; }
.svc-card[data-color="brown"] .svc-card__price{ color:#8A5A2B; }
.svc-btn[data-color="slate"]{ --svc-color:#5E6A71; }
.svc-card[data-color="slate"]{ border-color:#5E6A71; background:var(--bg-soft); }
.svc-card[data-color="slate"] .svc-card__num{ background:#5E6A71; }
.svc-card[data-color="slate"] .svc-card__price{ color:#5E6A71; }

/* ---------------- Package cards (Oct 26, 2026) ---------------- */
.svc-group{
  display:flex; align-items:center; gap:var(--space-3);
  font-family:'Fredoka'; font-weight:700; font-size:var(--text-base); letter-spacing:0.08em;
  color:var(--navy); margin:var(--space-8) 0 var(--space-4);
}
.svc-group:first-of-type{ margin-top:0; }
.svc-group::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg, var(--blue), transparent); border-radius:2px; }
.svc-card__plus{ display:block; font-family:'Fredoka'; font-weight:600; font-size:var(--text-sm); color:var(--text-body); margin-top:2px; }
.svc-card__plus + .svc-card__label{ display:inline-block; margin-left:0; margin-top:2px; }
.svc-card__time{ font-size:var(--text-sm); font-weight:600; color:var(--text-muted); margin-top:var(--space-1); }
.svc-card__getlabel{ font-weight:700; font-size:var(--text-sm); color:var(--text); margin-top:var(--space-2); }
.svc-card__get{ list-style:none; padding:0; margin:var(--space-1) 0 0; display:grid; gap:2px; }
.svc-card__get li{ position:relative; padding-left:1.4em; font-size:var(--text-sm); color:var(--text-body); }
.svc-card__get li::before{ content:"\2713"; position:absolute; left:0; top:0; font-weight:700; color:var(--green); }
.svc-card__not{ font-size:var(--text-sm); color:var(--text-body); margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px dashed var(--border); }
.svc-card__not strong{ color:#B84359; }
.svc-card__note{
  font-size:var(--text-sm); font-weight:600; color:var(--navy);
  background:#EAF5FC; border-left:4px solid var(--blue); border-radius:6px;
  padding:var(--space-2) var(--space-3); margin-top:var(--space-2);
}
.best-tag--new{ background:linear-gradient(180deg,#7FD99A,var(--green)); color:#fff; border-color:var(--navy); }
.svc-card--special{ border-style:dashed; border-color:var(--gold); background:#FFFBF0; }
.svc-card--special .svc-card__num{ background:var(--gold); }
.svc-card__price--ask{ color:#B07A00; font-size:var(--text-base); }
.svc-help{
  text-align:center; font-size:var(--text-base); color:var(--text-body);
  margin:var(--space-6) auto 0; max-width:40rem;
}
.svc-help strong{ color:var(--navy); }
.svc-btn-group{
  grid-column:1 / -1; margin:var(--space-2) 0 0; font-family:'Fredoka'; font-weight:700;
  font-size:var(--text-sm); letter-spacing:0.08em; color:var(--navy);
}
.svc-btn-group:first-child{ margin-top:0; }

/* Booking form: every package button is the same size, two lines (Oct 26, 2026).
   Short packages: name + label on line 1, time on line 2.
   Crowded packages: name on line 1, label + time on line 2. */
.svc-btn{ min-height:4.5rem; }
.svc-btn__left{ min-width:0; }
.svc-btn__left > span:last-child{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.svc-btn__title{ line-height:1.25; white-space:nowrap; }
.svc-btn__tag{ font-size:var(--text-xs); font-weight:600; color:var(--text-muted); margin-left:4px; letter-spacing:0.02em; }
.svc-btn__sub{ display:block; line-height:1.35; white-space:nowrap; }
.svc-btn__nowrap{ white-space:nowrap; }
.svc-btn.is-active .svc-btn__tag{ color:#fff; }
@media (max-width:480px){
  .svc-btn{ padding:var(--space-3); gap:var(--space-2); }
  .svc-btn__left{ gap:var(--space-2); }
  .svc-btn__num{ width:28px; height:28px; font-size:var(--text-sm); }
}
.svc-btn__left{ flex:1; }
@media (max-width:480px){
  .svc-btn__title{ font-size:0.875rem; }
  .svc-btn__tag{ font-size:0.6875rem; letter-spacing:0; margin-left:2px; }
  .svc-btn__sub{ font-size:0.6875rem; }
  .svc-btn__price{ font-size:1rem; }
}
/* Very narrow phones: let text wrap instead of being cut off. */
@media (max-width:374px){
  .svc-btn__title, .svc-btn__sub{ white-space:normal; }
  .svc-btn{ min-height:5rem; }
}
/* Keep package buttons inside the form on phones. */
.service-toggles{ grid-template-columns:minmax(0, 1fr); }
.svc-btn{ min-width:0; width:100%; }
@media (max-width:480px){
  #bookingForm.form-card{ padding-left:var(--space-3); padding-right:var(--space-3); }
  .svc-btn{ padding:var(--space-2) var(--space-3); }
}
@media (max-width:413px){
  .svc-btn__sub{ font-size:0.65rem; letter-spacing:-0.01em; }
  .svc-btn__left{ gap:6px; }
}
/* Package cards: title stays on one line, price stays on the right (Oct 26, 2026). */
.svc-card__top{ flex-wrap:nowrap; }
.svc-card__top > span:first-child{ flex:1; min-width:0; }
.svc-card__title{ white-space:nowrap; }
@media (max-width:413px){
  .svc-card__title{ font-size:0.95rem; }
  .svc-card__price{ font-size:1.15rem; }
}
.svc-card--special .svc-card__title{ white-space:normal; }
@media (max-width:374px){
  .svc-card__title{ font-size:0.86rem; }
}
.svc-card__title{ margin-right:var(--space-2); }
.svc-card__label{ margin-left:0; display:inline-block; }

/* Van pricing (added after Oct 26, 2026) */
.svc-card__van{
  font-family:'Fredoka'; font-weight:500; font-size:var(--text-sm);
  color:#7A7974; margin-top:var(--space-2); letter-spacing:0.01em;
}
.van-check{
  display:flex; align-items:center; gap:var(--space-3);
  background:#fff; border:2px solid var(--border); border-radius:12px;
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); cursor:pointer;
  font-size:var(--text-base); color:var(--text);
}
.van-check input{ width:22px; height:22px; flex-shrink:0; accent-color:var(--navy); }
.van-check:has(input:checked){ border-color:var(--navy); background:#EAF5FC; }
.van-check__hint{ display:block; font-size:var(--text-xs); color:var(--text-muted); font-weight:400; }

/* Discount code (added Oct 27, 2026) */
.legend-optional{ font-weight:400; color:var(--text-muted); font-size:0.85em; }
.discount-row{ display:flex; gap:var(--space-2); align-items:stretch; }
.discount-row input{
  flex:1; min-width:0; font-size:16px; padding:12px 14px; border:2px solid var(--border);
  border-radius:12px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; background:#fff;
}
.discount-row input::placeholder{ text-transform:none; letter-spacing:0; font-weight:400; }
.discount-row input:focus{ outline:none; border-color:var(--navy); }
.discount-btn{
  flex-shrink:0; padding:0 22px; border:none; border-radius:12px; background:var(--navy); color:#fff;
  font-family:'Fredoka'; font-weight:600; font-size:var(--text-base); cursor:pointer; min-height:48px;
}
.discount-btn:disabled{ opacity:0.6; }
.discount-msg{ margin-top:var(--space-2); font-size:var(--text-sm); font-weight:600; }
.discount-msg.is-ok{ color:#1E7A36; }
.discount-msg.is-error{ color:#B3261E; }
.price-summary{
  margin-top:var(--space-4); background:#F4F9FD; border:2px solid #D3E7F4; border-radius:14px; padding:var(--space-3) var(--space-4);
}
.price-summary__row{ display:flex; justify-content:space-between; padding:4px 0; font-size:var(--text-base); color:var(--text); }
.price-summary__row--disc{ color:#1E7A36; font-weight:600; }
.price-summary__row--total{ border-top:2px dashed #BFD9EA; margin-top:6px; padding-top:10px; font-family:'Fredoka'; font-weight:700; font-size:var(--text-lg); color:var(--navy); }
.price-summary__note{ font-size:var(--text-xs); color:var(--text-muted); margin-top:4px; }

/* Ask a Question + Leave a Review pills (added Oct 27, 2026) */
.cta-pills{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); margin:0 auto var(--space-4); z-index:2; }
.cta-pills .ask-question-btn{ position:static; margin:0; min-width:11.5rem; text-align:center; }
@media (min-width:640px){
  .cta-pills{ position:absolute; top:var(--space-4); right:var(--space-5); margin:0; align-items:stretch; }
}
#leave-review{ scroll-margin-top:var(--space-6); }

/* Review thank-you code note (added Oct 27, 2026) */
.review-reward-note{ margin:6px 0 0; font-size:var(--text-xs); color:#1E7A36; font-weight:600; }