/* ==========================================================================
   Kalieb Designs — 2026 refresh layer
   Sits on top of the GeekHost template (bootstrap.min.css + style.css).
   The template supplies the base grid, buttons and typography; this file
   modernises spacing, colour, contrast, focus states and adds the components
   the original template never had (job cards, trust strip, sticky call bar,
   review cards, accordion FAQ).
   Nothing here depends on JavaScript for content to be readable.
   ========================================================================== */

:root{
  /* Brand coral — matches the logo (#ff5b49). As small text on white this sits
     near 3:1 (below WCAG AA 4.5:1), so in-body links are underlined (see the link
     rules below) to stay distinguishable by more than colour alone. */
  --kd-coral:#ff5b49;
  --kd-coral-bright:#ff5b49;
  --kd-coral-dark:#e8412e;
  --kd-navy:#32526e;
  --kd-navy-deep:#12212c;
  --kd-teal:#71a4b2;
  --kd-ink:#243642;
  --kd-body:#5c6b75;
  --kd-line:#e2e8ec;
  --kd-bg:#f5f8f9;
  --kd-white:#fff;
  --kd-radius:8px;
  --kd-shadow:0 2px 16px rgba(20,45,65,.08);
  --kd-shadow-lg:0 12px 40px rgba(12,30,45,.16);
  --kd-max:1180px;
}

/* ------------------------------------------------------------ base resets */
/* Bootstrap sets this too, but declaring it here means the layout does not
   fall apart if bootstrap.min.css ever fails to load. */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body.kd-page{
  margin:0; padding:0;   /* Bootstrap used to reset this; it must live here now */
  font-family:Lato,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; color:var(--kd-body);
  background:var(--kd-white); overflow-x:hidden;
}
.kd-page h1,.kd-page h2,.kd-page h3,.kd-page h4,.kd-page h5{
  font-family:Lato,Arial,sans-serif; color:var(--kd-ink);
  font-weight:700; line-height:1.22; margin:0 0 .55em;
}
.kd-page h1{font-size:clamp(30px,4.2vw,46px);font-weight:900;letter-spacing:-.01em}
.kd-page h2{font-size:clamp(24px,3vw,33px)}
.kd-page h3{font-size:20px}
.kd-page h4{font-size:17px}
.kd-page p{margin:0 0 1.05em}
/* Base link colour. :where() keeps specificity at zero for the exclusion list so
   button classes below win without needing an arms race of selectors. */
.kd-page a:where(:not(.kd-btn):not(.kd-header-call):not(.kd-header-sms):not(.kd-stickybar-call):not(.kd-stickybar-sms)){color:var(--kd-coral);text-decoration:none;transition:color .15s}
.kd-page a:where(:not(.kd-btn):not(.kd-header-call):not(.kd-header-sms):not(.kd-stickybar-call):not(.kd-stickybar-sms)):hover,
.kd-page a:where(:not(.kd-btn):not(.kd-header-call):not(.kd-header-sms):not(.kd-stickybar-call):not(.kd-stickybar-sms)):focus{color:var(--kd-coral-dark);text-decoration:underline}
.kd-page .kd-btn,.kd-page .kd-header-call,.kd-page .kd-header-sms,
.kd-page .kd-stickybar-call,.kd-page .kd-stickybar-sms{text-decoration:none}
/* WCAG 1.4.1 (Use of Color): links sitting inside body prose must not rely on
   colour alone, so underline them by default. Scoped to paragraphs inside <main>
   so navigation, footer, banner and button-style links (identified by location/
   shape) stay clean. */
.kd-page main p a:not(.kd-btn){text-decoration:underline}
.kd-page img{max-width:100%;height:auto}
.kd-page .wrapper{max-width:var(--kd-max);margin:0 auto;padding-left:18px;padding-right:18px;float:none;width:auto}
.kd-page .container-fluid{padding-left:0;padding-right:0}

