/* ============================================================
   Creekside Physio: theme. Creek mist, deep ink and creek teal.
   One typeface, Lexend, chosen for how easily it reads. Calm
   rounded shapes, generous spacing, no hype: the body map and the
   stretch timer do the persuading.
   ============================================================ */
@layer theme {
:root{
  --canvas:#F2F6F5; --surface:#FAFCFB; --ink:#13302F; --muted:#4B6362; --line:#CFDEDC; --line-strong:#8EAAA7;
  --primary:#17676A; --primary-hover:#125659; --on-primary:#F5FAF9;
  --accent:#17676A; --accent-hover:#125659; --on-accent:#F5FAF9; --accent-text:#14595C;
  --focus:#17676A; --focus-ring:rgb(23 103 106/.22); --error:#A3261B; --ph-bg:#DCE8E6;
  --header-bg:#F2F6F5; --footer-bg:#13302F; --on-footer:#D5E4E2; --callbar-bg:#13302F;
  --body:#CFE1DE; --body-line:#9FC0BC;
  --font-display:'Lexend',system-ui,sans-serif; --font-body:'Lexend',system-ui,sans-serif;
  --radius:16px; --radius-sm:12px; --radius-lg:28px; --radius-btn:999px;
  --header-h:4.5rem; --text-base:clamp(1rem,.97rem + .15vw,1.06rem);
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313302F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
body{font-weight:300}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.06}
h3{font-size:1.25rem}
strong,b,.btn,label,legend{font-weight:500}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem;max-width:40rem}
.btn{font-weight:500}
.btn--light{background:var(--on-primary);color:var(--ink)}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:500;font-size:1.25rem;letter-spacing:-.03em}
.brand em{font-style:normal;color:var(--accent-text);font-weight:300}
.brand-mark{background:var(--primary);color:var(--on-primary);border-radius:50%}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .site-nav a{font-weight:400} .nav-mobile-cta{display:none} }

/* ---------- hero ---------- */
.hero{padding-block:clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.hero-copy{display:grid;gap:1.4rem;justify-items:start}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.05em;font-weight:500}
.hero h1 span{display:block;color:var(--accent-text);font-weight:300}
.hero-lede{font-size:1.15rem;color:var(--muted);max-width:31rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.ticks{display:grid;gap:.45rem}
.ticks li{display:flex;align-items:center;gap:.5rem;font-weight:400}
.ticks .ico{width:1.3rem;height:1.3rem;padding:.2rem;border-radius:50%;background:var(--primary);color:var(--on-primary);stroke-width:3}
.hero-fig .ph{border-radius:200px 200px var(--radius-lg) var(--radius-lg)}
.hero-fig figcaption{margin-top:.75rem;font-size:.92rem;color:var(--muted);max-width:26rem}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem} }

/* ---------- body map and the stretch ---------- */
.bodymap{background:var(--surface);border-block:1px solid var(--line)}
.bm-head{display:grid;gap:.7rem;max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.bm-head p{color:var(--muted);font-size:1.08rem}
.bm-grid{display:grid;gap:2rem;align-items:start}
.bm-figure{display:grid;gap:1rem;justify-items:center}
.fig-wrap{position:relative;width:min(100%,15rem)}
.figure{width:100%;height:auto}
.figure > *{fill:var(--body);stroke:var(--body-line);stroke-width:2}
.hots{position:absolute;inset:0}
.hot{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center}
.hot span{width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--primary);transition:transform var(--dur-mid) var(--ease-out),background-color var(--dur-fast) linear}
@media (hover:hover){ .hot:hover span{transform:scale(1.3)} }
.hot.is-on span{background:var(--primary);transform:scale(1.35);box-shadow:0 0 0 8px rgb(23 103 106/.18)}
@media (prefers-reduced-motion:no-preference){ .hot.is-on span{animation:pulse 2s ease-out infinite} }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(23 103 106/.35)}70%,100%{box-shadow:0 0 0 14px rgb(23 103 106/0)}}
.tab-list{flex-wrap:wrap;justify-content:center}
.tab{border-color:var(--line-strong);font-weight:400}
.tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.panels{display:grid;gap:2rem}
.tabs-on .panels{gap:0}
.area-panel{display:grid;gap:1.4rem;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius-lg);background:var(--canvas)}
.area-title{font-size:clamp(1.6rem,3vw,2.2rem)}
.area-cols{display:grid;gap:1.5rem}
.area-cols h4,.area-cols h3{font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text);margin-bottom:.6rem}
.probs{display:grid;gap:.45rem}
.probs li{position:relative;padding-left:1.2rem}
.probs li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--primary)}
.area-cols p{color:var(--muted)}
.area-panel > .btn{justify-self:start}
.stretch{display:grid;gap:.6rem;padding:1.25rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.st-label{font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text)}
.st-name{font-size:1.3rem;font-weight:500}
.st-static{display:grid;gap:.3rem;padding-left:1.2rem;list-style:decimal;color:var(--muted)}
.st-live{display:grid;grid-template-columns:auto 1fr;gap:1rem 1.25rem;align-items:center}
.st-ring{position:relative;width:7.5rem;height:7.5rem}
.st-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.st-ring circle{fill:none;stroke-width:8}
.st-ring .track{stroke:var(--line)}
.st-ring .prog{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));transition:stroke-dashoffset .95s linear}
.st-time{position:absolute;inset:0;display:grid;place-items:center;font-size:1.8rem;font-weight:500;font-variant-numeric:tabular-nums}
.st-cue{font-size:1.1rem;line-height:1.4;min-height:3em}
.st-btns{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.5rem}
.st-btns .btn{min-height:44px;padding:.5rem 1.1rem}
.st-done{grid-column:1 / -1;font-weight:500;color:var(--accent-text)}
@media (prefers-reduced-motion:reduce){ .st-ring .prog{transition:none} }
.bm-note{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.5rem;font-size:.92rem;color:var(--muted);max-width:52rem}
.bm-note .ico{flex:none;color:var(--accent-text);margin-top:.1rem}
@media (min-width:700px){ .area-cols{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .bm-grid{grid-template-columns:18rem 1fr;gap:3.5rem} .bm-figure{position:sticky;top:calc(var(--header-h) + 1.5rem)} }

/* ---------- first visit ---------- */
.fv-line{display:grid;gap:1rem;counter-reset:fv}
.fv-line li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;padding:1.25rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.fv-ico{grid-row:span 2;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--accent-text)}
.fv-no{position:absolute;right:1.1rem;top:.9rem;font-size:.85rem;font-weight:500;color:var(--line-strong)}
.fv-line p{color:var(--muted);font-size:.98rem}.fv-line :is(h2,h3){font-size:1.25rem}
@media (min-width:1000px){
  .fv-line{grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}
  .fv-line li{grid-template-columns:minmax(0,1fr);align-content:start;overflow-wrap:break-word;hyphens:auto}
  .fv-ico{grid-row:auto;margin-bottom:.5rem}
  .fv-line li:not(:last-child)::after{content:"";position:absolute;top:2.75rem;right:-.75rem;width:.75rem;height:2px;background:var(--line-strong)}
}

