/* ==========================================================================
   Kloset Worx — Website CSS
   Italian-modernist atelier. The system from the brand manual, applied.
   ========================================================================== */

/* Tylko-style bold-sans type system. Geist 700/800 for display
   moments (not italic, not serif — bold confident sans is the
   register of tylko, Aesop's product pages, & similar quiet-
   luxury product brands). Geist Mono for caps and labels.
   Cormorant Garamond removed 2026-05-28: it was a wrong-register
   import (World of Interiors editorial), not tylko.
   Fonts moved out of @import 2026-06-09 → a parallel <link> in each page
   <head> (preceded by preconnect) so the font fetch no longer waits for
   site.css to download+parse. Keep both lists in sync if weights change. */

:root {
  /* Strong-white palette: bone is now pure white paper, bone-2 a
     barely-there neutral surface for contrast bands. Ink and terra
     unchanged — the accent carries the warmth now, not the ground. */
  --kw-bone: #ffffff;          /* strong white paper */
  --kw-bone-2: #f5f5f2;        /* faint neutral surface */
  --kw-paper: #ffffff;         /* still pure white where used */
  --kw-ink: #1d232c;
  --kw-ink-2: #2d3540;
  --kw-terra: #7a2f3a;
  --kw-terra-deep: #5e222c;
  --kw-rule: rgba(29, 35, 44, 0.14);
  --kw-rule-strong: rgba(29, 35, 44, 0.32);
  --kw-rule-on-ink: rgba(29, 35, 44, 0.14);

  --kw-sans: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --kw-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  /* --kw-serif removed 2026-05-28: pivoted to tylko-style bold sans
     for all display moments. Geist 700/800 carries the headlines. */

  --kw-max: 1440px;
  --kw-pad: 84px;
  --kw-pad-sm: 40px;
}

/* Page surface — warm cream so the editorial register reads
   immediately, not "tech-startup white". */
html, body { background: var(--kw-bone); }

/* CG-render mask: removed 2026-05-27.
   Replaced 1672137233327 and 1611048268330 site-wide with verified
   real photography (Thom Bradley FUJIFILM X-T2, Gabriel Rosenblut
   Sony A7 II). The mask block is no longer needed. */
/* Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Give every hash target a little breathing room so #06, #07, #subscribe,
   #inquire, etc. don't land jammed against the top of the viewport. */
[id] { scroll-margin-top: 28px; }

body {
  font-family: var(--kw-sans);
  font-size: 15px;
  /* 1.65 — magazine reading rhythm. The earlier 1.5 felt cramped at
     long-form scale; 1.65 opens the columns without inflating them. */
  line-height: 1.65;
  color: var(--kw-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11", "kern", "liga";
  text-rendering: optimizeLegibility;
}

/* Headings inherit slightly tighter rhythm; body keeps the openness. */
h1, h2, h3, h4, h5, h6 { line-height: 1.08; }

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

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

/* Type ----------------------------------------------------------------- */
/* Tracking philosophy:
     · oversize display    -0.038em → -0.030em   (optical tightening)
     · h2-scale headlines  -0.030em                (near-display)
     · h3                  -0.022em
     · h4 / dek            -0.014em → -0.008em
     · body                -0.003em                (almost zero)
     · mono caps           +0.18em → +0.34em       (positive, by scale)
   Where two values are listed the larger negative goes to the larger
   size — Geist needs more negative space at scale, less at body. */
.k-cap { font-family: var(--kw-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; }

.k-mono { font-family: var(--kw-mono); }

.k-body { font-size: 15px; line-height: 1.65; letter-spacing: -0.003em; }

.k-lede { font-size: 22px; line-height: 1.42; font-weight: 400; letter-spacing: -0.014em; }

.k-h2 { font-size: 56px; line-height: 1.02; font-weight: 500; letter-spacing: -0.032em; }

.k-h3 { font-size: 36px; line-height: 1.06; font-weight: 500; letter-spacing: -0.024em; }

.k-h4 { font-size: 22px; line-height: 1.18; font-weight: 500; letter-spacing: -0.014em; }

.k-hero {
  font-size: clamp(72px, 10vw, 156px);
  line-height: 0.88;
  font-weight: 500;
  letter-spacing: -0.042em;
}

.k-dot, .k-x { color: var(--kw-terra); }

/* SVG monogram — the stacked KX. K is currentColor (inherits ink);
   the bottom X is terra so the brand reads K-over-X with a strong
   accent on the X half. Matches the dot + the lowercase 'x' in the
   Worx wordmark for a single, repeated brand gesture. The SVG path
   carries stroke="currentColor" as a no-CSS fallback so the X never
   renders pure black; the class below overrides it to terra. */
.k-mark__x { stroke: var(--kw-terra) !important; }

/* ----- Magazine-cover display class -------------------------------------
   For the rare title that should read at cover scale — care, materials,
   studio. clamp(56, 9vw, 168). Tight tracking, generous line-height so
   the descenders never crowd a following dek line. */
.k-display {
  font-family: var(--kw-sans);
  font-size: clamp(56px, 9vw, 168px) !important;
  line-height: 0.92 !important;
  font-weight: 500;
  letter-spacing: -0.044em !important;
  text-wrap: balance;
  margin-bottom: 48px !important;
}
@media (max-width: 700px) {

  .k-display { font-size: clamp(48px, 13vw, 96px) !important; line-height: 0.95 !important; letter-spacing: -0.038em !important; }

}

/* ----- Drop-cap for essay openings ---------------------------------------
   Lives on the article's first paragraph. The initial letter floats
   left, scaled to roughly 4x the line-height, terra coloured, sitting
   on the baseline of the first body line. */
.k-drop::first-letter {
  font-family: var(--kw-sans);
  float: left;
  /* 4x line-height of the article ≈ 4 × (19 × 1.62) ≈ 123px desktop.
     Use em so it scales with whatever font-size the paragraph carries. */
  font-size: 6.2em;
  line-height: 0.86;
  font-weight: 500;
  color: var(--kw-terra);
  margin: 4px 14px 0 -4px;
  letter-spacing: -0.04em;
  /* Optical baseline lift — Geist's caps sit slightly above the
     baseline at this scale; nudging them down by a small em looks
     calmer than letting them drift up. */
  padding-top: 0.02em;
}
@media (max-width: 700px) {

  .k-drop::first-letter { font-size: 4.6em; margin-right: 10px; }

}

/* ----- Marginalia ---------------------------------------------------------
   Small italic note that lives in the right gutter of a 680px body
   column on desktop. Inline (italic, indented) below the host
   paragraph on mobile. */
.k-marg {
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kw-ink);
  opacity: 0.66;
}
@media (min-width: 1100px) {

  .k-marg {
    float: right;
    width: 200px;
    margin: 4px -240px 8px 24px;
    clear: right;
  }

}
@media (max-width: 1099px) {

  .k-marg {
    display: block;
    padding: 14px 18px;
    margin: 18px 0;
    border-left: 1px solid var(--kw-rule-strong);
  }

}

/* ----- Pull-quote ---------------------------------------------------------
   Centred, oversize, with a terra dot before and a small mono caps
   attribution after. Distinct from .k-pull (which is left-aligned for
   the homepage and Signed section). */
.k-pullquote {
  text-align: center;
  max-width: 880px;
  margin: 72px auto;
  position: relative;
  font-family: var(--kw-sans);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--kw-ink);
}

.k-pullquote::before {
  content: "";
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kw-terra);
  margin: 0 auto 28px;
}

.k-pullquote__attrib {
  display: block;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 22px;
}
@media (max-width: 700px) {

  .k-pullquote { margin: 56px auto; }

}

/* Container ------------------------------------------------------------ */
.k-wrap {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: 0 var(--kw-pad);
}
@media (max-width: 900px) {

  .k-wrap { padding: 0 var(--kw-pad-sm); }

}

/* Section --------------------------------------------------------------- */
/* Section rhythm — opened from 104/64/160 to 128/88/184 to suit the new
   magazine register. Mobile (≤900) holds 88/56/128 so the cadence
   survives at phone scale without orphaning short sections. */
/* Heyoasis-feel rhythm: more breathing room between sections.
   Bumped from 128/88/184 to 152/104/184 — magazine-grade pacing.
   --loose stays at 184 (not 216) — anything more turns short closing
   CTAs into 55%-empty caverns. */
.k-section { padding: 152px 0; }

.k-section--tight { padding: 104px 0; }

.k-section--loose { padding: 184px 0; }
@media (max-width: 900px) {

  .k-section { padding: 104px 0; }

  .k-section--tight { padding: 64px 0; }

  .k-section--loose { padding: 120px 0; }

}
@media (max-width: 600px) {

  /* Phone-scale: tighten so a 26-section page doesn't feel like
     six full screens of pure padding. */
  .k-section { padding: 80px 0; }

  .k-section--tight { padding: 56px 0; }

  .k-section--loose { padding: 104px 0; }

}

/* Magazine-cover sustain — when a section follows the cinematic hero
   directly, add 12% more vertical breathing above the first content
   so the cover register persists past the fold. Applied via the
   pagemark wrap on home + offerings; matched on .k-hero-cinema + the
   next section directly. */
.k-hero-cinema + .k-wrap > .k-pagemark { padding: 32px 0 24px; }

.k-hero-cinema + .k-section,
.k-hero-cinema + .k-wrap + .k-section {
  padding-top: 144px;
}
@media (max-width: 900px) {

  .k-hero-cinema + .k-section,
  .k-hero-cinema + .k-wrap + .k-section {
    padding-top: 100px;
  }

}

/* On a white site, the former dark sections become neutral grounds bracketed by hairlines
   so the rhythm of the page survives. */
.k-section--ink { background: #ffffff; color: var(--kw-ink); border-top: 1px solid var(--kw-rule); border-bottom: 1px solid var(--kw-rule); }

.k-section--paper { background: #ffffff; border-top: 1px solid var(--kw-rule); border-bottom: 1px solid var(--kw-rule); }

/* Avoid double hairlines when two bordered sections sit adjacent. */
.k-section--ink + .k-section--ink,
.k-section--ink + .k-section--paper,
.k-section--paper + .k-section--ink,
.k-section--paper + .k-section--paper {
  border-top: 0;
  /* Adjacent sections share continuity — halve the top padding so the
     joined block doesn't read as one giant cavern between content. */
  padding-top: 104px;
}
@media (max-width: 900px) {

  .k-section--ink + .k-section--ink,
  .k-section--ink + .k-section--paper,
  .k-section--paper + .k-section--ink,
  .k-section--paper + .k-section--paper { padding-top: 72px; }

}

/* A pullq immediately preceding a .k-section is another adjacency
   that should compress — the pullq is its own breath; the next section
   doesn't need a full magazine break above its first content. */
.k-pullq + .k-section { padding-top: 104px; }
@media (max-width: 900px) {
 .k-pullq + .k-section { padding-top: 72px; }
 
}

/* Section eyebrow ------------------------------------------------------- */
.k-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--kw-rule);
}

.k-eyebrow__num { color: var(--kw-ink); opacity: 0.4; }

.k-eyebrow__title { flex: 1; opacity: 0.65; }

/* Hairlines ------------------------------------------------------------- */
/* True hairline — 0.5px on devicePixelRatio ≥ 2 (Retina, mobile), 1px
   fallback elsewhere. Subpixel rules are the small difference between
   a printed magazine and a print-out of one. */
.k-rule { height: 1px; background: var(--kw-rule); border: 0; display: block; }
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {

  .k-rule { height: 0.5px; }
.k-eyebrow, .k-section--ink, .k-section--paper, .k-nav, .k-pagemark { border-width: 0.5px; }

  .k-spec-list,
  .k-spec-list__row { border-width: 0.5px; }

}

/* ==========================================================================
   NAVIGATION (injected by chrome.js into #k-nav)
   ========================================================================== */
.k-nav {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--kw-rule);
  background: #ffffff;
}

.k-nav__inner {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: 22px var(--kw-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
}

.k-nav__brand { display: flex; align-items: center; gap: 14px; }

.k-nav__wordmark {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--kw-ink);
  white-space: nowrap;
}

/* Trademark mark on the wordmark — small, raised, quiet. */
.k-tm {
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: super;
  line-height: 0;
  opacity: 0.7;
  margin-left: 0.06em;
}

.k-nav__items {
  display: flex;
  gap: 36px;
  justify-content: center;
}

.k-nav__item {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.72;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.18s;
}

.k-nav__item:hover { opacity: 1; }

.k-nav__item.is-active { opacity: 1; }

.k-nav__item.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 1px;
  background: var(--kw-terra);
}

.k-nav__cta {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--kw-ink);
  transition: background 0.18s, color 0.18s;
}

.k-nav__cta:hover { background: var(--kw-ink); color: var(--kw-bone); }

/* Skip link — first focusable element, off-screen until focused */
.k-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--kw-ink);
  color: var(--kw-bone);
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  transition: transform 0.18s;
}

.k-skip:focus { transform: translateY(0); outline: 2px solid var(--kw-terra); }

/* Mobile toggle hidden on desktop; panel flows inline via display:contents */
.k-nav__toggle { display: none; }

.k-nav__panel { display: contents; }
@media (max-width: 1100px) {

  .k-nav__items { gap: 22px; }

  .k-nav__item { font-size: 10px; letter-spacing: 0.14em; }

}
@media (max-width: 900px) {

  .k-nav__inner { grid-template-columns: 1fr auto; }

  .k-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--kw-ink);
    z-index: 60;
  }

  .k-nav__bars, .k-nav__bars::before, .k-nav__bars::after {
    content: "";
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.22s ease, background 0.1s ease;
  }

  .k-nav__bars { position: relative; }

  .k-nav__bars::before { position: absolute; top: -6px; left: 0; }

  .k-nav__bars::after { position: absolute; top: 6px; left: 0; }

  .k-nav.is-open .k-nav__bars { background: transparent; }

  .k-nav.is-open .k-nav__bars::before { transform: translateY(6px) rotate(45deg); }

  .k-nav.is-open .k-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

  .k-nav__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    position: fixed;
    inset: 0;
    padding: 104px var(--kw-pad-sm) 48px;
    background: var(--kw-bone);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: transform 0.34s cubic-bezier(.16,1,.3,1), opacity 0.3s ease, visibility 0s linear 0.34s;
  }

  .k-nav.is-open .k-nav__panel {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.38s cubic-bezier(.16,1,.3,1), opacity 0.3s ease;
  }

  .k-nav__items { display: flex; flex-direction: column; gap: 0; justify-content: flex-start; }

  .k-nav__item {
    font-size: 16px !important;
    letter-spacing: 0.14em !important;
    padding: 17px 0;
    border-bottom: 1px solid var(--kw-rule);
    opacity: 0.85;
  }

  .k-nav__item.is-active::after { display: none; }

  .k-nav__item.is-active { color: var(--kw-terra); opacity: 1; }

  .k-nav__cta { margin-top: 30px; align-self: flex-start; }

}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {

  .k-nav__panel, .k-nav__bars,
  .k-nav__bars::before, .k-nav__bars::after { transition: none; }

}

/* ==========================================================================
   FOOTER (injected by chrome.js into #k-footer)
   ========================================================================== */
.k-foot {
  background: var(--kw-ink);
  color: var(--kw-bone);
  margin-top: 0;
}

.k-foot__inner {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: 128px var(--kw-pad) 56px;
}

/* Masthead: brand + newsletter --------------------------------------- */
.k-foot__masthead {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 96px;
  padding-bottom: 88px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.k-foot__mark { color: var(--kw-bone); margin-bottom: 32px; opacity: 0.92; }

.k-foot__head {
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.96;
  color: var(--kw-bone);
}

.k-foot__blurb {
  margin-top: 28px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.62;
}

.k-foot__news { align-self: start; padding-top: 4px; }

.k-foot__news-note {
  margin: 16px 0 24px;
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.6;
  max-width: 420px;
}

.k-foot__news-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  max-width: 440px;
}

.k-foot__news-row input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 0;
  font-size: 16px;
  color: var(--kw-bone);
  outline: none;
}

.k-foot__news-row input::placeholder { color: rgba(255, 255, 255, 0.4); }

.k-foot__news-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-bone);
  padding: 12px 0 12px 24px;
  white-space: nowrap;
  transition: opacity 0.18s;
}

.k-foot__news-btn:hover { opacity: 0.6; }

.k-foot__news-btn:disabled { opacity: 0.5; cursor: default; }

/* Link columns ------------------------------------------------------- */
.k-foot__cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 36px;
  padding: 80px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.k-foot__col-title {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kw-bone);
  opacity: 0.62;
  margin-bottom: 22px;
}

.k-foot__list { display: flex; flex-direction: column; gap: 12px; }

.k-foot__list a {
  opacity: 0.7;
  font-size: 14px;
  line-height: 1.3;
  transition: opacity 0.18s;
}

.k-foot__list a:hover { opacity: 1; }

.k-foot__more {
  margin-top: 8px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55 !important;
}

/* Bottom: legal / social / region ------------------------------------ */
.k-foot__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding-top: 40px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.k-foot__legal, .k-foot__social {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.k-foot__legal span { opacity: 0.5; }

.k-foot__legal a, .k-foot__social a { opacity: 0.6; transition: opacity 0.18s; }

.k-foot__legal a:hover, .k-foot__social a:hover { opacity: 1; }

.k-foot__region { opacity: 0.6; }

/* Designer credit — full-width final line under the legal/social row,
   separated by a hairline. LEADLEADS links to the agency site. */
.k-foot__credit {
  flex-basis: 100%;
  text-align: center;
  padding-top: 26px;
  margin-top: 10px;
  border-top: 1px solid var(--kw-rule);
  opacity: 0.5;
}

.k-foot__credit a {
  color: inherit;
  opacity: 1;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.18s, opacity 0.18s;
}

.k-foot__credit a:hover { color: var(--kw-terra); }
@media (max-width: 1100px) {

  .k-foot__cols { grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }

  /* Avoid the blank-right-half between masthead brand and newsletter
     between 901 and 1100 by stacking the masthead a step earlier. */
  .k-foot__masthead { grid-template-columns: 1fr; gap: 56px; }

  .k-foot__news { max-width: 560px; }

}
@media (max-width: 900px) {

  .k-foot__inner { padding: 88px var(--kw-pad-sm) 96px; }

  .k-foot__masthead { grid-template-columns: 1fr; gap: 48px; padding-bottom: 56px; }

  .k-foot__head { font-size: 38px; }

  .k-foot__cols { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; padding: 56px 0; }

  .k-foot__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* Section rhythm on small screens is set in the earlier .k-section
     media query (104/64/144). Don't redeclare here — source-order
     wins, and the smaller values were undoing the heyoasis bump. */
  .k-eyebrow { margin-bottom: 40px; }

}
@media (max-width: 600px) {

  /* Pagemark can crowd at narrow widths; wrap and shrink. */
  .k-pagemark { flex-wrap: wrap; gap: 6px 16px; font-size: 9px; }

}
@media (max-width: 540px) {

  .k-foot__cols { grid-template-columns: 1fr; gap: 36px; }

}

/* Featured-split utility: two-column at desktop, stacked on mobile.
   Replaces inline grid-template-columns: 1fr 1fr; gap: 96px on pages
   that would otherwise crush both columns on small screens. */
.k-feat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
@media (max-width: 860px) {
 .k-feat-split { grid-template-columns: 1fr; gap: 40px; }
 
}

/* ==========================================================================
   HERO — Cinematic (video background variant)
   ========================================================================== */
.k-hero-cinema {
  position: relative;
  overflow: hidden;
  background: #0e1116;
  /* Use svh (small viewport height), NOT dvh. dvh is *dynamic* — it
     grows/shrinks as the mobile address bar hides/shows on scroll, so
     a full-height video hero re-fits every frame and visibly "shakes."
     svh is the stable smaller height (toolbar-visible), so the hero is
     a constant size and never reflows mid-scroll. vh fallback first. */
  min-height: 92vh;
  min-height: 92svh;
  color: var(--kw-paper);
}

.hf rect { fill: #c98a52; stroke: none; fill-opacity: 0; animation: kw-draw-fill 21s linear infinite; }

.hi { opacity: 0; animation: kw-draw-install 21s linear infinite; }

.hi line { fill: none; stroke: #b7b0a1; stroke-width: 1.4; }

@keyframes kw-draw-1 {
  0%   { stroke-dashoffset: 1; opacity: 0.8; }
  3%   { opacity: 0.8; }
  13%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: 0; opacity: 0.8; }
  98%  { opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes kw-draw-2 {
  0%, 7% { stroke-dashoffset: 1; opacity: 0.62; }
  27%    { stroke-dashoffset: 0; }
  92%    { stroke-dashoffset: 0; opacity: 0.62; }
  98%    { opacity: 0; }
  100%   { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes kw-draw-fill {
  0%, 33% { fill-opacity: 0; }
  49%     { fill-opacity: 0.17; }
  92%     { fill-opacity: 0.17; }
  100%    { fill-opacity: 0; }
}

@keyframes kw-draw-install {
  0%, 64% { opacity: 0; }
  75%     { opacity: 0.6; }
  93%     { opacity: 0.6; }
  100%    { opacity: 0; }
}

@keyframes kw-draw-settle {
  0%, 64% { transform: scale(0.972); }
  82%     { transform: scale(1); }
  95%     { transform: scale(1); }
  100%    { transform: scale(0.972); }
}
/* Reduced motion: hold the finished, installed drawing — fully drawn,
   filled, in the room — with no animation. */
@media (prefers-reduced-motion: reduce) {

  .hf rect { fill-opacity: 0.17; }

  .hi { opacity: 0.6; }

}

@keyframes kw-hero-kenburns {
  /* Slow zoom-and-drift. Lower amplitude than the previous version
     (1.04 -> 1.08 instead of 1.04 -> 1.10) because without the drawing
     interlude resetting the position, the motion is continuous and
     a smaller travel reads as more cinematic, less restless. */
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.08) translate3d(-0.4%, -0.2%, 0); }
  100% { transform: scale(1.04) translate3d(0, 0, 0); }
}

@keyframes kw-hero-cycle-draw {
  /* While Act 2 holds at full opacity (no Act 1 photograph), the line
     animation runs a draw-hold-reset loop so the shop drawing has
     constant motion: lines build in over the first ~3 seconds, hold
     drawn for ~10 seconds, then briefly reset and rebuild. */
  0%   { stroke-dashoffset: 1; }
  20%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

@keyframes kw-annot-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {

  @keyframes kw-cue-arrow {
    0%, 100% { transform: translateY(0); opacity: 0.62; }
    50%      { transform: translateY(4px); opacity: 1; }
  }

}

.k-hero-cinema .k-btn {
  border-color: rgba(247,245,240,0.6);
  color: var(--kw-paper);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(14,17,22,0.18);
}

.k-hero-cinema .k-btn:hover {
  background: var(--kw-paper);
  color: var(--kw-ink);
  border-color: var(--kw-paper);
}

.k-hero-cinema .k-btn--fill {
  background: var(--kw-paper);
  color: var(--kw-ink);
  border-color: var(--kw-paper);
}

.k-hero-cinema .k-btn--fill:hover {
  background: var(--kw-terra);
  border-color: var(--kw-terra);
  color: var(--kw-paper);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.k-hero-wrap {
  /* Restored horizontal gutter — the prior `padding: 112px 0 96px` zeroed
     out the inherited .k-wrap padding, leaving hero titles flush against
     the viewport edge on every page except home (22 pages affected). */
  padding: 112px var(--kw-pad) 96px;
  position: relative;
}
@media (max-width: 900px) {

  .k-hero-wrap { padding: 96px var(--kw-pad-sm) 72px; }

}

.k-hero-eyebrow {
  font-family: var(--kw-mono);
  font-size: 11px;
  /* Caps at small size want air — bumped 0.22 → 0.26. */
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 32px;
}

.k-hero-text {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.94;
  font-weight: 500;
  /* Tighter optical tracking at scale — Geist needs more negative
     space the larger it gets; -0.035 → -0.040 at the 96px end. */
  letter-spacing: -0.040em;
  margin-bottom: 36px;
  text-wrap: balance;
}

.k-hero-dek {
  font-size: 19px;
  line-height: 1.52;
  max-width: 560px;
  opacity: 0.8;
  letter-spacing: -0.008em;
}

/* ==========================================================================
   IMAGE PLACEHOLDERS (striped + caption)
   ========================================================================== */
.k-img {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      #d8d3c8 0 12px,
      #cdc8bc 12px 13px);
  border: 1px solid var(--kw-rule);
  overflow: hidden;
}

/* When a real photograph is supplied via inline background-image,
   replace the striped placeholder cleanly and drop the placeholder caption. */
.k-img--photo {
  background-color: var(--kw-bone-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
}

/* Search- and accessibility-friendly real images can live inside the same
   aspect-ratio frame instead of being CSS backgrounds. */
.k-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.k-img--photo::after,
.k-img--photo::before { display: none; }

.k-img::after {
  content: "↳ " attr(data-caption);
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.75;
}

.k-img[data-spec]::before {
  content: attr(data-spec);
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--kw-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.5;
}

.k-img--1x1 { aspect-ratio: 1 / 1; }

.k-img--4x3 { aspect-ratio: 4 / 3; }

.k-img--3x4 { aspect-ratio: 3 / 4; }

.k-img--3x2 { aspect-ratio: 3 / 2; }

.k-img--16x9 { aspect-ratio: 16 / 9; }

.k-img--2x1 { aspect-ratio: 2 / 1; }

/* ==========================================================================
   CARD GRID
   ========================================================================== */
.k-grid { display: grid; gap: 24px; }

.k-grid--2 { grid-template-columns: repeat(2, 1fr); }

.k-grid--3 { grid-template-columns: repeat(3, 1fr); }

.k-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {

  .k-grid--3, .k-grid--4 { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 600px) {

  .k-grid--2, .k-grid--3, .k-grid--4 { grid-template-columns: 1fr; }

}

.k-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.k-card__title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }

.k-card__dek { font-size: 14px; opacity: 0.7; }

.k-card__meta {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.k-card a { display: contents; }

.k-card--hover:hover .k-img { filter: brightness(0.96); }

.k-card--hover { cursor: pointer; }

/* ==========================================================================
   PROOF STRIP — five differentiators in a thin terra-bordered band
   sitting right under the hero. Centered, horizontally tight, set in
   the same mono caps the wordmark uses.
   ========================================================================== */
.k-proof {
  background: var(--kw-bone);
  border-top: 1px solid var(--kw-rule);
  border-bottom: 1px solid var(--kw-rule);
  padding: 22px 0;
  position: relative;
}

.k-proof::before, .k-proof::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--kw-terra);
  opacity: 0.18;
}

.k-proof::before { top: -1px; }

.k-proof::after  { bottom: -1px; }

.k-proof__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}

.k-proof__item {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink-2);
}

.k-proof__sep {
  color: var(--kw-terra);
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
@media (max-width: 760px) {

  .k-proof { padding: 16px 0; }

  .k-proof__list { gap: 8px 14px; font-size: 10px; }

  .k-proof__sep { display: none; }

  .k-proof__item { font-size: 10px; }

}

/* ==========================================================================
   FOOTER · ABOVE-LEGAL MANIFESTO LINE — quiet tagline that sits
   above the © stamp. National-ambition copy.
   ========================================================================== */
.k-foot__manifesto {
  font-family: var(--kw-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--kw-ink);
  opacity: 0.5;
  margin: 36px 0 20px;
  max-width: 640px;
  font-style: italic;
}

/* ==========================================================================
   TWO-COLUMN PROSE
   ========================================================================== */
.k-prose {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 88px;
  align-items: start;
}

.k-prose__label { padding-top: 8px; }

.k-prose__body { font-size: 19px; line-height: 1.5; max-width: 640px; }

.k-prose__body p + p { margin-top: 1em; }

.k-prose__body p { opacity: 0.86; }
@media (max-width: 900px) {
 .k-prose { grid-template-columns: 1fr; gap: 24px; }
 
}

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */
.k-step {
  display: grid;
  grid-template-columns: 40px minmax(150px, 0.8fr) 1.25fr 0.95fr;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--kw-rule);
  align-items: center;
}

.k-step:last-child { border-bottom: 1px solid var(--kw-rule); }

.k-step__num {
  font-family: var(--kw-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--kw-terra);
  align-self: start;
  padding-top: 4px;
}

.k-step__title { font-size: 25px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.1; }

.k-step__body { font-size: 15px; line-height: 1.6; opacity: 0.86; align-self: start; padding-top: 2px; }

.k-step__img { width: 100%; align-self: stretch; }
@media (max-width: 900px) {

  .k-step { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }

  .k-step__title { font-size: 23px; }

  .k-step__img { aspect-ratio: 16 / 9; }

}

/* ==========================================================================
   BUTTONS / CTAS
   ========================================================================== */
.k-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid var(--kw-ink);
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.k-btn:hover { background: var(--kw-ink); color: var(--kw-bone); }

.k-btn--fill { background: var(--kw-ink); color: var(--kw-bone); }

.k-btn--fill:hover { background: var(--kw-terra); border-color: var(--kw-terra); }

.k-btn--terra { background: var(--kw-terra); border-color: var(--kw-terra); color: var(--kw-paper); }

.k-btn--terra:hover { background: var(--kw-terra-deep); border-color: var(--kw-terra-deep); }

.k-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   FORM
   ========================================================================== */
.k-form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 28px; }

.k-form__field { display: flex; flex-direction: column; gap: 8px; }

.k-form__label {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.k-form input, .k-form select, .k-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kw-rule-strong);
  padding: 12px 0;
  font-size: 17px;
  letter-spacing: -0.005em;
  width: 100%;
  outline: none;
  transition: border-color 0.18s;
}

.k-form input:focus, .k-form textarea:focus, .k-form select:focus { border-bottom-color: var(--kw-terra); }

.k-form textarea { resize: vertical; min-height: 120px; }
@media (max-width: 700px) {
 .k-form { grid-template-columns: 1fr; }
 
}

/* ==========================================================================
   QUOTE / PULL
   ========================================================================== */
.k-pull {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 1100px;
}

.k-pull__attrib {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 28px;
  opacity: 0.55;
}

/* ==========================================================================
   PAGE-MARK utility (ID stamp top of page below nav)
   ========================================================================== */
/* Single inline mono line with terra-dot separators between spans
   (was a 3-cell flex space-between bar — read as utility chrome).
   Now reads as a slug. */
.k-pagemark {
  padding: 22px 0;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.42;
  border-bottom: 1px solid var(--kw-rule);
  text-align: left;
}

.k-pagemark > span:not(:last-child)::after {
  content: " · ";
  color: var(--kw-terra);
  opacity: 0.7;
  margin: 0 6px;
}

/* ==========================================================================
   FEATURE LIST (used for spec)
   ========================================================================== */
.k-spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--kw-rule);
}

