// Every hour, 24/7
const WORKING_HOURS = Array.from({ length: 24 }, (_, h) =>
  `${String(h).padStart(2, '0')}:00`
);

// No closed days (was [0] for Sunday)
const CLOSED_DAYS = [];

@font-face{font-family:'Season';src:url('assets/Season.otf') format('opentype');font-display:swap}
@font-face{font-family:'Pushkin High';src:url('assets/Pushkin.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Ailerons';src:url('assets/Ailerons.otf') format('opentype');font-display:swap}
:root{--plum:#4a2138;--sand:#c9b3a8;--rose:#5a3747;--link:#c9b3a8;--tint:rgba(201,179,168,.08)}
*{box-sizing:border-box}html,body{margin:0;padding:0}a{color:var(--link);text-decoration:none}a:focus{outline:2px dashed rgba(201,179,168,.6);outline-offset:4px}
body{background:var(--plum);color:var(--sand);line-height:1.7;font-family:'Season',Georgia,'Times New Roman',serif}
.header-font{font-family:'Season',Georgia,'Times New Roman',serif}
.nav-font{font-family:'Pushkin High','Brush Script MT',cursive}
.about-font{font-family:'Ailerons',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial}

/* BIG banner */
.banner{display:flex;align-items:center;justify-content:center;background:var(--rose);
  color:var(--sand);padding:1.1rem 1rem}
.banner .msg{font-size:2.1rem;letter-spacing:.08em;text-transform:uppercase}
.banner + .divider{height:2px;background:rgba(201,179,168,.35)}

.topbar{display:flex;align-items:center;gap:.75rem;background:transparent;color:var(--sand);
  padding:.5rem 1rem}
.iconbar a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--tint);border:1px solid rgba(201,179,168,.35);transition:.2s transform, .2s background}
.iconbar a:hover{transform:translateY(-2px);background:rgba(201,179,168,.14)}
.topbar .brand{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-weight:700}
.topbar img.logo{width:42px;height:42px;border-radius:999px;border:1px solid rgba(201,179,168,.4)}

/* Navigation with hover */
.nav{display:flex;flex-wrap:wrap;gap:.8rem 1.3rem;justify-content:center;padding:1rem 1.2rem;background:var(--plum);position:sticky;top:0;z-index:10}
.nav a{color:var(--sand);padding:.6rem 1.2rem;border-radius:999px;border:1px solid transparent;font-size:1.5rem;transition:.2s transform,.2s background,.2s border-color}
.nav a:hover{background:var(--tint);border-color:rgba(201,179,168,.4);transform:translateY(-2px)}

.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.footer{text-align:center;color:rgba(201,179,168,.75);border-top:1px solid rgba(201,179,168,.2);padding:1rem;font-size:1rem}

/* Hero with bigger logo */
.hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:72vh}
.hero-left{display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}
.badge{width:430px;height:430px;border:2px solid rgba(201,179,168,.5);border-radius:9999px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 8px rgba(201,179,168,.08)}
.badge:before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,179,168,.35);border-radius:9999px;pointer-events:none}
.badge img{width:95%;height:auto;display:block;margin:0 auto}
.badge small{position:absolute;bottom:20px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.9;text-align:center;width:100%}

