:root{
  --aubergine:#3D1E3C;
  --aubergine-deep:#2A152A;
  --aubergine-deepest:#1F1422;
  --amethyst:#9060A0;
  --violet:#6E4A86;
  --lavender:#C0B0D0;
  --lavender-soft:#D8CCDE;
  --highlight:#EADFF2;
  --bg:#F5F0F6;
  --bg-tint:#EAE0EE;
  --ink:#2A152A;
  --muted:#473A4D;
  --line:rgba(61,30,60,.16);
  --disp:'Outfit',system-ui,sans-serif;
  --sans:'Source Sans 3',system-ui,sans-serif;
  --maxw:1180px;
  --h2:clamp(1.85rem,1.4rem + 2vw,2.9rem);
  --lead:clamp(1.08rem,1rem + .4vw,1.28rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;
  font-size:clamp(1rem,.96rem + .2vw,1.1rem);font-weight:400;padding-bottom:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.08;text-wrap:balance;letter-spacing:-.02em}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:90%;max-width:var(--maxw);margin-inline:auto}
.eyebrow{font-family:var(--disp);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--violet)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--amethyst);outline-offset:3px;border-radius:5px}

/* ===== WORDMARK + MARK ===== */
.wordmark{font-family:var(--disp);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.wordmark .w-pure{font-weight:200}
.wordmark .w-psych{font-weight:700}
.mk{fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible;display:block}
.mk use{transform-box:fill-box;transform-origin:center}
/* welcome mark — gentle ripple pulse (distinct from the resolve draw-in) */
@keyframes ripple{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
.mk-ripple use:nth-child(1){animation:ripple 4s ease-in-out infinite}
.mk-ripple use:nth-child(2){animation:ripple 4s ease-in-out -1.3s infinite}
.mk-ripple use:nth-child(3){animation:ripple 4s ease-in-out -2.6s infinite}
/* ambient breathe (out of phase) — the brand's signature idle */
.mk-breathe use:nth-child(1){animation:breathe 7s ease-in-out infinite;--sc:1.04;--rot:2.5deg}
.mk-breathe use:nth-child(2){animation:breathe 8.5s ease-in-out -1.5s infinite;--sc:.96;--rot:-2.5deg}
.mk-breathe use:nth-child(3){animation:breathe 8s ease-in-out -3s infinite;--sc:1.05;--rot:2deg}
@keyframes breathe{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(var(--sc)) rotate(var(--rot))}}
/* self-drawing — draws once on reveal and HOLDS (client request) */
.mk-draw.armed use{stroke-dasharray:1;stroke-dashoffset:1}
.mk-draw.armed.in-view use:nth-child(1){animation:drawonce 1.8s ease-in-out forwards}
.mk-draw.armed.in-view use:nth-child(2){animation:drawonce 2.5s ease-in-out forwards}
.mk-draw.armed.in-view use:nth-child(3){animation:drawonce 3.2s ease-in-out forwards}
@keyframes drawonce{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* gentle drift on loose background rings */
.loose{position:absolute;pointer-events:none;will-change:transform}
.loose .mk{width:100%;height:100%}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .mk-draw.armed use{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

.btn{position:relative;overflow:hidden;z-index:0;display:inline-flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:600;font-size:.98rem;
  padding:.92em 1.9em;border-radius:7px;border:1.5px solid transparent;cursor:pointer;transition:color .3s,border-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep,rgba(255,255,255,.18));transform:scaleX(0);transform-origin:right center;transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.btn-primary{background:var(--amethyst);color:#fff;--sweep:var(--violet)}
.btn-solid{background:var(--violet);color:#fff;--sweep:var(--aubergine)}
.btn-ghost{border-color:var(--lavender);color:#fff;--sweep:#fff}
.btn-ghost:hover{color:var(--aubergine)}
.btn-outline{border-color:var(--amethyst);color:var(--violet);--sweep:var(--amethyst)}
.btn-outline:hover{color:#fff}
.btn .arr{transition:transform .35s}.btn:hover .arr{transform:translateX(4px)}

/* ===== TOP BAR ===== */
.topbar{background:var(--aubergine-deepest);color:var(--lavender)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.5rem 0}
.tb-item{font-family:var(--disp);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.tb-cities{display:none}
.tb-phone{color:#fff;font-weight:600;transition:color .25s;display:inline-block;width:238px;text-align:center}
.tb-phone:hover{color:var(--lavender-soft)}

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:100;background:var(--aubergine);border-bottom:1px solid rgba(192,176,208,.16)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.5rem 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:54px;height:49px;object-fit:contain;transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.brand:hover .mk{transform:rotate(-4deg)}
@media (prefers-reduced-motion:reduce){.brand .mk{transition:none}.brand:hover .mk{transform:none}}
.brand-text{display:flex;flex-direction:column;justify-content:center;gap:.2em;min-width:0}
.brand .wordmark{font-size:1.62rem;color:#fff}
.brand-tagline{font-family:var(--disp);font-weight:400;font-size:.64rem;letter-spacing:.2em;color:var(--lavender);line-height:1;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.2rem;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{display:block;padding:.6rem .72rem;font-family:var(--disp);font-weight:500;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;line-height:1;color:var(--lavender);border-radius:6px;transition:.25s}
.nav-links>li>a:hover{color:#fff;background:rgba(192,176,208,.12)}
.has-drop>a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.4em;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
/* NOTE: renamed bare .dropdown → .dropdown-menu — the WP nav walker puts
   .dropdown on the PARENT <li>; the flyout panel is <ul class="dropdown-menu">.
   The bare rule was hiding the parent items. Walker-aware rules live below. */
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--aubergine-deep);border:1px solid rgba(192,176,208,.16);border-radius:12px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.6);padding:.5rem;min-width:230px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.28s;list-style:none}
.has-drop:hover .dropdown-menu,.has-drop:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu.two-col{display:grid;grid-template-columns:1fr 1fr;min-width:430px;gap:.05rem}
.dropdown-menu li a{display:block;padding:.66rem .75rem;border-radius:7px;font-size:.88rem;color:var(--lavender);transition:.2s}
.dropdown-menu li a:hover{background:rgba(192,176,208,.14);color:#fff}
.nav-cta{display:flex;align-items:center;gap:1rem}
/* nav matched to the wordmark baseline (logo lockup left untouched) */
@media(min-width:1100px){.nav-links{transform:translateY(6px)}}
.nav-phone{font-family:var(--disp);font-weight:500;color:#fff;font-size:.92rem;white-space:nowrap}
.nav-phone span{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender);font-weight:500}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}
.hamburger span{width:25px;height:2px;background:#fff;transition:.3s}

/* ===== HERO ===== */
.hero{position:relative;background:radial-gradient(120% 90% at 50% -10%,var(--aubergine) 0%,var(--aubergine-deep) 70%);color:#fff;overflow:hidden;padding:clamp(3rem,8vh,6rem) 0 clamp(3.5rem,9vh,7rem)}
.hero-bgloops{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
/* size the headline to the text column (cqw) so "Managing Your Life" always fits one line; vw clamp is the no-container-query fallback */
.hero-content{container-type:inline-size}
.hero h1{font-size:clamp(2.7rem,2rem + 4vw,5.4rem);font-size:clamp(2.4rem,12cqw,5rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1.3rem}
/* headline arc: only the trap recedes (light lavender); framing stays bold white */
.hero h1 .h1-pre{font-weight:700;color:#fff}
.hero h1 .h1-from{font-weight:300;color:var(--lavender-soft);white-space:nowrap}
.hero h1 .em{font-weight:700;color:#fff}
.hero-sub{font-size:var(--lead);color:rgba(255,255,255,.85);max-width:520px;font-weight:400;margin-bottom:1.5rem;line-height:1.55}
.hero-loc{display:inline-flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--lavender);margin-bottom:2.1rem}
.hero-loc::before{content:"";width:30px;height:1px;background:var(--amethyst)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}
.hero-markwrap{display:grid;place-items:center}
.hero-markwrap .mk{width:min(100%,440px);height:auto}
.hero-aperture{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:1/1;display:grid;place-items:center}
.hero-aperture .cluster-bg{position:absolute;inset:-12%;width:124%;height:124%;opacity:.9}
.hero-aperture .photo{position:relative;width:78%;aspect-ratio:1/1;clip-path:url(#wob1);overflow:hidden;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-aperture .photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:saturate(.6) contrast(1.03)}
.hero-aperture .photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,transparent 42%,rgba(31,20,34,.5))}

/* ===== PAIN DESCENT ===== */
.descent{position:relative;background:linear-gradient(180deg,#F4EDF4,var(--bg) 100%);color:var(--ink);overflow:hidden}
.descent-ring{position:absolute;z-index:0;pointer-events:none;width:min(84vw,1040px);right:-20%;top:3%;opacity:.09;animation:bookendbreathe 13s ease-in-out infinite}
.descent-ring .mk{width:100%;height:auto}
@media(max-width:768px){.descent-ring{display:none}}
@media(prefers-reduced-motion:reduce){.descent-ring{animation:none}}
.beat{position:relative;z-index:2;padding:clamp(2.4rem,5.5vh,4.4rem) 0}
.beat-grid{display:block;max-width:760px}
.beat h2{font-size:var(--h2);color:var(--aubergine);margin-bottom:1.5rem;max-width:20ch}
.beat-body{max-width:64ch}
.beat-body p{color:var(--muted);margin-bottom:1rem;font-size:1.0625rem;font-weight:400}
.beat-body p:last-child{margin-bottom:0}
.loop-lines{list-style:none;margin:.5rem 0 1.3rem}
.loop-lines li{font-family:var(--disp);font-weight:500;font-size:clamp(1.1rem,.98rem + .5vw,1.5rem);line-height:1.3;color:var(--aubergine);
  padding:.28em 0 .28em 1.6rem;position:relative}
.loop-lines li .dot{position:absolute;left:.35rem;top:.7em;width:.7rem;height:.7rem;border-radius:50%;background:var(--amethyst)}
.bigq{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,1.3rem + 2.4vw,3.2rem);color:var(--aubergine);line-height:1.16;
  text-wrap:balance;margin-top:1.1rem;max-width:18ch;letter-spacing:-.025em}
/* ----- the pivot question: the page's hinge, given its own centered moment ----- */
.pivot{text-align:right;margin-top:clamp(2.6rem,6vh,4.2rem)}
@media (min-width:900px){.pivot{margin-right:clamp(-16rem,-15vw,-5rem)}}
.pivot-lead{color:var(--muted);font-size:1.0625rem;margin-bottom:1.3rem !important}
.pivotq{max-width:none;margin:0 0 0 auto;text-align:right;letter-spacing:-.025em;
  font-size:clamp(1.95rem,1.3rem + 2.8vw,3.5rem);line-height:1.16}
.pivotq .pq-a{color:var(--aubergine)}
.pivotq .pq-or{color:var(--amethyst);font-weight:500;font-style:italic}
.pivotq .pq-b{color:var(--amethyst)}

/* ===== BRIDGE — the resolve: tangle comes to rest, aligned beside the copy ===== */
.resolve{position:relative;background:linear-gradient(160deg,#3D1E3C 0%,#5A3260 55%,#6E4279 100%);color:#fff;
  padding:clamp(4rem,10vh,7.5rem) 0;overflow:hidden}
.resolve-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,6vw,5rem);
  align-items:center;max-width:1010px;margin-inline:auto}
.resolve-mark{display:grid;place-items:center}
.resolve-mark .mk{width:min(58vw,300px);height:auto;filter:drop-shadow(0 18px 42px rgba(0,0,0,.3))}
.resolve-copy{max-width:56ch}
.resolve-copy h2{font-size:var(--h2);color:#fff;margin:0 0 1.3rem;max-width:20ch;line-height:1.15}
.resolve-copy p{color:rgba(255,255,255,.94);font-size:1.0625rem;margin-bottom:1rem;font-weight:400;line-height:1.6}
.resolve-copy p:last-of-type{margin-bottom:0}
.resolve-copy .btn{margin-top:1.6rem}

/* ===== WELCOME — stacked lockup ===== */
.welcome{padding:clamp(4rem,9vh,7rem) 0 clamp(4rem,8vh,6rem);background:var(--bg-tint);position:relative;overflow:hidden}
.welcome-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,5rem);align-items:center}
.welcome-content{max-width:620px}
.welcome h2{font-size:var(--h2);color:var(--aubergine);margin:0 0 1.4rem}
.welcome h2 .wordmark{letter-spacing:-.02em}
.welcome-body p{color:var(--muted);margin-bottom:1.1rem;font-size:1.06rem;font-weight:400;line-height:1.6}
.welcome-body p strong{color:var(--ink);font-weight:600}
.welcome-content .btn{margin-top:1rem}
/* practice motto — rendered in the logo wordmark idiom (Outfit, lowercase, tight tracking) */
.welcome-motto{margin-top:0}
.welcome-motto-intro{color:var(--muted);font-size:1.06rem;line-height:1.6;font-weight:400;margin:0 0 clamp(.9rem,1.8vw,1.3rem)}
.motto-logo{font-family:var(--disp);font-weight:300;font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);letter-spacing:-.02em;line-height:1;color:var(--aubergine);margin:0;text-align:center}
.motto-logo .ml-w{font-weight:300}
.motto-logo .ml-w:last-child{font-weight:700;color:var(--violet)}
.welcome-mark{justify-self:center}
.welcome-mark .mk{width:min(100%,360px);height:auto}
.team-line{margin-top:2.2rem;display:inline-flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1.2rem}
.team-line b{color:var(--violet);font-weight:600}

/* ===== SERVICES — photos framed by hand-drawn rings ===== */
.services{padding:clamp(4rem,9vh,7.5rem) 0;background:var(--bg-tint);border-top:2px solid var(--lavender);position:relative;overflow:hidden}
.services-head{text-align:center;max-width:640px;margin:0 auto clamp(2.5rem,5vw,4rem)}
.services-head h2{font-size:var(--h2);color:var(--aubergine);margin:.7rem 0 1rem}
.services-head p{color:var(--muted);font-size:var(--lead);font-weight:400}
.circle-svcs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.3rem,2.4vw,2.1rem);max-width:1090px;margin-inline:auto}
.csvc{position:relative;width:clamp(240px,27vw,332px);aspect-ratio:1/1;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.csvc:nth-child(odd){margin-top:34px}
.csvc:hover{transform:scale(1.04);z-index:6}
.csvc .frame{position:absolute;inset:14%;overflow:hidden;clip-path:url(#wob1);filter:drop-shadow(0 18px 40px rgba(31,20,34,.4))}
.csvc:nth-child(3n+2) .frame{clip-path:url(#wob2)}
.csvc:nth-child(3n+3) .frame{clip-path:url(#wob3)}
.csvc .frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.csvc:hover .frame img{transform:scale(1.08)}
.csvc .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,20,34,.04),rgba(31,20,34,.2));transition:.4s}
.csvc:hover .frame::after{background:linear-gradient(180deg,rgba(31,20,44,.62),rgba(61,30,60,.78))}
.csvc .frame-ring{position:absolute;inset:-3%;width:106%;height:106%;pointer-events:none;z-index:3;transform-origin:center;animation:ringdrift var(--spd,12s) linear infinite;animation-play-state:paused}
/* hover: ring drifts from rest (no jerk in); pauses in place on mouse-out (no snap back) */
@keyframes ringdrift{to{transform:rotate(360deg)}}
.csvc:hover .frame-ring,.csvc:focus-within .frame-ring{animation-play-state:running}
.csvc:nth-child(1) .frame-ring{--spd:11s}
.csvc:nth-child(2) .frame-ring{--spd:14.5s;animation-direction:reverse}
.csvc:nth-child(3) .frame-ring{--spd:9s}
.csvc:nth-child(4) .frame-ring{--spd:13s;animation-direction:reverse}
.csvc:nth-child(5) .frame-ring{--spd:16.5s}
.csvc .lab{position:absolute;inset:14%;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;padding:1rem 17% 24%;color:#fff}
.csvc .lab h3{font-size:clamp(.92rem,.85rem + .35vw,1.08rem);color:#fff;margin-bottom:.3rem;letter-spacing:-.01em;font-weight:600;text-wrap:balance}
.csvc .lab p{font-size:.82rem;color:rgba(255,255,255,.92);line-height:1.4;max-width:22ch;font-weight:400;opacity:0;max-height:0;transition:opacity .4s,max-height .45s}
.csvc:hover .lab p,.csvc:focus-within .lab p{opacity:1;max-height:120px}
.csvc:hover .lab,.csvc:focus-within .lab{padding-bottom:16%}

/* ===== FINAL CTA ===== */
.final{padding:clamp(4rem,9vh,7.5rem) 0;background:linear-gradient(165deg,#F6F0F7 0%,#EAE0EE 100%);border-top:2px solid var(--lavender);position:relative;overflow:hidden}
.final-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.final-content h2{font-size:var(--h2);color:var(--aubergine);margin:0 0 1.2rem}
.final-content>p{color:var(--muted);font-size:1.08rem;margin-bottom:1rem;max-width:50ch;font-weight:400;line-height:1.6}
.final-contacts{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem;margin-top:2.2rem}
.fc-item{min-width:0}
.fc-item .lab{display:block;font-family:var(--disp);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-bottom:.3rem}
.fc-item a{font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--aubergine);transition:color .25s}
.fc-item a:hover{color:var(--amethyst)}
.fc-item .addr{font-size:.98rem;color:var(--muted);line-height:1.5}
.final-card{background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.8rem,4vw,3rem);box-shadow:0 34px 70px -42px rgba(31,20,34,.42);text-align:left;align-self:start}

.form-h{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--aubergine);margin-bottom:1.1rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form label{display:block;font-family:var(--disp);font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--aubergine);margin-bottom:.4rem}
form input,form textarea{width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);
  font-family:var(--sans);font-size:1rem;color:var(--ink);transition:.25s}
form input::placeholder,form textarea::placeholder{color:#998c9e}
form input:focus,form textarea:focus{outline:none;border-color:var(--amethyst);background:#fff;box-shadow:0 0 0 4px rgba(144,96,160,.16)}
form textarea{resize:vertical;min-height:104px}
.frow{margin-bottom:1rem}.frow.full{grid-column:1/-1}
form .btn{width:100%;justify-content:center;margin-top:.3rem}

/* ===== FOOTER ===== */
footer{background:var(--aubergine-deepest);color:var(--lavender);padding:clamp(3rem,6vh,4.5rem) 0 2rem;position:relative;overflow:hidden}
.foot-top{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(192,176,208,.16)}
.foot-lockup{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;text-decoration:none;cursor:pointer}
.foot-lockup .mk{width:66px;height:60px;transform-origin:center;animation:footsway 6.5s ease-in-out infinite}
@keyframes footsway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.foot-lockup .wordmark{font-size:1.9rem;color:#fff;line-height:1}
.foot-tag{font-family:var(--disp);font-weight:200;color:var(--lavender);font-size:.95rem;letter-spacing:.16em}
.foot-right{display:flex;flex-direction:column;gap:1rem;align-items:flex-end}
.foot-social{display:flex;gap:.7rem}
.foot-social a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(192,176,208,.24);display:grid;place-items:center;color:#fff;transition:.3s}
.foot-social a:hover{background:var(--amethyst);border-color:var(--amethyst)}
.foot-social svg{width:18px;height:18px}
.pt-badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(192,176,208,.24);border-radius:999px;padding:.55rem 1rem;font-size:.8rem;color:var(--lavender);transition:.3s}
.pt-badge:hover{border-color:var(--amethyst);color:#fff}.pt-badge b{color:#fff;font-weight:600}
.foot-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:1.8rem;font-size:.85rem}
.foot-legal{display:flex;gap:1.6rem;flex-wrap:wrap}.foot-legal a:hover{color:#fff}
.foot-bottom .cr{color:rgba(192,176,208,.7)}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* Inner pages: no scroll-reveal — all content visible immediately on load.
   (Homepage `.home` keeps its reveals.) Per lesson: use opacity/transform only,
   NOT transition:none, so any hover transitions on .reveal elements still work. */
body:not(.home) .reveal{opacity:1;transform:none}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .welcome-grid{grid-template-columns:1fr;gap:2.4rem}
  .welcome-mark{order:-1;justify-self:start}
  .welcome-mark .mk{width:min(46%,200px)}
  .hero-aperture{order:-1;width:min(78%,360px)}
  .fgrid{grid-template-columns:1fr}
}
@media(max-width:1099px){
  .nav-links,.nav-phone{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--aubergine-deep);padding:1rem;gap:.15rem;box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
  .nav-links.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:1rem;min-width:0;display:block;background:transparent}
  .nav-links.open .dropdown.two-col{grid-template-columns:1fr}
}
@media(max-width:960px){
  .tb-addr{display:none}
  .tb-cities{display:inline}
}
@media(max-width:768px){
  /* Header CTA is hidden on phones (booking lives in the hamburger menu + sticky
     bottom Call/Book bar). !important so it beats the touch-device tap-target
     block (which sets display:inline-flex on .nav-cta .btn for iPad-landscape,
     where the CTA IS shown). Without this the button reappears and overlaps the brand. */
  .nav-cta .btn{display:none!important}
  .tb-phone{width:auto}
  .beat-grid{grid-template-columns:1fr;gap:1.1rem}
  .beat-mark{width:58px;height:53px}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
  .resolve-grid{grid-template-columns:1fr;gap:1.6rem;max-width:560px}
  .final-grid{grid-template-columns:1fr;gap:2.4rem}
  .resolve-mark{justify-self:start}
  .resolve-mark .mk{width:min(42vw,168px)}
  .resolve-copy{max-width:none}
}
@media(max-width:560px){
  .circle-svcs{flex-direction:column;align-items:center;gap:1.1rem}
  .csvc{margin:0!important;width:min(80vw,300px)}
  .csvc .lab p{opacity:1;max-height:120px}
}
@media(max-width:480px){
  .btn{padding:.85em 1.4em;font-size:.92rem}
  .final-contacts{grid-template-columns:1fr}
  .foot-top,.foot-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .foot-right{align-items:flex-start}
  .tb-pfx{display:none}
  .tb-item{font-size:.66rem;letter-spacing:.1em}
  .topbar-inner{gap:.8rem}
}
@media(hover:none) and (pointer:coarse){
  .nav-phone span,.eyebrow,.contact-row .lab,.foot-bottom,.csvc .lab p{font-size:max(.88rem,1em)}
  .csvc .lab p{opacity:1;max-height:120px}
  .brand-tagline{font-size:.88rem;letter-spacing:.12em}
}
/* ===== hero clarity + consult note ===== */
.hero-clarity{font-size:1.1rem;color:var(--lavender);margin:.2rem 0 1.6rem;max-width:540px;line-height:1.55;font-weight:300}
.hero-consult-note{margin-top:1rem;font-family:var(--disp);font-size:.8rem;letter-spacing:.05em;color:var(--lavender);opacity:.85}
.form-reassure{margin-top:.9rem;font-size:.8rem;color:var(--muted);text-align:center;line-height:1.45}

/* ===== TRUST STRIP ===== */
.trust{background:var(--bg);border-top:2px solid var(--lavender);border-bottom:2px solid var(--lavender)}
.trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2.4rem;padding:1.9rem 0}
.trust-item{display:flex;align-items:center;gap:.8rem;font-family:var(--disp);font-size:.96rem;font-weight:500;letter-spacing:.02em;color:var(--violet)}
.trust-item b{color:var(--aubergine);font-weight:700}
.trust-badge{height:54px;width:auto;display:block}
.trust-sep{color:var(--amethyst);opacity:.4;font-size:.78rem}
/* badge hover tooltip — enlarges the seal so visitors can read it */
.trust-item.has-tip{position:relative}
.trust-badge{transition:transform .2s ease}
.has-tip:hover .trust-badge,.has-tip:focus-within .trust-badge{transform:scale(1.06)}
.trust-tip{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 54px -18px rgba(42,21,42,.45);
  padding:1rem 1.1rem 1.05rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;width:max-content;max-width:220px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60}
.trust-tip-img{width:230px;height:230px;display:block;object-fit:contain}
.trust-tip-label{font-family:var(--disp);font-size:.86rem;font-weight:600;color:var(--violet);text-align:center;line-height:1.3}
.trust-tip-label b{color:var(--aubergine)}
.trust-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff}
.has-tip:hover .trust-tip,.has-tip:focus-within .trust-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* multi-image (magazine-cover) tooltip — anchored to the item's right edge so the
   wide card grows leftward and never overflows the viewport (it's the last item) */
.trust-tip--covers{max-width:min(94vw,624px);left:auto;right:0;transform:translateX(0) translateY(6px)}
.has-tip:hover .trust-tip--covers,.has-tip:focus-within .trust-tip--covers{transform:translateX(0) translateY(0)}
.trust-tip--covers::after{left:auto;right:38px;transform:none}
.trust-tip-head{font-family:var(--disp);font-size:.84rem;font-weight:600;color:var(--violet);text-align:center;line-height:1.3;margin-bottom:.15rem}
.trust-tip-head b{color:var(--aubergine)}
.trust-covers{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.trust-cover{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 4px 12px rgba(42,21,42,.25)}
@media (hover:none) and (pointer:coarse){.trust-tip{display:none}}

/* ===== TEAM ===== */
.team{background:linear-gradient(160deg,#3D1E3C 0%,#5A3260 55%,#6E4279 100%);border-top:2px solid var(--lavender);padding:clamp(3.6rem,7vh,5.5rem) 0 clamp(4rem,8vh,6.5rem)}
.team-head{text-align:center;max-width:640px;margin:0 auto clamp(2.4rem,4vw,3.4rem)}
.team-head h2{font-size:var(--h2);color:var(--aubergine);margin-bottom:.7rem}
.team-intro{color:var(--muted);font-size:1.06rem;line-height:1.6}
.team-grid-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem);max-width:1080px;margin-inline:auto}
.tm-lg{display:flex;flex-direction:column}
.tm-photo{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:0 34px 64px -34px rgba(31,20,34,.6);margin-bottom:1.15rem}
.tm-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tm-lg:hover .tm-photo img{transform:scale(1.045)}
.tm-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(31,20,34,.28));pointer-events:none}
.tm-lg h3{font-family:var(--disp);font-size:clamp(1.18rem,1rem + .5vw,1.42rem);color:#fff;font-weight:600;margin-bottom:.4rem}
.tm-lg h3 .cred{color:var(--lavender);font-weight:600}
.tm-lg h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--amethyst),var(--amethyst));background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s,color .3s}
.tm-lg h3 a:hover{color:var(--violet);background-size:100% 1.5px}
.tm-bio{font-size:.97rem;color:rgba(255,255,255,.82);line-height:1.55}
.team-foot{text-align:center;margin-top:clamp(2.4rem,4vw,3.4rem)}
@media(max-width:780px){.team-grid-lg{grid-template-columns:1fr;max-width:420px}}
@media(min-width:781px){.team-grid-lg--center{grid-template-columns:none;display:flex;justify-content:center}.team-grid-lg--center .tm-lg{flex:0 0 334px}}

/* ===== SERVICE placard + hover description ===== */
.svc-placard{position:absolute;right:-4%;bottom:6%;z-index:6;background:#fff;color:var(--aubergine);font-family:var(--disp);font-weight:600;
  font-size:clamp(.82rem,.76rem + .3vw,.98rem);line-height:1.2;letter-spacing:-.01em;padding:.62rem .9rem;border-radius:11px;
  border:1px solid rgba(61,30,60,.38);
  box-shadow:0 16px 34px -16px rgba(31,20,34,.5);max-width:64%;text-align:left;transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s}
.csvc:hover .svc-placard{border-color:var(--aubergine);box-shadow:0 22px 42px -16px rgba(31,20,34,.62)}
.svc-desc{position:absolute;inset:13%;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1rem 15%;color:#fff;font-size:.86rem;line-height:1.45;font-weight:400;opacity:0;transition:opacity .35s}
.csvc:hover .svc-desc,.csvc:focus-within .svc-desc{opacity:1}

/* ===== MOBILE STICKY CTA ===== */
.mobile-cta{display:none}
@media(max-width:768px){
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;gap:.55rem;padding:.65rem .8rem;
    background:rgba(31,20,34,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(192,176,208,.22)}
  .mobile-cta .btn{flex:1;justify-content:center;font-size:.9rem;padding:.85em .8em}
  .mobile-cta .btn-call{flex:0 0 auto;min-width:96px}
  body{padding-bottom:70px}
  .team-grid{grid-template-columns:1fr;max-width:340px;gap:2rem}
}
.mk-beat{height:auto;display:block}.mk-beat-c{width:clamp(44px,5vw,62px);margin:0 auto 1.05rem}.mk-beat-l{width:clamp(42px,4.6vw,56px);margin:0 0 1.1rem}@keyframes bookendbreathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.045) rotate(2.5deg)}}.final-bookend{position:absolute;z-index:0;pointer-events:none;width:min(46vw,560px);right:-8%;bottom:-18%;opacity:.16;transform-origin:center;animation:bookendbreathe 9s ease-in-out infinite}.final-bookend .mk{width:100%;height:auto}@media(prefers-reduced-motion:reduce){.final-bookend{animation:none}}.welcome-solo{max-width:720px;margin-inline:auto}.team-bridge{font-family:var(--disp);font-size:clamp(1.6rem,1.15rem + 1.8vw,2.5rem);color:#fff;font-weight:600;line-height:1.18;letter-spacing:-.02em;max-width:22ch;margin:0 auto clamp(2.6rem,4.5vw,3.6rem);text-align:center;text-wrap:balance}.team .btn-outline{border-color:var(--lavender);color:#fff}.team .tm-lg h3 a:hover{color:var(--lavender)}

/* ========== FOOTER VARS (TPA convention — consumed by parent .site-footer) ========== */
:root {
  --footer-bg: #1F1422;          /* --aubergine-deepest */
  --footer-text: #C0B0D0;        /* --lavender */
}

/* ========== .container fallback (mockup defines width:90%;max-width:var(--maxw);margin-inline:auto — kept) ========== */
.container { width: 90%; max-width: var(--maxw, 1180px); margin-inline: auto; }

/* ========== FORCE-VISIBLE SAFETY NET ==========
   This mockup uses .reveal / .reveal.in for scroll animation (NOT .fade-in).
   Above-fold hero elements get forceVisible 0s so they paint immediately and
   never depend on deferred JS (kills LCP render delay). Below-fold .reveal
   elements DO NOT get forceVisible — the JS 8s fallback (client.js) reveals
   anything IntersectionObserver missed. */
@keyframes forceVisible { to { opacity: 1; transform: none; } }

/* GROUP 1 — above-fold hero: visible immediately, 0s delay. */
.hero .hero-content,
.hero h1,
.hero-sub,
.hero-clarity,
.hero-loc,
.hero-ctas,
.hero-consult-note,
.inner-hero-content {
  animation: forceVisible 0s 0s forwards;
}

/* .reveal.in MUST override forceVisible so the scroll transition takes over
   when IntersectionObserver adds .in. */
.reveal.in {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ========== MOBILE RESPONSIVE INVARIANTS — DO NOT REMOVE ==========
   Adapted to this mockup's classes: nav is .nav / .nav-links / .hamburger /
   .brand / .dropdown. There is NO .mobile-nav drawer in the mockup — it toggles
   .nav-links.open. The template builder should decide the mobile drawer approach;
   selectors for .mobile-nav* are left in the drawer block below in case a real
   drawer is introduced. Validator Check 15 enforces these. */

html, body { overflow-x: clip; }

@media (max-width: 768px) {
  /* Brand block must shrink to fit alongside hamburger */
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand .wordmark { white-space: normal; min-width: 0; }

  /* Hamburger pinned to right edge regardless of brand width */
  .hamburger, .mobile-toggle { flex-shrink: 0; margin-left: auto; }

  /* Submenu items must wrap (nav-links > li nowrap inheritance otherwise overflows) */
  .nav-links > li { white-space: normal; }
  .dropdown,
  .dropdown li,
  .dropdown a { white-space: normal; }
}

/* ========== MOBILE DRAWER SUBMENU — DUAL-SELECTOR REQUIRED ==========
   The mockup ships an in-place .nav-links.open accordion (no separate drawer).
   These dual-selector rules cover whichever walker the template builder wires
   into header.php (.sub-menu for default walker, .dropdown-menu for TPA_Nav_Walker)
   if a real .mobile-nav drawer is adopted. Validator Check 17 enforces this. */
.mobile-nav-links,
.mobile-menu-links,
.mobile-nav,
.mobile-nav-links ul,
.mobile-menu-links ul,
.mobile-nav ul,
.mobile-nav-links .sub-menu,
.mobile-nav-links .dropdown-menu,
.mobile-menu-links .sub-menu,
.mobile-menu-links .dropdown-menu,
.mobile-nav .sub-menu,
.mobile-nav .dropdown-menu {
  list-style: none !important;
  padding: 0;
  margin: 0;
}
.mobile-nav-links li,
.mobile-menu-links li,
.mobile-nav li,
.mobile-nav-links .sub-menu li,
.mobile-nav-links .dropdown-menu li,
.mobile-menu-links .sub-menu li,
.mobile-menu-links .dropdown-menu li,
.mobile-nav .sub-menu li,
.mobile-nav .dropdown-menu li {
  list-style: none !important;
}
.mobile-nav-links .sub-menu,
.mobile-nav-links .dropdown-menu,
.mobile-menu-links .sub-menu,
.mobile-menu-links .dropdown-menu,
.mobile-nav .sub-menu,
.mobile-nav .dropdown-menu {
  display: none;
  padding-left: 20px;
  margin: 4px 0 8px 0;
  border-left: 2px solid var(--lavender);
}
.mobile-nav-links .sub-menu.open,
.mobile-nav-links .dropdown-menu.open,
.mobile-menu-links .sub-menu.open,
.mobile-menu-links .dropdown-menu.open,
.mobile-nav .sub-menu.open,
.mobile-nav .dropdown-menu.open {
  display: block;
}
.mobile-nav-links .sub-menu li a,
.mobile-nav-links .dropdown-menu li a,
.mobile-menu-links .sub-menu li a,
.mobile-menu-links .dropdown-menu li a,
.mobile-nav .sub-menu li a,
.mobile-nav .dropdown-menu li a {
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--lavender) 50%, transparent);
}
.mobile-nav-links .sub-menu li:last-child a,
.mobile-nav-links .dropdown-menu li:last-child a {
  border-bottom: none;
}
/* Chevron toggle button — pinned to top of <li>, NOT top:50% which drifts */
.mobile-nav-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0 8px;
  cursor: pointer;
  color: var(--lavender);
  line-height: 0;
}
.mobile-nav-toggle svg { transition: transform 0.25s ease; }
.mobile-nav-toggle.open svg { transform: rotate(180deg); }
.mobile-nav ul li.has-submenu { position: relative; }
.mobile-nav ul li.has-submenu > a { padding-right: 40px; }

/* Mobile drawer close button (if a real drawer is adopted) */
.mobile-nav-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; color: currentColor;
  transition: transform .25s ease;
}
.mobile-nav-close:hover { transform: rotate(90deg); }
.mobile-nav-close svg { width: 22px; height: 22px; display: block; }
/* iOS Safari address-bar drawer height fix */
.mobile-nav { height: 100vh; height: 100dvh; }

/* ========== TOUCH-DEVICE ACCESSIBILITY — DO NOT REMOVE ==========
   Adapted to this mockup's classes. (hover:none)/(pointer:coarse) only.
   Validator Check 18 enforces this block. */
@media (hover: none) and (pointer: coarse) {
  /* Primary nav links — ≥44×44 tap target */
  .nav-links > li > a {
    font-size: 14px !important;
    min-height: 44px;
    min-width: 44px;
    padding: 12px 8px !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Dropdown submenu links — desktop dropdowns AND any mobile drawer */
  .dropdown a,
  .nav-links .sub-menu a,
  .mobile-nav .sub-menu a,
  .mobile-nav a {
    font-size: 14px !important;
    min-height: 44px;
    padding: 12px 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  /* CTA buttons — nav, hero, mobile sticky CTA, final card. */
  .nav-cta .btn,
  .hero-ctas .btn,
  .mobile-cta .btn,
  form .btn,
  a.btn-primary,
  a.btn-solid,
  a.btn-ghost,
  a.btn-outline {
    font-size: 14px !important;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Top-bar phone, nav phone — ≥14px on touch */
  .tb-item,
  .tb-phone,
  .nav-phone,
  .nav-phone span {
    font-size: 14px !important;
  }

  /* Trust strip + team credential lines ≥14px */
  .trust-item,
  .tm-lg .cred,
  .tm-bio {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Footer brand, tagline, legal, copyright tap targets */
  .foot-tag,
  .foot-bottom,
  .foot-bottom .cr,
  .pt-badge {
    font-size: 14px !important;
  }
  .foot-legal a,
  .foot-lockup,
  .pt-badge {
    min-height: 44px;
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }

  /* Phone + email click-to-call/mail tap targets */
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn) {
    min-height: 44px;
    padding: 12px 0;
    display: inline-block;
    box-sizing: border-box;
  }

  /* WPForms submit + labels (final-card form gets replaced by WPForms at build) */
  .wpforms-form .wpforms-submit,
  .final-card .wpforms-form .wpforms-submit,
  button[type="submit"].wpforms-submit {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
  }
  .wpforms-container .wpforms-field-label,
  .wpforms-container.wpforms-container .wpforms-field-label {
    font-size: 14px !important;
  }

  /* Legal pages: inline-text links need a 44px tap-box */
  body.page-privacy-policy .inner-body a,
  body.page-terms-and-conditions .inner-body a,
  body.page-terms-conditions .inner-body a {
    display: inline-block;
    min-height: 44px;
    padding: 11px 0;
    line-height: 1.4;
    box-sizing: border-box;
  }

  /* Burger / mobile menu toggle */
  .hamburger,
  .mobile-toggle,
  .mobile-menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Social icon links */
  .foot-social a,
  .social-links a,
  .social-icons a {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Trust badges */
  .foot-badge,
  .footer-badges a,
  .trust-badge {
    min-height: 44px !important;
  }

  /* No fixed-background parallax on touch */
  [class*="parallax"] {
    background-attachment: scroll !important;
  }
}

/* ========== SHORT LANDSCAPE PHONES: HERO MUST CLEAR THE NAV ========== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    height: auto;
    padding-top: 96px;
    padding-bottom: 32px;
  }
  .hero-grid { gap: 1.6rem; }
}

/* ========== LEGAL PAGES: NEVER FADE IN ==========
   Mockup uses .reveal (not .fade-in). Force legal-page reveal elements visible. */
body.page-terms-and-conditions .reveal,
body.page-terms-and-conditions .fade-in,
body.page-terms-conditions .reveal,
body.page-terms-conditions .fade-in,
body.page-privacy-policy .reveal,
body.page-privacy-policy .fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ========== WORDPRESS NAV-WALKER SHIM ==========
   TPA_Nav_Walker emits  <li class="menu-item-has-children dropdown">
                           <a class="dropdown-toggle">…</a>
                           <ul class="dropdown-menu">…</ul></li>
   The mockup CSS targeted .has-drop / .dropdown (the submenu UL). Re-point the
   mockup's dropdown styling onto the walker's actual output classes. */
.nav-links > li.dropdown { position: relative; }
.nav-links > li.dropdown > a::after,
.has-drop > a::after {
  content: "";
  display: inline-block;
  width: .4em; height: .4em;
  margin-left: .4em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .7;
}
.nav-links .dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--aubergine-deep);
  border: 1px solid rgba(192,176,208,.16);
  border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
  padding: .5rem; min-width: 230px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
  list-style: none; z-index: 50;
}
/* MANDATORY hover bridge — keeps :hover alive crossing the 8px gap */
.nav-links .dropdown-menu::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -12px; height: 14px; background: transparent;
}
.nav-links > li.dropdown:hover > .dropdown-menu,
.nav-links > li.dropdown:focus-within > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Specialties dropdown (7+ items) → two columns, like the mockup .two-col */
.nav-links .dropdown-menu:has(> li:nth-child(7)) {
  display: grid; grid-template-columns: 1fr 1fr; min-width: 430px; gap: .05rem;
}
.nav-links .dropdown-menu li { list-style: none; }
.nav-links .dropdown-menu li a {
  display: block; padding: .66rem .75rem; border-radius: 7px;
  font-size: .88rem; color: var(--lavender); transition: .2s;
  text-transform: none; letter-spacing: normal; line-height: 1.3;
}
.nav-links .dropdown-menu li a::after { display: none; }
.nav-links .dropdown-menu li a:hover { background: rgba(192,176,208,.14); color: #fff; }
/* Chevron toggles are mobile-only — hidden on desktop (shown inside the MQ below) */
.mobile-submenu-toggle { display: none; }

/* Mobile: in-place accordion (mockup pattern), submenus COLLAPSED by default */
@media (max-width: 1099px) {
  .nav-links.open > li.dropdown > .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding-left: 1rem; min-width: 0;
    background: transparent; display: none;
  }
  .nav-links.open > li.dropdown.submenu-open > .dropdown-menu { display: block; }
  .nav-links.open .dropdown-menu:has(> li:nth-child(7)) { grid-template-columns: 1fr; display: none; }
  .nav-links.open > li.dropdown.submenu-open > .dropdown-menu:has(> li:nth-child(7)) { display: block; }
  /* chevron toggle injected by JS */
  .nav-links.open > li.dropdown { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-links.open > li.dropdown > a { flex: 1; }
  .nav-links.open > li.dropdown > a::after { display: none; }
  .mobile-submenu-toggle {
    background: none; border: none; cursor: pointer; padding: 8px 10px;
    color: var(--lavender); display: inline-flex; align-items: center; flex-shrink: 0;
  }
  .mobile-submenu-toggle svg { transition: transform .3s ease; }
  .nav-links.open > li.dropdown.submenu-open > .mobile-submenu-toggle svg { transform: rotate(180deg); }
}

/* ========== FOOTER PT VERIFIED BADGE ========== */
.footer-pt-badge { display: inline-block; opacity: .9; transition: opacity .3s ease; }
.footer-pt-badge:hover { opacity: 1; }
.footer-pt-badge img { height: 44px; width: auto; display: block; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════════════════
   INNER-PAGE SYSTEM — purepsych (appended; no existing rules duplicated/removed)
   Covers: .inner-hero, .service-body (+ Rule #7 image rows), .about-team,
   .contact-grid, FAQ "Accordion with Decorative Architecture", blog index,
   single post, thank-you, legal prose. Outfit display / Source Sans 3 body,
   aubergine palette, hand-drawn ring motif. Added 2026-06-24.
   ════════════════════════════════════════════════════════════════════════ */

/* --- generic-var aliases so the parent thank-you pattern + any generic CSS
   resolve to the purepsych palette (purepsych uses --aubergine/--amethyst). --- */
:root{
  --primary:var(--amethyst);
  --primary-dark:var(--aubergine);
  --accent:var(--violet);
  --service-body-max:1080px;
  --font-heading:var(--disp);
  --font-body:var(--sans);
  --font-h:var(--disp);
  --font-b:var(--sans);
}

/* ===== INNER HERO — compact aubergine hero with photo + gradient overlay ===== */
.inner-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 50% -20%,var(--aubergine) 0%,var(--aubergine-deep) 60%,var(--aubergine-deepest) 100%);
  padding:clamp(3.65rem,9.1vh,6rem) 0 clamp(3.65rem,9.1vh,6rem); /* +30% hero height */
}
.inner-hero--photo{padding:clamp(4.4rem,11.7vh,7.3rem) 0 clamp(4.15rem,10.4vh,6.5rem)} /* +30% hero height */
@media(min-width:1025px){
  .inner-hero,.inner-hero--photo{height:330px;padding-top:0;padding-bottom:0;display:flex;align-items:center}
}
.inner-hero-media{position:absolute;inset:0;z-index:0}
.inner-hero-media picture,.inner-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;filter:saturate(1.22) contrast(1.06)}
/* How We Work hero — shift focal point down ~6% to reveal more mountains while keeping sky above */
.page-id-27 .inner-hero-media img,.page-id-27 .inner-hero-media picture{object-position:center 38%}
/* Family Therapy hero — shift focal point up ~12% so the mountains sit lower and more sky shows */
.page-id-35 .inner-hero-media img,.page-id-35 .inner-hero-media picture{object-position:center 20%}
/* Behavioral Therapy hero — shift focal point down to the waterline so the water-meets-coastline band shows */
.page-id-40 .inner-hero-media img,.page-id-40 .inner-hero-media picture{object-position:center 50%}
/* Psychodynamic hero — nudge up a touch so more sky shows above the summits */
.page-id-42 .inner-hero-media img,.page-id-42 .inner-hero-media picture{object-position:center 26%}
/* Evaluations hero — shift down substantially to feature the mountain peaks (was mostly sky) */
.page-id-37 .inner-hero-media img,.page-id-37 .inner-hero-media picture{object-position:center 50%}
/* EMDR (38) — shift the crop down the image (image moves up) to reveal more ground with the sky/horizon */
.page-id-38 .inner-hero-media img,.page-id-38 .inner-hero-media picture{object-position:center 45%}
/* Relational Health & Recovery — let the H1 run full width so the title fits on one line */
.page-id-43 .inner-hero-content h1{max-width:none}
@media(min-width:769px){.page-id-43 .inner-hero-content h1{white-space:nowrap}}
/* Family Therapy hero tagline — italic, larger + bolder, with a stronger shadow so it reads over the bright snowy peaks */
.page-id-35 .inner-hero-sub{font-style:italic;font-weight:600;color:#fff;
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.15rem);line-height:1.3;
  text-shadow:0 2px 16px rgba(20,12,22,.65),0 1px 4px rgba(20,12,22,.55)}

/* Featured question — a weighted, centered statement card (NOT a right-side quote) */
.service-body-inner .question-feature{background:var(--bg-tint);border:1px solid var(--line);border-radius:24px;
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.6rem,4vw,3rem);margin:var(--sec-gap) 0;text-align:left;max-width:720px}
.service-body-inner .question-feature .question-lead{font-family:var(--disp);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);font-weight:600;margin:0 0 1rem;max-width:none}
.service-body-inner .question-feature .question-text{font-family:var(--disp);font-style:italic;font-weight:500;
  font-size:clamp(1.45rem,1.15rem + 1.3vw,2.1rem);line-height:1.3;color:var(--aubergine);letter-spacing:-.01em;
  max-width:none;margin:0}

/* ===== SERVICES/SPECIALTIES HUB GRID (Therapeutic Services overview page) ===== */
.svc-hub{background:var(--bg-tint);border-top:2px solid var(--lavender);padding:clamp(3.4rem,7vh,5.5rem) 0}
.svc-hub-block + .svc-hub-block{margin-top:clamp(2.6rem,5vw,4rem)}
.svc-hub-label{font-family:var(--disp);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:var(--aubergine);
  font-weight:600;letter-spacing:-.01em;text-align:center;margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.svc-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.8rem)}
.svc-hub-card{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 22px 46px -30px rgba(31,20,34,.5);text-decoration:none}
.svc-hub-card img,.svc-hub-card picture{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.svc-hub-card picture img{position:static}
.svc-hub-card:hover img{transform:scale(1.06)}
.svc-hub-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,20,34,.05) 0%,rgba(31,20,34,.18) 45%,rgba(31,20,34,.78) 100%)}
.svc-hub-card .svc-hub-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem 1.1rem;
  font-family:var(--disp);font-weight:600;font-size:clamp(1rem,.92rem + .35vw,1.18rem);line-height:1.2;
  color:#fff;text-shadow:0 1px 10px rgba(20,12,22,.5);display:flex;align-items:center;gap:.4rem}
.svc-hub-card .svc-hub-title .arr{transition:transform .35s ease;opacity:.85}
.svc-hub-card:hover .svc-hub-title .arr{transform:translateX(4px)}
@media(max-width:768px){.svc-hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.svc-hub-grid{grid-template-columns:1fr}}

/* ===== BIO PHOTO GALLERY (in-body image grid, e.g. about-bryan-niederman press photos) ===== */
.service-body-inner .svc-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.6vw,1.2rem);margin:var(--head-gap) 0 0;max-width:none}
.service-body-inner .svc-photo-grid figure{margin:0;position:relative;overflow:hidden;
  border-radius:14px;aspect-ratio:4/5;box-shadow:0 18px 40px -30px rgba(31,20,34,.45)}
