/* =========================================================================
   Kolkata Cooling Solution - design system
   ========================================================================= */

:root {
  --kcs-primary: #1564AB;
  --kcs-primary-dark: #0F4E86;
  --kcs-primary-soft: #E8F1FA;
  --kcs-accent: #2E9CF0;
  --kcs-ink: #0A2540;
  --kcs-ink-700: #1E3A5F;
  --kcs-text: #475569;
  --kcs-muted: #64748B;
  --kcs-border: #E2E8F0;
  --kcs-border-soft: #EDF2F7;
  --kcs-wash: #F5F8FB;
  --kcs-white: #FFFFFF;
  --kcs-wa: #25D366;
  --kcs-wa-dark: #1DA851;

  --kcs-radius: 14px;
  --kcs-radius-sm: 10px;
  --kcs-radius-lg: 20px;

  --kcs-shadow-sm: 0 1px 2px rgba(10, 37, 64, .05);
  --kcs-shadow: 0 6px 24px -10px rgba(10, 37, 64, .16);
  --kcs-shadow-lg: 0 18px 48px -18px rgba(10, 37, 64, .26);

  --kcs-ease: cubic-bezier(.22, .61, .36, 1);
  --kcs-dur: .28s;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(21, 100, 171, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

.kcs-tabular { font-variant-numeric: tabular-nums; }

/* Decorative brand motif derived from the logo airflow curves */
.kcs-swoosh { position: relative; overflow: hidden; }
.kcs-swoosh::after {
  content: "";
  position: absolute;
  inset-inline-end: -80px;
  inset-block-start: -60px;
  inline-size: 420px;
  block-size: 420px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%231564AB' stroke-width='3' stroke-linecap='round' opacity='.16'%3E%3Cpath d='M20 60 Q50 100 90 60'/%3E%3Cpath d='M50 110 Q80 155 120 110'/%3E%3Cpath d='M100 40 Q130 80 170 40'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.site-header.dynamic-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 500;
  background: var(--kcs-white);
  border-block-end: 1px solid var(--kcs-border-soft);
  transition: box-shadow var(--kcs-dur) var(--kcs-ease);
}

body.admin-bar .site-header.dynamic-header { inset-block-start: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header.dynamic-header { inset-block-start: 0; }
}

body.kcs-scrolled .site-header.dynamic-header {
  box-shadow: 0 4px 20px -12px rgba(10, 37, 64, .35);
}

.site-header .header-inner { align-items: center; gap: 20px; }
.site-header .site-branding { justify-content: center; }
.site-header .custom-logo-link img { block-size: auto; }

.site-header .site-navigation ul.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .site-navigation ul.menu > li { position: relative; }

.site-header .site-navigation ul.menu > li > a {
  display: block;
  padding: 10px 13px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--kcs-ink-700);
  text-decoration: none;
  border-radius: 8px;
  transition: color var(--kcs-dur) var(--kcs-ease), background-color var(--kcs-dur) var(--kcs-ease);
}

.site-header .site-navigation ul.menu > li > a::after {
  content: "";
  display: block;
  block-size: 2px;
  inline-size: 0;
  margin-block-start: 5px;
  border-radius: 2px;
  background: var(--kcs-primary);
  transition: inline-size var(--kcs-dur) var(--kcs-ease);
}

.site-header .site-navigation ul.menu > li > a:hover { color: var(--kcs-primary); }
.site-header .site-navigation ul.menu > li > a:hover::after { inline-size: 18px; }

.site-header .site-navigation ul.menu > li.current-menu-item > a,
.site-header .site-navigation ul.menu > li.current_page_item > a { color: var(--kcs-primary); }
.site-header .site-navigation ul.menu > li.current-menu-item > a::after,
.site-header .site-navigation ul.menu > li.current_page_item > a::after { inline-size: 18px; }

/* Header call-to-action menu item */
.site-header .site-navigation ul.menu > li.kcs-nav-cta { margin-inline-start: 10px; }
.site-header .site-navigation ul.menu > li.kcs-nav-cta > a,
.site-navigation-dropdown ul.menu > li.kcs-nav-cta > a {
  background: var(--kcs-primary);
  color: var(--kcs-white);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--kcs-radius-sm);
  box-shadow: 0 6px 16px -8px rgba(21, 100, 171, .8);
  transition: background-color var(--kcs-dur) var(--kcs-ease), transform var(--kcs-dur) var(--kcs-ease), box-shadow var(--kcs-dur) var(--kcs-ease);
}
.site-header .site-navigation ul.menu > li.kcs-nav-cta > a::after { display: none; }
.site-header .site-navigation ul.menu > li.kcs-nav-cta > a:hover {
  background: var(--kcs-primary-dark);
  color: var(--kcs-white);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(21, 100, 171, .9);
}

