/* blakeblackwell.com in the Dojo's Climb skin. Phone first.
   Apple-style flow: one idea per screen, thin large type, generous air,
   glass cards, one warm accent. Nothing decorative that isn't in the Dojo. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 300 16px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* the Dojo's ambient light: one amber pool up top, one mint pool low */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 40vh at 80% -10%, rgba(240,169,59,.10), transparent 70%),
    radial-gradient(50vw 40vh at 10% 110%, rgba(52,211,153,.07), transparent 70%);
}
main, header, footer { position: relative; z-index: 1; }
img, video { max-width: 100%; display: block; }
a { color: var(--text-hi); text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--text-hi); letter-spacing: -.03em; }
h1 { font-weight: 200; font-size: clamp(40px, 9vw, 84px); line-height: .98; letter-spacing: -.035em; max-width: 14ch; }
h2 { font-weight: 200; font-size: clamp(32px, 6.4vw, 56px); line-height: 1.02; max-width: 18ch; }
h3 { font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
h1 em, h2 em { font-style: normal; font-weight: 500; background: var(--amber-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.lede { font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 22px; max-width: 46ch; }
.lede.thesis { font-weight: 400; font-size: 20px; line-height: 1.4; color: var(--text-hi); margin-top: 18px; }   /* a one-line thesis over a list: bigger, white from the start */
@media (min-width: 900px) { .lede.thesis { font-size: 22px; } }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #111; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }

/* the Dojo's eyebrows: small caps, wide tracking, quiet */
.eyebrow { font: 500 11px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: rgba(240,169,59,.75); margin-bottom: 18px; }
.sect { font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(240,169,59,.7); margin-bottom: 18px; }

/* ---- buttons: the Dojo's amber pill and ghost ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* Book a call: the one filled button, with a soft amber glow everywhere it appears. */
.btn-primary { background: var(--accent); color: #1a1408; box-shadow: 0 0 22px rgba(240,169,59,.38), 0 10px 30px -14px rgba(240,169,59,.7); }
.btn-primary:hover { background: var(--accent-hi); transform: translateY(-1px); box-shadow: 0 0 30px rgba(240,169,59,.5), 0 10px 30px -14px rgba(240,169,59,.7); }
/* More about me: amber outline, amber text, no fill — the same family, a step quieter. */
.btn-outline { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-outline:hover { background: rgba(240,169,59,.10); border-color: var(--accent-hi); color: var(--accent-hi); }
.btn-ghost { border-color: var(--border-hi); color: var(--text-hi); background: var(--panel); }
.btn-ghost:hover { background: var(--panel-2); border-color: rgba(255,255,255,.22); }
.btn[disabled] { opacity: .6; cursor: progress; }
.link { color: var(--text-hi); font-weight: 500; font-size: 15px; border-bottom: 1px solid rgba(240,169,59,.5); padding-bottom: 2px; }
.link:hover { border-color: var(--accent-hi); }

/* ---- header: logo, links as the Dojo's segmented pill ---- */
.nav { position: sticky; top: 0; z-index: 20; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(10,13,20,.72); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border); }
.logo img { height: 30px; width: auto; }
.pill { display: none; }
.nav .btn { padding: 11px 18px; font-size: 12px; box-shadow: 0 0 18px rgba(240,169,59,.35); }
.nav .btn .long { display: none; }
@media (min-width: 560px) { .nav .btn .long { display: inline; } .nav .btn .short { display: none; } }
@media (min-width: 900px) {
  .nav { padding: 18px 28px; }
  .logo img { height: 36px; }
  .pill { display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); }
  .pill a { font: 500 13px/1 var(--body); letter-spacing: .06em; color: var(--muted); padding: 8px 16px; border-radius: 999px; transition: color .25s var(--ease), background .25s var(--ease); }
  .pill a:hover { color: var(--text-hi); }
  .pill a.active { color: var(--text-hi); background: rgba(255,255,255,.14); box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06); }
  .pill a.quiet { color: var(--faint); }
}

/* ---- the reward: words warm as they climb into the reading band (WARM_TEXT in site.js) ----
   Bullet text starts muted and turns white; labels go from soft amber to full amber. */
.nodes li { color: var(--muted); transition: color .5s var(--ease); }
.nodes li.read { color: var(--text-hi); }
.lede, .prose p, .card p, .fine, .industries, .industries b { transition: color .6s var(--ease); }
.read-block .lede, .read-block .prose p, .read-block .fine, .read-block .industries, .read-block .industries b, .card.read-block p { color: var(--text-hi); }
.sect, .eyebrow { transition: color .5s var(--ease); }
.sect.read, .eyebrow.read { color: var(--accent-hi); }

.nodes li.ping::before, .sect.ping::before, .eyebrow.ping::before { animation: flash .5s var(--ease) both; }
@keyframes flash { 0% { filter: brightness(1); } 30% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
/* the thread arrives: a short line draws down into each label dot as it pings */
.sect i.thread, .eyebrow i.thread { display: none; }
.sect.lit::before, .eyebrow.lit::before { background: var(--mint-hi); }
.sect .arrive, .eyebrow .arrive { position: absolute; left: 11.5px; bottom: 50%; width: 1px; height: 26px; margin-bottom: 4px;
  background: linear-gradient(180deg, rgba(52,211,153,0), rgba(52,211,153,.45)); transform-origin: top; transform: scaleY(0); transition: transform .45s var(--ease); }
.sect.lit .arrive, .eyebrow.lit .arrive, .sect.flow .arrive, .eyebrow.flow .arrive { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .sect .arrive, .eyebrow .arrive { transform: none; transition: none; } }

/* ---- section labels join the game: a small dot before each eyebrow, dark until reached ---- */
.sect, .eyebrow { position: relative; padding-left: 24px; }
.sect::before, .eyebrow::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  border: 1.5px solid rgba(52,211,153,.3); background: rgba(110,231,183,.15); box-sizing: border-box;
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.sect.lit::before, .eyebrow.lit::before { border-color: transparent; background: var(--mint-hi); box-shadow: 0 0 6px rgba(52,211,153,.35); }
.sect::after, .eyebrow::after { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  border: 1.5px solid rgba(110,231,183,.8); opacity: 0; pointer-events: none; }
.sect.ping::after, .eyebrow.ping::after { animation: ring .7s var(--ease) both; }
.hero .eyebrow { padding-left: 24px; font-size: 12px; letter-spacing: .22em; }
.hero .eyebrow .arrive { display: none; }        /* the rail is its thread */
@media (prefers-reduced-motion: reduce) { .sect::before, .eyebrow::before { background: var(--mint-hi); border-color: transparent; } .sect::after, .eyebrow::after { display: none; } }

/* ---- the single drop (hero, once) + threads that draw as they arrive ----
   Motion only ever answers a scroll, never asks for one. On load the hero's
   rail draws from the eyebrow to the button and the light rides it down and
   rests there. Each list's thread draws itself and lights its dots in order
   the moment it scrolls into view. */
/* ---- the hero rail, back by request: the eyebrow's dot is its top, "Learn more" its bottom.
   The line draws down from the eyebrow, one light rides it down and lands on the Learn-more
   dot, which stays lit. The copy sits 24px in so the dots share the page's axis. ---- */
.rail > h1, .rail > h2, .rail > .lede, .rail > .cta, .rail > .fine { padding-left: 24px; }
.hero-fine { margin-top: 18px; font-weight: 500; font-size: 14px; letter-spacing: .03em; color: var(--accent-hi); }
.read-block .hero-fine { color: var(--accent-hi); }   /* stays amber when the block warms */
.hero .rail::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 10px; width: 2px; border-radius: 2px;   /* the original rail: 2px, tapered at both ends */
  background: linear-gradient(180deg, rgba(52,211,153,0), rgba(52,211,153,.35) 30%, rgba(52,211,153,.35) 70%, rgba(52,211,153,0)); transform-origin: top; animation: rail-draw 2.4s var(--ease) both; }
.hero .rail::after { content: ""; position: absolute; left: 12px; top: 6px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--mint-hi); box-shadow: var(--mint-glow); opacity: 0; animation: rail-drop 1.8s var(--ease) 1.2s both; }
@keyframes rail-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rail-drop { 0% { top: 6px; opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
.learn { display: flex; width: max-content; align-items: center; gap: 8px; position: relative; padding-left: 24px; margin-top: 26px;
  font: 500 12px/20px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .4s var(--ease); }
.learn:hover { color: var(--text-hi); }
.learn::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(52,211,153,.3); background: rgba(110,231,183,.15); animation: learn-lit .4s var(--ease) 2.9s both; }
@keyframes learn-lit { to { border-color: transparent; background: var(--mint-hi); box-shadow: 0 0 6px rgba(52,211,153,.35); } }
.learn .chev { color: var(--accent-hi); animation: bob 2.2s ease-in-out 3.1s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .hero .rail::before { animation: none; } .hero .rail::after { display: none; }
  .learn::before { animation: none; border-color: transparent; background: var(--mint-hi); } .learn .chev { animation: none; }
}
.nodes::before { bottom: auto; height: var(--thread, 0px); transition: height .45s var(--ease); }
/* the energy: a soft bright tip riding the end of the thread as it grows */
.nodes::after { content: ""; position: absolute; left: 10.5px; width: 3px; height: 28px; border-radius: 2px; pointer-events: none;
  top: calc(12px + var(--thread, 0px) - 28px); transition: top .45s var(--ease);
  background: linear-gradient(180deg, rgba(110,231,183,0), rgba(110,231,183,.55)); opacity: 0; }
.nodes.flowing::after { opacity: 1; transition: top .45s var(--ease), opacity .3s; }
@media (prefers-reduced-motion: reduce) {
  .nodes::before { transition: none; }
}

/* ---- warmth + scroll pull (2026-09-07 design pass) ----
   The eye follows light and lines. A warm band under the hero bleeds into
   the next section; the mint nodes are threaded by a faint line so each
   list reads as a path; items and cards arrive one after another. */
.hero { position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(240,169,59,0) 0%, rgba(240,169,59,.06) 55%, rgba(240,169,59,0) 100%); }
.nodes { position: relative; }
.nodes::before { content: ""; position: absolute; left: 11.5px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, rgba(52,211,153,0), rgba(52,211,153,.35) 12%, rgba(52,211,153,.35) 88%, rgba(52,211,153,0)); }
.nodes li { position: relative; }
.nodes li::before { position: relative; z-index: 1; }
/* stagger: the second, third, fourth item follow the first */
.rv.in .nodes li, .nodes.rv.in li { animation: node-in .6s var(--ease) both; }
.nodes li:nth-child(2) { animation-delay: .08s !important; }
.nodes li:nth-child(3) { animation-delay: .16s !important; }
.nodes li:nth-child(4) { animation-delay: .24s !important; }
.nodes li:nth-child(5) { animation-delay: .32s !important; }
@keyframes node-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* the closing section sits in a pool of warm light */
.sec:last-of-type { position: relative; overflow: hidden; }
.sec:last-of-type::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 20% 60%, rgba(240,169,59,.10), transparent 70%); }
.sec:last-of-type > .wrap { position: relative; }
/* cards lift under a pointer (desktop only, never on touch) */
@media (hover: hover) {
  .card { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
  .card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(240,169,59,.08); }
}
@media (prefers-reduced-motion: reduce) { .nodes li { animation: none !important; } }

