/* 702.creative design system. Brand sheet: brightcube-ai/docs/website-brands/702-creative.md
   Dark first (juan's moodboard, 2026-10-18): charcoal pages, moody full-bleed
   photo heroes, off-white chapters for contrast, one tan accent (the logo dot).
   Square corners, hairline rules, no cards, no pills, no tint on photos.

   Colour is set by tokens. Every chapter is dark unless it has .light, which
   flips the tokens; components only read tokens, never raw colours. */

:root {
  --charcoal: #121211;
  --charcoal-2: #1a1a18;
  --off: #f3f0e9;
  --paper: #faf8f3;
  --ink: #121211;
  --tan: #c6a274;

  /* dark (default) tokens */
  --bg: var(--charcoal);
  --raise: var(--charcoal-2);
  --fg: var(--off);              /* headings, strong text */
  --text: #b3ada2;               /* body */
  --muted: #a39d92;              /* small meta, AA on charcoal */
  --line: #2f2e2a;
  --accent-text: var(--tan);     /* small tan text, AA on charcoal */
  --btn-bg: var(--off);
  --btn-fg: var(--ink);
  --btn-hover: #ffffff;
  --field-bg: var(--charcoal-2);

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 20px;
  --max: 1320px;
  --step: clamp(88px, 12vw, 168px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 760px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }

.light {
  --bg: var(--off);
  --raise: var(--paper);
  --fg: var(--ink);
  --text: #57534c;
  --muted: #6f6a61;
  --line: #ddd8cd;
  --accent-text: #7a5c33;
  --btn-bg: var(--ink);
  --btn-fg: var(--off);
  --btn-hover: #2a2925;
  --field-bg: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--charcoal); color: var(--text); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
section, .light { background: var(--bg); color: var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.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: -9999px; top: 8px; z-index: 100; background: var(--off); color: var(--ink); padding: 12px 16px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 4px; }

/* Type: bold, tight, sentence case. One face. Emphasis by the tan full stop. */
h1, h2, h3 { font-family: var(--sans); font-weight: 700; color: var(--fg); margin: 0 0 0.45em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7.6vw, 6.6rem); line-height: 0.95; letter-spacing: -0.045em; }
h2 { font-size: clamp(2.3rem, 5.2vw, 4.6rem); line-height: 0.98; letter-spacing: -0.04em; }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--text); max-width: 32em; }
.meta { font: 500 0.76rem/1.5 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.nw { white-space: nowrap; }
.dot { display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.04em; border-radius: 50%; background: var(--tan); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.chapter { padding: var(--step) 0; position: relative; }

/* 12-column editorial grid */
.grid { display: grid; gap: 28px var(--gutter); }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-full { grid-column: 1 / -1; }
  .span-head { grid-column: 1 / span 7; }
  .span-copy { grid-column: 8 / span 5; align-self: end; }
  .span-left { grid-column: 1 / span 5; }
  .span-right { grid-column: 7 / span 6; }
}

/* Links and buttons */
.link { color: var(--fg); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid currentColor; background: linear-gradient(var(--tan), var(--tan)) 0 100% / 0% 2px no-repeat; transition: background-size .35s var(--ease), border-color .2s; }
.link:hover { background-size: 100% 2px; border-bottom-color: transparent; }
.link .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link:hover .icon { transform: translateX(4px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px; font: 600 1rem/1 var(--sans); text-decoration: none; border: 0; border-radius: 2px; cursor: pointer; background: var(--btn-bg); color: var(--btn-fg); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.btn:hover { background: var(--btn-hover); }
.btn .icon { width: 19px; height: 19px; transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

/* Header sits on the hero photo, no bar (feedback_header_over_hero). */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 24px; }
.brand { display: block; width: 150px; }
@media (min-width: 960px) { .brand { width: 178px; } }
.nav { display: none; align-items: center; gap: 34px; }
.nav-link { font-weight: 500; font-size: 0.97rem; text-decoration: none; color: var(--off); padding: 6px 0; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { --btn-bg: var(--off); --btn-fg: var(--ink); --btn-hover: #fff; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -10px; background: none; border: 0; color: var(--off); cursor: pointer; }
.nav-toggle .icon { width: 28px; height: 28px; }
@media (min-width: 960px) { .nav { display: flex; } .site-header .nav-toggle { display: none; } }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--charcoal); display: flex; flex-direction: column; overflow-y: auto; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.menu-links { display: flex; flex-direction: column; padding-top: 28px; }
.menu-links a { font: 700 clamp(2.4rem, 11vw, 3.4rem)/1.1 var(--sans); letter-spacing: -0.04em; color: var(--off); text-decoration: none; padding: 8px 0; border-bottom: 1px solid #2f2e2a; }
.menu-links a:hover { color: var(--tan); }
.menu-foot { margin-top: auto; padding-top: 40px; padding-bottom: 40px; }

/* Photo hero: full bleed, menu on top, neutral dark shade only under the text
   (feedback_no_color_gradient_on_images). Tall crop on phones. */
.hero { position: relative; min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #0b0b0a; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; object-position: var(--pos, 60% 50%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(10,10,9,.55) 0%, rgba(10,10,9,0) 22%),
  linear-gradient(90deg, rgba(10,10,9,.82) 0%, rgba(10,10,9,.55) 40%, rgba(10,10,9,0) 70%),
  linear-gradient(0deg, rgba(10,10,9,.75) 0%, rgba(10,10,9,0) 35%); }
.hero-inner { position: relative; z-index: 2; padding-top: 150px; }
.hero h1 { max-width: 8.4em; }
.hero.inner h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); max-width: 10em; }
.hero .lede { color: #e2ddd3; margin-bottom: 32px; max-width: 30em; }
.kicker { text-wrap: balance; font: 500 0.76rem/1.6 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: #d9d3c7; margin: 0 0 22px; max-width: 34em; }
.hero-foot { position: relative; z-index: 2; margin-top: clamp(56px, 9vh, 110px); padding-bottom: 30px; }
.hero-foot p { display: inline-block; margin: 0; padding-top: 18px; border-top: 1px solid rgba(243,240,233,.35); font: 500 0.74rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: #d9d3c7; min-width: min(300px, 70vw); }
@media (max-width: 759px) {
  .hero::before { background: linear-gradient(180deg, rgba(10,10,9,.6) 0%, rgba(10,10,9,0) 20%), linear-gradient(0deg, rgba(10,10,9,.92) 0%, rgba(10,10,9,.7) 45%, rgba(10,10,9,.1) 75%); }
  .hero-media img { object-position: var(--pos-tall, 50% 50%); }
}

/* Numbered steps on hairlines */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 70px 1fr; gap: 6px 20px; padding: 30px 0 28px; border-bottom: 1px solid var(--line); }
.step-n { grid-row: span 2; font: 600 0.95rem/1.7 var(--sans); color: var(--accent-text); letter-spacing: 0.04em; }
.step h3 { margin: 0; }
.step p { grid-column: 2; margin: 0; max-width: 36em; }
@media (min-width: 960px) {
  .steps.across { grid-template-columns: repeat(3, 1fr); gap: 0 var(--gutter); border-top: 0; }
  .steps.across .step { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--line); padding-top: 26px; }
  .steps.across .step-n { grid-row: auto; font: 700 clamp(3rem, 5vw, 4.4rem)/1 var(--sans); letter-spacing: -0.04em; margin-bottom: 18px; color: var(--fg); transition: color .5s var(--ease); }
  .steps.across .step:hover .step-n, .steps.across .step.is-in .step-n { color: var(--tan); }
  .steps.across .step p { grid-column: 1; }
}

/* Free vs not free */
.terms { display: grid; margin: 0; border-top: 1px solid var(--line); }
.terms > div { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.terms dt { font-weight: 600; color: var(--fg); }
.terms dd { margin: 0; }
@media (min-width: 760px) { .terms > div { grid-template-columns: 0.42fr 1fr; gap: 24px; } }

/* Details checklist */
.checklist { display: grid; gap: 40px; }
@media (min-width: 960px) { .checklist { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--gutter); align-items: start; } }
.checklist fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.checklist ul { border-top: 1px solid var(--line); }
.check { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding .3s var(--ease), background-color .2s; }
.check:hover { padding-left: 12px; background: var(--raise); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.box { flex: none; width: 26px; height: 26px; border: 1.5px solid var(--fg); border-radius: 2px; display: grid; place-items: center; transition: background-color .2s; }
.box .icon { width: 18px; height: 18px; color: var(--bg); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease); }
.check input:checked + .box { background: var(--fg); }
.check input:checked + .box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .box { outline: 2px solid var(--tan); outline-offset: 3px; }
.check-label { text-wrap: pretty; font-size: 1.08rem; color: var(--fg); transition: color .2s; }
.check input:checked ~ .check-label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--tan); text-decoration-thickness: 2px; }
.check-result { position: sticky; top: 32px; }
.check-count { text-wrap: balance; font: 700 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--sans); letter-spacing: -0.04em; color: var(--fg); margin-bottom: 14px; }
.check-count [data-missing] { display: inline-block; transition: transform .3s var(--ease); }
.check-count .bump { transform: translateY(-6px); }
.check-note { min-height: 3.2em; }

/* Editorial list */
.elist { border-top: 1px solid var(--line); }
.elist li { display: grid; grid-template-columns: 54px 1fr; gap: 4px 18px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease); }
.elist li:hover { padding-left: 10px; }
.elist .n { font: 600 0.92rem/1.75 var(--sans); color: var(--accent-text); letter-spacing: 0.04em; }
.elist h3 { margin: 0 0 6px; }
.elist p { margin: 0; max-width: 38em; }
.names { border-top: 1px solid var(--line); }
.names li { padding: 15px 0; border-bottom: 1px solid var(--line); font: 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.3 var(--sans); letter-spacing: -0.02em; color: var(--fg); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.names li span { font: 500 0.8rem/1 var(--sans); color: var(--muted); letter-spacing: 0.12em; }

/* Split chapter: full-bleed photo one side, copy the other */
.split { display: grid; }
.split-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.split-media img { position: absolute; inset: -7% 0; width: 100%; height: 114%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.split-copy { padding: 64px var(--gutter) var(--step); }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 760px; }
  .split-media { aspect-ratio: auto; }
  .split.flip .split-media { order: 2; }
  .split-copy { padding: var(--step) clamp(40px, 6vw, 110px); display: flex; flex-direction: column; justify-content: center; }
}

