/* Brand tokens: swap this block and the two font families to re-theme all five pages. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/playfair-display/PlayfairDisplay-Regular.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('./fonts/playfair-display/PlayfairDisplay-Italic.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('./fonts/dm-sans/DMSans-Regular.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:100 1000;font-display:swap;src:url('./fonts/dm-sans/DMSans-Italic.woff2') format('woff2')}
:root{--paper:#fffaf2;--surface:#f2eee1;--ink:#173f3a;--muted:#51625c;--accent:#f1ce42;--line:#cccfc1;--button:#173f3a;--button-ink:#fffaf2;--display:'Playfair Display',Georgia,'Times New Roman',serif;--body:'DM Sans',Arial,Helvetica,sans-serif;--radius:3px;--space:7.5rem;--gutter:clamp(1.5rem,5.56vw,5rem)}
:root[data-theme=spruce]{--paper:#f7f9f5;--surface:#e4ece4;--ink:#203f37;--muted:#52655b;--accent:#c2d5a8;--line:#c2cfc4;--button:#203f37;--button-ink:#f7f9f5}
:root[data-theme=clay]{--paper:#fcf5ed;--surface:#f0e3d7;--ink:#633e33;--muted:#745e54;--accent:#e6b18b;--line:#d9c9bd;--button:#633e33;--button-ink:#fcf5ed}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.7 var(--body);-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.04em}h1{font-size:clamp(3.1rem,5.5vw,5.6rem)}h2{font-size:clamp(2.5rem,4vw,4rem)}h3{font-size:1.8rem;letter-spacing:-.025em}h1 em,h2 em{font-weight:400}p+p{margin-top:1.15rem}a{color:inherit;text-underline-offset:5px}button,input,textarea,select{font:inherit}button,a,select,input,textarea{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:5px}img{display:block;max-width:100%;height:auto}.wrap{width:min(1240px,88%);margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:1.75rem;border-bottom:1px solid var(--line);gap:2rem}.brand{text-decoration:none;display:inline-flex;flex-direction:column;white-space:nowrap;line-height:1.05}.brand>span{font-family:var(--display);font-size:2.25rem;letter-spacing:-.065em}.brand-dot{color:var(--ink)}.brand small{font-size:.625rem;letter-spacing:.15em;margin-top:.6rem;line-height:1.2}.site-header nav{display:flex;gap:2rem;align-items:center;font-size:.9375rem}.site-header nav a{text-decoration:none}.site-header nav a:hover,.site-header nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:1px}.nav-contact{padding:.7rem 1.1rem;border:1px solid var(--ink);border-radius:var(--radius);display:flex;gap:1.4rem;align-items:center}.menu-toggle{display:none}.eyebrow{text-transform:uppercase;font-size:.75rem;font-weight:600;letter-spacing:.14em;margin-bottom:1.7rem;line-height:1.5}.lead{font-size:1.28rem;line-height:1.5;max-width:33rem}.hero{display:grid;grid-template-columns:1.1fr .85fr;column-gap:8%;padding-top:clamp(3rem,5vw,5rem);position:relative}.hero-copy{padding-top:1rem}.hero-copy h1{margin-bottom:1.6rem}.hero-copy .lead{max-width:29rem;margin-bottom:1.2rem}.hero-copy>p:not(.eyebrow):not(.lead){max-width:29rem;color:var(--muted)}.hero-portrait{position:relative;align-self:start;margin:0 0 3rem 0;padding-right:1.6rem;padding-bottom:1.6rem}.hero-portrait:before{content:'';position:absolute;right:0;bottom:0;width:90%;height:85%;background:var(--accent);border-radius:50% 50% 2px 2px;z-index:0}.hero-portrait img{position:relative;width:100%;height:clamp(380px,37vw,530px);object-fit:cover;object-position:center 38%;border-radius:46% 46% 2px 2px}.hero-portrait figcaption{position:absolute;bottom:0;left:-2.6rem;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);padding:1.15rem 1.6rem;min-width:14rem;z-index:1}.hero-portrait figcaption span{font:italic 1.6rem var(--display)}.hero-portrait figcaption small{font-size:.8125rem;color:var(--muted);margin-top:.25rem}.actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2.1rem}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:2.2rem;padding:1rem 1.4rem;background:var(--button);color:var(--button-ink);border:1px solid var(--button);text-decoration:none;border-radius:var(--radius);font-weight:500;font-size:.9375rem;cursor:pointer;line-height:1.5;min-height:48px;transition:transform .15s ease,opacity .15s ease}.button:hover{opacity:.88;transform:translateY(-2px)}.text-link{display:inline-flex;align-items:center;gap:1.1rem;font-size:.9375rem;text-decoration:underline;text-decoration-thickness:1px;font-weight:500;min-height:36px}.band{background:var(--surface)}.intro{padding-block:var(--space)}.split{display:grid;grid-template-columns:1fr 1.6fr;gap:10%}.split>div>h2{margin-bottom:1.7rem}.split>div>p{max-width:43rem}.large-copy{font-size:1.25rem;line-height:1.65}.section{padding-block:var(--space)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;margin-bottom:3.3rem}.section-heading>p{font-size:.9375rem;color:var(--muted)}.support-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);gap:3.5rem}.support-grid article{padding-top:1.6rem}.index{font-size:.8125rem;letter-spacing:.08em;color:var(--muted)}.support-grid h3{margin:2.3rem 0 1rem}.support-grid p{color:var(--muted)}.approach{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:var(--space);display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:center}.approach .text-link{margin-top:1.2rem}.closing{text-align:center;padding-block:var(--space)}.closing .eyebrow{margin-bottom:1rem}.closing h2{margin-bottom:2rem}.closing>p:last-child{font-size:.8125rem;margin-top:1.5rem;color:var(--muted)}.footer{background:var(--ink);color:var(--paper)}.footer-top{padding-block:3.4rem;display:flex;justify-content:space-between;gap:3rem}.footer-top>p{font-family:var(--display);font-size:1.5rem;line-height:1.35}.footer-top>div{display:flex;flex-direction:column;font-size:.9375rem;gap:.6rem}.footer-bottom{border-top:1px solid color-mix(in srgb,var(--paper) 25%,transparent);padding-block:1.4rem;display:flex;justify-content:space-between;gap:2rem;font-size:.75rem;opacity:.8}.page-intro{padding-block:var(--space);border-bottom:1px solid var(--line)}.page-intro h1{font-size:clamp(2.8rem,5vw,5rem)}.page-intro .lead{margin-top:1.8rem;max-width:40rem}.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:8%;padding-block:var(--space);align-items:start}.about-photo{position:sticky;top:2rem}.about-photo img{width:100%;aspect-ratio:4/4.8;object-fit:cover;object-position:56% center;border-radius:50% 50% 2px 2px}.about-photo figcaption{padding-top:1.1rem;font-size:.8125rem;text-align:center}.prose h2{margin-bottom:1.5rem}.prose>p:not(.eyebrow){color:var(--muted)}.prose p.large-copy{color:var(--ink)}.service-list{padding-block:1rem 3rem}.service-list article{display:grid;grid-template-columns:50px 1fr 200px;gap:2rem;align-items:baseline;padding-block:2.5rem;border-bottom:1px solid var(--line)}.service-list article:last-child{border-bottom:0}.service-list h2{font-size:2.3rem;margin-bottom:1rem}.service-list p{max-width:40rem;color:var(--muted)}.service-tag{font-size:.8125rem;text-align:right}.topic-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}.topic-list li{border-bottom:1px solid var(--line);padding:.8rem 0;font-size:1.06rem}.topic-list li::before{content:'•';color:var(--muted);margin-right:.8rem}.scope-note{border-left:3px solid var(--ink);padding-left:1.3rem;margin-top:2.8rem}.scope-note h3{font-family:var(--body);font-size:.9375rem;font-weight:600;letter-spacing:0;margin-bottom:.7rem}.scope-note p{font-size:.9375rem;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}thead{background:var(--surface)}th,td{padding:1.35rem 1.3rem;border-bottom:1px solid var(--line)}thead th{font-size:.8125rem;line-height:1.4;font-weight:500}tbody th{font-family:var(--display);font-size:1.45rem;font-weight:400}td{font-size:1rem}.fees-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem;font-size:.875rem;color:var(--muted)}.fees-notes p{margin:0}.fees-notes strong{color:var(--ink);font-weight:600}.faq-layout{display:grid;grid-template-columns:1fr 2.1fr;gap:8%;padding-top:var(--space)}.faq-layout>div:first-child>p:not(.eyebrow){color:var(--muted)}.accordion details{border-bottom:1px solid var(--line)}.accordion details:first-child{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1.5rem;padding:1.8rem 0;font-family:var(--display);font-size:1.65rem;line-height:1.3;letter-spacing:-.02em}summary::-webkit-details-marker{display:none}summary .index{font-family:var(--body)}summary .plus{margin-left:auto;font-family:var(--body);font-size:1.4rem;transition:transform .2s}details[open] .plus{transform:rotate(45deg)}.answer{padding:0 2rem 2rem 2.7rem;color:var(--muted)}.crisis{background:var(--surface);border-left:4px solid var(--ink);padding:2.5rem 3rem}.crisis .eyebrow{margin-bottom:1rem}.crisis h3{margin-bottom:1rem}.crisis>p{max-width:52rem}.crisis .text-link{margin-top:1rem}.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:10%;padding-top:var(--space)}.contact-copy h2{margin-bottom:1.8rem}.contact-copy>p{max-width:24rem;color:var(--muted)}dl{margin:2rem 0}dt{font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;margin-top:1.5rem}dd{margin:.5rem 0 0;color:var(--muted)}.enquiry-form{padding:2rem;background:var(--surface)}.form-notice{padding:1rem 1.2rem;border:1px solid var(--line);margin-bottom:2rem;font-size:.875rem}.form-notice strong{font-weight:600}.form-notice p{margin-top:.25rem;line-height:1.5}.field{margin-bottom:1.5rem}.field label,legend{display:block;font-size:.9375rem;font-weight:500;line-height:1.5}.field label span,legend span{font-size:.75rem;color:var(--muted);font-weight:400}input:not([type=radio]),textarea{display:block;width:100%;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);padding:.85rem .9rem;margin-top:.6rem;line-height:1.5;font-size:1rem}input::placeholder{color:var(--muted);opacity:.8}textarea{resize:vertical;min-height:110px}fieldset{padding:0;border:0;margin:0 0 1.5rem;min-width:0}.radio-row{display:flex;gap:1.5rem;margin-top:.7rem}.radio-row label{display:flex;align-items:center;gap:.4rem;cursor:pointer;min-height:36px}input[type=radio]{accent-color:var(--ink);width:1.1rem;height:1.1rem}.field-hint{font-size:.8125rem;color:var(--muted);line-height:1.5;margin-top:.35rem}.enquiry-form .button{width:100%}#form-result{padding:1rem;background:var(--paper);border:1px solid var(--line);font-size:.9375rem;margin-top:1rem}.skip{position:fixed;top:10px;left:10px;background:var(--paper);padding:1rem;z-index:100;transform:translateY(-160%)}.skip:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.hero{column-gap:12%}.hero-copy{padding-top:2.5rem}}
@media(max-width:1000px){.site-header nav{gap:1.1rem;font-size:.875rem}.brand>span{font-size:2rem}.brand small{font-size:.56rem}.hero{column-gap:6%}.hero-portrait figcaption{left:-1rem}.support-grid{gap:2rem}.split{gap:6%}.service-list article{grid-template-columns:30px 1fr 160px;gap:1.2rem}.contact-grid{gap:6%}.enquiry-form{padding:1.5rem}}
@media(max-width:760px){.site-header{position:relative;padding-block:1.3rem;gap:1rem}.brand>span{font-size:2rem}.brand small{font-size:.55rem}.menu-toggle{display:flex;align-items:center;gap:1.4rem;border:1px solid var(--line);background:none;padding:.55rem .8rem;color:var(--ink);font-size:.875rem;min-height:44px;border-radius:2px}.site-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border:1px solid var(--line);padding:1.3rem;z-index:10;box-shadow:0 12px 24px #0000000c;align-items:stretch;gap:0}.site-header nav.is-open{display:flex;flex-direction:column}.site-header nav a{padding:.7rem;font-size:1rem}.nav-contact{margin-top:.7rem}.hero{grid-template-columns:1fr;padding-top:2.7rem}.hero-copy{padding:0}.hero-copy h1{font-size:clamp(3.1rem,10.4vw,4.5rem);line-height:1.02}.eyebrow{margin-bottom:1.4rem;font-size:.7rem}.hero-copy .lead{font-size:1.2rem}.hero-copy>p:not(.eyebrow):not(.lead){max-width:36rem}.actions{gap:1.2rem}.hero-portrait{width:min(88%,400px);justify-self:center;margin:3rem 0 1.5rem;padding-right:1rem;padding-bottom:1rem}.hero-portrait img{height:420px}.hero-portrait figcaption{left:-1rem;padding:1rem 1.2rem;min-width:12rem}.split,.about-grid,.approach,.faq-layout,.contact-grid{grid-template-columns:1fr;gap:2rem}.split>div>h2{margin-bottom:1.3rem}.section-heading{display:block;margin-bottom:2rem}.section-heading .text-link,.section-heading>p{margin-top:1.5rem}.support-grid{grid-template-columns:1fr;gap:0}.support-grid article{padding:1.5rem 0;border-bottom:1px solid var(--line);position:relative;padding-left:2.3rem}.support-grid .index{position:absolute;left:0;top:1.6rem}.support-grid h3{margin:0 0 .8rem}.support-grid p{max-width:32rem}.footer-top{flex-wrap:wrap;gap:2.3rem;padding-block:2.5rem}.footer-top .brand{width:100%}.footer-top>p{font-size:1.4rem}.footer-top>div{font-size:.875rem}.footer-bottom{display:block;font-size:.75rem}.footer-bottom span{display:block}.footer-bottom span+span{margin-top:.5rem}.page-intro h1{font-size:clamp(2.6rem,8vw,3.8rem)}.about-photo{position:static;max-width:440px;width:90%;margin-inline:auto}.about-photo img{aspect-ratio:4/4}.about-grid{gap:3rem}.service-list article{grid-template-columns:24px 1fr;gap:1rem;padding-block:2rem}.service-list h2{font-size:1.9rem}.service-tag{grid-column:2;text-align:left}.topic-list{grid-template-columns:1fr}.fees-notes{grid-template-columns:1fr;gap:1.5rem}th,td{padding:1rem .65rem}thead th{font-size:.75rem}tbody th{font-size:1.2rem}td{font-size:.875rem}table{min-width:490px}.table-wrap{margin-right:-6.8%;padding-right:6.8%;padding-bottom:.5rem}.faq-layout{gap:2.5rem}summary{gap:1rem;font-size:1.4rem}.answer{padding:0 0 1.5rem 2rem}.crisis{padding:1.7rem 1.5rem}.contact-copy>p{max-width:35rem}.contact-grid{gap:2.7rem}.enquiry-form{padding:1.5rem}.closing h2{font-size:2.9rem}.large-copy{font-size:1.15rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.button:hover{transform:none}}

/* Phosphor Icons · Regular · bundled SVGs, inheriting theme colour. */
.icon{display:inline-block;width:1.25rem;height:1.25rem;flex-shrink:0;vertical-align:-.23em;fill:currentColor}
.button .icon,.nav-contact .icon,.text-link .icon{vertical-align:middle}
.menu-toggle .icon-x{display:none}
.menu-toggle[aria-expanded="true"] .icon-list{display:none}
.menu-toggle[aria-expanded="true"] .icon-x{display:inline-block}
summary .plus{display:inline-flex;align-self:center}
.contact-copy dt .icon,.fees-notes strong .icon{margin-right:.25rem}
.radio-row .icon{width:1.125rem;height:1.125rem}
tbody th .icon{margin-right:.35rem}

