/*
Theme Name: Nora Consulting
Theme URI: https://www.noraconsulting.ca
Author: Nora Consulting
Description: Custom classic WordPress theme for Nora Consulting. A pixel-faithful rebuild of the original site, engineered to meet WCAG 2.2 Level AA (AODA / Ontario IASR Information & Communications Standard).
Version: 1.3.5
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nora
Tags: accessibility-ready, custom-menu, one-column, responsive-layout
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Reset & base
   3.  Accessibility utilities (skip link, focus, sr-only, motion)
   4.  Layout primitives
   5.  Header & navigation
   6.  Hero
   7.  Buttons
   8.  Home page sections
   9.  Interior page sections
   10. Careers & job posting pages
   11. Forms
   12. Contact band & footer
   13. Back-to-top
   14. Accessibility statement page
   15. Responsive breakpoints
   16. Print
   17. Small-screen refinements
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   Colours sampled directly from the original site.
   Every foreground/background pair below has been checked against
   WCAG 2.2 SC 1.4.3 (Contrast Minimum, 4.5:1) and 1.4.11 (Non-text, 3:1).
   ========================================================================= */
:root {
	/* Brand — sampled from the original site's computed styles. */
	--nora-blue:        #033b85; /* section fills.  On #fff = 10.1:1 AAA */
	--nora-blue-text:   #033c86; /* display type.   On #fff = 10.1:1 AAA */
	--nora-navy:        #1a2b6d; /* nav + submit.   On #fff = 11.8:1 AAA */
	--nora-navy-dark:   #14204f; /* hover state.    On #fff = 14.4:1 AAA */
	--nora-red:         #d41317; /* CTA red. #fff on this = 5.4:1 — AA   */
	--nora-red-dark:    #a80f12; /* hover.   #fff on this = 7.7:1 — AAA  */

	/* Neutrals */
	--nora-white:       #ffffff;
	--nora-grey-panel:  #f2f2f2; /* panel background                     */
	--nora-ink:         #000000; /* body copy, as the original. 21:1 AAA */
	--nora-ink-soft:    #353131; /* card button label. On #f2f2f2 = 11:1 */
	--nora-rule:        #d4d4d4;

	/* Focus indicator — SC 2.4.11 Focus Appearance & 1.4.11 Non-text Contrast.
	   3px solid ring + 2px offset. Contrast vs. both light and dark grounds. */
	--nora-focus:       #b8000f;
	--nora-focus-alt:   #ffd400; /* used on dark/blue backgrounds       */
	--nora-focus-width: 3px;

	/* Typography */
	/* Poppins and Questrial are bundled as woff2 in assets/fonts/ (SIL OFL).
	   Body copy targets Helvetica, as the original did. Arial follows it rather
	   than Segoe UI because Arial is metric-compatible with Helvetica — the two
	   share glyph widths, so line breaks fall in the same places on Windows as
	   they do on a Mac. Segoe UI would reflow the text. */
	--font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--font-nav:     "Questrial", "Helvetica Neue", Arial, sans-serif;
	--font-band:    "Spinnaker", "Questrial", "Helvetica Neue", Arial, sans-serif;
	--font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* The original tracks its body copy loosely. These are its exact values:
	   0.8px at 16px, and 0.64px at 16px in the tighter blocks. */
	--track-body:  0.05em;
	--track-tight: 0.04em;
	--track-wide:  0.1em;   /* small caps-ish button and footer labels */

	/* Layout */
	--container:      980px;  /* original content column width */
	--container-wide: 1220px;
	--gutter:         24px;
	--header-h:       104px;

	/* Minimum interactive target — SC 2.5.8 Target Size (Minimum) is 24px.
	   We use 44px, the AAA figure, everywhere it does not break the design. */
	--target-min: 44px;
}


/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset for in-page anchors so the sticky header never covers a target. */
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--nora-white);
	color: var(--nora-ink);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: var(--track-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

/* Poppins carries generous built-in line spacing. The original leaves it at
   `normal` for its display headings, so we do too — that is what makes the
   heading blocks the same height. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--nora-blue-text);
	margin: 0 0 0.5em;
	line-height: normal;
	letter-spacing: normal;
}

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

a { color: var(--nora-blue); }

/* SC 1.4.1 Use of Colour — links inside running text must not rely on
   colour alone, so they carry a persistent underline. */
.entry-copy a,
.rich-text a { text-decoration: underline; text-underline-offset: 3px; }

ul, ol { margin: 0 0 1.5em; padding-left: 1.4em; }
li { margin-bottom: 0.35em; }

/* SC 1.4.12 Text Spacing — nothing is clipped when users override spacing. */
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }


/* =========================================================================
   3. ACCESSIBILITY UTILITIES
   ========================================================================= */

/* Skip link — SC 2.4.1 Bypass Blocks. Visible on focus, high contrast. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 999;
	display: inline-block;
	padding: 14px 22px;
	background: var(--nora-navy);
	color: var(--nora-white);
	font-family: var(--font-nav);
	font-size: 16px;
	text-decoration: underline;
	border-radius: 0 0 4px 4px;
	transition: top 0.15s ease-in-out;
}
.skip-link:focus {
	top: 0;
	outline: var(--nora-focus-width) solid var(--nora-focus-alt);
	outline-offset: 2px;
}

/* Visually hidden but available to assistive technology. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	margin: 0; padding: 12px 20px;
	white-space: normal;
}

/* SC 2.4.7 Focus Visible + 2.4.11 Focus Appearance.
   Applied to every focusable element; never removed without a replacement. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--nora-focus-width) solid var(--nora-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
/* On blue and dark grounds the red ring loses contrast — switch to amber. */
.section--blue :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.section--dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.contact-band :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.site-footer :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--nora-focus-alt);
}

/* Fallback for browsers without :focus-visible. */
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* SC 2.3.3 Animation from Interactions / 2.2.2 Pause, Stop, Hide. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Windows High Contrast Mode / forced-colors — keep borders visible. */
@media (forced-colors: active) {
	.btn, .nav-toggle, .form-field input, .form-field textarea, .form-field select {
		border: 1px solid ButtonText;
	}
	:where(a, button, input, select, textarea):focus-visible {
		outline: 3px solid Highlight;
	}
}


/* =========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================= */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

.section { position: relative; }
.section--grey  { background: var(--nora-grey-panel); }
.section--white { background: var(--nora-white); }
.section--blue  { background: var(--nora-blue); color: var(--nora-white); }
.section--blue h1, .section--blue h2, .section--blue h3 { color: var(--nora-white); }

