/* ==========================================================================
   Therapy By Dr. Oliva
   Palette sampled directly from the client's bee logo:
     #FED21B honey (bee)   #00B1D1 teal (wordmark)
     #6ADEFD sky (wings)   #FC134F pink ("Therapy By" + heart)
   Neutrals are biased toward the teal rather than pure grey, so the page reads
   as one family with the mark.
   ========================================================================== */
:root{
  --honey:#FED21B;
  --honey-soft:#FFF3CE;
  --teal:#00B1D1;
  --teal-deep:#007E96;
  --teal-soft:#E4F7FB;
  --sky:#6ADEFD;
  --pink:#FC134F;
  --pink-deep:#D2003B;
  --pink-soft:#FFE7EE;

  --ink:#12303A;
  --body:#42606B;
  --dim:#7E97A0;
  --line:#DCEBEF;
  --paper:#FFFFFF;
  --tint:#F2FAFC;

  --display:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --text:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:1140px;
  --pad:clamp(18px,5vw,40px);
  --r:20px;
  --shadow:0 4px 18px rgba(18,48,58,.07);
  --shadow-lift:0 12px 30px rgba(18,48,58,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--text); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto}
a{color:var(--teal-deep)}
a:hover{color:var(--pink)}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:8px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--display); color:var(--ink); margin:0; line-height:1.14; font-weight:700}
h1{font-size:clamp(2rem,4.6vw,3.1rem); letter-spacing:-.005em}
h1 em{font-style:normal; color:var(--teal)}
h2{font-size:clamp(1.55rem,3vw,2.25rem)}
h3{font-size:1.16rem; font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.kicker{
  font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--pink); margin:0 0 .5em;
}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--body); max-width:68ch}
.note{margin-top:22px; font-size:.94rem; color:var(--dim); max-width:78ch}
.dim{color:var(--dim)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  padding:.72em 1.5em; border-radius:999px; text-decoration:none;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-pink{background:var(--pink); color:#fff; box-shadow:0 6px 16px rgba(252,19,79,.28)}
.btn-pink:hover{background:var(--pink-deep); color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(252,19,79,.32)}
.btn-ghost{background:#fff; color:var(--teal-deep); border-color:var(--teal)}
.btn-ghost:hover{background:var(--teal-soft); color:var(--teal-deep); transform:translateY(-2px)}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* ---------------- header ---------------- */
header.site{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:18px; min-height:78px}
.brand{flex-shrink:0; line-height:0; display:block}
.brand img{height:56px; width:auto}
nav{margin-left:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
nav a{
  font-family:var(--display); font-weight:500; font-size:.94rem; color:var(--ink);
  text-decoration:none; padding:5px 2px; border-bottom:2px solid transparent;
}
nav a:hover{color:var(--teal-deep); border-bottom-color:var(--sky)}
nav a.on{color:var(--teal-deep); border-bottom-color:var(--teal)}
nav a.navcta{border:none; padding:.62em 1.25em; font-size:.95rem}
nav a.navcta:hover{border:none}
.menu{display:none; margin-left:auto; background:none; border:2px solid var(--line);
      border-radius:12px; padding:9px 11px; cursor:pointer}
.menu span{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:3px}
.menu span+span{margin-top:4px}

/* ---------------- hero ---------------- */
.hero{
  background:
    radial-gradient(circle at 12% 12%, rgba(254,210,27,.22), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(106,222,253,.30), transparent 46%),
    linear-gradient(180deg,#FBFEFF 0%, #EFF9FC 100%);
  border-bottom:1px solid var(--line);
}
.hero-in{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,4vw,52px);
         align-items:center; padding:clamp(34px,6vw,68px) var(--pad)}
.hero-copy .lede{margin-top:1em}
.hero-logo{text-align:center}
.hero-logo img{max-width:min(100%,430px)}
.wegoto{
  display:inline-block; margin-top:1.1em; font-family:var(--display); font-weight:700;
  font-size:1.05rem; color:var(--ink); background:var(--honey);
  padding:.34em 1.05em; border-radius:999px; transform:rotate(-1.4deg);
  box-shadow:0 4px 12px rgba(254,210,27,.45);
}

/* ---------------- page head (inner pages) ---------------- */
.pagehead{
  background:linear-gradient(180deg,#FBFEFF 0%,#F3FAFC 100%);
  border-bottom:1px solid var(--line);
  padding:clamp(30px,5vw,54px) 0;
}
.pagehead h1{margin-bottom:.35em}

/* ---------------- bands ---------------- */
.band{padding:clamp(38px,6vw,68px) 0}
.band.tint{background:var(--tint); border-block:1px solid var(--line)}
.band h2{margin-bottom:.45em}

/* ---------------- grid + cards ---------------- */
.grid{display:grid; gap:18px; margin-top:26px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:.4em}
.card p{font-size:.97rem}
.card.sm{padding:16px 18px}
.card.sm p{margin:0; font-weight:600; color:var(--ink); font-size:.98rem}
.card.dimcard{background:var(--teal-soft); border-style:dashed}

a.card{display:block; text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease}
a.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.svc{position:relative; padding-top:30px; border-top:6px solid var(--teal)}
.svc .abbr{
  position:absolute; top:-2px; right:20px; font-family:var(--display); font-weight:700;
  font-size:2.6rem; line-height:1; color:var(--teal); opacity:.16;
}
.svc .more{display:inline-block; margin-top:14px; font-family:var(--display); font-weight:700;
           color:var(--teal-deep); font-size:.97rem}
.tone-teal{border-top-color:var(--teal)}
.tone-teal .abbr,.tone-teal .more{color:var(--teal)}
.tone-honey{border-top-color:var(--honey)}
.tone-honey .abbr{color:#C79A00}
.tone-honey .more{color:#A98200}
.tone-pink{border-top-color:var(--pink)}
.tone-pink .abbr,.tone-pink .more{color:var(--pink)}

/* ---------------- places ---------------- */
.places .place{
  background:#fff; border:2px dashed var(--sky); border-radius:var(--r);
  padding:22px 12px; text-align:center;
}
.places .place span{font-family:var(--display); font-weight:700; font-size:1.12rem; color:var(--ink)}

/* ---------------- pills + conditions ---------------- */
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.pill{
  background:var(--honey-soft); border:1px solid #F2DFA2; color:#7A5D00;
  font-family:var(--display); font-weight:700; font-size:.98rem;
  padding:.38em 1em; border-radius:999px;
}
.pill.dimpill{background:#fff; border-color:var(--line); color:var(--dim); font-weight:500}
.conds{gap:10px}
.cond{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--sky);
  border-radius:12px; padding:12px 15px; font-size:.97rem; color:var(--ink); font-weight:600;
}

/* ---------------- contact ---------------- */
.contact .contactcard{text-align:center; padding:28px 20px}
.contactcard .big{font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--teal-deep); margin:0}
.contactcard .big.small{font-size:1.02rem; word-break:break-word}
.contactcard:hover .big{color:var(--pink)}
.big a{text-decoration:none}

/* ---------------- cta band ---------------- */
.cta-band{
  background:linear-gradient(135deg,#00B1D1 0%,#0095B4 100%);
  color:#fff; padding:clamp(38px,6vw,62px) 0; text-align:center;
}
.cta-band h2{color:#fff; margin-bottom:.4em}
.cta-band .kicker{color:var(--honey)}
.cta-band .lede{color:#DCF4FA; margin:0 auto; max-width:60ch}
.cta-band .btns{justify-content:center}
.cta-band .btn-ghost{background:#fff; border-color:#fff; color:var(--teal-deep)}
.cta-band .btn-ghost:hover{background:var(--honey); border-color:var(--honey); color:var(--ink)}

/* ---------------- footer ---------------- */
footer.site{background:var(--tint); border-top:1px solid var(--line); padding:clamp(32px,5vw,52px) 0 26px}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px}
.footbee{width:66px; height:66px; margin-bottom:8px}
.fname{font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.12rem; margin:0 0 .3em}
.ftag{font-size:.93rem; color:var(--body); max-width:34ch}
.fh{font-family:var(--display); font-weight:700; color:var(--ink); margin:0 0 .5em}
.foot p{margin:0 0 .4em; font-size:.95rem}
.foot a{color:var(--body); text-decoration:none}
.foot a:hover{color:var(--pink); text-decoration:underline}
.legal{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}
.legal p{font-size:.86rem; color:var(--dim); margin:0 0 .4em}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  nav a{font-size:.88rem}
  nav{gap:12px}
}
@media (max-width:940px){
  .hero-in{grid-template-columns:1fr; text-align:center}
  .hero-copy .lede{margin-inline:auto}
  .hero .btns{justify-content:center}
  .hero-logo{order:-1}
  .hero-logo img{max-width:min(100%,330px)}
  .foot{grid-template-columns:1fr 1fr}
  .menu{display:block}
  nav{
    position:fixed; inset:78px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:6px var(--pad) 20px;
    display:none; max-height:calc(100vh - 78px); overflow-y:auto;
  }
  nav.open{display:flex}
  nav a{padding:13px 0; border-bottom:1px solid var(--line); font-size:1.02rem}
  nav a.on{border-bottom-color:var(--teal)}
  nav a.navcta{margin-top:16px; text-align:center}
}
@media (max-width:600px){
  body{font-size:16px}
  .bar{min-height:66px}
  nav{inset-block-start:66px}
  .brand img{height:46px}
  .foot{grid-template-columns:1fr}
}
@media (max-width:430px){
  .btns .btn{width:100%}
}

/* county grouping on the service-area lists */
.areahead{
  font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--ink);
  margin:26px 0 .4em; padding-bottom:.3em; border-bottom:2px solid var(--sky); display:inline-block;
}

/* ---------------- evaluation request form ---------------- */
.formwrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,4vw,34px); box-shadow:var(--shadow); max-width:820px;
}
.formnote{
  background:var(--honey-soft); border:1px solid #F1DFA6; color:#6B5200;
  border-radius:14px; padding:12px 16px; font-size:.95rem; margin:0 0 22px;
}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:16px}
label{
  display:block; font-family:var(--display); font-weight:700; font-size:.95rem;
  color:var(--ink); margin-bottom:6px;
}
label .opt{font-family:var(--text); font-weight:400; color:var(--dim); font-size:.86rem}
input,select,textarea{
  width:100%; padding:.7em .85em; font:inherit; font-size:1rem; color:var(--ink);
  background:#fff; border:2px solid var(--line); border-radius:12px;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,177,209,.14);
}
textarea{min-height:110px; resize:vertical}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
#evalBtn{margin-top:4px}
#formMsg{margin:16px 0 0; font-weight:700; font-size:.97rem; display:none; padding:.75em 1em; border-radius:12px}
#formMsg.ok{display:block; color:#186A44; background:#E4F5EC; border:1px solid #B9E2CC}
#formMsg.err{display:block; color:#A4123A; background:var(--pink-soft); border:1px solid #F7C2D2}
@media (max-width:640px){ .frow{grid-template-columns:1fr; gap:0} }