/* ============================================================
   XINIX — "The Works".

   Two temperatures on one page. The brand runs dark and
   cinematic; the catalogue and the paperwork run light and
   technical, the way a real specification sheet does. The
   switch between them is the point — it is what makes both
   feel deliberate instead of default.

   The spine is a gait line: a measured rail down the page with
   distance ticks, the way a gait-training walkway is marked out
   on a clinic floor. Scrolling the page is walking the line.
   ============================================================ */

:root {
  --nav-h: 77px;   /* measured at runtime by motion.js */
  /* dark half */
  --void:      #04070E;
  --stage:     #0A1020;
  --riser:     #101A31;
  --raise:     #17233F;

  --ink:       #F4F7FF;
  --ink-2:     rgba(226,235,255,0.72);
  --ink-3:     rgba(226,235,255,0.46);
  --ink-4:     rgba(226,235,255,0.26);

  --line:      rgba(140,170,235,0.16);
  --line-2:    rgba(140,170,235,0.30);

  /* light half */
  --paper:     #F4F3EF;
  --paper-2:   #E9E7E1;
  --paper-3:   #DCD9D1;
  --p-ink:     #0C1322;
  --p-ink-2:   rgba(12,19,34,0.64);
  --p-ink-3:   rgba(12,19,34,0.40);
  --p-line:    rgba(12,19,34,0.14);
  --p-line-2:  rgba(12,19,34,0.26);

  /* brand */
  --navy:      #263A74;
  --navy-lift: #3E5AAE;
  --ember:     #DF522C;
  --ember-lift:#F5794E;
  --ember-deep:#A93B1B;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display: "Sora", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  --rail-w: 74px;
  --gut: clamp(20px, 5vw, 74px);
  --maxw: 1560px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--ember); color: #fff; }
:focus-visible { outline: 2px solid var(--ember-lift); outline-offset: 3px; }

/* ───────────────── type ───────────────── */
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.03em; }
p { margin: 0; }

.d1 { font-size: clamp(46px, 8.6vw, 132px); font-weight: 800; line-height: 0.94; }
.d2 { font-size: clamp(34px, 5.4vw, 78px);  font-weight: 800; line-height: 1.02; }
.d3 { font-size: clamp(23px, 2.5vw, 34px);  font-weight: 700; line-height: 1.14; }

.lede { font-size: clamp(16.5px, 1.5vw, 21px); line-height: 1.62; color: var(--ink-2); max-width: 58ch; }
.paper .lede { color: var(--p-ink-2); }

.tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember-lift);
  display: inline-flex; align-items: center; gap: 12px;
}
.tag::before { content: ""; width: 30px; height: 1px; background: var(--ember); flex: none; }
.paper .tag { color: var(--ember-deep); }
.paper .tag::before { background: var(--ember-deep); }

.code {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.paper .code { color: var(--p-ink-3); }

/* ───────────────── shell + the gait line ───────────────── */
.shell { position: relative; }
.wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding-left: var(--gut); padding-right: var(--gut);
}

/* the rail: a measured walkway edge, ticked every "metre" */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w);
  z-index: 40; pointer-events: none; display: none;
  border-right: 1px solid var(--line);
  background:
    repeating-linear-gradient(180deg,
      transparent 0 39px,
      var(--line) 39px 40px);
  mix-blend-mode: normal;
}
.rail::after {                      /* travelled distance, filled as you scroll */
  content: ""; position: absolute; right: -1px; top: 0; width: 1px;
  height: var(--travel, 0%); background: var(--ember);
  box-shadow: 0 0 14px 1px rgba(223,82,44,0.55);
}
.rail b {
  position: absolute; left: 50%; bottom: 34px;
  transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.rail i {
  position: absolute; left: 50%; top: 28px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ember-lift); font-variant-numeric: tabular-nums;
}
@media (min-width: 1180px) {
  .rail { display: block; }
  .shell { padding-left: var(--rail-w); }
}

/* sections carry their own temperature */
.sec { position: relative; padding: clamp(72px, 11vw, 168px) 0; }
.sec--tight { padding-top: clamp(40px, 5vw, 70px); }
.paper { background: var(--paper); color: var(--p-ink); }
.paper h1, .paper h2, .paper h3 { color: var(--p-ink); }

/* a big ghosted numeral marks each movement of the page */
.sec > .ghost {
  position: absolute; right: clamp(-10px, 1vw, 30px); top: clamp(20px, 4vw, 60px);
  font-family: var(--display); font-weight: 800; font-size: clamp(120px, 20vw, 300px);
  line-height: 1; letter-spacing: -0.05em; pointer-events: none;
  color: rgba(226,235,255,0.035);
}
.paper > .ghost { color: rgba(12,19,34,0.045); }

/* grain + vignette give the dark half some material */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>");
}

