/*
Theme Name: Kenzora Capital
Theme URI: https://www.kenzoracapital.com/
Author: Imarisher
Author URI: https://imarisher.com/
Description: Custom WordPress theme for Kenzora Capital Partners Limited, a Nairobi-based trading, procurement and trade finance house. Page content is authored as PHP partials in /content/ and pulled into near-empty WordPress Pages via the [kenzora_content page="slug"] shortcode. Service lines are driven by page hierarchy (children of the Services page) rather than a custom post type. The consultation enquiry form runs on core WordPress with no plugin dependency.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: kenzora
Tags: business, finance, custom-menu, custom-logo, featured-images
*/

/* ==========================================================================
   KENZORA CAPITAL — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Implements the approved design (Claude Design: "Kenzora Capital.dc.html").

   Palette and type are taken from the client's own brand guidelines
   ("Colours and Font Guidelines.pdf"), which the design follows exactly:

       Headings ink ......... #0A143A
       Accent gradient ...... #E3AD67 → #AC7437
       Heading typeface ..... DM Serif Display
       Body typeface ........ Outfit, regular

   The design was supplied as a desktop composition with no mobile spec and no
   breakpoints. Every value below 1100px is therefore derived, not given: the
   fixed desktop grids collapse in a stated order and the display type is set
   in clamp() so it scales rather than jumping at a breakpoint. Section 13
   collects all of it in one place so it can be reviewed as a unit.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Brand ---------------------------------------------------------- */
	--kz-navy: #0A143A;          /* Headings, dark panels, primary button    */
	--kz-navy-hover: #16224F;    /* Primary button hover                     */
	--kz-gold: #AC7437;          /* Links, eyebrows, rules, accents          */
	--kz-gold-light: #E3AD67;    /* Numerals, footer headings, gradient head */

	/* Grounds -------------------------------------------------------- */
	--kz-bg: #FBFAF8;            /* Page background — warm off-white         */
	--kz-sand: #F5EFE7;          /* Tinted section / card hover              */
	--kz-stone: #EFEAE2;         /* Image well before an image is set        */

	/* Text ----------------------------------------------------------- */
	--kz-ink: #1A1F33;           /* Default body text                        */
	--kz-body: #3A4157;          /* Lead paragraphs                          */
	--kz-muted: #5A6072;         /* Secondary copy, inactive nav             */

	/* Lines and washes ----------------------------------------------- */
	--kz-rule: rgba(10, 20, 58, 0.12);
	--kz-rule-strong: rgba(10, 20, 58, 0.25);
	--kz-rule-light: rgba(255, 255, 255, 0.14);
	--kz-gold-wash: rgba(227, 173, 103, 0.16);
	--kz-gold-rule: rgba(172, 116, 55, 0.40);

	/* On-dark text --------------------------------------------------- */
	--kz-on-dark: #FBFAF8;
	--kz-on-dark-90: rgba(255, 255, 255, 0.90);
	--kz-on-dark-72: rgba(255, 255, 255, 0.72);
	--kz-on-dark-66: rgba(255, 255, 255, 0.66);
	--kz-on-dark-55: rgba(255, 255, 255, 0.55);
	--kz-on-dark-42: rgba(255, 255, 255, 0.42);

	/* Type ----------------------------------------------------------- */
	--kz-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--kz-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Fluid display sizes. The upper bound of each is the design's own
	   desktop value; the lower bound is the derived mobile size. */
	--kz-h1-home: clamp(60px, 7.2vw, 78px);
	--kz-h1: clamp(38px, 6.4vw, 70px);
	--kz-h1-service: clamp(36px, 6vw, 66px);
	--kz-h2: clamp(30px, 3.9vw, 44px);
	--kz-h2-sm: clamp(28px, 3.6vw, 42px);
	--kz-h2-cta: clamp(26px, 3.4vw, 40px);
	--kz-mission: clamp(23px, 2.7vw, 32px);

	/* Layout --------------------------------------------------------- */
	--kz-max: 1300px;
	--kz-gutter: 40px;

	/* Header has two states. At rest it is tall with a large centred logo;
	   once the page scrolls it condenses so it costs less vertical space.
	   main.js adds .is-stuck past the scroll threshold — see section 6. */
	--kz-header-h: 108px;
	--kz-header-h-stuck: 76px;
	--kz-logo-h: 66px;
	--kz-logo-h-stuck: 42px;
}


/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

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

/* Anchored jumps (the enquiry form, the status banner) must clear the sticky
   header rather than landing underneath it. Measured against the CONDENSED
   height: any anchor jump happens mid-page, where the header is already
   stuck and therefore short. */
:target {
	scroll-margin-top: calc(var(--kz-header-h-stuck) + 24px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
	padding: 0;
}

body {
	background: var(--kz-bg);
	color: var(--kz-ink);
	font-family: var(--kz-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	min-height: 100vh;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
	/* font-family: var(--kz-serif); */
	font-family: Outfit;
	font-weight: 600;
	color: var(--kz-navy);
	letter-spacing: -0.015em;
	line-height: 1.12;
}

h1 {
	/* font-family: var(--kz-serif); */
	font-family: Outfit;
	font-weight: 800;
}

ul[class],
ol[class] {
	list-style: none;
}

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/*
 * Fieldsets arrive with a groove border, asymmetric padding and — the one that
 * actually breaks layouts — an intrinsic minimum width that refuses to shrink
 * inside a grid or flex parent. The service-line chooser is a fieldset, so all
 * three have to go.
 */
fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

legend {
	padding: 0;
	display: block;
}

button {
	cursor: pointer;
}

a {
	color: var(--kz-gold);
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

a:hover {
	color: var(--kz-navy);
}

table {
	border-collapse: collapse;
	width: 100%;
}

::selection {
	background: rgba(227, 173, 103, 0.35);
}

:focus-visible {
	outline: 2px solid var(--kz-gold);
	outline-offset: 2px;
}

@keyframes kz-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

/*
 * The design's one piece of motion: a single fade-and-rise on page load.
 *
 * FILL MODE IS `backwards`, NOT `both`, AND THAT IS LOAD-BEARING. `both` also
 * fills forwards, which holds the `to` keyframe on the element for good — and
 * that keyframe sets `transform: none`, which an animation in its fill phase
 * computes to the identity matrix rather than to no transform at all. A
 * transform of any kind, identity included, makes the element the containing
 * block for `position: fixed` descendants.
 *
 * The full-bio dialogs on About (section 9) are fixed and sit inside .kz-main,
 * because the content partial they live in is rendered by the_content(). Under
 * `both` they were laid out against .kz-main instead of the viewport: a
 * page-tall sheet whose copy sat thousands of pixels above whatever the
 * visitor was looking at, with the navy footer showing below it. Opening one
 * looked like the page had gone black.
 *
 * Filling backwards keeps what the fade actually needs — the `from` values
 * before the animation starts — and drops the forwards fill, which was never
 * doing anything visible, since the `to` frame is just the element's own
 * resting state. Do not put this back to `both`, and do not add a transform,
 * filter, backdrop-filter, `will-change` or `contain` to .kz-main or anything
 * above it. See README §14.
 */
.kz-main {
	animation: kz-rise 0.5s ease backwards;
}

/* Standard section rhythm. Variants adjust it where the design does. */
.kz-section {
	padding-block: 92px;
}

.kz-section--tight {
	padding-block: 76px;
}

.kz-section--flush-top {
	padding-top: 0;
}

.kz-section--ruled {
	border-top: 1px solid var(--kz-rule);
}

.kz-section--sand {
	background: var(--kz-sand);
	border-top: 1px solid rgba(10, 20, 58, 0.10);
}

.kz-section--navy {
	background: var(--kz-navy);
	color: var(--kz-on-dark);
}

.kz-section--navy h1,
.kz-section--navy h2,
.kz-section--navy h3 {
	color: var(--kz-on-dark);
}

/* Page-intro band: big headline beside a supporting paragraph. */
.kz-pagehead {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 72px;
	align-items: end;
	padding-block: 96px 75px;
}

.kz-pagehead--home {
	padding-block: 104px 72px;
}

.kz-pagehead__aside {
	padding-bottom: 10px;
}

/*
 * The Contact hero carries the message form in its aside, so the aside gets
 * the wider track and both columns hang from the top rather than sitting on
 * a shared baseline. No !important here: section 13 has to be able to
 * collapse this to one column.
 */
/*
 * A tinted band behind a page hero. The colour must sit here rather than on
 * .kz-pagehead, because .kz-pagehead is also the .kz-container — tinting it
 * would stop the colour at the container's max-width instead of running it
 * to both edges of the viewport.
 */
.kz-pagehead-band {
	background: var(--kz-sand);
}

.kz-pagehead--contact {
	grid-template-columns: 1fr 1.35fr;
	align-items: start;
}


/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

.kz-eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kz-gold);
	margin-bottom: 26px;
}

.kz-eyebrow--tight {
	letter-spacing: 0.20em;
	margin-bottom: 22px;
}

.kz-section--navy .kz-eyebrow,
.kz-footer .kz-eyebrow {
	color: var(--kz-gold-light);
}

.kz-h1 {
	font-size: var(--kz-h1);
	line-height: 1.04;
	margin: 0;
}

.kz-h1--home {
	font-size: var(--kz-h1-home);
	line-height: 1.02;
}

.kz-h1--service {
	font-size: var(--kz-h1-service);
	line-height: 1.05;
	max-width: 1000px;
}

.kz-h2 {
	font-size: var(--kz-h2);
	line-height: 1.1;
	margin: 0;
}

.kz-h2--sm {
	font-size: var(--kz-h2-sm);
	line-height: 1.12;
}

.kz-lead {
	font-size: 19px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--kz-navy);
	margin: 0 0 20px;
}

