/* ==========================================================================
   KETNAL CREATIONS — SECTIONS
   One block per section, in the order a visitor meets them.
   Depends on ketnal-foundation.css for tokens, type, buttons and motion.
   ========================================================================== */

/* ==========================================================================
   HEADER
   Fixed, always visible, and it condenses into a glass pill once the page
   moves. The logo and controls never change size, so the bar settling is the
   only movement a visitor sees.
   ========================================================================== */

.k-header {
  position: relative;
  padding: 0 var(--k-pad-x);
}

/* Utility strip. Positioning line and contact details on the first screen,
   collapsed to nothing once the visitor starts reading. Collapsed with
   grid-template-rows so the transition is smooth without a measured height,
   and it only ever affects this fixed header — no page content moves. */
.k-util {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.44s var(--k-ease), opacity 0.3s var(--k-ease);
}
.k-header.is-scrolled .k-util { grid-template-rows: 0fr; opacity: 0; }
.k-util > * { overflow: hidden; }

.k-util__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 44px;
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding-inline: 1.35rem;
}

.k-util__line {
  margin: 0;
  min-width: 0;
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-util__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: none;
}
.k-util__links a,
.k-util__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--k-fs-xs);
  color: var(--k-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--k-ease);
}
.k-util__links a:hover { color: #fff; }
.k-util__links svg { width: 14px; height: 14px; color: var(--k-ember); }
.k-util__hours { color: var(--k-mute); }

@media (max-width: 1240px) {
  .k-util__line { display: none; }
  .k-util__in { justify-content: flex-end; }
  .k-util__hours { display: none; }
}
@media (max-width: 900px) {
  .k-util { display: none; }
}

/* Reading progress. Sits above the bar and is driven by --k-scroll. */
.k-header__progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
}
.k-header__progress::after {
  content: '';
  display: block;
  height: 100%;
  transform: scaleX(var(--k-scroll, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--k-ember-deep), var(--k-ember) 55%, var(--k-orchid-soft));
}

.k-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  max-width: var(--k-container-wide);
  margin-inline: auto;
  padding: 0.7rem 0.75rem 0.7rem 1.35rem;
  border-radius: var(--k-r-pill);
  border: 1px solid transparent;
  background: transparent;
  transition:
    background-color 0.45s var(--k-ease),
    border-color 0.45s var(--k-ease),
    box-shadow 0.45s var(--k-ease),
    -webkit-backdrop-filter 0.45s var(--k-ease),
    backdrop-filter 0.45s var(--k-ease);
}

.k-header.is-scrolled .k-header__bar {
  /* Opaque enough to stay legible where the bar crosses the one light
     section on the site. */
  background: rgba(14, 10, 22, 0.84);
  border-color: var(--k-line);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

.k-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.k-brand img {
  width: auto;
  height: 44px;
  transition: filter 0.35s var(--k-ease);
}
@media (max-width: 620px) { .k-brand img { height: 38px; } }
.k-brand:hover img { filter: brightness(1.15); }

.k-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline: auto;
}

.k-nav__item { position: relative; }

.k-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  font-family: var(--k-font);
  cursor: pointer;
  padding: 0.6rem 0.95rem;
  border-radius: var(--k-r-pill);
  font-size: var(--k-fs-sm);
  font-weight: 400;
  color: var(--k-faint);
  background-color: transparent;
  transition: color 0.3s var(--k-ease), background-color 0.3s var(--k-ease);
  white-space: nowrap;
}
.k-nav__link:hover,
.k-nav__link:focus-visible { color: #fff; background-color: rgba(255, 255, 255, 0.06); }

.k-nav__link.is-current { color: #fff; }
.k-nav__link.is-current::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--k-ember);
  box-shadow: 0 0 10px var(--k-ember);
}

.k-nav__caret {
  width: 9px;
  height: 6px;
  flex: none;
  transition: transform 0.3s var(--k-ease);
  /* The caret is decoration inside the trigger, not the trigger itself. */
}
.k-nav__item.is-open .k-nav__caret { transform: rotate(180deg); }

/* Mega panel */
.k-mega {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  width: min(680px, calc(100vw - 2.5rem));
  padding: 1.4rem;
  border-radius: var(--k-r-lg);
  background: rgba(12, 9, 19, 0.94);
  border: 1px solid var(--k-line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -8px, 0);
  transition: opacity 0.32s var(--k-ease), transform 0.32s var(--k-ease), visibility 0.32s;
}
.k-nav__item.is-open .k-mega {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0);
}

.k-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.k-mega__link {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: var(--k-r-sm);
  background-color: transparent;
  transition: background-color 0.28s var(--k-ease);
}
.k-mega__link:hover,
.k-mega__link:focus-visible { background-color: rgba(255, 255, 255, 0.055); }

.k-mega__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--k-line);
  background: rgba(255, 45, 85, 0.09);
  color: var(--k-ember-soft);
}
.k-mega__icon svg { width: 17px; height: 17px; }

.k-mega__title {
  display: block;
  font-size: var(--k-fs-sm);
  font-weight: 500;
  color: var(--k-chalk);
  margin-bottom: 0.15rem;
}
.k-mega__desc {
  display: block;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
  line-height: 1.45;
}

.k-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--k-line);
}

.k-header__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
}

/* Webmail. A secondary, permanently visible action for existing clients, ranked
   clearly below the primary CTA that prospects need. Colour and border only on
   hover — like every other control on the site, it does not move. */
.k-webmail {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.78rem 1.2rem;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line-strong);
  background-color: rgba(255, 255, 255, 0.032);
  font-size: var(--k-fs-xs);
  font-weight: 600;
  color: var(--k-chalk);
  white-space: nowrap;
  transition:
    background-color 0.3s var(--k-ease),
    border-color 0.3s var(--k-ease),
    color 0.3s var(--k-ease);
}
.k-webmail:hover,
.k-webmail:focus-visible {
  background-color: rgba(255, 45, 85, 0.12);
  border-color: rgba(255, 45, 85, 0.48);
  color: #fff;
}
.k-webmail__ico { width: 15px; height: 15px; flex: none; color: var(--k-ember-soft); }

/* Below the desktop nav the label goes and the envelope carries it. The
   accessible name comes from the visually hidden label, so the icon-only state
   is still announced correctly. */
@media (max-width: 1240px) {
  .k-webmail { padding: 0.78rem 0.9rem; }
  .k-webmail__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
@media (max-width: 560px) {
  .k-webmail { display: none; }
}

/* Burger. The bars cross over; the button itself does not move. */
.k-burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--k-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.3s var(--k-ease), background-color 0.3s var(--k-ease);
}
.k-burger:hover { border-color: var(--k-line-strong); }
.k-burger span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 1.5px;
  background: var(--k-chalk);
  border-radius: 2px;
  transition: transform 0.34s var(--k-ease), opacity 0.24s var(--k-ease);
}
.k-burger span:nth-child(1) { top: 17px; }
.k-burger span:nth-child(2) { top: 22.5px; }
.k-burger span:nth-child(3) { top: 28px; }
.k-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.k-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.k-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .k-nav { display: none; }
  .k-burger { display: block; }
  .k-header__bar { justify-content: space-between; }
  .k-header__actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .k-header__actions .k-btn { padding: 0.8rem 1.15rem; }
}

/* Drawer */
.k-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  padding: 1.15rem var(--k-pad-x) 2rem;
  background: rgba(7, 5, 10, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--k-ease), visibility 0.4s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.k-drawer.is-open { opacity: 1; visibility: visible; }
body.k-locked { overflow: hidden; }

.k-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--k-line);
}

.k-drawer__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--k-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--k-chalk);
  cursor: pointer;
  transition: border-color 0.3s var(--k-ease), background-color 0.3s var(--k-ease);
}
.k-drawer__close:hover { border-color: var(--k-line-strong); background: rgba(255, 255, 255, 0.07); }
.k-drawer__close svg { width: 18px; height: 18px; }