.k-spec-list__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--kw-rule);
  align-items: baseline;
}

.k-spec-list__key {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  /* Mono caps already align; opt in to tabular for any inline digits. */
  font-variant-numeric: tabular-nums lining-nums;
}

.k-spec-list__val {
  font-size: 15px;
  /* Numeric data (areas, dates, plate numbers) needs same-width digits
     so the right edge of the column behaves like a tide line. */
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.003em;
}
@media (max-width: 700px) {

  .k-spec-list { grid-template-columns: 1fr; }

  .k-spec-list__row { grid-template-columns: 1fr; gap: 6px; }

}

.k-spacer-md { height: 56px; }

.k-spacer-lg { height: 96px; }

.k-text-terra { color: var(--kw-terra); }

.k-text-mute { opacity: 0.7; }

.k-align-center { text-align: center; }

/* Monogram SVG inline drop-in */
.k-mark { display: block; }

/* Tags / chips — hairline rectangles with sharp corners (was pill, but
   border-radius: 999px reads SaaS-feature-grid; sharp keeps the atelier
   register). */
.k-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--kw-rule-strong);
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
}

.k-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   COMPARISON — editorial two-column: KW vs. everyone else
   No borders between rows; rhythm is set by vertical gap and type.
   Terra accent appears ONLY on the KW side, and faintly.
   ========================================================================== */
.k-vs2 { margin-top: 56px; max-width: 1180px; }

.k-vs2__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--kw-rule);
  margin-bottom: 56px;
}

.k-vs2__col { display: flex; flex-direction: column; gap: 18px; }

.k-vs2__tag { opacity: 0.55; }

.k-vs2__col--us .k-vs2__tag { color: var(--kw-terra); opacity: 0.85; }

.k-vs2__name {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--kw-ink);
}

.k-vs2__them-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.k-vs2__them-list li { display: flex; flex-direction: column; gap: 4px; }

.k-vs2__them-list em {
  font-style: normal; font-weight: 500;
  font-size: 17px; letter-spacing: -0.012em;
  color: var(--kw-ink);
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: rgba(29,35,44,0.32);
  text-decoration-thickness: 1px;
}

.k-vs2__them-list .k-cap { opacity: 0.4; }

.k-vs2__rows { list-style: none; margin: 0; padding: 0; }

.k-vs2__row {
  display: grid;
  grid-template-columns: 200px 1.05fr 1fr;
  gap: 24px 64px;
  align-items: baseline;
  padding: 28px 0;
}

.k-vs2__row + .k-vs2__row { border-top: 1px solid rgba(29,35,44,0.06); }

.k-vs2__crit { opacity: 0.55; display: flex; align-items: baseline; gap: 14px; }

.k-vs2__num {
  display: inline-block;
  color: var(--kw-terra);
  opacity: 0.7;
  font-weight: 500;
}

.k-vs2__us {
  font-size: clamp(20px, 1.95vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--kw-ink);
  font-weight: 400;
  margin: 0;
  position: relative;
  padding-left: 18px;
}

.k-vs2__us::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 3px; height: calc(100% - 0.5em);
  background: var(--kw-terra);
  opacity: 0.85;
  transform-origin: top;
  animation: k-vs2-rule 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
}

@keyframes k-vs2-rule { from { transform: scaleY(0.001); } to { transform: scaleY(1); } }

.k-vs2__them {
  font-size: 15px;
  line-height: 1.55;
  color: var(--kw-ink);
  opacity: 0.62;
  margin: 0;
}

.k-vs2__note {
  margin-top: 48px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.42;
  max-width: 780px;
  line-height: 1.75;
}
@media (max-width: 900px) {

  .k-vs2__head { grid-template-columns: 1fr; gap: 36px; padding-bottom: 28px; margin-bottom: 40px; }

  .k-vs2__row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }

  .k-vs2__crit { order: 1; }

  .k-vs2__us { order: 2; padding-left: 14px; font-size: clamp(19px, 4.6vw, 24px); }

  .k-vs2__them { order: 3; font-size: 14.5px; }

  .k-vs2__name { font-size: clamp(30px, 8vw, 44px); }

}
@media (prefers-reduced-motion: reduce) {

  .k-vs2__us::before { animation: none; transform: scaleY(1); }

}

/* ==========================================================================
   MAKER'S MARK ON IMAGERY (injected by chrome.js on [data-mark])
   --patch   : embroidered workwear patch — the logo on the makers
   --stencil : faint shop-stencil — the logo on the work
   ========================================================================== */
.k-onmark { position: absolute; z-index: 3; pointer-events: none; }

.k-onmark svg { display: block; }

@keyframes kw-plan-redraw { from { opacity: 0.4; } to { opacity: 1; } }

/* ==========================================================================
   SCROLL REVEAL — subtle rise/fade as blocks enter. chrome.js adds
   html.kw-anim only when motion is allowed, so without JS or under
   reduced-motion everything is simply visible (no content is hidden).
   ========================================================================== */
html.kw-anim .kw-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(.16,1,.3,1), transform 0.75s cubic-bezier(.16,1,.3,1);
  /* will-change only while the block is still pre-reveal — chrome.js
     drops it inline via transitionend after the reveal completes, so
     we don't leave composite layers piled up on a long scroll. */
  will-change: opacity, transform;
}

html.kw-anim .kw-rv.kw-rv--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {

  html.kw-anim .kw-rv { opacity: 1; transform: none; transition: none; will-change: auto; }

}
/* ==========================================================================
   MATERIALS FAMILY MOBILE CADENCE (2026-05-28).
   --------------------------------------------------------------------------
   The six family sections (Solid timber / Veneer / Finish / Stone / Metal /
   Leather) alternate image-left and image-right on desktop via .k-grid--2.
   On mobile they stacked as image-then-text six times — read as a default
   Tailwind stack. Demote the image to a slim 16:7 landscape "ribbon" so
   the rhythm reads editorial, not cards.
   ========================================================================== */
@media (max-width: 768px) {

  body[data-page="materials"] section[data-screen-label^="Materials · "] .k-grid--2 .k-img--4x3 {
    aspect-ratio: 16 / 7;
    margin-bottom: 8px;
  }

}

/* ==========================================================================
   EDITORIAL INDEX — sidebar register replacing 3-card "Adjacent reading"
   footers (2026-05-28). A numbered list with Roman counters, hairline
   rules, and a single arrow per row. Reads as a book's table of
   contents, not a CMS related-posts grid.
   ========================================================================== */
.k-index {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 920px;
}

.k-index__item {
  border-top: 1px solid var(--kw-rule-strong);
}

.k-index__item:last-child {
  border-bottom: 1px solid var(--kw-rule-strong);
}

.k-index__link {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 28px;
  align-items: baseline;
  padding: 28px 0;
  text-decoration: none;
  color: var(--kw-ink);
  transition: color 0.32s ease;
}

.k-index__link:hover {
  color: var(--kw-terra);
}

.k-index__num {
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kw-terra);
  opacity: 0.86;
}

.k-index__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.k-index__h {
  font-family: var(--kw-sans);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--kw-ink);
}

.k-index__dek {
  font-family: var(--kw-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--kw-ink);
  opacity: 0.66;
  max-width: 680px;
}

.k-index__arrow {
  font-family: var(--kw-mono);
  font-size: 18px;
  color: var(--kw-ink);
  opacity: 0.36;
  text-align: right;
  align-self: center;
  transition: transform 0.32s cubic-bezier(.16,1,.3,1), opacity 0.32s, color 0.32s;
}

.k-index__link:hover .k-index__arrow {
  transform: translateX(6px);
  opacity: 1;
  color: var(--kw-terra);
}
@media (max-width: 760px) {

  .k-index__link {
    grid-template-columns: 56px 1fr 28px;
    gap: 18px;
    padding: 22px 0;
  }

  .k-index__h { font-size: 19px; }

  .k-index__dek { font-size: 14px; }

}

/* ==========================================================================
   FEATURED SPACES PORTRAIT TRIO — tylko-feel cards (2026-05-28).
   --------------------------------------------------------------------------
   4:5 portrait tile + one editorial "neighborhood · year" caption.
   No bordered card chrome, no separate title row, no dek paragraph —
   the image is the title, the caption is the slug.
   ========================================================================== */
.k-projects--trio {
  margin: 0;
}

.k-projects__tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.k-projects__tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  margin: 0 0 18px;
  overflow: hidden;
  background-color: var(--kw-ink);
  transition: transform 0.7s cubic-bezier(.16,1,.3,1);
}

.k-projects__tile:hover .k-projects__tile-img {
  transform: scale(1.03);
}

.k-projects__tile-cap {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.7;
  transition: opacity 0.32s, color 0.32s;
}

.k-projects__tile:hover .k-projects__tile-cap {
  opacity: 1;
  color: var(--kw-terra);
}
@media (max-width: 760px) {

  .k-projects--trio { gap: 32px !important; grid-template-columns: 1fr !important; }

  .k-projects__tile-img { aspect-ratio: 4 / 3; }

  .k-projects__tile-cap { font-size: 10.5px; letter-spacing: 0.2em; }

}

/* ==========================================================================
   PROMISE BAND — single-sentence proof band (2026-05-28).
   --------------------------------------------------------------------------
   A 60vh-tall band carrying one display-scale guarantee sentence. Bone-2
   ground, hairline rules above/below, terra dot, mono caps eye + foot.
   The final declarative proof before the trade close.
   ========================================================================== */
.k-promise {
  background: var(--kw-bone-2);
  border-top: 1px solid var(--kw-rule-strong);
  border-bottom: 1px solid var(--kw-rule-strong);
  padding: clamp(96px, 14vh, 184px) 0;
}

.k-promise__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.k-promise__eye { letter-spacing: 0.34em; opacity: 0.86; }

.k-promise__line {
  font-family: var(--kw-sans);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(48px, 7.4vw, 124px);
  line-height: 1.0;
  letter-spacing: -0.014em;
  color: var(--kw-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.k-promise__line .k-dot { color: var(--kw-terra); }

.k-promise__foot {
  letter-spacing: 0.24em;
  opacity: 0.55;
  font-size: 11px;
}
@media (max-width: 760px) {

  .k-promise__line { font-size: clamp(36px, 9vw, 64px); }

  .k-promise__eye, .k-promise__foot { font-size: 10px; letter-spacing: 0.22em; }

}

/* ==========================================================================
   STICKY CTA — heyoasis-feel persistent reach (2026-05-28).
   --------------------------------------------------------------------------
   Materializes (fades + slides in from below) after the hero exits view,
   so the visitor always has a one-tap path to schedule a consultation.
   Hides again at the footer so it doesn't overlap the final close.
   ========================================================================== */
.k-sticky-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--kw-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--kw-paper);
  background: var(--kw-terra);
  box-shadow: 0 12px 32px rgba(122, 47, 58, 0.36);
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(.16,1,.3,1),
              transform 0.42s cubic-bezier(.16,1,.3,1),
              background 0.24s ease, box-shadow 0.24s ease;
}

.k-sticky-cta--show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.k-sticky-cta--hide-at-foot {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.k-sticky-cta:hover {
  background: var(--kw-terra-deep);
  box-shadow: 0 16px 40px rgba(94, 34, 44, 0.5);
}

.k-sticky-cta__arrow {
  font-family: var(--kw-mono);
  letter-spacing: 0;
  font-size: 14px;
  transition: transform 0.32s cubic-bezier(.16,1,.3,1);
}

.k-sticky-cta:hover .k-sticky-cta__arrow { transform: translateX(4px); }
@media (max-width: 600px) {

  .k-sticky-cta {
    bottom: 16px;
    right: 16px;
    padding: 14px 20px;
    font-size: 10.5px;
    letter-spacing: 0.2em;
  }

}
@media (prefers-reduced-motion: reduce) {

  .k-sticky-cta { transition: opacity 0.2s ease; transform: none; }

  .k-sticky-cta--show { transform: none; }

}
/* ==========================================================================
   SCROLL-DRIVEN CINEMA — heyoasis-feel interaction layer (2026-05-28).
   --------------------------------------------------------------------------
   Modern CSS scroll-timeline animations: hero photo translates upward as
   the viewport scrolls past it (parallax depth); chapter headings pin
   against the top of the viewport while their section's content rolls;
   the cinematic break section scales the photo subtly as it enters and
   exits view. All progressive: browsers without scroll-timeline see the
   site exactly as it was. No JS layer added — pure CSS modern animation.
   ========================================================================== */

/* Hero parallax REMOVED (2026-05-29). The scroll-linked
   animation-timeline parallax on the hero photograph compounded with
   the video's baked-in motion and, because view() timelines run on
   the main thread, desynced from threaded scrolling on mobile — it
   read as the hero "shaking." The hero is now a steady film; depth
   comes from the footage itself, not a scroll transform. */

/* Sticky chapter headings: when a chapter header enters the viewport,
   it pins against the nav for the duration of its parent section, so
   the visitor reads the chapter title alongside the scrolling content
   beneath it. The .k-chapter motif already has the right structure;
   just give it a sticky top. */
@supports (position: sticky) {

  .k-chapter {
    position: sticky;
    top: 80px;
    z-index: 5;
    /* Background block behind the sticky chapter so content scrolling
       underneath doesn't bleed through. Uses backdrop-filter for a
       subtle glass effect — falls back to a solid bone if unsupported. */
    background: var(--kw-paper);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px) saturate(1.04);
    -webkit-backdrop-filter: blur(8px) saturate(1.04);
    padding: 24px 0 18px;
    border-bottom: 1px solid var(--kw-rule);
    /* Margin baseline so the chapter sits just above the content it
       leads, separated by the rule rather than by gap. */
    margin-bottom: 48px;
  }

  /* Chapters inside paper / bone-2 sections — keep the sticky pane
     consistent with the section background so the glass blends. */
  .k-section--paper .k-chapter,
  .k-section .k-chapter {
    background: rgba(255, 255, 255, 0.94);
  }

  .k-mat-band .k-chapter {
    background: rgba(255, 255, 255, 0.96);
  }

  @media (max-width: 760px) {
    .k-chapter {
      top: 68px;
      padding: 18px 0 14px;
      margin-bottom: 36px;
    }
  }

}
/* Disable sticky chapters under reduced motion — pinned content is
   motion-coded for some vestibular-sensitive visitors. */
@media (prefers-reduced-motion: reduce) {

  .k-chapter { position: static !important; }

}
/* Scroll-revealed bleed band: as the cinematic break enters view, the
   photograph scales from 1.04 -> 1.08 over the section's scroll range.
   Adds momentum to the section that's otherwise just a static photo. */
@supports (animation-timeline: view()) {

  @keyframes kw-bleed-scroll-scale {
    from { transform: translate3d(0, 0, 0) scale(1.04); }
    50%  { transform: translate3d(-0.3%, -0.2%, 0) scale(1.08); }
    to   { transform: translate3d(-0.6%, -0.4%, 0) scale(1.10); }
  }

}
/* Featured Spaces lead-spread parallax: as the visitor scrolls past
   the full-bleed feature project, the image translates slightly faster
   than the page beneath, mirroring the hero treatment. */
@supports (animation-timeline: view()) {

  .k-projects__lead-img {
    animation: kw-feature-parallax linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  @keyframes kw-feature-parallax {
    from { transform: translate3d(0, 0, 0) scale(1.0); }
    to   { transform: translate3d(0, -6%, 0) scale(1.06); }
  }

}
/* Editorial gallery — each figure scales subtly as it enters view, so
   scrolling through the masonry feels like leafing through a magazine
   rather than scrolling a static grid. */
@supports (animation-timeline: view()) {

  .k-section[data-screen-label="Home · Gallery"] figure.k-img {
    animation: kw-gallery-tile linear;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }

  @keyframes kw-gallery-tile {
    from { transform: scale(0.96); opacity: 0.5; }
    to   { transform: scale(1.0);  opacity: 1; }
  }

}
/* ==========================================================================
   MOBILE SCROLL PERFORMANCE
   --------------------------------------------------------------------------
   Three small wins applied at narrow viewports and on coarse pointers
   (touch). Tested against a long iOS Safari home-scroll: the three
   together take the page from "fights the scroll" to "ride-along."
   ========================================================================== */

/* (1) backdrop-filter blur is genuinely expensive on mobile GPUs —
   each scroll tick triggers a re-blur of whatever is behind the fixed
   element. Disable on narrow viewports; the visual cost is one less
   layer of glassiness on the concierge pill and one ghost button
   variant in the legacy hero CSS. */
@media (max-width: 820px) {

  .k-cc-launch,
  .k-hero-cinema .k-btn {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* Keep the concierge pill readable without the glass effect. */
  .k-cc-launch { background: rgba(255, 255, 255, 0.96); }

}
/* (2) content-visibility lets the browser skip layout + paint for
   sections that are well below the fold. We scope it to the homepage
   sections that are unlikely to be the initial scroll target. The
   contain-intrinsic-size keeps a sensible reserved height so the
   scrollbar doesn't jitter as content paints in. Modern Chromium +
   WebKit support it; older browsers ignore it cleanly. */
@supports (content-visibility: auto) {

  main > section.k-section,
  main > section.k-section--paper {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1200px;
  }

}
/* (3) Cap background-image rendering work for the cards on mobile —
   the browser still has to decode the same source, but if the layout
   only shows a 380 px-wide tile, we let the GPU sample it at a more
   reasonable size. (Most of our figures use cover/center which means
   the same source is used everywhere; this directive is harmless on
   desktop and modestly helpful on phones.) */
@media (max-width: 760px) {
.k-img--photo, .k-foot__mark img {
    image-rendering: auto;
  }

}

@keyframes kw-bump {
  0% { transform: translateY(0); }
  35% { color: var(--kw-terra); transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* ==========================================================================
   ATELIER CONCIERGE (injected by chrome.js)
   ========================================================================== */
/* CONCIERGE launch — restrained, concierge not e-commerce. A terra
   hairline ring with the brand mark only; the label fades in and
   expands the pill on hover and on keyboard focus. */
.k-cc-launch {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* No gap until label appears — keeps the resting state perfectly
     square around the mark. Minimum 44x44 tap-target for WCAG 2.5.5
     AA on touch devices. */
  gap: 0;
  padding: 14px;
  min-width: 48px;
  min-height: 48px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--kw-terra);
  border: 1px solid var(--kw-terra);
  cursor: pointer;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* Soft, considered shadow — not a CTA drop-shadow, but the way a
     calling card sits on a marble counter. */
  box-shadow: 0 1px 1px rgba(20, 22, 26, 0.04), 0 8px 24px rgba(122, 47, 58, 0.08);
  transition:
    gap 0.32s cubic-bezier(.16,1,.3,1),
    padding 0.32s cubic-bezier(.16,1,.3,1),
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

/* Label is rendered by chrome.js as a <span> next to the mark; we
   compress it to zero width when at rest and reveal it on hover/focus. */
.k-cc-launch > span:not(.k-cc-launch__mark) {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    max-width 0.36s cubic-bezier(.16,1,.3,1),
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(.16,1,.3,1);
}

.k-cc-launch:hover,
.k-cc-launch:focus-visible,
.k-cc-launch[aria-expanded="true"] {
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--kw-terra);
  color: var(--kw-paper);
  border-color: var(--kw-terra);
  box-shadow: 0 2px 2px rgba(20, 22, 26, 0.06), 0 12px 32px rgba(122, 47, 58, 0.20);
}

.k-cc-launch:hover > span:not(.k-cc-launch__mark),
.k-cc-launch:focus-visible > span:not(.k-cc-launch__mark),
.k-cc-launch[aria-expanded="true"] > span:not(.k-cc-launch__mark) {
  max-width: 160px;
  opacity: 1;
  transform: translateX(0);
}

.k-cc-launch:focus-visible { outline: 2px solid var(--kw-terra); outline-offset: 4px; }

.k-cc-launch__mark { display: flex; color: currentColor; }

.k-cc {
  position: fixed;
  right: 28px;
  bottom: 92px;
  z-index: 130;
  width: 384px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  background: var(--kw-bone);
  border: 1px solid var(--kw-rule-strong);
  box-shadow: 0 24px 60px rgba(20, 22, 26, 0.30);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.99);
  transform-origin: bottom right;
  transition: opacity 0.26s ease, transform 0.3s cubic-bezier(.16,1,.3,1), visibility 0s linear 0.3s;
}

.k-cc.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.26s ease, transform 0.32s cubic-bezier(.16,1,.3,1); }

.k-cc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--kw-ink);
  color: var(--kw-bone);
}

.k-cc__title { font-family: var(--kw-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

.k-cc__x { background: transparent; border: 0; color: var(--kw-bone); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.8; }

.k-cc__x:hover { opacity: 1; }

.k-cc__log { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }

.k-cc-msg { max-width: 86%; font-size: 14px; line-height: 1.55; }

.k-cc-msg p { margin: 0; }

.k-cc-msg--bot { align-self: flex-start; }

.k-cc-msg--bot > p { background: #fff; border: 1px solid var(--kw-rule); padding: 12px 14px; }

.k-cc-msg--you { align-self: flex-end; }

.k-cc-msg--you > p { background: var(--kw-ink); color: var(--kw-bone); padding: 12px 14px; }

.k-cc-typing { opacity: 0.5; letter-spacing: 0.3em; padding: 6px 2px; }

.k-cc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.k-cc-act {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--kw-rule-strong);
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.16s, color 0.16s;
}

.k-cc-act:hover { background: var(--kw-ink); color: var(--kw-bone); border-color: var(--kw-ink); }

.k-cc__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }

.k-cc-chip {
  background: transparent;
  border: 1px solid var(--kw-rule);
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.16s, color 0.16s;
}

.k-cc-chip:hover { border-color: var(--kw-terra); color: var(--kw-terra); }

.k-cc__form { display: flex; border-top: 1px solid var(--kw-rule); }

.k-cc__form input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 16px 18px;
  font-size: 15px;
  outline: none;
}

.k-cc__send { background: transparent; border: 0; cursor: pointer; padding: 0 20px; font-size: 18px; color: var(--kw-terra); }

.k-cc__send:hover { color: var(--kw-terra-deep); }
@media (max-width: 520px) {

  /* On small screens hold the resting state — the label expansion is
     a desktop affordance; tap surface stays a clean ring. */
  .k-cc-launch { right: 18px; bottom: 18px; padding: 11px; }

  .k-cc-launch:hover,
  .k-cc-launch:focus-visible,
  .k-cc-launch[aria-expanded="true"] { padding: 11px; gap: 0; }

  .k-cc-launch > span:not(.k-cc-launch__mark) { display: none; }

  .k-cc { right: 12px; left: 12px; bottom: 76px; width: auto; max-width: none; height: 70vh; }

}
@media (prefers-reduced-motion: reduce) {

  .k-cc, .k-cc.is-open, .k-cc-launch { transition: none; }

  .k-cc { transform: none; }

}

/* ---------------------------------------------------------------------
   THE SHOP TRIAD — calm at rest, interactive on hover / keyboard focus.
   Cells are real links into the method; a hairline rule draws, a line of
   copy opens, and an index strengthens. Entrance staggers off the
   section's own .kw-rv--in reveal state (no extra JS).
   ------------------------------------------------------------------- */
.k-triad {
  margin-top: 56px;
  display: grid;
  /* Two-card layout while the Installed cell waits on real imagery. When
     the third cell returns, switch back to repeat(3, 1fr). */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--kw-rule);
  border: 1px solid var(--kw-rule);
}

.k-triad__cell {
  position: relative;
  display: block;
  background: #fff;
  padding: 34px 30px 30px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background .5s ease;
}

.k-triad__cell:hover,
.k-triad__cell:focus-visible {
  background: rgba(122, 47, 58, 0.045);
  outline: none;
}

