/* ============================================================
   Mark Sirkin, PhD — "Temperature Arc"
   Client stylesheet (parent CSS fully dequeued; this is the only sheet)
   ============================================================ */

:root{
  --navy:#2F4A6D;
  --navy-deep:#1E2B3D;
  --sea:#22344a;
  --slate:#4A4F57;
  --brick:#8B2E2F;
  --brick-dark:#732526;
  --ink:#222831;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Literata",Georgia,serif;
  --wrap:1200px;
  --t-cool:#E4EAF0;
  --t-cool2:#E9ECEE;
  --t-mid:#EDEBE6;
  --t-warm:#F2EFE8;
  --t-warm2:#F6F3EC;
  --accent:#8B2E2F; /* used by shared invariant blocks */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--t-warm);
  line-height:1.75;
  font-size:1.075rem;
  padding-bottom:0;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--sans);font-weight:500;line-height:1.08;text-wrap:balance;letter-spacing:-.02em;color:var(--navy-deep)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.35rem,5vw,3rem)}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- Horizon divider ---------- */
.horizon{position:relative;height:0;border:0}
.horizon::before{content:"";position:absolute;left:clamp(1.35rem,5vw,3rem);right:clamp(1.35rem,5vw,3rem);top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,74,109,.28) 15%,rgba(47,74,109,.28) 85%,transparent);}
.horizon::after{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--brick);transform:translate(-50%,-50%);box-shadow:0 0 0 5px var(--_hb,var(--t-warm));}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.9rem;
  letter-spacing:.02em;padding:.95rem 1.8rem;background:var(--brick);color:#fff;
  border:1px solid var(--brick);border-radius:4px;cursor:pointer;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,color .3s ease;
}
.btn:hover{background:var(--brick-dark);border-color:var(--brick-dark);box-shadow:0 10px 30px rgba(139,46,47,.26);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;box-shadow:none}

.kicker{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brick);display:block;margin-bottom:1.3rem}
.kicker.light{color:#C9A59C}
.hero .kicker.light{color:#D9A9A0}

/* ============================================================
   HEADER / NAV  (adapted to TPA_Nav_Walker output classes)
   ============================================================ */
header.site-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(34,52,74,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:1300px;margin:0 auto;padding:.9rem clamp(1.35rem,5vw,3rem)}
/* flex:0 0 auto, not 0 1 auto — the logo must never be the item that gives up
   its width when the header is over-subscribed. With flex-shrink:1 the img
   inherits max-width:100% of a squeezed box while .brand-icon's height stays
   pinned, and the wordmark renders as a 4px sliver. The <=768 invariants
   block re-declares this for the drawer header and still wins there. */
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:0;margin-left:clamp(1rem,4vw,3.5rem)}
.brand-icon{height:76px;width:auto;flex:0 0 auto}

/* Desktop menu */
.nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;flex-wrap:nowrap;white-space:nowrap;margin:0;padding:0}
.nav-links > li{position:relative;display:flex;align-items:center;height:40px}
.nav-links > li > a{position:relative;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .82rem;white-space:nowrap;transition:color .25s}
.nav-links > li > a::before{content:"";position:absolute;left:.82rem;right:.82rem;bottom:.5rem;height:1.5px;background:var(--brick);opacity:0;transform:scaleX(0);transform-origin:center;transition:opacity .3s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.nav-links > li > a:hover{color:var(--navy-deep)}
.nav-links > li > a:hover::before,.nav-links > li > a.is-active::before{opacity:1;transform:scaleX(1)}
.nav-links > li > a.is-active{color:var(--navy-deep)}

/* Dropdown parent caret (walker: .dropdown > .dropdown-toggle) */
.nav-links .dropdown > a{cursor:default}
.nav-links .dropdown > a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7;transition:transform .25s;flex-shrink:0}
.nav-links .dropdown:hover > a::after{transform:rotate(-135deg);margin-top:2px}

/* Dropdown menu */
.nav-links .dropdown-menu{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border-radius:6px;
  box-shadow:0 20px 46px rgba(15,23,35,.28);min-width:280px;padding:.5rem;opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;transition-delay:.16s;list-style:none;z-index:20}
/* Hover bridge — fills the gap so the menu doesn't close crossing into it */
.nav-links .dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:transparent}
.nav-links .dropdown:hover > .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
.nav-links .dropdown-menu li{list-style:none}
.nav-links .dropdown-menu a{display:block;padding:.6rem .8rem;font-family:var(--sans);font-size:.88rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate);border-radius:5px;line-height:1.4;transition:.18s}
.nav-links .dropdown-menu a::before{display:none}
.nav-links .dropdown-menu a:hover{background:var(--t-cool);color:var(--navy)}

