/*!
Theme Name: UnitedOne
Theme URI: http://localhost:8888/projects/unitedone
Author: ENX2 Marketing
Author URI: https://enx2marketing.com
Description: Custom WordPress theme for UnitedOne Resources (mortgage services, Wilkes-Barre PA). Underscores (_s) starter + ACF Pro Flexible Content page builder. Built from client HTML mockups.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: unitedone
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

UnitedOne is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Fonts (Plus Jakarta Sans + Lora) are enqueued from Google Fonts in functions.php.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens (:root)
# Reset & base
# Typography (global heading scale)
# Layout (container, sections)
# Section helpers (eyebrow / title / sub)
# Buttons
# Utility layer (Bootstrap-style, logical properties)
# Header / navigation
# Responsive navigation (dropdown + accordion)
# Footer
# Accessibility helpers
# Editor content (.entry-content)
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Fonts */
	--font-body: 'Plus Jakarta Sans', sans-serif;
	--font-heading: 'Lora', Georgia, serif;

	/* Colors */
	--color-bg: #f7f2ea;
	--color-bg2: #ede5d5;
	--color-bg3: #e4d9c4;
	--color-navy: #000080;
	--color-navy2: #001e52;
	--color-navy3: #00004d;

	/*
	 * Darker companion to --color-navy, used only as the far stop of
	 * --gradient-navy. The client's v8 mockups (2026-07-26) moved every navy
	 * SURFACE from a flat fill to this 135deg two-stop gradient — nav CTA, hero,
	 * tagline band, differentiators, footer, and every navy section band.
	 * Their `:root` still declares the pre-2026-07-20 `--navy:#001540`, but the
	 * surfaces themselves hard-code `#000080 0%, #001540 100%`, so #001540 is a
	 * live gradient stop here, NOT a stale primary navy.
	 */
	--color-navy-deep: #001540;
	--gradient-navy: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
	--color-gold: #8a6510;
	--color-gold2: #c49a2c;
	--color-gold-light: #d9bd76;
	--color-gold-hover: #ddac2b;
	--color-text: #1a1108;
	--color-text2: #4a3e2a;
	--color-text3: #7a6a50;
	--color-border: #d0c4a8;
	--color-card: #ede5d5;
	--color-navy-deep2: #001a3a;
	/* Warm off-white card surface, distinct from --color-card (beige) and pure
	   white. From the service-detail mockups' `.sv-doc`; unchanged by the
	   2026-07-20 palette revision, which only moved navy and gold2. */
	--color-card-light: #fffdf8;
	--color-white: #ffffff;
	--color-black: #000000;

	/* Font weights */
	--fw-300: 300;
	--fw-400: 400;
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;
	--fw-800: 800;

	/* Spacing scale (mirrors Bootstrap $spacer) */
	--spacer-0: 0;
	--spacer-1: 4px;
	--spacer-2: 8px;
	--spacer-3: 16px;
	--spacer-4: 24px;
	--spacer-5: 48px;

	/* Layout */
	/* Mockup is full-bleed: sections span the viewport with 72px side gutters
	   (padding: 80px 72px), no centered max-width wrapper. The hero and tagline
	   band already render full-bleed, so the remaining sections must match them
	   and the design — hence no container cap. Content-level line lengths are
	   still constrained per-block (.section-sub, .hero-tagline, .quote-text). */
	--container-max: none;
	/* Fluid gutters/rhythm. Maxes equal the mockup's rendered sizes (the old
	   72/80px × the 1.25 zoom = 90/100px) reached at the 1600px design ceiling,
	   scaling smoothly down to comfortable mobile values. */
	--section-pad-x: clamp(18px, 5.81vw - 2.9px, 90px);

	--section-pad-y: clamp(44px, 4.52vw + 27.75px, 100px);
	/* Narrow centered content column for service-detail pages (mockup 1080px × 1.25 zoom). */
	--container-narrow: 1350px;
	/* Height of the sticky header. Single source of truth: consumed by
	   .site-header's min-height AND html's scroll-padding-top, so an in-page
	   anchor can never land underneath the header. Keep them sharing this token —
	   the two drifting apart is exactly the bug it prevents. */
	--header-h: clamp(64px, 5.73vw + 43.4px, 135px);
	--radius-card: 12px;
	--radius-btn: 2px;
}

/*--------------------------------------------------------------
# Reset & base
--------------------------------------------------------------*/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* No global zoom. The design is fully fluid instead: every type/space value
	   is a clamp() whose MAX equals the mockup's rendered size (what the old
	   1.25 zoom produced) reached at the 1600px design ceiling, interpolating
	   down to mobile. So >=1600px matches the mockup and everything below scales
	   continuously — no fixed desktop values, no breakpoint jumps. */

	/* In-page anchors (#story, #mission, #values, #sv-menu, footer jump links)
	   animate instead of snapping. Done in CSS rather than a JS click handler on
	   purpose: native scrolling keeps the URL hash, the :target match, the back
	   button and focus order all intact, which a preventDefault()-based handler
	   has to re-implement. Also applies to the .back-to-top button, whose own
	   scrollTo({behavior}) in custom.js still wins where it sets it explicitly. */
	scroll-behavior: smooth;
	/* Offset every scroll target by the sticky header, or the heading lands
	   behind it. Also fixes cross-page anchors (e.g. /about-us/#mission from the
	   footer), where the browser jumps on load but still honours this padding. */
	scroll-padding-top: var(--header-h);
}

body {
	font-family: var(--font-body);
	font-weight: var(--fw-400);
	background-color: var(--color-bg);
	color: var(--color-text);
	/* Mockup sets no body line-height (browser default `normal`); multi-line
	   copy carries its own explicit line-height (1.7–1.82). Matching `normal`
	   here keeps single-line labels/headings on the same vertical rhythm as
	   the design instead of the looser 1.6 we had. */
	line-height: normal;
	min-height: 100vh;
	overflow-x: hidden;
	/* No font-smoothing override: the mockup renders with the browser default
	   (subpixel on macOS). Forcing `antialiased` here made every weight render
	   visibly thinner/lighter than the design. Match the mockup — omit it. */
}

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

a {
	color: var(--color-gold);
	text-decoration: none;
	transition: color 0.3s ease;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-gold2);
    outline-offset: 2px;
}
a:hover {
	color: var(--color-gold2);
}

ul,
ol {
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

svg {
	display: block;
}

/*--------------------------------------------------------------
# Typography (global heading scale)
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-600);
	color: var(--color-navy);
	/* Mockup sets no line-height on headings (browser `normal`). .hero-title
	   still overrides with its own 1.08; section titles now match the design's
	   looser heading rhythm instead of a tight 1.15. */
	line-height: normal;
}

h1, .font-70 { font-size: clamp(40px, 5vw, 70px); }
h2, .font-60 { font-size: clamp(36px, 4vw, 60px); }
h3, .font-50 { font-size: clamp(30px, 3vw, 50px); }
h4, .font-40 { font-size: clamp(26px, 2.5vw, 40px); }
h5, .font-30 { font-size: clamp(22px, 2vw, 30px); }
h6, .font-24 { font-size: clamp(20px, 1.5vw, 24px); }

p {
	line-height: 1.7;
	margin-block-end: 22px;
}

/*--------------------------------------------------------------
# Layout (container, sections)
--------------------------------------------------------------*/
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--section-pad-x);
}

