:root {
  color-scheme: dark;
  --ink: #f3efe8;
  --muted: #b4afa7;
  --dim: #827b74;
  --deep: #111416;
  --deep-2: #1b1d1e;
  --line: rgba(243, 239, 232, .15);
  --line-strong: rgba(243, 239, 232, .3);
  --paper: #e9e0d4;
  --paper-ink: #25211e;
  --index-accent: #b99878;
  --radius: 18px;
  --max: 1380px;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--deep);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body { margin: 0; min-width: 320px; background: var(--deep); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* The overview is a premium curator space, not a fifth direction. */
body:not([data-direction]) {
  background: linear-gradient(120deg, #111416 0%, #151719 52%, #1b1a19 100%);
}

body:not([data-direction])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 8% 12%, rgba(243, 239, 232, .07), transparent 23%), radial-gradient(circle at 91% 6%, rgba(185, 152, 120, .12), transparent 27%), linear-gradient(116deg, transparent 0 54%, rgba(185, 152, 120, .04) 54.2%, transparent 54.5%);
}

.index-shell {
  position: relative;
  z-index: 1;
}

body:not([data-direction]) .hero-mosaic {
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, .2));
}

body:not([data-direction]) .mosaic-tile {
  background: #202326;
  border-color: rgba(243, 239, 232, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

body:not([data-direction]) .direction-card {
  box-shadow: 0 18px 45px rgba(0, 0, 0, .14);
}

body:not([data-direction]) .direction-card:hover {
  box-shadow: 0 22px 55px rgba(0, 0, 0, .26);
}

body:not([data-direction]) .direction-card-image {
  background: #25272a;
}

body:not([data-direction]) .logo-recommendation {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 45px rgba(0, 0, 0, .14);
}

/* Each direction owns the full detail-page environment. The overview keeps the neutral Neuroom gallery tokens above. */
body[data-direction] {
  --direction-bg: #171a18;
  --direction-panel: #202521;
  --direction-elevated: #293029;
  --direction-ink: #eff2ec;
  --direction-muted: #aab2aa;
  --direction-dim: #788178;
  --direction-line: rgba(239, 242, 236, .14);
  --direction-line-strong: rgba(239, 242, 236, .28);
  --direction-accent: #c8f36a;
  --direction-accent-ink: #1d251f;
  --direction-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --direction-display-font: var(--direction-font);
  --direction-atmosphere: radial-gradient(circle at 80% 12%, rgba(200, 243, 106, .08), transparent 28%);
  --radius: 14px;
  background: var(--direction-bg);
  color: var(--direction-ink);
  font-family: var(--direction-font);
}

body[data-direction]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--direction-atmosphere);
}

body[data-direction] .direction-shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

body[data-direction] .direction-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .72;
  background: var(--direction-atmosphere);
}

body[data-direction="intelligent-workshop"] {
  color-scheme: dark;
  --direction-bg: #1c211c;
  --direction-panel: #292f28;
  --direction-elevated: #343c32;
  --direction-ink: #f2eddf;
  --direction-muted: #b9c0b4;
  --direction-dim: #8a9485;
  --direction-line: rgba(242, 237, 223, .15);
  --direction-line-strong: rgba(242, 237, 223, .34);
  --direction-accent: #c8f36a;
  --direction-accent-ink: #20251e;
  --direction-font: "Avenir Next", Avenir, ui-sans-serif, sans-serif;
  --direction-display-font: "Avenir Next", Avenir, ui-sans-serif, sans-serif;
  --direction-atmosphere: radial-gradient(circle at 72% 10%, rgba(200, 243, 106, .11), transparent 25%), radial-gradient(circle at 12% 76%, rgba(100, 107, 85, .16), transparent 28%);
  --radius: 12px;
}

body[data-direction="open-rooms"] {
  color-scheme: light;
  --direction-bg: #ebe3d6;
  --direction-panel: #f4eee3;
  --direction-elevated: #f8f2e8;
  --direction-ink: #18233f;
  --direction-muted: #586174;
  --direction-dim: #7a7f8d;
  --direction-line: rgba(24, 35, 63, .16);
  --direction-line-strong: rgba(24, 35, 63, .34);
  --direction-accent: #ed624c;
  --direction-accent-ink: #fff5eb;
  --direction-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --direction-display-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --direction-atmosphere: radial-gradient(circle at 9% 18%, rgba(36, 77, 168, .13), transparent 22%), radial-gradient(circle at 88% 64%, rgba(237, 98, 76, .12), transparent 25%);
  --radius: 24px;
}

