:root {
  --ink: #142638;
  --ink-soft: #254455;
  --paper: #f5efe6;
  --paper-deep: #e9dfd1;
  --gold: #d6b06b;
  --gold-deep: #a87a38;
  --muted: #5b6770;
  --rule: #c9bdad;
  --max: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.55 Arial, Helvetica, sans-serif; }
a { color: inherit; text-underline-offset: 0.18em; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.wrap { width: min(100% - 3rem, var(--max)); margin: auto; }
.skip { position: absolute; left: -9999px; z-index: 5; padding: .7rem 1rem; background: var(--gold); }
.skip:focus { top: 1rem; left: 1rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.25rem; }
.brand { color: var(--gold-deep); font: 700 1.25rem/1 Georgia, serif; letter-spacing: -0.05em; text-decoration: none; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .65rem 1.1rem; font-size: .88rem; }
.site-nav a { text-decoration: none; }
.site-nav .quiet, .site-nav .nav-tool { text-decoration: underline; }
.site-nav .nav-tool { color: #1d5d8b; font-weight: 700; }
.button { display: inline-block; padding: .8rem 1.05rem; border: 1px solid var(--gold); background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; }
.button:hover { background: #e4c384; border-color: #e4c384; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.hero { position: relative; min-height: 39rem; color: white; overflow: hidden; background: var(--ink); }
.hero-media, .hero-media picture, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center; }
.hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(7, 18, 27, .97) 0%, rgba(7, 18, 27, .84) 39%, rgba(7, 18, 27, .3) 72%, rgba(7, 18, 27, .15)); }
.hero-copy { position: relative; z-index: 1; display: grid; align-content: center; min-height: 39rem; padding: 4.5rem 0; }
.eyebrow { margin-bottom: 1.15rem; color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { max-width: 12ch; margin-bottom: 1.45rem; font-size: clamp(3rem, 5.5vw, 5.35rem); }
.hero-text { max-width: 37rem; margin-bottom: 2rem; color: #e4e8e8; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hero-actions .text-action { color: white; font-weight: 700; }

section { padding: clamp(3.75rem, 7vw, 5.75rem) 0; }
#services { padding-bottom: clamp(3.25rem, 5vw, 4.5rem); }
.intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.intro h2, .section-heading h2 { margin-bottom: 0; font-size: clamp(2.3rem, 4vw, 4rem); }
.intro p { max-width: 39rem; margin: .45rem 0 0; color: var(--muted); font-size: 1.1rem; }
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--rule); }
.market { display: flex; min-height: 15.5rem; flex-direction: column; padding: 1.65rem 1.5rem 1.5rem; border-right: 1px solid var(--rule); }
.market:last-child { border-right: 0; }
.market-media { display: block; margin-bottom: 1.15rem; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink); }
.market-media img { width: 100%; height: 100%; object-fit: cover; }
.market-label { color: #a7433f; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.market h3 { margin: .7rem 0; font-size: 1.35rem; letter-spacing: -.04em; }
.market p { margin: 0; color: var(--muted); }
.deliverables { padding: clamp(3.5rem, 5.5vw, 4.75rem) 0; background: #fffaf3; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.deliverable-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.deliverable-intro { max-width: 29rem; margin: 1.15rem 0 1.3rem; color: var(--muted); }
.deliverable-action { color: #1d5d8b; font-weight: 700; }
.deliverable-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.deliverable-list li { padding: 1rem 0; border-bottom: 1px solid var(--rule); color: var(--muted); }
.deliverable-list li::before { content: "✓ "; color: var(--gold-deep); font-weight: 700; }
.process { color: #e9eeee; background: var(--ink-soft); }
.process h2 { color: white; font-size: clamp(2.2rem, 4vw, 3.7rem); }
.process .eyebrow { color: var(--gold); }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.process-grid > div { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(16rem, 1.1fr); gap: 4rem; align-items: end; margin-bottom: .8rem; }
.process-grid > div .eyebrow, .process-grid > div h2 { grid-column: 1; }
.process-grid > div h2 { margin-bottom: 0; }
.process h2 { max-width: 16ch; }
.process-intro { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 33rem; margin: 0; color: #ced8dc; font-size: 1.06rem; }
.step { padding-top: 1rem; border-top: 1px solid rgba(235, 230, 217, .32); }
.step-number { color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.step h3 { margin: .7rem 0 .35rem; color: white; font-size: 1.13rem; }
.step p { margin: 0; color: #ced8dc; font-size: .94rem; }
.proof-heading h2 { max-width: 15ch; margin-bottom: 0; font-size: clamp(2.3rem, 4vw, 4rem); }
.proof-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.proof-media { margin: 0; }
.proof-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.proof-media figcaption { margin-top: .55rem; color: var(--muted); font-size: .85rem; }
.proof-evidence { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; margin-top: 2.5rem; }
.guide-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.guide-links a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--rule); color: #1d5d8b; font-weight: 700; }
.notice { padding: 1.2rem; border-left: 4px solid #a7433f; background: var(--paper-deep); color: var(--muted); }
.final-cta { text-align: center; background: var(--paper-deep); }
.final-cta h2 { max-width: 17ch; margin: 0 auto 1rem; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.final-cta p { max-width: 38rem; margin: 0 auto 1.7rem; color: var(--muted); }
.secondary-path { display: block; margin-top: 2.5rem; color: var(--muted); font-size: .9rem; }
.secondary-path a { color: var(--ink); font-weight: 700; }
.site-footer { padding: 1.4rem 0; color: #dce5e6; background: var(--ink); font-size: .85rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; }
.blog-intro { padding: 6rem 0 5rem; color: white; background: var(--ink); }
.blog-intro h1 { max-width: 12ch; margin-bottom: 1.2rem; font-size: clamp(3.4rem, 7vw, 6rem); }
.blog-intro > .wrap > p:last-child { max-width: 37rem; margin: 0; color: #d6e0e2; font-size: 1.15rem; }
.blog-content { padding-top: 4rem; }
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 4rem; }
.blog-list { border-top: 1px solid var(--rule); }
.blog-card { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.blog-card > span { color: #a7433f; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.blog-card h2 { margin: .65rem 0; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.blog-card h2 a { text-decoration: none; }
.blog-card p { max-width: 42rem; margin: 0 0 .8rem; color: var(--muted); }
.blog-card > a, .blog-aside a { color: #1d5d8b; font-weight: 700; }
.blog-aside { border-top: 1px solid var(--rule); }
.blog-aside a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }

.work-hero { padding: 5rem 0 4rem; background: var(--ink); color: white; }
.work-hero-grid { display: grid; grid-template-columns: 1fr minmax(15rem, .55fr); gap: 4rem; align-items: end; }
.work-hero h1 { max-width: 10ch; margin-bottom: 1.2rem; font-size: clamp(3.5rem, 7vw, 6.5rem); }
.work-hero p { max-width: 38rem; margin: 0; color: #d6e0e2; font-size: 1.15rem; }
.work-portrait { margin: 0; border-bottom: 5px solid var(--gold); }
.work-portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.work-portrait figcaption { padding-top: .5rem; color: #b7c4c8; font-size: .8rem; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.outcome { padding: 1.3rem; border-right: 1px solid var(--rule); }
.outcome:first-child { padding-left: 0; }
.outcome:last-child { border-right: 0; }
.outcome strong { display: block; color: #1d5d8b; font-size: clamp(2.2rem, 5vw, 4.1rem); letter-spacing: -.08em; line-height: .9; }
.outcome span { color: var(--muted); font-size: .9rem; }
.timeline { border-top: 1px solid var(--rule); }
.role { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
.role time { color: #1d5d8b; font-size: .9rem; font-weight: 700; }
.role h3 { margin: 0 0 .35rem; font-size: 1.3rem; letter-spacing: -.04em; }
.role p { margin: 0; color: var(--muted); }
.foundation { padding: 1.6rem; color: white; background: var(--ink); }
.foundation h3 { margin-top: 0; }
.foundation ul { margin: 0; padding-left: 1.1rem; color: #d3dcde; }
.foundation li + li { margin-top: .4rem; }

.tool-hero { min-height: calc(100vh - 9.6rem); color: white; background: var(--ink); }
.tool-shell { max-width: 46rem; }
.tool-hero h1 { max-width: 13ch; margin-bottom: 1.25rem; font-size: clamp(3rem, 6vw, 5.5rem); }
.tool-intro { max-width: 38rem; margin-bottom: .8rem; color: #d6e0e2; font-size: 1.15rem; }
.tool-privacy { max-width: 38rem; margin-bottom: 1.4rem; padding-left: 1rem; border-left: 3px solid var(--gold); color: #d6e0e2; font-size: .92rem; }
.tool-status { min-height: 1.55rem; margin-bottom: .8rem; color: #f2d496; font-weight: 700; }
.tool-card { padding: clamp(1.4rem, 4vw, 2.4rem); color: var(--ink); background: #fffaf3; border: 1px solid var(--rule); }
.tool-progress-label { margin-bottom: .35rem; color: var(--muted); font-size: .85rem; font-weight: 700; }
.tool-card progress { width: 100%; height: .55rem; margin-bottom: 2rem; accent-color: var(--gold-deep); }
.tool-card fieldset { margin: 0; padding: 0; border: 0; }
.tool-card legend { max-width: 26ch; margin-bottom: 1.4rem; font: 600 clamp(1.8rem, 4vw, 2.6rem)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.tool-answers { display: grid; gap: .7rem; }
.tool-answer { display: flex; align-items: center; gap: .8rem; min-height: 3.6rem; padding: .85rem 1rem; border: 1px solid var(--rule); background: white; color: var(--ink); cursor: pointer; }
.tool-answer:hover, .tool-answer:has(input:checked) { border-color: var(--gold-deep); background: #fff5df; }
.tool-answer:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.tool-answer input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--gold-deep); }
.tool-controls, .tool-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.tool-back, .tool-print { padding: .8rem 1.05rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.tool-back:hover, .tool-print:hover { background: var(--paper-deep); }
.tool-result h2 { max-width: 18ch; margin-bottom: 2rem; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.tool-result h3 { margin-bottom: .55rem; font-size: 1rem; }
.tool-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.tool-result ul, .tool-result ol { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.tool-result li + li { margin-top: .55rem; }
.tool-week { margin: 2rem 0 1rem; padding: 1rem; background: var(--paper-deep); }
.tool-limit { margin-bottom: 0; color: var(--muted); font-size: .85rem; }

@media (max-width: 760px) {
  .wrap { width: min(100% - 2rem, var(--max)); }
  .site-header { padding: 1rem 0; align-items: flex-start; }
  .site-nav { justify-content: flex-start; gap: .55rem 1rem; }
  .site-nav > a:not(.button):not(.nav-tool) { display: none; }
  .site-nav { gap: .65rem; }
  .site-nav .nav-tool { font-size: .78rem; }
  .hero, .hero-copy { min-height: 35rem; }
  .hero::after { background: linear-gradient(90deg, rgba(7, 18, 27, .94), rgba(7, 18, 27, .62)); }
  .intro, .deliverable-grid, .proof-story, .proof-evidence, .work-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .market-grid, .process-grid { grid-template-columns: 1fr; }
  .process-grid > div { grid-template-columns: 1fr; gap: 1rem; }
  .process-grid > div .eyebrow, .process-grid > div h2, .process-intro { grid-column: 1; grid-row: auto; }
  .market, .market + .market { min-height: auto; padding: 1.35rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .market:last-child { border-bottom: 0; }
  .deliverable-list { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr; gap: 3rem; }
  .tool-result-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .tool-controls, .tool-actions { flex-direction: column; }
  .tool-controls > *, .tool-actions > * { width: 100%; text-align: center; }
  .outcome { border-bottom: 1px solid var(--rule); }
  .outcome:nth-child(2) { border-right: 0; }
  .outcome:nth-child(n+3) { border-bottom: 0; }
  .role { grid-template-columns: 1fr; gap: .3rem; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  .site-header, .site-footer, .tool-controls, .tool-status { display: none; }
  .tool-hero { min-height: 0; color: var(--ink); background: white; }
  .tool-card { border: 0; box-shadow: none; }
}

.listening-page { min-height: 100vh; color: #f6f0e7; background: radial-gradient(circle at 50% 0%, #3d4851, #161b21 58%); }
.listening-room { width: min(100% - 2rem, 45rem); margin: auto; padding: clamp(3rem, 8vw, 6rem) 0; }
.listening-label { margin-bottom: .55rem; color: #c8ad72; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.listening-room > h1 { margin-bottom: .75rem; color: #fffaf3; font-size: clamp(3.6rem, 10vw, 6.5rem); }
.listening-note { margin-bottom: 2.5rem; color: #c3cbd0; }
.member-entry, .access-entry { width: min(100%, 26rem); }
.member-entry { margin-bottom: 3rem; }
.member-entry > h2, .access-entry > h2 { margin-bottom: .5rem; color: #fffaf3; font-size: 1.6rem; }
.member-entry > p, .access-entry > p { margin: 0 0 1rem; color: #c3cbd0; }
.player { width: min(100%, 26rem); margin: 0 auto; padding: 1.2rem; border: 1px solid #77818b; border-radius: 2rem; background: linear-gradient(135deg, #e9e9e8, #bfc1c1 60%, #d8d9d7); box-shadow: 0 1.8rem 4rem rgb(0 0 0 / .36), inset 0 1px 1px #fff; }
.player-screen { min-height: 9rem; padding: 1.25rem; border: 3px solid #68706f; border-radius: .65rem; color: #24342d; background: linear-gradient(135deg, #c5d4ad, #9eb48e); box-shadow: inset 0 0 1.5rem rgb(45 72 44 / .35); }
.player-kicker { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.player-screen h2 { min-height: 2.3em; margin: 0; font: 700 1.35rem/1.06 Arial, Helvetica, sans-serif; letter-spacing: -.04em; }
.player-time { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; align-items: center; gap: .45rem; margin-top: 1rem; font: 700 .68rem/1 Arial, sans-serif; }
.player-time input { width: 100%; accent-color: #354b3b; }
.click-wheel { position: relative; width: 15rem; aspect-ratio: 1; margin: 1.25rem auto .15rem; border-radius: 50%; background: radial-gradient(circle, #eceeed 0 28%, transparent 28.5%), linear-gradient(135deg, #fbfbfa, #d3d6d6); box-shadow: inset 1px 1px 2px #fff, inset -1px -1px 3px #9da1a2; }
.click-wheel button { position: absolute; z-index: 1; padding: .55rem; border: 0; background: transparent; color: #596166; font: 700 .65rem/1 Arial, sans-serif; letter-spacing: .04em; cursor: pointer; }
.click-wheel button:hover { color: #1b2027; }
.wheel-menu { top: .75rem; left: 50%; transform: translateX(-50%); }
.wheel-play { bottom: .85rem; left: 50%; transform: translateX(-50%); }
.wheel-previous { top: 50%; left: .75rem; transform: translateY(-50%); }
.wheel-next { top: 50%; right: .75rem; transform: translateY(-50%); }
.click-wheel span { position: absolute; inset: 37%; border-radius: 50%; background: #d9dcdb; box-shadow: inset 1px 1px 2px #aeb3b1; }
.playlist-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid rgb(246 240 231 / .25); }
.playlist-panel h2 { margin: 0; color: #fffaf3; font-size: clamp(2rem, 5vw, 3rem); }
.playlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(246 240 231 / .25); }
.playlist button { display: block; width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid rgb(246 240 231 / .25); background: transparent; color: #d9e0e1; font: 400 1rem/1.3 Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; }
.playlist button[aria-current="true"] { color: #f1c775; font-weight: 700; }
.request-card { display: grid; width: min(100%, 26rem); gap: .75rem; padding: 1.25rem; border: 1px solid #77818b; border-radius: 1rem; background: rgb(255 255 255 / .08); }
.request-card label { font-weight: 700; }
.request-card input, .request-card button, .listening-logout button { min-height: 2.9rem; padding: .65rem .8rem; border: 1px solid #c8ad72; border-radius: .25rem; font: inherit; }
.request-card input { color: #161b21; background: #fffaf3; }
.request-card button, .listening-logout button { color: #161b21; background: #c8ad72; font-weight: 700; cursor: pointer; }
.request-card button:disabled { cursor: wait; opacity: .7; }
.request-card p { min-height: 1.5rem; margin: 0; color: #d9e0e1; }
.request-card .request-privacy { min-height: 0; font-size: .85rem; }
.account-links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1rem; }
.account-links a { color: #f1c775; font-weight: 700; }
.listening-logout { margin-top: 2rem; text-align: center; }
@media (max-width: 560px) { .playlist-panel { grid-template-columns: 1fr; gap: 1.5rem; } .click-wheel { width: 13.5rem; } }