/* ============================================================================
   Kaizen — "Home Modern" stylesheet
   Ported from the Claude Design project "Kaizen Projects UI Mockups",
   file `Kaizen Home Modern.dc.html`.

   SCOPE: this file is used ONLY by home-modern.html while that design is under
   review. The live site's styles.css is untouched — the other 29 pages keep the
   existing slate-blue palette until the new design is signed off.

   Structure:
     1. Tokens                 — from the Industry design system, recoloured
     2. Base reset             — Industry DS subset
     3. Components             — Industry DS subset (.btn, .tag, .duotone)
     4. The .kz design         — verbatim from the mockup's inline <style>
     5. Local additions        — only what the mockup does not cover
   ========================================================================= */


/* ── 1. Tokens ──────────────────────────────────────────────────────────────
   The Industry DS ships blue-grey defaults; the .kz scope overrides every
   --color-* and --font-* locally anyway, so these are set to the Kaizen
   palette directly. That keeps anything rendered outside .kz on-brand and
   makes this block the drop-in source for the eventual sitewide roll.
   The --space-*, --radius-* and --shadow-* values are the DS's own — .btn,
   .tag and .panel:hover resolve against them.                              */

:root {
  --color-bg: #F4F0E8;
  --color-surface: #FBF9F5;
  --color-text: #171A1F;
  --color-accent: #1E6B64;
  --color-accent-2: #1E6B64;
  --color-divider: color-mix(in srgb, #171A1F 14%, transparent);

  --font-heading: "Gabarito", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Gabarito", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}


/* ── 2. Base reset (Industry DS) ───────────────────────────────────────────
   The DS's own @import of Barlow / Barlow Condensed is deliberately dropped:
   .kz overrides both font tokens to Gabarito, so importing them would be a
   render-blocking fetch of two families nothing on the page uses.          */

*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }


/* ── 3. Components (Industry DS subset) ────────────────────────────────────
   Only what the page actually uses: buttons, tags, the duotone image
   treatment and the elevation helpers. The DS's cards, forms, tables,
   dialogs, nav and blueprint frames are unused here and left out.          */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* Lays the accent over the image in `color` blend mode, so photography reads
   as a single verdigris tone. Intended — confirmed with Sudi 2026-08-15.

   `isolation: isolate` is added here and is NOT in the source design system.
   The DS's .duotone was authored to wrap <image-slot>, which paints its photo
   differently; with a plain <img> child the ::after had no reliable backdrop to
   blend against and rendered as a flat verdigris block, hiding the render
   entirely. Isolating makes .duotone its own stacking context, so ::after
   blends against the image beneath it. Verified in-browser 2026-08-15. */
.duotone { position: relative; overflow: hidden; isolation: isolate; }
.duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color;
}

.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* Blueprint frame — components are square, transparent, hairline-bordered. */
.btn, .tag { border-radius: 0; }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }


/* ── 4. The .kz design ─────────────────────────────────────────────────────
   Verbatim from `Kaizen Home Modern.dc.html` (revision of 2026-08-15, the one
   that added the page-transition wipe, the design's own mobile nav, the
   gradient hero and the skip link). --kz-a was set at runtime from a canvas
   prop; here it is the hardcoded brand verdigris.

   Re-syncing this section: lift the contents of the mockup's inline <style>
   wholesale. Do not hand-merge — sections 1–3 and 5 are the only local edits.
   ────────────────────────────────────────────────────────────────────────── */