.kz-intro {
	font-size: 15px;
	line-height: 1.75;
	color: var(--kz-muted);
	margin: 0;
}

.kz-prose p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--kz-body);
	margin: 0 0 22px;
	text-wrap: pretty;
}

.kz-prose p + p {
	color: var(--kz-muted);
}

.kz-prose p:last-child {
	margin-bottom: 0;
}

/* Justified body copy, as drawn. Justification without hyphenation opens
   rivers in narrow columns, so it is switched off below the two-column
   breakpoint in section 13. */
.kz-prose--justify p {
	text-align: justify;
	hyphens: auto;
}

/* The short gold rule used under section eyebrows. */
.kz-rule-gold {
	width: 64px;
	height: 2px;
	border: 0;
	background: linear-gradient(90deg, var(--kz-gold-light), var(--kz-gold));
	margin: 32px 0 0;
}

.kz-section__header {
	margin-bottom: 56px;
}

.kz-section__header--split {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 24px;
}

.kz-section__intro {
	font-size: 15px;
	line-height: 1.75;
	color: var(--kz-muted);
	margin: 16px 0 0;
	max-width: 640px;
}

.kz-textlink {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kz-gold);
	border-bottom: 1px solid var(--kz-gold-rule);
	padding-bottom: 4px;
}

.kz-textlink:hover {
	color: var(--kz-navy);
	border-bottom-color: var(--kz-navy);
}


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.kz-button {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 15px 26px;
	border: 1px solid transparent;
	text-align: center;
}

.kz-button--primary {
	background: var(--kz-navy);
	color: var(--kz-on-dark);
}

.kz-button--primary:hover {
	background: var(--kz-navy-hover);
	color: var(--kz-on-dark);
}

.kz-button--secondary {
	color: var(--kz-navy);
	border-color: rgba(10, 20, 58, 0.28);
}

.kz-button--secondary:hover {
	border-color: var(--kz-gold);
	background: rgba(227, 173, 103, 0.12);
	color: var(--kz-navy);
}

.kz-button--outline {
	color: var(--kz-navy);
	border-color: var(--kz-gold);
	padding: 13px 24px;
}

/*
 * .kz-button on a real <button> — the "Read full bio" trigger on About is the
 * only one; every other use is an <a>. Neither of the two transparent variants
 * sets a background, so on a <button> the UA's own buttonface grey shows
 * through. Scoped to those two variants rather than written as
 * `button.kz-button`, which at (0,1,1) would outrank .kz-button--primary's own
 * background at (0,1,0) and flatten the primary button too.
 */
button.kz-button--secondary,
button.kz-button--outline {
	background-color: transparent;
}

.kz-button--outline:hover {
	background: rgba(227, 173, 103, 0.20);
	color: var(--kz-navy);
}

/* Gold gradient — used only inside the navy service CTA panels, where a flat
   outline would not carry enough contrast. */
.kz-button--gradient {
	background: linear-gradient(135deg, var(--kz-gold-light), var(--kz-gold));
	color: var(--kz-navy);
	padding: 14px 26px;
}

.kz-button--gradient:hover {
	background: linear-gradient(135deg, var(--kz-gold-light), var(--kz-gold-light));
	color: var(--kz-navy);
}

.kz-button--large {
	font-size: 12px;
	letter-spacing: 0.14em;
	padding: 19px 40px;
}

.kz-button-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
}


/* --------------------------------------------------------------------------
   6. Header and navigation
   --------------------------------------------------------------------------
   Menu left, logo centred, CTA right — requested after the design was signed
   off. The supplied composition had the logo left and the menu right.
   -------------------------------------------------------------------------- */

/*
 * z-index 61 puts the header above the mobile drawer's scrim (60), which is
 * what keeps the MENU toggle undimmed and clickable while the drawer is open —
 * it is the drawer's close control, so it cannot be covered. The drawer itself
 * is 62, above the header, so the header's own logo and background never show
 * through the panel.
 */
.kz-header {
	position: sticky;
	top: 0;
	z-index: 61;
	background: rgba(251, 250, 248, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--kz-rule);
}

/*
 * Three columns: nav left, logo centred, actions right.
 *
 * The side columns are both 1fr, so they are always equal width and the centre
 * column sits on the true centre of the container — the logo stays centred no
 * matter how long the menu gets or how wide the CTA is. A flex row with
 * space-between could not do this: it would centre the logo between its
 * neighbours, which drifts off-centre as soon as the two sides differ.
 *
 * This is the DESKTOP arrangement only. Below 900px the nav and CTA drop out,
 * and section 13 rebuilds the header as two columns — logo left, toggle right.
 */
.kz-header__inner {
	height: var(--kz-header-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	transition: height 0.28s ease;
}

/*
 * Columns are pinned explicitly rather than left to auto-placement.
 *
 * This matters because the nav is display:none below 900px, and a display:none
 * grid item is removed from the grid altogether — it does not leave its cell
 * behind. With auto-placement the brand would then slide into column 1 and the
 * actions into column 2, leaving column 3 empty: the logo lands in the left
 * third and the toggle in the middle. Naming the columns keeps every item where
 * it belongs no matter which siblings are hidden.
 */
.kz-header__nav {
	grid-column: 1;
	justify-self: start;
	min-width: 0;
}

.kz-header__brand {
	grid-column: 2;
	justify-self: center;
	display: flex;
	align-items: center;
}

.kz-logo,
.kz-header__brand .custom-logo-link {
	display: flex;
	align-items: center;
	gap: 14px;
}

/*
 * The height is driven by a variable so the at-rest and condensed sizes live
 * together in the token block. width:auto keeps the aspect ratio; the explicit
 * width/height attributes on the <img> stop it reserving the wrong box before
 * the CSS applies.
 */
.kz-logo img,
.kz-header__brand .custom-logo {
	height: var(--kz-logo-h);
	width: auto;
	display: block;
	transition: height 0.28s ease;
}

.kz-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 20px;
}