/* Gentle, theme-aware feedback on interactive controls. */
.button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.text-link,.site-header nav a,.footer a,summary,.menu-toggle{transition:background-color .2s ease,color .2s ease,text-decoration-color .2s ease}
a .icon,button .icon{transition:transform .2s ease}
input:not([type=radio]),textarea,select{transition:border-color .2s ease,box-shadow .2s ease}
.button:focus-visible{background:var(--accent);color:var(--ink);border-color:var(--ink)}
summary:focus-visible{background:var(--surface)}
@media(hover:hover) and (pointer:fine){
 .button:hover{background:var(--accent);color:var(--ink);border-color:var(--ink);opacity:1;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 12%,transparent)}
 .button:hover .icon-arrow-right,.text-link:hover .icon-arrow-right,.nav-contact:hover .icon-arrow-right{transform:translateX(3px)}
 a:hover .icon-arrow-up-right{transform:translate(2px,-2px)}
 .text-link:hover{text-decoration-thickness:2px;text-decoration-color:var(--ink)}
 .site-header nav .nav-contact:hover,.menu-toggle:hover{background:var(--surface)}
 .site-header nav a:not(.nav-contact):hover{text-decoration-thickness:2px}
 summary:hover{background:var(--surface)}
 .footer a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
 input:not([type=radio]):hover,textarea:hover{border-color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){
 a .icon,button .icon,.button:hover{transform:none!important}
}

