/* @critical:start — everything to @critical:end is inlined above the fold */
/* ============================================================
   Living Hope Christian Therapy — Diane Ussery, LCSW
   VERSION A — "Still Waters"
   Palette: client-provided "Still Waters" (B) w/ Warm Linen swap
   ============================================================ */

:root{
  --sky:#4A7A96;          /* Stream Sky   — PRIMARY   */
  --creek:#6B9E8A;        /* Shallow Creek— SECONDARY */
  --buttercup:#E2B330;    /* Buttercup    — ACCENT    */
  --linen:#F7F4EF;        /* Warm Linen   — BACKGROUND*/
  --slate:#1E2A30;        /* Deep Slate   — TEXT      */

  --sky-deep:#3A6178;
  --sky-mist:#EAF0F3;
  --creek-mist:#E8F0EA;
  --creek-deep:#3D7261;
  --linen-warm:#F1ECE3;
  --linen-deep:#E8E1D5;
  --ink:#1E2A30;
  --ink-soft:#42545D;
  --ink-faint:#5D6D75;
  --paper:#FFFDFA;

  --shell:min(1200px, 100% - 3rem);
  --measure:64ch;

  --f-display:"Faustina",Georgia,serif;
  --f-body:"Mulish",-apple-system,"Segoe UI",sans-serif;

  --step-h1:clamp(2.5rem, 1.5rem + 4.0vw, 4.5rem);
  --step-h2:clamp(1.95rem, 1.25rem + 2.5vw, 3.15rem);
  --step-h3:clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  --step-body:clamp(1.02rem, 0.98rem + 0.22vw, 1.135rem);
  --step-lead:clamp(1.16rem, 1.05rem + 0.6vw, 1.42rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* skipped-stone corner — elliptical, not a pill */
  --stone:999px;  /* stadium — identical shape at every button size */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;padding-bottom:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-body);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--step-h1);line-height:1.02}
h2{font-size:var(--step-h2)}
/* narrative hierarchy: tier 1 = the beats that must dominate a scan */
.t1 h2{font-size:clamp(2.3rem,1.4rem + 3.1vw,3.85rem)}
/* Tier 3 = supporting sections (method, services). Was 2.35rem, which read as
   an abrupt drop after the 3.15rem story beats — the page appeared to lose
   voice at the bottom. Raised to sit just under tier 2 so the hierarchy still
   descends, but without the cliff. (.bridge is also .t3 but its .lede has its
   own size and is unaffected.) */
.t3 h2{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.85rem)}
h3{font-size:var(--step-h3);line-height:1.18}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
em{font-style:italic}
/* This child theme dequeues the parent's base.css and is meant to be fully
   self-contained, but never carried over base.css's `a{text-decoration:none}`
   half of the link reset — only `color:inherit`. Every *styled* link class
   in this file (.hdr-tel, .ftr-links a, .contact-list a, etc.) sets its own
   text-decoration:none, so the gap was invisible almost everywhere — except
   plain, unstyled tel:/mailto: mentions inside body copy (e.g. "Call me
   today at: (661) 699-0853"), which fell through to the browser's native
   underline. Restoring the full reset here so no link needs to re-declare it. */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--buttercup);color:var(--slate)}

.shell{width:var(--shell);margin-inline:auto}
.measure{max-width:var(--measure)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--f-body);font-weight:600;
  font-size:.99rem;letter-spacing:.005em;
  padding:1.02rem 1.9rem;
  border-radius:var(--stone);
  border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.btn .arw{transition:transform .45s var(--ease-out)}
.btn:hover .arw{transform:translateX(5px)}

.btn-gold{background:var(--buttercup);color:#33270A;box-shadow:0 2px 0 rgba(30,42,48,.10)}
.btn-gold:hover{background:#F0C246;box-shadow:0 6px 22px -8px rgba(226,179,48,.85)}

.btn-sky{background:var(--sky);color:#fff}
.btn-sky:hover{background:var(--sky-deep);box-shadow:0 8px 26px -12px rgba(58,97,120,.9)}

.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(30,42,48,.26)}
.btn-ghost:hover{background:var(--ink);color:var(--linen);border-color:var(--ink)}

.btn-light{background:var(--linen);color:var(--ink)}
.btn-light:hover{background:#fff;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}

/* Brand motif — the hairline rule from the logo lockup. Gold is ONLY ever a
   hairline (per the brand sheet), never a fill for type. Used sparingly, and
   always UNDER a line that stands alone as a statement. */
.rule-mark.rule-mark{padding-bottom:.85rem;border-bottom:1px solid rgba(226,179,48,.72)}
.bg-slate .rule-mark.rule-mark,.cta .rule-mark.rule-mark{border-bottom-color:rgba(226,179,48,.85)}

:focus-visible{outline:3px solid var(--sky-deep);outline-offset:3px;border-radius:2px}
.bg-slate :focus-visible,.cta :focus-visible,.hero :focus-visible{outline-color:var(--buttercup)}
.cta-long{display:none}
@media (min-width:1300px){.cta-long{display:inline}}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  padding:.6rem 0;
  background:rgba(247,244,239,.0);
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
/* subtle darkening behind the transparent header so the logo + nav pop over
   the brighter hero; fades to nothing once the header goes solid */
/* Translucent scrim behind the transparent header so the lockup + nav stay
   legible over a bright hero. z-index:0 (NOT -1) so it always paints above the
   hero and below the header content — a -1 pseudo is fragile inside a
   stacking context and was rendering invisibly. Fades to nothing at the
   bottom edge so it reads as haze, not a bar. Disappears once .solid. */
.hdr::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,22,28,.58) 0%, rgba(14,22,28,.34) 58%, rgba(14,22,28,0) 100%);
  opacity:1;transition:opacity .45s var(--ease);
}
.hdr.solid::before{opacity:0}
/* header content must sit above the scrim */
.hdr-in{position:relative;z-index:1}
.hdr.solid{
  background:rgba(247,244,239,.94);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
  box-shadow:0 1px 0 rgba(30,42,48,.07), 0 12px 34px -28px rgba(30,42,48,.5);
  padding:.22rem 0;
}
.hdr-in{display:flex;align-items:center;gap:1.6rem}

