/*
Theme Name: Knight Marketing
Theme URI: https://knightmarketingfirm.com
Description: Knight Marketing's child theme of Twenty Twenty-Five, generated by Knight AI from the brand tokens. Build 1.0.38.
Author: Knight Marketing
Author URI: https://knightmarketingfirm.com
Template: twentytwentyfive
Version: 1.0.38
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: knight-marketing
*/

/* Everything a token can say lives in theme.json. These rules are the
   layouts, the bands, the hero illustration, the sticky bar and the one
   motion the brief allows. Classes are km-*; a page never carries a colour. */

:root {
  --km-radius: 0.75rem;
  --km-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.08), 0 1px 1px rgba(11, 31, 58, 0.04);
  --km-shadow-md: 0 2px 4px rgba(11, 31, 58, 0.08), 0 14px 36px rgba(11, 31, 58, 0.12);
  --km-band-pad: clamp(2.5rem, 6vw, 4.5rem);
  --km-focus: var(--wp--preset--color--navy-600);
}
html { scroll-padding-top: 5.5rem; }
body { font-size: 1.125rem; line-height: 1.6; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.5rem); max-width: 26ch; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -0.01em; }
p, li { max-width: 68ch; }
:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 2px; }

/* No gap between the header, the page's bands and the footer: WordPress's
   block gap put a strip of paper above the hero and above the footer. */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
main.wp-block-group > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
main.wp-block-group > .alignfull + .alignfull { margin-block-start: 0 !important; }

/* Sections and bands: one padding scale; only the background and the width change.
   A band is a full-width group with the background; inside it a wide group
   whose children sit on ONE LEFT EDGE (WordPress's constrained layout centres
   every child otherwise; justifyContent left on the inner group wins). */
.km-section { padding-top: var(--km-band-pad); padding-bottom: var(--km-band-pad); }
/* The bands sit inside the main's constrained wrapper, where WordPress's
   block gap (20 px) opened a strip of body colour between every two bands
   (measured 2026-11-04). The band's own padding is the only rhythm. */
main :is(.km-section, .km-hero) { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.km-band-inner.is-layout-constrained > :where(:not(.alignfull)) { margin-left: 0 !important; margin-right: auto !important; }
/* Grids, columns, steps and timelines run the band's full wide width; prose keeps its measure. */
.km-band-inner > :is(.km-grid, .wp-block-columns, .km-steps, .km-timeline, .km-founder, .km-founder-wrap, .alignwide) { max-width: none !important; width: 100%; }
.km-section h2 + p, .km-section .km-eyebrow + h2 { margin-top: 0.5rem; }
.km-section > .km-band-inner > h2:first-child, .km-section > .km-band-inner > .km-eyebrow:first-child { margin-top: 0; }
.km-eyebrow { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--amber-ink); }
/* The amber rule before each eyebrow: the scanner's mark that a new section starts. */
.km-eyebrow::before { content: ""; display: inline-block; width: 1.75rem; height: 3px; border-radius: 2px; margin-right: 0.6rem;
  vertical-align: 0.2em; background: var(--wp--preset--color--amber); }
.km-lead { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.4;
  max-width: 40ch; color: var(--wp--preset--color--ink-muted); }
.km-fine { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }
.km-band-paper { background: var(--wp--preset--color--paper); }
.km-band-tint { background: var(--wp--preset--color--navy-50); }
.km-band-warm { background: var(--wp--preset--color--amber-100); }
.km-band-navy { background: linear-gradient(160deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-700) 100%);
  color: var(--wp--preset--color--white); --km-focus: var(--wp--preset--color--amber); }
/* The drawn scenes and the results page are white cards on the navy band and keep their own ink. */
.km-band-navy :is(h1, h2, h3, p, li, dt, dd):not(.km-scene *, .km-serp *) { color: var(--wp--preset--color--white); }
.km-band-navy .km-lead, .km-band-navy .km-fine { color: var(--wp--preset--color--navy-muted); }
.km-band-navy .km-eyebrow { color: var(--wp--preset--color--amber); }
.km-band-navy a:not(.wp-block-button__link) { color: var(--wp--preset--color--amber-400); }
.km-band-navy .km-card { background: var(--wp--preset--color--navy-800); border-color: rgba(255, 255, 255, 0.14); }

