/*
Theme Name: Ohm Law Firm
Theme URI: https://www.ohmlawfirm.com/
Author: Jump Start Marketing, Inc.
Author URI: https://jsmcorp.com/
Description: A professional, SEO- and AI-search-optimized WordPress theme built for Ohm Law Firm, P.A. Includes managed Practice Areas, Attorneys & Staff, Locations, Testimonials and FAQs, a full Theme Options panel, structured data (JSON-LD) for legal services, an llms.txt endpoint for AI crawlers, and a built-in lead capture system. Navy, white, black and gold palette with a Florida real-estate feel.
Version: 1.18.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ohm-law-firm
Tags: business, professional, law-firm, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--ohm-navy: #0b2545;
	--ohm-navy-700: #0f2f57;
	--ohm-navy-600: #143d6e;
	--ohm-navy-deep: #0b2545;

	/* The link blue is a navy, not a bright cyan-blue. It was #0067a4 through
	   1.7.4, which read as a web link rather than as part of the firm's palette
	   and pulled the whole page toward cyan. The wash keeps a blue cast because
	   it is mixed toward a pale blue rather than toward white — see ohm_tint(). */
	--ohm-blue: #1e3a66;
	--ohm-blue-dark: #092551;
	--ohm-blue-light: #e4eaf1;
	--ohm-gold: #c9a227;
	--ohm-gold-light: #e4c76b;
	--ohm-gold-dark: #8f6800; /* text-safe: 4.6:1 on the mist panels */
	--ohm-ink: #0e141b;
	--ohm-body: #384b5c;
	--ohm-muted: #5b6b7b; /* 4.9:1 on the palest panel; was #6b7c8d, 3.8–4.3:1 */
	--ohm-line: #dde5ed;
	--ohm-mist: #f4f7fa;
	--ohm-white: #ffffff;

	--ohm-font-heading: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--ohm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ohm-font-script: "Dancing Script", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;

	--ohm-radius: 6px;
	--ohm-radius-lg: 12px;
	--ohm-shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.08), 0 1px 2px rgba(11, 37, 69, 0.06);
	--ohm-shadow: 0 8px 24px rgba(11, 37, 69, 0.08), 0 2px 6px rgba(11, 37, 69, 0.05);
	--ohm-shadow-lg: 0 24px 60px rgba(11, 37, 69, 0.14);

	--ohm-container: 1180px;
	--ohm-container-narrow: 820px;
	--ohm-gutter: 24px;
	--ohm-section-y: 46px;

	--ohm-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

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

body {
	margin: 0;
	font-family: var(--ohm-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ohm-body);
	background: var(--ohm-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ohm-font-heading);
	color: var(--ohm-navy);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 600;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.25rem);
}
h2 {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}
h3 {
	font-size: clamp(1.28rem, 2.1vw, 1.6rem);
}
h4 {
	font-size: 1.16rem;
}
h5 {
	font-size: 1.03rem;
}
h6 {
	font-size: 0.94rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--ohm-font-body);
	font-weight: 700;
}

p {
	margin: 0 0 1.25em;
}

a {
	color: var(--ohm-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--ohm-transition);
}

a:hover,
a:focus {
	color: var(--ohm-navy);
}

:focus-visible {
	outline: 3px solid var(--ohm-gold);
	outline-offset: 2px;
	border-radius: 2px;
	/* Two tones, so the ring shows on every background: the gold reads on
	   navy, the navy hugging the element reads on white, where gold alone
	   is only 2.4:1. */
	box-shadow: 0 0 0 2px var(--ohm-navy-deep, #0b2545);
}

ul,
ol {
	padding-left: 1.35em;
	margin: 0 0 1.25em;
}

li {
	margin-bottom: 0.5em;
}

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.75rem;
	border-left: 4px solid var(--ohm-gold);
	background: var(--ohm-mist);
	font-family: var(--ohm-font-heading);
	font-size: 1.1rem;
	color: var(--ohm-navy);
	font-style: italic;
}

blockquote p:last-child {
	margin-bottom: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--ohm-line);
	margin: 2.5rem 0;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	background: var(--ohm-mist);
	border-radius: 4px;
}

code {
	padding: 0.15em 0.4em;
}

pre {
	padding: 1.25rem;
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: 0.96rem;
}

th,
td {
	border: 1px solid var(--ohm-line);
	padding: 0.7rem 0.9rem;
	text-align: left;
}

th {
	background: var(--ohm-mist);
	color: var(--ohm-navy);
	font-weight: 700;
}

/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 9999;
	background: var(--ohm-gold);
	color: var(--ohm-ink);
	padding: 12px 20px;
	font-weight: 700;
	border-radius: 0 0 var(--ohm-radius) var(--ohm-radius);
	transition: top var(--ohm-transition);
}

.skip-link:focus {
	top: 0;
	color: var(--ohm-ink);
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.ohm-container {
	width: 100%;
	max-width: var(--ohm-container);
	margin: 0 auto;
	padding: 0 var(--ohm-gutter);
}

.ohm-container--narrow {
	max-width: var(--ohm-container-narrow);
}

.ohm-container--wide {
	max-width: 1360px;
}

.ohm-section {
	padding: var(--ohm-section-y) 0;
	position: relative;
}

.ohm-section--tight {
	padding: 32px 0;
}

.ohm-section--mist {
	background: var(--ohm-mist);
}

.ohm-section--navy {
	background: var(--ohm-navy);
	color: rgba(255, 255, 255, 0.86);
}

.ohm-section--navy h1,
.ohm-section--navy h2,
.ohm-section--navy h3,
.ohm-section--navy h4 {
	color: var(--ohm-white);
}

.ohm-section--navy a {
	color: var(--ohm-gold-light);
}

.ohm-grid {
	display: grid;
	gap: 28px;
}

.ohm-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ohm-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ohm-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The approved comp runs much tighter than this did: 48px under every heading
   plus 88px of section padding stacked into bands of dead white between one
   section and the next. */
.ohm-section-head {
	max-width: 760px;
	margin: 0 0 24px;
}

.ohm-section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ohm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ohm-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ohm-gold-dark);
	margin: 0 0 14px;
}

.ohm-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--ohm-gold);
	display: inline-block;
}

.ohm-section-head--center .ohm-eyebrow::before {
	display: none;
}

.ohm-section--navy .ohm-eyebrow {
	color: var(--ohm-gold-light);
}

.ohm-lead {
	font-size: 1.14rem;
	color: var(--ohm-muted);
	line-height: 1.75;
}

.ohm-section--navy .ohm-lead {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.ohm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: var(--ohm-radius);
	font-family: var(--ohm-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--ohm-transition);
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	flex: none;
}

.ohm-btn--primary {
	background: var(--ohm-navy);
	color: var(--ohm-white);
	border-color: var(--ohm-navy);
}

.ohm-btn--primary:hover,
.ohm-btn--primary:focus {
	background: var(--ohm-navy-600);
	border-color: var(--ohm-navy-600);
	color: var(--ohm-white);
	transform: translateY(-2px);
	box-shadow: var(--ohm-shadow);
}

.ohm-btn--gold {
	background: var(--ohm-gold);
	color: var(--ohm-ink);
	border-color: var(--ohm-gold);
}

.ohm-btn--gold:hover,
.ohm-btn--gold:focus {
	background: var(--ohm-gold-light);
	border-color: var(--ohm-gold-light);
	color: var(--ohm-ink);
	transform: translateY(-2px);
	box-shadow: var(--ohm-shadow);
}

/* Solid blue secondary button (used beside the gold CTA on light backgrounds). */
.ohm-btn--outline {
	background: var(--ohm-blue);
	color: var(--ohm-white);
	border-color: var(--ohm-blue);
}

.ohm-btn--outline:hover,
.ohm-btn--outline:focus {
	background: var(--ohm-blue-dark);
	border-color: var(--ohm-blue-dark);
	color: var(--ohm-white);
	transform: translateY(-2px);
	box-shadow: var(--ohm-shadow);
}

/* Solid white button — sits on the navy hero, CTA band and sidebar panels. */
.ohm-btn--ghost {
	background: var(--ohm-white);
	color: var(--ohm-blue);
	border-color: var(--ohm-white);
}

.ohm-btn--ghost:hover,
.ohm-btn--ghost:focus {
	background: var(--ohm-blue-light);
	border-color: var(--ohm-blue-light);
	color: var(--ohm-navy);
	transform: translateY(-2px);
	box-shadow: var(--ohm-shadow);
}

/* `--hollow` is defined once, in section 20 beside the help grid it belongs to.
   It used to be declared here as well; two identical copies of a rule is how a
   later edit ends up landing on the one that loses. */

.ohm-btn--sm {
	padding: 10px 20px;
	font-size: 0.86rem;
}

.ohm-btn--block {
	width: 100%;
}

.ohm-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.ohm-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--ohm-blue);
}

.ohm-textlink::after {
	content: "\2192";
	transition: transform var(--ohm-transition);
}

.ohm-textlink:hover::after,
.ohm-textlink:focus::after {
	transform: translateX(4px);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.ohm-topbar {
	background: var(--ohm-navy);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.84rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.ohm-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
	flex-wrap: wrap;
}

.ohm-topbar__list {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohm-topbar__list li {
	margin: 0;
}

.ohm-topbar a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ohm-topbar a:hover,
.ohm-topbar a:focus {
	color: var(--ohm-gold-light);
}

.ohm-topbar svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: none;
}

.ohm-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--ohm-white);
	border-bottom: 1px solid var(--ohm-line);
	transition: box-shadow var(--ohm-transition);
}

.ohm-header.is-stuck {
	box-shadow: var(--ohm-shadow-sm);
}

.ohm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 84px;
}

.ohm-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	flex: none;
	max-width: 340px;
}

.ohm-brand img {
	max-height: 62px;
	width: auto;
}

.ohm-brand__mark {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 4px;
	background: var(--ohm-navy);
	color: var(--ohm-gold);
	display: grid;
	place-items: center;
	font-family: var(--ohm-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ohm-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.ohm-brand__name {
	font-family: var(--ohm-font-heading);
	font-size: 1.24rem;
	font-weight: 600;
	color: var(--ohm-navy);
}

.ohm-brand__tag {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ohm-gold-dark);
	font-weight: 700;
	margin-top: 3px;
}

.ohm-header__right {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}

/* Primary navigation */

.ohm-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ohm-nav li {
	margin: 0;
	position: relative;
}

.ohm-nav a {
	display: block;
	padding: 12px 14px;
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--ohm-navy);
	text-decoration: none;
	border-radius: var(--ohm-radius);
	white-space: nowrap;
}

.ohm-nav a:hover,
.ohm-nav a:focus,
.ohm-nav .current-menu-item > a,
.ohm-nav .current-menu-ancestor > a,
.ohm-nav .current_page_parent > a {
	color: var(--ohm-blue);
	background: var(--ohm-blue-light);
}

.ohm-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.7;
}

.ohm-nav .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 250px;
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-top: 3px solid var(--ohm-gold);
	border-radius: var(--ohm-radius);
	box-shadow: var(--ohm-shadow);
	padding: 8px;
	display: block;
	flex-direction: column;
	align-items: stretch;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--ohm-transition);
	z-index: 60;
}

.ohm-nav li:hover > .sub-menu,
.ohm-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ohm-nav .sub-menu a {
	padding: 10px 14px;
	font-weight: 500;
	white-space: normal;
}

.ohm-nav .sub-menu .sub-menu {
	top: -9px;
	left: calc(100% + 4px);
}

.ohm-nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius);
	background: var(--ohm-white);
	cursor: pointer;
	padding: 0;
	place-items: center;
}

.ohm-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ohm-navy);
	position: relative;
	transition: background var(--ohm-transition);
}

.ohm-nav-toggle span::before,
.ohm-nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--ohm-navy);
	transition: transform var(--ohm-transition);
}

.ohm-nav-toggle span::before {
	top: -7px;
}
.ohm-nav-toggle span::after {
	top: 7px;
}

.ohm-nav-toggle[aria-expanded="true"] span {
	background: transparent;
}

.ohm-nav-toggle[aria-expanded="true"] span::before {
	transform: translateY(7px) rotate(45deg);
}

.ohm-nav-toggle[aria-expanded="true"] span::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.ohm-hero {
	position: relative;
	background: var(--ohm-navy);
	color: var(--ohm-white);
	overflow: hidden;
	isolation: isolate;
}

.ohm-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ohm-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ohm-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(11, 37, 69, 0.94) 0%, rgba(11, 37, 69, 0.82) 45%, rgba(11, 37, 69, 0.55) 100%);
}

.ohm-hero__inner {
	padding: 110px 0 120px;
	max-width: 720px;
}

.ohm-hero h1 {
	color: var(--ohm-white);
	margin-bottom: 20px;
}

.ohm-hero h1 em {
	font-style: normal;
	color: var(--ohm-gold-light);
}

.ohm-hero__sub {
	font-size: 1.18rem;
	color: rgba(255, 255, 255, 0.88);
	max-width: 600px;
	margin-bottom: 32px;
}

.ohm-hero__eyebrow {
	color: var(--ohm-gold-light);
}

.ohm-hero__eyebrow::before {
	background: var(--ohm-gold-light);
}

.ohm-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	padding-left: 0;
}

.ohm-hero__trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.92rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.ohm-hero__trust svg {
	width: 18px;
	height: 18px;
	fill: var(--ohm-gold);
	flex: none;
}

/* Page hero (interior pages) */

.ohm-pagehero {
	position: relative;
	background: var(--ohm-navy);
	color: var(--ohm-white);
	padding: 62px 0 58px;
	overflow: hidden;
	isolation: isolate;
}

.ohm-pagehero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ohm-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohm-pagehero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, rgba(11, 37, 69, 0.95), rgba(11, 37, 69, 0.78));
}

.ohm-pagehero h1 {
	color: var(--ohm-white);
	margin-bottom: 12px;
	max-width: 900px;
}

.ohm-pagehero__sub {
	color: rgba(255, 255, 255, 0.82);
	max-width: 720px;
	margin: 0;
	font-size: 1.06rem;
}

/* ==========================================================================
   8. Breadcrumbs
   ========================================================================== */

.ohm-breadcrumbs {
	font-size: 0.82rem;
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.66);
}

.ohm-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.ohm-breadcrumbs li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ohm-breadcrumbs li:not(:last-child)::after {
	content: "/";
	opacity: 0.5;
}

.ohm-breadcrumbs a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.ohm-breadcrumbs a:hover,
.ohm-breadcrumbs a:focus {
	color: var(--ohm-gold-light);
	text-decoration: underline;
}

/* ==========================================================================
   9. Cards
   ========================================================================== */

.ohm-card {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	transition: all var(--ohm-transition);
	position: relative;
	overflow: hidden;
	height: 100%;
}

.ohm-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ohm-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ohm-transition);
}

.ohm-card:hover,
.ohm-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--ohm-shadow);
	border-color: transparent;
}

.ohm-card:hover::before,
.ohm-card:focus-within::before {
	transform: scaleX(1);
}

.ohm-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* Card with a featured image: the image runs edge to edge at the top. */
.ohm-card--media {
	padding: 0;
}

.ohm-card--media .ohm-card__body {
	padding: 28px;
}

.ohm-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ohm-blue-light);
	line-height: 0;
}

.ohm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.ohm-card--media:hover .ohm-card__media img,
.ohm-card--media:focus-within .ohm-card__media img {
	transform: scale(1.04);
}

.ohm-card__icon {
	width: 54px;
	height: 54px;
	border-radius: var(--ohm-radius);
	background: var(--ohm-blue-light);
	color: var(--ohm-navy);
	display: grid;
	place-items: center;
	margin-bottom: 20px;
	flex: none;
}