.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
/* Brand guide: primary lockup, minimum 180px wide on screen. */
.lh{display:block;width:clamp(180px,15.5vw,196px);height:auto;transition:width .45s var(--ease)}
.hdr.solid .lh{width:168px}
/* reversed over the hero photograph, primary once the header goes solid */
.hdr:not(.solid) .brand{--lh-word:#F7F4EF;--lh-hope:#F7F4EF;--lh-tag:#F7F4EF;--lh-rule:#E2B330}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav>li{position:relative;list-style:none}
.nav{padding:0;margin-block:0}
.nav a,.nav .top{
  display:block;padding:.62rem .82rem;
  font-size:.885rem;font-weight:500;letter-spacing:.005em;
  color:var(--ink);text-decoration:none;
  border-radius:8px;
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.hdr:not(.solid) .nav>li>a,.hdr:not(.solid) .nav>li>.top{color:#fff}
/* hover is a gold hairline, not a colour change — keeps full contrast on the
   hero photograph and reuses the lockup's own rule as the affordance */
.nav>li>a,.nav>li>.top{position:relative}
.nav>li>a::after,.nav>li>.top::after{
  content:"";position:absolute;left:.82rem;right:.82rem;bottom:.3rem;height:1.5px;
  background:var(--buttercup);border-radius:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease-out);
}
.nav>li>a:hover::after,.nav>li>a:focus-visible::after,.nav>li:hover>.top::after{transform:scaleX(1)}
.nav>li>a:hover{color:var(--sky-deep)}
.hdr:not(.solid) .nav>li>a:hover{color:#fff}
.nav .top{cursor:default;pointer-events:none;display:flex;align-items:center;gap:.36rem}
.nav .top .cv{width:9px;height:9px;stroke:currentColor;stroke-width:2;fill:none;opacity:.6;transition:transform .35s var(--ease)}
.nav li:hover .top .cv{transform:translateY(2px)}

.sub{
  position:absolute;top:calc(100% + .35rem);left:-.3rem;
  min-width:250px;padding:.5rem;margin:0;
  background:var(--linen);
  border-radius:16px;
  box-shadow:0 26px 54px -26px rgba(30,42,48,.5), 0 0 0 1px rgba(30,42,48,.10);
  list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.sub li{list-style:none}
.nav li:hover .sub,.nav li:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{color:var(--ink);font-size:.885rem;padding:.62rem .8rem;border-radius:10px}
.sub a:hover{background:var(--linen-deep);color:var(--sky-deep)}

.hdr-cta{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.hdr-tel{
  display:inline-flex;align-items:center;gap:.52rem;
  padding:.66rem 1.1rem;
  border:1px solid rgba(30,42,48,.22);border-radius:var(--stone);
  font-size:.875rem;font-weight:600;letter-spacing:.005em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.hdr-tel svg{width:15px;height:15px;stroke:var(--sky);stroke-width:1.9;fill:none;flex-shrink:0;transition:stroke .35s var(--ease),transform .35s var(--ease-out)}
.hdr-tel:hover{color:var(--sky-deep);border-color:var(--sky);background:rgba(74,122,150,.07)}
.hdr-tel:hover svg{stroke:var(--sky-deep);transform:rotate(-14deg) scale(1.08)}
.hdr:not(.solid) .hdr-tel{color:#fff;border-color:rgba(255,255,255,.45)}
.hdr:not(.solid) .hdr-tel svg{stroke:var(--buttercup)}
.hdr:not(.solid) .hdr-tel:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.16)}
.hdr:not(.solid) .hdr-tel:hover svg{stroke:#fff}
.hdr .btn{padding:.72rem 1.28rem;font-size:.855rem}

/* small-laptop / landscape-tablet band: keep the desktop nav but shed the
   phone chip and tighten spacing so the primary CTA never clips */
@media (min-width:769px) and (max-width:1180px){
  .hdr-tel{display:none}
  .hdr-in{gap:1rem}
  .nav{gap:.05rem}
  .nav>li>a,.nav>li>.top{padding:.58rem .56rem;font-size:.84rem}
  .hdr .btn{padding:.66rem 1.08rem;font-size:.8rem}
  .lh{width:clamp(172px,15vw,184px)}
}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;margin-left:auto}
.burger span{display:block;width:25px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.hdr:not(.solid) .burger span{background:#fff}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(600px,92svh,940px);display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img{overflow:hidden}
.hero-img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform-origin:60% 45%;
  /* No will-change, and a 1.4s delay: this img is the LCP element, and
     promoting a full-viewport texture to its own compositor layer while the
     browser is still trying to paint it costs ~1s of LCP "element render
     delay" on a throttled mobile CPU. The drift is ambient — nobody sees the
     first 1.4s of a 46s loop. */
  animation:hero-drift 46s ease-in-out 1.4s infinite alternate;
}
@keyframes hero-drift{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.062) translate3d(-.7%,-.5%,0)}
}
@media (prefers-reduced-motion:reduce){.hero-img img{animation:none;transform:scale(1.04)}}
.hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(115% 125% at 17% 84%, rgba(14,22,28,.72) 0%, rgba(16,26,32,.4) 32%, rgba(20,32,40,.1) 54%, rgba(20,32,40,0) 72%),
    linear-gradient(to top, rgba(16,26,32,.22) 0%, rgba(18,28,34,.06) 26%, rgba(20,32,40,0) 48%);
}
.hero-in{position:relative;z-index:2;padding:7rem 0 2rem;transform:translateY(-56px)}
/* ease the upward shift on shorter viewports so the H1 never slips under the header */
@media (max-height:872px){.hero-in{transform:translateY(-30px)}}
@media (max-height:804px){.hero-in{transform:translateY(-10px)}}
@media (max-height:726px){.hero-in{transform:translateY(0)}}
@media (max-width:768px){
  .hero-scrim{background:
    radial-gradient(150% 120% at 26% 50%, rgba(14,22,28,.7) 0%, rgba(16,26,32,.42) 40%, rgba(20,32,40,.12) 66%, rgba(20,32,40,0) 84%),
    linear-gradient(to top, rgba(16,26,32,.22) 0%, rgba(18,28,34,.06) 34%, rgba(20,32,40,0) 58%);}
}
/* short laptop windows: let the hero take the full viewport so the lockup and
   the H1 keep clear of the fixed header */
@media (min-width:769px) and (max-height:820px){
  .hero{min-height:max(640px,100svh)}
}
.hero h1{color:#FFFDF8;max-width:15ch;text-shadow:0 2px 34px rgba(10,18,24,.42)}
.hero-sub{
  margin:clamp(1.5rem,.7rem + 2.4vw,3rem) 0 0;
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.62rem,1.15rem + 2.05vw,2.72rem);
  line-height:1.24;color:#FFE9A8;
  text-shadow:0 2px 24px rgba(10,18,24,.5);
}
.hero-sub span{display:block}
/* hero a1: offer enlarged, CA as a location pill by the CTA */
.hero-offer{
  margin:clamp(1.7rem,1.1rem + 1.9vw,2.9rem) 0 0;max-width:24ch;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.34rem,1.05rem + 1.35vw,2.05rem);line-height:1.24;
  color:#FFFDF8;text-shadow:0 2px 20px rgba(10,18,24,.6);
}
.hero-loc{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.05rem;border-radius:999px / 999px;
  border:1px solid rgba(255,255,255,.42);background:rgba(20,30,36,.28);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:#FFFDF8;font-size:.9rem;font-weight:600;white-space:nowrap;
  text-shadow:0 1px 10px rgba(10,18,24,.5);
}
.hero-loc svg{width:15px;height:15px;stroke:var(--buttercup);stroke-width:1.9;fill:none;flex-shrink:0}
.hero-act{margin-top:clamp(2.4rem,1.7rem + 1.9vw,3.5rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero-note{font-size:.88rem;color:rgba(255,253,248,.72);letter-spacing:.01em}

/* wave into linen */
.wave{display:block;width:100%;height:auto;position:relative;z-index:3;margin-top:-1px}
.hero .wave{position:absolute;bottom:-1px;left:0}

/* ---------- section frame ---------- */
.sec{position:relative;padding:6rem 0}
.sec-tight{padding:clamp(3.2rem,6vw,5.5rem) 0}
.bg-linen{background:var(--linen)}
.bg-warm{background:var(--linen-warm)}
/* @critical:end */
.bg-skymist{background:var(--sky-mist)}
.bg-creekmist{background:var(--creek-mist)}
.bg-slate{background:var(--slate);color:#EDF2F4}

/* ---------- orientation: the sidenote ---------- */
.orient-sec{padding:3rem 0}
.orient{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.orient-say{max-width:none}
.orient .lead{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.44rem,1.02rem + 1.85vw,2.5rem);
  line-height:1.3;color:var(--ink);margin:0;
  max-width:13.5em;
}
.orient .lead+.lead{margin-top:1.05em;font-style:italic}
.orient .note{
  margin:0;padding-top:.9rem;
  border-top:1px solid rgba(226,179,48,.72);
  font-size:.92rem;line-height:1.62;color:var(--ink-soft);
  font-style:italic;
}
.orient .note p{margin:0}
.orient .note p+p{margin-top:.9em}
@media (max-width:860px){
  .orient{grid-template-columns:1fr;gap:1.9rem;align-items:start}
  .orient .lead{max-width:16em}
  .orient .note{max-width:52ch}
}
@media (max-width:560px){.orient .lead{max-width:none}}

/* ---------- stories ---------- */
.story h2{margin-bottom:1.6rem}
.story p{color:var(--ink-soft)}
.story .kicker{
  font-family:var(--f-display);font-size:var(--step-lead);
  line-height:1.5;color:var(--ink);margin-bottom:1.2rem;
}

/* story 1 — single column, matching the other vignettes */
.s1{max-width:60ch}
.s1 h2{max-width:16ch}
.s1-ask{
  margin:1.9rem 0 0;
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.3rem);
  line-height:1.28;color:var(--sky-deep);
  max-width:22ch;
}
/* lead-in line reads as body copy — same size/colour/leading as .story p.
   No max-width: it must sit on ONE line (it fits inside .s1's 60ch measure);
   narrow viewports still wrap it naturally. */
.s1-ask span{display:block;color:var(--ink-soft);font-style:normal;font-family:var(--f-body);font-size:var(--step-body);line-height:1.72;margin-bottom:.7rem;max-width:none;white-space:nowrap}
@media (max-width:680px){.s1-ask span{white-space:normal}}

/* stories 1–3 — soft watercolor washes + accent hairlines between them */
.story-1,.story-2,.story-3{position:relative;overflow:hidden}
.story-1 .shell,.story-2 .shell,.story-3 .shell{position:relative;z-index:2}
.story-1::before{content:"";position:absolute;right:-8%;top:-16%;width:min(600px,48%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(74,122,150,.11),rgba(74,122,150,0) 66%);pointer-events:none}

/* Ryan vignette — "door ajar" photograph as a barely-there texture, not a
   picture. Sits on the right (the copy is flush-left) and is masked away
   before it reaches the text column. Image loads only when the band scrolls
   into view (.bg-loaded) so it can never compete with the hero for LCP. */
.story-1::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center right;background-size:cover;background-repeat:no-repeat;
  /* --- subtlety knob: raise/lower this single value --- */
  opacity:.16;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.62) 44%,rgba(0,0,0,0) 78%);
  mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.62) 44%,rgba(0,0,0,0) 78%);
}
.story-1.bg-loaded::after{
  background-image:url('../images/home-vignette1-door.jpg');
  background-image:image-set(url('../images/home-vignette1-door.webp') type('image/webp'),
                             url('../images/home-vignette1-door.jpg') type('image/jpeg'));
}
/* on narrow screens the copy spans the full width — pull it back further */
@media (max-width:768px){
  .story-1::after{opacity:.12;
    -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,0) 62%);
    mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,0) 62%)}
}
.story-2::before{content:"";position:absolute;right:-10%;top:-24%;width:min(620px,52%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(107,158,138,.16),rgba(107,158,138,0) 66%);pointer-events:none}
.story-2::after{content:"";position:absolute;left:-12%;bottom:-30%;width:min(560px,46%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(74,122,150,.12),rgba(74,122,150,0) 66%);pointer-events:none}

