/* ============================================================
   EMBER AND INSIGHT COUNSELING — Version B "Golden Hour"
   Sarah Gale, LAC · Gilbert, Arizona
   Depth is the design language: fixed image planes, a horizon
   seam, and a ground that warms as you descend.
   ============================================================ */
:root{
  --sage:#5E7A5C;
  --sage-dark:#45573F;
  --sage-deep:#1F2A20;
  --sage-tint:#E4E8DF;
  --sand:#8C7A5E;
  --sand-tint:#EAE3D6;
  --rust:#9E6240;
  --rust-dark:#7E4B30;
  --rust-tint:#EFDDD2;
  /* accessible text variants — measured by compositing, not eyedropped.
     Her supplied #8C7A5E and #9E6240 FAIL AA as small text on every light
     ground in this palette (3.25–4.40:1). These are the text-safe siblings. */
  --sand-ink:#6E5F45;      /* 5.65:1 on bg, 4.94:1 on the tint bands */
  --rust-ink:#7E4B30;      /* 6.43:1 on bg, 5.6:1 on sand-tint */
  --ember-lt:#C98A63;      /* 5.58:1 on loam — the ember on dark grounds */
  --btn-hover:#4C6446;     /* every CTA wipes rust → this. 6.36:1 */
  --plate-hover:#F5EDE2;
  --bg:#F2F3EE;
  --paper:#FBFAF6;
  --loam:#252218;
  --loam-2:#312C21;
  --loam-soft:#3A352A;
  --ink-mute:#5C564A;
  --on-dark:#EFEDE5;
  --on-sage:#DADDD6;

  --footer-bg:#FBFAF6;      /* paper — the footer carries the client lockup */
  --footer-text:#5C564A;    /* 6.97:1 on it */

  --font-h:"Lustria",Georgia,serif;
  --font-b:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --sec:62px;
  --hdr-h:82px;

  /* inner-page rhythm — declared ONCE, between siblings (see .svc-block) */
  --sec-gap:clamp(46px,7vw,84px);
  --tale-pad:clamp(40px,5vw,58px);
  /* what two stacked bands put between their text: 58 + 42 = 100px at 1440 */
  --band-gap:calc(clamp(40px,5vw,58px) + var(--sec-gap)/2);
  --service-body-max:1080px;
  --read-measure:720px;   /* the centred prose column inside it */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* clip, not hidden: stops the iOS phantom-scroll leak without breaking
   position:sticky/fixed. Required by validator Check 15. */
html,body{overflow-x:clip}
body{
  margin:0;padding-bottom:0;background:var(--bg);color:var(--loam);
  font:400 18px/1.75 var(--font-b);-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url('../images/noise.svg')
}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.014em}
h1{line-height:1.0}
h2,h3{line-height:1.1}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto;position:relative;z-index:2}
.narrow{width:min(100% - 44px,720px);margin-inline:auto;position:relative;z-index:2}
/* Rule #4 — every inner page template relies on this */
.container{width:min(100% - 44px,var(--wrap));margin-inline:auto;position:relative;z-index:2}
.sr,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--loam);color:var(--on-dark);padding:12px 18px}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--rust-ink);outline-offset:3px}
.hero :focus-visible,.letter :focus-visible,.win :focus-visible{outline-color:var(--ember-lt)}
/* header is a paper ground now — ember-lt measures 2.75:1 there, under the 3:1 a
   focus ring needs. rust-ink is 6.85:1. */
.hdr :focus-visible,.ftr :focus-visible{outline-color:var(--rust-ink)}

/* ---------- buttons: architectural rectangle. NO translateY ---------- */
/* hover wipes rust → deep sage: a hue shift between her two brand colours,
   not a darken. No vertical hop, no letter-spacing motion. 6.36:1. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;font:600 .93rem/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;
  padding:18px 32px 17px;border-radius:0;text-decoration:none;cursor:pointer;border:0;
  background:var(--rust);color:#FDFBF7;
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .35s ease,color .3s
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-hover);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.btn:hover,.btn:focus-visible{box-shadow:inset 0 0 0 1px rgba(253,251,247,.45)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn--line{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(239,237,229,.45)}
.btn--line:hover,.btn--line:focus-visible{color:#FDFBF7;box-shadow:inset 0 0 0 1px var(--btn-hover)}
.btn--line-d{background:transparent;color:var(--loam);box-shadow:inset 0 0 0 1px rgba(37,34,24,.32)}
.btn--line-d:hover{background:rgba(37,34,24,.06);box-shadow:inset 0 0 0 1px var(--loam)}
.tlink{
  display:inline-block;font:600 .9rem/1.4 var(--font-b);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--rust-ink);padding-bottom:4px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .34s cubic-bezier(.22,1,.36,1),color .25s
}
.tlink:hover{background-size:100% 2px;color:var(--loam)}
.tlink--l{color:var(--on-dark)}
.tlink--l:hover{color:#fff}

/* ============================ HEADER (paper ground — carries the client lockup) ============================ */
/* Client supplied her own PNG lockup and asked for it to be used as-is. Its
   wordmark is #3E0A16, which measured 1.05:1 against the previous loam bar —
   invisible. She chose to keep the artwork untouched and adapt the header, so
   the ground is paper and every ink in here was re-toned against #FBFAF6:
   loam 15.2:1, rust-ink 6.85:1, rust brackets 4.7:1. The typographic wordmark
   still runs in the footer and the LP, which are dark grounds the maroon
   artwork cannot sit on. */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr-h);display:flex;align-items:center;
  background:var(--paper);box-shadow:0 1px 0 rgba(37,34,24,.13);
  transition:height .34s cubic-bezier(.22,1,.36,1)}
.hdr.shrink{height:68px}
.hdr__in{width:min(100% - 34px,1320px);margin-inline:auto;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none;line-height:1;flex:0 0 auto;min-width:0}
/* Height-pinned, width free. `max-width:none` is deliberate — the global
   img{max-width:100%} otherwise wins at narrow widths and squashes a
   height-pinned wordmark rather than scaling it. */
/* Sized to fill the bar rather than float in it: 66px inside the 82px header
   leaves 8px of air top and bottom. The nav links are the tallest thing in
   here (~75px from their 29px padding), so this never drives the height. */
.brand__logo{display:block;flex:0 0 auto}
.brand__logo img{display:block;height:66px;width:auto;max-width:none;
  transition:height .34s cubic-bezier(.22,1,.36,1)}
.hdr.shrink .brand__logo img{height:56px}

/* --- primary nav. Classes are the walker's (.nav-links / .dropdown /
       .dropdown-menu / .dropdown-toggle), wearing the mockup's treatment. --- */
.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1.6vw,1.5rem);
  flex:1 1 auto;margin:0;padding:0;list-style:none}
.nav-links>li{position:relative;list-style:none}
/* dropdown indicator lives on the LI, freeing the anchor's pseudo-elements for
   the nav's own bracket treatment. */
.nav-links .dropdown{padding-right:15px}
.nav-links .dropdown::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;margin-top:-3px;
  border-right:1px solid var(--rust);border-bottom:1px solid var(--rust);
  transform:rotate(45deg);opacity:.65;transition:opacity .3s}
.nav-links .dropdown:hover::after{opacity:1}
.nav-links>li>a{display:block;padding:29px 11px;text-decoration:none;color:var(--loam);position:relative;
  font:400 1.05rem/1 var(--font-h);letter-spacing:.005em;text-transform:none;
  transition:color .32s,padding .34s cubic-bezier(.22,1,.36,1)}
.hdr.shrink .nav-links>li>a{padding:22px 11px}
/* serif index wearing the bracket hover */
.nav-links>li>a::before,.nav-links>li>a::after{position:absolute;top:50%;color:var(--rust);
  font:400 1.3rem/1 var(--font-h);opacity:0;
  transition:opacity .3s,transform .42s cubic-bezier(.22,1,.36,1)}
.nav-links>li>a::before{content:"[";left:0;transform:translate(7px,-50%)}
.nav-links>li>a::after{content:"]";right:0;transform:translate(-7px,-50%)}
.nav-links>li>a:hover,.nav-links>li:hover>a{color:var(--rust-ink)}
.nav-links>li>a:hover::before,.nav-links>li:hover>a::before,
.nav-links>li>a:hover::after,.nav-links>li:hover>a::after{opacity:1;transform:translate(0,-50%)}
/* the two dropdown parents point at "#" — never clickable, hover still opens */
.nav-links .dropdown>a{cursor:default;pointer-events:none}

.nav-links .dropdown-menu{position:absolute;top:100%;left:-14px;min-width:344px;margin:0;padding:9px 0;list-style:none;
  background:var(--paper);border:1px solid var(--rust-tint);box-shadow:0 26px 60px -34px rgba(37,34,24,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s,transform .26s,visibility .26s}
.nav-links .dropdown-menu li{list-style:none;margin:0;padding:0}
.nav-links .dropdown:hover .dropdown-menu,.nav-links .dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:none}
/* submenu echoes the primary nav: same serif, same brackets sliding in.
   Brackets are flex items so the space is reserved and nothing shifts on hover. */
.nav-links .dropdown-menu a{display:flex;align-items:baseline;padding:9px 20px;text-decoration:none;color:var(--loam);
  font:400 1rem/1.4 var(--font-h);letter-spacing:.005em;transition:color .3s}
.nav-links .dropdown-menu a::before,.nav-links .dropdown-menu a::after{flex:0 0 auto;font:400 1.06rem/1 var(--font-h);color:var(--rust);
  opacity:0;transition:opacity .28s,transform .4s cubic-bezier(.22,1,.36,1)}
.nav-links .dropdown-menu a::before{content:"[";margin-right:.4em;transform:translateX(6px)}
.nav-links .dropdown-menu a::after{content:"]";margin-left:.4em;transform:translateX(-6px)}
.nav-links .dropdown-menu a:hover,.nav-links .dropdown-menu a:focus-visible{color:var(--rust-ink)}
.nav-links .dropdown-menu a:hover::before,.nav-links .dropdown-menu a:focus-visible::before,
.nav-links .dropdown-menu a:hover::after,.nav-links .dropdown-menu a:focus-visible::after{opacity:1;transform:none}
/* hidden nav item — Matt flips this on once he's happy with the blog design */
.nav-links>li.nav-hidden,.drawer li.nav-hidden{display:none}