/* ───────────────── buttons ───────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--body); font-size: 14.5px; font-weight: 600;
  padding: 15px 26px; border-radius: 2px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--go { background: var(--ember); color: #fff; box-shadow: 0 10px 30px -8px rgba(223,82,44,0.6); }
.btn--go:hover { background: var(--ember-lift); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); }
.paper .btn--ghost { border-color: var(--p-line-2); color: var(--p-ink); }
.paper .btn--ghost:hover { border-color: var(--p-ink); }

/* ───────────────── nav ───────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  padding: 16px var(--gut);
  background: rgba(4,7,14,0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.nav .brand img { height: 30px; }
.nav .brand b { font-family: var(--display); font-weight: 700; letter-spacing: 0.17em; font-size: 15px; }
.nav .links { display: none; gap: 28px; }
.nav .links a { text-decoration: none; color: var(--ink-2); font-size: 14px; transition: color .14s; }
.nav .links a:hover { color: var(--ink); }
.nav .tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .tel svg { color: var(--ember-lift); flex: none; }
.nav .tel span { display: flex; flex-direction: column; line-height: 1.14; }
.nav .tel i { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.nav .tel b { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.nav .tel:hover b { color: var(--ember-lift); }
.nav .wa {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #12A854; color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 11px 18px; border-radius: 2px;
}
@media (min-width: 1000px) { .nav .links { display: flex; } }
@media (max-width: 719px) {
  .nav { gap: 12px; }
  .nav .tel i { display: none; }
  .nav .tel b { font-size: 13px; }
  .nav .wa span { display: none; }
  .nav .wa { padding: 11px 13px; }
}

/* ═══════════════ HERO ═══════════════ */
.hero { position: relative; min-height: min(94vh, 940px); display: flex; align-items: stretch;
        background: var(--void); overflow: hidden; }
.hero .bed { position: absolute; inset: 0; z-index: 0; }
.hero .bed::after {                     /* keeps type legible over any footage */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, var(--void) 4%, rgba(4,7,14,0.86) 38%, rgba(4,7,14,0.30) 72%, rgba(4,7,14,0.66)),
    radial-gradient(76% 60% at 62% 34%, rgba(62,90,174,0.30), transparent 70%),
    radial-gradient(90% 70% at 40% 110%, rgba(223,82,44,0.20), transparent 62%);
}
.hero .inner {
  position: relative; z-index: 3; width: 100%;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(30px, 6vw, 74px) var(--gut) clamp(28px, 4vw, 54px);
  display: grid; align-content: center; gap: clamp(20px, 3vw, 34px);
}
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--ember-lift); }
.hero .under { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .meta {
  display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 6px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
.hero .meta span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
                   text-transform: uppercase; color: var(--ink-3); }
.hero .meta span b { color: var(--ink); font-weight: 600; }

/* the model rides inside the hero, not beside it */
.hero .rig { position: absolute; inset: 0; z-index: 1; }
.hero .rig canvas { width: 100%; height: 100%; display: block; }
@media (min-width: 1000px) {
  .hero .rig { left: 34%; }
  .hero .inner { padding-right: 42%; }
}
@media (max-width: 999px) {
  .hero { min-height: 0; }
  .hero .inner { padding-bottom: clamp(300px, 54vw, 420px); }
  .hero .rig { top: auto; height: clamp(290px, 52vw, 410px); }
}

.scrollcue {
  position: absolute; left: var(--gut); bottom: 20px; z-index: 4;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.scrollcue::after { content: ""; width: 44px; height: 1px; background: var(--line-2); }

/* ═══════════════ MEDIA SLOTS ═══════════════ */
.slot {
  position: relative; overflow: hidden; margin: 0;
  background: var(--riser); border: 1px solid var(--line);
  aspect-ratio: var(--ar, 4 / 3);
}
.paper .slot { background: var(--paper-2); border-color: var(--p-line); }
.slot > img, .slot > video { width: 100%; height: 100%; object-fit: cover; }
.slot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 26px 18px 14px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  background: linear-gradient(transparent, rgba(4,7,14,0.88));
}
.slot.is-filled figcaption { color: #fff; }

/* the designed empty state — a blueprint plate, not a broken box */
.slot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0;
  transition: opacity .3s ease;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  background-position: center;
}
.slot:not(.is-filled)::before { opacity: 1; }
.paper .slot::before {
  background-image:
    linear-gradient(var(--p-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--p-line) 1px, transparent 1px);
}
.slot .plate {
  position: absolute; inset: 0; z-index: 2; display: grid;
  place-content: center; justify-items: center; gap: 12px; text-align: center;
  padding: 20px; transition: opacity .3s ease;
}
.slot.is-filled .plate { opacity: 0; pointer-events: none; }
.slot .plate svg { width: clamp(52px, 8vw, 92px); height: auto; color: var(--ink-4); }
.paper .slot .plate svg { color: var(--p-ink-3); }
.slot .plate b {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
}
.paper .slot .plate b { color: var(--p-ink-3); }

/* ?media — show which filename each hole is waiting for */
.slot-debug { display: none; }
.media-debug .slot-debug {
  display: block; position: absolute; z-index: 9; left: 8px; top: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  background: var(--ember); color: #fff; padding: 5px 8px; border-radius: 2px;
  text-transform: none;
}

/* ═══════════════ FIGURES — numbers that behave like numbers ═══════════════ */
.figs { display: grid; gap: 1px; background: var(--line);
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fig { background: var(--void); padding: clamp(26px, 3vw, 44px) clamp(18px, 2vw, 30px); }
.fig .v {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.05em;
  font-size: clamp(52px, 7.6vw, 116px); line-height: 0.9;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(168deg, var(--ink) 30%, rgba(140,170,235,0.55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fig:first-child .v { background: linear-gradient(168deg, var(--ember-lift), var(--ember-deep));
                      -webkit-background-clip: text; background-clip: text; color: transparent; }
.fig .k { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); line-height: 1.45; max-width: 22ch; }

/* ═══════════════ DOORS — asymmetric, not three equal boxes ═══════════════ */
.doors { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 52px); }
@media (min-width: 940px) { .doors { grid-template-columns: 1.24fr 1fr 1fr; } }
.door {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(26px, 2.6vw, 40px); text-decoration: none; overflow: hidden;
  background: linear-gradient(168deg, var(--riser), var(--stage));
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.door:hover { border-color: var(--ember); transform: translateY(-3px); }
.door::after {                       /* ember wash that wakes on hover */
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(120% 90% at 0% 100%, rgba(223,82,44,0.20), transparent 62%);
}
.door:hover::after { opacity: 1; }
.door > * { position: relative; z-index: 1; }
.door .n {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  color: var(--ember); letter-spacing: 0.1em;
}
.door h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 700; }
.door p { font-size: 14.8px; line-height: 1.58; color: var(--ink-3); }
.door .go {
  margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--ember-lift);
  display: inline-flex; gap: 9px; align-items: center;
}
.door:hover .go { gap: 15px; }
.door .go { transition: gap .2s ease; }
.door--lead { justify-content: flex-end; min-height: clamp(300px, 30vw, 400px); }
.door--lead .slot { position: absolute; inset: 0; z-index: 0; border: 0; aspect-ratio: auto; }
.door--lead .slot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 8%, rgba(10,16,32,0.92) 76%);
}
.door--lead h3 { font-size: clamp(24px, 2.4vw, 33px); }

