/* ==========================================================================
   Harbour Wealth — theme additions layered on top of the ported prototype CSS.
   Loaded after main.css (see functions.php).
   ========================================================================== */

/* Fonts are self-hosted in assets/css/fonts.css (SIM-2266): Public Sans 100-800
   (incl. the hairline 100 the live section headings use) and Brygada 1918 700
   (the "Our Values" toggle titles). */

/* Responsive oEmbed video (single-education.php). Wraps WordPress's provider
   iframe in a 16:9 box that spans the full content width, so it no longer
   overflows/overlaps the caption below it. */
.video-embed-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 1.75rem;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.video-embed-frame iframe,
.video-embed-frame video,
.video-embed-frame object,
.video-embed-frame embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Hide the prototype-only "for structure & content review" badge (a body::after
   rule that ships in the ported prototype CSS — not wanted on the real site). */
body::after {
	content: none !important;
	display: none !important;
}

/* ==========================================================================
   Real Harbour Wealth brand — overrides the prototype's greyscale placeholder
   tokens with the live site's palette (navy #293e5d, red #a32322, blue-grey).
   Because the prototype CSS is fully tokenised, this re-skins the whole site.
   ========================================================================== */
:root {
	--navy:        #293e5d;
	--navy-dark:   #1e2d47;
	--navy-light:  #37527a;
	--red:         #a32322;
	--red-hover:   #851f1e;
	--blue-accent: #9bb2c1;
	--body-text:   #3c4453;
	--heading-dark:#223451;
	--light-bg:    #f4f6f9;
	--border:      #e1e6ec;
	--off-white:   #cfd8e0;
}

/* Real logo (white wordmark) in the navy nav and dark footer, replacing the
   prototype's placeholder square-icon + text. */
.nav-logo-img {
	height: 38px;
	width: auto;
	display: block;
}
.footer-logo-img {
	height: 44px;
	width: auto;
	display: block;
}

/* ============================================================
   Header — live-matched: transparent centred-logo nav that
   sticks to a solid navy bar on scroll (SIM-1818 restyle).
   ============================================================ */

/* Centre the whole nav row (menu + inline logo). */
.main-nav .container {
	justify-content: center;
}

/* Default (pages without a hero): solid navy. */
.main-nav {
	background: var(--navy);
}

/* Hero pages: at the very top the bar is not fully transparent — it carries a
   subtle white overlay behind the menu (matches live's rgba(255,255,255,0.19)),
   lightly frosting the hero behind the links. */
body.has-hero-nav .main-nav {
	background: rgba( 255, 255, 255, 0.19 );
}

/* …turning fully solid navy the moment the page scrolls (matches live, no
   transparency). The has-hero-nav selector is repeated so it out-specifies the
   gradient rule above; otherwise that would win and the bar would stay see-through. */
.main-nav.is-stuck,
body.has-hero-nav .main-nav.is-stuck {
	background: var( --navy );
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.12 );
}

/* White menu text; active/hover in steel blue like live (no underline). */
.nav-links a {
	color: #fff;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item > a {
	color: var(--blue-accent);
}
.nav-links a.active::after {
	display: none;
}

/* No logo in the nav bar — matching live, the logo lives in each page's hero. */

/* Hero sits behind the transparent header on hero pages — both the front-page
   hero (.page-hero) and the standard-page hero (.simple-hero). */
body.has-hero-nav .page-hero,
body.has-hero-nav .simple-hero {
	margin-top: 0;
	padding-top: 140px;
}

/* Partner logos must fit inside the fixed-height .partner-logo card (72px)
   instead of overflowing at their natural size. */
.partner-logo img {
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ============================================================
   Services page — mirrors the live site (SIM-1818 restyle).
   ============================================================ */

/* Centred hero: two-line uppercase title + red CTA button. */
.simple-hero--centered {
	text-align: center;
}
.simple-hero--centered .breadcrumb,
.simple-hero--centered .eyebrow {
	display: none;
}
.simple-hero--centered .hero-stack {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 52px;
	line-height: 1.06;
	letter-spacing: 0.5px;
	/* Override main.css .simple-hero h1 { max-width:760px } which, with no auto
	   margins, pins the title box to the left even when its text is centred. */
	max-width: none;
	margin: 0 auto 30px;
}
.simple-hero--centered .hero-stack .hero-thin {
	display: block;
	font-weight: 300;
	letter-spacing: 2px;
}

/* Solid red button (matches live). */
.btn-red {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --red );
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	font-weight: 700;
	padding: 17px 34px;
	border-radius: 0;
	transition: background 0.2s;
}
.btn-red:hover {
	background: var( --red-hover );
	color: #fff;
}

/* Intro paragraph. */
.services-intro {
	text-align: center;
}
.services-intro .lead-centered {
	max-width: 1080px;
	margin: 0 auto;
	font-size: 22px;      /* live's intro text size */
	line-height: 1.8;
	color: var( --body-text );
}

/* Full-height hero (services + about + team) — like live: ~210px vertical
   padding over a team photo + navy gradient overlay (set inline in each
   template), with a larger heading than the default centred hero. */
body.has-hero-nav .simple-hero--services,
body.has-hero-nav .simple-hero--about,
body.has-hero-nav .simple-hero--team {
	padding-top: 210px;
	padding-bottom: 210px;
}
.simple-hero--services .hero-stack,
.simple-hero--about .hero-stack,
.simple-hero--team .hero-stack {
	font-size: 64px;
}
/* Team hero heading is a single thin line (live's weight 100). */
.simple-hero--team .hero-stack { font-weight: 200; }
/* Intro line under the hero heading (about). */
.simple-hero--about .hero-lede {
	max-width: 640px;
	margin: 20px auto 28px;
	font-size: 18px;
	line-height: 1.7;
	color: rgba( 255, 255, 255, 0.92 );
}
@media ( max-width: 980px ) {
	body.has-hero-nav .simple-hero--services,
	body.has-hero-nav .simple-hero--about,
	body.has-hero-nav .simple-hero--team {
		padding-top: 150px;
		padding-bottom: 150px;
	}
}
@media ( max-width: 767px ) {
	body.has-hero-nav .simple-hero--services,
	body.has-hero-nav .simple-hero--about,
	body.has-hero-nav .simple-hero--team {
		padding-top: 110px;
		padding-bottom: 110px;
	}
	.simple-hero--services .hero-stack,
	.simple-hero--about .hero-stack,
	.simple-hero--team .hero-stack { font-size: 34px; }
}

/* ============================================================
   About page — What Sets Us Apart, The People, Our Values.
   ============================================================ */

/* 3-up card grid for the About sections (collapses on the standard
   980/767 breakpoints). */
.values-grid--3 { grid-template-columns: repeat( 3, 1fr ); }
@media ( max-width: 980px ) { .values-grid--3 { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 767px ) { .values-grid--3 { grid-template-columns: 1fr; } }

/* What Sets Us Apart — live layout: photo beside a stacked uppercase
   heading, then centred cards each with the Harbour square mark. */
.apart-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	margin-bottom: 56px;
}
.apart-head-media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}
.apart-heading {
	font-size: 56px;
	line-height: 1.02;
	text-transform: uppercase;
	color: var( --navy );
	font-weight: 300;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
}
.apart-heading strong { font-weight: 800; }
.apart-head-copy p {
	font-size: 17px;
	line-height: 1.8;
	color: var( --body-text );
}
.apart-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
}
.apart-card {
	background: var( --white );
	border: 1px solid var( --border );
	border-radius: 8px;
	padding: 40px 28px;
	text-align: center;
	box-shadow: 0 10px 30px rgba( 15, 40, 75, 0.06 );
}
.apart-card-mark { display: block; margin-bottom: 20px; }
.apart-card-mark img { width: 44px; height: 44px; display: inline-block; }
.apart-card h3 {
	/* Live's card h4 spec: Public Sans (inherited), 700, uppercase, 28px, navy. */
	text-transform: uppercase;
	color: var( --navy );
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 12px;
}
.apart-card p {
	color: var( --body-text );
	font-size: 14px;
	line-height: 1.7;
}
@media ( max-width: 980px ) {
	.apart-head { grid-template-columns: 1fr; gap: 32px; }
	.apart-grid { grid-template-columns: repeat( 2, 1fr ); }
	.apart-heading { font-size: 44px; }
}
@media ( max-width: 767px ) {
	.apart-grid { grid-template-columns: 1fr; }
	.apart-heading { font-size: 36px; }
}