.k-triad__cell:focus-visible { box-shadow: inset 0 0 0 2px var(--kw-terra); }

/* A precision spec chip per cell — a precise number with a tiny
   caption underneath, set in the brand mono. Replaced the earlier
   self-drawing motif: the spec gives readers something to remember.
   Number is large, tabular-nums (so the alignment holds across the
   three cards), with a thin terra rule that scales in on hover. */
.k-triad__spec {
  display: block;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--kw-rule);
  position: relative;
}

.k-triad__spec::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 36px;
  height: 1px;
  background: var(--kw-terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.7,.2,1) .05s, width .55s ease;
}

.k-triad__cell:hover .k-triad__spec::before,
.k-triad__cell:focus-visible .k-triad__spec::before { transform: scaleX(1); width: 56px; }

@keyframes kw-run-draw {
  0%   { stroke-dashoffset: 1; }
  22%  { stroke-dashoffset: 0; }
  80%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

@keyframes kw-run-fade {
  0%, 5%    { opacity: .1; }
  20%, 78%  { opacity: .6; }
  96%, 100% { opacity: .08; }
}

@keyframes kw-run-shave {
  0%, 16%   { transform: none; }
  42%, 72%  { transform: rotate(-9deg) translateX(-2px); }
  90%, 100% { transform: none; }
}

/* Staggered entrance, driven by the section's reveal state. */
html.kw-anim .kw-rv .k-triad__cell { opacity: 0; transform: translateY(16px); }

html.kw-anim .kw-rv--in .k-triad__cell {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}

html.kw-anim .kw-rv--in .k-triad__cell:nth-child(2) { transition-delay: .12s; }

html.kw-anim .kw-rv--in .k-triad__cell:nth-child(3) { transition-delay: .24s; }
@media (max-width: 760px) {

  .k-triad { grid-template-columns: 1fr; }

}
@media (prefers-reduced-motion: reduce) {
.k-triad__cell { transition: none !important; }

  html.kw-anim .kw-rv .k-triad__cell { opacity: 1; transform: none; }

}

/* ---------------------------------------------------------------------
   THE MATERIAL LIBRARY — a browsable specimen catalogue. The cards are
   real HTML (a complete catalogue with no JS); materials.js adds .is-live
   to reveal the filter bar, so JS-off visitors never meet a dead control.
   ------------------------------------------------------------------- */
.k-lib { margin-top: 30px; }

.k-lib__bar { display: none; }

.k-lib.is-live .k-lib__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 48px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--kw-rule);
  border-bottom: 1px solid var(--kw-rule);
  margin-bottom: 22px;
}

.k-lib__group { display: flex; align-items: baseline; gap: 16px; min-width: 0; }

.k-lib__glabel {
  flex: none;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.45;
  padding-top: 7px;
}

.k-lib__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.k-lib__chip {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--kw-rule-strong);
  color: var(--kw-ink);
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.k-lib__chip:hover { border-color: var(--kw-terra); color: var(--kw-terra); }

.k-lib__chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--kw-terra); }

.k-lib__chip.is-on {
  background: var(--kw-ink);
  border-color: var(--kw-ink);
  color: #fff;
}

.k-lib__count {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.5;
  margin: 0 0 22px;
}

.k-lib__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1px;
  background: var(--kw-rule);
  border: 1px solid var(--kw-rule);
}

.k-lib__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.k-lib__card.is-hidden { display: none; }

.k-lib__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kw-terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  z-index: 2;
}

.k-lib__card:hover::before,
.k-lib__card:focus-within::before { transform: scaleX(1); }

.k-lib__sw {
  width: 100%;
  filter: saturate(0.92);
  transition: filter .55s ease, transform .9s ease;
}

.k-lib__card:hover .k-lib__sw { filter: saturate(1) brightness(1.02); transform: scale(1.025); }

.k-lib__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 20px 22px;
  flex: 1 1 auto;
}

.k-lib__no {
  font-family: var(--kw-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kw-terra);
}

.k-lib__name {
  font-family: var(--kw-sans);
  font-size: 16.5px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--kw-ink);
  margin: 0;
}

.k-lib__meta {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.5;
}

.k-lib__note {
  font-family: var(--kw-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--kw-ink);
  opacity: 0.7;
  margin: 2px 0 0;
}

.k-lib__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.62;
}

.k-lib__dot {
  /* Was a circular pill (border-radius: 50%); switched to a hairline
     square so the tier badge reads as editorial mark, not status pill. */
  width: 9px; height: 9px;
  border-radius: 0;
  border: 1px solid rgba(29, 35, 44, 0.32);
  flex: none;
}

.k-lib__empty {
  margin: 28px 0 0;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid var(--kw-rule);
  font-family: var(--kw-sans);
  font-size: 15px;
  color: var(--kw-ink);
  opacity: 0.85;
}

.k-lib__empty a { color: var(--kw-terra); text-decoration: none; white-space: nowrap; }

.k-lib__empty a:hover { text-decoration: underline; }
@media (max-width: 760px) {

  .k-lib.is-live .k-lib__bar { flex-direction: column; gap: 18px; }

  .k-lib__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .k-lib__body { padding: 16px 16px 18px; }

}
@media (prefers-reduced-motion: reduce) {

  .k-lib__chip, .k-lib__sw, .k-lib__card::before { transition: none !important; }

  .k-lib__card:hover .k-lib__sw { transform: none; }

}

/* ======================================================================
   CINEMATIC MOTION LAYER
   Cross-document View Transitions (a static MPA, so this is automatic in
   supporting browsers) with the shared nav held continuous across pages,
   plus a subtle scroll-driven parallax on the home hero. Everything
   degrades to instant navigation and is silenced under reduced motion.
   ====================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: kw-vt-out .34s cubic-bezier(.2,.7,.2,1) both;
}

::view-transition-new(root) {
  animation: kw-vt-in .42s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes kw-vt-out { to { opacity: 0; transform: translateY(-6px); } }

@keyframes kw-vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* The nav is rendered identically on every page by chrome.js, so naming
   it makes the browser hold it in place while the body cross-fades —
   the page changes underneath a fixed mark. */
.k-nav { view-transition-name: kw-nav; }

::view-transition-group(kw-nav) { animation-duration: .34s; }
/* Scroll-driven parallax: the hero media drifts and settles as the
   section scrolls away. Compositor-only, no JS. */
@supports (animation-timeline: view()) {

  @media (prefers-reduced-motion: no-preference) {
    .k-hero-cinema__media {
      animation: kw-hero-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes kw-hero-parallax {
      from { transform: scale(1.06) translateY(0); }
      to   { transform: scale(1.0)  translateY(5%); }
    }
  }

}
@media (prefers-reduced-motion: reduce) {

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

}

/* ==========================================================================
   INTERACTIVE ENRICHMENTS
   Tasteful, motion-restrained layer: per-paragraph reveals, a reading
   progress hairline, hover specimens, marginalia, cursor refinements,
   anchor-highlight flash, and typeset section separators. Every behaviour
   collapses gracefully under (prefers-reduced-motion: reduce) and under
   pointers without hover. Nothing here touches existing classes destructively.
   ========================================================================== */

/* 1 · Per-element type reveal — extends the existing .kw-rv system with a
   tighter, faster pass over individual paragraphs / figures inside long-form
   essays + method / care / studio / projects. Driven by chrome.js. */
html.kw-anim .kw-rv-line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms cubic-bezier(.2,.7,.2,1),
              transform 320ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

html.kw-anim .kw-rv-line.kw-rv-line--in { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {

  @media (prefers-reduced-motion: no-preference) {
    html.kw-anim .kw-rv-line {
      animation: kw-line-rise 360ms cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
    @keyframes kw-line-rise {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
  }

}
@media (prefers-reduced-motion: reduce) {

  html.kw-anim .kw-rv-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

}

/* 2 · Reading-progress hairline — a 2px terra rule pinned to the top of the
   viewport, filling left → right as the visitor moves through the page.
   chrome.js mounts it only on journal / method / care + presence of an
   <article>. Hidden entirely under reduced-motion. */
.k-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}

.k-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--kw-terra);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {

  .k-progress { display: none !important; }

}

/* 3 · Hover-revealed specimen detail — on materials.html. On a precise
   pointer the .k-lib__note lifts from a slightly-lowered rest state on
   hover, paired with a small "+ view" hint floated over the swatch. On
   coarse pointers the hint becomes a static "tap to read" label. */
.k-lib__sw { position: relative; }

.k-lib__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-family: var(--kw-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-bone);
  background: rgba(29, 35, 44, 0.74);
  padding: 6px 10px;
  border-radius: 1px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {

  .k-lib__card:hover .k-lib__hint,
  .k-lib__card:focus-within .k-lib__hint {
    opacity: 1;
    transform: none;
  }

  .k-lib__card .k-lib__note,
  .k-lib__card .k-lib__meta {
    transition: opacity .35s ease, transform .35s ease;
  }

  .k-lib__card .k-lib__note { transform: translateY(2px); opacity: 0.55; }

  .k-lib__card:hover .k-lib__note,
  .k-lib__card:focus-within .k-lib__note {
    opacity: 0.85;
    transform: none;
  }

}
@media (hover: none), (pointer: coarse) {

  .k-lib__hint {
    position: static;
    display: inline-block;
    margin: 10px 16px 0;
    opacity: 0.55;
    transform: none;
    background: transparent;
    color: var(--kw-ink);
    padding: 0;
  }

}
@media (prefers-reduced-motion: reduce) {

  .k-lib__hint,
  .k-lib__card .k-lib__note,
  .k-lib__card .k-lib__meta { transition: none !important; transform: none !important; }

  .k-lib__hint { opacity: 1; }

}

/* 4 · Marginalia animating in — targets .k-marg (Agent A's class). If the
   class is absent the rule is a no-op. When present, the marker fades in
   180ms after its companion paragraph reveals. */
html.kw-anim .k-marg {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms cubic-bezier(.2,.7,.2,1) 180ms,
              transform 300ms cubic-bezier(.2,.7,.2,1) 180ms;
  will-change: opacity, transform;
}

html.kw-anim .k-marg.k-marg--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {

  html.kw-anim .k-marg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

.k-lib__card { cursor: pointer; }

/* Footer links — native cursor, with a left-anchored underline that draws
   in on hover. Augments the existing opacity-only hover state. */
.k-foot__list a {
  cursor: default;
  position: relative;
  display: inline-block;
  width: fit-content;
}

.k-foot__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  opacity: 0.45;
}

.k-foot__list a:hover::after,
.k-foot__list a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {

  .k-foot__list a::after { transition: none; }

}

/* 6 · In-page anchor highlight — chrome.js adds .k-anchor-hit to the
   landed-on heading / eyebrow for 1.6s and a brief terra accent runs down
   its left edge. Silenced under reduced motion. */
.k-anchor-hit { position: relative; }

.k-anchor-hit::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--kw-terra);
  opacity: 0;
  animation: kw-anchor-flash 1.6s cubic-bezier(.2,.7,.2,1) both;
  pointer-events: none;
}

@keyframes kw-anchor-flash {
  0%   { opacity: 0; transform: scaleY(0.6); }
  18%  { opacity: 0.95; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {

  .k-anchor-hit::before { animation: none !important; opacity: 0 !important; }

}

/* 7 · Typeset section separators — existing .k-rule elements (12 places,
   all in long-form bodies) render as a centered em-dash with letter-
   spacing instead of a solid hairline, so transitions read as typeset
   rather than gridded. Inline style="margin" continues to control rhythm. */
.k-rule {
  background: transparent !important;
  height: auto !important;
  border: 0;
  display: block;
  position: relative;
  text-align: center;
  line-height: 1;
}

.k-rule::before {
  content: "—";
  font-family: var(--kw-mono);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--kw-ink);
  opacity: 0.34;
  display: inline-block;
  padding: 0 6px;
}

/* 8 · Focus rings on enrichments */
.k-lib__hint:focus-visible {
  outline: 2px solid var(--kw-terra);
  outline-offset: 2px;
}
/* Print — when the planner page itself is printed, hide the toolbar +
   panel + compare modal. The spec sheet has its own popup with its own
   print styles. */
@media print {
[data-no-print] {
    display: none !important;
  }

}

/* ==========================================================================
   BEFORE / AFTER SLIDER  —  .k-baslider
   --------------------------------------------------------------------------
   A draggable comparison figure. Two layers stacked, the AFTER layer
   clipped via inset(). A thin terra hairline + circular knob mark the
   split. Markup is shaped by before-after.js — the figure starts empty
   and the script injects .k-baslider__layer + .k-baslider__handle.
   ========================================================================== */
.k-baslider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: var(--kw-bone-2);
  border: 1px solid var(--kw-rule);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;        /* let JS own the gesture */
  cursor: ew-resize;
  isolation: isolate;
}
@media (max-width: 760px) {

  .k-baslider { aspect-ratio: 4 / 3; }

}

/* Labels — small mono caps, terra rule beneath, persist for screen
   readers even when the user has dragged past them. */
.k-baslider__label {
  position: absolute;
  z-index: 4;
  top: 18px;
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 6px 10px 6px 10px;
  background: rgba(29, 35, 44, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-left: 2px solid var(--kw-terra);
  pointer-events: none;
}

.k-baslider__label--before { left: 18px; }

.k-baslider__label--after  { right: 18px; border-left: 0; border-right: 2px solid var(--kw-terra); }

.k-baslider.is-dragging { cursor: ew-resize; }

/* Caption row sits beneath each slider in the Transformations section. */
.k-baslider-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 2px 0;
  border-top: 1px solid var(--kw-rule);
  margin-top: 16px;
}

.k-baslider-caption__num {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-terra);
}

.k-baslider-caption__text {
  font-family: var(--kw-sans);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--kw-ink);
  opacity: 0.78;
}

.k-baslider-caption__where {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.48;
}
@media (max-width: 700px) {

  .k-baslider-caption {
    flex-wrap: wrap;
    gap: 6px 16px;
  }

  .k-baslider-caption__text { order: 3; flex-basis: 100%; }

}

/* ==========================================================================
   METHOD PAGE — editorial rebuild (Cabana / AD / World of Interiors register)
   Scoped to method.html. All classes prefixed .k-method__ to avoid
   collisions with sibling pages owned by other agents.
   ----
   2026-05-26 rebuild: this page is now a magazine-grade page-turn through
   five movements. The legacy image-half layout (.k-method__hero with a
   background-image, .k-method__mv-img halves) is gone — every movement
   is now a typographic spread with a bespoke SVG plate. The third
   movement, Drawing, is the brand's signature and gets a full-bleed
   feature treatment with a self-drawing elevation and draughtsman's-
   notes sidebar.
   ----
   Many legacy class names are reused with new semantics (e.g.
   .k-method__hero is no longer a hero photo block, it is a typographic
   overture). New rules below in the EDITORIAL REBUILD block override
   the older ones earlier in the file for those shared selectors.
   ========================================================================== */

/* ---------- Sticky timeline rail ---------- */
.k-method__rail {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--kw-rule);
}

.k-method__rail-inner {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: 14px var(--kw-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.k-method__rail-eyebrow,
.k-method__rail-meta {
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.55;
}

.k-method__rail-meta { text-align: right; }

.k-method__rail-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.k-method__rail-list::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1px;
  background: var(--kw-rule);
  transform: translateY(-0.5px);
}

.k-method__rail-list > li {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.k-method__rail-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--kw-ink);
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.k-method__rail-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--kw-ink);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.k-method__rail-name {
  white-space: nowrap;
}

.k-method__rail-dot:hover { opacity: 0.9; }

.k-method__rail-dot.is-active {
  opacity: 1;
  color: var(--kw-terra);
}

.k-method__rail-dot.is-active .k-method__rail-mark {
  background: var(--kw-terra);
  border-color: var(--kw-terra);
  transform: scale(1.18);
}
@media (max-width: 900px) {

  .k-method__rail-inner { grid-template-columns: 1fr; gap: 8px; padding: 10px var(--kw-pad-sm); }

  .k-method__rail-eyebrow, .k-method__rail-meta { display: none; }

  .k-method__rail-name { display: none; }

  .k-method__rail-list::before { left: 12%; right: 12%; }

}

/* Reduced-motion: static rail, all names visible */
.k-method-static .k-method__rail-dot { opacity: 0.85; }

.k-method-static .k-method__rail-mark { transition: none; }
@media (prefers-reduced-motion: reduce) {

  .k-method__rail { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; }

  .k-method__rail-dot { opacity: 0.85; }

}

/* ---------- HERO — image is the headline ---------- */
.k-method__hero {
  position: relative;
  width: 100%;
  height: min(86vh, 880px);
  min-height: 560px;
  overflow: hidden;
  background: var(--kw-ink);
}

.k-method__hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 56px var(--kw-pad);
  color: #ffffff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  max-width: var(--kw-max);
  margin: 0 auto;
}

.k-method__hero-cap .k-cap {
  grid-column: 1 / -1;
  color: #ffffff;
  opacity: 0.82;
}

.k-method__hero-h1 {
  font-size: clamp(56px, 8.6vw, 128px);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.038em;
  margin: 12px 0 0;
  color: #ffffff;
}

.k-method__hero-cta {
  align-self: end;
  color: #ffffff;
  font-family: var(--kw-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.k-method__hero-cta:hover {
  background: #ffffff;
  color: var(--kw-ink);
  border-color: #ffffff;
}
@media (max-width: 760px) {

  .k-method__hero { height: 74vh; min-height: 480px; }

  .k-method__hero-cap { grid-template-columns: 1fr; padding: 32px var(--kw-pad-sm); gap: 20px; }

  .k-method__hero-cta { justify-self: start; }

}

/* ---------- MOVEMENT — full-bleed two-up split ---------- */
.k-method__mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(78vh, 760px);
  border-top: 1px solid var(--kw-rule);
  background: #ffffff;
}

.k-method__mv:last-of-type { border-bottom: 1px solid var(--kw-rule); }

.k-method__mv--reverse { direction: rtl; }

.k-method__mv--reverse > * { direction: ltr; }

.k-method__mv-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px clamp(36px, 6vw, 96px);
  background: #ffffff;
  position: relative;
}

.k-method__mv-num {
  font-family: var(--kw-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-terra);
  margin-bottom: 28px;
  display: inline-block;
}

.k-method__mv-title {
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.034em;
  margin: 0 0 28px;
  color: var(--kw-ink);
}

.k-method__mv-dek {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: var(--kw-ink);
  opacity: 0.82;
  margin: 0 0 36px;
  max-width: 38ch;
  font-weight: 400;
}
@media (max-width: 900px) {

  .k-method__mv {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .k-method__mv--reverse { direction: ltr; }

  .k-method__mv-text {
    padding: 56px var(--kw-pad-sm);
  }

  .k-method__mv-title { margin-bottom: 18px; }

  .k-method__mv-dek { margin-bottom: 24px; }

}

/* ---------- NUMBERS BAND ---------- */
.k-method__numbers {
  background: #ffffff;
  border-top: 1px solid var(--kw-rule);
  border-bottom: 1px solid var(--kw-rule);
  /* Heyoasis-feel rhythm: 152/104, matching the new .k-section cadence. */
  padding: 152px 0;
}
@media (max-width: 760px) {

  .k-method__numbers { padding: 104px 0; }

}

.k-method__numbers-eyebrow {
  display: block;
  color: var(--kw-ink);
  opacity: 0.5;
  margin-bottom: 56px;
}

.k-method__numbers-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 40px;
}

.k-method__numbers-grid > li {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--kw-rule);
  padding-top: 22px;
}

.k-method__numbers-fig {
  font-size: clamp(56px, 6vw, 96px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.032em;
  color: var(--kw-ink);
}

.k-method__numbers-cap {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.7;
}
@media (max-width: 900px) {

  .k-method__numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }

}
@media (max-width: 480px) {

  .k-method__numbers-grid { grid-template-columns: 1fr; }

}

/* ---------- FAQ — tight accordion ---------- */
.k-method__faq {
  margin-top: 40px;
  border-top: 1px solid var(--kw-rule);
}

.k-method__faq-item {
  border-bottom: 1px solid var(--kw-rule);
}

.k-method__faq-q {
  cursor: pointer;
  list-style: none;
  padding: 26px 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--kw-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
}

.k-method__faq-q::-webkit-details-marker { display: none; }

.k-method__faq-q::after {
  content: "+";
  font-family: var(--kw-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--kw-ink);
  opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.25s ease;
  flex-shrink: 0;
}

.k-method__faq-item[open] .k-method__faq-q::after {
  content: "−";
  opacity: 1;
  color: var(--kw-terra);
}

.k-method__faq-q:hover { color: var(--kw-terra); }

.k-method__faq-a {
  font-size: 16px;
  line-height: 1.55;
  color: var(--kw-ink);
  opacity: 0.75;
  margin: 0 0 26px;
  max-width: 62ch;
}

.k-method__faq-a a {
  color: var(--kw-terra);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
@media (max-width: 600px) {

  .k-method__faq-q { font-size: 18px; padding: 22px 0; }

}

/* ---------- CTA — single closing block ---------- */
.k-method__cta {
  background: var(--kw-bone-2);
  padding: 160px 0;
  text-align: center;
  border-top: 1px solid var(--kw-rule);
}
@media (max-width: 760px) {

  .k-method__cta { padding: 112px 0; }

}

.k-method__cta-h2 {
  font-size: clamp(48px, 5.4vw, 80px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.032em;
  margin: 0 0 48px;
  color: var(--kw-ink);
}

.k-method__cta-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

@keyframes kw-wiz-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

/* Step entrance — quieter than the original 12px slide. */
@keyframes kw-wiz-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* ==========================================================================
   MOBILE FRIENDLINESS — comprehensive sweep
   --------------------------------------------------------------------------
   Audit pass (May 2026). Touches NOTHING above this point destructively;
   only tightens / adds rules under existing min-width breakpoints. All
   rules below scope to (max-width: …) so desktop is unaffected.

   Targets:
     · 768  — tablet (iPad portrait)
     · 640  — large phone (iPhone Plus / 14 Pro Max)
     · 480  — phone (iPhone 12/13/14 standard)
     · 380  — phone (iPhone SE / mini)

   Fixes cover:
     1. Horizontal overflow guard (html, body, wrap).
     2. Inline-grid HTML styles (repeat(4|6|12), 1fr 1fr, 1.4fr 1fr, etc.).
        These are written in style="..." on individual pages and would not
        respond at narrow widths without the attribute selectors below.
     3. Touch targets ≥ 44px on tap-able elements (nav cta, k-btn, form chips).
     4. Hero sizing and CTA stacking on phones.
     5. Mega-footer column collapse below 540.
     6. Wizard preview + step nav + tile grid at narrow widths.
     7. Planner readout + controls + paint grid stacking.
     8. Before/after slider hint label on coarse pointers.
     9. Spec tables, k-spec-list, k-prose, k-feat-split, k-detail.
    10. Journal essay readability (line-length already 680, just tighten gutters).
    11. Method page 5-movement stacks image-above-text.
    12. Long words / pre-formatted strings break instead of overflow.
   ========================================================================== */

@media (max-width: 768px) {

  /* Root overflow guard — any one stray inline grid or oversize image
     should never push the body wider than the viewport on a phone.
     Use `clip`, not `hidden`: `overflow-x: hidden` makes the body a
     scroll container (the cross-axis computes to `auto`), which breaks
     `position: sticky` descendants (the pinned step-in section, sticky
     figures) and stutters iOS momentum scrolling. `clip` trims the
     same horizontal bleed without establishing a scroll container. */
  html, body { overflow-x: clip; max-width: 100%; }

  /* Wrap padding stays at --kw-pad-sm; collapse the largest gutters. */
  :root { --kw-pad-sm: 24px; }

  /* Long URLs, codes (e.g. NEIGHBOURHOOD · ZIP), and tabular spec values
     should wrap rather than push the layout wider. .k-page-hero__title
     joins the list because trade.html ("For the&nbsp;trade.") and
     visit.html ("By&nbsp;appointment.") use non-breaking spaces that
     clip at 320px without explicit wrapping. */
  .k-spec-list__val, .k-card__title, .k-h2, .k-h3, .k-hero-text,
  .k-page-hero__title {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  /* Touch targets — every visible link in the nav, every CTA, every form
     control needs to be at least 44px on a tap surface. */
  .k-btn { min-height: 44px; padding: 12px 18px; }

  .k-btn,
  .k-cap a, .k-eyebrow a { -webkit-tap-highlight-color: transparent; }

  .k-form input,
  .k-form select,
  .k-form textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom on focus */ }

  .k-foot__news-row input { font-size: 16px; min-height: 44px; }

  .k-foot__news-btn { min-height: 44px; }

  /* Headings shrink one more notch on phones — clamp() in the base already
     handles most cases, but the `.k-h2` is a fixed 56px on desktop which
     reads too dense at 375 px wide. */
  .k-h2 { font-size: clamp(34px, 7.6vw, 44px); }

  .k-h3 { font-size: clamp(26px, 6vw, 32px); }

  /* Pull quote sized to mobile — already had clamp() but the side margins
     get tight on narrow screens. */
  .k-pull { font-size: clamp(24px, 6.2vw, 36px); }

  .k-pullquote { padding: 0 8px; }

  /* INLINE grid attribute selectors — these match the inline styles
     written directly into HTML files (index.html, offerings.html,
     spaces.html, materials.html, trade.html, visit.html, journal.html,
     studio.html, care.html, space.html, etc.). The attribute selector
     wins at equal specificity because element-styles are 1,0,0,0 but
     `[style*=…]` is 0,1,0,0. We use !important sparingly. */

  /* 12-column gallery on home becomes 2 cols, fixed row height auto. */
  [style*="grid-template-columns: repeat(12, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
  }

  [style*="grid-template-columns: repeat(12, 1fr)"] > figure {
    grid-column: span 1 !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 5;
  }

  /* 6-column offering colour strips → 3 cols. */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 4-column photo strips (home, offerings, spaces) → 2 cols. */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Two-column splits that lived in inline styles → 1 col. */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* `auto 1fr` (the Signed monogram + pull on home) and `1fr auto`
     (Trade strip CTA on home, journal sub-eyebrow) stack on mobile. */
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
  }

  /* SIGNED / "In confidence" — the giant "open-quote" or monogram column
     was set with inline color/styling. On phones, give it less vertical
     weight. */
  .k-section--ink [style*="font-size: 64px"] { font-size: 36px !important; line-height: 1 !important; }

  .k-section--ink [style*="width=\"100\""],
  .k-section--ink svg[width="100"][height="180"] { width: 56px; height: auto; }

  /* k-feat-split — already stacks at 860; reinforce gap so blocks
     aren't tight. */
  .k-feat-split { gap: 32px !important; }
.k-feat-split .k-img { max-height: 70vh; }

  .k-hero-cinema { min-height: 80vh; }

  /* Page hero text — already uses clamp() but we want it less tight at
     375 px. The 7vw at 375 = 26px; bump baseline up a touch. */
  .k-hero-text { font-size: clamp(40px, 11vw, 64px); }

  .k-hero-dek { font-size: 17px; }

  /* Footer — the 5/6-col layout already collapses to 2 at 900 and 1 at
     540. Make sure padding and link spacing are tap-friendly. */
  .k-foot__list a { padding: 4px 0; min-height: 28px; }

  .k-foot__col-title { margin-bottom: 14px; }

  .k-foot__head { font-size: 32px; }

  /* Method page — at 900 the rail-name and rail-eyebrow already drop.
     Reinforce hero CTA full-width on phones; mv-img height. */
  .k-method__hero-h1 { font-size: clamp(40px, 11vw, 72px); }

  .k-method__hero-cap { padding: 24px var(--kw-pad-sm); }

  .k-method__mv-title { font-size: clamp(36px, 9vw, 56px); }

  .k-method__mv-dek { font-size: 17px; }

  .k-method__mv-text { padding: 48px var(--kw-pad-sm); }

  /* Compare section — editorial two-column. Mobile rules live with the
     .k-vs2 block below. No min-width is set here. */

  /* k-spec-list — at 700 it already collapses; reinforce padding so
     long values like "Vegetable-tanned leather over timber · soap-finished
     oak · honed stone" wrap softly rather than overflow. */
  .k-spec-list__val { word-break: break-word; }

  /* k-prose — stacked at 900; tighten gap and lede font size. */
  .k-prose__body { font-size: 17px; }

  .k-prose__body p { font-size: 17px; line-height: 1.55; }

  /* Pagemark — narrow widths can run the three spans into each other. */
  .k-pagemark { flex-wrap: wrap; gap: 6px 14px; }

  .k-pagemark span,
  .k-pagemark a { font-size: 9.5px; }

  /* Materials filter chips — bigger tap surface. */
  .k-lib__chip { padding: 10px 14px; min-height: 38px; }

  .k-lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .k-baslider__label { font-size: 9px; padding: 5px 8px; letter-spacing: 0.18em; top: 12px; }

  .k-baslider__label--before { left: 12px; }

  .k-baslider__label--after  { right: 12px; }

  /* Triad — already 1-col at 760. Tighten internal padding. */
  .k-triad__cell { padding: 26px 22px 24px; }

  /* Concierge launcher — keep clear of bottom CTAs on phones. */
  .k-cc-launch { right: 16px; bottom: 16px; }

  /* Journal essays — articles already cap at 680. Tighten gutters
     so the body column doesn't kiss the screen edge on tiny phones,
     and shrink the drop-cap. */
  article { padding-left: 4px; padding-right: 4px; }

  .k-drop::first-letter { font-size: 4em; }

  /* Sample box / care callouts that use `1fr 1fr` and 64px gap on
     desktop — caught by the attribute selector above. The `.k-section`
     already uses 0 horizontal padding; the inner `.k-wrap` carries the
     gutter, which has already been collapsed to --kw-pad-sm above. */

  /* Buttons inside CTA rows on phones — wrap before tip onto next line. */
  .k-btns { gap: 12px; }

}
/* ----- iPhone-12 / iPhone-13 standard (390 wide) and below ------------- */
@media (max-width: 480px) {

  :root { --kw-pad-sm: 20px; }

  /* k-h2 / k-h3 final clamp at small phones. */
  .k-h2 { font-size: clamp(28px, 8vw, 36px); letter-spacing: -0.025em; }

  /* Footer 5-col → at 540 already 1 col; reinforce padding. */
  .k-foot__inner { padding: 64px var(--kw-pad-sm) 64px; }

  .k-foot__masthead { padding-bottom: 40px; }

  .k-foot__cols { padding: 40px 0; }

  .k-foot__head { font-size: 28px; }

  /* Method numbers grid — already 1-col at 480. Reinforce gap. */
  .k-method__numbers-grid { gap: 28px; }

  .k-method__numbers-fig { font-size: clamp(48px, 12vw, 64px); }

  /* k-grid--2 — already 1-col at 600; reinforce gap. */
  .k-grid { gap: 28px !important; }

  /* Spec-row keys can be very narrow on small screens. Stack key + val
     vertically (already does at 700; explicit here for safety). */
  .k-spec-list__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }

  .k-spec-list__key { font-size: 9px; letter-spacing: 0.18em; }

  .k-spec-list__val { font-size: 14px; }

  /* Visit-page and trade-page two-column splits already collapse.
     Reinforce form gap. */
  .k-form { gap: 22px; }

  .k-form input,
  .k-form select,
  .k-form textarea { font-size: 16px; padding: 10px 0; }

  /* Inline-style FAQ + accordions — k-method__faq-q font scale already
     drops at 600; no changes needed. */

}
/* ----- iPhone SE (375 wide) and below ---------------------------------- */
@media (max-width: 380px) {

  :root { --kw-pad-sm: 16px; }

  /* Trim outer wrap padding so the cards aren't stamp-sized. */
  .k-wrap { padding: 0 var(--kw-pad-sm); }

}
/* ----- Tablet (≤ 1024) — between phone and desktop --------------------- */
@media (max-width: 1024px) and (min-width: 769px) {

  /* Method numbers grid — at 900 the inline 4-col becomes 2 already.
     Tablet keeps the 2-col rhythm. */

  /* Inline 4-column photo strips on offerings/spaces/home — at this
     tablet width keep them as 2-col rather than the tight 4. */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

}