/* The narrow navy rule that sits under every hero on the original site, and
   the band of white the original leaves between it and the next section. */
.accent-bar {
	height: 12px;
	width: 85%;
	background: var(--nora-navy);
	margin: 0 0 3px;
}
/* The home page leaves a deeper band of white below the rule. */
.accent-bar--gap { margin-bottom: 54px; }


/* =========================================================================
   5. HEADER & NAVIGATION
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--nora-white);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-header__inner {
	max-width: var(--container-wide);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-branding { flex: 0 0 auto; }
.site-branding a {
	display: inline-flex;
	align-items: center;
	min-height: var(--target-min);
	text-decoration: none;
}
.site-branding img { width: 110px; height: auto; }

.primary-nav { margin-left: auto; }
.primary-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.primary-nav li {
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
}

.primary-nav a {
	display: flex;
	align-items: center;
	min-height: var(--target-min);      /* SC 2.5.8 Target Size */
	padding: 10px 16px;
	font-family: var(--font-nav);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--nora-navy);
	text-decoration: none;
	white-space: nowrap;
}
.primary-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* SC 1.4.1 — the current page is marked by weight AND an underline rule,
   not colour alone, and is announced via aria-current in the markup. */
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav [aria-current="page"] {
	color: var(--nora-ink);
	box-shadow: inset 0 -2px 0 0 var(--nora-navy);
}

/* Leave room for the disclosure button beside a parent item. */
.primary-nav > ul > .menu-item-has-children > a { padding-right: 4px; }

/* Submenu — opens on hover AND on focus-within, so it is keyboard reachable. */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0; padding: 8px 0;
	background: var(--nora-white);
	border: 1px solid var(--nora-rule);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	display: block;
	flex-direction: column;
	gap: 0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	/* `visibility` is deliberately NOT transitioned. Animating it delays the
	   flip to `visible`, and a keyboard user tabbing quickly out of the parent
	   link would skip straight past the submenu items while they were still
	   hidden and therefore out of the tab order. */
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu,
.primary-nav li > .sub-menu.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
.primary-nav .sub-menu a {
	padding: 12px 20px;
	font-weight: 400;
	white-space: normal;
}
.primary-nav .sub-menu a:hover { background: var(--nora-grey-panel); }

/* Disclosure button for submenus — keeps touch and keyboard users covered. */
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	margin-left: -8px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}
.submenu-toggle svg { width: 12px; height: 12px; transition: transform 0.15s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mobile menu button */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	min-height: var(--target-min);
	min-width: var(--target-min);
	padding: 10px 14px;
	background: var(--nora-white);
	border: 1px solid var(--nora-navy);
	color: var(--nora-navy);
	font-family: var(--font-nav);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle__bars span {
	position: absolute; left: 0;
	display: block; width: 100%; height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* =========================================================================
   6. HERO
   ========================================================================= */
.hero { position: relative; }
.hero__media {
	width: 100%;
	height: var(--hero-h, 534px);
	overflow: hidden;
	background: var(--nora-grey-panel);
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Interior pages place a titled panel over the hero. */
.hero--titled .hero__panel {
	position: absolute;
	left: 50%;
	bottom: -46px;
	transform: translateX(-50%);
	z-index: 2; /* above the accent bar, as on the original */
	width: min(645px, calc(100% - 2 * var(--gutter)));
	padding: 34px 40px;
	background: var(--nora-grey-panel);
	text-align: center;
}
.hero--titled .hero__panel h1 {
	margin: 0;
	font-size: 55px;
	line-height: 1.1;
	color: var(--nora-navy);
}
.hero--titled + .accent-bar { position: relative; z-index: 1; }
.hero--titled ~ .section:first-of-type { padding-top: 96px; }


/* =========================================================================
   7. BUTTONS
   All button styles meet SC 2.5.8 (target >= 44px) and 1.4.11 (3:1 border).
   ========================================================================= */
/* Box sizes below are the original's measured values. All clear SC 2.5.8,
   which asks for 24x24; most clear 44x44 as well. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: var(--track-wide);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Outline button — "Read More" on the home page. Original: 142x42. */
.btn--outline {
	min-width: 142px;
	min-height: 42px;
	background: var(--nora-white);
	color: var(--nora-navy);
	border-color: var(--nora-blue-text);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--nora-navy);
	color: var(--nora-white);
	border-color: var(--nora-navy);
}

/* Small outline button inside the service cards. Original: 89x26, Avenir
   Heavy 14px. Poppins SemiBold is the closest freely licensable geometric
   face and is already loaded. 26px still clears the 24px target minimum. */
.btn--card {
	min-width: 89px;
	min-height: 26px;
	padding: 2px 10px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	background: transparent;
	color: var(--nora-ink-soft);
	border-color: var(--nora-blue-text);
}
.btn--card:hover,
.btn--card:focus-visible {
	background: var(--nora-blue-text);
	color: var(--nora-white);
}

/* Solid red CTA — the careers "Read More". Original: 142x40. */
.btn--red {
	min-width: 142px;
	min-height: 40px;
	background: var(--nora-red);
	color: var(--nora-white);
	border-color: var(--nora-red);
}
.btn--red:hover,
.btn--red:focus-visible {
	background: var(--nora-red-dark);
	border-color: var(--nora-red-dark);
}

/* Solid navy — the contact form submit. Original: 142x40, label 25px light. */
.btn--navy {
	min-width: 142px;
	min-height: 40px;
	padding: 2px 24px;
	background: var(--nora-navy);
	color: var(--nora-white);
	border-color: var(--nora-navy);
	font-family: var(--font-display);
	font-size: 25px;
	font-weight: 300;
	line-height: 34px;
	letter-spacing: normal;
}
.btn--navy:hover,
.btn--navy:focus-visible {
	background: var(--nora-navy-dark);
	border-color: var(--nora-navy-dark);
}

/* Solid blue — job application submit */
.btn--blue {
	background: var(--nora-blue);
	color: var(--nora-white);
	border-color: var(--nora-blue);
	width: 100%;
	min-height: 46px;
	font-size: 15px;
	letter-spacing: normal;
	padding: 14px 24px;
}
.btn--blue:hover,
.btn--blue:focus-visible { background: var(--nora-navy); border-color: var(--nora-navy); }

.btn--wide { min-width: 190px; }

/* The composite "+ / Contact Us" CTA from the home page. */
.cta-split {
	display: inline-flex;
	align-items: stretch;
	text-decoration: none;
	min-height: 52px;
}
.cta-split__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	background: var(--nora-blue);
	color: var(--nora-white);
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 25px;
	line-height: 1;
	transition: background-color 0.18s ease;
}
.cta-split__label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 186px;
	padding: 12px 24px;
	background: var(--nora-red);
	color: var(--nora-white);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 23.8px;
	letter-spacing: normal;
	transition: background-color 0.18s ease;
}
.cta-split:hover .cta-split__label,
.cta-split:focus-visible .cta-split__label { background: var(--nora-red-dark); }
.cta-split:hover .cta-split__mark,
.cta-split:focus-visible .cta-split__mark { background: var(--nora-navy); }