/* "The People behind the brand" — full-bleed team photo + navy overlay
   (set inline on the section), with a large white uppercase centred heading,
   matching live. */
.about-people {
	min-height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 0;
	text-align: center;
	background-size: cover;
	background-position: center 25%;
}
.about-people-inner {
	max-width: 860px;
	margin: 0 auto;
}
.people-heading {
	font-size: 68px;
	line-height: 1.05;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 22px;
}
.people-heading strong { font-weight: 700; }
.about-people-inner p {
	font-size: 18px;
	line-height: 1.8;
	color: rgba( 255, 255, 255, 0.92 );
	max-width: 720px;
	margin: 0 auto 28px;
}
@media ( max-width: 980px ) {
	.about-people { padding: 90px 0; }
	.people-heading { font-size: 48px; }
}
@media ( max-width: 767px ) {
	.about-people { padding: 64px 0; }
	.people-heading { font-size: 34px; }
}

/* Our Values — Divi "toggle" accordion: serif title bands, per-value colour,
   closed by default, click to expand. No open/close indicator (matches live).
   overflow hidden so the slide-in-from-left never causes a horizontal scroll. */
.value-accordion {
	max-width: 940px;
	margin: 0 auto;
	overflow: hidden;
}
.value-toggle { border-style: solid; border-width: 1px; }
.value-toggle-title {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 70px 50px;      /* live's toggle padding */
	font-family: 'Brygada 1918', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.1;
	text-align: center;
}
/* Slower open/close than before, to match live. */
.value-toggle-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.7s ease;
}
.value-toggle.is-open .value-toggle-content { max-height: 720px; }
.value-toggle-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 50px 70px;
	font-family: 'Open Sans', 'Public Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
}
.value-toggle-inner p { margin: 0 0 8px; }
/* Uppercase sub-labels with a divider line above each (except the first). */
.value-toggle-inner h4 {
	font-family: 'Open Sans', 'Public Sans', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.value-toggle-inner h4:not( :first-child ) {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid currentColor;
}

/* Band tones (exact colours from live's toggle_0–5). */
.value-toggle--navy { background: #293e5d; border-color: #293e5d; }
.value-toggle--navy .value-toggle-title,
.value-toggle--navy .value-toggle-inner h4 { color: #fff; }
.value-toggle--navy .value-toggle-inner { color: rgba( 255, 255, 255, 0.88 ); }
.value-toggle--navy .value-toggle-inner h4 { border-color: rgba( 255, 255, 255, 0.22 ); }

.value-toggle--white { background: #fff; border-color: #293e5d; border-width: 2px; }
.value-toggle--white .value-toggle-title,
.value-toggle--white .value-toggle-inner h4 { color: #293e5d; }
.value-toggle--white .value-toggle-inner { color: var( --body-text ); }
.value-toggle--white .value-toggle-inner h4 { border-color: rgba( 41, 62, 93, 0.18 ); }

.value-toggle--tan { background: #a69786; border-color: #e4ddd7; }
.value-toggle--tan .value-toggle-title { color: #e4ddd7; }
.value-toggle--tan .value-toggle-inner,
.value-toggle--tan .value-toggle-inner h4 { color: #fff; }
.value-toggle--tan .value-toggle-inner h4 { border-color: rgba( 255, 255, 255, 0.4 ); }

.value-toggle--sand { background: #e4ddd7; border-color: #d8cfc5; }
.value-toggle--sand .value-toggle-title,
.value-toggle--sand .value-toggle-inner,
.value-toggle--sand .value-toggle-inner h4 { color: #a69786; }
.value-toggle--sand .value-toggle-inner h4 { border-color: rgba( 166, 151, 134, 0.4 ); }

.value-toggle--red { background: #a32322; border-color: #a32322; }
.value-toggle--red .value-toggle-title,
.value-toggle--red .value-toggle-inner h4 { color: #fff; }
.value-toggle--red .value-toggle-inner { color: rgba( 255, 255, 255, 0.92 ); }
.value-toggle--red .value-toggle-inner h4 { border-color: rgba( 255, 255, 255, 0.3 ); }

/* Scroll-in slide animation — replicates live's et_animated slide-in from the
   left (Divi's fadeLeft keyframe, 1s, cubic-bezier(.77,0,.175,1)). Each band
   triggers as it enters view (see theme.js) and is nudged by a per-band
   animation-delay (set inline) for the one-after-the-other cascade.
   The hidden pre-animation state is gated behind `.has-anim` (JS-added) so
   content is never invisible if JS/the observer fails. */
.has-anim .anim-slide { opacity: 0; }
.anim-slide.is-inview {
	opacity: 1;
	animation: harbourSlideLeft 0.9s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}
/* Solid band slides across from the left (opacity is on the whole slide, not
   faded mid-motion) so it reads as a slide, not a fade-in-place. */
@keyframes harbourSlideLeft {
	from { transform: translateX( -100% ); }
	to   { transform: translateX( 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.has-anim .anim-slide { opacity: 1; }
	.anim-slide.is-inview { animation: none; }
}

/* Scroll-into-view reveal for full content sections (e.g. the "Secure your
   wealth" home section) — reuses the same IntersectionObserver as .anim-slide
   (theme.js watches both). Hidden state gated behind .has-anim so content is
   never invisible without JS; honours reduced-motion.

   Replicates the live/production Divi animation on that row exactly:
   style "slideBottom", intensity 50%, starting opacity 0%, duration 1000ms,
   ease-in-out, once (from Divi's et_animation_data). Divi's slide translates
   by the intensity as a % of the element's own height, so intensity 50% =
   translateY(50%) — matching its fade variants (fadeBottom 10%, fadeInBottom 60%). */
.has-anim .anim-reveal {
	opacity: 0;
}
.anim-reveal.is-inview {
	animation: harbourSlideBottom 1000ms ease-in-out both;
}
@keyframes harbourSlideBottom {
	from { opacity: 0; transform: translateY( 50% ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.has-anim .anim-reveal { opacity: 1; }
	.anim-reveal.is-inview { animation: none; }
}

@media ( max-width: 767px ) {
	.value-toggle-title { font-size: 30px; padding: 40px 28px; }
}

/* "Our Core Services" — dark tiles over a full-bleed ocean background. */
.services-core {
	padding: 92px 0 104px;
	color: #fff;
	background-size: cover;
	background-position: center;
}
.services-core-title {
	text-align: center;
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 48px;
}
.svc-tiles {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 50px;
	max-width: 1080px;
	margin: 0 auto;
}

/* Square flip cards: front = title, back (on hover) = description + call-back CTA. */
.svc-tile {
	aspect-ratio: 1 / 1;
	perspective: 1200px;
}
.svc-tile-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.svc-tile:hover .svc-tile-inner,
.svc-tile:focus-within .svc-tile-inner {
	transform: rotateY( 180deg );
}
.svc-tile-front,
.svc-tile-back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 26px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Opaque navy base + darker ocean image on the tiles, matching live's
   `background: #293E5D url(Services_Dark-01.jpg)`. */
.svc-tile-front {
	background-color: #293e5d;
	background-image: var( --svc-tile-img );
	background-size: cover;
	background-position: center;
}
.svc-tile-back {
	background: rgba( 41, 62, 93, 0.92 );
	transform: rotateY( 180deg );
	gap: 16px;
}
.svc-tile-title {
	font-size: 21px;
	font-weight: 400;
	color: #fff;
	line-height: 1.3;
	letter-spacing: 0.2px;
}
.svc-tile-back p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #fff;
}
.svc-tile-back .btn-red.svc-tile-btn {
	padding: 11px 20px;
	font-size: 11px;
	letter-spacing: 1px;
}

/* Partner strip — borderless logos on white, like live (overrides the card look). */
.partners-section {
	background: #fff;
}
.partners-section .partners-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 34px 56px;
}
.partners-section .partner-logo {
	height: auto;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.partners-section .partner-logo img {
	max-height: 48px;
	opacity: 0.85;
	transition: opacity 0.2s;
}
.partners-section .partner-logo:hover img {
	opacity: 1;
}

/* Scrolling logo carousel (mirrors live: 4-per-view, autoplay, bullet dots). */
.logo-carousel {
	position: relative;
}
.logo-carousel-viewport {
	overflow: hidden;
}
.logo-carousel-track {
	display: flex;
	will-change: transform;
}
.logo-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px 20px;
}
.logo-slide .partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60px;
}
/* Logos are sized by the inline per-logo width % (see harbourwealth_partner_logo_width),
   matching live's balanced widths — not normalised by height. The saturate/contrast
   filter renders them as the uniform muted grey live uses (DiviNxtLogoCarousel child
   filter), instead of full black/colour. */
.logo-slide .partner-logo img {
	max-width: 100%;
	max-height: none;
	height: auto;
	object-fit: contain;
	filter: saturate( 0% ) contrast( 0% );
}
.logo-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 11px;
	margin-top: 30px;
}
.logo-carousel-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --navy );
	opacity: 0.3;
	cursor: pointer;
	transition: opacity 0.2s, background 0.2s;
}
.logo-carousel-dot.is-active {
	background: var( --red );
	opacity: 1;
}

/* Client reviews — one-at-a-time testimonial carousel (mirrors live). */
.home-reviews {
	background: #fff;
	text-align: center;
	padding: 90px 0 96px;
}
.reviews-title {
	font-weight: 100;
	text-transform: uppercase;
	font-size: 44px;
	letter-spacing: 1px;
	color: #293e5d;
	margin: 0 0 40px;
}
.review-slide {
	box-sizing: border-box;
}
.review-item {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 20px;
}
.review-quote {
	font-size: 18px;
	font-weight: 300;
	line-height: 30px;
	color: #6c7a87; /* was #909eab — 2.74:1 on white, below WCAG AA (SIM-1879) */
	margin: 0 0 34px;
}
.review-quote p {
	margin: 0;
}
.review-name {
	font-size: 18px;
	font-weight: 700;
	color: #293e5d;
}
/* The reviews carousel dots sit closer, matching live. */
.reviews-carousel .logo-carousel-dots {
	margin-top: 36px;
}

/* Global "Contact Us" footer CTA — matches live's tb_footer section: navy box +
   logo over a navy-gradient ocean background. */
.footer-cta {
	background-size: cover;
	background-position: center;
	padding: 84px 0;
}
.footer-cta-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: center;
}
.footer-cta-box {
	background: #293e5d;
	color: #fff;
	padding: 54px 56px;
}
.footer-cta-heading {
	margin: 0;
	line-height: 1.1;
	color: #fff;
	text-transform: none;
}
.footer-cta-heading strong {
	display: block;
	font-weight: 700;
	font-size: 46px;
}
.footer-cta-heading span {
	display: block;
	font-weight: 100;
	font-size: 50px;
}
.footer-cta-box p {
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	color: #fff;
	max-width: 620px;
	margin: 22px 0 30px;
}
.footer-cta-logo {
	text-align: center;
}
.footer-cta-logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
}
@media ( max-width: 860px ) {
	.footer-cta-grid {
		grid-template-columns: 1fr;
	}
	.footer-cta-logo {
		display: none;
	}
}

/* ============================================================
   Home page (front-page.php) — mirrors live landing sections.
   ============================================================ */

/* Hero */
.home-hero {
	position: relative;
	overflow: hidden;
	min-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	background-size: cover;
	background-position: center;
	padding: 130px 20px 90px;
}
/* Background video fills the hero; the poster image (set inline) shows until it loads. */
.home-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/* Light wash only — live has essentially no hero overlay; keep it subtle so the
   video reads bright (matching live) while white text stays legible. */
.home-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( rgba( 20, 30, 48, 0.15 ), rgba( 20, 30, 48, 0.35 ) );
}
.home-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
}
.home-hero-logo {
	height: 82px;
	width: auto;
	margin: 0 auto 30px;
	display: block;
}
.home-hero-title {
	margin: 0 0 22px;
	text-transform: uppercase;
	line-height: 1.06;
}
.home-hero-title span {
	display: block;
	font-weight: 300;
	font-size: 40px;
	letter-spacing: 1px;
}
.home-hero-title strong {
	display: block;
	font-weight: 800;
	font-size: 58px;
	letter-spacing: 0.5px;
}
.home-hero-inner p {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	max-width: 620px;
	margin: 0 auto;
	opacity: 0.92;
}

/* Dual heading (bold line + lighter line) shared across home sections. */
/* Section headings match live's h2 spec: Public Sans, 50px, uppercase, #09324F,
   line-height 1.3 — the lead line bold (700), the second line hairline (100). */
.dual-heading {
	margin: 0 0 22px;
	line-height: 1.3;
	text-transform: uppercase;
}
.dual-heading strong {
	display: block;
	font-weight: 700;
	font-size: 50px;
	color: #09324f;
	letter-spacing: 0.2px;
}
.dual-heading span {
	display: block;
	font-weight: 100;
	font-size: 50px;
	color: #09324f;
	letter-spacing: 0.2px;
}
.dual-heading.center {
	text-align: center;
}
.dual-heading.light strong {
	color: #fff;
}
.dual-heading.light span {
	color: rgba( 255, 255, 255, 0.8 );
}

/* Two-column split sections (text + media; DOM order sets which side). */
.home-split {
	padding: 84px 0;
}
/* Asymmetric columns (relative fr units, not fixed px): the text column is wider
   and the image column narrower (~490px at the max container), matching live and
   giving the heading room. Reverse sections (image on the left) flip the ratio. */
.home-split-grid {
	display: grid;
	grid-template-columns: 3fr 2fr; /* text 60% : image 40% (live 3_5 / 2_5) */
	gap: 54px;
	align-items: center;
	max-width: 1280px;
}
.home-split--reverse .home-split-grid {
	grid-template-columns: 2fr 3fr; /* image 40% : text 60% */
}
/* A Team section: wide image, narrow text (live et_pb_column_2_3 / 1_3 = 66/33). */
.home-split--reverse.home-split--media-wide .home-split-grid {
	grid-template-columns: 2fr 1fr;
}
/* Its heading is smaller than the other sections (live et_pb_text_11 h3 = 37px),
   so it fits the narrow text column on one line. */
.home-split--media-wide .dual-heading strong,
.home-split--media-wide .dual-heading span {
	font-size: 37px;
}
.home-split-media img {
	width: 100%;
	height: auto;
	display: block;
}
.home-split-text p {
	font-size: 16px;
	line-height: 1.8;
	color: rgba( 0, 0, 0, 0.8 );
	margin: 0 0 16px;
}
/* Lead line (live renders this as an h4, module et_pb_text_7): larger intro. */
.home-split-text .home-split-lead {
	font-size: 25px;
	line-height: 1.2;
	font-weight: 400;
	color: rgba( 0, 0, 0, 0.8 );
	margin: 0 0 22px;
}
.home-split-text .btn-red {
	margin-top: 12px;
}

/* Centered section (expert-led financial solutions). */
.home-centered {
	position: relative;
	overflow: hidden;
	min-height: 695px;
	display: flex;
	align-items: center;
	padding: 96px 0;
	text-align: center;
}
/* True parallax: this bg layer is taller than the section and theme.js translates
   it a fraction of the scroll distance, so it scrolls slower than the content. */
.home-parallax-bg {
	position: absolute;
	top: -30%;
	left: 0;
	width: 100%;
	height: 160%;
	background-size: cover;
	background-position: center;
	will-change: transform;
	z-index: 0;
}
/* Live tints this parallax photo with a solid #9bb2c1 overlay set to
   mix-blend-mode: screen, which lightens the image toward a soft blue-grey
   (rather than a flat translucent wash). Matched from Divi's et_parallax_gradient. */
.home-parallax-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #9bb2c1;
	mix-blend-mode: screen;
}
.home-centered > .container {
	position: relative;
	z-index: 2;
	width: 100%;
}
/* Copy matches live's text module: 16px / 1.8 line-height, rgba(0,0,0,0.8),
   centred, with 1em spacing between paragraphs. */
.home-centered p {
	max-width: 760px;
	margin: 0 auto;
	padding-bottom: 1em;
	font-size: 16px;
	line-height: 1.8;
	color: rgba( 0, 0, 0, 0.8 );
}
.home-centered .btn-red {
	margin-top: 14px;
}

/* Find confidence — navy feature section. */
.home-confidence {
	padding: 96px 0;
	text-align: center;
	color: #fff;
	background-size: cover;
	background-position: center;
	/* Gradient stacks normally over yacht-club-2.jpg (live desktop et_pb_section_4):
	   the 0% stop is opaque #293e5d, so the top matches the navy menu; it fades to
	   rgba(9,50,79,.85) at the bottom, letting the marina show through. No blend mode
	   on desktop (that's a mobile-only variant). */
}
.home-confidence-lead {
	max-width: 760px;
	margin: 0 auto 52px;
	line-height: 1.7;
	opacity: 0.88;
}
/* Feature cards match live's Divi blurb modules: image icon on top, thin
   weight-100 title, small description — 4 centred columns. */
.home-features {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 30px;
	margin-bottom: 46px;
}
.home-feature {
	max-width: 87%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.home-feature-icon {
	display: block;
	margin: 0 auto 20px;
	height: 55px;
	width: auto;
}
.home-feature-title {
	font-weight: 100;
	text-transform: uppercase;
	font-size: 19px;
	line-height: 1.4;
	color: #fff;
	margin: 0 0 12px;
}
.home-feature p {
	font-size: 13px;
	line-height: 1.2;
	color: #fff;
	margin: 0;
}

/* Responsive: stack split sections + features on smaller screens. */
@media ( max-width: 860px ) {
	/* All three selectors are needed, not just the base one. Media queries add
	   NO specificity, so `.home-split--reverse .home-split-grid` (0,2,0) and
	   `.home-split--reverse.home-split--media-wide .home-split-grid` (0,3,0)
	   declared above both outrank a bare `.home-split-grid` (0,1,0) in here —
	   the reverse sections silently stayed two-column on mobile, squeezing the
	   text into a ~290px gutter beside the image. */
	.home-split-grid,
	.home-split--reverse .home-split-grid,
	.home-split--reverse.home-split--media-wide .home-split-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.home-features {
		grid-template-columns: repeat( 2, 1fr );
	}
	.home-hero-title strong {
		font-size: 40px;
	}
	.home-hero-title span {
		font-size: 28px;
	}
}

/* Closing CTA band. */
.services-cta {
	background: var( --navy );
	color: #fff;
	text-align: center;
	padding: 80px 0;
}
.services-cta h2 {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 12px;
}
.services-cta p {
	max-width: 560px;
	margin: 0 auto 26px;
	font-size: 16px;
	line-height: 1.7;
	opacity: 0.85;
}

/* Responsive: shared page components collapse on the standard 980/767
   breakpoints. Tablet -> two-up tiles + smaller centred hero; phone ->
   single-column tiles, smaller hero heading, and a smaller intro. */
@media ( max-width: 980px ) {
	.svc-tiles { grid-template-columns: repeat( 2, 1fr ); }
	.simple-hero--centered .hero-stack { font-size: 42px; }
}
@media ( max-width: 767px ) {
	.svc-tiles { grid-template-columns: 1fr; }
	.simple-hero--centered .hero-stack { font-size: 34px; }
	.services-intro .lead-centered { font-size: 18px; line-height: 1.7; }
}

/* ============================================================
   Footer — live-matched (SIM 'match live'). Values read from
   live's Divi tb-footer CSS: slate-navy bg #2C3844 (not the
   prototype's saturated navy), tight vertical padding, equal-
   thirds columns, branded social tiles, and the award-badge row.
   Replaces the prototype's grey circles + footer logo + address.
   ============================================================ */

/* Footer background + padding — live uses a desaturated slate
   (#2C3844) and tight vertical padding, vs the prototype's darker
   navy and 60px top padding. */
.site-footer {
	background: #2c3844;
	padding: 30px 0 26px;
}

/* Three equal 1/3 columns like live's Divi row (not 1.5/1/1.5). */
.footer-grid {
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 22px;
}

/* Branded social tiles — exact colours from live's Divi social
   module, rounded-square (overrides main.css's grey #888 flatten). */
.footer-social a { border-radius: 3px; }
.footer-social a.linkedin  { background: #007bb6; }
.footer-social a.instagram { background: #ea2c59; }
.footer-social a.facebook  { background: #3b5998; }

/* Quick Links column centred to match live. */
.footer-links--quicklinks { text-align: center; }
.footer-links--quicklinks ul { display: inline-block; text-align: center; }

/* Award / trust badges row beneath the footer columns. */
.footer-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 32px;
	margin-top: 20px;
}
.footer-badge {
	height: 94px;
	width: auto;
	opacity: 0.9;
}
@media ( max-width: 700px ) {
	.footer-badges { gap: 24px; }
	.footer-badge { height: 60px; }
}

/* ============================================================
   Responsive breakpoint convention (matches live's Divi system):
     • <= 980px  — tablet / mobile nav (hamburger appears)
     • <= 767px  — phone
   Prefer these two widths for new responsive rules rather than
   adding more one-off breakpoints.
   ============================================================ */

/* --- Mobile navigation: hamburger + slide-down panel (<=980px) --- */
.nav-toggle { display: none; }

@media ( max-width: 980px ) {
	/* Hamburger pinned to the right of the 72px bar; menu becomes a panel. */
	.main-nav .container { justify-content: flex-end; }

	.nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.nav-toggle-bar {
		display: block;
		width: 24px;
		height: 2px;
		margin: 0 auto;
		background: #fff;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	/* Bars morph into an X while the panel is open. */
	.main-nav.nav-open .nav-toggle-bar:nth-child( 1 ) { transform: translateY( 7px ) rotate( 45deg ); }
	.main-nav.nav-open .nav-toggle-bar:nth-child( 2 ) { opacity: 0; }
	.main-nav.nav-open .nav-toggle-bar:nth-child( 3 ) { transform: translateY( -7px ) rotate( -45deg ); }

	/* Solid navy bar while the panel is open, even over a hero. */
	.main-nav.nav-open,
	body.has-hero-nav .main-nav.nav-open {
		background: var( --navy );
	}

	/* The menu drops below the bar as a full-width navy panel. */
	.nav-links {
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var( --navy );
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.main-nav.nav-open .nav-links {
		max-height: calc( 100vh - 72px );
		overflow-y: auto;
	}
	.nav-links li { width: 100%; }
	.nav-links a {
		display: block;
		padding: 15px 24px;
		border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	}
}


/* ============================================================
   Meet the Team — department groups of member cards (5-up),
   matching live: thin uppercase navy department titles,
   transparent headshots, name + role + LinkedIn.
   ============================================================ */
.team-dept { margin-bottom: 72px; }
.team-dept-title {
	font-family: 'Public Sans', Helvetica, Arial, sans-serif;
	font-weight: 100;      /* first word thin */
	text-transform: uppercase;
	font-size: 45px;
	line-height: 1.1;
	color: #293e5d;
	text-align: center;
	margin-bottom: 44px;
}
.team-dept-title strong { font-weight: 700; }   /* remaining words bold */
/* Team layout, matched to the live site (SIM-1879).
   Measured on harbourwealth.com/meet-the-team at a 1440px viewport: its
   .et_pb_row is 1080px wide and the cards run FOUR across at ~246px with a
   32px gutter. This section had been set to 1443px and five across, which is
   why the new site's content read noticeably wider than the current one.

   Flexbox, not grid, is deliberate. Grid fills a partial last row from the
   left and cannot centre it — with departments of 2, 5, 5, 7 and 11 people
   that stranded a single person hard-left at the end of a row. Flex + wrap +
   justify-content lets short rows centre, which is what live does. */
.team-section .container { max-width: 1080px; }
.team-members {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 32px;
	row-gap: 52px;
}
/* 4 across: four items plus three 32px gutters. */
.team-member { flex: 0 0 calc( ( 100% - 96px ) / 4 ); }
.team-member { text-align: center; }
.team-member-photo img {
	display: block;
	width: 100%;   /* fill the column; only the 3% gutter separates images (live) */
	height: auto;
	margin: 0 auto;
}
.team-member-name {
	font-family: 'Public Sans', Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 500;
	color: #293e5d;
	line-height: 1.15;
	margin: 14px 0 4px;
}
.team-member-role {
	font-size: 14px;
	color: #6b7280;
	margin: 0 0 10px;
}
.team-member-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
/* 32px rounded-square icon badges (live). LinkedIn = blue badge + white "in"
   glyph; ProfileMe = navy badge + white smiley; Simvida = its own logo. */
.team-member-link {
	width: 32px;
	height: 32px;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: opacity 0.2s;
}
.team-member-link:hover { opacity: 0.85; }
.team-member-link--linkedin {
	background: #007bb6;   /* live's LinkedIn colour */
	color: #fff;
}
.team-member-link--linkedin svg { width: 17px; height: 17px; fill: currentColor; }
.team-member-link--profileme {
	background: #293e5d;   /* live's ProfileMe (RSS slot) badge colour */
}
.team-member-link--profileme img { width: 26px; height: 26px; display: block; }
.team-member-link--simvida img { width: 32px; height: 32px; display: block; }
.team-member .initials {
	width: 85%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --light-bg );
	color: #293e5d;
	font-size: 32px;
	font-weight: 600;
	border-radius: 8px;
}
@media ( max-width: 980px ) {
	.team-member { flex: 0 0 calc( ( 100% - 64px ) / 3 ); } /* 3 across */
	.team-dept-title { font-size: 32px; }
}
@media ( max-width: 767px ) {
	.team-members { column-gap: 16px; row-gap: 32px; }
	.team-member { flex: 0 0 calc( ( 100% - 16px ) / 2 ); } /* 2 across */
	.team-dept-title { font-size: 27px; }
}

/* ============================================================
   Contact page — office picker.
   The prototype shipped a flat grey box. Re-skin it in the site's
   card language: white surface with the soft navy elevation used by
   the About cards, a confident navy active state, and navy-tinted
   icon chips. Overrides the prototype rules in main.css.
   ============================================================ */

/* Selector shell — same white + soft navy shadow as .apart-card, but with
   the site's square (straight-edged) corners. */
.office-picker {
	border: 1px solid var( --border );
	border-radius: 0;
	box-shadow: 0 10px 30px rgba( 15, 40, 75, 0.06 );
}
.office-list { background: var( --light-bg ); }

/* Tabs — quiet by default, clear navy accent when active. */
.office-tab {
	padding: 22px 26px;
	border-bottom: 1px solid var( --border );
	border-left: 4px solid transparent;
}
.office-tab .ot-name { font-size: 15px; font-weight: 600; color: var( --heading-dark ); }
.office-tab .ot-region { font-size: 12px; color: rgba( 60, 68, 83, 0.6 ); margin-top: 3px; }
.office-tab:hover { background: rgba( 41, 62, 93, 0.04 ); }
.office-tab.active { background: var( --white ); border-left-color: var( --navy ); }
.office-tab.active .ot-name { color: var( --navy ); font-weight: 700; }

/* Detail panel — a touch more breathing room; red region label already
   echoes the site's .section-label accent. */
.office-panel { padding: 34px 36px; gap: 36px; }
.office-panel-detail h3 { font-size: 22px; color: var( --heading-dark ); }

/* Info rows — square navy-tinted icon chips, cleaner dividers. */
.office-lines li { padding: 12px 0; border-bottom: 1px solid var( --border ); font-size: 14px; }
.office-lines .li-icon {
	width: 34px; height: 34px;
	border-radius: 0;
	background: rgba( 41, 62, 93, 0.06 );
	color: var( --navy );
}
.office-lines .li-icon svg { width: 16px; height: 16px; }

/* Map — replace the grey crosshatch fallback with a calm brand tint. */
.map-embed {
	border-radius: 0;
	border: 1px solid var( --border );
	background: linear-gradient( 160deg, #eef2f7 0%, #e3e9f1 100% );
}
.map-embed .map-pin { border-radius: 0; box-shadow: 0 6px 20px rgba( 15, 40, 75, 0.10 ); }

/* Keep the mobile horizontal-scroll tabs underlined (not left-barred). */
@media ( max-width: 900px ) {
	.office-tab { border-left: none; border-bottom: 3px solid transparent; }
	.office-tab.active { border-left-color: transparent; border-bottom-color: var( --navy ); }
	.office-panel { padding: 26px 22px; gap: 26px; }
}

/* ============================================================
   Contact page — form. Square every edge (card, note, inputs,
   select, textarea, submit) to match the office picker and the
   site's straight-cornered convention. Fluent Forms defaults are
   rounded, so override on the field controls too.
   ============================================================ */
.contact-form-card,
.contact-form-card .form-note { border-radius: 0; }
.contact-form-card .ff-el-form-control,
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea,
.contact-form-card .ff-btn,
.contact-form-card .ff-btn-submit,
.contact-form-card button { border-radius: 0; }

/* ============================================================
   Harbour Highlights — bring the prototype's content hub in line
   with the rest of the site: straight (square) edges on every card,
   image, badge, chip and input, plus the same navy-tinted card
   elevation used on the About page and the Contact office picker.
   Overrides the rounded prototype rules in main.css.
   ============================================================ */

/* Content/media cards — square edges. */
.article-card,
.edu-card,
.product-card,
.strategies-hub-card,
.newsletter-card { border-radius: 0; }

/* …and the site's branded border + soft navy elevation (matches .apart-card). */
.article-card,
.edu-card,
.product-card,
.strategies-hub-card {
	border: 1px solid var( --border );
	box-shadow: 0 10px 30px rgba( 15, 40, 75, 0.06 );
}
.article-card:hover,
.edu-card:hover,
.product-card:hover,
.strategies-hub-card:hover {
	box-shadow: 0 16px 40px rgba( 15, 40, 75, 0.10 );
}

/* Card images sit flush (cards clip with overflow:hidden). */
.article-card-image,
.edu-card-image { border-radius: 0; }

/* Badges, tags and toggle chips — square. */
.article-card-image .card-badge,
.edu-card-tag,
.strategies-hub-list span,
.dashboard-bar-caption .ticker-period-toggle span { border-radius: 0; }

/* Icon chips — square, matching the office-picker icon chips. */
.product-card-icon,
.reminder-banner-icon { border-radius: 0; }

/* Subscribe form — square input + button (no pill ends). */
.newsletter-form input,
.newsletter-form button { border-radius: 0; }

/* ============================================================
   Footer newsletter sign-up (Brevo, SIM-1820). A wide, slim band
   above the site footer — same navy "Stay Informed" styling as the
   old Highlights section, now global so visitors can subscribe from
   any page. Square edges to match the rest of the site.
   ============================================================ */
.footer-signup {
	background: linear-gradient( 135deg, var( --navy ) 0%, var( --navy-dark ) 100% );
	color: #fff;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
}
.footer-signup .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 40px;
	/* Horizontal padding must match .container's 24px. Writing `34px 0` zeroed
	   it, so this band's content ran 24px wider on each side than the Contact
	   CTA box above and the footer columns below — visibly out of alignment on
	   desktop, and flush to the screen edge on mobile. (SIM-1879) */
	padding: 34px 24px;
}
.footer-signup-copy { flex: 1 1 320px; }
.footer-signup-copy h2 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 4px; letter-spacing: -0.01em; }
.footer-signup-copy p { font-size: 14px; line-height: 1.5; opacity: 0.82; margin: 0; max-width: 52ch; }

.footer-signup-form { display: flex; flex: 1 1 400px; max-width: 560px; margin: 0; }
.footer-signup-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 15px 18px;
	font-size: 15px;
	font-family: inherit;
	color: #fff;
	background: rgba( 255, 255, 255, 0.10 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-right: none;
	border-radius: 0;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
}
.footer-signup-form input::placeholder { color: rgba( 255, 255, 255, 0.55 ); }
.footer-signup-form input:focus { border-color: rgba( 255, 255, 255, 0.55 ); background: rgba( 255, 255, 255, 0.14 ); }
.footer-signup-form button {
	padding: 15px 30px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: inherit;
	color: #fff;
	background: var( --red );
	border: none;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
}
.footer-signup-form button:hover { background: var( --red-hover ); }
.footer-signup-form button[disabled] { opacity: 0.65; cursor: default; }

/* Honeypot — visually hidden, off-screen. */
.footer-signup-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Consent microcopy doubles as the live status line. */
.footer-signup-note { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.4; opacity: 0.7; text-align: right; }
.footer-signup-note.is-error { color: #ffb3ae; opacity: 1; }
.footer-signup-note.is-success { color: #9fe0bf; opacity: 1; }

@media ( max-width: 767px ) {
	.footer-signup .container { flex-direction: column; align-items: stretch; text-align: center; padding: 30px 24px; }
	.footer-signup-form { max-width: none; }
	.footer-signup-note { text-align: center; }
}

/* ============================================================
   Newsletter confirmation modal (SIM-1820). Shown when Brevo
   redirects back after a subscriber confirms (?subscribed=1).
   Square edges + brand navy/red to match the rest of the site.
   ============================================================ */
.hw-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hw-modal[hidden] { display: none; }
.hw-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 30, 45, 71, 0.62 );
	display: block;
}
.hw-modal-panel {
	position: relative;
	width: 100%;
	max-width: 460px;
	background: #fff;
	border: 1px solid var( --border );
	border-top: 4px solid var( --red );
	border-radius: 0;
	box-shadow: 0 24px 60px rgba( 15, 40, 75, 0.28 );
	padding: 44px 40px 40px;
	text-align: center;
	animation: hwModalIn 0.22s ease-out both;
}
@media ( prefers-reduced-motion: reduce ) {
	.hw-modal-panel { animation: none; }
}
@keyframes hwModalIn {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: none; }
}
.hw-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 26px;
	line-height: 1;
	color: var( --body-text );
	text-decoration: none;
	padding: 6px 8px;
	transition: color 0.2s;
}
.hw-modal-close:hover { color: var( --red ); }
.hw-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	background: rgba( 41, 62, 93, 0.06 );
	color: var( --navy );
}
.hw-modal-icon svg { width: 26px; height: 26px; }
.hw-modal-panel h2 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --heading-dark );
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.hw-modal-panel p {
	font-size: 15px;
	line-height: 1.65;
	color: var( --body-text );
	margin: 0 0 26px;
}
.hw-modal-dismiss { font-family: inherit; }

/* Lock page scroll while the modal is open. */
body.hw-modal-open { overflow: hidden; }

@media ( max-width: 480px ) {
	.hw-modal-panel { padding: 38px 24px 32px; }
}

/* ============================================================
   Newsletter sign-up modal (SIM-2193). The form variant of
   .hw-modal: same navy/red, square-edged panel, but left-aligned
   and a touch wider because it holds a form rather than a line
   of confirmation copy. Also used by the Subscribe Button block.
   ============================================================ */
.hw-modal--form .hw-modal-panel {
	max-width: 520px;
	text-align: left;
	padding: 40px 40px 34px;
}
.hw-modal--form .hw-modal-icon { margin-bottom: 16px; }
.hw-modal--form .hw-modal-panel p { margin: 0 0 20px; }

/* The confirmation modal closes with links; this one with buttons, which need
   the browser's own styling taken off them first. */
button.hw-modal-close {
	font-family: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.hw-subscribe-form { display: flex; margin: 0 0 10px; }
.hw-subscribe-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var( --body-text );
	background: #fff;
	border: 1px solid var( --border );
	border-right: none;
	border-radius: 0;
	outline: none;
	transition: border-color 0.2s;
}
.hw-subscribe-form input::placeholder { color: #98a2b3; }
.hw-subscribe-form input:focus { border-color: var( --navy-light ); }
.hw-subscribe-form button {
	padding: 14px 26px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: inherit;
	color: #fff;
	background: var( --red );
	border: none;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
}
.hw-subscribe-form button:hover { background: var( --red-hover ); }
.hw-subscribe-form button[disabled] { opacity: 0.65; cursor: default; }

/* Consent microcopy doubles as the live status line, as in the footer band. */
.hw-subscribe-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var( --body-text );
	opacity: 0.75;
}
.hw-subscribe-note.is-error { color: var( --red ); opacity: 1; }
.hw-subscribe-note.is-success { color: #1c7a4f; opacity: 1; }

/* The Subscribe Button block / [harbour_subscribe_button] shortcode. */
.hw-subscribe-btn-wrap { margin: 24px 0; }
.hw-subscribe-btn-wrap.is-center { text-align: center; }
.hw-subscribe-btn-wrap.is-right { text-align: right; }
/* Content wrappers paint links red and underlined (SIM-2184). This is a button,
   so it is excluded there, in the base selector — see the content-link rules. */
.hw-subscribe-btn { cursor: pointer; text-decoration: none; }
.hw-subscribe-btn--outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var( --navy );
	border: 1px solid var( --navy );
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	font-weight: 700;
	padding: 16px 33px;
	border-radius: 0;
	transition: background 0.2s, color 0.2s;
}
.hw-subscribe-btn--outline:hover { background: var( --navy ); color: #fff; }

@media ( max-width: 480px ) {
	.hw-modal--form .hw-modal-panel { padding: 36px 22px 28px; }
	.hw-subscribe-form { display: block; }
	.hw-subscribe-form input[type="email"] { width: 100%; border-right: 1px solid var( --border ); }
	.hw-subscribe-form button { width: 100%; margin-top: 8px; }
}

/* ============================================================
   Newsletter issues (SIM-1874). The prototype wrapped each part of
   an issue in .newsletter-section-block; issues are now written in
   the block editor, which emits plain h2/p — so give that generated
   markup the same rhythm and section dividers.
   ============================================================ */
.newsletter-article > p {
	font-size: 16px;
	line-height: 1.8;
	color: var( --body-text );
	margin: 0 0 18px;
}
.newsletter-article > h2 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --heading-dark );
	margin: 0 0 10px;
	padding-top: 38px;
	border-top: 1px solid var( --border );
}
/* The intro already ends in a rule, and a leading heading needs no divider. */
.newsletter-article > h2:first-child,
.newsletter-article > .newsletter-intro + h2 {
	padding-top: 0;
	border-top: none;
}
.newsletter-article > h3 {
	font-size: 18px;
	font-weight: 700;
	color: var( --heading-dark );
	margin: 26px 0 8px;
}
.newsletter-article > ul,
.newsletter-article > ol {
	margin: 0 0 18px;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.8;
	color: var( --body-text );
}
.newsletter-article > ul li,
.newsletter-article > ol li { margin-bottom: 6px; }
.newsletter-article > blockquote {
	margin: 0 0 22px;
	padding-left: 18px;
	border-left: 3px solid var( --red );
	font-size: 17px;
	line-height: 1.7;
	color: var( --heading-dark );
}
.newsletter-article img,
.newsletter-article figure { max-width: 100%; height: auto; }
.newsletter-article figure { margin: 0 0 24px; }

/* Back-to-archive link — align the arrow with the label. */
.newsletter-back a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
}
.newsletter-back a:hover { color: var( --red ); }

/* Archive grid collapses like the other card grids. */
@media ( max-width: 980px ) {
	.newsletter-archive-grid { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( max-width: 640px ) {
	.newsletter-archive-grid { grid-template-columns: 1fr; }
}

/* Newsletter issue: two-column layout with an "Other issues" rail on the RIGHT.
   (main.css's .newsletter-layout is a 220px TOC on the left — this variant flips
   it so the issue body leads and related issues sit alongside.) */
.newsletter-layout--aside {
	grid-template-columns: minmax( 0, 1fr ) 260px;
	max-width: 1040px;
	padding: 0;
	gap: 56px;
	align-items: start;
}
.newsletter-aside {
	position: sticky;
	top: 180px;
	align-self: start;
}
.newsletter-aside-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --blue-grey, #6f8095 );
	margin-bottom: 10px;
}
.newsletter-aside-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	border-left: 1px solid var( --border );
}
.newsletter-aside-list li { margin: 0; }
.newsletter-aside-list a {
	display: block;
	padding: 10px 14px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}
.newsletter-aside-list a:hover {
	background: var( --light-bg );
	border-left-color: var( --red );
}
.newsletter-aside-meta {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --red );
	margin-bottom: 2px;
}
.newsletter-aside-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --heading-dark );
}
.newsletter-aside-list a:hover .newsletter-aside-title { color: var( --navy ); }
.newsletter-aside-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --navy );
	text-decoration: none;
}
.newsletter-aside-all svg { width: 14px; height: 14px; }
.newsletter-aside-all:hover { color: var( --red ); }