/* visible keyboard focus everywhere — the template had none */
.kd-page a:focus-visible,.kd-page button:focus-visible,.kd-page input:focus-visible,
.kd-page select:focus-visible,.kd-page textarea:focus-visible,.kd-page summary:focus-visible{
  outline:3px solid #ffb400; outline-offset:2px; border-radius:3px;
}
.kd-skip{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--kd-navy-deep);color:#fff;
  padding:12px 20px;font-weight:700;
}
.kd-skip:focus{left:0;color:#fff}
.kd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- header */
.kd-header{background:var(--kd-navy);position:relative;z-index:60;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.kd-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
/* superseded: .kd-logo sizing lives in the pop layer */
.kd-header-actions{display:flex;align-items:center;gap:10px}
.kd-header-call,.kd-header-sms{
  display:flex;align-items:center;gap:10px;color:#fff;padding:7px 14px;border-radius:40px;
  border:1px solid rgba(255,255,255,.22);
}
.kd-header-call:hover,.kd-header-sms:hover,.kd-header-call:focus,.kd-header-sms:focus{
  color:#fff;text-decoration:none;background:rgba(255,255,255,.1)
}
.kd-header-call{background:var(--kd-coral);border-color:var(--kd-coral);min-width:196px}
.kd-header-call:hover,.kd-header-call:focus{background:var(--kd-coral-dark);border-color:var(--kd-coral-dark)}
.kd-header-call-ico{font-size:16px;opacity:.95}
.kd-header-call-txt strong{display:block;font-size:17px;line-height:1.1;font-weight:900}
.kd-header-call-txt small{display:block;font-size:11px;opacity:.85;letter-spacing:.2px}
.kd-navtoggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
  width:46px;height:44px;border-radius:6px;font-size:20px}

/* ------------------------------------------------------------------- nav */
.kd-nav{border-top:1px solid rgba(255,255,255,.1)}
.kd-nav ul.main{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.kd-nav ul.main > li{position:relative}
.kd-nav ul.main > li > a{
  display:block;color:#dbe7ef;padding:15px 18px;font-weight:700;font-size:14px;
  letter-spacing:.9px;text-transform:uppercase;
}
.kd-nav ul.main > li > a:hover,.kd-nav ul.main > li > a:focus{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.kd-nav ul.main > li.is-active > a{color:#fff;box-shadow:inset 0 -3px 0 var(--kd-coral)}
.kd-nav ul.submain{
  list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;min-width:284px;
  background:#fff;border-radius:0 0 var(--kd-radius) var(--kd-radius);box-shadow:var(--kd-shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:70;
}
.kd-nav ul.main > li:hover > ul.submain,
.kd-nav ul.main > li:focus-within > ul.submain{opacity:1;visibility:visible;transform:none}
.kd-nav ul.submain a{display:block;padding:11px 20px;color:var(--kd-ink);font-size:15px;font-weight:400}
.kd-nav ul.submain a:hover,.kd-nav ul.submain a:focus{background:var(--kd-bg);color:var(--kd-coral);text-decoration:none}
.kd-nav ul.submain a .fa{width:20px;color:var(--kd-coral)}
.kd-nav ul.submain li.is-active > a{color:var(--kd-coral);font-weight:700}

/* ---------------------------------------------------------------- banner */
.kd-banner{background:var(--kd-navy-deep);color:#fff;padding:52px 0 56px;background-size:cover;background-position:center}
.kd-banner h1{color:#fff;margin-bottom:.35em;max-width:22ch}
.kd-banner-sub{font-size:19px;color:#cfdde7;max-width:62ch;margin-bottom:1.4em}
.kd-crumbs{margin-bottom:16px}
.kd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:13.5px}
.kd-crumbs li + li:before{content:"›";padding:0 9px;color:#7d95a6}
.kd-crumbs a{color:#a9c2d2}
.kd-crumbs span{color:#e7f0f6}
.kd-banner-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* --------------------------------------------------------------- buttons */
.kd-btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:var(--kd-radius);
  font-weight:900;font-size:17px;letter-spacing:.2px;border:2px solid transparent;cursor:pointer;
  transition:background .15s,color .15s,transform .1s;text-align:left;
}
.kd-btn:hover{text-decoration:none;transform:translateY(-1px)}
.kd-btn small{display:block;font-weight:400;font-size:12px;opacity:.9;letter-spacing:0}
.kd-btn-call{background:var(--kd-coral);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.16)}
.kd-btn-call:hover,.kd-btn-call:focus{background:var(--kd-coral-dark);color:#fff}
.kd-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.kd-btn-ghost:hover,.kd-btn-ghost:focus{background:rgba(255,255,255,.14);color:#fff}
.kd-btn-navy{background:var(--kd-navy);color:#fff}
.kd-btn-navy:hover,.kd-btn-navy:focus{background:var(--kd-navy-deep);color:#fff}
.kd-btn-white{background:#fff;color:var(--kd-coral)}
.kd-btn-white:hover,.kd-btn-white:focus{background:#fff;color:var(--kd-coral-dark)}
.kd-btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.kd-btn-outline-white:hover,.kd-btn-outline-white:focus{background:rgba(255,255,255,.16);color:#fff}
.kd-btn-block{display:flex;width:100%;justify-content:center}

/* -------------------------------------------------------------- sections */
.kd-sect{padding:62px 0}
.kd-sect-sm{padding:40px 0}
.kd-bg{background:var(--kd-bg)}
.kd-dark{background:var(--kd-navy);color:#cfdde7}
.kd-dark h2,.kd-dark h3{color:#fff}
.kd-center{text-align:center}
.kd-lead{font-size:19px;line-height:1.6}
.kd-sect-head{max-width:66ch;margin:0 auto 38px;text-align:center}
.kd-sect-head p{margin-bottom:0}
.kd-eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--kd-coral);margin-bottom:10px}
.kd-dark .kd-eyebrow{color:#ffb3a8}

/* ------------------------------------------------------------ trust strip */
.kd-trust{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--kd-line);
  border-radius:var(--kd-radius);box-shadow:var(--kd-shadow);overflow:hidden;margin-top:-34px;position:relative;z-index:5}
.kd-trust > div{padding:20px 16px;text-align:center;border-right:1px solid var(--kd-line)}
.kd-trust > div:last-child{border-right:0}
.kd-trust .fa{color:var(--kd-coral);font-size:23px;display:block;margin-bottom:8px}
.kd-trust strong{display:block;color:var(--kd-ink);font-size:16px}
.kd-trust span{font-size:13px}

/* -------------------------------------------------------------- kd cards */
.kd-grid{display:grid;gap:24px}
.kd-g2{grid-template-columns:repeat(2,1fr)}
.kd-g3{grid-template-columns:repeat(3,1fr)}
.kd-g4{grid-template-columns:repeat(4,1fr)}
.kd-card{background:#fff;border:1px solid var(--kd-line);border-radius:var(--kd-radius);padding:26px;
  box-shadow:var(--kd-shadow);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.kd-card:hover{box-shadow:var(--kd-shadow-lg);transform:translateY(-2px)}
.kd-card h3{margin-bottom:.4em}
.kd-card p{font-size:15.5px}
.kd-card .kd-card-ico{font-size:30px;color:var(--kd-coral);margin-bottom:12px;display:block;line-height:1}
.kd-card img.kd-card-img{width:64px;height:auto;margin-bottom:14px}
.kd-card .kd-card-link{margin-top:auto;padding-top:14px;font-weight:900;font-size:15px}
.kd-card.kd-flag{border-color:var(--kd-coral);position:relative}
.kd-card.kd-flag:before{content:attr(data-flag);position:absolute;top:-11px;left:24px;background:var(--kd-coral);
  color:#fff;font-size:10px;font-weight:900;letter-spacing:1.2px;padding:4px 11px;border-radius:3px}
.kd-dark .kd-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;color:#c9dae5}
.kd-dark .kd-card:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.1)}

/* ---------------------------------------------------------------- splits */
.kd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:center}
.kd-split>*{min-width:0}
.kd-split-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.kd-figure{border-radius:var(--kd-radius);overflow:hidden;box-shadow:var(--kd-shadow);background:#fff}
.kd-figure img{display:block;width:100%}
.kd-figure figcaption{padding:12px 16px;font-size:13.5px;color:#7c8b95;background:#fff}

/* ----------------------------------------------------------------- chips */
.kd-chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.kd-chips li{border:1px solid var(--kd-line);background:#fff;border-radius:30px;padding:9px 17px;
  font-size:15px;color:var(--kd-ink);display:inline-flex;align-items:center;gap:8px}
.kd-chips .fa{color:var(--kd-coral)}
.kd-dark .kd-chips li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#e2edf3}

/* ----------------------------------------------------------------- steps */
.kd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:kdstep;list-style:none;padding:0;margin:0}
.kd-steps li{position:relative;padding-left:64px}
.kd-steps li:before{counter-increment:kdstep;content:counter(kdstep);position:absolute;left:0;top:2px;
  width:46px;height:46px;border-radius:50%;background:var(--kd-coral);color:#fff;font-weight:900;font-size:21px;
  display:flex;align-items:center;justify-content:center}
.kd-steps h3{margin-bottom:.3em}

/* --------------------------------------------------------------- reviews */
.kd-stars{color:#f5a623;letter-spacing:2px;font-size:16px}
.kd-review{background:#fff;border:1px solid var(--kd-line);border-radius:var(--kd-radius);padding:24px;
  box-shadow:var(--kd-shadow);display:flex;flex-direction:column}
.kd-review blockquote{border:0;padding:0;margin:10px 0 0;font-size:15.5px;color:#4d5d68;line-height:1.6}
.kd-review .kd-review-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px}
.kd-review .kd-review-who img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--kd-teal)}
.kd-review cite{font-style:normal;font-weight:900;color:var(--kd-ink);display:block;font-size:15px}
.kd-review .kd-review-meta{font-size:12.5px;color:#8b9aa4}

/* ------------------------------------------------------------- guarantee */
.kd-guarantee{display:flex;gap:24px;align-items:flex-start;background:#fff;border:1px solid var(--kd-line);
  border-left:5px solid var(--kd-coral);border-radius:var(--kd-radius);padding:28px;box-shadow:var(--kd-shadow)}
.kd-guarantee .fa{font-size:42px;color:var(--kd-coral);line-height:1}

/* ------------------------------------------------------------------- faq */
.kd-faq{max-width:840px;margin:0 auto}
.kd-faq details{background:#fff;border:1px solid var(--kd-line);border-radius:var(--kd-radius);margin-bottom:11px}
.kd-faq summary{padding:17px 22px;font-weight:700;color:var(--kd-ink);cursor:pointer;font-size:17px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.kd-faq summary::-webkit-details-marker{display:none}
.kd-faq summary:after{content:"\f107";font-family:FontAwesome;color:var(--kd-coral);flex:0 0 auto}
.kd-faq details[open] summary:after{content:"\f106"}
.kd-faq .kd-faq-a{padding:0 22px 20px;font-size:16px}
.kd-faq .kd-faq-a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ form */
.kd-form{background:#fff;border-radius:var(--kd-radius);padding:28px;box-shadow:var(--kd-shadow-lg)}
.kd-form label{display:block;font-weight:700;color:var(--kd-ink);font-size:14.5px;margin-bottom:5px}
.kd-form input,.kd-form select,.kd-form textarea{
  width:100%;padding:13px 14px;border:1px solid var(--kd-line);border-radius:6px;font:inherit;
  font-size:16px;margin-bottom:14px;background:#fbfcfd;color:var(--kd-ink)}
.kd-form input:focus,.kd-form select:focus,.kd-form textarea:focus{border-color:#3f7a8c;background:#fff}
.kd-form .kd-or{text-align:center;font-size:13.5px;margin:14px 0 10px;color:#93a3ad}
.kd-hp{position:absolute;left:-9999px}

/* -------------------------------------------------------------- cta band */
.kd-cta-band{background:linear-gradient(100deg,var(--kd-coral) 0%,#ff7d64 100%);color:#fff;text-align:center;padding:56px 0}
.kd-cta-band h2{color:#fff;font-size:clamp(25px,3.4vw,36px);margin-bottom:.4em}
.kd-cta-band p{font-size:18px;max-width:56ch;margin:0 auto 22px}
.kd-cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- footer */
/* Own grid rather than Bootstrap's columns, so the footer is correct even if
   bootstrap.min.css is missing or replaced later. */
.kd-footer .row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.25fr;gap:30px;margin:0}
.kd-footer .row > div{width:auto;float:none;padding:0}
@media (max-width:1100px){.kd-footer .row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.kd-footer .row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kd-footer .row{grid-template-columns:1fr;gap:22px}}
.kd-footer{background:var(--kd-navy);color:#b9cddb;padding:52px 0 34px;font-size:15.5px}
.kd-footer .kd-foot-h{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:1.4px;font-weight:900;margin-bottom:16px}
.kd-footer .kd-foot-h .fa{color:var(--kd-coral);margin-right:7px}
.kd-foot-list{list-style:none;padding:0;margin:0 0 26px}
.kd-foot-list li{margin-bottom:9px}
.kd-foot-list a{color:#b9cddb}
.kd-foot-list a:hover,.kd-foot-list a:focus{color:#fff}
.kd-foot-phone{margin:0 0 12px}
.kd-foot-phone a{font-size:27px;font-weight:900;color:#fff}
.kd-foot-phone a:hover{color:var(--kd-coral);text-decoration:none}
.kd-foot-meta{line-height:1.85;font-size:15px}
.kd-foot-name{font-weight:900;color:#fff}
.kd-foot-hours .fa{color:var(--kd-coral)}
.kd-social{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:9px}
.kd-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.kd-social a:hover,.kd-social a:focus{background:var(--kd-coral);color:#fff;text-decoration:none}
.kd-bottom{background:var(--kd-navy-deep);color:#8ba4b5;padding:16px 0;font-size:13.5px}
.kd-bottom .wrapper{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.kd-bottom p{margin:0}
.kd-bottom-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.kd-bottom-links a{color:#8ba4b5}
.kd-bottom-links a:hover{color:#fff}

/* --------------------------------------------------------- sticky + top */
.kd-stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  box-shadow:0 -3px 18px rgba(0,0,0,.22)}
.kd-stickybar-call{flex:1 1 auto;background:var(--kd-coral);color:#fff;text-align:center;padding:15px 10px;
  font-weight:900;font-size:18px;letter-spacing:.3px}
.kd-stickybar-sms{flex:0 0 68px;background:var(--kd-navy);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:20px}
.kd-stickybar a:hover,.kd-stickybar a:focus{color:#fff;text-decoration:none}
.kd-backtop{position:fixed;right:18px;bottom:18px;z-index:80;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--kd-navy);color:#fff;font-size:22px;opacity:0;visibility:hidden;transition:.2s}
.kd-backtop.is-on{opacity:.92;visibility:visible}
.kd-backtop:hover{background:var(--kd-coral);opacity:1}

/* --------------------------------------------------------------- tables */
.kd-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--kd-line);
  border-radius:var(--kd-radius);overflow:hidden;font-size:16px}
.kd-table caption{caption-side:top;text-align:left;font-size:14px;color:#7c8b95;padding-bottom:8px}
.kd-table th,.kd-table td{padding:14px 16px;border-bottom:1px solid var(--kd-line);text-align:left}
.kd-table thead th{background:var(--kd-navy);color:#fff;font-size:14px;letter-spacing:.6px;text-transform:uppercase}
.kd-table tbody tr:last-child td{border-bottom:0}
.kd-table tbody tr:nth-child(even){background:#fafcfc}

/* ------------------------------------------------------------ area lists */
.kd-arealist{column-count:4;column-gap:26px;list-style:none;padding:0;margin:0;font-size:15.5px}
.kd-arealist li{break-inside:avoid;margin-bottom:8px}
.kd-arealist .fa{color:var(--kd-coral);margin-right:7px}

/* ---------------------------------------------------------------- notes */
.kd-note{background:#fffdf3;border:1px solid #f2e6b8;border-left:4px solid #e9c53f;border-radius:6px;
  padding:16px 20px;font-size:15.5px;color:#6a5a1c}
.kd-note strong{color:#4c4013}

/* ----------------------------------------------------------- responsive */
@media (max-width:1024px){
  .kd-g4{grid-template-columns:repeat(2,1fr)}
  .kd-arealist{column-count:3}
}
@media (max-width:900px){
  .kd-header-call-txt small{display:none}
  /* The sticky bottom bar already carries text-us on phones, so the header
     only needs the number and the menu toggle. */
  .kd-header-sms{display:none}
  .kd-header-call{min-width:0;padding:8px 14px}
  .kd-header-inner{gap:10px}
  .kd-logo img{max-height:38px}
  .kd-split,.kd-split-wide,.kd-g2,.kd-g3,.kd-steps{grid-template-columns:1fr}
  .kd-trust{grid-template-columns:repeat(2,1fr);margin-top:0}
  .kd-trust > div{border-bottom:1px solid var(--kd-line)}
  .kd-trust > div:nth-child(2n){border-right:0}
  .kd-arealist{column-count:2}
}
@media (max-width:767px){
  body.kd-page{font-size:16px;padding-bottom:62px}   /* room for the sticky bar */
  .kd-stickybar{display:flex}
  .kd-backtop{bottom:76px}
  .kd-sect{padding:44px 0}
  .kd-banner{padding:38px 0 42px}
  .kd-g4{grid-template-columns:1fr}
  .kd-guarantee{flex-direction:column;gap:14px}
  .kd-bottom .wrapper{justify-content:center;text-align:center}
}
@media (max-width:560px){
  .kd-header-call-txt strong{font-size:15px}
  .kd-arealist{column-count:1}
  /* Stack the sub-label under the button text instead of beside it, and stop
     the phone number itself from wrapping mid-number. */
  .kd-btn{width:100%;justify-content:center;text-align:center;flex-wrap:wrap;
    padding:14px 16px;font-size:16px;white-space:nowrap}
  .kd-btn small{flex:0 0 100%;text-align:center;margin-top:3px;white-space:normal}
  .kd-banner-cta{flex-direction:column}
  .kd-cta-buttons{flex-direction:column}
}

/* ------------------------------------------------------------- printing */
@media print{
  .kd-nav,.kd-stickybar,.kd-backtop,.kd-cta-band,.kd-header-actions{display:none!important}
  body.kd-page{font-size:12pt;color:#000}
  .kd-banner{background:none;color:#000}
  .kd-banner h1{color:#000}
}

/* ==========================================================================
   2026 "pop" layer — animated hero, scroll reveals, stat counters, TV mock.
   Everything degrades: with JS off or reduced-motion on, all content is
   visible and static. Bootstrap is gone, so guard its clearfix anyway in
   case an old cached copy loads.
   ========================================================================== */
.kd-footer .row::before,.kd-footer .row::after{content:none!important;display:none!important}
.kd-logo img{height:62px;width:auto;display:block}
@media (max-width:900px){.kd-logo img{height:44px}}

/* ------------------------------------------------------------ hero (home) */
.kd-hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#0e1c26 0%,#12212c 45%,#1b3a52 100%)}
.kd-hero:before{ /* slow-moving aurora */
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 32%, rgba(255,91,73,.32), transparent 68%),
    radial-gradient(30% 36% at 78% 68%, rgba(113,164,178,.30), transparent 70%),
    radial-gradient(26% 30% at 62% 18%, rgba(255,125,100,.16), transparent 70%);
  animation:kd-aurora 26s ease-in-out infinite alternate}
@keyframes kd-aurora{
  0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(3%,2%,0) rotate(3deg) scale(1.06)}
  100%{transform:translate3d(-2%,3%,0) rotate(-2deg) scale(1.02)}}
.kd-hero:after{ /* faint grid texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 90% at 50% 10%,#000 30%,transparent 100%)}
.kd-hero .wrapper{position:relative;z-index:2;padding-top:74px;padding-bottom:60px}
.kd-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.kd-hero h1{color:#fff;font-size:clamp(32px,4.6vw,52px);max-width:none}
.kd-hero .kd-banner-sub{font-size:20px}
.kd-rotate-wrap{display:inline-block;position:relative;color:var(--kd-coral)}
.kd-rotate-wrap .kd-rotate{display:inline-block;min-width:9.2ch}
.kd-rotate.is-out{animation:kd-word-out .3s ease forwards}
.kd-rotate.is-in{animation:kd-word-in .34s ease forwards}
@keyframes kd-word-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes kd-word-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kd-rotate-wrap:after{content:"";position:absolute;left:2px;right:8px;bottom:-4px;height:4px;
  border-radius:2px;background:linear-gradient(90deg,var(--kd-coral),transparent)}

/* stat counters */
.kd-stats{display:grid;grid-template-columns:repeat(4,auto);gap:12px 44px;margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14);width:fit-content}
.kd-stat b{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:900;color:#fff;line-height:1.05;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kd-stat b .kd-plus{color:var(--kd-coral)}
.kd-stat span{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:#8fb3c9;font-weight:700}

/* CSS-drawn TV with a live review inside */
.kd-tvmock{position:relative;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.kd-tvmock-frame{background:#05090c;border:4px solid #1f2f3a;border-radius:14px;padding:10px;
  position:relative}
.kd-tvmock-frame:after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:38%;height:12px;background:linear-gradient(#22333f,#101d26);border-radius:0 0 10px 10px}
.kd-tvmock-screen{border-radius:6px;overflow:hidden;position:relative;min-height:270px;
  background:linear-gradient(140deg,#14293a 0%,#0d1b26 60%,#132c40 100%);
  display:flex;flex-direction:column;justify-content:center;padding:34px 32px}
.kd-tvmock-screen:before{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 45%,transparent 54%);
  animation:kd-sheen 7s ease-in-out infinite}
@keyframes kd-sheen{0%,55%,100%{transform:translateX(-70%)}25%{transform:translateX(70%)}}
.kd-tvmock .kd-stars{font-size:19px;margin-bottom:10px}
.kd-tvmock blockquote{border:0;margin:0 0 14px;padding:0;color:#e8f1f7;font-size:17.5px;line-height:1.55}
.kd-tvmock cite{font-style:normal;font-weight:900;color:#fff;font-size:14.5px}
.kd-tvmock .kd-review-meta{display:block;font-size:12px;color:#8fb3c9;margin-top:2px}
.kd-tvmock-badge{position:absolute;top:-16px;right:-14px;background:linear-gradient(120deg,var(--kd-coral),#ff8a6d);
  color:#fff;font-weight:900;border-radius:50px;padding:11px 20px;font-size:14px;letter-spacing:.4px;
  box-shadow:0 8px 24px rgba(255,91,73,.45);animation:kd-float 5s ease-in-out infinite;z-index:3}
@keyframes kd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------------------------------------------------------- page banners */
.kd-banner{position:relative;overflow:hidden}
/* Pages with a real photo behind the banner get more height so the photo reads
   as a full-scale hero rather than a thin strip. */
.kd-banner-img{padding:86px 0 94px;animation:kd-kenburns 24s ease-in-out infinite alternate}
@media (max-width:760px){.kd-banner-img{padding:54px 0 60px}}
@keyframes kd-kenburns{from{background-size:104%}to{background-size:112%}}
@supports not (background-size:104%){.kd-banner-img{animation:none}}

/* ------------------------------------------------------- scroll reveals */
.js .kd-reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.js .kd-reveal.is-in{opacity:1;transform:none}
.js .kd-reveal-l{transform:translateX(-30px)}
.js .kd-reveal-r{transform:translateX(30px)}
.js .kd-reveal-l.is-in,.js .kd-reveal-r.is-in{transform:none}
.js .kd-grid > .kd-reveal:nth-child(2){transition-delay:.08s}
.js .kd-grid > .kd-reveal:nth-child(3){transition-delay:.16s}
.js .kd-grid > .kd-reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .js .kd-reveal,.js .kd-reveal-l,.js .kd-reveal-r{opacity:1;transform:none;transition:none}
  .kd-hero:before,.kd-tvmock-screen:before,.kd-tvmock-badge,.kd-banner-img{animation:none}}

/* ------------------------------------------------------ section eyebrow */
.kd-eyebrow{position:relative;padding-left:34px}
.kd-eyebrow:before{content:"";position:absolute;left:0;top:50%;width:24px;height:3px;
  border-radius:2px;background:var(--kd-coral);transform:translateY(-50%)}
.kd-sect-head .kd-eyebrow{padding-left:0}
.kd-sect-head .kd-eyebrow:before{position:static;display:inline-block;vertical-align:middle;
  margin-right:10px;transform:none}
.kd-sect-head .kd-eyebrow:after{content:"";display:inline-block;vertical-align:middle;width:24px;height:3px;
  border-radius:2px;background:var(--kd-coral);margin-left:10px}

/* review source badges */
.kd-review{position:relative}
.kd-review .kd-src{position:absolute;top:18px;right:18px;font-size:11px;font-weight:900;
  letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.kd-review .kd-src-google{background:#e8f0fe;color:#1a63c4}
.kd-review .kd-src-yelp{background:#ffe9e6;color:#c41200}

/* card icon chips get a ring */
.kd-card .kd-card-ico{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:26px;background:linear-gradient(135deg,rgba(255,91,73,.14),rgba(255,91,73,.05));
  border:1px solid rgba(255,91,73,.25)}

@media (max-width:900px){
  .kd-hero-grid{grid-template-columns:1fr}
  .kd-stats{grid-template-columns:repeat(2,auto);gap:18px 36px}
  .kd-tvmock{margin-top:8px}
  .kd-tvmock-badge{right:4px}
}

/* ==========================================================================
   v3 layer — hero rebuild, TV brand strip, mount-type cycler, size chart
   ========================================================================== */

/* hero v3: photo-backed TV mock, glass stat tiles */
.kd-hero .kd-eyebrow{color:#ffb3a8;margin-bottom:14px;display:inline-block}
.kd-hero-kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:14px;color:#9fbccd}
.kd-hero-kicker .kd-stars{font-size:15px}
.kd-stats{border-top:0;padding-top:0;gap:14px;width:100%;grid-template-columns:repeat(4,1fr)}
.kd-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:14px 16px;backdrop-filter:blur(3px)}
.kd-stat span{display:block;margin-top:2px}
.kd-tvmock-screen{padding:0;min-height:300px}
.kd-tvmock-photos{position:absolute;inset:0}
.kd-tvmock-photo{position:absolute;inset:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;opacity:0;transition:opacity 1.1s ease}
.kd-tvmock-photo.is-on{opacity:1;animation:kd-kenburns-t 22s ease-in-out infinite alternate}
@keyframes kd-kenburns-t{from{transform:scale(1)}to{transform:scale(1.09)}}
.kd-tvmock-quote{position:relative;z-index:2;margin-top:auto;padding:26px 28px 22px;
  background:linear-gradient(transparent, rgba(5,12,18,.88) 34%, rgba(5,12,18,.96))}
.kd-tvmock-screen{display:flex;flex-direction:column;justify-content:flex-end}
.kd-tvmock-quote blockquote{font-size:16px;margin-bottom:10px}
@media (max-width:900px){.kd-stats{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion: reduce){.kd-tvmock-photo.is-on{animation:none}.kd-tvmock-photo{transition:none}}

/* TV brand strip — nominative wordmarks, uniform treatment */
.kd-brands{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 44px;padding:10px 0 0}
.kd-brands span{font-weight:900;font-size:24px;letter-spacing:2.5px;color:#9fb0ba;
  text-transform:uppercase;transition:color .2s;cursor:default;line-height:1}
.kd-brands span:hover{color:var(--kd-navy)}
.kd-brands span small{font-size:13px;font-weight:700;letter-spacing:1px;vertical-align:super}
.kd-brands-note{text-align:center;font-size:12px;color:#a7b4bc;margin-top:30px}
.kd-dark .kd-brands span{color:#7e99ab}
.kd-dark .kd-brands span:hover{color:#fff}

/* mount-type cycler */
.kd-mounts{position:relative;background:#fff;border:1px solid var(--kd-line);border-radius:var(--kd-radius);
  box-shadow:var(--kd-shadow);overflow:hidden}
.kd-mount-slide{display:none;padding:30px 30px 20px;text-align:center}
.kd-mount-slide.is-on{display:block;animation:kd-word-in .45s ease}
.kd-mount-slide svg{width:100%;max-width:380px;height:auto}
.kd-mount-slide h3{margin:14px 0 4px}
.kd-mount-slide p{font-size:14.5px;max-width:46ch;margin:0 auto 8px}
.kd-mount-dots{display:flex;justify-content:center;gap:10px;padding:14px 0 20px}
.kd-mount-dots button{width:34px;height:8px;border-radius:5px;border:0;background:#dde5e9;cursor:pointer;transition:.2s}
.kd-mount-dots button.is-on{background:var(--kd-coral)}
.kd-mount-dots button:hover{background:var(--kd-teal)}

/* size chart flourish */
.kd-table .kd-dim{font-variant-numeric:tabular-nums;white-space:nowrap}
.kd-table tr.kd-hl td{background:#fff5f3}

/* ==========================================================================
   v4 layer — section rhythm, hero review cycler, brand logos, dark steps
   ========================================================================== */

/* warm tint band so sections alternate white / grey / warm instead of two-tone */
.kd-bg-tint{background:linear-gradient(180deg,#fff6f3 0%,#fdefe9 100%)}
.kd-bg-tint .kd-card,.kd-bg-tint .kd-review{border-color:#f3ddd5}

/* steps on the dark band */
.kd-dark .kd-steps h3{color:#fff}
.kd-dark .kd-steps li p{color:#c3d3de}
.kd-dark .kd-sect-head p{color:#c3d3de}
.kd-dark .kd-steps li:before{box-shadow:0 6px 18px rgba(255,91,73,.4)}

/* hero quote cycler */
.kd-tvq{display:none}
.kd-tvq.is-on{display:block;animation:kd-word-in .55s ease}
.kd-tvq-dots{display:flex;gap:7px;margin-top:12px}
.kd-tvq-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.kd-tvq-dots i.is-on{background:var(--kd-coral)}

/* brand logo strip (SVG wordmarks in brand colours) */
.kd-brandlogos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 54px;padding-top:8px}
.kd-brandlogos svg{height:30px;width:auto;opacity:.92;filter:grayscale(35%);transition:.2s}
.kd-brandlogos svg:hover{opacity:1;filter:none;transform:translateY(-2px)}
@media (max-width:560px){.kd-brandlogos{gap:18px 30px}.kd-brandlogos svg{height:24px}}

/* instagram feed shell */
.kd-ig{min-height:320px}

/* IT comparison table: our column reads as the win */
.kd-table td.kd-hl2{background:#f2fbf7;color:#1c5c44;font-weight:700}

/* ==========================================================================
   v11 polish — calmer card grids, uniform gallery tiles
   ========================================================================== */

/* Card icons: slate by default so a grid of eight cards is not a wall of
   orange. Coral returns on hover and on flagged cards, where it means something. */
.kd-card .kd-card-ico{
  color:var(--kd-navy);
  background:linear-gradient(135deg,rgba(50,82,110,.10),rgba(113,164,178,.10));
  border:1px solid rgba(50,82,110,.16);
  transition:color .2s,background .2s,border-color .2s}
.kd-card:hover .kd-card-ico{
  color:var(--kd-coral);
  background:linear-gradient(135deg,rgba(255,91,73,.13),rgba(255,91,73,.05));
  border-color:rgba(255,91,73,.3)}
.kd-card.kd-flag .kd-card-ico{
  color:var(--kd-coral);
  background:linear-gradient(135deg,rgba(255,91,73,.13),rgba(255,91,73,.05));
  border-color:rgba(255,91,73,.3)}
/* card links: quieter until the card is hovered */
.kd-card .kd-card-link a{color:var(--kd-navy)}
.kd-card:hover .kd-card-link a{color:var(--kd-coral)}

/* chips: teal ticks read as "included", coral stays for actions */
.kd-chips .fa{color:var(--kd-teal)}

/* trust strip: navy icons, coral only underline accent */
.kd-trust .fa{color:var(--kd-navy)}
.kd-trust > div{position:relative}
.kd-trust > div:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:34px;height:3px;border-radius:2px;background:var(--kd-coral);opacity:.55}

/* steps keep coral numbers (they are the point), dark band unchanged */

/* ------------------------------------------------- uniform gallery tiles */
.kd-gallery figure.kd-figure{margin:0;display:flex;flex-direction:column}
.kd-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;height:auto}
.kd-gallery figcaption{min-height:86px;display:flex;flex-direction:column;justify-content:flex-start}
.kd-gallery figcaption strong{color:var(--kd-ink);font-size:14.5px}
@supports not (aspect-ratio: 4/5){.kd-gallery img{height:340px}}

/* ---------------------------------------------------------- extra polish */
/* brand selection colour */
::selection{background:var(--kd-coral);color:#fff}

/* Embedded map (contact + service areas) */
.kd-map{border-radius:var(--kd-radius);overflow:hidden;box-shadow:var(--kd-shadow);border:1px solid var(--kd-line)}
.kd-map iframe{display:block;width:100%;height:420px;border:0;filter:saturate(.9)}
@media (max-width:760px){.kd-map iframe{height:300px}}

/* Gallery hover: gentle zoom, image only */
.kd-gallery figure{overflow:hidden}
.kd-gallery img{transition:transform .45s ease}
.kd-gallery figure:hover img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.kd-gallery img{transition:none}.kd-gallery figure:hover img{transform:none}}

/* Authorized-dealer logo strip */
.kd-dealers{margin-top:38px;text-align:center}
.kd-dealers small{display:block;margin-bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--kd-body)}
.kd-dealers img{max-width:min(774px,92%);height:auto;opacity:.8;filter:grayscale(1);mix-blend-mode:multiply}

/* sticky header with a shadow once you scroll */
.kd-header{position:sticky;top:0}
.kd-header.is-stuck{box-shadow:0 6px 24px rgba(8,20,30,.35)}

/* gentle attention ring on the header call button (once, on load) */
@keyframes kd-ring{0%{box-shadow:0 0 0 0 rgba(255,91,73,.55)}100%{box-shadow:0 0 0 16px rgba(255,91,73,0)}}
.kd-header-call{animation:kd-ring 1.6s ease-out 1.2s 2}
@media (prefers-reduced-motion: reduce){.kd-header-call{animation:none}}

/* portfolio tiles: subtle zoom on hover */
.kd-gallery figure{overflow:hidden}
.kd-gallery img{transition:transform .5s ease}
.kd-gallery figure:hover img{transform:scale(1.045)}

/* instagram shell: label while the widget loads */
.kd-ig{position:relative}
.kd-ig:before{content:"Loading our latest installs…";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#9aa8b1;font-size:14px;z-index:0}
.kd-ig > *{position:relative;z-index:1}

/* rating badge strip (home + reviews) */
.kd-badges{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.kd-badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--kd-line);
  border-radius:50px;padding:10px 22px;box-shadow:var(--kd-shadow);color:var(--kd-ink);font-weight:700;font-size:15px}
.kd-badge .kd-stars{font-size:14px}
.kd-badge small{font-weight:400;color:#7c8b95}
.kd-page .kd-badge,.kd-page .kd-badge:hover,.kd-page .kd-badge:focus{text-decoration:none}
.kd-badge:hover{border-color:var(--kd-teal)}

/* stat band on the reviews page */
.kd-statband{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:760px;margin:0 auto 8px;text-align:center}
.kd-statband b{display:block;font-size:34px;font-weight:900;color:var(--kd-ink);font-variant-numeric:tabular-nums}
.kd-statband span{font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8b9aa4;font-weight:700}
@media(max-width:560px){.kd-statband{grid-template-columns:1fr;gap:12px}}

/* FAQ jump chips */
.kd-jump{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-8px 0 10px}
.kd-jump a{border:1px solid var(--kd-line);background:#fff;border-radius:30px;padding:8px 18px;
  font-size:14px;font-weight:700;color:var(--kd-navy)}
.kd-jump a:hover{border-color:var(--kd-coral);color:var(--kd-coral);text-decoration:none}

/* footer rating line */
.kd-foot-rating{white-space:nowrap;font-size:14px}
.kd-foot-rating a{color:#fff;font-weight:700}
.kd-foot-rating .kd-stars{font-size:13px}

/* 404 mascot */
.kd-oops{text-align:center;margin-bottom:26px}
.kd-oops img{width:150px;height:auto}

/* How-to guide pages: sequential steps read top-to-bottom, diagrams sit in a padded card */
.kd-guide-steps{grid-template-columns:1fr;max-width:780px;gap:26px}
.kd-guide-fig{padding:30px 24px}
.kd-guide-fig svg{max-width:100%}

/* ===== Guide Library + blog-style guide pages (Aug 2026) ===== */

/* meta bar in the guide banner */
.kd-metabar{display:inline-flex;flex-wrap:wrap;gap:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:12px 4px;max-width:100%;margin:22px 0 4px;backdrop-filter:blur(6px)}
.kd-meta-item{display:flex;align-items:center;gap:10px;padding:4px 22px;border-right:1px solid rgba(255,255,255,.14)}
.kd-meta-item:last-child{border-right:none}
.kd-meta-item .fa{color:#9ef0dd;font-size:16px}
.kd-meta-k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9db4c4}
.kd-meta-v{font-size:14.5px;font-weight:900;color:#fff}
.kd-meta-v em{font-style:normal;color:#9ef0dd}
@media(max-width:760px){.kd-meta-item{padding:6px 14px;border-right:none;width:50%}}

/* library stats band */
.kd-lib-stats{display:flex;gap:38px;flex-wrap:wrap}
.kd-lib-stats>div{border-left:3px solid var(--kd-coral,#ff5b49);padding-left:16px}
.kd-lib-stats b{display:block;font-size:30px;font-weight:900;color:#243642;line-height:1.1}
.kd-lib-stats span{font-size:13px;color:#7c8b95}

/* toolbar: filter chips + sort */
.kd-lib-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:6px 0 26px}
.kd-lib-chips{display:flex;gap:10px;flex-wrap:wrap}
.kd-chip-btn{border:1.5px solid #e2e8ec;border-radius:999px;padding:9px 19px;font:700 13.5px Lato,Arial,sans-serif;
  color:#7c8b95;background:#fff;cursor:pointer;transition:.15s}
.kd-chip-btn:hover{border-color:#32526e;color:#32526e}
.kd-chip-btn.on{background:#32526e;border-color:#32526e;color:#fff}

/* library cards */
.kd-lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kd-lib-card{border:1px solid #e2e8ec;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 10px 30px rgba(36,54,66,.07);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.kd-lib-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(36,54,66,.13)}
.kd-lib-thumb{display:block;height:150px;background-size:cover;background-position:center;position:relative}
.kd-lib-flag{position:absolute;left:12px;top:12px;background:var(--kd-coral,#ff5b49);color:#fff;border-radius:6px;
  padding:5px 11px;font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.kd-views-badge{position:absolute;right:12px;bottom:12px;background:rgba(17,26,32,.82);color:#fff;border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;backdrop-filter:blur(4px)}
.kd-views-badge .fa{color:#9ef0dd;font-size:12px}
.kd-views-badge.kd-views-new .fa{color:#ffd9a8}
.kd-lib-body{padding:18px 22px 20px;display:flex;flex-direction:column;flex:1}
.kd-lib-meta{font-size:12.5px;color:#7c8b95;margin:0 0 8px}
.kd-lib-cat{color:#4b8296;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.kd-lib-body h3{margin:0 0 8px;font-size:19px;line-height:1.28}
.kd-lib-body h3 a{color:#243642;text-decoration:none}
.kd-lib-body h3 a:hover{color:var(--kd-coral,#ff5b49)}
.kd-lib-body>p{margin:0 0 14px;font-size:14.5px;color:#5c6b75;line-height:1.55;flex:1}
@media(max-width:960px){.kd-lib-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.kd-lib-grid{grid-template-columns:1fr}}

/* "did this fix it?" vote box */
.kd-helped{border:1.5px solid #e2e8ec;border-radius:16px;padding:30px 26px;text-align:center;background:#fff;
  max-width:640px;margin:0 auto;box-shadow:0 10px 30px rgba(36,54,66,.06)}
.kd-helped h3{margin:0 0 6px;font-size:21px}
.kd-helped p{margin:0 0 18px;font-size:14.5px;color:#7c8b95}
.kd-vote{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kd-vote-btn{border:1.5px solid #e2e8ec;background:#fff;border-radius:999px;padding:11px 26px;
  font:700 15px Lato,Arial,sans-serif;color:#243642;cursor:pointer;transition:.15s}
.kd-vote-btn .fa{margin-right:6px}
.kd-vote-yes:hover,.kd-vote-yes.kd-vote-picked{border-color:#71a4b2;color:#2c6475;background:#f2f8fa}
.kd-vote-no:hover,.kd-vote-no.kd-vote-picked{border-color:var(--kd-coral,#ff5b49);color:#b3402e;background:#fff6f4}
.kd-vote-btn:disabled{opacity:.55;cursor:default}
.kd-vote-note{display:block;margin-top:14px;color:#7c8b95;font-size:13px}
.kd-vote-done[hidden]{display:none}
.kd-hub-note{display:flex;gap:16px;align-items:flex-start;background:#fff6f4;border:1.5px solid #ffd9d3;
  border-radius:14px;padding:18px 22px;margin:0 0 24px}
.kd-hub-note .fa{color:var(--kd-coral,#ff5b49);font-size:20px;margin-top:3px}
.kd-hub-note p{margin:0;font-size:14.5px;color:#5c4a46;line-height:1.6}

/* ===== Mega-menu navigation (Aug 2026) ===== */
.kd-nav .kd-nav-flag{background:var(--kd-coral);color:#fff;font-size:9.5px;font-weight:900;letter-spacing:.06em;
  border-radius:4px;padding:2px 6px;vertical-align:2px;text-transform:uppercase;margin-left:2px}
.kd-nav .kd-mega{position:absolute;left:50%;margin-left:-390px;top:100%;width:780px;background:#fff;
  border-radius:0 0 14px 14px;box-shadow:0 26px 60px rgba(18,33,44,.28);display:grid;grid-template-columns:1fr 1fr 240px;
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;z-index:70}
.kd-nav ul.main > li:hover > .kd-mega,
.kd-nav ul.main > li:focus-within > .kd-mega{opacity:1;visibility:visible}
/* items near the left edge (TV Mounting) would center their panel off-screen —
   pin those panels to the item's left edge instead */
.kd-nav ul.main > li:nth-child(2) > .kd-mega{left:0;margin-left:0}
.kd-mega-col{padding:20px 8px 22px 22px}
.kd-mega-h{margin:0 0 10px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#93a5b1;font-weight:900}
.kd-mega-col ul{list-style:none;margin:0;padding:0}
.kd-mega-col a{display:flex;gap:12px;padding:9px 10px;border-radius:10px;color:var(--kd-ink);align-items:flex-start}
.kd-mega-col a:hover,.kd-mega-col a:focus{background:var(--kd-bg);text-decoration:none}
.kd-mega-col a .fa{width:32px;height:32px;flex:none;border-radius:8px;background:#fff0ee;color:var(--kd-coral);
  display:flex;align-items:center;justify-content:center;font-size:14px}
.kd-mega-col a b{display:block;font-size:14px;line-height:1.25;font-weight:700}
.kd-mega-col a small{display:block;color:#7c8b95;font-size:12px;line-height:1.4;margin-top:2px;font-weight:400}
.kd-mega-col li.is-active b{color:var(--kd-coral)}
.kd-mega-feat{background:var(--kd-bg);border-radius:0 0 14px 0;padding:20px;display:flex;flex-direction:column;color:var(--kd-ink)}
.kd-mega-feat:hover,.kd-mega-feat:focus{text-decoration:none;color:var(--kd-ink)}
.kd-mega-feat-thumb{height:92px;border-radius:10px;background-size:cover;background-position:center;position:relative;margin-bottom:12px;display:block}
.kd-mega-feat-badge{position:absolute;right:8px;bottom:8px;background:rgba(17,26,32,.85);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:10.5px;font-weight:700}
.kd-mega-feat-badge .fa{color:#9ef0dd}
.kd-mega-feat b{font-size:14.5px;line-height:1.3}
.kd-mega-feat small{color:#7c8b95;font-size:12px;line-height:1.45;margin:5px 0 10px;font-weight:400}
.kd-mega-feat-go{color:var(--kd-coral);font-weight:900;font-size:12.5px}
@media (max-width:1320px){.kd-nav .kd-mega{width:640px;margin-left:-320px;grid-template-columns:1fr 1fr}
  .kd-nav .kd-mega .kd-mega-feat{display:none}
  .kd-nav ul.main > li:nth-child(2) > .kd-mega{left:0;margin-left:0}}

/* mega-menu links never underline (global .kd-page a:hover rule otherwise wins) */
.kd-page .kd-mega-col a,.kd-page .kd-mega-col a:hover,.kd-page .kd-mega-col a:focus,
.kd-page .kd-mega-feat,.kd-page .kd-mega-feat:hover,.kd-page .kd-mega-feat:focus,
.kd-page .kd-lib-thumb,.kd-page .kd-lib-thumb:hover{text-decoration:none}

/* ===== Hamburger navigation below 1200px (where the labels stop fitting on one line) ===== */
@media (max-width:1199px){
  .kd-navtoggle{display:block}
  .kd-nav{display:none;border-top:1px solid rgba(255,255,255,.14)}
  .kd-nav.is-open{display:block;max-height:calc(100vh - 92px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .kd-nav ul.main{display:block;padding-bottom:12px}
  .kd-nav ul.main > li{position:static}
  .kd-nav ul.main > li > a{padding:15px 6px;border-bottom:1px solid rgba(255,255,255,.09)}
  .kd-nav ul.main > li > a .fa-angle-down{float:right;margin-top:4px;transition:transform .25s}
  .kd-nav ul.main > li.is-open > a .fa-angle-down{transform:rotate(180deg)}
  /* submenus (simple + mega) collapse; tapping the parent rolls them down */
  .kd-nav ul.main > li > .submain{display:block;position:static;left:auto;top:auto;width:auto;margin:0;
    opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;
    background:rgba(255,255,255,.05);max-height:0;overflow:hidden;padding:0;
    transition:max-height .4s ease}
  .kd-nav ul.main > li.is-open > .submain{max-height:1800px;padding:4px 0}
  .kd-nav ul.submain a{color:#cddce7;padding:12px 18px}
  .kd-nav ul.submain a:hover,.kd-nav ul.submain a:focus{background:rgba(255,255,255,.08)}
  /* mega content restyled for the dark drawer */
  .kd-mega-col{padding:4px 12px}
  .kd-mega-h{color:#8fa8bb;padding:10px 8px 0;margin:0 0 4px}
  .kd-mega-col a{color:#cddce7}
  .kd-mega-col a:hover,.kd-mega-col a:focus{background:rgba(255,255,255,.08);color:#fff}
  .kd-mega-col a .fa{background:transparent;width:22px;height:auto;display:block;font-size:15px}
  .kd-mega-col a b{color:inherit}
  .kd-mega-col a small{color:#9db4c4}
  .kd-nav .kd-mega .kd-mega-feat{display:none}
}

/* ===== Guide pages: left sidebar layout (Aug 2026) ===== */
.kd-guide-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:44px;align-items:start;padding:44px 0 10px}
.kd-gmain{min-width:0}
.kd-gmain .container-fluid{padding:0}
.kd-gmain .wrapper{padding:0;max-width:none;margin:0}
.kd-gmain section.kd-sect{padding:26px 0}
.kd-gmain section.kd-sect.kd-bg{background:var(--kd-bg);border-radius:16px;padding:28px 26px;margin:14px 0}
.kd-gmain .kd-sect-head{text-align:left;max-width:none;margin-bottom:18px}
.kd-gmain .kd-sect-head p.kd-lead{margin-left:0;max-width:none}
.kd-gmain .kd-split,.kd-gmain .kd-split-wide{grid-template-columns:1fr;gap:22px}
.kd-gmain .kd-helped{margin:10px 0}

/* sidebar card */
.kd-gside{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
  border:1px solid var(--kd-line);border-radius:16px;background:#fff;
  box-shadow:0 10px 30px rgba(36,54,66,.07);font-size:14px;scrollbar-width:thin}
.kd-gside-toggle{display:none}
.kd-gside-head{background:var(--kd-navy);color:#fff;padding:15px 18px}
.kd-gside-head b{font-size:15px}
.kd-gside-head small{display:block;color:#9db4c4;font-size:12px;margin-top:2px}
.kd-gside-search{margin:13px 14px 2px;display:flex;align-items:center;gap:9px;border:1.5px solid var(--kd-line);
  border-radius:999px;padding:7px 14px;color:#7c8b95}
.kd-gside-search input{border:0;outline:0;font:400 13px Lato,Arial,sans-serif;width:100%;color:var(--kd-ink);background:transparent}
.kd-gside-group{padding:10px 8px 2px}
.kd-gside-group h5{margin:0 0 3px;padding:0 10px;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#93a5b1}
.kd-gside-group a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;
  border-radius:9px;color:var(--kd-ink);font-weight:700;font-size:13.5px;line-height:1.3}
.kd-gside-group a:hover,.kd-gside-group a:focus{background:var(--kd-bg);text-decoration:none}
.kd-gside-group a.on{background:#fff0ee;color:var(--kd-coral);box-shadow:inset 3px 0 0 var(--kd-coral)}
.kd-gside-views{flex:none;font-size:11px;font-weight:700;color:#7c8b95;background:var(--kd-bg);border-radius:999px;padding:3px 9px}
.kd-gside-group a.on .kd-gside-views{background:#ffe0db;color:#b3402e}
.kd-gside-cta{margin:12px 14px 14px;background:var(--kd-navy);border-radius:12px;padding:16px;color:#fff;text-align:center}
.kd-gside-cta b{display:block;font-size:14px;margin-bottom:3px}
.kd-gside-cta small{color:#9db4c4;font-size:12px;display:block;margin-bottom:10px}
.kd-gside-btn{display:inline-block;background:var(--kd-coral);border-radius:999px;padding:9px 18px;color:#fff;font-weight:900;font-size:13px}
.kd-gside-btn:hover,.kd-gside-btn:focus{background:#e64735;color:#fff;text-decoration:none}
.kd-page .kd-gside-group a,.kd-page .kd-gside-group a:hover,
.kd-page .kd-gside-btn,.kd-page .kd-gside-btn:hover{text-decoration:none}
/* the global .kd-page a color rule (0,1,1) outranks .kd-gside-btn (0,1,0) and
   painted the CTA text coral-on-coral — pin the button text white explicitly */
.kd-page .kd-gside-btn,.kd-page .kd-gside-btn:hover,.kd-page .kd-gside-btn:focus{color:#fff}

/* prev / next */
.kd-gprevnext{display:flex;justify-content:space-between;gap:14px;margin:8px 0 34px}
.kd-gprevnext a{flex:1;max-width:49%;border:1.5px solid var(--kd-line);border-radius:12px;padding:13px 16px;color:var(--kd-ink)}
.kd-gprevnext a:hover{border-color:var(--kd-coral);text-decoration:none}
.kd-gprevnext a small{display:block;color:#7c8b95;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.kd-gprevnext a b{font-size:14px}
.kd-gprevnext a.kd-gnext{text-align:right}

@media (max-width:960px){
  .kd-guide-layout{grid-template-columns:1fr;gap:0;padding:20px 0 6px}
  .kd-gside{position:static;max-height:none;overflow:visible;margin-bottom:18px}
  .kd-gside-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    border:0;background:var(--kd-navy);color:#fff;font:900 14px Lato,Arial,sans-serif;
    padding:14px;border-radius:15px;cursor:pointer}
  .kd-gside.is-open .kd-gside-toggle{border-radius:15px 15px 0 0}
  .kd-gside-toggle .fa-angle-down{transition:transform .25s}
  .kd-gside.is-open .kd-gside-toggle .fa-angle-down{transform:rotate(180deg)}
  .kd-gside-body{display:none}
  .kd-gside.is-open .kd-gside-body{display:block}
  .kd-gside-head{display:none}
}

/* ---------------------------------------------------- payment method badges */
.kd-pay{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;list-style:none;margin:0;padding:0}
.kd-pay li{display:flex;flex-direction:column;align-items:center;gap:6px}
.kd-pay-card{display:flex;align-items:center;justify-content:center;width:74px;height:46px;
  background:#fff;border:1px solid var(--kd-line);border-radius:10px;
  box-shadow:0 4px 12px rgba(36,54,66,.10);font-size:24px;line-height:1}
.kd-pay li small{font-size:12px;font-weight:700;color:#7c8b95;letter-spacing:.02em}
.kd-pay-zelle{font:italic 900 17px/1 Lato,Arial,sans-serif;color:#6d1ed4;letter-spacing:-.5px}
.kd-pay-venmo{font:900 17px/1 Lato,Arial,sans-serif;color:#008cff;letter-spacing:-.5px;text-transform:lowercase}
.kd-pay-apple{font:700 16px/1 Lato,Arial,sans-serif;color:#111;display:inline-flex;align-items:center;gap:2px}
.kd-pay-apple .fa{font-size:19px;position:relative;top:-1px}
.kd-pay-cc{display:inline-flex;gap:7px;font-size:22px}
/* footer variant: navy background */
.kd-pay-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.kd-pay-lead{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#9db4c4;white-space:nowrap}
.kd-pay-lead .fa{color:var(--kd-coral);margin-right:4px}
.kd-footer .kd-pay{gap:10px 12px}
.kd-footer .kd-pay-card{width:62px;height:40px;font-size:20px;box-shadow:none;border:0}
.kd-footer .kd-pay-zelle,.kd-footer .kd-pay-venmo{font-size:14px}
.kd-footer .kd-pay-apple{font-size:13.5px}
.kd-footer .kd-pay-apple .fa{font-size:16px}
.kd-footer .kd-pay-cc{font-size:18px;gap:5px}
.kd-footer .kd-pay li small{color:#9db4c4;font-size:11px}
/* contact page block */
.kd-pay-block{max-width:1000px;margin:0 auto}
.kd-pay-block .kd-pay-card{width:96px;height:58px;font-size:29px;border-radius:13px}
.kd-pay-block .kd-pay{gap:18px 26px}
.kd-pay-block .kd-pay-zelle,.kd-pay-block .kd-pay-venmo{font-size:21px}
.kd-pay-block .kd-pay-apple{font-size:20px}
.kd-pay-block .kd-pay-apple .fa{font-size:24px}
.kd-pay-block .kd-pay-cc{font-size:27px;gap:9px}
.kd-pay-block .kd-pay li small{font-size:13px;color:var(--kd-ink)}
/* ------------------------------------------------ Instagram follow button */
.kd-ig-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 30px;border-radius:999px;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;font-weight:900;font-size:16.5px;box-shadow:0 10px 26px rgba(204,35,102,.32);
  transition:transform .15s,box-shadow .15s}
.kd-ig-btn .fa{font-size:24px}
.kd-ig-btn small{font-weight:700;font-size:13px;opacity:.85;border-left:1px solid rgba(255,255,255,.4);padding-left:12px}
.kd-ig-btn:hover,.kd-ig-btn:focus{transform:translateY(-2px);box-shadow:0 14px 32px rgba(204,35,102,.42);color:#fff;text-decoration:none}
.kd-page .kd-ig-btn,.kd-page .kd-ig-btn:hover,.kd-page .kd-ig-btn:focus{color:#fff;text-decoration:none}
/* ------------------------------------------------- TV size calculator */
.kd-calc{display:grid;grid-template-columns:320px minmax(0,1fr);gap:36px;align-items:start}
.kd-calc-controls{background:#fff;border:1px solid var(--kd-line);border-radius:16px;padding:24px;
  box-shadow:0 10px 30px rgba(36,54,66,.08);position:sticky;top:16px}
.kd-calc-h{font-size:19px;margin:0 0 18px;color:var(--kd-navy)}
.kd-calc-label{display:flex;justify-content:space-between;align-items:baseline;font-weight:900;font-size:14px;
  color:var(--kd-ink);margin:16px 0 6px}
.kd-calc-label output{color:var(--kd-coral);font-size:16px}
.kd-calc-controls input[type=range]{width:100%;accent-color:var(--kd-coral);height:28px}
.kd-calc-hint{font-size:12.5px;color:#7c8b95;line-height:1.5;margin:4px 0 0}
.kd-calc-modes{display:flex;gap:8px;margin-top:20px}
.kd-calc-mode{flex:1;border:1.5px solid var(--kd-line);background:#fff;border-radius:999px;padding:9px 6px;
  font:900 13px Lato,Arial,sans-serif;color:var(--kd-ink);cursor:pointer}
.kd-calc-mode.on{background:var(--kd-navy);border-color:var(--kd-navy);color:#fff}
.kd-calc-check{display:flex;align-items:center;gap:9px;font-weight:900;font-size:14px;margin-top:20px;cursor:pointer}
.kd-calc-check input{width:17px;height:17px;accent-color:var(--kd-coral)}
.kd-calc-fire{margin-top:4px}
.kd-calc-svgwrap{background:#fff;border:1px solid var(--kd-line);border-radius:16px;padding:14px;
  box-shadow:0 10px 30px rgba(36,54,66,.08)}
.kd-calc-svgwrap svg{width:100%;height:auto;display:block}
.kd-calc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.kd-calc-card{background:#fff;border:1px solid var(--kd-line);border-radius:13px;padding:14px 14px 12px;text-align:center}
.kd-calc-card small{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#93a5b1;margin-bottom:4px}
.kd-calc-card strong{display:block;font-size:26px;color:var(--kd-navy);line-height:1.1}
.kd-calc-card span{display:block;font-size:11.5px;color:#7c8b95;margin-top:3px}
.kd-calc-card-main{background:var(--kd-navy);border-color:var(--kd-navy)}
.kd-calc-card-main small{color:#9db4c4}
.kd-calc-card-main strong{color:#fff;font-size:32px}
.kd-calc-card-main span{color:#9db4c4}
.kd-calc-verdict{margin-top:14px;border-radius:13px;padding:14px 18px;font-size:14px;line-height:1.55}
.kd-calc-verdict.ok{background:#e8f4ec;border:1px solid #bfe0cb;color:#1e5c38}
.kd-calc-verdict.warn{background:#fdf3e0;border:1px solid #ecd9a8;color:#7a5a12}
.kd-calc-uses{margin-top:26px;font-size:14px;color:#7c8b95}
.kd-calc-uses .fa{color:var(--kd-coral)}
@media(max-width:900px){.kd-calc{grid-template-columns:1fr}.kd-calc-controls{position:static}
  .kd-calc-cards{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------ code showcase card
   A faux editor window used to show off hand-authored code on the web-design
   page and the Uniquely Chic case study. The code itself is decorative — the
   card carries an aria-label, so screen readers get a plain description, not a
   wall of syntax. The body fades out at the bottom via a mask. */
.kd-codecard{position:relative;border-radius:var(--kd-radius);overflow:hidden;background:#0e1a24;
  border:1px solid #21323f;box-shadow:var(--kd-shadow-lg)}
.kd-codecard-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#13232f;border-bottom:1px solid #21323f}
.kd-cc-dots{display:flex;gap:6px}
.kd-cc-dot{width:11px;height:11px;border-radius:50%;background:#33475680;display:inline-block}
.kd-cc-dot.r{background:#ff5f56}.kd-cc-dot.y{background:#ffbd2e}.kd-cc-dot.g{background:#27c93f}
.kd-cc-file{color:#7d93a1;font-size:12.5px;margin-left:7px;font-family:Lato,Arial,sans-serif}
.kd-cc-tag{margin-left:auto;color:#f0894c;font-size:10.5px;letter-spacing:.16em;font-weight:800;font-family:Lato,Arial,sans-serif}
.kd-code{margin:0;padding:15px 18px 4px;font-size:12.5px;line-height:1.72;color:#c6d2da;overflow:hidden;
  white-space:pre;font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.kd-code .k{color:#6cb6ff}   /* keyword */
.kd-code .s{color:#8fd694}   /* string */
.kd-code .n{color:#e6b45c}   /* number */
.kd-code .p{color:#ff8863}   /* property / key */
.kd-code .f{color:#e6c07b}   /* function name */
.kd-code .c{color:#5f7482;font-style:italic}   /* comment */
.kd-code .m{color:#7f94a1}   /* punctuation */
.kd-codecard-cap{position:relative;padding:15px 18px;background:#0a141c;border-top:1px solid #21323f;
  color:#9fb2bd;font-family:Lato,Arial,sans-serif;font-size:14px;line-height:1.55}
.kd-codecard-cap b{color:#fff}
.kd-codecard-cap .cf{color:#f0a077;font-weight:700}
@media(max-width:560px){.kd-code{font-size:11px}}

/* ------------------------------------------------ case-study layout
   Editorial page furniture for /case-studies/. Reused by every case study:
   a meta strip, stat cards, a numbered feature grid, and a scope panel. */
.kd-cs-meta{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;background:var(--kd-bg);
  border:1px solid var(--kd-line);border-radius:14px;padding:16px 10px;margin:0 0 40px}
.kd-cs-meta>div{padding:4px 24px;position:relative}
.kd-cs-meta>div+div::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:34px;width:1px;background:var(--kd-line)}
.kd-cs-meta .k{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--kd-body);font-weight:700;margin-bottom:6px}
.kd-cs-meta .v{font-size:15px;color:var(--kd-ink);font-weight:700;line-height:1.2}
@media(max-width:760px){.kd-cs-meta{gap:14px 22px;padding:18px 20px}.kd-cs-meta>div{padding:0}.kd-cs-meta>div+div::before{display:none}}
.kd-cs-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:34px 0 0}
.kd-cs-stat{border:1px solid var(--kd-line);border-radius:12px;padding:20px 18px;background:#fff}
.kd-cs-stat b{display:block;font-size:clamp(28px,3.4vw,36px);font-weight:900;line-height:1;color:var(--kd-coral);letter-spacing:-.02em}
.kd-cs-stat span{display:block;margin-top:11px;font-size:12px;line-height:1.45;color:var(--kd-body);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
@media(max-width:900px){.kd-cs-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kd-cs-stats{grid-template-columns:1fr}}
.kd-cs-idx{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kd-coral);margin-bottom:10px}
.kd-cs-feats{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:8px}
.kd-cs-feat{padding:26px 0;border-top:1px solid var(--kd-line)}
.kd-cs-feat .kd-cs-idx{margin-bottom:9px}
.kd-cs-feat h3{margin:0 0 9px}
.kd-cs-feat p{margin:0;color:var(--kd-body)}
@media(max-width:720px){.kd-cs-feats{grid-template-columns:1fr;gap:0}.kd-cs-feat{padding:22px 0}}
.kd-cs-scope{background:#fff;border:1px solid var(--kd-line);border-radius:14px;padding:28px 30px}
.kd-cs-scope h3{margin:0 0 18px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--kd-body)}
.kd-cs-scope ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:13px 34px}
.kd-cs-scope li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--kd-ink)}
.kd-cs-scope li:before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--kd-coral)}
@media(max-width:720px){.kd-cs-scope ul{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.kd-cs-scope ul{grid-template-columns:1fr}.kd-cs-scope{padding:22px 20px}}

/* Seasonal deck styles now live self-contained in inc/season-deck.php
   (inline CSS + JS) so they cannot fall out of sync with a stale kd.css. */