/* ==========================================================================
   DDI 2026 – GLOBAL STYLESHEET
   Loads on every page (legacy Beaver Builder + new Block Editor).
   Owns sitewide design tokens, fonts, and the global header/footer/nav
   that's about to be wired up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   The client dislikes four of Fraunces' glyphs: lowercase f (U+0066),
   lowercase j (U+006A), uppercase J (U+004A) and the ampersand
   (U+0026). We re-declare the @font-face for `font-family: 'Fraunces'`
   with a unicode-range scoped to just those four code points, and
   source them from Cormorant Garamond – a pairing serif with the
   traditional shapes the client prefers. Browsers merge @font-face
   rules on the same family by unicode-range, so f / j / J / & render
   in Cormorant Garamond while every other character stays in Fraunces.

   Cormorant Garamond on Google Fonts ships static per-weight files
   (not a variable font). Every headline on the site uses Fraunces at
   weight 300 (Light), so the @font-face is declared at weight 300
   – that's how the browser picks it for our 300 headings.

   What it POINTS AT, though, is Cormorant Garamond's weight 500
   (Medium) file, not its 300. Cormorant is a delicately drawn
   Garamond – its 300 reads anaemic and even its 400 is on the thin
   side next to Fraunces 300. Cormorant 500 is the closest visual
   match for Fraunces' Light stroke weight on this site. Declaration
   weight (browser-side) vs source weight (designer's intent) are
   deliberately mismatched here – the browser doesn't validate the
   file's actual weight against the declaration.

   If 500 still reads under-weight, the next options are 600 (SemiBold)
   or 700 (Bold) – both shipped by Google Fonts for Cormorant Garamond.
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500&family=Raleway:wght@300;400;500;600;700&display=swap');

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300;
	/* Cormorant Garamond 500 (Medium) – matches Fraunces 300 visually.
	 * unicode-range covers: ampersand (U+0026), uppercase J (U+004A),
	 * lowercase f (U+0066), lowercase j (U+006A). */
	src: url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_s06KnTOig.woff2') format('woff2');
	unicode-range: U+0026, U+004A, U+0066, U+006A;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 300;
	/* Cormorant Garamond italic 500 (Medium) – matches Fraunces 300 italic. */
	src: url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-iNM8.woff2') format('woff2');
	unicode-range: U+0026, U+004A, U+0066, U+006A;
}

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   Defined as CSS custom properties on :root so they're accessible to every
   page (sitewide chrome needs them). Legacy Beaver Builder pages can ignore
   anything in --ddi-* land – its own theme tokens still drive its layouts.
   Block-editor pages pick these up via /ddi-block.css which scopes layout
   defaults to .ddi-block.
   -------------------------------------------------------------------------- */
:root {
	/* Brand palette */
	--ddi-midnight: #0f172a;       /* darkest – footer only */
	--ddi-deep-navy: #1A2744;      /* BRAND BLUE – primary dark surface */
	--ddi-navy: #1F3453;           /* mid-navy for accents */
	--ddi-navy-light: #2C4B74;     /* lighter slate-navy – floating CTA pill */
	--ddi-gold: #D1B485;           /* BRAND GOLD – champagne */
	--ddi-gold-light: #D1B485;     /* collapsed to the same as --ddi-gold by client direction */
	--ddi-gold-darker: #7C5E1F;    /* darker – legacy; only for non-eyebrow accents needing strong contrast. Reads muddy on eyebrows. */
	--ddi-gold-mid: #B0904E;       /* eyebrows on LIGHT bg – a touch deeper than brand gold for legibility, still clearly champagne (not the dirty #7C5E1F). */
	--ddi-off-white: #F8F6F2;
	--ddi-cool-grey: #F3F4F6;
	--ddi-mid-grey: #6B7280;
	--ddi-body-text: #414b5c;      /* body text — a dark "grey version of the navy" (darker than mid-grey) */
	--ddi-light-grey: #E5E7EB;
	--ddi-white: #FFFFFF;

	/* Type stacks */
	--ddi-font-display: 'Fraunces', Georgia, serif;
	--ddi-font-body: 'DM Sans', system-ui, sans-serif;
	--ddi-font-ui: 'Raleway', system-ui, sans-serif;

	/* Layout */
	--ddi-container: 1320px;
	--ddi-gutter: 60px;

	/* Header heights – picked up by JS scroll-state too */
	--ddi-header-h: 88px;
	--ddi-header-h-scrolled: 72px;
}

/* --------------------------------------------------------------------------
   CHROME DEFAULTS
   Two resets that keep the new chrome insulated from legacy parent CSS:

   1. Anchors inside chrome ship with no underline by default –
      lets us avoid repeating `text-decoration: none` on every
      selector below.

   2. Font-smoothing + backface-visibility properties from the parent
      `body.legacy-page` rule cascade via inheritance into our chrome
      on legacy pages. Reset them to browser defaults so chrome type
      renders consistently regardless of which page hosts it.
   -------------------------------------------------------------------- */
.header a,
.nav-overlay a,
.start-overlay a,
.footer a {
	text-decoration: none;
}

.header,
.nav-overlay,
.start-overlay,
.footer {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}


/* --------------------------------------------------------------------------
   SHARED UTILITIES
   These tiny utility classes are used by the sitewide chrome (header,
   nav overlay, start-here dialog) AND by future homepage blocks. Kept
   in global.css so the chrome renders correctly on every page.
   -------------------------------------------------------------------- */
.ddi-2026-eyebrow,
.eyebrow {
	font-family: var(--ddi-font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	/* Light-bg default: a slightly deeper champagne for legibility. Dark
	 * sections override to pure brand gold (--ddi-gold) via !important. */
	color: var(--ddi-gold-mid);
	margin-bottom: 24px;
}

.gold-rule {
	width: 48px;
	height: 1px;
	background: var(--ddi-gold);
	margin-bottom: 28px;
}
.gold-rule--center { margin-left: auto; margin-right: auto; }

.btn__chevron {
	width: 14px;
	height: 14px;
	transition: transform 0.3s ease;
}

/* --------------------------------------------------------------------------
   BRAND BUTTONS – shared design-system primitives.
   Originally defined inside /build/hero/ and /build/cta-final/. Lifted into
   global.css so non-block templates (e.g. single-job_vacancy.php) can use
   the same brand buttons without depending on a specific block being on
   the page. Squared edges, Raleway uppercase, 0.12em tracking – the look
   the client confirmed for the 2026 system.
   -------------------------------------------------------------------------- */
.btn {
	align-items: center;
	border: 1px solid;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--ddi-font-ui);
	font-size: 13px;
	font-weight: 700;             /* matched to .header__cta so the brand buttons read as confidently */
	gap: 10px;
	letter-spacing: 0.14em;       /* matched to .header__cta */
	padding: 16px 36px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
	border-radius: 0;
	background: transparent;
}

.btn--white {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--ddi-white);
}
.btn--white:hover {
	background: var(--ddi-white);
	border-color: var(--ddi-white);
	color: var(--ddi-deep-navy);
}

.btn--gold {
	background: var(--ddi-gold);
	border-color: var(--ddi-gold);
	/* Deep-navy label on champagne gold — sharper and more contemporary
	 * than white-on-gold (which read muddy/dated and failed contrast).
	 * Navy on gold is ~7:1, comfortably AA, so no text-shadow needed.
	 * On hover the button still inverts to outlined gold with gold text. */
	color: var(--ddi-deep-navy);
}
.btn--gold:hover {
	/* Invert to a gold outline on hover, with the label in the slightly
	 * deeper eyebrow gold (gold-mid). Gold-toned text reads on both light
	 * and dark surfaces, so no light/dark context handling is needed. */
	background: transparent;
	border-color: var(--ddi-gold);
	color: var(--ddi-gold-mid);
	text-shadow: none;
}

/* Dark/ghost variant – outline on light surfaces (e.g. "Get in Touch"
   inside the help card). */
.btn--dark {
	/* Brand deep-navy outline (not the near-black midnight) — the secondary
	 * "Read the FAQs"-style button on light surfaces. */
	background: transparent;
	border-color: var(--ddi-deep-navy);
	color: var(--ddi-deep-navy);
}
.btn--dark:hover {
	background: var(--ddi-deep-navy);
	border-color: var(--ddi-deep-navy);
	color: var(--ddi-white);
}
/* Secondary/outline button on dark surfaces goes gold so it stays legible
 * (navy on navy would vanish). Scoped to the page-hero dark/image variants
 * where the secondary CTA otherwise inherits the white outline. */
.page-hero--dark .page-hero__cta-secondary,
.page-hero--image .page-hero__cta-secondary {
	background: transparent;
	border-color: var(--ddi-gold);
	color: var(--ddi-gold);
}
.page-hero--dark .page-hero__cta-secondary:hover,
.page-hero--image .page-hero__cta-secondary:hover {
	background: var(--ddi-gold);
	border-color: var(--ddi-gold);
	color: var(--ddi-deep-navy);
}
/* On a LIGHT page-hero surface the secondary/ghost CTA must be navy — gold is
 * unreadable on the pale background (e.g. /apply/, whose hero carries both
 * --dark and --light classes). Placed after the gold rule so --light wins by
 * source order when a hero has both. */
.page-hero--light .page-hero__cta-secondary {
	background: transparent;
	border-color: var(--ddi-deep-navy);
	color: var(--ddi-deep-navy);
}
.page-hero--light .page-hero__cta-secondary:hover {
	background: var(--ddi-deep-navy);
	border-color: var(--ddi-deep-navy);
	color: var(--ddi-white);
}


/* ============================================================================
   LEGACY PALETTE MIGRATION
   The parent `ddi` theme was built on a purple + gold brand. The 2026
   redesign moves to navy + gold. These rules retarget every known legacy
   purple/gold usage to the new palette so Beaver Builder pages, Gravity
   Forms submit buttons, and any shared button styles look cohesive with
   the new chrome.

   Why this lives in global.css (not legacy.css): these colour mappings
   are the *new permanent* palette. legacy.css gets deleted at Phase 2;
   we want these mappings to survive.

   Why `!important`: this is an explicit palette migration, not a normal
   styling rule. The parent's selectors are deeply compound (e.g.
   `.fl-builder-content a.fl-button.button-group.ghost.ghost-purple`)
   and matching that specificity for every rule would balloon this file
   without adding value.

   Selectors that target the legacy header/nav/logged-in-bar are NOT
   included – those markup chunks no longer render.

   MAPPING
     #613f88 / #5c4284  →  var(--ddi-navy)         #1F3453
     #552481            →  var(--ddi-deep-navy)    #1a2744
     #2b1b3e            →  var(--ddi-midnight)     #0f172a
     #ad9a69            →  var(--ddi-gold)         #D1B485
     #beaa77            →  var(--ddi-gold-light)   #E9D7AB
     #7d6d4f / #b79148  →  var(--ddi-gold-darker)  #B8975F
   ============================================================================ */

/* ---- Buttons: dark / solid ---- */
a.button.solid-button.button-style-dark,
input.gform_button.solid-button.button-style-dark,
.fl-builder-content a.fl-button.button-group.solid.solid-dark {
	background-color: var(--ddi-navy) !important;
	border-color: var(--ddi-navy) !important;
}

/* ---- Buttons: light (text colour was purple) ---- */
a.button.solid-button.button-style-light,
.fl-builder-content a.fl-button.button-group.solid.solid-white span,
.fl-builder-content a.fl-button.button-group.ghost.ghost-white:hover span {
	color: var(--ddi-navy) !important;
}

/* ---- Buttons: gold solid ---- */
a.button.solid-button.button-style-gold,
input.gform_button.solid-button.button-style-gold,
.fl-builder-content a.fl-button.button-group.solid.solid-gold {
	background-color: var(--ddi-gold) !important;
	border-color: var(--ddi-gold) !important;
}
a.button.solid-button.button-style-gold:hover,
input.gform_button.solid-button.button-style-gold:hover {
	color: var(--ddi-gold) !important;
}

/* ---- Buttons: gold ghost ---- */
a.button.ghost-button.button-style-gold,
input.gform_button.ghost-button.button-style-gold,
.fl-builder-content a.fl-button.button-group.ghost.ghost-gold {
	color: var(--ddi-gold) !important;
	border-color: var(--ddi-gold-light) !important;
}
a.button.ghost-button.button-style-gold:hover,
input.gform_button.ghost-button.button-style-gold:hover {
	background-color: var(--ddi-gold) !important;
	border-color: var(--ddi-gold) !important;
	color: var(--ddi-white) !important;
}

/* ---- Buttons: light ghost – hover state was old gold ---- */
a.button.ghost-button.button-style-light:hover,
input.gform_button.ghost-button.button-style-light:hover {
	color: var(--ddi-gold) !important;
}

/* ---- Buttons: ghost purple → ghost navy ---- */
.fl-builder-content a.fl-button.button-group.ghost.ghost-purple {
	color: var(--ddi-navy) !important;
	border-color: var(--ddi-navy) !important;
}
.fl-builder-content a.fl-button.button-group.ghost.ghost-purple:hover {
	background-color: var(--ddi-navy) !important;
	color: var(--ddi-white) !important;
}

/* ---- Gravity Forms default submit ---- */
input.gform_button {
	background-color: var(--ddi-navy) !important;
	border-color: var(--ddi-navy) !important;
}
input.gform_button:hover {
	color: var(--ddi-navy) !important;
}

/* ---- Gravity Forms progress bar (multi-step application form) ---- */
.application-form-wrapper .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage,
.application-form-wrapper .gform_wrapper .gform_page_footer .button.gform_next_button {
	background-color: var(--ddi-gold-darker) !important;
}

/* ---- Gravity Forms validation — site-wide, all forms ----
 * Restyle GF's default red validation boxes to a calmer, on-brand
 * treatment: brand fonts, a refined muted red, a soft tinted panel with
 * a hairline border (not GF's heavy red box). Covers the modern GF 2.5+
 * summary (.gform_validation_errors), the legacy summary (.validation_error)
 * and per-field messages. !important beats GF's bundled basic.min.css. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
	font-family: var(--ddi-font-body) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: #9c3b38 !important;
	background: rgba(156, 59, 56, 0.05) !important;
	border: 1px solid rgba(156, 59, 56, 0.22) !important;
	border-left: 3px solid #9c3b38 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 16px 20px !important;
	margin: 0 0 24px !important;
}
.gform_wrapper .gform_validation_errors > h2.gform_submission_error {
	font-family: var(--ddi-font-display) !important;
	font-weight: 300 !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	color: #9c3b38 !important;
	margin: 0 0 6px !important;
	display: block !important;
}
.gform_wrapper .gform_validation_errors > h2.gform_submission_error .gform-icon {
	color: #9c3b38 !important;
}
/* The "errors below" list inside the summary. */
.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ul {
	font-family: var(--ddi-font-body) !important;
	font-size: 14px !important;
	color: #9c3b38 !important;
	margin: 4px 0 0 !important;
}
.gform_wrapper .gform_validation_errors a { color: #9c3b38 !important; }

/* Per-field error message + the field's invalid outline. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-family: var(--ddi-font-body) !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: #9c3b38 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin-top: 6px !important;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: #9c3b38 !important;
}
/* GF 2.5+ adds a red background tint to errored fields — clear it so only
 * the border signals the error, matching the site's clean field style. */
.gform_wrapper .gfield_error,
.gform_wrapper .gfield.gfield_error {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ---- Beaver Builder content ---- */
.fl-button {
	color: var(--ddi-gold-light) !important;
}
.fl-number .fl-number-int,
.fl-number .fl-number-after-text,
.fl-number .fl-number-before-text,
.fl-post-grid-post .fl-post-grid-more {
	color: var(--ddi-gold-light) !important;
}

/* ---- Magnific popup backdrop (used when register/callback modals open) ---- */
.mfp-bg {
	background: var(--ddi-midnight) !important;
}

/* ---- Wrapper background when a header dropdown is enabled ---- */
.dropdown-enabled #wrapper {
	background-color: var(--ddi-midnight) !important;
}

/* ---- Ajax loader spinner ---- */
.ajax-loader::after {
	background: var(--ddi-deep-navy) !important;
}

/* ---- Footer contact options (parent footer – replaced soon) ---- */
.footer-contact-options h3,
.footer-contact-options .contact-dropdown li,
.footer-contact-options .contact-dropdown:before {
	color: var(--ddi-gold) !important;
}
.footer-contact-options .contact-dropdown {
	border-color: var(--ddi-gold) !important;
}
.footer-contact-options .contact-dropdown:hover {
	background-color: var(--ddi-gold) !important;
}
.footer-contact-options p.skype-text,
.footer-contact-options p.skype-text a {
	color: var(--ddi-gold-darker) !important;
	border-color: var(--ddi-gold-darker) !important;
}

/* ---- Inline social + testimonial read-more + decorative crown ---- */
.inline-social-media ul li a,
.testimonial .readmore-toggle span,
svg#crown {
	color: var(--ddi-gold-light) !important;
	fill: var(--ddi-gold-light) !important;
}


/* --------------------------------------------------------------------------
   TOP-CHROME STACKING – factors in the WP admin bar so the fixed
   header sits below it when present.
   -------------------------------------------------------------------------- */
:root {
	--ddi-stack-admin: 0px;
}

body.admin-bar { --ddi-stack-admin: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --ddi-stack-admin: 46px; }
}

/* Smooth in-page anchor scrolling – used by sidebar-doc TOC links and
   any other on-page nav. Respects reduced-motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Interactive chrome — kill the iOS/Android grey tap-highlight "halo" and
 * the default focus outline that browsers paint on tap/click for our own
 * controls (burger, header links/CTAs, buttons, summary toggles). A
 * visible focus ring is restored for KEYBOARD users only via :focus-visible
 * so accessibility is preserved — only mouse/touch lose the halo. */
.header__nav-toggle,
.header__link,
.header__cta,
.header__logo,
.btn,
button,
summary,
a {
	-webkit-tap-highlight-color: transparent;
}
.header__nav-toggle:focus:not(:focus-visible),
.header__link:focus:not(:focus-visible),
.header__cta:focus:not(:focus-visible),
.header__logo:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
	outline: none;
}

/* Placeholder markers – matched text reads at its natural size/style
   (so the page composes as if final), and a small absolute-positioned
   pin floats above to flag the gap. JS in _shared/index.js wraps each
   [TBC: ...] / [SUGGEST: ...] match in a <mark.tbc-marker>; CSS does
   the rest.
   Two variants:
     .tbc-marker--missing  → coral, "Awaiting content"
     .tbc-marker--suggest  → blue,  "Suggested"
   The body inherits its parent's typography fully (display heading,
   eyebrow, body — whatever the placeholder lives inside renders at
   full size). A faint dashed underline whispers the boundary so
   reviewers can still see the extent of the placeholder. */
mark.tbc-marker {
	position: relative;
	display: inline;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: help;
}

/* The pin floats above the first line of the placeholder, anchored to
   the left edge. pointer-events: none keeps it out of the click target
   so hovering over the marker still surfaces the title attr. */
.tbc-marker__label {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 4px;
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-weight: 700;
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 9px;
	color: var(--ddi-white);
	background: #E53E3E;
	border-radius: 2px;
	line-height: 1.2;
	white-space: nowrap;
	z-index: 5;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
	pointer-events: none;
}

/* Description body — render exactly as parent. The placeholder copy
   itself fills the role of the final copy visually, so eyebrows look
   like eyebrows, headings look like headings, etc. */
.tbc-marker__body {
	font: inherit;
	color: inherit;
	opacity: 1;
}

