/*
24/7 Madeira — component stylesheet
Ported from the static design prototype. Every class is prefixed m247-
so it cannot collide with core block, plugin or other-theme styles.
Loaded after the core global styles so equal-specificity rules win.
*/

/* ---------------------------------------------------------------------------
   Document base: anchor scrolling + emphasis
--------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 125px; /* offset for sticky topbar + header */
}

/* Link reset (prototype parity): links inherit colour and carry no underline
   by default. Long-form prose re-adds an underline below so body copy links
   stay distinguishable. */
:where(.wp-site-blocks) a {
	color: inherit;
	text-decoration: none;
}

/* Headline emphasis: prototype uses upright red, not italic. */
.m247-main em,
.m247-header em {
	font-style: normal;
	color: #d90f28;
}

/* ---------------------------------------------------------------------------
   Base typography (mirrors the prototype; element-level so every page
   inherits the coastal display/body pairing, not browser defaults).
--------------------------------------------------------------------------- */

body {
	margin: 0;
	color: #102b46;
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	background: #fff;
}

h1,
h2 {
	margin: 0;
	line-height: 1.05;
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-weight: 600;
	letter-spacing: -0.025em;
}

h1 {
	font-size: clamp(3.6rem, 5.3vw, 5.4rem);
}

h2 {
	font-size: clamp(2.6rem, 3.5vw, 3.7rem);
}

h3 {
	margin: 0;
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 1.4rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: normal;
}

p {
	margin: 0;
	margin-top: 1rem;
}

/* Core emits `:root :where(.is-layout-flow) > * { margin-block-start: 0 }`,
   which outranks the bare `p` selector above and flattens the prototype's
   paragraph rhythm everywhere. Restate it at matching specificity (this
   stylesheet loads after the global styles, so it wins on source order).
   Component rules below are declared later and still override it, which is
   how the deliberately tight blocks stay tight. */
.wp-block-paragraph {
	margin-top: 1rem;
}

em {
	font-style: normal;
	color: #d90f28;
}

/* Logged-in admin bar: keep the sticky header below it, and give anchor
   targets enough clearance that they don't land underneath it. */
body.admin-bar .m247-header {
	top: 32px;
}

:root:has(body.admin-bar) {
	scroll-padding-top: 157px;
}

/* Below 783px core switches the admin bar to `position:absolute`, so the
   sticky header goes back to the top of the viewport. */
@media (max-width: 782px) {
	body.admin-bar .m247-header {
		top: 0;
	}

	:root:has(body.admin-bar) {
		scroll-padding-top: 100px;
	}
}

/* Keyboard focus: visible outline for keyboard users (prototype parity). */
:focus-visible {
	outline: 3px solid #2373d5;
	outline-offset: 5px;
}

/* Prose / inner-content pages: sub-headings use the body face (the
   prototype's .policy treatment), not the condensed display face. */
.m247-prose h2,
.m247-prose h3 {
	font-family: 'DM Sans', Arial, sans-serif;
	letter-spacing: normal;
}

.m247-prose h2 {
	font-size: 1.5rem;
	margin-top: 35px;
}

.m247-prose h3 {
	font-size: 1.15rem;
	margin-top: 24px;
}

