/* =====================================================================
   Kayakriti — Site-wide styles for service pages, hubs, footer
   (homepage uses its own splash.css; this is for everything else)
   ===================================================================== */

/* ===== FOOTER ===== */
.kn-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 48px 0 24px;        /* was 64px top — tightened */
  /* Zero margin-top — the CTA band right above it now carries only 8px
     of bottom padding (see .kp-cta-band) so the dark card sits flush
     against the footer with no white-space gap. */
  margin-top: 0;
}
.kn-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.kn-footer-grid {
  display: grid;
  /* 5 columns on desktop: brand (wider) + 4 link cols (Cosmetic /
     Reconstructive / Dental / Clinic). */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.kn-footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 700; font-size: 24px;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.kn-footer-brand-col p {
  font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px;
}
.kn-footer-brand-col a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.kn-footer-brand-col a:hover { color: #fff; }
.kn-footer-hours { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.kn-footer-col h5 {
  font-size: 14px;          /* was 11px — bigger so headings stand out */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
/* The heading is now itself a link (clicks land on the pillar page),
   so it would otherwise pick up the global brand-blue link colour.
   Force white so headings stay legible against the dark footer. */
.kn-footer-col h5 a { color: #fff; text-decoration: none; }
.kn-footer-col h5 a:hover { color: #fff; opacity: 0.82; }
.kn-footer-col ul {
  list-style: none; padding: 0; margin: 0;
}
.kn-footer-col li a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  text-decoration: none;
  display: block;
  padding: 5px 0;
}
.kn-footer-col li a:hover { color: #fff; }
.kn-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
}
.kn-footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
/* Tablet: 2 cols of links + brand spanning both. */
@media (max-width: 900px) {
  .kn-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .kn-footer-brand-col { grid-column: 1 / -1; }
}
/* Mobile: brand on top (centred, full width), then a balanced 2×2 grid
   of all four link columns so every section stays paired (no orphaned
   "Clinic" hanging by itself). Headings + links centred to match. */
@media (max-width: 600px) {
  .kn-footer { padding: 40px 0 18px; margin-top: 56px; text-align: center; }
  .kn-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .kn-footer-brand-col {
    grid-column: 1 / -1;
    text-align: center;
  }
  .kn-footer-brand { justify-content: center; }
  .kn-footer-col {
    text-align: center;
  }
  .kn-footer-col h5 { margin-bottom: 8px; font-size: 13px; }
  .kn-footer-col li a {
    font-size: 13.5px;
    padding: 3px 0;
    display: inline-block;     /* keep the link to its text width — no stretched click area centring badly */
  }
  .kn-footer-bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }
}

/* ===== PAGE HERO (service / content pages) ===== */
.kp-hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 5vw, 56px);
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(194, 221, 243, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 80% 100%, rgba(235, 243, 251, 0.5) 0%, transparent 60%),
    var(--page-bg);
}
.kp-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.kp-breadcrumb {
  font-size: 13px; color: var(--muted);
  margin-bottom: 14px;
}
.kp-breadcrumb a { color: var(--muted); text-decoration: none; }
.kp-breadcrumb a:hover { color: var(--blue); }
.kp-breadcrumb span { margin: 0 6px; opacity: 0.55; }
.kp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 14px;
}
.kp-eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--blue), transparent);
  border-radius: 2px;
}
.kp-h1 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 880px;
}
.kp-h1 em {
  font-style: italic;
  background: var(--grad-blue, linear-gradient(135deg, #2D7DD2, #4A9EE8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kp-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 0 28px;
}
.kp-hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.kp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.kp-btn-primary {
  background: var(--grad-blue, linear-gradient(135deg, #2D7DD2, #4A9EE8));
  color: #fff;
}
.kp-btn-primary:hover { filter: brightness(0.92); transform: translateY(-1px); }
.kp-btn-ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}
.kp-btn-ghost:hover { border-color: var(--tint); }

/* ===== TWO-COL LAYOUT (prose + sidebar) ===== */
.kp-section { padding: clamp(48px, 6vw, 80px) 0; }
.kp-two-col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .kp-two-col { grid-template-columns: 1fr; gap: 32px; }
}
.kp-prose {
  max-width: 720px;
  font-size: 16px;
  color: var(--body);
  line-height: 1.7;
}
.kp-prose h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(26px, 3vw, 36px);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 40px 0 16px;
  line-height: 1.15;
}
.kp-prose h2:first-child { margin-top: 0; }
.kp-prose h3 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  margin: 28px 0 10px;
}
.kp-prose p { margin: 0 0 16px; }
.kp-prose strong { color: var(--ink); }
.kp-prose ul,
.kp-prose ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.kp-prose ul li,
.kp-prose ol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--body);
}
.kp-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--tint);
  border: 3px solid var(--blue);
}
.kp-prose ol { counter-reset: kp-count; }
.kp-prose ol li {
  counter-increment: kp-count;
}
.kp-prose ol li::before {
  content: counter(kp-count);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  background: var(--surface);
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}
.kp-prose blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--surface);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  font-style: italic;
  color: var(--ink);
}