/* Stack the rail under the issue on narrow screens. */
@media ( max-width: 900px ) {
	.newsletter-layout--aside { grid-template-columns: 1fr; gap: 32px; }
	.newsletter-aside { position: static; }
}

/* "Figures as at …" note beside the market-bar heading (SIM-1875) — makes it
   clear the values are maintained by hand, not a live feed. */
.dashboard-bar-asat {
	margin-left: 10px;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.65;
}
.ticker-period-toggle [data-period] { cursor: pointer; }
.ticker-period-toggle [data-period]:focus-visible { outline: 2px solid var( --blue-accent ); outline-offset: 2px; }

/* ============================================================
   Legal / policy pages (How to Complain, PoPI) — matches the live
   site: solid navy nav (no hero), a plain left-aligned title and
   well-spaced body copy. Used by page-how-to-complain.php.
   ============================================================ */
.legal-page {
	/* Clear the fixed 72px nav, then breathing room above the title. */
	padding: calc( 72px + 3.5rem ) 0 4.5rem;
}
.legal-page .container {
	max-width: 1080px;
}
.legal-page__title {
	color: var( --navy );
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.5px;
	margin: 0 0 2rem;
}
.legal-page__body {
	color: rgba( 0, 0, 0, 0.8 );
	font-size: 16px;
	line-height: 1.8;
}
/* Small bold numbered section headings, matching live. */
.legal-page__body h2 {
	color: var( --navy );
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: 2.25rem 0 0.75rem;
}
.legal-page__body h2:first-child {
	margin-top: 0;
}
.legal-page__body p {
	margin: 0 0 1.25rem;
}
.legal-page__body ul {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}
.legal-page__body li {
	margin-bottom: 0.5rem;
}
.legal-page__body a {
	color: var( --red );
	text-decoration: none;
}
.legal-page__body a:hover {
	text-decoration: underline;
}


