/* RM Attorneys. Mobile first. Breakpoints: 600px, 960px, 1200px. */

/* Fonts (self-hosted) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-400.woff2") format("woff2"); }
/* Quotes only (brand rule). Downloaded only on pages that show a quote. */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-italic.woff2") format("woff2"); }

/* Metric-matched fallbacks, so text does not jump when the web fonts swap in. */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 112.8%; ascent-override: 85.8%; descent-override: 22.3%; line-gap-override: 0%; }
@font-face { font-family: "Open Sans Fallback"; src: local("Arial"); size-adjust: 105.5%; ascent-override: 101.5%; descent-override: 27.8%; line-gap-override: 0%; }

:root {
	--olive: #D0D556;
	--olive-deep: #BEC33F;
	--charcoal: #777777;
	--ink: #2B2B2B;
	--ink-soft: #4A4A4A;
	--line: #E4E4E4;
	--white: #FFFFFF;
	--grey: #F8F8F8;
	--on-dark: #FFFFFF;
	--on-dark-soft: #C9C9C9;

	--font-head: "Montserrat", "Montserrat Fallback", Arial, sans-serif;
	--font-body: "Open Sans", "Open Sans Fallback", Arial, sans-serif;

	--gutter: 20px;
	--max: 1180px;
	--radius: 10px;
	--radius-lg: 22px;
	--section-y: 72px;
	--header-h: 84px;
	--shadow: 0 1px 2px rgba(43, 43, 43, .04), 0 8px 24px rgba(43, 43, 43, .06);
	--shadow-lift: 0 2px 4px rgba(43, 43, 43, .05), 0 14px 32px rgba(43, 43, 43, .09);
	--ease: cubic-bezier(.2, .7, .2, 1);
	/* Calm arrivals: fast start, long soft settle. */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 960px) {
	:root { --gutter: 32px; --section-y: 112px; --header-h: 108px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* --admin-offset is the WordPress admin bar height when logged in (0 for visitors).
   In-page links and keyboard focus scroll to just below the sticky header and the admin bar. */
:root { --admin-offset: 0px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--admin-offset) + 16px); }
:target { scroll-margin-top: calc(var(--header-h) + var(--admin-offset) + 16px); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	overflow-x: clip;
	/* Room for the fixed header. Same variable as the header height, so nothing ever sits under it. */
	padding-top: var(--header-h);
}
@media (min-width: 960px) { body { font-size: 1.0625rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Balanced heading lines. (Not on every paragraph: that costs the browser too much layout time.) */
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
/* Long words (and long addresses or emails) wrap instead of running off narrow screens. */
h1, h2, h3, p, li, a, label, address { overflow-wrap: break-word; }
/* Browser surfaces in the brand colours. */
::selection { background: var(--olive); color: var(--ink); }
input, textarea { caret-color: var(--ink); }
/* Registered mark (FPSA®, FISA®): small and raised, the same everywhere. */
.reg { font-size: .55em; line-height: 0; vertical-align: super; margin-left: .06em; font-weight: inherit; }
/* No double-tap zoom delay on links and form controls. */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
cite { font-style: italic; }
button { font: inherit; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus: always visible for keyboard users */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.site-header :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible,
.card--cta :focus-visible { outline-color: var(--olive); }
#main:focus { outline: none; }

/* Fixed and above the header, so it is visible when focused even mid-page. */
.skip-link {
	position: fixed; left: 12px; top: -100px; z-index: 1100;
	background: var(--olive); color: var(--ink); padding: 12px 18px;
	font-family: var(--font-head); font-weight: 600; text-decoration: none; border-radius: 6px;
}
.skip-link:focus { top: calc(12px + var(--admin-offset)); }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 50px; padding: 12px 26px; text-align: center;
	font-family: var(--font-head); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
	text-decoration: none; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease-out);
}
.btn--olive { background: var(--olive); border-color: var(--olive); color: var(--ink); }
.btn--olive:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--olive); border-color: var(--olive); }
/* A small press, so every button answers the tap. */
.btn:active { transform: scale(.97); }
.btn--block { width: 100%; }
/* Button pairs (Rumana, 16 Oct 2026): every button in a row has the same width and height.
   Phones and small tablets (under 768px, where the Call button shows): stacked, full width.
   768px and up: side by side, each as wide as the widest button in the row, all the same height. */
/* grid-auto-rows: 1fr keeps the heights equal even if one label wraps (only at 320px, in narrow cards). */
.btn-row { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 12px; width: 100%; align-self: stretch; }
@media (min-width: 768px) {
	.btn-row { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: auto; align-self: auto; flex: none; vertical-align: top; }
	.btn-row .btn { white-space: nowrap; }
}

.link-arrow {
	display: inline-flex; align-items: center; gap: .45em;
	font-family: var(--font-head); font-weight: 600; font-size: 1rem;
	color: var(--ink); text-decoration: none;
	padding: 6px 0; border-bottom: 2px solid var(--olive);
	transition: gap .2s var(--ease), border-color .2s var(--ease);
}
.link-arrow .icon { width: 18px; height: 18px; flex: none; }
.link-arrow:hover { gap: .7em; border-bottom-color: var(--ink); }

/* Sections */
.section { padding: var(--section-y) 0; }
.section--white { background: var(--white); }
.section--grey { background: var(--grey); }

