/* ==========================================================================
   Kingdom Creators — "the system that holds"
   Layout concept: a calm, left-aligned page that behaves like a well-run
   organization. Colour encodes the story: scattered work wears many
   sticky-note colours; organized work is one evergreen system.
   ========================================================================== */

@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --white: #FFFFFF;
  --fog: #F0F3F1;
  --fog-2: #E6EBE8;
  --line: #D9E0DC;
  --ink: #17221F;
  --ink-2: #4B5853;
  --ink-3: #5C6863;
  --ever: #0E5C50;
  --ever-hover: #0B4C42;
  --ever-deep: #0A3B34;
  --ever-tint: #DDEEE8;
  --mint: #93D7C4;
  --canary: #FFE27A;
  --rose: #F8C1B7;
  --lilac: #D8CEF6;
  --sky: #C4DFF6;
  --peach: #FCD4A9;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --r-lg: 18px;
  --r: 12px;
  --w: 1200px;
  --header: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--canary); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ever); outline-offset: 3px; border-radius: 4px; }
.deep :focus-visible, .final-cta :focus-visible, .imagine :focus-visible, .site-footer :focus-visible, .pillar.ops :focus-visible { outline-color: var(--canary); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}

.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -0.025em; line-height: 1.03; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.2vw, 86px); }
h2 { font-size: clamp(34px, 4.4vw, 58px); margin-bottom: 20px; }
h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -0.015em; }
h1 em, h2 em { font-style: normal; }
.lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.small { font-size: 15px; }
.muted { color: var(--ink-3); }
.prose p + p { margin-top: 1em; }
.prose p { max-width: 64ch; }
.eyebrow { display: inline-block; font-weight: 600; font-size: 15.5px; color: var(--ever); margin-bottom: 14px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- sections ---------- */
section { padding-block: 120px; position: relative; }
.light { background: var(--fog); }
.paper { background: var(--white); }
.deep { background: var(--ever-deep); color: #EAF3F0; }
.deep .lede, .deep p { color: #B9D2CA; }
.deep .eyebrow { color: var(--mint); }
.section-head { max-width: 780px; margin-bottom: 64px; }
.section-head.center { margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { section { padding-block: 80px; } .section-head { margin-bottom: 40px; } }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16.5px; line-height: 1.2; text-decoration: none; padding: 16px 24px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--ever); color: #fff; }
.btn-gold:hover { background: var(--ever-hover); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.deep .btn-gold { background: var(--canary); color: var(--ink); }
.deep .btn-gold:hover { background: #FFEA9C; }
.deep .btn-ghost { border-color: rgba(234,243,240,.5); color: #EAF3F0; }
.deep .btn-ghost:hover { background: #EAF3F0; color: var(--ever-deep); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.text-link { font-weight: 600; color: var(--ever); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.text-link:hover { text-decoration-thickness: 3px; }
.deep .text-link { color: var(--mint); }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header); gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand svg { width: 30px; height: 30px; }
.brand-name { font-family: var(--display); font-weight: 650; font-size: 21px; letter-spacing: -0.02em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { font-size: 15.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ever); }
.nav-ctas { display: flex; align-items: center; gap: 10px; }
.nav-ctas .btn { padding: 11px 16px; font-size: 15px; }
.nav-ctas .btn-ghost { border-color: var(--line); }
.nav-ctas .btn-ghost:hover { border-color: var(--ink); }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line); color: var(--ink); border-radius: 10px; padding: 9px 16px; font: 600 15px var(--sans); cursor: pointer; }
.mobile-menu { display: none; }
@media (max-width: 1100px) { .nav-links { gap: 20px; } .nav-ctas .btn-ghost { display: none; } }
@media (max-width: 900px) {
  .nav-links, .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; border-top: 1px solid var(--line); background: #fff; padding: 8px 0 28px; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu > nav { max-width: var(--w); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .mobile-menu ul { list-style: none; }
  .mobile-menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .mobile-menu li a[aria-current="page"] { color: var(--ever); }
  .mobile-menu .btn-row { margin-top: 22px; flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   HERO STORY: scattered work becomes a system
   ========================================================================== */
.story { padding: 0; background: var(--white); }
.story.scroll-mode { height: 250vh; }
.story.scroll-mode .story-pin { position: sticky; top: var(--header); height: calc(100vh - var(--header)); display: flex; align-items: center; overflow: hidden; }
.story-grid { display: grid; grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr); gap: 48px; align-items: center; width: 100%; padding-block: 48px; }
.story-copy h1 { margin-bottom: 22px; font-size: clamp(40px, 4.1vw, 60px); }
@media (max-height: 860px) and (min-width: 961px) { .story-copy h1 { font-size: clamp(38px, 3.9vw, 56px); } .story-copy .lede { font-size: 18px; } .story-controls { margin-top: 24px; } }
.story-copy .lede { margin-bottom: 32px; }
.story-controls { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.stage-col { min-width: 0; }
.story-controls .story-caption { flex: 1 1 260px; min-height: 0; }
.state-toggle { display: inline-flex; align-self: start; justify-self: start; padding: 4px; border-radius: 12px; background: var(--fog); border: 1px solid var(--line); }
.state-toggle button { font: 600 15px var(--sans); border: 0; background: transparent; color: var(--ink-2); padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.state-toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23,34,31,.12), 0 0 0 1px var(--line); }
.story-caption { font-size: 15.5px; color: var(--ink-2); max-width: 40ch; line-height: 1.45; min-height: 3em; }
.scroll-cue { font-size: 14.5px; color: var(--ink-3); display: none; align-items: center; gap: 8px; }
.scroll-mode .scroll-cue { display: inline-flex; }
.scroll-cue svg { width: 16px; height: 16px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

.stage { position: relative; width: 100%; aspect-ratio: 7 / 6; max-height: calc(100vh - var(--header) - 150px); margin-left: auto; }
.stage-frame { position: absolute; inset: 0; border-radius: var(--r-lg); background: var(--fog); overflow: hidden; }
.stage-frame::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(23,34,31,.16) 1px, transparent 1.3px); background-size: 22px 22px; opacity: var(--grid-o, .2); }
.col-head, .stage-band { position: absolute; opacity: var(--struct-o, 0); }
.col-head { font-family: var(--display); font-weight: 650; font-size: 16px; letter-spacing: -0.01em; color: var(--ever); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.col-head i { width: 9px; height: 9px; border-radius: 2px; background: var(--ever); display: block; }
.stage-band { border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.stage-band b { font-family: var(--display); font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; }
.band-strategy { background: var(--ever); color: #fff; }
.band-strategy span { color: #CFE7E0; }
.band-purpose { background: var(--canary); color: var(--ink); }
.band-purpose span { color: #5a4c12; }
.stage.narrow .stage-band span { display: none; }

.note { position: absolute; left: 0; top: 0; will-change: transform; border-radius: 4px; color: var(--ink); }
.note > span { position: absolute; inset: 0; display: flex; overflow: hidden; }
.note .n-chaos { padding: 8px 10px; font-family: var(--hand); font-weight: 600; font-size: 19px; line-height: 1.02; align-items: flex-start; box-shadow: 0 8px 16px -8px rgba(23,34,31,.4); border-radius: 3px; }
.note.k-msg .n-chaos { font-family: var(--sans); font-weight: 500; font-size: 12.5px; line-height: 1.3; background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; flex-direction: column; gap: 1px; padding: 7px 10px; }
.note.k-msg .n-chaos small { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.note.k-file .n-chaos { font-family: var(--sans); font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 6px; align-items: center; gap: 8px; }
.note.k-file .n-chaos::before { content: ''; flex-shrink: 0; width: 15px; height: 19px; border-radius: 2px; background: var(--sky); border: 1px solid #9fc0dd; }
.note .n-order { padding: 0 10px; gap: 6px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ever); font-size: 12.5px; font-weight: 600; align-items: center; white-space: nowrap; border-radius: 6px; color: var(--ink); }
.note .n-order em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.c-canary { background: var(--canary); } .c-rose { background: var(--rose); } .c-lilac { background: var(--lilac); } .c-sky { background: var(--sky); } .c-peach { background: var(--peach); }
.toggle-mode .note { transition: transform .95s cubic-bezier(.65,0,.25,1), width .95s cubic-bezier(.65,0,.25,1), height .95s cubic-bezier(.65,0,.25,1); }
.toggle-mode .note > span { transition: opacity .45s ease; }
.toggle-mode .col-head, .toggle-mode .stage-band, .toggle-mode .stage-frame::before { transition: opacity .5s ease .45s; }

@media (max-width: 960px) {
  .story-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 72px; }
  .stage { aspect-ratio: 5 / 6; max-height: none; order: 2; }
}
@media (max-width: 560px) { .stage { aspect-ratio: 3 / 5.4; } }

/* ==========================================================================
   Shared components
   ========================================================================== */
.page-hero { padding-block: 104px 88px; background: var(--white); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(42px, 5.8vw, 76px); margin: 22px 0 24px; max-width: 17ch; }
.page-hero .lede { max-width: 58ch; }
.page-hero .btn-row { margin-top: 34px; }
.page-hero .eyebrow { margin-bottom: 0; }
.status-pill { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--fog); border: 1px solid var(--line); }
.status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ever); box-shadow: 0 0 0 4px var(--ever-tint); }
.status-pill b { font-weight: 500; color: var(--ink-2); padding-left: 10px; border-left: 1px solid var(--line); }
.status-pill.quiet::before { background: var(--ink-3); box-shadow: 0 0 0 4px var(--fog-2); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; position: relative; }
.paper .card { background: var(--fog); border-color: transparent; }
.deep .card { background: rgba(255,255,255,.05); border-color: rgba(234,243,240,.14); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 16.5px; }
.deep .card p { color: #B9D2CA; }
.card .num { display: block; font-size: 14.5px; font-weight: 600; color: var(--ever); margin-bottom: 12px; }
.deep .card .num { color: var(--mint); }

.two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }

.check-list { list-style: none; display: grid; gap: 14px; }
.check-list li { padding-left: 34px; position: relative; font-size: 17px; }
.check-list li::before { content: ''; position: absolute; left: 0; top: .25em; width: 20px; height: 20px; border-radius: 6px; background: var(--ever-tint); }
.check-list li::after { content: ''; position: absolute; left: 6px; top: calc(.25em + 5px); width: 8px; height: 5px; border-left: 2px solid var(--ever); border-bottom: 2px solid var(--ever); transform: rotate(-45deg); }
.dark-list li { color: var(--ink-2); }
.dark-list li strong { color: var(--ink); }
.deep .check-list li { color: #CFE2DC; }
.deep .check-list li strong { color: #fff; }
.deep .check-list li::before { background: rgba(147,215,196,.18); }
.deep .check-list li::after { border-color: var(--mint); }

.service h3 { font-size: 22px; }
.service ul { list-style: none; margin-top: 12px; display: grid; gap: 7px; }
.service li { font-size: 16px; color: var(--ink-2); padding-left: 16px; position: relative; }
.service li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--ever); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 16px; font-size: 28px; font-weight: 400; color: var(--ever); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; color: var(--ink-2); max-width: 68ch; }

.notice { border-radius: var(--r); padding: 20px 22px; font-size: 16px; color: var(--ink-2); background: var(--fog); }
.light .notice { background: var(--white); }
.notice strong { color: var(--ink); }
.deep .notice { background: rgba(255,255,255,.06); color: #CFE2DC; }
.deep .notice strong { color: #fff; }

/* approach: a true sequence, each glyph more ordered than the last */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.step { padding: 0 28px 0 0; position: relative; }
.step .s-glyph { width: 76px; height: 76px; margin-bottom: 22px; display: block; position: relative; z-index: 1; }
.step .s-num { display: block; font-weight: 600; font-size: 14.5px; color: var(--ever); margin-bottom: 4px; }
.step h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 16.5px; }
.steps::before { content: ''; position: absolute; left: 38px; right: 12%; top: 38px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; } .steps::before { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps.stacked { grid-template-columns: 1fr; row-gap: 0; }
.steps.stacked::before { display: none; }
.steps.stacked .step { padding: 24px 0; border-top: 1px solid var(--line); }
.steps.stacked .step:first-child { border-top: 0; padding-top: 0; }
.steps.on-dark p { color: #B9D2CA; }
.steps.on-dark .s-num { color: var(--mint); }
.deep .steps.stacked .step { border-top-color: rgba(234,243,240,.14); }

.callout { margin-top: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; background: var(--white); border-radius: var(--r); padding: 28px 30px; }
.callout h3 { font-size: 22px; margin-bottom: 6px; }
.callout p { color: var(--ink-2); font-size: 17px; max-width: 72ch; }
.callout .c-icon { width: 40px; height: 40px; }
@media (max-width: 560px) { .callout { grid-template-columns: 1fr; } }

/* engagements */
.engage { display: flex; flex-direction: column; padding: 32px; }
.engage .e-kicker { font-size: 14.5px; font-weight: 600; color: var(--ever); margin-bottom: 10px; }
.engage h3 { font-size: clamp(26px, 2.4vw, 32px); }
.engage .e-best { margin-top: auto; padding-top: 18px; font-size: 15px; color: var(--ink-2); border-top: 1px dashed var(--line); }
.engage p.mt-s { margin-bottom: 22px; }
.engage .e-best strong { color: var(--ink); }
.paper .engage { background: var(--white); border-color: var(--line); }
.engage.featured { border: 2px solid var(--ever); }
.engage.featured .e-kicker { align-self: flex-start; background: var(--ever); color: #fff; padding: 4px 10px; border-radius: 6px; }
.pilot { margin-top: 20px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--r); background: var(--canary); color: var(--ink); }
.pilot p { color: var(--ink); max-width: 66ch; font-size: 17px; }
.pilot .btn-gold { background: var(--ink); color: #fff; }
.pilot .btn-gold:hover { background: #000; }
.scope-note { margin-top: 18px; font-size: 15px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; max-width: 90ch; }
.scope-note svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--ever); }

/* projects */
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.proj-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .proj-grid.three { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .proj-grid { grid-template-columns: 1fr; } }
.proj { display: flex; flex-direction: column; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); padding: 26px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
a.proj:hover { border-color: var(--ever); box-shadow: 0 12px 30px -18px rgba(14,92,80,.6); }
.proj .p-loc { font-size: 14.5px; font-weight: 600; color: var(--ever); margin-bottom: 10px; }
.proj h3 { font-size: 26px; margin-bottom: 2px; }
.proj .p-sub { font-size: 14.5px; color: var(--ink-3); margin-bottom: 12px; }
.proj p { font-size: 15.5px; color: var(--ink-2); flex: 1; }
.proj .p-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proj .go { font-weight: 600; font-size: 15px; color: var(--ever); text-decoration: underline; text-underline-offset: 4px; }
.proj .status-pill { font-size: 13px; padding: 5px 11px 5px 10px; }
.proj.slot { border-style: dashed; background: transparent; justify-content: center; }
.proj.slot h3 { color: var(--ink-2); }
.proj.teal .p-loc { color: #2F6F8F; }
.deep .proj { background: rgba(255,255,255,.06); border-color: rgba(234,243,240,.16); color: #EAF3F0; }
.deep .proj p { color: #B9D2CA; }
.deep .proj .p-loc, .deep .proj .go { color: var(--mint); }
.deep .proj.teal .p-loc { color: var(--sky); }
.deep .proj .status-pill { background: rgba(255,255,255,.08); border-color: rgba(234,243,240,.18); color: #EAF3F0; }
.deep a.proj:hover { border-color: var(--mint); }

/* final CTA */
.final-cta { padding-block: 128px 104px; background: var(--ever-deep); color: #EAF3F0; position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(147,215,196,.22) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 80%); mask-image: linear-gradient(to bottom, #000, transparent 80%); pointer-events: none; }
.final-cta .wrap { position: relative; }
.final-cta h2 { max-width: 18ch; font-size: clamp(38px, 5.4vw, 72px); margin-bottom: 22px; }
.final-cta .lede { color: #B9D2CA; margin-bottom: 36px; }
.final-cta .btn-gold { background: var(--canary); color: var(--ink); }
.final-cta .btn-gold:hover { background: #FFEA9C; }
.final-cta .btn-ghost { border-color: rgba(234,243,240,.45); color: #EAF3F0; }
.final-cta .btn-ghost:hover { background: #EAF3F0; color: var(--ever-deep); }
.final-cta .eyebrow { color: var(--mint); }
.paths { margin-top: 80px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(234,243,240,.18); }
.path { padding: 26px 26px 6px 0; text-decoration: none; color: #EAF3F0; display: flex; flex-direction: column; gap: 6px; }
.path + .path { padding-left: 26px; border-left: 1px solid rgba(234,243,240,.18); }
.path .k { font-size: 14.5px; color: #9FC2B7; }
.path strong { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
.path span.text-link { font-size: 15.5px; margin-top: 8px; color: var(--mint); }
.path:hover strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
@media (max-width: 760px) { .paths { grid-template-columns: 1fr; } .path + .path { padding-left: 0; border-left: 0; border-top: 1px solid rgba(234,243,240,.18); } .path { padding-bottom: 22px; } }

/* footer */
.site-footer { padding: 72px 0 40px; background: var(--ink); color: #DCE5E1; }
.site-footer .brand { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-grid h2 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: #8FA39C; margin: 0 0 14px; line-height: 1.4; }
.footer-grid ul { list-style: none; display: grid; gap: 9px; }
.footer-grid a { color: #DCE5E1; text-decoration: none; font-size: 16px; }
.footer-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-brand p { color: #8FA39C; font-size: 15.5px; margin-top: 14px; max-width: 34ch; }
.footer-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(220,229,225,.15); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #8FA39C; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- forms ---------- */
.form-wrap { background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 44px; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(23,34,31,.35); }
@media (max-width: 600px) { .form-wrap { padding: 26px 20px; } }
fieldset { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }
legend { font-family: var(--display); font-weight: 650; letter-spacing: -0.02em; font-size: 28px; margin-bottom: 4px; padding: 0; }
.fieldset-note { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; }
.field { margin-top: 20px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
label, .label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.req { color: #A33A24; font-weight: 600; }
.hint { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.public-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; margin-left: 8px; vertical-align: 2px; background: var(--ever-tint); color: var(--ever); }
.public-tag.private { background: var(--fog-2); color: var(--ink-2); }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], select, textarea { width: 100%; font: inherit; font-size: 16.5px; color: var(--ink); background: var(--fog); border: 1.5px solid transparent; border-radius: 10px; padding: 13px 15px; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: #7f8a85; }
textarea { min-height: 120px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ever); background: #fff; box-shadow: 0 0 0 4px var(--ever-tint); }
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: #A33A24; }
.choice-group { display: grid; gap: 10px; }
.choice-group.cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 600px) { .choice-group.cols { grid-template-columns: 1fr; } }
.choice { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: 16px; margin: 0; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.choice:hover { border-color: #b9c4bf; }
.choice input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--ever); flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--ever); background: #F6FBF9; }
.consent { font-size: 15px; line-height: 1.55; font-weight: 400; }
.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.form-status { margin-top: 18px; padding: 16px 18px; border-radius: 10px; font-size: 16px; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: var(--ever-tint); color: #0b4037; }
.form-status.err { background: #FBE7E2; color: #6e2a1c; }
.form-status a { color: inherit; font-weight: 600; }
.hp { position: absolute !important; left: -9999px !important; }
.cond[hidden] { display: none; }

/* ---------- network directory ---------- */
.dir-tools { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
@media (max-width: 820px) { .dir-tools { grid-template-columns: 1fr; } }
.dir-tools label { font-size: 14.5px; }
.dir-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 18px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); }
.dir-meta button { background: none; border: 0; font: inherit; color: var(--ever); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .member-grid { grid-template-columns: 1fr; } }
.member-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.member-card:hover { border-color: var(--ever); box-shadow: 0 12px 30px -18px rgba(14,92,80,.6); }
.member-top { display: flex; gap: 14px; align-items: center; }
.avatar { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--ever-tint); color: var(--ever); font-family: var(--display); font-weight: 650; font-size: 18px; }
.avatar.lg { width: 88px; height: 88px; border-radius: 20px; font-size: 32px; }
.member-card h3 { font-size: 20px; line-height: 1.2; }
.member-card .biz { font-size: 14.5px; color: var(--ink-2); display: block; }
.member-card .headline { font-size: 15.5px; color: var(--ink-2); }
.member-card .m-meta { font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.member-card .m-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.badge { font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--fog-2); color: var(--ink-2); white-space: nowrap; }
.badge.vetted { background: var(--ever-tint); color: var(--ever); }
.badge.partner { background: #FFF3C4; color: #6b5300; }
.cat-chip { font-size: 13.5px; color: var(--ink-2); }
.empty-state { border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 56px 32px; text-align: center; background: var(--white); }
.empty-state h3 { font-size: 32px; margin-bottom: 10px; }
.empty-state p { color: var(--ink-2); max-width: 56ch; margin: 0 auto; }
.empty-state .btn-row { justify-content: center; margin-top: 26px; }
.empty-state[hidden], .member-card[hidden] { display: none; }
.pathway { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: border-color .15s ease; }
.pathway:hover { border-color: var(--ever); }
.pathway .text-link { margin-top: auto; padding-top: 16px; }

.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
@media (max-width: 560px) { .profile-head { grid-template-columns: 1fr; } }
.profile-head h1 { font-size: clamp(38px, 5vw, 60px); margin: 8px 0 6px; }
.profile-meta { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.profile-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; }
@media (max-width: 860px) { .profile-body { grid-template-columns: 1fr; } }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.side-card + .side-card { margin-top: 16px; }
.side-card h2 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); margin: 0 0 12px; }
.side-card ul { list-style: none; display: grid; gap: 8px; }
.side-card a { color: var(--ever); font-weight: 600; }

/* ---------- utilities ---------- */
.reveal { opacity: 1; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 56px; }
.legal h2 { font-size: 30px; margin-top: 48px; margin-bottom: 0; }
.legal p, .legal li { color: var(--ink-2); max-width: 70ch; }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0 20px; display: grid; gap: 8px; }
.legal a { color: var(--ever); }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
/* symptoms */
.symptoms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; list-style: none; }
.symptoms li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.symptoms .sym { width: 46px; height: 46px; border-radius: 3px; transform: rotate(-4deg); display: grid; place-items: center; box-shadow: 0 8px 14px -8px rgba(23,34,31,.5); }
.symptoms .sym svg { width: 22px; height: 22px; color: var(--ink); }
.symptoms li:nth-child(even) .sym { transform: rotate(5deg); }
.symptoms h3 { font-size: 23px; margin-bottom: 6px; }
.symptoms p { color: var(--ink-2); font-size: 16.5px; }
@media (max-width: 760px) { .symptoms { grid-template-columns: 1fr; } }
.levers { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px; background: var(--white); border-radius: var(--r-lg); }
.levers h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 12px; }
.levers p { font-size: 18px; color: var(--ink-2); max-width: 54ch; }
.lever-stack { display: grid; gap: 8px; }
.lever-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lv { padding: 14px 16px; background: var(--fog); border-radius: 8px; border-top: 3px solid var(--ever); font-family: var(--display); font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.lv span { display: block; font-family: var(--sans); font-weight: 400; color: var(--ink-2); font-size: 14px; letter-spacing: 0; margin-top: 2px; }
.lv.base { background: var(--ever); color: #fff; border-top-color: var(--ever); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lv.base span { color: #CFE7E0; margin: 0; }
@media (max-width: 860px) { .levers { grid-template-columns: 1fr; padding: 28px; } }
@media (max-width: 460px) { .lever-row { grid-template-columns: 1fr; } }

/* imagine: an illustrative operations control centre */
.imagine { background: var(--ever-deep); color: #EAF3F0; overflow: hidden; }
.imagine h2 { max-width: 15ch; }
.imagine .lede { color: #B9D2CA; }
.console-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
@media (max-width: 1080px) { .console-wrap { grid-template-columns: 1fr; } }
.console { background: #F6F8F7; color: var(--ink); border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; font-size: 14px; }
.console-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.console-bar .cb-title { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.console-bar .cb-title svg { width: 22px; height: 22px; }
.console-bar .cb-meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; align-items: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2BA36B; box-shadow: 0 0 0 3px rgba(43,163,107,.2); display: inline-block; margin-right: 6px; }
.console-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
@media (max-width: 760px) { .console-body { grid-template-columns: 1fr; } }
.stack-panels { display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.panel h3 { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel h3 .ph { display: flex; align-items: center; gap: 8px; }
.panel h3 .tag { font-weight: 600; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--ever-tint); color: var(--ever); white-space: nowrap; }
.marker { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--canary); color: var(--ink); font-weight: 700; font-size: 11.5px; flex-shrink: 0; font-style: normal; }
.rows { list-style: none; display: grid; gap: 6px; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 8px; background: var(--fog); font-size: 13.5px; font-weight: 500; }
.rows li .who { color: var(--ink-3); font-size: 12.5px; display: block; font-weight: 400; }
.pill { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: #DDF2E6; color: #1C6A43; }
.pill.go { background: var(--ever-tint); color: var(--ever); }
.pill.wait { background: #FFF1C9; color: #6b5300; }
.route { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.route svg { width: 12px; height: 12px; color: var(--ever); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-2); }
.kv dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.report { border: 1px dashed #b9c4bf; border-radius: 10px; padding: 12px; background: #FCFDFC; margin-top: 12px; }
.report b { display: block; font-size: 13.5px; }
.report span { font-size: 12.5px; color: var(--ink-3); }
.annotations { list-style: none; display: grid; gap: 26px; padding-top: 6px; }
.annotations li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.annotations .marker { width: 26px; height: 26px; font-size: 13px; }
.annotations b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: #fff; line-height: 1.25; margin-bottom: 4px; }
.annotations p { font-size: 15.5px; color: #B9D2CA; }
@media (max-width: 1080px) { .annotations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .annotations { grid-template-columns: 1fr; } }
.illustration-note { margin-top: 24px; font-size: 14.5px; color: #9FC2B7; max-width: 80ch; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillar { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); padding: 30px; }
.pillar .p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pillar .p-glyph { width: 40px; height: 40px; }
.pillar h3 { margin-bottom: 10px; }
.pillar > p, .pillar .ops-left > p { color: var(--ink-2); font-size: 16.5px; }
.pillar ul { list-style: none; margin: 18px 0 0; display: grid; gap: 8px; }
.pillar li { font-size: 15.5px; color: var(--ink-2); padding-left: 16px; position: relative; }
.pillar li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent, var(--ever)); }
.pillar .p-cta { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.pillar .tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--fog); color: var(--ink-2); }
.pillar .text-link { color: var(--accent, var(--ever)); }
.pillar.ops { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 56px; padding: 44px; background: var(--ever); color: #fff; border: 0; }
.pillar.ops h3 { font-size: clamp(36px, 4vw, 52px); }
.pillar.ops .ops-left { display: flex; flex-direction: column; }
.pillar.ops .ops-left > p { color: #D2E9E2; font-size: 18px; }
.pillar.ops .tag { background: var(--canary); color: var(--ink); }
.pillar.ops ul { margin: 0; gap: 0; align-self: center; }
.pillar.ops li { color: #fff; font-size: 16.5px; padding: 13px 0 13px 22px; border-bottom: 1px solid rgba(255,255,255,.16); }
.pillar.ops li:first-child { border-top: 1px solid rgba(255,255,255,.16); }
.pillar.ops li::before { background: var(--canary); top: 1.35em; }
.pillar.ops .btn-gold { background: var(--canary); color: var(--ink); }
.pillar.ops .btn-gold:hover { background: #FFEA9C; }
.pillar.ops .text-link { color: #fff; }
.pillar.think { --accent: #2E7A69; }
.pillar.launch { --accent: #2F6F8F; }
.pillar.network { --accent: #A75C34; }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pillar.ops { grid-template-columns: 1fr; padding: 32px; } .pillar.network { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }

.ecosystem { margin-top: 72px; }
.ecosystem-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.ecosystem-head h3 { font-size: 30px; }
.ecosystem-head p { color: var(--ink-2); font-size: 16.5px; max-width: 50ch; }
.eco-svg { width: 100%; height: auto; }
.eco-list { display: none; list-style: none; counter-reset: eco; gap: 12px; }
.eco-list li { counter-increment: eco; padding: 16px 18px 16px 54px; position: relative; background: #fff; border-radius: var(--r); color: var(--ink-2); font-size: 16px; }
.eco-list li strong { color: var(--ink); display: block; }
.eco-list li::before { content: counter(eco); position: absolute; left: 16px; top: 17px; width: 24px; height: 24px; border-radius: 50%; background: var(--ever); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
@media (max-width: 720px) { .eco-svg { display: none; } .eco-list { display: grid; } }
.flow-dash { stroke-dasharray: 6 8; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }

/* beyond consulting */
.beyond-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .beyond-grid { grid-template-columns: 1fr; } }
.focus-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 28px; }
.focus-list li { border-radius: 999px; padding: 9px 16px; font-size: 15.5px; background: rgba(255,255,255,.07); color: #DDEBE6; border: 1px solid rgba(234,243,240,.16); }
.map-band { margin: 0 0 18px; background: rgba(255,255,255,.04); border-radius: var(--r-lg); padding: 10px; }
.map-band svg { width: 100%; height: auto; }

/* who */
.aud { padding: 30px; }
.aud .a-icon { width: 44px; height: 44px; color: var(--ever); margin-bottom: 18px; }
.aud h3 { font-size: 24px; }
.aud ul { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.aud li { font-size: 15.5px; color: var(--ink-2); padding-left: 16px; position: relative; }
.aud li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--ever); }

/* honest about */
.honest-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
@media (max-width: 900px) { .honest-grid { grid-template-columns: 1fr; gap: 40px; } }
.honest-grid .prose p { color: var(--ink-2); font-size: 18px; }
.verse-card { background: var(--canary); border-radius: 3px; padding: 40px 36px 34px; transform: rotate(1.5deg); box-shadow: 0 26px 40px -26px rgba(23,34,31,.55); max-width: 400px; justify-self: center; }
.verse-card blockquote { font-family: var(--hand); font-weight: 600; font-size: 40px; line-height: 1.02; color: var(--ink); }
.verse-card cite { display: block; margin-top: 16px; font-style: normal; font-weight: 600; font-size: 15px; color: #5a4c12; }
.verse-card p { margin-top: 14px; font-size: 15px; color: #5a4c12; }

/* scale note text with the stage */
.stage .note .n-chaos { font-size: calc(19px * var(--s, 1)); }
.stage .note.k-msg .n-chaos { font-size: calc(12.5px * var(--s, 1)); }
.stage .note.k-msg .n-chaos small { font-size: calc(10.5px * var(--s, 1)); }
.stage .note.k-file .n-chaos { font-size: calc(12px * var(--s, 1)); }
.stage .note .n-order { font-size: calc(12.5px * var(--s, 1)); }
/* mark on dark backgrounds */
.site-footer .brand svg rect:not(:last-child) { fill: var(--mint); }

.stage.narrow .note .n-order { white-space: normal; line-height: 1.12; padding: 0 6px 0 7px; font-size: 10.5px; }
.stage.narrow .note .n-order em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stage.narrow .col-head { font-size: 13.5px; gap: 6px; }
.stage.narrow .col-head i { width: 7px; height: 7px; }

.is-organized .scroll-cue { visibility: hidden; }

/* inner-page hero: the brand structure, drawn large */
@media (min-width: 1100px) {
  .page-hero::after {
    content: ''; position: absolute; right: max(40px, calc((100vw - var(--w)) / 2 + 24px)); top: 50%; transform: translateY(-46%);
    width: 300px; height: 300px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect x='10' y='238' width='280' height='34' rx='12' fill='%230E5C50'/%3E%3Crect x='30' y='128' width='62' height='96' rx='12' fill='%23DDEEE8'/%3E%3Crect x='119' y='58' width='62' height='166' rx='12' fill='%23DDEEE8'/%3E%3Crect x='208' y='128' width='62' height='96' rx='12' fill='%23DDEEE8'/%3E%3Crect x='212' y='42' width='54' height='54' rx='6' fill='%23FFE27A' transform='rotate(12 239 69)'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .page-hero .wrap > * { max-width: min(760px, 62%); }
  .page-hero .wrap > h1 { max-width: min(17ch, 62%); }
}

/* ==========================================================================
   Project pages: each project keeps its own accent inside the system
   ========================================================================== */
.crumbs { font-size: 15px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--ink); }
.proj-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.proj-tag svg { width: 16px; height: 16px; }

/* ---------- Sojourn ---------- */
.sojourn { --sea: #0B5873; --sea-deep: #073646; --sand: #F3DDB0; --sun: #FFB547; --foam: #E7F4F8; }
.sj-hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; color: #fff; background: var(--sea-deep); overflow: hidden; padding-block: 0 88px; }
.sj-hero .bg, .sj-photo .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sj-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,54,70,.25) 0%, rgba(7,54,70,.35) 40%, rgba(7,54,70,.92) 100%); }
.sj-hero .wrap { position: relative; z-index: 1; width: 100%; }
.sj-hero .kicker { font-weight: 600; font-size: 16px; color: var(--sand); margin: 22px 0 10px; display: block; }
.sj-hero h1 { font-size: clamp(56px, 10vw, 148px); line-height: .92; letter-spacing: -0.04em; max-width: 9ch; }
.sj-hero .lede { color: #E3EEF1; margin: 26px 0 34px; max-width: 54ch; }
.sojourn .btn-gold { background: var(--sun); color: var(--ink); }
.sojourn .btn-gold:hover { background: #FFC56E; }
.sj-hero .btn-ghost, .sj-band .btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.sj-hero .btn-ghost:hover, .sj-band .btn-ghost:hover { background: #fff; color: var(--sea-deep); }
.sj-ticker { background: var(--sun); color: var(--ink); overflow: hidden; white-space: nowrap; padding-block: 14px; }
.sj-ticker div { display: inline-block; font-family: var(--display); font-weight: 650; font-size: 22px; letter-spacing: -0.01em; animation: ticker 38s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sj-ticker div { animation: none; } }
.sj-statement { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.sj-statement em { font-style: normal; color: var(--sea); }
.sj-quote { margin-top: 26px; font-size: 19px; color: var(--ink-2); max-width: 56ch; }
.sj-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .sj-three { grid-template-columns: 1fr; } }
.sj-three article { border-radius: var(--r-lg); padding: 32px; background: var(--foam); }
.sj-three article:nth-child(2) { background: var(--sand); }
.sj-three article:nth-child(3) { background: #DDEEE8; }
.sj-three .lbl { font-weight: 600; font-size: 15px; color: var(--sea); }
.sj-three h3 { font-size: clamp(30px, 3vw, 40px); margin: 10px 0 12px; }
.sj-three p { color: var(--ink-2); font-size: 16.5px; }
.sj-photo { position: relative; min-height: 560px; display: flex; align-items: flex-end; color: #fff; background: var(--sea); overflow: hidden; padding-block: 72px; }
.sj-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,54,70,.88) 0%, rgba(7,54,70,.55) 55%, rgba(7,54,70,.1) 100%); }
.sj-photo .wrap { position: relative; z-index: 1; width: 100%; }
.sj-photo h2 { max-width: 12ch; }
.sj-photo p { color: #DCEAEE; max-width: 52ch; font-size: 18px; }
.sj-photo .big { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--sun); margin-bottom: 14px; }
.sj-phases { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--sea); }
.sj-phases li { padding: 22px 24px 0 0; position: relative; }
.sj-phases li::before { content: ''; position: absolute; top: -10px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--sea); }
.sj-phases li:last-child::before { background: var(--sun); }
.sj-phases .ph { font-weight: 600; font-size: 14.5px; color: var(--sea); }
.sj-phases h3 { font-size: 30px; margin: 6px 0 8px; }
.sj-phases p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .sj-phases { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 520px) { .sj-phases { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--sea); padding-left: 22px; } .sj-phases li::before { left: -32px; top: 26px; } }
.sj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.25); }
.sj-stats div { padding: 22px 18px 0 0; }
.sj-stats b { display: block; font-family: var(--display); font-weight: 650; font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; color: var(--sun); line-height: 1; }
.sj-stats span { font-size: 14.5px; color: #DCEAEE; }
@media (max-width: 700px) { .sj-stats { grid-template-columns: 1fr 1fr; row-gap: 18px; } }
.sj-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 600px) { .sj-benefits { grid-template-columns: 1fr; } }
.sj-benefits div { background: #fff; border-radius: var(--r); padding: 22px; border-top: 3px solid var(--sea); }
.sj-benefits b { display: block; font-family: var(--display); font-weight: 650; font-size: 20px; letter-spacing: -0.01em; margin-bottom: 4px; }
.sj-benefits span { color: var(--ink-2); font-size: 16px; }
.sj-pull { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.015em; color: var(--sea-deep); border-left: 4px solid var(--sun); padding-left: 22px; margin-top: 32px; }
.sj-route { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .sj-route { grid-template-columns: 1fr 1fr; } }
.sj-route li { border-radius: var(--r); padding: 20px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.3); }
.sj-route li.now { background: var(--sun); color: var(--ink); border: 0; }
.sj-route b { font-family: var(--display); font-weight: 650; font-size: 21px; letter-spacing: -0.01em; display: block; }
.sj-route span { font-size: 14px; opacity: .85; }
.sj-band { background: var(--sea-deep); color: #EAF3F5; }
.sj-band .lede, .sj-band p { color: #BFD7DE; }
.sj-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .sj-ways { grid-template-columns: 1fr; } }
.sj-way { border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: box-shadow .15s ease; }
.sj-way:hover { box-shadow: 0 14px 34px -20px rgba(7,54,70,.6); }
.sj-way .ph-wrap { aspect-ratio: 16 / 10; background: var(--foam); overflow: hidden; }
.sj-way img { width: 100%; height: 100%; object-fit: cover; }
.sj-way div.body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sj-way .lbl { font-weight: 600; font-size: 14.5px; color: var(--sea); }
.sj-way h3 { font-size: 26px; }
.sj-way p { color: var(--ink-2); font-size: 16px; flex: 1; }
.sj-way .text-link { color: var(--sea); margin-top: 6px; }
.sj-final { position: relative; text-align: center; color: #fff; background: var(--sea); overflow: hidden; padding-block: 140px; }
.sj-final::after { content: ''; position: absolute; inset: 0; background: rgba(7,54,70,.6); }
.sj-final .wrap { position: relative; z-index: 1; }
.sj-final h2 { font-size: clamp(64px, 10vw, 140px); letter-spacing: -0.04em; margin-bottom: 18px; }
.sj-final p { color: #E3EEF1; max-width: 52ch; margin: 0 auto 32px; font-size: 19px; }
.sj-final .btn-row { justify-content: center; }
.sj-final .btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.sj-final .btn-ghost:hover { background: #fff; color: var(--sea-deep); }
.sj-final .verse { margin-top: 40px; font-size: 15.5px; color: #CFE2E8; }
.proj-note { font-size: 14.5px; color: var(--ink-2); max-width: 90ch; }

/* ---------- Anchor ---------- */
.anchor { --trail: #2F6F8F; --trail-deep: #1D4B62; --cedar: #9C5B2E; --moss: #E3EEE6; --mist: #EAF2F6; }
.an-hero { background: var(--white); padding-block: 88px 72px; border-bottom: 1px solid var(--line); overflow: hidden; }
.an-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
@media (max-width: 960px) { .an-hero-grid { grid-template-columns: 1fr; } }
.an-hero h1 { font-size: clamp(44px, 6vw, 82px); margin: 20px 0 22px; }
.an-hero .lede { max-width: 56ch; }
.an-hero .btn-gold, .anchor .btn-gold { background: var(--trail); }
.an-hero .btn-gold:hover, .anchor .btn-gold:hover { background: var(--trail-deep); }
.an-coords { margin-top: 28px; font-size: 14.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.an-route svg { width: 100%; height: auto; }
.an-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .an-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .an-stats { grid-template-columns: 1fr; } }
.an-stat b { display: block; font-family: var(--display); font-weight: 650; font-size: clamp(38px, 4vw, 54px); letter-spacing: -0.03em; color: var(--trail); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.an-stat p { font-size: 15px; color: var(--ink-2); }
.waypoint { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--trail); margin-bottom: 14px; }
.waypoint::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--trail); background: #fff; }
.deep .waypoint, .an-dark .waypoint { color: var(--mint); }
.deep .waypoint::before, .an-dark .waypoint::before { border-color: var(--mint); background: transparent; }
.an-dark { background: var(--trail-deep); color: #EAF2F6; }
.an-dark p, .an-dark .lede { color: #C3D7E2; }
.an-big { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.015em; border-left: 4px solid var(--cedar); padding-left: 22px; margin: 28px 0; color: var(--ink); }
.an-research { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
@media (max-width: 760px) { .an-research { grid-template-columns: 1fr; } }
.an-research div { background: rgba(255,255,255,.07); border-radius: var(--r); padding: 22px; }
.an-research b { display: block; font-size: 13.5px; font-weight: 600; color: var(--mint); margin-bottom: 6px; }
.an-research p { font-size: 16px; color: #DCE8EE; }
.an-legs { list-style: none; display: grid; gap: 0; border-left: 3px solid var(--trail); margin-left: 8px; }
.an-legs li { padding: 0 0 40px 34px; position: relative; }
.an-legs li:last-child { padding-bottom: 0; }
.an-legs li::before { content: ''; position: absolute; left: -11px; top: 4px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 3px solid var(--trail); }
.an-legs .leg { font-weight: 600; font-size: 14.5px; color: var(--trail); }
.an-legs h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 4px 0 10px; }
.an-legs p { color: var(--ink-2); max-width: 70ch; }
.an-legs .why { margin-top: 12px; font-size: 15px; background: var(--mist); border-radius: 8px; padding: 10px 14px; color: var(--trail-deep); max-width: 70ch; }
.an-legs .why b { font-weight: 600; }
.an-rope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; }
@media (max-width: 900px) { .an-rope { grid-template-columns: 1fr; } }
.an-rope > div { padding: 30px; }
.an-rope > div + div { border-left: 1px solid var(--line); }
@media (max-width: 900px) { .an-rope > div + div { border-left: 0; border-top: 1px solid var(--line); } }
.an-rope > div.mid { background: var(--mist); }
.an-rope .lbl { font-weight: 600; font-size: 14px; color: var(--trail); }
.an-rope h3 { font-size: 24px; margin: 6px 0 4px; }
.an-rope .sub { color: var(--ink-2); font-size: 15.5px; margin-bottom: 14px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; border-radius: var(--r); overflow: hidden; }
.an-table th, .an-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.an-table th { font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--fog); }
.an-table td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); }
.draft-tag { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: #FFF1C9; color: #6b5300; margin-bottom: 14px; }
.an-path { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .an-path { grid-template-columns: 1fr; } }
.an-path li { background: #fff; border-radius: var(--r); padding: 26px; border-top: 4px solid var(--line); }
.an-path li.now { border-top-color: var(--cedar); }
.an-path li.goal { border-top-color: var(--trail); }
.an-path .when { font-weight: 600; font-size: 14.5px; color: var(--cedar); }
.an-path li.goal .when { color: var(--trail); }
.an-path h3 { font-size: 24px; margin: 6px 0 8px; }
.an-path p { color: var(--ink-2); font-size: 16px; }
.sources { font-size: 14px; color: var(--ink-2); }
.sources li { margin-top: 6px; }
.sources ul { margin-left: 18px; }

.an-dark .card { background: rgba(255,255,255,.06); border-color: rgba(234,242,246,.16); }
.an-dark .card p { color: #C3D7E2; }
.an-dark .card .num { color: var(--mint); }
.an-dark :focus-visible, .sj-hero :focus-visible, .sj-photo :focus-visible, .sj-band :focus-visible, .sj-final :focus-visible { outline-color: var(--canary); }

/* ==========================================================================
   STUDIO MODE: the edgy side of the brand (Home and Media)
   Same family: evergreen ink instead of white, canary as the signal colour,
   type pushed to poster scale, a little film grain.
   ========================================================================== */
:root { --studio: #0F1715; --studio-2: #16211E; --studio-line: rgba(242,245,243,.12); --studio-ink: #F2F5F3; --studio-dim: #A9B8B2; }
.studio { background: var(--studio); color: var(--studio-ink); position: relative; overflow: hidden; }
.studio::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.studio > .wrap { position: relative; z-index: 1; }
.studio .lede, .studio p { color: var(--studio-dim); }
.studio h2, .studio h3 { color: var(--studio-ink); }
.studio .eyebrow { color: var(--canary); }
.studio .btn-gold { background: var(--canary); color: var(--ink); }
.studio .btn-gold:hover { background: #FFEA9C; }
.studio .btn-ghost { border-color: rgba(242,245,243,.4); color: var(--studio-ink); }
.studio .btn-ghost:hover { background: var(--studio-ink); color: var(--studio); }
.studio .text-link { color: var(--canary); }
.studio :focus-visible { outline-color: var(--canary); }
.studio .status-pill { background: rgba(255,255,255,.06); border-color: var(--studio-line); color: var(--studio-ink); }
.studio .status-pill::before { background: var(--canary); box-shadow: 0 0 0 4px rgba(255,226,122,.18); }
.studio .status-pill b { color: var(--studio-dim); border-left-color: var(--studio-line); }
.studio .card { background: var(--studio-2); border-color: var(--studio-line); }
.studio .card p, .studio .card li { color: var(--studio-dim); }
.studio .check-list li { color: var(--studio-dim); }
.studio .check-list li::before { background: rgba(255,226,122,.16); }
.studio .check-list li::after { border-color: var(--canary); }

/* dark header on studio pages */
.studio-page .site-header { background: rgba(15,23,21,.9); border-bottom-color: var(--studio-line); }
.studio-page .brand { color: var(--studio-ink); }
.studio-page .brand svg rect:not(:last-child) { fill: var(--mint); }
.studio-page .nav-links a { color: var(--studio-dim); }
.studio-page .nav-links a:hover, .studio-page .nav-links a[aria-current="page"] { color: var(--studio-ink); }
.studio-page .nav-links a[aria-current="page"] { border-bottom-color: var(--canary); }
.studio-page .nav-ctas .btn-gold { background: var(--canary); color: var(--ink); }
.studio-page .nav-toggle { color: var(--studio-ink); border-color: var(--studio-line); }
.studio-page .mobile-menu { background: var(--studio); border-top-color: var(--studio-line); }
.studio-page .mobile-menu li a { color: var(--studio-ink); border-bottom-color: var(--studio-line); }
.studio-page .mobile-menu .btn-gold { background: var(--canary); color: var(--ink); }
.studio-page .mobile-menu .btn-ghost { border-color: rgba(242,245,243,.4); color: var(--studio-ink); }
.studio-page .site-header :focus-visible { outline-color: var(--canary); }

/* nav now has six tabs: collapse a little earlier */
.nav-links { gap: 24px; }
@media (max-width: 1180px) { .nav-links { gap: 18px; } .nav-links a { font-size: 15px; } }
@media (max-width: 1060px) {
  .nav-links, .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; border-top: 1px solid var(--line); background: #fff; padding: 8px 0 28px; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu > nav { max-width: var(--w); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .mobile-menu ul { list-style: none; }
  .mobile-menu li a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .mobile-menu li a[aria-current="page"] { color: var(--ever); }
  .mobile-menu .btn-row { margin-top: 22px; flex-direction: column; align-items: stretch; }
}

/* ---------- HOME ---------- */
.home-hero { padding-block: 104px 120px; }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.home-hero h1 { font-size: clamp(54px, 9.4vw, 148px); font-weight: 760; line-height: .9; letter-spacing: -0.045em; }
.home-hero h1 span { display: block; }
.home-hero h1 .l3 { color: var(--canary); }
.home-hero .lede { margin-top: 36px; max-width: 58ch; color: #C4D1CC; }
.home-hero .btn-row { margin-top: 34px; }
.hero-note-card { background: var(--canary); color: var(--ink); width: 250px; padding: 26px 24px 22px; border-radius: 3px; transform: rotate(4deg); box-shadow: 0 30px 50px -24px rgba(0,0,0,.7); margin-bottom: 24px; }
.hero-note-card b { display: block; font-family: var(--hand); font-weight: 600; font-size: 38px; line-height: .98; }
.hero-note-card span { display: block; margin-top: 12px; font-size: 14.5px; color: #5a4c12; }
@media (max-width: 860px) { .home-hero .wrap { grid-template-columns: 1fr; } .hero-note-card { transform: rotate(-3deg); justify-self: start; } }

/* six ways in: an index, not a card grid */
.ways { list-style: none; border-top: 1px solid var(--studio-line); }
.ways li { border-bottom: 1px solid var(--studio-line); }
.way { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 200px; gap: 32px; align-items: center; padding: 30px 20px; margin: 0 -20px; text-decoration: none; color: var(--studio-ink); border-radius: 14px; transition: background .2s ease, color .2s ease; }
.way h3 { font-size: clamp(36px, 5vw, 72px); font-weight: 720; letter-spacing: -0.035em; line-height: 1; }
.way p { color: var(--studio-dim); font-size: 17px; max-width: 46ch; }
.way .w-tag { justify-self: end; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--studio-line); color: var(--studio-ink); white-space: nowrap; }
.way:hover, .way:focus-visible { background: var(--way, var(--canary)); color: var(--ink); }
.way:hover h3, .way:focus-visible h3 { color: var(--ink); }
.way:hover p, .way:focus-visible p { color: rgba(23,34,31,.8); }
.way:hover .w-tag, .way:focus-visible .w-tag { border-color: rgba(23,34,31,.3); color: var(--ink); }
.way.w-ops { --way: var(--mint); } .way.w-media { --way: var(--canary); } .way.w-proj { --way: var(--sky); }
.way.w-think { --way: #B8E2D3; } .way.w-creators { --way: var(--peach); } .way.w-store { --way: var(--lilac); }
@media (max-width: 860px) { .way { grid-template-columns: 1fr; gap: 10px; padding: 24px 16px; margin: 0 -16px; } .way .w-tag { justify-self: start; } }

/* the organization, drawn like the mark */
.org { display: grid; gap: 12px; }
.org .roof, .org .base { border-radius: 14px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; text-decoration: none; }
.org .roof { background: var(--lilac); color: var(--ink); }
.org .base { background: var(--ever); color: #fff; }
.org .base span { color: #CFE7E0; }
.org b { font-family: var(--display); font-weight: 680; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
.org span { font-size: 15.5px; color: var(--ink-2); }
.org .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.org .col { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px 30px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-decoration: none; color: var(--ink); border-top: 5px solid var(--c, var(--ever)); transition: transform .15s ease, box-shadow .15s ease; }
.org .col:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(23,34,31,.5); }
.org .col span { font-size: 15px; }
.org a.roof:hover, .org a.base:hover { filter: brightness(.97); }
@media (max-width: 860px) { .org .cols { grid-template-columns: 1fr 1fr; } .org .col { min-height: 160px; } }
@media (max-width: 480px) { .org .cols { grid-template-columns: 1fr; } }

/* ops spotlight on home */
.spot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .spot { grid-template-columns: 1fr; } }
.mini-board { background: var(--fog); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 8px; }
.mini-board .mb-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-board .mb { background: #fff; border-left: 3px solid var(--ever); border-radius: 6px; padding: 9px 11px; font-size: 13.5px; font-weight: 600; }
.mini-board .mb-band { border-radius: 8px; padding: 10px 14px; font-family: var(--display); font-weight: 650; font-size: 15px; }
.mini-board .mb-band.p { background: var(--canary); }
.mini-board .mb-band.s { background: var(--ever); color: #fff; }
.mini-board .mb-head { font-family: var(--display); font-weight: 650; color: var(--ever); font-size: 14.5px; padding: 4px 2px 0; }
@media (max-width: 520px) { .mini-board .mb { font-size: 11.5px; padding: 8px; } }

.home-final h2 { font-size: clamp(48px, 8vw, 120px); font-weight: 760; letter-spacing: -0.045em; line-height: .92; max-width: 12ch; margin-bottom: 30px; }
.home-paths { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-paths a { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 14px; background: var(--studio-2); border: 1px solid var(--studio-line); text-decoration: none; color: var(--studio-ink); transition: border-color .15s ease, background .15s ease; }
.home-paths a:hover { border-color: var(--canary); background: #1B2824; }
.home-paths .k { font-size: 14px; color: var(--studio-dim); }
.home-paths strong { font-family: var(--display); font-weight: 650; font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; }
@media (max-width: 860px) { .home-paths { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .home-paths { grid-template-columns: 1fr; } }

/* ---------- MEDIA ---------- */
.media-hero { padding-block: 96px 0; }
.media-hero h1 { font-size: clamp(58px, 11vw, 172px); font-weight: 780; line-height: .86; letter-spacing: -0.05em; margin: 26px 0 0; }
.media-hero h1 span { display: block; }
.media-hero h1 span:nth-child(2) { color: var(--canary); }
.media-hero h1 span:nth-child(3) { color: var(--studio-ink); background: repeating-linear-gradient(180deg, var(--studio-ink) 0 .03em, transparent .03em .055em); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.media-hero .hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-top: 40px; }
.media-hero .lede { color: #C4D1CC; max-width: 56ch; }
@media (max-width: 860px) { .media-hero .hero-foot { grid-template-columns: 1fr; } }
.meters { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 72px; }
.meters i { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: var(--mint); height: var(--h, 40%); transform-origin: bottom; animation: meter var(--d, 1.2s) ease-in-out infinite alternate; opacity: .9; }
.meters i:nth-child(3n) { background: var(--canary); }
.meters i:nth-child(7n) { background: var(--lilac); }
.meters i:nth-child(11n) { background: var(--rose); }
@keyframes meter { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .meters i { animation: none; } }
.studio-ticker { background: var(--canary); color: var(--ink); overflow: hidden; white-space: nowrap; padding-block: 16px; position: relative; z-index: 1; }
.studio-ticker div { display: inline-block; font-family: var(--display); font-weight: 720; font-size: 26px; letter-spacing: -0.02em; animation: ticker 40s linear infinite; }
@media (prefers-reduced-motion: reduce) { .studio-ticker div { animation: none; } }
.makes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--studio-line); border: 1px solid var(--studio-line); border-radius: 18px; overflow: hidden; }
.makes article { background: var(--studio); padding: 34px 30px; display: flex; flex-direction: column; gap: 10px; transition: background .2s ease; }
.makes article:hover { background: var(--studio-2); }
.makes svg { width: 40px; height: 40px; margin-bottom: 8px; }
.makes h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; }
.makes ul { list-style: none; display: grid; gap: 5px; margin-top: 6px; }
.makes li { font-size: 15.5px; color: var(--studio-dim); padding-left: 16px; position: relative; }
.makes li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 2px; background: var(--canary); }
@media (max-width: 960px) { .makes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .makes { grid-template-columns: 1fr; } }

/* demo to release, drawn as a session arrangement */
.session { border: 1px solid var(--studio-line); border-radius: 18px; overflow: hidden; background: var(--studio-2); }
.session-ruler { display: grid; grid-template-columns: 150px repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--studio-line); font-size: 12.5px; color: var(--studio-dim); font-variant-numeric: tabular-nums; }
.session-ruler span { padding: 8px 6px; border-left: 1px solid var(--studio-line); }
.session-ruler span:first-child { border-left: 0; padding-left: 16px; }
.lane { display: grid; grid-template-columns: 150px repeat(12, minmax(0, 1fr)); align-items: stretch; min-height: 92px; border-bottom: 1px solid var(--studio-line); background-image: linear-gradient(90deg, transparent 149px, var(--studio-line) 149px, var(--studio-line) 150px, transparent 150px); }
.lane:last-child { border-bottom: 0; }
.lane .lane-name { padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--studio-ink); display: flex; flex-direction: column; justify-content: center; gap: 2px; border-right: 1px solid var(--studio-line); }
.lane .lane-name small { font-weight: 400; color: var(--studio-dim); font-size: 12.5px; }
.clip { margin: 10px 4px; border-radius: 8px; padding: 10px 12px; color: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 2px; grid-column: var(--from) / var(--to); min-width: 0; }
.clip b { font-family: var(--display); font-weight: 680; font-size: 17px; letter-spacing: -0.01em; line-height: 1.15; }
.clip span { font-size: 13px; color: rgba(23,34,31,.75); line-height: 1.3; }
.clip.c1 { background: var(--sky); } .clip.c2 { background: var(--mint); } .clip.c3 { background: var(--canary); }
.clip.c4 { background: var(--lilac); } .clip.c5 { background: var(--peach); } .clip.c6 { background: var(--rose); }
@media (max-width: 900px) {
  .session-ruler { display: none; }
  .lane { grid-template-columns: 1fr; background-image: none; min-height: 0; }
  .lane .lane-name { border-right: 0; padding-bottom: 0; }
  .clip { grid-column: 1 / -1; margin: 8px 16px 14px; }
}

.own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--studio-line); }
.own div { padding: 28px 28px 0 0; }
.own div + div { padding-left: 28px; border-left: 1px solid var(--studio-line); }
.own b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.03em; color: var(--canary); line-height: 1; margin-bottom: 10px; }
@media (max-width: 760px) { .own { grid-template-columns: 1fr; } .own div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--studio-line); } .own div { padding-bottom: 24px; } }
.roster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .roster { grid-template-columns: 1fr; } }
.roster-card { background: var(--studio-2); border: 1px dashed rgba(242,245,243,.25); border-radius: 18px; padding: 34px; }
.roster-card h3 { font-size: 26px; margin-bottom: 10px; }
.for-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.for-grid div { border-radius: 14px; padding: 22px 18px; background: var(--studio-2); border: 1px solid var(--studio-line); }
.for-grid b { display: block; font-family: var(--display); font-weight: 650; font-size: 20px; letter-spacing: -0.015em; color: var(--studio-ink); margin-bottom: 6px; line-height: 1.15; }
.for-grid span { font-size: 14.5px; color: var(--studio-dim); }
@media (max-width: 1000px) { .for-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .for-grid { grid-template-columns: 1fr; } }
.psalm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 760px) { .psalm { grid-template-columns: 1fr; } }
.psalm .verse-card { transform: rotate(-3deg); max-width: 340px; }
.shelf-empty { border: 2px dashed var(--studio-line); border-radius: 18px; padding: 48px 32px; text-align: center; }
.shelf-empty h3 { font-size: 30px; margin-bottom: 8px; }
.shelf-empty p { max-width: 54ch; margin: 0 auto; }
.shelf-empty .btn-row { justify-content: center; margin-top: 22px; }

/* ---------- STORE: clean and upscale ---------- */
.store-hero { padding-block: 96px 64px; background: var(--white); }
.store-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.store-hero h1 { font-size: clamp(46px, 6.4vw, 92px); letter-spacing: -0.04em; margin: 18px 0 18px; }
.store-hero .lede { max-width: 54ch; }
@media (max-width: 860px) { .store-hero .wrap { grid-template-columns: 1fr; } }
.shelf-types { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.shelf-types button { font: 600 15px var(--sans); padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.shelf-types button:hover { border-color: var(--ink); }
.shelf-types button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.store-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.store-bar .search { position: relative; flex: 0 1 320px; }
.store-bar .search input { padding-left: 40px; background: var(--fog); }
.store-bar .search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin-top: 44px; }
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }
.product { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.product[hidden] { display: none; }
.product .p-cover { margin-bottom: 12px; transition: transform .25s ease, box-shadow .25s ease; }
.product:hover .p-cover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(23,34,31,.55); }
.product .p-meta { font-size: 13.5px; color: var(--ink-3); }
.product h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.product .p-by { font-size: 14.5px; color: var(--ink-2); }
.product .p-price { font-weight: 600; font-size: 15.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.p-cover { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--cv, var(--fog)); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; box-shadow: 0 1px 0 rgba(23,34,31,.06), 0 10px 24px -20px rgba(23,34,31,.5); }
.p-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-cover .cv-type { font-size: 12.5px; font-weight: 600; opacity: .75; position: relative; }
.p-cover .cv-title { font-family: var(--display); font-weight: 720; font-size: clamp(18px, 2vw, 26px); line-height: 1.02; letter-spacing: -0.03em; position: relative; }
.p-cover .cv-by { font-size: 12.5px; opacity: .8; margin-top: 8px; position: relative; }
.p-cover .cv-mark { position: absolute; right: 16px; top: 16px; width: 22px; height: 22px; opacity: .85; }
.p-cover.t-curriculum { --cv: var(--mint); } .p-cover.t-book { --cv: var(--peach); } .p-cover.t-music { --cv: var(--ink); color: #F2F5F3; }
.p-cover.t-course { --cv: var(--sky); } .p-cover.t-resource { --cv: var(--canary); }
.p-cover.lg { border-radius: 10px; padding: 32px; }
.p-cover.lg .cv-title { font-size: clamp(30px, 4vw, 52px); }
.sample-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #FFE9E4; color: #8A2F1C; align-self: flex-start; }
.store-empty { text-align: center; padding: 72px 24px; }
.store-empty h2 { font-size: clamp(30px, 3.6vw, 44px); }
.store-empty p { color: var(--ink-2); max-width: 52ch; margin: 0 auto; }
.store-empty .ghost-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto 44px; }
.store-empty .ghost-shelf .p-cover { box-shadow: none; opacity: .9; }
@media (max-width: 600px) { .store-empty .ghost-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } .store-empty .ghost-shelf .p-cover:nth-child(n+4) { display: none; } }
.store-empty .btn-row { justify-content: center; margin-top: 28px; }
.sell-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .sell-band { grid-template-columns: 1fr; } }
.store-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.store-trust b { display: block; font-family: var(--display); font-weight: 650; font-size: 20px; letter-spacing: -0.015em; margin-bottom: 6px; }
.store-trust p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 760px) { .store-trust { grid-template-columns: 1fr; } }
.product-page { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
@media (max-width: 860px) { .product-page { grid-template-columns: 1fr; gap: 32px; } }
.product-page h1 { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.035em; margin: 10px 0 10px; }
.product-page .p-price-lg { font-family: var(--display); font-weight: 650; font-size: 30px; letter-spacing: -0.02em; margin: 18px 0 20px; font-variant-numeric: tabular-nums; }
.product-page .checkout-note { font-size: 14.5px; color: var(--ink-2); margin-top: 12px; }
.spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; }
.spec dt { color: var(--ink-3); }
.spec dd { font-weight: 500; }

@media (max-width: 600px) { .media-hero h1 span:nth-child(3) { background: none; -webkit-text-fill-color: var(--mint); color: var(--mint); } }
.ghost-shelf .p-cover { padding: 12px; }
.ghost-shelf .cv-type, .ghost-shelf .cv-mark { display: none; }
.ghost-shelf .cv-title { font-size: 16px; overflow-wrap: anywhere; }

/* ---------- CREATORS (studio) ---------- */
.cr-hero { padding-block: 96px 88px; }
.cr-hero h1 { font-size: clamp(54px, 9vw, 140px); font-weight: 780; line-height: .9; letter-spacing: -0.045em; margin-top: 26px; }
.cr-hero h1 span { display: block; }
.cr-hero h1 span:nth-child(2) { color: var(--peach); }
.cr-hero .hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-top: 40px; }
.cr-hero .lede { color: #C4D1CC; max-width: 58ch; }
@media (max-width: 900px) { .cr-hero .hero-foot { grid-template-columns: 1fr; } }
.founding-band { background: var(--canary); color: var(--ink); }
.founding-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; padding-block: 22px; }
.founding-band p { font-size: 18px; max-width: 80ch; }
.founding-band b { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.founding-band .btn { background: var(--ink); color: #fff; }
.founding-band .btn:hover { background: #000; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; max-width: 560px; } }
.tier { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 28px; border-radius: 18px; background: var(--studio-2); border: 1px solid var(--studio-line); }
.tier h3 { font-size: 30px; font-weight: 720; }
.tier .t-for { font-size: 15.5px; }
.tier .t-price { margin: 10px 0 8px; padding-bottom: 18px; border-bottom: 1px solid var(--studio-line); }
.tier .t-price b { display: block; font-family: var(--display); font-weight: 760; font-size: 56px; letter-spacing: -0.04em; line-height: 1; color: var(--studio-ink); }
.tier .t-price span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--studio-dim); font-variant-numeric: tabular-nums; }
.tier .check-list { margin-bottom: 22px; }
.tier .check-list li { font-size: 15.5px; }
.tier .btn { margin-top: auto; }
.tier.featured { background: #1D2B27; border: 2px solid var(--canary); }
.tier .t-flag { position: absolute; top: -13px; left: 28px; background: var(--canary); color: var(--ink); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.founding-terms { margin-top: 28px; padding: 28px 30px; border-radius: 18px; border: 1px dashed rgba(255,226,122,.45); }
.founding-terms h3 { font-size: 22px; margin-bottom: 14px; }
.founding-terms ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: ft; }
.founding-terms li { counter-increment: ft; color: var(--studio-dim); font-size: 15.5px; position: relative; padding-left: 38px; }
.founding-terms li::before { content: counter(ft); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--canary); color: var(--ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.founding-terms b { color: var(--studio-ink); display: block; }
@media (max-width: 860px) { .founding-terms ol { grid-template-columns: 1fr; } }

/* directory, listings and forms on dark */
.studio .dir-tools { background: var(--studio-2); border-color: var(--studio-line); }
.studio label, .studio .label { color: var(--studio-ink); }
.studio input[type=search], .studio select { background: var(--studio); color: var(--studio-ink); border-color: var(--studio-line); }
.studio input::placeholder { color: #7E8E88; }
.studio input:focus, .studio select:focus { background: #0B1210; border-color: var(--canary); box-shadow: 0 0 0 4px rgba(255,226,122,.18); }
.studio .dir-meta { color: var(--studio-dim); }
.studio .dir-meta button { color: var(--canary); }
.studio .member-card { background: var(--studio-2); border-color: var(--studio-line); color: var(--studio-ink); }
.studio .member-card:hover { border-color: var(--peach); box-shadow: none; }
.studio .member-card .biz, .studio .member-card .headline, .studio .member-card .m-meta, .studio .cat-chip { color: var(--studio-dim); }
.studio .member-card .m-foot { border-top-color: var(--studio-line); }
.studio .avatar { background: rgba(252,212,169,.14); color: var(--peach); }
.studio .empty-state { background: transparent; border-color: var(--studio-line); }
.studio .empty-state p { color: var(--studio-dim); }
.studio .notice { background: rgba(255,255,255,.04); color: var(--studio-dim); }
.studio .notice strong { color: var(--studio-ink); }
.studio .badge { background: rgba(255,255,255,.08); color: var(--studio-ink); }
.studio .badge.vetted { background: rgba(147,215,196,.16); color: var(--mint); }
.studio .badge.partner { background: rgba(255,226,122,.14); color: var(--canary); }
.studio .muted { color: var(--studio-dim); }
.studio-page.pg-creators .nav-links a[aria-current="page"] { border-bottom-color: var(--peach); }

/* tier choice on the application form */
.tier-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .tier-choice { grid-template-columns: 1fr; } }
.tier-choice .choice { flex-direction: column; gap: 4px; align-items: flex-start; padding: 16px; }
.tier-choice .choice b { font-family: var(--display); font-weight: 680; font-size: 19px; letter-spacing: -0.01em; display: flex; gap: 10px; align-items: center; }
.tier-choice .choice small { color: var(--ink-2); font-size: 14px; }
.tier-choice .choice .free { font-size: 12px; font-weight: 700; color: var(--ever); background: var(--ever-tint); padding: 2px 8px; border-radius: 6px; }
.founding-note { display: flex; gap: 14px; align-items: flex-start; background: #FFF6CF; border-radius: var(--r); padding: 18px 20px; margin-bottom: 28px; color: var(--ink); font-size: 16px; }
.founding-note b { font-family: var(--display); font-weight: 700; }

/* ==========================================================================
   SPLIT NAV: Build (clean business side) | Create (edge creative side)
   The same two-part switch appears on every page, so moving between the
   light and dark styles feels like flipping a side, not changing sites.
   ========================================================================== */
.nav-split { display: flex; align-items: stretch; border-radius: 999px; padding: 4px; background: var(--fog); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(23,34,31,.04); }
.nav-split ul { display: flex; align-items: center; gap: 2px; list-style: none; }
.seg { display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 4px 3px 14px; transition: background .25s ease, box-shadow .25s ease; }
.seg-label { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; padding-right: 4px; }
.seg a { display: block; padding: 7px 12px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.seg-build { background: #fff; box-shadow: 0 1px 2px rgba(23,34,31,.08), 0 0 0 1px var(--line); }
.seg-build .seg-label { color: var(--ever); }
.seg-build a { color: var(--ink-2); }
.seg-build a:hover { background: var(--fog); color: var(--ink); }
.seg-build a[aria-current="page"] { background: var(--ever); color: #fff; }
.seg-create { background: var(--studio); margin-left: 4px; position: relative; overflow: hidden; }
.seg-create::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: radial-gradient(circle, rgba(255,226,122,.9) 1px, transparent 1.3px); background-size: 9px 9px; }
.seg-create .seg-label { color: var(--canary); position: relative; }
.seg-create ul { position: relative; }
.seg-create a { color: var(--studio-dim); }
.seg-create a:hover { background: rgba(255,255,255,.08); color: var(--studio-ink); }
.seg-create a[aria-current="page"] { background: var(--canary); color: var(--ink); }
.nav-split a:focus-visible { outline-offset: 1px; }
.seg-create a:focus-visible { outline-color: var(--canary); }

/* on the dark creative pages the outer track flips, but the two halves stay the same */
.studio-page .nav-split { background: rgba(255,255,255,.06); border-color: var(--studio-line); box-shadow: none; }
.studio-page .seg-build { box-shadow: none; }
.studio-page .seg-create { box-shadow: 0 0 0 1px rgba(255,226,122,.35); }

/* header seam: a thin line showing which side you're on */
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ever); opacity: .9; }
.studio-page .site-header::after, .pg-store .site-header::after, .pg-sell .site-header::after { background: var(--canary); }
.pg-home .site-header::after { background: linear-gradient(90deg, var(--ever) 0 50%, var(--canary) 50% 100%); }

/* the old single nav row is no longer used */
.nav-links { display: none !important; }

@media (max-width: 1220px) { .seg a { padding: 7px 9px; font-size: 14.5px; } .seg { padding-left: 11px; } }
@media (max-width: 1140px) {
  .nav-split, .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; border-top: 1px solid var(--line); background: #fff; padding: 8px 0 28px; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu > nav { max-width: var(--w); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  .mobile-menu ul { list-style: none; }
  .mobile-menu li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
  .mobile-menu .btn-row { margin-top: 22px; flex-direction: column; align-items: stretch; }
}
.m-group { border-radius: 16px; padding: 14px 18px 4px; margin: 12px 0; }
.m-group .seg-label { display: block; font-size: 13px; margin-bottom: 2px; }
.m-group li:last-child a { border-bottom: 0; }
.m-build { background: var(--fog); }
.m-build .seg-label { color: var(--ever); }
.m-build a { color: var(--ink); }
.m-build a[aria-current="page"] { color: var(--ever); }
.m-create { background: var(--studio); }
.m-create .seg-label { color: var(--canary); }
.mobile-menu .m-create li a { color: var(--studio-ink); border-bottom-color: var(--studio-line); }
.mobile-menu .m-create a[aria-current="page"] { color: var(--canary); }
.studio-page .m-build { background: var(--studio-ink); }
.studio-page .mobile-menu .m-build li a { color: var(--ink); border-bottom-color: var(--line); }
.studio-page .m-create { background: var(--studio-2); box-shadow: 0 0 0 1px rgba(255,226,122,.3); }
.ghost-shelf .cv-by { opacity: 1; }

/* ---------- STORE on the Create side ---------- */
.studio.store-hero h1 { font-size: clamp(54px, 8vw, 120px); font-weight: 780; letter-spacing: -0.045em; line-height: .92; }
.studio.store-hero .lede { color: #C4D1CC; }
.studio.page-hero { background: var(--studio); border-bottom-color: var(--studio-line); }
.studio.page-hero h1 { color: var(--studio-ink); }
.studio.page-hero::after { opacity: .9; }
.studio .crumbs { color: var(--studio-dim); }
.studio .crumbs a:hover { color: var(--studio-ink); }
.studio .store-bar { border-color: var(--studio-line); }
.studio .shelf-types button { background: var(--studio-2); border-color: var(--studio-line); color: var(--studio-ink); }
.studio .shelf-types button:hover { border-color: var(--canary); }
.studio .shelf-types button[aria-pressed="true"] { background: var(--canary); border-color: var(--canary); color: var(--ink); }
.studio .store-bar .search svg { color: var(--studio-dim); }
.studio .product { color: var(--studio-ink); }
.studio .product .p-meta, .studio .product .p-by { color: var(--studio-dim); }
.studio .product:hover .p-cover { box-shadow: 0 24px 44px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,226,122,.5); }
.studio .p-cover { box-shadow: 0 10px 30px -20px rgba(0,0,0,.7); }
.studio .p-cover.t-music { --cv: #26332F; box-shadow: inset 0 0 0 1px var(--studio-line); }
.studio .sample-badge { background: rgba(248,193,183,.18); color: var(--rose); }
.studio .store-empty p { color: var(--studio-dim); }
.studio .store-trust b { color: var(--studio-ink); }
.studio .store-trust p { color: var(--studio-dim); }
.studio .steps.stacked .step { border-top-color: var(--studio-line); }
.studio .steps .s-num { color: var(--canary); }
.studio .steps p { color: var(--studio-dim); }
.studio .p-price-lg { color: var(--canary); }
.studio .p-summary { color: var(--studio-ink); }
.studio .checkout-note { color: var(--studio-dim); }
.studio .spec { border-top-color: var(--studio-line); }
.studio .spec dt { color: var(--studio-dim); }
.studio .spec dd { color: var(--studio-ink); }
.studio .product-page .btn-gold[disabled] { background: var(--studio-2); color: var(--studio-dim); opacity: 1 !important; box-shadow: inset 0 0 0 1px var(--studio-line); }

/* light form card inside dark sections keeps its own readable colours */
.studio .form-wrap { box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.studio .form-wrap p, .studio .form-wrap .fieldset-note, .studio .form-wrap .hint { color: var(--ink-2); }
.studio .form-wrap .muted { color: var(--ink-3); }
.studio .form-wrap legend, .studio .form-wrap label, .studio .form-wrap .label { color: var(--ink); }
.studio .form-wrap select, .studio .form-wrap input[type=search] { background: var(--fog); color: var(--ink); border-color: transparent; }
.studio .form-wrap input:focus, .studio .form-wrap select:focus, .studio .form-wrap textarea:focus { background: #fff; border-color: var(--ever); box-shadow: 0 0 0 4px var(--ever-tint); }
.studio .form-wrap a { color: var(--ever); }
.studio .form-wrap .btn-gold { background: var(--ever); color: #fff; }
.studio .form-wrap .btn-gold:hover { background: var(--ever-hover); }
.studio .form-wrap :focus-visible { outline-color: var(--ever); }
.studio.store-hero { background: var(--studio); }