/*
Theme Name: Cascade Coverage
Theme URI: https://cascade-coverage.com/
Author: Cascade Coverage Insurance Services
Description: A full-site-editing block theme for an independent insurance agency. Deep-water palette, Fraunces display type, and a full-bleed video hero that degrades gracefully to a gradient.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cascade-coverage
Tags: full-site-editing, block-patterns, business, one-column, custom-colors, custom-logo, wide-blocks
*/

/* =========================================================================
   0. Aliases and resets
   ====================================================================== */

:root {
	--c-ink:    var(--wp--preset--color--ink,    #0A1E28);
	--c-deep:   var(--wp--preset--color--deep,   #0E3446);
	--c-brand:  var(--wp--preset--color--brand,  #14607C);
	--c-bright: var(--wp--preset--color--bright, #5AB6CE);
	--c-ember:  var(--wp--preset--color--ember,  #D9743C);
	--c-mist:   var(--wp--preset--color--mist,   #EEF3F5);
	--c-line:   var(--wp--preset--color--line,   #D8E2E6);
	--c-slate:  var(--wp--preset--color--slate,  #55686F);
	--c-paper:  var(--wp--preset--color--paper,  #FFFFFF);

	--gutter: var(--wp--custom--gutter, clamp(1.25rem, 5vw, 3rem));
	--radius: var(--wp--custom--radius, 14px);
	--radius-lg: var(--wp--custom--radius-lg, 22px);
	--ease: var(--wp--custom--ease, cubic-bezier(0.16, 0.8, 0.3, 1));

	/* Overwritten at runtime by site.js with the measured header height.
	   The clamp is the no-JS fallback, not the source of truth. */
	--header-h: clamp(68px, 5vw + 48px, 88px);

	/* Hero sizing and video framing, kept together because they interact.
	   A short hero on a wide screen forces a hard vertical crop: at 2100x900
	   a 16:9 video renders 1180px tall and loses 280px of it. Giving the hero
	   more height is what actually recentres the picture. */
	--hero-min: min(96vh, 1040px);
	--hero-min: min(96svh, 1040px);
	--hero-focal: center 50%;
}

html { scroll-behavior: smooth; }

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

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5 { font-optical-sizing: auto; }

/* Fallbacks in case a font-size preset ever fails to resolve. A dropped
   declaration means these simply apply, so they can never make things worse. */
h1 { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.75vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.11rem + 0.62vw, 1.5rem); }
h4 { font-size: clamp(1.125rem, 1.03rem + 0.42vw, 1.3125rem); }

/* Root blockGap otherwise puts a visible seam between header, main and
   footer, and between stacked full-width sections. Zero it at those two
   levels only, so gaps inside sections keep working. */
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group > .alignfull + .alignfull { margin-block-start: 0; }

/* Grid and flex children default to a min-content floor and refuse to shrink,
   which shows up as a few pixels of horizontal overflow at one breakpoint. */
.wp-block-columns > .wp-block-column,
.cascade-grid > *,
.cascade-cards > * { min-width: 0; overflow-wrap: anywhere; }

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--c-ember);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--c-bright); color: var(--c-ink); }

/* =========================================================================
   1. Section scaffolding

   Root padding is zero in theme.json, so every full-bleed section is truly
   edge to edge and the gutter lives on the inner container. That sidesteps
   inset:0 resolving against the padding box.
   ====================================================================== */

.cascade-section { padding-block: clamp(3.5rem, 7vw, 6.5rem) !important; }
.cascade-section--tight { padding-block: clamp(2.5rem, 4vw, 3.5rem) !important; }
.cascade-section--flush { padding-block: 0 !important; }

.cascade-inner {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.cascade-inner--narrow { max-width: 860px; }

.cascade-measure { max-width: var(--wp--custom--measure, 68ch); }

.cascade-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-brand);
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.9rem;
}

.cascade-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
}

.cascade-on-dark .cascade-eyebrow { color: var(--c-bright); }
.cascade-on-dark { color: var(--c-mist); }
.cascade-on-dark :is(h1, h2, h3, h4, h5) { color: var(--c-paper); }
.cascade-on-dark p { color: rgba(238, 243, 245, 0.82); }

/* =========================================================================
   2. Header

   Fixed rather than sticky. A sticky header inside the template-part wrapper
   participates in flow, which produces a strip of body background under it
   and lets it scroll away. Fixed takes it out of flow and solves both.
   ====================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part { inset-block-start: 32px; }

@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part { inset-block-start: 46px; }
}

.wp-block-group.cascade-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding: 1.1rem var(--gutter) !important;
}

/* Transparent over the hero, solid once the page scrolls. */
.wp-site-blocks > header.wp-block-template-part {
	background: var(--c-paper);
	box-shadow: 0 1px 0 var(--c-line);
}

body.cascade-has-hero .wp-site-blocks > header.wp-block-template-part {
	background: transparent;
	box-shadow: none;
}

body.cascade-has-hero .wp-site-blocks > header.wp-block-template-part.is-stuck {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.6) blur(12px);
	box-shadow: 0 1px 0 var(--c-line), 0 10px 30px -20px rgba(10, 30, 40, 0.5);
}

/* Over the video the header contents invert; once stuck they go back. */
body.cascade-has-hero .cascade-header :is(a, .wp-block-site-title, .wp-block-site-title a) { color: var(--c-paper); }
body.cascade-has-hero .cascade-header .cascade-header__phone { color: var(--c-paper); border-color: rgba(255, 255, 255, 0.45); }
body.cascade-has-hero .is-stuck .cascade-header :is(a, .wp-block-site-title, .wp-block-site-title a) { color: var(--c-ink); }
body.cascade-has-hero .is-stuck .cascade-header .cascade-header__phone { color: var(--c-brand); border-color: var(--c-line); }

/* Logo sizing is width-based, deliberately.

   The Site Logo block writes its resize-handle value as an inline
   style="width:…px" on the img. An inline style outranks every selector, so a
   `max-height` rule here cannot lose — it pins the height while the handle
   changes the width, and the logo distorts instead of scaling. The handle then
   looks broken when the stylesheet is the thing fighting it.

   Height stays auto. Any cap is expressed as max-width, which is a separate
   property and so does constrain an inline width. */
.wp-block-group.cascade-header .wp-block-site-logo { line-height: 0; }

.wp-block-group.cascade-header .wp-block-site-logo img {
	display: block;
	height: auto;
	max-height: none;
	max-width: 100%;
}

/* Cap by width on small screens so a large desktop logo cannot eat the row. */
@media (max-width: 600px) {
	.wp-block-group.cascade-header .wp-block-site-logo img { max-width: 150px; }
}

.wp-block-group.cascade-header .wp-block-navigation { gap: clamp(1rem, 2vw, 2rem); }

.cascade-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.35rem;
	position: relative;
	transition: opacity 0.2s var(--ease);
}

.cascade-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--c-ember);
	transition: right 0.3s var(--ease);
}