/* Hello switches to the dropdown menu at 992px, but seven links plus the CTA
   button need more room than that alongside the logo, so between 992px and
   1200px the nav wrapped onto a second line and doubled the header height.
   Extend the dropdown up to 1200px instead. Hello's own rules use !important,
   and this sheet loads after the theme's, so these override cleanly. */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation {
    display: none !important;
  }
  .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder {
    display: flex !important;
  }
}

/* Mobile toggle */
.site-navigation-toggle-holder { padding: 0; }
.site-navigation-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  background: var(--kcs-primary-soft);
  border: 1px solid transparent;
  border-radius: var(--kcs-radius-sm);
  color: var(--kcs-primary);
  cursor: pointer;
}
.site-navigation-toggle-icon,
.site-navigation-toggle-icon::before,
.site-navigation-toggle-icon::after {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--kcs-dur) var(--kcs-ease), opacity .15s linear;
}
.site-navigation-toggle-icon { position: relative; }
.site-navigation-toggle-icon::before { content: ""; position: absolute; inset-block-start: -6px; }
.site-navigation-toggle-icon::after { content: ""; position: absolute; inset-block-start: 6px; }

.site-navigation-toggle-holder.elementor-active .site-navigation-toggle-icon { background: transparent; }
.site-navigation-toggle-holder.elementor-active .site-navigation-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.site-navigation-toggle-holder.elementor-active .site-navigation-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.site-navigation-dropdown {
  background: var(--kcs-white);
  border-block-start: 1px solid var(--kcs-border-soft);
  box-shadow: var(--kcs-shadow);
}
.site-navigation-dropdown ul.menu { padding: 10px 18px 22px; margin: 0; list-style: none; }
.site-navigation-dropdown ul.menu li a {
  display: block;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--kcs-ink);
  text-decoration: none;
  border-block-end: 1px solid var(--kcs-border-soft);
}
.site-navigation-dropdown ul.menu li:last-child a { border-block-end: 0; }
.site-navigation-dropdown ul.menu > li.kcs-nav-cta { margin-block-start: 14px; }
.site-navigation-dropdown ul.menu > li.kcs-nav-cta > a { text-align: center; border: 0; }

/* -------------------------------------------------------------------------
   Sections and headings
   ---------------------------------------------------------------------- */

/* Section eyebrow. Deliberately not a heading element: it is a label, and
   putting it in the heading outline buries the real headings. */
.kcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--kcs-primary);
}
.kcs-eyebrow::before {
  content: "";
  flex: none;
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}
.kcs-eyebrow--light { color: #7FC0F5; }

.kcs-rule-under .elementor-heading-title { position: relative; }

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.kcs-card {
  background: var(--kcs-white);
  border: 1px solid var(--kcs-border-soft);
  border-radius: var(--kcs-radius);
  box-shadow: var(--kcs-shadow-sm);
  transition: transform var(--kcs-dur) var(--kcs-ease), border-color var(--kcs-dur) var(--kcs-ease), box-shadow var(--kcs-dur) var(--kcs-ease);
}
.kcs-card:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 100, 171, .45);
  box-shadow: var(--kcs-shadow);
}

.kcs-card--flat:hover { transform: none; box-shadow: var(--kcs-shadow-sm); }

/* Standalone line-icon in a tinted tile.
   Elementor emits `fill: <colour>` per widget, which would flood a stroke-drawn
   icon solid, so fill is forced off here. */
.kcs-iconline .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 13px;
  background: var(--kcs-primary-soft);
  color: var(--kcs-primary);
  transition: background-color var(--kcs-dur) var(--kcs-ease), color var(--kcs-dur) var(--kcs-ease), transform var(--kcs-dur) var(--kcs-ease);
}
.kcs-iconline .elementor-icon svg {
  inline-size: 30px;
  block-size: 30px;
}
/* Our own icons are drawn with strokes, so the fill Elementor sets must come
   off. Font Awesome icons are filled paths and must keep theirs, hence the
   :not() guard on Elementor's font-icon class. */
.kcs-iconline .elementor-icon svg:not(.e-font-icon-svg) {
  fill: none !important;
  stroke: currentColor !important;
}
.kcs-iconline .elementor-icon svg.e-font-icon-svg {
  inline-size: 24px;
  block-size: 24px;
  fill: currentColor;
}
.kcs-card:hover .kcs-iconline .elementor-icon {
  background: var(--kcs-primary);
  color: var(--kcs-white);
  transform: translateY(-2px);
}

