/* ============================================================================
   KMA — Default page / contact / 404 / search design system
   Used by: page.php, template-contact.php, template-page-content.php,
            template-page-inner-areas.php, 404.php, search.php
   Scope:   .kma-page
   Rules:   FLAT — no box-shadow, no border-radius, no transition/animation/
            transform (text-transform only). Tokens mirror the other kma-*.css.
   Fonts:   self-hosted (assets/fonts), enqueued via inc/page.php.
   ========================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-700.woff2') format('woff2'); }

.kma-page {
	--g: #76a236;
	--g-cta: #46731c;
	--g-cta-h: #3a5f16;
	--bright: #93c847;
	--ink: #1b1a1a;
	--ink2: #221E1F;
	--paper: #fff;
	--mist: #f4f6ef;
	--line: #e1e5da;
	--line2: #d3dac8;
	--muted: #5b6168;
	--body: #2f3338;
	--prose: #33373b;
	--danger: #a3341f;
	--wrap: 1140px;
	--font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-display: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', system-ui, sans-serif;
	--font-mono: 'Space Mono', ui-monospace, 'Segoe UI Mono', monospace;
	font-family: var(--font-sans);
	color: var(--body);
	line-height: 1.65;
	font-size: 17px;
	clear: both;
	display: block;
	font-optical-sizing: auto;
	font-feature-settings: "kern", "liga", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.kma-page * { box-sizing: border-box; }
.kma-page img { max-width: 100%; height: auto; }
.kma-page figure { margin: 0; }
.kma-page .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Defend rich text against the legacy global element rules + Tailwind preflight. */
/* (figcaption is NOT in this list: nothing legacy targets it, and the guard
   was overriding the prose layer's Space Mono caption voice.) */
.kma-page p, .kma-page li, .kma-page a, .kma-page b, .kma-page strong, .kma-page em,
.kma-page span, .kma-page blockquote, .kma-page td, .kma-page th, .kma-page summary,
.kma-page label, .kma-page input, .kma-page select, .kma-page textarea, .kma-page button { font-family: inherit; }
.kma-page p, .kma-page li { font-size: inherit; }
.kma-page b, .kma-page strong { font-weight: 700; color: inherit; }
.kma-page p { text-wrap: pretty; }

.kma-page .kma-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.kma-page .kma-wrap--narrow { max-width: 820px; }

/* ---- Typography roles ----------------------------------------------------
   Headings INSIDE .kma-prose are excluded (the :where() adds no specificity):
   this role's margin:0/800/1.08 was winning the (0,1,1) tie against the
   canonical prose heading rhythm purely on load order. */
.kma-page :is(h1, h2, h3, h4):where(:not(.kma-prose *)) {
	font-family: var(--font-display);
	color: var(--ink2);
	margin: 0;
	font-weight: 800;
	line-height: 1.08;
	text-wrap: balance;
}
.kma-page .kma-kicker, .kma-page .kma-breadcrumb, .kma-page .kma-closing { font-family: var(--font-mono); }
.kma-page .kma-kicker {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--g-cta); margin: 0 0 .9rem;
}
.kma-page .kma-kicker::before { content: ""; width: 30px; height: 3px; background: var(--g); display: inline-block; flex: none; }

/* ---- Buttons ------------------------------------------------------------- */
.kma-page .kma-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1;
	padding: .95rem 1.6rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.kma-page .kma-btn:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 3px; }