.cascade-header .wp-block-navigation-item__content:hover::after,
.cascade-header .current-menu-item .wp-block-navigation-item__content::after { right: 0; }

.cascade-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	color: var(--c-brand);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cascade-header__phone:hover {
	background: var(--c-ember);
	border-color: var(--c-ember) !important;
	color: var(--c-ink) !important;
}

@media (max-width: 860px) {
	.cascade-header__phone span { display: none; }
	.cascade-header { padding-block: 0.85rem !important; }
}

/* Interior pages need clearance under the fixed header. */
body:not(.cascade-has-hero) .wp-site-blocks > main { padding-block-start: var(--header-h); }

/* Keep the footer off the fold on thin pages, so a short page reads as a page
   rather than as a footer stranded in a white field. */
.wp-site-blocks > main { min-height: 60vh; }

/* =========================================================================
   3. Hero

   The media layer is absolutely positioned. Core puts
   max-width:<contentSize>; margin-inline:auto on every unaligned direct child
   of a constrained group and grants absolute positioning no exemption, which
   renders the video at ~50% width dead centre. Three classes outrank core's
   two, so no !important is needed.
   ====================================================================== */

.cascade-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	min-height: var(--hero-min);
	display: flex;
	align-items: flex-start;
	background: var(--c-ink);
	background-image: linear-gradient(160deg, #0E3446 0%, #0A1E28 100%);
	padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)) clamp(3rem, 8vw, 6rem) !important;
	color: var(--c-paper);
}