/* Header: navy (the logo is white on transparent), two-level navigation, the phone and the one primary button. */
.km-header { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); --km-focus: var(--wp--preset--color--amber);
  position: sticky; top: 0; z-index: 40; box-shadow: var(--km-shadow-md); padding-top: 0.6rem; padding-bottom: 0.6rem; }
.km-header .wp-block-site-logo img { max-height: 48px; width: auto; }
.km-header .wp-block-navigation { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.95rem; }
.km-header .wp-block-navigation a, .km-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--white); }
.km-header .wp-block-navigation a:hover { color: var(--wp--preset--color--amber-400); }
/* WordPress paints a submenu white with black text unless the navigation
   block has its own background; its rule outranked ours, so the dropdown's
   white links were invisible until hovered (Michael 2026-11-04: "nothing is
   shown in the drop down until you hover over it"). */
.km-header .wp-block-navigation .wp-block-navigation__submenu-container,
.km-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background: var(--wp--preset--color--navy-800) !important;
  color: var(--wp--preset--color--white) !important; border: 0 !important; border-radius: 0.5rem; padding: 0.5rem 0; box-shadow: var(--km-shadow-md); }
.km-header .wp-block-navigation__submenu-container a, .km-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--white) !important; }
.km-header .wp-block-navigation__submenu-container a:hover { color: var(--wp--preset--color--amber-400) !important; }
.km-header .wp-block-navigation__responsive-container-open, .km-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--white); }
/* The open mobile menu: WordPress paints it white unless the block has its
   own background, so the white items vanished (Michael 2026-11-04, "white
   on white"). Navy overlay, white items on the left, submenus as indented
   lists rather than boxes, the close button white. */
.km-header .wp-block-navigation__responsive-container.is-menu-open,
.km-header .wp-block-navigation__responsive-container:not(.has-background).is-menu-open { background: var(--wp--preset--color--navy) !important; color: var(--wp--preset--color--white) !important; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 1.5rem; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; gap: 1.1rem; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start !important; align-items: flex-start; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.km-header .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--white) !important; font-size: 1.15rem; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; box-shadow: none; padding: 0.25rem 0 0.25rem 1rem !important; border-left: 2px solid rgba(255, 255, 255, 0.25); border-radius: 0; }
.km-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { font-size: 1rem; color: var(--wp--preset--color--navy-muted) !important; }
.km-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--white) !important; }
.km-header-actions { gap: 1rem; align-items: center; }
.km-header-phone a { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--amber-400);
  text-decoration: none; font-size: 1.05rem; }
.km-header-phone a:hover { text-decoration: underline; }
.km-header-phone { margin: 0; }
.km-header .wp-block-button.is-style-amber .wp-block-button__link { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); }

/* The mobile action bar: two 48 px buttons, Call and Get the audit. The
   !important beats the per-block layout class WordPress emits (display: flex). */
.km-mobile-bar { display: none !important; }
@media (max-width: 781px) {
  body { padding-bottom: 4.5rem; }
  .km-mobile-bar { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 0.5rem; padding: 0.5rem 1rem;
    background: var(--wp--preset--color--navy); box-shadow: 0 -4px 16px rgba(11, 31, 58, 0.25); }
  .km-mobile-bar .wp-block-button { flex: 1; margin: 0; }
  .km-mobile-bar .wp-block-button__link { width: 100%; text-align: center; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .km-mobile-bar .wp-block-button.is-style-outline-navy .wp-block-button__link { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white); }
  .km-header-actions { display: none !important; }
  html { scroll-padding-bottom: 5rem; }
}

