/* ==========================================================================
   MOUNT ZEN  —  Design System
   Brand:  TV installation as a contemplative practice.
   Voice:  Quiet, present, monastic. "Let the room exhale."
   Visual: Washi paper + sumi-e ink wash + single persimmon accent.
           Asymmetric grids, generous whitespace, brush-stroke dividers,
           enso (open circle) marks, no monospace, no second saturated hue.
   ========================================================================== */

/* -----  1. TOKENS  ------------------------------------------------------- */
:root {
    /* Palette — washi + ink-wash + a single persimmon accent */
    --paper:        #f0ebe1;       /* washi — cooler than HomeMount's cream */
    --paper-2:      #e6e0d2;       /* darker washi */
    --paper-3:      #ddd5c5;
    --mist:         #d8d4ca;       /* lighter wash */
    --rice:         #f7f3e9;       /* lightest highlight */

    --ink:          #1c1b17;       /* sumi ink black */
    --ink-2:        #2d2c27;
    --ink-3:        #4a4844;
    --stone:        #8a857a;       /* mid grey ink wash */
    --stone-2:      #aaa496;
    --stone-3:      #6b6760;

    /* Persimmon — the only saturated color on the entire site */
    --persimmon:        #d96f30;
    --persimmon-deep:   #b8541d;
    --persimmon-pale:   #f0d4b8;
    --persimmon-wash:   rgba(217,111,48,0.08);

    --line:         rgba(28,27,23,0.12);
    --line-dim:     rgba(28,27,23,0.06);
    --line-onink:   rgba(240,235,225,0.15);

    /* Type — Cormorant for breath, Inter for clarity, nothing else */
    --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Type scale — pushed toward the elegant/large for breath */
    --t-mega:    clamp(3.5rem, 8vw + 1rem, 8.5rem);
    --t-display: clamp(2.5rem, 5.5vw + 1rem, 5.75rem);
    --t-h1:      clamp(2.25rem, 4.5vw + 0.5rem, 4.25rem);
    --t-h2:      clamp(1.875rem, 2.8vw + 0.5rem, 2.875rem);
    --t-h3:      clamp(1.375rem, 1.6vw + 0.5rem, 1.875rem);
    --t-h4:      clamp(1.125rem, 0.6vw + 0.9rem, 1.3125rem);
    --t-body:    1rem;
    --t-small:   0.9375rem;
    --t-micro:   0.6875rem;

    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
    --s-11: 160px;

    --max-w: 1280px;
    --gutter: 28px;

    /* Zero radius — wabi-sabi prefers clean unfinished edges */
    --radius:    0px;
    --radius-sm: 0px;
    --radius-lg: 2px;
    --radius-pill: 999px;          /* used sparingly on small interior bits */

    --ease: cubic-bezier(0.32, 0, 0.18, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 360ms;
    --dur-slow: 680ms;
}

/* -----  2. RESET + BASE  ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--persimmon); color: var(--rice); }

/* -----  3. TYPOGRAPHY  --------------------------------------------------- */
.mega {
    font-family: var(--font-display);
    font-size: var(--t-mega);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.018em;
}
.display {
    font-family: var(--font-display);
    font-size: var(--t-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.012em;
}
h1, .h1 {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.008em;
}
h2, .h2 {
    font-family: var(--font-display);
    font-size: var(--t-h2);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.005em;
}
h3, .h3 {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    font-weight: 500;
    line-height: 1.2;
}
h4, .h4 {
    font-family: var(--font-body);
    font-size: var(--t-h4);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

em, i, .italic {
    font-style: italic;
    font-family: var(--font-display);
    font-weight: 400;
}

/* Inscription — small caps, replaces what other sites use mono for */
.inscription {
    font-family: var(--font-body);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.inscription--persimmon { color: var(--persimmon-deep); }
.inscription--stone { color: var(--stone); }

/* The label is just a small-caps inscription with no decorative line */
.label {
    font-family: var(--font-body);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--persimmon-deep);
    display: inline-block;
}

/* Haiku — italic display text used for the small inscriptions */
.haiku {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-2);
    line-height: 1.45;
    font-size: 1.25rem;
}
.haiku--lg { font-size: 1.625rem; line-height: 1.35; }
.haiku--persimmon { color: var(--persimmon-deep); }

.lede {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink-2);
    font-weight: 400;
}
.lede-lg { font-size: 1.25rem; line-height: 1.6; }
.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); letter-spacing: 0.06em; }
.muted { color: var(--stone); }
.accent { color: var(--persimmon-deep); }

