/* Mike Bravo Consulting website. Built only from tokens.css (brand system 5.0, Evergreen).
   Layout follows the guide's homepage mock (section 8.1): white pages, rounded night,
   evergreen and deep green panels floating a few pixels in from the window edge. */

/* Fonts: self-hosted, so no visitor data goes to a font service. Plex Sans 400, 500, 600 only. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--action); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: var(--weight-semibold); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--surface-raised); color: var(--text); padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); font-weight: var(--weight-medium); text-decoration: none; }
.skip:focus { top: 16px; }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.inset { margin-inline: var(--panel-inset); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; }
.stack > * + * { margin-top: var(--space-4); }
.measure { max-width: var(--measure); }

/* Panels: fixed in both themes */
.night, .evergreen, .deep {
  --text: #f9f6eb; --text-muted: #b6bba6; --stop: #a9bc8c; --focus: #a9bc8c; --action: #a9bc8c; --action-hover: #c3d2a9; --on-action: #11140e;
  --action-soft: #2b3521; --on-action-soft: #c3d2a9; --border: #343c2a; --border-strong: #6b7a57; --signal-text: #e2c36e; --signal-mark: transparent;
  --surface-raised: #20261a; --surface-soft: #20261a; --surface-sunken: #11140e; --leaf-strong: #a9bc8c;
  color: var(--text);
}
.night { background: var(--gradient-night); }
.evergreen { background: var(--gradient-evergreen); --text-muted: #e4e8d6; }
.deep { background: var(--gradient-deep); --text-muted: #e4e8d6; --surface-raised: #2b3521; --border: #465933; --action-soft: #465933; --on-action-soft: #f9f6eb; --action: #c3d2a9; --action-hover: #a9bc8c; --stop: #c3d2a9; --focus: #c3d2a9; --leaf-strong: #c3d2a9; }
.panel { border-radius: var(--radius-xl); position: relative; overflow: hidden; isolation: isolate; }
:root[data-theme="dark"] .panel.night, :root[data-theme="dark"] .panel.evergreen { box-shadow: inset 0 0 0 1px #343c2a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .panel.night, :root:not([data-theme="light"]) .panel.evergreen { box-shadow: inset 0 0 0 1px #343c2a; } }

/* Type */
.stop { color: var(--stop); }
.hl { color: var(--signal-text); background: linear-gradient(transparent 58%, var(--signal-mark) 58%); padding-inline: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: var(--weight-medium) var(--text-eyebrow)/1.4 var(--font-sans); color: var(--action); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px var(--action-soft); flex: none; }
.evergreen .eyebrow, .night .eyebrow { color: var(--text-muted); }
.evergreen .eyebrow::before, .night .eyebrow::before { background: #a9bc8c; box-shadow: 0 0 0 4px #2b3521; }
.sec-title { margin-top: 14px; font: var(--weight-semibold) clamp(2rem, 1.45rem + 2.1vw, 3.25rem)/1.06 var(--font-sans); letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance; }
.sec-lead { margin-top: 16px; color: var(--text-muted); font-size: var(--text-lead); line-height: var(--leading-lead); max-width: 40em; }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-4); }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-small); line-height: var(--leading-small); }
.nowrap { white-space: nowrap; }
.mbc-asterisk { color: var(--stop); font-weight: var(--weight-medium); font-size: 0.7em; vertical-align: 0.32em; line-height: 0; margin-left: 0.02em; }
.mbc-fineprint { font: var(--weight-regular) var(--text-small)/var(--leading-small) var(--font-sans); color: var(--text-muted); }
.mbc-fineprint .mbc-asterisk { font-size: 1em; vertical-align: 0; margin: 0 0.12em 0 0; }

/* Logo: the kit's horizontal lockup with only its transparent padding trimmed */
.lockup { display: block; flex: none; width: 168px; line-height: 0; }
.lockup img { width: 100%; height: auto; }