/* Typography and spacing round: Playfair Display + DM Sans, October 2026. */
body{font-size:1.125rem;line-height:1.6;font-optical-sizing:auto}
.wrap{width:calc(100% - 2 * var(--gutter));max-width:75rem}
h1,.hero-copy h1,.page-intro h1{font-size:clamp(2.625rem,1.8rem + 3vw,4.5rem);line-height:1.1;letter-spacing:-.025em;font-weight:400}
h2,.closing h2{font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.2;letter-spacing:-.02em;font-weight:400}
h3{font-size:clamp(1.5rem,1.15rem + 1.1vw,2rem);line-height:1.25;letter-spacing:-.015em;font-weight:400}
h1 em,h2 em{font-style:italic;font-weight:400}
p+p{margin-top:1.25rem}
.lead,.hero-copy .lead{font-size:clamp(1.25rem,1rem + .56vw,1.5rem);line-height:1.4;max-width:48ch}
.large-copy{font-size:1.25rem;line-height:1.6}
.eyebrow{font-size:.75rem;line-height:1.5;font-weight:600;letter-spacing:.12em;margin-bottom:1.5rem}
.hero{padding-top:clamp(3rem,6.67vw,6rem)}
.hero-copy{padding-top:0}
.hero-copy h1{margin-bottom:1.5rem}
.hero-copy .lead{margin-bottom:1.5rem}
.hero-copy>p:not(.eyebrow):not(.lead){max-width:48ch}

