/* KiwiTile primary service orbit carousel — shared by tile / mosaic / stone modals */

:root{
  --kt-bg:#0f0e0c;
  --kt-gold:rgba(194,143,76,.92);
  --kt-gold-soft:rgba(221,184,122,.72);
  --kt-cream:rgba(245,235,214,.88);
  --kt-muted:rgba(232,220,198,.62);
  --kt-line: rgba(212, 180, 129, 0.58);
  --kt-card-w: min(404px, 76vw);
  --kt-card-h: 420px;
  --kt-radius: 560px;
  --kt-ease:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }

html,body{
  min-height:100%;
  background:#0a0908;
}

body{
  margin:0;
  min-height:100svh;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(221,167,92,.24), transparent 42%),
    radial-gradient(circle at 14% 82%, rgba(89,122,107,.12), transparent 32%),
    radial-gradient(circle at 88% 72%, rgba(188,120,72,.10), transparent 36%),
    linear-gradient(180deg,#0a0908 0%, #15120f 48%, #0b0a09 100%);
  color:var(--kt-cream);
  font-family: var(--font-sans);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(120deg, rgba(255,255,255,.035), transparent 34% 66%, rgba(255,255,255,.018)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.35;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:auto 0 0;
  height:32svh;
  z-index:-1;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(219,177,108,.18), transparent 66%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.44));
  pointer-events:none;
}

.kt-layout-selector{
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(32px,5vh,68px) 22px;
  isolation:isolate;
}

.kt-shell{
  width:min(1180px,100%);
  position:relative;
}

.kt-shell::before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:min(1040px,96vw);
  height:min(620px,70svh);
  transform:translate(-50%,-50%);
  border:0;
  border-radius:999px;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(255,246,224,.035), transparent 57%),
    radial-gradient(ellipse at 50% 82%, rgba(194,143,76,.12), transparent 52%);
  box-shadow:0 44px 130px rgba(0,0,0,.24);
  opacity:.9;
  pointer-events:none;
}

.kt-kicker{
  margin:0 0 12px;
  text-align:center;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--kt-gold-soft);
}

h1{
  margin:0 auto 12px;
  max-width:820px;
  text-align:center;
  font-family: var(--font-serif);
  font-size:clamp(34px,5vw,72px);
  line-height:.94;
  font-weight:500;
  letter-spacing:0;
  color:rgba(255,242,214,.94);
  text-shadow:
    0 1px 0 rgba(255,255,255,.12),
    0 16px 48px rgba(0,0,0,.75),
    0 0 42px rgba(194,143,76,.12);
}

.kt-tile-carousel h1,
.kt-mosaic-carousel h1,
.kt-stone-carousel h1,
.kt-design-consultation-carousel h1{
  font-size:clamp(32px,4.4vw,66px);
}

.kt-title-lead,
.kt-title-rest{
  display:block;
}

.kt-title-lead{
  font-size:1.2em;
}

.kt-design-consultation-carousel .kt-kicker,
.kt-design-consultation-carousel h1{
  transform:translateY(-30px);
}

/* Tile + mosaic + stone headers sit lower than the shared carousel lift */
.kt-tile-carousel .kt-kicker,
.kt-tile-carousel h1,
.kt-mosaic-carousel .kt-kicker,
.kt-mosaic-carousel h1,
.kt-stone-carousel .kt-kicker,
.kt-stone-carousel h1{
  transform:translateY(-12px);
}

.kt-design-consultation-carousel .kt-card::before,
.kt-design-consultation-carousel .layout-art::before,
.kt-design-consultation-carousel .layout-art::after{
  content:none;
}

.kt-design-consultation-carousel .kt-card.is-muted,
.kt-design-consultation-carousel .kt-card.is-active,
.kt-design-consultation-carousel .kt-fly-card.is-expanding{
  filter:none;
}

.kt-design-consultation-carousel .type-image,
.kt-design-consultation-carousel .kt-fly-card .type-image{
  filter:none;
}

.kt-design-consultation-carousel .layout-art,
.kt-design-consultation-carousel .kt-fly-card.is-expanding .layout-art{
  border-radius:20px 20px 0 0;
}

.kt-design-consultation-carousel .kt-cylinder .type-image[src*="large-format-stone-look-porcelain-bathroom-wet-room-installation"]{
  transform:scale(1.55);
}

.kt-design-consultation-carousel .kt-fly-card.is-expanding .type-image[src*="large-format-stone-look-porcelain-bathroom-wet-room-installation"]{
  object-position:center 12%;
  transform:scale(1.02);
}

.kt-design-consultation-carousel .kt-fly-card.is-expanding .layout-art{
  height:clamp(230px, 48svh, 390px);
}

