/* Rosenfield Mediation · Homepage v1 (Clear Path Version 3 tokens, splash LOCKED-v8 system)
   Astro: move to src/styles/site.css and import in Base.astro.
   Two families: Plus Jakarta Sans 800 (display) + Inter 400/600 (text), self-hosted OFL. */
@font-face{font-family:"Plus Jakarta Sans";src:url(../assets/fonts/PlusJakartaSans-800.3094234d.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/Inter-400.ca53e89b.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/Inter-600.dc66629c.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  /* colour roles */
  --teal:#28B79A; --teal-light:#3CC4A8; --teal-deep:#166455;
  --indigo:#2F3CA6; --lavender:#A296C4; --lavender-ink:#655A80; --lavender-soft:#E8E4F2;
  --on-teal:#1A2258; --body:#3B3D4F; --border:#DBD9E5; --surface:#fff; --tint:#EEEEF4;
  /* type */
  --head:"Plus Jakarta Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --text:"Inter","Segoe UI",system-ui,sans-serif;
  /* 8px spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;
  --radius:9px;
  --shadow:0 1px 2px rgba(26,34,88,.10),0 12px 32px rgba(26,34,88,.14);
  --shadow-sm:0 1px 2px rgba(26,34,88,.08),0 4px 12px rgba(26,34,88,.08);
  --bevel:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(26,34,88,.08),inset 0 -2px 6px rgba(26,34,88,.04);
  --wrap:1152px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--teal);scroll-behavior:smooth}
body{background:var(--teal) linear-gradient(180deg,var(--teal-light) 0,var(--teal) 900px) no-repeat;
  color:var(--body);font:400 18px/1.7 var(--text);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:var(--indigo);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}
.book :focus-visible{outline-color:#fff}
h1,h2,h3{color:var(--indigo);text-wrap:balance}
h1,h2{font-family:var(--head);font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(2rem,1.45rem + 2.2vw,3.25rem);line-height:1.1}
h2{font-size:clamp(2rem,1.5rem + 1.6vw,3rem);line-height:1.12}
h3{font:800 1.25rem/1.3 var(--head);letter-spacing:-.01em}
h1,h2,h3,h4,.footer-h{text-wrap:balance}
.nw{white-space:nowrap}
p{text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--s4));margin:0 auto;padding:0 var(--s4)}

/* skip link */
.skip{position:absolute;left:var(--s2);top:-100px;z-index:10;background:var(--indigo);color:#fff;padding:var(--s1) var(--s2);border-radius:var(--radius);font-weight:600}
.skip:focus{top:var(--s2)}
main:focus{outline:none}

/* card: white, 9px radius, bevel + soft shadow (splash .box) */
.card{position:relative;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--bevel)}

/* labels */
.eyebrow{display:flex;align-items:center;gap:var(--s2);font:600 13px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:var(--s2)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--teal);border-radius:2px}
.ph-tag{display:inline-block;vertical-align:.1em;margin:0 var(--s1);padding:0 var(--s1);border-radius:99px;background:var(--lavender-soft);border:1px solid var(--lavender);
  color:var(--lavender-ink);font:600 12px/1.6 var(--text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--s2) var(--s3);border-radius:var(--radius);
  font:600 15px/1.2 var(--text);letter-spacing:.04em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.btn-primary{background:var(--indigo);color:#fff;box-shadow:0 2px 0 rgba(26,34,88,.25)}
.btn-primary:hover{background:#25308A}
.btn-ghost{background:#fff;color:var(--indigo);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--indigo)}
.btn-secondary{background:var(--teal);color:var(--on-teal)}
.btn-secondary:hover{background:var(--teal-light)}
.btn-light{background:#fff;color:var(--teal-deep)}
.btn-light:hover{background:#EAF7F3}
.arrow{font-weight:600;text-decoration:none;white-space:nowrap}
.arrow::after{content:" →";transition:margin .2s}
.arrow:hover{text-decoration:underline}

/* header + nav */
.site-header{padding:var(--s3) 0 0}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.header-bar>*{flex:none}
.logo{display:block;padding:0}
.logo img{width:160px}
.header-bar{padding:var(--s2) var(--s3);box-shadow:var(--shadow);z-index:3}
.site-nav{display:flex;align-items:center;gap:var(--s2)}
.menu-btn{display:none}
.site-nav{position:relative}
.nav-list{display:flex;gap:0}
.nav-list a{display:block;padding:var(--s1);border-radius:6px;color:var(--on-teal);font:600 14px/1.4 var(--text);text-decoration:none}
.nav-list a:hover{background:var(--tint);color:var(--indigo)}
.nav-list a[aria-current="page"]{color:var(--indigo);box-shadow:inset 0 -2px 0 var(--teal)}
.nav-cta{min-height:48px;padding:var(--s1) var(--s2);font-size:14px}

/* bands / sheets */
.band{padding-left:0;padding-right:0} /* v11: vertical spacing comes only from --section-gap (end of file) */
/* Sections = white panels on the teal page, same width as header/hero (Stephen: "more white space ... white box"). */
.sheet{padding-left:var(--s4);padding-right:var(--s4)}
.sheet>.wrap{max-width:var(--wrap);padding:var(--s12) var(--s8);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm),var(--bevel)}
.sheet.tint>.wrap{background:var(--tint)}
.sheet .card{box-shadow:var(--shadow-sm),0 0 0 1px var(--border)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2) var(--s3);flex-wrap:wrap;margin-bottom:var(--s6)}
.note{margin-top:var(--s4);font-size:15px;color:var(--body)}

/* hero */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s3);align-items:stretch}
.hero-card{padding:var(--s8);box-shadow:var(--shadow)}
.hero-card h1{max-width:18ch}
.lede{margin-top:var(--s3);font-size:1.1875rem;max-width:44ch}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border)}
.facts li{border-left:2px solid var(--teal);padding-left:var(--s2);font-size:15px;line-height:1.45}
.facts b{display:block;font:800 1.5rem/1.2 var(--head);color:var(--indigo);margin-bottom:var(--s1)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:s}
.step{padding:var(--s4);border-top:2px solid var(--teal)}
.step .n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--indigo);color:#fff;font:800 18px/1 var(--head);margin-bottom:var(--s2)}
.step p{margin-top:var(--s1);font-size:16px}

/* services */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.about-copy h2{margin-bottom:var(--s3)}
.bio{font-size:1.1875rem;line-height:1.65;max-width:62ch}
.about-copy .arrow{display:inline-block;margin-top:var(--s3)}
.about-facts{padding:var(--s4)}
.about-facts dl>div{padding:var(--s2) 0;border-bottom:1px solid var(--border)}
.about-facts dl>div:first-child{padding-top:0}
.about-facts dl>div:last-child{border-bottom:0;padding-bottom:0}
.about-facts dt{font:600 12px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.about-facts dd{color:var(--on-teal);font-weight:600;font-size:16px;line-height:1.45}

/* testimonials placeholder */
.sheet .ph-card{padding:var(--s6);text-align:center;box-shadow:none;outline:2px dashed var(--lavender);outline-offset:-2px;background:#fff}
.ph-card p{margin:var(--s2) auto 0;max-width:52ch}

/* ask stephen: designed for 1–3 items */
.ask{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s3)}
.ask a{display:block;color:inherit;text-decoration:none;height:100%;border-radius:inherit}
.ask .card:hover{box-shadow:var(--shadow)}
.ask a:hover h3{text-decoration:underline}
.thumb{aspect-ratio:16/9;border-radius:var(--radius) var(--radius) 0 0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal-light),var(--teal) 60%,var(--teal-deep))}
.ask-body{padding:var(--s3) var(--s4) var(--s4)}
.ask-side{display:grid;gap:var(--s3);grid-template-rows:1fr 1fr}
.ask-item a{padding:var(--s4);display:flex;flex-direction:column;justify-content:center;border-left:2px solid var(--lavender)}
.kicker{font:600 12px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--lavender-ink);margin-bottom:var(--s1)}
.ask-feature h3{font-size:1.5rem}

/* family lawyers */
.split-card{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s6) var(--s8);border-left:2px solid var(--teal)}
.split-card p:not(.eyebrow){margin-top:var(--s2);max-width:46ch}
.split-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);flex:none}

/* related */
.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.rel{padding:var(--s4);display:flex;flex-direction:column}
.rel p{margin:var(--s1) 0 var(--s3);flex:1}

/* booking band */
.book{padding-left:var(--s4);padding-right:var(--s4)}
.book>.wrap{max-width:var(--wrap);background:var(--teal-deep);color:#fff;border-radius:var(--radius);padding:var(--s8);box-shadow:var(--shadow)}
.book-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.book h2{color:#fff}
.book p{margin-top:var(--s1);max-width:52ch}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}
.contact-info p:not(.eyebrow){margin-top:var(--s2);max-width:40ch}
.muted{font-size:15px}
.form{padding:var(--s4);display:grid;gap:var(--s3)}
.form-note{font-size:14px;color:var(--lavender-ink)}
.field label,.check label{font-weight:600;color:var(--on-teal);font-size:15px}
.field label{display:block;margin-bottom:var(--s1)}
.opt{font-weight:400;color:var(--body)}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:16px;color:var(--body);background:#fff;border:1px solid #8A8C9E;border-radius:6px;padding:var(--s2)}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--indigo);outline-offset:1px;border-color:var(--indigo)}
textarea{resize:vertical;min-height:128px}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s2);align-items:start}
.check input{width:24px;height:24px;margin:0;accent-color:var(--indigo)}
.check label{font-weight:400;color:var(--body);line-height:1.5}
.form .btn{justify-self:start}