html{scroll-behavior:smooth}
html,body{overflow-x:clip}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#F4F0E8}
a{color:#1E6B64}a:hover{color:#16564F}
.kz{
  --kz-a:#1E6B64;
  --kz-ox:#7A2434;
  --kz-brass:#B88A44;
  --color-bg:#F4F0E8;
  --color-surface:#FBF9F5;
  --color-text:#171A1F;
  --color-divider:color-mix(in srgb,#171A1F 14%,transparent);
  --color-accent:var(--kz-a);--color-accent-2:var(--kz-a);
  --color-accent-100:color-mix(in oklab,var(--kz-a) 8%,white);
  --color-accent-200:color-mix(in oklab,var(--kz-a) 16%,white);
  --color-accent-300:color-mix(in oklab,var(--kz-a) 30%,white);
  --color-accent-400:color-mix(in oklab,var(--kz-a) 45%,white);
  --color-accent-500:color-mix(in oklab,var(--kz-a) 62%,white);
  --color-accent-600:color-mix(in oklab,var(--kz-a) 86%,white);
  --color-accent-700:color-mix(in oklab,var(--kz-a) 88%,black);
  --color-accent-800:color-mix(in oklab,var(--kz-a) 76%,black);
  --color-accent-900:color-mix(in oklab,var(--kz-a) 60%,black);
  --color-accent-2-100:var(--color-accent-100);--color-accent-2-800:var(--color-accent-800);
  --font-heading:"Gabarito",system-ui,sans-serif;--font-heading-weight:700;
  --font-body:"Gabarito",system-ui,sans-serif;
  --edge:clamp(24px,6vw,96px);
  background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);
  font-size:16px;line-height:1.5;text-wrap:pretty;min-height:100vh;
}
.kz .wrap{max-width:1600px;margin:0 auto;padding:0 var(--edge)}
/* progress bar */
.kz .prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none}
.kz .prog i{display:block;height:100%;background:var(--kz-brass);transform:scaleX(0);transform-origin:left}
/* side rail */
.kz .rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:15px;align-items:flex-end}
.kz .ritem{display:flex;align-items:center;gap:10px;text-decoration:none}
.kz .rdash{width:18px;height:2px;background:color-mix(in srgb,#171A1F 45%,transparent);box-shadow:0 0 0 .5px color-mix(in srgb,#F4F0E8 55%,transparent);transition:width .3s,background .3s}
.kz .rlabel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#171A1F;background:color-mix(in srgb,#F4F0E8 92%,transparent);border:1px solid color-mix(in srgb,#171A1F 14%,transparent);padding:4px 9px;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;pointer-events:none;backdrop-filter:blur(6px);white-space:nowrap}
.kz .ritem:hover .rlabel,.kz .ritem.on .rlabel{opacity:1;transform:none}
.kz .ritem:hover .rdash{width:26px}
.kz .ritem.on .rdash{width:30px;background:var(--kz-brass)}
@media (max-width:1100px){.kz .rail{display:none}}
/* nav */
.kz{overflow-x:clip}
.kz .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--kz-a);color:var(--color-bg);padding:12px 20px;font-weight:700;text-decoration:none}
.kz .skip:focus{left:0}
.kz .kznav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:18px var(--edge);border-bottom:1px solid transparent;background:transparent;color:var(--color-bg);margin-bottom:-74px;transition:border-color .3s,background .3s,color .3s}
.kz .menubtn{display:none;background:none;border:1px solid color-mix(in srgb,currentColor 40%,transparent);color:inherit;font:600 13px/1 "Gabarito",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;cursor:pointer;min-height:44px}
@media (max-width:900px){
  .kz .kznav{flex-wrap:wrap;gap:12px;padding:10px 20px;background:color-mix(in srgb,#F4F0E8 94%,transparent);backdrop-filter:blur(12px);color:#171A1F;margin-bottom:0;border-bottom:1px solid rgba(0,0,0,.1)}
  .kz .menubtn{display:inline-flex;align-items:center}
  .kz .kznav a:not(.btn-primary){display:none}
  .kz .kznav a.btn-primary{margin-left:auto;min-height:44px;display:inline-flex;align-items:center}
  .kz.kz-navopen .kznav a:not(.btn-primary){display:flex;width:100%;padding:13px 0;border-top:1px solid rgba(0,0,0,.08);font-size:16px;min-height:44px;align-items:center}
  .kz .herofield{padding-top:clamp(56px,10vw,90px)}
  .kz .sellkanji{display:none}
}
.kz.kz-scrolled .kznav{border-bottom-color:var(--color-divider);background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);color:var(--color-text)}
.kz .kznav .kzbrand em{color:color-mix(in srgb,currentColor 55%,transparent)}
.kz .kznavcaret{display:none;width:2px;height:1em;vertical-align:-0.12em;margin-left:2px;background:color-mix(in srgb,currentColor 70%,transparent);animation:kzblink .8s steps(1) infinite}
.kz:not(.kz-scrolled) .kznav a.btn-primary{background:var(--color-bg);color:var(--kz-a);border-color:var(--color-bg)}
.kz:not(.kz-scrolled) .kznav a:not(.btn):hover{color:var(--color-bg);opacity:1}
.kz .kzbrand{font-family:var(--font-heading);font-weight:800;font-size:17px;letter-spacing:.04em;margin-right:auto}
.kz .kzbrand em{font-style:normal;font-weight:400;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.kz .kznav a:not(.btn){color:inherit;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;opacity:.85}
.kz .kznav a:not(.btn):hover{opacity:1;color:var(--color-accent-700)}
.kz .kznav a.btn{text-decoration:none;white-space:nowrap}
.kz .kznav a.btn-primary{color:var(--color-bg)}
.kz .btn{font-size:14.5px;padding:10px 20px;letter-spacing:.02em;transition:background .2s,color .2s,transform .12s}
.kz .btn:active{transform:translateY(1px) scale(.985)}
/* type */
.kz .disp{font-family:var(--font-heading);font-weight:800;letter-spacing:-0.02em;line-height:.98;margin:0}
.kz .disp em{font-style:normal;color:var(--kz-a)}
.kz .mask{display:block;overflow:hidden;padding-block:.04em}
.kz .mask>span{display:block;transform:translateY(115%);transition:transform .9s cubic-bezier(.2,.65,.15,1)}
.kz .fx-in .mask>span,.kz .mask.fx-in>span{transform:none}
.kz .kzk{display:block;font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 55%,transparent);font-feature-settings:"tnum" 1}
.kz .kzk b{color:var(--color-accent-700);font-weight:700}
.kz .sect{padding:clamp(72px,9vw,140px) 0 0}
.kz .shead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:1px solid var(--color-divider);padding-top:18px;margin-bottom:clamp(28px,4vw,56px)}
/* hero */
.kz .hero{padding:0}
.kz .herofield{background:linear-gradient(175deg,color-mix(in oklab,var(--kz-a) 88%,black) 0%,var(--kz-a) 46%,color-mix(in oklab,var(--kz-a) 92%,white) 100%);color:var(--color-bg);padding:clamp(110px,13vw,180px) 0 clamp(110px,13vw,180px)}
.kz .herokick{display:flex;align-items:center;gap:12px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-bg) 66%,transparent);margin-bottom:clamp(22px,3vw,36px)}
.kz .herokick i{font-style:normal;font-size:17px;letter-spacing:0;color:var(--kz-brass)}
.kz .herokick::after{content:"";flex:0 0 56px;height:1px;background:color-mix(in srgb,var(--color-bg) 30%,transparent)}
.kz .herofield .disp em{color:var(--color-accent-200)}
.kz .herofield .herosub{color:color-mix(in srgb,var(--color-bg) 76%,transparent)}
.kz .heropull{margin-top:calc(-1*clamp(64px,9vw,140px))}
.kz .heromedia{box-shadow:0 30px 80px -30px rgba(13,57,53,.45)}
.kz .btn{position:relative}
.kz .btn:hover{transform:translateY(-2px)}
.kz .btn:active{transform:translateY(0) scale(.985)}
.kz .hero .disp{font-size:clamp(64px,9.4vw,148px)}
.kz .herorow{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin:clamp(24px,3vw,44px) 0 clamp(32px,4vw,56px)}
.kz .herosub{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:color-mix(in srgb,var(--color-text) 78%,transparent);max-width:44ch;margin:0}
.kz .heromedia{position:relative;overflow:hidden}
.kz .heromedia .par{will-change:transform;transform:scale(1.06)}
.kz.kz-motion-off .heromedia .par{transform:none}
.kz .heromedia image-slot{width:100%;aspect-ratio:21/9;display:block}
.kz .figcap{display:flex;justify-content:space-between;gap:16px;padding:12px 0 0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 55%,transparent);font-feature-settings:"tnum" 1}
.kz .figcap b{color:var(--color-accent-700);font-weight:700}
/* rule strip */
.kz .rulestrip{display:flex;align-items:center;gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,72px);border-block:1px solid var(--color-divider);padding:15px var(--edge)}
.kz .rlab{display:flex;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 60%,transparent);white-space:nowrap;font-feature-settings:"tnum" 1}
.kz .ruler{flex:1;height:12px;background:repeating-linear-gradient(90deg,color-mix(in srgb,#171A1F 26%,transparent) 0 1px,transparent 1px 14px),repeating-linear-gradient(90deg,var(--kz-brass) 0 1px,transparent 1px 84px);background-size:auto 7px,auto 12px;background-position:left bottom,left bottom;background-repeat:repeat-x}
/* marquee (retired) */
.kz .tick{overflow:hidden;border-block:1px solid var(--color-divider);margin-top:clamp(40px,5vw,72px)}
.kz .tickrow{display:flex;width:max-content;animation:kztick 30s linear infinite}
.kz .tick:hover .tickrow{animation-play-state:paused}
@keyframes kztick{to{transform:translateX(-50%)}}
.kz .tickrow span{display:flex;align-items:center;gap:34px;padding:15px 17px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 62%,transparent);white-space:nowrap;font-feature-settings:"tnum" 1}
.kz .tickrow i{font-style:normal;color:var(--kz-brass)}
/* who we are */
.kz .lede{font-family:var(--font-heading);font-weight:600;font-size:clamp(26px,2.6vw,40px);line-height:1.22;letter-spacing:-0.015em;max-width:28ch;margin:0}
.kz .lede em{font-style:normal;color:var(--kz-a)}
.kz .whogrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px clamp(48px,6vw,120px);align-items:start}
.kz .whoside p{font-size:15.5px;line-height:1.65;color:color-mix(in srgb,var(--color-text) 74%,transparent);margin:0 0 18px}
.kz .sig{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:14px;color:var(--kz-ox);font-weight:600}
.kz .sig .kanji{font-size:30px;font-weight:400;line-height:1}
.kz .ghost{position:absolute;font-family:var(--font-heading);font-weight:800;font-size:clamp(120px,16vw,240px);line-height:.8;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--color-text) 18%,transparent);pointer-events:none;user-select:none}
/* stats inline */
.kz .statrow{display:flex;gap:clamp(32px,5vw,88px);flex-wrap:wrap;margin-top:clamp(36px,4vw,64px);border-top:1px solid var(--color-divider);padding-top:26px}
.kz .stat b{display:block;font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,3vw,48px);line-height:1;letter-spacing:-0.01em;font-feature-settings:"tnum" 1}
.kz .stat span{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
/* projects — index ↔ viewer */
.kz .pjx{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,4vw,72px);align-items:start}
.kz .pjlist{display:flex;flex-direction:column}
.kz .pjitem{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"i n a" "i m a";column-gap:18px;row-gap:8px;align-items:baseline;text-align:left;background:none;border:0;border-top:1px solid var(--color-divider);padding:24px 10px;cursor:pointer;font-family:inherit;color:inherit;transition:background .25s}
.kz .pjitem:hover{background:color-mix(in srgb,var(--kz-a) 4%,transparent)}
.kz .pjitem.on{background:color-mix(in srgb,var(--kz-a) 6%,transparent)}
.kz .pjidx{grid-area:i;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:color-mix(in srgb,var(--color-text) 45%,transparent);font-feature-settings:"tnum" 1}
.kz .pjname{grid-area:n;font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,3.4vw,50px);letter-spacing:-0.02em;line-height:1;color:transparent;-webkit-text-stroke:1.1px color-mix(in srgb,var(--color-text) 42%,transparent);transition:color .3s,transform .3s}
.kz .pjitem:hover .pjname,.kz .pjitem.on .pjname{color:var(--color-text);-webkit-text-stroke:1.1px transparent;transform:translateX(8px)}
.kz .pjmeta{grid-area:m;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.kz .pjarrow{grid-area:a;align-self:center;font-family:var(--font-heading);font-weight:600;font-size:24px;color:var(--color-accent-700);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.kz .pjitem.on .pjarrow{opacity:1;transform:none}
.kz .pjview{position:sticky;top:96px}
.kz .pjstage{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--color-divider)}
.kz .pjlayer{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.kz .pjlayer.on{opacity:1;pointer-events:auto}
.kz .pjinfo{display:flex;align-items:center;gap:16px;padding:13px 2px;border-bottom:1px solid var(--color-divider)}
.kz .pjaddr{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin-right:auto}
@media (max-width:900px){.kz .pjx{grid-template-columns:1fr}.kz .pjview{position:static;order:-1}}
/* projects — editorial rows (retired) */
.kz .prow{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(240px,340px) auto;gap:clamp(20px,3vw,44px);align-items:center;padding:26px 0;border-top:1px solid var(--color-divider);text-decoration:none;color:inherit;transition:background .3s;position:relative}
.kz .prow:last-of-type{border-bottom:1px solid var(--color-divider)}
.kz .prow:hover{background:color-mix(in srgb,var(--kz-a) 5%,transparent)}
.kz .prow .idx{font-size:13px;font-weight:700;letter-spacing:.1em;color:color-mix(in srgb,var(--color-text) 45%,transparent);font-feature-settings:"tnum" 1}
.kz .prow h3{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,3.4vw,52px);letter-spacing:-0.02em;line-height:1;margin:0;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.kz .prow:hover h3{transform:translateX(10px)}
.kz .prow .pmeta{margin:10px 0 0;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.kz .prow .pmeta i{font-style:normal;color:var(--kz-brass);padding:0 8px}
.kz .prow .pthumb{position:relative;overflow:hidden}
.kz .prow .pthumb image-slot{width:100%;aspect-ratio:16/10;display:block}
.kz .prow .pthumb .duo{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.kz .prow:hover .pthumb .duo{transform:scale(1.045)}
.kz .prow .parr{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.kz .prow .arrow{font-family:var(--font-heading);font-weight:600;font-size:26px;color:var(--color-accent-700);transition:transform .35s}
.kz .prow:hover .arrow{transform:translateX(8px)}
/* scroll choreography */
.kz .herofield>.wrap{will-change:transform,opacity}
/* Unlit words are a colour, not an opacity — see the note in styles.css.
   The mockup used opacity .2, which is 1.52:1 on Porcelain: readable only
   after the paragraph has scrolled through the trigger band. Now the resting
   state is Slate at 5.92:1 and the lit state is full Carbon. */
.kz .lede .w{color:#565C66;transition:color .28s linear}
.kz .lede .w.lit{color:var(--color-text)}
.kz .pinwrap{position:relative}
.kz .pinstick{position:static}
.kz .stdstack{display:flex;flex-direction:column}
.kz .std{display:grid;grid-template-columns:clamp(90px,10vw,150px) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;padding:24px 0;border-top:1px solid var(--color-divider)}
.kz .sn{font-family:var(--font-heading);font-weight:800;font-size:clamp(56px,7vw,110px);line-height:.9;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--kz-a) 60%,transparent);font-feature-settings:"tnum" 1}
.kz .std h4{font-family:var(--font-heading);font-weight:800;font-size:clamp(24px,2.6vw,40px);letter-spacing:-0.015em;margin:0}
.kz .std h4::after{content:"";display:block;width:30px;height:2px;background:var(--kz-brass);margin-top:12px}
.kz .std p{margin:14px 0 0;font-size:clamp(14px,1.15vw,17px);line-height:1.6;max-width:52ch;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.kz .difftick{display:flex;gap:8px;margin-top:clamp(18px,3vw,30px)}
.kz .difftick i{flex:1;max-width:64px;height:2px;background:var(--color-divider);transition:background .3s}
.kz .difftick i.on{background:var(--kz-brass)}
/* pinned one-at-a-time storytelling (desktop, motion on) — carbon cinema stage */
.kz .diffpin .pinwrap{height:calc(100vh + 250vh)}
.kz .diffpin .pinstick{position:sticky;top:0;height:100vh;display:flex}
.kz .diffpin .diffband{flex:1;display:flex;flex-direction:column;justify-content:center;background:#171A1F;color:#F4F0E8;border-block:0}
.kz .diffpin .diffband .shead{border-top:1px solid rgba(244,240,232,.16)}
.kz .diffpin .diffband .kzk{color:rgba(244,240,232,.55)}
.kz .diffpin .diffband .kzk b{color:#76AAA4}
.kz .diffpin .diffband .disp{color:#F4F0E8}
.kz .diffpin .diffband .disp em{color:#76AAA4}
.kz .diffpin .stdstack{position:relative;flex:0 0 clamp(300px,42vh,440px)}
.kz .diffpin .std{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(140px,22vw,360px) 0 0;border-top:0;opacity:0;transform:translateY(46px);filter:blur(8px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1),filter .6s cubic-bezier(.2,.6,.2,1);pointer-events:none}
.kz .diffpin .std.past{transform:translateY(-38px)}
.kz .diffpin .std.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.kz .diffpin .sn{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:clamp(190px,30vh,330px);-webkit-text-stroke:0;color:color-mix(in srgb,#76AAA4 13%,transparent);z-index:0}
.kz .diffpin .std>div{position:relative;z-index:1}
.kz .diffpin .std h4{font-size:clamp(36px,4vw,64px);color:#F4F0E8}
.kz .diffpin .std h4::after{background:#D4AE70;width:40px}
.kz .diffpin .std p{font-size:clamp(15px,1.3vw,19px);color:rgba(244,240,232,.72);max-width:46ch}
.kz .diffpin .difftick i{background:rgba(244,240,232,.18)}
.kz .diffpin .difftick i.on{background:#D4AE70}
.kz .stdcount{margin-left:16px;align-self:center;font-size:12px;letter-spacing:.12em;font-weight:700;font-feature-settings:"tnum" 1;color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.kz .diffpin .stdcount{color:rgba(244,240,232,.55)}
.kz .sellkanji{will-change:transform}
.kz.kz-motion-off .lede .w{color:var(--color-text)}
.kz.kz-motion-off .pinwrap{height:auto}
.kz.kz-motion-off .pinstick{position:static;overflow:visible}
.kz.kz-motion-off .pinstick .hscroll{overflow-x:auto;width:auto;grid-auto-columns:minmax(280px,1fr);transform:none}
@media (prefers-reduced-motion: reduce){
  .kz .lede .w{color:var(--color-text)}
  .kz .pinwrap{height:auto}
  .kz .pinstick{position:static;overflow:visible}
  .kz .pinstick .hscroll{overflow-x:auto;width:auto;grid-auto-columns:minmax(280px,1fr);transform:none}
}
@media (max-width:900px){
  .kz .pinwrap{height:auto}
  .kz .pinstick{position:static;overflow:visible}
  .kz .pinstick .hscroll{overflow-x:auto;width:auto;grid-auto-columns:minmax(280px,1fr)}
}
/* difference — horizontal snap */
.kz .hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;border-left:1px solid var(--color-divider);padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--kz-brass) transparent}
.kz .diffband{position:relative;background:color-mix(in oklab,var(--kz-a) 7%,white);border-block:1px solid var(--color-divider);margin-inline:calc(-1*var(--edge));padding:clamp(48px,6vw,84px) var(--edge) clamp(40px,5vw,60px);overflow:hidden}
.kz .diffband .disp{font-size:clamp(40px,4.6vw,72px)}
.kz .diffband .shead{border-top:0;padding-top:0}
.kz .panel{scroll-snap-align:start;border-right:1px solid var(--color-divider);padding:26px 26px 40px;position:relative;transition:background .3s,box-shadow .3s}
.kz .panel:hover{background:var(--color-surface);box-shadow:var(--shadow-md)}
.kz .panel .pn{font-family:var(--font-heading);font-weight:800;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--kz-a) 60%,transparent);font-feature-settings:"tnum" 1;transition:color .3s}
.kz .panel:hover .pn{color:var(--kz-a)}
.kz .panel h4{font-family:var(--font-heading);font-weight:800;font-size:19px;margin:18px 0 0}
.kz .panel h4::after{content:"";display:block;width:26px;height:2px;background:var(--kz-brass);margin-top:10px}
.kz .panel p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.kz .draghint{margin-top:12px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-text) 45%,transparent)}
/* sell — verdigris field */
.kz .sell{position:relative;background:var(--kz-a);color:var(--color-bg);padding:clamp(72px,9vw,130px) var(--edge);overflow:hidden;margin-top:clamp(72px,9vw,140px)}
.kz .sell .kzk{color:color-mix(in srgb,var(--color-bg) 62%,transparent)}
.kz .sell .disp{font-size:clamp(44px,5.6vw,88px);max-width:16ch}
.kz .sell p{font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:color-mix(in srgb,var(--color-bg) 75%,transparent);max-width:52ch;margin:26px 0 0}
.kz .sell .ref{color:var(--color-bg);font-weight:700;border-bottom:2px solid var(--kz-brass)}
.kz .kzbtn-inv{background:var(--color-bg);color:var(--kz-a);border-color:var(--color-bg)}
.kz .kzbtn-inv:hover{background:color-mix(in srgb,var(--color-bg) 88%,var(--kz-a))}
.kz .kzbtn-out{color:var(--color-bg);border-color:color-mix(in srgb,var(--color-bg) 40%,transparent)}
.kz .kzbtn-out:hover{background:color-mix(in srgb,var(--color-bg) 12%,transparent)}
.kz .sellkanji{position:absolute;right:clamp(16px,4vw,72px);bottom:-.14em;font-size:clamp(180px,24vw,380px);line-height:1;font-weight:400;color:color-mix(in srgb,var(--color-bg) 6%,transparent);pointer-events:none;user-select:none}
/* quotes */
.kz .kqquotes{position:relative}
.kz .kqquotes figure{margin:0;position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(16px);transition:opacity .65s cubic-bezier(.2,.6,.2,1),transform .65s cubic-bezier(.2,.6,.2,1);pointer-events:none}
.kz .kqquotes figure.on{position:relative;opacity:1;transform:none;pointer-events:auto}
.kz .kqquote{font-family:var(--font-heading);font-weight:600;font-size:clamp(26px,2.6vw,40px);line-height:1.25;letter-spacing:-0.01em;max-width:30ch;margin:0;text-indent:-0.42em;color:var(--color-text)}
.kz .kqattr{margin:22px 0 0;font-size:14px;color:color-mix(in srgb,var(--color-text) 62%,transparent);text-indent:-0.9em}
.kz .kqdots{display:flex;gap:10px;margin-top:32px}
.kz .kqdot{width:48px;height:24px;padding:0;border:0;border-radius:0;background:linear-gradient(var(--color-divider),var(--color-divider)) center/100% 2px no-repeat;cursor:pointer;position:relative}
.kz .kqdot i{position:absolute;left:0;right:0;top:50%;height:3px;background:var(--kz-a);transform:translateY(-50%) scaleX(0);transform-origin:left}
.kz .kqdot.on i{animation:kzfill 6s linear forwards}
@keyframes kzfill{to{transform:translateY(-50%) scaleX(1)}}
.kz .kqquotewrap.paused .kqdot.on i{animation-play-state:paused}
/* footer CTA */
.kz .cta{padding:clamp(80px,11vw,160px) 0 clamp(56px,7vw,96px)}
.kz .cta .disp{font-size:clamp(56px,8vw,128px)}
.kz .cta a.big{display:inline-flex;align-items:center;gap:18px;margin-top:36px;font-family:var(--font-heading);font-weight:700;font-size:clamp(18px,1.6vw,24px);color:var(--color-accent-700);text-decoration:none;border-bottom:2px solid var(--kz-brass);padding-bottom:8px}
.kz .cta a.big .arrow{transition:transform .35s}
.kz .cta a.big:hover .arrow{transform:translateX(10px)}
.kz .foot{border-top:1px solid var(--color-divider)}
.kz .footgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:48px;padding:44px 0 40px}
.kz .footgrid .hd{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--color-text) 50%,transparent);margin:0 0 12px}
.kz .footgrid a{display:block;color:inherit;text-decoration:none;font-size:14px;line-height:2;opacity:.85}
.kz .footgrid a:hover{opacity:1;color:var(--color-accent-700)}
.kz .legal{display:flex;gap:24px;padding:14px 0 24px;font-size:12.5px;color:color-mix(in srgb,var(--color-text) 50%,transparent);border-top:1px solid var(--color-divider)}
/* page transition wipe */
.kz .pgt{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden}
.kz .pgt.run{visibility:visible}
.kz .pgt .pane{position:absolute;inset:0;background:var(--kz-a);transform:translateY(101%)}
.kz .pgt .pane2{background:#171A1F;z-index:-1}
.kz .pgt .lab{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.kz .pgt .lab span{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--color-bg)}
.kz .pgt .lab i{font-style:normal;font-size:clamp(28px,3vw,44px);color:var(--kz-brass);line-height:1}
.kz .pgt .lab b{font-family:var(--font-heading);font-weight:800;font-size:clamp(28px,3.6vw,54px);letter-spacing:-0.01em}
.kz .pgt .lab em{font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--color-bg) 60%,transparent)}
.kz .pgt.run .pane1{animation:kzwipe 1.5s cubic-bezier(.75,0,.2,1) forwards}
.kz .pgt.run .pane2{animation:kzwipe 1.5s .07s cubic-bezier(.75,0,.2,1) forwards}
.kz .pgt.run .lab{animation:kzlab 1.5s cubic-bezier(.4,0,.3,1) forwards}
@keyframes kzwipe{0%{transform:translateY(101%)}38%,62%{transform:translateY(0)}100%{transform:translateY(-101%)}}
@keyframes kzlab{0%,30%{opacity:0;transform:translateY(18px)}44%,58%{opacity:1;transform:none}72%,100%{opacity:0;transform:translateY(-14px)}}
/* loader */
.kz .kzloader{position:fixed;inset:0;z-index:100;background:var(--kz-a);color:var(--color-bg);display:grid;place-items:center;transition:transform .65s cubic-bezier(.65,0,.3,1),visibility 0s .65s}
.kz.kz-loaded .kzloader{transform:translateY(-101%);visibility:hidden}
.kz.kz-noloader .kzloader{display:none}
.kz .kzldbox{min-width:340px;text-align:center}
.kz .kzldbox .kzbrand{font-size:24px;margin:0;white-space:nowrap;opacity:0;animation:kzldfade .5s cubic-bezier(.2,.6,.2,1) forwards;color:var(--color-bg)}
.kz .kzldbox .kzbrand em{color:color-mix(in srgb,var(--color-bg) 60%,transparent)}
@keyframes kzldfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kz .kzcaret{display:inline-block;width:2px;height:1em;vertical-align:-0.12em;margin-left:3px;background:color-mix(in srgb,var(--color-bg) 70%,transparent);animation:kzblink .8s steps(1) infinite}
@keyframes kzblink{50%{opacity:0}}
.kz .kzcaret.done{opacity:0;animation:none;transition:opacity .3s}
.kz .kzldtrack{width:220px;height:2px;margin:18px auto 10px;background:color-mix(in srgb,var(--color-bg) 25%,transparent)}
.kz .kzldbar{height:100%;background:var(--color-bg);transform:scaleX(0);transform-origin:left}
.kz .kzldpct{font-size:12.5px;letter-spacing:.1em;font-weight:600;color:color-mix(in srgb,var(--color-bg) 65%,transparent);font-feature-settings:"tnum" 1}
/* reveals */
.kz [data-fx]{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
.kz [data-fx].fx-in{opacity:1;transform:none}
.kz [data-fx="img"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.3,1)}
.kz [data-fx="img"].fx-in{clip-path:inset(0 0 0 0)}
.kz [data-fx="mask"]{opacity:1;transform:none;transition:none}
@keyframes kzstamp{0%{outline:2px solid var(--color-accent-400);outline-offset:1px}100%{outline:2px solid transparent;outline-offset:12px}}
.kz .btn.kz-press{animation:kzstamp .45s cubic-bezier(.2,.6,.2,1)}
.kz .sell .btn.kz-press{animation-name:kzstampink}
@keyframes kzstampink{0%{outline:2px solid color-mix(in srgb,var(--color-bg) 70%,transparent);outline-offset:1px}100%{outline:2px solid transparent;outline-offset:12px}}
/* motion off / reduced */
.kz.kz-motion-off [data-fx],.kz.kz-motion-off [data-fx="img"]{opacity:1;transform:none;clip-path:none;transition:none}
.kz.kz-motion-off .mask>span{transform:none;transition:none}
.kz.kz-motion-off .tickrow{animation:none}
.kz.kz-motion-off .kqquotes figure{transition:none}
.kz.kz-motion-off .kqdot.on i{animation:none;transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
  .kz [data-fx],.kz [data-fx="img"]{opacity:1;transform:none;clip-path:none;transition:none}
  .kz .mask>span{transform:none;transition:none}
  .kz .tickrow{animation:none}
  .kz .kzloader{display:none}
  .kz .btn.kz-press{animation:none}
  .kz .kqquotes figure{transition:none}
  .kz .kqdot.on i{animation:none;transform:scaleX(1)}
}
@media (max-width:1100px){.kz .ghost{display:none}}
@media (max-width:900px){
  .kz .whogrid{grid-template-columns:1fr}
  .kz .prow{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"i t a" "th th th"}
  .kz .prow .idx{grid-area:i}.kz .prow .pt{grid-area:t}.kz .prow .pthumb{grid-area:th}.kz .prow .parr{grid-area:a}
  .kz .footgrid{grid-template-columns:1fr 1fr}
}


/* ── 5. Local additions ────────────────────────────────────────────────────
   Kept deliberately minimal. Everything the mockup covers is left to section 4
   so this page matches it exactly; only things the mockup cannot supply live
   here. Removed on 2026-08-15 after review, because none of it was in the
   design: a custom mobile nav (the design ships .menubtn / .kz-navopen), a
   sticky "Register interest" pill, a back-to-top control, dashed
   reserved-slot markers, and a labelled Lakeside placeholder.              */

/* — brand as a link —
   The mockup's wordmark is a <span>; ours links home. `.kz .kznav a:not(.btn)`
   would otherwise drop it to 14px/500, so this restores the mockup's exact
   wordmark treatment. Visually identical to the design. */
.kz .kznav a.kzbrand{font-size:17px;font-weight:800;letter-spacing:.04em;opacity:1;margin-right:auto}
/* The mockup's ≤900px rule hides `a:not(.btn-primary)`, which would take the
   linked wordmark with it. */
@media (max-width:900px){
  .kz .kznav a.kzbrand{display:flex !important}
}

/* — footer legal links —
   The mockup renders privacy/terms as plain <span>; ours link out. */
.kz .legal a{color:inherit;text-decoration:none}
.kz .legal a:hover{color:var(--color-accent-700)}

/* — real <img> in place of the mockup's <image-slot> —
   REQUIRED, not cosmetic. The design sizes its media through `image-slot`
   selectors (`.kz .heromedia image-slot{width:100%;aspect-ratio:21/9;display:block}`
   and inline width/height on the stage wrappers). Swapping the placeholders for
   real <img> leaves those selectors matching nothing, so the hero grows to the
   image's natural 2:1 and the project stage overflows its 4:3 frame. These
   restate exactly the geometry the mockup specifies. */
.kz .heromedia .duotone{display:block;width:100%;aspect-ratio:21/9}
.kz .heromedia img{width:100%;height:100%;object-fit:cover}
.kz .pjlayer .duotone{width:100%;height:100%}
.kz .pjlayer img{width:100%;height:100%;object-fit:cover}

/* — Lakeside stage, pending its render —
   Flat verdigris at the same value the duotone produces, so the project stage
   holds the mockup's geometry without inventing a visible placeholder.
   Delete once Projects/lakeside-render.webp is in. */
.kz .pjempty{width:100%;height:100%;background:var(--kz-a)}

/* — long-form hero headline —
   COPY-DRIVEN, not a design change. The mockup's hero is sized for a 32-character
   statement ("Property, structured to perform."); the approved territory line runs
   to 57 and would break to five lines at clamp(64px,9.4vw,148px), overflowing the
   measure. This sets the same three-line composition at a size the longer sentence
   can hold. Remove the .hero-long class to return to the mockup's original size. */
.kz .hero .disp.hero-long{font-size:clamp(40px,6.2vw,92px)}


/* ============================================================================
   5b. THE FOUR RESERVED SECTIONS — built 2026-08-16

   Until now home-modern.html carried four empty `RESERVED SLOT` comments: the
   Leaflet footprint map, a pipeline stat, a pre-footer image CTA and the
   chatbot. They exist on the legacy homepage and were held back so Claude
   Design could draw them. Sudi asked instead for three complete homepage
   options, so they are ported here and restyled into the Mineral Authority
   system — existing content in the new palette, not invented UI.

   Used by home-a.html / home-b.html / home-c.html. index.html still carries
   the reserved comments and is deliberately untouched.
   ========================================================================= */

/* ── legacy variable shim ──────────────────────────────────────────────────
   The two blocks below are lifted verbatim from styles.css so the ported
   markup and chatbot.js keep working. They resolve these names, which this
   stylesheet does not otherwise define. Values are copied from styles.css's
   :root — already Mineral Authority — so the two stylesheets cannot drift
   apart in colour, only in the overrides stated explicitly further down. */
.kz .map-container, .kz .map-legend, .map-popup, #kzChat {
  --cream: #FBF9F5;
  --warm-bg: #F4F0E8;
  --charcoal: #171A1F;
  --gold: #1E6B64;
  --gold-dark: #16564F;
  --gold-light: #38776F;
  --dark-text: #171A1F;
  --body-text: #3A3F47;
  --warm-white: #FBF9F5;
  --slate: #565C66;
  --muted: #767C86;
  --light-border: rgba(23,26,31,0.12);
  --warm-shadow: 0 4px 32px rgba(23,26,31,0.06);
  --font-display: 'Gabarito', system-ui, -apple-system, sans-serif;
  --font-sans: 'Gabarito', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}


/* ── the footprint map ─────────────────────────────────────────────────────
   Markup and init ported from index-legacy.html:795-807 / :878-957. The rules
   below are styles.css:1213-1301 verbatim; the override block after them is
   the only presentation change. */
.map-container {
  position: relative; margin-top: 60px;
  border: 1px solid var(--light-border);
  box-shadow: var(--warm-shadow);
}
#projectMap {
  width: 100%; height: 520px;
  background: var(--warm-bg);
}
/* Light map tiles */
.map-container .leaflet-tile-pane { filter: brightness(1) contrast(1); }
.map-container .leaflet-control-zoom a {
  background: white !important; color: var(--dark-text) !important;
  border-color: var(--light-border) !important;
}
.map-container .leaflet-control-zoom a:hover {
  background: var(--cream) !important;
}
/* Custom popup */
.map-popup .leaflet-popup-content-wrapper {
  background: white; border: 1px solid var(--light-border);
  border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  padding: 0; overflow: hidden;
}
.map-popup .leaflet-popup-tip { background: white; border: 1px solid var(--light-border); }
.map-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.map-popup-inner {
  padding: 0; min-width: 260px; max-width: 300px; position: relative;
}
.map-popup-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--gold), rgba(56,119,111,0.2));
}
.map-popup-header {
  padding: 22px 28px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.map-popup-name {
  font-family: var(--font-display);
  font-size: 22px; color: var(--dark-text); font-weight: 500; line-height: 1.2;
}
.map-popup-suburb {
  font-size: 9px; color: rgba(56,119,111,0.5); letter-spacing: 2.5px; font-weight: 600;
  margin-top: 6px;
}
.map-popup-status {
  display: inline-block; padding: 5px 14px; flex-shrink: 0;
  font-size: 8px; font-weight: 700; letter-spacing: 2px; white-space: nowrap;
}
.map-popup-desc {
  font-size: 14px; color: var(--body-text); line-height: 1.75; font-weight: 400;
  padding: 0 28px 18px;
}
.map-popup-footer {
  border-top: 1px solid rgba(56,119,111,0.1);
  margin: 0;
}
.map-popup-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; color: var(--gold);
  font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(56,119,111,0.02);
}
.map-popup-link:hover {
  background: rgba(56,119,111,0.06); padding-left: 32px;
}
.map-popup-link-arrow {
  font-size: 16px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.6;
}
.map-popup-link:hover .map-popup-link-arrow { transform: translateX(4px); opacity: 1; }
.map-marker-icon { background: none !important; border: none !important; }