.actions{margin-top:2rem;gap:1.5rem}
.button,.text-link,.site-header nav{font-size:1rem;line-height:1.5}
.button{font-weight:500}
.hero-portrait figcaption{min-width:0;width:max-content;max-width:calc(100% + 1rem)}
.hero-portrait figcaption span{font-family:var(--display);font-size:1.5rem;line-height:1.25}
.hero-portrait figcaption small{max-width:28ch;font-size:.875rem;line-height:1.55;margin-top:.5rem}
.split>div>h2,.prose h2{margin-bottom:1.5rem}
.split>div>p,.prose>p:not(.eyebrow),.answer>p{max-width:65ch}
.section-heading{margin-bottom:3rem}
.section-heading>p,.service-tag,.fees-notes,.scope-note p,.footer-top>div{font-size:1rem;line-height:1.55}
.support-grid h3{margin-top:2rem;margin-bottom:1rem}
.approach .text-link{margin-top:2rem}
.closing h2{margin-bottom:2rem}
.closing>p:last-child{font-size:1rem;margin-top:1.5rem}
.brand>span{letter-spacing:-.045em}
.brand small{font-size:.625rem;letter-spacing:.1em}
.footer-bottom,.about-photo figcaption,.index{font-size:.875rem;line-height:1.55}
.footer-top>p{font-size:1.5rem}
.page-intro .lead{margin-top:1.5rem}
.service-list h2{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);line-height:1.25;margin-bottom:1rem}
.scope-note h3{font-family:var(--body);font-size:1rem;line-height:1.5;font-weight:600;letter-spacing:0;margin-bottom:1rem}
.topic-list li{font-size:1.125rem}
summary{font-size:clamp(1.375rem,1rem + .8vw,1.75rem);line-height:1.3;letter-spacing:-.015em}
.crisis h3{margin-bottom:1rem}
.contact-copy h2{margin-bottom:1.5rem}
.contact-grid>*{min-width:0}
.radio-row{flex-wrap:wrap;gap:.5rem 1.5rem}
.field label,legend,.radio-row label{font-size:1rem;line-height:1.5}
.field label span,legend span,.field-hint,.form-notice,#form-result{font-size:.875rem;line-height:1.55}
input:not([type=radio]),textarea{font-size:1rem;line-height:1.5}
.contact-copy dt{font-size:.875rem;line-height:1.5}
thead th{font-size:.875rem;line-height:1.5}
tbody th{font-size:1.5rem;line-height:1.3}
td{font-size:1rem;line-height:1.55}
@media(max-width:1100px){:root{--space:5rem}}
/* Collapse navigation before the wider font pair crowds the wordmark. */
@media(max-width:1000px){
 .site-header{position:relative;gap:1rem}
 .menu-toggle{display:flex;align-items:center;gap:1rem;border:1px solid var(--line);background:none;padding:.55rem .8rem;color:var(--ink);font-size:.875rem;min-height:44px;border-radius:2px;flex-shrink:0}
 .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border:1px solid var(--line);padding:1.3rem;z-index:10;box-shadow:0 12px 24px #0000000c;align-items:stretch;gap:0}
 .site-header nav.is-open{display:flex;flex-direction:column}
 .site-header nav a{padding:.7rem;font-size:1rem}
 .nav-contact{margin-top:.7rem}
}
@media(max-width:760px){
 :root{--space:3.75rem;--gutter:1.5rem}
 .hero-copy h1{font-size:clamp(2.625rem,8vw,3.5rem)}
 
 .hero-portrait figcaption{left:-.5rem;max-width:calc(100% + .5rem);padding:1rem 1.2rem}
 .hero-portrait figcaption span{font-size:1.375rem}
 .hero-portrait figcaption small{max-width:25ch}
 .brand>span{font-size:1.875rem}
 .brand small{font-size:.5rem;letter-spacing:.06em}
 .menu-toggle{gap:.5rem;padding:.55rem .65rem}
 .support-grid h3{margin:0 0 1rem}
 .section-heading{margin-bottom:2rem}
 .split>div>h2{margin-bottom:1.5rem}
 .footer-top>p{font-size:1.5rem}
 .table-wrap{margin-right:0;padding-right:0}
 .fees-notes{gap:1.5rem}
}

