/* ==========================================================================
   Kanari Dental — Theme CSS
   Design system: Kanari Sky #0064b1 + Kanari Ink #231f20
   Fonts: Newsreader (display) + Plus Jakarta Sans (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */

:root {
  /* Brand primitives */
  --kd-sky:          #0064b1;
  --kd-sky-50:       #eef6fc;
  --kd-sky-100:      #d7eaf7;
  --kd-sky-200:      #aed4ef;
  --kd-sky-300:      #79b6e3;
  --kd-sky-400:      #3d92d3;
  --kd-sky-500:      #0d74c0;
  --kd-sky-700:      #005192;
  --kd-sky-800:      #013f72;
  --kd-sky-900:      #06335a;

  --kd-aqua-50:      #effbfb;
  --kd-aqua-100:     #d4f4f3;
  --kd-aqua-200:     #abe7e7;
  --kd-aqua-300:     #74d3d4;
  --kd-aqua-400:     #3bb6b9;
  --kd-aqua-500:     #1f989c;
  --kd-aqua-600:     #167b80;

  --kd-neutral-0:    #ffffff;
  --kd-neutral-50:   #f7f9fb;
  --kd-neutral-100:  #eef2f6;
  --kd-neutral-200:  #e1e7ee;
  --kd-neutral-300:  #cbd4de;
  --kd-neutral-400:  #9aa6b4;
  --kd-neutral-500:  #6c7884;
  --kd-neutral-600:  #4d5763;
  --kd-neutral-700:  #353d47;
  --kd-neutral-800:  #262c34;
  --kd-neutral-900:  #231f20;

  --kd-success-500:  #1f9d6b;
  --kd-success-50:   #e6f6ef;
  --kd-warning-500:  #e0922a;
  --kd-warning-50:   #fcf2e2;
  --kd-danger-500:   #d6453f;
  --kd-danger-50:    #fbe9e8;

  /* Semantic aliases */
  --kd-color-primary:       var(--kd-sky);
  --kd-color-primary-hover: var(--kd-sky-700);
  --kd-color-primary-press: var(--kd-sky-800);
  --kd-color-primary-soft:  var(--kd-sky-50);
  --kd-color-accent:        var(--kd-aqua-500);
  --kd-color-accent-soft:   var(--kd-aqua-50);
  --kd-text-strong:         var(--kd-neutral-900);
  --kd-text-body:           var(--kd-neutral-700);
  --kd-text-muted:          var(--kd-neutral-500);
  --kd-text-subtle:         var(--kd-neutral-400);
  --kd-text-on-dark:        var(--kd-neutral-0);
  --kd-surface-page:        var(--kd-neutral-0);
  --kd-surface-tint:        var(--kd-sky-50);
  --kd-surface-sunken:      var(--kd-neutral-50);
  --kd-surface-inverse:     var(--kd-sky-900);
  --kd-border-subtle:       var(--kd-neutral-200);
  --kd-border-default:      var(--kd-neutral-300);
  --kd-border-strong:       var(--kd-neutral-400);
  --kd-focus-ring:          0 0 0 3px rgba(13,116,192,.35);

  /* Fonts */
  --kd-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --kd-font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --kd-space-1: 0.25rem;
  --kd-space-2: 0.5rem;
  --kd-space-3: 0.75rem;
  --kd-space-4: 1rem;
  --kd-space-5: 1.5rem;
  --kd-space-6: 2rem;
  --kd-space-7: 3rem;
  --kd-space-8: 4rem;
  --kd-space-9: 6rem;
  --kd-space-10: 8rem;

  /* Border radius */
  --kd-radius-xs:   4px;
  --kd-radius-sm:   8px;
  --kd-radius-md:   12px;
  --kd-radius-lg:   16px;
  --kd-radius-xl:   24px;
  --kd-radius-2xl:  32px;
  --kd-radius-pill: 999px;

  /* Shadows (cool-tinted, clinical) */
  --kd-shadow-xs: 0 1px 2px rgba(6,51,90,.06);
  --kd-shadow-sm: 0 2px 6px rgba(6,51,90,.08);
  --kd-shadow-md: 0 8px 20px rgba(6,51,90,.10);
  --kd-shadow-lg: 0 16px 40px rgba(6,51,90,.12);

  /* Layout */
  --kn-topbar-h: 35px;
  --kn-header-h: 64px;
  --kd-container-max: 1200px;
  --kd-container-narrow: 760px;
  --kd-gutter: var(--kd-space-5);

  /* Motion (calm, no bounce) */
  --kd-ease-out: cubic-bezier(.22,.61,.36,1);
  --kd-ease-in-out: cubic-bezier(.45,0,.25,1);
  --kd-dur-fast: 120ms;
  --kd-dur-base: 200ms;
  --kd-dur-slow: 360ms;
}

/* --------------------------------------------------------------------------
   2. Base reset + typography
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kd-font-display);
  color: var(--kd-text-strong);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--kd-space-4);
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 6vw, 2.75rem); }
h2 { font-size: clamp(1.625rem, 4.5vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
h4 { font-size: 1.25rem; }

p { margin: 0 0 var(--kd-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--kd-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul, ol { margin: 0; padding-left: var(--kd-space-5); }

address { font-style: normal; }

/* --------------------------------------------------------------------------
   3. Skip link (accessibility)
   -------------------------------------------------------------------------- */

.kd-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
  background: var(--kd-color-primary);
  color: #fff;
  padding: var(--kd-space-3) var(--kd-space-5);
  border-radius: var(--kd-radius-sm);
}
.kd-skip-link:focus {
  left: var(--kd-space-5);
  top: var(--kd-space-5);
}

/* --------------------------------------------------------------------------
   4. Layout utilities
   -------------------------------------------------------------------------- */

.kd-container {
  max-width: var(--kd-container-max);
  margin-inline: auto;
  padding-inline: var(--kd-space-5);
}
.kd-container--narrow {
  max-width: var(--kd-container-narrow);
}
/* Service detail pages use a slightly narrower canvas (design: 1100px) */
.kd-container--detail {
  max-width: 1100px;
}

.kd-section {
  padding-block: 88px;
}
.kd-section--tinted {
  background: var(--kd-surface-sunken);
}

/* --------------------------------------------------------------------------
   5. Top bar
   -------------------------------------------------------------------------- */

.kd-topbar {
  background: var(--kd-sky-900);
  color: rgba(255,255,255,.9);
  font-size: 0.84375rem;
}
.kd-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--kd-space-5);
  min-height: var(--kn-topbar-h);
  flex-wrap: wrap;
}
.kd-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kd-topbar__phone {
  margin-left: auto;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.kd-topbar__phone:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Header + nav
   -------------------------------------------------------------------------- */

.kd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kd-border-subtle);
}
.kd-header__inner {
  display: flex;
  align-items: center;
  gap: var(--kd-space-5);
  height: var(--kn-header-h);
}
.kd-header__logo img { height: 40px; width: auto; }
.kd-header__logo { display: inline-flex; align-items: center; gap: 14px; }
.kd-header__logo:hover { text-decoration: none; }