.map-legend {
  display: flex; gap: 24px; justify-content: center; margin-top: 24px; flex-wrap: wrap;
  padding: 0 8%;
}
.map-legend-item {
  display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 1.5px;
  color: var(--slate); font-weight: 500;
}
.map-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.map-legend-dot.current { background: var(--gold); box-shadow: 0 0 8px rgba(56,119,111,0.6); }

@media (max-width: 768px) {
  #projectMap { height: 400px; }
  .map-container { margin-top: 40px; }
}

/* — map, Mineral Authority overrides —
   Three changes to the ported rules, all so the basemap sits behind the brand
   rather than competing with it: a Carbon hairline frame instead of the soft
   card shadow, desaturated tiles, and square controls. Markers are recoloured
   in scripts-modern.js, where the divIcon HTML is built. */
.kz .map-container{margin-top:clamp(28px,4vw,52px);border:1px solid var(--color-text);box-shadow:none}
.kz .map-container .leaflet-tile-pane{filter:saturate(.32) contrast(1.02)}
.kz #projectMap{height:clamp(380px,52vh,560px);background:var(--color-bg)}
.kz .map-container .leaflet-control-zoom a{
  border-radius:0!important;background:var(--color-surface)!important;
  border-color:var(--color-text)!important;font-family:var(--font-body)}
