:root{
--sage:#688258;
--sage-accessible:#425f36;
--deep:#203026;
--forest:#17241b;
--ivory:#e7eadb;
--paper:#f6f4ec;
--grass:#c9ad7a;
--ink:#182019;
--muted:#536057;
--line:rgba(24,32,25,.18);
--gutter:clamp(22px,5vw,76px);
--display:"Funnel Display","Segoe UI",sans-serif;
--body:"Atkinson Hyperlegible","Segoe UI",sans-serif;
--ease:cubic-bezier(.22,1,.36,1);
--header:84px}

*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header) + 18px)}
body{
overflow-anchor:none;
margin:0;
background:var(--paper);
color:var(--ink);
font:400 18px/1.65 var(--body)}
a{
color:inherit}
img{
display:block;
width:100%}
:focus-visible{
outline:3px solid var(--grass);
outline-offset:4px}

.site-header{
position:sticky;
top:0;
z-index:20;
background:var(--sage-accessible);
color:var(--ivory);
box-shadow:0 1px rgba(255,255,255,.17)}
.head-row{
height:var(--header);
padding:0 var(--gutter);
display:flex;
align-items:center;
justify-content:space-between;
gap:28px}
.brand{
width:168px}
.brand img{
height:50px;
object-fit:contain;
object-position:left center}
.head-cta,.button{
display:inline-flex;
align-items:center;
gap:28px;
text-decoration:none;
text-transform:uppercase;
letter-spacing:.11em;
font-size:12px;
font-weight:700}
.head-cta{
border-bottom:1px solid currentColor;
padding:8px 0}
.menu-toggle{
display:none}
.site-header nav{
display:flex;
position:absolute;
left:50%;
top:0;
height:var(--header);
transform:translateX(-50%);
align-items:center;
gap:30px}
.site-header nav a{
text-decoration:none;
font-size:14px}

.eyebrow{
text-transform:uppercase;
letter-spacing:.17em;
font-size:11px;
font-weight:700;
margin:0 0 20px}
.hero{
min-height:calc(100svh - var(--header));
position:relative;
display:grid;
align-items:end;
overflow:hidden;
background:var(--deep);
color:white}
.hero>img,.hero-shade{
position:absolute;
inset:0;
height:100%;
object-fit:cover}
.hero>img{
object-position:52% 43%;
transform:scale(1.01)}
.hero-shade{
background:linear-gradient(90deg,rgba(16,30,20,.76) 0%,rgba(16,30,20,.34) 48%,rgba(16,30,20,.05) 75%),linear-gradient(0deg,rgba(16,30,20,.32),transparent 45%)}
.hero-copy{
position:relative;
z-index:2;
padding:clamp(76px,9vw,132px) var(--gutter);
max-width:830px}
.hero h1,.intro h2,.pathway h2,.about h2,.contact h2{
font-family:var(--display);
font-weight:500;
letter-spacing:-.025em;
line-height:1.04;
margin:0}
.hero h1{
font-size:clamp(48px,4.45vw,64px);
max-width:720px}
.lead{
font-size:clamp(18px,1.5vw,21px);
max-width:590px;
margin:27px 0}
.button{
padding:17px 22px;
border:1px solid currentColor}
.button.light{
background:var(--ivory);
color:var(--deep);
border-color:var(--ivory)}
.scroll-note{
position:absolute;
right:var(--gutter);
bottom:40px;
z-index:2;
font-size:12px;
letter-spacing:.1em}
.scroll-note span{
display:inline-block;
width:72px;
border-top:1px solid;
margin-left:12px;
vertical-align:middle}

.intro{
padding:clamp(88px,10vw,145px) var(--gutter);
display:grid;
grid-template-columns:minmax(0,322px) minmax(0,1fr);
gap:clamp(40px,5vw,76px);
max-width:1120px;
margin:0 auto}
.intro h2{
font-size:clamp(42px,4vw,56px);
max-width:720px}
.intro .large{
font-size:clamp(19px,1.7vw,24px);
line-height:1.55;
max-width:680px;
margin:28px 0 0}

.pathway{
background:var(--forest);
color:var(--ivory);
padding:clamp(70px,8vw,110px) var(--gutter);
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(390px,.8fr);
gap:8vw}
.pathway-visual{
position:sticky;
top:110px;
height:calc(100vh - 145px);
min-height:590px;
max-height:740px;
align-self:start;
background:var(--sage);
overflow:hidden}
.image-stack{
position:absolute;
inset:0 0 43%;
overflow:hidden}
.path-img{
position:absolute;
inset:0;
height:100%;
object-fit:cover;
opacity:0;
visibility:hidden;
transform:scale(1.035);
transition:opacity 0s,visibility 0s,transform .9s var(--ease)}
.path-img.is-active{
opacity:1;
visibility:visible;
transform:scale(1);
transition:opacity .45s var(--ease),visibility 0s,transform .9s var(--ease)}
.path-status{
position:absolute;
inset:auto 0 0;
min-height:43%;
padding:27px 30px 30px;
background:var(--sage-accessible)}
.progress{
height:2px;
background:rgba(231,234,219,.28)}
.progress b{
display:block;
width:33.333%;
height:100%;
background:var(--ivory)}
.path-count{
display:flex;
justify-content:space-between;
margin:12px 0 18px;
text-transform:uppercase;
letter-spacing:.12em;
font-size:10px}
.path-caption{
margin:0 0 4px;
font-size:14px}
.path-service{
margin:0;
font:500 32px/1.08 var(--display);
letter-spacing:-.02em}
.path-summary{
max-width:500px;
margin:12px 0 0;
font-size:15px;
line-height:1.5}
.pathway-copy{
padding:6vh 0 9vh}
.pathway h2{
font-size:clamp(42px,4vw,56px);
margin-bottom:9vh}
.step{
min-height:49vh;
padding:30px 0;
opacity:1;
transition:opacity .35s ease}
.step.is-active{
opacity:1}
.step span{
font-size:12px;
letter-spacing:.18em}
.step-question{
margin:14px 0 8px;
color:#cfd8ca;
font-size:15px}
.step h3{
font:500 clamp(34px,3vw,46px)/1.08 var(--display);
letter-spacing:-.025em;
margin:0 0 14px}
.step>p:not(.step-question){
max-width:500px;
margin:0;
font-size:18px;
line-height:1.6}
.step a{
display:inline-block;
margin-top:23px;
padding-bottom:4px;
border-bottom:1px solid currentColor;
font-size:14px;
font-weight:700;
text-decoration:none}

.about{
padding:clamp(90px,10vw,140px) var(--gutter);
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:10vw;
align-items:center}
.about h2{
font-size:clamp(42px,4vw,54px)}
.about-copy>p:not(.eyebrow){
max-width:590px}
.text-link{
display:inline-flex;
gap:30px;
margin-top:22px;
text-transform:uppercase;
text-decoration:none;
font-size:12px;
letter-spacing:.16em;
border-bottom:1px solid;
padding-bottom:6px}
.about figure{
margin:0}
.about figure img{
height:min(62vw,680px);
object-fit:cover;
object-position:center}
.about blockquote{
font:500 clamp(26px,2.6vw,38px)/1.2 var(--display);
letter-spacing:-.02em;
margin:34px 0 12px}
.about figcaption{
text-transform:uppercase;
letter-spacing:.16em;
font-size:11px}

.contact{
background:var(--sage-accessible);
color:white;
text-align:center;
padding:clamp(95px,11vw,150px) var(--gutter)}
.contact h2{
font-size:clamp(46px,5vw,68px);
max-width:850px;
margin:auto}
.contact>p:not(.eyebrow){
font-size:19px;
max-width:620px;
margin:28px auto}
.button.dark{
background:var(--deep);
border-color:var(--deep)}
.direct{
display:flex;
justify-content:center;
gap:34px;
margin-top:42px;
font-size:14px}
footer{
background:var(--forest);
color:var(--ivory);
padding:56px var(--gutter);
display:flex;
align-items:end;
justify-content:space-between;
gap:30px}
footer img{
width:170px}
footer p{
max-width:420px;
margin:0;
font-size:14px}

/* Gate A2 route archetypes: calm editorial interior and direct conversion detail. */
.interior-hero,.conversion-hero{display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:var(--ivory)}
.interior-hero>div,.conversion-hero>div{padding:clamp(80px,10vw,150px) var(--gutter);align-self:center}.interior h1,.conversion h1{font:500 clamp(48px,5vw,72px)/1.03 var(--display);letter-spacing:-.035em;margin:0}.interior-hero p:not(.eyebrow),.conversion-hero p:not(.eyebrow){max-width:540px;font-size:20px}.interior-hero img,.conversion-hero figure{height:100%;min-height:620px;margin:0}.interior-hero img,.conversion-hero figure img{height:100%;object-fit:cover}.conversion-hero figure{position:relative}.conversion-hero figcaption{position:absolute;bottom:28px;left:28px;right:28px;color:white;font-size:13px;letter-spacing:.08em}
.service-index{padding:clamp(90px,10vw,150px) var(--gutter);background:var(--forest);color:var(--ivory)}.service-list{max-width:1100px;margin:45px auto 0}.service-list article{display:grid;grid-template-columns:100px 1fr 1.1fr 190px;gap:24px;padding:38px 0;border-top:1px solid rgba(231,234,219,.28);align-items:start}.service-list h2,.credentials h2,.contact-detail h2{font:500 clamp(34px,3.2vw,50px)/1.08 var(--display);letter-spacing:-.025em;margin:0}.service-list p{margin:0;font-size:16px}.service-list a{font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px solid;padding-bottom:5px}.photo-quote{display:grid;grid-template-columns:1.1fr .9fr;min-height:580px;background:var(--sage)}.photo-quote img{height:100%;object-fit:cover}.photo-quote blockquote{align-self:center;margin:0;padding:clamp(40px,6vw,100px);color:var(--ivory);font:500 clamp(38px,4vw,62px)/1.08 var(--display);letter-spacing:-.03em}.photo-quote cite,.quiet-proof cite{display:block;margin-top:26px;font:700 11px var(--body);text-transform:uppercase;letter-spacing:.15em}.credentials{padding:clamp(90px,10vw,150px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:10vw}.credentials>div{max-width:600px}.credentials p:not(.eyebrow){font-size:20px}
.conversion-hero{background:var(--sage-accessible);color:var(--ivory)}.contact-detail{padding:clamp(90px,11vw,160px) var(--gutter);display:grid;grid-template-columns:.85fr 1.15fr;gap:10vw}.contact-detail>div>p:not(.eyebrow){max-width:500px}.contact-actions{border-top:1px solid var(--line)}.contact-actions a{display:flex;justify-content:space-between;gap:18px;padding:27px 0;border-bottom:1px solid var(--line);text-decoration:none}.contact-actions span{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.14em}.contact-actions strong{font:500 clamp(19px,2vw,28px)/1.2 var(--display)}.quiet-proof{display:grid;grid-template-columns:1fr 1fr;background:var(--deep);color:var(--ivory);min-height:530px}.quiet-proof img{height:100%;object-fit:cover}.quiet-proof div{padding:clamp(55px,8vw,130px);align-self:center}.quiet-proof blockquote{margin:0;font:500 clamp(34px,4vw,58px)/1.08 var(--display);letter-spacing:-.03em}

@media(max-width:1000px){
.head-cta{
display:none}
.menu-toggle{
display:flex;
min-height:44px;
min-width:44px;
padding:0;
appearance:none;
border:0;
background:transparent;
color:inherit;
gap:12px;
align-items:center;
font:700 11px var(--body);
text-transform:uppercase;
letter-spacing:.12em;cursor:pointer}
.menu-toggle i,.menu-toggle i:before{
display:block;
width:22px;
height:1px;
background:currentColor;
content:"";
transition:transform .25s}
.menu-toggle i:before{
transform:translateY(6px)}
.menu-toggle[aria-expanded=false] i{
transform:none!important}
.menu-toggle[aria-expanded=false] i:before{
transform:translateY(6px)!important}
.menu-toggle[aria-expanded=true] i{
transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded=true] i:before{
transform:rotate(-90deg)}
.js .site-header nav{
position:static;
transform:none;
/* r43 (M2): the height:0 / height:auto pair is gone. `height` was never in the
   transition list and `auto` is not interpolable, so on close height snapped
   straight to 0 and collapsed the drawer instantly no matter what max-height
   was doing. max-height now owns both directions.

   height:auto is NOT the old open-state value returning. It is constant across
   open and closed, so it never animates. It is required because the base
   desktop rule `.site-header nav{height:var(--header)}` is top-level and still
   matches at mobile; the old height:0 was silently neutralising it, so simply
   deleting the pair pinned the drawer open at 70px. */
height:auto;
max-height:0;
overflow:hidden;
display:grid;
gap:0;
padding:0 var(--gutter);
transition:max-height .38s var(--ease);
background:var(--sage-accessible)}
.js .site-header nav.open{
/* r37: raised from 360px so the Services submenu fits, and bounded by the
   viewport so an expanded drawer scrolls itself rather than running off screen. */
max-height:min(680px,calc(100dvh - var(--header) - 24px));
overflow:hidden auto;
overscroll-behavior:contain;
/* Keep the in-flow push-down drawer visually distinct from the live page it
   displaces. This is separation, not an overlay or a page dimmer. */
/* r45 (M9): this drawer sits above the brand row, so a border here cuts the
   green header in two. The header's own bottom hairline separates it from the page. */
border-bottom:0}
.js .site-header nav a{
min-height:56px;
display:flex;
align-items:center;
border-top:1px solid rgba(255,255,255,.2);
font-size:17px}
.js .site-header nav .menu-cta{
font-weight:700}
html:not(.js) .menu-toggle{display:none}
html:not(.js) .site-header nav{display:grid;gap:0;padding:0 var(--gutter);background:var(--sage-accessible)}
html:not(.js) .site-header nav a{min-height:56px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.2);font-size:17px}
.pathway{
grid-template-columns:42% 58%;
gap:5vw}
.pathway-visual{
height:650px;
top:96px}
.path-status{
padding:23px 22px}
.path-service{
font-size:27px}
.path-summary{
font-size:14px}
.intro{
grid-template-columns:1fr}
.about{
gap:6vw}
.hero h1{
font-size:clamp(46px,6.25vw,52px)}
.hero>img{
/* Preserve the dog as a legible subject in the tablet composition. */
object-position:18% 42%}
}