.service-body-inner .svc-photo-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.service-body-inner .svc-photo-grid figure:hover img{transform:scale(1.05)}
@media(max-width:768px){.service-body-inner .svc-photo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.service-body-inner .svc-photo-grid{grid-template-columns:1fr}}

/* ===== LIGHTBOX (click-to-enlarge popup for .svc-photo-grid images) ===== */
body.lightbox-open{overflow:hidden}
.svc-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(20,12,22,.92);opacity:0;visibility:hidden;transition:opacity .25s ease;padding:clamp(1rem,4vw,3rem)}
.svc-lightbox.open{opacity:1;visibility:visible}
.svc-lightbox-img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);opacity:0;transform:scale(.97);transition:opacity .25s ease,transform .25s ease}
.svc-lightbox.open .svc-lightbox-img{opacity:1;transform:scale(1)}
.svc-lightbox-close{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.svc-lightbox-close:hover{background:rgba(255,255,255,.24)}
.svc-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.svc-lightbox-nav:hover{background:rgba(255,255,255,.24)}
.svc-lightbox-prev{left:clamp(.6rem,2vw,1.6rem)}
.svc-lightbox-next{right:clamp(.6rem,2vw,1.6rem)}
@media(hover:none) and (pointer:coarse){.service-body-inner .svc-photo-grid figure:hover img{transform:none}}

/* ===== EVALUATIONS LIST — masonry card grid (each card hugs its own content, no
   dead whitespace under short cards; heading gets a short amethyst accent rule). ===== */
.service-body-inner .eval-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,2vw,1.4rem);margin:var(--head-gap) 0 0;max-width:none}
.service-body-inner .eval-card{margin:0;background:#fff;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;padding:clamp(1.3rem,2.6vw,1.8rem);box-shadow:0 18px 40px -32px rgba(31,20,34,.4)}
.service-body-inner .eval-card h3{font-family:var(--disp);font-weight:600;color:var(--aubergine);
  font-size:clamp(1.05rem,.95rem + .4vw,1.22rem);line-height:1.25;margin:0;max-width:none;letter-spacing:-.01em}
.service-body-inner .eval-card h3::after{content:"";display:block;width:30px;height:2px;border-radius:2px;
  background:var(--amethyst);margin-top:.65rem}
.service-body-inner .eval-card p{font-size:.95rem;color:var(--muted);line-height:1.55;margin:.75rem 0 0;max-width:none}
@media(max-width:600px){.service-body-inner .eval-grid{grid-template-columns:1fr}}

/* ===== EVALUATIONS GROUPS — boxed sections (subheading + card grid) grouping
   the offerings list into Cognitive & Learning / School & Development /
   Forensic & Specialty. ===== */
.service-body-inner .eval-groups{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.2rem);margin:var(--head-gap) 0 0;max-width:none}
.service-body-inner .eval-group{background:var(--bg-tint);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,3vw,2.3rem)}
.service-body-inner .eval-group-heading{font-family:var(--disp);font-size:clamp(1.4rem,1.2rem + .7vw,1.75rem);
  font-weight:600;color:var(--aubergine);letter-spacing:-.005em;margin:0 0 1.3rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.service-body-inner .eval-group .eval-grid{margin-top:0}
@media(max-width:600px){.service-body-inner .eval-group{padding:1.5rem 1.3rem}}
.inner-hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(165deg,rgba(31,20,34,.40) 0%,rgba(42,21,42,.24) 50%,rgba(110,74,134,.28) 100%)}
.inner-hero-ring{position:absolute;z-index:1;pointer-events:none;width:min(60vw,560px);right:-12%;top:-22%;opacity:.13;animation:bookendbreathe 13s ease-in-out infinite}
.inner-hero-ring .mk{width:100%;height:auto}
@media(prefers-reduced-motion:reduce){.inner-hero-ring{animation:none}}
.inner-hero-content{position:relative;z-index:2}
.inner-hero-content h1{font-size:clamp(2.1rem,1.5rem + 3vw,3.7rem);font-weight:700;letter-spacing:-.03em;color:#fff;margin:0;max-width:18ch;text-shadow:0 2px 18px rgba(20,12,22,.45)}
.inner-hero-sub{font-size:var(--lead);color:rgba(255,255,255,.92);max-width:54ch;margin-top:1rem;line-height:1.55;font-weight:400;text-shadow:0 1px 12px rgba(20,12,22,.4)}

/* ===== SERVICE BODY — readable column + Rule #7 alternating image rows ===== */
.service-body{padding:clamp(3rem,7vh,5.5rem) 0;background:var(--bg);position:relative}
.service-body-inner{max-width:var(--service-body-max);margin-inline:auto;
  /* uniform inner-page rhythm — every page uses the same gaps */
  --sec-gap:clamp(2.6rem,4.5vw,3.8rem);  /* between content sections (h2 blocks + image rows) */
  --head-gap:1.15rem;                    /* heading -> its body */
  --body-gap:1.05rem}                    /* paragraph -> paragraph */
.service-body-inner > :first-child{margin-top:0}
.service-body-inner p{color:var(--muted);font-size:1.0625rem;line-height:1.7;margin-bottom:var(--body-gap)}
.service-body-inner h2{font-size:var(--h2);color:var(--aubergine);margin:0 0 var(--head-gap);line-height:1.15}
.service-body-inner h3{font-family:var(--disp);font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);color:var(--violet);margin:2rem 0 .9rem;font-weight:600}
.service-body-inner ul,.service-body-inner ol{margin:0 0 1.2rem 1.2rem;color:var(--muted)}
.service-body-inner li{margin-bottom:.5rem;padding-left:.3rem}
.service-body-inner strong{color:var(--ink);font-weight:600}
.service-body-inner em{font-style:italic}
.service-body-inner a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lavender);transition:color .2s}
.service-body-inner a:hover{color:var(--amethyst)}
/* Buttons keep their own styling — the generic body-link underline/color must not bleed onto .btn */
.service-body-inner a.btn{text-decoration:none}
.service-body-inner a.btn-primary,.service-body-inner a.btn-primary:hover{color:#fff;text-decoration:none}
.service-body-inner a.btn-outline{color:var(--violet)}
.service-body-inner a.btn-outline:hover{color:#fff}
/* Pull-quote — NO left stripe (AI slop). Centered italic display + oversized amethyst opening glyph. */
.service-body-inner blockquote{position:relative;margin:2.6rem auto;padding:1.7rem 0 0;max-width:60ch;border:0;text-align:center;
  font-family:var(--disp);font-weight:500;font-style:italic;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);color:var(--violet);line-height:1.42}
.service-body-inner blockquote::before{content:"\201C";position:absolute;top:0;left:50%;transform:translate(-50%,-42%);
  font-style:normal;font-weight:700;font-size:3.4rem;line-height:1;color:var(--amethyst);opacity:.5}
.service-body-inner blockquote p{margin:0}

/* Intro lead — first body subheadline rendered as a lead H2. Same head-gap as any section. */
.service-body-inner .svc-intro{margin:0 0 var(--head-gap)}
.service-body-inner .svc-intro:not(:first-child){margin-top:var(--sec-gap)}
.service-body-inner .svc-intro h2{margin:0 0 var(--head-gap)}
.service-body-inner .inner-lead h2,
.service-body-inner h2.inner-lead{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);color:var(--violet);max-width:24ch;margin-bottom:var(--head-gap)}

