/* =========================================================================
   KC Patel — Elementor bridge stylesheet
   -------------------------------------------------------------------------
   tokens.css supplies the design system (:root variables + base components).
   This file maps that design onto Elementor's own DOM, driven by `kc-*`
   classes applied to containers and widgets in the page data.

   Elementor DOM notes this file is written against:
     container       .e-con  (flex)
     widget wrapper  .elementor-element.elementor-widget-<type>
     heading         h1–h6.elementor-heading-title
     text editor     <p> directly inside the widget
     button          a.elementor-button (inside .elementor-button-wrapper)
     icon box        .elementor-icon-box-icon / -title / -description
     image           img

   `e_optimized_markup` is ACTIVE on this install, so .elementor-widget-container
   is often absent — nothing here depends on it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Reset Astra/Elementor defaults that fight the design
   ------------------------------------------------------------------------- */
.kc-page,
.kc-page p,
.kc-page h1, .kc-page h2, .kc-page h3, .kc-page h4 {
	font-family: inherit;
}
.kc-page .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--navy-900);
	margin: 0;
}
.kc-page p { margin: 0; }

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */
.kc-section { padding-block: var(--space-7) !important; }
.kc-section-tight { padding-block: var(--space-6) !important; }
.kc-bg-mint { background-color: var(--mint-50) !important; }
.kc-bg-mint-100 { background-color: var(--mint-100) !important; }
.kc-bg-navy { background-color: var(--navy-800) !important; }
.kc-bg-white { background-color: #fff !important; }

/* Dark-section text colours */
.kc-bg-navy .elementor-heading-title { color: #fff; }
.kc-bg-navy p { color: var(--text-inverse-muted); }

/* -------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------
   IMPORTANT: Elementor "boxed" containers do NOT hold their children directly.
   They render as:

       .e-con.e-con-boxed        <- the element carrying our kc-* class
         └── .e-con-inner        <- the actual children live here (flex column)

   So layout has to be applied to `> .e-con-inner`, not to the element with the
   class. Applying it to the outer element makes a grid whose only item is the
   inner wrapper, and everything stacks.

   Full-width containers have no inner wrapper and take the layout directly,
   which is what the :not(:has(...)) half of each selector covers.
   ------------------------------------------------------------------------- */

/* Neutralise the outer element on boxed containers so it doesn't impose a
   competing grid/flex context on the single .e-con-inner child. */
.kc-grid:has(> .e-con-inner),
.kc-split:has(> .e-con-inner),
.kc-row:has(> .e-con-inner),
.kc-footer-grid:has(> .e-con-inner) { display: block !important; }

/* --- Grid ------------------------------------------------------------- */
.kc-grid > .e-con-inner,
.kc-grid:not(:has(> .e-con-inner)) {
	display: grid !important;
	gap: var(--space-5);
	align-content: start;
	width: 100%;
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.kc-grid-2 > .e-con-inner, .kc-grid-2:not(:has(> .e-con-inner)),
	.kc-grid-4 > .e-con-inner, .kc-grid-4:not(:has(> .e-con-inner)) {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 900px) {
	.kc-grid-3 > .e-con-inner, .kc-grid-3:not(:has(> .e-con-inner)) {
		grid-template-columns: repeat(3, 1fr);
	}
	.kc-grid-4 > .e-con-inner, .kc-grid-4:not(:has(> .e-con-inner)) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Two-column split (hero / about / faq / contact) ------------------- */
.kc-split > .e-con-inner,
.kc-split:not(:has(> .e-con-inner)) {
	display: grid !important;
	gap: var(--space-7);
	align-items: center;
	width: 100%;
	grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
	.kc-split > .e-con-inner, .kc-split:not(:has(> .e-con-inner)) {
		grid-template-columns: 1fr 1fr;
	}
	.kc-split-hero > .e-con-inner, .kc-split-hero:not(:has(> .e-con-inner)) {
		grid-template-columns: 1.02fr 0.98fr;
		align-items: end;
	}
	.kc-split-about > .e-con-inner, .kc-split-about:not(:has(> .e-con-inner)) {
		grid-template-columns: 0.9fr 1.1fr;
	}
}

/* --- Horizontal row that wraps ---------------------------------------- */
.kc-row > .e-con-inner,
.kc-row:not(:has(> .e-con-inner)) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	width: 100%;
}
.kc-row-tight > .e-con-inner,
.kc-row-tight:not(:has(> .e-con-inner)) { gap: var(--space-3); }

/* --- Vertical stack ---------------------------------------------------- */
.kc-stack > .e-con-inner,
.kc-stack:not(:has(> .e-con-inner)) {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--space-4);
	align-items: flex-start;
}
.kc-stack-center > .e-con-inner,
.kc-stack-center:not(:has(> .e-con-inner)) { align-items: center; text-align: center; }

/* --- Padding ----------------------------------------------------------- */
/* Pad the inner wrapper when Elementor made one, the container itself when it
   did not — never both. All 87 kc-pad/kc-pad-lg containers on this site are
   boxed, so the old `.kc-pad, .kc-pad > .e-con-inner` form applied 32px twice:
   a 287px card was left with 157px of usable width. */
.kc-pad:not(:has(> .e-con-inner)),
.kc-pad > .e-con-inner { padding: var(--space-6) !important; }
.kc-pad:has(> .e-con-inner) { padding: 0 !important; }

.kc-pad-lg:not(:has(> .e-con-inner)),
.kc-pad-lg > .e-con-inner { padding: var(--space-8) var(--space-7) !important; }
.kc-pad-lg:has(> .e-con-inner) { padding: 0 !important; }

.kc-pad > .e-con-inner, .kc-pad-lg > .e-con-inner { width: 100%; }

/* -------------------------------------------------------------------------
   Typography helpers
   ------------------------------------------------------------------------- */
.kc-h1 .elementor-heading-title { font-size: var(--text-6xl); }
.kc-h2 .elementor-heading-title { font-size: var(--text-4xl); }
.kc-h3 .elementor-heading-title { font-size: var(--text-xl); }
.kc-h4 .elementor-heading-title { font-size: var(--text-base); }

/* Teal accent word inside a heading (wrap in <span class="accent">) */
.kc-page .elementor-heading-title .accent { color: var(--teal-600); }

.kc-lede p,
.kc-lede { font-size: var(--text-lg); color: var(--text-500); line-height: 1.65; }
.kc-bg-navy .kc-lede p { color: var(--text-inverse-muted); }

.kc-body p { color: var(--text-700); }
.kc-small p { font-size: var(--text-sm); color: var(--text-500); }
.kc-center { text-align: center; }
.kc-center .elementor-heading-title { text-align: center; }

/* Pill badge */
.kc-pill .elementor-heading-title,
.kc-pill p {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--teal-100);
	color: var(--teal-700);
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0;
}
.kc-bg-navy .kc-pill p,
.kc-bg-navy .kc-pill .elementor-heading-title {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Centred section heading with the teal rule underneath */
.kc-rule .elementor-heading-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: var(--space-3) auto 0;
	background: var(--teal-500);
	border-radius: var(--radius-full);
}

/* -------------------------------------------------------------------------
   Buttons — Elementor renders a.elementor-button
   ------------------------------------------------------------------------- */
/* `.kc-page` lifts these to (0,3,0). At (0,2,0) they tied with Astra's inline
   `.elementor-widget-button .elementor-button { color: #fff }`, so whichever
   stylesheet printed last won — white text on white buttons in some contexts
   (logged-in / editor preview). Per-widget Elementor colours (0,4,0) still win. */
.kc-page .kc-btn .elementor-button,
.kc-page .kc-btn-outline .elementor-button,
.kc-page .kc-btn-white .elementor-button,
.kc-page .kc-btn-ghost .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: 0 var(--space-6);
	border-radius: var(--radius-sm);
	border: 1.5px solid transparent;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	line-height: 1;
	transition: background var(--duration-base) var(--ease-premium),
	            color var(--duration-base) var(--ease-premium),
	            border-color var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium);
}
.kc-page .kc-btn .elementor-button { background: var(--teal-700); color: #fff; }
.kc-page .kc-btn .elementor-button:hover,
.kc-page .kc-btn .elementor-button:focus { background: var(--teal-800); color: #fff; box-shadow: var(--shadow-md); }

.kc-page .kc-btn-outline .elementor-button { background: transparent; color: var(--teal-700); border-color: var(--teal-700); }
.kc-page .kc-btn-outline .elementor-button:hover,
.kc-page .kc-btn-outline .elementor-button:focus { background: var(--teal-700); color: #fff; }

.kc-page .kc-btn-white .elementor-button { background: #fff; color: var(--teal-700); }
.kc-page .kc-btn-white .elementor-button:hover,
.kc-page .kc-btn-white .elementor-button:focus { background: var(--mint-100); color: var(--teal-800); }

.kc-btn-lg .elementor-button { min-height: 54px; padding-inline: var(--space-7); }
.kc-btn-sm .elementor-button { min-height: 42px; padding-inline: var(--space-5); font-size: var(--text-sm); }

/* Elementor's own size classes shouldn't override our padding */
.kc-page .elementor-button.elementor-size-sm,
.kc-page .elementor-button.elementor-size-md,
.kc-page .elementor-button.elementor-size-lg { font-size: inherit; padding: 0 var(--space-6); }
.kc-page .kc-btn-lg .elementor-button { padding-inline: var(--space-7); }

/* Visible focus ring, never removed */
.kc-page .elementor-button:focus-visible {
	outline: 3px solid var(--teal-700);
	outline-offset: 3px;
}
.kc-bg-navy .elementor-button:focus-visible { outline-color: var(--teal-200); }

/* -------------------------------------------------------------------------
   Cards — applied to containers
   ------------------------------------------------------------------------- */
/* Prefixed with .kc-page so these beat Elementor's own `.e-con` container rules
   (`.e-con { border-radius: var(--border-radius) }` in frontend.min.css loads
   after this file, so at equal specificity Elementor would otherwise win). */
.kc-page .kc-card {
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
	transition: transform var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium),
	            border-color var(--duration-base) var(--ease-premium);
}
.kc-page .kc-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	border-color: var(--teal-200);
}

.kc-page .kc-tile {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-100);
	background: #fff;
}
.kc-page .kc-tile-mint { background: var(--mint-100); border-color: var(--mint-200); }
.kc-page .kc-tile-navy { background: var(--navy-800); border-color: var(--navy-800); }
.kc-tile-navy .elementor-heading-title { color: #fff; }
.kc-tile-navy p { color: var(--text-inverse-muted); }

/* -------------------------------------------------------------------------
   Icon boxes — service cards and credentials
   ------------------------------------------------------------------------- */
.kc-iconbox .elementor-icon-box-icon {
	width: 62px;
	height: 62px;
	border-radius: var(--radius-md);
	background: var(--teal-100);
	color: var(--teal-700);
	display: grid !important;
	place-items: center;
	margin-bottom: var(--space-5);
}
.kc-iconbox .elementor-icon-box-icon .elementor-icon { color: var(--teal-700); font-size: 28px; }
.kc-iconbox .elementor-icon-box-icon svg { width: 28px; height: 28px; fill: var(--teal-700); }
.kc-iconbox .elementor-icon-box-title,
.kc-iconbox .elementor-icon-box-title a {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--navy-900);
	letter-spacing: -0.02em;
}
.kc-iconbox .elementor-icon-box-description {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--text-500);
	line-height: 1.65;
}
/* Inline (left-icon) variant used in the credentials list */
.kc-iconbox-inline .elementor-icon-box-icon {
	width: 46px; height: 46px; border-radius: var(--radius-sm); margin-bottom: 0;
}
.kc-iconbox-inline .elementor-icon-box-icon svg { width: 22px; height: 22px; }
.kc-iconbox-inline .elementor-icon-box-title { font-size: var(--text-base); }

/* -------------------------------------------------------------------------
   Stats
   ------------------------------------------------------------------------- */
.kc-stat-num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 800;
	line-height: 1;
	color: var(--navy-900);
}
.kc-bg-navy .kc-stat-num .elementor-heading-title { color: #fff; }
.kc-stat-num .elementor-heading-title .unit { color: var(--on-dark); }
.kc-stat-label p { font-size: var(--text-sm); color: var(--text-500); margin-top: var(--space-2); }
.kc-bg-navy .kc-stat-label p { color: var(--text-inverse-muted); }

/* Small inline hero stat */
.kc-hero-stat .elementor-heading-title { font-size: var(--text-xl); font-weight: 800; }

/* -------------------------------------------------------------------------
   Hero — teal organic shape behind the cut-out photo
   ------------------------------------------------------------------------- */
.kc-page .kc-hero { background: var(--mint-50); overflow: hidden; }
.kc-page .kc-hero-figure { position: relative; align-self: end; }
.kc-hero-figure::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 86%;
	background: var(--teal-500);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	border-top-left-radius: 45% 22%;
	border-top-right-radius: 18% 12%;
	z-index: 0;
}
.kc-hero-figure::after {
	content: "";
	position: absolute;
	right: 4%; top: 14%;
	width: 108px; height: 88px;
	background-image: radial-gradient(var(--teal-200) 1.8px, transparent 1.8px);
	background-size: 13px 13px;
	z-index: 1;
}
.kc-hero-photo { position: relative; z-index: 2; }
.kc-hero-photo img {
	display: block;
	margin-inline: auto;
	width: auto;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 18px 36px rgba(27, 46, 63, 0.18));

	/* The portrait stands ON the shape: feet flush with its bottom edge, head
	   and shoulders rising clear of it.

	   The negative top margin is doing real work. ::before is height:86% OF
	   THE FIGURE, so simply making the image taller would grow the figure and
	   the shape with it — the photo would never outgrow its background. The
	   negative margin keeps the image's *layout* height at 640 while it
	   *renders* at 690, so the figure (and therefore the shape) stays put. */
	height: 690px;
	max-height: none;
	margin-top: -50px;
}
/* Elementor's own 10px block padding left a navy strip under the feet. */
.kc-page .kc-hero-figure > .e-con-inner { padding-block: 0 !important; }

/* Floating 24/7 card */
.kc-float-card {
	position: absolute !important;
	right: 0; bottom: 15%;
	z-index: 3;
	background: #fff !important;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	max-width: 210px;
}
.kc-float-card .elementor-heading-title { font-size: var(--text-xl); font-weight: 800; }
@media (max-width: 1024px) {
	.kc-float-card { right: var(--space-3); bottom: var(--space-6); }
}

/* -------------------------------------------------------------------------
   Check list (Why Choose Us)
   ------------------------------------------------------------------------- */
.kc-checklist .elementor-icon-list-item { align-items: flex-start; }
.kc-checklist .elementor-icon-list-icon { color: var(--teal-600); }
.kc-checklist .elementor-icon-list-icon svg { fill: var(--teal-600); width: 17px; height: 17px; }
.kc-checklist .elementor-icon-list-text { font-size: var(--text-sm); color: var(--text-700); }

/* Chips */
.kc-chip p,
.kc-chip .elementor-heading-title {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	background: #fff;
	border: 1px solid var(--border-200);
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--navy-700);
	letter-spacing: 0;
}

/* Price */
.kc-price .elementor-heading-title {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--amber-600);
	line-height: 1.1;
}
.kc-emergency .elementor-heading-title {
	font-size: var(--text-4xl);
	font-weight: 800;
	color: var(--amber-500);
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Process step numbers
   ------------------------------------------------------------------------- */
.kc-step-num .elementor-heading-title {
	width: 62px; height: 62px;
	margin: 0 auto;
	border-radius: var(--radius-full);
	background: #fff;
	border: 2px solid var(--teal-200);
	color: var(--teal-700);
	display: grid;
	place-items: center;
	font-size: var(--text-xl);
	font-weight: 800;
}

/* -------------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------------- */
.kc-quote p {
	font-size: var(--text-sm);
	color: var(--text-700);
	line-height: 1.7;
}
.kc-stars p { color: var(--amber-500); letter-spacing: 2px; font-size: var(--text-base); }
.kc-author p { font-size: var(--text-sm); }
.kc-author strong { color: var(--navy-900); display: block; }
.kc-author span { font-size: var(--text-xs); color: var(--text-500); }

/* -------------------------------------------------------------------------
   Accordion (Elementor core accordion widget)
   ------------------------------------------------------------------------- */
.kc-accordion .elementor-accordion-item {
	background: #fff;
	border: 1px solid var(--border-100) !important;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
	overflow: hidden;
}
.kc-accordion .elementor-tab-title {
	padding: var(--space-5) !important;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--navy-900);
	min-height: 48px;
}
.kc-accordion .elementor-tab-title.elementor-active { color: var(--teal-700); }
.kc-accordion .elementor-tab-content {
	padding: 0 var(--space-5) var(--space-5) !important;
	font-size: var(--text-sm);
	color: var(--text-500);
	border: none !important;
}
.kc-accordion .elementor-accordion-icon { color: var(--teal-600); }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.kc-section { padding-block: var(--space-6) !important; }
	.kc-hero-photo img { height: 480px; max-height: none; margin-top: -40px; }
	.kc-float-card { max-width: 180px; }
}