/* Missing — coral pin only, no underline. */
mark.tbc-marker--missing .tbc-marker__label { background: #E53E3E; }

/* Suggested — blue pin only, no underline. */
mark.tbc-marker--suggest .tbc-marker__label { background: #3B82F6; }


/* --------------------------------------------------------------------------
   HEADER – fixed across the top of every page.
   Transparent over the hero on .ddi-block pages, solid navy on
   .legacy-page (since BB pages have no dark hero behind the bar).
   `.header--scrolled` toggled by critical.js once scrollY > 80.
   -------------------------------------------------------------------------- */
.header {
	position: fixed;
	top: var(--ddi-stack-admin);
	left: 0; right: 0;
	/* Bumped from 201 → 1000 to defensively beat anything that
	   might create a competing stacking context (Beaver Builder
	   modules, embedded plugin widgets, etc.). */
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 40px 24px 48px;
	background: transparent;
	transition: background 0.4s ease, padding 0.4s ease;
}
.header--scrolled {
	padding-top: 16px;
	padding-bottom: 16px;
}
/* Sticky bar (site-wide) — a cream frosted-glass band with dark text/icons,
   the lighter treatment the /apply flow already uses. Legacy Beaver Builder
   pages keep the solid navy bar (rule below wins via !important). */
body:not(.legacy-page) .header--scrolled {
	background: rgba(248, 246, 242, 0.9);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body:not(.legacy-page) .header--scrolled .header__menu-label,
body:not(.legacy-page) .header--scrolled .header__link,
body:not(.legacy-page) .header--scrolled .header__cta {
	color: var(--ddi-midnight) !important;
}
body:not(.legacy-page) .header--scrolled .header__cta {
	border-color: rgba(15, 23, 42, 0.35) !important;
}
body:not(.legacy-page) .header--scrolled .header__cta:hover {
	border-color: var(--ddi-midnight) !important;
}
body:not(.legacy-page) .header--scrolled .header__burger span {
	background: var(--ddi-midnight);
}
body:not(.legacy-page) .header--scrolled .header__divider {
	background: rgba(15, 23, 42, 0.2);
}
body:not(.legacy-page) .header--scrolled .header__logo img {
	filter: brightness(0) saturate(100%);
}

/* Legacy BB pages have no dark hero – keep the bar solid from page load
   using the same "differentiated sticky" colour as the scrolled state. */
body.legacy-page .header {
	background: #1d2e4c !important;
}

/* Apply flow chrome — pages under /apply/<sub>/ get a quieter header
   (no burger, no main nav) so the candidate isn't distracted while
   filling in the form. header.php branches the markup; this CSS
   tightens spacing where the burger used to sit + tones the Help
   link so it reads as utility rather than primary marketing CTA. */
body.is-apply-flow .header__cta--help {
	letter-spacing: 0.12em;
}

/* Utility-flow scrolled state — the apply flow keeps the header
   LIGHT (frosted off-white + dark text) even when scrolled, instead
   of switching to the marketing pages' dark-navy band. This marks
   the apply pages as a distinct flow visually — when the candidate
   sees the header collapse, it stays in the same tonal family as
   the form's buff bg rather than aggressively flipping to dark.
   Backdrop-filter gives a subtle frosted-glass effect that's modern
   without being a hard cream slab. */
body.is-apply-flow .header--scrolled {
	background: rgba(248, 246, 242, 0.88);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
/* Text + icons stay dark in BOTH states on apply pages (was
 * previously --scrolled only, which left the white default
 * text/logo invisible against the off-white form-band at rest).
 * Background stays transparent at rest, frosted only on scroll
 * — so the visual change between states is the bg becoming
 * present, not text-colour flipping for legibility. */
body.is-apply-flow .header .header__menu-label,
body.is-apply-flow .header .header__link,
body.is-apply-flow .header .header__cta {
	color: var(--ddi-midnight) !important;
}
body.is-apply-flow .header .header__cta {
	border-color: rgba(15, 23, 42, 0.35) !important;
}
body.is-apply-flow .header .header__cta:hover {
	border-color: var(--ddi-midnight) !important;
}
body.is-apply-flow .header .header__burger span {
	background: var(--ddi-midnight);
}
body.is-apply-flow .header .header__divider {
	/* Apply-flow divider colour for the light band (it only actually shows
	 * on mobile, where the base <=1080px rule sets display:block). Dark
	 * hairline to suit the off-white surface. */
	background: rgba(15, 23, 42, 0.2);
	opacity: 0.6;
}
body.is-apply-flow .header .header__logo img {
	filter: brightness(0) saturate(100%);
}


/* Pages that open with a LIGHT page-hero (privacy, terms, etc.) need
   the header to read as dark text/icons against the off-white surface
   instead of the default white-on-dark. Body class `has-light-hero` is
   added in functions.php for any page whose content contains the
   `page-hero--light` modifier. The sticky scroll state (`--scrolled`)
   still flips back to the brand dark band so legibility is consistent
   once the user scrolls below the hero. */
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__menu-label,
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__link,
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__divider,
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__cta {
	color: var(--ddi-midnight) !important;
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__cta {
	border-color: rgba(15, 23, 42, 0.35) !important;
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__cta:hover {
	border-color: var(--ddi-midnight) !important;
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__burger span {
	background: var(--ddi-midnight);
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__divider {
	opacity: 0.35;
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__logo img {
	filter: brightness(0) saturate(100%);  /* black wordmark on light */
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__link:hover,
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__menu-label {
	color: var(--ddi-deep-navy);
}
body.has-light-hero:not(.nav-open) .header:not(.header--scrolled) .header__link::after {
	background: var(--ddi-deep-navy);
}

.header__left {
	display: flex;
	align-items: center;
	gap: 18px;
	z-index: 2;
}

.header__nav-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ddi-white);
}
.header__menu-label {
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ddi-white) !important;
}

.header__burger {
	width: 24px;
	height: 14px;
	position: relative;
	display: inline-block;
}
.header__burger span {
	display: block;
	position: absolute;
	left: 0; width: 100%; height: 1.5px;
	background: var(--ddi-white);
	transition: transform 0.35s ease, opacity 0.25s ease;
}
.header__burger span:nth-child(1) { top: 0; }
.header__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.header__burger span:nth-child(3) { bottom: 0; }

body.nav-open .header__burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.nav-open .header__burger span:nth-child(2) { opacity: 0; }
body.nav-open .header__burger span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

.header__divider {
	/* Divider is a MOBILE-only treatment (shown via the <=1080px rule).
	 * Hidden on desktop next to both the burger and the EXIT control. */
	display: none;
	width: 1px;
	height: 32px;
	background: rgba(255, 255, 255, 0.25);
}

.header__logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	line-height: 0;
}
.header__logo img {
	height: 28px;
	width: auto;
	filter: brightness(0) invert(1);
	transition: height 0.4s ease;
}
.header--scrolled .header__logo img { height: 24px; }

.header__right {
	display: flex;
	align-items: center;
	gap: 24px;
	z-index: 2;
}

.header__link {
	font-family: var(--ddi-font-ui);
	font-size: 12px; font-weight: 400;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ddi-white) !important;
	position: relative;
	padding-bottom: 2px;
	transition: color 0.3s;
}
.header__link::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	height: 1px; width: 100%;
	background: var(--ddi-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__link:hover::after { transform: scaleX(1); }
.header__link:hover { color: var(--ddi-gold); }

/* Exit / back control on the apply form: icon + "Exit" label on desktop,
 * icon-only on mobile. Centre the SVG, drop the text underline bar. */
.header__link--exit {
	/* Match the burger toggle's box (padding 0, gap 12px, no negative
	 * margin) so the left cluster reads consistently. No min-width: the
	 * icon + label size naturally, so mobile (label hidden) leaves no gap. */
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	margin-left: 0;
}
.header__link--exit::after { display: none; }
.header__exit-icon { display: block; }
.header__exit-label {
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.header__cta {
	font-family: var(--ddi-font-ui);
	font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	transition: opacity 0.3s ease, border-color 0.3s ease;
	color: var(--ddi-white) !important;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	opacity: 0.9;
}
.header__cta:hover {
	opacity: 1;
	border-color: var(--ddi-white);
}


/* --------------------------------------------------------------------------
   NAV OVERLAY – full-screen primary nav. Toggled by `body.nav-open`.
   All transitions are CSS only (no JS beyond the class toggle) so the
   overlay still animates under LiteSpeed Delay JS.
   Sits below the WP admin bar (so admin chrome remains visible) and
   covers the DDI logged-in bar (treated as a full-screen takeover).
   -------------------------------------------------------------------------- */
.nav-overlay {
	position: fixed;
	top: var(--ddi-stack-admin);
	right: 0; bottom: 0; left: 0;
	/* Above the header (z-index 1000) so the menu/start dialog covers
	   the fixed chrome when open. Start-overlay sits one notch higher
	   again so it can layer on top of the nav-overlay if both fire. */
	z-index: 1100;
	background: var(--ddi-deep-navy);
	/* Explicit white text colour on the container so inherited links
	 * (the sitewide body-text underline rule sets `color: inherit` on
	 * <a>, which would otherwise cascade to a non-white parent colour
	 * and turn the menu items off-white/grey). */
	color: var(--ddi-white);
	opacity: 0; visibility: hidden;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.6s;
	display: flex; flex-direction: column; justify-content: center;
	/* Reserve space at the top (clears the fixed header) and bottom (clears the
	 * social footer); scrollable as a last resort on very short windows. */
	padding: clamp(88px, 12vh, 132px) clamp(40px, 6vw, 80px) clamp(64px, 9vh, 96px) clamp(60px, 10vw, 160px);
	overflow-y: auto;
}
/* The overlay container is focused on open (see critical.js openNav) so keyboard
 * users land inside the menu without item one appearing "selected" — and no
 * visible ring on the container itself. */
.nav-overlay:focus { outline: none; }

/* Tablet (769–1080px): the header gutter is 48px, so the divider sits at
 * 48 + burger 24 + .header__left gap 18 = 90px. Align the menu items there. */
@media (min-width: 769px) and (max-width: 1080px) {
	.nav-overlay { padding-left: 90px; }
}

/* Keep the sitewide header LAYERED ABOVE the nav-overlay when it's
 * open. The overlay's z-index is 1100 and the header's default is
 * 1000, so without this bump the overlay would cover the logo + the
 * burger (which doubles as the close — see burger→X transform at
 * lines 636-638) + START HERE button. Header needs to stay on top
 * so the visitor can dismiss the overlay or jump to Start Here.
 * Falls back to default 1000 once closed. */
body.nav-open .header { z-index: 1150; }

/* "Menu" / "Close" text label stays visible — critical.js swaps
 * the textContent between the two states. The burger itself (3
 * spans → X morph) is handled by the existing CSS at lines 636-638. */

/* When the nav overlay is OPEN, the overlay's dark navy bg sits
 * directly behind the (transparent) header. The elements that stay
 * visible (logo, burger/X, "Close" label, START HERE button) need
 * to render WHITE regardless of context — overriding the
 * dark-on-light treatment used on `has-light-hero` pages or the
 * dark-on-light frosted treatment on `is-apply-flow` pages.
 *
 * Job Search + Our Story header links + the divider next to them
 * are HIDDEN entirely while the overlay is open — the full menu
 * is already on screen so these wayfinding links are redundant.
 * Hiding via display:none also avoids the colour transition that
 * would otherwise fire on close (`.header__link` has
 * `transition: color 0.3s` which would animate the white→default
 * fade as the overlay dismissed).
 *
 * Selectors use !important to win against the has-light-hero and
 * is-apply-flow rules earlier in this file. */
body.nav-open .header .header__link {
	display: none !important;
}
/* The divider stays visible while the menu is open, so the close (X) keeps the
 * exact same divider + logo spacing as the burger has when closed — no jump. */
body.nav-open .header .header__menu-label,
body.nav-open .header .header__cta {
	color: var(--ddi-white) !important;
}
body.nav-open .header .header__cta {
	border-color: rgba(255, 255, 255, 0.35) !important;
}
body.nav-open .header .header__cta:hover {
	border-color: var(--ddi-white) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}
body.nav-open .header .header__burger span {
	background: var(--ddi-white) !important;
}
body.nav-open .header .header__logo img {
	/* `brightness(0)` → pure black, then `invert(1)` → pure white.
	 * Forces the logo SVG to render white regardless of its source
	 * colour and overrides any has-light-hero / scrolled filter. */
	filter: brightness(0) invert(1) !important;
}
/* Keep the header divider clearly visible against the navy overlay on EVERY
 * page variant. On light-hero / apply-flow pages the divider is otherwise dark
 * (or reverts to a barely-there 25% white) once their :not(.nav-open) rules
 * drop out, so it vanishes against the navy. Force a consistent light hairline. */
body.nav-open .header .header__divider {
	background: rgba(255, 255, 255, 0.4) !important;
	opacity: 1 !important;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Over the navy overlay the header must be fully transparent — also clear the
 * scrolled cream bar's frosted blur + hairline, which would otherwise leave a
 * lighter banded seam across the top of the overlay. */
body.nav-open .header {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border-bottom-color: transparent !important;
}
body.nav-open { overflow: hidden; }
/* Desktop: while the full-screen menu is open, show just the X — the "Close"
 * label is unnecessary, so keep it hidden entirely (not even on hover). */
@media (min-width: 1081px) {
	body.nav-open .header__nav-toggle .header__menu-label {
		opacity: 0 !important;
		transition: opacity 0.25s ease;
	}
}

.nav-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-overlay__list li {
	opacity: 0; transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
body.nav-open .nav-overlay__list li { opacity: 1; transform: translateY(0); }
body.nav-open .nav-overlay__list li:nth-child(1) { transition-delay: 0.10s; }
body.nav-open .nav-overlay__list li:nth-child(2) { transition-delay: 0.17s; }
body.nav-open .nav-overlay__list li:nth-child(3) { transition-delay: 0.24s; }
body.nav-open .nav-overlay__list li:nth-child(4) { transition-delay: 0.31s; }
body.nav-open .nav-overlay__list li:nth-child(5) { transition-delay: 0.38s; }
body.nav-open .nav-overlay__list li:nth-child(6) { transition-delay: 0.45s; }
body.nav-open .nav-overlay__list li:nth-child(7) { transition-delay: 0.52s; }
body.nav-open .nav-overlay__list li:nth-child(8) { transition-delay: 0.59s; }
body.nav-open .nav-overlay__list li:nth-child(9) { transition-delay: 0.66s; }
body.nav-open .nav-overlay__list li:nth-child(10) { transition-delay: 0.73s; }
body.nav-open .nav-overlay__list li:nth-child(11) { transition-delay: 0.80s; }

.nav-overlay__list a {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	/* Desktop: scale with viewport HEIGHT as well as width so the full menu fits
	 * short windows (the vh term wins on short, wide screens). Larger now the
	 * email is gone from the footer. Mobile uses a fixed size below — the mobile
	 * overlay scrolls, so it doesn't need to shrink. */
	font-size: clamp(1.5rem, min(2.6vw, 4.3vh), 2.4rem);
	line-height: 1.2;
	color: var(--ddi-white);
	display: inline-block;
	padding: clamp(2px, 0.5vh, 7px) 0;
	transition: color 0.3s;
}
.nav-overlay__list a:hover { color: var(--ddi-gold); }

.nav-overlay__footer {
	position: absolute; bottom: clamp(24px, 4vh, 40px);
	left: clamp(60px, 10vw, 160px); right: clamp(40px, 6vw, 60px);
	display: flex; justify-content: flex-end; align-items: center;
	opacity: 0; transition: opacity 0.5s ease 0.5s;
}
/* Mobile: the long menu scrolls, so use a comfortable fixed size (no vh shrink)
 * and let the footer sit in-flow at the end rather than pinned over content. */
@media (max-width: 768px) {
	.nav-overlay {
		justify-content: flex-start;
		padding-top: clamp(92px, 16vh, 130px);
		padding-bottom: 40px;
		/* Align the items' left edge with the header divider: gutter 24 + burger
		 * 24 + .header__left gap 18 = 66px from the viewport left. */
		padding-left: 66px;
	}
	.nav-overlay__list a { font-size: 1.55rem; padding: 8px 0; }
	.nav-overlay__footer {
		position: static;
		margin-top: 44px;
		left: auto; right: auto;
		justify-content: flex-start;
	}
}
body.nav-open .nav-overlay__footer { opacity: 1; }

.nav-overlay__email {
	font-family: var(--ddi-font-body);
	font-size: 14px; font-weight: 300;
	color: var(--ddi-white); transition: color 0.3s;
}
.nav-overlay__email:hover { color: var(--ddi-gold); }

/* Social icons in the nav-overlay – same SVG icons as the footer, sized
   slightly larger for the overlay's generous spacing. Kept visually
   consistent with .footer__social so the brand reads the same in both
   locations. */
.nav-overlay__social { display: flex; align-items: center; gap: 28px; }
.nav-overlay__social a {
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.3s;
	display: inline-flex;
	align-items: center;
}
.nav-overlay__social a:hover { color: var(--ddi-gold); }
.nav-overlay__social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
/* Facebook + Instagram render slightly inset within their viewBoxes –
   bump them up a touch so the row feels even. */
.nav-overlay__social a[aria-label="Facebook"] svg,
.nav-overlay__social a[aria-label="Instagram"] svg {
	width: 24px;
	height: 24px;
}


/* --------------------------------------------------------------------------
   404 PAGE – sits on the page-hero base and adds a button row.
   -------------------------------------------------------------------------- */
.not-found-hero {
	min-height: 70vh;
}
.not-found-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
}
@media (max-width: 640px) {
	.not-found-hero__actions { flex-direction: column; align-items: stretch; max-width: 320px; }
}


/* --------------------------------------------------------------------------
   START HERE DIALOG – two-path card on a dimmed backdrop. Toggled by
   `body.start-open`.
   -------------------------------------------------------------------------- */
.start-overlay {
	position: fixed;
	top: var(--ddi-stack-admin);
	right: 0; bottom: 0; left: 0;
	/* Above both the header (1000) and the nav-overlay (1100) so the
	   start dialog is the topmost surface when open. */
	z-index: 1200;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	padding: clamp(20px, 4vw, 40px);
	opacity: 0; visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
body.start-open .start-overlay {
	opacity: 1; visibility: visible;
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}
body.start-open { overflow: hidden; }

.start-card {
	position: relative;
	background: var(--ddi-white);
	width: 100%; max-width: 720px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: clamp(36px, 3.6vw, 52px) clamp(28px, 3.6vw, 52px);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	transform: translateY(16px);
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1) 0.05s,
				transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s;
}
body.start-open .start-card { opacity: 1; transform: translateY(0); }

.start-close {
	position: absolute; top: 16px; right: 16px;
	width: 36px; height: 36px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--ddi-midnight);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* The close auto-focuses when the dialog opens — suppress the focus ring for
 * pointer/touch/programmatic focus (keyboard users keep it via :focus-visible). */
.start-close:focus:not(:focus-visible) { outline: none; }
.start-close:hover {
	background: var(--ddi-midnight);
	border-color: var(--ddi-midnight);
	color: var(--ddi-white);
}

.start-header { text-align: center; margin-bottom: clamp(22px, 2.6vw, 30px); }
.start-header .eyebrow { color: var(--ddi-gold-mid); margin-bottom: 14px; }
.start-header .gold-rule { margin-bottom: 18px; }

.start-heading {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(26px, 2.45vw, 34px);
	line-height: 1.2;
	color: var(--ddi-midnight);
	margin-bottom: 10px;
}
.start-sub {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ddi-body-text);
	max-width: 480px;
	margin: 0 auto;
}

.start-paths {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.start-path {
	display: block;
	padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2vw, 26px);
	background: var(--ddi-off-white);
	border: 1px solid transparent;
	text-align: center;
	transition: background 0.35s ease, border-color 0.35s ease,
				transform 0.35s ease, box-shadow 0.35s ease;
}
.start-path:hover {
	background: var(--ddi-white);
	border-color: var(--ddi-gold);
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
.start-path__icon {
	width: 44px; height: 44px;
	margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center;
	color: var(--ddi-gold);
}
.start-path__icon svg { width: 100%; height: 100%; }
.start-path__title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(20px, 1.9vw, 22px);
	line-height: 1.2;
	color: var(--ddi-midnight);
	margin-bottom: 10px;
}
.start-path__body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ddi-body-text);
	margin-bottom: 16px;
}
.start-path__cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	transition: color 0.3s ease;
}
.start-path:hover .start-path__cta { color: var(--ddi-navy); }
.start-path:hover .start-path__cta .btn__chevron { transform: translateX(4px); }

.start-footer {
	text-align: center;
	margin-top: clamp(22px, 2.4vw, 30px);
	padding-top: clamp(18px, 2vw, 24px);
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.start-footer p {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ddi-mid-grey);
	margin: 0 0 10px;
}
.start-footer__link {
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 2px;
	transition: color 0.3s ease;
}
.start-footer__link:hover { color: var(--ddi-navy); }


/* --------------------------------------------------------------------------
   RESPONSIVE – header collapses to inline cluster at 1080px and below
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.header__menu-label { display: none; }
	.header__nav-toggle { gap: 0; }
	.header__divider { display: block; }
	.header__logo {
		position: static;
		transform: none;
		display: flex;
		align-items: center;
	}
	.header__logo img { height: 24px; }
	.header--scrolled .header__logo img { height: 24px; }
}

@media (max-width: 768px) {
	.header { padding: 20px 24px; }
	.header--scrolled { padding: 14px 24px; }
	.header__link { display: none; }
	/* Keep the apply-flow Exit / back button visible on mobile — it's the
	 * only way out of the focused form (the burger is removed there), so
	 * it must survive the generic .header__link hide above. */
	.header__link--exit { display: inline-flex; align-items: center; }
	/* Icon-only on mobile — hide the "Exit" word, keep the glyph. */
	.header__exit-label { display: none; }
	.header__logo img { height: 22px; }
	.header--scrolled .header__logo img { height: 22px; }
	.header__cta {
		font-size: 11px;
		padding: 8px 14px;
		letter-spacing: 0.12em;
	}
}

@media (max-width: 600px) {
	/* Start-here dialog becomes a full-screen takeover on phones. */
	.start-overlay {
		padding: 0;
		background: var(--ddi-white);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.start-card {
		max-width: none;
		width: 100vw;
		max-height: 100vh;
		min-height: 100vh;
		box-shadow: none;
		padding: 40px 22px 32px;
	}
	.start-paths { grid-template-columns: 1fr; gap: 12px; }
	.start-close { top: 14px; right: 14px; width: 34px; height: 34px; }
	.start-header { margin-bottom: 24px; }
	.start-path {
		display: grid;
		grid-template-columns: 48px 1fr;
		column-gap: 16px;
		row-gap: 0;
		align-items: start;
		text-align: left;
		padding: 18px;
	}
	.start-path__icon {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 2px 0 0;
		align-self: start;
	}
	.start-path__title,
	.start-path__body,
	.start-path__cta { grid-column: 2; }
	.start-path__title { font-size: 20px; margin-bottom: 6px; }
	.start-path__body { font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
	.start-path__cta { justify-self: start; font-size: 10.5px; letter-spacing: 0.16em; }
	.start-footer p { margin-bottom: 8px; }
}


/* --------------------------------------------------------------------------
   FOOTER – sitewide, centred stacked layout.
   Wordmark + monogram, footer nav, locations strip, social row, legal +
   credit. Mirrors the prototype.
   -------------------------------------------------------------------------- */
.footer {
	background: var(--ddi-deep-navy);
	padding: 72px var(--ddi-gutter, 60px) 40px;
	color: rgba(255, 255, 255, 0.75);
}
.footer__inner {
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto;
	text-align: center;
}

/* New monogram crest, stacked above the footer wordmark (filter renders it
   white to match the wordmark treatment on the navy footer). */
.footer__crest { margin-bottom: clamp(16px, 2vw, 22px); }
.footer__crest img {
	display: block;
	height: 58px;
	width: auto;
	margin: 0 auto;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}
.footer__logo { margin-bottom: 52px; }
.footer__logo img {
	display: block;
	height: 38px !important;     /* defensive against parent/global img rules */
	width: auto !important;
	max-width: 100%;
	margin: 8px auto 0;          /* small nudge down so it sits centered in its row */
	filter: brightness(0) invert(1);
	opacity: 0.6;
}
/* Stacked lockup variant (monogram + wordmark in one mark, replacing the
 * crest + wordmark). Taller than the wordmark, and the inherited white
 * filter turns the navy source SVG white so it reads on the dark footer. */
.footer__logo--mark img {
	height: clamp(70px, 7vw, 90px) !important; /* gold monogram mark */
	width: auto !important;
	filter: none;   /* keep the brand gold (override the footer's white filter) */
	opacity: 1;
	margin-top: 0;
}
.footer__monogram {
	display: block;
	width: 118px !important;     /* dominant brand mark in the footer cluster */
	height: auto !important;
	margin: 36px auto 0 !important;
	filter: brightness(0) invert(1) !important;
	opacity: 0.5 !important;
}

.footer__nav {
	display: flex;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}
.footer__nav a {
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.3s;
}
.footer__nav a:hover { color: var(--ddi-white); }

.footer__strapline {
	margin: 36px auto 0;
	text-align: center;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.footer__strapline-sep { margin: 0 0.55em; }

.footer__social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 28px;
}
.footer__social a {
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.3s;
	display: inline-flex;
	align-items: center;
}
.footer__social a:hover { color: var(--ddi-gold); }
.footer__social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
/* Email icon – outline envelope (the only stroke-drawn icon in the row). */
.footer__social a[aria-label="Email us"] svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Facebook + Instagram render slightly inset within their viewBoxes –
   bump them up a touch so the row feels even. */
.footer__social a[aria-label="Facebook"] svg,
.footer__social a[aria-label="Instagram"] svg {
	width: 20px;
	height: 20px;
}

/* When a prose-centred is being used as a heading-only intro for
 * an os-explore grid below (empty body, just eyebrow + heading),
 * collapse the chunky bottom padding + heading margin-bottom so the
 * two read as a paired section. Without this the prose-centred's
 * 80–140px bottom padding leaves a visible chasm above the cards.
 * Loads after the block CSS so this wins on cascade order. */
.prose-centred:has(.prose-centred__body:empty) {
	padding-bottom: clamp(28px, 3vw, 44px);
}
.prose-centred:has(.prose-centred__body:empty) .prose-centred__heading {
	margin-bottom: 0;
}


/* Our Story "Continue Exploring" cards – three-up grid of editorial
   link cards (Services / The Approach / The Benchmark) that sits
   above the final CTA on the Our Story page. Same idea as a related-
   roles strip but applied to navigation cross-links. */
.os-explore {
	background: var(--ddi-off-white);
	padding: 0 clamp(20px, 5vw, 60px) clamp(80px, 9vw, 120px);
}
/* White surface variant — used on /apply/ for the "Not quite ready?"
 * cards. Has its own top padding because there's no prose-centred
 * heading band sitting flush above (the heading is rendered inline). */
.os-explore--white {
	background: var(--ddi-white);
	padding-top: clamp(40px, 5vw, 64px);
}
.os-explore--white .os-explore__card {
	background: var(--ddi-off-white);
	border-left-color: var(--ddi-gold);
}
.os-explore--white .os-explore__heading {
	text-align: center;
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto clamp(28px, 4vw, 44px);
}
.os-explore--white .os-explore__heading-eyebrow {
	display: block;
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	margin: 0 0 12px;
}
.os-explore--white .os-explore__heading-title {
	font-family: var(--ddi-font-display);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	color: var(--ddi-midnight);
	margin: 0;
}
.os-explore__grid {
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.os-explore__card {
	display: block;
	background: var(--ddi-white);
	border-left: 3px solid var(--ddi-gold);
	padding: 32px 30px 34px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.os-explore__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}
.os-explore__card-eyebrow {
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	margin-bottom: 14px;
}
.os-explore__card-title {
	font-family: var(--ddi-font-display) !important;
	font-style: normal;
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.2;
	color: var(--ddi-midnight);
	margin: 0 0 14px;
	letter-spacing: -0.005em;
}
.os-explore__card-body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ddi-body-text);
	margin: 0 0 22px;
}
.os-explore__card-link {
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-deep-navy);
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 3px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.os-explore__card:hover .os-explore__card-link {
	color: var(--ddi-gold-darker);
	border-bottom-color: var(--ddi-gold-darker);
}
@media (max-width: 900px) {
	.os-explore__grid { grid-template-columns: 1fr; gap: 18px; }
	.os-explore { padding-bottom: 64px; }
}


/* --------------------------------------------------------------------------
   AREA ROLE LIST — "The roles we place" on the three areas-of-expertise
   pages (Childcare & Education, Private Household, Family Office & Lifestyle).
   A two-up grid of role links, each routing to that role's Roles &
   Responsibilities page. Mirrors the os-explore card language (gold left
   rule, Fraunces title, uppercase gold link) tuned as a denser role index.
   Lives in global.css so it ships without a block rebuild.
   -------------------------------------------------------------------------- */
.area-roles {
	background: var(--ddi-off-white);
	padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 60px);
}
.area-roles__inner {
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto;
}
.area-roles__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.area-roles__eyebrow {
	display: block;
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ddi-gold-mid);
	margin: 0 0 14px;
}
.area-roles__heading {
	font-family: var(--ddi-font-display);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ddi-midnight);
	margin: 0;
}
.area-roles__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.area-roles__item {
	display: flex;
	flex-direction: column;
	background: var(--ddi-white);
	border-left: 3px solid var(--ddi-gold);
	padding: 28px 30px 30px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover lift only on linked cards — non-linked (info-only) cards stay static. */
a.area-roles__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}
/* Non-linked cards end at the description (no "View role"); drop its trailing gap. */
.area-roles__item > .area-roles__desc:last-child { margin-bottom: 0; }
.area-roles__role {
	font-family: var(--ddi-font-display);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--ddi-midnight);
	margin: 0 0 8px;
}
.area-roles__desc {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ddi-body-text);
	margin: 0 0 20px;
}
.area-roles__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-deep-navy);
	transition: color 0.25s ease;
}
.area-roles__more-label {
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 3px;
	transition: border-color 0.25s ease;
}
.area-roles__item:hover .area-roles__more { color: var(--ddi-gold-darker); }
.area-roles__item:hover .area-roles__more-label { border-bottom-color: var(--ddi-gold-darker); }
.area-roles__more svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s ease; }
.area-roles__item:hover .area-roles__more svg { transform: translateX(3px); }
@media (max-width: 768px) {
	.area-roles__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Area-page hero focal points. The Childcare and Private Household heroes use
 * portrait photos (1493×2000) as the navy-overlaid backdrop in a wide, short
 * band, so the cover crop is tuned per page-id to keep the subject in frame.
 * Family Office is landscape and crops fine from the centre default. */
.ddi-block.page-id-10674 .page-hero__bg img {
	/* Childcare – nanny & child sit low in the portrait; centre on them. */
	object-position: 50% 50%;
}
.ddi-block.page-id-10675 .page-hero__bg img {
	/* Private Household – lift the butler's face clear of the heading. */
	object-position: 50% 35%;
}

/* Linked hero eyebrow – the area pages' "Services" eyebrow links back to
 * /services/. Inherits the gold, no underline. The word "Services" always
 * shows; on hover a "← Back to " cue expands in *before* it (width grows +
 * fades + slides from the left), pushing the label to the right so it nudges
 * across as the cue is added – rather than the old instant text swap. The cue
 * is aria-hidden, so screen readers still just announce "Services". */
.eyebrow-back {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	max-width: 100%;
}
.eyebrow-back__pre {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	transform: translateX(-0.3em);
	transition:
		max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.32s ease,
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.eyebrow-back:hover .eyebrow-back__pre,
.eyebrow-back:focus-visible .eyebrow-back__pre {
	max-width: 11em;
	opacity: 1;
	transform: translateX(0);
}
.eyebrow-back__label { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
	.eyebrow-back__pre,
	.eyebrow-back:hover .eyebrow-back__pre { transition: none; }
}

/* Animated mouse-wheel "keep scrolling" cue – used in the pinned horizontal
 * sections' hint (approach-flow, timeline-horizontal). The wheel dot drifts
 * down and fades on a loop; it inherits its colour from the hint. */
.ddi-scroll-cue {
	display: inline-block;
	width: 12px;
	margin: 0 0 0 0.6em;
	vertical-align: middle;
	position: relative;
	top: -0.06em;
}
.ddi-scroll-cue svg { display: block; width: 100%; height: auto; }
.ddi-scroll-cue__dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: ddi-scroll-cue-dot 1.6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes ddi-scroll-cue-dot {
	0%   { transform: translateY(-3px); opacity: 0; }
	30%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { transform: translateY(5px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ddi-scroll-cue__dot { animation: none; }
}


/* ==========================================================================
   INSIGHT — single post (child single.php). Navy hero over the featured image,
   contained editorial prose body, "more insights" grid, closing CTA. Styled
   here (always-loaded) since single.php emits HTML, not blocks.
   ========================================================================== */
.insight { background: var(--ddi-white); }

/* Hero — navy over the featured image (mirrors the interior page heroes). */
.insight__hero {
	position: relative;
	min-height: 52vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding: clamp(120px, 15vw, 200px) clamp(20px, 5vw, 60px) clamp(56px, 7vw, 88px);
	color: var(--ddi-white);
	background:
		radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 55%),
		linear-gradient(150deg, var(--ddi-deep-navy) 0%, var(--ddi-navy) 100%);
}
.insight__hero > * { position: relative; z-index: 1; }
.insight__hero-bg { position: absolute; inset: 0; z-index: 0; }
.insight__hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.insight__hero-overlay {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(160deg, rgba(26, 39, 68, 0.66) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.insight__hero .eyebrow { color: var(--ddi-gold) !important; margin: 0 0 18px; }
.insight__hero .gold-rule { background: var(--ddi-gold); margin-bottom: 26px; }
.insight__title {
	font-family: var(--ddi-font-display);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(30px, 4.4vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ddi-white);
	margin: 0;
	max-width: 26ch;
}
.insight__meta {
	margin: 24px 0 0;
	font-family: var(--ddi-font-ui);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}
/* Category now lives in the meta line (moved out of the hero eyebrow) — gold
   accent so it still reads as the article's section, distinct from date/time. */
.insight__meta-cat { color: var(--ddi-gold); }

/* Body — contained editorial prose (renders the_content). */
.insight__body {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 32px) clamp(32px, 4.5vw, 48px);
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ddi-body-text);
}
.insight__body > :first-child { margin-top: 0; }
.insight__body p { margin: 0 0 1.4em; }
.insight__body h2 {
	font-family: var(--ddi-font-display); font-style: normal; font-weight: 300;
	font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.01em;
	color: var(--ddi-midnight); margin: 1.9em 0 0.6em;
}
.insight__body h3 {
	font-family: var(--ddi-font-display); font-style: normal; font-weight: 300;
	font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25;
	color: var(--ddi-midnight); margin: 1.7em 0 0.5em;
}
.insight__body a {
	color: var(--ddi-deep-navy);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.25s ease;
}
.insight__body a:hover { text-decoration-color: var(--ddi-gold-darker); }
.insight__body strong { font-weight: 500; color: var(--ddi-midnight); }
.insight__body ul, .insight__body ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.insight__body li { margin: 0 0 0.5em; }
.insight__body img { max-width: 100%; height: auto; display: block; margin: 2em auto; }
.insight__body blockquote {
	margin: 1.9em 0;
	padding: 4px 0 4px 28px;
	border-left: 3px solid var(--ddi-gold);
	font-family: var(--ddi-font-display); font-style: normal; font-weight: 300;
	font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4;
	color: var(--ddi-midnight);
}
.insight__body blockquote p:last-child { margin-bottom: 0; }

/* Share row — discreet copy-link / LinkedIn / email. Constrained to the body
   width, separated from the prose by a hairline rule. Thin outline icons in
   gold circles; fill to gold on hover. */
.insight__share {
	max-width: 860px;
	margin: 0 auto clamp(40px, 5vw, 60px);
	padding: clamp(20px, 3vw, 28px) clamp(20px, 5vw, 32px) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
/* "Share" eyebrow above the centred icon row. */
.insight__share-label {
	font-family: var(--ddi-font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ddi-gold-mid);
	margin: 0;
}
.insight__share-row {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.insight__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ddi-light-grey);
	border-radius: 50%;
	background: transparent;
	color: var(--ddi-gold-mid);
	cursor: pointer;
	position: relative;
	transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.insight__share-btn:hover,
.insight__share-btn:focus-visible {
	color: var(--ddi-white);
	background: var(--ddi-gold-darker);
	border-color: var(--ddi-gold-darker);
}
.insight__share-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* "Link copied" toast above the copy button. */
.insight__share-copied {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--ddi-midnight);
	color: var(--ddi-white);
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 5px 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.insight__share-copy.is-copied .insight__share-copied {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* "Posted in <Category>" — quiet meta line at the foot of the article (before
   the share row + author box), linking to the category archive. */
.insight__category-footer {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 32px) clamp(20px, 3vw, 28px);
	text-align: center;
}
.insight__category-label {
	margin: 0;
	font-family: var(--ddi-font-ui);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ddi-mid-grey);
}
.insight__category-label a {
	color: var(--ddi-gold-mid);
	text-decoration: none;
	/* Underlined by default so it reads clearly as a link. */
	border-bottom: 1px solid var(--ddi-gold-mid);
	transition: color 0.25s ease, border-color 0.25s ease;
}
.insight__category-label a:hover {
	color: var(--ddi-gold-darker);
	border-bottom-color: var(--ddi-gold-darker);
}

/* Category archive: the light page-hero flows straight into the cream grid
   band (no featured card between them), so drop the band's large top padding
   for a seamless header → grid join. */
body.category .article-grid__journal { padding-top: 0; }

/* "More insights" — reuses the article-grid block; tighten its top padding
   under the section heading. */
.insight__related { background: var(--ddi-off-white); }
.insight__related-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 90px) 20px 0;
}
.insight__related-head .eyebrow { color: var(--ddi-gold-mid) !important; }
.insight__related-heading {
	font-family: var(--ddi-font-display); font-style: normal; font-weight: 300;
	font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.01em;
	color: var(--ddi-midnight); margin: 12px 0 0;
}
.insight__related .article-grid__journal { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(36px, 4vw, 52px); }

/* "View All Insights" — outline button under the More Insights grid, linking
   back to the listing. */
.insight__related-more {
	display: flex;
	justify-content: center;
	padding: 0 20px clamp(64px, 9vw, 104px);
}
.insight__related-btn {
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ddi-midnight);
	background: transparent;
	border: 1px solid rgba(26, 39, 68, 0.28);
	padding: 16px 42px;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.insight__related-btn:hover,
.insight__related-btn:focus-visible {
	background: var(--ddi-midnight);
	color: var(--ddi-white) !important;
	border-color: var(--ddi-midnight);
}

/* Author attribution — a small framed founder photo, the agency name, a short
   bio and a link to Our Story. Authorship + entity signal for search / AI. */
.insight__author {
	max-width: 800px;
	/* Side gutter matching the body's clamp(20px,5vw,32px) so the gold border is
	   clearly inset from the page edges (not flush) on narrower screens. */
	width: calc(100% - clamp(40px, 10vw, 64px));
	margin: clamp(8px, 2vw, 24px) auto clamp(48px, 6vw, 88px);
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	gap: clamp(24px, 3vw, 36px);
	align-items: center;
	/* Boxed out with a thin gold rule (more on-brand than a plain divider). */
	border: 1px solid rgba(209, 180, 133, 0.65);
}
.insight__author-frame {
	flex: 0 0 auto;
	width: clamp(120px, 16vw, 156px);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ddi-cool-grey);
}
.insight__author-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.insight__author-text { min-width: 0; }
.insight__author-eyebrow { margin: 0 0 6px; color: var(--ddi-gold-mid) !important; }
.insight__author-name {
	font-family: var(--ddi-font-display); font-style: normal; font-weight: 300;
	font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2;
	color: var(--ddi-midnight); margin: 0 0 8px;
}
.insight__author-bio {
	font-family: var(--ddi-font-body); font-weight: 300;
	font-size: 15px; line-height: 1.5;
	color: var(--ddi-body-text); margin: 0 0 12px; max-width: 56ch;
}
.insight__author-link {
	font-family: var(--ddi-font-ui); font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; font-weight: 600;
	color: var(--ddi-gold-mid); text-decoration: none;
}
.insight__author-link:hover { color: var(--ddi-gold-darker); }

