/* ProxAi — measured from the reference: black, a light serif for every headline (52px, line-height 1.2, edges fading to 50%),
   Inter for the rest (14px nav, 18px leads, 15px card copy at 65%), gold #ffb433 as the only color, gradient buttons with a 12px radius,
   charcoal cards (#0f0f0f, 12px) and bordered cards with a gold tab, a dotted container with a gold line on top. */
:root {
  --bg: #000000; --bg2: #050505; --card: #0f0f0f; --card2: #141414; --line: #232323; --line2: #333333; --field: #0f0f0f;
  --fg: #fafafa; --fg2: #e0e0e0; --muted: rgba(255, 255, 255, .65); --faint: rgba(255, 255, 255, .45);
  --gold: #ffb433; --gold2: #ffd999; --gold3: #f5d49a; --gold-ink: #0b0700; --gold-dim: rgba(255, 180, 51, .14);
  --accent: var(--gold); --accent-dim: var(--gold-dim);
  --grad: linear-gradient(290deg, #ffd999 0%, #ffb433 30%, #f5d49a 67%, #ffb433 100%);
  --green: #12b669; --green-bg: rgba(18, 182, 105, .12); --amber: var(--gold); --bad: #e07070; --red: #e07070;
  /* aliases kept for pages that reference the old names */
  --paper: var(--bg); --paper2: var(--card); --paper3: var(--card2); --ink: var(--fg); --ink2: var(--fg2); --rule: var(--line); --rule2: var(--line2); --blue: var(--gold); --blue2: var(--gold2); --blue-dim: var(--gold-dim); --panel: var(--card);
  --serif: "Newsreader", "Tiempos Headline", "Iowan Old Style", "Times New Roman", Times, serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: var(--serif); --mono: var(--font);
  --max: 1280px; --gutter: 40px; --r: 16px; --r2: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--gold); color: #000; }
@media (max-width: 760px) { :root { --gutter: 20px; } }

/* type */
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; letter-spacing: 0; line-height: 1.2; color: var(--fg); }
h1 { font-size: clamp(38px, 4.6vw, 60px); }
h2 { font-size: clamp(34px, 3.8vw, 52px); }
h3 { font-size: 24px; font-weight: 500; line-height: 1.25; }
h4 { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
/* centered headlines fade out at both edges, like the reference; the box fits the text so the fade sits on the words */
.hero h1, .head.center h2, .page-head h1, .band-cta h2, .dots .head h2 { display: inline-block; background: linear-gradient(90deg, rgba(250, 250, 250, .5) 0%, #fafafa 22%, #fafafa 78%, rgba(250, 250, 250, .5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 em, h2 em, h3 em { font-style: normal; }
p { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 64ch; }
p.lead { font-size: 18px; color: var(--fg2); max-width: 60ch; line-height: 1.5; letter-spacing: -.01em; }
.k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.k.accent { color: var(--gold); }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; margin-top: 20px; font-size: 18px; color: var(--fg2); letter-spacing: -.01em; }
.sub span + span::before { content: "I"; color: var(--fg2); margin-right: 10px; }
@media (max-width: 640px) { .sub { flex-direction: column; gap: 6px; font-size: 16px; } .sub span + span::before { display: none; } }
.hl { background: #f7a21b; color: #fff; padding: 1px 8px 2px; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dark { background: var(--bg); color: var(--fg); }

/* nav: wordmark left, links centered, gold button right */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); height: 72px; background: rgba(0, 0, 0, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .25s; }
.nav.solid { background: rgba(0, 0, 0, .92); box-shadow: 0 1px 0 var(--line); }
.nav .brand { display: flex; align-items: baseline; gap: 2px; font-family: var(--serif); font-weight: 400; font-size: 27px; color: #fff; line-height: 1; justify-self: start; }
.nav .brand small { font-family: var(--serif); font-size: 13px; color: #fff; }
.nav .brand svg { display: none; }
.nav .links { display: flex; gap: 20px; align-items: center; justify-self: center; grid-column: 2; }
.nav .links a { font-size: 14px; font-weight: 400; letter-spacing: -.02em; color: #fff; padding: 6px 0; transition: color .15s; }
.nav .links a:hover { color: var(--gold2); } .nav .links a.on { color: var(--gold); }
.nav .links a.cta { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); background: var(--grad); color: #000; padding: 8px 16px; border-radius: 12px; font-weight: 600; box-shadow: 0 0 0 1.4px #3b3b3b, 0 0 24px rgba(255, 180, 51, .22); }
.nav .links a.cta:hover { filter: brightness(1.05); color: #000; }
.nav .burger { display: none; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; justify-self: end; grid-column: 3; }
@media (max-width: 960px) {
  .nav { grid-template-columns: 1fr auto; height: 64px; }
  .nav .links { display: none; position: fixed; inset: 64px 0 0 0; background: var(--bg); flex-direction: column; padding: 30px var(--gutter); gap: 18px; align-items: flex-start; }
  .nav .links a { font-size: 18px; }
  .nav .links a.cta { position: static; transform: none; margin-top: 10px; }
  .nav .links.open { display: flex; }
  .nav .burger { display: block; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line2); color: #fff; background: transparent; padding: 13px 24px; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.01em; border-radius: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, filter .15s; }
.btn:hover { border-color: var(--gold); color: var(--gold2); }
.btn.solid { background: var(--grad); border-color: transparent; color: #000; box-shadow: 0 0 0 1.4px #3b3b3b, 0 0 30px rgba(255, 180, 51, .25), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.solid:hover { filter: brightness(1.05); color: #000; }
.btn.accent { border-color: var(--gold); color: var(--gold); } .btn.accent:hover { background: var(--gold); color: #000; }
.btn.small { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn.ghost { border-color: var(--line); color: var(--muted); } .btn.ghost:hover { border-color: var(--gold); color: var(--gold2); background: transparent; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.wide { min-width: 317px; min-height: 49px; font-size: 15px; }
@media (max-width: 640px) { .btn.wide { width: 100%; } }

/* hero: copy centered over black smoke */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0f0f0f 0%, #000 100%); min-height: 92vh; display: flex; align-items: center; }
.hero canvas { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); display: block; opacity: .9; filter: blur(22px); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #000 100%); pointer-events: none; }
.hero .inner { position: relative; z-index: 1; width: 100%; padding: 160px var(--gutter) 120px; max-width: var(--max); margin: 0 auto; }
.hero .copy { text-align: center; max-width: 860px; margin: 0 auto; }
.hero .k { margin-bottom: 22px; }
.hero h1 { max-width: 820px; margin: 0 auto; font-size: clamp(34px, 3.6vw, 52px); }
.hero p.lead { margin: 22px auto 0; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.hero .viz, .hero .fade, .hero .scroll { display: none; }
.mobile-only { display: none !important; }
@media (max-width: 960px) { .mobile-only { display: flex !important; } }
@media (max-width: 640px) { .hero .actions .btn { flex: 1 1 100%; } .hero { min-height: 0; } .hero .inner { padding: 130px var(--gutter) 80px; } }

/* sections */
section.block { padding: 100px 0; }
section.block.tight { padding: 48px 0; }
.head { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; margin-bottom: 40px; }
.head h2 { max-width: 820px; }
.head p { margin-top: 10px; font-size: 18px; color: var(--fg2); letter-spacing: -.01em; }
.head.center { text-align: center; } .head.center h2, .head.center p { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 16px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c2 { grid-template-columns: repeat(2, 1fr); } .grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid.c3, .grid.c4, .grid.c2 { grid-template-columns: 1fr; } }

/* bordered cards: charcoal, 16px radius, a gold tab top-left, a soft glow with rings and a few stars top-right */
.cell { position: relative; overflow: hidden; background: #0c0c0c; padding: 40px 28px 34px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; border: 1px solid #262626; border-radius: var(--r); transition: border-color .2s; }
.cell::before { content: ""; position: absolute; top: -1px; left: 22px; width: 22px; height: 3px; background: var(--gold); border-radius: 0 0 2px 2px; }
.cell::after { content: ""; position: absolute; top: -170px; right: -170px; width: 480px; height: 480px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .045), transparent 60%), repeating-radial-gradient(circle at center, transparent 0 52px, rgba(255, 255, 255, .05) 52px 53px),
  radial-gradient(1.2px 1.2px at 62% 58%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 55% 66%, rgba(255,255,255,.35) 50%, transparent 51%), radial-gradient(1px 1px at 76% 62%, rgba(255,255,255,.45) 50%, transparent 51%), radial-gradient(1px 1px at 66% 72%, rgba(255,255,255,.3) 50%, transparent 51%);
  -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 68%); mask-image: radial-gradient(circle at center, #000 25%, transparent 68%); }
.cell:hover { border-color: var(--line2); }
.cell > * { position: relative; z-index: 1; }
.cell .k { margin-bottom: 2px; }
.cell h3 { font-size: 24px; }
.cell p { font-size: 15px; margin: 0; max-width: 42ch; color: var(--muted); }
.cell .ico { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--gold); }
.cell .ico svg { width: 100%; height: 100%; }
.cell .more { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--gold); }
.cell .for { font-size: 13px; color: var(--faint); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); width: 100%; }
.cell .for b { color: var(--muted); font-weight: 600; }
.cell.left { align-items: flex-start; text-align: left; padding: 34px 28px; }
.cell.left p { max-width: none; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* the team list on the home page */
.teamlist { list-style: none; margin: 8px 0 0; padding: 0; }
.teamlist li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.teamlist li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; transform: translateY(-2px); }
.teamlist li b { color: #fff; font-weight: 600; }
.prose p { font-size: 18px; color: #fff; line-height: 1.8; letter-spacing: -.01em; max-width: 60ch; }

/* a dotted container with a gold line at the top */
.dots { position: relative; border: 1px solid #1e1e1e; border-radius: 16px; padding: 28px; background: #040404 radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.2px) 0 0 / 24px 24px; }
.dots::before { content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: min(28%, 300px); height: 3px; background: var(--grad); border-radius: 3px; box-shadow: 0 0 22px rgba(255, 180, 51, .55); }
.dots .head { margin-bottom: 28px; margin-top: 20px; }
@media (max-width: 640px) { .dots { padding: 22px 12px 12px; } }

/* stats and tiles */
.stat { padding: 26px 0 0; border-top: 1px solid var(--line2); }
.stat .v { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 64px); font-weight: 300; line-height: 1; color: var(--fg); }
.stat .v small { font-size: .45em; color: var(--muted); margin-left: 4px; }
.stat .l { font-size: 14px; color: var(--muted); margin-top: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--card); border-radius: 12px; padding: 24px 20px 22px; }
.tile .ico { width: 44px; height: 44px; color: var(--gold); margin-bottom: 44px; }
.tile .ico svg { width: 100%; height: 100%; }
.tile .v { font-family: var(--font); font-size: 24px; font-weight: 600; letter-spacing: -.04em; line-height: 1.3; color: var(--fg); }
.tile .l { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* metrics widget (the numbers): small dark cards with a label, a big figure and a green delta pill, plus a chart card */
.metrics { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; }
@media (max-width: 960px) { .metrics { grid-template-columns: 1fr 1fr; } .metrics .chart { grid-column: 1 / -1; } }
@media (max-width: 600px) { .metrics { grid-template-columns: 1fr; } }
.metrics .col { display: grid; gap: 12px; align-content: start; }
.metric { background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 12px; padding: 16px 18px; }
.metric .lab { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.metric .lab svg { width: 14px; height: 14px; color: rgba(255, 255, 255, .5); }
.metric .row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.metric .big { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.metric .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--green); background: var(--green-bg); border: 1px solid rgba(18, 182, 105, .35); border-radius: 6px; padding: 3px 8px; }
.metric .pill.down { color: var(--bad); background: rgba(224, 112, 112, .1); border-color: rgba(224, 112, 112, .35); }
.metric .sub3 { font-size: 12px; color: var(--faint); margin-top: 6px; }
.chart { background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 12px; padding: 18px 18px 12px; }
.chart .lab { font-size: 12px; color: rgba(255, 255, 255, .6); }
.chart .big { font-size: 18px; font-weight: 600; color: #fff; margin: 2px 0 10px; }
.chart svg { width: 100%; height: auto; margin-top: 6px; }

/* steps (services page) */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps, .steps.c3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .steps, .steps.c3 { grid-template-columns: 1fr; } }
.step { position: relative; overflow: hidden; background: #0c0c0c; border: 1px solid #262626; border-radius: var(--r); padding: 34px 26px 30px; }
.step::before { counter-increment: s; content: "0" counter(s); display: inline-block; font-size: 12px; letter-spacing: .14em; color: var(--gold); font-weight: 600; margin-bottom: 20px; padding: 6px 10px; border: 1px solid rgba(255, 180, 51, .4); border-radius: 999px; }
.step h3 { margin-bottom: 10px; } .step p { font-size: 15px; margin: 0; }

/* timeline: gold dots on a gold line, serif titles, meta rows with gold icons */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; }
.timeline li { position: relative; padding: 0 0 64px 60px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(255, 180, 51, .12); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 55%, #1e1e1e 100%); }
.timeline li:last-child::after { display: none; }
.timeline h3 { font-size: clamp(28px, 2.8vw, 36px); font-weight: 400; margin-bottom: 8px; }
.timeline .sub2 { font-size: 18px; color: var(--fg2); margin-bottom: 18px; letter-spacing: -.01em; }
.timeline .meta { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 17px; color: var(--fg2); }
.timeline .meta b { font-weight: 700; color: #fff; }
.timeline .meta svg { width: 24px; height: 24px; color: var(--gold); flex: 0 0 auto; }
.timeline p { font-size: 15px; margin-top: 12px; max-width: 60ch; }

/* marker card: gold dot + paragraphs, one phrase highlighted */
.mark { position: relative; background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 16px; padding: 36px 40px 36px 88px; max-width: 980px; margin: 0 auto; }
.mark::before { content: ""; position: absolute; left: 38px; top: 46px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px rgba(255, 180, 51, .12); }
.mark p { font-size: 20px; color: #fff; line-height: 1.6; margin: 0 0 20px; max-width: none; letter-spacing: -.01em; }
.mark p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .mark { padding: 28px 20px 28px 54px; } .mark::before { left: 20px; top: 36px; } .mark p { font-size: 17px; } }

/* panels, quotes, cta band */
.panel { position: relative; background: var(--card); border: 1px solid #1f1f1f; border-radius: 16px; padding: 28px; }
.panel.paper { background: var(--card); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.panel.paper .k { color: var(--gold); }
.panel.paper p { color: var(--muted); }
.panel.paper b, .panel.paper strong { color: var(--fg); }
.quote { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; max-width: 24ch; color: var(--fg); }
.quote span { color: var(--gold); }
.band-cta { position: relative; padding: 120px 0; text-align: center; background: radial-gradient(800px 380px at 50% 115%, rgba(255, 180, 51, .14), transparent 60%), var(--bg); color: var(--fg); }
.band-cta .k { color: var(--gold); }
.band-cta h2 { margin: 16px auto 18px; max-width: 820px; }
.band-cta p.lead { color: var(--fg2); }
.band-cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.center-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }

/* numbers table (kept for the services page) */
.numbers { border: 1px solid #1f1f1f; border-radius: 16px; overflow: hidden; background: var(--card); }
.numbers table { width: 100%; border-collapse: collapse; font-size: 15px; }
.numbers th { text-align: left; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 16px 22px; border-bottom: 1px solid #1f1f1f; background: #0a0a0a; }
.numbers td { padding: 18px 22px; border-bottom: 1px solid #1f1f1f; vertical-align: middle; color: var(--muted); font-variant-numeric: tabular-nums; }
.numbers tr:last-child td { border-bottom: 0; }
.numbers td:first-child { color: var(--fg); font-weight: 600; }
.numbers td:first-child small { display: block; color: var(--faint); font-weight: 500; font-size: 12.5px; margin-top: 3px; }
.numbers td.v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.numbers td.c { white-space: nowrap; font-weight: 600; }
.numbers .up { color: var(--green); } .numbers .down { color: var(--bad); }
.numbers th.r, .numbers td.r { text-align: right; }
@media (max-width: 760px) { .numbers table { font-size: 14px; } .numbers th, .numbers td { padding: 14px 14px; } .numbers td.v { font-size: 18px; } .numbers .hide-m { display: none; } }

/* two-column list (who we work with / don't) */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .yesno { grid-template-columns: 1fr; } }
.yesno .cell ul { margin: 6px 0 0; padding: 0; list-style: none; width: 100%; }
.yesno .cell li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--fg2); display: flex; gap: 12px; align-items: baseline; }
.yesno .cell li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; transform: translateY(-2px); }
.yesno .cell.no li { color: var(--muted); } .yesno .cell.no li::before { background: rgba(255, 255, 255, .3); }

/* practice list (services) */
.practice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .practice { grid-template-columns: 1fr; } }
.practice > div { position: relative; overflow: hidden; background: #0c0c0c; border: 1px solid #262626; border-radius: var(--r); padding: 32px 26px 26px; }
.practice > div::before { content: ""; position: absolute; top: -1px; left: 22px; width: 22px; height: 3px; background: var(--gold); border-radius: 0 0 2px 2px; }
.practice h3 { margin: 6px 0 8px; }
.practice ul { margin: 10px 0 0; padding: 0; list-style: none; }
.practice li { font-size: 15px; color: var(--muted); padding: 9px 0; border-top: 1px solid var(--line); }
.practice li::before { content: "—"; color: var(--gold); margin-right: 10px; }

/* the planner / relationship-map switch on the work pages */
.switch { display: inline-flex; gap: 6px; background: #0a0a0a; border: 1px solid #262626; border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.switch a { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.switch a.on { background: var(--grad); color: #000; }

/* reveal */
html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
html.js .rv.in { opacity: 1; transform: none; }
@media print, (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }

/* page header (inner pages) */
.page-head { padding: 170px 0 70px; background: radial-gradient(900px 420px at 50% -20%, rgba(255, 255, 255, .08), transparent 60%), var(--bg); text-align: center; }
.page-head h1 { max-width: 820px; margin: 0 auto; font-size: clamp(34px, 3.8vw, 52px); }
.page-head p.lead { margin: 22px auto 0; }
.crumbs { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; font-weight: 600; }
.crumbs a { color: var(--faint); } .crumbs a:hover { color: var(--fg); }
.page-head.left { text-align: left; } .page-head.left h1, .page-head.left p.lead { margin-left: 0; }
.page-head.left h1 { display: block; background: none; -webkit-text-fill-color: #fafafa; color: #fafafa; }

/* forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--fg2); margin-bottom: 7px; }
.field input, .field textarea, .field select { width: 100%; background: var(--field); color: var(--fg); border: 1px solid var(--line2); padding: 13px 15px; font: inherit; font-size: 15px; border-radius: var(--r2); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffb433' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.field textarea { min-height: 150px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.note { font-size: 13px; color: var(--faint); }
.ok { color: var(--green); } .bad { color: var(--bad); }

/* footer */
footer { border-top: 1px solid var(--line); background: var(--bg); padding: 64px 0 28px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { footer .cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { footer .cols { grid-template-columns: 1fr; } }
footer .brand { display: flex; align-items: baseline; gap: 2px; font-family: var(--serif); font-size: 27px; color: #fff; margin-bottom: 14px; line-height: 1; }
footer .brand small { font-family: var(--serif); font-size: 13px; color: #fff; }
footer .brand svg { display: none; }
footer h4 { margin-bottom: 14px; color: var(--gold); }
footer ul { list-style: none; margin: 0; padding: 0; } footer li { margin-bottom: 9px; } footer li a { color: var(--muted); font-size: 15px; } footer li a:hover { color: var(--fg); }
footer .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
footer .disclaimer { font-size: 12.5px; color: var(--faint); max-width: none; margin: 32px 0 0; line-height: 1.6; }

/* tables (time page etc.) */
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 10px 8px; border-bottom: 1px solid var(--line2); font-weight: 600; }
table.t td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--fg2); }
table.t td b { color: var(--fg); }
table.t td.r, table.t th.r { text-align: right; }
table.t.kv td:first-child { white-space: nowrap; padding-right: 16px; }
table.t input[type=number] { width: 64px; background: var(--field); color: var(--fg); border: 1px solid var(--line2); padding: 7px 6px; font: inherit; font-size: 13.5px; text-align: right; border-radius: 8px; font-variant-numeric: tabular-nums; }
table.t input[type=number]:focus { outline: none; border-color: var(--gold); }
table.t input[type=number].over { border-color: var(--gold); color: var(--gold); }
table.t select, table.t input[type=text] { background: var(--field); color: var(--fg); border: 1px solid var(--line2); padding: 7px 8px; font: inherit; font-size: 14px; width: 100%; border-radius: 8px; }
table.t select:focus, table.t input[type=text]:focus { outline: none; border-color: var(--gold); }
table.t tr.tot td { font-weight: 700; border-top: 1px solid var(--line2); color: var(--fg); }
.badge { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border: 1px solid var(--line2); color: var(--muted); border-radius: 999px; }
.badge.ok { border-color: var(--green); color: var(--green); } .badge.warn { border-color: var(--gold); color: var(--gold); } .badge.accent { border-color: var(--gold); color: var(--gold); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.toolbar .sp { flex: 1; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 110px; margin-top: 10px; }
.bars div { background: rgba(255, 180, 51, .12); border-top: 2px solid var(--gold); position: relative; min-height: 2px; border-radius: 4px 4px 0 0; }
.bars div span { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.bars div b { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 10.5px; letter-spacing: .1em; color: var(--faint); font-weight: 600; }
@media print { .nav, footer, .toolbar, .noprint { display: none !important; } body { background: #fff; color: #000; } .page-head { padding-top: 20px; background: none; } h1, h2 { background: none; color: #000; -webkit-text-fill-color: #000; } h3, table.t td, table.t th { color: #000; border-color: #ccc; } table.t input { border: 0; color: #000; background: #fff; } }