/* Buttons: amber carries navy text (never white); the outline is navy on paper, white on navy. */
.km-cta { gap: 0.75rem; align-items: center; }
/* wpautop wraps a shortcode button in empty paragraphs; as flex children they took a share of the row (phones, 2026-11-04). */
.wp-block-buttons > p { display: none; }
.wp-block-button__link { font-family: var(--wp--preset--font-family--display); font-weight: 700; border-radius: 0.5rem; }
.wp-block-button.is-style-amber .wp-block-button__link { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-amber .wp-block-button__link:hover { background: var(--wp--preset--color--amber-400); color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-outline-navy .wp-block-button__link { background: transparent; color: var(--wp--preset--color--navy);
  border: 2px solid var(--wp--preset--color--navy); }
.km-band-navy .wp-block-button.is-style-outline-navy .wp-block-button__link { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--white); }

/* The hero: words left, the drawn scene right. The H1's size follows its
   length (the renderer sets the class): a short claim sits in the brief's
   80-110 px band; a sentence-length H1 at that size ran seven lines. */
.km-hero h1 { font-size: clamp(2.25rem, 6.4vw, 6.25rem); max-width: 13ch; overflow-wrap: anywhere; }
.km-hero h1.is-long { font-size: clamp(2rem, 4.6vw, 4.5rem); max-width: 18ch; }
.km-hero h1.is-very-long { font-size: clamp(1.75rem, 3.6vw, 3.5rem); max-width: 22ch; }
/* The photo hero (home, 2026-11-04): the photograph fills the band, a navy
   scrim fades from solid on the left (under the words, 4.5:1 and more) to
   almost clear on the right where the subject stands; on a phone the crop
   keeps the right side and the scrim covers the whole picture. */
.km-hero-photo { position: relative; overflow: hidden; min-height: clamp(30rem, 56vw, 46rem); display: flex; align-items: center; }
/* WordPress's constrained layout caps a child at content width and centres it; the photo and the copy block opt out. */
.km-hero-photo .km-hero-img { position: absolute; inset: 0; width: 100% !important; max-width: none !important; height: 100%; object-fit: cover; object-position: 72% 0%; z-index: 0; margin: 0 !important; }
.km-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11, 31, 58, 0.91) 0%, rgba(11, 31, 58, 0.86) 50%, rgba(11, 31, 58, 0.22) 62%, rgba(11, 31, 58, 0.04) 100%); }
/* The band is a flex row (to centre the words vertically): the wide inner group must take the full width or it shrinks to its content and the auto margins centre it. */
.km-hero-photo > .km-band-inner { position: relative; z-index: 2; width: 100%; flex: 0 0 100%; }
.km-hero-photo .km-hero-copy { max-width: 38rem; margin-left: 0 !important; margin-right: auto !important; }
.km-hero-photo .km-hero-copy > * { margin-left: 0 !important; }
/* Phones (Michael 2026-11-04, "the phone version needs some slight adjustment,
   mostly the hero image"): the picture is its own bright block on top,
   cropped 4:3 to the subject and the sign, no fade; the words sit on solid
   navy under it. A picture stretched to cover a tall band showed a slice. */
@media (max-width: 781px) {
  .km-hero-photo { display: block; min-height: 0; padding-top: 0; }
  .km-hero-photo .km-hero-img { position: static; width: 100vw !important; max-width: none !important; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; object-position: 100% 15%; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; display: block; }
  .km-hero-photo::before { display: none; }
  .km-hero-photo > .km-band-inner { padding-top: 1.75rem; padding-bottom: 0.5rem; }
  .km-eyebrow { font-size: 0.72rem; letter-spacing: 0.08em; }
  .km-mobile-bar .wp-block-button__link { font-size: 0.85rem; white-space: nowrap; padding-left: 0.75rem; padding-right: 0.75rem; }
  /* The hero's two buttons share one row on a phone, flush left, no wrapping (Michael 2026-11-04). */
  .km-hero .km-cta { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
  .km-hero .km-cta > * { flex: 1 1 0; margin: 0 !important; min-width: 0; }
  .km-hero .km-cta .wp-block-button__link { width: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; letter-spacing: 0.02em;
    white-space: nowrap; padding: 0.85rem 0.5rem; min-height: 48px; }
}
.km-services-note { font-family: var(--wp--preset--font-family--display); font-weight: 600; margin-top: 1.5rem; }
.km-services-note a { color: var(--wp--preset--color--navy-600); }
.km-hero .wp-block-columns { gap: 2.5rem; }
.km-hero .wp-block-column > :first-child { margin-top: 0; }
.km-hero .km-lead { max-width: 36ch; }
.km-proof-line { max-width: none; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600;
  letter-spacing: 0.02em; }
.km-proof-line span + span::before { content: "\00a0\00b7\00a0"; opacity: 0.6; }
.km-hero-image img { width: 100%; height: auto; border-radius: var(--km-radius); }

/* The drawn results page (Hook Agency's idea): five cards for a fictional business, labelled as an illustration. Pure CSS, zero LCP cost. */
.km-serp { background: var(--wp--preset--color--white); border-radius: var(--km-radius); box-shadow: var(--km-shadow-md); padding: 1.25rem; margin: 0; }
.km-serp .km-serp-query { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); font-size: 0.95rem;
  border: 1px solid var(--wp--preset--color--mist); border-radius: 999px; padding: 0.5rem 1rem; margin: 0 0 0.75rem; max-width: none; }