.kma-page .kma-hero .kma-btn:focus-visible{ outline-color: #fff; }
.kma-page .kma-btn--primary { background: var(--g-cta); color: #fff; }
.kma-page .kma-btn--primary:hover { background: var(--g-cta-h); }
.kma-page .kma-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.kma-page .kma-btn--ghost:hover { background: #fff; color: var(--ink2); border-color: #fff; }
.kma-page .kma-btn--light { background: #fff; color: var(--g-cta); }
.kma-page .kma-btn--light:hover { background: #eef1e7; }
.kma-page .kma-btn--dark { background: var(--ink2); color: #fff; }
.kma-page .kma-btn--dark:hover { background: #000; }

/* ---- Hero (dark gradient band) ------------------------------------------- */
.kma-page .kma-hero {
	position: relative; color: #fff; overflow: hidden;
	background: radial-gradient(120% 130% at 88% 0%, rgba(118,162,54,.30), transparent 55%),
		linear-gradient(180deg, #26282a 0%, #1b1a1a 100%);
}
/* Hero metrics unified with the areas-serviced hero (kma-locations.css). */
.kma-page .kma-hero .kma-wrap { position: relative; z-index: 2; padding-top: 3.2rem; padding-bottom: 4.4rem; }
.kma-page .kma-hero .kma-kicker { color: var(--bright); }
.kma-page .kma-hero .kma-kicker::before { background: var(--bright); }
.kma-page .kma-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 3.7rem); line-height: 1.02; }
.kma-page .kma-hero__lede { max-width: 60ch; margin-top: 1.1rem; color: #dfe2da; font-size: clamp(1.02rem, 2vw, 1.18rem); }

/* ---- Two-column hero: gallery-photo background + trust card (shared shape
   with the location/areas heroes; see kma-locations.css). Applies to every
   kma_page_hero() page + the contact page. ------------------------------- */
.kma-page .kma-hero__bg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 38%; z-index: 0;
}
.kma-page .kma-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(96deg, rgba(18,17,17,.92) 0%, rgba(18,17,17,.74) 46%, rgba(18,17,17,.52) 100%),
		radial-gradient(120% 130% at 88% 0%, rgba(118,162,54,.30), transparent 55%);
}
.kma-page .kma-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr); gap: 2.4rem 3rem; align-items: center; }
.kma-page .kma-hero__grid--nocard { grid-template-columns: 1fr; } /* search / utility: no trust card */
.kma-page .kma-hero__main { min-width: 0; }

/* DARK frosted-GLASS trust card (smoked, not white) — translucent dark-green
   tint + blur so the photo reads through, white text; kept dark enough (.5)
   that white stays >=4.5:1 even where the photo behind is bright sky. Flat
   (no radius); the green top rule keeps it in the KMA card language. */
.kma-page .kma-hero__card {
	background: rgba(18, 22, 15, .5);
	-webkit-backdrop-filter: blur(20px) saturate(1.15);
	backdrop-filter: blur(20px) saturate(1.15);
	color: #fff;
	border: 1px solid rgba(255,255,255,.16);
	padding: 1.6rem 1.6rem 1.7rem;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.kma-page .kma-hero__card { background: rgba(18, 22, 15, .82); }
}
.kma-page .kma-hero__card-eyebrow {
	display: flex; align-items: center; gap: .55rem;
	font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--bright); margin: 0 0 1.1rem;
}
.kma-page .kma-hero__card-eyebrow i { font-size: .85em; }
.kma-page .kma-hero__creds { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kma-page .kma-hero__creds li { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; line-height: 1.35; color: #fff; font-variant-numeric: tabular-nums; }
.kma-page .kma-hero__creds i { color: var(--bright); font-size: 1.05rem; flex: none; margin-top: .08em; }
.kma-page .kma-hero__creds strong { color: #fff; font-weight: 700; }
.kma-page .kma-breadcrumb { font-size: .8rem; letter-spacing: .01em; color: #c4c8be; margin-bottom: 1.8rem; }
.kma-page .kma-breadcrumb a { color: #d4d8cd; text-decoration: none; }
.kma-page .kma-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.kma-page .kma-breadcrumb span[aria-current] { color: #fff; }
.kma-page .kma-breadcrumb .sep { color: #7e837a; }

/* ---- Section ------------------------------------------------------------- */
.kma-page .kma-section { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.kma-page .kma-section--mist { background: var(--mist); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kma-page .kma-section__head { max-width: 64ch; margin-bottom: 2rem; }
.kma-page .kma-section__head h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.kma-page .kma-section__head > p { margin-top: .9rem; color: var(--muted); font-size: 1rem; }
.kma-page .kma-section__head a { color: var(--g-cta); font-weight: 600; }

/* ---- Prose (rich text: the_content) --------------------------------------
   All element styling lives in the canonical layer assets/css/kma-prose.css
   (a dependency of this sheet — see inc/prose.php). No page-level deltas.  */

/* ---- CTA band + closing (shared) ----------------------------------------- */

.kma-page .kma-closing { background: var(--ink2); color: #c7ccc0; text-align: center; font-size: .82rem; padding: 1.4rem 24px; border-top: 4px solid var(--g); }

/* ---- Hero actions + licence line (contact) ------------------------------- */
.kma-page .kma-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.kma-page .kma-hero__licence { margin-top: 1.4rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em; color: #b9bdb2; font-variant-numeric: tabular-nums; }

/* ---- "What happens next" steps ------------------------------------------- */
.kma-page .kma-section--steps { padding: clamp(1.8rem, 3.5vw, 2.6rem) 0; }
.kma-page .kma-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.kma-page .kma-steps li { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--g); padding: 1.3rem 1.4rem; }
.kma-page .kma-steps__num { display: block; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--g-cta); margin-bottom: .55rem; }
.kma-page .kma-steps strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; color: var(--ink2); }
.kma-page .kma-steps p { margin: .45rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--prose); }

/* ---- Contact layout (form + details panel) -------------------------------- */
.kma-page .kma-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.6rem; align-items: start; }
/* APP 5 collection notice under the enquiry form */
.kma-page .kma-contact__privnote { margin: 1.1rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.kma-page .kma-contact__privnote a { color: var(--g-cta); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
.kma-page .kma-contact__privnote a:hover { color: var(--ink2); }
.kma-page .kma-contact__privnote a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }
.kma-page .kma-contact__aside { background: var(--mist); border: 1px solid var(--line); border-left: 4px solid var(--g); padding: 1.6rem 1.5rem; }
.kma-page .kma-contact__aside h2 { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.kma-page .kma-faddress { font-style: normal; }
.kma-page .kma-contact__list { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); font-size: .92rem; font-variant-numeric: tabular-nums; }
.kma-page .kma-contact__list li { display: flex; align-items: center; gap: .85rem; padding: .55rem 0; min-width: 0; font-family: var(--font-sans); }
.kma-page .kma-contact__list li > span:last-child, .kma-page .kma-contact__list li > a { overflow-wrap: anywhere; min-width: 0; }
/* Icon chip on the mist panel: paper chip so it reads as a tile. */
.kma-page .kma-contact__ico { width: 36px; height: 36px; flex: none; background: var(--paper); border: 1px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; }
.kma-page .kma-contact__ico i { color: var(--g-cta); font-size: .88rem; }
.kma-page .kma-contact__list a { color: var(--body); font-weight: 400; text-decoration: none; padding: .2rem .4rem; margin: -.2rem -.4rem; }
.kma-page .kma-contact__list a:hover { color: var(--g-cta); background: var(--paper); } /* panel is mist → paper highlight */
.kma-page .kma-contact__list a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }
/* The phone is the primary conversion path. */
.kma-page .kma-contact__phone { font-weight: 700 !important; font-size: 1.05rem; color: var(--ink2) !important; }
.kma-page .kma-contact__creds { list-style: none; margin: 1.2rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line2); font-size: .88rem; color: var(--body); }
.kma-page .kma-contact__creds li { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; font-variant-numeric: tabular-nums; }
.kma-page .kma-contact__creds i { color: var(--g); font-size: .9rem; }
.kma-page .kma-contact__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.kma-page .kma-contact__social a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line2); color: var(--g-cta); background: var(--paper); }
.kma-page .kma-contact__social a:hover { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }
.kma-page .kma-contact__social a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }

/* ---- Map (direct embed, lazy — below the fold so it loads on approach) ---- */
.kma-page .kma-map { border: 1px solid var(--line2); background: var(--mist); }
.kma-page .kma-map iframe { display: block; width: 100%; height: 420px; border: 0; }
.kma-page .kma-mapfacade__alt { margin-top: .8rem; font-size: .9rem; }
.kma-page .kma-mapfacade__alt a { color: var(--g-cta); font-weight: 600; text-decoration: none; padding: .25rem .45rem; margin: -.25rem -.45rem; }
.kma-page .kma-mapfacade__alt a:hover { background: var(--paper); } /* mist band → paper highlight */
.kma-page .kma-mapfacade__alt a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }

/* ---- Gravity Forms (flat) ------------------------------------------------ */
.kma-page .gform_wrapper { max-width: 100%; }
.kma-page .gform_wrapper form { margin: 0; }
.kma-page .gform_wrapper .gform_fields { display: grid; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.kma-page .gform_wrapper .gfield_label { display: block; font-weight: 700; color: var(--ink2); font-size: .95rem; margin-bottom: .4rem; }
.kma-page .gform_wrapper .gfield_required { color: var(--danger); margin-left: .2rem; }
.kma-page .gform_wrapper input[type="text"],
.kma-page .gform_wrapper input[type="email"],
.kma-page .gform_wrapper input[type="tel"],
.kma-page .gform_wrapper input[type="url"],
.kma-page .gform_wrapper input[type="number"],
.kma-page .gform_wrapper select,
.kma-page .gform_wrapper textarea {
	width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--ink2);
	background: var(--paper); border: 2px solid var(--line2); padding: .7rem .85rem; line-height: 1.4;
}
.kma-page .gform_wrapper textarea { min-height: 140px; resize: vertical; }
.kma-page .gform_wrapper input:focus, .kma-page .gform_wrapper select:focus, .kma-page .gform_wrapper textarea:focus {
	outline: 3px solid var(--g-cta); outline-offset: 1px; border-color: var(--g);
}
.kma-page .gform_wrapper .gfield_description { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.kma-page .gform_footer, .kma-page .gform_wrapper .gform_footer { margin-top: 1.4rem; }
.kma-page .gform_footer input[type="submit"],
.kma-page .gform_wrapper .gform_button,
.kma-page .gform_wrapper button[type="submit"] {
	background: var(--g-cta); color: #fff; border: 2px solid var(--g-cta); font-family: var(--font-sans);
	font-weight: 700; font-size: 1rem; padding: .95rem 1.7rem; cursor: pointer;
}
.kma-page .gform_footer input[type="submit"]:hover, .kma-page .gform_wrapper .gform_button:hover { background: var(--g-cta-h); border-color: var(--g-cta-h); }
.kma-page .gform_footer input[type="submit"]:focus-visible, .kma-page .gform_wrapper .gform_button:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 3px; }
.kma-page .gform_wrapper .gfield_error input, .kma-page .gform_wrapper .gfield_error textarea { border-color: var(--danger); }
.kma-page .gform_wrapper .validation_message, .kma-page .gform_wrapper .gfield_validation_message,
.kma-page .gform_wrapper .gform_validation_errors { color: var(--danger); font-size: .9rem; margin-top: .3rem; }
.kma-page .gform_confirmation_message { border-left: 4px solid var(--g); background: var(--mist); padding: 1.2rem 1.4rem; color: var(--ink2); }

/* ---- 404 ----------------------------------------------------------------- */
.kma-page .kma-404 { text-align: center; max-width: 620px; margin: 0 auto; }
.kma-page .kma-404__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--g); }
.kma-page .kma-404 h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: .4rem 0 1rem; }
.kma-page .kma-404 p { color: var(--prose); font-size: 1.05rem; }
.kma-page .kma-404__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.8rem 0; }
.kma-page .kma-404__links { margin-top: 1.6rem; }
.kma-page .kma-404__links ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; }
.kma-page .kma-404__links a { color: var(--g-cta); font-weight: 600; }
.kma-page .kma-404 .kma-searchform { margin-left: auto; margin-right: auto; }

