/* ==========================================================================
   KOKORO RECOVERY RESIDENCE
   Design system — warm Japanese minimalism
   Tokens named after materials, not roles (washi, sumi, ai, hinoki, kinu)
   ========================================================================== */

/* ---------- 0. FONTS (self-hosted — no third-party render-blocking request) ---------- */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/fonts/newsreader-latin-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* 心 only — a 956-byte single-glyph subset of Noto Serif JP */
@font-face {
  font-family: "KokoroGlyph"; font-style: normal; font-weight: 400; font-display: block;
  src: url("/fonts/kokoro-glyph.woff2") format("woff2");
  unicode-range: U+5FC3;
}

/* ---------- 1. TOKENS ---------- */
:root {
  /* Ground & surface — washi (handmade paper) */
  --washi:        #F7F1E6;   /* primary ground — warm cream, not stark white */
  --washi-deep:   #F0E9DA;   /* alternate section */
  --kinu:         #E8E0D2;   /* silk — panels, cards */
  --hinoki:       #C9B79A;   /* cypress wood — warm accent */
  --hinoki-pale:  #DFD2BC;
  --hinoki-ink:   #7E6B49;   /* hinoki, darkened for use on light grounds */

  /* Ink — sumi (never pure black) */
  --sumi:         #211F1B;
  --sumi-deep:    #17150F;   /* inverted sections */
  --sumi-soft:    #4A453D;
  --sumi-mute:    #6B6356;   /* AA on washi, soft and silk */

  /* Ai — aizome indigo, the single brand colour */
  --ai:           #1E3348;
  --ai-deep:      #142434;
  --ai-pale:      #E2E7EC;

  /* Beni — the brand red, from the logo. The accent of the whole system. */
  --beni:         #BA0F0F;   /* on light grounds, buttons, rules */
  --beni-deep:    #8F0B0B;   /* hover */
  --beni-soft:    #E05545;   /* readable red on dark grounds */
  --beni-line:    rgba(186,15,15,0.55);

  /* Moss — secondary organic accent */
  --moss:         #6B6F55;

  /* Lines */
  --hairline:     #DDD4C4;
  --hairline-inv: rgba(248, 244, 237, 0.18);

  /* Type */
  --serif: "Newsreader", "KokoroGlyph", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --glyph: "KokoroGlyph", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "MS Mincho", serif;

  /* Rhythm */
  --gut:      clamp(1.25rem, 4vw, 2.5rem);
  --bay:      min(1320px, 100% - (var(--gut) * 2));
  --bay-text: min(720px, 100% - (var(--gut) * 2));
  --pad-sec:  clamp(4.5rem, 11vw, 10rem);
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

::selection { background: var(--beni); color: var(--washi); }

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--serif);
  font-size: clamp(1.0rem, 0.44vw + 0.9rem, 1.125rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.012em;              /* positive tracking — the Aman trick */
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- 3. TYPE SCALE ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;                      /* no bold anywhere in the heading scale */
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.t-display { font-size: clamp(2.6rem, 6.4vw, 5.1rem); line-height: 1.03; letter-spacing: -0.022em; }
.t-h1      { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.016em; }
.t-h2      { font-size: clamp(1.75rem, 3.2vw, 2.7rem); line-height: 1.14; letter-spacing: -0.012em; }
.t-h3      { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.26; letter-spacing: -0.006em; }

/* The one recurring typographic device: wide-tracked uppercase eyebrow */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.688rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--sumi-mute);
  display: block;
  margin-bottom: 1.35rem;
}
.eyebrow--ai { color: var(--beni); }
.eyebrow { text-wrap: balance; }
.inv .eyebrow { color: var(--beni-soft); }

.lede {
  font-size: clamp(1.16rem, 1.05vw + 0.95rem, 1.5rem);
  line-height: 1.5;
  color: var(--sumi-soft);
  letter-spacing: 0.004em;
}
.muted { color: var(--sumi-mute); }
.ui {
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
}
.ui-sm { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.5; }

/* Numeric section marker — 01 / 02 */
.marker {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--beni);
  font-variant-numeric: tabular-nums;
}

.inv .marker { color: var(--beni-soft); }