@keyframes kw-hero-bloom {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.035); }
}

@keyframes kw-hero-paper-drift {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* Layer 4 — Corner watermark. Faint terra diagonal hatching, lower-right.
   Layer 5 — Micro-tilt animation on the stamp. */
.k-hero-cinema::before {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 320px; height: 320px;
  pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(94, 34, 44, 0.10) 0 1px,
    rgba(94, 34, 44, 0) 1px 9px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 75%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 75%);
  z-index: 1;
  transform-origin: 75% 75%;
  animation: kw-hero-stamp-tilt 48s ease-in-out infinite;
}

@keyframes kw-hero-stamp-tilt {
  0%, 100% { transform: rotate(-0.35deg); }
  50%      { transform: rotate(0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
.k-hero-cinema::before { animation: none !important; transform: none !important; }

}

/* ==========================================================================
   PULL-QUOTE BREAKS — Home page caesuras (A, B, C, 2026-05-26)
   --------------------------------------------------------------------------
   Display-scale typography acting as the visual layer between content
   blocks. Three distinct postures so they don't read as the same
   component repeated.
   ========================================================================== */

.k-pullq {
  background: var(--kw-bone-2);
  /* Heyoasis-feel rhythm: bumped to match the new .k-section cadence. */
  padding: 152px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--kw-rule);
  border-bottom: 1px solid var(--kw-rule);
}

.k-pullq + .k-pullq,
.k-pullq + .k-section--paper,
.k-pullq + .k-section--ink,
.k-section--paper + .k-pullq,
.k-section--ink + .k-pullq { border-top: 0; }

.k-pullq__inner { max-width: 1180px; margin: 0 auto; position: relative; }

.k-pullq__quote {
  font-family: var(--kw-sans);
  font-size: clamp(54px, 8.4vw, 120px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--kw-ink);
  text-wrap: balance;
  margin: 0;
}

.k-pullq__dot { color: var(--kw-terra); }

.k-pullq__accent { color: var(--kw-terra); font-style: italic; font-weight: 500; }

/* Variant C — folio split */
.k-pullq--c { padding: 164px 0; }

.k-pullq__inner--folio {
  display: grid; grid-template-columns: 180px 1fr; gap: 72px;
  align-items: start;
}

.k-pullq__folio-meta {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--kw-rule-strong);
}

.k-pullq__folio-num { color: var(--kw-terra); opacity: 0.95; }

.k-pullq__folio-cap { opacity: 0.5; }

.k-pullq__quote--folio {
  font-size: clamp(44px, 7.6vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.042em;
  text-align: left;
}
@media (max-width: 900px) {

  /* Heyoasis-feel rhythm at phone scale: 104/116/112 to match the
     150% cadence applied at desktop without orphaning short content. */
  .k-pullq { padding: 104px 0; }
.k-pullq--c { padding: 112px 0; }

  .k-pullq__quote { font-size: clamp(38px, 11vw, 64px); letter-spacing: -0.036em; line-height: 1; }

  .k-pullq__inner--folio { grid-template-columns: 1fr; gap: 32px; }

  .k-pullq__folio-meta { flex-direction: row; justify-content: space-between; padding-top: 14px; }

  .k-pullq__quote--folio { font-size: clamp(40px, 11.5vw, 68px); }

}
@media (prefers-reduced-motion: no-preference) {
.k-pullq__quote, .k-pullq__folio-meta {
    opacity: 0; transform: translateY(8px);
    animation: kPullqRise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards 0.08s;
  }

  .k-pullq__quote { animation-delay: 0.18s; }

}

@keyframes kPullqRise { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   MATERIAL SPECIMENS BAND — home page Cabana-style swatch spread
   (2026-05-26). Real surface tones from catalogue.js rendered as
   layered CSS gradients (no stock photo).
   ========================================================================== */
.k-mat-band { background: #ffffff; border-top: 1px solid var(--kw-rule); border-bottom: 1px solid var(--kw-rule); }

/* Lead photo — full-width photographic anchor above the swatch grid. */
.k-mat-band__lead {
  position: relative;
  margin: 0 0 64px;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--kw-ink);
}

.k-mat-band__lead-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 50%;
  filter: saturate(0.92) brightness(1.0) contrast(1.04);
}

.k-mat-band__lead::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,17,22,0.00) 0%,
    rgba(14,17,22,0.00) 56%,
    rgba(14,17,22,0.42) 88%,
    rgba(14,17,22,0.66) 100%);
  pointer-events: none;
}

.k-mat-band__lead-cap {
  position: absolute;
  left: 36px; right: 36px; bottom: 28px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  color: var(--kw-paper);
  z-index: 1;
}

.k-mat-band__lead-meta {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.78;
}
@media (max-width: 760px) {

  .k-mat-band__lead { aspect-ratio: 4 / 3; margin-bottom: 48px; }

  .k-mat-band__lead-cap { left: 22px; right: 22px; bottom: 20px; flex-direction: column; gap: 8px; align-items: flex-start; }

  .k-mat-band__lead-meta { font-size: 10px; letter-spacing: 0.18em; }

}

/* Family nav — six material families above the swatch grid. Each one
   reads as a chapter doorway into the deeper materials.html catalogue.
   Number + name + specimen count. Hairline-bordered tiles, terra
   numeral, no images — pure typography so the band feels like an
   editorial table of contents, not a card row. */
.k-mat-band__families {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 72px;
}

.k-mat-band__family {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}

.k-mat-band__family-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
  transition: transform 0.35s var(--kw-ease-tylko, ease), box-shadow 0.35s ease;
}

.k-mat-band__family:hover .k-mat-band__family-img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 48px -26px rgba(29, 35, 44, 0.5);
}

.k-mat-band__family-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.k-mat-band__family-count {
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.5;
}
@media (max-width: 1100px) {

  .k-mat-band__families { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .k-mat-band__family-name { font-size: 13.5px; }

  .k-mat-band__family-count { font-size: 9px; }

}
@media (max-width: 600px) {

  .k-mat-band__families { grid-template-columns: repeat(2, 1fr); margin-bottom: 48px; }

  .k-mat-band__family { padding: 22px 18px; }

  .k-mat-band__family:nth-child(2n) { border-right: 0; }

  .k-mat-band__family:nth-child(-n+4) { border-bottom: 1px solid var(--kw-rule); }

  .k-mat-band__family-name { font-size: 15px; }

}

.k-mat-band__lede {
  max-width: 720px; margin: 0 0 64px;
  font-family: var(--kw-sans); font-size: 18px; line-height: 1.55;
  letter-spacing: -0.008em; color: var(--kw-ink); opacity: 0.78;
}

.k-mat-band__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}

.k-mat-band__tile {
  display: flex; flex-direction: column; gap: 22px;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.k-mat-band__tile:hover { transform: translateY(-4px); }

.k-mat-band__chip {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  background-color: var(--fill);
  background-image:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 6px, var(--grain) 6px, var(--grain) 6.6px),
    radial-gradient(120% 80% at 30% 25%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(90% 70% at 70% 80%, rgba(0,0,0,0.18), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, var(--fill), var(--grain));
  background-blend-mode: soft-light, normal, normal, normal;
  box-shadow: inset 0 0 0 1px rgba(29,35,44,0.08), 0 1px 0 rgba(29,35,44,0.04);
  outline: 1px solid transparent;
  outline-offset: 6px;
  transition: outline-color 0.45s ease, box-shadow 0.45s ease;
}

.k-mat-band__tile:hover .k-mat-band__chip {
  outline-color: var(--kw-terra);
  box-shadow: inset 0 0 0 1px rgba(29,35,44,0.12), 0 6px 18px rgba(29,35,44,0.08);
}

.k-mat-band__no {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--kw-mono); font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #ffffff; opacity: 0.78;
  mix-blend-mode: difference; pointer-events: none;
}

.k-mat-band__cap { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--kw-rule); }

.k-mat-band__tier { margin-top: 14px; opacity: 0.78; }

.k-mat-band__name { font-family: var(--kw-sans); font-size: 17px; line-height: 1.24; font-weight: 500; letter-spacing: -0.012em; color: var(--kw-ink); margin: 0; }

.k-mat-band__origin { font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kw-ink); opacity: 0.5; }

.k-mat-band__foot { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--kw-rule); display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.k-mat-band__cta { font-family: var(--kw-sans); font-size: 22px; line-height: 1.1; letter-spacing: -0.014em; font-weight: 500; color: var(--kw-ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 14px; transition: color 0.35s ease; }

.k-mat-band__cta-arrow { color: var(--kw-terra); font-family: var(--kw-mono); transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1); }

.k-mat-band__cta:hover { color: var(--kw-terra); }

.k-mat-band__cta:hover .k-mat-band__cta-arrow { transform: translateX(6px); }

.k-mat-band__foot-meta { opacity: 0.5; }
@media (max-width: 1100px) {
 .k-mat-band__grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
 
}
@media (max-width: 800px) {

  .k-mat-band__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  .k-mat-band__lede { margin-bottom: 48px; font-size: 16px; }

  .k-mat-band__foot { margin-top: 56px; padding-top: 24px; }

  .k-mat-band__cta { font-size: 18px; }

}
@media (max-width: 520px) {

  .k-mat-band__grid { grid-template-columns: 1fr; gap: 36px; }

  .k-mat-band__chip { aspect-ratio: 3 / 4; }

  .k-mat-band__name { font-size: 16px; }

}
@media (prefers-reduced-motion: reduce) {

  .k-mat-band__tile, .k-mat-band__chip, .k-mat-band__cta-arrow { transition: none; }

  .k-mat-band__tile:hover { transform: none; }

  .k-mat-band__cta:hover .k-mat-band__cta-arrow { transform: none; }

}

@keyframes kw-route-draw { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   HOME CLOSERS — Trade Strip (§11) + Visit (§12)
   Two closing moments before the footer. Trade reads as an editorial
   spec block on bone-2; Visit reads as a generous bone invitation.
   ========================================================================== */

/* Trade close — heyoasis-feel photo-backed editorial spec.
   A soft architectural photo sits behind the content as a backplate,
   muted to ~12% opacity so the editorial spec still reads. */
.k-trade-close {
  background: var(--kw-bone-2);
  background-image: linear-gradient(
      to right,
      rgba(238, 232, 218, 0.92) 0%,
      rgba(238, 232, 218, 0.78) 40%,
      rgba(238, 232, 218, 0.62) 100%),
    url("images/hero-atelier-bright-2200.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border-top: 1px solid var(--kw-terra);
  border-bottom: 1px solid var(--kw-rule);
  position: relative;
}

.k-trade-close > .k-wrap { position: relative; z-index: 1; }

.k-trade-close__grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1.45fr);
  gap: 72px;
  align-items: start;
}

.k-trade-close__num {
  font-family: var(--kw-mono);
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--kw-terra);
  font-weight: 400;
  margin-top: -0.12em;
  user-select: none;
}

.k-trade-close__eyebrow { margin-bottom: 22px; }

.k-trade-close__title { margin: 0 0 56px; max-width: 720px; }

.k-trade-close__list {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  border-top: 1px solid var(--kw-rule);
  max-width: 760px;
}

.k-trade-close__list > li {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.4fr;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--kw-rule);
  align-items: baseline;
}

.k-trade-close__list-key {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
}

.k-trade-close__list-val {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--kw-ink);
  opacity: 0.82;
}

.k-trade-close__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--kw-sans);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--kw-ink);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kw-ink);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.k-trade-close__cta-arrow {
  color: var(--kw-terra);
  font-family: var(--kw-mono);
  transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
}

.k-trade-close__cta:hover { color: var(--kw-terra); border-bottom-color: var(--kw-terra); }

.k-trade-close__cta:hover .k-trade-close__cta-arrow { transform: translateX(8px); }
@media (max-width: 900px) {

  .k-trade-close__grid { grid-template-columns: 1fr; gap: 16px; }

  .k-trade-close__num { font-size: clamp(96px, 32vw, 160px); margin-bottom: 8px; }

  .k-trade-close__title { margin-bottom: 40px; }

  .k-trade-close__list { margin-bottom: 40px; }

  .k-trade-close__list > li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }

  .k-trade-close__cta { font-size: 22px; }

}

/* Visit close — bone, display-scale title with KX plate, hairline meta row */
/* Visit close — heyoasis-feel photo-backed final invitation.
   A SoHo showroom photograph behind the content, washed in white so
   the final invitation reads photographic, not graphic. */
.k-visit-close {
  background-color: #ffffff;
  background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.84) 60%,
      rgba(255, 255, 255, 0.62) 100%),
    url("images/hero2-walkin-2560.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  position: relative;
}

.k-visit-close > .k-wrap { position: relative; z-index: 1; }

.k-visit-close__eyebrow { margin-bottom: 56px; }

.k-visit-close__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--kw-rule);
}

.k-visit-close__title {
  font-family: var(--kw-sans);
  font-size: clamp(64px, 11vw, 184px);
  line-height: 0.9;
  letter-spacing: -0.044em;
  font-weight: 500;
  margin: 0;
  color: var(--kw-ink);
  text-wrap: balance;
}

.k-visit-close__plate {
  width: 120px;
  height: 160px;
  color: var(--kw-ink);
  flex-shrink: 0;
}

.k-visit-close__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.k-visit-close__col-cap { opacity: 0.55; margin-bottom: 18px; }

.k-visit-close__addr {
  font-family: var(--kw-sans);
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.014em;
  font-weight: 500;
  color: var(--kw-ink);
  margin-bottom: 14px;
}

.k-visit-close__hours {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.55;
}

.k-visit-close__col--ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
@media (max-width: 900px) {

  .k-visit-close__head { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; margin-bottom: 40px; }

  .k-visit-close__plate { width: 96px; height: 128px; }

  .k-visit-close__meta { grid-template-columns: 1fr; gap: 36px; }

  .k-visit-close__eyebrow { margin-bottom: 36px; }

}

/* ==========================================================================
   SIGNED — dramatic dark-ink full-bleed moment.
   Huge KX monogram in terra, signature-style display line, a terra plate
   rule crossing the section, register of recent project numbers at the
   bottom in mono caps. The inside cover of a leather-bound portfolio.
   ========================================================================== */
.k-signed {
  position: relative;
  background: var(--kw-ink); color: var(--kw-bone);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.k-signed__plate {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--kw-terra); opacity: 0.55;
  transform: translateY(-50%);
}

.k-signed__inner { position: relative; }

.k-signed__head {
  display: flex; justify-content: space-between; align-items: baseline;
  color: rgba(255,255,255,0.5); margin-bottom: 88px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.08);
}

.k-signed__body {
  display: grid; grid-template-columns: minmax(220px, 28%) 1fr;
  gap: clamp(48px, 7vw, 112px); align-items: center;
}

.k-signed__mark { color: var(--kw-bone); line-height: 0; }

.k-signed__mark svg { width: 100%; height: auto; max-width: 320px; display: block; }

.k-signed__mark-x { stroke: var(--kw-terra); }

.k-signed__kicker { display: block; color: var(--kw-terra); opacity: 0.85; margin-bottom: 32px; }

.k-signed__line {
  font-family: var(--kw-sans); font-weight: 700;
  font-size: clamp(44px, 6.8vw, 104px); line-height: 1.0;
  letter-spacing: -0.04em; color: var(--kw-bone);
  margin: 0 0 36px; max-width: 16ch;
}

.k-signed__em { font-style: italic; font-family: "Georgia", "Times New Roman", serif; font-weight: 400; color: var(--kw-bone); }

.k-signed__dot { color: var(--kw-terra); }

.k-signed__caption {
  font-family: var(--kw-sans); font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.72); max-width: 56ch; margin: 0;
}

.k-signed__register {
  list-style: none; margin: 96px 0 0; padding: 28px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap; align-items: baseline;
}

.k-signed__register li { display: flex; align-items: baseline; gap: 10px; }

.k-signed__reg-label { color: var(--kw-terra); opacity: 0.85; }

.k-signed__reg-label--end { margin-left: auto; opacity: 0.45; color: rgba(255,255,255,0.55); }

.k-signed__reg-num { color: rgba(255,255,255,0.78); font-size: 13px; letter-spacing: 0.12em; }
@media (max-width: 900px) {

  .k-signed__head { margin-bottom: 56px; }

  .k-signed__body { grid-template-columns: 1fr; gap: 48px; }

  .k-signed__mark svg { max-width: 156px; }

  .k-signed__register { margin-top: 64px; gap: 18px 28px; }

  .k-signed__reg-label--end { margin-left: 0; }

}

/* ==========================================================================
   INTERIOR PAGE HEROES — heyoasis-feel photographic backdrops (2026-05-27).
   --------------------------------------------------------------------------
   Each interior page's existing hero gets a soft, page-scoped photographic
   backdrop. The image carries the moment; the editorial title and dek sit
   on top, washed in bone so they read cleanly. No markup changes — just
   page-scoped CSS via body[data-page="X"] selectors.
   ========================================================================== */

/* Shared backdrop scaffold — same gradient + photo pattern across pages,
   with each page-scoped rule supplying its own background-image. */
body[data-page="projects"] .k-reg-hero,
body[data-page="studio"]   .k-studio-hero,
body[data-page="method"]   .k-method__hero,
body[data-page="materials"] .k-hero-wrap,
body[data-page="trade"]    .k-page-hero,
body[data-page="visit"]    .k-page-hero,
body[data-page="care"]     .k-hero-wrap {
  position: relative;
}

body[data-page="projects"] .k-reg-hero::before,
body[data-page="studio"]   .k-studio-hero::before,
body[data-page="method"]   .k-method__hero::before,
body[data-page="materials"] .k-hero-wrap::before,
body[data-page="trade"]    .k-page-hero::before,
body[data-page="visit"]    .k-page-hero::before,
body[data-page="care"]     .k-hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  pointer-events: none;
}

body[data-page="projects"] .k-reg-hero > *,
body[data-page="studio"]   .k-studio-hero > *,
body[data-page="method"]   .k-method__hero > *,
body[data-page="materials"] .k-hero-wrap > *,
body[data-page="trade"]    .k-page-hero > *,
body[data-page="visit"]    .k-page-hero > *,
body[data-page="care"]     .k-hero-wrap > * {
  position: relative;
  z-index: 1;
}

/* Per-page backdrops — each pulls a verified real-photography Unsplash
   image, washed via a diagonal gradient so the editorial title reads. */
body[data-page="projects"] .k-reg-hero::before {
  background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.84) 50%,
      rgba(255, 255, 255, 0.62) 100%),
    url("images/hero-oak-2304.jpg");
}

body[data-page="studio"] .k-studio-hero::before {
  background-image: linear-gradient(
      135deg,
      rgba(241, 235, 222, 0.94) 0%,
      rgba(241, 235, 222, 0.82) 50%,
      rgba(241, 235, 222, 0.62) 100%),
    url("images/hero-corridor-2560.jpg");
}

body[data-page="method"] .k-method__hero::before {
  background-image: linear-gradient(
      135deg,
      rgba(241, 235, 222, 0.94) 0%,
      rgba(241, 235, 222, 0.82) 50%,
      rgba(241, 235, 222, 0.62) 100%),
    url("images/hero-moody-2560.jpg");
}

body[data-page="materials"] .k-hero-wrap::before {
  background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.84) 50%,
      rgba(255, 255, 255, 0.66) 100%),
    url("images/project-beekman-2560.jpg");
}

body[data-page="trade"] .k-page-hero::before {
  background-image: linear-gradient(
      135deg,
      rgba(241, 235, 222, 0.94) 0%,
      rgba(241, 235, 222, 0.78) 50%,
      rgba(241, 235, 222, 0.58) 100%),
    url("images/hero-dressing-2400.jpg");
}

body[data-page="visit"] .k-page-hero::before {
  background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.84) 50%,
      rgba(255, 255, 255, 0.62) 100%),
    url("images/hero2-walkin-2560.jpg");
}

body[data-page="care"] .k-hero-wrap::before {
  background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.82) 50%,
      rgba(255, 255, 255, 0.58) 100%),
    url("images/hero-dressing-2400.jpg");
}

/* The materials and care heroes are .k-wrap-only sections without their
   own padding; give them a comfortable internal padding so the backdrop
   has room to breathe. */
body[data-page="materials"] .k-hero-wrap,
body[data-page="care"] .k-hero-wrap {
  padding-top: 88px;
  padding-bottom: 88px;
}
@media (max-width: 760px) {

  body[data-page="materials"] .k-hero-wrap,
  body[data-page="care"] .k-hero-wrap { padding-top: 64px; padding-bottom: 64px; }

}

/* ==========================================================================
   BUILDER — interactive closet configurator on design.html (2026-05-28).
   --------------------------------------------------------------------------
   Two-column layout: sticky photo canvas on the left (updates with the
   selected room type), six stepped option panels on the right. A sticky
   inverted summary bar at the bottom carries the running spec, indicative
   price range, and the consultation CTA.
   ========================================================================== */

/* Sticky bottom bar — inverted ink ground with terra hairline above. */

/* Pill button modifier — tylko-style high-radius outlined / filled
   buttons. Applied to consultation CTAs across the site where the
   bigger-feel commitment is appropriate. */
.k-btn--pill {
  border-radius: 999px !important;
}

/* ==========================================================================
   DESIGN PAGE — CALENDLY EMBED (added 2026-05-27).
   --------------------------------------------------------------------------
   The "Pick a time" section embeds Calendly inline below the project-intake
   form. Visitors who'd rather book directly can; the form-fill flow still
   exists for those who prefer to send context first and let the atelier
   reach out. The container is light-toned to match the bone-paper palette
   so Calendly's themed widget settles in without breaking the editorial
   register.
   ========================================================================== */

/* ==========================================================================
   DESIGN PAGE HERO — heyoasis-feel photographic backdrop (added 2026-05-27).
   --------------------------------------------------------------------------
   The new design.html is the designer-consultation entry point (replaced
   the prior interactive wizard). The hero carries a soft drafting-hand
   photo behind the editorial header, washed in bone so the title and
   dek read cleanly.
   ========================================================================== */
.k-design-hero {
  background-color: var(--kw-bone);
  background-image: linear-gradient(
      135deg,
      rgba(241, 235, 222, 0.94) 0%,
      rgba(241, 235, 222, 0.82) 50%,
      rgba(241, 235, 222, 0.66) 100%),
    url("images/hero3-styled-2560.jpg");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  position: relative;
}