.k-drawer__nav { padding: 1.6rem 0; }

.k-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--k-chalk);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.3s var(--k-ease);
}
.k-drawer__link:hover { color: var(--k-ember-soft); }
.k-drawer__link.is-current { color: var(--k-ember-soft); }
.k-drawer__link span {
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--k-mute);
  flex: none;
}

.k-drawer__group { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.k-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 0;
  background: none;
  border: 0;
  font-family: var(--k-font);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--k-chalk);
  cursor: pointer;
  text-align: left;
  transition: color 0.3s var(--k-ease);
}
.k-drawer__toggle:hover { color: var(--k-ember-soft); }
.k-drawer__toggle svg { width: 18px; height: 18px; flex: none; transition: transform 0.34s var(--k-ease); }
.k-drawer__group.is-open .k-drawer__toggle svg { transform: rotate(45deg); }

.k-drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--k-ease);
}
.k-drawer__group.is-open .k-drawer__sub { grid-template-rows: 1fr; }
.k-drawer__sub > div { overflow: hidden; }
.k-drawer__sub a {
  display: block;
  padding: 0.6rem 0 0.6rem 1.2rem;
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
  border-left: 1px solid var(--k-line);
  transition: color 0.3s var(--k-ease), border-color 0.3s var(--k-ease);
}
.k-drawer__sub a:hover { color: #fff; border-color: var(--k-ember); }

.k-drawer__foot { margin-top: auto; padding-top: 1.6rem; }
.k-drawer__foot .k-btn { margin-bottom: 1rem; }
.k-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
}

/* ==========================================================================
   HERO
   One system, two sizes. Every page uses it, so the site opens the same way
   each time and only the content and the media layer change.
   ========================================================================== */

.k-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--k-header-h) + 4rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.k-hero--page {
  min-height: min(86svh, 780px);
  align-items: center;
}

.k-hero__media {
  position: absolute;
  inset: -8% -4% -4%;
  z-index: -3;
  /* Scroll zoom. Transform only, on a layer that is already oversized so no
     edge can ever be revealed. */
  transform: scale(calc(1 + var(--p, 0) * 0.16));
  transform-origin: 62% 40%;
  will-change: transform;
}
.k-hero__media img,
.k-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Legibility: a two-stop veil, weighted to the side the text sits on. */
/* Legibility veil, weighted to the side the text sits on. Held a little
   stronger than it needs to be on flat colour, because the re-encoded art is
   brighter and more detailed than before and the copy has to win over it. */
.k-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(93deg, var(--k-ink-950) 8%, rgba(7, 5, 10, 0.9) 40%, rgba(7, 5, 10, 0.42) 68%, rgba(7, 5, 10, 0.6) 100%),
    linear-gradient(to top, var(--k-ink-950) 2%, transparent 44%);
}
.k-hero--center .k-hero__veil {
  background:
    radial-gradient(ellipse 72% 62% at 50% 45%, rgba(7, 5, 10, 0.7), rgba(7, 5, 10, 0.92) 76%),
    linear-gradient(to top, var(--k-ink-950) 2%, transparent 45%);
}

.k-hero__inner {
  position: relative;
  width: 100%;
  /* Content drifts up and fades as the section leaves, at a different rate to
     the media, which is what makes the depth read. */
  transform: translate3d(0, calc(var(--p, 0) * -70px), 0);
  opacity: calc(1 - var(--p, 0) * 0.85);
}
.k-hero--page .k-hero__inner {
  transform: translate3d(0, calc(var(--p, 0) * -40px), 0);
  opacity: 1;
}

/* Measured in px, not ch. A ch unit on this container resolves against the
   17px body size, not the clamped display size, which made the headline
   column about 170px wide and cut every line in half. */
.k-hero__copy { max-width: 820px; }
.k-hero__copy--wide { max-width: 1000px; }
.k-hero--center .k-hero__copy { max-width: 900px; margin-inline: auto; text-align: center; }

.k-hero .k-eyebrow {
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-pill);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  margin-bottom: 1.75rem;
}

.k-hero__lead {
  max-width: 46ch;
  margin-top: 1.75rem;
}
.k-hero--center .k-hero__lead { margin-inline: auto; }

.k-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.35rem;
}
.k-hero--center .k-hero__cta { justify-content: center; }

.k-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--k-line);
  max-width: 620px;
}
.k-hero__stat b {
  display: block;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--k-chalk);
}
.k-hero__stat span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-mute);
}


/* Rotating seal. Decorative, and it stops for reduced motion. */
.k-ring {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  width: 132px;
  height: 132px;
  z-index: 2;
  pointer-events: none;
}
.k-ring__spin {
  width: 100%;
  height: 100%;
  animation: k-spin 26s linear infinite;
}
.k-ring text {
  font-family: var(--k-font);
  font-size: 8.6px;
  font-weight: 500;
  letter-spacing: 0.28em;
  fill: var(--k-faint);
  text-transform: uppercase;
}
.k-ring__core {
  position: absolute;
  inset: 30%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 85, 0.4);
  background: rgba(255, 45, 85, 0.08);
  color: var(--k-ember-soft);
}
.k-ring__core svg { width: 16px; height: 16px; }

@keyframes k-spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) { .k-ring { display: none; } }

/* Scroll cue */
.k-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  z-index: 2;
  pointer-events: none;
}
.k-cue span {
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--k-mute);
}
.k-cue__track {
  width: 22px;
  height: 36px;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line-strong);
  position: relative;
  overflow: hidden;
}
.k-cue__track::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--k-ember);
  animation: k-cue 2.2s var(--k-ease-inout) infinite;
}
@keyframes k-cue {
  0% { transform: translateY(0); opacity: 0; }
  22% { opacity: 1; }
  75% { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}
@media (max-width: 860px) { .k-cue { display: none; } }

/* Breadcrumb strip on inner pages */
.k-crumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
}
.k-crumbs a { color: var(--k-mute); transition: color 0.3s var(--k-ease); }
.k-crumbs a:hover { color: var(--k-chalk); }
.k-crumbs svg { width: 12px; height: 12px; opacity: 0.5; flex: none; }
.k-crumbs [aria-current] { color: var(--k-chalk); }

/* ==========================================================================
   OBJECTIVES — the one light block on the site
   A deliberate interruption: cream paper against the ink, so the question it
   asks cannot be scrolled past.
   ========================================================================== */

.k-obj {
  position: relative;
  background: var(--k-bone);
  color: var(--k-ink-900);
  overflow: hidden;
}

.k-obj::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(30, 21, 38, 0.18) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.k-obj__inner { position: relative; }
.k-obj .k-h2 { color: var(--k-ink-950); }
.k-obj .k-eyebrow { color: var(--k-ember-deep); }
.k-obj .k-eyebrow__dot { background: var(--k-ember-deep); box-shadow: none; }
.k-obj .k-lead { color: rgba(20, 14, 30, 0.7); }

.k-obj__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1024px) { .k-obj__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .k-obj__grid { grid-template-columns: minmax(0, 1fr); } }

.k-goal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--k-r-md);
  background: #fff;
  border: 1px solid rgba(30, 21, 38, 0.1);
  box-shadow: 0 18px 40px -30px rgba(30, 21, 38, 0.5);
  transition: border-color 0.35s var(--k-ease), box-shadow 0.35s var(--k-ease);
}
.k-goal:hover {
  border-color: rgba(255, 45, 85, 0.45);
  box-shadow: 0 22px 50px -28px rgba(155, 28, 52, 0.45);
}
.k-goal__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 45, 85, 0.1);
  color: var(--k-ember-deep);
}
.k-goal__icon svg { width: 19px; height: 19px; }
.k-goal h3 { font-size: var(--k-fs-h4); color: var(--k-ink-950); }
.k-goal p { font-size: var(--k-fs-sm); color: rgba(20, 14, 30, 0.66); margin: 0; }
.k-goal__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--k-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--k-ember-deep);
}
.k-goal__go svg { width: 13px; height: 13px; }