.ohm-card__icon svg,
.ohm-card__icon img {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.ohm-card h3 {
	margin-bottom: 10px;
	font-size: 1.28rem;
}

.ohm-card h3 a {
	color: inherit;
	text-decoration: none;
}

.ohm-card p {
	color: var(--ohm-muted);
	font-size: 0.97rem;
	margin-bottom: 18px;
}

.ohm-card__foot {
	margin-top: auto;
}

.ohm-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	font-size: 0.93rem;
}

.ohm-card__list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
	color: var(--ohm-body);
}

.ohm-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--ohm-gold);
	border-bottom: 2px solid var(--ohm-gold);
	transform: rotate(-45deg);
}

/* Stat strip */

.ohm-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
}

.ohm-stat {
	background: var(--ohm-navy);
	padding: 30px 24px;
	text-align: center;
}

.ohm-stat__num {
	font-family: var(--ohm-font-heading);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--ohm-gold);
	font-weight: 600;
	display: block;
	margin-bottom: 8px;
}

.ohm-stat__label {
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   9b. Offices — the two-location chooser
   ========================================================================== */

:root {
	--ohm-field: #3f6b3a;
	--ohm-field-dark: #2d4d29;
	--ohm-field-light: #eef4ec;
}

.ohm-offices__grid {
	align-items: stretch;
}

.ohm-office {
	--office-accent: var(--ohm-navy);
	--office-accent-dark: var(--ohm-navy-700);
	--office-wash: var(--ohm-blue-light);

	display: flex;
	flex-direction: column;
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	height: 100%;
	position: relative;
	transition: transform var(--ohm-transition), box-shadow var(--ohm-transition);
}

.ohm-office--green {
	--office-accent: var(--ohm-field);
	--office-accent-dark: var(--ohm-field-dark);
	--office-wash: var(--ohm-field-light);
}

.ohm-office--gold {
	--office-accent: var(--ohm-gold-dark);
	--office-accent-dark: var(--ohm-gold-dark);
	--office-wash: #faf3dd;
}

.ohm-office::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--office-accent);
	z-index: 3;
}

.ohm-office:hover,
.ohm-office:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--ohm-shadow-lg);
}

/* The media wrapper deliberately does NOT clip — the round badge hangs past
   its bottom edge. The inner frame is what crops the photo. */
.ohm-office__media {
	position: relative;
	overflow: visible;
}

.ohm-office__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--office-wash);
	line-height: 0;
}

.ohm-office__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.ohm-office:hover .ohm-office__frame img {
	transform: scale(1.05);
}

.ohm-office__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.ohm-office__placeholder svg {
	width: 76px;
	height: 76px;
	fill: var(--office-accent);
	opacity: 0.28;
}

.ohm-office__badge {
	position: absolute;
	left: 24px;
	bottom: -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--office-accent);
	border: 3px solid var(--ohm-white);
	z-index: 4;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 14px rgba(11, 37, 69, 0.24);
	box-sizing: content-box;
}

.ohm-office__badge svg {
	width: 26px;
	height: 26px;
	fill: #fff;
}

.ohm-office__body {
	padding: 40px 26px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ohm-office__region {
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--office-accent);
	margin: 0 0 6px;
}

.ohm-office__name {
	font-size: 1.5rem;
	margin-bottom: 8px;
}

.ohm-office__name a {
	color: inherit;
	text-decoration: none;
}

.ohm-office__tagline {
	color: var(--ohm-muted);
	font-size: 0.98rem;
	margin-bottom: 20px;
}

.ohm-office__facts {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	border-top: 1px solid var(--ohm-line);
	padding-top: 18px;
}

.ohm-office__facts li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 12px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ohm-office__facts li:last-child {
	margin-bottom: 0;
}

.ohm-office__facts svg {
	width: 18px;
	height: 18px;
	fill: var(--office-accent);
	flex: none;
	margin-top: 3px;
}

.ohm-office__facts a {
	color: var(--ohm-navy);
	font-weight: 600;
	text-decoration: none;
}

.ohm-office__facts a:hover {
	color: var(--office-accent);
}

.ohm-office__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
}

.ohm-office__cta {
	background: var(--office-accent);
	border-color: var(--office-accent);
	color: #fff;
}

.ohm-office__cta:hover,
.ohm-office__cta:focus {
	background: var(--office-accent-dark);
	border-color: var(--office-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--ohm-shadow);
}

.ohm-office__more {
	margin-top: 16px;
	color: var(--office-accent);
}

/* Compact office list — footer, contact page, home contact block */

.ohm-officelist {
	display: grid;
	gap: 22px;
}

.ohm-officelist--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 8px;
}

.ohm-officelist__item {
	border-left: 3px solid var(--ohm-navy);
	padding-left: 16px;
}

.ohm-officelist__item--green {
	border-left-color: var(--ohm-field);
}

.ohm-officelist__item--gold {
	border-left-color: var(--ohm-gold);
}

.ohm-officelist--footer .ohm-officelist__item--gold {
	border-left-color: var(--ohm-gold-light);
}

.ohm-officelist__name {
	font-size: 1.06rem;
	margin-bottom: 6px;
}

.ohm-officelist__name a {
	color: inherit;
	text-decoration: none;
}

.ohm-officelist address {
	font-style: normal;
	font-size: 0.94rem;
	line-height: 1.55;
	margin-bottom: 8px;
}

.ohm-officelist address a {
	text-decoration: none;
	color: inherit;
}

.ohm-officelist ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.94rem;
}

.ohm-officelist li {
	margin-bottom: 4px;
}

.ohm-officelist__hours {
	color: var(--ohm-muted);
	font-size: 0.88rem;
}

/* Footer variant sits on the dark ground */

.ohm-officelist--footer .ohm-officelist__name,
.ohm-officelist--footer .ohm-officelist__name a {
	color: #fff;
	font-family: var(--ohm-font-heading);
	font-size: 1rem;
}

.ohm-officelist--footer .ohm-officelist__item {
	border-left-color: var(--ohm-gold);
}

.ohm-officelist--footer .ohm-officelist__item--green {
	border-left-color: #7ba374;
}

.ohm-officelist--footer address,
.ohm-officelist--footer .ohm-officelist__hours {
	color: rgba(255, 255, 255, 0.6);
}

.ohm-cta__offices {
	margin-top: 10px;
	font-size: 0.9rem;
	color: var(--ohm-gold-light) !important;
	font-weight: 600;
}

.ohm-person__office {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ohm-navy);
	background: var(--ohm-blue-light);
	border-radius: 100px;
	padding: 4px 12px 4px 9px;
	margin: 0 0 12px;
}

.ohm-person__office--green {
	color: var(--ohm-field-dark);
	background: var(--ohm-field-light);
}

.ohm-person__office--gold {
	color: var(--ohm-gold-dark);
	background: #faf3dd;
}

.ohm-person__office svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

/* Office picker on the contact form */

.ohm-officepick {
	border: 0;
	padding: 0;
	margin: 0 0 6px;
}

.ohm-officepick legend {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ohm-navy);
	margin-bottom: 10px;
	padding: 0;
}

.ohm-officepick__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ohm-officepick__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 2px solid var(--ohm-line);
	border-radius: var(--ohm-radius);
	cursor: pointer;
	transition: all var(--ohm-transition);
	background: var(--ohm-white);
	margin: 0;
}

.ohm-officepick__option:hover {
	border-color: var(--ohm-blue);
}

.ohm-officepick__option input {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--ohm-blue);
	margin: 0;
}

.ohm-officepick__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.ohm-officepick__text strong {
	color: var(--ohm-navy);
	font-size: 0.98rem;
}

.ohm-officepick__text span {
	font-size: 0.83rem;
	color: var(--ohm-muted);
	font-weight: 500;
}

.ohm-officepick__option:has(input:checked) {
	border-color: var(--ohm-blue);
	background: var(--ohm-blue-light);
	box-shadow: 0 0 0 3px rgba(30, 58, 102, 0.14);
}

.ohm-officepick__option--green:has(input:checked) {
	border-color: var(--ohm-field);
	background: var(--ohm-field-light);
	box-shadow: 0 0 0 3px rgba(63, 107, 58, 0.14);
}

.ohm-officepick__option--gold:has(input:checked) {
	border-color: var(--ohm-gold-dark);
	background: #faf3dd;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.ohm-officepick__option:focus-within {
	border-color: var(--ohm-blue);
}

.ohm-topbar__city {
	opacity: 0.75;
	margin-right: 2px;
}

/* ==========================================================================
   10. People (attorneys & staff)
   ========================================================================== */

.ohm-person {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all var(--ohm-transition);
	height: 100%;
}

.ohm-person:hover {
	box-shadow: var(--ohm-shadow);
	transform: translateY(-4px);
}

.ohm-person__photo {
	aspect-ratio: 4 / 5;
	background: var(--ohm-blue-light);
	position: relative;
	overflow: hidden;
}

.ohm-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.ohm-person__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--ohm-font-heading);
	font-size: 3rem;
	color: var(--ohm-navy);
	opacity: 0.35;
}

.ohm-person__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ohm-person__name {
	font-size: 1.22rem;
	margin-bottom: 4px;
}

.ohm-person__name a {
	color: inherit;
	text-decoration: none;
}

.ohm-person__role {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ohm-gold-dark);
	font-weight: 700;
	margin-bottom: 14px;
}

.ohm-person__excerpt {
	font-size: 0.95rem;
	color: var(--ohm-muted);
	margin-bottom: 16px;
}

.ohm-person__meta {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 0.9rem;
}

.ohm-person__meta li {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
}

.ohm-person__meta strong {
	color: var(--ohm-navy);
	flex: none;
}

.ohm-person__foot {
	margin-top: auto;
}

/* Single attorney layout */

.ohm-bio {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 56px;
	align-items: start;
}

.ohm-bio__aside {
	position: sticky;
	top: 120px;
}

.ohm-bio__photo {
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ohm-line);
	margin-bottom: 22px;
	background: var(--ohm-blue-light);
	aspect-ratio: 4 / 5;
}

.ohm-bio__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.ohm-bio__card {
	background: var(--ohm-mist);
	border-radius: var(--ohm-radius-lg);
	padding: 24px;
	border: 1px solid var(--ohm-line);
}

.ohm-bio__card h4,
.ohm-bio__card .ohm-bio__cardhead {
	margin-bottom: 14px;
	line-height: 1.4;
	font-weight: 700;
	font-family: var(--ohm-font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ohm-gold-dark);
}

.ohm-bio__card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	font-size: 0.94rem;
}

.ohm-bio__card li {
	padding: 8px 0;
	border-bottom: 1px solid var(--ohm-line);
	margin: 0;
}

.ohm-bio__card li:last-child {
	border-bottom: 0;
}

/* ==========================================================================
   11. Split / feature sections
   ========================================================================== */

.ohm-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
	align-items: center;
}

.ohm-split--reverse .ohm-split__media {
	order: 2;
}

.ohm-split__media {
	position: relative;
}

.ohm-split__media img {
	border-radius: var(--ohm-radius-lg);
	width: 100%;
	box-shadow: var(--ohm-shadow);
}

.ohm-split__badge {
	position: absolute;
	right: -18px;
	bottom: -18px;
	background: var(--ohm-gold);
	color: var(--ohm-ink);
	padding: 20px 26px;
	border-radius: var(--ohm-radius-lg);
	box-shadow: var(--ohm-shadow);
	max-width: 230px;
}

.ohm-split__badge strong {
	display: block;
	font-family: var(--ohm-font-heading);
	font-size: 1.6rem;
	line-height: 1.1;
}

.ohm-split__badge span {
	font-size: 0.84rem;
	font-weight: 600;
}

.ohm-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}

.ohm-checklist li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
	font-size: 1rem;
}

.ohm-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ohm-blue-light);
}

.ohm-checklist li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 9px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--ohm-navy);
	border-bottom: 2px solid var(--ohm-navy);
	transform: rotate(-45deg);
}

.ohm-section--navy .ohm-checklist li::before {
	background: rgba(201, 162, 39, 0.22);
}

.ohm-section--navy .ohm-checklist li::after {
	border-color: var(--ohm-gold);
}

/* Process steps */

.ohm-steps {
	counter-reset: ohmstep;
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ohm-step {
	position: relative;
	padding-top: 22px;
}

.ohm-step::before {
	counter-increment: ohmstep;
	content: counter(ohmstep, decimal-leading-zero);
	font-family: var(--ohm-font-heading);
	font-size: 2.6rem;
	color: var(--ohm-gold);
	opacity: 0.5;
	line-height: 1;
	display: block;
	margin-bottom: 12px;
}

.ohm-step h3 {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.ohm-step p {
	font-size: 0.95rem;
	color: var(--ohm-muted);
	margin: 0;
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.ohm-quote {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	padding: 32px 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.ohm-quote__stars {
	color: var(--ohm-gold);
	letter-spacing: 3px;
	margin-bottom: 16px;
	font-size: 1rem;
}

.ohm-quote__text {
	font-family: var(--ohm-font-heading);
	font-size: 1.05rem;
	color: var(--ohm-navy);
	line-height: 1.65;
	margin-bottom: 22px;
}

.ohm-quote__who {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--ohm-line);
	padding-top: 18px;
}

.ohm-quote__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ohm-navy);
	color: var(--ohm-gold);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.95rem;
	flex: none;
}

.ohm-quote__name {
	font-weight: 700;
	color: var(--ohm-navy);
	font-size: 0.95rem;
	line-height: 1.3;
}

.ohm-quote__loc {
	font-size: 0.83rem;
	color: var(--ohm-muted);
}

/* ==========================================================================
   13. FAQ / accordion
   ========================================================================== */

.ohm-faq {
	border-top: 1px solid var(--ohm-line);
}

.ohm-faq__item {
	border-bottom: 1px solid var(--ohm-line);
}

.ohm-faq__q {
	width: 100%;
	background: none;
	border: 0;
	text-align: left;
	padding: 22px 48px 22px 0;
	font-family: var(--ohm-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ohm-navy);
	cursor: pointer;
	position: relative;
	line-height: 1.4;
}

.ohm-faq__q::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--ohm-gold);
	border-bottom: 2px solid var(--ohm-gold);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--ohm-transition);
}

.ohm-faq__q[aria-expanded="true"]::after {
	transform: translateY(-30%) rotate(-135deg);
}

.ohm-faq__a {
	padding: 0 40px 24px 0;
	color: var(--ohm-body);
}

.ohm-faq__a[hidden] {
	display: none;
}

.ohm-faq__a > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   14. Answer box (AI / featured snippet optimization)
   ========================================================================== */

.ohm-answer {
	background: var(--ohm-blue-light);
	border-left: 4px solid var(--ohm-navy);
	border-radius: 0 var(--ohm-radius) var(--ohm-radius) 0;
	padding: 24px 28px;
	margin: 0 0 34px;
}

.ohm-answer__label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--ohm-navy);
	margin-bottom: 8px;
	display: block;
}

.ohm-answer p {
	margin: 0;
	font-size: 1.06rem;
	color: var(--ohm-navy);
	line-height: 1.65;
}

.ohm-keyfacts {
	background: var(--ohm-mist);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	padding: 24px 28px;
	margin: 34px 0;
}

.ohm-keyfacts h2,
.ohm-keyfacts h3 {
	font-size: 1.05rem;
	margin-bottom: 14px;
	font-family: var(--ohm-font-body);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ohm-gold-dark);
	font-weight: 700;
}

.ohm-keyfacts ul {
	margin: 0;
	padding-left: 1.2em;
}

.ohm-keyfacts li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   15. Forms & lead capture
   ========================================================================== */

.ohm-form {
	display: grid;
	gap: 18px;
}