.k-design-hero > .k-wrap { position: relative; z-index: 1; }

.k-design-hero .k-page-hero__dek {
  max-width: 620px;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.42;
  color: var(--kw-ink);
  opacity: 0.78;
  margin-top: 32px;
}

.k-design-form { background: #ffffff; }

/* Editorial paragraph alternative to the 3-card "Or, another way in"
   block — three inline links inside a single justified paragraph. */
.k-design-alt { max-width: 880px; }

.k-design-alt__eye { display: block; margin-bottom: 28px; }

.k-design-alt__body {
  font-family: var(--kw-sans);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--kw-ink);
  max-width: 760px;
}

.k-design-alt__body a {
  color: var(--kw-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--kw-rule-strong);
  transition: color 0.24s ease, border-color 0.24s ease;
}

.k-design-alt__body a:hover {
  color: var(--kw-terra);
  border-bottom-color: var(--kw-terra);
}

.k-design-alt__body .k-dot { color: var(--kw-terra); }

/* Form select — custom chevron + hairline underline so it matches the
   text inputs above. Was rendering with native OS chrome (rounded box,
   default dropdown arrow), which undermined the editorial register. */
.k-eform__field > select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' width='14' height='8'%3E%3Cpath d='M 2 2 L 10 10 L 18 2' stroke='%231d232c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
  border: 0;
  border-bottom: 1px solid var(--kw-rule-strong);
  border-radius: 0;
  cursor: pointer;
}

.k-eform__field > select:focus {
  outline: none;
  border-bottom-color: var(--kw-terra);
}

/* ==========================================================================
   IN CONFIDENCE — heyoasis-feel photo-cards (added 2026-05-27).
   --------------------------------------------------------------------------
   Three photographic quote cards. Each one carries a single trade or
   client quote overlaid bottom-left over a soft veil. 4:5 portrait
   ratio so they read as plates, not banners.
   ========================================================================== */
.k-confidence__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}

.k-confidence__card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: var(--kw-ink);
}

.k-confidence__card-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 42%;
  filter: saturate(0.92) brightness(1.0) contrast(1.04);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}

.k-confidence__card:hover .k-confidence__card-img { transform: scale(1.04); }

.k-confidence__card-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,17,22,0.10) 0%,
    rgba(14,17,22,0.00) 32%,
    rgba(14,17,22,0.00) 50%,
    rgba(14,17,22,0.48) 84%,
    rgba(14,17,22,0.78) 100%);
  pointer-events: none;
}

.k-confidence__card-body {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  z-index: 1;
  color: var(--kw-paper);
}

.k-confidence__card-quote {
  font-family: var(--kw-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--kw-paper);
  margin: 0 0 18px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.34);
  text-wrap: balance;
}

.k-confidence__card-quote .k-dot { color: var(--kw-terra); }

.k-confidence__card-attrib {
  display: block;
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kw-paper);
  opacity: 0.78;
}
@media (max-width: 900px) {

  .k-confidence__cards { grid-template-columns: 1fr; gap: 16px; }

  .k-confidence__card { aspect-ratio: 16 / 10; }

  .k-confidence__card-body { left: 22px; right: 22px; bottom: 22px; }

  .k-confidence__card-quote { font-size: clamp(17px, 4.4vw, 20px); }

}

/* ==========================================================================
   FEATURED SPACES — heyoasis-feel lead spread (added 2026-05-27).
   --------------------------------------------------------------------------
   One full-bleed photographic feature project breaking out of the wrap,
   followed by a 3-column grid of supporting cards inside the wrap. The
   lead spread is 16:9 desktop / 4:3 mobile, with the project title and
   meta overlaid at the bottom-left over a soft gradient veil.
   ========================================================================== */
.k-projects__lead {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 56px;
  overflow: hidden;
  background: var(--kw-ink);
  text-decoration: none;
  color: var(--kw-paper);
}

.k-projects__lead-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 38%;
  filter: saturate(0.94) brightness(1.02) contrast(1.02);
  transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}

.k-projects__lead:hover .k-projects__lead-img { transform: scale(1.025); }

.k-projects__lead-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14,17,22,0.00) 0%,
    rgba(14,17,22,0.00) 46%,
    rgba(14,17,22,0.50) 80%,
    rgba(14,17,22,0.84) 100%);
  pointer-events: none;
}

.k-projects__lead-body {
  position: absolute;
  left: var(--kw-pad); right: var(--kw-pad); bottom: 56px;
  z-index: 1;
  max-width: 720px;
}

.k-projects__lead-num {
  display: block;
  margin-bottom: 18px;
  color: #d8a6ab;
  opacity: 1;
}

.k-projects__lead-title {
  font-family: var(--kw-sans);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--kw-paper);
  margin: 0 0 18px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.36);
  text-wrap: balance;
}

.k-projects__lead-title .k-dot { color: #d8a6ab; }

.k-projects__lead-dek {
  display: block;
  font-family: var(--kw-sans);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--kw-paper);
  opacity: 0.88;
  margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.32);
}

.k-projects__lead-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kw-paper);
  border-bottom: 1px solid rgba(255,255,255,0.42);
  padding-bottom: 6px;
  transition: border-color 0.32s, color 0.32s;
}

.k-projects__lead-arrow { transition: transform 0.32s cubic-bezier(.16,1,.3,1); }

.k-projects__lead:hover .k-projects__lead-cta { border-color: var(--kw-paper); }

.k-projects__lead:hover .k-projects__lead-arrow { transform: translateX(6px); }

.k-projects__lead:focus-visible { outline: 3px solid var(--kw-terra); outline-offset: 4px; }
@media (max-width: 900px) {

  .k-projects__lead { aspect-ratio: 4 / 3; margin-bottom: 40px; }

  .k-projects__lead-body { left: var(--kw-pad-sm); right: var(--kw-pad-sm); bottom: 32px; }

  .k-projects__lead-title { font-size: clamp(28px, 7vw, 48px); margin-bottom: 14px; }

  .k-projects__lead-dek { font-size: 16px; margin-bottom: 18px; }

  .k-projects__lead-num { margin-bottom: 14px; }

}
@media (max-width: 560px) {

  .k-projects__lead { aspect-ratio: 4 / 5; }

  .k-projects__lead-title { font-size: clamp(24px, 8.4vw, 38px); }

  .k-projects__lead-dek { font-size: 15px; }

}

@keyframes kw-bleed-kenburns {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  50%  { transform: scale(1.07) translate3d(-0.4%, -0.2%, 0); }
  100% { transform: scale(1.03) translate3d(0, 0, 0); }
}

/* ==========================================================================
   CHAPTER HEADINGS — heyoasis-feel recurring motif (added 2026-05-27).
   --------------------------------------------------------------------------
   heyoasis.com uses "Hello, X" as a chapter-heading device. The Klosetworx
   equivalent: first-person plural declarative sentence + terra full-stop,
   prefixed by a roman-numeral chapter counter. Six placements down the
   home page tie the brand voice together as a monograph TOC.
   ========================================================================== */
.k-chapter { display: block; margin-bottom: 64px; }

.k-chapter__num {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kw-terra);
  display: block;
  margin-bottom: 18px;
}

.k-chapter__head {
  font-family: var(--kw-sans);
  font-weight: 700;
  font-size: clamp(42px, 5.8vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  max-width: 20ch;
  color: var(--kw-ink);
  text-wrap: balance;
}

.k-chapter__head .k-dot { color: var(--kw-terra); }

.k-chapter__rule {
  display: block;
  height: 1px;
  background: var(--kw-rule);
  margin: 0 0 18px;
  width: 100%;
  max-width: 320px;
}

.k-chapter__tag {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.k-chapter__tag a { color: inherit; text-decoration: none; opacity: 0.8; }

.k-chapter__tag a:hover { color: var(--kw-terra); opacity: 1; }
@media (max-width: 600px) {

  .k-chapter { margin-bottom: 48px; }

  .k-chapter__head { font-size: clamp(28px, 8vw, 44px); max-width: 100%; }

  .k-chapter__num, .k-chapter__tag { font-size: 10px; letter-spacing: 0.2em; }

  .k-chapter__rule { max-width: 200px; }

}

/* ==========================================================================
   METHOD — EDITORIAL REBUILD (2026-05-26)
   --------------------------------------------------------------------------
   These rules override the legacy .k-method__hero / .k-method__mv image
   layout earlier in the file. The new spread is text + SVG + CSS only —
   no photographs. Every movement is a magazine page-turn; the third
   (Drawing) is the brand's signature and gets a full-bleed feature
   treatment with a self-drawing elevation and a draughtsman's-notes
   sidebar. The serif italic in the hero h1 borrows the 'em' treatment
   used elsewhere on the site for editorial sparkle.
   ========================================================================== */

/* ---------- HERO · typographic overture --------------------------------- */
/* Wipe legacy hero rules that assumed a hero photo block */
.k-method__hero {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: var(--kw-bone-2);
  border-bottom: 1px solid var(--kw-rule);
  padding: clamp(56px, 9vw, 120px) 0 clamp(72px, 11vw, 144px);
}

.k-method__hero-inner {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: 0 var(--kw-pad);
  position: relative;
}

.k-method__hero-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--kw-rule);
}

.k-method__hero-cap {
  /* Reuses legacy class — re-anchor it for the new context.
     Cancels the old absolute-positioned hero-photo caption rules. */
  position: static;
  left: auto; right: auto; bottom: auto;
  display: inline-block;
  padding: 0;
  margin: 0;
  max-width: none;
  color: var(--kw-ink);
  opacity: 0.6;
  grid-column: auto;
  grid-template-columns: none;
  align-items: baseline;
  gap: 0;
}

.k-method__hero-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.55;
}

.k-method__hero-meta .k-mono {
  letter-spacing: 0.16em;
  color: var(--kw-terra);
  opacity: 1;
}

.k-method__hero-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

/* The roman numeral V — page-opening drop, terra outline + filled depth */
.k-method__hero-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}

.k-method__hero-roman {
  font-family: var(--kw-sans);
  font-weight: 500;
  font-size: clamp(160px, 22vw, 320px);
  line-height: 0.86;
  color: var(--kw-terra);
  letter-spacing: -0.06em;
  display: block;
  /* Italic-leaning, like a magazine drop cap. */
  font-style: italic;
}

.k-method__hero-romansub {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.55;
  line-height: 1.6;
  padding-top: 4px;
  border-top: 1px solid var(--kw-rule);
}

.k-method__hero-copy { min-width: 0; }

.k-method__hero-h1 {
  position: static;
  font-family: var(--kw-sans);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: var(--kw-ink);
  margin: 0 0 clamp(28px, 3vw, 44px);
  text-wrap: balance;
}

.k-method__hero-h1 em {
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--kw-terra);
  letter-spacing: -0.024em;
}

.k-method__hero-dek {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
  color: var(--kw-ink);
  opacity: 0.78;
  max-width: 52ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
  letter-spacing: -0.006em;
}

/* Numbered TOC — the table-of-contents preview of the five movements */
.k-method__toc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kw-rule);
}

.k-method__toc-row {
  border-bottom: 1px solid var(--kw-rule);
  position: relative;
}

.k-method__toc-link {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(40px, 1fr) auto;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  color: var(--kw-ink);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.k-method__toc-num {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.k-method__toc-name {
  font-family: var(--kw-sans);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--kw-ink);
}

.k-method__toc-rule {
  display: block;
  height: 1px;
  background: var(--kw-rule);
  align-self: center;
  margin: 0 8px;
}

.k-method__toc-time {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.65;
  white-space: nowrap;
}

.k-method__toc-aster {
  color: var(--kw-terra);
  font-family: var(--kw-mono);
  font-weight: 600;
  margin-left: 4px;
}

.k-method__toc-link:hover { color: var(--kw-terra); padding-left: 12px; }

.k-method__toc-link:hover .k-method__toc-num,
.k-method__toc-link:hover .k-method__toc-time { opacity: 0.9; color: var(--kw-terra); }

.k-method__toc-row--feature .k-method__toc-name { color: var(--kw-terra); }

.k-method__toc-row--feature::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--kw-terra);
  border-radius: 50%;
  transform: translateY(-50%);
}

.k-method__toc-foot {
  margin: 24px 0 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.55;
  font-style: normal;
}

.k-method__hero-cta {
  /* Override legacy hero-cta which was positioned over a dark photo */
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: 16px 26px;
  background: var(--kw-ink);
  color: var(--kw-bone);
  font-family: var(--kw-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--kw-ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  align-self: start;
}

.k-method__hero-cta:hover {
  background: var(--kw-terra);
  border-color: var(--kw-terra);
  color: var(--kw-bone);
}

.k-method__hero-cta-arrow { font-size: 14px; line-height: 1; }
@media (max-width: 900px) {

  .k-method__hero-inner { padding: 0 var(--kw-pad-sm); }

  .k-method__hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .k-method__hero-figure { flex-direction: row; align-items: baseline; gap: 20px; padding-top: 0; }

  .k-method__hero-roman { font-size: clamp(120px, 36vw, 200px); }

  .k-method__hero-romansub { border-top: 0; padding-top: 0; max-width: 18ch; }

  .k-method__hero-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .k-method__hero-meta { width: 100%; justify-content: space-between; }

  .k-method__toc-link {
    grid-template-columns: 64px minmax(0,1fr) auto;
    column-gap: 16px;
    padding: 18px 0;
  }

  .k-method__toc-rule { display: none; }

  .k-method__toc-name { font-size: clamp(22px, 6.4vw, 30px); }

  .k-method__toc-row--feature::before { display: none; }

}

/* ---------- MOVEMENT SPREAD · standard (01, 02, 04, 05) ---------------- */
/* Override the legacy two-up image-half layout entirely */
.k-method__mv {
  display: block;
  grid-template-columns: none;
  align-items: stretch;
  min-height: 0;
  border-top: 1px solid var(--kw-rule);
  background: #ffffff;
  position: relative;
  padding: clamp(88px, 12vw, 168px) 0;
}

.k-method__mv:last-of-type { border-bottom: 1px solid var(--kw-rule); }

/* Hairline § dingbat between movements, terra */
.k-method__mv::before {
  content: "§";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  padding: 0 14px;
  font-family: var(--kw-mono);
  font-size: 14px;
  color: var(--kw-terra);
  line-height: 1;
}

.k-method__mv--reverse { direction: ltr; }

.k-method__mv--reverse > * { direction: ltr; }

.k-method__mv-inner {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: 0 var(--kw-pad);
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
  position: relative;
}

.k-method__mv--reverse .k-method__mv-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(180px, 0.5fr);
}

.k-method__mv--reverse .k-method__mv-numwrap { order: 3; }

.k-method__mv--reverse .k-method__plate { order: 2; }

.k-method__mv--reverse .k-method__mv-text { order: 1; }

.k-method__mv--reverse .k-method__mv-pagemark {
  left: auto;
  right: var(--kw-pad);
  text-align: right;
}

.k-method__mv-pagemark {
  position: absolute;
  top: -64px;
  left: var(--kw-pad);
  font-family: var(--kw-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kw-terra);
  opacity: 0.8;
}

.k-method__mv-numwrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
}

.k-method__mv-num {
  font-family: var(--kw-mono);
  font-weight: 500;
  font-size: clamp(120px, 14vw, 240px);
  line-height: 0.86;
  color: var(--kw-terra);
  letter-spacing: -0.06em;
  display: block;
}

.k-method__mv-numsub {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.55;
  border-top: 1px solid var(--kw-rule);
  padding-top: 14px;
}

/* Bespoke SVG plate */
.k-method__plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding: 28px 28px 22px;
  background: var(--kw-bone-2);
  border: 1px solid var(--kw-rule);
  color: var(--kw-ink);
}

.k-method__plate-svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--kw-ink);
}

.k-method__plate-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kw-rule);
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.65;
}

.k-method__plate-cap span:first-child { color: var(--kw-terra); opacity: 1; }

/* Plate SVG line-draw — fires when the host section enters viewport.
   Uses a 2000-unit dasharray (longer than any path in any plate), so we
   don't need to set pathLength on each individual <path>. The animation
   tweens offset from 2000 → 0 to draw the line in.
   ----
   chrome.js sets html.kw-anim only when motion is allowed, and adds
   .kw-rv--in to the host <section> as it scrolls into view. Until then
   the paths sit hidden (offset = 2000). */
.k-method__plate-d {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
}

html.kw-anim .k-method__mv .k-method__plate-d {
  stroke-dashoffset: 2000;
}

html.kw-anim .k-method__mv.kw-rv--in .k-method__plate-d {
  animation: kw-plate-draw 1700ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes kw-plate-draw {
  0%   { stroke-dashoffset: 2000; }
  100% { stroke-dashoffset: 0; }
}

/* Editorial text column */
.k-method__mv-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0 0;
  background: transparent;
  position: static;
}

.k-method__mv-title {
  font-family: var(--kw-sans);
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.0;
  font-weight: 500;
  letter-spacing: -0.034em;
  margin: 0 0 22px;
  color: var(--kw-ink);
}

.k-method__mv-dek {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
  color: var(--kw-ink);
  opacity: 0.82;
  margin: 0 0 36px;
  max-width: 38ch;
  font-weight: 400;
  letter-spacing: -0.008em;
}

.k-method__mv-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border-top: 1px solid var(--kw-rule);
  padding-top: 22px;
  width: 100%;
  max-width: 38ch;
}

.k-method__mv-meta > div {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  align-items: baseline;
  column-gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kw-rule);
}

.k-method__mv-meta > div:last-child { border-bottom: 0; padding-bottom: 0; }

.k-method__mv-meta dt {
  font-family: var(--kw-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kw-terra);
}

.k-method__mv-meta dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--kw-ink);
  opacity: 0.88;
}
@media (max-width: 1100px) {

  .k-method__mv-inner,
  .k-method__mv--reverse .k-method__mv-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 48px;
  }

  .k-method__mv-numwrap { grid-column: 1; }

  .k-method__plate { grid-column: 2; grid-row: 1 / span 2; }

  .k-method__mv-text { grid-column: 1; }

  .k-method__mv--reverse .k-method__mv-numwrap,
  .k-method__mv--reverse .k-method__mv-text { grid-column: 2; }

  .k-method__mv--reverse .k-method__plate { grid-column: 1; }

  .k-method__mv-num { font-size: clamp(96px, 18vw, 160px); }

}
@media (max-width: 760px) {

  .k-method__mv { padding: 104px 0; }

  .k-method__mv-inner,
  .k-method__mv--reverse .k-method__mv-inner {
    grid-template-columns: 1fr;
    padding: 0 var(--kw-pad-sm);
    gap: 28px;
  }

  .k-method__mv-numwrap,
  .k-method__plate,
  .k-method__mv-text,
  .k-method__mv--reverse .k-method__mv-numwrap,
  .k-method__mv--reverse .k-method__plate,
  .k-method__mv--reverse .k-method__mv-text { grid-column: 1; grid-row: auto; order: initial; }

  .k-method__mv-pagemark {
    position: static;
    top: auto; left: auto;
    margin-bottom: 8px;
  }

  .k-method__mv--reverse .k-method__mv-pagemark { text-align: left; right: auto; }

  .k-method__mv-numwrap { flex-direction: row; align-items: baseline; gap: 18px; padding-top: 0; }

  .k-method__mv-num { font-size: clamp(96px, 28vw, 144px); }

  .k-method__mv-numsub { border-top: 0; padding-top: 0; }

  .k-method__mv-title { font-size: clamp(34px, 9vw, 52px); margin-bottom: 16px; }

  .k-method__mv-dek { font-size: 17px; margin-bottom: 24px; }

  .k-method__plate { padding: 18px 18px 14px; }

}

/* ---------- MOVEMENT 03 · DRAWING (feature treatment) ------------------ */
/* The signature movement: full-bleed, blueprint-margin, self-drawing
   elevation, draughtsman's-notes sidebar. */
.k-method__mv--feature {
  background: var(--kw-bone-2);
  border-top: 1px solid var(--kw-terra);
  border-bottom: 1px solid var(--kw-terra);
  padding: clamp(96px, 13vw, 184px) 0;
  position: relative;
}

/* Override the generic § dingbat with a terra one anchored higher */
.k-method__mv--feature::before { color: var(--kw-terra); background: var(--kw-bone-2); }

.k-method__feat-head {
  max-width: var(--kw-max);
  margin: 0 auto clamp(48px, 6vw, 88px);
  padding: 0 var(--kw-pad);
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

.k-method__feat-pagemark {
  grid-column: 1 / -1;
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kw-terra);
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--kw-rule);
}

.k-method__feat-numwrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.k-method__feat-num {
  font-family: var(--kw-mono);
  font-weight: 500;
  font-size: clamp(160px, 20vw, 280px);
  line-height: 0.84;
  letter-spacing: -0.06em;
  color: var(--kw-terra);
  display: block;
}

.k-method__feat-titlewrap { padding-bottom: 12px; }

.k-method__feat-title {
  font-family: var(--kw-sans);
  font-weight: 500;
  font-size: clamp(56px, 7.6vw, 124px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--kw-ink);
  margin: 0 0 24px;
}

.k-method__feat-dek {
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.42;
  color: var(--kw-ink);
  opacity: 0.82;
  margin: 0;
  max-width: 44ch;
  letter-spacing: -0.008em;
}

.k-method__feat-canvas {
  max-width: var(--kw-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 96px);
  background: var(--kw-paper);
  border: 1px solid var(--kw-rule);
  position: relative;
}

.k-method__feat-canvas::before,
.k-method__feat-canvas::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Inner ruled border */
.k-method__feat-canvas::before {
  inset: 14px;
  border: 1px solid var(--kw-rule);
  opacity: 0.6;
}

/* Faint terra outer rule */
.k-method__feat-canvas::after {
  inset: -6px;
  border: 1px solid var(--kw-terra);
  opacity: 0.18;
}

/* The -6px outer rule must never widen the page */
.k-method__mv--feature { overflow-x: hidden; overflow-x: clip; }

.k-method__feat-corner {
  position: absolute;
  font-family: var(--kw-mono);
  font-size: 16px;
  color: var(--kw-terra);
  opacity: 0.7;
  line-height: 1;
  z-index: 1;
}

.k-method__feat-corner--tl { top: 8px; left: 8px; }

.k-method__feat-corner--tr { top: 8px; right: 8px; }

.k-method__feat-corner--bl { bottom: 8px; left: 8px; }

.k-method__feat-corner--br { bottom: 8px; right: 8px; }

/* Title-block stamp, bottom-right of the canvas */
.k-method__feat-stamp {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: var(--kw-paper);
  border: 1px solid var(--kw-terra);
  font-family: var(--kw-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kw-ink);
  z-index: 2;
}

.k-method__feat-stamp-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: baseline;
}

.k-method__feat-stamp-row span:first-child { color: var(--kw-terra); }

.k-method__feat-stamp-row span:last-child  { color: var(--kw-ink); }

.k-method__feat-svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
}

/* The self-drawing elevation lines. Each <path> in the markup carries
   the SVG attribute pathLength="1", so a single dasharray/offset tween
   covers all paths regardless of their actual stroke length.
   ----
   Triggers when the feature section enters viewport (chrome.js sets
   .kw-rv--in). Without kw-anim or with reduced motion, the paths
   render fully drawn (default dashoffset 0). */
.k-method__feat-d {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

html.kw-anim .k-method__mv--feature .k-method__feat-d {
  stroke-dashoffset: 1;
}

html.kw-anim .k-method__mv--feature.kw-rv--in .k-method__feat-d {
  animation: kw-feat-draw 2400ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Staggered passes when the section enters view:
   frame → bays → drawer/shelf detail → terra dimension lines.
   Order matters — more specific selectors come second, so the marks
   and dims override the generic .k-method__feat-d timing. */
html.kw-anim .k-method__mv--feature.kw-rv--in .k-method__feat-d--frame { animation-duration: 1400ms; animation-delay: 80ms; }

html.kw-anim .k-method__mv--feature.kw-rv--in .k-method__feat-d--mark  { animation-delay: 1600ms; animation-duration: 800ms; }

html.kw-anim .k-method__mv--feature.kw-rv--in .k-method__feat-d--dim   { animation-delay: 2100ms; animation-duration: 900ms; }

@keyframes kw-feat-draw {
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

/* Draughtsman's notes sidebar */
.k-method__feat-notes {
  max-width: var(--kw-max);
  margin: clamp(56px, 6vw, 96px) auto 0;
  padding: 0 var(--kw-pad);
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}

.k-method__feat-notes-title {
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kw-terra);
  margin: 0;
  border-top: 1px solid var(--kw-terra);
  padding-top: 16px;
  font-weight: 500;
  align-self: start;
}

.k-method__feat-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 24px;
}

.k-method__feat-notes-list > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--kw-rule);
}

.k-method__feat-notes-num {
  font-family: var(--kw-mono);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--kw-terra);
}

.k-method__feat-notes-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--kw-ink);
  opacity: 0.85;
  letter-spacing: -0.005em;
}

.k-method__feat-notes-foot {
  grid-column: 2;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--kw-rule);
  font-family: var(--kw-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.7;
}

.k-method__feat-notes-time { color: var(--kw-terra); opacity: 1; }
@media (max-width: 1100px) {

  .k-method__feat-head {
    grid-template-columns: 1fr;
    padding: 0 var(--kw-pad-sm);
    gap: 24px;
  }

  .k-method__feat-num { font-size: clamp(120px, 28vw, 200px); }

  .k-method__feat-canvas { padding: 32px 28px; margin: 0 var(--kw-pad-sm); }

  .k-method__feat-notes {
    grid-template-columns: 1fr;
    padding: 0 var(--kw-pad-sm);
    gap: 24px;
  }

  .k-method__feat-notes-list { grid-template-columns: 1fr; }

  .k-method__feat-notes-foot { grid-column: 1; }

}
@media (max-width: 700px) {

  .k-method__mv--feature { padding: 104px 0; }

  .k-method__feat-stamp { right: 16px; bottom: 16px; padding: 10px 12px; font-size: 8.5px; }

  .k-method__feat-stamp-row { grid-template-columns: 48px 1fr; gap: 10px; }

  .k-method__feat-canvas { padding: 22px 16px; margin: 0 var(--kw-pad-sm); }

  .k-method__feat-corner { font-size: 13px; }

}
/* ---------- Honour reduced motion -------------------------------------- */
/* If the user prefers reduced motion, the kw-anim gate is never added —
   the line-draw animations never start, and the plates render fully
   drawn from the first frame (because the unanimated default state is
   stroke-dashoffset: 0). */
@media (prefers-reduced-motion: reduce) {

  .k-method__plate-d,
  .k-method__feat-d,
  .k-method__feat-d--frame,
  .k-method__feat-d--mark,
  .k-method__feat-d--dim {
    stroke-dashoffset: 0 !important;
    animation: none !important;
    transition: none !important;
  }

}

