/* ============================================================================
   KMA — Site chrome (top utility bar, sticky header + centered nav + mobile menu,
   white footer, skip link). Loaded site-wide by inc/chrome.php.
   Scopes: .kma-topbar / .kma-site-header / .kma-site-footer / .kma-skip
   Rules: FLAT — no box-shadow, no border-radius, no transition/animation/transform
   (text-transform only). Tokens mirror the other kma-*.css.
   Nav = WAI-ARIA APG "Disclosure Navigation": a list of links + a
   button[aria-expanded][aria-controls] per parent (no role=menu).
   Nav labels use the brand display face (Barlow Condensed); submenu items stay in
   Inter for legibility of longer service names.
   ========================================================================== */

@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: 600; font-display: swap; src: url('../fonts/barlow-condensed-600.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: 700; font-display: swap; src: url('../fonts/space-mono-700.woff2') format('woff2'); }

/* Metric-matched fallback faces — kill the web-font swap reflow (CLS). Each maps
   local Arial onto the real font's box: size-adjust = xWidthAvg ratio vs Arial
   (Capsize freq-weighted), overrides = webfont hhea metrics / size-adjust. Values
   computed from the actual woff2 files (Inter matches next/font to 2 decimals).
   Barlow Condensed's 80.6% size-adjust is the important one: it makes the fallback
   as NARROW as Barlow so the horizontal primary nav fits on ONE line before the
   font loads — previously it wrapped in the wide fallback, then collapsed when
   Barlow arrived, shifting the whole page down (desktop CLS 0.687). Referenced
   first in the fallback slot of --font-sans / --font-display below. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.29%; ascent-override: 90.30%; descent-override: 22.48%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed Fallback'; src: local('Arial'); size-adjust: 80.61%; ascent-override: 124.06%; descent-override: 24.81%; line-gap-override: 0%; }

.kma-topbar, .kma-site-header, .kma-site-footer, .kma-skip {
	--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;
	--wrap: 1240px;
	--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); box-sizing: border-box;
}
.kma-topbar *, .kma-site-header *, .kma-site-footer *, .kma-skip * { box-sizing: border-box; }
.kma-topbar .screen-reader-text, .kma-site-header .screen-reader-text, .kma-site-footer .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;
}
/* Base reset ported from the removed legacy boilerplate.css (which used to carry
   `body{margin:0}`). Nothing else in the flat system reset it, so its removal let
   the browser's default 8px body margin reappear — restore it here, site-wide. */
body { margin: 0; }
html { scroll-padding-top: 6rem; }
/* Smooth in-page anchor scrolling, site-wide (skip link, blog TOC, the contact
   hero's #kma-enquiry jump). On the root — the only real scroller — and gated
   on the user's motion preference. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ---- Skip link ----------------------------------------------------------- */
.kma-skip { position: absolute; left: 8px; top: -60px; z-index: 100001; background: var(--g-cta); color: #fff; font-weight: 700; padding: .7rem 1.1rem; text-decoration: none; }
.kma-skip:focus { top: 8px; outline: 3px solid #fff; outline-offset: 2px; }

/* ========================================================================== */
/* TOP UTILITY BAR                                                            */
/* ========================================================================== */
.kma-topbar { background: var(--ink2); color: #c9cec2; font-size: .8rem; }
/* flex-wrap: rows may stack under text-only zoom (large browser font size) so the
   bar reflows instead of overflowing the viewport. No effect at default size — the
   row fits on one line, so nothing wraps and desktop appearance is unchanged. */
.kma-topbar__wrap { max-width: var(--wrap); margin: 0 auto; padding: .25rem 24px; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; }
/* Allow the licence line to break under extreme zoom rather than force a long
   nowrap row wider than the viewport (removed the old white-space: nowrap). */
.kma-topbar__lic { margin: 0; font-family: var(--font-mono); letter-spacing: .02em; color: #b7bcb0; font-variant-numeric: tabular-nums; }
.kma-topbar__right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }
/* Links: padded to a >=24px target (WCAG 2.5.8), visible focus on the dark bar.
   Hover = background highlight (matches the nav), never underline. */
.kma-topbar__link { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .5rem; color: #dfe3d8; text-decoration: none; font-weight: 600; white-space: nowrap; }
.kma-topbar__link:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.kma-topbar__link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kma-topbar__link i { color: var(--bright); font-size: .8rem; }
.kma-topbar__link[href^="tel"] { font-variant-numeric: tabular-nums; }
.kma-topbar__social { display: inline-flex; align-items: center; gap: .3rem; }
.kma-topbar__social a { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #dfe3d8; }
.kma-topbar__social a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.kma-topbar__social a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Staged collapse so the bar never overflows: email goes first, then the licence.
   Breakpoints in em (1100px / 760px at the 16px default) so a larger *browser*
   font-size preference — the real text-only-zoom path (WCAG 1.4.4) — collapses the
   bar early, exactly as a narrower viewport would. Identical to the old px values
   at the default font size, so desktop is unchanged. */
@media (max-width: 68.75em) { .kma-topbar__link[href^="mailto"] { display: none; } }
@media (max-width: 47.5em) {
	.kma-topbar__lic { display: none; }
	.kma-topbar__wrap { justify-content: center; }
}

/* ========================================================================== */
/* HEADER (sticky white bar, centered nav)                                    */
/* ========================================================================== */
.kma-site-header { position: sticky; top: 0; z-index: 1000; background: var(--paper); border-bottom: 1px solid var(--line); color: var(--ink2); clear: both; }
.kma-site-header a { color: inherit; }
/* flex-wrap so logo / nav / actions can stack under text-only zoom rather than force
   one nowrap row wider than the viewport. At the default size everything fits on one
   line, so nothing wraps and the desktop header is unchanged. */
.kma-site-header .kma-hwrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; min-height: 82px; }
.kma-site-header .kma-logo { flex: none; display: inline-flex; align-items: center; padding: .55rem 0; }
.kma-site-header .kma-logo img { display: block; height: 58px; width: auto; }
.kma-site-header .kma-hactions { flex: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* Quote CTA — white text (scoped to beat `.kma-site-header a { color: inherit }`). */
.kma-quote { display: inline-flex; align-items: center; gap: .5rem; background: var(--g-cta); font-weight: 700; font-size: .95rem; padding: .8rem 1.3rem; border: 2px solid var(--g-cta); text-decoration: none; white-space: nowrap; }
.kma-site-header .kma-quote, .kma-site-header .kma-quote:hover, .kma-nav__foot .kma-quote { color: #fff; }
.kma-quote:hover { background: var(--g-cta-h); border-color: var(--g-cta-h); }
.kma-quote:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }

/* ---- Primary navigation (desktop, centered) ------------------------------ */
.kma-nav { flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); }
/* flex-wrap so the centered link row breaks onto multiple lines under text-only zoom
   instead of forcing a single row wider than the header. min-width: 0 above lets the
   nav shrink to that wrapped width. At the default size the links fit on one line, so
   nothing wraps — desktop nav is unchanged. */
.kma-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem; }
.kma-nav li { position: relative; margin: 0; }
.kma-nav a { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink2); line-height: 1; padding: .8rem .7rem; white-space: nowrap; }
/* Top-level labels: brand display face */
.kma-nav > ul > li > a { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; }
/* hover / active / current use a mist background (not a green border) */
.kma-nav a:hover, .kma-nav a:active { color: var(--g-cta); background: var(--mist); }
.kma-nav .current-menu-item > a, .kma-nav .current_page_item > a, .kma-nav .current-menu-parent > a, .kma-nav [aria-current="page"] { color: var(--g-cta); background: var(--mist); }
.kma-nav a:focus-visible, .kma-nav button:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }
.kma-nav__foot { display: none; }

/* Submenu disclosure button + chevron (click-to-open, all breakpoints).
   The label link navigates to the hub page; this sibling button opens the
   dropdown (WAI-ARIA APG Disclosure Navigation). The chevron rotates via an
   icon swap (down icon ↔ up icon below), never a transform — FLAT rule. */
.kma-nav .kma-subtoggle { appearance: none; background: transparent; border: 0; color: var(--ink2); cursor: pointer; padding: .55rem .4rem; margin-left: -.15rem; display: inline-flex; align-items: center; line-height: 1; min-width: 30px; min-height: 34px; justify-content: center; }
.kma-nav .kma-subtoggle:hover { color: var(--g-cta); }
/* Desktop: label + button read as one inline split control, vertically centred.
   em (1241px @16) so it pairs with the em-based mobile breakpoint below. */
@media (min-width: 77.5625em) {
	.kma-nav .menu-item-has-children { display: flex; align-items: center; }
}
.kma-nav .kma-subtoggle[aria-expanded="true"] { color: var(--g-cta); }
.kma-nav .kma-caret { font-size: .72rem; line-height: 1; }
.kma-nav .kma-caret--up { display: none; }
.kma-nav .kma-subtoggle[aria-expanded="true"] .kma-caret--down { display: none; }
.kma-nav .kma-subtoggle[aria-expanded="true"] .kma-caret--up { display: inline; }

/* Submenu panel */
.kma-nav .sub-menu { list-style: none; margin: 0; padding: .4rem 0; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--paper); border: 1px solid var(--line2); border-top: 3px solid var(--g); z-index: 100; display: none; }
/* Click-to-open: the disclosure button controls the dropdown. */
.kma-nav .kma-subtoggle[aria-expanded="true"] ~ .sub-menu { display: block; }
/* No-JS fallback: without the button's click handler, reveal on hover / focus-within
   so the submenu links stay reachable. .kma-js is set in <head> before paint, so a
   JS browser never sees this (no hover-flash) and opens strictly on click. */
html:not(.kma-js) .kma-nav .menu-item-has-children:hover > .sub-menu,
html:not(.kma-js) .kma-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.kma-nav .sub-menu li { position: static; }
.kma-nav .sub-menu a { display: block; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; padding: .6rem 1.1rem; font-weight: 500; font-size: .92rem; border-bottom: 0; white-space: nowrap; }
.kma-nav .sub-menu a:hover { background: var(--mist); color: var(--g-cta); }

/* Hamburger — hidden on desktop (borderless dark icon) */
.kma-navtoggle { display: none; appearance: none; background: transparent; border: 0; color: var(--ink2); cursor: pointer; width: 46px; height: 46px; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; }
.kma-navtoggle:hover { background: var(--mist); color: var(--g-cta); }
.kma-navtoggle:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }
.kma-navtoggle .kma-navtoggle__close { display: none; }
.kma-navtoggle[aria-expanded="true"] .kma-navtoggle__open { display: none; }
.kma-navtoggle[aria-expanded="true"] .kma-navtoggle__close { display: inline; }

