/* ==========================================================================
   Geodesign theme — base & layout primitives
   --------------------------------------------------------------------------
   This file holds:
   - reset / base typography
   - layout primitives (.container, .section, .section-intro)
   - foundation components (.eyebrow, .section-title, .section-lead)
   - skip link & screen-reader utility
   - site header (skeleton — final layout TBD per design-system.md)
   - region picker (Phase 1 stub)
   - site footer

   Per-block component CSS ships with each block (loaded conditionally
   via block.json). Foundation classes above live here because they're
   shared by every section block.
   ========================================================================== */


/* --------------------------------------------------------------------------
   RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-base);
	color: var(--color-text);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
figure, blockquote { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   ACCESSIBILITY UTILITIES
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--color-navy);
	color: var(--color-yellow);
	font-weight: 700;
	font-size: var(--fs-body-sm);
	padding: var(--space-3) var(--space-5);
	z-index: 1000;
}
.skip-link:focus,
.skip-link:focus-visible {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: var(--space-3);
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
}


/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.section { padding: var(--space-9) 0; }
.section--gray { background: var(--color-gray-100); }
.section--navy { background: var(--color-navy); color: var(--color-white); }

@media (max-width: 640px) {
	.section { padding: var(--space-8) 0; }
}


/* --------------------------------------------------------------------------
   FOUNDATION COMPONENTS — section opener
   --------------------------------------------------------------------------
   Eyebrow + section-title + section-lead. Used by the section-intro block
   and by every future block that opens with this canonical pattern.
   Spacing lives on the children (margin-bottom on eyebrow + title) so the
   classes work whether wrapped in .section-intro or used standalone.
   -------------------------------------------------------------------------- */

/* Wrapper. Constrains width and spaces against following content. */
.section-intro {
	max-width: 820px;
	margin-bottom: var(--space-7);
}
.section-intro--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.section-intro--center .section-lead {
	margin-left: auto;
	margin-right: auto;
}

/* Eyebrow — yellow uppercase pill. */
.eyebrow {
	display: inline-block;
	background: var(--color-yellow);
	color: var(--color-navy);
	font-size: var(--fs-badge);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);   /* 4px 12px */
	margin-bottom: var(--space-4);
}

/* Section title — H1-class size, navy on white, white on navy. */
.section-title {
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-h1);
	color: var(--color-navy);
	margin-bottom: var(--space-4);
}
.section-title--on-navy { color: var(--color-white); }

/* Section lead — H5 size, muted on white, white-85 on navy. */
.section-lead {
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: var(--lh-loose);
	color: var(--color-text-muted);
	max-width: 720px;
}
.section-lead--on-navy { color: var(--color-on-navy-85); }

/* Mobile: tighten title size — drop from 48 to 32 on small screens. */
@media (max-width: 640px) {
	.section-title { font-size: var(--fs-h3); }
}


/* --------------------------------------------------------------------------
   SITE HEADER (skeleton)
   --------------------------------------------------------------------------
   Final layout is in progress — see design-system.md § Navigation.
   These styles render a usable header but are not the final design.
   -------------------------------------------------------------------------- */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-height: 72px;
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}

.site-header__logo {
	flex: 0 0 auto;
}
.site-header__logo img {
	height: auto;
	max-height: 48px;
	width: auto;
}
.site-header__logo-text {
	font-weight: 800;
	color: var(--color-navy-dark);
	font-size: var(--fs-h6);
	letter-spacing: var(--ls-card);
}

.site-header__nav { flex: 1 1 auto; min-width: 0; }
.site-header__nav--secondary { flex: 0 0 auto; }

.site-header__nav-list {
	display: flex;
	gap: var(--space-5);
	flex-wrap: wrap;
}
.site-header__nav-list a {
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: var(--color-navy-dark);
	transition: color var(--t-fast);
}
.site-header__nav-list a:hover,
.site-header__nav-list a:focus-visible {
	color: var(--color-navy-700);
}


/* --------------------------------------------------------------------------
   REGION PICKER (Phase 1 stub)
   --------------------------------------------------------------------------
   Native <details> for keyboard / screen-reader support — no JS required.
   Replaced with Polylang-driven UI when Polylang is wired up.
   -------------------------------------------------------------------------- */