/* -----  4. LAYOUT  ------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.container--narrow { max-width: 880px; }
.container--wide   { max-width: 1380px; }

.section {
    padding-top: var(--s-10);
    padding-bottom: var(--s-10);
    position: relative;
}
@media (max-width: 768px) {
    .section { padding-top: var(--s-9); padding-bottom: var(--s-9); }
}
.section--tight    { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.section--spacious { padding-top: var(--s-11); padding-bottom: var(--s-11); }
.section--paper-2  { background: var(--paper-2); }
.section--paper-3  { background: var(--paper-3); }
.section--ink      { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--rice); }
.section--ink .lede { color: rgba(247,243,233,0.78); }
.section--ink .label { color: var(--persimmon-pale); }
.section--ink .inscription { color: var(--persimmon-pale); }
.section--ink .muted { color: var(--stone-2); }

/* -----  5. ASYMMETRIC GRID  ------------------------------------------- */
/* Five-column grid — used to lay things off-centre on purpose */
.tatami {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-6);
}
.tatami--narrow { gap: var(--s-5); }
@media (max-width: 900px) {
    .tatami { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Span helpers — use grid-column-end so .offset-N can override start
   without collapsing the span back to 1 cell. */
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-12 { grid-column-end: span 12; }

.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }

/* When .offset-1 follows another column item, sit immediately
   beside it with a 1-column gap (not overlapping back into col 2).
   Desktop-only — the mobile breakpoint collapses everything to 1fr. */
@media (min-width: 901px) {
    .col-2 + .offset-1 { grid-column-start: 4; }
    .col-3 + .offset-1 { grid-column-start: 5; }
    .col-4 + .offset-1 { grid-column-start: 6; }
    .col-5 + .offset-1 { grid-column-start: 7; }
    .col-6 + .offset-1 { grid-column-start: 8; }
    .col-7 + .offset-1 { grid-column-start: 9; }
    .col-8 + .offset-1 { grid-column-start: 10; }
}

@media (max-width: 900px) {
    .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { grid-column: 1 / -1; }
    .offset-1, .offset-2, .offset-3 { grid-column-start: 1; grid-column-end: -1; }
}

/* -----  6. ENSO  ------------------------------------------------------- */
/* The brushstroke circle — a recurring accent element */
.enso {
    width: 64px;
    height: 64px;
    display: inline-block;
    color: var(--persimmon);
}
.enso--sm { width: 40px; height: 40px; }
.enso--lg { width: 120px; height: 120px; }
.enso--ink { color: var(--ink); }

/* -----  7. BRUSH DIVIDER  --------------------------------------------- */
.brush-divider {
    width: 100%;
    max-width: 320px;
    height: 18px;
    margin: var(--s-6) 0;
    color: var(--ink);
}
.brush-divider--center { margin-left: auto; margin-right: auto; }
.brush-divider--persimmon { color: var(--persimmon); }

/* -----  8. BUTTONS  --------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: var(--radius);            /* SQUARE — no rounding at all on main */
    border: 1px solid transparent;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
                color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    position: relative;
}
.btn:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 4px; }
.btn .arr { transition: transform var(--dur) var(--ease); font-family: var(--font-display); font-size: 1.125rem; }
.btn:hover .arr { transform: translateX(4px); }

.btn--primary {
    background: var(--ink);
    color: var(--rice);
    border-color: var(--ink);
}
.btn--primary:hover {
    background: var(--persimmon-deep);
    border-color: var(--persimmon-deep);
    color: var(--rice);
    transform: translateY(-1px);
}

