/* ==========================================================================
   Erada Digital — shared components. Design files below override tokens.
   ========================================================================== */
:root {
	--pr: var(--wp--preset--color--primary);
	--pr2: var(--wp--preset--color--primary-2);
	--ac: var(--wp--preset--color--accent);
	--act: var(--wp--preset--color--accent-text);
	--ink: var(--wp--preset--color--ink);
	--mu: var(--wp--preset--color--muted);
	--so: var(--wp--preset--color--soft);
	--li: var(--wp--preset--color--line);
	--mi: var(--wp--preset--color--mid);
	--wh: var(--wp--preset--color--surface);
	--bg: var(--wp--preset--color--base);
	--cw: 1200px;
	--sec-y: clamp(3.5rem, 7vw, 6.5rem);
	--r-card: 8px;
	--r-btn: 6px;
	--r-chip: 999px;
	--f-head: var(--wp--preset--font-family--heading);
	--f-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--dark-bg: var(--pr);
	--dark-fg: #fff;
	--hero-bg: var(--so);
	--hero-fg: var(--ink);
	--cta-bg: var(--pr);
	--cta-fg: #fff;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a { text-underline-offset: .18em; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }

/* ---------- Illustrations: colours follow the active design ---------- */
.ill { margin: 0; }
.ill svg, .ill img { display: block; width: 100%; height: auto; }
.wp-block-image.ill { margin: 0; }
.c-pr { fill: var(--pr); } .c-ac { fill: var(--ac); } .c-so { fill: var(--so); }
.c-li { fill: var(--li); } .c-mi { fill: var(--mi); } .c-wh { fill: var(--wh); }
.s-pr { stroke: var(--pr); } .s-ac { stroke: var(--ac); } .s-li { stroke: var(--li); }
.s-mi { stroke: var(--mi); } .s-wh { stroke: var(--wh); }
.sec--soft .ill rect.c-so:first-child, .card .ill rect.c-so:first-child { fill: var(--bg); }
.sec--soft .card .ill rect.c-so:first-child { fill: var(--so); }

/* ---------- Sections ---------- */
.sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.sec--plain { padding-top: clamp(2.5rem, 5vw, 4rem); }
.sec--soft { background: var(--so); }
.sec--dark { background: var(--dark-bg); color: var(--dark-fg); }
.sec--hero { background: var(--hero-bg); color: var(--hero-fg); padding-top: clamp(3rem, 6vw, 5.5rem); }
.sec--page { background: var(--hero-bg); color: var(--hero-fg); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.sec--cta { background: var(--cta-bg); color: var(--cta-fg); text-align: center; }
.sec--dark :where(h1, h2, h3), .sec--cta :where(h1, h2, h3), .sec--hero :where(h1, h2, h3), .sec--page :where(h1, h2, h3) { color: inherit; }
.wp-block-post-content > .sec, .wp-block-post-content > .wp-block-group.alignfull { margin-block-start: 0; margin-block-end: 0; }
.sec--sol, .sec--case { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 5rem; }

/* Text blocks sit on the left of the content column with a readable width */
.sec.is-layout-constrained > p,
.sec.is-layout-constrained > .wp-block-heading {
	max-width: min(44rem, 100%);
	margin-left: max(0px, calc((100% - var(--cw)) / 2)) !important;
	margin-right: auto !important;
}
.sec.is-layout-constrained > .wp-block-heading { max-width: min(36rem, 100%); }
.sec.is-layout-constrained > h1.wp-block-heading { max-width: min(52rem, 100%); }
.sec.sec--cta.is-layout-constrained > *, .sec.sec--cta.is-layout-constrained > .wp-block-heading, .sec.sec--cta.is-layout-constrained > p { margin-left: auto !important; margin-right: auto !important; }
.sec--cta .wp-block-buttons, .wp-block-buttons.center { justify-content: center; }
.wp-block-buttons.center { margin-top: 2.5rem; }

/* ---------- Type ---------- */
:where(h1, h2, h3, .stat__num) { font-family: var(--f-head); }
h1.wp-block-heading { font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: 1.04; margin-block: .35em .4em; }
h2.wp-block-heading { font-size: clamp(1.75rem, 3.3vw, 2.6rem); line-height: 1.12; margin-block: .2em .45em; }
h3.wp-block-heading { font-size: 1.15rem; line-height: 1.3; }
h3.wp-block-heading a { color: inherit; text-decoration: none; }
h3.wp-block-heading a:hover { color: var(--act); }
.eyebrow { font-family: var(--f-mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--act); margin: 0; }
.sec--dark .eyebrow, .sec--cta .eyebrow { color: var(--ac); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--mu); }
.sec--hero .lead, .sec--page .lead { color: inherit; opacity: .86; }
.sec--dark .lead, .sec--dark p, .sec--cta .lead { color: inherit; }
.small { font-size: .92rem; color: var(--mu); }
.stop { color: var(--ac); }

/* ---------- Columns ---------- */
.hero-cols, .split { gap: clamp(2rem, 5vw, 4.5rem) !important; align-items: center; }
.split--top { align-items: flex-start; }
.hero-cols .wp-block-buttons, .split .wp-block-buttons { margin-top: 2rem; }

/* ---------- Cards ---------- */
.wp-block-group.cards, .wp-block-group.whys, .wp-block-group.stats { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.25rem; }
.card { background: var(--wh); border: 1px solid var(--li); border-radius: var(--r-card); padding: clamp(1.25rem, 2vw, 1.75rem); }
.card > * { margin-block-start: .6rem; }
.card > :first-child { margin-block-start: 0; }
.card h3 { margin-block: .7rem .35rem; }
.card p { color: var(--mu); font-size: .96rem; line-height: 1.6; }
.card--sol { padding: .75rem .75rem 1.5rem; }
.card--sol > :not(.wp-block-html, figure) { padding-inline: .75rem; }
.card--sol .ill { border-radius: calc(var(--r-card) - 2px); overflow: hidden; }
.step__num { font-family: var(--f-mono); font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--act); margin: 0; }
.tag { display: inline-block; font-size: .76rem; font-weight: 600; padding: .25rem .7rem; border-radius: var(--r-chip); background: var(--so); color: var(--ink); margin: 0 !important; }
.sec--soft .tag { background: var(--wh); }
.metric { font-weight: 700; color: var(--act) !important; font-size: .9rem !important; margin-top: 1rem !important; }
.metric::before { content: ""; display: inline-block; width: .5rem; height: .5rem; background: var(--ac); border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.more a { font-weight: 600; color: var(--act); text-decoration: none; }

/* ---------- Stats ---------- */
.sec--stats { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--li); }
.sec--stats .stats { margin-top: 0; }
.stat > * { margin: 0; }
.stat__num { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.1; color: var(--ink); }
.stat__label { color: var(--mu); font-size: .95rem; margin-top: .35rem !important; }