/* ---------- 4. LAYOUT ---------- */
.bay      { width: var(--bay); margin-inline: auto; }
.bay-text { width: var(--bay-text); margin-inline: auto; }
.sec      { padding-block: var(--pad-sec); position: relative; }
.sec--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Section inversion rhythm — light → soft → dark (Casa Cook lesson) */
.bg-washi { background: var(--washi); }
.bg-soft  { background: var(--washi-deep); }
.bg-silk  { background: var(--kinu); }
.inv      { background: var(--sumi-deep); color: var(--washi); }
.inv .lede, .inv .muted { color: rgba(248, 244, 237, 0.66); }
.inv a { color: var(--washi); }
.inv .rule { background: var(--hairline-inv); }

.rule { height: 1px; background: var(--hairline); border: 0; width: 100%; }
/* The brand divider — thin red rule with a centered dot, from the identity system */
.rule-beni {
  border: 0; height: 1px; width: 100%;
  background: linear-gradient(to right, var(--beni-line), var(--beni-line));
  position: relative; overflow: visible;
}
.rule-beni::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--beni);
}
.inv .rule-beni { background: rgba(224,85,69,0.5); }
.inv .rule-beni::after { background: var(--beni-soft); }

.grid { display: grid; gap: clamp(1.5rem, 3.4vw, 3.25rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* Editorial split — sticky label column + content */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 1.75rem; } }
.split__aside { position: sticky; top: 8rem; align-self: start; }
@media (max-width: 900px) { .split__aside { position: static; } }

.stack > * + * { margin-top: 1.15rem; }
.stack-lg > * + * { margin-top: 2.25rem; }

/* ---------- 5. LINKS & BUTTONS ---------- */
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:not([class]) { text-decoration-color: var(--hinoki); transition: text-decoration-color .3s var(--ease); }
a:not([class]):hover { color: var(--beni-deep); text-decoration-color: var(--beni); }
.inv a:not([class]):hover { color: var(--beni-soft); }