/* ==========================================================================
   SERVICE DECK
   Sticky stacking cards. Pure CSS sticky, so there is no pinning maths to
   drift out of sync — the only JS involvement is the sink amount.
   ========================================================================== */

.k-deck { position: relative; }

.k-deck__list { position: relative; }

/* Each card pins 14px lower than the one before it, so the stack reads as a
   deliberately fanned deck rather than cards vanishing behind each other.
   --k-i is set on each item by the motion engine's stagger pass. */
.k-deck__item {
  position: sticky;
  top: calc(var(--k-header-h) + clamp(1rem, 3vw, 2.5rem) + var(--k-i, 0) * 14px);
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
}

.k-deck__card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-height: min(62svh, 520px);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  background: linear-gradient(158deg, var(--k-ink-800), var(--k-ink-900) 62%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06) inset, 0 50px 100px -60px rgba(0, 0, 0, 1);
  overflow: hidden;
  /* Cards sink and dim as the next one covers them. */
  transform: scale(calc(1 - 0.06 * var(--p, 0)));
  filter: brightness(calc(1 - 0.28 * var(--p, 0)));
  will-change: transform, filter;
}
@media (max-width: 900px) {
  .k-deck__item { position: relative; top: auto; }
  .k-deck__card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    transform: none;
    filter: none;
  }
}

.k-deck__card::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  background: radial-gradient(circle, var(--k-card-glow, var(--k-ember)) 0%, transparent 68%);
}

.k-deck__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.k-deck__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--k-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--k-card-glow, var(--k-ember));
}
.k-deck__icon svg { width: 20px; height: 20px; }

.k-deck__body { position: relative; z-index: 1; }
.k-deck__body .k-h2 { margin-bottom: 1.1rem; }
.k-deck__body .k-lead { max-width: 46ch; }

.k-deck__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.85rem;
}

.k-deck__cta { margin-top: 2rem; }

.k-deck__art {
  position: relative;
  border-radius: var(--k-r-lg);
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--k-line);
}
.k-deck__art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .k-deck__art { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   WORK — pinned horizontal gallery
   The container's height is computed by JS from the rail width, so vertical
   scroll maps exactly onto horizontal travel. On mobile it degrades to a
   native swipe rail, which is what a thumb expects anyway.
   ========================================================================== */

.k-work { position: relative; }

.k-work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.k-work__rail { position: relative; }

.k-work__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  /* Stops a horizontal overscroll turning into a browser back-navigation. */
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  /* No scroll-snap for pointer drags — see the note under (pointer: coarse)
     at the end of this block. */
  /* Aligns the first and last card with the container edge at any width, so the
     rail reads as part of the grid rather than bolted on. */
  padding-inline: max(var(--k-pad-x), calc((100% - var(--k-container-wide)) / 2 + var(--k-pad-x)));
  padding-bottom: 0.5rem;
}

.k-work__item {
  flex: none;
  width: min(84vw, 660px);
}

/* Snapping is enabled for touch only, and this is the reason:
   with a mouse, a deliberate 200px drag across a 660px card is less than half a
   card, so any snap — proximity included — springs the rail straight back to
   where it started. The drag registers and then visibly undoes itself, which
   reads as broken. A finger swipe carries momentum and lands naturally on a
   snap point, so there it is an improvement rather than a fight. */
@media (pointer: coarse) {
  .k-work__track { scroll-snap-type: x proximity; }
  .k-work__item { scroll-snap-align: start; }
  .k-rail__track { scroll-snap-type: x proximity; }
  .k-post { scroll-snap-align: start; }
}

.k-work__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.k-work__progress {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 2px;
  background: var(--k-line);
  overflow: hidden;
  border-radius: 2px;
}
.k-work__progress::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(var(--k-rail-p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--k-ember), var(--k-orchid));
}

@media (max-width: 620px) {
  .k-work__item { width: 86vw; }
  .k-work__foot .k-link { display: none; }
}

/* Browser chrome around each screenshot. Sells these as live sites. */
.k-frame {
  border-radius: var(--k-r-lg);
  overflow: hidden;
  border: 1px solid var(--k-line);
  background: var(--k-ink-800);
  box-shadow: 0 50px 110px -60px rgba(0, 0, 0, 1);
}
.k-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--k-line);
}
.k-frame__dots { display: flex; gap: 0.35rem; flex: none; }
.k-frame__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.k-frame__url {
  flex: 1;
  padding: 0.3rem 0.75rem;
  border-radius: var(--k-r-pill);
  background: rgba(0, 0, 0, 0.32);
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-frame__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--k-ink-850);
}
.k-frame__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.k-work__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.15rem;
}
.k-work__meta h3 { font-size: var(--k-fs-h3); }
.k-work__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.k-work__blurb { margin-top: 0.5rem; font-size: var(--k-fs-sm); color: var(--k-mute); max-width: 60ch; }

/* ==========================================================================
   WHY — parallax monogram beside numbered claims
   ========================================================================== */

.k-why { position: relative; overflow: hidden; }

.k-why__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 940px) { .k-why__grid { grid-template-columns: minmax(0, 1fr); } }

.k-why__art {
  position: relative;
  border-radius: var(--k-r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--k-line);
}
.k-why__art img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  /* Slow counter-drift against the list beside it. */
  transform: translate3d(0, calc(var(--p, 0) * -8%), 0);
}
@media (max-width: 940px) { .k-why__art { aspect-ratio: 16 / 11; } }

.k-why__list { counter-reset: k-why; }
.k-why__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--k-line);
  counter-increment: k-why;
}
.k-why__row:first-child { padding-top: 0; }
.k-why__row::before {
  content: counter(k-why, decimal-leading-zero);
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--k-ember);
  padding-top: 0.45rem;
}
.k-why__row h3 { font-size: var(--k-fs-h4); margin-bottom: 0.5rem; }
.k-why__row p { font-size: var(--k-fs-sm); color: var(--k-mute); margin: 0; }

/* ==========================================================================
   STATS
   ========================================================================== */

.k-stats { position: relative; overflow: hidden; }

.k-stats__bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  opacity: 0.5;
  transform: translate3d(0, calc(var(--p, 0) * -12%), 0);
}
.k-stats__bg img { width: 100%; height: 100%; object-fit: cover; }
.k-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--k-ink-950), rgba(7, 5, 10, 0.6) 45%, var(--k-ink-950));
}

.k-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--k-line);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  overflow: hidden;
}
@media (max-width: 860px) { .k-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.k-stat {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(10, 7, 16, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}
.k-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--k-chalk);
  font-variant-numeric: tabular-nums;
}
.k-stat__value i { font-style: normal; color: var(--k-ember); }
.k-stat__label {
  margin-top: 0.85rem;
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-mute);
}

/* ==========================================================================
   PLANS
   ========================================================================== */

.k-plans { position: relative; }

.k-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* Stretch, not start: equal-height cards are what lets margin-top:auto on
     .k-plan__cta line every button up along the bottom. With align-items:start
     each card shrinks to its own content and the buttons stagger. */
  align-items: stretch;
}
@media (max-width: 1100px) { .k-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .k-plans__grid { grid-template-columns: minmax(0, 1fr); } }

.k-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.85rem 1.6rem 1.6rem;
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  transition: border-color 0.4s var(--k-ease), background-color 0.4s var(--k-ease);
}
.k-plan:hover { border-color: var(--k-line-strong); }

.k-plan--featured {
  border-color: rgba(255, 45, 85, 0.42);
  background: linear-gradient(168deg, rgba(255, 45, 85, 0.12), rgba(200, 30, 122, 0.05) 60%, rgba(255, 255, 255, 0.012));
  box-shadow: 0 40px 90px -55px rgba(255, 45, 85, 0.75);
}

.k-plan__flag {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-ember-soft);
}

