@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jost-400.woff') format('woff');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jost-500.woff') format('woff');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jost-600.woff') format('woff');}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jost-700.woff') format('woff');}
@font-face{font-family:'Jost';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/jost-800.woff') format('woff');}
@font-face{font-family:'Jost Fallback';src:local('Arial'),local('Helvetica Neue');size-adjust:97%;ascent-override:110.3%;descent-override:38.6%;line-gap-override:0%;}
/* ============================================================
   Kingsway Care — Main Stylesheet
   Font: Jost (self-hosted, Latin-subset woff — see @font-face above)
   Palette: Yellow var(--yellow) · Teal var(--teal) #0d7680 · Navy var(--navy)
   Brand colours are CSS vars overridden from CMS Settings → Colours.
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
svg { overflow: visible; }
a { color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; }
input, textarea, select { font: inherit; }

/* ── Custom properties ── */
:root {
  /* Brand colours — overridden dynamically from CMS Settings > Colours */
  --navy:        #1a3a4a;
  --yellow:      #fbce3e;
  --yellow-dk:   #f0be20;
  --yellow-lt:   #fffbe8;
  --teal:        #0d7680;
  --teal-dk:     #0a5a61;
  --teal-lt:     #e8f4f8;

  /* Neutrals */
  --text:        #1a1a1a;
  --muted:       #505050;   /* darkened for better contrast on light bg */
  --border:      #e2e2de;
  --bg:          #ffffff;
  --white:       #ffffff;
  --light:       #f0f0ee;

  /* Typography — larger base for readability (audience skews older) */
  --font:        'Jost', 'Jost Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --base-size:   17px;
  --line:        1.8;

  /* Spacing */
  --max-w:       1140px;
  --gap:         24px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;

  /* Transitions */
  --ease:        .18s ease;

  /* Navigation typography — overridden dynamically from CMS settings */
  --nav-size:      13px;
  --nav-weight:    600;
  --nav-transform: uppercase;
  --nav-spacing:   0.06em;
  --nav-sub-size:  11.5px;

  /* Heading sizes — overridden dynamically from CMS settings */
  --h1-size:       44px;
  --h2-size:       30px;
  --h3-size:       22px;
  --h4-size:       18px;
  --hero-size:     44px;

  /* Snippet / card text sizes — overridden dynamically from CMS settings */
  --card-text:     14px;
  --card-text-lg:  15px;
  --caption-size:  13px;
  --label-size:    11px;
  --small-print:   12px;
  --body-large:    16px;

  /* Buttons, forms & chrome — overridden dynamically from CMS settings */
  --btn-size:      15px;
  --btn-size-sm:   14px;
  --form-label:    14px;
  --form-input:    15px;
  --footer-size:   14px;
  --topbar-size:   13px;

  /* Snippet component titles — overridden dynamically from CMS settings */
  --sn-section-title:  18px;
  --sn-callout-title:  17px;
  --sn-dark-title:     20px;
  --sn-feature-title:  15px;
  --sn-story-title:    18px;
  --sn-cta-title:      22px;
  --sn-snippet-hero:   28px;
  --sn-snippet-sub:    16px;

  /* Body content extras — overridden dynamically from CMS settings */
  --body-blockquote:   18px;
  --body-table:        16px;
}

/* Override inline font-size:14px / 15px in CMS-managed content blocks.
   !important is necessary because these are hardcoded inline styles. */
.kc-body *[style*="font-size:14px"]  { font-size: var(--card-text,    14px) !important; }
.kc-body *[style*="font-size:15px"]  { font-size: var(--card-text-lg, 15px) !important; }
.kc-body figcaption                  { font-size: var(--caption-size,  13px); }

/* ── Accessibility ── */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── Base ── */
html { font-size: var(--base-size); scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
}

/* ── Skip link (accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
  font-size: var(--card-text, 14px);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--ease);
}
.skip-link:focus { top: 0; outline: 3px solid var(--yellow); outline-offset: 2px; }
/* Skip-link target: programmatically focusable but no visible focus ring on the region itself */
.kc-main:focus { outline: none; }

/* ── Focus styles ── */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Container ── */
.kc-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ============================================================
   HEADER
   ============================================================ */

/* Top bar — yellow strip with contact info */
.kc-topbar {
  background: var(--yellow);
  font-size: var(--topbar-size);
  font-weight: 500;
}
.kc-topbar a { text-decoration: none; color: var(--text); }
.kc-topbar a:hover { text-decoration: underline; }

.kc-topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 8px var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.kc-topbar-contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.kc-topbar-contact a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1;
}
.kc-topbar-contact svg { flex-shrink: 0; }

/* Request-a-brochure pill — on hover it expands to the right and an envelope
   whooshes in from the right into place. */
.kc-topbar .kc-brochure-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #1a1a1a;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: var(--small-print, 12px);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  line-height: 1.6;
  margin-left: 4px;
  text-decoration: none;
  transition: padding-right .28s ease, background .2s ease;
}
.kc-topbar .kc-brochure-cta:hover { background: #000; color: #fff; text-decoration: none; }

/* On hover the pill's right end oozes a black oil-drop joined to the bar by a
   liquid neck (SVG gooey filter): it stretches, pinches off into a solid black
   circle holding the envelope, then fades. The drop keeps FULL SIZE — the fade
   is applied to the whole SVG (after the filter) rather than the drop shape,
   because reducing a shape's alpha inside the gooey threshold erodes/shrinks it.
   Radii = the bar-end radius (pill ~27px tall -> r 13.5). Verified in-browser. */
.kc-topbar .kc-brochure-cta__drip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-22px, -50%);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
/* Keep the label above the drip so the drop passes BEHIND the text (it overlaps
   the pill's right end to anchor the neck) and can never cover the letters. */
.kc-topbar .kc-brochure-cta > span { position: relative; z-index: 1; }
.kc-topbar .kc-brochure-cta:hover .kc-brochure-cta__drip { animation: kc-drip-show .95s ease both; }
.kc-topbar .kc-brochure-cta:hover .kc-drip__drop { animation: kc-drip-drop .95s ease-in both; }
.kc-topbar .kc-brochure-cta:hover .kc-drip__env  { animation: kc-drip-env  .95s ease-in both; }
@keyframes kc-drip-show {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  68%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes kc-drip-drop {
  0%, 14% { cx: 8px; }
  46%     { cx: 34px; }
  62%     { cx: 48px; }
  100%    { cx: 60px; }
}
@keyframes kc-drip-env {
  0%, 14% { opacity: 0; transform: translateX(0); }
  46%     { opacity: 1; transform: translateX(26px); }
  62%     { transform: translateX(40px); }
  100%    { opacity: 1; transform: translateX(52px); }
}
@media (prefers-reduced-motion: reduce) {
  .kc-topbar .kc-brochure-cta:hover .kc-brochure-cta__drip,
  .kc-topbar .kc-brochure-cta:hover .kc-drip__drop,
  .kc-topbar .kc-brochure-cta:hover .kc-drip__env { animation: none; }
}

/* Phone tooltip — location shown on hover */
.kc-topbar-phone { position: relative; }
.kc-topbar-location {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  transform-origin: left center;
  background: var(--navy);
  color: #fff;
  font-size: calc(var(--topbar-size) - 2px);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}
.kc-topbar-location::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--navy);
}
.kc-topbar-phone:hover .kc-topbar-location,
.kc-topbar-phone:focus .kc-topbar-location {
  opacity: 1;
  animation: kc-loc-wiggle 0.55s ease;
}
/* Little hinged wiggle as the tag appears, pivoting on its far-left edge. */
@keyframes kc-loc-wiggle {
  0%   { transform: translateY(-50%) rotate(0deg); }
  35%  { transform: translateY(-50%) rotate(-9deg); }
  60%  { transform: translateY(-50%) rotate(5deg); }
  80%  { transform: translateY(-50%) rotate(-2deg); }
  100% { transform: translateY(-50%) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kc-topbar-phone:hover .kc-topbar-location,
  .kc-topbar-phone:focus .kc-topbar-location { animation: none; }
}

.kc-topbar-hours {
  color: var(--muted);
  font-size: calc(var(--topbar-size) - 1px);
  white-space: nowrap;
}

/* Social icons in top bar */
/* Text size control (A− / A+) */
.kc-topbar-textsize {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-right: 10px;
  flex-shrink: 0;
}
.kc-topbar-textsize__label {
  font-size: var(--label-size, 11px);
  color: rgba(26, 26, 26, .65);
  margin-right: 2px;
}
.kc-topbar-textsize button {
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(26, 26, 26, .3);
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
}
.kc-topbar-textsize button:first-of-type { font-size: var(--label-size, 11px); }
.kc-topbar-textsize button:last-of-type  { font-size: var(--card-text, 14px); }
.kc-topbar-textsize button:hover { background: #fff; }
@media (max-width: 640px) {
  .kc-topbar-textsize__label { display: none; }
}

.kc-topbar-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.kc-topbar-social a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--ease), transform var(--ease);
  line-height: 1;
}
.kc-topbar-social a svg { display: inline-block; }
.kc-topbar-social a:hover {
  background: rgba(0,0,0,.1);
  transform: translateY(-1px);
  text-decoration: none;
}

@media (max-width: 860px) {
  .kc-topbar-hours { display: none; }
  .kc-topbar-social { display: none; }
}
@media (max-width: 640px) {
  .kc-topbar-contact a:nth-child(n+2):not(.kc-topbar-hours) { display: none; }
}

/* Main header — white, sticky */
.kc-header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
  /* backdrop-filter removed: creates a containing block for position:fixed children,
     which breaks the mobile nav overlay (nav fixed to header box instead of viewport) */
}
.kc-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap);
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 70px;
}

/* Logo */
.kc-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.kc-logo img { height: 48px; width: auto; }
.kc-logo-text {
  font-size: var(--h4-size, 18px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.kc-logo-text span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--yellow);
  margin-top: 5px;
  border-radius: 2px;
}

/* Nav */
.kc-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  position: relative;
}

.kc-nav-item { position: relative; }

/* Yellow pill that slides behind the hovered / focused / current nav item.
   The <span> is created by the nav script in index.php and sits behind the
   item text (DOM order: pill first, items after). Progressive enhancement —
   without JS the per-item yellow background below still provides feedback. */
.kc-nav-pill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background: var(--yellow);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1),
              height .28s cubic-bezier(.4,0,.2,1),
              opacity .2s ease;
}
.kc-nav-pill--on { opacity: 1; }
/* Once the pill is active, drop the static per-item highlight so there aren't
   two yellows on screen at once. */
.kc-nav--pill .kc-nav-item > a:hover,
.kc-nav--pill .kc-nav-item > a[aria-current="page"],
.kc-nav--pill .kc-nav-cat:hover,
.kc-nav--pill .kc-nav-cat:focus { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .kc-nav-pill { transition: opacity .2s ease; }
}

/* ── Care cost estimator ([care-cost-estimator] shortcode) ─────────────────── */
/* Colours + type sizes come from the admin Colours/Typography settings via the
   site :root variables. Local --cce-* aliases just point at those. */