/* Grief vignette — white roses at a bright window, sitting on the right as a
   soft presence. Both of story-2's pseudo-elements are already watercolour
   washes, so instead of a third layer we paint the section colour back OVER
   the photograph as a gradient: that simultaneously lightens it and clears the
   centred copy column. The photo is high-key, so it's the green stems and
   leaves that register — the white blooms melt into the sky-mist band.
   Loads only once the band scrolls into view (.bg-loaded), never at LCP. */
/* The source file is mirrored across the vertical axis — blooms stay upright
   but now sit on the LEFT, so the reveal and clearing gradient run rightward. */
.story-2{background-position:center left;background-size:cover;background-repeat:no-repeat}
.story-2.bg-loaded{
  background-image:
    linear-gradient(to right, rgba(234,240,243,.82) 0%, rgba(234,240,243,.89) 32%, rgba(234,240,243,1) 64%),
    url('../images/home-vignette2-roses.jpg');
  background-image:
    linear-gradient(to right, rgba(234,240,243,.82) 0%, rgba(234,240,243,.89) 32%, rgba(234,240,243,1) 64%),
    image-set(url('../images/home-vignette2-roses.webp') type('image/webp'),
              url('../images/home-vignette2-roses.jpg') type('image/jpeg'));
}
/* portrait phones: copy runs full width, so pull the photo back to a corner hint */
@media (max-width:768px){
  .story-2.bg-loaded{
    background-image:
      linear-gradient(to right, rgba(234,240,243,.88) 0%, rgba(234,240,243,1) 52%),
      url('../images/home-vignette2-roses.jpg');
    background-image:
      linear-gradient(to right, rgba(234,240,243,.88) 0%, rgba(234,240,243,1) 52%),
      image-set(url('../images/home-vignette2-roses.webp') type('image/webp'),
                url('../images/home-vignette2-roses.jpg') type('image/jpeg'));
  }
}
.story-3{border-top:1px solid rgba(226,179,48,.5)}
.story-3::before{content:"";position:absolute;left:-10%;top:-20%;width:min(600px,50%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(226,179,48,.10),rgba(226,179,48,0) 64%);pointer-events:none}

/* Marianne vignette — parched, cracked ground under the "watering can nearly
   empty" copy. Mirrored from the other two: this copy is flush-RIGHT, so the
   texture sits on the LEFT and is masked away before it reaches the column.
   Warm tan on warm linen, so it reads as ground texture rather than a photo.
   Lazy-loaded via .bg-loaded — never competes with the hero for LCP. */
.story-3::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  /* Full-bleed and EVEN across the band — no directional mask. A gradient
     fade behind the copy reads as an obvious wipe; a uniformly faint texture
     reads as paper. Keep it low enough to sit under text safely.
     --- subtlety knob --- */
  opacity:.045;
}
.story-3.bg-loaded::after{
  background-image:url('../images/home-vignette3-cracked-wm.jpg');
  background-image:image-set(url('../images/home-vignette3-cracked-wm.webp') type('image/webp'),
                             url('../images/home-vignette3-cracked-wm.jpg') type('image/jpeg'));
}
@media (max-width:768px){
  .story-3::after{opacity:.035}
}

/* story 2 — centred pause (narrower so the centring reads as deliberate) */
/* pushed flush right: clears the roses (now on the left) and counterbalances
   story 1's flush-left column */
.s2{max-width:52ch;margin-left:auto;margin-right:0;text-align:left}
.s2 h2{max-width:19ch}

/* story 3 — flush right, decisive (left → centre → right drift) */
/* centred to resolve the sequence (left → right → centre). Text stays
   left-aligned; only the column moves. Its texture is even, so it's free to sit
   anywhere without fighting the imagery. */
.s3{max-width:54ch;margin-inline:auto}

.footnote{
  font-size:.845rem;font-style:italic;color:var(--ink-faint);
  max-width:60ch;line-height:1.6;
}

/* ---------- photo bands ---------- */
.band{position:relative;height:clamp(230px,42vh,430px);overflow:hidden}
/* Parallax on the full-width photographic bands. Driven entirely by CSS
   scroll-driven animation (animation-timeline: view()), which runs on the
   compositor thread — smooth, no scroll listener, no per-frame JS jank.
   The image is taller than its frame and pans as the band crosses the
   viewport. Where unsupported / reduced-motion / touch: plain static cover. */
.band img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (pointer:fine){
    /* the timeline tracks the BAND's crossing of the viewport (named
       view-timeline), and the oversized image pans along it. Putting view()
       on the image itself fails — it's absolutely positioned and taller than
       its clip, so its own view progress is degenerate. */
    .band{view-timeline-name:--band-vt;view-timeline-axis:block}
    .band img{
      height:240%;top:-70%;
      will-change:transform;
      animation-name:band-parallax;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-duration:auto;
      animation-timeline:--band-vt;
      animation-range:cover 0% cover 100%;
    }
    @keyframes band-parallax{
      /* strong fixed-window reveal: the whole photo pans through the window as
         the band crosses. Kept inside the excess so an edge is never exposed. */
      from{transform:translateY(28%)}
      to{transform:translateY(-28%)}
    }
  }
}
/* crisp band edges — no top/bottom fade */
/* (.band-lav removed 2026-07-22 — the lavender band between story 3 and the
   faith turn was decorative rather than narrative. The image file is kept:
   home.php/single.php still use it as the blog hero fallback.) */

/* ---------- faith ---------- */
.faith{position:relative;overflow:hidden;background:var(--slate)}
.faith-img{position:absolute;inset:0;z-index:0}
.faith-img img{width:100%;height:100%;object-fit:cover;object-position:60% 42%}
.faith-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(18,28,34,.82) 0%, rgba(18,28,34,.75) 42%, rgba(18,28,34,.54) 68%, rgba(18,28,34,.30) 100%),
    linear-gradient(to top, rgba(18,28,34,.5) 0%, rgba(18,28,34,0) 46%);}
.faith-in{position:relative;z-index:2;max-width:60ch}
.faith h2{color:#FBFDFD;max-width:20ch;margin-bottom:1.9rem}
.faith p{color:rgba(240,245,247,.9);max-width:52ch}
.faith .verdict{
  font-family:var(--f-display);
  font-size:clamp(1.95rem,1.15rem + 3.3vw,3.85rem);
  line-height:1.16;color:#FFE9A8;font-weight:400;
  margin:2.4rem 0 2.2rem;max-width:21ch;
  text-wrap:balance;font-style:italic;
}
.faith .open{color:rgba(233,240,243,.94);font-size:var(--step-lead);line-height:1.6}

/* ---------- bridge A3: the hinge ---------- */
.bridge{position:relative;overflow:hidden}
.bridge::before{content:"";position:absolute;right:-12%;top:-24%;width:min(680px,52%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(107,158,138,.18),rgba(107,158,138,0) 66%);pointer-events:none}
.bridge-in{position:relative;z-index:2;max-width:none}
h2.bridge-none{}
.bridge .lede{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.05rem,1.3rem + 3.4vw,4rem);line-height:1.08;letter-spacing:-.01em;
  color:var(--ink);margin:0;max-width:16ch;text-wrap:balance;
}
.bridge-foot{
  margin-top:clamp(2.4rem,4.5vw,3.6rem);padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid rgba(226,179,48,.72);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:clamp(2rem,4.5vw,4rem);align-items:start;
}
.bridge-foot .body{color:var(--ink-soft);margin:0}
.bridge-foot .courage{
  /* bold, not italic. 600 (not 700) because Faustina is loaded at 400/500/600 —
     700 would trigger faux-bold or an extra font download for one line. */
  margin:0 0 1.6rem;font-family:var(--f-display);font-style:normal;font-weight:600;
  font-size:clamp(1.24rem,1.02rem + .9vw,1.7rem);line-height:1.36;color:var(--ink);
}
@media (max-width:820px){
  .bridge-foot{grid-template-columns:1fr;gap:1.7rem}
  .bridge .lede{max-width:none}
}