/* "By drg. Affan Nuranggar" byline next to the logo */
.kd-header__divider {
  width: 1px;
  height: 32px;
  background: var(--kd-border-subtle);
  flex-shrink: 0;
}
.kd-header__byline {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kd-header__byline-pre {
  font-size: 11px;
  font-family: var(--kd-font-body);
  color: var(--kd-text-muted);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.kd-header__byline-name {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--kd-font-body);
  color: var(--kd-text-strong);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* Nav */
.kd-nav { display: flex; margin-left: var(--kd-space-3); }
.kd-nav__cta { display: none; }
.kd-nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kd-nav__list a {
  display: block;
  padding: 8px 16px;
  border-radius: var(--kd-radius-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--kd-text-body);
  transition: background var(--kd-dur-base) var(--kd-ease-out), color var(--kd-dur-base) var(--kd-ease-out);
}
.kd-nav__list a:hover,
.kd-nav__list .current-menu-item > a {
  background: var(--kd-color-primary-soft);
  color: var(--kd-color-primary);
  font-weight: 600;
  text-decoration: none;
}

.kd-header__cta { margin-left: auto; }

/* Burger (hidden on desktop) */
.kd-burger {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--kd-border-default);
  border-radius: var(--kd-radius-md);
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--kd-text-strong);
}
.kd-burger svg:last-child { display: none; }
[aria-expanded="true"].kd-burger svg:first-child { display: none; }
[aria-expanded="true"].kd-burger svg:last-child { display: block; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.kd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-2);
  padding: 11px 22px;
  min-height: 44px;
  border-radius: var(--kd-radius-pill);
  font-family: var(--kd-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--kd-dur-fast) var(--kd-ease-out),
              color var(--kd-dur-fast) var(--kd-ease-out),
              border-color var(--kd-dur-fast) var(--kd-ease-out),
              box-shadow var(--kd-dur-fast) var(--kd-ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.kd-btn:hover { text-decoration: none; }

.kd-btn--primary {
  background: var(--kd-color-primary);
  color: #fff;
  border-color: transparent;
}
.kd-btn--primary:hover {
  background: var(--kd-color-primary-hover);
}
.kd-btn--primary:active {
  background: var(--kd-color-primary-press);
}

.kd-btn--secondary {
  background: var(--kd-neutral-0);
  color: var(--kd-color-primary);
  border-color: var(--kd-color-primary);
}
.kd-btn--secondary:hover {
  background: var(--kd-color-primary-soft);
}

.kd-btn--soft {
  background: var(--kd-color-primary-soft);
  color: var(--kd-color-primary);
  border-color: transparent;
}
.kd-btn--soft:hover {
  background: var(--kd-sky-100);
}

.kd-btn--ghost {
  background: transparent;
  color: var(--kd-color-primary);
  border-color: transparent;
}
.kd-btn--ghost:hover {
  background: var(--kd-color-primary-soft);
}

/* Ink-black button — the contrast CTA on photo heroes and the blue CTA band */
.kd-btn--dark {
  background: var(--kd-neutral-900);
  color: var(--kd-neutral-0);
  border-color: transparent;
}
.kd-btn--dark:hover {
  background: var(--kd-neutral-800);
}

/* Outline-on-dark — secondary button on dark/navy surfaces (footer, hero) */
.kd-btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.kd-btn--outline-light:hover {
  background: rgba(255,255,255,.1);
}

.kd-btn--sm  { padding: 8px 16px;  min-height: 36px; font-size: 0.875rem;  gap: 6px; }
.kd-btn--lg  { padding: 15px 30px; min-height: 52px; font-size: 1.125rem; gap: 10px; }
.kd-btn--full { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.kd-card {
  background: var(--kd-neutral-0);
  border-radius: var(--kd-radius-xl);
  box-shadow: var(--kd-shadow-sm);
  border: 1.5px solid var(--kd-border-subtle);
  padding: var(--kd-space-6);
}
.kd-card--why {
  display: flex;
  gap: var(--kd-space-5);
  align-items: flex-start;
}
.kd-card--why h3 { font-size: 1.1875rem; margin-bottom: var(--kd-space-2); }
.kd-card--why p  { font-size: 0.9375rem; margin: 0; color: var(--kd-text-body); }

.kd-card__icon-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-card__icon-wrap--sky     { background: var(--kd-sky-50); }
.kd-card__icon-wrap--success { background: var(--kd-success-50); }

.kd-card--review {
  display: flex;
  flex-direction: column;
  gap: var(--kd-space-4);
}
.kd-card__quote { flex: 1; margin: 0; }
.kd-card__quote p {
  font-size: 1.03125rem;
  line-height: 1.65;
  color: var(--kd-text-body);
  margin: 0;
}
.kd-card__quote p::before { content: '\201C'; }
.kd-card__quote p::after  { content: '\201D'; }
.kd-card__reviewer {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
}
.kd-card__reviewer-name  { font-weight: 600; color: var(--kd-text-strong); }
.kd-card__reviewer-label { font-size: 0.8125rem; color: var(--kd-text-muted); }

.kd-card--license {
  display: flex;
  align-items: center;
  gap: var(--kd-space-4);
}
.kd-card--license .kd-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.kd-card--license__body { flex: 1; min-width: 0; }
.kd-card--license .kd-badge-pending { flex-shrink: 0; margin-top: 0; }
.kd-card__title { font-weight: 600; font-family: var(--kd-font-display); color: var(--kd-text-strong); }

.kd-card--sticky-cta { position: sticky; top: calc(var(--kn-header-h) + 16px); }
.kd-card--related h3 { font-size: 1.0625rem; margin-bottom: var(--kd-space-4); }

/* --------------------------------------------------------------------------
   9. Avatar
   -------------------------------------------------------------------------- */

.kd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kd-sky-100);
  color: var(--kd-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   10. Eyebrow / overline
   -------------------------------------------------------------------------- */

.kd-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kd-color-primary);
  margin-bottom: var(--kd-space-3);
}

/* --------------------------------------------------------------------------
   11. Highlight — serif, blue, italic (used across all pages; kn-hl in the
   design reference). On dark surfaces it lightens to sky-200.
   -------------------------------------------------------------------------- */

.kd-highlight {
  font-family: var(--kd-font-display);
  color: var(--kd-color-primary);
  font-style: italic;
}
.kd-highlight--on-dark { color: var(--kd-sky-200); }

/* --------------------------------------------------------------------------
   12. Grid helpers
   -------------------------------------------------------------------------- */

.kd-grid { display: grid; gap: var(--kd-space-5); }
.kd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kd-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   13. Split layout
   -------------------------------------------------------------------------- */

.kd-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--kd-space-8);
  align-items: center;
}
.kd-split__image {
  border-radius: var(--kd-radius-2xl);
  overflow: hidden;
  box-shadow: var(--kd-shadow-md);
  aspect-ratio: 5/4;
}
.kd-split__image--tall { aspect-ratio: 4/5; }
.kd-split__image img,
.kd-split__image--tall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-split__content { display: flex; flex-direction: column; gap: var(--kd-space-4); align-items: flex-start; }
.kd-split__content h2 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Stars
   -------------------------------------------------------------------------- */

.kd-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* --------------------------------------------------------------------------
   15. Badges
   -------------------------------------------------------------------------- */

.kd-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--kd-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}
.kd-badge--sky     { background: var(--kd-sky-50); color: var(--kd-sky-700); }
.kd-badge--aqua    { background: var(--kd-aqua-50); color: var(--kd-aqua-600); }
.kd-badge--success { background: var(--kd-success-50); color: var(--kd-success-500); }
.kd-badge--warning { background: var(--kd-warning-50); color: var(--kd-warning-500); }

