/* ============================================================
   Jaki Neering, LCSW-QS — styles
   Palette: trans-inspired soft blue / aqua / teal, warm whites,
   neutral gray text, deep teal & charcoal headings, blush accent.
   ============================================================ */

:root{
  --ink:#24343A;            /* charcoal — darkest */
  --deep-teal:#215A61;      /* deep teal — headings, solid buttons */
  --deep-teal-deep:#184a50; /* deep teal hover */
  --teal:#3DA6A8;           /* wellness teal */
  --teal-deep:#2f8587;      /* teal hover / accent */
  --aqua:#8EDBDD;           /* light aqua */
  --trans-blue:#5BCEFA;     /* primary trans blue (CTAs) */
  --trans-blue-deep:#38c2f6;/* trans blue hover */
  --trans-blue-soft:#DDF7FF;
  --blush:#F7A8B8;          /* subtle pink accent */
  --blush-soft:#FDECEF;
  --seafoam:#D8F3F0;        /* tinted bands */
  --mist:#F4FBFA;           /* page background */
  --cream:#FFFDF8;          /* warm white cards */
  --line:#D7ECEC;           /* hairlines / borders */
  --text:#4C5C62;           /* soft neutral gray body text */
  --text-soft:#5d6e74;      /* muted gray for secondary copy */

  --ff-display:"Fraunces",Georgia,serif;
  --ff-body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --maxw:1140px;
  --r-lg:28px;
  --r-md:18px;
  --shadow:0 18px 50px -28px rgba(36,52,58,.40);
  --shadow-sm:0 10px 30px -18px rgba(36,52,58,.34);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--mist);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--deep-teal);}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;line-height:1.12;color:var(--deep-teal);margin:0;letter-spacing:-.01em;}
p{margin:0 0 1.1rem;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--ff-body);
  text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:700;
  color:var(--deep-teal);display:inline-block;margin-bottom:.9rem;
}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--blush);vertical-align:middle;margin-right:.6rem;}

/* Skip link */
.skip{position:absolute;left:8px;top:8px;transform:translateY(-150%);background:var(--deep-teal);color:#fff;padding:.7rem 1.1rem;border-radius:10px;z-index:200;transition:transform .2s ease;}
.skip:focus{transform:translateY(0);}

/* Buttons */
.btn{
  --bg:var(--deep-teal);--fg:#ffffff;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--bg);color:var(--fg);
  font-family:var(--ff-body);font-weight:700;font-size:1rem;
  padding:.92em 1.5em;border-radius:999px;border:2px solid var(--bg);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(36,52,58,.5);background:var(--deep-teal-deep);border-color:var(--deep-teal-deep);}
/* Primary booking CTA — soft trans blue with dark ink text (accessible) */
.btn--clay{--bg:var(--trans-blue);--fg:var(--ink);border-color:var(--trans-blue);}
.btn--clay:hover{background:var(--trans-blue-deep);border-color:var(--trans-blue-deep);color:var(--ink);}
.btn--ghost{background:transparent;color:var(--deep-teal);border-color:var(--teal);box-shadow:none;}
.btn--ghost:hover{background:var(--seafoam);border-color:var(--teal);}
.btn svg{width:18px;height:18px;}

a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--deep-teal);outline-offset:3px;border-radius:6px;
}

/* Header */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(244,251,250,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
header.site.scrolled{border-color:var(--line);box-shadow:0 8px 30px -22px rgba(36,52,58,.45);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 24px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);}
.brand .mark{width:36px;height:36px;flex:none;}
.brand b{font-family:var(--ff-display);font-weight:600;font-size:1.12rem;line-height:1;display:block;}
.brand span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);font-weight:700;}
.nav-links{display:flex;align-items:center;gap:1.45rem;list-style:none;margin:0;padding:0;}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;position:relative;padding:4px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--teal);transition:width .25s ease;}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:.6rem;}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink);}
.menu-btn svg{width:28px;height:28px;}

/* Hero */
.hero{position:relative;padding:64px 0 84px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.5rem,5.6vw,4rem);font-weight:600;}
.hero h1 em{font-style:italic;color:var(--teal-deep);font-weight:500;}
.hero .lead{font-size:1.18rem;max-width:34ch;margin:1.4rem 0 2rem;color:var(--text);}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero-note{margin-top:1.4rem;font-size:.92rem;color:var(--text-soft);display:flex;align-items:center;gap:.5rem;}
.hero-note svg{width:18px;height:18px;flex:none;color:var(--blush);}