/*
 * Condensed state. main.js adds .is-stuck once the page has scrolled past the
 * threshold; everything else about the header is unchanged, so this is purely
 * a size swap.
 */
.kz-header.is-stuck .kz-header__inner {
	height: var(--kz-header-h-stuck);
}

.kz-header.is-stuck .kz-logo img,
.kz-header.is-stuck .kz-header__brand .custom-logo {
	height: var(--kz-logo-h-stuck);
}

.kz-nav--primary .kz-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-nav--primary a {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kz-muted);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	display: inline-block;
}

.kz-nav--primary a:hover {
	color: var(--kz-navy);
}

/*
 * Active state. One selector covers both nav renders: wp_nav_menu gets
 * aria-current through the nav_menu_link_attributes filter, and the
 * hard-coded fallback list sets the same attribute directly.
 */
.kz-nav a[aria-current="page"] {
	color: var(--kz-navy);
	border-bottom-color: var(--kz-gold);
}

.kz-header__cta {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kz-navy);
	border: 1px solid var(--kz-gold);
	padding: 13px 22px;
	white-space: nowrap;
}

.kz-header__cta:hover {
	background: var(--kz-gold-wash);
	color: var(--kz-navy);
}

/* Mobile toggle — hidden on desktop, shown by the breakpoints in section 13. */
.kz-nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--kz-rule);
	padding: 11px 16px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kz-navy);
}

.kz-nav-toggle:hover {
	border-color: var(--kz-gold);
}

.kz-nav-toggle__bars {
	position: relative;
	width: 16px;
	height: 9px;
	flex: none;
}

.kz-nav-toggle__bars::before,
.kz-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--kz-navy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.kz-nav-toggle__bars::before {
	top: 0;
}

.kz-nav-toggle__bars::after {
	bottom: 0;
}

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

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

/*
 * MOBILE MENU DRAWER
 *
 * A modal panel: full viewport height, 75% of the viewport width, entering from
 * the left over a scrim that dims the rest of the page. The markup is a sibling
 * of .kz-header rather than a child of it — see the note in header.php.
 *
 * Closed state is transform + visibility rather than display:none, because
 * display cannot be transitioned. visibility is the part that matters for
 * behaviour: a translated-away panel is still focusable and still read by a
 * screen reader, so hiding it is what actually takes it out of the tab order
 * between opens.
 *
 * VISIBILITY IS SWITCHED BY DELAY, NOT DURATION, and the two directions differ:
 *
 *   opening — 0s, no delay, so the panel is visible on the same tick the class
 *             lands. main.js focuses into the drawer synchronously right after
 *             adding it, and .focus() on a visibility:hidden element is a
 *             silent no-op that would strand focus on <body>.
 *   closing — 0s after a 0.32s delay, so the panel stays on screen for the
 *             whole slide-out and is hidden exactly on arrival.
 *
 * A plain `visibility 0.32s` would nearly work — the spec holds "visible"
 * across a transition with one visible endpoint — but only strictly between 0
 * and 1: at t=0 the value is still the start value, which is the tick that
 * matters here.
 */
.kz-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(10, 20, 58, 0.48);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.kz-nav-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.32s ease, visibility 0s linear 0s;
}

.kz-nav-mobile {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 75%;
	z-index: 62;
	background: var(--kz-bg);
	border-right: 1px solid var(--kz-rule);
	box-shadow: 0 0 60px rgba(10, 20, 58, 0.18);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.32s;
}

.kz-nav-mobile.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

/*
 * The scroll container. height:100% + overflow-y on the inner element rather
 * than on the panel keeps the panel's own box fixed to the viewport while a
 * long menu scrolls inside it. overscroll-behavior stops a flick at the end of
 * that scroll from chaining through to the page underneath.
 */
.kz-nav-mobile__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px var(--kz-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
}

.kz-nav-mobile__head {
	padding-bottom: 26px;
	border-bottom: 1px solid var(--kz-rule);
}

/* Sized independently of the header mark, and much larger than it: in here the
   logo is the panel's masthead rather than one item in a row. The drawer does
   not condense on scroll either, so it does not use the --kz-logo-h pair. */
.kz-nav-mobile__brand .kz-logo img,
.kz-nav-mobile__brand .custom-logo {
	height: 85px;
	width: auto;
	display: block;
}

.kz-nav-mobile .kz-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

/*
 * Scoped to the menu list, NOT to every anchor in the panel. The panel also
 * contains the "Request a consultation" button and the contact links, and a
 * bare `.kz-nav-mobile a` rule (specificity 0,1,1) would outrank
 * `.kz-button--primary` (0,1,0) and flatten the button into a muted link.
 */
.kz-nav-mobile .kz-nav__list a {
	display: block;
	padding: 16px 0;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kz-muted);
	border-bottom: 1px solid var(--kz-rule);
}

.kz-nav-mobile .kz-nav__list a[aria-current="page"] {
	color: var(--kz-navy);
}

/*
 * margin-top:auto pins the foot to the bottom of the drawer while the menu is
 * short, and releases it to follow the menu once the content is tall enough to
 * scroll — which a bottom-anchored absolute block could not do. The gap it
 * opens sits between the CTA and the contacts, so both stay put: the button
 * under the last menu item, the contacts against the bottom edge.
 */
.kz-nav-mobile__foot {
	margin-top: auto;
	padding-top: 40px;
}

.kz-nav-mobile__cta {
	margin-top: 22px;
}

.kz-nav-mobile__cta .kz-button {
	display: block;
	text-align: center;
}

.kz-nav-mobile__heading {
	font-family: var(--kz-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-navy);
	margin-bottom: 16px;
}

.kz-nav-mobile__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

/* Same icon-column grid as the footer's contact list, and align-items:start
   for the same reason: the pin sits against the first line of a wrapping
   address rather than floating to its vertical middle. */
.kz-nav-mobile__contact {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	align-items: start;
}

/* .kz-contact-icon is gold-light for the navy footer; on this light ground it
   needs the darker gold to hold contrast. */
.kz-nav-mobile__contact .kz-contact-icon {
	color: var(--kz-gold);
}

/*
 * Deliberately not scoped to `a`: kenzora_the_phone() emits a <span> rather
 * than a link while the number is still the "[to be confirmed]" placeholder,
 * and that span needs the same treatment.
 */
.kz-nav-mobile__detail {
	display: block;
	font-size: 14px;
	color: var(--kz-muted);
}

/* Scoped to anchors, so the placeholder span is not advertised as clickable. */
a.kz-nav-mobile__detail:hover {
	color: var(--kz-navy);
}

.kz-nav-mobile__address {
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
	color: var(--kz-muted);
	font-style: normal;
}

/* Scroll lock. Set on <body> by main.js while the drawer is open, so the page
   behind the scrim cannot be scrolled away underneath it. */
body.kz-nav-open {
	overflow: hidden;
}