.kd-badge-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--kd-text-muted);
  border: 1px dashed var(--kd-border-default);
  border-radius: var(--kd-radius-pill);
  padding: 2px 8px;
  font-style: italic;
  margin-top: 4px;
}

/* Stretched-link: makes the whole containing card clickable via a single
   real anchor, while sibling "buttons" become decorative (aria-hidden). The
   containing card needs `position: relative` for the overlay to clip to it. */
.kd-stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kd-badge-doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kd-sky-700);
  background: var(--kd-sky-50);
  border: 1px solid transparent;
  border-radius: var(--kd-radius-pill);
  padding: 2px 10px;
  margin-top: 4px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.kd-badge-doc:hover,
.kd-badge-doc:focus-visible { background: var(--kd-sky-100); }
.kd-card--license .kd-badge-doc { flex-shrink: 0; margin-top: 0; }

/* Certification document viewer */
.kd-doc-modal {
  border: 0;
  border-radius: var(--kd-radius-lg);
  box-shadow: var(--kd-shadow-lg);
  padding: 0;
  width: min(720px, 92vw);
  max-height: 86vh;
  background: var(--kd-surface-page);
}
.kd-doc-modal::backdrop { background: rgba(6, 51, 90, .55); }
.kd-doc-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: var(--kd-sky-50);
  color: var(--kd-text-strong);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kd-doc-modal__title {
  font-weight: 700;
  font-family: var(--kd-font-display);
  padding: var(--kd-space-5) 48px var(--kd-space-4) var(--kd-space-5);
}
.kd-doc-modal__body {
  padding: 0 var(--kd-space-5) var(--kd-space-5);
  max-height: calc(86vh - 64px);
  overflow: auto;
}
.kd-doc-modal__body img { display: block; width: 100%; height: auto; border-radius: var(--kd-radius-md); }
.kd-doc-modal__body iframe { display: block; width: 100%; height: 70vh; border: 0; border-radius: var(--kd-radius-md); }

/* --------------------------------------------------------------------------
   16. Section headers
   -------------------------------------------------------------------------- */

.kd-section__header { margin-bottom: var(--kd-space-7); }
.kd-section__header h2 { margin-bottom: var(--kd-space-3); }
.kd-section__header p  { color: var(--kd-text-body); max-width: 620px; }

.kd-section__header--centered { text-align: center; }
.kd-section__header--centered p { margin-inline: auto; }

.kd-section__header--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kd-space-5);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   17. Hero — full-bleed clinic photo, content anchored to the bottom.
   Height fills the viewport below topbar+header; trust card overlaps below.
   -------------------------------------------------------------------------- */

.kd-hero {
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--kn-topbar-h) - var(--kn-header-h));
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--kd-sky-900);
}
.kd-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform-origin: center 30%;
}
.kd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,38,71,.97) 0%, rgba(3,38,71,.72) 42%, rgba(3,38,71,.08) 72%);
  pointer-events: none;
}

/* Eyebrow pill pinned top-left over the photo */
.kd-hero__eyebrow-row {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
}
.kd-hero__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--kd-radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Bottom-anchored content column */
.kd-hero__inner {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
}
.kd-hero__title {
  font-size: clamp(2.375rem, 6.5vw, 4rem);
  line-height: 1.04;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
  max-width: 760px;
}
.kd-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.kd-hero__subtitle {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  max-width: 520px;
  margin: 0;
}
.kd-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   18. Trust card — white card overlapping the hero bottom edge
   -------------------------------------------------------------------------- */

.kd-trust-strip { position: relative; z-index: 3; }
.kd-trust-strip__inner {
  margin-top: -88px;
  background: #fff;
  border-radius: var(--kd-radius-2xl);
  box-shadow: var(--kd-shadow-lg);
  border: 1px solid var(--kd-border-subtle);
  padding: 28px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.kd-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  padding: 4px 14px 4px 26px;
  border-left: 1px solid var(--kd-border-subtle);
}
.kd-trust-strip__item:first-child { border-left: none; }
.kd-trust-strip__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--kd-sky-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-trust-strip__value {
  font-family: var(--kd-font-body);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--kd-text-strong);
  letter-spacing: -0.01em;
}
.kd-trust-strip__label { font-size: 0.8125rem; color: var(--kd-text-muted); margin-top: 5px; }

/* --------------------------------------------------------------------------
   19. About section on homepage — section padding comes from .kd-section
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   20. Services on homepage — square icon tiles, 4 columns
   -------------------------------------------------------------------------- */