@media (max-width: 640px) {
	.insight__author { flex-direction: column; text-align: center; align-items: center; }
	.insight__author-bio { max-width: none; }
}

/* Closing CTA — navy band (reuses global .btn). */
/* "View all insights" ghost button after a category-archive grid (centred,
 * sits on the light page surface above the navy CTA band). */
.category-archive__more {
	text-align: center;
	margin: clamp(8px, 2vw, 24px) auto clamp(56px, 8vw, 96px);
	padding: 0 clamp(20px, 5vw, 32px);
}
.insight__cta {
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
	text-align: center;
	padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 60px);
}
.insight__cta .eyebrow { color: var(--ddi-gold) !important; margin: 0 0 16px; }
.insight__cta-heading {
	font-family: var(--ddi-font-display); font-style: normal; font-weight: 300;
	font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.015em;
	color: var(--ddi-white); margin: 0 0 18px;
}
.insight__cta-body {
	font-family: var(--ddi-font-body); font-weight: 300; font-size: 17px; line-height: 1.7;
	color: rgba(255, 255, 255, 0.75); max-width: 560px; margin: 0 auto 32px;
}
.insight__cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
	.insight__cta-row { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
	.insight__cta-row .btn { justify-content: center; }
}


/* /apply/ FAQs band — sits between the hero and Useful Pages on the
 * Join Our Network landing. The standalone /candidate/faq/ page was
 * retired (low-value extra hop); accordions live here so candidates
 * can answer themselves without leaving the registration journey.
 * `details/summary` is used for native a11y + zero-JS open/close. */