/* Nothing here should ever produce sideways scroll */
.kc-page { overflow-x: clip; }

/* =========================================================================
   HEADER / FOOTER (ElementsKit templates)
   ElementsKit wraps these in .ekit-template-content-header / -footer.
   ========================================================================= */

/* --- Utility bar ------------------------------------------------------- */
.kc-topbar {
	background: #fff !important;
	border-bottom: 1px solid var(--border-100);
	padding-block: var(--space-2) !important;
}
.kc-topbar-inner {
	max-width: var(--container-max);
	margin-inline: auto !important;
	padding-inline: var(--gutter) !important;
	justify-content: space-between;
	gap: var(--space-5) !important;
	width: 100% !important;
}
.kc-topbar-text p,
.kc-topbar-links p { font-size: var(--text-xs); color: var(--text-500); margin: 0; }
.kc-topbar-links a { color: var(--text-500); }
.kc-topbar-links a:hover { color: var(--teal-700); }
@media (max-width: 767px) { .kc-topbar { display: none !important; } }

/* --- Main header ------------------------------------------------------- */
/* The glass (background + blur + shadow) deliberately lives on `.kc-header`,
   not on this wrapper — see the utility-bar block further down, which pulls
   the wrapper up so the top bar can scroll away.
   It must NOT come back here: `backdrop-filter` on an ancestor makes that
   ancestor the containing block for every `position: fixed` descendant, so
   the floating social rail inside the header scrolls with the page instead
   of holding still against the viewport. */
.ekit-template-content-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.kc-header { background: transparent !important; padding-block: var(--space-3) !important; }
.kc-header-inner {
	max-width: var(--container-max);
	margin-inline: auto !important;
	padding-inline: var(--gutter) !important;
	width: 100% !important;
	justify-content: space-between;
	flex-wrap: nowrap !important;
	gap: var(--space-5) !important;
	min-height: 72px;
}
.kc-logo img { height: 52px; width: auto; }
.kc-header-actions { flex-wrap: nowrap !important; gap: var(--space-4) !important; }

/* Phone block */
.kc-header-phone p { margin: 0; font-size: var(--text-sm); line-height: 1.25; }
.kc-header-phone a { display: block; color: var(--navy-800); }
.kc-header-phone strong { display: block; font-weight: 700; color: var(--navy-800); }
.kc-header-phone span { font-size: 0.68rem; color: var(--text-500); font-weight: 500; }
@media (max-width: 1024px) { .kc-header-phone { display: none !important; } }

/* ElementsKit nav menu */
.kc-nav .elementskit-navbar-nav > li > a {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--text-700) !important;
	padding: var(--space-3) var(--space-3) !important;
	transition: color var(--duration-base);
}
.kc-nav .elementskit-navbar-nav > li > a:hover,
.kc-nav .elementskit-navbar-nav > li.current-menu-item > a { color: var(--teal-700) !important; }
.kc-nav .elementskit-menu-hamburger { border-color: var(--border-200); }
.kc-nav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { background: var(--navy-800); }

/* Desktop dropdown: don't drop the menu on the way down to it.
   ElementsKit hides the panel the instant `li:hover` is lost — no grace period.
   At 100% zoom the panel sits flush under the item, but at browser zoom or
   Windows display scaling the 50.4px item height snaps to device pixels
   differently from the (transformed, separately composited) panel, leaving a
   1px seam that belongs to neither. Crossing it closes the menu.
   1. A transparent bridge above the panel covers any seam.
   2. Closing waits 300ms, so a brief slip off the item doesn't close it.
      `pointer-events` stays on — `visibility` alone gates interaction, and it
      stays visible for the grace period so the pointer can come back.
   3. `:focus-within` opens it for keyboard users too. */
@media (min-width: 1025px) {
	.kc-nav .ekit-nav-dropdown-hover .elementskit-dropdown-has > .elementskit-dropdown {
		pointer-events: auto !important;
		transition: opacity 0.15s ease 0.15s, visibility 0s linear 0.3s, transform 0.25s ease 0.15s !important;
	}
	.kc-nav .ekit-nav-dropdown-hover .elementskit-dropdown-has:hover > .elementskit-dropdown,
	.kc-nav .ekit-nav-dropdown-hover .elementskit-dropdown-has:focus-within > .elementskit-dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s !important;
	}
	.kc-nav .ekit-nav-dropdown-hover .elementskit-dropdown-has > .elementskit-dropdown::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 14px;
	}
}

/* --- Footer ------------------------------------------------------------ */
.kc-footer { padding-block: var(--space-7) var(--space-5) !important; }
.kc-footer-grid > .e-con-inner,
.kc-footer-grid:not(:has(> .e-con-inner)) {
	display: grid !important;
	gap: var(--space-7);
	max-width: var(--container-max);
	margin-inline: auto !important;
	padding-inline: var(--gutter) !important;
	width: 100% !important;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.kc-footer-grid > .e-con-inner,
	.kc-footer-grid:not(:has(> .e-con-inner)) { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}
.kc-footer-logo img { height: 56px; width: auto; }
.kc-footer-text p { font-size: var(--text-sm); color: var(--text-inverse-muted); max-width: 34ch; }
.kc-footer-head .elementor-heading-title {
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.kc-footer-links p { font-size: var(--text-sm); color: var(--text-inverse-muted); line-height: 2; }
.kc-footer-links a { color: var(--text-inverse-muted); transition: color var(--duration-base); }
.kc-footer-links a:hover { color: var(--on-dark); }

.kc-social .elementor-social-icon {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	width: 40px; height: 40px;
	transition: background var(--duration-base), border-color var(--duration-base);
}
.kc-social .elementor-social-icon:hover { background: var(--teal-600) !important; border-color: var(--teal-600); }
.kc-social .elementor-social-icon i { color: #fff; font-size: 16px; }

.kc-footer-bottom {
	max-width: var(--container-max);
	margin: var(--space-7) auto 0 !important;
	padding: var(--space-5) var(--gutter) 0 !important;
	width: 100% !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	justify-content: space-between;
}
.kc-footer-legal p { font-size: var(--text-xs); color: var(--text-inverse-muted); margin: 0; }
.kc-footer-legal a { color: var(--text-inverse-muted); }
.kc-footer-legal a:hover { color: var(--on-dark); }

/* Focus visibility inside header/footer */
.ekit-template-content-header a:focus-visible,
.ekit-template-content-footer a:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
.ekit-template-content-footer a:focus-visible { outline-color: var(--teal-200); }

/* Active nav item, set by the scrollspy in main.js (WordPress cannot resolve
   "current" for same-URL anchor links on a one-page site). */
.kc-nav .elementskit-navbar-nav > li > a.kc-nav-active,
.kc-nav .elementskit-navbar-nav > li > a[aria-current="true"] {
	color: var(--teal-700) !important;
	box-shadow: inset 0 -2px 0 var(--teal-600);
}

/* Offset anchor jumps so the sticky header doesn't cover the section heading. */
.kc-page [id] { scroll-margin-top: 108px; }
@media (max-width: 767px) { .kc-page [id] { scroll-margin-top: 84px; } }

/* -------------------------------------------------------------------------
   Touch targets — WCAG 2.5.5 / platform minimum is 44x44px.
   ElementsKit's hamburger ships at 29px and the small button variant at 42px.
   ------------------------------------------------------------------------- */
/* Scoped to mobile: an unscoped `display: inline-flex !important` here also
   overrode ElementsKit's desktop `display:none`, leaving the hamburger visible
   alongside the full inline nav above 1024px. */
@media (max-width: 1024px) {
	.kc-nav .elementskit-menu-hamburger {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex !important;
		/* Without an explicit column the three bars become flex items in a ROW
		   and render as three 9x1px dashes side by side. */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: var(--space-2) !important;
	}
	.kc-nav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
		width: 20px;
		height: 2px;
		margin: 0;
		border-radius: 1px;
		flex: 0 0 auto;
	}
}
.kc-page .kc-btn-sm .elementor-button { min-height: 44px; }

/* Astra's skip link is 22px tall; give it a real target when focused. */
.kc-page .skip-link:focus,
.skip-link:focus-visible { min-height: 44px; display: inline-flex; align-items: center; }

/* Accordion: Elementor's clickable row is .elementor-tab-title, but the inner
   <a> is what a screen reader / pointer actually targets — let it fill the row. */
.kc-accordion .elementor-tab-title a,
.kc-accordion a.elementor-accordion-title {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
}

/* Footer links are <br>-separated inside a paragraph, which left them ~15px
   tall. Inline-block padding lifts the tap target above the 24px WCAG 2.5.8
   minimum without stretching the footer, since line-height already reserves
   most of that space. */
.kc-footer-links a,
.kc-footer-legal a,
.kc-topbar-links a {
	display: inline-block;
	padding-block: 8px;
}

/* =========================================================================
   HEADER / FOOTER CORRECTIONS
   ========================================================================= */

/* --- Logo sizing ------------------------------------------------------- */
/* The logo is a wordmark (icon over two lines of text), so it needs real
   height to stay legible — 52px rendered the strapline as a smudge. */
.kc-logo img {
	height: 60px !important;
	width: auto !important;
	max-width: none !important;
}

/* The logo artwork is navy + teal on transparent, which disappears against the
   navy footer. Knock it out to solid white. Replace with a proper white asset
   at assets/images/logo-white.png for full-colour fidelity. */
.kc-footer-logo img {
	height: 64px !important;
	width: auto !important;
	max-width: none !important;
	filter: brightness(0) invert(1);
}

/* --- Header row layout -------------------------------------------------- */
/* Elementor containers default to width:100%, which made the actions block
   claim 764px and squeeze the nav into a wrapping 364px column. */
.kc-header-inner > .e-con-inner {
	flex-wrap: nowrap !important;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5) !important;
	min-height: 84px;
}
.kc-header-inner .kc-logo { flex: 0 0 auto; width: auto !important; }
.kc-header-inner .kc-nav { flex: 1 1 auto; width: auto !important; }
.kc-header-inner .kc-header-actions { flex: 0 0 auto; width: auto !important; }
.kc-header-actions > .e-con-inner {
	width: auto !important;
	flex-wrap: nowrap !important;
	justify-content: flex-end;
}

/* Nav must sit on one line */
.kc-nav .elementskit-navbar-nav { flex-wrap: nowrap !important; }
.kc-nav .elementskit-navbar-nav > li > a {
	white-space: nowrap;
	padding: var(--space-3) var(--space-2) !important;
}

/* ElementsKit's off-canvas identity panel is mobile-only chrome */
@media (min-width: 1025px) {
	.kc-nav .elementskit-nav-identity-panel,
	.kc-nav .elementskit-menu-close,
	.kc-nav .elementskit-menu-overlay { display: none !important; }
}

/* --- Astra's own copyright bar ------------------------------------------ */
/* ElementsKit replaces astra_footer_markup but Astra's small footer bar
   survives, printing "Powered by Astra WordPress Theme" above our footer. */
.ast-small-footer,
.site-footer .ast-footer-copyright,
.site-primary-footer-wrap,
.site-below-footer-wrap { display: none !important; }

/* --- Outline button ------------------------------------------------------ */
/* Transparent on the mint hero read as an empty box; a white fill plus a
   heavier border makes it legible as a secondary action. */
.kc-page .kc-btn-outline .elementor-button {
	background: #fff;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: var(--teal-700) !important;
}
.kc-page .kc-btn-outline .elementor-button:hover,
.kc-page .kc-btn-outline .elementor-button:focus {
	background: var(--teal-700);
	color: #fff;
	border-color: var(--teal-700) !important;
}

/* --- Mobile header ------------------------------------------------------ */
/* The ElementsKit nav container collapses to 0 width once the menu becomes a
   hamburger, letting the button (overflow:visible) render on top of the logo.
   Give it a real slot and push it to the far right. */
@media (max-width: 1024px) {
	.kc-header-inner > .e-con-inner {
		gap: var(--space-3) !important;
		justify-content: space-between;
	}
	.kc-header-inner .kc-logo { order: 1; flex: 0 0 auto; }
	.kc-header-inner .kc-header-actions { order: 2; flex: 0 1 auto; }
	.kc-header-inner .kc-nav {
		order: 3;
		flex: 0 0 auto;
		width: 46px !important;
		min-width: 46px;
		display: flex;
		justify-content: flex-end;
	}
	/* Trim the CTA so logo + button + hamburger fit a 375px viewport */
	.kc-header-actions .kc-btn .elementor-button {
		padding-inline: var(--space-4);
		font-size: var(--text-sm);
	}
	.kc-logo img { height: 48px !important; }
}

/* ElementsKit's own `.elementskit-menu-offcanvas-elements.active { left: 0 }`
   is losing the cascade here, so the panel stayed parked off-screen at -375px
   even though the toggler was correctly adding the class. Re-assert it. */
@media (max-width: 1024px) {
	.kc-nav .elementskit-menu-offcanvas-elements.active,
	.kc-nav .elementskit-menu-container.active,
	.kc-nav .elementskit-menu-overlay.active { left: 0 !important; }

	/* Panel sits above the sticky header and page content */
	.kc-nav .elementskit-menu-container.elementskit-menu-offcanvas-elements { z-index: 999; }
	.kc-nav .elementskit-menu-overlay { z-index: 998; }

	/* Close button needs a real tap target */
	.kc-nav .elementskit-menu-close { min-width: 44px; min-height: 44px; }
}

/* =========================================================================
   ABOUT PHOTO ACCENTS + COUNTERS
   Matches the static build: dotted accent behind the portrait and a
   "15+ Years of Practice" badge overlapping its lower-right corner.
   ========================================================================= */
.kc-page .kc-about-figure { position: relative; }
.kc-page .kc-about-figure::before {
	content: "";
	position: absolute;
	left: -18px;
	bottom: -18px;
	width: 140px;
	height: 140px;
	z-index: 0;
	background-image: radial-gradient(var(--teal-200) 2px, transparent 2px);
	background-size: 14px 14px;
	pointer-events: none;
}
.kc-page .kc-about-figure .kc-about-photo { position: relative; z-index: 1; }
.kc-page .kc-about-figure .kc-about-photo img {
	border-radius: var(--radius-lg);
	width: 100%;
	height: auto;
}

.kc-page .kc-about-badge {
	position: absolute !important;
	right: -12px;
	bottom: 28px;
	z-index: 2;
	width: auto !important;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4) var(--space-5) !important;
	text-align: center;
}
.kc-page .kc-about-badge > .e-con-inner {
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	gap: 2px;
}
.kc-badge-num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--teal-700);
	line-height: 1;
}
.kc-badge-label p {
	font-size: var(--text-xs);
	color: var(--text-500);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.kc-page .kc-about-badge { right: var(--space-3); bottom: var(--space-3); }
	.kc-page .kc-about-figure::before { display: none; }
}

/* Counter suffix should inherit the number's styling, not shrink */
.kc-page .count,
.kc-page .kc-stat-num .unit,
.kc-page .kc-hero-stat .unit { font: inherit; color: inherit; }
.kc-page .kc-stat-num .unit { color: var(--on-dark); }

/* =========================================================================
   TESTIMONIAL CAROUSEL + GLOBAL CHROME
   Brings the WordPress build in line with the static one.
   ========================================================================= */

/* Scroll-snap track, matching the static build. Three fit on desktop, so the
   arrows only really do work on narrower screens — but they stay available. */