/* ═══════════════ PRODUCT THEATRE ═══════════════ */
.theatre { position: relative; }
.act {
  position: relative; display: grid; gap: clamp(24px, 3vw, 44px);
  align-items: center; padding: clamp(40px, 6vw, 86px) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 980px) {
  .act { grid-template-columns: 0.86fr 1.14fr; }
  .act:nth-child(even) > .act-copy { order: 2; }
}
.act-stage { position: relative; aspect-ratio: 4 / 3; }
.act-stage canvas { width: 100%; height: 100%; display: block; }
.act-stage .frame {                   /* engineering crop marks */
  position: absolute; inset: 0; pointer-events: none;
}
.act-stage .frame span { position: absolute; width: 16px; height: 16px; border: 1px solid var(--line-2); }
.act-stage .frame span:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.act-stage .frame span:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.act-stage .frame span:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.act-stage .frame span:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.act h3 { font-size: clamp(26px, 3.2vw, 46px); font-weight: 800; }
.act .sku { margin-top: 12px; }
.act p { margin-top: 16px; font-size: 15.5px; line-height: 1.62; color: var(--ink-3); max-width: 46ch; }
.act .dims { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.act .dims b {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-2); border: 1px solid var(--line); padding: 7px 11px; border-radius: 2px;
}
.act .hint { margin-top: 20px; font-family: var(--mono); font-size: 10px;
             letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-4); }