.cascade-hero.wp-block-group .cascade-hero__media {
	position: absolute;
	inset: 0;
	max-width: none;
	margin-inline: 0;
	margin-block: 0;
	z-index: -2;
	overflow: hidden;
}

.cascade-hero__media video,
.cascade-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focal);
	display: block;
	opacity: 0;
	transition: opacity 1.2s var(--ease);
}

.cascade-hero__media video.is-ready,
.cascade-hero__media img.is-ready { opacity: 1; }

.cascade-hero.wp-block-group .cascade-hero__scrim {
	position: absolute;
	inset: 0;
	max-width: none;
	margin-inline: 0;
	margin-block: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 30, 40, 0.80) 0%, rgba(10, 30, 40, 0.42) 42%, rgba(10, 30, 40, 0.88) 100%),
		linear-gradient(100deg, rgba(10, 30, 40, 0.72) 0%, rgba(10, 30, 40, 0.10) 62%);
}

.cascade-hero__body {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-block: auto;
}

.cascade-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* Lighter than --c-bright on purpose. This label sits over moving video
	   rather than a flat panel, so it is measured against a worst-case frame:
	   #5AB6CE came in at 4.52:1, which passes AA with no headroom at 12px.
	   #93D3E3 measures 6.36:1 against the same frame. Exposed as a custom
	   property so a style variation can retune it for a different palette. */
	color: var(--wp--custom--hero-eyebrow, #93D3E3);
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.4rem;
}

.cascade-hero__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--c-ember);
	flex: none;
}

.cascade-hero h1 {
	color: var(--c-paper);
	max-width: 17ch;
	margin: 0 0 1.4rem;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgba(10, 30, 40, 0.45);
}

.cascade-hero__lede {
	max-width: 46ch;
	color: rgba(238, 243, 245, 0.9) !important;
	margin: 0 0 2.2rem;
}

.cascade-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1rem;
	align-items: center;
}

/* Trust strip pinned to the bottom of the hero */
.cascade-hero__strip {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: clamp(3rem, 7vw, 5.5rem) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: transparent;
}

.cascade-hero__stat {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding: 1.2rem 1.2rem 0 0;
}

.cascade-hero__stat strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	color: var(--c-paper);
	line-height: 1.1;
}

.cascade-hero__stat span {
	display: block;
	font-size: 0.8125rem;
	color: rgba(238, 243, 245, 0.72);
	margin-top: 0.35rem;
}

@media (max-width: 600px) {
	.cascade-hero { min-height: auto; }
	.cascade-hero__actions .wp-block-button { flex: 1 1 100%; }
	.cascade-hero__actions .wp-block-button__link { display: block; text-align: center; }
}

/* Past about 1400px the viewport gets wider without getting taller, so a
   viewport-height hero turns into a letterbox and the video is cropped hard.
   Tying the height to the width instead keeps the frame near 16:9, which is
   what stops the picture drifting off centre. */
@media (min-width: 1400px) {
	:root { --hero-min: min(58vw, 1120px); }
}

/* =========================================================================
   4. Buttons
   ====================================================================== */

.wp-block-button__link {
	transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	box-shadow: 0 8px 20px -14px rgba(10, 30, 40, 0.9);
}

.wp-block-button__link:hover { transform: translateY(-2px); }