.kz .map-container .leaflet-control-zoom a:hover{background:var(--color-bg)!important}
.kz .map-popup .leaflet-popup-content-wrapper{border-radius:0;border-color:var(--color-text)}
.kz .map-legend{justify-content:flex-start;padding:0;margin-top:16px;
  font-family:var(--font-body);text-transform:uppercase}
/* CONTRAST FIX, carried over from the ported block: the legacy popup sets the
   suburb label to rgba(56,119,111,.5), which measures 2.06:1 on the popup's
   white ground — it was unreadable on the live site too, not just here.
   Verdigris at full opacity is 6.28:1 and reads as the same colour. */
.map-popup .map-popup-suburb{color:#1E6B64}
/* Full-bleed variant — Option C only. Breaks out of .wrap's measure. */
.kz .kzmapfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
.kz .kzmapfull .map-container{border-left:0;border-right:0}
.kz .kzmapfull .map-legend{padding:0 clamp(18px,5vw,64px)}


/* ── pre-footer image CTA (.kzband) ────────────────────────────────────────
   The legacy homepage closes on a full-bleed band over riva-interior.webp
   (index-legacy.html:827-841). The mockup replaces it with a type-only block;
   both are wanted, so this is built as a component the options opt into.

   Two deliberate departures from the legacy version: a real <img> rather than
   a CSS background-image, so it can be lazy-loaded and carries alt text; and a
   flat Carbon scrim rather than the legacy gradient — the gradient dropped body
   copy to 3.1:1 over the lighter part of the render.

   The scrim is 74%, not the 62% first tried. 62% measured 4.31:1 for the
   heading and 3.65:1 for body copy against the worst ground a photograph could
   present (pure white), i.e. below the 4.5:1 body minimum. 74% holds 6.5:1 for
   everything at full Porcelain no matter what image is dropped in, so this
   component cannot be broken later by swapping the photo. Body copy is set at
   full opacity for the same reason — the 86% first used cost another 0.9. */
.kz .kzband{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;min-height:clamp(420px,58vh,620px);
  padding:clamp(56px,9vw,120px) clamp(18px,5vw,64px)}
.kz .kzband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.kz .kzband::after{content:'';position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--color-text) 74%,transparent)}
.kz .kzbandin{max-width:52ch;color:var(--color-bg)}
.kz .kzbandin .kzk{color:var(--color-bg)}
.kz .kzbandin .disp{color:var(--color-bg);margin:18px 0 0}
.kz .kzbandin p{color:var(--color-bg);margin:18px 0 0;max-width:46ch}
.kz .kzbandin .big{color:var(--color-bg);border-bottom-color:color-mix(in srgb,var(--color-bg) 45%,transparent)}
.kz .kzbandrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3.4vw,38px)}