.btn--persimmon {
    background: var(--persimmon);
    color: var(--ink);
    border-color: var(--persimmon);
}
.btn--persimmon:hover {
    background: var(--ink);
    color: var(--persimmon);
    border-color: var(--ink);
}

.btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--rice); }
.section--ink .btn--outline { color: var(--rice); border-color: var(--rice); }
.section--ink .btn--outline:hover { background: var(--rice); color: var(--ink); }

.btn--ghost {
    padding: 4px 0;
    background: none;
    border: none;
    border-bottom: 1px solid currentColor;
    color: var(--persimmon-deep);
    border-radius: 0;
    font-weight: 500;
}
.btn--ghost:hover { color: var(--ink); }

/* -----  9. CHIPS  ----------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}
.chip--ink { background: var(--ink); color: var(--rice); border-color: var(--ink); }
.chip--persimmon { background: var(--persimmon); color: var(--ink); border-color: var(--persimmon); }
.chip--dot::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--persimmon);
}

/* -----  10. STONE  — service card                                      */
/* Square, generous interior whitespace, no shadow.                        */
.stone {
    background: var(--rice);
    border: 1px solid var(--line);
    padding: var(--s-7);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
    position: relative;
}
.stone:hover {
    border-color: var(--persimmon);
    transform: translateY(-2px);
}
.stone::before {
    /* Thin persimmon vertical accent in top-left — the only chrome */
    content: "";
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    width: 1px;
    height: 32px;
    background: var(--persimmon);
}
.stone__mark {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
}
.stone__index {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--persimmon-deep);
}
.stone__no {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 0.9;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.015em;
}
.stone__title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: var(--s-4);
    color: var(--ink);
    letter-spacing: -0.008em;
}
.stone__body {
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--s-5);
}
.stone__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone);
}
.stone__foot .accent { color: var(--persimmon-deep); }

/* -----  11. PATH — process step                                         */
.path {
    border-top: 1px solid var(--persimmon);
    padding: var(--s-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    height: 100%;
    transition: border-color var(--dur) var(--ease);
}
.path:hover { border-color: var(--ink); }
.path__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}
.path__index {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--persimmon-deep);
}
.path__no {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 0.9;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.02em;
}
.path__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.path__body {
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* -----  12. PRICING — soft tier card                                    */
.tier {
    background: var(--rice);
    border: 1px solid var(--line);
    padding: var(--s-8) var(--s-7);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.tier:hover {
    border-color: var(--persimmon);
    transform: translateY(-3px);
}
.tier--feature {
    background: var(--ink);
    color: var(--rice);
    border-color: var(--ink);
}
.tier--feature .tier__name,
.tier--feature .tier__amount,
.tier--feature .tier__sub,
.tier--feature .tier__inc li { color: var(--rice); }
.tier--feature .tier__inc li { border-color: var(--line-onink); }
.tier--feature .tier__inc li::before { color: var(--persimmon); }
.tier--feature .tier__sub { border-color: var(--line-onink); color: rgba(247,243,233,0.7); }

.tier__inscription {
    font-family: var(--font-body);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--persimmon-deep);
    margin-bottom: var(--s-5);
}
.tier--feature .tier__inscription { color: var(--persimmon); }
.tier__name {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: var(--s-4);
    color: var(--ink);
    letter-spacing: -0.012em;
}
.tier__amount {
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: var(--s-3);
}
.tier__amount small {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--stone);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tier__sub {
    color: var(--ink-2);
    font-size: 0.9375rem;
    padding-bottom: var(--s-5);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
    line-height: 1.6;
    font-style: italic;
    font-family: var(--font-display);
    font-size: 1.0625rem;
}
.tier__inc { flex: 1; margin-bottom: var(--s-6); }
.tier__inc li {
    padding: var(--s-3) 0 var(--s-3) 26px;
    position: relative;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-dim);
}
.tier__inc li:last-child { border-bottom: none; }
.tier__inc li::before {
    /* Open enso-style bullet */
    content: "○";
    position: absolute;
    left: 0;
    top: 11px;
    color: var(--persimmon-deep);
    font-size: 0.875rem;
}

