/*
Theme Name: OBM The Craft Theme
Theme URI: https://obrienmedia.co.uk/
Author: O'Brien Media (Pembroke Digital Limited)
Author URI: https://obrienmedia.co.uk/
Description: A fully Customizer-editable dark theme for The Craft — the market positioning specialists. Every heading, paragraph, card, case study, FAQ and colour can be edited in the WordPress Customizer, with shared contact details, taglines and design tokens defined once and reused across every page template.
Version: 1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Commercial License
License URI: https://obrienmedia.co.uk/
Text Domain: obm-thecraft
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template
*/

/* -------------------------------------------------------------------------
   Design tokens (overridden live by Customizer via inline CSS in wp_head)
   ------------------------------------------------------------------------- */
:root {
	--obm-bg: #0f0f0f;
	--obm-surface: #181818;
	--obm-surface-2: #1f1f1f;
	--obm-text: #ffffff;
	--obm-muted: #b9b9b9;
	--obm-accent: #c9a257;
	--obm-card: #8f8f8f;
	--obm-card-text: #ffffff;
	--obm-border: #2c2c2c;
	--obm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--obm-base-size: 16px;
	--obm-heading-weight: 700;
	--obm-heading-transform: none;
	--obm-container: 1200px;
	--obm-section-pad: 72px;
	--obm-radius: 6px;
	--obm-hero-height: 480px;
	/* The played part of the decorative video bar. Deliberately not a Design
	   panel colour: it reads as a player's own chrome, not as the site palette. */
	--obm-video-progress: #1e9bf0;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--obm-bg);
	color: var(--obm-text);
	font-family: var(--obm-font);
	font-size: var(--obm-base-size);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--obm-accent); }

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--obm-heading-weight);
	line-height: 1.15;
	margin: 0 0 0.6em;
	text-transform: var(--obm-heading-transform);
	letter-spacing: 0.01em;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	background: var(--obm-accent); color: #000; clip: auto; clip-path: none;
	display: block; height: auto; width: auto; left: 8px; top: 8px;
	padding: 12px 20px; z-index: 100000; text-decoration: none;
}

/* -------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */
.obm-container {
	max-width: var(--obm-container);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.obm-section { padding: var(--obm-section-pad) 0; }
.obm-section--tight { padding: calc(var(--obm-section-pad) * 0.6) 0; }
.obm-section--panel { background: var(--obm-surface); }
.obm-section + .obm-section { border-top: 1px solid var(--obm-border); }

.obm-grid { display: grid; gap: 40px; }
.obm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.obm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.obm-grid--4 { grid-template-columns: repeat(4, 1fr); }
.obm-grid--sidebar { grid-template-columns: none; }

@media (max-width: 980px) {
	.obm-grid--3, .obm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.obm-grid--2, .obm-grid--3, .obm-grid--4, .obm-grid--sidebar { grid-template-columns: 1fr; }
	:root { --obm-section-pad: 48px; }
}

/* Typographic elements */
.obm-kicker {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--obm-text);
	margin-bottom: 1em;
}
.obm-kicker--accent { color: var(--obm-accent); }
.obm-kicker--muted { color: var(--obm-muted); }

.obm-display {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-weight: var(--obm-heading-weight);
	line-height: 1.2;
	margin: 0;
}
.obm-display--xl { font-size: clamp(2rem, 4.6vw, 3.4rem); }

.obm-lead { font-size: 1.12rem; color: var(--obm-muted); }
.obm-muted { color: var(--obm-muted); }

/* "Find out more [Page]" links */
.obm-more { margin-top: 2em; font-size: 0.92rem; }
.obm-more a {
	color: var(--obm-text);
	text-decoration: none;
	border-bottom: 1px solid var(--obm-accent);
	padding-bottom: 2px;
	transition: color 0.15s ease;
}
.obm-more a:hover { color: var(--obm-accent); }
.obm-more .obm-more__target { color: var(--obm-muted); }
.obm-more a:hover .obm-more__target { color: var(--obm-accent); }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
	background: var(--obm-bg);
	border-bottom: 1px solid var(--obm-border);
	position: relative;
	z-index: 50;
}
.site-header--sticky { position: sticky; top: 0; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 60px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.site-header__brand { display: flex; align-items: center; gap: 12px; }
.site-header__brand a { text-decoration: none; }
.site-header__brand .custom-logo { max-height: 36px; width: auto; }

.obm-wordmark {
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--obm-text);
	font-size: 0.95rem;
	white-space: nowrap;
}
.obm-wordmark--large {
	font-size: clamp(2.2rem, 6vw, 4rem);
	letter-spacing: 0.12em;
	color: var(--obm-accent);
	line-height: 1;
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.site-nav a {
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--obm-text);
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--obm-accent); }

.site-nav__toggle {
	display: none;
	background: none;
	border: 1px solid var(--obm-border);
	color: var(--obm-text);
	border-radius: var(--obm-radius);
	padding: 8px 14px;
	font: inherit;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 820px) {
	.site-nav__toggle { display: inline-block; }
	.site-nav__menu { display: none; width: 100%; }
	.site-nav__menu.is-open { display: block; }
	.site-header__inner { flex-wrap: wrap; }
	.site-nav { width: 100%; }
	.site-nav ul { flex-direction: column; gap: 0; padding: 8px 0 16px; }
	.site-nav li { border-top: 1px solid var(--obm-border); }
	.site-nav a { display: block; padding: 12px 4px; }
}

/* -------------------------------------------------------------------------
   Masthead (homepage brand band)
   ------------------------------------------------------------------------- */