.apply-faqs {
	background: var(--ddi-off-white);
	padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 60px);
}
.apply-faqs__inner {
	max-width: 820px;
	margin: 0 auto;
}
.apply-faqs__heading {
	text-align: center;
	margin-bottom: clamp(40px, 5vw, 64px);
}
.apply-faqs__title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	color: var(--ddi-midnight);
	margin: 14px 0 0;
}
.apply-faqs__list {
	border-top: 1px solid rgba(15, 23, 42, 0.12);
}
.apply-faq {
	border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.apply-faq__q {
	/* Sans-serif: the serif display face is reserved for headlines only. */
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.4;
	color: var(--ddi-midnight);
	padding: 22px 44px 22px 4px;
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: color 0.2s ease;
}
.apply-faq__q::-webkit-details-marker { display: none; }
.apply-faq__q::after {
	content: '+';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--ddi-font-ui);
	/* Slightly larger glyph; weight stays 300 so the strokes read thin. */
	font-weight: 300;
	font-size: 30px;
	color: var(--ddi-gold);
	transition: transform 0.25s ease;
	line-height: 1;
}
.apply-faq[open] > .apply-faq__q::after {
	content: '−';
}
.apply-faq__q:hover { color: var(--ddi-gold-darker); }
.apply-faq__a {
	padding: 0 44px 24px 4px;
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3a4356;
}
.apply-faq__a p { margin: 0 0 0.8em; }
.apply-faq__a p:last-child { margin-bottom: 0; }
.apply-faq__a a {
	color: var(--ddi-midnight);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-underline-offset: 3px;
}
.apply-faq__a a:hover { color: var(--ddi-gold-darker); }
.apply-faqs__footer {
	text-align: center;
	margin: clamp(32px, 4vw, 48px) 0 0;
	font-family: var(--ddi-font-body);
	font-size: 16px;
	color: #5b6478;
}
.apply-faqs__footer a {
	color: var(--ddi-midnight);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-underline-offset: 3px;
}

/* Apply-to-Join CTA below the FAQ footer — primary conversion
 * anchor at the bottom of the page after the candidate has read
 * the FAQs. Centred, gold solid button, sensible top spacing. */
.apply-faqs__cta {
	text-align: center;
	margin: clamp(24px, 3vw, 36px) 0 0;
}
.apply-faqs__cta .btn {
	display: inline-flex;
}


/* /apply/start/ form band — wraps the Gravity Form #24 embed.
 * Light off-white background (no hero block above; this band IS the
 * page surface). Form sits in a centred white card at normal
 * content width so the fields feel like editorial content rather
 * than a sprawling sign-up. GF's native percentage progress bar
 * (3 pages) is restyled to sit at the TOP of the boxed section. */
.apply-form-band {
	/* Same subtle gradient + gold-glow treatment as the /apply/
	 * landing's .page-hero--light variant so the registration flow
	 * feels visually continuous with where the candidate came from.
	 * Off-white at top → cool-grey at bottom, with a soft champagne
	 * radial glow in the top-right corner.
	 *
	 * background-attachment: fixed anchors the gradient to the
	 * viewport rather than the section, so it always reads as a
	 * full 100vh gradient and stays visually coherent on long forms
	 * where the section runs to 3000px+ tall. Without this the
	 * gradient stretches across the whole section and the
	 * off-white → cool-grey transition becomes invisible in the
	 * middle, and the gold glow drifts way off-screen at the top. */
	background:
		radial-gradient(ellipse at 80% 20%, rgba(209, 180, 133, 0.08) 0%, transparent 55%),
		linear-gradient(180deg, var(--ddi-off-white) 0%, var(--ddi-cool-grey) 100%);
	background-attachment: fixed;
	padding: clamp(56px, 6vw, 96px) clamp(20px, 5vw, 60px) clamp(80px, 9vw, 120px);
	min-height: 100vh;
	position: relative;
}

/* Fade overlay — sits just below the progress bar and tapers from
 * the page off-white at the top to transparent at the bottom. As
 * the candidate scrolls, content rising up the page is absorbed
 * into this gradient just below the chrome, making the transition
 * from "form content" to "header zone" feel smooth instead of
 * having content disappear under a hard line.
 *
 * --current-header-bottom is set by syncBar() in functions.php so
 * the overlay tracks the header's collapse on scroll. */
.apply-form-band::after {
	/* Gradient fade overlay removed on all viewports — it didn't read well
	 * and added a visible band below the header. The form scrolls cleanly. */
	display: none;
	content: '';
	position: fixed;
	/* Flush to the bottom edge of the header (the JS-published var
	 * is the header's actual viewport-bottom) so there's no visible
	 * stripe between header and fade. */
	top: var(--current-header-bottom, 91px);
	left: 0;
	right: 0;
	height: 60px;
	/* First 4px of the gradient are TRANSPARENT so the 1px progress
	 * bar (which sits at the very top of this overlay) reads against
	 * the apply-form-band's own gradient instead of being absorbed
	 * into the opaque off-white wash. Without this, the gold bar
	 * (track rgba 0.22, fill solid gold) has near-zero contrast
	 * against solid off-white and effectively disappears. From 4px
	 * down, the original off-white → transparent fade picks up. */
	background: linear-gradient(
		180deg,
		rgba(248, 246, 242, 0) 0px,
		rgba(248, 246, 242, 0) 4px,
		var(--ddi-off-white) 10px,
		rgba(248, 246, 242, 0.6) 38px,
		rgba(248, 246, 242, 0) 60px
	);
	z-index: 997; /* below progress bar (999) and header (1000) */
	pointer-events: none;
}
/* The fixed fade overlay doesn't behave on mobile (the fixed header
 * height / collapse maths differ and it leaves a visible band), so it's
 * removed below the tablet breakpoint — the form simply scrolls cleanly. */
@media (max-width: 768px) {
	.apply-form-band::after { display: none; }
}

/* Layout — two-column when the rail is visible, single-column
 * (form only) when it isn't. align-items: stretch makes the rail
 * panel match the form's full height so they read as a connected
 * editorial spread separated by a hairline divider. No gap — the
 * divider IS the gap. */
.apply-form-band__layout {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	gap: 0;
	position: relative;
}
@media (max-width: 960px) {
	.apply-form-band__layout {
		flex-direction: column;
		gap: 12px;
	}
}

/* Editorial rail — transparent column on the left of the form,
 * separated from the form by a single hairline. No background, no
 * card — the page's gradient shows through, and the divider IS the
 * structural element. Stretches to the form's full height via the
 * layout's align-items:stretch so the line runs the whole way down
 * and the two columns "sit together".
 *
 * Hidden on step 1 (no .has-rail on the section). Animates in via
 * width + opacity + border-width together so the divider appears
 * with the column rather than after it. */
.apply-form-band__rail {
	width: 0;
	flex: 0 0 0;
	overflow: clip;
	opacity: 0;
	pointer-events: none;
	background: transparent;
	color: var(--ddi-midnight);
	box-sizing: border-box;
	position: relative;
	transition:
		width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		flex-basis 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.45s ease 0.1s;
}
@supports not (overflow: clip) {
	.apply-form-band__rail { overflow: hidden; }
}
.apply-form-band.has-rail .apply-form-band__rail {
	width: 33%;
	flex: 0 0 33%;
	opacity: 1;
	pointer-events: auto;
}

/* Scroll-triggered rail reveal — opt-in via the
 * .apply-form-band--reveal-rail modifier on the section. The rail
 * starts off-canvas-left and translates in once the IntersectionObserver
 * in functions.php fires `is-revealed`. Used on /register/ where the
 * rail is static (single-page form). Apply/start keeps the default
 * behaviour: rail visible the moment step 2 is shown via syncRail(). */
.apply-form-band--reveal-rail .apply-form-band__rail {
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
.apply-form-band--reveal-rail .apply-form-band__rail.is-revealed {
	opacity: 1;
	transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
	.apply-form-band--reveal-rail .apply-form-band__rail,
	.apply-form-band--reveal-rail .apply-form-band__rail.is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Sticky inner — content sits at the top of the rail column and
 * stays pinned at viewport top:100px as the candidate scrolls long
 * steps. Padding lives here rather than on the outer .rail so the
 * content has consistent insets even while the outer is animating
 * its width. Right-padding gives breathing room from the divider. */
.apply-form-band__rail-sticky {
	position: sticky;
	/* Sit a little lower so the rail clears the fixed header when it
	 * pins on step 2 (was 100px, which tucked under the header). */
	top: 124px;
	box-sizing: border-box;
	width: 100%;
	padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 36px) clamp(28px, 3vw, 40px) 0;
}

/* Per-step content swap — JS toggles .is-active on whichever
 * .rail-inner matches the current page. */
.apply-form-band__rail-inner { display: none; }
.apply-form-band__rail-inner.is-active { display: block; }

/* Form takes the rest of the row and adds a left inset matching the
 * rail's right padding so the two columns mirror around the divider.
 * On step 1 (no rail) the form is locked to a narrower max-width and
 * centred in the layout — the introductory step reads as a focused
 * announcement rather than a left-aligned spread. */
.apply-form-band__form {
	padding-left: 0;
	transition: padding-left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apply-form-band.has-rail .apply-form-band__form {
	flex: 1 1 0;
	min-width: 0;
	padding-left: clamp(28px, 3vw, 40px);
}
.apply-form-band:not(.has-rail) .apply-form-band__layout {
	justify-content: center;
}
.apply-form-band:not(.has-rail) .apply-form-band__form {
	/* Wider on step 1 so the editorial body copy lands on natural
	 * line breaks ("for our industry" stays on the same line as
	 * the rest of the sentence). Steps 2/3 keep their narrower
	 * 720 cap when the rail's alongside the form. */
	flex: 0 1 880px;
	max-width: 880px;
}

/* Intro above the form (replaces the old left rail) — a short, centred summary
   of what to include, plus a "Speak to us" link to the contact modal. */
.apply-form-band__intro {
	max-width: 720px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	text-align: center;
}
.apply-form-band__intro-eyebrow { margin: 0 0 12px; color: var(--ddi-gold-mid) !important; }
.apply-form-band__intro-title {
	font-family: var(--ddi-font-display); font-weight: 300; font-style: normal;
	font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.01em;
	color: var(--ddi-midnight); margin: 0 0 16px;
}
/* Scoped under the parent so `margin: 0 auto` (centring) + max-width win over
 * the broad `.apply-form-band__intro p { margin: 0 }` rule further down the
 * file — that rule was overriding the body's auto-margins and shoving the
 * 620px body box to the left of the 760px intro (the "off-centre" bug). */
.apply-form-band__intro .apply-form-band__intro-body {
	font-family: var(--ddi-font-body); font-weight: 300; font-size: 17px; line-height: 1.5;
	color: var(--ddi-body-text); margin: 0 auto; max-width: 620px;
}
/* The "Prefer to talk it through first? Speak to us." line is plain body text
 * (same size + colour as the paragraph above), centred on the same axis. The
 * "Speak to us" link keeps its gold underline via the rule below. */
.apply-form-band__intro .apply-form-band__intro-help {
	font-family: var(--ddi-font-body); font-weight: 300; font-size: 17px; line-height: 1.5;
	color: var(--ddi-body-text); margin: 6px auto 0; max-width: 620px;
}
.apply-form-band__intro-help a {
	color: var(--ddi-gold-mid); text-decoration: none;
	border-bottom: 1px solid var(--ddi-gold); padding-bottom: 1px;
	transition: border-color 0.25s ease;
}
.apply-form-band__intro-help a:hover { border-bottom-color: var(--ddi-gold-darker); }

/* Dual-path (homepage) — heavier navy overlay so the white copy reads clearly
   over the bright "I'm a Professional" / "I'm Looking to Hire" photos. */
.ddi-block .dual-path__overlay {
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.82));
}

/* Homepage service-card role tags are presentational only — links disabled per
   client request. (A proper block-editor on/off toggle needs a service-card
   rebuild; held off while several block sources have uncommitted changes.) */
body.page-id-10609 .services-v__roles a {
	pointer-events: none;
	cursor: default;
}

/* Section dividing line (Our Story, etc.). Colour + width are set per-instance
   via the divider block's Inspector controls; these mirror the block's own
   style.scss so the frontend renders identically (both stylesheets load on the
   frontend — global.css wins the cascade, so the modifiers must live here too). */
.os-divider {
	height: 1px;
	margin: 0 auto;
	width: min(var(--ddi-container, 1320px), calc(100% - 48px));
	background: rgba(209, 180, 133, 0.45);
}
.os-divider--colour-gold-light { background: rgba(209, 180, 133, 0.45); }
.os-divider--colour-gold       { background: var(--ddi-gold); }
.os-divider--colour-navy       { background: rgba(26, 39, 68, 0.4); }
.ddi-section--bg-navy .os-divider--colour-navy,
.ddi-section--bg-deep-navy .os-divider--colour-navy { background: rgba(255, 255, 255, 0.45); }
.os-divider--width-short  { width: clamp(64px, 9vw, 120px); }
.os-divider--width-medium { width: min(640px, calc(100% - 48px)); }
.os-divider--width-full   { width: min(var(--ddi-container, 1320px), calc(100% - 48px)); }

/* Step 1 — centre the introductory content. The h2 heading + body
 * paragraphs + agreement checkboxes + START REGISTRATION button all
 * center-align so the page reads as a focused announcement. Inner
 * blocks get a max-width so the centred text doesn't stretch to
 * uncomfortable line lengths. Suppress the section-divider that
 * .gfield_html h2 normally gets — on a centred intro it'd cut
 * across the page awkwardly. */
.apply-form-band:not(.has-rail) .gform_body {
	text-align: center;
}
/* …but real input fields keep LEFT-aligned labels + content. The centring above
   is only meant for the .gfield_html intro announcement + the submit button — it
   should not centre actual field labels (Client name, email, etc.). */
.apply-form-band:not(.has-rail) .gfield:not(.gfield--type-html) {
	text-align: left;
}
.apply-form-band:not(.has-rail) .gfield_html h2,
.apply-form-band:not(.has-rail) .gfield_html h3,
.apply-form-band:not(.has-rail) .gfield_html p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.apply-form-band:not(.has-rail) .gfield_html:has(> h2) {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.apply-form-band:not(.has-rail) .gform_wrapper .ginput_container_consent {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: left; /* checkbox + label row stays left-aligned within centred row */
}
.apply-form-band:not(.has-rail) .gform_wrapper .gform_page_footer,
.apply-form-band:not(.has-rail) .gform_wrapper .gform_footer {
	justify-content: center;
}

@media (max-width: 1100px) {
	/* Stack on narrower viewports — rail above form, no divider. */
	.apply-form-band__layout {
		flex-direction: column;
	}
	.apply-form-band__rail {
		width: 100%;
		flex: 0 0 auto;
		display: none;
		border-right: none;
	}
	.apply-form-band.has-rail .apply-form-band__rail {
		display: block;
		width: 100%;
	}
	.apply-form-band__rail-sticky {
		position: static;
		width: 100%;
		padding: 0 0 12px;
	}
	.apply-form-band__form,
	.apply-form-band.has-rail .apply-form-band__form {
		padding-left: 0;
	}
	/* Stacked layout: the form's flex-basis (880px / 760px) is meant as a
	   column WIDTH for the desktop row layout. Once the layout is a column,
	   flex-basis becomes the form box's HEIGHT — padding short no-rail forms
	   (e.g. /contact/) out to 880px and leaving a big empty gap under the
	   fields. Size the box to its content instead. */
	.apply-form-band:not(.has-rail) .apply-form-band__form {
		flex-basis: auto;
	}
}
/* Rail typography — dark on white. Eyebrow uses gold-darker (the
 * WCAG-tuned variant for light backgrounds) and now carries the
 * step indicator ("Step 1", "Step 2"). The GF first page is an
 * agreement gate, not a "real" step from the candidate's POV, so
 * the rail-bearing GF page 2 displays as "Step 1" and so on. Title
 * is brand serif, body is muted near-black, the help block at the
 * bottom is delineated by a hairline divider rather than its own
 * colour. */
.apply-form-band__rail-eyebrow {
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-gold-mid);
	margin: 0 0 10px;
}
.apply-form-band__rail-title {
	font-family: var(--ddi-font-display);
	font-weight: 400;
	font-size: clamp(34px, 3.2vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ddi-midnight);
	margin: 0 0 18px;
}
.apply-form-band__rail-body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	/* Match the form body copy ("Before you apply" intro) so the two
	 * columns' text lines up: 15px / 1.6. */
	font-size: 15px;
	line-height: 1.6;
	color: #4a5260;
	margin: 0;
}
.apply-form-band__rail-body p { margin: 0 0 10px; }
.apply-form-band__rail-body p:last-child { margin-bottom: 0; }
.apply-form-band__rail-body strong,
.apply-form-band__rail-body b {
	font-weight: 500;
	color: var(--ddi-midnight);
}
.apply-form-band__rail-body a {
	color: var(--ddi-midnight);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-underline-offset: 3px;
}
.apply-form-band__rail-body a:hover {
	text-decoration-color: var(--ddi-gold-darker);
}
/* Rail prompt list — refined to the design system (default UA discs read as
 * cluttered in this narrow editorial column). Custom gold en-dash markers,
 * hanging indent so wrapped lines align, comfortable rhythm. */
.apply-form-band__rail-body ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.apply-form-band__rail-body li {
	position: relative;
	padding-left: 18px;
	margin: 0 0 9px;
	line-height: 1.55;
}
.apply-form-band__rail-body li:last-child { margin-bottom: 0; }
.apply-form-band__rail-body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 1px;
	background: var(--ddi-gold);
}

/* Help block — hairline divider sets it apart from the editorial
 * content above it. Vertical link list, links are quiet UI-style
 * (uppercase + tracked) with a gold underline that intensifies on
 * hover. */
.apply-form-band__rail-help {
	/* No divider — the prompt now reads as the closing line of the
	 * body copy above. Just a normal paragraph gap separates them. */
	margin-top: 10px;
}
.apply-form-band__rail-prompt {
	/* Matches .apply-form-band__rail-body so it flows as part of the
	 * same block of text rather than a detached caption. */
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.65;
	color: #4a5260;
	margin: 0;
}
.apply-form-band__rail-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.apply-form-band__rail-links li {
	margin: 0 0 8px;
}
.apply-form-band__rail-links li:last-child { margin-bottom: 0; }
.apply-form-band__rail-link {
	/* Resets for when the link is rendered as a <button> (Concierge
	 * trigger) — strip browser button chrome but keep the gold
	 * underline + uppercase tracked label. */
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ddi-gold);
	padding: 0 0 3px;
	cursor: pointer;
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease;
	display: inline-block;
}
.apply-form-band__rail-link:hover {
	color: var(--ddi-gold-darker);
	border-color: var(--ddi-gold-darker);
}

/* Inline text hyperlink inside the rail prompt (e.g. "Need some
 * support? Click here for support."). Renders as a regular gold-
 * underlined link, not a chunky UI button — keeps the support
 * offer conversational rather than calling out as a CTA. */
.apply-form-band__rail-textlink {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--ddi-deep-navy);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.apply-form-band__rail-textlink:hover {
	color: var(--ddi-gold-darker);
	text-decoration-color: var(--ddi-gold-darker);
}

.apply-form-band__form {
	/* No card. Fields sit directly on the buff page surface — the
	 * structuring device is whitespace + typography hierarchy, not
	 * a white box with a shadow. Reads as editorial / modern rather
	 * than corporate-form. Width still locked at 960 so the layout
	 * works the same way (rail + form total caps at 1240). */
	flex: 1 1 0;
	min-width: 0;
	max-width: 960px;
}

/* GF progress bar — extracted out of the form's normal flow into a
 * thin 2px gold meter pinned just below the fixed header, full
 * viewport width. No text label (the rail now carries the step
 * identity).
 *
 * Top values match the header's actually-rendered height in each
 * state: 91px at top of page (24+24 padding + ~43 logo content),
 * 75px when scrolled (16+16 padding + ~43 content). The CSS vars
 * --ddi-header-h / --ddi-header-h-scrolled (88/72) are designer
 * intent values that don't account for the 3px font-metric padding
 * around the logo, so we hardcode the rendered values here.
 *
 * `body:has(.header--scrolled)` flips between the two states in
 * sync with the header's own CSS transition. (Using var() with the
 * .has-rail selector instead would break the `top` transition —
 * unregistered custom properties don't trigger transitions on
 * dependent properties.) */
.apply-form-band__form .gf_progressbar_wrapper {
	position: fixed;
	/* The bar's `top` is set by JS via syncBar() in functions.php —
	 * it tracks the header's actual bottom edge + 6px breathing
	 * room, ticking through the header's padding-collapse transition
	 * via rAF so the two move together frame-by-frame. The 91px
	 * fallback covers the pre-JS state (= header default height). */
	top: 91px; /* JS overrides to the header's actual bottom edge */
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	/* Inactive track — a soft, light gold so it reads as a subtle
	 * unfilled portion of the same bar rather than a neutral line.
	 * The solid gold fill (.gf_progressbar_percentage) still stands
	 * out clearly against this lighter tint. */
	background: rgba(209, 180, 133, 0.28);
	height: 1px;
	z-index: 999; /* below the header (1000) */
}
.apply-form-band__form .gf_progressbar_title {
	display: none;
}
.apply-form-band__form .gf_progressbar {
	/* THIS is the visible track (sits on top of the wrapper). Gravity's
	 * gf_progressbar_blue theme paints it grey (rgb 210,214,220), so we
	 * force the light brand-gold tint here too — !important to beat GF's
	 * themed rule. The solid gold fill (.gf_progressbar_percentage) still
	 * reads clearly against this faint tint. */
	background: rgba(209, 180, 133, 0.15) !important;
	background-image: none !important;
	border-radius: 0;
	overflow: hidden;
	height: 1px;
	box-shadow: none;
	border: none;
	padding: 0;
	margin: 0;
}
.apply-form-band__form .gf_progressbar_percentage {
	background: var(--ddi-gold) !important;
	background-image: none !important;
	color: transparent !important;
	height: 1px;
	border-radius: 0;
	box-shadow: none;
	transition: width 0.45s ease;
	text-indent: -9999px;
}
.apply-form-band__form .gf_progressbar_percentage span {
	display: none;
}

