/* Generated by scripts/direction-styles.mjs from components/marketplace/demo/quiet-room.css — do not edit. */
/* ── product faces (product-faces.json; SIL OFL 1.1, public/directions/fonts/OFL.txt) ── */
@font-face { font-family: "ashdub Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/directions/fonts/instrument-serif-400-italic-latin-ext.a04fc7ed18a8.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "ashdub Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/directions/fonts/instrument-serif-400-italic-latin.6ee678c33f38.woff2") format("woff2"); 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: "ashdub Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/directions/fonts/instrument-serif-400-normal-latin-ext.a8c4bd7cd707.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "ashdub Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/directions/fonts/instrument-serif-400-normal-latin.60c06664b5a9.woff2") format("woff2"); 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: "ashdub Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/directions/fonts/figtree-300-900-normal-latin-ext.f153aa07c1b1.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "ashdub Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/directions/fonts/figtree-300-900-normal-latin.8330490a01c6.woff2") format("woff2"); 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; }
.mk-demo-site.mk-demo-site[data-direction="quiet-room"] { --font-instrument-serif: "ashdub Instrument Serif"; --font-figtree: "ashdub Figtree"; }
/* ── quiet-room.css ── */
/* ── Quiet Room — ashdub. Private Practice (clean-room resale family, October 2026) ─────────────────────────────────────
   A private practice's site set for calm and clear limits: cool stone paper, slate ink and one heather accent (the
   owner's --brand). A quiet transitional serif (Instrument Serif) over a plain humanist sans (Figtree), a pairing no
   other direction uses. Signatures: every photograph sits in a double-hairline MOUNT on a pale card; section labels hang
   from a short heather THRESHOLD rule; steps follow a slow numbered PATH in lower-case roman numerals; principles are
   divided by fine vertical rules; and the BOUNDARY band (what the practice cannot do, and where urgent help is) is a
   slate panel with a heather edge. Mostly light pages with one dark band, for an even, unhurried pace. Sizes follow the
   demo frame (cqi, @container, --mk-vh). Motion is a single slow fade of the opening words, stopped for reduced motion. */

.mk-demo-site[data-direction="quiet-room"] {
  --lx-head: var(--font-instrument-serif), "Instrument Serif", Georgia, serif; --lx-body: var(--font-figtree), "Figtree", system-ui, sans-serif;
  --lx-head-w: 400; --lx-head-track: -0.012em; --lx-head-lh: 1.04; --lx-head-case: none;
  --lx-paper: #eef1f4; --lx-ink: #1d2230; --lx-muted: #4b5365; --lx-line: rgba(29,34,48,0.14);
  --lx-dark: #1f2433; --lx-dark-ink: #eef0f5; --lx-dark-muted: #bcc2cf; --lx-dark-line: rgba(238,240,245,0.16);
  --lx-btn-r: 6px; --lx-btn-case: none; --lx-btn-track: 0.005em; --lx-btn-size: 0.98rem; --lx-media-r: 2px;
  --lx-eyebrow-case: none; --lx-eyebrow-track: 0.01em; --lx-sec: clamp(5rem, 11cqi, 9.5rem);
  --qr-card: #f8f9fb; --qr-soft: #e3e7ed; --qr-mount: 0 0 0 1px var(--lx-line), 0 0 0 7px var(--qr-card), 0 0 0 8px var(--lx-line);
}
/* Evening: the same direction after dark (owner's choice of mode). */
.mk-demo-site[data-direction="quiet-room"][data-theme="dark"] {
  --lx-paper: #151925; --lx-ink: #e9ecf3; --lx-muted: #b2b9c8; --lx-line: rgba(233,236,243,0.14);
  --lx-dark: #0d1018; --qr-card: #1c2130; --qr-soft: #1a1f2c;
}