.obm-masthead { background: var(--obm-bg); padding: 56px 0; }
.obm-masthead__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 48px;
	align-items: center;
}
.obm-masthead__logo img { max-height: 90px; width: auto; }
.obm-masthead__tagline {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.6em;
}
.obm-masthead__strap { color: var(--obm-muted); max-width: 46ch; margin: 0; font-size: 0.95rem; }
@media (max-width: 720px) {
	.obm-masthead__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* -------------------------------------------------------------------------
   Page hero (kicker + big statement)
   ------------------------------------------------------------------------- */
.obm-page-hero { padding: calc(var(--obm-section-pad) * 0.9) 0; }
.obm-page-hero .obm-display { max-width: 26ch; }
.obm-page-hero__kicker { margin-bottom: 1.4em; }

/* -------------------------------------------------------------------------
   Image hero bands (full-width photo with overlaid heading)
   ------------------------------------------------------------------------- */
.obm-hero-band {
	position: relative;
	display: flex;
	align-items: flex-end;
	background-color: var(--obm-surface);
	background-repeat: no-repeat;
	/* Each band sets these inline; the fallbacks keep a band without an image
	   or an older saved value rendering exactly as it did before. */
	background-image: var(--obm-hero-image, none);
	background-size: var(--obm-hero-size, cover);
	background-position: var(--obm-hero-pos, center center);
	min-height: var(--obm-hero-h, var(--obm-hero-height, 480px));
}
.obm-hero-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.72) 100%);
}
.obm-hero-band--placeholder {
	background-image: linear-gradient(140deg, #2b2415 0%, #171310 55%, #0f0f0f 100%);
}
.obm-hero-band__inner { position: relative; z-index: 2; width: 100%; padding: 48px 0; }
.obm-hero-band__heading {
	font-size: clamp(1.8rem, 4.5vw, 3.1rem);
	max-width: 18ch;
	margin: 0;
	text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
/* A phone crops the same picture far more tightly than a wide screen, so the
   band can take its own focal point and height here. */
@media (max-width: 640px) {
	.obm-hero-band {
		min-height: var(--obm-hero-h-mobile, 340px);
		background-position: var(--obm-hero-pos-mobile, var(--obm-hero-pos, center center));
	}
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.obm-card {
	background: var(--obm-card);
	color: var(--obm-card-text);
	border-radius: var(--obm-radius);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
}
.obm-card__eyebrow {
	font-size: 0.95rem;
	font-weight: 800;
	margin: 0 0 14px;
	color: var(--obm-card-text);
}
.obm-card__body {
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	margin: auto 0;
	padding: 24px 4px;
}

/* Client result tiles (homepage) */
.obm-client { display: flex; flex-direction: column; gap: 14px; }
.obm-client__name { font-size: 1rem; font-weight: 800; margin: 0; }
.obm-client .obm-card { flex: 1; min-height: 190px; justify-content: center; }

/* Engagement play cards */
.obm-play {
	background: var(--obm-card);
	color: var(--obm-card-text);
	border-radius: var(--obm-radius);
	padding: 32px 26px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.obm-play__title { font-size: 1.15rem; font-weight: 800; margin: 0; }

/* Optional brushed gold titles. Three sections offer it — Problems We Solve >
   Strategic tensions and Types of engagements, and Resources > Cornerstones —
   each by putting .obm-gold-titles on its own grid. The treatment lives with
   the other brushed rules further down, so the recipe is written once. These
   cards are otherwise left out of the heading colouring, because gold type
   fails contrast on a pale card. */
.obm-play__subtitle { font-weight: 800; font-size: 0.95rem; margin: 0; }
.obm-play__text { font-weight: 600; font-size: 0.92rem; margin: 0; }

/* Feature blocks (What/How/Why, services, cornerstones, tensions) */
.obm-feature__title { font-size: 1.15rem; margin-bottom: 0.5em; }

/* Board-level questions: fine-lined speech bubbles with the stem alternating
   bottom-left / bottom-right. Only questions that have text are rendered, so
   :nth-child follows the visible order — blanking one keeps the alternation
   in step, the same rule the case studies follow. */
.obm-questions { --obm-question-bg: var(--obm-bg); }

.obm-questions--bubbles .obm-question {
	/* The stem hangs below the box; let the scroll reveal's wipe include it so
	   it arrives with the bubble instead of after it. */
	--obm-reveal-bleed: 16px;
	position: relative;
	margin: 0;
	padding: 26px 30px 28px;
	border: 1px solid var(--obm-border);
	border-radius: 9px;
	background: var(--obm-question-bg);
	font-size: 1.32rem;
	line-height: 1.45;
}

/* The stem is a small square turned 45 degrees, carrying two of the bubble's
   own borders. Its fill covers the length of bubble edge it sits on, which is
   what opens the stem into the bubble. */
.obm-questions--bubbles .obm-question::after {
	content: "";
	position: absolute;
	bottom: -9px;
	width: 17px;
	height: 17px;
	background: var(--obm-question-bg);
	border-right: 1px solid var(--obm-border);
	border-bottom: 1px solid var(--obm-border);
	transform: rotate(45deg);
}

.obm-questions--bubbles .obm-question:nth-child(odd)::after { right: 26px; }
.obm-questions--bubbles .obm-question:nth-child(even)::after { left: 26px; }
.obm-feature__title--kicker {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.obm-feature__text { color: var(--obm-muted); font-size: 0.97rem; }

/* -------------------------------------------------------------------------
   Split sections (text + image)
   ------------------------------------------------------------------------- */
.obm-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.obm-split--flip { grid-template-columns: 1fr 1.1fr; }
.obm-split__media img { border-radius: var(--obm-radius); width: 100%; object-fit: cover; }
.obm-split__media--placeholder {
	border-radius: var(--obm-radius);
	min-height: 300px;
	background: linear-gradient(140deg, #2b2415 0%, #171310 60%, #101010 100%);
}
@media (max-width: 820px) {
	.obm-split, .obm-split--flip { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Statement band
   ------------------------------------------------------------------------- */
.obm-statement__kicker {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--obm-muted);
	max-width: 90ch;
	margin-bottom: 1.6em;
	line-height: 1.7;
}
.obm-statement__text {
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: var(--obm-heading-weight);
	max-width: 40ch;
	margin: 0;
	line-height: 1.35;
}

/* Centred heading and intro paragraphs above the client tiles. */
.obm-clients__title {
	text-align: center;
	margin-bottom: 1.1em;
}
.obm-clients__intro {
	max-width: 88ch;
	margin: 0 auto calc(var(--obm-section-pad) * 0.55);
	text-align: center;
}
.obm-clients__intro p {
	margin: 0 0 1.1em;
	line-height: 1.65;
	color: var(--obm-text);
}
.obm-clients__intro p:last-child {
	margin-bottom: 0;
}

/* Lead copy above the strategic tensions grid (Problems We Solve). */
.obm-tensions__lead {
	margin-bottom: calc(var(--obm-section-pad) * 0.5);
}
.obm-tensions__lead p {
	margin: 0 0 1em;
	line-height: 1.6;
	max-width: 62ch;
}
.obm-tensions__lead p:last-child {
	margin-bottom: 0;
}
.obm-tensions__lead-strong {
	font-weight: var(--obm-heading-weight);
	font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
   Case studies (Results)
   ------------------------------------------------------------------------- */
.obm-case { padding: var(--obm-section-pad) 0; }
.obm-case + .obm-case { border-top: 1px solid var(--obm-border); }
.obm-case__inner { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: start; }
.obm-case--flip .obm-case__inner { grid-template-columns: 1.35fr 1fr; }
.obm-case--flip .obm-case__panel { order: 2; }
.obm-case--flip .obm-case__detail { order: 1; }

.obm-case__panel {
	background: #ffffff;
	color: #111111;
	border-radius: var(--obm-radius);
	padding: 40px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.obm-case__logo img { max-height: 80px; width: auto; margin: 0 auto; }
.obm-case__client { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: 0.04em; }
.obm-case__summary { font-weight: 700; font-size: 1.02rem; margin: 0; max-width: 34ch; }

.obm-case__label {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.4em;
}
.obm-case__block { margin-bottom: 1.6em; }
.obm-case__block:last-child { margin-bottom: 0; }
.obm-case__block p { color: var(--obm-muted); font-size: 0.97rem; }

@media (max-width: 820px) {
	.obm-case__inner, .obm-case--flip .obm-case__inner { grid-template-columns: 1fr; }
	.obm-case--flip .obm-case__panel { order: 1; }
	.obm-case--flip .obm-case__detail { order: 2; }
}

/* -------------------------------------------------------------------------
   Resources
   ------------------------------------------------------------------------- */
.obm-res-nav { display: flex; flex-direction: column; gap: 10px; }
.obm-res-nav a {
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--obm-text);
}
.obm-res-nav a:hover { color: var(--obm-accent); }

.obm-media-tile {
	background: var(--obm-surface-2);
	border: 1px solid var(--obm-border);
	border-radius: var(--obm-radius);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
	color: var(--obm-text);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.9rem;
	text-align: center;
}
.obm-media-tile img { width: 100%; height: 100%; object-fit: cover; }
.obm-media-tile iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.obm-media-tile--video { position: relative; cursor: pointer; }

/* The decorative player bar. It reports nothing and never moves — it is there so
   a still picture reads as a film. aria-hidden in the markup keeps it out of the
   accessibility tree; pointer-events: none keeps it out of the way of the click
   that opens the lightbox. */
.obm-video-bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: rgba(18, 18, 18, 0.88);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	pointer-events: none;
}
.obm-video-bar__track {
	position: relative;
	flex: 1 1 auto;
	height: 7px;
	border-radius: 4px;
	background: #8d8d8d;
	overflow: hidden;
}
.obm-video-bar__loaded,
.obm-video-bar__played {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-radius: 4px;
}
.obm-video-bar__loaded { width: var(--obm-video-loaded, 33%); background: #ededed; }
.obm-video-bar__played { width: var(--obm-video-played, 13%); background: var(--obm-video-progress); }
.obm-video-bar__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
	.obm-video-bar { gap: 8px; padding: 6px 9px; font-size: 0.65rem; }
	.obm-video-bar__track { height: 6px; }
}


.obm-res-card { display: flex; flex-direction: column; }
.obm-res-card__image {
	background: var(--obm-surface-2);
	border: 1px solid var(--obm-border);
	border-radius: var(--obm-radius);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 20px;
	color: var(--obm-muted);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.8rem;
}
.obm-res-card__image img { width: 100%; height: 100%; object-fit: cover; }

/* When the picture carries the card's link, give it a hover cue — the title
   link beside it is the one that takes focus. */
a.obm-res-card__image img { transition: opacity 160ms ease; }
a.obm-res-card__image:hover img { opacity: 0.85; }
.obm-res-card__title { font-size: 1.15rem; margin-bottom: 0.5em; }
.obm-res-card__title a { text-decoration: none; }
.obm-res-card__text { color: var(--obm-muted); font-size: 0.95rem; }

/* Video cards: the picture is the play control, so it carries a badge and takes
   focus in its own right. Everything here is presentation — the link works with
   or without the lightbox script. */
.obm-res-card__image--video { position: relative; cursor: pointer; }
.obm-video-play {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(15, 15, 15, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(2px);
	transition: background 160ms ease, transform 160ms ease;
}
.obm-video-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #ffffff;
}
.obm-res-card__image--video:hover .obm-video-play,
.obm-res-card__image--video:focus-visible .obm-video-play {
	background: var(--obm-accent);
	transform: scale(1.06);
}
.obm-res-card__image--video:hover .obm-video-play::after,
.obm-res-card__image--video:focus-visible .obm-video-play::after {
	border-left-color: var(--obm-bg);
}

/* The lightbox itself. Built by js/videos.js and appended to the body, so none
   of this is on the page until a visitor asks for a film. */
.obm-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.obm-lightbox::backdrop { background: rgba(8, 8, 8, 0.86); }
.obm-lightbox__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(1100px, calc(100vw - 48px));
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 120px);
	background: #000000;
	border: 1px solid var(--obm-border);
	border-radius: var(--obm-radius);
	overflow: hidden;
}
.obm-lightbox__frame iframe,
.obm-lightbox__frame video,
.obm-lightbox__frame .wp-video,
.obm-lightbox__frame .wp-video-shortcode {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	border: 0;
	display: block;
}
/* The oEmbed fallback is a plain "Watch the video" link; centre it rather than
   leaving it in the corner of a black rectangle. */
.obm-lightbox__frame > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--obm-text);
}
.obm-lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--obm-text);
	background: rgba(31, 31, 31, 0.9);
	border: 1px solid var(--obm-border);
	border-radius: 50%;
	cursor: pointer;
}
.obm-lightbox__close:hover,
.obm-lightbox__close:focus-visible { background: var(--obm-accent); color: var(--obm-bg); }

@media (max-width: 640px) {
	.obm-video-play { width: 50px; height: 50px; }
	.obm-video-play::after { border-width: 9px 0 9px 14px; }
	.obm-lightbox__frame { width: calc(100vw - 24px); }
	.obm-lightbox__close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.obm-video-play { transition: none; }
	.obm-res-card__image--video:hover .obm-video-play,
	.obm-res-card__image--video:focus-visible .obm-video-play { transform: none; }
}

/* -------------------------------------------------------------------------
   FAQs
   ------------------------------------------------------------------------- */
.obm-faq { border-top: 1px solid var(--obm-border); }
.obm-faq:last-child { border-bottom: 1px solid var(--obm-border); }
.obm-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 22px 40px 22px 0;
	position: relative;
	font-weight: 700;
	font-size: 1.05rem;
}
.obm-faq summary::-webkit-details-marker { display: none; }
.obm-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--obm-accent);
	font-size: 1.4rem;
	font-weight: 400;
}
.obm-faq[open] summary::after { content: "\2212"; }
.obm-faq__answer { padding: 0 0 26px; color: var(--obm-muted); max-width: 80ch; }