/* Inner padding wrapper – everything below the progress bar lives
 * here at consistent gutter. GF wraps form content in
 * .gform_body / .gform_footer so we pad them as a group. */
.apply-form-band__form .gform_heading,
.apply-form-band__form .gform_body,
.apply-form-band__form .gform_page_footer,
.apply-form-band__form .gform_footer,
.apply-form-band__form .gform_confirmation_message,
.apply-form-band__form .validation_error {
	/* Form content aligns to the page's normal gutter rather than being
	 * inset further (the band already supplies the outer page margin). */
	padding-left: 0;
	padding-right: 0;
}
.apply-form-band__form .gform_heading {
	padding-top: 16px;
	padding-bottom: 6px;
}
.apply-form-band__form .gform_body {
	padding-top: 16px;
	padding-bottom: 16px;
}
.apply-form-band__form .gform_page_footer,
.apply-form-band__form .gform_footer {
	padding-bottom: clamp(24px, 3vw, 36px);
}

/* GF page step label – e.g. "Standards and expectations". */
.apply-form-band__form .gform_page_title,
.apply-form-band__form .gform_title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.25;
	color: var(--ddi-midnight);
	margin: 8px 0 4px;
}
.apply-form-band__form .gform_description {
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	color: var(--ddi-deep-navy);
	margin: 0 0 4px;
}

/* Section breaks inside the form. The GF HTML field is the vehicle
 * the form admin uses to drop a heading + descriptive paragraph
 * between groups of inputs (e.g. "Personal Information" → "Your Name
 * & Contact Information" → name/email/phone fields).
 *
 * Without these rules the headings fall through to global h2/h3
 * styles that size around 17px and read as labels, not section
 * breaks. h2 = primary section heading, h3 = sub-section, h4 =
 * eyebrow-style mini-label. */
.apply-form-band__form .gfield_html h2,
.apply-form-band__form .gfield_html h3 {
	font-family: var(--ddi-font-display);
	color: var(--ddi-midnight);
	line-height: 1.18;
	margin: 0 0 6px;
}
.apply-form-band__form .gfield_html h2 {
	font-weight: 300;
	font-size: clamp(26px, 2.8vw, 34px);
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}
/* Sub-heading immediately under h2 (e.g. "Your Name & Contact
 * Information"). Smaller refined serif, italic so it reads as
 * editorial subtitle rather than another bold line. */
.apply-form-band__form .gfield_html h3 {
	font-family: var(--ddi-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	margin: 0 0 14px;
}
.apply-form-band__form .gfield_html h4 {
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-deep-navy);
	margin: 0 0 8px;
}
.apply-form-band__form .gfield_html p {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ddi-deep-navy);
	margin: 0 0 10px;
}
.apply-form-band__form .gfield_html p:last-child { margin-bottom: 0; }
.apply-form-band__form .gfield_html p strong,
.apply-form-band__form .gfield_html p b {
	font-weight: 600;
	color: var(--ddi-midnight);
}
/* A section-heading-led HTML field gets a top divider so the
 * jump between "End of previous fields" → "New section heading"
 * lands visually. :has() carries the rule only when an h2 is the
 * direct child, so HTML fields used just for sub-descriptions or
 * micro-copy don't get a divider they don't need.
 *
 * Divider is a thin gold hairline (was grey at 0.08 alpha) so the
 * section breaks read as deliberate editorial chapter marks rather
 * than generic WordPress hr-style dividers. */
.apply-form-band__form .gfield_html:has(> h2) {
	padding-top: clamp(36px, 4vw, 52px);
	margin-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid rgba(209, 180, 133, 0.4);
}
/* First HTML field on a step is the step's own intro — no divider
 * above (the progress-bar already separates it from the page chrome). */
.apply-form-band__form .gform_fields > .gfield_html:has(> h2):first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

/* Field rows + spacing. GF's basic.min.css gives .gform_fields a
 * 12-column grid (`grid-template-columns: repeat(12, 1fr)`) and
 * each .gfield carries its own `grid-column` span so Name+Email
 * lay out side-by-side, Address spans 12, etc. Don't override the
 * template — just tune row gap. Overriding to `1fr` collapses
 * everything to a single explicit column, then implicit columns
 * get auto-added for items that span > 1, and the grid resolves
 * to weird unbalanced widths below ~720px. */
.apply-form-band__form .gform_wrapper .gform_fields {
	row-gap: 26px;
}
.apply-form-band__form .gform_wrapper .gfield {
	margin: 0;
}
.apply-form-band__form .gform_wrapper .gfield_label,
.apply-form-band__form .gform_wrapper legend {
	font-family: var(--ddi-font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	margin-bottom: 8px;
	display: block;
}

/* Popup apply form (single-job-apply-modal): Gravity Forms' Orbital theme
   (.gform_wrapper.gravity-theme, 0-3-0) out-specifies single-job.css's
   (0-2-0) field rules, so the modal fell back to GF's default 16px/700
   labels + cramped inputs. Re-apply the polished apply-form-band field
   treatment here at matching specificity (these load after GF's CSS). */
.single-job-apply-modal__form .gform_wrapper.gravity-theme .gfield_label,
.single-job-apply-modal__form .gform_wrapper.gravity-theme legend {
	font-family: var(--ddi-font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	margin-bottom: 8px;
	display: block;
}
.single-job-apply-modal__form .gform_wrapper.gravity-theme input[type="text"],
.single-job-apply-modal__form .gform_wrapper.gravity-theme input[type="email"],
.single-job-apply-modal__form .gform_wrapper.gravity-theme input[type="tel"],
.single-job-apply-modal__form .gform_wrapper.gravity-theme input[type="number"],
.single-job-apply-modal__form .gform_wrapper.gravity-theme input[type="url"],
.single-job-apply-modal__form .gform_wrapper.gravity-theme select,
.single-job-apply-modal__form .gform_wrapper.gravity-theme textarea {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--ddi-midnight);
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 0;
	padding: 16px 18px;
	width: 100%;
	box-sizing: border-box;
}
.single-job-apply-modal__form .gform_wrapper.gravity-theme textarea { min-height: 140px; line-height: 1.55; }
.single-job-apply-modal__form .gform_wrapper.gravity-theme input::placeholder,
.single-job-apply-modal__form .gform_wrapper.gravity-theme textarea::placeholder { color: #9aa1ad; opacity: 1; }
.apply-form-band__form .gform_wrapper .gfield_required {
	color: var(--ddi-gold);
	margin-left: 2px;
}
.apply-form-band__form .gform_wrapper .gfield_description {
	font-family: var(--ddi-font-body);
	font-size: 13px;
	color: var(--ddi-deep-navy);
	margin-top: 6px;
	line-height: 1.5;
}

/* Custom dropdown overlay (.ddi-select) — sits on top of native
 * <select> in the apply form. Native select keeps the form data
 * but is visually hidden; this branded UI mirrors the value.
 * Matches the job-search combobox look so the form feels part of
 * the same component family. */
.apply-form-band__form .ddi-select {
	position: relative;
	display: block;
	width: 100%;
}
.apply-form-band__form .ddi-select__native {
	/* Hide the native select but keep it in the form for submission.
	 * Position absolute + opacity 0 + small size so screen readers
	 * still find it but the browser-painted chrome is invisible. */
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}
.apply-form-band__form .ddi-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 56px;
	padding: 0 18px;
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 0;
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	color: var(--ddi-midnight);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.apply-form-band__form .ddi-select__button:hover {
	border-color: rgba(15, 23, 42, 0.4);
}
.apply-form-band__form .ddi-select.is-open .ddi-select__button,
.apply-form-band__form .ddi-select__button:focus-visible {
	outline: none;
	border-color: var(--ddi-gold);
	box-shadow: 0 0 0 3px rgba(196, 159, 92, 0.18);
}
.apply-form-band__form .ddi-select__label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apply-form-band__form .ddi-select__label--placeholder {
	color: #9aa1ad;
}
.apply-form-band__form .ddi-select__chevron {
	display: inline-flex;
	color: var(--ddi-deep-navy);
	transition: transform 0.25s ease;
}
.apply-form-band__form .ddi-select.is-open .ddi-select__chevron {
	transform: rotate(180deg);
}
.apply-form-band__form .ddi-select__panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	display: none;
	flex-direction: column;
	max-height: 320px;
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.2);
	box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.18);
}
.apply-form-band__form .ddi-select.is-open .ddi-select__panel {
	display: flex;
}
.apply-form-band__form .ddi-select__search {
	/* Flush to panel edges, padding matches .ddi-select__option so
	 * the search text and option text share the same left edge.
	 * Hairline border-bottom separates it from the option list. */
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 0;
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	color: var(--ddi-midnight);
	background: var(--ddi-white);
	flex-shrink: 0;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}
.apply-form-band__form .ddi-select__search:focus {
	border-bottom-color: var(--ddi-gold);
}
.apply-form-band__form .ddi-select__search::placeholder {
	color: #9aa1ad;
}
.apply-form-band__form .ddi-select__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
}
.apply-form-band__form .ddi-select__option {
	padding: 11px 18px;
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	color: var(--ddi-midnight);
	cursor: pointer;
	border-bottom: 1px solid rgba(15, 23, 42, 0.05);
	transition: background 0.15s ease, color 0.15s ease;
}
.apply-form-band__form .ddi-select__option:last-child { border-bottom: 0; }
.apply-form-band__form .ddi-select__option:hover {
	background: rgba(196, 159, 92, 0.08);
}
.apply-form-band__form .ddi-select__option.is-selected {
	background: rgba(15, 23, 42, 0.04);
	font-weight: 500;
}
.apply-form-band__form .ddi-select__option.is-disabled {
	color: #9aa1ad;
	cursor: not-allowed;
}
.apply-form-band__form .ddi-select__empty {
	padding: 14px 18px;
	font-family: var(--ddi-font-body);
	font-size: 14px;
	color: #6b7488;
	font-style: italic;
}

/* GF Places Autocomplete (Present Location field) — the plugin ships
 * its own .container / .input-container / #gf-city-input styles
 * (white bg, 8px border-radius, blue focus ring) that clash with the
 * rest of the form. Strip the plugin chrome back so the field
 * inherits our standard input + label treatment.
 *
 * Suggestions dropdown also restyled to match brand (squared, no
 * blue tones, gold highlight on hover). */
.apply-form-band__form .gf-places-autocomplete {
	margin: 0;
}
.apply-form-band__form .gf-places-autocomplete .container {
	background: transparent;
	padding: 0;
}
.apply-form-band__form .gf-places-autocomplete .input-container {
	margin-bottom: 0;
}
.apply-form-band__form .gf-places-autocomplete .gfield_label {
	font-family: var(--ddi-font-ui);
	font-size: 11.5px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	margin-bottom: 8px;
	display: block;
	padding: 0;
}
.apply-form-band__form .gf-places-autocomplete #gf-city-input {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--ddi-midnight);
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 0;
	padding: 16px 18px;
	height: 56px;
	box-sizing: border-box;
	width: 100%;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.apply-form-band__form .gf-places-autocomplete #gf-city-input:focus {
	outline: none;
	border-color: var(--ddi-gold);
	box-shadow: 0 0 0 3px rgba(196, 159, 92, 0.18);
}
.apply-form-band__form .gf-places-autocomplete #gf-city-input::placeholder {
	color: #9aa1ad;
}
.apply-form-band__form .gf-places-autocomplete #gf-suggestions-dropdown {
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-top: 0;
	border-radius: 0;
	max-height: 280px;
	box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.12);
}
.apply-form-band__form .gf-places-autocomplete .gf-suggestion-item {
	padding: 12px 18px;
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	color: var(--ddi-midnight);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.apply-form-band__form .gf-places-autocomplete .gf-suggestion-item:hover {
	background-color: rgba(196, 159, 92, 0.08);
	color: var(--ddi-midnight);
}

/* Inputs – squared, brand-aligned. Bumped padding from 13/14 → 16/18
 * so fields feel substantial rather than squashed against their
 * labels. Size at 15.5px sits comfortably between body (15) and the
 * label (11.5) — large enough to read while the user types. */
.apply-form-band__form .gform_wrapper input[type="text"],
.apply-form-band__form .gform_wrapper input[type="email"],
.apply-form-band__form .gform_wrapper input[type="tel"],
.apply-form-band__form .gform_wrapper input[type="number"],
.apply-form-band__form .gform_wrapper input[type="url"],
.apply-form-band__form .gform_wrapper input[type="date"],
.apply-form-band__form .gform_wrapper input[type="password"],
.apply-form-band__form .gform_wrapper select,
.apply-form-band__form .gform_wrapper textarea {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--ddi-midnight);
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.2);
	border-radius: 0;
	padding: 16px 18px;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.apply-form-band__form .gform_wrapper input::placeholder,
.apply-form-band__form .gform_wrapper textarea::placeholder {
	color: #9aa1ad;
	opacity: 1;
}
.apply-form-band__form .gform_wrapper textarea { min-height: 140px; line-height: 1.55; padding-top: 14px; padding-bottom: 14px; }
.apply-form-band__form .gform_wrapper select {
	/* Native select arrow is small + brown by default — replace with
	 * a custom chevron SVG so it picks up the brand midnight. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' fill='none' stroke='%231F3453' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 14px;
	padding-right: 42px;
	cursor: pointer;
	/* Native <select> compresses itself to ~46px ignoring our 16px
	 * vertical padding, which clips the text vertically (descenders
	 * get cut off). Force the same height as the text inputs (56px)
	 * and zero out the vertical padding — line-height does the
	 * centring inside the now-explicit box. */
	height: 56px;
	padding-top: 0;
	padding-bottom: 0;
}
.apply-form-band__form .gform_wrapper input:hover,
.apply-form-band__form .gform_wrapper select:hover,
.apply-form-band__form .gform_wrapper textarea:hover {
	border-color: rgba(15, 23, 42, 0.4);
}
/* Native <select multiple> — Gravity Forms' Multi Select field
 * type. The single-select rule above forces appearance:none + a
 * chevron + height:56px, all of which break a multi-select (which
 * needs to show several rows + a native scroll affordance). Reset
 * everything that doesn't apply, set a min-height so it shows ~5
 * options, and style the options consistently. ddi-select JS
 * enhancement deliberately skips multi-selects (see enhanceSelect
 * in functions.php — bails on `native.multiple`), so this is the
 * actual visible styling for these fields. */
.apply-form-band__form .gform_wrapper select[multiple] {
	appearance: auto;
	-webkit-appearance: auto;
	background-image: none;
	height: auto;
	min-height: 180px;
	padding: 10px 12px;
	line-height: 1.5;
	cursor: pointer;
}
.apply-form-band__form .gform_wrapper select[multiple] option {
	padding: 10px 14px;
	line-height: 1.4;
	background: var(--ddi-white);
	color: var(--ddi-midnight);
	font-family: var(--ddi-font-body);
	font-size: 15px;
	border-radius: 0;
}
.apply-form-band__form .gform_wrapper select[multiple] option:checked {
	background-color: var(--ddi-deep-navy) linear-gradient(0deg, var(--ddi-deep-navy), var(--ddi-deep-navy));
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
}

/* Pre-2.5 Gravity Forms fluid layout classes (gf_left_half,
 * gf_right_half, gf_left_third, gf_middle_third, gf_right_third) —
 * still emitted by older forms like GF #6 on /register/. They use
 * float-based layout from GF's older system, which doesn't play
 * with the GF 2.5+ 12-column CSS grid (`grid-template-columns:
 * repeat(12, 1fr)`) that .gform_fields uses sitewide. Inside the
 * grid the floats just create weird overlapping + wrong sizes.
 *
 * Fix: strip the float + map each legacy class to the equivalent
 * grid-column span so half-width fields share a row, third-width
 * fields split into thirds, and the form lays out the same way as
 * the modern GF #24 on /apply/start/. */
.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_left_half,
.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_right_half {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	grid-column: span 6;
}
.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_left_third,
.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_middle_third,
.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_right_third {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	grid-column: span 4;
}
/* Mobile — collapse multi-column rows to single column so legacy
 * forms don't break at narrow widths. */
@media (max-width: 720px) {
	.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_left_half,
	.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_right_half,
	.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_left_third,
	.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_middle_third,
	.apply-form-band__form .gform_wrapper .gform_fields .gfield.gf_right_third {
		grid-column: span 12;
	}
}


.apply-form-band__form .gform_wrapper input:focus,
.apply-form-band__form .gform_wrapper select:focus,
.apply-form-band__form .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--ddi-gold);
	box-shadow: 0 0 0 3px rgba(196, 159, 92, 0.18);
}

/* Checkbox / radio controls. Three GF field types hit these:
 *   - Checkbox field → .gchoice li (multiple options under one label)
 *   - Radio field    → .gchoice li (same wrapper, different inputs)
 *   - Consent field  → .ginput_container_consent (single agreement
 *     box, used 4× on step 1 — one per agreement statement)
 *
 * Native browser controls were 13px and ignored the gold accent
 * colour anyway. Custom 22px navy-on-tick squares for checkboxes,
 * 22px navy dot-in-ring for radios. White checkmark is built from
 * two rotated borders (no SVG dependency). Hover/focus states added
 * for keyboard accessibility. */
.apply-form-band__form .gform_wrapper .gchoice {
	margin-bottom: 12px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.apply-form-band__form .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.apply-form-band__form .gform_wrapper .gchoice input[type="checkbox"],
.apply-form-band__form .gform_wrapper .gchoice input[type="radio"],
.apply-form-band__form .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	min-width: 22px;
	flex-shrink: 0;
	margin: 2px 0 0;
	border: 1.5px solid rgba(15, 23, 42, 0.3);
	background: var(--ddi-white);
	border-radius: 0;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.apply-form-band__form .gform_wrapper .gchoice input[type="radio"] {
	border-radius: 50%;
}
.apply-form-band__form .gform_wrapper .gchoice input[type="checkbox"]:hover,
.apply-form-band__form .gform_wrapper .gchoice input[type="radio"]:hover,
.apply-form-band__form .gform_wrapper .ginput_container_consent input[type="checkbox"]:hover {
	border-color: var(--ddi-navy);
}
.apply-form-band__form .gform_wrapper .gchoice input[type="checkbox"]:checked,
.apply-form-band__form .gform_wrapper .gchoice input[type="radio"]:checked,
.apply-form-band__form .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
	background: var(--ddi-navy);
	border-color: var(--ddi-navy);
}
.apply-form-band__form .gform_wrapper .gchoice input[type="checkbox"]:checked::after,
.apply-form-band__form .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 47%;
	left: 50%;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--ddi-white);
	border-bottom: 2px solid var(--ddi-white);
	transform: translate(-50%, -55%) rotate(45deg);
}
.apply-form-band__form .gform_wrapper .gchoice input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ddi-white);
	transform: translate(-50%, -50%);
}
.apply-form-band__form .gform_wrapper .gchoice input:focus-visible,
.apply-form-band__form .gform_wrapper .ginput_container_consent input:focus-visible {
	outline: 2px solid var(--ddi-gold);
	outline-offset: 2px;
}
.apply-form-band__form .gform_wrapper .gchoice label,
.apply-form-band__form .gform_wrapper .ginput_container_consent label {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	color: var(--ddi-midnight);
	line-height: 1.5;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* ============================================================
 * STEP 1 — Agreement cards (apply/start landing page)
 * ------------------------------------------------------------
 * Default GF consent renders as four tight checkbox rows.
 * On step 1 (no rail), each consent field is wrapped as a
 * clickable button-card so the page reads as a primary,
 * deliberate first step — not a stack of small ticks.
 *
 * Scoped to .apply-form-band:not(.has-rail) so the consent
 * field type keeps its compact treatment elsewhere if reused.
 * ======================================================== */

/* Cards stack with their own row-gap — a touch more breathing
 * room than the default field gap so each agreement reads as a
 * distinct, deliberate choice. */
.apply-form-band:not(.has-rail) .gform_wrapper .gform_fields {
	row-gap: 16px;
}

/* Step 1 intro eyebrow — the "Apply to Join" label above
 * "Before you apply". Needs more specificity than .eyebrow
 * alone because .apply-form-band__form .gfield_html p sets
 * a generic 15px body-weight style on every paragraph inside
 * the GF HTML field. Match the page-hero light variant
 * treatment: 13px, brand UI face, gold-darker, tracked. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield_html p.apply-step-eyebrow {
	font-family: var(--ddi-font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ddi-gold-mid);
	line-height: 1.4;
	text-align: center;
	/* Offset the trailing letter-spacing so the text reads optically
	 * centred rather than sitting slightly left. */
	text-indent: 0.24em;
	/* The eyebrow inherits a 760px max-width; auto side margins centre that
	 * box within the form column so it lines up with the heading/rule below
	 * (margin:0 left it flush-left, pushing the text ~60px off centre). */
	margin: 0 auto 18px;
}
/* Sit the gold-rule between the eyebrow and the heading at the
 * same vertical rhythm as the page-hero block. */