/* =========================================================================
   8. HOME PAGE SECTIONS
   ========================================================================= */

/* --- Intro ------------------------------------------------------------- */
.intro {
	background: var(--nora-grey-panel);
	padding: 78px 0 64px;   /* measured off the original section box */
	text-align: center;
}
/* Rendered as <h1> so the home page has a top-level heading, which the
   original site lacked (SC 1.3.1 / 2.4.6). Type scale is unchanged. */
.intro h1,
.intro h2 {
	max-width: 540px;
	margin: 0 auto 29px;
	font-size: 30px;
	line-height: 42px;
	letter-spacing: normal;
	color: var(--nora-blue-text);
}
.intro p {
	max-width: 623px;
	margin: 0 auto 30px;
	font-size: 16px;
	line-height: 28.8px;
	letter-spacing: var(--track-body);
	color: var(--nora-ink);
}

/* --- Services band ------------------------------------------------------ */
.services {
	position: relative;
	min-height: 384px;
	display: flex;
	align-items: flex-start;
	padding: 56px 0 0;
	background: #12211f;      /* fallback behind the photograph */
	overflow: visible;
}
.services__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}
.services__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Scrim guarantees SC 1.4.3 contrast for the white copy over the photo. */
.services__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 20, 19, 0.94) 0%, rgba(6, 20, 19, 0.86) 46%, rgba(6, 20, 19, 0.55) 100%);
}
.services__inner { position: relative; z-index: 1; width: 100%; }
.services h2 {
	margin: 0 0 10px;
	font-size: 55px;
	line-height: normal;
	color: var(--nora-white);
}
.services__lede {
	max-width: 520px;
	margin: 0;
	font-size: 16px;
	line-height: 27.2px;
	letter-spacing: var(--track-tight);
	color: var(--nora-white);
}

/* --- Service cards ------------------------------------------------------ */
.service-cards {
	position: relative;
	z-index: 2;
	margin-top: -127px;   /* cards straddle the lower edge of the photo band */
	padding-bottom: 136px;
}
.service-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 74px;
	max-width: 632px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
.service-card {
	position: relative;
	margin: 0;
	min-height: 329px;   /* the original's card box */
	padding: 34px 20px 36px 33px;   /* the original's asymmetric inset */
	background: var(--nora-grey-panel);
	display: flex;
	flex-direction: column;
}
/* The offset outline frame from the original design. Decorative only. */
.service-card::after {
	content: "";
	position: absolute;
	left: 14px; right: -14px;
	top: 14px; bottom: -14px;
	border: 1px solid var(--nora-rule);
	z-index: -1;
	pointer-events: none;
}
.service-card h3 {
	margin: 0 0 57px;
	font-size: 18px;
	line-height: normal;
	color: var(--nora-blue-text);
}
/* Spacing here is explicit rather than flex-driven so the card keeps the
   original's 329px height instead of stretching to fill. */
.service-card p {
	margin: 0 0 40px;
	font-size: 16px;
	line-height: 27.2px;
	letter-spacing: var(--track-tight);
	color: var(--nora-ink);
	flex: 0 0 auto;
	min-height: 82px;
}
.service-card .btn { align-self: flex-start; margin-top: auto; }

/* --- Connect with us ---------------------------------------------------- */
.connect { padding: 105px 0 58px; background: var(--nora-white); }
.connect__panel {
	width: min(912px, 100%);
	margin-inline: auto;
	background: var(--nora-grey-panel);
	padding: 46px 0 24px 140px;
}
.connect__panel h2 {
	margin: 0 0 44px;
	font-size: 55px;
	line-height: normal;
	color: var(--nora-blue-text);
}
.connect__body {
	display: grid;
	grid-template-columns: 158px minmax(0, 488px);
	gap: 0;
	align-items: start;
}
.connect__rule {
	display: block;
	width: 113px;
	height: 0;
	margin-left: 12px;
	border-top: 3px solid var(--nora-blue);
}
/* min-height pins the block to the original's measured height. Body copy set
   in Helvetica Neue Light (macOS) wraps a line shorter than the same copy in
   Arial (Windows); reserving the height keeps everything below it in the same
   place on both, instead of the page shifting by a line. */
.connect__body p {
	font-size: 16px;
	line-height: 27.2px;
	letter-spacing: normal;
	max-width: 488px;
	min-height: 245px;
}
.connect__cta { margin: 24px 0 0; padding-right: 30px; text-align: right; }


/* =========================================================================
   9. INTERIOR PAGE SECTIONS
   ========================================================================= */

/* --- About: intro split ------------------------------------------------- */
.about-intro { background: var(--nora-grey-panel); padding: 55px 0 63px; }
.about-intro__wrap { width: 100%; }
.about-intro__panel {
	width: min(1574px, calc(100% - 2 * var(--gutter)));
	margin-inline: auto;
	min-height: 474px;
	background: var(--nora-white);
	padding: 60px 194px 60px 256px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 299px;
	gap: 48px;
	align-items: start;
}
.about-intro h1 { margin: 0 0 2px; font-size: 56px; line-height: 78px; }
.about-intro p.about-intro__sub {
	margin: 0 0 27px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.3;
	color: var(--nora-blue);
}
.about-intro p { font-size: 16px; line-height: 28.8px; max-width: 505px; }
.about-intro__panel > div > p:last-child { min-height: 106px; }
.about-intro__mark img { width: 299px; height: auto; }