.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.section-title {
	font-size: 1.75rem; font-weight: 600; color: var(--charcoal); letter-spacing: -.01em;
}
.section-title::before {
	content: ""; display: block; width: 44px; height: 3px; background: var(--olive);
	border-radius: 2px; margin-bottom: 18px;
}
.section-intro { margin-top: 14px; font-size: 1.0625rem; color: var(--ink-soft); }
@media (min-width: 960px) { .section-title { font-size: 2rem; } .section-head { margin-bottom: 56px; } }

.eyebrow {
	font-family: var(--font-head); font-weight: 600; font-size: .875rem;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px;
}
.eyebrow::before {
	content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 3px; margin: -2px 12px 0 0;
	background: var(--olive); border-radius: 2px;
}

.icon { width: 24px; height: 24px; }

/* Header */
/* Fixed header: pinned to the top of the screen on every device, always.
   position: fixed (not sticky) because sticky silently stops working when a parent element
   (or CSS from another plugin, for example html { overflow-x: hidden }) creates a scroll box.
   The body has padding-top equal to --header-h, so content starts below it and nothing jumps.
   When logged in, it sits just under the WordPress admin bar: 32px on desktop, 46px on mobile. */
.site-header {
	position: fixed; top: var(--admin-offset); left: 0; right: 0; z-index: 1000;
	background: var(--ink); color: var(--on-dark);
}
html:has(> body.admin-bar), body.admin-bar { --admin-offset: 32px; }
@media (max-width: 782px) { html:has(> body.admin-bar), body.admin-bar { --admin-offset: 46px; } }
/* Exact height (not min-height), so the header always matches the body's padding-top. */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
/* Logo 25% larger (Rae, 3 Oct 2026) inside the same header height: 84px mobile, 108px desktop.
   Vertical clear space is now a little under the height of the "R"; see BUILD-REPORT.md. */
.site-header__logo { display: block; padding: 14px 20px 14px 0; flex: none; }
.site-header__logo img { height: 55px; width: auto; }
@media (min-width: 960px) { .site-header__logo { padding: 19px 26px 19px 0; } .site-header__logo img { height: 70px; } }

.nav-toggle {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 44px; padding: 8px 12px; margin-right: -12px;
	background: transparent; border: 0; color: var(--on-dark); cursor: pointer;
	font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
}
.nav-toggle__bars { position: relative; width: 22px; height: 16px; }
.nav-toggle__bars span {
	position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform .25s var(--ease), opacity .2s, top .25s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.site-nav {
	position: absolute; top: 100%; left: 0; right: 0;
	background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 8px var(--gutter) 24px;
	display: none;
	/* The open menu scrolls on its own if a short phone screen cannot fit it. */
	max-height: calc(100vh - var(--header-h) - var(--admin-offset));
	max-height: calc(100dvh - var(--header-h) - var(--admin-offset));
	overflow-y: auto; overscroll-behavior: contain;
}
.site-nav.is-open { display: block; }
.no-js .site-nav { display: block; }
.nav__list { list-style: none; }
.nav__list a {
	display: block; padding: 14px 0; font-family: var(--font-head); font-weight: 600;
	color: var(--on-dark); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: color .2s var(--ease);
}
.nav__list a:hover, .nav__list .current-menu-item > a { color: var(--olive); }
.site-nav__cta { margin-top: 20px; width: 100%; }

@media (min-width: 1040px) {
	.nav-toggle { display: none; }
	.site-nav {
		position: static; display: flex !important; align-items: center; gap: 36px;
		padding: 0; border: 0; background: none;
		max-height: none; overflow: visible;
	}
	.nav__list { display: flex; gap: 30px; }
	.nav__list a { padding: 8px 0; border: 0; position: relative; font-size: .9688rem; }
	.nav__list a::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
		background: var(--olive); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
	}
	.nav__list a:hover::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); }
	.site-nav__cta { margin: 0; width: auto; min-height: 46px; padding: 10px 22px; }
}

/* Hero */
/* Space below the hero content (Rae, 9 Oct 2026): about 2 cm (76px) on desktop, 40px on phones,
   56px in between. Nothing else adds space at the bottom of the hero. */