.region-picker {
	position: relative;
	flex: 0 0 auto;
}
.region-picker__toggle {
	list-style: none;                /* hide native disclosure marker */
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	color: var(--color-navy-dark);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	background: var(--color-white);
	transition: border-color var(--t-fast);
}
.region-picker__toggle::-webkit-details-marker { display: none; }
.region-picker__toggle:hover { border-color: var(--color-navy-dark); }

.region-picker__caret { transition: transform var(--t-fast); }
.region-picker[open] .region-picker__caret { transform: rotate(180deg); }

.region-picker__list {
	position: absolute;
	top: calc(100% + var(--space-1));
	right: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	z-index: 50;
}
.region-picker__link {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-body-sm);
	color: var(--color-navy-dark);
}
.region-picker__link:hover,
.region-picker__link:focus-visible {
	background: var(--color-gray-50);
}
.region-picker__item.is-current .region-picker__link {
	color: var(--color-navy);
	font-weight: 700;
}


/* --------------------------------------------------------------------------
   SITE FOOTER (skeleton)
   --------------------------------------------------------------------------
   Minimal — full footer composition (final-CTA + 3-column contact strip)
   comes via the ready-section + a footer-strip block in later tasks.
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--color-border-on-navy);
	background: var(--color-navy);
	color: var(--color-on-navy-70);
	padding: var(--space-8) 0;
}
.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.site-footer__name {
	color: var(--color-white);
	font-weight: 700;
	font-size: var(--fs-h6);
}
.site-footer__nav-list {
	display: flex;
	gap: var(--space-5);
	flex-wrap: wrap;
}
.site-footer__nav-list a {
	color: var(--color-on-navy-70);
	font-size: var(--fs-body-sm);
	transition: color var(--t-fast);
}
.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
	color: var(--color-white);
}
.site-footer__copyright {
	color: var(--color-on-navy-60);
	font-size: var(--fs-xs);
}


/* --------------------------------------------------------------------------
   RESPONSIVE — mobile header
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: var(--space-3);
	}
	.site-header__nav { order: 3; flex-basis: 100%; }
	.site-header__nav--secondary { display: none; }
}

/* --------------------------------------------------------------------------
   FOUNDATION COMPONENTS — buttons
   --------------------------------------------------------------------------
   Used across all blocks (cta-banner, hero-form, ready-section, …).
   Lives here in theme.css because every page that has a button needs them.
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-badge);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 14px 28px;
	border: 0;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition:
		background-color var(--t-fast),
		color var(--t-fast),
		border-color var(--t-fast),
		transform var(--t-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Variants ----------------------------------------------------------------- */
.btn--primary {
	background: var(--color-yellow);
	color: var(--color-navy-dark);
}
.btn--primary:hover { background: #f0f000; }

.btn--navy {
	background: var(--color-navy);
	color: var(--color-white);
}
.btn--navy:hover { background: var(--color-navy-700); }

.btn--outline {
	background: transparent;
	color: var(--color-navy);
	border: 1.5px solid var(--color-navy);
}
.btn--outline:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

.btn--outline-white {
	background: transparent;
	color: var(--color-white);
	border: 1.5px solid var(--color-white);
}
.btn--outline-white:hover {
	background: var(--color-white);
	color: var(--color-navy-dark);
}

/* Sizes -------------------------------------------------------------------- */
.btn--large {
	font-size: 18px;
	padding: 18px 36px;
}

.btn--block {
	display: flex;
	width: 100%;
}

/* === geodesign:header-phase2 BEGIN === */
/* =========================================================
   SITE HEADER (Phase 2)
   Navy bar, yellow logo block hanging below, flat primary nav,
   Polylang language switcher, hamburger-toggled mobile drawer.

   Replaces the older .site-header / .nav / .nav__logo rules from
   the reference HTML (those remain for the static reference pages;
   the production theme uses .site-header__inner / .site-logo).
   ========================================================= */

.site-header {
	background: var(--color-navy);
	color: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 20;
	transition: transform .25s ease;
}

.site-header.is-hidden {
	transform: translateY(-110px);
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		transition: none;
	}
}

.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	height: 80px;
	display: flex;
	align-items: center;
	gap: var(--space-6);
	overflow: visible; /* Allow the logo block to hang below the navy bar. */
}