/* Image-beside-text rows (Rule #7). H2 lives INSIDE .svc-text-col. Same section gap as h2 blocks. */
.service-body-inner .svc-img-section{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);
  align-items:stretch;margin:var(--sec-gap) 0}
.service-body-inner .svc-img-section--reverse .svc-text-col{order:2}
.service-body-inner .svc-img-section--reverse .svc-img-col{order:1}
.service-body-inner .svc-text-col{display:flex;flex-direction:column;justify-content:flex-start}
.service-body-inner .svc-text-col > :first-child{margin-top:0}
.service-body-inner .svc-text-col > :last-child{margin-bottom:0}
/* image contributes ZERO height on desktop; row sized by the text, cell stretches to fill */
.service-body-inner .svc-img-col{position:relative;overflow:hidden;border-radius:18px;
  box-shadow:0 28px 56px -32px rgba(31,20,34,.5)}
/* Body images are clean rounded rectangles — no wob/blob clip (per client request) */
.service-body-inner .svc-img-col img,
.service-body-inner .svc-img-col picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-body-inner .svc-img-col picture img{position:static}

/* ===== QUOTE-CARD ROW — quote sits in a highlight card in the right column
   (same position as a body image). Text left, card right, vertically centered. ===== */
.service-body-inner .svc-quote-section{display:grid;grid-template-columns:1.18fr .82fr;
  gap:clamp(1.8rem,4vw,3.2rem);align-items:center;margin:var(--sec-gap) 0}