/* ============================================================================
   Accessibility: text contrast (SIM-1879)
   ============================================================================
   The prototype stylesheet uses very light greys for secondary text. Measured
   in-browser against their real rendered backgrounds, these fell below the WCAG
   2.1 AA minimum of 4.5:1 for normal-size text — and every instance here is
   SMALL text (10–12px), where legibility matters most.

   Replacements are the minimum darkening that clears 4.5:1 against BOTH white
   and the #f4f6f9 tinted panels, so the muted look is preserved:
     #999 → #717171   (2.85:1 → 4.88:1)
     #888 → #707070   (3.54:1 → 4.95:1)
     #bbb → #6f6f6f   (1.92:1 → 5.02:1)
   These live here rather than in main.css because that file is re-synced from
   the designer's prototype (bin/sync-prototype-css.sh) and would lose them.
   ------------------------------------------------------------------------- */

.dashboard-stat-label,
.dashboard-bar-asat,
.article-card-meta,
.article-card-meta span,
.perf-cell-label,
.testimonial-author .meta,
.office-tab .ot-region,
.svc-group-head .count {
  color: #717171;
}

.dashboard-bar-caption .ticker-period-toggle span {
  color: #707070;
}

.strategies-hub-card-count {
  color: #717171;
}

/* main.css's "Wireframe Overrides" block sets these with !important, so a plain
   override loses the cascade — matching !important is the only way to reach
   them without editing a file that gets re-synced from the prototype. */
