/* Career Calling Business: "The Operating Loop". Light-first; the logo's electric blue and navy on white,
   serif display over a grotesk body, report-style rules and mono labels. Dark appears only inside media frames. */
:root {
  --blue: #0A2DFF; --blue-d: #0722C4; --navy: #01216E; --ink: #0B1533; --ink-2: #33405E; --muted: #566077;
  --line: #DCE1EE; --grid: #EDF0F7; --tint: #F5F7FD; --tint-2: #EAEFFD; --paper: #FFFFFF;
  --amber: #F2A33A; --amber-soft: #FFF3E0; --amber-ink: #8A4B00; --ok: #0B6E4F; --err: #B42318;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --maxw: 1240px; --r: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0 0 .5em; color: var(--ink); }
h1 { font: 420 clamp(40px, 6.2vw, 80px)/1.02 var(--serif); letter-spacing: -.025em; font-optical-sizing: auto; }
h2 { font: 440 clamp(29px, 3.6vw, 46px)/1.08 var(--serif); letter-spacing: -.02em; }
h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -.01em; }
.h3 { font: 600 21px/1.3 var(--sans); letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: var(--blue); font-weight: 400; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.small { font-size: 14.5px; color: var(--muted); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.lead-s { font-size: 18.5px; color: var(--ink-2); }
.h-small { font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.eyebrow { font: 500 12.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.eyebrow .num { color: var(--blue); }
.ico { width: 24px; height: 24px; flex: none; }
.arr { display: inline-block; transition: transform .2s; }
a:hover .arr, button:hover .arr { transform: translateX(3px); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 600 16px/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { min-height: 42px; padding: 8px 16px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; padding: 4px 0; color: var(--blue); font: 600 15px var(--sans); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec + .sec { padding-top: 0; }
.sec-tint + .sec, .sec + .sec-tint, .sec-tint + .sec-tint { padding-top: clamp(64px, 8vw, 112px); }
.sec-tint { background: var(--tint); }
.sec-head { border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.sec-head h2 { max-width: 22ch; }
.sec-lead { font-size: 18px; color: var(--ink-2); max-width: 60ch; margin: 0; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #fff 0, var(--tint) 100%); border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 13ch; }
.who { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 16px; }
.who-h { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who li { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 13px; font-size: 14.5px; color: var(--ink-2); }

.hero-loop { position: relative; margin: 0; aspect-ratio: 560 / 410; }
.hero-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-loop .seg { fill: none; stroke-width: 22; stroke-linecap: butt; stroke-linejoin: round; }
.hero-loop .seg-a { stroke: var(--blue); }
.hero-loop .seg-b { stroke: var(--navy); }
.hero-loop .head { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.hero-loop .head-a { stroke: var(--blue); }
.hero-loop .head-b { stroke: var(--navy); }
.hero-loop .dot { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.hero-loop .ph { font: 600 19px var(--sans); fill: var(--ink); letter-spacing: -.01em; }
.hero-loop .ph-n { font: 500 13px var(--mono); fill: var(--blue); }
.loop-core { position: absolute; left: 18%; right: 18%; top: 24%; bottom: 24%; display: flex; flex-direction: column; justify-content: center; }
.loop-k { font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.loop-core ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.loop-core li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.loop-core li:last-child { border-bottom: 1px solid var(--line); }
.loop-core span { font: 500 clamp(17px, 1.7vw, 22px)/1.1 var(--serif); color: var(--ink); }
.loop-core small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
/* the one orchestrated motion moment: each side of the loop draws in turn, its arrowhead lands, then the phase label */
.js .hero-loop .seg { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s cubic-bezier(.6, 0, .2, 1) forwards; }
.js .hero-loop .seg.s1 { animation-delay: .75s; }
.js .hero-loop .head, .js .hero-loop .dot, .js .hero-loop .ph, .js .loop-core li { opacity: 0; animation: rise .45s ease-out forwards; }
.js .hero-loop .head.s0 { animation-delay: .65s; } .js .hero-loop .head.s1 { animation-delay: 1.4s; }
.js .hero-loop .d0, .js .hero-loop .ph0 { animation-delay: .15s; } .js .hero-loop .d1, .js .hero-loop .ph1 { animation-delay: .6s; }
.js .hero-loop .d2, .js .hero-loop .ph2 { animation-delay: .95s; } .js .hero-loop .d3, .js .hero-loop .ph3 { animation-delay: 1.35s; }
.js .loop-core li:nth-child(1) { animation-delay: 1.5s; } .js .loop-core li:nth-child(2) { animation-delay: 1.6s; }
.js .loop-core li:nth-child(3) { animation-delay: 1.7s; } .js .loop-core li:nth-child(4) { animation-delay: 1.8s; } .js .loop-core li:nth-child(n+5) { animation-delay: 1.9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero-loop .seg { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js .hero-loop .head, .js .hero-loop .dot, .js .hero-loop .ph, .js .loop-core li { opacity: 1; animation: none; }
}

/* ---------- page head ---------- */
.phead { padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--tint)); position: relative; overflow: hidden; }
.phead-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.phead h1 { font-size: clamp(38px, 5.2vw, 68px); max-width: 18ch; }
.phead .lead { margin-bottom: 0; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 13px var(--mono); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.phead-loop { width: clamp(120px, 16vw, 220px); height: auto; flex: none; }
.phead-loop path, .cta-loop path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.lm-a { stroke: var(--blue); } .lm-b { stroke: var(--navy); }
.phead-ico { width: clamp(96px, 12vw, 160px); aspect-ratio: 1; border-radius: 28px; border: 1.5px solid var(--ink); display: grid; place-items: center; background: #fff; color: var(--blue); box-shadow: 10px 10px 0 var(--tint-2); }
.phead-ico .ico { width: 54%; height: 54%; stroke-width: 1.3; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 500 12.5px/1 var(--mono); padding: 7px 10px; border-radius: 6px; background: var(--tint); color: var(--ink-2); border: 1px solid var(--line); }
.tag-f { background: var(--tint-2); color: var(--navy); border-color: #C9D3F7; }
.tags-lg { margin-top: 22px; }
.tags-lg .tag { font-size: 13.5px; padding: 8px 12px; }

/* ---------- practice cards ---------- */
.pgroup { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; padding: 30px 0; border-top: 1px solid var(--line); }
.pgroup:first-of-type { border-top: 0; padding-top: 0; }
.pg-name { font: 440 32px/1.1 var(--serif); margin: 0 0 8px; letter-spacing: -.02em; }
.pg-head p { color: var(--muted); font-size: 15.5px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; min-height: 210px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 4px 4px var(--r) var(--r); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.pcard:hover { border-top-color: var(--blue); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(1, 33, 110, .35); }
.pc-num { position: absolute; right: 18px; top: 18px; font: 500 12.5px var(--mono); color: var(--muted); }
.pc-ico { color: var(--blue); width: 30px; height: 30px; margin-bottom: 8px; }
.pcard h3 { margin: 0; font-size: 19px; }
.pcard p { margin: 0; color: var(--ink-2); font-size: 15.5px; flex: 1; }
.pc-go { font: 600 14.5px var(--sans); color: var(--blue); margin-top: 10px; }

/* ---------- health check ---------- */
.sec-hc { background: #fff; }
.hc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.hc-form { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 26px 24px; background: #fff; }
.hc-scale { display: none; }
.hc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 8px 26px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--grid); }
.hc-row label { display: grid; gap: 4px; cursor: pointer; }
.hc-dim { font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.hc-st { font-size: 16px; line-height: 1.45; color: var(--ink); }
.hc-ctl { display: grid; gap: 6px; }
.hc-out { font: 600 14.5px var(--sans); color: var(--ink); }
.hc-row[data-low] .hc-out { color: var(--amber-ink); }
.hc-note { font-size: 14.5px; color: var(--muted); margin: 18px 0 0; }
.hc-btns { margin: 18px 0 0; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--amber) 0, #C9D3F7 50%, var(--blue) 100%); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--amber) 0, #C9D3F7 50%, var(--blue) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(11, 21, 51, .25); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
input[type=range]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hc-result { position: sticky; top: 100px; display: grid; gap: 18px; }
.hc-frame { border: 1px solid var(--ink); border-radius: var(--r); background: #fff; overflow: hidden; }
.hc-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hc-legend { display: inline-flex; align-items: center; gap: 6px; }
.hc-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.lg-you { background: var(--blue); } .lg-mid { background: #9AA6C6; margin-left: 8px; }
.radar { display: block; width: 100%; height: auto; padding: 6px 4px 4px; }
.r-ring { fill: none; stroke: var(--grid); stroke-width: 1.2; }
.r-ring.r-mid { stroke: #9AA6C6; stroke-dasharray: 4 5; }
.r-spoke { stroke: var(--grid); stroke-width: 1.2; }
.r-poly { fill: rgba(10, 45, 255, .12); stroke: var(--blue); stroke-width: 3; stroke-linejoin: round; transition: all .35s cubic-bezier(.3, .7, .3, 1); }
.r-pt { fill: #fff; stroke: var(--navy); stroke-width: 3; transition: all .35s cubic-bezier(.3, .7, .3, 1); }
.r-pt.is-low { stroke: var(--amber-ink); fill: var(--amber); }
.r-lab { font: 600 15px var(--sans); fill: var(--ink); }
.hc-recs .eyebrow { margin-bottom: 8px; }
.recs { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: r; }
.recs li { counter-increment: r; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.recs li::before { content: counter(r, decimal-leading-zero); grid-row: span 2; font: 500 13px var(--mono); color: var(--blue); padding-top: 3px; }
.rec-h { margin: 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rec-dim { font: 600 17px var(--sans); }
.rec-score { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--navy); background: var(--tint-2); border-radius: 4px; padding: 3px 7px; }
.rec-score.is-low { color: var(--amber-ink); background: var(--amber-soft); }
.rec-links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; }

/* ---------- how we work: phases ---------- */
.phases { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1.5px solid var(--ink); border-radius: var(--r); background: #fff; position: relative; }
.phases > li { padding: 26px 24px 24px; border-left: 1px solid var(--line); position: relative; }
.phases > li:first-child { border-left: 0; }
.phases > li::after { content: ""; position: absolute; right: -9px; top: 32px; width: 16px; height: 16px; border-top: 2.5px solid var(--blue); border-right: 2.5px solid var(--blue); transform: rotate(45deg); background: #fff; z-index: 1; }
.phases > li:last-child::after { display: none; }
.ph-num { display: block; font: 500 13px var(--mono); color: var(--blue); margin-bottom: 14px; }
.phases h3 { font: 440 28px/1.1 var(--serif); letter-spacing: -.02em; }
.phases p { color: var(--ink-2); font-size: 15.5px; }
.phases-lg .checks { margin-top: 14px; }

/* ---------- programs ---------- */
.programs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.prog { display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); position: relative; transition: border-color .2s, box-shadow .2s; }
.prog:hover { border-color: var(--ink); box-shadow: 0 14px 30px -20px rgba(1, 33, 110, .4); }
.prog-k { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.prog h2, .prog h3 { font: 440 24px/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 10px; }
.prog h2 a, .prog h3 a { color: var(--ink); text-decoration: none; }
.prog h2 a::after, .prog h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.prog h2 a:focus-visible, .prog h3 a:focus-visible { outline: none; }
.prog:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.prog > p:not(.prog-k):not(.prog-go) { color: var(--ink-2); font-size: 15.5px; flex: 1; }
.prog .tags { margin: 6px 0 14px; }
.prog-go { margin: 0; font: 600 14.5px var(--sans); }
.prog-go a { text-decoration: none; }
.prog[hidden] { display: none; }
.acc-band { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; padding: 20px 24px; border-radius: var(--r); background: var(--tint); border: 1px solid var(--line); }
.acc-band p { margin: 0; max-width: 70ch; color: var(--ink-2); font-size: 15.5px; }

.filters { display: grid; gap: 14px; margin-bottom: 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); }
.js .filters[hidden] { display: grid; }
html:not(.js) .filters { display: none; }
.fgroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fl { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 8px 0 0; min-width: 64px; }
.chip { min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1.5px solid #B8C2DD; background: #fff; color: var(--ink); font: 500 14.5px var(--sans); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fcount { margin: 0; font: 500 13px var(--mono); color: var(--muted); }
.fempty { margin-top: 18px; }

.acc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 28px 32px; }
.acc-group h3 { font: 440 24px/1.2 var(--serif); }
.acc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.acc-list li { border-bottom: 1px solid var(--line); }
.acc-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 16px; padding: 14px 4px; text-decoration: none; color: var(--ink); }
.acc-list a:hover { background: #fff; }
.acc-code { font: 500 13px var(--mono); color: var(--navy); grid-row: span 2; padding-top: 3px; }
.acc-t { font-weight: 600; }
.acc-go { font-size: 14px; color: var(--blue); }

/* ---------- practice page ---------- */
.hear-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.hear { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hear li { padding: 20px 22px; border-radius: var(--r); background: var(--tint); border-left: 3px solid var(--blue); }
.hear p { margin: 0; font: italic 400 20px/1.35 var(--serif); color: var(--ink); }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.offer { padding: 26px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); }
.of-num { display: block; font: 500 13px var(--mono); color: var(--blue); margin-bottom: 12px; }
.offer h3 { font: 440 26px/1.15 var(--serif); letter-spacing: -.015em; }
.offer p { color: var(--ink-2); margin: 0; }
.leave-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: start; }
.approach { padding: 26px; border-radius: var(--r); border: 1.5px solid var(--ink); background: #fff; }
.approach > p:nth-child(2) { font: 400 21px/1.45 var(--serif); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .ico { width: 22px; height: 22px; color: var(--blue); margin-top: 2px; stroke-width: 2.2; }
.checks-lg li { font-size: 18px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.leave-grid .checks li { font-size: 17.5px; padding: 12px 0; border-bottom: 1px solid var(--grid); }
.sec-rel { padding-bottom: clamp(40px, 5vw, 64px); }
.rel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; border-top: 1px solid var(--line); padding-top: 22px; }
.rel .eyebrow { margin: 0; }
.rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rel-list a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 15px; }
.rel-list a:hover { border-color: var(--blue); color: var(--blue); }
.rel-all { font-weight: 600; text-decoration: none; }

/* ---------- program page ---------- */
.prog-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 48px; align-items: start; }
.prog-main .sec-head:not(:first-child) { margin-top: 56px; }
.steps { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 10px; padding: 0 0 26px; position: relative; }
.steps li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.st-n { font: 500 13px var(--mono); color: var(--blue); padding: 2px 0 0 20px; }
.steps h3 { margin: 0 0 4px; }
.steps p { margin: 0; color: var(--ink-2); }
.prog-side { display: grid; gap: 18px; position: sticky; top: 100px; }
.side-card { padding: 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--tint); }
.side-card .h3 { font-size: 17px; margin: 18px 0 6px; }
.side-card .h3:first-child { margin-top: 0; }
.side-card .tags { margin-bottom: 10px; }
.side-card .btn { margin-top: 10px; }
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links a { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.side-links a .ico { color: var(--blue); }
.side-links a:hover { color: var(--blue); }

/* ---------- industries ---------- */
.ind-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ind-list a { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 14px 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.ind-list a .ico { color: var(--blue); }
.ind-list a:hover { border-color: var(--ink); }
.jump ul { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-block; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.jump a:hover { border-color: var(--blue); color: var(--blue); }
.inds { display: grid; gap: 0; }
.ind { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 36px; padding: 40px 0; border-top: 1px solid var(--ink); scroll-margin-top: 110px; }
.ind-head { display: grid; gap: 12px; align-content: start; }
.ind-head .ico { width: 36px; height: 36px; color: var(--blue); }
.ind-n { font: 500 13px var(--mono); color: var(--muted); }
.ind-head h2 { font-size: clamp(28px, 3vw, 38px); margin: 0; }
.ind-body .checks { margin-bottom: 8px; }
.media-frame { margin: 28px 0 0; border-radius: var(--r); overflow: hidden; background: #0B1533; }
.media-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.media-frame figcaption { padding: 12px 18px; color: #E4E8F5; font-size: 14.5px; background: #0B1533; }
.media-tall { margin: 0; }
.media-tall img { aspect-ratio: 4 / 3.4; }

/* ---------- engagements, principles ---------- */
.engs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.eng { padding: 26px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); border-top: 3px solid var(--blue); }
.eng h3 { font: 440 26px/1.15 var(--serif); }
.eng-d { color: var(--ink-2); }
.eng-s { font-size: 15px; color: var(--ink-2); padding: 10px 0; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.eng-s b { display: block; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.eng .checks li { font-size: 15.5px; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.principles li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.principles h3 { margin: 0 0 4px; }
.principles p { margin: 0; color: var(--ink-2); }
.principles-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 32px; }
.fam-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fam-list a { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.fam-list a:hover { border-color: var(--blue); }
.fam-list small { color: var(--muted); font-size: 14.5px; }

/* ---------- insights ---------- */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-bottom: 26px; }
.icard { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.icard:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.ic-k { display: flex; justify-content: space-between; gap: 10px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.ic-k span:first-child { color: var(--blue); }
.icard h3 { font: 440 25px/1.15 var(--serif); letter-spacing: -.015em; }
.icard p { color: var(--ink-2); font-size: 15.5px; flex: 1; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 56px; align-items: start; }
.article-side { position: sticky; top: 100px; }
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.policy { max-width: 820px; }
.policy table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.policy td, .policy th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.heatmap { margin: 28px 0; }
.hm-scroll { overflow-x: auto; }
.heatmap table { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 520px; font-size: 13.5px; }
.heatmap caption { text-align: left; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.heatmap th { font-weight: 600; color: var(--ink); padding: 6px; text-align: center; }
.heatmap th[scope=row] { text-align: right; white-space: nowrap; }
.hm-corner { font: 500 11px var(--mono); color: var(--muted); }
.heatmap td { height: 54px; border-radius: 6px; text-align: center; font-weight: 600; }
.hm-0 { background: #E6EEFF; color: var(--navy); } .hm-1 { background: #FFF1D6; color: #6B3B00; } .hm-2 { background: #F8C27A; color: #4A2700; } .hm-3 { background: #01216E; color: #fff; }
.heatmap figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.checklist { border: 1.5px solid var(--ink); border-radius: var(--r); padding: 22px 24px; margin-bottom: 36px; background: #fff; }
.cl-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cl-count { font: 500 13px var(--mono); color: var(--blue); margin: 0; }
.cl-g { border: 0; padding: 0; margin: 0 0 16px; }
.cl-g legend { font: 600 17px var(--sans); padding: 0; margin-bottom: 6px; color: var(--ink); }
.cl-g ul { list-style: none; padding: 0; margin: 0; }
.cl-g li { border-bottom: 1px solid var(--grid); }
.cl-g label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; color: var(--ink); }
.cl-g input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.cl-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; }

/* ---------- faq, cta ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; border-top: 1px solid var(--ink); padding-top: 22px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 600 17.5px/1.4 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 400 26px var(--sans); color: var(--blue); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-2); padding-bottom: 6px; }
.cta { padding-top: 0 !important; }
.sec-tint + .cta, .faq-sec + .cta { padding-top: 0 !important; }
.cta-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 22px; background: var(--tint-2); border: 1.5px solid var(--ink); overflow: hidden; }
.cta-card h2 { margin-bottom: 10px; }
.cta-card p { color: var(--ink-2); max-width: 60ch; margin: 0; }
.cta-card .btns { margin: 0; }
.cta-loop { position: absolute; right: -30px; top: -26px; width: 190px; opacity: .14; pointer-events: none; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 48px; align-items: start; }
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.form .h3 { margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 6px; }
.req, .opt { font-weight: 400; color: var(--muted); font-size: 14px; }
.form input:not([type=checkbox]), .form select, .form textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #8C97B3; border-radius: 10px; font: 16px var(--sans); color: var(--ink); background: #fff; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid rgba(10, 45, 255, .25); border-color: var(--blue); }
.form [aria-invalid="true"] { border-color: var(--err) !important; }
.consent { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: 15px !important; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); flex: none; }
.msg { margin: 0; font-weight: 600; min-height: 1em; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--err); }
.hc-card { padding: 18px 20px; border-radius: 12px; background: var(--tint); border: 1px solid #C9D3F7; }
.hc-card[hidden] { display: none; }
.hc-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hc-card-head .eyebrow { margin: 0; }
.hc-bars { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.hc-bars li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 14.5px; }
.hc-bars .b { height: 8px; border-radius: 4px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.hc-bars .b i { display: block; height: 100%; background: var(--blue); }
.hc-bars .low .b i { background: var(--amber); }
.hc-bars .v { font: 500 12.5px var(--mono); color: var(--muted); }
.contact-side { display: grid; gap: 18px; }
.contact-info { padding: 26px; border-radius: var(--r); border: 1.5px solid var(--ink); }
.lines { display: grid; gap: 10px; margin: 14px 0 18px; }
.lines a { display: flex; gap: 14px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; }
.lines a .ico { color: var(--blue); }
.lines small { display: block; font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.terms { margin: 0; display: grid; gap: 10px; }
.terms div { border-top: 1px solid var(--line); padding-top: 10px; }
.terms dt { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.terms dd { margin: 2px 0 0; color: var(--ink-2); }

.nf-loop { width: clamp(160px, 22vw, 280px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-in, .hc, .split, .contact-grid, .prog-grid, .article-grid, .leave-grid, .hear-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-loop { max-width: 560px; }
  .hc-result, .prog-side, .article-side { position: static; }
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases > li:nth-child(3) { border-left: 0; }
  .phases > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .phases > li:nth-child(2)::after { display: none; }
  .pgroup { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ind { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .phead-in { grid-template-columns: minmax(0, 1fr); }
  .phead-loop, .phead-ico { display: none; }
  .hc-form { padding: 4px 16px 20px; }
  .hc-row { grid-template-columns: minmax(0, 1fr); }
  .hear, .offers, .row2 { grid-template-columns: minmax(0, 1fr); }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phases > li { border-left: 0; border-top: 1px solid var(--line); }
  .phases > li:first-child { border-top: 0; }
  .phases > li::after { display: none; }
  .cta-card { grid-template-columns: minmax(0, 1fr); }
  .programs, .ins-grid, .engs, .pgrid { grid-template-columns: minmax(0, 1fr); }
  .acc-list a { grid-template-columns: minmax(0, 1fr); }
  .acc-code { grid-row: auto; }
  .loop-core { left: 15%; right: 15%; top: 22%; bottom: 22%; }
  .loop-core small { display: none; }
  .hero-loop .ph { font-size: 22px; }
  .hero-loop .ph-n { font-size: 15px; }
  .hc-bars li { grid-template-columns: 80px minmax(0, 1fr) 62px; }
  .r-lab { font-size: 19px; }
}
@media print {
  .site-h, .cqf3, .cta, #cqbar, .skip, .cl-tools, .btns { display: none !important; }
  body.print-cl main > *:not(.sec:has(.checklist)) { display: none; }
}
[id] { scroll-margin-top: 104px; }

/* ---------- practice working model: one discipline-specific diagram per practice ---------- */
.sec-model { padding-top: 0 !important; }
.model { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.model .sec-head { margin-bottom: 22px; }
.model-notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.model-notes li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-2); font-size: 16px; }
.model-notes li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 2px; background: var(--blue); }
.dv-frame { margin: 0; border: 1.5px solid var(--ink); border-radius: var(--r); background: #fff; overflow: hidden; box-shadow: 12px 12px 0 var(--tint-2); }
.dv { display: block; width: 100%; height: auto; padding: 18px 16px 14px; }
.dv text { font-family: var(--sans); }
.dv-l { font-size: 16.5px; font-weight: 600; fill: var(--ink); }
.dv-tl { font: 500 20px var(--serif); fill: #fff; }
.dv-s { font-size: 15px; font-weight: 500; fill: var(--muted); }
.dv-s-b { fill: var(--blue); font-weight: 600; }
.dv-s-hot { fill: var(--amber-ink); font-weight: 600; }
.dv-k { font-size: 13px; font-weight: 700; fill: var(--ink); }
.dv-q { font: 500 22px var(--serif); fill: var(--ink); }
.dv-bt { font-size: 15px; font-weight: 600; fill: var(--ink); }
.dv-axis, .dv-move, .dv-flow, .dv-flow-n { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dv-flow-n { stroke: #9AA6C6; }
.dv-move { stroke: var(--blue); stroke-width: 2.4; }
.dv-hm0 { fill: #E6EEFF; } .dv-hm1 { fill: #FFF1D6; } .dv-hm2 { fill: #F8C27A; } .dv-hm3 { fill: var(--navy); }
.dv-pt-o { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.dv-pt { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.dv-w-run { fill: var(--navy); } .dv-w-cut { fill: var(--amber); } .dv-w-add { fill: var(--blue); }
.dv-join { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; }
.dv-base { stroke: var(--ink); stroke-width: 1.5; }
.dv-grid { stroke: var(--grid); stroke-width: 1; }
.dv-tick { stroke: var(--ink); stroke-width: 1.5; }
.dv-arc { fill: none; stroke-width: 16; stroke-linecap: butt; }
.dv-arc-a { stroke: var(--blue); } .dv-arc-b { stroke: var(--navy); }
.dv-wedge { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 1.5; stroke-linejoin: round; }
.dv-zone { fill: var(--tint-2); }
.dv-zone-hot { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dv-curve { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; }
.dv-curve-w { fill: none; stroke: #9AA6C6; stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.dv-g-todo { fill: var(--tint-2); stroke: #C9D3F7; }
.dv-g-done { fill: var(--blue); }
.dv-g-ben { fill: #fff; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; }
.dv-gate { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 1.2; }
.dv-today { stroke: var(--navy); stroke-width: 1.6; stroke-dasharray: 4 4; }
.dv-lane0 { fill: #fff; } .dv-lane1 { fill: var(--tint); }
.dv-box { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.dv-box-hot { fill: var(--amber-soft); stroke: var(--amber-ink); stroke-width: 2; }
.dv-box-s { fill: var(--tint-2); stroke: #C9D3F7; }
.dv-unclear { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 5; }
.dv-tile { fill: var(--tint); stroke: var(--line); }
.dv-spark { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dv-spark-ok { stroke: var(--blue); } .dv-spark-watch { stroke: var(--amber-ink); } .dv-spark-act { stroke: var(--navy); }
.dv-st-ok { fill: var(--tint-2); } .dv-st-watch { fill: var(--amber-soft); } .dv-st-act { fill: var(--navy); }
.dv-stt { font-size: 12.5px; font-weight: 600; }
.dv-stt-ok { fill: var(--navy); } .dv-stt-watch { fill: var(--amber-ink); } .dv-stt-act { fill: #fff; }
.dv-tier0 { fill: var(--navy); } .dv-tier1 { fill: var(--tint-2); stroke: #C9D3F7; } .dv-tier2 { fill: var(--tint-2); stroke: #C9D3F7; } .dv-tier3 { fill: #fff; stroke: var(--blue); stroke-width: 1.5; }
.dv-strike { text-decoration: line-through; }
.dv-funnel { fill: var(--tint); stroke: var(--line); }
.dv-gateline { stroke: var(--amber-ink); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.dv-bet { fill: #fff; stroke: var(--navy); stroke-width: 2; } .dv-bet3 { fill: var(--blue); stroke: var(--navy); stroke-width: 2; }
.dv-line-a { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; }
.dv-line-b { fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 0; }
@media (max-width: 1080px) { .model { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .dv { padding: 10px 2px 8px; } .dv-frame { box-shadow: 6px 6px 0 var(--tint-2); } }

/* ---------- review fixes ---------- */
.sec-head h2:last-child { margin-bottom: 0; }
.sec-head h2[id] { scroll-margin-top: 150px; }
.hm-title { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.hm-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.recs-hint { font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }
.recs-hint[hidden] { display: none; }
@media (max-width: 720px) {
  .heatmap table { min-width: 0; border-spacing: 3px; font-size: 11.5px; table-layout: fixed; }
  .heatmap th { padding: 4px 1px; font-size: 10.5px; }
  .heatmap th[scope=row] { white-space: normal; width: 66px; line-height: 1.2; }
  .heatmap td { height: 44px; }
  .hm-corner { width: 66px; }
  .hm-corner span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fgroup { flex-wrap: nowrap; overflow-x: auto; margin: 0 -22px; padding: 2px 22px 6px; scrollbar-width: thin; }
  .fgroup .chip { flex: none; }
  .fl { position: sticky; left: -22px; background: var(--tint); padding: 10px 8px 10px 0; margin: 0; z-index: 1; }
}
.dv-arh { stroke-linejoin: round; stroke-width: 2; }
.dv-arh-a { fill: var(--blue); stroke: var(--blue); } .dv-arh-b { fill: var(--navy); stroke: var(--navy); }