.kt-stage-wrap{
  position:relative;
  height:min(610px, 61svh);
  min-height:500px;
  display:grid;
  place-items:center;
  perspective:1300px;
  perspective-origin:50% 44%;
  overflow:visible;
  user-select:none;
  touch-action:pan-y;
}

.kt-stage-wrap::before{
  content:"";
  position:absolute;
  width:min(900px,88vw);
  height:286px;
  bottom:22px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(245,210,150,.18), transparent 58%),
    radial-gradient(ellipse at center, rgba(0,0,0,.38), transparent 72%);
  filter:blur(16px);
  opacity:.9;
  transform:rotateX(72deg);
  pointer-events:none;
}

.kt-cylinder{
  position:relative;
  width:var(--kt-card-w);
  height:var(--kt-card-h);
  transform-style:preserve-3d;
  will-change:transform;
  cursor:ew-resize;
}

.kt-shell.is-detail-open .kt-stage-wrap{ pointer-events:none; }

.kt-shell.is-detail-open .kt-cylinder{
  opacity:.24;
  filter:blur(2px) saturate(.74) brightness(.62);
  transition:opacity 520ms ease, filter 520ms ease;
}

.kt-card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:6px;
  border:1px solid rgba(222, 170, 92, 0.42);
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)),
    linear-gradient(145deg, rgba(43,36,29,.96), rgba(13,11,9,.98));
  box-shadow:
    0 30px 80px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.52);
  overflow:hidden;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  transition:opacity .45s ease, filter .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.kt-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(235,190,121,.18), transparent 34%),
    linear-gradient(105deg, transparent 0 22%, rgba(255,255,255,.08) 38%, transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 36%);
  opacity:.68;
  pointer-events:none;
}

.kt-card::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:20px;
  border:1px solid rgba(255,239,206,.05);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  pointer-events:none;
}

.kt-card.is-muted{ filter:saturate(.84) brightness(.88); }
.kt-card.is-active{
  opacity:1;
  border-color:rgba(237,190,112,.74);
  filter:saturate(1.12) brightness(1.28);
  box-shadow:
    0 34px 86px rgba(0,0,0,.64),
    0 0 54px rgba(220,164,83,.18),
    0 0 0 1px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.52);
}
.kt-card.is-hidden-source{ visibility:hidden; }

.kt-card-action{
  position:absolute;
  inset:0;
  z-index:6;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:26px;
  background:transparent;
  color:inherit;
  cursor:pointer;
}

.kt-card-action:focus-visible{
  outline:3px solid rgba(255,228,178,.98);
  outline-offset:-5px;
}

.layout-art{
  position:relative;
  height:246px;
  flex:0 0 auto;
  border-radius:20px;
  overflow:hidden;
  background:#201c17;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 -34px 52px rgba(0,0,0,.18);
}

.type-image{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  object-fit:cover;
  opacity:1;
  filter:saturate(.86) contrast(1.06) brightness(1);
  transform:scale(1.02);
}

.layout-art::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(118deg, rgba(255,255,255,.15), transparent 16% 68%, rgba(0,0,0,.2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23m)' opacity='.27'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:.54;
  pointer-events:none;
}

.layout-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 25%, transparent 0 42%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 28%, rgba(0,0,0,.34) 100%);
  z-index:2;
  pointer-events:none;
}

/* ── Tile carousel theme ── */
.kt-tile-carousel .kt-card::before,
.kt-tile-carousel .layout-art::before,
.kt-tile-carousel .layout-art::after{
  content:none;
}

.kt-tile-carousel .kt-card.is-active,
.kt-tile-carousel .kt-fly-card.is-expanding{
  filter:none;
}

.kt-tile-carousel .type-image,
.kt-tile-carousel .kt-fly-card .type-image{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:none;
  transform:none;
}

/* Square image bottoms; soft top to match card radius */
.kt-tile-carousel .layout-art,
.kt-tile-carousel .kt-fly-card .layout-art{
  border-radius:20px 20px 0 0;
}

/* Expanded: same 6px edge inset as orbit cards */
.kt-tile-carousel .kt-fly-card{
  padding:6px;
  border-radius:26px;
}

.kt-tile-carousel .kt-fly-card::after{
  inset:6px;
  border-radius:20px;
}

.kt-tile-carousel .kt-fly-card.is-expanding .layout-art,
.kt-tile-carousel .kt-fly-card.is-detail .layout-art{
  height:clamp(282px, 51svh, 430px);
  border-radius:20px 20px 0 0; /* beat shared expanding 22px all-corners */
}

.kt-tile-carousel .kt-fly-card.is-expanding .kt-card-copy,
.kt-tile-carousel .kt-fly-card.is-detail .kt-card-copy{
  padding:4px 18px 12px;
}