/* Highlight box for clinical info */
.kp-highlight {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 24px 0;
}
.kp-highlight strong { color: var(--ink); }

/* Procedure facts grid (At-a-glance card) */
.kp-facts {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.kp-facts h4 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 700;
}
.kp-facts dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.kp-facts .row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.kp-facts .row:last-child { border-bottom: 0; }
.kp-facts .row dt { color: var(--muted); }
.kp-facts .row dd { color: var(--ink); font-weight: 600; margin: 0; text-align: right; }

/* NOTE: the old `.kp-side-cta { background: var(--ink); ... }` "dark
   sidebar booking card" rules used to live here. They were leaking the
   ink-navy background onto the doctor-card CTA button (which now uses
   `.kp-side-cta` as the BUTTON class, not a wrapper). Removed to let the
   brand-blue `.btn-primary` gradient show through. If a dark booking card
   wrapper is needed again later, use a new class name like
   `.kp-side-booking-card` so it doesn't collide with the button. */

/* Related procedures grid */
.kp-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 800px) { .kp-related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .kp-related { grid-template-columns: 1fr; } }
.kp-related-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}
.kp-related-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.kp-related-card .kp-related-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.kp-related-card h4 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 19px;
  color: var(--ink);
  margin: 4px 0 6px;
  font-weight: 500;
}
.kp-related-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* FAQ accordion */
.kp-faq {
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.kp-faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.kp-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.kp-faq summary::-webkit-details-marker { display: none; }
.kp-faq summary::after {
  content: "+";
  font-size: 26px;
  color: var(--blue);
  font-weight: 300;
  transition: transform 0.2s;
}
.kp-faq details[open] summary::after { content: "−"; }
.kp-faq details > div {
  margin-top: 12px;
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
}
.kp-faq details > div p { margin: 0 0 12px; }
.kp-faq details > div p:last-child { margin: 0; }

/* CTA band at bottom of service pages */
.kp-cta-band {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2, #1A2E4F) 100%);
  color: #fff;
  border-radius: 22px;
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  margin: 64px 0;
}
@media (max-width: 800px) {
  .kp-cta-band { grid-template-columns: 1fr; }
}
.kp-cta-band h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 40px);
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.kp-cta-band p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.kp-cta-band .kp-cta-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 800px) { .kp-cta-band .kp-cta-actions { justify-content: flex-start; } }
.kp-cta-band .kp-btn-primary {
  background: #fff;
  color: var(--ink);
}
.kp-cta-band .kp-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   FLOATING WHATSAPP — site-wide "Chat with us" FAB.
   Lives in footer.php (so it's never on the homepage / splash page).
   ============================================================================*/
.kaya-wa-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  font-family: inherit;
}
.kaya-wa-fab:hover {
  transform: translateY(-2px);
  background: #1ebe5b;
  box-shadow: 0 12px 32px -6px rgba(37, 211, 102, 0.7), 0 2px 8px rgba(0,0,0,0.12);
  color: #fff;
}
.kaya-wa-fab:active { transform: translateY(0); }
.kaya-wa-fab svg { flex-shrink: 0; }
.kaya-wa-label {
  white-space: nowrap;
  transition: max-width 0.25s, opacity 0.2s, margin 0.25s;
  overflow: hidden;
  max-width: 200px;
}
/* Mobile: collapse to a perfectly circular icon-only button. Fixed
   width/height (56×56), gap zeroed, label removed from layout. */