.m247-prose p {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   Multi-column sections must lay out as CSS grid (the prototype's layout).
   Core adds `body .is-layout-flex { display:flex }` to wp-block-columns,
   which has higher specificity (0,1,1) than our `.m247-*` rules (0,1,0) and
   would otherwise win, making our grid-template-columns ignored. Prefixing
   with `body` (0,1,1) and declaring after the core styles lets the grid win.
   The `grid-template-columns` are set on the base rules below; here we only
   need to force `display:grid` at the higher specificity.
--------------------------------------------------------------------------- */

body .m247-hero-grid,
body .m247-services,
body .m247-work-grid,
body .m247-about-story-cols,
body .m247-values-cols,
body .m247-contact-cols,
body .m247-footgrid,
body .m247-about-teaser > .wp-block-columns {
	display: grid;
}

/* Core forces `align-items:normal!important` on every columns block, so the
   prototype's vertical centring has to be restated at the same weight — but
   only while those blocks are still side by side. */
@media (min-width: 801px) {
	body .m247-hero-grid,
	body .m247-about-teaser > .wp-block-columns,
	body .m247-about-story-cols {
		align-items: center !important;
	}
}

/* Constrained groups cap their children at the global content size and force
   auto side margins (with `!important`). Our sections are already inside
   `.m247-wrap`, so release the cap... */
.m247-wrap > *,
.m247-section > *,
.m247-hero > *,
.m247-band-copy > * {
	max-width: none;
}

/* ...and stop the forced centring. Every block in this design is flush left
   inside its column; only `.m247-wrap` and `.m247-prose` centre themselves,
   and a narrower `max-width` (the lead, the section notes) must stay
   left-aligned rather than drift to the middle of its container. */
.m247-main .is-layout-constrained > *:not(.m247-wrap):not(.m247-prose),
.m247-footer .is-layout-constrained > *:not(.m247-wrap):not(.m247-prose) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------------------- */

.m247-wrap {
	max-width: 1280px;
	width: calc(100% - 112px);
	margin-right: auto;
	margin-left: auto;
}

/* Template part wrappers must not constrain our layout. */
.wp-site-blocks,
.wp-site-blocks > .wp-block-template-part {
	width: 100%;
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Shared bits
--------------------------------------------------------------------------- */

.m247-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	font-weight: 700;
	margin: 0 0 22px;
	line-height: 1.5;
	text-transform: uppercase;
}

.m247-yellow-line {
	display: inline-block;
	width: 26px;
	height: 3px;
	background: #ffdb00;
	vertical-align: middle;
	margin-right: 8px;
}

.m247-lead {
	color: #536575;
	font-size: 1.0625rem;
	line-height: 1.75;
	max-width: 460px;
	margin: 25px 0 0;
}

.m247-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 27px;
	padding: 15px 21px;
	font-size: 0.9rem;
	font-weight: 700;
	border: 1px solid transparent;
	min-height: 55px;
	transition: background 0.2s, transform 0.2s;
	text-decoration: none;
	color: inherit;
}

.m247-cta:hover {
	transform: translateY(-2px);
}

.m247-cta--solid {
	background: #d90f28;
	color: #fff;
}

.m247-cta--solid:hover {
	background: #b70c21;
}

.m247-cta--outline {
	border-color: #7d8c99;
	background: transparent;
	color: #102b46;
}

.m247-cta--outline:hover {
	background: #e1e9ef;
}

.m247-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 29px;
}

.m247-text-link {
	font-weight: 700;
	font-size: 0.9rem;
	display: inline-block;
	border-bottom: 1px solid #d90f28;
	padding-bottom: 6px;
	margin-top: 25px;
	text-decoration: none;
	color: #102b46;
}

.m247-text-link span {
	margin-left: 20px;
}

/* The link's own 25px top margin is the whole gap; the paragraph that wraps
   it (blocks can't emit a bare anchor) must not add a second one. */
.m247-link-row {
	margin-top: 0;
	margin-bottom: 0;
}

.m247-text-link:hover {
	text-decoration-color: #d90f28;
}

/* Dynamic contact block output. */
.m247-contact {
	text-decoration: none;
	font-weight: 700;
	color: inherit;
}

.m247-contact--whatsapp span {
	margin-left: 8px;
}

.m247-footer-links a {
	display: block;
	margin-bottom: 9px;
	font-size: 0.85rem;
	color: #d3dee6;
	text-decoration: none;
}

.m247-footer-links a:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Skip link
--------------------------------------------------------------------------- */

.m247-skip {
	position: absolute;
	left: 20px;
	top: -100px;
	background: #fff;
	z-index: 30;
	padding: 15px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	color: #102b46;
}

.m247-skip:focus {
	top: 10px;
}

/* ---------------------------------------------------------------------------
   Top utility bar
--------------------------------------------------------------------------- */

.m247-topbar {
	background: #072e59;
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.11em;
}

.m247-topbar .m247-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	min-height: 37px;
}

.m247-topbar p {
	margin: 0;
	white-space: nowrap;
}

.m247-topbar .m247-wrap > .wp-block-group,
.m247-topbar .m247-wrap > .wp-block-paragraph {
	flex: 0 0 auto;
}

.m247-topbar .m247-topbar-right {
	flex: 1;
	text-align: right;
}

.m247-topbar b {
	color: #ffdb00;
	margin: 0 15px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */

.m247-header {
	background: #fff;
	border-bottom: 1px solid #d8e0e6;
	position: sticky;
	top: 0;
	z-index: 10;
}

.m247-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	min-height: 109px;
}

.m247-brand {
	width: 102px;
	flex-shrink: 0;
}

.m247-brand .wp-block-site-logo,
.m247-brand .wp-block-site-logo a {
	display: block;
	line-height: 0;
	width: 102px;
}