.ohm-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ohm-field label,
.ohm-form label {
	display: block;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ohm-navy);
	margin-bottom: 7px;
	letter-spacing: 0.01em;
}

.ohm-field .req {
	color: #c0392b;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius);
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--ohm-ink);
	background: var(--ohm-white);
	transition: border-color var(--ohm-transition), box-shadow var(--ohm-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--ohm-blue);
	box-shadow: 0 0 0 3px rgba(30, 58, 102, 0.14);
	outline: none;
}

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

.ohm-form__consent {
	font-size: 0.82rem;
	color: var(--ohm-muted);
	line-height: 1.6;
}

.ohm-form__hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

.ohm-form__msg {
	padding: 14px 18px;
	border-radius: var(--ohm-radius);
	font-size: 0.94rem;
	display: none;
}

.ohm-form__msg.is-visible {
	display: block;
}

.ohm-form__msg.is-success {
	background: #e6f4ea;
	color: #17603a;
	border: 1px solid #b7e0c6;
}

.ohm-form__msg.is-error {
	background: #fdecea;
	color: #a02420;
	border: 1px solid #f5c2be;
}

.ohm-form button[type="submit"].is-loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Contact card panel */

.ohm-contact-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 56px;
	align-items: start;
}

.ohm-formpanel {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-top: 4px solid var(--ohm-gold);
	border-radius: var(--ohm-radius-lg);
	padding: 34px;
	box-shadow: var(--ohm-shadow);
}

.ohm-formpanel h2,
.ohm-formpanel h3 {
	font-size: 1.4rem;
	margin-bottom: 6px;
}

.ohm-formpanel__sub {
	font-size: 0.95rem;
	color: var(--ohm-muted);
	margin-bottom: 24px;
}

.ohm-infolist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ohm-infolist li {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--ohm-line);
	margin: 0;
}

.ohm-infolist li:first-child {
	padding-top: 0;
}

.ohm-infolist__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--ohm-radius);
	background: var(--ohm-blue-light);
	color: var(--ohm-navy);
	display: grid;
	place-items: center;
	flex: none;
}

.ohm-infolist__icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.ohm-infolist__label {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ohm-muted);
	font-weight: 700;
	margin-bottom: 3px;
}

.ohm-infolist__value {
	font-size: 1.02rem;
	color: var(--ohm-navy);
	font-weight: 600;
}

.ohm-infolist__value a {
	color: inherit;
	text-decoration: none;
}

.ohm-infolist__value a:hover {
	color: var(--ohm-blue);
}

.ohm-map {
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ohm-line);
	line-height: 0;
	background: var(--ohm-mist);
}

.ohm-map iframe {
	width: 100%;
	min-height: 400px;
	border: 0;
}

/* ==========================================================================
   16. CTA band
   ========================================================================== */

.ohm-cta {
	background: var(--ohm-navy);
	color: var(--ohm-white);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ohm-cta__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ohm-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohm-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(11, 37, 69, 0.96), rgba(11, 37, 69, 0.86));
}

.ohm-cta__inner {
	padding: 70px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.ohm-cta h2 {
	color: var(--ohm-white);
	margin-bottom: 10px;
	max-width: 640px;
}

.ohm-cta p {
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	max-width: 620px;
}

/* ==========================================================================
   17. Content / entries
   ========================================================================== */

.ohm-entry {
	max-width: 100%;
}

.ohm-entry > *:last-child {
	margin-bottom: 0;
}

.ohm-entry h2 {
	margin-top: 2em;
}

.ohm-entry h3 {
	margin-top: 1.6em;
}

.ohm-entry img {
	border-radius: var(--ohm-radius);
}

.ohm-entry .alignleft {
	float: left;
	margin: 0.4em 1.75em 1.25em 0;
}

.ohm-entry .alignright {
	float: right;
	margin: 0.4em 0 1.25em 1.75em;
}

.ohm-entry .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.ohm-entry .alignwide {
	width: calc(100% + 120px);
	max-width: calc(100% + 120px);
	margin-left: -60px;
}

.ohm-entry ul,
.ohm-entry ol {
	padding-left: 1.4em;
}

.ohm-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
}

.ohm-sidebar {
	position: sticky;
	top: 120px;
}

.ohm-widget {
	background: var(--ohm-mist);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	padding: 24px;
	margin-bottom: 24px;
}

.ohm-widget__title,
.ohm-widget .widget-title {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ohm-gold-dark);
	font-family: var(--ohm-font-body);
	font-weight: 700;
	margin-bottom: 16px;
}

.ohm-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.95rem;
}

.ohm-widget li {
	padding: 9px 0;
	border-bottom: 1px solid var(--ohm-line);
	margin: 0;
}

.ohm-widget li:last-child {
	border-bottom: 0;
}

.ohm-widget a {
	text-decoration: none;
	color: var(--ohm-navy);
	font-weight: 500;
}

.ohm-widget a:hover {
	color: var(--ohm-blue);
}

/* Post list */

.ohm-postcard {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: all var(--ohm-transition);
}

.ohm-postcard:hover {
	box-shadow: var(--ohm-shadow);
	transform: translateY(-4px);
}

.ohm-postcard__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ohm-blue-light);
}

.ohm-postcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.ohm-postcard:hover .ohm-postcard__thumb img {
	transform: scale(1.04);
}

.ohm-postcard__body {
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ohm-postcard h3 {
	font-size: 1.18rem;
	margin-bottom: 10px;
}

.ohm-postcard h3 a {
	color: inherit;
	text-decoration: none;
}

.ohm-meta {
	font-size: 0.8rem;
	color: var(--ohm-muted);
	letter-spacing: 0.04em;
	margin-bottom: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.ohm-meta a {
	color: var(--ohm-muted);
	text-decoration: none;
}

.ohm-meta__sep {
	opacity: 0.5;
}

.ohm-postcard p {
	font-size: 0.95rem;
	color: var(--ohm-muted);
	margin-bottom: 18px;
}

.ohm-postcard__foot {
	margin-top: auto;
}

/* Pagination */

.ohm-pagination {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}

.ohm-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	margin: 0 4px;
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius);
	text-decoration: none;
	color: var(--ohm-navy);
	font-weight: 600;
	font-size: 0.92rem;
	background: var(--ohm-white);
}

.ohm-pagination .page-numbers:hover,
.ohm-pagination .page-numbers.current {
	background: var(--ohm-navy);
	color: var(--ohm-white);
	border-color: var(--ohm-navy);
}

/* Post navigation */

.ohm-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--ohm-line);
}

.ohm-postnav a {
	display: block;
	padding: 18px 22px;
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius);
	text-decoration: none;
	transition: all var(--ohm-transition);
}

.ohm-postnav a:hover {
	border-color: var(--ohm-navy);
	background: var(--ohm-mist);
}

.ohm-postnav__label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ohm-gold-dark);
	font-weight: 700;
	display: block;
	margin-bottom: 6px;
}

.ohm-postnav__title {
	color: var(--ohm-navy);
	font-weight: 600;
	font-family: var(--ohm-font-heading);
}

.ohm-postnav__next {
	text-align: right;
}

/* Comments */

.ohm-comments {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--ohm-line);
}

.ohm-comments ol.comment-list {
	list-style: none;
	padding: 0;
}

.ohm-comments .comment-body {
	padding: 22px 0;
	border-bottom: 1px solid var(--ohm-line);
}

.ohm-comments .children {
	list-style: none;
	padding-left: 32px;
}

/* ==========================================================================
   18. Footer
   ========================================================================== */

.ohm-footer {
	background: var(--ohm-ink);
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.94rem;
}

.ohm-footer__top {
	padding: 68px 0 48px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 44px;
}

.ohm-footer h4,
.ohm-footer .ohm-footer__heading {
	line-height: 1.4;
	color: var(--ohm-white);
	font-family: var(--ohm-font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 20px;
	font-weight: 700;
}

.ohm-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ohm-footer li {
	margin-bottom: 11px;
}

.ohm-footer a {
	color: rgba(255, 255, 255, 0.68);
	text-decoration: none;
}

.ohm-footer a:hover,
.ohm-footer a:focus {
	color: var(--ohm-gold-light);
}

.ohm-footer__brand .ohm-brand__name {
	color: var(--ohm-white);
}

.ohm-footer__about {
	margin: 18px 0;
	line-height: 1.7;
	max-width: 340px;
}

.ohm-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.ohm-social a {
	width: 38px;
	height: 38px;
	border-radius: var(--ohm-radius);
	background: rgba(255, 255, 255, 0.08);
	display: grid;
	place-items: center;
	transition: all var(--ohm-transition);
}

.ohm-social a:hover {
	background: var(--ohm-gold);
}

.ohm-social svg {
	width: 17px;
	height: 17px;
	fill: rgba(255, 255, 255, 0.85);
}

.ohm-social a:hover svg {
	fill: var(--ohm-ink);
}

.ohm-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 26px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.ohm-footer__legal {
	max-width: 780px;
	font-size: 0.8rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.45);
	padding-bottom: 26px;
}

.ohm-footer__menu {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.ohm-footer__menu li {
	margin: 0;
}

/* Sticky mobile call bar */

.ohm-callbar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 400;
	background: var(--ohm-navy);
	border-top: 2px solid var(--ohm-gold);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.16);
}

.ohm-callbar__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.ohm-callbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 10px;
	color: var(--ohm-white);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
}

/*
 * This used to read `.ohm-callbar a + a { background: gold }`, written when the
 * bar had exactly two buttons — call and message. With two offices there are
 * three, so the second office AND the message button both turned gold and ran
 * together as one block. Each button now states its own colour.
 */
.ohm-callbar a + a {
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.ohm-callbar__link {
	background: var(--ohm-navy);
	color: var(--ohm-white);
}

.ohm-callbar__link--navy {
	background: var(--ohm-navy-600);
}

.ohm-callbar__link--green {
	background: var(--ohm-field);
}

.ohm-callbar__link--gold {
	background: var(--ohm-gold-dark);
	color: var(--ohm-white);
}

.ohm-callbar__link--message {
	background: var(--ohm-gold);
	color: var(--ohm-ink);
}

.ohm-callbar__link span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 380px) {
	.ohm-callbar a {
		gap: 6px;
		padding-inline: 6px;
		font-size: 0.84rem;
	}
}

.ohm-callbar svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* ==========================================================================
   19. Utilities
   ========================================================================== */

.ohm-text-center {
	text-align: center;
}

.ohm-mb-0 {
	margin-bottom: 0;
}

.ohm-mt-lg {
	margin-top: 48px;
}

.ohm-hidden {
	display: none !important;
}

.ohm-divider-gold {
	width: 64px;
	height: 3px;
	background: var(--ohm-gold);
	border: 0;
	margin: 0 0 24px;
}

.ohm-section-head--center .ohm-divider-gold {
	margin-left: auto;
	margin-right: auto;
}

.ohm-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 100px;
	background: var(--ohm-blue-light);
	color: var(--ohm-navy);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* WordPress core */

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
	font-size: 0.85rem;
	color: var(--ohm-muted);
	text-align: center;
	margin-top: 8px;
}

.sticky .ohm-postcard {
	border-color: var(--ohm-gold);
}

.bypostauthor {
	display: block;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 1.5rem;
}

.gallery-item {
	margin: 0 !important;
	width: auto !important;
}

/* ==========================================================================
   20. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	:root {
		--ohm-section-y: 40px;
	}

	.ohm-bio {
		grid-template-columns: 280px 1fr;
		gap: 36px;
	}

	.ohm-contact-grid {
		grid-template-columns: 1fr 380px;
		gap: 36px;
	}

	.ohm-with-sidebar {
		gap: 36px;
	}

	.ohm-split {
		gap: 40px;
	}

	.ohm-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
	}

	.ohm-officelist--split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.ohm-nav-toggle {
		display: grid;
	}

	.ohm-header__right .ohm-btn {
		display: none;
	}

	.ohm-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ohm-white);
		border-top: 1px solid var(--ohm-line);
		border-bottom: 3px solid var(--ohm-gold);
		box-shadow: var(--ohm-shadow-lg);
		max-height: calc(100vh - 84px);
		overflow-y: auto;
		display: none;
	}

	.ohm-nav.is-open {
		display: block;
	}

	.ohm-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px var(--ohm-gutter) 24px;
	}

	.ohm-nav li {
		border-bottom: 1px solid var(--ohm-line);
	}

	.ohm-nav a {
		padding: 15px 4px;
		font-size: 1rem;
	}

	.ohm-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--ohm-gold);
		border-radius: 0;
		padding: 0 0 8px 16px;
		margin-bottom: 8px;
		min-width: 0;
	}

	.ohm-nav .menu-item-has-children > a::after {
		float: right;
		margin-top: 8px;
	}

	.ohm-hero__inner {
		padding: 76px 0 84px;
	}

	.ohm-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohm-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohm-grid--3,
	.ohm-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohm-split,
	.ohm-bio,
	.ohm-contact-grid,
	.ohm-with-sidebar {
		grid-template-columns: 1fr;
	}

	.ohm-split--reverse .ohm-split__media {
		order: 0;
	}

	.ohm-bio__aside,
	.ohm-sidebar {
		position: static;
	}

	.ohm-bio__photo {
		max-width: 340px;
	}

	.ohm-callbar {
		display: block;
	}

	body {
		padding-bottom: 54px;
	}

	.ohm-topbar__list--left {
		display: none;
	}
}

@media (max-width: 640px) {
	:root {
		--ohm-section-y: 34px;
		--ohm-gutter: 18px;
	}

	body {
		font-size: 16px;
	}

	.ohm-grid--2,
	.ohm-grid--3,
	.ohm-grid--4,
	.ohm-steps,
	.ohm-postnav,
	.ohm-form__row,
	.ohm-officepick__grid,
	.ohm-officelist--split {
		grid-template-columns: 1fr;
	}

	.ohm-callbar__inner {
		font-size: 0.85rem;
	}

	.ohm-callbar a {
		padding: 14px 6px;
		font-size: 0.84rem;
	}

	.ohm-stats {
		grid-template-columns: 1fr;
	}

	.ohm-footer__top {
		grid-template-columns: 1fr;
		padding: 48px 0 32px;
	}

	.ohm-formpanel {
		padding: 24px 20px;
	}

	.ohm-hero__inner {
		padding: 60px 0 68px;
	}

	.ohm-split__badge {
		position: static;
		margin-top: 16px;
		max-width: none;
	}

	.ohm-header__inner {
		min-height: 70px;
	}

	.ohm-brand img {
		max-height: 48px;
	}

	.ohm-brand__name {
		font-size: 1.05rem;
	}

	.ohm-entry .alignleft,
	.ohm-entry .alignright {
		float: none;
		margin: 0 0 1.25rem;
	}

	.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   20b. Context fixes
   ========================================================================== */

/* WordPress custom logo output */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: none;
	max-width: 320px;
}

.custom-logo-link img {
	max-height: 64px;
	width: auto;
}

/* Breadcrumbs on light backgrounds */
.ohm-section .ohm-breadcrumbs,
.ohm-main > .ohm-section .ohm-breadcrumbs {
	color: var(--ohm-muted);
}

.ohm-section .ohm-breadcrumbs a {
	color: var(--ohm-blue);
}

.ohm-section .ohm-breadcrumbs a:hover {
	color: var(--ohm-navy);
}