.kt-tile-carousel .type-image[src*="kiwitile-timber-look-tile-bathroom-floor-installation"]{
  filter:brightness(.96) contrast(1.32) saturate(1.08);
}

.kt-tile-carousel .type-image[src*="porcelain-floor-tiling-living-area"],
.kt-tile-carousel .type-image[src*="handmade-tile-moroccan-kitchen-splash"]{
  filter:brightness(1.16) contrast(1.02) saturate(1.02);
}

.kt-tile-carousel .type-image[src*="rounded-subway-tile-bathroom-vanity-wall"]{
  filter:brightness(1.02) contrast(1.04) saturate(1.02);
}

/* ── Mosaic carousel theme (aligned with tile mobile shell) ── */
.kt-mosaic-carousel .kt-card::before,
.kt-mosaic-carousel .layout-art::before,
.kt-mosaic-carousel .layout-art::after{
  content:none;
}

.kt-mosaic-carousel .kt-card.is-muted,
.kt-mosaic-carousel .kt-card.is-active,
.kt-mosaic-carousel .kt-fly-card.is-expanding{
  filter:none;
}

.kt-mosaic-carousel .type-image,
.kt-mosaic-carousel .kt-fly-card .type-image{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:none;
  transform:none;
}

/* Square image bottoms; soft top to match card radius */
.kt-mosaic-carousel .layout-art,
.kt-mosaic-carousel .kt-fly-card .layout-art{
  border-radius:20px 20px 0 0;
}

/* Expanded: same 6px edge inset as orbit cards */
.kt-mosaic-carousel .kt-fly-card{
  padding:6px;
  border-radius:26px;
}

.kt-mosaic-carousel .kt-fly-card::after{
  inset:6px;
  border-radius:20px;
}

.kt-mosaic-carousel .kt-fly-card.is-expanding .layout-art,
.kt-mosaic-carousel .kt-fly-card.is-detail .layout-art{
  height:clamp(282px, 51svh, 430px);
  border-radius:20px 20px 0 0;
}

.kt-mosaic-carousel .kt-fly-card.is-expanding .kt-card-copy,
.kt-mosaic-carousel .kt-fly-card.is-detail .kt-card-copy{
  padding:4px 18px 12px;
}

/* Mosaic-specific crops (desktop + mobile) */
.kt-mosaic-carousel .type-image[src*="mosaic-tile-bathroom-recessed-niche-installation"]{
  object-position:right center;
  transform:none;
}

.kt-mosaic-carousel .type-image[src*="herringbone-laundry-floor-glass-mosaics-nz"]{
  object-position:center 34%;
}


/* ── Stone carousel theme (aligned with tile/mosaic mobile shell) ── */
.kt-stone-carousel .type-image,
.kt-stone-carousel .kt-fly-card .type-image{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Square image bottoms; soft top to match card radius */
.kt-stone-carousel .layout-art,
.kt-stone-carousel .kt-fly-card .layout-art{
  border-radius:20px 20px 0 0;
}

/* Expanded: same 6px edge inset as orbit cards */
.kt-stone-carousel .kt-fly-card{
  padding:6px;
  border-radius:26px;
}

.kt-stone-carousel .kt-fly-card::after{
  inset:6px;
  border-radius:20px;
}

.kt-stone-carousel .kt-fly-card.is-expanding .layout-art,
.kt-stone-carousel .kt-fly-card.is-detail .layout-art{
  height:clamp(282px, 51svh, 430px);
  border-radius:20px 20px 0 0;
}

.kt-stone-carousel .kt-fly-card.is-expanding .kt-card-copy,
.kt-stone-carousel .kt-fly-card.is-detail .kt-card-copy{
  padding:4px 18px 12px;
}

.kt-stone-carousel .kt-fly-card.is-expanding:has(.type-image[src*="onyx-stone-luxury-ensuite-install-kiwitile"]) .layout-art{
  width:min(74%, 330px);
  align-self:center;
}

.kt-stone-carousel .kt-card.is-active,
.kt-stone-carousel .kt-fly-card.is-expanding{
  filter:none;
}

.kt-card-copy{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-height:0;
  padding:22px 28px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  background:
    radial-gradient(520px 180px at 50% 14%,
      rgba(255,255,255,.085),
      rgba(255,255,255,.022) 38%,
      transparent 70%),
    radial-gradient(420px 150px at 50% 78%,
      rgba(190,145,92,.09),
      transparent 72%),
    linear-gradient(180deg,
      rgba(0,0,0,0),
      rgba(0,0,0,.14));
}

.kt-card h2{
  position:relative;
  margin:0;
  font-family: var(--font-serif);
  font-weight:400;
  font-size:clamp(15px,2vw,21px);
  line-height:1.02;
  letter-spacing:.085em;
  text-transform:uppercase;
  color:rgba(212,178,124,.96);
  -webkit-text-stroke:.35px rgba(255,244,224,.22);
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    2.5px 3.5px 6.5px rgba(0,0,0,.52),
    0 0 16px rgba(255,255,255,.10);
}

.kt-card-divider{
  width:135px;
  height:clamp(6px, 0.65vw, 8px);
  margin:clamp(4px, 0.45vw, 6px) auto clamp(6px, 0.7vw, 8px);
  background:url("../images/008-dt-ornamental-divider.svg") center / 100% 100% no-repeat;
  opacity:.94;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.48))
    drop-shadow(0 0 9px rgba(255,211,106,.18));
}