.hdr__end{display:flex;align-items:center;gap:16px;flex:0 0 auto;margin-left:auto}
/* One bordered unit rather than two loose bars: the ask is filled, the phone is
   outlined. The same rust rule carries the outside edge and the divide. */
.hdr__dual{display:flex;flex-direction:column;flex:0 0 auto;border:1px solid var(--rust)}
.hdr__dual a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;
  padding:0 24px;transition:background .28s,color .28s,height .34s cubic-bezier(.22,1,.36,1)}
.hdr__dual-t{height:33px;background:var(--rust);color:#FDFBF7;
  font:800 .7rem/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase}
.hdr__dual-t:hover,.hdr__dual-t:focus-visible{background:var(--btn-hover)}
.hdr__dual-b{height:32px;background:transparent;color:var(--rust-ink);
  font:600 .84rem/1 var(--font-b);letter-spacing:.02em;border-top:1px solid var(--rust)}
.hdr__dual-b:hover,.hdr__dual-b:focus-visible{background:var(--btn-hover);color:#FDFBF7}
.hdr__dual-b svg{width:12px;height:12px;fill:currentColor;flex:0 0 auto}
.hdr.shrink .hdr__dual-t{height:27px}
.hdr.shrink .hdr__dual-b{height:26px}
.burger,.mobile-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-shrink:0;margin-left:auto}
.burger span{display:block;width:23px;height:1.5px;background:var(--loam);position:relative;flex-shrink:0}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:23px;height:1.5px;background:inherit}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* --- mobile drawer --- */
/* full width, per Matt: a 400px panel on a 390px phone left a useless sliver
   of scrim down one edge. Matches the landing page's drawer. */
.drawer{position:fixed;inset:0;width:100%;z-index:80;background:var(--loam);color:var(--on-dark);
  padding:22px 26px 40px;overflow-y:auto;transform:translateX(102%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  height:100vh;height:100dvh}
.drawer.is-open{transform:none}
.scrim{position:fixed;inset:0;z-index:79;background:rgba(20,18,13,.55);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.on{opacity:1;visibility:visible}
.drawer__top{display:flex;justify-content:flex-end;margin-bottom:10px}
.drawer__x{width:44px;height:44px;border:0;background:transparent;font-size:26px;line-height:1;color:var(--on-dark);cursor:pointer;
  transition:transform .25s ease}
.drawer__x:hover{transform:rotate(90deg)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer>ul>li{border-bottom:1px solid rgba(239,237,229,.14)}
.drawer>ul>li>a,.drawer .dtog{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 2px;text-decoration:none;color:var(--on-dark);font:600 .95rem/1.3 var(--font-b);
  letter-spacing:.08em;text-transform:uppercase;background:none;border:0;text-align:left;cursor:pointer}
.drawer .dsub{display:none;padding:0 0 12px 10px}
.drawer .dsub.is-open{display:block}
.drawer .dsub a{display:block;padding:9px 0;text-decoration:none;color:rgba(239,237,229,.78);font-size:.95rem;text-transform:none;letter-spacing:0}
.drawer__foot{margin-top:26px;display:grid;gap:12px}
/* the ask stays on ONE line: at the base .93rem/.09em it broke across two in a
   full-width drawer, which reads as two separate buttons at a glance */
.drawer__foot .btn{text-align:center;width:100%;font-size:.8rem;letter-spacing:.05em;
  padding-left:16px;padding-right:16px;white-space:nowrap}
/* phone is a button too — it was a quiet text line under a filled button, so it
   read as a caption rather than the second way to reach her */
.drawer__tel{text-decoration:none;color:var(--on-dark);font:600 1.18rem/1 var(--font-b);
  display:block;text-align:center;padding:15px 12px;border:1px solid var(--rust);
  transition:background .28s,color .28s}
.drawer__tel:hover,.drawer__tel:focus-visible{background:var(--btn-hover);color:#FDFBF7}

/* Submenus start COLLAPSED. The dual-selector block below only resets list
   styling, so .sub-menu/.dropdown-menu had no display rule and every child of
   Services and Specialties was expanded the moment the drawer opened. */
.drawer .sub-menu,
.drawer .dropdown-menu{display:none}
/* Now that they start closed, the parent rows need to LOOK openable. Chevron
   points down when closed, flips up when the accordion reports expanded. */
.drawer .menu-item-has-children > a::after,
.drawer .dtog span{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;
  border-right:1.5px solid var(--ember-lt);border-bottom:1.5px solid var(--ember-lt);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s;flex:0 0 auto}
.drawer .menu-item-has-children > a[aria-expanded="true"]::after,
.drawer .dtog[aria-expanded="true"] span{transform:rotate(-135deg) translateY(-3px)}
.drawer .sub-menu.is-open,
.drawer .dropdown-menu.is-open{display:block}

/* MOBILE DRAWER SUBMENU — DUAL-SELECTOR REQUIRED (validator Check 17).
   The drawer's submenu <ul> carries .sub-menu with the default walker and
   .dropdown-menu with TPA_Nav_Walker. Walker choice has flipped site-by-site
   historically, so always target both. */
.drawer .dsub,
.drawer .sub-menu,
.drawer .dropdown-menu,
.mobile-nav-links,
.mobile-nav-links ul,
.mobile-nav-links .sub-menu,
.mobile-nav-links .dropdown-menu{list-style:none !important;padding-left:10px;margin:0}
.drawer .sub-menu li,
.drawer .dropdown-menu li,
.mobile-nav-links li,
.mobile-nav-links .sub-menu li,
.mobile-nav-links .dropdown-menu li{list-style:none !important}
.drawer .sub-menu a,
.drawer .dropdown-menu a,
.mobile-nav-links .sub-menu a,
.mobile-nav-links .dropdown-menu a{display:block;padding:9px 0;text-decoration:none;
  color:rgba(239,237,229,.78);font-size:.95rem;text-transform:none;letter-spacing:0}

/* ============================ HERO — the placard on the desert ============================ */
.hero{--plinth:32px;background:var(--loam);padding-top:var(--hdr-h);padding-bottom:var(--plinth);
  position:relative;overflow:hidden;isolation:isolate}
/* The photograph stops short of the section edge, leaving a band of the placard's
   own ground. The hero closes on the colour it opened on, and the two
   photographs never abut. */
.sky{position:absolute;left:0;right:0;top:var(--hdr-h);bottom:var(--plinth);z-index:0;overflow:hidden}
.sky img,.sky picture{width:100%;height:100%;display:block}
.sky img{object-fit:cover;object-position:54% 54%;transform:scale(1.08);
  animation:settle 3.4s cubic-bezier(.16,1,.3,1) .1s forwards,
            drift 38s ease-in-out 3.6s infinite alternate}
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,13,.20) 0%,rgba(20,18,13,.04) 32%,rgba(20,18,13,.30) 100%)}
@keyframes settle{to{transform:scale(1.02)}}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.10) translate3d(-1.5%,-1.1%,0)}}
.hero__in{position:relative;z-index:3;padding:44px 0 46px}
/* Placard spacing is VIEWPORT-RELATIVE by design — clamp(min,Nvh,max) makes the
   hero run 862px on a small laptop up to 1024px on a 27". Tuned against real
   screen sizes; porting these to fixed px loses it. */