.section-label,
.newsletter-card-quarter {
  color: #707070 !important;
}

.reminder-banner-dismiss {
  color: #6f6f6f;
}

/* Market movement colours. Green carried the same problem as the greys — 3.33:1
   on white — and it is doing semantic work (up vs down), so it has to be
   readable, not merely present. Red already passes at 7.44:1 and is unchanged. */
.dashboard-stat-change.up,
.perf-cell-value.up {
  color: #02804b; /* was #22a06b — 3.33:1 → 5.01:1 */
}

/* ============================================================================
   Accessibility: structure (SIM-1879)
   ========================================================================= */

/* Skip link — WCAG 2.4.1 (Level A). Off-screen until focused, then visible.
   Uses WordPress's conventional .screen-reader-text so core/plugin markup that
   already relies on that class is covered too; nothing defined it before. */
.screen-reader-text {
  border: 0;
  clip-path: inset( 50% );
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  margin: 0;
  width: auto;
  z-index: 100000;
  top: 8px;
  left: 8px;
  padding: 12px 20px;
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
  outline: 3px solid var(--navy);
}

/* The footer heading moved h4 → h3 to close a heading-level skip (h2 → h4).
   main.css styles it by tag as `.footer-links h4`, so carry that over here —
   editing main.css would be lost on the next prototype re-sync. */
