/* ============================================================================
   KODA — PUBLIC SITE THEME  ·  "Nocturne"
   ============================================================================
   Approved 2026-09-09. This file is the SINGLE SOURCE OF TRUTH for the colour,
   type and surface treatment of every pre-login page. Change colour here, not
   in a page.

   HOW IT LOADS
   Every public page links this file as the LAST stylesheet in its <head>, and
   carries `koda-v2` on <body>. Both matter:
     · loading last wins every specificity TIE against styles.css and against
       the local <style> block on the six self-styled pages;
     · the `.koda-v2` prefix adds one class of specificity, so a rule here beats
       a same-named local rule even when the local one is more qualified
       (e.g. `.section-cool .process-card`).
   Anything painted by an INLINE style attribute cannot be reached this way at
   all — those are the photo scrims, which is why they were given the
   `.koda-scrim` class and are the only rules here using !important.

   THE SYSTEM
   Navy carries the chrome and the anchor bands; white and one mist grey carry
   the content bands between them. Burgundy is the ACTION colour — it is what a
   customer clicks. Gilt is the accent of last resort: stars, one hairline, the
   top edge of the quote card, and never a large area and never small text on a
   light ground (it measures 2.37:1 on white — see the eyebrow rule below).

   WHAT WAS RETIRED
   The warm neutrals. #fbf8f3, #f7f2ea, #f9f5ee, #fff5f0, #f5f0e8, #faf7f1,
   #f5f3f0, #fdefdd and #f0f5fa were all in play across the site as "the
   background", drifting page to page. There is now one white and one mist. The
   cream is retired as reversed-out TEXT too — light copy on a dark band is
   plain white, not a warm off-white.
   ========================================================================= */

.koda-v2 {
  /* --- Ink & ground ----------------------------------------------------- */
  --koda-night:    #16202e;   /* deepest — nav, footer                      */
  --koda-night-2:  #1d2b3d;   /* anchor bands                               */
  --koda-night-3:  #26374d;   /* raised surfaces on night, left edges       */
  --koda-ink:      #1e2530;   /* body copy on light grounds                 */
  --koda-white:    #ffffff;
  --koda-mist:     #eff3f7;   /* the ONE light alternate band               */

  /* --- Brand ------------------------------------------------------------ */
  --koda-burgundy: #4d211c;   /* the action colour                          */
  --koda-burgundy-hi: #7a3226;
  --koda-slate:    #607898;
  /* Slate at small sizes is 4.03:1 on mist — under AA. Small slate text uses
     this one step down, which measures 4.7:1 on mist and 5.3:1 on white. */
  --koda-slate-ink: #566d8a;
  --koda-gilt:     #c9a44c;
  --koda-gilt-soft: rgba(201,164,76,0.55);

  /* --- Lines ------------------------------------------------------------ */
  --koda-rule:       rgba(30,37,48,0.14);
  --koda-rule-night: rgba(255,255,255,0.13);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Nanum Myeongjo', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* --- PHOTO SCRIMS -----------------------------------------------------
     Deliberately lighter than the site used to run. Every hero was previously
     veiled at a flat .80, which held the text up but flattened the photograph
     into a colour field — you could not tell a rug from a sofa. These scrims
     are shaped instead of flat: heaviest exactly where the copy sits, falling
     away to the edges so the photograph is legible again.

     The floors are measured, not guessed. Over the brightest plausible photo
     (near-white, rgb 235), white text needs the scrim at .60 to clear 4.5:1;
     .64 gives 5.7:1 with margin to spare. So no scrim sits under text below
     .62, and nowhere else does it need to be dark at all.
     -------------------------------------------------------------------- */
  --scrim-text: rgba(16,24,36,0.76);   /* under the headline               */
  --scrim-mid:  rgba(16,24,36,0.68);   /* under supporting copy            */
  --scrim-edge: rgba(20,31,46,0.36);   /* corners — the photo breathes     */

  /* Centred hero (.ks-hero, .page-hero, the rug + upholstery photo bands):
     copy runs down the middle, so the scrim is a soft ellipse rather than a
     wash. TWO layers, because one ellipse could not do both jobs: on its own it
     fell away by the time it reached the trust line at the foot of the hero,
     which then sat at .52 over a bright rug. The vertical layer holds a floor
     down the whole copy column; the ellipse adds the weight under the headline.
     They multiply, so the composite is 1-(1-a)(1-b):
       headline  .30 over .62 -> .73      copy      .30 over .56 -> .69
       trust line .28 over .50 -> .64     corners   .06 over .26 -> .30
     Everything carrying text clears the .62 floor; the corners are open enough
     that you can still see what the photograph is of. */
  --scrim-centred:
    linear-gradient(180deg, rgba(16,24,36,0) 0%, rgba(16,24,36,0.26) 16%,
        rgba(16,24,36,0.30) 52%, rgba(16,24,36,0.26) 86%, rgba(16,24,36,0.06) 100%),
    radial-gradient(115% 130% at 50% 52%,
        rgba(16,24,36,0.62) 0%, rgba(16,24,36,0.56) 42%,
        rgba(18,28,42,0.38) 76%, rgba(20,31,46,0.26) 100%);

  /* Split hero (the home page): copy on the left, quote card on the right,
     so the middle of the photograph can be left almost clear. */
  --scrim-split: linear-gradient(100deg,
      rgba(13,20,30,0.86) 0%, rgba(15,23,34,0.76) 34%,
      rgba(18,28,42,0.58) 52%, rgba(20,31,46,0.44) 72%,
      rgba(22,33,48,0.40) 100%);

  /* A quieter one for full-bleed dividers and CTA photo bands, which carry a
     single short line of type rather than a paragraph. */
  --scrim-band:
    linear-gradient(180deg, rgba(16,24,36,0) 0%, rgba(16,24,36,0.22) 22%,
        rgba(16,24,36,0.24) 78%, rgba(16,24,36,0.04) 100%),
    radial-gradient(120% 120% at 50% 50%,
        rgba(16,24,36,0.60) 0%, rgba(17,26,38,0.52) 46%, rgba(20,31,46,0.30) 100%);

  --radius-card: 4px;
  --radius-pill: 3px;
}

/* ============================================================================
   1. BASE
   ========================================================================= */