.kc-page .kc-stories-track > .e-con-inner {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: 85%;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--space-3);
	scrollbar-width: none;
	grid-template-columns: none !important;
}
.kc-page .kc-stories-track > .e-con-inner::-webkit-scrollbar { display: none; }
.kc-page .kc-stories-track > .e-con-inner > * { scroll-snap-align: start; }
@media (min-width: 768px) { .kc-page .kc-stories-track > .e-con-inner { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .kc-page .kc-stories-track > .e-con-inner { grid-auto-columns: 31.5%; } }

.kc-stories-nav > .e-con-inner { width: 100% !important; }
.carousel-nav { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.cnav-btn {
	width: 46px; height: 46px; border-radius: var(--radius-full);
	border: 1px solid var(--border-200); background: #fff; color: var(--navy-800);
	display: grid; place-items: center; cursor: pointer;
	transition: background var(--duration-base), color var(--duration-base), border-color var(--duration-base);
}
.cnav-btn svg { width: 18px; height: 18px; }
.cnav-btn:hover { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.cnav-btn:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }

/* --- Mobile sticky CTA bar --------------------------------------------- */
.mobile-cta-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	background: #fff; border-top: 1px solid var(--border-100);
	box-shadow: var(--shadow-lg);
	padding: var(--space-3) var(--gutter);
	padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
	display: flex; gap: var(--space-3);
}
.mobile-cta-bar .btn {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: 48px; padding: 0 var(--space-5);
	border-radius: var(--radius-sm); border: 2px solid transparent;
	background: var(--teal-700); color: #fff;
	font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
	text-decoration: none;
}
.mobile-cta-bar .btn svg { width: 18px; height: 18px; }
.mobile-cta-bar .btn--outline { background: #fff; color: var(--teal-700); border-color: var(--teal-700); }
.mobile-cta-bar .btn:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
@media (min-width: 1025px) { .mobile-cta-bar { display: none; } }

/* --- Back to top -------------------------------------------------------- */
.back-to-top {
	position: fixed; right: var(--space-5);
	bottom: calc(var(--space-5) + 76px);
	width: 48px; height: 48px; border-radius: var(--radius-full);
	background: var(--teal-700); color: #fff; border: none; cursor: pointer;
	display: grid; place-items: center; box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(8px); z-index: 96;
	transition: opacity var(--duration-base) var(--ease-premium),
	            transform var(--duration-base) var(--ease-premium),
	            visibility var(--duration-base);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
@media (min-width: 1025px) { .back-to-top { bottom: var(--space-6); } }

/* Keep the sticky bar from covering the end of the page on mobile */
@media (max-width: 1024px) { .kc-page .site-footer { padding-bottom: 88px; } }

/* Astra styles bare <button> with `padding: 15px 30px`, which stretched the
   circular carousel and back-to-top controls. Reset it explicitly. */
.kc-page .cnav-btn,
.kc-page .back-to-top,
.cnav-btn,
.back-to-top {
	padding: 0 !important;
	min-width: 0;
	flex: 0 0 auto;
	line-height: 1;
}
.kc-page .cnav-btn, .cnav-btn { width: 46px !important; height: 46px !important; }
.kc-page .back-to-top, .back-to-top { width: 48px !important; height: 48px !important; }

/* Disabled carousel controls (nothing left to scroll) */
.cnav-btn:disabled { opacity: 0.4; cursor: default; }
.cnav-btn:disabled:hover { background: #fff; color: var(--navy-800); border-color: var(--border-200); }

/* =========================================================================
   STICKY HEADER — only the nav row should pin
   -------------------------------------------------------------------------
   ElementsKit renders the utility bar and the nav row inside one template
   wrapper, so making the wrapper sticky pinned all 203px of it and left the
   utility bar permanently eating vertical space (and covering the hero pill).

   Pulling the wrapper up by exactly the utility bar's height lets that bar
   scroll away while the nav row lands flush at the top. --kc-topbar-h is
   measured at runtime in main.js so it stays correct when the bar wraps.
   ========================================================================= */
.ekit-template-content-header {
	position: sticky;
	top: calc(-1 * var(--kc-topbar-h, 0px));
	z-index: 100;
}

/* The nav row needs its own background, since the wrapper's now partly
   scrolled out from under it. */
.kc-header {
	background: rgba(255, 255, 255, 0.96) !important;
	box-shadow: 0 1px 0 var(--border-100);
}
@supports (backdrop-filter: blur(1px)) {
	.kc-header { backdrop-filter: blur(12px); }
}

/* =========================================================================
   FLOATING SOCIAL RAIL
   A social-icons widget in the header template set to Position: Fixed in
   Elementor. Elementor writes `top: 50%`, which puts the widget's TOP EDGE
   at mid-viewport, so the stack hangs below centre by its own full height.
   Pull it back by half of itself. (A transform on the fixed element itself
   is safe — only a transform on an ANCESTOR would break the fixing.)
   ========================================================================= */
.ekit-template-content-header .elementor-widget-social-icons.elementor-fixed {
	transform: translateY(-50%);
}

/* On phones the rail stays, just smaller — 50px icons eat an eighth of a
   375px screen. 40px keeps it comfortably above the 44px touch minimum
   while giving the page back its edge.
   `!important` because Elementor's own `post-15.css` sets the 50px width at
   the same specificity and loads after this file. */
@media (max-width: 767px) {
	.ekit-template-content-header .elementor-widget-social-icons.elementor-fixed {
		width: 40px !important;
		max-width: 40px !important;
		--container-widget-width: 40px !important;
	}
	.ekit-template-content-header .elementor-widget-social-icons.elementor-fixed .elementor-social-icon {
		width: 40px;
		height: 40px;
		font-size: 19px;
		border-radius: 12px;
	}
}

/* =========================================================================
   HERO 24/7 CARD
   ========================================================================= */
.kc-page .kc-float-card {
	position: absolute !important;
	right: 0;
	bottom: 15%;
	z-index: 3;
	width: auto !important;
	max-width: 240px;
	background: #fff !important;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4) var(--space-5) !important;
}
.kc-page .kc-float-card > .e-con-inner { width: auto !important; padding: 0 !important; }

.kc-float-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-align: left;
}
.kc-float-box .elementor-icon-box-icon {
	width: 42px; height: 42px;
	border-radius: var(--radius-full) !important;
	background: var(--teal-100);
	color: var(--teal-700);
	display: grid !important;
	place-items: center;
	margin: 0 !important;
	flex: 0 0 auto;
}
.kc-float-box .elementor-icon-box-icon i { font-size: 18px !important; color: var(--teal-700); }
.kc-float-box .elementor-icon-box-title {
	font-family: var(--font-display);
	font-size: var(--text-xl) !important;
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.1;
	margin: 0;
}
.kc-float-box .elementor-icon-box-description {
	font-size: var(--text-xs) !important;
	color: var(--text-500);
	margin-top: 2px;
	line-height: 1.35;
}
@media (max-width: 1024px) {
	.kc-page .kc-float-card { right: var(--space-3); bottom: var(--space-5); max-width: 200px; }
}

/* =========================================================================
   INLINE ICON BOXES (hero stats, credentials, contact items)
   -------------------------------------------------------------------------
   These carry `kc-iconbox-inline` WITHOUT `kc-iconbox`, so none of the base
   icon styling applied — leaving 50px grey glyphs on a transparent tile.
   ========================================================================= */
.kc-iconbox-inline .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	text-align: left;
}
.kc-iconbox-inline .elementor-icon-box-icon {
	width: 46px; height: 46px;
	border-radius: var(--radius-sm);
	background: var(--teal-100);
	color: var(--teal-700);
	display: grid !important;
	place-items: center;
	margin: 0 !important;
	flex: 0 0 auto;
}
.kc-iconbox-inline .elementor-icon-box-icon i,
.kc-iconbox-inline .elementor-icon-box-icon .elementor-icon {
	font-size: 20px !important;
	color: var(--teal-700) !important;
	line-height: 1;
}
.kc-iconbox-inline .elementor-icon-box-title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--navy-900);
	margin: 0;
}
.kc-iconbox-inline .elementor-icon-box-description {
	font-size: var(--text-sm);
	color: var(--text-500);
	margin-top: 2px;
}

/* Hero stats: circular tiles and a larger figure */
.kc-hero-stat .elementor-icon-box-icon { border-radius: var(--radius-full) !important; }
.kc-hero-stat .elementor-icon-box-title { font-size: var(--text-xl); font-weight: 800; }
.kc-hero-stat .elementor-icon-box-description { font-size: var(--text-xs); }

/* Contact panel sits on navy */
.kc-contact-item .elementor-icon-box-icon { background: rgba(255,255,255,0.12); }
.kc-contact-item .elementor-icon-box-icon i { color: var(--on-dark) !important; }
.kc-contact-item .elementor-icon-box-title { color: #fff; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.kc-contact-item .elementor-icon-box-description { color: var(--text-inverse-muted); }

/* -------------------------------------------------------------------------
   Header height trim
   Elementor containers ship 10px of default block padding, which was stacking
   with the wrapper padding: 79px utility bar + 124px nav row = 203px of sticky
   chrome. Collapse the duplicates to land near the static build's ~120px.
   ------------------------------------------------------------------------- */
.kc-topbar { padding-block: 0 !important; }
.kc-topbar-inner > .e-con-inner {
	padding-block: 0 !important;
	min-height: 42px;
	align-content: center;
}

.kc-header { padding-block: 0 !important; }
.kc-header-inner > .e-con-inner {
	padding-block: var(--space-2) !important;
	min-height: 0 !important;
}

@media (max-width: 1024px) {
	.kc-header-inner > .e-con-inner { padding-block: var(--space-2) !important; }
}

/* -------------------------------------------------------------------------
   Elementor adds `margin-block-end: 20px` to every widget that isn't the last
   child. All the kc-* layouts space themselves with `gap`, so that margin was
   doubling up — 20px of phantom height per widget (it was what made every
   header column 80px tall for a 60px logo).
   ------------------------------------------------------------------------- */
.kc-page .e-con-inner > .elementor-widget,
.kc-page .e-con > .elementor-widget,
.ekit-template-content-header .e-con-inner > .elementor-widget,
.ekit-template-content-footer .e-con-inner > .elementor-widget {
	margin-block-end: 0 !important;
}

/* Elementor sets align-items on .e-con-inner from its own custom property, so
   an unflagged `align-items: center` never took effect and the header columns
   stretched to the tallest one. */
.kc-header-inner > .e-con-inner,
.kc-topbar-inner > .e-con-inner,
.kc-header-actions > .e-con-inner {
	align-items: center !important;
}
.kc-header-inner > .e-con-inner > * { align-self: center !important; }

/* ElementsKit gives nav links `height: 100%`, which inflated them to 80px and
   dragged the whole header row with them. Size them to their content instead,
   keeping a 44px minimum tap target. */
@media (min-width: 1025px) {
	.kc-nav .elementskit-navbar-nav > li > a {
		height: auto !important;
		min-height: 44px;
	}
	.kc-nav .elementskit-navbar-nav,
	.kc-nav .elementskit-menu-container { height: auto !important; }
}

/* =========================================================================
   ALIGNMENT PASS — service cards, about photo, chips, contact panel
   ========================================================================= */

/* --- 1. Service cards ---------------------------------------------------
   Icon tile sat left of centre (a block box inside a centred stack), the
   title wrapped to two lines, and ~56px sat empty under the description
   because the "Learn More" link was never generated. */
.kc-page .kc-card > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start;
	gap: var(--space-4);
	height: 100%;
	text-align: center;
}

.kc-iconbox .elementor-icon-box-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* Centre the tile itself — it is a fixed-size box, so it needs auto margins */
.kc-iconbox .elementor-icon-box-icon {
	margin-inline: auto !important;
	margin-bottom: var(--space-4) !important;
}
.kc-iconbox .elementor-icon-box-title {
	font-size: var(--text-lg) !important;
	line-height: 1.25;
	text-wrap: balance;
}
.kc-iconbox .elementor-icon-box-description {
	font-size: var(--text-sm);
	line-height: 1.6;
}

/* "Learn More" rendered as a text link, pinned to the bottom of the card */
.kc-linkbtn { margin-top: auto !important; }
.kc-page .kc-linkbtn .elementor-button {
	background: transparent !important;
	color: var(--teal-700) !important;
	border: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-size: var(--text-sm);
	font-weight: 600;
	box-shadow: none !important;
	gap: var(--space-2);
}
.kc-page .kc-linkbtn .elementor-button::after {
	content: "→";
	font-size: 1em;
	transition: transform var(--duration-base) var(--ease-premium);
}
.kc-page .kc-linkbtn .elementor-button:hover { color: var(--teal-800) !important; }
.kc-page .kc-linkbtn .elementor-button:hover::after { transform: translateX(3px); }

/* --- 2. About photo -----------------------------------------------------
   The cut-out PNG was rendering at its natural ratio: 507x908, dwarfing the
   column beside it. Constrain it to a portrait card like index.html. */
.kc-page .kc-about-figure .kc-about-photo img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
	max-height: 560px;
	width: 100%;
	border-radius: var(--radius-lg);
	background: var(--mint-100);
}
.kc-page .kc-split-about > .e-con-inner { align-items: center !important; }
.kc-page .kc-about-figure { align-self: center; }

/* --- 3. Payment chips ---------------------------------------------------
   Longer labels wrapped to two lines, so the row mixed 44px and 71px pills. */
.kc-chip p,
.kc-chip .elementor-heading-title {
	white-space: nowrap;
	padding: var(--space-2) var(--space-4);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.kc-page .kc-chip { width: auto !important; }

/* --- 4. Contact panel ---------------------------------------------------
   The navy column stretches to match the form (822px inner) but its content
   is only ~517px, leaving 305px dead at the bottom. Centre it instead. */
.kc-page .kc-contact-split > .e-con-inner { align-items: stretch !important; }
.kc-page .kc-contact-split .kc-bg-navy > .e-con-inner {
	justify-content: center !important;
	height: 100%;
}
.kc-page .kc-contact-split .kc-bg-white > .e-con-inner {
	justify-content: center !important;
	height: 100%;
}

/* (The old .cta-form rules here were static-build leftovers and matched
   nothing in the Elementor build. Real form tuning lives at the end.) */
.kc-page .cta-form .field-help { margin-top: var(--space-1); }

/* =========================================================================
   INNER PAGE PATTERNS (service pages)
   Only two new patterns are needed — everything else reuses the home page
   classes, which is the point of the kc-* system.
   ========================================================================= */

/* --- Page hero: smaller than the home hero, no photo -------------------- */
.kc-page-hero { padding-block: var(--space-7) var(--space-7) !important; }
.kc-page-hero > .e-con-inner { max-width: var(--container-max); margin-inline: auto !important; }
.kc-page-hero .kc-stack > .e-con-inner,
.kc-page-hero > .e-con-inner > .kc-stack { max-width: 760px; }
.kc-page-title .elementor-heading-title { font-size: var(--text-5xl); }

/* Breadcrumb */
.kc-crumb p {
	font-size: var(--text-sm);
	color: var(--text-500);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}
.kc-crumb a { color: var(--text-500); }
.kc-crumb a:hover { color: var(--teal-700); text-decoration: underline; }
.kc-crumb span { color: var(--border-300); }

/* --- Closing CTA band --------------------------------------------------- */
.kc-cta-band { padding-block: var(--space-7) !important; }
.kc-cta-band .kc-stack > .e-con-inner { max-width: 640px; margin-inline: auto !important; }
.kc-cta-band .elementor-heading-title { color: #fff; }
.kc-cta-band .kc-lede p { color: var(--text-inverse-muted); }
.kc-cta-band .kc-row > .e-con-inner { justify-content: center; }

/* --- Service-page nav dropdown ------------------------------------------ */
.kc-nav .elementskit-navbar-nav .elementskit-dropdown {
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-2) 0;
	min-width: 230px;
}
.kc-nav .elementskit-navbar-nav .elementskit-dropdown > li > a {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	color: var(--text-700) !important;
	padding: var(--space-3) var(--space-4) !important;
	min-height: 44px;
	white-space: nowrap;
}
.kc-nav .elementskit-navbar-nav .elementskit-dropdown > li > a:hover {
	color: var(--teal-700) !important;
	background: var(--mint-50);
}

/* --- Clinic hours list (contact page) ----------------------------------- */
.kc-hours > .e-con-inner { gap: var(--space-2) !important; width: 100%; }
.kc-hours-row p {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-4);
	width: 100%;
	font-size: var(--text-sm);
	color: var(--text-700);
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--border-100);
}
.kc-hours-row:last-child p { border-bottom: none; }
.kc-hours-row span { color: var(--text-500); white-space: nowrap; }

/* Google Maps embed */
.kc-map iframe { border-radius: var(--radius-lg); display: block; width: 100%; }

/* --- Publications list (About) ------------------------------------------ */
.kc-pubs > .e-con-inner { gap: 0 !important; width: 100%; }
.kc-pub p {
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--border-100);
	font-size: var(--text-sm);
	color: var(--text-700);
	max-width: none;
}
.kc-pub:last-child p { border-bottom: none; }
.kc-pub strong { display: block; color: var(--navy-900); font-weight: 600; line-height: 1.45; }
.kc-pub span { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-500); }

