/*
 * Emlura Readiness — WordPress bridge layer.
 *
 * approved.css is shipped byte-identical to the approved design build. This file
 * does two things and nothing else:
 *
 *   1. Neutralises the block-editor defaults that would otherwise override the
 *      approved design (layout margins, block gap, figure/button chrome).
 *   2. Aliases the approved design's bare-tag selectors onto the class names that
 *      core blocks can actually emit, so every section stays editable in Gutenberg
 *      while rendering the approved DOM geometry.
 *
 * Nothing here introduces new design decisions. Every declaration mirrors a rule
 * that already exists in approved.css.
 */

/* ---------------------------------------------------------------------------
 * 1. Neutralise WordPress block defaults
 * ------------------------------------------------------------------------- */

/*
 * `disable-layout-styles` theme support stops WordPress generating its
 * `.is-layout-*` spacing rules, so the design's own margins are never competing
 * with a same-specificity ruleset. What remains to neutralise is the block
 * library's per-block chrome.
 *
 * Every rule below is written to match the specificity of the core rule it
 * replaces — no higher — so approved.css keeps the last word on anything it
 * actually declares.
 */

.wp-block-image {
	margin: 0;
}

.wp-block-image img {
	max-width: 100%;
	vertical-align: middle;
}

.wp-block-image figcaption {
	margin: 0;
	font-size: inherit;
	text-align: inherit;
}

.wp-block-navigation ul,
.wp-block-navigation ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The layout classes remain on the markup with the generator off, but nothing
 * styles them — so they are deliberately left alone here. A blanket
 * `.is-layout-flow > * { max-width: none }` guard would outrank the design's own
 * max-widths (it cost .hero-copy its 610px measure) for no benefit. */

/* ---------------------------------------------------------------------------
 * 2. Sticky header
 *
 * approved.css makes .site-header sticky. In a block theme the header lives
 * inside an 86px-tall template-part wrapper, and a sticky child cannot escape
 * its parent's box — so the sticky context has to move up to the wrapper.
 * ------------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

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

@media (width<=782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

@media (width<=800px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: relative;
		top: 0;
	}
}

/* The homepage links straight to /services/#enterprise-ai and its siblings.
 * Without a scroll margin the sticky header lands on top of the heading the
 * visitor just asked for. */
.wp-site-blocks [id] {
	scroll-margin-top: 106px;
}

@media (width<=800px) {
	.wp-site-blocks [id] {
		scroll-margin-top: 20px;
	}
}

/* Brand mark — mirrors .brand img. */
.site-header .brand,
.site-header .brand .wp-block-image {
	margin: 0;
	line-height: 0;
}

/* Navigation — mirrors .desktop-nav. Core Navigation renders a <ul>, so the
 * flex row and hover colour move onto that list. */