/* ========================================================================== */
/* MOBILE NAV (<= 1240px / 77.5em)                                            */
/* em, not px: a larger browser font-size preference (real text-only zoom,     */
/* WCAG 1.4.4) then collapses the desktop nav to the hamburger just as a       */
/* narrower viewport does. 77.5em == 1240px at the 16px default, so the        */
/* desktop/mobile switch is byte-identical at the default font size.           */
/* (An author html{font-size} — e.g. the puppeteer repro — does not move em    */
/* media queries, so the flex-wrap rules above are what keep that path from    */
/* overflowing; this breakpoint serves the genuine browser-preference path.)   */
/* ========================================================================== */
@media (max-width: 77.5em) {
	.kma-site-header .kma-logo img { height: 48px; }
	.kma-site-header .kma-hactions { margin-left: auto; } /* push actions right when nav is collapsed */
	.kma-quote { padding: .7rem 1rem; font-size: .88rem; }

	.kma-nav { flex: none; }
	.kma-nav > ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: .5rem 0; }
	.kma-nav li { border-top: 1px solid var(--line); }
	.kma-nav > ul > li:first-child { border-top: 0; }
	/* display:flex makes each link fill its (stretched) row so the hover /
	   current-page background spans the FULL menu width on touch, not just the
	   label's ink. */
	.kma-nav a, .kma-nav > ul > li > a { display: flex; padding: .95rem 24px; border-bottom: 0; font-size: 1.1rem; letter-spacing: .03em; }
	.kma-nav a:hover { background: var(--mist); border-bottom: 0; }
	.kma-nav .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.kma-nav .menu-item-has-children > a { flex: 1; }
	.kma-nav .kma-subtoggle { margin: 0; padding: .95rem 24px; min-width: 56px; }
	.kma-nav .sub-menu { position: static; border: 0; border-top: 1px solid var(--line); min-width: 0; width: 100%; padding: 0; background: var(--mist); display: block; }
	.kma-nav .sub-menu a { padding: .8rem 24px .8rem 40px; font-size: 1rem; }
	.kma-nav__foot { display: flex; flex-wrap: wrap; gap: .8rem; padding: 1.1rem 24px 1.3rem; border-top: 1px solid var(--line); }
	.kma-nav__foot .kma-quote { flex: 1; justify-content: center; }
	.kma-nav__foot .kma-nav__phone { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 2px solid var(--line2); color: var(--g-cta); font-weight: 700; padding: .7rem 1rem; text-decoration: none; white-space: nowrap; }
	.kma-nav__foot .kma-nav__phone:hover { border-color: var(--g); }

	/* Collapsed is the CSS DEFAULT — no .kma-js gate. The old `.kma-js .kma-nav`
	   gating assumed the <head> classList script ran before first paint, but
	   LiteSpeed (prod) defers ALL inline scripts: the page painted with the menu
	   EXPANDED, then collapsed when the deferred script ran — a ~full-viewport
	   layout shift (PSI mobile CLS 0.875, hero overlay culprit). Collapsing by
	   default paints the final layout immediately; true no-JS users get the
	   expanded nav back via the <noscript> style printed late in wp_head by
	   kma_chrome_js_flag() (inc/chrome.php). */
	.kma-navtoggle { display: inline-flex; }
	.kma-site-header .kma-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 3px solid var(--g); max-height: calc(100vh - 82px); overflow-y: auto; z-index: 1000; }
	.kma-site-header .kma-nav.is-open { display: block; }
	.kma-site-header .kma-nav .sub-menu { display: none; }
	.kma-site-header .kma-nav .kma-subtoggle[aria-expanded="true"] ~ .sub-menu { display: block; }
}
@media (max-width: 37.5em) {
	/* The Quote CTA lives inside the opened mobile menu (.kma-nav__foot) and the
	   top bar keeps the phone, so drop it from the crowded header bar on phones.
	   em (600px @16) to match the other chrome breakpoints under browser zoom. */
	.kma-site-header .kma-hactions .kma-quote { display: none; }
}