/* ═══════════════ CATALOGUE — the shop window (light) ═══════════════ */
.goals { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 48px);
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.goal {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: var(--p-ink); overflow: hidden;
  background: #fff; border: 1px solid var(--p-line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.goal:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -22px rgba(12,19,34,0.42); }
.goal .slot { border: 0; border-bottom: 1px solid var(--p-line); --ar: 16 / 10; }
.goal .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.goal .n { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
           text-transform: uppercase; color: var(--ember-deep); }
.goal h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.goal .c {
  margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; gap: 8px;
  border-top: 1px solid var(--p-line);
}
.goal .c b { font-family: var(--display); font-size: 30px; font-weight: 800;
             letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.goal .c span { font-size: 13px; color: var(--p-ink-3); }

/* ═══════════════ THE WORKS — process strip ═══════════════ */
.process { display: grid; gap: 10px; margin-top: clamp(26px, 4vw, 46px);
           grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.step { position: relative; }
.step .slot { --ar: 3 / 4; }
.step .lab { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.step .lab b { font-family: var(--mono); font-size: 10px; color: var(--ember-lift); font-weight: 600; }
.step .lab span { font-size: 14px; font-weight: 600; }
.step .lab em { font-style: normal; font-size: 12.5px; color: var(--ink-3); display: block; margin-top: 2px; }

/* ═══════════════ HOLDS ═══════════════ */
.holds { display: grid; gap: 1px; background: var(--line); margin-top: clamp(26px, 4vw, 46px);
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hold { background: var(--void); padding: clamp(24px, 2.4vw, 36px); }
.hold .i { color: var(--ember); margin-bottom: 18px; display: block; }
.hold h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.hold p { font-size: 14.5px; line-height: 1.58; color: var(--ink-3); }

/* ═══════════════ TENDER (light, document-like) ═══════════════ */
.docgrid { display: grid; gap: clamp(26px, 4vw, 54px); align-items: start; }
@media (min-width: 940px) { .docgrid { grid-template-columns: 1.05fr 0.95fr; } }
.sheet { background: #fff; border: 1px solid var(--p-line); padding: clamp(24px, 3vw, 40px); }
.sheet .hd { display: flex; justify-content: space-between; align-items: baseline;
             border-bottom: 2px solid var(--p-ink); padding-bottom: 14px; margin-bottom: 4px; }
.sheet .hd b { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--p-line);
                       vertical-align: baseline; }
.sheet th { font-size: 12.5px; font-weight: 500; color: var(--p-ink-2); width: 46%; }
.sheet td { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--p-ink); }
.sheet tr:last-child th, .sheet tr:last-child td { border-bottom: 0; }

.callback { margin-top: 30px; max-width: 460px; }
.callback > label { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 10px;
                    letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-ink-3); }
.callback .row { display: flex; gap: 10px; flex-wrap: wrap; }
.callback input {
  flex: 1 1 190px; min-width: 0; background: #fff; border: 1px solid var(--p-line-2);
  border-radius: 2px; padding: 13px 15px; color: var(--p-ink);
  font-family: var(--mono); font-size: 14px;
}
.callback input::placeholder { color: var(--p-ink-3); }
.callback input[aria-invalid="true"] { border-color: var(--ember); }
.callback button {
  flex: none; cursor: pointer; background: var(--ember); color: #fff; border: 0; border-radius: 2px;
  padding: 13px 22px; font-size: 13.5px; font-weight: 700; font-family: inherit;
}
.callback button:hover { background: var(--ember-lift); }
.callback .note { margin-top: 10px; font-size: 12.5px; color: var(--p-ink-3); line-height: 1.5; }

/* ═══════════════ CLOSER + FOOTER ═══════════════ */
.closer { position: relative; overflow: hidden; background: var(--void); }
.closer .bed { position: absolute; inset: 0; }
.closer .bed .slot { position: absolute; inset: 0; border: 0; aspect-ratio: auto; }
.closer .bed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,7,14,0.72), rgba(4,7,14,0.92)),
              radial-gradient(70% 60% at 50% 100%, rgba(223,82,44,0.22), transparent 68%);
}
.closer .inner { position: relative; z-index: 2; text-align: center;
                 padding: clamp(70px, 10vw, 150px) var(--gut); }
.closer h2 { margin: 0 auto; max-width: 18ch; }
.closer .under { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

.foot { border-top: 1px solid var(--line); padding: 34px 0 44px; }
.foot .r { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: space-between;
           align-items: baseline; }
.foot a { color: var(--ink-3); text-decoration: none; font-size: 13.5px; }
.foot a:hover { color: var(--ember-lift); }
.foot .tel { color: var(--ink); font-family: var(--mono); font-weight: 600; font-size: 14px; }
.foot .sitemap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
                 line-height: 2.1; font-size: 12.5px; }
.foot .sitemap a { font-size: 12.5px; }

/* ═══════════════ floating contact ═══════════════ */
.float { position: fixed; right: 16px; bottom: 16px; z-index: 80;
         display: flex; flex-direction: column; gap: 10px; }
.float a { display: grid; place-content: center; width: 52px; height: 52px; border-radius: 50%;
           box-shadow: 0 10px 26px rgba(0,0,0,0.5); transition: transform .15s ease; }
.float a:hover { transform: translateY(-3px); }
.float .wa { background: #12A854; color: #fff; }
.float .tel { background: var(--raise); color: var(--ink); border: 1px solid var(--line-2); }

/* ═══════════════ reveal ═══════════════ */
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; }
  * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Corrections after first look
   ═══════════════════════════════════════════════════════════ */

/* A slot used as a whole-section backdrop is not a card: it must not
   draw the blueprint plate, because graph paper behind an entire hero
   reads as an unfinished wireframe rather than as a waiting photograph. */