.k-plan__name {
  font-size: var(--k-fs-h4);
  font-weight: 600;
  color: var(--k-chalk);
}
.k-plan__tag { font-size: var(--k-fs-xs); color: var(--k-mute); margin-top: 0.3rem; }

.k-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 1.5rem 0 0.35rem;
}
.k-plan__price b {
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.k-plan__price s {
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
  text-decoration: none;
  font-weight: 500;
}
.k-plan__note { font-size: var(--k-fs-xs); color: var(--k-mute); }

.k-plan__list {
  margin: 1.6rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--k-line);
  display: grid;
  gap: 0.75rem;
}
.k-plan__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
  line-height: 1.5;
}
.k-plan__list svg { width: 15px; height: 15px; margin-top: 0.3rem; color: var(--k-ember); flex: none; }

.k-plan__cta { margin-top: auto; }

.k-plans__terms {
  display: inline-flex;
  padding: 0.35rem;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  background: rgba(255, 255, 255, 0.03);
  gap: 0.25rem;
}
.k-plans__term {
  padding: 0.6rem 1.25rem;
  border: 0;
  border-radius: var(--k-r-pill);
  background-color: transparent;
  color: var(--k-mute);
  font-family: var(--k-font);
  font-size: var(--k-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.32s var(--k-ease), color 0.32s var(--k-ease);
}
.k-plans__term.is-active { background-color: var(--k-ember); color: #fff; }

/* ==========================================================================
   CTA
   Headline halves arrive from opposite sides. The button inside does not move.
   ========================================================================== */

.k-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  /* An explicit ground is required here. The orb blends with screen, and screen
     needs something to blend against — against a transparent backdrop the black
     backing of the artwork survives as a visible dark box. */
  background: var(--k-ink-950);
  /* .k-sec sets isolation:isolate, which would trap the blend in a group whose
     backdrop is transparent and defeat it. Opt this section out. */
  isolation: auto;
}

.k-cta__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 96vw);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(calc(0.86 + 0.22 * var(--p, 0)));
  opacity: 0.7;
  /* Screen renders the artwork's black backing as nothing, leaving only the
     light of the orb. The radial mask fades the outer edge so the square
     boundary of the image can never show as a seam. */
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 72%);
}
.k-cta__orb img { width: 100%; height: 100%; object-fit: contain; }

/* Scrim between the orb and the copy, so the headline never has to compete with
   the brightest part of the glow. ::after is the last child, so it paints above
   the orb; the content is lifted to z-index 1 and stays above both. */
.k-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 64% 56% at 50% 50%,
    rgba(7, 5, 10, 0.8), rgba(7, 5, 10, 0.3) 60%, transparent 82%);
}

.k-cta > .k-container { position: relative; z-index: 1; }

/* The two halves of the closing headline used to slide in from opposite sides,
   which needed overflow:hidden on each line to hide them off-stage. That mask
   also cut the tails off every descender in the heading. The text is static
   now, so the mask is gone and glyphs render in full. */
.k-cta__line { display: block; }
.k-cta__line b { display: block; font-weight: 600; }

.k-cta__sub { max-width: 52ch; margin: 1.75rem auto 0; }
.k-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2.5rem;
}
.k-cta__assure {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
}
.k-cta__assure span { display: inline-flex; align-items: center; gap: 0.45rem; }
.k-cta__assure svg { width: 14px; height: 14px; color: var(--k-ember); }

/* ==========================================================================
   SPLIT — copy beside media. The workhorse of the inner pages.
   ========================================================================== */

.k-split { position: relative; }

.k-split__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.k-split--flip .k-split__grid { grid-template-columns: 0.92fr 1.08fr; }
.k-split--flip .k-split__copy { order: 2; }
@media (max-width: 940px) {
  .k-split__grid,
  .k-split--flip .k-split__grid { grid-template-columns: minmax(0, 1fr); }
  .k-split--flip .k-split__copy { order: 0; }
}

.k-split__copy > * + * { margin-top: 2rem; }

.k-split__media { position: relative; }

.k-split__frame {
  position: relative;
  border-radius: var(--k-r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--k-line);
  background: var(--k-ink-850);
}
.k-split__frame img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--p, 0) * -7%), 0);
}
@media (max-width: 940px) { .k-split__frame { aspect-ratio: 16 / 11; } }

.k-split__stat {
  position: absolute;
  bottom: -1px;
  left: -1px;
  padding: 1.1rem 1.5rem;
  border-radius: 0 var(--k-r-lg) 0 var(--k-r-xl);
  background: rgba(10, 7, 16, 0.9);
  border: 1px solid var(--k-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.k-split__stat b {
  display: block;
  font-size: var(--k-fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.k-split__stat span {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--k-fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-mute);
}

/* Pull quote. A statement of position, so it is set larger and given a rule
   rather than quote marks. */
.k-quote {
  position: relative;
  padding: 1.5rem 0 0 1.75rem;
  border-left: 2px solid var(--k-ember);
}
.k-quote p {
  font-size: var(--k-fs-h3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--k-chalk);
  margin: 0;
}

/* ==========================================================================
   FEATURE CARDS
   ========================================================================== */

.k-feat {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  /* Tilt applies to the card, never to a control. Values come from the pointer
     via --k-rx / --k-ry and rest at zero. */
  transform: perspective(900px) rotateX(var(--k-rx, 0deg)) rotateY(var(--k-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.45s var(--k-ease), border-color 0.4s var(--k-ease);
}
.k-feat:hover { border-color: var(--k-line-strong); }

/* Cursor-following sheen, so the tilt reads as a physical surface. */
.k-feat::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--k-mx, 50%) var(--k-my, 50%), rgba(255, 45, 85, 0.16), transparent 70%);
  transition: opacity 0.4s var(--k-ease);
}
.k-feat:hover::after { opacity: 1; }

.k-feat__num {
  display: block;
  margin-bottom: 1.1rem;
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--k-ember);
}
.k-feat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.25rem;
  border-radius: 13px;
  border: 1px solid var(--k-line);
  background: rgba(255, 45, 85, 0.09);
  color: var(--k-ember-soft);
}
.k-feat__icon svg { width: 19px; height: 19px; }
.k-feat h3 { margin-bottom: 0.6rem; }
.k-feat p { font-size: var(--k-fs-sm); color: var(--k-mute); margin: 0; }
.k-feat p + p { margin-top: 0.7rem; }

.k-feat__list { margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.k-feat__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  font-size: var(--k-fs-xs);
  color: var(--k-faint);
}
.k-feat__list svg { width: 14px; height: 14px; margin-top: 0.25rem; color: var(--k-ember); }

/* ==========================================================================
   PROCESS STEPS
   The rail fills with --p, so it doubles as a reading-progress indicator.
   ========================================================================== */

.k-steps { position: relative; }

.k-steps__list {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: none;
}

.k-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.k-step:last-child { padding-bottom: 0; }

.k-step__rail {
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 0;
  width: 1px;
  background: var(--k-line);
  overflow: hidden;
}
.k-step:last-child .k-step__rail { display: none; }
.k-step__rail::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  background: linear-gradient(var(--k-ember), var(--k-orchid));
}

.k-step__num {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--k-line-strong);
  background: var(--k-ink-850);
  font-size: var(--k-fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--k-ember-soft);
}

.k-step__body { padding-top: 0.6rem; max-width: 62ch; }
.k-step__body h3 { margin-bottom: 0.7rem; }
.k-step__body p { font-size: var(--k-fs-sm); color: var(--k-mute); }
.k-step__meta {
  font-size: var(--k-fs-label) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-faint) !important;
}

@media (max-width: 640px) {
  .k-step { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .k-step__rail { display: none; }
}

/* ==========================================================================
   CAPABILITY LIST
   ========================================================================== */

.k-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--k-line);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  overflow: hidden;
}
@media (max-width: 860px) { .k-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .k-caps { grid-template-columns: minmax(0, 1fr); } }