.kt-card h2::before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  z-index:-1;
  transform:translate(-50%,-50%);
  width:128%;
  height:88%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.09),
      rgba(190,145,92,.045) 42%,
      transparent 72%
    );
  filter:blur(10px);
  pointer-events:none;
}

.kt-card p{
  margin:-4px 0 0;
  font-family: var(--font-sans);
  font-size:13px;
  line-height:1.42;
  letter-spacing:.02em;
  color:rgba(222,205,182,.9);
  opacity:.78;
  -webkit-text-stroke:.22px rgba(255,255,255,.46);
  text-shadow:
    0 1px 2px rgba(0,0,0,.55);
}

.kt-orbit-controls{
  position:relative;
  top:40px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:24px auto 0;
}

/* Compact touch controls are enabled for the material carousels at the
   phone/tablet breakpoints below. */
.kt-mobile-orbit-controls{
  display:none;
}

.kt-mobile-orbit-button{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(246,226,190,.86);
  cursor:pointer;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.kt-mobile-orbit-button svg{
  width:22px;
  height:22px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.kt-mobile-orbit-button:active{
  color:rgba(255,244,218,.98);
  transform:scale(.9);
}

.kt-mobile-orbit-button:focus-visible{
  outline:2px solid rgba(224,174,96,.92);
  outline-offset:0;
  border-radius:50%;
}

.kt-fly-close:focus-visible {
    outline: 2px solid rgba(224, 174, 96, 0.92);
    outline-offset: 3px;
  }

.kt-focus-layer{
  position:fixed;
  inset:0;
  z-index:70;
  background:
    radial-gradient(circle at 50% 42%, rgba(211,158,86,.2), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(110,132,118,.1), transparent 45%),
    rgba(5,4,3,.62);
  opacity:0;
  pointer-events:none;
  transition:opacity 520ms ease;
  backdrop-filter:blur(9px) saturate(.9);
}

.kt-focus-layer.is-open{
  opacity:1;
  pointer-events:auto;
}

.kt-fly-card{
  position:fixed;
  z-index:90;
  margin:0;
  inset:auto;
  transform:none !important;
  transform-style:flat;
  backface-visibility:visible;
  will-change:left, top, width, height, border-radius;
  transition:
    left 940ms var(--kt-ease),
    top 940ms var(--kt-ease),
    width 940ms var(--kt-ease),
    height 940ms var(--kt-ease),
    border-radius 940ms var(--kt-ease),
    box-shadow 940ms var(--kt-ease),
    filter 940ms var(--kt-ease);
  cursor:default;
}

.kt-fly-card .layout-art{
  width:100%;
  align-self:center;
  transition:height 940ms cubic-bezier(.16,1,.3,1), width 940ms cubic-bezier(.16,1,.3,1), border-radius 940ms cubic-bezier(.16,1,.3,1);
}

.kt-fly-card .kt-card-copy{
  transition:padding 940ms cubic-bezier(.16,1,.3,1);
}

.kt-fly-card h2{
  transition:font-size 940ms cubic-bezier(.16,1,.3,1), margin 940ms cubic-bezier(.16,1,.3,1);
}

.kt-fly-card p{
  transition:opacity 220ms ease, transform 360ms ease, font-size 940ms cubic-bezier(.16,1,.3,1), line-height 940ms cubic-bezier(.16,1,.3,1), color 940ms ease;
}

.kt-fly-card.is-expanding{
  border-radius:30px;
  box-shadow:
    0 48px 138px rgba(0,0,0,.76),
    0 0 90px rgba(214,157,78,.18),
    inset 0 1px 0 rgba(255,255,255,.1);
  filter:saturate(1.08) brightness(1.08);
}

.kt-fly-card.is-expanding .layout-art{
  height:clamp(196px, 37svh, 306px);
  border-radius:22px;
}

.kt-fly-card .type-image{
  opacity:1;
  filter:saturate(.95) contrast(1.04) brightness(1);
}

.kt-fly-card.is-expanding .kt-card-copy{
  padding:8px 18px 16px;
}

.kt-fly-card.is-expanding h2{
  font-size:clamp(29px,4vw,48px);
  line-height:.98;
  margin:16px 0 8px;
}

.kt-fly-card.is-expanding p{
  color:rgba(232,220,198,.76);
  font-size:clamp(14px,1.4vw,17px);
  line-height:1.64;
}

.kt-fly-card.is-swapping p{
  opacity:0;
  transform:translateY(8px);
}

.kt-fly-card.is-detail p{
  opacity:1;
  transform:translateY(0);
}

.kt-fly-card.is-closing *{
  pointer-events:none;
}

.kt-fly-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:6;
  border:1px solid rgba(218,166,94,.35);
  border-radius:999px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  background:rgba(8,7,6,.78);
  color:rgba(245,235,214,.88);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 360ms ease, transform 520ms cubic-bezier(.16,1,.3,1);
}

.kt-fly-card.is-detail .kt-fly-close{
  opacity:1;
  transform:translateY(0);
}

/* Phone + portrait only — tablet landscape must keep the desktop orbit. */
@media (max-width:900px) and (orientation: portrait),
       (max-width:900px) and (max-height:500px){
  :root{
    --kt-card-w:min(318px,72vw);
    --kt-card-h:372px;
    --kt-radius:390px;
  }

  h1{
    max-width:330px;
    font-size:clamp(30px,5.2vw,34px);
    line-height:1;
  }

  .kt-stage-wrap{
    min-height:390px;
    height:48svh;
    overflow:hidden;
  }

  .layout-art{
    height:220px;
  }

  /* Tile + mosaic + stone mobile — do not override :root --kt-radius (orbit snap math) */
  .kt-tile-carousel,
  .kt-mosaic-carousel,
  .kt-stone-carousel{
    --kt-card-w:min(384px,90vw);
    --kt-card-h:500px;
  }

  .kt-tile-carousel .kt-layout-selector,
  .kt-mosaic-carousel .kt-layout-selector,
  .kt-stone-carousel .kt-layout-selector{
    min-height:100dvh;
    padding:clamp(12px,2.4vh,28px) 0;
  }

  .kt-tile-carousel .kt-shell::before,
  .kt-mosaic-carousel .kt-shell::before,
  .kt-stone-carousel .kt-shell::before{
    width:min(1200px,100vw);
    height:min(700px,80svh);
  }

  .kt-tile-carousel .kt-kicker,
  .kt-mosaic-carousel .kt-kicker,
  .kt-stone-carousel .kt-kicker{
    font-size:15px;
    letter-spacing:.28em;
  }

  .kt-tile-carousel h1,
  .kt-mosaic-carousel h1,
  .kt-stone-carousel h1{
    max-width:420px;
    font-size:clamp(40px,7.2vw,48px);
    line-height:.96;
  }

  .kt-tile-carousel .kt-stage-wrap,
  .kt-mosaic-carousel .kt-stage-wrap,
  .kt-stone-carousel .kt-stage-wrap{
    min-height:530px;
    height:64svh;
  }

  .kt-tile-carousel .layout-art,
  .kt-mosaic-carousel .layout-art,
  .kt-stone-carousel .layout-art{
    height:260px;
  }

  .kt-tile-carousel .kt-card h2,
  .kt-mosaic-carousel .kt-card h2,
  .kt-stone-carousel .kt-card h2{
    font-size:clamp(33px,7.4vw,36px);
    letter-spacing:.045em;
  }

  .kt-tile-carousel .kt-card p,
  .kt-mosaic-carousel .kt-card p,
  .kt-stone-carousel .kt-card p{
    font-size:18.5px;
    line-height:1.52;
  }

  .kt-tile-carousel .kt-card-copy,
  .kt-mosaic-carousel .kt-card-copy,
  .kt-stone-carousel .kt-card-copy{
    padding:18px 20px 22px;
    gap:11px;
  }

  .kt-tile-carousel .kt-card-divider,
  .kt-mosaic-carousel .kt-card-divider,
  .kt-stone-carousel .kt-card-divider{
    width:156px;
    height:8px;
  }
}

@media (max-width:720px) and (orientation: portrait),
       (max-width:720px) and (max-height:500px){
  :root{
    --kt-card-w:min(286px,72vw);
    --kt-card-h:352px;
    --kt-radius:338px;
  }

  .kt-layout-selector{
    padding-left:14px;
    padding-right:14px;
  }

  .kt-kicker{
    font-size:11px;
    letter-spacing:.24em;
  }

  h1{
    max-width:300px;
    font-size:clamp(28px,8vw,32px);
    line-height:1;
  }

  .kt-stage-wrap{
    min-height:376px;
    height:46svh;
    perspective:980px;
    overflow:hidden;
  }

  .kt-stage-wrap::before{
    width:112vw;
    bottom:30px;
  }

  .layout-art{
    height:212px;
  }

  .kt-card-copy{
    padding:18px 20px 22px;
    gap:8px;
  }

  .kt-card h2{
    font-size:15px;
  }

  .kt-card p{
    font-size:12px;
    line-height:1.38;
  }

  .kt-fly-card{
    padding:15px;
  }

  .kt-fly-card.is-expanding .kt-card-copy{
    padding:4px 8px 10px;
  }

  .kt-orbit-controls{
    margin-top:22px;
  }

  /* Tile + mosaic + stone mobile refinements (≤720) */
  .kt-tile-carousel,
  .kt-mosaic-carousel,
  .kt-stone-carousel{
    --kt-card-w:min(364px,92vw);
    --kt-card-h:484px;
  }

  .kt-tile-carousel .kt-layout-selector,
  .kt-mosaic-carousel .kt-layout-selector,
  .kt-stone-carousel .kt-layout-selector{
    padding:clamp(10px,2vh,22px) 0;
  }

  .kt-tile-carousel .kt-shell::before,
  .kt-mosaic-carousel .kt-shell::before,
  .kt-stone-carousel .kt-shell::before{
    width:min(1160px,100vw);
    height:min(680px,78svh);
  }

  .kt-tile-carousel .kt-kicker,
  .kt-mosaic-carousel .kt-kicker,
  .kt-stone-carousel .kt-kicker{
    font-size:15px;
    letter-spacing:.28em;
  }

  .kt-tile-carousel h1,
  .kt-mosaic-carousel h1,
  .kt-stone-carousel h1{
    max-width:380px;
    font-size:clamp(38px,9.5vw,46px);
    line-height:.96;
  }

  .kt-tile-carousel .kt-stage-wrap,
  .kt-mosaic-carousel .kt-stage-wrap,
  .kt-stone-carousel .kt-stage-wrap{
    min-height:510px;
    height:62svh;
    perspective:1120px;
  }

  .kt-tile-carousel .kt-stage-wrap::before,
  .kt-mosaic-carousel .kt-stage-wrap::before,
  .kt-stone-carousel .kt-stage-wrap::before{
    left:50%;
    width:min(100vw,420px);
    height:340px;
    bottom:24px;
    transform:translateX(-50%) rotateX(72deg);
  }

  .kt-tile-carousel .layout-art,
  .kt-mosaic-carousel .layout-art,
  .kt-stone-carousel .layout-art{
    height:248px;
  }

  .kt-tile-carousel .kt-card-copy,
  .kt-mosaic-carousel .kt-card-copy,
  .kt-stone-carousel .kt-card-copy{
    padding:16px 18px 20px;
    gap:11px;
  }

  .kt-tile-carousel .kt-card h2,
  .kt-mosaic-carousel .kt-card h2,
  .kt-stone-carousel .kt-card h2{
    font-size:clamp(32px,7.6vw,35px);
    letter-spacing:.045em;
  }

  .kt-tile-carousel .kt-card p,
  .kt-mosaic-carousel .kt-card p,
  .kt-stone-carousel .kt-card p{
    font-size:18px;
    line-height:1.52;
  }

  .kt-tile-carousel .kt-card-divider,
  .kt-mosaic-carousel .kt-card-divider,
  .kt-stone-carousel .kt-card-divider{
    width:154px;
    height:8px;
  }

  /* Beat shared mobile fly-card 15px padding */
  .kt-tile-carousel .kt-fly-card,
  .kt-mosaic-carousel .kt-fly-card,
  .kt-stone-carousel .kt-fly-card{
    padding:6px;
  }

  .kt-tile-carousel .kt-fly-card.is-expanding .kt-card-copy,
  .kt-tile-carousel .kt-fly-card.is-detail .kt-card-copy,
  .kt-mosaic-carousel .kt-fly-card.is-expanding .kt-card-copy,
  .kt-mosaic-carousel .kt-fly-card.is-detail .kt-card-copy,
  .kt-stone-carousel .kt-fly-card.is-expanding .kt-card-copy,
  .kt-stone-carousel .kt-fly-card.is-detail .kt-card-copy{
    padding:4px 12px 12px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel)
  .kt-fly-card.is-expanding h2,
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel)
  .kt-fly-card.is-detail h2{
    font-size:clamp(32px,7.6vw,35px);
  }
}