/* ---------- Skip link ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
	width: auto;
	height: auto;
	padding: var(--space-3) var(--space-4);
	background: var(--color-yellow);
	color: var(--color-navy-dark);
	font-weight: 700;
	z-index: 100;
}

/* ---------- Logo block ---------- */
.site-logo {
	flex: 0 0 auto;
	width: 110px;
	height: 110px;
	background: var(--color-yellow);
	color: var(--color-navy-dark); /* SVG paths inherit via currentColor */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-3);
	align-self: flex-start; /* Anchor logo top to the navy bar top */
	transition: opacity .15s ease;
}
.site-logo:hover,
.site-logo:focus-visible {
	opacity: 0.92;
}
.site-logo:focus-visible {
	/* Spec baseline is 2px yellow @ 2px offset, but yellow-on-yellow is
	   invisible here. Use navy-dark — meets contrast against the yellow block. */
	outline: 2px solid var(--color-navy-dark);
	outline-offset: 2px;
}

.site-logo__svg {
	width: 100%;
	height: auto;
	max-height: 100%;
	display: block;
}
.site-logo__svg--full { display: block; }
.site-logo__svg--mark { display: none; }

/* ---------- Primary navigation ---------- */
.primary-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}
.primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav__list .menu-item > a {
	display: inline-block;
	color: var(--color-yellow);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	padding: var(--space-2) 0;
	transition: opacity .15s ease;
}
.primary-nav__list .menu-item > a:hover,
.primary-nav__list .menu-item > a:focus-visible {
	opacity: 0.75;
}
.primary-nav__list .menu-item > a:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 4px;
}
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* ---------- Language switcher ---------- */
.lang-switcher {
	flex: 0 0 auto;
	position: relative;
}
.lang-switcher__toggle {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	color: var(--color-yellow);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	background: transparent;
	border: none;
	user-select: none;
}
.lang-switcher__toggle::-webkit-details-marker { display: none; }
.lang-switcher__toggle::marker { content: ''; }
.lang-switcher__toggle:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}

.lang-switcher__code {
	letter-spacing: 0.04em;
}
.lang-switcher__globe {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.lang-switcher__caret {
	width: 10px;
	height: 6px;
	flex: 0 0 auto;
	transition: transform .15s ease;
}
.lang-switcher[open] .lang-switcher__caret {
	transform: rotate(180deg);
}

.lang-switcher__menu {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	min-width: 200px;
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
	background: var(--color-white);
	color: var(--color-navy-dark);
	box-shadow: var(--shadow-lg);
	z-index: 30;
}
.lang-switcher__link {
	display: block;
	padding: var(--space-2) var(--space-4);
	color: var(--color-navy-dark);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: none;
}
.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
	background: var(--color-yellow);
	color: var(--color-navy-dark);
}
.lang-switcher__link.is-current {
	font-weight: 800;
}

/* ---------- Mobile drawer toggle (hamburger) ---------- */
.site-header__toggle {
	display: none; /* desktop hides; mobile MQ shows */
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-yellow);
	cursor: pointer;
	flex: 0 0 auto;
}
.site-header__toggle:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}
.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	display: block;
	width: 24px;
	height: 3px;
	background: currentColor;
	margin: 0 auto;
	transition: transform .2s ease, opacity .2s ease;
}
.site-header__toggle-icon {
	position: relative;
}
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
}
.site-header__toggle-icon::before { top: -8px; }
.site-header__toggle-icon::after  { top:  8px; }

/* Hamburger animates to X when drawer is open. */
.is-nav-open .site-header__toggle-icon {
	background: transparent;
}
.is-nav-open .site-header__toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}
.is-nav-open .site-header__toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* =========================================================
   MOBILE — under 768px
   ========================================================= */
@media (max-width: 767px) {

	.site-header__inner {
		height: 64px;
		gap: var(--space-3);
	}

	/* Hide-on-scroll distance: shorter on mobile (no hanging logo). */
	.site-header.is-hidden {
		transform: translateY(-64px);
	}

	/* Logo: small square, mark-only, vertically centred (no hang). */
	.site-logo {
		width: 48px;
		height: 48px;
		padding: var(--space-2);
		align-self: center;
	}
	.site-logo__svg--full { display: none; }
	.site-logo__svg--mark { display: block; }

	/* Primary nav becomes a slide-down drawer; hidden by default. */
	.primary-nav {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		background: var(--color-navy);
		padding: var(--space-5) var(--container-padding) var(--space-7);
		transform: translateY(-110%);
		transition: transform .25s ease;
		z-index: 19;
		display: block;
	}
	.is-nav-open .primary-nav {
		transform: translateY(0);
	}
	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
	}
	.primary-nav__list .menu-item > a {
		display: block;
		padding: var(--space-3) 0;
		font-size: var(--fs-h6);
		border-bottom: 1px solid rgba(255, 255, 0, 0.15);
	}

	/* Lang switcher: visible in top bar, sits just left of the hamburger. */
	.lang-switcher__menu {
		right: -8px; /* nudge inside viewport */
	}

	.site-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Lock body scroll while drawer is open. */
	.is-nav-open {
		overflow: hidden;
	}
}
/* === geodesign:header-phase2 END === */