body.koda-v2 { background: var(--koda-white); color: var(--koda-ink); font-family: var(--font-body); font-size: 17px; line-height: 1.75; }
.koda-v2 h1, .koda-v2 h2, .koda-v2 h3, .koda-v2 h4 { font-family: var(--font-display); color: var(--koda-night); font-weight: 700; line-height: 1.18; letter-spacing: -0.012em; }
.koda-v2 a { color: var(--koda-night-3); }
.koda-v2 a:hover { color: var(--koda-burgundy); }
.koda-v2 ::selection { background: rgba(201,164,76,0.30); }
.koda-v2 .ks-skip { background: var(--koda-night); color: #fff; border-radius: 0; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.koda-v2 .ks-skip:focus { color: #fff; }

/* ============================================================================
   2. NAVIGATION — night chrome
   ========================================================================= */
.koda-v2 .nav { background: rgba(22,32,46,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.09); }
.koda-v2 .nav.scrolled { box-shadow: 0 16px 40px -26px rgba(0,0,0,0.9); }
.koda-v2 .nav-links a { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.07em; color: rgba(255,255,255,0.86); }
.koda-v2 .nav-links a:hover { color: #fff; }
.koda-v2 .nav-links a::after,
.koda-v2 .nav-links a:not(.btn-primary)::after { background: var(--koda-gilt); height: 1px; }
.koda-v2 .nav-links .nav-cta,
.koda-v2 .nav-links .btn-primary {
  background: var(--koda-burgundy); color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 3px;
  padding: 11px 22px; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
}
.koda-v2 .nav-links .nav-cta:hover,
.koda-v2 .nav-links .btn-primary:hover { background: var(--koda-burgundy-hi); border-color: rgba(255,255,255,0.2); color: #fff !important; }
.koda-v2 .nav-phone { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; }
.koda-v2 .nav-phone:hover { color: var(--koda-gilt); }
.koda-v2 .nav-login-btn { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.26); border-radius: 3px; color: rgba(255,255,255,0.86); }
.koda-v2 .nav-login-btn:hover { background: #fff; border-color: #fff; color: var(--koda-night); }
.koda-v2 .hamburger span { background: #fff; }
.koda-v2 .nav-links.open { background: var(--koda-night); border-top: 1px solid rgba(255,255,255,0.09); }
/* The mark is full-colour on transparency — a slate wordmark, a burgundy
   sub-line and a painted mascot. It is never recoloured, inverted or filtered,
   so on the night chrome it sits on its own white plate. */
.koda-v2 .nav-logo { background: #fff; border-radius: 3px; padding: 6px 14px; }
.koda-v2 .nav-logo img { height: 46px; width: auto; }

/* ============================================================================
   3. BUTTONS
   ========================================================================= */
.koda-v2 .btn-primary, .koda-v2 .btn-phone, .koda-v2 .btn-primary-inverted {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: var(--koda-burgundy); background-color: var(--koda-burgundy);
  color: #fff; border: 1px solid var(--koda-burgundy);
  border-radius: 3px; padding: 17px 34px;
}
.koda-v2 .btn-primary:hover, .koda-v2 .btn-phone:hover, .koda-v2 .btn-primary-inverted:hover {
  background: var(--koda-burgundy-hi); background-color: var(--koda-burgundy-hi);
  border-color: var(--koda-burgundy-hi); color: #fff;
  transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(77,33,28,0.9);
}
.koda-v2 .btn-secondary, .koda-v2 .btn-secondary-inverted {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: transparent; background-color: transparent;
  color: var(--koda-night); border: 1px solid var(--koda-rule);
  border-radius: 3px; padding: 16px 30px;
}
.koda-v2 .btn-secondary:hover, .koda-v2 .btn-secondary-inverted:hover {
  background: var(--koda-night); background-color: var(--koda-night);
  border-color: var(--koda-night); color: #fff; transform: translateY(-2px);
}
/* On any dark band the pair inverts: burgundy stays the action, the secondary
   becomes a white outline. */
.koda-v2 .ks-hero .btn-primary, .koda-v2 .page-hero .btn-primary,
.koda-v2 .hero .btn-primary, .koda-v2 .cta-banner .btn-primary,
.koda-v2 .ks-cta .btn-primary, .koda-v2 .cta-inner .btn-primary,
.koda-v2 .section-burgundy .btn-primary, .koda-v2 .koda-photo-band .btn-primary,
.koda-v2 .ks-hero .btn-phone, .koda-v2 .page-hero .btn-phone, .koda-v2 .cta-banner .btn-phone {
  background: var(--koda-burgundy); background-color: var(--koda-burgundy);
  color: #fff; border-color: rgba(255,255,255,0.24);
}
.koda-v2 .ks-hero .btn-primary:hover, .koda-v2 .page-hero .btn-primary:hover,
.koda-v2 .hero .btn-primary:hover, .koda-v2 .cta-banner .btn-primary:hover,
.koda-v2 .ks-cta .btn-primary:hover, .koda-v2 .cta-inner .btn-primary:hover,
.koda-v2 .section-burgundy .btn-primary:hover, .koda-v2 .koda-photo-band .btn-primary:hover,
.koda-v2 .ks-hero .btn-phone:hover, .koda-v2 .page-hero .btn-phone:hover, .koda-v2 .cta-banner .btn-phone:hover {
  background: var(--koda-burgundy-hi); background-color: var(--koda-burgundy-hi); color: #fff;
}
.koda-v2 .ks-hero .btn-secondary, .koda-v2 .page-hero .btn-secondary,
.koda-v2 .hero .btn-secondary, .koda-v2 .cta-banner .btn-secondary,
.koda-v2 .ks-cta .btn-secondary, .koda-v2 .cta-inner .btn-secondary,
.koda-v2 .section-burgundy .btn-secondary, .koda-v2 .koda-photo-band .btn-secondary {
  background: transparent; background-color: transparent;
  color: #fff; border-color: rgba(255,255,255,0.42);
}
.koda-v2 .ks-hero .btn-secondary:hover, .koda-v2 .page-hero .btn-secondary:hover,
.koda-v2 .hero .btn-secondary:hover, .koda-v2 .cta-banner .btn-secondary:hover,
.koda-v2 .ks-cta .btn-secondary:hover, .koda-v2 .cta-inner .btn-secondary:hover,
.koda-v2 .section-burgundy .btn-secondary:hover, .koda-v2 .koda-photo-band .btn-secondary:hover {
  background: rgba(255,255,255,0.12); background-color: rgba(255,255,255,0.12);
  color: #fff; border-color: #fff;
}

/* ============================================================================
   4. PHOTO SCRIMS
   The only !important rules in this file, and only because these overlays are
   painted by an inline style attribute in the markup — nothing in a stylesheet
   can outrank that. See the token block above for how the alphas were chosen.
   ========================================================================= */
.koda-v2 .koda-scrim,
.koda-v2 .parallax-overlay { background: var(--scrim-band) !important; }
.koda-v2 .koda-scrim.is-hero { background: var(--scrim-centred) !important; }

.koda-v2 .ks-hero::before,
.koda-v2 .page-hero::before,
.koda-v2 .wave-section.koda-photo-band::before { background: var(--scrim-centred); }
.koda-v2 .ks-hero.burgundy::before {
  /* The burgundy hero variant keeps a warm cast so the brand colour still
     reads, but on the navy base rather than over it. */
  background: radial-gradient(122% 108% at 50% 47%,
      rgba(40,26,30,0.74) 0%, rgba(28,26,36,0.64) 40%,
      rgba(20,28,42,0.48) 76%, var(--scrim-edge) 100%);
}
.koda-v2 .cta-section::before, .koda-v2 .cta-banner-section::before { background: var(--scrim-band); }

/* ============================================================================
   5. HERO TYPOGRAPHY (every hero variant across the site)
   ========================================================================= */
.koda-v2 .ks-hero h1, .koda-v2 .page-hero h1, .koda-v2 .hero h1,
.koda-v2 .hero-headline {
  font-family: var(--font-display); color: #fff; font-weight: 700;
  text-shadow: 0 3px 30px rgba(0,0,0,0.55);
}
.koda-v2 .ks-hero .ks-hero-kicker, .koda-v2 .hero-kicker, .koda-v2 .page-hero .hero-kicker {
  color: var(--koda-gilt); font-family: var(--font-display); font-style: italic;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.koda-v2 .ks-hero .ks-hero-sub, .koda-v2 .hero-sub, .koda-v2 .hero-subtext,
.koda-v2 .page-hero .subtext, .koda-v2 .page-hero p, .koda-v2 .hero p {
  color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.koda-v2 .hero h1 em, .koda-v2 .page-hero h1 em, .koda-v2 .ks-hero h1 em { color: var(--koda-gilt); font-style: italic; }
/* The kicker is a <p>, and the blanket hero-copy rule above is `.koda-v2 .hero p`
   (0,2,1) — one step past `.koda-v2 .hero-kicker` (0,2,0), so on the pages where
   the kicker lives inside .hero it was coming out white with the rest of the
   copy. Qualified by tag, it goes back to gilt on every page. */
.koda-v2 p.hero-kicker, .koda-v2 .hero p.hero-kicker,
.koda-v2 .page-hero p.hero-kicker, .koda-v2 .ks-hero p.ks-hero-kicker {
  color: var(--koda-gilt);
}
.koda-v2 .hero h1 .h1-kw {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.28em; color: var(--koda-gilt);
}
.koda-v2 .ks-hero-trust, .koda-v2 .hero-trust, .koda-v2 .trust-line, .koda-v2 .page-hero-trust {
  color: rgba(255,255,255,0.94); font-size: 13px; letter-spacing: 0.09em;
  text-transform: uppercase; font-weight: 500; opacity: 1;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.koda-v2 .trust-stars, .koda-v2 .stars, .koda-v2 .hero-trust-stars { color: var(--koda-gilt); letter-spacing: 1px; }

/* ============================================================================
   6. BANDS
   One white, one mist, one night. `.section-warm` — every page's taupe band —
   becomes the mist, which keeps the alternation the layouts were built around
   while removing the warm neutral entirely.
   ========================================================================= */
/* `:not(.koda-photo-band)` is load-bearing. Three pages paint a hero
   PHOTOGRAPH onto a section that also carries a band class, and `background`
   is a shorthand — so a flat fill here does not tint that section, it erases
   the photograph. The opt-out marks those sections as "the photo is the
   background"; the scrim rules in §4 dress them instead. */
.koda-v2 .section-base:not(.koda-photo-band), .koda-v2 .section-cream:not(.koda-photo-band),
.koda-v2 .section-cool:not(.koda-photo-band), .koda-v2 .ks-faq, .koda-v2 .ks-prose {
  background: var(--koda-white); background-color: var(--koda-white);
}
.koda-v2 .section-warm:not(.koda-photo-band), .koda-v2 .ks-area { background: var(--koda-mist); background-color: var(--koda-mist); }
.koda-v2 .section-burgundy, .koda-v2 .section-steel-blue {
  background: var(--koda-night-2); background-color: var(--koda-night-2); color: #fff;
}
.koda-v2 .section-burgundy h2, .koda-v2 .section-burgundy h3,
.koda-v2 .section-steel-blue h2, .koda-v2 .section-steel-blue h3,
.koda-v2 .section-burgundy .grid-content h2 { color: #fff; }
.koda-v2 .section-burgundy p, .koda-v2 .section-burgundy li,
.koda-v2 .section-burgundy .grid-content p, .koda-v2 .section-burgundy .feature-list li { color: rgba(255,255,255,0.80); }
.koda-v2 .section-burgundy .feature-list li::before,
.koda-v2 .section-steel-blue .feature-list li::before { color: var(--koda-gilt); }

/* ============================================================================
   7. SECTION HEADINGS & EYEBROWS
   Gilt reads as gilt only against the night — on white it measures 2.37:1 at
   13px, which is invisible and a failure. So an eyebrow is burgundy on a light
   band and gilt on a dark one, while the hairline under it stays gilt in both.
   ========================================================================= */
.koda-v2 .section-tag, .koda-v2 .ks-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--koda-burgundy);
  display: inline-block; margin-bottom: 20px; padding-bottom: 14px; position: relative;
}
.koda-v2 .section-header .section-tag::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 46px; height: 1px; background: var(--koda-gilt-soft);
}
.koda-v2 .section-header { margin-bottom: 66px; }
.koda-v2 .section-header h2, .koda-v2 .section-title { font-size: clamp(32px, 3.7vw, 52px); margin-bottom: 18px; color: var(--koda-night); }
.koda-v2 .section-header p { font-size: 18px; max-width: 640px; margin: 0 auto; opacity: 1; color: rgba(30,37,48,0.70); }
.koda-v2 .section-burgundy .section-tag, .koda-v2 .section-steel-blue .section-tag,
.koda-v2 .cta-banner .section-tag, .koda-v2 .koda-photo-band .section-tag { color: var(--koda-gilt); }
.koda-v2 .section-burgundy .section-header h2, .koda-v2 .section-steel-blue .section-header h2 { color: #fff; }
.koda-v2 .section-burgundy .section-header p, .koda-v2 .section-steel-blue .section-header p { color: rgba(255,255,255,0.72); }

/* ============================================================================
   8. CONTENT & CARDS
   ========================================================================= */
.koda-v2 .grid-content h2, .koda-v2 .content-block h2, .koda-v2 .content-left h2,
.koda-v2 .types-content h2, .koda-v2 section h2 { color: var(--koda-night); }
.koda-v2 .grid-content p, .koda-v2 .content-block p, .koda-v2 .content-left p,
.koda-v2 .types-content p, .koda-v2 .comparison-card p { color: rgba(30,37,48,0.70); opacity: 1; }
.koda-v2 .feature-list li, .koda-v2 .types-list li, .koda-v2 .emergency-features li,
.koda-v2 .floor-features li { color: rgba(30,37,48,0.84); }
.koda-v2 .feature-list li::before, .koda-v2 .feature-list li:before,
.koda-v2 .types-list li:before, .koda-v2 .emergency-features li:before,
.koda-v2 .floor-features li::before { color: var(--koda-night-3); }
.koda-v2 .feature-list svg, .koda-v2 .pet-feature svg { stroke: var(--koda-night-3); }
.koda-v2 .image-frame, .koda-v2 .grid-image, .koda-v2 .types-image,
.koda-v2 .health-image-main, .koda-v2 .pet-image-frame {
  border-radius: 5px; box-shadow: 0 40px 80px -40px rgba(22,32,46,0.9);
}

.koda-v2 .process-card, .koda-v2 .process-step, .koda-v2 .ks-card,
.koda-v2 .comparison-card, .koda-v2 .emergency-card, .koda-v2 .floor-tile,
.koda-v2 .service-card, .koda-v2 .health-card, .koda-v2 .faq-item, .koda-v2 .ks-faq-item {
  background: #fff; background-color: #fff; border: 1px solid var(--koda-rule);
  border-radius: var(--radius-card); box-shadow: none;
}
.koda-v2 .process-card, .koda-v2 .process-step, .koda-v2 .ks-card, .koda-v2 .service-card { border-top: 2px solid var(--koda-night-2); }
.koda-v2 .ks-card:nth-child(even) { border-top-color: var(--koda-night-2); }
.koda-v2 .health-card, .koda-v2 .comparison-card, .koda-v2 .faq-item, .koda-v2 .ks-faq-item { border-left: 3px solid var(--koda-night-3); }
.koda-v2 .process-card:hover, .koda-v2 .process-step:hover, .koda-v2 .ks-card:hover,
.koda-v2 .service-card:hover, .koda-v2 .comparison-card:hover, .koda-v2 .emergency-card:hover {
  transform: translateY(-5px); border-top-color: var(--koda-gilt);
  box-shadow: 0 26px 50px -32px rgba(22,32,46,0.8);
}
.koda-v2 .process-card h3, .koda-v2 .process-step h3, .koda-v2 .ks-card h3,
.koda-v2 .comparison-card h3, .koda-v2 .emergency-card h3, .koda-v2 .service-card h3,
.koda-v2 .health-card h3, .koda-v2 .floor-detail h3 { color: var(--koda-night); }
.koda-v2 .process-card p, .koda-v2 .process-step p, .koda-v2 .ks-card p,
.koda-v2 .emergency-card p, .koda-v2 .service-card p, .koda-v2 .health-card p,
.koda-v2 .comparison-card li, .koda-v2 .floor-detail p { color: rgba(30,37,48,0.70); opacity: 1; }
.koda-v2 .process-number, .koda-v2 .process-step-num { color: var(--koda-night-3); font-family: var(--font-display); }
.koda-v2 .process-step-number { background: var(--koda-burgundy); color: #fff; }
.koda-v2 .comparison-card li:before { color: var(--koda-night-3); }
.koda-v2 .highlight-box { background: rgba(38,55,77,0.07); border-left: 3px solid var(--koda-night-3); }
.koda-v2 .highlight-box h4 { color: var(--koda-night); }
.koda-v2 .highlight-box p { color: rgba(30,37,48,0.74); }
.koda-v2 .floor-detail:nth-of-type(even) { background: var(--koda-mist); }
.koda-v2 .floor-detail-cta { background: var(--koda-burgundy); color: #fff; }
.koda-v2 .floor-detail-cta:hover { background: var(--koda-burgundy-hi); color: #fff; }
.koda-v2 .service-card-icon, .koda-v2 .health-card-icon { background: rgba(38,55,77,0.09); border-radius: 4px; }
.koda-v2 .service-card-icon svg, .koda-v2 .health-card-icon svg { stroke: var(--koda-night-3); }

/* ============================================================================
   9. FAQ · PROSE · SERVICE AREA
   ========================================================================= */
.koda-v2 .faq-item summary, .koda-v2 .ks-faq-item summary { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--koda-night); }
.koda-v2 .faq-item summary::after, .koda-v2 .ks-faq-item summary::after { color: var(--koda-gilt); }
.koda-v2 .faq-item p, .koda-v2 .ks-faq-item p, .koda-v2 .ks-faq .ks-faq-intro { color: rgba(30,37,48,0.72); opacity: 1; }
.koda-v2 .faq-item a, .koda-v2 .ks-faq-item a, .koda-v2 .ks-prose a { color: var(--koda-slate-ink); }
.koda-v2 .ks-prose p, .koda-v2 .ks-prose li { color: rgba(30,37,48,0.80); opacity: 1; }
.koda-v2 .ks-prose h2, .koda-v2 .ks-prose h3 { color: var(--koda-night); }
.koda-v2 .ks-area p, .koda-v2 .ks-area address, .koda-v2 .ks-cov-bounds li { color: rgba(30,37,48,0.76); opacity: 1; }
.koda-v2 .ks-area h2, .koda-v2 .ks-cov h3 { color: var(--koda-night); }
.koda-v2 .ks-area a, .koda-v2 .ks-area address a, .koda-v2 .ks-nap a { color: var(--koda-slate-ink); }
/* 14px, not 13px (2026-09-17). CLAUDE.md 4.1 sets 14px as the floor for
 * secondary text and KODA's audience skews 35+. The uppercase tracking makes
 * 13px *look* fine to anyone with young eyes, which is exactly why it survived
 * this long. These are now links to the city pages, so they are navigation. */
.koda-v2 .ks-area-cities li {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--koda-night);
  background: #fff; border: 1px solid var(--koda-rule); border-radius: 3px;
  box-shadow: none; padding: 10px 18px;
}
.koda-v2 .ks-area-cities li a {
  color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit;
}
.koda-v2 .ks-area-cities li a:hover,
.koda-v2 .ks-area-cities li a:focus-visible { text-decoration: underline; }
.koda-v2 .ks-area-services { list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px; padding: 0; margin: 24px 0 0; }
.koda-v2 .ks-area-services li a {
  display: inline-block; font-family: var(--font-body); font-weight: 500;
  font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--koda-night); text-decoration: none; background: #fff;
  border: 1px solid var(--koda-rule); border-radius: 3px; padding: 10px 18px;
}
.koda-v2 .ks-area-services li a:hover,
.koda-v2 .ks-area-services li a:focus-visible { text-decoration: underline; }
.koda-v2 .ks-map, .koda-v2 .ks-cov-map { border-radius: 5px; box-shadow: 0 34px 66px -38px rgba(22,32,46,0.85); }
.koda-v2 .ks-cov-dot { background: var(--koda-gilt); }
.koda-v2 .ks-cov-bounds b { color: var(--koda-night); }
.koda-v2 .ks-cov-label { color: var(--koda-night); border-color: rgba(30,37,48,0.20); }
.koda-v2 .ks-cov-label.is-hq { background: var(--koda-night); border-color: var(--koda-night); color: #fff; }
.koda-v2 .contact-details address { color: var(--koda-ink); }
.koda-v2 .contact-details address a { color: var(--koda-slate-ink); }
.koda-v2 .contact-details .contact-label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.20em; color: var(--koda-burgundy); }

/* ============================================================================
   10. CTA BANDS — the deepest colour on any page
   ========================================================================= */
.koda-v2 .ks-cta, .koda-v2 .cta-banner.koda-solid-cta {
  background: radial-gradient(120% 140% at 20% 0%, #26374d 0%, #1a2637 55%, #131c29 100%);
}
.koda-v2 .cta-banner h2, .koda-v2 .ks-cta h2, .koda-v2 .cta-inner h2, .koda-v2 .cta-section h2 { color: #fff; }
.koda-v2 .cta-banner p, .koda-v2 .ks-cta p, .koda-v2 .cta-inner p,
.koda-v2 .cta-banner > .container p, .koda-v2 .cta-banner .wave-content p { color: rgba(255,255,255,0.84); opacity: 1; }
.koda-v2 .cta-phone-big, .koda-v2 .cta-phone, .koda-v2 .ks-cta-phone,
.koda-v2 .cta-banner-phone, .koda-v2 .cta-banner-phone a { font-family: var(--font-display); color: #fff; }
.koda-v2 .cta-phone-big:hover, .koda-v2 .cta-phone:hover, .koda-v2 .ks-cta-phone:hover,
.koda-v2 .cta-banner-phone:hover { color: var(--koda-gilt); }
.koda-v2 .cta-banner .trust-line, .koda-v2 .ks-footer-note { color: rgba(255,255,255,0.72); opacity: 1; }

/* ============================================================================
   11. FOOTER
   ========================================================================= */
.koda-v2 .footer, .koda-v2 footer { background: var(--koda-night); background-color: var(--koda-night); color: #fff; }
.koda-v2 .footer h3, .koda-v2 footer h3, .koda-v2 .footer-section h3 {
  color: var(--koda-gilt); font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase;
}
.koda-v2 .footer p, .koda-v2 .footer a, .koda-v2 footer p, .koda-v2 footer a,
.koda-v2 .footer-section p, .koda-v2 .footer-section a, .koda-v2 .footer-section li { color: rgba(255,255,255,0.66); font-size: 15px; }
.koda-v2 .footer a:hover, .koda-v2 footer a:hover, .koda-v2 .footer-section a:hover { color: #fff; }
.koda-v2 .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.62); }
.koda-v2 .footer-bottom p { color: rgba(255,255,255,0.62); opacity: 1; }
.koda-v2 .footer-contact-item svg { opacity: 0.7; }

/* ============================================================================
   12. HOME PAGE ONLY
   The home page carries components no other page has: the split hero with its
   inline quote form, the four trust tiles, and the seam ramps that soften every
   band-to-band join.
   ========================================================================= */
.koda-page-home .hero::before {
  background:
    var(--ramp-land) bottom / 100% var(--seam-lg) no-repeat,
    var(--scrim-split);
}
.koda-page-home .hero-form-card {
  background: rgba(15,23,34,0.74); border: 1px solid rgba(255,255,255,0.12);
  border-top: 2px solid var(--koda-gilt); border-radius: 4px; padding: 34px 32px 30px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 44px 90px -44px rgba(0,0,0,0.95);
}
.koda-page-home .hero-form-card h2, .koda-page-home .hero-form-card h3 { color: #fff; font-size: 24px; text-shadow: none; }
.koda-page-home .hero-form-card > p { color: rgba(255,255,255,0.78); font-size: 14.5px; text-shadow: none; }
.koda-page-home .hero-form-card .form-group label,
.koda-page-home .hero-form-card .counter-group label { color: rgba(255,255,255,0.74); text-shadow: none; }
.koda-page-home .hero-form-card .form-col-label,
.koda-page-home .hero-form-card .rug-row > span { color: var(--koda-gilt) !important; text-shadow: none; }
.koda-page-home .hero-form-card .form-fine-print { color: rgba(255,255,255,0.62); opacity: 1; }
.koda-page-home .form-group label, .koda-page-home .counter-group label {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.07em; text-transform: uppercase; opacity: 1;
}
.koda-page-home .form-col-label { font-family: var(--font-body); letter-spacing: 0.20em; }
.koda-page-home .form-group input, .koda-page-home .form-group select,
.koda-page-home .counter-control, .koda-page-home .rug-row select {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; color: #fff;
}
.koda-page-home .form-group input::placeholder { color: rgba(255,255,255,0.42); }
.koda-page-home .form-group input:focus, .koda-page-home .form-group select:focus {
  border-color: var(--koda-gilt); box-shadow: 0 0 0 3px rgba(201,164,76,0.20);
}
.koda-page-home .counter-control button { color: #fff; }
.koda-page-home .counter-control button:hover { background: rgba(255,255,255,0.10); }
.koda-page-home .counter-control input { color: #fff; }
.koda-page-home .form-success h3 { color: #fff; }
.koda-page-home .form-success p { color: rgba(255,255,255,0.82); }
/* The hero CTA is white-on-photo, but the quote card sits inside .hero — its
   submit has to stay the solid burgundy action. */
.koda-page-home .hero-form-card .btn-primary { background: var(--koda-burgundy); color: #fff; border-color: rgba(255,255,255,0.22); }
.koda-page-home .hero-form-card .btn-primary:hover { background: var(--koda-burgundy-hi); color: #fff; }

.koda-page-home .health-section  { background: var(--ramp-out) bottom / 100% var(--seam) no-repeat, #ffffff; }
.koda-page-home .trust-section   { background: var(--ramp-in) top / 100% var(--seam) no-repeat, var(--ramp-out) bottom / 100% var(--seam) no-repeat, var(--koda-night-2); }
.koda-page-home .pet-section     { background: var(--ramp-in) top / 100% var(--seam) no-repeat, var(--koda-mist); }
.koda-page-home .faq-section     { background: var(--ramp-out) bottom / 100% var(--seam) no-repeat, #ffffff; }
.koda-page-home .ks-area         { background: var(--ramp-out) bottom / 100% var(--seam) no-repeat, var(--koda-mist); }
.koda-page-home .contact-section { background: var(--ramp-out) bottom / 100% var(--seam) no-repeat, #ffffff; }
.koda-page-home .services-section::before {
  background:
    var(--ramp-in)   top    / 100% 52px           no-repeat,
    var(--ramp-land) bottom / 100% var(--seam-lg) no-repeat,
    rgba(255,255,255,0.78);
}
.koda-page-home .cta-banner {
  background:
    var(--ramp-in)  top    / 100% var(--seam) no-repeat,
    var(--ramp-out) bottom / 100% var(--seam) no-repeat,
    radial-gradient(120% 140% at 20% 0%, #26374d 0%, #1a2637 55%, #131c29 100%);
}
.koda-page-home .footer { background: var(--ramp-in) top / 100% var(--seam) no-repeat, var(--koda-night); }

/* Seam map. Each band-to-band join is a two-sided eased ramp that only
   disappears when each side is told the EXACT colour of its neighbour. The
   bands moved in this retheme, so the whole map is restated in one place. */
.koda-page-home .hero             { --seam-b: 255,255,255; }
.koda-page-home .health-section   { --seam-b:  29, 43, 61; }
.koda-page-home .trust-section    { --seam-a: 255,255,255; --seam-b: 239,243,247; }
.koda-page-home .pet-section      { --seam-a:  29, 43, 61; }
.koda-page-home .parallax-section { --seam-a: 239,243,247; --seam-b: 255,255,255; }
.koda-page-home .services-section { --seam-a: 255,255,255; --seam-b: 255,255,255; }
.koda-page-home .faq-section      { --seam-b: 239,243,247; }
.koda-page-home .ks-area          { --seam-b: 255,255,255; }
.koda-page-home .contact-section  { --seam-b:  38, 55, 77; }
.koda-page-home .cta-banner       { --seam-a: 255,255,255; --seam-b:  22, 32, 46; }
.koda-page-home .footer           { --seam-a:  19, 28, 41; }

/* The four "Why KODA" tiles. */
.koda-page-home .trust-tile {
  background: rgba(255,255,255,0.05); border: 1px solid var(--koda-rule-night);
  border-top: 1px solid var(--koda-rule-night); border-radius: 4px;
  padding: 40px 28px; box-shadow: none;
}
.koda-page-home .trust-tile.accent-border { border-top-color: var(--koda-gilt-soft); }
.koda-page-home .trust-tile:hover { transform: translateY(-6px); background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.24); box-shadow: none; }
.koda-page-home .trust-tile-icon { background: rgba(255,255,255,0.08) !important; }
.koda-page-home .trust-tile-icon svg { stroke: var(--koda-gilt) !important; }
.koda-page-home .trust-tile h3 { color: #fff; font-size: 15px; }
.koda-page-home .trust-tile p { color: rgba(255,255,255,0.72); opacity: 1; font-size: 14.5px; }
/* PRE-EXISTING BUG, fixed here. The stat is a <p class="trust-stat">, so
   `.trust-tile p` (0,1,1) outranks `.trust-stat` (0,1,0) whichever is written
   last — which is why "1,100+" and "5.0" rendered at body size while "Family"
   and "KODA4Kids" (carrying a second class) came out large. Qualifying the
   selector puts all four stats back on one scale. */
.koda-page-home .trust-tile p.trust-stat    { font-family: var(--font-display); color: #fff; font-size: 46px; line-height: 1.05; margin-bottom: 6px; }
.koda-page-home .trust-tile p.trust-stat.sm { font-size: 33px; }
.koda-page-home .trust-tile p.trust-stat.xs { font-size: 27px; }
.koda-page-home .trust-section .section-tag { color: var(--koda-gilt); }
.koda-page-home .trust-section .section-header h2 { color: #fff; }
.koda-page-home .trust-section .section-header p { color: rgba(255,255,255,0.72); }
.koda-page-home .health-stat-card {
  background: var(--koda-night); border: none; border-left: 2px solid var(--koda-gilt);
  border-radius: 4px; box-shadow: 0 26px 50px -26px rgba(22,32,46,0.9);
}
.koda-page-home .health-stat-card strong { font-family: var(--font-display); color: #fff; font-size: 34px; }
.koda-page-home .health-stat-card span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--koda-gilt); opacity: 1; }
.koda-page-home .pet-badge {
  background: var(--koda-night); color: #fff; border-radius: 3px;
  border-left: 2px solid var(--koda-gilt); font-family: var(--font-body);
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 13px 22px;
}
.koda-page-home .pet-feature { font-size: 15px; color: rgba(30,37,48,0.82); }
.koda-page-home .services-section .section-tag { color: var(--koda-burgundy); }
.koda-page-home .health-card { border-left: 3px solid var(--koda-night-3); padding: 22px; }
.koda-page-home .health-card:hover { transform: translateX(4px); box-shadow: 0 20px 40px -30px rgba(22,32,46,0.8); }

/* ============================================================================
   13. PAGE EXCEPTIONS
   Two pages give a shared class a meaning the rest of the site does not.
   ========================================================================= */
/* /rug-cleaning uses `.section-cool` as a DARK band (it was solid slate), not
   as the light cool band it is everywhere else. It stays dark — as night.
   The `:not(.koda-photo-band)` here is not about photo bands; it is there to
   MATCH the specificity of the general band rule in §6, which picked up a third
   class from its own :not() and so was out-ranking this page override no matter
   where it sat. With both at (0,3,0) the later rule — this one — wins, which is
   the outcome the file's ordering already implies. Without it the band went
   white while its heading stayed white, and the section vanished. */
.koda-page-rug .section-cool:not(.koda-photo-band) { background: var(--koda-night-2); background-color: var(--koda-night-2); color: #fff; }
.koda-page-rug .section-cool .section-title, .koda-page-rug .section-cool h2, .koda-page-rug .section-cool h3 { color: #fff; }
.koda-page-rug .section-cool .process-card { background: #fff; background-color: #fff; border-top: 2px solid var(--koda-gilt); }
.koda-page-rug .section-cool .process-card h3 { color: var(--koda-night); }
.koda-page-rug .section-cool .process-card p { color: rgba(30,37,48,0.70); }
.koda-page-rug .section-cool .process-number { color: var(--koda-night-3); }
/* Its hero is a photo band rather than a hero element, and the page sets a
   cream text colour on the whole section. */
.koda-page-rug .wave-section.koda-photo-band { color: #fff; }

/* /emergency paints its hero onto `.section-base`, which is a plain white band
   everywhere else — so the photo band is opted in by class instead. */
.koda-page-emergency .koda-photo-band { background-color: transparent; }
.koda-page-emergency .section-steel-blue .process-step { background: #fff; background-color: #fff; }
.koda-page-emergency .section-steel-blue .process-step h3 { color: var(--koda-night); }
.koda-page-emergency .section-steel-blue .process-step p { color: rgba(30,37,48,0.70); }
.koda-page-emergency .emergency-hero-trust { color: rgba(255,255,255,0.94); }

/* ============================================================================
   14. CONTRAST FLOOR
   Measured, not eyeballed. `opacity` on an element multiplies with the alpha
   in its own colour, so a .5 opacity on top of a .7 alpha renders at .35 —
   these are the places that happened.
   ========================================================================= */
.koda-v2 .form-fine-print, .koda-v2 .footer-bottom p, .koda-v2 .ks-footer-note,
.koda-v2 .process-step p, .koda-v2 .process-card p, .koda-v2 .section-header p,
.koda-v2 .page-hero-trust, .koda-v2 .hero-trust, .koda-v2 .trust-line { opacity: 1; }


/* ============================================================================
   15. FONT REMAP
   Twenty-nine component rules across styles.css and the six self-styled pages
   hardcode `font-family: 'Lora', serif` on the element itself rather than
   letting it inherit — and several of them are two classes deep, so no rule a
   theme can write for a bare `p` will reach them. Lora is no longer loaded, so
   left alone they resolve to the browser's default serif: a font nobody chose.
   Each is restated here at one class more specificity. No !important needed —
   the list is finite, and an explicit list is easier to audit than a hammer.
   ========================================================================= */
.koda-v2 .page-hero .subtext, .koda-v2 .hero-subtext, .koda-v2 .section-header p,
.koda-v2 .grid-content p, .koda-v2 .content-left p, .koda-v2 .types-content p,
.koda-v2 .comparison-card p, .koda-v2 .comparison-card li,
.koda-v2 .emergency-card p, .koda-v2 .emergency-features li,
.koda-v2 .highlight-box p, .koda-v2 .feature-list li, .koda-v2 .types-list li,
.koda-v2 .process-card p, .koda-v2 .process-step p,
.koda-v2 .section-steel-blue .process-step p,
.koda-v2 .footer-bottom, .koda-v2 .footer-bottom p,
.koda-v2 .footer-section p, .koda-v2 .footer-section a, .koda-v2 .footer-section li,
.koda-v2 .emergency-hero-trust, .koda-v2 .floor-features li,
.koda-v2 .floor-detail p, .koda-v2 .ks-prose p, .koda-v2 .ks-prose li {
  font-family: var(--font-body);
}
/* These are the body-font exceptions that stay on the display face: numerals,
   phone numbers and the italic hero kicker read as typography, not as UI. */
.koda-v2 .floor-detail-cta, .koda-v2 .cta-banner-phone, .koda-v2 .cta-banner-phone a,
.koda-v2 .cta-phone, .koda-v2 .ks-cta-phone, .koda-v2 .cta-phone-big,
.koda-v2 .process-number, .koda-v2 .process-step-num, .koda-v2 .process-step-number,
.koda-v2 .hero-kicker, .koda-v2 .ks-hero .ks-hero-kicker, .koda-v2 .page-hero .hero-kicker {
  font-family: var(--font-display);
}
.koda-v2 .floor-detail-cta { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }

/* ============================================================================
   16. HERO BUTTON HIERARCHY
   `.btn-phone` is the primary button's twin on the four self-styled service
   pages. Painting both burgundy in a hero gives a customer two identical
   buttons and no first choice, so on any dark band the phone button becomes
   the outline and "Get a Quote" keeps the fill.
   ========================================================================= */
.koda-v2 .ks-hero .btn-phone, .koda-v2 .page-hero .btn-phone,
.koda-v2 .hero .btn-phone, .koda-v2 .cta-banner .btn-phone,
.koda-v2 .koda-photo-band .btn-phone, .koda-v2 .cta-inner .btn-phone {
  background: transparent; background-color: transparent;
  color: #fff; border: 1px solid rgba(255,255,255,0.42);
}
.koda-v2 .ks-hero .btn-phone:hover, .koda-v2 .page-hero .btn-phone:hover,
.koda-v2 .hero .btn-phone:hover, .koda-v2 .cta-banner .btn-phone:hover,
.koda-v2 .koda-photo-band .btn-phone:hover, .koda-v2 .cta-inner .btn-phone:hover {
  background: rgba(255,255,255,0.12); background-color: rgba(255,255,255,0.12);
  color: #fff; border-color: #fff;
}


/* ============================================================================
   17. LEGAL PAGES
   /privacy-policy and /terms-of-service carry a burgundy hero defined in their
   own <style>. `.legal-hero h1` and `.koda-v2 h1` are both (0,1,1), so the tie
   went to whichever loaded last — this theme — and the heading came out night
   ink on burgundy at 1.21:1. The band becomes night and its type is restated
   white, rather than leaving the outcome to load order.
   ========================================================================= */
.koda-v2 .legal-hero { background: var(--koda-night-2); background-color: var(--koda-night-2); }
.koda-v2 .legal-hero h1 { color: #fff; }
.koda-v2 .legal-hero p { color: rgba(255,255,255,0.84); }
.koda-v2 .legal-body h2, .koda-v2 .legal-body h3 { color: var(--koda-night); }
.koda-v2 .legal-body p, .koda-v2 .legal-body li, .koda-v2 .legal-intro { color: rgba(30,37,48,0.80); opacity: 1; font-family: var(--font-body); }
.koda-v2 .legal-body a { color: var(--koda-slate-ink); }
.koda-v2 .legal-updated { color: rgba(30,37,48,0.66); opacity: 1; }
.koda-v2 .legal-notice { background: var(--koda-mist); border-left: 3px solid var(--koda-night-3); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE SERVICE PAGE, REDUCED TO ONE BLOCK — 2026-09-14

   Jeremy: *"Can you keep the SEO bump and minimize the amount of stuff on those
   pages? Those are just so wordy and we don't have time to spend going through
   them all to make sure they're right and our customers will never read those
   … Try to scrap the hero and the fluff, keep it to just about what is in the
   attached screenshot."*

   THE SCREENSHOT HE SENT IS A BLOCK THIS SITE ALREADY SHIPS: "Rug Types We
   Clean" on /rug-cleaning — a heading, three sentences, six ticks in two
   columns, and one photograph under a soft shadow. It was written as a section
   inside a page; it is now the page.

   SO THESE RULES ARE THAT BLOCK'S, PROMOTED. They lived in a <style> element
   inside rug-cleaning.html and could therefore only ever style one page. Moving
   them here is what lets all twelve service pages be the same object, and it is
   why every one of them is now a heading, a lede, six ticks, a photo and the
   FAQ — nothing else between the nav and the footer.

   WHAT SURVIVED, AND WHY. The parenthesis in the brief was "unless there is SEO
   value", so the three things that carry it stayed: the <h1> (verbatim — it is
   what these pages rank on and churning it would throw that away), the service
   area strip with its city list and NAP, and the FAQ. The FAQ looks like fluff
   and is the opposite of it: it is unique copy shaped like the questions people
   actually type, it is what backs the FAQPage schema in the head (Google
   requires that markup's content to be present on the page), and collapsed it
   occupies six rows. The ~700-word essay in `.ks-prose` is what went.

   FONT SIZES ARE THE FLOORS, NOT THE ORIGINAL'S. The block came with a .95rem
   list and CLAUDE.md §4.1 sets 16px as the web floor for body copy on a site
   whose audience is 35+. The ticks are 16px here and the lede is 17px.
   ═══════════════════════════════════════════════════════════════════════════ */
/* THE NAV IS FIXED AND 81px TALL, and this block is now the first thing under
   it — the hero it replaced carried its own clearance and took that knowledge
   with it when it went. 124px is the bar plus the 40px of air the old hero
   started with, so the breadcrumb is the first line the reader sees rather
   than the first line the header covers. */
.koda-v2 .ks-lede { padding: 124px 0 72px; background: #fff; }
.koda-v2 .ks-lede .section-content {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}

/* The breadcrumb is visible because there is BreadcrumbList markup in the head
   of every one of these pages, and a trail nobody can see is a claim with
   nothing behind it. It is also the only navigation the page now has above the
   footer. */
.koda-v2 .ks-crumb {
  font-family: var(--font-body); font-size: 14px; margin: 0 0 14px;
  color: rgba(30,37,48,0.66);
}
.koda-v2 .ks-crumb a { color: var(--koda-slate-ink); text-decoration: none; }
.koda-v2 .ks-crumb a:hover { text-decoration: underline; }

/* THE H1 IS THIS BLOCK'S HEADING NOW. It used to sit in a full-bleed photo
   hero over a kicker, a sub-headline, two buttons and a star line; the hero is
   gone and the heading came down into the copy where the rest of the page is.
   Same words, one twelfth of the furniture. */
.koda-v2 .ks-lede h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.2vw, 42px); line-height: 1.18;
  color: var(--koda-burgundy); margin: 0 0 20px;
}
.koda-v2 .ks-lede .ks-lede-sub {
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  color: rgba(30,37,48,0.78); margin: 0 0 26px; max-width: 52ch;
}

.koda-v2 .ks-lede .types-list {
  list-style: none; padding: 0; margin: 0 0 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.koda-v2 .ks-lede .types-list li {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: rgba(30,37,48,0.82); padding-left: 26px; position: relative;
}
/* The lozenge is the reference's own mark, in the brand burgundy. */
.koda-v2 .ks-lede .types-list li::before {
  content: "\25C6"; position: absolute; left: 0; top: 0;
  color: var(--koda-burgundy); font-size: 11px; line-height: 1.9;
}

.koda-v2 .ks-lede .cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* THE DEPTH IS THE REFERENCE'S. Jeremy asked to keep "the depth/shadowing/
   format of the photo layout", so the frame keeps the 4px radius and the soft
   24px drop it has always had rather than picking up one of the homepage's
   lifts, which belong to a different page. */
.koda-v2 .ks-lede .types-image {
  width: 100%; border-radius: 4px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.koda-v2 .ks-lede .types-image img {
  width: 100%; height: auto; display: block; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: var(--shot-pos, center center);
}

/* Stacked, the photograph leads. A reader on a phone should see what the page
   is about before they read what it says about it. */
@media (max-width: 900px) {
  .koda-v2 .ks-lede { padding: 104px 0 48px; }
  .koda-v2 .ks-lede .section-content {
    grid-template-columns: 1fr; gap: 28px; padding: 0 22px;
  }
  .koda-v2 .ks-lede .types-image { order: -1; }
  .koda-v2 .ks-lede .types-image img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .koda-v2 .ks-lede .types-list { grid-template-columns: 1fr; gap: 12px; }
}

/* The service-area strip lost its paragraph of marketing; what is left is the
   H2, the cities and the NAP, which is the whole of what that section was ever
   worth to a local search — so it needs less room than it did.

   `.ks-lede + .ks-area`, and the adjacency is the scope. This sheet is linked by
   twenty-one pages, several of which carry a `.ks-area` of their own that still
   has its paragraph; the only strips that should shrink are the ones sitting
   directly under the new block, and the selector says exactly that rather than
   relying on a body class that six different pages spell six different ways. */
.koda-v2 .ks-lede + .ks-area { padding: 56px 0; }

/* THE LOCATION PAGES HAVE NO PHOTOGRAPH AT ALL. Every city page lost its stock
   shot on 2026-09-17 — a register full of dust in Zeeland and the same register
   in Fennville was decoration standing in for a place, and it read as stock the
   moment two of them were seen together.

   `.ks-lede-solo` and nothing wider: the twelve SERVICE pages share this block
   and keep their photos, so the one-column rule has to be asked for by name.
   The measure is 980px rather than the grid's 1200 so the copy does not run the
   full width of the page with nothing beside it, while the lozenge list still
   has the room to stay in two columns. */
.koda-v2 .ks-lede-solo .section-content {
  grid-template-columns: 1fr; gap: 0; max-width: 980px;
}
.koda-v2 .ks-lede-solo .ks-lede-sub { max-width: 64ch; }
/* styles.css centres `.cta-buttons` for the banded sections it was written for.
   Beside a photograph that read as a column of its own; under a full-width
   column of left-aligned copy it reads as a mistake, so the pair lines up with
   the text it belongs to. The <=480px rule in styles.css still stacks them. */
.koda-v2 .ks-lede-solo .cta-buttons { justify-content: flex-start; }