/* organic photo frame + breathing motion */
.portrait{position:relative;justify-self:center;width:min(440px,100%);aspect-ratio:1/1;}
.portrait .breath{
  position:absolute;inset:-9% -7% -7% -9%;z-index:0;
  background:radial-gradient(circle at 50% 45%,rgba(142,219,221,.85),rgba(91,206,250,.35) 60%,transparent 72%);
  border-radius:46% 54% 50% 50%/52% 48% 52% 48%;
  animation:breathe 9s ease-in-out infinite;
}
.portrait .ring{
  position:absolute;inset:-4%;z-index:0;border:2px dashed var(--aqua);
  border-radius:54% 46% 50% 50%/48% 52% 48% 52%;opacity:.7;
  animation:spin 60s linear infinite;
}
.portrait img.main{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  border-radius:48% 52% 50% 50%/52% 48% 52% 48%;
  box-shadow:var(--shadow);border:6px solid var(--cream);
}
.portrait .badge{
  position:absolute;z-index:2;right:-6px;bottom:14px;
  background:var(--cream);border:1px solid var(--line);border-radius:16px;
  padding:.6rem .85rem;box-shadow:var(--shadow-sm);max-width:180px;
  font-size:.8rem;line-height:1.35;color:var(--ink);font-weight:600;
}
.portrait .badge span{display:block;color:var(--deep-teal);font-family:var(--ff-display);font-size:.95rem;}
@keyframes breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* gentle blob backdrop shapes */
.blob{position:absolute;z-index:0;filter:blur(2px);opacity:.5;pointer-events:none;}

/* Section scaffolding */
section{position:relative;}
.band{padding:78px 0;}
.band--mist{background:var(--seafoam);}
.band--cream{background:var(--cream);}
.sec-head{max-width:62ch;margin-bottom:2.6rem;}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.7rem);}
.sec-head p{margin-top:1rem;font-size:1.08rem;color:var(--text);}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:start;}
.about-media{position:relative;}
.about-media img{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;object-fit:cover;}
.about-media figcaption{font-size:.82rem;color:var(--teal-deep);margin-top:.7rem;font-style:italic;text-align:center;}
.creds{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem;}
.creds li{display:flex;gap:.7rem;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;font-weight:600;color:var(--deep-teal);}
.creds svg{width:22px;height:22px;flex:none;color:var(--teal);margin-top:2px;}

/* Approach pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:2.4rem;}
.pillar{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.2rem;text-align:center;transition:transform .25s ease;}
.pillar:hover{transform:translateY(-4px);}
.pillar .ic{width:46px;height:46px;margin:0 auto .8rem;color:var(--teal);}
.pillar h3{font-size:1.35rem;}
.pillar p{margin:.4rem 0 0;font-size:.92rem;color:var(--text-soft);}

/* Service cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.7rem;transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden;}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.card .ic{width:42px;height:42px;color:var(--deep-teal);margin-bottom:1rem;}
.card h3{font-size:1.32rem;margin-bottom:.55rem;}
.card p{font-size:.96rem;color:var(--text-soft);margin:0;}
.card::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--trans-blue),var(--aqua));transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.card:hover::after{transform:scaleX(1);}

/* Specialties */
.focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.focus{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem;display:flex;gap:1.1rem;align-items:flex-start;}
.focus .ic{width:48px;height:48px;flex:none;color:var(--deep-teal);background:var(--seafoam);border-radius:14px;padding:9px;}
.focus h3{font-size:1.3rem;margin-bottom:.5rem;}
.focus p{margin:0;font-size:.96rem;color:var(--text-soft);}

/* Trainings accordion */
.trainings-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:2.4rem;}
.acc{display:grid;gap:12px;}
details.t{background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .25s ease;}
details.t[open]{box-shadow:var(--shadow-sm);}
details.t summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.05rem 1.3rem;font-family:var(--ff-display);font-weight:600;font-size:1.1rem;color:var(--ink);
}
details.t summary::-webkit-details-marker{display:none;}
details.t summary .n{font-size:.85rem;font-family:var(--ff-body);font-weight:700;color:var(--deep-teal);min-width:2.2ch;}
details.t summary .chev{margin-left:auto;width:22px;height:22px;color:var(--teal);transition:transform .3s ease;flex:none;}
details.t[open] summary .chev{transform:rotate(180deg);}
details.t .body{padding:0 1.3rem 1.25rem 4.1rem;color:var(--text-soft);font-size:.97rem;}