.m247-brand .wp-block-site-logo img {
	display: block;
	width: 102px;
	max-width: none;
	height: 94px;
	object-fit: contain;
	object-position: left center;
}

/* Desktop navigation (core Navigation block, non-overlay mode). */
.m247-nav .wp-block-navigation {
	display: flex;
	gap: 30px;
	align-items: center;
}

.m247-nav .wp-block-navigation ul {
	display: flex;
	gap: 30px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.m247-nav .wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 14px 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	color: #102b46;
}

.m247-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.m247-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.m247-nav .wp-block-navigation .current_page_item > .wp-block-navigation-item__content,
.m247-nav .wp-block-navigation .wp-block-navigation-item__content[aria-current] {
	border-bottom-color: #d90f28;
}

.m247-header-call {
	font-size: 1.04rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	color: #102b46;
	display: inline-block;
}

.m247-header-call small {
	display: block;
	letter-spacing: 0.12em;
	font-size: 0.65rem;
	font-weight: 500;
}

.m247-header-call span {
	color: #d90f28;
	margin-left: 16px;
}

/* Core Navigation block: force inline (non-overlay) mode on desktop. */
@media (min-width: 801px) {
	.m247-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.m247-nav .wp-block-navigation__container {
		display: flex;
		gap: 30px;
		align-items: center;
	}

	.m247-nav .wp-block-navigation__container > .wp-block-navigation-item {
		margin: 0;
	}
}

/* Mobile: styled overlay menu (core Navigation block). */
@media (max-width: 800px) {
	.m247-nav .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.m247-nav .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		border: 1px solid #d8e0e6;
		background: #fff;
		padding: 8px 12px;
		min-height: 0;
		width: auto;
		cursor: pointer;
	}

	.m247-nav .wp-block-navigation__responsive-container-open svg {
		fill: #102b46;
	}

	.m247-nav .wp-block-navigation__responsive-container {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		inset: auto;
		background: #fff;
		padding: 0;
		border-bottom: 1px solid #d8e0e6;
	}

	.m247-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		padding: 15px 25px 25px;
	}

	.m247-nav .wp-block-navigation__responsive-container .wp-block-navigation-item {
		border-bottom: 1px solid #f1f5f7;
	}

	.m247-nav .wp-block-navigation__responsive-container .wp-block-navigation-item a {
		padding: 14px 0;
		font-size: 0.9rem;
		font-weight: 600;
		color: #102b46;
	}

	.m247-nav .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Hero (home)
--------------------------------------------------------------------------- */

.m247-hero {
	overflow: hidden;
	padding: 54px 0 50px;
	background: linear-gradient(90deg, #f4f7f9 0%, #f4f7f9 55%, #e9eef2 55%);
}

.m247-hero-grid {
	display: grid;
	grid-template-columns: 1.04fr 1fr;
	gap: 32px;
	align-items: center;
	flex-wrap: nowrap;
}

.m247-hero-grid > .wp-block-column {
	margin: 0;
}

.m247-hero-copy {
	padding: 13px 0 16px;
}

.m247-hero .m247-eyebrow {
	font-size: 0.75rem;
}

.m247-hero .m247-lead {
	margin-top: 25px;
}

.m247-hero .m247-actions {
	margin-top: 29px;
}

.m247-hero-note {
	display: flex;
	gap: 13px;
	align-items: center;
	color: #536575;
	font-size: 0.8rem;
	line-height: 1.5;
	margin: 29px 0 0;
}

.m247-hero-note p {
	margin: 0;
}

.m247-clock {
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	border: 1px solid #a8b7c4;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	color: #072e59;
	flex-shrink: 0;
	margin: 0;
}

body .m247-hero-grid .m247-hero-image {
	position: relative;
	margin-right: -56px;
	align-self: stretch;
	min-height: 525px;
}

.m247-hero-image figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.m247-hero-image > img,
.m247-hero-image figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 47% center;
}

.m247-hero-image::after {
	content: '';
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(transparent, rgba(0, 27, 53, 0.72));
	pointer-events: none;
}

.m247-image-caption {
	position: absolute;
	bottom: 25px;
	left: 28px;
	right: 28px;
	z-index: 1;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
}

.m247-image-caption > * {
	margin: 0;
}

.m247-image-caption > :first-child {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.m247-image-tab {
	position: absolute;
	right: 0;
	top: 0;
	padding: 13px 22px;
	background: #ffdb00;
	color: #072e59;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	z-index: 1;
	margin: 0;
}

.m247-image-tab span {
	margin: 0 10px;
}

/* ---------------------------------------------------------------------------
   Audience strip (home)
--------------------------------------------------------------------------- */

.m247-audience {
	border-bottom: 1px solid #d8e0e6;
}

.m247-audience .m247-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 27px;
	padding-bottom: 27px;
}