/*
 * Desktop takes the drawer out of the document entirely. A min-width query in
 * among the base rules rather than in section 13, which is max-width
 * throughout: this is the one rule that has to fire ABOVE the breakpoint, and
 * inverting it into section 13 would mean the drawer's default state was
 * "removed" and every mobile rule had to put it back.
 */
@media (min-width: 901px) {

	.kz-nav-mobile,
	.kz-nav-scrim {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   7. Image wells
   --------------------------------------------------------------------------
   The design's <image-slot> elements become these. An unfilled well shows the
   stone ground; editors additionally see the art-direction note that shipped
   with the design, so they know what belongs there. Visitors never see it.
   -------------------------------------------------------------------------- */

.kz-imagewell {
	position: relative;
	width: 100%;
	background: var(--kz-stone);
	overflow: hidden;
}

.kz-imagewell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kz-imagewell--band {
	height: 520px;
}

.kz-imagewell--band-sm {
	height: 440px;
}

.kz-imagewell--band-xs {
	height: 420px;
}

.kz-imagewell--split {
	min-height: 620px;
	height: 100%;
}

.kz-imagewell--about {
	min-height: 480px;
	height: 100%;
}

/* Fills the height of its grid track, so the image squares up with the
   column of copy beside it. */
.kz-imagewell--fill {
	height: 100%;
	min-height: 420px;
}

/*
 * Leadership portraits. 533px is the design's own 400px plus a third, asked for
 * after seeing the real photographs in place; the dialog's larger portrait in
 * section 9 is scaled by the same third, so the step up from card to dialog
 * survived the change.
 *
 * There was a second, shorter variant here — --portrait-sm, 260px and then
 * 347px — for the smaller of the two leadership cards. Both cards are the same
 * size now (see section 9), so nothing used it and it has gone.
 */
.kz-imagewell--portrait {
	height: 533px;
}

/*
 * Portraits crop from the top; everything else stays centred.
 *
 * `object-fit: cover` above trims whatever does not fit the well, and by
 * default it trims evenly from both ends. On a head-and-shoulders photograph
 * that takes the crop off the top of the head first — the one part that cannot
 * be lost — and the taller the well, the more it takes. Anchoring to the top
 * spends the whole overflow on the bottom of the frame instead.
 *
 * Scoped to the portrait wells: the atmospheric bands are composed to be read
 * from the middle, and pinning those to the top would crop them wrongly.
 */
.kz-imagewell--portrait img {
	object-position: top;
}

/* The sand mat the design draws around certain images. */
.kz-imageframe {
	background: var(--kz-sand);
	padding: 14px;
}

.kz-imageframe--tight {
	padding: 12px;
}

.kz-imagewell__hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(10, 20, 58, 0.42);
	border: 1px dashed rgba(10, 20, 58, 0.20);
}


/* --------------------------------------------------------------------------
   8. Home page components
   -------------------------------------------------------------------------- */

/* At a glance ------------------------------------------------------ */
.kz-glance {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 80px;
}

/* Service cards ---------------------------------------------------- */

/*
 * The hairline grid: a 1px gap over a rule-coloured background, so the cell
 * borders are the background showing through. Cheaper and more even than
 * bordering each card, and it never doubles up on shared edges.
 */
.kz-cardgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--kz-rule);
	border: 1px solid var(--kz-rule);
}

.kz-servicecard {
	background: var(--kz-bg);
	padding: 38px 32px 34px;
	display: flex;
	flex-direction: column;
	min-height: 300px;
}

.kz-servicecard:hover {
	background: var(--kz-sand);
}

.kz-servicecard__num {
	font-family: var(--kz-serif);
	font-size: 34px;
	line-height: 1;
	color: var(--kz-gold-light);
	margin-bottom: 28px;
}

.kz-servicecard__title {
	font-size: 25px;
	line-height: 1.2;
	margin: 0 0 16px;
}

.kz-servicecard__blurb {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0 0 26px;
}

.kz-servicecard__more {
	margin-top: auto;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-gold);
}

/* Why Kenzora ------------------------------------------------------ */
.kz-why {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 80px;
}

.kz-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-why__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid var(--kz-rule-light);
}

.kz-why__num {
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--kz-gold-light);
	padding-top: 5px;
}

.kz-why__text {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--kz-on-dark-90);
	margin: 0;
}

/* Industries ------------------------------------------------------- */
.kz-industries {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: stretch;
}

.kz-industries__media {
	display: flex;
}

.kz-industries__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-industry {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 20px;
	padding: 18px 0;
	border-top: 1px solid var(--kz-rule);
}

.kz-industry__name {
	font-family: var(--kz-serif);
	font-size: 19px;
	color: var(--kz-navy);
}

.kz-industry__detail {
	font-size: 14px;
	line-height: 1.65;
	color: var(--kz-muted);
}


/* --------------------------------------------------------------------------
   9. About page components
   -------------------------------------------------------------------------- */

.kz-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.kz-split__panel {
	background: var(--kz-navy);
	color: var(--kz-on-dark);
	padding: 76px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * Body copy in the panel. Both paragraphs are set identically — 17px at 90%
 * white — rather than the second being stepped down to 15px/66%.
 *
 * Two things this selector is careful about:
 *
 * 1. `:not(.kz-eyebrow)`. The panel opens with an eyebrow, which is also a <p>.
 *    A bare `.kz-split__panel p` is (0,1,1) and outranks `.kz-eyebrow` (0,1,0),
 *    so it was overriding that eyebrow's own 11px gold with 17px near-white and
 *    rendering it as a heading.
 *
 * 2. `:last-child` rather than `p + p` for the closing margin. There is a
 *    <br class="kz-rule-gold"> between the two paragraphs, which breaks
 *    adjacency: `p + p` matched the FIRST paragraph (it follows the eyebrow)
 *    and missed the second — the opposite of the intent.
 */
.kz-split__panel p:not(.kz-eyebrow) {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--kz-on-dark-90);
}

.kz-split__panel p:not(.kz-eyebrow):last-child {
	margin-bottom: 0;
}

.kz-mission {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
}

.kz-mission__statement {
	font-family: var(--kz-serif);
	font-size: var(--kz-mission);
	line-height: 1.35;
	color: var(--kz-navy);
	margin: 0;
}

.kz-approach {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-approach__item {
	border-top: 2px solid var(--kz-gold);
	padding-top: 22px;
}

.kz-approach__title {
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 14px;
}

.kz-approach__text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0;
}

/*
 * Leadership.
 *
 * THE TWO CARDS ARE IDENTICAL, and that is a decision, not an oversight. The
 * original content brief asked for Simon Mwangi to carry more visual weight
 * than Andrew Mura — "listed first and/or given greater visual weight" — and
 * this grid was built asymmetric for it: 1.4fr against 1fr, a larger portrait
 * and a larger heading on the lead card. The client has since asked for the two
 * to match. Simon is still listed first, which is the other half of what the
 * brief allowed, so the requirement is still met by order rather than by size.
 *
 * Both cards converge on what the lead card used to be — the larger portrait
 * and heading — rather than meeting in the middle, so nothing shrank.
 *
 * If the emphasis is ever wanted back, it goes here and in the markup together:
 * re-adding a ratio without re-adding the card modifiers, or the reverse, gets
 * you half of it.
 */
.kz-leadership {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 52px;
	align-items: start;
	list-style: none;
	padding: 0;
}

.kz-person {
	border-top: 1px solid rgba(10, 20, 58, 0.14);
	padding-top: 28px;
}

.kz-person__role {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kz-gold);
	margin-bottom: 12px;
}