/* -------------------------------------------------------------------------
   Article (Strategic Value Gap) & generic entry content
   ------------------------------------------------------------------------- */
.obm-article { max-width: 860px; }
.obm-article h2 { font-size: 1.3rem; margin-top: 2em; }
.obm-article ul li, .obm-article ol li { margin-bottom: 0.4em; color: var(--obm-muted); }
.obm-article__lead { font-weight: 700; font-size: 1.08rem; }

.entry-content a { color: var(--obm-accent); }
.entry-content h1, .entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--obm-radius); }
.wp-block-quote, blockquote {
	border-left: 3px solid var(--obm-accent);
	margin: 1.5em 0;
	padding: 0.2em 0 0.2em 1.2em;
	color: var(--obm-muted);
}

/* -------------------------------------------------------------------------
   Get in touch band
   ------------------------------------------------------------------------- */
.obm-contact-band { background: var(--obm-surface); border-top: 1px solid var(--obm-border); }
.obm-contact-band__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	padding: var(--obm-section-pad) 0;
}
.obm-contact-band__heading { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.3em; }
.obm-contact-band__email {
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--obm-accent);
	padding-bottom: 3px;
}
.obm-contact-band__phone { display: block; margin-top: 14px; font-size: 1.05rem; text-decoration: none; color: var(--obm-muted); }
.obm-contact-band__aside { color: var(--obm-muted); font-size: 0.95rem; }
.obm-contact-band__address { margin-top: 1.4em; font-style: normal; line-height: 1.7; color: var(--obm-muted); white-space: pre-line; }
@media (max-width: 720px) {
	.obm-contact-band__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* -------------------------------------------------------------------------
   Brand band + legal bar (footer)
   ------------------------------------------------------------------------- */
.obm-brand-band { background: #000000; }
.obm-brand-band__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 48px;
	align-items: center;
	padding: 48px 0;
}
.obm-brand-band__logo img { max-height: 70px; width: auto; }
.obm-brand-band__tagline {
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5em;
}
.obm-brand-band__strap { color: var(--obm-muted); font-size: 0.85rem; max-width: 52ch; margin: 0; }
@media (max-width: 720px) {
	.obm-brand-band__inner { grid-template-columns: 1fr; gap: 20px; }
}

.obm-legal { background: #000000; border-top: 1px solid var(--obm-border); }
.obm-legal__inner {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 18px 0;
	font-size: 0.8rem;
	color: var(--obm-muted);
}
.obm-legal a { color: var(--obm-muted); text-decoration: none; }
.obm-legal a:hover { color: var(--obm-accent); }

/* Only rendered for signed-in editors, so it is set apart from the public
   legal text rather than reading as part of it. */
.obm-legal__guide { display: inline-flex; align-items: baseline; gap: 8px; }
.obm-legal__guide a { text-decoration: underline; text-underline-offset: 3px; }
/* The credit sits under the copyright line rather than beside it, so the legal
   row keeps its three columns. It borrows the guide note's size and weight but
   not its border or padding, and those two are unset here rather than in the
   note itself: the signed-in guide note above still needs its pill. The link
   takes no formatting of its own, so it reads as part of the sentence and picks
   up the footer's own link colour on hover. */
.obm-legal__copy p { margin: 0; }
.obm-legal__copy .obm-legal__credit { margin-top: 7px; }
.obm-legal__credit .obm-legal__guide-note { border: 0; padding: 0; }
.obm-legal__credit a { text-decoration: none; }

.obm-legal__guide-note {
	font-size: 0.72rem;
	opacity: 0.7;
	border: 1px solid var(--obm-border);
	border-radius: var(--obm-radius);
	padding: 1px 7px;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Blog / generic templates
   ------------------------------------------------------------------------- */
.obm-page-content { padding: var(--obm-section-pad) 0; }
.obm-page-content .entry-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.obm-post-list article { border-top: 1px solid var(--obm-border); padding: 36px 0; }
.obm-post-list .entry-title { font-size: 1.4rem; margin: 0 0 0.4em; }
.obm-post-list .entry-title a { text-decoration: none; }
.obm-post-meta { color: var(--obm-muted); font-size: 0.85rem; margin-bottom: 1em; }
.obm-pagination { padding: 24px 0 48px; }
.obm-pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--obm-border); border-radius: var(--obm-radius); text-decoration: none; margin-right: 6px; }
.obm-pagination .page-numbers.current { background: var(--obm-accent); color: #000; border-color: var(--obm-accent); }

/* Alignment helpers for editor content */
.alignwide { max-width: calc(var(--obm-container) + 160px); margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; width: 100%; }

/* Screen-size helpers for editor content ----------------------------------
   Wrap anything in .obm-desktop-only or .obm-mobile-only to show it on one or
   the other.

   Both HIDE rather than show, so an element keeps whatever display type it
   normally has; a show-on-large rule would flatten a flex row or an inline
   span to block. The pointer test catches large tablets — an iPad Pro in
   landscape reports 1366px and would otherwise pass as a laptop. The two
   queries are exact inverses of each other (a pointer is coarse, fine or
   none), so on any device precisely one of the pair is visible.

   display:none also removes an element from screen readers, and the markup is
   downloaded either way, so use these for presentation — never to hide
   navigation, contact details or anything else a visitor may need. */
@media (max-width: 1023.98px), (pointer: coarse) {
	.obm-desktop-only { display: none !important; }
}

@media (min-width: 1024px) and (pointer: fine),
       (min-width: 1024px) and (pointer: none) {
	.obm-mobile-only { display: none !important; }
}

/* -------------------------------------------------------------------------
   Page transitions (Customizer → Design → Page transitions)

   The incoming animation is pure CSS and needs no JavaScript: the body carries
   .obm-transitions plus an .obm-transition--* effect class, and .site-main
   animates as the page paints. js/transitions.js adds .obm-is-leaving to <html>
   on an internal link click to play the matching outgoing animation.
   ------------------------------------------------------------------------- */
.obm-transitions .site-main {
	animation: obm-in-fade var(--obm-transition-time, 420ms) var(--obm-transition-ease, ease-out) both;
}
.obm-is-leaving .obm-transitions .site-main {
	animation: obm-out-fade var(--obm-transition-time, 420ms) var(--obm-transition-ease, ease-out) both;
}

.obm-transitions.obm-transition--fade-up .site-main { animation-name: obm-in-fade-up; }
.obm-is-leaving .obm-transitions.obm-transition--fade-up .site-main { animation-name: obm-out-fade-up; }

.obm-transitions.obm-transition--fade-down .site-main { animation-name: obm-in-fade-down; }
.obm-is-leaving .obm-transitions.obm-transition--fade-down .site-main { animation-name: obm-out-fade-down; }

.obm-transitions.obm-transition--slide .site-main { animation-name: obm-in-slide; }
.obm-is-leaving .obm-transitions.obm-transition--slide .site-main { animation-name: obm-out-slide; }

.obm-transitions.obm-transition--zoom .site-main { animation-name: obm-in-zoom; }
.obm-is-leaving .obm-transitions.obm-transition--zoom .site-main { animation-name: obm-out-zoom; }

.obm-transitions.obm-transition--blur .site-main { animation-name: obm-in-blur; }
.obm-is-leaving .obm-transitions.obm-transition--blur .site-main { animation-name: obm-out-blur; }

/* Curtain wipes a panel over the page instead of moving the content itself. */
.obm-transitions.obm-transition--curtain .site-main,
.obm-is-leaving .obm-transitions.obm-transition--curtain .site-main { animation: none; }
.obm-transitions.obm-transition--curtain::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background: var(--obm-bg);
	transform-origin: top;
	animation: obm-curtain-up var(--obm-transition-time, 420ms) var(--obm-transition-ease, ease-out) both;
}
.obm-is-leaving .obm-transitions.obm-transition--curtain::after {
	transform-origin: bottom;
	animation-name: obm-curtain-down;
}

@keyframes obm-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes obm-out-fade { from { opacity: 1; } to { opacity: 0; } }

@keyframes obm-in-fade-up { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes obm-out-fade-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -20px, 0); } }