.slot--bleed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; aspect-ratio: auto; background: transparent;
}
.slot--bleed::before { display: none; }
.slot--bleed .plate { display: none; }
.slot--bleed figcaption { display: none; }
.media-debug .slot--bleed .slot-debug { display: block; }

/* the lead door only becomes a photo card once it actually has a photo */
.door--lead { min-height: 0; }
.door--lead:has(.slot.is-filled) { min-height: clamp(300px, 30vw, 400px); }

/* hero meta must wrap, never clip */
.hero .meta span { white-space: normal; }

@media (max-width: 999px) {
  /* One variable drives both the space reserved for the model and the model's
     own height, so they can never drift apart and leave a dead gap. */
  .hero { --rig-h: clamp(250px, 46vw, 360px); padding-bottom: 0; }
  .hero .inner { padding-bottom: var(--rig-h); gap: 16px; }
  .hero .rig { height: var(--rig-h); }
  .hero .meta { display: none; }   /* all of it is repeated further down the page */
  .scrollcue { display: none; }
}
@media (max-width: 719px) {
  .hero .d1 { font-size: 42px; }
  .hero .lede { font-size: 16px; max-width: 34ch; }
  .hero .under .btn { flex: 1 1 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   KINETIC — the page as a sequence, not a document
   ═══════════════════════════════════════════════════════════════════ */

/* line-mask reveals */
.kline { display: block; overflow: hidden; }
.kline-i { display: block; transform: translateY(104%); transition:
           transform .95s cubic-bezier(.16,.84,.28,1); will-change: transform; }
.kin-in .kline-i { transform: none; }
.kw { display: inline-block; }
[data-kinetic]:not(.is-split) { opacity: 1; }

/* ── hero: 3D full-bleed, type living ON it ─────────────────────── */
.stagehero { position: relative; height: auto; }
.kin .stagehero { height: 260vh; }          /* the scroll runway */
.stagehero .pin { position: relative; min-height: 88vh; overflow: hidden; }
.kin .stagehero .pin { position: sticky; top: 0; height: 100vh; }
.stagehero .rig { position: absolute; inset: 0; z-index: 1; }
.stagehero .rig canvas { width: 100%; height: 100%; display: block; }
.stagehero .bed { position: absolute; inset: 0; z-index: 0; }
.stagehero .veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(58% 52% at 22% 46%, rgba(4,7,14,0.90), transparent 72%),
    linear-gradient(180deg, rgba(4,7,14,0.72) 0%, transparent 26%, transparent 62%, rgba(4,7,14,0.94) 100%);
}
.stagehero .type {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; top: 0;
  display: grid; align-content: center; gap: 22px;
  padding: 0 var(--gut); max-width: var(--maxw); margin: 0 auto;
  pointer-events: none;
}
.stagehero .type > * { pointer-events: auto; }
.stagehero h1 {
  font-size: clamp(48px, 10.4vw, 178px); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.045em; max-width: 13ch;
  text-shadow: 0 6px 60px rgba(4,7,14,0.6);
}
.stagehero h1 em { font-style: normal; color: var(--ember); }
/* the second half of the promise, outlined rather than filled */
.hollow {
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
@supports not ((-webkit-text-stroke: 1px red)) { .hollow { color: var(--ink); } }

.stagehero .sub { max-width: 44ch; }
.stagehero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* wireframe beat */
.stagehero .blueprint {
  position: absolute; z-index: 3; right: var(--gut); bottom: 84px;
  display: grid; gap: 7px; justify-items: end; opacity: 0;
  transition: opacity .5s ease; pointer-events: none;
}
.stagehero.is-wire .blueprint { opacity: 1; }
.stagehero .blueprint b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ember-lift);
  border: 1px solid rgba(223,82,44,0.42); padding: 7px 11px;
  background: rgba(4,7,14,0.6);
}
.stagehero .modeflag {
  position: absolute; z-index: 4; left: var(--gut); bottom: 34px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-3);
}
.stagehero .modeflag::after { content: "Product"; color: var(--ink); margin-left: 10px; }
.stagehero.is-wire .modeflag::after { content: "Blueprint"; color: var(--ember-lift); }

.dragcue {
  position: absolute; z-index: 4; right: var(--gut); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-4);
}

/* ── marquee of controlled codes ─────────────────────────────────── */
.marq { overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0;
        background: var(--void); }
.marq-i { display: flex; gap: 44px; width: max-content; animation: marq 42s linear infinite; }
.marq span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
             text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.marq span b { color: var(--ember); font-weight: 600; }
@keyframes marq { to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .marq-i { animation: none; } }

/* ── oversized statement type that breaks the grid ───────────────── */
.shout { position: relative; padding: clamp(60px,9vw,140px) 0; overflow: hidden; }
.shout h2 {
  font-size: clamp(46px, 12vw, 210px); line-height: 0.86; font-weight: 800;
  letter-spacing: -0.05em; white-space: nowrap;
}
.shout .row2 { margin-left: clamp(20px, 12vw, 260px); }
.shout .note { max-width: 40ch; margin-top: 36px; margin-left: auto; }

