/**
 * km-spacing.css  —  Consistent margins, padding, and rhythm
 * Loaded AFTER km-redesign.css and km-inner-pages.css
 *
 * Design tokens:
 *   --sp-x   horizontal page padding  (side breathing room)
 *   --sp-xl  section vertical padding
 *   --sp-md  component vertical padding
 *   --sp-sm  tight internal gap
 */

:root {
  --sp-x:  clamp(1.25rem, 5vw, 4rem);   /* left/right on every content block */
  --sp-xl: clamp(4.5rem, 9vw, 7rem);    /* section top/bottom                */
  --sp-md: clamp(2.5rem, 5vw, 4rem);    /* inside-section head bottom gap    */
  --sp-sm: clamp(1rem,   2vw, 1.5rem);  /* tight card grid gap               */
}

/* ══════════════════════════════════════════════════════════
   CONTAINERS — restore side padding that was zeroed out
══════════════════════════════════════════════════════════ */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  max-width: 100% !important;
  width: 100% !important;
  padding-left:  var(--sp-x) !important;
  padding-right: var(--sp-x) !important;
}

/* Grid/head elements that had padding stripped — restore side padding */
.km-stat-ribbon__grid,
.km-services-strip__head,
.km-services-grid,
.km-projects-gallery__head,
.km-projects-gallery__grid,
.km-projects-gallery__more,
.km-values-section__head,
.km-about-pillars__grid,
.page-architecture .km-arch-gallery-section .container,
.km-materials-grid {
  padding-left:  var(--sp-x) !important;
  padding-right: var(--sp-x) !important;
}

/* Values grid stays flush edge-to-edge (the cards themselves are the walls) */
.km-values-grid {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION VERTICAL RHYTHM  (homepage)
══════════════════════════════════════════════════════════ */

/* Stat ribbon */
.km-stat-ribbon {
  padding-top:    clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* Services strip */
.km-services-strip {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* Services strip head — gap between heading and grid */
.km-services-strip__head {
  padding-bottom: var(--sp-md) !important;
}

/* Services grid gap */
.km-services-grid {
  gap: var(--sp-sm) !important;
}

/* Values section */
.km-values-section {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: 0 !important;           /* flush: grid hits the next section */
}

/* Values section head bottom gap */
.km-values-section__head {
  padding-bottom: var(--sp-md) !important;
}

/* Values card internal padding */
.km-val-card {
  padding: clamp(2rem, 4vw, 3rem) var(--sp-x) !important;
}

/* Projects gallery */
.km-projects-gallery {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* Projects gallery head bottom gap */
.km-projects-gallery__head {
  padding-bottom: var(--sp-md) !important;
}

/* Projects grid gap */
.page-home .km-card-grid {
  gap: var(--sp-sm) !important;
}

/* Projects "view more" button top margin */
.km-projects-gallery__more {
  margin-top: var(--sp-md) !important;
}

/* Featured slider */
.km-featured-slider-section {
  padding-top:    0 !important;
  padding-bottom: var(--sp-xl) !important;
}

/* CEO section */
.km-ceo-section {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* CEO card internal padding */
.km-ceo-card {
  padding: clamp(2rem, 4vw, 3rem) !important;
}

/* CEO pillars grid gap */
.km-ceo-pillars-grid {
  gap: clamp(0.6rem, 1.2vw, 1rem) !important;
}

/* Contact section */
.km-home-contact {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* Contact grid gap */
.km-home-contact__grid {
  gap: clamp(2rem, 5vw, 4rem) !important;
}

/* Contact card padding */
.km-home-contact__card {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}

/* ══════════════════════════════════════════════════════════
   FOOTER RHYTHM
══════════════════════════════════════════════════════════ */
.km-site-footer__cta {
  padding-top:    clamp(3rem, 7vw, 5.5rem) !important;
  padding-bottom: clamp(3rem, 7vw, 5.5rem) !important;
}

.km-site-footer__main {
  padding-top:    clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

.km-site-footer__bar {
  padding-top:    1.25rem !important;
  padding-bottom: 1.25rem !important;
}

/* Footer badges column gap */
.km-site-footer__badges {
  gap: 0.55rem !important;
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — heroes
══════════════════════════════════════════════════════════ */

/* Dark hero (about, contact, project) */
.km-page-hero {
  padding-top:    clamp(6rem, 12vw, 9rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem) !important;
}

/* Subpage hero (architecture, service, materials, privacy) */
.km-subpage-hero {
  padding-top:    clamp(6rem, 11vw, 8.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — about
══════════════════════════════════════════════════════════ */
.km-about-intro {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.km-about-pillars {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.km-about-pillars__head {
  margin-bottom: var(--sp-md) !important;
}

/* About pillar card padding */
.km-about-pillar {
  padding: clamp(1.75rem, 3vw, 2.5rem) !important;
}

.km-about-cta-band {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — service
══════════════════════════════════════════════════════════ */
.km-service-intro-band {
  padding-top:    var(--sp-md) !important;
  padding-bottom: var(--sp-md) !important;
}

.km-service-showcase {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.km-service-showcase__head {
  margin-bottom: var(--sp-md) !important;
}

.km-service-showcase__grid {
  gap: var(--sp-sm) !important;
}

.km-service-card__head {
  padding: 1.5rem 1.5rem 1.1rem !important;
}

.km-service-card__body {
  padding: 1.25rem 1.5rem 1.75rem !important;
}

.km-service-cta-band {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — contact
══════════════════════════════════════════════════════════ */
.km-contact-wrap {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.km-contact-grid {
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.km-contact-panel {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}

.km-contact-form-card {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) !important;
}

.km-contact-faq {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.km-contact-faq__head {
  margin-bottom: var(--sp-md) !important;
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — architecture gallery
══════════════════════════════════════════════════════════ */
.page-architecture .km-arch-gallery-section {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.page-architecture .km-arch-gallery-section .heading_container {
  margin-bottom: var(--sp-md) !important;
}

.km-arch-filters {
  margin-bottom: var(--sp-md) !important;
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — materials
══════════════════════════════════════════════════════════ */
.km-subpage-hero--tail {
  padding-top:    var(--sp-xl) !important;
  padding-bottom: var(--sp-xl) !important;
}

.km-materials-grid {
  margin-top: var(--sp-md) !important;
  gap: var(--sp-sm) !important;
}

.km-material-tile {
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
}

/* ══════════════════════════════════════════════════════════
   MARQUEE — tighter padding on small screens
══════════════════════════════════════════════════════════ */
.md-marquee {
  padding-top:    0.75rem !important;
  padding-bottom: 0.75rem !important;
}