/* KiwiTile homepage — shared page styles.
   Fonts: kiwi-css/kt-fonts.css | Tokens: kiwi-css/kt-tokens.css
   Chrome: kiwi-css/kt-site-chrome.css
   Bathhouse: kiwi-css/kt-bathhouse-gallery.css | Services: kiwi-css/kt-services-primary.css
   Naming: kt-{block} | kt-{block}__{element} | kt-{block}__{element}--{modifier} */

/* ── Foundation ── */

:root {
  --kt-hero-top-reveal: var(--kt-header-height, clamp(70px, 5.46875vw, 105px));
  --kt-header-logo-size: clamp(82px, 6.40625vw, 123px);
  --kt-header-logo-edge-gap: clamp(16px, 1.25vw, 24px);
  --kt-header-logo-nudge-x: clamp(4px, 0.3125vw, 6px);
  --kt-header-logo-nudge-y: clamp(3px, 0.234375vw, 4.5px);
  --kt-hero-desktop-reveal-advance: 0ms;
}

@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  :root {
    --kt-hero-desktop-reveal-advance: 1000ms;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overscroll-behavior: none;
  overflow-anchor: none;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 0%, var(--warm-stone), transparent 36rem),
    linear-gradient(180deg, var(--page-bg-top) 0%, var(--page-bg-bottom) 100%);
}

html {
  overflow: hidden;
  scroll-behavior: smooth;
}

html.kt-section-sliding,
html.kt-section-sliding body {
  scroll-behavior: auto !important;
}

body {
  overflow-y: auto;
  font-family: var(--font-sans);
}

img {
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.kt-advisory-modal-open {
  overflow: hidden;
}

.header {
  height: clamp(70px, 5.46875vw, 105px);
  padding: 0 clamp(18px, 1.40625vw, 27px) 0 clamp(24px, 1.875vw, 36px);
}

.header-right {
  height: clamp(70px, 5.46875vw, 105px);
}

.brand-text {
  font-size: clamp(28px, 2.1875vw, 42px);
}

.brand-pivot {
  width: clamp(220px, 17.1875vw, 330px);
  height: clamp(34px, 2.65625vw, 51px);
}

.brand-letter {
  font-size: clamp(28px, 2.1875vw, 42px);
}

.brand-letter:nth-child(2) { transform: translate(clamp(24px, 1.875vw, 36px), 0); }
.brand-letter:nth-child(3) { transform: translate(clamp(36px, 2.8125vw, 54px), 0); }
.brand-letter:nth-child(4) { transform: translate(clamp(68px, 5.3125vw, 102px), 0); }
.brand-letter:nth-child(5) { transform: translate(clamp(83px, 6.484375vw, 124.5px), 0); }
.brand-letter:nth-child(6) { transform: translate(clamp(104px, 8.125vw, 156px), 0); }
.brand-letter:nth-child(7) { transform: translate(clamp(118px, 9.21875vw, 177px), 0); }
.brand-letter:nth-child(8) { transform: translate(clamp(139px, 10.859375vw, 208.5px), 0); }

/* ── Hero / charcoal zone ── */

.kt-bg-zone--charcoal {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: visible;
}

.kt-zone-img-wrap {
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.kt-zone-img-wrap--charcoal {
  position: fixed;
  inset: 0;
  height: 100svh;
  margin-bottom: 0;
  background-image:
    radial-gradient(ellipse 72% 58% at 0% 0%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.18) 34%, transparent 62%),
    radial-gradient(ellipse at 50% 35%, var(--charcoal-warm) 0%, var(--charcoal-warm-mid) 18%, var(--charcoal-warm-soft) 32%, var(--charcoal-warm-faint) 48%, transparent 62%),
    radial-gradient(ellipse at 50% 85%, var(--charcoal-warm-mid) 0%, var(--charcoal-warm-dim) 22%, transparent 45%),
    radial-gradient(ellipse at 50% 0%, var(--charcoal-deep) 0%, var(--charcoal-deep-mid) 14%, var(--charcoal-deep-soft) 26%, var(--charcoal-deep-faint) 40%, transparent 55%),
    linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)),
    url("./images/002-dt-stone.webp");
}

.kt-zone-img-wrap--charcoal::before,
.kt-zone-img-wrap--charcoal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kt-zone-img-wrap--charcoal::before {
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.26) 0%,
      rgba(0, 0, 0, 0.2) 24%,
      rgba(0, 0, 0, 0.22) 48%,
      rgba(0, 0, 0, 0.36) 76%,
      rgba(0, 0, 0, 0.52) 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.24) 72%,
      rgba(0, 0, 0, 0.4) 100%
    );
}

