@charset "UTF-8";
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/figtree-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --brand: #31522e;
  --brand-dark: #243d22;
  --brand-light: #4a7a44;
  --brand-muted: #a1c598;
  --brand-faint: #f5f7f5;
  --text: #1c1c1c;
  --text-muted: #5a6471;
  --bg: #ffffff;
  --bg-alt: #f5f7f5;
  --border: #dde4db;
  --border-strong: #b8c9b4;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --radius: 2px;
  --radius-md: 4px;
  --shadow-md: 0 4px 24px rgba(0,0,0,.12);
  --content-max: 780px;
  --page-max: 1080px;
  --header-max: 1080px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--brand);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

address {
  font-style: normal;
}

button {
  font-family: var(--font-body);
}

.container {
  width: 100%;
  max-width: var(--page-max, 1080px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-block > .container,
.kk-section > .container,
.kk-faq > .container {
  max-width: var(--content-max, 780px);
}

.kk-main {
  min-height: 50vh;
}

.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
}

/* Keyboard focus, visible on both grounds.
   The browser's default 1px outline disappears against the dark bands and the
   green buttons — a keyboard user could not tell where they were. :focus-visible
   so a mouse click never draws it. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* On the dark sections the brand green has nothing to contrast against. */
.kk-hero :focus-visible,
.kk-cta :focus-visible,
.kk-footer :focus-visible,
.kk-marquee :focus-visible,
.section-block--thanks .kk-btn:focus-visible {
  outline-color: #fff;
}

.visually-hidden-focusable:focus {
  left: 1rem;
  top: 1rem;
  background: var(--brand);
  color: #fff;
  padding: 0.5rem 1.1rem;
  z-index: 9999;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.btn--primary:hover,
.btn--primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
}

.kk-cta .btn--primary {
  background: var(--brand-light);
  color: #fff;
  border-color: var(--brand-light);
}

.kk-cta .btn--primary:hover,
.kk-cta .btn--primary:focus {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.kk-cta .btn--ghost {
  border-color: #fff;
  color: #fff;
}

.kk-cta .btn--ghost:hover,
.kk-cta .btn--ghost:focus {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: #fff;
}

.btn--hero {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
  font-size: 1.05rem;
}

.btn--hero:hover,
.btn--hero:focus {
  background: var(--brand-faint);
  color: var(--brand);
  border-color: var(--brand-faint);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover,
.btn--ghost:focus {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

.btn--outline:hover,
.btn--outline:focus {
  background: var(--brand);
  color: #fff;
}

.btn--lg {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
}

.btn--sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.kk-topbar {
  background: var(--brand-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kk-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  gap: 1rem;
}

.kk-topbar__info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.kk-topbar__info li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
}

.kk-topbar__info svg {
  flex-shrink: 0;
}

.kk-topbar__info a {
  color: var(--brand-muted);
  text-decoration: none;
}

.kk-topbar__info a:hover {
  color: #fff;
}

.kk-topbar__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kk-topbar__social a {
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  padding: 0.2rem;
  transition: color 0.15s;
}

.kk-topbar__social a:hover {
  color: #fff;
}

.kk-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 1px 6px rgba(49, 82, 46, 0.07);
  transition: box-shadow 0.4s ease;
}
.kk-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(49, 82, 46, 0.14);
}

.kk-header__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 1.5rem;
  max-width: var(--header-max, 1080px);
  margin: 0 auto;
  transition: padding 0.4s ease;
}
.is-scrolled .kk-header__row {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.kk-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}

.kk-header__brand:hover {
  color: var(--brand-dark);
}

.kk-header__logo {
  display: block;
  height: 3.5rem;
  max-height: 3.5rem;
  width: auto;
  object-fit: contain;
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.4s ease;
}
.is-scrolled .kk-header__logo {
  transform: scale(0.72);
}
@media (max-width: 840px) {
  .kk-header__logo {
    height: 2.5rem;
    max-height: 2.5rem;
  }
  .is-scrolled .kk-header__logo {
    transform: none;
  }
}

.kk-header__nav {
  flex: 1;
}

.kk-header__nav-close {
  display: none;
}

.kk-header__nav > ul {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-end;
}

.kk-header__nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  position: relative;
  transition: color 0.15s;
}

.kk-header__nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.2s ease;
  border-radius: 1px;
}

.kk-header__nav a:hover {
  color: var(--brand);
}

.kk-header__nav a:hover::after {
  transform: scaleX(1);
}

.kk-header__nav a[aria-current=page] {
  color: var(--brand);
}

.kk-header__nav a[aria-current=page]::after {
  transform: scaleX(1);
}

.kk-header__cta-btn {
  flex-shrink: 0;
}

.kk-nav__dropdown {
  position: relative;
}

.kk-nav__dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.kk-nav__chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.kk-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0 0.35rem;
  list-style: none;
  margin: 0;
  z-index: 200;
  white-space: nowrap;
}

.kk-nav__submenu li a {
  display: block;
  padding: 0.5rem 1.1rem;
  color: var(--text);
  font-size: 0.875rem;
}

.kk-nav__submenu li a:hover,
.kk-nav__submenu li a[aria-current=page] {
  color: var(--brand);
  background: var(--bg-alt);
}

.kk-nav__submenu li a::after {
  display: none !important;
}

.kk-header__toggle, .kk-header__phone-link {
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.kk-header__toggle:hover, .kk-header__phone-link:hover {
  border-color: var(--brand);
  background: var(--brand-faint);
}

.kk-header__phone-link {
  color: var(--brand);
  text-decoration: none;
}
.kk-header__phone-link:hover {
  color: var(--brand-dark);
}

.kk-header__toggle {
  flex-direction: column;
  gap: 4px;
  color: var(--text);
}

.kk-header__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

@media (min-width: 841px) {
  .kk-nav__dropdown:hover .kk-nav__submenu,
  .kk-nav__dropdown:focus-within .kk-nav__submenu {
    display: block;
  }
  .kk-nav__dropdown:hover .kk-nav__chevron,
  .kk-nav__dropdown:focus-within .kk-nav__chevron {
    transform: rotate(180deg);
  }
}
.kk-header__mobile-cta {
  display: none;
}

@media (max-width: 840px) {
  .kk-header__mobile-cta {
    display: block;
    margin-top: 1rem;
    text-align: center;
  }
}
@media (max-width: 840px) {
  .kk-topbar {
    display: none;
  }
  .kk-header__cta-btn {
    display: none;
  }
  .kk-header__phone-link {
    display: flex;
    margin-left: auto;
  }
  .kk-header__toggle {
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }
  .kk-header__row {
    flex-wrap: wrap;
  }
  .is-scrolled .kk-header__row {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
  .kk-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 85vw);
    z-index: 200;
    display: block;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    padding: 4.5rem 0 2rem;
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .kk-header__nav.is-open {
    transform: translateX(0);
  }
  body.kk-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 199;
  }
  .kk-header__nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .kk-header__nav a::after {
    display: none;
  }
  .kk-header__nav > ul > li > a {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    transition: background 0.15s, color 0.15s;
  }
  .kk-header__nav > ul > li > a:hover {
    background: var(--brand-faint);
    color: var(--brand);
  }
  .kk-header__nav > ul > li > a[aria-current=page] {
    color: var(--brand);
    font-weight: 700;
  }
  .kk-nav__submenu {
    display: none;
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    background: var(--bg-alt);
  }
  .kk-nav__dropdown.is-open .kk-nav__submenu {
    display: block;
  }
  .kk-nav__submenu li a {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    display: block;
    padding: 0.75rem 1.25rem 0.75rem 2.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    transition: background 0.15s, color 0.15s;
  }
  .kk-nav__submenu li a:hover {
    background: var(--brand-faint);
    color: var(--brand);
  }
  .kk-nav__submenu li a[aria-current=page] {
    color: var(--brand);
  }
  .kk-nav__submenu li:last-child a {
    border-bottom: none;
  }
  .kk-nav__chevron {
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  .kk-nav__dropdown.is-open .kk-nav__chevron {
    transform: rotate(180deg);
  }
  .kk-header__nav-close {
    display: flex;
    position: absolute;
    top: 0.9rem;
    right: 1.5rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .kk-header__nav-close:hover {
    color: var(--text);
    border-color: var(--brand);
    background: var(--brand-faint);
  }
  .kk-header__mobile-cta {
    display: block;
    margin: 1.5rem 1.25rem 0;
    width: calc(100% - 2.5rem);
    padding: 0.85rem 1rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brand);
    background: #fff;
    border: 2px solid var(--brand);
    border-radius: var(--radius);
    transition: background 0.18s, color 0.18s;
  }
  .kk-header__mobile-cta:hover {
    background: var(--brand);
    color: #fff;
  }
}
.kk-hero {
  position: relative;
  background: var(--brand);
  color: #fff;
  padding: 5rem 0 3rem;
  overflow: hidden;
}

.kk-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
}

.kk-hero__content {
  position: relative;
  z-index: 1;
}

.kk-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.kk-hero__text {
  font-size: 1.1rem;
  color: #fff;
  max-width: 54ch;
  margin-bottom: 2rem;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.kk-hero__cta {
  margin: 0;
}

.kk-hero__bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.kk-hero__bg {
  position: absolute;
  inset: 0;
  display: none;
}

.kk-hero__bg--mobile {
  display: block;
}

@media (min-width: 768px) {
  .kk-hero__bg--mobile {
    display: none;
  }
  .kk-hero__bg--tablet {
    display: block;
  }
}
@media (min-width: 1280px) {
  .kk-hero__bg--tablet {
    display: none;
  }
  .kk-hero__bg--desktop {
    display: block;
  }
}
.kk-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--hero-speed, 800ms) ease, transform var(--hero-speed, 800ms) ease;
}

.kk-hero__slide.is-active {
  opacity: 1;
}