/* Belt and braces: html without kw-anim also renders the lines fully drawn. */
html:not(.kw-anim) .k-method__plate-d,
html:not(.kw-anim) .k-method__feat-d {
  stroke-dashoffset: 0;
  animation: none;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ PROJECTS · THE REGISTER                                              ║
   ║                                                                      ║
   ║ Scoped to projects.html. A magazine-grade portfolio register: a      ║
   ║ leather-bound TOC hero (.k-reg-hero), a single featured plate as a   ║
   ║ monograph spread with hand-drawn plan view (.k-plate), a 9-card      ║
   ║ dossier grid (.k-reg), and a coda. Material chips throughout are     ║
   ║ CSS gradient swatches matching the home page library.                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── HERO · REGISTER TABLE OF CONTENTS ─── */
/* Heyoasis-feel rhythm: bumped to match the new .k-section cadence. */
.k-reg-hero { padding-top: 152px; padding-bottom: 152px; background: #ffffff; }

.k-reg-hero__inner { padding-top: 28px; padding-bottom: 16px; }

.k-reg-hero__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 28px; border-bottom: 1px solid var(--kw-rule); margin-bottom: 64px;
}

.k-reg-hero__cap { opacity: 0.8; }

.k-reg-hero__meta { display: flex; gap: 28px; font-family: var(--kw-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }

.k-reg-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 96px; align-items: start;
}

.k-reg-hero__figure { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

.k-reg-hero__roman {
  font-family: var(--kw-sans); font-weight: 500;
  font-size: clamp(160px, 22vw, 320px); line-height: 0.82; letter-spacing: -0.04em;
  color: var(--kw-terra); display: block;
}

.k-reg-hero__romansub { font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; opacity: 0.6; padding-left: 4px; }

.k-reg-hero__h1 {
  font-family: var(--kw-sans); font-weight: 500;
  font-size: clamp(48px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.028em;
  color: var(--kw-ink); margin: 0 0 28px;
}

.k-reg-hero__h1 em { font-style: italic; font-weight: 500; color: var(--kw-terra); }

.k-reg-hero__dek { font-family: var(--kw-sans); font-size: 18px; line-height: 1.52; letter-spacing: -0.006em; max-width: 640px; opacity: 0.78; margin: 0 0 48px; }

/* TOC — numbered rows with right-aligned years */
.k-reg-toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kw-rule); }

.k-reg-toc__row { border-bottom: 1px solid var(--kw-rule); }

.k-reg-toc__link {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: baseline; gap: 28px;
  padding: 22px 0; text-decoration: none; color: var(--kw-ink); transition: color 0.4s ease;
}

.k-reg-toc__num { font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kw-terra); opacity: 0.85; }

.k-reg-toc__name { font-family: var(--kw-sans); font-size: 22px; line-height: 1.18; letter-spacing: -0.014em; font-weight: 500; color: var(--kw-ink); transition: color 0.4s ease; }

.k-reg-toc__aster { color: var(--kw-terra); font-family: var(--kw-mono); font-size: 0.7em; vertical-align: super; margin-left: 4px; }

.k-reg-toc__rule { display: none; }

.k-reg-toc__year { font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kw-ink); opacity: 0.5; }

.k-reg-toc__link:hover .k-reg-toc__name,
.k-reg-toc__link:focus-visible .k-reg-toc__name { color: var(--kw-terra); }

.k-reg-toc__link:focus-visible { outline: 2px solid var(--kw-terra); outline-offset: 4px; }

.k-reg-toc__foot { display: flex; gap: 12px; align-items: baseline; padding-top: 24px; font-family: var(--kw-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
@media (max-width: 980px) {

  .k-reg-hero__grid { grid-template-columns: 1fr; gap: 56px; }

  .k-reg-hero__figure { position: static; flex-direction: row; align-items: baseline; }

  .k-reg-hero__roman { font-size: clamp(120px, 30vw, 200px); }

}
@media (max-width: 720px) {

  .k-reg-hero { padding-top: 104px; padding-bottom: 104px; }

  .k-reg-hero__head { flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 40px; }

  .k-reg-hero__meta { gap: 16px; }

  .k-reg-toc__link { grid-template-columns: 72px 1fr auto; gap: 16px; padding: 18px 0; }

  .k-reg-toc__name { font-size: 17px; }

  .k-reg-toc__num, .k-reg-toc__year { font-size: 10px; }

}

/* ─── FEATURED PLATE · № 1148 SPREAD ─── */
.k-plate { padding-top: 96px; padding-bottom: 96px; }

.k-plate__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 24px; border-bottom: 1px solid var(--kw-rule); margin-bottom: 64px; }

.k-plate__feature { color: var(--kw-terra); opacity: 0.92; }

.k-plate__filing { opacity: 0.5; }

.k-plate__spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 88px; align-items: start; }

.k-plate__num { display: flex; flex-direction: column; gap: 16px; }

.k-plate__numeral {
  font-family: var(--kw-sans); font-weight: 500;
  font-size: clamp(120px, 18vw, 240px); line-height: 0.88; letter-spacing: -0.04em;
  color: var(--kw-terra); display: block; margin: -12px 0 0 -8px;
}

.k-plate__plate, .k-plate__location { font-family: var(--kw-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }

.k-plate__location { opacity: 0.5; padding-bottom: 28px; border-bottom: 1px solid var(--kw-rule); margin-bottom: 28px; }

.k-plate__plan { margin: 0; }

.k-plate__plan-svg { width: 100%; height: auto; color: var(--kw-ink); display: block; }

.k-plate__plan-cap { display: flex; justify-content: space-between; margin-top: 16px; font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }

.k-plate__copy { padding-top: 16px; }

.k-plate__title {
  font-family: var(--kw-sans); font-weight: 500;
  font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.026em;
  color: var(--kw-ink); margin: 0 0 28px;
}

.k-plate__title em { font-style: italic; font-weight: 500; color: var(--kw-terra); }

.k-plate__lede { font-family: var(--kw-sans); font-size: 19px; line-height: 1.5; letter-spacing: -0.008em; opacity: 0.82; margin: 0 0 48px; }

.k-plate__spec { margin: 0 0 56px; padding: 0; border-top: 1px solid var(--kw-rule); }

.k-plate__spec-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--kw-rule); }

.k-plate__spec-row dt { font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kw-terra); opacity: 0.78; }

.k-plate__spec-row dd { margin: 0; font-family: var(--kw-sans); font-size: 15px; line-height: 1.4; letter-spacing: -0.004em; }

/* Material chips — plate edition. Matches home library gradient pattern. */
.k-plate__matsblk { padding-top: 24px; border-top: 1px solid var(--kw-rule); }

.k-plate__matshead { display: block; opacity: 0.55; margin-bottom: 18px; }

.k-plate__mats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }

.k-plate__mat { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }

.k-plate__mat-chip {
  display: block; width: 56px; aspect-ratio: 1/1; background-color: var(--fill);
  background-image:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 5px, var(--grain) 5px, var(--grain) 5.5px),
    radial-gradient(120% 80% at 30% 25%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--fill), var(--grain));
  background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 0 0 1px rgba(29,35,44,0.1);
}

.k-plate__mat-no { display: block; font-family: var(--kw-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kw-terra); opacity: 0.85; }

.k-plate__mat-name { display: block; font-family: var(--kw-sans); font-size: 14px; line-height: 1.18; letter-spacing: -0.006em; font-weight: 500; }

.k-plate__details { margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) {

  .k-plate__spread { grid-template-columns: 1fr; gap: 56px; }

  .k-plate__details { grid-template-columns: 1fr; gap: 16px; }

}
@media (max-width: 720px) {

  .k-plate { padding-top: 64px; padding-bottom: 64px; }

  .k-plate__head { flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 40px; }

  .k-plate__spec-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }

  .k-plate__mats { grid-template-columns: 1fr; gap: 16px; }

  .k-plate__mat { grid-template-columns: 44px 1fr; }

  .k-plate__mat-chip { width: 44px; }

}

/* ─── DOSSIER GRID · k-reg ─── */
.k-reg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; margin-top: 24px; }

.k-reg__card { display: flex; flex-direction: column; text-decoration: none; color: var(--kw-ink); background: var(--kw-paper); padding-bottom: 4px; border-top: 1px solid var(--kw-rule); padding-top: 18px; }

.k-reg__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }

.k-reg__no { font-family: var(--kw-sans); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.018em; color: var(--kw-terra); }

.k-reg__stamp { font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }

.k-reg__card .k-img { margin-bottom: 22px; }

.k-reg__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.k-reg__title { font-family: var(--kw-sans); font-size: 21px; line-height: 1.18; letter-spacing: -0.014em; font-weight: 500; margin: 0; }

.k-reg__dek { font-family: var(--kw-sans); font-size: 14px; line-height: 1.5; opacity: 0.7; margin: 0; flex: 1; }

.k-reg__mats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 8px; align-items: center; }

.k-reg__mat {
  display: block; width: 28px; aspect-ratio: 1/1; background-color: var(--fill);
  background-image:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 4px, var(--grain) 4px, var(--grain) 4.4px),
    linear-gradient(180deg, var(--fill), var(--grain));
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 1px rgba(29,35,44,0.12);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.k-reg__cta {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--kw-rule);
  font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--kw-ink); opacity: 0.6;
  transition: opacity 0.35s ease, letter-spacing 0.35s ease, color 0.35s ease;
}

.k-reg__card:hover .k-reg__cta,
.k-reg__card:focus-visible .k-reg__cta { opacity: 1; color: var(--kw-terra); letter-spacing: 0.24em; }

.k-reg__card:hover .k-img,
.k-reg__card:focus-visible .k-img { filter: brightness(0.96); }

.k-reg__card:hover .k-reg__mat,
.k-reg__card:focus-visible .k-reg__mat { transform: translateY(-2px); }

.k-reg__card:focus-visible { outline: 2px solid var(--kw-terra); outline-offset: 4px; }

.k-reg__coda { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--kw-rule); align-items: start; }

.k-reg__coda-stack { display: flex; flex-direction: column; gap: 12px; }

.k-reg__coda-lede { font-family: var(--kw-sans); font-size: 17px; line-height: 1.5; opacity: 0.72; max-width: 460px; margin: 0; }

.k-reg__coda-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.k-reg__coda-list li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--kw-rule); }

.k-reg__coda-list li:last-child { border-bottom: 0; }

.k-reg__coda-list .k-mono { color: var(--kw-terra); opacity: 0.85; }
@media (max-width: 980px) {
 .k-reg__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
 
}
@media (max-width: 720px) {

  .k-reg__grid { grid-template-columns: 1fr; gap: 56px; }

  .k-reg__coda { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }

  .k-reg__no { font-size: 22px; }

}
@media (prefers-reduced-motion: reduce) {

  .k-reg__mat, .k-reg__cta, .k-reg-toc__link, .k-reg-toc__name { transition: none; }

  .k-reg__card:hover .k-reg__mat,
  .k-reg__card:focus-visible .k-reg__mat { transform: none; }

}

/* ==========================================================================
   VISIT + TRADE STANDALONE PAGE REGISTER (2026-05-26)
   Two utility pages pulled up to the home-page closer register: display-scale
   hero with hairline meta band, dossier tiles, route schematic for visit,
   and a quieter editorial form on bone.
   ========================================================================== */
/* Heyoasis-feel rhythm: bumped to match the new .k-section cadence. */
.k-page-hero { padding: 152px var(--kw-pad) 112px; }
@media (max-width: 900px) {
 .k-page-hero { padding: 112px var(--kw-pad-sm) 88px; }
 
}

.k-page-hero__eyebrow { margin-bottom: 40px; opacity: 0.6; }

.k-page-hero__title {
  font-family: var(--kw-sans);
  font-size: clamp(72px, 12.4vw, 208px); line-height: 0.92;
  letter-spacing: -0.038em; font-weight: 700;
  margin: 0 0 56px; color: var(--kw-ink); text-wrap: balance;
}
/* Phones: the 72px floor above is wider than the gutter can hold for a single
   long word ("appointment." / "trade."), so the display title broke mid-word.
   A gentler slope with a lower floor keeps the longest word on one line down
   to a 320px viewport; the cap stays 72px so tablets keep the full display
   scale. Defined after the base rule so it wins the source-order tie. */
@media (max-width: 768px) {

  .k-page-hero__title { font-size: clamp(38px, 11.5vw, 72px); }

}

.k-page-hero__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); padding: 28px 0;
  border-top: 1px solid var(--kw-rule-strong); border-bottom: 1px solid var(--kw-rule);
}

.k-page-hero__meta > div { padding: 0 32px; border-left: 1px solid var(--kw-rule); }

.k-page-hero__meta > div:first-child { padding-left: 0; border-left: 0; }

.k-page-hero__meta-cap { opacity: 0.55; margin-bottom: 12px; }

.k-page-hero__meta-val {
  font-family: var(--kw-sans); font-size: 17px; line-height: 1.42;
  letter-spacing: -0.008em; color: var(--kw-ink);
}
@media (max-width: 760px) {

  .k-page-hero__meta { grid-template-columns: 1fr; padding: 0; border: 0; }

  .k-page-hero__meta > div { padding: 22px 0; border: 0; border-top: 1px solid var(--kw-rule); }

  .k-page-hero__meta > div:first-child { border-top: 1px solid var(--kw-rule-strong); }

  .k-page-hero__meta > div:last-child { border-bottom: 1px solid var(--kw-rule); }

}

/* Beats + Trade dossier share a numbered-bordered-grid pattern */
.k-beats, .k-trade-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--kw-rule-strong);
  border-bottom: 1px solid var(--kw-rule-strong);
}

.k-beats > li {
  padding: 48px 28px 40px; border-left: 1px solid var(--kw-rule);
  display: flex; flex-direction: column; gap: 14px;
}

.k-beats > li:first-child, .k-trade-tiles > li:first-child { border-left: 0; }

.k-beats__num {
  font-family: var(--kw-mono); font-size: clamp(36px, 3.4vw, 52px); color: var(--kw-terra);
  line-height: 0.86; letter-spacing: -0.02em; font-weight: 500; margin-bottom: 14px;
}

.k-beats__label { color: var(--kw-ink); opacity: 0.55; }

.k-beats__title { font-size: 19px; line-height: 1.28; letter-spacing: -0.012em; font-weight: 500; color: var(--kw-ink); }

.k-beats__dek, .k-trade-tiles__dek { font-size: 14.5px; line-height: 1.5; color: var(--kw-ink); opacity: 0.78; }
@media (max-width: 900px) {

  .k-beats, .k-trade-tiles { grid-template-columns: 1fr 1fr; }

  .k-beats > li { padding: 36px 18px 28px; }

  .k-beats > li:nth-child(2n+1), .k-trade-tiles > li:nth-child(2n+1) { border-left: 0; }

  .k-beats > li:nth-child(n+3), .k-trade-tiles > li:nth-child(n+3) { border-top: 1px solid var(--kw-rule); }

}
@media (max-width: 560px) {

  .k-beats, .k-trade-tiles { grid-template-columns: 1fr; }

  .k-beats > li, .k-trade-tiles > li { border-left: 0; padding: 36px 0 28px; }

  .k-beats > li + li, .k-trade-tiles > li + li { border-top: 1px solid var(--kw-rule); }

}

/* Editorial form on bone — hairline, terra focus, no inverted ink block */
.k-eform { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr); gap: 88px; align-items: start; }

.k-eform__intro h2 { color: var(--kw-ink); margin-bottom: 24px; }

.k-eform__intro p {
  font-family: var(--kw-sans); font-size: 19px; line-height: 1.5;
  letter-spacing: -0.008em; color: var(--kw-ink); opacity: 0.78;
  margin-bottom: 32px; max-width: 36ch;
}

.k-eform__form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }

.k-eform__field { display: flex; flex-direction: column; gap: 10px; }

.k-eform__field--full { grid-column: 1 / -1; }

.k-eform__field > label {
  font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--kw-ink); opacity: 0.55;
}

.k-eform__field > input, .k-eform__field > select, .k-eform__field > textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--kw-rule-strong);
  padding: 8px 0 12px; font-family: var(--kw-sans); font-size: 17px;
  letter-spacing: -0.008em; color: var(--kw-ink); width: 100%; outline: none;
  transition: border-color 0.2s; -webkit-appearance: none; appearance: none;
}

.k-eform__field > select {
  background-image: linear-gradient(45deg, transparent 50%, var(--kw-ink) 50%),
                    linear-gradient(135deg, var(--kw-ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 8px) center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 26px;
}

.k-eform__field > textarea { resize: vertical; min-height: 92px; line-height: 1.5; }

.k-eform__field > input:focus, .k-eform__field > select:focus, .k-eform__field > textarea:focus { border-bottom-color: var(--kw-terra); }

.k-eform__field > input::placeholder, .k-eform__field > textarea::placeholder { color: var(--kw-ink); opacity: 0.32; }

.k-eform__submit {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 24px;
  padding-top: 12px; border-top: 1px solid var(--kw-rule); flex-wrap: wrap;
}

.k-eform__submit-note {
  font-family: var(--kw-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--kw-ink); opacity: 0.5;
}
@media (max-width: 1000px) {
 .k-eform { grid-template-columns: 1fr; gap: 56px; }
 
}
@media (max-width: 700px) {
 .k-eform__form { grid-template-columns: 1fr; gap: 24px; }
 
}

/* Trade dossier — folio, hairline-rule-before-dek (terra), shared border grid */
.k-trade-tiles > li {
  position: relative; padding: 56px 28px 44px; border-left: 1px solid var(--kw-rule);
  display: flex; flex-direction: column; gap: 14px; min-height: 280px;
}

.k-trade-tiles__folio { position: absolute; top: 20px; left: 28px; color: var(--kw-ink); opacity: 0.4; }

.k-trade-tiles__title {
  font-size: 22px; line-height: 1.18; letter-spacing: -0.014em;
  font-weight: 500; color: var(--kw-ink); margin-top: 36px;
}

.k-trade-tiles__dek { margin-top: auto; }

.k-trade-tiles__dek::before {
  content: ""; display: block; width: 24px; height: 1px;
  background: var(--kw-terra); opacity: 0.7; margin-bottom: 14px;
}
@media (max-width: 900px) {
 .k-trade-tiles > li { min-height: 230px; padding: 48px 22px 32px; }
 
}
@media (max-width: 560px) {
 .k-trade-tiles > li { padding: 40px 6px 32px; }
 
}

/* =================================================================
   TYLKO-FEEL LAYER v2 (2026-05-28)
   -----------------------------------------------------------------
   A site-wide pass to capture tylko's actual signature: SHAPES
   (everything rounded, soft, capsule-like) plus INTERACTIVENESS
   (cards lift on hover, swatches animate, photos cross-fade, the
   slider thumb has weight). This is a layer — it overrides earlier
   styles selectively so the existing layout grid stays intact.
   ================================================================= */

:root {
  --kw-r-card:    22px;
  --kw-r-card-lg: 30px;
  --kw-r-input:   14px;
  --kw-r-pill:    999px;
  --kw-shadow-lift: 0 22px 56px -28px rgba(20,24,30,0.30), 0 8px 18px -12px rgba(20,24,30,0.16);
  --kw-shadow-soft: 0 10px 26px -16px rgba(20,24,30,0.22);
  --kw-shadow-bar:  0 28px 68px -32px rgba(20,24,30,0.55);
  --kw-ease-tylko: cubic-bezier(.22, .61, .36, 1);
}

/* --- FLOATING CAPSULE NAV ---------------------------------------
   The single most identifiable tylko element: a pill-shaped nav
   that floats over the page with a backdrop blur. */
.k-nav {
  position: fixed !important;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1320px;
  background: rgba(250, 247, 241, 0.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(29, 35, 44, 0.08) !important;
  border-radius: var(--kw-r-pill) !important;
  box-shadow: var(--kw-shadow-soft);
  z-index: 100;
  transition: top 0.3s var(--kw-ease-tylko), background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.k-nav.is-scrolled {
  top: 8px;
  background: rgba(250, 247, 241, 0.94) !important;
  box-shadow: var(--kw-shadow-lift);
}

.k-nav__inner {
  padding: 11px 26px !important;
  gap: 28px !important;
}

.k-nav.is-scrolled .k-nav__inner {
  padding: 9px 24px !important;
}

.k-nav__cta {
  border-radius: var(--kw-r-pill) !important;
  padding: 11px 22px !important;
  background: var(--kw-ink) !important;
  color: var(--kw-paper) !important;
  border: 1px solid var(--kw-ink) !important;
  transition: transform 0.22s var(--kw-ease-tylko),
              box-shadow 0.22s var(--kw-ease-tylko),
              background 0.2s ease,
              border-color 0.2s ease !important;
}

.k-nav__cta:hover {
  background: var(--kw-terra) !important;
  border-color: var(--kw-terra) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(122, 47, 58, 0.55);
}

.k-nav__item.is-active::after { bottom: -3px; }

/* Push body below the floating nav */
body { padding-top: 84px; }
@media (max-width: 900px) {

  body { padding-top: 72px; }

  .k-nav { top: 10px; width: calc(100% - 20px); }

  .k-nav__inner { padding: 9px 18px !important; }

}
.k-img, .k-img--photo, .k-projects__tile-img, .k-confidence__card-img, .k-foot__news {
  border-radius: var(--kw-r-card) !important;
  border: 0 !important;
  overflow: hidden;
}

.k-projects__tile { border-radius: 0 !important; overflow: visible; }

.k-projects__tile-img { border-radius: var(--kw-r-card) !important; }

/* Caption gradient inside rounded canvas needs to clip to the radius */

/* --- INPUT SOFT-RADIUS ------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], input[type="url"],
select, textarea {
  border-radius: var(--kw-r-input) !important;
  border: 1px solid rgba(29, 35, 44, 0.18) !important;
  padding: 14px 16px !important;
  font-family: var(--kw-sans) !important;
  font-size: 16px !important; /* 16px min so iOS Safari never auto-zooms on focus */
  background: var(--kw-paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--kw-ink) !important;
  box-shadow: 0 0 0 4px rgba(29, 35, 44, 0.08) !important;
  outline: 0 !important;
}
.k-btn, .k-sticky-cta__btn, .k-foot__news-btn, .k-form button[type="submit"] {
  border-radius: var(--kw-r-pill) !important;
  transition: transform 0.22s var(--kw-ease-tylko),
              box-shadow 0.22s var(--kw-ease-tylko),
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease !important;
}
.k-btn:hover, .k-sticky-cta__btn:hover, .k-foot__news-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(20, 24, 30, 0.34);
}
.k-sticky-cta__arrow {
  display: inline-block;
  transition: transform 0.32s var(--kw-ease-tylko);
}
.k-sticky-cta__btn:hover .k-sticky-cta__arrow {
  transform: translateX(5px);
}

/* --- CARD HOVER MICRO-INTERACTIONS ------------------------------- */
.k-projects__tile {
  transition: transform 0.5s var(--kw-ease-tylko);
}

.k-projects__tile:hover {
  transform: translateY(-6px);
}
.k-projects__tile-img {
  transition: transform 0.7s var(--kw-ease-tylko), filter 0.5s ease !important;
}

.k-projects__tile:hover .k-projects__tile-img {
  transform: scale(1.06) !important;
}

/* --- CONFIGURATOR POLISH ----------------------------------------- */

/* Chunky tylko-style slider */

/* Tylko pill-radio polish */

/* Animated color-dot picker — bigger, with glow ring on selection */

/* Sticky bar floats as a pill not a flat bar */

/* Builder CTA — paper pill on the inverted ground */

/* --- STICKY CTA (site-wide floating button) --------------------- */
.k-sticky-cta {
  z-index: 90;
}

.k-sticky-cta__btn {
  border-radius: var(--kw-r-pill) !important;
  padding: 14px 26px !important;
  background: var(--kw-ink) !important;
  color: var(--kw-paper) !important;
  font-family: var(--kw-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  box-shadow: var(--kw-shadow-lift);
}

.k-sticky-cta__btn:hover {
  background: var(--kw-terra) !important;
}

/* --- FORM POLISH (consultation + newsletter) -------------------- */
.k-foot__news-row {
  border-radius: var(--kw-r-pill);
  overflow: hidden;
  border: 1px solid rgba(250, 247, 241, 0.18);
}

.k-foot__news-row input {
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--kw-bone);
}

.k-foot__news-btn {
  border-radius: 0 !important;
  background: var(--kw-paper);
  color: var(--kw-ink);
  padding: 14px 22px !important;
}
/* --- MOBILE GUARDS ---------------------------------------------- */

/* --- REDUCED MOTION RESPECT ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.k-projects__tile, .k-projects__tile-img, .k-btn, .k-nav, .k-sticky-cta__arrow {
    transition: none !important;
  }

}
/* =================================================================
   TYLKO-FEEL LAYER v2.1 — ENTRY MOTION
   -----------------------------------------------------------------
   The page should feel ALIVE on arrival, not still. Tylko's product
   page does an orchestrated entry: hero text rises, the canvas
   fades in, then the option chips cascade. Gives the visitor an
   immediate sense of an interactive surface.
   ================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* Configurator: orchestrated arrival */
  @keyframes kw-rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes kw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  
  
  
  
  
  
  
  
  

  /* Hero primary CTA: subtle attention pulse on the bone glow ring */
  @keyframes kw-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(250, 247, 241, 0.42), 0 12px 24px -14px rgba(20,24,30,0.34); }
    70%  { box-shadow: 0 0 0 14px rgba(250, 247, 241, 0.0),  0 12px 24px -14px rgba(20,24,30,0.34); }
    100% { box-shadow: 0 0 0 0 rgba(250, 247, 241, 0.0),  0 12px 24px -14px rgba(20,24,30,0.34); }
  }

  /* Sticky CTA: gentle slide-up entry — on the SHOW state only; animating
     the base class with fill-mode both pinned the bar visible everywhere. */
  .k-sticky-cta--show {
    animation: kw-rise-in 0.6s var(--kw-ease-tylko) both;
  }

}
/* Nav: soft fade on arrival — the capsule floats in rather than snap */
@media (prefers-reduced-motion: no-preference) {

  @keyframes kw-nav-arrive {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }

  .k-nav {
    animation: kw-nav-arrive 0.55s var(--kw-ease-tylko) both;
  }

}

/* =================================================================
   TYLKO-FEEL LAYER v3 — THE SIGNATURE MOVES (2026-05-28)
   -----------------------------------------------------------------
   Daniel sent a screen-recording of tylko.com. The four moves
   below are what makes the site immediately READ as tylko, none
   of which we had:
     1. MEGA pill category navigator — chunky 60-100px-tall black
        pills in a deliberately scattered asymmetric layout
     2. Three-up "color-picker" product spread — three items on
        cream with rows of swatches + an Explore pill below
     3. Big-eyebrow + huge-display headline pattern
     4. Cinematic full-bleed product-detail close-up bands
   ================================================================= */

/* --- BIG EYEBROW + DISPLAY HEADLINE PATTERN --------------------- */
.k-bigh {
  text-align: left;
  padding: clamp(56px, 9vw, 128px) 0 clamp(32px, 4vw, 56px);
}

.k-bigh__eyebrow {
  display: block;
  font-family: var(--kw-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kw-ink);
  opacity: 0.62;
  margin-bottom: clamp(20px, 3vw, 40px);
}

.k-bigh__head {
  font-family: var(--kw-sans);
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  color: var(--kw-ink);
  margin: 0;
  text-wrap: balance;
  max-width: 1240px;
}

.k-bigh__head .k-dot { color: var(--kw-terra); margin-left: 0.02em; }
@media (max-width: 720px) {

  .k-bigh__head { font-size: clamp(34px, 11vw, 64px); letter-spacing: -0.028em; }

}