.k-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background-color: rgba(10, 7, 16, 0.6);
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
  transition: background-color 0.32s var(--k-ease), color 0.32s var(--k-ease);
}
.k-cap:hover { background-color: rgba(255, 45, 85, 0.1); color: #fff; }
.k-cap__go { color: var(--k-ember); opacity: 0; transition: opacity 0.32s var(--k-ease); }
.k-cap:hover .k-cap__go { opacity: 1; }

/* ==========================================================================
   AWARD STRIP
   ========================================================================== */

.k-award {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--k-r-lg);
  border: 1px solid rgba(255, 45, 85, 0.26);
  background: linear-gradient(100deg, rgba(255, 45, 85, 0.11), rgba(200, 30, 122, 0.05) 60%, transparent);
}
.k-award__mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 85, 0.4);
  color: var(--k-ember);
}
.k-award__mark svg { width: 28px; height: 28px; }
.k-award h3 { margin-bottom: 0.4rem; }
.k-award p { margin: 0; max-width: 62ch; }
@media (max-width: 780px) {
  .k-award { grid-template-columns: auto 1fr; }
  .k-award .k-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ==========================================================================
   TICK LIST
   ========================================================================== */

.k-ticks { display: grid; gap: 0.85rem; }
.k-ticks li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
  line-height: 1.55;
}
.k-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 85, 0.42);
  background: rgba(255, 45, 85, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff6b84' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.4 8.4 3 3 6.2-6.6'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ==========================================================================
   TABS
   ========================================================================== */

.k-tabs { margin-top: clamp(2rem, 4vw, 3rem); }

.k-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  background: rgba(255, 255, 255, 0.028);
}

.k-tabs__btn {
  flex: 1 1 auto;
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: var(--k-r-pill);
  background-color: transparent;
  font-family: var(--k-font);
  font-size: var(--k-fs-sm);
  font-weight: 500;
  color: var(--k-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.32s var(--k-ease), color 0.32s var(--k-ease);
}
.k-tabs__btn:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
.k-tabs__btn.is-active {
  background-color: var(--k-ember);
  color: #fff;
  box-shadow: 0 10px 30px -14px rgba(255, 45, 85, 0.8);
}

.k-tabs__panels {
  margin-top: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  background: linear-gradient(160deg, var(--k-ink-800), var(--k-ink-900) 70%);
}

.k-tabs__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (max-width: 860px) { .k-tabs__grid { grid-template-columns: minmax(0, 1fr); } }

.k-tabs__panel h3 { margin-bottom: 0.9rem; }

/* ==========================================================================
   METERS
   Bars fill from --p, so they read as a measurement taken as you arrive.
   ========================================================================== */

.k-meters {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}

.k-meter__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem !important;
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
}
.k-meter__top b { color: var(--k-chalk); font-weight: 600; font-variant-numeric: tabular-nums; }

.k-meter__bar {
  display: block;
  height: 6px;
  border-radius: var(--k-r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.k-meter__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform: scaleX(calc(var(--p, 0) * var(--k-fill, 1)));
  transform-origin: left;
  background: linear-gradient(90deg, var(--k-ember-deep), var(--k-ember) 60%, var(--k-orchid-soft));
}

/* ==========================================================================
   WORK GRID with sector filter
   ========================================================================== */

.k-work2__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.k-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.5rem, 2.5vw, 2rem);
}

.k-filter__btn {
  padding: 0.62rem 1.15rem;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  background-color: rgba(255, 255, 255, 0.02);
  font-family: var(--k-font);
  font-size: var(--k-fs-xs);
  font-weight: 500;
  color: var(--k-mute);
  cursor: pointer;
  transition: background-color 0.3s var(--k-ease), color 0.3s var(--k-ease), border-color 0.3s var(--k-ease);
}
.k-filter__btn:hover { color: #fff; border-color: var(--k-line-strong); }
.k-filter__btn.is-active {
  background-color: var(--k-ember);
  border-color: var(--k-ember);
  color: #fff;
}

.k-workgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 1000px) { .k-workgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .k-workgrid { grid-template-columns: minmax(0, 1fr); } }

.k-workgrid__item .k-frame__shot { aspect-ratio: 16 / 11; }

.k-workgrid__empty {
  padding: 2.5rem;
  text-align: center;
  color: var(--k-mute);
  border: 1px dashed var(--k-line-strong);
  border-radius: var(--k-r-lg);
}

/* ==========================================================================
   FAQ
   Generated markup. Panels animate height from a measured value, and the
   aria-expanded state is what drives the styling, so the visual and the
   accessibility contract cannot disagree.
   ========================================================================== */

.k-faqsec { position: relative; }

.k-faqsec__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .k-faqsec__grid { grid-template-columns: minmax(0, 1fr); } }

.k-faqsec__aside .k-eyebrow { margin-bottom: 1.35rem; }
.k-faqsec__aside .k-h2 { margin-bottom: 1.1rem; }
@media (min-width: 941px) { .k-faqsec__aside { position: sticky; top: calc(var(--k-header-h) + 2rem); } }

.k-faq {
  border-top: 1px solid var(--k-line);
}

.k-faq__row { border-bottom: 1px solid var(--k-line); }

.k-faq__h { margin: 0; }

.k-faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  font-family: var(--k-font);
  font-size: var(--k-fs-h4);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--k-chalk);
  text-align: left;
  cursor: pointer;
  transition: color 0.3s var(--k-ease);
}
.k-faq__btn:hover { color: var(--k-ember-soft); }
.k-faq__row.is-open .k-faq__btn { color: var(--k-ember-soft); }

.k-faq__ico {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 0.4s var(--k-ease);
}
.k-faq__row.is-open .k-faq__ico { transform: rotate(135deg); }

/* Collapsed with grid-template-rows rather than an explicit height. Both are
   layout animations — an accordion has to move the content below it, that is
   what it is for — but this version needs no measurement: no scrollHeight read
   on open, no inline style, and no resize handler to correct an open panel when
   its text rewraps. The same technique collapses the drawer submenu. */
.k-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--k-ease);
}
.k-faq__row.is-open .k-faq__panel { grid-template-rows: 1fr; }
.k-faq__panel > * { overflow: hidden; }
.k-faq__a { padding: 0 0 1.5rem; max-width: 68ch; }
.k-faq__a p { font-size: var(--k-fs-sm); color: var(--k-mute); margin: 0; line-height: 1.65; }

/* ==========================================================================
   SEARCH LISTING ILLUSTRATION
   ========================================================================== */

.k-serp {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  background: linear-gradient(160deg, var(--k-ink-800), var(--k-ink-900) 70%);
  box-shadow: var(--k-shadow-card);
}

.k-serp__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
}
.k-serp__bar svg { width: 15px; height: 15px; color: var(--k-mute); }

.k-serp__result {
  position: relative;
  padding: 1.1rem 1.15rem;
  border-radius: var(--k-r-md);
  border: 1px solid transparent;
}
.k-serp__result + .k-serp__result { margin-top: 0.5rem; opacity: 0.55; }

.k-serp__result.is-you {
  border-color: rgba(255, 45, 85, 0.34);
  background: rgba(255, 45, 85, 0.07);
}

.k-serp__flag {
  position: absolute;
  top: -0.65rem;
  right: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--k-r-pill);
  background: var(--k-ember);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.k-serp__crumb {
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
  margin: 0 0 0.3rem;
}
.k-serp__title {
  font-size: var(--k-fs-h4);
  font-weight: 500;
  line-height: 1.3;
  color: #a8c7ff;
  margin: 0 0 0.35rem;
}
.k-serp__desc {
  font-size: var(--k-fs-xs);
  line-height: 1.55;
  color: var(--k-faint);
  margin: 0;
}
.k-serp__rich {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.65rem;
  font-size: 0.75rem;
  color: var(--k-ember-soft);
}
.k-serp__note {
  margin: 1.1rem 0 0;
  font-size: var(--k-fs-label);
  letter-spacing: 0.04em;
  color: var(--k-mute);
}