:focus-visible {
  outline: 2px solid var(--beni);
  outline-offset: 3px;
  border-radius: 2px;
}
.inv :focus-visible { outline-color: var(--beni-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background .38s var(--ease), color .38s var(--ease), border-color .38s var(--ease), transform .38s var(--ease);
  white-space: nowrap;
}
.btn--solid  { background: var(--beni); color: #FDF9F1; }
.btn--solid:hover  { background: var(--beni-deep); transform: translateY(-1px); }
.btn--ghost  { background: transparent; color: var(--sumi); border-color: var(--hairline); }
.btn--ghost:hover  { border-color: var(--sumi); background: rgba(33,31,27,0.03); }
.btn--light  { background: var(--washi); color: var(--sumi); }
.btn--light:hover  { background: #FFFDF8; color: var(--beni-deep); transform: translateY(-1px); }
.btn--outline-light { background: transparent; color: var(--washi); border-color: var(--hairline-inv); }
.btn--outline-light:hover { border-color: var(--washi); background: rgba(248,244,237,0.07); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 480px) { .btn-row .btn { flex: 1 1 100%; justify-content: center; } }

/* Understated arrow link */
.alink {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--hairline);
  transition: border-color .35s var(--ease), gap .35s var(--ease);
}
.alink:hover { border-color: var(--beni); color: var(--beni-deep); gap: 0.95rem; }
.inv .alink:hover { color: var(--beni-soft); border-color: var(--beni-soft); }
.alink::after { content: "→"; font-size: 0.95em; }

/* ---------- 6. UTILITY BAR + HEADER ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ai); color: var(--washi); padding: 0.85rem 1.4rem;
  font-family: var(--sans); font-size: 0.85rem; text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.util {
  background: var(--sumi-deep);
  border-bottom: 2px solid var(--beni);
  color: rgba(248,244,237,0.82);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.util__in {
  width: var(--bay); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2.4rem; padding-block: 0.4rem;
}
.util a { text-decoration: none; color: inherit; transition: color .3s var(--ease); }
.util a:hover { color: var(--beni-soft); }
.util__group { display: flex; align-items: center; gap: 1.4rem; }
.util__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7FB77E; display: inline-block; margin-right: 0.5rem;
  box-shadow: 0 0 0 0 rgba(127,183,126,.7);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,183,126,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(127,183,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,183,126,0); }
}
@media (prefers-reduced-motion: reduce) { .util__dot { animation: none; } }
@media (max-width: 780px) { .util__group--sec { display: none; } .util__in { justify-content: center; } }

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248, 244, 237, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--hairline); }
.hdr__in {
  width: var(--bay); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.75rem;
}

.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand__koi {
  width: 3rem; height: auto; flex: none;
  transition: transform .5s var(--ease);
}
.brand:hover .brand__koi { transform: rotate(-6deg) scale(1.06); }
.brand__wordmark {
  height: 2.55rem; width: auto;
  transition: opacity .3s var(--ease);
}
.brand:hover .brand__wordmark { opacity: 0.85; }
@media (max-width: 380px) { .brand__wordmark { height: 2.1rem; } }
.brand__word { display: flex; flex-direction: column; gap: 0.14rem; }
.brand__name {
  font-size: 1.06rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1;
}
.brand__sub {
  font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sumi-mute); line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav a {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 450;
  letter-spacing: 0.055em; text-decoration: none; color: var(--sumi-soft);
  padding-block: 0.4rem; position: relative; transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.05rem;
  height: 1px; background: var(--beni); transition: right .4s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--sumi); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.hdr__cta { display: flex; align-items: center; gap: 0.75rem; }
.hdr .btn { padding: 0.78rem 1.35rem; font-size: 0.72rem; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.6rem; margin-right: -0.6rem;
}
.burger span { display: block; width: 22px; height: 1px; background: var(--sumi); transition: transform .35s var(--ease), opacity .3s var(--ease); }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: block; }
  .nav, .hdr__cta { display: none; }
  .mnav[data-open="true"] { display: block; }
}
.mnav { display: none; background: var(--washi); border-top: 1px solid var(--hairline); }
.mnav__in { width: var(--bay); margin-inline: auto; padding-block: 1.5rem 2.25rem; }
.mnav a {
  display: block; text-decoration: none; font-size: 1.35rem;
  padding-block: 0.72rem; border-bottom: 1px solid var(--hairline);
}
.mnav .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }

/* ---------- 7. HERO ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sumi-deep); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.11); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(15,13,10,0.62) 0%, rgba(15,13,10,0.30) 46%, rgba(15,13,10,0) 78%),
    linear-gradient(to top, rgba(15,13,10,0.88) 0%, rgba(15,13,10,0.42) 40%, rgba(15,13,10,0.22) 68%, rgba(15,13,10,0.48) 100%);
}
.hero__in {
  width: var(--bay); margin-inline: auto;
  min-height: clamp(31rem, 84svh, 50rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(4rem, 12vh, 8rem);
  color: var(--washi);
}
.hero h1 { max-width: 17ch; }
.hero .lede { color: rgba(248,244,237,0.8); max-width: 46ch; margin-top: 1.6rem; }
.hero .eyebrow { color: var(--beni-soft); }
.hero .btn-row { margin-top: 2.5rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0 2rem; margin-top: 3rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(248,244,237,0.18);
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(248,244,237,0.68);
}

/* Compact page header for interior pages */
.phead { position: relative; isolation: isolate; overflow: hidden; background: var(--sumi-deep); color: var(--washi); }
.phead__media { position: absolute; inset: 0; z-index: -2; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; }
.phead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(15,13,10,0.60) 0%, rgba(15,13,10,0.26) 50%, rgba(15,13,10,0) 82%),
    linear-gradient(to top, rgba(15,13,10,0.88), rgba(15,13,10,0.40));
}
.phead__in {
  width: var(--bay); margin-inline: auto;
  padding-block: clamp(4.5rem, 13vh, 8.5rem) clamp(3rem, 8vh, 5rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(18rem, 46svh, 30rem);
}
.phead .lede { color: rgba(248,244,237,0.78); max-width: 52ch; margin-top: 1.35rem; }
.phead .eyebrow { color: var(--beni-soft); }
.phead--flat { background: var(--washi-deep); color: var(--sumi); }
.phead--flat::after { display: none; }
.phead--flat .lede { color: var(--sumi-soft); }
.phead--flat .eyebrow { color: var(--sumi-mute); }
.phead--flat .phead__in { min-height: 0; padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem); }

.crumbs {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.09em;
  margin-bottom: 2rem; opacity: 0.78;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin-inline: 0.5rem; }

/* ---------- 8. FIGURES & GALLERY ---------- */
figure { margin: 0; }
.fig { position: relative; overflow: hidden; background: var(--kinu); }
.fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.fig--tall { aspect-ratio: 3 / 4; }
.fig--wide { aspect-ratio: 16 / 10; }
.fig--sq   { aspect-ratio: 1 / 1; }
.fig--pano { aspect-ratio: 21 / 9; }
a:hover > .fig img, .card:hover .fig img { transform: scale(1.045); }
figcaption {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--sumi-mute); margin-top: 0.85rem;
}

