/* ============================================================
   TPA - Eric Kiner (Kiner Psychology)
   Extracted from approved mockup eric-kiner-b-7.html (preview /b8)
   "Honest Dusk Hero" — Crimson Pro / Mulish
   ============================================================ */
:root{
  --ink:#22343B;
  --ink-2:#42585F;
  --ink-3:#73868B;
  --white:#FFFFFF;
  --ivory:#F8F6ED;
  --ivory-2:#F2EFE3;
  --tint:#EAF0EE;
  --deep:#17333C;
  --teal:#4A7C8A;
  --sage:#5B8E7A;
  --sage-dk:#48745F;
  --crest:#7BA8B5;
  --line:rgba(34,52,59,.18);
  --line-soft:rgba(34,52,59,.1);
  --serif:'Crimson Pro',Georgia,serif;
  --sans:'Mulish',-apple-system,sans-serif;
  --container:1140px;
  --measure:732px;
  /* Parent .site-footer consumes these (fleet convention 2026-04-23) */
  --footer-bg:#17333C;
  --footer-text:#8FA8AD;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  color:var(--ink-2);background:var(--white);padding-bottom:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:0;line-height:1.12;color:var(--ink);text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300;color:inherit}
p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--teal)}
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}

.kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
}
.kicker::before,.kicker::after{content:"";width:36px;height:1px;background:var(--line)}
.eyebrow{
  display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:20px;
}
.ph{position:relative;display:block}
.ph::after{content:"";position:absolute;inset:12px;border:1px solid rgba(248,246,237,.5);pointer-events:none}
.caption{
  font-size:13px;color:var(--ink-3);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-soft);font-style:italic;font-family:var(--serif);font-size:15px;
}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:19px 42px;color:#fff;text-decoration:none;border-radius:0;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background-color:var(--sage);
  background-image:linear-gradient(var(--deep),var(--deep));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .75s cubic-bezier(.22,1,.36,1);
}
.btn::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(253,252,247,.38);
  pointer-events:none;transition:inset .4s ease,border-color .4s ease;
}
.btn:hover{background-size:100% 100%}
.btn:hover::before{inset:7px;border-color:rgba(253,252,247,.65)}
.btn-quiet{
  display:inline-flex;align-items:baseline;gap:8px;color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600;padding-bottom:4px;
  background-image:
    linear-gradient(var(--teal),var(--teal)),
    linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:left bottom,left bottom;
  background-size:0% 1px,100% 1px;
  transition:color .35s,background-size .6s cubic-bezier(.22,1,.36,1);
}
.btn-quiet:hover{color:var(--teal);background-size:100% 1px,100% 1px}

/* ---------- Masthead ---------- */
.topbar{background:var(--deep)}
.topbar-inner{
  max-width:var(--container);margin:0 auto;padding:0 28px;height:38px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
}
.topbar span,.topbar a{
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:#8FAEB5;text-decoration:none;white-space:nowrap;transition:color .3s;
}
.topbar a:hover{color:#fff}
.tb-left{justify-self:start}
.tb-center{justify-self:center;display:flex;align-items:center;gap:14px}
.tb-center::before,.tb-center::after{
  content:"";width:18px;height:1px;background:rgba(143,174,181,.4);
}
.tb-right{justify-self:end}

.site-nav{
  position:sticky;top:0;z-index:100;background:rgba(253,252,247,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
  transition:box-shadow .45s ease;
}
.site-nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--sage) 52%,rgba(123,168,181,.5) 82%,transparent 100%);
  opacity:.7;pointer-events:none;
}
.site-nav.scrolled{box-shadow:0 14px 38px -20px rgba(23,51,60,.3)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 28px;height:88px;display:flex;align-items:center;gap:34px}

/* brand: client mark + stacked wordmark */
.brand-icon{display:block;height:48px;width:auto;transition:transform .5s ease}
.brand:hover .brand-icon{transform:rotate(-6deg)}

.brand{display:flex;align-items:center;gap:7px;text-decoration:none;flex-shrink:0}
.brand-seal{
  width:46px;height:46px;border:1px solid var(--teal);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:26px;line-height:1;
  color:var(--teal);padding-bottom:4px;
  transition:background .5s ease,color .5s ease,transform .5s ease;
}
.brand:hover .brand-seal{background:var(--teal);color:var(--ivory);transform:rotate(-6deg)}
.brand-stack{display:flex;flex-direction:column;line-height:1}
.brand-stack .nm{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);white-space:nowrap}
.brand-stack .nm em{font-style:italic;color:var(--teal)}
.brand-stack .sub{margin-top:6px;font-size:8.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* nav links: literary tracked serif caps, center-out underline */
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin-left:auto}
.nav-links>li{position:relative}
.nav-links>li>a{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--serif);font-size:13.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:10px 1px;
  transition:color .3s;white-space:nowrap;
}
.nav-links>li>a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--sage);
  transform:scaleX(0);transform-origin:center;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.nav-links>li>a:hover{color:var(--ink)}
.nav-links>li>a:hover::after,
.nav-links>li.dropdown:hover>a::after{transform:scaleX(1)}
.caret{
  width:7px;height:7px;border-right:1px solid var(--crest);border-bottom:1px solid var(--crest);
  transform:rotate(45deg) translateY(-2px);transition:transform .4s ease,border-color .3s;
}
.dropdown:hover .caret{transform:rotate(225deg) translateY(-1px);border-color:var(--teal)}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:calc(100% + 26px);left:50%;min-width:256px;list-style:none;
  background:#FDFCF7;border:1px solid var(--line-soft);border-top:2px solid var(--teal);
  padding:10px 0;opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .32s ease,transform .32s ease,visibility .32s;
  box-shadow:0 22px 44px -22px rgba(23,51,60,.3);z-index:5;
}
.dropdown-menu::before{
  content:"";position:absolute;left:-20px;right:-20px;top:-28px;height:28px;
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dropdown-menu li + li{border-top:1px solid var(--line-soft)}
.dropdown-menu li a{
  position:relative;display:block;padding:12px 28px;border:none;
  font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;
  color:var(--ink-2);text-decoration:none;
  transition:color .28s,padding-left .32s ease,background .28s;
}
.dropdown-menu li a::before{
  content:"–";position:absolute;left:13px;top:12px;color:var(--sage);opacity:0;
  transition:opacity .3s ease,left .32s ease;
}
.dropdown-menu li a:hover{color:var(--ink);padding-left:40px;background:rgba(91,142,122,.05)}
.dropdown-menu li a:hover::before{opacity:1;left:20px}

/* phone: a designed lockup, not a string */
.nav-phone{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;
  text-decoration:none;padding-left:30px;border-left:1px solid var(--line-soft);flex-shrink:0;
}
.nav-phone .lbl{
  font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--teal);transition:color .3s;
}
.nav-phone .num{
  position:relative;font-family:var(--serif);font-size:21px;color:var(--ink);
  transition:color .3s;padding-bottom:3px;
}
.nav-phone .num::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.nav-phone:hover .num{color:var(--teal)}
.nav-phone:hover .num::after{transform:scaleX(1)}
.nav-phone:hover .lbl{color:var(--sage-dk)}