.hero { padding: 40px 0 40px; background: var(--white); }
@media (min-width: 600px) { .hero { padding-bottom: 56px; } }
.hero__grid { display: grid; gap: 40px; align-items: center; }
.hero__title {
	font-size: 2.5rem; font-weight: 600; color: var(--charcoal); letter-spacing: -.02em; line-height: 1.12;
	max-width: 17ch;
}
.hero__lead { font-size: 1.125rem; color: var(--ink); margin: 20px 0 10px; max-width: 34ch; }
.hero__reach { margin: 0 0 32px; max-width: 42ch; color: var(--ink); }
.hero__media {
	position: relative; margin: 0; background: var(--ink); border-radius: var(--radius-lg);
	overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; width: 100%;
}
/* The photo files are already cropped 4:5 around her face, so the top stays anchored. */
.hero__img {
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
	/* Soft edge: the photo fades into the charcoal panel at the bottom. */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.hero__caption {
	position: absolute; left: 24px; right: 24px; bottom: 22px;
	display: flex; flex-direction: column; gap: 2px; color: var(--on-dark);
}
.hero__caption::before { content: ""; width: 32px; height: 3px; background: var(--olive); border-radius: 2px; margin-bottom: 10px; }
.hero__caption-name { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; }
.hero__caption-role { font-size: .9375rem; color: var(--on-dark-soft); }

@media (min-width: 600px) {
	.hero__title { font-size: 2.75rem; }
	.hero__media { max-width: 460px; }
}
@media (min-width: 960px) {
	.hero { padding: 72px 0 76px; }
	.hero__grid { grid-template-columns: 1.15fr .85fr; gap: 64px; }
	.hero__title { font-size: 3rem; }
	.hero__lead { font-size: 1.25rem; }
	.hero__media { max-width: none; max-height: 640px; justify-self: end; }
	.hero__caption { left: 32px; bottom: 30px; }
}

/* Credentials strip */
.credentials { background: var(--grey); border-block: 1px solid var(--line); }
.credentials__list { list-style: none; display: grid; gap: 0; }
.credentials__item {
	display: flex; align-items: center; gap: 16px; padding: 20px 0;
	font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.credentials__item + .credentials__item { border-top: 1px solid var(--line); }
.credentials__icon {
	flex: none; display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.credentials__icon::after { content: none; }
.credentials__text { display: flex; flex-direction: column; gap: 2px; }
.credentials__sub { font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--ink-soft); }
@media (min-width: 768px) {
	.credentials__list { grid-template-columns: repeat(3, 1fr); }
	.credentials__item { padding: 28px 24px; justify-content: center; }
	.credentials__item:first-child { padding-left: 0; justify-content: flex-start; }
	.credentials__item:last-child { padding-right: 0; justify-content: flex-end; }
	.credentials__item + .credentials__item { border-top: 0; border-left: 1px solid var(--line); }
}

/* Service cards */
.cards { list-style: none; display: grid; gap: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card {
	position: relative; display: flex; flex-direction: column; align-items: flex-start;
	padding: 32px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color .25s var(--ease), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.card::before {
	content: ""; position: absolute; left: 28px; top: -1px; width: 44px; height: 3px;
	background: var(--olive); border-radius: 0 0 2px 2px; transition: width .4s var(--ease-out);
}
/* Hover only on devices that really hover, so a tap on a phone never leaves a card "stuck" raised. */
@media (hover: hover) and (pointer: fine) {
	.card:not(.card--cta):hover { border-color: #D6D6D6; box-shadow: var(--shadow-lift); transform: translateY(-2px); }
	.card:hover::before { width: calc(100% - 56px); }
}
.card:focus-within { border-color: #D6D6D6; box-shadow: var(--shadow); }
.card__icon {
	display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px;
	border-radius: 12px; background: var(--grey); color: var(--ink);
}
.card__title { font-size: 1.1875rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
/* The Shariah title: one item per line, no "|" (rm_title_html()). */
.title-line { display: block; }
.title-line + .title-line { margin-top: 6px; }
.card__text { color: var(--ink-soft); margin-bottom: 24px; flex: 1; }
/* The card link sits at the bottom, so every card in a row lines up. */
.card .link-arrow { margin-top: auto; }
.card--cta { background: var(--ink); border-color: var(--ink); color: var(--on-dark); justify-content: center; gap: 20px; }
.card--cta::before { display: none; }
.card--cta .card__title { color: var(--on-dark); font-size: 1.375rem; }
.card--cta .card__text { color: var(--on-dark-soft); margin-bottom: 0; }
.card--cta .btn--olive:hover { background: var(--white); border-color: var(--white); }
/* Rumana's "For Professionals" and "Education & Training" blocks: a quieter group under the main
   cards, two cards side by side, each with her bullet points. */
.services-group { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .cards--pair { grid-template-columns: repeat(2, 1fr); } }
.card__text--intro { flex: 0 0 auto; margin-bottom: 16px; }
.ticks.card__ticks { margin: 0 0 24px; gap: 10px; grid-template-columns: 1fr; flex: 1; align-content: start; }
.ticks.card__ticks li { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); }
/* Six services fill two full rows; the "Not sure where to start?" card runs underneath as one band. */
.cards .card--cta { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.card--cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 36px 40px; }
}

/* Living outside South Africa? Heading and button on the left, Rumana's list on the right. */
.abroad__grid { display: grid; gap: 32px; align-items: start; }
.abroad__text .section-head { margin-bottom: 28px; }
.ticks.abroad__list { margin: 0; gap: 0; grid-template-columns: 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px 24px; }
.ticks.abroad__list li { font-family: var(--font-body); font-weight: 400; color: var(--ink); padding: 16px 0 16px 32px; }
.ticks.abroad__list li + li { border-top: 1px solid var(--line); }
.ticks.abroad__list li::before { top: calc(16px + .2em); }
@media (min-width: 960px) {
	.abroad__grid { grid-template-columns: .9fr 1.1fr; gap: 72px; }
	.ticks.abroad__list { padding: 8px 32px; }
}

/* Meet Rumana */
/* One grid with named areas. The heading and the body text are separate areas (.meet__text uses
   display: contents), so on wide screens the photo starts on the BODY row: the top of the olive
   frame lines up with the top of the first paragraph. Phones stack heading, photo, then text. */
.meet__grid {
	display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; align-items: start;
	grid-template-areas: "head" "photo" "body";
}
.meet__text { display: contents; }
.meet__text > .section-head { grid-area: head; }
.meet__body { grid-area: body; margin-top: 32px; }
.meet__body > :first-child { margin-top: 0; }
/* Olive frame: one wrapper holds the photo and the frame, so they can never drift apart.
   The frame sits IN FRONT of the photo and evenly AROUND it (--frame-gap on every side),
   and takes its size from the wrapper, which takes its size from the photo. No fixed sizes.
   The wrapper's margin equals the gap, so no side of the frame is ever clipped, and the frame's
   top edge sits exactly at the top of the photo's grid row. */
.meet__media {
	--frame-gap: 8px; --shift: 0px;
	grid-area: photo; align-self: start; position: relative; display: block;
	max-width: min(480px, calc(100% - var(--shift) - var(--frame-gap) * 2));
	margin: var(--frame-gap) var(--frame-gap) var(--frame-gap) calc(var(--frame-gap) + var(--shift));
}
@media (min-width: 600px) { .meet__media { --frame-gap: 12px; } }
@media (min-width: 768px) {
	.meet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: ". head" "photo body"; }
	.meet__body { margin-top: 0; }
	/* The photo sits a little right of its column's edge on wide screens (Rae, 3 Oct 2026). The shift
	   grows with the screen, from none at 980px to at most 110px, so the photo stays a good size at 1024. */
	.meet__media { --shift: clamp(0px, (100vw - 980px) * .45, 110px); }
}
.meet__media::after {
	content: ""; position: absolute; inset: calc(var(--frame-gap) * -1); z-index: 2;
	border: 2px solid var(--olive); pointer-events: none;
	/* Rounded to match the photo's corners at this distance, so the gap looks even all the way round. */
	border-radius: calc(var(--radius-lg) + var(--frame-gap));
}
/* Her name, then her FISA logo directly under it, then "FISA® member" under the logo,
   stacked the same way at every width (1.6.1).
   FISA guidelines (13 Oct 2026): the logo must be clear and legible, in close proximity to her full name,
   and visually subordinate to it. So the name is large and the logo is always narrower than the name,
   shown at its own proportions (never stretched, cropped or recoloured). align-items: flex-start keeps
   each item at its own width, so the logo is never stretched to the column. */
.meet__id { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 24px; }
.meet__name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.875rem, 4.4vw, 2.5rem); line-height: 1.15; color: var(--ink); }
.meet__fisa-logo { height: clamp(3.25rem, 5.6vw, 4rem); width: auto; display: block; }
.meet__fisa-text { margin: 0; font-size: .9375rem; line-height: 1.3; color: var(--ink-soft); }
.meet__img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--grey); }
.meet__text .section-head { margin-bottom: 24px; }
/* Every paragraph in Meet Rumana is the same size and weight (body text). */
.ticks { list-style: none; display: grid; gap: 10px; margin: 28px 0 32px; }
.ticks li { position: relative; padding-left: 30px; font-family: var(--font-head); font-weight: 600; }
.ticks li::before {
	content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%;
	background: var(--olive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (min-width: 960px) {
	.meet__grid { column-gap: 72px; }
	.ticks { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}

/* How it works */
.steps { list-style: none; display: grid; gap: 32px; counter-reset: step; }
.step { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.step::before {
	content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 3px; background: var(--olive); border-radius: 2px;
}
.step__num {
	display: block; font-family: var(--font-head); font-weight: 600; font-size: 2.5rem; line-height: 1;
	color: var(--charcoal); margin-bottom: 18px; letter-spacing: -.02em;
}
.step__title { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.step__text { color: var(--ink-soft); max-width: 32ch; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Watch and read */
.watch__grid { display: grid; gap: 40px; align-items: center; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
	position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
	background: var(--ink); display: grid; place-items: center;
}
.video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s var(--ease), transform .6s var(--ease); }
.video__icon {
	position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
	background: var(--olive); color: var(--ink); padding-left: 4px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .3); transition: transform .25s var(--ease);
}
.video__play:hover img { opacity: 1; transform: scale(1.02); }
.video__play:hover .video__icon { transform: scale(1.06); }
.video__play:focus-visible { outline-offset: -6px; outline-color: var(--olive); }
.watch__text .section-head { margin-bottom: 28px; }
.featured {
	margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
	color: var(--ink-soft);
}
@media (min-width: 960px) { .watch__grid { grid-template-columns: 1.3fr .7fr; gap: 72px; } }

/* FAQ */
.faq__grid { display: grid; gap: 32px; }
.faq__note { font-size: .9375rem; color: var(--ink-soft); padding-left: 14px; border-left: 3px solid var(--olive); }
.faq__list { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 22px 0; cursor: pointer; list-style: none; border-radius: 4px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__heading { font-size: 1.0625rem; font-weight: 600; color: var(--ink); transition: color .2s; }
@media (min-width: 960px) { .faq__heading { font-size: 1.125rem; } }
.faq__sign {
	position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px solid var(--line); transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .3s var(--ease);
}
.faq__sign::before, .faq__sign::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
	background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q:hover .faq__sign { background: var(--olive); border-color: var(--olive); }
.faq[open] .faq__sign { background: var(--olive); border-color: var(--olive); }
.faq[open] .faq__sign::after { transform: rotate(0deg); }
.faq__a { padding: 0 54px 24px 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
	.faq[open] .faq__a { animation: faq-in .3s var(--ease); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) { .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } .faq__intro { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }

/* Insights */
.posts { list-style: none; display: grid; gap: 24px; }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card {
	display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s var(--ease);
}
.post-card:hover { box-shadow: var(--shadow); }
.post-card__media { display: block; aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__fallback {
	display: grid; place-items: center; width: 100%; height: 100%;
	font-family: var(--font-head); font-weight: 600; font-size: 2.25rem; letter-spacing: .04em; color: var(--olive);
}
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.post-card__date { display: block; font-size: .875rem; color: var(--ink-soft); margin-bottom: 8px; }
.post-card__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 10px; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-card__excerpt { color: var(--ink-soft); margin-bottom: 20px; flex: 1; }
.post-card .link-arrow { align-self: flex-start; }
.post-card--placeholder { border-style: dashed; }
.post-card--placeholder .post-card__media { background: #3A3A3A; }

/* Affiliations: a written list, no logos (19 Oct 2026). */
.affiliations { background: var(--white); padding: 56px 0; border-top: 1px solid var(--line); }
.affiliations__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.affiliations__title { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.affiliations__lines { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 680px; display: grid; gap: 14px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.affiliations__line { display: block; }
/* 8pt (about 10.7px) at Rae's request (9 Oct 2026). Below the 14px brand minimum, so the colour is
   #4A4A4A on white (about 8.9:1, well above AA) to keep it as readable as possible. */
.affiliations__note { display: block; margin: 4px auto 0; font-size: 8pt; line-height: 1.45; color: var(--ink-soft); max-width: 40ch; }
.affiliations__note strong { font-weight: 700; color: var(--ink); }

/* Contact */
.contact { background: var(--ink); color: var(--on-dark); padding: var(--section-y) 0; }
.contact .section-title { color: var(--on-dark); }
.contact .section-intro { color: var(--on-dark-soft); }
.contact__grid { display: grid; gap: 40px; }
.contact__aside .section-head { margin-bottom: 32px; }
.contact__person { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.contact__img { width: 100%; border-radius: 14px; background: var(--white); }
.contact__direct { list-style: none; display: grid; gap: 14px; }
.contact__label { display: block; font-size: .875rem; color: var(--on-dark-soft); }
.contact__direct a {
	display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); text-decoration: none;
	font-family: var(--font-head); font-weight: 600; word-break: break-word;
}
.contact__direct a .icon { width: 20px; height: 20px; color: var(--olive); flex: none; }
.contact__direct a:hover { color: var(--olive); }
@media (min-width: 600px) { .contact__person { grid-template-columns: 180px 1fr; gap: 28px; } }
@media (min-width: 960px) {
	.contact__grid { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
	.contact__person { grid-template-columns: 1fr; max-width: 300px; }
	.contact__img { max-width: 240px; }
}

.contact__form-wrap { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: 28px 22px; }
@media (min-width: 600px) { .contact__form-wrap { padding: 40px; } }
.contact__form-wrap :focus-visible { outline-color: var(--ink); }

.form__row { display: grid; gap: 0 20px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 20px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; margin-bottom: 8px; }
.req { font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
	width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
	background: var(--white); border: 1.5px solid #8A8A8A; border-radius: 6px;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select {
	appearance: none; padding-right: 44px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--olive);
}
.field [aria-invalid="true"] { border-color: #A4161A; }
.field__error { margin: 8px 0 0; font-family: var(--font-head); font-size: .9375rem; color: #A4161A; font-weight: 600; }
.field--check { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; align-items: start; }
.field--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: .9375rem; margin: 0; }
.field--check .field__error { grid-column: 2; }
/* Meeting type and proposed times */
.fieldset { border: 0; padding: 0; min-width: 0; margin-inline: 0; }
.fieldset legend { padding: 0; margin-bottom: 8px; font-family: var(--font-head); font-weight: 600; font-size: .9375rem; }
.field__hint { margin: 0 0 12px; font-size: .9375rem; color: var(--ink-soft); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
/* Each choice is a 50px tall, easy-to-tap option; the whole label is the target.
   ".field .choice" so it wins over the general ".field label" style. */
.field .choice {
	margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 1rem;
	display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 16px; cursor: pointer;
	border: 1.5px solid #8A8A8A; border-radius: 6px; background: var(--white);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); align-self: center; }
.choice span { line-height: 1.3; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--olive); border-color: var(--ink); }
.choice input:focus-visible { outline: none; }
/* "What do you need help with?" tick boxes (16 Oct 2026): three small group headings, then "Other".
   Every row is at least 44px tall and the whole row is the tap target. ".field .check" so it wins
   over the general ".field label" style. */
.matter-group { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.fieldset .matter-group__title { margin-bottom: 4px; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.checks { display: grid; gap: 2px; }
@media (min-width: 600px) { .checks { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.field .check {
	display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; padding: 10px 8px;
	border-radius: 6px; cursor: pointer; font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.4;
	transition: background-color .2s var(--ease);
}
.field .check:hover { background: var(--grey); }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--olive); }
.check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.slot + .slot { margin-top: 4px; }
.slot__label { margin: 0 0 6px; font-family: var(--font-head); font-weight: 600; font-size: .875rem; color: var(--ink-soft); }
.slot__row .field { margin-bottom: 12px; }
.slot .field__error { margin-top: 0; margin-bottom: 12px; }
.field input[type="date"] { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1.5px solid #8A8A8A; border-radius: 6px; }
.field input[type="date"]:hover { border-color: var(--ink); }
.field input[type="date"]:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--olive); }
/* While sending: the button says "Sending…" and cannot be pressed again. */
.form__submit[aria-disabled="true"] { cursor: progress; opacity: .75; }
.form-status:empty { display: none; }
.field--hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__small { margin-top: 14px; font-size: .875rem; color: var(--ink-soft); }

.notice { border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; border-left: 4px solid; }
.notice h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; }
.notice:focus { outline: none; }
.notice--success { background: #F4F6D9; border-color: var(--olive-deep); }
.notice--error { background: #FBEDED; border-color: #A4161A; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-dark-soft); padding: 64px 0 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
/* Footer: Contact, Quick links, Legal, Credentials. Stacked on phones, 2 x 2 on tablets, one row on desktop. */
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.3fr .7fr .7fr 1.1fr; gap: 48px; position: relative; } }
.footer__title {
	font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark);
	margin-bottom: 20px;
}
.footer__firm { margin: -6px 0 20px; font-size: .875rem; }
.footer__legal { display: block; margin-bottom: 4px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--on-dark); }
.footer__reg { display: block; margin-top: 4px; }
.footer__contact { list-style: none; display: grid; gap: 14px; }
.footer__contact li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.footer__contact .icon { width: 20px; height: 20px; color: var(--olive); margin-top: 2px; }
.site-footer a { color: var(--on-dark); text-decoration: none; transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--olive); }
/* Social icons (Rae, 10 Oct 2026): one row, evenly spaced, centred as a group.
   Stacked columns (phones and tablets): the last item in the footer, centred on its own row just
   above the copyright line.
   Desktop: centred across the whole footer, with the icons' vertical centre on the last line of
   "By appointment only. No walk-ins.". The Contact column is the tallest, so the bottom of the first
   grid row is the bottom of that line; the icons sit on that edge and are moved down by half their
   height less half the line's height (the note's line is .9375rem x 1.5 tall). */
.footer__social-wrap { display: flex; justify-content: center; grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.footer__social-wrap {
		position: absolute; grid-row: 1; left: 50%; bottom: 0;
		transform: translate(-50%, calc(50% - .9375rem * .75));
	}
}
.footer__social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.footer__social a {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	/* Glyphs in brand olive (about 10:1 on #2B2B2B); the circle is unchanged (Rae, 10 Oct 2026).
	   Hover and focus: olive circle with a near-black glyph, and the olive focus ring. */
	border: 1.5px solid rgba(255, 255, 255, .25); color: var(--olive);
	transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.footer__social a:hover,
.footer__social a:focus-visible { background: var(--olive); border-color: var(--olive); color: var(--ink); }
.footer__social .icon { width: 20px; height: 20px; }
.footer__links { list-style: none; display: grid; gap: 4px; }
/* At least 44px tall so each link is easy to tap. */
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
.footer__creds p { margin-bottom: 8px; }
/* Bottom bar: stacked and centred on mobile; copyright, credit and back to top in one row from 768px. */
.footer__bottom {
	display: grid; justify-items: center; gap: 8px; text-align: center;
	margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .875rem;
}
.footer__bottom p { margin: 0; }
.footer__credit { color: var(--on-dark-soft); }
.site-footer .footer__credit a { color: var(--on-dark-soft); text-decoration: underline; text-decoration-color: rgba(201, 201, 201, .5); text-underline-offset: 3px; }
.site-footer .footer__credit a:hover { color: var(--olive); text-decoration-color: var(--olive); }
@media (min-width: 768px) {
	.footer__bottom { grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; }
	.footer__bottom p:first-child { justify-self: start; }
	/* The credit sits on the lower line, level with the registration number (Rae, 9 Oct 2026). */
	.footer__credit { justify-self: center; align-self: end; text-align: center; }
	.footer__top { justify-self: end; }
}

/* "By appointment only" note under the street address (footer and Request a consultation page) */
.appointment-note { margin: 6px 0 0; font-size: .9375rem; }
.nowrap { white-space: nowrap; }

/* Request a consultation page: form card, then the direct details */
.book__grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .book__grid { grid-template-columns: 1.5fr 1fr; gap: 48px; } }
.book__title { font-size: 1.375rem; color: var(--ink); margin-bottom: 10px; }
.book__intro { color: var(--ink-soft); margin-bottom: 20px; }
/* Fee, FICA and consultation days, above the form. */
.consult-info { list-style: none; display: grid; gap: 10px; margin: 0 0 28px; padding: 16px 18px; background: var(--grey); border-radius: var(--radius); }
.consult-info li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: .9375rem; color: var(--ink); }
.consult-info .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--ink-soft); }
.book__details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 22px; }
@media (min-width: 600px) { .book__details { padding: 36px 32px; } }
.book__details .book__title { margin-bottom: 20px; }
.book__list { list-style: none; display: grid; gap: 20px; }
.book__list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.book__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--grey); color: var(--ink); }
.book__icon .icon { width: 20px; height: 20px; }
.book__label { display: block; font-size: .875rem; color: var(--ink-soft); }
.book__list a { font-family: var(--font-head); font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: 2px; text-underline-offset: 3px; word-break: break-word; }
.book__list a:hover { text-decoration-color: var(--ink); }
.book .appointment-note { color: var(--ink); }
.book .contact__form-wrap { border: 1px solid var(--line); }

/* Tighter rhythm where two white sections now sit next to each other (homepage after the reorder) */
.section--white + .section--white { padding-top: 0; }
.affiliations + .cta-band { padding-top: 0; }

/* Mobile-only "Call" button next to "Request a consultation" */
.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .6); color: var(--white); }
.btn--outline-light:hover { background: var(--olive); border-color: var(--olive); color: var(--ink); }
@media (min-width: 768px) { .btn--call { display: none; } }
.site-nav .btn--call { margin-top: 12px; width: 100%; }

/* Inner page header (About and later pages) */
/* Compact inner page header (about 40% shorter than the first version). */
.page-header { background: var(--ink); color: var(--on-dark); padding: 20px 0 28px; }
@media (min-width: 960px) { .page-header { padding: 24px 0 36px; } }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9375rem; margin-bottom: 12px; }
.breadcrumb li { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--on-dark-soft); }
.breadcrumb li + li::before {
	content: ""; flex: none; width: 7px; height: 7px; border-top: 1.5px solid var(--olive); border-right: 1.5px solid var(--olive);
	transform: rotate(45deg); margin: .6em 4px 0 0;
}
.breadcrumb a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.breadcrumb a:hover { color: var(--olive); text-decoration-color: var(--olive); }
.breadcrumb [aria-current="page"] { color: var(--on-dark-soft); }
.page-header :focus-visible { outline-color: var(--olive); }
/* Header with a background photo: photo, then a 70% near-black overlay, then the text. */
.page-header--image { position: relative; overflow: hidden; isolation: isolate; }
.page-header__bg {
	position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
	object-fit: cover; object-position: 35% 50%;
}
.page-header--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(43, 43, 43, .7); }
/* Pure white text: at least 5.3:1 even over the brightest part of the photo. */
.page-header--image .breadcrumb li,
.page-header--image .breadcrumb [aria-current="page"],
.page-header--image .page-header__lead,
.page-header--image .post-meta { color: var(--white); }
.page-header--image .breadcrumb a { text-decoration-color: rgba(255, 255, 255, .7); }
/* H1 stays 40px, the brand minimum, at every width. */
.page-header__title { font-size: 2.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; color: var(--on-dark); max-width: 24ch; }
/* Phones narrower than 375px (for example 320 and 360): the 40px brand H1 would not fit a word
   like "consultation" in the column, so the two H1s step down slightly. 375px and up stay at 40px+. */