/* Placeholder styling — visible, intentional, easy to replace */
.ph {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.5rem;
  text-align: center; padding: 1.5rem;
  background:
    linear-gradient(135deg, var(--kinu) 0%, var(--hinoki-pale) 100%);
  color: rgba(33,31,27,0.42);
}
.ph__glyph { font-family: var(--glyph); font-size: 2rem; line-height: 1; }
.ph__txt { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Horizontal drag gallery */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(15rem, 34vw, 27rem);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: max(var(--gut), calc((100% - 1320px) / 2));
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hinoki) transparent;
  cursor: grab;
}
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-track { background: var(--hairline); }
.rail::-webkit-scrollbar-thumb { background: var(--hinoki); }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail > * { scroll-snap-align: start; }
.rail-wrap { width: 100%; }

/* ---------- 9. CARDS ---------- */
.card { display: block; text-decoration: none; color: inherit; }
.card__body { padding-top: 1.35rem; }
.card__title { margin-top: 0.5rem; }
.card__meta {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sumi-mute);
}
.card__note { color: var(--sumi-soft); margin-top: 0.7rem; font-size: 0.97rem; }

.panel {
  background: var(--washi);
  border: 1px solid var(--hairline);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.inv .panel { background: rgba(248,244,237,0.045); border-color: var(--hairline-inv); }
.panel--silk { background: var(--kinu); border-color: transparent; }
.panel--ai { background: var(--sumi-deep); color: var(--washi); border-color: transparent; border-top: 2px solid var(--beni); }
.panel--ai .muted, .panel--ai .lede { color: rgba(248,244,237,0.72); }
.panel--ai .eyebrow { color: var(--beni-soft); }
.panel--ai a { color: var(--washi); }
.panel--ai .btn--light { color: var(--sumi); }
.panel--ai .btn--light:hover { color: var(--beni-deep); }

/* Feature list with hairline separators */
.feat { border-top: 1px solid var(--hairline); }
.feat__row {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 560px) { .feat__row { grid-template-columns: 1fr; gap: 0.5rem; } }
.inv .feat, .inv .feat__row { border-color: var(--hairline-inv); }

/* Fact strip — the referral-partner data layer */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
.facts__cell {
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.facts__k {
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--sumi-mute); display: block; margin-bottom: 0.55rem;
}
.facts__v { font-size: 1.12rem; line-height: 1.3; }
.inv .facts, .inv .facts__cell { border-color: var(--hairline-inv); }

/* Data table for program facts */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.dtable th, .dtable td { text-align: left; padding: 1.05rem 1.1rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.dtable th {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sumi-mute);
  width: 34%; padding-left: 0;
}
.dtable td { padding-right: 0; }
.dtable tr:first-child th, .dtable tr:first-child td { border-top: 1px solid var(--hairline); }
@media (max-width: 620px) {
  .dtable th, .dtable td { display: block; width: 100%; padding-inline: 0; }
  .dtable th { border-bottom: 0; padding-bottom: 0.3rem; }
  .dtable tr:first-child td { border-top: 0; }
}

/* ---------- 10. 360 TOUR SLOT ---------- */
.tour {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--sumi-deep); display: grid; place-items: center; isolation: isolate;
}
.tour__poster { position: absolute; inset: 0; z-index: -1; }
.tour__poster { background: var(--sumi-deep); }
.tour__poster::after { content:''; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 46%, rgba(15,13,10,0.30) 0%, rgba(15,13,10,0.72) 100%); }
.tour__poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour__cta {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  background: none; border: 0; cursor: pointer; color: var(--washi); text-align: center; padding: 1rem;
}
.tour__ring {
  width: clamp(4.2rem, 8vw, 5.6rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(248,244,237,0.55);
  display: grid; place-items: center;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.tour__cta:hover .tour__ring { background: rgba(186,15,15,0.28); border-color: var(--beni-soft); transform: scale(1.06); }
.tour__label { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; }
.tour__sub { font-family: var(--sans); font-size: 0.72rem; color: rgba(248,244,237,0.78); letter-spacing: 0.04em; text-transform: none; max-width: 34ch; }

/* ---------- 11. FORMS ---------- */
.field { display: block; margin-bottom: 1.35rem; }
.field > span {
  display: block; font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sumi-mute);
  margin-bottom: 0.55rem;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--washi); border: 1px solid var(--hairline);
  border-radius: 1px; padding: 0.9rem 1rem; font-family: var(--sans); font-size: 0.95rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--beni); outline-offset: 1px; }