.slab{
  max-width:772px;position:relative;
  background:var(--loam);border:1px solid var(--rust);
  padding:clamp(44px,6.8vh,104px) clamp(24px,3.4vw,54px) clamp(46px,7vh,108px);
  box-shadow:0 48px 100px -55px rgba(0,0,0,.95)
}
.hero__h{color:var(--on-dark);font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1.04;letter-spacing:-.022em;max-width:17ch}
.hero__h .l2{display:block;color:var(--rust);font-style:italic}
.hero__sub{color:#D8D5C9;font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.55;max-width:52ch;margin:clamp(22px,3.8vh,54px) 0 0;font-family:var(--font-h)}
/* The specialisms are a declaration, not a second sentence. Differentiate by type
   CLASS, not weight: sans instead of serif, uppercase, tracked, pale ember.
   10.3:1 on loam. */
.hero__spec{
  margin:clamp(17px,2.8vh,38px) 0 0;font-family:var(--font-b);
  font-size:clamp(.95rem,1.18vw,1.08rem);font-weight:600;line-height:1.45;
  letter-spacing:.1em;text-transform:uppercase;color:#E8C9AE
}
.hero__foot{margin-top:clamp(30px,4.8vh,66px);display:grid;grid-template-columns:max-content;justify-content:start}
/* Location gets its own card on the photograph — out of the placard, so it stops
   competing with the deck and stops driving the placard's grid measure. */
.geo-card{
  position:absolute;right:0;bottom:22px;z-index:4;width:min(382px,40%);
  background:var(--paper);border:1px solid var(--rust);color:var(--loam);padding:15px 20px 16px 46px;
  box-shadow:12px 12px 0 0 var(--rust), 0 30px 62px -34px rgba(0,0,0,.9)
}
.geo-card p{font-family:var(--font-h);font-size:1.1rem;line-height:1.38;margin:0;text-wrap:balance}
/* pin tucked into the card's top-left corner, in its own gutter — never in the text */
.geo-card .pin{position:absolute;left:17px;top:19px;width:15px;height:15px;fill:var(--rust)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta .btn{padding-left:clamp(30px,3.1vw,46px);padding-right:clamp(30px,3.1vw,46px)}
.hero__offer{
  margin-top:clamp(24px,3.8vh,52px);padding-top:clamp(22px,3.2vh,42px);border-top:1px solid rgba(239,237,229,.22)
}
.hero__offer ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;list-style:none;margin:0;padding:0}
/* persistent ember rule = the affordance. Never hover-to-discover. */
.hero__offer a{
  display:inline-block;font-family:var(--font-h);font-size:clamp(1.22rem,1.55vw,1.48rem);
  line-height:1.3;color:var(--on-dark);text-decoration:none;padding-bottom:7px;
  background-image:linear-gradient(var(--ember-lt),var(--ember-lt));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s cubic-bezier(.22,1,.36,1),color .25s
}
.hero__offer a::after{
  content:"\2192";margin-left:.42em;font-family:var(--font-b);font-size:.78em;
  color:var(--ember-lt);opacity:0;transform:translateX(-5px);display:inline-block;
  transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1)
}
.hero__offer a:hover,.hero__offer a:focus-visible{background-size:100% 2px;color:#E3AE88}
.hero__offer a:hover::after,.hero__offer a:focus-visible::after{opacity:1;transform:none}

/* ============================ VIGNETTES — five windows ============================ */
/* Backgrounds are lazy-loaded via .bg-loaded so they don't compete with the hero
   for bandwidth during the LCP window. NEVER add the hero to that observer. */
/* Client feedback 08-19: every section subheadline comes off its photograph
   (the hero headline is the one deliberate exception). So the band is its own
   element carrying the picture, and the headline sits beneath it on the page
   ground. The scrim and the cream plate existed only to make type legible over
   a photo and go with it, as does the L/R/L/R/C plate walk — that positioned
   the plate ACROSS the band, and there is no plate to walk. */
.win{display:block;position:relative;padding:0;min-height:0;background:var(--bg)}
/* The headline now lives BELOW the band, and the .tale beneath it carries a
   tinted ground. Without matching that ground here, a strip of body colour
   appears between a heading and its own first paragraph. The template already
   computes the ground cycle for the tale, so the win just wears it too. */
.win--gb{background:var(--sand-tint)}
.win--gc{background:var(--sage-tint)}
.win__ph{display:block;width:100%;height:clamp(300px,46vh,420px);
  background:var(--sand-tint) 50% 45%/cover no-repeat fixed}
/* the headline takes the same 720px measure as .narrow, the prose column of
   the .tale directly beneath it, so the pair reads as one section */
.win .wrap{display:flow-root;width:min(100% - 44px,720px);padding-top:clamp(28px,3.4vw,44px)}
.win--1.bg-loaded .win__ph{background-image:image-set(url('../images/front-body1-wm.webp') type('image/webp'),url('../images/front-body1-wm.jpg') type('image/jpeg'))}
.win--2.bg-loaded .win__ph{background-image:image-set(url('../images/front-body2-wm.webp') type('image/webp'),url('../images/front-body2-wm.jpg') type('image/jpeg'))}
.win--3.bg-loaded .win__ph{background-image:image-set(url('../images/front-body3-wm.webp') type('image/webp'),url('../images/front-body3-wm.jpg') type('image/jpeg'))}
.win--4.bg-loaded .win__ph{background-image:image-set(url('../images/front-body4-wm.webp') type('image/webp'),url('../images/front-body4-wm.jpg') type('image/jpeg'))}
.win--5.bg-loaded .win__ph{background-image:image-set(url('../images/front-body5-wm.webp') type('image/webp'),url('../images/front-body5-wm.jpg') type('image/jpeg'))}
.win__plate{background:none;border:0;padding:0;max-width:none;position:relative;z-index:2;box-shadow:none}
.win__h{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;margin:0 0 .62em}
/* band + headline + prose are one unit: the tale supplies no top gap of its
   own, the headline's .62em does the whole job */
.win + .tale{padding-top:0}
.win__h .when{display:block;font-style:italic;color:var(--sand-ink);font-size:1.5em;line-height:.98;margin-bottom:4px;letter-spacing:-.02em}

.tale{padding:48px 0 50px}
.tale--a{background:var(--bg)}
.tale--b{background:var(--sand-tint)}
.tale--c{background:var(--sage-tint)}
.tale p{font-size:1.04rem;line-height:1.82;color:var(--loam-soft);max-width:66ch}
.tale p:first-child::first-letter{
  font-family:var(--font-h);font-size:3.05em;line-height:.82;float:left;
  padding:.06em .1em 0 0;color:var(--rust)
}

/* ============================ BRIDGE — the opening ============================ */
.breath{height:clamp(200px,32vh,340px);background:var(--bg);
  background-size:cover;background-position:50% 50%;background-attachment:fixed;background-repeat:no-repeat}
.breath.bg-loaded{background-image:image-set(url('../images/front-bridge-wm.webp') type('image/webp'),url('../images/front-bridge-wm.jpg') type('image/jpeg'))}
/* Renamed from a bare `.open`: that generic word is also the drawer's and the
   FAQ's state class, so an open mobile drawer inherited this band's cream
   background and its 58px padding — white drawer text on a cream ground. */
.opening{background:var(--bg);padding:58px 0 66px}
.opening__h{font-size:clamp(2rem,4.4vw,3.35rem);margin-bottom:30px;max-width:16ch}
.opening__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,72px);align-items:start}
.opening__prose p{font-size:1.03rem;line-height:1.82;color:var(--loam-soft);max-width:60ch}
/* Three lines, three jobs: the promise, the step, the invitation. The gaps are
   fixed px rather than em so the rhythm doesn't shrink as the type shrinks, and
   they OPEN as you descend — the page takes its deepest breath before the ask. */
.opening__land{padding-top:8px}
.opening__land p{font-family:var(--font-h);color:var(--loam);max-width:24ch;margin:0}
.opening__land p:nth-child(1){font-size:clamp(1.5rem,3vw,2.24rem);line-height:1.22}
.opening__land p:nth-child(2){font-size:clamp(1.14rem,1.9vw,1.44rem);line-height:1.45;color:var(--sand-ink);
  margin-top:27px;max-width:28ch}
.opening__land p:nth-child(3){font-size:clamp(1.62rem,3.4vw,2.5rem);font-style:italic;color:var(--rust);
  line-height:1.1;margin-top:42px}
.opening__cta{margin-top:39px}

/* ============================ BIO — Banner Greeting ============================ */
.letter{background:var(--sage-dark);padding:66px 0 72px;color:var(--on-sage);position:relative;overflow:hidden}
/* greeting and subhead share a row, bottoms aligned */
.bn__top{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3.6vw,58px);align-items:end;margin-bottom:40px}
.letter .bn__hi{font-family:var(--font-h);font-style:italic;color:#F0D9C6;
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.96;letter-spacing:-.025em;margin:0}
.bn__h{color:var(--on-dark);font-size:clamp(1.35rem,2.2vw,1.86rem);line-height:1.22;margin:0 0 .18em;
  max-width:20ch;justify-self:end;text-align:right}
/* 352px cap = 1.1x the 320px headshot source. Never widen without a bigger original. */
.bn{display:grid;grid-template-columns:352px 1fr;gap:clamp(34px,4.4vw,62px);align-items:start}
.bn__fig{margin:0;position:relative}
.bn__fig img{width:100%;height:auto;aspect-ratio:320/400;object-fit:cover;object-position:50% 18%}
.bn__card{position:relative;margin:-56px 0 0 34px;background:var(--paper);color:var(--loam);
  padding:16px 20px 18px;box-shadow:10px 10px 0 0 var(--rust)}
.letter .bn__who{font-family:var(--font-h);font-size:1.2rem;line-height:1.25;color:var(--loam);margin:0 0 3px}
.letter .bn__cred{font:600 .7rem/1.5 var(--font-b);letter-spacing:.15em;text-transform:uppercase;color:var(--sand-ink);margin:0}
.bn p{font-size:1.05rem;line-height:1.88;color:var(--on-sage);margin-bottom:1.42em}
.bn__foot{margin-top:30px;padding-top:24px;border-top:1px solid rgba(239,237,229,.24)}

/* ============================ SERVICES ============================ */
.spread{background:var(--bg);padding:var(--sec) 0 calc(var(--sec) + 6px)}
.spread__h{font-size:clamp(1.9rem,3.5vw,2.75rem);margin-bottom:34px;max-width:18ch}
.spread__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:stretch}
.stack{display:grid;grid-template-rows:1fr 1fr;gap:20px}
/* whole card is the link — no repeated "Learn more" doing the work */
.sv{position:relative;display:block;overflow:hidden;text-decoration:none;color:inherit;isolation:isolate}
.sv__n{position:relative;display:inline-block;font-family:var(--font-h);line-height:1.14;
  letter-spacing:-.018em;margin:0;padding-bottom:7px;color:var(--loam);
  transition:color .4s cubic-bezier(.22,1,.36,1),letter-spacing .5s cubic-bezier(.22,1,.36,1)}
.sv__n::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--rust-ink);
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.sv:hover .sv__n{color:var(--rust-ink);letter-spacing:-.006em}
.sv:hover .sv__n::before{width:100%}
.sv__l{line-height:1.55;margin:7px 0 0}

/* the client's botanical illustrations, on palette grounds — same card
   architecture, same hover system, art instead of photography */
