/*
 * Below-hero section design system.
 *
 * Extends the approved hero's visual language (Space Grotesk display, IBM
 * Plex Mono eyebrow with an orange dash rule, #ff6408 accent, grain, the
 * dashed route line, card tabs, deep soft shadows) down through the
 * .km-owned-section / .km-of2-* primitives shared by every owned page, so
 * the whole site reads as one composition rather than a designed homepage
 * sitting on top of a generic template everywhere else.
 *
 * SCOPING / PROPAGATION
 * Every selector here is prefixed with `body.km-owned-page`, added by
 * kejamove-site.php's body_class filter to any page whose content
 * contains `km-owned-section` -- which by construction is every page
 * built with this design system (homepage, office/home/long-distance/
 * decluttering/international moving, freequote), not a specific page ID.
 * Originally scoped to `body.km-homepage-draft-preview` (homepage only,
 * page 9677/9747) while the homepage redesign was under review; that
 * review is done, so this now propagates everywhere the same primitives
 * are already used. The font stylesheet this relies on (Space Grotesk /
 * IBM Plex Mono) is enqueued alongside it in functions.php, gated on the
 * same `km-owned-section` content check.
 *
 * The class is deliberately repeated (`body.km-owned-page.km-owned-page`)
 * to add one extra class of specificity on every rule: site.css has
 * older, page-ID-scoped resets on Long Distance and International
 * (`body.page-id-6183 .main-content > .row :is(h1, h2, h3)`,
 * `body.km-international-page .main-content > .row :is(h1, h2, h3)`,
 * three classes deep) that predate this design system and would
 * otherwise still win against a plain two-class `.km-owned-page
 * .km-owned-section` selector, !important or not -- specificity is
 * compared before source order, and !important on both sides just moves
 * the same comparison into the !important bucket. Found by inspecting
 * actual matched rules on Long Distance, not guessed: a same-specificity
 * or lower-specificity change would have silently lost on exactly those
 * two pages while appearing to work everywhere else.
 *
 * The !important density beyond that is deliberate too: site.css sets
 * many of these same properties with !important on lower-specificity
 * selectors elsewhere, so overriding requires matching it.
 *
 * This is CSS-only by design -- the provisioned markup is already
 * semantically right (article/span/details), so nothing here needs a
 * content re-provision. Note that wpautop leaves stray </p> tags and wraps
 * trailing links in <p> inside the provisioned articles, so selectors below
 * avoid depending on exact sibling structure.
 */

/* ---------------------------------------------------------------------
   1. Tokens -- the hero's values win, since that's the approved surface.
   site.css declares a near-miss palette (#f36c0a / #17191c / #f7f3ed);
   these deliberately replace it on this page so there is one orange, one
   ink and one cream rather than three pairs that almost match.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page {
    --kmx-orange: #ff6408;
    --kmx-orange-deep: #d94f00;
    --kmx-orange-soft: rgba(255, 100, 8, .12);
    --kmx-ink: #1d2023;
    --kmx-ink-deep: #101316;
    --kmx-cream: #faf8f4;
    --kmx-slate: #5c636b;
    --kmx-line: #e7e1d8;
    --kmx-line-dark: rgba(255, 255, 255, .14);
    --kmx-on-dark: rgba(255, 255, 255, .74);

    --kmx-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --kmx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --kmx-radius: 16px;
    --kmx-radius-sm: 12px;
    --kmx-shadow-card: 0 24px 60px -34px rgba(16, 19, 22, .42);
    --kmx-shadow-deep: 0 34px 90px -44px rgba(16, 19, 22, .6);

    /* Same dot grid the hero paints over its gradient. */
    --kmx-grain: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
    --kmx-grain-size: 22px 22px;
}