.ohm-faq-heading {
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.ohm-last-reviewed {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 1px solid var(--ohm-line);
	font-size: 0.84rem;
}

.ohm-split__body > *:last-child {
	margin-bottom: 0;
}

.ohm-searchform input[type="search"] {
	flex: 1;
}

.ohm-answer + h2,
.ohm-answer + h3 {
	margin-top: 0;
}

/* Comment form inherits theme fields */
.comment-form label {
	display: block;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ohm-navy);
	margin-bottom: 6px;
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border: 2px solid var(--ohm-navy);
	border-radius: var(--ohm-radius);
	background: var(--ohm-navy);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   21. Home page — approved client design
   Handwritten accents, the centred header, the "How can we help you?"
   checklist, wide office rows and the "Ready to talk?" message band.
   ========================================================================== */

/* --- Handwritten accent line ------------------------------------------- */

.ohm-script {
	font-family: var(--ohm-font-script);
	font-size: 1.65rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ohm-gold-dark);
	margin: 0 0 14px;
}

.ohm-section-head--center .ohm-script {
	margin-left: auto;
	margin-right: auto;
}

.ohm-section--navy .ohm-script,
.ohm-msgband .ohm-script,
.ohm-hero__script,
.ohm-footer__script {
	color: var(--ohm-gold-light);
}

.ohm-hero__script {
	font-size: 1.9rem;
	margin: 2px 0 22px;
}

.ohm-header__script {
	font-size: 1.05rem;
	margin: 2px 0 0;
	color: var(--ohm-gold-dark);
}

.ohm-footer__name {
	font-family: var(--ohm-font-heading);
	font-size: 1.3rem;
	display: block;
}

.ohm-footer__script {
	font-size: 1.3rem;
	margin: 4px 0 12px;
}

/* --- Centred header ----------------------------------------------------- */

.ohm-header__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	min-height: 96px;
}

.ohm-header__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}

.ohm-header--centered .ohm-header__center .ohm-brand {
	max-width: none;
}

.ohm-header__side {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.ohm-header__side--end {
	justify-content: flex-end;
}

.ohm-headphone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ohm-navy);
	min-width: 0;
}

.ohm-headphone svg {
	width: 20px;
	height: 20px;
	fill: var(--ohm-gold-dark);
	flex: none;
}

.ohm-headphone__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.ohm-headphone__label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ohm-muted);
	white-space: nowrap;
}

.ohm-headphone strong {
	font-size: 1.02rem;
	color: var(--ohm-navy);
	white-space: nowrap;
}

.ohm-headphone:hover strong,
.ohm-headphone:focus strong {
	color: var(--ohm-blue);
}

.ohm-header__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	border-top: 1px solid var(--ohm-line);
	min-height: 54px;
}

.ohm-header--centered .ohm-nav-toggle {
	display: none;
}

/* --- "How can we help you?" checklist ----------------------------------- */

.ohm-help__grid {
	display: grid;
	gap: 40px 36px;
}

.ohm-help__grid--1 {
	grid-template-columns: minmax(0, 1fr);
}
.ohm-help__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ohm-help__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ohm-help__col {
	min-width: 0;
}

.ohm-help__icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--ohm-blue-light);
	border: 1px solid rgba(11, 37, 69, 0.08);
	margin-bottom: 16px;
}

.ohm-help__icon svg {
	width: 26px;
	height: 26px;
	fill: var(--ohm-navy);
}

.ohm-help__col--more .ohm-help__icon {
	background: rgba(201, 162, 39, 0.16);
	border-color: rgba(201, 162, 39, 0.4);
}

.ohm-help__col--more .ohm-help__icon svg {
	fill: var(--ohm-gold-dark);
}

.ohm-help__title {
	font-size: 1.16rem;
	line-height: 1.35;
	margin: 0 0 14px;
}

.ohm-help__title a {
	color: inherit;
	text-decoration: none;
}

.ohm-help__title a:hover,
.ohm-help__title a:focus {
	color: var(--ohm-blue);
	text-decoration: underline;
}

.ohm-help__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.ohm-help__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.5;
	color: var(--ohm-body);
}

.ohm-help__list svg {
	width: 17px;
	height: 17px;
	fill: var(--ohm-gold-dark);
	flex: none;
	margin-top: 3px;
}

.ohm-help__summary {
	font-size: 0.96rem;
	color: var(--ohm-body);
	margin: 0;
}

.ohm-help__note {
	max-width: 720px;
	margin: 48px auto 0;
	text-align: center;
	color: var(--ohm-muted);
	font-size: 1rem;
}

/* --- Offices as wide rows ---------------------------------------------- */

.ohm-offices__rows {
	display: grid;
	gap: 32px;
}

.ohm-offices--wide .ohm-office {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}

.ohm-offices--wide .ohm-office__media {
	height: 100%;
	min-width: 0;
}

.ohm-offices--wide .ohm-office__frame {
	/* The card layout sizes this by aspect ratio. In a wide row the height
	   comes from the details beside it instead, so the ratio has to be
	   released or the frame widens to match it and covers the text. */
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	min-height: 320px;
}

.ohm-offices--wide .ohm-office__frame img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* In a card the badge overhangs the bottom of the photo. In a wide row there
   is nothing below the photo to overhang, so it moves inside the top corner. */
.ohm-offices--wide .ohm-office__badge {
	top: 22px;
	bottom: auto;
}

.ohm-offices--wide .ohm-office__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px 38px;
	min-width: 0;
}

.ohm-offices--wide .ohm-office__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px 26px;
}

/* --- "Ready to talk?" message band -------------------------------------- */

.ohm-msgband {
	position: relative;
	/* The deep navy, not the primary token: this band is the darkest thing on
	   the page in the comp, and it should not lighten to a link blue on a site
	   whose Primary has drifted. */
	background: var(--ohm-navy-deep, #0b2545);
	color: rgba(255, 255, 255, 0.86);
	padding: clamp(38px, 3.4vw, 56px) 0;
	overflow: hidden;
}

.ohm-msgband__media {
	position: absolute;
	inset: 0;
}

/* The photograph emerges from the navy along the bottom edge rather than
   sitting on top of it as a flat wash. Carried a little further than before —
   in the comp the marsh at dusk is clearly a photograph, not a texture — while
   still staying well behind white type. */
.ohm-msgband__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 40%, #000 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 40%, #000 100%);
}

.ohm-msgband .ohm-container {
	position: relative;
	z-index: 1;
}

.ohm-msgband h2,
.ohm-msgband h3,
.ohm-msgband legend {
	color: var(--ohm-white);
}

.ohm-msgband .ohm-eyebrow {
	color: var(--ohm-gold-light);
}

.ohm-msgband .ohm-lead {
	color: rgba(255, 255, 255, 0.82);
}

.ohm-msgband__head {
	margin-bottom: 40px;
}

.ohm-msgband__form {
	max-width: 860px;
	margin: 0 auto;
}

.ohm-msgband__form .ohm-formpanel {
	background: var(--ohm-white);
	box-shadow: var(--ohm-shadow-lg);
}

.ohm-msgband__form .ohm-formpanel legend,
.ohm-msgband__form .ohm-formpanel h2,
.ohm-msgband__form .ohm-formpanel h3 {
	color: var(--ohm-navy);
}

.ohm-msgband__offices {
	list-style: none;
	margin: 40px auto 0;
	padding: 0;
	max-width: 860px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px 40px;
	text-align: center;
}

.ohm-msgband__offices li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ohm-msgband__offices strong {
	color: var(--ohm-white);
	font-size: 1.02rem;
	letter-spacing: 0.04em;
}

.ohm-msgband__offices span {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
}

.ohm-msgband__offices a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--ohm-gold-light);
	text-decoration: none;
	font-weight: 600;
}

.ohm-msgband__offices svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.ohm-msgband__map {
	max-width: 860px;
	margin: 40px auto 0;
}

/* The office picker had the same problem: `.ohm-form label` was flattening it
   to a block, so the radio sat on its own line above the office name. */
.ohm-form .ohm-officepick__option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* --- "What do you need help with?" tick boxes --------------------------- */

.ohm-needs {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
	min-width: 0;
}

.ohm-needs legend {
	padding: 0;
	margin-bottom: 12px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ohm-navy);
}

.ohm-needs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px 20px;
}

/* Specificity has to clear `.ohm-form label`, which sets display:block on
   every label inside the form. */
.ohm-form .ohm-needs__option,
.ohm-needs__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius);
	background: var(--ohm-white);
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ohm-body);
	cursor: pointer;
	transition: border-color var(--ohm-transition), background var(--ohm-transition);
}

.ohm-needs__option:hover {
	border-color: var(--ohm-blue);
}

.ohm-form .ohm-needs__option input,
.ohm-needs__option input {
	width: 18px;
	height: 18px;
	flex: none;
	margin: 1px 0 0;
	accent-color: var(--ohm-blue);
}

.ohm-needs__option span {
	min-width: 0;
}

.ohm-needs__option:has(input:checked) {
	border-color: var(--ohm-blue);
	background: var(--ohm-blue-light);
	color: var(--ohm-navy);
}

.ohm-needs__option:focus-within {
	outline: 2px solid var(--ohm-blue);
	outline-offset: 2px;
}

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

@media (max-width: 1080px) {
	.ohm-help__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.ohm-header__top {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 76px;
		gap: 14px;
	}

	.ohm-header__side--start {
		display: none;
	}

	.ohm-header__center {
		align-items: flex-start;
		text-align: left;
		order: -1;
		min-width: 0;
	}

	.ohm-header--centered .ohm-header__center .ohm-brand {
		max-width: 100%;
		min-width: 0;
	}

	.ohm-header--centered .ohm-brand__text {
		min-width: 0;
	}

	.ohm-header--centered .ohm-brand__name,
	.ohm-header--centered .ohm-brand__tag {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ohm-header__script {
		display: none;
	}

	.ohm-header--centered .ohm-nav-toggle {
		display: grid;
	}

	.ohm-header--centered .ohm-header__cta,
	.ohm-header--centered .ohm-headphone__label {
		display: none;
	}

	.ohm-header__bar {
		border-top: 0;
		min-height: 0;
		justify-content: flex-start;
	}

	.ohm-header--centered .ohm-header__order {
		display: none;
	}

	.ohm-offices--wide .ohm-office {
		grid-template-columns: minmax(0, 1fr);
	}

	.ohm-offices--wide .ohm-office__frame {
		min-height: 0;
	}

	.ohm-offices--wide .ohm-office__body {
		padding: 28px;
	}
}

@media (max-width: 620px) {
	/* On a phone the sticky call bar carries the phone numbers, so the header
	   keeps the logo and the menu button and nothing else. */
	.ohm-header--centered .ohm-headphone {
		display: none;
	}
}

@media (max-width: 700px) {
	.ohm-help__grid,
	.ohm-help__grid--2,
	.ohm-help__grid--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.ohm-hero__script {
		font-size: 1.5rem;
	}

	.ohm-script {
		font-size: 1.4rem;
	}

	.ohm-needs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ohm-msgband__offices {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   22. The client's design language
   The recurring devices from the approved mockups: ruled headings, soft
   service tiles, offices as photo panels, ringed figures, a quote carousel
   and a light footer closing on a navy strip.
   ========================================================================== */

/* --- Ruled section heading --------------------------------------------- */

.ohm-rulehead {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0 0 10px;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ohm-navy);
	text-wrap: balance;
}

.ohm-rulehead::before,
.ohm-rulehead::after {
	content: "";
	height: 2px;
	width: clamp(24px, 8vw, 74px);
	flex: none;
	background: var(--ohm-gold);
}

.ohm-section--navy .ohm-rulehead,
.ohm-msgband .ohm-rulehead,
.ohm-hero .ohm-rulehead {
	color: var(--ohm-white);
}

.ohm-section-head__sub {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--ohm-navy-600);
	text-wrap: balance;
}

.ohm-section--navy .ohm-section-head__sub,
.ohm-msgband .ohm-section-head__sub {
	color: var(--ohm-gold-light);
}

.ohm-section-head .ohm-lead {
	margin-top: 14px;
}

/* --- Hero, centred ------------------------------------------------------ */

.ohm-hero--center .ohm-hero__inner {
	margin-inline: auto;
	text-align: center;
	align-items: center;
	max-width: 780px;
}

.ohm-hero--center .ohm-eyebrow::before {
	display: none;
}

.ohm-hero--center .ohm-hero__trust {
	justify-content: center;
}

.ohm-hero__note {
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 12px 0 0;
	max-width: 46ch;
}

.ohm-hero--center .ohm-hero__note {
	margin-inline: auto;
}

/* The gold brush stroke under the handwritten line. */
.ohm-script--brush {
	position: relative;
	display: inline-block;
	padding-bottom: 16px;
}

.ohm-script--brush::after {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 0;
	height: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C40 2 80 2 120 5c30 2 55 4 77 0' stroke='%23c9a227' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.ohm-btn-row--stack {
	flex-direction: column;
	align-items: stretch;
	max-width: 430px;
}

/* Once the stack turns back into a row it is full width, so `margin: auto`
   has nothing to centre — the items have to be centred inside it. */
.ohm-hero--center .ohm-btn-row {
	justify-content: center;
}

.ohm-hero--center .ohm-btn-row--stack {
	margin-inline: auto;
}

.ohm-btn--wide {
	width: 100%;
	justify-content: space-between;
	text-align: left;
}

/* Buttons never had an icon size of their own — every other icon on the site
   is sized by its context — so an icon dropped into one rendered at its
   intrinsic size and dwarfed the label. */
.ohm-btn .ohm-icon {
	width: 18px;
	height: 18px;
	flex: none;
	fill: currentColor;
}

/* A genuinely hollow button. `--outline` has been filled since 1.1.0, and the
   approved design wants an outlined one under the service tiles.

   It draws in `--ohm-navy-deep` rather than `--ohm-navy`: the comp's button is
   the hard, near-black navy, and deriving it means the button stays hard even
   on a site whose Primary has been saved as the mid-blue. The fallback covers
   the (theoretical) case of the stylesheet loading without the inline vars. */
.ohm-btn--hollow {
	background: transparent;
	color: var(--ohm-navy-deep, #0b2545);
	border-color: var(--ohm-navy-deep, #0b2545);
}

.ohm-btn--hollow:hover,
.ohm-btn--hollow:focus {
	background: var(--ohm-navy-deep, #0b2545);
	border-color: var(--ohm-navy-deep, #0b2545);
	color: var(--ohm-white);
}

/* The about/attorney split now sits under a centred section heading, so it
   does not carry its own heading and can run a little tighter. */
.ohm-split--tight {
	align-items: center;
}

.ohm-split--tight .ohm-split__media img,
.ohm-split--tight .ohm-split__media > div {
	border-radius: var(--ohm-radius-lg);
}

/* --- Service tiles ------------------------------------------------------ */

.ohm-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ohm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
	padding: 20px 12px 18px;
	min-height: 100%;
	text-align: center;
	text-decoration: none;
	background: var(--ohm-blue-light);
	border: 1px solid rgba(11, 37, 69, 0.07);
	border-radius: var(--ohm-radius-lg);
	transition: background var(--ohm-transition), border-color var(--ohm-transition), transform var(--ohm-transition);
}

.ohm-tile:hover,
.ohm-tile:focus-visible {
	background: #dceaf5;
	border-color: var(--ohm-blue);
	transform: translateY(-2px);
}

.ohm-tile__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
}

.ohm-tile__icon svg {
	width: 31px;
	height: 31px;
	fill: var(--ohm-navy);
}

.ohm-tile__label {
	font-family: var(--ohm-font-body);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ohm-navy);
	text-wrap: balance;
}

.ohm-tile--more .ohm-tile__icon svg {
	fill: var(--ohm-gold-dark);
}

.ohm-help__foot {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.ohm-help__foot .ohm-btn {
	max-width: 430px;
}

/* `--wide` spreads its children apart so a button with a leading icon puts the
   icon at one edge and the chevron at the other. This one has no leading icon,
   so `space-between` had nothing to do but fling the chevron at the far edge,
   a third of the button away from its label. The comp keeps the two together
   and centres the pair, so this button opts out of the spread. */
.ohm-help__foot .ohm-btn--wide {
	justify-content: center;
	text-align: center;
	gap: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* The chevron is a navigational cue here, not a label — smaller than the type
   and slightly lifted so its optical centre lines up with the cap height. */
.ohm-help__foot .ohm-btn--wide .ohm-icon {
	width: 15px;
	height: 15px;
	position: relative;
	top: 1px;
}

/* --- Offices as photo panels -------------------------------------------- */

.ohm-panels {
	display: grid;
	gap: 24px;
}

.ohm-panel {
	--panel-accent: var(--ohm-navy);

	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 380px;
	padding: 26px;
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	isolation: isolate;
	background: var(--ohm-navy);
}

.ohm-panel--green {
	--panel-accent: var(--ohm-field);
}

.ohm-panel--gold {
	--panel-accent: var(--ohm-gold-dark);
}

.ohm-panel__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ohm-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohm-panel__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--panel-accent);
}

.ohm-panel__placeholder svg {
	width: 90px;
	height: 90px;
	fill: rgba(255, 255, 255, 0.22);
}

/* The scrim is what keeps the text legible over any photo the firm uploads. */
.ohm-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(11, 37, 69, 0.34) 0%,
		rgba(11, 37, 69, 0.62) 42%,
		rgba(11, 37, 69, 0.9) 100%
	);
}