/* cta: letterpress frame + slow deep-teal sweep */
.nav-cta{
  position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;
  display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;
  background:var(--sage);color:#FDFCF7!important;text-decoration:none;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:none!important;border-radius:0;
}
.nav-cta::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(253,252,247,.38);
  z-index:2;pointer-events:none;transition:inset .4s ease,border-color .4s ease;
}
.nav-cta::after{
  content:"";position:absolute;inset:0;background:var(--deep);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s cubic-bezier(.22,1,.36,1);z-index:0;
}
.nav-cta span{position:relative;z-index:3}
.nav-cta .arr{position:relative;z-index:3;font-family:var(--sans);font-size:14px;letter-spacing:0;transition:transform .4s ease}
.nav-cta:hover::after{transform:scaleX(1)}
.nav-cta:hover::before{inset:7px;border-color:rgba(253,252,247,.65)}
.nav-cta:hover .arr{transform:translateX(5px)}

.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

@media(max-width:1240px){
  .nav-inner{gap:22px}
  .nav-links{gap:18px}
  .nav-links>li>a{font-size:12px;letter-spacing:.1em}
  .nav-phone{padding-left:20px}
  .nav-phone .num{font-size:18px}
  .nav-cta{padding:0 18px;height:50px}
}
@media(max-width:1080px){
  .nav-phone{display:none}
  .brand-stack .sub{display:none}
}

/* ---------- Hero: the feature opener ---------- */
.hero{position:relative;overflow:hidden;background:var(--ivory)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 78%}
.hero-veil{
  position:absolute;top:0;left:0;right:0;
  height:calc(100% - clamp(340px,48vh,520px) + 130px);
  background:linear-gradient(180deg,rgba(248,246,237,.96) 0%,rgba(248,246,237,.94) 58%,rgba(248,246,237,0) 100%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:16px;border:1px solid rgba(248,246,237,.45);
  pointer-events:none;z-index:4;
}
.hero-masthead{position:relative;z-index:2;text-align:center;padding:68px 28px 58px;max-width:1020px;margin:0 auto}
.hero-masthead .kicker{margin-bottom:30px}
.hero-masthead h1{
  font-size:clamp(50px,6.9vw,88px);line-height:1.05;margin-bottom:24px;
}
.hero-dek{
  font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.3vw,26px);
  line-height:1.4;color:var(--ink-2);max-width:24em;margin:0 auto 34px;
}
.hero-byline{
  display:flex;align-items:center;justify-content:center;gap:22px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:540px;margin:0 auto 38px;padding:13px 0;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.hero-byline b{color:var(--ink);font-weight:700}
.hero-byline > span:first-of-type{color:var(--sage)}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap}
.hero-band{height:clamp(340px,48vh,520px)}

/* ---------- The article: Pain -> Story -> Bridge, one grammar, three grounds ---------- */
.chapter-head{text-align:center;max-width:840px;margin:0 auto 44px}
.chapter-head.chapter-next{margin-top:64px}
.chapter-head .kicker{margin-bottom:28px}
.chapter-head h2{font-size:clamp(36px,4.2vw,54px);line-height:1.1}
.chapter-lead{
  font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.2vw,25px);
  color:var(--ink-2);max-width:30em;margin:20px auto 0;line-height:1.45;
}
.pain{background:var(--white);padding:0 0 64px}
.pain>.container{display:flow-root}
.prologue{
  position:relative;max-width:760px;margin:-72px auto 0;
  background:var(--ivory);border:1px solid var(--line-soft);
  padding:52px 60px 48px;
  box-shadow:0 30px 60px -44px rgba(23,51,60,.4);
}
.prologue::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--sage) 32%,var(--teal) 50%,var(--sage) 68%,transparent 96%);
  opacity:.75;
}
.prologue::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(74,124,138,.22);
  pointer-events:none;
}
.prologue h2{font-size:clamp(30px,3.2vw,40px);line-height:1.15;text-align:center;margin-bottom:14px}
.prologue .chapter-lead{font-size:clamp(19px,2vw,22px);text-align:center;margin:0 auto 30px}
.prologue>p{font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink-2);margin-bottom:14px}
.prologue .chapter-lead{font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.prologue-close{
  text-align:center;margin-top:28px;padding-top:26px;border-top:1px solid var(--line);
}
.prologue-close p{font-family:var(--serif);font-size:clamp(21px,2.2vw,25px);line-height:1.4;color:var(--ink);margin:0}
.chapter-close{
  text-align:center;max-width:760px;margin:48px auto 0;padding-top:34px;
  border-top:1px solid var(--line);
}
.chapter-close p{font-family:var(--serif);font-size:clamp(23px,2.5vw,29px);line-height:1.4;color:var(--ink);margin:0}

/* ---------- Billy: the feature chapter ---------- */
.story-text{max-width:var(--measure);margin:0 auto}
.story-text p{font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink-2);margin-bottom:14px}
.story-text strong{color:var(--ink);font-weight:500}
.bridge .story-text strong{color:#fff}
.story-text.drop>p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:400;font-size:4.05em;line-height:.74;
  float:left;padding:1px 16px 0 0;color:var(--teal);
}
.interlude{position:relative;height:clamp(260px,38vh,400px);overflow:hidden;background:var(--deep)}
.interlude .ph{height:100%}
.interlude img{width:100%;height:100%;object-fit:cover;object-position:center 69%}
.story-pull{
  text-align:center;max-width:820px;margin:54px auto 0;padding:36px 0 0;
  border-top:1px solid var(--line);
}
.story-pull p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(34px,4vw,50px);line-height:1.15;color:var(--ink);
}
.story-pull p b{color:var(--teal);font-weight:300;font-style:italic}

/* ---------- Bridge: the resolution, on the one dark spread ---------- */
.bridge{background:var(--deep);color:#BFD3D5;padding:92px 0 0;position:relative;z-index:5}
.bridge .kicker{color:var(--crest)}
.bridge .kicker::before,.bridge .kicker::after{background:rgba(255,255,255,.25)}
.bridge .chapter-head h2{color:#fff}
.bridge .story-text p{color:#AFC6C9}
.bridge .story-text.drop>p:first-of-type::first-letter{color:var(--crest)}
.bridge-call{
  position:relative;max-width:760px;margin:48px auto 0;transform:translateY(88px);
  padding:58px 64px 56px;text-align:center;
  background:var(--ivory);border:1px solid var(--line-soft);
  box-shadow:0 40px 80px -48px rgba(11,26,31,.55);
}
.bridge-call::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--sage) 32%,var(--teal) 50%,var(--sage) 68%,transparent 96%);
  opacity:.75;
}
.bridge-call::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(74,124,138,.22);
  pointer-events:none;
}
.bridge-call .kicker{color:var(--teal);font-size:16px}
.bridge-call .kicker::before,.bridge-call .kicker::after{background:var(--line)}
.bridge-call h3{
  font-weight:300;font-size:clamp(30px,3.4vw,42px);
  line-height:1.22;color:var(--ink);margin:24px auto 20px;max-width:18em;
}
.bridge-call p{font-family:var(--serif);font-size:22px;color:var(--ink-2);margin:0 auto 13px;max-width:28em}
.bridge-call p:last-of-type{margin-bottom:38px}
.bridge-call strong{color:var(--ink);font-weight:500}
.bridge-call .btn{position:relative;z-index:2}