.km-serp .km-serp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--wp--preset--color--mist);
  border-radius: 0.5rem; padding: 0.6rem 0.85rem; margin: 0 0 0.5rem; }
.km-serp .km-serp-row.is-you { border-color: var(--wp--preset--color--amber-700); background: var(--wp--preset--color--amber-100); }
.km-serp .km-serp-label { font-family: var(--wp--preset--font-family--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wp--preset--color--amber-ink); margin: 0; }
.km-serp .km-serp-name { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--navy); margin: 0; font-size: 0.95rem; }
.km-serp .km-serp-stars { color: var(--wp--preset--color--amber-ink); font-size: 0.85rem; margin: 0; white-space: nowrap; }
.km-serp figcaption { font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); text-align: right; margin-top: 0.5rem; }

/* Pages of the anonymised sample report, stacked with a step so the stack reads as a document. */
.km-sample-stack { margin: 0; position: relative; display: grid; }
.km-sample-stack img { width: 100%; height: auto; border-radius: 0.5rem; box-shadow: var(--km-shadow-md); border: 1px solid var(--wp--preset--color--mist); background: var(--wp--preset--color--white); }
.km-sample-stack img + img { margin-top: -62%; margin-left: 6%; width: 94%; }
.km-sample-stack img + img + img { margin-left: 12%; width: 88%; }
.km-sample-stack figcaption { font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); text-align: right; margin-top: 0.75rem; }
.km-inside-list li { margin-bottom: 0.6rem; }
/* The landing header: no navigation, the logo and the actions only. */
.km-header-landing .km-header-actions { margin-left: auto; }
.km-footer-landing { padding-top: 2rem; }
.km-footer-landing .km-fine { border-top: 0; margin-top: 0; padding-top: 0; }
.km-footer-landing .km-landing-contact { color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.km-outcomes li { margin-bottom: 0.7rem; }

/* The scenes: one white card family, each page kind drawn as the thing it is
   about (a listing, reviews, an inbox, a chart, an ad, a post, a site, a
   brand sheet, an infrastructure check, a month's plan, a form). */
.km-scene { background: var(--wp--preset--color--white); border-radius: var(--km-radius); box-shadow: var(--km-shadow-md); padding: 1.25rem; margin: 0;
  font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--ink); }
.km-scene p { margin: 0; max-width: none; }
.km-scene figcaption { font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); text-align: right; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--body); }
.km-scene-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.km-scene-title { font-weight: 800; color: var(--wp--preset--color--navy); font-size: 1rem; letter-spacing: -0.01em; }
.km-scene-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--amber-ink); }
.km-scene-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--wp--preset--color--mist);
  border-radius: 0.5rem; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.km-scene-row.is-you { border-color: var(--wp--preset--color--amber-700); background: var(--wp--preset--color--amber-100); }
.km-scene-row strong { color: var(--wp--preset--color--navy); font-weight: 700; }
.km-scene-row .km-scene-right { color: var(--wp--preset--color--amber-ink); font-size: 0.85rem; white-space: nowrap; }
.km-scene-row .km-scene-check { color: var(--wp--preset--color--amber-ink); font-weight: 800; }
.km-scene-map { height: 7rem; border-radius: 0.5rem; margin-bottom: 0.75rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--wp--preset--color--navy-50) 0%, var(--wp--preset--color--mist) 100%); }
.km-scene-map::before, .km-scene-map::after { content: ""; position: absolute; background: rgba(11, 31, 58, 0.12); }
.km-scene-map::before { left: 0; right: 0; top: 45%; height: 0.6rem; }
.km-scene-map::after { top: 0; bottom: 0; left: 62%; width: 0.6rem; }
.km-scene-pin { position: absolute; left: 58%; top: 28%; width: 1.4rem; height: 1.4rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--wp--preset--color--amber); box-shadow: var(--km-shadow-sm); z-index: 1; }
.km-scene-stars { color: var(--wp--preset--color--amber-ink); letter-spacing: 0.05em; }
.km-scene-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; align-items: end; height: 8.5rem; margin: 0.5rem 0 0.75rem; }
.km-scene-bars span { display: block; border-radius: 0.3rem 0.3rem 0 0; background: var(--wp--preset--color--navy-600); }
.km-scene-bars span:last-child { background: var(--wp--preset--color--amber); }
.km-scene-axis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; font-size: 0.7rem; color: var(--wp--preset--color--ink-muted); text-align: center; }
.km-scene-post-photo { height: 8rem; border-radius: 0.5rem; margin: 0.6rem 0;
  background: linear-gradient(160deg, var(--wp--preset--color--navy-700) 0%, var(--wp--preset--color--navy-600) 100%); }