.kd-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--kd-space-4);
}
.kd-service-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-4);
  padding: 20px;
  text-align: center;
  height: 100%;
  background: var(--kd-neutral-0);
  border: 1.5px solid var(--kd-border-subtle);
  border-radius: var(--kd-radius-xl);
  box-shadow: var(--kd-shadow-sm);
  text-decoration: none;
}
.kd-service-tile:hover { text-decoration: none; }
.kd-service-tile__icon-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-lg);
  background: var(--kd-sky-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-service-tile__title {
  font-family: var(--kd-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--kd-text-strong);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   21. Reviews section
   -------------------------------------------------------------------------- */

.kd-section--reviews { background: linear-gradient(180deg, #fff, var(--kd-sky-50)); }
.kd-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kd-space-3);
  color: var(--kd-text-muted);
  font-size: 0.9375rem;
  margin-top: var(--kd-space-3);
}

/* --------------------------------------------------------------------------
   22. Location section
   -------------------------------------------------------------------------- */

.kd-location__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--kd-space-5);
  align-items: stretch;
}
.kd-location__info { display: flex; flex-direction: column; gap: var(--kd-space-4); }
.kd-location__map {
  border-radius: var(--kd-radius-xl);
  overflow: hidden;
  min-height: 380px;
  box-shadow: var(--kd-shadow-sm);
  border: 1.5px solid var(--kd-border-subtle);
}
.kd-location__map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.kd-location__buttons {
  display: flex;
  gap: var(--kd-space-3);
  flex-wrap: wrap;
}
.kd-info-row { display: flex; gap: var(--kd-space-4); }
.kd-info-row__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-md);
  background: var(--kd-sky-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-info-row strong { display: block; font-weight: 600; color: var(--kd-text-strong); margin-bottom: 4px; }
.kd-info-row p { font-size: 0.9375rem; color: var(--kd-text-body); line-height: 1.6; margin: 0; }
.kd-hours-table { font-size: 0.9rem; border-collapse: collapse; width: 100%; margin-top: 4px; }
.kd-hours-table td { padding: 3px 0; color: var(--kd-text-body); }
.kd-hours-table td:first-child { padding-right: 16px; color: var(--kd-text-muted); }
.kd-hours-table__closed { color: var(--kd-danger-500) !important; font-weight: 500; }

/* --------------------------------------------------------------------------
   23. CTA band (solid blue)
   -------------------------------------------------------------------------- */

.kd-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--kd-color-primary);
}
.kd-cta-band__deco {
  position: absolute;
  right: -50px;
  bottom: -130px;
  width: 520px;
  height: 520px;
  background-image: url('../photos/supergrafis.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .16;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.kd-cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-block: var(--kd-space-8);
  gap: var(--kd-space-4);
}
.kd-cta-band__inner--centered { justify-content: center; text-align: center; flex-direction: column; gap: var(--kd-space-4); }
.kd-cta-band__text h2 { color: #fff; margin-bottom: var(--kd-space-2); font-size: clamp(1.625rem, 4vw, 2.25rem); }
.kd-cta-band__text p  { color: rgba(255,255,255,.92); font-size: 1.0625rem; margin: 0; }

/* Soft CTA band (light blue bg) — design: max 1000px canvas, 952px card */
.kd-cta-band-soft {
  max-width: 952px;
  background: var(--kd-sky-50);
  border-radius: var(--kd-radius-2xl);
  margin: var(--kd-space-8) auto;
}
@media (max-width: 1000px) {
  .kd-cta-band-soft { margin-inline: var(--kd-space-5); }
}
.kd-cta-band-soft__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 44px 40px;
}
.kd-cta-band-soft__inner > div { max-width: 580px; }
.kd-cta-band-soft__inner h2 { font-size: clamp(1.5rem, 4.5vw, 1.875rem); margin-bottom: 10px; }
.kd-cta-band-soft__inner p  { color: var(--kd-text-body); font-size: 1.0625rem; line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   24. Page hero (interior pages)
   -------------------------------------------------------------------------- */

.kd-page-hero {
  padding-block: 72px 52px;
  position: relative;
  overflow: hidden;
}
.kd-page-hero--gradient { background: linear-gradient(165deg, var(--kd-sky-50), #fff); }
/* Extra bottom padding when jump-nav cards overlap the hero (-56px) */
.kd-page-hero--overlap { padding-bottom: 104px; }
.kd-page-hero--simple   { background: var(--kd-surface-sunken); border-bottom: 1px solid var(--kd-border-subtle); padding-block: 48px; }
.kd-page-hero__deco {
  position: absolute;
  right: -110px;
  top: -70px;
  width: 480px;
  height: 480px;
  background-image: url('../photos/supergrafis.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .4;
  pointer-events: none;
}
.kd-page-hero__deco--bottom-left {
  right: auto;
  top: auto;
  left: -130px;
  bottom: -160px;
  width: 520px;
  height: 520px;
  opacity: .35;
}
.kd-page-hero h1 { margin: var(--kd-space-3) 0 var(--kd-space-4); font-size: clamp(2rem, 7vw, 3.125rem); max-width: 760px; }
.kd-page-hero__lead {
  font-size: 1.15625rem;
  color: var(--kd-text-body);
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}
.kd-page-hero__inner--centered { text-align: center; }
.kd-page-hero__inner--centered h1 { font-size: clamp(1.9375rem, 7vw, 3rem); margin-inline: auto; }
.kd-page-hero__inner--centered .kd-page-hero__lead { margin-inline: auto; max-width: 720px; line-height: 1.7; }
.kd-page-hero__inner--narrow   { max-width: 900px; }

/* Service detail hero: breadcrumb sits tight under the header (design ref) */
.kd-page-hero--detail { padding-block: 28px 52px; }

/* --------------------------------------------------------------------------
   25. Breadcrumb
   -------------------------------------------------------------------------- */

.kd-breadcrumb { margin-bottom: var(--kd-space-5); }
.kd-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.kd-breadcrumb__item { display: inline-flex; align-items: center; gap: 4px; }
.kd-breadcrumb__item a { color: var(--kd-text-muted); }
.kd-breadcrumb__item a:hover { color: var(--kd-color-primary); text-decoration: none; }
.kd-breadcrumb__item [aria-current] { color: var(--kd-text-strong); font-weight: 600; }
.kd-breadcrumb__sep { display: inline-flex; color: var(--kd-text-subtle); }

/* --------------------------------------------------------------------------
   26. Service list (archive-service.php)
   Category tones per the design reference: aqua / sky / neutral.
   -------------------------------------------------------------------------- */

/* Tone variables scoped per category block */
.kd-tone--aqua {
  --kd-tone-bg:        var(--kd-aqua-50);
  --kd-tone-icon:      var(--kd-aqua-500);
  --kd-tone-border:    var(--kd-aqua-400);
  --kd-tone-pill:      rgba(31,152,156,.13);
  --kd-tone-pill-text: var(--kd-aqua-600);
}
.kd-tone--sky {
  --kd-tone-bg:        var(--kd-sky-50);
  --kd-tone-icon:      var(--kd-sky);
  --kd-tone-border:    var(--kd-sky-400);
  --kd-tone-pill:      rgba(13,116,192,.10);
  --kd-tone-pill-text: var(--kd-sky-700);
}
.kd-tone--neutral {
  --kd-tone-bg:        var(--kd-neutral-100);
  --kd-tone-icon:      var(--kd-neutral-600);
  --kd-tone-border:    var(--kd-neutral-400);
  --kd-tone-pill:      var(--kd-neutral-200);
  --kd-tone-pill-text: var(--kd-neutral-700);
}

/* Category jump-nav — 3 cards overlapping the archive hero */
.kd-cat-nav {
  position: relative;
  z-index: 3;
  margin-top: -56px;
}
.kd-cat-nav__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kd-space-4);
}
.kd-cat-nav__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--kd-border-subtle);
  border-radius: var(--kd-radius-xl);
  padding: 22px 24px;
  background: #fff;
  cursor: pointer;
  box-shadow: var(--kd-shadow-lg);
  text-decoration: none;
}
.kd-cat-nav__card:hover { text-decoration: none; }
.kd-cat-nav__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-lg);
  background: var(--kd-tone-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-cat-nav__name { display: block; font-weight: 700; font-size: 1.0625rem; color: var(--kd-text-strong); margin-bottom: 5px; font-family: var(--kd-font-body); }
.kd-cat-nav__blurb { display: block; font-size: 0.84375rem; color: var(--kd-text-muted); line-height: 1.55; }
.kd-cat-nav__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--kd-tone-pill-text);
  background: var(--kd-tone-pill);
  border-radius: var(--kd-radius-pill);
  padding: 4px 10px;
  align-self: flex-start;
}

.kd-archive-category { padding: var(--kd-space-8) 0 var(--kd-space-2); scroll-margin-top: 88px; }

/* Bold tinted category header band */
.kd-archive-category__header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  background: var(--kd-tone-bg);
  border-radius: var(--kd-radius-xl);
  border-left: 4px solid var(--kd-tone-border);
  margin-bottom: 28px;
}
.kd-archive-category__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-lg);
  background: #fff;
  box-shadow: var(--kd-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-archive-category__header h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; margin: 0 0 3px; }
.kd-archive-category__blurb { font-size: 0.9375rem; color: var(--kd-text-muted); margin: 0; }
.kd-archive-category__body { flex: 1; }
.kd-archive-category__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kd-tone-pill-text);
  background: rgba(255,255,255,.75);
  border-radius: var(--kd-radius-pill);
  padding: 5px 13px;
  flex-shrink: 0;
  white-space: nowrap;
}

.kd-service-list { display: flex; flex-direction: column; gap: var(--kd-space-4); }
.kd-service-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  align-items: start;
  background: var(--kd-neutral-0);
  border-radius: var(--kd-radius-xl);
  border: 1.5px solid var(--kd-border-subtle);
  padding: var(--kd-space-6);
  box-shadow: var(--kd-shadow-sm);
}
.kd-service-row__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--kd-radius-lg);
  background: var(--kd-sky-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-service-row__body h3 { font-size: 1.3125rem; margin-bottom: 6px; }
.kd-service-row__body h3 a { color: var(--kd-text-strong); }
.kd-service-row__body h3 a:hover { color: var(--kd-color-primary); text-decoration: none; }
.kd-service-row__body p  { font-size: 0.9375rem; color: var(--kd-text-body); margin-bottom: var(--kd-space-3); }
.kd-service-row__indication {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--kd-surface-sunken);
  border-radius: var(--kd-radius-md);
  padding: 10px 14px;
}
.kd-service-row__indication span { font-size: 0.875rem; color: var(--kd-text-muted); line-height: 1.55; }
.kd-service-row__actions {
  display: flex;
  flex-direction: column;
  gap: var(--kd-space-2);
  align-self: center;
}