/* Nav right: phone + CTA + burger */
.nav-right{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.nav-phone{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);white-space:nowrap;transition:color .25s}
.nav-phone .np-ico{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(34,52,74,.16);display:flex;align-items:center;justify-content:center;color:var(--brick);transition:background .25s,border-color .25s,color .25s}
.nav-phone .np-ico svg{width:16px;height:16px}
.nav-phone .np-txt{display:flex;flex-direction:column;line-height:1.12}
.nav-phone .np-txt small{font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.nav-phone .np-txt b{font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--ink)}
.nav-phone:hover .np-ico{background:var(--brick);border-color:var(--brick);color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.02em;color:#fff;background:var(--brick);border:1px solid var(--brick);padding:.74rem 1.2rem;border-radius:4px;cursor:pointer;transition:background .3s,box-shadow .3s,border-color .3s;white-space:nowrap}
.nav-cta .nc-arw{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-cta:hover{background:var(--brick-dark);border-color:var(--brick-dark);box-shadow:0 8px 22px rgba(139,46,47,.32);color:#fff}
.nav-cta:hover .nc-arw{transform:translateX(4px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem;flex-shrink:0}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s;flex-shrink:0}

/* ---------- Hero (type-only, deep sea) ---------- */
.hero{background:var(--sea);color:#fff;position:relative;overflow:hidden}
.hero-tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.72;filter:saturate(.95) contrast(1.02);z-index:0;pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(20,29,43,.82) 0%,rgba(24,35,52,.55) 46%,rgba(30,45,66,.28) 100%),linear-gradient(180deg,transparent 42%,rgba(20,30,45,.62) 100%)}
.hero .wrap{position:relative;z-index:2;padding:clamp(5rem,13vw,9rem) clamp(1.35rem,5vw,3rem) 0}
.hero h1{color:#fff;font-size:clamp(2.5rem,6.2vw,4.9rem);font-weight:500;max-width:15ch;letter-spacing:-.025em}
.hero .lede{font-size:clamp(1.15rem,2vw,1.45rem);max-width:46ch;margin:1.8rem 0 3rem;color:#C9D4E1;line-height:1.55}
.hero-horizon{position:relative;margin-top:1rem;padding-bottom:clamp(3rem,7vw,5rem)}
.hero-horizon::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.06))}
.hero-shore{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1.6rem}
.hero-geo{font-family:var(--sans);font-size:.92rem;letter-spacing:.02em;color:#93A4B8;max-width:38ch}
.hero .btn{font-size:.88rem}

/* ---------- Sections ---------- */
.band{padding:clamp(3.8rem,9vw,7rem) 0}
.b-cool{background:var(--t-cool)}
.b-cool2{background:var(--t-cool2)}
.b-mid{background:var(--t-mid)}
.b-warm{background:var(--t-warm)}
.b-warm2{background:var(--t-warm2)}

/* ---------- Vignette ---------- */
.vb{display:grid;grid-template-columns:1.33fr 1fr;grid-template-rows:auto 1fr;column-gap:clamp(2rem,6vw,5rem);align-items:stretch}
.vb.flip{grid-template-columns:1fr 1.33fr}
.vb-head{grid-column:1;grid-row:1;margin-bottom:1.6rem}
.vb-copy{grid-column:1;grid-row:2;max-width:60ch}
.vb.flip .vb-head,.vb.flip .vb-copy{grid-column:2}
.vb h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:500;margin-bottom:0;color:var(--navy-deep)}
.vb-copy p{margin-bottom:1.05rem;color:#3c434d}
.vb-copy p:last-child{margin-bottom:0}
.vb-media{grid-column:2;grid-row:2;position:relative;min-height:100%}
.vb.flip .vb-media{grid-column:1}
.vb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;filter:saturate(.92)}
.b-cool2 .vb-media img{object-position:30% center}

.thesis{font-family:var(--sans) !important;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:500;color:var(--navy-deep) !important;line-height:1.3;margin-top:1.8rem !important;letter-spacing:-.01em}
.thesis b{color:var(--brick);font-weight:600}

/* ---------- Fictionalized disclaimer band ---------- */
.disclaimer-band{padding:clamp(1.9rem,4vw,3rem) 0;background:#CBD3DB}
.disclaimer-band .wrap{max-width:none;text-align:center}
.disclaimer-band p{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--slate);margin:0}

/* ---------- I Also Help ---------- */
.also-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.also-head .kicker{margin-bottom:1rem}
.also-head h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:500;line-height:1.04}
.also-list{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.2rem)}
.also-item{font-family:var(--serif);font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.48;color:#3c434d;margin:0;max-width:36ch}
.also-item b{font-family:var(--sans);font-weight:600;color:var(--navy-deep);letter-spacing:-.01em}
.band.also{background:linear-gradient(165deg,#39516A 0%,#41505F 58%,#4A5561 100%);position:relative;overflow:hidden}
.band.also::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 14% -10%,rgba(233,236,238,.07),transparent 58%)}
.band.also .wrap{position:relative;z-index:1}
.band.also .also-head h2{color:#F4F1E9}
.band.also .also-item{color:#C9D4E0}
.band.also .also-item b{color:#F6F3EC}

/* ---------- Wrap statement ---------- */
.statement .wrap{max-width:900px;text-align:center}
.statement h2{font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:500;line-height:1.2;margin-bottom:2rem;color:var(--navy-deep);text-wrap:pretty}
.statement p{color:#3c434d;font-size:1.12rem;margin-bottom:.7rem}
.statement .pivot{font-family:var(--sans);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--brick);margin-top:1.8rem;letter-spacing:-.01em}
.statement .pivot-unit{margin-top:clamp(2rem,4vw,2.8rem);display:flex;flex-direction:column;gap:.5rem}
.statement .pivot-unit .pivot{margin-top:0}

/* ---------- Bio ---------- */
#bio{background:#39516A}
#bio .kicker{color:#C9A59C}
#bio h2{color:#F4F1E9}
#bio .bio p{color:#DCE0E4}
#bio .creds{border-top-color:rgba(255,255,255,.22)}
#bio .creds div{color:#ECEEF0}
#bio .creds div::before{background:#C9A59C}
#bio .btn-outline{color:#fff;border-color:rgba(255,255,255,.55)}
#bio .btn-outline:hover{background:#fff;color:var(--navy-deep);border-color:#fff;box-shadow:none}
.bio{display:grid;grid-template-columns:.68fr 1.32fr;column-gap:clamp(2rem,5vw,4rem);row-gap:clamp(1.4rem,3vw,2rem);align-items:start}
.bio-head{grid-column:2;grid-row:1}
.bio-head h2{margin-bottom:0}
.bio-photo{grid-column:1;grid-row:2;display:flex;justify-content:flex-end}
.bio-text{grid-column:2;grid-row:2}
.headshot-ph{width:100%;max-width:345px;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:linear-gradient(160deg,#dbe2ea,#c9d3de);
  display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(47,74,109,.15)}
.headshot-ph span{font-family:var(--sans);font-size:.78rem;color:var(--slate);letter-spacing:.05em;padding:1.4rem;font-weight:500}
.headshot-ph svg{width:58px;height:58px;opacity:.4;margin-bottom:.5rem}
.headshot-photo{width:100%;max-width:345px;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
picture.headshot-photo{display:block;overflow:hidden}
picture.headshot-photo > img{width:100%;height:100%;aspect-ratio:auto;max-width:none;display:block;object-fit:cover}
.bio h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:1.4rem;font-weight:500}
.bio p{color:#3c434d;margin-bottom:1.05rem}
.creds{margin-top:2rem;border-top:1px solid rgba(47,74,109,.18);padding-top:1.4rem;display:grid;gap:.7rem}
.creds div{font-family:var(--sans);font-size:.9rem;color:var(--navy-deep);display:flex;gap:.7rem;align-items:baseline}
.creds div::before{content:"";width:6px;height:6px;background:var(--brick);border-radius:50%;flex:0 0 auto;transform:translateY(-1px)}
.bio .btn{margin-top:1.8rem}

/* ---------- Services header ---------- */
.svc .wrap{max-width:var(--wrap)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem 2.5rem;flex-wrap:wrap}
.svc-top .kicker{margin-bottom:.9rem}
.svc-top h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:500}

/* ---------- Services: The Intersection (two-domain split) ---------- */
.svc-split{margin-top:clamp(2.4rem,5vw,3.6rem);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.4rem,4vw,3.2rem);align-items:start}
.svc-domain{display:flex;flex-direction:column}
.svc-domain-label{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brick);margin-bottom:1.3rem}
.svc-domain--professional .svc-domain-label{color:var(--navy)}
.svc-row{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1rem,2vw,1.35rem) .6rem;border-top:1px solid rgba(47,74,109,.18);text-decoration:none;transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
.svc-row > *{position:relative;z-index:1}
.svc-row::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s ease;
  background:repeating-linear-gradient(135deg,rgba(139,46,47,.04) 0 1px,transparent 1px 10px),linear-gradient(90deg,rgba(139,46,47,.04),transparent 62%)}
.svc-row:hover::before{opacity:1}
.svc-domain .svc-row:last-child{border-bottom:1px solid rgba(47,74,109,.18)}
.svc-row .svc-name{font-family:var(--sans);font-weight:500;font-size:clamp(1.14rem,1.9vw,1.5rem);color:var(--navy-deep);letter-spacing:-.01em;transition:color .25s}
.svc-row .svc-go{font-family:var(--sans);color:var(--brick);opacity:0;transform:translateX(-8px);transition:opacity .28s,transform .28s}
.svc-row:hover{padding-left:.8rem}
.svc-row:hover .svc-name{color:var(--brick)}
.svc-row:hover .svc-go{opacity:1;transform:none}
.svc-seam{align-self:stretch;display:flex;align-items:center;justify-content:center;position:relative;padding-top:2.4rem}
.svc-seam::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(47,74,109,.22) 18%,rgba(47,74,109,.22) 82%,transparent)}
.svc-seam span{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--brick);background:var(--t-warm2);padding:.5rem 0;position:relative;z-index:1;line-height:1}