.ohm-panel__body {
	width: 100%;
	color: rgba(255, 255, 255, 0.9);
}

.ohm-panel__name {
	margin: 0 0 6px;
	font-size: 1.32rem;
	line-height: 1.25;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ohm-white);
}

.ohm-panel__name a {
	color: inherit;
	text-decoration: none;
}

.ohm-panel__name a:hover,
.ohm-panel__name a:focus {
	text-decoration: underline;
}

.ohm-panel__tagline {
	margin: 0 0 16px;
	font-size: 0.97rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.84);
	max-width: 34ch;
}

.ohm-panel__facts {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ohm-panel__facts li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.45;
}

.ohm-panel__facts svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	fill: var(--ohm-gold-light);
}

.ohm-panel__facts a {
	color: var(--ohm-white);
	text-decoration: none;
	font-weight: 600;
}

.ohm-panel__facts a:hover,
.ohm-panel__facts a:focus {
	color: var(--ohm-gold-light);
}

/* --- Ringed figures ----------------------------------------------------- */

.ohm-rings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px 20px;
	justify-items: center;
	text-align: center;
}

.ohm-ring {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 210px;
}

.ohm-ring__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--ohm-blue-light);
	border: 1px solid rgba(11, 37, 69, 0.08);
}

.ohm-ring__icon svg {
	width: 28px;
	height: 28px;
	fill: var(--ohm-navy);
}

.ohm-ring__num {
	font-family: var(--ohm-font-body);
	font-size: 1.16rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ohm-navy);
	line-height: 1.2;
}

.ohm-ring__label {
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--ohm-muted);
	text-wrap: balance;
}

/* --- Quote carousel ----------------------------------------------------- */

.ohm-reviews {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	max-width: 820px;
	margin: 0 auto;
}

.ohm-reviews__nav {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	padding: 0;
	border: 1px solid var(--ohm-line);
	border-radius: 50%;
	background: var(--ohm-white);
	cursor: pointer;
	transition: border-color var(--ohm-transition), background var(--ohm-transition);
}

.ohm-reviews__nav:hover {
	border-color: var(--ohm-blue);
	background: var(--ohm-blue-light);
}

.ohm-reviews__nav svg {
	width: 18px;
	height: 18px;
	fill: var(--ohm-navy);
}

.ohm-reviews__nav--prev svg {
	transform: rotate(180deg);
}

.ohm-reviews__track {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	box-shadow: var(--ohm-shadow-sm);
	padding: 30px 28px;
}

.ohm-reviews__item {
	margin: 0;
	text-align: center;
}

.ohm-reviews__stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 14px;
}

.ohm-reviews__stars svg {
	width: 19px;
	height: 19px;
	fill: var(--ohm-gold);
}

.ohm-reviews__item blockquote {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	/* The editor's pull-quote styling puts a tinted panel behind blockquotes;
	   inside the carousel card that reads as a box within a box. */
	background: none;
	font-size: 1.03rem;
	line-height: 1.65;
	color: var(--ohm-body);
}

.ohm-reviews__item blockquote p {
	margin: 0 0 10px;
}

.ohm-reviews__item blockquote p:last-child {
	margin-bottom: 0;
}

/* One pair of curly quotes round the whole review, not one per paragraph —
   a three-paragraph review is one quotation, not three. */
.ohm-reviews__scroll p:first-child::before {
	content: "\201C";
}

.ohm-reviews__scroll p:last-child::after {
	content: "\201D";
}

/* --- The review window --------------------------------------------------- */

/*
 * Three lines of the review, and a scroll bar for the rest. However long the
 * client wrote, the card stays the height it is, so the section stays level
 * with the portrait beside it.
 *
 * The height is stated in lines (em of the review's own type), not pixels, so
 * it stays exactly three lines if the font or its size is changed.
 */
.ohm-reviews__item blockquote {
	--ohm-review-lines: 3;
	position: relative;
}

.ohm-reviews__scroll {
	max-height: calc(var(--ohm-review-lines) * 1.65em);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Room for the bar, so it never sits on top of the words, and reserved
	   either way so a review that scrolls wraps exactly like one that does
	   not. The left side matches it to keep the text centred. */
	scrollbar-gutter: stable both-edges;
	padding-inline: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--ohm-blue) var(--ohm-mist);
	border-radius: 4px;
}

.ohm-reviews__scroll::-webkit-scrollbar {
	width: 6px;
}

.ohm-reviews__scroll::-webkit-scrollbar-track {
	background: var(--ohm-mist);
	border-radius: 3px;
}

.ohm-reviews__scroll::-webkit-scrollbar-thumb {
	background: var(--ohm-blue);
	border-radius: 3px;
}

.ohm-reviews__scroll:focus-visible {
	outline: 2px solid var(--ohm-blue);
	outline-offset: 4px;
}

/*
 * Phones and Macs hide scroll bars until something is scrolling, so a bar
 * alone does not tell anyone there is more. The last line fades out while
 * there is more below it, and stops fading once the reader reaches the end.
 * The script sets the class; with no script the window still scrolls, it
 * simply does not fade.
 */
.ohm-reviews__item blockquote::after {
	content: "";
	position: absolute;
	left: 0;
	right: 14px;
	bottom: 0;
	height: 1.4em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ohm-white) 90%);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--ohm-transition);
}

.ohm-reviews__item blockquote.has-more::after {
	opacity: 1;
}

.ohm-reviews__source {
	display: block;
	margin-top: 3px;
	font-weight: 500;
	font-size: 0.78rem;
	color: var(--ohm-muted);
}

.ohm-reviews__item figcaption {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ohm-muted);
}

.ohm-reviews__dots {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.ohm-reviews__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ohm-line);
	cursor: pointer;
	transition: background var(--ohm-transition);
}

.ohm-reviews__dots button[aria-selected="true"] {
	background: var(--ohm-navy);
}

/* --- The message band, simplified --------------------------------------- */

.ohm-msgband .ohm-formpanel {
	padding: 26px 22px;
}

.ohm-msgband__form .ohm-form__row {
	grid-template-columns: minmax(0, 1fr);
}

.ohm-msgband .ohm-officepick__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Light footer ------------------------------------------------------- */

.ohm-footer--light {
	background: var(--ohm-white);
	color: var(--ohm-body);
	padding: 0;
	border-top: 1px solid var(--ohm-line);
}

.ohm-footer__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	padding-block: 48px 40px;
}

/*
 * Twice the height it gets in the header. The header's logo shares a bar with
 * the menu and the phone numbers and has to stay out of their way; the footer's
 * has a column to itself and is the last thing anyone sees, so it can carry
 * some weight. Scoped here so the header keeps its own size.
 */
.ohm-footer__center .custom-logo-link {
	max-width: min(360px, 78%);
}

.ohm-footer__center .custom-logo-link img {
	max-height: 128px;
}

.ohm-footer--light .ohm-brand__name {
	color: var(--ohm-navy);
	font-size: 1.28rem;
}

.ohm-footer--light .ohm-footer__script {
	color: var(--ohm-navy);
	margin: 0;
	font-size: 1.25rem;
}

.ohm-footer--light .ohm-footer__legal,
.ohm-footer--light .ohm-footer__copy {
	max-width: 74ch;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--ohm-muted);
}

.ohm-footer__links {
	width: 100%;
}

.ohm-footer__linklist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
	list-style: none;
	margin: 6px 0;
	padding: 0;
}

.ohm-footer__linklist li {
	margin: 0;
	display: flex;
	align-items: center;
}

.ohm-footer__linklist li:not(:last-child)::after {
	content: "";
	width: 1px;
	height: 13px;
	margin: 0 14px;
	background: var(--ohm-line);
}

.ohm-footer__linklist a {
	color: var(--ohm-navy);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
}

.ohm-footer__linklist a:hover,
.ohm-footer__linklist a:focus {
	color: var(--ohm-blue);
	text-decoration: underline;
}

.ohm-social--round {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 4px 0;
}

.ohm-social--round a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ohm-navy);
	color: var(--ohm-white);
	transition: background var(--ohm-transition);
}

.ohm-social--round a:hover,
.ohm-social--round a:focus {
	background: var(--ohm-blue);
}

.ohm-social--round svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ohm-footer__strip {
	background: var(--ohm-navy);
	color: rgba(255, 255, 255, 0.82);
	padding-block: 22px;
	text-align: center;
}

.ohm-footer__strip p {
	margin: 0;
	font-family: var(--ohm-font-heading);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* --- Scenery along the bottom of the footer ------------------------------ */

/*
 * The picture is the last thing on the page, in normal flow, with the closing
 * lines sitting on the white just above it.
 *
 * It was absolutely positioned at first, with the text floated over its sky.
 * That cannot hold its position: `cover` scales the picture to the viewport
 * width, so the treeline always lands about 35vw above the bottom edge — 145px
 * on a phone, 500px on a desktop. Any padding that puts the text on the sky at
 * one width buries it in the fronds at another. In flow, the text is above the
 * picture at every width by construction, and the picture's top dissolves into
 * the same white the text sits on, so it still reads as one continuous scene.
 */
.ohm-footer--scene {
	overflow: hidden;
}

/*
 * The height is tied to the width of ONE copy, not to the viewport, and the
 * ratio is taken from the artwork itself rather than picked by eye.
 *
 * Measured on this picture: it is pure white down to 0.529 of its height, the
 * first palm pixel is at 0.566, and it is 0.871 as tall as it is wide. A window
 * of 0.42 x the copy width therefore starts at 0.518 of the image — above the
 * point where the white ends, and above every crown.
 *
 * Which settles both faults at once. The top edge of the scene is the picture's
 * own white, so it meets the white footer with nothing to blend; and no palm is
 * ever cut, because the frame always begins in the sky above them. The same
 * fraction holds at every screen size, so the scene looks the same on a phone
 * as on a 27-inch monitor.
 */
.ohm-footer__scene {
	display: flex;
	pointer-events: none;
	line-height: 0;
	overflow: hidden;
}

/*
 * One copy of the picture on a phone, where it sits at about a third of its own
 * size and looks right. Two on a laptop, three on a wide monitor — see
 * ohm_footer_scene() for why. Every second copy is flipped, so each seam is two
 * identical edges meeting and there is nothing to line up.
 */
.ohm-footer__scene--tile img + img {
	display: none;
}

.ohm-footer__scene img {
	width: 100%;
	height: 100%;
	flex: none;
	/* Cropped from the top, never shrunk. The treeline along the bottom edge is
	   the whole point of the picture and the sky above it is expendable, which
	   is what lets one wide image work from 1600px down to 360px: a narrow
	   screen loses sky, not palms. */
	object-fit: cover;
	object-position: center bottom;
	/* And the picture is not laid on the footer, it emerges from it — the top
	   third dissolves into whatever colour the footer is, so there is no edge
	   where the image starts. */
	/* A short fade in pixels, not a percentage. A percentage ramp grows with the
	   scene, and on a wide screen a tenth of 400px is deep enough to swallow the
	   palm crowns, which then look like a rendering fault rather than a fade.
	   18px is enough to take the edge off any picture at every width. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}

/*
 * A copy is added each time the scene would otherwise hit its 340px ceiling —
 * 0.42 x 810px is 340 — so no copy is ever wider than about 810px and the
 * height/width ratio above always holds.
 *
 * Each copy is a hair wider than its slot AND pulled back over its neighbour.
 * The artwork's own left and right edges carry a little JPEG ringing; mirrored,
 * that puts two identical edge columns side by side and draws a faint vertical
 * line down the picture. Widening alone does not fix it — flex items sit next
 * to each other, so a wider item moves the next one along rather than covering
 * it. The negative margin is what makes them overlap.
 */
.ohm-footer__scene--tile img + img {
	margin-left: -2px;
}

@media (min-width: 810px) {
	.ohm-footer__scene--tile {
		height: clamp(150px, 21vw, 340px);
	}

	.ohm-footer__scene--tile img {
		width: calc(50% + 2px);
	}

	.ohm-footer__scene--tile img:nth-child(2) {
		display: block;
		transform: scaleX(-1);
	}
}

@media (min-width: 1620px) {
	.ohm-footer__scene--tile {
		height: clamp(150px, 14vw, 340px);
	}

	.ohm-footer__scene--tile img {
		width: calc(33.3333% + 2px);
	}

	.ohm-footer__scene--tile img:nth-child(3) {
		display: block;
	}
}

@media (min-width: 2430px) {
	.ohm-footer__scene--tile {
		height: clamp(150px, 10.5vw, 340px);
	}

	.ohm-footer__scene--tile img {
		width: calc(25% + 2px);
	}

	.ohm-footer__scene--tile img:nth-child(4) {
		display: block;
		transform: scaleX(-1);
	}
}

/*
 * A panorama needs no arithmetic at all: the band is exactly as deep as the
 * picture is at the width of the page. `--ohm-scene-ratio` is the image's own
 * height ÷ width, measured from the file by ohm_footer_scene(), so the whole
 * picture is always on screen — its white sky at the top, its ground at the
 * bottom, never cropped and never enlarged, at every size from a phone to an
 * ultrawide.
 */
.ohm-footer__scene--wide {
	height: calc(100vw * var(--ohm-scene-ratio, 0.157));
}

.ohm-footer__scene--wide img {
	width: 100%;
	object-fit: fill;
}

.ohm-footer__scene--tile {
	height: clamp(150px, 42vw, 340px);
}

/*
 * Two pictures. Below 820px the phone-shaped one, sized the way the single-copy
 * tiling is — 0.42 x the width, which for that artwork starts the frame in its
 * own white sky and above every crown. From 820px the panorama, laid out at its
 * own proportions so the whole of it is always on screen.
 */
.ohm-footer__scene--split {
	height: clamp(150px, 42vw, 340px);
}

@media (min-width: 820px) {
	.ohm-footer__scene--split {
		height: calc(100vw * var(--ohm-scene-ratio, 0.157));
	}

	.ohm-footer__scene--split img {
		object-fit: fill;
	}
}

.ohm-footer__scene picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* The dark footer needs a real dissolve rather than an edge-softener: a white
   sky meeting near-black would otherwise land as a hard line. */
.ohm-footer:not(.ohm-footer--light) .ohm-footer__scene img {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
}

/* The closing lines lose their painted navy band — that band, sitting between
   the footer and the picture, is what made the whole thing read as a coloured
   box bolted to the bottom. They are dark type on white now, and the picture
   fades up to meet them. */
.ohm-footer--scene .ohm-footer__strip {
	background: transparent;
	color: var(--ohm-navy-deep, #0b2545);
	padding-block: 4px 18px;
}

.ohm-footer--scene .ohm-footer__center {
	padding-bottom: 26px;
}

.ohm-footer--scene .ohm-footer__bottom {
	border-bottom: 0;
}

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

@media (min-width: 720px) {
	.ohm-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px;
	}

	.ohm-panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohm-panel {
		min-height: 430px;
		padding: 32px;
	}

	.ohm-msgband__form .ohm-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohm-btn-row--stack {
		flex-direction: row;
		max-width: none;
	}

	.ohm-btn-row--stack .ohm-btn--wide {
		width: auto;
		min-width: 260px;
	}
}

@media (max-width: 620px) {
	/*
	 * On a phone the heading has to earn its line. Sized so
	 * "How Can We Help You?" sits on one row, with the gold rules pulled in
	 * tight beside it rather than reaching for the gutters.
	 */
	.ohm-rulehead {
		gap: 10px;
		font-size: clamp(1.08rem, 0.72rem + 1.55vw, 1.34rem);
	}

	.ohm-rulehead::before,
	.ohm-rulehead::after {
		width: clamp(18px, 5.5vw, 32px);
	}

	.ohm-section-head__sub {
		font-size: 0.93rem;
	}

	.ohm-reviews {
		grid-template-columns: minmax(0, 1fr);
	}

	.ohm-reviews__nav {
		display: none;
	}

	.ohm-reviews__track {
		padding: 24px 20px;
	}

	.ohm-rings__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   23. Proposed-design sections
   The compact header, the ticked "How can we help?" card that lifts over the
   hero, the paired office cards, the four claims and the painted banner.
   ========================================================================== */

/* --- Top bar: an office per side, label over number ---------------------- */

.ohm-topbar__office {
	align-items: center;
	gap: 10px;
	padding-block: 6px;
}

.ohm-topbar__stack {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.ohm-topbar__office .ohm-topbar__city {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.72);
}

.ohm-topbar__office strong {
	font-size: 0.98rem;
	color: var(--ohm-white);
	white-space: nowrap;
}

.ohm-topbar__office svg {
	width: 17px;
	height: 17px;
	fill: var(--ohm-white);
}

.ohm-topbar__list li + li .ohm-topbar__office {
	border-left: 1px solid rgba(255, 255, 255, 0.24);
	padding-left: 22px;
}

/* --- Compact header: logo left, handwritten line beside it --------------- */

.ohm-header--compact .ohm-header__inner {
	gap: 20px;
}

.ohm-header--compact .ohm-header__script {
	margin: 0;
	flex: 1;
	min-width: 0;
	text-align: center;
	font-size: 1.12rem;
	line-height: 1.25;
	color: var(--ohm-navy);
}

/* --- Hero, as drawn ------------------------------------------------------ */

.ohm-hero__eyebrow.ohm-hero__eyebrow {
	flex-direction: column;
	gap: 10px;
}

.ohm-hero--center .ohm-hero__eyebrow::after {
	content: "";
	width: 54px;
	height: 2px;
	background: var(--ohm-gold);
}

.ohm-hero__sub {
	font-weight: 700;
}

/* --- "How can we help?" as one ticked card ------------------------------- */

.ohm-helpcard {
	position: relative;
	z-index: 2;
	padding-bottom: var(--ohm-section-y);
}

/* Lifts over the bottom edge of the hero above it. */
.ohm-helpcard--overlap {
	margin-top: -58px;
}

.ohm-helpcard__card {
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	box-shadow: var(--ohm-shadow-lg);
	padding: 30px 24px 28px;
}

.ohm-helpcard__head {
	margin-bottom: 24px;
}

.ohm-helpcard .ohm-rulehead {
	font-size: clamp(1.28rem, 1.05rem + 1vw, 1.7rem);
	margin-bottom: 0;
}

.ohm-checkgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 26px;
}

.ohm-checkgrid li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--ohm-navy);
}

