/* ==========================================================================
   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;
  max-height: 62vh;
  overflow:hidden;
  background:var(--blue-deep);
}
.hero img{
  width:100%; height:100%; object-fit:cover; object-position:center 100%;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,79,115,0) 45%, rgba(9,54,78,0.55) 100%);
}
.hero-ribbon{
  position:absolute; top:var(--space-5); left:calc(-1 * var(--space-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);
}
@media (min-width:640px){ .service-toggles{ grid-template-columns:1fr 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; }