.kt-zone-img-wrap--charcoal::after {
  z-index: 2;
  background:
    radial-gradient(
      ellipse 88% 62% at 50% 38%,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.28) 32%,
      rgba(0, 0, 0, 0.12) 56%,
      transparent 74%
    );
}

.kt-charcoal-content,
.kt-bg-zone__content {
  position: relative;
  z-index: 2;
}

.kt-charcoal-content {
  /* The fixed header does not occupy layout space. Reserve its row here so
     the homepage hero can never collapse back to the top of the viewport. */
  padding-top: var(--kt-hero-top-reveal);
}

/* The former charcoal-plark sheet contributed this one shared homepage rule.
   Keep it here while omitting that sheet's otherwise unreachable component. */
@media (min-width: 1025px) {
  .kt-section-opening {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    isolation: isolate;
  }
}

.kt-hero {
  position: relative;
  height: auto;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}

.kt-hero__visual {
  position: relative;
  height: calc(100svh - var(--kt-hero-top-reveal));
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.kt-hero__visual::before,
.kt-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: ktHeroBgReveal var(--dur-hero-reveal) var(--ease-hero-reveal) var(--delay-hero-bg) forwards;
}

.kt-hero__visual::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.26) 0%,
    rgba(0, 0, 0, 0.2) 24%,
    rgba(0, 0, 0, 0.22) 48%,
    rgba(0, 0, 0, 0.36) 76%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

.kt-hero__visual::after {
  background: radial-gradient(
    ellipse 88% 62% at 50% 38%,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.28) 32%,
    rgba(0, 0, 0, 0.12) 56%,
    transparent 74%
  );
}

.kt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: none !important;
  opacity: 0;
  transform: scale(1);
  transform-origin: center top;
  will-change: transform, opacity;
  pointer-events: none;
  animation:
    ktHeroBgReveal var(--dur-hero-reveal) var(--ease-hero-reveal) var(--delay-hero-bg) forwards,
    ktHeroBgZoom var(--dur-hero-zoom) linear var(--delay-hero-bg) forwards;
}

.kt-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
}

.kt-hero__content a,
.kt-hero__content button {
  pointer-events: auto;
}

body.kt-offer-frame-open {
  overflow: hidden;
}