.is-style-cascade-ember .wp-block-button__link,
.wp-block-button.is-style-cascade-ember > .wp-block-button__link {
	background-color: var(--c-ember);
	/* Which text colour clears contrast depends on the accent. Orange needs
	   ink; a mid green needs white. The variation decides. */
	color: var(--wp--custom--ember-text, var(--c-ink));
}

.is-style-cascade-ember .wp-block-button__link:hover {
	filter: brightness(1.08);
	color: var(--wp--custom--ember-text, var(--c-ink));
}

.is-style-cascade-ghost .wp-block-button__link,
.wp-block-button.is-style-cascade-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--c-paper);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.is-style-cascade-ghost .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px var(--c-paper);
	color: var(--c-paper);
}

.cascade-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--c-brand);
}

.cascade-textlink::after {
	content: "→";
	transition: transform 0.25s var(--ease);
}

.cascade-textlink:hover::after { transform: translateX(5px); }

/* =========================================================================
   5. Cards and grids
   ====================================================================== */

.cascade-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	margin-top: clamp(2rem, 4vw, 3.25rem);
}

.cascade-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.cascade-card {
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 2.5vw, 2.1rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
	position: relative;
	overflow: hidden;
}

.cascade-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 3px;
	background: var(--c-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease);
}

.cascade-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lift, 0 22px 48px -18px rgba(10, 30, 40, 0.28));
	border-color: transparent;
}

.cascade-card:hover::before { transform: scaleX(1); }

.cascade-card h3 { margin: 0; }

.cascade-card p {
	margin: 0;
	color: var(--c-slate);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.cascade-card__icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--c-mist);
	color: var(--c-brand);
	display: grid;
	place-items: center;
	margin-bottom: 0.4rem;
	flex: none;
}

.cascade-card__icon svg { width: 24px; height: 24px; }

.cascade-card__foot {
	margin-top: auto;
	padding-top: 0.9rem;
}

.cascade-card--dark {
	background: var(--c-deep);
	border-color: rgba(255, 255, 255, 0.1);
}

.cascade-card--dark h3 { color: var(--c-paper); }
.cascade-card--dark p { color: rgba(238, 243, 245, 0.78); }
.cascade-card--dark .cascade-card__icon { background: rgba(90, 182, 206, 0.16); color: var(--c-bright); }

/* Numbered steps */
.cascade-steps {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin-top: clamp(2rem, 4vw, 3.25rem);
	counter-reset: step;
}

.cascade-step { position: relative; padding-top: 2.6rem; }

.cascade-step::before {
	counter-increment: step;
	content: "0" counter(step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--c-ember);
}

.cascade-step::after {
	content: "";
	position: absolute;
	inset-block-start: 1.55rem;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: var(--c-line);
}

.cascade-on-dark .cascade-step::after { background: rgba(255, 255, 255, 0.16); }

.cascade-step h3 { margin: 0 0 0.5rem; }
.cascade-step p { margin: 0; color: var(--c-slate); font-size: 0.9375rem; }
.cascade-on-dark .cascade-step p { color: rgba(238, 243, 245, 0.78); }

/* Split section: sticky text beside a stack */
.cascade-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.cascade-split { grid-template-columns: 0.85fr 1.15fr; }
	.cascade-split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Checklist */
.cascade-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }

.cascade-checks li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0.85rem;
	align-items: start;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.cascade-checks li::before {
	content: "";
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	border-radius: 50%;
	background: var(--c-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cascade-on-dark .cascade-checks li::before { background-color: var(--c-bright); }

/* =========================================================================
   6. Stats band
   ====================================================================== */

.cascade-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
}

.cascade-stat strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem);
	font-weight: 600;
	line-height: 1;
	color: var(--c-bright);
	letter-spacing: -0.02em;
}

.cascade-stat span {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.875rem;
	color: rgba(238, 243, 245, 0.75);
	max-width: 22ch;
}

/* =========================================================================
   7. Testimonial
   ====================================================================== */

.cascade-quote {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.cascade-quote blockquote {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem);
	line-height: 1.35;
	font-weight: 400;
	letter-spacing: -0.015em;
	margin: 0 0 1.75rem;
	border: 0;
	padding: 0;
	text-wrap: balance;
}