@keyframes obm-in-fade-down { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } }
@keyframes obm-out-fade-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, 20px, 0); } }

@keyframes obm-in-slide { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes obm-out-slide { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-32px, 0, 0); } }

@keyframes obm-in-zoom { from { opacity: 0; transform: scale(0.982); } to { opacity: 1; transform: none; } }
@keyframes obm-out-zoom { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.012); } }

@keyframes obm-in-blur { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes obm-out-blur { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(12px); } }

@keyframes obm-curtain-up { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes obm-curtain-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Motion is decoration. Anyone who has asked for less of it gets none. */
@media (prefers-reduced-motion: reduce) {
	.obm-transitions .site-main,
	.obm-is-leaving .obm-transitions .site-main,
	.obm-transitions.obm-transition--curtain::after,
	.obm-is-leaving .obm-transitions.obm-transition--curtain::after {
		animation: none !important;
		opacity: 1;
		filter: none;
		transform: none;
	}
	.obm-transitions.obm-transition--curtain::after { display: none; }
}

/* -------------------------------------------------------------------------
   Search form (404, empty search results)
   ------------------------------------------------------------------------- */
.search-form { display: flex; gap: 10px; max-width: 480px; }
.search-form label { flex: 1 1 auto; margin: 0; }
.search-form .search-field {
	width: 100%;
	font: inherit;
	color: var(--obm-text);
	background: var(--obm-surface-2);
	border: 1px solid var(--obm-border);
	border-radius: var(--obm-radius);
	padding: 13px 16px;
}
.search-form .search-field::placeholder { color: var(--obm-muted); opacity: 0.8; }
.search-form .search-field:focus {
	outline: 2px solid var(--obm-accent);
	outline-offset: 2px;
	border-color: var(--obm-accent);
}
.search-form .search-submit {
	font: inherit;
	font-weight: 600;
	color: #000;
	background: var(--obm-accent);
	border: 0;
	border-radius: var(--obm-radius);
	padding: 13px 22px;
	cursor: pointer;
	transition: filter 160ms ease;
}
.search-form .search-submit:hover { filter: brightness(1.12); }
.search-form .search-submit:focus-visible { outline: 2px solid var(--obm-text); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */
.obm-404 {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 62vh;
	padding: calc(var(--obm-section-pad) * 1.2) 0;
	overflow: hidden;
	background:
		radial-gradient(80% 120% at 15% 0%, var(--obm-wash, rgba(201, 162, 87, 0.10)) 0%, rgba(0, 0, 0, 0) 60%),
		var(--obm-bg);
}

/* The oversized figure sitting behind the copy. Decorative only — it is
   aria-hidden in the template and must never intercept a click. */
.obm-404__code {
	position: absolute;
	top: 50%;
	right: -0.06em;
	transform: translateY(-50%);
	z-index: 0;
	font-size: clamp(11rem, 34vw, 26rem);
	font-weight: var(--obm-heading-weight);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px var(--obm-border);
	user-select: none;
	pointer-events: none;
}

.obm-404__inner { position: relative; z-index: 1; }
.obm-404__heading { max-width: 16ch; margin-bottom: 0.4em; }
.obm-404__text { max-width: 58ch; color: var(--obm-muted); }
.obm-404__search { margin: 2em 0 2.6em; }

.obm-404__routes { border-top: 1px solid var(--obm-border); padding-top: 28px; }
.obm-404__routes-title {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--obm-muted);
	margin-bottom: 1.2em;
}
.obm-404__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	max-width: 860px;
}
.obm-404__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
	padding: 16px 18px;
	text-decoration: none;
	background: var(--obm-surface);
	border: 1px solid var(--obm-border);
	border-radius: var(--obm-radius);
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.obm-404__links a::after { content: "\2192"; color: var(--obm-accent); }
.obm-404__links a:hover,
.obm-404__links a:focus-visible {
	background: var(--obm-surface-2);
	border-color: var(--obm-accent);
	transform: translateY(-2px);
}