.kt-offer-frame-shell {
  position: fixed;
  inset: 0;
  z-index: 2147482400;
  background: transparent;
  opacity: 0;
  transition: opacity 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kt-offer-frame-shell.is-open {
  opacity: 1;
}

.kt-offer-frame-shell.is-handing-off {
  z-index: 899;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

@media (max-width: 900px) {
  .kt-offer-frame-shell {
    display: none;
  }

  .kt-offer-frame-shell.is-open {
    display: block;
  }

  .services-primary .kt-svc-cta {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

.kt-offer-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.kt-hero__statement {
  position: absolute;
  top: clamp(18%, 21vh, 25%);
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1180px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kt-hero__kicker {
  margin: clamp(10px, 1.1vh, 16px) 0 clamp(14px, 1.7vh, 20px);
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.38vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(var(--rgb-cream-strong) / 0.88);
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.55),
    0 4px 18px rgb(0 0 0 / 0.42);
  opacity: 0;
  will-change: transform, opacity;
  animation: ktHeroLineReveal var(--dur-line-up) var(--ease-motion) calc(var(--delay-hero-copy) + var(--delay-line-up)) forwards;
}

.kt-hero__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.85vh, 10px);
  width: 100%;
}

.kt-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 5.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

.kt-hero__title-rule {
  display: block;
  width: min(520px, 78vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(var(--rgb-gold-ui) / 0.22) 14%,
    rgb(var(--rgb-gold-highlight) / 0.72) 50%,
    rgb(var(--rgb-gold-ui) / 0.22) 86%,
    transparent 100%
  );
  opacity: 0;
  transform: scaleX(0.72);
  will-change: transform, opacity;
  animation: ktHeroRuleReveal 1400ms var(--ease-premium) calc(var(--delay-hero-copy) + 900ms) forwards;
}

.kt-hero__title-ivory,
.kt-hero__title-gold {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  opacity: 0;
  will-change: transform, opacity;
}

.kt-hero__title-ivory {
  --line-y-start: 28px;
  color: rgb(var(--rgb-cream-strong) / 0.96);
  text-shadow:
    0 2px 4px rgb(0 0 0 / 0.48),
    0 8px 28px rgb(0 0 0 / 0.42);
  animation: ktHeroLineReveal var(--dur-line-up) var(--ease-motion) calc(var(--delay-hero-copy) + 680ms) forwards;
}

.kt-hero__title-gold {
  --line-y-start: -18px;
  font-weight: 700;
  color: rgb(var(--rgb-gold-about) / 0.96);
  text-shadow:
    0 2px 4px rgb(0 0 0 / 0.42),
    0 6px 20px rgb(0 0 0 / 0.32);
  animation: ktHeroLineReveal var(--dur-line-down) var(--ease-motion) calc(var(--delay-hero-copy) + var(--delay-line-down)) forwards;
}

.kt-hero__subline {
  margin: clamp(10px, 1.2vh, 16px) 0 0;
  max-width: min(820px, 92vw);
  font-family: var(--font-sans);
  font-size: clamp(15px, calc(1vw + 2px), 18px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255);
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.52),
    0 4px 16px rgb(0 0 0 / 0.38);
  opacity: 0;
  will-change: transform, opacity;
  animation: ktHeroLineReveal 1500ms var(--ease-motion) calc(var(--delay-hero-copy) + 1180ms) forwards;
}

.kt-hero__subline-break {
  display: block;
}

.kt-hero__subline-lead {
  display: block;
  font-size: 1.32em;
}

.kt-hero__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(28px, 3.6vh, 42px);
  padding: clamp(13px, 1vw, 17px) clamp(28px, 2.25vw, 38px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--rgb-gold-ui) / 0.58);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.38), rgb(0 0 0 / 0.52)),
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.04), transparent 62%);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #f1c77f;
  text-shadow:
    0 1px 0 rgb(255 239 199 / 0.2),
    0 1px 4px rgb(0 0 0 / 0.62);
  box-shadow:
    0 8px 24px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  clip-path: inset(0 50% 0 50% round var(--radius-sm));
  filter: blur(8px);
  will-change: opacity, transform, clip-path, filter;
  animation: ktHeroCtaResolve var(--dur-cta-resolve) var(--ease-cta-resolve) calc(var(--delay-hero-copy) + var(--delay-cta-resolve) - var(--kt-hero-desktop-reveal-advance)) forwards;
  transition: border-color var(--transition-ui), box-shadow var(--transition-ui), background var(--transition-ui), transform var(--transition-ui), color var(--transition-ui);
}

.kt-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(9px, 1.1vh, 12px);
  margin-top: clamp(22px, 2.8vh, 32px);
  text-decoration: none;
  color: rgb(var(--rgb-cream-strong) / 0.62);
  opacity: 0;
  will-change: transform, opacity;
  animation: ktHeroScrollReveal 1600ms var(--ease-motion) calc(var(--delay-hero-copy) + 4200ms) forwards;
  transition: color var(--transition-ui);
}

.kt-hero__scroll-text {
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.48),
    0 3px 12px rgb(0 0 0 / 0.32);
}

.kt-hero__scroll-chevron {
  display: block;
  width: clamp(8px, 0.62vw, 10px);
  height: clamp(8px, 0.62vw, 10px);
  border-right: 1.5px solid rgb(var(--rgb-gold-highlight) / 0.82);
  border-bottom: 1.5px solid rgb(var(--rgb-gold-highlight) / 0.82);
  transform: rotate(45deg);
}

.kt-hero__proof,
.kt-hero__proofbar {
  /* The bar is a normal-flow row immediately after the hero image. This makes
     the image edge—not viewport maths or text height—the permanent anchor. */
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: clamp(18px, 2.2vh, 24px) clamp(14px, 1.6vw, 24px);
  border: 1px solid rgb(var(--rgb-gold-ui) / 0.22);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: rgba(5, 7, 6, 0.62);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
  box-shadow:
    0 10px 28px rgb(0 0 0 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  /* Keep the bar's painted position identical to its layout position. The
     former reveal animation translated it 16px and made it appear detached
     from the hero edge while the page was settling. */
  opacity: 1;
  transform: none;
  will-change: auto;
  animation: none;
}

.kt-hero__proof-col {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1.1vw, 14px);
  padding: clamp(6px, 0.8vh, 10px) clamp(10px, 1.2vw, 16px);
  text-align: left;
}

.kt-hero__proof-col + .kt-hero__proof-col {
  border-left: 1px solid rgb(var(--rgb-gold-ui) / 0.18);
}

.kt-hero__proof-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(28px, 2.2vw, 36px);
  height: clamp(28px, 2.2vw, 36px);
  color: rgb(var(--rgb-gold-highlight) / 1);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.38));
}