.sv--feat{min-height:496px;background:var(--sand-tint)}
.sv--mini{min-height:238px}
.stack .sv--mini:nth-child(1){background:var(--sage-tint)}
.stack .sv--mini:nth-child(2){background:var(--rust-tint)}
.sv__ph{position:absolute;z-index:0;display:block;pointer-events:none;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
/* a <span> figure inside an <a> is inline by default and collapses to 0px —
   the img must be given the box explicitly. */
.sv__ph img{width:100%;height:auto;display:block}
.sv--feat .sv__ph{width:min(58%,352px);right:-24px;top:-20px}
.sv--mini .sv__ph{width:min(40%,190px);right:-16px;top:50%;transform:translateY(-50%)}
.sv--feat:hover .sv__ph{transform:rotate(-3deg) scale(1.05)}
.sv--mini:hover .sv__ph{transform:translateY(-50%) rotate(-3deg) scale(1.05)}

.sv__plate{position:absolute;z-index:2;background:var(--paper);color:var(--loam);
  box-shadow:11px 11px 0 0 var(--rust);
  transition:box-shadow .55s cubic-bezier(.22,1,.36,1),background .45s}
/* lighter than all three card grounds, so the placard always separates */
.sv:hover .sv__plate{background:var(--plate-hover);box-shadow:17px 17px 0 0 var(--rust)}
.sv--feat .sv__plate{left:30px;bottom:34px;max-width:74%;padding:21px 26px 23px}
.sv--feat .sv__n{font-size:clamp(1.55rem,2.5vw,2.05rem)}
.sv--feat .sv__l{font-size:1.02rem;color:var(--loam-soft);max-width:28ch}
.sv--mini .sv__plate{left:22px;bottom:24px;max-width:64%;padding:15px 19px 16px}
.sv--mini .sv__n{font-size:1.24rem}
.sv--mini .sv__l{font-size:.93rem;color:var(--loam-soft);max-width:26ch}

/* ============================ FINAL CTA — the wide card ============================ */
.close{
  padding:var(--sec) 0;
  background-color:var(--sand-tint);
  background-size:cover;background-position:50% 50%
}
.close.bg-loaded{
  background-image:linear-gradient(rgba(251,247,241,.74),rgba(251,247,241,.74)),
    image-set(url('../images/front-cta-wm.webp') type('image/webp'),url('../images/front-cta-wm.jpg') type('image/jpeg'))
}
.close__card{background:var(--paper);padding:44px clamp(24px,3.4vw,52px) 44px;box-shadow:0 40px 90px -55px rgba(37,34,24,.75)}
/* Approved Version B mockup: the ask runs across the top over a hairline rule,
   then the form and the contact cards sit side by side beneath it. Keeping the
   form in its own column is the point — full width, its fields stretch to a
   measure no one wants to type into. */
.close__head{max-width:64ch;padding-bottom:30px;margin-bottom:34px;
  border-bottom:1px solid rgba(37,34,24,.14)}
.close__body{display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(30px,4vw,62px);
  align-items:start}
.close__h{font-size:clamp(1.9rem,3.5vw,2.75rem);margin-bottom:18px}
.close__b p{font-size:1.02rem;line-height:1.76;color:var(--loam-soft)}
/* start, not stretch: the three cards hug the top of their column and keep
   their own height rather than growing to match the taller form beside them */
.close__contact{display:grid;gap:18px;align-content:start}
.cline{position:relative;margin:0;padding:17px 44px 18px 19px;transition:box-shadow .45s cubic-bezier(.22,1,.36,1)}
.cline:nth-child(1){background:var(--sage-tint)}
.cline:nth-child(2){background:var(--sand-tint)}
.cline:nth-child(3){background:var(--rust-tint)}
.cline:hover{box-shadow:7px 7px 0 0 var(--rust)}
.cline__ico{position:absolute;right:16px;top:17px;width:15px;height:15px;fill:var(--rust);opacity:.45;
  transition:opacity .4s,transform .55s cubic-bezier(.22,1,.36,1)}
.cline:hover .cline__ico{opacity:1;transform:scale(1.1)}
.cline b{display:block;margin-bottom:6px;font:600 .7rem/1.6 var(--font-b);letter-spacing:.17em;text-transform:uppercase;color:var(--sand-ink)}
/* inline-block, so the rule is the width of the TEXT and never the width of the card */
.cline a,.cline span{display:inline-block;color:var(--loam);font-size:1.04rem;line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
.cline a{padding-bottom:2px;background-image:linear-gradient(var(--rust-ink),var(--rust-ink));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s cubic-bezier(.22,1,.36,1),color .3s}
.cline:hover a,.cline a:focus-visible{background-size:100% 1px;color:var(--rust-ink)}
/* reassurance under the submit — centred and quiet, but never below the 14px
   touch floor (the touch block bumps it back up) */
.close__note{font-size:.83rem;line-height:1.5;color:var(--ink-mute);margin:13px 0 0;text-align:center}
/* WPForms puts its own margin under the submit; the note sits after the whole
   container, so that margin is most of the gap. */
.contact-card .wpforms-submit-container,
.close__form .wpforms-submit-container{margin-bottom:0}
/* Field PLACEMENT only — all form STYLING still comes from the parent's
   fleet-wide token hook. This restores the mockup's two-column field layout now
   that the form spans the full card. Scoped to .close__form, so the Contact
   page's narrow single column is untouched. */
.close__form .wpforms-container{margin:0}
.close__form .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.close__form .wpforms-field{margin-left:0;margin-right:0}
.close__form .wpforms-field-name{grid-column:1}
.close__form .wpforms-field-email{grid-column:2}
.close__form .wpforms-field-text,
.close__form .wpforms-field-textarea{grid-column:1/-1}
/* full width of the FORM COLUMN, as the mockup has it — that column is ~600px,
   not the whole card, so this is a button rather than a banner */
.close__form .wpforms-submit{width:100%}
/* editor-only notice when no form is configured. Never a fake <form>. */
.form-missing{background:var(--rust-tint);border:1px solid var(--rust);padding:18px 20px;font-size:.95rem;color:var(--loam)}

/* ============================ FOOTER ============================ */
/* Paper ground, bookending the header, so the client's maroon lockup can run
   here too — it measures 1.05:1 on the old deep sage. Every ink below is a
   MEASURED SOLID against #FBFAF6, not an rgba alpha: the old alphas were
   tuned for a dark ground and several of them (the .52 disclosure especially)
   land under AA once the ground is light. */
.ftr{background:var(--footer-bg);color:var(--footer-text);padding:44px 0 26px;
  border-top:1px solid rgba(37,34,24,.10)}
.ftr__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(37,34,24,.16)}
.ftr__brand{margin:0;line-height:0;display:inline-block}
.ftr__logo{display:block}
/* height-pinned like the header lockup; max-width:none keeps the global
   img{max-width:100%} from squashing it instead of scaling it */
.ftr__logo img{display:block;height:56px;width:auto;max-width:none}

.ftr__right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.soc{display:flex;gap:11px}
.soc a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--sand);color:var(--rust-ink);transition:background .25s,color .25s,border-color .25s}
.soc a:hover{background:var(--rust);border-color:var(--rust);color:#FDFBF7}
.soc svg{width:15px;height:15px;fill:currentColor}
/* PT is an icon tile matching the socials, not a text badge */
.soc .pt{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--sand);
  color:var(--rust-ink);text-decoration:none;
  font-family:var(--font-h);font-size:.86rem;letter-spacing:.01em;line-height:1;
  transition:background .25s,color .25s,border-color .25s}
.soc .pt:hover,.soc .pt:focus-visible{background:var(--rust);border-color:var(--rust);color:#FDFBF7}
.ftr__bot{padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px}
.ftr__legal{display:flex;gap:20px}
.ftr__legal a{color:var(--rust-ink);font-size:.82rem;text-decoration:none;transition:color .25s}   /* 6.85:1 */
.ftr__legal a:hover{color:var(--loam)}
.ftr__cp{font-size:.82rem;color:var(--ink-mute);margin:0}                                          /* 6.97:1 */
/* A.A.C. R4-6-217 — legally required on every page, verbatim, never behind a link.
   It is the smallest type on the site, so it gets a full-strength ink. */
.ftr__sup{margin:18px 0 0;font-size:.755rem;line-height:1.65;color:var(--ink-mute);max-width:104ch}
.ftr__sup a{color:var(--rust-ink)}
.ftr__sup a[href^="tel:"],.ftr__sup a[href^="mailto:"]{text-decoration:none}

/* ============================ INNER PAGES ============================ */
/* Hero: the homepage placard language, at inner-page scale. height:clamp()
   rather than aspect-ratio + max-height — the latter has a WebKit bug where the
   container's WIDTH collapses to preserve the ratio when max-height clamps. */
/* The title sits BELOW the photograph (client feedback 08-19: no type over
   images on inner pages). Three consequences, all deliberate:
     - the section is auto-height now and the BAND carries the clamp;
     - the gradient scrim existed only to make type legible over the photo, so
       it is gone and the picture reads clean;
     - the loam plate was the device for putting type ON a photo. Below it, a
       plate on the page ground is just a box, so the H1 is a plain heading.
   height:clamp() on the band rather than aspect-ratio + max-height — the
   latter has a WebKit bug where the WIDTH collapses to preserve the ratio. */
.inner-hero{position:relative;margin-top:var(--hdr-h);background:var(--bg);isolation:isolate}
.inner-hero-bg{position:relative;height:clamp(300px,34vw,460px);overflow:hidden;background:var(--loam)}
.inner-hero-bg img,.inner-hero-bg picture{width:100%;height:100%;display:block}
.inner-hero-bg img{object-fit:cover;object-position:50% 46%}
/* the title column is the same 720px reading measure every H2 and paragraph
   below it uses, so each page has ONE left edge instead of three */
.inner-hero .inner-hero-content{width:min(100% - 44px,var(--read-measure));margin-inline:auto;
  position:relative;z-index:3;padding:clamp(30px,4.2vw,52px) 0 0}
/* padding-bottom is NOT decoration. line-height:1.08 is tighter than Lustria's
   1.27em content area, so half-leading goes NEGATIVE (-4.78px at 50px) and the
   glyphs overflow their own box — measured, the deepest ink sits 3.7px below
   the h1's bottom edge. .inner-content follows immediately and paints the same
   --bg over exactly that sliver, which reads as descenders chopped flat on any
   title ending in g/y/p/j. The retired title plate used to absorb this in its
   own padding. In em so it tracks the clamp; .14 leaves margin over the 3.7px. */
.inner-hero-content .inner-page-title,.inner-hero-content h1{
  display:block;background:none;border:0;box-shadow:none;margin:0;
  padding:0 0 .14em;
  color:var(--loam);font-size:clamp(1.9rem,4vw,3.15rem);line-height:1.08;max-width:22ch}

/* body rhythm — declared ONCE, between siblings. Keying on the WRAPPER (not on
   element type) is what makes image-left, image-right, text-only, heading-less
   and full-bleed blocks identical by construction. Do NOT reintroduce
   type-based spacing rules. */
.inner-content{padding:clamp(46px,6vw,74px) 0 clamp(52px,7vw,86px);background:var(--bg)}
.service-body{max-width:var(--service-body-max);margin:0 auto}
.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:first-child{margin-top:0}
.service-body h2{font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1.16;color:var(--loam);margin:0 0 .62em}
.service-body h3{font-size:clamp(1.2rem,1.9vw,1.44rem);line-height:1.24;color:var(--rust-ink);margin:1.5em 0 .5em}
.service-body p{font-size:1.04rem;line-height:1.82;color:var(--loam-soft)}
/* Text blocks take a 720px reading measure, centred inside the 1080px
   container — the same measure the homepage prose uses. Without this the copy
   sits in a 66ch column hugging the left edge and the right half of every
   text-only section is dead space. Image-beside-text blocks are untouched:
   their h2/p live inside .svc-text-col, not as direct children, so the two
   columns keep the full width they need. */
.service-body>.svc-block>h2,
.service-body>.svc-block>h3,
.service-body>.svc-block>p,
.service-body>.svc-block>ul,
.service-body>.svc-block>ol,
.service-body>.svc-block>.inner-lead{max-width:var(--read-measure);margin-left:auto;margin-right:auto}
.service-body ul,.service-body ol{margin:0 0 1.05em;padding-left:1.25em;color:var(--loam-soft);font-size:1.04rem;line-height:1.82}
.service-body li{margin-bottom:.4em}
.service-body a{color:var(--rust-ink);text-decoration:underline;text-underline-offset:3px}
.service-body a:hover{color:var(--loam)}
.service-body a[href^="tel:"],.service-body a[href^="mailto:"]{text-decoration:none}
/* the first prose block takes the homepage's drop cap, so inner pages open in
   the same voice as the vignettes */
.svc-block--lead>p:first-of-type::first-letter{
  font-family:var(--font-h);font-size:3.05em;line-height:.82;float:left;
  padding:.06em .1em 0 0;color:var(--rust)}
/* a standalone emphatic line: plain bold at body size, NOT the display italic */
.service-body .it-strong{font-weight:700;font-style:normal}
/* the copy docs' <SCHEDULE A FREE CONSULTATION> placeholder, rendered as a real button */
.service-body .svc-cta{margin:1.9em 0 .4em}
/* Standfirst: the copy doc's hook line where a section heading follows it
   immediately, so it cannot simply head the intro paragraphs. Given the hero
   geo-card's treatment — cream plate, 1px rust rule, hard rust block offset
   down and right — so the page opens on the site's own signature object rather
   than a loose line of type. Shrink-wraps to the text; never a full-width bar. */
/* `.service-body>.svc-block>p` is (0,2,1) and beats a (0,2,0) selector on
   element count alone, which centred this card and stretched it to the full
   720px measure. Matching that shape wins it back. */
/* Sized as an ASIDE, not a headline: at display size it competed with the H2
   directly beneath it and read as the section's title. Smaller type, tighter
   padding and a shallower offset drop it to marginal-commentary weight while
   keeping the plate motif. Floor stays above 14px for touch. */
/* Right-hand variant. Pushes the card past the reading measure to the wider
   block's right edge, so it sits off-axis against the left-aligned heading
   below — the same asymmetry the hero's geo card uses against the placard. */

@media (max-width:520px){
  /* no room to sit off-axis on a phone */
}

/* image beside text. Rule #7b — the COPY sets the height and the image fills it.
   An in-flow <img> in an align-items:stretch grid sizes the row to its own
   intrinsic height, which is what produces the "absurdly tall, ovular photo
   beside a tiny paragraph" report. Taking it out of flow makes the copy
   authoritative at any length, with no per-page tuning. */
.svc-img-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,44px);
  align-items:stretch;min-height:clamp(240px,26vw,340px);margin:0}