/* Stat unit suffixes ("k+", "%", "/7") sit on the dark band. With a dark brand
   colour the mid tint is too close to the background to read, so use a light
   tint of the brand instead. */
.kc-page .kc-bg-navy .kc-stat-num .unit,
.kc-page .stats-band .stat-num .unit { color: color-mix(in srgb, var(--brand) 22%, #fff); }

/* =========================================================================
   LOGO SIZING
   The mark is a STACKED lockup (369x271): icon over "DR.K.C.PATEL" over
   "BONE AND JOINT CARE". Roughly the lower 45% is text, so at 60px tall the
   strapline rendered around 8px — unreadable. A stacked lockup needs far more
   height than a horizontal one to stay legible, so both placements get sized
   up and the surrounding rows are given room to breathe.
   ========================================================================= */

/* --- Header ------------------------------------------------------------- */
.kc-page .kc-logo img,
.ekit-template-content-header .kc-logo img {
	height: 76px !important;
	width: auto !important;
	max-width: none !important;
}
/* Give the row height for the taller mark without cramping it */
.kc-header-inner > .e-con-inner { min-height: 92px; }
.kc-header-inner .kc-logo { display: flex; align-items: center; }

/* --- Footer -------------------------------------------------------------- */
/* More room down here, so the mark can be larger and fully legible. */
.kc-footer-logo img {
	height: 96px !important;
	width: auto !important;
	max-width: none !important;
	filter: brightness(0) invert(1);   /* knockout to white on the dark footer */
}
.kc-footer-logo { margin-bottom: var(--space-2); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.kc-page .kc-logo img,
	.ekit-template-content-header .kc-logo img { height: 62px !important; }
	.kc-header-inner > .e-con-inner { min-height: 78px; }
}
@media (max-width: 480px) {
	.kc-page .kc-logo img,
	.ekit-template-content-header .kc-logo img { height: 54px !important; }
	.kc-header-inner > .e-con-inner { min-height: 68px; }
	.kc-footer-logo img { height: 80px !important; }
}

/* =========================================================================
   FOOTER ALIGNMENT
   Elementor centres image and social-icon widgets by default, so the brand
   column had three different alignments: logo centred (86px off the column
   edge), icons centred, body text left. Pin all of them to the column edge.
   ========================================================================= */
.kc-footer-logo,
.kc-footer-logo .elementor-widget-container { text-align: left !important; }
.kc-footer-logo img { margin-inline: 0 !important; }

.kc-social,
.kc-social .elementor-widget-container { text-align: left !important; }
.kc-social .elementor-social-icons-wrapper,
.kc-social .elementor-grid {
	justify-content: flex-start !important;
	justify-items: start !important;
	margin-inline: 0 !important;
}
.kc-social .elementor-grid-item { margin-inline: 0 !important; }

/* Consistent rhythm down the brand column */
.kc-footer-grid .kc-stack > .e-con-inner { align-items: flex-start; }

/* =========================================================================
   HEADER SOCIAL ICONS (in the utility bar)
   ========================================================================= */
.kc-topbar-social .elementor-social-icons-wrapper,
.kc-topbar-social .elementor-grid {
	display: flex !important;
	gap: var(--space-2) !important;
	justify-content: flex-end;
	margin: 0 !important;
}
.kc-topbar-social .elementor-grid-item { margin: 0 !important; }
/* Elementor sizes social icons through --icon-size / --icon-padding, so
   plain width/height is ignored — it rendered 50px in a 43px bar. */
.kc-topbar-social {
	--icon-size: 14px;
	--icon-padding: 0.4em;
	--grid-column-gap: 4px;
	--grid-row-gap: 0px;
}
.kc-topbar-social .elementor-social-icon {
	background: transparent !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border-radius: var(--radius-full);
	transition: background var(--duration-base), color var(--duration-base);
}
.kc-topbar-social .elementor-social-icon i { color: var(--text-500); font-size: 14px; }
.kc-topbar-social .elementor-social-icon:hover { background: var(--teal-100) !important; }
.kc-topbar-social .elementor-social-icon:hover i { color: var(--brand); }
.kc-topbar-social .elementor-social-icon:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 767px) { .kc-topbar-social { display: none !important; } }

/* =========================================================================
   FLOATING WHATSAPP BUTTON
   Three things want the bottom-right corner: this, the back-to-top button,
   and (on mobile) the sticky Call/Book bar. They're stacked with explicit
   offsets so none of them overlap.

   Desktop:  WhatsApp 24px from bottom, back-to-top above it.
   Mobile:   CTA bar sits at the bottom (~71px + safe area), so both floats
             are lifted clear of it.
   ========================================================================= */
.kc-wa {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 97;                 /* above back-to-top(96), below the CTA bar(95)… */
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background: #25D366;         /* WhatsApp brand green — recognisable at a glance */
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-lg);
	transition: transform var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium);
}
.kc-wa svg { width: 30px; height: 30px; }
.kc-wa:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); color: #fff; }
.kc-wa:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Back-to-top sits above it. Explicit px rather than calc() on tokens —
   the earlier rule was landing 8px off and left only a 4px gap. */
.back-to-top { bottom: 96px !important; }   /* WA occupies 24-80px, so 16px clear */

@media (max-width: 1024px) {
	/* Clear the sticky Call/Book bar, including the iOS home indicator */
	.kc-wa { bottom: calc(84px + env(safe-area-inset-bottom)); }
	.back-to-top { bottom: calc(156px + env(safe-area-inset-bottom)) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.kc-wa, .kc-wa:hover { transition: none; transform: none; }
}

/* =========================================================================
   MEDIA PLACEHOLDERS
   Labelled tiles so pages read as finished while real photos/videos are
   still being collected. Each one is a drop-in slot.
   ========================================================================= */
.kc-ph-wrap { width: 100%; }
.kc-ph {
	display: grid;
	place-items: center;
	gap: var(--space-2);
	width: 100%;
	background: var(--mint-100);
	border: 1px dashed var(--teal-200);
	border-radius: var(--radius-md);
	color: var(--text-500);
	text-align: center;
	padding: var(--space-4);
}
.kc-ph i { font-size: 26px; color: var(--brand); opacity: 0.5; }
.kc-ph span { font-size: var(--text-xs); letter-spacing: 0.02em; }
.kc-video-grid .kc-ph i { font-size: 34px; }

/* =========================================================================
   GOOGLE REVIEWS
   ========================================================================= */
.kc-reviews > .e-con-inner { width: 100%; }
.kc-gr-head {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: var(--space-3);
	margin-bottom: var(--space-6);
}
.kc-gr-score {
	font-family: var(--font-display);
	font-size: var(--text-3xl); font-weight: 800; color: var(--navy-900); line-height: 1;
}
.kc-gr-count { font-size: var(--text-sm); color: var(--text-500); }
.kc-stars { display: inline-flex; gap: 2px; color: var(--amber-500); font-size: 15px; }

.kc-gr-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .kc-gr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kc-gr-grid { grid-template-columns: repeat(3, 1fr); } }

.kc-gr-card {
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	display: flex; flex-direction: column; gap: var(--space-4);
}
.kc-gr-card p { font-size: var(--text-sm); color: var(--text-700); line-height: 1.7; flex-grow: 1; }
.kc-gr-ph p { color: var(--text-500); font-style: italic; }
.kc-gr-author {
	display: flex; align-items: center; gap: var(--space-3);
	padding-top: var(--space-3); border-top: 1px solid var(--border-100);
	font-size: var(--text-sm);
}
.kc-gr-author strong { color: var(--navy-900); }
.kc-gr-author span { font-size: var(--text-xs); color: var(--text-500); margin-left: auto; }
.kc-gr-avatar {
	width: 40px; height: 40px; border-radius: var(--radius-full);
	background: var(--teal-100); color: var(--brand);
	display: grid; place-items: center; flex-shrink: 0;
	font-weight: 700; font-family: var(--font-display); object-fit: cover;
}
.kc-gr-all { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); }
.kc-gr-all a { color: var(--brand); font-weight: 600; }
.kc-gr-all a:hover { text-decoration: underline; }

/* =========================================================================
   INSTAGRAM GRID
   ========================================================================= */
.kc-instagram > .e-con-inner { width: 100%; }

/* Google reviews (Rich Showcase). The plugin ships flat grey cards, which sink
   into the section behind them - give them the same white card as everything
   else on the page. */
.kc-page .kc-reviews .wp-gr { --rev-color: #fff; }
.kc-page .kc-reviews .grw-review-inner {
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
}

/* Smash Balloon's own grid, dressed like the tiles it replaced: rounded corners
   and contain rather than cover, because several posts are text posters and
   Reels are 9:16 - cropping them to the tile cuts the message in half. */
.kc-page .kc-instagram #sb_instagram { padding-bottom: 0 !important; }
.kc-page .kc-instagram #sb_instagram .sbi_photo {
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--mint-100);
}
.kc-page .kc-instagram #sb_instagram .sbi_photo img { object-fit: contain; }
.kc-ig-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .kc-ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kc-ig-grid { grid-template-columns: repeat(6, 1fr); } }

.kc-ig-item {
	position: relative; display: block; overflow: hidden;
	/* 4:5 is Instagram's portrait post ratio, so feed posts fill the tile
	   almost exactly. Reels-shaped uploads (~0.60) get a slim margin either
	   side rather than being cropped. */
	border-radius: var(--radius-sm); aspect-ratio: 4 / 5; background: var(--mint-100);
}
.kc-ig-item img {
	/* contain, not cover: nothing gets cropped, so poster text stays readable. */
	width: 100%; height: 100%; object-fit: contain; display: block;
	transition: transform var(--duration-base) var(--ease-premium);
}
/* A scale-up would push the image past its own edges and crop it, which is the
   thing contain exists to avoid — lift the tile instead. */
.kc-ig-item:hover { box-shadow: var(--shadow-md); }
.kc-ig-item:hover img { transform: scale(1.02); }
.kc-ig-item:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.kc-ig-play {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: #fff; font-size: 20px; text-shadow: 0 2px 8px rgba(0,0,0,.5);
	background: linear-gradient(transparent 55%, rgba(0,0,0,.25));
}
/* Branded stand-in tiles, shown until real images or a token arrive. Each one
   steps a little further along the brand ramp via --kc-ig-i, so the row reads
   as a designed gradient rather than six identical blocks.

   NB these look blank until scrolled to: Elementor hides background-image on
   everything inside a top-level container past the first until its lazy-loader
   adds .e-lazyloaded. That is Elementor's rule, not a bug here. */
.kc-ig-item--topic {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4);
	text-align: center;
	text-decoration: none;
	background-image:
		linear-gradient(150deg,
			color-mix(in srgb, var(--brand) calc(88% - var(--kc-ig-i, 0) * 9%), var(--navy-900)),
			color-mix(in srgb, var(--navy-900) calc(70% - var(--kc-ig-i, 0) * 4%), var(--brand)));
	transition: transform var(--duration-base) var(--ease-premium);
}
.kc-ig-item--topic:hover { transform: scale(1.03); }
.kc-ig-item--topic i { font-size: 22px; color: rgba(255, 255, 255, 0.75); }
.kc-ig-item--topic span {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: #fff;
}

.kc-ig-devnote {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px dashed var(--border-200);
	border-radius: var(--radius-sm);
	background: var(--amber-100);
	color: var(--navy-900);
	font-size: var(--text-xs);
	text-align: center;
}

.kc-ig-follow { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); }
.kc-ig-follow a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); }
.kc-ig-follow a:hover { text-decoration: underline; }

/* =========================================================================
   METFORM — match the hand-built form styling it replaced
   ========================================================================= */
.kc-form .mf-input-wrapper { margin-bottom: var(--space-4); }
.kc-form .mf-input-label,
.kc-form label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--navy-900);
	margin-bottom: var(--space-2);
}
.kc-form .mf-input,
.kc-form input[type="text"],
.kc-form input[type="email"],
.kc-form input[type="tel"],
.kc-form select,
.kc-form textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-200);
	border-radius: var(--radius-sm);
	background: var(--slate-50);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-900);
	transition: border-color var(--duration-base), box-shadow var(--duration-base), background var(--duration-base);
}
.kc-form textarea { min-height: 96px; resize: vertical; }
.kc-form .mf-input:hover, .kc-form input:hover, .kc-form select:hover, .kc-form textarea:hover { border-color: var(--teal-400); }
.kc-form .mf-input:focus, .kc-form input:focus, .kc-form select:focus, .kc-form textarea:focus {
	background: #fff;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px var(--teal-100);
	outline: none;
}
.kc-form .mf-input-help-text { font-size: var(--text-xs); color: var(--text-500); margin-top: var(--space-2); }

/* Two-up rows */
/* .kc-mf-row is handled in the contact section block at the end. */

/* Consent checkbox */
.kc-form .mf-gdpr-consent label,
.kc-form .mf-checkbox-label {
	display: flex; align-items: flex-start; gap: var(--space-3);
	font-size: var(--text-sm); font-weight: 400; color: var(--text-700); line-height: 1.5;
}
.kc-form input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand); }

/* Submit */
.kc-form .mf-btn,
.kc-form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 52px; padding: 0 var(--space-6);
	background: var(--brand); color: #fff;
	border: none; border-radius: var(--radius-sm);
	font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
	cursor: pointer;
	transition: background var(--duration-base) var(--ease-premium);
}
.kc-form .mf-btn:hover, .kc-form button[type="submit"]:hover { background: var(--teal-800); }
.kc-form .mf-btn:focus-visible, .kc-form button[type="submit"]:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Validation + response messages */
.kc-form .mf-error-message, .kc-form .mf-warning { color: var(--danger-600); font-size: var(--text-xs); margin-top: var(--space-2); }
.kc-form .mf-response-message, .kc-form .mf-success {
	margin-top: var(--space-4); padding: var(--space-4);
	border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
	background: var(--teal-100); color: var(--teal-800);
}

/* MetForm ships its own button colour (#4285F4) in a stylesheet that loads
   after the theme's, so brand styling needs to be explicit here. */
.kc-form button.metform-btn,
.kc-form button.metform-btn:not(.toggle),
.kc-form .metform-submit-btn {
	background: var(--brand) !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
	min-height: 52px;
	font-family: var(--font-body) !important;
	font-weight: 600;
}
.kc-form button.metform-btn:hover,
.kc-form .metform-submit-btn:hover { background: var(--teal-800) !important; }

/* =========================================================================
   MARQUEE RIBBON  —  sits directly under the hero
   -------------------------------------------------------------------------
   The item list is printed twice and the row is translated by -50%, so at the
   end of the cycle copy #2 sits exactly where copy #1 started and the loop is
   seamless. Both copies are aria-hidden; the shortcode also emits a visually
   hidden <ul> carrying the same text for screen readers.
   ========================================================================= */
.kc-marquee-wrap > .e-con-inner,
.kc-marquee-wrap { padding: 0 !important; }

.kc-marquee {
	background: var(--mint-50);
	border-block: 1px solid var(--border-100);
	padding: var(--space-4) 0;
	overflow: hidden;
}
.kc-marquee__viewport {
	overflow: hidden;
	/* Fade the ends so items enter and leave instead of being chopped off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kc-marquee__row {
	display: flex;
	width: max-content;
	animation: kc-marquee-scroll var(--kc-marquee-speed, 48s) linear infinite;
}
.kc-marquee:hover .kc-marquee__row { animation-play-state: paused; }
.kc-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-inline: calc(var(--space-3) / 2);
	flex: 0 0 auto;
}
.kc-marquee__item {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--navy-700);
	white-space: nowrap;
}
.kc-marquee__dot {
	width: 5px; height: 5px;
	border-radius: var(--radius-full);
	background: var(--teal-600);
	opacity: 0.65;
	flex: 0 0 auto;
}
@keyframes kc-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	/* No auto-scroll — let it be read, and swiped if it overflows. */
	.kc-marquee__row { animation: none; }
	.kc-marquee__viewport { overflow-x: auto; scrollbar-width: none; }
	.kc-marquee__viewport::-webkit-scrollbar { display: none; }
	.kc-marquee__track:last-child { display: none; }
}

/* =========================================================================
   TESTIMONIALS  —  editorial quote cards
   ========================================================================= */