/* ==========================================================================
   SNAP RAIL
   ========================================================================== */

.k-rail { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.k-rail__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
}

.k-post {
  flex: none;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  transition: border-color 0.4s var(--k-ease);
}
.k-post:hover { border-color: var(--k-line-strong); }

.k-post__kind {
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: var(--k-r-pill);
  background: rgba(255, 45, 85, 0.12);
  border: 1px solid rgba(255, 45, 85, 0.3);
  color: var(--k-ember-soft);
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.k-post p { font-size: var(--k-fs-sm); color: var(--k-mute); margin: 0; }
.k-post__use {
  margin-top: auto !important;
  padding-top: 0.85rem;
  border-top: 1px solid var(--k-line);
  font-size: var(--k-fs-xs) !important;
  color: var(--k-faint) !important;
}

.k-rail__foot {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.k-rail__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--k-line);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--k-chalk);
  cursor: pointer;
  transition: background-color 0.3s var(--k-ease), border-color 0.3s var(--k-ease), opacity 0.3s var(--k-ease);
}
.k-rail__arrow:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.08); border-color: var(--k-line-strong); }
.k-rail__arrow:disabled { opacity: 0.32; cursor: not-allowed; }
.k-rail__arrow svg { width: 16px; height: 16px; }

.k-rail__dots { display: flex; gap: 0.4rem; margin-left: auto; }
.k-rail__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background-color 0.3s var(--k-ease);
}
.k-rail__dot.is-active { background-color: var(--k-ember); }

/* ==========================================================================
   SPEC LIST
   ========================================================================== */

.k-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--k-line);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  overflow: hidden;
}
@media (max-width: 720px) { .k-specs { grid-template-columns: minmax(0, 1fr); } }

.k-spec {
  padding: 1.35rem 1.5rem;
  background: rgba(10, 7, 16, 0.62);
}
.k-spec dt {
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-ember-soft);
  margin-bottom: 0.55rem;
}
.k-spec dd {
  margin: 0;
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
  line-height: 1.55;
}

/* ==========================================================================
   DOMAIN SEARCH AND EXTENSIONS
   ========================================================================== */

.k-domain { margin-top: 2.25rem; }

.k-domain__row {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  background: rgba(14, 10, 22, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.ketnal .k-domain__input {
  flex: 1 1 auto;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  font-size: var(--k-fs-body);
}
body.ketnal .k-domain__input:focus { box-shadow: none; background: rgba(255, 255, 255, 0.04); }
body.ketnal .k-domain__tld { flex: 0 0 auto; width: auto; border-color: transparent; background-color: rgba(255, 255, 255, 0.04); }
.k-domain .k-btn { flex: none; }

.k-domain .k-formnote { margin-top: 0.85rem; text-align: left; }
.k-domain > .k-btn { margin-top: 0.85rem; }

@media (max-width: 620px) {
  .k-domain__row { flex-wrap: wrap; border-radius: var(--k-r-lg); }
  body.ketnal .k-domain__input { flex: 1 1 100%; }
  body.ketnal .k-domain__tld { flex: 1 1 auto; }
  .k-domain .k-btn { flex: 1 1 auto; }
}

.k-tlds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { .k-tlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .k-tlds { grid-template-columns: minmax(0, 1fr); } }

.k-tld {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.35rem, 2.2vw, 1.75rem);
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  transition: border-color 0.4s var(--k-ease);
}
.k-tld:hover { border-color: rgba(255, 45, 85, 0.4); }
.k-tld__name {
  font-size: var(--k-fs-h3);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--k-chalk);
}
.k-tld p { font-size: var(--k-fs-sm); color: var(--k-mute); margin: 0; }
.k-tld__meta {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--k-line);
  font-size: var(--k-fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-faint);
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.k-tablewrap {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
}
.k-tablewrap:focus-visible { outline: 2px solid var(--k-ember-soft); outline-offset: 2px; }

.k-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--k-fs-sm);
}

.k-table th,
.k-table td {
  padding: 1rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--k-line);
  vertical-align: top;
}

.k-table thead th {
  background: rgba(255, 255, 255, 0.045);
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-faint);
  white-space: nowrap;
}
.k-table thead th.is-featured { color: var(--k-ember-soft); }

.k-table tbody th {
  font-weight: 500;
  color: var(--k-chalk);
  background: rgba(255, 255, 255, 0.02);
}
.k-table tbody td { color: var(--k-mute); }
.k-table tbody td.is-featured {
  background: rgba(255, 45, 85, 0.07);
  color: var(--k-chalk);
}
.k-table tbody tr:last-child th,
.k-table tbody tr:last-child td { border-bottom: 0; }

.k-no { color: rgba(169, 155, 166, 0.45); }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.k-contact { position: relative; }

.k-contact__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 1000px) { .k-contact__grid { grid-template-columns: minmax(0, 1fr); } }

.k-contact__panel {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--k-r-xl);
  border: 1px solid var(--k-line);
  background: linear-gradient(160deg, var(--k-ink-800), var(--k-ink-900) 72%);
  box-shadow: var(--k-shadow-card);
}
.k-contact__panel .k-head { margin-bottom: 2rem; }

.k-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 620px) { .k-form__grid { grid-template-columns: minmax(0, 1fr); } }
.k-field--full { grid-column: 1 / -1; }

.k-form .k-formnote { margin-top: 1.5rem; }

.k-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

/* The spinner slot exists at rest, so the button cannot change width when it
   becomes busy. Visibility, never display. */
.k-spin {
  width: 1em;
  height: 1em;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  visibility: hidden;
}
.k-form.is-sending .k-spin {
  visibility: visible;
  animation: k-spin 0.7s linear infinite;
}

.k-contact__aside { display: grid; gap: 0.85rem; align-content: start; }
/* The form is much taller than the details column, so the details follow the
   reader down rather than leaving a long empty gutter. */
@media (min-width: 1001px) {
  .k-contact__aside { position: sticky; top: calc(var(--k-header-h) + 2rem); }
}

.k-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
  background-color: rgba(255, 255, 255, 0.025);
  transition: border-color 0.32s var(--k-ease), background-color 0.32s var(--k-ease);
}
.k-detail:hover { border-color: rgba(255, 45, 85, 0.42); background-color: rgba(255, 45, 85, 0.07); }
.k-detail__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--k-line);
  background: rgba(255, 45, 85, 0.1);
  color: var(--k-ember-soft);
}
.k-detail__icon svg { width: 18px; height: 18px; }
.k-detail b { display: block; font-size: var(--k-fs-sm); font-weight: 600; color: var(--k-chalk); }
.k-detail span span,
.k-detail > span > span { display: block; font-size: var(--k-fs-xs); color: var(--k-mute); margin-top: 0.15rem; }

.k-promise {
  padding: 1.5rem;
  border-radius: var(--k-r-lg);
  border: 1px solid var(--k-line);
  background: linear-gradient(168deg, rgba(255, 45, 85, 0.09), rgba(255, 255, 255, 0.012));
}
.k-promise h3 { margin-bottom: 1.1rem; }
.k-promise__list { display: grid; gap: 1rem; counter-reset: k-pr; }
.k-promise__list li {
  position: relative;
  padding-left: 2.1rem;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
  line-height: 1.6;
  counter-increment: k-pr;
}
.k-promise__list li::before {
  content: counter(k-pr);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 85, 0.4);
  background: rgba(255, 45, 85, 0.12);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--k-ember-soft);
}
.k-promise__list b { color: var(--k-chalk); font-weight: 600; }

/* Visit */
.k-visit {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 940px) { .k-visit { grid-template-columns: minmax(0, 1fr); } }

.k-visit__copy .k-eyebrow { margin-bottom: 1.35rem; }
.k-visit__copy .k-h2 { margin-bottom: 1.1rem; }