.footer-links h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 16px;
}

/* Visible keyboard focus. The prototype leaves focus styling largely to the
   browser default, which several resets suppress; this guarantees an indicator
   without affecting mouse users (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* ============================================================================
   Links inside editorial content

   main.css resets `a { text-decoration: none; color: inherit; }`. That is right
   for navigation and whole-card links, where the surrounding component carries
   the affordance — but it also applies to links *inside body copy*, where it
   leaves them visually identical to the text around them. The client reported
   exactly this: content URLs are not highlighted.

   Scoped deliberately to the wrappers that hold prose, so cards, nav, tabs and
   buttons are untouched. `page.php` gained `.entry-content` for this purpose;
   every other wrapper below already existed.

   Underlined *as well as* coloured, on purpose: colour alone would fail
   WCAG 1.4.1, and against near-black body copy the underline is what actually
   carries the meaning for a reader who cannot separate the two hues.
   ============================================================================ */

.article-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn),
.newsletter-article a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn),
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn),
.legal-page__body a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn),
.product-item-desc a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn),
.value-toggle-inner a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn),
.review-quote a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn) {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.article-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover,
.newsletter-article a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover,
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover,
.legal-page__body a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover,
.product-item-desc a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover,
.value-toggle-inner a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover,
.review-quote a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.hw-subscribe-btn):hover {
  color: var(--red-hover);
  text-decoration-thickness: 2px;
}