/* ── sticky theatre ──────────────────────────────────────────────── */
.theatre-pin { position: relative; height: auto; }
.kin .theatre-pin { height: 320vh; }
.theatre-pin .pin { position: relative; display: grid; align-items: center; padding: 60px 0; }
.kin .theatre-pin .pin { position: sticky; top: 0; height: 100vh; padding: 0; }
.theatre-pin .grid {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: grid; gap: clamp(20px,4vw,60px); align-items: center;
}
@media (min-width: 980px) { .theatre-pin .grid { grid-template-columns: 0.82fr 1.18fr; } }
.theatre-pin .stage { position: relative; height: min(60vh, 560px); }
.theatre-pin .stage canvas { width: 100%; height: 100%; display: block; }
.chapters { position: relative; min-height: 300px; }
.chapter { position: static; opacity: 1; }
.kin .chapter {
  position: absolute; inset: 0; opacity: 0; transform: translateY(26px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  pointer-events: none; display: grid; align-content: center; gap: 14px;
}
.chapter.on { opacity: 1; transform: none; pointer-events: auto; }
.chapter h3 { font-size: clamp(28px, 4vw, 58px); font-weight: 800; letter-spacing: -0.035em; }
.chapter p { color: var(--ink-3); font-size: 16px; line-height: 1.6; max-width: 40ch; }
.chapter .dims { display: flex; gap: 8px; flex-wrap: wrap; }
.chapter .dims b { font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2); border: 1px solid var(--line); padding: 7px 11px; }
.chapdots { display: flex; gap: 8px; margin-top: 8px; }
.chapdots i { width: 26px; height: 2px; background: var(--line-2); display: block; }
.chapdots i.on { background: var(--ember); }
@media (max-width: 979px) {
  .theatre-pin { height: auto; }
  .theatre-pin .pin { position: static; height: auto; padding: 60px 0; }
  .theatre-pin .stage { height: 54vw; min-height: 280px; }
  .chapters { min-height: 0; }
  .chapter { position: static; opacity: 1; transform: none; pointer-events: auto;
             padding-top: 22px; border-top: 1px solid var(--line); margin-top: 22px; }
}

/* ── horizontal rail ─────────────────────────────────────────────── */
.hrail { position: relative; height: auto; }
.kin .hrail { height: 300vh; }
.hrail .pin { position: relative; display: grid; align-content: center; overflow: hidden; padding: 60px 0; }
.kin .hrail .pin { position: sticky; top: 0; height: 100vh; padding: 0; }
.hrail .head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 32px; width: 100%; }
.hrail .view { overflow: hidden; padding-left: var(--gut); }
.hrail-track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.hrail .card { width: clamp(240px, 27vw, 360px); flex: none; }
@media (max-width: 979px) {
  .hrail { height: auto; }
  .hrail .pin { position: static; height: auto; padding: 60px 0; }
  .hrail .view { overflow-x: auto; scroll-snap-type: x mandatory;
                 -webkit-overflow-scrolling: touch; padding-bottom: 14px; }
  .hrail-track { transform: none !important; padding-right: var(--gut); }
  .hrail .card { scroll-snap-align: start; }
}