/* --------------------------------------------------------------------------
   26b. Portfolio (archive-portfolio_case.php)
   Before/after slider cards; category filter via before-after.js
   -------------------------------------------------------------------------- */

.kd-portfolio__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kd-space-4);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.kd-portfolio__toolbar .kd-cat-tabs { margin-bottom: 0; flex: 1; }
.kd-cat-tabs button.kd-cat-tab {
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  font-family: var(--kd-font-body);
}
.kd-cat-tabs button.kd-cat-tab.is-active { border-bottom-color: var(--kd-color-primary); }
.kd-portfolio__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84375rem;
  color: var(--kd-text-muted);
}

.kd-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kd-space-5);
}
.kd-portfolio__empty {
  text-align: center;
  padding: 60px 0;
  color: var(--kd-text-muted);
}

.kd-portfolio-card {
  background: var(--kd-neutral-0);
  border: 1.5px solid var(--kd-border-subtle);
  border-radius: var(--kd-radius-xl);
  box-shadow: var(--kd-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Category filter hides cards via the [hidden] attribute; this must beat the
   display:flex above (higher specificity) or filtered-out cards stay visible. */
.kd-portfolio-card[hidden] {
  display: none;
}
.kd-portfolio-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.kd-portfolio-card__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.kd-portfolio-card__service {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--kd-text-muted);
}
.kd-portfolio-card__title { font-size: 1.1875rem; line-height: 1.3; margin: 0; }
.kd-portfolio-card__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84375rem;
  color: var(--kd-text-subtle);
}
.kd-badge--neutral { background: var(--kd-neutral-100); color: var(--kd-neutral-700); }

/* Before/after slider */
.kd-ba-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: var(--kd-surface-sunken);
}
.kd-ba-slider__panel {
  position: absolute;
  inset: 0;
}
.kd-ba-slider__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-ba-slider__panel--before { clip-path: inset(0 48% 0 0); }
.kd-ba-slider__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-2);
  color: var(--kd-text-subtle);
}
.kd-ba-slider__placeholder span {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.kd-ba-slider__placeholder--before {
  background: repeating-linear-gradient(45deg,
    var(--kd-neutral-100), var(--kd-neutral-100) 11px,
    var(--kd-neutral-50) 11px, var(--kd-neutral-50) 22px);
}
.kd-ba-slider__placeholder--after {
  background: repeating-linear-gradient(45deg,
    var(--kd-sky-100), var(--kd-sky-100) 11px,
    var(--kd-sky-50) 11px, var(--kd-sky-50) 22px);
}
.kd-ba-slider__pill {
  position: absolute;
  bottom: 12px;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--kd-text-body);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--kd-radius-pill);
  padding: 4px 11px;
  pointer-events: none;
}
.kd-ba-slider__pill--left  { left: 12px; }
.kd-ba-slider__pill--right { right: 12px; }
.kd-ba-slider__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 52%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  transform: translateX(-1px);
  pointer-events: none;
}
.kd-ba-slider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--kd-shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Visually-hidden range input keeps the slider keyboard-accessible */
.kd-ba-slider__range {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 1px;
  opacity: 0;
}
.kd-ba-slider__range:focus-visible ~ .kd-ba-slider__divider .kd-ba-slider__handle {
  box-shadow: var(--kd-focus-ring);
}

/* --------------------------------------------------------------------------
   27. Service detail (single-service.php)
   -------------------------------------------------------------------------- */

.kd-service-header {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: var(--kd-space-7);
  align-items: center;
}
.kd-service-header__meta {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  margin-bottom: var(--kd-space-4);
}
.kd-service-header__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--kd-radius-md);
  background: #fff;
  box-shadow: var(--kd-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-service-header__image {
  border-radius: var(--kd-radius-2xl);
  overflow: hidden;
  box-shadow: var(--kd-shadow-lg);
  aspect-ratio: 4/3;
}
.kd-service-header__image img { width: 100%; height: 100%; object-fit: cover; }

.kd-service-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--kd-space-7);
  align-items: start;
}
.kd-service-body__main { display: flex; flex-direction: column; gap: var(--kd-space-7); }
.kd-service-section h2 { font-size: 1.5rem; margin-bottom: var(--kd-space-4); }
.kd-service-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kd-space-3);
  margin-bottom: var(--kd-space-4);
}
.kd-service-section__header h2 { margin: 0; }

.kd-indication-box {
  display: flex;
  gap: var(--kd-space-4);
  background: var(--kd-sky-50);
  border-radius: var(--kd-radius-xl);
  padding: 20px 22px;
}
.kd-indication-box p { font-size: 1rem; line-height: 1.65; color: var(--kd-text-body); margin: 0; }

.kd-our-works-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kd-space-4); }
.kd-our-works-placeholder {
  border-radius: var(--kd-radius-xl);
  border: 1.5px dashed var(--kd-border-default);
  background: var(--kd-surface-sunken);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-2);
  color: var(--kd-text-subtle);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Sidebar */
.kd-service-sidebar { display: flex; flex-direction: column; gap: var(--kd-space-4); }
.kd-sidebar-contact {
  border-top: 1px solid var(--kd-border-subtle);
  margin-top: var(--kd-space-5);
  padding-top: var(--kd-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--kd-space-3);
}
.kd-sidebar-contact__item {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  font-size: 0.875rem;
  color: var(--kd-text-body);
}
.kd-sidebar-contact__item a { color: var(--kd-text-body); }

.kd-related-list { list-style: none; margin: 0; padding: 0; }
.kd-related-list__item {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  padding: 12px 0;
  border-top: 1px solid var(--kd-border-subtle);
}
.kd-related-list__item:first-child { border-top: none; }
.kd-related-list__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-md);
  background: var(--kd-sky-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-related-list__title { font-size: 0.9375rem; font-weight: 500; color: var(--kd-text-strong); flex: 1; }
.kd-related-list__title:hover { color: var(--kd-color-primary); }

/* --------------------------------------------------------------------------
   28. About page
   -------------------------------------------------------------------------- */

/* Tagline quote on the About hero — italic serif flanked by short rules */
.kd-about-tagline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kd-font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--kd-color-primary);
  font-weight: 500;
  margin-bottom: var(--kd-space-4);
}
.kd-about-tagline::before,
.kd-about-tagline::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--kd-color-primary);
  display: inline-block;
  opacity: 0.5;
}

.kd-doctor { padding-top: var(--kd-space-9); }
.kd-doctor .kd-split { grid-template-columns: 0.85fr 1.15fr; }
.kd-doctor__photo-wrap { position: relative; }
.kd-doctor__photo-wrap .kd-split__image { box-shadow: var(--kd-shadow-lg); }