/* ==========================================================================
   GEODESIGN FOOTER — Phase 2 (sentinel: footer-v1)
   4-column grid + legal strip on navy. Tokens-only.
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--color-border-on-navy);
    background: var(--color-navy);
    color: var(--color-white);
    padding: var(--space-9) 0 var(--space-6);
}

.site-footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7);
    padding-bottom: var(--space-7);
    border-bottom: 1px solid var(--color-border-on-navy);
}

.site-footer__col { min-width: 0; }

.site-footer__heading {
    font-size: var(--fs-body-sm);
    font-weight: 700;
    color: var(--color-yellow);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin: 0 0 var(--space-4);
    line-height: var(--lh-base);
}

.site-footer a {
    color: var(--color-white);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.site-footer a:hover {
    color: var(--color-yellow);
    border-bottom-color: var(--color-yellow);
}
.site-footer a:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
    border-bottom-color: transparent;
    color: var(--color-yellow);
}

.site-footer__nav { margin: 0; }
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__list li { margin-bottom: var(--space-2); }
.site-footer__list li:last-child { margin-bottom: 0; }
.site-footer__list a {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-base);
}

.site-footer__intro {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-base);
    color: var(--color-on-navy-85);
}
.site-footer__line {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-base);
}
.site-footer__line:last-child { margin-bottom: 0; }
.site-footer__label {
    display: block;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-1);
}
.site-footer__value { color: var(--color-on-navy-85); }

.site-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border-on-navy);
    color: var(--color-white);
    transition:
        background var(--t-fast),
        border-color var(--t-fast),
        color var(--t-fast);
}
.site-footer__social a:hover {
    background: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-navy);
    border-bottom-color: var(--color-yellow);
}
.site-footer__social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-5);
}
.site-footer__copyright {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-on-navy-60);
    line-height: var(--lh-base);
}
.site-footer__cookie-link { font-size: var(--fs-xs); }

@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}
@media (max-width: 768px) {
    .site-footer { padding: var(--space-8) 0 var(--space-5); }
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .site-footer__legal {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   END footer-v1
   ========================================================================== */


/* === gray-section seam fix (cta-banner / fm-mark) v3 ===
   Visual continuity for stacked gray-bg block sections.

   Three things need to be true to make the seam vanish:

   1. No margin on the outer <section> wrappers (parent layouts can otherwise
      contribute one). Plain block display, no inline-block baseline gaps.

   2. Drop padding-top on the second section when two gray sections are
      direct siblings — foundation's section{padding:var(--space-9) 0}
      otherwise stacks 96+96 of grey (correct in color, wrong in amount).

   3. CRITICAL: the inner .fm-mark element has its own margin-top:var(--space-7)
      meant for the legacy "embedded inside .series" layout. When the new
      .fm-mark-section wrapper has no padding-top (per rule 2 above), that
      margin collapses through the section and shows up as WHITE space
      ABOVE the section's grey background — because margin-collapse moves
      the margin outside the section. Same applies to .cta-banner. Zero the
      inner margin when the block sits inside its own section wrapper. */
.cta-banner-section,
.fm-mark-section {
    margin: 0;
    display: block;
}

.cta-banner-section--gray + .fm-mark-section--gray,
.fm-mark-section--gray + .cta-banner-section--gray,
.cta-banner-section--gray + .cta-banner-section--gray,
.fm-mark-section--gray + .fm-mark-section--gray {
    padding-top: 0;
}

/* Kill margin-collapse leak. Section padding (top+bottom) now owns the
   vertical rhythm; inner .cta-banner / .fm-mark contributes none. */
.cta-banner-section .cta-banner,
.fm-mark-section .fm-mark {
    margin-top: 0;
}
/* === end gray-section seam fix v3 === */