@media (max-width: 374px) {
	.page-header__title, .hero__title { font-size: 2.125rem; }
}
.page-header__title::before { content: ""; display: block; width: 44px; height: 3px; background: var(--olive); border-radius: 2px; margin-bottom: 12px; }
.page-header__lead { margin: 10px 0 0; font-size: 1.0625rem; color: var(--on-dark-soft); }
@media (min-width: 960px) { .page-header__lead { font-size: 1.125rem; } }
.page-header .post-meta { margin-top: 8px; }
.post-byline { margin: 12px 0 0; font-size: 1rem; color: var(--white); }
.post-byline a { color: var(--white); text-decoration: underline; text-decoration-color: var(--olive); text-underline-offset: 4px; }
.post-byline a:hover { color: var(--olive); }

/* Homepage hero: subtle photo behind a 70% #2B2B2B overlay, portrait card unchanged on the right. */
.hero--image { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(43, 43, 43, .7); }
/* Pure white text: at least 5.3:1 even over the brightest part of the photo. */
.hero--image .eyebrow,
.hero--image .hero__title,
.hero--image .hero__lead,
.hero--image .hero__reach { color: var(--white); }
.hero--image .hero__media { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.hero--image :focus-visible { outline-color: var(--olive); }

/* About: credentials */
.cred-cards { list-style: none; display: grid; gap: 20px; }
@media (min-width: 900px) { .cred-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.cred-card {
	position: relative; display: flex; flex-direction: column; align-items: flex-start;
	padding: 32px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.cred-card::before { content: ""; position: absolute; left: 28px; top: -1px; width: 44px; height: 3px; background: var(--olive); border-radius: 0 0 2px 2px; }
.cred-card .card__text { margin-bottom: 0; }
.cred-card__link { margin-top: 20px; }

/* About: principles */
.principles { list-style: none; display: grid; gap: 32px; }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.principle { padding-top: 28px; border-top: 1px solid var(--line); position: relative; }
.principle::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 3px; background: var(--olive); border-radius: 2px; }
.principle__icon {
	display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
	border-radius: 12px; background: var(--grey); color: var(--ink);
}

/* About: how she works, text beside a 4:5 photo (photo above the text on mobile) */
.principles-split { display: grid; gap: 40px; align-items: center; }
.principles-split__media { order: -1; max-width: 480px; }
.principles-split__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--grey); }
.principles.principles--stacked { grid-template-columns: 1fr; gap: 0; }
.principles--stacked .principle { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; padding: 24px 0; }
.principles--stacked .principle:first-child { padding-top: 28px; }
.principles--stacked .principle__icon { margin-bottom: 0; }
.principles--stacked .step__text { max-width: 40ch; }
.principles-split .section-head { margin-bottom: 24px; }
@media (min-width: 960px) {
	.principles-split { grid-template-columns: 1.1fr .9fr; gap: 88px; }
	.principles-split__media { order: 0; max-width: none; }
}