/* ---------- bio ---------- */
.bio{position:relative;overflow:hidden}
.bio::before{
  content:"";position:absolute;left:-18%;top:8%;width:min(760px,72%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(107,158,138,.20), rgba(107,158,138,0) 66%);
  pointer-events:none;
}
.bio-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2.2rem,5.5vw,5.5rem);align-items:center}
.bio-text{
  background:rgba(107,158,138,.1);
  border-radius:22px;
  padding:clamp(1.8rem,3.6vw,2.9rem) clamp(1.8rem,3.4vw,3rem);
}
.bio-photo{position:relative}
.bio-photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:14px;
  box-shadow:0 34px 70px -40px rgba(30,42,48,.62);
}
.bio-cap{
  margin-top:1.05rem;text-align:center;
}
.bio-cap .nm{
  margin:0;font-size:1rem;font-weight:700;line-height:1.42;
  color:var(--ink);letter-spacing:.004em;
}
.bio-cap .lic{
  margin:.22rem 0 0;font-size:.85rem;font-weight:400;
  color:var(--ink-soft);letter-spacing:.02em;
}
.bio-open{
  font-family:var(--f-display);font-style:italic;
  /* 1.62rem is the intended desktop size — held from ~1000px up, then scaled
     down on smaller viewports instead of staying fixed at 26px on a phone. */
  font-size:clamp(1.3rem, 1.05rem + 1.05vw, 1.62rem);
  line-height:1.34;color:var(--sky-deep);margin:1rem 0 1.7rem;max-width:24ch;
}
.bio h2{margin-bottom:.2rem}
.bio p{color:var(--ink-soft);max-width:56ch}
.bio-act{margin-top:2rem}

/* ---------- method a1: the aside ---------- */
.method{border-top:1px solid rgba(226,179,48,.5);border-bottom:1px solid rgba(226,179,48,.5)}

/* "How I'll Walk with You from Here" — an open path through grassland, laid in
   as a whisper. Full-bleed and EVEN (no directional mask): a fade behind the
   copy reads as a wipe. Framed on the horizon so the path and grass carry it
   rather than empty sky. Lazy-loaded via .bg-loaded, never at LCP. */
.method::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center 78%;background-size:cover;background-repeat:no-repeat;
  /* --- subtlety knob --- */
  opacity:.15;
}
.method.bg-loaded::before{
  background-image:url('../images/home-method-path.jpg');
  background-image:image-set(url('../images/home-method-path.webp') type('image/webp'),
                             url('../images/home-method-path.jpg') type('image/jpeg'));
}
.method .shell{position:relative;z-index:1}
@media (max-width:768px){.method::before{opacity:.11}}
.method-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.method-lead h2{margin:0 0 1.4rem;max-width:15ch}
.method-lead p{color:var(--ink-soft);max-width:46ch}
.method-lead .act{margin-top:2.1rem}
.method-note{
  background:linear-gradient(155deg,rgba(63,106,131,.72) 0%,rgba(53,88,114,.72) 100%),#3F6A83 url('../images/texture-fabric-lightblue-wm.jpg') center/cover;
  background:linear-gradient(155deg,rgba(63,106,131,.72) 0%,rgba(53,88,114,.72) 100%),
             image-set(url('../images/texture-fabric-lightblue-wm.webp') type('image/webp'),
                       url('../images/texture-fabric-lightblue-wm.jpg') type('image/jpeg'));
  border-radius:20px;padding:clamp(1.9rem,3.2vw,2.5rem);
  border:1px solid rgba(226,179,48,.78);
  align-self:start;
}
.method-note .lh-note{display:block;width:clamp(150px,16vw,166px);height:auto;margin:0 0 1.25rem;
  --lh-word:#F7F4EF;--lh-hope:#F7F4EF;--lh-tag:#F7F4EF;--lh-rule:#E2B330}
.method-note .lbl{margin:0 0 .85rem;
  font-family:var(--f-display);font-weight:600;color:#FFE9A8;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.method-note .fp{margin:0;font-family:var(--f-display);font-size:1.16rem;line-height:1.56;color:#EAF1F4}
.method-note .fp+.fp{margin-top:.85em}
@media (max-width:820px){.method-grid{grid-template-columns:1fr;gap:1.9rem}.method-lead p{max-width:56ch}}

/* ---------- services: alternating letterbox rows ---------- */
.svc-head{max-width:46ch;margin-bottom:clamp(2.2rem,4.4vw,3.2rem);margin-left:0}
.svc-head h2{margin-bottom:.9rem}
.svc-head p{color:var(--ink-soft)}
.rows{display:flex;flex-direction:column;gap:clamp(1.1rem,2.2vw,1.9rem)}
.row{
  display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);
  align-items:stretch;
  background:var(--paper);border-radius:22px;overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:0 2px 0 rgba(30,42,48,.04),0 22px 48px -34px rgba(30,42,48,.5);
  transition:box-shadow .5s var(--ease-out);
}
.row:hover{box-shadow:0 2px 0 rgba(30,42,48,.04),0 34px 62px -32px rgba(30,42,48,.58)}
/* Gold hairline between the photo and the copy — extends the accent-divider
   motif (section borders, .rule-mark, .pay .who) into the cards, and gives the
   row an internal structure the flat white was missing. Rows alternate image
   left/right, so the border swaps sides with the order. */
.row-img{position:relative;overflow:hidden;min-height:clamp(188px,19.5vw,242px);
  border-right:2px solid rgba(226,179,48,.75)}
.row:nth-child(even) .row-img{border-right:0;border-left:2px solid rgba(226,179,48,.75)}
.row-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out)}
.row:hover .row-img img{transform:scale(1.055)}
.row-txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.5rem,3vw,2.3rem) clamp(1.6rem,3.2vw,2.8rem) clamp(1.5rem,3vw,2.3rem) clamp(1.6rem,3vw,2.4rem)}
.row:nth-child(even) .row-img{order:2}
.row-txt h3{
  position:relative;align-self:flex-start;max-width:100%;
  padding-bottom:.4em;
  font-size:clamp(1.34rem,1.05rem + 1.25vw,2.05rem);
  transition:color .35s var(--ease);
}
.row-txt h3::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--buttercup);border-radius:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-out);
}
.row:hover .row-txt h3::after,.row:focus-visible .row-txt h3::after{transform:scaleX(1)}
.row-txt p{color:var(--ink-soft);font-size:1.06rem;line-height:1.6;margin:.7rem 0 1rem;max-width:38ch}
.svc-more{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.855rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sky)}
.svc-more .arw{transition:transform .45s var(--ease-out)}
.row:hover .svc-more .arw{transform:translateX(5px)}
@media (max-width:760px){
  .row{grid-template-columns:1fr}
  .row-img{min-height:0;aspect-ratio:16/9}
  .row:nth-child(even) .row-img{order:0}
  /* stacked: the divider becomes horizontal, under the photo */
  .row-img,.row:nth-child(even) .row-img{border-left:0;border-right:0;
    border-bottom:2px solid rgba(226,179,48,.75)}
  .row-txt{padding:1.4rem 1.45rem 1.7rem}
}

/* ---------- payoff A1: the quick read ---------- */
.payoff{padding:clamp(3.4rem,6.5vw,5.2rem) 0;border-top:1px solid rgba(226,179,48,.5);border-bottom:1px solid rgba(226,179,48,.5)}
.payoff-head{margin-bottom:clamp(1.8rem,3.4vw,2.6rem)}
.payoff-head h2{max-width:14em}
.payoff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.4vw,3rem)}
.pay .who{
  display:block;margin:0 0 .55rem;padding-bottom:.42rem;
  border-bottom:1px solid rgba(226,179,48,.72);
  font-family:var(--f-display);font-weight:600;letter-spacing:-.008em;
  font-size:clamp(1.08rem,1rem + .5vw,1.35rem);color:var(--ink);
}
.pay p{margin:0;font-size:.985rem;line-height:1.58;color:var(--ink-soft)}
.pay p+p{margin-top:.75em}
@media (max-width:860px){.payoff-grid{grid-template-columns:1fr;gap:1.7rem}.pay p{max-width:56ch}}