body[data-direction="precision-rooms"] {
  color-scheme: dark;
  --direction-bg: #151a20;
  --direction-panel: #20262e;
  --direction-elevated: #29313b;
  --direction-ink: #edf2f7;
  --direction-muted: #aeb9c4;
  --direction-dim: #748392;
  --direction-line: rgba(237, 242, 247, .14);
  --direction-line-strong: rgba(237, 242, 247, .32);
  --direction-accent: #4e9cff;
  --direction-accent-ink: #102238;
  --direction-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --direction-display-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --direction-atmosphere: linear-gradient(115deg, transparent 48%, rgba(78, 156, 255, .07) 48.2%, transparent 48.5%), radial-gradient(circle at 82% 12%, rgba(78, 156, 255, .13), transparent 28%);
  --radius: 8px;
}

body[data-direction="living-intelligence"] {
  color-scheme: light;
  --direction-bg: #e9dfd0;
  --direction-panel: #f3eadc;
  --direction-elevated: #f7f0e5;
  --direction-ink: #153e3d;
  --direction-muted: #5f716c;
  --direction-dim: #7c8a82;
  --direction-line: rgba(21, 62, 61, .15);
  --direction-line-strong: rgba(21, 62, 61, .3);
  --direction-accent: #d77b50;
  --direction-accent-ink: #fff5eb;
  --direction-font: "Avenir Next", Avenir, ui-sans-serif, sans-serif;
  --direction-display-font: "Avenir Next", Avenir, ui-sans-serif, sans-serif;
  --direction-atmosphere: radial-gradient(ellipse at 10% 22%, rgba(215, 123, 80, .16), transparent 25%), radial-gradient(ellipse at 88% 72%, rgba(21, 62, 61, .12), transparent 28%);
  --radius: 30px;
}

body[data-direction] h1,
body[data-direction] h2,
body[data-direction] h3 {
  font-family: var(--direction-display-font);
}

body[data-direction] .site-header {
  border-bottom-color: var(--direction-line);
}

body[data-direction] .site-nav,
body[data-direction] .back-link,
body[data-direction] .brand-context {
  color: var(--direction-dim);
}

body[data-direction] .site-nav a:hover,
body[data-direction] .back-link:hover {
  color: var(--direction-ink);
}

body[data-direction] .detail-moodboard {
  border: 1px solid var(--direction-line-strong);
  background: var(--direction-panel);
  box-shadow: 0 28px 80px rgba(15, 18, 16, .16);
}

body[data-direction] .detail-intro {
  border-bottom-color: var(--direction-line);
}

body[data-direction] .detail-intro h1,
body[data-direction] .detail-summary,
body[data-direction] .language-grid h3,
body[data-direction] .service-row-name h3,
body[data-direction] .logo-card h2,
body[data-direction] .next-work-grid h3 {
  color: var(--direction-ink);
}

body[data-direction] .detail-thesis,
body[data-direction] .palette-item,
body[data-direction] .section-heading p,
body[data-direction] .language-grid p,
body[data-direction] .service-row p,
body[data-direction] .logo-card p,
body[data-direction] .next-work-grid p,
body[data-direction] .site-footer {
  color: var(--direction-muted);
}

body[data-direction] .detail-section,
body[data-direction] .other-directions > div,
body[data-direction] .service-expression {
  border-color: var(--direction-line);
}

body[data-direction] .language-grid article {
  border-top-color: var(--direction-line-strong);
}

body[data-direction] .service-row {
  border-bottom-color: var(--direction-line);
}

body[data-direction] .service-glyph,
body[data-direction] .section-label,
body[data-direction] .wordmark-dot,
body[data-direction] .other-directions a:hover {
  color: var(--direction-accent);
}

body[data-direction] .logo-card {
  border-color: var(--direction-line-strong);
  background: var(--direction-panel);
}

body[data-direction] .logo-display {
  border-color: var(--direction-line-strong);
  background: var(--direction-elevated);
  border-radius: var(--radius);
}