.cascade-quote blockquote::before { content: "\201C"; color: var(--c-ember); }
.cascade-quote blockquote::after { content: "\201D"; color: var(--c-ember); }

.cascade-quote cite {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-slate);
}

.cascade-on-dark .cascade-quote cite { color: var(--c-bright); }

/* =========================================================================
   8. FAQ
   ====================================================================== */

.cascade-faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--c-line); }

.cascade-faq details {
	border-bottom: 1px solid var(--c-line);
}

.cascade-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.35rem 3rem 1.35rem 0;
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.cascade-faq summary::-webkit-details-marker { display: none; }

.cascade-faq summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.35rem;
	inset-block-start: 1.55rem;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--c-brand), var(--c-brand)) center / 100% 2px no-repeat,
		linear-gradient(var(--c-brand), var(--c-brand)) center / 2px 100% no-repeat;
	transition: transform 0.3s var(--ease);
}

.cascade-faq details[open] summary::after { transform: rotate(135deg); }

.cascade-faq .cascade-faq__a {
	padding: 0 3rem 1.6rem 0;
	margin: 0;
	color: var(--c-slate);
	max-width: 72ch;
}

/* =========================================================================
   9. Call to action band
   ====================================================================== */

.cascade-cta {
	background: var(--c-deep);
	background-image: radial-gradient(120% 140% at 12% 0%, rgba(90, 182, 206, 0.22) 0%, rgba(14, 52, 70, 0) 58%);
	color: var(--c-paper);
	position: relative;
	overflow: hidden;
}

.cascade-cta__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.cascade-cta__grid { grid-template-columns: 1.35fr 0.65fr; }
	.cascade-cta__actions { justify-self: end; text-align: right; }
}

.cascade-cta h2 { color: var(--c-paper); max-width: 20ch; margin: 0; text-wrap: balance; }
.cascade-cta p { color: rgba(238, 243, 245, 0.82); margin: 1rem 0 0; max-width: 52ch; }

/* =========================================================================
   10. Contact
   ====================================================================== */

.cascade-contact {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.cascade-contact { grid-template-columns: 0.9fr 1.1fr; }
}

.cascade-detail {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 1rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--c-line);
	align-items: start;
}

.cascade-detail:first-of-type { border-top: 1px solid var(--c-line); }

.cascade-detail__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--c-mist);
	color: var(--c-brand);
	display: grid;
	place-items: center;
}

.cascade-detail__icon svg { width: 20px; height: 20px; }

.cascade-detail dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-slate);
	margin-bottom: 0.3rem;
}

.cascade-detail dd { margin: 0; font-size: 1rem; font-weight: 500; }
.cascade-detail dd a { text-decoration: none; }
.cascade-detail dd a:hover { text-decoration: underline; }

/* Contact Form 7 — styled generically so it also catches plain forms */
.cascade-form {
	background: var(--c-mist);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.cascade-form .wpcf7-form p { margin: 0 0 1.1rem; }

.cascade-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--c-ink);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cascade-form :is(input, select, textarea):focus {
	border-color: var(--c-brand);
	box-shadow: 0 0 0 3px rgba(20, 96, 124, 0.15);
	outline: none;
}

.cascade-form textarea { min-height: 140px; resize: vertical; }

.cascade-form :is(input[type="submit"], button[type="submit"], .wpcf7-submit) {
	width: auto;
	background: var(--c-brand);
	color: var(--c-paper);
	border: 0;
	border-radius: 999px;
	padding: 0.95rem 2.1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.cascade-form :is(input[type="submit"], .wpcf7-submit):hover {
	background: var(--c-ember);
	color: var(--c-ink);
	transform: translateY(-2px);
}

.cascade-form .wpcf7-not-valid-tip { color: #B3341B; font-size: 0.8125rem; margin-top: 0.4rem; }
.cascade-form .wpcf7-response-output { border-radius: 10px; border-width: 1px; font-size: 0.9375rem; margin: 1.25rem 0 0; padding: 0.85rem 1rem; }

.cascade-form__row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cascade-form__row { grid-template-columns: 1fr 1fr; } }

.cascade-form label { display: block; }

.cascade-form .cascade-form__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--c-ink);
}