.svc-img-section--reverse .svc-text-col{order:2}
.svc-img-section--reverse .svc-img-col{order:1}
.svc-text-col{min-width:0}
.svc-img-col{min-width:0;position:relative}
.svc-img-col img,.svc-img-col picture{position:absolute;inset:0;width:100%;height:100%;display:block}
.svc-img-col img{object-fit:cover;border:1px solid var(--rust)}

/* full-bleed editorial bands. A band breaks out to 100vw and pulls its own
   content back to the body measure. Same-colour neighbours give half a gap
   each (one normal section gap); a colour change gives the full margin plus
   the band's half-pad. */
.svc-block.it-band{
  margin-inline:calc(50% - 50vw);width:100vw;background:var(--sand-tint);
  padding:calc(var(--sec-gap)/2) max(24px,calc(50vw - var(--service-body-max)/2))}
.service-body>.svc-block.it-band + .svc-block.it-band{margin-top:0}
.svc-block.it-relief{background:var(--sage-tint)}
/* prose that follows a stripe: full-bleed tinted ground, like the homepage .tale */
.svc-block.it-tale{margin-inline:calc(50% - 50vw);width:100vw;
  padding:var(--tale-pad) max(24px,calc(50vw - var(--service-body-max)/2))}
.svc-block.it-tale--a{background:var(--bg)}
.svc-block.it-tale--b{background:var(--sand-tint)}
.svc-block.it-tale--c{background:var(--sage-tint)}

/* ---- inner-page image STRIPES ----
   The inner pages carry the homepage's vignette rhythm: a full-bleed
   fixed-parallax photo band with the section's headline on a cream plate,
   and that section's prose immediately below on a tinted ground. Same
   vocabulary as .win / .win__plate / .tale, so a service page reads as the
   same document as the front page rather than a text dump.

   The plate walks left / right / centre down the page, exactly as the
   homepage vignettes do. */
/* compound form, same reason as .svc-block.about-bio below: a bare
   `.svc-stripe` (0,1,0) loses to `.service-body>.svc-block{margin:0}`
   (0,2,0), whose shorthand wipes margin-inline and leaves the photo inset
   while the prose band beneath it still spans edge to edge. */
/* Same change as the hero: the section headline comes off the photograph and
   sits beneath it. The background therefore moves to ::before — left on the
   section it would paint behind the heading too. The scrim and the cream plate
   both existed only to carry type over a photo and are gone with it.
   The --l / --r / --c walk went with them: it positioned the plate ACROSS the
   band, and there is no plate to walk. */
.svc-block.svc-stripe{margin-inline:calc(50% - 50vw);width:100vw;
  display:block;position:relative;padding:0;min-height:0;background:none}
/* Deliberately shorter than the homepage vignettes (420px) and than this
   page's own hero (460px). There the band IS the content; here it introduces
   prose, and at equal height it competed with the hero and cost ~840px of
   scroll on an already long read. */
.svc-stripe::before{content:"";display:block;width:100%;
  height:clamp(240px,24vw,340px);
  background:var(--sand-tint) 50% 45%/cover no-repeat fixed}
/* the heading, in the same 720px measure as the prose it introduces */
.svc-stripe__in{width:min(100% - 44px,var(--read-measure));margin-inline:auto;
  display:flow-root;position:relative;z-index:2;padding-top:clamp(28px,3.4vw,44px)}
/* The heading sits below the band now, and the prose block beneath it is a
   full-bleed tinted band. The stripe has to wear that same ground or a strip
   of page colour lands between a heading and its first paragraph. The stripe
   classes live in post_content and carry no ground hint, so it is read off
   the NEXT sibling. .it-relief after .it-band — it is .it-band.it-relief and
   the later rule has to win. */
.svc-block.svc-stripe:has(+ .it-tale--a){background:var(--bg)}
.svc-block.svc-stripe:has(+ .it-tale--b){background:var(--sand-tint)}
.svc-block.svc-stripe:has(+ .it-tale--c){background:var(--sage-tint)}
.svc-block.svc-stripe:has(+ .it-band){background:var(--sand-tint)}
.svc-block.svc-stripe:has(+ .it-relief){background:var(--sage-tint)}
.svc-stripe__plate{background:none;border:0;padding:0;max-width:none;box-shadow:none}
/* identical to every other body H2 now, .62em gap included — the following
   prose block is pulled flush by `.service-body>.svc-stripe + .svc-block` */
.service-body .svc-stripe__plate h2{margin:0 0 .62em;max-width:none;
  font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1.16;color:var(--loam)}
.svc-stripe--about.bg-loaded::before{background-image:image-set(url('../images/band-about-wm.webp') type('image/webp'),url('../images/band-about-wm.jpg') type('image/jpeg'))}
/* About's SECOND band, added 08-24 per the feedback doc: an image before
   "What Healing Can Look Like", which now sits beneath it like every other
   section heading. Anchored high — the subject's face is in the upper third. */
.svc-stripe--about2.bg-loaded::before{background-image:image-set(url('../images/about-body2-wm.webp') type('image/webp'),url('../images/about-body2-wm.jpg') type('image/jpeg'))}
/* Kept at the source 1.78:1 rather than cut to a letterbox. Every full-width
   band parallaxes, so the frame pans as you scroll and her face travels
   through the band — which is the point. A wider cut would magnify the face
   under cover() and show far less of it at any one moment. */

/* Per-page FIRST body stripe. Four pages that were sharing a homepage
   vignette photo now carry their own. */
/* Couples: its own two body photographs as of the 08-19 doc. Retires the
   borrowed pair it used to run — the homepage's front-body1 and a second
   printing of its own hero. */