.apply-form-band:not(.has-rail) .gfield_html .gold-rule {
	margin: 0 auto 28px;
}

/* "Please check and confirm..." sub-header above the cards
 * (HTML field with cssClass apply-block-header). */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield.apply-block-header {
	margin: 22px auto 6px;
	max-width: 760px;
	width: 100%;
}
.apply-form-band:not(.has-rail) .gform_wrapper .apply-block-header p {
	margin: 0;
	font-family: var(--ddi-font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-deep-navy);
	text-align: left;
}
.apply-form-band:not(.has-rail) .gform_wrapper .apply-block-header p strong {
	font-weight: inherit; /* prevent <strong> from double-bolding */
}

/* Each consent field → clickable button-card. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent {
	position: relative;
	max-width: 760px;
	width: 100%;
	margin: 0 auto;
	background: var(--ddi-white);
	border: 1px solid rgba(15, 23, 42, 0.12);
	padding: 18px 22px;
	text-align: left;
	transition:
		border-color 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

/* Whole-card click target — overlay the label::before across
 * the entire card surface so empty padding still toggles
 * the inner checkbox via the for= relationship. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .ginput_container_consent > label::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .ginput_container_consent input[type="checkbox"],
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .ginput_container_consent > label {
	position: relative;
	z-index: 2;
}

/* Hover lift — gentle, only on unticked cards. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent:hover {
	border-color: rgba(15, 23, 42, 0.32);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
	transform: translateY(-1px);
}

/* Active state — :has() lets the wrapper react to the inner
 * checkbox. Solid navy outline (no gradient wash) signals the
 * agreement is locked in. Clean and editorial. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent:has(input:checked) {
	border-color: var(--ddi-deep-navy);
	background: var(--ddi-white);
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
	transform: translateY(0);
}

/* Inner row — centre-align checkbox against the multi-line
 * label, slightly more gap than the default 14px. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Larger checkbox — reads as a primary control on cards. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent input[type="checkbox"] {
	width: 26px;
	height: 26px;
	min-width: 26px;
	margin-top: 0;
	border-width: 1.5px;
}
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent input[type="checkbox"]:checked::after {
	width: 7px;
	height: 13px;
	border-right-width: 2.5px;
	border-bottom-width: 2.5px;
}

/* Label text inside the card. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .ginput_container_consent label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ddi-midnight);
	flex: 1;
}

/* All four agreements are required by design — the gold
 * asterisk next to multi-line text reads like a typo. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .gfield_required {
	display: none;
}

/* Per-card validation message — line up under the label,
 * past the checkbox column. */
.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .gfield_validation_message {
	max-width: 760px;
	margin: 10px auto 0;
	padding-left: 42px;
}

@media (max-width: 600px) {
	.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent {
		padding: 16px 18px;
	}
	.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent input[type="checkbox"] {
		width: 24px;
		height: 24px;
		min-width: 24px;
	}
	.apply-form-band:not(.has-rail) .gform_wrapper .gfield--type-consent .ginput_container_consent label {
		font-size: 14.5px;
	}
}

/* ============================================================
 * SECTION HEADER CARDS — steps 2 + 3
 * ------------------------------------------------------------
 * Each [section] field (Personal Information, Resume,
 * Employment Details, Social Media, References) gets a small
 * white card treatment with a gold accent edge. Reads as an
 * editorial divider between field groups rather than an
 * inline h3.
 * ======================================================== */
.apply-form-band__form .gform_wrapper .gfield--type-section {
	background: var(--ddi-white);
	/* Hairline border + a fine gold left accent — kept subtle so the
	 * card reads as a quiet editorial divider, not a heavy box.
	 * !important for the same reason as padding/margin: screen.css forces
	 * `.gform_wrapper .gsection { border:0!important }`. */
	border: 1px solid rgba(15, 23, 42, 0.06) !important;
	border-left: 2px solid var(--ddi-gold) !important;
	/* Generous, equal padding so the title + sub sit in clear space
	 * rather than hard against the edges.
	 * !important required: the parent theme's screen.css forces
	 * `.gform_wrapper .gsection { padding:0!important; margin:0!important }`
	 * and the section field carries the .gsection class too. Our 3-class
	 * selector + !important beats that 2-class !important rule. */
	padding: clamp(28px, 3vw, 38px) !important;
	/* Clear separation between field groups — more air above each card
	 * than below (the fields belong to the card beneath it). */
	margin: clamp(24px, 3.2vw, 36px) 0 6px !important;
}
@media (max-width: 768px) {
	/* Tighter section card on mobile — the desktop clamp floor (28px)
	 * is too generous on a narrow screen. */
	.apply-form-band__form .gform_wrapper .gfield--type-section {
		padding: 20px !important;
		margin: 20px 0 6px !important;
	}

	/* More top room so the first content ("Step 1 / About you") sits
	 * clearly BELOW the fixed header/nav rather than tucking under it. */
	.apply-form-band {
		padding-top: 96px;
		/* Belt-and-braces against any child (GF grid / inputs) pushing
		 * past the viewport edge and creating a horizontal scroll. */
		overflow-x: clip;
	}

	/* Reduce the gap between the stacked sidebar block and the form. */
	.apply-form-band__layout { gap: 8px; }
	.apply-form-band__rail-sticky { padding-bottom: 8px; }

	/* Bring the sidebar title down a touch on mobile. */
	.apply-form-band__rail-title {
		font-size: 28px;
	}
}

/* Stop any overflow at the band level on all viewports as a safety net
 * — a stray full-width child shouldn't make the whole page scroll
 * sideways. clip (not hidden) so sticky positioning still works. */
.apply-form-band { overflow-x: clip; }
.apply-form-band__form .gform_wrapper .gsection_title {
	font-family: var(--ddi-font-display);
	font-style: normal;
	/* Brand Fraunces only ships at 300 reliably (see global.css
	 * font import). 400/500 are loaded but the brand display
	 * weight everywhere else (.page-hero, .start-heading, etc.)
	 * is 300, so the section card should match. */
	font-weight: 300;
	font-size: 24px;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--ddi-deep-navy);
	margin: 0 0 10px;
}
.apply-form-band__form .gform_wrapper .gsection_description {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	/* Match the form's body text size — 15px reads as proper body
	 * copy, not a sub-caption. Was 13.5px which felt undersized
	 * sitting next to 15.5px input text below. */
	font-size: 15px;
	line-height: 1.55;
	color: var(--ddi-mid-grey);
	margin: 0;
}

/* More breathing room between the last consent card and the
 * Start Registration footer on Step 1 — gives the cards space
 * to land before the candidate hits the CTA. */
.apply-form-band:not(.has-rail) .gform_wrapper .gform_page_footer {
	margin-top: clamp(28px, 4vw, 48px) !important;
	padding-top: 16px !important;
}

/* Buttons – Next / Previous / Submit. Match brand .btn aesthetic.
 * The hairline divider above the footer separates the form fields
 * from the navigation on steps 2 + 3. Step 1 (no rail) is just four
 * agreement checkboxes — the divider above the Start Registration
 * button felt like an unnecessary fence, so we suppress it via the
 * has-rail toggle (which doubles as a "we're past step 1" signal). */
.apply-form-band__form .gform_wrapper .gform_page_footer,
.apply-form-band__form .gform_wrapper .gform_footer {
	display: flex;
	gap: 12px;
	align-items: center;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	padding-top: 24px;
	margin-top: 0;
}
.apply-form-band__layout:not(.has-rail) .gform_page_footer,
.apply-form-band__layout:not(.has-rail) .gform_footer {
	border-top: none;
	padding-top: 8px;
}
.apply-form-band__form .gform_wrapper .gform_previous_button,
.apply-form-band__form .gform_wrapper .gform_next_button,
.apply-form-band__form .gform_wrapper .gform_button {
	font-family: var(--ddi-font-ui);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 15px 32px;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.apply-form-band__form .gform_wrapper .gform_next_button,
.apply-form-band__form .gform_wrapper .gform_button {
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
	border: 1px solid var(--ddi-deep-navy);
}
.apply-form-band__form .gform_wrapper .gform_next_button:hover,
.apply-form-band__form .gform_wrapper .gform_button:hover {
	background: var(--ddi-gold);
	color: var(--ddi-deep-navy);
	border-color: var(--ddi-gold);
}
.apply-form-band__form .gform_wrapper .gform_previous_button {
	background: transparent;
	color: var(--ddi-midnight);
	border: 1px solid rgba(15, 23, 42, 0.25);
	margin-right: auto; /* push Next/Submit to the right */
}
.apply-form-band__form .gform_wrapper .gform_previous_button:hover {
	border-color: var(--ddi-midnight);
}

/* File-upload "select files" button inside the GF drop-zone. The
 * markup comes from Gravity Perks (.gpfup__select-files /
 * .gform_button_select_files) – default browser styling reads as a
 * tiny grey OS button beside "Drop files here or" and undermines
 * the brand polish of the surrounding form. Restyle to a small
 * ghost button that matches Previous's treatment. */
.apply-form-band__form .gform_wrapper .gform_button_select_files,
.apply-form-band__form .gform_wrapper .gpfup__select-files {
	display: inline-flex;
	align-items: center;
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	background: transparent;
	border: 1px solid rgba(15, 23, 42, 0.25);
	border-radius: 0;
	padding: 9px 18px;
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.apply-form-band__form .gform_wrapper .gform_button_select_files:hover,
.apply-form-band__form .gform_wrapper .gpfup__select-files:hover {
	border-color: var(--ddi-deep-navy);
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
}
/* Drop-zone container itself — softer, brand-aligned. */
.apply-form-band__form .gform_wrapper .gform_drop_area,
.apply-form-band__form .gform_wrapper .gpfup__drop-area {
	background: rgba(15, 23, 42, 0.02);
	border: 1px dashed rgba(15, 23, 42, 0.2);
	border-radius: 0;
	padding: clamp(24px, 4vw, 36px);
	color: var(--ddi-deep-navy);
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
}

/* Validation – subtle but clear. */
.apply-form-band__form .gform_wrapper .validation_message,
.apply-form-band__form .gform_wrapper .gfield_validation_message {
	font-family: var(--ddi-font-body);
	font-size: 13px;
	color: #b94642;
	margin-top: 6px;
}
.apply-form-band__form .gform_wrapper .gfield_error input,
.apply-form-band__form .gform_wrapper .gfield_error select,
.apply-form-band__form .gform_wrapper .gfield_error textarea {
	border-color: #b94642;
}
.apply-form-band__form .gform_wrapper .validation_error {
	font-family: var(--ddi-font-body);
	font-size: 14px;
	color: #b94642;
	background: rgba(185, 70, 66, 0.06);
	border: 1px solid rgba(185, 70, 66, 0.2);
	padding: 14px 18px;
	margin-bottom: 18px;
}


/* Small intro paragraph sitting at the top of the form card on
 * /register/ — explains the form is the fastest way to enquire,
 * with a hairline divider between it and the form below. Uses the
 * same gutter as .gform_body so it aligns with the form fields. */
.apply-form-band__form .apply-form-band__intro {
	padding: 22px clamp(28px, 4vw, 56px) 0;
}
.apply-form-band__form .apply-form-band__intro p {
	font-family: var(--ddi-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ddi-body-text);
	margin: 0;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(209, 180, 133, 0.22);
}


/* /register/ direct-contact section ("Prefer to speak with our
 * team?"). Dark navy band sitting below the form for visitors who
 * want to call/email instead. Anchored at #contact so the hero's
 * "Speak Directly" CTA scrolls here rather than bouncing to
 * another page. Two-column grid: phones (London x2, Dubai, Moscow)
 * on the left, email + office address on the right. Collapses to
 * single column on narrow viewports. */
/* Contact page hero heading – a touch lighter than the default 300. */
.page-id-10631 .page-hero__heading { font-weight: 200; }

/* Contact enquiry form – no rail. A single centred column with a lead-in
   intro above the form (references the form below). Overrides the apply
   step-1 centred-text treatment so the contact fields read left-aligned. */
.apply-form-band--contact .apply-form-band__layout { justify-content: center; }
.apply-form-band--contact .apply-form-band__form {
	flex: 1 1 760px;
	max-width: 760px;
}
.apply-form-band--contact .gform_body { text-align: left; }
/* Mobile: tighten the contact band's vertical padding and let it hug its
   content instead of being forced to 100vh – removes the loose gap above
   "Send a Message" (and the dead space below the short form). */
@media (max-width: 768px) {
	.apply-form-band--contact {
		min-height: 0;
		padding-top: 32px;
		padding-bottom: 44px;
	}
}
.apply-form-band__intro {
	max-width: 760px;
	margin: 0 auto clamp(30px, 4vw, 48px);
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ddi-deep-navy);
	text-align: center;
}
.apply-form-band__intro p { margin: 0; }

.contact-direct {
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
	padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 60px);
}
.contact-direct__inner {
	max-width: 1080px;
	margin: 0 auto;
}
.contact-direct__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(36px, 4vw, 56px);
}
.contact-direct__eyebrow {
	color: var(--ddi-gold);
	margin: 0 0 12px;
}
.contact-direct__heading {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.2;
	color: var(--ddi-white);
	margin: 0 0 14px;
}
.contact-direct__sub {
	font-family: var(--ddi-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}
.contact-direct__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 720px) {
	.contact-direct__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}
/* Column eyebrows – follow the sitewide .eyebrow style but a step
 * smaller (10px vs 13px) since they're sub-titles within a section,
 * not section headings themselves. Dropped the heavy border-bottom
 * treatment – the eyebrow alone is enough hierarchy. */
.contact-direct__col-title {
	font-family: var(--ddi-font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ddi-gold);
	margin: 0 0 14px;
	padding-bottom: 0;
	border-bottom: 0;
}
.contact-direct__col-title--secondary {
	margin-top: 28px;
}
.contact-direct__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contact-direct__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-direct__row:last-child {
	border-bottom: 0;
}
/* Dubai – middle single-line row. A hair more breathing room beneath the
   number so it reads evenly between the divider rules on mobile. */
.contact-direct__row:not([data-london-toggle]):not(:last-child) {
	padding-bottom: 15px;
}
.contact-direct__city {
	font-family: var(--ddi-font-body);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
}
/* Phone numbers + email – sans-serif (DM Sans) rather than the
 * display serif. Long figure strings (international dial codes
 * with spaces) read more cleanly in sans and feel less ceremonious,
 * which matches "fallback to the form" hierarchy. */
.contact-direct__value {
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: clamp(16px, 1.6vw, 19px);
	letter-spacing: 0.005em;
	color: var(--ddi-white);
	text-decoration: none;
	transition: color 0.2s ease;
}
.contact-direct__value:hover {
	color: var(--ddi-gold);
}
.contact-direct__email {
	margin: 0;
}
.contact-direct__email a {
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: clamp(16px, 1.7vw, 20px);
	color: var(--ddi-white);
	text-decoration: none;
	transition: color 0.2s ease;
}
.contact-direct__email a:hover {
	color: var(--ddi-gold);
}
.contact-direct__address {
	font-family: var(--ddi-font-body);
	font-size: 16px;
	font-style: normal;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}
.contact-direct__note {
	font-family: var(--ddi-font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
	margin: 10px 0 0;
	font-style: italic;
}

/* ==========================================================================
   CONTACT MODAL  (/register/ "Speak Directly")
   In-page contact section was lifted into a modal so the form stays
   the unambiguous primary focus on the page. Same content (4 phones,
   email, address, London landline↔mobile toggle), now triggered by
   any link/button targeting #contact-modal — the hero "Speak Directly"
   CTA and the rail's "Speak to us" textlink both wire into it.
   ========================================================================== */
.contact-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 32px);
	background: rgba(15, 23, 42, 0.6);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.contact-modal.is-open {
	display: flex;
	opacity: 1;
}

body.is-modal-open {
	overflow: hidden;
}

.contact-modal__panel {
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
	width: 100%;
	max-width: 720px;
	max-height: 92vh;
	overflow-y: auto;
	border-radius: 10px;
	padding: clamp(32px, 4.5vw, 52px);
	position: relative;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
	transform: translateY(14px);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s,
	            opacity 0.3s ease 0.05s;
}
.contact-modal.is-open .contact-modal__panel {
	transform: translateY(0);
	opacity: 1;
}

.contact-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 0;
	color: var(--ddi-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease;
}
.contact-modal__close:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--ddi-gold);
}
.contact-modal__close svg {
	width: 18px;
	height: 18px;
}

.contact-modal__head {
	text-align: left;
	margin-bottom: clamp(24px, 3vw, 36px);
	padding-right: 40px; /* clear of close button */
}
.contact-modal__eyebrow {
	color: var(--ddi-gold);
	margin: 0 0 10px;
}
.contact-modal__heading {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(24px, 2.8vw, 32px);
	line-height: 1.2;
	color: var(--ddi-white);
	margin: 0 0 10px;
}
.contact-modal__sub {
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

.contact-modal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(36px, 4.5vw, 64px);
	align-items: start;
}
@media (max-width: 600px) {
	.contact-modal__grid { grid-template-columns: 1fr; gap: 28px; }
}

.contact-modal__col-title {
	font-family: var(--ddi-font-ui);
	/* Eyebrow style (.eyebrow) — a touch smaller and one weight bolder. */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ddi-gold);
	margin: 0 0 12px;
}
/* The col-title <h3>s otherwise inherit the content display-font recipe
   (Fraunces + weight 300); these are eyebrows, so force the UI sans + their
   intended weights on both the popup and the contact-page versions. */
.contact-modal .contact-modal__col-title,
.contact-direct .contact-direct__col-title {
	font-family: var(--ddi-font-ui) !important;
}
.contact-modal .contact-modal__col-title { font-weight: 700 !important; }
.contact-direct .contact-direct__col-title { font-weight: 600 !important; }
.contact-modal__col-title--secondary {
	margin-top: 20px;
}
/* "More ways to connect" actions — solid deep-navy buttons (#131F37), white
   icon + text, no border, inverting to gold on hover. The explicit
   -webkit-text-fill-color overrides the dark section's inherited white fill so
   the hover label turns navy on the gold background. */
.contact-modal__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 2px;
	max-width: 280px;
}
.contact-modal__action {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 13px 22px;
	/* Ghost on the dark modal surface: transparent fill, faint white outline up
	   front, flipping to a gold outline + gold label/icon on hover. */
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--ddi-white);
	-webkit-text-fill-color: var(--ddi-white);
	text-decoration: none;
	/* .btn proportions, a touch smaller (12px) for the popup. */
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.contact-modal__action svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Hover: just a gold outline (transparent fill, gold border + label). */
.contact-modal__action:hover {
	background: transparent;
	border-color: var(--ddi-gold);
	color: var(--ddi-gold);
	-webkit-text-fill-color: var(--ddi-gold);
}
/* The icon SVG (fill/stroke = currentColor) is pinned white and doesn't inherit
   the button colour, so set it explicitly so it goes gold on hover too. */
.contact-modal__action:hover svg { color: var(--ddi-gold); }
/* "WhatsApp" linked inside the summary line — just a 1px gold underline by
   default (text stays inherited), turning the label gold on hover. */
.contact-modal__sub a,
.contact-direct__sub a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--ddi-gold);
	transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease, border-color 0.25s ease;
}
.contact-modal__sub a:hover,
.contact-direct__sub a:hover {
	color: var(--ddi-gold);
	-webkit-text-fill-color: var(--ddi-gold);
	border-bottom-color: var(--ddi-gold);
}
/* Contact page: subtle WhatsApp link that appears under the revealed mobile
   number. No `display` set, so the [hidden] attribute (toggled by the page's
   inline script) keeps it hidden until "Show mobile" is tapped. */
/* London WhatsApp icon button (revealed with the mobile number) — same dark
   tone as the popup actions; the number + toggle sit in a stack that nudges
   left to make room for the button on its right. */