.m247-audience-label {
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	color: #536575;
	margin: 0;
}

.m247-audience-item {
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0;
}

.m247-audience-dot {
	width: 1px;
	height: 20px;
	background: #d8e0e6;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Sections
--------------------------------------------------------------------------- */

.m247-section {
	padding-top: 88px;
	padding-bottom: 88px;
}

.m247-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.m247-section-heading p {
	margin: 0;
}

.m247-section-heading .m247-eyebrow {
	color: #d90f28;
	margin-bottom: 14px;
}

.m247-section-heading > .wp-block-paragraph:not(.m247-eyebrow),
.m247-section-heading > .wp-block-group > .wp-block-paragraph:not(.m247-eyebrow),
.m247-section-note {
	font-size: 0.9rem;
	color: #536575;
	max-width: 380px;
}

/* Services */
.m247-services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid #d8e0e6;
	flex-wrap: nowrap;
}

.m247-services > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-service {
	padding: 32px;
	border-right: 1px solid #d8e0e6;
	display: flex;
	flex-direction: column;
}

.m247-service:last-child {
	border-right: 0;
}

.m247-service-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 31px;
}

.m247-service .m247-service-top > * {
	margin: 0;
}

.m247-service .m247-service-icon {
	line-height: 0;
}

.m247-service .m247-service-icon svg {
	display: block;
}

.m247-service-icon svg {
	width: 35px;
	height: 35px;
	stroke: #072e59;
	fill: none;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Scoped one level deeper than `.m247-service p` (theme.css:845), which
 * would otherwise win: the block markup renders the index as a <p>, where
 * the prototype used a <span>. Without the extra specificity the numbers
 * paint as body copy, which spec D3 explicitly rejected.
 */
.m247-service .m247-service-index {
	font-size: 0.75rem;
	color: #667888;
}

.m247-service h3 {
	font-size: 1.2rem;
	margin: 0;
}

.m247-service p {
	font-size: 0.94rem;
	color: #536575;
	margin: 1rem 0 26px;
}

.m247-service .m247-service-link {
	margin: auto 0 0;
	border-top: 1px solid #d8e0e6;
	padding-top: 20px;
}

.m247-service-link a {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	color: #102b46;
}

.m247-service-link span {
	color: #d90f28;
}

/* Work gallery */
.m247-work-section {
	background: #072e59;
	color: #fff;
	padding: 75px 0;
}

.m247-work-section .m247-eyebrow {
	color: #ffdb00;
}

.m247-work-section .m247-section-note {
	color: #c4d2df;
}

.m247-work-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 28px;
	flex-wrap: nowrap;
}

.m247-work-grid > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-work-grid figure {
	margin: 0;
}

.m247-work-grid figure {
	line-height: 0;
}

.m247-work-grid img {
	display: block;
	width: 100%;
	max-width: none;
	height: 325px;
	object-fit: cover;
}

.m247-work-caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
}

.m247-work-caption > * {
	margin: 0;
}

.m247-work-label {
	color: #a9bfd0;
	font-size: 0.65rem;
	line-height: 1.65rem;
	letter-spacing: 0.14em;
}

.m247-work-caption h3,
.m247-work-title {
	font-size: 1.08rem;
	margin: 8px 0 0;
	font-weight: 500;
	font-family: 'DM Sans', Arial, sans-serif;
	color: #fff;
	line-height: 1.3;
	letter-spacing: normal;
}

.m247-work-index {
	font-size: 0.85rem;
	color: #a9bfd0;
}

/* About teaser (home) */
.m247-about-teaser > .wp-block-columns {
	grid-template-columns: 0.75fr 1fr;
	gap: 100px;
	flex-wrap: nowrap;
}

.m247-about-teaser > .wp-block-columns > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-about-teaser .m247-teaser-copy p:not(.m247-eyebrow) {
	max-width: 550px;
	color: #536575;
}

.m247-about-number {
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-size: 9rem;
	text-align: center;
	line-height: 1;
	font-weight: 700;
	border-right: 1px solid #d8e0e6;
	padding: 35px 30px 35px 0;
	margin: 0;
}

.m247-about-teaser p.m247-about-number {
	color: #102b46;
}

.m247-about-number span {
	color: #d90f28;
}