/* ---------- Bio: the profile ---------- */
.bio{background:var(--white);padding:204px 0 114px}
.bio-media{grid-column:1 / span 5;text-align:center}
.bio-portrait{
  position:relative;display:inline-block;background:var(--ivory-2);
  border:1px solid var(--line-soft);
  padding:20px 20px 0;margin:0;text-align:left;
}
.bio-portrait img{display:block;width:100%;max-width:378px;height:auto}
.bio-portrait figcaption{padding:18px 8px 28px;text-align:center}
.bio-portrait figcaption b{
  display:block;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:3px;
}
.bio-portrait figcaption span{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-3)}
.bio-about{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-top:16px;padding:13px 30px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);text-decoration:none;border:1px solid var(--teal);
  background:linear-gradient(var(--teal),var(--teal)) left center/0% 100% no-repeat;
  transition:color .35s,background-size .75s cubic-bezier(.22,1,.36,1);
}
.bio-about::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(74,124,138,.3);
  pointer-events:none;transition:inset .4s ease,border-color .4s ease;
}
.bio-about:hover{color:var(--ivory);background-size:100% 100%}
.bio-about:hover::before{inset:7px;border-color:rgba(253,252,247,.65)}
.bio-copy{grid-column:7 / span 6;align-self:center}
.bio h2{font-size:clamp(34px,3.8vw,48px);margin-bottom:26px;line-height:1.1}
.bio-lead{font-family:var(--serif);font-size:19px;line-height:1.72;max-width:32em;margin-bottom:20px}
.bio p{font-family:var(--serif);font-size:19px;line-height:1.72;max-width:32em;margin-bottom:20px}

/* ---------- Services: two feature spreads ---------- */
.services{background:var(--ivory);padding:76px 0 88px}
.services-head-wrap{grid-column:1 / -1}
.services-head{display:flex;align-items:center;gap:30px;margin:0 0 50px 5.33%}
.services-head::after{content:"";flex:1;height:1px;background:var(--line)}
.services-head h2{font-size:clamp(32px,3.3vw,44px);font-weight:400;line-height:1.1;white-space:nowrap}
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.svc-card{
  position:relative;display:block;background:var(--white);
  border:1px solid var(--teal);text-decoration:none;
}
.svc-card::after{
  content:"";position:absolute;inset:6px;border:1px solid rgba(74,124,138,.25);
  pointer-events:none;transition:inset .45s ease,border-color .45s ease;z-index:2;
}
.svc-card:hover::after{inset:11px;border-color:rgba(74,124,138,.55)}
.svc-card .img{display:block;overflow:hidden}
.svc-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .65s ease}
.svc-card:hover img{transform:scale(1.04)}
.svc-veil{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;
  background:rgba(242,239,227,.92);padding:40px 44px 64px;
  opacity:0;transition:opacity .45s ease;
}
.svc-veil p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink);margin:0}
.svc-card:hover .svc-veil{opacity:1}
.svc-plaque{
  position:absolute;left:30px;bottom:-24px;z-index:3;
  background:var(--ivory-2);border:1px solid var(--line-soft);
  padding:14px 30px 13px;
}
.svc-plaque h3{font-size:clamp(22px,2vw,27px);font-weight:300;line-height:1.1;color:var(--ink);transition:color .3s}
.svc-card:hover .svc-plaque h3{color:var(--teal)}

/* ---------- Final CTA ---------- */
.cta{background:var(--tint);padding:64px 0}
.cta-copy{
  grid-column:1 / 7;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--ivory-2);border:1px solid var(--line-soft);
  border-top:2px solid var(--teal);
  /* mockup layering: copy card extends above AND below the form card —
     form insets 42px from the top; height = row + 43px extends the cream
     panel below the form. The 43px is load-bearing: copy bottom-padding
     (87) minus form bottom-padding (44) = 43, which lands "Call Me Now"
     and the WPForms submit on exactly the same line. */
  margin-right:-28px;padding:42px 56px 87px;
}
.cta h2{font-size:clamp(34px,3.8vw,48px);line-height:1.12;margin-bottom:18px}
.cta-copy .eyebrow{margin-bottom:16px}
.cta-copy>p{font-family:var(--serif);font-size:19px;max-width:26em;margin-bottom:12px}
.cta-copy>p:last-of-type{margin-bottom:35px}
.cta-line{padding:18px 0;border-top:1px solid var(--line);max-width:420px}
.cta-line:last-of-type{border-bottom:1px solid var(--line);margin-bottom:16px}
.cta-line .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.cta-line a{
  font-family:var(--serif);font-size:22px;color:var(--ink);text-decoration:none;padding-bottom:2px;
  background:linear-gradient(var(--teal),var(--teal)) left bottom/0% 1px no-repeat;
  transition:color .3s,background-size .55s cubic-bezier(.22,1,.36,1);
}
.cta-line a:hover{color:var(--teal);background-size:100% 1px}
.cta-copy .btn{width:100%;max-width:420px;margin-top:auto}
.cta-line{width:100%}
.form-card{
  grid-column:7 / span 6;background:#fff;border:1px solid var(--line-soft);
  border-top:2px solid var(--teal);padding:46px 48px 44px;margin-top:42px;
  box-shadow:0 34px 70px -46px rgba(23,51,60,.35);align-self:start;
}
.form-card h3{
  font-size:25px;font-weight:400;margin-bottom:26px;
  padding-bottom:20px;border-bottom:1px solid var(--line-soft);
}
.form-row{margin-bottom:20px}
.form-row label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.form-row input,.form-row textarea{
  width:100%;padding:13px 15px;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--ivory);border:1px solid var(--line-soft);border-radius:0;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.form-row input:hover,.form-row textarea:hover{border-color:var(--line)}
.form-row input:focus,.form-row textarea:focus{
  outline:none;border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 3px rgba(74,124,138,.09);
}
.form-row textarea{min-height:110px;resize:vertical}
.form-submit{
  position:relative;width:100%;padding:19px;border:none;border-radius:0;cursor:pointer;
  line-height:1.7;color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background-color:var(--sage);
  background-image:linear-gradient(var(--deep),var(--deep));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .75s cubic-bezier(.22,1,.36,1);
}
.form-submit::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(253,252,247,.38);
  pointer-events:none;transition:inset .4s ease,border-color .4s ease;
}
.form-submit:hover{background-size:100% 100%}
.form-submit:hover::before{inset:7px;border-color:rgba(253,252,247,.65)}