@media(max-width:640px){
:root{
--header:70px}
body{
overflow-anchor:none;
font-size:16px}
.head-row{
height:var(--header)}
.brand{
width:137px}
.brand img{
height:42px}
.hero{
min-height:720px}
.hero>img{
/* The source frame places the dog left of Laura. Anchor that relationship
   above the phone copy instead of cropping it into the text band. The centre
   anchor deliberately retains both Laura and the dog at 390px. */
object-position:50% 38%}
.hero-shade{
background:linear-gradient(0deg,rgba(16,30,20,.82) 0%,rgba(16,30,20,.25) 74%)}
.hero-copy{
padding:250px var(--gutter) 64px}
.hero h1{
font-size:42px}
.lead{
font-size:17px}
.scroll-note{
display:none}
.intro{
padding-block:84px}
.intro h2,.pathway h2,.about h2{
font-size:36px;
line-height:1.1}
.pathway{
display:block;
padding:78px 0 84px}
.pathway-copy{
padding:0 22px}
.pathway h2{
margin-bottom:42px}
.pathway-visual{
/* r43 (M5): static, not sticky. The panel is ~415px tall while .pathway-copy
   runs to ~2044px, so pinning it kept a fixed panel across roughly half the
   screen for the whole section. It now scrolls away above the steps. */
position:static;
height:auto;
min-height:0;
max-height:none;
margin:0 0 38px;
z-index:5}
.image-stack{
position:relative;
inset:auto;
display:block;
height:210px}
.path-img{
height:100%;
object-position:center 42%}
.path-status{
position:relative;
min-height:0;
padding:15px 22px 17px}
.path-count{
margin:8px 0 0}
.path-caption,.path-service{
display:block}
.path-summary{
display:none}
.step{
min-height:500px;
opacity:1;
border-top:1px solid rgba(231,234,219,.2);
padding:196px 0 45px;
display:flex;
flex-direction:column;
justify-content:flex-start}
.step h3{
font-size:33px;
margin:0 0 12px}
.step>p:not(.step-question){
font-size:16px}
.about{
grid-template-columns:1fr;
padding-block:88px}
.about figure img{
height:500px}
.contact h2{
font-size:42px}
.direct{
flex-direction:column;
gap:8px}
footer{
align-items:start;
flex-direction:column}
footer img{
width:150px}
}

/* Gate A round 6: keep the tablet motion CTA in its authored column and make
   the keyboard target independently legible in the in-flow drawer. */
.step a{
max-inline-size:calc(100% - 8px);
line-height:1.35;
overflow-wrap:anywhere}

@media(max-width:1000px){
/* Drawer links use a warm inset rail, not a white browser-style bounding box. */
.site-header nav a:focus-visible{
outline:0;
background:rgba(231,234,219,.12);
box-shadow:inset 0 0 0 2px var(--ivory);
color:var(--ivory)}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
.path-img,.step,.progress b,.site-header nav,.menu-toggle i,.menu-toggle i:before{
transition:none!important}
.menu-toggle[aria-expanded=true] i{
transform:none}
.menu-toggle[aria-expanded=true] i:before{
transform:translateY(6px)}
.pathway-visual{
position:relative;
top:auto;
height:auto;
min-height:0;
max-height:none}
.image-stack{
position:relative;
inset:auto;
display:block;
height:auto}
.path-img{
position:relative;
opacity:1;
visibility:visible;
transform:none;
height:220px}
.path-img:not(.is-active){
display:none}
.path-status{
position:relative;
min-height:0}
.pathway-copy{
padding-block:40px}
.pathway h2{
margin-bottom:42px}
.step{
min-height:0;
opacity:1;
padding:35px 0;
border-top:1px solid rgba(231,234,219,.2)}
}

@media(max-width:1000px){.interior-hero,.conversion-hero{grid-template-columns:42% 58%;min-height:560px}.interior-hero>div,.conversion-hero>div{padding:70px var(--gutter)}.interior-hero img,.conversion-hero figure{min-height:560px}.service-list article{grid-template-columns:60px 1fr 1fr}.service-list article a{grid-column:2}.credentials,.contact-detail{gap:7vw}.photo-quote{min-height:480px}}
@media(max-width:640px){.interior-hero,.conversion-hero,.photo-quote,.quiet-proof,.credentials,.contact-detail{display:block}.interior-hero>div,.conversion-hero>div{padding:66px var(--gutter) 46px}.interior h1,.conversion h1{font-size:42px}.interior-hero p:not(.eyebrow),.conversion-hero p:not(.eyebrow){font-size:18px}.interior-hero img,.conversion-hero figure{height:390px;min-height:0}.service-index{padding-top:74px}.service-list article{display:block;padding:30px 0}.service-list article>*{margin-bottom:16px}.service-list h2{font-size:36px}.photo-quote img,.quiet-proof img{height:340px}.photo-quote blockquote,.quiet-proof div{padding:52px var(--gutter)}.credentials,.contact-detail{padding:78px var(--gutter)}.credentials h2,.contact-detail h2{font-size:40px}.contact-actions{margin-top:42px}.contact-actions a{display:block}.contact-actions strong{display:block;margin-top:10px}.conversion-hero figure{margin:0}.conversion-hero figcaption{left:22px;bottom:20px}.quiet-proof blockquote{font-size:38px}}

/* Ryan-directed homepage refinement: clearer identity and more deliberate interaction. */
.brand-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory)}
.brand-lockup img{width:52px;height:52px;object-fit:contain;flex:none}
.brand-lockup span{font:500 25px/1 var(--display);letter-spacing:-.04em;white-space:nowrap}
.site-header .brand{width:auto}
.site-header nav a{position:relative;padding:10px 12px;border-radius:8px;transition:background .22s ease,color .22s ease,transform .22s ease}
.site-header nav a:after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.site-header nav a:hover{background:rgba(231,234,219,.11);transform:translateY(-1px)}
.site-header nav a:hover:after,.site-header nav a:focus-visible:after{transform:scaleX(1)}
.head-cta,.button{border-radius:10px;transition:transform .22s var(--ease),background .22s ease,color .22s ease,box-shadow .22s ease}
.head-cta{border:1px solid rgba(231,234,219,.58);padding:11px 15px;background:rgba(231,234,219,.08)}
.head-cta:hover,.head-cta:focus-visible{background:var(--ivory);color:var(--deep);transform:translateY(-2px);box-shadow:0 8px 20px rgba(10,20,12,.18)}
.button{padding:16px 20px;gap:38px}
.button:hover,.button:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,20,12,.22)}
.button.light:hover,.button.light:focus-visible{background:var(--grass);border-color:var(--grass)}
.button.dark:hover,.button.dark:focus-visible{background:var(--forest);border-color:var(--forest)}

.hero{display:block;min-height:calc(100svh - var(--header))}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s linear .8s}
.hero-slide.is-active{opacity:1;visibility:visible;transition:opacity .8s var(--ease),visibility 0s}
.hero-slide>img,.hero-slide>.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide>img{object-position:center 42%;transform:scale(1.025);transition:transform 7s linear}
.hero-slide.is-active>img{transform:scale(1)}
.hero-copy{position:absolute;left:0;bottom:0}
.hero-brand{margin:0 0 30px}
.hero-brand img{width:66px;height:66px}
.hero-brand span{font-size:34px}
.hero-controls{position:absolute;z-index:4;right:var(--gutter);bottom:44px;display:flex;gap:8px}
.hero-controls button{width:52px;height:40px;border:0;border-bottom:2px solid rgba(255,255,255,.38);background:transparent;color:white;font:700 11px var(--body);cursor:pointer;transition:border-color .25s ease,background .25s ease}
.hero-controls button:hover,.hero-controls button:focus-visible,.hero-controls button.is-active{border-color:var(--ivory);background:rgba(231,234,219,.1)}