.km-scene-avatar { display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wp--preset--color--navy); vertical-align: middle; margin-right: 0.5rem;
  color: var(--wp--preset--color--white); font-weight: 800; font-size: 0.8rem; line-height: 2rem; text-align: center; }
.km-scene-site { border: 1px solid var(--wp--preset--color--mist); border-radius: 0.5rem; overflow: hidden; }
.km-scene-site-bar { background: var(--wp--preset--color--navy); height: 1.6rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.6rem; }
.km-scene-site-bar i { display: block; width: 2.2rem; height: 0.35rem; border-radius: 0.2rem; background: rgba(255, 255, 255, 0.5); }
.km-scene-site-bar i:first-child { width: 1rem; height: 1rem; border-radius: 0.2rem; background: var(--wp--preset--color--amber); }
.km-scene-site-hero { padding: 1rem 0.9rem; }
.km-scene-site-hero b { display: block; height: 0.7rem; width: 70%; border-radius: 0.3rem; background: var(--wp--preset--color--navy); margin-bottom: 0.45rem; }
.km-scene-site-hero b + b { width: 45%; }
.km-scene-site-hero i { display: inline-block; height: 0.6rem; width: 30%; border-radius: 0.3rem; background: var(--wp--preset--color--mist); margin: 0.2rem 0 0.7rem; }
.km-scene-site-hero u { display: inline-block; text-decoration: none; background: var(--wp--preset--color--amber); border-radius: 0.3rem; width: 5rem; height: 1.4rem; }
.km-scene-site-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 0 0.9rem 0.9rem; }
.km-scene-site-cols i { display: block; height: 2.6rem; border-radius: 0.3rem; background: var(--wp--preset--color--navy-50); border: 1px solid var(--wp--preset--color--mist); }
.km-scene-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin: 0 0 0.75rem; }
.km-scene-tiles span { display: grid; place-items: center; min-height: 3.4rem; padding: 0.35rem 0.4rem; border-radius: 0.45rem; text-align: center;
  background: var(--wp--preset--color--navy-50); border: 1px solid var(--wp--preset--color--mist); color: var(--wp--preset--color--navy);
  font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.78rem; line-height: 1.15; letter-spacing: -0.01em; }
.km-scene-tiles span:nth-child(3) { background: var(--wp--preset--color--amber-100); border-color: var(--wp--preset--color--amber-700); }
.km-scene-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin: 0.75rem 0; }
.km-scene-swatches span { display: block; aspect-ratio: 1; border-radius: 0.4rem; border: 1px solid var(--wp--preset--color--mist); }
.km-scene-mark { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--amber); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.km-scene-type { font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; color: var(--wp--preset--color--ink-muted); }
.km-scene-type b { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--navy); font-size: 1.3rem; display: block; }
.km-scene-field { border: 1px solid var(--wp--preset--color--mist); border-radius: 0.5rem; padding: 0.55rem 0.8rem; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--wp--preset--color--ink-muted); }
.km-scene-field b { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--amber-ink); margin-bottom: 0.1rem; }
.km-scene-send { display: inline-block; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); font-weight: 700; font-size: 0.85rem;
  padding: 0.5rem 1rem; border-radius: 0.4rem; }