/* Mirrored second-doctor section (photo right, text right-aligned) */
.kd-doctor--reverse { padding-top: 0; }
.kd-doctor--reverse .kd-split { grid-template-columns: 1.15fr 0.85fr; }
.kd-doctor--reverse .kd-split__content { text-align: right; align-items: flex-end; }
.kd-doctor--reverse .kd-credential { flex-direction: row-reverse; }
.kd-doctor--reverse .kd-credential > div { display: flex; flex-direction: column; align-items: flex-end; }

/* Dashed photo placeholder for the pending second dentist */
.kd-doctor__photo-placeholder {
  border-radius: var(--kd-radius-2xl);
  overflow: hidden;
  box-shadow: var(--kd-shadow-sm);
  aspect-ratio: 4/5;
  background: var(--kd-neutral-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kd-space-3);
  border: 2px dashed var(--kd-border-default);
  color: var(--kd-text-muted);
  font-size: 0.8125rem;
  font-style: italic;
}
.kd-doctor__rating-badge {
  position: absolute;
  top: 22px;
  right: -22px;
  background: #fff;
  border-radius: var(--kd-radius-lg);
  box-shadow: var(--kd-shadow-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: var(--kd-space-2);
}
.kd-doctor__rating-label { font-size: 0.8125rem; font-weight: 600; color: var(--kd-text-strong); }

.kd-doctor__credentials { display: flex; flex-direction: column; gap: var(--kd-space-4); margin-block: var(--kd-space-5); }
.kd-credential {
  display: flex;
  align-items: center;
  gap: var(--kd-space-4);
}
.kd-credential__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-md);
  background: var(--kd-sky-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kd-credential__label { font-size: 0.8125rem; color: var(--kd-text-muted); display: block; }
.kd-credential__pending { display: block; font-size: 0.875rem; color: var(--kd-text-muted); font-style: italic; }

/* Gallery */
.kd-gallery--3 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 260px 260px;
  gap: var(--kd-space-4);
}
.kd-gallery__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--kd-radius-xl);
  box-shadow: var(--kd-shadow-sm);
}
.kd-gallery__tile--featured { grid-row: 1 / 3; }
.kd-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--kd-dur-slow) var(--kd-ease-out);
}
.kd-gallery__tile:hover img { transform: scale(1.04); }
.kd-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,51,90,.78), rgba(6,51,90,0) 52%);
  pointer-events: none;
}
.kd-gallery__caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: var(--kd-space-2);
  color: #fff;
  font-weight: 600;
  font-family: var(--kd-font-display);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   29. Blog list
   -------------------------------------------------------------------------- */

/* Category tabs — underline segmented nav (DS Tabs) */
.kd-cat-tabs {
  display: flex;
  gap: var(--kd-space-1);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--kd-border-subtle);
  margin-bottom: 30px;
}
.kd-cat-tab {
  display: inline-flex;
  padding: 10px 16px;
  margin-bottom: -1px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kd-text-muted);
  border-bottom: 2.5px solid transparent;
  transition: color var(--kd-dur-base) var(--kd-ease-out), border-color var(--kd-dur-base) var(--kd-ease-out);
}
.kd-cat-tab:hover { color: var(--kd-color-primary); text-decoration: none; }
.kd-cat-tab.is-active {
  color: var(--kd-color-primary);
  font-weight: 600;
  border-bottom-color: var(--kd-color-primary);
  text-decoration: none;
}

/* Featured article — large horizontal card above the grid */
.kd-post-card--featured { flex-direction: row; margin-bottom: 30px; }
.kd-post-card--featured .kd-post-card__media,
.kd-post-card--featured .kd-post-card__placeholder { flex: 0 0 42%; min-height: 240px; aspect-ratio: auto; }
.kd-post-card--featured .kd-post-card__body { padding: 32px 34px; justify-content: center; }
.kd-post-card--featured .kd-post-card__title { font-size: clamp(1.375rem, 4vw, 1.75rem); line-height: 1.25; }
.kd-post-card--featured .kd-post-card__excerpt { font-size: 1.03125rem; flex: none; }

.kd-post-card {
  position: relative;
  background: #fff;
  border-radius: var(--kd-radius-xl);
  border: 1.5px solid var(--kd-border-subtle);
  box-shadow: var(--kd-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Hover lift lives with the other card-hover recipes, gated behind
     @media (hover: hover) — see "Card hover standard" below. */
}
.kd-post-card__media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, var(--kd-sky-100), var(--kd-sky-50)); }
.kd-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.kd-post-card__placeholder {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--kd-sky-100), var(--kd-sky-50));
}
.kd-post-card__placeholder-deco {
  position: absolute;
  right: -30px;
  bottom: -40px;
  height: 180px;
  width: auto;
  opacity: 0.35;
  pointer-events: none;
}
.kd-post-card--featured .kd-post-card__placeholder-deco { height: 260px; }
.kd-post-card__body { padding: var(--kd-space-5); display: flex; flex-direction: column; gap: var(--kd-space-3); flex: 1; }
.kd-post-card__meta { display: flex; align-items: center; gap: var(--kd-space-3); }
.kd-post-card__reading-time { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--kd-text-muted); }
.kd-post-card__title { font-size: 1.21875rem; margin: 0; line-height: 1.25; }
.kd-post-card__title a { color: var(--kd-text-strong); }
.kd-post-card__title a:hover { color: var(--kd-color-primary); text-decoration: none; }
.kd-post-card__excerpt { font-size: 0.9375rem; color: var(--kd-text-body); flex: 1; margin: 0; }
.kd-post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kd-color-primary);
  margin-top: auto;
}
.kd-blog-grid { margin-top: 0; }

/* --------------------------------------------------------------------------
   30. Article (single.php)
   -------------------------------------------------------------------------- */

.kd-article-header { max-width: 700px; }
.kd-article-header__meta {
  display: flex;
  align-items: center;
  gap: var(--kd-space-3);
  margin-bottom: var(--kd-space-4);
}
.kd-article-header__reading-time { display: inline-flex; align-items: center; gap: 5px; font-size: 0.875rem; color: var(--kd-text-muted); }
.kd-article-header__excerpt { font-size: 1.0625rem; color: var(--kd-text-body); margin: 0; line-height: 1.65; }

.kd-article-featured-image { margin-bottom: var(--kd-space-7); }
/* Frame clips the kn-kenburns zoom (parent must have overflow: hidden) */
.kd-article-featured-image__frame { border-radius: var(--kd-radius-xl); overflow: hidden; }
.kd-article-featured-image img { width: 100%; display: block; }

.kd-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--kd-text-body);
}
.kd-prose h2 { margin-top: var(--kd-space-7); font-size: 1.5rem; }
.kd-prose h3 { margin-top: var(--kd-space-5); font-size: 1.25rem; }
.kd-prose p  { margin-bottom: var(--kd-space-4); }
.kd-prose ul, .kd-prose ol { margin-bottom: var(--kd-space-4); }
.kd-prose li { margin-bottom: var(--kd-space-2); }
.kd-prose img { border-radius: var(--kd-radius-md); margin-block: var(--kd-space-6); }
.kd-prose a { color: var(--kd-color-primary); text-decoration: underline; }
.kd-prose blockquote {
  border-left: 3px solid var(--kd-color-primary);
  padding-left: var(--kd-space-5);
  margin-left: 0;
  color: var(--kd-text-muted);
  font-style: italic;
}