/* ---------- Chips ---------- */
.wp-block-group.chips { gap: .55rem; margin-top: 1.5rem; }
.chip { margin: 0 !important; padding: .5rem .95rem; border: 1px solid var(--li); background: var(--wh); border-radius: var(--r-chip); font-size: .9rem; font-weight: 500; line-height: 1.3; }
.chip::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ac); margin-right: .55rem; vertical-align: middle; }
.chip--link a { color: inherit; text-decoration: none; }
.chip--link:hover { border-color: var(--pr); }
.sec--hero .chip, .sec--page .chip { background: transparent; border-color: color-mix(in srgb, currentColor 25%, transparent); }

/* ---------- Lists with ticks ---------- */
ul.checks { list-style: none; padding-left: 0; margin-top: 1.25rem; }
ul.checks li { position: relative; padding-left: 1.85rem; margin: .55rem 0; line-height: 1.5; }
ul.checks li::before { content: ""; position: absolute; left: .35rem; top: .28em; width: .4rem; height: .75rem; border: solid var(--act); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sec--dark ul.checks li::before { border-color: var(--ac); }
.tools { font-size: .92rem; color: var(--mu); margin-top: 1.25rem; }
.tools strong { color: var(--ink); }

/* ---------- Feature points ---------- */
.why > * { margin-block-start: .5rem; }
.why h3 { margin-block: .9rem .3rem; }
.why p { color: var(--mu); font-size: .95rem; line-height: 1.6; margin: 0; }
.icon { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: var(--r-card); background: var(--so); color: var(--pr); }
.icon svg { width: 1.45rem; height: 1.45rem; }
.sec--soft .icon { background: var(--wh); }

/* ---------- Case studies ---------- */
.case__h { font-size: .8rem !important; font-family: var(--f-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--act); margin-block: 2rem .5rem !important; }
.case__aside { background: var(--wh); border: 1px solid var(--li); border-radius: var(--r-card); padding: 1rem 1rem 1.5rem; }
.case__aside > :not(.wp-block-html) { padding-inline: .5rem; }
.case__aside .ill { border-radius: calc(var(--r-card) - 2px); overflow: hidden; }
.case__aside .ill rect.c-so:first-child { fill: var(--so) !important; }
.wp-block-group.case__scale { margin-top: 1.25rem; gap: 1rem; }
.case__scale .stat__num { font-size: 1.75rem; }
.aside__label { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); margin-top: 1.4rem !important; margin-bottom: .25rem !important; }
.case__aside p:not(.aside__label):not(.stat__num):not(.stat__label) { margin-top: 0; font-size: .96rem; }