/* ---------- Resolution recap ---------- */
.recap .wrap{max-width:var(--wrap)}
.svc{padding-bottom:clamp(1.9rem,4.5vw,3.5rem)}
.recap{padding-top:clamp(1.9rem,4.5vw,3.5rem)}
.recap-reprise{display:block;width:100%;height:clamp(150px,18vw,310px);margin-bottom:clamp(2rem,4vw,2.8rem);
  background-size:cover;background-position:center 68%;
  background-attachment:fixed;background-repeat:no-repeat}
.recap-reprise.bg-armed{
  background-image:url("../images/home-body-fourth-wm.jpg");
  background-image:image-set(url("../images/home-body-fourth-wm.webp") type("image/webp"), url("../images/home-body-fourth-wm.jpg") type("image/jpeg"));
}
.recap-head{text-align:center;max-width:44ch;margin:0 auto;padding-top:3rem}
.recap-head .kicker{margin-bottom:1rem}
.recap h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:500;line-height:1.08}
.path-line{--thumb-h:clamp(120px,15vw,165px);--path-gap:clamp(1.4rem,3vw,2.6rem);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--path-gap);margin-top:clamp(2.4rem,5vw,3.4rem)}
.path-stop{text-align:center}
.path-thumb{width:100%;height:var(--thumb-h);object-fit:cover;border-radius:4px;display:block;filter:saturate(.95)}
picture.path-thumb{filter:none;overflow:hidden}
picture.path-thumb > img{width:100%;height:100%;display:block;object-fit:cover}
.path-stop:first-child .path-thumb{object-position:center 25%}
.path-rail{position:relative;height:2.4rem;display:flex;align-items:center;justify-content:center}
.path-rail::before{content:"";position:absolute;top:50%;left:50%;width:calc(100% + var(--path-gap));height:2px;background:var(--brick);opacity:.5;transform:translateY(-50%);z-index:0}
.path-stop:last-child .path-rail::before{display:none}
.path-node{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--brick);box-shadow:0 0 0 5px var(--t-warm2)}
.path-who{font-family:var(--sans);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--navy-deep);margin-bottom:.7rem;letter-spacing:-.01em}
.path-stop p{color:#3c434d;font-size:1rem;max-width:34ch;margin:0 auto;line-height:1.55}

/* ---------- CTA (content left, form right) — final-cta template part ---------- */
.cta .wrap{max-width:var(--wrap)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5rem);align-items:start}
.cta-copy{max-width:48ch}
.cta h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:1.3rem;font-weight:500}
.cta-copy p{color:#3c434d;margin-bottom:.9rem;font-size:1.06rem}
.cta-contact{display:flex;flex-direction:column;gap:.85rem;margin-top:1.9rem}
.cta-contact a{font-family:var(--sans);font-weight:600;color:var(--navy-deep);font-size:1.05rem;display:inline-flex;align-items:center;gap:.5rem}
.cta-contact a:hover{color:var(--brick)}
/* Warm-tinted paper rather than pure white — it ties the card to the page's
   warm ground and takes the glare off a bright panel on deep navy. */
.cta-form{text-align:left;background:#FDFBF8;border:1px solid rgba(47,74,109,.14);border-radius:6px;padding:clamp(1.6rem,3.2vw,2.6rem);box-shadow:0 18px 46px rgba(34,52,74,.08)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--slate);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.45rem}
.field input,.field textarea{width:100%;font-family:var(--serif);font-size:1rem;color:var(--ink);padding:.9rem 1rem;border:1px solid rgba(47,74,109,.25);border-radius:4px;background:#fff;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(47,74,109,.13)}
.field textarea{resize:vertical;min-height:120px}

/* deep-navy close */
#contact.cta{background:linear-gradient(168deg,#33507A 0%,#2F4A6D 52%,#2A4264 100%)}
.cta .kicker{color:#C9A59C}
#contact.cta h2{color:#F4F1E9}
#contact.cta .cta-copy p{color:#C9D4E0}
#contact.cta .cta-contact a{color:#fff}
#contact.cta .cta-contact a:hover{color:#C9A59C}
#contact.cta .cta-form{box-shadow:0 26px 62px rgba(13,20,32,.5)}

/* ---------- Footer ---------- */
footer.site-footer{background:#fff;color:var(--slate);padding:3rem 0 2.4rem;border-top:1px solid rgba(34,52,74,.1)}
/* Drawer-only CTA (see header.php items_wrap). Hidden everywhere the drawer
   is not open; the drawer block below re-shows it. */
.nav-links > li.nav-cta-li{display:none}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center}
.foot-brand .brand-icon{height:88px}
.foot-center{display:flex;justify-content:center}
.footer-pt-badge{display:inline-block;opacity:.85;transition:opacity .3s ease}
.footer-pt-badge:hover{opacity:1}
.footer-pt-badge img{height:40px;width:auto;display:block}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot-links a{font-family:var(--sans);font-size:.86rem;color:var(--ink);transition:color .2s}
.foot-links a:hover{color:var(--brick)}
.foot-bottom{border-top:1px solid rgba(34,52,74,.1);margin-top:2rem;padding-top:1.6rem;font-family:var(--sans);font-size:.82rem;color:var(--slate);text-align:center}

/* ============================================================
   INNER PAGES (About, Contact, FAQ, Service/Specialty)
   ============================================================ */
/* Bold, tall, full-color hero. Title centered on its own translucent panel
   so it stays readable over any image. No overlay on the photo. */
.inner-hero{position:relative;overflow:hidden;min-height:clamp(330px,36vw,500px);
  display:flex;align-items:center;justify-content:center;text-align:center}
.inner-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
.inner-hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:clamp(3rem,7vw,5rem) clamp(1.35rem,5vw,3rem)}
.inner-hero h1{
  display:inline-block;color:var(--navy-deep);
  font-size:clamp(2.2rem,5.6vw,4.1rem);font-weight:600;line-height:1.06;letter-spacing:-.025em;
  background:rgba(246,243,236,.45);
  -webkit-backdrop-filter:blur(1.5px) saturate(1.03);backdrop-filter:blur(1.5px) saturate(1.03);
  text-shadow:0 1px 2px rgba(246,243,236,.55),0 2px 18px rgba(246,243,236,.8);
  padding:clamp(.45rem,1.2vw,.85rem) clamp(.9rem,2.3vw,1.5rem);
  border-radius:5px;box-shadow:0 4px 18px rgba(20,30,45,.08);
  max-width:min(100%,20ch);text-wrap:balance}
.inner-hero .lede{display:inline-block;font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:min(100%,50ch);
  margin-top:1rem;color:var(--navy-deep);line-height:1.5;font-family:var(--serif);
  text-shadow:0 1px 2px rgba(246,243,236,.5),0 2px 16px rgba(246,243,236,.8);
  background:rgba(246,243,236,.42);-webkit-backdrop-filter:blur(1.5px) saturate(1.03);backdrop-filter:blur(1.5px) saturate(1.03);
  padding:.7rem 1.3rem;border-radius:5px}
/* Plain inner hero (no image) keeps the deep-sea band look */
.inner-hero--plain{min-height:auto;background:var(--sea)}
.inner-hero--plain h1{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;padding:0}
/* About hero: frame toward the bottom of the image so the full sunset shows */
body.page-about .inner-hero-img{object-position:center center}
/* FAQ hero: frame lower so more of the books + windowsill show */
body.page-faq .inner-hero-img{object-position:72% center}
/* Individual: keep the walker's head clear of the top edge */
body.page-individual-therapy .inner-hero-img{object-position:center center}
/* Couples: the chairs sit low in the frame — crop to them, not the treeline */
body.page-couples-counseling .inner-hero-img{object-position:25% center}

.service-body{max-width:1200px;margin:0 auto;padding:clamp(2.2rem,4vw,3.2rem) clamp(1.35rem,5vw,3rem) clamp(3.5rem,8vw,6rem)}
/* Container matches the homepage (1200px) but the copy measure stays put — the
   extra width goes to the photos. Standalone text blocks keep the old width. */
.service-body > h2,
.service-body > p,
.service-body > ul,
.service-body > ol,
.service-body > blockquote,
.service-body > .inner-lead{max-width:1080px}
.service-body > .inner-lead{margin-top:0;text-align:left}
.service-body .inner-lead h2{font-family:var(--sans);font-style:normal;font-weight:500;color:var(--navy-deep);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;margin-bottom:1.2rem}
.service-body > h2,
.service-body > .svc-img-section{margin-top:clamp(46px,7vw,84px)}
/* first section sits close under the hero — about half the normal section gap */
.service-body > *:first-child{margin-top:0}
.service-body h2{font-family:var(--sans);font-weight:500;color:var(--navy-deep);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;margin-bottom:1.1rem;letter-spacing:-.01em}
.service-body p{color:#3c434d;margin-bottom:1.05rem}
.service-body p:last-child{margin-bottom:0}
/* Legal pages dump a bare, unwrapped <ul> straight from the editor — the
   global reset zeroes padding-left, so a native outside-position disc marker
   has no room to sit in and renders left of the paragraph's own edge. Build
   the bullet manually so it aligns pixel-exact with sibling <p> text. */
.service-body ul:not(.svc-list){list-style:none;margin:0 0 1.05rem;padding-left:0}
.service-body ul:not(.svc-list) li{position:relative;padding-left:1.1em;margin-bottom:.4rem}
.service-body ul:not(.svc-list) li:last-child{margin-bottom:0}
.service-body ul:not(.svc-list) li::before{content:"\2022";position:absolute;left:0;color:var(--navy-deep)}
.service-body em{font-style:italic}
.service-body strong{font-weight:600;color:var(--navy-deep)}
/* Text column stays ~its original width (550px); the image column absorbs the
   extra container width so photos have more room to breathe. */
.svc-img-section{display:grid;grid-template-columns:minmax(0,550px) 1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:stretch;margin:0}
.svc-img-section--reverse{grid-template-columns:1fr minmax(0,550px)}
.svc-img-section--reverse .svc-img-col{order:-1}
.svc-text-col{display:flex;flex-direction:column;justify-content:center}
.svc-text-col h2{margin-top:0}
.svc-img-col{position:relative;min-height:260px}
.svc-img-col img{width:100%;height:100%;object-fit:cover;border-radius:3px;filter:saturate(.92)}

/* ---------- Inner-page block system ----------
   Every top-level block of post_content is wrapped in .svc-block, so the
   section gap is declared once between siblings instead of being inferred
   from whichever element happens to lead a section. Pages built before this
   have no .svc-block elements, so nothing below touches them. */
.service-body{--sec-gap:clamp(46px,7vw,84px);--sb-gut:clamp(1.35rem,5vw,3rem)}
.service-body > .svc-block{margin:0}
.service-body > .svc-block + .svc-block{margin-top:var(--sec-gap)}
.service-body > .svc-block > *:first-child{margin-top:0}
.service-body > .svc-block > *:last-child{margin-bottom:0}
.service-body > .svc-block > h2,
.service-body > .svc-block > p,
.service-body > .svc-block > ul,
.service-body > .svc-block > ol,
.service-body > .svc-block > blockquote{max-width:1080px}

/* The copy sets the height and the photo fills it — never the reverse. */
.svc-block .svc-img-col{min-height:clamp(240px,26vw,340px)}
.svc-block .svc-img-col img{position:absolute;inset:0}

/* Full-bleed temperature band — the homepage arc vocabulary, on inner pages.
   The margin-inline needs the same specificity as the `margin:0` shorthand on
   .svc-block above, or the shorthand resets it and the band overflows right
   instead of bleeding left. */
.service-body > .svc-block.svc-band{margin-inline:calc(50% - 50vw)}
.svc-band{width:100vw;background:var(--t-warm2);
  padding:clamp(2.6rem,5.5vw,4.4rem) calc((100vw - min(100vw,1200px))/2 + var(--sb-gut))}
.svc-band.b-cool{background:var(--t-cool);--_ab:var(--t-cool)}
.svc-band.b-cool2{background:var(--t-cool2);--_ab:var(--t-cool2)}
.svc-band.b-mid{background:var(--t-mid);--_ab:var(--t-mid)}
.svc-band > *{max-width:1080px}

/* Bulleted lists (brick dot, sans lead-in) */
.service-body .svc-list{list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:1.15rem;max-width:1080px}
.service-body .svc-list li{position:relative;padding-left:1.6rem;color:#3c434d;line-height:1.65}
.service-body .svc-list li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--brick)}
.service-body .svc-list li strong{font-family:var(--sans);font-weight:600;color:var(--navy-deep);letter-spacing:-.01em}

/* Opening pull-line */
.service-body .svc-quote{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.22rem,2.1vw,1.55rem);line-height:1.4;color:var(--navy-deep);
  border-left:2px solid var(--brick);padding-left:clamp(.9rem,2vw,1.3rem);
  margin:0 0 1.4rem;max-width:36ch}

/* Three-step arc — the homepage path rail, without thumbnails */
.arc-steps{--path-gap:clamp(1.4rem,3vw,2.6rem);display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--path-gap);margin:clamp(2.1rem,4vw,3rem) 0 0}
.arc-step{text-align:center}
.arc-rail{position:relative;height:2.4rem;display:flex;align-items:center;justify-content:center}
/* The connector is drawn to the LEFT of each step and suppressed on the first.
   Anchoring on :first-child rather than :last-child means a stray trailing
   node in the grid (wpautop is fond of producing them) can never leave a rail
   dangling off the right edge. */
.arc-rail::before{content:"";position:absolute;top:50%;right:50%;width:calc(100% + var(--path-gap));
  height:2px;background:var(--brick);opacity:.5;transform:translateY(-50%);z-index:0}
.arc-steps > .arc-step:first-child .arc-rail::before{display:none}
.arc-node{position:relative;z-index:1;width:14px;height:14px;border-radius:50%;
  background:var(--brick);box-shadow:0 0 0 5px var(--_ab,var(--t-warm))}
.service-body .arc-step h3{font-family:var(--sans);font-weight:600;color:var(--navy-deep);
  font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.25;letter-spacing:-.01em;margin-bottom:.45rem}
.service-body .arc-step p{font-size:.99rem;color:#3c434d;line-height:1.55;max-width:30ch;margin:0 auto}

/* Closing block */
.service-body .svc-close .btn{margin-top:1.5rem;color:#fff}
.service-body .svc-close-alt{font-family:var(--sans);font-size:.95rem;color:var(--slate);margin-top:1rem}
.service-body .svc-close-alt a{color:var(--brick);text-decoration:underline;text-underline-offset:3px}
.service-body .svc-close-alt a:hover{color:var(--brick-dark)}
/* Inline "Or call ... or email ..." sentence — tel:/mailto: links inherit the
   generic underline above; the site-wide no-underline rule for phone/email
   wins here on selector specificity, not source order. */
.service-body .svc-close-alt a[href^="tel:"],
.service-body .svc-close-alt a[href^="mailto:"]{text-decoration:none}

@media(max-width:760px){
  .svc-block .svc-img-col{min-height:0}
  .svc-block .svc-img-col img{position:relative;inset:auto;height:auto;aspect-ratio:16/10;max-height:340px}
  .arc-steps{grid-template-columns:1fr;gap:1.9rem}
  .arc-rail{height:1.7rem}
  /* Stacked steps run top-to-bottom, so a horizontal connector points at
     nothing — the nodes alone carry the sequence. */
  .arc-rail::before{display:none}
}

/* ---------- FAQ (standard accordion, generous spacing) ---------- */
.faq-shell{max-width:840px;margin:0 auto;padding:clamp(2.2rem,4vw,3.2rem) clamp(1.35rem,5vw,3rem) clamp(3.5rem,8vw,6rem)}
/* Editorial intro */
.faq-intro{max-width:58ch;margin:0 0 clamp(2.8rem,6vw,4.2rem)}
.faq-intro-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.9vw,2.1rem);color:var(--navy-deep);line-height:1.3;letter-spacing:-.01em;margin-bottom:1rem}
.faq-intro-sub{font-family:var(--sans);font-weight:500;font-size:1.02rem;color:var(--slate);line-height:1.55}
/* Category label does the section work — no divider */
.faq-cat-label{font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brick);margin:clamp(2.6rem,5vw,3.8rem) 0 .7rem;padding-left:clamp(.5rem,1.2vw,.9rem)}
.faq-list > .faq-cat-label:first-child{margin-top:0}
.faq-item{border-top:1px solid rgba(47,74,109,.16);transition:background .4s ease}
.faq-item:last-child{border-bottom:1px solid rgba(47,74,109,.16)}
.faq-item.open{background:rgba(255,255,255,.5)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:clamp(1.9rem,3.6vw,2.7rem) clamp(.5rem,1.2vw,.9rem);
  font-family:var(--sans);font-weight:500;font-size:clamp(1.12rem,1.9vw,1.4rem);color:var(--navy-deep);letter-spacing:-.01em;line-height:1.3;transition:color .3s ease}