/* Service card: icon tile + arrow affordance */
.kcs-svc .elementor-icon-box-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: 12px;
  background: var(--kcs-primary-soft);
  color: var(--kcs-primary);
  transition: background-color var(--kcs-dur) var(--kcs-ease), color var(--kcs-dur) var(--kcs-ease), transform var(--kcs-dur) var(--kcs-ease);
}
/* Keep the glyph proportional to its tile rather than filling it. */
.kcs-svc .elementor-icon-box-icon .elementor-icon svg,
.kcs-svc .elementor-icon-box-icon .elementor-icon i {
  inline-size: 24px;
  block-size: 24px;
  font-size: 24px;
}
.kcs-svc:hover .elementor-icon-box-icon .elementor-icon {
  background: var(--kcs-primary);
  color: var(--kcs-white);
  transform: translateY(-2px);
}

.kcs-arrow a,
a.kcs-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  text-decoration: none;
}
.kcs-arrow a::after,
a.kcs-arrow::after {
  content: "\2192";
  transition: transform var(--kcs-dur) var(--kcs-ease);
}
.kcs-card:hover .kcs-arrow a::after,
a.kcs-arrow:hover::after { transform: translateX(5px); }

/* Numbered process step */
.kcs-step { position: relative; }
.kcs-step .kcs-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  background: var(--kcs-ink);
  color: var(--kcs-white);
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
}

/* Trust / spec strip */
.kcs-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--kcs-ink-700);
}

/* -------------------------------------------------------------------------
   Pricing
   ---------------------------------------------------------------------- */

/* Wide tables scroll inside their own container rather than pushing the page. */
.kcs-price-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kcs-price-table table {
  inline-size: 100%;
  min-inline-size: 280px;
  border-collapse: collapse;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.kcs-price-table caption {
  caption-side: top;
  text-align: start;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--kcs-ink);
  padding-block-end: 14px;
}
.kcs-price-table th,
.kcs-price-table td {
  padding: 15px 16px;
  border-block-end: 1px solid var(--kcs-border-soft);
  vertical-align: top;
  text-align: start;
}
.kcs-price-table thead th {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kcs-muted);
  border-block-end: 1px solid var(--kcs-border);
  padding-block: 12px;
}
.kcs-price-table tbody tr { transition: background-color .2s linear; }
.kcs-price-table tbody tr:hover { background: var(--kcs-wash); }
.kcs-price-table tbody tr:last-child td { border-block-end: 0; }
.kcs-price-table td:last-child,
.kcs-price-table th:last-child { text-align: end; white-space: nowrap; }
.kcs-price-table td:first-child { color: var(--kcs-ink); font-weight: 500; }
.kcs-price-table .kcs-amt {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--kcs-ink);
}
.kcs-price-table .kcs-plus {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--kcs-muted);
  margin-block-start: 2px;
}
.kcs-price-table .kcs-vary {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--kcs-primary);
  background: var(--kcs-primary-soft);
  border-radius: 999px;
  padding: 3px 9px;
  margin-inline-start: 8px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .kcs-price-table th,
  .kcs-price-table td { padding: 13px 10px; }
  .kcs-price-table .kcs-amt { font-size: 16px; }
  .kcs-price-table .kcs-vary { margin-inline-start: 0; margin-block-start: 5px; }
}

/* Featured price card */
.kcs-pricecard .kcs-pricecard__amt {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  color: var(--kcs-ink);
  line-height: 1.1;
}

/* -------------------------------------------------------------------------
   FAQ (Elementor nested accordion / accordion)
   ---------------------------------------------------------------------- */

.kcs-faq .e-n-accordion-item {
  border: 1px solid var(--kcs-border-soft);
  border-radius: var(--kcs-radius);
  background: var(--kcs-white);
  margin-block-end: 12px;
  overflow: hidden;
  transition: border-color var(--kcs-dur) var(--kcs-ease), box-shadow var(--kcs-dur) var(--kcs-ease);
}
.kcs-faq .e-n-accordion-item[open] {
  border-color: rgba(21, 100, 171, .4);
  box-shadow: var(--kcs-shadow-sm);
}
.kcs-faq .e-n-accordion-item-title {
  padding: 19px 22px;
  cursor: pointer;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--kcs-ink);
  transition: color var(--kcs-dur) var(--kcs-ease);
}
.kcs-faq .e-n-accordion-item-title:hover { color: var(--kcs-primary); }
.kcs-faq .e-n-accordion-item[open] .e-n-accordion-item-title { color: var(--kcs-primary); }
.kcs-faq .e-n-accordion-item-title-text { line-height: 1.45; }