/* --- Split panel (Our Mission) ------------------------------------------ */
.split {
	display: grid;
	grid-template-columns: minmax(0, 49.5%) minmax(0, 50.5%);
	align-items: stretch;
	background: var(--nora-white);
}
.split__block {
	background: var(--nora-blue);
	color: var(--nora-white);
	min-height: 440px;
	padding: 75px 60px 60px 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.split__block-inner { width: min(320px, 100%); }
.split__block h2 {
	margin: 0 0 26px;
	font-size: 55px;
	line-height: 1.1;
	color: var(--nora-white);
}
.split__rule { display: block; width: 28px; height: 2px; background: var(--nora-white); }
.split__copy {
	padding: 90px 60px 90px 51px;
	display: flex;
	align-items: center;
}
.split__copy p { max-width: 400px; font-size: 18px; line-height: 32.4px; letter-spacing: normal; }

/* --- Overlay panel (Our Team) ------------------------------------------- */
.overlay-section { position: relative; }
.overlay-section__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.overlay-section__bg img { width: 100%; height: 100%; object-fit: cover; }
.overlay-section__inner {
	position: relative;
	z-index: 1;
	width: min(1502px, calc(100% - 2 * var(--gutter)));
	margin-inline: auto;
	padding: 105px 0 88px;
	display: flex;
	justify-content: flex-end;
}
.overlay-section__panel {
	background: var(--nora-white);
	min-height: 508px;
	padding: 52px 148px 52px 155px;
	width: min(757px, 100%);
}
.overlay-section__panel h2 { margin: 0 0 18px; font-size: 40px; line-height: normal; }
.overlay-section__panel p { font-size: 15px; line-height: 27px; max-width: 414px; }

/* --- Simple prose page (Work with Us) ----------------------------------- */
.prose-section { padding: 96px 0 110px; background: var(--nora-white); }
.prose-section__inner { max-width: 620px; margin-left: 0; }
.prose-section h2 {
	margin: 0 0 12px;
	font-size: 27px;
	line-height: 1.3;
	color: var(--nora-navy);
}
.prose-section h2:not(:first-child) { margin-top: 52px; }
.prose-section p { font-size: 16px; line-height: 1.8; margin-bottom: 0; }


/* =========================================================================
   10. CAREERS & JOB POSTING PAGES
   ========================================================================= */
.careers { padding: 90px 0 70px; background: var(--nora-white); text-align: center; }
.careers > .container > h1 { font-size: 55px; line-height: 1.05; margin: 0 0 64px; }

.job-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 38px;
	max-width: 1340px;   /* matches the wider grid used on the original page */
	margin: 0 auto;
	padding-inline: var(--gutter);
	text-align: left;
	list-style: none;
}
.job-card {
	background: var(--nora-grey-panel);
	display: grid;
	grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
}
/* A posting without any card image gets the full width instead of an
   empty image slot. */
.job-card:not(:has(> .job-card__media)) { grid-template-columns: 1fr; }
.job-card__media { overflow: hidden; }
.job-card__media img { width: 100%; height: 100%; object-fit: cover; min-height: 282px; }
.job-card__body { padding: 34px 32px 36px; display: flex; flex-direction: column; }
.job-card h2 { margin: 0 0 16px; font-size: 21px; line-height: 1.3; color: var(--nora-navy); }
.job-card p { font-size: 16px; line-height: 1.6; flex: 1 1 auto; margin-bottom: 24px; }
.job-card .btn { align-self: flex-start; }

p.apply-note {
	max-width: 620px;
	margin: 62px auto 0;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.4;
	color: var(--nora-navy);
}
.apply-note a { color: var(--nora-navy); text-decoration: underline; text-underline-offset: 3px; }

/* --- Job posting detail ------------------------------------------------- */
.job-posting { padding: 84px 0 90px; background: var(--nora-white); }
.job-posting__inner { max-width: 800px; margin-left: 0; }
.job-posting h2 { font-size: 27px; margin: 0 0 18px; }
.job-posting h3 { font-size: 22px; margin: 44px 0 14px; color: var(--nora-navy); }
.job-posting h4 { font-size: 19px; margin: 30px 0 10px; color: var(--nora-navy); }
.job-posting p, .job-posting li { font-size: 16px; line-height: 1.7; }
.job-posting ul { padding-left: 1.3em; }
.job-posting li { margin-bottom: 0.4em; }

.job-posting__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 46px;
	margin-top: 52px;
}
.job-posting__columns h3 { margin-top: 0; }

/* --- Job application form ----------------------------------------------- */
.application { background: var(--nora-grey-panel); padding: 60px 0 70px; }
.application__grid {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 62%);
	gap: 30px;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
	align-items: stretch;
}
.application__aside {
	background: var(--nora-blue);
	color: var(--nora-white);
	padding: 70px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.application__aside h2 {
	margin: 0 0 26px;
	font-size: 46px;
	line-height: 1.15;
	color: var(--nora-white);
}
.application__aside .split__rule { margin-bottom: 26px; }
.application__aside p { font-size: 16px; line-height: 1.6; margin: 0; }
.application__form { background: var(--nora-white); padding: 56px 60px 60px; }


/* =========================================================================
   11. FORMS
   Every control has a persistent visible <label> (SC 3.3.2 Labels or
   Instructions), programmatic association (SC 1.3.1 Info & Relationships),
   an autocomplete token (SC 1.3.5 Identify Input Purpose) and inline error
   text tied by aria-describedby (SC 3.3.1 Error Identification / 3.3.3
   Error Suggestion).
   ========================================================================= */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.form-field { margin: 0; display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
	display: block;
	margin-bottom: 9px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;   /* the original bolds its field labels */
	line-height: 1.2;
	letter-spacing: normal;
	color: inherit;
}
.form-field .required-mark { font-weight: 700; }
.form-field .field-hint { font-size: 14px; opacity: 0.9; margin-bottom: 6px; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="search"],
.form-field textarea,
.form-field select {
	width: 100%;
	min-height: 42px;
	padding: 10px 2px;
	font-family: var(--font-body);
	font-size: 13px;   /* the original's size; raised to 16px on touch below */
	line-height: 1.5;
	letter-spacing: normal;
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	appearance: none;
}
.form-field textarea { min-height: 99px; resize: vertical; }

/* iOS zooms the viewport when a control smaller than 16px receives focus, and
   the visitor then has to pinch back out. On touch devices the fields are
   raised to 16px so that never happens; pointer devices keep the original's
   13px. This is the one place the rebuild deliberately diverges by input
   modality rather than by screen size. */
@media (pointer: coarse) {
	.form-field input[type="text"],
	.form-field input[type="email"],
	.form-field input[type="tel"],
	.form-field input[type="url"],
	.form-field input[type="search"],
	.form-field textarea,
	.form-field select {
		font-size: 16px;
		min-height: var(--target-min);
	}
}

/* Boxed variant used on the job application form. */
.form--boxed .form-field input,
.form--boxed .form-field select,
.form--boxed .form-field textarea {
	background: var(--nora-grey-panel);
	border: 1px solid #767676;   /* 4.5:1 vs. white (#b3b3b3 was only 2.1:1) — SC 1.4.11 */
	padding: 10px 12px;
}
.form--boxed .form-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2b6d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	padding-right: 36px;
}