.kc-testimonials { background: var(--mint-50); position: relative; overflow: hidden; }
.kc-testimonials::before {
	/* Two soft brand glows, so the band reads warm rather than flat grey. */
	content: "";
	position: absolute; inset: -30% -10% auto -10%;
	height: 70%;
	background:
		radial-gradient(40% 60% at 18% 40%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
		radial-gradient(38% 55% at 84% 25%, color-mix(in srgb, var(--navy-800) 12%, transparent), transparent 70%);
	pointer-events: none;
}
.kc-testimonials > .e-con-inner { position: relative; z-index: 1; }

.kc-testimonials .kc-stories-track > .e-con-inner > .kc-card {
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
	transition: transform var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium);
}
.kc-testimonials .kc-stories-track > .e-con-inner > .kc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
/* Padding goes on the inner wrapper, not the card: .kc-pad already pads
   .e-con-inner, so padding the card too would double it. */
.kc-testimonials .kc-stories-track > .e-con-inner > .kc-card > .e-con-inner {
	padding: var(--space-7) var(--space-6) var(--space-6) !important;
}
/* Oversized opening quote, top-right, clipped by the card. */
.kc-testimonials .kc-stories-track > .e-con-inner > .kc-card::before {
	content: "\201C";
	position: absolute;
	top: -24px; right: 14px;
	font-family: var(--font-display);
	font-size: 140px;
	line-height: 1;
	color: var(--teal-100);
	pointer-events: none;
}
.kc-testimonials .kc-stars p { position: relative; z-index: 1; }
.kc-testimonials .kc-quote p {
	position: relative; z-index: 1;
	font-size: var(--text-base);
	color: var(--text-700);
	line-height: 1.75;
}
.kc-testimonials .kc-author {
	position: relative; z-index: 1;
	border-top: 1px solid var(--border-100);
	padding-top: var(--space-4);
	margin-top: auto;
}
.kc-testimonials .kc-author strong {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--navy-900);
}
.kc-testimonials .kc-author span {
	display: block;
	margin-top: 2px;
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal-700);
}

/* =========================================================================
   YOUTUBE WALL  —  click-to-play, nothing embeds until asked
   ========================================================================= */
.kc-yt-grid-wrap > .e-con-inner,
.kc-yt-grid-wrap { padding: 0 !important; }

.kc-yt-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	width: 100%;
	margin-top: var(--space-6);
}
@media (min-width: 720px) {
	.kc-yt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.kc-yt-grid { grid-template-columns: 1.3fr repeat(3, 1fr); }
}

/* --- Channel card ------------------------------------------------------- */
.kc-yt-sub {
	display: flex;
	flex-direction: column;
	background: var(--navy-800);
	border-radius: var(--radius-xl);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition: transform var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium);
}
a.kc-yt-sub:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
a.kc-yt-sub:focus-visible { outline: 3px solid var(--on-dark); outline-offset: 3px; }
.kc-yt-sub__visual {
	position: relative;
	flex: 1 1 auto;
	min-height: 180px;
	background:
		radial-gradient(80% 70% at 50% 100%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%),
		var(--navy-900);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
/* Full-bleed: the card is two rows tall now, and a small contained image
   left a large empty navy field around it. */
.kc-yt-sub__visual img { position: absolute; inset: 0;
	width: 100%; height: 100%; max-height: none;
	object-fit: cover; object-position: center; display: block; }
/* Keeps the badge, handle and play button readable over the photo. */
.kc-yt-sub__visual::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,22,34,0.45) 0%, rgba(11,22,34,0.05) 45%, rgba(11,22,34,0.35) 100%);
	pointer-events: none; }
.kc-yt-sub__badge, .kc-yt-sub__handle, .kc-yt-sub__play { z-index: 2; }
.kc-yt-sub__badge {
	position: absolute; top: var(--space-4); left: var(--space-4);
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.kc-yt-sub__badge i { font-size: 14px; }
.kc-yt-sub__handle {
	position: absolute; top: var(--space-4); right: var(--space-4);
	padding: 6px 12px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-inverse-muted);
	font-size: var(--text-xs);
}
.kc-yt-sub__play {
	position: absolute; inset: 0;
	margin: auto;
	width: 62px; height: 62px;
	border-radius: var(--radius-full);
	background: var(--teal-700);
	color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12);
}
.kc-yt-sub__play i { font-size: 20px; margin-left: 3px; }
.kc-yt-sub__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.kc-yt-sub__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: #fff;
	margin: 0 0 var(--space-2);
	line-height: 1.3;
}
.kc-yt-sub__sub {
	font-size: var(--text-sm);
	color: var(--text-inverse-muted);
	line-height: 1.65;
	margin: 0 0 var(--space-4);
}
.kc-yt-sub__cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--text-sm); font-weight: 600;
	color: var(--on-dark);
}
.kc-yt-sub__cta::after { content: "\2192"; transition: transform var(--duration-base); }
a.kc-yt-sub:hover .kc-yt-sub__cta::after { transform: translateX(4px); }

/* --- Video cards -------------------------------------------------------- */
.kc-yt-card { display: flex; flex-direction: column; gap: var(--space-3); }
.kc-yt-cover {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--navy-900);
	cursor: pointer;
	aspect-ratio: 16 / 9;
	line-height: 0;
}
.kc-yt-cover img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) var(--ease-premium);
}
.kc-yt-cover:hover img { transform: scale(1.05); }
.kc-yt-cover:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
.kc-yt-play {
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px;
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff;
	display: grid; place-items: center;
	transition: background var(--duration-base), transform var(--duration-base);
}
.kc-yt-cover:hover .kc-yt-play { background: var(--teal-700); border-color: var(--teal-700); transform: scale(1.06); }
.kc-yt-play i { font-size: 17px; margin-left: 3px; }
.kc-yt-card__title {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--navy-900);
	line-height: 1.4;
	margin: 0;
}
.kc-yt-card iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-lg);
	display: block;
}
.kc-yt-card--empty .kc-ph { border-radius: var(--radius-lg); }

/* Shorts are 9:16. In a 16:9 frame the thumbnail is fine (YouTube centre-crops
   hqdefault) but the player pillarboxes on play, so vertical cards carry their
   own ratio. Capped, or one Short would tower over the row. */
.kc-yt-card--vertical .kc-yt-cover,
.kc-yt-card--vertical iframe {
	/* Height-first: width:auto with only max-height collapsed the button to
	   0x0, since a block element in a flex column has no intrinsic width. */
	aspect-ratio: 9 / 16;
	height: 340px;
	width: auto;
	margin-inline: auto;
}
@media (min-width: 1024px) {
	/* Mixed aspect ratios make rows ragged; let each card size itself. */
	.kc-yt-grid { align-items: start; }
	.kc-yt-sub { align-self: stretch; }
}

@media (min-width: 1024px) {
	/* Six videos: the channel card spans both rows, so the videos sit beside it
	   as a tidy 3 x 2 block rather than leaving a hole in the second row. */
	.kc-page .kc-yt-grid .kc-yt-sub { grid-row: span 2; }
}

/* A bare thumbnail sitting on the section background left too much air between
   columns, so video cards on the channel grid take the site's card treatment:
   image flush to the top, title padded inside, equal heights across the row. */
.kc-page .kc-yt-grid .kc-yt-card {
	gap: 0;
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium),
	            border-color var(--duration-base) var(--ease-premium);
}
.kc-page .kc-yt-grid .kc-yt-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	border-color: var(--teal-200);
}
.kc-page .kc-yt-grid .kc-yt-cover,
.kc-page .kc-yt-grid .kc-yt-card--empty .kc-ph { border-radius: 0; }
/* Two lines for every title keeps the row even without stretching the cards to
   the height of the tall channel card, which left a band of empty white. */
.kc-page .kc-yt-grid .kc-yt-card__title {
	padding: var(--space-4);
	min-height: calc(2.8em + 2 * var(--space-4));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   FOOTER  —  brand + spotlight, link map, legal bar
   ========================================================================= */
.kc-footer-top:has(> .e-con-inner),
.kc-footer-cols:has(> .e-con-inner),
.kc-footer-legal-bar:has(> .e-con-inner) { display: block !important; }

.kc-footer-top > .e-con-inner,
.kc-footer-top:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
	width: 100%;
	padding-bottom: var(--space-7);
}
@media (min-width: 900px) {
	.kc-footer-top > .e-con-inner,
	.kc-footer-top:not(:has(> .e-con-inner)) { grid-template-columns: 1.35fr 1fr; gap: var(--space-8); }
}

.kc-footer-brand > .e-con-inner { align-items: flex-start; gap: var(--space-4); }
.kc-footer-reg p {
	font-size: var(--text-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-inverse-muted);
	opacity: 0.75;
	margin: 0;
}

/* --- Spotlight card ----------------------------------------------------- */
.kc-footer-spotlight {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-xl);
	padding: var(--space-6) !important;
	transition: border-color var(--duration-base), background var(--duration-base);
}
.kc-footer-spotlight:hover {
	border-color: color-mix(in srgb, var(--brand) 60%, transparent);
	background: rgba(255, 255, 255, 0.08) !important;
}
.kc-footer-spotlight > .e-con-inner { align-items: flex-start; gap: var(--space-3); }
.kc-fs-eyebrow p {
	display: flex; align-items: center; gap: 8px;
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-dark);
}
.kc-fs-live {
	width: 8px; height: 8px;
	border-radius: var(--radius-full);
	background: var(--on-dark);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 70%, transparent);
	animation: kc-fs-pulse 2.4s ease-out infinite;
	flex: 0 0 auto;
}
@keyframes kc-fs-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 70%, transparent); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .kc-fs-live { animation: none; } }
.kc-fs-title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
}
.kc-fs-sub p {
	font-size: var(--text-sm);
	color: var(--text-inverse-muted);
	line-height: 1.65;
	margin: 0;
}
.kc-fs-cta p { margin: 0; }
.kc-fs-cta a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--text-sm); font-weight: 600;
	color: var(--on-dark);
	min-height: 44px;
}
.kc-fs-cta a::after { content: "\2192"; transition: transform var(--duration-base); }
.kc-fs-cta a:hover { color: #fff; }
.kc-fs-cta a:hover::after { transform: translateX(4px); }

/* --- Link map ----------------------------------------------------------- */
.kc-footer-cols > .e-con-inner,
.kc-footer-cols:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	width: 100%;
	padding-block: var(--space-7);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 600px) {
	.kc-footer-cols > .e-con-inner,
	.kc-footer-cols:not(:has(> .e-con-inner)) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.kc-footer-cols > .e-con-inner,
	.kc-footer-cols:not(:has(> .e-con-inner)) { grid-template-columns: repeat(4, 1fr); }
}
.kc-footer-col > .e-con-inner { align-items: flex-start; gap: var(--space-3); }

/* --- Legal bar ---------------------------------------------------------- */
.kc-footer-legal-bar > .e-con-inner,
.kc-footer-legal-bar:not(:has(> .e-con-inner)) {
	/* Elementor's own .e-con-inner rule sets flex-direction:column and wins on
	   specificity, so the row axis has to be forced here. */
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--space-3) var(--space-5);
	width: 100%;
	padding-block: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kc-footer-legal-bar .elementor-widget {
	/* Elementor gives every widget flex-basis:100%, which put each line on its
	   own row. Shrink to content so the three parts share the bar. */
	width: auto !important;
	flex: 0 1 auto !important;
	margin: 0 !important;
}
.kc-footer-legal--note p { opacity: 0.7; }
@media (max-width: 599px) {
	.kc-footer-legal-bar > .e-con-inner { justify-content: flex-start !important; }
}

/* Portrait [kc_video] cards — Shorts are 9/16, older uploads often 4/5.
   Sized by height so a tall video does not tower over the row beside it. */
.kc-yt-card--portrait .kc-yt-cover,
.kc-yt-card--portrait iframe {
	aspect-ratio: var(--kc-video-ratio, 9 / 16);
	height: 380px;
	width: auto;
	margin-inline: auto;
}
.kc-yt-card--portrait { align-items: center; }
@media (max-width: 600px) {
	.kc-yt-card--portrait .kc-yt-cover,
	.kc-yt-card--portrait iframe { height: 320px; }
}

/* --- Self-hosted video (kc_video src="" / id="") ------------------------ */
.kc-video { margin: 0; width: 100%; }
.kc-video video {
	width: 100%;
	aspect-ratio: var(--kc-video-ratio, 16 / 9);
	display: block;
	border-radius: var(--radius-lg);
	background: var(--navy-900);
	object-fit: cover;
	box-shadow: var(--shadow-md);
}
.kc-video figcaption {
	margin-top: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--navy-900);
	line-height: 1.4;
}

/* =========================================================================
   BLOG — cards shared by the home strip, the index and the archives
   ========================================================================= */
.kc-blog-wrap {
	width: min(var(--container-max), 100% - (var(--gutter) * 2));
	margin-inline: auto;
}
/* The article is full width: its hero paints a background band edge to edge,
   and the hero and body each clamp their own inner container. */
.kc-blog .kc-article { width: 100%; }
.kc-blog #primary {
	/* Belt and braces alongside the astra_page_layout filter. */
	width: 100%; max-width: none; float: none; padding-inline: 0;
	padding-block: var(--space-8) var(--space-9);
}
.kc-blog .ast-container { max-width: none; padding: 0; }
.kc-blog .widget-area, .kc-blog #secondary { display: none; }

.kc-blog-hero { max-width: 720px; margin-bottom: var(--space-7); }
.kc-blog-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.1;
	margin: var(--space-3) 0 0;
}
.kc-blog-hero__lede p {
	margin: var(--space-4) 0 0;
	font-size: var(--text-lg);
	color: var(--text-700);
	line-height: 1.65;
}
.kc-eyebrow {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal-700);
}
.kc-blog-more {
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-500);
	margin: var(--space-8) 0 var(--space-5);
}
.kc-blog-empty { color: var(--text-500); }

/* --- The card ----------------------------------------------------------- */
.kc-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 700px)  { .kc-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kc-post-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.kc-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-xl);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-base) var(--ease-premium),
	            box-shadow var(--duration-base) var(--ease-premium),
	            border-color var(--duration-base);
}
.kc-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--teal-200);
}
.kc-post:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }

.kc-post__visual {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--mint-100);
	overflow: hidden;
}
.kc-post__visual img {
	/* contain, not cover — several featured images are infographic posters
	   with text to the edges; cropping them made the headline unreadable.
	   Odd ratios letterbox on the tile background instead of losing content. */
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var(--duration-slow) var(--ease-premium);
}
/* A scale-up would push a contained image past its own edges and crop it. */
.kc-post:hover .kc-post__visual img { transform: scale(1.02); }

/* Stand-in artwork until a featured image is set. */
.kc-post-fallback {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background-image: linear-gradient(140deg, var(--teal-700), var(--navy-900));
	color: rgba(255, 255, 255, 0.35);
	font-size: 40px;
}
.kc-post-fallback[style*="--kc-post-i:1"] { background-image: linear-gradient(140deg, color-mix(in srgb, var(--teal-700) 78%, var(--navy-900)), var(--navy-900)); }
.kc-post-fallback[style*="--kc-post-i:2"] { background-image: linear-gradient(140deg, color-mix(in srgb, var(--teal-700) 58%, var(--navy-900)), var(--navy-900)); }
.kc-post-fallback[style*="--kc-post-i:3"] { background-image: linear-gradient(140deg, color-mix(in srgb, var(--teal-700) 38%, var(--navy-900)), var(--navy-900)); }
.kc-post-fallback[style*="--kc-post-i:4"] { background-image: linear-gradient(140deg, color-mix(in srgb, var(--teal-700) 18%, var(--navy-900)), var(--navy-900)); }

.kc-post-cat {
	position: absolute; top: var(--space-3); left: var(--space-3);
	padding: 5px 11px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.94);
	color: var(--navy-900);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.kc-post__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	flex: 1 1 auto;
}
.kc-post-meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-500);
}
.kc-post-meta span[aria-hidden] { opacity: 0.5; }
.kc-post__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--navy-900);
	line-height: 1.3;
	margin: 0;
}
.kc-post__excerpt {
	font-size: var(--text-sm);
	color: var(--text-700);
	line-height: 1.65;
}
.kc-post__cta {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--text-sm); font-weight: 600;
	color: var(--teal-700);
}
.kc-post__cta::after { content: "\2192"; transition: transform var(--duration-base); }
.kc-post:hover .kc-post__cta::after { transform: translateX(4px); }

/* --- Featured card ------------------------------------------------------ */
@media (min-width: 900px) {
	.kc-post--featured {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
	}
	.kc-post--featured .kc-post__visual { aspect-ratio: auto; height: 100%; }
	.kc-post--featured .kc-post__body { padding: var(--space-7); justify-content: center; }
}
.kc-post--featured .kc-post__title { font-size: var(--text-3xl); }
.kc-post--featured .kc-post__excerpt { font-size: var(--text-base); }