/* ---------- Footer ---------- */
.footer{background:var(--deep);color:#8FA8AD;padding:54px 0 26px;position:relative}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(270deg,var(--teal) 0%,var(--sage) 52%,rgba(123,168,181,.5) 82%,transparent 100%);
  opacity:.7;
}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:22px;color:#E4EDEC;text-decoration:none}
.footer-brand em{font-style:italic;color:var(--crest)}
.footer-seal{
  width:42px;height:42px;border:1px solid rgba(123,168,181,.55);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-style:italic;font-size:24px;line-height:1;color:var(--crest);padding-bottom:4px;
  transition:background .5s ease,color .5s ease,border-color .5s ease,transform .5s ease;
}
.footer-brand:hover .footer-seal{
  background:var(--teal);border-color:var(--teal);color:var(--ivory);transform:rotate(-6deg);
}
.footer-brand-stack{display:flex;flex-direction:column;line-height:1.1}
.footer-icon{display:block;height:46px;width:auto;flex-shrink:0;transition:transform .5s ease}
.footer-brand:hover .footer-icon{transform:rotate(-6deg)}
.footer-brand .sub{
  display:block;font-family:var(--sans);font-size:9px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:#5E777D;margin-top:7px;
}
.footer-mid{display:flex;align-items:center;gap:14px}
.footer-mid .soc{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid rgba(143,168,173,.3);
  text-decoration:none;transition:border-color .3s,background .3s;
}
.footer-mid .soc::after{
  content:"";position:absolute;inset:3px;border:1px solid rgba(123,168,181,.16);
  pointer-events:none;transition:inset .4s ease,border-color .4s ease;
}
.footer-mid .soc:hover{border-color:var(--crest);background:rgba(123,168,181,.1)}
.footer-mid .soc:hover::after{inset:6px;border-color:rgba(167,192,197,.65)}
.footer-mid svg{width:15px;height:15px;fill:#A7C0C5;transition:fill .3s}
.footer-mid .soc:hover svg{fill:#E4EDEC}
.footer-mid .soc.pt{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#A7C0C5;transition:border-color .3s,background .3s,color .3s;
}
.footer-mid .soc.pt:hover{color:#E4EDEC}
.footer-legal{display:flex;gap:24px;font-size:13px}
.footer-legal a{
  color:#8FA8AD;text-decoration:none;padding-bottom:3px;
  background:linear-gradient(var(--crest),var(--crest)) left bottom/0% 1px no-repeat;
  transition:color .3s,background-size .5s cubic-bezier(.22,1,.36,1);
}
.footer-legal a:hover{color:#E4EDEC;background-size:100% 1px}
.footer-copy{text-align:center;font-size:12.5px;color:#5E777D;margin-top:30px;padding-top:22px;border-top:1px solid rgba(143,168,173,.14)}

/* ---------- Reveal (two, gentle) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease}
.reveal.visible{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .pain,.story,.bridge,.bio,.services,.cta{padding-top:80px;padding-bottom:80px}
  .bridge{padding-bottom:0}
  .bio{padding-top:188px}
  .hero-masthead{padding:64px 28px 52px}
  .form-card{padding:36px 30px}
}
@media(max-width:768px){
  .tb-center{display:none}
  .topbar-inner{grid-template-columns:auto 1fr}
  .tb-right{grid-column:2}
  .nav-inner{height:74px}
  .brand-icon{height:40px}
  .brand-stack .nm{font-size:21px}
  .nav-links{
    position:fixed;top:112px;right:0;bottom:0;width:min(330px,86vw);
    background:#FDFCF7;flex-direction:column;align-items:flex-start;gap:2px;
    padding:30px 30px 40px;border-left:1px solid var(--line-soft);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);overflow-y:auto;margin-left:0;
  }
  .nav-links.open{transform:translateX(0)}
  .site-nav.scrolled .nav-links{top:74px}
  .nav-links>li{width:100%}
  .nav-links>li>a{display:flex;justify-content:space-between;width:100%;padding:14px 0;font-size:14px;letter-spacing:.16em;border-bottom:1px solid var(--line-soft)}
  .nav-links>li>a::after{display:none}
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;padding:4px 0 10px 6px;display:none;min-width:0;background:transparent}
  .dropdown-menu::before{display:none}
  .dropdown-menu li + li{border-top:none}
  .dropdown.open .dropdown-menu{display:block}
  .dropdown.open .caret{transform:rotate(225deg) translateY(-1px)}
  .hamburger{display:block}
  .nav-phone,.nav-cta{display:none}
  .nav-links .mob-phone{
    display:flex;width:100%;margin-top:22px;background:var(--sage);color:#FDFCF7!important;
    justify-content:center;padding:16px 0;font-size:12px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;border:none;position:relative;
  }
  .nav-links .mob-phone::before{content:"";position:absolute;inset:4px;border:1px solid rgba(253,252,247,.38)}
  .hero-masthead{padding:56px 24px 44px}
  .hero-byline{gap:12px;flex-wrap:wrap;font-size:11px}
  .hero-band{height:300px}
  .grid{grid-template-columns:1fr;row-gap:40px}
  .bio-media,.bio-copy,.cta-copy,.form-card{grid-column:1 / -1}
  .chapter-head{margin-bottom:42px}
  .prologue{padding:40px 30px 38px;margin-top:-56px}
  .form-card{margin-top:0}
  .cta-copy{margin-right:0;padding:36px 28px 44px}
  .bio-media{text-align:center}
  .bio-portrait{max-width:380px}
  .svc-cards{grid-template-columns:1fr;row-gap:62px}
  .services-head{margin-left:0}
  .pain,.story,.bridge,.bio,.services,.cta{padding-top:68px;padding-bottom:68px}
  .bridge{padding-bottom:0}
  .bio{padding-top:148px}
  .bridge-call{margin:36px auto 0;transform:translateY(62px);padding:38px 24px 38px}
}
@media(max-width:480px){
  body{font-size:16px}
  .tb-left{display:none}
  .topbar-inner{display:flex;justify-content:center}
  .hero-masthead h1{font-size:42px}
  .hero-ctas{gap:20px}
  .hero-ctas .btn{width:100%}
  .hero::after{inset:10px}
  .interlude{height:320px}
  .form-card{padding:30px 22px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-brand-stack{align-items:center}
  .cta-line a{font-size:21px}
  .svc-plaque{left:16px;bottom:-20px;padding:11px 22px 10px}
  .svc-plaque h3{font-size:20px}
  .story-text p{font-size:18px}
}

/* ============================================================
   forceVisible safety net (Critical Lesson #9)
   ============================================================ */
@keyframes forceVisible {
  to { opacity: 1; transform: none; }
}

/* GROUP 1 — above-fold: hero content must be visible immediately.
   This design's hero carries no reveal classes (visible by default);
   .inner-hero-content covers future inner-page templates. 0s delay so
   CSS fires before deferred JS runs. */
.inner-hero-content {
  animation: forceVisible 0s 0s forwards;
}

/* GROUP 2 — below-fold .reveal elements (bio figure, svc-cards) rely on
   scroll-triggered .visible. NO forceVisible here — the 8s setTimeout
   fallback in client.js handles IO misses without killing the scroll
   transition or costing CLS points. */

/* ========== MOBILE RESPONSIVE INVARIANTS — DO NOT REMOVE ========== */
/* Without these, the brand text pushes the hamburger off-screen and submenu
   items overflow on portrait phones. 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-stack, .brand-stack .nm, .brand-stack .sub { white-space: normal; min-width: 0; }

  /* Credentials stay visible in hamburger mode (hidden only 769-1080px
     where the full nav links need the room) */
  .brand-stack .sub { display: block; }

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

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

/* ========== MOBILE DRAWER SUBMENU — DUAL-SELECTOR REQUIRED ==========
   The mobile drawer's submenu <ul> can be emitted with either class
   depending on which walker the child theme's header.php uses for the
   mobile wp_nav_menu() call:
     - WordPress default walker → <ul class="sub-menu">
     - TPA_Nav_Walker            → <ul class="dropdown-menu">
   Walker choice has flipped site-by-site historically. CSS that targets
   only one class breaks the other. ALWAYS target both, with !important
   on list-style: none (UA stylesheet wins otherwise). Validator Check 17
   enforces this. This theme's drawer container is .nav-links (mockup
   pattern); the .mobile-nav-* variants are kept defensively. */

.nav-links .sub-menu,
.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;
}
.nav-links .sub-menu li,
.nav-links .dropdown-menu li,
.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;
}
@media (max-width: 768px) {
  /* .sub-menu mirror of the mockup's .dropdown-menu drawer behavior */
  .nav-links .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; padding: 4px 0 10px 6px;
    display: none; min-width: 0; background: transparent;
  }
  .nav-links .dropdown.open .sub-menu,
  .nav-links .menu-item-has-children.open .sub-menu,
  .nav-links .menu-item-has-children.open .dropdown-menu { display: block; }
  .nav-links .sub-menu li a {
    position: relative; display: block; padding: 12px 0;
    font-family: var(--serif); font-size: 17px; letter-spacing: 0; text-transform: none;
    color: var(--ink-2); text-decoration: none;
  }
}
.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(--teal);
}
.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 rgba(74,124,138,.5);
}
.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
   down when the submenu is expanded */