@media (max-width: 640px) {
  .kaya-wa-fab {
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    bottom: 16px;
    right: 16px;
    justify-content: center;
  }
  .kaya-wa-label {
    display: none;
  }
}

/* Footer social icons — Instagram / Facebook / YouTube / WhatsApp.
   Selectors prefixed with `.kn-footer-col` so they out-specify the
   generic `.kn-footer-col li a { display: block; padding: 5px 0 }`
   rule above — without that, each icon would render full-width like a
   text link with vertical padding (no longer a small circular badge). */
.kn-footer-col .kn-footer-social {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kn-footer-col .kn-footer-social li { margin: 0; padding: 0; }
.kn-footer-col .kn-footer-social a {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  transition: background 0.18s, color 0.18s, transform 0.15s;
}
.kn-footer-col .kn-footer-social a:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .kn-footer-col .kn-footer-social { justify-content: center; }
}
/* Quora chip uses a JPG (logo on white) rather than an inline SVG — give
   it its own tiny white circle so the red Q reads cleanly on the dark
   footer surface. */
.kn-footer-quora {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

/* ===== Brand colours for the footer social icons.
   Each platform gets its real corporate colour as the chip background;
   the inline SVG stays white (its fill is `currentColor` driven by the
   `<a>` colour rule below). The white circle behind Quora's JPG sits on
   top of an Instagram-style gradient when needed — but for Quora we
   keep the JPG approach (it's already correct). ===== */
.kn-footer-col .kn-footer-social a.kn-soc {
  color: #ffffff;                                /* icon stroke / fill */
  background: rgba(255,255,255,0.08);            /* fallback chip */
  transition: background 0.18s ease, transform 0.15s ease, filter 0.18s ease;
}
.kn-footer-col .kn-footer-social a.kn-soc:hover { filter: brightness(1.1); }

.kn-footer-col .kn-footer-social a.kn-soc-instagram {
  /* Real IG gradient — yellow → orange → magenta → blue */
  background: radial-gradient(circle at 30% 110%,
              #FDE574 0%, #F8C947 8%, #F39C26 20%,
              #E64C46 38%, #D81E72 55%, #B92D8F 70%,
              #8429B7 85%, #5249E1 100%);
}
.kn-footer-col .kn-footer-social a.kn-soc-facebook { background: #1877F2; }
.kn-footer-col .kn-footer-social a.kn-soc-x        { background: #000000; }
.kn-footer-col .kn-footer-social a.kn-soc-pinterest{ background: #E60023; }
.kn-footer-col .kn-footer-social a.kn-soc-youtube  { background: #FF0000; }
.kn-footer-col .kn-footer-social a.kn-soc-linkedin { background: #0A66C2; }
.kn-footer-col .kn-footer-social a.kn-soc-whatsapp { background: #25D366; }
/* Quora — brand-red chip with an inline SVG "Q" glyph, same recipe as
   every other social icon. The earlier JPG approach has been retired
   because it produced a visible white square inside the chip. */
.kn-footer-col .kn-footer-social a.kn-soc-quora    { background: #B92B27; }

/* ============================================================================
   CTA CONSULTATION MODAL — base styles live here (site.css, loaded on every
   page) so hand-written pages without page-templates.css still HIDE the
   modal HTML that footer.php injects on every page.
   The full styling block is duplicated in page-templates.css for the
   service / category templates that load it; the rules are identical.
   ============================================================================*/
.kaya-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 30, 53, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.kaya-modal-overlay.open { opacity: 1; visibility: visible; }
.kaya-modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(14, 30, 53, 0.25);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaya-modal-overlay.open .kaya-modal-box { transform: translateY(0); }
.kaya-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: #fff; display: grid; place-items: center;
  transition: background 0.15s;
  z-index: 2;
}
.kaya-modal-close:hover { background: rgba(255,255,255,0.3); }
.kaya-modal-head {
  background: linear-gradient(135deg, var(--blue, #2D7DD2) 0%, #1a5fa8 100%);
  border-radius: 20px 20px 0 0;
  padding: 32px 32px 26px;
}
.kaya-modal-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.kaya-modal-head h2 {
  font-size: clamp(20px, 4vw, 26px);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600; margin: 0 0 14px;
  color: #fff; line-height: 1.2;
}
.kaya-modal-head h2 em { font-style: italic; }
.kaya-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kaya-modal-tags .pill {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
}
.kaya-modal-body { padding: 28px 32px 32px; }
.kaya-modal-success { padding: 48px 32px; text-align: center; }
.kaya-modal-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: #22c55e; color: #fff;
  font-size: 28px; font-weight: 700;
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.kaya-modal-success h3 { font-size: 22px; margin-bottom: 10px; color: var(--ink); }
.kaya-modal-success p  { color: var(--body); font-size: 15px; margin-bottom: 6px; }
.kaya-modal-countdown  { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .kaya-modal-overlay { padding: 12px; align-items: center; }
  .kaya-modal-box {
    border-radius: 16px;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    width: 100%; height: auto;
  }
  .kaya-modal-head { padding: 18px 20px 14px; border-radius: 16px 16px 0 0; }
  .kaya-modal-head h2 { font-size: 20px; margin-bottom: 8px; }
  .kaya-modal-body { padding: 16px 20px 20px; }
  .kaya-modal-close { top: 10px; right: 10px; width: 28px; height: 28px; font-size: 18px; }
}


/* ==========================================================================
   ABOUT-PAGE CATEGORY PICKER
   --------------------------------------------------------------------------
   The first section on /about-kayakriti/ — also the landing target for the
   homepage's "Skip to Website" buttons (the top-right skip-link and the
   inactivity popup's skip button). Four cards in a row on desktop, each
   linking to a main category page.

   Visual intent: welcoming and clear, distinct from the prose-y "About" body
   that follows, but using brand colours so it feels of-a-piece. Cards lift
   on hover, accent the icon, and reveal a clearer arrow.
   ========================================================================*/
.kaya-cat-picker {
  background: linear-gradient(180deg, #F4F8FD 0%, #FFFFFF 100%);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 56px);
}
.kaya-cat-picker-h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  margin: 6px 0 10px;
  color: var(--ink, #0E1E35);
}
.kaya-cat-picker .lead {
  /* Span the full container so the description matches the heading
     ("From Smile to Skin, We Have You Covered") width above it.
     Previously capped at 680 px, which made the paragraph look narrow
     against the wider heading. */
  max-width: none;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--body, #44546A);
}
/* About Us hero on /about-kayakriti/ — let the description span the
   FULL container width so it matches the heading above it (the global
   `.lead` rule caps it to 680 px, which made the line shorter than the
   heading and previously triggered an ugly justify-stretch on the last
   line). Justify removed; default left-alignment now governs the text. */
.page-hero.is-about-hero .lead {
  max-width: none;
}

/* 4-up grid on desktop, 2-up on tablet, 1-up on mobile. minmax(0,1fr) keeps
   card widths even when one description wraps an extra line. */
.kaya-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
/* Tablet: 2 across (already comfortable). */
@media (max-width: 1024px) {
  .kaya-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
/* Phone: keep 2-across so all 4 cards fit in a single viewport without
   scroll. Reduce gap and let each card shrink to fit content. */
@media (max-width: 560px) {
  .kaya-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Card: tighter padding, smaller icons, and a thin brand-blue accent strip
   at the top edge — gives a clearer "service card" feel than the previous
   generic content tile. Anchored to the bottom by the "Explore →" CTA so
   all 4 cards align even when descriptions differ in length. */
.kaya-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid #E3ECF6;
  border-radius: 14px;
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
  overflow: hidden;            /* clips the ::before accent strip */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 200px;
}
/* Thin accent strip at the top edge — subtle in idle state, brand-blue and
   fully visible on hover. This is what gives each tile its "service card"
   character without adding visual noise. */
.kaya-cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue, #2D7DD2);
  opacity: 0.25;
  transition: opacity .18s ease;
}
.kaya-cat-card:hover::before,
.kaya-cat-card:focus-visible::before { opacity: 1; }
.kaya-cat-card:hover,
.kaya-cat-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(14, 30, 53, 0.22);
  border-color: var(--blue, #2D7DD2);
  outline: none;
}

.kaya-cat-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(45, 125, 210, 0.10);
  color: var(--blue, #2D7DD2);
  transition: background .18s ease, color .18s ease, transform .18s ease;
  margin-top: 2px;
  padding: 8px;
  box-sizing: border-box;
}
.kaya-cat-icon svg { width: 32px; height: 32px; }
/* PNG splash icons used on About — fill the tile so the icon reads as
   the card's primary visual, matching the splash funnel card style.
   The filter chain converts the black-ink source PNG to the brand
   blue `#2D7DD2`: `brightness(0)` forces solid black first (any colour
   in the source becomes black), then the invert/sepia/hue stack tints
   it to the target blue. Hover swaps to white. */
.kaya-cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%) invert(40%) sepia(54%) saturate(2025%)
          hue-rotate(189deg) brightness(96%) contrast(95%);
  transition: filter .18s ease;
}
.kaya-cat-card:hover .kaya-cat-icon {
  background: var(--blue, #2D7DD2);
  color: #FFFFFF;
  transform: scale(1.05);
}
.kaya-cat-card:hover .kaya-cat-icon img {
  /* Hover: tile turns blue → make the icon white so it reads on it. */
  filter: brightness(0) invert(1);
}

.kaya-cat-name {
  font-size: 17px;
  line-height: 1.25;
  margin: 0;
  color: var(--ink, #0E1E35);
  font-weight: 700;
}
.kaya-cat-desc {
  flex: 1;          /* pushes "Explore →" to the bottom of the card */
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--body, #44546A);
}
.kaya-cat-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue, #2D7DD2);
  margin-top: auto;
  padding-top: 6px;
}
.kaya-cat-card:hover .kaya-cat-more span { transform: translateX(2px); }
.kaya-cat-more span { transition: transform .18s ease; display: inline-block; }

/* Mobile compaction: the picker is the FIRST section on /about-kayakriti/
   and is the landing target for the homepage "Skip to Website" buttons.
   On phone viewports we want all 4 cards visible in one screen, so:
   - tighter section padding (heading + lead take less vertical space)
   - compact card padding + min-height so two rows of 2 fit comfortably
   - smaller title / description / Explore-link sizes
   - drop the 200px min-height entirely; let content set the card size */
@media (max-width: 560px) {
  .kaya-cat-picker {
    padding-top: 18px;
    padding-bottom: 20px;
  }
  .kaya-cat-picker-h1 {
    font-size: 22px;
    line-height: 1.18;
    margin: 4px 0 6px;
  }
  .kaya-cat-picker .lead {
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 14px;
  }
  .kaya-cat-card {
    padding: 14px 12px 12px;
    gap: 6px;
    min-height: 0;
    border-radius: 12px;
  }
  .kaya-cat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    margin-top: 0;
    padding: 6px;
  }
  .kaya-cat-icon svg { width: 26px; height: 26px; }
  .kaya-cat-name {
    font-size: 14.5px;
    line-height: 1.2;
  }
  .kaya-cat-desc {
    font-size: 12.5px;
    line-height: 1.4;
    /* Cap description at 2 lines so card heights stay even across the 2×2 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kaya-cat-more {
    font-size: 12.5px;
    padding-top: 4px;
  }
}