/* --- Pagination --------------------------------------------------------- */
.kc-blog .navigation.pagination { margin-top: var(--space-8); }
.kc-blog .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.kc-blog .page-numbers {
	min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 var(--space-4);
	border: 1px solid var(--border-200);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--navy-800);
	font-size: var(--text-sm); font-weight: 600;
	text-decoration: none;
}
.kc-blog .page-numbers:hover { border-color: var(--teal-700); color: var(--teal-700); }
.kc-blog .page-numbers.current { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }

/* =========================================================================
   ARTICLE — hero, sticky contents, prose, in-article components
   ========================================================================= */

/* --- Reading progress --------------------------------------------------- */
.kc-progress {
	position: fixed; inset-inline: 0; top: 0;
	height: 3px;
	z-index: 200;
	background: transparent;
	pointer-events: none;
}
.kc-progress__bar {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--teal-700), var(--teal-400));
	transition: width 80ms linear;
}

/* --- Hero --------------------------------------------------------------- */
.kc-article-hero {
	background: var(--mint-50);
	border-bottom: 1px solid var(--border-100);
	padding-block: var(--space-7) var(--space-8);
	margin-bottom: var(--space-8);
}
.kc-article-hero__inner {
	width: min(var(--container-max), 100% - (var(--gutter) * 2));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}
@media (min-width: 960px) {
	.kc-article-hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); }
}

.kc-back {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--text-sm); font-weight: 600;
	color: var(--text-500);
	text-decoration: none;
	min-height: 44px;
}
.kc-back::before { content: "\2190"; transition: transform var(--duration-base); }
.kc-back:hover { color: var(--teal-700); }
.kc-back:hover::before { transform: translateX(-4px); }

.kc-article-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 800;
	color: var(--navy-900);
	line-height: 1.12;
	margin: var(--space-3) 0 0;
}
.kc-article-hero__lead {
	margin: var(--space-4) 0 0;
	font-size: var(--text-lg);
	line-height: 1.65;
	color: var(--text-700);
}
.kc-article-hero__rule {
	border: 0; border-top: 1px solid var(--border-200);
	margin: var(--space-6) 0 var(--space-5);
}
.kc-article-hero__meta { display: flex; align-items: center; gap: var(--space-3); }
.kc-article-hero__avatar {
	width: 48px; height: 48px;
	border-radius: var(--radius-full);
	object-fit: cover; object-position: top center;
	background: var(--mint-200);
	flex: 0 0 auto;
}
.kc-article-hero__meta-text { display: flex; flex-direction: column; gap: 2px; }
.kc-article-hero__author {
	font-family: var(--font-display);
	font-size: var(--text-base); font-weight: 700;
	color: var(--navy-900); text-decoration: none;
}
.kc-article-hero__author:hover { color: var(--teal-700); }
.kc-article-hero__meta-info {
	display: flex; flex-wrap: wrap; gap: 6px;
	font-size: var(--text-xs);
	color: var(--text-500);
}
.kc-article-hero__meta-info span { opacity: 0.5; }
.kc-article-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }

.kc-article-hero__frame {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	/* 16:9, not 4:3 — featured images are landscape posters and infographics.
	   The 800x446 (1.79) one was losing 176px of width to a 1.33 box. */
	aspect-ratio: 16 / 9;
	background: var(--mint-100);
	box-shadow: var(--shadow-lg);
}
.kc-article-hero__frame img {
	/* contain, not cover: these posters carry text to the edges, and cropping
	   it makes the headline unreadable. Odd ratios letterbox on the mint
	   background rather than losing content. */
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
}

/* --- Body grid: sticky contents + prose --------------------------------- */
.kc-article-body__grid {
	width: min(var(--container-max), 100% - (var(--gutter) * 2));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}
@media (min-width: 1000px) {
	.kc-article-body__grid { grid-template-columns: 220px minmax(0, 720px); gap: var(--space-8); }
}

.kc-toc {
	position: sticky;
	/* Clear the sticky site header rather than hiding behind it. */
	top: 108px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding-right: var(--space-2);
	scrollbar-width: thin;
}
@media (max-width: 999px) {
	.kc-toc {
		position: static; max-height: none;
		padding: var(--space-5);
		border: 1px solid var(--border-100);
		border-radius: var(--radius-lg);
		background: var(--mint-50);
	}
}
.kc-toc__head {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xs); font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--text-500);
}
.kc-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-100); }
.kc-toc__list li { margin: 0; }
.kc-toc__list a {
	display: block;
	padding: 7px var(--space-4);
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--text-500);
	text-decoration: none;
	transition: color var(--duration-base), border-color var(--duration-base);
}
.kc-toc__list a:hover { color: var(--navy-900); }
.kc-toc__list a.is-current {
	color: var(--teal-700);
	font-weight: 600;
	border-left-color: var(--teal-700);
}

/* --- Prose -------------------------------------------------------------- */
.kc-prose { font-size: var(--text-lg); line-height: 1.75; color: var(--text-700); min-width: 0; }
.kc-prose > * + * { margin-top: var(--space-5); }
.kc-prose h2 {
	font-family: var(--font-display);
	font-size: var(--text-3xl); font-weight: 700; color: var(--navy-900);
	line-height: 1.25;
	margin-top: var(--space-8);
	scroll-margin-top: 120px;
}
.kc-prose h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl); font-weight: 700; color: var(--navy-900);
	margin-top: var(--space-6);
	scroll-margin-top: 120px;
}
.kc-prose ul, .kc-prose ol { padding-left: 1.35em; }
.kc-prose li + li { margin-top: var(--space-2); }
.kc-prose a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }
.kc-prose a:hover { color: var(--teal-800); }
.kc-prose strong { color: var(--navy-900); font-weight: 700; }
.kc-prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.kc-prose hr { border: 0; border-top: 1px solid var(--border-100); margin-block: var(--space-7); }
.kc-prose figure { margin: var(--space-7) 0; }
.kc-prose figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-500); }

/* Tables scroll rather than forcing the page wide. */
.kc-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.kc-prose :is(table) { display: block; overflow-x: auto; }
.kc-prose th, .kc-prose td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-100);
	text-align: left;
}
.kc-prose th { background: var(--mint-50); color: var(--navy-900); font-weight: 700; white-space: nowrap; }

/* --- Callout ------------------------------------------------------------ */
.kc-callout {
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--teal-200);
	border-radius: var(--radius-lg);
	background: var(--mint-50);
	font-size: var(--text-base);
}
.kc-callout__head {
	margin: 0 0 var(--space-2) !important;
	font-size: var(--text-xs); font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--teal-700);
}
.kc-callout p:last-child { margin-bottom: 0; }

/* --- Pull quote --------------------------------------------------------- */
.kc-pull {
	margin: var(--space-7) 0;
	padding: 0 0 0 var(--space-6);
	border-left: 3px solid var(--teal-700);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 600;
	line-height: 1.4;
	color: var(--navy-900);
}
.kc-pull p { margin: 0; }

/* --- Plain link buttons (used outside Elementor, in the blog templates) -- */
/* ANCHORS ONLY. `.kc-btn` is also used as a class on Elementor's button
   *widget wrapper*, where these rules painted a navy block 34px wider than the
   button sitting inside it — the "Book a Consultation" halo on the home page.
   Elementor buttons are styled via `.kc-btn .elementor-button` further up. */
a.kc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 var(--space-6);
	border: 2px solid var(--teal-700);
	border-radius: var(--radius-sm);
	background: var(--teal-700); color: #fff;
	font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
	text-decoration: none;
	transition: background var(--duration-base), border-color var(--duration-base);
}
a.kc-btn:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }
a.kc-btn:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }

/* --- Breadcrumb (archives) ---------------------------------------------- */
.kc-crumbs {
	display: flex; flex-wrap: wrap; gap: var(--space-2);
	font-size: var(--text-xs);
	color: var(--text-500);
	margin-bottom: var(--space-4);
}
.kc-crumbs a { color: var(--text-500); text-decoration: none; }
.kc-crumbs a:hover { color: var(--teal-700); }

/* --- Inline CTA --------------------------------------------------------- */
.kc-inline-cta {
	margin: var(--space-8) 0;
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	background: var(--navy-800);
	color: #fff;
}
.kc-inline-cta__eyebrow {
	margin: 0 0 var(--space-2) !important;
	font-size: var(--text-xs); font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--on-dark);
}
.kc-inline-cta__title {
	font-family: var(--font-display);
	font-size: var(--text-xl); font-weight: 700; color: #fff;
	line-height: 1.3; margin: 0 0 var(--space-3) !important;
}
.kc-inline-cta__body {
	margin: 0 0 var(--space-5) !important;
	font-size: var(--text-sm); line-height: 1.65;
	color: var(--text-inverse-muted);
}
.kc-inline-cta__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 !important; }
.kc-btn--line {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}
.kc-btn--line:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }

/* --- Disclaimer + related ----------------------------------------------- */
.kc-prose .kc-article__disclaimer {
	margin-top: var(--space-8);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
	background: var(--slate-50);
	font-size: var(--text-sm);
	color: var(--text-500);
}
.kc-related {
	/* Sibling of the grid now, so it needs its own width. The outer box matches
	   the grid's container; the inner content is capped at the two columns plus
	   the gap (220 + 64 + 720) and left-aligned, so it stays flush with the
	   contents sidebar rather than centring itself in the leftover space. */
	width: min(var(--container-max), 100% - (var(--gutter) * 2));
	margin: var(--space-9) auto 0;
}
.kc-related__head,
.kc-related .kc-post-grid {
	max-width: calc(220px + var(--space-8) + 720px);
}
.kc-related__head {
	font-family: var(--font-display);
	font-size: var(--text-xs); font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--text-500);
	margin: 0 0 var(--space-5);
}

/* =========================================================================
   CONTACT / BOOKING SECTION
   -------------------------------------------------------------------------
   The two columns stretch to equal height, so the panel with less content
   ends up with dead space. Rather than fight that, the fix is to shorten the
   form (it was carrying ~250px of accidental spacing) and treat both columns
   as paired cards so the remaining breathing room reads as deliberate.
   ========================================================================= */

/* --- Both halves become cards ------------------------------------------- */
.kc-page .kc-contact-split .kc-bg-navy,
.kc-page .kc-contact-split .kc-bg-white {
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
}
.kc-page .kc-contact-split .kc-bg-white {
	border: 1px solid var(--border-100);
	box-shadow: var(--shadow-lg);
}

/* Dot grid low on the navy panel, so the space under the contact details
   looks intentional instead of empty. Matches the hero's texture. */
.kc-page .kc-contact-split .kc-bg-navy::after {
	content: "";
	position: absolute;
	right: -20px; bottom: -20px;
	width: 190px; height: 150px;
	background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.8px, transparent 1.8px);
	background-size: 14px 14px;
	pointer-events: none;
	z-index: 0;
}
.kc-page .kc-contact-split .kc-bg-navy > .e-con-inner { position: relative; z-index: 1; }

/* --- First / last name side by side -------------------------------------
   The row container is set to content_width:full, so Elementor renders it
   WITHOUT an .e-con-inner wrapper — the old `> .e-con-inner` rule matched
   nothing and the two fields stacked. Cover both shapes. */
.kc-mf-row > .e-con-inner,
.kc-mf-row:not(:has(> .e-con-inner)) {
	display: grid !important;
	gap: 0 var(--space-4);
	grid-template-columns: 1fr;
	width: 100%;
}
@media (min-width: 600px) {
	.kc-mf-row > .e-con-inner,
	.kc-mf-row:not(:has(> .e-con-inner)) { grid-template-columns: 1fr 1fr; }
}

/* --- Tighten the form ----------------------------------------------------
   Each field was costing ~120px: MetForm's own 16px wrapper margin stacked
   on top of the Elementor container gap. One source of spacing, not two. */
.kc-page .kc-form .metform-form-content,
.kc-page .kc-form .elementor-element.e-con {
	--gap: 0px;
	--row-gap: 0px;
}
.kc-page .kc-form .mf-input-wrapper { margin-bottom: var(--space-4) !important; }
.kc-page .kc-form .mf-input-label {
	margin-bottom: 6px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--navy-900);
}
.kc-page .kc-form .mf-input:not([type="checkbox"]) { min-height: 46px; }
/* !important because the generic .mf-input rule above scores 0,4,0 thanks to
   its :not() and would otherwise win on min-height. */
.kc-page .kc-form textarea.mf-input { min-height: 110px !important; height: 110px !important; }
.kc-page .kc-form .mf-input-help-text,
.kc-page .kc-form small { font-size: var(--text-xs); color: var(--text-500); }

/* --- Consent: one statement, not two ------------------------------------
   MetForm prints its own generic "Agree on our terms and condition…" line
   with a dead # link. The field's own label is the real consent wording, so
   show that beside the checkbox and drop the boilerplate. */
.kc-page .kc-form .elementor-widget-mf-gdpr-consent .mf-input-wrapper {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
	background: var(--mint-50);
}
/* flex:0 0 auto let the consent sentence size to its content and spill
   335px outside the panel, where overflow:hidden clipped it. Let it wrap. */
.kc-page .kc-form .elementor-widget-mf-gdpr-consent .mf-checkbox {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.kc-page .kc-form .elementor-widget-mf-gdpr-consent input[type="checkbox"] {
	width: 20px; height: 20px;
	accent-color: var(--teal-700);
	cursor: pointer;
}

/* --- Submit ------------------------------------------------------------- */
.kc-page .kc-form button.metform-btn,
.kc-page .kc-form .metform-submit-btn { width: 100%; min-height: 52px; }
/* MetForm hides the real <input> and draws the box with span::before, so the
   span must stay visible - hiding it removed the checkbox entirely. */
.kc-page .kc-form .elementor-widget-mf-gdpr-consent .mf-checkbox-option label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	cursor: pointer;
	margin: 0;
}
.kc-page .kc-form .elementor-widget-mf-gdpr-consent .mf-checkbox-option label span {
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--text-700);
	line-height: 1.5;
}
.kc-page .kc-form .elementor-widget-mf-gdpr-consent a { color: var(--teal-700); text-decoration: underline; }

/* --- The form must fill its column --------------------------------------
   The white column centres its children, so the form widget shrank to its
   own max-content width: 394px of 490 on desktop, and a broken 158px of 245
   on mobile (which squeezed the consent text into a 49px ribbon). */
.kc-page .kc-contact-split .kc-bg-white > .e-con-inner { align-items: stretch !important; }
.kc-page .kc-form,
.kc-page .kc-form .metform-form-main-wrapper,
.kc-page .kc-form .mf-form-wrapper { width: 100% !important; }

/* --- Double padding ------------------------------------------------------
   `.kc-pad-lg, .kc-pad-lg > .e-con-inner` (line ~149) pads the container AND
   its inner wrapper, so a boxed container gets it twice: 175px of a 335px
   column on mobile, which is what crushed the form to 158px.

   Scoped to this section deliberately — the same double padding applies
   anywhere .kc-pad/.kc-pad-lg sits on a boxed container, but changing it
   globally would shift every section on 15 pages without re-checking them. */
.kc-page .kc-contact-split .kc-bg-navy,
.kc-page .kc-contact-split .kc-bg-white { padding: 0 !important; }
.kc-page .kc-contact-split .kc-bg-navy > .e-con-inner,
.kc-page .kc-contact-split .kc-bg-white > .e-con-inner {
	padding: var(--space-7) var(--space-6) !important;
}
@media (max-width: 767px) {
	.kc-page .kc-contact-split .kc-bg-navy > .e-con-inner,
	.kc-page .kc-contact-split .kc-bg-white > .e-con-inner {
		padding: var(--space-6) var(--space-5) !important;
	}
}

/* --- Mobile drawer height ------------------------------------------------
   The header build set an 80px height on the nav widget (post-15.css:
   `.elementor-element-ab27bb6 .elementskit-menu-container { height: 80px }`).
   On desktop that is the nav bar. On mobile the SAME element becomes the
   off-canvas panel, so the drawer was locked to 80px and the eight menu items
   were clipped out of sight — the panel opened, but appeared empty. */
@media (max-width: 1024px) {
	.kc-nav .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		height: 100vh !important;
		height: 100dvh !important;
		max-height: none !important;
		overflow-y: auto;
	}
	.kc-nav .elementskit-menu-container.elementskit-menu-offcanvas-elements .elementskit-navbar-nav {
		height: auto !important;
	}
	/* Close control needs to read as a button, not a stray letter. */
	.kc-nav .elementskit-menu-close {
		display: inline-flex; align-items: center; justify-content: center;
		border: 1px solid var(--border-200);
		border-radius: var(--radius-sm);
		color: var(--navy-800);
		background: #fff;
		font-size: var(--text-lg);
		line-height: 1;
	}
}