.field textarea { min-height: 8rem; resize: vertical; }
.panel--silk .field input, .panel--silk .field select, .panel--silk .field textarea { background: var(--washi); }
.form-note { font-family: var(--sans); font-size: 0.76rem; color: var(--sumi-mute); line-height: 1.6; }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 560px) { .f-2 { grid-template-columns: 1fr; } }

/* ---------- 12. BADGES, PILLS, MISC ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 0.42rem 0.85rem;
  border: 1px solid var(--hairline); border-radius: 100px; color: var(--sumi-soft);
}
.pill--open { border-color: #8FAE86; color: #4C6B48; background: rgba(143,174,134,0.09); }
.pill--wait { border-color: #B79A6B; color: #775D36; background: rgba(201,183,154,0.16); }
.pill--ai { border-color: var(--beni-line); color: var(--beni); }
.inv .pill { border-color: var(--hairline-inv); color: rgba(248,244,237,0.8); }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.note {
  border-left: 2px solid var(--beni); padding: 0.15rem 0 0.15rem 1.35rem;
  color: var(--sumi-soft);
}
.inv .note { border-color: var(--beni-soft); }

/* TODO flag for content Josh must supply */
.todo {
  display: inline-block; font-family: var(--sans); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: #F5E6C8; color: #7A5B1E; padding: 0.15rem 0.45rem;
  border-radius: 2px; border: 1px dashed #C9A961; white-space: nowrap;
}

/* Quote */
.quote { border: 0; padding: 0; }
.quote p { font-size: clamp(1.3rem, 2.3vw, 1.95rem); line-height: 1.34; letter-spacing: -0.008em; }
.quote cite {
  display: block; margin-top: 1.5rem; font-style: normal;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sumi-mute);
}
.inv .quote cite { color: var(--beni-soft); }
.inv .steps__i::before, .inv .acc summary::after { color: var(--beni-soft); }

/* Accordion */
.acc { border-top: 1px solid var(--hairline); }
.acc details { border-bottom: 1px solid var(--hairline); }
.acc summary {
  list-style: none; cursor: pointer; padding-block: 1.35rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-size: 1.1rem; transition: color .3s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--sans); font-size: 1.15rem; color: var(--beni); flex: none; transition: transform .35s var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc summary:hover { color: var(--beni-deep); }
.inv .acc summary:hover { color: var(--beni-soft); }
.acc__body { padding-bottom: 1.6rem; color: var(--sumi-soft); max-width: 62ch; }
.acc__body > * + * { margin-top: 0.9rem; }

/* Steps */
.steps { counter-reset: s; border-top: 1px solid var(--hairline); }
.steps__i {
  counter-increment: s; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--hairline);
}
.steps__i::before {
  content: "0" counter(s); font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--beni); padding-top: 0.4rem;
}
@media (max-width: 560px) { .steps__i { grid-template-columns: 1fr; gap: 0.4rem; } .steps__i::before { padding-top: 0; } }

/* ---------- 13. FOOTER ---------- */
.ftr { background: var(--sumi-deep); color: rgba(248,244,237,0.72); padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem; border-top: 2px solid var(--beni); }
.ftr a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
.ftr a:hover { color: var(--beni-soft); }
.ftr__top { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 900px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr h2 {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--beni-soft); margin-bottom: 1.2rem;
}
.ftr ul { list-style: none; padding: 0; }
.ftr li + li { margin-top: 0.72rem; }
.ftr .ui { font-size: 0.84rem; }

.ftr__bot {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--hairline-inv);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.03em;
  color: rgba(248,244,237,0.5);
}
.ftr__legal { max-width: 62ch; line-height: 1.7; }

/* ---------- 14. SCROLL REVEAL ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s; } .rv-d2 { transition-delay: .18s; } .rv-d3 { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

.glyph { font-family: var(--glyph); line-height: 1; color: var(--ai); display: block; }
.inv .glyph { color: var(--hinoki); }

/* Measure helpers that don't depend on body font-size */
.mw-sm { max-width: 30rem; } .mw-md { max-width: 40rem; } .mw-lg { max-width: 52rem; }

/* ---------- 15. HELPERS ---------- */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tc { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.maxw-60 { max-width: 60ch; } .maxw-52 { max-width: 52ch; } .maxw-44 { max-width: 44ch; }
.nowrap { white-space: nowrap; }

@media print {
  .util, .hdr, .mnav, .ftr, .btn, .tour { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
}