.faq-q:hover{color:var(--brick)}
.faq-ico{flex:0 0 auto;width:18px;height:18px;position:relative;transition:transform .5s cubic-bezier(.33,1,.68,1)}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--brick);border-radius:2px}
.faq-ico::before{top:8px;left:0;width:18px;height:2px}
.faq-ico::after{left:8px;top:0;width:2px;height:18px;transition:transform .5s cubic-bezier(.33,1,.68,1)}
.faq-item.open .faq-ico{transform:rotate(180deg)}
.faq-item.open .faq-ico::after{transform:scaleY(0)}
.faq-item.open .faq-q{color:var(--brick)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.33,1,.68,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a-inner > div{padding:0 clamp(.5rem,1.2vw,.9rem) clamp(1.9rem,3.6vw,2.7rem);color:#3c434d;max-width:64ch;font-family:var(--serif);font-size:1.06rem;line-height:1.75}
.faq-a-inner p{margin-bottom:.95rem}
.faq-a-inner p:last-child{margin-bottom:0}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.4rem,6vw,5rem);align-items:start;max-width:1080px;margin:0 auto;padding:clamp(2.2rem,4vw,3.2rem) clamp(1.35rem,5vw,3rem) clamp(3.5rem,8vw,6rem)}
.contact-info p{color:#3c434d;margin-bottom:1.05rem}
.contact-info .contact-lead{font-family:var(--sans);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--navy-deep);line-height:1.25;margin-bottom:1.4rem;letter-spacing:-.01em}
/* Contact details on their own card, set off with a brick accent edge */
.contact-methods{display:flex;flex-direction:column;gap:1rem;margin:2rem 0 0;
  background:#FDFBF8;border:1px solid rgba(47,74,109,.14);border-radius:6px;
  box-shadow:0 10px 34px rgba(34,52,74,.07);padding:clamp(1.5rem,3vw,2rem) clamp(1.6rem,3vw,2.1rem)}