.flexible-section {
	position: relative;
	padding-block: var(--section-pad-y);
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.section-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/*
 * Lift a section's own content above its background video.
 * The video is `position: absolute; z-index: 0`, so in any layout that never
 * supported video the content — being static — painted UNDER it. Only the 7
 * layouts that already rendered video had thought about this; the other 30 now
 * can, so the rule has to exist.
 * Deliberately scoped to `.has-bg-video` (set by unitedone_section_bg_class()):
 * `position: relative` creates a containing block, and applying it to every
 * section's children would silently re-anchor absolutely-positioned descendants
 * across all 37 layouts.
 */
.flexible-section.has-bg-video > *:not(.section-bg-video) {
	position: relative;
	z-index: 1;
}

/*--------------------------------------------------------------
# Section helpers
--------------------------------------------------------------*/
.section-ey {
	font-size: clamp(12.38px, 0.11vw + 11.98px, 13.75px);
	font-weight: var(--fw-700);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-block-end: clamp(10px, 0.4vw + 8px, 15px);
}

/* Always on <h2> — font-family / weight / navy color come from the global
   heading rule; this only adds the fluid size + spacing. */
.section-ti {
	/* Fluid: 45px (mockup rendered size) at the 1600px ceiling, down to ~29px. */
	font-size: clamp(28.8px, 1.306vw + 24.1px, 45px);
	margin-block-end: clamp(10px, 0.4vw + 8px, 15px);
}

.section-sub {
	font-size: clamp(15.94px, 0.227vw + 15.12px, 18.75px);
	color: var(--color-text2);
	line-height: 1.72;
	margin-block-end: clamp(30px, 2.419vw + 21.29px, 60px);
	max-width: 62ch;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
	display: inline-block;
	border: none;
	border-radius: var(--radius-btn);
	padding: clamp(13px, 0.9vw + 9.6px, 17px) clamp(26px, 2.2vw + 16px, 42px);
	font-family: var(--font-body);
	font-size: clamp(12.94px, 0.116vw + 12.52px, 14.38px);
	font-weight: var(--fw-800);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}

.btn-gold {
	background-color: var(--color-gold2);
	color: var(--color-navy);
}

.btn-gold:hover {
	/* Brighten the gold rather than switching to navy — the old navy hover made
	   this button vanish on the navy hero (navy-on-navy). This reads clearly on
	   both the navy and cream sections while keeping the high-contrast navy text. */
	background-color: var(--color-gold-hover);
	color: var(--color-navy);
}

.btn-outline {
	color: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: clamp(12px, 0.8vw + 9px, 16px) clamp(22px, 1.8vw + 13px, 35px);
	font-weight: var(--fw-600);
	letter-spacing: 0.1em;
}

.btn-outline:hover {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Ghost button for LIGHT sections (navy text/border on white) */
.btn-outline-dark {
	background-color: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-border);
	font-weight: var(--fw-700);
	letter-spacing: 0.1em;
}

.btn-outline-dark:hover {
	border-color: var(--color-navy);
}

/*--------------------------------------------------------------
# Forms (.uo-form — Gravity Forms in the theme's design language)
--------------------------------------------------------------*/
/*
Gravity Forms' own CSS and its "orbital" theme framework are switched off in
functions.php, so the plugin emits plain legacy markup and everything below is
the sole source of form styling. Two variants:

  .uo-form-dark   — on navy bands (careers resume form)
  .uo-form-light  — on cream sections (contact form)

Values are the mockup's CSS px × 1.25, matching the site-wide fluid scale.
*/
.uo-form .gform_wrapper { margin: 0; }

.uo-form .gform_fields {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 0.65vw + 11.7px, 20px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.uo-form .gfield { margin: 0; }

.uo-form .gfield_label {
	display: block;
	font-size: clamp(11.82px, 0.106vw + 11.44px, 13.13px);
	font-weight: var(--fw-700);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: clamp(6px, 0.22vw + 5.2px, 8.75px);
}

/* GF appends a "(Required)" span; the asterisk-free label reads better small. */
.uo-form .gfield_required_text {
	letter-spacing: 0.06em;
	text-transform: none;
	opacity: 0.6;
	margin-inline-start: 6px;
}

.uo-form input[type='text'],
.uo-form input[type='email'],
.uo-form input[type='tel'],
.uo-form input[type='url'],
.uo-form input[type='number'],
.uo-form select,
.uo-form textarea {
	width: 100%;
	border-radius: 3.75px;
	padding: clamp(11px, 0.32vw + 9.8px, 15px) clamp(13px, 0.36vw + 11.7px, 17.5px);
	font-family: var(--font-body);
	font-size: clamp(14.14px, 0.322vw + 12.98px, 18.13px);
	line-height: 1.4;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.uo-form textarea {
	min-height: 150px;
	resize: vertical;
	height: 150px;
}

/* Field description / validation copy */
.uo-form .gfield_description {
	font-size: clamp(12.38px, 0.11vw + 11.98px, 13.75px);
	line-height: 1.6;
	padding-top: 6px;
}

body .uo-form .gfield_validation_message, body .uo-form .uo-form .validation_message {
	font-size: clamp(12.38px, 0.11vw + 11.98px, 13.75px);
	font-weight: var(--fw-600);
	color: #c0392b;
}

.uo-form .gform_validation_errors {
	border-radius: 4px;
	padding: 14px 18px;
	margin-bottom: 20px;
	background: rgba(192, 57, 43, 0.08);
	border: 1px solid rgba(192, 57, 43, 0.35);
}

.uo-form .gform_validation_errors h2 {
	font-family: var(--font-body);
	font-size: clamp(14.14px, 0.322vw + 12.98px, 18.13px);
	color: #c0392b;
	margin: 0;
}
body .gfield_required_asterisk {
	color: #c0392b;
}

/*
 * Hide Gravity Forms' error SUMMARY banner. Requested explicitly; deliberately
 * an unscoped selector so it also covers any form rendered outside .uo-form.
 * The two rules above are left intact so removing this one restores the styled
 * banner — nothing has to be rebuilt.
 *
 * Per-field messages (.gfield_validation_message / .validation_message, styled
 * above) are NOT hidden, so a failing field still tells the user what is wrong.
 * That matters: GF moves focus to this banner on a failed submit, so with it
 * hidden the per-field text is the only remaining error signal.
 */
.gform_validation_errors { display: none; }

/* File upload — the whole field becomes the dashed drop zone (mockup .cr-file) */
.uo-form .gfield--type-fileupload {
	border: 1px dashed rgba(196, 154, 26, 0.5);
	border-radius: 5px;
	padding: clamp(18px, 0.77vw + 15.2px, 27.5px);
	text-align: center;
}

.uo-form .gfield--type-fileupload .gfield_label {
	font-size: clamp(13.81px, 0.197vw + 13.1px, 16.25px);
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 5px;
}

.uo-form .gfield--type-fileupload input[type='file'] {
	margin-top: 15px;
	font-size: clamp(12.38px, 0.11vw + 11.98px, 15px);
	max-width: 100%;
}

/*
 * The drop-zone caption (mockup `.cr-file span`, 11.5 x 1.25 = 14.38) sits
 * directly beneath the label, so it drops the generic description's top padding
 * — the label's own 5px margin is the whole gap in the mockup.
 * Requires the GF field's descriptionPlacement to be "above"; see
 * build-scripts/populate/gf-careers-upload.php.
 */
.uo-form .gfield--type-fileupload .gfield_description:not(.gform_fileupload_rules) {
	padding-top: 0;
	font-size: clamp(12.94px, 0.116vw + 12.52px, 14.38px);
}

/*
 * GF appends its own "Accepted file types: pdf, doc, docx, Max. file size: 10 MB."
 * line, which the mockup does not have — the caption above already says
 * "PDF or Word document". Hidden VISUALLY ONLY: the input's aria-describedby
 * still points at it, so screen readers keep the size/type limits.
 */
.uo-form .gform_fileupload_rules {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Submit */
.uo-form .gform_footer {
	margin: clamp(6px, 0.16vw + 5.4px, 10px) 0 0;
	padding: 0;
}

.uo-form .gform_button {
	display: inline-block;
	border-radius: var(--radius-btn);
	padding: clamp(13px, 0.9vw + 9.6px, 17.5px) clamp(26px, 2.2vw + 16px, 42.5px);
	font-family: var(--font-body);
	font-size: clamp(12.94px, 0.116vw + 12.52px, 14.38px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.form-band .uo-form .gform_button {
	width: 100%;
}
body .ginput_preview_list strong {
	color: var(--color-gold2);
}
body .ginput_preview_list .ginput_preview {
	position: relative;
}
body .ginput_preview_list .ginput_preview .gform_delete {
	position: absolute;
	right: 22%;
	top: -5px;
	z-index: 1;
}

/* GF's AJAX spinner */
.uo-form .gform_ajax_spinner { margin-inline-start: 12px; }

/* ── Dark variant (navy bands) ─────────────────────────────── */
.uo-form-dark .gfield_label { color: rgba(255, 255, 255, 0.55); }

.uo-form-dark input[type='text'],
.uo-form-dark input[type='email'],
.uo-form-dark input[type='tel'],
.uo-form-dark select,
.uo-form-dark textarea {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--color-white);
}

.uo-form-dark input::placeholder,
.uo-form-dark textarea::placeholder { color: rgba(255, 255, 255, 0.35); }

.uo-form-dark input:focus,
.uo-form-dark select:focus,
.uo-form-dark textarea:focus {
	outline: none;
	border-color: var(--color-gold2);
	background: rgba(255, 255, 255, 0.1);
}

.uo-form-dark .gfield--type-fileupload {
	background: rgba(255, 255, 255, 0.03);
}

.uo-form-dark .gfield--type-fileupload .gfield_label { color: var(--color-white); }
.uo-form-dark .gfield_description { color: rgba(255, 255, 255, 0.4); }
.uo-form-dark .gfield--type-fileupload input[type='file'] { color: rgba(255, 255, 255, 0.6); }

.uo-form-dark .gform_button {
	background-color: var(--color-gold2);
	color: var(--color-navy);
	border: none;
	font-weight: var(--fw-800);
}

.uo-form-dark .gform_button:hover { background-color: var(--color-gold-hover); }

/* ── Light variant (cream sections) ────────────────────────── */
.uo-form-light .gfield_label { color: var(--color-text3); }

.uo-form-light input[type='text'],
.uo-form-light input[type='email'],
.uo-form-light input[type='tel'],
.uo-form-light select,
.uo-form-light textarea {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.uo-form-light input:focus,
.uo-form-light select:focus,
.uo-form-light textarea:focus {
	outline: none;
	border-color: var(--color-gold2);
}

.uo-form-light .gfield_description { color: red; }

.uo-form-light .gform_button {
	background: var(--gradient-navy);
	color: var(--color-white);
	border: 1px solid rgba(196, 154, 26, 0.45);
	font-weight: var(--fw-700);
	letter-spacing: 0.12em;
}

.uo-form-light .gform_button:hover {
	background: var(--color-navy3);
}

/* Confirmation message after a successful submit */
.uo-form .gform_confirmation_message {
	font-size: clamp(14.35px, 0.204vw + 13.62px, 16.88px);
	line-height: 1.7;
}

.uo-form-dark .gform_confirmation_message { color: rgba(255, 255, 255, 0.75); }
.uo-form-light .gform_confirmation_message { color: var(--color-text2); }

/* Two-up rows: GF's half-width fields (mockup .ct-row) */
@media (min-width: 601px) {
	.uo-form .gform_fields {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.uo-form .gfield { grid-column: span 2; }
	.uo-form .gfield.gf_left_half,
	.uo-form .gfield.gf_right_half { grid-column: span 1; }
}

/*--------------------------------------------------------------
# Utility layer (Bootstrap-style naming, logical properties)
--------------------------------------------------------------*/
/* Margin */
.m-0 { margin: var(--spacer-0); }
.m-1 { margin: var(--spacer-1); }
.m-2 { margin: var(--spacer-2); }
.m-3 { margin: var(--spacer-3); }
.m-4 { margin: var(--spacer-4); }
.m-5 { margin: var(--spacer-5); }

.mt-0 { margin-block-start: var(--spacer-0); }
.mt-1 { margin-block-start: var(--spacer-1); }
.mt-2 { margin-block-start: var(--spacer-2); }
.mt-3 { margin-block-start: var(--spacer-3); }
.mt-4 { margin-block-start: var(--spacer-4); }
.mt-5 { margin-block-start: var(--spacer-5); }

.mb-0 { margin-block-end: var(--spacer-0); }
.mb-1 { margin-block-end: var(--spacer-1); }
.mb-2 { margin-block-end: var(--spacer-2); }
.mb-3 { margin-block-end: var(--spacer-3); }
.mb-4 { margin-block-end: var(--spacer-4); }
.mb-5 { margin-block-end: var(--spacer-5); }

.ms-0 { margin-inline-start: var(--spacer-0); }
.ms-3 { margin-inline-start: var(--spacer-3); }
.me-0 { margin-inline-end: var(--spacer-0); }
.me-3 { margin-inline-end: var(--spacer-3); }
.mx-auto { margin-inline: auto; }
.mx-3 { margin-inline: var(--spacer-3); }
.my-3 { margin-block: var(--spacer-3); }

/* Padding */
.p-0 { padding: var(--spacer-0); }
.p-1 { padding: var(--spacer-1); }
.p-2 { padding: var(--spacer-2); }
.p-3 { padding: var(--spacer-3); }
.p-4 { padding: var(--spacer-4); }
.p-5 { padding: var(--spacer-5); }

.pt-0 { padding-block-start: var(--spacer-0); }
.pt-3 { padding-block-start: var(--spacer-3); }
.pb-0 { padding-block-end: var(--spacer-0); }
.pb-3 { padding-block-end: var(--spacer-3); }
.ps-3 { padding-inline-start: var(--spacer-3); }
.pe-3 { padding-inline-end: var(--spacer-3); }
.px-3 { padding-inline: var(--spacer-3); }
.py-3 { padding-block: var(--spacer-3); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }

.gap-1 { gap: var(--spacer-1); }
.gap-2 { gap: var(--spacer-2); }
.gap-3 { gap: var(--spacer-3); }
.gap-4 { gap: var(--spacer-4); }
.gap-5 { gap: var(--spacer-5); }

/* Text */
.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.fw-normal { font-weight: var(--fw-400); }
.fw-medium { font-weight: var(--fw-500); }
.fw-semibold { font-weight: var(--fw-600); }
.fw-bold { font-weight: var(--fw-700); }
.fw-extrabold { font-weight: var(--fw-800); }

/* Font family */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* Text color */
.text-white { color: var(--color-white); }
.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-gold-2 { color: var(--color-gold2); }
.text-2 { color: var(--color-text2); }
.text-3 { color: var(--color-text3); }

/* Font weight (numeric aliases) */
.fw-400 { font-weight: var(--fw-400); }
.fw-500 { font-weight: var(--fw-500); }
.fw-600 { font-weight: var(--fw-600); }
.fw-700 { font-weight: var(--fw-700); }
.fw-800 { font-weight: var(--fw-800); }

/* Line height (name = value ×100; body copy consolidates to .lh-17 / .lh-18) */
.lh-1   { line-height: 1; }
.lh-105 { line-height: 1.05; }
.lh-108 { line-height: 1.08; }
.lh-115 { line-height: 1.15; }
.lh-118 { line-height: 1.18; }
.lh-12  { line-height: 1.2; }
.lh-125 { line-height: 1.25; }
.lh-135 { line-height: 1.35; }
/* Added for the service-hero docstack seal: 2 lines of 10px inside a 65px disc,
   where .lh-135/.lh-145 are each 0.5px/line out. */
.lh-14  { line-height: 1.4; }
.lh-145 { line-height: 1.45; }
.lh-15  { line-height: 1.5; }
.lh-155 { line-height: 1.55; }
.lh-16  { line-height: 1.6; }
.lh-17  { line-height: 1.7; }
.lh-18  { line-height: 1.8; }

/* Fluid font sizes — clamp() internal; name = desktop max px (1600px ceiling). */
/* Mockup 8px x 1.25 = 10. Added for the service-hero docstack seal; the nearest
   existing step (.fs-11, max 11.25) was 1.25px out. */
.fs-10 { font-size: clamp(9px, 0.081vw + 8.71px, 10px); }
.fs-11 { font-size: clamp(10.13px, 0.09vw + 9.8px, 11.25px); }
.fs-12 { font-size: clamp(11.25px, 0.101vw + 10.89px, 12.5px); }
.fs-13 { font-size: clamp(11.82px, 0.106vw + 11.44px, 13.13px); }
.fs-14 { font-size: clamp(12.38px, 0.11vw + 11.98px, 13.75px); }
.fs-15 { font-size: clamp(13.5px, 0.121vw + 13.06px, 15px); }
.fs-16 { font-size: clamp(13.81px, 0.197vw + 13.1px, 16.25px); }
.fs-17 { font-size: clamp(14.35px, 0.204vw + 13.62px, 16.88px); }
.fs-18 { font-size: clamp(14.14px, 0.322vw + 12.98px, 18.13px); }
.fs-19 { font-size: clamp(15.94px, 0.227vw + 15.12px, 18.75px); }
.fs-20 { font-size: clamp(17px, 0.242vw + 16.13px, 20px); }
.fs-22 { font-size: clamp(15.75px, 0.494vw + 13.97px, 21.88px); }
.fs-24 { font-size: clamp(16.6px, 0.577vw + 14.52px, 23.75px); }
.fs-25 { font-size: clamp(17.5px, 0.605vw + 15.32px, 25px); }
.fs-26 { font-size: clamp(18.38px, 0.635vw + 16.1px, 26.25px); }
.fs-27 { font-size: clamp(19.25px, 0.665vw + 16.85px, 27.5px); }
.fs-28 { font-size: clamp(20.13px, 0.695vw + 17.63px, 28.75px); }
.fs-30 { font-size: clamp(21px, 0.726vw + 18.39px, 30px); }
.fs-31 { font-size: clamp(21.88px, 0.756vw + 19.16px, 31.25px); }
.fs-33 { font-size: clamp(22.1px, 0.839vw + 19.08px, 32.5px); }
.fs-34 { font-size: clamp(22.28px, 0.925vw + 18.95px, 33.75px); }
.fs-36 { font-size: clamp(23.2px, 1.052vw + 19.41px, 36.25px); }
.fs-39 { font-size: clamp(24.8px, 1.125vw + 20.75px, 38.75px); }
.fs-40 { font-size: clamp(25.6px, 1.161vw + 21.42px, 40px); }
.fs-41 { font-size: clamp(26.4px, 1.198vw + 22.09px, 41.25px); }
.fs-42 { font-size: clamp(27.2px, 1.234vw + 22.76px, 42.5px); }
.fs-45 { font-size: clamp(28.8px, 1.306vw + 24.1px, 45px); }
.fs-55 { font-size: clamp(33px, 1.774vw + 26.61px, 55px); }
/* 46 x 1.25 = 57.5 — the Privacy Policy hero h1, the only page hero the client
   sets below 52px. fs-55 and fs-60 are both 2.5px out, past the ~1px tolerance,
   so this step was derived with the scale's own formula: min = max x 0.59 (the
   55-65 band ratio), A = (max-min)/12.4, B = min - (max-min) x 0.290322. */
.fs-57 { font-size: clamp(33.93px, 1.9vw + 27.09px, 57.5px); }
.fs-60 { font-size: clamp(34.8px, 2.032vw + 27.48px, 60px); }
.fs-62 { font-size: clamp(36.25px, 2.117vw + 28.63px, 62.5px); }
.fs-65 { font-size: clamp(37.7px, 2.2vw + 29.78px, 65px); }
.fs-72 { font-size: clamp(36px, 2.94vw + 25.4px, 72.5px); }
.fs-90 { font-size: clamp(49.5px, 3.266vw + 37.74px, 90px); }
.fs-btn { font-size: clamp(12.94px, 0.116vw + 12.52px, 14.38px); }

/*--------------------------------------------------------------
# Header / navigation
--------------------------------------------------------------*/
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 24px at the 1600 ceiling, easing to 16px by 1200 — part of reclaiming the
	   ~168px the header is short of between 1201 and 1470. See .site-branding. */
	gap: clamp(16px, 2vw - 8px, 24px);
	padding-inline: var(--section-pad-x);
	min-height: var(--header-h);
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 200;
}

.site-branding {
	display: flex;
	align-items: center;
	/*
	 * Never let the logo absorb the header's overflow. The logo is sized by
	 * HEIGHT with `width: auto`, so as a shrinkable flex item its width was
	 * being compressed while its height stayed pinned to the clamp — squashing
	 * the mark out of aspect (at 1201px it rendered 115.6×87.5, a 1.32 ratio
	 * against its natural 3.27). Holding it rigid means the space has to come
	 * from the nav instead, which the fluid gaps below provide.
	 */
	flex-shrink: 0;
}

.custom-logo-link { display: block; }
/*
 * Fluid logo: 110px tall (mockup rendered) at the 1600 ceiling → 60px by 1200,
 * → 40px floor on phones.
 *
 * The slope is steeper than the original `5.65vw + 19.7px` on purpose. With BOTH
 * the Login button and the gold "Schedule a Meeting" CTA in the bar, the header
 * needs ~168px more than it has at 1201px; since the logo is 3.27× as wide as it
 * is tall, every 10px of height returns ~33px of width, making this the single
 * biggest lever. Paired with the fluid --nav-gap it keeps the row solvent down
 * to 1201 without falling back to a hamburger.
 *
 * If the CTA is ever dropped again (the v8_6 mockups do), the nav loses ~258px
 * and the original gentler slope fits — revert this line then, not before.
 */
.site-header .custom-logo { height: clamp(40px, 12.5vw - 90px, 110px); width: auto; }

.site-branding .site-title,
.site-branding .site-description {
	font-family: var(--font-heading);
	font-size: clamp(19.25px, 0.665vw + 16.85px, 27.5px);
	color: var(--color-navy);
	margin: 0;
}

.main-navigation .header-menu {
	display: flex;
	/* 36px (mockup) at the 1600 ceiling, easing to 16px by 1200. Five gaps sit
	   between the six top-level items, so this returns up to 100px of the ~168px
	   shortfall at 1201px. Held in a custom property because the CTA's pairing
	   offset below is derived from it — a second literal clamp would silently
	   drift out of sync and overlap the buttons. */
	--nav-gap: clamp(16px, 5vw - 44px, 36px);
	gap: var(--nav-gap);
	align-items: center;
}

.main-navigation .header-menu a {
	font-size: clamp(14.35px, 0.204vw + 13.62px, 16.88px);
	font-weight: var(--fw-600);
	color: var(--color-text2);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.main-navigation .header-menu a:hover {
	color: var(--color-gold);
}

/* Header CTA button */
.main-navigation .header-menu .nav-cta > a,
.nav-cta a{
	background: var(--gradient-navy);
	color: var(--color-white) !important;
	padding: clamp(9px, 0.5vw + 7px, 13px) clamp(20px, 1.2vw + 15px, 30px);
	border-radius: var(--radius-btn);
	/* Keeps nav-link typography (fluid) plus the navy fill + border + uppercase. */
	font-size: clamp(14.35px, 0.204vw + 13.62px, 16.88px);
	font-weight: var(--fw-600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid rgba(196, 154, 44, 0.45);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Header CTA hover — a visible lift on the cream header (had no hover before) */
.main-navigation .header-menu .nav-cta > a:hover,
.nav-cta a:hover {
	background-color: var(--color-navy3);
	border-color: var(--color-gold2);
}

/* Header Login button.
   Built 1:1 from the mockups' `.nav-login` (present in 18 files) with the ×1.25
   calibration applied: mockup 12px / 9px 22px / radius 2px → 15px / 11.25px 27.5px
   / 2px at the 1600px ceiling, fluid below.
   Border width is the documented exception — Chrome keeps border-width
   zoom-invariant, so the mockup's 1px renders as 1px.
   Colour is deliberately NOT re-declared: `.main-navigation .header-menu a`
   already sets var(--color-text2), which is exactly what the mockup asks for. */
.main-navigation .header-menu .nav-login > a,
.nav-login a {
	padding: clamp(7.79px, 0.433vw + 6.06px, 11.25px) clamp(18.33px, 1.1vw + 13.75px, 27.5px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	font-size: clamp(12.76px, 0.181vw + 12.11px, 15px);
	font-weight: var(--fw-700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: 0.18s ease, color 0.18s ease;
	background-color: var(--color-white);

}

/* The mockup explicitly suppresses any inherited pseudo-element here. */
.main-navigation .header-menu .nav-login > a::after,
.nav-login a::after {
	content: none !important;
}

.main-navigation .header-menu .nav-login > a:hover,
.main-navigation .header-menu .nav-login > a:focus-visible,
.nav-login a:hover {
	border-color: var(--color-navy);
	color: var(--color-navy);
	background: transparent;
}

/* Match the two header buttons in height — DESKTOP ONLY.
   The horizontal menu is `align-items: center`, so LOGIN (smaller font +
   padding) rendered 6.5px shorter than the CTA. Stretching both items to the
   flex line's cross size — which the taller CTA already sets — equalises them
   without hard-coding a height that would drift the next time either button's
   font or padding changes. `box-sizing: border-box` is global, so the stretched
   height already includes each button's padding and border.
   Scoped to >=1201px: below that the menu becomes a vertical drawer where
   `.header-menu a` is `display:block` full-width, and forcing flex here shrank
   LOGIN to its text width instead of filling the row. */
@media (min-width: 1201px) {
	.main-navigation .header-menu .nav-login,
	.main-navigation .header-menu .nav-cta {
		display: flex;
		align-self: stretch;
	}

	.main-navigation .header-menu .nav-login > a,
	.main-navigation .header-menu .nav-cta > a {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-navy);
	flex-shrink: 0;
}

/* Morphing hamburger → X (state driven by aria-expanded set in navigation.js) */
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-navy);
	border-radius: 2px;
	transition: transform 0.28s ease, background-color 0.2s ease;
}

.menu-toggle-bars {
	position: relative;
}

.menu-toggle-bars::before,
.menu-toggle-bars::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
}

.menu-toggle-bars::before { top: -7px; }
.menu-toggle-bars::after { top: 7px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background-color: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas backdrop — hidden until the mobile panel opens (styled in the <=900 block). */
.mobile-nav-overlay { display: none; }

/* Lock page scroll behind the open off-canvas panel. */
html.mobile-nav-open,
html.mobile-nav-open body { overflow: hidden; }

/* Keep the toggle above the panel, and turn the morphing X into a clear round
   close button (white X on a subtle gold-ringed disc) over the navy panel. */
.main-navigation.toggled .menu-toggle {
	color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(196, 154, 26, 0.5);
	border-radius: 50%;
}
.main-navigation.toggled .menu-toggle-bars::before,
.main-navigation.toggled .menu-toggle-bars::after { background-color: var(--color-white); }
.main-navigation.toggled .menu-toggle-bars { background-color: transparent; }

/*--------------------------------------------------------------
# Responsive navigation (dropdown flyout + mobile accordion)
--------------------------------------------------------------*/
.header-menu li { position: relative; }

/* Login + Schedule a Meeting read as one paired button group, so they sit
   closer together than the gap used between plain nav links. The menu's gap is
   uniform, so the pair is tightened by pulling the CTA back against LOGIN.
   The offset is derived from the gap rather than hard-coded: the gap is now
   fluid (36px → 18px), and a fixed -20px would have exceeded it below ~1250px
   and overlapped the two buttons. This keeps the pair at a steady 16px.
   Desktop only — the mobile drawer stacks them and sets its own spacing. */
@media (min-width: 1201px) {
	.header-menu .nav-cta.menu-item {
		margin-left: calc(16px - var(--nav-gap));
	}
}
/* ===== Desktop dropdown flyout (>1200px only; the mobile accordion reuses
   .sub-menu and is styled entirely in the <=1200 block).

   Built 1:1 from the client mockup's `.nav-drop` (v8_3 `contact.html`, lines
   203-211) with the ×1.25 calibration applied: cream card, 2px gold top rule,
   centred under its nav item, no dot indicator, no row radius.
   Border widths are the one exception to ×1.25 — Chrome keeps border-width
   zoom-invariant, so the mockup's 1px/2px render as 1px/2px (measured:
   card 267.5px wide, first row 265.5px → 1px each side; row top offset 12px
   = 2px border + 10px padding). ===== */
@media (min-width: 1201px) {
	.header-menu .sub-menu {
		position: absolute;
		inset-inline-start: 50%;
		top: 100%;
		margin-top: 0;
		min-width: 267.5px;
		padding: 10px 0;
		background-color: var(--color-bg);
		border: 1px solid var(--color-border);
		border-top: 2px solid var(--color-gold2);
		border-radius: 5px;
		box-shadow: 0 27.5px 57.5px -22.5px rgba(0, 0, 60, 0.42);
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(10px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
		z-index: 400;
	}

	/* Invisible bridge across the mockup's 2.5px gap, so the flyout survives the
	   cursor crossing it. Not in the mockup, but it costs nothing visually and
	   keeps the hover behaviour the theme already had. */
	.header-menu .sub-menu::before {
		content: "";
		position: absolute;
		top: -4px;
		inset-inline: 0;
		height: 4px;
	}

	/* Nested flyout opens to the side, aligned to its parent row. The base rule's
	   centring translate has to be cancelled here. */
	.header-menu .sub-menu .sub-menu {
		top: -12px;
		inset-inline-start: 100%;
		margin-inline-start: 8px;
		transform: translateX(8px);
	}
	.header-menu .sub-menu .sub-menu::before {
		top: 0;
		inset-inline-start: -10px;
		inset-inline-end: auto;
		width: 10px;
		height: 100%;
	}

	.header-menu .sub-menu a {
		display: block;
		padding: 11.25px 25px;
		border-radius: 0;
		font-size: 15.625px;
		font-weight: var(--fw-600);
		color: var(--color-text2);
		letter-spacing: 0.02em;
		white-space: nowrap;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.header-menu .sub-menu a:hover,
	.header-menu .sub-menu a:focus-visible {
		color: var(--color-gold);
		background-color: var(--color-bg2);
	}

	.header-menu li:hover > .sub-menu,
	.header-menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(2.5px);
	}
	.header-menu .sub-menu li:hover > .sub-menu,
	.header-menu .sub-menu li:focus-within > .sub-menu {
		transform: translateX(0);
	}

	/* Chevron on parent items — the mockup's ▾ glyph, static (it does not flip). */
	.header-menu .has-dropdown > a::after {
		content: "\25BE";
		display: inline-block;
		margin-inline-start: 7.5px;
		position: relative;
		top: -1.25px;
		font-size: 11.25px;
		line-height: 1;
		opacity: 0.5;
	}
}

.submenu-toggle {
	display: none;
	background: none;
	border: none;
	padding: 4px;
	color: currentColor;
}

.submenu-toggle svg { width: 14px; height: 14px; transition: transform 0.25s ease; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--gradient-navy);
	padding: clamp(35px, 2.82vw + 24.84px, 70px) var(--section-pad-x) clamp(24px, 1.4vw + 19px, 45px);
	color: var(--color-white);
}

.footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: clamp(35px, 2.823vw + 24.84px, 70px);
	margin-block-end: clamp(27.5px, 2.218vw + 19.52px, 55px);
}

.footer-brand .custom-logo,
.footer-brand img { height: clamp(50px, 2.82vw + 39.84px, 85px); width: auto; margin-block-end: clamp(15.5px, 0.766vw + 12.74px, 25px); }

.footer-brand p {
	font-size: clamp(13.81px, 0.197vw + 13.1px, 16.25px);
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.38);
}

.footer-addr {
	font-size: clamp(12.75px, 0.181vw + 12.1px, 15px);
	color: rgba(255, 255, 255, 0.25);
	margin-block-start: 12px;
	line-height: 1.6;
}

.footer-col h4 {
	font-size: clamp(11.82px, 0.106vw + 11.44px, 13.13px);
	font-weight: var(--fw-700);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	margin-block-end: clamp(12.4px, 0.613vw + 10.19px, 20px);
	font-family: var(--font-body);
}
.footer-col ul { margin: 0; }

.footer-col a {
	display: block;
	font-size: clamp(13.81px, 0.197vw + 13.1px, 16.25px);
	color: rgba(255, 255, 255, 0.48);
	margin-block-end: 12px;
	font-weight: var(--fw-500);
}

.footer-col a:hover { color: var(--color-gold2); }

.footer-pillars {
	border-top: 1px solid rgba(196, 154, 26, 0.15);
	border-bottom: 1px solid rgba(196, 154, 26, 0.15);
}

.footer-pillar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: clamp(15.5px, 0.766vw + 12.74px, 25px) clamp(12.4px, 0.613vw + 10.19px, 20px);
	flex: 1 1 0;
}

.footer-pillar-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-gold2);
	opacity: 0.8;
	flex-shrink: 0;
}

.footer-pillar span {
	font-size: clamp(11.82px, 0.106vw + 11.44px, 13.13px);
	font-weight: var(--fw-700);
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.footer-pillar:not(:last-child) {
	border-right:1.5px solid rgba(196, 154, 26, 0.12);
}

.footer-bottom {
	border-top: 1px solid rgba(196, 154, 26, 0.2);
	padding-top: clamp(18.6px, 0.919vw + 15.29px, 30px);
	margin-top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-bottom p {
	font-size: clamp(12.75px, 0.181vw + 12.1px, 15px);
	color: rgba(255, 255, 255, 0.22);
	margin: 0;
}

.footer-tagline {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: clamp(14px, 0.484vw + 12.26px, 20px);
	color: var(--color-gold2);
	letter-spacing: 0.06em;
}

/* Tagline sits on the row's true centre. `justify-content: space-between` alone
   only centres the middle item when both side items are the same width, and the
   copyright and location strings are not — so give the two <p> siblings an equal
   share of the free space and let the tagline hold its own width between them. */
@media (min-width: 768px) {
	.footer-bottom p { flex: 1 1 0; }
	.footer-bottom p:last-child { text-align: right; }
	.footer-tagline { flex: 0 1 auto; text-align: center; }
}

/* ==========================================================================
   ENX2 LOGO 
   ========================================================================== */
.enx2-logo {
	padding: 40px 0 0px 0;
	display: flex;
	justify-content: center;
	border-top: 1px solid rgba(196, 154, 26, 0.15);
	margin: 30px 0 0 0;
}
.enx2-logo .powered-by {
	display: flex;
	gap: 10px;
}
.powered-by-text {
	margin: 0;
}

#enx2_logo path:nth-child(1) {
    transform-origin: 10% center;
}

#enx2_logo path {
    fill: var(--color-gold2);
    transition: all 0.3s ease;
}

#enx2_logo {
    max-width: 80px;
    line-height: 1;
    height: auto;
}

body .poweredby:hover path {
    fill: var(--color-gold-hover) !important;
}

.poweredby svg {
    transition: 0.5s;
}

.poweredby:hover svg {
    transform: translateY(-2px);
}
/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/
.back-to-top {
	position: fixed;
	inset-block-end: clamp(18px, 2.4vw, 34px);
	inset-inline-end: clamp(18px, 2.4vw, 34px);
	z-index: 150;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 3.6vw, 54px);
	height: clamp(44px, 3.6vw, 54px);
	padding: 0;
	border: 1px solid rgba(0, 21, 64, 0.12);
	border-radius: 50%;
	background-color: var(--color-gold2);
	color: var(--color-navy);
	box-shadow: 0 10px 26px rgba(0, 21, 64, 0.28);
	cursor: pointer;
	/* Hidden until scrolled: faded + nudged down, and out of the tab order. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.35s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top svg {
	width: 46%;
	height: 46%;
	display: block;
}

.back-to-top:hover {
	background-color: #d8ad24;
	box-shadow: 0 15px 32px rgba(0, 21, 64, 0.34);
	transform: translateY(-4px);
}

.back-to-top:active { transform: translateY(-1px); }

.back-to-top:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

/*--------------------------------------------------------------
# Team headshot placeholder (.uo-photo-ph)
--------------------------------------------------------------*/
/*
 * Shown for a Team member with no featured image. Rendered by
 * template-parts/team/photo-placeholder.php, which is shared by the roster and
 * the single bio page.
 *
 * It lives in style.css rather than in either section's CSS BECAUSE it is
 * shared: team_roster.css is enqueued on Meet the Team and single-team.css on a
 * bio page, so a rule in either one would be missing on the other half of the
 * time. Same reasoning as the global .uo-form component above.
 *
 * The caller supplies the geometry class (.tr-photo / .bio-banner-photo), which
 * already carries the 1/1 square, the gold hairline and the surface colour — so
 * this rule only has to place the logo inside it. That is why there is no
 * width/height/border here: duplicating them would let the placeholder drift out
 * of alignment with real headshots the moment either photo class changes.
 */
/*
 * Centred by absolute positioning, NOT by grid/flex — deliberate, and it was
 * wrong once. Both callers' photo classes declare `display: block`, and both
 * team_roster.css and single-team.css load AFTER style.css, so a `display: grid`
 * here loses and the logo pinned to the top of the square. Convention 2 says to
 * remove the property from the section CSS rather than fight it, but `display:
 * block` is correct there for real <img> headshots. Absolute centring sidesteps
 * the cascade entirely and holds whatever `display` the context imposes.
 */
.uo-photo-ph {
	position: relative;
}

.uo-photo-ph-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76%;
	height: auto;
	max-width: 260px;
	/* The wordmark is a brand asset at full strength; held back so the slot reads
	   as "photo pending" rather than as a second logo lockup on the page. */
}

/*--------------------------------------------------------------
# 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;
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	inset-inline-start: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link:focus { outline: 2px solid var(--color-gold2); }

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

/*--------------------------------------------------------------
# Editor content (.entry-content)
----------------------------------------------------------------
Styling for the DEFAULT page template + blog posts, i.e. raw block-editor
output. Only `template-parts/content-page.php` and `template-parts/content.php`
carry these classes — `flexible-template.php` never does, so nothing here can
reach an ACF flexible-content page.

This is the WYSIWYG exception to the utility-first rule (convention #2): the
editor emits its own markup, so utilities cannot be applied in it.

Measures derived from the reference specimen screenshot (418x974, ~0.38 scale):
content column ~1040px, block rhythm ~28px, blockquote #ECF0F5 with ~24px
padding, list markers flush to the column edge.

Deliberately sets NO font-size and NO colour — headings keep the global scale
at style.css:211-216 and the theme colour tokens, pending sign-off.
--------------------------------------------------------------*/
.entry-header,
.entry-content,
.entry-footer {
	/* Text measure, not box width — the reference's ~1040px was the ink column,
	   so the gutters are added on top rather than eaten out of it. */
	--entry-measure: 1040px;

	width: 100%;
	max-width: calc(var(--entry-measure) + var(--section-pad-x) * 2);
	margin-inline: auto;
	padding-inline: var(--section-pad-x);
}

.entry-header { padding-block-start: var(--section-pad-y); }
.entry-footer { padding-block-end: var(--section-pad-y); }

/* --- Hero band — default-template pages only --------------------------------
   The page title renders as a hero, reusing the `page_hero` flexible layout's
   geometry (identical padding clamps, identical centred gold accent bar on the
   bottom edge) so a default page's hero reads as the same component as every
   other inner page's.

   It takes --gradient-navy rather than page_hero's cream, because page_hero sits
   against white sections whereas `body` here is already cream (--color-bg
   #f7f2ea) — a cream band would be invisible. Navy also matches the header CTA
   and the footer.

   Scoped to .page-template-default because content.php ALSO emits
   .entry-header; blog posts and archives keep the plain measure treatment. */
body.page-template-default .entry-header {
	position: relative;
	max-width: none;
	padding-block: clamp(52px, 4.27vw + 36.6px, 105px) clamp(40px, 2.82vw + 29.84px, 75px);
	background: var(--gradient-navy);
	text-align: center;
}

body.page-template-default .entry-header::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	width: clamp(56px, 5vw, 80px);
	height: 3px;
	background: var(--color-gold2);
}

body.page-template-default .entry-title {
	max-width: var(--entry-measure);
	margin-inline: auto;
	color: var(--color-white);
}

/* The hero supplies its own rhythm — the generic 28px sibling gap is far too
   tight against a full-bleed band. Set on .entry-content rather than via
   `.entry-header + .entry-content` so a featured image between them (output by
   unitedone_post_thumbnail) cannot break the adjacency. */
body.page-template-default .entry-content { margin-block-start: var(--section-pad-y); }

/* Vertical rhythm. The reference runs an even ~28px gap between every block,
   so a single sibling rule beats per-element margins here. */
.entry-content > * + * { margin-block-start: 28px; }

.entry-header + .entry-content { margin-block-start: 28px; }

/* Lists — the global reset strips markers, so restore them. Reference puts the
   marker flush to the column's left edge, hence the 1.25em pad with outside
   markers rather than a deeper indent. */
.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.25em;
	list-style-position: outside;
}