/* --- MEGA PILL CATEGORY NAVIGATOR -------------------------------
   The killer tylko signature. Massive black pills in a casual,
   scattered arrangement. Hover floods terra. Mobile collapses to
   two columns with smaller pills. */
.k-mega-pills {
  background: var(--kw-bone);
  padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 120px);
  overflow: hidden;
}

.k-mega-pills__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.4vw, 36px) clamp(28px, 4.4vw, 72px);
  background: var(--kw-ink);
  color: var(--kw-paper);
  font-family: var(--kw-sans);
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 0;
  white-space: nowrap;
  transition: background 0.32s var(--kw-ease-tylko),
              color 0.32s var(--kw-ease-tylko),
              transform 0.32s var(--kw-ease-tylko),
              box-shadow 0.32s var(--kw-ease-tylko);
  cursor: pointer;
}

.k-mega-pills__pill:hover,
.k-mega-pills__pill:focus-visible {
  background: var(--kw-terra);
  color: var(--kw-paper);
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 22px 44px -24px rgba(122, 47, 58, 0.62);
  outline: 0;
}
@media (max-width: 720px) {

  .k-mega-pills__pill { font-size: clamp(22px, 7.5vw, 38px); padding: 16px 30px; }

}

/* --- THREE-UP COLOR PICKER SPREAD -------------------------------
   Tylko's "Choose your colour. The rest is easy." pattern. Three
   products floating on cream, each with a row of color swatches
   and a thin-line Explore pill. */
.k-picker-trio {
  background: var(--kw-bone);
  padding: clamp(40px, 6vw, 96px) 0 clamp(64px, 9vw, 128px);
}

.k-picker-trio__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border: 1px solid var(--kw-ink);
  background: transparent;
  color: var(--kw-ink);
  font-family: var(--kw-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.22s var(--kw-ease-tylko),
              color 0.22s var(--kw-ease-tylko),
              transform 0.22s var(--kw-ease-tylko),
              box-shadow 0.22s var(--kw-ease-tylko);
  margin-top: 10px;
}

.k-picker-trio__cta:hover {
  background: var(--kw-ink);
  color: var(--kw-paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(20, 24, 30, 0.42);
}

/* Give pills a minimum width so they hold the row visually rather
   than collapsing to text-length. Caps still wrap naturally. */
.k-mega-pills__pill {
  min-width: clamp(180px, 18vw, 320px);
  text-align: center;
}
@media (max-width: 720px) {

  .k-mega-pills__pill {
    min-width: 0;
    flex: 1 1 calc(50% - 14px);
  }

}

/* Magnetic elements — promote to their own layer for buttery
   transform chasing (setupMagnetic in chrome.js drives the inline
   transform; the element's transition eases the snap-back). */
.k-mega-pills__pill,
.k-picker-trio__cta { will-change: transform; }
/* =================================================================
   TYLKO-FEEL LAYER v5 — TRUE CAPSULE NAV (2026-05-29)
   -----------------------------------------------------------------
   Daniel: "the navigation should be a capsule." The v2 nav had
   999px corners but stretched to max-width 1320px (≈full width),
   so it read as a rounded BAR. tylko's nav is a compact pill that
   HUGS its content and floats centered with air on both sides.
   This makes the desktop nav hug its content; mobile keeps the
   wider logo-left / toggle-right pill (a tiny hugged capsule there
   would strand the hamburger in dead space).
   ================================================================= */
@media (min-width: 901px) {

  .k-nav {
    width: auto !important;            /* hug content, not the viewport */
    max-width: calc(100% - 48px) !important;
  }

  .k-nav__inner {
    display: flex !important;          /* was grid auto/1fr/auto — the
                                          1fr spacer is what stretched it */
    grid-template-columns: none !important;
    align-items: center;
    gap: clamp(22px, 2.2vw, 40px) !important;
  }

  .k-nav__items {
    gap: clamp(18px, 1.5vw, 28px) !important;
  }

  .k-nav__cta {
    margin-left: 2px;
    position: relative;
  }

  .k-nav__cta::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(11px, 1.1vw, 20px));
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: rgba(29, 35, 44, 0.14);
  }

}

/* =================================================================
   TYLKO-FEEL LAYER v6 — MOBILE REFINEMENTS (2026-05-29)
   -----------------------------------------------------------------
   Live mobile audit at 375px (preview). Fixes:
   1. Mega pills 2-per-row clipped REACH-INS / MUDROOMS off the right
      edge → full-width stacked, each label gets the whole row.
   2. Mega-pills hover preview was showing on phone (no hover there,
      and the touch media query is unreliable in emulators) → hidden
      on phone widths.
   3. Sticky CTA collided with the concierge launcher in the bottom-
      right corner → stack them (CTA above the launcher).
   4. Big-headline + color-picker had excessive top whitespace on
      phone → tightened.
   ================================================================= */

/* 3 — stack the sticky CTA above the concierge launcher so the two
   fixed bottom-right elements never overlap. Launcher is ~48px tall
   at bottom:32 (desktop) / bottom:16 (mobile); clear it with a gap. */
.k-sticky-cta { bottom: 96px !important; }
@media (max-width: 600px) {

  .k-sticky-cta { bottom: 80px !important; right: 16px !important; }

}
@media (max-width: 720px) {

  /* 1 — full-width stacked pills; REACH-INS / MUDROOMS never clip. */
  .k-mega-pills__pill {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100%;
    font-size: clamp(26px, 8.4vw, 40px) !important;
    padding: 18px 26px !important;
  }

  /* 4 — tighten the big-headline + picker whitespace on phone. */
  .k-bigh { padding: 40px 0 22px !important; }

  .k-picker-trio { padding-top: 30px !important; padding-bottom: 56px !important; }

}

/* =================================================================
   NAV v7 — pin the capsule as a real top bar (2026-05-29)
   -----------------------------------------------------------------
   Daniel: "that capsule navigation bar is not useful." Chosen fix:
   keep the rounded look, but make it a proper top bar — full-width,
   SOLID background (not a small translucent pill floating over
   content), anchored at the top, obviously the nav. This undoes the
   v5 content-hugging flex and restores the 3-zone bar layout.
   ================================================================= */

/* Solid, all widths — was translucent rgba(...,0.82) + blur. */
.k-nav {
  background: var(--kw-bone) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(29, 35, 44, 0.10) !important;
  box-shadow: 0 6px 22px -14px rgba(20, 24, 30, 0.26) !important;
}

.k-nav.is-scrolled {
  background: var(--kw-bone) !important;
  box-shadow: 0 10px 30px -16px rgba(20, 24, 30, 0.34) !important;
}
/* Desktop: full-width 3-zone bar (logo | links | CTA). Undo the v5
   width:auto + flex hug; the bar now fills the top. */
@media (min-width: 901px) {

  .k-nav {
    width: calc(100% - 28px) !important;
    max-width: 1640px !important;
  }

  .k-nav__inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 40px !important;
    padding: 12px 30px !important;
  }

  .k-nav.is-scrolled .k-nav__inner { padding: 10px 30px !important; }

  .k-nav__items {
    justify-content: center !important;
    gap: clamp(20px, 2vw, 34px) !important;
  }

  /* Drop the v5 hairline divider before the CTA — not needed on a
     full bar. */
  .k-nav__cta::before { display: none !important; }

}

.k-pullq__dot { display: inline-block; }

@keyframes kw-dot-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes kw-dot-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.8; }
}

/* =================================================================
   PAINT PICKER (materials.html #paint) — 2026-05-29
   -----------------------------------------------------------------
   "Any colour you like." A CSS-rendered shaker cabinet door that
   fills live with the chosen colour (set via --paint by chrome.js),
   beside curated designer swatches + a custom any-colour input.
   The door is drawn (not a photo) so it tints cleanly across the
   whole range, white through near-black.
   ================================================================= */
.k-paint {
  background: var(--kw-bone);
  padding: clamp(56px, 8vw, 120px) 0;
}

.k-paint__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--kw-pad); }

.k-paint__lede {
  max-width: 660px;
  font-size: 18px; line-height: 1.55;
  color: var(--kw-ink); opacity: 0.82;
  margin: 0 0 clamp(40px, 5vw, 64px);
}

.k-paint__stage {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

/* Live-tinting shaker door */
.k-paint__door {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  margin: 0;
  background: var(--paint, #f3ede0);
  box-shadow: 0 44px 96px -46px rgba(20, 24, 30, 0.42),
              inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: background 0.55s cubic-bezier(.16, 1, .3, 1);
}

.k-paint__panel {
  position: absolute; inset: 10% 12%;
  border-radius: 8px;
  background: var(--paint, #f3ede0);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.24),
    inset 0 -2px 6px rgba(255, 255, 255, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.30);
  transition: background 0.55s cubic-bezier(.16, 1, .3, 1);
}

/* lacquer sheen */
.k-paint__door::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 40%);
}

.k-paint__knob {
  position: absolute; top: 50%; right: 15%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 34% 30%, #e6cd95, #9c7a3e 78%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Controls */
.k-paint__readout { margin-bottom: 30px; }

.k-paint__readcap { display: block; opacity: 0.5; margin-bottom: 8px; }

.k-paint__name {
  display: block;
  font-family: var(--kw-sans); font-weight: 600;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em;
  color: var(--kw-ink); line-height: 1;
}

.k-paint__metaline {
  display: block; margin-top: 8px;
  font-family: var(--kw-mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kw-ink); opacity: 0.6;
}

.k-paint__dot { opacity: 0.5; margin: 0 4px; }

.k-paint__swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.k-paint__sw {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sw); padding: 0; cursor: pointer;
  border: 1px solid rgba(29, 35, 44, 0.16);
  transition: transform 0.2s var(--kw-ease-tylko), box-shadow 0.2s ease;
}

.k-paint__sw:hover { transform: scale(1.1); }

.k-paint__sw.is-active {
  box-shadow: 0 0 0 2px var(--kw-bone), 0 0 0 4px var(--kw-ink);
  transform: scale(1.06);
}

.k-paint__sw:focus-visible { outline: 2px solid var(--kw-terra); outline-offset: 3px; }

.k-paint__custom { display: block; margin-bottom: 24px; }

.k-paint__custom > .k-cap { display: block; opacity: 0.5; margin-bottom: 12px; }

.k-paint__custom-row { display: flex; align-items: center; gap: 14px; }

.k-paint__custom input[type="color"] {
  width: 60px; height: 46px; border-radius: 12px; padding: 4px;
  border: 1px solid rgba(29, 35, 44, 0.18); background: var(--kw-paper); cursor: pointer;
}

.k-paint__custom-hint { font-size: 13px; opacity: 0.55; }

.k-paint__note { max-width: 440px; font-size: 13.5px; line-height: 1.5; opacity: 0.6; margin: 0; }
@media (max-width: 820px) {

  .k-paint__stage { grid-template-columns: 1fr; gap: 36px; }

  .k-paint__door { max-width: 320px; }

}

/* v10 (2026-06-01) — Custom booking widget on design.html (replaces the
   Calendly embed). Native date input + radio-pill time slots + contact,
   submitted through the shared data-kw-form pipeline. */

/* v11 (2026-06-01) — Booking widget: taken/closed slots + status line. */

/* v12 (2026-06-01) — design.html "What it costs": per-room price ranges.
   Hairline-separated tiles (paper on bone); reuses .k-grid--3 (responsive). */
.k-pricing__grid { gap: 1px; background: var(--kw-rule); border: 1px solid var(--kw-rule); margin-top: 6px; }

.k-pricing__tile { background: var(--kw-paper); padding: 24px 22px 20px; display: flex; flex-direction: column; min-height: 190px; }

.k-pricing__type { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kw-ink); opacity: 0.5; }

.k-pricing__from { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45; margin-top: 18px; }

.k-pricing__fig { font-family: var(--kw-sans); font-weight: 700; font-size: 1.95rem; line-height: 1; letter-spacing: -0.015em; color: var(--kw-ink); margin: 3px 0 11px; }

.k-pricing__band { font-size: 0.85rem; line-height: 1.45; opacity: 0.68; }

.k-pricing__lead { margin-top: auto; padding-top: 16px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }

.k-pricing__lead b { color: var(--kw-terra); font-weight: 600; }

.k-pricing__foot { margin-top: 28px; display: flex; gap: 16px 26px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) {

  .k-pricing__tile { min-height: 0; padding: 20px 18px; }

  .k-pricing__fig { font-size: 1.7rem; }

}

/* v13 (2026-06-01) — Floating-image hero (home, .kw-fh). Vanilla recreation
   of the reference's drifting collage: clip-reveal + idle-float are pure CSS;
   scroll + pointer parallax live in chrome.js setupFloatHero(). */
.kw-fh { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--kw-bone); padding: 104px 0 72px; min-height: 92vh; min-height: 92svh; }

.kw-fh__img { position: absolute; margin: 0; border-radius: 6px; overflow: hidden; opacity: 0; will-change: transform, clip-path, opacity; box-shadow: 0 34px 66px -30px rgba(29,35,44,0.45), 0 10px 24px -14px rgba(29,35,44,0.30); animation: fhImgIn 1.25s cubic-bezier(.16,.84,.44,1) both; }

.kw-fh__img > img { display: block; width: 100%; height: 100%; object-fit: cover; animation: fhFloat 7.5s ease-in-out infinite; }

@keyframes fhImgIn { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

@keyframes fhFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@keyframes fhTextIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@keyframes fhCue { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
@media (max-width: 1024px) {

  .kw-fh { min-height: 86vh; }

}
@media (max-width: 640px) {

  .kw-fh { min-height: 84vh; padding: 116px 0 84px; }

}
@media (prefers-reduced-motion: reduce) {
.kw-fh__img, .kw-fh__img > img { animation: none !important; opacity: 1 !important; }

  .kw-fh__img { clip-path: none; }

}

/* v14 (2026-06-01) — Home "Browse by room": image cards replace the
   text-only mega-pills. Each category shows the actual room + a bold label. */
.k-roomnav { background: var(--kw-bone); padding: clamp(56px, 8vw, 112px) 0; }

.k-roomnav__inner { width: min(1180px, 92vw); margin: 0 auto; }

.k-roomnav__head { margin-bottom: clamp(22px, 3vw, 40px); }

.k-roomnav__title { margin: 8px 0 0; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--kw-ink); }

.k-roomnav__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }

.k-roomnav__card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 7 / 5; border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 18px 40px -26px rgba(29,35,44,0.5); }

.k-roomnav__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.16,.84,.44,1); }

.k-roomnav__card:hover .k-roomnav__img { transform: scale(1.06); }

.k-roomnav__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,30,0.76) 0%, rgba(20,24,30,0.12) 48%, rgba(20,24,30,0) 78%); }

.k-roomnav__label { position: relative; z-index: 1; margin: 0; padding: 22px 24px; font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.85rem); letter-spacing: 0.005em; text-transform: uppercase; color: #fff; }

.k-roomnav__card--all { background: var(--kw-bone); border: 1px solid var(--kw-rule-strong); align-items: center; justify-content: center; box-shadow: none; transition: background .25s ease, border-color .25s ease; }

.k-roomnav__card--all::after { display: none; }

.k-roomnav__card--all .k-roomnav__label { color: var(--kw-ink); padding: 0; transition: color .25s ease; }

.k-roomnav__card--all:hover { background: var(--kw-ink); border-color: var(--kw-ink); }

.k-roomnav__card--all:hover .k-roomnav__label { color: #fff; }
@media (max-width: 900px) {
 .k-roomnav__grid { grid-template-columns: repeat(2, 1fr); }
 
}
@media (max-width: 520px) {
 .k-roomnav__grid { grid-template-columns: 1fr; }
 .k-roomnav__card { aspect-ratio: 16 / 9; }
 
}

/* v15 (2026-06-01) — "In the details": reference-style arch + pill + joint
   cluster (overlapping masked images) beside a short craft note. */
.k-craft { background: var(--kw-bone); padding: clamp(64px, 9vw, 128px) 0; overflow: hidden; }

.k-craft__inner { width: min(1160px, 92vw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(28px, 5vw, 72px); align-items: center; }

.k-craft figure { margin: 0; }

.k-craft__title { margin: 12px 0 16px; font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.03; letter-spacing: -0.02em; color: var(--kw-ink); }

.k-craft__text { margin: 0 0 24px; max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.62; color: rgba(29,35,44,0.74); }

.k-craft__link { font-weight: 700; color: var(--kw-terra); text-decoration: none; letter-spacing: 0.01em; }

.k-craft__link:hover { color: var(--kw-terra-deep); }

.k-craft__cluster { position: relative; padding: 16px 0 24px; }

.k-craft__arch { width: 76%; margin-left: auto; aspect-ratio: 4 / 5; border-radius: 50% 50% 20px 20px / 40% 40% 4% 4%; overflow: hidden; box-shadow: 0 38px 72px -34px rgba(29,35,44,0.5); }

.k-craft__arch img, .k-craft__pill img, .k-craft__rect img { width: 100%; height: 100%; object-fit: cover; display: block; }

.k-craft__pill { position: absolute; top: 1%; left: 0; width: 25%; aspect-ratio: 5 / 8; border-radius: 999px; overflow: hidden; border: 7px solid var(--kw-bone); box-shadow: 0 22px 42px -24px rgba(29,35,44,0.5); }

.k-craft__rect { position: absolute; bottom: 3%; left: 4%; width: 45%; aspect-ratio: 7 / 5; border-radius: 22px; overflow: hidden; border: 7px solid var(--kw-bone); box-shadow: 0 26px 50px -26px rgba(29,35,44,0.55); }
@media (max-width: 860px) {

  .k-craft__inner { grid-template-columns: 1fr; gap: 14px; }

  .k-craft__cluster { width: min(460px, 94%); margin: 10px auto 0; }

}

/* v16 step-inside block removed 2026-06-12 — superseded by the v21
   clip-path rebuild below; the stacked override chain was fragile. */

/* v17 (2026-06-02) — NAV REDESIGN: retire the floating rounded capsule for a
   clean, flush, full-width top bar (solid bone + a single hairline rule).
   Final override — wins over the earlier v5/v7 capsule blocks wholesale. */
.k-nav {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(29, 35, 44, 0.10) !important;
  border-radius: 0 !important;
  background: var(--kw-bone) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  z-index: 100 !important;
  transition: padding 0.25s ease, box-shadow 0.25s ease !important;
}

.k-nav.is-scrolled {
  background: var(--kw-bone) !important;
  box-shadow: 0 14px 28px -26px rgba(20, 24, 30, 0.34) !important;
}

.k-nav__inner {
  max-width: var(--kw-max) !important;
  margin: 0 auto !important;
  padding: 17px var(--kw-pad) !important;
  gap: 40px !important;
}

.k-nav.is-scrolled .k-nav__inner { padding: 12px var(--kw-pad) !important; }
@media (min-width: 901px) {

  .k-nav { width: 100% !important; max-width: none !important; }

  .k-nav__inner { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center; }

}

.k-nav__cta {
  border-radius: var(--kw-r-pill) !important;
  background: var(--kw-ink) !important;
  color: var(--kw-paper) !important;
  border: 1px solid var(--kw-ink) !important;
  padding: 11px 22px !important;
}

.k-nav__cta:hover { background: var(--kw-terra) !important; border-color: var(--kw-terra) !important; color: #fff !important; transform: none !important; box-shadow: none !important; }

.k-nav__cta::before { display: none !important; }

body { padding-top: 64px !important; }
@media (max-width: 900px) {

  body { padding-top: 58px !important; }

  .k-nav__inner { padding: 13px var(--kw-pad) !important; gap: 18px !important; }

}

/* v18 (2026-06-02) — WORLD-CLASS HERO. One full-bleed cinematic image (NYC
   dressing room at dusk) edge-to-edge behind a transparent nav; slow Ken
   Burns + scroll parallax (chrome.js setupHero); legibility scrim; bottom-
   left editorial type with a line-mask reveal. Replaces the floating collage. */
.kw-hero { position: relative; margin-top: -64px; height: 100svh; min-height: 600px; overflow: hidden; background: #14181c; isolation: isolate; }

.kw-hero__media { position: absolute; inset: -7% -2%; z-index: 0; will-change: transform; }

.kw-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center 44%; transform: scale(1.04); animation: kwKenburns 30s ease-in-out infinite alternate; will-change: transform; }

@keyframes kwKenburns { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.4%,-1.4%,0); } }

/* Hero background video (Cloudflare Stream) — sits over the stills at the
   same stacking level; fades in only once playback starts. The tint is the
   flat 30% black overlay that accompanies the video. */
.kw-hero__video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kw-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; opacity: 0; transition: opacity 1.4s ease; }
.kw-hero__video-wrap.is-live .kw-hero__video { opacity: 1; }
.kw-hero__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0,0,0,0.30); opacity: 0; transition: opacity 1.4s ease; }
.kw-hero__video-wrap.is-live + .kw-hero__tint { opacity: 1; }

.kw-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to top, rgba(11,14,17,0.82) 0%, rgba(11,14,17,0.34) 28%, rgba(11,14,17,0.03) 52%, rgba(11,14,17,0) 66%),
  linear-gradient(100deg, rgba(11,14,17,0.50) 0%, rgba(11,14,17,0.10) 40%, rgba(11,14,17,0) 62%),
  linear-gradient(to bottom, rgba(11,14,17,0.32) 0%, rgba(11,14,17,0) 22%); }

.kw-hero__inner { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 2; width: min(1320px, 100%); padding: 0 var(--kw-pad) clamp(44px, 9vh, 96px); }

.kw-hero__eyebrow { margin: 0 0 22px; font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.82); opacity: 0; animation: kwFadeUp 0.9s ease both; animation-delay: 0.3s; }

.kw-hero__eyebrow span { opacity: 0.45; margin: 0 8px; }