/* ---------- final CTA ---------- */
.cta{position:relative;overflow:hidden;padding:clamp(5rem,9vw,8.5rem) 0}
.cta-img{position:absolute;inset:0}
.cta-img img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.cta-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(16,26,32,.95) 0%, rgba(18,30,37,.88) 40%, rgba(20,34,42,.62) 70%, rgba(20,34,42,.42) 100%);
}
.cta-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.cta h2{color:#FFFDF8;max-width:15ch;margin-bottom:1.5rem}
.cta .take{
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.28rem,1.05rem + 1vw,1.72rem);color:var(--buttercup);
  margin-bottom:1.3rem;line-height:1.34;
}
.cta-in>div>p{color:rgba(240,246,248,.85);max-width:44ch}
.cta-contact{margin-top:2.4rem;display:flex;flex-direction:column;gap:.85rem}
.cta-contact a{
  display:inline-flex;align-items:center;gap:.75rem;width:fit-content;
  padding:.8rem 1.15rem;border-radius:14px;
  background:rgba(255,253,248,.1);border:1px solid rgba(255,253,248,.22);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  color:#FFFDF8;text-decoration:none;font-size:1.04rem;font-weight:600;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.cta-contact a:hover{background:rgba(255,253,248,.18);border-color:rgba(255,233,168,.6);color:var(--buttercup)}
.cta-contact svg{width:18px;height:18px;stroke:var(--buttercup);stroke-width:1.7;fill:none;flex-shrink:0}
/* NB: colour here is dead — `.cta-in>div>p` (0,1,2) outranks `.cta-meta` (0,1,0)
   and paints this at rgba(240,246,248,.85). Change it there, not here. */
.cta-meta{margin-top:1.6rem;font-size:.9rem;max-width:34ch;line-height:1.6}

.form-card{
  background:rgba(247,244,239,.97);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:22px;
  padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
.form-card h3{font-size:1.42rem;margin-bottom:.4rem}
.form-card .fsub{font-size:.92rem;color:var(--ink-soft);margin-bottom:1.5rem}
.fld{margin-bottom:1.05rem}
.fld label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.42rem}
.fld input,.fld textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:var(--paper);
  border:1px solid rgba(30,42,48,.18);
  border-radius:11px;
  padding:.82rem .95rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fld textarea{resize:vertical;min-height:104px;line-height:1.55}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(74,122,150,.16)}