.km-scene-mail { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--wp--preset--color--mist); padding: 0.55rem 0.2rem; font-size: 0.88rem; }
.km-scene-mail:last-of-type { border-bottom: 0; }
.km-scene-mail i { flex: 0 0 0.6rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--wp--preset--color--mist); font-style: normal; }
.km-scene-mail.is-unread i { background: var(--wp--preset--color--amber); }
.km-scene-mail.is-unread strong { color: var(--wp--preset--color--navy); }
.km-scene-mail span { color: var(--wp--preset--color--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-scene-mail time { margin-left: auto; font-size: 0.75rem; color: var(--wp--preset--color--ink-muted); white-space: nowrap; }

/* Cards: elevation, not decoration (NN/g's Flat 2.0). The lift is the one hover motion. */
.km-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--mist); border-radius: var(--km-radius);
  padding: 1.75rem; height: 100%; position: relative; box-shadow: var(--km-shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease; }
.km-card:hover { transform: translateY(-2px); box-shadow: var(--km-shadow-md); }
.km-card h3 { margin-top: 0; }
.km-card h3 a { text-decoration: none; }
.km-card h3 a:hover { text-decoration: underline; }
.km-card ul { padding-left: 1.1rem; }
.km-card li { margin-bottom: 0.4rem; }
.km-card.is-featured { border-color: var(--wp--preset--color--amber-700); box-shadow: var(--km-shadow-md); }
.km-card.is-start { border-left: 4px solid var(--wp--preset--color--amber); grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 0.5rem 2rem; align-items: center; }
.km-card.is-start > h3 { grid-column: 1; margin: 0; }
.km-card.is-start > .km-price { grid-column: 1; margin: 0; }
.km-card.is-start > p:not(.km-price) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 781px) { .km-card.is-start { display: block; } }
.km-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.km-grid > * { margin: 0 !important; max-width: none; }
.km-grid.km-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.km-grid.km-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.km-grid.km-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 1024px) { .km-grid.km-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.km-ribbon { position: absolute; top: -0.8rem; left: 1.25rem; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy);
  font-family: var(--wp--preset--font-family--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; }
.km-price { font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
  color: var(--wp--preset--color--navy); margin: 0.25rem 0; line-height: 1.1; }
.km-price small, .km-price .km-fine { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 400;
  letter-spacing: 0; color: var(--wp--preset--color--ink-muted); white-space: nowrap; }

/* The facts box: price, turnaround, what you receive, who it is for. Doubles as the sticky bar's content. */
.km-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem 1.5rem; margin: 1.5rem 0;
  background: var(--wp--preset--color--navy-50); border-left: 4px solid var(--wp--preset--color--amber); border-radius: 0 var(--km-radius) var(--km-radius) 0;
  padding: 1.25rem 1.5rem; }
.km-facts div { margin: 0; }
.km-facts dt { font-family: var(--wp--preset--font-family--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted); margin: 0 0 0.2rem; }
.km-facts dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--wp--preset--color--navy); }
/* The reach box (phone, email, hours, place) runs one column so the email never breaks mid-word. */
.km-facts.is-reach { grid-template-columns: 1fr; gap: 0.8rem; }
.km-band-navy .km-facts { background: rgba(255, 255, 255, 0.08); border-left-color: var(--wp--preset--color--amber); }
.km-band-navy .km-facts dt { color: var(--wp--preset--color--amber-400); }
.km-band-navy .km-facts dd { color: var(--wp--preset--color--white); }

/* The founder block: the real portrait and the facts stated as data. */
/* The portrait stretches to the text beside it and crops to fit (Michael 2026-11-04: "crop my image to fit the section as needed"). */
.km-booking-embed { margin-top: 2rem; background: var(--wp--preset--color--white); border-radius: var(--km-radius); box-shadow: var(--km-shadow-md); overflow: hidden; }
.km-booking-embed .km-booking { width: 100%; }
.km-portrait { margin: 0; }
.km-portrait img { width: 100%; max-width: 26rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--km-radius); box-shadow: var(--km-shadow-md); display: block; margin-left: auto; }
@media (max-width: 781px) { .km-portrait img { max-width: 18rem; margin: 0 auto; } }
.km-founder { display: grid; grid-template-columns: 2fr 3fr; gap: 3rem; align-items: stretch; }
@media (min-width: 782px) { .km-founder > img { height: 100%; aspect-ratio: auto; } }
@media (max-width: 781px) { .km-founder { grid-template-columns: 1fr; gap: 1.5rem; } .km-founder img { max-width: 20rem; } }
/* The portrait is cropped to a 4:5 frame on the head and shoulders (Michael 2026-11-04: crop as needed). */
.km-founder img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--km-radius); box-shadow: var(--km-shadow-md); }
.km-founder > div > h2:first-child { margin-top: 0; }
.km-founder-wrap { display: block; }
.km-founder-wrap img { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--km-radius); box-shadow: var(--km-shadow-md); }
.km-founder dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem 1.5rem; margin: 1rem 0 0; }
.km-founder dt { font-family: var(--wp--preset--font-family--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted); margin: 0; }
.km-founder dd { margin: 0; font-weight: 600; }
/* The facts without the portrait sit in a narrow card: one column, nothing wraps mid-value. */
.km-card .km-founder.is-text-only { display: block; }
.km-card .km-founder.is-text-only dl { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 0; }