/* ── audience route cards (.kzroutes) ──────────────────────────────────────
   Option C only. Three ways into the site directly under the hero, for the
   three people who arrive: a buyer, a landowner, a capital partner.
   Built from the hairline vocabulary the mockup already uses on .pjitem —
   square, 1px divider, arrow that travels on hover. No new idiom. */
.kz .kzroutes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.kz .kzroute{display:flex;flex-direction:column;gap:8px;padding:clamp(24px,3vw,38px) clamp(18px,2.2vw,30px);
  text-decoration:none;color:inherit;border-left:1px solid var(--color-divider);
  transition:background .35s cubic-bezier(.16,1,.3,1)}
.kz .kzroute:first-child{border-left:0}
.kz .kzroute:hover{background:color-mix(in srgb,var(--color-accent) 6%,transparent)}
.kz .kzroute b{font-family:var(--font-heading);font-size:clamp(19px,1.9vw,25px);font-weight:600;letter-spacing:-.01em}
.kz .kzroute span{font-size:14.5px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 72%,transparent);max-width:30ch}
.kz .kzroutearr{margin-top:auto;padding-top:14px;font-size:17px;color:var(--color-accent);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.kz .kzroute:hover .kzroutearr{transform:translateX(6px)}
@media(max-width:820px){
  .kz .kzroutes{grid-template-columns:1fr}
  .kz .kzroute{border-left:0;border-top:1px solid var(--color-divider)}
  .kz .kzroute:first-child{border-top:0}
}

/* ── standards as a static grid (.stdgrid) ─────────────────────────────────
   Option C only. The same six standards the pinned sequence carries, read at
   a glance instead of scrolled through. The pinned version stays untouched —
   the point of shipping both is to find out which one earns its scroll. */
.kz .stdgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--color-divider);border:1px solid var(--color-divider);margin-top:clamp(28px,4vw,48px)}
.kz .stdgrid>div{background:var(--color-bg);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:10px}
.kz .stdgrid .sn{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--color-accent)}
.kz .stdgrid h4{font-family:var(--font-heading);font-size:clamp(17px,1.6vw,21px);font-weight:600;
  letter-spacing:-.01em;margin:0}