/* The divider between the two columns, drawn on the items in the right-hand
   column so it stops where the list stops. */
.ohm-checkgrid li:nth-child(odd) {
	padding-right: 26px;
	border-right: 1px solid var(--ohm-line);
}

.ohm-checkgrid li:nth-child(odd):last-child {
	border-right: 0;
}

.ohm-checkgrid__mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: var(--ohm-gold);
}

.ohm-checkgrid__mark svg {
	width: 15px;
	height: 15px;
	fill: var(--ohm-white);
}

/* --- Offices as paired compact cards ------------------------------------- */

.ohm-minis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	/* These are meant to stay compact. Without a cap the photo grows with the
	   column and the pair takes over the page on a wide screen. */
	max-width: 860px;
	margin-inline: auto;
}

.ohm-mini {
	--mini-accent: var(--ohm-navy);

	display: flex;
	flex-direction: column;
	background: var(--ohm-white);
	border: 1px solid var(--ohm-line);
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--ohm-shadow-sm);
	transition: border-color var(--ohm-transition), box-shadow var(--ohm-transition), transform var(--ohm-transition);
}

.ohm-mini--green {
	--mini-accent: var(--ohm-field);
}

.ohm-mini--gold {
	--mini-accent: var(--ohm-gold-dark);
}

.ohm-mini:hover,
.ohm-mini:focus-visible {
	border-color: var(--mini-accent);
	box-shadow: var(--ohm-shadow);
	transform: translateY(-2px);
}

.ohm-mini__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ohm-blue-light);
	line-height: 0;
}

.ohm-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohm-mini__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--mini-accent);
}

.ohm-mini__placeholder svg {
	width: 42px;
	height: 42px;
	fill: rgba(255, 255, 255, 0.3);
}

.ohm-mini__body {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px 16px;
	flex: 1;
}

.ohm-mini__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.ohm-mini__name {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ohm-navy);
	line-height: 1.25;
}

.ohm-mini__name svg {
	width: 15px;
	height: 15px;
	flex: none;
	fill: var(--mini-accent);
}

.ohm-mini__tagline {
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--ohm-muted);
}

.ohm-mini__chev {
	display: grid;
	place-items: center;
	flex: none;
}

.ohm-mini__chev svg {
	width: 16px;
	height: 16px;
	fill: var(--ohm-muted);
}

.ohm-offices__foot {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

.ohm-offices__foot .ohm-btn {
	max-width: 560px;
}

/* --- Four short claims --------------------------------------------------- */

.ohm-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 0;
	text-align: center;
}

.ohm-why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
}

.ohm-why__item + .ohm-why__item {
	border-left: 1px solid var(--ohm-line);
}

.ohm-why__icon svg {
	width: 34px;
	height: 34px;
	fill: var(--ohm-blue);
}

.ohm-why__num {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--ohm-navy);
}

.ohm-why__label {
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ohm-navy);
	text-wrap: balance;
}

/* --- Painted banner ------------------------------------------------------ */

.ohm-brush {
	padding-bottom: 44px;
	text-align: center;
}

.ohm-why + .ohm-brush {
	padding-top: 6px;
}

.ohm-offices + .ohm-why {
	padding-top: 26px;
}

.ohm-brush__mark {
	position: relative;
	display: grid;
	place-items: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 30px 40px 34px;
	/* A hand-laid stroke does not sit perfectly level. */
	transform: rotate(-0.8deg);
}

.ohm-brush__stroke {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--ohm-blue);
}

.ohm-brush__script {
	position: relative;
	margin: 0;
	font-family: var(--ohm-font-script);
	font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
	line-height: 1.15;
	color: var(--ohm-white);
}

/* The painted banner is off by default, but it carries an accent line too and
   follows the same setting. Its own size stands — it is a banner headline. */
.ohm-brush__script.ohm-script--serif,
.ohm-brush__script.ohm-script--sans {
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
	color: var(--ohm-white);
}

.ohm-brush__line {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 16px 0 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ohm-navy);
}

.ohm-brush__line i {
	font-style: normal;
	margin: 0 12px;
	color: var(--ohm-gold);
}

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

@media (min-width: 720px) {
	.ohm-mini__media {
		aspect-ratio: 2 / 1;
	}

	.ohm-helpcard__card {
		padding: 40px 44px 38px;
	}

	.ohm-checkgrid {
		gap: 18px 40px;
	}

	.ohm-checkgrid li:nth-child(odd) {
		padding-right: 40px;
	}
}

@media (max-width: 900px) {
	.ohm-header--compact .ohm-header__script {
		display: none;
	}
}

@media (max-width: 620px) {
	.ohm-topbar__list li + li .ohm-topbar__office {
		padding-left: 14px;
	}

	.ohm-topbar__office strong {
		font-size: 0.9rem;
	}

	.ohm-topbar__office .ohm-topbar__city {
		font-size: 0.7rem;
	}

	.ohm-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 0;
	}

	.ohm-why__item:nth-child(odd) {
		border-left: 0;
	}
}

/* The approved design keeps both columns on a phone, so the list stays two
   across down to the narrowest common handsets and only stacks below that. */
@media (max-width: 379px) {
	.ohm-checkgrid {
		grid-template-columns: minmax(0, 1fr);
		gap: 13px;
	}

	.ohm-checkgrid li:nth-child(odd) {
		padding-right: 0;
		border-right: 0;
	}
}

@media (max-width: 620px) {
	.ohm-checkgrid {
		gap: 14px 16px;
	}

	.ohm-checkgrid li {
		font-size: 0.87rem;
		gap: 9px;
	}

	.ohm-checkgrid li:nth-child(odd) {
		padding-right: 16px;
	}

	.ohm-checkgrid__mark {
		width: 22px;
		height: 22px;
	}

	.ohm-checkgrid__mark svg {
		width: 13px;
		height: 13px;
	}
}

/* ==========================================================================
   24. The full comp
   Three-zone header over a navy menu strip, service columns that carry their
   ticked lists on a desktop and collapse to tiles on a phone, offices whose
   photographs dissolve into their panels, the attorney composed with the
   figures and a review beside him, a three-column message band, and a footer
   whose closing strip fades an image up out of the navy.
   ========================================================================== */

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

.ohm-header--centered .ohm-header__top {
	grid-template-columns: 1fr auto 1fr;
	gap: 28px;
	min-height: 104px;
	align-items: center;
}

.ohm-headoffice {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ohm-header__side--end .ohm-headoffice {
	align-items: flex-start;
}

.ohm-headoffice__address {
	margin: 0;
	padding-left: 30px;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--ohm-muted);
}

.ohm-headphone svg {
	width: 18px;
	height: 18px;
	fill: var(--ohm-blue);
}

.ohm-headphone__label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--ohm-navy);
}

.ohm-headphone strong {
	font-size: 1.16rem;
	letter-spacing: 0.01em;
}

.ohm-header__side {
	position: relative;
}

/* Hairlines separating the three zones. */
.ohm-header--centered .ohm-header__center {
	padding: 0 34px;
	border-left: 1px solid var(--ohm-line);
	border-right: 1px solid var(--ohm-line);
}

.ohm-header--centered .ohm-header__cta {
	flex-direction: column;
	gap: 2px;
	line-height: 1.15;
	text-align: center;
	padding: 11px 18px;
	max-width: 170px;
	white-space: normal;
}

.ohm-header--centered .ohm-header__cta span {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ohm-header--centered .ohm-header__cta .ohm-icon {
	width: 16px;
	height: 16px;
}

.ohm-header__script {
	margin-top: 6px;
}

/* --- Navy menu strip ----------------------------------------------------- */

.ohm-header__bar--navy {
	background: var(--ohm-navy);
	border-top: 0;
}

/* The strip takes its height from the links themselves. Given a fixed height
   the taller links overhang it, and the active item's gold underline is drawn
   below the navy instead of on it. */
.ohm-header__bar--navy .ohm-container {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
}

.ohm-header__bar--navy .ohm-menu,
.ohm-header__bar--navy .ohm-menu > li {
	align-items: stretch;
}

.ohm-header__bar--navy .ohm-menu > li > a {
	display: flex;
	align-items: center;
}

.ohm-header__bar--navy .ohm-nav a {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	padding: 15px 2px;
}

.ohm-header__bar--navy .ohm-menu {
	gap: 26px;
}

.ohm-header__bar--navy .ohm-nav a:hover,
.ohm-header__bar--navy .ohm-nav a:focus {
	color: var(--ohm-gold-light);
}

/* The current page keeps a gold rule under it — and nothing else. The base
   menu paints a pale panel behind the active item, which on navy reads as a
   misplaced white block. */
.ohm-header__bar--navy .ohm-nav a:hover,
.ohm-header__bar--navy .ohm-nav a:focus,
.ohm-header__bar--navy .ohm-nav .current-menu-item > a,
.ohm-header__bar--navy .ohm-nav .current_page_item > a,
.ohm-header__bar--navy .ohm-nav .current-menu-ancestor > a,
.ohm-header__bar--navy .ohm-nav .current_page_parent > a {
	background: transparent;
}

.ohm-header__bar--navy .ohm-nav .current-menu-item > a,
.ohm-header__bar--navy .ohm-nav .current_page_item > a,
.ohm-header__bar--navy .ohm-nav .current-menu-ancestor > a {
	color: var(--ohm-white);
	position: relative;
}

/* Drawn a little above the bar's edge so it reads as an underline under the
   word rather than a border on the strip. ::before, because ::after is already
   the caret on items with a submenu. */
.ohm-header__bar--navy .ohm-nav .current-menu-item > a::before,
.ohm-header__bar--navy .ohm-nav .current_page_item > a::before,
.ohm-header__bar--navy .ohm-nav .current-menu-ancestor > a::before {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 11px;
	height: 3px;
	border-radius: 2px;
	background: var(--ohm-gold);
}

.ohm-header__bar--navy .ohm-nav .sub-menu {
	background: var(--ohm-white);
}

.ohm-header__bar--navy .ohm-nav .sub-menu a {
	color: var(--ohm-navy);
	padding: 10px 16px;
}

.ohm-header__baraside {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}

.ohm-header__order {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ohm-gold-light);
	text-decoration: none;
	white-space: nowrap;
}

.ohm-header__order:hover,
.ohm-header__order:focus {
	color: var(--ohm-white);
	text-decoration: underline;
}

.ohm-navsearch__toggle {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.ohm-navsearch__toggle svg {
	width: 19px;
	height: 19px;
	fill: rgba(255, 255, 255, 0.9);
}

.ohm-navsearch__toggle:hover svg,
.ohm-navsearch__toggle:focus svg {
	fill: var(--ohm-gold-light);
}

.ohm-header__bar--light .ohm-navsearch__toggle svg {
	fill: var(--ohm-navy);
}

.ohm-navsearch {
	background: var(--ohm-navy-700);
	padding-block: 14px;
}

/* --- Hero --------------------------------------------------------------- */

/*
 * Panorama mode. `--ohm-hero-ratio` is the uploaded picture's own width/height,
 * written onto the section by the template.
 *
 * The hero is never shorter than the whole photograph at the current width, so
 * on a wide screen the full panorama is on show and the copy sits over it.
 * Where the copy needs more height than the picture has — a phone, mostly —
 * the picture holds the top of the block at full width and dissolves into the
 * navy below it. Either way nothing is cropped off the sides.
 */
@media (min-width: 821px) {
	.ohm-hero--full {
		min-height: calc(100vw / var(--ohm-hero-ratio, 3.2));
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.ohm-hero--full .ohm-hero__media {
		inset: 0 0 auto;
		height: auto;
	}

	.ohm-hero--full .ohm-hero__media img {
		height: auto;
		object-fit: fill;
		/* The bottom edge dissolves rather than stopping on a line. */
		-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
	}

	/* With the picture only occupying the top, the diagonal scrim would darken
	   the empty navy instead of the photograph. Fade downward over it. */
	.ohm-hero--full .ohm-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(11, 37, 69, 0.62) 0%,
			rgba(11, 37, 69, 0.42) 34%,
			rgba(11, 37, 69, 0.72) 72%,
			var(--ohm-navy) 100%
		);
	}
}