.service-body-inner .svc-quote-section .svc-text-col > :first-child{margin-top:0}
.quote-card{position:relative;background:var(--bg-tint);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.7rem,3vw,2.5rem);box-shadow:0 24px 50px -34px rgba(31,20,34,.4)}
.quote-card::before{content:"\201C";display:block;font-family:var(--disp);font-weight:700;
  font-size:3.2rem;line-height:.6;color:var(--amethyst);opacity:.5;margin-bottom:.5rem}
.quote-card p{font-family:var(--disp);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.42;color:var(--violet);margin:0;max-width:none}
.quote-card cite{display:block;margin-top:1.1rem;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--violet)}
@media(max-width:768px){
  .service-body-inner .svc-quote-section{grid-template-columns:1fr;gap:1.5rem;align-items:start}
}

/* Full-width prose section — opts a heading + its paragraphs out of the
   narrow reading-column max-width applied to direct-child p/h2 elsewhere. */
.service-body-inner .svc-full-section{max-width:none}
.service-body-inner .svc-full-section:not(:first-child){margin-top:var(--sec-gap)}
.service-body-inner .svc-full-section > h2,
.service-body-inner .svc-full-section > p{max-width:none}

/* ===== INNER-PAGE READABILITY OVERHAUL — applies to all service/specialty/bio pages =====
   Readable measure on text, generous heading rhythm, comfortable body sizing.
   Direct-child selectors only, so image-row content (.svc-text-col) is untouched. */