/* Simplified homepage hero: one heading size and one description size. */
.hero{padding-bottom:5rem}
.hero-portrait{margin-bottom:0}
.hero-copy .lead,.hero-copy>p:not(.eyebrow):not(.lead){font-size:1.5rem;line-height:1.4;max-width:48ch}
@media(min-width:1101px){.hero-copy h1{font-size:4.5rem}}
@media(max-width:1100px){.hero{padding-bottom:4rem}}
@media(max-width:760px){
 .hero{padding-bottom:3.75rem}
 .hero-copy .lead,.hero-copy>p:not(.eyebrow):not(.lead){font-size:1.25rem}
}

/* Keep the homepage introduction paragraphs at one reading size. */
.intro .large-copy,.intro .split>div>p{font-size:1.125rem;line-height:1.6}

/* Softer actions and a single, balanced hero introduction. */
.button,.nav-contact,.menu-toggle{border-radius:1rem;gap:.5rem}
.button{justify-content:center}
.text-link{gap:.5rem}
.hero-copy>p:not(.eyebrow):not(.lead){color:var(--ink);max-width:38ch}
.hero-portrait figcaption small{max-width:none;color:var(--ink);text-wrap:balance}
@media(min-width:761px){
 .hero-copy{align-self:center}
 .hero-portrait{width:100%;max-width:26.25rem;justify-self:end;align-self:center}
 .hero-portrait img{height:clamp(380px,33vw,470px)}
}


/* Home and About share three editorial sizes; hero description retains 24px. */
.type-system{--type-display:clamp(2.625rem,5vw,4.5rem);--type-heading:clamp(1.75rem,2.6vw,2rem);--type-body:1.125rem}
.type-system h1,.type-system .hero-copy h1,.type-system .closing h2{font-size:var(--type-display);line-height:1.12}
.type-system h2,.type-system h3{font-size:var(--type-heading);line-height:1.25}
.type-system p,.type-system .large-copy,.type-system .eyebrow,.type-system .about-photo figcaption,.type-system .index,.type-system .closing>p:last-child{font-size:var(--type-body);line-height:1.6}
.type-system .eyebrow{text-transform:none;letter-spacing:0;font-weight:500}
.type-system .hero-copy>p{font-size:1.5rem;line-height:1.4}
.type-system .about-intro h1{max-width:1150px;text-wrap:balance}
.type-system .about-intro h1>span{display:block}
.type-system .about-intro h1>span+span{margin-top:.3em}
.type-system .about-intro h1 em{display:inline;margin:0}
.type-system .about-photo{position:static;align-self:start}
.type-system .about-photo img{aspect-ratio:2/3;height:auto;object-fit:contain;object-position:center;border-radius:46% 46% 2px 2px}
.type-system .about-photo figcaption{color:var(--ink)}
@media(max-width:760px){.type-system .hero-copy>p{font-size:1.25rem}}

/* Header round: solid green bar, placeholder logo, animated nav underline. */
.site-header{border-bottom:0;padding-block:1rem;color:var(--paper);border-image:linear-gradient(var(--ink) 0 0) fill 0//0 100vmax}
.site-header :focus-visible{outline-color:var(--accent)}
.site-header .brand{width:10rem;height:4rem;flex-shrink:0;border:1px solid color-mix(in srgb,var(--paper) 45%,transparent);border-radius:var(--radius);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--paper) 28%,transparent) 0 1px,transparent 1px 9px)}
.site-header .brand>*{display:none}
.site-header nav{font-weight:500}
.site-header nav a:not(.nav-contact){position:relative;text-decoration:none}
.site-header nav a:not(.nav-contact):after{content:'';position:absolute;left:0;right:0;bottom:-.3rem;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.site-header nav a[aria-current=page]:not(.nav-contact):after{transform:scaleX(1)}
.site-header nav .nav-contact{min-height:40px;padding:0 1.25rem;border:0;border-radius:4px;background:var(--paper);color:var(--ink);transition:background-color .2s ease}
.site-header .menu-toggle{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 45%,transparent);font-weight:500}
@media(hover:hover) and (pointer:fine){
 .site-header nav a:not(.nav-contact):hover{text-decoration:none}
 .site-header nav a:not(.nav-contact):hover:after{transform:scaleX(1)}
 .site-header nav .nav-contact:hover{background:var(--accent)}
 .site-header .menu-toggle:hover{background:color-mix(in srgb,var(--paper) 12%,transparent)}
}
@media(max-width:1000px){
 .site-header nav{left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));padding-inline:calc(var(--gutter) - .7rem);background:var(--ink);border:0;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent);box-shadow:0 12px 24px #0000001f}
 .site-header nav a:not(.nav-contact){align-self:flex-start}
 .site-header nav a:not(.nav-contact):after{left:.7rem;right:.7rem;bottom:.45rem}
 .site-header nav .nav-contact{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.site-header nav a:after{transition:none}}