.obm-404__home { margin-top: 2.2em; }
.obm-404__home a { color: var(--obm-muted); text-underline-offset: 5px; }
.obm-404__home a:hover { color: var(--obm-accent); }

@media (max-width: 640px) {
	.obm-404 { min-height: 0; }
	.obm-404__code { right: auto; left: 50%; transform: translate(-50%, -50%); opacity: 0.65; }
	.search-form { flex-wrap: wrap; }
	.search-form .search-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.obm-404__links a:hover,
	.obm-404__links a:focus-visible { transform: none; }
}

/* -------------------------------------------------------------------------
   Accent wash and heading colouring (Customizer → Design → Backgrounds & headings)

   The soft accent glow introduced on the 404, reused across the site. The
   colour comes from --obm-wash, which obm_css_variables() derives from the
   accent colour and the chosen strength, so recolouring the theme recolours
   the wash with it.
   ------------------------------------------------------------------------- */
.obm-wash-panels .obm-section--panel,
.obm-wash-heroes .obm-page-hero,
.obm-wash-heroes .obm-masthead,
.obm-wash-contact .obm-contact-band {
	background-image: radial-gradient(80% 120% at 15% 0%, var(--obm-wash, rgba(201, 162, 87, 0.10)) 0%, rgba(0, 0, 0, 0) 60%);
}