/* ── type: a light serif for headings, plain sans for reading ── */
.mk-demo-site[data-direction="quiet-room"] .lx-display { font-size: calc(clamp(2.6rem, 7cqi, 5.8rem) * var(--lx-title-scale, 1)); line-height: 1.02; max-width: 15ch; }
.mk-demo-site[data-direction="quiet-room"] .lx-h2 { font-size: calc(clamp(2.1rem, 4.6cqi, 3.8rem) * var(--lx-title-scale, 1)); line-height: 1.06; max-width: 20ch; }
.mk-demo-site[data-direction="quiet-room"] .lx-h3 { font-family: var(--lx-body); font-weight: 600; letter-spacing: 0; }
.mk-demo-site[data-direction="quiet-room"] .lx-eyebrow { display: flex; align-items: center; gap: .75rem; font: 600 .86rem/1.2 var(--lx-body); color: var(--lx-accent); }
.mk-demo-site[data-direction="quiet-room"] .lx-eyebrow::before { content: ""; flex: none; width: 2.25rem; height: 1px; background: currentColor; }
.mk-demo-site[data-direction="quiet-room"] .lx-tone-dark .lx-eyebrow, .mk-demo-site[data-direction="quiet-room"][data-theme="dark"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 30%, #ffffff); }
.mk-demo-site[data-direction="quiet-room"] .lx-lede { color: var(--lx-muted); font-size: clamp(1.06rem, 2cqi, 1.22rem); line-height: 1.65; max-width: 38rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-tone-dark .lx-lede { color: var(--lx-dark-muted); }
.mk-demo-site[data-direction="quiet-room"] .lx-body { line-height: 1.7; }

/* ── buttons: soft rectangles, sentence case; secondary is a hairline ── */
.mk-demo-site[data-direction="quiet-room"] .lx-btn { font-weight: 600; }
.mk-demo-site[data-direction="quiet-room"] .lx-btn--primary { background: var(--lx-accent); color: var(--lx-accent-ink); box-shadow: none; transition: background-color .25s ease; }
.mk-demo-site[data-direction="quiet-room"] .lx-btn--primary:hover { background: color-mix(in srgb, var(--lx-accent) 85%, #000); }
.mk-demo-site[data-direction="quiet-room"] .lx-btn--secondary { box-shadow: inset 0 0 0 1px currentColor; }
.mk-demo-site[data-direction="quiet-room"] .lx-btn--link { font-weight: 600; text-decoration-color: color-mix(in srgb, var(--lx-accent) 60%, transparent); text-underline-offset: .3em; }
.mk-demo-site[data-direction="quiet-room"] .lx-tone-dark .lx-btn--primary { background: var(--lx-dark-ink); color: var(--lx-dark); }
.mk-demo-site[data-direction="quiet-room"] .lx-btn:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 3px; }
.mk-demo-site[data-direction="quiet-room"] .lx-tone-dark .lx-btn:focus-visible { outline-color: #ffffff; }

/* ── header: the name in the serif, a plain nav with a thin underline for the current page ── */
.mk-demo-site[data-direction="quiet-room"] .mk-dh { background: color-mix(in srgb, var(--lx-paper) 95%, transparent); border-bottom: 1px solid var(--lx-line); box-shadow: none; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-bar { min-height: 4.8rem; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-brand { font-family: var(--lx-head); font-size: clamp(1.3rem, 3.2cqi, 1.6rem); font-weight: 400; letter-spacing: -.01em; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-brand > span { white-space: nowrap; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links { gap: 0; padding: 0; border: 0; background: none; font-weight: 500; font-size: .95rem; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links a, .mk-demo-site[data-direction="quiet-room"] .mk-dh-links .mk-inert { position: relative; min-height: 2.75rem; padding: 0 .75rem; border-radius: 0; white-space: nowrap; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .55rem; height: 1px; background: var(--lx-accent); opacity: 0; transition: opacity .3s ease; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links a:hover { background: none; transform: none; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links a:hover::after, .mk-demo-site[data-direction="quiet-room"] .mk-dh-links li[data-current] a::after { opacity: 1; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links li[data-current] a { background: none; color: var(--lx-ink); box-shadow: none; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-links .mk-dh-index, .mk-demo-site[data-direction="quiet-room"] .mk-dh-links .mk-dh-dot { display: none; }
@container demo (max-width: 1199px) {
  .mk-demo-site[data-direction="quiet-room"] .mk-dh-nav, .mk-demo-site[data-direction="quiet-room"] .mk-dh-cta { display: none; }
  .mk-demo-site[data-direction="quiet-room"] .mk-dh-menu { display: block; }
}
.mk-demo-site[data-direction="quiet-room"] .mk-dh-menu > summary { border-radius: 6px; background: transparent; color: var(--lx-ink); box-shadow: inset 0 0 0 1px var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-panel { border-radius: 8px; background: var(--qr-card); border-color: var(--lx-line); box-shadow: 0 30px 70px -40px rgb(20 24 36 / .45); }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-panel-links > li > * { border-radius: 4px; font-weight: 500; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-panel-links .mk-dh-index { color: var(--lx-accent); opacity: 1; }
.mk-demo-site[data-direction="quiet-room"] .mk-dh-panel-links > li[data-current] > * { background: var(--qr-soft); color: var(--lx-ink); box-shadow: inset 2px 0 0 var(--lx-accent); }

/* ── hero: words on stone, the photograph in its mount; the words arrive slowly ── */
.mk-demo-site[data-direction="quiet-room"] .lx-hero-orbit, .mk-demo-site[data-direction="quiet-room"] .lx-hero-sweep, .mk-demo-site[data-direction="quiet-room"] .lx-hero-scroll { display: none !important; }
.mk-demo-site[data-direction="quiet-room"] .lx-tone-soft { background-color: var(--qr-soft); color: var(--lx-ink); }
.mk-demo-site[data-direction="quiet-room"] :is(.lx-hero-media, .lx-split-media, .lx-media-frame) { border-radius: var(--lx-media-r); box-shadow: var(--qr-mount); background: var(--qr-card); }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--split .lx-hero-media { margin: .5rem calc(var(--lx-gutter) + 8px) clamp(2rem, 5cqi, 3rem); aspect-ratio: 4 / 5; }
.mk-demo-site[data-direction="quiet-room"] :is(.lx-hero-media, .lx-split-media) .lx-img { height: 100%; }
.mk-demo-site[data-direction="quiet-room"] .lx-hero[data-lx-motion] .lx-hero-words { animation: qr-arrive 1.1s ease-out both; }
@keyframes qr-arrive { from { opacity: 0; } to { opacity: 1; } }
@container (min-width: 900px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; min-height: min(calc(var(--mk-vh, 1svh) * 78), 48rem); }
  .mk-demo-site[data-direction="quiet-room"] .lx-hero--split .lx-hero-media { margin: clamp(2.5rem, 5cqi, 3.5rem) calc(var(--lx-gutter) + 8px) clamp(2.5rem, 5cqi, 3.5rem) 0; aspect-ratio: 5 / 6; }
}
.mk-demo-site[data-direction="quiet-room"] .lx-note { color: var(--lx-muted); font-size: .92rem; border-top: 0; padding-top: 0; }

/* ── principles: four quiet columns divided by hairlines ── */
.mk-demo-site[data-direction="quiet-room"] .lx-proof { background: var(--lx-paper); border-block: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-proof-list li { border-color: var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-proof-title { font-family: var(--lx-head); font-weight: 400; font-style: italic; font-size: clamp(1.3rem, 2.4cqi, 1.55rem); }
.mk-demo-site[data-direction="quiet-room"] .lx-proof-detail { color: var(--lx-muted); }

/* ── scope, fit and credentials: rows hanging from the threshold rule ── */
.mk-demo-site[data-direction="quiet-room"] .lx-svc-list { border-top: 1px solid var(--lx-ink); }
.mk-demo-site[data-direction="quiet-room"] .lx-svc { padding-block: 1.35rem; border-bottom-color: var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-svc .lx-h3 { font-size: clamp(1.05rem, 2.2cqi, 1.2rem); }
.mk-demo-site[data-direction="quiet-room"] .lx-svc-index-name { font-family: var(--lx-head); font-weight: 400; }
/* the fact slot: a quiet bordered note the practice fills in, never a claim or a fee */
.mk-demo-site[data-direction="quiet-room"] :is(.lx-svc-price, .lx-price-amount) { display: inline-flex; align-items: center; min-height: 1.9rem; padding: .2rem .8rem; border: 1px dashed color-mix(in srgb, var(--lx-accent) 65%, transparent); border-radius: 4px; color: var(--lx-accent); background: var(--qr-card); font: 600 .78rem/1.25 var(--lx-body); letter-spacing: .01em; }
.mk-demo-site[data-direction="quiet-room"][data-theme="dark"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 30%, #ffffff); }
.mk-demo-site[data-direction="quiet-room"] .lx-tone-dark :is(.lx-svc-price, .lx-price-amount) { color: #ffffff; border-color: rgb(255 255 255 / .45); background: transparent; }

/* ── steps: a slow numbered path in lower-case roman numerals ── */
.mk-demo-site[data-direction="quiet-room"] .lx-steps-list { counter-reset: qr-step; }
.mk-demo-site[data-direction="quiet-room"] .lx-step { counter-increment: qr-step; }
.mk-demo-site[data-direction="quiet-room"] .lx-step-n { font-size: 0 !important; }
.mk-demo-site[data-direction="quiet-room"] .lx-step-n::before { content: counter(qr-step, lower-roman) "."; font: italic 400 clamp(1.6rem, 3cqi, 2.1rem)/1 var(--lx-head); color: var(--lx-accent); }
.mk-demo-site[data-direction="quiet-room"] .lx-steps--row .lx-step { border-top: 1px solid var(--lx-ink); }
.mk-demo-site[data-direction="quiet-room"] .lx-steps--timeline .lx-step:not(:last-child)::after { width: 1px; background: color-mix(in srgb, var(--lx-accent) 50%, transparent); }

/* ── split: points ruled with small open circles ── */
.mk-demo-site[data-direction="quiet-room"] .lx-points { gap: 0; border-top: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-points li { padding: .75rem 0 .75rem 1.75rem; border-bottom: 1px solid var(--lx-line); overflow-wrap: anywhere; }
.mk-demo-site[data-direction="quiet-room"] .lx-points li::before { top: 1.12rem; width: .55rem; height: .55rem; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--lx-accent); }

/* ── fees and questions ── */
.mk-demo-site[data-direction="quiet-room"] .lx-price-group { border-top: 1px solid var(--lx-ink); }
.mk-demo-site[data-direction="quiet-room"] .lx-price-group-title { font-family: var(--lx-head); font-weight: 400; font-style: italic; font-size: 1.45rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-price-leader { border-bottom-style: dotted; opacity: .5; }
.mk-demo-site[data-direction="quiet-room"] .lx-faq-list { border-top: 1px solid var(--lx-ink); }
.mk-demo-site[data-direction="quiet-room"] .lx-faq-item summary { font-family: var(--lx-head); font-size: clamp(1.25rem, 2.4cqi, 1.5rem); font-weight: 400; }
.mk-demo-site[data-direction="quiet-room"] .lx-faq-mark::before, .mk-demo-site[data-direction="quiet-room"] .lx-faq-mark::after { height: 1px; background: var(--lx-accent); }

/* ── the boundary band, contact and footer ── */
.mk-demo-site[data-direction="quiet-room"] .lx-tone-dark { background-color: var(--lx-dark); }
.mk-demo-site[data-direction="quiet-room"] .lx-cta.lx-tone-dark { box-shadow: inset 4px 0 0 var(--lx-accent); }
.mk-demo-site[data-direction="quiet-room"] .lx-cta .lx-h2 { max-width: 22ch; }
.mk-demo-site[data-direction="quiet-room"] .lx-cta .lx-lede { max-width: 44rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-facts { border-top: 1px solid var(--lx-ink); gap: 0; }
.mk-demo-site[data-direction="quiet-room"] .lx-facts > div { padding: .9rem 0; border-bottom: 1px solid var(--lx-line); grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
.mk-demo-site[data-direction="quiet-room"] .lx-facts > div:has(.lx-hours) { grid-template-columns: minmax(0, 1fr); }
.mk-demo-site[data-direction="quiet-room"] .lx-facts dd { min-width: 0; overflow-wrap: anywhere; }
.mk-demo-site[data-direction="quiet-room"] .lx-facts .lx-hours li > span { min-width: 0; white-space: normal; }
.mk-demo-site[data-direction="quiet-room"] .lx-facts .lx-hours li > span:first-child { flex: none; overflow-wrap: normal; }
.mk-demo-site[data-direction="quiet-room"] .lx-footer-name { font-family: var(--lx-head); font-weight: 400; font-size: 1.6rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-footer-legal { max-width: 60rem; }

/* ── the enquiry on a mounted card ── */
.mk-demo-site[data-direction="quiet-room"] .mk-enq-card { border-radius: 4px; background: var(--qr-card); border: 0; box-shadow: var(--qr-mount); }
.mk-demo-site[data-direction="quiet-room"] .mk-enq-chip { border-radius: 6px; font-weight: 600; letter-spacing: 0; }
.mk-demo-site[data-direction="quiet-room"] .mk-enq :is(input, textarea) { border-radius: 6px; }
.mk-demo-site[data-direction="quiet-room"] .mk-enq-steps li { letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .mk-demo-site[data-direction="quiet-room"] .lx-hero[data-lx-motion] .lx-hero-words { animation: none; }
  .mk-demo-site[data-direction="quiet-room"] .mk-dh-links a::after, .mk-demo-site[data-direction="quiet-room"] .lx-btn--primary { transition: none; }
}

/* Narrow phones (280): slots and fee rows wrap within their row; the split hero keeps one track. */
.mk-demo-site[data-direction="quiet-room"] :is(.lx-svc-head, .lx-price-head) { flex-wrap: wrap; row-gap: .45rem; min-width: 0; }
.mk-demo-site[data-direction="quiet-room"] :is(.lx-svc-price, .lx-price-amount) { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
@container (max-width: 340px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-hero--split .lx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-demo-site[data-direction="quiet-room"] .lx-hero-text :is(h1, h2) { font-size: min(11cqi, 2.4rem); overflow-wrap: break-word; }
  .mk-demo-site[data-direction="quiet-room"] .mk-dh-brand { font-size: 1.1rem; }
  .mk-demo-site[data-direction="quiet-room"] .mk-dh-brand > span { white-space: normal; }
}

/* Fee ledger: the slot keeps its note size against the kit's large ledger figure; one hairline per group. */
.mk-demo-site[data-direction="quiet-room"] .lx-prices--ledger .lx-price-amount { font: 600 .78rem/1.25 var(--lx-body); letter-spacing: .01em; }
.mk-demo-site[data-direction="quiet-room"] .lx-prices--ledger .lx-price-name { font-size: clamp(1.3rem, 2.6cqi, 1.7rem); }
.mk-demo-site[data-direction="quiet-room"] .lx-price-group-title { border-bottom: 0; padding-top: .9rem; padding-bottom: 0; }
.mk-demo-site[data-direction="quiet-room"] .lx-prices--ledger .lx-price-list { border-top: 0; }

/* ── signature (correction 10): a letter, and margin notes ───────────────────────────────────────────────────────────
   The practice speaks first in type: no banner and no illustration box — a measured column set in the serif like the
   first page of a letter, the drawing reduced to a small mounted vignette in the margin. Steps read as MARGIN NOTES:
   roman numerals outside the column, hairline rules, nothing boxed. Dark is the same room at evening, not a black
   letterbox. */
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter { padding-block: clamp(4rem, 11cqi, 9rem) clamp(3rem, 8cqi, 6rem); }
.mk-demo-site[data-direction="quiet-room"] .lx-letter { display: grid; gap: 2rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-letter .lx-hero-words { max-width: 40rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter .lx-display { font-size: calc(clamp(2.5rem, 6cqi, 5rem) * var(--lx-title-scale, 1)); line-height: 1.04; max-width: 15ch; }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter .lx-lede { font-size: clamp(1.1rem, 1.8cqi, 1.3rem); line-height: 1.7; max-width: 34em; }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter .lx-note { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--lx-line); font: italic 400 1.15rem/1.5 var(--lx-head); color: var(--lx-muted); }
.mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { width: 7.5rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: var(--qr-mount); background: var(--qr-card); }
.mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media .lx-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-letter { grid-template-columns: 11rem minmax(0, 40rem); column-gap: clamp(3rem, 7cqi, 6rem); justify-content: center; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin { padding-top: .6rem; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { width: 10rem; }
}

/* margin notes */
.mk-demo-site[data-direction="quiet-room"] .lx-margin { max-width: 52rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-list { list-style: none; margin: clamp(2rem, 5cqi, 3rem) 0 0; padding: 0; }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-list > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-list > li:last-child { border-bottom: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-n { font: italic 400 1.5rem/1 var(--lx-head); color: var(--lx-muted); text-align: right; }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-list .lx-h3 { font: 400 clamp(1.35rem, 2.4cqi, 1.75rem)/1.2 var(--lx-head); }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-list .lx-body { color: var(--lx-muted); max-width: 36em; line-height: 1.7; }
@container demo (min-width: 900px) { .mk-demo-site[data-direction="quiet-room"] .lx-margin-list > li { grid-template-columns: 6rem minmax(0, 1fr); gap: 2.5rem; } }

/* ── gate10 correction: the room is shown whole, the reader sets the size ────────────────────────────────────────────
   Drawings are never cropped: the room drawing sits WHOLE (object-fit: contain) on a mounted card in the letter's
   margin, large enough to read as the room. The practice's one calm interaction is READING SIZE — a native radio pair
   that sets the whole page a step larger, nothing animated, nothing stored. Principles are NOTES in the margin of the
   letter; the scope is a LETTER LIST — what the practice offers, written as a list in a letter, not a table. */
.mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { width: min(100%, 18rem); aspect-ratio: 4 / 3; border-radius: 6px; padding: .75rem; overflow: visible; }
.mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media .lx-img { object-fit: contain; object-position: 50% 50%; border-radius: 2px; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-letter { grid-template-columns: minmax(14rem, 20rem) minmax(0, 40rem); }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { width: 100%; }
}


/* principles as margin notes */
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list { display: grid; gap: 0; max-width: 52rem; margin-inline: auto; border: 0; counter-reset: qr-note; }
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 1.4rem 0; border: 0; border-top: 1px solid var(--lx-line); counter-increment: qr-note; }
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list li::before { content: counter(qr-note, lower-roman) "."; position: static; grid-row: span 2; font: italic 400 1.4rem/1.1 var(--lx-head); color: var(--lx-muted); text-align: right; }
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-title { font: 400 clamp(1.3rem, 2.2cqi, 1.6rem)/1.25 var(--lx-head); }
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-detail { color: var(--lx-muted); line-height: 1.7; }

/* scope as a letter list */
.mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-wrap { max-width: 44rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-svc-list { list-style: none; display: block; padding: 0; border: 0; }
.mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-svc-list > li { display: block; padding: 1.1rem 0 1.1rem 1.6rem; border: 0; border-left: 1px solid var(--lx-line); background: none; box-shadow: none; }
.mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-svc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-h3 { font: 400 1.4rem/1.25 var(--lx-head); }

/* the help-now band: the action sits with its words, and the bare left rule goes */
.mk-demo-site[data-direction="quiet-room"] .lx-cta .lx-cta-grid { justify-content: start; column-gap: 2.5rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-cta.lx-tone-dark { box-shadow: none; }

/* the enquiry is set in the practice's serif, on its quiet card */
.mk-demo-site[data-direction="quiet-room"] [data-contact-form="journey"] > div > h2 { font-weight: 400; letter-spacing: -.01em; }
.mk-demo-site[data-direction="quiet-room"] [data-journey-surface] { background: var(--qr-card); box-shadow: var(--qr-mount); }

/* ── gate11 correction: wider pages, a real reading size ─────────────────────────────────────────────────────────────
   Notes are one column (the shared proof grid split them into narrow strips) and, with the scope letter list, open to
   two columns on wide frames so 1920 is not a narrow centred strip. Reading-size choices are 48px and their inputs
   cover the whole choice (not 42px inside the border); larger is a clear step (1.2). */
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list { grid-template-columns: minmax(0, 1fr); max-width: 68rem; column-gap: 3.5rem; }
.mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list li { border-left: 0; padding: 1.4rem 0; }
@container demo (min-width: 1100px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-demo-site[data-direction="quiet-room"] .lx-proof[data-lx-layout="notes"] .lx-proof-list li:nth-child(2) { border-top: 1px solid var(--lx-line); }
  .mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-wrap { max-width: 72rem; }
  .mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .mk-demo-site[data-direction="quiet-room"] .lx-margin { max-width: 68rem; }
}
.mk-demo-site[data-direction="quiet-room"] [data-journey-surface] { border-top: 3px solid var(--lx-accent); }

/* ── gate12 critic correction: the room, whole and wide; lit in the dark ─────────────────────────────────────────────
   The room drawing is 16:9, so it is framed at 16:9 — whole, never letterboxed — and on wide frames it runs the full
   measure beneath the letter instead of a thumbnail in the margin. In dark mode the drawing keeps its own colours as a
   lit room (no invert, which turned its warm floor to mud), dimmed a touch to sit in the dark page. The home gains a
   second drawn moment (the window) beside the "before you decide" note. The installed enquiry uses quiet underline tabs. */
.mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { width: 100%; aspect-ratio: 16 / 9; padding: 0; border-radius: 6px; overflow: hidden; }
@container demo (min-width: 900px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-letter { grid-template-columns: minmax(0, 1fr); max-width: 72rem; margin-inline: auto; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin { order: 2; padding-top: 0; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter .lx-hero-words, .mk-demo-site[data-direction="quiet-room"] .lx-letter-body { max-width: 44rem; }
}
.mk-demo-site[data-direction="quiet-room"].mk-demo-site[data-theme="dark"] .lx-img[src$=".svg"] { filter: brightness(.86) saturate(.92); mix-blend-mode: normal; background-color: transparent; }
.mk-demo-site[data-direction="quiet-room"] .lx-split .lx-split-media { border-radius: 6px; overflow: hidden; }
.mk-demo-site[data-direction="quiet-room"] [data-enquiry-intent] { border-radius: 0; border-width: 0 0 1px; background: transparent; }
.mk-demo-site[data-direction="quiet-room"] [data-enquiry-intent] > * { border-radius: 0; }
.mk-demo-site[data-direction="quiet-room"] [data-enquiry-journey] ol[aria-label="Enquiry progress"] li > span:first-child { height: 2px; border-radius: 0; }

/* ── g93d4 critic correction (flatness veto): a composed first view, a set-apart reading setting ────────────────────
   On wide frames the letter stood as one narrow column with the room drawn below the fold beside an empty field. From
   1200px the words and the room sit side by side (the drawing whole at 16:9, mounted on a card), and the hero plane is
   tinted off the page so foreground and background separate. The reading-size choice — a real accessibility control
   (Larger zooms the page) that read as a stray toggle — is set apart under a hairline as one joined pair. */
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter { background: linear-gradient(180deg, color-mix(in srgb, var(--lx-accent) 7%, var(--lx-paper)) 0%, var(--lx-paper) 100%); border-bottom: 1px solid var(--lx-line); }
@container demo (min-width: 1200px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-letter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); max-width: none; column-gap: clamp(3rem, 5cqi, 6rem); align-items: center; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin { order: 2; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { padding: .9rem; background: var(--qr-card, #fff); box-shadow: var(--qr-mount, 0 30px 60px -40px rgb(29 34 48 / .45)); border-radius: 10px; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media .lx-img { object-fit: contain; border-radius: 4px; }
}

/* ── g0c01b critic correction (flatness veto, second pass): depth, hierarchy, one private-practice moment ────────────
   The light pages were still pale lilac-grey planes with small type and evenly weighted sections, and the reading-size
   radios (removed from the renderer) read as a debug control. The first view now has real foreground and background:
   a deeper stone plane, the room mounted on a raised paper card that stands off a heather-edged backing panel, and the
   headline at a larger, calmer scale. Its signature moment is the PRIVACY NOTE — the practice's first promise ("contact
   details only at first") set as a mounted card with a heather edge beside the actions, the way a private practice
   leaves a note on the door. Below, sections alternate weight: the three first steps sit on a raised paper sheet with
   the title beside the path, the scope list stays on the page, and the room split is tinted. Dark and phone keep their
   behaviour; nothing moves. */
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter { background: radial-gradient(70% 90% at 85% 40%, color-mix(in srgb, var(--lx-accent) 14%, transparent), transparent 70%), var(--qr-soft); border-bottom: 1px solid var(--lx-line); }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter .lx-display { font-size: calc(clamp(2.7rem, 6.6cqi, 6.2rem) * var(--lx-title-scale, 1)); line-height: 1.02; }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter .lx-lede { color: var(--lx-ink); opacity: .82; }
.mk-demo-site[data-direction="quiet-room"] .lx-hero--letter .lx-note { display: block; max-width: 26rem; margin-top: 2.25rem; padding: 1.1rem 1.25rem 1.15rem 1.4rem; border: 0; border-radius: 6px; background: var(--qr-card); box-shadow: inset 3px 0 0 var(--lx-accent), 0 24px 50px -34px rgb(29 34 48 / .5); font: italic 400 1.2rem/1.45 var(--lx-head); color: var(--lx-ink); }
@container demo (min-width: 1200px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-hero--letter { padding-block: clamp(5rem, 9cqi, 8rem); }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin { position: relative; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin::before { content: ""; position: absolute; inset: 2.25rem -1.5rem -1.75rem 2.25rem; border-radius: 12px; background: color-mix(in srgb, var(--lx-accent) 16%, var(--qr-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lx-accent) 30%, transparent); pointer-events: none; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { position: relative; box-shadow: 0 0 0 1px var(--lx-line), 0 50px 90px -48px rgb(29 34 48 / .6); }
}
/* the three first steps: a raised paper sheet, the title beside the path */
.mk-demo-site[data-direction="quiet-room"] .lx-steps--margin { background: var(--lx-paper); }
.mk-demo-site[data-direction="quiet-room"] .lx-steps--margin .lx-margin { padding: clamp(1.25rem, 5cqi, 3.5rem); border-radius: 10px; background: var(--qr-card); box-shadow: 0 0 0 1px var(--lx-line), 0 40px 80px -60px rgb(29 34 48 / .45); }
@container demo (max-width: 399px) { .mk-demo-site[data-direction="quiet-room"] .lx-steps--margin .lx-margin { padding: 1.25rem 1rem; } }
@container demo (min-width: 1100px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-steps--margin .lx-margin { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(3rem, 6cqi, 6rem); max-width: 76rem; }
  .mk-demo-site[data-direction="quiet-room"] .lx-steps--margin .lx-margin-list { margin-top: 0; }
  .mk-demo-site[data-direction="quiet-room"] .lx-steps--margin .lx-margin > :not(.lx-sec-intro, .lx-margin-list) { grid-column: 1 / -1; }
}
.mk-demo-site[data-direction="quiet-room"] .lx-steps--margin .lx-h2, .mk-demo-site[data-direction="quiet-room"] .lx-services[data-lx-layout="letterlist"] .lx-h2 { font-size: calc(clamp(2.3rem, 5cqi, 4.2rem) * var(--lx-title-scale, 1)); }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-list .lx-h3 { font-size: clamp(1.5rem, 2.8cqi, 2rem); }
.mk-demo-site[data-direction="quiet-room"] .lx-margin-n { color: var(--lx-accent); font-size: 1.75rem; }
[data-direction="quiet-room"][data-theme="dark"] .lx-margin-n { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); }
.mk-demo-site[data-direction="quiet-room"] .lx-split.lx-tone-soft { background-color: color-mix(in srgb, var(--lx-accent) 9%, var(--qr-soft)); }
/* ── g360 critic (flatness veto, third pass): a two-plane first view ─────────────────────────────────────────────────
   The room was a framed card floating on one undifferentiated lilac-grey field. From 1200px the hero is two planes: the
   words on the pale stone, and the room mounted on a deep heather plane that runs to the right edge of the page, so the
   drawing stands out against a dark ground and the first view has a real foreground and background. The backing panel
   becomes a lighter heather edge on that plane. Words, note, actions and the drawing itself are unchanged. */
@container demo (min-width: 1200px) {
  .mk-demo-site[data-direction="quiet-room"] .lx-hero--letter { background: linear-gradient(90deg, var(--qr-soft) 0 50%, color-mix(in srgb, var(--lx-accent) 62%, #141522) 50% 100%); padding-block: clamp(4rem, 7cqi, 6.5rem); }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin::before { background: color-mix(in srgb, var(--lx-accent) 40%, #2a2740); box-shadow: none; }
  .mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media { box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 60px 110px -50px rgb(0 0 0 / .75); }
}
/* the room is now a photograph (an armchair in a shaft of light): it fills its mounted card instead of being fitted */
.mk-demo-site[data-direction="quiet-room"] .lx-letter-margin .lx-hero-media .lx-img { object-fit: cover; }

/* ── system mode: the design's dark rules follow the visitor's device unless the owner fixed light or dark ── */
@media (prefers-color-scheme: dark) {
.mk-demo-site[data-direction="quiet-room"][data-theme="system"] {
  --lx-paper: #151925; --lx-ink: #e9ecf3; --lx-muted: #b2b9c8; --lx-line: rgba(233,236,243,0.14);
  --lx-dark: #0d1018; --qr-card: #1c2130; --qr-soft: #1a1f2c;
}
.mk-demo-site[data-direction="quiet-room"][data-theme="system"] .lx-eyebrow { color: color-mix(in srgb, var(--lx-accent) 30%, #ffffff); }
.mk-demo-site[data-direction="quiet-room"][data-theme="system"] :is(.lx-svc-price, .lx-price-amount) { color: color-mix(in srgb, var(--lx-accent) 30%, #ffffff); }
.mk-demo-site[data-direction="quiet-room"].mk-demo-site[data-theme="system"] .lx-img[src$=".svg"] { filter: brightness(.86) saturate(.92); mix-blend-mode: normal; background-color: transparent; }
[data-direction="quiet-room"][data-theme="system"] .lx-margin-n { color: color-mix(in srgb, var(--lx-accent) 40%, #ffffff); }
}