.kk-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kk-hero__bg--fit-contain .kk-hero__slide img {
  object-fit: contain;
}

.kk-hero__bg--anim-slide .kk-hero__slide {
  transform: translateX(6%);
}

.kk-hero__bg--anim-slide .kk-hero__slide.is-active {
  transform: translateX(0);
}

.kk-hero__bg--anim-zoom .kk-hero__slide {
  transform: scale(1.08);
}

.kk-hero__bg--anim-zoom .kk-hero__slide.is-active {
  transform: scale(1);
}

.kk-hero__bg--anim-none .kk-hero__slide {
  transition: none;
}

.kk-hero__bg--fit-contain .kk-hero__slide {
  background-size: contain;
  background-repeat: no-repeat;
}

.kk-hero--gallery .kk-hero__overlay {
  z-index: 0;
}

.kk-hero--gallery .kk-hero__content {
  z-index: 2;
}

.kk-hero--compact {
  padding: 2.5rem 0 1.5rem;
}

@media (max-width: 767px) {
  .kk-hero--conversion,
  .kk-hero--conversion.kk-hero--has-image {
    aspect-ratio: auto;
    min-height: 0;
    max-height: 260px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .kk-hero--conversion .kk-marquee,
  .kk-hero--conversion.kk-hero--has-image .kk-marquee {
    display: none;
  }
}

@media (max-width: 767px) {
  .kk-hero--conversion.kk-hero--has-marquee-mobile,
  .kk-hero--conversion.kk-hero--has-image.kk-hero--has-marquee-mobile {
    padding-bottom: 1.25rem;
  }
}
.kk-hero--compact .kk-hero__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.kk-hero--has-image {
  background-color: var(--brand-dark);
  background-size: cover;
  background-position: center;
}

.kk-hero--has-image .kk-hero__overlay {
  background-image: none;
  background-color: rgba(20, 35, 18, 0.55);
}

.kk-hero--has-image {
  background-image: var(--hero-bg-mobile, var(--hero-bg-tablet, var(--hero-bg-desktop)));
  aspect-ratio: var(--hero-ar-mobile, var(--hero-ar-tablet, var(--hero-ar-desktop, 3/2)));
  min-height: 320px;
  /* The ratio comes from whichever image an operator picked, and with an auto
     width a min-height wins the height and the ratio then decides the width:
     a landscape picture in the mobile slot (1920/640) made the hero
     320 x 3 = 960px on a 390px screen, and every section below it stretched
     to match. Two landing pages were scrolling sideways because of it.
     Clamping the width means an unexpected ratio distorts the hero's own
     proportions and stops there, instead of widening the page. */
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .kk-hero--has-image {
    background-image: var(--hero-bg-tablet, var(--hero-bg-desktop, var(--hero-bg-mobile)));
    aspect-ratio: var(--hero-ar-tablet, var(--hero-ar-desktop, var(--hero-ar-mobile, 16/9)));
    min-height: 360px;
  }
}
@media (min-width: 1280px) {
  .kk-hero--has-image {
    background-image: var(--hero-bg-desktop, var(--hero-bg-tablet, var(--hero-bg-mobile)));
    aspect-ratio: var(--hero-ar-desktop, var(--hero-ar-tablet, var(--hero-ar-mobile, 16/9)));
    min-height: 420px;
  }
}

.kk-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
}

@media (max-width: 767px) {
  .kk-hero--has-marquee-mobile {
    padding-bottom: 5rem;
  }
  .kk-hero--has-image.kk-hero--has-marquee-mobile {
    padding-bottom: 4rem;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .kk-hero--has-marquee-tablet {
    padding-bottom: 5rem;
  }
  .kk-hero--has-image.kk-hero--has-marquee-tablet {
    padding-bottom: 4.25rem;
  }
}
@media (min-width: 1280px) {
  .kk-hero--has-marquee-desktop {
    padding-bottom: 5rem;
  }
  .kk-hero--has-image.kk-hero--has-marquee-desktop {
    padding-bottom: 4.5rem;
  }
}
.kk-marquee__viewport {
  display: none;
  overflow: hidden;
}

.kk-marquee__viewport--mobile {
  display: block;
}

@media (min-width: 768px) {
  .kk-marquee__viewport--mobile {
    display: none;
  }
  .kk-marquee__viewport--tablet {
    display: block;
  }
}
@media (min-width: 1280px) {
  .kk-marquee__viewport--tablet {
    display: none;
  }
  .kk-marquee__viewport--desktop {
    display: block;
  }
}
.kk-marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: kk-marquee-scroll 32s linear infinite;
}

.kk-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

.kk-marquee__icon {
  font-size: 1.15rem;
  color: var(--brand-muted, #cfe3c4);
}

.kk-marquee__text {
  white-space: nowrap;
}

@keyframes kk-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kk-marquee__track {
    animation: none;
  }
  .kk-marquee__viewport {
    overflow-x: auto;
  }
}
.kk-trust-bar {
  background: #fff;
}

.kk-trust-bar__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 767px) {
  .kk-trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kk-trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem 1rem;
  gap: 0.55rem;
  position: relative;
}
.kk-trust-bar__item + .kk-trust-bar__item {
  border-left: 1px solid var(--border);
}
@media (max-width: 767px) {
  .kk-trust-bar__item + .kk-trust-bar__item {
    border-left: none;
  }
  .kk-trust-bar__item:nth-child(even) {
    border-left: 1px solid var(--border);
  }
  .kk-trust-bar__item:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
}

.kk-trust-bar__value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.kk-trust-bar__value .bi-star-fill, .kk-trust-bar__value .bi-star-half {
  font-size: 1.15rem;
  color: #e8a800;
}
.kk-trust-bar__value .bi-truck, .kk-trust-bar__value .bi-shield-check {
  font-size: 1.75rem;
  color: var(--brand);
}

.kk-trust-bar__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.kk-services-section {
  padding: 3.5rem 0;
}

.kk-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.kk-section-title + p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.kk-services-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.kk-service-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.kk-service-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.kk-service-card__icon {
  margin-bottom: 0.75rem;
}

.kk-service-card__icon i {
  color: var(--brand);
  font-size: 2rem;
  line-height: 1;
}

.kk-service-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.kk-service-card__summary {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.kk-service-card__link {
  margin-top: auto;
  padding-top: 0.6rem;
}

.kk-services-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.kk-services-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.kk-services-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 840px) {
  .kk-services-grid--cols-2,
  .kk-services-grid--cols-3,
  .kk-services-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .kk-services-grid--cols-2,
  .kk-services-grid--cols-3,
  .kk-services-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}
.kk-service-card__image {
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kk-service-card__image img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.kk-service-card--link {
  cursor: pointer;
}

.kk-service-card__button {
  margin-top: 1.1rem;
}

.kk-cta {
  background: var(--brand-dark);
  color: #fff;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}

.kk-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.kk-cta::after {
  content: "//";
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
}

.kk-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.kk-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  color: #fff;
}

.kk-cta__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.kk-cta__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.kk-section {
  padding: 3rem 0;
}

/* A breadcrumb sits close under the bar above it, and the section that carries
   it takes the same measure underneath, so the block is even on both sides. */
.kk-section:has(.kk-breadcrumb) {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.kk-section--breadcrumb-only {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.kk-prose {
  max-width: none;
}

.kk-prose h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--brand);
  display: inline-block;
}

.kk-prose p,
.kk-prose li {
  line-height: 1.75;
  color: var(--text-muted);
}

.kk-prose ul,
.kk-prose ol {
  padding-left: 1.5rem;
}

.kk-prose ul {
  list-style: disc;
}

.kk-prose li {
  margin: 0.3rem 0;
}

.kk-prose li[data-list=bullet] {
  list-style-type: disc;
}

.kk-prose li[data-list=ordered] {
  list-style-type: decimal;
}

.kk-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}

.kk-prose th,
.kk-prose td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border, #e2e5e1);
  vertical-align: top;
  line-height: 1.55;
}

.kk-prose thead th {
  color: var(--text, #1c2a19);
  font-weight: 600;
  border-bottom-width: 2px;
}

.kk-prose td {
  color: var(--text-muted);
}

.kk-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.5rem;
}

.kk-table-scroll table {
  min-width: 34rem;
  margin: 0;
}

.kk-service-intro__lead {
  font-size: 1.12rem;
  color: var(--text, #1c2a19);
}

.kk-prose .kk-service-intro__includes {
  list-style: none;
  padding-left: 0;
  margin: 1.1rem 0 0;
}

.kk-prose .kk-service-intro__includes li {
  position: relative;
  padding-left: 1.7rem;
  margin: 0.4rem 0;
}

.kk-prose .kk-service-intro__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

.kk-cta-row {
  margin: 2rem 0;
}

.kk-cta-row--split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 860px) {
  .kk-cta-row--split {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }
}
.kk-cta-row__main, .kk-cta-row__aside {
  min-width: 0;
}

.kk-cta-row__aside > .section-block {
  margin: 0;
  padding: 0;
}