/* ── ember slab: the accent finally gets to be loud ──────────────── */
.slab { background: var(--ember); color: #fff; position: relative; overflow: hidden; }
.slab h2 { color: #fff; }
.slab .lede, .slab p { color: rgba(255,255,255,0.86); }
.slab .tag { color: rgba(255,255,255,0.9); }
.slab .tag::before { background: rgba(255,255,255,0.9); }
.slab .btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.slab .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.slab .btn--go { background: #fff; color: var(--ember-deep); box-shadow: none; }
.slab .ghost { color: rgba(255,255,255,0.10); }
.slab .figs { background: rgba(255,255,255,0.28); }
.slab .fig { background: var(--ember); }
.slab .fig .v { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.slab .fig:first-child .v { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.slab .fig .k { color: rgba(255,255,255,0.8); }

/* ── cursor affordance on anything draggable ─────────────────────── */
[data-model3d] canvas { cursor: grab; }
[data-model3d] canvas:active { cursor: grabbing; }

/* ── section wipe: light panels rise over the dark ───────────────── */
.wipe { position: relative; z-index: 2; border-radius: 0; }
.paper.wipe { box-shadow: 0 -40px 80px -30px rgba(0,0,0,0.6); }

/* stacked stages that cross-fade as the chapters change */
.theatre-pin .stage .stg { position: static; height: 46vh; min-height: 260px; }
.kin .theatre-pin .stage .stg {
  position: absolute; inset: 0; height: auto; min-height: 0; opacity: 0; transform: scale(0.97);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.theatre-pin .stage .stg.on { opacity: 1; transform: none; pointer-events: auto; }
.theatre-pin .stage .stg canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 979px) {
  /* no pinning on a phone: each product simply stacks with its own model */
  .theatre-pin .stage { position: static; height: auto; }
  .theatre-pin .stage .stg {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    height: 54vw; min-height: 260px; margin-bottom: 8px;
  }
  .theatre-pin .grid { grid-template-columns: 1fr; }
  .chapdots { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Fix: type and 3D were sharing the same space and colliding.
   The model gets its own column and bleeds off the right edge; the
   veil feathers the seam so it still reads as one immersive field
   rather than a picture box sitting beside a paragraph.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .stagehero .rig { left: 46%; right: 0; }
  .stagehero .type { padding-right: 52%; }
  .stagehero .veil {
    background:
      linear-gradient(90deg, var(--void) 28%, rgba(4,7,14,0.88) 42%, rgba(4,7,14,0.18) 58%, transparent 76%),
      linear-gradient(180deg, rgba(4,7,14,0.55) 0%, transparent 22%, transparent 68%, rgba(4,7,14,0.92) 100%);
  }
  .stagehero h1 { max-width: 11ch; }
}
@media (max-width: 999px) {
  /* stacked: copy first, model in a clear band beneath it */
  .kin .stagehero { height: auto; }
  .kin .stagehero .pin { position: static; height: auto; }
  .stagehero .pin { display: grid; min-height: 0; }
  .stagehero .type { position: static; align-content: start;
    padding: clamp(26px,7vw,54px) var(--gut) clamp(18px,4vw,28px); }
  .stagehero .rig { position: static; height: clamp(250px, 46vw, 360px); }
  .stagehero .bed, .stagehero .veil { display: none; }
  .stagehero .blueprint { position: static; justify-items: start;
                          padding: 18px var(--gut) 26px; opacity: 1; }
  .stagehero .modeflag, .stagehero .dragcue { display: none; }
}

/* the oversized statement must never be clipped or force a sideways scroll */
.shout h2 { white-space: normal; }
@media (min-width: 900px) { .shout h2 { white-space: nowrap; } }

/* keep the hero's corner labels clear of the floating call buttons */
.stagehero .blueprint { right: calc(var(--gut) + 78px); }

/* the mode flag belongs under the model it describes, not under the copy */
@media (min-width: 1000px) {
  .stagehero .modeflag { left: auto; right: var(--gut); bottom: 26px; }
  .stagehero .blueprint { bottom: 60px; }
}

/* the drag affordance reads as a control, not as text spilled on the model */
.dragcue {
  writing-mode: horizontal-tb; right: auto; top: auto;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  background: rgba(4,7,14,0.62); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 999px; color: var(--ink-3);
  backdrop-filter: blur(6px); letter-spacing: 0.22em;
}
@media (min-width: 1000px) { .stagehero .dragcue { left: 73%; } }
.theatre-pin .stage .dragcue { left: 50%; }
.specnote { font-size: 13px; color: var(--ink-4); margin-top: 2px; }

/* The headline now lives in a half-width column, so it must be sized against
   that column rather than the whole viewport — otherwise it grows taller than
   the pinned screen and clips at the top. */
@media (min-width: 1000px) {
  .stagehero h1 { font-size: clamp(40px, 6.2vw, 116px); max-width: 12ch; }
  .stagehero .type { gap: 18px; }
  .stagehero .lede { font-size: clamp(15px, 1.15vw, 18px); }
}
@media (min-width: 1000px) and (max-height: 780px) {
  .stagehero h1 { font-size: clamp(36px, 5vw, 84px); }
}

/* ═══════════════════════════════════════════════════════════════════
   Phones never pin. The .kin rules that enable desktop choreography
   are more specific than the plain mobile layout rules, so they have
   to be undone at the same specificity or the sticky behaviour leaks
   onto a phone and stacks chapters on top of each other and the model.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 979px) {
  .kin .theatre-pin { height: auto; }
  .kin .theatre-pin .pin { position: static; height: auto; padding: 56px 0; }
  .kin .theatre-pin .grid { grid-template-columns: 1fr; }
  .kin .theatre-pin .stage { position: static; height: auto; }
  .kin .theatre-pin .stage .stg {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    height: 54vw; min-height: 250px; margin-bottom: 10px;
  }
  .kin .chapter {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line);
  }
  .kin .chapters { min-height: 0; }
  .kin .chapdots { display: none; }

  .kin .hrail { height: auto; }
  .kin .hrail .pin { position: static; height: auto; padding: 56px 0; }
  .kin .hrail-track { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX: the statement type was set to never wrap, inside a section that
   hides its overflow — so on a wide screen the line simply ran off the
   edge and was sliced in half. Big type must still fit the page: let it
   wrap, and cap the size so it stays a statement rather than a puzzle.
   ═══════════════════════════════════════════════════════════════════ */
.shout h2 { white-space: normal !important; overflow-wrap: break-word; }
.shout { overflow: visible; }
.shout h2 { font-size: clamp(38px, 7.6vw, 116px); line-height: 0.92; max-width: 15ch; }
.shout .row2 { margin-left: clamp(0px, 6vw, 130px); max-width: 15ch; }
.shout .note { margin-top: clamp(26px, 3vw, 44px); }
@media (min-width: 1500px) { .shout h2 { font-size: 118px; } }

/* ═══════════════════════════════════════════════════════════════════
   FIX: the chapters were cross-fading in place, so during every
   transition two blocks of text sat directly on top of each other and
   read as doubled. Hand over instead of cross-fade — the outgoing one
   is gone before the incoming one arrives, and visibility is switched
   outright so two are never live at once.
   ═══════════════════════════════════════════════════════════════════ */
.kin .chapter {
  visibility: hidden;
  transition: opacity .17s ease, transform .34s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .17s;
}
.kin .chapter.on {
  visibility: visible;
  transition: opacity .30s ease .17s, transform .44s cubic-bezier(.2,.7,.3,1) .17s,
              visibility 0s linear 0s;
}
/* same hand-over for the stacked models, so they never ghost through each other */
.kin .theatre-pin .stage .stg {
  visibility: hidden;
  transition: opacity .20s ease, transform .40s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .20s;
}
.kin .theatre-pin .stage .stg.on {
  visibility: visible;
  transition: opacity .34s ease .18s, transform .5s cubic-bezier(.2,.7,.3,1) .18s,
              visibility 0s linear 0s;
}
@media (max-width: 979px) {
  .kin .chapter, .kin .theatre-pin .stage .stg { visibility: visible; transition: none; }
}

/* A stat band with no statistics: the value slot now carries a short phrase
   rather than a count, so it needs a smaller size and room to wrap. */
.figs--words .fig .v {
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.figs--words .fig .k { margin-top: 12px; }

/* the catalogue card's bottom row is a cue now, not a number */
.goal .c span { font-size: 13.5px; color: var(--ember-deep); font-weight: 600; }

/* Header wordmark: the full registered name, stacked under the mark.
   The second line is deliberately small and widely tracked so the
   lockup reads as one unit rather than two competing words. */
.nav .brand b.wm { display: flex; flex-direction: column; justify-content: center; line-height: 1; gap: 4px; }
.nav .brand b.wm span:first-child { font-size: 15px; letter-spacing: 0.17em; }
.nav .brand b.wm span:last-child {
  font-size: 8.5px; letter-spacing: 0.30em; font-weight: 600;
  text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 420px) { .nav .brand b.wm span:last-child { display: none; } }

/* Tender section, right column. The compliance sheet used to sit here; the
   call-back panel now holds the column instead, given the same paper-card
   treatment so the row still reads as two deliberate blocks. */
.tenderside { align-self: stretch; display: flex; align-items: flex-end; }
.tenderside .callback {
  margin-top: 0; max-width: none; width: 100%;
  background: #fff; border: 1px solid var(--p-line);
  padding: clamp(24px, 3vw, 36px);
}
.tenderside .callback > label { font-size: 10.5px; color: var(--p-ink-2); }
@media (max-width: 939px) { .tenderside .callback { padding: 24px; } }

/* ═══════════════ PINNED PANELS vs THE STICKY NAV ═══════════════
   .nav is position:sticky;top:0, and these panels were sticky;top:0
   with height:100vh — so a panel's vertically-centred content was
   being laid out under the nav and then clipped by overflow:hidden.
   The panels now start below the nav and are exactly as tall as the
   space that remains, and the rail's contents are sized against that
   height (vh) as well as width (vw) so they still fit on a short
   laptop viewport instead of overflowing the pin. */
.kin .hrail .pin,
.kin .theatre-pin .pin { top: var(--nav-h); height: calc(100vh - var(--nav-h)); }

.kin .hrail .head h2   { font-size: clamp(30px, min(5.4vw, 6.4vh), 68px); }
.kin .hrail .head .lede{ font-size: clamp(15px, min(1.5vw, 2.0vh), 20px); }
.kin .hrail .head      { padding-bottom: clamp(14px, 2.4vh, 32px); }
.kin .hrail .card .slot{ aspect-ratio: auto; height: clamp(118px, 21vh, 224px); }

/* Very short viewport: there is no height left to pin into, so fall back to
   the same treatment the narrow breakpoint uses — un-pin and let the rail
   scroll horizontally — rather than clipping the panel. */
@media (max-height: 600px) and (min-width: 980px) {
  .kin .hrail { height: auto; }
  .kin .hrail .pin,
  .kin .theatre-pin .pin { position: static; height: auto; padding: 48px 0; overflow: visible; }
  .kin .hrail .view { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 14px; }
  .kin .hrail-track { transform: none !important; padding-right: var(--gut); }
}