/* The page hero sits directly on the page background, so give the wash a
   little more room to fall off before the content below it. */
.obm-wash-heroes .obm-page-hero { padding-bottom: calc(var(--obm-section-pad) * 0.9); }

.obm-kickers-accent .obm-kicker { color: var(--obm-accent); }
.obm-kickers-accent .obm-feature__title--kicker,
.obm-kickers-accent .obm-card__eyebrow,
.obm-kickers-accent .obm-404__routes-title { color: var(--obm-accent); }

/* Brushed gold ------------------------------------------------------------
   Three stacked gradients: irregular fine horizontal brush marks, a soft
   vertical variation through the metal, and the colour profile itself. This is
   a fixed recipe — unlike the accent wash it does not follow the palette, so
   recolouring the theme leaves the metal as it is.

   The flat fallback below must stay OUTSIDE the @supports block. A browser that
   cannot clip a gradient to text would otherwise apply the transparent fill and
   render the type invisible. */
.brushed-gold,
.obm-kickers-brushed .obm-kicker,
.obm-kickers-brushed .obm-kicker--accent,
.obm-kickers-brushed .obm-feature__title--kicker,
.obm-kickers-brushed .obm-card__eyebrow,
.obm-kickers-brushed .obm-404__routes-title,
.obm-headings-brushed .obm-display,
.obm-gold-titles .obm-feature__title,
.obm-gold-titles .obm-play__title {
	color: var(--obm-accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.brushed-gold,
	.obm-kickers-brushed .obm-kicker,
	.obm-kickers-brushed .obm-kicker--accent,
	.obm-kickers-brushed .obm-feature__title--kicker,
	.obm-kickers-brushed .obm-card__eyebrow,
	.obm-kickers-brushed .obm-404__routes-title,
	.obm-headings-brushed .obm-display,
	.obm-gold-titles .obm-feature__title,
	.obm-gold-titles .obm-play__title {
		display: inline-block;
		color: transparent;
		background-image:
			/* Irregular fine horizontal brush marks */
			linear-gradient(
				180deg,
				transparent 0%, rgba(255, 244, 185, 0.18) 1.2%, transparent 2.1%,
				transparent 6.4%, rgba(107, 69, 15, 0.10) 7.1%, transparent 8.5%,
				transparent 13.8%, rgba(255, 239, 166, 0.14) 14.5%, transparent 16.1%,
				transparent 23.6%, rgba(117, 75, 16, 0.08) 24.3%, transparent 26.2%,
				transparent 34.8%, rgba(255, 246, 194, 0.16) 35.5%, transparent 37.3%,
				transparent 46.1%, rgba(113, 72, 15, 0.10) 47%, transparent 49.2%,
				transparent 57.7%, rgba(255, 239, 166, 0.13) 58.5%, transparent 60.4%,
				transparent 69.8%, rgba(106, 67, 13, 0.09) 70.7%, transparent 72.4%,
				transparent 81.2%, rgba(255, 244, 185, 0.15) 82%, transparent 84.1%,
				transparent 92.8%, rgba(109, 68, 13, 0.10) 93.6%, transparent 95.2%,
				transparent 100%
			),
			/* Soft vertical variation through the metal */
			linear-gradient(
				180deg,
				rgba(255, 235, 157, 0.10) 0%,
				rgba(126, 78, 14, 0.06) 18%,
				rgba(255, 242, 181, 0.12) 43%,
				rgba(120, 74, 12, 0.08) 68%,
				rgba(255, 225, 132, 0.08) 100%
			),
			/* Main colour profile sampled from the source */
			linear-gradient(
				90deg,
				#b28530 0%, #dcb251 9%, #f0cd70 15%, #fde28a 21%, #f4ce6d 31%,
				#e4b859 43%, #d2a44a 55%, #c4963e 67%, #b98a34 80%, #ad7d2b 91%,
				#a67527 100%
			);
		background-size: 100% 100%;
		background-position: left top;
		background-repeat: no-repeat;
		background-clip: text;
		/* Older Safari still needs the prefix for both of these. */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 700;
	}
}

/* Kickers set to the body text colour, beating the --accent modifier. */
.obm-kickers-plain .obm-kicker,
.obm-kickers-plain .obm-kicker--accent { color: var(--obm-text); }

.obm-headings-accent .obm-display { color: var(--obm-accent); }
/* Headings that sit over a photograph or a coloured card keep their own
   colour — accent type on those grounds fails contrast. */
.obm-headings-accent .obm-hero-band__heading,
.obm-headings-accent .obm-card .obm-display,
.obm-headings-accent .obm-masthead__tagline { color: var(--obm-text); }

/* The brushed recipe normalises weight to 700; these cards are set heavier, so
   put their weight back. Placed after the @supports block, same specificity. */
.obm-gold-titles .obm-play__title { font-weight: 800; }


/* -------------------------------------------------------------------------
   Scroll reveal (Customizer → Design → Scroll reveal)

   js/reveal.js adds .obm-reveal-ready to <html> before the first paint, then
   .is-revealed to each band as it enters the window. Everything below is gated
   on that ready class, so with JavaScript off — or without IntersectionObserver
   — the hidden state never applies and the page renders normally.
   ------------------------------------------------------------------------- */
.obm-reveal-ready .obm-reveals .obm-reveal {
	transition:
		opacity var(--obm-reveal-time, 620ms) var(--obm-reveal-ease, ease-out) var(--obm-reveal-delay, 0ms),
		transform var(--obm-reveal-time, 620ms) var(--obm-reveal-ease, ease-out) var(--obm-reveal-delay, 0ms),
		clip-path var(--obm-reveal-time, 620ms) var(--obm-reveal-ease, ease-out) var(--obm-reveal-delay, 0ms);
	will-change: opacity, transform, clip-path;
}

/* Starting states, one per effect. */
.obm-reveal-ready .obm-reveals.obm-reveal--fade .obm-reveal { opacity: 0; }

.obm-reveal-ready .obm-reveals.obm-reveal--rise .obm-reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
}

/* The band is clipped to nothing and grows downwards from its own top edge. */
.obm-reveal-ready .obm-reveals.obm-reveal--wipe .obm-reveal {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
}
/* Items inside a band travel a shorter distance than the band itself. */
.obm-reveal-ready .obm-reveals.obm-reveal--rise .obm-reveal--item { transform: translate3d(0, 14px, 0); }