.kd-article-content + * { margin-top: var(--kd-space-7); }
.kd-article-cta-box {
  background: var(--kd-sky-50);
  border-radius: var(--kd-radius-xl);
  padding: var(--kd-space-6);
  display: flex;
  align-items: center;
  gap: var(--kd-space-5);
  flex-wrap: wrap;
  margin-top: var(--kd-space-7);
}
.kd-article-cta-box p { font-size: 1rem; color: var(--kd-text-body); flex: 1; margin: 0; }

/* --------------------------------------------------------------------------
   31. Footer
   -------------------------------------------------------------------------- */

.kd-footer { background: var(--kd-sky-900); color: rgba(255,255,255,.8); }

/* Brand tagline quote — italic Newsreader, sits between logo and description */
.kd-footer__tagline {
  font-family: var(--kd-font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--kd-space-4);
  opacity: 0.92;
}
.kd-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: var(--kd-space-8);
  padding-block: var(--kd-space-8) var(--kd-space-5);
}
.kd-footer__brand img { height: 42px; width: auto; margin-bottom: var(--kd-space-4); }
.kd-footer__brand p { line-height: 1.7; max-width: 300px; margin-bottom: var(--kd-space-4); }
.kd-footer__socials { display: flex; gap: var(--kd-space-3); }
.kd-footer__social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--kd-dur-base);
}
.kd-footer__social-link:hover { background: rgba(255,255,255,.2); }

.kd-footer__heading { color: #fff; font-size: 0.9375rem; margin-bottom: var(--kd-space-4); font-family: var(--kd-font-body); }
.kd-footer__links { list-style: none; margin: 0; padding: 0; }
.kd-footer__links a { display: block; font-size: 0.9rem; padding: 5px 0; color: rgba(255,255,255,.8); transition: color var(--kd-dur-base); }
.kd-footer__links a:hover { color: #fff; text-decoration: none; }

.kd-footer__contact { display: flex; flex-direction: column; gap: var(--kd-space-3); }
.kd-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--kd-space-2);
  font-size: 0.875rem;
  line-height: 1.65;
}
.kd-footer__contact-item a { color: rgba(255,255,255,.85); }
.kd-footer__ctas { display: flex; gap: var(--kd-space-3); flex-wrap: wrap; margin-top: var(--kd-space-4); }
.kd-footer .kd-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.kd-footer .kd-btn--secondary:hover { background: rgba(255,255,255,.1); }

.kd-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px var(--kd-space-5);
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,.55);
}
.kd-footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   32. Utility helpers
   -------------------------------------------------------------------------- */

.kd-text-sm     { font-size: 0.875rem; }
.kd-text-muted  { color: var(--kd-text-muted); }
.kd-text-link   { display: inline-flex; align-items: center; gap: 5px; color: var(--kd-color-primary); font-weight: 500; }

/* --------------------------------------------------------------------------
   33. Empty states / 404
   -------------------------------------------------------------------------- */

.kd-empty-state, .kd-empty-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--kd-space-9);
  gap: var(--kd-space-4);
}
.kd-empty-page__icon { opacity: .5; }
.kd-empty-page__actions { display: flex; gap: var(--kd-space-3); flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------------------
   34. Pagination
   -------------------------------------------------------------------------- */

.kd-pagination { margin-top: var(--kd-space-7); }
.kd-pagination .nav-links { display: flex; gap: var(--kd-space-2); flex-wrap: wrap; justify-content: center; }
.kd-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--kd-space-3);
  border-radius: var(--kd-radius-md);
  border: 1.5px solid var(--kd-border-default);
  color: var(--kd-text-body);
  font-size: 0.9rem;
  transition: background var(--kd-dur-base), color var(--kd-dur-base);
}
.kd-pagination .page-numbers:hover,
.kd-pagination .page-numbers.current {
  background: var(--kd-color-primary);
  color: #fff;
  border-color: var(--kd-color-primary);
  text-decoration: none;
}
.kd-pagination .prev, .kd-pagination .next { gap: 6px; padding-inline: var(--kd-space-4); }

/* --------------------------------------------------------------------------
   34b. Service tagline + article related-service link
   -------------------------------------------------------------------------- */

/* Service row tagline (services.yaml `tagline` — hook line in list cards) */
.kd-service-row__tagline {
  color: var(--kd-color-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--kd-space-1);
}

/* "Layanan terkait" link under the article CTA (blog-posts.yaml) */
.kd-article-related { margin-top: var(--kd-space-6); }
.kd-article-related__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--kd-space-2);
  padding: 14px 18px;
  border: 1px solid var(--kd-border-subtle);
  border-radius: var(--kd-radius-md);
  font-weight: 600;
  color: var(--kd-text-strong);
  text-decoration: none;
  transition: border-color var(--kd-dur-base) var(--kd-ease-out), box-shadow var(--kd-dur-base) var(--kd-ease-out);
}
.kd-article-related__link:hover {
  border-color: var(--kd-color-primary);
  box-shadow: var(--kd-shadow-sm);
}

/* --------------------------------------------------------------------------
   35. Search results
   -------------------------------------------------------------------------- */

.kd-search-form { margin-top: var(--kd-space-5); max-width: 480px; }
.kd-search-results { display: flex; flex-direction: column; gap: var(--kd-space-7); }
.kd-search-result h2 { font-size: 1.25rem; margin-bottom: var(--kd-space-2); }
.kd-search-result p  { color: var(--kd-text-body); margin-bottom: var(--kd-space-2); }