/* Error state — colour is never the only signal: an icon and text are added. */
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
	border-color: var(--nora-focus);
	border-bottom-width: 2px;
}

.field-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 700;
	color: #a60d15;
}
.field-error::before { content: "\26A0"; font-size: 15px; line-height: 1.35; }

.form-status {
	margin-bottom: 26px;
	padding: 16px 20px;
	border-left: 4px solid;
	font-size: 16px;
	line-height: 1.6;
}
.form-status--error   { background: #fff2f2; border-color: #a60d15; color: #7a0a10; }
.form-status--success { background: #eef7ee; border-color: #1d6b2b; color: #14501f; }

.form-required-note { font-size: 13px; line-height: 22px; margin: 0 0 18px; letter-spacing: normal; }
.form-actions { margin-top: 16px; text-align: center; }
.form-actions--left { text-align: left; }

/* Honeypot — hidden from sight but not with display:none, and taken out of
   the tab order and the accessibility tree so it never traps a keyboard or
   screen-reader user. */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}


/* =========================================================================
   12. CONTACT BAND & FOOTER
   ========================================================================= */
.contact-band {
	background: var(--nora-blue);
	color: var(--nora-white);
	padding: 63px 0 84px;
}
.contact-band h2 {
	margin: 0 0 18px;
	font-family: var(--font-band);
	font-weight: 400;
	font-size: 43px;
	line-height: normal;
	letter-spacing: var(--track-body);
	text-align: center;
	color: var(--nora-white);
}
.contact-band__lede {
	max-width: 546px;
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	line-height: 27.2px;
	letter-spacing: var(--track-tight);
}
.contact-band form { max-width: 864px; margin: 7px auto 0; }

/* Redesigned in 1.2.0: the form sits on a white card so fields are real,
   visible controls rather than hairlines on navy (the original Wix look
   read as unfinished). */
.contact-band .contact-card {
	background: var(--nora-white);
	color: var(--nora-ink, #202020);
	text-align: left;
	padding: 44px 48px 40px;
	border-radius: 10px;
	border-top: 4px solid var(--nora-red);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
	margin-top: 34px;
}
.contact-band .contact-card .form-required-note { color: #5a5a5a; }
.contact-band .contact-card .required-mark { color: var(--nora-red); }
.contact-band .contact-card label { color: var(--nora-ink, #202020); }
.contact-band .contact-card .form-field input,
.contact-band .contact-card .form-field textarea {
	background: #fafafa;
	border: 1px solid #8f8f8f;
	border-radius: 5px;
	padding: 11px 14px;
	font-size: 15px;
	color: var(--nora-ink, #202020);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-band .contact-card .form-field input:focus-visible,
.contact-band .contact-card .form-field textarea:focus-visible {
	outline: 2px solid transparent;
	border-color: var(--nora-blue, #033b85);
	box-shadow: 0 0 0 3px rgba(3, 59, 133, 0.25);
	background: var(--nora-white);
}
.contact-band .contact-card .form-field.has-error input,
.contact-band .contact-card .form-field.has-error textarea {
	border-color: #a60d15;
	border-width: 2px;
}
.contact-band .contact-card .form-actions { text-align: right; margin-top: 20px; }
.contact-band .contact-card .btn {
	background: var(--nora-red);
	border-color: var(--nora-red);
	color: var(--nora-white);
	min-width: 190px;
	padding: 14px 34px;
	border-radius: 5px;
}
.contact-band .contact-card .btn:hover,
.contact-band .contact-card .btn:focus-visible { background: var(--nora-red-dark); border-color: var(--nora-red-dark); }
.contact-band .contact-card :where(a, button, input, textarea):focus-visible { outline-color: var(--nora-focus, #d41317); }

@media (max-width: 700px) {
	.contact-band .contact-card { padding: 28px 20px 26px; }
	.contact-band { padding-bottom: 52px; }
	.contact-band .contact-card .form-actions { text-align: center; }
	.contact-band .contact-card .btn { width: 100%; }
}

/* Redesigned in 1.2.0: brand + explore + contact columns over a slim legal
   bar, on a deeper navy so the footer reads as its own region rather than an
   extension of the contact band above it. */
.site-footer {
	background: #02295c;
	color: var(--nora-white);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__inner {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: 52px var(--gutter) 44px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 40px;
}

.site-footer__mark { width: 46px; height: 46px; display: block; margin-bottom: 14px; }
.site-footer__name {
	margin: 0 0 6px;
	font-family: var(--font-display, inherit);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: var(--track-tight);
	color: var(--nora-white);
}
.site-footer__tagline {
	margin: 0;
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.65;
	letter-spacing: var(--track-tight);
	color: rgba(255, 255, 255, 0.78);
}

.site-footer__heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}
.site-footer__nav ul,
.site-footer__contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__nav li,
.site-footer__contact li { margin: 0; }

.site-footer a {
	color: var(--nora-white);
	text-decoration: none;
}
.site-footer__nav a,
.site-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-size: 15px;
	letter-spacing: var(--track-tight);
}
.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.site-footer__contact li:first-child .site-footer__label { margin-top: 0; }

.site-footer__bar {
	background: rgba(0, 0, 0, 0.22);
}
.site-footer__bar-inner {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: 14px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.site-footer__bar p { margin: 0; font-size: 13px; letter-spacing: var(--track-wide); color: rgba(255, 255, 255, 0.75); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: 13px; letter-spacing: var(--track-wide); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
	/* Brand across the top, then Explore and Get in touch side by side. The
	   Explore column only takes the width its links need, so the email
	   addresses get the rest. */
	.site-footer__inner {
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: 24px;
		row-gap: 30px;
		padding-top: 40px;
		padding-bottom: 34px;
	}
	.site-footer__brand { grid-column: 1 / -1; }
	.site-footer__contact { justify-self: end; } /* flush with the right edge */
	.site-footer__contact a { overflow-wrap: anywhere; }
	.site-footer__bar-inner { justify-content: center; text-align: center; }
}

/* Very narrow phones: back to one column. */
@media (max-width: 340px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__contact { justify-self: start; }
}


/* The floating message launcher (Careers plugin) sits 17px from the bottom
   right. Between the mobile layout and ~1325px it covered the Back to top
   button, so taps opened the message window instead (SC 2.4.11 / 2.5.8). */
@media (min-width: 821px) and (max-width: 1325px) {
	.site-footer__bar-inner { padding-right: 96px; }
}

/* =========================================================================
   13. BACK TO TOP
   ========================================================================= */
.back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--target-min);
	height: var(--target-min);
	background: transparent;
	border: 1px solid transparent;
	color: var(--nora-white);
	cursor: pointer;
}
.back-to-top:hover { border-color: rgba(255, 255, 255, 0.7); }
.back-to-top svg { width: 22px; height: 14px; }


/* =========================================================================
   14. ACCESSIBILITY STATEMENT PAGE
   ========================================================================= */
.page-body { padding: 84px 0 96px; background: var(--nora-white); }
.page-body__inner { max-width: 760px; }
.page-body h1 { font-size: 46px; margin-bottom: 28px; }
.page-body h2 { font-size: 26px; margin: 46px 0 14px; }
.page-body h3 { font-size: 20px; margin: 30px 0 10px; }
.page-body p, .page-body li { font-size: 16px; line-height: 1.8; }
.page-body dl { margin: 0 0 1.5em; }
.page-body dt { font-weight: 700; margin-top: 1em; }
.page-body dd { margin: 0 0 0.5em; padding-left: 0; }


/* =========================================================================
   15. RESPONSIVE
   Layout reflows to a single column with no horizontal scrolling at any
   width down to 320px, satisfying SC 1.4.10 Reflow. All type scales with
   the viewport so SC 1.4.4 Resize Text (200%) holds without loss.
   ========================================================================= */

@media (max-width: 1180px) {
	.primary-nav a { padding: 10px 11px; font-size: 15px; }
	.site-header__inner { gap: 16px; }
}

@media (max-width: 1024px) {
	.about-intro__panel { padding: 56px 40px 60px; }
	.overlay-section__panel { padding: 44px 40px 50px; }
	.split__block, .split__copy { padding: 66px 40px; }
	.application__aside { padding: 56px 38px; }
	.application__form { padding: 44px 38px 48px; }
	.connect__panel { padding: 52px 38px 56px; }
}

/* --- Tablet / mobile navigation ---------------------------------------- */
@media (max-width: 900px) {
	:root { --header-h: 84px; }

	.nav-toggle { display: inline-flex; }

	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--nora-white);
		border-top: 1px solid var(--nora-rule);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
		max-height: calc(100vh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		display: none;
	}
	.primary-nav.is-open { display: block; }

	.primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-nav li { border-bottom: 1px solid var(--nora-rule); }
	.primary-nav li:last-child { border-bottom: 0; }
	.primary-nav a { padding: 16px 24px; font-size: 17px; }
	.primary-nav .current-menu-item > a,
	.primary-nav [aria-current="page"] { box-shadow: inset 4px 0 0 0 var(--nora-navy); }

	.primary-nav .sub-menu {
		position: static;
		border: 0;
		box-shadow: none;
		background: var(--nora-grey-panel);
		visibility: visible;
		opacity: 1;
		transform: none;
		padding: 0;
		display: none;
	}
	.primary-nav .sub-menu.is-open { display: block; }
	/* Stack the open submenu under its parent instead of beside it. */
	.primary-nav li { flex-wrap: wrap; }
	.primary-nav li > a { flex: 1 1 auto; padding-right: 64px; }
	.primary-nav .sub-menu { flex: 0 0 100%; }
	.primary-nav .sub-menu a { padding-right: 24px; }
	.primary-nav .sub-menu a { padding: 14px 24px 14px 42px; }

	.submenu-toggle {
		position: absolute;
		right: 12px;
		top: 6px;
		width: var(--target-min);
		height: var(--target-min);
		margin: 0;
	}

	.site-branding img { width: 92px; }
}

@media (max-width: 860px) {
	.hero__media { height: 340px; }
	.hero--titled .hero__panel { bottom: -36px; padding: 24px 26px; }
	.hero--titled .hero__panel h1 { font-size: 34px; }
	.hero--titled ~ .section:first-of-type { padding-top: 78px; }

	.intro { padding: 60px 0 68px; }
	.intro h2 { font-size: 26px; }

	/* Extra foot room so the cards, which still overlap slightly, never sit on
	   top of the lede once everything is stacked. */
	.services { padding: 56px 0 96px; min-height: 0; }
	.services h2 { font-size: 38px; }
	.services__lede { max-width: none; }
	.services__bg::after {
		background: linear-gradient(180deg, rgba(6, 20, 19, 0.9) 0%, rgba(6, 20, 19, 0.92) 100%);
	}

	.service-cards { margin-top: -56px; padding-bottom: 64px; }
	.service-cards__grid { grid-template-columns: 1fr; gap: 26px; max-width: 460px; }
	.service-card::after { display: none; }

	.connect { padding-bottom: 64px; }
	.connect__panel { padding: 44px 26px 48px; }
	.connect__panel h2 { font-size: 36px; margin-bottom: 26px; }
	.connect__body { grid-template-columns: 1fr; gap: 18px; }
	.connect__rule { width: 96px; margin-top: 0; }
	.connect__cta { text-align: left; margin-top: 30px; }

	.about-intro { padding: 40px 0 46px; }
	.about-intro__panel { grid-template-columns: 1fr; padding: 40px 24px 46px; gap: 34px; }
	.about-intro h1 { font-size: 38px; }
	.about-intro__sub { font-size: 22px; }
	.about-intro__mark img { width: 200px; }

	.split { grid-template-columns: 1fr; }
	.split__block { padding: 52px 26px; align-items: flex-start; }
	.split__block h2 { font-size: 38px; }
	.split__copy { padding: 46px 26px 56px; }

	.overlay-section__bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.35);
	}
	.overlay-section__inner { padding: 46px var(--gutter); }
	.overlay-section__panel { padding: 36px 26px 42px; width: 100%; }
	.overlay-section__panel h2 { font-size: 30px; }

	.prose-section { padding: 62px 0 70px; }
	.prose-section h2 { font-size: 23px; }

	.careers { padding: 62px 0 50px; }
	.careers > .container > h1 { font-size: 38px; margin-bottom: 40px; }
	.job-grid { grid-template-columns: 1fr; gap: 26px; }
	.job-card { grid-template-columns: 1fr; }
	.job-card__media img { min-height: 200px; max-height: 240px; }
	p.apply-note { font-size: 18px; margin-top: 44px; }

	.job-posting { padding: 58px 0 64px; }
	.job-posting__columns { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }

	/* minmax(0, 1fr), not 1fr: a bare 1fr track can't shrink below its
	   content's min-width, which pushed the form 25px off a 320px screen. */
	.application__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.application__aside { padding: 44px 26px; }
	.application__aside h2 { font-size: 34px; }
	.application__form { padding: 38px 26px 44px; }

	.contact-band { padding: 56px 0 32px; }
	.contact-band h2 { font-size: 32px; }

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

	.page-body { padding: 58px 0 68px; }
	.page-body h1 { font-size: 34px; }

}

@media (max-width: 560px) {
	:root { --gutter: 18px; }
	.hero__media { height: 260px; }
	.hero--titled .hero__panel h1 { font-size: 28px; }
	.intro h2 { font-size: 23px; line-height: 1.35; }
	.services h2 { font-size: 32px; }
	.connect__panel h2 { font-size: 30px; }
	.split__block h2 { font-size: 32px; }
	.contact-band h2 { font-size: 27px; }
	.cta-split__label { padding: 14px 22px; }
	.btn { width: 100%; }
	.service-card .btn, .job-card .btn { width: auto; }
}




/* =========================================================================
   17. SMALL-SCREEN REFINEMENTS
   The original site was built desktop-first and its phone layout suffered
   for it. Rather than reproduce that, the rebuild treats small screens as a
   first-class layout: comfortable measure, boxed form fields that are far
   easier to see and hit than hairline underlines, generous targets, and
   spacing that breathes. Desktop fidelity is untouched — everything here is
   inside a max-width query.
   ========================================================================= */
@media (max-width: 860px) {

	/* Tracking that reads well on a wide desktop measure gets loose on a
	   narrow column. Ease it off. */
	body { letter-spacing: 0.02em; }
	.intro p,
	.services__lede,
	.service-card p,
	.connect__body p,
	.contact-band__lede { letter-spacing: 0.015em; }

	/* Comfortable measure rather than edge-to-edge text. */
	.intro h1, .intro h2, .intro p,
	.contact-band__lede { max-width: 34rem; }

	/* --- Header ---------------------------------------------------------
	   Keeps the bar compact so more of the page is visible while scrolling. */
	.site-header { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 18px rgba(0, 0, 0, 0.04); }

	.nav-toggle {
		border-radius: 4px;
		padding: 10px 16px;
	}

	.primary-nav { border-top: 3px solid var(--nora-navy); }
	.primary-nav a {
		padding: 17px 24px;
		font-size: 17px;
		font-weight: 700;
	}
	.primary-nav .sub-menu a { font-weight: 400; }

	/* --- Forms ----------------------------------------------------------
	   A 1px underline on a saturated blue field is hard to locate and easy to
	   miss with a thumb. Boxed fields with a real border are clearer, and the
	   border colour clears 3:1 against the band (SC 1.4.11). */
	.contact-band .form-field input,
	.contact-band .form-field textarea {
		padding: 12px 14px;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.85);
		border-radius: 4px;
	}
	.contact-band .form-field input:focus-visible,
	.contact-band .form-field textarea:focus-visible {
		background: rgba(255, 255, 255, 0.16);
	}
	.contact-band .form-field.has-error input,
	.contact-band .form-field.has-error textarea {
		border-color: var(--nora-focus-alt);
		border-width: 2px;
	}

	.form-grid { gap: 20px 0; }
	.form-field label { font-size: 15px; }

	/* The 25px display face on the submit button is a desktop flourish; at
	   this size a plain, tappable button is better. */
	.btn--navy {
		width: 100%;
		max-width: 22rem;
		min-height: 52px;
		font-family: var(--font-body);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0.02em;
	}
	.form-actions { display: flex; justify-content: center; }
	.form-actions--left { justify-content: flex-start; }

	/* --- Cards ---------------------------------------------------------- */
	.service-card {
		min-height: 0;
		padding: 28px 24px 30px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	}
	.service-card p { min-height: 0; margin-bottom: 26px; }
	.service-card .btn { margin-top: 0; }
	.btn--card { min-height: 44px; padding: 8px 18px; }

	.job-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
	.job-card__body { padding: 26px 24px 30px; }

	/* --- Connect -------------------------------------------------------- */
	.connect { padding: 44px 0 56px; }
	.connect__body p { min-height: 0; }

	/* --- About / mission / team ------------------------------------------ */
	.about-intro__panel { min-height: 0; }
	.about-intro__panel > div > p:last-child { min-height: 0; }
	.split__block { min-height: 0; padding: 44px 26px 48px; }
	.split__copy p { font-size: 17px; line-height: 30px; }
	.overlay-section__panel { min-height: 0; }
	.overlay-section__panel p { max-width: none; font-size: 16px; line-height: 28px; }

	/* --- Footer ---------------------------------------------------------- */
	.footer-links { justify-content: center; gap: 8px 22px; }
}

@media (max-width: 560px) {
	.hero--titled .hero__panel {
		width: calc(100% - 2 * var(--gutter));
		padding: 20px 20px;
	}
	.job-posting ul { padding-left: 1.15em; }
	.job-posting li { margin-bottom: 0.55em; }
	.application__aside h2 { font-size: 30px; }
	.connect__cta { text-align: left; padding-right: 0; }
	.cta-split { width: 100%; }
	.cta-split__label { flex: 1 1 auto; min-width: 0; }
}

/* Tall-thumb reach: on short viewports the sticky header eats a lot of the
   screen, so it releases and scrolls away instead. */
@media (max-width: 860px) and (max-height: 520px) {
	.site-header { position: static; }
}


/* =========================================================================
   16. PRINT
   ========================================================================= */
@media print {
	.site-header, .contact-band, .back-to-top, .nav-toggle, .skip-link,
	.services__bg, .overlay-section__bg { display: none !important; }
	body { color: #000; background: #fff; font-size: 12pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
	.section, .split, .job-posting { break-inside: avoid; }
}


/* =========================================================================
   14. OUR SERVICES PAGE
   Added in 1.2.0 — the one deliberate departure from the original site:
   a real services page instead of a home-page anchor.
   ========================================================================= */
.svc.section { padding: 72px 0 100px; }
.svc .container { max-width: 900px; }

.svc__lede {
	max-width: 66ch;
	margin: 0 0 56px;
	font-size: 19px;
	line-height: 1.7;
}

.svc__block { margin: 0 0 58px; }
.svc__rule {
	display: block;
	width: 46px;
	height: 3px;
	margin: 0 0 18px;
	background: var(--nora-red);
}
.svc__block h2 {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: normal;
	color: var(--nora-navy);
}
.svc__block > p {
	max-width: 66ch;
	margin: 0 0 18px;
}

.svc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 720px;
}
.svc__list li {
	position: relative;
	padding: 10px 0 10px 26px;
	border-bottom: 1px solid var(--nora-grey-line, #e2e2e2);
}
.svc__list li:last-child { border-bottom: 0; }
.svc__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 19px;
	width: 8px;
	height: 8px;
	background: var(--nora-navy);
}

.svc__why {
	margin: 8px 0 44px;
	padding: 30px 34px;
	background: var(--nora-grey-panel, #f4f4f4);
	border-left: 4px solid var(--nora-navy);
}
.svc__why h2 {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: normal;
	color: var(--nora-navy);
}
.svc__why p { margin: 0; max-width: 66ch; }

.svc__cta {
	display: flex;
	align-items: center;
	gap: 18px 28px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--nora-grey-line, #e2e2e2);
	font-size: 18px;
}
.svc__cta .btn { flex: 0 0 auto; }

@media (max-width: 820px) {
	.svc__lede { font-size: 17px; margin-bottom: 40px; }
	.svc__block { margin-bottom: 44px; }
	.svc__block h2 { font-size: 26px; }
	.svc__why { padding: 24px 22px; }
	.svc.section { padding: 48px 0 64px; }
}


/* =========================================================================
   15. POLISH
   Added in 1.2.0. Motion is subtle, purposeful, and fully disabled for
   prefers-reduced-motion (the global override in section 3 kills all
   transition durations; the transforms below are also cancelled).
   ========================================================================= */
html { scroll-behavior: smooth; }

.service-card,
.job-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card:hover,
.job-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(3, 59, 133, 0.14);
}

.primary-menu a { transition: color 0.15s ease, box-shadow 0.15s ease; }
.entry-copy a,
.footer-links a { transition: color 0.15s ease; }

.hero__media img {
	transition: none; /* the hero must never move — it is the anchor of the page */
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.service-card:hover,
	.job-card:hover { transform: none; }
}

/* =========================================================================
   Editor content
   -------------------------------------------------------------------------
   Everything below styles what somebody writes in the classic editor: the
   "page-extra" band each template renders, plus the generic page and privacy
   templates. The designed sections above are untouched by any of this.
   ====================================================================== */

.page-extra { padding: 72px 0 84px; background: var(--nora-white); }
.page-extra__inner { max-width: 760px; margin: 0 auto; }
.page-extra h2 { font-size: 30px; margin: 0 0 16px; }
.page-extra h3 { font-size: 22px; margin: 36px 0 12px; }
.page-extra h4 { font-size: 18px; margin: 28px 0 10px; }
.page-extra p,
.page-extra li { font-size: 16px; line-height: 1.8; }

/* ---- Images ---------------------------------------------------------- */

.entry-copy img,
.page-body img,
.page-extra img {
	max-width: 100%;
	height: auto;
}

.entry-copy figure,
.page-body figure,
.page-extra figure { margin: 28px 0; }

.alignnone { display: block; margin: 24px 0; }
.aligncenter { display: block; margin: 24px auto; }

.alignleft {
	float: left;
	margin: 6px 28px 18px 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 6px 0 18px 28px;
	max-width: 50%;
}

.wp-caption { max-width: 100%; margin: 28px 0; }
.wp-caption img { display: block; }

.wp-caption-text,
figcaption {
	font-size: 14px;
	line-height: 1.6;
	color: #5a5a5a;
	margin-top: 8px;
}

/* ---- Video and other iframe embeds ----------------------------------- */

.nora-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 32px 0;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}

.nora-embed > iframe,
.nora-embed > object,
.nora-embed > embed,
.nora-embed > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Keep the paragraph wpautop wraps an embed in from adding a stray gap. */
p > .nora-embed { margin: 0; }

.entry-copy video,
.page-body video,
.page-extra video,
.wp-video,
.mejs-container { max-width: 100%; }

/* ---- Tables ---------------------------------------------------------- */

.entry-copy table,
.page-body table,
.page-extra table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: 15px;
}

.entry-copy th, .entry-copy td,
.page-body th, .page-body td,
.page-extra th, .page-extra td {
	border: 1px solid #d9dde4;
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.entry-copy th,
.page-body th,
.page-extra th {
	background: #f4f6fa;
	font-weight: 600;
	color: var(--nora-blue-text);
}

/* ---- File links ------------------------------------------------------ */
/* SC 2.4.4: say what a link opens when it is not a web page. The suffix is
   real text to assistive technology as well as sighted readers. */

.entry-copy a[href$=".pdf" i]::after,
.page-body a[href$=".pdf" i]::after,
.page-extra a[href$=".pdf" i]::after { content: " (PDF)"; }

.entry-copy a[href$=".doc" i]::after,
.entry-copy a[href$=".docx" i]::after,
.page-body a[href$=".doc" i]::after,
.page-body a[href$=".docx" i]::after,
.page-extra a[href$=".doc" i]::after,
.page-extra a[href$=".docx" i]::after { content: " (Word)"; }

.entry-copy a[href$=".xls" i]::after,
.entry-copy a[href$=".xlsx" i]::after,
.entry-copy a[href$=".csv" i]::after,
.page-body a[href$=".xls" i]::after,
.page-body a[href$=".xlsx" i]::after,
.page-body a[href$=".csv" i]::after,
.page-extra a[href$=".xls" i]::after,
.page-extra a[href$=".xlsx" i]::after,
.page-extra a[href$=".csv" i]::after { content: " (spreadsheet)"; }

.entry-copy a[href$=".zip" i]::after,
.page-body a[href$=".zip" i]::after,
.page-extra a[href$=".zip" i]::after { content: " (ZIP)"; }

/* ---- Galleries ------------------------------------------------------- */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
	margin: 28px 0;
}

.gallery-item { margin: 0; }
.gallery-icon img { width: 100%; height: auto; display: block; }

@media (max-width: 782px) {
	.page-extra { padding: 52px 0 60px; }
	.page-extra h2 { font-size: 26px; }

	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 24px 0;
		max-width: 100%;
	}
}

/* iOS zooms into any field under 16px on focus. The contact card's own 15px
   rule is more specific than the generic touch rule, so restate it here. */
@media (pointer: coarse) {
	.contact-band .contact-card .form-field input,
	.contact-band .contact-card .form-field textarea { font-size: 16px; }
}

/* Wide tables in editor content scroll inside their own box instead of being
   clipped by body { overflow-x: hidden } on a phone (SC 1.4.10). */
@media (max-width: 782px) {
	:is(.entry-copy, .page-body, .page-extra) table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Windows High Contrast drops box-shadow, which is the only current-page cue. */
@media (forced-colors: active) {
	.primary-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
}