.kz-person__name {
	font-size: clamp(30px, 3.3vw, 38px);
	line-height: 1.1;
	margin: 0 0 16px;
}

.kz-person__bio {
	font-size: 15px;
	line-height: 1.75;
	color: var(--kz-muted);
	margin: 0 0 18px;
	max-width: 620px;
}

.kz-person__email {
	font-size: 14px;
	border-bottom: 1px solid var(--kz-gold-rule);
	padding-bottom: 3px;
}

.kz-person__portrait {
	margin-bottom: 26px;
}

/* The "Read full bio" trigger. A block of its own under the email link, which
   is inline — without this the button would try to sit beside it. */
.kz-person__actions {
	margin: 22px 0 0;
}

.kz-person__more {
	cursor: pointer;
}


/*
 * FULL-BIO DIALOG
 *
 * A modal that covers the whole viewport rather than a centred card: the
 * biographies run to several paragraphs beside a portrait, which a boxed
 * dialog would either crop or turn into a scrolling letterbox. Covering the
 * page also means no scrim is needed — the sheet is opaque, in the page's own
 * ground, so it reads as a page rather than as something floating over one.
 *
 * z-index 70 clears the header (61) and the mobile drawer (62). The header is
 * deliberately NOT left visible: its MENU toggle would open a second modal
 * underneath this one.
 *
 * THIS IS FIXED INSIDE .kz-main, which means .kz-main must never become a
 * containing block for fixed descendants. That is not theoretical — it was one,
 * via its own page-load animation, and this dialog laid out against the page
 * instead of the viewport. See the note at .kz-main in section 3.
 *
 * Closed state follows the drawer's idiom exactly — opacity plus visibility,
 * switched by DELAY rather than duration, for the same two reasons documented
 * at .kz-nav-scrim in section 6: visibility is what takes the dialog's links
 * and close button out of the tab order between opens, and it has to flip to
 * "visible" on the same tick the class lands, because main.js focuses the
 * dialog synchronously right afterwards.
 */
.kz-bio {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: var(--kz-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.kz-bio.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.28s ease, visibility 0s linear 0s;
}

/*
 * The close bar stays put while the biography scrolls under it. It is the only
 * way out besides Escape, so it must not be something the visitor has to
 * scroll back up to find.
 */
.kz-bio__bar {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--kz-bg);
	border-bottom: 1px solid var(--kz-rule);
}

.kz-bio__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--kz-header-h-stuck);
}

/* The eyebrow's own 22px bottom margin would push it off-centre in a flex row
   that is vertically centred. */
.kz-bio__eyebrow {
	margin: 0;
}

.kz-bio__close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid var(--kz-rule);
	padding: 11px 16px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kz-navy);
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.kz-bio__close:hover {
	border-color: var(--kz-gold);
	background: rgba(227, 173, 103, 0.12);
}

/* Same construction as the nav toggle's bars, already crossed. */
.kz-bio__close-icon {
	position: relative;
	width: 14px;
	height: 14px;
	flex: none;
}

.kz-bio__close-icon::before,
.kz-bio__close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--kz-navy);
}

.kz-bio__close-icon::before {
	transform: rotate(45deg);
}

.kz-bio__close-icon::after {
	transform: rotate(-45deg);
}

/* Portrait beside the copy, in the same 1.4:1 proportion the leadership grid
   uses — reversed, because here the portrait is the narrower column. */
.kz-bio__inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: start;
	padding-block: 72px 96px;
}

.kz-bio__portrait .kz-imagewell--portrait {
	height: 613px;
}

.kz-bio__body {
	max-width: 680px;
}

/* The rule sits between the name and the first paragraph, so its own 32px top
   margin is all the separation needed above it. */
.kz-bio__body .kz-rule-gold {
	margin-bottom: 36px;
}

.kz-bio__text {
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--kz-body);
	margin: 0 0 22px;
}

.kz-bio__text:last-of-type {
	margin-bottom: 30px;
}

/* Scroll lock. Set on <body> by main.js while a dialog is open. Separate from
   .kz-nav-open rather than shared: the two modals can be closed in either
   order after a resize, and one releasing the other's lock would leave the
   page unscrollable. */
body.kz-bio-open {
	overflow: hidden;
}


/* --------------------------------------------------------------------------
   10. Services index and service pages
   -------------------------------------------------------------------------- */

.kz-servicerows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 0px solid var(--kz-rule);
}

.kz-servicerow {
	display: grid;
	grid-template-columns: 90px 1fr 1.1fr 44px;
	gap: 32px;
	align-items: center;
	padding: 38px var(--kz-gutter);
	max-width: var(--kz-max);
	margin-inline: auto;
	border-bottom: 1px solid var(--kz-rule);
}

.kz-servicerow:hover {
	background: var(--kz-sand);
}

.kz-servicerow__num {
	font-family: var(--kz-serif);
	font-size: 30px;
	line-height: 1;
	color: var(--kz-gold-light);
}

.kz-servicerow__title {
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	margin: 0;
}

.kz-servicerow__blurb {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0;
}

.kz-servicerow__arrow {
	font-size: 22px;
	color: var(--kz-gold);
	text-align: right;
}

/* Breadcrumb ------------------------------------------------------- */
.kz-breadcrumb {
	padding-block: 40px 0;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kz-muted);
}

.kz-breadcrumb__sep {
	padding: 0 10px;
	color: rgba(10, 20, 58, 0.3);
}

/* Service detail --------------------------------------------------- */
.kz-servicehead {
	padding-block: 48px 72px;
}

.kz-servicehead__num {
	font-family: var(--kz-serif);
	font-size: 30px;
	line-height: 1;
	color: var(--kz-gold-light);
	margin-bottom: 20px;
}

/* Every service page uses the same split: image left, text right at desktop
   width. The DOM order is image-first, so the stacked layout below opens with
   the image on every page too. */
.kz-servicebody {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--kz-rule);
}

.kz-servicebody__text {
	padding: 76px 64px;
}

.kz-covers {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-covers__item {
	padding: 18px 0;
	border-bottom: 1px solid var(--kz-rule);
	font-size: 15px;
	color: var(--kz-navy);
}

.kz-covers-label {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kz-gold);
	margin-bottom: 8px;
}

/* In-page CTA panels ----------------------------------------------- */
.kz-panel {
	margin-top: 44px;
	padding: 40px;
}

.kz-panel--navy {
	background: var(--kz-navy);
}

.kz-panel--navy .kz-panel__title {
	color: var(--kz-on-dark);
}

.kz-panel--navy .kz-panel__text {
	color: var(--kz-on-dark-66);
}

.kz-panel--sand {
	background: var(--kz-sand);
	border-left: 2px solid var(--kz-gold);
}

.kz-panel__title {
	font-size: 28px;
	line-height: 1.2;
	margin: 0 0 12px;
}

.kz-panel--sand .kz-panel__title {
	font-size: 26px;
}

.kz-panel__text {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0 0 26px;
}

.kz-panel--sand .kz-panel__text {
	margin-bottom: 24px;
}


/* --------------------------------------------------------------------------
   11. Contact and enquiry form
   -------------------------------------------------------------------------- */

/*
 * auto-fit rather than a fixed `1fr 1fr 1fr`. The cells are the page background
 * sitting on a rule-coloured ground, so the 1px gaps read as hairlines — which
 * means any column left without a cell shows as a solid tinted block, not as
 * empty space. The Office hours cell is omitted entirely when that Customizer
 * field is cleared, so the track count has to follow the number of cells.
 */