@media (max-height:740px){
  .kt-layout-selector{
    padding-top:18px;
    padding-bottom:18px;
  }

  h1{
    font-size:clamp(32px,4.4vw,58px);
    line-height:.96;
    margin-bottom:10px;
  }

  .kt-stage-wrap{
    height:390px;
    min-height:360px;
  }

  /* Preserve tile/mosaic/stone stage size against short-viewport shrink */
  .kt-tile-carousel .kt-stage-wrap,
  .kt-mosaic-carousel .kt-stage-wrap,
  .kt-stone-carousel .kt-stage-wrap{
    height:min(540px,66svh);
    min-height:500px;
  }

  .kt-orbit-controls{
    margin-top:18px;
  }

}

@media (max-width:420px) and (orientation: portrait),
       (max-width:420px) and (max-height:500px){
  :root{
    --kt-card-w:min(272px,70vw);
    --kt-card-h:334px;
    --kt-radius:310px;
  }

  .layout-art{
    height:202px;
  }

  .kt-card-copy{
    padding:16px 18px 20px;
  }

  /* Tile + mosaic + stone mobile refinements (≤420) */
  .kt-tile-carousel,
  .kt-mosaic-carousel,
  .kt-stone-carousel{
    --kt-card-w:min(346px,94vw);
    --kt-card-h:470px;
  }

  .kt-tile-carousel .kt-stage-wrap,
  .kt-mosaic-carousel .kt-stage-wrap,
  .kt-stone-carousel .kt-stage-wrap{
    min-height:490px;
    height:60svh;
  }

  .kt-tile-carousel .layout-art,
  .kt-mosaic-carousel .layout-art,
  .kt-stone-carousel .layout-art{
    height:236px;
  }

  .kt-tile-carousel .kt-card-copy,
  .kt-mosaic-carousel .kt-card-copy,
  .kt-stone-carousel .kt-card-copy{
    padding:14px 16px 18px;
    gap:10px;
  }

  .kt-tile-carousel .kt-card h2,
  .kt-mosaic-carousel .kt-card h2,
  .kt-stone-carousel .kt-card h2{
    font-size:clamp(31px,7.8vw,34px);
    letter-spacing:.045em;
  }

  .kt-tile-carousel .kt-card p,
  .kt-mosaic-carousel .kt-card p,
  .kt-stone-carousel .kt-card p{
    font-size:17.5px;
    line-height:1.52;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel)
  .kt-fly-card.is-expanding h2,
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel)
  .kt-fly-card.is-detail h2{
    font-size:clamp(31px,7.8vw,34px);
  }
}