.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(--ink-3);
  line-height: 0;
}
.mobile-nav-toggle svg { transition: transform 0.25s ease; }
.mobile-nav-toggle.open svg { transform: rotate(180deg); }

/* ========== TOUCH-DEVICE ACCESSIBILITY — DO NOT REMOVE ==========
   Required for the viewport-sweep gate to pass on first run. Touch devices
   only (mobile + tablet): ≥14px text and ≥44×44 tap targets. Selectors
   adapted to this mockup's classes. Validator Check 18 enforces this block.
   NOTE: must come AFTER the mockup's own (hover:none) block — same
   specificity, later wins. */

@media (hover: none) and (pointer: coarse) {
  /* Topbar location/sessions/email lines ship at 10px — bump to 14px */
  .topbar span, .topbar a {
    font-size: 14px !important;
    letter-spacing: .14em;
  }
  .topbar-inner { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .topbar a { display: inline-block; min-height: 32px; padding: 6px 0; box-sizing: border-box; }

  /* Brand credentials sub-line ships at 8.5px */
  .brand-stack .sub {
    font-size: 12px !important;
    letter-spacing: .18em;
    line-height: 1.3 !important;
  }
  .brand { min-height: 44px; box-sizing: border-box; }

  /* Primary nav links — ≥44×44 tap target */
  .nav-links > li > a {
    font-size: 14px !important;
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    align-items: center;
  }

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

  /* Nav phone lockup label ships at 9px */
  .nav-phone .lbl { font-size: 14px !important; letter-spacing: .18em; }
  .nav-phone { min-height: 44px; box-sizing: border-box; }

  /* CTA buttons — nav, hero, bridge, final CTA */
  .nav-cta,
  .btn,
  .bio-about {
    font-size: 14px !important;
    min-height: 44px;
    box-sizing: border-box;
  }
  .btn-quiet {
    font-size: 15px !important;
    min-height: 44px;
    align-items: center;
    box-sizing: border-box;
  }

  /* Kickers, eyebrows, labels (mockup's own touch block set 12.5px —
     floor is 14px) */
  .eyebrow, .kicker, .cta-line .lbl, .form-row label { font-size: 14px !important; }
  .hero-byline { font-size: 14px !important; }
  .caption { font-size: 15px; }

  /* Bio portrait credentials line */
  .bio-portrait figcaption b { font-size: 14px !important; }
  .bio-portrait figcaption span { font-size: 15px !important; line-height: 1.4 !important; }

  /* Footer brand sub-line ships at 9px, copyright at 12.5px */
  .footer-brand .sub { font-size: 12px !important; letter-spacing: .18em; }
  .footer-copy { font-size: 14px !important; }
  .footer-mid .soc.pt { font-size: 14px !important; }

  /* Footer legal links (Privacy Policy, Terms & Conditions) */
  .footer-legal { font-size: 14px !important; }
  .footer-legal a {
    min-height: 44px;
    padding: 12px 0;
    display: inline-block;
    box-sizing: border-box;
  }

  /* Footer brand + social squares (38px -> 44px tap floor) */
  .footer-brand { min-height: 44px; }
  .footer-mid .soc {
    width: 44px !important;
    height: 44px !important;
  }

  /* Phone + email click-to-call/mail tap targets — plain text links only.
     EXCLUDES button-style tel links (.btn, .btn-quiet, .mob-phone,
     .nav-phone, .nav-cta) whose own padding/height already satisfies 44px;
     a bare padding override would wipe their horizontal padding
     (memory: touch-device tel: override). */
  a[href^="tel:"]:not(.btn):not(.btn-quiet):not(.mob-phone):not(.nav-phone):not(.nav-cta),
  a[href^="mailto:"]:not(.btn):not(.tb-right) {
    min-height: 44px;
    padding: 12px 0;
    display: inline-block;
    box-sizing: border-box;
  }
  .cta-line { padding: 6px 0; }

  /* WPForms submit button ≥44px tall on touch. Double selector + !important
     to beat the 604-rule modern theme cascade. */
  .wpforms-form .wpforms-submit,
  .form-card .wpforms-form .wpforms-submit,
  button[type="submit"].wpforms-submit,
  .form-submit {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }

  /* WPForms field labels default ~13px — bump to 14px on touch */
  .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 — flex children can collapse explicit width */
  .hamburger,
  .burger,
  .mobile-toggle,
  .mobile-menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }

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

  /* Trust badges (Psychology Today) */
  .footer-badge,
  .footer-badges a,
  .trust-badge {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* No fixed-background parallax on touch — none in this design, kept as
     a guard for future templates */
  [class*="parallax"] {
    background-attachment: scroll !important;
  }
}

/* ========== PORTRAIT PHONE: KEEP CREDENTIALS VISIBLE ==========
   At iPhone widths (≤520px), DO NOT `display: none` the credentials line.
   Eric's licensure (Psy.D.) is meaningful credibility signal. Shrink and
   tighten — never hide. */
@media (max-width: 520px) {
  .brand-stack .sub {
    display: block;
    font-size: 8px;
    letter-spacing: .24em;
    margin-top: 4px;
    line-height: 1.15;
  }
  .brand-stack .nm { font-size: 19px; }
}

/* ========== SHORT LANDSCAPE PHONES: HERO MUST CLEAR THE NAV ==========
   Hero content here is in normal flow (no absolute overlay), so the sticky
   nav can't overlap it — but trim the oversized masthead padding and band
   so the H1 is on screen on a 320px-tall viewport. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-masthead { padding: 28px 28px 24px; }
  .hero-masthead .kicker { margin-bottom: 14px; }
  .hero-masthead h1 { margin-bottom: 12px; }
  .hero-dek { margin-bottom: 18px; }
  .hero-byline { margin-bottom: 20px; }
  .hero-band { height: 180px; }
}

/* ========== LEGAL PAGES: NEVER FADE IN ==========
   Terms & Conditions and Privacy Policy bodies are 30–50KB walls of text.
   Wrapping them in .reveal/.fade-in makes the IntersectionObserver threshold
   unreachable (15% of a 10,000px element never enters the viewport), so
   .visible never gets added and the page stays at opacity:0. Force visible. */
body.page-terms-and-conditions .reveal,
body.page-terms-and-conditions .reveal-left,
body.page-terms-and-conditions .reveal-right,
body.page-terms-and-conditions .reveal-scale,
body.page-terms-and-conditions .fade-in,
body.page-terms-conditions .reveal,
body.page-terms-conditions .reveal-left,
body.page-terms-conditions .reveal-right,
body.page-terms-conditions .reveal-scale,
body.page-terms-conditions .fade-in,
body.page-privacy-policy .reveal,
body.page-privacy-policy .reveal-left,
body.page-privacy-policy .reveal-right,
body.page-privacy-policy .reveal-scale,
body.page-privacy-policy .fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   WORDPRESS ADAPTATIONS — nav walker, mobile phone CTA
   ============================================================ */
/* Parent-theme variable aliases (page-thank-you.php + parent parts) */
:root{
  --primary:var(--teal);
  --primary-dark:var(--deep);
  --accent:var(--sage);
  --bg:var(--ivory);
  --text:var(--ink-2);
  --text-muted:var(--ink-3);
  --font-heading:var(--serif);
  --font-h:var(--serif);
  --font-body:var(--sans);
  --font-b:var(--sans);
}

/* Dropdown carets: a .caret span is injected into Services/Specialties
   anchors via walker_nav_menu_start_el (functions.php) — identical markup
   to the mockup, so the mockup's .caret rules apply untouched. Do NOT add
   an ::after caret here: .nav-links>li>a::after is the absolute-positioned
   hover underline and any second ::after definition collides with it. */

/* Drawer phone CTA — hidden on desktop, shown inside the 768 drawer */
.nav-links .mob-phone{display:none}
.nav-links .mob-phone-li{width:100%;border-bottom:none}
@media(max-width:768px){
  .nav-links .mob-phone-li > a.mob-phone{border-bottom:none}
}

/* ============================================================
   INNER PAGE GRAMMAR — hero band + service-body content
   ============================================================ */
.inner-hero{
  position:relative;overflow:hidden;background:var(--ivory);
  min-height:clamp(320px,38vh,440px);
  display:flex;align-items:center;justify-content:center;
  padding:64px 28px;
}
.inner-hero-bg,
.inner-hero picture{position:absolute;inset:0;width:100%;height:100%}
.inner-hero-bg{object-fit:cover;object-position:center 40%}
/* Soft top scrim only — eases the nav seam, leaves the photo honest */
.inner-hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(248,246,237,.5) 0%,rgba(248,246,237,.08) 45%,rgba(248,246,237,0) 100%);
  pointer-events:none;
}
.inner-hero::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(248,246,237,.5);
  pointer-events:none;z-index:4;
}
.inner-hero--plain{background:var(--ivory)}
.inner-hero--plain::after{border-color:rgba(34,52,59,.12)}
/* Title plaque — same paper-object grammar as the prologue/invitation cards */
.inner-hero-content{
  position:relative;z-index:2;text-align:center;
  background:rgba(248,246,237,.96);border:1px solid var(--line-soft);
  padding:38px 64px 36px;max-width:760px;
  box-shadow:0 30px 60px -44px rgba(23,51,60,.45);
}
.inner-hero-content::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--sage) 32%,var(--teal) 50%,var(--sage) 68%,transparent 96%);
  opacity:.75;
}
.inner-hero-content::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(74,124,138,.22);
  pointer-events:none;
}
.inner-hero--plain .inner-hero-content{
  background:transparent;border:none;box-shadow:none;padding:38px 28px 36px;
}
.inner-hero--plain .inner-hero-content::before,
.inner-hero--plain .inner-hero-content::after{display:none}
.inner-hero-content .kicker{margin-bottom:20px}
.inner-hero-content h1{font-size:clamp(36px,4.6vw,56px);line-height:1.08}