.contact-methods a,.contact-methods > div:not(.contact-note){font-family:var(--sans);font-weight:600;color:var(--navy-deep);font-size:1.06rem;display:inline-flex;align-items:center;gap:.7rem}
.contact-methods a:hover{color:var(--brick)}
.contact-note{font-family:var(--sans);font-size:.95rem;color:var(--slate);font-weight:500;margin-top:.5rem;padding-top:1rem;border-top:1px solid rgba(47,74,109,.12);line-height:1.5}

/* About: the Meet Mark band spaces like a normal section (body owns no extra
   bottom padding here), it just carries its own background color. */
body.page-about .service-body{padding-bottom:0}

/* ---------- About: highlighted closing CTA (its own design moment) ---------- */
.about-cta{max-width:1200px;margin:clamp(3rem,6vw,4.5rem) auto clamp(3.2rem,6vw,4.8rem);padding:0 clamp(1.35rem,5vw,3rem)}
.about-cta-inner{position:relative;overflow:hidden;text-align:center;border-radius:12px;
  padding:clamp(3rem,6vw,4.6rem) clamp(1.6rem,5vw,3.5rem);
  background:radial-gradient(125% 120% at 50% 0%,var(--t-cool) 0%,var(--t-warm2) 55%,var(--t-warm) 100%);
  border:1px solid rgba(47,74,109,.16);box-shadow:0 24px 60px rgba(34,52,74,.10)}