.fld input::placeholder,.fld textarea::placeholder{color:#7E8C93}
.form-card .btn{width:100%;justify-content:center;margin-top:.4rem}
.form-card .form-note{margin-top:1rem;font-size:.82rem;color:#5A6B74;line-height:1.55;text-align:center}
.sent{display:none;text-align:center;padding:1.5rem 0}
.sent h3{color:var(--sky-deep);margin-bottom:.6rem}
.sent p{font-size:.98rem;color:var(--ink-soft)}
.form-card.done form{display:none}
.form-card.done .sent{display:block}

/* ---------- footer ---------- */
.ftr{background:#A4BC8E;color:rgba(30,42,48,.82);padding:3.4rem 0 2.6rem}
.ftr-in{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.4rem;justify-content:space-between}
.ftr-brand{display:flex;align-items:center}
.lh-ftr{width:clamp(180px,20vw,228px);--lh-word:#1E2A30;--lh-hope:#1E2A30;--lh-tag:#1E2A30;--lh-rule:#E2B330}
.ftr-links{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.ftr-links a{color:rgba(30,42,48,.76);text-decoration:none;font-size:.86rem;transition:color .3s var(--ease)}
.ftr-links a:hover{color:var(--buttercup)}
.ftr-soc{display:flex;align-items:center;gap:.7rem}
.ftr-soc a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(30,42,48,.25);color:rgba(30,42,48,.85);
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease);
}
.ftr-soc a:hover{border-color:var(--buttercup);color:var(--buttercup);background:rgba(226,179,48,.09)}
  .ftr-soc svg{width:17px;height:17px}
.pt-icon{font-family:var(--f-display);font-weight:600;font-size:.86rem;letter-spacing:.02em;line-height:1}
.pt-badge{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;
  border:1px solid rgba(30,42,48,.25);border-radius:var(--stone);
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:rgba(30,42,48,.85);text-decoration:none;white-space:nowrap;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.pt-badge:hover{border-color:var(--buttercup);color:var(--buttercup)}
.ftr-base{
  margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(30,42,48,.20);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;
  font-size:.83rem;color:rgba(30,42,48,.68);
}

/* @critical:start — everything to @critical:end is inlined above the fold */
/* ---------- mobile sticky conversion bar ---------- */
.mobar{display:none}
.mobar.tucked{transform:translateY(115%)}
/* LANDSCAPE PHONES — 2026-08-13
   The 2026-08-04 pass was portrait-only, gated on max-width:768px. An iPhone
   13 in landscape is 926px WIDE (and 428px tall), so it cleared that gate and
   got the desktop layout in a 428px-tall window: desktop nav with no burger,
   no sticky bar, and the header CTA cut off.
   Height is the reliable signal, not width — max-height:500px catches every
   phone in landscape while excluding iPad Pro 11 landscape (834px tall), which
   no max-width rule can do. The touch conditions keep a short desktop window
   out of it. This same condition is appended to the .mobar, nav/drawer,
   final-CTA and footer blocks; the burger and its drawer MUST stay on one
   condition or the menu opens into nothing. */
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){
  .mobar{
    display:grid;grid-template-columns:1fr 1.75fr;gap:.55rem;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));
    background:rgba(247,244,239,.96);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 -1px 0 rgba(30,42,48,.10), 0 -14px 34px -26px rgba(30,42,48,.6);
  }
  .mobar a{
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    min-height:48px;padding:.6rem .5rem;border-radius:14px;
    font-size:.92rem;font-weight:600;text-decoration:none;white-space:nowrap;
  }
  .mobar .mb-book{font-size:.95rem}
  .mobar .mb-call{background:transparent;color:#1E2A30;border:1.5px solid rgba(30,42,48,.28)}
  .mobar .mb-book{background:#E2B330;color:#33270A}
  .mobar svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none}
  body{padding-bottom:78px}
  .mobar{transition:transform .4s var(--ease)}
}

/* ---------- reveal (sparing) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--shell:min(1200px, 100% - 2.5rem)}

  .bio-grid{grid-template-columns:1fr;gap:2.4rem}
  .bio-photo{max-width:400px}
  .cta-in{grid-template-columns:1fr;gap:2.6rem}
}
@media (max-width:900px){
}
/* Landscape phones join this block — see the note above .mobar. This is what
   swaps the crammed desktop nav for the burger + drawer and drops .hdr-cta,
   whose "Book a Free Consult" button was running off the right edge. */
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){
  :root{--shell:min(1200px, 100% - 2rem)}
  .burger{display:block;position:relative;z-index:95;padding:.8rem}
  .hdr-cta{display:none}
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--linen);
    padding:4.7rem 1.5rem 1.1rem;
    max-height:100svh;overflow-y:auto;
    transform:translateY(-102%);transition:transform .5s var(--ease-out);
    box-shadow:0 30px 60px -30px rgba(30,42,48,.5);
  }
  .nav.open{transform:translateY(0)}
  .nav>li{width:100%}
  .nav a,.nav .top{color:var(--ink) !important;padding:.62rem .2rem;font-size:1.05rem;border-radius:0}
  /* Parent rows are real toggles in the drawer, so they must take taps. */
  .nav .top{pointer-events:auto;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;width:100%;min-height:44px}
  .nav .top .cv{display:block;width:12px;height:12px;flex:0 0 auto;
    transition:transform .3s var(--ease)}
  .nav .top[aria-expanded="true"] .cv{transform:rotate(180deg)}
  /* Collapsed by default. NOT the grid 0fr->1fr trick: that only sizes the
     first row, and every <li> here creates its own row, so the 2nd and 3rd
     items stayed visible at full height. max-height is the reliable collapse
     for a multi-child list; 340px clears the longest submenu (3 items). */
  .sub,.dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;background:transparent;padding:0;min-width:0;list-style:none;
    display:block;overflow:hidden;max-height:0;
    transition:max-height .32s var(--ease);
  }
  .nav .top[aria-expanded="true"] + .sub{max-height:340px}
  .sub li{margin-left:.9rem}
  .sub li:first-child{padding-top:.15rem}
  .sub li:last-child{padding-bottom:.5rem}
  .sub li{list-style:none}
  .sub a{font-size:.97rem;padding:.66rem .2rem;color:var(--ink-soft) !important}
  /* Hero was 92svh (~757px on a 823px viewport). That made the LCP image slot
     721x1442 device px on PSI's DPR-1.75 device — the single largest download
     on the page. 76svh keeps the composition and pulls the CTA higher up the
     fold, at 28% fewer hero pixels. */
  .hero{min-height:clamp(520px,76svh,660px)}
  .hero-in{padding:5.4rem 0 1.5rem}
  /* The hero stack (h1 + sub + offer + location + CTA) does not fit a shorter
     hero on a 667px-tall phone — content ran to zero slack and tucked under
     the fixed header. Drop the two-line sub on mobile portrait only; it stays
     in the DOM, stays ACF-editable, and desktop is untouched where there is
     room for it. */
  .hero-sub{display:none}
  /* Homepage narrative sections ran a flat 6rem/96px top and bottom on mobile,
     which reads as dead space between short blocks and was inconsistent with
     .method (51px) and .payoff (54px) sitting between them. */
  .story-1,.story-2,.story-3,.faith,.bridge{padding-top:3.9rem;padding-bottom:3.9rem}
  /* Vignette paragraph breaks read as a full blank line. The global
     p{margin-bottom:1.15em} is only 0.67x the 1.72 line-height, so on a phone —
     where each of these paragraphs wraps to 5-6 lines — the gap BETWEEN
     paragraphs is smaller than the leading INSIDE one and the blocks merge.
     A reader reported the stories had no apparent break in wording. */
  .story p{margin-bottom:1.9em}
  .bio{padding-top:3.9rem}
  .s3{margin-right:0}
  .band{height:clamp(200px,32vh,300px)}
}
@media (max-width:560px){
  .ftr-in{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .ftr-base{flex-direction:column;gap:.5rem}
}
.nav-tel,.nav-cta{display:none}

/* touch-device accessibility: min 14px, no fixed backgrounds */
@media (hover:none) and (pointer:coarse){
  .cta-contact a,.cta-reach a{min-height:44px;padding-block:.5rem}
  .ftr-links a{display:inline-block;padding:.62rem 0}
  .ftr-soc a{width:44px;height:44px}

  .band{background-attachment:scroll}
  .footnote,.bio-cap .lic,.form-note,.ftr-base,.pt-badge,.pt-icon,.ftr-links a,.hero-note,.svc-more,.fld label{font-size:.88rem !important}
  .pt-badge,.svc-more,.fld label{letter-spacing:.05em}
  .cta-meta{font-size:.92rem}
  .btn,.hdr .btn,.nav a,.nav .top,.sub a,.hdr-tel{font-size:.94rem !important}
}

/* ==================================================================
   TPA SCAFFOLD APPENDS — inner-page container, force-visible net,
   legal-page no-fade, extra touch-a11y floors for WordPress markup.
   The homepage nav/hero/reveal/touch system above is the mockup's
   own, self-contained — do not duplicate it here.
   ================================================================== */

html, body { overflow-x: clip; }

/* ---- Inner-page container + readable body width (Rule #4 / §2.13) ---- */
.container { width: var(--shell); margin-inline: auto; }
.service-body { max-width: var(--service-body-max, 1080px); margin: 0 auto; }

/* Inner-page hero + body shells (hand-built inner templates use these) */
/* ---------- inner hero: EDITORIAL SPLIT ----------
   The photograph runs at 100% — no overlay, no scrim, no filter. Readability
   comes from a solid sky-deep panel beside it, never from dimming the image.
   Title text is left-padded to land on the same vertical line as the content
   below it. Gold sits UNDER the title (brand rule: gold is a hairline, always
   under a line that stands alone) and as the seam between panel and photo,
   echoing the service-card divider. */
.inner-hero{
  position:relative;overflow:hidden;background:var(--sky-deep);
  /* DEFINITE height, not min-height: the photo uses height:100% + object-fit,
     which can't resolve against an auto row — it was falling back to the file's
     natural aspect and rendering ~596px tall. */
  /* The panel is 42vw wide, so 28vw holds it at exactly 3:2 (42/28) at EVERY
     width — capped at 400px so it never grows past that on wide screens, and
     floored at 300px so it stays usable on small laptops. A flat 400px made
     the panel go square/portrait below ~1100px. */
  height:clamp(300px, 28vw, 400px);
  display:grid;grid-template-columns:42% 58%;align-items:stretch;
}
/* photo column — DOM order is bg-then-content, so re-order visually */
.inner-hero-bg{position:relative;z-index:0;order:2;height:100%;overflow:hidden}
.inner-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* no overlay of any kind */
.inner-hero::after{content:none}

.inner-hero-content{
  order:1;position:relative;z-index:2;
  width:auto;margin:0;
  background:linear-gradient(155deg,rgba(58,97,120,.7),rgba(53,88,114,.7)),var(--sky-deep) url('../images/texture-fabric-lightblue-wm.jpg') center/cover;
  background:linear-gradient(155deg,rgba(58,97,120,.7),rgba(53,88,114,.7)),
             image-set(url('../images/texture-fabric-lightblue-wm.webp') type('image/webp'),
                       url('../images/texture-fabric-lightblue-wm.jpg') type('image/jpeg'));
  border-right:2px solid rgba(226,179,48,.75);
  /* Centred in the band. The top padding below is the guaranteed clearance for
     the ~105px fixed header — centring can never pull the title above it. */
  display:flex;flex-direction:column;justify-content:center;
  /* Align the title with the BODY COPY below it (.service-body, 1080px inside
     the 1200px shell) — not the shell edge, which sits 60px further left. */
  padding:clamp(112px,7.5vw,118px) clamp(1.25rem,2.5vw,2.25rem)
          clamp(1rem,2vw,1.5rem)
          max(1.25rem, calc((100vw - min(var(--service-body-max, 1080px), 100vw - 3rem)) / 2));
}
/* Must outrank the body h2s below it (--step-h2, 50.4px @1440). Sits between
   those and the homepage h1 (72px) so the page title reads as the top of the
   hierarchy without competing with the homepage. */
.inner-hero-content h1,.inner-page-title{
  color:#FFFDF8;max-width:15ch;text-shadow:none;
  font-size:clamp(2.1rem,1.35rem + 2.7vw,3.6rem);line-height:1.08;
  padding-bottom:.65rem;border-bottom:1px solid rgba(226,179,48,.72);
}

/* stack on tablet/phone: panel above, photo beneath, full-bleed */
@media (max-width:820px){
  .inner-hero{grid-template-columns:1fr;height:auto}
  .inner-hero-content{
    border-right:0;border-bottom:2px solid rgba(226,179,48,.75);
    /* panel sits at the top on mobile, still under the fixed header */
    padding:clamp(110px,26vw,124px) clamp(1.25rem,5vw,2rem) clamp(1.2rem,4vw,1.6rem);
  }
  .inner-hero-content h1,.inner-page-title{max-width:24ch}
  .inner-hero-bg{height:clamp(140px,34vw,210px)}
}
.inner-content{padding:clamp(3.4rem,7vw,6rem) 0}

/* First subheadline = same styling as every body H2, LEFT aligned (Phase 4 rules) */
.inner-lead{margin:0;text-align:left}
.inner-lead h2{font-family:var(--f-display);font-style:normal;font-weight:500;color:var(--ink);
  font-size:var(--step-h2);line-height:1.12}

/* Uniform section spacing inside .service-body */
.svc-img-section{margin:0}
.service-body > h2,
.service-body > .svc-img-section,
.service-body > .svc-text-block,
.service-body > .svc-closing,
.service-body > .about-diane{margin-top:clamp(46px,7vw,84px)}
.service-body > .inner-lead{margin-top:0}
/* The section-spacing margin above also lands on the FIRST child, adding ~84px
   nobody asked for — About/services sat at 180px from the hero while Contact
   and FAQ sat at 96px. Zero it so every inner page starts at the section's own
   padding (96px) and they all match. */
.service-body > *:first-child{margin-top:0}
/* margin-BOTTOM only — the `margin` shorthand here has the same specificity as
   `.service-body > h2` above and, coming later, was resetting its section
   margin-top to 0. Full-width text sections then had no top spacing while
   .svc-img-section (a div, untouched by this rule) kept its 84px. */
.service-body h2{font-family:var(--f-display);font-weight:500;color:var(--ink);
  font-size:var(--step-h2);line-height:1.12;margin-bottom:1.25rem}
.service-body p{color:var(--ink-soft);margin:0 0 1.1em}
/* Legal pages (Privacy Policy, Terms & Conditions) pack in dozens of
   h2/h3/h4 headings across one long document, unlike narrative service pages
   where h2 appears once per big section. The clamp(46px,7vw,84px) rhythm
   above is correct for the latter but towers over the surrounding copy when
   it fires before nearly every subsection here — so legal pages get their
   own, much tighter h2 rhythm. h3/h4 were never styled at all for
   .service-body (relying on the universal `*{margin:0}` reset with no
   override), so they had zero margin in either direction and inherited the
   base theme's sans-serif instead of matching h2's family/color — give them
   real spacing and heading treatment here too. */
.service-body--legal > h2{margin-top:clamp(28px,3vw,40px)}
.service-body--legal h3{font-family:var(--f-display);font-weight:500;color:var(--ink);
  font-size:1.35rem;line-height:1.2;margin:1.9rem 0 .75rem}
.service-body--legal h4{font-family:var(--f-display);font-weight:500;color:var(--ink);
  font-size:1.1rem;line-height:1.2;margin:1.4rem 0 .5rem}

/* Image-beside-text (Rule #7) */
.svc-img-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:stretch}
.svc-img-section--reverse .svc-img-col{order:-1}
.svc-text-col h2{margin-top:0}
.svc-img-col{position:relative;min-height:100%;border-radius:16px;overflow:hidden}
.svc-img-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Per-image focal point tweaks so the subject stays in frame under cover-crop */
.svc-img-col img[src*="teen-therapy-body1-wm"]{object-position:20% 40%}
.svc-img-col img[src*="christian-counseling-body3-wm"]{object-position:50% 0%}
@media (max-width:768px){
  .svc-img-section{grid-template-columns:1fr;gap:1.6rem}
  .svc-img-section--reverse .svc-img-col{order:0}
  .svc-img-col{min-height:0;aspect-ratio:4/3}
}