/* Legacy accordion widget fallback */
.kcs-faq .elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--kcs-border-soft);
  border-radius: var(--kcs-radius);
  margin-block-end: 12px;
  overflow: hidden;
}
.kcs-faq .elementor-accordion .elementor-tab-title { padding: 19px 22px; }

/* -------------------------------------------------------------------------
   Buttons (Elementor button widget + custom)
   ---------------------------------------------------------------------- */

.elementor-button { transition: transform var(--kcs-dur) var(--kcs-ease), background-color var(--kcs-dur) var(--kcs-ease), box-shadow var(--kcs-dur) var(--kcs-ease), color var(--kcs-dur) var(--kcs-ease); }
.elementor-button:hover { transform: translateY(-2px); }

.kcs-btn-primary .elementor-button { box-shadow: 0 8px 20px -10px rgba(21, 100, 171, .85); }
.kcs-btn-primary .elementor-button:hover { box-shadow: 0 14px 28px -12px rgba(21, 100, 171, .95); }

.kcs-btn-wa .elementor-button { background-color: var(--kcs-wa); color: #05320F; font-weight: 600; }
.kcs-btn-wa .elementor-button:hover { background-color: var(--kcs-wa-dark); color: #05320F; }

.kcs-btn-ghost .elementor-button {
  background-color: transparent;
  color: var(--kcs-primary);
  border: 1.5px solid rgba(21, 100, 171, .35);
}
.kcs-btn-ghost .elementor-button:hover {
  background-color: var(--kcs-primary-soft);
  color: var(--kcs-primary-dark);
  border-color: var(--kcs-primary);
}

.kcs-btn-onblue .elementor-button { background-color: var(--kcs-white); color: var(--kcs-primary); }
.kcs-btn-onblue .elementor-button:hover { background-color: #F0F6FC; color: var(--kcs-primary-dark); }

.kcs-btn-outline-light .elementor-button {
  background-color: transparent;
  color: var(--kcs-white);
  border: 1.5px solid rgba(255, 255, 255, .45);
}
.kcs-btn-outline-light .elementor-button:hover {
  background-color: rgba(255, 255, 255, .12);
  border-color: var(--kcs-white);
  color: var(--kcs-white);
}

/* -------------------------------------------------------------------------
   Imagery
   ---------------------------------------------------------------------- */

/* Source photos vary between landscape and portrait; capping the height keeps
   hero blocks a consistent size across pages instead of letting a tall image
   stretch the section. */
.kcs-media img {
  border-radius: var(--kcs-radius-lg);
  box-shadow: var(--kcs-shadow-lg);
  inline-size: 100%;
  max-block-size: 480px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .kcs-media img { max-block-size: 320px; }
}
.kcs-media-sm img { border-radius: var(--kcs-radius); }

/* -------------------------------------------------------------------------
   Long-form prose (legal pages)
   ---------------------------------------------------------------------- */

.kcs-prose h2 {
  font-size: 22px;
  margin-block: 38px 12px;
}
.kcs-prose h2:first-child { margin-block-start: 0; }
.kcs-prose p { margin-block-end: 16px; }
.kcs-prose ul { margin: 0 0 18px; padding-inline-start: 22px; }
.kcs-prose li { margin-block-end: 8px; }

/* Footer logo sizing */
.kcs-footer-logo img { inline-size: 260px; max-inline-size: 100%; block-size: auto; }

/* -------------------------------------------------------------------------
   Scroll reveal
   ---------------------------------------------------------------------- */

/* Hidden only when JS is present to reveal it again, so a script failure
   can never leave content permanently invisible. */
.kcs-js .kcs-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--kcs-ease), transform .6s var(--kcs-ease);
  will-change: opacity, transform;
}
.kcs-js .kcs-reveal.is-in { opacity: 1; transform: none; }

/* Inside the Elementor editor nothing may ever be hidden: the editor re-renders
   elements dynamically, so they would never receive .is-in and the canvas would
   look empty while editing. Elementor adds no body class of its own in the
   preview frame, so the plugin adds .kcs-editing. */
body.kcs-editing .kcs-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.kcs-reveal-d1 { transition-delay: .08s; }
.kcs-reveal-d2 { transition-delay: .16s; }
.kcs-reveal-d3 { transition-delay: .24s; }

/* -------------------------------------------------------------------------
   Footer (Elementor-built template inside .kcs-site-footer)
   ---------------------------------------------------------------------- */

/* Hello Elementor still prints its own <footer> wrapper even with every part
   switched off, leaving an empty strip above ours. */
.site-footer.dynamic-footer { display: none; }

.kcs-site-footer { display: block; background: var(--kcs-ink); }
/* Clearance so the floating dock never sits on top of footer content when the
   visitor is scrolled to the very bottom of the page. */
@media (min-width: 768px) {
  .kcs-site-footer { padding-block-end: 104px; }
}
.kcs-site-footer a { text-decoration: none; }
.kcs-footer-link a,
a.kcs-footer-link {
  color: #A8BDD2;
  transition: color var(--kcs-dur) var(--kcs-ease), padding-inline-start var(--kcs-dur) var(--kcs-ease);
}
.kcs-footer-link a:hover,
a.kcs-footer-link:hover { color: var(--kcs-white); }

.kcs-footer-nav .elementor-icon-list-item > a {
  color: #A8BDD2;
  transition: color var(--kcs-dur) var(--kcs-ease), transform var(--kcs-dur) var(--kcs-ease);
}
.kcs-footer-nav .elementor-icon-list-item > a:hover {
  color: var(--kcs-white);
  transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   Floating dock
   ---------------------------------------------------------------------- */

.kcs-dock {
  position: fixed;
  z-index: 900;
  inset-inline-end: 22px;
  inset-block-end: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.kcs-dock__call,
.kcs-dock__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  padding: 13px 20px;
  transition: transform var(--kcs-dur) var(--kcs-ease), box-shadow var(--kcs-dur) var(--kcs-ease), background-color var(--kcs-dur) var(--kcs-ease);
}

.kcs-dock__call {
  background: var(--kcs-white);
  color: var(--kcs-ink);
  box-shadow: var(--kcs-shadow);
  border: 1px solid var(--kcs-border);
}
.kcs-dock__call:hover { transform: translateY(-2px); box-shadow: var(--kcs-shadow-lg); color: var(--kcs-primary); }

.kcs-dock__wa {
  background: var(--kcs-wa);
  color: #05320F;
  box-shadow: 0 12px 28px -12px rgba(37, 211, 102, .95);
}
.kcs-dock__wa:hover { background: var(--kcs-wa-dark); transform: translateY(-2px); }

.kcs-dock .kcs-icon { inline-size: 20px; block-size: 20px; flex: none; }

/* Attention pulse, once, on first idle */
.kcs-dock__wa.is-nudge { animation: kcs-nudge 1.6s var(--kcs-ease) 2; }
@keyframes kcs-nudge {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(37, 211, 102, .95), 0 0 0 0 rgba(37, 211, 102, .5); }
  50% { box-shadow: 0 12px 28px -12px rgba(37, 211, 102, .95), 0 0 0 12px rgba(37, 211, 102, 0); }
}

@media (max-width: 767px) {
  .kcs-dock {
    inset-inline: 0;
    inset-block-end: 0;
    flex-direction: row;
    gap: 0;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-block-start: 1px solid var(--kcs-border);
    box-shadow: 0 -6px 24px -14px rgba(10, 37, 64, .4);
  }
  .kcs-dock__call,
  .kcs-dock__wa {
    flex: 1 1 0;
    justify-content: center;
    border-radius: var(--kcs-radius-sm);
    padding: 14px 12px;
    font-size: 15.5px;
  }
  .kcs-dock__call { box-shadow: none; margin-inline-end: 9px; }
  .kcs-dock__wa { box-shadow: none; }
  /* Reserve the dock's full height (plus safe-area) so it never covers content
     at the bottom of the page. */
  body { padding-block-end: calc(86px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------------------
   Booking panel
   ---------------------------------------------------------------------- */

.kcs-panel { position: fixed; inset: 0; z-index: 1000; }
.kcs-panel[hidden] { display: none; }

.kcs-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, .55);
  opacity: 0;
  transition: opacity var(--kcs-dur) var(--kcs-ease);
}
.kcs-panel.is-open .kcs-panel__scrim { opacity: 1; }

.kcs-panel__box {
  position: absolute;
  inset-inline-end: 22px;
  inset-block-end: 22px;
  inline-size: min(430px, calc(100vw - 44px));
  max-block-size: min(84vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--kcs-white);
  border-radius: var(--kcs-radius-lg);
  box-shadow: var(--kcs-shadow-lg);
  padding: 26px 24px 24px;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity var(--kcs-dur) var(--kcs-ease), transform var(--kcs-dur) var(--kcs-ease);
}
.kcs-panel.is-open .kcs-panel__box { opacity: 1; transform: none; }

.kcs-panel__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  inline-size: 34px;
  block-size: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kcs-wash);
  border: 0;
  border-radius: 50%;
  color: var(--kcs-muted);
  cursor: pointer;
  transition: background-color var(--kcs-dur) var(--kcs-ease), color var(--kcs-dur) var(--kcs-ease);
}
.kcs-panel__close:hover { background: var(--kcs-border); color: var(--kcs-ink); }
.kcs-panel__close svg { inline-size: 17px; block-size: 17px; }