/* About: spotlight */
.spotlight { list-style: none; display: grid; gap: 16px; max-width: 820px; }
.spotlight__item {
	display: grid; gap: 6px; padding: 24px 28px; background: var(--white);
	border: 1px solid var(--line); border-left: 3px solid var(--olive); border-radius: var(--radius);
}
.spotlight__date { font-family: var(--font-head); font-weight: 600; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (min-width: 768px) { .spotlight__item { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; } }

/* About: spotlight event photos (4:3) */
.events { list-style: none; display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 640px) { .events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .events { grid-template-columns: repeat(3, 1fr); } }
.event { margin: 0; }
.event__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.event__caption { margin-top: 12px; font-size: .9375rem; color: var(--ink-soft); }

/* Closing call to action band */
.cta-band__inner {
	display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
	background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg); padding: 36px 28px;
}
.cta-band__title { font-size: 1.75rem; color: var(--on-dark); }
.cta-band__text { margin: 10px 0 0; color: var(--on-dark-soft); }
.cta-band :focus-visible { outline-color: var(--olive); }
.cta-band .btn--olive:hover { background: var(--white); border-color: var(--white); }
@media (min-width: 768px) {
	.cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 48px 56px; }
	.cta-band__title { font-size: 2rem; }
}

/* Insights: filter row */
.filter { margin-bottom: 32px; }
.filter__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.filter__link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
	font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: none;
	background: var(--white); border: 1.5px solid var(--line); border-radius: 999px;
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.filter__link:hover { border-color: var(--ink); }
.filter__link[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Insights: grid */
.posts--blog { gap: 24px; }
@media (min-width: 640px) { .posts--blog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .posts--blog { grid-template-columns: repeat(3, 1fr); } }
.post-card__cat {
	margin: 0 0 8px; font-family: var(--font-head); font-weight: 600; font-size: .875rem;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.post-card__cat::before { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 3px; margin: -2px 8px 0 0; background: var(--olive); border-radius: 2px; }
.posts--blog .post-card__date { order: 0; margin-bottom: 12px; }
.posts--blog .post-card__media { aspect-ratio: 16 / 9; }
.post__image img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Insights: pagination */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 14px;
	font-family: var(--font-head); font-weight: 600; color: var(--ink); text-decoration: none;
	background: var(--white); border: 1.5px solid var(--line); border-radius: 8px;
}
.pagination a.page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* Insights: empty state */
.empty-state {
	max-width: 640px; margin: 8px auto 0; padding: 48px 28px; text-align: center;
	background: var(--white); border: 1px dashed #CFCFCF; border-radius: var(--radius-lg);
}
.empty-state__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 14px; background: var(--grey); }
.empty-state__title { font-size: 1.375rem; margin-bottom: 12px; }
.empty-state p { color: var(--ink-soft); margin-bottom: 24px; }
.empty-state .btn-row { justify-content: center; }
/* The FISA videos box: the same box, with space before the posts or the empty state under it. */
.empty-state--videos { margin-bottom: 24px; }
.empty-state--videos + .posts { margin-top: 0; }