/* ---- forceVisible safety net (inner pages, non-animated) ---- */
@keyframes forceVisible { to { opacity:1; transform:none; } }
.inner-content,
.contact-grid,
.service-body { animation: forceVisible 0.01s 8s forwards; }
.reveal.in { opacity:1; transform:none; animation:none; }

/* ---- Legal pages never fade in ---- */
body.page-terms-and-conditions .reveal,
body.page-terms-and-conditions .fade-in,
body.page-privacy-policy .reveal,
body.page-privacy-policy .fade-in,
body.page-thank-you .reveal,
body.page-thank-you .fade-in{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}

/* ---- Extra touch-a11y floors for WP-generated markup ---- */
@media (hover:none) and (pointer:coarse){
  a[href^="tel:"]:not(.mob-phone):not(.mobar a),
  a[href^="mailto:"]{min-height:44px;padding:12px 0;display:inline-block;box-sizing:border-box}

  .wpforms-form .wpforms-submit,
  button[type="submit"].wpforms-submit{min-height:44px !important;padding-top:12px !important;padding-bottom:12px !important;box-sizing:border-box !important}

  .wpforms-container .wpforms-field-label,
  .wpforms-container .wpforms-field-label.wpforms-field-label{font-size:14px !important;line-height:1.4 !important}
}
/* @critical:end */

/* Legal-page link targets are below the fold, so they close out of the block
   above and reopen here — leaving the marker mid-block emitted an unclosed
   @media into the inlined critical CSS. */
@media (hover:none) and (pointer:coarse){
  body.page-privacy-policy .inner-content a,
  body.page-terms-and-conditions .inner-content a{display:inline-block;min-height:44px;padding:11px 0;line-height:1.4;box-sizing:border-box}
}

/* ================= INNER PAGE: CONTACT ================= */
.contact-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
.contact-intro{margin-bottom:1.8rem}
/* global reset zeroes heading margins and the restore rule is scoped to
   .service-body — the contact intro renders outside it, so give it the same
   treatment as every other inner-page H2. */
.contact-intro h2{font-family:var(--f-display);font-weight:500;color:var(--ink);
  font-size:var(--step-h2);line-height:1.12;margin:0 0 1.25rem}
.contact-intro p{color:var(--ink-soft)}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.contact-list li{display:flex;flex-direction:column;gap:.15rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(226,179,48,.4)}
.contact-list li:last-child{border-bottom:0}
.cl-label{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.contact-list a{font-family:var(--f-display);font-size:1.3rem;color:var(--sky-deep);text-decoration:none}
.contact-list a:hover{color:var(--buttercup)}
.contact-social{margin-top:1.8rem;display:flex;gap:1.2rem}
.contact-social a{font-size:.9rem;font-weight:600;color:var(--sky);text-decoration:none}
.contact-social a:hover{color:var(--buttercup)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:2.2rem}}

/* ================= BLOG ================= */
.blog-list{max-width:760px}
.blog-card{padding:clamp(1.8rem,4vw,2.6rem) 0;border-bottom:1px solid rgba(226,179,48,.45)}
.blog-card:first-child{padding-top:0}
.blog-card__date{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem}
.blog-card__title{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin:0 0 .7rem}
.blog-card__title a{color:var(--ink);text-decoration:none}
.blog-card__title a:hover{color:var(--sky-deep)}
.blog-card__excerpt p{color:var(--ink-soft)}
.blog-card__more{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sky);text-decoration:none}
.blog-card__more .arw{transition:transform .45s var(--ease-out)}
.blog-card__more:hover .arw{transform:translateX(5px)}
.blog-pagination ul{display:flex;gap:.5rem;list-style:none;padding:2rem 0 0;margin:0}
.blog-pagination a,.blog-pagination span{display:grid;place-items:center;min-width:40px;height:40px;border-radius:8px;text-decoration:none;color:var(--ink)}
.blog-pagination .current{background:var(--sky);color:#fff}

/* ================= SINGLE POST ================= */
.post-body{max-width:720px;margin:0 auto}
.post-back{display:inline-block;margin-bottom:1.2rem;font-size:.9rem;font-weight:600;color:var(--sky);text-decoration:none}
.post-back:hover{color:var(--buttercup)}
.post-meta{font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.8rem}
.post-content{font-size:1.16rem;line-height:1.85;color:var(--ink)}
.post-content p{margin:0 0 1.3em}
.post-content h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin:2em 0 .6em}
.post-content blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.4em;border-left:3px solid var(--buttercup);
  font-family:var(--f-display);font-style:italic;font-size:1.35rem;line-height:1.5;color:var(--sky-deep)}

/* combined call/text icon in the CTA contact rows — wider viewBox than the
   single-glyph icons, so it needs its own width to avoid squashing */
.cta-contact .ic-callchat{width:31px;height:21px}

/* ================= ABOUT: "About Diane" — its own treatment =================
   The bio is the emotional centre of the About page and shouldn't read as just
   another text section. It breaks full-bleed out of the content column into a
   sage band (echoing the homepage bio's sage-tinted panel), with a portrait
   plate beside the prose and gold-hairline sub-headings. */
.about-diane{
  position:relative;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;
  padding:clamp(46px,5.5vw,84px) 0;
  background:var(--creek-mist);
  border-top:1px solid rgba(226,179,48,.5);
  border-bottom:1px solid rgba(226,179,48,.5);
}
.about-diane-in{
  width:min(var(--service-body-max,1080px), 100% - 3rem);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.8rem,3.6vw,3.2rem);align-items:start;
}
.ad-aside{position:sticky;top:calc(var(--faqx-sticky, 124px))}
.ad-portrait{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:14px;box-shadow:0 30px 60px -38px rgba(30,42,48,.6);
}
.ad-cred{
  margin:.9rem 0 0;text-align:center;font-size:.85rem;letter-spacing:.02em;
  color:var(--ink-soft);
}
/* Renamed from .ad-body / .ad-card — ad blockers' generic cosmetic filters
   hide any element whose class matches that "ad-" prefix (confirmed live:
   a bare test <div class="ad-card"> gets display:none with no matching
   page rule at all), which was silently deleting Diane's entire bio card
   and body copy for every visitor running one. */
.dub-body{background:var(--paper);border-radius:18px;
  padding:clamp(1.6rem,3vw,2.6rem) clamp(1.5rem,3vw,2.6rem);
  box-shadow:0 2px 0 rgba(30,42,48,.04),0 26px 54px -40px rgba(30,42,48,.45)}
.dub-body > h2{margin-top:0}
.ad-lead{
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.24rem,1.02rem + .9vw,1.62rem);line-height:1.34;
  color:var(--sky-deep);margin:0 0 1.4rem;
  padding-bottom:.85rem;border-bottom:1px solid rgba(226,179,48,.72);
}
.dub-body h3{
  font-family:var(--f-display);font-weight:600;color:var(--ink);
  font-size:clamp(1.16rem,1rem + .6vw,1.42rem);line-height:1.2;
  margin:2.1rem 0 .1rem;padding-bottom:.5rem;
  border-bottom:1px solid rgba(226,179,48,.55);
}
.dub-body h3 + p{margin-top:.9rem}
@media (max-width:820px){
  .about-diane-in{grid-template-columns:1fr;gap:1.6rem}
  .ad-aside{position:static;max-width:320px;margin-inline:auto}
}