.kz-contactgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--kz-rule);
}

.kz-contactgrid__cell {
	background: var(--kz-bg);
	padding: 56px 44px;
}

.kz-contactgrid__cell:first-child {
	padding-left: 0;
}

.kz-contactgrid__cell:last-child {
	padding-right: 0;
}

.kz-contact__address {
	/* font-family: var(--kz-serif); */
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0 0 16px;
	font-style: normal;
}

.kz-contact__postal {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0;
}

.kz-contact__lines {
	display: grid;
	gap: 14px;
	font-size: 15px;
	color: var(--kz-navy);
	font-style: normal;
}

.kz-contact__lines a {
	border-bottom: 1px solid rgba(172, 116, 55, 0.35);
	padding-bottom: 2px;
	justify-self: start;
}

.kz-contact__hours {
	font-size: 15px;
	line-height: 1.8;
	color: var(--kz-muted);
	margin: 0;
}

/* Directors block -------------------------------------------------- */
.kz-directors {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-director--lead {
	border-top: 2px solid var(--kz-gold);
	padding-top: 26px;
}

.kz-director--second {
	border-top: 1px solid rgba(10, 20, 58, 0.2);
	padding-top: 26px;
}

.kz-director--lead .kz-director__name {
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1.1;
	margin: 0 0 10px;
}

.kz-director--second .kz-director__name {
	font-size: 26px;
	line-height: 1.15;
	margin: 0 0 10px;
}

.kz-director__role {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-muted);
	margin-bottom: 20px;
}

.kz-director--second .kz-director__role {
	margin-bottom: 18px;
}

.kz-director__email {
	font-size: 17px;
	border-bottom: 1px solid var(--kz-gold-rule);
	padding-bottom: 3px;
}

.kz-director--second .kz-director__email {
	font-size: 15px;
}

/* Contact page message form ---------------------------------------- */
.kz-contactform {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 72px;
	align-items: start;
}

.kz-contactform__intro .kz-section__intro {
	margin-top: 24px;
}


/* Enquiry layout --------------------------------------------------- */
.kz-enquiry {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: start;
}

.kz-enquiry__form {
	padding: 0px 72px 88px 0px;
}

/*
 * The aside bleeds to the right edge of the viewport, as drawn. The negative
 * margin cancels the container gutter; it is removed when the grid stacks.
 */
.kz-enquiry__aside {
	background: var(--kz-navy);
	color: var(--kz-on-dark);
	padding: 68px 56px;
	margin-right: calc(var(--kz-gutter) * -1);
}

.kz-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kz-step {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 18px;
	padding: 24px 0;
	border-bottom: 1px solid var(--kz-rule-light);
}

.kz-step__num {
	font-family: var(--kz-serif);
	font-size: 22px;
	line-height: 1;
	color: var(--kz-gold-light);
}

.kz-step__title {
	font-family: var(--kz-sans);
	font-size: 17px;
	color: var(--kz-on-dark);
	margin-bottom: 8px;
}

.kz-step__text {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
}

.kz-enquiry__prefer {
	margin-top: 40px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--kz-on-dark-72);
}

.kz-enquiry__prefer a {
	color: var(--kz-gold-light);
	border-bottom: 1px solid rgba(227, 173, 103, 0.4);
	padding-bottom: 2px;
}

/* Form controls ---------------------------------------------------- */
.kz-form {
	display: grid;
	gap: 30px;
}

.kz-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.kz-field {
	display: grid;
	gap: 9px;
}

.kz-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-muted);
}

.kz-input {
	border: 0;
	border-bottom: 1px solid var(--kz-rule-strong);
	background: transparent;
	padding: 10px 0;
	font-size: 16px;
	color: var(--kz-navy);
	border-radius: 0;
	width: 100%;
}

.kz-input:hover {
	border-bottom-color: var(--kz-gold);
}

.kz-input:focus-visible {
	outline: none;
	border-bottom-color: var(--kz-gold);
	box-shadow: 0 1px 0 0 var(--kz-gold);
}

.kz-textarea {
	border: 1px solid var(--kz-rule-strong);
	background: transparent;
	padding: 16px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--kz-navy);
	resize: vertical;
	border-radius: 0;
	width: 100%;
}

.kz-textarea:focus-visible {
	outline: none;
	border-color: var(--kz-gold);
	box-shadow: inset 0 0 0 1px var(--kz-gold);
}

/* Service-line chooser — same hairline grid idiom as the service cards. */
.kz-choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(10, 20, 58, 0.14);
	border: 1px solid rgba(10, 20, 58, 0.14);
}

.kz-choice {
	background: var(--kz-bg);
	padding: 18px 20px;
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 14px;
	color: var(--kz-navy);
	cursor: pointer;
}

.kz-choice:hover {
	background: var(--kz-sand);
}

/* :has() drives the checked background. Browsers without it simply show the
   focus ring and the native radio, which is still perfectly usable. */
.kz-choice:has(input:checked) {
	background: var(--kz-sand);
}

.kz-choice input {
	accent-color: var(--kz-gold);
	width: 15px;
	height: 15px;
	flex: none;
	margin: 0;
}

.kz-choice:has(input:focus-visible) {
	outline: 2px solid var(--kz-gold);
	outline-offset: -2px;
}

.kz-form__submit {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/*
 * The enquiry form's submit runs the full width of the form. It is the only
 * action on a long page, and there is no longer a note beside it to share
 * the row with. The shorter contact form keeps its content-width button.
 */
.kz-form--enquiry .kz-form__submit {
	display: block;
}

.kz-form--enquiry .kz-submit {
	width: 100%;
}

.kz-submit {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kz-on-dark);
	background: var(--kz-navy);
	border: 0;
	padding: 18px 38px;
}

.kz-submit:hover {
	background: var(--kz-navy-hover);
}

/* Validation ------------------------------------------------------- */
.kz-field__error {
	display: block;
	font-size: 13px;
	color: #8C2F1D;
	letter-spacing: 0;
	text-transform: none;
}

.kz-field.has-error .kz-input,
.kz-field.has-error .kz-textarea {
	border-color: #8C2F1D;
}

/* Honeypot. Visually hidden but NOT display:none — some bots skip
   display:none fields, which would defeat the trap. */
.kz-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Status panels ---------------------------------------------------- */
.kz-status {
	padding: 56px 48px;
	margin-bottom: 0;
}

.kz-status--success {
	border: 1px solid var(--kz-gold);
	background: var(--kz-sand);
}

.kz-status--error {
	border: 1px solid #8C2F1D;
	background: #FBF1EE;
}

.kz-status__title {
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.15;
	margin: 0 0 16px;
}

.kz-status__text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--kz-muted);
	margin: 0 0 28px;
}


/* --------------------------------------------------------------------------
   12. Global CTA band and footer
   -------------------------------------------------------------------------- */

.kz-ctaband {
	background: linear-gradient(135deg, var(--kz-gold-light), var(--kz-gold));
	border-top: 1px solid rgba(10, 20, 58, 0.1);
}

