/* Approved brand palette and type scale. Existing heading composition is retained. */
:root{--rule:#e3e3f5;--lavender-text:#565484;--stat-accent:var(--lavender-text)}

body{color:var(--text)}
h1,h2,h3{color:var(--navy)}
.approach h2,.approach h3,.footer h2{color:var(--paper)}
.site-nav,.menu-toggle,.button-outline,.person .text-link,.panel-action a,.privacy-content a,.dialog-close{color:var(--navy)}
dialog{color:var(--text)}
.stats dt,.case-details dt{color:var(--navy)}
.stat-plus{color:var(--stat-accent)}
.stats dd{color:var(--muted)}

/* Typography System v4: lead 20/18, body 16, supporting 14, CTA/navigation 15. */
.hero-description,.lead,.section-heading .lead,.work-intro .lead{font-size:20px;line-height:1.6}
.service>p,.about-intro,.bio,.case-summary,.case-details dd,.steps p,.panel-body,.essence>div,.privacy-content p{font-size:16px;line-height:1.65}
.person .role,.stats dd,.case-example-note,.case-details dt,.footer address,.footer-cvr,.footer-bottom,.privacy-trigger{font-size:14px;line-height:1.6}
.person .role{white-space:normal}
.button,.hero-actions .button,.site-nav .nav-contact,.case-expand summary{font-size:15px;line-height:1.2}
.site-nav,.person .text-link,.footer-column a{font-size:15px;line-height:1.3}
@media(max-width:767px){
  .hero-description,.lead,.section-heading .lead,.work-intro .lead{font-size:18px;line-height:1.6}
}

/* Ordinary text links share a fine underline. Navigation retains its 2px indicator. */
.panel-action a,.privacy-content a{text-decoration-thickness:1px;text-underline-offset:4px}
/* The brand statement is a section introduction, like the other leads. */
.essence>div{font-size:20px;line-height:1.6}
@media(max-width:767px){.essence>div{font-size:18px}}

/* The same response is available to touch, pen and keyboard; no hover-only action. */
.site-nav>a:not(.button):is(.is-pressed,:active,:focus-visible)::after{transform:scaleX(1)}
.button-primary:is(.is-pressed,:active){background:var(--lavender);color:var(--navy);border-color:var(--lavender)}
.button-outline:is(.is-pressed,:active){background:var(--navy);color:var(--paper);border-color:var(--navy)}
.button:is(.is-pressed,:active) .icon{transform:translateX(5px)}
.menu-toggle:is(.is-pressed,:active,:focus-visible){color:var(--lavender-text)}
.case-expand summary:is(.is-pressed,:active)>span::after,
.case-expand[open] summary>span::after{transform:scaleX(1)}
.footer-column a.is-pressed,.privacy-trigger.is-pressed,.person .text-link.is-pressed{--link-line:1;--link-arrow-x:3px;--link-arrow-y:-3px}
.footer-column a.is-pressed,.privacy-trigger.is-pressed{color:var(--lavender)}
.person .text-link.is-pressed,.panel-action a.is-pressed{color:var(--lavender-text)}
.panel-action a.is-pressed{text-decoration-color:currentColor}
.contact-email.is-pressed .icon{transform:translateX(5px)}
/* Preserve the existing visual language on tablets with an attached mouse too. */
.case-expand summary.is-hovered>span::after{transform:scaleX(1)}
.footer-column a.is-hovered,.privacy-trigger.is-hovered,.person .text-link.is-hovered{--link-line:1;--link-arrow-x:3px;--link-arrow-y:-3px}
.footer-column a.is-hovered,.privacy-trigger.is-hovered{color:var(--lavender)}
.person .text-link.is-hovered,.panel-action a.is-hovered{color:var(--lavender-text)}
.panel-action a.is-hovered{text-decoration-color:currentColor}
.contact-email.is-hovered .icon{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){
 .button:is(.is-pressed,:active) .icon,.contact-email:is(.is-pressed,.is-hovered) .icon{transform:none}
}