.kt-hero__proof-icon svg {
  width: 100%;
  height: 100%;
}

.kt-hero__proof-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.4vh, 5px);
  min-width: 0;
}

.kt-hero__proof-head {
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.78vw, 12.5px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--rgb-gold-highlight) / 0.92);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.38);
}

.kt-hero__proof-body {
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 248 232 / 0.96);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.42);
}

/*
  Mobile landscape
  1) Hero img shows its FULL natural height (no cover crop).
  2) Proof bar keeps its default look directly below the image.
  3) Proof bar remains stationary on the image edge.
*/
@media (max-width: 900px) and (orientation: landscape) {
  .kt-hero {
    /* Height = full image height in document flow */
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
    overflow: hidden;
  }

  .kt-hero__visual {
    height: auto;
  }

  /* Full-width, full natural height — no object-fit cover crop */
  .kt-hero__bg {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    transform-origin: center center;
  }

  /*
    Gradients + copy still overlay the image only.
    Hero box height is the image; absolute inset:0 matches the img.
  */
  .kt-hero__visual::before,
  .kt-hero__visual::after {
    inset: 0;
  }

  .kt-hero__content {
    position: absolute;
    inset: 0;
    justify-content: flex-end;
    overflow: visible;
  }

  .kt-hero__statement {
    top: clamp(10%, 12vh, 16%);
  }
}

/* Tablet portrait retains the shared hard bottom anchor. */
@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
  .kt-hero {
    margin: 0;
    overflow: hidden;
  }
}

/* Keep the proof points legible at the foot of the hero on phones (portrait only). */
@media (max-width: 767px) and (orientation: portrait) {
  .kt-hero {
    margin-bottom: 0;
    overflow: hidden;
  }

  .kt-hero__kicker {
    font-size: 23px;
    letter-spacing: 0.2em;
  }

  /* Subline under “the less installed it appears” */
  .kt-hero__subline {
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: 0.12em;
  }

  .kt-hero__cta {
    padding: 15px 34px;
    font-size: 17px;
    letter-spacing: 0.18em;
  }

  .kt-hero__proof,
  .kt-hero__proofbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 4px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    border-color: rgb(var(--rgb-gold-ui) / 0.3);
    background: rgba(10, 12, 10, 0.96);
    backdrop-filter: blur(8px) saturate(1.04);
    -webkit-backdrop-filter: blur(8px) saturate(1.04);
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }

  .kt-hero__proof-col {
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
    gap: 7px;
    padding: 12px 8px;
    text-align: center;
  }

  .kt-hero__proof-col + .kt-hero__proof-col {
    border-left: 0;
  }

  .kt-hero__proof-col:nth-child(even) {
    border-left: 1px solid rgb(var(--rgb-gold-ui) / 0.22);
  }

  .kt-hero__proof-col:nth-child(n + 3) {
    border-top: 1px solid rgb(var(--rgb-gold-ui) / 0.22);
  }

  .kt-hero__proof-icon {
    width: 30px;
    height: 30px;
  }

  .kt-hero__proof-copy {
    align-items: center;
    gap: 4px;
  }

  .kt-hero__proof-head {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.035em;
  }

  .kt-hero__proof-body {
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0.025em;
  }
}

.kt-hero__cta::before,
.kt-hero__cta::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.kt-hero__cta::before {
  inset: -40% -72%;
  z-index: 1;
  background: var(--gradient-cta-sheen);
  opacity: 0;
  transform: translateX(var(--sheen-x-start)) skewX(var(--sheen-skew));
  animation: ktHeroCtaSheenIntro var(--dur-cta-sheen-intro) var(--ease-premium) calc(var(--delay-hero-copy) + var(--delay-cta-sheen-intro) - var(--kt-hero-desktop-reveal-advance)) forwards;
}

.kt-hero__cta::after {
  inset: 4px;
  z-index: 2;
  border: 1px solid var(--gold-border-soft);
  border-radius: var(--radius-xs);
  opacity: 0;
  box-shadow: var(--shadow-inner-gold-rest);
  animation: ktHeroCtaInnerLine var(--dur-cta-inner-line) var(--ease-premium) calc(var(--delay-hero-copy) + var(--delay-cta-inner-line) - var(--kt-hero-desktop-reveal-advance)) forwards;
  transition: opacity var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui);
}

.kt-hero__cta:focus-visible {
  outline: 2px solid var(--focus-gold);
  outline-offset: 4px;
}