body[data-direction] .next-work-grid article {
  border-color: var(--direction-line);
  background: color-mix(in srgb, var(--direction-panel) 42%, transparent);
}

body[data-direction] .other-directions a {
  border-bottom-color: var(--direction-line);
  color: var(--direction-muted);
}

body[data-direction="intelligent-workshop"] .direction-shell::after {
  background: linear-gradient(90deg, transparent 0 68%, rgba(200, 243, 106, .04) 68.2%, transparent 68.5%), var(--direction-atmosphere);
}

body[data-direction="intelligent-workshop"] .detail-intro {
  padding-left: 24px;
  border-left: 2px solid var(--direction-accent);
  border-bottom: 0;
}

body[data-direction="intelligent-workshop"] .detail-moodboard {
  box-shadow: 0 28px 80px rgba(10, 14, 10, .34), 8px 8px 0 rgba(200, 243, 106, .08);
}

body[data-direction="open-rooms"] .direction-shell::after {
  opacity: .9;
  background: linear-gradient(115deg, transparent 0 68%, rgba(36, 77, 168, .07) 68.2%, transparent 68.5%), var(--direction-atmosphere);
}

body[data-direction="open-rooms"] .detail-main {
  padding-left: 3vw;
  padding-right: 3vw;
}

body[data-direction="open-rooms"] .detail-moodboard {
  box-shadow: 14px 14px 0 rgba(36, 77, 168, .1);
}

body[data-direction="open-rooms"] .detail-intro h1 {
  font-weight: 560;
  letter-spacing: -.085em;
}

body[data-direction="open-rooms"] .logo-card,
body[data-direction="open-rooms"] .next-work-grid article {
  background: rgba(248, 242, 232, .72);
}

body[data-direction="precision-rooms"] .direction-shell::after {
  opacity: .8;
  background-image: linear-gradient(rgba(78, 156, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 156, 255, .04) 1px, transparent 1px), var(--direction-atmosphere);
  background-size: 72px 72px, 72px 72px, auto;
}

body[data-direction="precision-rooms"] .detail-moodboard {
  border-color: rgba(78, 156, 255, .42);
  box-shadow: 0 30px 90px rgba(4, 9, 16, .48), 0 0 0 1px rgba(78, 156, 255, .1);
}

body[data-direction="precision-rooms"] .detail-intro h1 {
  font-weight: 720;
  letter-spacing: -.1em;
}

body[data-direction="precision-rooms"] .language-grid article,
body[data-direction="precision-rooms"] .service-row,
body[data-direction="precision-rooms"] .next-work-grid article {
  border-radius: 0;
}

body[data-direction="precision-rooms"] .logo-card {
  background: linear-gradient(135deg, rgba(78, 156, 255, .09), transparent 42%), var(--direction-panel);
}

body[data-direction="living-intelligence"] .direction-shell::after {
  opacity: .9;
  background: radial-gradient(ellipse at 84% 18%, rgba(215, 123, 80, .1), transparent 22%), radial-gradient(ellipse at 10% 78%, rgba(21, 62, 61, .09), transparent 25%), var(--direction-atmosphere);
}

body[data-direction="living-intelligence"] .detail-moodboard {
  box-shadow: 0 26px 70px rgba(73, 52, 37, .14);
}

body[data-direction="living-intelligence"] .detail-intro h1 {
  font-weight: 560;
  letter-spacing: -.065em;
}

body[data-direction="living-intelligence"] .logo-card,
body[data-direction="living-intelligence"] .next-work-grid article {
  background: rgba(247, 240, 229, .7);
}