/* ========================================================================== */
/* FOOTER — white + flat: brand band → footer nav + contact → dark base bar   */
/* Icons are the site's one icon set (self-hosted FA solid, same glyphs as    */
/* the topbar / hero / contact aside); social brand marks stay inline SVG     */
/* (the brands webfont isn't shipped).                                        */
/* ========================================================================== */
.kma-site-footer { background: var(--paper); color: var(--body); clear: both; font-size: .95rem; line-height: 1.65; }
.kma-site-footer a { color: var(--g-cta); text-decoration: none; }
/* Re-assert vs legacy boilerplate.css `li,p{color:#221E1F}` + style.css font-size. */
.kma-site-footer li, .kma-site-footer p, .kma-site-footer span { color: inherit; font-size: inherit; }
.kma-site-footer .kma-fwrap { max-width: var(--wrap); margin: 0 auto; padding-block: clamp(2.6rem, 5vw, 3.4rem); padding-inline: 24px; }

/* Brand band — logo + one-line positioning + social over a hairline rule */
.kma-site-footer .kma-fbrand { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; padding-bottom: 1.9rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.kma-site-footer .kma-fbrand__logo { display: inline-flex; flex: none; }
.kma-site-footer .kma-fbrand__logo:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 3px; }
.kma-site-footer .kma-fbrand__logo img { height: 54px; width: auto; display: block; }
/* Explicit Inter — legacy boilerplate.css `p{font-family:'Gotham-Rounded-Book'…}`
   (0,0,1) was overriding the inherited Inter on this <p>. Keep the inherited size. */