/* ---------- services ---------- */
.services{background:var(--surface);border-block:1px solid var(--line)}
.svc-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.svc-list li{display:grid;gap:.5rem;align-content:start;padding:1.5rem;background:var(--surface)}
.svc-ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:12px;background:var(--primary);color:var(--on-primary)}
.svc-list p{color:var(--muted)}
@media (min-width:700px){ .svc-list{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .svc-list{grid-template-columns:repeat(3,1fr)} }

/* ---------- inside the clinic ---------- */
.band{padding-block:clamp(2.5rem,5vw,4rem)}
.band-photos{display:grid;gap:1rem}
.band-photos .ph{border-radius:var(--radius-lg)}
@media (min-width:800px){ .band-photos{grid-template-columns:1fr 1fr 1fr} .band-photos .ph:nth-child(2){margin-top:2.5rem} }

/* ---------- team ---------- */
.pts{display:grid;gap:1.5rem}
.pt{display:grid;grid-template-columns:6rem 1fr;gap:1.1rem;align-items:start}
.pt .ph{border-radius:50%}
.ph--initials{background:var(--primary)}
.ph--initials > span{font-size:2rem;font-family:var(--font-display);font-weight:400}
.ph--initials > small{display:none}
.pt h3,.pt h2{font-size:1.35rem}
.pt-role{color:var(--accent-text);font-weight:500;margin:.15rem 0 .4rem}
.pt p{color:var(--muted)}
.ahpra{display:flex;gap:.4rem;align-items:center;margin-top:.5rem;font-size:.85rem}
.ahpra .ico{width:1rem;height:1rem;color:var(--accent-text)}
@media (min-width:900px){ .pts{grid-template-columns:repeat(3,1fr);gap:2rem} .pt{grid-template-columns:1fr} .pt .ph{width:7rem} }

/* ---------- fees ---------- */
.fees{background:var(--surface);border-block:1px solid var(--line)}
.fees-grid{display:grid;gap:2.5rem;align-items:start}
.fees-lede{color:var(--muted);margin:.6rem 0 1.5rem}
.fee-table{width:100%}
.fee-table th,.fee-table td{padding:1rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.fee-table th{font-weight:400}
.fee-table th small{display:block;color:var(--muted);font-size:.88rem}
.fee-table td{text-align:right;font-size:1.5rem;font-weight:500;color:var(--accent-text)}
.claims{display:grid;gap:1rem}
.claims li{padding:1.1rem 1.25rem;border-radius:var(--radius);background:var(--canvas);color:var(--muted)}
.claims strong{color:var(--ink)}
@media (min-width:900px){ .fees-grid{grid-template-columns:1fr 1fr;gap:4rem} }

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary{font-weight:400}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- booking ---------- */
.book{background:var(--surface);border-top:1px solid var(--line)}
.book-grid{display:grid;gap:2.5rem}
.book-copy > p{margin-top:1rem;color:var(--muted);font-size:1.1rem}
.contact-list{display:grid;gap:.9rem;margin-top:2rem}
.contact-list li{display:flex;gap:.7rem;align-items:flex-start}
.contact-list a{font-weight:500}
.contact-list .ico{color:var(--accent-text);margin-top:.15rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border-radius:var(--radius-lg)}
.form-row{display:grid;gap:1.25rem}
.choices-set{border:0;padding:0;display:grid;gap:.6rem}
.choice input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .book-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section);background:var(--surface)}
.map-block{border-radius:var(--radius-lg);background:var(--ph-bg)}
.map-title{display:grid;gap:.25rem;max-width:28rem}
.map-title strong{font-weight:500;font-size:1.4rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- call to action ---------- */
.cta-band{background:var(--primary);color:var(--on-primary);padding-block:clamp(3.5rem,8vw,6rem)}
.cta-band h2{color:var(--on-primary)}
.cta-inner{display:grid;gap:1rem;justify-items:start}
.cta-inner p{font-size:1.15rem;opacity:.9}
.cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.cta-band .btn--ghost{color:var(--on-primary)}
@media (hover:hover){ .cta-band .btn--ghost:hover{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)} }

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-weight:500;font-size:1.3rem;margin-bottom:.5rem}
.foot-mark .ico{color:var(--body)}
.site-footer h2{font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.callbar .call{background:var(--on-primary);color:var(--ink)}
.callbar .alt{color:var(--on-primary)}
}