/* -----  13. KOAN — testimonial                                          */
/* Treated like a small story: italic body, asymmetric attribution.        */
.koan {
    padding: var(--s-6) 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.koan__quote-mark {
    position: absolute;
    top: -16px;
    left: 0;
    background: var(--paper);
    padding-right: 8px;
    color: var(--persimmon);
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
}
.section--paper-2 .koan__quote-mark { background: var(--paper-2); }
.section--paper-3 .koan__quote-mark { background: var(--paper-3); }
.koan__body {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.45;
    color: var(--ink);
    flex: 1;
    margin-bottom: var(--s-5);
    font-weight: 400;
}
.koan__sign {
    padding-top: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.koan__name {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.koan__where {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--stone);
}

/* -----  14. STAT (exposure-like, but quieter)  ------------------------ */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6) 0;
    border-top: 1px solid var(--persimmon);
}
.stat__label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--persimmon-deep);
}
.stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.022em;
}
.stat__note {
    color: var(--ink-3);
    font-size: 0.9375rem;
    line-height: 1.6;
    font-style: italic;
    font-family: var(--font-display);
}
.section--ink .stat__label { color: var(--persimmon-pale); }
.section--ink .stat__value { color: var(--rice); }
.section--ink .stat__note  { color: rgba(247,243,233,0.7); }
.section--ink .stat { border-top-color: var(--persimmon); }

/* -----  15. BELL (CTA)  ----------------------------------------------- */
.bell {
    background: var(--ink);
    color: var(--rice);
    padding: var(--s-10) var(--s-8);
    position: relative;
    overflow: hidden;
}
.bell::before {
    content: "";
    position: absolute;
    top: 40px;
    right: 40px;
    width: 140px;
    height: 140px;
    border: 2px solid var(--persimmon);
    border-radius: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(-30deg);
    opacity: 0.55;
}
.bell > * { position: relative; z-index: 1; }
@media (max-width: 700px) { .bell { padding: var(--s-8) var(--s-5); } .bell::before { display: none; } }

/* -----  16. FORMS  ---------------------------------------------------- */
.form { display: grid; gap: var(--s-6); }
.form__row { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--persimmon-deep);
    font-weight: 500;
}
.field label .opt { color: var(--stone); margin-left: 6px; }
.field input,
.field textarea,
.field select {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: 12px 0;
    font-size: 1.0625rem;
    color: var(--ink);
    width: 100%;
    font-family: var(--font-body);
    transition: border-color var(--dur) var(--ease);
    border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: var(--stone-2); }
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-bottom-color: var(--persimmon);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