/* horizon flourish (site motif): hairline + brick dot centered at top */
.about-cta-inner::before{content:"";position:absolute;top:30px;left:50%;transform:translateX(-50%);width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,46,47,.55),transparent)}
.about-cta-inner::after{content:"";position:absolute;top:30px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--brick);transform:translate(-50%,-50%)}
.about-cta .kicker{color:var(--brick);margin:1.7rem 0 1.1rem}
.about-cta h2{font-size:clamp(2rem,4vw,3rem);color:var(--navy-deep);line-height:1.1;margin-bottom:1.3rem}
.about-cta p{color:#3c434d;max-width:54ch;margin:0 auto .9rem;font-size:1.1rem}
.about-cta p:last-of-type{margin-bottom:0}
.about-cta .btn{margin-top:1.9rem}

/* ---------- About: full-width "Meet Mark" band ---------- */
.about-meet{position:relative;overflow:hidden;margin-top:clamp(3rem,6vw,5rem);padding:clamp(3.2rem,7vw,5.5rem) 0;
  background:linear-gradient(165deg,#39516A 0%,#41505F 62%,#4A5561 100%);color:#DCE0E4}
.about-meet::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 12% -10%,rgba(233,236,238,.06),transparent 58%)}
.about-meet .wrap{position:relative;z-index:1;max-width:var(--wrap)}
/* Heading spans the top; headshot sits beside the body copy (mirrors homepage bio) */
.about-meet-grid{display:grid;grid-template-columns:.6fr 1.4fr;column-gap:clamp(2rem,5vw,4.5rem);row-gap:clamp(1.4rem,3vw,2rem);align-items:start}
.about-meet-head{grid-column:2;grid-row:1}
.about-meet-photo{grid-column:1;grid-row:2;display:flex;justify-content:flex-end}
.about-meet-body{grid-column:2;grid-row:2}
.about-meet-photo .headshot-ph,.about-meet-photo .headshot-photo{max-width:330px}
.about-meet .kicker{color:#C9A59C;margin-bottom:1rem}
.about-meet-head h2{color:#F4F1E9;font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:500;line-height:1.08;margin-bottom:0}
.about-meet p{color:#DCE0E4;margin-bottom:1rem}
.about-meet p:last-child{margin-bottom:0}
@media(max-width:820px){
  .about-meet-grid{grid-template-columns:1fr;gap:1.8rem}
  .about-meet-head,.about-meet-photo,.about-meet-body{grid-column:auto;grid-row:auto}
  .about-meet-photo{justify-content:flex-start}
  .about-meet-photo .headshot-ph,.about-meet-photo .headshot-photo{max-width:280px}
}
.contact-form-col{background:#FDFBF8;border:1px solid rgba(47,74,109,.14);border-radius:6px;padding:clamp(1.6rem,3.2vw,2.6rem);box-shadow:0 18px 46px rgba(34,52,74,.08)}
.contact-form-col h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:1.3rem;font-weight:500}

/* ============================================================
   Form cards — Final CTA + Contact
   ------------------------------------------------------------
   Colour, borders, focus and the hover sweep are handled fleet-wide by
   tpa-base (<style id="tpa-wpforms-brand">) off the --form-* tokens in
   style.css. This layer is ONLY the bespoke part: the vertical rhythm
   inside the card, and putting the submit back into this site's own
   button voice.

   Every selector here carries .cta-form / .contact-form-col ahead of the
   parent's own chain, because the parent prints at wp_head priority 100 —
   after this stylesheet — so an equal-specificity rule would lose.
   ============================================================ */
.cta-form .wpforms-container,
.contact-form-col .wpforms-container{margin:0}

/* Rhythm, not uniformity: a label hugs the input it names, while the
   fields themselves get room to breathe. Everything at one flat 1.05rem
   was what read as "squished". */
.cta-form .wpforms-container .wpforms-form .wpforms-field,
.contact-form-col .wpforms-container .wpforms-form .wpforms-field{margin:0 0 1.4rem !important}
.cta-form .wpforms-container .wpforms-form .wpforms-field-label,
.contact-form-col .wpforms-container .wpforms-form .wpforms-field-label{
  font-family:var(--sans) !important;font-size:.76rem !important;font-weight:600 !important;
  letter-spacing:.09em !important;color:var(--navy-deep) !important;opacity:.72 !important;
  margin:0 0 .42rem !important}

/* Body serif in the inputs, so what someone types looks like the page. */
.cta-form .wpforms-container .wpforms-form input[type=text],
.cta-form .wpforms-container .wpforms-form input[type=email],
.cta-form .wpforms-container .wpforms-form input[type=tel],
.cta-form .wpforms-container .wpforms-form textarea,
.contact-form-col .wpforms-container .wpforms-form input[type=text],
.contact-form-col .wpforms-container .wpforms-form input[type=email],
.contact-form-col .wpforms-container .wpforms-form input[type=tel],
.contact-form-col .wpforms-container .wpforms-form textarea{
  font-family:var(--serif) !important;padding:.95rem 1.05rem !important;
  border-width:1px !important}

/* The open question deserves the most room on the card, not the least. */
.cta-form .wpforms-container .wpforms-form textarea,
.contact-form-col .wpforms-container .wpforms-form textarea{min-height:132px !important}

/* The submit is not a fifth field. Give it a real break and a hairline so
   the eye reads "…and now send it" instead of running straight on. */
.cta-form .wpforms-container .wpforms-submit-container,
.contact-form-col .wpforms-container .wpforms-submit-container{
  margin-top:1.6rem !important;padding-top:1.35rem !important;
  border-top:1px solid rgba(47,74,109,.13) !important}

/* Same voice as every other button on this site — title case, quiet
   tracking. The fleet default shouts it in uppercase at .06em, which is
   also what pushed "…15-Minute Consultation" onto a second line inside a
   436px card. line-height keeps a narrow-viewport wrap looking deliberate. */
.cta-form .wpforms-container .wpforms-form button.wpforms-submit,
.contact-form-col .wpforms-container .wpforms-form button.wpforms-submit{
  font-family:var(--sans) !important;font-weight:600 !important;font-size:.95rem !important;
  letter-spacing:.02em !important;text-transform:none !important;line-height:1.35 !important;
  padding:1.02rem 1.3rem !important;min-height:54px !important;
  /* height:auto is load-bearing. The parent needs overflow:hidden for the
     hover sweep, and a <button> laid out as a centred flex box will sit at
     its min-height and clip a wrapped label instead of growing. */
  height:auto !important;
  box-shadow:0 10px 26px rgba(139,46,47,.22) !important}
.cta-form .wpforms-container .wpforms-form button.wpforms-submit:hover,
.contact-form-col .wpforms-container .wpforms-form button.wpforms-submit:hover{
  box-shadow:0 14px 32px rgba(139,46,47,.3) !important}

.cta-form .wpforms-confirmation-container-full,
.contact-form-col .wpforms-confirmation-container-full{padding:1.15rem 1.3rem !important}

/* ============================================================
   REVEAL / forceVisible safety net
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes forceVisible{to{opacity:1;transform:none}}
/* Inner-page structural wrappers that carry no scroll animation — become visible if JS never fires */
.service-body,.faq-shell,.contact-grid{animation:forceVisible .01s 8s forwards}
/* .reveal.in must win over any forceVisible */
.reveal.in{opacity:1;transform:none;animation:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .bio{grid-template-columns:1fr;gap:2rem}
  .bio-head,.bio-photo,.bio-text{grid-column:auto;grid-row:auto}
  .bio-photo{justify-content:flex-start}
  .headshot-ph,.headshot-photo{max-width:300px}
}
/* Drawer breakpoint. The third condition is iPad Mini landscape (1024x768):
   a touch device wide enough to clear 860px and tall enough to clear the
   500px landscape gate, so it got the full desktop header — and once the
   touch floors widened the links, phone and CTA by ~94px, .brand was the
   only shrinkable item left and the logo collapsed to 4px. Keep this
   condition identical everywhere the burger, the drawer, or the JS that
   drives them is keyed. */
@media (max-width:860px),
       (hover:none) and (pointer:coarse) and (max-height:500px),
       (hover:none) and (pointer:coarse) and (max-width:1100px){
  /* Nav collapses: hide desktop links, phone AND the header CTA — the CTA is
     re-rendered inside the drawer panel instead (header.php items_wrap). */
  .nav-links,.nav-phone,.nav-right > .nav-cta{display:none}
  .burger{display:flex}
  /* Mobile: reveal .nav-links as a dropdown panel */
  .mobile-open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:1rem 1.5rem 1.5rem;gap:.1rem;box-shadow:0 20px 40px rgba(15,23,35,.2);align-items:stretch;white-space:normal}
  .mobile-open .nav-links > li{height:auto;display:block}
  .mobile-open .nav-links > li > a{color:var(--ink);padding:.85rem 0;border-bottom:1px solid #eee;font-size:.8rem;height:auto;display:flex;justify-content:space-between}
  .mobile-open .nav-links > li > a::before{display:none}
  .mobile-open .nav-links > li > a:hover{color:var(--navy)}
  .mobile-open .nav-links .dropdown > a{pointer-events:auto;cursor:pointer}
  .mobile-open .nav-links .dropdown > a::after{margin-left:.4rem;margin-top:0;border-color:var(--slate);transition:transform .3s}
  .mobile-open .nav-links .dropdown.open > a::after{transform:rotate(-135deg)}
  /* submenu collapsed inline by default; open on .open */
  .mobile-open .nav-links .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;min-width:0;padding:0 0 .5rem 1rem;border-radius:0;background:transparent;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .mobile-open .nav-links .dropdown-menu::before{display:none}
  .mobile-open .nav-links .dropdown.open .dropdown-menu{max-height:600px}
  .mobile-open .nav-links .dropdown-menu a{padding:.6rem 0;color:var(--slate);font-size:.82rem}
  /* The desktop dropdown is centred under its parent with
     left:50%;transform:translateX(-50%). `.nav-links .dropdown:hover > .dropdown-menu`
     is (0,4,0) and outranks the drawer's (0,3,0) `transform:none`, and on a
     touch device :hover sticks after a tap — so the submenu was rendering ~148px
     off the left edge. These need the same (0,4,0) weight to win. */
  .mobile-open .nav-links .dropdown:hover > .dropdown-menu,
  .mobile-open .nav-links .dropdown.open > .dropdown-menu{transform:none;left:auto;right:auto}
  /* Drawer CTA */
  .mobile-open .nav-links > li.nav-cta-li{display:block;margin-top:1rem;border-bottom:0}
  .mobile-open .nav-links .mobile-menu-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--brick);color:#fff;border-radius:4px;padding:14px 18px;min-height:44px;
    font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:none}
  .nav{position:relative;flex-wrap:wrap}
}
@media(max-width:860px){
  .cta-grid{grid-template-columns:1fr;gap:2.2rem}
  .cta-copy{max-width:none}
  .contact-grid{grid-template-columns:1fr;gap:2.4rem}
}
@media(max-width:900px){
  .also-grid{grid-template-columns:1fr;gap:1.4rem}
  .also-item{max-width:none;font-size:1.15rem}
}
@media(max-width:760px){
  .vb,.vb.flip{display:flex;flex-direction:column}
  .vb-head{order:1;margin-bottom:1.1rem}
  .vb-copy{order:2;max-width:none;margin-bottom:1.6rem}
  .vb-media{order:3;min-height:0}
  .vb-media img{position:static;width:100%;height:auto;aspect-ratio:16/10;max-height:340px}
  .disclaimer-band p{white-space:normal}
  .hero-shore{flex-direction:column;align-items:flex-start}
  .svc-split{grid-template-columns:1fr;gap:.4rem}
  .svc-domain--professional .svc-domain-label{margin-top:1.4rem}
  .svc-seam{padding:1.5rem 0}
  .svc-seam::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(47,74,109,.22),transparent)}
  .path-line{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.4rem);margin-top:2.2rem}
  .path-thumb{height:clamp(160px,44vw,220px)}
  .path-rail{height:1.7rem}
  .path-rail::before{display:none}
  .svc-img-section,.svc-img-section--reverse{grid-template-columns:1fr;gap:1.4rem}
  .svc-img-section--reverse .svc-img-col{order:0}
  .svc-img-col{min-height:0}
  .svc-img-col img{height:auto;aspect-ratio:16/10;max-height:340px}
}
@media(hover:none) and (pointer:coarse){
  .field label,.foot-links a,.hero-geo,.disclaimer-band p{font-size:.9rem !important}
  .recap-reprise{background-attachment:scroll}
}
@media(max-width:760px){
  /* One service per line — the separators collapse rather than being removed,
     so the desktop reading is untouched. */
  .hero-kicker .kicker-part{display:block}
  .hero-kicker .kicker-sep{display:none}
  /* Footer stacks centred: logo, then the legal links, then the copyright. */
  .foot{flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;text-align:center}
  .foot-links{justify-content:center;gap:1.6rem}
  .foot-bottom{margin-top:1.4rem}
}
@media(max-width:480px){
  .hero .btn{padding:.9rem 1.4rem;font-size:.8rem}
  body{font-size:1.02rem}
}