@media (max-width: 767px) {
  .kcs-panel__box {
    inset-inline: 0;
    inset-block-end: 0;
    inline-size: 100%;
    max-block-size: 92vh;
    border-radius: var(--kcs-radius-lg) var(--kcs-radius-lg) 0 0;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .kcs-panel.is-open .kcs-panel__box { transform: none; }
}

/* -------------------------------------------------------------------------
   Lead form
   ---------------------------------------------------------------------- */

.kcs-leadform__title {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--kcs-ink);
  margin: 0 0 6px;
}
.kcs-leadform__intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--kcs-muted);
  margin: 0 0 18px;
}

.kcs-field { margin-block-end: 14px; }
.kcs-field label {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kcs-ink);
  margin-block-end: 6px;
}
.kcs-field label span { color: var(--kcs-primary); }

.kcs-field input,
.kcs-field select,
.kcs-field textarea {
  inline-size: 100%;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  color: var(--kcs-ink);
  background: var(--kcs-white);
  border: 1px solid #D8E2EC;
  border-radius: var(--kcs-radius-sm);
  padding: 12px 14px;
  transition: border-color .18s linear, box-shadow .18s linear;
  -webkit-appearance: none;
  appearance: none;
}
.kcs-field textarea { resize: vertical; min-block-size: 84px; }
.kcs-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  padding-inline-end: 40px;
}
.kcs-field input:focus,
.kcs-field select:focus,
.kcs-field textarea:focus {
  outline: none;
  border-color: var(--kcs-primary);
  box-shadow: 0 0 0 3px rgba(21, 100, 171, .14);
}
.kcs-field input[aria-invalid="true"],
.kcs-field select[aria-invalid="true"] { border-color: #DC2626; }

.kcs-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kcs-price {
  margin-block: 4px 16px;
  padding: 16px 18px;
  border: 1px solid var(--kcs-border);
  border-radius: var(--kcs-radius-sm);
  background: var(--kcs-wash);
}
.kcs-price__head {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kcs-muted);
}
.kcs-price__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 3px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kcs-ink-700);
}
.kcs-price__row span:last-child { font-weight: 600; text-align: end; }
.kcs-price__total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--kcs-border);
  font-size: 17px;
  font-weight: 700;
  color: var(--kcs-ink);
}
.kcs-price__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--kcs-muted);
}