/* One 4px corner for every control; outline secondary button. */
:root{--radius:4px}
.button,.nav-contact,.menu-toggle{border-radius:var(--radius)}
.button-outline{background:transparent;color:var(--ink);border-color:var(--ink)}

/* Section rhythm: tinted approach band, then a soft accent-tint closing above the green footer. */
.approach{border-block:0;border-image:linear-gradient(var(--surface) 0 0) fill 0//0 100vmax}
.closing{--closing-bg:color-mix(in srgb,var(--accent) 20%,var(--paper));border-image:linear-gradient(var(--closing-bg) 0 0) fill 0//0 100vmax}

/* Portrait caption joins the shared scale: body size greeting, 16px supporting line. */
.type-system .hero-portrait figcaption span{font-size:var(--type-body);line-height:1.4}
.type-system .hero-portrait figcaption small{font-size:1rem;line-height:1.5}

/* Hero refinements: true semicircle arch, 4px caption card, clearer greeting, lead scales with the display size. */
.hero-portrait img,.hero-portrait:before{border-radius:999px 999px var(--radius) var(--radius)}
.hero-portrait figcaption{border-radius:var(--radius)}
.type-system .hero-portrait figcaption span{font-style:normal}
@media(min-width:761px){.type-system .hero-copy>p:not(.eyebrow):not(.lead){font-size:clamp(1.25rem,1.67vw,1.5rem)}}
.type-system .about-photo img{border-radius:999px 999px var(--radius) var(--radius)}

/* Support points: numbers in solid Ink circles to lead the eye across the three areas. */
.support-grid .index{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:1rem;line-height:1;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
.support-grid h3{margin-top:1.5rem}
@media(max-width:760px){
 .support-grid article{padding-left:4.25rem}
 .support-grid .index{top:1.5rem;width:2.75rem;height:2.75rem}
 .support-grid h3{margin-top:0;padding-top:.45rem}
}

/* Equal space above and below the support divider. */
.support-grid article{padding-top:3rem}
@media(max-width:760px){
 .support-grid article{padding-top:1.5rem}
 .section-heading:has(+.support-grid){margin-bottom:1.5rem}
}

/* Homepage editorial grid: intro and approach share the support grid's three columns.
   Eyebrow in column one; heading and copy span columns two and three, aligned with point 02. */
@media(min-width:761px){
 .intro .split,.approach{grid-template-columns:repeat(3,1fr);column-gap:3.5rem;align-items:start}
 .intro .split>div,.approach>div{grid-column:span 2}
 .approach>div>h2{margin-bottom:1.5rem}
 .approach>div>p{max-width:65ch}
}
@media(min-width:761px) and (max-width:1000px){.intro .split,.approach{column-gap:2rem}}

/* Playfair Display at its designed spacing: negative tracking crowded letters and switched off its fi/fl ligatures. */
h1,h2,h3,summary,.hero-copy h1,.page-intro h1,.closing h2,.type-system h1,.type-system h2,.type-system h3{letter-spacing:0;font-variant-ligatures:common-ligatures}

/* Footer: same striped logo placeholder as the header; tagline on one line in body-size italic. */
.footer-top .brand{width:10rem;height:4rem;flex-shrink:0;border:1px solid color-mix(in srgb,var(--paper) 45%,transparent);border-radius:var(--radius);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--paper) 28%,transparent) 0 1px,transparent 1px 9px)}
.footer-top .brand>*{display:none}
.footer-top>p{font-family:var(--display);font-style:italic;font-size:var(--type-body,1.125rem);line-height:1.4;align-self:flex-start}

/* About: a centred opening statement, then a narrower two-column bio.
   One body colour and two sizes in the bio: Playfair heading, DM Sans text. */
.about-intro{text-align:center;padding-bottom:clamp(4.5rem,10vw,8rem);border-bottom:0}
.type-system .about-intro h1{margin-inline:auto}
.type-system .about-intro h1>span+span{margin-top:.15em}
.about-grid{padding-top:0;align-items:center}
.type-system .prose>p{color:var(--ink)}
.about-grid .prose>p{max-width:none}
@media(min-width:761px){
 .about-grid{max-width:60rem;grid-template-columns:5fr 7fr;column-gap:clamp(2.5rem,5vw,4.5rem)}
}

/* About scanning aids: semibold key facts, medium-weight inline links (as .text-link). */
.type-system .prose strong{font-weight:600;color:var(--ink)}
.type-system .prose p a{font-weight:500;color:var(--ink)}

/* The homepage's accent arch, offset behind the About portrait. */
.type-system .about-photo{position:relative;padding:0 1.25rem 1.25rem 0}
.about-photo:before{content:'';position:absolute;right:0;bottom:0;width:90%;height:85%;background:var(--accent);border-radius:999px 999px var(--radius) var(--radius)}
.about-photo img{position:relative}