/* Steps and the dated timeline. */
.km-steps { counter-reset: step; list-style: none; padding-left: 0; display: grid; gap: 1.5rem; max-width: none; }
@media (min-width: 782px) { .km-steps { grid-template-columns: repeat(3, 1fr); } }
.km-steps li { counter-increment: step; padding-top: 0.75rem; border-top: 3px solid var(--wp--preset--color--amber); max-width: none; }
/* The line under the steps (billing, how the month runs) is an aside: smaller, muted, with room above (Michael 2026-11-04). */
.km-steps + p, .km-steps ~ p { font-size: 1rem; color: var(--wp--preset--color--ink-muted); margin-top: 2.25rem; max-width: 60ch; }
.km-band-navy .km-steps ~ p { color: var(--wp--preset--color--navy-muted); }
.km-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; color: var(--wp--preset--color--navy); }
.km-band-navy .km-steps li::before { color: var(--wp--preset--color--amber); }
.km-steps .km-duration { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small);
  font-weight: 600; color: var(--wp--preset--color--amber-ink); margin-top: 0.35rem; }
.km-timeline { list-style: none; padding-left: 1.75rem; border-left: 3px solid var(--wp--preset--color--amber); margin: 1rem 0; }
.km-timeline li { position: relative; margin-bottom: 1.25rem; max-width: 60ch; }
.km-timeline li::before { content: ""; position: absolute; left: calc(-1.75rem - 8px); top: 0.45em; width: 13px; height: 13px; border-radius: 50%;
  background: var(--wp--preset--color--navy); border: 3px solid var(--wp--preset--color--amber); }
.km-timeline strong { font-family: var(--wp--preset--font-family--display); display: block; }

/* Proof: an early testimonial card and the disclosure that keeps it honest. Used only when real. */
.km-proof blockquote { border-left: 3px solid var(--wp--preset--color--amber); margin: 0; padding: 0.25rem 0 0.25rem 1.25rem; }
.km-proof cite { display: block; margin-top: 0.5rem; font-style: normal; font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--navy); }
.km-disclosure { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }

/* The audit teaser: one field, one button, four score tiles. */
.km-teaser { max-width: 48rem; }
.km-teaser-label { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
.km-teaser-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.km-teaser-input { flex: 1 1 18rem; min-height: 48px; padding: 0.6rem 1rem; border-radius: 0.5rem; border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08); color: var(--wp--preset--color--white); font-size: 1.05rem; font-family: var(--wp--preset--font-family--display); }
.km-teaser-input::placeholder { color: var(--wp--preset--color--navy-muted); }
.km-teaser-input:focus-visible { outline: 3px solid var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); }
.km-teaser-button { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); border: 0; cursor: pointer; min-height: 48px; }
.km-teaser-button[disabled] { opacity: 0.6; cursor: wait; }
.km-teaser-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 1rem; margin: 1.5rem 0 1rem; }
.km-teaser-tile { background: var(--wp--preset--color--white); border-radius: var(--km-radius); padding: 1rem 1.25rem; border-left: 6px solid var(--wp--preset--color--mist); }
.km-teaser-tile.is-good { border-left-color: #2E8B57; }
.km-teaser-tile.is-mid { border-left-color: var(--wp--preset--color--amber); }
.km-teaser-tile.is-poor { border-left-color: #B3261E; }
.km-teaser-score { display: block; font-family: var(--wp--preset--font-family--display); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--navy); }
.km-teaser-name { display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--ink-muted); margin-top: 0.25rem; }
.km-band-navy .km-teaser-read { color: var(--wp--preset--color--white); }

