/* ============================================================
   Dean Ahlgren · site styles
   Carried over from the Maka Works build (2026-09-23) with the
   Maka eye mark replaced by a DA monogram. Palette, type stack,
   and hero motion unchanged.
   ============================================================ */
:root {
  --ground-core:#385E88; --ground-mid:#25446C; --ground-deep:#152740; --ground-edge:#0D1929;
  --ink:#FFFFFF; --body:#DFE8F2; --muted:#B9CBDD; --kicker:#D2E2F2;
  --coral:#F07A5A; --peach:#FFD0BD; --primary-ink:#0D1A2A;
  --card:rgba(13,24,40,.42); --strong:#FFFFFF; --quote:#F2F6FA; --list:#E6EEF6; --outline:rgba(220,235,250,.35); --outline-hover:rgba(220,235,250,.7); --accent:#FFD0BD; --badge-border:rgba(240,122,90,.4); --heard-bg:rgba(240,122,90,.06); --heard-border:rgba(240,122,90,.35); --line:rgba(220,235,250,.16); --line-soft:rgba(220,235,250,.09);
  --font-display:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-brand:'Poppins','Trebuchet MS',sans-serif;
  --max:1180px; --gutter:clamp(24px,6vw,96px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
html,body { margin:0; padding:0; background:var(--ground-deep); }
body { font-family:var(--font-body); font-size:17px; line-height:1.6; color:var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
::selection { background:var(--coral); color:var(--primary-ink); }
a { color:#D2E4F6; text-decoration:none; transition:color .18s ease; }
a:hover { color:var(--ink); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--coral); outline-offset:3px; border-radius:3px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { color:var(--ink); font-weight:400; }
h1,h2 { font-family:var(--font-display); letter-spacing:-.02em; line-height:1.05; text-wrap:balance; }
h2 { font-size:clamp(32px,3.4vw,46px); }
h3 { font-family:var(--font-body); font-weight:600; font-size:20px; line-height:1.3; }
em.accent { font-style:italic; color:var(--accent); }
.skip-link { position:absolute; top:-60px; left:20px; background:var(--coral); color:var(--primary-ink); padding:8px 16px; font-weight:700; font-size:13px; z-index:100; border-radius:3px; }
.skip-link:focus { top:16px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.narrow { max-width:860px; }
.kicker { font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--kicker); display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; }
.kicker::before { content:""; width:28px; height:1.5px; background:var(--coral); }
.lede { font-size:19px; line-height:1.6; color:var(--body); max-width:58ch; }
.muted { color:var(--muted); }
.small { font-size:14px; }

/* Buttons: rectangular, solid + outline, like the reference */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-size:15px; font-weight:600; line-height:1.2; padding:14px 22px; border-radius:4px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .16s ease, background .18s ease, border-color .18s ease, color .18s ease; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-solid { background:var(--coral); color:var(--primary-ink); border-color:var(--coral); }
.btn-solid:hover { background:#F58565; color:var(--primary-ink); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--outline); }
.btn-outline:hover { border-color:var(--outline-hover); background:rgba(127,160,200,.10); color:var(--ink); }
.btn-nav { padding:0 14px; height:32px; font-size:13.5px; font-weight:600; }
.arrow { transition:transform .16s ease; }
.btn:hover .arrow, .card-link:hover .arrow { transform:translateX(3px); }

/* Nav: full-width bar, sticky */
.topbar { position:sticky; top:0; z-index:20; background:rgba(13,25,41,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line-soft); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.brand { display:flex; align-items:center; gap:10px; }
.monogram { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border:1.5px solid var(--coral); border-radius:50%; font-family:var(--font-display); font-style:italic; font-size:14px; letter-spacing:.02em; color:var(--ink); line-height:1; }
.wordmark { font-family:var(--font-brand); font-weight:700; font-size:19px; letter-spacing:-.015em; color:var(--ink); }
.wordmark em { font-style:normal; color:var(--coral); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { font-size:14.5px; font-weight:500; color:#D0E0EE; padding:8px 12px; border-radius:4px; }
.nav-links a:hover { color:#fff; background:rgba(235,245,255,.07); }

/* Hero: two columns, text left, portrait right, motion behind */
.hero { position:relative; overflow:hidden; background:radial-gradient(1300px 850px at 46% 26%, var(--ground-core) 0%, var(--ground-mid) 46%, var(--ground-deep) 78%, var(--ground-edge) 100%); }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(220,235,250,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(220,235,250,.035) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(circle at 60% 40%,#000 30%,rgba(0,0,0,.1) 80%); -webkit-mask-image:radial-gradient(circle at 60% 40%,#000 30%,rgba(0,0,0,.1) 80%); pointer-events:none; z-index:1; }
#silks { position:absolute; inset:0; width:100%; height:100%; filter:blur(64px) saturate(1.08); opacity:.85; pointer-events:none; z-index:1; }
#ocean-waves { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
#water-droplets { position:absolute; right:0; top:0; width:min(70vw,980px); height:100%; pointer-events:auto; z-index:2; }
.hero .wrap { position:relative; z-index:5; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:72px; align-items:center; padding-top:clamp(56px,8vh,104px); padding-bottom:clamp(48px,7vh,88px); }
/* faint column guides, as in the reference */
.hero .wrap::before, .hero .wrap::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(220,235,250,.05) 20%,rgba(220,235,250,.05) 80%,transparent); pointer-events:none; }
.hero .wrap::before { left:max(calc(var(--gutter) - 120px), calc(50% - 50vw + 20px)); } .hero .wrap::after { right:max(calc(var(--gutter) - 120px), calc(50% - 50vw + 20px)); } /* 148px further out than the text edge; never closer than 20px to the viewport edge */
.hero h1 { font-size:clamp(42px,4.7vw,66px); max-width:none; }
.hero .lede { margin-top:28px; max-width:44ch; }
.hero .hello { font-size:22px; font-weight:600; color:var(--body); margin:0 0 12px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-meta { margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 26px; font-size:14px; color:var(--muted); list-style:none; padding-left:0; }
.hero-meta li { display:flex; align-items:center; gap:8px; }
.hero-meta li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); }
.portrait { position:relative; justify-self:end; width:min(100%,420px); }
.portrait img { display:block; width:100%; height:auto; aspect-ratio:969/1024; object-fit:cover; border-radius:10px; border:1px solid rgba(220,235,250,.22); box-shadow:0 30px 70px -20px rgba(3,8,16,.7); }
.portrait figcaption { position:absolute; left:16px; bottom:16px; background:rgba(13,24,40,.82); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:6px; padding:10px 14px; font-size:13px; color:#e6eef6; }
.portrait figcaption strong { display:block; color:#fff; font-weight:600; font-size:14px; }
.portrait figcaption .cap-title { display:block; color:var(--peach); font-size:12.5px; letter-spacing:.02em; margin:2px 0 0; }
.portrait figcaption { max-width:calc(100% - 32px); line-height:1.45; }

/* Sections */
.section { padding:clamp(64px,9vh,104px) 0; }
.section + .section { border-top:1px solid var(--line-soft); }
/* Dark sections use the header's blue, not the deep navy, so the page stays airy */
.g-a, .g-c { background:radial-gradient(1200px 700px at 30% 0%, #385E88 0%, #2C4F7A 55%, #25446C 100%); }
.g-b, .g-d { background:radial-gradient(1200px 700px at 70% 100%, #3A5F8A 0%, #2C4F7A 55%, #25446C 100%); }
.section-head { max-width:62ch; margin-bottom:44px; }
#work .section-head { max-width:none; } #work .section-head .lede { max-width:62ch; } /* heading on one line; lede keeps its measure */
.section-head .lede { margin-top:16px; }

/* Who is Dean: left-border card, heading left, text right */
.who-card { border-left:4px solid var(--coral); background:var(--card); border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 10px 10px 0; padding:44px 48px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:48px; }
.who-card h2 { font-size:clamp(28px,3vw,38px); }
.who-card p { font-size:18px; line-height:1.65; }
.who-card p + p { margin-top:14px; }
.who-card .text-link { display:inline-block; margin-top:18px; }
.text-link { text-decoration:underline; text-underline-offset:5px; }
.verify { margin:36px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.verify li { display:grid; grid-template-columns:180px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.verify dt, .verify b { color:var(--strong); font-weight:600; }
.verify span { color:var(--body); }

/* Numbered cards (three across) */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:30px 28px 26px; display:flex; flex-direction:column; }
.num { font-family:var(--font-display); font-size:15px; letter-spacing:.06em; color:var(--accent); margin-bottom:18px; display:inline-block; align-self:flex-start; padding:4px 9px; border:1px solid var(--badge-border); border-radius:3px; }
.card h3 { margin-bottom:12px; }
.card p { font-size:15.5px; color:var(--body); }
.card ul { margin:14px 0 0; padding-left:18px; font-size:15px; color:var(--body); }
.card li { margin:6px 0; }
.card .card-link { margin-top:auto; padding-top:20px; font-size:15px; font-weight:600; color:var(--strong); display:inline-flex; gap:8px; align-items:center; }

/* Split: text left, numbered list right (free call) */
.split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:start; }
.num-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.num-list li { display:grid; grid-template-columns:44px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.num-list .n { font-family:var(--font-display); color:var(--accent); font-size:17px; letter-spacing:.04em; }
.num-list b { color:var(--strong); font-weight:600; }
.num-list span { color:var(--body); font-size:15.5px; }
.split .hero-cta { margin-top:28px; }

/* Method: big numbered steps + principle quote */
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:72px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--line); }
.steps li:last-child { border-bottom:1px solid var(--line); }
.steps .big { font-family:var(--font-display); font-size:48px; line-height:1; color:var(--accent); }
.steps h3 { margin-bottom:8px; font-size:22px; }
.steps p { color:var(--body); max-width:62ch; }
.principle { margin:44px 0 0; padding:32px 0 0; border-top:1px solid var(--line); font-family:var(--font-display); font-style:italic; font-size:clamp(24px,2.6vw,32px); line-height:1.35; color:var(--ink); max-width:30ch; }
.principle span { color:var(--accent); }

/* Pricing */
.price-table { width:100%; border-collapse:collapse; margin:30px 0 18px; font-size:17px; max-width:720px; }
.price-table th,.price-table td { padding:15px 0; border-top:1px solid var(--line); text-align:left; }
.price-table tr:last-child th,.price-table tr:last-child td { border-bottom:1px solid var(--line); }
.price-table th { font-weight:500; color:var(--strong); }
.price-table td { text-align:right; color:var(--strong); font-family:var(--font-display); font-size:24px; letter-spacing:-.01em; white-space:nowrap; }
.price-table td.quoted { font-size:16px; font-family:var(--font-body); color:var(--accent); }
.pricing-notes { max-width:64ch; color:var(--muted); font-size:15px; }

/* Evidence-style blocks (examples) */
.evidence { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
.ev { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:30px 30px 26px; }
.ev .kicker { margin-bottom:12px; }
.ev h3 { font-family:var(--font-display); font-weight:400; font-size:28px; margin-bottom:12px; }
.ev p { font-size:16px; color:var(--body); }
.ev p + p { margin-top:12px; }
.ev .draft { font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.45; color:var(--quote); border-left:2px solid var(--coral); padding-left:16px; margin-top:14px; }
.ev .note { margin-top:14px; font-size:14px; color:var(--accent); }
.ev-img { display:block; width:100%; height:auto; margin:6px 0 18px; filter:drop-shadow(0 20px 30px rgba(3,8,16,.55)); }
.evidence-foot { margin-top:22px; font-size:14px; color:var(--muted); }
.success { margin:40px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 32px; }
.success li { display:grid; grid-template-columns:16px 1fr; gap:12px; font-size:15.5px; color:var(--list); padding:10px 0; border-top:1px solid var(--line-soft); }
.success li::before { content:""; width:8px; height:8px; margin-top:9px; border-radius:50%; background:var(--coral); }

/* Industry rows */
.rows { border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:28px; padding:22px 0; border-bottom:1px solid var(--line); }
.row h3 { font-size:19px; }
.row p { font-size:16px; }
.row .check { margin-top:8px; font-size:14px; color:var(--muted); }
.row .check b { color:var(--accent); font-weight:500; }

/* Other ways + heard */
.ways { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.heard { margin-top:26px; border:1px solid var(--heard-border); background:var(--heard-bg); border-radius:10px; padding:26px 28px; }
.heard h3 { margin-bottom:10px; }
.heard p { font-size:16px; }

/* Two checks */
.checks { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:30px; }
.checks article { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:26px 28px; }
.checks h3 { margin-bottom:10px; }
.checks p { font-size:15.5px; }

/* FAQ */
details { border-top:1px solid var(--line); }
details:last-of-type { border-bottom:1px solid var(--line); }
summary { padding:20px 40px 20px 0; cursor:pointer; color:var(--strong); font-size:18px; position:relative; list-style:none; font-family:var(--font-display); }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; font-size:24px; color:var(--accent); position:absolute; right:2px; top:14px; }
details[open] summary::after { content:'−'; }
details p { font-size:16px; color:var(--body); padding:0 24px 22px 0; max-width:66ch; }

/* Next steps */
.next { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.next a { display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:10px; background:var(--card); padding:24px 22px; color:var(--body); transition:border-color .18s ease, transform .18s ease; }
.next a:hover { border-color:rgba(240,122,90,.6); transform:translateY(-2px); }
.next a strong { color:var(--strong); font-size:18px; font-weight:600; }
.next a span { font-size:14.5px; }
.next a .go { margin-top:auto; padding-top:8px; color:var(--accent); font-weight:600; font-size:14px; }

/* Contact band */
.contact { background:radial-gradient(900px 580px at 20% 10%,#385e88,#25446c 50%,#152740); }
.contact .wrap { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; }
.contact h2 { font-size:clamp(34px,3.6vw,52px); }
.contact p { max-width:46ch; margin-top:16px; }
.contact-action { border-top:1px solid rgba(220,235,250,.3); padding-top:26px; }
.contact-action p { margin:14px 0 0; font-size:14px; color:var(--kicker); }
.contact-email { display:inline-block; margin-top:22px; font-size:17px; text-decoration:underline; text-underline-offset:5px; }

/* Footer: multi-column */
.footer { background:#0d1929; padding:56px 0 28px; font-size:14px; color:var(--muted); border-top:1px solid var(--line-soft); }
.footer .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer h4 { margin:0 0 12px; color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.footer ul { list-style:none; margin:0; padding:0; }
.footer li { margin:7px 0; }
.footer .tag { margin-top:12px; max-width:34ch; }
.footer .legal { margin-top:40px; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

@media(max-width:1100px) {
  .nav-links { display:none; }
  .hero .wrap { gap:44px; grid-template-columns:1.1fr .9fr; }
  .next { grid-template-columns:repeat(2,1fr); }
  .footer .cols { grid-template-columns:1fr 1fr; }
}
@media(max-width:860px) {
  .hero .wrap { grid-template-columns:1fr; }
  .hero .wrap::before,.hero .wrap::after { display:none; }
  .portrait { justify-self:start; width:min(100%,360px); order:-1; }
  .who-card { grid-template-columns:1fr; gap:20px; padding:30px 26px; }
  .cards,.evidence,.ways,.checks,.success { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; gap:32px; }
  .row { grid-template-columns:1fr; gap:10px; }
  .contact .wrap { grid-template-columns:1fr; gap:32px; }
  .verify li { grid-template-columns:1fr; gap:4px; }
}
@media(max-width:520px) {
  .topbar .wrap { height:64px; }
  .hero h1 { font-size:clamp(38px,11vw,48px); }
  .hero-cta .btn,.contact-action .btn { width:100%; }
  .next { grid-template-columns:1fr; }
  .footer .cols { grid-template-columns:1fr; }
  .steps li { grid-template-columns:48px 1fr; gap:16px; }
  .steps .big { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ============================================================
   Light sections. Alternate with the blue so the page breathes.
   Every component reads its colors from tokens, so a section only
   needs the .light class (plus a ground) to flip.
   ============================================================ */
.g-light { background:#F3F6FA; }
.g-light2 { background:#E8EFF6; }
.light { --ink:#0D1A2A; --strong:#0D1A2A; --body:#2E4257; --muted:#5B7089; --kicker:#3E5A78; --quote:#0D1A2A; --list:#1E3247;
         --card:#FFFFFF; --line:rgba(13,26,42,.14); --line-soft:rgba(13,26,42,.08);
         --accent:#C9472A; --outline:rgba(13,26,42,.28); --outline-hover:rgba(13,26,42,.6);
         --badge-border:rgba(201,71,42,.45); --heard-bg:rgba(240,122,90,.08); --heard-border:rgba(201,71,42,.35); }
.light { color:var(--body); }
.light a { color:#1E3F63; }
.light a:hover { color:#0D1A2A; }
.light .card, .light .ev, .light .checks article, .light .next a { box-shadow:0 10px 30px -18px rgba(13,26,42,.25); }
.light .kicker::before { background:#C9472A; }
.light .hero-meta li::before, .light .success li::before { background:#C9472A; }
.light .btn-solid { color:#0D1A2A; }
.light ::selection { background:#0D1A2A; color:#fff; }
.section.light + .section, .section + .section.light { border-top:none; }

/* Example card steps (facts -> draft -> your check) */
.ev-steps { list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line); }
.ev-steps li { display:grid; grid-template-columns:28px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.ev-steps .n { font-family:var(--font-display); color:var(--accent); font-size:18px; line-height:1.3; }
.ev-steps b { display:block; color:var(--strong); font-weight:600; margin-bottom:4px; }
.ev-steps p { font-size:15px; }
.ev-steps .draft { margin-top:6px; font-size:18px; }

/* Secondary pages: page head, about, small print */
.page-head { position:relative; background:radial-gradient(1100px 600px at 40% 0%, var(--ground-core) 0%, var(--ground-mid) 45%, var(--ground-deep) 80%); padding:clamp(48px,7vh,80px) 0 clamp(40px,6vh,64px); }
.page-head h1 { font-size:clamp(38px,4.6vw,60px); max-width:16ch; }
.page-head .lede { margin-top:18px; }
.about-grid { display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
.about-photo { display:block; width:100%; height:auto; aspect-ratio:969/1024; object-fit:cover; border-radius:10px; border:1px solid var(--line); box-shadow:0 24px 56px -20px rgba(3,8,16,.5); margin-bottom:16px; }
.about-copy h2 { font-size:clamp(26px,2.6vw,34px); margin-bottom:18px; }
.about-copy p { font-size:17.5px; line-height:1.65; }
.about-copy p + p { margin-top:14px; }
.quote-list { list-style:none; padding:0; margin:24px 0 0; border-top:1px solid var(--line); }
.quote-list li { padding:22px 0; border-bottom:1px solid var(--line); }
.quote-list blockquote { margin:0; font-family:var(--font-display); font-style:italic; font-size:22px; line-height:1.45; color:var(--quote); }
.quote-list cite { display:block; margin-top:10px; font-style:normal; font-size:14px; color:var(--muted); }
.name-story p { font-size:17.5px; line-height:1.65; }
.name-story p + p { margin-top:14px; }
.name-story em { color:var(--accent); }
.terms h2 { font-size:26px; margin:44px 0 12px; }
.terms h2:first-of-type { margin-top:0; }
.terms ul { padding-left:20px; margin:0 0 12px; }
.terms li { margin:8px 0; font-size:16px; }
.decide { margin:12px 0 0; padding:12px 16px; border-left:3px solid var(--coral); background:var(--heard-bg); font-size:14.5px; color:var(--body); border-radius:0 6px 6px 0; }
.decide strong { color:var(--strong); }
.toc { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 36px; padding:0; list-style:none; font-size:14px; }
.toc a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:860px) { .about-grid { grid-template-columns:1fr; } .about-photo { width:min(100%,320px); } }

.toc li { margin:0; }

/* Session: intro + principle on the left, numbered steps on the right */
.session-split { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.session-split .steps li:first-child { border-top:none; padding-top:0; }
.session-split .steps li { padding:24px 0; grid-template-columns:56px 1fr; gap:20px; }
.session-split .steps .big { font-size:40px; }
.session-split .principle { margin-top:32px; padding-top:26px; font-size:clamp(22px,2.2vw,27px); }

/* Examples: heading left, laptop right */
.section-head.with-visual { max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.head-visual { display:block; width:100%; max-width:560px; height:auto; justify-self:end; filter:drop-shadow(0 24px 36px rgba(3,8,16,.5)); }
@media(max-width:860px) { .session-split, .section-head.with-visual { grid-template-columns:1fr; } .head-visual { justify-self:start; } }

/* Hero laptop (replaces the portrait) */
.hero-visual { justify-self:end; width:min(100%,560px); margin:0; }
.hero-visual img { display:block; width:100%; height:auto; filter:drop-shadow(0 28px 40px rgba(3,8,16,.55)); }
.hero-visual figcaption { margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--muted); }
.hero-visual figcaption strong { color:var(--ink); font-weight:600; }
.hero-visual figcaption a { text-decoration:underline; text-underline-offset:4px; }

/* Portrait inside the who-card, sized to the heading column */
.who-side h2 { margin-bottom:18px; }
.who-photo { margin:0; }
.who-photo img { display:block; width:100%; height:auto; aspect-ratio:969/1024; object-fit:cover; border-radius:10px; border:1px solid var(--line); box-shadow:0 20px 44px -18px rgba(3,8,16,.55); }
.who-photo figcaption { margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.who-photo figcaption strong { display:block; color:var(--strong); font-weight:600; font-size:15px; }
@media(max-width:860px) { .hero-visual { justify-self:start; order:-1; } .who-photo { max-width:320px; } }

/* Hero portrait beside "Hi, I'm Dean Ahlgren" (replaced the chat mockup 2026-09-24); a small round portrait on phones */
.hero-photo { width:min(100%,420px); }
.hero-photo img { aspect-ratio:969/1024; object-fit:cover; border-radius:14px; border:1px solid var(--line); filter:none; box-shadow:0 28px 60px -20px rgba(3,8,16,.6); }
@media(max-width:860px) { .hero-photo { width:128px; } .hero-photo img { aspect-ratio:1; object-position:50% 18%; border-radius:50%; box-shadow:0 12px 28px -8px rgba(3,8,16,.55); } }

/* Headline: each sentence on its own line (Dean, 2026-09-24). On screens wider than 1100px the
   sentences never wrap: the photo column is fixed at 270px and the type tops out at 56px, which
   leaves room for "Knowing when to trust it is." (about 11.5 x the font size) at every desktop width. */
.hero h1 .line { display:block; }
.hero .lede { text-wrap:pretty; }
@media(min-width:1101px) {
  .hero .wrap { grid-template-columns:minmax(0,1fr) 270px; gap:48px; }
  .hero h1 { font-size:clamp(48px,4.3vw,56px); }
  .hero h1 .line { white-space:nowrap; }
  .hero-photo { width:270px; }
}

/* ============================================================
   Motion support (js/motion.js). Pure CSS pieces; GSAP drives the rest.
   ============================================================ */
.nav-links { position:relative; }
.nav-ink { position:absolute; left:0; bottom:2px; height:2px; width:0; background:var(--coral); border-radius:1px; pointer-events:none; opacity:0; }
.card, .ev, .checks article, .next a { will-change:transform; }
.card.spot { position:relative; overflow:hidden; }
.card.spot::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(240,122,90,.12), transparent 62%); }
.card.spot:hover::after { opacity:1; }
.card.spot > * { position:relative; z-index:1; }
summary::after { transition:transform .3s ease, color .2s ease; }
details[open] summary::after { transform:rotate(180deg); }
.btn { transform-origin:center; }
.btn:active { transform:none; } /* GSAP handles the press */
@media(prefers-reduced-motion:reduce) { .nav-ink { display:none; } .card.spot::after { display:none; } }

/* ============================================================
   Restructure, 2026-09-14: eight pages, one CTA block, sticky bar.
   ============================================================ */
/* Confirm markers: visible until Dean answers them. Remove class before launch. */
mark.confirm { background:rgba(240,122,90,.18); color:inherit; border:1px dashed rgba(240,122,90,.7); border-radius:3px; padding:0 5px; font-size:.86em; white-space:normal; }
.light mark.confirm { background:rgba(201,71,42,.10); border-color:rgba(201,71,42,.6); }

/* Mobile menu (nav links hide under 1100px) */
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { list-style:none; cursor:pointer; padding:8px 12px; font-size:14px; font-weight:600; color:#fff; border:1px solid var(--outline); border-radius:4px; font-family:var(--font-body); }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav summary::after { content:none; }
.mobile-nav .menu { position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:#0d1929; border:1px solid var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; z-index:30; box-shadow:0 20px 40px -10px rgba(0,0,0,.6); }
.mobile-nav .menu a { padding:10px 12px; border-radius:4px; font-size:15px; color:#D0E0EE; }
.mobile-nav .menu a:hover { background:rgba(235,245,255,.07); color:#fff; }
@media(max-width:1100px) { .mobile-nav { display:block; } .btn-nav { display:none; } }
@media(max-width:1100px) and (min-width:521px) { .btn-nav { display:inline-flex; } }

/* Primary CTA block: button, promise beneath, other channels */
.cta-block { margin-top:34px; }
.cta-block .promise { margin:12px 0 0; font-size:15px; color:var(--kicker); }
.cta-block .channels { margin:8px 0 0; font-size:14px; color:var(--muted); }
.cta-block .channels a { text-decoration:underline; text-underline-offset:4px; }
.cta-row + .channels { margin-top:16px; } /* the promise line between them was removed 2026-09-24 */
.cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* Hero, single paragraph version */
.hero .lede { max-width:48ch; }

/* The job that eats your week: consequences + power saw */
.consequences { font-family:var(--font-display); font-size:clamp(22px,2.4vw,30px); line-height:1.4; color:var(--ink); max-width:34ch; }
.saw { margin-top:28px; font-size:18px; max-width:60ch; }
.job-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:start; }
.job-grid .saw { margin-top:0; }
@media(max-width:860px) { .job-grid { grid-template-columns:1fr; gap:24px; } .job-grid .saw { margin-top:8px; } }

/* Single worked example, full width */
.ev.solo { max-width:820px; }
.spine { margin:26px 0 0; font-family:var(--font-display); font-style:italic; font-size:clamp(24px,2.6vw,32px); color:var(--ink); }
.spine span { color:var(--accent); }

/* Outcome list, single column, larger */
.have { margin:30px 0 0; padding:0; list-style:none; max-width:760px; }
.have li { position:relative; padding:14px 0 14px 30px; border-top:1px solid var(--line); font-size:17px; color:var(--list); }
.have li:last-child { border-bottom:1px solid var(--line); }
.have li::before { content:""; position:absolute; left:0; top:25px; width:8px; height:8px; border-radius:50%; background:var(--coral); }
.cta-row .btn { max-width:100%; white-space:normal; text-align:center; }
@media(max-width:520px) { .cta-row .btn { width:100%; } .sticky-cta .text { white-space:normal; font-size:12px; } }
.light .have li::before { background:#C9472A; }

/* Home steps teaser */
.steps.teaser li { padding:22px 0; }
.steps.teaser p { font-size:16px; }

/* Price teaser */
.teaser-price { font-family:var(--font-display); font-size:clamp(26px,3vw,38px); line-height:1.25; color:var(--ink); max-width:26ch; }
.teaser-note { margin-top:14px; font-size:17px; color:var(--body); }

/* Who you're calling */
.who-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
.who-grid .about-photo { margin-bottom:0; }
.who-grid p.bio { font-size:18px; line-height:1.65; }
.who-grid blockquote { margin:26px 0 0; padding-left:18px; border-left:2px solid var(--coral); font-family:var(--font-display); font-style:italic; font-size:21px; line-height:1.45; color:var(--quote); }
.who-grid cite { display:block; margin-top:8px; font-style:normal; font-size:14px; color:var(--muted); }
@media(max-width:860px) { .who-grid { grid-template-columns:1fr; gap:24px; } .who-grid .about-photo { width:min(100%,320px); } }

/* FAQ groups */
.faq-group { margin-top:40px; }
.faq-group:first-of-type { margin-top:0; }
.faq-group h2 { font-size:26px; margin-bottom:12px; }

/* Pricing table with "Best for" column */
.price-table.best { max-width:none; }
.price-table.best td.best { text-align:left; font-family:var(--font-body); font-size:15.5px; color:var(--body); letter-spacing:0; white-space:normal; padding-left:28px; }
.price-table.best th.best-h { font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--kicker); font-weight:600; padding-left:28px; border-top:none; }
.price-table.best thead th { border-top:none; padding-top:0; }
.price-table.best td.price { padding-left:24px; }
@media(max-width:640px) { .price-table.best thead { display:none; } .price-table.best tr { display:grid; grid-template-columns:1fr auto; } .price-table.best td.best { grid-column:1 / -1; padding:0 0 14px; border-top:none; } .price-table.best th, .price-table.best td.price { padding-bottom:6px; } .price-table.best tr:last-child th,.price-table.best tr:last-child td.price { border-bottom:none; } }

/* Length and format block */
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 0; padding:0; list-style:none; }
.facts li { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:20px 22px; font-size:15.5px; }
.facts b { display:block; color:var(--strong); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; font-weight:600; }
.scope { margin-top:22px; font-size:15px; color:var(--muted); max-width:66ch; }
@media(max-width:860px) { .facts { grid-template-columns:1fr; } }

/* Offers (services) */
.offers { border-top:1px solid var(--line); }
.offer { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:28px; padding:26px 0; border-bottom:1px solid var(--line); }
.offer h3 { font-size:21px; }
.offer .for { font-size:15px; color:var(--accent); margin-top:6px; }
.offer p { font-size:16px; }
@media(max-width:860px) { .offer { grid-template-columns:1fr; gap:10px; } }

/* Contact band with the three-channel block */
.contact .wrap { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.contact .lead-in { font-size:17px; color:var(--kicker); margin-top:18px; }
.note-form { margin-top:16px; display:grid; gap:10px; max-width:440px; }
.note-form label { display:grid; gap:4px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--kicker); }
.note-form input, .note-form select { font:inherit; font-size:16px; padding:11px 12px; border-radius:4px; border:1px solid var(--outline); background:rgba(13,24,40,.55); color:#fff; }
.note-form input:focus, .note-form select:focus { outline:2px solid var(--coral); outline-offset:1px; }
.note-form select option { color:#0D1A2A; }
.note-form .btn { justify-self:start; margin-top:4px; }
.note-form .sent { font-size:14px; color:var(--kicker); }
.contact-action .promise { margin:12px 0 0; font-size:15px; color:var(--kicker); }
.contact-action .channels { margin:20px 0 0; font-size:15px; }
.contact-action .channels a { text-decoration:underline; text-underline-offset:4px; }

/* Sticky mobile bar (sessions, pricing) */
.sticky-cta { display:none; }
@media(max-width:860px) {
  .sticky-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25; gap:10px; align-items:center; justify-content:space-between; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(13,25,41,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); }
  .sticky-cta .btn { flex:1; padding:12px 14px; font-size:14.5px; }
  .sticky-cta .text { font-size:13px; color:var(--muted); white-space:nowrap; }
  body.has-sticky { padding-bottom:76px; }
}

/* Terms page tweaks */
.terms .toc { margin-bottom:28px; }
.terms p.reviewed { font-size:14px; color:var(--muted); margin-bottom:24px; }
.terms li mark.confirm { display:inline-block; margin-top:4px; }

/* ---------- Friday example: read / watch swap (2026-09-15) ----------
   Text first. "See this process animated" swaps the card body for a silent
   30-second muted video and plays it from the start. Replay and Back appear only
   when it ends. js/example-video.js owns the behaviour. */
[hidden] { display:none !important; }
.ev-head { max-width:820px; display:flex; align-items:center; justify-content:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.ev-head .kicker { margin:0; }
.ev-watch { gap:8px; padding:5px 11px; font-size:13px; line-height:1.2; transition:box-shadow .25s ease, border-color .2s ease, color .2s ease; }
.ev-watch .play { font-size:10px; color:var(--coral); }
.ev-watch:hover { transform:none; background:transparent; border-color:var(--coral); color:var(--ink); box-shadow:0 0 0 1px rgba(240,122,90,.45), 0 0 18px rgba(240,122,90,.45); }
/* The example card: no lift on hover (see motion.js), a soft coral glow instead. */
.ev.solo { transition:box-shadow .3s ease, border-color .3s ease; }
.ev.solo:hover { border-color:rgba(240,122,90,.45); box-shadow:0 0 0 1px rgba(240,122,90,.18), 0 0 40px rgba(240,122,90,.16); }
.ev-close { position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(220,235,250,.35); background:rgba(13,25,41,.72); color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 0 2px; transition:box-shadow .25s ease, border-color .2s ease, background .2s ease; }
.ev-close:hover { border-color:var(--coral); background:rgba(13,25,41,.9); box-shadow:0 0 0 1px rgba(240,122,90,.45), 0 0 18px rgba(240,122,90,.5); }
.ev-voice-control { position:absolute; left:12px; bottom:12px; z-index:3; display:inline-flex; align-items:center; gap:0; border-radius:999px; border:1px solid rgba(220,235,250,.28); background:rgba(13,25,41,.68); padding:5px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:box-shadow .25s ease, border-color .2s ease, background .2s ease; }
.ev-voice-control:focus-within, .ev-voice-control:hover { border-color:rgba(240,122,90,.8); background:rgba(13,25,41,.9); box-shadow:0 0 0 1px rgba(240,122,90,.3), 0 0 18px rgba(240,122,90,.36); }
.ev-voice { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; background:transparent; color:#eef4fa; font-size:12px; font-weight:700; line-height:1; cursor:pointer; padding:7px 9px; transition:background .2s ease, color .2s ease; }
.ev-voice:hover, .ev-voice[aria-pressed="true"] { background:rgba(240,122,90,.14); color:#fff; }
.ev-voice-mark { color:var(--coral); font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.ev-voice-label { white-space:nowrap; }
.ev-volume-shell { display:inline-flex; align-items:center; gap:8px; margin-left:9px; padding-left:11px; padding-right:5px; border-left:1px solid rgba(220,235,250,.24); }
.ev-volume-label { color:rgba(238,244,250,.74); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ev-voice-volume { width:86px; accent-color:var(--coral); cursor:pointer; }
.ev-voice-volume:focus-visible { outline:2px solid var(--coral); outline-offset:3px; }
@media (max-width:700px) { .ev-voice-control { right:12px; max-width:calc(100% - 24px); } .ev-voice-volume { width:74px; } .ev-volume-label { display:none; } .ev-volume-shell { margin-left:7px; padding-left:9px; } }
.ev-video { position:relative; margin:0; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--ground-deep); aspect-ratio:16/9; }
.ev-video video { display:block; width:100%; height:100%; object-fit:cover; cursor:pointer; background:var(--ground-deep); }
.ev-video video:focus-visible { outline:2px solid var(--coral); outline-offset:-2px; }
.ev-end { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:24px; background:rgba(13,25,41,.55); }
.ev-end .btn { box-shadow:0 12px 30px rgba(3,8,16,.45); }

/* Work page (merged from the deanahlgren.com portfolio, 2026-09-23) */
.work-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; margin-top:36px; }
.work-card { background:var(--card); border:1px solid var(--outline); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.work-card img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--ground-mid); }
.work-card .body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.work-card .meta { font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--kicker); }
.work-card p { color:var(--body); font-size:15.5px; }
.work-card .links { margin-top:auto; display:flex; gap:18px; flex-wrap:wrap; padding-top:8px; }
.work-card .links a { font-weight:600; font-size:14.5px; color:var(--peach); }
.timeline { list-style:none; padding:0; margin:28px 0 0; border-left:1.5px solid var(--outline); }
.timeline li { padding:0 0 22px 22px; position:relative; }
.timeline li::before { content:""; position:absolute; left:-5px; top:9px; width:8px; height:8px; border-radius:50%; background:var(--coral); }
.timeline .yr { font-size:13px; letter-spacing:.08em; color:var(--kicker); display:block; }
.timeline strong { color:var(--ink); font-weight:600; }