.service-body-inner > p,
.service-body-inner > ul,
.service-body-inner > ol{max-width:720px}
.service-body-inner > h2{max-width:24ch}
.service-body-inner > h3{max-width:30ch}
.service-body-inner > h2:not(:first-child){margin-top:var(--sec-gap)}
.service-body-inner > p,
.service-body-inner .svc-text-col p{font-size:1.075rem;line-height:1.72}

/* ===== CLINICIAN BIO — innocuous "mark" hero (no photo) + in-body headshot ===== */
.inner-hero--mark{text-align:center}
.inner-hero--mark .inner-hero-ring{display:none}
.inner-hero--mark .inner-hero-content{text-align:center;display:flex;flex-direction:column;align-items:center}
.inner-hero-markwrap{position:relative;z-index:2;display:flex;justify-content:center;margin-bottom:1.1rem}
.inner-hero-markwrap .mk{width:min(34vw,132px);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.inner-hero--mark .inner-hero-content h1{max-width:22ch}
.inner-hero--mark .inner-hero-sub{margin-left:auto;margin-right:auto}

/* ===== CLINICIAN BIO — sticky profile sidebar + story column ===== */
.bio-layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.bio-profile{grid-column:2;grid-row:1;position:sticky;top:96px;background:var(--bg-tint);border:1px solid var(--line);
  border-radius:22px;padding:clamp(1.5rem,2.5vw,1.9rem);text-align:center}
.bio-profile-photo{aspect-ratio:4/5;border-radius:16px;overflow:hidden;margin-bottom:1.15rem;
  box-shadow:0 24px 48px -28px rgba(31,20,34,.5)}
.bio-profile-photo img,.bio-profile-photo picture{width:100%;height:100%;object-fit:cover;display:block}
.bio-profile-photo picture img{position:static}
.bio-profile-name{font-family:var(--disp);font-size:1.32rem;font-weight:600;color:var(--aubergine);line-height:1.18;margin-bottom:.35rem;letter-spacing:-.01em}
/* long names (e.g. "Jessica La Volpe, MSW, LSW") shrink + stay on one line */
.bio-profile-name--fit{font-size:1.18rem;letter-spacing:-.03em;white-space:nowrap}
.bio-profile-creds{display:block;white-space:normal;font-size:.92rem;font-weight:500;letter-spacing:0;color:var(--violet);margin-top:.15rem}
.bio-profile-role{font-family:var(--disp);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--violet);font-weight:600;line-height:1.4}
.bio-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.2rem 0}
.bio-badges img{height:52px;width:auto;display:block}
.bio-chips-label{font-family:var(--disp);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.3rem 0 .6rem}
.bio-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1.5rem}
.bio-chip{font-family:var(--disp);font-size:.78rem;font-weight:500;color:var(--aubergine);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.34rem .82rem;line-height:1.2}
.bio-profile .btn{width:100%;justify-content:center;font-size:.84rem;padding:.92em 1em;white-space:nowrap;letter-spacing:.01em}
/* story column — section rhythm matches the rest of the site (vars cascade from .service-body-inner) */
.bio-story > :first-child{margin-top:0}
.bio-story > h2:not(:first-child){margin-top:var(--sec-gap)}
.bio-story .svc-intro{margin:0 0 var(--head-gap)}
.bio-story .svc-intro h2{margin:0 0 var(--head-gap)}
/* selective tinted highlight section (e.g. closing call-to-action) */
.bio-highlight{background:var(--bg-tint);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,3vw,2.3rem);margin:var(--sec-gap) 0 0}
.bio-highlight > :first-child{margin-top:0}
.bio-highlight > :last-child{margin-bottom:0}
.bio-highlight h2{margin-top:0!important}
@media(max-width:860px){
  .bio-layout{grid-template-columns:1fr;gap:1.8rem}
  .bio-profile{grid-column:1;grid-row:auto;position:static;max-width:380px;margin:0 auto 1rem}
}