/*
 * The phone hero, two ways.
 *
 * --crop (the default, and what the approved design shows): the picture fills
 * the block with the copy over it, cropped to the focal point. Supply a
 * phone-shaped image in the Customizer and the <picture> source serves that
 * instead, so nothing is cropped at all.
 *
 * --band: the whole panorama keeps a strip of its own at the top and the copy
 * sits on the navy below it. Honest about a 3.2:1 picture, but it is a thin
 * strip on a phone.
 */
@media (max-width: 820px) {
	.ohm-hero--crop .ohm-hero__media img {
		object-position: var(--ohm-hero-focus, 50% 50%);
	}

	.ohm-hero--crop .ohm-hero__inner {
		padding-block: 64px 72px;
	}

	/* A crop this tight needs a heavier scrim than the wide view — there is far
	   less picture behind the words. */
	.ohm-hero--crop .ohm-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(11, 37, 69, 0.58) 0%,
			rgba(11, 37, 69, 0.48) 40%,
			rgba(11, 37, 69, 0.82) 100%
		);
	}

	.ohm-hero--band {
		min-height: 0;
		display: block;
	}

	.ohm-hero--band .ohm-hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		height: auto;
	}

	.ohm-hero--band .ohm-hero__media img {
		height: auto;
		object-fit: fill;
		-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	}

	.ohm-hero--band .ohm-hero__overlay {
		display: none;
	}

	.ohm-hero--band .ohm-hero__inner {
		padding-top: 26px;
	}
}

.ohm-hero--center .ohm-hero__inner {
	max-width: 820px;
	padding-block: 20px;
}

.ohm-hero h1 {
	letter-spacing: -0.01em;
}

.ohm-hero__sub {
	font-family: var(--ohm-font-heading);
	font-weight: 400;
	font-size: clamp(1.06rem, 0.95rem + 0.7vw, 1.42rem);
	color: var(--ohm-white);
	margin-bottom: 10px;
}

.ohm-hero__note {
	font-size: 0.98rem;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 26px;
}

/* On a wide screen the handwritten line becomes a floating accent in the
   corner of the photograph instead of another centred line of text. */
@media (min-width: 1000px) {
	.ohm-hero--center .ohm-hero__script {
		position: absolute;
		right: 4%;
		bottom: 12%;
		margin: 0;
		max-width: 260px;
		text-align: center;
		transform: rotate(-4deg);
		z-index: 2;
	}
}

/* --- Service columns ----------------------------------------------------- */

.ohm-tile__list {
	display: none;
	width: 100%;
	text-align: left;
}

.ohm-tile__list > span {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--ohm-body);
	margin-bottom: 7px;
}

.ohm-tile__list svg {
	width: 14px;
	height: 14px;
	flex: none;
	margin-top: 3px;
	fill: var(--ohm-blue);
}

/* --- Offices, photo dissolving into the panel ---------------------------- */

.ohm-blends {
	display: grid;
	gap: 26px;
}

.ohm-blend {
	position: relative;
	display: grid;
	background: var(--ohm-navy);
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	min-height: 300px;
	isolation: isolate;
}

.ohm-blend--green {
	background: #16321f;
}

.ohm-blend__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.ohm-blend__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohm-blend__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.ohm-blend__placeholder svg {
	width: 84px;
	height: 84px;
	fill: rgba(255, 255, 255, 0.14);
}

/* The scrim. On a phone the whole photo sits behind the text; on a wide
   screen it clears to the left so the photograph reads on its own. */
.ohm-blend::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(11, 37, 69, 0.35) 0%,
		rgba(11, 37, 69, 0.78) 55%,
		rgba(11, 37, 69, 0.94) 100%
	);
}

.ohm-blend--green::before {
	background: linear-gradient(
		180deg,
		rgba(15, 41, 24, 0.35) 0%,
		rgba(15, 41, 24, 0.78) 55%,
		rgba(15, 41, 24, 0.94) 100%
	);
}

.ohm-blend__body {
	align-self: end;
	padding: 26px;
	color: rgba(255, 255, 255, 0.88);
}

.ohm-blend__name {
	margin: 0 0 6px;
	font-size: 1.34rem;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ohm-white);
}

.ohm-blend__name a {
	color: inherit;
	text-decoration: none;
}

.ohm-blend__tagline {
	margin: 0 0 18px;
	font-size: 0.97rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.84);
	max-width: 32ch;
}

.ohm-blend__facts {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ohm-blend__facts li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.ohm-blend__facts svg {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 2px;
	fill: var(--ohm-gold-light);
}

.ohm-blend__facts a {
	color: var(--ohm-white);
	text-decoration: none;
	font-weight: 600;
}

.ohm-blend__cta {
	align-self: flex-start;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

/* --- Attorney, figures and a review, composed ---------------------------- */

.ohm-attorney__grid {
	display: grid;
	gap: 30px;
}

.ohm-attorney__intro {
	display: grid;
	gap: 22px;
	align-items: start;
}

/*
 * Below 700px the portrait and the copy stop sitting side by side and stack,
 * and left-aligned text under a full-width photograph has nothing to align to —
 * it reads as though it has slipped. Centred, the block holds together as one
 * column, which is also how the rest of the page behaves on a phone.
 */
@media (max-width: 699px) {
	.ohm-attorney__body {
		text-align: center;
	}

	.ohm-attorney__body .ohm-section-head__sub,
	.ohm-attorney__body p {
		/* Even line lengths matter more once the ragged edge is on both sides. */
		text-wrap: balance;
	}

	.ohm-attorney__body p {
		text-wrap: pretty;
	}
}

.ohm-attorney__photo {
	border-radius: var(--ohm-radius-lg);
	overflow: hidden;
	background: var(--ohm-blue-light);
	line-height: 0;
	/* Stretched to the height of the text beside it rather than sized by its
	   own aspect ratio — a portrait that stops two thirds of the way down the
	   paragraph is what made this block read as half-empty. The minimum keeps
	   it from collapsing when the copy is short. */
	min-height: 100%;
	/* Stretching to match the text is the point of this; stretching to match a
	   review somebody has just expanded is not. Past this the column simply
	   ends and the white below it is quieter than a two-storey portrait. */
	max-height: 520px;
	align-self: stretch;
}

.ohm-attorney__photo img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	object-position: center top;
}

.ohm-attorney__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
}

.ohm-attorney__placeholder svg {
	width: 68px;
	height: 68px;
	fill: rgba(11, 37, 69, 0.16);
}

.ohm-attorney__heading {
	margin: 0 0 6px;
	/* Capped so "MEET YOUR ATTORNEY" stays on one line, as it does in the
	   comp — at 1.85rem with 0.02em tracking it missed by a few pixels and
	   broke after "YOUR", which reads as a mistake rather than a choice. */
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.72rem);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ohm-navy);
}

.ohm-attorney__body .ohm-section-head__sub {
	margin-bottom: 14px;
}

/* The comp's paragraph is five lines and then the button. Tighter leading and
   a smaller trailing margin are most of the difference between that and the
   deep column this block had grown into. */
.ohm-attorney__body p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1em;
}

.ohm-attorney__body > *:last-child {
	margin-bottom: 0;
}

.ohm-attorney__body .ohm-checklist {
	margin-bottom: 20px;
}

.ohm-attorney__body .ohm-checklist li {
	margin-bottom: 8px;
	font-size: 0.94rem;
}

/*
 * The figures sit on their own row and the carousel takes whatever is left, so
 * the card grows to the height of the text column beside it instead of ending
 * early and leaving a hole. The about copy is as long as the firm wants it to
 * be; a fixed-height card can only ever be right for one length of it.
 */
.ohm-attorney__aside {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 16px;
	align-content: stretch;
}

.ohm-attorney__aside .ohm-rings__grid {
	gap: 14px 0;
}


.ohm-attorney__aside .ohm-ring__icon {
	width: 54px;
	height: 54px;
}

.ohm-attorney__aside .ohm-ring__icon svg {
	width: 24px;
	height: 24px;
}

.ohm-attorney__aside .ohm-ring__num {
	font-size: 0.95rem;
	white-space: nowrap;
}

.ohm-attorney__aside .ohm-ring__label {
	font-size: 0.8rem;
}

.ohm-attorney__aside .ohm-reviews {
	max-width: none;
	/* The carousel row takes the space, not a centred block floating in it —
	   `.ohm-reviews` sets align-items:center for its own sake, so the card has
	   to opt back out. */
	grid-template-rows: minmax(0, 1fr) auto;
	align-content: stretch;
}

.ohm-attorney__aside .ohm-reviews__track {
	padding: 22px 24px;
	align-self: stretch;
	display: grid;
	align-content: center;
	/* Grows with the column, but only so far. Against a very long about copy an
	   uncapped card becomes a half-metre of white with three lines floating in
	   the middle of it, which is its own kind of wrong. */
	max-height: 460px;
}

/* The arrows stay arrow-sized and centred against the card they page. */
.ohm-attorney__aside .ohm-reviews__nav {
	align-self: center;
}

/* --- No testimonials yet ------------------------------------------------- */

/*
 * The approved shape is the same either way — portrait and copy on the left,
 * figures over a quote on the right — so a site with no quote yet keeps it and
 * simply centres the figures in the column rather than leaving them stranded
 * at the top of it. (An earlier pass reshaped the whole block to one column
 * here. It filled the space, but it was not the design.)
 */
.ohm-attorney--solo .ohm-attorney__aside {
	grid-template-rows: auto;
	align-content: center;
}

/* --- Message band, three columns ---------------------------------------- */

.ohm-msgband__grid {
	display: grid;
	gap: 26px;
	align-items: start;
}

.ohm-msgband__heading {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ohm-white);
}

.ohm-msgband__sub {
	margin: 0 0 14px;
	font-size: 0.95rem;
	color: var(--ohm-gold-light);
}

.ohm-msgband__script {
	margin: 0 0 4px;
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
	line-height: 1.25;
	color: var(--ohm-white);
}

/* --- The compact form ---------------------------------------------------- */

/* Hidden inputs are still grid items: left alone they each claim a row and a
   row-gap, which is 60-odd pixels of nothing in the middle of the form. */
.ohm-form input[type="hidden"] {
	display: none;
}

.ohm-form--compact {
	row-gap: 16px;
}

.ohm-form__col {
	display: grid;
	gap: 12px;
	align-content: start;
	min-width: 0;
}

.ohm-form__col--aside {
	gap: 16px;
}

.ohm-form__col--aside .ohm-btn {
	justify-self: start;
}

.ohm-form--compact .ohm-field--inline input,
.ohm-form--compact > .ohm-field select {
	padding: 11px 14px;
	font-size: 0.94rem;
}

.ohm-form--compact > .ohm-field > label:not(.screen-reader-text) {
	margin-bottom: 5px;
	font-size: 0.8rem;
}

.ohm-form--compact .ohm-field--inline input::placeholder {
	color: var(--ohm-muted);
	opacity: 1;
}

/* Two columns of plain tick boxes, as the comp has them. `auto-fit` with a
   210px floor collapses to one column in a third of the band's width, which
   turned seven options into a seven-deep ladder; this column is narrow on
   purpose, so it is told how many columns to use rather than asked. And the
   options lose their pill: on the navy, an outlined box around every label is
   more furniture than information. */
.ohm-form--compact .ohm-needs__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 6px 18px;
}

@media (min-width: 520px) {
	.ohm-form--compact .ohm-needs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ohm-form--compact .ohm-needs__option,
.ohm-form .ohm-form--compact .ohm-needs__option {
	background: transparent;
	border: 0;
	padding: 3px 0;
	font-size: 0.9rem;
	font-weight: 500;
}

.ohm-form--compact .ohm-needs__other {
	grid-column: 1 / -1;
	margin-top: 4px;
}

.ohm-form--compact .ohm-needs__other input {
	padding: 10px 14px;
	font-size: 0.9rem;
}

.ohm-form--compact .ohm-form__consent {
	font-size: 0.72rem;
	line-height: 1.5;
	margin: 0;
}

.ohm-msgband .ohm-form__msg:empty {
	display: none;
}

.ohm-msgband .ohm-form label {
	color: rgba(255, 255, 255, 0.86);
	font-weight: 600;
}

.ohm-msgband .ohm-form input,
.ohm-msgband .ohm-form select,
.ohm-msgband .ohm-form textarea {
	background: var(--ohm-white);
	border-color: transparent;
}

.ohm-msgband .ohm-needs legend {
	color: rgba(255, 255, 255, 0.86);
}

.ohm-msgband .ohm-needs__option {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.32);
	color: rgba(255, 255, 255, 0.9);
	padding: 8px 10px;
	font-size: 0.88rem;
}

.ohm-msgband .ohm-needs__option:has(input:checked) {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--ohm-gold);
	color: var(--ohm-white);
}

/* The compact form's options have no box, so "checked" has to show on the
   label itself rather than on a border that is not there. */
.ohm-msgband .ohm-form--compact .ohm-needs__option {
	padding: 3px 0;
}

.ohm-msgband .ohm-form--compact .ohm-needs__option:has(input:checked) {
	background: transparent;
	color: var(--ohm-gold-light);
	font-weight: 700;
}

.ohm-msgband .ohm-form__consent {
	color: rgba(255, 255, 255, 0.6);
}

.ohm-msgband__offices {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	text-align: left;
}

.ohm-msgband__offices li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}

.ohm-msgband__offices strong {
	color: var(--ohm-white);
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-width: 6.5em;
}

.ohm-msgband__offices a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ohm-gold-light);
	text-decoration: none;
	font-weight: 700;
}

.ohm-msgband__offices svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* The footer's closing band used to fade a picture out of a painted navy
   strip. That treatment is gone — the picture is now the scene along the
   bottom of the whole footer (section 18) and the band with it. */

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