/* Buttons */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 22px; border-radius: var(--radius-pill); font: var(--weight-medium) 15px/1.2 var(--font-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: center; transition: background-color var(--duration-micro) var(--ease-settle), color var(--duration-micro) var(--ease-settle), border-color var(--duration-micro) var(--ease-settle), transform var(--duration-micro) var(--ease-settle); }
.btn-s { --h: 40px; padding: 0 18px; font-size: 14px; }
.btn-l { --h: 56px; padding: 0 28px; font-size: 16px; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--action-soft); color: var(--on-action-soft); border-color: var(--action-soft); }
.btn-tertiary { background: none; color: var(--action); min-height: 0; padding: 6px 2px; border-radius: 6px; }
.btn-tertiary::after { content: "\2192"; transition: transform var(--duration-micro) var(--ease-settle); }
.btn-tertiary:hover::after { transform: translateX(3px); }
.btn[aria-disabled="true"] { opacity: 0.7; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); font: var(--weight-regular) 14px/1.3 var(--font-sans); color: var(--text); }

/* Cards */
.card { background: var(--surface-raised); border: var(--border-hair); border-radius: var(--radius-md); padding: clamp(20px, 2.4vw, 32px); }
.card.soft { background: var(--surface-soft); border-color: transparent; }

/* The rise: the icon's three bars drawn big. Outer bottoms always show; only the center point may run off. */
.rise { display: block; overflow: visible; }
.rise .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.rise .b1, .rise .b3 { fill: var(--rise-1, #20261a); }
.rise .b2 { fill: var(--rise-2, #2b3521); }
.rise.play .bar { animation: rise var(--duration-rise) var(--ease-settle) both; }
.rise.play .b2 { animation-delay: var(--stagger-rise); }
.rise.play .b3 { animation-delay: calc(var(--stagger-rise) * 2); }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Pillar glyphs. The pillar in focus is gold (brand rule, October 4, 2026): on light grounds the gold bar
   carries a thin ink line, 12 of the glyph's 312 units; on dark grounds the other two bars turn olive. */
.pg { width: 26px; height: 31px; flex: none; overflow: visible; }
.pg polygon { fill: var(--action-soft); }
.pg polygon.on { fill: #e2c36e; stroke: #1e2417; stroke-width: 12; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pg polygon { fill: #465933; } :root:not([data-theme="light"]) .pg polygon.on { fill: #e2c36e; stroke: none; } }
:root[data-theme="dark"] .pg polygon { fill: #465933; } :root[data-theme="dark"] .pg polygon.on { fill: #e2c36e; stroke: none; }

/* App icons from the MBC icon family: line icons on a 256 grid, stroke 16, always beside a visible label */
.ico { width: 24px; height: 24px; flex: none; color: var(--action); }
.ico.sub { width: 20px; height: 20px; }

/* Header: sits over the top of the hero panel on every page, outside <main> */
.page { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.site-head {
  --text: #f9f6eb; --text-muted: #e4e8d6; --action: #a9bc8c; --action-hover: #c3d2a9; --on-action: #11140e; --focus: #a9bc8c;
  position: absolute; z-index: 5; top: var(--panel-inset); left: var(--panel-inset); right: var(--panel-inset);
  padding-inline: clamp(20px, 4.4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; color: var(--text);
}
.site-head .lockup { padding-block: 10px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a:not(.btn) { color: var(--text-muted); text-decoration: none; font: var(--weight-medium) 14px/1 var(--font-sans); padding: 12px 12px; border-radius: var(--radius-pill); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--text); background: #20261a; }
.site-nav .btn { margin-left: 8px; }
.menu-btn { display: none; min-height: var(--tap-min); padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid #6b7a57; background: transparent; color: var(--text); font: var(--weight-medium) 14px/1 var(--font-sans); cursor: pointer; }

/* Hero */
.hero-pad { padding-top: var(--panel-inset); }
.hero { padding: 80px clamp(20px, 4.4vw, 64px) clamp(32px, 4.4vw, 56px); }
/* The rise shows whole (brand rule, October 4, 2026): clear space of at least an eighth of its width below and beside it */
.hero .rise { --rw: clamp(180px, 22vw, 300px); position: absolute; width: var(--rw); right: max(4%, calc(var(--rw) / 8)); bottom: calc(var(--rw) / 8); z-index: -1; }
.hero-copy { padding-top: clamp(40px, 7vw, 104px); max-width: 66%; }
.hero h1 { margin-top: 22px; font: var(--weight-semibold) var(--text-hero)/var(--leading-hero) var(--font-sans); letter-spacing: -0.045em; text-wrap: balance; }
.hero .lede { margin-top: 26px; color: var(--text-muted); font-size: var(--text-lead); line-height: var(--leading-lead); max-width: 36em; }
.hero .row { margin-top: 32px; }
.hero-sound { margin-top: clamp(40px, 6vw, 88px); display: grid; gap: 12px; max-width: 62%; }
.hero-sound p { font: var(--weight-medium) 13px/1.4 var(--font-sans); color: var(--text-muted); }
.hero-sound .chip { background: rgba(17, 20, 14, 0.55); border-color: #343c2a; }
.hero.slim .hero-copy { padding-top: clamp(32px, 5vw, 72px); max-width: 70%; }
.hero.slim h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.hero.slim .rise { --rw: clamp(110px, 12vw, 170px); }

/* Sections */
.sec { padding-block: var(--section-y); }
.sec + .sec { padding-top: 0; }
.sec-head { margin-bottom: clamp(32px, 4vw, 48px); }

/* What we help with */
.help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.help .card { display: grid; gap: 14px; align-content: start; }
@supports (grid-template-rows: subgrid) { .help > .card { grid-row: span 4; grid-template-rows: subgrid; } }
.help .big { background: var(--surface-soft); border-color: transparent; }
.help h3 { font: var(--weight-medium) 22px/1.25 var(--font-sans); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }
.help .line { font-weight: var(--weight-medium); }
.help .para { color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.help dl { display: grid; margin-top: 6px; align-content: start; }
.help dl div { padding: 12px 0; border-top: 1px solid var(--border); display: grid; gap: 4px; align-content: start; }
.help dt { font-weight: var(--weight-medium); display: flex; align-items: center; gap: 10px; }
.help dd { color: var(--text-muted); font-size: 15px; line-height: 1.55; padding-left: 30px; }

/* How it works */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.steps li { border-radius: 18px; background: var(--surface-soft); padding: 18px 18px 22px; display: grid; gap: 8px; align-content: start; }
.steps .top { display: flex; align-items: center; justify-content: space-between; }
.steps b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action-soft); color: var(--on-action-soft); font: var(--weight-medium) 13px/1 var(--font-sans); }
.steps .name { font: var(--weight-medium) 18px/1.3 var(--font-sans); margin-top: 8px; }
.steps .what { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.steps li.last { background: var(--action-soft); }
.steps li.last b { background: var(--action); color: var(--on-action); }
.steps li.last .what { color: var(--on-action-soft); }

/* Who you'll work with, testimonial */
.meet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.meet .card p + p { margin-top: var(--space-4); }
.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.quote blockquote { font: italic var(--weight-regular) var(--text-quote)/var(--leading-quote) var(--font-serif); letter-spacing: -0.01em; text-wrap: balance; }
.quote figcaption { margin-top: 16px; font-size: 14px; color: var(--text-muted); }

/* Three roles side by side: company leadership, team leaders, the people doing the work (home and How we work) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trio .card { display: grid; gap: 12px; align-content: start; }
.trio h3 { font: var(--weight-medium) 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.trio p { color: var(--text-muted); }
.trio .when { font: var(--weight-medium) 13px/1.4 var(--font-sans); color: var(--action); margin-bottom: -6px; }
.trio .when ~ .when { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.trio .then { color: var(--text); }
.after { margin-top: var(--space-8); font: var(--weight-medium) var(--text-h3)/1.45 var(--font-sans); max-width: var(--measure); text-wrap: pretty; }

.more { margin-top: var(--space-8); }

/* How we work: the five steps in depth */
.flow { list-style: none; padding: 0; display: grid; gap: 14px; }
.flow > li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-md); background: var(--surface-soft); }
.flow .head { display: flex; align-items: center; gap: 12px; align-self: start; }
.flow .head b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action-soft); color: var(--on-action-soft); font: var(--weight-medium) 13px/1 var(--font-sans); flex: none; }
.flow h3 { font: var(--weight-medium) 22px/1.25 var(--font-sans); letter-spacing: -0.01em; }
.flow .body p { max-width: var(--measure); }
.flow .body p + p { margin-top: var(--space-3); }
.flow dl { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.flow dt { font: var(--weight-medium) 13px/1.4 var(--font-sans); color: var(--text-muted); }
.flow dd { margin-top: 4px; font-size: 15px; line-height: 1.55; }
.flow li.last { background: var(--action-soft); color: var(--on-action-soft); }
.flow li.last .head b { background: var(--action); color: var(--on-action); }
.flow li.last dt { color: var(--on-action-soft); }
.flow li.last dl { border-color: var(--border-strong); }

/* Evidence labels. Pill styles copied from the brand guide's evidence pills. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); font: var(--weight-medium) var(--text-pill)/1 var(--font-sans); white-space: nowrap; border: 1px solid transparent; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.obs { background: #34431f; color: #f9f6eb; }
.pill.rep { border-color: var(--action); color: var(--action); }
.pill.int { border: 1px dashed var(--action); color: var(--action); }
.pill.int::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.pill.rec { background: var(--action-soft); color: var(--on-action-soft); }
.pill.rec::before { content: "\2192"; width: auto; height: auto; background: none; border-radius: 0; font-size: 12px; }
:root[data-theme="dark"] .pill.obs { background: #a9bc8c; color: #11140e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.obs { background: #a9bc8c; color: #11140e; } }
.evidence { display: grid; margin-top: var(--space-6); border-top: 1px solid var(--border); }
.evidence > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px 20px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--border); }
.evidence dd { color: var(--text-muted); }

/* Questions */
.faq { display: grid; border-top: 1px solid var(--border); }
.faq > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px clamp(24px, 4vw, 64px); padding-block: 22px; border-bottom: 1px solid var(--border); }
.faq dt { font-weight: var(--weight-medium); font-size: var(--text-lead); line-height: var(--leading-lead); }
.faq dd { color: var(--text-muted); max-width: var(--measure); }

/* First conversation (contact) */
.first { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: first; }
.first li { counter-increment: first; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.first li::before { content: counter(first); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action-soft); color: var(--on-action-soft); font: var(--weight-medium) 13px/1 var(--font-sans); }
.first p { padding-top: 3px; max-width: var(--measure); }

/* Closing band */
.close { margin-bottom: var(--panel-inset); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 96px) clamp(20px, 4.4vw, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.close h2 { font: var(--weight-semibold) clamp(2rem, 1.3rem + 2.8vw, 4rem)/1.02 var(--font-sans); letter-spacing: -0.04em; text-wrap: balance; }
.close p { color: var(--text-muted); margin-top: 18px; max-width: 32em; }
.close .row { justify-content: flex-end; }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.promise { margin-top: var(--space-8); border-radius: var(--radius-lg); background: var(--action-soft); color: var(--on-action-soft); padding: clamp(20px, 2.4vw, 32px); font: var(--weight-medium) var(--text-h3)/1.45 var(--font-sans); max-width: var(--measure); }
.apart .line { font: var(--weight-medium) var(--text-h2)/var(--leading-h2) var(--font-sans); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.apart ul { list-style: none; padding: 0; margin-top: var(--space-6); display: grid; }
.apart li { padding: 14px 0 14px 28px; border-top: 1px solid var(--border); position: relative; }
.apart li::before { content: ""; position: absolute; left: 4px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
.ethos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.ethos .mark { width: 72px; height: 72px; color: var(--action); }
.ethos h2 { font: var(--weight-semibold) clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/1.08 var(--font-sans); letter-spacing: -0.03em; }
.ethos p { margin-top: var(--space-3); color: var(--text-muted); max-width: var(--measure); }
.ethos .why { margin-top: var(--space-4); color: var(--text); font: var(--weight-medium) var(--text-h3)/var(--leading-h3) var(--font-sans); letter-spacing: var(--tracking-h3); max-width: 32em; text-wrap: balance; }
.signoff { margin-top: var(--space-6); font-weight: var(--weight-medium); }
.signoff span { display: block; font-weight: var(--weight-regular); color: var(--text-muted); font-size: var(--text-small); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.contact-grid h2 { font: var(--weight-medium) var(--text-h2)/var(--leading-h2) var(--font-sans); letter-spacing: var(--tracking-h2); }
.contact-grid .card > p { margin-top: var(--space-3); color: var(--text-muted); }
.contact-grid .card .row { margin-top: var(--space-6); }
.direct { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); display: grid; gap: 6px; font-size: var(--text-small); }
.direct a { font-weight: var(--weight-medium); }
form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.field { display: grid; gap: 6px; }
.field label { font-weight: var(--weight-medium); }
.field .opt { font-weight: var(--weight-regular); color: var(--text-muted); }
.field .help-text { font-size: var(--text-small); color: var(--text-muted); }
input[type="text"], input[type="email"], textarea { width: 100%; min-height: var(--tap-min); padding: 11px 14px; border-radius: var(--radius-sm); border: var(--border-control); background: var(--surface-raised); color: var(--text); font: var(--weight-regular) 16px/1.5 var(--font-sans); }
textarea { min-height: 140px; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.form-foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.form-foot .small { color: var(--text-muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--text-small); color: var(--text-muted); }

/* Simple pages: thanks, 404, privacy */
.simple .prose h2 { font: var(--weight-medium) var(--text-h3)/var(--leading-h3) var(--font-sans); margin-top: var(--space-8); }
.simple .prose h2 + p { margin-top: var(--space-2); }

/* Footer: rounded night panel */
.site-foot { margin: 0 var(--panel-inset) var(--panel-inset); border-radius: var(--radius-lg); padding: clamp(28px, 3.6vw, 48px) clamp(20px, 4.4vw, 64px); font-size: var(--text-small); color: var(--text-muted); display: grid; gap: 28px; }
.site-foot .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.site-foot .lockup { width: 132px; }
.site-foot .ethos-line { margin-top: 14px; color: var(--text); font-weight: var(--weight-medium); }
.site-foot nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-foot nav a, .site-foot .contact a { color: var(--text-muted); text-decoration: none; display: inline-block; padding: 6px 0; }
.site-foot nav a:hover, .site-foot .contact a:hover { color: var(--text); text-decoration: underline; }
.site-foot .contact { display: grid; gap: 2px; justify-items: start; }
.site-foot .bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--border); }
.site-foot .tagline { color: var(--text); }

/* Placeholders: only in a preview build. A launch build refuses to finish while any remain. */
.todo { background: var(--signal); color: var(--on-signal); border-radius: 4px; padding: 0 4px; font-weight: var(--weight-medium); }
.preview-bar { background: var(--signal); color: var(--on-signal); font: var(--weight-medium) 14px/1.4 var(--font-sans); text-align: center; padding: 10px 16px; }
.preview-bar a { color: inherit; }

/* Content entering: fades up once, then stays */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(var(--enter-distance)); transition: opacity var(--duration-enter) var(--ease-settle), transform var(--duration-enter) var(--ease-settle); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 1080px) {
  .hero-copy, .hero.slim .hero-copy { max-width: none; }
  .hero-sound { max-width: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li.last { grid-column: 1 / -1; }
  .help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help .big { grid-column: 1 / -1; }
  .help .big dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  @supports (grid-template-rows: subgrid) { .help > .card.big { grid-row: auto; grid-template-rows: none; } }
}
@media (max-width: 900px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .site-head.open .site-nav { display: grid; position: absolute; top: 76px; right: 12px; left: 12px; gap: 4px; padding: 10px; border-radius: var(--radius-lg); background: #20261a; box-shadow: 0 0 0 1px #343c2a, var(--shadow-lift); }
  .site-head.open .site-nav a:not(.btn) { padding: 14px 16px; font-size: 16px; }
  .site-head.open .site-nav .btn { margin: 6px 0 0; }
  .meet, .about-grid, .contact-grid, .quote, .close, .flow > li, .faq > div { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .close .row { justify-content: flex-start; }
  .hero .rise, .hero.slim .rise { --rw: 104px; right: 18px; }
  .hero-sound { padding-bottom: 152px; }
  .hero.slim .hero-copy { padding-bottom: 152px; }
}
/* Phone */
@media (max-width: 640px) {
  .panel { border-radius: var(--radius-lg); }
  .lockup { width: 160px; }
  .help { grid-template-columns: 1fr; }
  .help .big dl { grid-template-columns: 1fr; }
  @supports (grid-template-rows: subgrid) { .help > .card { grid-row: auto; grid-template-rows: none; } }
  .steps { grid-template-columns: 1fr; }
  .hero .btn-l { width: 100%; }
  .ethos { grid-template-columns: 1fr; }
  .flow dl { grid-template-columns: 1fr; }
  .evidence > div { grid-template-columns: 1fr; }
  .site-foot .bottom { flex-direction: column; align-items: flex-start; }
}