.pathway-visual{border-radius:18px;box-shadow:0 28px 70px rgba(8,18,10,.25)}
.path-status{background:linear-gradient(135deg,var(--sage-accessible),#36502d)}
.path-status h3{font:500 clamp(29px,2.5vw,38px)/1.08 var(--display);letter-spacing:-.035em;margin:0 0 12px;max-width:520px}
.path-status>p:last-child{margin:0;max-width:470px}
.step a,.text-link{transition:color .2s ease,border-color .2s ease}
.step a:hover,.text-link:hover{color:var(--grass);border-color:var(--grass)}

@media(max-width:1000px){
  .site-header nav a{border-radius:0;padding-inline:0}
  .site-header nav a:hover{transform:none}
  .hero-brand{display:none}
  .hero-controls{bottom:26px}
}
@media(max-width:640px){
  .brand-lockup{gap:9px}.brand-lockup img{width:43px;height:43px}.brand-lockup span{font-size:21px}
  .hero-slide>img{object-position:center 34%}
  .hero-copy{padding:250px var(--gutter) 80px}
  .hero-controls{left:var(--gutter);right:auto;bottom:22px}
  .hero-controls button{width:42px;height:34px}
  .pathway-visual{border-radius:0}
}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide>img,.head-cta,.button,.site-header nav a{transition:none!important}.hero-slide:not(.is-active){display:none}}

/* ===== Revision 6 (Ryan direct fixes): logo lockups, calm text nav, one button system ===== */
.site-header .brand{width:auto;flex:none}
.site-header .brand img{height:48px;width:auto;object-fit:contain;object-position:left center}
footer .footer-logo{width:190px;height:auto}

/* Nav: refined text links, underline-reveal, no pills */
.site-header nav a{background:none;border-radius:0;padding:10px 2px;font-size:14px;letter-spacing:.02em;transition:color .18s ease}
.site-header nav a:after{left:2px;right:2px;bottom:6px;height:1px;transition:transform .2s ease}
.site-header nav a:hover{background:none;transform:none;color:var(--ivory)}
.site-header nav a[aria-current=page]:after{transform:scaleX(1)}
@media(min-width:1001px){.site-header nav .menu-cta{display:none}}

/* One coherent button system */
.head-cta,.button{border-radius:9px;gap:14px;transition:background .18s ease,color .18s ease,border-color .18s ease}
.head-cta:hover,.head-cta:focus-visible,.button:hover,.button:focus-visible{transform:none;box-shadow:none}
.head-cta{border:1px solid rgba(231,234,219,.55);background:transparent;color:var(--ivory);padding:12px 18px}
.head-cta:hover,.head-cta:focus-visible{background:var(--ivory);border-color:var(--ivory);color:var(--forest)}
.button{padding:16px 22px;gap:14px}
.button.light{background:var(--ivory);border-color:var(--ivory);color:var(--forest)}
.button.light:hover,.button.light:focus-visible{background:var(--sage);border-color:var(--sage);color:var(--ivory)}
.button.dark{background:var(--deep);border-color:var(--deep);color:var(--ivory)}
.button.dark:hover,.button.dark:focus-visible{background:var(--forest);border-color:var(--forest)}
.head-cta span,.button span{display:inline-block;transition:transform .18s ease}
.head-cta:hover span,.head-cta:focus-visible span,.button:hover span,.button:focus-visible span{transform:translateX(3px)}
.head-cta:focus-visible,.button:focus-visible,.menu-toggle:focus-visible{outline:3px solid var(--grass);outline-offset:3px}

/* Hero logo (Ryan's main mark) above the eyebrow */
.hero-logo{width:160px;height:auto;margin:0 0 26px}

/* Head row: one clean centred line at every width */
.head-row{flex-wrap:nowrap;line-height:1}
.menu-toggle{padding:10px 12px;margin-right:-12px}
@media(max-width:1000px){
  .hero-brand{display:none}
  .hero-logo{display:block}
}
@media(max-width:640px){
  .site-header .brand img{height:38px}
  .hero-logo{width:104px;margin-bottom:20px}
  footer .footer-logo{width:160px}
}
@media(max-width:360px){
  .site-header .brand img{height:32px}
}

/* ===== Revision 7 (Ryan direct fixes): new header lockup, stacked footer, no hero logo,
   Ask Laura card, tips bar, nav polish ===== */

/* 1. New header lockup (r7 art: more air between dog head and wordmark) */
.site-header .brand img{height:48px;width:auto}
@media(max-width:640px){.site-header .brand img{height:38px}}
@media(max-width:360px){.site-header .brand img{height:33px}}

/* 2. Footer back to the stacked lockup */
footer .footer-logo{width:118px;height:auto}
@media(max-width:640px){footer .footer-logo{width:100px}}

/* 6. Tips bar above the navigation */
.tips-bar{background:var(--forest);color:var(--ivory);border-bottom:1px solid rgba(231,234,219,.14);padding:9px var(--gutter);display:flex;justify-content:center;align-items:baseline;gap:14px;font-size:13.5px;line-height:1.5;min-height:38px}
.tips-label{flex:none;font-family:var(--body);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;color:rgba(231,234,219,.72)}
.tips-text{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tips-caret{display:inline-block;width:1px;height:.95em;background:currentColor;margin-left:2px;vertical-align:-.12em;animation:tipsCaret 1.05s steps(2,jump-none) infinite}
@keyframes tipsCaret{50%{opacity:0}}
@media(max-width:640px){.tips-bar{padding:7px var(--gutter);font-size:12px;gap:10px;min-height:32px}.tips-caret{display:none}}
@media(prefers-reduced-motion:reduce){.tips-caret{display:none}}

/* 7. Nav polish: quieter rhythm under the tips bar */
.site-header nav{gap:36px}
.site-header nav a{font-size:13px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;padding:10px 2px;color:rgba(231,234,219,.88)}
.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--ivory)}
@media(max-width:1000px){.js .site-header nav a{font-size:15px;letter-spacing:.06em}}