/* ---- Search -------------------------------------------------------------- */
.kma-page .kma-searchform { display: flex; gap: .6rem; max-width: 520px; margin: 0 0 2rem; }
.kma-page .kma-searchform input[type="search"], .kma-page .kma-searchform input[type="text"] {
	flex: 1; font-family: var(--font-sans); font-size: 1rem; color: var(--ink2);
	background: var(--paper); border: 2px solid var(--line2); padding: .7rem .85rem; min-height: 46px;
}
.kma-page .kma-searchform input:focus { outline: 3px solid var(--g-cta); outline-offset: 1px; border-color: var(--g); }
.kma-page .kma-searchform button { background: var(--g-cta); color: #fff; border: 2px solid var(--g-cta); font-weight: 700; padding: 0 1.3rem; min-height: 46px; cursor: pointer; }
.kma-page .kma-searchform button:hover { background: var(--g-cta-h); }
.kma-page .kma-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.kma-page .kma-result { border: 1px solid var(--line); border-left: 4px solid var(--g); padding: 1.3rem 1.4rem; }
.kma-page .kma-result h2 { font-size: 1.35rem; line-height: 1.2; }
.kma-page .kma-result h2 a { color: var(--ink2); text-decoration: none; }
.kma-page .kma-result:hover h2 a { color: var(--g-cta); }
.kma-page .kma-result__url { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin: .3rem 0; word-break: break-word; }
.kma-page .kma-result p { color: var(--prose); font-size: .98rem; margin-top: .4rem; }

/* ---- Pagination (shared, flat) ------------------------------------------- */
.kma-page .kma-pagination { margin-top: 2.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.kma-page .kma-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--line2); font-weight: 700; color: var(--g-cta); background: var(--paper); text-decoration: none; }
.kma-page .kma-pagination a.page-numbers:hover { background: var(--g); color: #fff; border-color: var(--g); }
.kma-page .kma-pagination .page-numbers.current { background: var(--g-cta); color: #fff; border-color: var(--g-cta); }

/* Smooth in-page anchor scrolling moved to kma-chrome.css (site-wide: the
   contact hero jump, blog TOC links, skip link — gated on reduced-motion). */

/* ---- Reading progress bar (shared with the blog; JS in kma-readprogress.js).
   FLAT: no transition — the rAF per-frame width update is what makes it smooth. */
.kma-readprogress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100002; background: rgba(118, 162, 54, .16); pointer-events: none; }
.kma-readprogress__fill { display: block; height: 100%; width: 0; background: var(--g); }

/* ---- "On this page" table of contents (opt-in, _kma_page_toc) -------------
   Mirrors the blog single TOC (kma-blog.css) so the legal pages read as one
   site. Pages without a TOC keep .kma-article as a transparent block wrapper,
   so their prose measure/alignment is unchanged. */
.kma-page .kma-article.has-toc {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 2.6rem;
	align-items: start;
}
.kma-page .kma-article__main { min-width: 0; }

.kma-page .kma-toc {
	position: sticky;
	/* Clear the ~83px sticky site header (aligns with html scroll-padding-top:6rem)
	   so the pinned TOC title/first link don't hide behind it on scroll. */
	top: 6.5rem;
	border-left: 3px solid var(--g);
	padding-left: 1.1rem;
	font-size: .9rem;
}
.kma-page .kma-toc__title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: .9rem;
}
.kma-page .kma-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.kma-page .kma-toc li { position: relative; margin: 0 0 .6rem; counter-increment: toc; }
.kma-page .kma-toc a { display: block; color: var(--body); text-decoration: none; line-height: 1.4; }
.kma-page .kma-toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--g); font-family: var(--font-mono); font-size: .82em; }
.kma-page .kma-toc a:hover { color: var(--g-cta); text-decoration: underline; }
.kma-page .kma-toc a.is-active { color: var(--g-cta); font-weight: 700; }
.kma-page .kma-toc a.is-active::before { color: var(--g-cta); }
.kma-page .kma-toc a.is-active::after {
	content: "";
	position: absolute;
	left: calc(-1.1rem - 3px);
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--g-cta);
}