/* --- Blog carousel (home strip) -----------------------------------------
   Native scroll-snap rather than a slider library: it swipes on touch by
   default, keeps keyboard focus order intact, and degrades to a plain
   scrolling row if the JS never runs. main.js only nudges scrollLeft. */
.kc-post-carousel { position: relative; }
.kc-post-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 86%;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--space-3);
	scrollbar-width: none;
	/* Cards lift on hover; without room the shadow gets clipped by overflow. */
	margin-inline: calc(var(--space-2) * -1);
	padding-inline: var(--space-2);
}
.kc-post-track::-webkit-scrollbar { display: none; }
.kc-post-track > * { scroll-snap-align: start; }
.kc-post-track:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 4px; }
@media (min-width: 700px)  { .kc-post-track { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .kc-post-track { grid-auto-columns: 31.5%; } }
@media (prefers-reduced-motion: reduce) { .kc-post-track { scroll-behavior: auto; } }

/* --- In-article CTA card -------------------------------------------------
   Two things broke this. First, .kc-prose h3/a are more specific than the
   card's own rules, so the title took the prose heading colour (navy-900 on
   navy-800 = 1.34:1) and the buttons took the prose link colour, underlined.
   Second, the brand is set to #2B4257 — the same navy as the card — so a
   brand-filled button was invisible against it.

   The card therefore uses white/neutral rather than brand colours: that holds
   up whatever the client sets the accent to. */
.kc-prose .kc-inline-cta__eyebrow { color: var(--on-dark); }
.kc-prose .kc-inline-cta__title   { color: #fff; }
.kc-prose .kc-inline-cta__body    { color: var(--text-inverse-muted); }

.kc-prose .kc-inline-cta a.kc-btn {
	background: #fff;
	border-color: #fff;
	color: var(--navy-900);
	text-decoration: none;
}
.kc-prose .kc-inline-cta a.kc-btn:hover {
	background: var(--mint-100);
	border-color: var(--mint-100);
	color: var(--navy-900);
}
.kc-prose .kc-inline-cta a.kc-btn--line {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}
.kc-prose .kc-inline-cta a.kc-btn--line:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}
.kc-prose .kc-inline-cta a.kc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Same reasoning for the pull quote and callout, which also sit inside
   .kc-prose and were picking up prose link/heading colours. */
.kc-prose .kc-callout__head { color: var(--navy-900); }

/* --- Links on dark surfaces ----------------------------------------------
   The Elementor kit sets a global link colour and now binds it to the Accent
   global (so links follow the brand on light pages, which is what the client
   wants). But the accent is currently #2B4257 — the same navy as the footer
   and every .kc-bg-navy panel — so those links rendered navy-on-navy at a
   1.0 contrast ratio: literally invisible.

   The kit stylesheet loads after this file, so these need the extra weight. */
.kc-page .kc-footer a:not(.elementor-button):not(.kc-btn),
.kc-page .kc-bg-navy a:not(.elementor-button):not(.kc-btn),
.kc-page .kc-tile-navy a:not(.elementor-button):not(.kc-btn) { color: var(--text-inverse-muted); }

.kc-page .kc-footer a:not(.elementor-button):not(.kc-btn):hover,
.kc-page .kc-bg-navy a:not(.elementor-button):not(.kc-btn):hover,
.kc-page .kc-tile-navy a:not(.elementor-button):not(.kc-btn):hover { color: #fff; }

/* The spotlight CTA is the one accent-coloured link on a dark surface. */
.kc-page .kc-footer .kc-fs-cta a { color: var(--on-dark); }
.kc-page .kc-footer .kc-fs-cta a:hover { color: #fff; }

/* --- Link-buttons: beat the kit's global `a` colour ----------------------
   .kc-btn is (0,1,0); the Elementor kit's global link rule is more specific
   and loads later, so it was repainting button text in the Accent colour —
   which is #2B4257, the same navy as the filled button's own background.
   "Book a consultation" in the article hero was navy-on-navy at 1.0:1.

   .kc-btn--line defaults to the LIGHT-surface treatment (dark border and
   text). It sits on the mint article hero, where the previous white border
   was invisible. Dark-surface uses override it locally — see the in-article
   CTA card and the footer. */
.kc-page a.kc-btn,
.kc-blog a.kc-btn {
	background: var(--teal-700);
	border-color: var(--teal-700);
	color: #fff;
	text-decoration: none;
}
.kc-page a.kc-btn:hover,
.kc-blog a.kc-btn:hover {
	background: var(--teal-800);
	border-color: var(--teal-800);
	color: #fff;
}

.kc-page a.kc-btn--line,
.kc-blog a.kc-btn--line {
	background: transparent;
	/* --border-200 scored 1.22:1 against the mint hero — the outline was
	   effectively invisible. UI borders need 3:1. Using the brand keeps it
	   paired with the filled button beside it. */
	border-color: var(--teal-700);
	color: var(--navy-900);
}
.kc-page a.kc-btn--line:hover,
.kc-blog a.kc-btn--line:hover {
	background: var(--mint-100);
	border-color: var(--navy-800);
	color: var(--navy-900);
}

/* --- Four-card band: CTAs on one line -----------------------------------
   The cards carry different amounts of copy, so their buttons sat 33 / 203 /
   178px from the bottom and the row read as ragged. Each tile becomes a
   full-height column and the button is pushed to the end.

   Scoped to this section: .kc-grid-4 is also used for service cards that have
   no buttons and should keep their natural flow. */
.kc-section-tight .kc-tile > .e-con-inner,
.kc-section-tight .kc-card > .e-con-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.kc-section-tight .kc-tile .elementor-widget-button,
.kc-section-tight .kc-card .elementor-widget-button { margin-top: auto; }

/* The white button on the navy tile: its text was being repainted by the
   dark-surface link colour above, landing at 1.47:1 on a white fill. */
.kc-page .kc-tile-navy .kc-btn-white .elementor-button { color: var(--navy-900); }
.kc-page .kc-tile-navy .kc-btn-white .elementor-button:hover,
.kc-page .kc-tile-navy .kc-btn-white .elementor-button:focus { color: var(--navy-900); }

/* --- Read more ------------------------------------------------------------
   The clamp is gated on `.js` (set in wp_head before first paint). Without
   JavaScript the paragraph renders in full rather than being cut off with no
   way to open it. */
/* Elementor 4 emits the <p> straight into the widget div — there is no
   .elementor-widget-container on this widget (1 exists on the whole page), so
   the clamp has to sit on the widget itself. The container selector is kept
   for widgets that still render one. */
.js .kc-readmore,
.js .kc-readmore .elementor-widget-container {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.js .kc-readmore.is-open,
.js .kc-readmore.is-open .elementor-widget-container {
	display: block;
	overflow: visible;
}

.kc-readmore-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 !important;   /* Astra styles bare <button> with 15px 30px */
	background: none;
	border: 0;
	min-height: 44px;        /* tap target, even though it reads as a link */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--teal-700);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kc-readmore-toggle:hover { color: var(--teal-800); }
.kc-readmore-toggle:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 3px; }
.kc-readmore-toggle::after {
	content: "\2193";
	transition: transform var(--duration-base);
}
.kc-readmore-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* =========================================================================
   SERVICE DETAIL PAGE  (kc-svc-*)
   Long-form treatment page: dark hero with photo + floating facts, surgeon
   block, explainer, how-it-works + comparison, options, non-surgical, risks,
   recovery timeline, why-choose, FAQ, patient stories, booking.
   Layout comes from the shared utilities (kc-split / kc-grid / kc-stack /
   kc-row). These rules only add what those don't. Every inner container on
   these pages is full-width (no .e-con-inner), so rules target the class.
   ========================================================================= */

/* --- Shared ------------------------------------------------------------ */
.kc-svc-eyebrow p {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--teal-700);
}
.kc-bg-navy .kc-svc-eyebrow p,
.kc-svc-hero .kc-svc-eyebrow p { color: var(--on-dark); }

.kc-page .kc-svc-head { max-width: 760px; margin: 0 auto var(--space-6); width: 100%; }

.kc-svc-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
}

.kc-page .kc-svc-panel {
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}
.kc-page .kc-svc-panel-split { margin-top: var(--space-7); align-items: start !important; }
.kc-page .kc-svc-compare { margin-top: var(--space-6); }

/* kc-stack aligns children to the start; these need the full width. */
.kc-svc-table,
.kc-svc-loc,
.kc-svc-steps,
.kc-svc-book .elementor-widget-button { align-self: stretch; width: 100%; }

/* White outline button for dark backgrounds (base sizing shared above). */
.kc-page .kc-btn-ghost .elementor-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.kc-page .kc-btn-ghost .elementor-button:hover,
.kc-page .kc-btn-ghost .elementor-button:focus { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }

/* --- 1. Hero ----------------------------------------------------------- */
.kc-page .kc-svc-hero {
	position: relative;
	overflow: hidden;
	background: var(--navy-900) !important;
	padding-block: var(--space-7) var(--space-8) !important;
}
/* Dot field — the same motif as the home hero. */
.kc-page .kc-svc-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: min(520px, 45%);
	height: 320px;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.4px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(to bottom left, #000 20%, transparent 75%);
	        mask-image: linear-gradient(to bottom left, #000 20%, transparent 75%);
	pointer-events: none;
}
.kc-svc-hero .elementor-heading-title { color: #fff; }
.kc-svc-hero .kc-h1 .elementor-heading-title { font-size: var(--text-5xl); }
/* The home H1 carries the surgeon's name as well as the specialty, which ran
   to five lines at the shared size. Capping it at 52px brings it back to four
   without a visible change in weight. Home only; other heroes are shorter. */
.home .kc-svc-hero .kc-h1 .elementor-heading-title { font-size: clamp(2.1rem, 1.7rem + 2.2vw, 3.25rem); }
.kc-svc-hero .kc-lede p { color: var(--text-inverse-muted); }
.kc-svc-hero .kc-crumb p,
.kc-svc-hero .kc-crumb a,
.kc-svc-hero .kc-crumb span { color: var(--text-inverse-muted) !important; }
.kc-svc-hero .kc-crumb a:hover { color: #fff !important; }
.kc-svc-byline p { font-size: var(--text-sm); color: var(--text-inverse-muted); }
.kc-svc-byline strong { color: #fff; font-weight: 600; }

.kc-page .kc-svc-trust {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: var(--space-5) !important;
	margin-top: var(--space-2);
	gap: var(--space-3) var(--space-6) !important;
}
.kc-svc-trust p {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: #fff;
}
.kc-svc-trust p::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--on-dark);
}

.kc-page .kc-svc-media { position: relative; }
.kc-svc-hero .kc-svc-img img { aspect-ratio: 4 / 3; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.55); }
.kc-page .kc-svc-float {
	position: absolute;
	z-index: 2;
	max-width: 250px;
	padding: var(--space-4) var(--space-5) !important;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
	gap: 2px !important;
}
.kc-page .kc-svc-float-a { left: -28px; bottom: 36px; }
.kc-page .kc-svc-float-b { right: -24px; top: 32px; }
.kc-svc-hero .kc-svc-float .elementor-heading-title { font-size: var(--text-base); color: var(--navy-900); }
.kc-svc-float p { font-size: var(--text-sm); color: var(--text-500); line-height: 1.45; }
@media (max-width: 1100px) {
	.kc-page .kc-svc-float-a { left: 16px; }
	.kc-page .kc-svc-float-b { right: 16px; }
}
@media (max-width: 599px) {
	.kc-page .kc-svc-float { position: static; max-width: none; margin-top: var(--space-3); box-shadow: var(--shadow-md); }
}

/* --- 2. Surgeon -------------------------------------------------------- */
.kc-page .kc-svc-photo-wrap { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.kc-svc-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-xl);
	background: #fff;
	box-shadow: var(--shadow-lg);
}
.kc-page .kc-svc-chip {
	position: absolute;
	right: -18px;
	bottom: 28px;
	z-index: 2;
	max-width: 220px;
	padding: var(--space-4) var(--space-5) !important;
	background: var(--navy-800);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xl);
	gap: 4px !important;
}
.kc-svc-chip .elementor-heading-title { color: #fff; font-size: var(--text-2xl); line-height: 1.1; }
.kc-svc-chip p { color: var(--text-inverse-muted); font-size: var(--text-sm); }
@media (max-width: 599px) { .kc-page .kc-svc-chip { right: 12px; bottom: 12px; } }

.kc-svc-role .elementor-heading-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; color: var(--text-700); }
.kc-svc-tags p {
	display: inline-block;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid var(--border-200);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-700);
}
.kc-page .kc-svc-stat {
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-5) !important;
	gap: 0 !important;
}
.kc-svc-stat .kc-stat-num .elementor-heading-title { font-size: var(--text-4xl); }
.kc-svc-stat .kc-stat-label p { margin-top: var(--space-1); }

/* --- 4. Comparison table ---------------------------------------------- */
.kc-svc-table .kc-svc-scroll { overflow-x: auto; }
.kc-svc-table table { width: 100%; min-width: 560px; margin: 0; border: 0; border-collapse: collapse; font-size: var(--text-sm); }
.kc-svc-table th,
.kc-svc-table td {
	padding: var(--space-4);
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--border-100);
	line-height: 1.55;
}
.kc-svc-table thead th { background: var(--mint-100); color: var(--navy-900); font-family: var(--font-display); font-weight: 700; }
.kc-svc-table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.kc-svc-table thead th:last-child { border-top-right-radius: var(--radius-sm); }
.kc-svc-table tbody th { width: 22%; color: var(--navy-900); font-weight: 600; }
.kc-svc-table td { color: var(--text-700); }
/* Two-option tables highlight the page's own option (last column); wider
   tables, like the implant comparison, stay neutral. */
.kc-svc-table td:nth-child(3):last-child { color: var(--navy-900); font-weight: 600; }
.kc-svc-table tbody tr:last-child th,
.kc-svc-table tbody tr:last-child td { border-bottom: 0; }