/* ---- desktop only: heading left, content right. Phones keep the single column. ---- */
.split-desk { display: grid; gap: 0; }
@media (min-width: 900px) {
  .split-desk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .split-desk > .lede, .split-desk > div > .lede:first-child { margin-top: 6px; }   /* desktop: the copy tops out level with the heading */
  .nodes-desk { margin-top: 6px !important; }
  .split-desk .record { margin-top: 6px; }
  .sec { padding: clamp(56px, 8vh, 96px) 0; }
}

/* ---- sections ---- */
.sec { padding: clamp(56px, 10vh, 120px) 0; }
.sec + .sec { border-top: 1px solid var(--border); }
.grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- cards: the Dojo's glass ---- */
.card {
  background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 24px; padding: 28px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px -40px rgba(0,0,0,.8);
}
.card h3 { margin-bottom: 10px; }
.card p { font-weight: 300; font-size: 15px; color: var(--muted); }

/* ---- hero: the Dojo's rail with the travelling light ---- */
.hero { padding: clamp(40px, 8vh, 90px) 0 clamp(40px, 6vh, 64px); }
.rail { position: relative; }   /* the old side rail + travelling light retired: the scroll thread is the one line on the page */
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 30px; }
.hero .cta .btn { width: 100%; }
@media (min-width: 560px) { .hero .cta .btn { width: auto; } }
.hero-grid { display: grid; gap: 40px; }
.hero-side { display: grid; gap: 0; }
/* the sunset photo: beside the hero text on desktop; on phones a short strip that opens "What a closer actually does" */
.desk-only { display: none; }
/* phones: the heading and the photo share a row — "What a closer / actually does." left, the sunset shot right */
.job-head { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 14px; align-items: center; }
.job-head h2 { font-size: clamp(28px, 8vw, 34px); }
.job-photo { margin: 0; }
.job-photo .photo { margin: 0; width: 100%; border-radius: 16px; }   /* figure's default side margins would shrink it */
@media (min-width: 900px) { .job-head { display: block; } .job-head h2 { font-size: clamp(32px, 6.4vw, 56px); } }
@media (min-width: 900px) { .desk-only { display: grid; } .phone-only { display: none; } }
.hero-side .photo { order: 2; margin-top: 32px; aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .hero-side .photo { order: 0; margin-top: 0; aspect-ratio: 4 / 5; } }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 56px; } }

