/* REDLINE: colours live in :root tokens; resting states stay visible. The six drawing-state numbers do not inherit: each is set on the .sg wrapper and handed only down the SVG paths that read it (see the reader chain below), so a change never restyles the whole subtree */
@property --build { syntax: '<number>'; inherits: false; initial-value: 0;}
@property --bad { syntax: '<number>'; inherits: false; initial-value: 0;}
@property --find { syntax: '<number>'; inherits: false; initial-value: 0;}
@property --fixp { syntax: '<number>'; inherits: false; initial-value: 0;}
@property --prove { syntax: '<number>'; inherits: false; initial-value: 0;}
@property --ext { syntax: '<number>'; inherits: false; initial-value: 0;}
:root {
--bg: #F3EFE6; --surface: #FBF9F4; --text: #14171D; --muted: #5A5F69; --border: #CFC6B4;
--primary: #0F1A2C; --accent: #B8381A; --secondary: #33415C; --success: #1E6E46;
--muted-on-dark: #A9B1BF; --accent-on-dark: #F07A55; --success-on-dark: #5FD39A;
--field-line: #7D8695; --field-bg: #303B4D;
--grid-line: rgba(207, 198, 180, .5);
--rule-strong: #7B7770;
--font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
--font-body: "Instrument Sans", "Instrument Fallback", Arial, sans-serif;
--s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
--radius: 2px;
--dur-1: .16s; --dur-2: .2s; --dur-3: .4s; --dur-4: .7s; --dur-5: .8s; --dur-6: .9s; --dur-7: 1.6s; --dur-8: 1.2s; --dur-9: 1.8s;
--dly-0: 0s; --dly-1: .08s; --dly-3: .24s; --dly-4: .6s;
--on-accent: var(--surface);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-lin: linear;
--ease-io: cubic-bezier(.77, 0, .175, 1);
--shadow: 0 1px 1px color-mix(in srgb, var(--primary) 10%, transparent), 0 8px 16px -6px color-mix(in srgb, var(--primary) 8%, transparent), 0 28px 48px -16px color-mix(in srgb, var(--primary) 6%, transparent);
--shadow-sm: 0 1px 1px color-mix(in srgb, var(--primary) 10%, transparent), 0 12px 24px -14px color-mix(in srgb, var(--primary) 12%, transparent);
--gut: max(16px, 4vw);
--pad-y: clamp(72px, 10vw, 160px);
--x: linear-gradient(currentColor, currentColor);
--grid: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
@supports (color: color-mix(in oklch, red, blue)) {
:root {
--muted-on-dark: color-mix(in oklch, var(--bg) 68%, var(--primary));
--accent-on-dark: color-mix(in oklch, var(--accent) 60%, var(--surface));
--success-on-dark: color-mix(in oklch, var(--success) 55%, white);
--field-line: color-mix(in oklch, var(--muted-on-dark) 80%, var(--primary));
--field-bg: color-mix(in oklch, var(--primary) 82%, var(--bg));
--grid-line: color-mix(in oklch, var(--border) 50%, transparent);
--rule-strong: color-mix(in oklch, var(--text) 45%, var(--border));
}
}
@media (min-width: 900px) { :root { --font-display: "Fraunces", "Fraunces Fallback Lg", Georgia, serif;} }
*, *::before, *::after { box-sizing: border-box;}
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; overflow-x: clip;}
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; text-wrap: pretty; -webkit-font-smoothing: antialiased; font-optical-sizing: auto;}
img, svg, canvas { max-width: 100%;}
img[src=""], img:not([src]) { display: none !important;}
a { color: inherit; text-underline-offset: .22em;}
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-optical-sizing: auto;}
p { margin: 0 0 1em;}
ul, ol { margin: 0; padding: 0;}
.rl { position: relative;}
main { display: block;}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gut); position: relative;}
.band { position: relative; padding-block: var(--pad-y); isolation: isolate;}
.band--paper { background: var(--bg);}
.band--surface { background: var(--surface);}
.band--ink { background: var(--primary); color: var(--bg);}
.band--slim { padding-block: clamp(40px, 6vw, 72px);}
.band--paper::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: var(--grid); background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, var(--primary) 30%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, var(--primary) 30%, transparent 100%);
}
.band--paper:not(.hero-band)::before { inset-block-end: auto; block-size: min(100%, 1100px);}
.hero-band::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; color: var(--muted); opacity: .8;
background:
var(--x) left var(--gut) top var(--ct, 16px) / 1px 19px no-repeat,
var(--x) left calc(var(--gut) - 9px) top calc(var(--ct, 16px) + 9px) / 19px 1px no-repeat,
var(--x) right calc(var(--gut) + 9px) bottom 16px / 1px 19px no-repeat,
var(--x) right var(--gut) bottom 25px / 19px 1px no-repeat;
}
.sec-title, .svc__title, .contact__title { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); font-weight: 560; letter-spacing: -.02em; line-height: 1.06;}
.sec-title { margin-bottom: var(--s-6); max-width: 22ch;}
.tools .sec-title, .spec .sec-title { display: flex; align-items: center; gap: var(--s-3); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); margin-bottom: var(--s-4); max-width: none;}
.tools .sec-title::after, .spec .sec-title::after { flex: 1 1 3rem; width: auto; min-width: 3rem; margin: 0;}
.sec-title::after {
content: ""; display: block; height: 9px; margin-top: var(--s-3); width: min(100%, 14rem); color: var(--accent);
background: var(--x) center / 100% 1px no-repeat, var(--x) left center / 1px 9px no-repeat, var(--x) right center / 1px 9px no-repeat;
}
.prose p:last-child { margin-bottom: 0;}
.prose a { text-decoration-color: var(--accent);}
.eyebrow--paper { color: var(--accent);}
.eyebrow, .tag, .chips li, .ruler__years, .case__cat { font: 600 .78rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums lining-nums;}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;}
.band--ink :focus-visible { outline-color: var(--accent-on-dark);}
.ibtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: transparent; cursor: pointer; padding: 0; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 8px 22px; border-radius: var(--radius); font: 600 1rem/1.25 var(--font-body); text-decoration: none; max-width: 100%; text-align: start; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);}
.btn span { overflow-wrap: anywhere;}
.btn svg { flex: none;}
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow);}
.link-quiet { gap: 10px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .3em; display: inline-flex; align-items: center; min-height: 44px;}
.hdr { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--border); transition: transform var(--dur-1) var(--ease-out);}
.hdr.is-hidden { transform: translateY(-101%);}
.hdr__bar { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; flex-wrap: wrap;}
.hdr__brand { font-family: var(--font-display); font-weight: 560; font-size: 1.1875rem; letter-spacing: -.01em; text-decoration: none; margin-inline-end: auto; display: inline-flex; align-items: center; min-height: 44px;}
.hdr__nav ul { display: flex; gap: var(--s-4); list-style: none;}
.hdr__nav a { text-decoration: none; font-weight: 600; font-size: .9375rem; display: inline-flex; align-items: center; min-height: 44px; position: relative;}
.hdr__tools { display: flex; gap: 8px; align-items: center;}
.hdr__toggle { display: none;}
@media (max-width: 899.98px) {
html.js .hdr__toggle { display: inline-grid;}
html.js .hdr__nav { position: absolute; inset-inline: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--border); display: none; box-shadow: var(--shadow);}
html.js .hdr.is-open .hdr__nav { display: block;}
html.js .hdr__nav ul { flex-direction: column; gap: 0; padding: var(--s-1) var(--gut) var(--s-2);}
html.js .hdr__nav a { min-height: 52px; width: 100%; font-size: 1.0625rem; border-bottom: 1px solid var(--border);}
html:not(.js) .hdr__nav { order: 5; flex-basis: 100%;}
html:not(.js) .hdr__nav ul { flex-wrap: wrap; gap: 0 var(--s-3);}
}
.hero-band { padding-block: clamp(28px, 5vw, 72px) clamp(40px, 5vw, 64px);}
.hero { display: grid; gap: var(--s-5);}
.tblock { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--text); background: var(--surface); margin-bottom: var(--s-5);}
.tblock > * { padding: 10px 14px; border-inline-start: 1px solid var(--text); display: flex; align-items: center; min-height: 56px;}
.tblock > :first-child { border-inline-start: 0;}
.tblock__photo { margin: 0; padding: 0 !important; width: 56px;}
.tblock__photo img { width: 56px; height: 56px; object-fit: cover; display: block;}
.tblock__photo:has(img[src=""]), .tblock__photo:has(img:not([src])) { display: none;}
.tblock__name { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.tblock__photo:has(img[src=""], img:not([src])) + .tblock__name + .tblock__loc { border-inline-start: 0;}
.tblock__loc { color: var(--muted); font-size: .9375rem;}
.tblock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 20%, transparent); margin-inline-end: 10px; flex: none; display: inline-block;}
.hero__title { font-weight: 560; letter-spacing: -.025em; font-size: clamp(2.5rem, 1.1rem + 6vw, 6rem); line-height: 1.02; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em;}
.rise { display: inline-block;}
.squig { display: block; width: min(70%, 20rem); height: auto; margin: .35em 0 var(--s-4); color: var(--accent); stroke: currentColor; stroke-width: 3.2; fill: none;}
.hero__lede { max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); margin-bottom: var(--s-4); hanging-punctuation: first last;}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4);}
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none;}
.chips li { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); color: var(--muted);}
.hero__viz { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;}
.hero__graph { touch-action: pan-y; position: relative; aspect-ratio: 4 / 3; width: 100%; color: var(--text); background-color: var(--surface); background-image: var(--grid); background-size: 16px 16px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transform-style: preserve-3d;}
.hero__graph, .hero__graph * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;}
.sg { direction: ltr;}
.sx { position: absolute; inset: 0; transform-style: preserve-3d;}
.sx > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; margin: 0; padding: 0; list-style: none;}
.sx-base, .sx-pen { pointer-events: none;}
.sx-labels li { position: absolute; inset-inline-start: var(--x); top: var(--y); unicode-bidi: plaintext; width: max-content; transform: translate(-50%, -50%); max-width: 30%; padding: 4px 8px; border: 1.5px solid var(--text); background: var(--surface); text-align: center; font: 600 clamp(.6875rem, .55rem + .5vw, .875rem)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere;}
.chap .sx-labels li { border-color: var(--bg); background: var(--primary); color: var(--bg);}
.sx-labels li:empty { display: none;}
.sx > .sx-note { inset: auto 43% auto auto; width: auto; height: auto; top: 30%; max-width: 18%; padding-inline-end: 36px; text-align: end; color: var(--accent); font: 600 .78rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; pointer-events: none;}
.sx-note span { display: none;}
.sx-note span::after { content: ""; position: absolute; inset-inline-end: -34px; top: .6em; width: 24px; height: 1px; background: var(--accent);}
.sg { --sg-ink: var(--text); --sg-dim: var(--muted); --sg-red: var(--accent); --sg-green: var(--success); --sg-bg: var(--surface);}
.chap .sg { --sg-ink: var(--bg); --sg-dim: var(--muted-on-dark); --sg-red: var(--accent-on-dark); --sg-green: var(--success-on-dark); --sg-bg: var(--primary);}
.sg--build { --build: 1;}
.sg--fix { --bad: 1; --find: 1; --fixp: 1; --prove: 1;}
.sg--extend { --ext: 1;}
.sg > svg, .sg > svg :is(g, defs, mask, .sx-brk, .sx-whole, .sx-j0r, .sx-pm, .sx-probe, .sx-ring, .sx-strike, .sx-mend, .sx-cbg, .sx-cr, .sx-cm, .lg-cols, .lg-head, .lg-rows, .lg-tot, .lg-mark, .sg-pulse, .sx-ok path, .ch-wire path, .lg-sheet rect), .sg .lg-labels, .sg .lg-labels li { --build: inherit; --bad: inherit; --find: inherit; --fixp: inherit; --prove: inherit; --ext: inherit;}
.hero__viz[data-phase="find"] .sg--hero { --bad: 1; --find: 1;}
.hero__viz[data-phase="fix"] .sg--hero { --bad: 1; --find: 1; --fixp: 1;}
.hero__viz[data-phase="prove"] .sg--hero { --bad: 1; --find: 1; --fixp: 1; --prove: 1;}
html[data-motion]:not([data-motion="0"]) .hero__viz:not([data-run]) .sg--hero { --bad: 0; --find: 0; --fixp: 0; --prove: 0;}
html[data-motion]:not([data-motion="0"]) .hero__viz:not([data-run]) :is(.gcap, .sx-note) { visibility: hidden;}
html[data-motion]:not([data-motion="0"]) .hero__viz:not([data-run]) .gsteps button { color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px;}
html[data-motion]:not([data-motion="0"]) .hero__viz:not([data-run]) .gsteps button::after { content: none;}
.hero__viz[data-phase="find"] .sx-note [data-ph="find"], .hero__viz[data-phase="fix"] .sx-note [data-ph="fix"], .hero__viz[data-phase="prove"] .sx-note [data-ph="prove"] { display: block; position: relative;}
.sx-ok path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--prove) * 2.2 - var(--dd) * .6, 1)); opacity: min(1, calc(var(--prove) * 30));}
.sx-brk { stroke-dasharray: 4 6; opacity: calc(var(--bad) * (1 - var(--fixp)));}
.sx-whole { opacity: calc(1 - var(--bad));}
.sx-j0r { opacity: calc(var(--bad) * (1 - var(--fixp)));}
.sx-pm { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--find));}
.sx-probe { opacity: calc((1 - var(--fixp)) * min(1, var(--find) * 40));}
.sx-ring { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--find) - .55) / .45, 1)); opacity: calc((1 - var(--prove)) * min(1, (var(--find) - .5) * 40));}
.sx-strike { opacity: calc(var(--fixp) * (1 - var(--prove)));}
.sx-mend { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fixp));}
.sx-mend--red { opacity: calc((1 - var(--prove)) * min(1, var(--fixp) * 40));}
.sx-mend--ok { opacity: calc(var(--prove) * min(1, var(--fixp) * 40));}
.sg--build .sx-labels li { border-color: transparent; background: none;}
.lg-labels li { overflow-wrap: normal; max-width: 19%; padding-inline: 3px; text-transform: none; letter-spacing: 0; font-size: clamp(.625rem, .5rem + .3vw, .75rem); opacity: clamp(0, calc((var(--build) - .6) * 4), 1);}
.sx-hot { position: absolute; inset-inline-start: 64.06%; top: 34.38%; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 3;}
html:not(.js) .sx-hot { display: none;}
.hero__viz[data-phase="prove"] .sx-hot { box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--muted) 55%, transparent);}
.sx-hot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;}
.sx-cbg { opacity: min(1, calc(var(--prove) * 40));}
.sx-cr { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--prove) * 2, 1)); opacity: min(1, calc(var(--prove) * 40));}
.sx-cm { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--prove) - .5) * 2, 1)); opacity: min(1, calc((var(--prove) - .45) * 40));}
.gsteps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 var(--s-2);}
.gsteps button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 0 0; margin: 0; background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; color: var(--muted); font: 600 .8125rem/1.2 var(--font-body); text-align: start; cursor: pointer; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);}
.gsteps b { font-variant-numeric: tabular-nums; letter-spacing: .08em; font-weight: 600;}
.gsteps button[aria-pressed="true"] { border-top: 2px solid var(--accent); padding-top: 9px; color: var(--accent);}
.hero__viz[data-phase="prove"] .gsteps button[data-ph="prove"]::after { content: "\2713"; color: var(--success); font-weight: 700;}
html:not(.js) .gsteps button { pointer-events: none; cursor: default;}
.gcap { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; min-height: 3.2em;}
.gcap span { display: none;}
.hero__viz[data-phase="find"] .gcap [data-ph="find"], .hero__viz[data-phase="fix"] .gcap [data-ph="fix"], .hero__viz[data-phase="prove"] .gcap [data-ph="prove"] { display: block;}
@media (min-width: 1000px) {
.hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px); align-items: center;}
.hero__copy { grid-column: 1 / 8;}
.hero__viz { grid-column: 8 / 13; align-self: center;}
.hero__graph { width: calc(100% + var(--gut) + max(0px, (100vw - 1320px) / 2)); max-width: none; border-inline-end: 0;}
}
@media (min-width: 1000px) and (max-height: 900px) {
.hero-band { padding-block: 28px 40px;}
.tblock { margin-bottom: var(--s-3);}
.hero__title { font-size: clamp(2.5rem, min(1.1rem + 6vw, 11.5vh), 6rem);}
.squig { margin: .25em 0 var(--s-3);}
.hero__lede { max-width: 40rem; margin-bottom: var(--s-3);}
.cta { margin-bottom: var(--s-3);}
}
@media (max-width: 999.98px) {
.hero { display: flex; flex-direction: column; gap: 0;}
.hero__copy { display: contents;}
.hero__copy > .tblock { order: 1;}
.hero__copy > .hero__title { order: 2; max-width: none;}
.hero__copy > .squig { order: 3;}
.hero__copy > .hero__lede { order: 4; max-width: 40rem;}
.hero__copy > .cta { order: 5;}
.hero__viz { order: 6; margin: var(--s-2) 0 var(--s-3);}
.hero__copy > .chips { order: 7;}
.hero__graph { max-width: 720px;}
}
@media (max-width: 599.98px) {
.sx > .sx-note { display: none;}
.btn--primary { width: 100%;}
.cta { gap: 0 var(--s-4); margin-bottom: var(--s-3);}
.tblock { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; padding: 0 0 10px; margin-bottom: var(--s-3); font-size: .875rem; line-height: 1.35;}
.tblock > * { display: inline; border: 0; padding: 0; min-height: 0;}
.tblock__photo { display: none;}
.tblock__loc { font-size: inherit;}
.hero-band { padding-top: 16px; --ct: 0px;}
.hero__title { font-size: clamp(2rem, 9.4vw, 2.9rem);}
.hero__lede { font-size: .9375rem; margin-bottom: var(--s-3);}
.squig { margin: .25em 0 var(--s-3);}
.gsteps { order: 1;}
.gcap { order: 2; min-height: 4.8em;}
.hero__graph { order: 3;}
.chips--more { order: 4;}
.hero-band::after { background-size: 0 0, 0 0, 1px 19px, 19px 1px;}
}
.track { padding-block: clamp(32px, 3.2vw, 44px);}
.track__title { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); font-weight: 560; margin-bottom: var(--s-2);}
.ruler-wrap { position: relative; border: 1px solid var(--text); background: var(--bg); padding: var(--s-3) var(--s-3) var(--s-2);}
.ruler { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px);}
.ruler__line { position: absolute; inset-inline: var(--s-3); top: calc(var(--s-3) + 7px); height: 1px; background: var(--text); transform-origin: 0 50%;}
.ruler__line::before, .ruler__line::after { content: ""; position: absolute; top: -7px; width: 1px; height: 15px; background: var(--text);}
.ruler__line::before { inset-inline-start: 0;} .ruler__line::after { inset-inline-end: 0;}
.ruler__item { position: relative; padding-top: 32px;}
.ruler__dot { position: absolute; top: 0; inset-inline-start: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text);}
.ruler__years { font: 560 clamp(1.25rem, 1.05rem + .9vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -.01em; text-transform: none; font-variant-numeric: tabular-nums lining-nums; color: var(--text); margin-bottom: 6px; display: flex; align-items: center;}
.ruler__sep { display: inline-block; width: 1.5em; height: 0; border-top: 1.5px solid var(--accent); margin-inline: .6em;}
.ruler__co { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 560; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 2px;}
.ruler__role { color: var(--text); font-weight: 500; font-size: .9375rem; margin: 0;}
.ruler__body .prose { color: var(--muted); max-width: 34ch; font-size: .9375rem; margin-top: var(--s-1);}
.foot-edu { margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--border); color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums lining-nums;}
.track__skills { margin-top: var(--s-2);}
.edu > span + span::before { content: "\00b7"; margin-inline: .6em; color: var(--accent);}
.edu__yrs { font-variant-numeric: tabular-nums lining-nums;}
.edu__yrs > span { display: inline;}
.edu__yrs .ruler__sep { width: 1em; vertical-align: middle; margin-inline: .35em;}
@media (max-width: 899.98px) {
.track { padding-block: 20px;}
.track__title { font-size: 1.125rem; margin-bottom: var(--s-1);}
.ruler-wrap{padding: var(--s-2);}
.ruler__years { font-size: 1rem; margin-bottom: 0;}
.ruler { grid-auto-flow: row; gap: 12px;}
.ruler__line { inset-inline: auto; inset-inline-start: calc(var(--s-2) + 7px); top: calc(var(--s-2) + 7px); bottom: calc(var(--s-2) + 7px); width: 1px; height: auto; transform-origin: 50% 0;}
.ruler__line::before, .ruler__line::after { display: none;}
.ruler__item { padding: 0; padding-inline-start: 36px;}
.ruler__body .prose { max-width: none; font-size: .875rem; line-height: 1.5; margin-top: 4px;}
.foot-edu { margin-top: var(--s-2); font-size: .875rem;}
}
.svc__head { max-width: 46rem; margin-bottom: var(--s-6);}
.eyebrow { color: var(--accent-on-dark); margin: 0 0 var(--s-2);}
.svc__title { color: var(--bg);}
.stage__chapters { display: grid; gap: clamp(56px, 8vw, 112px); counter-reset: chap;}
.chap { counter-increment: chap; display: grid; gap: var(--s-4); align-items: center;}
.chap__fig { aspect-ratio: 4 / 3; border: 1px solid var(--secondary); border-radius: var(--radius); background: color-mix(in oklch, var(--primary) 90%, var(--secondary));}
.chap__fig .sg { position: relative; width: 100%; height: 100%;}
.chap__fig svg { width: 100%; height: 100%; display: block;}
.chap__copy::before { content: counter(chap, decimal-leading-zero); display: block; font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--accent-on-dark); margin-bottom: var(--s-2);}
.chap__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 560; letter-spacing: -.015em; line-height: 1.12; color: var(--bg); margin-bottom: var(--s-2);}
.chap__lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 500; line-height: 1.4; color: var(--bg); max-width: 36rem;}
.chap__text { max-width: 36rem; color: var(--muted-on-dark);}
.chap__text strong { color: var(--bg);}
.chap__text ol { list-style: none; counter-reset: step; margin: var(--s-3) 0 0; display: grid; gap: 10px; position: relative;}
.chap__text ol::before { content: ""; position: absolute; inset-inline-start: 25px; top: 28px; bottom: 28px; width: 1px; background: var(--secondary);}
.chap__text li { counter-increment: step; position: relative; padding-block: 12px; padding-inline: 60px 14px; border: 1px solid var(--secondary); border-radius: var(--radius); background: var(--primary); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);}
.chap__text li::before { content: counter(step); position: absolute; inset-inline-start: 14px; top: 11px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--accent-on-dark); color: var(--accent-on-dark); background: var(--primary); font: 600 .8rem/1 var(--font-body); font-variant-numeric: tabular-nums;}
[data-step="0"] .chap__text li:nth-child(1), [data-step="1"] .chap__text li:nth-child(2), [data-step="2"] .chap__text li:nth-child(3) { border-color: var(--accent-on-dark); background: color-mix(in oklch, var(--primary) 88%, var(--accent-on-dark));}
.rail { margin-top: var(--s-7);}
.rail ol { list-style: none; counter-reset: rail; display: grid; border-top: 1px solid var(--secondary);}
.rail li { counter-increment: rail; min-width: 0;}
.rail a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--secondary); color: var(--muted-on-dark); text-decoration: none; font-weight: 600; font-size: .9375rem; transition: color var(--dur-1) var(--ease-out);}
.rail a span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; min-width: 0;}
.rail a::before { content: counter(rail, decimal-leading-zero); color: var(--accent-on-dark); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .08em;}
.rail a.is-active { color: var(--bg);}
.rail__bar { display: none;}
.svc.is-pinned .band { padding-block: 0;}
.svc.is-pinned .svc__inner { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(60px + clamp(28px, 5vh, 56px)) calc(24px + var(--wb-dock-height, 0px));}
.svc.is-pinned .svc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); margin-bottom: 0;}
.svc.is-pinned .eyebrow { margin: 0;}
.svc.is-pinned .svc__title { font-size: clamp(1.5rem, .9rem + 1.6vw, 2.25rem);}
.svc.is-pinned .stage { flex: 1 1 auto; display: grid; align-content: center; align-items: start; margin-top: var(--s-3);}
.svc.is-pinned .chap__fig { width: min(100%, 69.33vh); justify-self: end;}
.svc.is-pinned .stage__chapters { gap: 0;}
.svc.is-pinned .chap { grid-area: 1 / 1; align-items: start;}
.svc.is-pinned .chap__text ol { gap: 8px;}
.svc.is-pinned .chap__text li { padding-block: 8px; padding-inline: 52px 12px; font-size: .9375rem;}
.svc.is-pinned .chap__text li::before { top: 8px; inset-inline-start: 12px;}
.svc.is-pinned .chap__text ol::before { inset-inline-start: 23px; top: 24px; bottom: 24px;}
.svc.is-pinned .rail { margin-top: var(--s-4);}
.svc.is-pinned .rail__bar { display: block; height: 2px; background: var(--secondary);}
.svc.is-pinned .rail__bar i { display: block; height: 100%; background: var(--accent-on-dark); transform-origin: 0 50%; transform: scaleX(0);}
.svc.is-pinned .rail a { cursor: pointer;}
@media (max-height: 819.98px) { .svc.is-pinned .chap__fig { width: min(100%, 56vh);} .svc.is-pinned .chap__lede { font-size: 1.0625rem; margin-bottom: .5em;} .svc.is-pinned .chap__text li { padding-block: 6px;} }
@media (max-height: 719.98px) {
.svc.is-pinned .svc__inner { padding-block: 80px calc(16px + var(--wb-dock-height, 0px));}
.svc.is-pinned .chap__fig { width: min(100%, 50vh);}
.svc.is-pinned .chap__title { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); margin-bottom: 8px;}
.svc.is-pinned .chap__text { font-size: .9375rem;}
.svc.is-pinned .chap__text ol { display: flex; flex-wrap: wrap; gap: 8px;}
.svc.is-pinned .chap__text ol::before { display: none;}
.svc.is-pinned .chap__text li { font-size: 0; padding-block: 8px; padding-inline: 44px 14px;}
.svc.is-pinned .chap__text li strong { font-size: .9375rem;}
.svc.is-pinned .chap__text li::before { top: 50%; translate: 0 -50%; inset-inline-start: 10px;}
.svc.is-pinned .chap__copy::before { margin-bottom: 8px;}
.svc.is-pinned .sg--fix .sx-labels li { font-size: .75rem; max-width: 34%; overflow-wrap: normal;}
}
.lg-sheet { transform: translate(calc((1 - var(--build)) * var(--dx)), calc((1 - var(--build)) * var(--dy))) rotate(calc((1 - var(--build)) * var(--r))); transform-box: fill-box; transform-origin: center;}
.lg-cols, .lg-head { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--build)); opacity: min(1, calc(var(--build) * 40));}
.lg-rows { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--build) - .5) / .4, 1)); opacity: min(1, calc((var(--build) - .45) * 40));}
.lg-sheet rect { stroke-opacity: calc(1 - var(--build) * .8);}
.lg-mark { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--build) - .75) / .25, 1)); opacity: min(1, calc((var(--build) - .7) * 40));}
.lg-tot { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--build) - .6) / .4, 1)); opacity: min(1, calc((var(--build) - .55) * 40));}
.ch-wire path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ext)); opacity: min(1, calc(var(--ext) * 40));}
.ch-node { opacity: clamp(0, calc((var(--ext) - .4) * 2.5), 1);}
.sg-pulse { opacity: clamp(0, calc((var(--ext) - .8) * 5), 1);}
.cases { list-style: none; display: grid; gap: var(--s-5);}
.work .band { padding-block: clamp(48px, 6vw, 96px) var(--pad-y);}
.work .sec-title { margin-bottom: clamp(var(--s-4), 4vw, var(--s-5));}
.case { display: grid; gap: var(--s-3); height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--s-3); align-content: start; position: relative; grid-template-columns: minmax(0, 1fr);}
.case__wash { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; border-radius: inherit;}
.case__fig { aspect-ratio: 16 / 9; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg); background-image: var(--grid); background-size: 16px 16px; overflow: clip; display: grid; place-items: center; padding: var(--s-1);}
.case__fig svg { width: 100%; height: 100%;}
.vg { display: block;}
.case__fig .case__edit-img { grid-area: 1 / 1; position: relative; z-index: 1; opacity: 0; cursor: pointer;}
.case__fig img { width: 100%; height: 100%; object-fit: cover; display: block;}
@media (min-width: 700px) { .case:has(.case__audio) .case__fig { align-self: start; min-height: 0;} .case:has(.case__audio) .case__fig img { height: auto; object-fit: contain;} }
.case__cat { color: var(--muted); margin-bottom: var(--s-1);}
.case__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 560; letter-spacing: -.015em; line-height: 1.12; margin-bottom: var(--s-2);}
.case__title a { text-decoration: none; display: inline-flex; align-items: baseline; gap: .35em;}
.case__title a svg { flex: none; align-self: center; color: var(--accent);}
.case__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em;}
.case__text { color: var(--text); max-width: 44rem; hanging-punctuation: first last;}
.case__text p { margin: 0 0 .9em;}
.case__text p > strong:first-child { display: inline-block; position: relative; margin-bottom: .3em; color: var(--accent); font: 600 .78rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;}
.case__text p > strong:first-child::after { content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 1px; background: var(--accent); transform: scaleX(1); transform-origin: 0 0;}
.case__text p:last-child > strong:first-child::before { content: ""; position: absolute; inset: -6px -10px; border: 1.5px solid var(--accent); border-radius: 50%; transform: rotate(-2deg); pointer-events: none;}
.case__audio { margin: var(--s-3) 0 0; max-width: 44rem;}
.case__audio figure { margin: 0 0 var(--s-2);}
.case__audio figcaption { color: var(--muted); font: 600 .78rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin-block-end: 6px;}
.case__audio audio { width: 100%; display: block;}
.case__tx .prose h4 { margin: var(--s-2) 0 .3em; color: var(--text); font: 600 .78rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;}
.case__tx { margin-block-start: var(--s-2); border-block-start: 1px solid var(--rule-strong); padding-block-start: var(--s-2);}
.case__tx summary { cursor: pointer; color: var(--accent); font: 600 .78rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;}
.case__tx .prose { margin-block-start: var(--s-2); color: var(--muted); font-size: .9375rem; line-height: 1.55;}
.case__tx .prose p { margin: 0 0 .6em; unicode-bidi: plaintext; text-align: start;}
@media (max-width: 899.98px) {
.case__text p > strong:first-child { font-variant-caps: all-small-caps; text-transform: none; font-size: .9rem; margin-inline-end: .5em;}
}
.tools__list { list-style: none; display: grid; gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); padding-block-start: 12px;}
.spec__list { list-style: none; border-block: 1px solid var(--rule-strong);}
.tool { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-content: start; padding: var(--s-4) var(--s-3) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);}
.tool__fig { grid-row: 1 / span 2; align-self: start; color: var(--text); padding: 6px; border: 1px solid var(--border); background-color: var(--surface); background-image: var(--grid); background-size: 12px 12px;}
.tool__fig svg { display: block; width: 100%; height: auto;}
.spec__row { padding-block: var(--s-3);}
.spec__row:first-child::before { display: none;}
.tag { display: inline-block; color: var(--accent); border: 1.5px solid currentColor; border-radius: var(--radius); padding: 3px 8px; background: var(--bg); transform: rotate(-1.5deg);}
.tool .tag { position: absolute; top: -12px; inset-inline-start: var(--s-3); margin: 0;}
.tool__title { line-height: 1.2; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); font-weight: 560; letter-spacing: -.01em; margin-bottom: var(--s-1);}
.tool__title a { text-decoration-color: var(--accent); text-underline-offset: .22em;}
.tool .prose { color: var(--muted); max-width: 36rem;}
.tools:has(.band) + .spec .band--spec { padding-top: 0;}
.spec__grid { display: grid;}
.spec__list { margin: 0;}
.spec__row { display: grid; gap: var(--s-1); position: relative;}
.spec__row dt { display: flex; align-items: baseline; gap: 12px;}
.spec__row dt::after { content: ""; flex: 1 1 24px; min-width: 24px; border-bottom: 1.5px dotted var(--rule-strong); transform: translateY(-.3em);}
.spec__row::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--border); transform-origin: 0 50%;}
.spec__row dt { font-family: var(--font-display); font-weight: 560; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.15;}
.spec__row dd { margin: 0;}
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px;}
.tags li { border: 1.5px solid var(--rule-strong); border-radius: var(--radius); padding: 6px 12px; background: transparent; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px color-mix(in oklch, var(--rule-strong) 40%, transparent); font: 600 .8125rem/1.2 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text);}
.lvl { display: block; height: 3px; background: var(--border); margin-top: 6px;}
.lvl i { display: block; height: 100%; background: var(--accent);}
@media (min-width: 700px) {
.case { grid-template-columns: 5fr 7fr; gap: var(--s-4); padding: var(--s-4); align-items: center;}
.case-li:nth-child(even) .case { grid-template-columns: 7fr 5fr;}
.case-li:nth-child(even) .case__fig { order: 2;}
.case__fig { align-self: stretch; aspect-ratio: auto; min-height: 220px;}
}
@media (max-width: 899.98px) { .chap__fig { width: min(100%, 427px);} }
@media (min-width: 900px) {
.chap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 32px);}
.chap__copy { grid-column: 1 / 7; grid-row: 1;}
.chap__fig { grid-column: 8 / 13; grid-row: 1;}
.rail ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--s-4); border-top: 0;}
.rail a { border-bottom: 0; border-top: 1px solid var(--secondary); align-items: flex-start; padding-top: 14px;}
.case { gap: var(--s-5); padding: var(--s-5);}
.case__fig { min-height: 260px;}
.case__text p > strong:first-child { display: table;}
.case__text p:last-child { position: relative;}
.case__text p:last-child::before { content: "\2713"; position: absolute; inset-inline-start: -1.6em; top: 0; color: var(--success); font-weight: 700;}
.spec__row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s-3);}
}
.certs__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);}
.cert { display: grid; gap: 2px;}
.cert__t { font-family: var(--font-display); font-weight: 560; font-size: 1.25rem;}
.cert__i, .cert__y { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums;}
.quotes__list { list-style: none; display: grid; gap: var(--s-6);}
.quote blockquote { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; max-width: 30ch;}
.quote__by { color: var(--muted); font-size: .9375rem;}
.quote__by span + span::before { content: "\00b7"; margin-inline: .5em; color: var(--accent);}
.band--strip { background: var(--primary); color: var(--bg); border-top: 0; padding-block: 0 clamp(48px, 6vw, 96px);}
.elsewhere .wrap::before { content: ""; display: block; height: 1px; background: var(--secondary); margin-bottom: var(--s-2);}
.elsewhere__list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--s-5);}
.elsewhere__list a, .elsewhere__list li > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; position: relative; transition: color var(--dur-1) var(--ease-out);}
.elsewhere__list a svg { color: var(--accent-on-dark);}
.elsewhere__list a::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-1) var(--ease-out);}
.contact { padding-bottom: clamp(32px, 4vw, 56px);}
.contact__addr { color: var(--muted-on-dark); margin: var(--s-2) 0 0; max-width: 34rem;}
.contact__tel { margin: 0 0 var(--s-3);}
.contact__tel a { color: var(--bg); font-weight: 600; text-decoration-color: var(--accent-on-dark);}
.contact__grid { display: grid; gap: var(--s-4);}
.contact__title { color: var(--bg); max-width: 18ch; margin-bottom: var(--s-3);}
.contact__sub { color: var(--muted-on-dark); max-width: 34rem;}
.bigmail { display: inline-block; position: relative; margin: var(--s-4) 0 var(--s-2); font-family: var(--font-display); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.5rem, 1rem + 3.4vw, 4rem); overflow-wrap: anywhere; color: var(--bg); text-decoration: none; padding-bottom: .12em; max-width: 100%;}
.bigmail i { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--accent-on-dark); transform-origin: 0 50%;}
.cform .form-row { display: grid; gap: var(--s-2);}
.cform .form-group { display: grid; gap: 6px; margin-bottom: var(--s-2);}
.cform label { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-dark);}
.cform input, .cform textarea { width: 100%; font: inherit; color: var(--bg); background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--radius); padding: 14px 14px; min-height: 52px; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);}
.cform textarea { resize: vertical; min-height: 140px;}
.cform input::placeholder, .cform textarea::placeholder { color: var(--muted-on-dark); opacity: .75;}
.cform input:focus-visible, .cform textarea:focus-visible { outline: 0; border-color: var(--accent-on-dark); box-shadow: 0 0 0 2px var(--accent-on-dark);}
.cform__err { color: var(--accent-on-dark); font-size: .875rem;}
.cform__btn { min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: 600 1rem/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out);}
.cform__sent { border: 1px solid var(--success-on-dark); color: var(--success-on-dark); padding: var(--s-2) var(--s-3); border-radius: var(--radius); margin-bottom: var(--s-3); font-weight: 600;}
@media (min-width: 640px) { .cform .form-row { grid-template-columns: 1fr 1fr;} }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; gap: var(--s-6);} .bigmail { margin-bottom: var(--s-3);} }
.dock { display: none;}
@media (max-width: 899.98px) {
html.js body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));}
html.js .dock { display: flex; gap: 8px; position: fixed; inset-inline: 0; bottom: var(--wb-dock-height, 0px); z-index: 55; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--primary) 18%, transparent); transform: translateY(110%); visibility: hidden; transition: transform var(--dur-2) var(--ease-out), visibility var(--dly-0) var(--ease-lin) var(--dur-2);}
html.js:has(#wb-brain-chat, .theme-whatsapp-widget) .dock { padding-inline-end: calc(var(--gut) + 72px);}
html.js .dock.is-on { transform: none; visibility: visible; transition-delay: var(--dly-0);}
.dock__btn { flex: 1 1 0; min-width: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); font: 600 .875rem/1.2 var(--font-body); text-decoration: none; color: var(--text); background: var(--surface); padding: 0 10px;}
.dock__btn svg { flex: none;}
.dock__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dock__btn--primary { flex-grow: 1.7; background: var(--accent); border-color: var(--accent); color: var(--on-accent);}
}
@media (max-width: 419.98px) {
.dock__btn { font-size: .8125rem; padding: 0 8px; gap: 6px;}
.dock__btn--primary { flex: 1 1 auto;}
.dock__btn:not(.dock__btn--primary) { flex: 0 0 auto;}
.dock__btn--primary svg { display: none;}
}
.ftr { padding-block: var(--s-6);}
.ftr__block { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); border-top: 1px solid var(--rule-strong); padding-top: var(--s-3);}
.ftr__block::before { content: ""; position: absolute; inset-inline-start: 0; top: -5px; width: 1px; height: 9px; background: var(--accent);}
.ftr__brand { flex: 1 1 18rem;}
.ftr__name { font-family: var(--font-display); font-weight: 560; font-size: 1.5rem; margin: 0 0 4px;}
.ftr__tag { color: var(--muted); margin: 0; max-width: 32rem;}
.ftr__links { list-style: none; display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 0 var(--s-4); flex: 0 1 auto;}
.ftr__links a:empty { min-width: 6rem; outline: 1px dashed currentColor; outline-offset: -4px;}
.ftr__links a:empty::before { content: "New link"; opacity: .6;}
.ftr__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-color: var(--accent);}
@media (max-width: 899.98px) { .svc:not(.is-pinned) .chap { content-visibility: auto; contain-intrinsic-size: auto 900px;} }
@media (max-width: 699.98px) { .ftr__links { justify-content: flex-start;} }
@media (max-width: 599.98px) { .tools .sec-title, .spec .sec-title { flex-wrap: wrap; gap: 0;} .tools .sec-title::after, .spec .sec-title::after { flex-basis: 100%; margin-top: var(--s-2);} }
@media (max-width: 479.98px) { .tool { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-1) var(--s-2); padding-inline: var(--s-2);} .tool .tag { inset-inline-start: var(--s-2);} }
@media (hover: hover) and (pointer: fine) {
.ibtn:hover { border-color: var(--accent); color: var(--accent);}
.btn--primary:hover, .cform__btn:hover { background: color-mix(in oklch, var(--accent) 82%, var(--primary));}
.hdr__nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-1) var(--ease-out);}
.hdr__nav a:hover::after { transform: scaleX(1);}
.link-quiet:hover { color: var(--accent);}
.case__text p > strong:first-child::after { transition: transform var(--dur-1) var(--ease-out);}
.case__text p:hover > strong:first-child::after { transform: scaleX(1) scaleY(2);}
.elsewhere__list a:hover, .rail a:hover { color: var(--accent-on-dark);}
.hero__viz .sx-hot:hover { box-shadow: 0 0 0 2px var(--accent);}
html.js .hero__graph { cursor: ew-resize;}
.elsewhere__list a:hover::after { transform: scaleX(1);}
.bigmail:hover i { background: var(--bg);}
}
@media (prefers-reduced-motion: no-preference) {
@keyframes rise { from { transform: translateY(.32em);} }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px);} }
@keyframes draw { from { stroke-dashoffset: 1;} }
@keyframes pulse { to { stroke-dashoffset: -20;} }
html { scroll-behavior: smooth;}
.rise { animation: rise var(--dur-6) var(--ease-out) both;}
.tblock { animation: fadeup var(--dur-4) var(--ease-out) both;}
.hero__lede { animation: fadeup var(--dur-5) var(--ease-out) var(--dly-1) both;}
.cta { animation: fadeup var(--dur-5) var(--ease-out) var(--dur-1) both;}
.chips { animation: fadeup var(--dur-5) var(--ease-out) var(--dly-3) both;}
.squig path { stroke-dasharray: 1; animation: draw var(--dur-4) var(--ease-out) var(--dly-4) both;}
.svc.is-live .chap[data-step]:not([data-step=""]) .sg-pulse { animation: pulse var(--dur-7) var(--ease-lin) infinite;}
.sg--hero { transition: --find var(--dur-9) var(--ease-io), --fixp var(--dur-8) var(--ease-io), --prove var(--dur-7) var(--ease-lin), --bad var(--dur-3) var(--ease-out);}
.hero__viz[data-phase="idle"] .sg--hero, .hero__viz.is-drag .sg--hero { transition: none;}
@keyframes hv-ok { to { --bad: 1; --find: 1; --fixp: 1; --prove: 1; visibility: visible;} }
html:not([data-rl])[data-motion] .hero__viz:not([data-run]) :is(.sg--hero, .gcap, .sx-note) { animation: hv-ok 0s 4s both;}
.sx-hot { transition: box-shadow var(--dur-1) var(--ease-out);}
html[data-motion="2"] .hero__graph { transform: perspective(1400px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));}
html[data-motion="2"] .sx-labels { transform: translateZ(28px) scale(.98);}
html[data-motion="2"] .sx-pen, html[data-motion="2"] .sx > .sx-note { transform: translateZ(46px) scale(.967);}
html[data-motion="2"] .sx-hot { transform: translate(-50%, -50%) translateZ(46px);}
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes rv-in { from { opacity: .4; transform: translateY(16px);} }
@keyframes scale-x { from { transform: scaleX(0);} }
@keyframes scale-y { from { transform: scaleY(0);} }
@keyframes dot-on { from { background: var(--border);} }
@keyframes strokes { from { stroke-dashoffset: 1;} }
@keyframes cover-out { to { transform: scale(.95);} }
@keyframes pen-ring { from { clip-path: inset(0 100% 0 0);} to { clip-path: inset(0);} }
.rv{animation: rv-in var(--ease-lin) forwards; animation-timeline: view(); animation-range: entry 0% entry 60%;}
.ruler__dot { animation: dot-on var(--ease-lin) both; animation-timeline: view(); animation-range: entry 10% entry 100%;}
.spec__row::before { animation: scale-x var(--ease-lin) both; animation-timeline: view(); animation-range: entry 0% entry 80%;}
.bigmail i { animation: scale-x var(--ease-lin) both; animation-timeline: view(); animation-range: entry 30% entry 100%;}
.sec-title{animation: rv-in var(--ease-lin) forwards; animation-timeline: view(); animation-range: entry 0% entry 50%;}
.svc:not(.is-pinned) .chap__copy{animation: rv-in var(--ease-lin) forwards; animation-timeline: view(); animation-range: entry 0% entry 30%;}
.case__text p:last-child > strong:first-child::before { animation: pen-ring var(--ease-lin) both; animation-timeline: view(); animation-range: entry 40% cover 35%;}
@keyframes sg-fix { 0% { --bad: 1; --find: 0; --fixp: 0; --prove: 0;} 35% { --find: 1; --fixp: 0;} 60% { --find: 1; --fixp: 1; --prove: 0;} 100% { --bad: 1; --find: 1; --fixp: 1; --prove: 1;} }
@keyframes sg-build { from { --build: .35;} to { --build: 1;} }
@keyframes sg-ext { from { --ext: 0;} to { --ext: 1;} }
@keyframes step-on { to { border-color: var(--accent-on-dark); background: color-mix(in oklch, var(--primary) 88%, var(--accent-on-dark));} }
.svc:not(.is-pinned) .chap .sg--fix { animation: sg-fix var(--ease-lin) both; animation-timeline: view(); animation-range: entry 10% cover 40%;}
.svc:not(.is-pinned) .chap .sg--build { animation: sg-build var(--ease-lin) both; animation-timeline: view(); animation-range: entry 10% cover 40%;}
.svc:not(.is-pinned) .chap .sg--extend { animation: sg-ext var(--ease-lin) both; animation-timeline: view(); animation-range: entry 10% cover 40%;}
.svc:not(.is-pinned) .chap__text li { animation: step-on var(--ease-lin) both; animation-timeline: view(); animation-range: cover 30% cover 50%;}
.case__fig .glyph__ring, .case__fig .vg__draw { stroke-dasharray: 1; animation: strokes var(--ease-lin) both; animation-timeline: view(); animation-range: entry 20% cover 40%;}
.ruler-wrap::after { content: ""; position: absolute; inset-inline: var(--s-3); top: calc(var(--s-3) + 6px); height: 3px; background: var(--accent); transform-origin: 0 50%; pointer-events: none; animation: scale-x var(--ease-lin) both; animation-timeline: view(); animation-range: entry 100% cover 50%;}
@media (max-width: 899.98px) { .ruler-wrap::after { inset-inline: auto; inset-inline-start: calc(var(--s-2) + 6px); top: calc(var(--s-2) + 7px); bottom: calc(var(--s-2) + 7px); width: 3px; height: auto; transform-origin: 50% 0; animation-name: scale-y; animation-range: entry 0% cover 50%;} }
}
}
@media (min-width: 900px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
.cases { gap: 10vh; padding-bottom: 8vh;}
.case-li { position: sticky; top: calc(88px + var(--i) * 12px);}
.case { min-height: min(72vh, 600px); align-content: stretch; transform-origin: 50% 0;}
.case__body { align-self: center;}
@supports (animation-timeline: view()) and (timeline-scope: --a) {
.cases { timeline-scope: --c2, --c3, --c4, --c5, --c6, --c7, --c8, --c9, --c10;}
@keyframes wash { to { opacity: .78;} }
.case-li:not(:last-child) .case { animation: cover-out var(--ease-lin) both; animation-timeline: none; animation-range: entry 30% cover 48%;}
.case-li:not(:last-child) .case__wash { animation: wash var(--ease-lin) both; animation-timeline: none; animation-range: entry 30% cover 48%;}
.case { view-timeline: --rr block;}
.case__text p:last-child > strong:first-child::before { animation-timeline: --rr; animation-range: entry 40% entry 100%;}
}
}
:dir(rtl) .ruler__line, :dir(rtl) .ruler-wrap::after, :dir(rtl) .spec__row::before, :dir(rtl) .bigmail i, :dir(rtl) .elsewhere__list a::after, :dir(rtl) .hdr__nav a::after, :dir(rtl) .rail__bar i, :dir(rtl) .case__text p > strong:first-child::after { transform-origin: 100% 50%;}