/* -----  17. HEADER + NAV  --------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled {
    border-bottom-color: var(--line);
    background: rgba(240,235,225,0.96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    gap: var(--s-5);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
}
.brand__mark { width: 42px; height: 42px; flex-shrink: 0; color: var(--persimmon); }
.brand__txt {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.brand__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.012em;
}
.brand__sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--persimmon-deep);
    margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--ink-2);
    padding: 8px 0;
    position: relative;
    transition: color var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
    content: "○";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    font-size: 0.625rem;
    color: var(--persimmon);
    line-height: 1;
}

.header-cta { display: flex; align-items: center; gap: var(--s-3); }
.menu-btn {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--ink);
    border-radius: 0;
    align-items: center;
    justify-content: center;
}
.menu-btn span {
    display: block;
    width: 18px; height: 1px;
    background: var(--ink);
    position: relative;
}
.menu-btn span::before, .menu-btn span::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after  { top: 6px; }

@media (max-width: 980px) {
    .nav, .header-cta .btn:not(.menu-btn) { display: none; }
    .header-cta .menu-btn { display: flex; }
    .header-cta .chip { display: none; }
}

.mobile-menu {
    position: fixed; inset: 0;
    background: var(--paper);
    z-index: 100;
    padding: var(--s-7) var(--gutter);
    display: none;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-8);
}
.mobile-menu__close {
    width: 44px; height: 44px;
    border: 1px solid var(--ink);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--s-3); }
.mobile-menu nav a {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--ink);
    line-height: 1;
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) 0;
    letter-spacing: -0.015em;
    font-weight: 400;
}
.mobile-menu nav a.is-active { color: var(--persimmon-deep); font-style: italic; }
.mobile-menu__foot { margin-top: auto; padding-top: var(--s-7); }

/* -----  18. HERO  ----------------------------------------------------- */
.hero {
    padding: var(--s-11) 0 var(--s-10);
    position: relative;
}
@media (max-width: 768px) {
    .hero { padding: var(--s-9) 0 var(--s-9); }
}
.hero__lockup .label { margin-bottom: var(--s-6); }
.hero__lockup h1 {
    font-family: var(--font-display);
    font-size: var(--t-mega);
    line-height: 0.92;
    font-weight: 400;
    letter-spacing: -0.022em;
    margin-bottom: var(--s-6);
    color: var(--ink);
}
.hero__lockup h1 em {
    font-style: italic;
    color: var(--persimmon-deep);
}
.hero__lede {
    color: var(--ink-2);
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 48ch;
    margin-bottom: var(--s-7);
}
.hero__ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-8); }
.hero__notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    padding-top: var(--s-6);
    border-top: 1px solid var(--persimmon);
}
@media (max-width: 640px) { .hero__notes { grid-template-columns: 1fr; gap: var(--s-4); padding-top: var(--s-4); } }
.hero__note dt {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--persimmon-deep);
    margin-bottom: 8px;
}
.hero__note dd {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.35;
    font-style: italic;
}

/* The aside Polaroid is gone — here it's an open composition with an enso and a single haiku */
.hero__aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: var(--s-5) 0;
    border-left: 1px solid var(--line);
    padding-left: var(--s-7);
    height: 100%;
}
@media (max-width: 900px) {
    .hero__aside { border-left: none; padding-left: 0; padding-top: var(--s-7); border-top: 1px solid var(--line); }
}

/* -----  19. PAGE HEAD  ------------------------------------------------ */
.page-head {
    padding: var(--s-9) 0 var(--s-8);
    border-bottom: 1px solid var(--line);
}
.page-head__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-7);
    flex-wrap: wrap;
    gap: var(--s-3);
}
.page-head__crumb {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
}
.page-head__crumb a { color: var(--ink-2); }
.page-head__crumb a:hover { color: var(--persimmon-deep); }
.page-head h1 {
    font-size: clamp(2.75rem, 5.5vw + 0.5rem, 5rem);
    line-height: 0.98;
    margin-bottom: var(--s-5);
    max-width: 18ch;
    letter-spacing: -0.022em;
}
.page-head h1 em { color: var(--persimmon-deep); font-style: italic; }
.page-head__lede {
    max-width: 56ch;
    color: var(--ink-2);
    font-size: 1.1875rem;
    line-height: 1.6;
}

/* -----  20. SECTION HEAD  --------------------------------------------- */
.sec-head { margin-bottom: var(--s-9); }
.sec-head__title { max-width: 18ch; }
.sec-head__lede { color: var(--ink-2); line-height: 1.65; }

/* -----  21. FAQ  ------------------------------------------------------ */
.q {
    border-top: 1px solid var(--line);
    padding: var(--s-6) 0;
}
.q:last-of-type { border-bottom: 1px solid var(--line); }
.q summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-4);
    transition: color var(--dur) var(--ease);
}
.q summary::-webkit-details-marker { display: none; }
.q summary:hover .q__title { color: var(--persimmon-deep); }
.q__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -0.005em;
    flex: 1;
}
.q__title em { color: var(--persimmon-deep); font-style: italic; }
.q__toggle {
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1;
    color: var(--persimmon-deep);
    transition: transform var(--dur) var(--ease);
    padding-left: var(--s-4);
}
.q[open] .q__toggle { transform: rotate(45deg); }
.q__body {
    padding-top: var(--s-4);
    color: var(--ink-2);
    line-height: 1.75;
    max-width: 70ch;
    font-size: 1.0625rem;
}
.q__body p + p { margin-top: var(--s-3); }