.k-visit__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--k-line);
}
@media (max-width: 560px) { .k-visit__list { grid-template-columns: minmax(0, 1fr); } }
.k-visit__list dt {
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-ember-soft);
  margin-bottom: 0.5rem;
}
.k-visit__list dd { margin: 0; font-size: var(--k-fs-sm); color: var(--k-faint); line-height: 1.65; }

.k-visit__card {
  border-radius: var(--k-r-xl);
  overflow: hidden;
  border: 1px solid var(--k-line);
  background: var(--k-ink-850);
}
.k-visit__art {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 45, 85, 0.2), transparent 62%),
    linear-gradient(160deg, var(--k-ink-800), var(--k-ink-950));
}
.k-visit__art .k-mesh { opacity: 0.7; z-index: 0; }
.k-visit__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 85, 0.45);
  background: rgba(255, 45, 85, 0.14);
  color: var(--k-ember-soft);
  box-shadow: 0 0 0 12px rgba(255, 45, 85, 0.06), 0 0 40px -8px rgba(255, 45, 85, 0.6);
}
.k-visit__pin svg { width: 28px; height: 28px; }
.k-visit__foot {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--k-line);
}
.k-visit__foot b { display: block; font-size: var(--k-fs-sm); font-weight: 600; color: var(--k-chalk); }
.k-visit__foot span { display: block; margin-top: 0.2rem; font-size: var(--k-fs-xs); color: var(--k-mute); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.k-footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem);
  background: linear-gradient(to bottom, var(--k-ink-950), var(--k-ink-900));
  border-top: 1px solid var(--k-line);
  overflow: hidden;
}

.k-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 1024px) { .k-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .k-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.k-footer__brand img { height: 44px; width: auto; margin-bottom: 1.5rem; }
.k-footer__brand p { font-size: var(--k-fs-sm); color: var(--k-mute); max-width: 34ch; }

.k-footer__title {
  font-size: var(--k-fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--k-faint);
  margin-bottom: 1.35rem;
}

.k-footer__links { display: grid; gap: 0.7rem; }
.k-footer__links a {
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
  transition: color 0.3s var(--k-ease);
}
.k-footer__links a:hover { color: #fff; }

.k-footer__contact { display: grid; gap: 1rem; }
.k-footer__contact a,
.k-footer__contact span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  font-size: var(--k-fs-sm);
  color: var(--k-mute);
  transition: color 0.3s var(--k-ease);
}
.k-footer__contact a:hover { color: #fff; }
.k-footer__contact svg { width: 15px; height: 15px; margin-top: 0.28rem; color: var(--k-ember); flex: none; }

.k-social { display: flex; gap: 0.5rem; margin-top: 1.75rem; }
.k-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--k-line);
  color: var(--k-mute);
  background-color: rgba(255, 255, 255, 0.02);
  transition: color 0.3s var(--k-ease), border-color 0.3s var(--k-ease), background-color 0.3s var(--k-ease);
}
.k-social a:hover {
  color: #fff;
  border-color: rgba(255, 45, 85, 0.5);
  background-color: rgba(255, 45, 85, 0.12);
}
.k-social svg { width: 17px; height: 17px; }

.k-footer__award {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.75rem;
  padding: 0.7rem 1.05rem;
  border-radius: var(--k-r-md);
  border: 1px solid rgba(255, 45, 85, 0.28);
  background: rgba(255, 45, 85, 0.07);
}
.k-footer__award svg { width: 24px; height: 24px; color: var(--k-ember); flex: none; }
.k-footer__award b { display: block; font-size: var(--k-fs-xs); color: var(--k-chalk); font-weight: 600; }
.k-footer__award span { display: block; font-size: var(--k-fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-mute); }

/* Oversized wordmark rising from the fold. */
.k-footer__mark {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-inline: var(--k-pad-x);
  overflow: hidden;
  line-height: 0.78;
}
.k-footer__mark b {
  display: block;
  font-size: clamp(4rem, 19vw, 17rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.13);
  transform: translate3d(0, calc(28% - var(--p, 0) * 28%), 0);
}

.k-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--k-container);
  margin-inline: auto;
  padding: 1.5rem var(--k-pad-x);
  border-top: 1px solid var(--k-line);
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
}
.k-footer__legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.k-footer__legal a { transition: color 0.3s var(--k-ease); }
.k-footer__legal a:hover { color: #fff; }


/* ==========================================================================
   KETNAL CREATIONS — v21 content changes
   Styles for the components introduced or reshaped by
   Ketnal-Content-Changes.docx. Append to css/ketnal-sections.css (this block
   is already appended in the child-theme copy under
   mpltest-pages-and-child-theme/child-theme).

   Everything here uses the existing tokens, so nothing forks the design system.
   ========================================================================== */

/* Screen-reader-only label, used by the domain search field. */
.k-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Hero stats strip — doc items 4 to 7.
   Four items instead of three, and the last two carry no numeral. The numeral
   slot is held open on the text-only items so all four labels sit on one
   baseline, which is what keeps a numbers-led strip from looking broken.
   -------------------------------------------------------------------------- */
.k-hero__stats--four {
  max-width: 860px;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}
.k-hero__stats--four .k-hero__stat {
  flex: 1 1 clamp(140px, 18%, 200px);
  min-width: 0;
}
.k-hero__stat--text {
  display: flex;
  align-items: flex-end;
}
.k-hero__stat--text span {
  margin-top: 0;
  padding-bottom: 0.15rem;
  color: var(--k-faint);
  text-wrap: balance;
}
.k-hero__stat--text::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 0.75rem 0.7rem 0;
  flex: none;
  background: var(--k-accent);
  border-radius: 2px;
}
@media (max-width: 900px) {
  .k-hero__stats--four { gap: 1.5rem 1.25rem; }
  .k-hero__stats--four .k-hero__stat { flex: 1 1 calc(50% - 1rem); }
}

/* --------------------------------------------------------------------------
   Google Reviews feed — doc item 8.
   The container ships hidden (no Place ID yet); these rules are what it gets
   when the attribute is removed, so switching it on needs no further CSS.
   -------------------------------------------------------------------------- */
.k-reviews[hidden] { display: none; }
.k-reviews {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1.25rem;
  border-radius: var(--k-r-md);
  background: #fff;
  border: 1px solid rgba(30, 21, 38, 0.1);
  box-shadow: 0 18px 40px -30px rgba(30, 21, 38, 0.5);
}

/* --------------------------------------------------------------------------
   Entry-point cards — doc item 11, layout per design reference item 5.
   Six cards, so the grid runs three-up and wraps to two rows rather than the
   four-up the old objective cards used.
   -------------------------------------------------------------------------- */
.k-entry__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .k-entry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .k-entry__grid { grid-template-columns: minmax(0, 1fr); } }

.k-entry { padding-top: 1.4rem; }
.k-entry__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--k-r-pill);
  background: rgba(255, 45, 85, 0.1);
  color: var(--k-ember-deep);
  font-size: var(--k-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.k-entry__price {
  font-size: var(--k-fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--k-ink-950);
}
.k-entry__go { margin-top: 0.35rem; }

/* Closing line and call to action — doc item 12. */
.k-entry__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(30, 21, 38, 0.12);
}
.k-entry__close .k-lead {
  margin: 0;
  max-width: 46ch;
  color: rgba(20, 14, 30, 0.78);
}
@media (max-width: 620px) {
  .k-entry__close { flex-direction: column; align-items: stretch; }
  .k-entry__close .k-btn { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Domain search — doc items 13 and 14, layout per design reference item 7.
   Centred heading above a tinted band that holds the search, its secondary
   links and the renewal-price small print.
   -------------------------------------------------------------------------- */
.k-domain .k-head { text-align: center; margin-inline: auto; }
.k-domain .k-head .k-eyebrow { justify-content: center; }
.k-domain .k-head .k-lead { margin-inline: auto; }

.k-domain__band {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line-strong);
  box-shadow: var(--k-shadow-card);
}
.k-domain__form {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.k-domain__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.05rem 1.35rem;
  font: inherit;
  font-size: var(--k-fs-body);
  color: var(--k-chalk);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-pill);
  transition: border-color 0.3s var(--k-ease), box-shadow 0.3s var(--k-ease);
}
.k-domain__input::placeholder { color: rgba(247, 244, 246, 0.45); }
.k-domain__input:focus-visible {
  outline: none;
  border-color: var(--k-accent);
  box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.18);
}
.k-domain__go { flex: none; }