/* About opening: first sentence leads at display size; second supports at heading size. */
.type-system .about-intro h1>span+span{font-size:var(--type-heading);line-height:1.3;margin-top:1.25rem}
/* The CTA in the header never takes the menu-link underline. */
.site-header nav .nav-contact,.site-header nav .nav-contact:hover{text-decoration:none}

/* Services joins the shared type system: display, heading and body sizes, 16px only for controls.
   Intro paragraph matches the homepage hero description. */
.type-system .page-intro .lead{font-size:1.25rem;line-height:1.4;color:var(--ink);max-width:48ch}
@media(min-width:761px){.type-system .page-intro .lead{font-size:clamp(1.25rem,1.67vw,1.5rem)}}

/* Two-column sections on Home, About and Services share the support grid's three columns. */
@media(min-width:761px){
 .type-system .split{grid-template-columns:repeat(3,1fr);column-gap:3.5rem;align-items:start}
 .type-system .split>:last-child{grid-column:span 2}
}
@media(min-width:761px) and (max-width:1000px){.type-system .split{column-gap:2rem}}

/* Service list: circled numbers as on the homepage; name and description span two columns; tag beneath. */
.type-system .service-list .index{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:1rem;line-height:1;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
.type-system .service-list h2{font-size:var(--type-heading);margin-bottom:1rem}
.type-system .service-list p{color:var(--ink)}
.type-system .service-tag{font-size:var(--type-body);color:var(--muted);text-align:left}
@media(min-width:761px){
 .type-system .service-list article{grid-template-columns:repeat(3,1fr);column-gap:3.5rem;row-gap:1rem;align-items:start;padding-block:3rem}
 .type-system .service-list article>div,.type-system .service-tag{grid-column:2/span 2}
}
@media(min-width:761px) and (max-width:1000px){.type-system .service-list article{column-gap:2rem}}
@media(max-width:760px){
 .type-system .service-list article{grid-template-columns:2.75rem 1fr;column-gap:1.25rem}
 .type-system .service-list .index{width:2.75rem;height:2.75rem}
 .type-system .service-list h2{padding-top:.3rem}
}

/* Topics and scope: body size, one colour. */
.type-system .topic-list li{font-size:var(--type-body);color:var(--ink)}
.type-system .scope-note h3{font-size:var(--type-body)}
.type-system .scope-note p{color:var(--ink)}

/* Fees: body-size table and notes; prices in SemiBold so they scan first. */
.type-system thead th{font-size:var(--type-body);font-weight:500}
.type-system tbody th{font-family:var(--body);font-size:var(--type-body);font-weight:500;line-height:1.55}
.type-system td{font-size:var(--type-body)}
.type-system td:nth-child(n+3){font-weight:600}
.type-system .fees-notes{font-size:var(--type-body);color:var(--ink)}
.type-system .section-heading>p{font-size:var(--type-body)}

/* Fees: supporting line sits under the heading; session hours live in the price column headers;
   the remaining notes become tinted cards. */
.type-system .section-heading:has(>p){display:block}
.type-system .section-heading:has(>p)>p{margin-top:1rem}
.type-system thead th{vertical-align:top}
.th-note{display:block;font-weight:400;margin-top:.25rem}
.type-system .fees-notes{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
.type-system .fees-notes p{background:var(--surface);border-radius:var(--radius);padding:1.5rem 1.75rem}
.type-system .fees-notes strong{display:block;margin-bottom:.5rem}
@media(max-width:760px){.type-system .fees-notes{grid-template-columns:1fr;gap:1rem}}

/* Pricing reads as its own centred moment: heading group centred, price columns centred under their times. */
.type-system .section-heading:has(>p){text-align:center}
.type-system thead th:nth-child(n+3),.type-system td:nth-child(n+3){text-align:center}

/* Separator bullets: a full bullet with room either side, hidden from screen readers. */
.sep{display:inline-block;margin-inline:.3em}

/* FAQs joins the shared system: three-column grid, heading-size questions, circled numbers,
   answers aligned under the question text in Ink. */
@media(min-width:761px){
 .type-system .faq-layout{grid-template-columns:repeat(3,1fr);column-gap:3.5rem}
 .type-system .faq-layout>.accordion{grid-column:span 2}
}
@media(min-width:761px) and (max-width:1000px){.type-system .faq-layout{column-gap:2rem}}
.type-system .faq-layout>div:first-child>p:not(.eyebrow){color:var(--ink)}
.type-system summary{font-size:var(--type-heading);line-height:1.3;align-items:center}
.type-system summary .index{display:inline-grid;place-items:center;flex-shrink:0;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:1rem;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.type-system .answer{color:var(--ink);padding:0 0 2rem 4.5rem}
@media(max-width:760px){
 .type-system summary .index{width:2.75rem;height:2.75rem}
 .type-system .answer{padding-left:3.75rem}
}

/* FAQ questions lead with the open/close icon instead of numbers; answers align under the question text. */
.type-system summary{gap:1.25rem}
.type-system summary .plus{margin-left:0;width:1.5rem;justify-content:center;flex-shrink:0}
.type-system summary .plus .icon{width:1.5rem;height:1.5rem}
.type-system .answer{padding-left:2.75rem}
@media(max-width:760px){.type-system summary{gap:1rem}.type-system .answer{padding-left:2.5rem}}

/* Calmer button feedback: one colour change plus the arrow nudge; no lift or hard shadow.
   Outline buttons respond more quietly than primary ones. A slight press acknowledges clicks. */
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:none;box-shadow:none}
 .button-outline:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
}
.button-outline:focus-visible{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.button:active,.site-header nav .nav-contact:active{transform:scale(.98);transition-duration:.08s}
.site-header nav .nav-contact{transition:background-color .2s ease,transform .2s ease}
@media(prefers-reduced-motion:reduce){.button:active,.site-header nav .nav-contact:active{transform:none}}

/* Contact joins the shared system: grid, sizes, one text colour, 4px corners.
   Form controls stay 16px (the size that stops iOS zooming into fields). */
@media(min-width:761px){
 .type-system .contact-grid{grid-template-columns:repeat(3,1fr);column-gap:3.5rem;align-items:start}
 .type-system .contact-grid>.enquiry-form{grid-column:span 2}
}
@media(min-width:761px) and (max-width:1000px){.type-system .contact-grid{column-gap:2rem}}
.type-system .contact-copy>p,.type-system dd{color:var(--ink)}
.type-system .contact-copy strong{font-weight:600}
.type-system dt{font-size:var(--type-body);font-weight:500;text-transform:none;letter-spacing:0}
.enquiry-form{border-radius:var(--radius)}
input:not([type=radio]),textarea{border-radius:var(--radius)}
.type-system .form-notice{border-radius:var(--radius);font-size:1rem}
.form-required{font-size:1rem;margin-bottom:1.5rem}
.type-system .field-hint{font-size:1rem;color:var(--muted)}
.type-system .enquiry-form p{font-size:1rem;line-height:1.55}
/* More air between the contact details and the form; the form keeps its grid line. */
@media(min-width:761px){.type-system .contact-copy{padding-right:clamp(1rem,3vw,2.5rem)}}
/* Contact details: lines under each label start where the label text starts (after its icon). */
.type-system .contact-copy dd{padding-left:1.5rem}
/* Exact alignment: icon 20px + 8px gap = 28px, matched by the detail indent. */
.type-system .contact-copy dt{display:flex;align-items:center;gap:.5rem}
.type-system .contact-copy dt .icon{margin:0}
.type-system .contact-copy dd{padding-left:1.75rem}

/* Homepage label above the headline uses the shared eyebrow size, not the hero description size. */
.type-system .hero-copy>p.eyebrow{font-size:var(--type-body);line-height:1.6;margin-bottom:1rem}

/* Gentle brightness lift on Julie's portrait (Home and About) until an edited, lighter photo is supplied.
   The source file is untouched; remove this rule when the edited photo arrives. */
.hero-portrait img,.about-photo img{filter:brightness(1.1)}

/* Floating WhatsApp button: Ink circle with a Paper icon, bottom right, clear of the phone's home bar.
   A label appears beside it on hover or keyboard focus. */
.wa-fab{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:50;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--ink);color:var(--paper);text-decoration:none;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 28%,transparent);transition:background-color .2s ease,color .2s ease}
.wa-fab .icon{width:1.75rem;height:1.75rem}
.wa-label{position:absolute;right:calc(100% + .75rem);top:50%;transform:translateY(-50%);white-space:nowrap;padding:.5rem .85rem;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:1rem;font-weight:500;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s ease}
.wa-fab:focus-visible .wa-label{opacity:1}
@media(hover:hover) and (pointer:fine){
 .wa-fab:hover{background:var(--accent);color:var(--ink)}
 .wa-fab:hover .wa-label{opacity:1}
}
/* Keep the footer's last line clear of the button. */
.footer{padding-bottom:5rem}
@media print{.wa-fab{display:none}}
@media(prefers-reduced-motion:reduce){.wa-fab,.wa-label{transition:none}}
/* WhatsApp's own brand green so the button is recognisable at a glance; white icon. */
.wa-fab{--whatsapp:#25D366;--whatsapp-dark:#1DA851;background:var(--whatsapp);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 30%,transparent)}
@media(hover:hover) and (pointer:fine){.wa-fab:hover{background:var(--whatsapp-dark);color:#fff}}

/* Mobile: the homepage hero is centred above the centred portrait. */
@media(max-width:760px){
 .hero-copy{text-align:center}
 .hero-copy>p{margin-inline:auto}
 .hero .actions{justify-content:center}
}
@media(max-width:760px){
 .hero .actions{flex-direction:column;align-items:center;gap:1rem}
 .hero .actions .button{width:100%;max-width:20rem}
 .hero-copy>p.eyebrow{text-wrap:balance}
}

/* Palette option: jade leads; the accent is the pink of Julie's blouse in her portrait. */
:root[data-theme=pink]{--paper:#fffaf5;--surface:#eef1ec;--ink:#164f43;--muted:#4d655d;--accent:#f2afc0;--line:#cdd6cf;--button:#164f43;--button-ink:#fffaf5}

/* Review-only palette switcher, bottom left. Remove before launch. */
.palette-switch{position:fixed;left:max(1rem,env(safe-area-inset-left,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:.25rem;padding:.3rem .3rem .3rem .75rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 18%,transparent);font-size:.875rem;line-height:1.3}
.palette-switch span{font-weight:500;margin-right:.25rem}
.palette-switch button{font:inherit;font-weight:500;color:var(--ink);background:transparent;border:0;border-radius:3px;padding:.4rem .65rem;cursor:pointer;min-height:2.25rem}
.palette-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
@media(hover:hover) and (pointer:fine){.palette-switch button[aria-pressed=false]:hover{background:var(--surface)}}
@media print{.palette-switch{display:none}}