.cascade-form__note { font-size: 0.8125rem; color: var(--c-slate); margin: 1rem 0 0; }

/* =========================================================================
   11. Page hero (interior)
   ====================================================================== */

.cascade-pagehead {
	background: var(--c-deep);
	background-image: radial-gradient(100% 160% at 85% 0%, rgba(90, 182, 206, 0.2) 0%, rgba(14, 52, 70, 0) 60%);
	color: var(--c-paper);
	padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) clamp(2.5rem, 6vw, 5rem) !important;
}

/* A page whose content opens with its own dark head supplies its own header
   clearance, so main must not add a second helping. */
body:not(.cascade-has-hero) .wp-site-blocks > main:has(.cascade-pagehead) { padding-block-start: 0; }

/* Hide the text site title once a logo image is actually present. */
.cascade-header__brand:has(.wp-block-site-logo img) .wp-block-site-title { display: none; }
.cascade-header__brand .wp-block-site-title a { text-decoration: none; }

.cascade-pagehead h1 { color: var(--c-paper); margin: 0; max-width: 20ch; text-wrap: balance; }
.cascade-pagehead p { color: rgba(238, 243, 245, 0.82); margin: 1.1rem 0 0; max-width: 56ch; }

.cascade-breadcrumb {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-bright);
	margin: 0 0 1.1rem;
}

.cascade-breadcrumb a { color: inherit; text-decoration: none; opacity: 0.75; }
.cascade-breadcrumb a:hover { opacity: 1; }

/* =========================================================================
   12. Footer
   ====================================================================== */

.cascade-footer {
	background: var(--c-ink);
	color: rgba(238, 243, 245, 0.72);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem !important;
}

.cascade-footer__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) { .cascade-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .cascade-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.cascade-footer h2, .cascade-footer h3 { color: var(--c-paper); }

.cascade-footer__title {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.6875rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: var(--c-bright) !important;
	margin: 0 0 1.1rem !important;
	letter-spacing: 0.16em;
}

.cascade-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.cascade-footer a { color: rgba(238, 243, 245, 0.78); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s var(--ease); }
.cascade-footer a:hover { color: var(--c-ember); }
.cascade-footer p { font-size: 0.9375rem; }

.cascade-footer__logo { max-width: 210px; height: auto; margin-bottom: 1.1rem; }

.cascade-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
}

.cascade-footer__legal { max-width: 78ch; margin: 1.5rem 0 0; font-size: 0.75rem; line-height: 1.65; color: rgba(238, 243, 245, 0.5); }

.cascade-social { display: flex; gap: 0.65rem; }

.cascade-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.cascade-social a:hover { background: var(--c-ember); border-color: var(--c-ember); color: var(--c-ink); }
.cascade-social svg { width: 17px; height: 17px; }

/* =========================================================================
   13. Editorial (posts, archives, 404, search)
   ====================================================================== */

.cascade-prose > * + * { margin-block-start: 1.4rem; }
.cascade-prose :is(h2, h3) { margin-block-start: 2.6rem; }
.cascade-prose img, .cascade-prose figure { border-radius: var(--radius); }

.cascade-postcard {
	border-bottom: 1px solid var(--c-line);
	padding-block: 2rem;
}

.cascade-postcard:first-child { border-top: 1px solid var(--c-line); }

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { color: var(--c-brand); }

.wp-block-post-date, .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-slate);
}

.wp-block-query-pagination {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-line);
	font-size: 0.9375rem;
}

/* =========================================================================
   14. Editor-only corrections
   ====================================================================== */