/* Image links keep no underline — the image is the affordance.
   Buttons are excluded in the selectors above rather than undone here: they are
   styled by WordPress's own block CSS, and overriding colour then resetting it
   painted red text onto a red button background. Letting WP win outright is the
   only version that cannot go wrong. */
.article-content a:has(img),
.newsletter-article a:has(img),
.entry-content a:has(img),
.legal-page__body a:has(img) {
  text-decoration: none;
}

/* ============================================================================
   Lists inside editorial content

   main.css opens with `*, *::before, *::after { margin: 0; padding: 0; }`.
   A list takes its indent from `padding-inline-start` (40px in every browser's
   UA stylesheet) and its markers render inside exactly that space, so zeroing
   padding flattens ul/ol against the left edge and leaves bullets and numbers
   nowhere to go. That is why the client sees lists with no indent.

   Scoped like the content links above — only the wrappers holding prose, so
   the component lists that are meant to sit flush (nav, footer, contact hours)
   stay as they are.
   ============================================================================ */

.article-content ul,
.article-content ol,
.newsletter-article ul,
.newsletter-article ol,
.entry-content ul,
.entry-content ol,
.legal-page__body ul,
.legal-page__body ol,
.product-item-desc ul,
.product-item-desc ol,
.value-toggle-inner ul,
.value-toggle-inner ol,
.review-quote ul,
.review-quote ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.article-content ul,
.newsletter-article ul,
.entry-content ul,
.legal-page__body ul,
.product-item-desc ul,
.value-toggle-inner ul,
.review-quote ul {
  list-style-type: disc;
}