.kk-cta-row__aside > .section-block > .container {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.kk-cta-row__aside .kk-reviews__heading {
  margin-top: 0;
}

.kk-booking-cta {
  margin: 0;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-md);
  background: var(--brand, #31522e);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  height: 100%;
}

.kk-booking-cta__body {
  min-width: 0;
}

.kk-booking-cta__heading {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #fff;
}

.kk-booking-cta__text {
  margin: 0;
  opacity: 0.9;
  font-size: 0.98rem;
  line-height: 1.5;
}

.kk-booking-cta__form {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.kk-booking-cta__plate {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1c2a19;
}

.kk-booking-cta__brand {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.kk-brand__suggest {
  color: var(--text, #1c2a19);
}

.kk-booking-cta__brand .kk-booking-cta__plate {
  width: 100%;
}

.kk-booking-cta__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.kk-booking-cta__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 560px) {
  .kk-booking-cta__form {
    flex-wrap: wrap;
  }
  .kk-booking-cta__plate,
  .kk-booking-cta__brand {
    flex: 1 1 100%;
  }
  .kk-booking-cta__btn {
    flex: 1 1 100%;
    width: 100%;
  }
}
.kk-booking-cta .btn--primary {
  background: #fff;
  color: var(--brand, #31522e);
  border-color: #fff;
}

.kk-booking-cta .btn--primary:hover,
.kk-booking-cta .btn--primary:focus {
  background: #eef2ee;
  color: var(--brand, #31522e);
  border-color: #eef2ee;
}

.section-block--booking-cta {
  padding: 1.5rem 0;
}

.kk-contact__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kk-pricing-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.1rem 1.3rem;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.kk-pricing-link:hover {
  border-color: var(--brand, #31522e);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}

.kk-pricing-link__icon {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(49, 82, 46, 0.08);
  color: var(--brand, #31522e);
  font-size: 1.3rem;
}

.kk-pricing-link__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kk-pricing-link__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text, #1c2a19);
}

.kk-pricing-link__text {
  color: var(--text-muted, #64748b);
  font-size: 0.95rem;
}

.kk-pricing-link__cta {
  flex: none;
  font-weight: 700;
  color: var(--brand, #31522e);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .kk-pricing-link {
    flex-wrap: wrap;
  }
  .kk-pricing-link__cta {
    width: 100%;
  }
}
.kk-transport-pricing__heading {
  margin: 0 0 0.5rem;
}

.kk-transport-pricing__intro {
  color: var(--text-muted, #64748b);
  margin: 0 0 1.25rem;
}

.kk-transport-pricing__rules {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.kk-transport-pricing__rule {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md);
}

.kk-transport-pricing__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  background: rgba(49, 82, 46, 0.08);
  color: var(--brand, #31522e);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.kk-transport-pricing__rule-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.kk-transport-pricing__area {
  font-size: 1.05rem;
  color: var(--text, #1c2a19);
}

.kk-transport-pricing__meta {
  color: var(--text-muted, #64748b);
  font-size: 0.9rem;
}

.kk-transport-pricing__base {
  margin: 0 0 1rem;
}

.kk-transport-pricing__exceptions {
  color: var(--text-muted, #64748b);
}

.kk-transport-pricing__cta {
  margin-top: 1.25rem;
}

@media (max-width: 560px) {
  .kk-transport-pricing__rule {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.kk-contact {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.kk-table th {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: left;
}

.kk-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.kk-table tr:last-child td {
  border-bottom: none;
}

.kk-table tr:hover td {
  background: var(--brand-faint);
}

.kk-form {
  display: grid;
  gap: 1.25rem;
  max-width: 540px;
}

.kk-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kk-form__row label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.kk-form__row input,
.kk-form__row select,
.kk-form__row textarea {
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--bg);
  width: 100%;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kk-form__row input:focus,
.kk-form__row select:focus,
.kk-form__row textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(49, 82, 46, 0.12);
}

.kk-form__row textarea {
  min-height: 140px;
  resize: vertical;
}

.kk-form__row.has-error input,
.kk-form__row.has-error select,
.kk-form__row.has-error textarea {
  border-color: #c53030;
}

.kk-form__error {
  color: #c53030;
  font-size: 0.85rem;
}

.kk-form__honeypot {
  position: absolute;
  left: -9999px;
}

.kk-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.message {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: 0.95rem;
  border-left: 4px solid;
}

.message.success {
  background: #f0fdf4;
  color: #166534;
  border-color: #22c55e;
}

.message.error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #ef4444;
}

.message.warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #f59e0b;
}

.kk-footer {
  background: var(--brand);
  color: #fff;
  padding: 3.5rem 0 0;
  position: relative;
}

.kk-footer__cols {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 2.5rem;
}

.kk-footer__heading {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kk-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.kk-footer__col li {
  margin: 0;
}

.kk-footer__col a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s;
}

.kk-footer__col a:hover {
  color: #fff;
}

.kk-footer__col li > a,
.kk-footer__legal-links a,
.kk-footer__contact a {
  display: inline-block;
  padding-block: 0.35rem;
  min-height: 24px;
}

.kk-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

.kk-footer__col address {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.8;
}

.kk-footer__col p {
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
}

.kk-footer__col p a {
  color: var(--brand-muted);
}

.kk-footer__col p a:hover {
  color: #fff;
}

.kk-footer__brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
  line-height: 1;
}

.kk-footer__logo {
  display: block;
  height: 2.75rem;
  width: auto;
  max-width: 220px;
  filter: brightness(0) invert(1);
}

.kk-footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* A fixed square with the glyph centred in it, rather than a box sized by
   padding around inline content: the icon is an SVG on a text baseline, so the
   line box made the container 32x37 and left the 16px glyph 6px from the left
   against 10px right, 7px from the top against 14px below. `line-height: 1`
   keeps the baseline out of the height, and the explicit width/height make the
   square actually square. */
/* Qualified with .kk-footer__col because the tap-target rule above matches
   these too — `.kk-footer__col li > a` is one class and two elements, which
   outranks a bare `.kk-footer__social a`, and it was winning: it forced
   display back to inline-block and added padding-block, which is what left the
   glyph 1px from the left edge and 7px/9px off vertically. */
.kk-footer__col .kk-footer__social a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  transition: color 0.15s, border-color 0.15s;
}

.kk-footer__social a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.kk-footer__bottom {
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* .4 and .45 white over the footer's #31522e composite to 2.82:1 and 3.18:1,
   against the 4.5:1 WCAG asks of text this size — the smallest type on the site
   was also its faintest. .65 clears it at 4.80:1 and still reads as secondary
   against the white above it. */
.kk-footer__bottom small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
}

.kk-footer__legal-links {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.kk-footer__legal-links a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}

.kk-footer__legal-links a:hover {
  color: #fff;
}

.kk-footer__trust {
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2.5rem;
}

.kk-footer__trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2rem;
  padding: 0.9rem 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
}

.kk-footer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.kk-footer__trust-item i {
  color: var(--brand-muted);
}

.kk-footer__tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin: -0.5rem 0 1rem;
}

.kk-footer .kk-footer__cta {
  margin: 0.25rem 0 1.25rem;
  background: #fff;
  color: var(--brand);
  border-color: #fff;
}

.kk-footer .kk-footer__cta:hover,
.kk-footer .kk-footer__cta:focus {
  background: #e8ece7;
  color: var(--brand-dark);
  border-color: #fff;
  transform: none;
}

.kk-footer__phone-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}

.kk-footer__group {
  margin: 0;
}

.kk-footer__group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kk-footer__group > summary::-webkit-details-marker {
  display: none;
}

.kk-footer__group > summary::after {
  content: "▾";
  color: var(--brand-muted);
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.kk-footer__group[open] > summary::after {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .kk-footer__group > summary {
    cursor: default;
    pointer-events: none;
  }
  .kk-footer__group > summary::after {
    display: none;
  }
  .kk-footer__group > ul {
    display: block !important;
  }
}
.kk-cookie {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  max-width: 760px;
  margin: 0 auto;
  background: var(--brand-dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-md);
  z-index: 1040;
  color: #fff;
}

@media (max-width: 767px) {
  .kk-cookie {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  body:has(.kk-sticky-cta:not(.kk-sticky-cta--hidden)) .kk-cookie {
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }
}
.kk-cookie__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.kk-cookie__text {
  margin: 0;
  flex: 1 1 240px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}

.kk-cookie__text a {
  color: var(--brand-muted);
  display: inline-block;
  padding-block: 0.3rem;
  min-height: 24px;
}

.kk-cookie__text a:hover {
  color: #fff;
}

.kk-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kk-cookie .btn--ghost {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}

.kk-cookie .btn--hero {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  color: var(--brand);
}

.kk-cookie__manage {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  min-height: 24px;
  font: inherit;
  color: var(--brand-muted);
  text-decoration: underline;
  cursor: pointer;
}

.kk-cookie__manage:hover {
  color: #fff;
}

@media (max-width: 767px) {
  .kk-cookie {
    padding: 0.85rem 0.9rem;
    left: 0.75rem;
    right: 0.75rem;
  }
  .kk-cookie__inner {
    gap: 0.6rem;
  }
  .kk-cookie__text {
    font-size: 0.82rem;
    line-height: 1.45;
    flex-basis: 100%;
  }
  .kk-cookie__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  .kk-cookie__actions .btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.82rem;
    padding: 0.5rem 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.kk-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.kk-consent-modal[hidden] {
  display: none;
}

.kk-consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.kk-consent-modal__box {
  position: relative;
  background: #fff;
  color: var(--text, #1c2a19);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md, 4px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.kk-consent-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #e2e5e1);
}

.kk-consent-modal__title {
  margin: 0;
  font-size: 1.15rem;
}

.kk-consent-modal__x {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 0.25rem;
}

.kk-consent-modal__body {
  padding: 1.25rem;
  overflow-y: auto;
}

.kk-consent-modal__intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.kk-consent-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border, #e2e5e1);
}

.kk-consent-modal .btn--ghost {
  color: var(--brand);
  border-color: var(--border, #cfd6cd);
}

.kk-consent-modal .btn--ghost:hover,
.kk-consent-modal .btn--ghost:focus {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.kk-consent-cat {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border, #e2e5e1);
  cursor: pointer;
}

.kk-consent-cat:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.kk-consent-cat__toggle {
  margin-top: 0.2rem;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
}

.kk-consent-cat__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kk-consent-cat__label {
  font-weight: 600;
}

.kk-consent-cat__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.kk-reviews__consent {
  text-align: center;
  padding: 1.75rem 1.25rem;
  border: 1px dashed var(--border, #cfd6cd);
  border-radius: var(--radius-md, 4px);
}

.kk-reviews__consent p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

.section-block {
  padding: 3rem 0;
}

.section-block h2,
.section-block h3,
.section-block h4 {
  margin-top: 1.25rem;
}

.section-block p {
  margin-bottom: 1rem;
}

.section-block ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.section-block ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.section-block li[data-list=bullet] {
  list-style-type: disc;
}

.section-block li[data-list=ordered] {
  list-style-type: decimal;
}

.section-block a:not(:where(.kk-btn, .btn)) {
  color: var(--brand);
}

.section-block a:not(:where(.kk-btn, .btn)):hover {
  color: var(--brand-dark);
}

.section-block blockquote {
  border-left: 3px solid var(--brand-light);
  padding-left: 1rem;
  color: var(--text-muted);
  font-style: italic;
}

.section-block--image-text {
  padding: 3rem 0;
}

.section-block--image-text + .section-block--image-text {
  padding-top: 2rem;
}

.section-block__image-text-row {
  display: flex;
  align-items: stretch;
  min-height: 460px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
}

.section-block__image-text-row--reverse {
  flex-direction: row-reverse;
}

.section-block__col--image {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
}
.section-block__col--image picture {
  position: absolute;
  inset: 0;
  display: block;
}
.section-block__col--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-block__col--text {
  flex: 1 1 45%;
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 3rem 2.5rem;
  border-left: 1px solid var(--border);
}

.section-block__image-text-row--reverse .section-block__col--text {
  border-left: none;
  border-right: 1px solid var(--border);
}

.section-block--image-text--alt .section-block__col--text {
  background: var(--brand-faint);
}

.section-block__text-inner {
  width: 100%;
  max-width: 460px;
}
.section-block__text-inner > *:first-child {
  margin-top: 0;
}
.section-block__text-inner h2, .section-block__text-inner h3, .section-block__text-inner h4, .section-block__text-inner h5 {
  color: var(--brand);
  margin-bottom: 0.75rem;
}
.section-block__text-inner p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.section-block__text-inner ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
}
.section-block__text-inner ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--text-muted);
}
.section-block__text-inner li[data-list=bullet] {
  list-style-type: disc;
}
.section-block__text-inner li[data-list=ordered] {
  list-style-type: decimal;
}
.section-block__text-inner a {
  color: var(--brand);
}
.section-block__text-inner a:hover {
  color: var(--brand-dark);
}
.section-block__text-inner strong {
  color: var(--text);
}

@media (max-width: 767px) {
  .section-block__image-text-row,
  .section-block__image-text-row--reverse {
    flex-direction: column;
  }
  .section-block__image-text-row--mobile-reverse {
    flex-direction: column-reverse;
  }
  .section-block__image-text-row--reverse.section-block__image-text-row--mobile-reverse {
    flex-direction: column;
  }
  .section-block__col--image {
    flex: none;
    width: 100%;
    height: 240px;
  }
  .section-block__col--image picture {
    position: absolute;
    inset: 0;
  }
  .section-block__col--text {
    padding: 2rem 1.5rem;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  .section-block__text-inner {
    max-width: none;
  }
}
.section-block__cols {
  display: grid;
  gap: 2rem;
}

.section-block__cols--2 {
  grid-template-columns: repeat(2, 1fr);
}

.section-block__cols--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .section-block__cols--2,
  .section-block__cols--3 {
    grid-template-columns: 1fr;
  }
}
.kk-faq {
  padding: 2rem 0 3.5rem;
  background: var(--bg-alt);
}
.kk-faq__heading {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 2rem;
  text-align: center;
}
.kk-faq__list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kk-faq__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.kk-faq__item[open] {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  border-color: var(--brand-light);
}
.kk-faq__item > summary {
  list-style: none;
}
.kk-faq__item > summary::-webkit-details-marker {
  display: none;
}
.kk-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading);
  line-height: 1.4;
}
.kk-faq__question:hover {
  background: var(--bg-alt);
}
.kk-faq__question:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.kk-faq__question-text {
  flex: 1;
}
.kk-faq__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}
.kk-faq__icon::before, .kk-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--brand);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.kk-faq__icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.kk-faq__icon::after {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.kk-faq__item[open] .kk-faq__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.kk-faq__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
}
.kk-faq__answer p {
  margin: 0 0 0.6rem;
}
.kk-faq__answer p:last-child {
  margin-bottom: 0;
}
.kk-faq__answer a {
  color: var(--brand);
}
.kk-faq__answer a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

@media (max-width: 575px) {
  .kk-faq {
    padding: 2.5rem 0;
  }
  .kk-faq__question {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
  }
  .kk-faq__answer {
    padding: 0 1rem 1rem;
  }
}
.kk-breadcrumb {
  margin-bottom: 1.25rem;
}
.kk-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.kk-breadcrumb__item {
  display: flex;
  align-items: center;
}
.kk-breadcrumb__item a {
  color: var(--brand);
  text-decoration: none;
}
.kk-breadcrumb__item a:hover {
  text-decoration: underline;
}
.kk-breadcrumb__item:not(:first-child)::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--text-muted);
  opacity: 0.5;
}
.kk-breadcrumb__item--active {
  color: var(--text);
}

.kk-child-services__heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--heading);
}

.kk-local-links {
  padding-top: 2rem;
}
.kk-local-links__heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--heading);
}
.kk-local-links__group + .kk-local-links__group {
  margin-top: 1.5rem;
}
.kk-local-links__town {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin: 0 0 0.6rem;
}
.kk-local-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kk-local-links__link {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--heading);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
}
.kk-local-links__link:hover, .kk-local-links__link:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}