/* ---- About Diane: credential card beneath the portrait ---- */
.dub-card{margin-top:1rem;background:var(--paper);border-radius:14px;
  padding:clamp(1.1rem,2vw,1.5rem) clamp(1.1rem,2vw,1.4rem);
  box-shadow:0 2px 0 rgba(30,42,48,.04),0 20px 44px -34px rgba(30,42,48,.42)}
.ad-name{margin:0;font-family:var(--f-display);font-weight:600;font-size:1.16rem;
  line-height:1.25;color:var(--ink);text-align:center;
  padding-bottom:.55rem;border-bottom:2px solid rgba(226,179,48,.75)}
.ad-cred{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.ad-facts{margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.ad-facts > div{display:flex;flex-direction:column;gap:.15rem;
  padding-bottom:.85rem;border-bottom:1px solid rgba(226,179,48,.34)}
.ad-facts > div:last-child{padding-bottom:0;border-bottom:0}
.ad-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}
.ad-facts dd{margin:0;font-size:.94rem;line-height:1.5;color:var(--ink)}
@media (hover:none) and (pointer:coarse){
  .ad-cred{font-size:.88rem}
  .ad-facts dt{font-size:.8rem}
  .ad-facts dd{font-size:.95rem}
}

/* Inner-hero wave — the homepage curve, released into the linen below.
   Flattened (homepage is ~90px on a ~900px hero; this band is ~400px, so the
   same 90px would read twice as heavy). Sits above both the panel and the
   photo, so the curve crosses the full width as one edge. */
.inner-wave{
  position:absolute;left:0;right:0;bottom:-1px;z-index:4;
  display:block;width:100%;height:clamp(26px,3.4vw,50px);
  pointer-events:none;
}

/* linked fact rows in the About credential card */
.ad-facts a{color:var(--sky-deep);text-decoration:none;
  border-bottom:1px solid rgba(226,179,48,.75);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.ad-facts a:hover{color:var(--buttercup);border-bottom-color:var(--buttercup)}
@media (hover:none) and (pointer:coarse){
  /* Keep the 44px tap target, but the gold rule must hug the glyphs — a
     border-bottom sits at the padded box edge, ~14px adrift of the text. */
  .ad-facts a{display:inline-block;min-height:44px;padding:11px 0;box-sizing:border-box;
    border-bottom:0;text-decoration:underline;
    text-decoration-color:rgba(226,179,48,.75);
    text-decoration-thickness:1px;text-underline-offset:4px}
}

/* Final-CTA wave — the same curve, inverted, so the section above spills into
   the dark CTA. Fill must match whatever precedes it: linen by default (inner
   pages), warm linen on the homepage where the payoff band sits above. */
.cta{--cta-wave-fill:var(--linen)}
.cta-wave{position:absolute;left:0;right:0;top:-1px;z-index:4;
  display:block;width:100%;height:clamp(26px,3.4vw,50px);
  transform:scaleY(-1);pointer-events:none}
.cta-wave path{fill:var(--cta-wave-fill)}
body.home .cta{--cta-wave-fill:var(--linen-warm)}

/* The gold hairline now follows the wave instead of cutting straight across
   it. vector-effect keeps the stroke an even weight despite the SVG being
   squashed by preserveAspectRatio="none". */
/* MUST be `.cta-wave path.cta-wave-rule` — `.cta-wave path{fill:...}` above is
   (0,1,1) and outranks a bare `.cta-wave-rule` (0,1,0). Without this the open
   stroke path also gets FILLED, and the browser closes it with a chord from
   its start point to its end point, painting a translucent lens between the
   curve and that chord. That was the grey sliver on the left of the wave. */
.cta-wave path.cta-wave-rule{fill:none;stroke:var(--buttercup);stroke-width:1.5;opacity:.72}
/* payoff's straight bottom rule would sit directly on top of that curve */
.payoff{border-bottom:0}


/* ========== TOUCH A11Y — gaps found in the final audit sweep ==========
   14px text / 44x44 target floors on touch devices only. Desktop keeps its
   intentionally smaller fine print. */
@media (hover: none) and (pointer: coarse){
  /* About page detail list labels rendered 12.8px */
  .about-detail dt,.ad-detail dt,.about-diane dt{font-size:14px !important;line-height:1.4 !important}
  /* Contact page channel labels rendered 12.5px */
  .cl-label{font-size:14px !important}
  /* Blog cards: date 13.1px, "Continue reading" 13.8px in a 24px-tall target */
  .blog-card__date{font-size:14px !important}
  .blog-card__more{font-size:14px !important;min-height:44px;display:inline-flex;align-items:center}
}

/* Burger measured 50.6x43.6 — three 2px bars + two 6px gaps + .8rem padding
   lands 0.4px under the 44px floor. MUST be scoped to the breakpoint where the
   burger is actually shown: setting `display` in the unscoped touch block above
   overrides the base `display:none` and re-shows the burger on iPad Pro 11
   landscape (1194px AND a touch device), next to the full desktop nav. */
@media (hover:none) and (pointer:coarse) and (max-width:768px){
  .burger{min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
}

/* ==================================================================
   MOBILE PORTRAIT PASS — 2026-08-04
   Below the fold, so deliberately OUTSIDE the @critical markers.
   ================================================================== */
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){

  /* (8) Final-CTA contact chips. The phone/email pills ran .8rem/1.15rem,
     which put the icon and text hard against the pill border on a narrow
     screen. Substantially roomier, and full width so they read as buttons
     rather than tags crowded into the left gutter. */
  .cta-contact{margin-top:2rem;gap:1rem}
  .cta-contact a{
    width:100%;justify-content:flex-start;
    padding:1.1rem 1.5rem;gap:1rem;border-radius:16px;
  }

  /* (11) Inner pages: one spacing rhythm instead of three. The section ran
     54px, every h2 added 46px, and .svc-img-section added another 46px on
     top of that — so a heading after an image block sat ~92px down while a
     plain heading sat 46px down. Single 34px step everywhere, and the
     first heading inside an image block defers to the block's own margin. */
  .inner-content{padding-top:2.6rem;padding-bottom:2.6rem}
  /* Override the canonical .service-body group rule (clamp(46px,7vw,84px)).
     It is specificity 0,2,0, so a bare .svc-img-section cannot reach it —
     match the selectors exactly or only the h2s move and the image blocks
     keep their 46px, which is the inconsistency being reported. */
  .service-body > h2,
  .service-body > .svc-img-section,
  .service-body > .svc-text-block,
  .service-body > .svc-closing,
  .service-body > .about-diane{margin-top:2.15rem}
  .inner-content h2{margin-top:2.15rem}
  .service-body > *:first-child,
  .svc-text-col > h2:first-child,
  .inner-content h2:first-child{margin-top:0}
}

/* (9) Footer: centre every row on mobile — logo, social icons, legal links,
   copyright and the CA licence line. Landscape included as of 2026-08-13; it
   was left on space-between, so the copyright and licence sat apart. */
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){
  .ftr-in{
    flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:1.3rem;
  }
  .ftr-brand{justify-content:center}
  .ftr-soc{justify-content:center;width:100%}
  .ftr-links{justify-content:center;width:100%;text-align:center}
  .ftr-base{text-align:center;align-items:center;justify-content:center}
  .ftr-base span{display:block;width:100%;text-align:center}
}

/* ==================================================================
   MOBILE LANDSCAPE PASS — 2026-08-13
   Companion to the portrait pass above. Rules here are landscape-ONLY:
   everything a landscape phone shares with portrait was handled by adding
   this condition to the existing blocks instead of duplicating it.
   Below the fold, so deliberately OUTSIDE the @critical markers.
   ================================================================== */
@media (hover:none) and (pointer:coarse) and (max-height:500px){

  /* (3) About. The <=1024px rule collapses .bio-grid to a single column while
     .bio-photo stays capped at max-width:400px — so at 926px the portrait,
     name and licence sat in a 400px block with ~500px of dead space beside
     them. Landscape is wide and short, which is the one shape the two-column
     layout actually suits, so restore it rather than centring the orphan. */
  .bio-grid{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(1.8rem,4vw,3rem);align-items:center;
  }
  .bio-photo{max-width:none}

  /* (1) Safe area. viewport-fit=cover (header.php) lets full-bleed art reach
     the physical screen edges, which is what removes the white stripes. The
     content column must then inset itself, or copy slides under the notch on
     whichever side the phone happens to be rotated to. .shell is border-box,
     so this eats into its width rather than widening it. */
  .shell{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  .mobar{
    padding-left:calc(.8rem + env(safe-area-inset-left,0px));
    padding-right:calc(.8rem + env(safe-area-inset-right,0px));
  }
}