.k-domain__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.25rem;
}
.k-domain__links a {
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 3px;
  transition: color 0.3s var(--k-ease), text-decoration-color 0.3s var(--k-ease);
}
.k-domain__links a:hover { color: #fff; text-decoration-color: var(--k-accent); }

.k-domain__fine {
  margin: 1.5rem 0 0;
  max-width: 62ch;
  font-size: var(--k-fs-xs);
  color: var(--k-mute);
}

@media (max-width: 620px) {
  .k-domain__form { flex-direction: column; }
  .k-domain__go { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Accreditation band — doc items 15 and 18.
   Logos sit left, the statement runs beside them, the award line closes the
   row. Wordmarks stand in until the logo files and the written permission from
   CIPC and ZACR are on file.
   -------------------------------------------------------------------------- */
.k-accred__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--k-r-lg);
  background: var(--k-glass), var(--k-ink-850);
  border: 1px solid var(--k-line);
}
.k-accred__logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: none;
}
.k-accred__logos img { height: 34px; width: auto; }
.k-accred__mark {
  font-size: var(--k-fs-h4);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--k-chalk);
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-sm);
}
.k-accred__text {
  margin: 0;
  font-size: var(--k-fs-sm);
  color: var(--k-faint);
  text-wrap: pretty;
}
.k-accred__award {
  margin: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--k-fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-mute);
  text-align: right;
}
.k-accred__award-mark {
  font-size: var(--k-fs-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--k-accent);
}
@media (max-width: 1024px) {
  .k-accred__inner { grid-template-columns: minmax(0, 1fr); }
  .k-accred__award { text-align: left; }
}

/* --------------------------------------------------------------------------
   Header utility strip — doc item 3.
   Contact details are icons only now, so each one needs a real tap target.
   -------------------------------------------------------------------------- */
.k-util__links--icons { gap: 0.5rem; }
.k-util__links--icons a {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  transition: border-color 0.3s var(--k-ease), background-color 0.3s var(--k-ease);
}
.k-util__links--icons a:hover {
  border-color: rgba(255, 45, 85, 0.5);
  background: rgba(255, 45, 85, 0.12);
}
.k-util__links--icons svg { width: 15px; height: 15px; }
.k-util__links--icons .k-util__hours { margin-left: 1rem; }


/* ==========================================================================
   Header store actions — basket and account
   Lives here rather than in ketnal-woo.css because the header is on every
   page, and the WooCommerce stylesheet only loads on store pages.
   Markup comes from the [ketnal_cart_link] / [ketnal_account_link] shortcodes
   in the child theme (inc/woo.php).
   ========================================================================== */

.k-cart-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--k-r-pill);
  border: 1px solid var(--k-line);
  color: var(--k-chalk);
  transition: border-color 0.3s var(--k-ease), background-color 0.3s var(--k-ease), color 0.3s var(--k-ease);
}
.k-cart-link:hover,
.k-cart-link:focus-visible {
  border-color: rgba(255, 45, 85, 0.5);
  background: rgba(255, 45, 85, 0.12);
  color: #fff;
}
.k-cart-link svg { width: 18px; height: 18px; }

.k-cart-link__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  background: var(--k-ember);
  border: 2px solid var(--k-ink-950);
  border-radius: var(--k-r-pill);
  transition: transform 0.3s var(--k-ease), opacity 0.2s var(--k-ease);
}
/* An empty basket keeps the element in the DOM — a cart fragment can only
   replace a node that already exists — but hides it. */
.k-cart-link__count.is-empty { opacity: 0; transform: scale(0.6); }

.k-account-link.is-in { border-color: rgba(255, 45, 85, 0.35); }

/* The header bar is a flex row; keep the two icons tight together and give
   them room from the primary CTA. */
.k-header__actions .k-cart-link + .k-cart-link { margin-left: -0.35rem; }
.k-header__actions .k-cart-link + .k-btn { margin-left: 0.35rem; }

@media (max-width: 980px) {
  /* The drawer carries Shop / Basket / Account below this width, so the bar
     only keeps the basket itself. */
  .k-header__actions .k-account-link { display: none; }
}


/* ==========================================================================
   Mobile header — fitting the bar on a phone
   Adding the basket and account icons pushed the bar past the width of a
   375px screen: the row is `flex: none` on both sides, so the burger was
   simply carried off the end of the bar and could not be tapped. The menu
   was unreachable on a phone as a result.

   The order of sacrifice, widest screen first: account icon, Webmail, then
   the primary CTA. All three are in the drawer, so nothing is lost — and the
   basket and the burger, the two things a phone visitor actually needs, are
   never dropped.
   ========================================================================== */

.k-header__bar {
  min-width: 0;
  flex-wrap: nowrap;
}
.k-brand { flex: 0 1 auto; min-width: 0; }
.k-header__actions { min-width: 0; }

@media (max-width: 1100px) {
  /* The nav has already collapsed into the drawer by here, so the bar has
     room to breathe again — but keep the gap from growing with the viewport. */
  .k-header__bar { gap: 0.75rem; padding-right: 0.6rem; }
}

@media (max-width: 700px) {
  /* Primary CTA steps aside; it is the first item in the drawer's footer. */
  .k-header__actions .k-btn { display: none; }
  .k-header__actions { gap: 0.5rem; }
}

@media (max-width: 420px) {
  .k-header__bar { padding-left: 0.9rem; gap: 0.5rem; }
  .k-brand img { width: 92px; height: auto; }
  .k-burger { width: 44px; height: 44px; }
  .k-cart-link { width: 38px; height: 38px; }
}

/* The drawer opens above everything, including a fixed header and any
   WooCommerce notice banners. */
.k-drawer { z-index: calc(var(--k-z-header) + 10); }

/* Drawer store links inherit the numbered style; give the group a little air
   so Shop / Basket / Account read as a set rather than more nav items. */
.k-drawer__nav .k-drawer__link[href*="cart"],
.k-drawer__nav .k-drawer__link[href*="my-account"],
.k-drawer__nav .k-drawer__link[href*="shop"] { color: var(--k-faint); }

/* A drawer taller than the screen has to scroll, and has to clear the notch
   and the home indicator on iOS. */
.k-drawer {
  padding-top: max(1.15rem, env(safe-area-inset-top));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* While the drawer owns the screen the page behind it must not scroll. The
   class is set by js/ketnal.js; position: fixed is what actually holds iOS. */
body.k-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

/* The drawer has to opt back into pointer events.

   The Theme Builder header wrapper is `pointer-events: none` so the fixed bar
   never blocks clicks on the page behind it, and only `.k-header` opts back in
   (see ketnal-foundation.css). The drawer is a sibling of `.k-header` inside
   that same wrapper, so it inherited `none`: the panel opened, but every link,
   the Services toggle and the close button were untappable — taps fell straight
   through to the page underneath. */
body.ketnal .et-l--header .k-drawer,
body.ketnal .et-l--header .k-header__progress { pointer-events: auto; }
body.ketnal .et-l--header .k-header__progress { pointer-events: none; }

/* The drawer's logo had no width limit, so at its natural 636px it pushed the
   close button clean off the right edge of a phone screen — the drawer could
   only be dismissed with Escape or by following a link. */
.k-drawer__top img {
  width: clamp(96px, 28vw, 128px);
  height: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.k-drawer__close { flex: none; }