/* Legal / generic prose readability */
.inner-prose{max-width:820px}
.inner-prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — editorial refinement (scoped to body.page-about ONLY).
   Reuses the shared .service-body / .svc-img-* shell from above, but every
   override below is namespaced under body.page-about so service / specialty
   pages that share those classes are NOT affected. Refresh 2026-06-24:
   readable measure, generous vertical rhythm, stronger heading hierarchy,
   weightier body-image rows, breathable team grid.
   ════════════════════════════════════════════════════════════════════════ */

/* --- Intro narrative: airier section padding + readable measure --- */
body.page-about .about-intro{padding:clamp(4rem,9vh,7rem) 0 clamp(3rem,6vh,4.5rem)}
body.page-about .service-body-inner{--about-measure:720px;max-width:1120px}

/* Cap the measure on full-width text-only blocks (direct children); the
   .svc-img-section rows manage their own width via the grid, so leave them
   full-bleed within the inner column. */
body.page-about .service-body-inner > h2,
body.page-about .service-body-inner > h3,
body.page-about .service-body-inner > p,
body.page-about .service-body-inner > ul,
body.page-about .service-body-inner > ol,
body.page-about .service-body-inner > blockquote{max-width:var(--about-measure)}

/* Stronger heading hierarchy + rhythm: standalone narrative H2s become
   editorial section heads with generous air above; the H2 that opens a row
   (inside .svc-text-col) keeps tighter spacing so the image aligns. */
body.page-about .service-body-inner > h2{
  font-size:clamp(1.6rem,1.25rem + 1.5vw,2.35rem);line-height:1.18;letter-spacing:-.015em;
  margin:var(--sec-gap) 0 var(--head-gap);max-width:20ch}
body.page-about .service-body-inner > h2:first-child{margin-top:0}
body.page-about .service-body-inner .svc-text-col h2{margin:0 0 var(--head-gap);max-width:none;
  font-size:clamp(1.6rem,1.25rem + 1.5vw,2.35rem);line-height:1.18;letter-spacing:-.015em}

/* "About purepsych" reads as a chapter divider: hairline rule + violet eyebrow feel */
body.page-about .service-body-inner > p,
body.page-about .service-body-inner .svc-text-col p{font-size:1.075rem;line-height:1.72}
body.page-about .service-body-inner > h3{
  font-size:clamp(1.22rem,1.05rem + .55vw,1.55rem);color:var(--violet);
  margin:2.3rem 0 .85rem;max-width:24ch}

/* --- Body-image rows (Rule #7): give them real visual weight. The image col
   is absolutely-positioned (zero intrinsic height) so it never overshoots
   short text; a floor min-height keeps the image substantial when text is
   short. Image matches the text-column height, never taller. --- */
body.page-about .service-body-inner .svc-img-section{
  grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:stretch;margin:var(--sec-gap) 0}
/* desktop: image matches its text column height exactly (Rule #7) — no forced min-height */
body.page-about .service-body-inner .svc-img-col{
  box-shadow:0 36px 70px -34px rgba(31,20,34,.55)}

/* ===== "About purepsych" chapter — distinct tinted panel, set apart from the intro ===== */
body.page-about .about-chapter{
  background:var(--bg-tint);border:1px solid var(--line);border-radius:28px;
  padding:clamp(2.8rem,6vw,5rem) clamp(1.8rem,5vw,4rem);
  margin:clamp(3.5rem,7vw,5.5rem) 0 clamp(1rem,2vw,1.5rem)}
body.page-about .about-chapter > :first-child{margin-top:0}
/* Chapter headings match the intro editorial H2 exactly (chapter content isn't a
   direct child of .service-body-inner, so re-declare identical H2 styling — all H2s look the same). */
body.page-about .about-chapter h2{
  font-size:clamp(1.6rem,1.25rem + 1.5vw,2.35rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--aubergine);margin:clamp(2.6rem,5vw,4rem) 0 1.15rem;max-width:20ch;font-weight:600}
body.page-about .about-chapter h2:first-child{margin-top:0}
body.page-about .about-chapter p,
body.page-about .about-chapter ul,
body.page-about .about-chapter ol{max-width:720px;font-size:1.075rem;line-height:1.72;color:var(--muted)}
body.page-about .about-chapter p strong{color:var(--ink)}
/* "About purepsych" — large, distinct section title (NOT a standard subhead H2).
   "purepsych" renders in the brand wordmark style (pure=200 / psych=700), no icon. */
body.page-about .about-chapter h2.about-chapter-title{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(2.5rem,1.9rem + 3vw,3.6rem);line-height:1.02;letter-spacing:-.025em;
  color:var(--aubergine);max-width:none;margin:0 0 1.8rem}
body.page-about .about-chapter-title .wordmark{font-size:1em;line-height:1;letter-spacing:-.015em;white-space:nowrap}
body.page-about .about-chapter-title .w-pure{font-weight:200}
body.page-about .about-chapter-title .w-psych{font-weight:700;color:var(--violet)}