.kz .stdgrid p{font-size:14.5px;line-height:1.68;margin:0;
  color:color-mix(in srgb,var(--color-text) 76%,transparent)}
@media(max-width:1000px){.kz .stdgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kz .stdgrid{grid-template-columns:1fr}}


/* ── concierge chat widget ─────────────────────────────────────────────────
   styles.css:1843-1972 verbatim, so chatbot.js's markup keeps working with no
   change. Already Mineral Authority — it resolves --gold to verdigris through
   the shim above.

   PREFIX COLLISION, deliberate: the chatbot owns `.kz-*` and this design's
   root class is `.kz`. Class selectors match exactly, so `.kz` and
   `.kz-chat-panel` never collide — but an attribute selector such as
   [class^="kz-"] would catch both. Do not add one. */
   Concierge chat widget
   ============================================================ */
#kzChat { position: fixed; right: 24px; bottom: 24px; z-index: 1200; font-family: var(--font-sans); }
.kz-chat-launch {
  width: 52px; height: 52px; border: 0; cursor: pointer;
  background: var(--charcoal); color: #EDE8DC;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(23,26,31,0.22);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.kz-chat-launch:hover { background: var(--gold); box-shadow: 0 6px 26px rgba(23,26,31,0.3); }
.kz-chat-launch svg { width: 21px; height: 21px; }
.kz-chat-launch svg + svg { display: none; }
.kz-chat-launch.kz-open svg { display: none; }
.kz-chat-launch.kz-open svg + svg { display: block; }

.kz-chat-panel {
  position: absolute; right: 0; bottom: 66px;
  width: min(340px, calc(100vw - 40px));
  height: min(500px, calc(100vh - 120px));
  background: var(--cream);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(23,26,31,0.22);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: kzPanelIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom right;
}
.kz-chat-panel[hidden] { display: none; }
@keyframes kzPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.kz-chat-head {
  background: var(--charcoal); color: #EDE8DC;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.kz-chat-brand { font-weight: 700; font-size: 14px; letter-spacing: 2.5px; }
.kz-chat-brand i { font-style: normal; color: var(--gold-light); }
.kz-chat-sub { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 3.5px; color: rgba(244,240,232,0.5); margin-top: 3px; }
.kz-chat-close { background: none; border: 0; color: rgba(244,240,232,0.6); font-size: 14px; cursor: pointer; padding: 6px; transition: color 0.2s; }
.kz-chat-close:hover { color: #EDE8DC; }

.kz-chat-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; }
.kz-msg { max-width: 88%; padding: 10px 13px; font-size: 13px; line-height: 1.55; }
.kz-msg a { color: var(--gold); }
.kz-bot {
  background: var(--warm-white); border: 1px solid var(--light-border);
  color: var(--body-text); align-self: flex-start;
  border-radius: 12px 12px 12px 3px;
}
.kz-user {
  background: var(--gold); color: #fff; align-self: flex-end;
  border-radius: 12px 12px 3px 12px;
}
.kz-typing span {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted); margin-right: 4px;
  animation: kzBlink 1.1s infinite;
}
.kz-typing span:nth-child(2) { animation-delay: 0.18s; }
.kz-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes kzBlink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* pre-asked questions */
.kz-questions { display: flex; flex-direction: column; gap: 0; padding: 2px 0 4px; }
.kz-q-label {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); padding: 4px 2px 8px;
}
.kz-questions button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; width: 100%;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  color: var(--slate);
  padding: 10px 2px; background: transparent; border: 0;
  border-top: 1px solid var(--light-border);
  cursor: pointer;
  transition: color 0.2s, padding-left 0.25s ease;
}
.kz-questions button:last-child { border-bottom: 1px solid var(--light-border); }
.kz-questions button span { color: var(--gold); opacity: 0; transition: opacity 0.2s; flex-shrink: 0; }
.kz-questions button:hover { color: var(--dark-text); padding-left: 6px; }
.kz-questions button:hover span { opacity: 1; }