/* ============================================================
   MOBILE RESPONSIVE INVARIANTS — DO NOT REMOVE
   ============================================================ */
html,body{overflow-x:clip}
@media (max-width:768px){
  .brand{min-width:0;flex:1 1 auto;margin-left:.5rem}
  .brand-icon{height:56px}
  .burger{flex-shrink:0;margin-left:auto}
  .nav-links > li{white-space:normal}
  .nav-links .dropdown-menu,.nav-links .dropdown-menu li,.nav-links .dropdown-menu a{white-space:normal}
}

/* Touch-device accessibility floors */
@media (hover:none) and (pointer:coarse){
  .mobile-open .nav-links > li > a{font-size:14px !important;min-height:44px;padding:12px 0 !important;display:flex;align-items:center;justify-content:space-between}
  .mobile-open .nav-links .dropdown-menu a{font-size:14px !important;min-height:44px;padding:12px 0 !important;display:flex;align-items:center}
  .nav-cta,.mobile-menu-cta,.btn,.btn-outline{font-size:14px !important;min-height:44px;box-sizing:border-box}
  .burger span{flex-shrink:0;height:2px;min-height:2px}
  .foot-links a,.foot-bottom,.footer-pt-badge{font-size:14px !important}
  .foot-links a,.footer-pt-badge{min-height:44px;padding:8px 0;display:inline-block;box-sizing:border-box}
  /* :not(.nav-phone) is load-bearing. a[href^="tel:"] is (0,1,1) and beats the
     drawer's .nav-phone{display:none} at (0,1,0), so without it this rule
     re-shows the header phone on every touch phone — the header then wraps
     to two rows and clips the CTA off the right edge. */
  a[href^="tel:"]:not(.nav-phone),a[href^="mailto:"]{min-height:44px;padding:10px 0;display:inline-flex;align-items:center;box-sizing:border-box}
  /* Needs the parent's own chain in front of it — tpa-base prints its touch
     block at wp_head 100, after this sheet, so an equal-specificity rule
     loses. Narrower side padding buys the label room before it wraps. */
  .cta-form .wpforms-container .wpforms-form button.wpforms-submit,
  .contact-form-col .wpforms-container .wpforms-form button.wpforms-submit{
    font-size:15px !important;min-height:52px !important;height:auto !important;
    padding:14px 16px !important}
  /* Must repeat the full (0,4,0) chain used at ~line 548. A shorter selector
     loses to it even with !important, which is why the labels stayed at
     .76rem = 12.16px on iPad Pro 11 landscape. */
  .cta-form .wpforms-container .wpforms-form .wpforms-field-label,
  .contact-form-col .wpforms-container .wpforms-form .wpforms-field-label{font-size:14px !important;line-height:1.4 !important}
  .wpforms-container .wpforms-form .wpforms-required-label{font-size:14px !important}
  .faq-q{font-size:1.08rem}
  /* Recurring touch floors (tpa-validate Check 18). iPad Pro 11 landscape is
     1194x834 — a touch device that clears BOTH the 860px and the max-height:500px
     gates, so the desktop header phone link renders there at its 9.3px eyebrow.
     No `display` here on purpose: .nav-phone is display:none under 860px and a
     display value in this block would resurrect it on phones. */
  .nav-phone{min-height:44px}
  .nav-phone .np-txt small{font-size:14px !important;letter-spacing:.1em}
  .nav-phone .np-txt b{font-size:16px !important}
  button{font-size:14px}
  /* Section eyebrows ship at .74rem = 11.84px. Desktop fine print is allowed;
     on a touch device it has to clear the 14px floor. Trim the tracking so the
     bigger type doesn't push the label onto a second line. */
  .kicker{font-size:14px !important;letter-spacing:.24em}
  /* Desktop nav on a TOUCH tablet: iPad Pro 11 landscape is 1194px wide, so it
     never reaches the 860px drawer breakpoint and taps these 40px-tall links.
     height (not min-height) — the base rule sets an explicit height:40px. */
  .nav-links > li > a{height:44px}
  /* The burger is 39x29 from its bar geometry alone. align-items keeps the bars
     centred once the box grows; no `display` here — that would resurrect it on
     desktop, where the base rule hides it. */
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  /* Two-column services split labels — .74rem eyebrows, same story as .kicker. */
  .svc-domain-label{font-size:14px !important;letter-spacing:.2em}
  /* Desktop nav labels are .72rem = 11.52px. A touch tablet renders this nav
     (see the height fix above), so the labels have to clear the floor too. The
     drawer rule is more specific and keeps its own size. */
  .nav-links > li > a{font-size:14px !important;letter-spacing:.1em}
}

/* Legal pages: never fade in */
body.page-privacy-policy .reveal,body.page-privacy-policy .fade-in,
body.page-terms-and-conditions .reveal,body.page-terms-and-conditions .fade-in,
body.page-terms-conditions .reveal,body.page-terms-conditions .fade-in{
  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);
  }
}