.inner-page{background:var(--white);padding:72px 0 84px}
.service-body{padding:0 28px}

/* Legal pages (Privacy Policy, Terms & Conditions) reuse .service-body but
   are structured as document sections — headings, paragraphs, and lists —
   not the narrative story column .service-body > p expects. Without this,
   paragraphs render in a narrow centered column while sibling lists/headings
   stay full-width and flush left, producing a broken two-column look. */
.legal-body{max-width:860px;margin:0 auto}
/* .service-body.legal-body (both classes, higher specificity than the
   .service-body > p narrative rule below) — a same-specificity .legal-body > p
   loses ties to source order and .service-body > p's max-width:var(--measure);
   margin:0 auto was still centering paragraphs in a narrower column, which is
   what made list bullets look like they hung outside the paragraph edge. */
.service-body.legal-body > p{
  font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--ink-2);
  max-width:none;margin:0 0 16px;
}
.legal-body h1{font-size:clamp(28px,3.4vw,38px);margin:0 0 22px}
.legal-body h2{font-size:clamp(22px,2.4vw,28px);margin:40px 0 16px}
.legal-body h3{font-size:clamp(19px,2vw,22px);margin:32px 0 14px}
.legal-body h4{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--ink);margin:24px 0 10px}
/* Native list markers (list-style:disc/decimal, even with position:inside)
   are positioned by the browser's font metrics and can render to the left
   of the li's own content edge, which is what made bullets look like they
   sat outside the paragraph's left margin. Building the marker manually
   with ::before and position:absolute pins it to an exact, guaranteed
   offset that lines up with .legal-body > p every time. */
.legal-body ul,.legal-body ol{list-style:none;margin:0 0 20px;padding:0}
.legal-body li{position:relative;padding-left:1.1em;margin-bottom:8px;line-height:1.7;font-size:16px;color:var(--ink-2)}
.legal-body ul>li::before{content:"\2022";position:absolute;left:0;top:0}
.legal-body ol{counter-reset:legal-ol}
.legal-body ol>li{counter-increment:legal-ol}
.legal-body ol>li::before{content:counter(legal-ol)".";position:absolute;left:0;top:0}
.legal-body li ul,.legal-body li ol{margin:8px 0 0 1.1em}
.legal-body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}

/* Lead H2 — the docx subheadline directly under the page title */
.service-body .inner-lead{max-width:var(--measure);margin:0 auto 14px;text-align:center}
.service-body .inner-lead h2{
  font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-weight:300;
}
.service-body .inner-lead .attr{
  display:block;margin-top:10px;font-family:var(--serif);font-style:italic;
  font-size:17px;color:var(--ink-3);
}

/* Standalone paragraphs — homepage story-text grammar */
.service-body > p,
.service-body .svc-intro p{
  font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink-2);
  max-width:var(--measure);margin:0 auto 14px;
}
.service-body strong{color:var(--ink);font-weight:500}
.service-body .svc-intro{margin-bottom:20px}

/* Image-beside-text rows — H2 lives INSIDE .svc-text-col (Rule #7) */
.svc-img-section{
  display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:stretch;
  max-width:860px;margin:46px auto;
}
.svc-img-section--reverse .svc-text-col{order:2}
.svc-img-section--reverse .svc-img-col{order:1}
.svc-text-col h2{
  font-size:clamp(26px,2.8vw,36px);line-height:1.18;margin-bottom:18px;
}
.svc-text-col p{
  font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink-2);
  margin-bottom:14px;
}
/* The image NEVER drives the row height: absolutely positioned inside the
   column, it covers exactly the text column's span — subheadline top to the
   last line of copy — regardless of the source image's aspect ratio. */
.svc-img-col{position:relative;min-height:0}
.svc-img-col picture,
.svc-img-col img{position:absolute;inset:0;display:block;width:100%;height:100%}
.svc-img-col img{object-fit:cover;border:1px solid var(--line-soft)}
/* Per-image focal utilities — keep the subject in frame when cover crops */
.svc-img-col img.pos-right{object-position:right center}
.svc-img-col img.pos-left{object-position:left center}
.svc-img-col img.pos-top{object-position:center top}
.svc-img-col::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(248,246,237,.55);
  pointer-events:none;
}

/* Text-only story sections — same heading voice as the image rows.
   Paragraphs cap at 36em with a right rag; the heading owns the rail. */
.service-body .svc-text{max-width:860px;margin:42px auto 0}
.service-body .svc-text h2{
  font-size:clamp(26px,2.8vw,36px);line-height:1.18;margin-bottom:18px;text-align:left;
}
.service-body .svc-text p{
  font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink-2);
  margin:0 0 14px;max-width:36em;
}
/* Opening drop cap — homepage Billy-story echo */
.service-body .drop-open::first-letter{
  font-family:var(--serif);font-weight:400;font-size:4.05em;line-height:.74;
  float:left;padding:1px 16px 0 0;color:var(--teal);
}

/* Closing call line — bordered center line, chapter-close grammar */
.service-body .svc-call{
  text-align:center;max-width:760px;margin:48px auto 0;padding-top:32px;
  border-top:1px solid var(--line);
}
.service-body .svc-call p{
  font-family:var(--serif);font-size:clamp(21px,2.2vw,26px);line-height:1.4;
  color:var(--ink);margin:0;
}
.service-body .svc-call a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal)}