/* Photo strip: who we build for. Square, full bleed, tall on phones. */
.strip { display: grid; gap: 3px; background: var(--charcoal); }
.strip figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.strip figure:hover img { transform: scale(1.03); }
.strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 20px; color: var(--off); font: 500 0.76rem/1.3 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; background: linear-gradient(0deg, rgba(10,10,9,.7), rgba(10,10,9,0)); }
@media (min-width: 760px) { .strip { grid-template-columns: repeat(3, 1fr); } .strip figure { aspect-ratio: 3 / 4; } }
.audience { columns: 1; column-gap: var(--gutter); border-top: 1px solid var(--line); }
.audience li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fg); }
@media (min-width: 760px) { .audience { columns: 2; } }

/* Philosophy: the tan dot drops into place as the full stop. */
.philosophy h2 { font-size: clamp(3.2rem, 10.5vw, 9.4rem); line-height: 0.9; letter-spacing: -0.05em; margin-bottom: 0.32em; }
.philosophy .dot-drop { transition: transform .9s cubic-bezier(.3,1.5,.5,1), opacity .4s; }
.philosophy:not(.is-in) .dot-drop { transform: translateY(-2.4em); opacity: 0; }
.quote { font: 600 clamp(1.45rem, 2.4vw, 2rem)/1.28 var(--sans); letter-spacing: -0.025em; color: var(--fg); border-left: 3px solid var(--tan); padding-left: 24px; margin: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font: 600 clamp(1.08rem, 1.6vw, 1.3rem)/1.3 var(--sans); letter-spacing: -0.015em; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { width: 24px; height: 24px; flex: none; color: var(--accent-text); transition: transform .35s var(--ease); }
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; margin: 0; max-width: 40em; }