/* --- 6. Non-surgical options ------------------------------------------ */
.kc-svc-mini p {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-4);
	background: var(--mint-100);
	border-radius: var(--radius-md);
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy-900);
}
.kc-svc-mini p::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* --- 7. Risks ---------------------------------------------------------- */
.kc-page .kc-svc-note {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	padding: var(--space-5) !important;
	gap: var(--space-2) !important;
}
.kc-svc-note .elementor-heading-title { font-size: var(--text-lg); color: #fff; }
.kc-svc-note p { font-size: var(--text-sm); line-height: 1.6; color: var(--text-inverse-muted); }

/* --- 8. Recovery timeline --------------------------------------------- */
.kc-page .kc-svc-timeline {
	position: relative;
	width: 100%;
	max-width: 920px;
	margin-inline: auto;
	align-items: stretch !important;
	gap: var(--space-4) !important;
	/* Elementor gives every container 10px of padding, which shifted the cards
	   (and their markers) 10px right of the spine. */
	padding: 0 !important;
}
/* The spine shows in the gaps between the (opaque) cards. It sits on the centre
   of the marker column: card padding (--space-6, which scales with the root
   font size) + 1px border + half of 120px, minus half the 2px line. */
.kc-page .kc-svc-timeline::before {
	content: "";
	position: absolute;
	left: calc(var(--space-6) + 60px);
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: var(--border-200);
}
.kc-page .kc-svc-step {
	position: relative;
	display: grid !important;
	grid-template-columns: 120px 1fr;
	column-gap: var(--space-6);
	row-gap: var(--space-1);
	align-items: center;
	background: #fff;
	border: 1px solid var(--border-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-5) var(--space-6) !important;
}
.kc-svc-when { grid-row: span 2; justify-self: center; }
.kc-svc-when .elementor-heading-title {
	display: inline-block;
	min-width: 96px;
	padding: 8px 12px;
	text-align: center;
	background: var(--navy-800);
	color: #fff;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0;
}
.kc-svc-step .kc-h4 .elementor-heading-title { font-size: var(--text-lg); }
@media (max-width: 599px) {
	.kc-page .kc-svc-timeline::before { display: none; }
	.kc-page .kc-svc-step { grid-template-columns: 1fr; padding: var(--space-5) !important; }
	.kc-svc-when { grid-row: auto; justify-self: start; margin-bottom: var(--space-2); }
}

/* --- 10–11. FAQ + stories --------------------------------------------- */
.kc-page .kc-svc-faq,
.kc-page .kc-svc-stories { align-items: start; }

/* --- 12. Booking ------------------------------------------------------- */
.kc-svc-loc p {
	padding-block: var(--space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--text-inverse-muted);
}
.kc-svc-loc p:last-child { border-bottom: 0; }
.kc-svc-loc strong { display: block; margin-bottom: 2px; font-size: var(--text-base); font-weight: 600; color: #fff; }

/* kc-svc-loc is written for dark sections. On the Locations page the same
   block sits inside a white panel, where the light text was almost invisible
   (1.47:1). Give the light-background case its own colours. */
.kc-svc-panel .kc-svc-loc p {
	color: var(--text-700);
	border-bottom-color: var(--border-100);
}
.kc-svc-panel .kc-svc-loc strong { color: var(--navy-900); }

.kc-page .kc-svc-book {
	background: #fff;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
}
.kc-bg-navy .kc-svc-book .elementor-heading-title { color: var(--navy-900); }
.kc-bg-navy .kc-svc-book p,
.kc-bg-navy .kc-svc-book li { color: var(--text-700); }
.kc-svc-steps ol { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: kc-step; }
.kc-svc-steps li {
	counter-increment: kc-step;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: var(--space-3);
	align-items: start;
	line-height: 1.5;
}
.kc-svc-steps li::before {
	content: counter(kc-step);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mint-100);
	color: var(--navy-900);
	font-size: var(--text-sm);
	font-weight: 700;
}
.kc-svc-book .elementor-button { width: 100%; }

/* Phones: kc-pad-lg's 48px side padding left the booking buttons 208px wide. */
@media (max-width: 599px) {
	.kc-page .kc-svc-panel.kc-pad-lg,
	.kc-page .kc-svc-book.kc-pad-lg { padding: var(--space-6) var(--space-5) !important; }
}

/* Site-wide: the grey lede (--text-500) on the mint section tint measured
   4.23:1, under the 4.5:1 minimum for body text. */
.kc-bg-mint .kc-lede p,
.kc-bg-mint .kc-lede { color: var(--text-700); }

/* About page hero: a portrait photo in place of a landscape service image.
   The media box shrinks with it so the floating cards stay on the photo edge. */
.kc-page .kc-svc-media:has(.kc-svc-img-portrait) { width: 100%; max-width: 440px; margin-inline: auto; }
.kc-svc-hero .kc-svc-img-portrait img {
	aspect-ratio: 4 / 5;
	object-position: top center;
	background: var(--slate-100);
}

/* About page expertise cards: small icon tile above the heading.
   .kc-page lifts it over Elementor's `.elementor-view-default .elementor-icon`. */
.kc-page .kc-svc-depth-icon .elementor-icon-wrapper { text-align: left; line-height: 0; }
.kc-page .kc-svc-depth-icon .elementor-icon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md);
	background: var(--mint-100);
	color: var(--navy-800);
	font-size: 22px;
}
.kc-page .kc-svc-depth-icon .elementor-icon i { color: var(--navy-800); }
.kc-page .kc-svc-depth-icon .elementor-icon svg { width: 22px; height: 22px; fill: var(--navy-800); }

/* Contact page: the appointment form sits in a white card inside the dark hero.
   The hero turns every heading white, so the card takes its colours back. */
.kc-page .kc-svc-contact-split { align-items: start !important; }
.kc-svc-hero .kc-svc-book .elementor-heading-title { color: var(--navy-900); }
.kc-page .kc-svc-book .kc-form { align-self: stretch; width: 100%; }
.kc-svc-hero .kc-svc-loc a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.kc-svc-hero .kc-svc-loc a:hover { color: var(--on-dark); }

/* Location cards: map and hours rows need the card's full width. */
.kc-page .kc-svc-panel .kc-map,
.kc-page .kc-svc-panel .kc-hours-row { align-self: stretch; width: 100%; }

/* Home page service cards: photo on top, title, short description, link.
   Ten cards: one column, then two, then five across — never a lone orphan. */
.kc-page .kc-svc-cards { display: grid !important; gap: var(--space-5); grid-template-columns: 1fr; width: 100%; }
@media (min-width: 600px) { .kc-page .kc-svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kc-page .kc-svc-cards { grid-template-columns: repeat(5, 1fr); } }
.kc-page .kc-svc-service { overflow: hidden; padding: 0 !important; gap: 0 !important; }
.kc-svc-service-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.kc-page .kc-svc-service-body { flex: 1 1 auto; padding: var(--space-5) !important; gap: var(--space-2) !important; }
.kc-svc-service-body .elementor-widget-button { margin-top: auto; padding-top: var(--space-2); }

/* Home "Satisfied Patients" — WP Carousel (Swiper) restyled to match the site:
   rounded photo cards, round arrow buttons, no per-slide dots.
   Column count, gaps and pagination are set in the carousel's own settings;
   these rules only handle the look. */
.kc-page .kc-svc-carousel { position: relative; width: 100%; padding-inline: 60px !important; }
.kc-svc-carousel .wpcp-single-item {
	overflow: hidden;
	border: 0 !important;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.kc-svc-carousel .wpcp-single-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 0 !important;
	border-radius: 0 !important;
}
.kc-svc-carousel .wpcp-prev-button,
.kc-svc-carousel .wpcp-next-button {
	width: 46px !important;
	height: 46px !important;
	/* No margin-top: the plugin centres with top:50% + translateY(-50%). */
	border-radius: 50% !important;
	border: 1px solid var(--border-200) !important;
	background: #fff !important;
	color: var(--navy-800) !important;
	box-shadow: var(--shadow-md);
	transition: background var(--duration-base), color var(--duration-base), border-color var(--duration-base);
}
.kc-svc-carousel .wpcp-prev-button i,
.kc-svc-carousel .wpcp-next-button i { color: inherit !important; font-size: 16px; }
.kc-svc-carousel .wpcp-prev-button:hover,
.kc-svc-carousel .wpcp-next-button:hover { background: var(--navy-800) !important; border-color: var(--navy-800) !important; color: #fff !important; }
/* The plugin insets the slides 25px inside its wrapper; -29px puts a 46px
   button 8px clear of the first and last photo. */
.kc-svc-carousel .wpcp-prev-button { left: -29px !important; }
.kc-svc-carousel .wpcp-next-button { right: -29px !important; }
.kc-svc-carousel .wpcp-swiper-dots { display: none !important; }
@media (max-width: 767px) { .kc-page .kc-svc-carousel { padding-inline: 0 !important; } }

/* Portrait photos outside the hero (e.g. the CUVIS Joint section): same 4:5
   frame as the hero portrait. Later than `.kc-svc-img img`, so it wins. */
.kc-svc-img-portrait img { aspect-ratio: 4 / 5; object-position: top center; }
.kc-cuvis .kc-cuvis-benefits { margin-top: var(--space-7); }

/* --- Gallery page ------------------------------------------------------- */
/* Patients: the WordPress gallery markup, restyled as an even photo grid.
   !important beats the gallery's own inline float/width styles. */
.kc-gallery-grid .gallery {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: 0 !important;
}
@media (min-width: 600px) { .kc-gallery-grid .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kc-gallery-grid .gallery { grid-template-columns: repeat(5, 1fr); } }
/* Containers carry 10px padding; the widget does not, so match it. */
.kc-page .kc-gallery-grid { padding-inline: 10px; }
.kc-gallery-grid .gallery > br { display: none; }
.kc-gallery-grid .gallery-item {
	width: auto !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; float: none !important;
}
.kc-gallery-grid .gallery-icon a {
	display: block; overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.kc-gallery-grid .gallery-item img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 4; object-fit: cover;
	border: 0 !important; border-radius: 0;
	transition: transform var(--duration-slow) var(--ease-premium);
}
.kc-gallery-grid .gallery-icon a:hover img { transform: scale(1.05); }
.kc-gallery-grid .gallery-caption { display: none; }

/* Achievements: certificate cards, scan shown whole on a light mat.
   Flex-wrap rather than grid, so a short last row sits centred. */
.kc-gallery-certs > .e-con-inner, .kc-gallery-certs:not(:has(> .e-con-inner)) {
	display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
	justify-content: center !important; align-items: stretch;
	gap: var(--space-5); width: 100%;
}
.kc-gallery-certs .kc-gallery-cert { flex: 0 0 100% !important; max-width: 100%; }
@media (min-width: 600px) { .kc-gallery-certs .kc-gallery-cert { flex-basis: calc((100% - var(--space-5)) / 2) !important; max-width: calc((100% - var(--space-5)) / 2); } }
@media (min-width: 1000px) { .kc-gallery-certs .kc-gallery-cert { flex-basis: calc((100% - 3 * var(--space-5)) / 4) !important; max-width: calc((100% - 3 * var(--space-5)) / 4); } }
.kc-gallery-cert { overflow: hidden; }
.kc-gallery-cert > .e-con-inner, .kc-gallery-cert { padding: 0 !important; gap: 0 !important; }
.kc-page .kc-gallery-cert-img a { display: block; background: var(--mint-50); padding: var(--space-3); }
.kc-gallery-cert-img img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: contain;
	transition: transform var(--duration-slow) var(--ease-premium);
}
.kc-gallery-cert-img a:hover img { transform: scale(1.03); }
.kc-page .kc-gallery-cert-body { padding: var(--space-5) !important; gap: var(--space-2); }
.kc-gallery-cert .kc-svc-when { grid-row: auto; justify-self: start; }
/* Feedback videos: one uniform portrait grid, sized by column not height. */
.kc-gallery-videos > .e-con-inner, .kc-gallery-videos:not(:has(> .e-con-inner)) {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6) var(--space-4);
	width: 100%;
	align-items: start;
}
@media (min-width: 600px) { .kc-gallery-videos > .e-con-inner, .kc-gallery-videos:not(:has(> .e-con-inner)) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kc-gallery-videos > .e-con-inner, .kc-gallery-videos:not(:has(> .e-con-inner)) { grid-template-columns: repeat(5, 1fr); } }
.kc-gallery-videos .e-con { padding: 0 !important; }
.kc-gallery-videos .kc-yt-card { align-items: stretch; }
.kc-gallery-videos .kc-yt-cover,
.kc-gallery-videos iframe {
	aspect-ratio: 9 / 16 !important;
	width: 100% !important;
	height: auto !important;
}
.kc-gallery-videos .kc-yt-card__title { font-size: var(--text-sm); }
.kc-gallery-more > .e-con-inner, .kc-gallery-more { justify-content: center !important; margin-top: var(--space-6); }

/* Home hero: three actions (book / call / WhatsApp) share one row. */
.home .kc-svc-hero .kc-row .elementor-button { padding-inline: 22px; }
@media (min-width: 1000px) { .home .kc-svc-hero .kc-row { flex-wrap: nowrap !important; } }

/* --- Planning screens from a real case ---------------------------------- */
.kc-plan-tile { overflow: hidden; }
.kc-plan-img a { display: block; background: var(--navy-900); border-radius: var(--radius-md); overflow: hidden; }
.kc-plan-img img { display: block; width: 100%; height: auto; }
.kc-plan-grid .kc-plan-tile .kc-small p { color: var(--text-700); }

/* --- WhatsApp booking (contact + thank-you) ------------------------------ */
.kc-btn-wa .elementor-button { background: #25D366 !important; color: #0b2e18 !important; border-color: #25D366 !important; }
.kc-btn-wa .elementor-button:hover { background: #1ebe5a !important; border-color: #1ebe5a !important; }
.kc-wa-lead { margin-bottom: var(--space-3); }
.kc-or p.kc-or-line { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; color: var(--text-500); font-size: var(--text-sm); }
.kc-or p.kc-or-line::before, .kc-or p.kc-or-line::after { content: ""; flex: 1; height: 1px; background: var(--border-100); }
.kc-wa-note p { color: var(--on-dark); }

/* =========================================================================
   CERTIFICATE WALL  —  framed certificates hung on a plaster wall.
   The frame is CSS rather than an image, so every certificate keeps its own
   proportions and nothing has to be re-cut. Clicking one opens the full scan.
   ========================================================================= */
.kc-certwall {
	background:
		radial-gradient(130% 90% at 50% -10%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, #efe8dd 0%, #e5dacb 55%, #d8ccb9 100%);
	padding-block: var(--space-8) !important;
}
.kc-certwall-grid > .e-con-inner,
.kc-certwall-grid:not(:has(> .e-con-inner)) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch;
	gap: var(--space-7) var(--space-6);
	width: 100%;
}

/* The frame: wood-toned edge, white mount, and a shadow that sits it off
   the wall. Two across on a phone, four on a desktop. */
.kc-certframe {
	flex: 0 0 calc((100% - var(--space-6)) / 2) !important;
	max-width: calc((100% - var(--space-6)) / 2);
	padding: 9px !important;
	gap: 0 !important;
	background: linear-gradient(145deg, #9a7040 0%, #7b5530 45%, #5d3f1f 100%);
	border-radius: 3px;
	box-shadow: 0 16px 26px -16px rgba(26, 16, 6, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: transform var(--duration-base) var(--ease-premium), box-shadow var(--duration-base);
}
@media (min-width: 1000px) {
	.kc-certframe {
		flex-basis: calc((100% - 3 * var(--space-6)) / 4) !important;
		max-width: calc((100% - 3 * var(--space-6)) / 4);
	}
}
.kc-certframe:hover,
.kc-certframe:focus-within {
	transform: translateY(-6px) scale(1.03);
	box-shadow: 0 26px 38px -18px rgba(26, 16, 6, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	z-index: 2;
}

/* White mount around the scan. */
.kc-certframe .elementor-widget-image {
	background: #fff;
	padding: 10px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.kc-certframe .elementor-widget-image a { display: block; line-height: 0; }
.kc-certframe img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: #fff;
	cursor: zoom-in;
}

/* Engraved plate under the frame, the way a hung certificate is labelled. */
.kc-page .kc-certframe .kc-certplate {
	background: linear-gradient(180deg, #6f4d27 0%, #5a3d1e 100%);
	padding: var(--space-3) var(--space-4) !important;
}
.kc-certframe .kc-certplate p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}
.kc-certframe .kc-certplate strong {
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.3;
}
.kc-certframe .kc-certplate span {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--text-xs);
	line-height: 1.4;
}

.kc-certwall-head { padding-bottom: 0 !important; }

/* Equal-height frames across a row; the plate sits at the bottom of each. */
.kc-page .kc-certframe .kc-certplate { margin-top: auto; }

/* =========================================================================
   INSTAGRAM LIGHTBOX  —  Reels play here instead of on instagram.com.
   The iframe is Instagram's own embed, so it carries their player chrome;
   what we control is the frame around it.
   ========================================================================= */
.kc-ig-modal[hidden] { display: none; }
.kc-ig-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 56px 16px 24px;
}
.kc-ig-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 22, 34, 0.84);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.kc-ig-modal__box {
	position: relative;
	width: min(420px, 92vw);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.kc-ig-modal__frame {
	width: 100%;
	height: min(760px, 78vh);
	border: 0;
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}
.kc-ig-modal__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--navy-900);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s;
}
.kc-ig-modal__close:hover,
.kc-ig-modal__close:focus-visible { background: #fff; }
.kc-ig-modal__out {
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	font-size: var(--text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kc-ig-modal__out:hover { color: #fff; }

/* Stop the page scrolling behind the lightbox. */
body.kc-ig-modal-open { overflow: hidden; }

/* The tiles are clickable, so say so. */
#sb_instagram .sbi_photo { cursor: zoom-in; }

/* =========================================================================
   CLICK-TO-LOAD MAPS  —  the panel shown in place of a Google map until the
   visitor asks for it. Styled as a quiet placeholder, not an error.
   ========================================================================= */
.kc-map-consent {
	display: grid;
	place-items: center;
	width: 100%;
	padding: var(--space-6) var(--space-5);
	text-align: center;
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%),
		var(--mint-100, #eef3f4);
	border: 1px solid var(--border-100);
	border-radius: var(--radius-md);
}
.kc-map-consent__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	max-width: 32ch;
}
.kc-map-consent__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--navy-900);
	line-height: 1.35;
}
.kc-map-consent__note {
	margin: 0;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--text-700);
}
.kc-map-consent__btn {
	margin-top: var(--space-2);
	padding: 10px 20px;
	border: 0;
	border-radius: var(--radius-full, 999px);
	background: var(--navy-900);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--duration-base), transform var(--duration-base);
}
.kc-map-consent__btn:hover,
.kc-map-consent__btn:focus-visible { background: var(--teal-700, #11616b); transform: translateY(-1px); }
.kc-map-consent__link {
	font-size: var(--text-xs);
	color: var(--text-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kc-map-consent__link:hover { color: var(--navy-900); }