.kk-sibling-services {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}
.kk-sibling-services__heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--heading);
}
.kk-sibling-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.kk-sibling-services__list li a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.kk-sibling-services__list li a:hover {
  text-decoration: underline;
}

.admin-table__child-row {
  background: rgba(0, 0, 0, 0.015);
  font-size: 0.9rem;
}

:target,
.kk-prose :is(h2, h3, h4)[id] {
  scroll-margin-top: 6rem;
}

.kk-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}
.kk-category-filter__btn {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kk-category-filter__btn:hover, .kk-category-filter__btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.kk-article-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kk-article-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.kk-article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.kk-article-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--brand);
}
.kk-article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.kk-article-card__category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.kk-article-card__reading-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.kk-article-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.kk-article-card__excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0 0 1rem;
}
.kk-article-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: auto;
}

.kk-article-layout {
  max-width: 780px;
}

.kk-article-header__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.kk-article-header__lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 65ch;
}

.kk-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.kk-article-meta__category {
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.kk-article-meta__category:hover {
  text-decoration: underline;
}
.kk-article-meta__date, .kk-article-meta__reading-time {
  color: var(--text-muted);
}

.kk-service-pointer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(49, 82, 46, 0.08);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 2.5rem 0;
}
.kk-service-pointer:last-child {
  margin-bottom: 0;
}
.kk-service-pointer__text {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Tight against what precedes it, and equally tight beneath. */
.kk-section--tight-top {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Even on both sides, like every other section. */
.kk-articles-intro {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.kk-section--tight {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (max-width: 575px) {
  .kk-article-grid {
    grid-template-columns: 1fr;
  }
  .kk-service-pointer {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ── Compact service-hero (booking page) ──────────────────────────────────────
   The `compact` height option on the service_hero block shrinks the full-height
   service-page hero into a booking-decision band so the calendar stays high on
   the page. Heights: ~300px desktop, ~260px tablet, ~200px mobile.
   (Mirrored as PROTOTYPE-ONLY inline CSS in templates/Pages/booking.php so the
   no-Node dev container renders it before this scss is rebuilt.) */
.section-block--service-hero--compact {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.section-block--service-hero--compact .kk-service-hero {
  min-height: 290px;
  align-items: center;
}
.section-block--service-hero--compact .kk-service-hero__h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.5rem;
}
.section-block--service-hero--compact .kk-service-hero__value-prop {
  margin-bottom: 0.75rem;
}
@media (max-width: 1024px) {
  .section-block--service-hero--compact .kk-service-hero {
    min-height: 260px;
  }
}
@media (max-width: 600px) {
  .section-block--service-hero--compact .kk-service-hero {
    min-height: 200px;
  }
}

/* Banner variant: a compact hero with a background image becomes a full-bleed
   banner (dark overlay + white text). Driven by the block's hero_image_id; the
   image is set inline on the section by the service_hero renderer. */
.section-block--service-hero--banner {
  background-size: cover;
  background-position: center;
  position: relative;
}
.section-block--service-hero--banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 38, 24, 0.82), rgba(18, 38, 24, 0.38));
}
.section-block--service-hero--banner > .container {
  position: relative;
  z-index: 1;
}
.section-block--service-hero--banner .kk-service-hero__h1,
.section-block--service-hero--banner .kk-service-hero__seo,
.section-block--service-hero--banner .kk-service-hero__value-prop {
  color: #fff;
}
@media (max-width: 600px) {
  .section-block--service-hero--banner::before {
    background: linear-gradient(180deg, rgba(18, 38, 24, 0.5), rgba(18, 38, 24, 0.8));
  }
}

/* ── Per-block background colour (envelope `settings.background`) ──────────────
   Editors set a background per section in the page/lander configurator. A preset
   maps to a --bg-<name> class that also sets a readable text colour; a custom
   hex is applied inline (the editor owns contrast for custom colours).
   `:where()` keeps the fallback padding at zero specificity, so blocks that
   already define their own vertical padding keep it. */
:where(.section-block--bg-white, .section-block--bg-light, .section-block--bg-brand,
.section-block--bg-dark, .section-block--bg-accent,
.section-block[style*=background-color]) {
  padding-block: 2.25rem;
}

.section-block--bg-white {
  background-color: var(--bg);
  color: var(--text);
}

.section-block--bg-light {
  background-color: var(--bg-alt);
  color: var(--text);
}

.section-block--bg-accent {
  background-color: var(--brand-muted);
  color: var(--text);
}

.section-block--bg-brand {
  background-color: var(--brand);
}

.section-block--bg-dark {
  background-color: var(--brand-dark);
}

.section-block--bg-brand,
.section-block--bg-dark {
  color: #fff;
}
.section-block--bg-brand h1, .section-block--bg-brand h2, .section-block--bg-brand h3, .section-block--bg-brand h4, .section-block--bg-brand p, .section-block--bg-brand li,
.section-block--bg-brand .kk-steps__title, .section-block--bg-brand .kk-steps__text, .section-block--bg-brand .kk-steps__heading,
.section-block--bg-brand .kk-stats__heading, .section-block--bg-brand .kk-stats__label, .section-block--bg-brand .kk-stats__value,
.section-block--bg-brand .kk-rating-summary__label, .section-block--bg-brand .kk-rating-summary__value,
.section-block--bg-dark h1,
.section-block--bg-dark h2,
.section-block--bg-dark h3,
.section-block--bg-dark h4,
.section-block--bg-dark p,
.section-block--bg-dark li,
.section-block--bg-dark .kk-steps__title,
.section-block--bg-dark .kk-steps__text,
.section-block--bg-dark .kk-steps__heading,
.section-block--bg-dark .kk-stats__heading,
.section-block--bg-dark .kk-stats__label,
.section-block--bg-dark .kk-stats__value,
.section-block--bg-dark .kk-rating-summary__label,
.section-block--bg-dark .kk-rating-summary__value {
  color: #fff;
}
.section-block--bg-brand a:not(.kk-btn),
.section-block--bg-dark a:not(.kk-btn) {
  color: #fff;
  text-decoration: underline;
}

/* ── Section wrappers, themes & spacing (envelope settings) ─────────────── */
.section-block {
  padding: 2.5rem 0;
}

.section-block--spacing-sm {
  padding: 1.25rem 0;
}

/* The CTA widget is a compact card, not a full content section — it needs less
   room than the default block rhythm. */
.section-block--booking-cta {
  padding: 1.5rem 0;
}

/* Guidance inside a form step — an `info` field. Reads as a note, not an
   answer, so it borrows the brand tint rather than a form control's chrome. */
.kk-form-info {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.85rem 1rem;
  background: rgba(49, 82, 46, 0.08);
  border-left: 3px solid var(--brand, #31522e);
  border-radius: 0 var(--radius, 2px) var(--radius, 2px) 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The pricing panel closes on its own card edge, so it was trimmed to 1.5rem to
   stop the block's padding and the following heading's margin stacking into
   ~80px of dead space. That heading margin is now zeroed a few lines below, and
   with the 4rem top-padding override gone this was the one gap left short of the
   page rhythm — 24px where its neighbours sit at 40-52px. */
/* A block's padding already opens the section — its first heading must not add
   a second gap on top of it. */
.section-block > .container > :is(h2, h3):first-child {
  margin-top: 0;
}

.section-block--spacing-lg {
  padding: 4rem 0;
}

.section-block--theme-light {
  background: var(--bg-alt, #f5f7f5);
}

.section-block--theme-dark {
  background: var(--brand-dark, #243d22);
  color: #fff;
}

.section-block--theme-brand {
  background: var(--brand, #31522e);
  color: #fff;
}

.section-block--theme-dark a, .section-block--theme-brand a {
  color: #fff;
}

/* Per-block background presets from the editor's "Taustaväri" control. A custom
   colour is applied inline (background-color); these named presets pair a
   background with a readable text/link colour. */
.section-block--bg-white {
  background: #fff;
}

.section-block--bg-light {
  background: var(--bg-alt, #f5f7f5);
}

.section-block--bg-accent {
  background: var(--accent, #eef3ea);
}

.section-block--bg-brand {
  background: var(--brand, #31522e);
  color: #fff;
}

.section-block--bg-dark {
  background: var(--brand-dark, #243d22);
  color: #fff;
}

.section-block--bg-brand a, .section-block--bg-dark a {
  color: #fff;
}

/* FAQ section rhythm + coloured-background handling. The .kk-faq element ships
   its own vertical padding and a grey background, so: drop the envelope's extra
   padding (no doubling); and when a background is chosen, let it show through
   (transparent .kk-faq) and keep the heading readable on the dark presets. The
   white accordion cards stay self-contained and readable on any colour. */
.section-block--faq {
  padding-top: 0;
  padding-bottom: 0;
}

/* Same reasoning for the help CTA: .kk-cta is a full-bleed band with its own
   3.5rem padding and the dark brand background, so the envelope's padding is
   not spacing between bands — it is a white stripe across one. `.section-block
   + .section-block` already removes the top, which is why only the bottom
   showed: a 40px white line between the CTA and the grey FAQ below it. */
.section-block--help-cta {
  padding-top: 0;
  padding-bottom: 0;
}

/* Authored prose can contain a bare URL, and a URL has nowhere to break: one
   pasted into an article ran 941px wide on a 390px screen and took the page
   with it. Content is written by people, not by this stylesheet, so the text
   containers carry a last-resort break rather than every author having to
   remember to shorten a link. */
.kk-article-body,
.section-block .container,
.kk-section .container {
  overflow-wrap: break-word;
}

/* `.section-block + .section-block` collapses the top padding so two adjacent
   blocks open one gap rather than two. A `.kk-section` — the intro text above
   the forms on /pyyda-huoltotarjous, the lead-in on /palvelut — is not a
   `.section-block`, so the selector never matched it and both paddings were
   drawn: 48px below the text plus 40px above the form, 88px of empty page
   between a sentence and the field it introduces.
   Deliberately not extended to every preceding element: `.kk-trust-bar` ends
   flush with no bottom padding, so collapsing after it would leave the next
   block with no space above it at all. */
.section-block--faq-has-bg .kk-faq {
  background: transparent;
}

.section-block--faq-has-bg.section-block--bg-brand .kk-faq__heading,
.section-block--faq-has-bg.section-block--bg-dark .kk-faq__heading {
  color: #fff;
}

/* On the dark presets the envelope forces white text, which would make the
   white accordion cards' own text invisible — force card contents back to dark. */
.section-block--faq-has-bg.section-block--bg-brand .kk-faq__item,
.section-block--faq-has-bg.section-block--bg-dark .kk-faq__item {
  color: var(--text, #1c1c1c);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Mirror the theme `.btn` (app.scss) so CMS-module buttons read identically to
   the rest of the site: uppercase display type, weight 700, square-ish radius. */
/* A disabled button has to look disabled. The fallback contact form ships its
   submit disabled until every field is filled, and with no styling for the
   state it kept the brand colour, full opacity and a pointer cursor — it read
   as a working button that silently did nothing when clicked, which is how it
   was reported. .kk-booking-cta__btn already did this; every button now does. */
.kk-btn:disabled,
.kk-btn[disabled],
.kk-contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.kk-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius, 4px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}

.kk-btn--primary {
  background: var(--brand, #31522e);
  color: #fff;
  border-color: var(--brand, #31522e);
}

.kk-btn--primary:hover {
  background: var(--brand-dark, #243d22);
  border-color: var(--brand-dark, #243d22);
}

.kk-btn--secondary {
  background: transparent;
  color: var(--brand, #31522e);
  border-color: var(--brand, #31522e);
}

.kk-btn--secondary:hover {
  background: var(--brand, #31522e);
  color: #fff;
}

.kk-btn--link {
  background: transparent;
  color: var(--brand, #31522e);
  padding: 0.5rem 0;
}

/* ── Service Hero ──────────────────────────────────────────────────────── */
.kk-service-hero {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.kk-service-hero__h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.kk-service-hero__seo {
  color: var(--text-muted, #5a6471);
  margin: 0 0 1rem;
}

.kk-service-hero__value-prop {
  font-size: 1.15rem;
  margin: 0 0 1rem;
}

.kk-service-hero__chips, .kk-service-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.kk-service-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kk-chip {
  background: var(--bg-alt, #f5f7f5);
  border-radius: var(--radius, 2px);
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.kk-service-hero__bullets li {
  padding: 0.25rem 0;
}

.kk-service-hero__promise {
  font-weight: 600;
  margin: 0 0 1rem;
}

.kk-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.kk-service-hero__price {
  font-weight: 700;
  color: var(--brand, #31522e);
}

.kk-service-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 4px);
}

@media (min-width: 768px) {
  .kk-service-hero {
    grid-template-columns: 1fr 1fr;
  }
  .kk-service-hero__h1 {
    font-size: 2.6rem;
  }
}
/* ── Promise (3 steps) ─────────────────────────────────────────────────── */
.kk-promise__heading, .kk-included__heading, .kk-audience__heading, .kk-steps__heading,
.kk-features__heading, .kk-reviews__heading, .kk-stats__heading, .kk-pickup__heading,
.kk-booking__heading, .kk-related__heading, .kk-price-table__heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

.kk-promise__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.kk-promise__step {
  text-align: center;
}

.kk-promise__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--brand, #31522e);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.kk-promise__step-title {
  margin: 0 0 0.25rem;
}

.kk-promise__note {
  text-align: center;
  font-weight: 600;
  margin: 1.25rem 0 0;
}

.kk-promise__actions, .kk-steps__actions, .kk-audience__actions, .kk-pickup__actions,
.kk-price-table__actions, .kk-rating-summary__actions {
  text-align: center;
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .kk-promise__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ── Price Table & Price-From ──────────────────────────────────────────── */
.kk-price-table {
  width: 100%;
  border-collapse: collapse;
}

.kk-price-table__row {
  border-bottom: 1px solid var(--border, #dde4db);
}

.kk-price-table__row--popular {
  background: var(--brand-faint, #f5f7f5);
}

.kk-price-table__service {
  text-align: left;
  padding: 0.85rem 0.5rem;
  font-weight: 600;
}

.kk-price-table__price {
  text-align: right;
  padding: 0.85rem 0.5rem;
  white-space: nowrap;
  font-weight: 700;
}

.kk-price-table__badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--brand, #31522e);
  color: #fff;
  border-radius: var(--radius, 2px);
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}

.kk-price-table__note {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted, #5a6471);
}

.kk-price-table__prefix, .kk-price-table__unit {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted, #5a6471);
}

.kk-price-table__disclaimer {
  text-align: center;
  color: var(--text-muted, #5a6471);
  margin: 1rem 0 0;
}

.kk-price-from {
  display: inline-block;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand, #31522e);
  background: var(--bg-alt, #f5f7f5);
  border-radius: var(--radius-md, 4px);
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.kk-price-from__prefix {
  font-weight: 400;
  font-size: 0.9rem;
}

/* ── Checklists / grids (What's Included, Audience, Features, Related) ──── */
.kk-included__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.kk-included__list--cols-2 {
  grid-template-columns: 1fr;
}

.kk-included__item i {
  color: var(--brand, #31522e);
  margin-right: 0.5rem;
}

.kk-included__item--no i {
  color: var(--text-muted, #5a6471);
}

.kk-included__footnote {
  color: var(--text-muted, #5a6471);
  margin-top: 1rem;
}

.kk-audience__grid, .kk-features__grid, .kk-related__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.kk-audience__card, .kk-features__card, .kk-related__card {
  background: #fff;
  border: 1px solid var(--border, #dde4db);
  border-radius: var(--radius-md, 4px);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  display: block;
}

.kk-features__card[href]:hover, .kk-related__card[href]:hover {
  border-color: var(--brand, #31522e);
}

.kk-audience__icon, .kk-features__icon, .kk-related__icon, .kk-stats__icon {
  font-size: 1.75rem;
  color: var(--brand, #31522e);
  display: block;
  margin-bottom: 0.5rem;
}

@media (min-width: 600px) {
  .kk-included__list--cols-2 {
    grid-template-columns: 1fr 1fr;
  }
  .kk-audience__grid, .kk-features__grid--cols-2, .kk-related__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kk-features__grid--cols-3, .kk-related__grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .kk-features__grid--cols-4, .kk-related__grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ── Steps — vertical timeline infographic ─────────────────────────────────
   Each step is a node on a connected line: a number badge + a brand-coloured
   icon node, with the title/description beside it. The connecting line is drawn
   behind the nodes from each node down to the next. */
.kk-timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 40rem;
}

.kk-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1.5rem;
  padding-bottom: 2.25rem;
}

.kk-timeline__item:last-child {
  padding-bottom: 0;
}

/* Rail column: the icon node, the small number badge, and the connector line. */
.kk-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.kk-timeline__item:not(:last-child) .kk-timeline__rail::before {
  content: "";
  position: absolute;
  top: 3.5rem; /* bottom of the node */
  bottom: 0; /* down to the next item's node */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--border-strong, #b8c9b4);
}

.kk-timeline__node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md, 4px);
  background: var(--brand, #31522e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kk-timeline__node-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
}

/* On-brand colour rhythm across the nodes (all dark enough for a white icon). */
.kk-timeline__item:nth-child(4n+2) .kk-timeline__node {
  background: var(--brand-light, #4a7a44);
}

.kk-timeline__item:nth-child(4n+3) .kk-timeline__node {
  background: #2f6f57;
}

.kk-timeline__item:nth-child(4n+4) .kk-timeline__node {
  background: var(--brand-dark, #243d22);
}

/* Small number badge tucked on the upper-left of the node. */
.kk-timeline__num {
  position: absolute;
  z-index: 2;
  top: -0.35rem;
  left: -0.35rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-md, 4px);
  background: var(--brand-faint, #f5f7f5);
  color: var(--brand, #31522e);
  border: 1px solid var(--border, #dde4db);
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kk-timeline__body {
  padding-top: 0.35rem;
}

.kk-timeline__title {
  font-family: var(--font-display);
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
}

.kk-timeline__text {
  margin: 0;
  color: var(--text-muted, #5a6471);
}

/* Horizontal process row (steps layout=horizontal) — connected numbered nodes,
   echoing the booking wizard's stepper. Stacks to a vertical list on mobile. */
.kk-steps-row {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 2rem 0 0;
}

.kk-steps-row__item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem;
}

/* Connector line between adjacent nodes, at node centre, behind the nodes. */
.kk-steps-row__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border, #dde4db);
  z-index: 0;
}

.kk-steps-row__node {
  position: relative;
  z-index: 1;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--brand, #31522e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
}

/* Scoped to the row so it outranks the generic `.section-block h3` margin-top
   (0,1,1) — the same trap already noted for h2 above. Without it the title
   carried a 1.25rem top margin and sat below its number. */
.kk-steps-row .kk-steps-row__title {
  font-family: var(--font-display);
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.kk-steps-row__text {
  margin: 0;
  color: var(--text-muted, #5a6471);
  font-size: 0.92rem;
}

.kk-steps-row__body {
  min-width: 0;
}

/* Mobile: the row turns into a vertical list. The node sits beside the step's
   text as one unit — title and text used to be separate flex children, so each
   got its own column and the title wrapped to two cramped lines. The connector
   turns vertical here so the sequence still reads as a sequence. */
@media (max-width: 640px) {
  .kk-steps-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .kk-steps-row__item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 0;
  }
  .kk-steps-row__item:not(:last-child)::after {
    top: 2.8rem;
    bottom: -1.5rem;
    left: 1.4rem;
    width: 2px;
    height: auto;
    transform: translateX(-1px);
  }
  .kk-steps-row__node {
    margin-bottom: 0;
  }
  .kk-steps-row__body {
    flex: 1 1 auto;
  }
  /* The title is centred against the node rather than nudged by a guessed
     padding: the circle used to float above the words, reading as two
     separate things instead of one row. min-height keeps that true when the
     title wraps, and it survives a font-size change. */
  .kk-steps-row .kk-steps-row__title {
    font-size: 1.05rem;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    margin: 0 0 0.15rem;
  }
}
/* ── Rating Summary & Stats ────────────────────────────────────────────── */
.kk-rating-summary, .kk-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  text-align: center;
}

.kk-rating-summary__value, .kk-stats__value {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand, #31522e);
}

.kk-rating-summary__label, .kk-stats__label {
  display: block;
  color: var(--text-muted, #5a6471);
  font-size: 0.9rem;
}

.kk-rating-summary__source {
  text-align: center;
  color: var(--text-muted, #5a6471);
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .kk-rating-summary, .kk-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ── Google Reviews ────────────────────────────────────────────────────── */
/* Roomier, balanced vertical spacing. The generic `.section-block + .section-block`
   rule zeroes the top padding (so the top read tighter than the bottom) and the
   `.section-block h2` rule adds a heading margin-top — both cancelled here so the
   block breathes equally top and bottom. */
.section-block--google-reviews {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

/* Standing alone the block opens its own 3.5rem. Following another block it
   joins the heading-led group above: one 4.5rem gap, with the previous block's
   bottom padding removed so it cannot stack into the 108px the front page
   carried. */
.section-block--google-reviews .kk-reviews__heading {
  margin-top: 0;
}

.kk-reviews__list {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.kk-reviews__card {
  background: #fff;
  border: 1px solid var(--border, #dde4db);
  border-radius: var(--radius-md, 4px);
  padding: 1.25rem;
  margin: 0;
}

.kk-reviews__stars {
  color: #f5a623;
  margin-bottom: 0.5rem;
}

.kk-reviews__text {
  margin: 0 0 0.75rem;
  font-style: italic;
}

.kk-reviews__author {
  font-weight: 600;
}

.kk-reviews__date {
  color: var(--text-muted, #5a6471);
  font-weight: 400;
}

@media (min-width: 768px) {
  .kk-reviews__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ── Pickup & Return ───────────────────────────────────────────────────── */
.kk-pickup__steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 1rem;
}

.kk-pickup__step {
  text-align: center;
}

.kk-pickup__icon {
  font-size: 1.75rem;
  color: var(--brand, #31522e);
  display: block;
  margin-bottom: 0.5rem;
}

.kk-pickup__cost {
  text-align: center;
  font-weight: 600;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .kk-pickup__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ── Booking Form ──────────────────────────────────────────────────────── */
.kk-booking__form {
  max-width: 640px;
  margin: 0 auto;
}

.kk-booking__intro {
  text-align: center;
  margin: 0 0 1.5rem;
}

.kk-booking__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.kk-booking__label {
  display: block;
  font-weight: 600;
  margin-bottom: 1rem;
}

.kk-booking__input {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  margin-top: 0.35rem;
  border: 1px solid var(--border-strong, #b8c9b4);
  border-radius: var(--radius-md, 4px);
  font: inherit;
  font-weight: 400;
}

.kk-booking__consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
  margin: 0 0 1.25rem;
}

.kk-booking__submit {
  width: 100%;
}

@media (min-width: 600px) {
  .kk-booking__row {
    grid-template-columns: 1fr 1fr;
  }
}
/* ── CTA Banner ────────────────────────────────────────────────────────── */
.kk-cta-banner {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  text-align: center;
  background: var(--brand, #31522e);
  color: #fff;
  border-radius: var(--radius-md, 4px);
  padding: 2rem;
}

.kk-cta-banner__heading {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
}

.kk-cta-banner__subtext {
  margin: 0;
  opacity: 0.9;
}

.kk-cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* On the brand-green banner a green primary button is invisible: make it white
   with brand-green text (mirrors the secondary's white treatment). */
.kk-cta-banner .kk-btn--primary {
  background: #fff;
  color: var(--brand, #31522e);
  border-color: #fff;
}

.kk-cta-banner .kk-btn--primary:hover {
  background: #eef2ee;
  color: var(--brand, #31522e);
  border-color: #eef2ee;
}

.kk-cta-banner .kk-btn--secondary {
  color: #fff;
  border-color: #fff;
}

.kk-cta-banner .kk-btn--secondary:hover {
  background: #fff;
  color: var(--brand, #31522e);
}

@media (min-width: 768px) {
  .kk-cta-banner {
    grid-template-columns: 2fr 1fr;
    text-align: left;
  }
  .kk-cta-banner__actions {
    justify-content: flex-end;
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   Chunk C — homepage, global chrome & utility modules
───────────────────────────────────────────────────────────────────────── */
/* ── Homepage Hero ─────────────────────────────────────────────────────── */
.kk-home-hero {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.kk-home-hero__h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  margin: 0 0 0.75rem;
}

.kk-home-hero__subheading {
  font-size: 1.15rem;
  margin: 0 0 1.25rem;
}

.kk-home-hero__chips {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kk-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.kk-home-hero__quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kk-home-hero__quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: var(--bg-alt, #f5f7f5);
  border-radius: var(--radius, 2px);
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.kk-home-hero__quick-link:hover {
  background: var(--brand, #31522e);
  color: #fff;
}

.kk-home-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 4px);
}

@media (min-width: 768px) {
  .kk-home-hero {
    grid-template-columns: 1fr 1fr;
  }
  .kk-home-hero__h1 {
    font-size: 2.8rem;
  }
}
/* ── Page Header ───────────────────────────────────────────────────────── */
.section-block--page-header {
  padding: 2rem 0 1rem;
}

.kk-page-header__title {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.kk-page-header__subtitle {
  color: var(--text-muted, #5a6471);
  font-size: 1.1rem;
  margin: 0;
}

.kk-page-header__crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

.kk-page-header__crumbs li + li::before {
  content: "›";
  margin-right: 0.4rem;
  color: var(--text-muted, #5a6471);
}

/* ── Service Packages ──────────────────────────────────────────────────── */
.kk-packages__heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

.kk-packages__grid {
  display: grid;
  gap: 1.25rem;
}

.kk-package {
  position: relative;
  border: 1px solid var(--border-strong, #b8c9b4);
  border-radius: var(--radius-md, 4px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.kk-package--highlighted {
  border-color: var(--brand, #31522e);
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.kk-package__flag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand, #31522e);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.8rem;
  border-radius: var(--radius, 2px);
}

.kk-package__name {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
}

.kk-package__price {
  margin: 0 0 1rem;
}

.kk-package__amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--brand, #31522e);
}

.kk-package__period {
  color: var(--text-muted, #5a6471);
}

.kk-package__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.5rem;
  flex: 1;
}

.kk-package__features i {
  color: var(--brand, #31522e);
}

.kk-packages__note {
  text-align: center;
  color: var(--text-muted, #5a6471);
  margin: 1.25rem 0 0;
}

@media (min-width: 768px) {
  .kk-packages__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}
/* ── Contact / Callback form ───────────────────────────────────────────── */
.kk-contact-form__heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 0.75rem;
}

.kk-contact-form__intro {
  text-align: center;
  margin: 0 0 1.5rem;
}

.kk-contact-form__form {
  max-width: 560px;
  margin: 0 auto;
}

.kk-contact-form__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.kk-contact-form__label {
  display: block;
  font-weight: 600;
  margin-bottom: 1rem;
}

.kk-contact-form__input {
  display: block;
  width: 100%;
  padding: 0.65rem 0.75rem;
  margin-top: 0.35rem;
  border: 1px solid var(--border-strong, #b8c9b4);
  border-radius: var(--radius-md, 4px);
  font: inherit;
  font-weight: 400;
}

.kk-contact-form__consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-weight: 400;
  margin: 0 0 1.25rem;
}

.kk-contact-form__submit {
  width: 100%;
}

@media (min-width: 600px) {
  .kk-contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
/* ── Service Category Grid ─────────────────────────────────────────────── */
.section-block--service-category-grid {
  background: var(--bg-alt, #f5f7f5);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Top padding matches the heading→cards gap (.kk-categories__heading margin-bottom)
   so the heading has equal space above and below it. The override also beats the
   generic `.section-block + .section-block` rule that zeroes top padding. */
.kk-categories__heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

/* The generic `.section-block h2` rule adds a 1.25rem margin-top; cancel it here so
   the only space above the heading is the section padding-top (= the margin-bottom
   gap to the cards), keeping the heading equally spaced top and bottom. */
.section-block--service-category-grid .kk-categories__heading {
  margin-top: 0;
}

.kk-categories__heading:has(+ .kk-categories__subheading) {
  margin-bottom: 0.5rem;
}

.kk-categories__subheading {
  text-align: center;
  color: var(--text-muted, #5a6471);
  max-width: 60ch;
  margin: 0 auto 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Even CSS grid (not centered flex-wrap) so every row aligns and a short final
   row stays left-aligned instead of floating centre; grid also equalises card
   heights per row. Mirrors the booking wizard's asset-tile grid so the two
   selection surfaces read as one consistent style. */
.kk-categories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.kk-categories__grid > * {
  min-width: 0;
}

.kk-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  text-align: center;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e2e8e0);
  border-radius: var(--radius-md, 4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.kk-category-card:hover {
  border-color: var(--brand, #31522e);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Wizard-sized icon (~2rem) instead of the previous oversized 3.25rem. */
.kk-category-card__icon {
  font-size: 2rem;
  color: var(--brand, #31522e);
  margin-bottom: 0.35rem;
}

/* Plain asset-type showcase (no links): compact square icon tiles. auto-fill
   keeps every tile the same size even on a partly-filled last row. */
/* Flex (not grid) so the tiles — and a partly-filled last row — stay centered. */
.kk-categories__grid.kk-categories__grid--square {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.kk-categories__grid--square .kk-category-card {
  flex: 0 0 145px;
  aspect-ratio: 1/1;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
}

.kk-categories__grid--square .kk-category-card__icon {
  font-size: 2.6rem;
  margin-bottom: 0;
}

.kk-categories__grid--square .kk-category-card__title {
  font-size: 0.95rem;
}

/* Match the /varaa-huolto booking-form tile label exactly: title-case body font,
   text colour (not the inherited link green), no heading margin above it. */
.kk-category-card__title {
  font-family: var(--font-body, sans-serif);
  text-transform: none;
  color: var(--text, #1c1c1c);
  font-weight: 700;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.kk-category-card__text {
  color: var(--text-muted, #5a6471);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.kk-category-card__price {
  font-weight: 700;
  color: var(--brand, #31522e);
  margin-top: auto;
}

/* Tile CTA (asset-types source): a full-width brand "footer" button flush to the
   card's bottom edge, exactly like the pricing page's .kk-prices__book. margin-top
   auto pins it to the bottom so buttons line up across a row; the negative side/
   bottom margins break it out of the card's 1.25rem/1rem padding. */
.kk-category-card__button {
  align-self: stretch;
  margin: auto -1rem -1.25rem;
  padding: 0.8rem 0.6rem;
  background: var(--brand, #31522e);
  color: #fff;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md, 4px) var(--radius-md, 4px);
  transition: background 0.15s;
  /* Long Finnish compound labels (e.g. "Ruohonleikkurihuolto", ~153px at 16px)
     don't fit the ~142px inner width of a 176px card. Slightly smaller text +
     tighter side padding keeps the longest realistic label on one line so every
     button stays uniform; overflow-wrap is a last-resort guard, not the norm. */
  font-size: 0.9375rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.kk-category-card:hover .kk-category-card__button {
  background: #26401f;
}

/* Asset-types (CTA) tiles: a touch more breathing room between the body text and
   the footer button (the button's margin-top: auto collapses the flex gap when the
   card is full). Even .55rem spacing throughout; the icon's own margin is dropped
   so icon→title doesn't double up. */
/* Clear separation between the body text and the footer button (added below the
   text specifically, so icon→title spacing stays identical to the pricing/wizard
   tiles — they share the base .kk-category-card gap + icon margin). */
.kk-categories__grid--cta .kk-category-card__text {
  margin-bottom: 1rem;
}

/* Compact tile grids — the asset-types CTA grid AND the pricing grid — use flexbox
   (not CSS grid) so fixed-width 176px tiles stay compact AND every row, including an
   underfilled last row, is centered (CSS grid can't centre a partial last row). */
.kk-categories__grid--cta,
.kk-prices__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
}

/* Mobile: two columns (calc(50% - half the 1rem gap) so exactly 2 fit per row). */
.kk-categories__grid--cta > *,
.kk-prices__grid > * {
  flex: 1 1 calc(50% - 0.5rem);
  max-width: calc(50% - 0.5rem);
}

/* From small tablets up: fixed 176px tiles so all three surfaces match. */
@media (min-width: 600px) {
  .kk-categories__grid--cta > *,
  .kk-prices__grid > * {
    flex: 0 0 176px;
    max-width: 176px;
  }
}
.kk-categories__grid--cta.kk-categories__grid--cols-2 {
  max-width: 368px;
}

.kk-categories__grid--cta.kk-categories__grid--cols-3 {
  max-width: 560px;
}

.kk-categories__grid--cta.kk-categories__grid--cols-4 {
  max-width: 752px;
}

@media (min-width: 600px) {
  .kk-categories__grid--cols-2,
  .kk-categories__grid--cols-3,
  .kk-categories__grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .kk-categories__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kk-categories__grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .kk-categories__grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* The booking wizard grid (.kk-tiles, still CSS grid) goes two-up on mobile like the
   others; the per-column counts take over from 600px up. (Pricing is handled by the
   flex rules above.) */
@media (max-width: 599px) {
  .kk-categories__grid.kk-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ── Contact Details ───────────────────────────────────────────────────── */
.kk-contact-details__heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

.kk-contact-details__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.kk-contact-details__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kk-contact-details__item i {
  color: var(--brand, #31522e);
  font-size: 1.2rem;
}

.kk-contact-details__actions {
  margin-top: 1.25rem;
}

/* ── Spacer / Divider ──────────────────────────────────────────────────── */
.kk-spacer {
  padding: 0 !important;
}

.kk-spacer--sm {
  height: 1rem;
}

.kk-spacer--md {
  height: 2.5rem;
}

.kk-spacer--lg {
  height: 4.5rem;
}

.kk-spacer--divider {
  display: flex;
  align-items: center;
}

.kk-spacer--divider::after {
  content: "";
  display: block;
  width: 100%;
  border-top: 1px solid var(--border-strong, #b8c9b4);
}

/* ── Anchor target (scroll offset for sticky chrome) ───────────────────── */
.kk-anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

/* ── Sticky Mobile CTA Bar (A5, mobile-only) ───────────────────────────── */
.kk-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--border-strong, #b8c9b4);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.kk-sticky-cta--hidden {
  transform: translateY(110%);
}

.kk-sticky-cta__book {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand, #31522e);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md, 4px);
  padding: 0.8rem 0.6rem;
  line-height: 1.15;
}

.kk-sticky-cta__price {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .kk-sticky-cta {
    display: none;
  }
}
/* ── AutoJerry reviews embed (compact ~300px widget, centred) ─────────────── */
.section-block--autojerry-reviews .container {
  text-align: center;
}

.kk-autojerry {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.kk-autojerry__credit {
  font-size: 10.5px;
  line-height: 12px;
  margin: 0 0 2px;
  text-align: right;
  color: #222;
}

.kk-autojerry__credit a {
  color: #333;
  text-decoration: none;
}

.kk-autojerry__frame {
  display: block;
  width: 100%;
  border: 0;
  background-color: transparent;
}

/* ── Service Prices (/hinnasto + /hinnasto/{slug}) ───────────────────────── */
/* Same column width as the booking wizard (.kk-contact-form__form) so the
   price tiles render at exactly the wizard's pack-tile size. */
/* Full container width, like every other page's content. The 560px cap left
   /hinnasto 172px narrower than /yhteystiedot and visibly inset from the rest
   of the site. */
.kk-prices {
  margin: 0;
}

.kk-prices__heading {
  text-align: center;
  font-family: var(--font-display);
  margin: 0 0 1.5rem;
}

.kk-prices__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 0 2rem;
}

.kk-prices__chip {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: var(--radius, 2px);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--brand, #31522e);
  border: 1px solid var(--border, #e2e8e0);
  background: var(--bg, #fff);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kk-prices__chip:hover {
  background: var(--brand, #31522e);
  color: #fff;
  border-color: var(--brand, #31522e);
}

.kk-prices__group {
  margin: 0 0 3rem;
  scroll-margin-top: 6rem;
}

.kk-prices__group:last-child {
  margin-bottom: 0;
}

.kk-prices__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

.kk-prices__title a {
  color: inherit;
  text-decoration: none;
}

.kk-prices__title a:hover {
  color: var(--brand, #31522e);
  text-decoration: underline;
}

.kk-prices__price--quote {
  color: var(--text-muted, #5a6471);
  font-weight: 600;
}

/* The card is a <div> (its "Sisältö" button can't nest inside a link); the
   booking CTA is an explicit full-width button pinned to the card's foot. */
.kk-prices__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.kk-prices__card .kk-category-card__title {
  font-weight: 700;
}

/* Full-width brand "footer" CTA flush to the card's bottom edge (breaks out of
   the card's 1.25rem padding), always visible. */
/* align-self: stretch keeps this full width even though .kk-category-card centres
   its children; the -1rem side margins match the card's 1rem horizontal padding so
   the footer breaks out flush (the card padding is 1.25rem 1rem). */
.kk-prices__book {
  display: block;
  align-self: stretch;
  margin: 0.9rem -1rem -1.25rem;
  padding: 0.8rem 1rem;
  background: var(--brand, #31522e);
  color: #fff;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md, 4px) var(--radius-md, 4px);
  transition: background 0.15s;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.kk-prices__book:hover {
  background: #26401f;
  color: #fff;
}

/* ── Pack "Sisältö" info trigger + modal ─────────────────────────────────────
   Shared by the booking wizard's pack step (blocks/form.php) and the public
   price list (service_prices.php) — moved here from the form block's scoped
   styles so both render the modal identically. */
/* Above the sticky mobile CTA bar (z-index 1030) and the cookie banner (1040) so
   the backdrop covers them — otherwise the fixed CTA bar sits on top of the modal,
   hiding its bottom and swallowing the scroll gesture right where you'd swipe. */
.kk-form-help-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.kk-form-help-modal[hidden] {
  display: none;
}

.kk-form-help-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

/* Box is a flex column: a static header (title + price/duration + close) that
   stays put, and a body that scrolls. max-height:100% resolves to the viewport
   minus the overlay's 1rem padding; overflow:hidden clips the body scroll to the
   rounded box. overscroll-behavior keeps the body's scroll from chaining to the
   locked page. */
.kk-form-help-modal__box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-md, 4px);
  max-width: 460px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.kk-form-help-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.kk-form-help-modal__header-main {
  flex: 1 1 auto;
  min-width: 0;
}

.kk-form-help-modal__header .kk-pack-modal__head {
  margin: 0;
}

.kk-form-help-modal__header .kk-pack-modal__meta {
  margin: 0.35rem 0 0;
}

.kk-form-help-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.5rem 1.5rem;
}

.kk-form-help-modal__title {
  margin: 0;
  font-size: 1.15rem;
}

.kk-form-help-modal__body p {
  margin: 0 0 1.1rem;
  color: #334155;
}

.kk-form-help-modal__x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  font-size: 2.2rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 0.2rem;
  margin: -0.35rem -0.35rem 0 0;
}

.kk-form-help-modal__x:hover {
  color: #475569;
}

.kk-tile__info {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md, 4px);
  padding: 0.3rem 0.7rem;
  color: #475569;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

/* Card footer order: the info trigger anchors the footer to the card's foot,
   with the price directly beneath it (so the price is always the last line). */
.kk-category-card .kk-tile__info {
  margin-top: auto;
}

.kk-category-card .kk-tile__info + .kk-category-card__price {
  margin-top: 0.35rem;
}

.kk-tile__info:hover {
  border-color: var(--brand, #31522e);
  color: var(--brand, #31522e);
  background: #f8fafc;
}

.kk-tile__info i {
  font-size: 0.95em;
  line-height: 1;
}

.kk-checkboxes__desc + .kk-tile__info {
  align-self: flex-start;
  margin-top: 0.35rem;
}

.kk-pack-modal__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 2rem 0.4rem 0;
}

.kk-pack-modal__icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  color: var(--brand, #31522e);
}

/* Mask-based kk-* icons (kk-icons.css) default to width/height:1em and a
   vertical-align nudge, which — at equal specificity but a later source — would
   override the 2rem above and shrink/raise the icon relative to the title. Pin
   the size with higher specificity and clear the inline-baseline offset so the
   icon stays 2rem and vertically centred against the title in the modal head. */
.kk-pack-modal__head .kk-pack-modal__icon {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  vertical-align: 0;
}

.kk-pack-modal__title {
  margin: 0;
  font-size: 1.15rem;
}

/* A heading rule elsewhere gives h3 a top margin that outweighs the single-class
   reset above, enlarging the title's flex margin-box and dropping it ~10px below
   the icon's centre in the modal head. Pin it to zero with higher specificity. */
.kk-pack-modal__head .kk-pack-modal__title {
  margin: 0;
}

.kk-pack-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0 0 0.8rem;
  font-weight: 700;
  color: var(--brand, #31522e);
}

.kk-pack-modal__hours {
  font-weight: 600;
  color: #64748b;
}

.kk-pack-modal__desc {
  color: #334155;
  line-height: 1.55;
}

.kk-pack-modal__includes {
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.25rem;
}

.kk-pack-modal__parts {
  color: #475569;
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
}

/* ── Thanks / confirmation view ────────────────────────────────────────── */
/* Deliberately unlike the page the visitor just left: centred, roomy, with the
   check mark doing the talking before any copy is read. The top is tighter than
   the block default because the hero and breadcrumb above already opened the
   page — a full section's padding on top of those left the mark stranded. */
.section-block--thanks {
  padding: 1.25rem 0 2.5rem;
}

.kk-thanks {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.kk-thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(49, 82, 46, 0.1);
  color: var(--brand, #31522e);
  font-size: 1.8rem;
}

.kk-thanks__heading {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin: 0 0 0.5rem;
}

.kk-thanks__reference {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--text-muted, #5a6471);
}

.kk-thanks__reference strong {
  color: var(--brand, #31522e);
  letter-spacing: 0.04em;
}

.kk-thanks__body {
  margin-bottom: 1.75rem;
}

/* The steps read as a sequence, left-aligned inside a centred column: a
   numbered list centred on the page is a list nobody can scan. */
.kk-thanks__steps {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  text-align: left;
}

.kk-thanks__step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.kk-thanks__step-index {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand, #31522e);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

.kk-thanks__step-body {
  display: grid;
  gap: 0.15rem;
}

.kk-thanks__step-title {
  font-weight: 700;
}

.kk-thanks__step-text {
  color: var(--text-muted, #5a6471);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .kk-thanks__heading {
    font-size: 1.5rem;
  }
}