/* ---------------------------------------------------------------------
   2. Section shell -- full-bleed backgrounds, constrained content.

   WPBakery drops full_width="stretch_row_content_no_spaces" from these
   rows just as it drops el_class, so the rows are NOT full-viewport on
   their own. Rather than depend on WPBakery emitting it correctly, each
   section escapes its container with the same negative-margin technique
   the hero already uses. That keeps backgrounds edge-to-edge regardless
   of what the page builder does.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-owned-section {
    --km-section-y: clamp(72px, 6vw, 108px);
    width: auto;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding: var(--km-section-y) 0;
    background: #fff;
    color: var(--kmx-ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.km-owned-page.km-owned-page .km-owned-section > .row_col_wrap_12 {
    width: min(calc(100% - 56px), 1280px) !important;
    margin: 0 auto !important;
}

/* ---------------------------------------------------------------------
   2b. Kill the superseded v1 Long Distance hero photo.

   Josh hit this at a 977px-wide screen: the heading rendered on top of a
   photo of the crew and truck, unreadable. Root cause is a leftover rule
   from the page's PREVIOUS hero design in site.css:

     body.page-id-6183 .main-content > .row > .wpb_row:first-child::after

   It selects the hero purely structurally -- ":first-child", no class --
   so it keeps matching the v2 hero even though every other v1 rule was
   superseded. site.css hides it by default, then two media queries turn
   it back on with `display: block !important` and paint the old photo as
   an absolutely-positioned band across the full hero width:
     - 691px-999px: 340px tall, which lands squarely over the h1
     - up to 690px: 210px tall, which sits above the text (readable, but
       it covers the v2 hero image with the old one)
   At >=1000px it stays hidden, which is why every desktop check passed.

   Worth recording why the automated sweeps missed this: they walked real
   DOM elements looking for overlap, and a ::after pseudo-element has no
   DOM node to walk. Geometry checks over querySelectorAll() are blind to
   this whole class of bug by construction -- it needs
   getComputedStyle(el, '::after').

   Needs one more class of specificity than the v1 rule (0,5,2), hence
   the repeated scope class plus the full ancestor chain. v2 defines no
   ::before/::after of its own on this hero (checked), so clearing both
   is safe and stops the next media-query variant doing the same thing.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .main-content > .row > .wpb_row.km-ld2-hero::before,
body.km-owned-page.km-owned-page .main-content > .row > .wpb_row.km-ld2-hero::after {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* ---------------------------------------------------------------------
   3. Typography system

   Fixes the inverted hierarchy: section H2s were topping out at 60px
   while the hero H1 tops out at 46px, making the page's most important
   headline the smallest. Section H2 now caps below the hero H1.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-owned-section :is(h2, h3) {
    font-family: var(--kmx-display) !important;
    letter-spacing: -.03em;
    text-wrap: balance;
}

body.km-owned-page.km-owned-page .km-owned-section h2 {
    max-width: 20ch;
    margin: 0 0 22px !important;
    color: var(--kmx-ink) !important;
    font-size: clamp(30px, 2.9vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
}

body.km-owned-page.km-owned-page .km-owned-section h3 {
    color: var(--kmx-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
}

body.km-owned-page.km-owned-page .km-owned-section :is(p, li) {
    color: var(--kmx-slate);
    font-size: 16.5px;
    line-height: 1.68;
}

/* One eyebrow component everywhere -- mono, tracked out, preceded by the
   hero's 28px orange dash rule. Previously the hero and the sections had
   two unrelated treatments of the same element. */