.kt-hero__scroll:focus-visible {
  outline: 2px solid var(--focus-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Logo intro ── */

.kt-logo-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(56px, 6vh, 84px) 20px;
  overflow: visible;
}

.kt-logo__inner {
  width: min(96vw, 1280px);
  margin-inline: auto;
}

.kt-logo__lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 4.8vh, 58px);
  text-align: center;
}

.kt-logo__statement {
  position: relative;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(96vw, 1180px);
  margin-inline: auto;
  margin-bottom: clamp(4px, 0.8vh, 12px);
  text-align: center;
  text-wrap: balance;
  transform: translateY(clamp(56px, 7vh, 80px));
}

.kt-logo__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgb(var(--rgb-gold-highlight) / 0.86);
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.62),
    0 6px 18px rgb(0 0 0 / 0.42);
}

.kt-logo__statement-rule {
  width: min(210px, 42vw);
  height: 1px;
  margin: clamp(14px, 1.8vh, 22px) auto clamp(24px, 3vh, 38px);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgb(var(--rgb-gold-ui) / 0.28) 18%,
      rgb(var(--rgb-gold-highlight) / 0.84) 50%,
      rgb(var(--rgb-gold-ui) / 0.28) 82%,
      transparent 100%
    );
  box-shadow: 0 0 18px rgb(var(--rgb-gold-highlight) / 0.16);
}

.kt-logo__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.kt-logo__headline span {
  display: block;
}

.kt-logo__headline-ivory {
  font-size: clamp(58px, 7.4vw, 132px);
  color: rgb(var(--rgb-cream-strong) / 0.96);
  text-shadow:
    0 2px 4px rgb(0 0 0 / 0.52),
    0 10px 34px rgb(0 0 0 / 0.46);
}

.kt-logo__headline-gold {
  margin-top: clamp(4px, 0.6vh, 8px);
  font-size: clamp(44px, 5.4vw, 96px);
  color: transparent;
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.42));
}

.kt-logo__microline {
  margin: clamp(20px, 2.4vh, 32px) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgb(var(--rgb-cream-strong) / 0.84);
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.58),
    0 7px 22px rgb(0 0 0 / 0.42);
}

.kt-logo__microline em {
  font-style: italic;
  color: rgb(var(--rgb-gold-highlight) / 0.92);
}

/* Enlarge the supporting statement copy on phones only. */
@media (max-width: 767px) {
  .kt-logo__eyebrow {
    font-size: clamp(14px, 4vw, 16px);
  }

  .kt-logo__microline {
    font-size: clamp(24px, 6.8vw, 28px);
  }
}

/* Mobile landscape — GOVERNING THE OUTCOME + methodology line larger */
@media (max-width: 900px) and (orientation: landscape) {
  .kt-logo__eyebrow {
    font-size: clamp(16px, 2.4vw, 22px);
    letter-spacing: 0.34em;
  }

  .kt-logo__microline {
    font-size: clamp(26px, 3.4vw, 36px);
  }
}

.kt-logo__wrap,
.kt-logo__lock,
.kt-logo__statement,
.kt-logo__headline,
.kt-logo__headline span,
.kt-logo__inner,
.kt-charcoal-content {
  overflow: visible;
}

.ksx-orbit {
  --ksx-orbit-duration: 44s;
  --ksx-orbit-gold: #c98c48;
  position: relative;
  display: grid;
  width: min(78vw, 430px);
  aspect-ratio: 1;
  place-items: center;
  isolation: isolate;
}

.ksx-orbit__mark {
  position: relative;
  z-index: 2;
  display: block;
  width: 68%;
  height: auto;
  user-select: none;
  filter: drop-shadow(0 15px 22px rgba(0, 0, 0, 0.52));
  -webkit-user-drag: none;
}

.ksx-orbit__copy {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  animation: ksxOrbitRotate var(--ksx-orbit-duration) linear infinite;
  will-change: transform;
}

.ksx-orbit__type {
  fill: var(--ksx-orbit-gold);
  font-family: var(--font-sans);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 5.2px;
  text-rendering: geometricPrecision;
}

.ksx-orbit__type--lower {
  letter-spacing: 5.8px;
}

.ksx-orbit__separator {
  fill: var(--ksx-orbit-gold);
}

.ksx-orbit[data-ksx-orbit-paused="true"] .ksx-orbit__copy {
  animation-play-state: paused;
}