/* ---------- About ---------- */
.avatar-img { width: min(240px, 70%); margin: 0; position: relative; }
.avatar-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); }
.founder__name { font-family: var(--f-head); font-weight: 700; font-size: 1.3rem; margin-top: 1.25rem; margin-bottom: 0; }
.founder__role { color: var(--mu); margin-top: .2rem; }

/* ---------- Header ---------- */
/* The header stays at the top while scrolling. The sticky element is the template-part wrapper,
   which is a direct child of the page, so it can travel the full page height. No backdrop-filter here:
   it would trap the phone menu overlay inside the header bar. */
/* :has() also catches a header saved in the Site Editor without the wrapper class */
.site-header-wrap, .wp-site-blocks > :has(> .site-header) { position: sticky; top: 0; z-index: 100; }
.admin-bar .site-header-wrap, .admin-bar .wp-site-blocks > :has(> .site-header) { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .site-header-wrap, .admin-bar .wp-site-blocks > :has(> .site-header) { top: 0; } }
.site-header { position: relative; backdrop-filter: none !important; }
.site-header { background: var(--bg); border-bottom: 1px solid var(--li); transition: box-shadow .2s ease; }
.is-scrolled > .site-header { box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .35); }
.site-header__bar { min-height: 76px; gap: 1rem; }
.site-header__right { gap: 1.5rem; }
.site-nav { font-size: .95rem; font-weight: 500; gap: 1.6rem; }
.site-nav a { text-decoration: none; }
.site-nav .wp-block-navigation-item__content:hover { color: var(--act); }
.site-nav .current-menu-item > a, .site-nav a[aria-current="page"] { color: var(--act); }
.header-cta .wp-block-button__link { padding: .6rem 1.1rem; font-size: .9rem; }
@media (max-width: 860px) { .site-header .wp-block-buttons.header-cta { display: none !important; } }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--bg) !important; color: var(--ink) !important; padding: 1.5rem max(1.25rem, env(safe-area-inset-right, 0px)) 2rem max(1.25rem, env(safe-area-inset-left, 0px)); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; font-size: 1.3rem; font-weight: 600; width: 100%; align-items: stretch; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--li); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding: .9rem 0; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--ink); }
.wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; line-height: 1; }
.logo svg { display: block; flex: none; }
.logo__text { display: inline-flex; flex-direction: column; }
.site-footer .logo { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--foot-bg, var(--pr)); color: color-mix(in srgb, #fff 78%, transparent); padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 2rem; font-size: .93rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-cols { gap: 2.5rem !important; }
.footer-tagline { color: #fff; font-family: var(--f-head); font-weight: 600; margin-top: 1.25rem; }
.footer-about { max-width: 22rem; line-height: 1.6; }
.footer-h { color: #fff; font-size: .78rem !important; font-family: var(--f-mono) !important; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-links, .contact-details { list-style: none; padding: 0; margin: 0; }
.footer-links li, .site-footer .contact-details li { margin: .55rem 0; }
.footer-legal { border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); padding-top: 1.5rem; margin-top: 3rem; font-size: .84rem; opacity: .75; }

/* ---------- Contact ---------- */
.contact-details li { position: relative; padding-left: 1.6rem; margin: .7rem 0; }
.contact-details li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ac); }
.form-card { background: var(--wh); border: 1px solid var(--li); border-radius: var(--r-card); padding: clamp(1.25rem, 3vw, 2.25rem); }
.erada-form { display: grid; gap: 1.1rem; }
.erada-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .erada-form .f-row { grid-template-columns: 1fr; } }
.erada-form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 600; }
.erada-form input, .erada-form select, .erada-form textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: .75rem .9rem; border: 1px solid var(--li); border-radius: calc(var(--r-btn) + 0px); background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box; }
.erada-form input:focus, .erada-form select:focus, .erada-form textarea:focus { outline: 2px solid var(--ac); outline-offset: 1px; border-color: var(--pr); }
.erada-form .f-hp { position: absolute !important; left: -9999px; }
.erada-form .f-actions { margin: .25rem 0 0; }
.erada-form button { cursor: pointer; border: 0; }
.form-note { padding: 1rem 1.2rem; border-radius: var(--r-card); margin-bottom: 1.25rem; }
.form-note--ok { background: color-mix(in srgb, var(--ac) 16%, var(--wh)); }
.form-note--err { background: #fdecea; color: #8a1c12; }

/* ---------- Plain pages and posts ---------- */
.sec--plain .wp-block-post-title { font-size: clamp(2rem, 4vw, 3rem); }
.wp-block-post-template { list-style: none; padding: 0; display: grid; gap: 1.25rem; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.hero-cols > .wp-block-column:last-child { order: 2; }
	.sec--sol .split > .wp-block-column:has(.ill) { order: -1; max-width: 520px; }
	.case__aside { margin-top: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
	.card, .chip--link, .wp-element-button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
}

/* ---------- Blog ---------- */
.sec--posts:not(:has(.wp-block-post)) { display: none; }
.post-grid .wp-block-post-template { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.25rem; }
.card--post { padding: .75rem .75rem 1.4rem; height: 100%; box-sizing: border-box; }
.card--post > :not(.wp-block-post-featured-image) { padding-inline: .75rem; }
.card--post .wp-block-post-featured-image { margin: 0 0 .5rem; }
.card--post .wp-block-post-featured-image img { border-radius: calc(var(--r-card) - 2px); }
.card--post .wp-block-post-title { font-size: 1.15rem; line-height: 1.3; margin: .4rem 0 .2rem; }
.card--post .wp-block-post-excerpt__excerpt { color: var(--mu); font-size: .95rem; margin: 0; }
.wp-block-post-title a { color: inherit; text-decoration: none; }
.wp-block-post-title a:hover { color: var(--act); }
.post-cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.post-cat a { color: var(--act); text-decoration: none; }
.post-date { color: var(--mu); font-size: .85rem; }
.sec--page .post-cat a, .sec--page .post-date { color: inherit; opacity: .85; }
.wp-block-query-pagination { margin-top: 2.5rem; gap: 1rem; font-weight: 600; }
.wp-block-query-pagination a { text-decoration: none; }
.post-body { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.post-body .wp-block-post-featured-image { margin-bottom: 2rem; }
.post-body .wp-block-post-featured-image img { border-radius: var(--r-card); }
.post-body .wp-block-post-content { font-size: 1.08rem; line-height: 1.75; }
.post-body .wp-block-post-content :where(h2) { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2.2rem; }
.post-body .wp-block-post-content :where(h3) { margin-top: 1.8rem; }
.post-nav { border-top: 1px solid var(--li); margin-top: 3rem !important; padding-top: 1.5rem; gap: 1rem; font-weight: 600; }
.post-nav a { text-decoration: none; }
.empty-note { color: var(--mu); }
.post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)) !important; }
.sec.sec--cta .is-style-outline > .wp-block-button__link { color: var(--cta-fg); border-color: currentColor; }
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }

/* ==========================================================================
   Erada Full Stop
   ========================================================================== */
:root { --r-card: 6px; --r-btn: 6px; --r-chip: 6px; --hero-bg: var(--so); --hero-fg: var(--ink); --dark-bg: var(--pr); --cta-bg: var(--pr); --cta-fg: #fff; --foot-bg: #0A0A0A; }
:where(h1, h2, h3) { font-weight: 700; letter-spacing: -.035em; }
h1.wp-block-heading { font-size: clamp(2.6rem, 6vw, 4.9rem); line-height: .98; letter-spacing: -.045em; }
h2.dot::after { content: "."; color: var(--ac); }
.eyebrow { color: var(--ink); font-weight: 600; }
.eyebrow::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ac); margin-right: .65rem; vertical-align: .1em; }
.sec--dark .eyebrow, .sec--cta .eyebrow { color: #fff; }

/* Editorial hero: big type on warm grey, orange full stops */
.sec--hero, .sec--page { border-bottom: 1px solid var(--li); }
.sec--dark .ill--hero svg > rect:first-child { fill: #1F1E1C; }
.sec--dark .ill--hero svg > circle.c-li { fill: #2E2C29; opacity: 1; }

/* Buttons end with the orange dot */
.wp-element-button::after { content: ""; display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: var(--ac); margin-left: .65rem; vertical-align: .12em; }
.wp-block-button__link:hover { background: var(--pr2); }
:where(.sec--dark, .sec--cta) .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: #fff; color: var(--ink); }
:where(.sec--dark, .sec--cta) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--ac); color: #fff; }
.is-style-outline > .wp-block-button__link { border: 1.5px solid currentColor; }
.is-style-outline > .wp-block-button__link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
:where(.sec--dark, .sec--cta) .is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--ink); border-color: #fff; }
.header-cta .wp-element-button::after { display: none; }

/* Flat cards */
.card { border: 0; background: var(--so); }
.sec--soft .card { background: var(--wh); }
.card:hover { transform: translateY(-3px); }
.case__aside { border: 0; background: var(--so); }
.sec--soft .case__aside { background: var(--wh); }
.sec--soft .card .ill rect.c-so:first-child { fill: var(--so); }
.card .ill rect.c-so:first-child { fill: var(--wh); }
.step__num { font-family: var(--f-head); font-size: 2.1rem; font-weight: 700; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.step__num::after { content: "."; color: var(--ac); }
.tag { background: var(--ink); color: #fff; }
.stat__num { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -.04em; }
.stat__num::after { content: "."; color: var(--ac); }
.chip { background: var(--wh); }
.chip::before { border-radius: 50%; }
.icon { background: var(--ink); color: #fff; border-radius: 50%; }
.sec--soft .icon { background: var(--ink); }
.avatar-img::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--ac); }

/* CTA band with a large full stop */
.sec--cta { position: relative; overflow: hidden; }
.sec--cta::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--ac); }
@media (max-width: 900px) { .sec--cta::after { width: 140px; height: 140px; right: -50px; bottom: -50px; } }