/* ===== ABOUT — team grid on LIGHT bg (adapts homepage .tm-lg pattern) ===== */
.about-team{padding:clamp(4rem,9vh,7rem) 0;background:var(--bg-tint);border-top:2px solid var(--lavender);position:relative;overflow:hidden}
.about-team-head{text-align:center;max-width:660px;margin:0 auto clamp(2.8rem,5vw,4rem)}
.about-team-head .mk-beat-c{width:clamp(44px,5vw,62px);margin:0 auto 1.15rem;opacity:.9}
.about-team-head h2{font-size:var(--h2);color:var(--aubergine);margin-bottom:.85rem;letter-spacing:-.015em}
.about-team-lede{color:var(--muted);font-size:1.08rem;line-height:1.65;max-width:52ch;margin-inline:auto}
.about-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.6vw,2.2rem);max-width:1140px;margin-inline:auto}
.about-tm{display:flex;flex-direction:column}
.about-tm .tm-photo{display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;margin-bottom:1.3rem;
  box-shadow:0 34px 64px -36px rgba(31,20,34,.5)}
.about-tm a.tm-photo-link{cursor:pointer}
.about-tm .tm-photo img,.about-tm .tm-photo picture{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.about-tm:hover .tm-photo img{transform:scale(1.045)}
.about-tm h3{font-family:var(--disp);font-size:clamp(1.2rem,1rem + .55vw,1.46rem);color:var(--aubergine);font-weight:600;line-height:1.2;margin-bottom:.4rem;letter-spacing:-.01em}
.about-tm h3 .tm-name-link{color:inherit;text-decoration:none;transition:color .25s}
.about-tm h3 .tm-name-link:hover{color:var(--amethyst)}
.about-tm-title{font-family:var(--disp);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-bottom:.7rem;line-height:1.4}
.about-tm-bio{font-size:.98rem;color:var(--muted);line-height:1.6}
@media(max-width:1024px){.about-team-grid{grid-template-columns:repeat(2,1fr);max-width:680px}}
@media(max-width:780px){.about-team-grid{grid-template-columns:1fr;max-width:440px;gap:2.6rem}}
@media(min-width:1025px){.about-team-grid--center{grid-template-columns:none;display:flex;justify-content:center}.about-team-grid--center .about-tm{flex:0 0 258px}}
@media(min-width:781px) and (max-width:1024px){.about-team-grid--center{display:flex;flex-wrap:wrap;justify-content:center}.about-team-grid--center .about-tm{flex:0 0 322px}}

/* ===== CONTACT — info left, white form card right (NO final-cta on contact) ===== */
.contact-intro{padding:clamp(2.2rem,5vh,3.4rem) 0 0;background:var(--bg)}
.contact-main{padding:clamp(3rem,7vh,5rem) 0 clamp(3.6rem,8vh,6rem);background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact-info h2{font-size:var(--h2);color:var(--aubergine);margin-bottom:1.6rem}
.contact-rows{display:flex;flex-direction:column;gap:1.5rem}
.contact-row .lab{display:block;font-family:var(--disp);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-bottom:.35rem}
.contact-row a{font-family:var(--disp);font-weight:600;font-size:1.1rem;color:var(--aubergine);transition:color .25s}
.contact-row a:hover{color:var(--amethyst)}
.contact-row .addr{font-size:1rem;color:var(--muted);line-height:1.55}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.8rem,4vw,2.8rem);box-shadow:0 34px 70px -42px rgba(31,20,34,.42)}
.contact-card .form-h{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--aubergine);margin-bottom:1.1rem}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:2.4rem}}

/* ===== FAQ — "Accordion with Decorative Architecture" (ring-mark indicator) ===== */
.faq-arch{position:relative;padding:clamp(3rem,7vh,5.5rem) 0 clamp(3.6rem,8vh,6rem);
  background:linear-gradient(180deg,#F4EDF4 0%,var(--bg) 60%);overflow:hidden}
.faq-arch-ring{position:absolute;z-index:0;pointer-events:none}
.faq-arch-ring .mk{width:100%;height:auto}
.faq-arch-ring--a{width:min(46vw,520px);left:-14%;top:6%;opacity:.08;animation:bookendbreathe 14s ease-in-out infinite}
.faq-arch-ring--b{width:min(40vw,440px);right:-12%;bottom:2%;opacity:.07;animation:bookendbreathe 17s ease-in-out -3s infinite}
@media(prefers-reduced-motion:reduce){.faq-arch-ring{animation:none}}
@media(max-width:768px){.faq-arch-ring{display:none}}
.faq-list{position:relative;z-index:2;max-width:840px;margin-inline:auto}
.faq-cat{font-family:var(--disp);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);
  font-weight:600;margin:2.4rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.faq-cat:first-child{margin-top:0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:1.1rem;
  box-shadow:0 18px 40px -30px rgba(31,20,34,.4);transition:box-shadow .35s,border-color .35s;overflow:hidden}
.faq-item.open{border-color:var(--amethyst);box-shadow:0 26px 54px -28px rgba(110,74,134,.5)}
.faq-q{width:100%;display:flex;align-items:center;gap:1rem;text-align:left;cursor:pointer;
  background:none;border:none;padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.1rem,2.6vw,1.7rem);font-family:var(--disp)}
.faq-mark{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.faq-mark .mk{width:100%;height:auto;opacity:.55;transition:opacity .35s}
.faq-item.open .faq-mark{transform:rotate(135deg)}
.faq-item.open .faq-mark .mk{opacity:1}
.faq-q-text{font-size:clamp(1.2rem,1.05rem + .5vw,1.42rem);font-weight:600;color:var(--aubergine);line-height:1.3;letter-spacing:-.01em}
.faq-item.open .faq-q-text{color:var(--violet)}
.faq-q:hover .faq-q-text{color:var(--amethyst)}
/* grid-template-rows 0fr -> 1fr height animation */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.7,.3,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a-inner > div,.faq-a-inner p:first-child{padding-top:0}
.faq-a-inner{padding:0 clamp(1.1rem,2.6vw,1.7rem)}
.faq-item.open .faq-a-inner{padding-bottom:clamp(1.2rem,2.6vw,1.6rem)}
.faq-a-inner p{color:var(--muted);font-size:1.06rem;line-height:1.8;margin:0 0 .9rem 3.6rem}
.faq-a-inner p:last-child{margin-bottom:0}
.faq-a-inner em{font-style:italic}
.faq-a-inner a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
@media(max-width:540px){.faq-a-inner p{margin-left:0}}

/* ===== BLOG INDEX ===== */
.blog-index{padding:clamp(3rem,7vh,5.5rem) 0 clamp(3.6rem,8vh,6rem);background:var(--bg)}
.blog-list{max-width:920px;margin-inline:auto;display:flex;flex-direction:column;gap:0}
.blog-card{display:flex;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;padding:clamp(1.8rem,4vw,2.6rem) 0;border-bottom:1px solid var(--line)}
.blog-card:first-child{padding-top:0}
.blog-card-media{flex:0 0 38%;max-width:300px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;display:block;background:var(--bg-tint)}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.blog-card:hover .blog-card-media img{transform:scale(1.05)}
.blog-card-body{flex:1 1 auto;min-width:0}
@media(max-width:600px){
  .blog-card{flex-direction:column;align-items:stretch}
  .blog-card-media{flex:none;max-width:none;width:100%;aspect-ratio:16/9;margin-bottom:1.1rem}
}
.blog-card:last-child{border-bottom:none}
.blog-card-date{font-family:var(--disp);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);font-weight:600}
.blog-card-title{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:var(--aubergine);margin:.6rem 0 .7rem;line-height:1.16;letter-spacing:-.02em}
.blog-card-title a{color:inherit;transition:color .25s}
.blog-card-title a:hover{color:var(--amethyst)}
.blog-card-excerpt{color:var(--muted);font-size:1.05rem;line-height:1.7;margin-bottom:1rem;max-width:60ch}
.blog-card-link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--violet);
  background-image:linear-gradient(var(--amethyst),var(--amethyst));background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s,color .3s}
.blog-card-link:hover{color:var(--amethyst);background-size:100% 1.5px}
.blog-card-link .arr{transition:transform .35s}
.blog-card-link:hover .arr{transform:translateX(4px)}
.blog-empty{text-align:center;color:var(--muted);font-size:1.1rem;padding:3rem 0}
.blog-pagination{margin-top:clamp(2.4rem,4vw,3.4rem)}
.blog-pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;list-style:none;padding:0}
.blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.4rem .8rem;
  border:1px solid var(--line);border-radius:8px;font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--violet);transition:.25s}
.blog-pagination .page-numbers:hover,.blog-pagination .page-numbers.current{background:var(--amethyst);border-color:var(--amethyst);color:#fff}

/* ===== SINGLE POST ===== */
.post-back{display:inline-flex;align-items:center;font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lavender);transition:color .25s;margin-bottom:1rem}
.post-back:hover{color:#fff}
.post-meta{display:flex;align-items:center;gap:.7rem;font-family:var(--disp);font-size:.85rem;letter-spacing:.04em;color:var(--lavender);margin:0 0 1rem}
.post-meta-sep{opacity:.5;font-size:.6rem}
.post-body{padding-top:clamp(2.6rem,6vh,4.4rem)}
.post-prose{max-width:720px}
.post-prose > p:first-of-type::first-letter{font-family:var(--disp);font-weight:700;font-size:3.4em;line-height:.82;float:left;
  color:var(--amethyst);margin:.06em .12em 0 0}
.post-prose p{font-size:1.12rem;line-height:1.85;color:var(--ink)}
.post-prose h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);color:var(--aubergine);margin:2.2rem 0 1rem}
.post-prose h3{font-family:var(--disp);color:var(--violet);margin:1.8rem 0 .8rem;font-weight:600}
/* Blog pull-quote — NO left stripe. Centered italic display + oversized amethyst opening glyph. */
.post-prose blockquote{position:relative;margin:2.8rem auto;padding:1.8rem 0 0;max-width:62ch;border:0;text-align:center;
  font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);color:var(--violet);line-height:1.42}
.post-prose blockquote::before{content:"\201C";position:absolute;top:0;left:50%;transform:translate(-50%,-42%);
  font-style:normal;font-weight:700;font-size:3.6rem;line-height:1;color:var(--amethyst);opacity:.5}
.post-prose blockquote p{margin:0}
.post-foot{max-width:720px;margin:clamp(2.4rem,5vw,3.4rem) auto 0}

/* ===== THANK YOU ===== */
.ty-section{min-height:480px;display:flex;align-items:center;padding:clamp(3.4rem,8vh,6rem) 0;background:var(--bg)}
.ty-card{max-width:560px;margin:0 auto;text-align:center;padding:clamp(2.6rem,5vw,4rem) clamp(1.8rem,4vw,3rem);
  background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 34px 70px -42px rgba(31,20,34,.42)}
.ty-icon{width:56px;height:56px;color:var(--amethyst);margin:0 auto 1.6rem}
.ty-icon svg{width:100%;height:100%}
.ty-card h2{font-family:var(--disp);font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);color:var(--aubergine);margin-bottom:1rem;line-height:1.2}
.ty-card p{font-size:1.05rem;color:var(--muted);line-height:1.7;margin-bottom:.5rem}
.ty-home-link{display:inline-block;margin-top:1.8rem;font-family:var(--disp);font-weight:600;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--violet);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .25s}
.ty-home-link:hover{color:var(--amethyst)}

/* ===== WPForms restyle — EXACT match to the mockup form =====
   WPForms ships the "modern" render (.wpforms-render-modern) which stacks every
   field full-width and adds generous spacing → distinctly taller than the mockup.
   The mockup form is a 2-col grid (Name | Email on one row, Phone + textarea
   full width) inside a compact card. Override the modern theme to reproduce it.
   Scoped to BOTH the Final-CTA card (.contact-form-wrap) and the Contact page
   card (.contact-card). !important + double selectors beat the modern cascade. */