/* Mobile collapsible TOC (hidden on desktop; swapped in below 920px) */
.kma-page .kma-toc-mobile {
	display: none;
	border: 1px solid var(--line);
	border-left: 4px solid var(--g);
	background: var(--mist);
	margin-bottom: 1.8rem;
}
.kma-page .kma-toc-mobile summary {
	cursor: pointer;
	padding: .9rem 1.1rem;
	font-family: var(--font-mono);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink2);
	list-style: none;
}
.kma-page .kma-toc-mobile summary::-webkit-details-marker { display: none; }
.kma-page .kma-toc-mobile summary::after { content: "+"; float: right; color: var(--g-cta); font-size: 1.1rem; line-height: 1; }
.kma-page .kma-toc-mobile[open] summary::after { content: "\2212"; }
.kma-page .kma-toc-mobile ol { list-style: none; margin: 0; padding: 0 1.1rem 1rem; }
.kma-page .kma-toc-mobile li { margin: .5rem 0; }
.kma-page .kma-toc-mobile a { color: var(--body); text-decoration: none; }
.kma-page .kma-toc-mobile a:hover { color: var(--g-cta); text-decoration: underline; }
.kma-page .kma-toc-mobile a.is-active { color: var(--g-cta); font-weight: 700; }

/* TOC anchor targets get breathing room under the sticky header. */
.kma-page .kma-article .kma-prose h2 { scroll-margin-top: 1.5rem; }