@media (max-height:660px){
  .kt-kicker{
    display:none;
  }

  .kt-stage-wrap{
    height:410px;
    min-height:360px;
  }

  .kt-tile-carousel .kt-stage-wrap,
  .kt-mosaic-carousel .kt-stage-wrap,
  .kt-stone-carousel .kt-stage-wrap{
    height:min(500px,64svh);
    min-height:440px;
  }

  .kt-orbit-controls{
    margin-top:28px;
  }
}

@media (max-width:767px) and (orientation: portrait),
       (max-width:767px) and (max-height:500px){
  .kt-tile-carousel .kt-mobile-orbit-controls,
  .kt-mosaic-carousel .kt-mobile-orbit-controls,
  .kt-stone-carousel .kt-mobile-orbit-controls{
    top:auto;
    display:flex;
    gap:18px;
    width:max-content;
    margin:4px auto 0;
  }
}

@media (max-width:767px) and (orientation:portrait){
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel)
  .kt-fly-card.is-expanding .layout-art,
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel)
  .kt-fly-card.is-detail .layout-art{
    height:clamp(220px,44svh,360px);
  }
}

/* Material carousels — tablet portrait. The stage grows with viewport height,
   so pull the controls through its unused lower half until they sit 8px below
   the 500px front card. */
@media (min-width:768px) and (max-width:900px) and (orientation:portrait){
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-controls{
    top:auto;
    display:flex;
    gap:18px;
    width:max-content;
    margin:min(-7px, calc(258px - 32svh)) auto 0;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-button{
    width:56px;
    height:56px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-button svg{
    width:30px;
    height:30px;
  }
}

/* Material carousels — tablet layouts using the desktop-size 420px card.
   Match the mobile chevrons and keep them 8px below the front-centre card. */
@media (min-width:768px) and (max-width:1180px) and (min-height:501px) and (orientation:landscape),
       (min-width:901px) and (max-width:1180px) and (orientation:portrait){
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-controls{
    top:auto;
    display:flex;
    gap:18px;
    width:max-content;
    margin:clamp(-87px, calc(218px - 30.5svh), -32px) auto 0;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-button{
    width:56px;
    height:56px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-button svg{
    width:30px;
    height:30px;
  }
}

/* Landscape tablets need a little more breathing room below the card than
   portrait: 26px instead of 8px. */
@media (min-width:768px) and (max-width:1180px) and (min-height:501px) and (orientation:landscape){
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-controls{
    margin:clamp(-69px, calc(236px - 30.5svh), -14px) auto 0;
  }
}

/* Material carousels — phone landscape ONLY (max-height tight so tablets
   fall through to the desktop cylinder / vertical-card orbit). */
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel){
    --kt-card-w:min(620px,74vw);
    --kt-card-h:280px;
    --kt-radius:430px;
    min-height:100dvh;
    overflow:hidden;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-layout-selector{
    width:100%;
    height:100dvh;
    min-height:0;
    padding:8px 0;
    place-items:center;
    overflow:hidden;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-shell{
    width:100%;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-kicker{
    display:none;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) h1{
    max-width:460px;
    margin:0 auto 2px;
    font-size:clamp(25px,4.1vw,31px);
    line-height:.92;
    transform:none;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-title-lead{
    font-size:1em;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-stage-wrap{
    height:292px;
    min-height:292px;
    perspective:1120px;
    overflow:hidden;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-card{
    flex-direction:row;
  }

  /* Mosaic uses twelve planes. A larger radius prevents the adjacent planes
     intersecting the front frame while retaining the visible 3D side cards. */
  .kt-mosaic-carousel{
    --kt-card-w:min(520px,68vw);
    --kt-card-h:270px;
    --kt-radius:980px;
  }

  .kt-mosaic-carousel .kt-stage-wrap{
    height:282px;
    min-height:282px;
    overflow:visible;
    perspective:1120px;
  }

  .kt-mosaic-carousel .kt-cylinder .kt-card.is-active{
    border:2px solid rgba(237,190,112,.82);
    box-shadow:
      0 24px 64px rgba(0,0,0,.58),
      0 0 34px rgba(220,164,83,.14),
      inset 0 0 0 1px rgba(255,239,206,.08);
  }

  .kt-mosaic-carousel .kt-cylinder .kt-card.is-active::after{
    inset:5px;
    z-index:8;
    border-color:rgba(255,239,206,.12);
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .layout-art,
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-fly-card .layout-art{
    width:46%;
    height:100%;
    flex:0 0 46%;
    border-radius:20px 0 0 20px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-card-copy{
    padding:16px 20px;
    gap:8px;
    overflow-y:auto;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-card h2{
    font-size:clamp(24px,3.5vw,30px);
    line-height:1;
    letter-spacing:.035em;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-card p{
    font-size:clamp(14px,1.9vw,16px);
    line-height:1.46;
    opacity:.92;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-card-divider{
    width:130px;
    height:7px;
    margin:2px auto 4px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-controls{
    position:absolute;
    top:50%;
    left:max(8px,env(safe-area-inset-left,0px));
    right:max(8px,env(safe-area-inset-right,0px));
    z-index:12;
    display:flex;
    justify-content:space-between;
    width:auto;
    margin:0;
    pointer-events:none;
    transform:translateY(-50%);
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-button{
    width:56px;
    height:56px;
    color:rgba(255,235,198,.96);
    background:rgba(8,7,6,.54);
    border:1px solid rgba(224,176,102,.34);
    border-radius:50%;
    box-shadow:0 8px 24px rgba(0,0,0,.42);
    pointer-events:auto;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-mobile-orbit-button svg{
    width:30px;
    height:30px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-fly-card.is-expanding .layout-art,
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-fly-card.is-detail .layout-art{
    width:46%;
    height:100%;
    flex-basis:46%;
    border-radius:20px 0 0 20px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-fly-card.is-expanding .kt-card-copy,
  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-fly-card.is-detail .kt-card-copy{
    padding:18px 24px;
  }

  :is(.kt-tile-carousel,.kt-mosaic-carousel,.kt-stone-carousel) .kt-fly-close{
    top:10px;
    right:10px;
  }

  .kt-stone-carousel .kt-fly-card.is-expanding:has(.type-image[src*="onyx-stone-luxury-ensuite-install-kiwitile"]) .layout-art,
  .kt-stone-carousel .kt-fly-card.is-detail:has(.type-image[src*="onyx-stone-luxury-ensuite-install-kiwitile"]) .layout-art{
    width:46%;
    flex-basis:46%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kt-cylinder,
  .kt-card,
  .kt-fly-card,
  .kt-fly-card *,
  .kt-focus-layer,
  .kt-shell.is-detail-open .kt-cylinder {
    transition-duration: 1ms !important;
    animation: none !important;
  }

  .kt-cylinder {
    will-change: auto;
  }
}