/* the bullets from the original hero, set like the Dojo's how-it-works nodes */
.nodes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.nodes li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; font-weight: 300; font-size: 15px; color: var(--text); }
/* dark until pinged: a thin ring and a faint core. Lit: the Dojo's mint glow. */
.nodes li::before { content: ""; width: 24px; height: 24px; margin-top: 0; border-radius: 50%; background: var(--bg); border: 1.5px solid rgba(52,211,153,.25);
  background-image: radial-gradient(circle, rgba(110,231,183,.35) 0 3px, transparent 3.5px);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background-image .35s var(--ease); }
.nodes li.lit::before { border-color: rgba(52,211,153,.5); box-shadow: 0 0 8px rgba(52,211,153,.22);
  background-image: radial-gradient(circle, var(--mint-hi) 0 3px, transparent 3.5px); }
/* the ping: one ring thrown outward the moment a dot is reached */
.nodes li::after { content: ""; position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 1.5px solid rgba(110,231,183,.8); opacity: 0; pointer-events: none; }
.nodes li.ping::after { animation: ring .7s var(--ease) both; }
@keyframes ring { from { transform: scale(.4); opacity: .5; } to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nodes li::before { border-color: rgba(52,211,153,.6); background-image: radial-gradient(circle, var(--mint-hi) 0 3px, transparent 3.5px); } .nodes li::after { display: none; } }
.fine { margin-top: 26px; font-weight: 300; font-size: 14px; color: var(--muted); }