@media (min-width: 700px) {
	.ohm-blends {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The portrait is a column of the block, not a thumbnail beside it. At 200px
	   it left the text running narrow and deep and the photograph ending well
	   short of it, which is where the white space under this section came
	   from. */
	.ohm-attorney__intro {
		grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
		gap: 28px;
		align-items: stretch;
	}

	.ohm-msgband__offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 860px) {
	/*
	 * The services become columns: the soft panel drops away, a hairline
	 * separates them, and each one takes its ticked list back. Below this
	 * width they stay as the two-up tiles the phone comp shows.
	 */
	.ohm-help--columns .ohm-tiles {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		grid-auto-flow: column;
		gap: 0;
	}

	.ohm-help--columns .ohm-tile {
		background: none;
		border: 0;
		border-radius: 0;
		padding: 4px 20px 0;
	}

	.ohm-help--columns .ohm-tile:hover,
	.ohm-help--columns .ohm-tile:focus-visible {
		background: none;
		transform: none;
	}

	.ohm-help--columns .ohm-tile:hover .ohm-tile__label {
		color: var(--ohm-blue);
	}

	.ohm-help--columns .ohm-tile__icon {
		width: 78px;
		height: 78px;
		border-radius: 50%;
		background: var(--ohm-blue-light);
		border: 1px solid rgba(11, 37, 69, 0.07);
		margin-bottom: 4px;
	}

	.ohm-help--columns .ohm-tile__icon svg {
		width: 38px;
		height: 38px;
	}

	.ohm-help--columns .ohm-tile__label {
		font-size: 0.98rem;
		margin-bottom: 4px;
	}

	.ohm-help--columns .ohm-tile + .ohm-tile {
		border-left: 1px solid var(--ohm-line);
	}

	.ohm-tile__list {
		display: block;
	}

	.ohm-help__foot {
		display: none;
	}

	/* Each office panel puts its photograph on the outside edge, so the pair
	   turn to face each other rather than repeating. */
	.ohm-blend {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 330px;
	}

	.ohm-blend__body {
		grid-column: 2;
		align-self: center;
		padding: 30px 30px 30px 6px;
	}

	.ohm-blend::before {
		background: linear-gradient(
			90deg,
			rgba(11, 37, 69, 0) 0%,
			rgba(11, 37, 69, 0.12) 34%,
			rgba(11, 37, 69, 0.82) 54%,
			var(--ohm-navy) 66%
		);
	}

	.ohm-blend--green::before {
		background: linear-gradient(
			90deg,
			rgba(22, 50, 31, 0) 0%,
			rgba(22, 50, 31, 0.12) 34%,
			rgba(22, 50, 31, 0.82) 54%,
			#16321f 66%
		);
	}

	.ohm-blend:nth-child(even) .ohm-blend__body {
		grid-column: 1;
		padding: 30px 6px 30px 30px;
	}

	.ohm-blend:nth-child(even)::before {
		background: linear-gradient(
			270deg,
			rgba(11, 37, 69, 0) 0%,
			rgba(11, 37, 69, 0.12) 34%,
			rgba(11, 37, 69, 0.82) 54%,
			var(--ohm-navy) 66%
		);
	}

	.ohm-blend--green:nth-child(even)::before {
		background: linear-gradient(
			270deg,
			rgba(22, 50, 31, 0) 0%,
			rgba(22, 50, 31, 0.12) 34%,
			rgba(22, 50, 31, 0.82) 54%,
			#16321f 66%
		);
	}
}

@media (min-width: 1000px) {
	.ohm-attorney__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		gap: 40px;
		align-items: stretch;
	}

	/* With no quote under them the figures can afford to be a little larger,
	   which reads as a deliberate row rather than a leftover. */
	.ohm-attorney--solo .ohm-attorney__aside .ohm-ring__icon {
		width: 62px;
		height: 62px;
	}

	.ohm-attorney--solo .ohm-attorney__aside .ohm-ring__num {
		font-size: 1.05rem;
	}

	/* Three columns, as the comp has them: the invitation, the fields, and the
	   tick boxes with the button under them. Two columns left the left-hand
	   side half empty and stacked the form into a tall ladder, which is what
	   made this band twice the height it should be. */
	.ohm-msgband__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) minmax(0, 1.22fr);
		gap: 40px;
	}

	.ohm-msgband__form {
		grid-column: span 2;
		display: grid;
	}

	.ohm-msgband__form .ohm-form--compact {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		column-gap: 34px;
	}

	.ohm-form--compact > .ohm-form__msg {
		grid-column: 1 / -1;
	}

	.ohm-msgband__form .ohm-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohm-attorney__aside .ohm-rings__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Hairlines between the figures, as in the comp — four numbers in a row
	   with nothing between them read as one run-on line. Only once they are
	   genuinely a row; in the two-up layout below this width the rule would
	   land down the middle instead. */
	.ohm-attorney__aside .ohm-ring {
		padding-inline: 8px;
	}

	.ohm-attorney__aside .ohm-ring + .ohm-ring {
		border-left: 1px solid var(--ohm-line);
	}

	/* The centred header carries both offices itself on a wide screen, so the
	   strip above it would only repeat them. */
	.ohm-topbar--offices {
		display: none;
	}
}

/* Three zones plus the button need about 1200px. Below that the addresses go
   first — they are on the contact page and in the footer — and the numbers
   tighten, before the whole row collapses to the phone header. */
@media (max-width: 1199px) {
	.ohm-headoffice__address {
		display: none;
	}

	.ohm-header--centered .ohm-header__top {
		gap: 16px;
	}

	.ohm-header--centered .ohm-header__center {
		padding: 0 20px;
	}

	.ohm-headphone strong {
		font-size: 1.04rem;
	}

	.ohm-header--centered .ohm-header__cta {
		max-width: 140px;
		padding: 10px 12px;
	}

	.ohm-header--centered .ohm-header__cta span {
		font-size: 0.7rem;
	}
}

@media (max-width: 999px) {
	/* Restated at this specificity: the unconditional three-zone rule above
	   would otherwise keep the logo pinned into a narrow middle column. */
	.ohm-header--centered .ohm-header__top {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 76px;
	}

	.ohm-header--centered .ohm-header__center {
		padding: 0;
		border: 0;
	}
}

/* Between the desktop and phone headers the menu and its right-hand pair are
   wider than the row. The Order Title link steps out first — it is duplicated
   in the footer and the menu — and the menu tightens up. */
@media (max-width: 1150px) {
	.ohm-header__bar--navy .ohm-container {
		gap: 12px;
	}

	.ohm-header__bar--navy .ohm-menu {
		gap: 18px;
	}

	.ohm-header__order {
		display: none;
	}
}

@media (max-width: 1040px) {
	.ohm-header__bar--navy .ohm-nav a {
		font-size: 0.86rem;
	}

	.ohm-header__bar--navy .ohm-menu {
		gap: 14px;
	}
}

@media (max-width: 859px) {
	.ohm-header__bar--navy {
		background: var(--ohm-white);
	}

	.ohm-header__baraside {
		display: none;
	}
}

/* ==========================================================================
   24a. Accent lines — the three treatments
   ========================================================================== */

/*
 * The short lines under the logo, in the hero, over the form and in the footer.
 * They were joined script with a gold brush stroke under them; the firm asked
 * for that gone, so the words stay and Customize → Colors & Fonts → "Accent
 * lines — style" decides how they are set.
 *
 * Sizes are stated per context rather than scaled from one value, because each
 * context had its own size tuned for the script — and a script runs far smaller
 * on the body than a serif at the same point size, so inheriting those numbers
 * would leave the serif and the sans looking shouted. Two-class selectors so
 * they beat the single-class contextual rules further up the sheet.
 */

.ohm-script--serif {
	font-family: var(--ohm-font-heading);
	font-style: italic;
	font-weight: 500;
	font-size: 1.2rem;
	letter-spacing: 0.005em;
	line-height: 1.45;
}

.ohm-hero__script.ohm-script--serif {
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
}

.ohm-msgband__script.ohm-script--serif {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
}

.ohm-footer__script.ohm-script--serif,
.ohm-footer--light .ohm-footer__script.ohm-script--serif {
	font-size: 1.1rem;
}

.ohm-header__script.ohm-script--serif {
	font-size: 0.95rem;
}

.ohm-script--sans {
	font-family: var(--ohm-font-body);
	font-style: normal;
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.6;
}

.ohm-hero__script.ohm-script--sans,
.ohm-msgband__script.ohm-script--sans {
	font-size: 0.88rem;
}

.ohm-footer__script.ohm-script--sans,
.ohm-footer--light .ohm-footer__script.ohm-script--sans,
.ohm-header__script.ohm-script--sans {
	font-size: 0.78rem;
}

/* The phone step-down belongs to the script, which is set large. */
@media (max-width: 640px) {
	.ohm-script--serif {
		font-size: 1.08rem;
	}

	.ohm-script--sans {
		font-size: 0.78rem;
	}
}

/* ==========================================================================
   24b. The menu panel on a phone
   ========================================================================== */

/*
 * On a wide screen the menu is a navy strip, and everything about it is written
 * for white links on navy. On a phone it is not a strip at all — it is a white
 * panel dropped under the header — and those same rules were painting white
 * text on white. The top-level items were not missing, they were invisible:
 * only their dividing rules showed, with the sub-menu floating between them
 * because it happens to carry a colour of its own.
 *
 * These rules sit after the strip's on purpose. Same specificity, later in the
 * file, so the panel wins wherever it applies and the strip is untouched.
 */
@media (max-width: 900px) {
	.ohm-header__bar--navy .ohm-nav a,
	.ohm-header__bar--light .ohm-nav a {
		color: var(--ohm-navy-deep, #0b2545);
		font-size: 1rem;
		font-weight: 600;
		padding: 13px 4px;
	}

	.ohm-header__bar--navy .ohm-nav a:hover,
	.ohm-header__bar--navy .ohm-nav a:focus,
	.ohm-header__bar--navy .ohm-nav .current-menu-item > a,
	.ohm-header__bar--navy .ohm-nav .current_page_item > a,
	.ohm-header__bar--navy .ohm-nav .current-menu-ancestor > a,
	.ohm-header__bar--navy .ohm-nav .current_page_parent > a {
		color: var(--ohm-blue);
	}

	/* The gold underline is positioned 11px up from the bottom of a strip item.
	   In a stacked row that height means it crosses the middle of the word. */
	.ohm-header__bar--navy .ohm-nav .current-menu-item > a::before,
	.ohm-header__bar--navy .ohm-nav .current_page_item > a::before,
	.ohm-header__bar--navy .ohm-nav .current-menu-ancestor > a::before {
		content: none;
	}

	/* Space between items belongs to a strip. A list has dividing rules, and
	   gaps between them only make the rules look arbitrary. */
	.ohm-header__bar--navy .ohm-menu,
	.ohm-header__bar--light .ohm-menu,
	.ohm-header__bar--navy .ohm-nav ul {
		gap: 0;
	}

	.ohm-header__bar--navy .ohm-nav .sub-menu a {
		padding: 11px 14px;
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--ohm-body);
	}

	.ohm-header__bar--navy .ohm-nav .sub-menu a:hover,
	.ohm-header__bar--navy .ohm-nav .sub-menu a:focus {
		color: var(--ohm-blue);
	}

	/* The panel's own breathing room, tightened to match. */
	.ohm-nav > ul {
		padding: 4px var(--ohm-gutter) 12px;
	}

	.ohm-nav .sub-menu {
		padding: 0 0 4px 14px;
		margin-bottom: 4px;
	}

	.ohm-nav .sub-menu li:last-child {
		border-bottom: 0;
	}
}

/* ==========================================================================
   24b. Privacy, cookies and accessibility (v1.18.0)
   ========================================================================== */

/* The message button's own colour lost to `.ohm-callbar a` (one class more
   specific), leaving white text on gold at 2.4:1. */
.ohm-callbar .ohm-callbar__link--message {
	color: var(--ohm-ink);
}

/* Review dots: 9px to look at, 24px to hit (WCAG 2.5.8). */
.ohm-reviews__dots {
	gap: 0;
}

.ohm-reviews__dots button {
	position: relative;
	width: 24px;
	height: 24px;
	background: none;
}

.ohm-reviews__dots button::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: var(--ohm-line);
	transition: background var(--ohm-transition);
}

.ohm-reviews__dots button[aria-selected="true"] {
	background: none;
}

.ohm-reviews__dots button[aria-selected="true"]::before {
	background: var(--ohm-navy);
}

/* The privacy link under the form inherits the note's colour, so it reads on
   the navy message band as well as on a white panel. */
.ohm-form__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Reflow at 320px (WCAG 1.4.10 — the width of a 1280px screen zoomed to
   400%). Grid items default to min-width:auto, so the office page's contact
   column refused to shrink below its widest line and pushed the page 8px
   sideways. */
.ohm-contact-grid > * {
	min-width: 0;
}

/* --- Footer legal links -------------------------------------------------- */

.ohm-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 0;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

.ohm-legal-links li {
	display: flex;
	align-items: center;
	margin: 0;
}

.ohm-legal-links li:not(:last-child)::after {
	content: "";
	width: 1px;
	height: 12px;
	margin: 0 12px;
	background: var(--ohm-line);
}

.ohm-legal-links a,
.ohm-legal-links__btn {
	display: inline-block;
	padding: 4px 0;
	color: var(--ohm-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(11, 37, 69, 0.35);
}

.ohm-legal-links__btn {
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.ohm-legal-links a:hover,
.ohm-legal-links__btn:hover {
	color: var(--ohm-blue);
	text-decoration-color: currentColor;
}

/* The four-column footer is dark. */
.ohm-legal-links--dark {
	justify-content: flex-start;
}

.ohm-legal-links--dark li:not(:last-child)::after {
	background: rgba(255, 255, 255, 0.25);
}

.ohm-legal-links--dark a,
.ohm-legal-links--dark .ohm-legal-links__btn,
.ohm-footer__bottom .ohm-legal-links__btn {
	color: rgba(255, 255, 255, 0.82);
	text-decoration-color: rgba(255, 255, 255, 0.35);
}

.ohm-footer__bottom .ohm-legal-links__btn {
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* --- Cookie notice ------------------------------------------------------- */

/*
 * A card in the corner, not a wall across the page: nothing is blocked while
 * it is up, and "Decline" is the same size and weight as "Accept".
 */
.ohm-consent {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 450;
	width: min(400px, calc(100vw - 40px));
	padding: 20px 22px;
	background: var(--ohm-white);
	color: var(--ohm-body);
	border: 1px solid var(--ohm-line);
	border-top: 3px solid var(--ohm-gold);
	border-radius: var(--ohm-radius-lg);
	box-shadow: var(--ohm-shadow-lg);
	font-size: 0.9rem;
	line-height: 1.55;
}

.ohm-consent[hidden] {
	display: none;
}

.ohm-consent__title {
	margin: 0 0 6px;
	font-family: var(--ohm-font-body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ohm-navy);
}

.ohm-consent__text {
	margin: 0 0 14px;
}

.ohm-consent__text a {
	color: var(--ohm-navy);
	font-weight: 600;
}

.ohm-consent__actions {
	display: flex;
	gap: 10px;
}

.ohm-consent__actions .ohm-btn {
	flex: 1 1 0;
	justify-content: center;
}

/* Room for the sticky call bar when the browser scrolls a focused element
   into view. */
@media (max-width: 900px) {
	html {
		scroll-padding-bottom: 72px;
	}
}

/* Above the sticky call bar on a phone, never on top of it. */
@media (max-width: 900px) {
	.ohm-consent {
		left: 10px;
		right: 10px;
		bottom: calc(66px + env(safe-area-inset-bottom, 0px));
		width: auto;
		padding: 16px 18px;
	}
}

@media print {
	.ohm-consent {
		display: none !important;
	}
}

/* --- Click-to-load map --------------------------------------------------- */

.ohm-map--deferred {
	line-height: 1.5;
	min-height: 260px;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(0deg, transparent 0 39px, rgba(11, 37, 69, 0.05) 39px 40px),
		repeating-linear-gradient(90deg, transparent 0 39px, rgba(11, 37, 69, 0.05) 39px 40px),
		var(--ohm-mist);
}

.ohm-map__placeholder {
	max-width: 420px;
	padding: 28px 22px;
	text-align: center;
}

.ohm-map__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var(--ohm-white);
	box-shadow: var(--ohm-shadow-sm);
}

.ohm-map__icon svg {
	width: 24px;
	height: 24px;
	fill: var(--ohm-navy);
}

.ohm-map__name {
	margin: 0;
	font-weight: 700;
	color: var(--ohm-navy);
}

.ohm-map__addr {
	margin: 2px 0 0;
	font-size: 0.9rem;
}

.ohm-map__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 18px;
	margin-top: 16px;
}

.ohm-map__actions [hidden] {
	display: none;
}

.ohm-map__open {
	font-weight: 600;
	color: var(--ohm-navy);
}

.ohm-map__note {
	margin: 12px 0 0;
	font-size: 0.8rem;
	color: var(--ohm-muted);
}

/* ==========================================================================
   25. Print
   ========================================================================== */

@media print {
	.ohm-topbar,
	.ohm-header,
	.ohm-callbar,
	.ohm-cta,
	.ohm-msgband,
	.ohm-footer__top,
	.ohm-nav-toggle,
	.ohm-sidebar {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
		padding-bottom: 0;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}
}