body.km-owned-page.km-owned-page .km-owned-section .km-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px !important;
    color: var(--kmx-orange) !important;
    font-family: var(--kmx-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

body.km-owned-page.km-owned-page .km-owned-section .km-eyebrow::before {
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    border-radius: 99px;
    background: currentColor;
    content: "";
}

body.km-owned-page.km-owned-page .km-owned-section .km-section-intro {
    max-width: 68ch;
    margin: 0 0 8px !important;
    font-size: 18px;
}

/* Buttons + links ----------------------------------------------------- */
body.km-owned-page.km-owned-page .km-owned-section .km-btn {
    border-radius: 999px !important;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

body.km-owned-page.km-owned-page .km-owned-section .km-btn--primary {
    border-color: var(--kmx-orange) !important;
    background: var(--kmx-orange) !important;
    box-shadow: 0 16px 34px -14px rgba(255, 100, 8, .55);
}

body.km-owned-page.km-owned-page .km-owned-section .km-btn--primary:hover {
    border-color: var(--kmx-orange-deep) !important;
    background: var(--kmx-orange-deep) !important;
    transform: translateY(-2px);
}

body.km-owned-page.km-owned-page .km-owned-section .km-text-link {
    color: var(--kmx-orange-deep) !important;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------
   4. Dark section treatment -- reused by proof, process and final.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page :is(.km-of2-proof, .km-of2-process, .km-of2-final) {
    position: relative;
    background: var(--kmx-ink-deep) !important;
    color: #fff;
    isolation: isolate;
}

body.km-owned-page.km-owned-page :is(.km-of2-proof, .km-of2-process, .km-of2-final)::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: var(--kmx-grain);
    background-size: var(--kmx-grain-size);
    opacity: .5;
    content: "";
    pointer-events: none;
}

/*
 * The three classes above (proof/process/final) are Office's own dark
 * sections and already had a matching background+grain+border treatment
 * here before this stylesheet propagated beyond the homepage. Found via
 * live contrast testing on every propagated page, not by re-reading
 * every selector in site.css: more dark sections/cards existed that this
 * block never accounted for -- .km-of2-operations (Office; has its own
 * dark background in site.css, just never got a matching text-color
 * override here), Long Distance's differently-prefixed section
 * equivalents (.km-ld2-routes, .km-ld2-final), and two Long Distance
 * dark CARDS nested inside otherwise-light sections
 * (.km-ld2-note-card, .km-ld2-quote-card -- analogous to
 * .km-of2-dark-card below, just a different page's naming). Without
 * this, the generic light-mode h2/h3/p color rules above (higher
 * specificity, needed to beat site.css's page-ID-scoped legacy resets
 * on Long Distance) win instead, rendering near-black text on a
 * near-black background. Extending the existing color rules to cover
 * them, rather than inventing a parallel mechanism -- their backgrounds
 * are already correct, so only text color needed fixing.
 *
 * This list has grown twice already from live testing turning up cases
 * static review missed -- if a new dark section/card is added to any
 * propagated page later, check it against a real dark background before
 * assuming this covers it.
 */
body.km-owned-page.km-owned-page :is(.km-of2-proof, .km-of2-process, .km-of2-final, .km-of2-operations, .km-ld2-routes, .km-ld2-final, .km-ld2-note-card, .km-ld2-quote-card) :is(h2, h3) {
    color: #fff !important;
}

body.km-owned-page.km-owned-page :is(.km-of2-proof, .km-of2-process, .km-of2-final, .km-of2-operations, .km-ld2-routes, .km-ld2-final, .km-ld2-note-card, .km-ld2-quote-card) :is(p, li) {
    color: var(--kmx-on-dark);
}

/* ---------------------------------------------------------------------
   5. Proof ribbon

   Deliberately dark and tight so the hero lands into it instead of
   hitting an abrupt white edge. This was the single harshest seam on the
   page: a full-bleed dark gradient butting straight against flat white.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-proof {
    --km-section-y: 0px;
    border-bottom: 1px solid var(--kmx-line-dark);
}

body.km-owned-page.km-owned-page .km-of2-proof > .row_col_wrap_12 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.km-owned-page.km-owned-page .km-of2-proof > .row_col_wrap_12 > .wpb_column {
    width: auto !important;
    padding: 34px 38px !important;
    text-align: left;
}

body.km-owned-page.km-owned-page .km-of2-proof > .row_col_wrap_12 > .wpb_column:not(:first-child) {
    border-left: 1px solid var(--kmx-line-dark);
}

body.km-owned-page.km-owned-page .km-of2-proof strong {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-family: var(--kmx-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
}

body.km-owned-page.km-owned-page .km-of2-proof span {
    display: block;
    color: rgba(255, 255, 255, .6);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------
   6. Services -- the service menu, on cream, 3x2.

   Was a 4-column grid holding six articles, which left an orphaned 4+2
   split. Three across reads as two even rows.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-services {
    background: var(--kmx-cream) !important;
}

body.km-owned-page.km-owned-page .km-of2-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 46px;
}

body.km-owned-page.km-owned-page .km-of2-service-grid article {
    position: relative;
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 32px 30px 28px;
    overflow: hidden;
    border: 1px solid var(--kmx-line);
    border-radius: var(--kmx-radius);
    background: #fff;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* The orange tab from the hero's quote panel, reused as the card motif. */
body.km-owned-page.km-owned-page .km-of2-service-grid article::before {
    position: absolute;
    top: -1px;
    left: 30px;
    width: 44px;
    height: 4px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(145deg, #ff7b25 0%, #ff5c00 100%);
    content: "";
    transition: width .22s ease;
}

body.km-owned-page.km-owned-page .km-of2-service-grid article:hover {
    border-color: transparent;
    box-shadow: var(--kmx-shadow-card);
    transform: translateY(-4px);
}

body.km-owned-page.km-owned-page .km-of2-service-grid article:hover::before {
    width: 76px;
}

body.km-owned-page.km-owned-page .km-of2-icon {
    display: flex;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--kmx-orange-soft);
    color: var(--kmx-orange-deep);
}

body.km-owned-page.km-owned-page .km-of2-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.km-owned-page.km-owned-page .km-of2-service-grid h3 {
    margin: 0 0 10px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
}

body.km-owned-page.km-owned-page .km-of2-service-grid p {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.62;
}

/* wpautop wraps the trailing link in its own <p>; push that to the card
   floor so the CTAs line up across a row of uneven card heights. */
body.km-owned-page.km-owned-page .km-of2-service-grid article > p:last-of-type:has(.km-text-link) {
    margin-top: auto !important;
    padding-top: 18px;
}

/* ---------------------------------------------------------------------
   7. Continuity -- editorial split, dark card acting as a mini-hero.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page :is(.km-of2-continuity, .km-of2-pricing, .km-of2-coverage) > .row_col_wrap_12 {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

body.km-owned-page.km-owned-page :is(.km-of2-continuity, .km-of2-pricing, .km-of2-coverage) > .row_col_wrap_12 > .wpb_column {
    width: auto !important;
}

body.km-owned-page.km-owned-page .km-of2-continuity {
    background: #fff !important;
}

body.km-owned-page.km-owned-page .km-check-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 30px 0 0 !important;
    padding: 0 !important;
}

body.km-owned-page.km-owned-page .km-check-list li {
    position: relative;
    margin: 0;
    padding: 13px 0 13px 34px;
    border-bottom: 1px solid var(--kmx-line);
    font-size: 15.5px;
    line-height: 1.55;
    list-style: none;
}

body.km-owned-page.km-owned-page .km-check-list li:first-child {
    border-top: 1px solid var(--kmx-line);
}

body.km-owned-page.km-owned-page .km-check-list li::before {
    position: absolute;
    top: 15px;
    left: 0;
    display: flex;
    width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kmx-orange-soft);
    color: var(--kmx-orange-deep);
    content: "\2713";
    font-size: 10px;
    font-weight: 700;
}

/* The dark card echoes the hero canvas: same gradient family, same grain,
   same orange tab. */
body.km-owned-page.km-owned-page .km-of2-dark-card {
    position: relative;
    padding: clamp(30px, 3vw, 40px) !important;
    overflow: hidden;
    border-radius: var(--kmx-radius) !important;
    background: linear-gradient(150deg, #1d2023 0%, #2e211b 62%, #7a3a0d 100%) !important;
    box-shadow: var(--kmx-shadow-deep) !important;
}

body.km-owned-page.km-owned-page .km-of2-dark-card::after {
    position: absolute;
    inset: 0;
    background-image: var(--kmx-grain);
    background-size: var(--kmx-grain-size);
    opacity: .55;
    content: "";
    pointer-events: none;
}

body.km-owned-page.km-owned-page .km-of2-dark-card::before {
    position: absolute;
    top: 0;
    left: 34px;
    width: 60px;
    height: 4px;
    border-radius: 0 0 99px 99px;
    background: var(--kmx-orange);
    content: "";
}

body.km-owned-page.km-owned-page :is(.km-of2-dark-card, .km-of2-quote-card) > * {
    position: relative;
    z-index: 1;
}

body.km-owned-page.km-owned-page .km-of2-dark-card h3 {
    margin: 0 0 14px !important;
    color: #fff !important;
    font-size: clamp(24px, 2.1vw, 30px) !important;
    line-height: 1.1 !important;
}

body.km-owned-page.km-owned-page .km-of2-dark-card .km-eyebrow {
    color: #ff9b52 !important;
}

body.km-owned-page.km-owned-page .km-of2-dark-card p:not(.km-eyebrow) {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 15.5px;
}

/* ---------------------------------------------------------------------
   8. Process -- dark timeline.

   The hero's dashed route line becomes the connector running through the
   five stages. It is the most direct callback available: the same visual
   idea (a journey drawn as a dashed path) doing structural work.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-process {
    --kmx-badge: 52px;
}

body.km-owned-page.km-owned-page .km-of2-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-top: 52px;
}

body.km-owned-page.km-owned-page .km-of2-process-grid::before {
    position: absolute;
    top: calc(var(--kmx-badge) / 2);
    right: 8%;
    left: 8%;
    border-top: 2px dashed rgba(255, 255, 255, .22);
    content: "";
}

body.km-owned-page.km-owned-page .km-of2-process-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

/* Mono numeral in a solid badge, so the dashed line reads as passing
   between the stages rather than through them. */
body.km-owned-page.km-owned-page .km-of2-process-grid article > span:first-child {
    display: flex;
    width: var(--kmx-badge);
    height: var(--kmx-badge);
    margin-bottom: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: var(--kmx-ink-deep);
    color: var(--kmx-orange);
    font-family: var(--kmx-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
}

body.km-owned-page.km-owned-page .km-of2-process-grid h3 {
    margin: 0 0 9px !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.24 !important;
}

body.km-owned-page.km-owned-page .km-of2-process-grid p {
    margin: 0 !important;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------
   9. Pricing -- cream, indexed factor rows, light card.

   Mirrors section 7 deliberately: a dark card on a white section there,
   a light card on a cream section here, so the two editorial splits are
   a matched pair rather than a repeat.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-pricing {
    background: var(--kmx-cream) !important;
}

body.km-owned-page.km-owned-page .km-of2-factor-list {
    counter-reset: kmx-factor;
    margin: 30px 0 0 !important;
    padding: 0 !important;
}

/*
 * The counter is a grid cell, not an absolutely-positioned decoration.
 * It was originally absolute at left:0 with the row reserving a 46px
 * padding gutter for it -- but site.css sets `padding: 18px 0 !important`
 * on this same selector, and !important beats a plain declaration
 * regardless of specificity, so the gutter never applied and 01-05
 * rendered directly on top of the term text. As a grid cell it needs no
 * reserved padding and cannot collide at any width.
 */
body.km-owned-page.km-owned-page .km-of2-factor-list li {
    display: grid !important;
    grid-template-columns: 34px minmax(140px, .62fr) minmax(0, 1.38fr) !important;
    gap: 0 22px !important;
    align-items: start;
    margin: 0 !important;
    padding: 18px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--kmx-line);
    counter-increment: kmx-factor;
    list-style: none !important;
}

body.km-owned-page.km-owned-page .km-of2-factor-list li:first-child {
    border-top: 1px solid var(--kmx-line) !important;
}

body.km-owned-page.km-owned-page .km-of2-factor-list li::before {
    position: static;
    grid-column: 1;
    padding-top: 3px;
    color: var(--kmx-orange);
    content: counter(kmx-factor, decimal-leading-zero);
    font-family: var(--kmx-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

body.km-owned-page.km-owned-page .km-of2-factor-list li strong {
    grid-column: 2;
}

body.km-owned-page.km-owned-page .km-of2-factor-list li span {
    grid-column: 3;
}

body.km-owned-page.km-owned-page .km-of2-factor-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--kmx-ink);
    font-family: var(--kmx-display);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -.015em;
}

body.km-owned-page.km-owned-page .km-of2-factor-list span {
    display: block;
    color: var(--kmx-slate);
    font-size: 15px;
    line-height: 1.6;
}

body.km-owned-page.km-owned-page .km-of2-quote-card {
    position: relative;
    padding: clamp(30px, 3vw, 40px) !important;
    border: 1px solid var(--kmx-line);
    border-radius: var(--kmx-radius) !important;
    background: #fff !important;
    box-shadow: var(--kmx-shadow-card) !important;
}

body.km-owned-page.km-owned-page .km-of2-quote-card::before {
    position: absolute;
    top: -1px;
    left: 34px;
    width: 60px;
    height: 4px;
    border-radius: 0 0 99px 99px;
    background: var(--kmx-orange);
    content: "";
}

body.km-owned-page.km-owned-page .km-of2-quote-card h3 {
    margin: 0 0 14px !important;
    color: var(--kmx-ink) !important;
    font-size: clamp(24px, 2.1vw, 30px) !important;
    line-height: 1.1 !important;
}

body.km-owned-page.km-owned-page .km-of2-quote-card p:not(.km-eyebrow) {
    color: var(--kmx-slate) !important;
    font-size: 15.5px;
}

body.km-owned-page.km-owned-page .km-of2-quote-card .km-text-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--kmx-orange-deep) !important;
}

/* ---------------------------------------------------------------------
   10. Coverage -- pill chips.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-coverage {
    position: relative;
    overflow: hidden;
    background: #fff !important;
}

/* A soft orange glow instead of repeating the hero's skyline art -- the
   same warmth, without a second heavyweight illustration on the page. */
body.km-owned-page.km-owned-page .km-of2-coverage::after {
    position: absolute;
    top: -180px;
    right: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 8, .09) 0%, rgba(255, 100, 8, 0) 68%);
    content: "";
    pointer-events: none;
}