@media (max-width: 480px) {
  .kcs-price { padding: 14px 15px; }
  .kcs-price__row { font-size: 14.5px; }
  .kcs-price__total { font-size: 16px; }
}
@media (max-width: 480px) { .kcs-field-row { grid-template-columns: 1fr; gap: 0; } }

.kcs-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.kcs-form__error {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 10px 12px;
}

.kcs-form__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kcs-muted);
  text-align: center;
}

.kcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  inline-size: 100%;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: var(--kcs-radius-sm);
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color var(--kcs-dur) var(--kcs-ease), transform var(--kcs-dur) var(--kcs-ease), box-shadow var(--kcs-dur) var(--kcs-ease);
}
.kcs-btn:hover { transform: translateY(-2px); }
.kcs-btn .kcs-icon { inline-size: 20px; block-size: 20px; flex: none; }
.kcs-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.kcs-btn--wa { background: var(--kcs-wa); color: #05320F; box-shadow: 0 10px 24px -12px rgba(37, 211, 102, .95); }
.kcs-btn--wa:hover { background: var(--kcs-wa-dark); color: #05320F; }

.kcs-btn--ghost {
  background: transparent;
  color: var(--kcs-primary);
  border: 1.5px solid rgba(21, 100, 171, .35);
  margin-block-start: 10px;
}
.kcs-btn--ghost:hover { background: var(--kcs-primary-soft); border-color: var(--kcs-primary); }

.kcs-leadform__done { text-align: center; }
.kcs-leadform__tick {
  inline-size: 56px;
  block-size: 56px;
  margin: 4px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #DCFCE7;
  color: #15803D;
}
.kcs-leadform__tick svg { inline-size: 26px; block-size: 26px; }

/* Inline (shortcode) presentation on light backgrounds */
.kcs-leadform:not(.is-compact) {
  background: var(--kcs-white);
  border: 1px solid var(--kcs-border-soft);
  border-radius: var(--kcs-radius-lg);
  box-shadow: var(--kcs-shadow);
  padding: 30px 28px;
}
@media (max-width: 600px) {
  .kcs-leadform:not(.is-compact) { padding: 24px 18px; }
}

/* -------------------------------------------------------------------------
   Motion preferences
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .kcs-reveal { opacity: 1; transform: none; transition: none; }
  .kcs-dock__wa.is-nudge { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   Print
   ---------------------------------------------------------------------- */

@media print {
  .kcs-dock, .kcs-panel, .site-navigation-toggle-holder { display: none !important; }
  .kcs-reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Booking charges: two independently selectable options
   ----------------------------------------------------------------------- */

.kcs-price__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kcs-charge {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-areas:
    "tick label"
    ".    amount";
  align-items: center;
  gap: 6px 11px;
  padding: 13px 14px;
  border: 1.5px solid var(--kcs-border);
  border-radius: var(--kcs-radius-sm);
  background: #FFFFFF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s var(--kcs-ease), background-color .18s var(--kcs-ease), box-shadow .18s var(--kcs-ease);
}
.kcs-charge:hover { border-color: var(--kcs-primary); }
.kcs-charge.is-on {
  border-color: var(--kcs-primary);
  background: var(--kcs-primary-soft);
  box-shadow: inset 0 0 0 1px var(--kcs-primary);
}

/* Native control stays in the accessibility tree and keeps keyboard behaviour;
   the square below is only its visible face. */
.kcs-charge__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.kcs-charge__tick {
  grid-area: tick;
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--kcs-border);
  border-radius: 6px;
  background: #FFFFFF;
  color: #FFFFFF;
  transition: background-color .18s var(--kcs-ease), border-color .18s var(--kcs-ease);
}
/* Elementor forces fill on inline SVG, which floods stroke-drawn icons solid. */
.kcs-charge__tick svg {
  inline-size: 13px;
  block-size: 13px;
  opacity: 0;
  fill: none !important;
  stroke: currentColor !important;
  transition: opacity .15s var(--kcs-ease);
}
.kcs-charge.is-on .kcs-charge__tick {
  background: var(--kcs-primary);
  border-color: var(--kcs-primary);
}
.kcs-charge.is-on .kcs-charge__tick svg { opacity: 1; }
.kcs-charge__input:focus-visible + .kcs-charge__tick {
  outline: 2px solid var(--kcs-primary);
  outline-offset: 2px;
}

.kcs-charge__label {
  grid-area: label;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kcs-ink);
}
.kcs-charge__amt {
  grid-area: amount;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--kcs-ink);
  font-variant-numeric: tabular-nums;
}