.kc-cce{--cce-navy:var(--navy);--cce-teal:var(--teal);--cce-teal-lt:var(--teal-lt);--cce-yellow:var(--yellow);--cce-yellow-dk:var(--yellow-dk);--cce-border:var(--border);color:var(--text,#444);line-height:1.6;}
.kc-cce *{box-sizing:border-box;}
.kc-cce .cce-card{background:#fff;border:1px solid var(--cce-border);border-radius:16px;padding:36px 40px 32px;margin-bottom:48px;}
.kc-cce .cce-badge{display:inline-block;background:var(--cce-yellow);color:#1a1a1a;font-size:var(--label-size, 11px);font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:16px;}
.kc-cce .cce-title{font-size:var(--h2-size,26px);font-weight:800;color:var(--cce-navy);line-height:1.2;margin:0 0 10px;}
.kc-cce .cce-lead{font-size:var(--card-text-lg,15px);color:var(--muted);margin:0 0 26px;}
.kc-cce .cce-step{font-size:var(--caption-size,12px);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--cce-teal);margin:0 0 12px;}
.kc-cce .cce-block{margin-bottom:26px;}
.kc-cce .cce-note{font-size:var(--small-print,12px);color:var(--muted);line-height:1.5;margin:10px 0 0;max-width:520px;}
.kc-cce .cce-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.kc-cce .cce-type{border:2px solid var(--cce-border);background:#f4f5f4;border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.kc-cce .cce-type:hover{border-color:var(--cce-teal-lt);}
.kc-cce .cce-type.on{border-color:var(--cce-teal);background:#fff;}
.kc-cce .cce-type svg{color:var(--cce-teal);margin-bottom:8px;}
.kc-cce .cce-type b{display:block;font-size:var(--card-text,14px);color:var(--cce-navy);font-weight:700;}
.kc-cce .cce-type span{font-size:var(--caption-size,12.5px);color:var(--muted);}
.kc-cce .cce-seg{display:inline-flex;position:relative;background:#f4f5f4;border-radius:10px;padding:4px;gap:2px;flex-wrap:wrap;}
.kc-cce .cce-seg button{position:relative;z-index:1;border:0;background:none;font-family:inherit;font-size:var(--caption-size, 13px);font-weight:600;color:var(--muted);padding:8px 16px;border-radius:8px;cursor:pointer;transition:color .22s ease;}
.kc-cce .cce-seg button.on{color:var(--cce-navy);}
.kc-cce .cce-seg button:focus{outline:none;}
.kc-cce .cce-seg button:focus-visible{outline:2px solid var(--cce-teal);outline-offset:2px;}
.kc-cce .cce-seg-ind{position:absolute;left:0;top:0;z-index:0;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1);}
.kc-cce .cce-slider-row{display:flex;align-items:center;gap:16px;}
.kc-cce .cce-slider-row input[type=range]{flex:1;accent-color:var(--cce-teal);height:6px;}
.kc-cce .cce-slider-val{min-width:118px;text-align:right;font-weight:700;color:var(--cce-navy);font-size:var(--card-text-lg,15px);}
.kc-cce .cce-slider-val small{display:block;font-size:var(--small-print, 12px);font-weight:500;color:var(--muted);}
.kc-cce .cce-estimate{background:var(--cce-navy);border-radius:14px;padding:26px 28px;color:#fff;position:relative;overflow:hidden;margin-bottom:14px;}
.kc-cce .cce-estimate::after{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(13,118,128,.35);border-radius:50%;}
.kc-cce .cce-elab{position:relative;font-size:calc(var(--base-size, 17px) * 0.7353);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.88);margin-bottom:6px;}
.kc-cce .cce-week{position:relative;font-size:calc(var(--base-size, 17px) * 1.8824);font-weight:800;line-height:1.1;}
.kc-cce .cce-week small{font-size:var(--card-text-lg,15px);font-weight:500;color:rgba(255,255,255,.88);}
.kc-cce .cce-month{position:relative;font-size:var(--card-text,14px);color:rgba(255,255,255,.92);margin-top:8px;}
.kc-cce .cce-disclaimer{font-size:var(--caption-size, 13px);color:var(--muted);background:var(--cce-teal-lt);border-left:3px solid var(--cce-teal);border-radius:0 8px 8px 0;padding:10px 14px;margin-bottom:22px;}
.kc-cce .cce-cta-row{display:flex;gap:12px;flex-wrap:wrap;}
.kc-cce .cce-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;font-size:var(--btn-size, 15px);text-decoration:none;padding:13px 24px;border-radius:10px;cursor:pointer;border:0;}
.kc-cce a.cce-btn--y{background:var(--cce-yellow);color:#1a1a1a;}
.kc-cce a.cce-btn--y:hover{background:var(--cce-yellow-dk);}
.kc-cce a.cce-btn--ghost{background:#fff;color:var(--cce-teal);border:2px solid var(--cce-teal);}
.kc-cce a.cce-btn--ghost:hover{background:var(--cce-teal-lt);}
@media(max-width:560px){
  .kc-cce .cce-card{padding:28px 22px;}
  .kc-cce .cce-title{font-size:var(--h3-size, 22px);}
  .kc-cce .cce-types{grid-template-columns:1fr;}
  .kc-cce .cce-week{font-size:calc(var(--base-size, 17px) * 1.5294);}
}
@media(prefers-reduced-motion:reduce){ .kc-cce .cce-seg-ind{transition:none;} }

.kc-nav-item > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.kc-nav-item > a:hover,
.kc-nav-item > a[aria-current="page"] {
  background: var(--yellow);
  color: var(--text);
}

/* Category headers — non-link nav items */
.kc-nav-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
  color: var(--text);
  cursor: default;
  border-radius: var(--radius-sm);
  user-select: none;
}
.kc-nav-cat:hover,
.kc-nav-cat:focus { background: var(--yellow); color: var(--text); outline: none; }

.kc-dropdown-cat {
  display: block;
  padding: 9px 14px;
  font-size: var(--nav-sub-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
  color: var(--text);
  cursor: default;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.kc-dropdown-cat:hover { background: var(--yellow); color: var(--text); }
.kc-dropdown-divider {
  display: block;
  padding: 4px 14px 2px;
  font-size: calc(var(--base-size, 17px) * 0.5882);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  cursor: default;
  white-space: nowrap;
}

.kc-caret {
  font-size: calc(var(--base-size, 17px) * 0.5294);
  opacity: 0.45;
  transition: transform var(--ease);
}
.kc-has-dropdown:hover .kc-caret,
.kc-has-dropdown:focus-within .kc-caret { transform: rotate(180deg); opacity: 1; }

/* Dropdown */
.kc-dropdown {
  display: none;
  position: absolute;
  top: 100%;          /* flush to the nav item — no gap */
  left: 0;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px 6px 6px; /* top padding bridges visual space without a hover gap */
  z-index: 300;
  list-style: none;
}
/* Extend the hover zone upward with a pseudo-element so
   mouse travel from nav link → dropdown never loses hover */
.kc-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.kc-has-dropdown:hover .kc-dropdown,
.kc-has-dropdown:focus-within .kc-dropdown { display: block; }

.kc-dropdown li a {
  display: block;
  padding: 9px 14px;
  font-size: var(--nav-sub-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
}
.kc-dropdown li a:hover {
  background: var(--yellow);
  color: var(--text);
}

/* Sub-sub-menu (flyout) */
.kc-has-subdropdown { position: relative; }

.kc-subcaret {
  font-size: calc(var(--base-size, 17px) * 0.4706);
  opacity: 0.45;
  float: right;
  margin-top: 2px;
  transition: opacity var(--ease);
}
.kc-has-subdropdown:hover .kc-subcaret { opacity: 1; }

.kc-subdropdown {
  display: none;
  position: absolute;
  top: -6px;
  left: 100%;
  min-width: 250px; /* wide enough that link descriptions wrap at most once */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 201;
}
/* Extend hover zone between dropdown item and subdropdown */
.kc-subdropdown::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 12px;
  height: 100%;
}
.kc-has-subdropdown:hover > .kc-subdropdown,
.kc-has-subdropdown:focus-within > .kc-subdropdown { display: block; }

.kc-subdropdown li a {
  display: block;
  padding: 8px 14px;
  font-size: var(--nav-sub-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-spacing);
  text-transform: var(--nav-transform);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.kc-subdropdown li a:hover {
  background: var(--yellow);
  color: var(--text);
}

/* Header CTA button */
.kc-header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.kc-phone-header {
  font-size: var(--card-text-lg, 15px);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.kc-phone-header:hover { color: var(--teal); }

/* Contact CTA button in header */
.kc-btn-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--yellow);
  color: var(--text);
  font-size: var(--btn-size-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  white-space: nowrap;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.kc-btn-cta:hover {
  background: var(--yellow-dk, #f0bc20);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}

/* Sound toggle button */
.kc-sound-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  flex-shrink: 0;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.kc-sound-toggle:hover {
  background: var(--yellow-lt);
  border-color: var(--yellow);
  color: var(--text);
}
.kc-sound-toggle--off {
  color: #bbb;
  border-color: #ddd;
}
.kc-sound-toggle--off:hover {
  background: var(--light);
  border-color: var(--border);
  color: var(--muted);
}
@media (max-width: 960px) {
  .kc-sound-toggle { display: none; }
}

/* Burger button */
.kc-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-left: auto;
}
.kc-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .kc-burger { display: flex; }
  .kc-topbar-hours { display: none; }

  .kc-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 80px var(--gap) 32px;
    overflow-y: auto;
    z-index: 600; /* above sticky header (500) */
    gap: 0;
  }
  .kc-nav.kc-nav--open { display: flex; }

  .kc-nav-item > a {
    font-size: calc(var(--nav-size, 13px) + 1px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--border);
  }

  /* Top-level dropdowns become tap-to-expand accordions on mobile (JS toggles
     .kc-m-open on the item). Collapsed by default, and the desktop hover/focus
     reveal is switched off so only the tapped section opens. */
  .kc-nav-item > a,
  .kc-nav-item > .kc-nav-cat { display: flex; align-items: center; justify-content: space-between; }
  .kc-nav-item > a > .kc-caret,
  .kc-nav-item > .kc-nav-cat > .kc-caret { padding: 8px 6px; margin: -8px -6px -8px 8px; transition: transform .2s ease; }
  .kc-nav-item.kc-m-open > a > .kc-caret,
  .kc-nav-item.kc-m-open > .kc-nav-cat > .kc-caret { transform: rotate(180deg); }

  .kc-dropdown {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 16px;
    background: var(--light);
  }
  .kc-has-dropdown:hover > .kc-dropdown,
  .kc-has-dropdown:focus-within > .kc-dropdown { display: none; }
  .kc-nav-item.kc-m-open > .kc-dropdown { display: block; }
  .kc-dropdown li a { padding: 10px 14px; font-size: var(--nav-sub-size, 12px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

  /* Subdropdown (sub-groups): stays inline within an opened section */
  .kc-subdropdown {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 16px;
    background: var(--light);
    min-width: 0;
  }
  .kc-subdropdown::before { display: none; }
  .kc-subdropdown li a { padding: 8px 14px; font-size: calc(var(--nav-sub-size, 12px) - 1px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .kc-subcaret { display: none; }

  .kc-header-cta .kc-phone-header { display: none; }
  .kc-header-cta .kc-btn-cta { display: none; }
}

@media (max-width: 480px) {
  .kc-topbar-inner { justify-content: center; }
  .kc-topbar-contact { justify-content: center; gap: 12px; font-size: calc(var(--topbar-size, 13px) - 1px); }
}

/* Mobile nav close button — lives inside <nav>, visible only when nav is open */
.kc-nav-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--yellow);
  border: none;
  border-radius: var(--radius-sm);
  width: 40px; height: 40px;
  font-size: calc(var(--base-size, 17px) * 1.1765);
  font-weight: 700;
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.kc-nav--open .kc-nav-close { display: flex; }

/* ============================================================
   PAGE HERO BANNER
   Each inner page gets a title strip so users are never
   dropped into content without a visual anchor.
   ============================================================ */
.kc-page-hero {
  background: var(--light);
  border-bottom: 3px solid var(--yellow);
  padding: 52px var(--gap) 44px;
}
.kc-page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.kc-page-hero h1 {
  font-size: clamp(22px, 4vw, var(--hero-size, 44px));
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.kc-page-hero p {
  margin-top: 12px;
  font-size: calc(var(--base-size, 17px) + 1px);
  color: var(--muted);
  max-width: 640px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .kc-page-hero { padding: 36px var(--gap) 30px; }
}

/* ── Image hero variant ────────────────────────────────────────────────── */
.kc-page-hero--image {
  position: relative;
  min-height: 280px;
  border-bottom: 3px solid var(--yellow);
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Responsive hero image — replaces CSS background-image so srcset works. */
.kc-page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position is set inline from the admin image-position setting */
  display: block;
}

.kc-page-hero-overlay {
  position: absolute;
  inset: 0;
}
.kc-page-hero--image .kc-page-hero-inner {
  position: relative;
  z-index: 1;
  padding: 32px var(--gap) 36px;
  width: 100%;
}
.kc-page-hero--image h1 {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.kc-page-hero--image p {
  color: rgba(255,255,255,0.88);
}

.kc-breadcrumb {
  font-size: var(--caption-size, 13px);
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.kc-breadcrumb a {
  color: var(--teal);
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-position: left bottom 1px;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: color .2s ease, background-size .26s ease;
  padding-bottom: 1px;
}
.kc-breadcrumb a:hover { color: var(--teal-dk); background-size: 100% 1.5px; }
.kc-breadcrumb-sep { opacity: .4; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.kc-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px var(--gap) 72px;
  min-height: 60vh;
}

/* Inner pages: constrain reading width to ~760px for comfort.
   Sidebar layout pages can override this. */
.kc-page-body {
  max-width: 760px;
}

/* Full-viewport layout — homepage and full-bleed pages. No max-width or
   padding so each section manages its own container. */
.kc-main--full {
  max-width: none;
  padding: 0;
}

/* ── Page + section sidebar layout ─────────────────────────────────────── */
.kc-page-with-sidebar {
  display: grid;
  /* minmax(0, …) lets the content column shrink below its intrinsic
     min-content width — wide content (e.g. carousels) would otherwise
     blow the grid out and push the sidebar off screen */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 48px;
  align-items: start;
}
.kc-body--wide {
  max-width: none; /* let grid control width */
}

/* Section nav sidebar */
.kc-section-nav {
  position: sticky;
  top: 24px;
}
.kc-section-nav__heading {
  display: block;
  font-size: var(--label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 0 0 10px 0;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--yellow);
  text-decoration: none;
}
.kc-section-nav__heading:hover { color: var(--teal); }
.kc-section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kc-section-nav ul li { margin: 0; padding: 0; }
.kc-section-nav__link {
  display: block;
  padding: 8px 12px;
  font-size: var(--nav-side-size, 14px);
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  line-height: 1.4;
  background-image: none; /* override body link hover */
}
.kc-section-nav__link:hover {
  background: var(--yellow-lt);
  border-left-color: var(--yellow);
  color: var(--text);
  background-size: unset;
}
.kc-section-nav__link--active {
  background: var(--yellow-lt);
  border-left-color: var(--yellow);
  font-weight: 600;
  color: var(--text);
}

/* Sidebar nav links — rendered by build_section_sidebar()
   White bordered card; divider rows; arrow + link slide right on hover;
   active row is a full-width yellow pill */
.kc-section-nav {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.kc-snav-head {
  font-size: var(--body-large, 16px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
  margin: 0 0 8px;
}
.kc-snav-head a {
  color: inherit;
  text-decoration: none;
}
.kc-snav-head a:hover {
  color: var(--teal);
}
.kc-snav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kc-snav-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--light);
}
.kc-snav-list li:last-child {
  border-bottom: none;
}
.kc-snav-link {
  display: flex;
  align-items: center;
  padding: 14px 0;
  /* The "Sidebar link size" setting (Navigation typography). The dead
     .kc-section-nav__link rule above is old markup — the rendered link is this. */
  font-size: var(--nav-side-size, 15px);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
  background-image: none; /* override body link hover */
  transition: color .2s ease, padding-left .2s ease;
}
.kc-snav-link:hover:not(.kc-snav-active) {
  color: var(--teal);
  padding-left: 4px;
  background-size: unset;
}
.kc-snav-arrow {
  display: inline-block;
  flex-shrink: 0;
  margin-right: 8px;
  transition: transform .2s ease;
}
.kc-snav-link:hover .kc-snav-arrow {
  transform: translateX(4px);
}
.kc-snav-active {
  background: var(--yellow);
  color: var(--text);
  font-weight: 700;
  padding: 14px 16px;
  margin: 4px -16px;
  border-radius: 6px;
}

@media (max-width: 860px) {
  .kc-page-with-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  .kc-section-nav {
    display: none; /* hidden on mobile — too cluttered on small screens */
  }
}

/* Hide broken images gracefully */
img:not([src]), img[src=""] { display: none; }
img { color: transparent; } /* hides alt text on broken images */

/* ── Snippet component classes (.kc-sn-*) ──────────────────────────────────
   All HTML snippets must use these classes instead of inline styles.
   Changing a value here updates every page that uses the component.
   ─────────────────────────────────────────────────────────────────────────── */

/* Client story card (stacked: image on top, text below) */
.kc-sn-story-card {
  background: #f9f9f7;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 36px;
}
.kc-sn-story-card__img {
  width: 100%;
  height: 280px;
  overflow: hidden;
  /* The block renderer puts this class on the <img> itself, not a wrapper, so
     object-fit has to live here or the image defaults to `fill` and squishes
     (portrait photo in a landscape box). The child-img rule below is kept for
     any hand-authored markup that does wrap the image in a div. */
  object-fit: cover;
  object-position: center top;
}
.kc-sn-story-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.kc-sn-story-card__body { padding: 28px 28px 24px; }
.kc-sn-story-card__badge-teal {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  font-size: var(--label-size);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kc-sn-story-card__badge-yellow {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-size: var(--label-size);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kc-sn-story-card__title,
.kc-body .kc-sn-story-card__title {
  margin: 0 0 10px;
  font-size: var(--sn-story-title, 18px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.kc-sn-story-card__text,
.kc-body .kc-sn-story-card__text {
  margin: 0 0 12px;
  font-size: var(--base-size, 17px);
  color: var(--muted);
  line-height: var(--line, 1.8);
}
.kc-sn-story-card__text:last-child { margin-bottom: 0; }

/* Row variant (image left, text right) */
.kc-sn-story-card--row {
  background: #fff;
  border: 1px solid #e0eaec;
  display: flex;
  flex-wrap: wrap;
}
.kc-sn-story-card--row .kc-sn-story-card__img {
  flex: 0 0 240px;
  width: 240px;
  /* Span the full card height (the card grows with its text) rather than a fixed
     box. height:100% (not auto) is needed — a replaced <img> won't stretch past
     its aspect ratio on align-self alone. object-fit: cover (base rule) keeps the
     photo undistorted; min-height stops it collapsing on very short cards. */
  align-self: stretch;
  height: 100%;
  min-height: 200px;
}
.kc-sn-story-card--row .kc-sn-story-card__body {
  flex: 1;
  min-width: 200px;
  padding: 24px;
}
.kc-sn-story-card--row .kc-sn-story-card__title { font-size: var(--body-large, 16px); }
/* Compact row cards keep the smaller card text so the body never outsizes the title */
.kc-sn-story-card--row .kc-sn-story-card__text { font-size: var(--card-text, 14px); }

/* Hero block */
.kc-sn-hero {
  background: var(--navy);
  border-radius: 16px;
  padding: 40px 44px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}
.kc-sn-hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(13,118,128,.55) 0%, rgba(13,118,128,0) 70%);
  border-radius: 50%;
  animation: kc-float-slow 14s ease-in-out infinite alternate;
}
.kc-sn-hero::after {
  content: '';
  position: absolute;
  bottom: -30px; right: 100px;
  width: 120px; height: 120px;
  background: rgba(251,206,62,.14);
  border-radius: 50%;
  animation: kc-float-fast 9s ease-in-out infinite alternate-reverse;
}
@keyframes kc-float-slow {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-12px, 16px) scale(1.06); }
  100% { transform: translate(8px, -10px) scale(.96); }
}
@keyframes kc-float-fast {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(10px, -14px) scale(1.1); }
  100% { transform: translate(-8px, 8px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .kc-sn-hero::before, .kc-sn-hero::after { animation: none; }
}
.kc-sn-hero__inner { position: relative; }
.kc-sn-hero__badge {
  display: inline-block;
  padding: 5px 14px;
  background: var(--yellow);
  border-radius: 20px;
  font-size: var(--small-print, 12px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kc-sn-hero__title,
.kc-sn-hero .kc-sn-hero__title,
.kc-body .kc-sn-hero__title {
  font-size: var(--sn-snippet-hero, 28px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.25;
}
.kc-sn-hero__sub,
.kc-sn-hero .kc-sn-hero__sub,
.kc-body .kc-sn-hero__sub {
  font-size: var(--sn-snippet-sub, 16px);
  color: rgba(255,255,255,.8);
  line-height: 1.7;
  margin: 0;
  max-width: 520px;
}

/* Two-col intro (text + image) */
.kc-sn-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  margin-bottom: 48px;
  align-items: center;
}
.kc-sn-intro__img {
  width: 100%;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  max-height: 320px;
}

/* Section heading used between snippet sections */
.kc-sn-section-title {
  font-size: var(--sn-section-title, 18px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
}
/* Let the yellow accent bar hang into the left gutter so the heading text lines
   up with the paragraphs, cards and callouts beneath it. Without this the 14px
   padding pushed section headings ~17px to the right of the body content, so
   things like the "How to Ask" cards looked shifted left of their heading. */
.kc-body h2.kc-sn-section-title {
  padding-left: 0;
  border-left: none;
  position: relative;
  /* Higher specificity (0,2,1) than .kc-body h2 (0,1,1) so the Section title
     setting actually wins — the bare .kc-sn-section-title rule above (0,1,0) lost. */
  font-size: var(--sn-section-title, 30px);
}
.kc-body h2.kc-sn-section-title::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--yellow);
}

/* Photo grid (3-up) */
.kc-sn-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}
.kc-sn-photo-grid figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.kc-sn-photo-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Dark navy panel */
.kc-sn-dark-panel {
  background: var(--navy);
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 48px;
}
.kc-sn-dark-panel__title { font-weight: 700; margin: 0 0 14px; }
.kc-sn-dark-panel .kc-sn-dark-panel__title,
.kc-body .kc-sn-dark-panel__title { color: var(--yellow); border: none; padding: 0;
  /* (0,2,0) beats .kc-body h3 (0,1,1) so the Dark panel title setting wins. */
  font-size: var(--sn-dark-title, 20px); }
.kc-sn-dark-panel__text { font-size: var(--card-text-lg, 15px); line-height: 1.75; margin: 0 0 14px; }
.kc-sn-dark-panel__text:last-child { margin-bottom: 0; }
.kc-body .kc-sn-dark-panel__text { color: rgba(255,255,255,.85); }

/* Icon card grid */
.kc-sn-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 48px;
}
.kc-sn-icon-grid--col {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
.kc-sn-icon-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e0eaec;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kc-sn-icon-card__icon {
  width: 36px;
  height: 36px;
  background: var(--teal);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kc-sn-icon-card__icon--navy { background: var(--navy); }
.kc-sn-icon-card__label {
  font-size: var(--card-text, 14px);
  font-weight: 600;
  color: var(--navy);
}
.kc-sn-icon-card__sub {
  font-size: var(--small-print, 12px);
  color: #666;
  line-height: 1.5;
  margin-top: 2px;
}

/* Photo — full-width rounded image */
.kc-sn-photo {
  width: 100%;
  border-radius: 14px;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Feature card (teal top stripe) */
.kc-sn-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kc-sn-feature-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e0eaec;
  overflow: hidden;
}
.kc-sn-feature-card__stripe {
  height: 6px;
  background: var(--teal);
}
.kc-sn-feature-card__body { padding: 22px 24px; }
.kc-sn-feature-card__icon-wrap {
  width: 38px;
  height: 38px;
  background: var(--teal-lt);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* Icon hover micro-interaction (from the card-animation reference) */
.kc-sn-feature-card:hover .kc-sn-feature-card__icon-wrap,
a.kc-sn-service-card:hover .kc-sn-feature-card__icon-wrap {
  transform: scale(1.1) rotate(4deg);
}
.kc-sn-feature-card__title,
.kc-sn-feature-card .kc-sn-feature-card__title,
.kc-body .kc-sn-feature-card__title {
  font-size: var(--sn-feature-title, 15px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.kc-sn-feature-card__text {
  font-size: var(--card-text, 14px);
  color: #555;
  line-height: 1.7;
  margin: 0;
}
/* Optional bulleted list inside a feature card — yellow tick markers.
   Scoped under .kc-body to beat the global .kc-body ul li tick style. */
.kc-body .kc-sn-feature-card__ticks { list-style: none; margin: 12px 0 0; padding: 0; }
.kc-body .kc-sn-feature-card__ticks li {
  display: block; position: relative; padding-left: 26px; margin-bottom: 7px;
  font-size: var(--card-text, 14px); color: #555; line-height: 1.5;
}
.kc-body .kc-sn-feature-card__ticks li:last-child { margin-bottom: 0; }
.kc-body .kc-sn-feature-card__ticks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px;
  min-width: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23fbce3e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  border-radius: 0; margin-top: 0;
}
.kc-sn-feature-card__list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: var(--caption-size, 13px);
  color: #555;
  line-height: 1.9;
}

/* Feature card icon alias (shorthand for __icon-wrap) */
.kc-sn-feature-card__icon { width:38px;height:38px;background:var(--teal-lt);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:12px; }

/* Feature card — yellow variants */
.kc-sn-feature-card__stripe--yellow { background: var(--yellow); }
.kc-sn-feature-card__icon-wrap--yellow,
.kc-sn-feature-card__icon--yellow { background: #fffbea; }

/* Service card link (clickable feature card) */
a.kc-sn-service-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e0eaec;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .2s, border-color .2s;
}
a.kc-sn-service-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
  border-color: #b8d8dc;
}

/* Inline "Learn more" link inside cards */
.kc-sn-link {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--caption-size, 13px);
  font-weight: 700;
  color: var(--teal);
}
.kc-sn-link--yellow { color: #c49a00; }

/* Callout title */
.kc-sn-callout__title,
.kc-sn-callout .kc-sn-callout__title,
.kc-body .kc-sn-callout__title {
  font-size: var(--sn-callout-title, 17px);
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 10px;
  border: none;
  padding: 0;
}

/* Teal left-border callout */
/* Icon callout — an icon tile beside an optional title and rich text. Two
   colourways: neutral (grey) and yellow. */
.kc-sn-iconnote {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #f9f9f7; border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 28px; margin-bottom: 40px;
}
.kc-sn-iconnote--yellow { background: #fffbea; border-color: #f5d96b; }
.kc-sn-iconnote__icon {
  width: 46px; height: 46px; background: var(--yellow); border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy);
}
.kc-sn-iconnote__body { flex: 1; min-width: 220px; }
.kc-body .kc-sn-iconnote__title {
  font-size: var(--card-text-lg, 15px); font-weight: 700; color: var(--navy);
  margin: 0 0 4px; border: none; padding: 0; line-height: 1.3;
}
.kc-sn-iconnote__text { font-size: var(--card-text, 14px); color: #555; line-height: 1.6; margin: 0; }
.kc-body .kc-sn-iconnote__text a { color: var(--teal); font-weight: 600; }

.kc-sn-callout {
  background: var(--teal-lt);
  border-left: 4px solid var(--teal);
  border-radius: 0 14px 14px 0;
  padding: 22px 28px;
  margin-bottom: 48px;
}
.kc-sn-callout p {
  font-size: var(--card-text-lg, 15px);
  line-height: 1.75;
  color: #444;
  margin: 0 0 10px;
}
.kc-sn-callout p:last-child { margin-bottom: 0; }
.kc-sn-callout__credit {
  font-size: var(--caption-size);
  font-weight: 700;
  color: var(--teal);
}

/* Testimonial */
.kc-sn-testimonial {
  background: #f9f9f7;
  border-radius: 14px;
  border: 1px solid #e0eaec;
  padding: 28px 32px;
  margin-bottom: 48px;
  position: relative;
}
.kc-sn-testimonial::before {
  content: '\201C';
  font-size: calc(var(--base-size, 17px) * 3.0588);
  line-height: 1;
  color: var(--teal);
  opacity: .2;
  position: absolute;
  top: 16px; left: 24px;
  font-family: Georgia, serif;
}
.kc-sn-testimonial blockquote { margin: 0; padding: 0; }
.kc-sn-testimonial__quote,
.kc-body .kc-sn-testimonial__quote {
  font-size: var(--card-text-lg, 15px);
  line-height: 1.8;
  color: #333;
  margin: 0 0 16px;
  padding-top: 14px;
  position: relative;
  z-index: 1;
}
.kc-sn-testimonial__byline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-sn-testimonial__avatar {
  width: 38px;
  height: 38px;
  background: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: calc(var(--base-size, 17px) * 0.8235);
  font-weight: 700;
  color: #fff;
}
.kc-sn-testimonial__name {
  font-size: var(--card-text, 14px);
  font-weight: 700;
  color: var(--navy);
}
.kc-sn-testimonial__role {
  font-weight: 400;
  color: #666;
}

/* Testimonial grid (side-by-side pair) */
.kc-sn-testimonial-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:48px; }
.kc-sn-testimonial-grid .kc-sn-testimonial { margin-bottom:0; }

/* Navy CTA block */
.kc-sn-cta {
  background: var(--yellow);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kc-sn-cta__title,
.kc-body .kc-sn-cta__title {
  font-size: var(--sn-cta-title, 22px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
.kc-sn-cta__sub,
.kc-body .kc-sn-cta__sub {
  font-size: var(--card-text-lg, 15px);
  color: var(--navy);
  margin: 0 0 26px;
  line-height: 1.6;
}
.kc-sn-cta__sub--icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
}
.kc-sn-cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* CTA buttons reuse .kc-hp-btn / .kc-hp-btn--dark / .kc-hp-btn--outline-dark from homepage styles */

/* ============================================================
   RICH BODY CONTENT
   ============================================================ */

/* Headings — clear scale with distinct weights */
.kc-body h1 {
  font-size: clamp(22px, 4vw, var(--h1-size, 44px));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  color: var(--text);
}
.kc-body h2 {
  font-size: clamp(17px, 3vw, var(--h2-size, 30px));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 48px 0 14px;
  color: var(--text);
  padding-left: 14px;
  border-left: 3px solid var(--yellow);
}
.kc-body h2:first-child { margin-top: 0; }
.kc-body h3 {
  font-size: clamp(15px, 2.5vw, var(--h3-size, 22px));
  font-weight: 600;
  line-height: 1.3;
  margin: 32px 0 10px;
  color: var(--text);
}
.kc-body h3:first-child { margin-top: 0; }
.kc-body h4 {
  font-size: var(--h4-size, 18px);
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--text);
}

/* Body text */
.kc-body p {
  margin-bottom: var(--para-space, 20px);
  line-height: var(--line);
  color: var(--text);
}
.kc-body p:last-child { margin-bottom: 0; }

/* Strong inline — slightly warmer so it reads as emphasis not alarm */
.kc-body strong { font-weight: 700; color: var(--text); }

/* Lists */
.kc-body ul, .kc-body ol {
  margin: 0 0 20px 0;
  padding-left: 0;
}
.kc-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  margin-bottom: 10px;
  line-height: 1.7;
}
.kc-body ol li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  line-height: 1.7;
}
.kc-body ul li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  width: 20px;
  height: 20px;
  background: var(--yellow);
  border-radius: 50%;
  font-size: calc(var(--base-size, 17px) * 0.6471);
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  flex-shrink: 0;
}
.kc-body ol { counter-reset: list; }
.kc-body ol li { padding-left: 28px; }
.kc-body ol li::before {
  content: counter(list) '.';
  counter-increment: list;
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
  font-size: calc(var(--base-size, 17px) * 0.8824);
}

/* Links in body — animated underline slides in from left on hover */
/* Exclude button-style links (.kc-hp-btn, .kc-sc-vac-apply, .kc-sn-cta__btn,
   quiz result CTAs). NOTE: each :not(class) ADDS specificity — overriding
   this rule from outside is a losing game; button-style links must be
   excluded HERE. */
.kc-body a:not(.kc-hp-btn):not(.kc-sc-vac-apply):not(.kc-sn-cta__btn):not(.kc-quiz-result__go):not(.kc-quiz-result__read):not(.kc-reviews-cta):not(.cce-btn):not(.kc-sn-form-callus__num):not(.kc-la-card__phone) {
  color: var(--teal);
  text-decoration: none;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-position: left bottom 1px;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: color .22s ease, background-size .28s ease;
  padding-bottom: 1px;
}
.kc-body a:not(.kc-hp-btn):not(.kc-sc-vac-apply):not(.kc-sn-cta__btn):not(.kc-quiz-result__go):not(.kc-quiz-result__read):not(.kc-reviews-cta):not(.cce-btn):not(.kc-sn-form-callus__num):not(.kc-la-card__phone):hover {
  color: var(--teal-dk);
  background-size: 100% 2px;
}

/* Blockquotes — testimonials are a key trust signal.
   Large, elegant, not straining to read. */
.kc-body blockquote {
  margin: 36px 0;
  padding: 28px 32px;
  border-left: 5px solid var(--yellow);
  background: var(--yellow-lt);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--body-blockquote, 18px);  /* slightly larger — quotes should feel prominent */
  font-weight: 400;        /* NOT bold italic — reads naturally */
  font-style: italic;
  line-height: 1.75;
  color: var(--text);
}
.kc-body blockquote p { margin-bottom: 0; line-height: 1.75; font-style: italic; }
.kc-body blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: var(--card-text, 14px);
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}

/* Images */
.kc-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 4px 0;
}
.kc-body figure { margin: 28px 0; }
.kc-body figcaption {
  font-size: calc(var(--caption-size, 13px) + 1px);
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

.kc-body hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 48px 0;
}

/* Tables */
.kc-body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: var(--body-table, 16px); background: transparent; }
.kc-body th, .kc-body td {
  padding: 14px 18px;
  border: 1px solid var(--border);
  text-align: left;
  line-height: 1.5;
  background: transparent;
}
.kc-body th {
  font-weight: 700;
  font-size: calc(var(--body-table, 16px) - 2px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
/* Borderless table */
.kc-body table[border="0"] th,
.kc-body table[border="0"] td { border: none; }

/* ── Content columns (from Gutenberg/page builder) ── */
.columns {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 28px 0;
}
.column {
  flex: 1 1 260px;
  min-width: 0;
}
.column > *:first-child { margin-top: 0; }
.column > *:last-child  { margin-bottom: 0; }

@media (max-width: 640px) {
  .columns { flex-direction: column; gap: 20px; }
  .column  { flex-basis: 100% !important; }
}

/* ============================================================
   BLOG POST
   ============================================================ */
.kc-post {
  max-width: none;
}
.kc-post-hero {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  max-height: 460px;
  object-fit: cover;
}
.kc-post h1 {
  font-size: clamp(24px, 4vw, calc(var(--h1-size) - 6px));
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}
.kc-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--caption-size);
  color: var(--muted);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   POST BODY — WORDPRESS COMPATIBILITY & MEDIA EMBEDS
   ============================================================ */

/* Responsive video embed wrapper (Vimeo / YouTube) */
.kc-embed-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin: 28px 0;
  background: #000;
}
.kc-embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* WordPress image alignment classes */
.kc-body .alignleft  { float: left;  margin: 4px 28px 16px 0; max-width: 50%; }
.kc-body .alignright { float: right; margin: 4px 0 16px 28px; max-width: 50%; }
.kc-body .aligncenter, .kc-body .alignnone { display: block; margin: 24px auto; }
.kc-body .alignfull  { width: 100%; margin: 24px 0; }

/* WordPress caption */
.kc-body .wp-caption       { max-width: 100%; }
.kc-body .wp-caption img   { display: block; width: 100%; }
.kc-body .wp-caption-text  { font-size: var(--caption-size); color: var(--muted); font-style: italic; margin-top: 6px; text-align: center; }

/* Figure / figcaption (native HTML5) */
.kc-body figure            { margin: 28px 0; }
.kc-body figcaption        { font-size: var(--caption-size, 13px); color: var(--muted); font-style: italic; margin-top: 8px; text-align: center; }

/* Gutenberg block resets — strip block wrappers, keep content */
.kc-body .wp-block-image   { margin: 28px 0; }
.kc-body .wp-block-image img { width: 100%; height: auto; border-radius: var(--radius); }
.kc-body .wp-block-quote,
.kc-body .wp-block-pullquote {
  border-left: 4px solid var(--accent);
  background: #fffbe6;
  padding: .8em 1.4em;
  margin: 1.4em 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.kc-body .wp-block-separator {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}
.kc-body .wp-block-columns { display: flex; gap: 28px; flex-wrap: wrap; margin: 24px 0; }
.kc-body .wp-block-column  { flex: 1; min-width: 200px; }
.kc-body [class*="wp-block-"] > p:last-child { margin-bottom: 0; }

/* Clearfix after floated images */
.kc-post-body::after { content: ''; display: table; clear: both; }

/* ============================================================
   POST PREV / NEXT NAV
   ============================================================ */
/* Slim prev/next: quiet teal text links with a chevron, not chunky boxes. */
.kc-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e0eaec);
}
.kc-post-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  text-decoration: none;
  color: var(--teal, #0d7680);
  font-weight: 600;
  max-width: 48%;
  transition: color var(--ease);
}
.kc-post-nav__link:hover { color: var(--teal-dk, #0a5c64); transform: none; }
.kc-post-nav__link--next { justify-content: flex-end; text-align: right; }

.kc-post-nav__icon {
  flex-shrink: 0;
  color: var(--teal);
  width: 18px;
  height: 18px;
}
.kc-post-nav__label { display: none; }
.kc-post-nav__title {
  font-size: var(--card-text, 14px);
  font-weight: 600;
  color: var(--teal, #0d7680);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .kc-post-nav > span:empty { display: none; }
  .kc-post-nav__link { max-width: 46%; }
}

/* ============================================================
   NEWS CARD GRID
   ============================================================ */
.kc-news-page > h1 {
  font-size: clamp(26px, 4vw, calc(var(--h1-size) - 4px));
  font-weight: 700;
  margin-bottom: 36px;
}

.kc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}

.kc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease), transform var(--ease);
  position: relative;
}
/* Whole-card link: the title link's overlay covers the card so a click anywhere
   opens the story. The image and "Read more" links point at the same URL, so it
   doesn't matter which the click lands on. */
.kc-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.kc-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Clip the image area so the hover zoom stays neatly inside the card. */
.kc-card > a:first-child { display: block; overflow: hidden; }
.kc-card-img {
  width: 100%;
  /* !important beats the per-image inline aspect-ratio that index.php injects for CLS
     (an inline declaration outranks a normal stylesheet rule), so every card image is a
     uniform 200px band instead of inheriting the photo's own tall/short proportions. */
  height: 200px !important;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}
.kc-card:hover .kc-card-img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .kc-card-img { transition: none; }
  .kc-card:hover .kc-card-img { transform: none; }
}

.kc-card-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  height: 110px;
  text-decoration: none;
  color: var(--text);
  transition: background var(--ease);
}
.kc-card:hover .kc-card-date-block { background: var(--yellow-dk); }
.kc-card-day  { font-size: calc(var(--base-size, 17px) * 2.4706); font-weight: 800; line-height: 1; }
.kc-card-mon  { font-size: calc(var(--base-size, 17px) * 0.7647); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

.kc-card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kc-card-title {
  font-size: var(--base-size, 17px);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.kc-card-title a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--ease);
}
.kc-card-title a:hover { color: var(--teal); }

/* The meta line is a <p>, so the excerpt rule below also caught it: `flex: 1`
   made it grow to fill the card, leaving a blank line's worth of space above the
   excerpt (and squeezing the excerpt out of its third clamped line). Kept at its
   natural height, and display restated because .kc-card-body p wins on specificity. */
/* A .kc-card grid can be dropped into a page body via [news] — inside .kc-body,
   its h2/link rules would enlarge the card title, add the yellow accent bar and
   recolour the title link. Restore the card's own styling (link colour needs
   !important to beat the many-:not() .kc-body a rule). */
.kc-body .kc-card-title { font-size: var(--base-size, 17px); font-weight: 600; line-height: 1.35; margin: 0; border: none; padding: 0; }
.kc-body .kc-card-title a { color: var(--text) !important; }
.kc-body .kc-card-title a:hover { color: var(--teal) !important; }
.kc-card-body .kc-post-meta { margin-bottom: 0; padding-bottom: 0; border-bottom: none;
  flex: 0 0 auto; display: flex; -webkit-line-clamp: none; }
.kc-card-body p {
  font-size: var(--card-text);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kc-read-more {
  font-size: var(--caption-size, 13px);
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: gap var(--ease);
}
.kc-read-more:hover { gap: 8px; }

/* Pagination */
.kc-pager {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}
.kc-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--caption-size, 13px);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: var(--white);
  transition: background var(--ease), border-color var(--ease);
}
.kc-pager-btn:hover { background: #fafaf8; border-color: #d9ddd4; }
.kc-pager-active,
.kc-pager-active:hover { background: var(--yellow); border-color: #f5c420; color: #1a1a1a; font-weight: 700; }
.kc-pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 2px;
  color: #aaa;
  font-weight: 600;
  user-select: none;
}

/* ============================================================
   CATEGORY BADGE
   ============================================================ */
.kc-category {
  display: inline-block;
  background: var(--yellow);
  color: var(--text);
  font-size: var(--label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 99px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.kc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  background: var(--yellow);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--btn-size);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.kc-btn:hover {
  background: var(--yellow-dk);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kc-btn:active { transform: translateY(0); }

.kc-btn--teal {
  background: var(--teal);
  color: var(--white);
}
.kc-btn--teal:hover { background: var(--teal-dk); }

.kc-btn--dark {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}
.kc-btn--dark:hover { background: #333; border-color: #333; }

.kc-btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(0,0,0,.3);
}
.kc-btn--ghost:hover { border-color: var(--text); }

.kc-btn--outline {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.kc-btn--outline:hover {
  background: var(--text);
  color: var(--white);
}

/* ============================================================
   DESIGN SYSTEM — global components shared with the homepage.
   Use these on any inner page; no .kc-hp scope required.
   ============================================================ */

/* Eyebrow label */
.kc-eyebrow {
  display: block;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.kc-eyebrow--teal { color: var(--teal); }

/* Section wrappers — for full-width inner-page sections */
.kc-section         { padding: 80px 0; background: var(--white); }
.kc-section--light  { background: var(--light); }
.kc-section--yellow { background: var(--yellow); border-top: 3px solid var(--yellow-dk); }

/* Centred section heading block */
.kc-section-head            { text-align: center; margin: 0 auto 48px; max-width: 640px; }
.kc-section-head h2         { font-size: clamp(22px, 2.4vw, calc(var(--h2-size) + 4px)); font-weight: 700; color: var(--text); margin: 0 0 14px; line-height: 1.25; padding-left: 0; border-left: none; }
.kc-section-head p          { font-size: var(--base-size); color: var(--muted); line-height: 1.65; margin: 0; }

/* "More" link */
.kc-more-link       { font-size: var(--card-text-lg); font-weight: 600; color: var(--teal); text-decoration: none; }
.kc-more-link:hover { text-decoration: underline; }

/* Checklist with yellow tick bullets */
.kc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kc-checklist li {
  font-size: var(--card-text-lg);
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.kc-checklist li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  width: 20px;
  height: 20px;
  background: var(--yellow);
  border-radius: 50%;
  font-size: calc(var(--base-size, 17px) * 0.6471);
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Video embed with yellow bottom accent */
.kc-video-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.kc-video-wrap::after { content: ""; display: block; height: 4px; background: var(--yellow); }
.kc-video-wrap video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
/* Give the video block the same section spacing as other snippet blocks when it
   sits in a page body (e.g. the films pages). */
.kc-body .kc-video-wrap { margin-bottom: 48px; }

/* Split layout — image + text two-column */
.kc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kc-split__image { border-radius: var(--radius-md); overflow: hidden; }
.kc-split__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .kc-split { grid-template-columns: 1fr; gap: 36px; }
  .kc-split__image { aspect-ratio: 16/9; }
}

/* Stat / trust bar */
.kc-trust-bar { background: var(--light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kc-trust-bar__inner { display: flex; justify-content: center; flex-wrap: wrap; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); }
.kc-trust-item { padding: 20px 32px; text-align: center; border-right: 1px solid var(--border); flex: 1; min-width: 130px; }
.kc-trust-item:last-child { border-right: none; }
.kc-trust-item strong { display: block; font-size: var(--card-text-lg); font-weight: 700; color: var(--text); margin-bottom: 3px; }
.kc-trust-item span   { display: block; font-size: var(--label-size); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 560px) {
  .kc-trust-bar__inner { flex-direction: column; }
  .kc-trust-item { border-right: none; border-bottom: 1px solid var(--border); }
  .kc-trust-item:last-child { border-bottom: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.kc-footer {
  background: var(--yellow);
  margin-top: 72px;
}
.kc-footer-upper {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px var(--gap) 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 768px) {
  .kc-footer-upper { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kc-footer-upper { grid-template-columns: 1fr; }
}

.kc-footer-brand h3 {
  font-size: var(--h4-size, 18px);
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text);
}
.kc-footer-brand p {
  font-size: var(--footer-size);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.kc-footer-brand a { color: var(--text); font-weight: 600; text-decoration: none; }
.kc-footer-brand a:hover { text-decoration: underline; }

.kc-footer-col h4 {
  font-size: calc(var(--footer-size) - 1px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
  color: var(--text);
}
.kc-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-footer-nav a {
  font-size: var(--footer-size);
  color: var(--text);
  text-decoration: none;
  opacity: .8;
  background-image: linear-gradient(var(--text), var(--text));
  background-position: left bottom 1px;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: opacity .2s ease, background-size .26s ease;
  padding-bottom: 1px;
}
.kc-footer-nav a:hover { opacity: 1; background-size: 100% 1.5px; }

.kc-footer-lower {
  border-top: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
}
.kc-footer-lower-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: calc(var(--footer-size) - 2px);
  color: var(--text);
  opacity: .75;
}
.kc-footer-lower a { text-decoration: none; }
.kc-footer-lower a:hover { text-decoration: underline; }

/* ============================================================
   FORMS
   ============================================================ */
.kc-form { display: flex; flex-direction: column; gap: 18px; }
.kc-form-group { display: flex; flex-direction: column; gap: 6px; }
.kc-form label { font-size: var(--form-label); font-weight: 600; color: var(--text); }
.kc-form input,
.kc-form textarea,
.kc-form select {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--form-input);
  color: var(--text);
  background: var(--white);
  transition: border-color var(--ease), box-shadow var(--ease);
  width: 100%;
}
.kc-form input:focus,
.kc-form textarea:focus,
.kc-form select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 118, 128,.15);
}
.kc-form textarea { min-height: 120px; resize: vertical; }

/* ============================================================
   UTILITIES
   ============================================================ */
.kc-text-center { text-align: center; }
.kc-text-muted  { color: var(--muted); }
.kc-mt-0 { margin-top: 0 !important; }
.kc-mb-0 { margin-bottom: 0 !important; }

/* Callout / info box */
.kc-callout {
  background: var(--teal-lt);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: var(--card-text-lg);
}

/* ============================================================
   HOMEPAGE TEMPLATE  (.kc-hp)
   Layout-specific rules for the homepage sections.
   Generic components (eyebrow, checklist, video-wrap, etc.)
   now live in DESIGN SYSTEM above and work everywhere.
   ============================================================ */

/* Shared container */
.kc-hp-container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }

/* ── Hero ─────────────────────────────────────────────── */
.kc-hp-hero {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 320px;
}

.kc-hp-hero__content {
  background: var(--yellow);
  padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.kc-hp-hero__content > * { width: 100%; max-width: 540px; }
.kc-hp-hero__content h1 { font-size: clamp(28px, 3vw, calc(var(--hero-size) - 2px)); font-weight: 700; line-height: 1.2; color: var(--text); margin: 0 0 20px; }
.kc-hp-hero__sub        { font-size: var(--base-size); line-height: 1.65; color: rgba(0,0,0,.62); margin: 0 0 24px; max-width: 440px; }
.kc-hp-hero__ctas       { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 20px; }

/* Eyebrow (alias — use .kc-eyebrow on new content) */
.kc-hp-eyebrow       { font-size: var(--label-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.kc-hp-eyebrow--teal { color: var(--teal); }
/* Hero eyebrow sits on the yellow band — navy for a WCAG-safe ~7.7:1 (grey failed at 3.1:1) */
.kc-hp-hero .kc-hp-eyebrow { color: var(--navy); }

/* Buttons (alias — use .kc-btn--dark / .kc-btn--ghost on new content) */
.kc-hp-btn               { display: inline-flex; align-items: center; justify-content: center; font-size: var(--card-text-lg); font-weight: 600; padding: 13px 26px; border-radius: 5px; text-decoration: none; transition: background .18s, border-color .18s; border: 2px solid transparent; line-height: 1; text-align: center; }
.kc-hp-btn--dark         { background: var(--text); color: #fff; border-color: var(--text); }
.kc-hp-btn--dark:hover   { background: #333; border-color: #333; }
.kc-hp-btn--ghost        { background: transparent; color: var(--text); border-color: rgba(0,0,0,.3); }
.kc-hp-btn--ghost:hover  { border-color: var(--text); }
.kc-hp-btn--outline-dark { background: transparent; color: var(--text); border-color: rgba(0,0,0,.35); }
.kc-hp-btn--outline-dark:hover { background: rgba(0,0,0,.06); }
/* .kc-hp-btn inside .kc-body: excluded from .kc-body a:not(.kc-hp-btn) so inherits base styles cleanly */

/* Hero trust signals */
.kc-hp-hero__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.kc-hp-hero__trust li { font-size: var(--caption-size); color: rgba(0,0,0,.70); padding-left: 17px; position: relative; }
.kc-hp-hero__trust li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--text); }

/* Hero image */
.kc-hp-hero__image { overflow: hidden; min-height: 320px; }
.kc-hp-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* On desktop the image column stretches to the hero row height (set by the
   taller text column) so it always fills the space. We deliberately do NOT cap
   it to a fixed aspect-ratio here: a 3:2 box left a white gap at in-between
   widths where the text is taller than the image. The 320px min-height above
   reserves space to avoid load-time layout shift before the image loads. */
@media (min-width: 861px) { .kc-hp-hero__image { align-self: stretch; } }

/* ── Trust bar ─────────────────────────────────────────── */
.kc-hp-trust-bar { background: var(--light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kc-hp-trust-bar__inner { display: flex; justify-content: center; flex-wrap: wrap; }
.kc-hp-trust-item { padding: 20px 32px; text-align: center; border-right: 1px solid var(--border); flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kc-hp-trust-item:last-child { border-right: none; }
.kc-hp-trust-item strong { display: block; font-size: var(--card-text-lg); font-weight: 700; color: var(--text); margin-bottom: 3px; }
.kc-hp-trust-item span   { display: block; font-size: var(--label-size); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* Landing pages reuse the home-page hero + full-width trust bar inside a page
   body. The trust bar has no bottom margin, so the first content block butts
   straight against it. Add breathing room when a .kc-body follows the bar.
   (The home page is unaffected — its next sibling is a padded .kc-hp-section.) */
.kc-hp-trust-bar + .kc-body,
.kc-hp-trust-bar + .kc-container.kc-body { margin-top: 48px; }
/* Logo panel — trust item containing only an image gets a rounded white card */
.kc-hp-trust-item--logo,
.kc-hp-trust-item:has(> img) {
  padding: 14px 32px;
}
.kc-hp-trust-item--logo img,
.kc-hp-trust-item:has(> img) > img {
  display: block;
  /* !important overrides inline height/width attrs on old content that break
     the aspect ratio (Lighthouse flagged the CQC logo squashed). object-fit
     keeps it undistorted even if forced dimensions remain in the markup. */
  height: auto !important;
  width: auto !important;
  max-height: 90px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 10px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
}

/* ── Awards bar carousel (shortcode [awards]) ─────────── */
.kc-awards-section { padding: 56px 0; }
.kc-awards-section > h2 { text-align: center; margin: 0 0 36px; }
.kc-awards-bar { background: #fff; display: flex; align-items: center; max-width: 1100px; margin: 0 auto; }
/* Viewport is the flex + scroll container — items are direct children so flex: 0 0 25% resolves against viewport width, not an inner track */
.kc-awards-viewport { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; min-width: 0; }
.kc-awards-viewport::-webkit-scrollbar { display: none; }
.kc-awards-item { flex: none; width: 33.333%; scroll-snap-align: start; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: 1px solid var(--border); box-sizing: border-box; gap: 4px; min-width: 0; }
.kc-awards-item:last-child { border-right: none; }
.kc-awards-item strong {
  /* Wrap long award names over two lines instead of truncating.
     min-height reserves the second line so shorter titles stay row-aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--card-text-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  min-height: 2.6em;
  overflow: hidden;
  max-width: 100%;
}
.kc-awards-item span   { display: block; font-size: var(--label-size); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kc-awards-year { display: block; font-size: var(--label-size); color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.kc-awards-item--logo  { padding: 20px 16px; }
.kc-awards-item--logo img { display: block; max-height: 64px; width: auto; border-radius: 8px; background: #fff; padding: 7px 12px; object-fit: contain; }
a.kc-awards-item { text-decoration: none; }
.kc-awards-arrow { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--teal); background: #fff; color: var(--teal); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: center; margin: 0 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: all .2s; }
.kc-awards-arrow:hover:not(:disabled) { background: var(--teal); color: #fff; }
.kc-awards-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) { .kc-awards-item { width: 50%; } }
@media (max-width: 560px) { .kc-awards-item { width: 100%; } }

/* Soft CTA — gentle, low-pressure prompt for between homepage sections */
.kc-hp-soft-cta          { background: var(--light); padding: 56px 0; }
.kc-hp-soft-cta__inner   { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title button" "text button"; align-items: start; column-gap: 48px; row-gap: 6px; text-align: left; }
.kc-hp-soft-cta__title   { grid-area: title; font-size: var(--h3-size); font-weight: 700; color: var(--navy); margin: 0; }
.kc-hp-soft-cta__text    { grid-area: text; font-size: var(--card-text-lg); color: #444; line-height: 1.7; margin: 0; max-width: 560px; }
.kc-hp-soft-cta__actions { grid-area: button; align-self: center; justify-self: center; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.kc-hp-soft-cta__btn     { white-space: nowrap; display: block; text-align: center; background: var(--navy); color: #fff; font-weight: 700; font-size: var(--btn-size, 15px); padding: 13px 32px; border-radius: 10px; text-decoration: none; transition: opacity .2s, background .2s; }
.kc-hp-soft-cta__btn:hover { opacity: .9; }
.kc-hp-soft-cta__btn--ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); padding: 11.5px 32px; }
.kc-hp-soft-cta__btn--ghost:hover { background: rgba(26,58,74,.06); opacity: 1; }
@media (max-width: 640px) { .kc-hp-soft-cta { padding: 40px 0; } .kc-hp-soft-cta__inner { grid-template-columns: 1fr; grid-template-areas: "title" "text" "button"; text-align: center; justify-items: center; row-gap: 10px; padding: 0 20px; } .kc-hp-soft-cta__actions { margin-top: 8px; } }

/* ── Section wrappers ──────────────────────────────────── */
.kc-hp-section        { padding: 80px 0; }
.kc-hp-section--white { background: #fff; }
.kc-hp-section--light { background: var(--light); }

.kc-hp-section-head            { text-align: center; margin: 0 auto 48px; max-width: 640px; }
.kc-hp-section-head .kc-hp-eyebrow { margin: 0 0 12px; }
.kc-hp-section-head h2         { font-size: clamp(22px, 2vw, var(--h2-size)); font-weight: 700; color: var(--text); margin: 0 0 14px; line-height: 1.3; padding-left: 0; border-left: none; }
.kc-hp-section-head p          { font-size: var(--base-size); font-weight: 400; color: var(--muted); line-height: 1.65; margin: 0; }

.kc-hp-more-link       { font-size: var(--card-text-lg); font-weight: 600; color: var(--teal); text-decoration: none; }
.kc-hp-more-link:hover { text-decoration: underline; }

/* ── Services grid ─────────────────────────────────────── */
.kc-hp-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kc-hp-svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* When used inside page bodies (e.g. home-care-options), give the grid
   section spacing and stop the body link-hover effect on card links */
.kc-body .kc-hp-svc-grid { margin: 24px 0 48px; }
.kc-body a.kc-hp-svc-card { background-image: none; }
.kc-body a.kc-hp-svc-card:hover { background-size: unset; }

.kc-hp-svc-card { display: block; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--yellow); border-radius: 8px; padding: 28px 24px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .15s; }
.kc-hp-svc-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09); transform: translateY(-3px); }

.kc-hp-svc-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--yellow); border-radius: 10px; margin-bottom: 16px; color: var(--text); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.kc-hp-svc-card:hover .kc-hp-svc-icon { transform: scale(1.1) rotate(4deg); }
.kc-hp-svc-card h2,
.kc-hp-svc-card h3,
.kc-hp-svc-card h4 { font-size: var(--sn-feature-title); font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.3; padding-left: 0; border-left: none; }
.kc-hp-svc-card ul { margin: 0 0 16px; padding-left: 18px; font-size: var(--card-text); color: var(--muted); line-height: 1.7; }
.kc-hp-svc-card ul li { margin: 0; }
.kc-hp-svc-card p  { font-size: var(--card-text); color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.kc-hp-svc-link    { font-size: var(--caption-size); font-weight: 600; color: var(--teal); }

/* ── About split ───────────────────────────────────────── */
.kc-hp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kc-hp-split__image { border-radius: 10px; overflow: hidden; aspect-ratio: 4/5; }
.kc-hp-split__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-hp-split__text h2  { font-size: clamp(22px, 2vw, var(--h2-size)); font-weight: 700; color: var(--text); margin: 0 0 16px; line-height: 1.3; padding-left: 0; border-left: none; }
.kc-hp-split__text > p { font-size: var(--sn-snippet-sub); line-height: 1.7; color: var(--muted); margin: 0 0 24px; }

/* Checklist alias — use .kc-checklist on new content */
.kc-hp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kc-hp-checklist li { font-size: var(--card-text-lg); color: var(--text); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.kc-hp-checklist li::before { content: "✓"; display: flex; align-items: center; justify-content: center; min-width: 20px; width: 20px; height: 20px; background: var(--yellow); border-radius: 50%; font-size: var(--label-size); font-weight: 700; color: var(--text); margin-top: 2px; flex-shrink: 0; }

/* ── Video feature ─────────────────────────────────────── */
.kc-hp-video-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kc-hp-video-feature--alt .kc-hp-video-feature__media { order: -1; }
.kc-hp-video-feature__text h2  { font-size: clamp(22px, 2vw, var(--h2-size)); font-weight: 700; color: var(--text); margin: 0 0 16px; line-height: 1.3; padding-left: 0; border-left: none; }
.kc-hp-video-feature__text p   { font-size: var(--sn-snippet-sub); line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.kc-hp-video-feature__text p:last-child { margin-bottom: 0; }

/* Video wrap alias — use .kc-video-wrap on new content */
.kc-hp-video-wrap { border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.1); background: #000; }
.kc-hp-video-wrap::after { content: ""; display: block; height: 4px; background: var(--yellow); }
.kc-hp-video-wrap video  { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }

/* ── Specialist care chips ─────────────────────────────── */
.kc-hp-spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 820px; margin: 0 auto; }
.kc-hp-spec-item { display: block; padding: 14px 18px; background: var(--light); border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: 6px; font-size: var(--card-text-lg); font-weight: 500; color: var(--text); text-decoration: none; transition: background .15s; }
.kc-hp-spec-item:hover { background: var(--yellow-lt); }

/* ── CTA band ──────────────────────────────────────────── */
/* ── Home-page scroll reveal ─────────────────────────────────────────────────
   Gentle fade + rise as sections and cards scroll into view. The hidden state
   (.kc-reveal) is added by site.js ONLY, and only to elements below the fold, so
   nothing is ever hidden without JS or above the fold. Honours reduced-motion. */
.kc-reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.kc-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease-out, transform .6s ease-out;
}
/* Subtle per-item stagger within a row (index set by site.js as --kc-i) */
.kc-hp-svc-card.kc-reveal.is-revealed   { transition-delay: calc(var(--kc-i, 0) * .09s); }
.kc-hp-spec-item.kc-reveal.is-revealed  { transition-delay: calc(var(--kc-i, 0) * .07s); }
.kc-hp-trust-item.kc-reveal.is-revealed { transition-delay: calc(var(--kc-i, 0) * .06s); }
@media (prefers-reduced-motion: reduce) {
  .kc-reveal, .kc-reveal.is-revealed {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

.kc-hp-cta-band { background: var(--yellow); border-top: 4px solid var(--yellow-dk); padding: 72px 0; text-align: center; }
.kc-hp-cta-band h2   { font-size: clamp(24px, 2.4vw, calc(var(--h2-size) + 6px)); font-weight: 700; color: var(--text); margin: 0 0 14px; line-height: 1.2; padding-left: 0; border-left: none; }
.kc-hp-cta-band p    { font-size: var(--base-size); color: rgba(0,0,0,.6); max-width: 520px; margin: 0 auto 32px; line-height: 1.65; }
.kc-hp-cta-band__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kc-hp-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .kc-hp-hero__content { padding: 56px 40px 56px 32px; }
}
@media (max-width: 860px) {
  .kc-hp-hero { grid-template-columns: 1fr; }
  .kc-hp-hero__image { min-height: 300px; order: -1; }
  .kc-hp-hero__content { padding: 48px 24px 40px; }
  .kc-hp-hero__ctas { flex-direction: column; align-items: stretch; }
  .kc-hp-split,
  .kc-hp-video-feature { grid-template-columns: 1fr; gap: 36px; }
  .kc-hp-video-feature--alt .kc-hp-video-feature__media { order: 0; }
  .kc-hp-split__image { aspect-ratio: 16/9; }
  .kc-hp-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .kc-hp-trust-item { padding: 10px 10px; }
}
@media (max-width: 560px) {
  .kc-hp-container { padding: 0 20px; }
  .kc-hp-svc-grid  { grid-template-columns: 1fr; }
  .kc-hp-spec-grid { grid-template-columns: 1fr; }
  .kc-hp-trust-bar__inner { flex-direction: column; }
  .kc-hp-trust-item { border-right: none; border-bottom: 1px solid var(--border); padding: 14px 24px; min-width: unset; }
  .kc-hp-trust-item:last-child { border-bottom: none; }
  .kc-hp-section { padding: 56px 0; }
  .kc-hp-cta-band { padding: 56px 0; }
  .kc-hp-cta-band__btns { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .kc-card:hover { transform: none; }
  .kc-btn:hover  { transform: none; }
}

/* ============================================================
   ACCORDION  (.kc-accordion)
   Usage: wrap items in <div class="kc-accordion">, each item
   is <div class="kc-acc-item [kc-acc-open]">, with a
   <button class="kc-acc-trigger"> and <div class="kc-acc-panel">
   ============================================================ */
.kc-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
}
.kc-acc-item {
  border: 1px solid #e4e4e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s;
}
.kc-acc-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.kc-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--card-text-lg);
  font-weight: 600;
  color: var(--navy, var(--navy));
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s;
}
.kc-acc-trigger:hover {
  background: #f9f9f7;
}
.kc-acc-item.kc-acc-open .kc-acc-trigger {
  color: var(--teal, var(--teal));
  background: var(--teal-lt);
}
.kc-acc-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, background .15s, color .15s;
  color: var(--teal, var(--teal));
}
.kc-acc-item.kc-acc-open .kc-acc-icon {
  transform: rotate(45deg);
  background: var(--teal, var(--teal));
  color: #fff;
}
.kc-acc-icon svg { display: block; }
.kc-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.kc-acc-item.kc-acc-open .kc-acc-panel {
  max-height: 2000px;
}
.kc-acc-body {
  padding: 0 24px 22px;
  color: #444;
  line-height: 1.75;
  font-size: var(--card-text-lg);
}
.kc-acc-body p { margin: 0 0 12px; }
.kc-acc-body p:last-child { margin-bottom: 0; }
.kc-acc-body ul, .kc-acc-body ol { padding-left: 20px; margin: 0 0 12px; }
.kc-acc-body li { margin-bottom: 6px; }
.kc-acc-body strong { color: var(--navy, var(--navy)); }

/* ── .kc-sn-map — Static Maps image (maps.googleapis.com/maps/api/staticmap)
   Applied to <img> tags; no JS required
   ─────────────────────────────────────────────────────────────────────────── */
.kc-sn-map {
  width: 100%;
  height: 220px;
  display: block;
  object-fit: cover;
  background: #e8f0f2;
}
.kc-sn-map--sm {
  height: 150px;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* ── [post] shortcode card ──────────────────────────────────────────────────
   Rendered by render_shortcode_post() — thumbnail + title link
   ─────────────────────────────────────────────────────────────────────────── */
.kc-post-card {
  display: inline-block;
  max-width: 320px;
  border-radius: 8px;
  border: 1px solid #e0eaec;
  overflow: hidden;
  text-decoration: none;
  vertical-align: top;
}
.kc-post-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.kc-post-card__body {
  padding: 12px 14px 14px;
  background: #f9f9f7;
}
.kc-post-card__title {
  font-size: var(--card-text, 14px);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.kc-body .kc-post-card__title { color: var(--navy); }

/* ── Story card reverse (image on right) ────────────────────────────────────── */
.kc-sn-story-card--reverse { flex-direction: row-reverse; }

/* ── Pledge card (yellow square icon + title + text) ───────────────────────── */
.kc-sn-pledge-card { background: #f9f9f7; border-radius: 14px; padding: 28px 24px; }
.kc-sn-pledge-card__icon {
  width: 48px; height: 48px;
  background: var(--yellow); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.kc-sn-pledge-card__title { font-size: var(--base-size); font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.kc-sn-pledge-card__text  { font-size: var(--card-text); color: #555; line-height: 1.7; margin: 0; }

/* ── Birdie pill badges (SCHEDULE / CARE PLAN / NOTES etc) ─────────────────── */
.kc-sn-pill-badge {
  display: inline-block;
  background: var(--yellow); color: var(--navy);
  font-weight: 700; font-size: var(--small-print, 12px);
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}

/* ── Callout modifiers ───────────────────────────────────────────────────────
   Yellow variant + navy/dark panel
   ─────────────────────────────────────────────────────────────────────────── */
.kc-sn-callout--yellow {
  background: #fff9e6;
  border-left-color: var(--yellow);
}
.kc-sn-callout--yellow .kc-sn-callout__title { color: var(--navy); }
.kc-sn-callout--yellow p { color: var(--navy); }

/* Navy documentary / feature panel */
.kc-sn-navy-panel {
  background: var(--navy);
  border-radius: 14px;
  padding: 32px;
  margin-bottom: 40px;
  color: #fff;
}
.kc-sn-navy-panel__title,
.kc-sn-navy-panel .kc-sn-navy-panel__title { font-size: var(--h3-size, 22px); color: var(--yellow); margin: 0 0 12px; border: none; padding: 0;
  /* Weight/leading were inherited from .kc-body h2. Stated here so the panel
     looks the same whichever heading tag it uses — the Callout block emits h3. */
  font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.kc-sn-navy-panel__text,
.kc-sn-navy-panel .kc-sn-navy-panel__text  { font-size: var(--body-large, 16px); line-height: 1.7; color: #e0eaee; margin: 0 0 16px; }
.kc-sn-navy-panel ul { font-size: var(--card-text-lg); line-height: 1.8; color: #e0eaee; margin: 0; padding-left: 20px; }
.kc-sn-navy-panel li strong { color: #fff; }

/* Simple tile (title + description, no icon) */
.kc-sn-tile { background: var(--teal-lt); border-radius: 12px; padding: 18px 20px; }
.kc-sn-tile__title { font-weight: 700; color: var(--teal); margin-bottom: 6px; font-size: var(--card-text-lg); }
.kc-sn-tile__text  { font-size: var(--card-text); line-height: 1.6; color: #333; margin: 0; }

/* ── Numbered steps ─────────────────────────────────────────────────────────
   Used by free-consultation and similar process pages
   ─────────────────────────────────────────────────────────────────────────── */
.kc-sn-steps { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.kc-sn-step  { display: flex; gap: 20px; align-items: flex-start; }
.kc-sn-step__num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--base-size, 17px) * 1.1765); font-weight: 800; color: var(--navy);
}
.kc-sn-step__title { font-size: var(--base-size); font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.kc-sn-step__text  { font-size: var(--step-text, 15px); color: #444; line-height: 1.7; margin: 0; }

/* ── Pricing cards ──────────────────────────────────────────────────────────
   Used by home-care-costs and why-choose
   ─────────────────────────────────────────────────────────────────────────── */
.kc-sn-price-card {
  background: #f9f9f7;
  border-radius: 14px;
  padding: 28px;
  text-align: center;
}
.kc-sn-price-card--featured { background: var(--teal); }
.kc-sn-price-card__label {
  font-size: var(--small-print, 12px); font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--teal); margin-bottom: 8px;
}
.kc-sn-price-card--featured .kc-sn-price-card__label { color: #a8dde0; }
.kc-sn-price-card__desc  { font-size: var(--caption-size); color: #666; margin-bottom: 18px; line-height: 1.5; }
.kc-sn-price-card--featured .kc-sn-price-card__desc  { color: #c8ecee; }
.kc-sn-price-card__amount { font-size: calc(var(--base-size, 17px) * 2.4706); font-weight: 800; color: var(--navy); line-height: 1; }
.kc-sn-price-card--featured .kc-sn-price-card__amount { color: #fff; }
.kc-sn-price-card__period { font-size: var(--caption-size); color: #6f6f6f; margin-top: 4px; } /* WCAG AA contrast */
.kc-sn-price-card--featured .kc-sn-price-card__period { color: #c8ecee; }

/* ── Photo trio (3-col photo grid) ─────────────────────────────────────────── */
.kc-sn-photo-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
.kc-sn-photo-trio figure { margin: 0; border-radius: 12px; overflow: hidden; }
.kc-sn-photo-trio img    { width: 100%; height: 160px; object-fit: cover; display: block; }
.kc-sn-photo-trio figcaption { padding: 8px 10px; font-size: var(--small-print, 12px); color: #666; background: #f9f9f7; }

/* ── Partner / section badge (e.g. "SALT PARTNERSHIPS") ────────────────────── */
.kc-sn-partner-badge {
  display: inline-block;
  background: var(--teal); color: #fff;
  font-size: var(--label-size); font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  margin-bottom: 12px; letter-spacing: .5px; text-transform: uppercase;
}

/* ── Check list (✓ items on tinted cards) ───────────────────────────────────── */
.kc-sn-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 40px;
  list-style: none; padding: 0; margin-left: 0;
}
/* Suppress the .kc-body ul li tick on check-list items (they have their own icons) */
.kc-sn-check-list li,
.kc-body .kc-sn-check-list li { padding-left: 0; margin-bottom: 0; }
.kc-sn-check-list li::before,
.kc-body .kc-sn-check-list li::before,
.kc-sn-check-list--dark li::before,
.kc-body .kc-sn-check-list--dark li::before { content: none; display: none; }
.kc-sn-check-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f9f9f7; border-radius: 12px; padding: 16px 18px;
}
.kc-sn-check-item--teal { background: var(--teal-lt); }
/* Wide variant — for sentence-length items (the Care Guides). The default
   minmax(200px) grid squeezes full sentences into skinny towers. */
.kc-sn-check-list--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kc-sn-check-item__icon { color: var(--teal); flex-shrink: 0; margin-top: 1px; }
.kc-sn-check-item__text { font-size: var(--card-text-lg); color: #333; line-height: 1.5; }

/* ── Affiliation cards (logo + title + text) ────────────────────────────────── */
.kc-sn-affil-card {
  background: #fff; border: 1px solid #e0eaec;
  border-radius: 14px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.kc-sn-affil-card__logo  { height: 60px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.kc-sn-affil-card__title { font-size: var(--body-large, 16px); font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.kc-sn-affil-card__text  { font-size: var(--card-text); color: #555; line-height: 1.65; margin: 0; }

/* ── CQC featured panel ─────────────────────────────────────────────────────── */
.kc-sn-cqc-panel {
  display: flex; gap: 36px; align-items: center;
  background: var(--teal-lt); border: 2px solid var(--teal);
  border-radius: 16px; padding: 32px 36px; margin-bottom: 32px; flex-wrap: wrap;
}
.kc-sn-cqc-panel__logo   { width: 180px; height: auto; display: block; flex-shrink: 0; }
.kc-sn-cqc-panel__body   { flex: 1; min-width: 220px; }
.kc-sn-cqc-panel__title  { font-size: var(--sn-dark-title, 20px); font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.kc-sn-cqc-panel__text   { font-size: var(--card-text-lg); color: #444; margin: 0 0 14px; }
.kc-sn-cqc-panel__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-sn-cqc-badge {
  background: var(--teal); color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: var(--caption-size, 13px); font-weight: 600;
}

/* ── FAQ Accordion ──────────────────────────────────────────────────────────── */
.kc-accordion { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.kc-acc-item  { border-radius: 14px; overflow: hidden; }
.kc-acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border: none; text-align: left; font-family: inherit;
  font-size: var(--card-text-lg); font-weight: 700; cursor: pointer; line-height: 1.4;
  background: var(--yellow); color: var(--navy); border-radius: 14px;
  transition: background .2s, border-radius .15s;
}
.kc-acc-item.kc-acc-open .kc-acc-trigger { border-radius: 14px 14px 0 0; }
.kc-acc-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .25s; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.kc-acc-item.kc-acc-open .kc-acc-icon { transform: rotate(45deg); }
.kc-acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
/* Full-width accordion for wide layouts (e.g. location landing pages) —
   overrides the default 820px reading-width cap. */
.kc-accordion--full { max-width: none; }
.kc-acc-body {
  background: #fff; border: 2px solid var(--yellow); border-top: none;
  border-radius: 0 0 14px 14px; padding: 20px 22px;
  font-size: var(--card-text-lg); color: #444; line-height: 1.75;
}
.kc-acc-body p { margin: 0 0 10px; }
.kc-acc-body p:last-child { margin: 0; }
.kc-acc-body ul, .kc-acc-body ol { padding-left: 20px; margin: 0 0 10px; }
.kc-acc-body li  { margin-bottom: 6px; }
.kc-acc-body a   { color: var(--teal); }
.kc-acc-body strong { color: var(--navy); }

/* ── Contact form ───────────────────────────────────────────────────────────── */
.kc-sn-contact-form { background: #f9f9f7; border-radius: 16px; padding: 36px 40px; }
.kc-sn-form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 20px;
}
.kc-sn-form-group  { margin-bottom: 20px; }
.kc-sn-form-label  { display: block; font-size: var(--form-label); font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.kc-required       { color: #c00; }
.kc-sn-form-input,
.kc-sn-form-select,
.kc-sn-form-textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid #ddd; border-radius: 10px;
  font-size: var(--form-input); background: #fff; box-sizing: border-box; font-family: inherit;
}
.kc-sn-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.kc-sn-form-textarea   { resize: vertical; }
.kc-sn-form-privacy    { font-size: var(--caption-size); color: #555; line-height: 1.65; margin-bottom: 14px; }
.kc-sn-form-checkbox   { display: flex; align-items: flex-start; gap: 10px; font-size: var(--form-label); cursor: pointer; margin-bottom: 24px; }
.kc-sn-form-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--teal); flex-shrink: 0; }
.kc-sn-form-msg        { display: none; padding: 12px 16px; border-radius: 8px; font-size: var(--form-label); margin-bottom: 16px; }
/* Floating labels (tw-elements style). Scoped to .kc-sn-fl so the other users of
   .kc-sn-form-label — checkbox-group headings and paragraph labels — are untouched.
   Fields need placeholder=" " and the <label> placed immediately AFTER the control. */
.kc-sn-form-wrap { --kc-fl-bg: #f9f9f7; }
.kc-sn-fl { position: relative; }
.kc-sn-fl .kc-sn-form-input,
.kc-sn-fl .kc-sn-form-select,
.kc-sn-fl .kc-sn-form-textarea { padding-top: 21px; padding-bottom: 7px; }
.kc-sn-fl > .kc-sn-form-label {
  position: absolute; left: 12px; top: 15px; margin: 0;
  font-weight: 400; font-size: var(--form-input); color: #8a9aa0;
  background: transparent; padding: 0 5px; pointer-events: none;
  transition: top .15s, font-size .15s, color .15s, font-weight .15s;
}
.kc-sn-fl .kc-sn-form-textarea ~ .kc-sn-form-label { top: 16px; }
.kc-sn-fl .kc-sn-form-input:focus,
.kc-sn-fl .kc-sn-form-select:focus,
.kc-sn-fl .kc-sn-form-textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,118,128,.13);
}
.kc-sn-fl .kc-sn-form-input:focus + .kc-sn-form-label,
.kc-sn-fl .kc-sn-form-input:not(:placeholder-shown) + .kc-sn-form-label,
.kc-sn-fl .kc-sn-form-textarea:focus + .kc-sn-form-label,
.kc-sn-fl .kc-sn-form-textarea:not(:placeholder-shown) + .kc-sn-form-label,
.kc-sn-fl--sel > .kc-sn-form-label {
  top: -8px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  background: var(--kc-fl-bg);
}
.kc-sn-fl .kc-sn-form-input:focus + .kc-sn-form-label,
.kc-sn-fl .kc-sn-form-textarea:focus + .kc-sn-form-label,
.kc-sn-fl--sel .kc-sn-form-select:focus + .kc-sn-form-label { color: var(--teal); }
.kc-sn-form-hint { font-size: var(--caption-size); color: #8a9aa0; margin: 6px 2px 0; }
.kc-sn-form-submit {
  width: 100%; padding: 14px;
  background: var(--yellow); border: none; border-radius: 10px;
  font-size: calc(var(--btn-size) + 1px); font-weight: 700; cursor: pointer; color: var(--text);
  transition: opacity .2s; font-family: inherit;
}
.kc-sn-form-submit:hover { opacity: .9; }

/* ============================================================
   CAREERS — NEW COMPONENT CLASSES
   ============================================================ */

/* Image hero (photo + gradient overlay) */
.kc-sn-img-hero { position:relative;border-radius:16px;overflow:hidden;margin-bottom:48px; }
.kc-sn-img-hero img { width:100%;max-height:420px;object-fit:cover;display:block;object-position:center top; }
.kc-sn-img-hero__overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(26,58,74,.82) 40%,rgba(26,58,74,.15) 100%);display:flex;align-items:flex-end;padding:36px; }
.kc-sn-img-hero__label { font-size: var(--card-text);font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:1px;margin:0 0 8px; }
.kc-sn-img-hero__title,
.kc-sn-img-hero .kc-sn-img-hero__title,
.kc-sn-img-hero__overlay .kc-sn-img-hero__title,
.kc-body .kc-sn-img-hero__title { font-size:clamp(var(--h3-size, 22px), 4vw, calc(var(--h3-size, 22px) * 1.5455));font-weight:800;color:#fff;margin:0 0 4px;line-height:1.15;border:none;padding:0; }
.kc-sn-img-hero__title--accent,
.kc-sn-img-hero .kc-sn-img-hero__title--accent,
.kc-sn-img-hero__overlay .kc-sn-img-hero__title--accent { color:var(--yellow); }

/* Navy panel with side media image */
.kc-sn-navy-panel--media { display:flex;gap:36px;align-items:center;flex-wrap:wrap; }
.kc-sn-navy-panel__body { flex:1;min-width:240px; }
.kc-sn-navy-panel__media { flex:0 0 280px;max-width:100%; }
.kc-sn-navy-panel__media img { width:100%;border-radius:12px;display:block; }

/* 2-col photo duo */
.kc-sn-photo-duo { display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:48px; }
.kc-sn-photo-duo figure { margin:0;border-radius:12px;overflow:hidden; }
.kc-sn-photo-duo img { width:100%;height:260px;object-fit:cover;display:block; }
.kc-sn-photo-duo figcaption { font-size:var(--caption-size);color:#666;padding:10px 14px;background:#f9f9f7; }

/* Awards panel */
.kc-sn-awards-panel { display:flex;gap:36px;align-items:center;flex-wrap:wrap;background:var(--teal-lt);border-radius:16px;padding:32px;margin-bottom:48px; }
.kc-sn-awards-panel__photo { flex:0 0 200px;max-width:100%;text-align:center; }
.kc-sn-awards-panel__photo img { width:180px;height:180px;border-radius:50%;object-fit:cover;display:inline-block;border:4px solid var(--teal); }
.kc-sn-awards-panel__body { flex:1;min-width:220px; }
.kc-sn-awards-panel__title,
.kc-body .kc-sn-awards-panel__title { font-size:var(--h3-size, 22px);color:var(--teal);margin:0 0 12px;border:none;padding:0; }
.kc-sn-award-row { display:flex;gap:10px;align-items:center;margin-bottom:6px; }

/* Trait cards (teal left border — "What Makes a Great CareGiver?") */
.kc-sn-trait-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:48px; }
.kc-sn-trait-card { background:#f9f9f7;border-radius:12px;padding:18px 20px;border-left:3px solid var(--teal); }
.kc-sn-trait-card__title { display:block;font-weight:700;color:var(--navy);font-size: var(--card-text-lg);margin-bottom:6px; }
.kc-sn-trait-card__text { font-size:var(--card-text);color:#555;line-height:1.6;margin:0; }

/* CTA colour modifiers */
.kc-sn-cta--yellow { background:var(--yellow); }
.kc-sn-cta--yellow .kc-sn-cta__title,
.kc-body .kc-sn-cta--yellow .kc-sn-cta__title { color:var(--navy); }
.kc-sn-cta--yellow .kc-sn-cta__sub,
.kc-body .kc-sn-cta--yellow .kc-sn-cta__sub { color:var(--navy); }
.kc-sn-cta--navy { background:var(--navy); }
.kc-sn-cta--navy .kc-sn-cta__title,
.kc-body .kc-sn-cta--navy .kc-sn-cta__title { color:#fff; }
.kc-sn-cta--navy .kc-sn-cta__sub,
.kc-body .kc-sn-cta--navy .kc-sn-cta__sub { color:rgba(255,255,255,.8); }

/* CTA action buttons */
.kc-sn-cta__btn { display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:10px;font-weight:700;font-size:var(--btn-size);text-decoration:none;background:var(--navy);color:#fff;transition:opacity .2s; }
.kc-sn-cta__btn:hover { opacity:.88; }
.kc-sn-cta__btn--ghost { background:transparent;border:2px solid rgba(0,0,0,.2);color:var(--navy); }
.kc-sn-cta--navy .kc-sn-cta__btn { background:var(--yellow);color:var(--text); }
.kc-sn-cta--navy .kc-sn-cta__btn--ghost { background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff; }

/* Check list on dark (navy) background */
.kc-sn-check-list--dark { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:none;margin:0;padding:0; }
.kc-sn-check-list--dark li { display:flex;gap:12px;align-items:flex-start; }
.kc-sn-check-list--dark .kc-sn-check-item__text { font-size:var(--card-text-lg);color:#e0eaee;line-height:1.5; }
.kc-sn-check-list--dark small { font-size: var(--caption-size);color:#9ab8c2;display:block;margin-top:14px; }

/* Sub-link pill tags (flex row) */
.kc-sn-sublinks { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px; }
.kc-sn-sublinks a { display:inline-block;background:var(--teal-lt);color:var(--teal);font-weight:600;font-size: var(--caption-size);padding:9px 16px;border-radius:8px;text-decoration:none;border:1px solid #c8e4e6; }
.kc-sn-sublinks a:hover { background:#e0f0f4; }

/* Sub-link grid (larger link cards) */
.kc-sn-sublink-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px; }
.kc-sn-sublink-grid a { display:block;background:#f9f9f7;border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--teal);font-weight:600;font-size: var(--card-text);border:1px solid #e0eaec; }

/* Utility inline buttons (for use inside callouts, panels) */
.kc-sn-btn { display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:8px;font-weight:700;font-size:var(--btn-size-sm);text-decoration:none; }
.kc-sn-btn--teal { background:var(--teal);color:#fff; }
.kc-sn-btn--navy { background:var(--navy);color:#fff; }
.kc-sn-btn--yellow { background:var(--yellow);color:var(--text); }
.kc-sn-btn--ghost-teal { background:#fff;color:var(--teal);border:2px solid var(--teal); }
.kc-sn-btn--ghost-navy { background:#fff;color:var(--navy);border:2px solid var(--navy); }
.kc-sn-btn--ghost-light { background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25); }
.kc-sn-btn--lg { padding:14px 32px;font-size:var(--btn-size);border-radius:10px; }

/* Profile card (Meet Our CareGivers) */
.kc-sn-profile-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:56px; }
.kc-sn-profile-card { display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#f9f9f7;border:1px solid #e0eaec;text-decoration:none;color:inherit; }
.kc-sn-profile-card__img { height:240px;overflow:hidden;background:#e8f4f6; }
.kc-sn-profile-card__img img { width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .3s; }
.kc-sn-profile-card:hover .kc-sn-profile-card__img img { transform:scale(1.03); }
.kc-sn-profile-card__body { padding:18px 20px;flex:1;display:flex;flex-direction:column; }
.kc-sn-profile-card__role { font-size:var(--label-size);font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px; }
.kc-sn-profile-card__name,
.kc-body .kc-sn-profile-card__name { font-size: var(--h4-size);font-weight:700;color:var(--navy);margin:0 0 8px;border:none;padding:0; }
.kc-sn-profile-card__text { font-size: var(--caption-size);color:#666;line-height:1.65;margin:0 0 14px;flex:1; }
.kc-sn-profile-card__link { font-size: var(--caption-size);font-weight:600;color:var(--teal); }

/* Stats banner (navy strip with headline stats) */
.kc-sn-stats-banner { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--navy);border-radius:14px;overflow:hidden;margin-bottom:48px; }
.kc-sn-stats-banner__item { padding:22px 24px;border-right:1px solid rgba(255,255,255,.1);text-align:center;display:flex;flex-direction:column;justify-content:center; }
.kc-sn-stats-banner__item:last-child { border-right:none; }
.kc-sn-stats-banner__value { font-size:calc(var(--base-size, 17px) * 1.5294);font-weight:800;color:var(--yellow);margin-bottom:4px;line-height:1.15; }
.kc-sn-stats-banner__label { font-size: var(--caption-size);color:rgba(255,255,255,.7); }

/* Photo with text — real, indexable text laid over a photo (sn_imgtext).
   container-type lets the layer font sizes (cqw) scale with the image width,
   so text keeps its proportions on every screen. */
.kc-sn-imgtext { position:relative;container-type:inline-size;border-radius:14px;overflow:hidden;margin-bottom:48px;line-height:0; }
.kc-sn-imgtext--r16-9 { aspect-ratio:16/9; }
.kc-sn-imgtext--r3-2  { aspect-ratio:3/2; }
.kc-sn-imgtext--r4-3  { aspect-ratio:4/3; }
.kc-sn-imgtext--r1-1  { aspect-ratio:1/1; }
.kc-sn-imgtext__img { display:block;width:100%;height:100%;object-fit:cover; }
/* Cropped frames: the photo is a free-panning/zooming layer (transform set inline). */
.kc-sn-imgtext--r16-9 .kc-sn-imgtext__img,
.kc-sn-imgtext--r3-2  .kc-sn-imgtext__img,
.kc-sn-imgtext--r4-3  .kc-sn-imgtext__img,
.kc-sn-imgtext--r1-1  .kc-sn-imgtext__img {
  position:absolute; left:50%; top:50%;
  width:auto; height:auto; min-width:100%; min-height:100%; max-width:none;
  object-fit:fill; transform-origin:center; transform:translate(-50%,-50%);
}
.kc-sn-imgtext__layer { position:absolute;transform:translate(-50%,-50%);max-width:none;margin:0;font-weight:800;line-height:1.15;text-align:center;white-space:nowrap;font-size:24px; }
.kc-sn-imgtext__layer--white  { color:#fff; }
.kc-sn-imgtext__layer--navy   { color:var(--navy); }
.kc-sn-imgtext__layer--yellow { color:var(--yellow); }
.kc-sn-imgtext__layer--dark   { color:#1a1a1a; }
.kc-sn-imgtext__layer--band-navy,.kc-sn-imgtext__layer--band-yellow,.kc-sn-imgtext__layer--band-white,.kc-sn-imgtext__layer--band-dark { padding:.28em .62em;border-radius:6px; }
.kc-sn-imgtext__layer--band-navy   { background:var(--navy); }
.kc-sn-imgtext__layer--band-yellow { background:var(--yellow); }
.kc-sn-imgtext__layer--band-white  { background:#fff; }
.kc-sn-imgtext__layer--band-dark   { background:#1a1a1a; }
.kc-sn-imgtext__band { position:absolute;transform:translate(-50%,-50%); }
.kc-sn-imgtext__band--navy   { background:var(--navy); }
.kc-sn-imgtext__band--yellow { background:var(--yellow); }
.kc-sn-imgtext__band--white  { background:#fff; }
.kc-sn-imgtext__band--dark   { background:#1a1a1a; }
.kc-sn-imgtext__layer a{color:inherit;text-decoration:underline;text-underline-offset:.12em;background-image:none !important;padding-bottom:0 !important;}
.kc-sn-imgtext__layer a:hover{opacity:.82;}
.kc-sn-imgtext__imglayer { position:absolute;transform:translate(-50%,-50%);height:auto; }

/* Pledge card grid */
.kc-sn-pledge-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:28px;margin-bottom:56px; }

/* Pledge card — teal header variant (CareGivers Pledge page) */
.kc-sn-pledge-card--teal { background:#fff;border-radius:14px;border:1px solid #e0eaec;overflow:hidden; }
/* Pledge card headers align across a row even when a title wraps to two lines.
   Without this, a 2-line title makes its teal header 8px taller than its
   neighbour's and the body text starts out of line. Subgrid lets each card
   share the grid's row tracks, so header and body align regardless of title
   length or the typography settings. Guarded: browsers without subgrid keep
   the previous layout rather than breaking. */
@supports (grid-template-rows: subgrid) {
  .kc-sn-pledge-grid > .kc-sn-pledge-card--teal {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}
.kc-sn-pledge-card--teal .kc-sn-pc-header { background:var(--teal);padding:20px 24px;display:flex;align-items:center;gap:14px; }
.kc-sn-pledge-card--teal .kc-sn-pc-header__icon { width:44px;height:44px;background:rgba(255,255,255,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.kc-sn-pledge-card--teal .kc-sn-pc-header__title,
.kc-body .kc-sn-pledge-card--teal .kc-sn-pc-header__title { font-size: var(--base-size);font-weight:700;color:#fff;margin:0;line-height:1.3;border:none;padding:0; }
.kc-sn-pledge-card--teal .kc-sn-pc-body { padding:22px 24px; }
.kc-sn-pledge-card--teal.kc-sn-pc--full { grid-column:1/-1; }

/* Benefit tile (icon + label, white card) */
.kc-sn-benefit-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:48px; }
.kc-sn-benefit-tile { background:#fff;border:1px solid #e0eaec;border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:12px; }
.kc-sn-benefit-tile__icon { width:32px;height:32px;background:var(--teal-lt);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.kc-sn-benefit-tile__text { font-size: var(--caption-size);font-weight:600;color:var(--navy);line-height:1.4; }
.kc-sn-benefit-tile__sub { font-size:var(--small-print, 12px);color:#666;font-weight:400; }

/* Responsive video embed */
.kc-sn-video { position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:14px;background:#000;margin-bottom:48px; }
.kc-sn-video iframe { position:absolute;top:0;left:0;width:100%;height:100%;border:0; }

/* FAQ <details> accordion (careers — CSS-only, no JS) */
.kc-faq { display:flex;flex-direction:column;gap:12px;margin-bottom:48px; }
.kc-faq-item { background:#fff;border:1px solid #e0eaec;border-radius:12px;overflow:hidden; }
.kc-faq-item summary { padding:18px 22px;font-size:var(--card-text-lg);font-weight:700;color:var(--navy);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.kc-faq-item summary::-webkit-details-marker { display:none; }
.kc-faq-icon { width:22px;height:22px;background:var(--teal-lt);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s; }
.kc-faq-item[open] .kc-faq-icon { transform:rotate(45deg); }
.kc-faq-item__body { padding:18px 22px 20px;font-size:var(--card-text);line-height:1.75;color:#555;border-top:1px solid #f0f4f5; }

/* Navy simple box (no circles — application form page header) */
.kc-sn-navy-box { background:var(--navy);border-radius:16px;padding:36px 40px;margin-bottom:40px; }
.kc-sn-navy-box__label { font-size: var(--caption-size);font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:1px;margin:0 0 8px; }
.kc-sn-navy-box__title,
.kc-body .kc-sn-navy-box__title { font-size:var(--sn-snippet-hero, 28px);font-weight:800;color:#fff;margin:0 0 12px;line-height:1.2;border:none;padding:0; }
.kc-sn-navy-box__text { font-size:var(--body-large, 16px);line-height:1.7;color:#e0eaee;margin:0; }

/* Application form layout */
.kc-sn-apply-layout { display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;margin-bottom:48px; }
.kc-sn-apply-sidebar { flex:0 0 280px;min-width:240px;display:flex;flex-direction:column;gap:18px; }
.kc-sn-apply-main { flex:1;min-width:280px; }
.kc-sn-form-card { background:#fff;border-radius:14px;padding:32px;border:1px solid #e4e4e0;box-shadow:0 2px 16px rgba(0,0,0,.06); }
.kc-sn-form-card__title,
.kc-body .kc-sn-form-card__title { font-size:var(--sn-dark-title, 20px);color:var(--navy);margin:0 0 4px;border:none;padding:0; }
.kc-sn-form-card__sub { font-size:var(--card-text);color:#666;margin:0 0 24px; }
.kc-sn-apply-msg { display:none;border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size: var(--card-text-lg);line-height:1.5; }
.kc-sn-apply-checks { background:#f9f9f7;border-radius:10px;padding:16px 18px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px; }
.kc-sn-apply-checks label { display:flex;gap:12px;align-items:flex-start;cursor:pointer; }
.kc-sn-apply-checks input[type=checkbox] { width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--teal); }
.kc-sn-apply-btn   { background: var(--text);
color: var(--white)!important;
border-color: var(--text);}
.kc-sn-apply-btn:hover { opacity:.9; }
.kc-sn-apply-btn:disabled { opacity:.6;cursor:not-allowed; }
.kc-sn-apply-privacy { font-size:var(--small-print, 12px);color:#999;margin:12px 0 0;text-align:center; }

/* Full-width photo (no caption, used in employer-of-the-year) */
.kc-sn-photo-full { border-radius:16px;overflow:hidden;margin-bottom:48px; }
.kc-sn-photo-full img { width:100%;height:420px;object-fit:cover;object-position:center;display:block; }

/* Portrait photo trio (aspect-ratio: 3/4) */
.kc-sn-photo-trio--portrait figure { aspect-ratio:3/4; }
.kc-sn-photo-trio--portrait img { width:100%;height:100%;object-fit:cover;object-position:top;display:block; }

/* ============================================================
   SHORTCODES — classes for PHP-rendered shortcode output
   ============================================================ */

/* Form wrapper card */
.kc-sn-form-wrap { background:#f9f9f7; border-radius:16px; padding:36px 40px; }
/* Intro + "call us" side by side above the form, so there is less to scroll past to reach it. Falls back to one column when narrow or if only one is present. */
.kc-sn-form-top { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; align-items:stretch; margin-bottom:28px; }
.kc-sn-form-top > .kc-sn-form-intro, .kc-sn-form-top > .kc-sn-form-callus { margin-bottom:0; }
.kc-sn-form-top > .kc-sn-form-callus { display:flex; flex-direction:column; justify-content:center; }

/* Form intro callout (teal-left-border panel above form fields) */
.kc-sn-form-intro { margin-bottom:28px; padding:20px 24px; background:var(--teal-lt); border-radius:12px; border-left:4px solid var(--teal); }
.kc-sn-form-intro__title    { font-size:var(--h4-size); font-weight:700; color:var(--navy); margin:0 0 4px; }
.kc-sn-form-intro__subtitle { font-size:var(--h4-size); font-weight:700; color:var(--navy); margin:0 0 12px; }
.kc-sn-form-intro__body     { font-size:var(--card-text-lg); color:#333; line-height:1.65; margin:0 0 10px; }
.kc-sn-form-intro__small    { font-size:var(--caption-size); color:#555; line-height:1.6; margin:0; }

/* "Rather call us?" block above the contact form */
.kc-sn-form-callus          { text-align:center; margin-bottom:28px; padding:18px 22px; background:#fff; border:1px solid #e0eaec; border-radius:12px; }
.kc-sn-form-callus__title   { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; color:var(--navy); font-size:var(--card-text-lg); margin:0 0 12px; }
.kc-sn-form-callus__ico     { color:var(--teal); flex-shrink:0; }
.kc-sn-form-callus__nums    { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.kc-sn-form-callus__num     { display:inline-flex; flex-direction:column; align-items:center; gap:1px; background:var(--yellow,#fbce3e); border-radius:12px; padding:9px 26px; text-decoration:none; transition:background .15s; }
.kc-sn-form-callus a.kc-sn-form-callus__num { color:#1a3a4a; }
.kc-sn-form-callus__num:hover { background:var(--yellow-dk,#f0be20); }
.kc-sn-form-callus__digits  { font-size:calc(var(--base-size, 17px) * 1.1765); font-weight:800; letter-spacing:.01em; line-height:1.2; }
.kc-sn-form-callus__area    { font-size:var(--small-print, 12px); font-weight:600; color:#5a4d18; }
.kc-sn-form-callus__note    { font-size:var(--caption-size); color:#5f6e73; margin:14px 0 0; }
.kc-sn-form-callus a.kc-sn-form-callus__note-link, .kc-sn-form-callus__note a { color:var(--teal); font-weight:600; }

/* Essential requirements block (bordered white box) */
.kc-sn-form-reqs           { margin-bottom:20px; padding:18px 20px; background:#fff; border:1px solid #e0e0e0; border-radius:10px; }
.kc-sn-form-reqs__title    { font-size:var(--form-label); font-weight:600; color:var(--navy); margin:0 0 14px; }

/* Compact checkbox option (inline preference groups) */
.kc-sn-form-check-opt       { display:flex; align-items:center; gap:8px; font-size:var(--form-label); cursor:pointer; margin-bottom:8px; }
.kc-sn-form-check-opt input { width:16px; height:16px; accent-color:var(--teal); flex-shrink:0; }
/* Horizontal flex row for a small group of checkboxes */
.kc-sn-form-check-row { display:flex; flex-wrap:wrap; gap:20px; }

/* 2-col grid for checkbox preference groups */
.kc-sn-form-check-2col { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }

/* Fine print below form */
.kc-sn-form-small { font-size:var(--small-print, 12px); color:#777; line-height:1.6; margin-bottom:24px; }

/* Message state modifiers */
.kc-sn-form-msg--error   { display:block; background:#fef2f2; color:#b91c1c; }
.kc-sn-form-msg--success { display:block; background:#f0fdf4; color:#15803d; }

/* Form success replacement state */
.kc-sn-form-success        { text-align:center; padding:48px 20px; }
.kc-sn-form-success__icon  { display:block; margin:0 auto 16px; }
.kc-sn-form-success__title { font-size:calc(var(--base-size, 17px) * 1.2353); font-weight:700; color:var(--navy); margin:0 0 10px; }
.kc-sn-form-success__text  { color:#555; font-size:var(--card-text-lg); line-height:1.6; margin:0; }

/* Vacancy shortcode */
.kc-sc-vac-empty   { font-style:italic; color:#777; }
.kc-sc-vac-heading { font-size:calc(var(--base-size, 17px) * 1.4118); color:var(--navy); margin:0 0 20px; }
.kc-sc-vac-grid    { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-bottom:48px; }
.kc-sc-vac-card    { background:#f9f9f7; border-radius:14px; padding:28px; border:1px solid #e8eeed; display:flex; flex-direction:column; }
.kc-sc-vac-label   { font-size:var(--label-size); font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
.kc-sc-vac-title,
.kc-body .kc-sc-vac-title { font-size:var(--sn-dark-title, 20px); color:var(--navy); margin:0 0 12px; }
.kc-sc-vac-desc    { font-size:var(--card-text); line-height:1.7; color:#555; margin:0 0 16px; }
.kc-sc-vac-bullets { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.kc-sc-vac-bullet  { font-size:var(--caption-size); color:#333; display:flex; gap:8px; }
.kc-sc-vac-bullet__check { color:var(--teal); flex-shrink:0; }

.kc-sc-vac-meta    { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 16px; }
.kc-sc-vac-meta__item { display:inline-flex; align-items:center; gap:6px; font-size:var(--caption-size); font-weight:600; color:var(--navy); }
.kc-sc-vac-meta__item svg { flex-shrink:0; color:var(--teal); }

.kc-sc-vac-apply   { background-color: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--btn-size); font-weight: 600; padding: 13px 26px; border-radius: 5px; text-decoration: none; transition: background .18s, border-color .18s; border: 2px solid transparent; line-height: 1; text-align: center; }
.kc-sc-vac-apply:hover { opacity:.88; }

/* Team shortcode */
.kc-sc-team-grid              { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.kc-sc-team-card              { text-decoration:none; color:inherit; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#f9f9f7; border:1px solid #e8eeed; transition:box-shadow .2s; }
.kc-sc-team-card:hover        { box-shadow:0 4px 20px rgba(0,0,0,.1); }
.kc-sc-team-card__photo       { height:220px; overflow:hidden; background:#e8f4f6; }
.kc-sc-team-card__photo img   { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.kc-sc-team-card__avatar      { width:100%; height:100%; background:var(--teal); color:#fff; font-size:calc(var(--base-size, 17px) * 1.6471); font-weight:700; display:none; align-items:center; justify-content:center; }
.kc-sc-team-card__avatar--on  { display:flex; }
.kc-sc-team-card__body        { padding:16px 18px; }
.kc-sc-team-card__name        { font-size:var(--body-large, 16px); font-weight:700; color:var(--navy); margin-bottom:4px; }
.kc-sc-team-card__role        { font-size:var(--caption-size); color:var(--teal); font-weight:500; }
/* Single team member embed — [team id="X"] or [team member="slug"] */
.kc-sc-team-card--single      { display:inline-flex; width:180px; vertical-align:top; }
.kc-sc-team-card--single .kc-sc-team-card__photo { height:200px; }

/* ============================================================
   NEWSLETTER SIGN-UP PAGE — .kc-sn-nl-*
   Two-column: navy pitch panel (left) + white form card (right)
   ============================================================ */
.kc-sn-nl              { display:grid; grid-template-columns:1fr 1fr; border-radius:16px; overflow:hidden; margin-bottom:48px; }
.kc-sn-nl__left        { background:var(--navy); padding:48px 44px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.kc-sn-nl__left::before { content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background:rgba(13,118,128,.18); border-radius:50%; pointer-events:none; }
.kc-sn-nl__inner       { position:relative; z-index:1; }
.kc-sn-nl__badge       { display:inline-block; padding:5px 14px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); border-radius:20px; font-size:var(--small-print, 12px); font-weight:700; color:#fff; letter-spacing:.6px; text-transform:uppercase; margin-bottom:20px; }
.kc-sn-nl__left .kc-sn-nl__title  { margin:0 0 12px; font-size:calc(var(--base-size, 17px) * 1.5294); font-weight:800; color:#fff; line-height:1.25; }
.kc-sn-nl__left .kc-sn-nl__sub    { margin:0 0 24px; font-size: var(--card-text-lg); color:rgba(255,255,255,.8); line-height:1.65; }
.kc-sn-nl__perks       { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.kc-sn-nl__left .kc-sn-nl__perk   { display:flex; align-items:flex-start; gap:10px; font-size: var(--card-text); color:rgba(255,255,255,.9); line-height:1.5; }
.kc-sn-nl__perk-icon   { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.kc-sn-nl__left .kc-sn-nl__trust  { margin:0; font-size:var(--small-print, 12px); color:rgba(255,255,255,.5); }
.kc-sn-nl__right       { background:#fff; padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.kc-sn-nl__form        { display:flex; flex-direction:column; gap:16px; }
.kc-sn-nl__honeypot    { display:none; }
.kc-sn-nl__name-row    { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kc-sn-nl__field       { display:flex; flex-direction:column; }
.kc-sn-nl__label       { font-size: var(--caption-size); font-weight:600; color:var(--navy); margin-bottom:6px; }
.kc-sn-nl__label--req::after { content:' *'; color:#dc2626; }
.kc-sn-nl__input       { width:100%; padding:13px 16px; border:1.5px solid #d0d9dc; border-radius:8px; font-size:var(--form-input); color:var(--text); font-family:inherit; background:#fff; box-sizing:border-box; transition:border-color .15s; }
.kc-sn-nl__input:focus { outline:none; border-color:var(--teal); }
/* Floating labels for the newsletter form (white panel → white notch). */
.kc-sn-nl__field { position:relative; }
.kc-sn-nl__field .kc-sn-nl__input { padding-top:20px; padding-bottom:6px; }
.kc-sn-nl__field .kc-sn-nl__label {
  position:absolute; left:13px; top:14px; margin:0;
  font-weight:400; font-size:var(--form-input); color:#8a9aa0;
  background:transparent; padding:0 5px; pointer-events:none;
  transition:top .15s, font-size .15s, color .15s, font-weight .15s;
}
.kc-sn-nl__input:focus { box-shadow:0 0 0 3px rgba(13,118,128,.13); }
.kc-sn-nl__input:focus + .kc-sn-nl__label,
.kc-sn-nl__input:not(:placeholder-shown) + .kc-sn-nl__label {
  top:-8px; font-size:12.5px; font-weight:600; color:var(--navy); background:#fff;
}
.kc-sn-nl__input:focus + .kc-sn-nl__label { color:var(--teal); }
.kc-sn-nl__consent     { display:flex; align-items:flex-start; gap:10px; font-size: var(--caption-size); color:#555; line-height:1.5; cursor:pointer; }
.kc-sn-nl__consent input { margin-top:2px; accent-color:var(--teal); flex-shrink:0; }
.kc-sn-nl__msg         { display:none; padding:10px 14px; border-radius:8px; font-size: var(--caption-size); }
.kc-sn-nl__msg--error  { display:block; background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.kc-sn-nl__msg--success { display:block; background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.kc-sn-nl__submit      { padding:14px 32px; background:var(--yellow); border:none; border-radius:10px; font-size:var(--btn-size); font-weight:700; color:var(--text); cursor:pointer; font-family:inherit; transition:background .15s; }
.kc-sn-nl__submit:hover { background:var(--yellow-dk); }
.kc-sn-nl__privacy     { margin:0; font-size:var(--small-print, 12px); color:#6f6f6f; line-height:1.5; } /* WCAG AA contrast */
.kc-sn-nl__privacy a   { color:var(--teal); }
@media (max-width: 768px) {
  .kc-sn-nl            { grid-template-columns:1fr; }
  .kc-sn-nl__left      { padding:36px 28px; }
  .kc-sn-nl__right     { padding:32px 28px; }
  .kc-sn-nl__name-row  { grid-template-columns:1fr; }
}

/* ============================================================
   NEWSLETTER SLIM — [newsletter] shortcode (inline / post use)
   ============================================================ */
.kc-nl-slim {
  background: var(--navy);
  border-radius: 14px;
  padding: 28px 32px;
  margin: 36px 0;
}
.kc-nl-slim__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.kc-nl-slim__icon {
  width: 40px;
  height: 40px;
  background: rgba(251,206,62,.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kc-nl-slim__copy { flex: 1; }
.kc-nl-slim__title,
.kc-body .kc-nl-slim__title {
  font-size: var(--base-size, 17px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.3;
}
.kc-nl-slim__sub,
.kc-nl-slim .kc-nl-slim__sub {
  font-size: var(--card-text-lg, 15px);
  color: #fff;
  line-height: 1.5;
  margin: 0;
}
.kc-nl-slim__honeypot { display:none; }
.kc-nl-slim__row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.kc-nl-slim__input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: calc(var(--form-input, 15px) - 1px);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
}
.kc-nl-slim__input::placeholder { color: rgba(255,255,255,.45); }
.kc-nl-slim__input:focus {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
}
.kc-nl-slim__btn {
  padding: 11px 22px;
  background: var(--yellow);
  border: none;
  border-radius: 8px;
  font-size: var(--btn-size-sm);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
  line-height: 1;
}
.kc-nl-slim__btn:hover { background: var(--yellow-dk); }
.kc-nl-slim__btn:disabled { opacity: .6; cursor: default; }
.kc-nl-slim__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--small-print, 12px);
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 10px;
}
.kc-nl-slim__consent input { margin-top: 2px; accent-color: var(--yellow); flex-shrink: 0; }
.kc-nl-slim__consent a { color: rgba(255,255,255,.75); }
.kc-nl-slim__msg { display:none; padding:8px 12px; border-radius:7px; font-size:var(--caption-size, 13px); margin-bottom:10px; }
.kc-nl-slim__msg--error   { display:block; background:rgba(220,38,38,.2); color:#fca5a5; }
.kc-nl-slim__msg--success { display:block; background:rgba(22,163,74,.2); color:#86efac; }
.kc-nl-slim__success {
  text-align: center;
  padding: 8px 0;
}
.kc-nl-slim__success-title {
  font-size: var(--body-large, 16px);
  font-weight: 700;
  color: var(--yellow);
  margin: 0 0 6px;
}
.kc-nl-slim__success-text {
  font-size: var(--card-text, 14px);
  color: rgba(255,255,255,.8);
  margin: 0;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .kc-nl-slim { padding: 24px 20px; }
  .kc-nl-slim__row { flex-direction: column; }
  .kc-nl-slim__btn { width: 100%; padding: 13px; }
}

/* ============================================================
   REVIEWS CAROUSEL — [reviews] shortcode
   ============================================================ */
.kc-reviews-widget        { font-family:inherit; max-width:1100px; margin:0 auto; padding:24px 16px 56px; overflow:hidden; }
.kc-reviews-header        { display:flex; align-items:center; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.kc-reviews-title         { text-align:center; font-size:var(--h3-size); font-weight:700; color:var(--navy); margin:0 0 26px; }
.kc-reviews-stars-large   { color:#f5a623; font-size:calc(var(--base-size, 17px) * 1.6471); letter-spacing:2px; line-height:1; }
.kc-reviews-score         { font-size:calc(var(--base-size, 17px) * 2.1176); font-weight:800; color:var(--navy); line-height:1; }
.kc-reviews-meta          { font-size: var(--card-text); color:#555; line-height:1.5; }
.kc-reviews-meta a        { color:var(--teal); text-decoration:none; font-weight:600; }
.kc-reviews-meta a:hover  { text-decoration:underline; }
.kc-reviews-carousel-wrap { position:relative; padding:0 54px; }
.kc-reviews-track-outer   { overflow:hidden; border-radius:14px; }
.kc-reviews-track         { display:flex; gap:20px; transition:transform .4s cubic-bezier(.4,0,.2,1); }
.kc-review-card           { flex:0 0 auto; width:calc(50% - 10px); background:var(--off-white,#f9f9f7); border-radius:14px; padding:18px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:9px; }
.kc-review-stars          { color:#f5a623; font-size:calc(var(--base-size, 17px) * 1.0588); letter-spacing:1px; }
.kc-review-text           { font-size:var(--card-text-lg); line-height:1.7; color:#333; flex:1; }
.kc-review-text.collapsed { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.kc-review-toggle         { background:none; border:none; color:var(--teal); font-size: var(--caption-size); font-weight:600; cursor:pointer; padding:0; text-align:left; }
.kc-review-footer         { border-top:1px solid #e5e5e0; padding-top:12px; }
.kc-review-name           { font-size: var(--card-text-lg); font-weight:700; color:var(--navy); }
.kc-review-connection     { font-size:var(--caption-size, 13px); color:#666; margin-top:2px; }
.kc-review-date           { font-size:var(--small-print, 12px); color:#6b6b6b; margin-top:4px; }
.kc-reviews-nav           { display:contents; }
.kc-reviews-btn           { width:42px; height:42px; border-radius:50%; border:2px solid var(--teal); background:#fff; color:var(--teal); font-size:calc(var(--btn-size, 15px) + 3px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; line-height:1; }
.kc-reviews-btn:hover     { background:var(--teal); color:#fff; }
.kc-reviews-btn:disabled  { opacity:.3; cursor:default; }
.kc-reviews-btn:disabled:hover { background:#fff; color:var(--teal); }
.kc-reviews-dots          { display:flex; gap:6px; justify-content:center; margin-top:16px; }
/* Carousel arrows sit either side of the cards, vertically centred */
.kc-reviews-btn           { position:absolute; top:50%; transform:translateY(-50%); z-index:5; box-shadow:0 2px 10px rgba(0,0,0,.15); }
#kcPrev                   { left:6px; }
#kcNext                   { right:6px; }
@media (max-width:600px)  { .kc-reviews-carousel-wrap{padding:0 40px} #kcPrev{left:0} #kcNext{right:0} }
.kc-reviews-dot           { width:8px; height:8px; border-radius:50%; background:#ccc; border:none; padding:0; transition:background .2s; }
.kc-reviews-dot.active    { background:var(--teal); }
.kc-reviews-footer-link   { text-align:center; margin-top:32px; }
.kc-reviews-footer-link a { display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--navy); font-weight:700; font-size: var(--card-text-lg); padding:12px 24px; border-radius:8px; text-decoration:none; transition:opacity .2s; line-height:1; }
.kc-reviews-footer-link a:hover { opacity:.85; }
@media (max-width:600px) { .kc-review-card { flex:0 0 100%; } }

/* ============================================================
   SITE SEARCH — trigger button + full-screen overlay
   ============================================================ */

/* Search icon button in header */
.kc-search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.kc-search-trigger:hover {
  background: rgba(0, 0, 0, .06);
  color: var(--text);
}
@media (max-width: 960px) {
  .kc-search-trigger { display: flex; }
}

/* Overlay container — hidden by default */
.kc-search-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 0;
  background: rgba(10, 22, 30, 0.85);
  animation: kc-fade-in .18s ease;
}
.kc-search-overlay[hidden] { display: none; }

/* Backdrop — transparent click-to-close layer behind the panel */
.kc-search-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

@keyframes kc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* White search panel */
.kc-search-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  animation: kc-slide-in .2s ease;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@keyframes kc-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Search field row */
.kc-search-field-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--teal, var(--teal));
  border-radius: 10px;
  padding: 10px 14px;
  background: #f8feff;
  flex-shrink: 0;
}

.kc-search-field-icon {
  color: var(--teal, var(--teal));
  flex-shrink: 0;
}

.kc-search-input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--base-size, 17px);
  font-family: inherit;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.kc-search-input::placeholder { color: #b0bec5; }

/* Remove native clear button on search inputs */
.kc-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.kc-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f0f4f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #777;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.kc-search-close:hover { background: #e0eaec; color: var(--navy); }

/* Category pills */
.kc-search-cats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 16px;
  flex-shrink: 0;
}

.kc-search-cats-label {
  font-size: var(--small-print, 12px);
  font-weight: 600;
  color: #999;
  margin-right: 2px;
  white-space: nowrap;
}

.kc-search-cat {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 20px;
  font-size: var(--small-print, 12px);
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border, #e0eaec);
  background: #f8f8f5;
  color: #555;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.kc-search-cat:hover {
  background: var(--teal-lt);
  border-color: var(--teal);
  color: var(--teal);
}
.kc-search-cat--active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Results list */
.kc-search-results {
  margin-top: 16px;
  overflow-y: auto;
  flex: 1;
}

.kc-search-empty {
  text-align: center;
  padding: 32px 20px;
  color: #999;
  font-size: var(--card-text-lg, 15px);
}

.kc-search-empty svg {
  display: block;
  margin: 0 auto 12px;
  color: #d0d8dc;
}

.kc-search-section {
  font-size: calc(var(--base-size, 17px) * 0.5882);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #bbb;
  padding: 12px 4px 4px;
}
.kc-search-section:first-child { padding-top: 4px; }

.kc-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
}
.kc-search-result:hover,
.kc-search-result.kc-search-focused {
  background: var(--teal-lt);
}

.kc-search-result-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--teal-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--teal);
}
.kc-search-result-icon--post     { background: #fff8e6; color: #b45309; }
.kc-search-result-icon--vacancy  { background: #f0fdf4; color: #16a34a; }
.kc-search-result-icon--team     { background: #f0f4ff; color: #4f46e5; }

.kc-search-result-body { flex: 1; min-width: 0; }

.kc-search-result-title {
  font-size: var(--card-text, 14px);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-search-result-title mark {
  background: #fffbe6;
  border-radius: 2px;
  padding: 0 1px;
  color: inherit;
  font-weight: 700;
}

/* ── Related posts under news articles ─────────────────────── */
.kc-related {
  max-width: var(--max-w);
  margin: 44px auto 56px;
  padding: 0 20px;
}
.kc-related__heading {
  font-size: var(--sn-dark-title, 20px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}
.kc-related__heading::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
  margin-top: 8px;
}
.kc-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
  margin-top: 18px;
}
.kc-related__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--ease), transform var(--ease);
}
.kc-related__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kc-related__img {
  width: 100%;
  /* !important beats the per-image inline aspect-ratio that index.php injects for CLS,
     so every thumbnail in this grid crops to the same shape. */
  aspect-ratio: 16 / 10 !important;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}
.kc-related__card:hover .kc-related__img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .kc-related__img { transition: none; }
  .kc-related__card:hover .kc-related__img { transform: none; }
}
.kc-related__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-lt);
  color: var(--teal);
}
.kc-related__body {
  display: block;
  padding: 14px 16px 16px;
}
.kc-related__date {
  display: block;
  font-size: var(--caption-size);
  color: var(--muted);
  margin-bottom: 4px;
}
.kc-related__title {
  display: block;
  font-size: var(--card-text-lg);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.kc-related__card:hover .kc-related__title { color: var(--teal); }
.kc-related__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: var(--card-text-sm, .9rem);
  line-height: 1.5;
  color: var(--muted);
}

.kc-search-result-excerpt {
  font-size: var(--small-print, 12px);
  color: #6f6f6f; /* WCAG AA contrast */
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-search-result-meta {
  font-size: var(--label-size, 11px);
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-lt);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.kc-search-result-meta--post    { color: #b45309; background: #fff8e6; }
.kc-search-result-meta--vacancy { color: #16a34a; background: #f0fdf4; }
.kc-search-result-meta--team    { color: #4f46e5; background: #f0f4ff; }

.kc-search-result-arrow {
  color: #ccc;
  flex-shrink: 0;
  transition: color .12s, transform .12s;
}
.kc-search-result:hover .kc-search-result-arrow {
  color: var(--teal);
  transform: translateX(3px);
}

/* Idle state (no query entered yet) */
.kc-search-idle {
  text-align: center;
  padding: 28px 20px;
  color: #aaa;
  font-size: var(--card-text, 14px);
  line-height: 1.7;
}

/* Lock body scroll when overlay open */
body.kc-search-open { overflow: hidden; }

@media (max-width: 600px) {
  .kc-search-overlay { padding-top: 0; padding-left: 0; padding-right: 0; align-items: flex-start; }
  .kc-search-panel { border-radius: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Care quiz  ([care-quiz] shortcode — logic in site.js)
───────────────────────────────────────────────────────────── */
.kc-quiz {
  background: #fff;
  border: 1px solid #e0eaec;
  border-radius: 16px;
  padding: 36px 40px 32px;
  margin-bottom: 48px;
}
.kc-quiz-badge {
  display: inline-block;
  padding: 5px 14px;
  background: var(--yellow);
  border-radius: 20px;
  font-size: var(--small-print, 12px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kc-quiz-title { font-size: calc(var(--base-size, 17px) * 1.4118); font-weight: 800; color: var(--navy); margin: 0 0 10px; line-height: 1.25; }
.kc-quiz-sub   { font-size: var(--card-text-lg); color: #666; line-height: 1.7; margin: 0 0 22px; }
.kc-quiz-progress {
  height: 6px;
  background: var(--teal-lt);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 26px;
}
.kc-quiz-progress__bar {
  height: 100%;
  width: 0;
  background: var(--teal);
  border-radius: 3px;
  transition: width .25s ease;
}
.kc-quiz-q    { font-size: var(--h4-size); font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.kc-quiz-note { font-size: var(--caption-size); color: #888; margin: 0 0 14px; }
.kc-quiz-opts {
  /* Two tidy columns at full width, stacking on narrow screens */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 22px;
}
@media (max-width: 680px) {
  .kc-quiz-opts { grid-template-columns: 1fr; }
}
.kc-quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #f9f9f7;
  border: 2px solid #e0eaec;
  border-radius: 12px;
  font-size: var(--card-text-lg, 15px);
  color: #444;
  line-height: 1.5;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.kc-quiz-opt:hover { border-color: var(--teal); background: #fff; }
.kc-quiz-opt--on   { border-color: var(--teal); background: var(--teal-lt); color: var(--navy); font-weight: 600; }
.kc-quiz-opt__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 2px solid #c9d8db;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.kc-quiz-opt--on .kc-quiz-opt__check { border-color: var(--teal); background: var(--teal); }
.kc-quiz-opt--on .kc-quiz-opt__check::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.kc-quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kc-quiz-back {
  background: none;
  border: none;
  color: #666;
  font-size: var(--btn-size-sm, 14px);
  cursor: pointer;
  padding: 10px 6px;
  font-family: inherit;
}
.kc-quiz-back:hover { color: var(--navy); }
.kc-quiz-hint { font-size: var(--caption-size); color: #aaa; }
.kc-quiz-next {
  padding: 12px 26px;
  background: var(--yellow);
  border: none;
  border-radius: 10px;
  font-size: var(--btn-size, 15px);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.kc-quiz-next:hover { background: var(--yellow-dk); }
.kc-quiz-next:disabled { opacity: .45; cursor: not-allowed; }
.kc-quiz-result__kicker {
  font-size: var(--small-print, 12px);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 8px;
}
.kc-quiz-result__title { font-size: calc(var(--base-size, 17px) * 1.5294); font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.kc-quiz-result__blurb { font-size: var(--card-text-lg); color: #444; line-height: 1.75; margin: 0 0 20px; }
.kc-quiz-result__ctas  { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kc-quiz-result__go {
  display: inline-block;
  padding: 13px 26px;
  background: var(--yellow);
  color: var(--text);
  font-weight: 700;
  font-size: var(--btn-size, 15px);
  border-radius: 10px;
  text-decoration: none;
}
.kc-quiz-result__go:hover { background: var(--yellow-dk); }
.kc-quiz-result__read {
  display: inline-block;
  padding: 13px 26px;
  background: var(--teal-lt);
  color: var(--teal);
  font-weight: 700;
  font-size: var(--btn-size, 15px);
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #cfe4e6;
}
.kc-quiz-result__urgency { font-size: var(--card-text); color: #666; margin: 0 0 6px; }
.kc-quiz-result__also    { font-size: var(--card-text); color: #666; margin: 0 0 14px; }
.kc-quiz-result__also a  { color: var(--teal); font-weight: 600; }
.kc-quiz-result__guides {
  background: var(--teal-lt);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 16px;
}
.kc-quiz-result__guides-title {
  font-size: var(--small-print, 12px);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 10px;
}
.kc-quiz-result__guides ul { list-style: none; margin: 0; padding: 0; }
.kc-quiz-result__guides li,
.kc-body .kc-quiz-result__guides li {
  font-size: var(--card-text, 14px);
  color: #555;
  line-height: 1.6;
  padding-left: 0;
  margin-bottom: 8px;
}
.kc-quiz-result__guides li::before,
.kc-body .kc-quiz-result__guides li::before { content: none; display: none; }
.kc-quiz-result__guides li:last-child { margin-bottom: 0; }
.kc-quiz-result__guides a { color: var(--teal); font-weight: 700; }
.kc-quiz-result__small   { font-size: var(--small-print, 12px); color: #999; line-height: 1.7; margin: 0; border-top: 1px solid #f0f0ec; padding-top: 14px; }
.kc-quiz-restart {
  background: none;
  border: none;
  color: var(--teal);
  font-size: var(--small-print, 12px);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
}
/* The quiz renders inside .kc-body, whose animated-underline link rule
   (.kc-body a:not(...)) outguns the CTA classes — it re-colours the text,
   adds the gradient underline, and crushes padding-bottom to 1px. Same
   neutralising pattern as .kc-hp-svc-card. */
.kc-body a.kc-quiz-result__go,
.kc-body a.kc-quiz-result__read {
  background-image: none;
  padding-bottom: 13px;
}
.kc-body a.kc-quiz-result__go        { color: var(--text); }
.kc-body a.kc-quiz-result__go:hover  { color: var(--text); background-size: unset; }
.kc-body a.kc-quiz-result__read:hover { color: var(--teal-dk); background-size: unset; }
@media (max-width: 600px) {
  .kc-quiz { padding: 24px 20px; }
  .kc-quiz-title { font-size: calc(var(--base-size, 17px) * 1.1765); }
} 
/* ── Dropdown link descriptions ─────────────────────────────────────────
   Optional small line under a menu link, set per item in
   Admin → Navigation. Rendered by nav_link_inner() in index.php. */
.kc-dd-label { display: block; }
.kc-dd-desc {
  display: block;
  white-space: normal;
  max-width: 250px;
  margin-top: 2px;
  font-size: var(--small-print, 12px);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  color: var(--muted);
}
.kc-dropdown li a:hover .kc-dd-desc,
.kc-subdropdown li a:hover .kc-dd-desc { color: var(--text); }

@media (max-width: 960px) {
  .kc-dd-desc { font-size: calc(var(--small-print, 12px) - 1px); max-width: none; }
}

/* ── Two-column dropdowns ───────────────────────────────────────────────
   Added automatically by build_nav_html() when a dropdown has 8+ links,
   so long menus (Care at Home, Home Help, Careers) stay on screen even
   with descriptions. First link (the "All …" overview) spans both
   columns as a header row. */
.kc-dropdown--wide {
  min-width: 560px;
  column-count: 2;
  column-gap: 10px;
  padding: 10px 8px 8px;
}
.kc-dropdown--wide > li { break-inside: avoid; }
/* Right-edge items (e.g. Careers): open leftwards so the wide panel
   never spills off the viewport */
.kc-nav-item:nth-last-child(-n+2) .kc-dropdown--wide { left: auto; right: 0; }

@media (max-width: 960px) {
  .kc-dropdown--wide {
    column-count: 1;
    min-width: 0;
    padding: 0 0 0 16px;
  }
  .kc-dropdown--wide > li:first-child { column-span: none; border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
}

/* Editor-chosen column break: "Starts a new column" checkbox in
   Admin → Navigation. Forces the second column to begin at this item.
   No effect in single-column menus. */
.kc-dropdown--wide > li.kc-col-break {
  break-before: column;
  -webkit-column-break-before: always;
}
@media (max-width: 960px) {
  .kc-dropdown--wide > li.kc-col-break {
    break-before: auto;
    -webkit-column-break-before: auto;
  }
}

/* Wide flyout: a two-column sub-menu (e.g. Home Help). Safe because a flyout
   holds only leaf links, with no further pop-outs to break. */
.kc-subdropdown--wide {
  min-width: 440px;
  column-count: 2;
  column-gap: 8px;
}
.kc-subdropdown--wide > li { break-inside: avoid; }
.kc-subdropdown--wide > li.kc-col-break {
  break-before: column;
  -webkit-column-break-before: always;
}
@media (max-width: 960px) {
  .kc-subdropdown--wide { column-count: 1; min-width: 0; }
  .kc-subdropdown--wide > li.kc-col-break {
    break-before: auto;
    -webkit-column-break-before: auto;
  }
}

/* ── Printable guides ───────────────────────────────────────────────────
   Guide pages (under /care-guides in the nav) get a "Print this guide"
   button — kc_print_elements() in index.php — and every page prints
   ink-friendly: chrome hidden, navy blocks flattened to black-on-white. */
.kc-print-bar { display: flex; justify-content: flex-end; margin: 0 0 18px; }
/* Print button in the section sidebar: full-width, sits under the heading */
.kc-snav-print { margin: 0 0 14px; }
.kc-snav-print .kc-print-btn { width: 100%; justify-content: center; }
.kc-print-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--btn-size-sm, 14px); font-weight: 600;
  color: var(--navy); cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.kc-print-btn:hover { background: var(--yellow); border-color: var(--yellow); }
.kc-print-footer { display: none; }

@page { margin: 16mm; }

@media print {
  /* Site chrome, interactive and sticky elements: gone */
  .kc-topbar, .kc-header, .kc-footer, .kc-section-nav, .kc-print-bar,
  #kc-admin-bar, #kc-cookie-banner, #kc-chat-btn, #kc-chat-fab, #kc-chat-panel,
  #kc-search-overlay, #kc-brochure-modal,
  .kc-burger, .kc-nav-close, .kc-sn-cta, .kc-quiz { display: none !important; }

  body { background: #fff !important; color: #000; }
  .kc-main { padding: 0; max-width: none; }
  .kc-page-with-sidebar { display: block; }
  .kc-page-body { max-width: none !important; }

  /* Page hero: keep the title, drop the artwork */
  .kc-page-hero, .kc-page-hero--image { background: none !important; min-height: 0; padding: 0 0 4mm; }
  .kc-page-hero__bg, .kc-page-hero-overlay { display: none !important; }
  .kc-page-hero h1 { color: #000 !important; text-shadow: none; }

  /* Snippet blocks: flatten to black-on-white */
  .kc-sn-hero { background: none !important; padding: 0 0 4mm; }
  .kc-sn-hero::before, .kc-sn-hero::after { display: none !important; }
  .kc-sn-hero__title { color: #000 !important; }
  .kc-sn-hero__sub   { color: #333 !important; }
  .kc-sn-hero__badge { background: none !important; border: 1px solid #000; color: #000 !important; }
  .kc-sn-navy-panel, .kc-sn-navy-box, .kc-sn-stats-banner { background: none !important; border: 1px solid #999; }
  .kc-sn-navy-panel *, .kc-sn-navy-box *, .kc-sn-stats-banner * { color: #000 !important; }

  /* Keep cards and steps whole across page breaks */
  .kc-sn-callout, .kc-sn-feature-card, .kc-sn-step, .kc-sn-check-item,
  .kc-acc-item, .kc-faq-item { break-inside: avoid; }

  /* FAQ accordions: print every answer expanded */
  .kc-acc-panel { max-height: none !important; display: block !important; }
  .kc-faq-item[open], .kc-faq-item { display: block; }
  .kc-faq-item .kc-faq-item__body { display: block !important; }

  /* Links: plain black underline, no gradient effects */
  .kc-body a { color: #000 !important; background: none !important; text-decoration: underline; }

  .kc-print-footer {
    display: block;
    margin-top: 10mm; padding-top: 3mm;
    border-top: 1px solid #000;
    font-size: 11px; color: #000;
  }
}

/* ── Branded print letterhead ───────────────────────────────────────────
   Emitted by kc_print_elements() on guide pages: logo + contact line
   over a yellow brand rule. Hidden on screen, shown only on paper. */
.kc-print-head { display: none; }

@media print {
  .kc-print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 5mm;
    margin-bottom: 7mm;
    border-bottom: 3px solid var(--yellow);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* .kc-body img (specificity 0,1,1) beats a single class — must out-specify it */
  .kc-body .kc-print-head__logo { height: 40px; width: auto; max-width: 200px; border-radius: 0; margin: 0; }
  .kc-print-head__name {
    font-size: 24px; font-weight: 800; letter-spacing: .04em;
    color: var(--navy);
  }
  .kc-print-head__contact {
    font-size: 12px; font-weight: 600; line-height: 1.6;
    color: var(--navy); text-align: right;
  }

  /* Brand the type: navy headings rather than flat black */
  .kc-page-hero h1, .kc-sn-hero__title,
  .kc-body h1, .kc-body h2, .kc-body h3,
  .kc-sn-section-title { color: var(--navy) !important; }
  .kc-sn-hero__badge { border-color: var(--navy); color: var(--navy) !important; }

  /* Teal accents survive via borders (backgrounds don't print) */
  .kc-sn-callout { border-left: 4px solid var(--teal); }

  /* Footer joins the letterhead: yellow rule, navy text */
  .kc-print-footer {
    border-top: 3px solid var(--yellow) !important;
    color: var(--navy) !important;
    font-weight: 600;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media print {
  /* The letterhead must be the first thing on the page — when present,
     drop the page-title hero above it (the guide's own styled title
     inside the content serves as the heading). */
  body:has(.kc-print-head) .kc-page-hero { display: none !important; }
}

/* ===== Block builder (compiled post/page blocks) ===== */
.kc-blk { margin: 0 0 34px; }
.kc-blk:last-child { margin-bottom: 0; }
.kc-blk-fullimg img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 0 auto; }
.kc-blk-btnwrap--center { text-align: center; }
.kc-blk-imgtext { display: grid; gap: 30px; align-items: center; }
.kc-blk-imgtext--vtop { align-items: start; }
.kc-blk-imgtext--vmiddle { align-items: center; }
.kc-blk-imgtext--vbottom { align-items: end; }
.kc-blk-imgtext__media img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.kc-blk-imgtext--half { grid-template-columns: 1fr 1fr; }
.kc-blk-imgtext--third { grid-template-columns: 1fr 2fr; }
.kc-blk-imgtext--half.kc-blk-imgtext--right .kc-blk-imgtext__media { order: 2; }
.kc-blk-imgtext--third.kc-blk-imgtext--right { grid-template-columns: 2fr 1fr; }
.kc-blk-imgtext--third.kc-blk-imgtext--right .kc-blk-imgtext__media { order: 2; }
.kc-blk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.kc-blk-gallery--grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kc-blk-gallery--grid .kc-blk-gallery__item { flex: 1 1 170px; max-width: 220px; }
.kc-blk-gallery--grid .kc-blk-gallery__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
/* Gallery lightbox: click a gallery image to view it larger, click anywhere (or Esc) to close */
.kc-blk-gallery img { cursor: zoom-in; }

/* External links (added automatically to links pointing off-site) get a small
   "opens in a new tab" icon so people know before they click. */
.kc-extlink::after {
  content: "";
  display: inline-block;
  width: .72em;
  height: .72em;
  margin-left: .28em;
  vertical-align: -0.05em;
  background-color: currentColor;
  opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'/%3E%3Cpolyline%20points='15%203%2021%203%2021%209'/%3E%3Cline%20x1='10'%20y1='14'%20x2='21'%20y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'/%3E%3Cpolyline%20points='15%203%2021%203%2021%209'/%3E%3Cline%20x1='10'%20y1='14'%20x2='21'%20y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kc-extlink:has(img)::after { content: none; }
.kc-lightbox { position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.kc-lightbox.kc-lightbox--on { display: flex; }
.kc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.55); }
.kc-blk-gallery--masonry { column-count: 3; column-gap: 12px; }
.kc-blk-gallery--masonry .kc-blk-gallery__item { break-inside: avoid; margin-bottom: 12px; }
.kc-blk-gallery--masonry .kc-blk-gallery__item img { width: 100%; height: auto; border-radius: 10px; display: block; }
@media (max-width: 760px) { .kc-blk-gallery--masonry { column-count: 2; } }
.kc-blk-video__frame { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.kc-blk-video__frame iframe, .kc-blk-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kc-blk-file { display: inline-flex; align-items: center; gap: 14px; background: #f0f8f8; border: 1px solid #d6eaec; border-radius: 12px; padding: 16px 20px; text-decoration: none; color: #1a3a4a; }
.kc-blk-file:hover { background: #e2f1ec; }
.kc-blk-file__ic { width: 40px; height: 40px; border-radius: 10px; background: #0d7680; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kc-blk-file__t { display: flex; flex-direction: column; } .kc-blk-file__t strong { font-size: var(--card-text-lg, 15px); } .kc-blk-file__t small { font-size: var(--small-print, 12px); color: #6b7b80; }
hr.kc-blk-hr { border: 0; border-top: 1px solid #e0eaec; }
@media (max-width: 640px) {
  .kc-blk-imgtext, .kc-blk-imgtext--half, .kc-blk-imgtext--third,
  .kc-blk-imgtext--third.kc-blk-imgtext--right, .kc-blk-cols { grid-template-columns: 1fr; }
  .kc-blk-imgtext--right .kc-blk-imgtext__media { order: 0 !important; }
}

/* ===== Post tag chips (link to /news/tag/{slug}) ===== */
.kc-post-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 30px; }
.kc-post-tags__label { font-size:var(--caption-size, 13px); font-weight:700; color:#1a3a4a; margin-right:2px; }
.kc-tag-chip { display:inline-block; padding:5px 12px; background:#f0f8f8; border:1px solid #d3e6e8; border-radius:999px; font-size:var(--caption-size, 13px); font-weight:600; color:#0d7680; text-decoration:none; transition:background .15s, border-color .15s, color .15s; }
.kc-tag-chip:hover, .kc-tag-chip:focus { background:#0d7680; border-color:#0d7680; color:#fff; }
/* Share this — social share row under a news/event post */
.kc-share { margin:34px 0 6px; padding-top:24px; border-top:1px solid var(--border, #e0eaec); }
.kc-share__label { font-size:15px; font-weight:700; color:var(--navy, #1a3a4a); margin:0 0 12px; }
.kc-share__row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.kc-share__btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%; border:1.5px solid var(--border, #e0eaec); background:#fff; color:var(--teal, #0d7680); cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, color .15s, transform .08s; }
.kc-share__btn:hover { background:var(--teal, #0d7680); border-color:var(--teal, #0d7680); color:#fff; }
.kc-share__btn:active { transform:scale(.94); }
.kc-share__btn:focus-visible { outline:2px solid var(--teal, #0d7680); outline-offset:2px; }
.kc-share__copied { font-size:13px; font-weight:600; color:var(--teal, #0d7680); opacity:0; transition:opacity .2s; }
.kc-share__copied.show { opacity:1; }

/* End-of-post: one tidy row — tags left, compact share right. */
.kc-post-footer-bar { display:flex; align-items:center; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; margin:30px 0 0; padding-top:16px; border-top:1px solid var(--border, #e0eaec); }
.kc-post-footer-bar .kc-post-tags { margin:0; }
.kc-share--inline { margin:0; padding-top:0; border-top:none; display:flex; align-items:center; gap:10px; }
.kc-share--inline .kc-share__label { font-size:13px; font-weight:600; color:var(--muted, #666); margin:0; }
.kc-share--inline .kc-share__row { gap:7px; }
.kc-share--inline .kc-share__btn { width:34px; height:34px; border-width:1px; }
.kc-share--inline .kc-share__btn svg { width:16px; height:16px; }

/* Slim teal call-to-action band at the end of a post. */
.kc-post-cta { display:flex; align-items:center; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; background:var(--teal-lt, #f0f8f8); border-left:4px solid var(--teal, #0d7680); border-radius:0 12px 12px 0; padding:18px 22px; margin:22px 0 4px; }
.kc-post-cta__text { min-width:0; }
.kc-post-cta__head { font-size:17px; font-weight:700; color:var(--navy, #1a3a4a); margin:0 0 3px; }
.kc-post-cta__sub { font-size:14px; color:#555; line-height:1.5; margin:0; }
.kc-post-cta__btn { display:inline-block; padding:11px 24px; background:var(--yellow, #fbce3e); color:#1a1a1a; font-weight:700; font-size:14px; border-radius:10px; text-decoration:none; white-space:nowrap; transition:background .15s, transform .08s; }
.kc-post-cta__btn:hover { background:var(--yellow-dk, #f5c420); }
.kc-post-cta__btn:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) { .kc-post-cta__btn { transition:none; } .kc-post-cta__btn:active { transform:none; } }

/* ===== Smart 404 suggestions ===== */
.kc-404-suggest { max-width:520px; margin:36px auto 0; text-align:left; }
.kc-404-suggest > h2 { font-size:var(--body-large, 16px); font-weight:700; color:#1a3a4a; margin:0 0 14px; text-align:center; }
.kc-404-list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; }
.kc-404-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#f9f9f7; border:1px solid #e0eaec; border-radius:10px; padding:11px 14px; }
.kc-404-list a { color:#0d7680; font-weight:600; text-decoration:none; }
.kc-404-list a:hover { text-decoration:underline; }

/* ============================================================
   DELIGHT — gentle micro-interactions
   ============================================================ */

/* Card lift: bring the card families that had no hover up to the same soft
   rise the service cards already use, so every card feels responsive. */
.kc-sn-icon-card,
.kc-sn-trait-card,
.kc-review-card { transition: box-shadow .2s ease, transform .15s ease; }
.kc-sn-icon-card:hover,
.kc-sn-trait-card:hover,
.kc-review-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09); transform: translateY(-3px); }

/* Form success: a warm rise-in with the tick popping, shared by every form. */
@keyframes kc-success-rise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes kc-success-pop {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.kc-sn-form-success,
.kc-sn-nl__success,
.kc-nl-slim__success { animation: kc-success-rise .5s ease backwards; }
.kc-sn-form-success__icon,
.kc-sn-nl__success-icon { animation: kc-success-pop .45s ease-out .1s backwards; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .kc-sn-icon-card:hover,
  .kc-sn-trait-card:hover,
  .kc-review-card:hover { transform: none; }
  .kc-sn-form-success,
  .kc-sn-nl__success,
  .kc-nl-slim__success,
  .kc-sn-form-success__icon,
  .kc-sn-nl__success-icon { animation: none; }
}
.kc-404-type { font-size:var(--label-size, 11px); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#8a9aa0; background:#eef3f4; border-radius:999px; padding:2px 9px; flex-shrink:0; }
.kc-404-search-wrap { text-align:center; margin:0; }
.kc-404-search { color:#0d7680; font-weight:600; text-decoration:none; }
.kc-404-search:hover { text-decoration:underline; }

/* ===== Branded 404 fallback ===== */
.kc-404-body { padding-top:6px; }
.kc-404-eyebrow { font-size:var(--caption-size, 13px); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#0d7680; margin:0 0 10px; }
.kc-404-lead { font-size:calc(var(--base-size, 17px) + 1px); color:#505050; margin:0 0 26px; }

/* Keep 404 suggestions clean inside .kc-body — no tick bullets or heading accent bar */
.kc-body .kc-404-suggest h2 { padding-left:0; border-left:0; margin:0 0 14px; text-align:center; }
.kc-body .kc-404-list { margin:0 0 18px; }
.kc-body .kc-404-list li { display:flex; align-items:center; gap:12px; padding-left:0; margin-bottom:8px; }
.kc-body .kc-404-list li::before { content:none; display:none; }

/* 404 fallback — centre the content column and show a large 404 numeral */
.kc-404-body { max-width:640px; margin-left:auto; margin-right:auto; }
.kc-404-code { font-size:clamp(calc(var(--base-size, 17px) * 4.2353), 14vw, calc(var(--base-size, 17px) * 7.7647)); font-weight:800; line-height:1; letter-spacing:-.03em; color:#1a3a4a; margin:0 0 6px; }

/* ---------------------------------------------------------------------------
   Icon library — see config/icons.php
   Emitted by kc_icon() in templates and by the [icon name="…"] shortcode in
   content. Sized in em so an icon always tracks the text it sits beside, which
   keeps it correct as the typography settings change. Colour comes from
   currentColor, so an icon inherits its parent's colour with no extra rules.
   --------------------------------------------------------------------------- */
.kc-ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  stroke: currentColor;
}
/* healthicons entries are filled shapes, so the base stroke must not apply. */
.kc-ic--filled { stroke: none; fill: currentColor; }
.kc-ic--sm { width: .85em; height: .85em; }
.kc-ic--lg { width: 1.4em; height: 1.4em; }
.kc-ic--xl { width: 2em;   height: 2em;   }
/* Nudge an icon away from adjacent label text without needing a wrapper. */
.kc-ic--before { margin-right: .45em; }
.kc-ic--after  { margin-left:  .35em; }

/* Icon wrappers -----------------------------------------------------------
   Inline SVGs used to carry their own stroke colour and pixel size. Icons from
   the library inherit colour via currentColor and size from these rules, so
   each wrapper now states both. Three of these had no colour rule at all, which
   is why their white icons would otherwise have turned dark on migration.
   Migrated icons keep an explicit size attribute (sizes were never uniform
   within a wrapper); these width/height values apply to icons inserted from the
   picker, which carry no size of their own.
   ------------------------------------------------------------------------- */
.kc-hp-svc-icon                { color: var(--text); }
.kc-hp-svc-icon .kc-ic         { width: 28px; height: 28px; }
.kc-sn-icon-card__icon         { color: #fff; }
.kc-sn-icon-card__icon .kc-ic  { width: 18px; height: 18px; }
.kc-sn-check-item__icon        { color: var(--teal); }
.kc-sn-check-item__icon .kc-ic { width: 13px; height: 13px; }
.kc-sn-feature-card__icon-wrap        { color: var(--teal); }
.kc-sn-feature-card__icon-wrap .kc-ic { width: 18px; height: 18px; }
.kc-sn-pc-header__icon         { color: #fff; }
.kc-sn-pc-header__icon .kc-ic  { width: 24px; height: 24px; }

/* Image + text with a cropped photo — matches the old .kc-sn-intro sections,
   which capped the image height and cropped to fill rather than letting a tall
   portrait photo set the height of the whole band. */
.kc-blk-imgtext--crop .kc-blk-imgtext__media img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

/* Emphasis and links on dark surfaces --------------------------------------
   .kc-body strong is near-black and .kc-body a is teal — both nearly invisible
   on a navy or teal panel. Only surfaces that carry editor-written prose are
   listed here; badges, buttons and icon tiles never contain body copy.
   -------------------------------------------------------------------------- */
.kc-body .kc-sn-dark-panel strong,  .kc-body .kc-sn-dark-panel b,
.kc-body .kc-sn-navy-panel strong,  .kc-body .kc-sn-navy-panel b,
.kc-body .kc-sn-navy-box strong,    .kc-body .kc-sn-navy-box b,
.kc-body .kc-sn-hero strong,        .kc-body .kc-sn-hero b,
.kc-body .kc-sn-cta--navy strong,   .kc-body .kc-sn-cta--navy b,
.kc-body .kc-sn-stats-banner strong,.kc-body .kc-sn-stats-banner b,
.kc-body .kc-sn-nl__left strong,    .kc-body .kc-sn-nl__left b {
  color: #fff;
}

/* Links on the same surfaces. !important is needed because the base link rule
   carries eight :not() exclusions, which makes its specificity far higher than
   any sane descendant selector could reach. Yellow on navy is the brand accent
   and reads clearly; the hover swipe still works. */
.kc-body .kc-sn-dark-panel a,
.kc-body .kc-sn-navy-panel a,
.kc-body .kc-sn-navy-box a,
.kc-body .kc-sn-hero a,
.kc-body .kc-sn-cta--navy a,
.kc-body .kc-sn-stats-banner a,
.kc-body .kc-sn-nl__left a {
  color: var(--yellow) !important;
}
.kc-body .kc-sn-dark-panel a:hover,
.kc-body .kc-sn-navy-panel a:hover,
.kc-body .kc-sn-navy-box a:hover,
.kc-body .kc-sn-hero a:hover,
.kc-body .kc-sn-cta--navy a:hover,
.kc-body .kc-sn-stats-banner a:hover,
.kc-body .kc-sn-nl__left a:hover {
  color: #fff !important;
}
/* …but not the buttons inside a navy CTA, which have their own colours. */
.kc-body .kc-sn-cta--navy a.kc-sn-cta__btn,
.kc-body .kc-sn-cta--navy a.kc-hp-btn {
  color: inherit !important;
}
/* …and not button-style links (a form-submit or pill button) that sit on ANY
   dark surface: they carry their own yellow background, so the recolour above
   would paint yellow text on a yellow button — invisible. Keep their own dark
   text. Specificity (0,3,1) + !important beats the (0,2,1) recolour rule. */
.kc-body .kc-sn-dark-panel a.kc-sn-form-submit,
.kc-body .kc-sn-navy-panel a.kc-sn-form-submit,
.kc-body .kc-sn-navy-box a.kc-sn-form-submit,
.kc-body .kc-sn-hero a.kc-sn-form-submit,
.kc-body .kc-sn-stats-banner a.kc-sn-form-submit,
.kc-body .kc-sn-dark-panel a.kc-hp-btn,
.kc-body .kc-sn-navy-panel a.kc-hp-btn,
.kc-body .kc-sn-navy-box a.kc-hp-btn,
.kc-body .kc-sn-hero a.kc-hp-btn,
.kc-body .kc-sn-stats-banner a.kc-hp-btn {
  color: var(--text) !important;
}

/* ── Local-authority finder (Care Needs Assessment · local councils) ─────────
   Filterable list of councils + a postcode/town search box. JS in site.js
   (keyed on #kc-la-finder; no-ops on pages without it). */
.kc-la-finder-wrap { margin: 0 0 24px; }
.kc-la-finder__label {
  display: block; font-weight: 700; color: var(--navy);
  font-size: var(--card-text-lg, 15px); margin: 0 0 8px;
}
.kc-la-finder {
  width: 100%; box-sizing: border-box; padding: 13px 16px;
  font-size: 16px; font-family: inherit; color: var(--text, #1a1a1a);
  background: #fff; border: 2px solid var(--border, #e0eaec);
  border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.kc-la-finder::placeholder { color: #9aa7ab; }
.kc-la-finder:focus {
  outline: none; border-color: var(--teal, #0d7680);
  box-shadow: 0 0 0 3px rgba(13,118,128,.15);
}
.kc-la-finder__help {
  font-size: var(--card-text, 14px); color: #666; line-height: 1.6; margin: 8px 0 0;
}
.kc-la-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin: 0 0 24px;
}
.kc-la-card {
  background: #fff; border: 1px solid var(--border, #e0eaec);
  border-left: 4px solid var(--teal, #0d7680); border-radius: 12px;
  padding: 20px 22px;
}
.kc-la-card.kc-la-hidden { display: none; }
.kc-la-card__name,
.kc-body .kc-la-card__name {
  font-size: var(--body-large, 16px); font-weight: 700;
  color: var(--navy); margin: 0 0 6px;
}
.kc-la-card__note {
  font-size: var(--caption-size, 13px); font-weight: 600;
  color: var(--teal); margin: 0 0 8px;
}
.kc-la-card__area {
  font-size: var(--card-text, 14px); color: #666; line-height: 1.6; margin: 0 0 14px;
}
.kc-la-card__contact {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
}
.kc-la-card__phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--card-text-lg, 15px); font-weight: 700;
  color: var(--navy); text-decoration: none;
}
.kc-la-card__phone:hover { color: var(--teal); }
.kc-la-card__phone .kc-ic { color: var(--teal); flex-shrink: 0; }
.kc-la-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--card-text, 14px); font-weight: 600;
}
.kc-la-nomatch,
.kc-body .kc-la-nomatch {
  background: #fff7e6; border: 1px solid #f5e0a3; border-radius: 12px;
  padding: 14px 18px; margin: 0 0 20px;
  font-size: var(--card-text-lg, 15px); color: var(--navy); line-height: 1.6;
}

/* ── UK-wide authority directory (A–Z, name-searchable) ──────────────────────
   Used on the care-needs-assessment local-councils page. JS in site.js keyed on
   #kc-uk-search (no-ops elsewhere). Reuses .kc-la-finder for the search input. */
.kc-uk-group { margin: 0 0 22px; }
.kc-uk-group.kc-uk-hidden { display: none; }
.kc-uk-group__title,
.kc-body .kc-uk-group__title {
  font-size: var(--body-large, 16px); font-weight: 700; color: var(--navy);
  margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--border, #e0eaec);
}
.kc-uk-group__count { font-weight: 400; color: #888; }
.kc-uk-cols {
  list-style: none; margin: 0; padding: 0;
  columns: 200px 4; column-gap: 24px;
}
.kc-uk-cols li { padding: 0; margin: 0; }
.kc-uk-item,
.kc-body .kc-uk-item {
  break-inside: avoid; padding: 6px 0; margin: 0;
  font-size: var(--card-text-lg, 15px); color: #333; line-height: 1.4;
  border-bottom: 1px solid var(--teal-lt, #f0f8f8);
}
.kc-uk-item.kc-uk-hidden { display: none; }
.kc-uk-item a { font-weight: 600; }