/* ---- photo shadow boxes: quiet placeholders until Blake drops files ---- */
.photo { position: relative; overflow: hidden; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -40px rgba(0,0,0,.9); }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; }
.photo.r-45 { aspect-ratio: 4 / 5; } .photo.r-32 { aspect-ratio: 3 / 2; } .photo.r-11 { aspect-ratio: 1 / 1; } .photo.r-169 { aspect-ratio: 16 / 9; }
.photo.ph { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); }
.photo.ph span { position: absolute; left: 18px; bottom: 16px; font: 500 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
figcaption { position: absolute; left: 18px; bottom: 16px; font: 300 13px/1.3 var(--body); color: rgba(245,247,250,.8); }

/* ---- the numbers: the Dojo's money-strip, animated on scroll ---- */
.record { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; margin-top: 36px; }
@media (min-width: 900px) {
  .record { grid-template-columns: repeat(4, 1fr); }
  .split-desk .record { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .split-desk .record b { font-size: clamp(38px, 3.6vw, 52px); white-space: nowrap; }
}
.record b { display: block; font: 200 clamp(38px, 8vw, 56px)/1 var(--display); letter-spacing: -.03em; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.record b em { font-style: normal; font-weight: 500; background: var(--amber-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---- the charge (reversible: CHARGE_NUMBERS in site.js): the green rises through each number as it counts, then settles to white ---- */
.count.charging { background: linear-gradient(0deg, var(--mint-hi) var(--fill, 0%), var(--text-hi) var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.count.charged { animation: charge 1.2s var(--ease) both; }
@keyframes charge { 0% { color: var(--mint-hi); text-shadow: 0 0 14px rgba(110,231,183,.35); } 100% { color: var(--text-hi); text-shadow: 0 0 0 rgba(110,231,183,0); } }
@media (prefers-reduced-motion: reduce) { .count.charging { background: none; color: var(--text-hi); } .count.charged { animation: none; } }
.record > div > span { display: block; margin-top: 10px; font: 500 11px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.industries { margin-top: 40px; font-weight: 300; font-size: 15px; color: var(--muted); max-width: 58ch; }
.industries b { font-weight: 500; color: var(--text); }

/* ---- about teaser ---- */
.about-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 56px; } }
.about-grid .photo { max-width: 360px; }
.proof-about { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }   /* the man behind the numbers, same block */
.proof-about h3 { font-size: 26px; }
.proof-about .lede { margin-top: 14px; }

/* ---- inner pages ---- */
.page-head { padding: clamp(40px, 8vh, 90px) 0 clamp(28px, 5vh, 56px); }
.prose { max-width: 62ch; }
.prose p { font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 1.1em; }
.prose h2 { font-size: clamp(28px, 5vw, 40px); margin: 44px 0 14px; }
.prose h3 { margin: 30px 0 10px; }
.prose ul { padding-left: 0; list-style: none; }
.legal .prose p, .legal .prose li { font-size: 15px; color: var(--muted); }
.fill { background: rgba(240,169,59,.14); color: var(--accent-hi); padding: 0 .3em; border-radius: 4px; font: 500 .9em ui-monospace, Menlo, monospace; }
.notice { border: 1px dashed rgba(240,169,59,.45); border-radius: 16px; padding: 14px 18px; color: var(--muted); font-size: 14px; margin-bottom: 28px; }

/* ---- forms (apply): the Dojo's fields ---- */
/* ---- the form: iOS-style inset groups on the Dojo's glass ---- */
.form { display: grid; gap: 22px; }
.form.ios { gap: 26px; }
.group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.group-title { padding: 0 16px; font: 500 13px/1.3 var(--body); letter-spacing: .01em; color: var(--muted); }
.rows { background: rgba(255,255,255,.045); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.rows > * + *, .two-up > * + * { border-top: 1px solid var(--border); }
.two-up { display: grid; }
@media (min-width: 560px) { .two-up { grid-template-columns: 1fr 1fr; } .two-up > * + * { border-top: 0; border-left: 1px solid var(--border); } }
.row { display: grid; gap: 3px; padding: 11px 16px 12px; cursor: text; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.row-lbl { font: 500 12px/1.3 var(--body); color: var(--muted); letter-spacing: .01em; text-transform: none; }
.row-lbl em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 6px; }
.row input, .row textarea { width: 100%; border: 0; background: transparent; padding: 2px 0 0; color: var(--text-hi); font: 400 17px/1.4 var(--body); outline: none; border-radius: 0; }
.row textarea { min-height: 48px; resize: none; overflow: hidden; }
.row input::placeholder, .row textarea::placeholder { color: rgba(255,255,255,.2); }
.row:focus-within { background: rgba(240,169,59,.06); box-shadow: inset 3px 0 0 var(--accent); }
.pick { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; cursor: pointer;
  color: var(--text-hi); font: 400 16px/1.4 var(--body); letter-spacing: 0; text-transform: none; transition: background .25s var(--ease); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-hi); box-sizing: border-box; position: relative; transition: background .2s var(--ease), border-color .2s var(--ease); }
.pick i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #1a1206; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); }
.pick:has(input:checked) { background: rgba(240,169,59,.07); }
.pick:has(input:checked) i { background: var(--accent); border-color: transparent; box-shadow: 0 0 14px rgba(240,169,59,.35); }
.pick:has(input:checked) i::after { transform: rotate(45deg) scale(1); }
.pick:has(input:focus-visible) { box-shadow: inset 3px 0 0 var(--accent); }
.btn-big { width: 100%; padding: 18px 24px; font-size: 16px; }
.form-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: -8px; }
/* legacy field styles (other pages) */
.field { display: grid; gap: 8px; }
.field .lbl, .field > label { font: 500 11px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border-hi); background: var(--panel); color: var(--text-hi); font: 300 16px/1.4 var(--body); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.form-error { color: #ff9670; font-size: 14px; min-height: 1.4em; padding: 0 16px; margin: -6px 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-weight: 300; font-size: 15px; color: var(--text); }
.steps li b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--display); color: var(--mint-hi); border: 1.5px solid rgba(52,211,153,.5); box-shadow: 0 0 14px rgba(52,211,153,.25); }
#calendly-wrap { min-height: 700px; border-radius: 24px; overflow: hidden; background: var(--panel); border: 1px solid var(--border); }
#apply-step-book { scroll-margin-top: 90px; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { font-weight: 300; font-size: 14px; color: var(--muted); }
.footer a:hover { color: var(--text-hi); }
.footer .logo img { height: 28px; }
.footer .small { margin-top: 30px; font-weight: 300; font-size: 12px; line-height: 1.6; color: var(--faint); max-width: 70ch; }

/* ---- reveal: the Dojo's quiet lift, once ---- */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}