/* ============================================================
   MakaWorks · UI experiment (public_html_test)
   Structure borrowed from a serif-led consultant layout:
   full-width bar nav, serif headline with an italic accent word,
   portrait in the hero, dot-separated meta line, left-border
   "who is" card, numbered cards, numbered lists, next-step cards,
   multi-column footer. Palette, type stack, and hero motion are
   MakaWorks' own (see public_html/css/styles.css for the v14 set).
   ============================================================ */
: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:11px 18px; font-size:14px; }
.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; }
.maka-eye { width:28px; height:28px; display:block; flex-shrink:0; }
.maka-eye .frame { stroke:#fff; stroke-width:7; } .maka-eye .orbit { stroke:#A5C2DE; opacity:.6; stroke-width:2.4; stroke-dasharray:2 5; }
.maka-eye .spokes { stroke:#A5C2DE; opacity:.75; stroke-width:3; } .maka-eye .star { fill:var(--coral); } .maka-eye .core { fill:var(--ground-deep); }
.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-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; } }