/* The wipe clips to the border box, which cuts off anything drawn outside it —
   the question bubbles' stems, for one, which then popped in only once the
   reveal classes were stripped. --obm-reveal-bleed lets an element widen the
   clip region past its own edge; it is 0 for everything that does not set it. */
.obm-reveal-ready .obm-reveals .obm-reveal.is-revealed {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 calc(0px - var(--obm-reveal-bleed, 0px)) 0);
}

/* Motion is decoration. Anyone who has asked for less of it gets none, and the
   script bails out before hiding anything in the first place. */
@media (prefers-reduced-motion: reduce) {
	.obm-reveal-ready .obm-reveals .obm-reveal,
	.obm-reveal-ready .obm-reveals .obm-reveal.is-revealed {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		will-change: auto;
	}
}

/* -------------------------------------------------------------------------
   Basic Page template
   ------------------------------------------------------------------------- */
/* Body copy stays at the base size and keeps a readable measure. */
.obm-basic-content { max-width: 860px; }
.obm-basic-content > *:first-child { margin-top: 0; }

/* The gold on this template belongs to the sub-heading, so the title stays in
   the body text colour whatever Heading colouring is set to. These rules sit
   after the accent and brushed blocks deliberately: same specificity, later
   wins, and the brushed reset has to undo a painted gradient as well as a
   colour. */
.obm-headings-accent .obm-basic-hero__title,
.obm-headings-brushed .obm-basic-hero__title,
.obm-headings-accent .obm-post-hero__title,
.obm-headings-brushed .obm-post-hero__title {
	display: block;
	color: var(--obm-text);
	background-image: none;
	-webkit-text-fill-color: currentColor;
}

/* -------------------------------------------------------------------------
   Post template
   ------------------------------------------------------------------------- */
/* The byline stands in for the sub-heading, so it takes the kicker colouring.
   It reads as one sentence — "Article by Name, date" — so the author is not set
   apart; .obm-post-hero__by is left as a styling hook only. */

/* The Excerpt, set as a standfirst: larger than the body, quieter than the
   heading, on the same measure as both. */
.obm-post-lead {
	max-width: 860px;
	margin: 0 0 2em;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--obm-muted);
}
.obm-post-lead p { margin: 0; }
.obm-post-lead p + p { margin-top: 0.6em; }

/* The featured image shares the body copy's measure, so picture and text line
   up down the left edge. */
.obm-post-figure {
	max-width: 860px;
	margin: 0 0 2.2em;
}
.obm-post-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--obm-radius);
	border: 1px solid var(--obm-border);
}
.obm-post-figure__caption {
	color: var(--obm-muted);
	font-size: 0.9rem;
	margin-top: 0.7em;
}




.obm-tensions__lead p {
	max-width:inherit;
	width: inherit;
	font-size:1.4em;
}

.obm-article  {
	max-width:inherit;
	width: inherit;
}

.obm-split__media img {
	max-width:5500px;
}

.obm-split__copy .obm-lead {
	font-size:1.2em;
}


.obm-clients__intro {
	margin-bottom:4ch;
	margin-top:2ch;
}

.obm-card__body {
margin: 0ch;
}

.obm-lead {
	max-width:inherit!important;
}

.obm-more {
    font-weight: 600;
		font-size:1.8ch;
}

.obm-contact-band__aside address {
	line-height:2.2ch;
		font-size:inherit;
}

.obm-contact-band__aside p  {
	line-height:2.2ch;
	font-size:2.2ch;
}

.obm-faq__answer {
max-width:100%;
}

.obm-case__panel {
	height:100%;
	display: flex;
align-items: center;
justify-content: center;
}

.obm-case__logo img {
    max-height: 130px;
	max-width:100%
}

.obm-case__logo {
    width: 60%;
}

.obm-case__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100px;
    margin-inline: auto;
}


.obm-case__summary {
	font-size:2.2ch;
	line-height:2.7ch;
	font-weight:500;
}

.obm-client__name {
	text-align:center;
	font-size:3ch;
	font-weight:600;
}

li::marker {
content: ""; 
}

.obm-page-hero .obm-display {
    max-width: inherit; 
}

.obm-masthead__tagline, .obm-brand-band__tagline {
		font-size: 1.25rem;
}
.obm-kicker {
	font-size: 1.25rem;
}

.obm-contact-band__email {
	font-size: 2.5rem;	
border-bottom:none;
	letter-spacing:-0.04em!important;
	line-height:1em;
	margin-top:-0.23em;;
font-weight:500;
}

.obm-contact-band__aside,
.obm-brand-band__copy, .obm-masthead__tagline, .obm-masthead__strap {
	text-align:right;
}
.obm-brand-band__strap, .obm-masthead__strap {
	    max-width: 65ch;
	float:right;
	line-height:1.4em;
	font-size:1.2em;
}

.site-header__inner {
font-size:1em;
}

.obm-contact-band__email, .brushed-gold, .obm-wordmark--large, .current_page_item {
  display: inline-block;
  color: transparent;

  background-image:
    /* Irregular fine horizontal brush marks */
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 244, 185, 0.18) 1.2%,
      transparent 2.1%,
      transparent 6.4%,
      rgba(107, 69, 15, 0.10) 7.1%,
      transparent 8.5%,
      transparent 13.8%,
      rgba(255, 239, 166, 0.14) 14.5%,
      transparent 16.1%,
      transparent 23.6%,
      rgba(117, 75, 16, 0.08) 24.3%,
      transparent 26.2%,
      transparent 34.8%,
      rgba(255, 246, 194, 0.16) 35.5%,
      transparent 37.3%,
      transparent 46.1%,
      rgba(113, 72, 15, 0.10) 47%,
      transparent 49.2%,
      transparent 57.7%,
      rgba(255, 239, 166, 0.13) 58.5%,
      transparent 60.4%,
      transparent 69.8%,
      rgba(106, 67, 13, 0.09) 70.7%,
      transparent 72.4%,
      transparent 81.2%,
      rgba(255, 244, 185, 0.15) 82%,
      transparent 84.1%,
      transparent 92.8%,
      rgba(109, 68, 13, 0.10) 93.6%,
      transparent 95.2%,
      transparent 100%
    ),

    /* Soft vertical variation through the metal */
    linear-gradient(
      180deg,
      rgba(255, 235, 157, 0.10) 0%,
      rgba(126, 78, 14, 0.06) 18%,
      rgba(255, 242, 181, 0.12) 43%,
      rgba(120, 74, 12, 0.08) 68%,
      rgba(255, 225, 132, 0.08) 100%
    ),

    /* Main colour profile sampled from the source */
    linear-gradient(
      90deg,
      #b28530 0%,
      #dcb251 9%,
      #f0cd70 15%,
      #fde28a 21%,
      #f4ce6d 31%,
      #e4b859 43%,
      #d2a44a 55%,
      #c4963e 67%,
      #b98a34 80%,
      #ad7d2b 91%,
      #a67527 100%
    );

  /* Map the texture once across the element */
  background-size: 100% 100%;
  background-position: left top;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
	letter-spacing:-3px;
	font-weight:700;
}