.hero-right{display:flex;align-items:center;justify-content:center;padding:2rem}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(201,179,168,.25);border-radius:22px;padding:1.4rem 1.3rem;width:min(560px,92%)}
.card h1{margin:.25rem 0 .4rem;font-size:2.8rem;text-align:center}
.card p{margin:.4rem 0 0;font-size:1.2rem;text-align:center}
.cta{margin-top:1.15rem;display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.btn{background:var(--sand);color:var(--plum);border:none;padding:.8rem 1.15rem;border-radius:14px;font-weight:800;font-size:1.08rem}

.section h2{font-size:2.3rem;margin:.2rem 0 1rem;text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.card-lite{background:rgba(255,255,255,.04);border:1px solid rgba(201,179,168,.25);border-radius:18px;padding:1rem 1.1rem}

ul.clean{list-style:none;padding-left:1rem;margin:0;display:grid;gap:.4rem}
li.dot{position:relative;padding-left:1rem}
li.dot:before{content:"•";position:absolute;left:0;color:var(--sand);opacity:.9}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(201,179,168,.25);padding:.65rem .6rem;text-align:left}
.table caption{caption-side:top;text-align:left;font-weight:700;margin-bottom:.5rem}

.note{opacity:.85;font-style:italic;text-align:center}

/* iPad frame */
.ipad{width:380px;border-radius:30px;background:#1e1e1e;padding:16px;border:2px solid rgba(201,179,168,.35);box-shadow:inset 0 0 0 3px #2a2a2a,0 10px 30px rgba(0,0,0,.35);position:relative;margin:0 auto}
.ipad:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:7px;background:#0d0d0d;border-radius:7px}
.ipad img{display:block;width:100%;height:auto;border-radius:16px}

.center{text-align:center}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.feature-card{background:rgba(255,255,255,.05);border:1px solid rgba(201,179,168,.25);border-radius:16px;padding:1rem;display:grid;gap:.6rem;justify-items:center}
.feature-card svg{width:88px;height:88px}
.feature-card h3{margin:.2rem 0 0}
.feature-card p{margin:0;text-align:center;opacity:.9}

@media(max-width:900px){
  .banner .msg{font-size:1.4rem}
  .hero{grid-template-columns:1fr;min-height:auto}
  .grid-2{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .nav a{font-size:1.25rem}
  /* Services list single column on mobile */
  .services-list{grid-template-columns:1fr !important}
}
/* === PCW v7.2 – Flowing, non-stretched background (3 colors visible) === */
:root{
  --plum:#4a2138;
  --sand:#c9b3a8;
  --white:#ffffff;
}

/* Make white the true page base */
body.page-bg { background: var(--white); }

/* Keep the page tall enough so the bottom sand wave is always visible,
   even on short pages like About/Contact. */
.page-bg {
  position: relative;
  min-height: 120vh;           /* ensures you can see the bottom wave */
  isolation: isolate;          /* keeps waves behind content */
}

/* Top and bottom “waves” are independent layers (no stretching) */
.wave-top,
.wave-bottom {
  position: fixed;             /* feels site-wide as you scroll */
  left: 50%;
  transform: translateX(-50%); /* keeps them centered */
  width: 130vw;                /* bleed past edges for nice curves */
  pointer-events: none;
  z-index: -1;                 /* always behind your content */
}

/* TOP PLUM WAVE */
.wave-top {
  top: 0;
  height: 46vh;
  background: var(--plum);
  /* big rounded “cap” for a smooth curve */
  border-bottom-left-radius: 60% 30%;
  border-bottom-right-radius: 60% 30%;
}

/* BOTTOM SAND WAVE */
.wave-bottom {
  bottom: -10vh;               /* lift up/down to taste */
  height: 50vh;
  width: 150vw;                /* a bit wider for a softer arc */
  background: var(--sand);
  border-top-left-radius: 65% 30%;
  border-top-right-radius: 65% 30%;
}

/* Optional: cards remain readable over lighter areas */
.card, .card-lite {
  background: rgba(74,33,56,.06);
  border: 1px solid rgba(201,179,168,.28);
  border-radius: 14px;
}

/* Mobile tweaks so curves don’t overpower content */
@media (max-width: 600px){
  .wave-top   { height: 40vh; }
  .wave-bottom{ height: 44vh; bottom: -8vh; }
  .page-bg    { min-height: 115vh; }
}
/* === PCW Fee Notice Modal === */
.fee-backdrop{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:9999;
}
.fee-backdrop[aria-hidden="false"]{ display:flex; }

.fee-modal{
  width:min(92vw, 560px);
  background:#4a2138;               /* plum */
  color:#c9b3a8;                     /* sand */
  border:1px solid rgba(201,179,168,.35);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:1.25rem;
}

.fee-modal h3{
  margin:.25rem 0 .5rem;
  font-size:1.25rem;
  letter-spacing:.02em;
  text-align:left;
}

.fee-modal p{
  margin:.5rem 0 1rem;
  line-height:1.55;
}

.fee-actions{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end;
}

.btn-fee, .btn-outline-fee{
  cursor:pointer; user-select:none;
  padding:.7rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent;
}
.btn-fee{ background:#c9b3a8; color:#4a2138; }
.btn-fee:hover{ filter:brightness(0.95); }
.btn-outline-fee{
  background:transparent; color:#c9b3a8; border-color:rgba(201,179,168,.5);
}
.btn-outline-fee:hover{ background:rgba(201,179,168,.08); }

.fee-note{
  opacity:.85; font-size:.95rem; margin-top:.5rem;
}
/* === PCW Fee Notice Modal === */
.fee-backdrop{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:9999;
}
.fee-backdrop[aria-hidden="false"]{ display:flex; }

.fee-modal{
  width:min(92vw, 560px);
  background:#4a2138;               /* plum */
  color:#c9b3a8;                     /* sand */
  border:1px solid rgba(201,179,168,.35);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:1.25rem;
}

.fee-modal h3{
  margin:.25rem 0 .5rem;
  font-size:1.25rem;
  letter-spacing:.02em;
  text-align:left;
}

.fee-modal p{
  margin:.5rem 0 1rem;
  line-height:1.55;
}

.fee-actions{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end;
}

.btn-fee, .btn-outline-fee{
  cursor:pointer; user-select:none;
  padding:.7rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent;
}
.btn-fee{ background:#c9b3a8; color:#4a2138; }
.btn-fee:hover{ filter:brightness(0.95); }
.btn-outline-fee{
  background:transparent; color:#c9b3a8; border-color:rgba(201,179,168,.5);
}
.btn-outline-fee:hover{ background:rgba(201,179,168,.08); }

.fee-note{
  opacity:.85; font-size:.95rem; margin-top:.5rem;
}
input, select, textarea {
  outline: none;
  border: 1px solid rgba(201,179,168,.35);
  background: rgba(0,0,0,.15);
  color: #c9b3a8;
  border-radius: 12px;
}

input:focus, select:focus, textarea:focus {
  border-color: #c9b3a8;
  box-shadow: 0 0 0 3px rgba(201,179,168,.25);
}
.wrap { max-width: 1200px; /* was 960px */ margin: 2rem auto; padding: 1.25rem; }

/* replace this block */
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }
/* with this (stacks only on narrow phones) */
@media (max-width: 768px){ .grid{ grid-template-columns:1fr; } }

.cal { width: 95%; max-width: 1300px; margin: 0 auto; }


/* Center the entire scheduler on the page */
.wrap {
  display: flex;
  justify-content: center;     /* center horizontally */
  align-items: flex-start;     /* keep top aligned */
  width: 100%;
  min-height: 100vh;           /* full screen height */
  margin: 0 auto;
  padding: 2rem 0;
  box-sizing: border-box;
}

/* Page wrapper – let the whole scheduler stretch but stay centered */
.wrap{
  max-width: 1400px;          /* was 960px */
  margin: 2rem auto;
  padding: 1.25rem 0;         /* less side padding so we can use width */
}

/* Two columns: wider calendar + form */
.grid{
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 480px;  /* was 1.1fr .9fr */
  gap: 40px;                                        /* was 1.25rem */
  align-items: start;
}

/* Stack only on smaller tablets/phones */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

/* Let the calendar fill its column completely */
.cal{
  width: 100%;                /* was 95% */
  max-width: none;            /* remove the 1300px cap inside the grid */
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(201,179,168,.28);
  border-radius: 16px;
  padding: 1rem;
}