.site-shell { width: min(100%, var(--max)); margin: 0 auto; padding: 0 34px; }
.site-header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.site-brand { display: inline-flex; align-items: baseline; gap: 14px; }
.wordmark { display: inline-block; font-size: 27px; font-weight: 760; line-height: .9; letter-spacing: -.085em; }
.wordmark-dot { font-weight: 800; }
.brand-context { color: var(--dim); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.site-nav { display: flex; gap: 28px; color: var(--muted); font-size: 13px; }
.site-nav a, .back-link, .text-link { transition: color .2s ease, transform .2s ease; }
.site-nav a:hover, .back-link:hover, .text-link:hover { color: var(--ink); }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

.index-hero { min-height: 620px; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: 9vw; padding: 70px 0 86px; }
.hero-copy { max-width: 590px; }
.section-label { display: block; margin-bottom: 17px; color: var(--dim); font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 24px; font-size: clamp(3.3rem, 6.5vw, 6.7rem); font-weight: 700; line-height: .92; letter-spacing: -.075em; }
h2 { margin-bottom: 14px; font-size: clamp(2rem, 3.5vw, 4rem); font-weight: 680; line-height: .98; letter-spacing: -.065em; }
h3 { margin-bottom: 9px; font-size: 18px; line-height: 1.05; letter-spacing: -.025em; }
p { color: var(--muted); font-size: 15px; line-height: 1.58; }
.hero-copy > p { max-width: 520px; margin-bottom: 28px; font-size: 17px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 14px; font-weight: 650; }
.text-link span { color: var(--index-accent); font-size: 18px; }

.hero-mosaic { display: grid; grid-template-columns: 1.38fr .9fr 1.12fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 450px; transform: rotate(2deg); }
.mosaic-tile { min-height: 210px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #cfd6d4; transition: transform .25s ease, border-color .25s ease; }
.mosaic-tile:hover { transform: translateY(-5px) rotate(-1deg); border-color: var(--line-strong); }
.mosaic-tile img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s ease; }
.mosaic-tile:hover img { transform: scale(1.035); }
.mosaic-tile-1 { grid-column: 1 / 3; grid-row: 1; }
.mosaic-tile-2 { grid-column: 3; grid-row: 1 / 3; }
.mosaic-tile-3 { grid-column: 1; grid-row: 2; }
.mosaic-tile-4 { grid-column: 2; grid-row: 2; }

.directions-section, .foundation-section { padding: 74px 0 104px; border-top: 1px solid var(--line); }
.section-heading { max-width: 650px; margin-bottom: 30px; }
.section-heading p { max-width: 560px; margin-bottom: 0; }
.directions-heading { margin-bottom: 34px; }
.direction-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.direction-card { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--deep-2); transition: transform .25s ease, border-color .25s ease; }
.direction-card:hover { transform: translateY(-5px); border-color: var(--card-accent); }
.direction-card:nth-child(2), .direction-card:nth-child(3) { display: grid; grid-template-columns: 1fr 1fr; }
.direction-card:nth-child(1) { grid-row: span 2; }
.direction-card:nth-child(4) { grid-column: 2; }
.preview { min-height: 250px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.direction-card:nth-child(2) .preview, .direction-card:nth-child(3) .preview { min-height: 220px; }
.preview-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.preview .wordmark { font-size: 26px; }
.preview-mini-label { opacity: .7; font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.preview-workshop { color: #f2eddf; background: #202521; }
.workshop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 220px; margin: 16px 0 18px; }
.workshop-grid span { aspect-ratio: 1; border: 1px solid #c8f36a; border-radius: 7px; }
.workshop-grid .is-active { background: #c8f36a; }
.preview-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.preview-pills span { padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.preview-open { color: #18233f; background: #f1e9dc; }
.open-portal { width: 130px; height: 98px; margin: 10px auto 25px; border: 2px solid #244da8; position: relative; transform: rotate(-4deg); }
.open-portal:after { content: ""; position: absolute; inset: 15px -15px -17px 15px; border: 2px solid #ed624c; }
.open-blocks { display: flex; gap: 6px; height: 12px; }
.open-blocks span { flex: 1; background: #244da8; }
.open-blocks span:nth-child(2) { background: #ed624c; }
.open-blocks span:nth-child(3) { background: #b8acd1; }
.preview-precision { color: #eff2f5; background: #20242a; }
.precision-signal { height: 70px; margin: 12px 0 20px; border-top: 1px solid #4e9cff; border-bottom: 1px solid rgba(78,156,255,.45); position: relative; }
.precision-signal:before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: #4e9cff; transform: rotate(-4deg); box-shadow: 0 0 15px rgba(78,156,255,.8); }
.precision-signal span { position: absolute; top: 30px; width: 7px; height: 7px; border-radius: 50%; background: #4e9cff; }
.precision-signal span:nth-child(1) { left: 28%; }.precision-signal span:nth-child(2) { left: 57%; }.precision-signal span:nth-child(3) { left: 82%; }
.precision-rooms { display: flex; gap: 7px; }
.precision-rooms i { flex: 1; height: 12px; border: 1px solid #4e9cff; }.precision-rooms i:nth-child(2) { background: #4e9cff; }
.preview-living { color: #153e3d; background: #eee5d7; }
.living-flow { height: 90px; margin: 8px 0 18px; overflow: hidden; position: relative; }
.living-flow span { position: absolute; width: 160px; height: 52px; border: 2px solid currentColor; border-radius: 50%; opacity: .8; transform: rotate(-20deg); }
.living-flow span:nth-child(1) { left: -16px; top: 27px; color: #153e3d; }.living-flow span:nth-child(2) { left: 46px; top: 4px; color: #d77b50; }.living-flow span:nth-child(3) { left: 112px; top: 30px; color: #a8bdad; }
.direction-card-image { min-height: 230px; background: #cfd6d4; }
.direction-card:nth-child(1) .direction-card-image { min-height: 290px; }
.direction-card-image img { width: 100%; height: 100%; min-height: inherit; display: block; object-fit: cover; }
.direction-card-copy { padding: 18px 19px 20px; }
.direction-card:nth-child(2) .direction-card-copy, .direction-card:nth-child(3) .direction-card-copy { grid-column: 1 / -1; }
.direction-card-meta { display: flex; align-items: center; justify-content: space-between; color: var(--card-accent); font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.card-arrow { font-size: 18px; letter-spacing: 0; }
.direction-card h3 { margin-top: 12px; color: var(--ink); }
.direction-card p { margin-bottom: 0; font-size: 13px; }

.foundation-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: stretch; }
.logo-recommendation { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--deep-2); }
.foundation-wordmark { padding: 28px 0; color: var(--ink); }
.foundation-wordmark .wordmark { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.logo-recommendation p { max-width: 420px; margin-bottom: 0; font-size: 13px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pillar { min-height: 250px; padding: 21px; border-top: 1px solid var(--line-strong); }
.pillar-mark { margin-bottom: 54px; color: var(--index-accent); font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pillar p { font-size: 13px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 104px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.site-footer .wordmark { color: var(--ink); font-size: 22px; }

.detail-main { padding: 40px 0 90px; }
.detail-hero { display: flex; flex-direction: column; gap: 30px; }
.detail-moodboard { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--direction-surface); }
.detail-moodboard img { width: 100%; min-height: 360px; max-height: 690px; display: block; object-fit: cover; }
.detail-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .75fr); column-gap: 8vw; align-items: end; padding: 10px 0 55px; border-bottom: 1px solid var(--line); }
.detail-intro .section-label { grid-column: 1 / -1; }
.detail-intro h1 { margin-bottom: 17px; font-size: clamp(3.2rem, 7vw, 7.5rem); color: var(--direction-text); }
.detail-summary { grid-column: 1; max-width: 530px; margin-bottom: 0; color: var(--direction-text); font-size: 18px; }
.detail-thesis { grid-column: 2; max-width: 370px; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.palette-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 36px; }
.palette-item { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.swatch { width: 16px; height: 16px; display: inline-block; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.detail-section { padding: 75px 0; border-bottom: 1px solid var(--line); }
.language-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.language-grid article { padding-top: 17px; border-top: 1px solid var(--line-strong); }
.language-grid h3 { color: var(--direction-text); }
.language-grid p { font-size: 14px; }
.service-expression { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; min-height: 105px; border-bottom: 1px solid var(--line); }
.service-row-name { display: flex; align-items: center; gap: 17px; }
.service-row-name h3 { margin: 0; color: var(--direction-text); }
.service-glyph { color: var(--direction-accent); font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.service-row p { max-width: 470px; margin: 0; font-size: 14px; }
.logo-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--direction-surface); }
.logo-card h2 { color: var(--direction-text); font-size: clamp(2rem, 4vw, 4rem); }
.logo-card p { max-width: 470px; margin-bottom: 0; font-size: 14px; }
.logo-display { display: flex; justify-content: center; align-items: center; min-height: 230px; color: var(--direction-text); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(0,0,0,.14); }
.logo-display .wordmark { font-size: clamp(3.2rem, 7vw, 7rem); }
.direction-section-nav { display: flex; align-items: center; gap: 18px; color: var(--direction-dim); font-size: 12px; }
.direction-section-nav a { min-height: 44px; display: inline-flex; align-items: center; transition: color .2s ease; }
.direction-section-nav a:hover { color: var(--direction-ink); }

.type-system-section, .applications-section { scroll-margin-top: 32px; }
.type-system-heading, .applications-heading { max-width: 760px; }
.type-system-specimen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 1px; margin-bottom: 24px; border: 1px solid var(--direction-line); background: var(--direction-line); }
.type-specimen-hero { min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 5vw, 58px); background: var(--direction-elevated); }
.type-specimen-kicker, .type-note-label, .type-role-meta, .application-format, .application-art-top, .application-art-service { color: var(--direction-accent); font: 650 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.type-specimen-display { max-width: 9ch; margin: 34px 0; color: var(--direction-ink); font-family: var(--type-family, var(--direction-display-font)); font-size: clamp(3rem, 7vw, 6.7rem); font-weight: 650; line-height: .92; letter-spacing: -.075em; }
.type-specimen-caption { max-width: 28rem; color: var(--direction-muted); font-size: 13px; line-height: 1.55; }
.type-system-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--direction-line); }
.type-system-notes > div { min-height: 178px; padding: 24px; background: var(--direction-panel); }
.type-system-notes p { margin: 14px 0 0; color: var(--direction-muted); font-size: 13px; line-height: 1.55; }
.type-role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--direction-line); background: var(--direction-line); }
.type-role { min-width: 0; min-height: 190px; display: flex; flex-direction: column; padding: 20px; background: color-mix(in srgb, var(--direction-panel) 88%, var(--direction-bg)); }
.type-role:first-child { grid-column: span 2; }
.type-role-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--direction-dim); }
.type-role-meta span:first-child { color: var(--direction-accent); }
.type-sample { margin: auto 0 18px; color: var(--direction-ink); font-family: var(--type-family); font-size: var(--type-size); font-weight: var(--type-weight); line-height: var(--type-leading); letter-spacing: var(--type-tracking); text-transform: var(--type-transform); overflow-wrap: anywhere; }
.type-role-spec { margin: 0; color: var(--direction-dim); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

.application-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.application-card { min-width: 0; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 20px; padding: 14px; border: 1px solid var(--direction-line); border-radius: var(--radius); background: var(--direction-panel); }
.application-card:nth-child(1) { grid-column: span 7; }
.application-card:nth-child(2) { grid-column: span 5; }
.application-card:nth-child(3) { grid-column: span 5; }
.application-card:nth-child(4) { grid-column: span 7; }
.application-card:nth-child(5) { grid-column: span 4; }
.application-card:nth-child(6) { grid-column: span 8; }
.application-card-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px 8px 0; }
.application-card h3 { margin: 18px 0 10px; color: var(--direction-ink); font-size: clamp(1.4rem, 2.5vw, 2.25rem); line-height: 1; letter-spacing: -.055em; text-wrap: balance; }
.application-card p { margin-bottom: 16px; color: var(--direction-muted); font-size: 13px; }
.application-note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--direction-line); color: var(--direction-dim); font-size: 11px; line-height: 1.5; }
.application-art { min-height: 250px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; isolation: isolate; background: var(--direction-bg); color: var(--direction-ink); }
.application-art::before, .application-art::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.application-art-top { color: var(--direction-dim); }
.application-art-mark { position: absolute; top: 42%; right: 14%; color: var(--direction-accent); font-size: clamp(3rem, 7vw, 6rem); font-weight: 300; line-height: 1; }
.application-art strong { max-width: 11ch; margin-top: auto; font-family: var(--direction-display-font); font-size: clamp(1.6rem, 3.2vw, 3.4rem); font-weight: 650; line-height: .94; letter-spacing: -.075em; }
.application-art-service { margin-top: 22px; color: var(--direction-muted); letter-spacing: .06em; }
.application-art-rule { width: 48%; height: 1px; margin-top: 10px; background: var(--direction-accent); }

/* The application art is a compact identity composition, not a product mockup. Each world changes its geometry and surface before copy is added. */
body[data-direction="intelligent-workshop"] .application-card { border-radius: 10px; box-shadow: 4px 4px 0 rgba(200,243,106,.06); }
body[data-direction="intelligent-workshop"] .application-art { background: #202521; border: 1px solid rgba(242,237,223,.17); }
body[data-direction="intelligent-workshop"] .application-art::before { inset: 18px; border: 1px solid rgba(200,243,106,.45); }
body[data-direction="intelligent-workshop"] .application-art::after { width: 42%; height: 42%; right: -8%; bottom: -14%; border: 1px solid rgba(242,237,223,.32); transform: rotate(45deg); }
body[data-direction="intelligent-workshop"] .application-art-mark { right: 18%; top: 39%; }
body[data-direction="intelligent-workshop"] .application-art-workbench::before { border-style: dashed; }
body[data-direction="intelligent-workshop"] .application-art-signal .application-art-rule { width: 72%; box-shadow: 28px 0 0 -0.5px rgba(200,243,106,.5); }

body[data-direction="open-rooms"] .application-card { border-radius: 26px 10px 26px 10px; background: rgba(248,242,232,.8); }
body[data-direction="open-rooms"] .application-art { min-height: 270px; border-radius: 24px 8px 24px 8px; background: #f1e9dc; }
body[data-direction="open-rooms"] .application-art::before { width: 76%; height: 68%; top: 14%; left: 12%; border: 2px solid #244da8; transform: rotate(-4deg); }
body[data-direction="open-rooms"] .application-art::after { width: 38%; height: 34%; top: 25%; left: 32%; border: 2px solid #ed624c; transform: rotate(5deg); }
body[data-direction="open-rooms"] .application-art-mark { z-index: 1; right: 16%; top: 40%; color: #ed624c; }
body[data-direction="open-rooms"] .application-art strong { color: #18233f; }
body[data-direction="open-rooms"] .application-art-service { color: #586174; }
body[data-direction="open-rooms"] .application-art-rule { background: #244da8; }
body[data-direction="open-rooms"] .application-art-window::after, body[data-direction="open-rooms"] .application-art-soft-card::after { border-radius: 50%; background: rgba(184,172,209,.36); border: 0; }

body[data-direction="precision-rooms"] .application-card { border-radius: 2px; }
body[data-direction="precision-rooms"] .application-art { min-height: 250px; border-radius: 0; background-color: #20242a; background-image: linear-gradient(rgba(78,156,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(78,156,255,.12) 1px, transparent 1px); background-size: 28px 28px; }
body[data-direction="precision-rooms"] .application-art::before { inset: 16px; border: 1px solid rgba(220,225,229,.42); }
body[data-direction="precision-rooms"] .application-art::after { left: 16px; right: 16px; top: 52%; height: 1px; background: #4e9cff; box-shadow: 0 0 0 1px rgba(78,156,255,.15); transform: rotate(-7deg); }
body[data-direction="precision-rooms"] .application-art-mark { right: 16%; top: 38%; color: #4e9cff; }
body[data-direction="precision-rooms"] .application-art strong { font-weight: 720; letter-spacing: -.09em; }
body[data-direction="precision-rooms"] .application-art-rule { background: #4e9cff; }

body[data-direction="living-intelligence"] .application-card { border-radius: 34px 14px 34px 14px; background: rgba(247,240,229,.8); }
body[data-direction="living-intelligence"] .application-art { min-height: 268px; border-radius: 48% 18% 44% 12%; background: #eee5d7; }
body[data-direction="living-intelligence"] .application-art::before { width: 80%; height: 54%; top: 21%; left: 10%; border: 1px solid #153e3d; border-radius: 54% 42% 48% 36%; transform: rotate(-14deg); }
body[data-direction="living-intelligence"] .application-art::after { width: 42%; height: 42%; right: -10%; bottom: -18%; border: 1px solid #d77b50; border-radius: 50%; }
body[data-direction="living-intelligence"] .application-art-mark { right: 17%; top: 38%; color: #d77b50; }
body[data-direction="living-intelligence"] .application-art strong { color: #153e3d; font-weight: 560; }
body[data-direction="living-intelligence"] .application-art-service { color: #5f716c; }
body[data-direction="living-intelligence"] .application-art-rule { background: #d77b50; }

.application-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 22px; padding-top: 24px; border-top: 1px solid var(--direction-line); }
.application-principles p { max-width: 34rem; margin: 12px 0 0; color: var(--direction-muted); font-size: 13px; }
.other-directions { padding: 75px 0 20px; }
.other-directions h2 { max-width: 400px; font-size: clamp(2rem, 4vw, 3.3rem); }
.other-directions > div { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.other-directions a { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 3px; border-bottom: 1px solid var(--line); color: var(--muted); transition: color .2s ease, padding .2s ease; }
.other-directions a:hover { padding-left: 10px; color: var(--link-accent); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-mosaic, .detail-moodboard, .detail-intro { animation: rise-in .65s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-mosaic { animation-delay: .08s; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 980px) {
  .index-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 60px; }
  .hero-mosaic { min-height: 390px; max-width: 760px; width: 100%; margin-left: auto; }
  .direction-grid { grid-template-columns: 1fr 1fr; }
  .direction-card:nth-child(1) { grid-row: auto; }
  .direction-card:nth-child(2), .direction-card:nth-child(3) { display: block; }
  .direction-card:nth-child(4) { grid-column: auto; }
  .direction-card-image, .direction-card:nth-child(1) .direction-card-image { min-height: 210px; }
  .foundation-grid { grid-template-columns: 1fr; }
  .detail-intro { grid-template-columns: 1fr 1fr; }
  .type-system-specimen { grid-template-columns: 1fr; }
  .type-specimen-hero { min-height: 300px; }
  .type-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-role:first-child { grid-column: span 2; }
  .application-card:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 700px) {
  .site-shell { padding: 0 18px; }
  .site-header { min-height: 68px; }
  .brand-context { display: none; }
  .site-nav { gap: 17px; font-size: 12px; }
  .index-hero { min-height: auto; padding: 54px 0 70px; }
  h1 { font-size: clamp(3rem, 15vw, 5.2rem); }
  .hero-copy > p { font-size: 15px; }
  .hero-mosaic { min-height: 270px; gap: 6px; }
  .mosaic-tile { min-height: 130px; border-radius: 12px; }
  .directions-section, .foundation-section { padding: 58px 0 76px; }
  .direction-grid, .pillar-grid, .language-grid, .next-work-grid { grid-template-columns: 1fr; }
  .direction-card:nth-child(2), .direction-card:nth-child(3) { display: grid; grid-template-columns: 1fr 1fr; }
  .direction-card:nth-child(2) .direction-card-copy, .direction-card:nth-child(3) .direction-card-copy { grid-column: 1 / -1; }
  .direction-card:nth-child(4) { grid-column: auto; }
  .direction-card-image, .direction-card:nth-child(1) .direction-card-image { min-height: 180px; }
  .preview { min-height: 205px; }
  .pillar { min-height: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .pillar-mark { margin-bottom: 28px; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 24px 0; }
  .detail-main { padding-top: 22px; }
  .detail-moodboard img { min-height: 220px; }
  .detail-intro { display: block; padding: 6px 0 42px; }
  .detail-intro h1 { font-size: clamp(3rem, 14vw, 5.4rem); }
  .detail-thesis { margin-top: 20px; }
  .palette-row { margin-top: 28px; }
  .detail-section { padding: 56px 0; }
  .direction-section-nav { gap: 8px; font-size: 11px; }
  .direction-section-nav a { min-height: 40px; }
  .type-system-specimen, .type-system-notes, .type-role-grid, .application-grid, .application-principles { grid-template-columns: 1fr; }
  .type-role:first-child, .application-card:nth-child(n) { grid-column: auto; }
  .type-specimen-hero { min-height: 280px; padding: 24px; }
  .type-system-notes { gap: 1px; }
  .type-system-notes > div { min-height: 0; padding: 20px; }
  .type-sample { font-size: clamp(1.25rem, 6vw, 2.2rem); }
  .application-card { grid-template-columns: 1fr; gap: 16px; padding: 10px; }
  .application-art { min-height: 230px; }
  .application-card-copy { padding: 8px 10px 14px; }
  .service-row { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 18px 0; }
  .logo-card { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .logo-display { min-height: 150px; }
  .other-directions > div { grid-template-columns: 1fr; }
}