/* -----  22. FOOTER  --------------------------------------------------- */
.site-footer {
    background: var(--ink);
    color: var(--rice);
    padding-top: var(--s-10);
    padding-bottom: var(--s-5);
}
.footer-call {
    padding-bottom: var(--s-9);
    border-bottom: 1px solid var(--line-onink);
    margin-bottom: var(--s-9);
}
.footer-call .label { color: var(--persimmon); }
.footer-call h2 { color: var(--rice); max-width: 14ch; margin-top: var(--s-5); }
.footer-call h2 em { color: var(--persimmon); }
.footer-call p { color: rgba(247,243,233,0.78); max-width: 50ch; margin-top: var(--s-5); line-height: 1.65; font-size: 1.0625rem; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--s-7);
    margin-bottom: var(--s-7);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--persimmon);
    margin-bottom: var(--s-5);
    font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
    color: rgba(247,243,233,0.78);
    font-size: 0.9375rem;
    transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--persimmon); }
.footer-col p { color: rgba(247,243,233,0.7); line-height: 1.65; font-size: 0.9375rem; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-onink);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247,243,233,0.55);
    flex-wrap: wrap;
}
.footer-bottom__legal { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* -----  23. PROSE (legal)  -------------------------------------------- */
.prose {
    max-width: 70ch;
    color: var(--ink-2);
    line-height: 1.8;
    font-size: 1.0625rem;
}
.prose h2 {
    font-size: 1.875rem;
    margin-top: var(--s-8);
    margin-bottom: var(--s-5);
    color: var(--ink);
    letter-spacing: -0.015em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-size: 1.25rem;
    font-family: var(--font-body);
    font-weight: 600;
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
    color: var(--ink);
}
.prose p { margin-bottom: var(--s-4); }
.prose ul { margin: 0 0 var(--s-4) 0; padding-left: 0; }
.prose ul li {
    padding: 8px 0 8px 30px;
    position: relative;
    list-style: none;
}
.prose ul li::before {
    content: "○";
    position: absolute;
    left: 0;
    top: 10px;
    color: var(--persimmon-deep);
    font-size: 0.875rem;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
    color: var(--persimmon-deep);
    border-bottom: 1px solid rgba(184,84,29,0.35);
    transition: border-color var(--dur) var(--ease);
}
.prose a:hover { border-color: var(--persimmon-deep); }

.legal-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--s-9);
}
@media (max-width: 900px) {
    .legal-grid { grid-template-columns: 1fr; gap: var(--s-7); }
    .prose-toc { position: static; }
}
.prose-toc {
    border-top: 1px solid var(--persimmon);
    padding-top: var(--s-5);
    position: sticky;
    top: 104px;
    height: max-content;
}
.prose-toc h4 {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--persimmon-deep);
    margin-bottom: var(--s-5);
    font-weight: 500;
}
.prose-toc ol { display: flex; flex-direction: column; gap: 12px; counter-reset: toc; }
.prose-toc ol li {
    font-size: 0.9375rem;
    padding-left: 28px;
    position: relative;
    counter-increment: toc;
    line-height: 1.4;
}
.prose-toc ol li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--persimmon-deep);
    font-size: 0.875rem;
}
.prose-toc a { color: var(--ink-2); transition: color var(--dur) var(--ease); }
.prose-toc a:hover { color: var(--ink); }

/* -----  24. UTILITY  -------------------------------------------------- */
.rule { height: 1px; background: var(--line); width: 100%; border: 0; margin: var(--s-6) 0; }
.text-center { text-align: center; }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .mt-9 { margin-top: var(--s-9); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.hidden-md { display: initial; }
@media (max-width: 768px) { .hidden-md { display: none; } }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .stone:hover, .tier:hover, .path:hover { transform: none; }
    html { scroll-behavior: auto; }
}