.kma-site-footer .kma-fbrand__line { flex: 1 1 26ch; margin: 0; max-width: 52ch; color: var(--muted); font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.55; }
.kma-site-footer .kma-fsocial { display: flex; gap: .6rem; margin-left: auto; }
.kma-site-footer .kma-fsocial a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); color: var(--g-cta); }
.kma-site-footer .kma-fsocial a:hover { background: var(--g-cta); border-color: var(--g-cta); color: #fff; }
.kma-site-footer .kma-fsocial a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }

/* Column headings — the system's mono label role */
.kma-site-footer h2 { font-family: var(--font-mono); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.2rem; }

/* Grid: footer nav (3 columns) + Get in touch */
.kma-site-footer .kma-fgrid { display: grid; grid-template-columns: minmax(0, 2.9fr) minmax(0, 1.3fr); gap: 2.4rem 3.4rem; align-items: start; }
.kma-site-footer .kma-fnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 2rem; }
/* Footer nav lists — base font is the Inter sans stack, re-asserted on the li
   AND the a so the legacy boilerplate.css `li { font-family: … }` element rule
   can't leak the old Gotham face in (the mono contact list keeps its own
   family — it isn't a .kma-flist). */
.kma-site-footer .kma-flist { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); }
.kma-site-footer .kma-flist li { margin: 0 0 .65rem; font-family: var(--font-sans); }
/* Canonical link affordance: underline on hover, NOT a background block. */
/* overflow-wrap so an unbreakable location name (e.g. "Parramatta") in a tight
   footer grid column can break under text-only zoom instead of spilling past the
   viewport; inert at the default size where the word already fits (matches the
   .kma-fcontact links below). */