.entry-content ul { list-style-type: disc; }
.entry-content ol { list-style-type: decimal; }
.entry-content li + li { margin-block-start: 4px; }

/* Nested lists sit tight against their parent item. */
.entry-content li > ul,
.entry-content li > ol { margin-block-start: 4px; }

.entry-content ul ul { list-style-type: circle; }

/* Blockquote — full-column tinted panel, not an indented rule. */
.entry-content blockquote {
	margin-inline: 0;
	padding: 24px 28px;
	background-color: var(--color-bg2);
	border-left: 5px solid var(--color-border);
}

.entry-content blockquote > :first-child { margin-block-start: 0; }

/* Figures/images fill the column, as in the reference. */
.entry-content figure { margin-inline: 0; }

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

.entry-content .wp-block-image img { width: 100%; }

.entry-content figcaption {
	margin-block-start: 8px;
	text-align: center;
}

/* Long-form defaults the reset leaves bare. */
.entry-content a { text-decoration: underline; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td {
	padding: 10px 14px;
	border: 1px solid rgba(9, 20, 49, 0.15);
	text-align: start;
}

.entry-content th { background-color: #ecf0f5; }

/*--------------------------------------------------------------
# Responsive
----------------------------------------------------------------
Strategy: the desktop design (>=1024px) renders at 1.25 zoom to match the
client mockup. Below 1024px we drop the zoom and lay out in a clean 1:1
space, purpose-designing tablet and mobile rather than scaling the desktop
down. Breakpoints (media queries evaluate at the true physical width even
with zoom active): 1023 = tablet & below, 767 = mobile, 480 = small phone.
--------------------------------------------------------------*/

/* ===== Off-canvas mobile navigation (<= 1200px; desktop inline nav shows above) ===== */
@media (max-width: 1200px) {
	:root {
	--section-pad-x: clamp(18px, 2.21vw - 2.9px, 90px);
	}
	.menu-toggle { display: inline-flex; position: relative; z-index: 320; }

	/* Dimmed, blurred backdrop behind the panel */
	.mobile-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background-color: rgba(0, 12, 38, 0.55);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease, visibility 0.4s ease;
		z-index: 290;
	}
	.main-navigation.toggled .mobile-nav-overlay { opacity: 1; visibility: visible; }

	/* The panel itself: slides in from the right, brand navy, own scroll */
	.main-navigation .header-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: fixed;
		top: 0;
		inset-inline-end: 0;
		height: 100vh;
		height: 100dvh;
		width: min(87vw, 400px);
		background-color: var(--color-navy);
		padding: clamp(84px, 22vw, 108px) 0 28px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.42s;
		box-shadow: -20px 0 50px rgba(0, 12, 38, 0.34);
		z-index: 300;
	}
	.main-navigation.toggled .header-menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
	}

	/* "Menu" eyebrow pinned to the top of the panel */
	.main-navigation .header-menu::before {
	content: "Menu";
	position: absolute;
	top: clamp(24px, 9vw, 30px);
	inset-inline-start: 27px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-gold2);
	pointer-events: none;
}

	/* Rows + hairline dividers */
	.main-navigation .header-menu > li { border-bottom: 1px solid rgba(196, 154, 26, 0.14); }
	.main-navigation .header-menu > li:first-child { border-top: 1px solid rgba(196, 154, 26, 0.14); }

	.main-navigation .header-menu a {
		display: block;
		padding: 16px 58px 16px 28px;
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.01em;
		line-height: 1.3;
		color: rgba(255, 255, 255, 0.9);
		transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	}
	.main-navigation .header-menu a:hover,
	.main-navigation .header-menu a:focus-visible {
		color: var(--color-gold2);
		background-color: rgba(255, 255, 255, 0.05);
	}

	/* Current page / ancestor */
	.main-navigation .header-menu .current-menu-item > a,
	.main-navigation .header-menu .current-menu-ancestor > a,
	.main-navigation .header-menu .current-menu-parent > a {
		color: var(--color-gold2);
		box-shadow: inset 3px 0 0 var(--color-gold2);
	}

	/* CTA → full-width gold button */
	.main-navigation .header-menu .nav-cta { margin: 24px 24px 4px; border: none; }
	.main-navigation .header-menu .nav-cta > a {
		display: block;
		text-align: center;
		padding: 16px 26px;
		background-color: var(--color-gold2);
		/* The desktop rule sets `background: var(--gradient-navy)` — a SHORTHAND,
		   so it also sets background-image. Overriding background-color alone
		   leaves the navy gradient painting over the gold, which put navy text on
		   a navy button. Clear the image too. */
		background-image: none;
		color: var(--color-navy) !important;
		/* Transparent rather than `none`: the outlined Login button below carries a
		   real 1px border, and with border-box that 1px top+bottom would otherwise
		   make it 2px taller than this one. Same box model = same height. */
		border: 1px solid transparent;
		border-radius: var(--radius-btn);
		font-weight: 700;
		letter-spacing: 0.06em;
		box-shadow: 0 8px 22px rgba(196, 154, 26, 0.28);
	}
	.main-navigation .header-menu .nav-cta > a:hover,
	.main-navigation .header-menu .nav-cta > a:focus-visible {
		background-color: #d8ad24;
		border: 1px solid transparent;
	}

	/* Login → outlined button, the counterpart to the gold CTA above it.
	   The desktop rule is not media-scoped, so without this the drawer inherited
	   the desktop box: a beige 1px border stretched to the full drawer width,
	   left-aligned, at a smaller font than the surrounding links — it read as a
	   stray outline rather than a button. Mirror the CTA's box exactly and let
	   the two sit as a pair, filled + outlined. */
	.main-navigation .header-menu .nav-login { margin: 24px 24px 0; border: none; }
	.main-navigation .header-menu .nav-login > a {
		display: block;
		text-align: center;
		padding: 16px 26px;
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: var(--radius-btn);
		/* Match the drawer's own link sizing so LOGIN and the CTA read as one
		   pair, instead of the smaller desktop clamp. */
		font-size: clamp(14.35px, 0.204vw + 13.62px, 16.88px);
		font-weight: 700;
		letter-spacing: 0.06em;
	}
	/* Tighten the pair: the CTA's own 24px top margin would otherwise double up. */
	.main-navigation .header-menu .nav-login + .nav-cta { margin-top: 12px; }

	.main-navigation .header-menu .nav-login > a:hover,
	.main-navigation .header-menu .nav-login > a:focus-visible {
		border-color: var(--color-gold2);
		color: var(--color-gold2) !important;
		background: transparent;
	}

	/* Submenus → height-animated accordions */
	.header-menu .sub-menu {
		position: static;
		display: block;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		border: none;
		box-shadow: none;
		padding: 0;
		background-color: rgba(0, 0, 0, 0.18);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.header-menu .sub-menu a {
		position: relative;
		padding: 13px 58px 13px 42px;
		font-size: 14.5px;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.72);
	}
	.header-menu .sub-menu a::before {
		content: "";
		position: absolute;
		inset-inline-start: 28px;
		top: 50%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: var(--color-gold2);
		opacity: 0.7;
		transform: translateY(-50%);
	}
	.header-menu .sub-menu .sub-menu a { padding-inline-start: 56px; }
	.header-menu .sub-menu .sub-menu a::before { inset-inline-start: 42px; }

	/* Arrow toggle — big tap target, rotating chevron */
	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset-inline-end: 4px;
		top: 3px;
		width: 50px;
		height: 52px;
		color: rgba(255, 255, 255, 0.7);
	}
	.sub-menu .submenu-toggle { top: 0; height: 48px; }
	.submenu-toggle svg { width: 15px; height: 15px; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
	.submenu-toggle:hover,
	.submenu-toggle.active { color: var(--color-gold2); }
	.submenu-toggle.active svg { transform: rotate(180deg); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.main-navigation .header-menu,
	.mobile-nav-overlay,
	.header-menu .sub-menu,
	.submenu-toggle svg,
	.menu-toggle-bars,
	.menu-toggle-bars::before,
	.menu-toggle-bars::after,
	.back-to-top { transition-duration: 0.01ms !important; }

	/* Anchor jumps go back to instant. scroll-padding-top is NOT reset — the
	   header still covers the target regardless of how you got there. */
	html { scroll-behavior: auto; }
}

/* ===== Footer column reflow ===== */
@media (max-width: 1024px) {
	.footer-top { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 44px); }
}
@media (max-width: 991px) {
.footer-pillars {
	flex-wrap: wrap;
	gap: 5px;
	border:none;
}
.footer-pillar {
	flex: unset;
	border: 1.5px solid rgba(196, 154, 26, 0.12);
	min-width: 190px;
}
.footer-bottom {
	margin-top: 20px;
}
}
/* ===== Mobile (<= 767px) ===== */
@media (max-width: 767px) {
	/* Drop all authored <br> line breaks on phones so headings/paragraphs/content
	   wrap naturally to the narrow viewport. Line breaks stay intact >767px. */
	br { display: none; }

	/* EXCEPTION — postal addresses. Collapsing these ran the street line into
	   the city with no space ("…Sherman StreetWilkes-Barre"), because the break
	   itself was the only separator. Structured addresses keep their breaks. */
	.contact-main-card-addr br,
	.footer-addr br,
	/* EXCEPTION — the docstack seal. "United<br>One" has to stay two lines to
	   fit inside a 65px circle; collapsed it overflows the disc. */
	.sv-doc-seal br { display: revert; }

	/* Footer → single column, stacked bottom row */
	.footer-top { grid-template-columns: 1fr; gap: 28px; }
	.footer-pillar { justify-content: flex-start; }
	.footer-bottom {
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.footer-bottom p {
	margin: 0;
}
}

/* ===== Small phone (<= 480px) ===== */
@media (max-width: 480px) {
	.btn,
	.btn-outline { display: block; width: 100%; text-align: center; }
}