.article-content ol,
.newsletter-article ol,
.entry-content ol,
.legal-page__body ol,
.product-item-desc ol,
.value-toggle-inner ol,
.review-quote ol {
  list-style-type: decimal;
}

.article-content li,
.newsletter-article li,
.entry-content li,
.legal-page__body li,
.product-item-desc li,
.value-toggle-inner li,
.review-quote li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* Nested lists step the marker so depth reads, and lose the bottom margin —
   that gap belongs after the outer list, not between its levels. */
.article-content li > ul,
.article-content li > ol,
.newsletter-article li > ul,
.newsletter-article li > ol,
.entry-content li > ul,
.entry-content li > ol,
.legal-page__body li > ul,
.legal-page__body li > ol,
.product-item-desc li > ul,
.product-item-desc li > ol,
.value-toggle-inner li > ul,
.value-toggle-inner li > ol,
.review-quote li > ul,
.review-quote li > ol {
  margin: 8px 0 0;
}

.article-content ul ul,
.newsletter-article ul ul,
.entry-content ul ul,
.legal-page__body ul ul,
.product-item-desc ul ul,
.value-toggle-inner ul ul,
.review-quote ul ul {
  list-style-type: circle;
}

.article-content ul ul ul,
.newsletter-article ul ul ul,
.entry-content ul ul ul,
.legal-page__body ul ul ul,
.product-item-desc ul ul ul,
.value-toggle-inner ul ul ul,
.review-quote ul ul ul {
  list-style-type: square;
}

/* Opt-outs. These are defined in main.css at the same specificity as the rules
   above, so if an editor ever drops one inside a content wrapper they would
   lose on source order. Re-asserted here so they cannot. */
.article-content .key-takeaways ul,
.article-content .newsletter-toc ul,
.newsletter-article .key-takeaways ul,
.newsletter-article .newsletter-toc ul,
.entry-content .key-takeaways ul,
.entry-content .newsletter-toc ul,
.legal-page__body .key-takeaways ul,
.legal-page__body .newsletter-toc ul,
.product-item-desc .key-takeaways ul,
.product-item-desc .newsletter-toc ul,
.value-toggle-inner .key-takeaways ul,
.value-toggle-inner .newsletter-toc ul,
.review-quote .key-takeaways ul,
.review-quote .newsletter-toc ul {
  padding-left: 0;
  list-style: none;
}

/* ============================================================================
   Responsive: stop the global footer forcing horizontal scroll (SIM-1879)
   ============================================================================
   Every page scrolled sideways below ~429px wide, and it was always the footer:
   it appears on all of them, so the overflow was identical everywhere.

   Two causes, both the classic flex-item trap — a flex/grid item defaults to
   `min-width: auto`, meaning it refuses to shrink below its content's
   min-content width no matter how narrow the viewport gets:

     .footer-cta-box     54px/56px padding — 112px of it horizontal — on a box
                         that could not shrink, giving a 405px floor.
     .footer-signup-form flex: 1 1 400px, so a 400px basis it would not go under.
   ------------------------------------------------------------------------- */

@media ( max-width: 780px ) {
  .footer-cta-box {
    padding: 36px 22px;
    min-width: 0;
  }

  .footer-cta-box p {
    max-width: none;
  }

  .footer-signup-form {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  /* An <input> carries its own intrinsic size; without this it props the flex
     row open from the inside even once the form itself can shrink. */
  .footer-signup-form input[type="email"] {
    min-width: 0;
  }

  /* The newsletter band was the second floor. Its .container is `flex-wrap: wrap`
     and the existing mobile rule switches it to `column` — a column-WRAP
     container grows sideways into new columns rather than getting taller, so
     nowrap is required, not optional. The 320px and 400px flex bases then have
     to go too, since `min-width: auto` stops an item shrinking under them. */
  .footer-signup .container {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .footer-signup-copy,
  .footer-signup-form,
  .footer-signup-note {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  .footer-signup-copy p {
    max-width: none;
  }

  /* The last real offender. main.css collapses .footer-grid to one column at
     mobile, but custom.css re-declares `grid-template-columns: 1fr 1fr 1fr`
     with NO media query — and custom.css loads second, so it silently undid
     that collapse and kept three columns at 320px, pushing the third one off
     the right edge. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Right-alignment only makes sense while the columns sit side by side. */
  .footer-links--right {
    text-align: left;
  }

  /* The homepage split heading is set at 50px, whose min-content width ("Focus
     on today" as one unbreakable line) is ~291px — wider than a 320px screen
     once padding is taken off, so it pushed the page sideways. Scaling with the
     viewport keeps the impact but lets it fit. */
  .dual-heading,
  .dual-heading strong,
  .dual-heading span {
    font-size: clamp( 26px, 8.5vw, 50px );
  }
}

/* The 860px block drops .home-features to two columns, which is right for a
   tablet but not a phone: at 320px that is two ~152px cards in a 272px
   container, so they overflowed. One column below 560px. (SIM-1879) */
@media ( max-width: 560px ) {
  .home-features {
    grid-template-columns: 1fr;
  }
}

/* Was an inline style="text-align: right" on the last footer column; moved here
   so the mobile rule above can override it without needing !important. */
.footer-links--right {
  text-align: right;
}

/* The value accordion's control is now wrapped in an h3 for heading structure
   (SIM-1879). The heading is purely semantic — the button keeps all styling, so
   the h3 must add no box of its own. */
.value-toggle-heading {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}


/* ============================================================================
   Strategy benchmark band (SIM-2194)

   Replaces the per-cell "vs …" line and the "Benchmark: …" paragraph that used
   to sit in the info column: clients read the bare second figure as another
   Harbour number, and the name sat nowhere near the figures it described. The
   band names the benchmark once and puts each figure directly under its own
   period.

   These live here rather than in main.css because that file is re-synced from
   the designer's prototype (bin/sync-prototype-css.sh) and would lose them.
   ========================================================================= */

.perf-bench {
  /* Bled out over the row's 24px side padding so the band has breathing room
     without narrowing its grid — padding here would shrink the inner grid by
     28px and pull every column out of line with .perf-grid above. */
  margin: 14px -14px 0;
  padding: 10px 14px;
  background: #f4f6f9;
  border-radius: 6px;
}

/* Benchmark names are long ("ASISA SA MA Income (ASISA) SA Multi Asset Income"),
   so only the "Benchmark" tag is uppercased — uppercasing the name wrapped it to
   three lines and pulled more weight than the strategy's own name. */
.perf-bench-name {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #6f6f6f;
}

.perf-bench-tag {
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #717171;
}

/* Must stay identical to main.css's .perf-grid — same flow, same tracks, same
   gap — or the figures stop sitting under their periods, which is the point of
   the band. If a prototype re-sync changes .perf-grid, change this to match. */
.perf-bench-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
}

.perf-bench-value {
  font-size: 13px;
  font-weight: 600;
  color: #717171;
  line-height: 1.2;
}

/* main.css reflows .perf-grid to 2 columns here; the band has to follow it so
   the benchmark figures stay under their periods in the 2-up layout too. */
@media ( max-width: 600px ) {
  .perf-bench-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 8px;
  }
}