.m247-about-number small {
	display: block;
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0.45em;
	margin-top: 13px;
}

/* ---------------------------------------------------------------------------
   Contact band (shared, yellow)
--------------------------------------------------------------------------- */

.m247-contact-band {
	padding: 53px 0;
	background: #ffdb00;
}

.m247-contact-band .m247-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
	flex-wrap: wrap;
}

.m247-contact-band .m247-band-copy p {
	margin: 0;
}

.m247-contact-band .m247-band-copy p.m247-eyebrow {
	margin: 0 0 12px;
	color: #102b46;
}

.m247-contact-band h2 {
	font-size: 2.8rem;
	margin: 0;
}

.m247-contact-band .m247-band-copy > p:last-child {
	font-size: 0.9rem;
	margin-top: 1rem;
}

.m247-contact-band .m247-actions {
	flex-shrink: 0;
	margin: 0;
}

.m247-contact-band .m247-cta--outline {
	border-color: #072e59;
}

.m247-contact-band .m247-cta--outline:hover {
	background: #f0ce00;
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.m247-footer {
	background: #052441;
	color: #fff;
	padding: 57px 0 20px;
}

.m247-footgrid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 45px;
	flex-wrap: nowrap;
}

.m247-footgrid > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-footgrid .m247-footer-brand,
.m247-footgrid a.m247-footer-brand {
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-size: 2rem;
	line-height: 1.65;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	display: inline;
	margin: 0;
}

.m247-footgrid .m247-footer-brand:hover {
	color: #fff;
	text-decoration: none;
}

.m247-footer-brand span {
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	margin-left: 8px;
}

.m247-footgrid h3 {
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 0.85rem;
	margin: 0 0 20px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: #fff;
}

.m247-footgrid p,
.m247-footgrid > .wp-block-column > p:last-child {
	font-size: 0.85rem;
	color: #d3dee6;
	margin: 0 0 9px;
}

.m247-footgrid .m247-footer-brand + p {
	margin-top: 8px;
}

/* Brand column: the wordmark sits flush and the two strap lines follow it on
   an 8px rhythm (the prototype's `.footgrid p { margin-top: 8px }`). */
.m247-footgrid > .wp-block-column:first-child > p {
	margin: 8px 0 0;
}

.m247-footgrid > .wp-block-column:first-child > p:first-child {
	margin: 0;
}

/* Footer links: block-level, muted, no underline (prototype). */
.m247-footgrid a,
.m247-footer-links a {
	color: #d3dee6;
	text-decoration: none;
}

.m247-footer-links a {
	display: block;
	margin-bottom: 9px;
	font-size: 0.85rem;
}

.m247-footgrid a:hover,
.m247-footer-links a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m247-footgrid p.m247-muted {
	color: #9fb3c4;
}

.m247-footer .m247-copyright,
.m247-copyright {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid #29465f;
	padding-top: 22px;
	margin-top: 44px;
	color: #a9becf;
	font-size: 0.75rem;
}

.m247-copyright span {
	margin: 0;
}

.m247-copyright a {
	color: #a9becf;
	text-decoration: none;
	margin: 0;
}

.m247-copyright a:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Inner pages
--------------------------------------------------------------------------- */

.m247-inner-intro {
	padding-top: 35px;
	padding-bottom: 50px;
}

.m247-breadcrumbs {
	font-size: 0.8rem;
	color: #536575;
	margin: 0 0 45px;
}

.m247-breadcrumbs a {
	margin-right: 12px;
	text-decoration: none;
	color: #536575;
}

.m247-breadcrumbs a:hover {
	color: #d90f28;
}

.m247-inner-intro .m247-eyebrow {
	color: #d90f28;
	margin-bottom: 17px;
}

.m247-inner-intro h1 {
	margin: 0;
}

/* Generic pages (privacy policy, etc.) put the title directly above the prose
   block, so the two vertical paddings must not stack into a 110px gap. */
.m247-intro--tight {
	padding-bottom: 40px;
}

.m247-intro--tight + .m247-prose {
	padding-top: 0;
}

.m247-inner-intro .m247-lead {
	max-width: 580px;
}

/* About page */
.m247-about-story-cols {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 60px;
	align-items: center;
	flex-wrap: nowrap;
}

.m247-about-story-cols > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-story-image {
	min-height: 430px;
	position: relative;
}

.m247-story-image figure {
	position: absolute;
	inset: 0;
	margin: 0;
}

.m247-story-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m247-story-copy h2 {
	font-size: 2.7rem;
	margin: 0;
}