.kz-cta { padding: 2px 0 4px; }
.kz-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  padding: 10px 16px; background: var(--dark-text); color: var(--cream);
  border: 0; border-radius: 100px; cursor: pointer; text-decoration: none;
  transition: background 0.25s ease;
}
.kz-cta-btn:hover { background: var(--gold); color: #fff; }
.kz-cta-btn span { transition: transform 0.3s ease; }
.kz-cta-btn:hover span { transform: translateX(3px); }

.kz-chat-input { display: flex; border-top: 1px solid var(--light-border); flex-shrink: 0; background: var(--warm-white); }
.kz-chat-input input {
  flex: 1; border: 0; background: transparent; padding: 13px 15px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--dark-text); outline: none;
}
.kz-chat-input input::placeholder { color: var(--muted); }
.kz-chat-input button {
  border: 0; background: transparent; color: var(--gold);
  font-size: 17px; padding: 0 16px; cursor: pointer; transition: color 0.2s;
}
.kz-chat-input button:hover { color: var(--gold-dark); }
.kz-chat-foot {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 7px 10px;
  border-top: 1px solid var(--light-border); flex-shrink: 0;
}
.kz-chat-foot a { color: var(--muted); }

/* chat launcher takes the sticky-enquire spot */
.sticky-enquire { display: none !important; }

@media (max-width: 600px) {
  #kzChat { right: 14px; bottom: 14px; }
  .kz-chat-panel { bottom: 62px; height: min(480px, calc(100dvh - 100px)); }
  .kz-chat-launch { width: 48px; height: 48px; }
}

/* ============================================================================

/* — chat, one override —
   The ported block hides .sticky-enquire, which does not exist on these pages;
   harmless, left in place so the block stays a verbatim copy. Square the
   launcher and panel to match the rest of the system. */
#kzChat .kz-chat-launch,#kzChat .kz-chat-panel,#kzChat .kz-msg,#kzChat .kz-cta-btn{border-radius:0}

/* ── untinted imagery (.kznotint) ──────────────────────────────────────────
   Sudi asked on 2026-08-16 for the verdigris tint off the project imagery, so
   the renders read in their own colour.

   Done as an opt-in class on the .kz root rather than by deleting the rule,
   because index.html shares this stylesheet and is signed off as matching the
   mockup exactly — the duotone is the design there. Only home-a/b/c carry
   .kznotint. Remove the class to put the tint back.

   The wrapper stays: .duotone also supplies the geometry real <img> needs
   (see the image-slot note above). Only the blend overlay is switched off.

   Named .kznotint, not .kz-notint, to stay out of the chatbot's `.kz-*`
   namespace. */
.kz.kznotint .duotone::after{display:none}
/* The Lakeside placeholder was flat verdigris to match what the duotone
   produced. Against untinted photography that reads as a coloured panel, so
   it drops to a neutral until the render lands. */
.kz.kznotint .pjempty{background:color-mix(in srgb,var(--color-text) 12%,var(--color-bg))}

/* ── <em> on dark grounds ──────────────────────────────────────────────────
   `.kz .disp em` is verdigris. On the Porcelain sections that is the point;
   on the two verdigris/Carbon grounds it is verdigris on verdigris — the sell
   band's emphasis measured 1.0:1 and simply did not render, and the image
   band's came in at 1.4:1.

   The mockup already solves this twice, lightening `em` on its own dark fields
   (`.herofield` -> --color-accent-200, `.diffband` -> #76AAA4). This follows
   that pattern for the two grounds the mockup does not cover. #9FC7C2 measures
   3.42:1 on verdigris and 4.02:1 against the worst ground the band's scrim can
   sit on — both clear the 3:1 large-text minimum, and these are display
   headings only. */