/* Header and logo */
.site-nav a { position: relative; }
.site-nav .wp-block-navigation-item__content:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ac); text-decoration-thickness: 2px; }
.logo__word { font-family: var(--f-head); font-weight: 700; font-size: 1.6rem; letter-spacing: -.04em; }
.logo__dot { color: var(--ac); }
.logo__sub { font-size: .5rem; font-weight: 600; letter-spacing: .58em; margin-top: .2rem; padding-left: .1rem; }

/* ---- Colour layer: the red-orange from the logo carries through the page ---- */
:root { --hero-bg: #FFE9DF; --cta-bg: var(--ac); --cta-fg: var(--ink); }
.site-header { border-top: 4px solid var(--ac); }
.sec--hero, .sec--page { position: relative; overflow: hidden; border-bottom: 0; }
.sec--hero::before { content: ""; position: absolute; right: -6vw; top: 50%; transform: translateY(-50%); width: min(46vw, 640px); aspect-ratio: 1; border-radius: 50%; background: var(--ac); pointer-events: none; }
.sec--hero > * { position: relative; }
.sec--hero .ill--hero svg > rect:first-child { fill: #fff; }
.sec--hero .ill--hero svg > circle.c-li { fill: #FFD3C2; opacity: 1; }
.sec--page::after { content: ""; position: absolute; right: clamp(-80px, -4vw, -20px); bottom: clamp(-80px, -4vw, -20px); width: clamp(140px, 20vw, 260px); aspect-ratio: 1; border-radius: 50%; background: var(--ac); pointer-events: none; }
.sec--page > * { position: relative; z-index: 1; }
@media (max-width: 781px) { .sec--hero::before { width: 90vw; right: -30vw; top: auto; bottom: -10vw; transform: none; } }

/* Figures band in solid orange */
.sec--stats { background: var(--ac); border-bottom: 0; }
.sec--stats .stat__num { color: var(--ink); }
.sec--stats .stat__num::after { color: #fff; }
.sec--stats .stat__label { color: var(--ink); opacity: .85; }

/* Cards pick up the accent */
.card { background: var(--wh); border: 1px solid var(--li); }
.sec--soft .card { border-color: transparent; }
.card:hover { border-color: var(--ac); box-shadow: 0 14px 30px -20px rgba(194, 56, 15, .55); }
.card .ill rect.c-so:first-child, .sec--soft .card .ill rect.c-so:first-child { fill: var(--so); }
.case__aside { background: var(--wh); border: 1px solid var(--li); }
.icon, .sec--soft .icon { background: var(--ac); color: var(--ink); }
.tag { background: var(--ac); color: var(--ink); }
.chip { border-color: var(--li); }
.sec--hero .chip, .sec--page .chip { background: #fff; border-color: transparent; }

/* Dark band with an orange glow */
.sec--dark { position: relative; overflow: hidden; }
.sec--dark::before { content: ""; position: absolute; right: -110px; top: -110px; width: 300px; height: 300px; border-radius: 50%; background: var(--ac); pointer-events: none; }
.sec--dark > * { position: relative; }
.sec--dark .ill--hero svg > rect:first-child { fill: #262422; }

/* Call to action in solid orange with a black full stop */
.sec--cta::after { background: var(--ink); }
.sec--cta .eyebrow { color: var(--ink); }
:where(.sec--cta) .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--ink); color: #fff; }
:where(.sec--cta) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #fff; color: var(--ink); }
.sec--cta .wp-element-button::after { background: #fff; }
.sec--cta .is-style-outline > .wp-block-button__link { color: var(--ink); border-color: var(--ink); }
.sec--cta .is-style-outline > .wp-block-button__link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sec--cta .lead { opacity: .9; }

/* Footer: orange rule on top */
.site-footer { border-top: 6px solid var(--ac); }