/*
  Mobile orbit size MUST come after the base .ksx-orbit rules above,
  or equal-specificity base width/font always win the cascade.
*/
@media (max-width: 767px) {
  /* More air between title block and logo + orbit. */
  #kiwitile-intro .kt-logo__lock {
    gap: clamp(56px, 8vh, 84px);
  }

  #kiwitile-intro .kt-logo__statement {
    margin-bottom: clamp(10px, 1.6vh, 20px);
    transform: translateY(clamp(36px, 4.5vh, 52px));
  }

  #kiwitile-intro .ksx-orbit {
    width: min(86vw, 480px);
    transform: translateY(-14px);
  }

  #kiwitile-intro .ksx-orbit__mark {
    width: 72%;
  }

  /* Pull orbiting type slightly outward so it sits further from the mark. */
  #kiwitile-intro .ksx-orbit__copy {
    inset: auto;
    top: -7%;
    left: -7%;
    width: 114%;
    height: 114%;
  }

  #kiwitile-intro .ksx-orbit__type {
    font-size: 29px;
    letter-spacing: 5.5px;
  }

  #kiwitile-intro .ksx-orbit__type--lower {
    letter-spacing: 6.1px;
  }
}

/* ── Homepage gallery gateway — closure image fill (frame stays 1300/600) ── */
.kt-gallery-wall--homepage-gateway .service-closure .service-media img {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

.kt-final-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background: rgba(224, 163, 83, 0.92);
}

.kt-final-stage {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  --kt-footer-pin-sticky-top: clamp(260px, 40vh, 430px);
  --kt-footer-pin-scroll: clamp(120px, 20vh, 240px);
  --svc-primary-rail: 80vw;
}

.kt-final-stage__background {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 100vh;
  background-image: url("./images/kiwitile-oxidised-olive-bronze-stone.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.kt-final-stage__background {
  filter:
    brightness(0.42)
    saturate(0.78)
    hue-rotate(10deg)
    sepia(0.4)
    contrast(1.06);
}

.kt-final-stage__content {
  position: relative;
  z-index: 1;
  margin-top: -100svh;
}

.kt-final-stage__pin-scroll {
  height: var(--kt-footer-pin-scroll);
  pointer-events: none;
}

.kt-final-stage .kvx-page-end {
  position: relative;
  z-index: 3;
  margin-top: 0;
}

.kt-final-stage__content::after {
  display: none;
  content: none;
}

.kt-final-stage__title-card {
  display: grid;
  place-content: center;
  width: 100%;
  min-height: 100svh;
  padding: clamp(96px, 10vw, 160px) clamp(24px, 7vw, 120px);
  text-align: center;
}

.kt-final-stage__title-card-inner {
  width: 80vw;
  max-width: none;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 72px) clamp(22px, 5vw, 72px);
  background: url("./images/kiwitile-oxidised-inner-olive-bronze-stone.webp") center / cover no-repeat;
  border: 1px solid rgba(224, 163, 83, 0.92);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kt-final-stage__subtitle {
  max-width: 980px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.06em;
  color: rgb(224 178 108 / 0.92);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 0.06),
    0 12px 40px rgb(0 0 0 / 0.55);
}

.kt-final-stage__title {
  max-width: 980px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 72px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: 0;
  color: rgb(238 202 142 / 0.94);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 0.08),
    0 24px 74px rgb(0 0 0 / 0.68);
}

.kt-final-stage__title-card-inner .kt-gw-rule {
  width: 72%;
  min-height: 1px;
  height: 1px;
  margin: clamp(18px, 1.53vw, 26px) auto clamp(18px, 1.67vw, 28px);
  background: linear-gradient(90deg, transparent, rgb(214 164 91 / 0.72), transparent);
}

/* ── Service card CTAs — editorial gold frame (marble-native) ── */

.kt-svc-cta {
  --svc-cta-gold: 215 168 96;
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin: clamp(14px, 1.4vw, 18px) auto 0;
  padding: clamp(15px, 1.35vw, 17px) clamp(42px, 4.2vw, 56px);
  min-width: min(100%, 260px);
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--svc-cta-gold) / 0.52);
  border-radius: 0;
  background:
    linear-gradient(
      90deg,
      rgb(var(--svc-cta-gold) / 0.62),
      rgb(var(--svc-cta-gold) / 0.08)
    )
      left center / clamp(24px, 8%, 36px) 1px no-repeat,
    linear-gradient(
      270deg,
      rgb(var(--svc-cta-gold) / 0.62),
      rgb(var(--svc-cta-gold) / 0.08)
    )
      right center / clamp(24px, 8%, 36px) 1px no-repeat,
    linear-gradient(
      180deg,
      rgb(255 236 196 / 0.035),
      rgb(0 0 0 / 0.18) 58%,
      rgb(0 0 0 / 0.28)
    );
  box-shadow:
    inset 0 1px 0 rgb(255 244 224 / 0.07),
    inset 0 -1px 0 rgb(0 0 0 / 0.22),
    0 10px 28px rgb(0 0 0 / 0.22);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: rgb(var(--svc-cta-gold) / 0.94);
  text-shadow:
    0 1px 0 rgb(255 244 224 / 0.14),
    0 2px 10px rgb(0 0 0 / 0.42);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    color 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease,
    transform 320ms ease;
}