/* --------------------------------------------------------------------------
   36. Animations (IMPLEMENTATION_PLAN §1.3 — kn- utility classes)
   Every rule lives inside prefers-reduced-motion: no-preference.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* kn-rise — hero entrance, auto-plays on load.
     Stagger siblings with inline animation-delay. */
  .kn-rise {
    opacity: 0;
    animation: knRise 0.8s var(--kd-ease-out) both;
  }
  @keyframes knRise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }

  /* [data-reveal] — scroll-triggered via scroll-reveal.js.
     Stagger children with inline --d custom property. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity   0.7s var(--kd-ease-out),
      transform 0.7s var(--kd-ease-out);
    transition-delay: var(--d, 0ms);
  }
  [data-reveal].reveal-in { opacity: 1; transform: none; }

  /* kn-float — gentle vertical loop (badges, trust icons) */
  .kn-float { animation: knFloat 6s ease-in-out infinite; }
  @keyframes knFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
  }

  /* kn-float-rot — float + rotate (supergrafis decorative element) */
  .kn-float-rot { animation: knFloatRot 16s ease-in-out infinite; }
  @keyframes knFloatRot {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-20px) rotate(4deg); }
  }

  /* kn-kenburns — hero/article image zoom-out, plays once.
     Parent MUST have overflow: hidden. */
  .kn-kenburns { animation: knKenburns 18s ease-in-out both; }
  @keyframes knKenburns {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
  }

  /* Buttons: lift on hover, press down on click */
  .kd-btn {
    transition: background var(--kd-dur-fast) var(--kd-ease-out),
                color var(--kd-dur-fast) var(--kd-ease-out),
                border-color var(--kd-dur-fast) var(--kd-ease-out),
                transform var(--kd-dur-fast) var(--kd-ease-out),
                box-shadow var(--kd-dur-fast) var(--kd-ease-out);
  }
  .kd-btn:hover  { transform: translateY(-2px); box-shadow: var(--kd-shadow-md); }
  .kd-btn:active { transform: translateY(1px) scale(0.985); box-shadow: none; }

  /* --------------------------------------------------------------------
     Card hover standard — every clickable card in the theme shares one
     duration/easing (var(--kd-dur-base) var(--kd-ease-out)) and one of
     two lift depths:
       -3px  "row" cards   (wide, text-forward: post/service/portfolio/cat-nav)
       -6px  "tile" cards  (square, image-forward: service tiles, photo tiles)
     Every lifted card also gets a matching :active press-down, so touch/
     click feedback is consistent everywhere.
     -------------------------------------------------------------------- */
  .kd-card--interactive,
  .kd-service-row,
  .kd-post-card,
  .kd-cat-nav__card {
    transition: transform var(--kd-dur-base) var(--kd-ease-out),
                box-shadow var(--kd-dur-base) var(--kd-ease-out);
  }
  .kd-card--interactive:hover,
  .kd-service-row:hover,
  .kd-post-card:hover,
  .kd-cat-nav__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kd-shadow-lg);
  }
  .kd-card--interactive:active,
  .kd-service-row:active,
  .kd-post-card:active,
  .kd-cat-nav__card:active { transform: translateY(-1px) scale(0.99); }

  .kn-tile,
  .kd-service-tile {
    transition: transform var(--kd-dur-base) var(--kd-ease-out),
                box-shadow var(--kd-dur-base) var(--kd-ease-out);
  }
  .kn-tile:hover,
  .kd-service-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--kd-shadow-lg);
  }
  .kn-tile:active,
  .kd-service-tile:active { transform: translateY(-2px) scale(0.99); }
  .kn-tile img       { transition: transform var(--kd-dur-base) var(--kd-ease-out); }
  .kn-tile:hover img { transform: scale(1.05); }

  /* Arrow nudges right on hovered cards/links */
  .kd-post-card__cta svg,
  .kd-text-link svg {
    transition: transform var(--kd-dur-base) var(--kd-ease-out);
  }
  .kd-post-card:hover .kd-post-card__cta svg,
  .kd-text-link:hover svg { transform: translateX(3px); }

  /* Header + footer text links */
  .kd-nav__list a,
  .kd-footer a {
    transition: color 0.2s var(--kd-ease-out),
                background 0.2s var(--kd-ease-out),
                transform 0.14s var(--kd-ease-out);
  }
  .kd-footer__links a:hover  { transform: translateY(-1px); }
  .kd-footer__links a:active { transform: translateY(0) scale(0.95); }

  /* Logo link */
  .kd-header__logo img,
  .kd-footer__brand img {
    transition: transform 0.25s var(--kd-ease-out);
  }
  .kd-header__logo:hover img,
  .kd-footer__brand a:hover img { transform: scale(1.04); }
  .kd-header__logo:active img  { transform: scale(0.97); }
}

/* --------------------------------------------------------------------------
   37. Responsive breakpoints
   -------------------------------------------------------------------------- */

/* Tablet — 980px */
@media (max-width: 980px) {
  .kd-grid--3  { grid-template-columns: repeat(2, 1fr); }
  .kd-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .kd-cat-nav__grid { grid-template-columns: repeat(2, 1fr); }

  .kd-split { grid-template-columns: 1fr !important; gap: 36px; }
  .kd-split__image { order: -1; }
  .kd-doctor__photo-wrap { order: -1; }
  .kd-doctor--reverse .kd-split__content { text-align: left; align-items: flex-start; }
  .kd-doctor--reverse .kd-credential { flex-direction: row; }
  .kd-doctor--reverse .kd-credential > div { align-items: flex-start; }

  .kd-service-body { grid-template-columns: 1fr; gap: 36px; }
  .kd-card--sticky-cta { position: static; top: auto; }
  .kd-service-header { grid-template-columns: 1fr; }
  .kd-service-header__image { order: -1; }
  .kd-location__inner { grid-template-columns: 1fr; }

  .kd-trust-strip__inner { gap: 14px 8px; }
  .kd-trust-strip__item { border-left: none; padding: 4px 8px; }
  .kd-trust-strip__inner { grid-template-columns: repeat(2, 1fr); }

  .kd-footer__inner { grid-template-columns: 1fr 1fr; }
  .kd-footer__brand { grid-column: 1 / -1; }

  .kd-gallery--3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .kd-gallery__tile--featured { grid-row: auto; }
}

/* Phone — 720px */
@media (max-width: 720px) {
  .kd-topbar__inner { display: none; }

  /* Mobile menu: dropdown panel under the sticky header */
  .kd-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--kd-border-subtle);
    box-shadow: var(--kd-shadow-md);
    padding: 10px 18px 18px;
    flex-direction: column;
    margin: 0;
  }
  .kd-nav.is-open { display: flex; }
  .kd-nav__list { flex-direction: column; gap: 2px; }
  .kd-nav__list a { font-size: 1rem; padding: 12px 14px; border-radius: var(--kd-radius-md); }
  .kd-nav__cta { display: block; margin-top: 12px; }

  .kd-header__cta { display: none; }
  .kd-header__divider, .kd-header__byline { display: none; }
  .kd-burger { display: inline-flex; }

  .kd-grid--2 { grid-template-columns: 1fr; }
  .kd-grid--3 { grid-template-columns: 1fr; }

  .kd-section { padding-block: 52px; }

  .kd-hero__inner { padding-bottom: 96px; }
  .kd-hero__bottom { flex-direction: column; align-items: flex-start; }
  .kd-hero__buttons { width: 100%; }
  .kd-hero__buttons .kd-btn { justify-content: center; }
  .kd-hero__eyebrow-row { top: 28px; }

  .kd-trust-strip__inner { margin-top: -64px; gap: 4px 8px; padding: 22px 12px; }

  .kd-portfolio__grid { grid-template-columns: 1fr; }

  .kd-post-card--featured { flex-direction: column; }
  .kd-post-card--featured .kd-post-card__media,
  .kd-post-card--featured .kd-post-card__placeholder { flex: none; width: 100%; aspect-ratio: 16/9; min-height: 0; }

  .kd-footer__inner { grid-template-columns: 1fr; }
  .kd-cta-band__inner { flex-direction: column; text-align: center; }
  .kd-cta-band-soft__inner { flex-direction: column; }

  .kd-service-row { grid-template-columns: 1fr; }
  .kd-service-row__icon { width: 48px; height: 48px; }
  .kd-service-row__actions { flex-direction: row; flex-wrap: wrap; }

  .kd-archive-category__count { display: none; }

  .kd-gallery--3 { display: flex; flex-direction: column; height: auto; }
  .kd-gallery--3 .kd-gallery__tile { height: 220px; }

  .kd-doctor__rating-badge { position: static; margin-top: 14px; display: inline-flex; }

  .kd-card--license { flex-wrap: wrap; }
  .kd-card--license .kd-badge-pending { flex-shrink: 1; margin-left: 64px; margin-top: 4px; }

  .kd-article-cta-box { flex-direction: column; }
  .kd-section__header--split { flex-direction: column; align-items: flex-start; }
}

/* Small phone — 480px */
@media (max-width: 480px) {
  .kd-container { padding-inline: 18px; }
  .kd-svc-grid { grid-template-columns: 1fr; gap: 10px; }
  .kd-service-tile { aspect-ratio: auto; padding: 24px 20px; }
  .kd-cat-nav__grid { grid-template-columns: 1fr; }
  .kd-trust-strip__inner { grid-template-columns: 1fr; }
  .kd-trust-strip__item:nth-child(even) { flex-direction: row-reverse; text-align: right; justify-content: end; }
}