/* Lists in the body: a deliverables list reads as a list, not a paragraph. */
.km-deliverables li { margin-bottom: 0.6rem; }
.km-deliverables strong { font-family: var(--wp--preset--font-family--display); }
.km-card.km-item { padding: 1.25rem 1.5rem; }
.km-card.km-item strong { font-family: var(--wp--preset--font-family--display); display: block; font-size: 1.05rem; color: var(--wp--preset--color--navy); margin-bottom: 0.25rem; }
.km-card.km-item p { margin: 0; font-size: 1rem; }
.km-card.km-aside { background: var(--wp--preset--color--navy-50); border-left: 4px solid var(--wp--preset--color--amber); }
/* The before-you-buy cards: a check mark leads each title. */
.km-card.km-check h3::before { content: "✓ "; display: inline-block; margin-right: 0.35rem; color: var(--wp--preset--color--amber-ink); }
.km-fit-list li { margin-bottom: 0.5rem; }
.km-not-fit { border-left: 3px solid var(--wp--preset--color--amber-700); padding-left: 1.25rem; }
.km-not-fit h3 { margin-top: 0; }
.wp-block-columns.are-vertically-aligned-center > .wp-block-column > h3:first-child { margin-top: 0; }
.km-band-tint .km-card.km-aside { background: var(--wp--preset--color--white); }

/* FAQ: core Details, readable when collapsed. */
.km-faq-item { border-bottom: 1px solid var(--wp--preset--color--mist); }
.km-faq-item summary { cursor: pointer; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.05rem; padding: 0.25rem 0; }
.km-faq-item summary:hover { color: var(--wp--preset--color--navy-600); }

/* Posts. */
.km-post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.75rem; }
.km-post-meta { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }
.km-byline { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-muted); }

/* Footer: navy, the firm block first and widest (its email never breaks
   mid-word), then three short link columns. The nine categories live in the
   header's Services menu and on the services page, not here (Michael
   2026-11-04: the footer was crowded). */
.km-footer { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); padding-top: var(--km-band-pad); padding-bottom: 2rem; --km-focus: var(--wp--preset--color--amber); }
.km-footer h3 { color: var(--wp--preset--color--amber); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.1em; text-transform: uppercase; }
.km-footer p, .km-footer li { color: var(--wp--preset--color--navy-muted); }
.km-footer a { color: var(--wp--preset--color--white); text-decoration: none; }
.km-footer a:hover { text-decoration: underline; }
.km-footer .wp-block-columns > .km-footer-firm { flex-basis: 40% !important; flex-grow: 0; }
.km-footer .km-footer-firm p { color: var(--wp--preset--color--white); margin-bottom: 0.35rem; }
.km-footer .km-footer-firm h3 { font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; color: var(--wp--preset--color--white); }
.km-footer .km-email a, .km-footer .km-phone a { font-family: var(--wp--preset--font-family--display); font-size: 0.95rem; white-space: nowrap; overflow-wrap: normal; }
.km-footer .km-footer-links { list-style: none; padding-left: 0; }
.km-footer .km-footer-links li { margin-bottom: 0.45rem; font-size: 0.95rem; }
.km-footer .km-fine { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--navy-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 1rem; margin-top: 1.5rem; }
.km-footer .wp-block-navigation a { color: var(--wp--preset--color--navy-muted); }

/* The one motion: a fade-up on section entry, off the main thread, never on the hero, off under reduced motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .km-reveal { animation: km-fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 28%; }
  }
}
@keyframes km-fade-up { from { opacity: 0.15; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The drawn results page arrives one row at a time and the buyer's own row
   lights up once: the one piece of motion in the hero, opacity and
   transform only, off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .km-serp .km-serp-row { animation: km-row-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .km-serp .km-serp-row:nth-child(2) { animation-delay: 150ms; }
  .km-serp .km-serp-row:nth-child(3) { animation-delay: 300ms; }
  .km-serp .km-serp-row:nth-child(4) { animation-delay: 450ms; }
  .km-serp .km-serp-row:nth-child(5) { animation-delay: 600ms; }
  .km-serp .km-serp-row:nth-child(6) { animation-delay: 750ms; }
  .km-serp .km-serp-row.is-you { animation: km-row-in 480ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both, km-row-glow 1400ms ease-out 900ms 1; }
}
@keyframes km-row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes km-row-glow { 0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.0); } 35% { box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); } }
.km-serp .km-serp-row:hover { transform: translateX(2px); transition: transform 150ms ease; }
@media (prefers-reduced-motion: reduce) { .km-card, .km-card:hover { transform: none; transition: none; } }