.kz .sell .disp em,
.kz .kzband .disp em{color:#9FC7C2}

/* The image band's heading had no size of its own, so it fell back to the base
   .disp and rendered at body scale against a full-bleed photograph. This is
   the .cta scale, one step down. */
.kz .kzband .disp{font-size:clamp(40px,5.2vw,82px);max-width:15ch}
.kz .kzband .kzk{margin-bottom:4px;display:block}
.kz .kzbandin p{font-size:clamp(15px,1.2vw,18px);line-height:1.62}

/* — section headings (.secth) —
   The mockup sizes .disp only inside .hero, .cta, .sell and .diffband. The
   sections added for these options (footprint, the standards grid) sit in
   plain .sect, so their h2 fell through to the base .disp and rendered at
   roughly body scale. This is the sell band's scale, one step down. */
.kz .disp.secth{font-size:clamp(34px,4.4vw,68px);max-width:18ch}
.kz .sell .disp.secth{font-size:clamp(44px,5.6vw,88px);max-width:16ch}
.kz .kzband .disp.secth{font-size:clamp(40px,5.2vw,82px);max-width:15ch}
/* The pinned standards heading also carries .secth, but its size is the
   mockup's and must not be changed by the rule above. Restated so cascade
   order cannot alter it. */
.kz .diffband .disp.secth{font-size:clamp(40px,4.6vw,72px)}

/* ============================================================================
   5c. STATEMENT TYPOGRAPHY + ROTATING HEADLINE — 2026-08-16

   Sudi asked for the treatment used on the who-we-are opener — oversized tight
   display type, one phrase in verdigris, words lighting as it scrolls up — to
   carry through the rest of the page, and for the rotating hero word from the
   `animated-hero` React component he supplied.
   ========================================================================= */

/* ── statement blocks (.stmt) ──────────────────────────────────────────────
   A section opener built on the existing .lede, which already carries the
   scale, the verdigris <em> and the .w word-lighting hooks. splitLede() was
   generalised from #kzlede to every .lede so each of these lights on its own
   as it comes up the viewport. Nothing new is invented — this is the same
   component, used in more places. */
.kz .stmt{padding:clamp(30px,4.6vw,72px) 0 clamp(18px,2.4vw,34px)}
.kz .stmt .lede{max-width:22ch}
.kz .stmt .stmtsub{margin:clamp(18px,2.2vw,30px) 0 0;max-width:54ch;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.7;
  color:color-mix(in srgb,var(--color-text) 74%,transparent)}
/* Wide variant for the two full-width statements (footprint, closing proof) —
   a longer measure so a two-line sentence does not become five. */
.kz .stmt.stmtwide .lede{max-width:30ch}

/* On the verdigris sell band the .lede's verdigris <em> would vanish and the
   unlit .w words would sit at 20% on a mid-tone ground. Both are re-pointed. */
.kz .sell .lede{color:var(--color-bg)}
.kz .sell .lede em{color:#9FC7C2}
.kz .sell .lede .w{color:#9FC7C2}
.kz .sell .lede .w.lit{color:var(--color-bg)}

/* ── rotating headline word (.rot) ─────────────────────────────────────────
   Vanilla port of the framer-motion rotator. One word occupies the line; the
   others are absolutely positioned on top of it and translate in and out.

   The width problem the React version has too: if the element sized to the
   current word, the line would reflow on every change and the whole headline
   would jitter. `inline-grid` with every word in grid-area 1/1 stacks them and
   sizes the box to the WIDEST word once, so the line never moves. That is also
   why each word carries its own full stop — a static one would sit at the
   widest word's edge and detach from the short ones.

   The easing is the visual resolve of the original's spring (stiffness 50):
   a fast arrival with a small overshoot. */
.kz .rot{position:relative;display:inline-grid;vertical-align:baseline;
  overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.kz .rot i{grid-area:1/1;font-style:normal;color:var(--color-accent-200);
  white-space:nowrap;opacity:0;transform:translateY(70%);
  transition:transform .62s cubic-bezier(.22,1.15,.36,1),opacity .42s ease}
.kz .rot i.on{opacity:1;transform:translateY(0)}
.kz .rot i.out{opacity:0;transform:translateY(-70%)}
/* Outside the hero (Porcelain grounds) the rotating word takes the standard
   verdigris accent rather than the hero's light tint. */
.kz .rot i{color:var(--kz-a)}
.kz .herofield .rot i{color:var(--color-accent-200)}

@media (prefers-reduced-motion: reduce){
  /* No rotation at all — a loop has no end state to jump to. The JS also
     stops before starting; this is the belt to that pair of braces. */
  .kz .rot i{transition:none}
  .kz .rot i:not(.on){display:none}
}
.kz.kz-motion-off .rot i{transition:none}
.kz.kz-motion-off .rot i:not(.on){display:none}

/* ── text-reveal entrance (.treveal) ───────────────────────────────────────
   The `text-reveal` component's "fade-in-blur, per word" preset, in CSS.
   Values are the original's: blur(12px) -> blur(0), opacity 0 -> 1, y 20 -> 0,
   300ms per word, staggered 42ms (its 0.05 stagger at the demo's speedReveal
   of 1.2). scripts-modern.js splits the words and stamps --i on each.

   Applied to headings only. `filter` is composited per element, so a hundred
   blurred spans in a body paragraph would cost far more than the effect is
   worth; a six-word heading does not. */
.kz .treveal .tw{display:inline-block;white-space:pre;
  opacity:0;filter:blur(12px);transform:translateY(20px);
  transition:opacity .3s ease,filter .3s ease,transform .3s ease;
  /* Exit runs last-word-first — the original's exit variant is
     staggerDirection: -1. --n is the word count, stamped by the JS. */
  transition-delay:calc((var(--n,1) - 1 - var(--i,0)) * 42ms)}
.kz .treveal.tr-in .tw{opacity:1;filter:blur(0);transform:none;
  transition-delay:calc(var(--i,0) * 42ms)}

/* No entrance under reduced motion — the words are simply there. The JS also
   adds .tr-in immediately in that case; this makes it true even if the JS
   never runs. */
@media (prefers-reduced-motion: reduce){
  .kz .treveal .tw{opacity:1;filter:none;transform:none;transition:none}
}
.kz.kz-motion-off .treveal .tw{opacity:1;filter:none;transform:none;transition:none}
/* If scripts-modern.js fails, the words are never split and nothing is
   hidden — .treveal on its own has no styles that hide anything. */

/* ============================================================================
   5d. MOBILE — 2026-08-16

   Captured at 390px, the design pages had four real faults. The 41 pages on
   styles.css were already sound at this width; everything below is scoped to
   .kz and changes nothing above 900px.
   ========================================================================= */

@media (max-width: 900px) {
  /* 1. The nav wrapped to two rows. DOM order is brand, Menu, links…, CTA, and
        the CTA's margin-left:auto pushed it onto a line of its own with a gap
        above it. Reordering puts brand | Get in touch | Menu on one row and
        leaves the links to the expanded panel below. */
  .kz .kznav { align-items: center; row-gap: 0; }
  .kz .kznav a.kzbrand { flex: 1 1 auto; margin-right: 0; order: 1; }
  .kz .kznav a.btn-primary { order: 2; margin-left: 0; flex: 0 0 auto; }
  .kz .menubtn { order: 3; flex: 0 0 auto; }
  /* The expanded links must still occupy full rows under that header. */
  .kz.kz-navopen .kznav a:not(.btn-primary) { order: 4; }

  /* 2. The rule strip clipped its second label mid-word ("KAIZEN — CONTI").
        Two nowrap labels plus a flexible ruler cannot fit 390px. The ruler is
        decorative, so it goes first and the labels stack. */
  .kz .rulestrip { flex-wrap: wrap; gap: 6px 16px; padding-block: 12px; }
  .kz .rulestrip .ruler { display: none; }
  .kz .rlab { white-space: normal; font-size: 11px; flex: 1 1 100%; }

  /* 3. Section kickers sat in two columns and both wrapped to two lines each.
        Stacked, they read as the label and sub-label they are. */
  .kz .shead { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* 4. The figure caption had the same two-column problem. */
  .kz .figcap { flex-direction: column; gap: 4px; }
}

@media (max-width: 430px) {
  /* At iPhone widths the three nav items still crowd. The wordmark's
     "/ PROJECTS" suffix is the least load-bearing thing in the row. */
  /* The em is hidden at 900px now, so the tighter 14px inset this used to
     need is gone — it was leaving the homepage wordmark 8px left of every
     other page's. Padding stays at the design's 20px. */
  .kz .kznav { gap: 8px; }
  .kz .menubtn { padding: 12px 12px; font-size: 12px; }
  .kz .kznav a.btn-primary { padding-inline: 14px; font-size: 13px; }

  /* Stat cells were sharing a row and truncating their labels. */
  .kz .statrow { gap: 22px 28px; }
  .kz .statrow .stat { flex: 1 1 40%; }
}

/* ── statement type on small screens ───────────────────────────────────────
   The .lede clamp bottoms out at 26px, which is a desktop minimum, not a
   phone one: a 27-word statement still ran to eight lines at 390px and filled
   the screen before the reader reached anything else. Below 640px the
   statement steps down to 21px and drops its 28ch measure, which is narrower
   than the column it is already in.

   It stays visibly larger than the body copy beneath it — that contrast is
   the point of the treatment — just not a full screen of it. */
@media (max-width: 640px) {
  .kz .lede { font-size: 21px; line-height: 1.34; max-width: none; }
  .kz .stmt { padding-top: 22px; padding-bottom: 10px; }
  .kz .stmt .lede, .kz .stmt.stmtwide .lede { max-width: none; }
  .kz .stmtsub { font-size: 14.5px; margin-top: 14px; }
  .kz .whoside p { font-size: 14.5px; }
}

/* Match styles.css: the wordmark suffix goes at 900px, not 430px, so both
   stacks show the same mark at the same width, and nothing in the bar wraps. */
@media (max-width: 900px) {
  .kz .kznav a.kzbrand em { display: none; }
  .kz .kznav a.kzbrand, .kz .kznav a.btn-primary { white-space: nowrap; }
}

/* Below 900px the bar is light on every page, so the CTA must be the filled
   verdigris button it is elsewhere. The design's over-hero rule inverted it to
   Porcelain-on-Porcelain, which read as plain text next to the subpages'
   filled button. */
@media (max-width: 900px) {
  .kz:not(.kz-scrolled) .kznav a.btn-primary,
  .kz .kznav a.btn-primary {
    background: var(--kz-a);
    color: var(--color-bg);
    border-color: var(--kz-a);
  }
}

/* ── six standards, pinned on mobile too — 2026-08-17 ─────────────────────
   The sequence used to be desktop-only. Enabling it below 900px needs three
   adjustments:

   1. svh, not vh. Mobile browsers change vh as the URL bar hides and shows,
      which makes a 100vh sticky panel jump mid-scroll. svh is the small
      viewport height and stays put.
   2. Less travel. 250vh of scroll to advance six items is a long way on a
      phone; 168vh keeps the same pacing per item at mobile scroll speeds.
   3. A narrower number column and smaller type so each standard fits the
      panel without scrolling inside it. */
@media (max-width: 900px) {
  .kz .diffpin .pinwrap { height: calc(100svh + 168vh); }
  .kz .diffpin .pinstick { height: 100svh; }
  .kz .diffpin .diffband { padding: 18px 20px; justify-content: center; }
  .kz .diffpin .std {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
  }
  .kz .diffpin .std .sn { font-size: 30px; }
  .kz .diffpin .std h4 { font-size: 18px; }
  .kz .diffpin .std p { font-size: 14px; line-height: 1.55; }
  .kz .diffpin .diffband .disp { font-size: clamp(28px, 8vw, 40px); margin-bottom: 16px; }
  .kz .diffpin .difftick { margin-top: 14px; }
}
/* Reduced motion already drops .diffpin in the scroll handler, so the static
   stack remains for anyone who has asked for less movement. */