/* ============== THERAPY IN MARLOW — COMPONENT STYLES ==============
Styles for every macro in _includes/partials/sections.njk (+ header/footer).
Layout & spacing modelled on the Calmind reference. Colours/type come from
tokens.css — never hard-code a hex here; use the --c-* / semantic vars. */
/* ---------- HEADER / NAV ---------- */
.site-header {
position: sticky; top: 0; z-index: 60;
background: rgba(251, 246, 240, .82);
backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid transparent;
transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled { background: rgba(251,246,240,.96); border-color: var(--line); box-shadow: var(--shadow-soft); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: var(--primary); }
.brand .brand-mark { width: 38px; height: 38px; border-radius: 50% 0 50% 50%; background: linear-gradient(135deg, var(--accent), var(--c-clay-deep)); display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.brand small { display: block; font-family: var(--sans); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a { font-weight: 500; font-size: .96rem; color: var(--ink); transition: color .2s; }
.nav a:hover { color: var(--accent); }
.nav .btn { padding: 11px 22px; white-space: nowrap; }
.nav a.btn--primary, .nav a.btn--primary:hover { color: #fff; }
.nav a.btn--plum, .nav a.btn--plum:hover { color: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* Hamburger toggle — hidden on desktop */
.nav-toggle {
display: none; margin-left: auto; position: relative; z-index: 70;
width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%;
background: var(--surface); cursor: pointer; padding: 0; place-items: center;
box-shadow: var(--shadow-soft); transition: border-color .25s ease, background .25s ease;
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars i {
position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
background: var(--primary); transition: transform .34s cubic-bezier(.6,.05,.2,1), opacity .2s ease, top .34s cubic-bezier(.6,.05,.2,1);
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i { background: #fff; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
/* Mobile drawer — inert on desktop */
.mnav { display: none; }
.mnav__backdrop {
position: fixed; inset: 0; z-index: 55;
background: rgba(27, 21, 37, .42); backdrop-filter: blur(3px);
opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.mnav__panel {
position: fixed; top: 0; right: 0; z-index: 58;
width: min(86vw, 360px);
/* Height MUST track the *visible* viewport. `height:100dvh` does that;
a `min-height:100vh` (removed) is a trap on mobile — with the URL bar
showing, 100vh (large viewport) > 100dvh (current), so min-height wins,
over-sizes the panel and pushes the margin-top:auto footer BELOW the fold
(the CTA vanishes behind the URL bar). Headless has vh==dvh so it hid the
bug. 100vh first = fallback for browsers without dvh, 100dvh overrides. */
height: 100vh; height: 100dvh;
display: flex; flex-direction: column; gap: 6px;
padding: clamp(84px, 16vw, 104px) 26px 30px;
background: linear-gradient(180deg, var(--c-cream) 0%, var(--surface) 32%);
border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(58,31,92,.20);
transform: translateX(100%);
/* visibility + pointer guards belt-and-braces with html overflow-x: clip —
keeps the closed drawer out of the tab order and harmless to layout in
older browsers that don't honour overflow-x: clip. */
visibility: hidden; pointer-events: none;
transition: transform .42s cubic-bezier(.5,.02,.18,1), visibility .42s;
overflow: hidden; /* scroll moves to .mnav__links so the CTA footer stays pinned */
}
.mnav[data-open="true"] .mnav__panel { visibility: visible; pointer-events: auto; }
.mnav__eyebrow {
margin: 0 0 6px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
font-weight: 600; color: var(--accent); flex-shrink: 0;
}
/* Links scroll within the drawer so the CTA footer never leaves the viewport.
min-height:0 lets the flex child actually shrink and scroll; the small
bottom padding stops the last link butting against the pinned footer. */
.mnav__links {
list-style: none; margin: 0; padding: 0 0 6px; display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.mnav__links li { border-bottom: 1px solid var(--line); }
.mnav__links a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 17px 4px; font-size: 1.22rem; font-weight: 600; color: var(--ink);
transition: color .2s ease, padding-left .2s ease;
}
.mnav__links a svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease, stroke .2s ease; }
.mnav__links a:hover, .mnav__links a:focus-visible { color: var(--primary); padding-left: 10px; }
.mnav__links a:hover svg { transform: translateX(4px); stroke: var(--primary); }
/* Pinned action footer — always visible at the bottom of the drawer, regardless
of how many nav groups are expanded. A hairline + soft cream wash lifts it
off the scrolling links above it. */
.mnav__foot {
flex-shrink: 0; margin-top: auto;
padding: 18px 26px calc(20px + env(safe-area-inset-bottom, 0px));
margin-inline: -26px; margin-bottom: -30px; /* bleed to panel edges (26px sides, 30px bottom) so it reads as a true pinned bar */
border-top: 2px solid var(--primary);
background: var(--c-cream);
box-shadow: 0 -10px 28px rgba(58,31,92,.16);
}
.mnav__foot-note {
margin: 0 0 10px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
font-weight: 700; color: var(--primary); text-align: center;
}
.mnav__cta {
margin-top: 0; width: 100%; justify-content: center; padding: 16px;
font-size: 1.06rem; box-shadow: 0 10px 26px rgba(58,31,92,.28);
}
.mnav__call {
margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-weight: 600; font-size: 1.02rem; color: var(--primary);
}
.mnav__call svg { width: 17px; height: 17px; fill: var(--primary); }
/* Staggered link reveal once open */
.mnav__eyebrow, .mnav__links li, .mnav__cta, .mnav__call { opacity: 0; transform: translateY(14px); }
/* Mid-range: tighten the desktop bar so a full set of items stays on ONE line
instead of cramping/wrapping before the mobile drawer takes over (#10433). */
@media (max-width: 1160px) and (min-width: 941px) {
.nav { gap: 18px; }
.nav-link, .nav a { font-size: .9rem; }
.nav .btn { padding: 10px 16px; }
}
@media (max-width: 940px) {
.nav { display: none; }
.nav-toggle { display: grid; }
.mnav { display: block; }
.mnav[data-open="true"] .mnav__backdrop { opacity: 1; pointer-events: auto; }
.mnav[data-open="true"] .mnav__panel { transform: translateX(0); }
/* play the stagger only when open */
.mnav[data-open="true"] .mnav__eyebrow,
.mnav[data-open="true"] .mnav__links li,
.mnav[data-open="true"] .mnav__cta,
.mnav[data-open="true"] .mnav__call {
animation: mnavIn .5s cubic-bezier(.2,.7,.25,1) forwards;
}
.mnav[data-open="true"] .mnav__eyebrow { animation-delay: .08s; }
.mnav[data-open="true"] .mnav__links li:nth-child(1) { animation-delay: .14s; }
.mnav[data-open="true"] .mnav__links li:nth-child(2) { animation-delay: .20s; }
.mnav[data-open="true"] .mnav__links li:nth-child(3) { animation-delay: .26s; }
.mnav[data-open="true"] .mnav__links li:nth-child(4) { animation-delay: .32s; }
.mnav[data-open="true"] .mnav__cta { animation-delay: .40s; }
.mnav[data-open="true"] .mnav__call { animation-delay: .46s; }
/* tighten the brand so it never wraps mid-phrase */
.brand { font-size: 1.12rem; }
.brand small { font-size: .6rem; letter-spacing: .1em; }
}
@media (max-width: 380px) {
.brand small { display: none; }
}
@keyframes mnavIn { to { opacity: 1; transform: translateY(0); } }
body.mnav-open { overflow: hidden; }
/* The sitewide GoHighLevel chat widget (#10990) is a fixed Shadow-DOM custom
element pinned bottom-right; while the drawer is open it overlaps the pinned
CTA footer. Hide the host (display:none drops its whole shadow tree) so the
"Let's Talk" button is unobstructed; it returns when the drawer closes. */
body.mnav-open chat-widget { display: none !important; }
/* ---------- NAV DROPDOWNS + MEGA-MENU (desktop only) ---------- */
/* #10538: every sub-nav is now a FULL-WIDTH mega panel that slides down from the
header and rolls back up on close. Panels anchor to .site-header (sticky =
positioned ancestor) so left/right:0 spans the whole bar; .nav-item is static
so it no longer captures the absolute panel. Reveal = clip-path inset unrolling
downward + a small lift + fade; close-delay keeps a brief hover-intent grace. */
.nav-item.has-menu { position: static; }
.nav-link {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none;
font-weight: 500; font-size: .96rem; color: var(--ink);
transition: color .2s ease;
padding: 8px 0;
position: relative;
white-space: nowrap; /* never let a long label (e.g. "Narcissistic Abuse") wrap to 2 lines (#10433) */
}
.nav-link:hover, .nav-item.has-menu:hover .nav-link,
.nav-item.has-menu:focus-within .nav-link { color: var(--accent); }
/* Active-page indicator (#9724) — exact match = solid crimson underline,
section ancestor = softer accent underline so users see which area they're in. */
.nav-link[aria-current="page"],
.nav-link[data-current-section="true"] { color: var(--primary); font-weight: 600; }
.nav-link[aria-current="page"]::after,
.nav-link[data-current-section="true"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; border-radius: 1px;
}
.nav-link[aria-current="page"]::after { background: var(--cta); }
.nav-link[data-current-section="true"]::after { background: var(--accent); opacity: .55; }
/* Active item inside a desktop dropdown */
.nav-menu__list a[aria-current="page"],
.nav-menu__lead[aria-current="page"] {
background: rgba(81, 45, 127, .12); color: var(--primary); font-weight: 700;
}
.nav-caret { width: 10px; height: 10px; transition: transform .25s ease; opacity: .7; }
.nav-item.has-menu:hover .nav-caret,
.nav-item.has-menu:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
/* ---- Full-width sliding panel (shared by .nav-menu single + .nav-mega) ---- */
.nav-menu, .nav-mega {
position: absolute; left: 0; right: 0; top: 100%;
width: 100%;
background:
radial-gradient(120% 140% at 18% -10%, rgba(121,96,160,.10), transparent 55%),
linear-gradient(180deg, var(--surface) 0%, var(--surface-tint, #fdfbf7) 100%);
border: 0; border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 28px 60px -24px rgba(58,31,92,.42), 0 2px 0 rgba(58,31,92,.04);
opacity: 0; pointer-events: none; visibility: hidden;
transform: translateY(-8px);
/* clip-path collapsed to the top edge → unrolls downward when open (the slide-
down) and rolls back up on close (#10538). */
clip-path: inset(0 0 100% 0);
transition: clip-path .36s cubic-bezier(.22,.61,.36,1),
opacity .26s ease, transform .36s cubic-bezier(.22,.61,.36,1),
visibility .36s;
transition-delay: .14s; /* brief close-delay / hover-intent grace (#10531) */
z-index: 5;
overflow: hidden;
}
/* Hover bridge — the panel anchors to the header bottom (top:100%) so it sits
~16px below the trigger (the .wrap bottom padding). This invisible strip spans
that gap so the cursor keeps :hover travelling straight down from trigger to
panel; without it hover drops in the gap, the panel's pointer-events flip to
none (not transition-able, so instant) and it becomes hover-through during the
close-grace = "panel vanishes before I can reach it" (#11048).
It MUST hang off the TRIGGER (.nav-link is position:relative + unclipped), NOT
the panel: the panel's overflow:hidden + clip-path:inset(0) clip any pseudo-
element above its box, which silently killed the old panel-side ::before
bridge (#10509/#10531) in the #10538 full-width refactor. Only live while the
menu is open, so the closed strip never blocks clicks on content under the
sticky header. */
.nav-item.has-menu .nav-link::before {
content: ""; position: absolute; left: -10px; right: -10px; top: 100%;
height: 22px; pointer-events: none;
}
.nav-item.has-menu:hover .nav-link::before,
.nav-item.has-menu:focus-within .nav-link::before { pointer-events: auto; }
.nav-item.has-menu:hover > .nav-menu,
.nav-item.has-menu:focus-within > .nav-menu,
.nav-item.has-mega:hover > .nav-mega,
.nav-item.has-mega:focus-within > .nav-mega {
opacity: 1; pointer-events: auto; visibility: visible;
transform: translateY(0); clip-path: inset(0 0 0 0);
transition-delay: 0s; /* open immediately; only the close lingers */
}
/* JS dismiss (#10554): Escape / click-toggle adds .nav-suppress so the panel
actually closes even while keyboard focus is still on the trigger inside the
item — :focus-within alone could never close it, trapping keyboard users in
the panel. Cleared by JS on the next hover/focus/Tab-away, so the no-JS
hover/focus-within baseline is unaffected. */
.nav-item.has-menu.nav-suppress > .nav-menu,
.nav-item.has-mega.nav-suppress > .nav-mega {
opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
transform: translateY(-8px) !important; clip-path: inset(0 0 100% 0) !important;
transition-delay: 0s !important;
}
.nav-item.has-menu.nav-suppress .nav-caret { transform: none !important; }
/* Clear keyboard focus ring on nav triggers + panel links (#10554) — the UA
default 1px outline was nearly invisible against the busy purple panel. */
.nav-link:focus-visible,
.nav-menu__lead:focus-visible,
.nav-panel__feat-cta:focus-visible,
.nav-menu__list a:focus-visible {
outline: 3px solid var(--cta);
outline-offset: 2px;
border-radius: 6px;
}
/* Inner centred container — aligns panel content with the page gutters. */
.nav-panel__inner {
max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x);
display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 40px;
padding-block: 26px 32px; align-items: start;
position: relative; z-index: 1;
}
/* Decorative blobs drifting subtly behind the panel content. */
.nav-panel__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nav-panel__decor span {
position: absolute; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(121,96,160,.16), rgba(81,45,127,.05) 70%);
filter: blur(2px);
animation: navBlob 16s ease-in-out infinite;
}
.nav-panel__decor span:nth-child(1) { width: 220px; height: 220px; top: -70px; right: 8%; }
.nav-panel__decor span:nth-child(2) { width: 150px; height: 150px; bottom: -60px; left: 22%; animation-delay: -6s; animation-duration: 20s; background: radial-gradient(circle at 40% 35%, rgba(250,175,64,.12), transparent 70%); }
.nav-panel__decor span:nth-child(3) { width: 110px; height: 110px; top: 30%; left: -40px; animation-delay: -11s; animation-duration: 23s; }
@keyframes navBlob {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(14px, 18px, 0) scale(1.06); }
66% { transform: translate3d(-12px, 8px, 0) scale(.96); }
}
/* Feature aside (left) — the decorative, icon-led intro per panel. */
.nav-panel__feature {
display: flex; flex-direction: column; gap: 10px;
padding: 20px 22px; border-radius: 16px;
background: linear-gradient(160deg, rgba(81,45,127,.07), rgba(121,96,160,.03));
border: 1px solid rgba(81,45,127,.10);
position: relative; overflow: hidden;
}
.nav-panel__feature .nav-feat-icon {
width: 46px; height: 46px; border-radius: 13px; flex: none;
display: grid; place-items: center; color: #fff;
background: linear-gradient(135deg, var(--accent), var(--c-clay-deep, #5f4580));
box-shadow: 0 8px 20px -8px rgba(81,45,127,.5);
}
.nav-panel__feature .nav-feat-icon svg { width: 24px; height: 24px; }
.nav-panel__feature .nav-menu__eyebrow { margin: 4px 0 0; }
.nav-panel__feat-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.18rem; color: var(--primary); line-height: 1.2; }
.nav-panel__feat-text { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--mute); }
.nav-panel__feat-cta {
margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
font-weight: 600; font-size: .86rem; color: var(--primary);
transition: gap .2s ease, color .2s ease;
}
.nav-panel__feat-cta svg { width: 15px; height: 15px; }
.nav-panel__feat-cta:hover { gap: 12px; color: var(--accent); }
/* Columns area (right) */
.nav-panel__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 30px; }
/* Single dropdowns: a lead row spanning full width + a list that flows 2-up. */
.nav-menu .nav-panel__cols { display: block; }
.nav-menu__list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 28px; }
.nav-menu__eyebrow {
margin: 0 0 10px; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
font-weight: 700; color: var(--accent);
display: flex; align-items: center; gap: 7px;
}
.nav-menu__eyebrow svg { width: 14px; height: 14px; opacity: .8; }
.nav-panel__lead-wrap { grid-column: 1 / -1; }
.nav-menu__lead {
display: flex; align-items: center; gap: 10px; padding: 11px 13px; margin: 0 0 6px;
font-weight: 700; font-size: .96rem; color: var(--primary);
border-radius: 11px; background: linear-gradient(180deg, rgba(81,45,127,.08), rgba(81,45,127,.02));
border: 1px solid rgba(81,45,127,.08);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-menu__lead:hover { background: rgba(81,45,127,.14); color: var(--primary); transform: translateX(3px); }
.nav-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-menu__list a {
display: flex; align-items: center; gap: 11px;
padding: 7px 9px; margin: 0 -9px; border-radius: 9px;
font-size: .9rem; font-weight: 500; color: var(--ink);
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-menu__list a:hover { background: rgba(121,96,160,.13); color: var(--primary); transform: translateX(3px); }
/* Icon tile preceding each link */
.nav-ico {
width: 30px; height: 30px; flex: none; border-radius: 9px;
display: grid; place-items: center; color: var(--accent);
background: linear-gradient(160deg, rgba(121,96,160,.16), rgba(81,45,127,.06));
transition: background .18s ease, color .18s ease;
}
.nav-ico svg { width: 16px; height: 16px; }
.nav-menu__list a:hover .nav-ico { background: var(--accent); color: #fff; }
/* Active item inside a panel */
.nav-menu__list a[aria-current="page"] .nav-ico { background: var(--accent); color: #fff; }
/* Two-up location cards (Visit panel) */
.nav-menu .nav-panel__cols--visit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nav-panel__cols--visit .nav-menu__lead { margin: 0; padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 6px; }
.nav-panel__cols--visit .nav-menu__lead small { font-weight: 500; font-size: .8rem; color: var(--mute); }
@media (max-width: 1160px) and (min-width: 941px) {
.nav-panel__inner { gap: 28px; }
.nav-panel__cols { gap: 12px 22px; }
}
/* Mobile drawer accordion groups */
.mnav__group > summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 17px 4px; cursor: pointer; list-style: none;
font-size: 1.18rem; font-weight: 600; color: var(--ink);
transition: color .2s ease;
}
.mnav__group > summary::-webkit-details-marker { display: none; }
.mnav__group > summary svg {
width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
transition: transform .3s ease;
}
.mnav__group[open] > summary svg { transform: rotate(90deg); }
.mnav__group[open] > summary { color: var(--primary); }
.mnav__sub {
display: block; padding: 10px 14px 10px 18px;
font-size: 1rem; font-weight: 500; color: var(--mute);
border-left: 2px solid var(--line); margin: 0 0 0 4px;
transition: color .18s ease, border-color .18s ease, padding-left .18s ease;
}
.mnav__sub:hover, .mnav__sub:focus-visible {
color: var(--primary); border-left-color: var(--accent); padding-left: 22px;
}
.mnav__sub--lead { font-weight: 700; color: var(--primary); }
/* Flat top-level mobile-nav item (no accordion children) */
.mnav__top {
display: block; padding: 17px 4px;
font-size: 1.18rem; font-weight: 600; color: var(--ink);
transition: color .2s ease;
}
.mnav__top:hover, .mnav__top:focus-visible { color: var(--primary); }
/* Active-page indicator — mobile drawer (#9724) */
.mnav__top[aria-current="page"] { color: var(--primary); }
.mnav__sub[aria-current="page"] {
color: var(--primary); font-weight: 700;
border-left-color: var(--cta); padding-left: 22px;
}
.mnav__group[data-current-section="true"] > summary { color: var(--primary); }
/* ---------- FOOTER CRISIS RIBBON (on dark plum bg) ---------- */
.site-footer .footer-crisis {
margin: 0 0 38px; padding: 18px 22px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(204,0,48,.55);
border-left: 4px solid var(--c-crimson);
}
.site-footer .footer-crisis__lead {
margin: 0 0 10px; font-size: .92rem; color: rgba(255,255,255,.92);
}
.site-footer .footer-crisis__lead strong { color: #ffb8c4; font-weight: 700; }
.site-footer .footer-crisis__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 22px;
font-size: .94rem;
}
.site-footer .footer-crisis__list a {
color: rgba(239,230,233,.92); font-weight: 500;
transition: color .2s ease;
}
.site-footer .footer-crisis__list a:hover { color: #ffb8c4; }
.site-footer .footer-crisis__list a b { color: #ffb8c4; font-weight: 700; margin-right: 4px; }
/* ---------- FOOTER TRUST STRIP (BACP accreditation promoted above the grid) ---------- */
.site-footer .footer-trust {
display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 36px);
margin: 0 0 38px; padding: 18px clamp(18px, 2.4vw, 26px);
background: linear-gradient(180deg, rgba(184,150,90,.10), rgba(255,255,255,.04));
border: 1px solid rgba(184,150,90,.32);
border-left: 4px solid var(--c-gold, #b8965a);
border-radius: 14px;
}
.site-footer .footer-trust__bacp {
display: flex; align-items: center; gap: 14px;
padding-right: clamp(16px, 2.4vw, 26px);
border-right: 1px solid rgba(255,255,255,.14);
flex-shrink: 0;
}
.site-footer .footer-bacp__badge {
display: grid; place-items: center; width: 58px; height: 58px;
border-radius: 50%; background: #fff; color: var(--primary);
font-family: var(--sans); font-weight: 800; font-size: .86rem; letter-spacing: .04em;
box-shadow: 0 4px 14px -4px rgba(0,0,0,.4);
flex-shrink: 0;
}
.site-footer .footer-bacp__text { font-size: .82rem; line-height: 1.4; color: rgba(239,230,233,.92); }
.site-footer .footer-bacp__text b { color: #fff; font-weight: 700; font-size: .88rem; }
.site-footer .footer-trust__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 3vw, 36px);
flex: 1; min-width: 0;
font-size: .82rem; line-height: 1.5;
color: rgba(239,230,233,.78);
}
.site-footer .footer-trust__list b { color: #fff; font-weight: 600; }
@media (max-width: 720px) {
.site-footer .footer-trust {
flex-direction: column; align-items: flex-start;
gap: 16px; border-left-width: 3px;
}
.site-footer .footer-trust__bacp {
border-right: none; padding-right: 0;
padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.14);
width: 100%;
}
.site-footer .footer-trust__list { width: 100%; gap: 12px; }
}
/* ---------- FOOTER LAYOUT (3 equal cols × 2 rows) ---------- */
.site-footer .footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"brand nap-marlow nap-uxbridge"
"recovery services approach";
gap: clamp(36px, 4vw, 52px) clamp(28px, 3.2vw, 44px);
}
.footer-brand { grid-area: brand; }
.footer-nap:nth-of-type(2) { grid-area: nap-marlow; }
.footer-nap:nth-of-type(3) { grid-area: nap-uxbridge; }
.footer-nav-mirror:nth-of-type(4) { grid-area: recovery; }
.footer-nav-mirror:nth-of-type(5) { grid-area: services; }
.footer-nav-mirror:nth-of-type(6) { grid-area: approach; }
.site-footer .footer-brand .footer-about {
margin-top: 14px; margin-bottom: 22px;
max-width: 36ch; font-size: .94rem; line-height: 1.6;
color: rgba(239,230,233,.78);
}
.site-footer .footer-nap h4,
.site-footer .footer-nav-mirror h4 {
color: #fff; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em;
text-transform: uppercase; margin-bottom: 14px;
}
.site-footer .footer-nap h4 a,
.site-footer .footer-nav-mirror h4 a { color: inherit; }
.site-footer .footer-nap h4 a:hover,
.site-footer .footer-nav-mirror h4 a:hover { color: var(--c-clay); }
.site-footer .footer-col__h4-sub {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.10);
}
.site-footer .footer-nap address {
font-style: normal; line-height: 1.55;
color: rgba(239,230,233,.85); font-size: .92rem;
}
.site-footer .footer-nap address b { color: #fff; }
.site-footer .footer-nap__contact { margin-top: 10px; font-size: .92rem; line-height: 1.7; }
.site-footer .footer-nap__contact a { color: #fff; font-weight: 600; }
.site-footer .footer-nap__contact a:hover { color: var(--c-clay); }
.site-footer .footer-nav-mirror ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.site-footer .footer-nav-mirror a {
font-size: .88rem; color: rgba(239,230,233,.82);
transition: color .18s ease;
}
.site-footer .footer-nav-mirror a:hover { color: var(--c-clay); }
.site-footer .footer-bottom { flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.site-footer .footer-bottom__legal {
font-size: .78rem; color: rgba(239,230,233,.6);
max-width: 56ch; text-align: right;
}
@media (max-width: 940px) {
.site-footer .footer-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"brand brand"
"nap-marlow nap-uxbridge"
"recovery services"
"approach approach";
}
.site-footer .footer-brand .footer-about { max-width: none; }
.site-footer .footer-nav-mirror:nth-of-type(6) ul {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.site-footer .footer-bottom__legal { text-align: left; }
}
@media (max-width: 600px) {
.site-footer .footer-grid {
grid-template-columns: 1fr;
grid-template-areas:
"brand"
"nap-marlow"
"nap-uxbridge"
"recovery"
"services"
"approach";
}
.site-footer .footer-nav-mirror:nth-of-type(6) ul {
grid-template-columns: 1fr;
}
.site-footer .footer-crisis__list { flex-direction: column; gap: 8px; }
/* Social row: bigger tap targets that span the full page width on mobile.
.site-footer prefix needed — the base .footer-social a rule lives later in
the file, so equal specificity would let it win the cascade. */
.site-footer .footer-social { gap: 12px; justify-content: space-between; width: 100%; }
.site-footer .footer-social a { width: 56px; height: 56px; }
.site-footer .footer-social svg { width: 24px; height: 24px; }
}
/* ---------- HERO ---------- */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
radial-gradient(60% 50% at 50% 0%, rgba(207,138,92,.10), transparent 70%),
radial-gradient(50% 60% at 100% 100%, rgba(126,155,134,.12), transparent 70%);
pointer-events: none; }
.hero .wrap { position: relative; }
.hero h1 { max-width: 16ch; margin: 16px auto 0; }
.hero .lede { margin: 22px auto 0; }
.hero-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.hero-bullets li { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink); font-size: .98rem; }
.hero-bullets li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--sage); -webkit-mask: var(--check) center/12px no-repeat; mask: var(--check) center/12px no-repeat; }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Secondary CTA in the hero needs a clearly visible border — the global
.btn--ghost border is var(--line) #e9e2f0, which disappears against the
cream hero scrim #fbf3e4. Scope a stronger ghost to the hero only so
dark-band ghost buttons (which override border-color inline to white)
are unaffected. */
.hero .btn--ghost { border-color: var(--primary); border-width: 2px; font-weight: 700; }
.hero .btn--ghost:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }
@media (max-width: 560px) {
.hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
.hero-cta .btn { width: 100%; justify-content: center; padding-left: 18px; padding-right: 18px; }
}
.hero-figure { margin: clamp(40px,5vw,64px) auto 0; max-width: 980px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-hero); aspect-ratio: 16/8; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
/* ---- HERO decorative vectors (two organic blobs, gentle scroll-parallax) ---- */
.hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-decor-shape { position: absolute; display: block; aspect-ratio: 1; will-change: transform; }
.hero-decor-shape path { transform-origin: center; }
/* top-right: lavender filled soft blob, partially off-canvas */
.hero-decor-shape--a { top: clamp(-160px, -8vw, -90px); right: clamp(-170px, -9vw, -100px); width: clamp(360px, 38vw, 560px); opacity: .14; }
.hero-decor-shape--a path { fill: var(--accent); }
/* bottom-left: primary purple filled soft blob, larger and quieter */
.hero-decor-shape--b { bottom: clamp(-220px, -11vw, -140px); left: clamp(-200px, -10vw, -120px); width: clamp(440px, 50vw, 720px); opacity: .12; }
.hero-decor-shape--b path { fill: var(--primary); }
/* keep all hero content above the decor layer */
.hero .wrap, .hero-figure { position: relative; z-index: 1; }
/* over a photo background, dial the shapes back so they sit on the scrim, not the photo */
.hero--bg .hero-decor-shape--a { opacity: .10; }
.hero--bg .hero-decor-shape--b { opacity: .09; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) {
.hero-decor-shape, .section-decor-shape { transform: none !important; }
/* Nav panels: no slide/clip animation, no drifting blobs — appear instantly (#10538). */
.nav-menu, .nav-mega { transition: opacity .15s ease, visibility .15s !important; transform: none !important; clip-path: none !important; }
.nav-panel__decor span { animation: none !important; }
}
/* ---- Generic SECTION decorative vectors (same parallax system, swap corners per
section so the page reads as varied texture rather than repeated motif). ---- */
.section-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.section-decor-shape { position: absolute; display: block; aspect-ratio: 1; will-change: transform; }
.section-decor-shape path { transform-origin: center; }
/* top-left: lavender filled soft blob, partially off-canvas */
.section-decor-shape--a { top: clamp(-140px, -7vw, -80px); left: clamp(-160px, -8vw, -90px); width: clamp(320px, 34vw, 500px); opacity: .12; }
.section-decor-shape--a path { fill: var(--accent); }
/* bottom-right: primary purple filled soft blob, larger and quieter */
.section-decor-shape--b { bottom: clamp(-200px, -10vw, -130px); right: clamp(-180px, -9vw, -110px); width: clamp(400px, 46vw, 660px); opacity: .09; }
.section-decor-shape--b path { fill: var(--primary); }
/* on dark sections both blobs switch to lavender so they read on plum, slightly softer */
.section--dark .section-decor-shape--a { opacity: .10; }
.section--dark .section-decor-shape--b path { fill: var(--accent); }
.section--dark .section-decor-shape--b { opacity: .10; }
/* --alt: flip the default (A top-left, B bottom-right) to (A top-right, B bottom-left) so adjacent sections don't repeat the same motif */
.section-decor--alt .section-decor-shape--a { left: auto; right: clamp(-160px, -8vw, -90px); }
.section-decor--alt .section-decor-shape--b { right: auto; left: clamp(-180px, -9vw, -110px); }
/* ---- extra smaller scattered blobs (#10529): 6 more rounded vectors per band,
noticeably smaller + lower opacity than --a/--b so they read as a light ambient
scatter rather than competing with the two anchor blobs. Each has its own
data-parallax rate (set in markup) so it drifts + rotates independently. Mixed
accent / primary / amber fills for variety. ---- */
.section-decor-shape--c { top: clamp(-30px, 2vw, 44px); left: 13%; width: clamp(120px, 14vw, 190px); opacity: .085; }
.section-decor-shape--c path { fill: var(--accent); }
.section-decor-shape--d { top: 33%; left: clamp(-72px, -3vw, -30px); width: clamp(100px, 11vw, 150px); opacity: .07; }
.section-decor-shape--d path { fill: var(--primary); }
.section-decor-shape--e { top: 20%; right: 9%; width: clamp(108px, 13vw, 172px); opacity: .07; }
.section-decor-shape--e path { fill: var(--c-amber); }
.section-decor-shape--f { bottom: clamp(-40px, -2vw, 24px); left: 41%; width: clamp(110px, 12vw, 162px); opacity: .07; }
.section-decor-shape--f path { fill: var(--accent); }
.section-decor-shape--g { top: 50%; right: clamp(4%, 6vw, 16%); width: clamp(90px, 10vw, 132px); opacity: .06; }
.section-decor-shape--g path { fill: var(--primary); }
.section-decor-shape--h { bottom: 15%; left: 23%; width: clamp(94px, 11vw, 138px); opacity: .065; }
.section-decor-shape--h path { fill: var(--c-amber); }
/* on dark bands amber/primary fills wash out — switch the small blobs to lavender and lift opacity a touch */
.section--dark .section-decor-shape--e path,
.section--dark .section-decor-shape--g path,
.section--dark .section-decor-shape--h path { fill: var(--accent); }
.section--dark .section-decor-shape--c,
.section--dark .section-decor-shape--d,
.section--dark .section-decor-shape--e,
.section--dark .section-decor-shape--f,
.section--dark .section-decor-shape--g,
.section--dark .section-decor-shape--h { opacity: .09; }
/* on --alt bands, nudge a couple of the scatter blobs to the opposite side so the
flipped sections don't mirror the exact same scatter as their neighbours */
.section-decor--alt .section-decor-shape--c { left: auto; right: 13%; }
.section-decor--alt .section-decor-shape--d { left: auto; right: clamp(-72px, -3vw, -30px); }
.section-decor--alt .section-decor-shape--e { right: auto; left: 9%; }
.section-decor--alt .section-decor-shape--g { right: auto; left: clamp(4%, 6vw, 16%); }
/* lift the section's own content above the decor layer */
.section > .wrap { position: relative; z-index: 1; }
/* ---- HERO with background image ---- */
.hero--bg { background-image: var(--hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Branded purple scrim (generic / centre-aligned heroes). A cream radial keeps
the centre bright behind the dark plum headline (AA legible) while a purple
vignette + base wash pulls the photo toward the key brand purple
(#512d7f → plum-deep #3a1f5c). Matches the homepage treatment (#10534/#10535). */
.hero--bg::before {
background:
radial-gradient(70% 60% at 50% 44%, rgba(251,243,228,.84), rgba(251,243,228,.34) 54%, rgba(251,243,228,0) 82%),
radial-gradient(122% 104% at 50% 36%, rgba(81,45,127,0) 42%, rgba(81,45,127,.28) 84%, rgba(58,31,92,.46) 100%),
linear-gradient(180deg, rgba(81,45,127,.30) 0%, rgba(81,45,127,.12) 40%, rgba(58,31,92,.44) 100%);
}
/* Homepage full-height hero (#10534): branded purple tint + gradient so the
photo reads as brand purple, not neutral. A cream radial still brightens the
centre behind the headline so the dark plum H1/lede stay legible (AA), while
a purple vignette + top-to-bottom purple wash deepens the edges and base into
the key brand purple (#512d7f → plum-deep #3a1f5c). More specific than the
generic .hero--bg::before above, so inner article banners are untouched. */
.hero--full.hero--bg::before {
background:
radial-gradient(64% 56% at 50% 41%, rgba(251,243,228,.86), rgba(251,243,228,.34) 50%, rgba(251,243,228,0) 78%),
radial-gradient(122% 104% at 50% 36%, rgba(81,45,127,0) 40%, rgba(81,45,127,.30) 84%, rgba(58,31,92,.50) 100%),
linear-gradient(180deg, rgba(81,45,127,.36) 0%, rgba(81,45,127,.14) 38%, rgba(58,31,92,.46) 100%);
}
/* Inner article banners (service + hub + blog pages, #10535): on desktop the
text column is LEFT-aligned (pages.css), so a left-anchored cream gradient
backs the headline for legibility, then the photo transitions into brand
purple on the right + a purple base wash — matching the homepage hero's
branded feel. Always loaded (components.css) so it covers BOTH service pages
(pages.css) and blog pages (blog.css). More specific than the centre rule
above; the homepage .hero--full rule is untouched. */
.hero--inner.hero--article.hero--bg::before {
background:
linear-gradient(90deg,
rgba(251,243,228,.92) 0%,
rgba(251,243,228,.80) 30%,
rgba(251,243,228,.46) 54%,
rgba(81,45,127,.12) 76%,
rgba(81,45,127,.34) 100%),
radial-gradient(116% 120% at 92% 28%, rgba(81,45,127,0) 44%, rgba(81,45,127,.30) 82%, rgba(58,31,92,.46) 100%),
linear-gradient(180deg, rgba(81,45,127,.18) 0%, rgba(81,45,127,.04) 32%, rgba(58,31,92,.42) 100%);
}
/* On mobile the article hero re-centres (pages.css @720px) and text spans full
width — swap to a centre-anchored cream veil over the same purple wash. */
@media (max-width: 720px) {
.hero--inner.hero--article.hero--bg::before {
background:
radial-gradient(122% 92% at 50% 40%, rgba(251,243,228,.90), rgba(251,243,228,.58) 62%, rgba(251,243,228,.30) 100%),
radial-gradient(130% 110% at 50% 34%, rgba(81,45,127,0) 46%, rgba(81,45,127,.26) 84%, rgba(58,31,92,.44) 100%),
linear-gradient(180deg, rgba(81,45,127,.22) 0%, rgba(81,45,127,.06) 34%, rgba(58,31,92,.44) 100%);
}
}
.hero--bg .eyebrow { color: var(--c-plum-deep); }
.hero--bg .lede { color: var(--ink); }
/* full-height landing opener */
.hero--full { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
/* shorter inner-page banner */
.hero--inner { min-height: 42vh; padding: clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px); display: flex; flex-direction: column; justify-content: center; }
:root { --check: url("data:image/svg+xml;utf8,"); }
/* ---------- STAT BAR ---------- */
.statbar { background: var(--primary); color: #fff; border-radius: var(--r-lg); padding: clamp(28px,4vw,46px) clamp(28px,5vw,60px); display: flex; align-items: center; gap: clamp(24px,4vw,52px); flex-wrap: wrap; box-shadow: var(--shadow-card); }
.statbar-num { font-family: var(--serif); font-size: clamp(2.8rem,6vw,4.4rem); line-height: 1; color: var(--c-clay); }
.statbar-num small { font-size: .4em; vertical-align: super; }
.statbar-txt { flex: 1 1 260px; }
.statbar-txt strong { display: block; font-family: var(--serif); font-size: 1.4rem; margin-bottom: 4px; }
.statbar-txt span { color: rgba(255,255,255,.78); }
/* ---------- SERVICES GRID ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; display: flex; flex-direction: column; }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: transparent; }
.svc-card-icon { aspect-ratio: 16/6; background: var(--surface-tint); display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.svc-card-icon::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% -10%, rgba(81,45,127,.06), transparent 60%); }
.svc-card-icon i { position: relative; width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-soft); transition: transform .35s ease; }
.svc-card-icon svg { width: 34px; height: 34px; }
.svc-card:hover .svc-card-icon i { transform: scale(1.08) rotate(-3deg); }
.svc-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc-card-body h3 { font-size: 1.3rem; }
.svc-card-body p { color: var(--mute); font-size: .96rem; margin: 0; }
.svc-card-more { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.svc-card-more::after { content: "→"; transition: transform .25s; }
.svc-card:hover .svc-card-more::after { transform: translateX(4px); }
/* ---------- APPROACH (3-col icon cards) ---------- */
.approach-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 820px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-card { background: var(--surface); border-radius: var(--r-md); padding: clamp(26px,3vw,38px); border: 1px solid var(--line); text-align: left; box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; }
.approach-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.approach-icon { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--surface-tint); color: var(--accent); display: grid; place-items: center; margin-bottom: 22px; }
.approach-icon svg { width: 32px; height: 32px; }
.approach-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.approach-card p { color: var(--mute); margin: 0; }
/* ---------- PRESS / LOGO STRIP ---------- */
.press { border-block: 1px solid var(--line); }
.press-label { text-align: center; color: var(--mute); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 22px; }
.press-marquee { display: flex; gap: clamp(28px,4vw,56px); align-items: center; justify-content: center; flex-wrap: wrap; row-gap: clamp(20px,3vw,28px); }
.press-marquee span { font-family: var(--serif); font-size: clamp(1.1rem,2vw,1.6rem); color: var(--mute); opacity: .7; }
.press-logo { height: clamp(22px,3.2vw,34px); width: auto; max-width: clamp(110px,15vw,170px); object-fit: contain; filter: grayscale(1); opacity: .68; transition: opacity .25s ease, filter .25s ease; }
.press-logo:hover { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .press-logo { transition: none; } }
/* Flourish reveal + gentle perpetual float (#10517) — "gentle movement, a flourish for
each logo in a cascade". reveal--flourish (tokens.css) sets the hide state; here we
(a) re-assert the transition so transform stays animated — .press-logo's own
`transition` shorthand (components.css loads after tokens.css) would otherwise drop
transform from the transitioned set, snapping the flourish — keeping the per-logo
--reveal-d delay on transform only (so the cascade rides the movement, hover opacity
stays un-delayed); and (b) add a slow, per-logo phase-offset float so the row keeps
drifting as a gentle wave after it arrives. Gated to no-preference so reduced-motion /
no-JS / headless renders stay static + fully visible. */
@media (prefers-reduced-motion: no-preference) {
.press-logo.reveal { transition: opacity .35s ease, filter .25s ease, transform .7s cubic-bezier(.34,1.4,.5,1) var(--reveal-d,0ms); }
@keyframes pressFloat { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.press-marquee .press-logo.in { animation: pressFloat 4.8s ease-in-out 1.2s infinite alternate; }
.press-marquee .press-logo.in:nth-child(2) { animation-delay: 1.55s; }
.press-marquee .press-logo.in:nth-child(3) { animation-delay: 1.9s; }
.press-marquee .press-logo.in:nth-child(4) { animation-delay: 2.25s; }
.press-marquee .press-logo.in:nth-child(5) { animation-delay: 2.6s; }
.press-marquee .press-logo.in:nth-child(n+6) { animation-delay: 2.95s; }
}
/* ---------- ABOUT SPLIT ---------- */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,5vw,64px); align-items: center; }
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }
.about-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/5; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-badge { position: absolute; left: 20px; bottom: 20px; background: rgba(251,246,240,.95); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: 12px; }
.about-badge b { font-family: var(--serif); color: var(--primary); font-size: 1.5rem; line-height: 1; }
.about-badge span { font-size: .8rem; color: var(--mute); }
.about-body h2 { margin-bottom: 16px; }
.about-body p { color: var(--ink); }
.about-sign { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--accent); margin-top: 18px; }
/* Full-width band beneath the whole split (figure + bio), not inside the text
column — so the stats read as a bold standalone proof strip. */
.about-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: clamp(20px,4vw,56px); margin-top: clamp(40px,6vw,72px); border-top: 1px solid var(--line); padding-top: clamp(32px,5vw,56px); }
.about-stats > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.about-stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem,6vw,4.6rem); color: var(--primary); line-height: .95; }
.about-stats span { font-size: clamp(.85rem,1.3vw,1.02rem); color: var(--mute); line-height: 1.3; letter-spacing: .01em; display: block; max-width: 18ch; }
@media (max-width: 560px) {
.about-stats { grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 32px; padding-top: 28px; }
.about-stats > div { gap: 6px; }
.about-stats b { font-size: clamp(1.9rem,9vw,2.7rem); }
.about-stats span { font-size: .72rem; line-height: 1.2; }
}
/* ---------- JOURNEYS / SUCCESS STORIES ---------- */
.journeys { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 900px) { .journeys { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .journeys { grid-template-columns: 1fr; } }
.journey-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.journey-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.journey-card-img { aspect-ratio: 3/2; overflow: hidden; background: var(--surface-tint); }
.journey-card-img img { width: 100%; height: 100%; object-fit: cover; }
.journey-card-body { padding: 22px 24px 26px; }
.journey-tag { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--sage); }
.journey-card-body h3 { font-size: 1.22rem; margin: 8px 0 8px; }
.journey-card-body p { color: var(--mute); font-size: .94rem; margin: 0 0 12px; }
.journey-card-body a { font-weight: 600; color: var(--accent); }
/* ---------- FAQ ACCORDION ---------- */
.faqs-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq { background: var(--surface); border: 1px solid #d6cae3; border-radius: var(--r-md); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.faq:hover { border-color: var(--accent); }
.faq[open] { box-shadow: var(--shadow-soft); border-color: var(--accent); background-color: #f7f3fb; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; align-items: center; gap: 16px; font-family: var(--serif); font-size: 1.15rem; color: var(--primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1; font-weight: 400; color: var(--accent); background: rgba(121, 96, 160, .10); border-radius: 999px; transition: transform .3s ease, background-color .2s ease, color .2s ease; }
.faq:hover summary::after { background: rgba(121, 96, 160, .18); }
.faq[open] summary::after { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-body { padding: 0 24px 24px; color: var(--mute); }
.faq-body p:last-child { margin-bottom: 0; }
/* ---------- TESTIMONIALS — swipable carousel ---------- */
/* Outer carousel = positioning context for arrows + dots. The .tcards track is
a scroll-snap flex strip; one card per slide on mobile, two-up on desktop.
JS wires arrows/dots/autoplay; CSS handles the swipe (overflow-x:auto +
scroll-snap is keyboard/touch/trackpad-free by default). */
.tcarousel { position: relative; max-width: 900px; margin: 0 auto; padding: 0 8px; }
.tcards {
display: flex; gap: 18px; padding: 6px 4px 14px;
overflow-x: auto; scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
}
.tcards::-webkit-scrollbar { display: none; }
.tcard {
flex: 0 0 calc(50% - 9px);
scroll-snap-align: center;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 22px 22px 20px; position: relative;
box-shadow: 0 1px 0 rgba(81,45,127,.04);
}
@media (max-width: 720px) {
.tcards { gap: 14px; padding: 4px 4px 10px; }
.tcard { flex: 0 0 100%; padding: 18px 18px 16px; }
}
.tcard::before { content: "\201C"; position: absolute; top: 4px; right: 18px; font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); color: var(--c-cream-deep); line-height: 1; pointer-events: none; }
.tcard .stars { margin-bottom: 10px; }
.tcard blockquote { margin: 0 0 14px; font-size: 1rem; color: var(--ink); line-height: 1.55; }
.tcard-by { display: flex; align-items: center; gap: 12px; }
.tcard-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-family: var(--serif); flex-shrink: 0; }
.tcard-by b { display: block; color: var(--primary); }
.tcard-by span { font-size: .82rem; color: var(--mute); }
/* Google-branded variant — coloured stars + corner Google G badge */
.tcard--google .stars { color: #FBBC05; }
.tcard-source { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; line-height: 0; opacity: .95; }
.tcard-source svg { width: 100%; height: 100%; display: block; }
.tcard--google::before { content: none; }
/* Prev / next arrows — sit overlapping the edge of the track. Hidden under
mobile breakpoint where the dots + swipe are the primary affordances. */
.tcarousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: var(--surface); border: 1px solid var(--line); color: var(--primary);
display: grid; place-items: center; cursor: pointer;
box-shadow: 0 6px 16px rgba(81,45,127,.14);
transition: background .2s, color .2s, transform .2s;
z-index: 2;
}
.tcarousel-arrow:hover { background: var(--primary); color: #fff; }
.tcarousel-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tcarousel-arrow svg { width: 20px; height: 20px; display: block; }
.tcarousel-arrow--prev { left: -10px; }
.tcarousel-arrow--next { right: -10px; }
@media (max-width: 720px) { .tcarousel-arrow { display: none; } }
/* Dot pagination — small circles that fill on the active slide. */
.tcarousel-dots {
display: flex; gap: 8px; justify-content: center; align-items: center;
margin-top: 14px;
}
.tcarousel-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--c-cream-deep); border: 0; padding: 0; cursor: pointer;
transition: background .2s, transform .2s, width .2s;
}
.tcarousel-dot:hover { background: var(--accent); }
.tcarousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tcarousel-dot.is-active { background: var(--primary); width: 22px; border-radius: 999px; }
/* Reveal-system pairing: animate the whole carousel in as one unit, not card-by-card
(cards animating in while inside a horizontal scroll-snap track break opacity timing). */
.tcarousel.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.tcarousel.reveal.in { opacity: 1; transform: none; }
.tcards-foot { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: .88rem; color: var(--mute); line-height: 1.55; }
/* Aggregate-rating chip inside section-head — sits under the lede */
.rating-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .94rem; color: var(--ink); box-shadow: 0 1px 0 rgba(81,45,127,.04); }
.rating-chip-logo { width: 18px; height: 18px; line-height: 0; }
.rating-chip-logo svg { width: 100%; height: 100%; display: block; }
.rating-chip-stars { color: #FBBC05; letter-spacing: .02em; }
.rating-chip-text b { color: var(--primary); }
.rating-chip-link { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line); color: var(--accent); font-weight: 600; text-decoration: none; }
.rating-chip-link:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 520px) {
.rating-chip { flex-wrap: wrap; justify-content: center; padding: 12px 14px; }
.rating-chip-link { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; text-align: center; margin-top: 4px; }
}
/* ---------- PROCESS STEPS ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); counter-reset: step; }
@media (max-width: 880px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 8px; }
.step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-tint); color: var(--accent); display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; margin-bottom: 18px; border: 1.5px solid var(--c-cream-deep); }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { color: var(--mute); font-size: .95rem; margin: 0; }
.section--dark .step-num { background: var(--accent); color: #fff; border-color: var(--c-clay-deep); font-weight: 700; font-size: 1.7rem; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.section--dark .step p { color: rgba(239,230,233,.78); }
@media (max-width: 480px) {
.step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding-top: 0; }
.step-num { grid-row: 1 / span 2; grid-column: 1; align-self: start; width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 0; }
.section--dark .step-num { font-size: 1.35rem; }
.step h3 { grid-column: 2; margin: 4px 0 6px; font-size: 1.1rem; }
.step p { grid-column: 2; }
}
/* ---------- BLOG PREVIEW ---------- */
.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .posts { grid-template-columns: 1fr; } }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.post-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-tint); }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-date { position: absolute; left: 16px; top: 16px; background: var(--c-clay); color: #fff; border-radius: var(--r-sm); padding: 8px 12px; text-align: center; line-height: 1; box-shadow: var(--shadow-soft); }
.post-date b { display: block; font-family: var(--serif); font-size: 1.4rem; }
.post-date span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.post-body { padding: 22px 24px 26px; }
.post-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--sage); }
.post-body h3 { font-size: 1.18rem; margin: 8px 0 0; }
.post-body h3 a:hover { color: var(--accent); }
.post-excerpt { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- CTA BAND ---------- */
/* Full-bleed dramatic closer: gradient escapes the .wrap container via the
100vw + negative-margin technique. html has overflow-x: clip (tokens.css)
so no horizontal scrollbar artefacts. Content stays centred inside the
band's own horizontal padding. */
.cta-band {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--c-plum-deep), var(--primary));
color: #fff; text-align: center;
padding: clamp(48px,7vw,88px) clamp(28px,5vw,60px);
width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 100% 0, rgba(207,138,92,.30), transparent 60%), radial-gradient(50% 80% at 0 100%, rgba(126,155,134,.22), transparent 60%); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; max-width: 20ch; margin: 0 auto 16px; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto 30px; }
.cta-band .hero-cta { margin-top: 0; }
/* #10519: the full-bleed cta-band is its own closer with generous internal
padding — the wrapping .section's vertical padding just stacks a redundant
paper strip above/below the purple band. Collapse it so the band sits flush. */
.section:has(> .wrap > .cta-band) { padding-block: 0; border-top: 0; }
/* ---------- CRISIS SIGNPOST ---------- */
.crisis { background: var(--surface-tint); border: 1px solid var(--c-cream-deep); border-radius: var(--r-md); padding: 24px 28px; display: flex; gap: 20px; align-items: flex-start; }
.crisis-icon { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--c-crimson); color: #fff; display: grid; place-items: center; }
.crisis h3 { font-size: 1.15rem; margin-bottom: 6px; }
.crisis p { margin: 0; color: var(--mute); font-size: .95rem; }
.crisis a { color: var(--accent); font-weight: 600; }
/* ---------- VIDEO (YouTube facade) ----------
Two macros share the same .video-facade: a button-as-thumbnail with a
brand-tinted play button + soft dark overlay. On click, JS swaps the
button for a live iframe (see sections.njk JS at end of file). */
.video-player { margin: 0 auto; max-width: 1040px; }
.video-facade {
appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
position: relative; display: block; width: 100%;
aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden;
background: var(--c-plum-deep); cursor: pointer;
box-shadow: var(--shadow-card);
transition: transform .35s ease, box-shadow .35s ease;
}
.video-facade:hover { transform: translateY(-3px); box-shadow: var(--shadow-hero); }
.video-facade:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; }
.video-facade-img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; transition: transform .6s cubic-bezier(.22,.65,.34,1);
}
.video-facade:hover .video-facade-img { transform: scale(1.04); }
.video-facade-overlay {
position: absolute; inset: 0;
background:
radial-gradient(60% 55% at 50% 50%, rgba(58,31,92,.15), rgba(58,31,92,.55) 100%),
linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.32) 100%);
transition: background .35s ease;
}
.video-facade:hover .video-facade-overlay {
background:
radial-gradient(60% 55% at 50% 50%, rgba(58,31,92,.05), rgba(58,31,92,.42) 100%),
linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.28) 100%);
}
.video-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: clamp(64px, 9vw, 96px); height: clamp(64px, 9vw, 96px);
border-radius: 50%;
background: var(--c-cream);
color: var(--primary);
display: grid; place-items: center;
box-shadow: 0 18px 44px rgba(58,31,92,.45), 0 0 0 12px rgba(251,243,228,.18);
transition: transform .35s cubic-bezier(.22,.65,.34,1), background .25s ease, box-shadow .25s ease;
}
.video-play svg { width: 42%; height: 42%; margin-left: 6%; /* nudge optically centred */ }
.video-facade:hover .video-play {
transform: translate(-50%, -50%) scale(1.08);
background: var(--cta); color: #fff;
box-shadow: 0 22px 52px rgba(204,0,48,.45), 0 0 0 16px rgba(204,0,48,.14);
}
/* gentle pulse to invite the click */
@keyframes videoPulse { 0%, 100% { box-shadow: 0 18px 44px rgba(58,31,92,.45), 0 0 0 12px rgba(251,243,228,.18); } 50% { box-shadow: 0 18px 44px rgba(58,31,92,.45), 0 0 0 18px rgba(251,243,228,.08); } }
.video-facade:not(:hover) .video-play { animation: videoPulse 2.6s ease-in-out infinite; }
.video-duration {
position: absolute; right: 14px; bottom: 14px;
background: rgba(27,21,37,.78); color: #fff;
font-size: .78rem; font-weight: 600; letter-spacing: .04em;
padding: 5px 10px; border-radius: var(--r-sm);
backdrop-filter: blur(4px);
}
.video-caption {
margin-top: 18px; text-align: center;
font-size: .92rem; color: var(--mute);
}
.video-noscript { margin-top: 14px; text-align: center; }
.video-noscript a { color: var(--accent); font-weight: 600; }
.video-more { margin-top: clamp(28px, 3.5vw, 44px); text-align: center; }
/* iframe takes over once JS swaps it in */
.video-iframe {
width: 100%; aspect-ratio: 16/9;
border: 0; border-radius: var(--r-lg);
background: var(--c-plum-deep);
box-shadow: var(--shadow-card);
display: block;
}
/* ---- Video grid (multi-card showcase) ---- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } }
.video-card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-md); overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
display: flex; flex-direction: column;
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: transparent; }
.video-card .video-facade { border-radius: 0; box-shadow: none; }
.video-card .video-facade:hover { transform: none; box-shadow: none; }
.video-card .video-play { width: clamp(52px, 8vw, 72px); height: clamp(52px, 8vw, 72px); }
.video-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.video-tag { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.video-card-body h3 { font-size: 1.12rem; line-height: 1.3; margin: 0; }
.video-card-body p { font-size: .92rem; color: var(--mute); margin: 0; }
@media (prefers-reduced-motion: reduce) {
.video-facade:not(:hover) .video-play { animation: none; }
.video-facade-img, .video-facade, .video-play { transition: none; }
}
/* ---------- VIDEO WALL (/videos/) — filterable grid of channel videos ----------
Tighter than .video-grid because we render 200 cards: 4 cols on wide, 3 on
desktop, 2 on tablet, 1 on phone. Cards share .video-facade so the global
facade JS works without changes; the wall-specific shell is .vwall-card. */
.vwall-filter {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 0 0 clamp(28px, 3.4vw, 44px);
justify-content: center;
}
.vwall-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
font-size: .9rem; font-weight: 600;
color: var(--c-plum-deep);
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.vwall-pill:hover { background: var(--surface-tint); transform: translateY(-1px); }
.vwall-pill:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.vwall-pill.is-active {
background: var(--c-plum-deep); color: #fff; border-color: var(--c-plum-deep);
}
.vwall-pill__count {
font-size: .75rem; font-weight: 600;
padding: 2px 7px; border-radius: 999px;
background: rgba(0,0,0,.08);
color: inherit;
}
.vwall-pill.is-active .vwall-pill__count { background: rgba(255,255,255,.22); }
/* Mobile: 12 pills wrap into 9 rows = filter eats the fold (#9738).
Swap to a one-row horizontal scroll strip — pills stay, brand look stays,
swipe to discover. Right-edge gradient hints "more →". */
@media (max-width: 760px) {
.vwall-filter {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Bleed to viewport edges so scroll feels natural, then pad insets back in */
margin-inline: calc(var(--pad-x) * -1);
padding: 4px 18px 14px;
position: relative;
/* Soft right-edge fade — affords "swipe for more" */
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.vwall-filter::-webkit-scrollbar { display: none; }
.vwall-pill {
flex: 0 0 auto;
scroll-snap-align: start;
padding: 7px 14px;
font-size: .85rem;
}
/* Hover lift looks broken inside a horizontal scroller — kill on touch */
.vwall-pill:hover { transform: none; }
}
.vwall-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 1.8vw, 26px);
}
@media (max-width: 1200px) { .vwall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .vwall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vwall-grid { grid-template-columns: 1fr; } }
.vwall-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.vwall-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: transparent; }
.vwall-card .video-facade { border-radius: 0; box-shadow: none; }
.vwall-card .video-facade:hover { transform: none; box-shadow: none; }
.vwall-card .video-facade-img { aspect-ratio: 16 / 9; height: auto; }
.vwall-card .video-play { width: clamp(46px, 6vw, 60px); height: clamp(46px, 6vw, 60px); }
.vwall-card-body {
padding: 14px 16px 18px;
display: flex; flex-direction: column; gap: 6px;
}
.vwall-card-topic {
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--accent);
}
.vwall-card-title {
font-size: .98rem; line-height: 1.35; margin: 0;
color: var(--c-plum-deep);
/* Clamp to 3 lines so cards don't go ragged on the wall */
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.vwall-card-fallback {
padding: 12px 16px; margin: 0;
font-size: .85rem;
border-top: 1px solid var(--line);
}
.vwall-empty {
text-align: center; padding: 40px 0;
color: var(--mute); font-size: 1rem;
}
.vwall-cta {
text-align: center;
margin-top: clamp(34px, 4vw, 52px);
}
/* When a card is filtered out the JS sets the [hidden] attribute. The UA
`[hidden]{display:none}` rule LOSES to the author `.vwall-card{display:flex}`
above (author beats UA regardless of specificity), so filtered cards stayed
visible. This explicit rule (specificity 0,2,0 > the .vwall-card 0,1,0) wins
and pulls the card out of grid flow, collapsing its gap too. */
.vwall-card[hidden] { display: none !important; }
/* ---------- BLOCK QUOTE ----------
Editorial pull-quote (NOT testimonials). Three surface variants share the
same .bquote — only the section wrapper changes the background + ink colour.
The decorative " mark is a CSS pseudo-element, not text, so it can't be
selected/copied and screen-readers skip it. */
.bquote-section { padding: clamp(72px, 9vw, 132px) 0; }
.bquote-section--paper { background: var(--band-paper); }
.bquote-section--tint { background: var(--band-tint); box-shadow: inset 0 1px 0 var(--band-tint-edge), inset 0 -1px 0 var(--band-tint-edge); } /* #10513: match the deeper tint band */
.bquote-section--dark { background: var(--c-plum-deep); color: #efe9f4; }
.bquote-head { text-align: center; margin-bottom: clamp(26px, 3vw, 38px); }
.bquote {
margin: 0; position: relative;
padding: clamp(36px, 5vw, 68px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px);
max-width: 980px;
}
.bquote--center { margin-inline: auto; text-align: center; }
.bquote--left { margin-inline: 0; text-align: left; padding-left: clamp(28px, 4vw, 56px); border-left: 4px solid var(--accent); }
/* Big decorative open-quote mark — sits behind the text, brand-tinted */
.bquote--center::before {
content: "\201C";
position: absolute;
top: -.05em; left: 50%; transform: translateX(-50%);
font-family: var(--serif); font-weight: 700;
font-size: clamp(140px, 18vw, 240px);
line-height: 1;
color: var(--c-cream-deep);
opacity: .55;
pointer-events: none;
z-index: 0;
}
.bquote-section--tint .bquote--center::before { color: var(--c-sage); opacity: .28; }
.bquote-section--dark .bquote--center::before { color: var(--accent); opacity: .35; }
.bquote--left::before { content: none; }
.bquote-text {
position: relative; z-index: 1;
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-style: italic;
line-height: 1.25;
letter-spacing: -.015em;
font-size: clamp(1.55rem, 3.6vw, 2.7rem);
color: var(--primary);
max-width: 36ch;
}
.bquote--center .bquote-text { margin-inline: auto; }
.bquote--left .bquote-text { font-size: clamp(1.3rem, 2.4vw, 1.9rem); max-width: 40ch; }
.bquote-section--dark .bquote-text { color: #fff; }
.bquote-text em { color: var(--accent); font-style: italic; }
.bquote-section--dark .bquote-text em { color: #d6c2f0; }
.bquote-cite {
position: relative; z-index: 1;
margin-top: clamp(22px, 2.6vw, 34px);
display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.bquote--left .bquote-cite { align-items: flex-start; }
.bquote-cite::before {
content: ""; display: block;
width: 36px; height: 2px;
background: var(--cta);
margin-bottom: 14px;
}
.bquote-name {
font-family: var(--sans); font-weight: 700;
font-size: 1rem; color: var(--primary);
letter-spacing: .01em;
}
.bquote-source {
font-family: var(--sans); font-weight: 500;
font-size: .82rem; color: var(--mute);
text-transform: uppercase; letter-spacing: .16em;
}
.bquote-section--dark .bquote-name { color: #fff; }
.bquote-section--dark .bquote-source { color: rgba(239,230,233,.7); }
/* ---------- TRUST / CREDENTIALS ---------- */
/* 2x2 grid above mobile so 4 chips never orphan one on a row of its own.
Equal-width cells mean a longer credential (e.g. "Postgraduate Diploma,
Metanoia Institute") sits cleanly next to a shorter one. */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin-inline: auto; }
.trust-chip { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 12px 22px; font-weight: 500; color: var(--primary); text-align: left; }
.trust-chip svg { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; }
/* Mobile: stack pills uniformly so different credential lengths don't look
ragged. Single column, fixed max-width, icon column = fixed gutter, label
flows left-aligned — reads as a tidy credential list. */
@media (max-width: 720px) {
.trust { grid-template-columns: 1fr; gap: 10px; max-width: 380px; }
.trust-chip { display: grid; grid-template-columns: 22px 1fr; justify-content: start; text-align: left; padding: 12px 18px; line-height: 1.35; }
}
/* ---------- FOOTER ---------- */
.site-footer { background: var(--c-plum-deep); color: rgba(239,230,233,.78); padding: clamp(54px,7vw,84px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,52px); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; margin-bottom: 16px; }
.site-footer .brand small { color: rgba(239,230,233,.6); }
.footer-about { max-width: 34ch; font-size: .95rem; }
.footer-col h4 { color: #fff; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a:hover { color: var(--c-clay); }
.footer-contact b { color: #fff; display: block; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .85rem; color: rgba(239,230,233,.6); }
.footer-bottom a:hover { color: var(--c-clay); }
.footer-social { display: flex; gap: 14px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .25s; }
.footer-social a:hover { background: var(--accent); }
.footer-social svg { width: 17px; height: 17px; }
/* =========================================================================
STICKY MOBILE CTA — fixed-bottom call/book bar (.smcta)
Mobile-only conversion strip. Hidden above 768px. Bar reserves its own
height as body bottom-padding so it never covers footer content.
Dismissal hides via display:none on a body class — NEVER a horizontal translateX
(see #9617 mobile-overflow: position:fixed children break out of
body overflow-x:hidden; we mitigate via html overflow-x:clip, but a
transformed off-canvas state would still risk recreating the bug).
========================================================================= */
.smcta { display: none; }
.smcta-inner { display: flex; flex: 1 1 auto; min-width: 0; }
.smcta-btn {
flex: 1 1 50%; min-width: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 18px 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0)); /* taller bar (#10502) */
font-family: var(--sans); font-weight: 600; font-size: .95rem; line-height: 1.1;
text-decoration: none; color: #fff;
transition: background .2s ease;
white-space: nowrap;
}
.smcta-btn--primary { background: var(--cta, var(--c-plum, #512d7f)); }
.smcta-btn--primary:active { background: var(--c-plum-deep, #3a1f5c); }
.smcta-btn--secondary { background: var(--primary, #512d7f); border-left: 1px solid rgba(255,255,255,.18); }
.smcta-btn--secondary:active { background: var(--c-plum-deep, #3d1f63); }
.smcta-btn:focus-visible { outline: 3px solid var(--accent, #7960a0); outline-offset: -3px; }
.smcta-ico { display: inline-grid; place-items: center; }
.smcta-ico svg { width: 18px; height: 18px; }
.smcta-lbl { overflow: hidden; text-overflow: ellipsis; }
.smcta-close {
flex: 0 0 auto;
width: 36px; align-self: stretch;
display: grid; place-items: center;
background: rgba(0,0,0,.18); color: #fff; border: 0;
cursor: pointer; padding: 0;
margin-bottom: env(safe-area-inset-bottom, 0);
transition: background .15s ease;
}
.smcta-close:hover { background: rgba(0,0,0,.32); }
.smcta-close:focus-visible { outline: 3px solid var(--accent, #7960a0); outline-offset: -3px; }
.smcta-close svg { width: 14px; height: 14px; }
/* Mobile-only display + body padding so footer stays reachable. */
@media (max-width: 768px) {
.smcta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
display: flex; align-items: stretch;
background: var(--primary, #512d7f); color: #fff;
box-shadow: 0 -8px 24px rgba(20, 10, 40, .18);
}
/* Hidden by default — slides up + fades in only once the visitor has
scrolled past the hero (JS adds .smcta--revealed). A vertical translateY
is safe (fixed elements never grow the scroll area); NEVER use translateX
here — see the overflow-x note above. #10506 */
.smcta:not(.smcta--preview) {
transform: translateY(110%);
opacity: 0;
visibility: hidden;
transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease, visibility .4s;
}
.smcta:not(.smcta--preview).smcta--revealed {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* Reserve footer clearance only while the bar is actually on-screen, so
there's no phantom bottom gap before it reveals. */
body.smcta-revealed { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
body.smcta-dismissed .smcta { display: none; }
}
/* Catalogue-preview variant — render in-flow inside /utilities/ instead of
fixed-bottom, so reviewers can see it without scrolling. Also overrides the
mobile-only display so the preview is visible on desktop catalogue too. */
.smcta--preview {
display: flex; position: static;
border-radius: var(--r-md, 8px);
overflow: hidden;
margin: 0 auto;
max-width: 420px;
box-shadow: 0 8px 24px rgba(20, 10, 40, .18);
background: var(--primary, #512d7f);
}
.smcta--preview .smcta-btn { padding-bottom: 18px; }
.smcta--preview .smcta-close { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
.smcta-btn { transition: none; }
.smcta-close { transition: none; }
.smcta:not(.smcta--preview) { transition: none; }
}
/* =========================================================================
QUICK EXIT — safety escape pill (.quick-exit), task #9757
Floating top-right control on the sensitive abuse/coercive-control pages.
Highest z-index in the stack (above sticky header z60, hamburger z70, mobile
drawer z58, sticky CTA z95) so an at-risk visitor can always reach it.
Crimson = unmissable + reads as "leave / danger". Rendered only when a page
sets `quick_exit: true` (body gets `.has-quick-exit`, which also reserves
header corner space below so the pill never overlaps nav / hamburger).
========================================================================= */
.quick-exit {
position: fixed; top: 0; right: 0; z-index: 200;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0));
border-radius: 0 0 0 14px;
background: var(--c-crimson, #cc0030); color: #fff; /* stays crimson — safety escape reads as danger/urgent (#10502) */
font-family: var(--sans); font-weight: 700; font-size: .9rem; line-height: 1;
text-decoration: none; white-space: nowrap;
box-shadow: 0 6px 18px rgba(20, 10, 40, .28);
transition: background .18s ease, transform .18s ease;
}
.quick-exit:hover { background: var(--c-crimson-deep, #a8002a); color: #fff; }
.quick-exit:active { transform: translateY(1px); }
.quick-exit:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.quick-exit__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.quick-exit__label { display: inline-block; }
/* Reserve top-right header room so the corner pill never sits on the nav CTA
(desktop) or the hamburger (tablet). Applied only on quick-exit pages — and
only above the 640px tab breakpoint below, where the pill is still a corner.
The mobile tab block (last) zeroes this so phones get the full header width. */
body.has-quick-exit .site-header .wrap { padding-right: 124px; }
@media (max-width: 940px) and (min-width: 641px) {
body.has-quick-exit .site-header .wrap { padding-right: 108px; }
}
/* Mobile (#11054): rotate the escape control into a vertical TAB pinned to the
right edge at vertical centre — within easy one-handed thumb reach, and clear
of the header corner (so the reservation above is dropped on phones). Desktop
keeps the top-right corner pill. writing-mode handles the vertical text; the
icon is rotated to read down the tab alongside the label. MUST stay last so it
wins the padding-right cascade over the unconditional desktop reservation. */
@media (max-width: 640px) {
.quick-exit {
top: 50%; right: 0; bottom: auto; left: auto;
transform: translateY(-50%);
writing-mode: vertical-rl;
padding: 16px 9px;
gap: 7px; font-size: .82rem;
border-radius: 14px 0 0 14px;
box-shadow: -5px 0 18px rgba(20, 10, 40, .28);
}
.quick-exit:active { transform: translateY(-50%) translateX(2px); }
.quick-exit__icon { transform: rotate(90deg); }
body.has-quick-exit .site-header .wrap { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.quick-exit { transition: background .18s ease; }
}
/* Catalogue-preview variant — render in-flow inside /utilities/. */
.quick-exit--preview { position: static; border-radius: 999px; }
/* =========================================================================
CONTACT FORM — homepage booking surface (s.contactForm)
Two-column layout (info + form), brand-tinted inputs, cream surface card.
Pure CSS — works without JS. JS only enhances submit feedback.
========================================================================= */
.cf-section { scroll-margin-top: 90px; }
.cf-grid {
display: grid; gap: clamp(28px, 4vw, 56px);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 880px) { .cf-grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 5vw, 80px); } }
/* Left info column */
.cf-info { max-width: 44ch; }
.cf-info h2 { margin-bottom: 14px; }
.cf-info .lede { color: var(--mute); margin-bottom: 20px; max-width: none; }
.cf-usps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.cf-usps li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; line-height: 1.5; }
.cf-usps svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.cf-meta {
list-style: none; padding: 22px 0 0; margin: 26px 0 0; border-top: 1px solid var(--line);
display: grid; gap: 14px;
}
.cf-meta li { display: flex; gap: 14px; align-items: center; }
.cf-meta svg { width: 22px; height: 22px; color: var(--primary); flex: none; }
.cf-meta span { display: flex; flex-direction: column; line-height: 1.3; }
.cf-meta small { font-size: .72rem; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.cf-meta a { color: var(--ink); font-weight: 600; }
.cf-meta a:hover { color: var(--primary); }
/* Form card */
.cf-form {
background: var(--surface);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 44px);
box-shadow: var(--shadow-card);
border: 1px solid var(--c-cream-deep);
position: relative;
}
/* Honeypot — visually + semantically hidden, off-tabbable */
.cf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Field grid */
.cf-row { margin-bottom: 18px; }
.cf-row--2 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cf-row--2 { grid-template-columns: 1fr 1fr; } }
.cf-field { display: block; margin-bottom: 18px; }
.cf-field > label, .cf-fieldset > legend {
display: block; font-weight: 600; font-size: .9rem; color: var(--ink);
margin-bottom: 8px; letter-spacing: .005em;
}
.cf-field > label small { color: var(--mute); font-weight: 500; font-size: .82rem; margin-left: 4px; }
.cf-req { color: var(--c-crimson); font-weight: 700; margin-left: 2px; }
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="tel"],
.cf-form textarea {
width: 100%;
font-family: var(--sans); font-size: 1rem; color: var(--ink);
background: var(--c-paper);
border: 1.5px solid var(--line); border-radius: var(--r-sm);
padding: 13px 16px; line-height: 1.4;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cf-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.cf-form input:hover, .cf-form textarea:hover { border-color: var(--accent); }
.cf-form input:focus, .cf-form textarea:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(81, 45, 127, .15);
background: #fff;
}
/* Only flag invalid after the user has interacted (or attempted submit) — */
/* :user-invalid is widely supported and doesn't fire on initial empty state */
.cf-form input:user-invalid,
.cf-form textarea:user-invalid { border-color: var(--c-crimson); }
.cf-form input:user-invalid:focus,
.cf-form textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgba(204, 0, 48, .15); }
.cf-form ::placeholder { color: var(--mute); opacity: .75; }
/* Radio group */
.cf-fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.cf-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-radio {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: var(--r-pill);
border: 1.5px solid var(--line); background: var(--c-paper);
cursor: pointer; transition: all .2s ease; font-size: .92rem;
user-select: none;
}
.cf-radio:hover { border-color: var(--accent); }
.cf-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-radio span { line-height: 1; font-weight: 500; }
.cf-radio:has(input:checked) { background: var(--primary); color: #fff; border-color: var(--primary); }
.cf-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(81, 45, 127, .15); }
/* Consent + safeguarding */
.cf-consent { margin: 8px 0 22px; padding-top: 16px; border-top: 1px dashed var(--c-cream-deep); }
.cf-consent p { margin: 0 0 10px; }
.cf-consent small { font-size: .82rem; color: var(--mute); line-height: 1.55; }
.cf-consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.cf-safeguard {
display: flex; gap: 10px; align-items: flex-start;
margin: 14px 0 0; padding: 12px 14px;
background: var(--surface-tint); border-radius: var(--r-sm);
font-size: .85rem; color: var(--ink); line-height: 1.5;
}
.cf-safeguard b { color: var(--c-crimson); }
.cf-safeguard__icon { display: inline-flex; flex: none; color: var(--c-crimson); margin-top: 1px; }
.cf-safeguard__icon svg { width: 18px; height: 18px; }
/* Submit row */
.cf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cf-submit .btn { flex: none; }
.cf-response { color: var(--mute); font-size: .82rem; line-height: 1.4; }
.cf-response--error { color: var(--c-crimson); font-weight: 600; }
/* Status panels (success / pending / error) */
.cf-status {
margin-top: 22px; padding: 22px 24px; border-radius: var(--r-md);
border: 1.5px solid; font-size: .96rem; line-height: 1.55;
}
.cf-status h3 { font-size: 1.2rem; margin: 0 0 8px; }
.cf-status p { margin: 0; }
.cf-status a { color: inherit; text-decoration: underline; font-weight: 600; }
.cf-status--success { background: rgba(155, 134, 184, .12); border-color: var(--c-sage); color: var(--c-plum-deep); }
.cf-status--success h3 { color: var(--primary); }
.cf-status--pending { background: var(--surface-tint); border-color: var(--c-cream-deep); color: var(--ink); }
.cf-status--pending h3 { color: var(--c-plum-deep); }
.cf-status--error { background: rgba(204, 0, 48, .06); border-color: rgba(204, 0, 48, .35); color: var(--c-crimson-deep); }
.cf-status--error h3 { color: var(--c-crimson); }
/* Disabled-during-submit state */
.cf-form button[disabled] { opacity: .7; cursor: progress; }
/* =========================================================================
WhatsApp-first contact layout (#11045) — opt-in via contactForm
whatsapp_primary:true. Right column leads with a prominent WhatsApp CTA;
the enquiry form lives in a collapsible that expands on demand.
========================================================================= */
/* Vertically centre the WhatsApp + form options against the taller left
info column (grid row is sized by the left column; .cf-grid is align-items:start). */
.cf-actions { display: flex; flex-direction: column; gap: 20px; align-self: center; }
/* Primary CTA — recognisable WhatsApp green so it reads as THE action. */
.cf-wa {
--wa: #25d366; --wa-deep: #128c7e;
position: relative;
display: flex; align-items: center; gap: 18px;
padding: 20px 22px; border-radius: var(--r-lg);
background: linear-gradient(135deg, #2bd96e 0%, var(--wa) 55%, var(--wa-deep) 100%);
color: #fff; text-decoration: none;
box-shadow: 0 12px 30px -10px rgba(18, 140, 126, .55);
border: 1px solid rgba(255, 255, 255, .25);
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
/* Subtle attention pulse (#11051) — an expanding ring on a pseudo-element so it
never fights the button's own resting/hover box-shadow or transform. */
.cf-wa::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
animation: cfWaPulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
pointer-events: none;
}
@keyframes cfWaPulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.cf-wa:hover, .cf-wa:focus-visible {
transform: translateY(-3px);
box-shadow: 0 18px 38px -10px rgba(18, 140, 126, .6);
filter: brightness(1.04);
}
.cf-wa:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }
.cf-wa__ico {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255, 255, 255, .18);
}
.cf-wa__ico svg { width: 28px; height: 28px; color: #fff; }
.cf-wa__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.cf-wa__title { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.15; }
.cf-wa__sub { font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.cf-wa__go { flex: none; display: inline-flex; opacity: .9; transition: transform .22s ease; }
.cf-wa__go svg { width: 22px; height: 22px; color: #fff; }
.cf-wa:hover .cf-wa__go { transform: translate(2px, -2px); }
/* "or send a message" divider */
.cf-altsplit {
display: flex; align-items: center; gap: 14px;
color: var(--mute); font-size: .82rem; letter-spacing: .08em;
text-transform: uppercase; font-weight: 600;
}
.cf-altsplit::before, .cf-altsplit::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
/* Collapsible enquiry form */
.cf-disclose {
background: var(--surface); border: 1px solid var(--c-cream-deep);
border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.cf-disclose__sum {
display: flex; align-items: center; gap: 16px;
padding: 20px 22px; cursor: pointer; list-style: none;
transition: background .2s ease;
}
.cf-disclose__sum::-webkit-details-marker { display: none; }
.cf-disclose__sum:hover { background: var(--surface-tint); }
.cf-disclose__sum:focus-visible { outline: 3px solid var(--cta); outline-offset: -3px; }
.cf-disclose__ico {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 50%;
background: var(--surface-tint); color: var(--primary);
}
.cf-disclose__ico svg { width: 24px; height: 24px; }
.cf-disclose__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.cf-disclose__body strong { font-size: 1.02rem; color: var(--ink); font-weight: 600; }
.cf-disclose__sub { font-size: .86rem; color: var(--mute); line-height: 1.4; }
.cf-disclose__chev {
flex: none; width: 22px; height: 22px; color: var(--primary);
transition: transform .25s ease;
}
.cf-disclose[open] .cf-disclose__chev { transform: rotate(180deg); }
.cf-disclose__panel { padding: 0 22px 24px; }
.cf-disclose[open] .cf-disclose__panel { animation: cfDisclose .32s ease; }
@keyframes cfDisclose { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* The form is no longer its own card inside the disclosure — flatten it so we
don't double up borders/shadows/padding. */
.cf-disclose__panel > .cf-form {
background: none; border: 0; border-radius: 0; box-shadow: none; padding: 6px 0 0;
}
/* WhatsApp-first reorder (#11051): the action surface (WhatsApp CTA + form) sits
up top; the USP points drop below. On mobile this is the natural DOM order
(.cf-info → .cf-actions → .cf-usps-wrap). On desktop, keep info + USPs stacked
in the left column with the actions column spanning both rows so it stays
vertically centred against them. */
.cf-grid--wa .cf-usps-wrap { margin-top: 2px; }
.cf-grid--wa .cf-usps-wrap .cf-usps { margin-top: 0; }
@media (min-width: 880px) {
.cf-grid--wa { row-gap: clamp(22px, 2.6vw, 34px); }
.cf-grid--wa .cf-info { grid-column: 1; grid-row: 1; }
.cf-grid--wa .cf-usps-wrap { grid-column: 1; grid-row: 2; align-self: start; }
.cf-grid--wa .cf-actions { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
.cf-wa, .cf-wa__go, .cf-disclose__chev { transition: none; }
.cf-wa:hover { transform: none; }
.cf-wa::after { animation: none; }
.cf-disclose[open] .cf-disclose__panel { animation: none; }
}
/* ---------- LOCATION MAP — facade Google Map + NAP + directions ---------- */
.locmap-section { scroll-margin-top: 90px; }
.locmap-grid {
display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px);
align-items: stretch;
}
@media (min-width: 880px) {
.locmap-grid { grid-template-columns: 1.35fr 0.85fr; gap: clamp(36px, 5vw, 72px); }
}
.locmap-figure { margin: 0; position: relative; }
.locmap-facade,
.locmap-iframe {
display: block; width: 100%;
/* Stable aspect — keeps CLS=0 whether facade or iframe is in place. */
aspect-ratio: 16 / 10;
border: 1.5px solid var(--c-cream-deep);
border-radius: var(--r-md);
background: var(--c-cream);
overflow: hidden;
}
.locmap-iframe { border: 0; box-shadow: 0 6px 24px rgba(81,45,127,.10); }
/* Facade button — single click target, focus ring on the whole control. */
.locmap-facade {
position: relative; padding: 0; cursor: pointer;
appearance: none; font: inherit; color: inherit;
box-shadow: 0 6px 24px rgba(81,45,127,.08);
transition: box-shadow .2s, transform .2s;
}
.locmap-facade:hover { box-shadow: 0 10px 32px rgba(81,45,127,.16); }
.locmap-facade:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.locmap-facade-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none;
}
.locmap-pin {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -64%);
width: 56px; height: 56px; border-radius: 50%;
background: var(--primary); color: #fff;
display: grid; place-items: center;
box-shadow: 0 8px 18px rgba(81,45,127,.32);
pointer-events: none;
}
.locmap-pin svg { width: 28px; height: 28px; }
.locmap-facade-caption {
position: absolute; left: 14px; bottom: 14px;
background: rgba(255,255,255,.95); color: var(--c-plum-deep);
padding: 10px 14px; border-radius: var(--r-sm);
box-shadow: 0 4px 14px rgba(81,45,127,.18);
display: flex; flex-direction: column; gap: 2px;
text-align: left; pointer-events: none;
max-width: calc(100% - 28px);
}
.locmap-facade-caption small { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.locmap-facade-caption strong { font-size: .95rem; }
.locmap-facade-launch {
position: absolute; top: 14px; right: 14px;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,.95); color: var(--primary);
display: grid; place-items: center;
box-shadow: 0 4px 12px rgba(81,45,127,.16);
pointer-events: none;
}
.locmap-facade-launch svg { width: 18px; height: 18px; }
.locmap-noscript { text-align: center; margin: 14px 0 0; }
.locmap-noscript a { font-weight: 700; color: var(--primary); }
/* NAP / contact / hours column */
.locmap-info {
display: flex; flex-direction: column; gap: 16px;
align-self: center;
}
.locmap-bizname { margin: 0; font-size: 1.05rem; color: var(--c-plum-deep); }
.locmap-address {
font-style: normal; display: flex; flex-direction: column; gap: 2px;
color: var(--ink); line-height: 1.5; font-size: 1rem;
}
.locmap-contact { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.locmap-contact li { display: flex; align-items: center; gap: 10px; }
.locmap-contact svg { width: 18px; height: 18px; color: var(--primary); flex: none; }
.locmap-contact a { color: var(--ink); font-weight: 600; }
.locmap-contact a:hover { color: var(--primary); }
.locmap-hours {
margin: 4px 0 0; padding: 16px 18px;
background: var(--surface-tint); border-radius: var(--r-sm);
display: flex; flex-direction: column; gap: 4px;
}
.locmap-hours-title { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; }
.locmap-hours-row { display: flex; justify-content: space-between; gap: 16px; font-size: .94rem; }
.locmap-hours-row dt { font-weight: 600; color: var(--ink); margin: 0; }
.locmap-hours-row dd { margin: 0; color: var(--mute); }
.locmap-directions { margin-top: 4px; align-self: flex-start; }
.locmap-note { color: var(--mute); margin: 0; }
/* ---------- LOCATIONS SERVED — nearby-towns sweep (Local SEO) ---------- */
.locserv-section { scroll-margin-top: 90px; }
.locserv-block {
max-width: 1040px; margin-inline: auto;
display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 32px);
}
.locserv-primary {
display: inline-flex; align-items: center; gap: 12px;
align-self: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 12px 22px 12px 18px;
box-shadow: var(--shadow-soft);
}
.locserv-primary-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--mute); font-weight: 600;
}
.locserv-primary-label svg { width: 16px; height: 16px; color: var(--accent); }
.locserv-primary-town { font-size: 1.05rem; color: var(--c-plum-deep); }
.locserv-grid {
list-style: none; padding: 0; margin: 0;
display: grid;
/* 200px min fits the longest UK place-name we ship today (Henley-on-Thames,
15 chars at 1rem bold ≈ 145px + 36px tile padding) on a single line. */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.locserv-tile {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--r-sm);
padding: 16px 18px;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.locserv-tile:hover {
border-left-color: var(--primary);
box-shadow: 0 6px 16px rgba(81,45,127,.08);
transform: translateY(-2px);
}
.locserv-tile-name {
font-size: 1rem; color: var(--c-plum-deep);
hyphens: none; text-wrap: balance;
}
.locserv-tile-distance { font-size: .88rem; color: var(--ink); }
.locserv-tile-postcode {
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--mute); font-weight: 600;
}
.locserv-online {
display: inline-flex; align-items: center; gap: 12px;
align-self: center; max-width: 64ch; text-align: left;
margin: 4px 0 0; padding: 14px 22px;
background: var(--surface-tint);
border: 1px dashed var(--c-cream-deep);
border-radius: var(--r-pill);
color: var(--c-plum-deep); font-weight: 500;
}
.locserv-online-icon { display: inline-flex; }
.locserv-online-icon svg { width: 18px; height: 18px; color: var(--primary); }
/* When the section is on a tinted background, swap the online callout's
tint→white so it stays legible. */
.section--tint .locserv-online,
.section--cream .locserv-online {
background: var(--surface);
border-style: solid;
}
/* =========================================================================
FEES TABLE — pricing transparency (s.feesTable)
Real for accessibility + schema clarity. Brand-purple border,
cream alternate rows, featured row highlight. Renders comfortably on
mobile: the .note column drops below price on narrow viewports.
========================================================================= */
.fees-section { scroll-margin-top: 90px; }
.fees-card {
background: var(--surface);
border: 1px solid var(--c-cream-deep);
border-top: 4px solid var(--primary);
border-radius: var(--r-md);
padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px);
box-shadow: var(--shadow-card);
max-width: 880px;
margin-inline: auto;
}
.fees-caption {
caption-side: top;
text-align: left;
font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--mute); font-weight: 600;
padding: 0 0 12px;
border-bottom: 1px dashed var(--c-cream-deep);
margin-bottom: 4px;
}
.fees-table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
.fees-table thead th {
text-align: left; padding: 14px 12px;
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--mute); font-weight: 700;
border-bottom: 1px solid var(--line);
}
.fees-table thead th.fees-col-price { text-align: right; width: 22%; }
.fees-table thead th.fees-col-note { width: 38%; }
.fees-table tbody tr { border-bottom: 1px solid var(--c-cream); }
.fees-table tbody tr:last-child { border-bottom: 0; }
.fees-table tbody tr:nth-child(even) { background: var(--surface-tint); }
.fees-table tbody td,
.fees-table tbody th {
padding: 18px 12px; vertical-align: top;
line-height: 1.5;
}
.fees-label { font-weight: 600; color: var(--c-plum-deep); font-size: 1.02rem; }
.fees-pill {
display: inline-block; margin-left: 6px;
background: var(--primary); color: #fff;
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
font-weight: 700;
padding: 3px 9px; border-radius: var(--r-pill);
vertical-align: middle;
}
.fees-price {
text-align: right; font-weight: 700; color: var(--ink); font-size: 1.15rem;
white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fees-note { color: var(--mute); font-size: .92rem; }
/* Featured row — brand-purple wash + accent border-left */
.fees-table tbody tr.fees-row--featured { background: rgba(81, 45, 127, .055); }
.fees-table tbody tr.fees-row--featured > th { box-shadow: inset 3px 0 0 var(--primary); }
.fees-table tbody tr.fees-row--featured .fees-price { color: var(--primary); }
.fees-footnote {
display: flex; gap: 12px; align-items: flex-start;
margin: 22px 0 0;
padding: 16px 18px;
background: var(--surface-tint);
border: 1px dashed var(--c-cream-deep);
border-radius: var(--r-sm);
color: var(--ink); font-size: .92rem; line-height: 1.55;
}
.fees-footnote svg { width: 20px; height: 20px; color: var(--primary); flex: none; margin-top: 1px; }
.fees-footnote a { color: var(--primary); font-weight: 600; }
.fees-cta {
display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 22px;
justify-content: flex-end;
}
/* Mobile — stack price + note under the label */
@media (max-width: 620px) {
.fees-table, .fees-table thead, .fees-table tbody, .fees-table tr, .fees-table th, .fees-table td { display: block; }
.fees-table thead { display: none; }
.fees-table tbody tr {
padding: 16px 14px;
border: 1px solid var(--c-cream-deep);
border-radius: var(--r-sm);
margin-bottom: 10px;
background: var(--surface);
}
.fees-table tbody tr:nth-child(even) { background: var(--surface-tint); }
.fees-table tbody tr.fees-row--featured { background: rgba(81, 45, 127, .07); }
.fees-table tbody th, .fees-table tbody td { padding: 4px 0; }
.fees-label { font-size: 1.05rem; margin-bottom: 2px; }
.fees-price { text-align: left; font-size: 1.4rem; margin-top: 2px; }
.fees-note { font-size: .9rem; }
.fees-cta { justify-content: stretch; }
.fees-cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* =========================================================================
AUTHOR CARD — slim article-foot attribution (s.authorCard)
E-E-A-T WHO at the end of long-form articles. 80×80 square photo,
name + credential, one-paragraph bio, link row. Distinct from .about
(the big aboutSplit block).
========================================================================= */
.author-card-section { scroll-margin-top: 90px; }
.author-card {
display: grid;
grid-template-columns: 80px 1fr;
gap: 22px;
align-items: start;
max-width: 760px;
margin-inline: auto;
padding: 22px 26px;
background: var(--surface);
border: 1px solid var(--c-cream-deep);
border-left: 3px solid var(--primary);
border-radius: var(--r-md);
box-shadow: var(--shadow-soft);
}
.author-card-photo {
display: block;
width: 80px; height: 80px;
border-radius: var(--r-pill);
overflow: hidden;
background: var(--c-cream);
box-shadow: var(--shadow-soft);
}
.author-card-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.author-card-body { min-width: 0; }
.author-card-intro {
margin: 0 0 4px;
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--mute); font-weight: 700;
}
.author-card-name {
margin: 0 0 8px;
font-family: var(--serif);
font-size: 1.15rem; line-height: 1.25;
color: var(--c-plum-deep);
}
.author-card-name strong { font-weight: 700; }
.author-card-cred {
display: inline;
font-family: var(--sans);
font-size: .9rem; font-weight: 500;
color: var(--mute);
margin-left: 4px;
}
.author-card-bio {
margin: 0;
color: var(--ink);
font-size: .96rem; line-height: 1.55;
}
.author-card-bio p { margin: 0; }
.author-card-bio p + p { margin-top: 8px; }
.author-card-links {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex; flex-wrap: wrap;
gap: 6px 18px;
font-size: .9rem;
}
.author-card-links a {
color: var(--primary);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 120ms ease;
}
.author-card-links a:hover,
.author-card-links a:focus-visible { border-bottom-color: currentColor; }
/* Mobile — stack photo above text, centred */
@media (max-width: 560px) {
.author-card {
grid-template-columns: 1fr;
gap: 14px;
padding: 20px;
text-align: left;
}
.author-card-photo { width: 72px; height: 72px; }
.author-card-links { gap: 4px 14px; }
}
/* =========================================================================
SPECIALISMS A–Z — alphabetised conditions grid (s.specialismsAZ)
Broad-funnel SEO + Ctrl+F accessibility lookup. 3-col desktop → 2-col
tablet → 1-col mobile. Letter headings in brand purple; items without a
`url` render as plain text (anti-doorway). Sibling-link reservoir feeding
relatedMesh defaults and the eventual sitemap.
========================================================================= */
.specialisms-section { scroll-margin-top: 90px; }
.specialisms-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 4px;
margin: 0 auto clamp(28px, 4vw, 44px);
max-width: 720px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--c-cream-deep);
border-radius: var(--r-pill);
box-shadow: var(--shadow-soft);
font-family: var(--sans);
}
.specialisms-jump a {
display: inline-grid;
place-items: center;
min-width: 30px;
height: 30px;
padding: 0 8px;
border-radius: var(--r-pill);
color: var(--primary);
font-weight: 700;
font-size: .88rem;
letter-spacing: .04em;
text-decoration: none;
transition: background-color 140ms ease, color 140ms ease;
}
.specialisms-jump a:hover,
.specialisms-jump a:focus-visible {
background: var(--primary);
color: #fff;
outline: none;
}
.specialisms-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 56px);
align-items: start;
}
.specialisms-group {
/* avoid orphan letter at column-break */
break-inside: avoid;
page-break-inside: avoid;
}
.specialisms-letter {
margin: 0 0 10px;
padding: 0 0 8px;
font-family: var(--sans);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: .04em;
color: var(--primary);
border-bottom: 2px solid var(--c-cream-deep);
/* keep the letter sticky on tall columns so the eye anchors as you scan */
position: relative;
}
.specialisms-letter::after {
content: "";
display: block;
width: 28px;
height: 2px;
margin-top: 6px;
background: var(--accent);
border-radius: 2px;
}
.specialisms-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: .98rem;
line-height: 1.4;
}
.specialisms-item a {
display: inline-block;
color: var(--ink);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
.specialisms-item a:hover,
.specialisms-item a:focus-visible {
color: var(--primary);
border-bottom-color: currentColor;
outline: none;
}
.specialisms-item--stub span {
color: var(--mute);
font-weight: 500;
cursor: default;
}
/* small dot hint that the topic exists in scope but the page isn't built yet */
.specialisms-stub-tag {
display: inline-block;
margin-left: 4px;
color: var(--c-cream-deep);
font-weight: 700;
transform: translateY(-1px);
}
.specialisms-footnote {
margin: clamp(28px, 4vw, 44px) auto 0;
max-width: 56ch;
text-align: center;
font-size: .9rem;
color: var(--mute);
}
/* Tablet — 2 columns */
@media (max-width: 960px) {
.specialisms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
}
/* Mobile — 1 column, slightly tighter list */
@media (max-width: 600px) {
.specialisms-grid { grid-template-columns: 1fr; gap: 24px; }
.specialisms-letter { font-size: 1.25rem; }
.specialisms-jump { padding: 10px 12px; }
.specialisms-jump a { min-width: 26px; height: 26px; font-size: .82rem; }
}
/* =========================================================================
INSURANCE ACCEPTED — greyscale insurer strip + EAP note + inline FAQ
Neutral trust strip; logos use `currentColor` so a single CSS rule sets the
greyscale tone for the whole row. `not-accepted` insurers stay visible but
dimmed with a status badge (honesty signal).
========================================================================= */
.insurers-section { scroll-margin-top: 90px; }
.insurers-grid {
list-style: none; margin: 0 auto; padding: 0;
max-width: 880px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
}
.insurer {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 22px 14px 18px;
background: var(--surface);
border: 1px solid var(--c-cream-deep);
border-radius: var(--r-md);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.insurer:hover { transform: translateY(-1px); border-color: var(--c-cream-deeper, var(--c-cream-deep)); box-shadow: var(--shadow-card); }
.insurer-mark {
display: flex; align-items: center; justify-content: center;
height: 40px; width: 120px;
color: #4a4a4a;
}
.insurer-mark img {
max-height: 40px; max-width: 120px; width: auto; height: auto;
display: block;
/* Force greyscale even if a real brand SVG with colour is dropped in later */
filter: grayscale(1);
opacity: .82;
}
.insurer-wordmark {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 800; font-size: 1.25rem;
letter-spacing: -.02em;
color: #4a4a4a;
text-transform: uppercase;
}
.insurer-status {
font-size: .72rem; letter-spacing: .04em;
color: var(--mute); text-align: center;
line-height: 1.3;
}
/* Dimmed / honesty-signal state for insurers we don't accept */
.insurer--not-accepted .insurer-mark { opacity: .42; }
.insurer--not-accepted .insurer-mark img { opacity: .42; }
.insurer--not-accepted .insurer-status {
color: var(--c-crimson, var(--cta));
font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
font-size: .66rem;
}
.insurers-eap {
display: flex; gap: 12px; align-items: flex-start;
max-width: 720px;
margin: 26px auto 0;
padding: 14px 18px;
background: var(--surface-tint);
border: 1px dashed var(--c-cream-deep);
border-radius: var(--r-sm);
color: var(--ink); font-size: .92rem; line-height: 1.55;
}
.insurers-eap svg { width: 20px; height: 20px; color: var(--primary); flex: none; margin-top: 2px; }
.insurers-eap a { color: var(--primary); font-weight: 600; }
.insurers-faq {
max-width: 760px;
margin: 28px auto 0;
}
.insurers-faq .faq + .faq { margin-top: 8px; }
/* Mobile — 2 columns minimum, tighter padding */
@media (max-width: 600px) {
.insurers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.insurer { padding: 16px 10px 14px; }
.insurer-mark { height: 32px; width: 100px; }
.insurer-mark img { max-height: 32px; max-width: 100px; }
.insurer-wordmark { font-size: 1.05rem; }
.insurers-eap { font-size: .88rem; padding: 12px 14px; }
}
/* =========================================================================
BOOK CARD — author authority block (s.bookCard)
Transparent-cropped book floats inline; body text wraps around it at every
viewport. Brand-purple title, cream "press_quote" pull, crimson CTA buys.
========================================================================= */
.bookcard {
display: block;
}
.bookcard::after {
content: "";
display: block;
clear: both;
}
.bookcard-cover {
float: left;
width: clamp(130px, 26%, 200px);
margin: 6px clamp(20px, 3vw, 36px) 12px 0;
shape-outside: margin-box;
}
.bookcard-cover img {
display: block;
width: 100%;
height: auto;
/* Transparent PNG/WebP keeps its own 3D drop shadow; drop-shadow filter
adds a soft brand-purple lift behind the floating cover */
filter: drop-shadow(0 14px 28px rgba(81, 45, 127, .22));
}
.bookcard-body { min-width: 0; }
.bookcard-heading {
margin: 0 0 4px;
font-size: .82rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mute);
}
.bookcard-title {
margin: 0 0 6px;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 1.15;
color: var(--primary);
}
.bookcard-subtitle {
margin: 0 0 14px;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
font-style: italic;
color: var(--accent);
}
.bookcard-author {
margin: 0 0 18px;
font-size: .95rem;
color: var(--mute);
}
.bookcard-author span { color: var(--ink); font-weight: 600; }
.bookcard-blurb {
font-size: 1rem;
line-height: 1.65;
color: var(--ink);
}
.bookcard-blurb p { margin: 0 0 12px; }
.bookcard-blurb p:last-child { margin-bottom: 0; }
/* Press quote — cream pull within the card with a lavender left rule */
.bookcard-quote {
margin: 22px 0 0;
padding: 14px 18px;
background: var(--c-cream);
border-left: 3px solid var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.bookcard-quote blockquote {
margin: 0;
font-size: 1rem;
font-style: italic;
line-height: 1.5;
color: var(--ink);
}
.bookcard-quote figcaption {
margin-top: 6px;
font-size: .85rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--mute);
}
/* Buy links — outline pills, crimson on hover */
.bookcard-buy {
margin: 24px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.bookcard-buy-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1.5px solid var(--primary);
border-radius: var(--r-pill);
font-size: .92rem;
font-weight: 600;
color: var(--primary);
background: transparent;
text-decoration: none;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.bookcard-buy-link:hover,
.bookcard-buy-link:focus-visible {
background: var(--cta);
border-color: var(--cta);
color: #fff;
transform: translateY(-1px);
}
.bookcard-buy-ico { display: inline-flex; }
.bookcard-buy-ico svg { width: 14px; height: 14px; }
/* Shop CTA — solid primary button to Keeley's online products shop */
.bookcard-shop { margin: 24px 0 0; }
.bookcard-shop-btn {
display: inline-flex;
align-items: center;
gap: 9px;
}
.bookcard-shop-ico { display: inline-flex; }
.bookcard-shop-ico svg { width: 18px; height: 18px; }
/* Mobile: tighter floated cover (wider %, smaller cap), trimmed type */
@media (max-width: 760px) {
.bookcard-cover {
width: 36%;
max-width: 160px;
margin: 4px 18px 8px 0;
}
.bookcard-title { font-size: clamp(1.5rem, 5.5vw, 1.9rem); }
.bookcard-subtitle { font-size: 1rem; }
.bookcard-buy { gap: 8px; }
.bookcard-buy-link { padding: 9px 14px; font-size: .88rem; }
}
@media (max-width: 380px) {
.bookcard-cover {
width: 40%;
margin-right: 14px;
}
}
/* =========================================================================
PRESS QUOTES — s.pressQuotes(d)
Card grid; upgrade of .press wordmark strip with real pull-quotes + dates.
Two variants per card (controlled by .pquote-card--logo): full quote OR
logo-only fallback. Mixed grids are intentional — degrade cleanly while
real quotes are being sourced.
========================================================================= */
.pquotes .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.pquotes-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 960px) {
.pquotes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.pquotes-grid { grid-template-columns: 1fr; gap: 16px; }
}
.pquote-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: clamp(20px, 2.4vw, 28px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md, 14px);
box-shadow: 0 2px 0 rgba(81, 45, 127, .04);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pquote-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 10px 28px rgba(81, 45, 127, .10);
}
.pquote-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.pquote-outlet {
font-family: var(--serif, Georgia, 'Times New Roman', serif);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
font-weight: 600;
letter-spacing: .01em;
color: var(--primary);
line-height: 1.1;
}
.pquote-logo { display: inline-flex; align-items: center; }
.pquote-logo img {
display: block;
max-height: 28px;
width: auto;
max-width: 140px;
object-fit: contain;
opacity: .9;
}
.pquote-date {
font-size: .8rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mute);
white-space: nowrap;
flex-shrink: 0;
}
.pquote-figure { margin: 0; flex: 1 1 auto; }
.pquote-quote {
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.1rem);
line-height: 1.55;
font-style: italic;
color: var(--ink);
/* hanging-quote rhythm — the opening glyph sits in the gutter */
text-indent: -.35em;
}
.pquote-mark {
color: var(--accent);
font-style: normal;
font-weight: 700;
font-size: 1.05em;
line-height: 0;
}
.pquote-context {
margin: 10px 0 0;
font-size: .88rem;
color: var(--mute);
font-style: italic;
}
/* Logo-fallback variant: centre the wordmark, give the card breathing room
so a card-mix grid still feels balanced (the quote card defines the row
height; the logo card stretches to match). */
.pquote-card--logo {
align-items: center;
text-align: center;
justify-content: center;
min-height: 140px;
}
.pquote-card--logo .pquote-head {
padding-bottom: 0;
border-bottom: 0;
flex-direction: column;
align-items: center;
gap: 8px;
}
.pquote-card--logo .pquote-outlet {
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}
.pquote-context--logo { margin: 0; }
.pquote-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
font-size: .9rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .18s ease, border-color .18s ease;
}
.pquote-card--logo .pquote-link { align-self: center; }
.pquote-link:hover,
.pquote-link:focus-visible {
color: var(--cta);
border-bottom-color: var(--cta);
}
@media (prefers-reduced-motion: reduce) {
.pquote-card { transition: none; }
.pquote-card:hover { transform: none; }
}
/* ============================================================================
MODALITIES GRID — s.modalitiesGrid(d)
How the therapist works. 3-col → 2-col → 1-col responsive.
Two badge states (Trust / honesty signals):
.mod-badge — qualified: true ("Trained in" + check-badge ico)
.mod-badge--partial — qualified: 'partial' ("Tools I use", no claim)
Linked cards lift on hover; unlinked stubs remain static (anti-doorway).
========================================================================= */
.mod-section .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.mod-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 900px) {
.mod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.mod-grid { grid-template-columns: 1fr; gap: 16px; }
}
.mod-card {
display: flex;
}
.mod-card-inner {
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(22px, 2.4vw, 30px);
width: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md, 14px);
box-shadow: 0 2px 0 rgba(81, 45, 127, .04);
color: var(--ink);
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mod-card--linked .mod-card-inner:hover,
.mod-card--linked .mod-card-inner:focus-visible {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: 0 12px 32px rgba(81, 45, 127, .12);
outline: none;
}
.mod-card-inner:focus-visible {
outline: 2px solid var(--cta);
outline-offset: 3px;
}
.mod-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 28px;
}
.mod-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-tint);
color: var(--accent);
}
.mod-card-icon svg { width: 20px; height: 20px; }
.mod-badge {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--primary);
background: color-mix(in srgb, var(--primary) 10%, transparent);
border-radius: 999px;
white-space: nowrap;
}
.mod-badge-ico { display: inline-flex; }
.mod-badge-ico svg { width: 14px; height: 14px; }
.mod-badge--partial {
color: var(--mute);
background: transparent;
border: 1px dashed var(--line);
letter-spacing: .04em;
}
.mod-card-title {
margin: 0;
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-family: var(--serif, Georgia, 'Times New Roman', serif);
color: var(--primary);
line-height: 1.2;
}
.mod-card-blurb {
margin: 0;
color: var(--mute);
font-size: .96rem;
line-height: 1.55;
flex: 1 1 auto;
}
.mod-card-blurb p { margin: 0 0 10px; }
.mod-card-blurb p:last-child { margin-bottom: 0; }
.mod-card-more {
margin-top: auto;
padding-top: 4px;
font-size: .9rem;
font-weight: 600;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 6px;
}
.mod-card--linked .mod-card-inner:hover .mod-card-more,
.mod-card--linked .mod-card-inner:focus-visible .mod-card-more {
color: var(--cta);
}
.mod-card-more span { transition: transform .25s ease; }
.mod-card--linked .mod-card-inner:hover .mod-card-more span,
.mod-card--linked .mod-card-inner:focus-visible .mod-card-more span {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
.mod-card-inner,
.mod-card-more span { transition: none; }
.mod-card--linked .mod-card-inner:hover,
.mod-card--linked .mod-card-inner:focus-visible { transform: none; }
}
/* =========================================================================
COMPARISON TABLE — s.comparisonTable(d) (T18, #9640)
Real for accessibility + structured-data clarity. Side-by-side on
desktop (any column count), stacked cards on mobile (≤640px). Visually-
hidden thead on mobile keeps AT semantics intact while .comp-cell-title
(aria-hidden) provides the inline label for sighted users.
========================================================================= */
.comp-section { scroll-margin-top: 90px; }
.comp-card {
background: var(--surface);
border: 1px solid var(--c-cream-deep);
border-top: 4px solid var(--primary);
border-radius: var(--r-md);
padding: clamp(8px, 1.5vw, 14px);
box-shadow: var(--shadow-card);
max-width: 980px;
margin-inline: auto;
overflow: hidden; /* clip rounded-corner alt-row tints */
}
.comp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-size: 1rem;
}
.comp-caption {
caption-side: top;
text-align: left;
font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--mute); font-weight: 600;
padding: 0 12px 12px;
}
.comp-colhead {
text-align: left;
padding: 18px clamp(16px, 2vw, 22px);
background: var(--primary);
color: #fff;
border-bottom: 0;
vertical-align: top;
}
.comp-colhead:first-child { border-top-left-radius: calc(var(--r-md) - 4px); }
.comp-colhead:last-child { border-top-right-radius: calc(var(--r-md) - 4px); }
.comp-colhead-inner {
display: inline-flex; align-items: center; gap: 12px;
line-height: 1.25;
}
.comp-colhead-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.14);
color: #fff;
flex-shrink: 0;
}
.comp-colhead-ico svg { width: 18px; height: 18px; }
.comp-colhead-text { display: inline-flex; flex-direction: column; }
.comp-colhead-title {
font-family: var(--serif);
font-weight: 700;
font-size: 1.18rem;
letter-spacing: -.01em;
}
.comp-colhead-sub {
font-size: .82rem;
font-weight: 500;
color: rgba(255,255,255,.78);
margin-top: 2px;
}
.comp-cell {
vertical-align: top;
padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 22px);
background: var(--surface);
border-top: 1px solid var(--line);
}
/* Alternate column tint, but ONLY on 3+ column tables — on a 2-col side-by-side
"X vs Y" the two columns are equal-weight options, and tinting just one of
them reads as visual hierarchy (left = standard, right = alternative). For
2-col tables both cells stay on --surface; for 3-4 cols the alternation
helps the eye track column boundaries (fees-table-style). Mobile stacks the
cells into rows where this same parity rule reads as helpful row-banding,
so the mobile @media block re-applies the unscoped version. */
.comp-table[data-cols="3"] .comp-cell:nth-child(even),
.comp-table[data-cols="4"] .comp-cell:nth-child(even) { background: var(--surface-tint); }
.comp-cell:not(:first-child) { border-left: 1px solid var(--c-cream-deep); }
.comp-cell:last-child { border-bottom-right-radius: calc(var(--r-md) - 4px); }
.comp-cell:first-child { border-bottom-left-radius: calc(var(--r-md) - 4px); }
/* Mobile-only in-cell column label — hidden on desktop (thead provides it) */
.comp-cell-title { display: none; }
.comp-cell-note {
margin: 14px 0 0;
font-size: .92rem;
color: var(--mute);
font-style: italic;
}
/* Bullet list inside each cell — accent-coloured dot + sage hairline ring
(same vocabulary as .art-signs and .approach lists, kept tight at 1-col). */
.comp-points {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.comp-points li {
position: relative;
padding: 2px 0 2px 30px;
line-height: 1.5;
color: var(--ink);
}
.comp-points li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 18px; height: 18px;
border-radius: 50% 0 50% 50%;
background: var(--surface);
border: 1.5px solid var(--c-sage);
}
.comp-points li::after {
content: "";
position: absolute;
left: 5px; top: 10px;
width: 7px; height: 4px;
border-left: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
}
/* In a tinted (cream) cell, the dot ring should sit on cream, not white. Only
tinted cells exist on 3-4 col tables (per the data-cols-scoped rule above)
and on stacked mobile rows. */
.comp-table[data-cols="3"] .comp-cell:nth-child(even) .comp-points li::before,
.comp-table[data-cols="4"] .comp-cell:nth-child(even) .comp-points li::before { background: var(--surface-tint); }
@media (max-width: 640px) {
.comp-cell:nth-child(even) .comp-points li::before { background: var(--surface-tint); }
}
.comp-footnote {
max-width: 60ch;
margin: clamp(20px, 2.4vw, 30px) auto 0;
text-align: center;
font-size: .98rem;
color: var(--mute);
font-style: italic;
}
.comp-footnote b, .comp-footnote strong { color: var(--primary); font-style: normal; }
/* ---- Mobile: stacked cards (≤640px) ---- */
@media (max-width: 640px) {
.comp-card { padding: 0; border-radius: var(--r-md); }
.comp-table { display: block; }
/* Visually hide thead but keep it in the AT tree so screen readers still
announce column headers when navigating cells. */
.comp-table thead,
.comp-table thead tr,
.comp-table thead th {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.comp-table tbody,
.comp-table tbody tr,
.comp-table tbody td { display: block; width: 100%; }
.comp-cell {
border-left: 0 !important;
border-top: 1px solid var(--line);
border-radius: 0;
padding: clamp(18px, 5vw, 24px) clamp(16px, 5vw, 22px);
background: var(--surface);
}
/* First cell adopts the top brand-purple stripe from .comp-card so the
card header doesn't look orphaned once thead is hidden. */
.comp-cell:first-child { border-top: 0; }
/* Cream tint for every other card stays — but on column axis it was
:nth-child(even) on td; on mobile each td is its own row so the parity
check still works (cell 1=white, cell 2=cream, etc.). */
.comp-cell:nth-child(even) { background: var(--surface-tint); }
/* Show the in-cell column label as a card header. */
.comp-cell-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--c-cream-deep);
}
.comp-cell-title-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--primary);
color: #fff;
flex-shrink: 0;
}
.comp-cell-title-ico svg { width: 18px; height: 18px; }
.comp-cell-title-text { display: inline-flex; flex-direction: column; }
.comp-cell-title-main {
font-family: var(--serif);
font-weight: 700;
font-size: 1.15rem;
color: var(--primary);
letter-spacing: -.01em;
}
.comp-cell-title-sub {
font-size: .82rem;
color: var(--mute);
margin-top: 2px;
}
.comp-caption { padding: 16px 18px 0; }
}
/* ---- 3+ columns: shrink head font slightly on narrow desktop ---- */
@media (max-width: 900px) and (min-width: 641px) {
.comp-table[data-cols="3"] .comp-colhead-title,
.comp-table[data-cols="4"] .comp-colhead-title { font-size: 1.05rem; }
.comp-table[data-cols="3"] .comp-cell,
.comp-table[data-cols="4"] .comp-cell { padding-inline: 14px; }
}
/* =========================================================================
NEWSLETTER SIGNUP — s.newsletterSignup(d)
Two-column card: magnet (cover + pitch) left, single-email form right.
Mobile (≤760px) stacks form under magnet. The form is intentionally short
— name optional, one email field, one button — because every extra field
on a therapy opt-in halves conversion.
========================================================================= */
.news-section { position: relative; }
.news-card {
background: #fff;
border: 1px solid var(--line);
border-top: 4px solid var(--primary);
border-radius: var(--r-lg);
box-shadow: 0 30px 80px -50px rgba(81, 45, 127, .35);
padding: clamp(28px, 4vw, 44px);
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 48px);
align-items: start;
max-width: 1040px;
margin: 0 auto;
}
/* ---- Magnet column (cover + body) ---- */
.news-magnet {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.news-cover {
margin: 0;
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface-tint);
/* drop-shadow on the wrapper, NOT box-shadow on the img — keeps 3D mockups
with built-in shadows looking clean (no double-shadow stacking) */
filter: drop-shadow(0 18px 30px rgba(81, 45, 127, .22));
}
.news-cover img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 3 / 4;
}
.news-cover--placeholder {
aspect-ratio: 3 / 4;
display: grid;
place-items: center;
color: var(--accent);
background: linear-gradient(160deg, var(--c-cream) 0%, var(--surface-tint) 100%);
border: 1px dashed var(--c-cream-deep);
}
.news-cover--placeholder svg { width: 56px; height: 56px; opacity: .55; }
.news-magnet-body .eyebrow { display: inline-block; margin-bottom: 10px; }
.news-magnet-pills {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 0 0 12px;
}
.news-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
background: var(--surface-tint);
color: var(--primary);
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--c-cream-deep);
}
.news-pill--format { background: rgba(121, 96, 160, .12); border-color: rgba(121, 96, 160, .35); }
.news-pill svg { width: 12px; height: 12px; }
.news-heading {
font-family: var(--serif);
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
line-height: 1.2;
color: var(--primary);
margin: 0 0 8px;
letter-spacing: -.01em;
}
.news-magnet-title { margin: 0 0 12px; color: var(--ink); font-size: 1rem; }
.news-magnet-title b { color: var(--c-plum-deep); font-weight: 700; }
.news-intro { margin: 0 0 14px; color: var(--mute); font-size: .95rem; line-height: 1.6; }
.news-intro p { margin: 0 0 8px; }
.news-intro p:last-child { margin-bottom: 0; }
.news-sample { margin: 14px 0 0; }
.news-sample a {
display: inline-flex; align-items: center; gap: 8px;
font-size: .88rem; font-weight: 600;
color: var(--primary);
text-decoration: underline; text-underline-offset: 3px;
}
.news-sample a:hover { color: var(--cta); }
.news-sample svg { width: 14px; height: 14px; }
/* ---- Form column ---- */
.news-form {
background: var(--surface-tint);
border: 1px solid var(--c-cream-deep);
border-radius: var(--r-md);
padding: clamp(22px, 3vw, 30px);
display: flex;
flex-direction: column;
gap: 14px;
}
.news-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.news-field { display: flex; flex-direction: column; gap: 6px; }
.news-field label {
font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
color: var(--c-plum-deep);
display: flex; align-items: baseline; gap: 6px;
}
.news-field label small {
font-size: .68rem; font-weight: 500; text-transform: none; letter-spacing: 0;
color: var(--mute);
}
.news-req { color: var(--c-crimson); }
.news-field input {
width: 100%;
font: inherit;
font-size: 1rem;
color: var(--ink);
background: #fff;
border: 1.5px solid var(--c-cream-deep);
border-radius: var(--r-sm);
padding: 12px 14px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.news-field input::placeholder { color: var(--mute); opacity: .7; }
.news-field input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(81, 45, 127, .15);
}
/* Use :user-invalid (NOT :invalid) so empty required fields aren't red on first
paint — they only highlight after interaction/submit attempt. */
.news-field input:user-invalid {
border-color: var(--c-crimson);
box-shadow: 0 0 0 3px rgba(204, 0, 48, .12);
}
.news-input-wrap { position: relative; }
.news-input-wrap input { padding-left: 42px; }
.news-input-ico {
position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
color: var(--accent);
pointer-events: none;
display: inline-flex;
}
.news-input-ico svg { width: 18px; height: 18px; }
.news-submit { margin-top: 4px; }
.news-submit .btn { width: 100%; justify-content: center; }
.news-freq {
display: flex; align-items: flex-start; gap: 10px;
margin: 4px 0 0;
font-size: .82rem;
color: var(--mute);
line-height: 1.5;
}
.news-freq-ico { display: inline-flex; flex: none; color: var(--accent); margin-top: 2px; }
.news-freq-ico svg { width: 14px; height: 14px; }
.news-freq a {
color: var(--primary);
text-decoration: underline; text-underline-offset: 2px;
font-weight: 600;
}
.news-freq a:hover { color: var(--cta); }
.news-provider { margin: 0; text-align: center; }
.news-provider small { font-size: .72rem; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; }
/* ---- Status panels (matches contactForm cf-status visual language) ---- */
.news-status {
margin-top: 10px;
padding: 14px 16px;
border: 1px solid;
border-radius: var(--r-md);
font-size: .92rem;
line-height: 1.5;
}
.news-status h3 { font-size: 1.05rem; margin: 0 0 6px; }
.news-status p { margin: 0; }
.news-status a { color: inherit; text-decoration: underline; font-weight: 600; }
.news-status--success { background: rgba(155, 134, 184, .12); border-color: var(--c-sage); color: var(--c-plum-deep); }
.news-status--success h3 { color: var(--primary); }
.news-status--pending { background: #fff; border-color: var(--c-cream-deep); color: var(--ink); }
.news-status--pending h3 { color: var(--c-plum-deep); }
.news-status--error { background: rgba(204, 0, 48, .06); border-color: rgba(204, 0, 48, .35); color: var(--c-crimson-deep); }
.news-status--error h3 { color: var(--c-crimson); }
/* ---- Tablet: tighten the magnet column ---- */
@media (max-width: 980px) {
.news-card { grid-template-columns: 1fr; gap: 28px; }
.news-magnet { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
}
/* ---- Mobile: stack cover above body so the title leads ---- */
@media (max-width: 560px) {
.news-card { padding: 24px 20px; }
.news-magnet { grid-template-columns: 1fr; gap: 18px; text-align: left; }
.news-cover { width: 140px; }
.news-heading { font-size: 1.25rem; }
.news-form { padding: 20px; }
}
/* ============ VENUE BAND — practice/room photo gallery (added #9730) ============ */
.venue-section { position: relative; }
.venue-grid {
display: grid;
gap: clamp(14px, 1.6vw, 22px);
}
/* --- strip layout: 3-up balanced row --- */
.venue-grid--strip {
grid-template-columns: repeat(3, 1fr);
}
/* --- feature layout: 1 large + 2 stacked smalls --- */
.venue-grid--feature {
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
gap: clamp(12px, 1.4vw, 20px);
aspect-ratio: 12 / 7;
max-height: 640px;
}
.venue-grid--feature .venue-card:first-child {
grid-row: 1 / 3;
}
.venue-card {
margin: 0;
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 12px 30px rgba(40, 25, 80, .08);
background: var(--c-cream);
transition: transform .35s ease, box-shadow .35s ease;
}
.venue-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(40, 25, 80, .14);
}
.venue-card img {
display: block;
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
object-position: center;
}
.venue-grid--feature .venue-card img { min-height: 0; }
.venue-card figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 14px 16px 12px;
background: linear-gradient(to top, rgba(31, 18, 50, .82) 0%, rgba(31, 18, 50, .55) 60%, rgba(31, 18, 50, 0) 100%);
color: #fff;
font-size: .92rem;
line-height: 1.35;
letter-spacing: .01em;
font-weight: 500;
}
.venue-cta { text-align: center; margin-top: clamp(20px, 2.4vw, 32px); }
/* --- tablet --- */
@media (max-width: 900px) {
.venue-grid--strip { grid-template-columns: repeat(2, 1fr); }
.venue-grid--strip > :nth-child(3) { grid-column: span 2; aspect-ratio: 16/8; }
.venue-grid--strip > :nth-child(3) img { min-height: 0; }
.venue-grid--feature { aspect-ratio: auto; max-height: none; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.venue-grid--feature .venue-card:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/9; }
.venue-grid--feature .venue-card:first-child img { min-height: 0; }
}
/* --- mobile --- */
@media (max-width: 560px) {
.venue-grid--strip,
.venue-grid--feature { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; max-height: none; }
.venue-grid--strip > :nth-child(3),
.venue-grid--feature .venue-card:first-child { grid-column: auto; aspect-ratio: 16/10; }
.venue-card img { aspect-ratio: 16/10; min-height: 0; }
}