.kma-site-footer .kma-flist a { color: var(--body); font-weight: 500; font-family: var(--font-sans); text-decoration: none; overflow-wrap: anywhere; }
.kma-site-footer .kma-flist a:hover { color: var(--g-cta); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
.kma-site-footer .kma-flist a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 3px; }
.kma-site-footer .kma-flist .sub-menu { display: none; }
/* "View all" rows — green, with the system's arrow affordance */
.kma-site-footer .kma-flist a.kma-fall { color: var(--g-cta); font-weight: 600; }
.kma-site-footer .kma-fall i { font-size: .78em; margin-left: .25rem; }
/* Current page — aria-current on the hard-coded columns (Our services / Areas
   serviced), current-menu-item/current_page_item on the footer-menu column. Weight,
   not colour alone, carries the state (WCAG 1.4.1). Placed after .kma-fall so a
   current "All services/areas" link still reads as active. */
.kma-site-footer .kma-flist a[aria-current="page"],
.kma-site-footer .kma-flist .current-menu-item > a,
.kma-site-footer .kma-flist .current_page_item > a { color: var(--g-cta); font-weight: 700; }

/* Get in touch — unboxed column; hierarchy comes from type, not a panel */
.kma-site-footer .kma-faddress { font-style: normal; } /* <address> defaults to italic */
/* Contact details in the system's mono meta role (numerals/IDs), small. */
.kma-site-footer .kma-fcontact { list-style: none; margin: 0 0 1.5rem; padding: 0; font-family: var(--font-sans); font-size: .9rem; font-variant-numeric: tabular-nums; }
/* Re-assert the Inter sans family on the li AND its text children — the legacy
   boilerplate.css `li { font-family: Gotham }` element rule (0,0,1) beats the
   family the li would inherit from the .kma-fcontact ul, leaking Gotham into the
   phone/email/address rows. Mirrors the .kma-flist guard above. */
.kma-site-footer .kma-fcontact li, .kma-site-footer .kma-fcontact li a, .kma-site-footer .kma-fcontact li span { font-family: var(--font-sans); }
.kma-site-footer .kma-fcontact li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .8rem; color: var(--body); min-width: 0; }
/* Icon line-height 1.4 × .92rem ≈ text line-height 1.65 × .78rem — first lines align. */
.kma-site-footer .kma-fcontact i { flex: none; color: var(--g-cta); font-size: .92rem; line-height: 1.4; }
.kma-site-footer .kma-fcontact li > span, .kma-site-footer .kma-fcontact li > a { overflow-wrap: anywhere; min-width: 0; }
/* Email: break only at the <wbr> (before .com.au), not mid-word. */
.kma-site-footer .kma-fcontact__mail { overflow-wrap: normal; font-size: .76rem; }
.kma-site-footer .kma-fcontact a { color: var(--body); font-weight: 400; text-decoration: none; }
.kma-site-footer .kma-fcontact a:hover { color: var(--g-cta); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
.kma-site-footer .kma-fcontact a:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 3px; }
/* The phone is the primary conversion path — the strongest row in the column. */
.kma-site-footer .kma-fcontact a.kma-fcontact__tel { font-weight: 700; font-size: .95rem; color: var(--ink2); }
.kma-site-footer .kma-fcontact a.kma-fcontact__tel:hover { color: var(--g-cta); }