.kt-svc-cta::before,
.kt-svc-cta::after {
  position: absolute;
  width: clamp(9px, 0.85vw, 11px);
  height: clamp(9px, 0.85vw, 11px);
  pointer-events: none;
  content: "";
  border-color: rgb(var(--svc-cta-gold) / 0.72);
  border-style: solid;
  transition: border-color 320ms ease, opacity 320ms ease;
}

.kt-svc-cta::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.kt-svc-cta::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

.kt-svc-cta:focus-visible {
  outline: 1px solid rgb(var(--svc-cta-gold) / 0.78);
  outline-offset: 4px;
}

/* ── Desktop layout (mobile/tablet: separate sheets) ── */

@media (hover: hover) {
  .kt-hero__cta:hover {
    transform: translateY(-1px);
    border-color: rgb(var(--rgb-gold-highlight) / 0.72);
    color: rgb(var(--rgb-gold-bright) / 0.98);
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.46)),
      radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.06), transparent 62%);
    box-shadow:
      0 12px 30px rgb(0 0 0 / 0.34),
      inset 0 1px 0 rgb(255 255 255 / 0.08);
  }

  .kt-hero__cta.kt-hero__cta--sheen-in::before {
    animation: ktHeroCtaSheenIn var(--dur-cta-sheen-hover) var(--ease-sheen) forwards;
  }

  .kt-hero__cta.kt-hero__cta--sheen-out::before {
    animation: ktHeroCtaSheenOut var(--dur-cta-sheen-out) var(--ease-sheen) forwards;
  }

  .kt-hero__cta:hover::after {
    opacity: 1;
    border-color: var(--gold-highlight);
    box-shadow: var(--shadow-inner-gold-hover);
  }

  .kt-hero__scroll:hover {
    color: rgb(var(--rgb-cream-strong) / 0.82);
  }

  .kt-hero__scroll:hover .kt-hero__scroll-chevron {
    border-color: rgb(var(--rgb-gold-highlight) / 0.78);
  }

  .kt-svc-cta:hover,
  .kt-svc-cta:focus-visible {
    transform: translateY(-1px);
    color: rgb(255 236 196 / 0.98);
    border-color: rgb(var(--svc-cta-gold) / 0.78);
    background:
      linear-gradient(
        90deg,
        rgb(var(--svc-cta-gold) / 0.82),
        rgb(var(--svc-cta-gold) / 0.12)
      )
        left center / clamp(24px, 8%, 36px) 1px no-repeat,
      linear-gradient(
        270deg,
        rgb(var(--svc-cta-gold) / 0.82),
        rgb(var(--svc-cta-gold) / 0.12)
      )
        right center / clamp(24px, 8%, 36px) 1px no-repeat,
      linear-gradient(
        180deg,
        rgb(255 236 196 / 0.06),
        rgb(0 0 0 / 0.24) 58%,
        rgb(0 0 0 / 0.34)
      );
    box-shadow:
      inset 0 1px 0 rgb(255 244 224 / 0.12),
      inset 0 -1px 0 rgb(0 0 0 / 0.28),
      0 14px 34px rgb(0 0 0 / 0.28),
      0 0 24px rgb(var(--svc-cta-gold) / 0.1);
  }

  .kt-svc-cta:hover::before,
  .kt-svc-cta:hover::after,
  .kt-svc-cta:focus-visible::before,
  .kt-svc-cta:focus-visible::after {
    border-color: rgb(255 220 140 / 0.92);
  }
}

@media (min-width: 1025px) {
  :root {
    --kt-olive-bronze-height: max(100svh, clamp(734px, calc(84.375vw - 346px), 1274px));
  }

  .kt-oxidised-olive-bronze-stone {
    position: relative;
    z-index: 1;
  }

  .kt-largeformat-opening {
    width: clamp(92vw, calc(104vw - 153.6px), 96vw);
    max-width: none;
    margin-inline: auto;
  }
}