body.km-owned-page.km-owned-page .km-of2-coverage > .row_col_wrap_12 {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
}

body.km-owned-page.km-owned-page .km-of2-location-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

body.km-owned-page.km-owned-page .km-of2-location-grid span {
    padding: 9px 17px;
    border: 1px solid var(--kmx-line);
    border-radius: 999px;
    background: #fff;
    color: var(--kmx-ink);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

body.km-owned-page.km-owned-page .km-of2-location-grid span:hover {
    border-color: var(--kmx-orange);
    background: var(--kmx-orange-soft);
    color: var(--kmx-orange-deep);
}

body.km-owned-page.km-owned-page .km-of2-coverage-note {
    margin-top: 26px !important;
    font-size: 15px;
}

body.km-owned-page.km-owned-page .km-of2-coverage-note a {
    color: var(--kmx-orange-deep) !important;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 100, 8, .35);
}

/* ---------------------------------------------------------------------
   11. FAQ -- refined accordion on cream.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-faq {
    background: var(--kmx-cream) !important;
}

body.km-owned-page.km-owned-page .km-of2-faq-list {
    max-width: 900px;
    margin-top: 38px;
    border-top: 1px solid var(--kmx-line);
}

body.km-owned-page.km-owned-page .km-of2-faq-list details {
    border-bottom: 1px solid var(--kmx-line);
}

body.km-owned-page.km-owned-page .km-of2-faq-list summary {
    position: relative;
    padding: 21px 58px 21px 0;
    color: var(--kmx-ink);
    cursor: pointer;
    font-family: var(--kmx-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.35;
    list-style: none;
}

body.km-owned-page.km-owned-page .km-of2-faq-list summary:hover {
    color: var(--kmx-orange-deep);
}

body.km-owned-page.km-owned-page .km-of2-faq-list summary::-webkit-details-marker {
    display: none;
}

/* +/- in a tinted circle rather than a bare glyph. */
body.km-owned-page.km-owned-page .km-of2-faq-list summary::after {
    position: absolute;
    top: 17px;
    right: 0;
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kmx-orange-soft);
    color: var(--kmx-orange-deep);
    content: "+";
    font-family: var(--kmx-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: background .18s ease;
}