/* Insurance */
.ins-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:start;}
.ins-list{columns:2;column-gap:28px;list-style:none;margin:1.2rem 0 0;padding:0;}
.ins-list li{break-inside:avoid;padding:.55rem 0 .55rem 1.7rem;position:relative;border-bottom:1px solid var(--line);font-weight:600;color:var(--deep-teal);}
.ins-list li::before{content:"";position:absolute;left:0;top:1.05rem;width:9px;height:9px;border-radius:50%;background:var(--teal);}
.fee-card{background:var(--deep-teal);color:#eef9fa;border-radius:var(--r-lg);padding:2rem;box-shadow:var(--shadow);}
.fee-card h3{color:#ffffff;font-size:1.3rem;}
.fee-card .price{font-family:var(--ff-display);font-size:2.6rem;color:#fff;line-height:1;margin:.4rem 0;}
.fee-card .price small{font-size:1rem;color:var(--aqua);font-family:var(--ff-body);}
.fee-card p{color:#cfeef0;font-size:.92rem;margin:.6rem 0 0;}
.disclaimer{font-size:.85rem;color:var(--text-soft);margin-top:1.2rem;font-style:italic;}

/* Media + resources */
.link-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.link-card{display:flex;flex-direction:column;gap:.4rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem;text-decoration:none;color:var(--text);transition:transform .25s ease,border-color .25s ease;}
.link-card:hover{transform:translateY(-4px);border-color:var(--teal);}
.link-card .src{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--deep-teal);font-weight:700;}
.link-card strong{font-family:var(--ff-display);font-size:1.15rem;font-weight:600;color:var(--ink);}
.link-card .go{margin-top:auto;font-size:.86rem;color:var(--deep-teal);font-weight:700;display:flex;align-items:center;gap:.35rem;}
.link-card .go svg{width:15px;height:15px;}

/* CTA bands */
.cta-band{background:linear-gradient(135deg,var(--deep-teal),var(--ink));color:#eef9fa;border-radius:var(--r-lg);padding:3.2rem;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.6rem);}
.cta-band p{max-width:48ch;margin:1rem auto 1.8rem;color:#cfeef0;font-size:1.08rem;}
.cta-band .hero-cta{justify-content:center;}
.cta-band .leaf{position:absolute;color:rgba(142,219,221,.20);}
.cta-band .btn--ghost{color:#eef9fa;border-color:rgba(255,255,255,.45);}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);}

.mini-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem 2.4rem;box-shadow:var(--shadow-sm);}
.mini-cta h3{font-size:1.5rem;}
.mini-cta p{margin:.3rem 0 0;color:var(--text-soft);font-size:.98rem;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.contact-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:2.2rem;box-shadow:var(--shadow-sm);}
.contact-row{display:flex;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .ic{width:40px;height:40px;flex:none;background:var(--seafoam);border-radius:12px;color:var(--deep-teal);padding:9px;}
.contact-row a{color:var(--deep-teal);font-weight:700;text-decoration:none;word-break:break-word;}
.contact-row a:hover{text-decoration:underline;}
.contact-row small{display:block;color:var(--teal-deep);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;}

/* Footer */
footer.site{background:var(--ink);color:#bfd6d9;padding:56px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;}
footer .brand{color:#fff;}
footer .brand b{color:#fff;}
footer .brand span{color:var(--aqua);}
footer h4{color:#fff;font-size:1.05rem;margin-bottom:.9rem;}
footer a{color:#bfd6d9;text-decoration:none;}
footer a:hover{color:#fff;text-decoration:underline;}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem;}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.84rem;color:#8fa6aa;}
.foot-bottom a{color:#8fa6aa;}

/* Mobile nav panel */
.mobile-panel{display:none;}

@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .portrait{order:-1;width:min(360px,82%);}
  .about-grid,.ins-grid,.contact-grid,.trainings-intro{grid-template-columns:1fr;gap:30px;}
  .pillars{grid-template-columns:1fr 1fr;}
  .cards,.link-cards{grid-template-columns:1fr 1fr;}
  .focus-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
  .mobile-panel{display:block;max-height:0;overflow:hidden;transition:max-height .35s ease;background:var(--cream);border-bottom:1px solid var(--line);}
  .mobile-panel.open{max-height:480px;}
  .mobile-panel ul{list-style:none;margin:0;padding:14px 24px 22px;display:grid;gap:.2rem;}
  .mobile-panel a{display:block;padding:.7rem 0;text-decoration:none;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);}
  .mobile-panel .btn{margin-top:.8rem;justify-content:center;}
}
@media(max-width:560px){
  body{font-size:16px;}
  .band{padding:54px 0;}
  .cards,.link-cards,.pillars{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:26px;}
  .ins-list{columns:1;}
  .cta-band,.contact-card,.mini-cta{padding:1.7rem;}
  .nav-cta .bk-rest{display:none;}
  .nav-cta .btn{padding:.7em 1.1em;}
  .portrait .badge{right:auto;left:50%;transform:translateX(-50%);bottom:-18px;max-width:none;white-space:nowrap;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}