/* ── Accessibility ── */

/* ── iPad / touch-tablet performance ──
   Safari repaints fixed, filtered layers aggressively while the body is the
   scrolling element. Keep the same dark visual system without those costly
   compositing paths. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .kt-hero__bg {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .kt-hero__line,
  .kt-hero__kicker,
  .kt-hero__title-ivory,
  .kt-hero__title-gold,
  .kt-hero__subline,
  .kt-hero__title-rule,
  .kt-hero__scroll,
  .kt-hero__proof {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .kt-hero__cta {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
    animation: none;
  }

  .kt-hero__cta::before,
  .kt-hero__cta::after {
    animation: none;
  }

  .kt-hero__cta::after {
    opacity: 1;
  }

  .kt-hero__cta.kt-hero__cta--sheen-in::before,
  .kt-hero__cta.kt-hero__cta--sheen-out::before {
    animation: none;
  }

  .ksx-orbit__copy {
    animation: none;
  }

}

/* ── Keyframes ── */

@keyframes ktHeroLineReveal {
  0% {
    opacity: 0;
    transform: translateY(var(--line-y-start, 24px));
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ktHeroRuleReveal {
  from {
    opacity: 0;
    transform: scaleX(0.72);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes ktHeroScrollReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ktHeroBgReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ktHeroBgZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.04);
  }
}

@keyframes ktHeroCtaResolve {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    clip-path: inset(0 50% 0 50% round var(--radius-sm));
    filter: blur(8px);
  }
  38% {
    opacity: 0.55;
    filter: blur(3px);
  }
  72%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0 round var(--radius-sm));
    filter: blur(0);
  }
}

@keyframes ktHeroCtaSheenIntro {
  0% {
    opacity: 0;
    transform: translateX(var(--sheen-x-start)) skewX(var(--sheen-skew));
  }
  25% {
    opacity: 0.9;
  }
  75% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--sheen-x-end)) skewX(var(--sheen-skew));
  }
}

@keyframes ktHeroCtaSheenIn {
  0% {
    opacity: 0;
    transform: translateX(var(--sheen-x-start)) skewX(var(--sheen-skew));
  }
  14% {
    opacity: 0.88;
  }
  86% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--sheen-x-end)) skewX(var(--sheen-skew));
  }
}

@keyframes ktHeroCtaSheenOut {
  0% {
    opacity: 0;
    transform: translateX(var(--sheen-x-end)) skewX(var(--sheen-skew));
  }
  14% {
    opacity: 0.72;
  }
  86% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--sheen-x-start)) skewX(var(--sheen-skew));
  }
}

@keyframes ktHeroCtaInnerLine {
  from {
    opacity: 0;
    transform: scaleX(0.74);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes ksxOrbitRotate {
  to {
    transform: rotate(-1turn);
  }
}
.kt-oxidised-olive-bronze-stone {
  display: block;
  width: 100%;
  margin: 0;
}
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1180px),
       (pointer: coarse) and (min-width: 768px) {
  .kt-zone-img-wrap--charcoal {
    position: absolute;
    inset: 0;
    height: 100%;
    background-color: #17120e;
    background-image:
      radial-gradient(ellipse 82% 34% at 50% 12%, rgba(83, 55, 34, 0.28), transparent 70%),
      linear-gradient(180deg, #17120e 0%, #100d0a 58%, #090807 100%);
  }

  body * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: auto !important;
  }

  .kt-hero__cta {
    filter: none !important;
  }

}

/* Homepage final gateway — phone: content in normal flow; stone absolute full-section cover. */
@media (max-width: 900px) {
  .kt-final-stage {
    --svc-primary-rail: calc(100vw - 20px);
    overflow: visible;
  }

  .kt-final-stage__background {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat;
    background-attachment: scroll !important;
  }

  .kt-final-stage__content {
    position: relative;
    z-index: 2;
    margin-top: 0;
    overflow: visible;
  }

  .kt-final-stage__content .kt-gateway-closing {
    position: relative;
    top: auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 40px 16px 56px;
  }

  .kt-final-stage__title-card {
    min-height: 70svh;
    padding: 96px 10px 40px;
  }

  .kt-final-stage__title-card-inner {
    width: calc(100vw - 20px);
  }

  .kt-gallery-wall--homepage-gateway,
  .kt-gallery-wall--homepage-gateway .kt-gallery-wall-opening {
    position: relative;
    z-index: 3;
    width: 100%;
    overflow: visible;
  }
}