.kz-ctaband__inner {
	padding-block: 76px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.kz-ctaband__title {
	font-size: var(--kz-h2-cta);
	line-height: 1.15;
	margin: 0;
}

.kz-footer {
	background: var(--kz-navy);
	color: var(--kz-on-dark-72);
}

.kz-footer__columns {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
	gap: 48px;
	padding-block: 72px 40px;
}

/*
 * No filter here. The footer is served a purpose-made white-text version of the
 * mark, so there is nothing to knock back — the old
 * `filter: brightness(0) invert(1)` existed only to fake a light logo out of the
 * colour one, and it flattened every tone in the mark to pure white to do it.
 * The `opacity: 0.92` that softened that fake went with it; add it back in one
 * line if the real asset wants toning down.
 */
.kz-footer__logo img,
.kz-footer .custom-logo {
	height: 100px;
	width: auto;
	margin-bottom: 24px;
}

.kz-footer__tagline {
	font-size: 14px;
	line-height: 1.75;
	margin: 0;
	color: var(--kz-on-dark-55);
}

.kz-footer__heading {
	font-family: var(--kz-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kz-gold-light);
	margin-bottom: 22px;
}

.kz-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.kz-footer__list a,
.kz-footer .kz-nav__list a {
	font-size: 14px;
	color: var(--kz-on-dark-72);
	border: 0;
}

.kz-footer__list a:hover,
.kz-footer .kz-nav__list a:hover {
	color: var(--kz-gold-light);
}

.kz-footer .kz-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

/*
 * Contact lines: an icon column beside a content column.
 *
 * Grid, not flex. With flex, a two-line address wraps back underneath the icon
 * and the block loses its left edge; a fixed 18px first track keeps every line
 * of the address aligned with the first.
 *
 * align-items:start rather than center, so the icon sits against the FIRST line
 * of a multi-line address instead of floating to its vertical middle.
 */
.kz-footer__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.kz-footer__contact {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	align-items: start;
}

.kz-contact-icon {
	width: 18px;
	height: 18px;
	color: var(--kz-gold-light);
	/* Optical nudge: drops the icon onto the text baseline rather than the top
	   of the line box, which line-height 1.8 puts well above the glyphs. */
	margin-top: 4px;
}

.kz-footer__address {
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
	color: var(--kz-on-dark-55);
	font-style: normal;
}

/*
 * Email and phone in the Contacts column. display:block stacks them — as
 * inline elements they would run together on one line with a single space
 * between, which reads as one broken string rather than two contact details.
 *
 * Deliberately not scoped to `a`: kenzora_the_phone() emits a <span> rather
 * than a link while the number is still the "[to be confirmed]" placeholder,
 * and that span needs the same treatment.
 */
.kz-footer__email {
	display: block;
	font-size: 14px;
	color: var(--kz-on-dark-55);
}

/*
 * Hover is scoped to anchors on purpose. kenzora_the_phone() emits a <span>
 * rather than a link while the number is still the "[to be confirmed]"
 * placeholder — colouring that on hover would advertise it as clickable when
 * it is not. The `a` also raises specificity above the global `a:hover` rule,
 * which would otherwise pull these to navy and make them near-invisible on the
 * navy footer.
 */
a.kz-footer__email:hover {
	color: var(--kz-gold-light);
}

.kz-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kz-footer__bottom-inner {
	padding-block: 24px;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--kz-on-dark-42);
	letter-spacing: 0.04em;
}

/*
 * The studio credit link. Without this it inherits the global `a` colour,
 * --kz-gold (#AC7437), which measures 4.52:1 on the navy ground — it scrapes
 * WCAG AA but reads as a different accent from every other footer link. 55%
 * white gives 6.02:1 and matches the contact links in the column above, with
 * the same gold-light hover.
 *
 * Note the surrounding bar text is --kz-on-dark-42, which measures 4.01:1 and
 * FAILS AA at this 12px size. That predates this rule and is a design decision
 * to revisit, not something to fix here in passing.
 */
.kz-footer__bottom-inner a {
	color: var(--kz-on-dark-55);
}

.kz-footer__bottom-inner a:hover {
	color: var(--kz-gold-light);
}


/* --------------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------------
   Derived, not supplied — see the note at the top of this file. The order in
   which things collapse:

     1100px  four-across grids halve; service rows drop the arrow column
      900px  the desktop nav is replaced by the toggle; two-column layouts
             become one; the enquiry aside stops bleeding
      640px  gutters tighten, panels lose their oversized padding, the last
             two-across grids become single-column
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

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

	.kz-servicerow {
		grid-template-columns: 70px 1fr 1.1fr;
		gap: 24px;
	}

	.kz-servicerow__arrow {
		display: none;
	}

	.kz-glance,
	.kz-mission,
	.kz-why {
		gap: 48px;
	}

	.kz-servicebody__text {
		padding: 56px 44px;
	}

	.kz-split__panel {
		padding: 56px 44px;
	}

	.kz-enquiry__form {
		padding: 56px 48px 72px 0;
	}
}

@media (max-width: 900px) {

	:root {
		--kz-gutter: 28px;

		/* The header drops to two columns here (logo left, toggle right) and
		   both states come down in height. See the placement rules below. */
		--kz-header-h: 84px;
		--kz-header-h-stuck: 66px;
		--kz-logo-h: 50px;
		--kz-logo-h-stuck: 38px;
	}

	/* Navigation swaps to the toggle. */
	.kz-nav--primary,
	.kz-header__cta {
		display: none;
	}

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

	/*
	 * With the nav and CTA gone there is nothing to balance a centred logo
	 * against, so the header drops to the conventional mobile arrangement:
	 * logo hard left, toggle hard right. Two columns, both items repinned —
	 * the three-column desktop placement above would otherwise still apply and
	 * strand the logo in the middle.
	 */
	.kz-header__inner {
		grid-template-columns: auto 1fr;
	}

	.kz-header__brand {
		grid-column: 1;
		justify-self: start;
	}

	.kz-header__actions {
		grid-column: 2;
		justify-self: end;
		gap: 16px;
	}

	/* Two-column layouts stack. */
	.kz-pagehead,
	.kz-pagehead--contact,
	.kz-glance,
	.kz-mission,
	.kz-why,
	.kz-industries,
	.kz-contactform,
	.kz-split,
	.kz-servicebody,
	.kz-enquiry,
	.kz-leadership,
	.kz-directors,
	.kz-contactgrid {
		grid-template-columns: 1fr;
	}

	.kz-pagehead {
		gap: 32px;
		align-items: start;
		padding-block: 64px 48px;
	}

	.kz-pagehead--home {
		padding-block: 64px 48px;
	}

	.kz-pagehead__aside {
		padding-bottom: 0;
	}

	/* The Contact hero's aside is the form, which needs more air under the
	   heading than a paragraph would. */
	.kz-pagehead--contact {
		gap: 44px;
	}

	.kz-section {
		padding-block: 20px;
	}

	.kz-section--tight {
		padding-block: 56px;
	}

	.kz-section__header {
		margin-bottom: 40px;
	}

	.kz-glance,
	.kz-mission,
	.kz-why,
	.kz-industries {
		gap: 36px;
	}

	.kz-contactform {
		gap: 40px;
	}

	.kz-leadership,
	.kz-directors {
		gap: 40px;
		margin-top: 36px;
	}

	/* The bio dialog stacks like every other two-column layout. The portrait
	   loses its fixed height with no column of copy left to match. */
	.kz-bio__inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-block: 48px 64px;
	}

	.kz-bio__portrait .kz-imagewell--portrait {
		height: 453px;
	}

	/* Justified text needs a wide measure to avoid rivers; ragged-right is
	   the better setting once the column narrows. */
	.kz-prose--justify p {
		text-align: left;
	}

	.kz-imagewell--split {
		min-height: 0;
		height: 360px;
	}

	.kz-imagewell--about {
		min-height: 0;
		height: 340px;
	}

	.kz-imagewell--band {
		height: 380px;
	}

	.kz-imagewell--band-sm,
	.kz-imagewell--band-xs {
		height: 320px;
	}

	/* Stacked, there is no neighbouring column to match. */
	.kz-imagewell--fill {
		height: 360px;
		min-height: 0;
	}

	.kz-servicebody__text,
	.kz-split__panel {
		padding: 48px var(--kz-gutter);
	}

	/* Aside no longer bleeds once it sits under the form. */
	.kz-enquiry__form {
		padding: 48px 0 56px;
	}

	.kz-enquiry__aside {
		margin-right: calc(var(--kz-gutter) * -1);
		margin-left: calc(var(--kz-gutter) * -1);
		padding: 56px var(--kz-gutter);
	}

	.kz-contactgrid {
		gap: 0;
		background: transparent;
	}

	.kz-contactgrid__cell {
		padding: 40px 0;
		border-bottom: 1px solid var(--kz-rule);
	}

	.kz-contactgrid__cell:last-child {
		border-bottom: 0;
	}

	.kz-servicerow {
		grid-template-columns: 56px 1fr;
		gap: 8px 20px;
		padding-block: 28px;
	}

	.kz-servicerow__blurb {
		grid-column: 2;
	}

	.kz-footer__columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		padding-block: 56px 32px;
	}

	.kz-ctaband__inner {
		padding-block: 56px;
	}

	.kz-panel {
		padding: 32px;
	}
}