.kcs-price .kcs-price__total { margin-block-start: 14px; }

@media (max-width: 600px) {
  .kcs-price__options { grid-template-columns: 1fr; }
  .kcs-charge { padding: 12px 13px; }
  .kcs-charge__amt { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .kcs-charge,
  .kcs-charge__tick,
  .kcs-charge__tick svg { transition: none; }
}

/* -------------------------------------------------------------------------
   Long-form article body (pest control cost guide)
   ----------------------------------------------------------------------- */

.kcs-article .elementor-widget-heading { margin-block-start: 22px; }
.kcs-article > .e-con-inner > .elementor-widget-heading:first-child,
.kcs-article > .elementor-widget-heading:first-child { margin-block-start: 0; }

.kcs-article .kcs-article__h2 .elementor-heading-title {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--kcs-ink);
}
.kcs-article .kcs-article__h3 .elementor-heading-title {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.3;
  color: var(--kcs-ink);
}
.kcs-article .kcs-article__h4 .elementor-heading-title {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--kcs-ink);
}
.kcs-article .kcs-article__h3 { margin-block-start: 34px; }

.kcs-article .elementor-widget-text-editor {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--kcs-ink-700);
}
.kcs-article .elementor-widget-text-editor p { margin: 0 0 16px; }
.kcs-article .elementor-widget-text-editor p:last-child { margin-block-end: 0; }

.kcs-article .elementor-widget-text-editor ul,
.kcs-article .elementor-widget-text-editor ol {
  margin: 0 0 16px;
  padding-inline-start: 22px;
}
.kcs-article .elementor-widget-text-editor li { margin-block-end: 8px; }
.kcs-article .elementor-widget-text-editor li::marker { color: var(--kcs-primary); }

.kcs-article .kcs-article__price {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--kcs-primary);
  border-radius: 0 8px 8px 0;
  background: var(--kcs-primary-soft);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 17px;
  color: var(--kcs-ink);
  font-variant-numeric: tabular-nums;
}