.editor-styles-wrapper .cascade-hero { min-height: 640px; padding-block-start: clamp(3rem, 8vw, 7rem) !important; }
.editor-styles-wrapper .cascade-pagehead { padding-block-start: clamp(2.5rem, 6vw, 5rem) !important; }
.editor-styles-wrapper .cascade-hero__media video { opacity: 0.85; }

/* =========================================================================
   15. Mobile navigation overlay
   ====================================================================== */

.wp-block-group.cascade-header .wp-block-navigation__responsive-container-open,
.wp-block-group.cascade-header .wp-block-navigation__responsive-container-close {
	color: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--c-ink) !important;
	color: var(--c-paper) !important;
	padding: clamp(1.5rem, 5vw, 3rem);
}

.wp-block-navigation__responsive-container.is-menu-open a { color: var(--c-paper) !important; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--c-ember) !important; }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 6vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	padding-top: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

/* =========================================================================
   16. Neutralise flow-layout blockGap inside CSS-driven layouts

   Core adds margin-block-start to every non-first child of an is-layout-flow
   group. Inside a container that already spaces its children with grid or
   flex gap, that stacks up and the spacing doubles. Core's selector is two
   classes, so these are too.
   ====================================================================== */

.wp-block-group.cascade-grid > * + *,
.wp-block-group.cascade-cards > * + *,
.wp-block-group.cascade-card > * + *,
.wp-block-group.cascade-steps > * + *,
.wp-block-group.cascade-stats > * + *,
.wp-block-group.cascade-contact > * + *,
.wp-block-group.cascade-split > * + *,
.wp-block-group.cascade-header > * + * { margin-block-start: 0; }

/* The hero especially. Its media and scrim layers are absolutely positioned
   with top and bottom both pinned and height auto — so a margin-block-start
   does not push the box down the page, it SHRINKS it. Core's blockGap put
   20px on the scrim (the second child), which left a 20px band of completely
   unscrimmed video across the top of the hero. */
.wp-block-group.cascade-hero > * + * { margin-block-start: 0; }

/* Section heads: eyebrow, heading and standfirst share one width so nothing
   sits at a different measure than the line above it. */
.cascade-head { max-width: 62ch; }
.cascade-head h2 { margin: 0; text-wrap: balance; }
.cascade-head > p:last-child { margin: 1rem 0 0; color: var(--c-slate); font-size: var(--wp--preset--font-size--lead); }
.cascade-on-dark .cascade-head > p:last-child { color: rgba(238, 243, 245, 0.8); }
.wp-block-group.cascade-head > * + * { margin-block-start: 0; }

/* The FAQ accordion sits in the wide column beside its own section head, so
   its left edge lines up with every other section rather than floating in a
   centred narrow column of its own. */
.cascade-faq--flush { margin-top: 0; }
@media (max-width: 899px) { .cascade-faq--flush { margin-top: 2rem; } }

/* =========================================================================
   17. Logo

   Two copies of the lockup, crossfaded. The header is transparent over the
   hero video and solid once scrolled, and one image cannot serve both.
   ====================================================================== */

.cc-logo {
	display: block;
	position: relative;
	line-height: 0;
	flex: none;
}

.cc-logo img {
	display: block;
	width: 232px;
	height: auto;
	transition: opacity 0.3s var(--ease);
}

.cc-logo .cc-logo__dark {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	opacity: 0;
}

.is-stuck .cc-logo .cc-logo__light { opacity: 0; }
.is-stuck .cc-logo .cc-logo__dark  { opacity: 1; }

/* Interior pages never have a transparent header. */
body:not(.cascade-has-hero) .cc-logo .cc-logo__light { opacity: 0; }
body:not(.cascade-has-hero) .cc-logo .cc-logo__dark  { opacity: 1; }

@media (max-width: 860px) { .cc-logo img { width: 196px; } }
@media (max-width: 600px) { .cc-logo img { width: 168px; } }

/* The footer carries the full lockup, subtitle and all — there is room. */
.cascade-footer__logo {
	display: block;
	width: 100%;
	max-width: 270px;
	height: auto;
	margin: 0 0 1.2rem;
}