/* 3+5. Hero without logo, Ask Laura card fills the composition */
.hero-controls{right:auto;left:var(--gutter)}
main{position:relative}
/* Ask Laura is bounded to the hero region so it can stick within it (desktop/tablet) */
.hero-wrap{position:relative}
/* The slideshow hero must not clip a sticky descendant: move the image clip onto the slides only */
.hero:has(.hero-slides){overflow:visible}
.hero-slides{overflow:hidden}
.ask-laura{position:absolute;z-index:6;left:0;right:0;top:clamp(64px,9vh,110px);padding:0 var(--gutter);margin:0;display:flex;justify-content:flex-end;pointer-events:none}
.ask-laura .ask-card{pointer-events:auto}
.ask-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 64px rgba(8,18,10,.3);padding:26px 26px 24px;width:min(430px,100%)}
.ask-head{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.ask-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.ask-q{margin:0;font:500 21px/1.22 var(--display);letter-spacing:-.02em;color:var(--forest)}
.ask-chips{display:flex;flex-wrap:wrap;gap:10px}
.ask-chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--forest);font:600 13.5px/1.35 var(--body);text-decoration:none;text-align:left;transition:background .18s ease,border-color .18s ease,color .18s ease}
.ask-chip:hover,.ask-chip:focus-visible{background:var(--sage-accessible);border-color:var(--sage-accessible);color:var(--ivory)}
button.ask-chip{cursor:pointer;appearance:none}
.ask-bio{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ask-bio p{margin:0;font:400 14px/1.6 var(--body);color:#414a40}
.ask-more{display:none;flex-wrap:wrap;gap:10px;width:100%;padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.ask-more.open{display:flex}
@media(max-width:1000px){.ask-laura{position:static;transform:none;margin-top:26px;justify-content:stretch}.ask-card{width:100%}}
@media(max-width:640px){.ask-laura{margin-top:20px}.ask-card{padding:20px 18px 18px;border-radius:16px}.ask-q{font-size:19px}.ask-chip{font-size:13px;padding:8px 14px}.hero-copy{padding-bottom:76px}}
/* Desktop + tablet: the card overlays the hero top-right and stays sticky, but only within the hero.
   It sits in flow after the hero, is lifted up over it, and releases at the hero's bottom edge. */
@media(min-width:1001px){
  /* Keep the wrapper as tall as the hero so the card's sticky range spans the whole hero
     (the card's negative top margin would otherwise collapse the wrapper). */
  .hero-wrap{min-height:calc(100svh - var(--header))}
  .ask-laura{position:sticky;left:auto;right:auto;top:calc(var(--header) + 22px);margin-top:calc(clamp(64px,9vh,110px) - 100svh + var(--header));justify-content:flex-end;margin-bottom:44px}
}

/* 4. Focal points for the swapped photos */
.hero-slide[data-slide="1"]>img{object-position:40% 62%}
@media(max-width:640px){.hero-slide[data-slide="1"]>img{object-position:41% 55%}}
.path-img{object-position:52% 34%}

/* ===== Revision 8 (scope build): global tips bar, hamburger push-down menu,
   credibility chip, upgraded footer, cookie bar, service/about/contact/form pages ===== */

/* Tips bar is global on desktop/tablet, dropped at mobile widths */
@media(max-width:640px){.tips-bar{display:none}}

/* Credibility chip, top-left of the homepage hero */
.cred-chip{position:absolute;z-index:5;top:26px;left:var(--gutter);display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:999px;background:rgba(17,26,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(231,234,219,.28);color:var(--ivory);font:600 12.5px/1.3 var(--body);letter-spacing:.02em;text-decoration:none;transition:background .18s ease,border-color .18s ease}
.cred-chip:hover,.cred-chip:focus-visible{background:rgba(17,26,18,.78);border-color:rgba(231,234,219,.55)}
.cred-chip .star{color:var(--grass);font-size:13px;letter-spacing:.06em}
.cred-chip b{font-weight:700}
.cred-chip i{font-style:normal;opacity:.55}
@media(max-width:640px){.cred-chip{top:16px;font-size:14px;padding:8px 14px;gap:8px}.cred-chip .sep-exp,.cred-chip .exp{display:none}.intro-points h3{font-size:22px}}

/* Hamburger trigger replaces the MENU wordmark */
.site-header .menu-toggle{gap:0;font-size:0;letter-spacing:0}
.site-header .menu-toggle i{position:relative;display:block;width:23px;height:2px;border-radius:2px;background:currentColor;transition:background .18s ease}
.site-header .menu-toggle i:before,.site-header .menu-toggle i:after{content:"";position:absolute;left:0;width:23px;height:2px;border-radius:2px;background:currentColor;transition:transform .28s var(--ease),top .28s var(--ease)}
.site-header .menu-toggle i:before{top:-7px}
.site-header .menu-toggle i:after{top:7px}
.site-header .menu-toggle[aria-expanded=false] i{transform:none!important}
.site-header .menu-toggle[aria-expanded=false] i:before{transform:none!important;top:-7px}
.site-header .menu-toggle[aria-expanded=false] i:after{transform:none!important;top:7px}
.site-header .menu-toggle[aria-expanded=true] i{transform:none;background:transparent}
.site-header .menu-toggle[aria-expanded=true] i:before{transform:rotate(45deg);top:0}
.site-header .menu-toggle[aria-expanded=true] i:after{transform:rotate(-45deg);top:0}

/* Mobile drawer rework: the nav sits FIRST in the header flow, so opening it
   grows the header from the top and slides the whole logo bar down beneath the
   revealed items. In-flow push-down, not an overlay. */
@media(max-width:1000px){
/* r43 (M1): this later same-specificity rule was zeroing the 3px ivory
   border-bottom declared on .js .site-header nav.open above, so the drawer had
   no border at mobile at all. With both shadows now removed that border is the
   only separator left, so the border-bottom:0 is dropped here. box-shadow:none
   is kept and is now simply redundant with the source rule. */
.js .site-header nav.open{box-shadow:none}
/* r43 (M1): the mobile header bar shadow is removed. It was declared only here,
   inside max-width:1000px, so desktop's 0 1px hairline is untouched. */
.js .site-header nav{background:var(--sage-accessible)}
.js .site-header nav a:after{display:none}
#site-menu:focus{outline:0}
.js .site-header nav a{border-top:0;border-bottom:0;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .34s var(--ease)}
.js .site-header nav.open a{opacity:1;transform:none}
.js .site-header nav.open a:nth-child(1){transition-delay:.05s}
.js .site-header nav.open a:nth-child(2){transition-delay:.09s}
.js .site-header nav.open a:nth-child(3){transition-delay:.13s}
.js .site-header nav.open a:nth-child(4){transition-delay:.17s}
.js .site-header nav.open a:nth-child(5){transition-delay:.21s}
.js .site-header nav .menu-cta{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
.js .site-header nav a{transition:none!important;opacity:1;transform:none}
.site-header .menu-toggle i,.site-header .menu-toggle i:before,.site-header .menu-toggle i:after{transition:none!important}
}

/* Upgraded global footer */
.site-footer{background:var(--forest);color:var(--ivory);padding:64px var(--gutter) 34px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:44px;max-width:1280px;margin:0 auto}
.footer-brand img{width:118px;height:auto;margin-bottom:20px}
.footer-brand p{margin:0;font-size:14px;line-height:1.65;max-width:330px;color:rgba(231,234,219,.85)}
.footer-col h3{margin:6px 0 16px;font:700 11px var(--body);text-transform:uppercase;letter-spacing:.16em;color:rgba(231,234,219,.6)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-col a{font-size:14.5px;text-decoration:none;color:rgba(231,234,219,.88);border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--ivory);border-bottom-color:var(--grass)}
.footer-col a[rel~=external]:after{content:" ↗";font-size:12px;opacity:.6}
.footer-base{max-width:1280px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(231,234,219,.16);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:rgba(231,234,219,.6)}
.footer-base p{margin:0}
.footer-base a{color:inherit}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:640px){.site-footer{padding:52px var(--gutter) 28px}.footer-grid{grid-template-columns:1fr;gap:32px}.footer-base{flex-direction:column;gap:8px}}

/* Cookie consent bar */
.cookie-bar{position:fixed;z-index:40;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:680px;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 22px 54px rgba(8,18,10,.35);padding:18px 20px;display:flex;align-items:center;gap:18px}
.cookie-bar p{margin:0;font-size:14px;line-height:1.55}
.cookie-bar a{color:var(--sage-accessible);font-weight:600}
.cookie-ok{flex:none;appearance:none;cursor:pointer;border:0;border-radius:9px;background:var(--sage-accessible);color:var(--ivory);font:700 13px var(--body);letter-spacing:.06em;padding:12px 20px;min-height:44px;transition:background .18s ease}
.cookie-ok:hover,.cookie-ok:focus-visible{background:var(--forest)}
@media(max-width:640px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:left;padding:16px}.cookie-ok{width:100%}}

/* Interior page building blocks shared by r8 pages */
.page-hero{display:grid;grid-template-columns:1fr 1fr;min-height:560px;background:var(--ivory)}
.page-hero>div{padding:clamp(70px,9vw,130px) var(--gutter);align-self:center}
.page-hero h1{font:500 clamp(42px,4.4vw,62px)/1.06 var(--display);letter-spacing:-.035em;margin:0}
.page-hero p:not(.eyebrow){max-width:540px;font-size:19px}
.page-hero img{height:100%;min-height:560px;object-fit:cover}
.page-hero .button{margin-top:10px}
.prose{padding:clamp(74px,8vw,120px) var(--gutter);display:grid;grid-template-columns:minmax(0,286px) minmax(0,1fr);gap:clamp(40px,5vw,76px);max-width:1120px;margin:0 auto}
.prose h1,.prose h2{font:500 clamp(32px,3vw,44px)/1.1 var(--display);letter-spacing:-.03em;margin:0}
/* r20: the heading now leads the body column instead of the aside, so it needs
   its own spacing above the first paragraph; the aside/global rule stays untouched. */
.prose-body h2{margin:0 0 20px}
.prose-body>p{max-width:660px;margin:0 0 22px;font-size:18px}
.prose-body>p:last-child{margin-bottom:0}
.prose-body ul{max-width:640px;margin:0 0 22px;padding-left:22px;display:grid;gap:10px;font-size:17.5px}
.fact-band{background:var(--sage-accessible);color:var(--ivory);padding:clamp(56px,6vw,84px) var(--gutter)}
.fact-band .fact-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.fact-band h3{margin:0 0 10px;font:500 24px/1.15 var(--display);letter-spacing:-.02em}
.fact-band p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(231,234,219,.9)}
.page-cta{background:var(--forest);color:var(--ivory);text-align:center;padding:clamp(80px,9vw,130px) var(--gutter)}
.page-cta h1,.page-cta h2{font:500 clamp(38px,4vw,56px)/1.08 var(--display);letter-spacing:-.03em;max-width:760px;margin:0 auto}
.page-cta p{font-size:18px;max-width:600px;margin:24px auto 30px}
.service-cards{padding:clamp(74px,8vw,120px) var(--gutter);max-width:1280px;margin:0 auto}
.service-cards>h2{font:500 clamp(34px,3.4vw,48px)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 40px;max-width:700px}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.svc-card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(8,18,10,.12);text-decoration:none;color:var(--ink);transition:transform .22s var(--ease),box-shadow .22s ease}
.svc-card:hover,.svc-card:focus-visible{transform:translateY(-4px);box-shadow:0 26px 58px rgba(8,18,10,.18)}
.svc-card img{height:250px;object-fit:cover}
.svc-card>div{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.svc-card h3{margin:0 0 10px;font:500 27px/1.12 var(--display);letter-spacing:-.025em}
.svc-card p{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:#414a40}
.svc-card .card-link{margin-top:auto;font:700 12px var(--body);text-transform:uppercase;letter-spacing:.13em;color:var(--sage-accessible)}
@media(max-width:1000px){.page-hero{grid-template-columns:46% 54%;min-height:500px}.page-hero img{min-height:500px}.prose{grid-template-columns:1fr;gap:26px}.fact-band .fact-grid{grid-template-columns:1fr;gap:26px}}
@media(max-width:640px){.page-hero{display:block}.page-hero>div{padding:62px var(--gutter) 44px}.page-hero h1{font-size:38px}.page-hero img{height:380px;min-height:0}.card-grid{grid-template-columns:1fr}.svc-card img{height:210px}.service-cards>h2{font-size:32px}.page-cta h1,.page-cta h2{font-size:36px}}

/* Contact page */
.contact-panel{padding:clamp(74px,8vw,120px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:7vw;max-width:1280px;margin:0 auto}
.contact-panel h2{font:500 clamp(32px,3vw,44px)/1.1 var(--display);letter-spacing:-.03em;margin:0 0 18px}
.contact-panel .expect{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.contact-panel .expect p{font-size:15.5px;color:#4c564c;margin:0 0 12px;max-width:520px}
@media(max-width:1000px){.contact-panel{grid-template-columns:1fr;gap:40px}}

/* Book-a-consultation multi-step form */
.form-wrap{background:var(--paper);padding:clamp(56px,7vw,96px) var(--gutter) clamp(80px,9vw,130px)}
.consult-form{max-width:760px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 26px 64px rgba(8,18,10,.14);padding:clamp(26px,4vw,46px)}
.form-progress{display:flex;gap:6px;margin:0 0 30px}
.form-progress span{flex:1;height:4px;border-radius:4px;background:var(--ivory);transition:background .3s ease}
.form-progress span.done{background:var(--sage)}
.form-progress span.now{background:var(--sage-accessible)}
.form-step{display:none}
.form-step.active{display:block;animation:stepIn .35s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form-step h2{font:500 clamp(26px,2.6vw,34px)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 8px}
.form-step .step-note{margin:0 0 26px;font-size:15px;color:#5a655a}
.field{margin:0 0 20px}
.field label,.field .group-label{display:block;font:600 14px/1.4 var(--body);margin-bottom:8px;color:var(--ink)}
.field label.choice{display:flex;font-weight:400;margin-bottom:0}
.field .hint{display:block;font-weight:400;font-size:12.5px;color:#6a746a;margin-top:2px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid #c8cfc4;border-radius:10px;background:var(--paper);font:400 16px/1.5 var(--body);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--grass);outline-offset:1px;border-color:var(--sage-accessible)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choice-grid{display:grid;gap:12px}
.choice-grid.cols{grid-template-columns:1fr 1fr}
.choice{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid #c8cfc4;border-radius:12px;background:var(--paper);cursor:pointer;transition:border-color .16s ease,background .16s ease}
.choice:hover{border-color:var(--sage)}
.choice input{flex:none;margin:3px 0 0;width:18px;height:18px;accent-color:var(--sage-accessible)}
.choice .choice-text{flex:1;font-size:15.5px;line-height:1.45}
.choice .choice-text b{display:block;font-size:16px}
.choice .choice-text small{display:block;margin-top:2px;font-size:13px;color:#5a655a}
.choice.picked{border-color:var(--sage-accessible);background:#eef1e6;box-shadow:inset 0 0 0 1px var(--sage-accessible)}
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px}
.form-back{appearance:none;background:none;border:0;cursor:pointer;font:700 12px var(--body);text-transform:uppercase;letter-spacing:.13em;color:#5a655a;padding:12px 8px;min-height:44px}
.form-back:hover,.form-back:focus-visible{color:var(--ink)}
.form-next,.form-submit{appearance:none;cursor:pointer;border:1px solid var(--sage-accessible);border-radius:9px;background:var(--sage-accessible);color:var(--ivory);font:700 12px var(--body);text-transform:uppercase;letter-spacing:.11em;padding:16px 24px;display:inline-flex;align-items:center;gap:14px;transition:background .18s ease,border-color .18s ease}
.form-next:hover,.form-next:focus-visible,.form-submit:hover,.form-submit:focus-visible{background:var(--forest);border-color:var(--forest)}
.form-error{display:none;margin:0 0 18px;padding:12px 16px;border-radius:10px;background:#f7e9e4;color:#7c3a24;font-size:14.5px}
.form-error.show{display:block}
.recommend-card{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:22px 24px;margin:0 0 24px}
.recommend-card .eyebrow{margin-bottom:10px;color:var(--sage-accessible)}
.recommend-card h3{margin:0 0 8px;font:500 24px/1.15 var(--display);letter-spacing:-.02em}
.recommend-card p{margin:0;font-size:15px;line-height:1.6;color:#414a40}
.recommend-card a{color:var(--sage-accessible);font-weight:600}
.next-steps{list-style:none;counter-reset:ns;margin:0 0 6px;padding:0;display:grid;gap:14px}
.next-steps li{position:relative;padding-left:46px;font-size:15.5px;line-height:1.55}
.next-steps li:before{counter-increment:ns;content:counter(ns,decimal-leading-zero);position:absolute;left:0;top:1px;font:700 12px/26px var(--body);width:30px;height:26px;text-align:center;border-radius:8px;background:var(--ivory);color:var(--sage-accessible);letter-spacing:.05em}
.preview-note{margin:20px 0 0;font-size:13.5px;color:#6a746a}
.form-sent{text-align:center;padding:20px 0}
.form-sent h2{margin-bottom:12px}
@media(max-width:640px){.field-row,.choice-grid.cols{grid-template-columns:1fr}.form-nav{flex-direction:row}.consult-form{border-radius:16px}}

/* First-person hero tweak keeps locked composition; only copy changed */
/* Non-primary hero slide headlines are visually identical to the H1 but are not H1s (one H1 per page) */
.hero-copy .hero-h{font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:1.07;margin:0;font-size:clamp(47px,4.32vw,63px);max-width:695px}
@media(max-width:1000px){.hero-copy .hero-h{font-size:clamp(46px,6.25vw,52px)}}
@media(max-width:640px){.hero-copy .hero-h{font-size:40px;line-height:1.06}}

/* ---- Revision 9: inline-growth consultation form ---- */
.consult-form fieldset{border:0;margin:0;padding:0;min-width:0}
.form-part{display:block;padding:6px 0 34px;border-bottom:1px solid var(--ivory)}
.form-part:last-of-type{border-bottom:0;padding-bottom:8px}
.form-part[hidden]{display:none}
.form-part.grow{animation:partIn .5s var(--ease)}
@keyframes partIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.form-part.grow{animation:none}}
.step-count{margin:18px 0 4px;font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-accessible)}
.step-count:empty{display:none}
.form-part h2{font:500 clamp(24px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 8px}
.form-part .step-note{margin:0 0 22px;font-size:15px;color:#5a655a}
.form-part .field:last-child textarea,.form-part .field:last-child input{margin-bottom:0}
.consult-form textarea{resize:vertical;min-height:96px}
.next-title{font:500 20px/1.3 var(--display);margin:26px 0 14px}
.consent-note{margin:22px 0 0;font-size:13.5px;line-height:1.6;color:#6a746a}
.consent-note a{color:var(--sage-accessible);font-weight:600}
.rec-reassure{margin-top:10px !important;font-size:14.5px !important;color:#414a40 !important}
/* focus behaviour: no outline on programmatic/mouse focus, clear ring for keyboards */
.consult-form [tabindex="-1"]:focus{outline:none}
.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{outline:none;border-color:var(--sage-accessible);box-shadow:0 0 0 3px rgba(66,95,54,.16)}
.choice:has(input:focus-visible){outline:2px solid var(--sage-accessible);outline-offset:2px}
.choice input:focus{outline:none}
.form-submit:focus-visible,.consult-form a:focus-visible{outline:2px solid var(--sage-accessible);outline-offset:2px}
.cookie-bar[hidden],.form-part[hidden],.form-sent[hidden],[data-safety-yes][hidden]{display:none}
.consult-form [hidden]{display:none !important}

/* r9b: draft pricing in the recommendation ending */
.rec-pricing{margin:16px 0 4px;border-top:1px solid var(--line);padding-top:14px}
.price-row{display:flex;gap:16px;align-items:baseline;justify-content:space-between;padding:5px 0}
.price-what{font-size:15px;line-height:1.5}
.price-what b{font-weight:700;color:var(--ink)}
.price-what small{display:block;font-size:13.5px;line-height:1.5;color:#5b655b}
.price-row .price{font-weight:700;white-space:nowrap;color:var(--sage-accessible);font-variant-numeric:tabular-nums;font-size:15px}
.price-intro{margin:14px 0 2px;font:700 12px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#6a746a}
.addons{margin:18px 0 26px;border:1px dashed var(--line);border-radius:14px;padding:12px 16px 8px;background:rgba(231,234,219,.35)}
.addons .group-label{margin-bottom:2px}
.addons-note{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:#6a746a}
.draft-note{margin:8px 0 0;font-size:13.5px;font-style:italic;color:#6a746a}
@media(max-width:420px){.price-row{flex-wrap:wrap}.price-row .price{margin-left:0}}

/* r10: hidden-link onboarding form (welcome aboard) */
.hero-small{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:#5a655a}
.onboard-form .form-part{padding:14px 0 44px}
.onboard-form .form-part:last-of-type{padding-bottom:8px}
.need{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef1e6;color:var(--sage-accessible);font:600 11px/1.4 var(--body);letter-spacing:.02em;white-space:nowrap}
.draft-flag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;border:1px dashed #c9ad7a;color:#8a6d3b;font:500 11px/1.4 var(--body);font-style:italic;white-space:nowrap}
.check-field .check-line{display:flex;align-items:flex-start;gap:12px;font:400 15px/1.55 var(--body);cursor:pointer}
.check-field .check-line input{flex:none;margin:3px 0 0;width:18px;height:18px;accent-color:var(--sage-accessible)}
.check-field .check-line span{flex:1;display:block}
.check-field .check-line a{color:var(--sage-accessible);font-weight:600}
.field.missing input,.field.missing select,.field.missing textarea{border-color:#b0522f;box-shadow:0 0 0 3px rgba(176,82,47,.14)}
.field.missing .choice{border-color:#b0522f}
.field input[type=file]{width:100%;padding:11px 13px;border:1px dashed #c8cfc4;border-radius:10px;background:var(--paper);font:400 14.5px/1.5 var(--body);color:var(--ink)}
.ob-progress{position:fixed;left:0;right:0;bottom:16px;z-index:15;display:flex;justify-content:center;pointer-events:none}
.ob-progress[hidden]{display:none}
.ob-progress-text{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(23,36,27,.86);color:var(--ivory);font:600 12px/1.4 var(--body);letter-spacing:.05em;box-shadow:0 6px 18px rgba(8,18,10,.18)}
.onboard-form .next-steps{margin:18px auto 22px;max-width:520px;text-align:left;padding-left:22px}
.onboard-form .next-steps li{margin:0 0 10px;font-size:15.5px;line-height:1.6}
.onboard-form .form-sent a{color:var(--sage-accessible);font-weight:600}
@media(max-width:640px){.need,.draft-flag{white-space:normal}}
body:has(.cookie-bar:not([hidden])) .ob-progress{bottom:110px}

/* ===== Revision 11: cookie consent actions, form-part scroll offset ===== */
.cookie-actions{display:flex;flex:none;gap:10px;align-items:center}
.cookie-no{flex:none;appearance:none;cursor:pointer;border:1.5px solid var(--sage-accessible);border-radius:9px;background:transparent;color:var(--sage-accessible);font:700 13px var(--body);letter-spacing:.06em;padding:12px 20px;min-height:44px;transition:background .18s ease,color .18s ease}
.cookie-no:hover,.cookie-no:focus-visible{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
@media(max-width:640px){.cookie-actions{flex-direction:column;align-items:stretch}.cookie-no{width:100%}}
.form-part{scroll-margin-top:96px}

/* ===== Revision 12 VARIANT A: "A letter to Laura" - the form flows straight on the
   paper page as an editorial questionnaire. No card, no boxes: baseline-rule inputs,
   ruled-paper textareas, list-style choices with hand-inked markers, and a stitched
   margin thread that carries the document feel. LOCAL VARIANT, not published. ===== */
.fv-a .form-wrap{background:var(--paper);padding-top:clamp(40px,5vw,64px)}
.fv-a .consult-form{max-width:680px;background:transparent;border-radius:0;box-shadow:none;padding:0}
/* margin thread: a fine stitched rule down the left, one inked dot per grown section */
@media(min-width:900px){
.fv-a .consult-form{padding-left:56px;position:relative}
.fv-a .consult-form::before{content:"";position:absolute;left:10px;top:34px;bottom:120px;border-left:1px dashed rgba(24,32,25,.28)}
.fv-a .form-part{position:relative}
.fv-a .form-part::before{content:"";position:absolute;left:-51px;top:26px;width:11px;height:11px;border-radius:50% 45% 55% 50%;background:var(--sage-accessible);box-shadow:0 0 0 4px var(--paper)}
.fv-a .form-part[data-part="need"]::before{top:22px}
}
.fv-a .form-part{border-bottom:0;padding:10px 0 44px}
.fv-a .form-part+.form-part{border-top:1px solid var(--line)}
.fv-a .step-count{margin:26px 0 6px;color:var(--sage-accessible)}
.fv-a .form-part h2{font:500 clamp(27px,3vw,36px)/1.12 var(--display);letter-spacing:-.03em}
.fv-a .form-part .step-note{font-size:15.5px;max-width:52ch}
/* labels take a quiet italic serif voice, like annotations on a letter */
.fv-a .field label,.fv-a .field .group-label{font:italic 500 17px/1.4 var(--display);letter-spacing:0;color:var(--ink);margin-bottom:6px}
.fv-a .field .hint{font-style:normal;font-family:var(--body)}
/* baseline-rule inputs: write on the line, not in a box */
.fv-a .field input[type=text],.fv-a .field input[type=email],.fv-a .field input[type=tel]{background:transparent;border:0;border-bottom:1.5px solid rgba(24,32,25,.4);border-radius:0;padding:8px 2px 9px;font-size:17px}
.fv-a .field select{background-color:transparent;border:0;border-bottom:1.5px solid rgba(24,32,25,.4);border-radius:0;padding:8px 28px 9px 2px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23425f36' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}
/* ruled-paper textarea */
.fv-a .field textarea,.fv-a .consult-form textarea{background:transparent;border:0;border-bottom:1.5px solid rgba(24,32,25,.4);border-radius:0;padding:6px 2px 8px;line-height:34px;min-height:140px;background-image:repeating-linear-gradient(transparent,transparent 33px,rgba(24,32,25,.16) 33px,rgba(24,32,25,.16) 34px);background-attachment:local}
.fv-a .field input:focus,.fv-a .field select:focus,.fv-a .field textarea:focus,.fv-a .consult-form input:focus,.fv-a .consult-form select:focus,.fv-a .consult-form textarea:focus{outline:none;border-color:var(--sage-accessible);box-shadow:0 1.5px 0 0 var(--sage-accessible)}
/* choices as an inked list, not grey pills */
.fv-a .choice-grid,.fv-a .choice-grid.cols{display:block}
.fv-a .choice{border:0;border-radius:0;background:transparent;padding:13px 4px;border-bottom:1px solid rgba(24,32,25,.14);gap:15px;align-items:flex-start}
.fv-a .choice:last-child{border-bottom:0}
.fv-a .choice:hover{background:rgba(104,130,88,.07)}
.fv-a .choice input{appearance:none;-webkit-appearance:none;margin:2px 0 0;width:21px;height:21px;border:1.6px solid var(--ink);background:transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.fv-a .choice input[type=radio]{border-radius:50% 46% 52% 48%}
.fv-a .choice input[type=checkbox]{border-radius:6px 4px 7px 4px}
.fv-a .choice input:checked{background:var(--sage-accessible);border-color:var(--sage-accessible);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1.5 5.2 4.6 8.3 10.5 1.6' fill='none' stroke='%23e7eadb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.fv-a .choice.picked{border-color:rgba(24,32,25,.14);background:transparent;box-shadow:none}
.fv-a .choice.picked .choice-text b{color:var(--sage-accessible)}
.fv-a .choice .choice-text b{font:500 18px/1.3 var(--display);letter-spacing:-.01em}
.fv-a .choice:has(input:focus-visible){outline:2px solid var(--sage-accessible);outline-offset:0}
/* recommendation as an editorial pull-quote, not a card */
.fv-a .recommend-card{border:0;border-left:3px solid var(--sage);border-radius:0;background:transparent;padding:4px 0 4px 24px}
.fv-a .rec-pricing{border-top:1px solid rgba(24,32,25,.14)}
/* error + missing states on the rule instead of the box */
.fv-a .form-error{border-radius:0;background:transparent;border-left:3px solid #b0522f;padding:6px 0 6px 16px;color:#7c3a24}
.fv-a .field.missing input,.fv-a .field.missing select,.fv-a .field.missing textarea{border-color:#b0522f;box-shadow:0 1.5px 0 0 #b0522f}
.fv-a .field.missing .choice{border-color:rgba(24,32,25,.14)}
.fv-a .field.missing .choice input{border-color:#b0522f}
.fv-a .form-sent{padding:40px 0}
@media(max-width:640px){.fv-a .form-part h2{font-size:25px}.fv-a .form-part{padding:6px 0 36px}}
/* r12a fix: choices nested in .field were caught by the .field label display:block
   rule (a latent r11 defect), stacking the box above its text. Restore the row. */
.fv-a .field label.choice{display:flex;align-items:flex-start;gap:15px;font-style:normal;font-family:var(--body);margin-bottom:0}

/* ============ r13 layer ============ */
/* 2. Ask Laura hero card: refined to the fv-a "letter to Laura" language.
   Layout, avatar and copy unchanged; warm paper ground, italic display
   labels, inked outlines, sage fills, dashed letter rules. */
.ask-card{background:var(--paper);border:1px solid var(--line);box-shadow:0 26px 64px rgba(8,18,10,.26)}
.ask-q{font:italic 500 21px/1.22 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ask-avatar{box-shadow:0 0 0 1.5px var(--ink),0 0 0 4px var(--paper)}
.ask-bio{border-bottom:1px dashed rgba(24,32,25,.32)}
.ask-chip{background:transparent;border:1.5px solid rgba(24,32,25,.55);color:var(--ink);font:italic 500 14.5px/1.3 var(--display);letter-spacing:0;padding:8px 17px}
.ask-chip:nth-child(odd){border-radius:22px 18px 24px 17px}
.ask-chip:nth-child(even){border-radius:18px 23px 17px 22px}
.ask-chip:hover,.ask-chip:focus-visible{background:var(--sage-accessible);border-color:var(--sage-accessible);color:var(--ivory)}
.ask-more{border-top:1px dashed rgba(24,32,25,.32)}
.ask-else[aria-expanded=true]{background:var(--sage-accessible);border-color:var(--sage-accessible);color:var(--ivory)}
@media(max-width:640px){.ask-chip{font-size:13.5px;padding:7px 14px}}

/* 3. Footer rework at desktop: three balanced columns, contact details as a
   designed letter sign-off strip, tightened centred base line. Markup shared
   and unchanged; mobile stack behaves as before. */
.site-footer{display:block}
.footer-grid{grid-template-columns:1.45fr 1fr 1fr;row-gap:0}
.footer-brand p{max-width:360px}
.footer-col[aria-label="Contact details"]{grid-column:1/-1;margin-top:46px;padding-top:26px;border-top:1px dashed rgba(231,234,219,.28);display:flex;align-items:baseline;gap:14px 34px;flex-wrap:wrap}
.footer-col[aria-label="Contact details"] h3{margin:0}
.footer-col[aria-label="Contact details"] ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 38px}
.footer-col[aria-label="Contact details"] a{font:italic 500 clamp(18px,1.6vw,22px)/1.3 var(--display);letter-spacing:-.01em;color:var(--ivory);border-bottom:1.5px solid rgba(231,234,219,.35)}
.footer-col[aria-label="Contact details"] a:hover,.footer-col[aria-label="Contact details"] a:focus-visible{border-bottom-color:var(--grass);color:var(--ivory)}
.footer-base{margin-top:26px;padding-top:20px;border-top:0;justify-content:center;align-items:baseline;gap:10px 14px;text-align:center}
.footer-base p+p::before{content:"";display:inline-block;width:5px;height:5px;margin-right:14px;border-radius:50% 45% 55% 50%;background:var(--grass);vertical-align:2px;opacity:.8}
.footer-base a{color:rgba(231,234,219,.78)}
.footer-base a:hover,.footer-base a:focus-visible{color:var(--ivory)}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:38px}.footer-col[aria-label="Contact details"]{margin-top:8px}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;row-gap:32px}.footer-col[aria-label="Contact details"]{display:block;margin-top:0;padding-top:0;border-top:0}.footer-col[aria-label="Contact details"] ul{display:grid;gap:9px}.footer-col[aria-label="Contact details"] a{font:inherit;font-size:14.5px;border-bottom:1px solid transparent}.footer-base{justify-content:flex-start;text-align:left}.footer-base p+p::before{display:none}}

/* ============ r14 layer: the hidden onboarding intake joins the fv-a
   "letter to Laura" language. The shared fv-a rules already restyle its
   fields, textareas, selects, choices and section headings; this layer
   extends the letter voice to the controls only the onboarding form has:
   need/draft chips, the agreement check-lines, the photo upload, the
   save-as-you-go note and the fixed "Section x of 8" pill. ============ */
.fv-a .need{display:inline;background:none;border:0;border-radius:0;padding:0;margin-left:3px;color:var(--sage-accessible);font:600 15px/1 var(--body);letter-spacing:0;vertical-align:-1px;white-space:normal}
.fv-a .draft-flag{border-radius:11px 14px 10px 13px;font:italic 500 11px/1.4 var(--display)}
.fv-a .field .need,.fv-a .field .draft-flag{font-style:italic}
/* save-as-you-go reassurance in the hero keeps the annotation voice */
.fv-a .hero-small{font:italic 500 15.5px/1.6 var(--display);letter-spacing:0;color:#556052}
/* photo upload: a pasted-in keepsake slot, dashed inked outline on the paper */
.fv-a .field input[type=file]{background:transparent;border:1.5px dashed rgba(24,32,25,.45);border-radius:16px 11px 17px 12px;padding:14px 15px;font:400 14.5px/1.5 var(--body);cursor:pointer}
.fv-a .field input[type=file]:hover{background:rgba(104,130,88,.07)}
.fv-a .field input[type=file]:focus-visible{outline:2px solid var(--sage-accessible);outline-offset:2px;border-color:var(--sage-accessible);box-shadow:none}
.fv-a .field input[type=file]::file-selector-button{appearance:none;border:1.5px solid var(--sage-accessible);border-radius:14px 11px 15px 10px;background:transparent;color:var(--sage-accessible);font:italic 600 13.5px/1.3 var(--display);padding:7px 15px;margin-right:13px;cursor:pointer;transition:background .15s ease,color .15s ease}
.fv-a .field input[type=file]:hover::file-selector-button{background:var(--sage-accessible);color:var(--ivory)}
/* agreement check-lines: same hand-inked box as the choice list */
.fv-a .check-field .check-line{padding:12px 4px;border-bottom:1px solid rgba(24,32,25,.14);gap:15px}
.fv-a .check-field .check-line input{appearance:none;-webkit-appearance:none;accent-color:auto;margin:2px 0 0;width:21px;height:21px;border:1.6px solid var(--ink);border-radius:6px 4px 7px 4px;background:transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.fv-a .check-field .check-line input:checked{background:var(--sage-accessible);border-color:var(--sage-accessible);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1.5 5.2 4.6 8.3 10.5 1.6' fill='none' stroke='%23e7eadb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.fv-a .check-field .check-line input:focus-visible{outline:2px solid var(--sage-accessible);outline-offset:2px}
.fv-a .check-field .check-line:hover{background:rgba(104,130,88,.07)}
.fv-a .field.missing .check-line input{border-color:#b0522f}
/* the fixed "Section x of 8" pill becomes a small paper label, still fixed
   and still lifted above the cookie bar by the shared r10 offset rule */
.fv-a .ob-progress-text{background:var(--paper);color:var(--ink);border:1.5px solid rgba(24,32,25,.55);border-radius:18px 14px 19px 13px;font:italic 600 12.5px/1.4 var(--display);letter-spacing:.02em;padding:7px 16px;box-shadow:0 8px 22px rgba(8,18,10,.16)}
/* thank-you letter sign-off */
.fv-a .onboard-form .form-sent h2{font:500 clamp(26px,3vw,34px)/1.14 var(--display);letter-spacing:-.03em}
.fv-a .onboard-form .next-steps li{line-height:1.65}
/* the generic .check-line span{flex:1;display:block} rule was stretching the
   chips inside agreement lines into full-width ovals; keep them compact */
.check-field .check-line span.need,.check-field .check-line span.draft-flag{display:inline-block;flex:none;width:auto;align-self:flex-start}
@media(max-width:640px){.fv-a .need,.fv-a .draft-flag{white-space:normal}}

/* ---- Watch card (Laura's pre-start film, click-to-load, consent-friendly) ---- */
.watch{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 24px 48px -34px rgba(24,32,25,.5);padding:clamp(14px,1.6vw,18px)}
.watch-media{position:relative;display:block;margin:0;padding:0;border:0;cursor:pointer;background:var(--deep);border-radius:3px;overflow:hidden;aspect-ratio:16/9;width:100%}
.watch-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(.98)}
.watch-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,36,27,.10),rgba(23,36,27,.42));transition:background .25s var(--ease)}
.watch-media:hover .watch-scrim,.watch-media:focus-visible .watch-scrim{background:linear-gradient(180deg,rgba(23,36,27,.05),rgba(23,36,27,.30))}
.watch-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:var(--ivory);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(23,36,27,.6);transition:transform .2s var(--ease),background .2s var(--ease)}
.watch-media:hover .watch-play,.watch-media:focus-visible .watch-play{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.watch-play svg{width:22px;height:22px;margin-left:3px;fill:var(--sage-accessible)}
.watch-time{position:absolute;right:12px;bottom:11px;padding:3px 9px;border-radius:999px;background:rgba(17,26,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ivory);font:600 11px/1.3 var(--body);letter-spacing:.03em}
.watch-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-copy{margin-top:clamp(18px,2vw,24px);max-width:780px}
.watch-copy .eyebrow{color:var(--sage-accessible);margin-bottom:12px}
.watch-copy h3{margin:0;font:500 clamp(26px,2.6vw,34px)/1.08 var(--display);letter-spacing:-.01em;color:var(--forest)}
.watch-copy p{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--muted)}
.watch-credit{margin-top:14px!important;font-size:13px!important;color:var(--sage-accessible)!important;font-style:italic}
@media(max-width:640px){.watch-play{width:60px;height:60px}}

/* ---- Home intro enrichment (fills the sparse "listening" band) ---- */
.intro-aside{display:flex;flex-direction:column;gap:clamp(18px,1.8vw,24px)}
.intro-portrait{margin:0;border-radius:14px 9px 15px 9px;overflow:hidden;border:1px solid var(--line);box-shadow:0 22px 44px -32px rgba(24,32,25,.5);aspect-ratio:4/5}
.intro-portrait img{width:100%;height:100%;object-fit:cover}
.intro-points{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.intro-points li{border-top:1.5px dashed var(--line);padding-top:16px}
.intro-points h3{margin:0;font:500 19px/1.15 var(--display);color:var(--forest);letter-spacing:-.01em}
.intro-points p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
@media(max-width:860px){.intro-points{grid-template-columns:1fr;gap:0}.intro-points li{border-top:1.5px dashed var(--line);padding:16px 0}.intro-points li+li{border-top-style:dashed}}
@media(max-width:640px){.intro-portrait{aspect-ratio:3/2;max-width:100%}}

/* ============ r15 layer: Laura's self-hosted portrait intro film ============
   Scoped sibling of the .watch card (which is 16:9, welcome-aboard only, and
   loads a third-party embed). This one is portrait, self-hosted, and sits in a
   two-column block with its heading and lead. Same visual language: paper card,
   hairline border, near-square 3px stage, ivory play button, quiet duration pill. */
.film{background:var(--ivory);padding:clamp(74px,8.5vw,125px) var(--gutter)}
.film-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,306px) minmax(0,1fr);column-gap:clamp(34px,5vw,68px);row-gap:22px;align-items:center}
.film-frame{position:relative;order:1;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 24px 48px -34px rgba(24,32,25,.5);padding:10px}
.film-copy{order:2;max-width:640px}
.film-stage{position:relative;width:100%;aspect-ratio:9/16;border-radius:3px;overflow:hidden;background:var(--deep)}
.film-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--deep)}
/* r16: bare ivory triangle, no disc and no pill. Held off Laura's face in the
   lower third and offset left, which also leaves the bottom-centre band free
   for caption cues and clears the duration chip on the right. Legibility over
   both the light wall and the green hoodie comes from a soft double shadow
   rather than a solid shape. The button itself stays a full-frame hit area, so
   the tap target is far larger than 44px even though the mark is lighter. */
.film-play{position:absolute;inset:0;width:100%;height:100%;padding:0 0 8% 7%;border:0;cursor:pointer;display:grid;place-items:end start;background:linear-gradient(180deg,rgba(23,36,27,.06),rgba(23,36,27,.34));transition:background .25s var(--ease)}
.film-play:hover,.film-play:focus-visible{background:linear-gradient(180deg,rgba(23,36,27,.03),rgba(23,36,27,.24))}
.film-play span{width:clamp(76px,7.6vw,112px);height:clamp(76px,7.6vw,112px);display:grid;place-items:center;transition:transform .2s var(--ease)}
.film-play:hover span,.film-play:focus-visible span{transform:scale(1.06)}
.film-play svg{width:100%;height:100%;fill:var(--ivory);fill-opacity:.9;filter:drop-shadow(0 4px 14px rgba(15,24,17,.62)) drop-shadow(0 1px 3px rgba(15,24,17,.5));transition:fill-opacity .2s var(--ease)}
.film-play:hover svg,.film-play:focus-visible svg{fill-opacity:.97}
.film-time{position:absolute;right:12px;bottom:11px;padding:3px 9px;border-radius:999px;background:rgba(17,26,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ivory);font:600 11px/1.3 var(--body);letter-spacing:.03em;pointer-events:none}
.film-frame.is-playing .film-play,.film-frame.is-playing .film-time{display:none}
.film-copy .eyebrow{color:var(--sage-accessible);margin-bottom:12px}
.film-copy h2{margin:0;font:500 clamp(30px,3.2vw,46px)/1.06 var(--display);letter-spacing:-.025em;color:var(--forest)}
.film-copy p{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--muted)}
.film-alt{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.film-alt>summary{cursor:pointer;list-style:none;display:inline-block;font:400 14px/1.5 var(--body);color:var(--muted);opacity:.8;border-bottom:1px dotted var(--line);padding-bottom:2px}
.film-alt>summary:hover{opacity:1;color:var(--sage-accessible)}
.film-alt>summary::-webkit-details-marker{display:none}
.film-alt>summary:focus-visible{outline:2px solid var(--sage-accessible);outline-offset:4px}
.film-alt>p{margin:12px 0 0;font-style:italic;color:var(--muted)}
@media(max-width:860px){.film-inner{grid-template-columns:1fr;column-gap:0;row-gap:30px;max-width:560px}.film-copy{order:1;align-self:auto}.film-frame{order:2;max-width:306px;width:100%;justify-self:center}}
@media(max-width:640px){.film-play span{width:76px;height:76px}.film-copy p{font-size:17px}}

/* r16: the film no longer stands alone. It is the portrait slot inside the two
   existing side-column sections, so one section carries both the copy and her
   message instead of two competing bands. Layout comes from the host section;
   the frame keeps its own shared component rules untouched. */

/* r17: the frame is no longer capped to fit a column that was measured for a
   photo. The host column is sized for the portrait and the frame fills it, so
   the video reads as deliberate rather than as a thumbnail pinned to the left
   edge. The copy that r16 lost is back as .film-note at the foot of the copy
   column, which is also what closes the dead lower-right quadrant: the two
   columns now finish within about 50px of each other at 1440. */
.intro-aside .film-frame,.prose-aside .film-frame{width:100%;max-width:none;order:1}
.intro-aside .film-alt,.prose-aside .film-alt{order:2}
.prose-aside{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,34px);align-items:stretch}
/* The block runs the full width of its copy column so its dashed rule lines up
   with the rules above it (the intro points on home, the prose measure on
   about); only the reading measure is capped. */
@media(max-width:860px){
.prose-aside{gap:22px}
.intro-aside .film-frame,.prose-aside .film-frame{max-width:296px;margin-inline:auto}
.film-alt{margin-inline:auto;max-width:296px;width:100%}}

/* r25 booking page: video aside, sticky on desktop and tablet */
.book-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,306px) minmax(0,1fr);gap:clamp(34px,4.5vw,64px);align-items:start}
.book-grid .consult-form{margin:0}
.book-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:clamp(18px,1.8vw,24px)}
@media(max-width:900px){.book-grid{grid-template-columns:1fr;gap:28px}.book-aside{position:static;top:auto}.book-aside .film-frame{max-width:296px;margin-inline:auto}}

/* r27 Marl credit, mirrors the marl.studio wordmark treatment */
.marl-credit{margin:0;margin-left:auto}
.marl-credit a{display:inline-flex;align-items:center;gap:8px;color:rgba(231,234,219,.55);text-decoration:none;letter-spacing:.01em;transition:color .2s ease,opacity .2s ease}
.marl-credit .marl-mark{display:block;opacity:.7;transition:opacity .2s ease}
.marl-credit b{color:#b06a4f;font-weight:inherit}
.marl-credit a:hover,.marl-credit a:focus-visible{color:var(--ivory)}
.marl-credit a:hover .marl-mark,.marl-credit a:focus-visible .marl-mark{opacity:1}
@media(max-width:720px){.marl-credit{margin-left:0}}

/* r27 service detail panel: mirrors the real service page, fetched at open time */
body.svc-open{overflow:hidden}
.svc-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.svc-backdrop{position:absolute;inset:0;background:rgba(23,36,27,.62);backdrop-filter:blur(2px)}
.svc-panel{position:relative;background:var(--paper);border-radius:18px;box-shadow:0 30px 80px rgba(8,18,10,.34);width:min(860px,100%);max-height:88vh;overflow:auto;padding:clamp(22px,3.4vw,42px);outline:none}
.svc-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.svc-close:hover,.svc-close:focus-visible{background:rgba(104,130,88,.12);color:var(--ink)}
.svc-body .page-hero>div,.svc-body .prose{padding:0;max-width:none;margin:0}
.svc-body .prose{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(20px,3vw,38px);margin-top:22px;align-items:start}
.svc-body h1{font:500 clamp(26px,3vw,34px)/1.12 var(--display);letter-spacing:-.02em;margin:6px 0 10px}
.svc-body h2{font-size:clamp(20px,2vw,24px)}
.svc-body p{font-size:16px}
.svc-body .film-frame{max-width:250px}
.svc-loading{color:var(--muted)}
.svc-full{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
@media(max-width:720px){.svc-body .prose{grid-template-columns:1fr}.svc-body .film-frame{max-width:240px;margin-inline:auto}}

.footer-base .marl-credit::before{display:none!important}
.footer-base{align-items:center}

.footer-base .marl-credit{margin:0 0 0 auto}
@media(max-width:720px){.footer-base .marl-credit{margin:0}}

.svc-modal[hidden]{display:none}

.book-aside .film-frame{order:1}
.book-aside .film-alt{order:2}
/* ============ r33 layer: prices and packages ============ */
/* A dedicated price list gets its own full-width container rather than four
   stacked .prose sections, which left a 240px dead band between every group and
   squeezed the descriptions into a 618px column. The shared .price-row
   component is reused and simply scoped up in weight. */
.prices-wrap{max-width:1120px;margin:0 auto;padding:clamp(66px,7vw,104px) var(--gutter) clamp(74px,8vw,116px)}
.price-group+.price-group{margin-top:clamp(52px,5.4vw,78px)}
.price-group>h2{font:500 clamp(32px,3vw,44px)/1.1 var(--display);letter-spacing:-.03em;margin:10px 0 14px;max-width:30ch}
.price-lead{margin:0;max-width:70ch;color:var(--muted);font-size:17px;line-height:1.65}
.price-block{margin:26px 0 0;border-top:1px solid var(--line)}
.price-block .price-row{padding:20px 0;border-bottom:1px solid var(--line);gap:40px;align-items:baseline}
.price-block .price-what b{display:block;font:500 22px/1.2 var(--display);letter-spacing:-.015em;margin:0 0 6px;color:var(--ink)}
.price-block .price-what small{font-size:15px;line-height:1.6;color:var(--muted);max-width:66ch}
.price-block .price-row .price{font:500 26px/1 var(--display);letter-spacing:-.02em;font-size:26px;min-width:5.5ch;text-align:right}
.price-note{margin:20px 0 0;max-width:70ch;font-size:15px;line-height:1.65;color:var(--muted)}
@media(max-width:640px){
  .price-block .price-row{flex-direction:column;gap:8px;align-items:flex-start}
  .price-block .price-row .price{font-size:23px;text-align:left;min-width:0}
  .price-block .price-what small{max-width:none}
  .price-group>h2{max-width:none}
}


/* ===== Revision 38: Services submenu in the primary navigation =====
   Static markup, not a WordPress menu. Everything below reuses the existing nav
   tokens, type scale, hover colour and focus ring; nothing new is introduced
   except the chevron, which is drawn in the same 2px currentColor line-art as
   the existing hamburger. Services itself stays a real link to /services/ at
   every width.

   Revision 38 (Ryan's call): the desktop panel must read as a DRAWER sliding out
   of the bottom edge of the header bar, not a floating rounded card. Square
   corners, no top border, and a clip-path reveal instead of a translateY drop,
   so there is no visible seam between the bar and the panel. Mobile was already
   flat, borderless and square and is unchanged. */

/* Desktop: overlaid dropdown, so the closed header height never changes. */
.site-header nav .nav-item{position:relative;display:flex;align-items:center;align-self:stretch}
.site-header nav .nav-item>.sub-toggle{display:none}
.site-header nav .sub-menu{
position:absolute;
top:100%;
left:-16px;
min-width:262px;
display:grid;
padding:8px 0;
/* r42 (Ryan's call): the drawer takes the tips bar's --forest rather than the
   header's --sage-accessible. Same-colour-on-same-colour made the open panel read
   as one heavy slab of green with only a hairline separating it from the bar.
   --forest is already the site's second header-family green (it is the tips bar
   directly above), so this is a reuse of an existing token, not a new colour. */
background:var(--forest);
border:1px solid rgba(231,234,219,.22);
border-top:0;
border-radius:0;
visibility:hidden;
opacity:0;
/* No drop shadow, deliberately. At desktop the header bar itself carries only a
   1px light hairline, and the 0 14px 30px shadow on .js .site-header lives inside
   the max-width:1000px block, so it is mobile-drawer only. A heavy shadow under
   the dropdown made it read as a floating card hovering off a bar that has no
   shadow of its own. The side and bottom borders now do all the work of defining
   the panel's edges, which is why they are kept.

   The negative side/bottom clip insets are kept as headroom, not because a shadow
   needs room to spill. clip-path clips descendants too, so the wide box
   guarantees nothing at the panel edge, such as a child link's focus ring, can
   ever be sliced. Keep the top inset at 0; that is what produces the drawer
   reveal. */
clip-path:inset(0 -80px 100% -80px);
transition:opacity .18s ease,clip-path .18s var(--ease),visibility 0s linear .18s;
z-index:30}
.site-header nav .nav-item.is-open>.sub-menu{
visibility:visible;
opacity:1;
clip-path:inset(0 -80px -80px -80px);
transition:opacity .18s ease,clip-path .18s var(--ease),visibility 0s}
.site-header nav .sub-menu a{
display:flex;
align-items:center;
min-height:44px;
padding:6px 18px;
white-space:nowrap}
.site-header nav .sub-menu a:after{display:none}
.site-header nav .sub-menu a:hover,.site-header nav .sub-menu a:focus-visible{
background:rgba(231,234,219,.12);
color:var(--ivory)}

/* Without JavaScript nothing expands, so the submenu never appears and the nav
   behaves exactly as it did in revision 36. Services still links to /services/,
   and all four service pages remain linked from the footer. */
html:not(.js) .site-header nav .sub-menu,
html:not(.js) .site-header nav .sub-toggle{display:none}

@media(max-width:1000px){
/* Mobile: the parent row carries two separate targets. The label navigates to
   /services/; the chevron beside it expands. Both are at least 44x44. */
.js .site-header nav .nav-item{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
position:static;
align-self:auto}
.js .site-header nav .nav-item>.sub-toggle{
display:flex;
align-items:center;
justify-content:center;
min-width:56px;
min-height:56px;
padding:0;
appearance:none;
border:0;
background:transparent;
color:inherit;
cursor:pointer}
.js .site-header nav .nav-item>.sub-toggle i{
display:block;
width:9px;
height:9px;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:translateY(-3px) rotate(45deg);
transition:transform .26s var(--ease)}
.js .site-header nav .nav-item.is-open>.sub-toggle i{transform:translateY(2px) rotate(-135deg)}
.js .site-header nav .nav-item>.sub-toggle:focus-visible{outline:3px solid var(--grass);outline-offset:-4px}
/* display:none keeps the collapsed children out of the tab order. */
.js .site-header nav .sub-menu{
grid-column:1/-1;
position:static;
display:none;
min-width:0;
padding:0 0 8px 18px;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
opacity:1;
visibility:visible;
transform:none;
/* The desktop drawer clip is declared outside this media query, so it must be
   reset here exactly as transform was. Mobile stays flat and uncropped. */
clip-path:none;
transition:none}
/* The open-state clip is set by a higher-specificity selector outside this media
   query, so the reset has to be repeated at matching specificity or the mobile
   panel keeps a top-edge clip that would crop the first child's focus ring. */
.js .site-header nav .nav-item.is-open>.sub-menu{display:grid;clip-path:none}
.js .site-header nav .sub-menu a{
min-height:48px;
padding:4px 0;
font-size:14px;
white-space:normal;
opacity:1;
transform:none;
color:rgba(231,234,219,.82)}
.js .site-header nav .sub-menu a:hover,.js .site-header nav .sub-menu a:focus-visible{background:none;color:var(--ivory)}
/* The drawer's entrance stagger is keyed to nth-child; wrapping Services in
   .nav-item moved it out of that sequence, so its delay is restored here. The
   other four items keep the positions they already had. */
.js .site-header nav.open .nav-item>.nav-parent{transition-delay:.09s}
}

@media(prefers-reduced-motion:reduce){
/* Instant open rather than a slide: the clip-path transition is suppressed too,
   so the drawer simply appears at full height. */
.site-header nav .sub-menu,.site-header nav .nav-item>.sub-toggle i{transition:none!important}
.site-header nav .nav-item.is-open>.sub-menu{clip-path:inset(0 -80px -80px -80px)}
}

/* ============ r43 layer ============ */
/* M3: Ask Laura card, mobile only. Ryan's call: tight to all edges, content
   inside still padded properly, keep the colour, optional shadow along the
   bottom only. Scoped to max-width:640px, which is the same breakpoint that
   already owns the card's mobile padding and radius. Desktop and the 641-1000
   stacked tablet layout are untouched. */
@media(max-width:640px){
  /* The 22px gutter each side came from .ask-laura's own padding, not the card,
     so it is the padding that has to go. .hero-copy is not an ancestor here. */
  .ask-laura{padding-left:0;padding-right:0;margin-top:0}
  .ask-card{
    border-radius:0;
    /* Side borders would render as 1px lines pinned to the screen edges. Top
       and bottom are kept; they still read as real edges. */
    border-left:0;
    border-right:0;
    /* Internal rhythm deliberately unchanged from the r13/r7 mobile values, so
       the copy and chips keep their padding off the screen edge. */
    padding:20px 18px 18px;
    /* The 0 26px 64px ambient shadow is gone. This is a restrained bottom-edge
       lift only, to separate the card from the section that follows. */
    box-shadow:0 8px 14px -10px rgba(8,18,10,.42)}
}

/* ============ r44 layer ============ */
/* M7: on phones the page-hero stops being "ivory text block, then a photo
   underneath" and becomes the same photo-with-text-over composition Ryan
   already signed off on the home page. Mirrors .hero / .hero-shade / .hero-copy
   at the same 640px breakpoint. 641px and above is deliberately untouched:
   the two-column desktop and the 46/54 tablet layout are unchanged.
   Shared rule, all ten pages. No markup was added; .page-hero has no
   .hero-shade element so the scrim is a ::before on the section itself. */
@media(max-width:640px){
  .page-hero{
    position:relative;
    /* grid + align-items:end is how .hero bottom-weights its copy. It also lets
       a long h1 (services, prices, welcome-aboard) grow the section upward
       instead of overflowing the photo. */
    display:grid;
    align-items:end;
    grid-template-columns:1fr;
    overflow:hidden;
    min-height:660px;
    /* .deep behind the photo, so there is never an ivory flash before decode
       and never a pale band if a photo fails to load. */
    background:var(--deep);
    color:#fff}
  /* The photo fills the section. It is the only <img> in the component on all
     ten pages, so this one rule covers them all. */
  .page-hero>img{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    /* Matches the home hero's 640px anchor as the baseline. Per-photo
       corrections are further down. */
    object-position:50% 38%}
  /* The scrim. Same bottom-weighted gradient as .hero-shade at 640px. */
  .page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    /* Slightly gentler than .hero-shade's own .82/.25 because the copy block
       below carries a second, copy-bound layer. The two composite to ~.81 at
       the bottom edge (1-(1-.72)(1-.3)=.80), which is home-hero parity.
       Measured, not guessed. */
    background:linear-gradient(0deg,rgba(16,30,20,.72) 0%,rgba(16,30,20,.22) 74%)}
  .page-hero>div{
    position:relative;
    z-index:2;
    /* Same shape as .hero-copy's 250px/64px, scaled to the shorter section. */
    padding:150px var(--gutter) 56px;
    align-self:end;
    max-width:none;
    /* The home hero can rely on a percentage scrim because its copy is short
       and always sits in the bottom third. These ten heroes carry far more
       copy and vary from ~490px to ~833px tall, so a percentage stop lands in
       a different place on every page and the eyebrow ends up over bright sky.
       This gradient is bound to the copy block itself and is expressed in px,
       so it reaches full strength 120px down, i.e. 30px above the eyebrow, on
       every page regardless of how tall the copy is. */
    background:linear-gradient(180deg,rgba(16,30,20,0) 0,rgba(16,30,20,.3) 120px,rgba(16,30,20,.3) 100%)}
  /* Every piece of copy goes white. .eyebrow carries no colour of its own and
     would otherwise inherit --ink; .hero-small has an explicit #5a655a that
     would disappear entirely, so both are named here rather than left to
     inheritance. */
  .page-hero h1,
  .page-hero p,
  .page-hero .eyebrow,
  .page-hero p:not(.eyebrow),
  .page-hero .hero-small{color:#fff}
  .page-hero h1{font-size:38px;max-width:none}
  .page-hero p:not(.eyebrow){max-width:none}
  .page-hero .hero-small{color:rgba(255,255,255,.84)}
  /* .button.dark is a --deep block styled for an ivory background; over the
     scrim it is dark-on-dark. The home hero's answer to a button over a photo
     is .button.light, so the seven page-heroes that carry one get that
     treatment here without touching their markup. */
  .page-hero .button.dark{
    margin-top:18px;
    background:var(--ivory);
    border-color:var(--ivory);
    color:var(--forest)}
  .page-hero .button.dark:hover,
  .page-hero .button.dark:focus-visible{
    background:var(--sage);
    border-color:var(--sage);
    color:var(--ivory)}
  /* Per-photo focal points. Keyed off the image's own src because the ten
     pages share a body class and there is no per-page hook in the markup, and
     markup changes are out of scope. Each value was set from a 390px render,
     not guessed. */
  /* about: Laura sat hard against the left edge, half out of frame. */
  .page-hero>img[src*="exec-6dcdc8dc"]{object-position:36% 34%}
  /* services: Laura was cropped down to hair and one arm. */
  .page-hero>img[src*="exec-69639a15"]{object-position:30% 42%}
  /* puppy-support: the puppy's face sat directly behind the h1. Lifted clear. */
  .page-hero>img[src*="puppy-r24"]{object-position:50% 56%}
  /* welcome-aboard shares its photo with book-a-consultation but runs ~833px
     tall, so the same crop leaves a large empty sky behind the top half of the
     copy. It is the only page-hero carrying .hero-small, so that is the hook. */
  .page-hero:has(.hero-small)>img{object-position:50% 56%}
}


/* ============ r45 layer: agreed mobile polish (M8-M12) ============ */
@media(max-width:640px){
  /* This follows the shared intro component declaration, so the mobile size wins. */
  .intro-points h3{font-size:22px}
}

/* ============ r46: mobile services journey and film stories ============
   Both treatments are intentionally limited to the signed-off phone breakpoint.
   Desktop and the 641-1000px tablet composition continue to use the r45 rules. */
@media(max-width:640px){
  /* Services reads as one photographic journey rather than a hero followed by
     a detached paper grid. The existing copy and links stay exactly where they
     are, while each service becomes a calm editorial stop. */
  body:has(.service-cards) .page-hero{min-height:580px}
  body:has(.service-cards) .page-hero>div{padding-bottom:54px}
  body:has(.service-cards) .service-cards{
    position:relative;
    margin-top:0;
    padding:48px var(--gutter) 58px;
    background:var(--paper);
  }
  body:has(.service-cards) .service-cards::before{
    content:"";
    position:absolute;
    top:0;
    left:var(--gutter);
    right:var(--gutter);
    height:1px;
    background:var(--line);
  }
  body:has(.service-cards) .service-cards>h2{
    position:relative;
    margin:0 0 30px;
    color:var(--forest);
    font-size:34px;
    max-width:12ch;
  }
  body:has(.service-cards) .card-grid{gap:0}
  body:has(.service-cards) .svc-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:16px;
    padding:20px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:var(--forest);
    border-top:1px solid var(--line);
  }
  body:has(.service-cards) .svc-card:first-child{border-top:0;padding-top:0}
  body:has(.service-cards) .svc-card img{
    grid-row:1 / span 2;
    width:112px;
    height:142px;
    border-radius:56px 56px 8px 8px;
    object-fit:cover;
  }
  body:has(.service-cards) .svc-card>div{display:block;padding:0}
  body:has(.service-cards) .svc-card h3{margin:0 0 7px;color:var(--forest);font-size:25px}
  body:has(.service-cards) .svc-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.52}
  body:has(.service-cards) .svc-card .card-link{display:inline-block;margin-top:12px;color:var(--sage-accessible);font-size:10.5px;border-bottom:1px solid var(--sage-accessible);padding-bottom:3px}
  body:has(.service-cards) .svc-card:focus-visible{outline:2px solid var(--forest);outline-offset:5px}

  /* A real button remains the entry point. JavaScript only applies story-ready
     after the accessible modal plumbing is available, so no-JS visitors retain
     the native video control and poster. */
  .film-frame.story-ready{
    width:118px;
    max-width:none;
    margin:0!important;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    box-shadow:none;
  }
  .film-frame.story-ready .film-stage{aspect-ratio:1;border-radius:50%;overflow:hidden;background-color:var(--forest);background-position:center 34%;background-repeat:no-repeat;background-size:cover;box-shadow:0 0 0 2px var(--ivory),0 0 0 6px var(--sage-accessible),0 10px 24px rgba(8,18,10,.22)}
  .film-frame.story-ready video{display:none}
  .film-frame.story-ready .film-play{display:grid!important;inset:0;padding:0;place-items:center;background:linear-gradient(180deg,rgba(23,36,27,.08),rgba(23,36,27,.42));}
  .film-frame.story-ready .film-play span{width:48px;height:48px;border-radius:50%;background:rgba(231,234,219,.92);display:grid;place-items:center;padding-left:2px;box-shadow:0 3px 12px rgba(8,18,10,.28)}
  .film-frame.story-ready .film-play svg{width:22px;height:22px;fill:var(--forest);fill-opacity:1;filter:none}
  .film-frame.story-ready .film-time{right:50%;bottom:-29px;transform:translateX(50%);white-space:nowrap;background:transparent;backdrop-filter:none;color:var(--muted);font-size:11px;padding:0}
  .prose-aside.story-row,.book-aside.story-row{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .story-row .film-alt{display:none}
  .story-dialog{box-sizing:border-box;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));border:0;background:transparent;color:var(--ivory)}
  .story-dialog::backdrop{background:rgba(8,18,10,.72)}
  .story-dialog-inner{width:min(100%,336px);max-height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:10px}
  .story-header{padding:0 2px}
  .story-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ivory);font:600 14px/1 var(--body);cursor:pointer}
  .story-close span{font:400 29px/.7 var(--body);margin-top:-2px}
  .story-close:focus-visible{outline:2px solid var(--ivory);outline-offset:4px;border-radius:4px}
  .story-video-wrap{display:flex;justify-content:center;min-height:0;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 18px 60px rgba(0,0,0,.46)}
  .story-dialog video{display:block;width:100%;height:auto;max-height:calc(100svh - 116px);border-radius:18px;background:#000}
}

/* r47: At phone widths the pathway has no per-step imagery. Remove the
   desktop image-reservation gap so the first service follows the status panel
   as one continuous, readable route. */
@media(max-width:640px){
  .pathway-copy .step{min-height:0;padding:48px 0 45px}
}

/* r53: Home pathway phone composition only. */
@media(max-width:640px){
  .pathway{padding-top:0;padding-bottom:56px}
  .image-stack{height:260px}
  .path-img{object-position:52% 34%}
  .step{border-top:0}
  body .pathway .pathway-copy .step a{display:inline-block!important;width:max-content!important;max-width:100%!important}
  .pathway-copy .step{padding:34px 0 30px}
  .step h3{font-size:30px}
}


/* ============ r55 layer ============
   A3 only. The book-a-consultation hero photo changed from exec-2e06939c
   (Laura turned away, hair across her face) to exec-87580ded, where she is
   facing camera. The r44 per-photo focal-point pattern is keyed off the
   image src, so the new photo needs its own entry or it falls back to the
   50% 38% default and the crop at 390px cuts her off-centre. Value set from
   a 390px render, not guessed. No other rule changes: no new component, no
   new colours, no price-bearing markup. */
@media(max-width:640px){
  .page-hero>img[src*="exec-87580ded"]{object-position:45% 30%}
}