/* Epigraph (Maya Angelou quote on Individual Therapy) */
.service-body .svc-epigraph{
  text-align:center;max-width:640px;margin:0 auto 40px;
}
.service-body .svc-epigraph p{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.1vw,24px);
  line-height:1.45;color:var(--ink);margin:0 0 8px;
}
.service-body .svc-epigraph .attr{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}

/* About page extras — portrait mat + announcement band */
.about-me-grid{
  display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;
  max-width:980px;margin:46px auto;
}
.about-portrait{
  position:relative;background:var(--ivory-2);border:1px solid var(--line-soft);
  padding:18px;
}
.about-portrait img{display:block;width:100%;height:auto}
.about-announce{
  position:relative;max-width:760px;margin:48px auto 0;text-align:center;
  background:var(--ivory);border:1px solid var(--line-soft);
  padding:38px 44px;
}
.about-announce::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 4%,var(--sage) 32%,var(--teal) 50%,var(--sage) 68%,transparent 96%);
  opacity:.75;
}
.about-announce::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(74,124,138,.22);
  pointer-events:none;
}
.about-announce p{
  font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink);margin:0;
}
.about-logo{max-width:280px;margin:36px auto 0}
.about-logo img{width:100%;height:auto;border:1px solid var(--line-soft)}

/* ============================================================
   CONTACT PAGE — copy left, letter card right
   ============================================================ */
.contact-section{background:var(--tint);padding:64px 0 84px}
.contact-copy{
  grid-column:1 / 7;display:flex;flex-direction:column;align-items:flex-start;
  align-self:start;
  background:var(--ivory-2);border:1px solid var(--line-soft);
  border-top:2px solid var(--teal);
  margin-right:-28px;padding:42px 56px 48px;
}
.contact-copy p{
  font-family:var(--serif);font-size:19px;line-height:1.66;color:var(--ink-2);
  max-width:26em;margin-bottom:14px;
}
.contact-copy .cta-line{padding:18px 0;border-top:1px solid var(--line);width:100%;max-width:420px}
.contact-copy .cta-line:last-of-type{border-bottom:1px solid var(--line)}
.contact-copy .cta-address{
  font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);
}
/* Personal byline inside the form card — shows who replies. Portrait
   echoes the FAQ answer-card byline at a slightly larger scale. */
.contact-byline{
  display:flex;align-items:center;gap:14px;
  margin:-10px 0 26px;padding-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.contact-byline__photo{
  display:block;width:88px;height:88px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);flex-shrink:0;
}
.contact-byline__photo img{width:100%;height:100%;object-fit:cover}
.contact-byline__text{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.contact-byline__text b{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
}
.contact-byline__text span{
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-3);
}
.contact-section .form-card{
  /* natural height — only the homepage final-CTA needs the equal-height
     stretch that pins its submit to the bottom */
  grid-column:7 / span 6;align-self:start;display:block;
}
.contact-section .form-card h3{border-bottom:none;padding-bottom:0;margin-bottom:18px}
@media(max-width:768px){
  .contact-copy{margin-right:0;padding:36px 28px 40px;grid-column:1 / -1}
  .contact-section .form-card{grid-column:1 / -1}
}

/* ============================================================
   FAQ — CONVERSATION THREAD
   Questions = visitor bubbles (right, tinted); answers = Eric's paper
   cards (left, ivory, purfled) with portrait byline. No accordion.
   ============================================================ */
.faq-section{background:var(--white);padding:64px 0 84px}
.faq-intro{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,23px);
  line-height:1.5;color:var(--ink-2);text-align:center;
  max-width:30em;margin:0 auto 52px;
}
.faq-thread{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.faq-exchange{display:flex;flex-direction:column;gap:0}
.faq-q-bubble{
  align-self:flex-end;max-width:82%;
  background:var(--tint);border:1px solid var(--line-soft);
  padding:20px 26px 18px;position:relative;
  /* button reset — the bubble IS the toggle */
  appearance:none;-webkit-appearance:none;font:inherit;text-align:left;
  cursor:pointer;display:block;border-radius:0;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.faq-q-bubble:hover,
.faq-q-bubble:focus-visible{
  border-color:rgba(74,124,138,.5);transform:translateY(-2px);
  box-shadow:0 16px 30px -24px rgba(23,51,60,.4);
}
.faq-q-bubble:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.faq-exchange.open .faq-q-bubble{border-color:rgba(74,124,138,.5);transform:none;box-shadow:none}
.faq-q-bubble::after{
  content:"";position:absolute;right:28px;bottom:-7px;width:12px;height:12px;
  background:var(--tint);border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);transform:rotate(45deg);
}
.faq-q-text{
  display:block;
  font-family:var(--serif);font-size:clamp(19px,2vw,23px);font-weight:400;
  line-height:1.3;color:var(--ink);margin:0;
}
/* Answer reveal: the wrap unfolds (grid 0fr -> 1fr) while the card
   conjures itself from its own center — scale .55 -> 1 with a gentle
   back-out overshoot. Closing reverses fast with no overshoot. The inner
   padding + negative wrap margins reserve room for the card shadow and
   the overshoot so overflow:hidden never clips them. */
.faq-a-wrap{
  align-self:flex-start;width:90%;
  display:grid;grid-template-rows:0fr;margin:0;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1);
}
.faq-exchange.open .faq-a-wrap{
  grid-template-rows:1fr;margin:0 -8px -32px;
}
.faq-a-inner{overflow:hidden;min-height:0;padding:16px 8px 32px}
.faq-a-card{
  position:relative;width:100%;
  background:var(--ivory);border:1px solid var(--line-soft);
  padding:26px 32px 24px;
  box-shadow:0 22px 44px -34px rgba(23,51,60,.35);
  opacity:0;transform:scale(.55);transform-origin:50% 50%;
  transition:opacity .2s ease,transform .24s ease;
}
.faq-exchange.open .faq-a-card{
  opacity:1;transform:scale(1);
  transition:opacity .4s ease .06s,transform .55s cubic-bezier(.34,1.56,.64,1) .06s;
}
@media (prefers-reduced-motion:reduce){
  .faq-a-wrap,.faq-a-card,.faq-q-bubble{transition:none}
  .faq-a-card{transform:none}
}
.faq-a-card::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(74,124,138,.18);
  pointer-events:none;
}
.faq-a-byline{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
  position:relative;z-index:1;
}
.faq-a-portrait{display:block;width:38px;height:38px;border-radius:50%;overflow:hidden;border:1px solid var(--line);flex-shrink:0}
.faq-a-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.faq-a-name{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
}
.faq-a-body{position:relative;z-index:1}
.faq-a-body p{
  font-family:var(--serif);font-size:18.5px;line-height:1.62;color:var(--ink-2);
  margin-bottom:12px;
}
.faq-a-body p:last-child{margin-bottom:0}
.faq-a-body strong{color:var(--ink);font-weight:500}
@media(max-width:600px){
  .faq-q-bubble{max-width:100%}
  .faq-a-wrap{width:100%}
  .faq-a-card{padding:22px 22px 20px}
}

/* ============================================================
   BLOG — index + single, feature-article grammar
   ============================================================ */