.contact-direct__row[data-london-toggle] { align-items: center; }
.contact-direct__phone-group {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
.contact-direct__phone-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.contact-direct__wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	position: relative;
	/* Ghost to match the modal buttons: transparent fill + faint white outline,
	   gold outline + gold icon on hover. */
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 2px;
	color: var(--ddi-white);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.contact-direct__wa-btn svg { width: 19px; height: 19px; fill: currentColor; }
.contact-direct__wa-btn:hover { background: transparent; border-color: var(--ddi-gold); color: var(--ddi-gold); }
.contact-direct__wa-btn:hover svg { color: var(--ddi-gold); }
/* Hover/focus tooltip — "Message on WhatsApp". Right-aligned to the icon so it
   never runs off the right edge on mobile; purely decorative (the button keeps
   its aria-label) and only present once the icon is revealed via Show mobile. */
.contact-direct__wa-btn::after {
	content: "Message on WhatsApp";
	position: absolute;
	bottom: calc(100% + 9px);
	right: 0;
	z-index: 5;
	padding: 6px 10px;
	background: #131F37;
	color: var(--ddi-white);
	-webkit-text-fill-color: var(--ddi-white);
	font-family: var(--ddi-font-ui);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 2px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-direct__wa-btn::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 4px);
	right: 15px;
	z-index: 5;
	border: 5px solid transparent;
	border-top-color: #131F37;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-direct__wa-btn:hover::after,
.contact-direct__wa-btn:focus-visible::after,
.contact-direct__wa-btn:hover::before,
.contact-direct__wa-btn:focus-visible::before {
	opacity: 1;
	transform: translateY(0);
}
.contact-direct__wa {
	margin-top: 4px;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--ddi-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 1px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.contact-direct__wa:hover { color: var(--ddi-gold-darker); border-bottom-color: var(--ddi-gold-darker); }

.contact-modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.contact-modal__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-modal__row:last-child { border-bottom: 0; }
/* Dubai – middle single-line row; match the contact page's even spacing. */
.contact-modal__row:not([data-london-toggle]):not(:last-child) { padding-bottom: 11px; }
.contact-modal__row[data-london-toggle] {
	flex-wrap: wrap;
	align-items: center;
}
.contact-modal__city {
	font-family: var(--ddi-font-body);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
}
.contact-modal__value {
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: clamp(17px, 1.7vw, 19px);
	color: var(--ddi-white);
	text-decoration: none;
	transition: color 0.2s ease;
}
.contact-modal__value:hover { color: var(--ddi-gold); }

.contact-modal__phone-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin-left: auto;
}
.contact-modal__toggle-btn {
	font-family: var(--ddi-font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(209, 180, 133, 0.7);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s ease;
}
.contact-modal__toggle-btn:hover { color: var(--ddi-gold); }

.contact-modal__email { margin: 0; }
.contact-modal__email a {
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: clamp(15px, 1.5vw, 17px);
	color: var(--ddi-white);
	text-decoration: none;
	transition: color 0.2s ease;
}
.contact-modal__email a:hover { color: var(--ddi-gold); }

.contact-modal__address {
	font-family: var(--ddi-font-body);
	font-size: 14px;
	font-style: normal;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}
.contact-modal__note {
	font-family: var(--ddi-font-body);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	margin: 8px 0 0;
	font-style: italic;
}


/* London landline ↔ mobile toggle. The row shows the landline by
 * default and a small "Show mobile" textlink swaps to the mobile
 * number (and the link text flips to "Show landline"). Driven by a
 * data-attribute on the row + inline JS in the page content (no
 * extra script enqueue for one widget). */
.contact-direct__row[data-london-toggle] {
	flex-wrap: wrap;
	align-items: center;
}
.contact-direct__row[data-london-toggle] .contact-direct__phone-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin-left: auto;
}
.contact-direct__row[data-london-toggle] .contact-direct__toggle-btn {
	font-family: var(--ddi-font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(209, 180, 133, 0.7);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: color 0.2s ease;
}
.contact-direct__row[data-london-toggle] .contact-direct__toggle-btn:hover {
	color: var(--ddi-gold);
}


/* /register/ ('Hire with us') form band override – drop the
 * decorative radial gold-glow + cool-grey gradient + fade overlay
 * that the candidate flow on /apply/start/ uses. The client form is
 * a single short surface (form + contact-direct band below), not a
 * long-form journey, so the chunky chrome reads as overkill. Flat
 * off-white surface, no overlay band tracking the header. */
.apply-form-band#enquiry {
	background: var(--ddi-off-white);
	min-height: 0;
}
.apply-form-band#enquiry::after {
	display: none;
}

/* /register/ ('Hire with us') PCE banner override – the sitewide
 * PCE banner uses a card-within-panel treatment (outer deep-navy +
 * inner #141f37 darker card with side/bottom navy frame around it).
 * On /register/ that reads as too busy alongside the form + contact
 * sections — flatten to ONE uniform navy block, no card, no frame.
 * Scoped to body.page-id-137 so other PCE banner instances around
 * the site keep their original card treatment. */
body.page-id-137 .pce-banner {
	padding: 0;
}
body.page-id-137 .pce-banner__inner {
	background: transparent;
	padding: clamp(48px, 6vw, 72px) clamp(32px, 5vw, 60px);
}


/* ==========================================================================
   SITEWIDE LINK DEFAULTS
   Body-copy links pick up a thin gold underline by default, so the
   editorial body text reads with a consistent affordance. Targeted at
   "plain" anchors – ones inside prose containers (p/li/address/blockquote)
   without a class of their own. Anchors with a class (.btn, card links,
   nav, etc.) all have their own treatments and aren't touched.
   Calibrated for the LIGHT body-text surfaces (off-white / white) which
   cover the vast majority of pages; dark-surface blocks override below.
   ========================================================================== */
.ddi-block p > a:not([class]),
.ddi-block li > a:not([class]),
.ddi-block address a:not([class]),
.ddi-block blockquote a:not([class]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.ddi-block p > a:not([class]):hover,
.ddi-block li > a:not([class]):hover,
.ddi-block address a:not([class]):hover,
.ddi-block blockquote a:not([class]):hover {
	text-decoration-color: var(--ddi-gold-darker);
	color: var(--ddi-gold-darker);
}

/* Dark-surface variants — flip to the brighter --ddi-gold so the
 * underline + hover state remain visible against navy/midnight. */
.contact-direct p > a:not([class]),
.contact-direct li > a:not([class]),
.contact-modal p > a:not([class]),
.contact-modal li > a:not([class]),
.pce-banner p > a:not([class]),
.prose-centred--surface-dark p > a:not([class]),
.prose-centred--surface-dark li > a:not([class]),
.footer p > a:not([class]) {
	text-decoration-color: var(--ddi-gold);
}
.contact-direct p > a:not([class]):hover,
.contact-direct li > a:not([class]):hover,
.contact-modal p > a:not([class]):hover,
.contact-modal li > a:not([class]):hover,
.pce-banner p > a:not([class]):hover,
.prose-centred--surface-dark p > a:not([class]):hover,
.prose-centred--surface-dark li > a:not([class]):hover,
.footer p > a:not([class]):hover {
	color: var(--ddi-gold);
	text-decoration-color: var(--ddi-gold);
}

/* Chrome opt-out — the sitewide gold-underline rule above catches
 * any plain <a> inside <li>, which includes the nav overlay's
 * full-screen menu items + start-overlay path tiles. Those have
 * their own treatments and shouldn't pick up the body-text
 * underline OR the body-text gold-darker hover colour (which is
 * tuned for WCAG on light bg and reads muddy on dark navy chrome
 * surfaces). Selectors prefixed with `.ddi-block` so the
 * specificity matches the rule above; placed after so the cascade
 * tie-break goes to this override. */
.ddi-block .nav-overlay a:not([class]),
.ddi-block .nav-overlay li > a:not([class]),
.ddi-block .nav-overlay p > a:not([class]),
.ddi-block .start-overlay a:not([class]),
.ddi-block .start-overlay li > a:not([class]),
.ddi-block .start-overlay p > a:not([class]),
.ddi-block .header a:not([class]),
.ddi-block .header li > a:not([class]),
.ddi-block .footer a:not([class]),
.ddi-block .footer li > a:not([class]),
.ddi-block .footer p > a:not([class]) {
	text-decoration: none;
}
/* Reset the body-text :hover colour override too — chrome surfaces
 * each have their own hover treatment (nav-overlay → brighter gold,
 * footer → its own thing). Without this, the sitewide :hover rule's
 * `color: var(--ddi-gold-darker)` wins on specificity and turns
 * the nav-overlay hover into the wrong (muted) gold. */
.ddi-block .nav-overlay a:not([class]):hover,
.ddi-block .nav-overlay li > a:not([class]):hover,
.ddi-block .nav-overlay p > a:not([class]):hover,
.ddi-block .start-overlay a:not([class]):hover,
.ddi-block .start-overlay li > a:not([class]):hover,
.ddi-block .start-overlay p > a:not([class]):hover,
.ddi-block .header a:not([class]):hover,
.ddi-block .header li > a:not([class]):hover,
.ddi-block .footer a:not([class]):hover,
.ddi-block .footer li > a:not([class]):hover,
.ddi-block .footer p > a:not([class]):hover {
	color: var(--ddi-gold);
	text-decoration: none;
}


/* ==========================================================================
   EYEBROWS ON DARK SURFACES
   The default .eyebrow colour is --ddi-gold-darker (#7C5E1F) which is
   tuned for WCAG AA on white / off-white. Against navy/midnight that
   reads muddy and loses too much contrast. Block-level rules below
   bump to the brighter --ddi-gold (#D1B485) for known dark surfaces.
   Block-specific scss (page-hero--dark, prose-centred--surface-dark)
   already handle their own; this catches sitewide utility .eyebrow
   instances dropped into dark sections.
   ========================================================================== */
.contact-direct .eyebrow,
.pce-banner .eyebrow,
.footer .eyebrow,
.start-overlay .eyebrow,
.nav-overlay .eyebrow,
.os-explore--dark .eyebrow,
[data-surface="dark"] .eyebrow {
	color: var(--ddi-gold);
}


/* ==========================================================================
   JOB SEARCH HERO ENTRANCE
   Mirrors the page-hero block's staggered fade-in (eyebrow → rule →
   heading → subhead) on the /job-search/ page so it lands with the
   same calm sense of intent as the marketing pages. Animation curve
   + delays match page-hero exactly so navigating between page types
   feels consistent. Respects prefers-reduced-motion.
   ========================================================================== */
@keyframes ddi-jobsearch-hero-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ddi-job-search__hero > * {
	animation: ddi-jobsearch-hero-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.ddi-job-search__eyebrow      { animation-delay: 0.06s; }
.ddi-job-search__hero .gold-rule { animation-delay: 0.13s; }
.ddi-job-search__heading      { animation-delay: 0.2s; }
.ddi-job-search__subheading   { animation-delay: 0.28s; }

/* Filters nudge UP from below; table nudges in from the LEFT (so it
 * appears to slide rightward into place). Both subtle: 6–8px travel,
 * 0.7s with the same ease curve as the hero so the sequence reads as
 * one composed motion. Delayed so the hero lands first, then the
 * filters, then the table. */
@keyframes ddi-jobsearch-filters-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ddi-jobsearch-table-in {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.ddi-job-search__filters {
	animation: ddi-jobsearch-filters-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	animation-delay: 0.34s;
}
.ddi-job-search__results-bar,
.ddi-job-search__table-wrap {
	animation: ddi-jobsearch-table-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.ddi-job-search__results-bar { animation-delay: 0.42s; }
.ddi-job-search__table-wrap  { animation-delay: 0.48s; }

/* Breathing room below the currency fine-print before the next section. */
.ddi-job-search__fineprint { margin-bottom: clamp(48px, 7vw, 88px); }

/* Job-search CTA heading ("Recognise yourself<br>in one of these roles?"):
   keep the line break after "yourself" on every viewport (it previously was
   hidden <600px, which jammed "yourself" and "in" together). */

@media (prefers-reduced-motion: reduce) {
	.ddi-job-search__hero > *,
	.ddi-job-search__filters,
	.ddi-job-search__results-bar,
	.ddi-job-search__table-wrap { animation: none; }
}


/* Entrance animations — the form fades in + nudges up on page
 * load, and the progress bar's gold fill sweeps from 0 to its
 * current step width. Tiny touch, but it lands the page with a bit
 * of intent rather than the form just popping into place.
 *
 * IMPORTANT: the nudge-up `transform` is applied to the INNER form
 * content (.gform_wrapper, .apply-form-band__intro), NOT to
 * .apply-form-band__form itself. Any `transform` on the form card
 * would create a new containing block, breaking the position:fixed
 * progress bar that lives inside it and pinning it to the form
 * rather than the viewport. Opacity only on the outer card; nudge-
 * up on the inner content.
 *
 * The progress bar fill uses transform: scaleX, not width, so it
 * doesn't fight the existing `transition: width 0.45s ease` (line
 * ~1769) that handles step-to-step transitions later. After the
 * entrance animation finishes, scaleX rests at 1 and subsequent
 * step changes animate via width alone. */
@keyframes ddi-apply-form-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ddi-apply-form-nudge {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ddi-apply-progress-enter {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.apply-form-band__form {
	animation: ddi-apply-form-fade 0.4s ease-out both;
}
/* CRITICAL: nudge-transform applied to inner SIBLINGS of the
 * progress bar's container (.gform_heading), NOT to .gform_wrapper
 * itself. .gform_wrapper wraps both .gform_heading (where the
 * progress bar lives) and the form body. Any transform on
 * .gform_wrapper creates a new containing block, which pins the
 * bar's position:fixed to the wrapper instead of the viewport —
 * leaving the bar floating mid-page rather than locked to the
 * header bottom. Animating .gform_body / .gform_page_footer /
 * .apply-form-band__intro keeps the visual nudge without breaking
 * the bar. */
.apply-form-band__form .apply-form-band__intro,
.apply-form-band__form .gform_body,
.apply-form-band__form .gform_page_footer,
.apply-form-band__form .gform_footer {
	animation: ddi-apply-form-nudge 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: 0.08s;
}
.apply-form-band__form .gf_progressbar_percentage {
	transform-origin: left center;
	animation: ddi-apply-progress-enter 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: 0.15s;
}

/* Respect reduced-motion users — skip the entrance, jump straight
 * to the resting state. Form/progress bar still render fully. */
@media (prefers-reduced-motion: reduce) {
	.apply-form-band__form,
	.apply-form-band__form .apply-form-band__intro,
	.apply-form-band__form .gform_body,
	.apply-form-band__form .gform_page_footer,
	.apply-form-band__form .gform_footer,
	.apply-form-band__form .gf_progressbar_percentage {
		animation: none;
	}
}


/* Exit guard modal — confirms before bouncing a candidate out of
 * the /apply/start/ form. Built lazily in _shared/index.js
 * (initApplyFlowExitGuard) — these styles control how it looks. */
.exit-guard {
	position: fixed;
	inset: 0;
	z-index: 1500;          /* above the header (1000), nav-overlay (1100), start-overlay (1200) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.exit-guard.is-open {
	opacity: 1;
	pointer-events: auto;
}
.exit-guard__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
}
.exit-guard__panel {
	position: relative;
	max-width: 460px;
	width: 100%;
	background: var(--ddi-white);
	padding: clamp(32px, 5vw, 48px) clamp(28px, 5vw, 48px) clamp(32px, 5vw, 44px);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
	transform: translateY(8px) scale(0.98);
	transition: transform 0.25s ease;
}
.exit-guard.is-open .exit-guard__panel { transform: translateY(0) scale(1); }
.exit-guard__title {
	font-family: var(--ddi-font-display) !important;
	font-style: normal;
	font-weight: 300;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.2;
	color: var(--ddi-midnight);
	margin: 0 0 12px;
}
.exit-guard__body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ddi-body-text);
	margin: 0 0 28px;
}
.exit-guard__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.exit-guard__stay {
	width: 100%;
	justify-content: center;
}
/* Exit anyway — the secondary action. Now a proper outline button (was a
 * text link), mirroring .btn / .btn--dark so it reads as a real choice.
 * Stacked full-width below the gold Stay button so the labels never wrap. */
.exit-guard__leave {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 36px;
	border: 1px solid var(--ddi-midnight);
	border-radius: 0;
	background: transparent;
	color: var(--ddi-midnight);
	font-family: var(--ddi-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.exit-guard__leave:hover {
	background: var(--ddi-midnight);
	border-color: var(--ddi-midnight);
	color: var(--ddi-white);
}
body.exit-guard-open { overflow: hidden; }

@media (max-width: 480px) {
	.exit-guard__actions { flex-direction: column; align-items: stretch; }
}


/* Concierge modal — opens from the rail's "Concierge →" button.
 * Holds the FAQ accordion + a contact-line footer. Built off the
 * exit-guard modal pattern (backdrop + panel + close button + ESC
 * to dismiss) but sized for scrollable long-form content. */
.apply-faq-modal {
	position: fixed;
	inset: 0;
	z-index: 1100; /* above header (1000) and progress bar (999) */
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.apply-faq-modal.is-open {
	pointer-events: auto;
	opacity: 1;
}
.apply-faq-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}
.apply-faq-modal__panel {
	position: relative;
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	background: var(--ddi-white);
	box-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.25);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.apply-faq-modal.is-open .apply-faq-modal__panel {
	transform: translateY(0) scale(1);
}
.apply-faq-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(15, 23, 42, 0.12);
	color: var(--ddi-midnight);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.apply-faq-modal__close:hover {
	border-color: var(--ddi-midnight);
	background: rgba(15, 23, 42, 0.04);
}
.apply-faq-modal__inner {
	padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 48px);
	overflow-y: auto;
	box-sizing: border-box;
}
.apply-faq-modal__eyebrow {
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-gold-mid);
	margin: 0 0 10px;
}
.apply-faq-modal__title {
	font-family: var(--ddi-font-display);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ddi-midnight);
	margin: 0 0 24px;
}
.apply-faq-modal__list {
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.apply-faq-modal__footer {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	color: var(--ddi-deep-navy);
}
.apply-faq-modal__footer p { margin: 0; }
.apply-faq-modal__footer a {
	color: var(--ddi-midnight);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-underline-offset: 3px;
}
.apply-faq-modal__footer a:hover {
	text-decoration-color: var(--ddi-gold-darker);
}
body.apply-faq-modal-open { overflow: hidden; }

/* Two-view support modal: FAQs first, then a Contact-our-team form view. */
.apply-faq-modal__view[hidden] { display: none; }

/* Footer of the FAQs view — a prompt + the Contact button. */
.apply-faq-modal__footer-text {
	margin: 0 0 14px;
	font-family: var(--ddi-font-body);
	font-size: 14.5px;
	color: var(--ddi-deep-navy);
}
.apply-faq-modal__contact-btn {
	cursor: pointer;
}

/* Back-to-FAQs control on the contact view. */
.apply-faq-modal__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 20px;
	cursor: pointer;
	font-family: var(--ddi-font-ui);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-deep-navy);
	transition: color 0.25s ease;
}
.apply-faq-modal__back:hover { color: var(--ddi-gold-darker); }

.apply-faq-modal__intro {
	margin: 0 0 22px;
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ddi-deep-navy);
}
/* Inline "click here" link inside the intro — rendered as a <button> so it
 * can switch views, styled as a normal gold-underlined text link. */
.apply-faq-modal__inline-link {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	color: var(--ddi-deep-navy);
	text-decoration: underline;
	text-decoration-color: var(--ddi-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.apply-faq-modal__inline-link:hover {
	color: var(--ddi-gold-darker);
	text-decoration-color: var(--ddi-gold-darker);
}

.apply-faq-modal__form { margin-top: 8px; }
.apply-faq-modal__form-loading {
	font-family: var(--ddi-font-body);
	color: var(--ddi-mid-grey);
	font-size: 14px;
}

@media (max-width: 600px) {
	.apply-faq-modal__panel {
		width: 100%;
		max-height: 100vh;
	}
}


/* Job Search floating CTA — square brand button stuck flat to the
 * viewport bottom (right-anchored) with an auto-opening tooltip
 * card above it. Built in JS (initJobSearchFloatingCta in
 * _shared/index.js). Hidden until JS adds `.is-visible` so it
 * never flashes before mount. The pill-on-the-edge floating
 * pattern read as a third-party widget – this version reads as
 * page chrome that earns its space. */
.ddi-js-cta {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: 0;
	z-index: 990;             /* below the header (1000) so it doesn't fight the nav */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
.ddi-js-cta.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* Square brand button (matches .btn--gold proportions). The pill
 * shape was reading as a chat widget; squared edges + the flat
 * bottom anchor make it part of the page surface. */
.ddi-js-cta__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 20px;
	/* Solid lighter navy (--ddi-navy), no outline — quieter than the solid
	 * gold block (which read as too heavy) but still clearly the CTA on the
	 * white results area where this fixed button mostly floats. The soft
	 * shadow gives it lift. Goes solid gold on hover for the brand moment. */
	background: var(--ddi-navy-light);
	color: var(--ddi-white) !important;
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 1px solid var(--ddi-navy-light);
	border-radius: 0;
	box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	cursor: pointer;
}
.ddi-js-cta__pill:hover {
	/* Darken a step on hover (to the mid-navy). White label throughout. */
	background: var(--ddi-navy);
	border-color: var(--ddi-navy);
	color: var(--ddi-white) !important;
}
.ddi-js-cta__pill-label { white-space: nowrap; }
/* The pill reads just "Join" by default (the tooltip above carries the
 * full pitch). The " our network" tail is collapsed — width 0 + faded —
 * and only unfurls on hover/focus. The button is pinned to the bottom-right
 * corner, so the right edge stays put and the label grows leftward. */
.ddi-js-cta__pill-rest {
	display: inline-block;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	vertical-align: bottom;
	/* Collapse waits 0.35s after the mouse leaves, so wiggling around the
	 * button edge doesn't flicker it open/closed. Expand is instant — the
	 * hover rule sets transition-delay: 0. */
	transition: max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.35s,
	            opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
.ddi-js-cta__pill:hover .ddi-js-cta__pill-rest,
.ddi-js-cta__pill:focus-visible .ddi-js-cta__pill-rest {
	max-width: 12em;
	opacity: 1;
	transition-delay: 0s;
}
.ddi-js-cta__pill-icon { width: 15px; height: 15px; flex-shrink: 0; color: currentColor; }

/* Tooltip card – sits ABOVE the button. Solid navy with a thin
 * gold edge so it stays legible no matter what's behind. The
 * previous translucent treatment got swallowed by the listings
 * table on busy backgrounds. */
.ddi-js-cta__tip {
	background: var(--ddi-deep-navy) !important;
	background-color: #0f1a30 !important;
	color: var(--ddi-white);
	border-radius: 4px;
	padding: 20px 24px 16px;
	max-width: 318px;
	text-align: left;
	font-family: inherit;
	border: none;
	cursor: pointer;
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45);
	position: relative;
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transform-origin: bottom right;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	display: block;
	margin-bottom: 12px; /* lift off the button slightly */
}
.ddi-js-cta.is-tip-open .ddi-js-cta__tip {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.ddi-js-cta__tip::after {
	content: '';
	position: absolute;
	right: 32px;
	bottom: -6px;
	width: 12px;
	height: 12px;
	background: #0f1a30;
	transform: rotate(45deg);
}
.ddi-js-cta__tip-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.25s ease, background 0.25s ease;
}
.ddi-js-cta__tip-close:hover { color: var(--ddi-white); background: rgba(255, 255, 255, 0.08); }
.ddi-js-cta__tip-heading {
	margin: 0 0 8px;
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-style: normal;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ddi-white);
	padding-right: 28px;
}
.ddi-js-cta__tip-body {
	margin: 0;
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}
.ddi-js-cta__tip-link {
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-gold);
	border-bottom: 1px solid rgba(209, 180, 133, 0.5);
	padding-bottom: 2px;
}
@media (max-width: 640px) {
	.ddi-js-cta { right: 12px; }
	.ddi-js-cta__pill { padding: 14px 20px; font-size: 12px; letter-spacing: 0.12em; }
	.ddi-js-cta__tip { max-width: calc(100vw - 24px); }
}


/* Footer PCE band – opt-in lead-capture above the standard footer.
   Enabled per page via the ddi_footer_pce_slugs filter (see footer.php).
   Mirrors the homepage ddi/pce-banner block visually so editors see a
   consistent treatment whether it sits inside the page or as a footer
   addendum, but uses its own class namespace to avoid coupling. */
.footer-pce-band {
	background: var(--ddi-deep-navy);
	padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 60px);
	/* No divider line above – the PCE band reads as one continuous panel
	   with the pre-footer CTA above it (client direction). */
}
.footer-pce-band__inner {
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto;
	background: #141f37;
	padding: 40px clamp(28px, 4vw, 56px);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	align-items: stretch;
}
.footer-pce-band__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: clamp(32px, 3.5vw, 56px);
}
.footer-pce-band__subheading {
	color: var(--ddi-gold-light);
	margin-bottom: 6px;
}
.footer-pce-band__heading {
	font-family: var(--ddi-font-display);
	font-style: normal;
	font-weight: 300;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.15;
	color: var(--ddi-white);
	letter-spacing: -0.005em;
	margin: 0;
}
.footer-pce-band__right {
	padding-left: clamp(32px, 3.5vw, 56px);
	border-left: 1px solid rgba(255, 255, 255, 0.10);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.footer-pce-band__body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 18px;
}
.footer-pce-band__form { display: flex; align-items: center; gap: 0; margin-bottom: 12px; }
.footer-pce-band__form input[type="email"] {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--ddi-white);
	border-right: 0;
	background: transparent;
	font-family: var(--ddi-font-body);
	font-size: 14px;
	color: var(--ddi-white);
	border-radius: 0;
	box-sizing: border-box;
	/* Parent theme's screen.css adds a 20px bottom margin to every input,
	   which in this flex row drops the centred submit button ~10px below
	   the field. Zero it so input + button sit inline (matches pce-banner). */
	margin: 0;
}
.footer-pce-band__form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
.footer-pce-band__form input[type="email"]:focus { outline: none; border-color: var(--ddi-gold); }
.footer-pce-band__form .btn { flex-shrink: 0; padding: 12px 24px; line-height: 1.4; margin: 0; border-radius: 0; }
.footer-pce-band__disclaimer {
	font-family: var(--ddi-font-body);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}
.footer-pce-band__disclaimer a {
	color: var(--ddi-gold-light);
	border-bottom: 1px solid rgba(209, 180, 133, 0.4);
}
.footer-pce-band__disclaimer a:hover { color: var(--ddi-gold); border-bottom-color: var(--ddi-gold); }

@media (max-width: 900px) {
	.footer-pce-band__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 24px;
		text-align: center;
	}
	.footer-pce-band__left { padding-right: 0; }
	.footer-pce-band__right { padding-left: 0; border-left: none; max-width: 360px; margin: 0 auto; }
	.footer-pce-band__form { flex-direction: column; }
	.footer-pce-band__form input[type="email"] {
		border-right: 1px solid var(--ddi-white);
		border-bottom: 0;
		text-align: center;
		/* Match the other site form inputs (apply/contact) + avoid iOS zoom. */
		font-size: 16px;
		padding: 16px 18px;
	}
	/* Submit sits full-width to match the input when stacked, label centred. */
	.footer-pce-band__form .btn { width: 100%; justify-content: center; }
}