@media (max-width: 640px) {

	:root {
		--kz-gutter: 20px;
		--kz-header-h: 72px;
		--kz-header-h-stuck: 60px;
		--kz-logo-h: 42px;
		--kz-logo-h-stuck: 34px;
	}

	.kz-cardgrid,
	.kz-approach,
	.kz-choices,
	.kz-form__row,
	.kz-footer__columns {
		grid-template-columns: 1fr;
	}

	.kz-servicecard {
		min-height: 0;
		padding: 32px 24px;
	}

	.kz-industry {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.kz-step {
		grid-template-columns: 32px 1fr;
		gap: 14px;
	}

	.kz-status {
		padding: 36px 24px;
	}

	/* Under 16px, focusing a control makes iOS Safari zoom the page in and
	   leave it there. The desktop 15px is not worth that. */
	.kz-textarea {
		font-size: 16px;
	}

	/* A content-width button reads as an afterthought at this width. */
	.kz-form__submit {
		gap: 16px;
	}

	.kz-submit {
		width: 100%;
		padding: 18px 24px;
	}

	.kz-approach {
		gap: 28px;
	}

	.kz-button-row {
		gap: 10px;
	}

	.kz-button,
	.kz-button--large {
		padding: 14px 22px;
	}

	/* A full-width trigger, like the enquiry form's submit: at this width a
	   content-width button under a paragraph reads as an afterthought. */
	.kz-person__more {
		width: 100%;
	}

	.kz-bio__inner {
		padding-block: 36px 56px;
	}

	.kz-bio__portrait .kz-imagewell--portrait {
		height: 373px;
	}

	.kz-bio__text {
		font-size: 16px;
		line-height: 1.75;
	}

	/* The ✕ alone is unmistakable, and dropping the word buys back room in a
	   tight bar. Hidden the way .screen-reader-text hides things (section 15)
	   rather than with display:none, so the button keeps its accessible name. */
	.kz-bio__close-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* 14px around a 14px icon is a 44px square — the comfortable touch target
	   the label's own width was providing up to here. */
	.kz-bio__close {
		padding: 14px;
	}
}


/* --------------------------------------------------------------------------
   14. Blog templates
   --------------------------------------------------------------------------
   Neither the approved design nor the content document includes a blog, so
   Insights is not in the navigation. These styles exist because index.php is
   a required WordPress template and single.php costs nothing to keep — if
   Kenzora ever publishes, the templates are already on-brand. See README §8.
   -------------------------------------------------------------------------- */

.kz-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--kz-rule);
	border: 1px solid var(--kz-rule);
}

.kz-post-card {
	background: var(--kz-bg);
	padding: 0 0 32px;
	display: flex;
	flex-direction: column;
}

.kz-post-card__media {
	display: block;
	background: var(--kz-stone);
	margin-bottom: 26px;
}

.kz-post-card__image {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.kz-post-card__body {
	padding-inline: 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kz-post-card__meta {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-gold);
	margin: 0 0 14px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.kz-post-card__title {
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 14px;
}

.kz-post-card__excerpt {
	font-size: 14px;
	line-height: 1.7;
	color: var(--kz-muted);
	margin: 0 0 22px;
}

.kz-post-card__more {
	margin: auto 0 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-gold);
}

.kz-single__meta {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-gold);
	margin: 0 0 24px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.kz-single__title {
	font-size: var(--kz-h1);
	line-height: 1.05;
	margin: 0 0 20px;
}

.kz-single__standfirst {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--kz-navy);
	margin: 0;
	max-width: 760px;
}

.kz-single__media {
	margin: 0 0 12px;
	background: var(--kz-stone);
}

.kz-single__caption {
	font-size: 12px;
	color: var(--kz-muted);
	padding-block: 12px;
}

.kz-prose h2 {
	font-size: 30px;
	margin: 44px 0 16px;
}

.kz-prose h3 {
	font-size: 23px;
	margin: 36px 0 14px;
}

.kz-prose ul,
.kz-prose ol {
	margin: 0 0 22px 20px;
	color: var(--kz-body);
	font-size: 16px;
	line-height: 1.8;
}

.kz-prose blockquote {
	border-left: 2px solid var(--kz-gold);
	padding-left: 28px;
	margin: 32px 0;
	font-family: var(--kz-serif);
	font-size: 22px;
	line-height: 1.45;
	color: var(--kz-navy);
}

.kz-single__body .kz-prose {
	max-width: 760px;
}

.kz-single__tags {
	font-size: 13px;
	color: var(--kz-muted);
	margin-top: 32px;
}

.kz-pagination {
	margin-top: 56px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kz-pagination .nav-links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.kz-post-nav .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.kz-post-nav__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kz-gold);
	margin-bottom: 8px;
}

.kz-post-nav__title {
	font-family: var(--kz-serif);
	font-size: 20px;
	line-height: 1.25;
	color: var(--kz-navy);
}

@media (max-width: 900px) {

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

	.kz-post-nav .nav-links {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {

	.kz-archive__grid {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------------------
   15. 404 and utilities
   -------------------------------------------------------------------------- */

.kz-404__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
	font-size: 16px;
}

.kz-404__search {
	margin: 32px 0;
	max-width: 420px;
}

.kz-404__search input[type="search"] {
	border: 0;
	border-bottom: 1px solid var(--kz-rule-strong);
	background: transparent;
	padding: 10px 0;
	font-size: 16px;
	width: 100%;
	border-radius: 0;
}

.kz-empty {
	padding-block: 40px;
	font-size: 16px;
	color: var(--kz-muted);
}

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

.kz-list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--kz-rule);
	font-size: 15px;
	color: var(--kz-navy);
}

/* Editor-only notice — never shown to visitors, see kenzora_content_admin_notice(). */
.kz-notice {
	background: #FFF8E7;
	border-left: 3px solid var(--kz-gold);
	padding: 14px 18px;
	font-size: 14px;
	color: #6B4A16;
	margin: 0 0 20px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
}

.skip-link:focus {
	position: fixed;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	background: var(--kz-navy);
	color: var(--kz-on-dark);
	padding: 12px 20px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

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

.wp-caption-text,
.gallery-caption {
	font-size: 12px;
	color: var(--kz-muted);
	padding-top: 10px;
}