.obm-page-hero__kicker, .obm-kicker {
	line-height:2.2ch;
		font-size: 2em;
	letter-spacing:0.05em;
}

.obm-muted {
	font-size:2.5ch;
}


.svgap-cover-small {
	margin-top:-80px;
	padding-left:50px;
	float:right;
	display:block;
	height:345px
}

/* Shown only on desktop and laptop screens. */
@media (max-width: 1023.98px), (pointer: coarse) {
	.obm-desktop-only, 
.svgap-cover-small { display: none !important; }
}


footer  a { 
    letter-spacing: 0em; 
}

.obm-res-card__title {
    font-size: 1.7em;
    margin-bottom: 0.5em;
}

.obm-feature__title--kicker {
	    font-size: 1.5em;
	    letter-spacing: 0em; 
}


.obm-masthead__tagline {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.obm-hero-band__inner {
    padding: 98px 0;	
}

.wp-singular .obm-contact-band {
	margin-top:50px;
}

/* 1. Sticky header currently eats anchor targets (#contact exists on every page). */
html { scroll-padding-top: 84px; }

@media (max-width: 640px) {
	/* 2. Biggest win. 40px gaps were designed for side-by-side columns; once
	      everything is one column that is pure dead space, eight times over. */
	.obm-grid { gap: 22px; }
	.obm-client { gap: 10px; }
	.obm-contact-band__email {
		font-size:1.8em;
	}
	#contact, .obm-contact-band__aside, .obm-brand-band__inner div, .obm-legal__inner  {
		padding:10px;
		text-align:center;
	}

	 .obm-legal__inner nav {
        padding: 10px;
		 margin-right:16px;
		 width:100%;
        text-align: center;
    }
	
	.site-header__inner {
		gap:0;
	}
	
	    .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 12px 0 0px;
    }
	
	.obm-more, .obm-display, .obm-container p, .obm-container, .obm-masthead__tagline {
		text-align:center;
	}
	
	/* 3. The eight client tiles are the longest run on the page. The 190px
	      floor and vertical centring exist to even up a 4-across row that no
	      longer exists at this width. */
	.obm-client .obm-card { min-height: 0; }
	.obm-card__body { padding: 12px 0; margin: 0; text-align: left; }

	/* 4. Reclaim horizontal room inside cards. */
	.obm-card { padding: 20px 18px; }
	.obm-play { padding: 24px 20px; }
	.obm-container { padding-left: 20px; padding-right: 20px; }

	/* 5. 340px is shallow next to a 650px desktop band; the photo barely reads. */
	.obm-hero-band { min-height: var(--obm-hero-h-mobile, 420px); }
	.obm-hero-band__inner { padding: 32px 0; }

	/* 6. Section rhythm, once everything is stacked. */
	:root { --obm-section-pad: 40px; }
	.obm-contact-band__inner { padding: 40px 0; gap: 22px; }

	/* 7. Stagger is wasted in a single column: the lower tiles finish
	      animating long before you scroll to them. */
	.obm-reveal--item { --obm-reveal-delay: 0ms !important; }

	/* 8. Uppercase at 0.14em tracking wraps badly in a 342px column. */
	.obm-kicker { letter-spacing: 0.1em; }
}

/* 9. Not mobile, but adjacent: the sidebar grid keeps a 200px first column
      all the way down to 641px, which is far too narrow for a section
      heading on a portrait tablet. */
@media (max-width: 900px) {
	.obm-grid--sidebar { grid-template-columns: 1fr; }
}


/* 1. Give tablets the menu button. The nav needs ~1045px to fit on one line;
      without this it wraps inside the sticky header and never gives the space
      back. This is the one that matters. */
@media (max-width: 1060px) {
	.site-nav__toggle { display: inline-block; }
	.site-nav__menu { display: none; width: 100%; }
	.site-nav__menu.is-open { display: block; }
	.site-header__inner { flex-wrap: wrap; }
	.site-nav { width: 100%; }
	.site-nav ul { flex-direction: column; gap: 0; padding: 8px 0 16px; }
	.site-nav li { border-top: 1px solid var(--obm-border); }
	.site-nav a { display: block; padding: 12px 4px; }
}

/* 2. Client tiles: four across only survives above 981px. At 1024 that is
      158px of text per card. */
@media (min-width: 981px) and (max-width: 1024px) {
	.obm-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 641px) and (max-width: 1024px) {
	/* 3. The sidebar grid keeps its narrow first column all the way down to
	      641px: a 28px heading in a 170px column at 768px, 37px in 234px at
	      1024px. It is the most cramped thing in the tablet range. */
	.obm-grid--sidebar { grid-template-columns: 1fr; gap: 24px; }

	/* 4. These three still sit side by side until 720px, out of step with the
	      splits and case studies, which stack at 820px. */
	.obm-masthead__inner { grid-template-columns: 1fr; gap: 28px; }
	.obm-contact-band__inner { grid-template-columns: 1fr; gap: 28px; }
	.obm-brand-band__inner { grid-template-columns: 1fr; gap: 24px; }

	/* 5. Spacing sized for a 1400px canvas. */
	.obm-grid { gap: 28px; }
	:root { --obm-section-pad: 56px; }

	/* 6. 650px tall on a 768px-wide portrait screen is a 1.18:1 crop, against
	      2.15:1 on desktop — a completely different shape of photograph. */
	.obm-hero-band {
		min-height: 520px;
		background-position: var(--obm-hero-pos-mobile, var(--obm-hero-pos, center center));
	}
	
	.site-header__inner {
		gap:0px;
	}
	
	    .site-nav ul {
				padding:0;
				padding-top:14px;
	}
	
	
	.obm-feature__title--kicker {
	    font-size: 1.5em;
	    letter-spacing: 0em; 
}

 .obm-contact-band__inner div, .obm-brand-band__inner div {
	text-align:center;
	 padding:0 18px;
}
	
	.obm-legal__inner  {
		padding: 20px;	
	}
	
}