/* Actions */
.kma-site-footer .kma-factions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.kma-site-footer .kma-fquote { display: inline-flex; align-items: center; gap: .55rem; background: var(--g-cta); color: #fff; font-weight: 700; padding: .8rem 1.3rem; border: 2px solid var(--g-cta); }
.kma-site-footer .kma-fquote:hover { background: var(--g-cta-h); border-color: var(--g-cta-h); color: #fff; }
.kma-site-footer .kma-fquote:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 2px; }
.kma-site-footer .kma-fdir { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: var(--g-cta); text-decoration: none; }
.kma-site-footer .kma-fdir:hover { color: var(--g-cta-h); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
.kma-site-footer .kma-fdir:focus-visible { outline: 3px solid var(--g-cta); outline-offset: 3px; }
.kma-site-footer .kma-fdir i { font-size: .95em; }

/* Bottom bar — dark, grounds the light footer */
.kma-site-footer .kma-fbar { background: var(--ink2); color: #a9aea2; }
.kma-site-footer .kma-fbar__wrap { max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 24px; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center; font-size: .82rem; }
.kma-site-footer .kma-fbar__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.5rem; min-width: 0; }
.kma-site-footer .kma-fbar a { color: #dfe3d8; }
.kma-site-footer .kma-flic { font-family: var(--font-mono); letter-spacing: .02em; color: #9aa093; font-variant-numeric: tabular-nums; }
/* Legal links (Privacy · Terms) — pushed to the right of the bar (sit just left
   of the agency badge), canonical underline hover on the dark bar */
.kma-site-footer .kma-fbar__links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-left: auto; }
.kma-site-footer .kma-fbar__links a { text-decoration: none; }
.kma-site-footer .kma-fbar__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
.kma-site-footer .kma-fbar__links a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kma-site-footer .kma-fbar__links a[aria-current="page"] { color: #fff; font-weight: 700; }
/* Agency credit — self-contained white "Powered by AiiMS" badge on the dark bar;
   slightly dimmed at rest, full white on hover. */
.kma-site-footer .kma-fpowered { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.kma-site-footer .kma-fpowered img { height: 30px; width: auto; display: block; opacity: .8; }
.kma-site-footer .kma-fpowered:hover img { opacity: 1; }
.kma-site-footer .kma-fpowered:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- Shared hero floor ----------------------------------------------------
   `.kma-hero` is the common class across every family (page / location / home /
   service / gallery / blog); the family sheets set only background/colour on it,
   not size. This one site-wide rule gives every hero a consistent minimum height
   (they ranged 437–580px) and vertically centres the content within it — without
   shrinking the taller ones. Desktop-only: mobile heroes stack and exceed the
   floor naturally, so they're left untouched. The utility no-card hero (search)
   and the blog single (editorial featured-image hero) are exempt — the first so
   it doesn't become an empty cavern, the second so an article header keeps its
   natural height. */
@media (min-width: 768px) {
	.kma-hero { min-height: 540px; display: flex; flex-direction: column; justify-content: center; }
	.kma-hero:has(.kma-hero__grid--nocard),
	.kma-single .kma-hero { min-height: 0; display: block; }
}

@media (max-width: 980px) {
	/* Contact drops below the three nav columns */
	.kma-site-footer .kma-fgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.kma-site-footer .kma-fbrand { padding-bottom: 1.5rem; margin-bottom: 2rem; }
	.kma-site-footer .kma-fsocial { margin-left: 0; }
	/* One menu column per row on mobile (client request). */
	.kma-site-footer .kma-fnav { grid-template-columns: minmax(0, 1fr); }
	.kma-site-footer .kma-fbar__wrap { justify-content: flex-start; }
	/* Stacked layout: don't right-shove the legal links, keep them left-aligned. */
	.kma-site-footer .kma-fbar__links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.kma-topbar *, .kma-site-header *, .kma-site-footer * { transition: none !important; animation: none !important; }
}