/* Neutralize the modern container's own margins/vars */
.contact-form-wrap .wpforms-container,
.contact-card .wpforms-container{margin:0!important;padding:0!important}
.contact-form-wrap .wpforms-form,
.contact-card .wpforms-form{margin:0!important}

/* 2-column grid: Name | Email share a row; Phone + textarea span full width */
.contact-form-wrap .wpforms-field-container,
.contact-card .wpforms-field-container{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:1rem!important;row-gap:32px!important}
.contact-form-wrap .wpforms-field,
.contact-card .wpforms-field{padding:0!important;margin:0!important;border:none!important;clear:none!important;float:none!important}
.contact-form-wrap .wpforms-field-text,
.contact-form-wrap .wpforms-field-phone,
.contact-form-wrap .wpforms-field-textarea,
.contact-card .wpforms-field-text,
.contact-card .wpforms-field-phone,
.contact-card .wpforms-field-textarea{grid-column:1 / -1!important}
/* honeypot / hidden fields must not occupy a grid cell */
.contact-form-wrap .wpforms-field-hp,
.contact-card .wpforms-field-hp,
.contact-form-wrap .wpforms-field.wpforms-field-hidden,
.contact-card .wpforms-field.wpforms-field-hidden{display:none!important}

/* Labels — Outfit, small, aubergine; hide the required asterisk + sublabels (match mockup) */
.contact-form-wrap .wpforms-field-label,
.contact-card .wpforms-field-label{display:block!important;font-family:var(--disp)!important;font-size:.78rem!important;
  font-weight:600!important;letter-spacing:.03em!important;color:var(--aubergine)!important;margin:0 0 .4rem!important;line-height:1.7!important}
.contact-form-wrap .wpforms-field .wpforms-field-label .wpforms-required-label,
.contact-card .wpforms-field .wpforms-field-label .wpforms-required-label,
.contact-form-wrap .wpforms-required-label,
.contact-card .wpforms-required-label{display:none!important;visibility:hidden!important;font-size:0!important}
.contact-form-wrap .wpforms-field-sublabel,
.contact-form-wrap .wpforms-field-description,
.contact-card .wpforms-field-sublabel,
.contact-card .wpforms-field-description{display:none!important}

/* Inputs + textarea — exact mockup styling */
.contact-form-wrap .wpforms-field input,
.contact-form-wrap .wpforms-field textarea,
.contact-card .wpforms-field input,
.contact-card .wpforms-field textarea{width:100%!important;padding:.85em 1em!important;border:1.5px solid var(--line)!important;
  border-radius:10px!important;background:var(--bg)!important;font-family:var(--sans)!important;font-size:1rem!important;
  color:var(--ink)!important;line-height:1.4!important;box-shadow:none!important;box-sizing:border-box!important;min-height:51.19px!important;margin:0!important}
.contact-form-wrap .wpforms-field textarea,
.contact-card .wpforms-field textarea{resize:vertical!important;min-height:104px!important}
.contact-form-wrap .wpforms-field input::placeholder,
.contact-form-wrap .wpforms-field textarea::placeholder,
.contact-card .wpforms-field input::placeholder,
.contact-card .wpforms-field textarea::placeholder{color:#998c9e!important;opacity:1!important}
.contact-form-wrap .wpforms-field input:focus,
.contact-form-wrap .wpforms-field textarea:focus,
.contact-card .wpforms-field input:focus,
.contact-card .wpforms-field textarea:focus{outline:none!important;border-color:var(--amethyst)!important;background:#fff!important;
  box-shadow:0 0 0 4px rgba(144,96,160,.16)!important}

/* Submit — full-width btn-solid with arrow, matching the mockup button */
.contact-form-wrap .wpforms-submit-container,
.contact-card .wpforms-submit-container{padding:0!important;margin:.3rem 0 0!important}
.contact-form-wrap .wpforms-submit,
.contact-card button[type=submit].wpforms-submit,
.contact-card .wpforms-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5em!important;
  width:100%!important;background:var(--violet)!important;color:#fff!important;border:none!important;
  font-family:var(--disp)!important;font-weight:600!important;font-size:.98rem!important;padding:.92em 1.9em!important;
  border-radius:7px!important;cursor:pointer!important;transition:background .3s!important;text-transform:none!important;letter-spacing:normal!important}
.contact-form-wrap .wpforms-submit::after,
.contact-card .wpforms-submit::after{content:"\2192"!important;font-weight:600!important}
.contact-form-wrap .wpforms-submit:hover,
.contact-card button[type=submit].wpforms-submit:hover,
.contact-card .wpforms-submit:hover{background:var(--aubergine)!important}

/* Exact mockup metrics — high specificity (0,4,0) beats WPForms modern's !important sizing.
   Mockup targets: textarea 104px tall, submit button line-height:normal (~50px),
   ~30px breathing space above the button. */
.contact-form-wrap .wpforms-container .wpforms-field textarea,
.contact-card .wpforms-container .wpforms-field textarea{height:104px!important;min-height:104px!important}
.contact-form-wrap .wpforms-container button[type=submit].wpforms-submit,
.contact-card .wpforms-container button[type=submit].wpforms-submit{line-height:normal!important;min-height:50.8px!important;height:50.8px!important;border:1.5px solid transparent!important}
.contact-form-wrap .wpforms-container .wpforms-submit-container,
.contact-card .wpforms-container .wpforms-submit-container{margin-top:1.9rem!important;padding:0!important}

/* Collapse to single column on narrow viewports */
@media (max-width:540px){
  .contact-form-wrap .wpforms-field-container,
  .contact-card .wpforms-field-container{grid-template-columns:1fr!important}
}

/* ===== INNER-PAGE RESPONSIVE — 1024 / 768 / 480 ===== */
@media(max-width:1024px){
  .service-body-inner .svc-img-section{gap:2rem}
}
@media(max-width:768px){
  .service-body-inner .svc-img-section,
  .service-body-inner .svc-img-section--reverse{grid-template-columns:1fr;gap:1.4rem}
  .service-body-inner .svc-img-section--reverse .svc-text-col,
  .service-body-inner .svc-img-section--reverse .svc-img-col{order:initial}
  /* stacked: image needs an explicit height since it's absolutely positioned */
  .service-body-inner .svc-img-col{min-height:230px}
  /* A PORTRAIT body image loses its subject in the 230px landscape box (cover
     crops a tall source to a center band — on Teen Therapy that band was her
     knees, head gone). Opt those images out with the file's own ratio so mobile
     crops them not at all. Do NOT widen the generic rule — landscape body
     images need the short box. */
  .service-body-inner .svc-img-col--portrait{aspect-ratio:600/900}
  .inner-hero-content h1{max-width:none}
}
@media(max-width:480px){
  .faq-q{gap:.7rem;padding:1rem 1.1rem}
  .faq-mark{width:34px;height:34px}
  .ty-card{padding:2.2rem 1.4rem}
}

/* ===== ABOUT RESPONSIVE — scoped overrides (body.page-about only) ===== */
@media(max-width:768px){
  /* stacked: cap the About body-image height so it reads as a banner, not a
     tower. Overrides the desktop clamp() min-height above (same specificity,
     later in source); pairs with the global stacked min-height. */
  body.page-about .service-body-inner .svc-img-col{min-height:260px}
  body.page-about .service-body-inner .svc-img-section{margin:var(--sec-gap) 0}
  /* let narrative headings use the full single column on small screens */
  body.page-about .service-body-inner > h2{max-width:none}
}
@media(max-width:480px){
  body.page-about .service-body-inner .svc-img-col{min-height:230px}
  body.page-about .about-intro{padding:clamp(2.6rem,7vh,3.4rem) 0 clamp(2rem,4vh,2.6rem)}
}

/* ===== INNER-PAGE TOUCH ACCESSIBILITY — ≥14px on touch (mobile + tablet) ===== */
@media (hover:none) and (pointer:coarse){
  .inner-hero-sub,
  .service-body-inner p,.service-body-inner li,
  .about-tm-title,.about-tm-bio,
  .contact-row .addr,
  .faq-a-inner p,
  .blog-card-excerpt,.blog-card-date,
  .post-meta,.post-back,
  .ty-card p{font-size:max(.88rem,1em)!important}
  .faq-q{min-height:44px}
}

/* ===== LEGAL PAGES: ensure prose never fades (already covered globally, but
   anchor on .service-body-inner used by page.php) ===== */
body.page-privacy-policy .service-body-inner.reveal,
body.page-terms-conditions .service-body-inner.reveal,
body.page-terms-and-conditions .service-body-inner.reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}

/* ==================================================================
   MOBILE LANDSCAPE — safe area, 2026-08-13 (fleet pass)
   viewport-fit=cover lets full-bleed art reach the physical screen edges,
   which is what removes the white stripes beside the notch. The content
   column must then inset itself or copy slides under the notch.
   ================================================================== */
@media (hover:none) and (pointer:coarse) and (max-height:500px){
  .shell,.container,.lp-shell,.wrap{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
}


/* ==========================================================================
   DESKTOP NAV - THE HEADER ROW STAYS ON ONE LINE
   ==========================================================================
   Seven top-level items plus the CTA now share one 1180px container. Left to
   themselves the flex children shrink to min-content, which drops each
   dropdown caret onto a second line and splits "Book a Free Consultation" in
   half. So: nothing in the row wraps, nothing shrinks, and the type tightens
   one step on narrower desktops.

   Measured at the 1180px container: brand 193 + nav 678 + button 240 + two
   16px gaps = 1143, leaving 37px of slack. The row cannot be made to fit
   below a ~1075px viewport without shrinking the type past legibility, so the
   hamburger breakpoint moved 1024 -> 1099 to meet it. Those two numbers must
   stay in step - drawer breakpoint = burger breakpoint. */
@media (min-width: 1100px) {
  header .nav { gap: 1rem; }
  .nav-links { flex-wrap: nowrap; }
  .nav-links > li { flex: 0 0 auto; }
  /* inline-flex makes the caret ::after a flex item, so it can never wrap */
  .nav-links > li > a {
    display: inline-flex; align-items: center; white-space: nowrap;
    letter-spacing: .085em;
    padding: .6rem .55rem;
  }
  .nav-cta .btn { white-space: nowrap; }
}

/* One step tighter from the burger breakpoint up to the width where the
   container stops growing (it reaches its 1180px cap at a 1228px viewport).
   Needs 1026px; the container at 1100px is 1052px. */
@media (min-width: 1100px) and (max-width: 1229px) {
  header .nav { gap: .875rem; }
  .nav-links { gap: 0; }
  .nav-links > li > a { font-size: .74rem; letter-spacing: .05em; padding: .6rem .32rem; }
  .nav-cta .btn { font-size: .9rem; padding: .75rem 1.15rem; }
  .brand .wordmark { font-size: 1.42rem; }
  .brand .mk { width: 46px; height: 42px; }
}

/* Touch tablets in landscape (iPad Air 1180, iPad Pro 11 1194) must keep the
   14px nav floor the touch block above sets - the rule right above would have
   overridden it back down to 11.84px. Buy the width back from tracking and
   padding instead, never from font-size. Needs 1044px at the 1132px container.
   No `display` here, deliberately: it would resurrect elements hidden above. */
@media (hover: none) and (pointer: coarse) and (min-width: 1100px) {
  .nav-links > li > a { font-size: 14px; letter-spacing: .015em; padding: 12px 3px; }
}