body.km-owned-page.km-owned-page .km-of2-faq-list details[open] summary::after {
    background: var(--kmx-orange);
    color: #fff;
    content: "\2212";
}

body.km-owned-page.km-owned-page .km-of2-faq-list details p {
    max-width: 78ch;
    margin: 0 !important;
    padding: 0 58px 24px 0;
    font-size: 15.5px;
    line-height: 1.7;
}

body.km-owned-page.km-owned-page .km-of2-faq-list details p a {
    color: var(--kmx-orange-deep) !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   12. Final CTA -- the bookend.

   Runs the hero's desktop gradient in reverse (288deg vs 108deg) so the
   page opens with orange on the right and closes with it on the left.
   --------------------------------------------------------------------- */
body.km-owned-page.km-owned-page .km-of2-final {
    background-image: linear-gradient(288deg, #101316 0%, #151617 34%, #352218 56%, #873a0e 78%, #ff6408 100%) !important;
    text-align: center;
}

body.km-owned-page.km-owned-page .km-of2-final > .row_col_wrap_12 {
    display: block !important;
}

body.km-owned-page.km-owned-page .km-of2-final :is(h2, p) {
    margin-right: auto !important;
    margin-left: auto !important;
}

body.km-owned-page.km-owned-page .km-of2-final h2 {
    max-width: 22ch;
    color: #fff !important;
}

body.km-owned-page.km-owned-page .km-of2-final .km-eyebrow {
    justify-content: center;
    color: #ffb27a !important;
}

body.km-owned-page.km-owned-page .km-of2-final p:not(.km-eyebrow) {
    max-width: 60ch;
    color: rgba(255, 255, 255, .8);
}

body.km-owned-page.km-owned-page .km-of2-final .km-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

body.km-owned-page.km-owned-page .km-of2-final .km-btn--secondary {
    border: 1px solid rgba(255, 255, 255, .5) !important;
    background: transparent !important;
    color: #fff !important;
}

body.km-owned-page.km-owned-page .km-of2-final .km-btn--secondary:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, .1) !important;
}