.m247-story-copy p:not(.m247-eyebrow) {
	color: #536575;
}

/* Values (about page) */
.m247-values-cols {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 90px;
	flex-wrap: nowrap;
}

.m247-values-cols > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-values .m247-eyebrow {
	margin-bottom: 14px;
}

.m247-values h2 {
	margin: 0;
}

body .m247-value-item {
	display: flex;
	align-items: flex-start;
	gap: 27px;
	border-top: 1px solid #d8e0e6;
	padding: 27px 0;
	margin: 0;
}

.m247-value-index {
	color: #d90f28;
	font-size: 0.8rem;
	flex-shrink: 0;
	padding-top: 4px;
	margin: 0;
}

.m247-value-item h3 {
	font-size: 1.15rem;
	margin: 0;
}

.m247-value-item p:not(.m247-value-index) {
	color: #536575;
	font-size: 0.94rem;
	margin: 1rem 0 0;
}

.m247-value-item p + p,
.m247-value-item .m247-text-link {
	margin-top: 15px;
}

.m247-value-item .m247-text-link {
	margin-top: 15px;
}

/* Contact page */
.m247-contact-cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 60px;
	flex-wrap: nowrap;
	padding-bottom: 85px;
}

.m247-contact-cols > .wp-block-column {
	margin: 0;
	flex-basis: auto !important;
	max-width: none;
}

.m247-contact-options {
	display: grid;
	gap: 18px;
}

.m247-contact-card {
	display: block;
	padding: 32px 38px;
	position: relative;
	transition: transform 0.2s;
	margin: 0;
}

.m247-contact-card:hover {
	transform: translateY(-2px);
}

.m247-contact-card .m247-eyebrow {
	margin-bottom: 17px;
}

.m247-contact-card--navy {
	background: #072e59;
	color: #fff;
}

.m247-contact-card--navy .m247-eyebrow {
	color: #ffdb00;
}

.m247-contact-card--pale {
	background: #f1f5f7;
	color: #102b46;
}

.m247-contact-card h2 {
	font-size: 2.5rem;
	margin: 0;
}

.m247-contact-card--navy .m247-contact {
	font-size: 1.8rem;
	letter-spacing: 0.02em;
	display: block;
	margin-top: 12px;
	color: #fff;
}

.m247-contact-card--pale p {
	color: #536575;
}