.site-header .desktop-nav ul {
	gap: 34px;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.site-header .desktop-nav li,
.site-header .desktop-nav .wp-block-navigation-item {
	margin: 0;
}

.site-header .desktop-nav a:hover {
	color: var(--blue);
}

.site-header .desktop-nav .wp-block-navigation-item__content {
	text-decoration: none;
}

/*
 * Mobile navigation.
 *
 * approved.css hides `.desktop-nav` outright below 800px. The overlay toggle
 * WordPress renders lives *inside* that element, so hiding the nav hid the
 * hamburger too and left phones with no way to reach any page but the CTA.
 * The nav stays displayed below 800px; only its inline list is suppressed,
 * and the overlay carries the links.
 */
.site-header .desktop-nav .wp-block-navigation__responsive-container-open,
.site-header .desktop-nav .wp-block-navigation__responsive-container-close {
	color: var(--navy);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

@media (width>800px) {
	.site-header .desktop-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

@media (width<=800px) {
	.site-header .desktop-nav {
		display: flex;
		align-items: center;
		gap: 0;
	}

	.site-header .desktop-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		width: 30px;
		height: 30px;
		align-items: center;
		justify-content: center;
	}

	/*
	 * State the overlay's own breakpoint rather than inheriting WordPress's.
	 * Core switches to the overlay at 600px, but the inline menu needs about
	 * 670px of header to fit, so between 600 and 800 it would have spilled. The
	 * container is hidden here explicitly instead of relying on core's rule.
	 */
	.site-header .desktop-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100;
	}

	/*
	 * approved.css gives the header a backdrop-filter, which makes it the
	 * containing block for any fixed-position descendant. The overlay lives
	 * inside the header, so `inset: 0` was resolving to the 76px header box and
	 * the menu opened as a sliver. WordPress marks the document while the menu
	 * is open; drop the filter for that moment so the overlay reaches the
	 * viewport.
	 */
	html.has-modal-open .site-header,
	.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/*
	 * The open overlay: a white sheet with navy links.
	 *
	 * Every level between the container and the list has to be told to fill the
	 * sheet. Core sizes them for its own compact overlay, which is what made the
	 * menu a narrow scrolling column showing one link at a time.
	 */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: #fff;
		color: var(--navy);
		padding: 0;
		overflow: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		max-width: none;
		height: auto;
		padding: 0;
		margin: 0;
		display: block;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 92px 6vw 40px;
	}

	/* One link per row, all of them visible at once. */
	.wp-block-navigation__responsive-container.is-menu-open ul {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: -.02em;
	}

	.wp-block-navigation__responsive-container.is-menu-open li {
		border-bottom: 1px solid #dbe6f5;
		width: 100%;
		display: block;
	}

	.wp-block-navigation__responsive-container.is-menu-open li:first-child {
		border-top: 1px solid #dbe6f5;
	}

	.wp-block-navigation__responsive-container.is-menu-open a {
		display: block;
		width: 100%;
		padding: 18px 2px;
	}

	/* Belt and braces behind the block attributes: enough classes to clear
	 * core's five-class default, in case the overlay colours are ever cleared
	 * in the editor. */
	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open,
	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open a,
	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
		color: var(--navy);
	}

	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open a:hover,
	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
	.site-header .desktop-nav .wp-block-navigation__responsive-container.is-menu-open a:hover .wp-block-navigation-item__label {
		color: var(--blue);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: var(--navy);
		position: absolute;
		top: 24px;
		right: 6vw;
		z-index: 2;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Tag-selector aliases
 *
 * Each rule below duplicates an approved.css rule that targets a bare tag core
 * blocks cannot emit, remapping it onto an explicit class.
 * ------------------------------------------------------------------------- */

/* .eyebrow span — the orange rule before the eyebrow label. */
.eyebrow.has-rule::before {
	content: "";
	background: var(--orange);
	vertical-align: middle;
	width: 28px;
	height: 2px;
	margin-right: 10px;
	display: inline-block;
}

/* .problem h2 span — the blue second line. Written as <em> in the patterns
 * because Gutenberg's rich text preserves <em> but drops bare <span> classes. */
.problem h2 em,
.problem h2 .accent,
.problem-title h2 .accent {
	color: var(--blue);
	font-style: normal;
}

/* The approved card pairs "Readiness" with a 30px numeric score. The score is
 * intentionally not shown, so the paired value returns to label scale. */
.readiness-card .score strong {
	color: var(--navy);
	font-size: 15px;
}

/* .hero h1 em / .cta h2 em — the blue emphasis line. */
.hero h1 .accent,
.cta h2 .accent,
.inner-cta h2 .accent {
	color: var(--blue);
	font-style: normal;
}

/* .problem-image > span, .services-visual, .framework-image figcaption —
 * overlay captions rebuilt as editable groups. */
.problem-image .image-caption {
	z-index: 2;
	color: #fff;
	max-width: 220px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	position: absolute;
	bottom: 22px;
	left: 24px;
}

.problem-image .wp-block-image,
.services-visual .wp-block-image,
.framework-image .wp-block-image {
	height: 100%;
}

.services-visual .visual-caption {
	z-index: 2;
	color: #fff;
	max-width: 620px;
	position: absolute;
	bottom: 32px;
	left: 36px;
}

.services-visual .caption-kicker {
	color: #72bcff;
	letter-spacing: .2em;
	margin-bottom: 13px;
	font-size: 9px;
	font-weight: 800;
	display: block;
}

.services-visual .caption-title {
	font-size: clamp(20px, 2.5vw, 34px);
	line-height: 1.25;
	display: block;
}

.framework-image .visual-caption {
	z-index: 2;
	color: #fff;
	max-width: 470px;
	position: absolute;
	bottom: 28px;
	left: 32px;
}

.framework-image .caption-kicker {
	color: #75c0ff;
	text-transform: uppercase;
	letter-spacing: .2em;
	margin-bottom: 10px;
	font-size: 9px;
	font-weight: 800;
	display: block;
}

.framework-image .caption-title {
	font-size: 23px;
	line-height: 1.35;
	font-weight: 700;
}

@media (width<=800px) {
	.services-visual .visual-caption {
		bottom: 24px;
		left: 22px;
		right: 22px;
	}

	.framework-image .visual-caption {
		bottom: 22px;
		left: 22px;
		right: 22px;
	}
}

/* .readiness-lens > span / strong.
 *
 * approved.css sends every <p> in the lens to grid column 2, so the two label
 * rows need their track stated explicitly rather than left to auto-placement. */
.readiness-lens > .lens-no {
	color: var(--blue);
	letter-spacing: .15em;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.85;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.readiness-lens > .lens-title {
	color: var(--navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.85;
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

/* .contrast span / strong */
.contrast .contrast-label {
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0 0 15px;
	font-size: 10px;
	font-weight: 800;
	display: block;
}

.contrast .contrast-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	display: block;
}

/* .service-list article > span, .service-list b.
 *
 * approved.css sends every <p> in a row to `grid-column: 2/4` below 800px, which
 * would drag the number and the arrow onto the description's row. Both state
 * their own cell instead of relying on auto-placement. */
.service-list article > .service-no {
	color: #6cb7ff;
	font-size: 12px;
	grid-column: 1;
}

.service-list .service-arrow {
	color: #6cb7ff;
	border: 1px solid #49648e;
	border-radius: 50%;
	place-items: center;
	width: 32px;
	height: 32px;
	display: grid;
	grid-column: auto;
}

/* The approved markup wraps each row in a link. Core blocks cannot nest a group
 * inside an anchor, so the row keeps a stretched link instead. */
.service-list article {
	position: relative;
}

/* The row's label is for assistive technology; a 0px font hides it from sight
 * but leaves it in the accessibility tree in a way some readers skip. */
.service-list .service-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

/* .step > span, .step strong (+ its hover arrow).
 * approved.css styles every <p> inside a step, so both label rows restate their
 * own margins. */
.step > .step-no {
	color: var(--blue);
	padding-top: 4px;
	font-size: 11px;
	margin: 0;
}

.step .step-title {
	color: var(--navy);
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

.step .step-title::after {
	content: "  →";
	color: var(--orange);
	opacity: 0;
	transition: opacity .2s;
}

.step:hover .step-title::after {
	opacity: 1;
}

/* .local-visual span / strong */
.local-visual .local-label {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 11px;
}

.local-visual .local-title {
	margin-top: 170px;
	font-size: 38px;
	line-height: 1.2;
	font-weight: 700;
	display: block;
	z-index: 2;
	position: relative;
}

@media (width<=800px) {
	.local-visual .local-title {
		margin-top: 150px;
		font-size: 31px;
	}
}

/* .sector-tags span */
.sector-tags .tag {
	color: #c8d6ea;
	border: 1px solid #47618c;
	border-radius: 20px;
	padding: 8px 13px;
	font-size: 10px;
}

/* .readiness-card small — kept, but the approved numeric score bars are
 * deliberately omitted; the card shows named lenses instead. */
.readiness-card .card-note {
	color: #8b95a5;
	border-top: 1px solid #edf0f5;
	margin-top: 14px;
	padding-top: 10px;
	font-size: 9px;
	display: block;
}

/* The lens grid stands in for the approved score bars, and holds the same
 * vertical rhythm so the hero keeps the approved height. */
.readiness-card .score {
	min-height: 45px;
}

.readiness-card .lens-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	height: 74px;
	margin-top: 10px;
	display: grid;
}

/*
 * Each tile names a lens and what readiness means for it. The approved card put
 * a number here; with the number gone the tiles were four empty boxes, which
 * read as unfinished. These are descriptions, not measurements.
 */
.readiness-card .lens-grid span {
	background: linear-gradient(180deg, #f4f8ff, #e8f1fd);
	border: 1px solid #e2ebf7;
	border-radius: 6px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 2px;
	line-height: 1.2;
}

.readiness-card .lens-grid em {
	color: var(--blue-ink, #0857ad);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 8px;
	font-style: normal;
	font-weight: 800;
}

.readiness-card .lens-grid b {
	color: var(--navy);
	font-size: 11px;
	font-weight: 700;
}

/* Footer.
 *
 * approved.css styles the bare `footer` element, which the footer template part
 * already renders, so the grid itself needs no alias. Only the children that
 * core blocks emit as different tags do: the link row is a <nav>, not a <div>,
 * and the legal line is a <p>, not a <small>. */
.footer-brand {
	margin: 0;
	line-height: 0;
}

/* Core's `.wp-block-image img { height: auto }` outranks the design's bare
 * `footer img` / `.brand img` rules, so both marks restate their own box. */
.site-header .brand img {
	object-fit: cover;
	width: 142px;
	height: 62px;
	display: block;
}

.footer-brand img {
	object-fit: cover;
	width: 150px;
	height: 76px;
	display: block;
}

@media (width<=800px) {
	.site-header .brand img {
		width: 120px;
	}
}

.footer-tagline {
	text-align: right;
	font-size: 13px;
}

.footer-nav ul {
	gap: 28px;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
}

.footer-nav li {
	margin: 0;
}

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

.footer-legal {
	text-align: right;
	color: #7285a5;
	font-size: 10px;
}

@media (width<=800px) {
	.footer-tagline,
	.footer-legal {
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Inner-page aliases
 * ------------------------------------------------------------------------- */

/* approved.css sends every direct <p> of .inner-heading to grid column 2, so the
 * index label — a <span> in the approved markup — restates column 1. */
.inner-heading > .heading-index {
	color: var(--blue);
	letter-spacing: .2em;
	padding-top: 12px;
	font-size: 9px;
	font-weight: 800;
	grid-column: 1;
	max-width: none;
	line-height: 1.5;
}

.inner-hero .inner-figure {
	height: 390px;
	margin: 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
	box-shadow: 0 32px 80px #06245c2e;
}

.inner-hero .inner-figure::after {
	content: "";
	background: linear-gradient(140deg, #06245c1f, #06245c94);
	position: absolute;
	inset: 0;
}

.inner-hero .inner-figure .wp-block-image,
.inner-hero .inner-figure img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: saturate(.75) contrast(1.05);
	display: block;
}

.inner-hero .inner-figure .figure-label {
	z-index: 2;
	color: #fff;
	letter-spacing: .2em;
	font-size: 9px;
	font-weight: 800;
	position: absolute;
	bottom: 20px;
	right: 24px;
}

@media (width<=900px) {
	.inner-hero .inner-figure {
		height: 300px;
	}
}

@media (width<=560px) {
	.inner-hero .inner-figure {
		height: 235px;
	}
}

/*
 * The approved markup writes these labels as inline <span>s sitting in normal
 * flow, so each one occupies a full 24px line box struck by its 16px parent.
 * Replacing them with a <p> shrinks the line box to the label's own font size
 * and pulls everything below it up, so the struck height is restated.
 */
.principle-grid article > .card-index,
.sector-cards article > .card-index,
.belief-row .belief-label,
.dark-band .band-label,
.image-break .break-label,
.stage-track article > .stage-no {
	line-height: 24px;
}

.principle-grid article > .card-index,
.sector-cards article > .card-index {
	color: var(--blue);
	letter-spacing: .14em;
	font-size: 10px;
	font-weight: 800;
	display: block;
}

.sector-cards .card-link {
	color: var(--blue);
	margin-top: 28px;
	font-size: 11px;
	font-weight: 800;
	display: inline-block;
}

.dark-band .band-label {
	color: #70bbff;
	letter-spacing: .2em;
	font-size: 9px;
	font-weight: 800;
	display: block;
}

.dark-band .band-mark {
	color: var(--orange);
	text-align: center;
	font-size: 32px;
}

@media (width<=900px) {
	.dark-band .band-mark {
		transform: rotate(90deg);
	}
}

.service-pages .service-links {
	color: #c6d5ea;
	margin: 0;
	padding: 0;
	font-size: 11px;
	line-height: 2;
	list-style: none;
}

.service-pages .service-links li::before {
	content: "+";
	color: var(--orange);
	margin-right: 10px;
}

.image-break .break-label {
	color: #6fbdff;
	letter-spacing: .2em;
	font-size: 9px;
	font-weight: 800;
	display: block;
}

.image-break .wp-block-image,
.image-break img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

.stage-track article > .stage-no {
	color: var(--blue);
	font-size: 10px;
	font-weight: 800;
	display: block;
}

.dimension-grid .dimension {
	border-bottom: 1px solid #365485;
	padding: 26px 8px;
	font-size: 13px;
}

.dimension-grid .dimension b {
	color: #6abbff;
	margin-right: 16px;
	font-size: 9px;
}

.belief-row .belief-label {
	color: var(--blue);
	letter-spacing: .2em;
	font-size: 9px;
	font-weight: 800;
	display: block;
}

.contact-details .detail-label {
	color: #6abbff;
	letter-spacing: .18em;
	font-size: 9px;
	font-weight: 800;
}

.contact-details .detail-value,
.contact-details .detail-value a {
	font-size: 13px;
}

/* The contact card holds whatever the form plugin renders. The card owns the
 * approved chrome; the form inside owns only its own rhythm. */
.contact-page .contact-form-card {
	color: var(--navy);
	background: #fff;
	padding: 38px;
	align-self: start;
	box-shadow: 0 30px 80px #00000040;
}

.contact-page .contact-form-card input,
.contact-page .contact-form-card select,
.contact-page .contact-form-card textarea {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: #f8fbff;
	border: 1px solid #cbd7e6;
	border-radius: 0;
	margin-top: 8px;
	padding: 13px;
	display: block;
}

@media (width<=560px) {
	.contact-page .contact-form-card {
		padding: 25px;
	}
}

/* --- FormLayer skin -------------------------------------------------------
 *
 * FormLayer (Softaculous, 1.0.8) renders its own markup, enqueues its CSS after
 * the theme's, and styles fields through selectors like
 * `.formlayer-form input[type="text"]` — class + attribute + element, which
 * outranks a plain class pair. Every rule below therefore carries the card class
 * as well, putting it a class ahead of anything the plugin ships.
 *
 * The values are the approved form's, not new ones: a FormLayer form should be
 * indistinguishable from the form in the design.
 */

.contact-page .contact-form-card .formlayer-container {
	margin: 0;
	padding: 0;
	background: none;
	max-width: none;
}

/* The card already draws the panel; the form contributes only the field rhythm. */
.contact-page .contact-form-card .formlayer-form {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	gap: 18px;
	display: grid;
}

.contact-page .contact-form-card .formlayer-field-wrap,
.contact-page .contact-form-card .formlayer-submit-wrap,
.contact-page .contact-form-card .formlayer-select-wrap,
.contact-page .contact-form-card .formlayer-date-wrap,
.contact-page .contact-form-card .formlayer-check-wrap {
	margin: 0;
	padding: 0;
}

.contact-page .contact-form-card .formlayer-label,
.contact-page .contact-form-card .formlayer-sub-label,
.contact-page .contact-form-card .formlayer-option-label,
.contact-page .contact-form-card .formlayer-terms-label,
.contact-page .contact-form-card .formlayer-gdpr-label {
	color: var(--navy);
	letter-spacing: .08em;
	font-size: 10px;
	font-weight: 800;
	text-transform: none;
}

.contact-page .contact-form-card .formlayer-input,
.contact-page .contact-form-card .formlayer-select-wrap select,
.contact-page .contact-form-card .formlayer-form textarea {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: #f8fbff;
	border: 1px solid #cbd7e6;
	border-radius: 0;
	margin-top: 8px;
	padding: 13px;
	box-shadow: none;
	display: block;
}

.contact-page .contact-form-card .formlayer-input:focus,
.contact-page .contact-form-card .formlayer-form textarea:focus,
.contact-page .contact-form-card .formlayer-select-wrap select:focus {
	border-color: var(--blue);
	outline: 2px solid #0878e833;
	outline-offset: 0;
}

.contact-page .contact-form-card .formlayer-grid,
.contact-page .contact-form-card .formlayer-grid-2,
.contact-page .contact-form-card .formlayer-grid-3,
.contact-page .contact-form-card .formlayer-name-fields-wrap,
.contact-page .contact-form-card .formlayer-address-grid {
	gap: 18px;
}

.contact-page .contact-form-card .formlayer-help-text,
.contact-page .contact-form-card .formlayer-gdpr-desc {
	color: var(--slate);
	margin-top: 6px;
	font-size: 9px;
	line-height: 1.5;
}

.contact-page .contact-form-card .formlayer-section-break {
	border-top: 1px solid #e3eaf4;
	margin: 6px 0;
}

/* The approved submit control is .button.orange. */
.contact-page .contact-form-card .formlayer-submit-btn {
	background: var(--orange);
	color: var(--navy);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 17px 23px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	transition: transform .2s, box-shadow .2s;
	display: inline-flex;
}

.contact-page .contact-form-card .formlayer-submit-btn:hover:not(:disabled) {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px #06245c2e;
}

.contact-page .contact-form-card .formlayer-submit-btn:disabled,
.contact-page .contact-form-card .formlayer-submit-btn.loading {
	opacity: .6;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

/*
 * Success and error states, in brand colour.
 *
 * The conventional green/red pair would put two hues on the page that appear
 * nowhere in the logo. The brand has exactly three — navy, blue, orange — so
 * confirmation is carried by blue and attention by orange. Neither state relies
 * on colour alone: each keeps its own message text and its own left rule.
 */
.contact-page .contact-form-card .formlayer-success-message {
	color: var(--navy);
	background: #e2f0ff;
	border-left: 3px solid var(--blue);
	padding: 13px 15px;
	font-size: 12px;
	font-weight: 700;
}

.contact-page .contact-form-card .formlayer-error-message,
.contact-page .contact-form-card .formlayer-error {
	color: var(--navy);
	background: #fff3dc;
	border-left: 3px solid var(--orange);
	padding: 13px 15px;
	font-size: 12px;
	font-weight: 700;
}

.contact-page .contact-form-card .formlayer-input.formlayer-error {
	background: #fff8ec;
	border-color: var(--orange);
	box-shadow: inset 0 0 0 1px #f6a30059;
	padding: 13px;
	font-weight: 400;
}

.contact-page .contact-form-card .formlayer-file-upload-box {
	background: #f8fbff;
	border: 1px dashed #cbd7e6;
	border-radius: 0;
}

.contact-page .contact-form-card .formlayer-file-fake-btn {
	background: var(--navy);
	color: #fff;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
}

/* Shown until a FormLayer form ID is configured — a real email action rather
 * than a form that cannot submit. */
.contact-fallback {
	display: grid;
	gap: 14px;
	justify-items: start;
}

.contact-fallback .fallback-kicker {
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 11px;
	font-weight: 800;
}

.contact-fallback .fallback-copy {
	color: var(--slate);
	font-size: 13px;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * 5. Templates outside the approved set
 *
 * Posts, archives, 404s and any page the client adds later are not part of the
 * approved seven-page design. They reuse the approved inner-page shell and its
 * tokens so new content stays on-brand instead of falling back to unstyled
 * block defaults.
 * ------------------------------------------------------------------------- */

.inner-hero.is-narrow {
	grid-template-columns: 1fr;
	min-height: 0;
	padding-bottom: 70px;
}

.entry-meta {
	color: var(--slate);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-top: 20px;
	font-size: 10px;
	font-weight: 800;
}

.entry-content {
	color: var(--slate);
	max-width: 760px;
	font-size: 16px;
	line-height: 1.9;
}

.entry-content > * + * {
	margin-top: 22px;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--navy);
	letter-spacing: -.02em;
	margin-top: 46px;
	line-height: 1.25;
}

.entry-content h2 {
	font-size: 32px;
}

.entry-content h3 {
	font-size: 23px;
}

.entry-content h4 {
	font-size: 18px;
}

.entry-content a {
	color: var(--blue);
	border-bottom: 1px solid #a7cef7;
}

.entry-content ul,
.entry-content ol {
	padding-left: 20px;
	list-style: revert;
}

.entry-content li {
	margin-top: 8px;
}

.entry-content blockquote {
	border-left: 3px solid var(--orange);
	color: var(--ink);
	padding-left: 22px;
	font-size: 18px;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content code,
.entry-content pre {
	background: var(--cloud);
	font-size: 13px;
}

.entry-content pre {
	padding: 20px;
	overflow-x: auto;
}

.post-row {
	border-bottom: 1px solid #cdd6e3;
	padding: 34px 0;
}

.post-row:first-child {
	border-top: 1px solid #cdd6e3;
}

.post-row-date {
	color: var(--blue);
	letter-spacing: .15em;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 800;
}

.post-row .wp-block-post-title {
	color: var(--navy);
	letter-spacing: -.03em;
	margin: 12px 0;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.2;
}

.post-row-excerpt {
	color: var(--slate);
	max-width: 720px;
	font-size: 14px;
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * 6. Consent / plugin containment
 *
 * The cookie plugin renders a wide left-anchored panel over the hero. Contain it
 * to a corner without touching plugin files or suppressing consent itself.
 * ------------------------------------------------------------------------- */

#cookieadmin-consent-reopen,
.cookieadmin-reopen,
.cookieadmin-consent-reopen {
	inset: auto 12px 12px auto !important;
	max-width: 52px;
	z-index: 60;
}