body.km-owned-page.km-owned-page .km-of2-final .km-contact-line {
    margin-top: 26px !important;
    color: rgba(255, 255, 255, .66);
    font-size: 14px;
}

body.km-owned-page.km-owned-page .km-of2-final .km-contact-line a {
    color: #fff !important;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    body.km-owned-page.km-owned-page .km-of2-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.km-owned-page.km-owned-page .km-of2-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 18px;
    }

    /* The connector only reads correctly across a single row of stages. */
    body.km-owned-page.km-owned-page .km-of2-process-grid::before {
        display: none;
    }
}

@media (max-width: 999px) {
    body.km-owned-page.km-owned-page .km-owned-section > .row_col_wrap_12 {
        width: min(calc(100% - 44px), 1280px) !important;
    }

    body.km-owned-page.km-owned-page :is(.km-of2-continuity, .km-of2-pricing, .km-of2-coverage) > .row_col_wrap_12 {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    body.km-owned-page.km-owned-page .km-of2-coverage > .row_col_wrap_12 {
        grid-template-columns: minmax(0, 1fr);
    }

    body.km-owned-page.km-owned-page .km-of2-proof > .row_col_wrap_12 {
        grid-template-columns: minmax(0, 1fr);
    }

    body.km-owned-page.km-owned-page .km-of2-proof > .row_col_wrap_12 > .wpb_column {
        padding: 22px 0 !important;
    }

    body.km-owned-page.km-owned-page .km-of2-proof > .row_col_wrap_12 > .wpb_column:not(:first-child) {
        border-top: 1px solid var(--kmx-line-dark);
        border-left: 0;
    }

    /* Term and description stack under a narrower counter column. */
    body.km-owned-page.km-owned-page .km-of2-factor-list li {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 3px 16px !important;
    }

    body.km-owned-page.km-owned-page .km-of2-factor-list li span {
        grid-column: 2;
    }
}

@media (max-width: 690px) {
    body.km-owned-page.km-owned-page .km-owned-section {
        --km-section-y: 54px;
    }

    body.km-owned-page.km-owned-page .km-owned-section > .row_col_wrap_12 {
        width: calc(100% - 36px) !important;
    }

    body.km-owned-page.km-owned-page .km-owned-section h2 {
        max-width: none;
        font-size: clamp(26px, 7.4vw, 32px) !important;
    }

    body.km-owned-page.km-owned-page .km-owned-section :is(p, li) {
        font-size: 15.5px;
    }

    body.km-owned-page.km-owned-page .km-of2-service-grid,
    body.km-owned-page.km-owned-page .km-of2-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.km-owned-page.km-owned-page .km-of2-service-grid article {
        padding: 26px 22px 24px;
    }

    /* Vertical run: the dashed connector comes back, now down the left
       edge through the stage badges. */
    body.km-owned-page.km-owned-page .km-of2-process-grid {
        gap: 26px;
    }

    body.km-owned-page.km-owned-page .km-of2-process-grid::before {
        top: 10px;
        right: auto;
        bottom: 30px;
        left: calc(var(--kmx-badge) / 2);
        border-top: 0;
        border-left: 2px dashed rgba(255, 255, 255, .22);
    }

    body.km-owned-page.km-owned-page .km-of2-process-grid article > span:first-child {
        margin-bottom: 16px;
    }

    body.km-owned-page.km-owned-page .km-of2-final .km-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.km-owned-page.km-owned-page .km-of2-final .km-btn {
        width: 100%;
    }

    body.km-owned-page.km-owned-page .km-of2-faq-list summary {
        padding-right: 46px;
        font-size: 16px;
    }

    body.km-owned-page.km-owned-page .km-of2-faq-list details p {
        padding-right: 0;
    }
}