.m247-card-stretch {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.m247-contact-card > * {
	position: relative;
	z-index: 1;
}

.m247-contact-card > .m247-card-stretch {
	position: absolute;
	z-index: 0;
}

.m247-card-link {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #8b9aa7;
	margin-top: 25px;
	padding-top: 15px;
	font-size: 0.85rem;
	margin-bottom: 0;
}

.m247-contact-guide {
	padding: 35px 0;
}

.m247-contact-guide h3 {
	font-size: 1.5rem;
	margin: 0;
}

.m247-contact-guide p,
.m247-contact-guide li {
	color: #536575;
	font-size: 0.95rem;
}

.m247-contact-guide ol {
	padding-left: 22px;
	margin: 1rem 0 0;
}

.m247-contact-guide li {
	padding: 7px 0;
	margin: 0;
}

.m247-availability {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid #d8e0e6;
}

.m247-availability p {
	margin: 0;
}

.m247-availability strong {
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   General page content (privacy policy, archive, single)
--------------------------------------------------------------------------- */

.m247-prose {
	max-width: 800px;
	width: calc(100% - 112px);
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 80px;
}

.m247-prose h1 {
	margin: 0 0 40px;
}

.m247-prose h2 {
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 1.5rem;
	margin-top: 35px;
	letter-spacing: 0;
	font-weight: 600;
	line-height: 1.3;
}

.m247-prose h3 {
	margin-top: 28px;
	font-size: 1.15rem;
}

.m247-prose p {
	margin-top: 1.1rem;
	margin-bottom: 0;
}

.m247-prose a {
	color: #d90f28;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.m247-prose ul,
.m247-prose ol {
	margin-top: 1.1rem;
	margin-bottom: 0;
	padding-left: 22px;
}

.m247-prose li {
	margin-top: 0.4rem;
}

.m247-prose figure {
	margin: 28px 0 0;
}

/* Blog / archive / single post */
.m247-entry-meta {
	font-size: 0.8rem;
	color: #536575;
	letter-spacing: 0.08em;
	margin: 0;
}

.m247-entry .entry-title,
.m247-inner-intro h1.has-text-align-left {
	/* headings already sized by global template styles */
}

.m247-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.m247-card {
	border: 1px solid #d8e0e6;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.m247-card > a {
	display: block;
	text-decoration: none;
}

.m247-card figure {
	margin: 0;
}

.m247-card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.m247-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.m247-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 8px 0 0;
}

.m247-card h3 a {
	color: #102b46;
	text-decoration: none;
}

.m247-card h3 a:hover {
	color: #d90f28;
}

.m247-excerpt {
	color: #536575;
	font-size: 0.94rem;
	margin-top: 10px;
}

.m247-pagination-wrap {
	margin-top: 52px;
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
}

.m247-pagination-wrap a,
.m247-pagination-wrap span {
	font-weight: 700;
}

.m247-pagination-wrap a {
	border-bottom: 1px solid #d90f28;
	padding-bottom: 4px;
	color: #102b46;
	text-decoration: none;
}

.m247-empty {
	text-align: center;
	padding: 80px 0;
	margin: 0;
}

.m247-empty h2 {
	margin-bottom: 14px;
}

.m247-empty p {
	color: #536575;
}

.m247-empty .m247-actions {
	justify-content: center;
}

/* WooCommerce: light, on-brand treatment for store pages. */
.m247-shop .woocommerce ul.products,
.m247-shop .products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.m247-shop .woocommerce ul.products li.product,
.m247-shop .products li.product {
	border: 1px solid #d8e0e6;
	padding: 24px;
	background: #fff;
	margin: 0;
}

.m247-shop .woocommerce a {
	color: #102b46;
}

.m247-shop .woocommerce .button,
.m247-shop .wc-block-components-button {
	background: #d90f28;
	color: #fff;
	border: none;
	padding: 14px 22px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.m247-shop .woocommerce .button:hover,
.m247-shop .wc-block-components-button:hover {
	background: #b70c21;
}

.m247-shop .woocommerce .price {
	color: #072e59;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Mobile contact bar
--------------------------------------------------------------------------- */

body .m247-mobile-contact {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	background: #d90f28;
	box-shadow: 0 -3px 18px rgba(0, 22, 43, 0.14);
	gap: 0;
}

.m247-mobile-contact a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px;
	padding-bottom: calc(15px + env(safe-area-inset-bottom));
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	margin: 0;
}

.m247-mobile-contact a + a {
	background: #072e59;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media (min-width: 1450px) {
	body .m247-hero-grid .m247-hero-image {
		margin-right: 0;
	}
}

@media (max-width: 1100px) {
	.m247-wrap,
	.m247-prose {
		width: calc(100% - 64px);
	}

	.m247-nav .wp-block-navigation,
	.m247-nav .wp-block-navigation ul {
		gap: 18px;
	}

	.m247-header-call {
		font-size: 0.85rem;
	}

	body .m247-hero-grid .m247-hero-image {
		margin-right: -32px;
		min-height: 505px;
	}

	.m247-hero h1 {
		font-size: 4rem;
	}

	.m247-hero .m247-cta {
		gap: 12px;
		padding: 13px;
	}

	.m247-service {
		padding: 25px;
	}

	.m247-contact-band .m247-wrap {
		align-items: flex-start !important;
		flex-direction: column;
	}

	.m247-about-teaser > .wp-block-columns {
		gap: 45px;
	}

	.m247-contact-layout {
		gap: 35px;
	}
}

@media (max-width: 800px) {
	/* Smaller sticky header on mobile: reduce the anchor scroll offset. */
	html {
		scroll-padding-top: 100px;
	}

	.m247-wrap,
	.m247-prose {
		width: calc(100% - 40px);
	}

	/* Top bar: single centered message. */
	.m247-topbar .m247-wrap {
		min-height: 32px;
	}

	.m247-topbar .m247-topbar-left {
		display: none;
	}

	.m247-topbar .m247-topbar-right {
		width: 100%;
		text-align: center;
		font-size: 0.65rem;
		white-space: normal;
	}

	/* Header. */
	.m247-nav {
		min-height: 83px;
		gap: 12px;
		position: relative;
	}

	.m247-brand,
	.m247-brand .wp-block-site-logo,
	.m247-brand .wp-block-site-logo a {
		width: 79px;
	}

	.m247-brand .wp-block-site-logo img {
		width: 79px;
		height: 77px;
	}

	.m247-header-call {
		display: none;
	}

	/* Hero: stacked. */
	.m247-hero {
		padding: 32px 0 0;
		background: #f1f5f7;
	}

	body .m247-hero-grid {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 32px;
		align-items: stretch;
	}

	.m247-hero h1 {
		font-size: clamp(3.3rem, 9.4vw, 4.8rem);
	}

	.m247-hero-copy {
		padding: 0;
	}

	.m247-hero .m247-eyebrow {
		font-size: 0.65rem;
		margin-bottom: 18px;
	}

	.m247-hero .m247-lead {
		font-size: 1rem;
	}

	.m247-hero-note {
		margin-top: 23px;
	}

	body .m247-hero-grid .m247-hero-image {
		margin: 0 -20px;
		min-height: 340px;
	}

	.m247-hero-image > img,
	.m247-hero-image figure img {
		object-position: center;
	}

	.m247-image-caption {
		left: 20px;
		bottom: 20px;
	}

	/* Audience strip. */
	.m247-audience .m247-wrap {
		justify-content: flex-start;
		gap: 10px 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.m247-audience-label {
		width: 100%;
	}

	.m247-audience-item {
		font-size: 0.8rem;
	}

	.m247-audience-dot {
		display: none;
	}

	/* Sections: 57px vertical. */
	.m247-section {
		padding-top: 57px;
		padding-bottom: 57px;
	}

	body .m247-section-heading {
		display: block;
		margin-bottom: 27px;
	}

	.m247-section-heading > .wp-block-paragraph:not(.m247-eyebrow),
	.m247-section-note {
		margin-top: 20px;
		display: block;
	}

	.m247-services {
		grid-template-columns: 1fr;
	}

	.m247-service {
		border-right: 0;
		border-bottom: 1px solid #d8e0e6;
		padding: 27px;
	}

	.m247-service:last-child {
		border-bottom: 0;
	}

	.m247-service-top {
		margin-bottom: 21px;
	}

	.m247-service p {
		max-width: 500px;
	}

	/* Work gallery. */
	.m247-work-section {
		padding: 50px 0;
	}

	.m247-work-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.m247-work-grid img {
		height: 270px;
	}

	/* About teaser. */
	body .m247-about-teaser > .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.m247-about-number {
		font-size: 6rem;
		border-right: 0;
		border-bottom: 1px solid #d8e0e6;
		padding: 0 0 30px;
		text-align: left;
	}

	.m247-about-number small {
		display: inline-block;
		margin-left: 23px;
		font-size: 0.9rem;
		letter-spacing: 0.2em;
	}

	/* About page. */
	.m247-about-story-cols {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.m247-story-image {
		min-height: 300px;
	}

	.m247-story-copy h2 {
		font-size: 2.1rem;
	}

	.m247-values-cols {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	/* Contact band stacks, buttons full width. */
	.m247-cta {
		padding: 14px 17px;
		gap: 18px;
	}

	.m247-contact-band {
		padding: 37px 0;
	}

	.m247-contact-band h2 {
		font-size: 2.5rem;
	}

	.m247-contact-band .m247-actions {
		gap: 10px;
	}

	/* Contact page. */
	.m247-contact-cols {
		grid-template-columns: 1fr;
		gap: 35px;
		padding-bottom: 60px;
	}

	.m247-contact-card h2 {
		font-size: 1.9rem;
	}

	.m247-contact-card--navy .m247-contact {
		font-size: 1.4rem;
	}

	/* Footer: compact. */
	.m247-footer {
		padding-top: 57px;
	}

	.m247-copyright {
		flex-direction: column;
		gap: 10px;
	}

	.m247-footgrid {
		grid-template-columns: 1fr 1fr;
		gap: 35px;
	}

	.m247-footgrid > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}

	/* Blog cards. */
	.m247-cards {
		grid-template-columns: 1fr;
	}

	/* Mobile contact bar appears. */
	body .m247-mobile-contact {
		display: flex;
	}

	/* Keep the fixed bar from covering content. */
	.m247-footer {
		padding-bottom: calc(90px + env(safe-area-inset-bottom));
	}

	.m247-shop .woocommerce ul.products,
	.m247-shop .products {
		grid-template-columns: 1fr 1fr;
	}
}

/* The prototype has no 480px breakpoint: gutters and the hero clamp hold all
   the way down. Only the shop grid, which the prototype never had, narrows. */
@media (max-width: 480px) {
	.m247-shop .woocommerce ul.products,
	.m247-shop .products {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation-duration: 0.001ms !important;
	}

	.m247-cta,
	.m247-contact-card {
		transition: none;
	}

	.m247-cta:hover,
	.m247-contact-card:hover {
		transform: none;
	}
}