.kw-hero__headline { margin: 0; font-weight: 800; font-size: clamp(2.7rem, 6.7vw, 6.6rem); line-height: 0.95; letter-spacing: -0.03em; color: #fff; }

.kw-hero__line { display: block; overflow: hidden; padding-bottom: 0.05em; }

.kw-hero__line > span { display: block; animation: kwLineIn 1.1s cubic-bezier(.16,.84,.44,1) both; }

.kw-hero__line:nth-child(1) > span { animation-delay: 0.45s; }

.kw-hero__line:nth-child(2) > span { animation-delay: 0.57s; }

@keyframes kwLineIn { from { transform: translateY(110%); } to { transform: translateY(0); } }

.kw-hero__headline .k-dot { color: var(--kw-terra); }

.kw-hero__sub { margin: 26px 0 0; max-width: 42ch; font-size: clamp(1.02rem, 1.35vw, 1.22rem); line-height: 1.5; color: rgba(255,255,255,0.88); opacity: 0; animation: kwFadeUp 0.9s cubic-bezier(.16,.84,.44,1) both; animation-delay: 0.85s; }

.kw-hero__ctas { margin-top: 34px; display: flex; gap: 16px 26px; align-items: center; flex-wrap: wrap; opacity: 0; animation: kwFadeUp 0.9s cubic-bezier(.16,.84,.44,1) both; animation-delay: 0.98s; }

@keyframes kwFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.kw-hero__ctas .k-btn--fill { background: #fff !important; color: var(--kw-ink) !important; border-color: #fff !important; }

.kw-hero__ctas .k-btn--fill:hover { background: var(--kw-terra) !important; color: #fff !important; border-color: var(--kw-terra) !important; }

.kw-hero__ghost { font-weight: 600; color: #fff; text-decoration: none; opacity: 0.9; border-bottom: 1px solid rgba(255,255,255,0.42); padding-bottom: 3px; transition: opacity .2s, border-color .2s; }

.kw-hero__ghost:hover { opacity: 1; border-color: #fff; }

.kw-hero__cue { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(255,255,255,0.66); opacity: 0; animation: kwFadeUp 1s ease both; animation-delay: 1.4s; }

.kw-hero__cue .k-cap { font-size: 10.5px; letter-spacing: 0.22em; }

.kw-hero__cue-line { width: 1px; height: 42px; background: rgba(255,255,255,0.5); transform-origin: top; animation: kwCueLine 2.4s ease-in-out infinite; }

@keyframes kwCueLine { 0%, 100% { transform: scaleY(0.5); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Home only: nav rides transparent (white) over the hero; solid on scroll. */
body[data-page="home"] .k-nav:not(.is-scrolled) { background: transparent !important; border-bottom-color: transparent !important; }

body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__wordmark,
body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__wordmark .k-x,
body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__wordmark .k-dot,
body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__item { color: #fff !important; }

body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__item { opacity: 0.82; }

body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__cta { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.5) !important; color: #fff !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__cta:hover { background: rgba(255,255,255,0.2) !important; border-color: #fff !important; }

body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__bars,
body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__bars::before,
body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__bars::after { background: #fff !important; }
@media (max-width: 900px) {
 .kw-hero { margin-top: -58px; }
 .kw-hero__sub { max-width: 32ch; }
 
}
@media (prefers-reduced-motion: reduce) {

  .kw-hero__img { animation: none; transform: scale(1.06); }

  .kw-hero__cue-line { animation: none; }

  .kw-hero__line > span, .kw-hero__eyebrow, .kw-hero__sub, .kw-hero__ctas, .kw-hero__cue { animation: none; opacity: 1; transform: none; }

}

/* ==========================================================================
   v19 — PROMISE BAND, DARKENED (2026-06-02).
   The guarantee was the page's quietest LIGHT beat. Ultra-lux wants it
   "larger, quieter, darker." Recast as a full-bleed dark cinematic moment
   that echoes the hero and gives the closing third a second dark "breath"
   to balance the k-signed plate higher up. Deep ink field, a faint terra
   glow behind the line, hairline terra rules top + bottom, oversized quiet
   bone type. Text-only (no photo) so it stays distinct from the photo-heavy
   sections around it and reads like a watchmaker's warranty plate.
   ========================================================================== */
.k-promise {
  position: relative;
  isolation: isolate;
  background: radial-gradient(125% 145% at 50% 0%, #222932 0%, #161b22 48%, #0f1319 100%);
  border-top: 1px solid rgba(122, 47, 58, 0.55);
  border-bottom: 1px solid rgba(122, 47, 58, 0.55);
  padding: clamp(120px, 20vh, 248px) 0;
  overflow: hidden;
}

.k-promise::before {                 /* faint terra glow centered behind the line */
  content: "";
  position: absolute;
  left: 50%; top: 48%;
  width: min(960px, 92%); height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(150, 60, 72, 0.30) 0%, rgba(122, 47, 58, 0) 68%);
  z-index: -1;
  pointer-events: none;
}

.k-promise__inner { gap: 38px; }
     /* base supplies centered flex column */
.k-promise__eye {
  color: #e2b1b7 !important;         /* light terra — burgundy is invisible on ink */
  opacity: 1;
  letter-spacing: 0.42em;
}

.k-promise__line {
  color: var(--kw-bone);
  letter-spacing: -0.018em;
}

.k-promise__line .k-dot { color: #cf8e96; }
   /* lifted terra so the stops glow */
.k-promise__foot {
  color: var(--kw-bone);
  opacity: 0.5;
  letter-spacing: 0.28em;
}
@media (max-width: 760px) {

  .k-promise { padding: clamp(88px, 16vh, 168px) 0; }

}

/* ==========================================================================
   v20 — MOBILE FIXES (2026-06-02). Two live-mobile bugs reported:
   (1) Nav "does weird things": the fixed bar is ~71px tall on mobile (44px
       tap target on the toggle) but body only reserved 58px, so section tops
       slid under it; and the transparent→solid flip at 24px was an abrupt,
       flicker-prone hard cut. Fix: reserve the bar's true height (and match
       the hero's negative margin to it), and FADE the bg/colour transitions.
       The scroll threshold + hysteresis live in chrome.js setupNavScroll().
   (2) "Step inside" wrong proportion on mobile: the 102vmax square is ~828px
       on a 375px phone (vmax = the height axis in portrait), cropping the
       photo to a sliver. Fix: on mobile, drop the scroll-scrub and render a
       clean static full-bleed cover band — the same shape the reduced-motion
       path already uses. (setupStepIn() bails on mobile to match.)
   ========================================================================== */

/* (1a) Fade the nav state change instead of snapping it. */
.k-nav {
  transition: background-color .35s ease, border-color .35s ease,
              box-shadow .3s ease, padding .25s ease !important;
}

.k-nav__wordmark, .k-nav__wordmark .k-x, .k-nav__wordmark .k-dot,
.k-nav__item, .k-nav__cta {
  transition: color .35s ease, background-color .35s ease, border-color .35s ease !important;
}

.k-nav__bars, .k-nav__bars::before, .k-nav__bars::after {
  transition: background-color .35s ease, transform .25s ease !important;
}

/* (1b) Reserve the bar's real height so nothing hides under it. */
body { padding-top: 68px !important; }
            /* desktop nav ≈ 67px */
.kw-hero { margin-top: -68px; }
@media (max-width: 900px) {

  body { padding-top: 72px !important; }
           /* mobile nav ≈ 71px (44px tap target) */
  .kw-hero { margin-top: -72px; }

}

/* (2) "Step inside" reveal — rebuilt with clip-path in v21 below so the
   scroll aperture works on mobile too; the static-band stopgap is removed. */

/* ==========================================================================
   v21 — "STEP INSIDE" reveal rebuilt with clip-path (2026-06-02).
   The old effect scaled a 102vmax SQUARE behind a border-radius circle — on a
   portrait phone (vmax = the height axis) that ballooned to ~828px wide and
   cropped the photo to a sliver, so the reveal didn't "work" on mobile. New
   approach: the image fills the viewport (cover → always proper proportion)
   and a clip-path circle widens from a peek to full-bleed as you scroll. Same
   code path on every aspect ratio. chrome.js setupStepIn() drives the radius
   and no longer bails on mobile.
   ========================================================================== */
.k-stepin { position: relative; height: 170vh; background: var(--kw-bone); }

.k-stepin__img {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%; margin: 0;
  background-size: cover;
  background-position: center;
  transform: none;
  border-radius: 0;
  clip-path: circle(34% at 50% 50%);
  will-change: clip-path;
}

.k-stepin__title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; margin: 0; color: #fff; font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1; letter-spacing: -0.025em;
  opacity: 0; text-shadow: 0 2px 50px rgba(0,0,0,0.42); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {

  /* No scrub — reveal the whole room as a static full-bleed band. */
  .k-stepin { height: auto; }

  .k-stepin__img { clip-path: none; }

  .k-stepin__title { opacity: 1; }

}

/* ==========================================================================
   v23 — TECHNOLOGY & AI section (materials.html). A capability grid: the
   systems wired into the cabinetry. Editorial spec-sheet cards, terra index.
   ========================================================================== */
.k-tech {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(40px, 5vw, 68px);
}

.k-tech__card { border-top: 2px solid var(--kw-terra); padding: 22px 2px 0; }

.k-tech__num { display: block; margin-bottom: 14px; letter-spacing: 0.2em; }

.k-tech__title {
  font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.18;
  letter-spacing: -0.015em; margin: 0 0 12px; color: var(--kw-ink);
}

.k-tech__body { font-size: 15px; line-height: 1.58; color: var(--kw-ink); opacity: 0.76; margin: 0; }

.k-tech-sec__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  margin-top: clamp(38px, 4.5vw, 60px); padding-top: 28px; border-top: 1px solid var(--kw-rule);
}

.k-tech-sec__cta {
  font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kw-ink); border-bottom: 1px solid var(--kw-terra); padding-bottom: 4px; transition: color .2s;
}

.k-tech-sec__cta:hover { color: var(--kw-terra); }

.k-tech-sec__cta span { margin-left: 5px; }
@media (max-width: 900px) {
 .k-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
}
@media (max-width: 600px) {

  .k-tech { grid-template-columns: 1fr; gap: 0; }

  .k-tech__card { border-top: 0; border-bottom: 1px solid var(--kw-rule); padding: 22px 0; }

  .k-tech__card:first-child { border-top: 2px solid var(--kw-terra); }

}
/* === v24 (2026-06-09) — mobile drawer legibility =========================
   Two regressions from the floating-capsule bar, reported as "nav links not
   clear to see" on phones:
   1. transform + backdrop-filter on .k-nav make the bar the CONTAINING BLOCK
      for the position:fixed drawer, so the full-screen panel collapsed to the
      bar's own box (~150px) — most links hidden behind an invisible scroll.
   2. the homepage over-hero state forces .k-nav__item to #fff !important,
      which bled into the open drawer: white links on the bone panel.
   While the opaque drawer is open the capsule's blur and centering are
   invisible anyway, so neutralize them; and force ink links in the drawer. */
@media (max-width: 900px) {

  .k-nav.is-open {
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
  }

  .k-nav__panel { justify-content: flex-start; }

  /* inset:0 alone leaves the drawer at its padding height inside the grid
     bar — pin the open drawer to the real viewport explicitly. */
  .k-nav.is-open .k-nav__panel {
    height: 100vh;
    height: 100dvh;
  }

  .k-nav.is-open .k-nav__item,
  body[data-page="home"] .k-nav:not(.is-scrolled).is-open .k-nav__item {
    color: var(--kw-ink) !important;
    opacity: 1;
  }

  .k-nav.is-open .k-nav__item.is-active,
  body[data-page="home"] .k-nav:not(.is-scrolled).is-open .k-nav__item.is-active {
    color: var(--kw-terra) !important;
  }

  body[data-page="home"] .k-nav:not(.is-scrolled).is-open .k-nav__cta {
    background: var(--kw-ink) !important;
    border-color: var(--kw-ink) !important;
    color: var(--kw-bone) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* wordmark + the close ✕ also inherit the over-hero white — force ink
     while the bone drawer is open. */
  .k-nav.is-open .k-nav__wordmark,
  body[data-page="home"] .k-nav:not(.is-scrolled).is-open .k-nav__wordmark {
    color: var(--kw-ink) !important;
  }

  .k-nav.is-open .k-nav__bars,
  .k-nav.is-open .k-nav__bars::before,
  .k-nav.is-open .k-nav__bars::after,
  body[data-page="home"] .k-nav:not(.is-scrolled).is-open .k-nav__bars::before,
  body[data-page="home"] .k-nav:not(.is-scrolled).is-open .k-nav__bars::after {
    background-color: var(--kw-ink) !important;
  }

  .k-nav.is-open .k-nav__bars { background-color: transparent !important; }

}
/* === v25 (2026-06-12) — mobile bug fixes ==================================
   1. "By appointment." clipped mid-word on phones: the visit-close display
      title clamps with a 64px FLOOR — at 390px the word needs ~420px and
      shears off-screen (and hands iOS a horizontal rubber-band). Re-clamp
      with a phone-sized floor.
   2. The sticky CTA renders as a ~237px floating bar stacked directly above
      the chat launcher in the same corner — a two-story tower that sits on
      headings as they scroll under. Compact it and move it bottom-left so
      the two floating actions split the corners. */
@media (max-width: 700px) {

  .k-visit-close__title {
    font-size: clamp(34px, 10.5vw, 64px);
    overflow-wrap: break-word;
  }

  .k-sticky-cta {
    left: 16px !important;
    right: auto !important;
    bottom: 16px !important;
    padding: 11px 16px;
    gap: 8px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
  }

}
/* ──────────────────────────────────────────────────────────────────────
   Mobile nav layout — authoritative (2026-06-14)
   The historical .k-nav__inner overrides left a fragile grid on phones
   (computed grid-template-columns resolved to content widths, brand pushed
   in from the left edge). iOS Safari resolved that grid differently from
   Chromium and shifted the entire row ~50% left over the homepage hero,
   clipping the wordmark off-screen. Replace it with a simple, deterministic
   flex row — brand at the left, menu button at the right — defined last so
   it wins the cascade on every engine. The drawer panel is position:fixed
   on phones, so it is out of flex flow and never affects this row.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  .k-nav__inner {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* var(--kw-pad) is the 84px editorial desktop gutter — on a 390px phone
       that leaves only ~222px for the wordmark + menu button, an exact fit
       that tips into overflow on iOS (which then shifts the row off-screen).
       Use a small fixed gutter so there is always ample room. */
    padding: 12px 20px !important;
  }

  .k-nav.is-scrolled .k-nav__inner { padding: 10px 20px !important; }

  .k-nav__brand { margin: 0 !important; min-width: 0; }

  .k-nav__toggle { margin: 0 !important; flex: 0 0 auto; }

}
/* ──────────────────────────────────────────────────────────────────────
   Mobile polish pass (2026-06-14) — consolidated fixes from a multi-device
   audit. Appended last so these win the cascade.
   ────────────────────────────────────────────────────────────────────── */

/* 1 · Landscape phones: the full-screen nav drawer centred its items under
   104px of top padding, so on a ~390px-tall landscape viewport the lower
   links (Trade, Visit) and the CTA fell below the fold with no way to reach
   them (centred flex overflow isn't scrollable to the top). Top-align,
   compress the rows, and let it scroll. */
@media (max-width: 900px) and (max-height: 540px) {

  .k-nav.is-open .k-nav__panel {
    justify-content: flex-start !important;
    padding-top: 56px !important;
    padding-bottom: 16px !important;
    gap: 0 !important;
  }

  .k-nav__item { padding: 9px 0 !important; font-size: 15px !important; }

  .k-nav__cta { margin-top: 10px !important; }

}

/* 2 · The floating "Speak with a designer" CTA must fully clear the footer
   (it was still painting over footer links). Force the hide-at-foot state to
   win regardless of any later .k-sticky-cta rule. */
.k-sticky-cta--hide-at-foot {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 3 · Touch targets — bring the chat concierge chips and reply-action
   buttons up to the 44px minimum. */
.k-cc-chip,
.k-cc-act {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* 4 · Spec-list keys read at 9px / 0.55 opacity on phones — under the legible
   floor and below WCAG AA contrast. Lift size and opacity. */
@media (max-width: 768px) {

  .k-spec-list__key { font-size: 11px !important; opacity: 0.8 !important; }

}

/* 5 · Faint decorative eyebrows (section numbers) sat at 0.4 opacity — wash
   out to ~2.4:1. Nudge up so they clear AA for incidental text. */
.k-eyebrow__num { opacity: 0.62; }

/* ──────────────────────────────────────────────────────────────────────
   Click-to-call in the nav (2026-06-16) — local buyers tap to call, so the
   number must be one tap away in the persistent bar (mobile) and inline
   (desktop), plus inside the open drawer. Defined last to win the cascade.
   ────────────────────────────────────────────────────────────────────── */
.k-nav__call-bar { display: none; }
            /* shown on phones only */
.k-nav__call { display: none; }
                /* shown in drawer (mobile) + inline (desktop) */
/* Phones/tablets: persistent tap-to-call in the top bar */
@media (max-width: 900px) {

  .k-nav__inner { justify-content: flex-start !important; }

  .k-nav__brand { margin-right: auto !important; }

  .k-nav__call-bar {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 9px 16px; margin-right: 6px;
    border: 1px solid currentColor; border-radius: var(--kw-r-pill, 999px);
    text-decoration: none; color: var(--kw-ink);
    font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap; flex: 0 0 auto;
  }

  /* Over the dark homepage hero the bar is transparent — make the call white too */
  body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__call-bar { color: #fff; }

  /* The call link inside the open drawer — prominent, above the dark CTA */
  .k-nav.is-open .k-nav__call {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 22px; padding: 14px 22px; min-height: 48px;
    border: 1px solid var(--kw-ink); border-radius: var(--kw-r-pill, 999px);
    font-family: var(--kw-mono); font-size: 14px; letter-spacing: 0.06em;
    text-transform: uppercase; text-decoration: none; color: var(--kw-ink);
    align-self: flex-start;
  }

  .k-nav.is-open .k-nav__cta { margin-top: 14px; }

}
/* Desktop: phone shown inline in the bar, left of the CTA */
@media (min-width: 901px) {

  .k-nav__inner { grid-template-columns: auto 1fr auto auto !important; }

  .k-nav__call-bar { display: none !important; }

  .k-nav__call {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border: 1px solid currentColor;
    border-radius: var(--kw-r-pill, 999px);
    text-decoration: none; color: var(--kw-ink);
    font-family: var(--kw-mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap; margin-right: 8px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .k-nav__call:hover { color: #fff; background: var(--kw-terra); border-color: var(--kw-terra); }

  body[data-page="home"] .k-nav:not(.is-scrolled) .k-nav__call { color: #fff; }

}
/* Landscape phones: the persistent call-bar already shows the number, so drop
   the redundant in-drawer call link to keep all six links + the CTA in view. */
@media (max-width: 900px) and (max-height: 540px) {

  .k-nav.is-open .k-nav__call { display: none !important; }

}

/* Hero "Read our Google reviews" trust link (2026-06-17). Honest social-proof
   link to the Google profile; upgrades to a star + numeric rating once the
   real figures are confirmed. Light treatment to sit under the hero CTAs. */
.kw-hero__reviews {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; text-decoration: none;
  font-family: var(--kw-mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
}

.kw-hero__reviews:hover { color: #fff; }

.kw-hero__reviews-star { color: #f4c95d; font-size: 14px; line-height: 1; }

/* Lead-form completion panel — a direct contact path shown on submit so an
   interested visitor never dead-ends (esp. if the mail-client fallback did
   not open). Injected by chrome.js kwFormDone() on the lead forms. */
.k-form-done {
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--kw-rule-strong);
  border-radius: var(--kw-r-input, 10px);
  background: var(--kw-bone-2, #f3ede0);
  font-family: var(--kw-sans); font-size: 15px; line-height: 1.5; color: var(--kw-ink);
}

.k-form-done a { color: var(--kw-terra); border-bottom: 1px solid var(--kw-terra); white-space: nowrap; font-weight: 600; }

/* ============================================================
   GUIDED CONSULTATION FORM (design.html · data-kw-steps)
   Progressive: without JS the form shows as one page; chrome.js
   adds .is-guided and steps through one panel at a time.
   ============================================================ */
.k-gform__progress{display:flex;align-items:center;gap:16px;margin-bottom:30px}

.k-gform__bar{flex:1;height:2px;background:var(--kw-rule);position:relative;overflow:hidden;border-radius:2px}

.k-gform__bar-fill{position:absolute;inset:0 auto 0 0;width:25%;background:var(--kw-terra);transition:width .35s cubic-bezier(.4,0,.2,1)}

.k-gform__count{font:500 12px/1 var(--kw-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6;white-space:nowrap}

.k-gform .k-gstep{border:0;margin:0;padding:0;min-inline-size:0}

.k-gform__q{font-family:var(--kw-sans);font-size:clamp(22px,3.4vw,30px);line-height:1.15;font-weight:600;padding:0;margin:0 0 8px}

.k-gform__hint{opacity:.62;margin:0 0 24px;max-width:48ch;font-size:15px;line-height:1.5}

.k-gform__group{margin-bottom:26px}

.k-gform__group-label{display:block;font:500 12px/1 var(--kw-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:12px}

.k-chips{display:flex;flex-wrap:wrap;gap:10px}

.k-chip{position:relative;display:inline-flex;cursor:pointer}

.k-chip input{position:absolute;opacity:0;width:1px;height:1px}

.k-chip span{display:inline-block;padding:11px 18px;border:1px solid var(--kw-rule-strong);border-radius:999px;font-size:15px;line-height:1;background:transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}

.k-chip:hover span{border-color:var(--kw-ink)}

.k-chip input:checked+span{background:var(--kw-ink);color:var(--kw-bone);border-color:var(--kw-ink)}

.k-chip input:focus-visible+span{outline:2px solid var(--kw-terra);outline-offset:2px}

.k-gform__nav{display:flex;align-items:center;gap:14px;margin-top:32px;flex-wrap:wrap}

.k-gform__next,.k-gform__submit{margin-left:auto}

.k-gform__assure{margin:18px 0 0;font-size:13px;opacity:.6;max-width:62ch;line-height:1.5}

.k-chips--nudge{animation:kwNudge .4s ease}

@keyframes kwNudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}60%{transform:translateX(6px)}}

.k-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:560px) {

  .k-gform__next,.k-gform__submit,.k-gform__back{width:100%;margin-left:0}

  .k-gform__next,.k-gform__submit{order:-1}

  .k-gform__nav{gap:10px}

  .k-chip span{padding:13px 20px;font-size:16px}

}

/* ============================================================
   PROJECTS REGISTER — room filter + tactile card hover-lift
   ============================================================ */
.k-reg__filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}

.k-filterchip{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--kw-rule-strong);border-radius:999px;padding:9px 17px;font-family:var(--kw-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--kw-ink);transition:background .15s ease,color .15s ease,border-color .15s ease}

.k-filterchip:hover{border-color:var(--kw-ink)}

.k-filterchip[aria-pressed="true"]{background:var(--kw-ink);color:var(--kw-bone);border-color:var(--kw-ink)}

.k-filterchip:focus-visible{outline:2px solid var(--kw-terra);outline-offset:2px}
/* Tactile hover-lift on clickable cards (competitor-grade polish, on-brand) */
@media (hover:hover) {

  .k-card--hover,.k-reg__card{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}

  .k-card--hover:hover,.k-reg__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(20,16,12,.45)}

}
@media (prefers-reduced-motion:reduce) {

  .k-card--hover,.k-reg__card{transition:none}

  .k-card--hover:hover,.k-reg__card:hover{transform:none;box-shadow:none}

}

/* ============================================================
   HOW IT WORKS — friendly, low-pressure 3-step client journey
   ============================================================ */
.k-how__head{max-width:720px;margin:0 0 46px}

.k-how__title{font-family:var(--kw-sans);font-size:clamp(30px,5vw,52px);line-height:1.05;font-weight:600;margin:14px 0 0}

.k-how__lede{margin:18px 0 0;font-size:clamp(16px,2vw,19px);line-height:1.55;opacity:.7;max-width:58ch}

.k-how__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:howstep}

.k-how__step{position:relative;padding:32px 28px 30px;border:1px solid var(--kw-rule);border-radius:5px;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .2s ease}
@media(hover:hover) {
.k-how__step:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(20,16,12,.5);border-color:var(--kw-rule-strong)}
}

.k-how__num{display:block;font-family:var(--kw-mono);font-size:13px;letter-spacing:.12em;color:var(--kw-terra);margin-bottom:18px}

.k-how__step-title{font-family:var(--kw-sans);font-size:21px;font-weight:600;margin:0 0 10px;line-height:1.2}

.k-how__step-body{margin:0 0 20px;font-size:15px;line-height:1.6;opacity:.72}

.k-how__link{display:inline-block;font-family:var(--kw-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--kw-ink);border-bottom:1px solid var(--kw-rule-strong);padding-bottom:3px;transition:color .15s ease,border-color .15s ease}

.k-how__link:hover{color:var(--kw-terra);border-color:var(--kw-terra)}

.k-how__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:46px}

.k-how__call{font-family:var(--kw-mono);font-size:13px;letter-spacing:.03em;color:var(--kw-ink);opacity:.72;border-bottom:1px solid transparent;transition:opacity .15s ease,border-color .15s ease}

.k-how__call:hover{opacity:1;border-color:var(--kw-rule-strong)}
@media(max-width:820px) {
.k-how__steps{grid-template-columns:1fr;gap:14px}
.k-how__cta{margin-top:34px;gap:14px 18px}
}
@media(prefers-reduced-motion:reduce) {
.k-how__step{transition:none}
.k-how__step:hover{transform:none;box-shadow:none}
}

/* ============================================================
   PARTNERS — "in good company" houses we work alongside
   ============================================================ */
.k-partners__head{max-width:680px;margin:0 0 40px}

.k-partners__title{font-family:var(--kw-sans);font-size:clamp(28px,4.5vw,46px);line-height:1.06;font-weight:600;margin:14px 0 0}

.k-partners__lede{margin:16px 0 0;font-size:clamp(15px,1.9vw,18px);line-height:1.55;opacity:.7;max-width:56ch}

.k-partners__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.k-partners__card{display:block;padding:34px 32px;border:1px solid var(--kw-rule);border-radius:5px;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .2s ease}
@media(hover:hover) {
.k-partners__card:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(20,16,12,.5);border-color:var(--kw-rule-strong)}
}

.k-partners__name{display:block;font-family:var(--kw-sans);font-size:24px;font-weight:600;line-height:1.15}

.k-partners__role{display:block;font-family:var(--kw-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--kw-terra);margin:8px 0 16px}

.k-partners__body{margin:0 0 20px;font-size:15px;line-height:1.6;opacity:.72}

.k-partners__link{font-family:var(--kw-mono);font-size:12px;letter-spacing:.04em;color:var(--kw-ink);border-bottom:1px solid var(--kw-rule-strong);padding-bottom:3px;transition:color .15s ease,border-color .15s ease}

.k-partners__card:hover .k-partners__link{color:var(--kw-terra);border-color:var(--kw-terra)}
@media(max-width:760px) {
.k-partners__grid{grid-template-columns:1fr;gap:14px}
}
@media(prefers-reduced-motion:reduce) {
.k-partners__card{transition:none}
.k-partners__card:hover{transform:none;box-shadow:none}
}

/* Partners sits late on a long page where the reveal observer can miss a
   short section — never let it depend on scroll to be visible. */
html.kw-anim .k-partners.kw-rv{opacity:1 !important;transform:none !important}

/* Hero reassurance — lowers the barrier to acting (free / no obligation) */
.kw-hero__assure{margin:14px 0 0;font-family:var(--kw-mono);font-size:12.5px;letter-spacing:.04em;color:var(--kw-bone);opacity:.78}
@media(max-width:600px) {
.kw-hero__assure{font-size:12px}
}

/* ============================================================
   GUIDED FORM — visual room cards (California-Closets-style picker)
   ============================================================ */
.k-roomcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.k-roomcard{position:relative;cursor:pointer;border:1px solid var(--kw-rule);border-radius:7px;overflow:hidden;background:var(--kw-paper);transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .2s ease}

.k-roomcard input{position:absolute;opacity:0;width:1px;height:1px}

.k-roomcard__img{display:block;aspect-ratio:4/3;background-size:cover;background-position:center}

.k-roomcard__name{display:block;padding:11px 14px;font-size:14.5px;font-weight:500;line-height:1.2}
@media(hover:hover) {
.k-roomcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px -22px rgba(20,16,12,.45);border-color:var(--kw-rule-strong)}
}

.k-roomcard:has(input:checked){border-color:var(--kw-ink);box-shadow:0 0 0 2px var(--kw-ink)}

.k-roomcard input:focus-visible + .k-roomcard__img{outline:3px solid var(--kw-terra);outline-offset:-3px}
@media(max-width:640px) {
/* Phone: the picker becomes a single-column list of full-width rows —
   every room visible in one scan, whole row is the tap target. */
.k-roomcards{grid-template-columns:1fr;gap:8px}
.k-roomcard{display:flex;align-items:center;border-radius:8px}
.k-roomcard__img{aspect-ratio:auto;width:96px;height:68px;flex:none}
.k-roomcard__name{font-size:16px;padding:0 14px;flex:1}
.k-roomcard:has(input:checked)::after{content:"\2713";margin-right:16px;font-weight:700;color:var(--kw-terra);font-size:18px}
}
@media(prefers-reduced-motion:reduce) {
.k-roomcard{transition:none}
.k-roomcard:hover{transform:none;box-shadow:none}
}

/* ============================================================
   VISIT + TRADE INTAKE — streamlined, stacked layout
   (forms no longer use the 2-col .k-eform wrapper; intro sits above
   a comfortably-constrained form, matching design.html's calm flow)
   ============================================================ */
.k-eform__intro--wide{max-width:760px;margin:0 0 44px}

.k-eform__intro--wide p{max-width:60ch}

.k-eform__intro--wide p a{color:var(--kw-ink);border-bottom:1px solid var(--kw-rule-strong);transition:color .15s ease,border-color .15s ease}

.k-eform__intro--wide p a:hover{color:var(--kw-terra);border-bottom-color:var(--kw-terra)}

/* Keep the form readable on wide screens rather than spanning the full wrap.
   Scoped to visit + trade only so design.html's form is untouched. */
.k-eform__form[data-kw-form="visit"],
.k-eform__form[data-kw-form="trade"]{max-width:760px}
@media(max-width:700px) {
.k-eform__intro--wide{margin-bottom:32px}
}


/* Guided step wizard: the form renders as ONE centered column. The parent
   .k-eform__form two-column grid is for classic label/field forms; applied
   to the wizard it stranded every step in half the row with a dead gutter
   (visible on design.html and the campaign LP at desktop widths). */
form.k-gform { display: block; max-width: 960px; }

/* Auto-hiding nav: slides away scrolling down, returns scrolling up */
.k-nav { transition: transform 0.32s ease, background 0.25s ease, border-color 0.25s ease; }
.k-nav--hide { transform: translateY(-110%); }

/* The hidden attribute must always win — .k-btn et al. set display and would otherwise override it */
[hidden]{display:none!important}

/* QA 2026-07-20: inline text CTAs need a >=44px touch target on phones */
@media (max-width: 900px) {
  .k-mat-band__cta, .k-trade-close__cta, .kv-btn--ghost, .k-tech-sec__cta,
  .k-card__link, .k-how2__link, .k-craft__link, a.k-index__link {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .k-mat-band__cta, .k-trade-close__cta { padding: 10px 0; }
}


/* Keep the free-design invitation readable across desktop navigation widths. */
.k-nav__cta,.k-nav__item { white-space:nowrap; }
@media(min-width:901px) and (max-width:1350px) {
  .k-nav__inner,.k-nav.is-scrolled .k-nav__inner { padding:14px 24px!important; gap:20px!important; }
  .k-nav__items { gap:18px; }
  .k-nav__item { font-size:10px; letter-spacing:.1em; }
  .k-nav__cta { letter-spacing:.1em; }
}
@media(min-width:901px) and (max-width:1100px) {
  .k-nav__inner,.k-nav.is-scrolled .k-nav__inner { padding:14px 18px!important; gap:12px!important; }
  .k-nav__items { gap:10px; }
  .k-nav__item { font-size:9px; }
  .k-nav__wordmark { font-size:18px; }
  .k-nav__cta { font-size:9px; padding:11px 12px!important; }
  .k-nav__call { font-size:10px; padding:10px!important; }
}