/* Single post */
.post-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px; font-size: .9375rem; color: var(--on-dark-soft); }
.post-meta li { display: inline-flex; align-items: center; gap: 10px; }
@media (min-width: 600px) {
	.post-meta { column-gap: 10px; }
	.post-meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--olive); }
}
.post-meta a { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--olive); text-underline-offset: 4px; }
.post-meta a:hover { color: var(--olive); }
.post__section { padding-top: 48px; }
.post__image { margin: 0 auto 40px; max-width: 820px; }
.post__image img { width: 100%; border-radius: var(--radius-lg); }
/* No featured image: the same "RM" block as the cards, in a slimmer band. */
.post__image--fallback { aspect-ratio: 21 / 9; background: var(--ink); border-radius: var(--radius-lg); overflow: hidden; }
.prose { max-width: 70ch; margin-left: auto; margin-right: auto; }
.entry-content { font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 960px) { .entry-content { font-size: 1.125rem; } }
.entry-content > * { margin: 0 0 1.2em; }
.entry-content h2 { font-size: 1.5rem; color: var(--ink); margin-top: 1.8em; margin-bottom: .6em; }
.entry-content h3 { font-size: 1.25rem; color: var(--ink); margin-top: 1.5em; margin-bottom: .5em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--ink-soft); }
.entry-content a { color: var(--ink); text-decoration-color: var(--olive); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-color: var(--ink); }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote {
	margin: 2em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--olive);
	font-family: var(--font-head); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.5; color: var(--ink);
}
.entry-content blockquote p { margin: 0; }
.post__note {
	margin-top: 40px; padding: 16px 20px; font-size: .9375rem; color: var(--ink-soft);
	background: var(--grey); border-left: 3px solid var(--olive); border-radius: 0 var(--radius) var(--radius) 0;
}
.post-nav { display: grid; gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } .post-nav__link--next { grid-column: 2; text-align: right; } }
.post-nav__link {
	display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; text-decoration: none; color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.post-nav__link:hover { border-color: #D6D6D6; box-shadow: var(--shadow); }
.post-nav__label { font-size: .875rem; color: var(--ink-soft); }
.post-nav__title { font-family: var(--font-head); font-weight: 600; }

/* Fallback pages (index.php) */
.prose { max-width: 760px; }
.page-title { font-size: 2.5rem; color: var(--charcoal); margin-bottom: 32px; }

/* Soft fade-in as sections scroll into view. Content is visible by default: main.js only adds
   .reveal-ready when the browser supports it and the visitor has not asked for reduced motion,
   so a slow or failed script never hides anything. Items in a list arrive a beat apart (capped). */
@media (prefers-reduced-motion: no-preference) {
	/* Uses "translate", not "transform", so it never clashes with hover and press effects. */
	.reveal-ready [data-reveal] {
		opacity: 0; translate: 0 14px;
		transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
		transition-delay: calc(var(--reveal-i, 0) * 70ms);
	}
	.reveal-ready [data-reveal].is-visible { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}