/* footer */
.site-footer{padding-bottom:var(--s4)}
.footer-card{padding:var(--s6);box-shadow:var(--shadow)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s4)}
.footer-brand img{width:175px;margin-bottom:var(--s2)}
.footer-brand p{font-size:15px;margin-top:var(--s1)}
.footer-h{font:600 13px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--on-teal);margin-bottom:var(--s2)}
.site-footer li{font-size:15px;margin-bottom:var(--s1)}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--border);font-size:14px}

/* (v2 additions at end of file) */
/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sheet>.wrap{padding:var(--s8) var(--s6)}
  .nav-list a{padding:var(--s1)}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .about{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .hero-grid{grid-template-columns:minmax(0,1fr) 240px}
  .hero-card{padding:var(--s6)}
  .facts{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .split-card{flex-direction:column;align-items:flex-start;padding:var(--s6)}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 var(--s2)}
  .header-bar{padding:var(--s1) var(--s2)}
  .logo img{width:120px}
  .nav-cta{display:none}
  
  .sheet,.book{padding-left:var(--s2);padding-right:var(--s2)}
  .sheet>.wrap{padding:var(--s6) var(--s3)}
  .book>.wrap{padding:var(--s6) var(--s3)}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-card{padding:var(--s4) var(--s3)}
  .actions .btn{flex:1 1 100%}
  .sec-head{margin-bottom:var(--s4)}
  .steps,.services,.ask,.related,.about{grid-template-columns:minmax(0,1fr)}
  .about{gap:var(--s4)}
  .ask-side{grid-template-rows:none}
  .split-card{padding:var(--s4) var(--s3)}
  .book-inner{flex-direction:column;align-items:flex-start}
  .contact{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .form{padding:var(--s3)}
  .footer-card{padding:var(--s4) var(--s3)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .footer-brand{grid-column:1/-1}
  .sheet .ph-card{padding:var(--s4) var(--s3)}
}
@media (max-width:400px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .arrow{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* emails never force overflow (HOME1-1) */
.email{overflow-wrap:anywhere}
.contact-info,.footer-brand{min-width:0}

/* placeholder link: not a real link yet (HOME1-3/7) */
.link-tbc{font-weight:600;color:var(--on-teal)}

/* booking TBC tag on buttons */
.btn .ph-tag{margin:0 0 0 var(--s1)}
.btn-primary .ph-tag{background:#fff;border-color:#fff;color:#4A3F6B}
.btn-light .ph-tag{border-color:var(--lavender)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.link-tbc{font-size:15px}
/* very narrow phones (280–340): let buttons with tags wrap; release nowrap phrases */
@media (max-width:340px){
  .sheet>.wrap,.book>.wrap{padding-left:var(--s2);padding-right:var(--s2)}
}
.rel .tbc-line{margin:0}
.site-footer .link-tbc{font-weight:400;color:var(--body)}
/* nav collapses to Menu below 1180px (CTA + Booking TBC tag needs the room) */
@media (max-width:1180px){
  .site-nav{gap:var(--s2)}
  .menu-btn{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2);border:2px solid var(--indigo);border-radius:var(--radius);background:#fff;
    color:var(--indigo);font:600 14px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  .menu-btn::after{content:"";width:7px;height:7px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-2px) rotate(45deg)}
  .menu-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .nav-list{flex-wrap:wrap}
  .js .nav-list{display:none}
  .js .menu-btn[aria-expanded="true"] + .nav-list{display:grid;position:absolute;right:0;top:calc(100% + var(--s2));z-index:5;min-width:240px;background:#fff;padding:var(--s1);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
  html:not(.js) .menu-btn{display:none}
  .nav-list a{padding:var(--s2);font-size:16px}
}
/* tablet (≤980): give contact, footer and booking band room (HOME1-5 footer wrap at 768) */
@media (max-width:980px){
  .contact{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .contact-info p:not(.eyebrow){max-width:56ch}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .footer-brand{grid-column:1/-1}
  .book-inner{flex-direction:column;align-items:flex-start}
}
@media (min-width:341px){ .btn{white-space:nowrap} }

/* ===== v3 ===== */
/* Footer h2 never orphans (HOME2-4): keep on one line; footer 1 column below 480 */
.footer-h{white-space:nowrap}
@media (max-width:480px){ .footer-grid{grid-template-columns:minmax(0,1fr)} }
/* very narrow: smaller h3 so nowrap phrases fit */

/* Booking band placeholder: plain text + tag, not a fake button (HOME2-5) */
.book-tbc{font-weight:600;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1)}
.book-tbc .ph-tag{margin:0}

/* No-JS nav (HOME2-2): links wrap inside the header at every width */
html:not(.js) .header-bar{flex-wrap:wrap}
html:not(.js) .site-nav{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
html:not(.js) .nav-list{flex-wrap:wrap;min-width:0}
@media (max-width:1180px){
  html:not(.js) .site-nav{flex-basis:100%;justify-content:flex-start}
  html:not(.js) .nav-list{display:flex}
  html:not(.js) .nav-list a{padding:var(--s1)}
}

/* ---- Cookie notice (HOME1-2, HOME2-1, HOME2-3; v15 Option A: real buttons, no radios) ----
   Hidden when JS adds html.cookie-done (a valid stored choice) and always hidden without JS (see v15 block).
   While visible, body gets bottom padding + scroll-padding = bar height + 16, so nothing (incl. focus) sits under it. */
:root{--cookie-h:112px}
.cookie{position:fixed;left:var(--s2);right:var(--s2);bottom:var(--s2);z-index:20;display:flex;justify-content:center;pointer-events:none}
.cookie-box{pointer-events:auto;max-width:760px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow),0 0 0 1px var(--border);font-size:15px;line-height:1.5}
.cookie-box p{flex:1 1 auto;min-width:0}
.cookie-box .ph-tag{margin:0 var(--s1) 0 0}
.cookie-btns{display:flex;gap:var(--s1);border:0;flex:none}
.cookie-btns .btn{min-height:48px;padding:var(--s1) var(--s2);font-size:14px}
body{padding-bottom:var(--cookie-h)}
html{scroll-padding-bottom:var(--cookie-h)}
.cookie-done .cookie{display:none}
html.cookie-done body{padding-bottom:0}
html.cookie-done{scroll-padding-bottom:0}
.site-footer{padding-bottom:var(--s4)}
@media (max-width:760px){
  :root{--cookie-h:128px}
  .cookie{left:var(--s1);right:var(--s1);bottom:var(--s1)}
  .cookie-box{flex-direction:column;align-items:stretch;gap:var(--s1);padding:var(--s1) var(--s2);font-size:13px;line-height:1.4}
  .cookie-btns{justify-content:flex-end}
  .cookie-btns .btn{min-height:32px;padding:0 var(--s2);font-size:13px}
}
/* focus targets keep a margin from the bar when scrolled into view */
a,button,input,textarea{scroll-margin-bottom:var(--s2)}
@media (max-width:340px){
  .cookie-box{font-size:12px;line-height:1.35;padding:var(--s1)}
  .cookie-btns .btn{min-height:32px;padding:0 var(--s1);font-size:12px}
}
/* phones: buttons with a TBC tag wrap inside their card */
@media (max-width:480px){ .btn{white-space:normal;flex-wrap:wrap;gap:var(--s1);text-align:center} .btn .ph-tag{margin:0} }
.step .ph-tag{display:table;margin:var(--s1) 0 0}
@media (max-width:980px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* =====================================================================
   v4 — creative pass, one button style, motion
   ===================================================================== */
:root{--purple:#4B3F86;--purple-hover:#3D3270;--purple-active:#30275B}
/* Purple = deep shade of Clear Path Lavender (hue 250 vs 256), not a new hue. White on it 8.92:1. */

/* ---- one button style ---- */
.btn,.btn-primary,.btn-ghost,.btn-secondary,.btn-light,.menu-btn{background:var(--purple);color:#fff;border:2px solid var(--purple);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 0 rgba(26,34,88,.22)}
.btn:hover,.menu-btn:hover{background:var(--purple-hover);border-color:var(--purple-hover)}
.btn:active,.menu-btn:active{background:var(--purple-active);border-color:var(--purple-active);transform:translateY(1px)}
.btn:focus-visible,.menu-btn:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.btn-on-dark:focus-visible,.book .btn:focus-visible{outline-color:#fff}
.menu-btn::after{border-color:#fff}
.btn{white-space:nowrap}
.actions{align-items:center;gap:var(--s3)}

/* ---- hero composition ---- */
.hero{position:relative;overflow:hidden}
.hero-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{grid-template-columns:minmax(0,1fr) 344px;gap:0;align-items:center}
.hero-card{position:relative;z-index:1;padding:var(--s8) calc(var(--s8) + var(--s6)) var(--s8) var(--s8)}
.hero-photo{position:relative;z-index:2;margin:0 0 0 calc(-1 * var(--s6));padding:0}
.hero-photo .accent-block{position:absolute;inset:var(--s4) calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s4);background:var(--teal-deep);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.photo-card{position:relative;padding:var(--s2);box-shadow:var(--shadow)}
.photo-card img{width:100%;height:auto;aspect-ratio:480/510;border-radius:6px}
.photo-card figcaption{padding:var(--s2) var(--s1) var(--s1);line-height:1.35}
.photo-card b{display:block;color:var(--indigo);font-weight:600;font-size:18px}
.photo-card figcaption span{display:block;font:600 12px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}

/* ---- section heads: refined divider (hairline fading at both ends) ---- */
.sec-head{position:relative;padding-bottom:var(--s3)}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border) 12%,var(--lavender) 50%,var(--border) 88%,transparent)}
.eyebrow::before{width:24px;height:8px;border-radius:0;background:
  radial-gradient(circle at 4px 4px,var(--teal) 3px,transparent 3.5px) 0 0/8px 8px repeat-x}

/* ---- decorative arcs behind a couple of section heads ---- */
.deco-arc>.wrap{position:relative;overflow:hidden}
.deco-arc>.wrap::before{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(162,150,196,.20) 0 55%,transparent 56%),radial-gradient(circle,transparent 0 63%,rgba(40,183,154,.22) 63.5% 64.5%,transparent 65%);pointer-events:none}
.deco-arc--left>.wrap::before{right:auto;left:-140px;top:auto;bottom:-180px}
.deco-arc>.wrap>*{position:relative}

/* ---- icon tiles ---- */
.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius);color:var(--teal-deep);
  background:linear-gradient(135deg,#E3F5F0,#E8E4F2);box-shadow:inset 0 0 0 1px rgba(22,100,85,.12)}
.ico svg{width:24px;height:24px}
.step .ico{margin-bottom:var(--s2)}
.step .n{display:block;width:auto;height:auto;background:none;color:var(--teal-deep);font:600 12px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s1);border-radius:0}
.step{border-top:0;overflow:hidden}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--lavender))}

/* ---- service flip cards ---- */
.svc{list-style:none;perspective:1200px}
.flip{display:grid;height:100%;position:relative}
.face{grid-area:1/1;padding:var(--s4) var(--s3);display:flex;flex-direction:column}
.face.front .ico{margin-bottom:var(--s3)}
.face.back{justify-content:space-between;gap:var(--s3);background:linear-gradient(160deg,#fff 0,#F4F2F9 100%)}
.face.back p{font-size:16px;line-height:1.55}
/* Flat (no JS / reduced motion): faces stack — front then back — inside one card look */
.svc .flip{gap:0}
html:not(.motion) .svc .face{grid-area:auto}
html:not(.motion) .svc .face.front{border-radius:var(--radius) var(--radius) 0 0;box-shadow:none;padding-bottom:var(--s2)}
html:not(.motion) .svc .face.back{border-radius:0 0 var(--radius) var(--radius);box-shadow:none;background:#fff;padding-top:0}
html:not(.motion) .svc .flip{border-radius:var(--radius);box-shadow:var(--shadow-sm),0 0 0 1px var(--border);background:#fff}
html:not(.motion) .svc .face::after{display:none}
@media (prefers-reduced-motion:no-preference){
  .motion .svc .flip{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .motion .svc .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .motion .svc .face.back{transform:rotateY(180deg)}
  .motion .svc:hover .flip,.motion .svc .flip:focus-within,.motion .svc .flip.is-flipped{transform:rotateY(180deg)}
  .motion .svc .face.front::before{content:"";position:absolute;right:var(--s3);bottom:var(--s3);width:24px;height:24px;border-radius:50%;
    background:var(--tint) center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M7 3l3 3-3 3' fill='none' stroke='%234B3F86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}
.svc .face h3{color:var(--indigo)}

/* ---- statement (approach) ---- */
.statement{max-width:760px;margin:0 auto;text-align:center}
.statement .eyebrow{justify-content:center}
.statement h2{margin-bottom:var(--s3)}
.statement p:not(.eyebrow){font-size:1.25rem;line-height:1.6;max-width:56ch;margin:0 auto;text-wrap:balance}

/* ---- Ask Stephen thumb ---- */
.thumb{position:relative;overflow:hidden}
.thumb-deco{position:absolute;inset:0;width:100%;height:100%}

/* ---- booking band ---- */
.book>.wrap{position:relative;overflow:hidden}
.book-deco{position:absolute;right:0;top:0;height:100%;width:50%;pointer-events:none}
.book-inner>*{position:relative}
/* v5: removed band-only white border + halo so the band button matches .btn exactly */

/* ---- footer: logo shares the text column's left edge (SVG viewBox has 58.69/774.6 left inset) ---- */
.footer-brand img{margin-left:calc(-175px * 58.69 / 774.6)}

/* ---- cookie bar: 48px buttons on phones (QA HOME3-1) ---- */
@media (max-width:760px){
  :root{--cookie-h:144px}
  .cookie-btns .btn{min-height:48px;padding:0 var(--s3);font-size:14px}
}
@media (max-width:340px){ .cookie-btns{justify-content:stretch} .cookie-btns .btn{flex:1} }

/* ---- narrow widths keep h2 ≥32px and h3 ≥20px; fit via tighter gutters ---- */
@media (max-width:340px){
  .sheet,.book{padding-left:var(--s1);padding-right:var(--s1)}
  .sheet .card,.rel,.face{padding-left:var(--s2);padding-right:var(--s2)}
  h2{letter-spacing:-.02em}
}

/* ---- motion: hero entrance + scroll reveals (only with JS + no reduced motion) ---- */
@media (prefers-reduced-motion:no-preference){
  .enter{animation:enter .7s cubic-bezier(.2,.7,.2,1) both}
  .enter-2{animation-delay:.15s}
  .hero-deco{animation:fade 1.2s ease both}
  @keyframes enter{from{opacity:0;transform:translateY(16px)}}
  @keyframes fade{from{opacity:0}}
  .motion .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
  .motion .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .enter,.hero-deco{animation:none} }

/* ---- responsive for the new hero ---- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 256px}
  .hero-card{padding:var(--s6) calc(var(--s6) + var(--s4)) var(--s6) var(--s6)}
  .hero-photo{margin-left:calc(-1 * var(--s4))}
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .hero-card{padding:var(--s4) var(--s3)}
  .hero-photo{margin:0 var(--s3) var(--s2) 0} /* v11: bottom margin = the accent block overhang, so the stacked hero keeps --section-gap below it */
  .hero-photo .accent-block{inset:var(--s3) calc(-1 * var(--s2)) calc(-1 * var(--s2)) var(--s6)}
  .photo-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s2);align-items:center}
  .photo-card figcaption{padding:0}
  .actions .btn{flex:1 1 100%}
  .actions .arrow{margin:0 auto}
}
@media (max-width:480px){ .btn{white-space:normal} }
@media (max-width:340px){ .ask-body{padding:var(--s2)} .wrap{padding-left:var(--s1);padding-right:var(--s1)} }
@media (max-width:340px){ .ask-feature h3{font-size:1.25rem} }
@media (max-width:340px){ .ask-item a{padding:var(--s3) var(--s2)} }
/* self-review pass 1 */
.book-inner>.book-deco{position:absolute}
.face.front{justify-content:space-between;min-height:224px}
.face.front .ico{margin-bottom:var(--s4)}
.face.front h3{padding-right:var(--s3)}
.face.back .arrow{align-self:flex-start}
/* phones/tablets (≤760): service cards always flat — both faces readable, no flip (pass 1) */
@media (max-width:760px){
  .svc .face{grid-area:auto !important;transform:none !important;backface-visibility:visible !important}
  .svc .flip{transform:none !important;border-radius:var(--radius);box-shadow:var(--shadow-sm),0 0 0 1px var(--border);background:#fff}
  .svc .face.front{min-height:0;border-radius:var(--radius) var(--radius) 0 0;box-shadow:none;padding-bottom:var(--s2);justify-content:flex-start}
  .svc .face.front .ico{margin-bottom:var(--s2)}
  .svc .face.front::before{display:none}
  .svc .face.back{border-radius:0 0 var(--radius) var(--radius);box-shadow:none;background:#fff;padding-top:0}
  .svc .face::after{display:none}
  .face.front h3{padding-right:0}
}
html:not(.motion) .face.front{min-height:0;justify-content:flex-start}
html:not(.motion) .face.front .ico{margin-bottom:var(--s2)}
/* pass 2: keep the deep-teal accent block inside the content column on the right */
.hero-photo{margin-right:var(--s3)}
@media (max-width:980px){.hero-photo{margin-right:var(--s3)}}
.svc .face.back{background-color:#fff}

/* ===== v5 ===== */
/* Ask Stephen images: 16:9, never stretched, 9px radius */
.ask-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.ask-img--feature{border-radius:var(--radius) var(--radius) 0 0}
.ask-img--side{max-width:224px;margin-bottom:var(--s2)}
.ask-feature a:hover .ask-img{filter:saturate(1.08)}
/* Cookie bar: the one sanctioned exception to the single button style.
   v15 (research Option A, §4 + A3.1): Decline and Accept share ONE style (solid white, purple text), same size and weight. */
.cookie-box{background:#4B3F86;color:#fff;box-shadow:var(--shadow)}
.cookie-box a{color:#fff;text-decoration:underline}
.cookie-box a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cookie-btns .btn{background:#fff;color:#4B3F86;border:2px solid #fff;transform:none;cursor:pointer;font-family:inherit;font-weight:600}
.cookie-btns .btn:hover{background:#EEEEF4;border-color:#EEEEF4}
.cookie-btns .btn:active{background:#E8E4F2;border-color:#E8E4F2}
.cookie-btns .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* v5 self-review 1: balance the right column (no empty top in the article card) and use full-width image on phones */
.ask-side{grid-template-rows:auto 1fr}
.ask-item a{justify-content:flex-start}
@media (max-width:760px){ .ask-img--side{max-width:none} }
/* v5 self-review 2: at tablet widths stack the feature card full width, side items in two columns (no empty feature card) */
@media (min-width:761px) and (max-width:980px){
  .ask{grid-template-columns:minmax(0,1fr)}
  .ask-side{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
}

/* ===== v6 ===== */
/* Book band only: green brand button (#3CC4A8 bg, #1A2258 text 6.83:1; button vs band 3.23:1) */
.book .btn{background:#3CC4A8;border-color:#3CC4A8;color:#1A2258}
.book .btn:hover{background:#5ED0B8;border-color:#5ED0B8;color:#1A2258}
.book .btn:active{background:#28B79A;border-color:#28B79A;color:#1A2258}
.book .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Ask Stephen: header image under the featured title */
.ask-img--article{margin-top:var(--s3);border-radius:var(--radius)}
/* Fixed decorative top layer: above body background, below content */
.top-deco{position:fixed;top:0;left:0;right:0;height:50vh;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(60% 80% at 15% 0%,rgba(162,150,196,.45),transparent 70%),
    radial-gradient(50% 70% at 85% 10%,rgba(255,255,255,.3),transparent 70%),
    linear-gradient(180deg,rgba(60,196,168,.35),rgba(232,228,242,.25) 55%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.top-deco svg{position:absolute;left:-5%;top:0;width:110%;height:100%}
@supports (height:50svh){ @media (max-width:760px){ .top-deco{height:50svh} } }
.site-header,main,.site-footer{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .top-deco svg{animation:deco-drift 40s ease-in-out infinite alternate}
  @keyframes deco-drift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,12px,0)}}
}
@media print{ .top-deco{display:none} }
/* v6 self-review 1: softer fade (no visible "knee" where the mask starts) */
.top-deco{-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.85) 30%,rgba(0,0,0,.45) 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.85) 30%,rgba(0,0,0,.45) 65%,transparent 100%)}

/* ===== v7 ===== */
/* Ask Stephen photos (v17.1: play overlay rules removed, D17-4) */
.ask-media{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.ask-media picture{display:block;width:100%;height:100%}
.ask-media .ask-img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;margin:0;max-width:none}
.ask-media--article{margin-top:var(--s3)}
.ask-media--side{max-width:224px;margin-bottom:var(--s2)}
@media (max-width:760px){ .ask-media--side{max-width:none} }
/* v7 self-review 1: tinted placeholder while photos load */
.ask-media{background:#E8E4F2}

/* ===== v9 ===== */
/* Services: photo on the front face only; back face unchanged */
.svc .face.front{padding:0;overflow:hidden;justify-content:flex-start;min-height:0}
.svc-media{display:block;aspect-ratio:3/2;background:#E8E4F2;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.svc-media picture,.svc-media img{display:block;width:100%;height:100%}
.svc-media img{object-fit:cover;max-width:none}
.front-body{display:flex;flex-direction:column;flex:1;padding:var(--s3)}
.motion .svc .face.front::before{z-index:1}
html:not(.motion) .svc .front-body{padding-bottom:var(--s2)}
@media (max-width:760px){ .svc .front-body{padding-bottom:var(--s2)} .svc .face.front{min-height:0} }
@media (max-width:340px){ .svc .face.front{padding:0} .front-body{padding:var(--s2)} }

/* Hero: dark, on-brand band (distinct from the flat deep-teal Book band: diagonal indigo→purple→deep teal with glows, contours, grain) */
/* v11: v9 dark-hero background rule removed (dead since v10; QA HOME10-2) */
.hero-photo .accent-block{background:#3CC4A8}
@media print{ .hero{background:none} .hero-deco{display:none} }
/* v9 self-check: flip hint moves onto the photo (top-right) so titles get the full width */
.motion .svc .face.front::before{top:var(--s2);right:var(--s2);bottom:auto;box-shadow:0 1px 4px rgba(26,34,88,.25)}
.svc .face.front h3{padding-right:0}
/* v9 self-check: tidy back faces — flipped: content centred (no big gap under tall photo fronts);
   flat (no JS / reduced motion / ≤760): description directly under the title, "Learn more" pinned to the bottom */
.motion .svc .face.back{justify-content:center}
html:not(.motion) .svc .flip{grid-template-rows:auto 1fr}
html:not(.motion) .svc .face.back{justify-content:flex-start}
html:not(.motion) .svc .face.back .arrow{margin-top:auto}
@media (max-width:760px){ .svc .flip{grid-template-rows:auto 1fr} .svc .face.back{justify-content:flex-start} .svc .face.back .arrow{margin-top:auto} }
/* v9 self-check: breathing room between the dark hero band and the first white panel */
/* v11: removed .hero{margin-bottom} (see --section-gap) */

/* ===== v10 ===== */
/* Hero background extends to the top of the page, behind the header.
   The layer is .hero-deco (gradient + SVG glows/contours/path/grain), pulled up by --hero-ext; the page top
   clips anything above y=0, so no extra scroll. Gradient stops are in px from the page top (not %), so the
   purple→lavender fade lands in the same visible place at every width and with the taller no-JS header. Header sits above it (z-index 2). */
:root{--hero-ext:320px}
.hero{background:none;overflow:visible}
.hero-deco{top:calc(-1 * var(--hero-ext));bottom:auto;height:calc(100% + var(--hero-ext));
  background:
    radial-gradient(60% 70% at 0% 100%,rgba(60,196,168,.28),transparent 60%),
    linear-gradient(170deg,#4B3F86 0,#4B3F86 var(--hero-ext),#A296C4 calc(var(--hero-ext) + 560px),#A296C4 100%);
  opacity:.8}
.site-header{z-index:2}
/* Header bar: translucent white over the gradient (not sticky: it scrolls away with the page, so no scrolled state) */
.header-bar{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(26,34,88,.18)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .header-bar{background:#fff} }
/* Cookie bar separation over the lighter hero (QA HOME9-3) */
.cookie-box{box-shadow:0 0 0 1px rgba(255,255,255,.55),0 8px 24px rgba(26,34,88,.35)}
@media print{ .header-bar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none} }

/* ===== v11 (QA HOME10-1/-2/-3) ===== */
/* Light-lavender base under the 0.8 layer so it reads purple→light purple (not mixed with the teal page) */
.hero::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--hero-ext));bottom:0;background:#F4F2FA;pointer-events:none}
.hero-deco{background:
    radial-gradient(40% 50% at 0% 100%,rgba(60,196,168,.05),transparent 60%),
    linear-gradient(170deg,#4B3F86 0,#4B3F86 var(--hero-ext),#A296C4 calc(var(--hero-ext) + 560px),#A296C4 100%)}
/* Soft bottom edge into the next section (base + layer fade over the last 64px) */
.hero::before,.hero-deco{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 64px),transparent)}
@media print{ .hero::before{display:none} }
/* HOME10-3: 3px footer/cookie overlap at 280 */
@media (max-width:300px){ :root{--cookie-h:152px} }

/* ===== v12 (Jon: more transparency, darker purple start, ~25% faster fade into the page green) ===== */
/* Layer 0.65 opacity; no lavender base (the page green shows through); dark purple → indigo → page teal #28B79A,
   transition complete 420px below the page top (v11: 560px to lavender). */
.hero::before{background:linear-gradient(170deg,#3A2F6E 0,#3A2F6E var(--hero-ext),rgba(58,47,110,0) calc(var(--hero-ext) + 300px))}
/* ^ base under the top only: without it the 35% page green shifts the 0.65 purple to steel blue (hue 205°). It fades out
   by 300px, so lower down the transparency reveals the page green as asked. */
.hero-deco{opacity:.65;background:
    linear-gradient(170deg,#3A2F6E 0,#3A2F6E var(--hero-ext),#2F3CA6 calc(var(--hero-ext) + 190px),#28B79A calc(var(--hero-ext) + 420px),#28B79A 100%)}
/* v12 self-check: header bar a touch more opaque (darker purple behind it; keeps header ≥8:1);
   photo accent block back to deep teal (#3CC4A8 vanished on the page teal now that the hero blends into it) */
.header-bar{background:rgba(255,255,255,.94)}
.hero-photo .accent-block{background:#166455}

/* ===== v13 (QA HOME12-1; Jon keeps solid dark purple top) ===== */
/* --hero-top = the hero's page-y (header height), so stops are measured from the PAGE top: purple to y=300, teal by y=600.
   Header height is 129px above 760 and 95px at ≤760 (JS on; the no-JS wrapped nav is taller, which moves the fade down a little). */
:root{--hero-top:129px}
@media (max-width:760px){ :root{--hero-top:95px} }
/* No indigo stop: #3A2F6E holds to 300px below the page top, then fades straight to page teal #28B79A by 600px.
   180deg (vertical) so the px stops land at the same height on the left and right at every width
   (170deg shifted the right side ~330px further along at 1920). The #3A2F6E base holds to 300px and fades out by 600px so the purple stays solid while the layer is at 0.65. */
.hero::before{background:linear-gradient(180deg,#3A2F6E 0,#3A2F6E calc(var(--hero-ext) - var(--hero-top) + 300px),rgba(58,47,110,0) calc(var(--hero-ext) - var(--hero-top) + 600px))}
.hero-deco{background:
    linear-gradient(180deg,#3A2F6E 0,#3A2F6E calc(var(--hero-ext) - var(--hero-top) + 300px),#28B79A calc(var(--hero-ext) - var(--hero-top) + 600px),#28B79A 100%)}

/* =====================================================================
   rm-site v1 (2026-10-13): homepage QA minors + inner pages
   ===================================================================== */
/* HOME13-1: eased (smoothstep) stops soften the y≈300 / y≈600 "knee". --g1 = end of solid purple, --g2 = page teal (from page top).
   Homepage: 300 / 600 (Jon v13). Inner pages: shorter hero, 200 / 440. */
:root{--g1:300px;--g2:600px}
.page-inner{--g1:200px;--g2:440px}
.hero::before{background:linear-gradient(180deg,#3A2F6E 0,rgba(58,47,110,1) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0),rgba(58,47,110,0.972) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.1),rgba(58,47,110,0.896) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.2),rgba(58,47,110,0.784) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.3),rgba(58,47,110,0.648) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.4),rgba(58,47,110,0.5) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.5),rgba(58,47,110,0.352) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.6),rgba(58,47,110,0.216) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.7),rgba(58,47,110,0.104) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.8),rgba(58,47,110,0.028) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.9),rgba(58,47,110,0) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 1))}
.hero-deco{background:linear-gradient(180deg,#3A2F6E 0,rgb(58, 47, 110) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0),rgb(57, 51, 111) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.1),rgb(56, 61, 115) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.2),rgb(54, 76, 120) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.3),rgb(52, 95, 125) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.4),rgb(49, 115, 132) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.5),rgb(46, 135, 139) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.6),rgb(44, 154, 144) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.7),rgb(42, 169, 149) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.8),rgb(41, 179, 153) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 0.9),rgb(40, 183, 154) calc(var(--hero-ext) - var(--hero-top) + var(--g1) + (var(--g2) - var(--g1)) * 1),#28B79A 100%)}
/* No-JS header (QA v13 note): the nav stays on ONE scrollable row instead of wrapping to 2–3 rows,
   so the header height (and the gradient stops measured from it) is fixed: --hero-top matched to the measured no-JS header. */
@media (max-width:1180px){
  html:not(.js) .nav-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;max-width:100%}
  html:not(.js) .nav-list li{flex:none}
}

/* HOME7-1 / HOME5-2: no empty card space in Ask Stephen at 761–1024 (cards keep their own height) */
@media (max-width:1024px){ .ask{align-items:start} .ask-side{align-items:start;grid-template-rows:none} }

/* HOME9-7: even gap above "Learn more" in flat cards (no JS / reduced motion / phones): no auto-pinning */
html:not(.motion) .svc .face.back .arrow{margin-top:0}
@media (max-width:760px){ .svc .face.back .arrow{margin-top:0} }
/* HOME4-10: service name on the back face (flipped cards only; flat cards already show the title above) */
.back-name{margin:0}
html:not(.motion) .back-name{display:none}
@media (max-width:760px){ .back-name{display:none} }
/* HOME4-4: flip hint clear of the title (sits on the photo; title keeps 16px right padding) */
.svc .front-body h3{padding-right:var(--s2)}

/* HOME4-6: print / reader snapshots show everything */
@media print{
  .reveal,.motion .reveal{opacity:1!important;transform:none!important}
  .cookie,.top-deco,.hero-deco,.hero::before,.menu-btn{display:none!important}
  body{padding-bottom:0;background:#fff}
}

/* 280px: footer clear of the cookie bar at max scroll (QA HOME10-3) */
@media (max-width:300px){ :root{--cookie-h:176px} }

/* ---------- inner pages ---------- */
/* v11: removed .hero--inner{padding-bottom} (see --section-gap) */
.page-card{padding:var(--s6) var(--s8)}
.page-card h1{max-width:22ch}
.page-card .lede{max-width:56ch}
.hero--inner .hero-card{padding-right:var(--s8)}
.hero--inner .hero-grid .hero-card{padding-right:calc(var(--s8) + var(--s6))}
.byline{font-weight:600;color:var(--on-teal);font-size:1rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3);font-size:14px;line-height:1.4}
.crumbs li+li::before{content:"/";margin-right:var(--s1);color:var(--lavender-ink)}
.crumbs a{color:var(--on-teal);text-decoration:underline;text-decoration-color:var(--border)}
.crumbs a:hover{color:var(--indigo);text-decoration-color:currentColor}

/* prose: long-form text; h2 one step down the scale inside articles/policies */
.prose p:not(.eyebrow){max-width:65ch}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:var(--s2)}
.prose>h2{margin-bottom:var(--s3)}
.article-body h2,.policy h2{font-size:clamp(1.5rem,1.3rem + .8vw,2rem);margin:var(--s6) 0 var(--s2)}
.article-body h2:first-of-type{margin-top:var(--s4)}
.policy h3{margin:var(--s4) 0 var(--s1)}
.policy h2{margin-top:0}
.small-note{margin-top:var(--s4)!important;font-size:15px;color:var(--lavender-ink)}

/* ticks */
.tick-list{display:grid;gap:var(--s1);margin-top:var(--s2)}
.tick-list li{position:relative;padding-left:var(--s4);line-height:1.5}
.tick-list li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--teal-deep);box-shadow:0 0 0 4px #DDF2EC}
.financial-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.tick-list--card{padding:var(--s4);margin:0;gap:var(--s2)}

/* media split: text + 3:2 photo (never stretched) */
.media-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.media-split--text{align-items:start}
.media-split-img{border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* service list (overview) */
.svc-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.svc-card{overflow:hidden}
.svc-card a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border-radius:inherit}
.svc-card:hover{box-shadow:var(--shadow)}
.svc-card a:hover h3{text-decoration:underline}
.svc-card .svc-media{border-radius:0}
.svc-card-body{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);flex:1}
.svc-card .num{font:800 14px/1 var(--head);color:var(--teal-deep);letter-spacing:.04em}
.svc-desc{display:block;font-size:16px;line-height:1.55}
.svc-card .arrow{margin-top:var(--s1);color:var(--indigo)}

/* info cards / packages */
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.info{padding:var(--s4);border-top:2px solid var(--teal)}
.info p{margin-top:var(--s1);font-size:16px}
.pkg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.pkg{padding:var(--s4);border-top:2px solid var(--teal)}
.pkg .num{display:block;font:800 14px/1 var(--head);color:var(--teal-deep);letter-spacing:.04em;margin-bottom:var(--s1)}

/* related / more links */
.more-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.more-links--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.more-link{display:flex;flex-direction:column;height:100%;padding:var(--s3) var(--s4);text-decoration:none;color:inherit;border-left:2px solid var(--lavender)}
.more-link:hover{box-shadow:var(--shadow)}
.more-title{font:800 1.25rem/1.3 var(--head);color:var(--indigo)}
.more-title::after{content:" →";font-family:var(--text);font-weight:600}
.more-link:hover .more-title{text-decoration:underline}

/* Ask Stephen index row */
.ask-row a{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s3);color:inherit;text-decoration:none}
.ask-row:hover{box-shadow:var(--shadow)}
.ask-row a:hover h3{text-decoration:underline}
.ask-row h3{font-size:1.5rem;margin-bottom:var(--s1)}
.ask-row .arrow{display:inline-block;margin-top:var(--s2);color:var(--indigo)}

/* article */
.article{max-width:var(--wrap)}
.article-media,.article-body{max-width:720px;margin-left:auto;margin-right:auto}
.article-media{display:block}

/* form heading */
.form h3{margin-bottom:calc(-1 * var(--s1))}

@media (max-width:1100px){
  .svc-list,.pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-card{padding:var(--s6)}
}
@media (max-width:980px){
  .media-split{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .more-links--3{grid-template-columns:minmax(0,1fr)}
  .ask-row a{grid-template-columns:minmax(0,1fr)}
  .hero--inner .hero-grid .hero-card{padding-right:calc(var(--s6) + var(--s4))}
}
@media (max-width:760px){
  .page-card,.hero--inner .hero-card{padding:var(--s4) var(--s3)}
  .hero--inner .hero-grid .hero-card{padding:var(--s4) var(--s3)}
  .svc-list,.pkg-grid,.info-grid,.more-links,.financial-list{grid-template-columns:minmax(0,1fr)}
  .ask-row a{padding:var(--s2)}
  .tick-list--card{padding:var(--s3)}
}
@media (max-width:340px){ .page-card,.hero--inner .hero-card{padding:var(--s3) var(--s2)} .more-link{padding:var(--s3) var(--s2)} }
/* self-check 1: article text clears the header image; opening paragraph as lede */
.article-body{margin-top:var(--s4)}
.article-body>p:first-child{font-size:1.1875rem;color:var(--on-teal)}
/* No-JS header, deterministic: logo + CTA on row 1, the tab row (one scrollable line) on row 2 at ≤1180 */
@media (max-width:1180px){
  html:not(.js) .site-nav{display:contents}
  html:not(.js) .nav-list{order:3;flex:1 1 100%}
  html:not(.js) .nav-cta{margin-left:auto}
}
@media (max-width:1180px){ html:not(.js){--hero-top:191px} }
@media (max-width:760px){ html:not(.js){--hero-top:157px} }
/* 280: long eyebrows wrap as a pair, not a lone word */
@media (max-width:300px){ .eyebrow{letter-spacing:.06em;gap:var(--s1)} .eyebrow::before{width:16px} }
/* v2 (QA SITE1-5): at ≤340 long inner-page headlines may break inside no-wrap phrases (h1 never wider than its card) */
@media (max-width:340px){
  .page-card h1,.hero--inner .hero-card h1{font-size:1.75rem;letter-spacing:-.02em}
  .ask-row h3{font-size:1.25rem}
  .page-card .lede{text-wrap:balance}
}
@media (max-width:300px){ .page-card h1,.hero--inner .hero-card h1{font-size:1.5rem} .article-body h2{font-size:1.375rem} }

/* ===== v3 (Jon: +5px between global nav items only; none before the first / after the last) ===== */
.nav-list{column-gap:5px}

/* ===== v4 (Stephen's page revisions, doc Oct 14) — new components use existing tokens/scale only ===== */
/* Home hero: sub-heading + copy lines, four fact boxes (2 × 2) */
.hero-sub{font:800 1.25rem/1.3 var(--head);letter-spacing:-.01em;color:var(--indigo);margin-top:var(--s3)}
.hero-copy{margin-top:var(--s2);max-width:56ch;font-size:16px;line-height:1.6}
.hero-card .lede+.hero-copy{margin-top:var(--s1)}
.facts--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.facts--4 b{font-size:1.25rem}
@media (max-width:980px){ .facts--4{grid-template-columns:minmax(0,1fr)} }
/* Mediation Services: two columns for the longer service copy */
.svc-list--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .svc-list--2{grid-template-columns:minmax(0,1fr)} }
/* About: copy column top-aligned with the facts box */
.about--top{align-items:start}
.prose-h3{margin:var(--s4) 0 var(--s2)}
.prose .tick-list{margin:var(--s2) 0}
.prose .tick-list+p{margin-top:var(--s2)}
.prose h2+p{margin-top:0}
/* Packages & Fees */
.tagline{font-weight:600;color:var(--on-teal)}
.pkg-intro{margin:0 0 var(--s4);max-width:none}
.pkg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pkg--full{display:flex;flex-direction:column;gap:var(--s2)}
.pkg--full h3 .price{display:block;margin-top:var(--s1);font-size:1.125rem;color:var(--teal-deep)}
.pkg--full p{font-size:16px;line-height:1.55}
.pkg-lead{font-weight:600;color:var(--on-teal)}
.pkg-inc{font-weight:600;color:var(--on-teal);margin-bottom:calc(-1 * var(--s1))}
.pkg--full .tick-list{margin:0;font-size:15px}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8)}
.h2-sm{font-size:clamp(1.5rem,1.3rem + .8vw,2rem);margin-bottom:var(--s3)}
/* Book band with two actions + fine print (Packages & Fees) */
.book-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);flex:none}
.arrow-on-dark{color:#fff}
.book .book-inner p+p{margin-top:var(--s1)}
.book .fine-print{margin-top:var(--s3);font-size:14px;line-height:1.5;color:#fff;opacity:1}
/* Privacy policy */
.policy h2:not(:first-child){margin-top:var(--s6)}
.policy-contact{line-height:1.7}
@media (max-width:1100px){ .pkg-grid--3{grid-template-columns:minmax(0,1fr)} }
@media (max-width:980px){ .two-col{grid-template-columns:minmax(0,1fr);gap:var(--s6)} }
@media (max-width:300px){.hero h1 .nw{white-space:normal}}

/* ===================================================================== v8 (change list Oct 15, 2026) ===== */
/* Item 2: tighter, consistent gaps between sections across the site */
/* v11: removed .band{padding-bottom} (see --section-gap) */
.sheet>.wrap{padding-top:var(--s8);padding-bottom:var(--s8)}
.sec-head{margin-bottom:var(--s4)}
/* v11: removed .hero--inner{padding-bottom} (see --section-gap) */
@media (max-width:1100px){ .sheet>.wrap{padding-top:var(--s6);padding-bottom:var(--s6)} }
@media (max-width:760px){ .sheet>.wrap{padding-top:var(--s6);padding-bottom:var(--s6)} .sec-head{margin-bottom:var(--s3)} }

/* Item 1: Home hero. Desktop: the card runs the full width so the title fits on two lines; the photo is inset into the
   card's lower right (overlapping its edge by 24px on wide screens); the text below the title keeps clear of the photo. */
@media (min-width:981px){
  .hero-grid{--ph:320px;--over:24px;--pr:var(--s8);grid-template-columns:minmax(0,1fr) var(--ph);align-items:stretch}
  .hero-grid>.hero-card{grid-column:1/-1;grid-row:1;padding:var(--s8) var(--pr) var(--s8) var(--s8)}
  .hero-grid>.hero-card h1{max-width:none}
  .hero-grid>.hero-card>:not(h1){max-width:calc(100% + var(--pr) - var(--ph) + var(--over) - var(--s6))}
  /* photo centred in the space below the two-line title (top offset = card padding + title height + gap) */
  .hero-grid>.hero-photo{grid-column:2;grid-row:1;align-self:center;margin:200px calc(-1 * var(--over)) var(--s6) 0}
}
@media (min-width:981px) and (max-width:1280px){
  .hero-grid{--ph:272px;--over:calc(-1 * var(--s3));--pr:var(--s6)}
  .hero-grid>.hero-card{padding:var(--s6) var(--pr) var(--s6) var(--s6)}
  .hero-grid>.hero-photo{margin-top:176px;margin-bottom:var(--s6)}
}

/* Item 3: both hero CTAs as buttons, same style */
.hero .actions{gap:var(--s2)}

/* Item 5: Three Simple Steps art, replaced in v10 by photographs (see the v10 block at the end) */

/* Item 6: flip-card titles (back face) in Title Case and bold, not all caps */
.back-name,.face.back .back-name{font:800 1.25rem/1.25 var(--head);letter-spacing:-.01em;text-transform:none;color:var(--indigo);margin:0 0 var(--s1)}

/* Item 8: "Family Mediation Services & Fees" on one line (desktop and tablet) */
.page-card h1.h1-one-line{max-width:none}

/* Item 9 (PROPOSAL): pricing-package layout. Top band with name + large price; middle package highlighted. */
.pkg-grid--v8{align-items:stretch}
@supports (grid-template-rows:subgrid){ .pkg-grid--v8{grid-template-rows:auto auto} .pkg--v8{grid-row:span 2;display:grid;grid-template-rows:subgrid;gap:0} }
.pkg--v8{padding:0;border-top:0;overflow:hidden}
.pkg--v8 .pkg-top{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);padding:var(--s4);background:var(--lavender-soft);border-bottom:1px solid var(--border)}
.pkg--v8 .pkg-name{font:800 1.25rem/1.25 var(--head);letter-spacing:-.01em;color:var(--indigo);margin:0}
.pkg--v8 .pkg-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s1);margin:0;line-height:1}
.pkg--v8 .pkg-price .amt{font:800 2.75rem/1 var(--head);letter-spacing:-.02em;color:var(--on-teal)}
.pkg--v8 .pkg-price .per{font:600 15px/1.4 var(--text);color:var(--lavender-ink)}
.pkg--v8 .pkg-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4)}
.pkg--featured{box-shadow:var(--shadow),0 0 0 2px var(--indigo)}
.pkg--featured .pkg-top{background:var(--indigo);border-bottom-color:var(--indigo)}
.pkg--featured .pkg-name,.pkg--featured .pkg-price .amt{color:#fff}
.pkg--featured .pkg-price .per{color:#E8E4F2}
@media (max-width:1100px){ .pkg-grid--v8{grid-template-rows:none} .pkg--v8{grid-row:auto;grid-template-rows:auto auto} }
@media (max-width:760px){ .pkg--v8 .pkg-top,.pkg--v8 .pkg-body{padding:var(--s3)} .pkg--v8 .pkg-price .amt{font-size:2.25rem} }
@media (max-width:340px){ .pkg--v8 .pkg-top,.pkg--v8 .pkg-body{padding:var(--s2)} }

/* Item 10: heading on one line; "$300 per hour" callout, different colour, slightly smaller */
.prose h2.add-title{max-width:none;margin-bottom:var(--s2)}
.rate-callout{display:inline-block;margin:0 0 var(--s3)!important;padding:var(--s1) var(--s2);border-radius:var(--radius);
  background:#DDF2EC;color:var(--teal-deep);font:800 1.5rem/1.25 var(--head);letter-spacing:-.01em}
@media (max-width:760px){ .rate-callout{font-size:1.25rem} }

/* Items 18-20: Articles (index, cards, article pages) */
.art-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.art-list .art-media{aspect-ratio:16/9}
.art-title{font-size:1.25rem;line-height:1.3}
h2.art-title{font-family:var(--head);font-weight:800;letter-spacing:-.01em}
.sheet .ask-row+.art-list{margin-top:var(--s3)}
.art-card .arrow{margin-top:auto;padding-top:var(--s1)}
@media (max-width:1100px){ .art-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .art-list{grid-template-columns:minmax(0,1fr)} }
.article-body h3{font-size:1.25rem;margin:var(--s4) 0 var(--s1)}
.article-body ul,.article-body ol{margin:var(--s2) 0;padding-left:var(--s4);display:grid;gap:var(--s1)}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{line-height:1.6;padding-left:var(--s1)}
.article-body li::marker{color:var(--teal-deep);font-weight:600}
.article-body p+p{margin-top:var(--s2)}
.article-body h2+p,.article-body h3+p,.article-body h2+ul,.article-body h2+ol{margin-top:0}
.art-figure{float:right;width:min(320px,45%);margin:var(--s1) 0 var(--s3) var(--s4)}
.art-figure img{display:block;width:100%;height:auto;border-radius:var(--radius)}
@media (max-width:760px){ .art-figure{float:none;width:100%;max-width:360px;margin:var(--s3) auto} }
.article-body::after{content:"";display:block;clear:both}
.article-body .art-figure+p{margin-top:var(--s2)}
@media (max-width:300px){ .art-title .nw{white-space:normal} }
/* v8 check fixes: phone line breaks */
@media (max-width:420px){ .prose h2.add-title{font-size:1.5rem} }
@media (max-width:340px){ .prose h2.add-title .nw,.article-body .nw{white-space:normal} }

/* ===== v9 (QA SITE8-1): no one-word last lines in key headings at 390/320; released at ≤300 so 280 never overflows ===== */
.page-article .page-card h1,.h2-fit{text-wrap:balance}
@media (max-width:400px){ .page-article .page-card h1{font-size:1.5rem} }
@media (max-width:420px){ .h2-fit{font-size:1.625rem} .h2-sm.h2-fit{font-size:1.375rem} }
@media (max-width:340px){ .h2-fit{font-size:1.375rem} .h2-sm.h2-fit{font-size:1.25rem} }
@media (max-width:300px){ .page-article .page-card h1 .nw,.h2-fit .nw{white-space:normal} }

/* ===== v10 (Jon, Oct 15): Three Simple Steps use house-style photographs (same family as the service photos) ===== */
/* Photo full-bleed at the top of each step card, 3:2 like the service flip-card photos; cards equal height (grid stretch). */
.steps{align-items:stretch}
.card.step,.sheet .card.step{display:flex;flex-direction:column;padding:0 0 var(--s4)}
.step>:not(.step-media){padding-left:var(--s4);padding-right:var(--s4)}
.step::before{z-index:1}
.step-media{display:block;aspect-ratio:3/2;margin:0 0 var(--s3);background:var(--lavender-soft);overflow:hidden}
.step-media picture,.step-media img{display:block;width:100%;height:100%}
.step-media img{object-fit:cover;max-width:none}
/* tablet: one column; photo beside the text so the cards stay compact */
@media (max-width:980px) and (min-width:761px){
  .steps{grid-auto-rows:1fr}
  .card.step,.sheet .card.step{display:block;position:relative;padding:var(--s4) 0 var(--s4) 42%;min-height:208px}
  .step-media{position:absolute;left:0;top:0;bottom:0;width:42%;margin:0;aspect-ratio:auto}
}
@media (max-width:760px){ .step>:not(.step-media){padding-left:var(--s3);padding-right:var(--s3)} .card.step,.sheet .card.step{padding-bottom:var(--s3)} .step-media{margin-bottom:var(--s2)} }
@media (max-width:340px){ .step>:not(.step-media){padding-left:var(--s2);padding-right:var(--s2)} }


/* =====================================================================
   v11 — ONE section-spacing rule. Every gap between stacked cards (header card -> first card -> ... -> footer card)
   is --section-gap, on every page. The value is the Home reference (Three Simple Steps -> How Stephen Can Help),
   measured in v10: 24px above 760px, 16px at 760px and below. Each block in <main> and the footer carry the gap
   ABOVE themselves; nothing else sets vertical padding/margin on sections. Check: tools/gaps.py --assert.
   ===================================================================== */
:root{--section-gap:24px}
@media (max-width:760px){ :root{--section-gap:16px} }
main>*,.site-footer{margin-top:0;margin-bottom:0;padding-top:var(--section-gap)}
main>*{padding-bottom:0}

/* =====================================================================
   v11 — footer social icons (Facebook, LinkedIn, YouTube; three since v16). Solid indigo #2F3CA6 circles (the footer link colour), pure white glyphs.
   22px glyphs in 44px circles, 8px apart, the circles' left edge on the brand column's text edge.
   v12: real <a> links (href="#" until the URLs arrive); hover/focus states documented below.
   ===================================================================== */
.social{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0;padding:0;list-style:none}
.site-footer .social li{margin:0;font-size:inherit}
.social-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--indigo);color:#fff;text-decoration:none}
.social-ico svg{display:block;width:22px;height:22px;fill:currentColor}
/* LinkedIn bug (official PNG, 840x779: a 778px square + the ® to its right). Optical balance: the solid square reads heavier than the
   open Facebook/YouTube shapes, so the square is set to 20px (img 21.6px wide) and nudged .8px right so the square, not the ®, is centred.
   .footer-brand prefix beats the logo rule .footer-brand img (width/margins). */
.footer-brand .social-ico img{display:block;width:21.6px;height:auto;margin:0;transform:translateX(.8px)}
/* v11 follow-up (Admiral, Oct 16 11:18): solid indigo #2F3CA6 circles with pure white glyphs (white on #2F3CA6 = 9.06:1).
   v12 (Jon, Oct 16 11:49): the icons are real links (href="#" until the profile URLs arrive).
   Hover: circle to deep teal #166455 (white on it = 7.03:1; light teal #28B79A would be 2.52:1, fail), lift 2px + soft shadow, 180ms ease.
   Focus-visible: same teal + a 3px #166455 ring, 3px off the circle (7.03:1 against the white card). Active: no lift.
   Reduced motion: no lift, colour change kept. */
a.social-ico{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
a.social-ico:hover,a.social-ico:focus-visible{background:#166455;color:#fff;text-decoration:none}
a.social-ico:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,100,85,.30)}
a.social-ico:focus-visible{outline:3px solid #166455;outline-offset:3px;border-radius:50%}
a.social-ico:active{transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){
  a.social-ico{transition:background-color .18s ease}
  a.social-ico:hover{transform:none;box-shadow:none}
}
@media print{ .social{display:none} }

/* =====================================================================
   v12 — About Stephen (Jon, Oct 16). Page-specific modifier .hero--about; no other page changes.
   1) The inset photo is gone, so the hero is one full-width column.
   2) Contrast treatment adapted from CTA staging homepage slide 3 (white display type on a navy left-to-right scrim
      over the image, #0d0d3f at 90% -> 27%): here a deep-navy (#1A2258, the RM on-teal ink) scrim, 94% -> 72%, over
      the purple-to-teal hero art, with a light blur so the art reads as texture, a hairline light edge, the card radius
      and shadow. Text: white H1/lede, light-teal eyebrow (#3CC4A8). Measured contrast against the rendered backdrop: README v12.
   3) Portrait under the facts box: CTA slide-3 original at its natural 1672:941 proportions (no crop), card radius, soft shadow.
   ===================================================================== */
.hero--about .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero--about .hero-grid>.hero-card,.hero--inner.hero--about .hero-grid .hero-card{
  background:linear-gradient(90deg,rgba(26,34,88,.94) 0%,rgba(26,34,88,.86) 55%,rgba(26,34,88,.72) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.10);color:#fff;padding-right:var(--s8)}
.hero--about .hero-card h1,.hero--about .hero-card .lede{color:#fff}
.hero--about .hero-card .eyebrow{color:#3CC4A8}
@media (max-width:1100px){ .hero--inner.hero--about .hero-grid .hero-card{padding-right:var(--s6)} }
@media (max-width:760px){ .hero--inner.hero--about .hero-grid .hero-card{padding:var(--s4) var(--s3)} }
@media (max-width:340px){ .hero--inner.hero--about .hero-grid .hero-card{padding:var(--s3) var(--s2)} }
.about-side{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.about-portrait{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.about-portrait img{display:block;width:100%;height:auto}

/* =====================================================================
   v12 — (a) full measure + (b) one left edge (Jon, Oct 16 11:58).
   (b) ONE shared value, --card-pad-x, is the inner left/right padding of every card (hero/page card, each .sheet>.wrap,
   .book>.wrap, footer card). The header bar's left padding is --card-pad-x minus the wordmark's built-in ink inset
   (8.908% of the logo width, measured with getBBox), so the visible "rosenfield" ink starts at exactly the same x as
   every card's content. Nested cards (service flip cards, steps, article cards, facts box) keep their own inner padding;
   their container edge sits on the line. Checked by tools/align.py on all pages at 1440/768/390/320.
   !important is used once, here, so this single token beats the older breakpoint-specific padding rules.
   ===================================================================== */
:root{--card-pad-x:48px;--logo-w:184px;--logo-ink:calc(var(--logo-w) * .08908)}
@media (max-width:760px){ :root{--card-pad-x:24px;--logo-w:138px} }
@media (max-width:340px){ :root{--card-pad-x:16px} }
.logo img{width:var(--logo-w)}
.header-bar{padding-left:calc(var(--card-pad-x) - var(--logo-ink))!important}
.hero-card,.sheet>.wrap,.book>.wrap,.footer-card{padding-left:var(--card-pad-x)!important}
.page-card,.hero--about .hero-card,.sheet>.wrap,.book>.wrap,.footer-card{padding-right:var(--card-pad-x)!important}

/* (a) Full measure where a card has no image, sidebar or multi-column layout: paragraphs, leads and headings span the
   card's content width (Jon's explicit choice; above the usual ~75ch guideline, see README v12). Cards with an image,
   aside, form or grid (.two-col, .split-card, .pkg-grid) and the article pages keep their reading measure. */
.hero--inner .page-card:not(:has(img,picture,.hero-photo)) :is(h1,.lede),
.sheet>.wrap:not(:has(img,picture,aside,form,.two-col,.split-card,.pkg-grid)) :is(h1,h2,h3,p:not(.rate-callout),.lede,.statement p){max-width:none}
/* (b) cont.: the two centred blocks start on the shared left edge too: the article reading column (image + text keep
   their 720px measure, now left-aligned in the card) and the "Stephen's approach" statement (now left-aligned). */
.article-media,.article-body{margin-left:0;margin-right:auto}
.statement{margin-left:0;text-align:left;max-width:none}
.statement .eyebrow{justify-content:flex-start}
.statement p:not(.eyebrow){margin-left:0}
/* v12 follow-up (Jon, 12:21 PM): text with no image beside it fills the card.
   Article body spans the full card content width; the article's header image keeps its natural 16:9 at max 720px,
   left-aligned on the logo edge (never stretched). Home "Stephen's approach" and the About hero lede fill the card too. */
.article-body{max-width:none}
.article-body :is(p,p:not(.eyebrow),h2,h3,ul,ol,li,blockquote){max-width:none}
.article-media{max-width:720px;margin-left:0;margin-right:auto}
.statement p:not(.eyebrow){max-width:none;text-wrap:pretty}
.hero--about .hero-grid>.hero-card>:not(h1),.hero--about .hero-card .lede,.hero--about .hero-card h1{max-width:none}

/* =====================================================================
   v13 — About Stephen only (Oct 16). Page-specific modifier .hero--about; no other page changes.
   1) Top card (Nov 2 2026): approved aged-v9 Stephen portrait composed onto navy 1672x941 (about-hero-aged-v9-{800,1200,1672}); was desk photo as the card
      background, behind a deep-navy (#1A2258) gradient scrim: heavy on the text side (left), light on the right so his
      face shows. background-size:cover (never stretched); the photo is anchored left so its navy wall sits under the text
      and his face falls in the right part of the card at 761+. At 761+ the text column is narrowed so it ends before his
      face. At <=760 the text covers the card, so the scrim is heavier everywhere (face mostly hidden, AA kept).
      Contrast is measured against the rendered pixels behind each text block: tools/about_contrast.py (1440/768/390/320).
   2) Sidebar: illustrative 9:16 handshake image (405x720 source), aspect-ratio 9/16 + object-fit:cover, capped at 405px
      (its native width) and left-aligned on the shared content edge when the column is wider (<=980px).
   ===================================================================== */
.hero--about .hero-grid>.hero-card,.hero--inner.hero--about .hero-grid .hero-card{
  --scrim:linear-gradient(90deg,rgba(26,34,88,.95) 0%,rgba(26,34,88,.93) 38%,rgba(26,34,88,.84) 52%,rgba(26,34,88,.42) 66%,rgba(26,34,88,.18) 82%,rgba(26,34,88,.22) 100%);
  --bg-1x:url(../assets/photo/about-hero-aged-v9-1672.1de3e8cf.jpg); --bg-1x-w:url(../assets/photo/about-hero-aged-v9-1672.3ad49242.webp);
  --bg-pos:100% 20%;
  background-color:#1A2258;
  background-image:var(--scrim),var(--bg-1x);
  background-image:var(--scrim),image-set(var(--bg-1x-w) type("image/webp"),var(--bg-1x) type("image/jpeg"));
  background-size:100% 100%,cover;background-position:0 0,var(--bg-pos);background-repeat:no-repeat;
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* text column at 761+: ends before the face */
.hero--inner.hero--about .hero-grid>.hero-card>*{max-width:58%}
@media (max-width:1100px){
  .hero--about .hero-grid>.hero-card,.hero--inner.hero--about .hero-grid .hero-card{
    --bg-1x:url(../assets/photo/about-hero-aged-v9-1200.1d3e39a5.jpg); --bg-1x-w:url(../assets/photo/about-hero-aged-v9-1200.d0f33af1.webp);
    background-image:var(--scrim),image-set(var(--bg-1x-w) type("image/webp") 1x,url(../assets/photo/about-hero-aged-v9-1672.3ad49242.webp) type("image/webp") 2x,var(--bg-1x) type("image/jpeg") 1x,url(../assets/photo/about-hero-aged-v9-1672.1de3e8cf.jpg) type("image/jpeg") 2x)}
}
@media (max-width:760px){
  .hero--about .hero-grid>.hero-card,.hero--inner.hero--about .hero-grid .hero-card{
    --scrim:linear-gradient(90deg,rgba(26,34,88,.93) 0%,rgba(26,34,88,.88) 55%,rgba(26,34,88,.80) 100%);
    --bg-1x:url(../assets/photo/about-hero-aged-v9-800.5bacc3e9.jpg); --bg-1x-w:url(../assets/photo/about-hero-aged-v9-800.0a7f4b84.webp);
    --bg-pos:100% 20%}
  .hero--inner.hero--about .hero-grid>.hero-card>*{max-width:none}
}
.about-portrait--tall{width:100%;max-width:405px}
.about-portrait--tall img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}

/* =====================================================================
   v15 — cookie consent, research Option A (IT Nerd, Oct 16; "For the designer" appendix A3). Consent JS + CSS only.
   - html.ck-js is set by the consent script in <head>; without JS the bar and the footer "Cookie Settings" button are hidden
     (A3 / Option A item 1: "hide the bar when JavaScript is off, since GA can't load without it anyway").
   - --cookie-h is measured by script from the bar's real height (the draft wording is longer than v14's); the values above stay as
     the pre-script fallback.
   - Footer "Cookie Settings" is a <button> styled exactly like the footer text links (A3.3).
   ===================================================================== */
html:not(.ck-js) .cookie,html:not(.ck-js) .cookie-settings-item{display:none}
html:not(.ck-js) body{padding-bottom:0}
html:not(.ck-js){scroll-padding-bottom:0}
.cookie-box:focus{outline:none}
.cookie-box:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cookie-status{display:block;margin-top:var(--s1);font-weight:600}
.cookie-status[hidden]{display:none}
.link-btn{background:none;border:0;padding:0;margin:0;font:inherit;line-height:inherit;color:var(--indigo);cursor:pointer;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
.link-btn:hover{text-decoration:underline;text-decoration-thickness:2px}
.policy .draft-note{margin-top:var(--s2)}
.policy .draft-note .ph-tag{margin:0}
/* v15: Decline and Accept are the same size too (equal minimum width; both labels fit inside it at every breakpoint) */
.cookie-btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}   /* two equal columns: the wider label sets both widths */
.cookie-btns .btn{min-width:7em}
/* v15 QA SITE15-1: privacy.html#cookies lands with the --s3 gap above the heading instead of flush/clipped */
#cookies{scroll-margin-top:var(--s3)}

/* ===== v17 (call Oct 21) =====
   Logos: header 160→184px (≤760: 120→138), +15%; footer 140→175px, +25% (width only, height:auto keeps the SVG's aspect).
   Nav dropdown: Mediation Services > Packages & Fees. Desktop: panel opens on mouse hover, or the arrow
   button (keyboard Enter/Space, tap or click; aria-expanded). ≤1180 (Menu list): the sub-link is always shown, indented under its tab; no arrow button.
   Packages: "per couple" bold + underlined. */
.logo img{width:var(--logo-w)}
.nav-list>li{position:relative;display:flex;align-items:center}
.sub-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:32px;margin-left:-4px;padding:0;border:0;border-radius:6px;background:none;color:var(--on-teal);cursor:pointer}
.sub-btn::after{content:"";width:6px;height:6px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-2px) rotate(45deg)}
.sub-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.sub-btn:hover{background:var(--tint);color:var(--indigo)}
.sub-btn:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.nav-sub{display:none;position:absolute;left:0;top:100%;z-index:6;min-width:200px;padding:var(--s1);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
@media (hover:hover){ .nav-list>li:hover>.nav-sub{display:block} }
.nav-list>li.sub-open>.nav-sub{display:block}
@media (max-width:1180px){
  .nav-list>li{display:block}
  .sub-btn{display:none}
  .nav-sub{display:block;position:static;min-width:0;padding:0 0 0 var(--s2);border:0;box-shadow:none;background:none}
  html:not(.js) .nav-list>li{display:flex}
  html:not(.js) .nav-sub{padding:0}
}
.pkg-intro strong.u{text-decoration:underline;text-underline-offset:.15em}
@media (max-width:760px){ .exp-title{text-wrap:balance} .exp-title .nw{white-space:normal} }
/* v17: the +15% logo sits 4px from the bar edge at <=340, so its focus ring hugs the logo (offset 0) and stays on the white bar */
@media (max-width:340px){ .logo:focus-visible{outline-offset:0} }
/* v17: at <=300 the larger logo + Menu need the bar gap cut to 8px so Menu keeps its 16px inset */
@media (max-width:300px){ .header-bar{gap:var(--s1)} }
@media (max-width:340px){ #services .svc-list h3 .nw{white-space:normal} }

/* ===== v18: homepage testimonials (#approach) and Your Separation Journey stages. Hues: indigo text, teal + lavender accents only (existing tokens). ===== */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s8)}
.quotes>li{display:flex}
.quote{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);width:100%;margin:0;padding:var(--s4);overflow:hidden;font-family:var(--text)}
.quote::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--lavender))}
.quote blockquote{margin:0;padding-left:var(--s2);border-left:2px solid var(--lavender)}
.quote blockquote p{font-size:17px;line-height:1.6;color:var(--body)}
.quote figcaption b{display:block;font-weight:600;color:var(--indigo)}
.quote figcaption span{display:block;font:600 12px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.quote figcaption span.keep-case{text-transform:none;letter-spacing:.12em}
.journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.jny{overflow:hidden;display:flex;flex-direction:column}
.jny::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;background:linear-gradient(90deg,var(--teal),var(--lavender))}
.jny-media{display:block;aspect-ratio:16/9;background:var(--lavender-soft);overflow:hidden}
.jny-media picture,.jny-media img{display:block;width:100%;height:100%}
.jny-media img{object-fit:cover;max-width:none}
.jny-body{display:block;padding:var(--s4)}
.jny .n{display:block;color:var(--teal-deep);font:600 12px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s1)}
.jny p{margin-top:var(--s1);font-size:16px}
@media (max-width:760px){ .quotes,.journey{grid-template-columns:minmax(0,1fr)} .quotes{margin-top:var(--s6)} .quote,.jny-body{padding:var(--s3)} }

/* v18.2 contact form: honeypot + status */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status.is-error{color:#b3261e}
.form{min-width:0;max-width:100%;position:relative}
.form .field,.form .check,.form .cf-turnstile,.form .btn,.form .form-note{min-width:0;max-width:100%}
.form .cf-turnstile{width:100%;overflow:hidden}

/* C34 short-viewport cookie bar (batch UAT 2026-11-02): zoomed / landscape screens.
   Placed last so it wins over v4-v15 cookie rules. Height-only queries, so normal desktop sizes (e.g. 1440x900) are unchanged. */
@media (max-height:420px){
  :root{--cookie-h:76px}
  .cookie{left:var(--s1);right:var(--s1);bottom:var(--s1)}
  .cookie-box{flex-direction:row;align-items:center;gap:var(--s1);padding:6px var(--s2);font-size:12px;line-height:1.3}
  .cookie-btns{justify-content:flex-end}
  .cookie-btns .btn{min-height:32px;padding:0 var(--s1);font-size:12px}
}
@media (max-height:300px){
  .cookie{position:static;margin:var(--s1);pointer-events:auto}
  body{padding-bottom:0!important}
  html{scroll-padding-bottom:0!important}
}