/* Brief highlight when a heading is reached via a TOC click (the system is
   otherwise flat; disabled under prefers-reduced-motion). */
.kma-page .kma-prose h2.kma-flash { animation: kma-page-flash 1.1s ease-out; box-decoration-break: clone; }
@keyframes kma-page-flash {
	from { background: rgba(118, 162, 54, .22); }
	to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.kma-page .kma-prose h2.kma-flash { animation: none; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 920px) {
	.kma-page .kma-article.has-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.kma-page .kma-toc-desktop { display: none; }
	.kma-page .kma-toc-mobile { display: block; }
}
@media (max-width: 900px) {
	/* Hero card drops below the copy; cap its width so it doesn't stretch full-bleed. */
	.kma-page .kma-hero__grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.kma-page .kma-hero__card { max-width: 30rem; }
}
@media (max-width: 820px) {
	/* minmax(0,1fr): let the form column shrink below the Gravity Forms input's
	   intrinsic min-content instead of forcing the page wider than the viewport. */
	.kma-page .kma-contact { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
	.kma-page .kma-contact__form, .kma-page .kma-contact > * { min-width: 0; }
	.kma-page .kma-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.kma-page { font-size: 16px; }
	.kma-page .kma-hero__actions .kma-btn, .kma-page .kma-404__actions .kma-btn { width: 100%; }
}
@media (max-width: 360px) {
	/* Tightest phones (320px): trim the page gutter and stop Gravity Forms'
	   fixed-width inputs / reCAPTCHA from pushing an 8px horizontal scroll. */
	.kma-page .kma-wrap { padding-left: 16px; padding-right: 16px; }
	.kma-page .gform_wrapper input, .kma-page .gform_wrapper select, .kma-page .gform_wrapper textarea { min-width: 0; }
	.kma-page .gform_wrapper .ginput_recaptcha { overflow-x: auto; }
}