.blog-index{background:var(--white);padding:64px 0 84px}
.blog-lede{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,23px);
  color:var(--ink-2);text-align:center;max-width:30em;margin:0 auto 56px;
}
.blog-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column}
.blog-card{
  padding:40px 0;border-top:1px solid var(--line);
}
.blog-card.has-thumb{
  display:grid;grid-template-columns:264px 1fr;gap:36px;align-items:start;
}
.blog-card__thumb{position:relative;display:block;border:1px solid var(--line-soft);overflow:hidden}
.blog-card__thumb img{
  display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .65s ease;
}
.blog-card__thumb::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(248,246,237,.55);
  pointer-events:none;
}
.blog-card:hover .blog-card__thumb img{transform:scale(1.04)}
@media(max-width:680px){
  .blog-card.has-thumb{grid-template-columns:1fr;gap:22px}
  .blog-card__thumb img{aspect-ratio:16/9}
}
.blog-card:last-child{border-bottom:1px solid var(--line)}
.blog-card__date{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:12px;
}
.blog-card__title{font-size:clamp(26px,3vw,36px);line-height:1.16;margin-bottom:12px}
.blog-card__title a{
  color:var(--ink);text-decoration:none;transition:color .3s;
}
.blog-card__title a:hover{color:var(--teal)}
.blog-card__excerpt{
  font-family:var(--serif);font-size:18.5px;line-height:1.62;color:var(--ink-2);
  margin-bottom:18px;
}
.blog-empty{
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-3);
  text-align:center;
}
.blog-pagination{margin-top:48px}
.blog-pagination ul.page-numbers{
  list-style:none;display:flex;justify-content:center;gap:10px;padding:0;margin:0;
}
.blog-pagination .page-numbers li{list-style:none}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-2);text-decoration:none;border:1px solid var(--line-soft);
  transition:border-color .3s,color .3s,background .3s;
}
.blog-pagination a.page-numbers:hover{border-color:var(--teal);color:var(--teal)}
.blog-pagination span.page-numbers.current{
  background:var(--sage);border-color:var(--sage);color:#FDFCF7;
}

/* Single post */
.post-hero .inner-hero-content{max-width:820px}
.post-hero h1{font-size:clamp(36px,4.6vw,58px)}
.post-back{margin-bottom:26px}
.post-meta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.post-meta-sep{color:var(--sage)}
.post-body-wrap{background:var(--white);padding:64px 0 72px}
.post-body{max-width:var(--measure);margin:0 auto;padding:0 28px}
.post-body p{
  font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--ink-2);
  margin-bottom:16px;
}
.post-body.drop > p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:400;font-size:4.05em;line-height:.74;
  float:left;padding:1px 16px 0 0;color:var(--teal);
}
.post-body h2,.post-body h3{margin:36px 0 14px}
.post-body h2{font-size:clamp(26px,2.8vw,34px)}
.post-body h3{font-size:clamp(21px,2.2vw,26px)}
.post-body blockquote{
  margin:32px 0;padding:8px 0 8px 28px;border-left:2px solid var(--sage);
}
.post-body blockquote p{
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,27px);
  line-height:1.4;color:var(--ink);margin:0;
}
.post-body strong{color:var(--ink);font-weight:500}
.post-body img{border:1px solid var(--line-soft)}
.post-foot{max-width:var(--measure);margin:36px auto 0;padding:24px 28px 0;border-top:1px solid var(--line)}

/* ============================================================
   WPFORMS OVERRIDES — match the mockup's letter-card form exactly.
   WPForms CSS is disabled site-wide (disable-css=3), so these style the
   bare markup. Double selectors + !important beat any residual cascade.
   ============================================================ */
.form-card .wpforms-container .wpforms-field{margin-bottom:20px;padding:0}
.form-card .wpforms-container .wpforms-field-label{
  display:block;font-size:11.5px !important;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.form-card .wpforms-container input[type=text],
.form-card .wpforms-container input[type=email],
.form-card .wpforms-container input[type=tel],
.form-card .wpforms-container textarea{
  width:100% !important;max-width:100%;padding:13px 15px !important;
  font-family:var(--sans) !important;font-size:16px !important;color:var(--ink);
  background:var(--ivory) !important;border:1px solid var(--line-soft) !important;
  border-radius:0 !important;box-shadow:none;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.form-card .wpforms-container input:hover,
.form-card .wpforms-container textarea:hover{border-color:var(--line) !important}
.form-card .wpforms-container input:focus,
.form-card .wpforms-container textarea:focus{
  outline:none !important;border-color:var(--teal) !important;background:#fff !important;
  box-shadow:0 0 0 3px rgba(74,124,138,.09) !important;
}
.form-card .wpforms-container textarea{min-height:110px;resize:vertical}
.form-card .wpforms-container .wpforms-submit,
.form-card .wpforms-form button[type=submit]{
  position:relative;width:100% !important;padding:19px !important;
  border:none !important;border-radius:0 !important;cursor:pointer;
  line-height:1.7;color:#fff !important;font-family:var(--sans) !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:.14em;
  text-transform:uppercase;
  background-color:var(--sage) !important;
  background-image:linear-gradient(var(--deep),var(--deep)) !important;
  background-repeat:no-repeat !important;background-position:left center !important;
  background-size:0% 100% !important;
  transition:background-size .75s cubic-bezier(.22,1,.36,1) !important;
}
.form-card .wpforms-container .wpforms-submit:hover,
.form-card .wpforms-form button[type=submit]:hover{background-size:100% 100% !important}
.form-card .wpforms-container .wpforms-field-required-label{color:var(--teal)}
.form-card .wpforms-container .wpforms-error{
  font-size:13px;color:#a23b3b;margin-top:6px;display:block;
}
.form-card .wpforms-confirmation-container-full,
.form-card .wpforms-confirmation-container{
  background:var(--tint);border:1px solid var(--line-soft);padding:24px 28px;
}
.form-card .wpforms-confirmation-container-full p,
.form-card .wpforms-confirmation-container p{
  font-family:var(--serif);font-size:19px;color:var(--ink);margin:0;
}

/* Responsive — inner grammar */
@media(max-width:768px){
  .svc-img-section,
  .svc-img-section--reverse{grid-template-columns:1fr;gap:28px;margin:36px auto}
  .svc-img-section--reverse .svc-text-col{order:1}
  .svc-img-section--reverse .svc-img-col{order:2}
  .svc-img-col{min-height:0}
  .svc-img-col picture,
  .svc-img-col img{position:static;height:auto}
  .svc-img-col img{aspect-ratio:3/2;object-fit:cover}
  .about-me-grid{grid-template-columns:1fr;gap:30px}
  .inner-hero-content{padding:56px 24px}
  .inner-page{padding:56px 0 64px}
}

/* Billy story footnote — fictitious-name disclosure. Small italic, but
   never below the 14px touch floor (15px everywhere). */
.story-footnote{
  font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;
  color:var(--ink-3);text-align:center;max-width:var(--measure);
  margin:26px auto 0;
}

/* WPForms submit — letterpress inner frame + hover, identical to the
   mockup's .form-submit (frame tightens 4px -> 7px while the deep sweep
   crosses left-to-right). */
.form-card .wpforms-container .wpforms-submit::before,
.form-card .wpforms-form button[type=submit]::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(253,252,247,.38);
  pointer-events:none;transition:inset .4s ease,border-color .4s ease;
}
.form-card .wpforms-container .wpforms-submit:hover::before,
.form-card .wpforms-form button[type=submit]:hover::before{
  inset:7px;border-color:rgba(253,252,247,.65);
}
/* WPForms wraps the button — keep the container from adding stray margins */
.form-card .wpforms-submit-container{margin:0;padding:0}

/* About page — text-only sections centered, paragraphs left-aligned */
.page-template-page-about .svc-text{max-width:720px;margin-left:auto;margin-right:auto;}