.svc-stripe--b1-couples.bg-loaded::before{background-image:image-set(url('../images/couples-therapy-body1-wm.webp') type('image/webp'),url('../images/couples-therapy-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b2-couples.bg-loaded::before{background-image:image-set(url('../images/couples-therapy-body2-wm.webp') type('image/webp'),url('../images/couples-therapy-body2-wm.jpg') type('image/jpeg'))}
/* Individual: its own two body photographs. Retires the borrowed pair —
   the homepage's front-body5 and a second printing of its own hero. */
.svc-stripe--b1-individual.bg-loaded::before{background-image:image-set(url('../images/individual-therapy-body1-wm.webp') type('image/webp'),url('../images/individual-therapy-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b2-individual.bg-loaded::before{background-image:image-set(url('../images/individual-therapy-body2-wm.webp') type('image/webp'),url('../images/individual-therapy-body2-wm.jpg') type('image/jpeg'))}
/* His head sits near the top of the frame — the default 45% crop cuts it off. */
.svc-stripe--b2-individual::before{background-position:50% 15%}
/* ADHD Therapy: its own two body photographs. Retires the borrowed pair —
   the homepage's front-body2 and a second printing of its own hero. */
.svc-stripe--b1-adhd.bg-loaded::before{background-image:image-set(url('../images/adhd-therapy-body1-wm.webp') type('image/webp'),url('../images/adhd-therapy-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b2-adhd.bg-loaded::before{background-image:image-set(url('../images/adhd-therapy-body2-wm.webp') type('image/webp'),url('../images/adhd-therapy-body2-wm.jpg') type('image/jpeg'))}
/* Every service page now carries its own two body photographs — no page
   reuses the homepage vignettes or reprints its own hero any more. */
.svc-stripe--b2-adhdrel.bg-loaded::before{background-image:image-set(url('../images/adhd-and-your-relationship-body2-wm.webp') type('image/webp'),url('../images/adhd-and-your-relationship-body2-wm.jpg') type('image/jpeg'))}
.svc-stripe--b2-ctrauma.bg-loaded::before{background-image:image-set(url('../images/complex-trauma-body2-wm.webp') type('image/webp'),url('../images/complex-trauma-body2-wm.jpg') type('image/jpeg'))}
.svc-stripe--b2-religious.bg-loaded::before{background-image:image-set(url('../images/religious-trauma-and-deconstruction-body2-wm.webp') type('image/webp'),url('../images/religious-trauma-and-deconstruction-body2-wm.jpg') type('image/jpeg'))}
.svc-stripe--b2-grief.bg-loaded::before{background-image:image-set(url('../images/grief-and-loss-body2-wm.webp') type('image/webp'),url('../images/grief-and-loss-body2-wm.jpg') type('image/jpeg'))}
/* The mended heart sits low-left in frame — default 45% crop cut its bottom point off. */
.svc-stripe--b2-grief::before{background-position:50% 60%}
.svc-stripe--b2-lgbtq.bg-loaded::before{background-image:image-set(url('../images/lgbtq-affirming-therapy-body2-wm.webp') type('image/webp'),url('../images/lgbtq-affirming-therapy-body2-wm.jpg') type('image/jpeg'))}
.svc-stripe--b1-adhdrel.bg-loaded::before{background-image:image-set(url('../images/adhd-and-your-relationship-body1-wm.webp') type('image/webp'),url('../images/adhd-and-your-relationship-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b1-religious.bg-loaded::before{background-image:image-set(url('../images/religious-trauma-and-deconstruction-body1-wm.webp') type('image/webp'),url('../images/religious-trauma-and-deconstruction-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b1-ctrauma.bg-loaded::before{background-image:image-set(url('../images/complex-trauma-body1-wm.webp') type('image/webp'),url('../images/complex-trauma-body1-wm.jpg') type('image/jpeg'))}
/* Was 50% 50%, which cropped the top of his head off — raised to keep the whole head in frame. */
.svc-stripe--b1-ctrauma::before{background-position:50% 0%}
/* EMDR band two: its own photograph now, replacing a second printing of
   the page hero. */
.svc-stripe--b2-emdr.bg-loaded::before{background-image:image-set(url('../images/emdr-and-somatic-emdr-body2-wm.webp') type('image/webp'),url('../images/emdr-and-somatic-emdr-body2-wm.jpg') type('image/jpeg'))}
/* Silhouette's head sits right at the top edge of the frame — anchor to the
   very top so the default 45% crop doesn't slice it off. */
.svc-stripe--b2-emdr::before{background-position:50% 0%}
.svc-stripe--b1-emdr.bg-loaded::before{background-image:image-set(url('../images/emdr-and-somatic-emdr-body1-wm.webp') type('image/webp'),url('../images/emdr-and-somatic-emdr-body1-wm.jpg') type('image/jpeg'))}
/* Was 50% 50%, which cropped her head out entirely — raised to keep it in frame. */
.svc-stripe--b1-emdr::before{background-position:50% 15%}
.svc-stripe--b1-lgbtq.bg-loaded::before{background-image:image-set(url('../images/lgbtq-affirming-therapy-body1-wm.webp') type('image/webp'),url('../images/lgbtq-affirming-therapy-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b1-lgbtq::before{background-position:50% 50%}
.svc-stripe--b1-grief.bg-loaded::before{background-image:image-set(url('../images/grief-and-loss-body1-wm.webp') type('image/webp'),url('../images/grief-and-loss-body1-wm.jpg') type('image/jpeg'))}
.svc-stripe--b1-grief::before{background-position:50% 50%}

/* A stripe that CARRIES A HEADING and the prose it introduces are one unit —
   no gap, and no top padding either, because the heading's own .62em is the
   whole heading-to-body distance. Scoped with :has() because a stripe can also
   be headless (a bare image band dropped between two sections); that one must
   leave the following section its normal padding or the next heading butts
   straight against the photograph. */
.service-body>.svc-stripe:has(.svc-stripe__in) + .svc-block{margin-top:0;padding-top:0}
/* ---- how full-bleed blocks stack ----
   Two full-bleed blocks butt directly together: the page background must never
   appear as a stripe between them. Their own padding is the separation, the way
   two neighbouring .it-band sections already worked.

   And a band that ENDS a run carries the whole gap itself, because there is no
   neighbour contributing the other half. Two same-coloured bands give
   58 + 42 = 100px between their text; a band running into a photo stripe or the
   bio band gave only its own 42px, so the copy sat much closer to the edge below
   than above. --band-gap keeps both cases identical and self-maintaining. */
.service-body > .svc-block:is(.it-band,.it-tale,.about-bio,.svc-stripe)
              + .svc-block:is(.it-band,.it-tale,.about-bio,.svc-stripe){margin-top:0}
.service-body > .svc-block:is(.it-band,.it-tale):has(+ .svc-block:is(.about-bio,.svc-stripe)){
  padding-bottom:var(--band-gap)}

/* the first subheadline. Identical to every other body H2 — same font, size,
   weight, colour AND alignment. Never a distinct italic/accent "lead"
   treatment, and never centred: it must line up with the H2s below it. */
.inner-lead{margin:0;text-align:left}
.inner-lead h2{font-family:var(--font-h);font-style:normal;font-weight:400;color:var(--loam);
  font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1.16;margin:0 0 .62em}

/* ---- About ---- */
/* The bio is the emotional centre of the site — its own ground and card
   treatment, visibly a different KIND of thing from the service copy above. */
/* Compound `.svc-block.about-bio`, NOT `.about-bio`: `.service-body>.svc-block
   {margin:0}` is (0,2,0) and would otherwise win, and because `margin` is a
   shorthand it resets margin-inline entirely rather than merely overriding it.
   Every full-bleed block in this file needs the compound form. */
.svc-block.about-bio{margin-inline:calc(50% - 50vw);width:100vw;
  background:var(--sage-dark);color:var(--on-sage);
  padding:clamp(44px,6vw,72px) max(24px,calc(50vw - var(--service-body-max)/2))}
.about-bio__grid{display:grid;grid-template-columns:352px 1fr;gap:clamp(34px,4.4vw,62px);align-items:start}
.about-bio__fig{margin:0;position:relative}
.about-bio__fig img{width:100%;height:auto;aspect-ratio:320/400;object-fit:cover;object-position:50% 18%}
.about-bio__card{position:relative;margin:-56px 0 0 34px;background:var(--paper);color:var(--loam);
  padding:16px 20px 18px;box-shadow:10px 10px 0 0 var(--rust)}
/* scoped so they beat `.about-bio p` (0,1,1) — the card sits ON the sage band
   but is cream, so it must not inherit the band's light text colour */
.about-bio .about-bio__who{font-family:var(--font-h);font-size:1.2rem;line-height:1.25;color:var(--loam);margin:0 0 3px}
.about-bio .about-bio__cred{font:600 .7rem/1.5 var(--font-b);letter-spacing:.15em;text-transform:uppercase;color:var(--sand-ink);margin:0}
.about-bio h2{color:var(--on-dark)}
.about-bio h3{color:#F0D9C6}
.about-bio p{color:var(--on-sage);max-width:62ch}

/* ---- FAQ ---- Plate Deck.
   Each question is a cream plate with the site's hard rust offset block — the
   same object the geo card, service cards and credential card use — stacked in
   ONE column under its category heading.

   Constrained to the reading measure rather than the full 1080px container: at
   full width an expanded answer wrapped at ~64ch and left a tall band of dead
   space to its right. The plate is now the width of the answer. */
.faq-deck{max-width:var(--read-measure);margin:clamp(30px,4vw,46px) auto 0}
.faq-group{margin:0 0 clamp(38px,4.6vw,60px)}
.faq-group:last-child{margin-bottom:0}
.faq-cat{display:flex;align-items:baseline;gap:16px;margin:0 0 clamp(18px,2.2vw,26px)}
.service-body .faq-cat h2{font-size:clamp(1.16rem,1.9vw,1.4rem);color:var(--sand-ink);
  white-space:nowrap;margin:0;max-width:none}
.faq-cat::after{content:"";flex:1 1 auto;height:1px;background:rgba(158,98,64,.32)}
.faq-stack{display:flex;flex-direction:column;gap:36px}
.faq-plate{background:var(--paper);border:1px solid var(--rust);position:relative;
  box-shadow:9px 9px 0 0 var(--rust);
  transition:box-shadow .55s cubic-bezier(.22,1,.36,1),background .45s}
.faq-plate:hover,.faq-plate:focus-within{background:var(--plate-hover);box-shadow:14px 14px 0 0 var(--rust)}
.faq-plate.is-open{background:var(--plate-hover);box-shadow:14px 14px 0 0 var(--sage)}
.service-body .faq-plate__h{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.faq-q{width:100%;display:flex;align-items:flex-start;gap:14px;background:none;border:0;
  cursor:pointer;text-align:left;padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  font-family:var(--font-h);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.32;
  color:var(--loam);transition:color .3s}
.faq-q:hover{color:var(--rust-ink)}
.faq-q span:last-child{flex:1 1 auto}
.faq-q__m{flex:0 0 auto;width:9px;height:9px;margin-top:.45em;
  border-right:1.5px solid var(--rust);border-bottom:1.5px solid var(--rust);
  transform:rotate(45deg);transition:transform .42s cubic-bezier(.22,1,.36,1)}
.faq-plate.is-open .faq-q__m{transform:rotate(-135deg)}
.faq-plate.is-open .faq-q{color:var(--rust-ink)}
/* grid-template-rows 0fr→1fr animates to content height without a magic max */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)}
.faq-plate.is-open .faq-a{grid-template-rows:1fr}
.faq-a__in{overflow:hidden}
.faq-a__in>div{padding:0 clamp(20px,2.2vw,28px) clamp(20px,2.2vw,26px)}
.faq-a__in>div::before{content:"";display:block;width:46px;height:1px;background:var(--rust);margin-bottom:15px}
.service-body .faq-a p{font-size:1rem;line-height:1.8;color:var(--loam-soft);max-width:none}
.service-body .faq-a p:last-child{margin-bottom:0}

/* ---- Contact ---- */
/* Copy and the three contact cards run down the left column; the form sits to
   its right and STRETCHES to the same height. The message field absorbs the
   difference (see below), so both columns finish on the same line whatever the
   copy length — rather than the form floating short beside a taller column. */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,60px);align-items:stretch}
.contact-col{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px)}
.contact-copy>*:first-child{margin-top:0}
.contact-copy .svc-block{margin:0}
/* the copy is already inside a column — no second centred measure */
.contact-copy .svc-block>h2,.contact-copy .svc-block>p{max-width:none;margin-left:0;margin-right:0}
.contact-lines{display:grid;gap:14px;align-content:start;margin:0}

.contact-card{background:var(--paper);padding:clamp(26px,3.2vw,40px);
  box-shadow:0 40px 90px -55px rgba(37,34,24,.75);display:flex;flex-direction:column}
/* let the form fill the card, and the message box take up the slack */
/* align-items:stretch is spelled out on every one of these. WPForms sets its
   own align-items for its layout engine, and switching display to flex INHERITS
   that value — so the fields stopped stretching, sized to their content and
   centred at roughly half the card width. */
.contact-card .wpforms-container,
.contact-card .wpforms-form{display:flex;flex-direction:column;align-items:stretch;
  flex:1 1 auto;min-height:0;margin:0;width:100%;max-width:none}
.contact-card .wpforms-field-container{display:flex;flex-direction:column;align-items:stretch;
  flex:1 1 auto;min-height:0;width:100%;max-width:none}
/* Width only — colours and type still come from the parent's token hook.
   Making the container a flex column left the fields sizing to content rather
   than filling it, so they rendered ~215px wide and centred in a 420px card. */
.contact-card .wpforms-form .wpforms-field{width:100% !important;max-width:none !important;align-self:stretch}
.contact-card .wpforms-field input,
.contact-card .wpforms-field textarea{width:100% !important;max-width:none !important}
.contact-card .wpforms-field-textarea{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.contact-card .wpforms-field-textarea textarea{flex:1 1 auto;min-height:130px;resize:vertical}

/* ---- Blog ---- */
.blog-lede{font-family:var(--font-h);font-style:italic;font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.5;color:var(--sand-ink);max-width:44ch;margin:0 0 clamp(34px,4.4vw,56px)}
.blog-list{display:grid;gap:clamp(30px,4vw,52px)}
/* image beside the opening, alternating side so the index has a rhythm rather
   than a stack of identical rows */
.blog-card{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(24px,3.2vw,46px);align-items:center;
  padding-bottom:clamp(28px,3.6vw,44px);border-bottom:1px solid rgba(37,34,24,.14)}
.blog-card:last-child{border-bottom:0}
.blog-card:nth-child(even) .blog-card__fig{order:2}
.blog-card__fig{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--rust);box-shadow:11px 11px 0 0 var(--rust);
  transition:box-shadow .55s cubic-bezier(.22,1,.36,1)}
.blog-card__fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.blog-card:hover .blog-card__fig{box-shadow:17px 17px 0 0 var(--rust)}
.blog-card:hover .blog-card__fig img{transform:scale(1.04)}
.blog-card__body{min-width:0}
.blog-card__date{font:600 .72rem/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase;color:var(--sand-ink);
  display:block;margin-bottom:12px}
.blog-card__title{font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.16;margin:0 0 14px}
.blog-card__title a{text-decoration:none;color:var(--loam);
  background-image:linear-gradient(var(--rust-ink),var(--rust-ink));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s cubic-bezier(.22,1,.36,1),color .3s}
.blog-card__title a:hover{background-size:100% 1px;color:var(--rust-ink)}
.blog-card__body p{font-size:1.02rem;line-height:1.8;color:var(--loam-soft);max-width:60ch;margin-bottom:.9em}
.blog-more{margin-top:6px}
.blog-nav{margin-top:clamp(36px,4.6vw,58px)}
.blog-nav ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.blog-nav a,.blog-nav span{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;
  font-family:var(--font-h);text-decoration:none;color:var(--loam);border:1px solid rgba(37,34,24,.22);transition:background .28s,color .28s,border-color .28s}
.blog-nav a:hover{background:var(--rust);border-color:var(--rust);color:#FDFBF7}
.blog-nav .current{background:var(--loam);border-color:var(--loam);color:var(--on-dark)}

.post-body{max-width:720px;margin:0 auto}
.post-back{margin-bottom:24px}
.post-meta{font:600 .72rem/1 var(--font-b);letter-spacing:.17em;text-transform:uppercase;color:var(--sand-ink);margin-bottom:16px}
.post-rule{width:64px;height:1px;background:var(--rust);margin:clamp(26px,3.4vw,40px) 0}
.post-body p{font-size:1.1rem;line-height:1.85;color:var(--loam-soft)}
.post-body>p:first-of-type::first-letter{font-family:var(--font-h);font-size:3.05em;line-height:.82;float:left;
  padding:.06em .1em 0 0;color:var(--rust)}
.post-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:1.6em 0 .5em}
.post-body h3{font-size:clamp(1.18rem,1.9vw,1.4rem);color:var(--rust-ink);margin:1.5em 0 .45em}
.post-body blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:2px solid var(--rust);
  font-family:var(--font-h);font-style:italic;font-size:clamp(1.24rem,2.2vw,1.6rem);line-height:1.4;color:var(--loam)}
.post-body blockquote p{font-size:inherit;line-height:inherit;color:inherit;margin:0}

/* ---- 404 ---- */
.e404{position:relative;margin-top:var(--hdr-h);min-height:clamp(420px,58vh,620px);
  display:flex;align-items:center;background:var(--loam);overflow:hidden;isolation:isolate}
.e404__bg{position:absolute;inset:0;z-index:0}
.e404__bg img{width:100%;height:100%;object-fit:cover;object-position:54% 54%}
.e404__bg::after{content:"";position:absolute;inset:0;background:rgba(20,18,13,.42)}
.e404__card{position:relative;z-index:3;max-width:640px;background:var(--loam);border:1px solid var(--rust);
  padding:clamp(32px,4.4vw,54px);box-shadow:0 48px 100px -55px rgba(0,0,0,.95)}
.e404__h{color:var(--on-dark);font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.1;margin-bottom:18px}
.e404__h em{font-style:italic;color:var(--rust)}
.e404__card p{color:#D8D5C9;font-size:1.05rem;line-height:1.7;max-width:52ch}
.e404__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.e404__tel{display:block;margin-top:22px}

/* ---- legal pages ---- */
.legal-body{max-width:820px;margin:0 auto}
.legal-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:1.8em 0 .5em}
.legal-body h3{font-size:1.14rem;margin:1.5em 0 .4em}
.legal-body p,.legal-body li{font-size:1rem;line-height:1.8;color:var(--loam-soft)}

/* ============================ REVEALS ============================ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@keyframes forceVisible{to{opacity:1;transform:none}}
/* Opacity-only twin for the inner-page WRAPPERS. An element running an
   animation whose keyframes touch `transform` becomes the containing block for
   fixed-position and fixed-BACKGROUND descendants, and `forwards` makes that
   permanent — so every .svc-stripe inside .inner-content silently rendered as
   background-attachment:scroll while the homepage bands, which sit outside this
   wrapper, kept their parallax. The wrappers only ever needed opacity. */
@keyframes forceVisibleFade{to{opacity:1}}
/* GROUP 2 — inner-page wrappers that never scroll-reveal. 0.01s (not 0s):
   Chrome flags a zero-duration animation WITH a delay as non-composited and it
   costs CLS. The 8s failsafe for .rv itself is the setTimeout in client.js,
   deliberately not CSS, for the same reason. */
.inner-content,.contact-grid,.faq-deck,.legal-body{animation:forceVisibleFade .01s 8s forwards}
/* .rv.in must beat forceVisible so scroll-reveal keeps its transition */
.rv.in{animation:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  /* relative, NOT static: .pin is absolutely positioned inside this card, so a
     static card hands it up to .hero and the icon flies to the top of the
     photograph, taking the hero's whole layout down with it. */
  .geo-card{position:relative;width:auto;max-width:470px;margin:22px 0 0;
    box-shadow:10px 10px 0 0 var(--rust), 0 24px 50px -30px rgba(0,0,0,.8)}
}
@media (max-width:1120px){
  .nav-links>li>a{font-size:.86rem;letter-spacing:.02em;padding-left:9px;padding-right:9px}
  .nav-links{gap:.45rem}
  .nav-links .dropdown-menu a{font-size:.95rem}
}
@media (max-width:960px){
  .hdr__dual{display:none}
  .hero__foot{grid-template-columns:minmax(0,1fr)}
  .spread__grid{grid-template-columns:1fr}
  .stack{grid-template-rows:auto auto}
  .sv--feat{min-height:330px}
  .sv--mini{min-height:200px}
  .sv--feat .sv__ph{width:min(52%,260px)}
  .sv--mini .sv__ph{width:min(38%,150px)}
  .sv--feat .sv__plate{max-width:82%}
  .sv--mini .sv__plate{max-width:70%}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .contact-card .wpforms-field-textarea textarea{min-height:150px}
  .about-bio__grid{grid-template-columns:1fr;gap:42px}
  .about-bio__grid>div:first-child{max-width:330px}
}
@media (max-width:820px){
  /* stacked: put the image back in flow so it keeps a sane shape */
  .svc-img-section{grid-template-columns:1fr;min-height:0;gap:24px}
  .svc-img-section--reverse .svc-text-col{order:0}
  .svc-img-section--reverse .svc-img-col{order:0}
  .svc-img-col{position:static}
  .svc-img-col img,.svc-img-col picture{position:relative;inset:auto;aspect-ratio:4/3;height:auto}
}
@media (max-width:768px),
       (hover:none) and (pointer:coarse) and (max-height:500px){
  :root{--sec:46px;--hdr-h:64px}
  .nav-links{display:none}
  .burger{display:flex}
  .hero{--plinth:28px}
  /* Enough sky to read as "the placard sits ON the photograph", no more. */
  .hero__in{padding:clamp(52px,15vw,80px) 0 30px}
  .slab{max-width:none;padding:26px 20px 30px}
  .hero__sub{margin-top:20px}
  .hero__foot{margin-top:26px}
  .geo-card{margin-top:16px}

  /* The three service names are cut on portrait phones — they are the only
     purely duplicative thing in the hero (the same three are in the drawer's
     Services submenu and in the What I Offer cards below), and at 86px they
     were pushing the CTA and the location card off the first screen. The
     divider rule goes with them. Not in the touch block: `display` there
     resurrects width-hidden elements on tablets. */
  .hero__offer{display:none}
  .hero__h{font-size:clamp(2rem,8.5vw,2.9rem);max-width:none}
  .hero__spec{letter-spacing:.06em;margin-top:13px}
  .win__ph{height:300px;background-attachment:scroll}
  .breath{height:clamp(170px,25vh,240px);background-attachment:scroll}
  .svc-stripe::before{background-attachment:scroll;height:205px}
  .tale{padding:38px 0 40px}
  .tale p{max-width:none}
  .opening{padding:42px 0 48px}
  .opening__grid{grid-template-columns:1fr;gap:30px}
  .opening__land{padding-top:0}
  .opening__land p:nth-child(2){margin-top:20px}
  .opening__land p:nth-child(3){margin-top:30px}
  .opening__cta{margin-top:24px}
  .opening__prose p{max-width:none}
  .letter{padding:50px 0 46px}
  .bn__top{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:30px}
  .bn__h{margin-bottom:0;justify-self:start;text-align:left;max-width:none}
  .bn{grid-template-columns:1fr;gap:42px}
  .bn>div:first-child{max-width:330px}
  .bn__card{margin:-44px 0 0 24px}
  .close__body{grid-template-columns:1fr;gap:36px}
  .close__head{max-width:none}
  .close__form .wpforms-field-container{grid-template-columns:1fr}
  .close__form .wpforms-field-name,
  .close__form .wpforms-field-email{grid-column:1}
  .close__card{padding:32px 22px 30px}
  /* footer centres as a block on phones — a left rail of four stacked items
     reads as debris once the row collapses */
  .ftr__top,.ftr__bot{flex-direction:column;align-items:center;text-align:center}
  .ftr__legal{justify-content:center;flex-wrap:wrap}
  .soc{justify-content:center}
  .ftr__sup{text-align:center;margin-left:auto;margin-right:auto}
  .ftr__cp{text-align:center}

  /* the three service names stay on ONE line: they read as a set, and wrapping
     turned them into a ragged two-line stack under the CTA */
  .hero__offer ul{flex-wrap:nowrap;justify-content:space-between;gap:0 10px}
  .hero__offer li{min-width:0}
  /* .875rem, not smaller: it is the 14px touch floor, and the three names
     measure ~240px at that size inside a ~314px slab, so they fit on one line
     without going under the accessible minimum. */
  .hero__offer a{font-size:.875rem;white-space:nowrap;padding-bottom:5px}
  .hero__offer a::after{display:none}

  /* "Schedule Your Complimentary Consultation" was breaking to two lines */
  .opening__cta .btn{font-size:.78rem;letter-spacing:.05em;padding-left:16px;padding-right:16px;
    white-space:nowrap}
  .service-body p,.service-body ul,.service-body ol{max-width:none}
  .blog-card{grid-template-columns:1fr;gap:22px}
  .blog-card:nth-child(even) .blog-card__fig{order:0}
  .blog-card__fig{box-shadow:8px 8px 0 0 var(--rust)}
  .inner-hero-bg{height:clamp(260px,46vw,360px)}
  .inner-hero-content .inner-page-title,.inner-hero-content h1{max-width:none}
  /* Brand block sits alongside the hamburger. The lockup is a fixed-ratio
     image now, so it is sized by HEIGHT here and never allowed to flex-shrink
     (shrinking a height-pinned image squashes the wordmark instead of scaling
     it). At 50px tall it is 111px wide — 111 + 44 burger + 32 gutter clears
     320px with room to spare. */
  .brand{min-width:0;flex:0 0 auto}
  .brand__logo img{height:58px}
  .hdr.shrink .brand__logo img{height:50px}
  .brand-text,.brand-text small{white-space:normal;min-width:0}
  .mobile-toggle,.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}
}
@media (max-width:480px){
  body{font-size:17px}
  .wrap,.narrow,.container{width:min(100% - 32px,var(--wrap))}
  .hero__cta .btn{width:100%;text-align:center}
  .tale p:first-child::first-letter{font-size:2.6em}
  .svc-block--lead>p:first-of-type::first-letter,
  .post-body>p:first-of-type::first-letter{font-size:2.6em}
  .close__card{padding:26px 18px 26px}
  .brand__logo img{height:50px}
  .hdr.shrink .brand__logo img{height:44px}
}
/* short landscape phones: the hero must clear the fixed nav */
@media (max-height:500px) and (orientation:landscape){
  .hero__in{padding-top:120px;padding-bottom:28px}
  .inner-hero-bg{height:clamp(180px,42vh,240px)}
}

/* touch devices: kill fixed planes + enforce the 14px floor.
   NEVER put `display` in this block — it resurrects elements hidden by a
   width breakpoint (a hidden nav CTA reappearing on tablets).
   Uses (hover:none) and (pointer:coarse), NOT max-width: iPad Pro 11
   landscape is 1194px wide and still a touch device. */
@media (hover:none) and (pointer:coarse){
  /* one declaration per parallax section, so the override count matches the
     number of fixed backgrounds rather than hiding behind a grouped selector */
  .win__ph{background-attachment:scroll}
  .breath{background-attachment:scroll}
  .svc-stripe::before{background-attachment:scroll}
  .sky img{animation:none;transform:none}
  .ftr__sup,.ftr__legal a,.ftr__cp,.close__note{font-size:.88rem}
  .fld label,.cline b,.soc .pt{font-size:.88rem}
  .letter .bn__cred,.about-bio .about-bio__cred,.blog-card__date,.post-meta{font-size:.88rem}
  .tlink{padding-top:8px;padding-bottom:10px}
  .ftr__legal a{padding:8px 0}
  .hero__offer a{padding-top:6px;padding-bottom:9px}
  /* bare <button> inherits the UA default of 13.33px — a floor for the
     unstyled, never an override of the designed (no !important, element
     selector, so any real button class outranks it) */
  button,input[type="submit"],input[type="button"]{font-size:14px}
  .btn,a.btn,button.btn,.tlink{font-size:.9rem;min-height:44px;box-sizing:border-box}
  .nav-links>li>a,.nav-links .dropdown-menu a,.drawer>ul>li>a,.drawer .dtog,.drawer .dsub a{
    font-size:14px;min-height:44px;box-sizing:border-box}
  .faq-q{font-size:14px;min-height:44px}
  a[href^="tel:"],a[href^="mailto:"]{min-height:44px;padding:12px 0;box-sizing:border-box}
  .cline a,.cline span{padding-top:6px;padding-bottom:6px}
  /* BOTH halves of the header unit — the CTA was left at 11.2px, under the
     14px floor, on every touch device wide enough to keep the desktop header
     (iPad Pro 11 landscape is 1194px). font-size only; no `display` here. */
  .hdr__dual-t,.hdr__dual-b,.drawer__tel{font-size:14px}
  .hdr__dual-b,.drawer__tel,.hdr__dual-t{min-height:44px}
  .soc a,.soc .pt{min-width:44px;min-height:44px}
  .blog-nav a,.blog-nav span{min-width:44px;min-height:44px}
  /* viewport-sweep gate (2026-09-02): these all lost to a same-selector,
     higher- or equal-specificity rule elsewhere (.drawer__foot .btn and
     .opening__cta .btn each beat the generic .btn rule above on specificity;
     .ftr__legal a and .hero__offer a had padding but never a guaranteed
     min-height). Fixing with min-height rather than more padding math —
     robust regardless of which clamp() value is active at a given width. */
  .drawer__foot .btn,.opening__cta .btn{font-size:14px}
  .ftr__legal a{min-height:44px;display:flex;align-items:center}
  .hero__offer a{min-height:44px;display:inline-flex;align-items:center}
  /* WPForms labels need !important to beat its 604-rule modern-theme cascade */
  .wpforms-container .wpforms-field-label,
  .wpforms-container .wpforms-field-label.wpforms-field-label{font-size:14px !important;line-height:1.4 !important}
  .wpforms-form .wpforms-submit{min-height:44px !important;height:auto !important}
}
@media (prefers-reduced-motion:reduce){
  .breath{background-attachment:scroll}
  .win__ph{background-attachment:scroll}
  .svc-stripe::before{background-attachment:scroll}
  .sky img{animation:none;transform:none}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .faq-a{transition:none}
}

/* LEGAL PAGES: never fade in. These bodies are 30–50KB walls of text; an
   IntersectionObserver threshold of 12% on a 10,000px element is never
   reachable, so .in never lands and the page stays at opacity:0. */
body.page-privacy-policy .rv,
body.page-terms-and-conditions .rv,
body.page-terms-conditions .rv{
  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);
  }
}