/* Closing ask over a photo */
.closing { position: relative; overflow: hidden; min-height: min(88vh, 820px); display: flex; align-items: flex-end; background: #0b0b0a; }
.closing-media { position: absolute; inset: 0; }
.closing-media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.9) 0%, rgba(10,10,9,.6) 45%, rgba(10,10,9,.15) 80%); }
.closing-inner { position: relative; z-index: 1; padding-top: 200px; padding-bottom: var(--step); }
.closing h2 { max-width: 11em; }
.closing p { font-size: 1.2rem; color: #e2ddd3; max-width: 32em; margin-bottom: 32px; }

/* Form page: calm, no decoration */
.form-page { padding: 170px 0 var(--step); }
.form-page h1 { font-size: clamp(2.6rem, 4.8vw, 4.4rem); }
.form-grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .form-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gutter); } }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; color: var(--fg); font-size: 0.98rem; }
.field .hint { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 1.05rem/1.5 var(--sans); color: var(--fg); background: var(--field-bg); border: 1px solid var(--line); border-bottom: 1.5px solid var(--fg); border-radius: 2px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.field textarea { min-height: 150px; resize: vertical; }
.field .err { color: #ff8f80; font-size: 0.92rem; margin: 0; }
.light .field .err { color: #a3261b; }
.field [aria-invalid="true"] { border-color: #ff8f80; }
.form-pair { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-pair { grid-template-columns: 1fr 1fr; } }
.form-error { color: #ff8f80; font-weight: 600; margin: 0; }
.consent { font-size: 0.88rem; color: var(--muted); margin: 0; }
.consent a { color: var(--fg); }
.picked { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 26px; }
.picked li { padding: 6px 0 6px 18px; position: relative; color: var(--fg); }
.picked li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 7px; height: 7px; border-radius: 50%; background: var(--tan); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Plain text pages */
.prose { max-width: 44em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 1.8em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose a, .prose strong { color: var(--fg); }
.updated { color: var(--muted); font-size: 0.95rem; }

/* Footer */
.site-footer { background: #0d0d0c; color: var(--text); padding: var(--step) 0 36px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 30px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer-logo { width: min(400px, 78vw); }
.footer-line { font: 700 clamp(1.5rem, 2.8vw, 2.2rem)/1 var(--sans); letter-spacing: -0.035em; color: var(--off); margin: 0; }
.footer-cols { display: grid; gap: 34px; padding: 48px 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-cols li { margin-bottom: 10px; }
.site-footer a { color: var(--off); text-decoration: none; padding-bottom: 2px; background: linear-gradient(var(--tan), var(--tan)) 0 100% / 0% 1px no-repeat; transition: background-size .3s var(--ease); }
.site-footer a:hover { background-size: 100% 1px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.footer-base p { margin: 0; }
.footer-base ul { display: flex; gap: 22px; }

.notfound { min-height: 100vh; display: flex; align-items: center; padding: 150px 0 80px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .philosophy:not(.is-in) .dot-drop { transform: none; opacity: 1; }
}

/* ---- Brief v2 blocks ---------------------------------------------------- */

/* More than marketing: one big row per business area, opens to an example. */
.areas { border-top: 1px solid var(--line); }
.areas details { border-bottom: 1px solid var(--line); }
.areas summary { list-style: none; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 20px 0; cursor: pointer; }
.areas summary::-webkit-details-marker { display: none; }
.area-n { font: 600 0.9rem/1 var(--sans); color: var(--accent-text); letter-spacing: 0.04em; }
.area-name { font: 700 clamp(2rem, 5.4vw, 4.4rem)/1 var(--sans); letter-spacing: -0.045em; color: var(--fg); transition: color .3s var(--ease), transform .4s var(--ease); display: inline-block; }
.areas summary:hover .area-name { transform: translateX(10px); }
.areas details:not([open]) .area-name { color: color-mix(in srgb, var(--fg) 62%, var(--bg)); }
.areas details:not([open]) summary:hover .area-name { color: var(--fg); }
.area-icon { width: 30px; height: 30px; color: var(--fg); transition: transform .35s var(--ease); }
.areas details[open] .area-icon { transform: rotate(45deg); }
.areas details p { margin: 0; padding: 0 0 30px 60px; max-width: 34em; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--text); }
@media (max-width: 759px) { .areas summary { grid-template-columns: 34px 1fr auto; } .areas details p { padding-left: 46px; } }

/* Where we make a difference: four outcomes staggered on the grid. */
.outcomes { display: grid; gap: 0; counter-reset: o; }
.outcome { border-top: 1px solid var(--line); padding: 30px 0 46px; }
.outcome-n { display: block; font: 600 0.9rem/1 var(--sans); color: var(--accent-text); letter-spacing: 0.04em; margin-bottom: 22px; }
.outcome h3 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; margin-bottom: 16px; }
.outcome p { max-width: 26em; margin: 0; }
.outcome-aside { margin-top: 18px !important; font-size: 0.98rem; color: var(--muted); }
@media (min-width: 960px) {
  .outcomes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .outcome-1 { grid-column: 1 / span 5; }
  .outcome-2 { grid-column: 7 / span 5; margin-top: 140px; }
  .outcome-3 { grid-column: 2 / span 5; }
  .outcome-4 { grid-column: 8 / span 5; margin-top: 140px; }
}

/* Every detail counts: how one improvement depends on another. */
.deps { border-top: 1px solid var(--line); }
.deps li { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; }
.deps strong { color: var(--fg); font-weight: 700; }

/* Work: one project per row, image (when real ones exist) or type. */
.cases { border-top: 1px solid var(--line); }
.case { display: grid; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.case h2, .case h3 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; margin: 8px 0 14px; transition: transform .4s var(--ease); }
.case:hover h2 { transform: translateX(8px); }
.case .did { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 0.95rem; color: var(--muted); }
@media (min-width: 960px) { .case { grid-template-columns: 0.35fr 1fr; align-items: start; } }
.did-list { columns: 2; column-gap: var(--gutter); border-top: 1px solid var(--line); }
.did-list li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fg); }
.next-up { font-size: 0.98rem; color: var(--muted); margin-top: 28px; }

/* Work rows read as tappable: a "Read the story" link, the arrow moves, the row lifts. */
.case { padding: 40px 16px; margin: 0 -16px; transition: background-color .3s var(--ease); }
.case:hover, .case:focus-visible { background: var(--raise); }
.case-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-weight: 600; color: var(--fg); padding-bottom: 4px; border-bottom: 1px solid currentColor; background: linear-gradient(var(--tan), var(--tan)) 0 100% / 0% 2px no-repeat; transition: background-size .35s var(--ease), border-color .2s; }
.case-more .icon { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.case:hover .case-more { background-size: 100% 2px; border-bottom-color: transparent; }
.case:hover .case-more .icon { transform: translateX(6px); }

/* Where the problem shows up vs where the answer might be. */
.crossovers { margin: 0; border-top: 1px solid var(--line); }
.crossovers > div { display: grid; gap: 6px 40px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease); }
.crossovers > div:hover { padding-left: 10px; }
.crossovers dt { font: 700 clamp(1.25rem, 2.2vw, 1.8rem)/1.2 var(--sans); letter-spacing: -0.025em; color: var(--fg); }
.crossovers dd { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text); }
@media (min-width: 900px) { .crossovers > div { grid-template-columns: 1fr 1fr; align-items: baseline; } }