/* Homepage trust line (ddi/location-bar) — stack the three phrases with the
   gold dot acting as a separator BETWEEN them on mobile (it was trailing each
   line on a wrapped single row). Scoped descendant selectors so this wins over
   the block's own stylesheet regardless of enqueue order. */
@media (max-width: 600px) {
	.location-bar .location-bar__inner { flex-direction: column; gap: 8px; }
	.location-bar .location-bar__item { flex-direction: column; gap: 8px; }
	.location-bar .location-bar__dot { margin: 0; }
}


/* Legal + meta row – copyright left, policy links + "Site by" credit
   right. Single hairline divider above keeps the footer visually quiet. */
.footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}
.footer__legal,
.footer__meta {
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}
.footer__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-end;
	text-align: right;
	flex-shrink: 0;
}
.footer__meta-link,
.footer__credit a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.3s;
}
.footer__meta-link:hover,
.footer__credit a:hover { color: var(--ddi-gold); }
.footer__credit { color: rgba(255, 255, 255, 0.45); }
.footer__credit a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); text-underline-offset: 3px; }
.footer__meta-sep {
	color: rgba(255, 255, 255, 0.22);
	user-select: none;
}
/* Manage cookies — styled to read identically to the policy link
 * next to it. The cookie-consent tool (next phase) binds to
 * `[data-cookie-manage]` to open its preferences panel. */
.footer__manage-cookies {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
}

/* Compact footer — apply form pages only. A single quiet legal strip: no
 * nav, locations, social or logo to pull the candidate out of the funnel.
 * Tighter padding and the bottom row centred with no orphaned top border
 * (there's nothing above it to divide from). */
.footer--compact {
	padding: 24px var(--ddi-gutter, 60px);
}
.footer--compact .footer__bottom {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	flex-wrap: wrap;
	text-align: left;
}
.footer--compact .footer__meta { justify-content: flex-end; }

@media (max-width: 600px) {
	/* Stack centred on narrow phones. */
	.footer--compact .footer__bottom {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
	.footer--compact .footer__meta { justify-content: center; }
}


/* Footer mobile breakpoint */
@media (max-width: 768px) {
	.footer {
		padding: 56px 24px 32px;
	}
	.footer__nav { gap: 16px; }
	.footer__logo img { height: 28px; }
	/* Bigger monogram on mobile. */
	.footer__logo--mark img { height: 92px !important; }
	/* Strapline is a desktop-only flourish — hide it on mobile. */
	.footer__strapline { display: none; }
	/* Mobile: stack the legal + meta centered – the side-by-side
	   layout doesn't survive narrow viewports without ugly wrapping. */
	.footer__bottom {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}
	.footer__meta {
		justify-content: center;
		text-align: center;
		gap: 10px 14px;
	}
}

@media (max-width: 480px) {
	/* 7-item nav breaks into a ragged 3-row block on tiny phones –
	   hide the two secondary links (Insight + The Approach) to keep
	   it tidy. Matches prototype behaviour. */
	.footer__nav a:nth-child(4),
	.footer__nav a:nth-child(5) { display: none; }
}

/* --------------------------------------------------------------------------
   OUR STORY – founder feature ("Meet Carrie-Ann") promoted to a full-bleed
   40/60 split (frontpage brand-story treatment): image edge-to-edge on the
   left, copy on the right. Scoped to the .founder-bleed framed-feature
   instance so the page's other framed-feature is untouched.
   -------------------------------------------------------------------------- */
.framed-feature.founder-bleed { padding: 0; background: var(--ddi-white); }
.framed-feature.founder-bleed .framed-feature__inner {
	max-width: none;
	grid-template-columns: 40% 60%;
	gap: 0;
	align-items: stretch;
}
.framed-feature.founder-bleed .framed-feature__media {
	max-width: none; width: 100%; margin: 0;
	position: relative;
	overflow: hidden;
	min-height: 620px;
}
.framed-feature.founder-bleed .framed-feature__media::before { display: none; }
/* Image is absolute + a touch taller than the frame so it can slide up into
   place (and gently drift) without exposing a gap — same idea as the
   homepage brand-story image. JS (initBrandStoryParallax) drives it; the CSS
   sets the initial offset. */
.framed-feature.founder-bleed .framed-feature__media img {
	position: absolute;
	top: -15%;
	left: 0;
	width: 100%;
	height: 130%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 20%;
	will-change: transform;
	transform: translateY(120px);
}
.framed-feature.founder-bleed .framed-feature__caption { display: none; }
.framed-feature.founder-bleed .framed-feature__text {
	max-width: 820px;
	padding: clamp(48px, 6vw, 100px) clamp(28px, 5vw, 80px);
	align-self: center;
}
/* The slide-up parallax (initBrandStoryParallax) only runs >=1024px. Below
   that the JS never touches the image, so reset the initial translateY so it
   sits in place — no slide, and no image left stuck 120px low on tablet. */
@media (max-width: 1023px) {
	.framed-feature.founder-bleed .framed-feature__media img { transform: none; }
}
@media (max-width: 900px) {
	.framed-feature.founder-bleed .framed-feature__inner { grid-template-columns: 1fr; }
	/* Stack the copy first, photo below it (matches the homepage Our
	   Approach treatment) rather than the block's default image-first. */
	.framed-feature.founder-bleed .framed-feature__text { max-width: none; padding: 40px 24px; order: 1; }
	.framed-feature.founder-bleed .framed-feature__media { min-height: 440px; order: 2; }
}

/* Our Story founder runs full-height: the 40/60 split fills the viewport (the
 * image column bleeds to 100vh; the copy stays vertically centred via its
 * existing align-self). Reset on mobile where the columns stack. */
.framed-feature.founder-bleed .framed-feature__inner { min-height: 100vh; }
@media (max-width: 900px) {
	.framed-feature.founder-bleed .framed-feature__inner { min-height: 0; }
}

/* Carrie-Ann (and the team) portrait shows in full colour. The earlier
 * gold-toned greyscale → colour scroll-scrub was removed per client direction;
 * the image now simply slides up into place (initBrandStoryParallax). */

/* --------------------------------------------------------------------------
   OUR STORY – "The Team" reuses the founder full-bleed 40/60 treatment, mirrored:
   editorial copy on the LEFT (60%), photo edge-to-edge on the RIGHT (40%), with
   the same slide-up parallax. Scoped to the image-right + founder-bleed combo so
   the founder (image-left) is untouched. Gated >=901px so the founder-bleed
   mobile rule still collapses both to a single column below that.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.framed-feature.founder-bleed.framed-feature--image-right .framed-feature__inner {
		grid-template-columns: 40% 60%;
	}
}
.framed-feature.founder-bleed.framed-feature--image-right .framed-feature__media img {
	object-position: center 30%;
}

/* "Learn about our approach" ghost CTA inside the Services tenets section. */
.tenets__cta-row { margin-top: clamp(28px, 3.5vw, 40px); margin-bottom: 0; }

/* Services "A Considered Standard" (tenets) — light off-white surface (not
   pure white) now the service cards move into the hero. Scoped to the
   Services page so the homepage tenets stays dark; ghost CTA flips to navy. */
body.page-id-275 .tenets { background: var(--ddi-white); }
body.page-id-275 .tenets__eyebrow { color: var(--ddi-gold-mid) !important; }
body.page-id-275 .tenets__heading { color: var(--ddi-midnight); }
body.page-id-275 .tenets__body,
body.page-id-275 .tenets__body p { color: var(--ddi-body-text); }
body.page-id-275 .tenets .btn--white { color: var(--ddi-deep-navy); border-color: rgba(26, 39, 68, 0.35); }
body.page-id-275 .tenets .btn--white:hover { color: var(--ddi-white); background: var(--ddi-deep-navy); border-color: var(--ddi-deep-navy); }


/* ============================================================
 * LiteSpeed lazy-load fade-in — lazy images ease in as they load.
 * data-lazyloaded starts them transparent; LiteSpeed's lazyload JS adds
 * .litespeed-loaded once the real src is in, fading them to full opacity.
 * The homepage hero is excluded from lazy-load (see the mu-plugin), so it
 * is unaffected.
 * ============================================================ */
img[data-lazyloaded] { opacity: 0; }
img.litespeed-loaded { opacity: 1; transition: opacity 0.5s ease; }

/* ============================================================
 * Landing page — "How it works" static 3-step + Why-Us split.
 * Namespaced .lp-* so they only style landing pages that opt in.
 *
 * .lp-process mirrors the look of the-approach's ddi/timeline-horizontal
 * (navy surface, small gold "01" labels, slim rail + dots, Fraunces
 * titles) but is STATIC — three columns, no scroll/pin. An integrated
 * gold CTA sits at the foot so there's no second adjacent navy band.
 * ============================================================ */
.lp-process {
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
	padding: clamp(64px, 8vw, 112px) clamp(20px, 5vw, 60px);
}
.lp-process__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(48px, 6vw, 76px);
}
.lp-process__eyebrow { color: var(--ddi-gold-light) !important; margin: 0 0 14px; }
.lp-process__heading {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ddi-white);
	margin: 0;
}
.lp-process__track {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1040px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(32px, 5vw, 72px);
	position: relative;
}
/* Slim rail behind the nodes, spanning the three column centres. `top`
   aligns to the node centre (which sits below the one-line year label). */
.lp-process__track::before {
	content: '';
	position: absolute;
	top: 39px;
	left: 16.666%;
	right: 16.666%;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	z-index: 0;
}
.lp-process__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.lp-process__year {
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	height: 13px;
	color: var(--ddi-gold-light);
	margin: 0 0 20px;
}
.lp-process__node {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--ddi-gold);
	box-shadow: 0 0 0 5px rgba(209, 180, 133, 0.16);
	margin: 0 0 30px;
}
.lp-process__title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.25;
	color: var(--ddi-white);
	margin: 0 0 12px;
}
.lp-process__body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	max-width: 32ch;
}
.lp-process__cta {
	text-align: center;
	margin-top: clamp(48px, 6vw, 76px);
}
@media (max-width: 720px) {
	/* Stack to a vertical rail + rows on mobile. */
	.lp-process__track { grid-template-columns: 1fr; gap: 0; max-width: 420px; }
	.lp-process__track::before { left: 6px; right: auto; top: 33px; bottom: 33px; width: 1px; height: auto; }
	.lp-process__step { flex-direction: row; flex-wrap: wrap; align-items: flex-start; text-align: left; column-gap: 20px; padding-bottom: 34px; }
	.lp-process__step:last-child { padding-bottom: 0; }
	.lp-process__year { order: 2; flex: 1; height: auto; margin: 0 0 8px; }
	.lp-process__node { order: 1; margin: 5px 0 0; flex: 0 0 13px; }
	.lp-process__title { order: 3; flex-basis: 100%; padding-left: 33px; }
	.lp-process__body { order: 4; flex-basis: 100%; padding-left: 33px; max-width: none; }
}

/* Scroll-into-view entrance. The section carries `.reveal`; the sitewide
   IntersectionObserver adds `.is-visible` at ~15% in view. The navy surface +
   heading stay put (we override the default .reveal fade on the section); the
   rail draws left→right and the three columns stagger up beneath it. */
.lp-process.reveal { opacity: 1; transform: none; }
.lp-process__track::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-process.is-visible .lp-process__track::before { transform: scaleX(1); }
.lp-process__step,
.lp-process__cta {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-process.is-visible .lp-process__step,
.lp-process.is-visible .lp-process__cta { opacity: 1; transform: none; }
.lp-process.is-visible .lp-process__step:nth-child(1) { transition-delay: 0.15s; }
.lp-process.is-visible .lp-process__step:nth-child(2) { transition-delay: 0.30s; }
.lp-process.is-visible .lp-process__step:nth-child(3) { transition-delay: 0.45s; }
.lp-process.is-visible .lp-process__cta { transition-delay: 0.58s; }
@media (prefers-reduced-motion: reduce) {
	.lp-process__track::before { transform: scaleX(1); transition: none; }
	.lp-process__step,
	.lp-process__cta { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
 * Why-Us split — full-width: left editorial text, right an image
 * under a navy overlay with a single-at-a-time testimonial carousel
 * on top (reuses the .ddi-carousel engine; assets enqueued in PHP).
 * ------------------------------------------------------------ */
.lp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.lp-split__text {
	background: var(--ddi-off-white);
	padding: clamp(56px, 7vw, 112px) clamp(28px, 6vw, 92px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lp-split__eyebrow { color: var(--ddi-gold-mid) !important; margin: 0 0 16px; }
.lp-split .gold-rule { margin: 0 0 24px; }
.lp-split__heading {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(27px, 3.1vw, 42px);
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--ddi-midnight);
	margin: 0 0 24px;
}
.lp-split__body p {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--ddi-body-text);
	margin: 0 0 16px;
}
.lp-split__body p:last-child { margin-bottom: 0; }
.lp-split__media {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.lp-split__bg { position: absolute; inset: 0; z-index: 0; }
.lp-split__bg img { width: 100%; height: 100%; object-fit: cover; }
.lp-split__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(140deg, rgba(26, 39, 68, 0.86) 0%, rgba(15, 23, 42, 0.90) 100%);
}
.lp-split__quote {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 520px;
	padding: clamp(32px, 4vw, 60px);
}
/* Testimonial reads like the standard card — gold line down the left, left
   aligned — but on the navy media (white text) and a touch bigger. The base
   .testimonial-card styles are scoped under .testimonials, which this isn't,
   so the gold rule is drawn explicitly here. */
.lp-split .testimonial-card { text-align: left; margin: 0; padding-left: 30px; position: relative; }
.lp-split .testimonial-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	bottom: 5px;
	width: 2px;
	background: var(--ddi-gold);
	opacity: 0.85;
}
.lp-split .testimonial-card__quote {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(22px, 2vw, 29px);
	line-height: 1.5;
	color: #fff;
	margin: 0 0 20px;
}
.lp-split .testimonial-card__author {
	font-family: var(--ddi-font-ui);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ddi-gold-light) !important;
}
/* Pager → thin lines (not dots), aligned under the quote. */
.lp-split .ddi-carousel__pager { margin-top: 28px; justify-content: center; padding-left: 0; }
.lp-split .ddi-carousel__dot { background: transparent; width: 22px; }
.lp-split .ddi-carousel__dot::before { height: 1px; background: rgba(255, 255, 255, 0.4); opacity: 1; }
.lp-split .ddi-carousel__dot[aria-current="true"] { width: 34px; }
.lp-split .ddi-carousel__dot[aria-current="true"]::before { background: var(--ddi-gold); opacity: 1; }
@media (max-width: 860px) {
	.lp-split { grid-template-columns: 1fr; }
	.lp-split__media { min-height: 380px; }
}