.kcs-article .kcs-price-table { margin-block-end: 18px; }
.kcs-article .kcs-price-table table {
  border: 1px solid var(--kcs-border);
  border-radius: var(--kcs-radius-sm);
  overflow: hidden;
}

.kcs-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kcs-related li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 15px 17px;
  border: 1px solid var(--kcs-border);
  border-radius: var(--kcs-radius-sm);
  background: var(--kcs-wash);
}
.kcs-related__title {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--kcs-ink);
}
.kcs-related__date {
  font-size: 13.5px;
  color: var(--kcs-muted);
}

@media (max-width: 600px) {
  .kcs-article .kcs-article__h2 .elementor-heading-title { font-size: 27px; }
  .kcs-article .kcs-article__h3 .elementor-heading-title { font-size: 22px; }
  .kcs-article .kcs-article__h4 .elementor-heading-title { font-size: 18px; }
  .kcs-article .elementor-widget-text-editor { font-size: 16px; }
}

/* Diagrams inside the article body. The SVGs carry their own panel background
   and rounded border, so they need spacing rather than a frame. */
.kcs-article .kcs-article__figure {
  margin-block: 6px 12px;
}
.kcs-article .kcs-article__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--kcs-radius-sm);
  /* Below this width the labels inside the diagram stop being readable, so it
     scrolls sideways instead of shrinking - the same treatment wide tables get. */
  min-inline-size: 520px;
}
.kcs-article .kcs-article__figure {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* A little more room around the headings that follow a diagram. */
.kcs-article .kcs-article__figure + .elementor-widget-heading {
  margin-block-start: 28px;
}

/* ---------------------------------------------------------------------------
 * Current location
 * ------------------------------------------------------------------------ */
.kcs-locate { margin-block-start: 10px; }
.kcs-locate__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--kcs-primary);
  background: var(--kcs-wash);
  border: 1px solid var(--kcs-border);
  border-radius: var(--kcs-radius-sm);
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .18s linear, background-color .18s linear;
}
.kcs-locate__btn:hover { border-color: var(--kcs-primary); }
.kcs-locate__btn:focus-visible {
  outline: none;
  border-color: var(--kcs-primary);
  box-shadow: 0 0 0 3px rgba(21, 100, 171, .14);
}
.kcs-locate__btn[disabled] { opacity: .62; cursor: default; }
.kcs-locate__btn .kcs-icon { inline-size: 17px; block-size: 17px; flex: none; }
.kcs-locate__status {
  margin: 8px 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--kcs-muted);
}
.kcs-locate__status:empty { display: none; }
.kcs-locate[data-state="ok"] .kcs-locate__status { color: #15803D; }
.kcs-locate[data-state="weak"] .kcs-locate__status,
.kcs-locate[data-state="error"] .kcs-locate__status { color: #B45309; }
.kcs-locate[data-state="busy"] .kcs-locate__btn .kcs-icon { animation: kcs-locate-pulse 1s ease-in-out infinite; }
@keyframes kcs-locate-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .kcs-locate[data-state="busy"] .kcs-locate__btn .kcs-icon { animation: none; }
}
/* ---------------------------------------------------------------------------
 * Elementor kit override
 *
 * The kit styles every button as `.elementor-kit-6 button` - one class plus one
 * element - which outranks any single class of ours, so it was repainting the
 * form's own buttons kit-blue. Doubling the class lifts these to two classes
 * and wins on specificity without reaching for !important.
 * ------------------------------------------------------------------------ */
.kcs-btn.kcs-btn { padding: 15px 20px; border: 0; }
.kcs-btn--wa.kcs-btn--wa { background: var(--kcs-wa); color: #05320F; }
.kcs-btn--wa.kcs-btn--wa:hover { background: var(--kcs-wa-dark); color: #05320F; }
.kcs-btn--ghost.kcs-btn--ghost {
  background: transparent;
  color: var(--kcs-primary);
  border: 1.5px solid rgba(21, 100, 171, .35);
}
.kcs-btn--ghost.kcs-btn--ghost:hover {
  background: var(--kcs-primary-soft);
  border-color: var(--kcs-primary);
}
.kcs-locate__btn.kcs-locate__btn {
  background: var(--kcs-wash);
  color: var(--kcs-primary);
  border: 1px solid var(--kcs-border);
  padding: 9px 14px;
}
.kcs-locate__btn.kcs-locate__btn:hover {
  background: var(--kcs-wash);
  border-color: var(--kcs-primary);
}