:root { color-scheme: light dark; --sp-bg: #f6f6f4; --sp-surface: #eeeeeb; --sp-raised: #ffffff; --sp-text: #1b1e23; --sp-text-muted: #525862; --sp-accent: #245b7d; --sp-accent-strong: #1a4560; --sp-accent-tint: #e2eaf0; --sp-rule: #1b1e23; --sp-hairline: #d5d8dc; --sp-on-accent: #ffffff; --sp-focus: #245b7d; --sp-shadow-sm: 0 1px 2px rgb(27 30 35 / .06); --sp-shadow-md: 0 1px 2px rgb(27 30 35 / .05), 0 10px 28px -8px rgb(27 30 35 / .14); --ill-t: #ffffff; --ill-l: #e3e6ea; --ill-r: #ccd2d9; --ill-edge: #9aa3ad; --ill-at: #d6e5ef; --ill-al: #9fbfd4; --ill-ar: #7ea6c1; --ill-path: #245b7d; --ill-obs: #8b939d; --ill-ground: #eeeeeb; --color-bg: var(--sp-bg); --color-surface: var(--sp-surface); --color-text: var(--sp-text); --color-accent: var(--sp-accent); --color-accent-600: var(--sp-accent-strong); --color-accent-700: var(--sp-accent-strong); --color-accent-100: var(--sp-accent-tint); --color-accent-800: var(--sp-accent-strong); --color-divider: var(--sp-hairline); --sp-font: "Archivo", system-ui, sans-serif; --sp-display: clamp(40px, 5.4vw, 64px); --sp-h2: clamp(30px, 3.4vw, 40px); --sp-h3: clamp(22px, 2vw, 26px); --sp-lead: clamp(19px, 1.6vw, 21px); --sp-body: 18px; --sp-small: 16px; --sp-measure: 68ch; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-max: 1120px; --sp-edge: clamp(20px, 5vw, 48px); --sp-gutter: clamp(16px, 2.5vw, 32px); --sp-control: 44px; --sp-dur-fast: 150ms; --sp-dur: 240ms; --sp-stagger: 90ms; --sp-ease: cubic-bezier(.2, .7, .2, 1); }
@media (prefers-color-scheme: dark) {
  :root { --sp-bg: #111317; --sp-surface: #181b20; --sp-raised: #1f2329; --sp-text: #e7e9ec; --sp-text-muted: #a2a9b2; --sp-accent: #86b9d8; --sp-accent-strong: #b0d3e8; --sp-accent-tint: #1b2833; --sp-rule: #8b929b; --sp-hairline: #2b3037; --sp-on-accent: #0d1116; --sp-focus: #86b9d8; --sp-shadow-sm: 0 0 0 1px #23272d; --sp-shadow-md: 0 0 0 1px #262a31, 0 14px 34px -10px rgb(0 0 0 / .6); --ill-t: #2c3139; --ill-l: #20242a; --ill-r: #181b20; --ill-edge: #3d444d; --ill-at: #2f4d62; --ill-al: #233b4c; --ill-ar: #1b2f3d; --ill-path: #86b9d8; --ill-obs: #6c747e; --ill-ground: #181b20; }
}
@media print {
  :root { color-scheme: light; --sp-bg: #ffffff; --sp-surface: #f2f2f0; --sp-raised: #ffffff; --sp-text: #1b1e23; --sp-text-muted: #525862; --sp-accent: #245b7d; --sp-accent-strong: #1a4560; --sp-accent-tint: #e2eaf0; --sp-rule: #1b1e23; --sp-hairline: #d5d8dc; --sp-on-accent: #ffffff; --sp-shadow-sm: none; --sp-shadow-md: none; --ill-t: #ffffff; --ill-l: #e3e6ea; --ill-r: #ccd2d9; --ill-edge: #9aa3ad; --ill-at: #d6e5ef; --ill-al: #9fbfd4; --ill-ar: #7ea6c1; --ill-path: #245b7d; --ill-obs: #8b939d; --ill-ground: #f2f2f0; }
  .sp-nav { position: static; }
}
html { scroll-behavior: smooth; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (max-width: 760px) {
  html { scroll-padding-top: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
body { margin: 0px; background: var(--sp-bg); color: var(--sp-text); font-family: var(--sp-font); font-size: var(--sp-body); line-height: 1.6; text-wrap: pretty; }
a { color: var(--sp-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sp-accent-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 3px; }
::selection { background: var(--sp-accent-tint); color: var(--sp-text); }
.sp-wrap { max-width: calc(var(--sp-max) + 2 * var(--sp-edge)); margin: 0px auto; padding: 0 var(--sp-edge); }
.sp-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: var(--sp-gutter); }
.sp-section { padding: var(--sp-8) 0; border-top: 2px solid var(--sp-rule); }
.sp-section:first-of-type { border-top: 0px; }
.sp-rule { height: 2px; border: 0px; margin: 0px; background: var(--sp-rule); }
.sp-measure { max-width: var(--sp-measure); }
.sp-kicker { display: block; margin: 0 0 var(--sp-3); font-size: var(--sp-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-accent); font-feature-settings: "tnum"; }
.sp-display { margin: 0px; font-size: var(--sp-display); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; max-width: 18ch; }
.sp-h2 { margin: 0px; font-size: var(--sp-h2); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.sp-h3 { margin: 0px; font-size: var(--sp-h3); line-height: 1.25; font-weight: 800; letter-spacing: -0.012em; }
.sp-lead { margin: 0px; font-size: var(--sp-lead); line-height: 1.55; max-width: var(--sp-measure); }
.sp-body { margin: 0px; font-size: var(--sp-body); line-height: 1.6; max-width: var(--sp-measure); }
.sp-small { margin: 0px; font-size: var(--sp-small); line-height: 1.55; color: var(--sp-text-muted); }
.sp-stack > * + * { margin-top: var(--sp-4); }
.sp-nav { position: sticky; top: 0px; z-index: 10; background: var(--sp-bg); border-bottom: 2px solid var(--sp-rule); }
.sp-nav-inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; }
.sp-brand { margin-right: auto; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--sp-text); text-decoration: none; }
.sp-brand:hover { color: var(--sp-accent); text-decoration: none; }
.sp-nav-links { display: flex; gap: var(--sp-1); margin: 0px; padding: 0px; list-style: none; }
.sp-nav-links a { display: inline-flex; align-items: center; min-height: var(--sp-control); padding: 0 var(--sp-3); font-size: var(--sp-small); font-weight: 600; color: var(--sp-text); text-decoration: none; }
.sp-nav-links a:hover { color: var(--sp-accent); background: var(--sp-accent-tint); }
.sp-nav-links a[aria-current] { color: var(--sp-accent); box-shadow: inset 0 -2px 0 var(--sp-accent); }
@media (max-width: 760px) {
  .sp-nav-inner { flex-wrap: wrap; gap: 0 var(--sp-3); padding-top: var(--sp-2); }
  .sp-nav-inner > nav { order: 3; flex: 1 0 100%; border-top: 1px solid var(--sp-hairline); }
  .sp-nav-links { flex-wrap: wrap; gap: 0px; margin-inline: calc(-1 * var(--sp-3)); }
  .sp-nav-links a { padding: 0 var(--sp-3); }
}
:target, section[id], article[id], footer[id] { scroll-margin-top: 88px; }
@media (max-width: 760px) {
  :target, section[id], article[id], footer[id] { scroll-margin-top: 140px; }
}
.sp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn.sp-btn { min-height: var(--sp-control); padding: 0 var(--sp-5); font-size: var(--sp-small); justify-content: flex-start; gap: var(--sp-3); transition: background-color var(--sp-dur-fast), color var(--sp-dur-fast), border-color var(--sp-dur-fast); }
.btn.sp-btn:active { transform: translateY(1px); }
.btn.sp-btn.btn-primary { color: var(--sp-on-accent); }
.btn.sp-btn.btn-primary:hover { color: var(--sp-on-accent); background: var(--sp-accent-strong); text-decoration: none; }
.btn.sp-btn.btn-secondary { border: 2px solid var(--sp-text); color: var(--sp-text); }
.btn.sp-btn.btn-secondary:hover { background: var(--sp-text); color: var(--sp-bg); text-decoration: none; }
.sp-arrow { font-weight: 400; }
.sp-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0px; padding: 0px; list-style: none; }
.sp-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3); font-size: var(--sp-small); line-height: 1.2; background: var(--sp-accent-tint); color: var(--sp-accent-strong); }
.sp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0px; border-top: 2px solid var(--sp-rule); }
.sp-metric { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-bottom: 1px solid var(--sp-hairline); }
.sp-metric-num { margin: 0px; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--sp-accent); }
.sp-metric-label { margin: var(--sp-3) 0 0; font-size: var(--sp-body); line-height: 1.4; font-weight: 600; }
.sp-metric-scope { margin: var(--sp-2) 0 0; font-size: var(--sp-small); line-height: 1.5; color: var(--sp-text-muted); }
.sp-context { margin: var(--sp-4) 0 0; font-size: var(--sp-small); color: var(--sp-text-muted); max-width: var(--sp-measure); }
.sp-case { padding: var(--sp-7) 0; border-top: 1px solid var(--sp-hairline); display: grid; grid-template-columns: minmax(0px, 3fr) minmax(0px, 9fr); gap: var(--sp-5) var(--sp-gutter); }
.sp-case:first-of-type { border-top: 2px solid var(--sp-rule); }
.sp-case-num { margin: 0px; font-size: var(--sp-small); font-weight: 800; font-feature-settings: "tnum"; color: var(--sp-accent); }
.sp-case-org { margin: var(--sp-1) 0 0; font-size: var(--sp-small); color: var(--sp-text-muted); }
.sp-case-main > * + * { margin-top: var(--sp-4); }
.sp-pdr { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--sp-5); margin: var(--sp-5) 0 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--sp-hairline); }
.sp-pdr dt { font-size: var(--sp-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-accent); }
.sp-pdr dd { margin: var(--sp-2) 0 0; font-size: var(--sp-small); line-height: 1.55; }
@media (max-width: 900px) {
  .sp-case { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sp-pdr { grid-template-columns: 1fr; gap: var(--sp-4); }
}
.sp-details { border-top: 1px solid var(--sp-hairline); border-bottom: 1px solid var(--sp-hairline); }
.sp-details > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sp-control); padding: var(--sp-2) 0; font-size: var(--sp-small); font-weight: 600; color: var(--sp-accent); cursor: pointer; list-style: none; }
.sp-details > summary::-webkit-details-marker { display: none; }
.sp-details > summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid; font-weight: 800; line-height: 1; }
.sp-details[open] > summary::before { content: "−"; }
.sp-details > summary:hover { color: var(--sp-accent-strong); background: var(--sp-accent-tint); }
.sp-details-body { padding: var(--sp-2) 0 var(--sp-6); }
.sp-details-body > * + * { margin-top: var(--sp-4); }
.sp-details-body h4 { margin: var(--sp-6) 0 0; font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }
.sp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-5) 0 0; padding: var(--sp-4); background: var(--sp-surface); font-size: var(--sp-small); font-weight: 600; }
.sp-flow-note { margin: var(--sp-2) 0 0; font-size: var(--sp-small); color: var(--sp-text-muted); }
.sp-exp { border-top: 2px solid var(--sp-rule); }
.sp-exp-row { display: grid; grid-template-columns: minmax(0px, 4fr) minmax(0px, 6fr) 13.5rem; gap: var(--sp-3) var(--sp-gutter); padding: var(--sp-5) 0; border-bottom: 1px solid var(--sp-hairline); }
.sp-exp-org { margin: 0px; font-size: 20px; line-height: 1.3; font-weight: 800; }
.sp-exp-role { margin: var(--sp-1) 0 0; font-size: var(--sp-small); color: var(--sp-text-muted); }
.sp-exp-dates { margin: 0px; font-size: var(--sp-small); color: var(--sp-text-muted); text-align: right; font-feature-settings: "tnum"; white-space: nowrap; }
@media (max-width: 900px) {
  .sp-exp-row { grid-template-columns: minmax(0px, 1fr) auto; }
  .sp-exp-row > :nth-child(2) { grid-area: 2 / 1 / auto / -1; }
}
.sp-footer { border-top: 2px solid var(--sp-rule); padding: var(--sp-8) 0 var(--sp-6); }
.sp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: var(--sp-6) 0 0; border-top: 1px solid var(--sp-hairline); }
.sp-contact a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--sp-hairline); color: var(--sp-text); text-decoration: none; }
.sp-contact a:hover { background: var(--sp-accent-tint); color: var(--sp-accent-strong); box-shadow: inset 3px 0 0 var(--sp-accent); }
.sp-contact span { font-size: var(--sp-small); color: var(--sp-text-muted); }
.sp-contact strong { font-size: var(--sp-body); font-weight: 600; overflow-wrap: anywhere; }
.sp-legal { margin: var(--sp-6) 0 0; font-size: var(--sp-small); color: var(--sp-text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .sp-contact a, .sp-nav-links a, .sp-details > summary, .sp-brand { transition: background-color var(--sp-dur-fast) ease, color var(--sp-dur-fast) ease, box-shadow var(--sp-dur-fast) ease; }
  .sp-details > summary::before { transition: transform var(--sp-dur) var(--sp-ease); }
  .sp-details[open] > summary::before { transform: rotate(180deg); }
}
.sp-hero { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); gap: var(--sp-7) var(--sp-gutter); align-items: center; }
.sp-hero .sp-display { font-size: clamp(40px, 5vw, 60px); }
@media (max-width: 900px) {
  .sp-hero { grid-template-columns: 1fr; }
  .sp-hero > .sp-figure { max-width: 520px; }
}
.sp-figure { margin: 0px; }
.sp-ill { position: relative; overflow: hidden; display: block; background: var(--sp-raised); border: 1px solid var(--sp-hairline); box-shadow: var(--sp-shadow-md); padding: clamp(12px, 3vw, 28px); }
.sp-ill svg { display: block; width: 100%; height: auto; overflow: visible; }
.sp-figure figcaption { margin: var(--sp-3) 0 0; font-size: var(--sp-small); line-height: 1.5; color: var(--sp-text-muted); max-width: 60ch; }
.sp-case-fig { max-width: 520px; }
.sp-case-main > .sp-figure { margin: 28px 0 24px; }
.i-t { fill: var(--ill-t); }
.i-l { fill: var(--ill-l); }
.i-r { fill: var(--ill-r); }
.i-ta { fill: var(--ill-at); }
.i-la { fill: var(--ill-al); }
.i-ra { fill: var(--ill-ar); }
.i-t, .i-l, .i-r, .i-ta, .i-la, .i-ra { stroke: var(--ill-edge); stroke-width: 1; stroke-linejoin: round; }
.i-g { fill: var(--ill-ground); stroke: var(--ill-edge); stroke-width: 1; stroke-dasharray: 3, 4; }
/* Non-scaling strokes shorten the pathLength-normalized reveal dash when SVGs resize. */
.i-path { fill: none; stroke: var(--ill-path); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-ret { fill: none; stroke: var(--ill-path); stroke-width: 1.5; stroke-dasharray: 5, 5; stroke-linecap: round; stroke-linejoin: round; }
.i-obs { fill: none; stroke: var(--ill-obs); stroke-width: 1.25; stroke-dasharray: 2, 4; stroke-linecap: round; }
.i-node { fill: var(--sp-raised); stroke: var(--ill-obs); stroke-width: 1.5; }
.i-node-a { fill: var(--ill-path); stroke: var(--sp-raised); stroke-width: 2; }
.i-win { fill: var(--ill-path); opacity: 0.85; }
.sp-motion .sp-ill .i-step { opacity: 0; transform: translateY(10px); transition-property: opacity, transform; transition-duration: 1100ms; transition-timing-function: var(--sp-ease); transition-delay: calc(var(--i, 0) * 140ms); }
.sp-motion .sp-ill[data-sp-in] .i-step { opacity: 1; transform: none; }
.sp-motion .sp-ill .i-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms cubic-bezier(.45, 0, .2, 1) calc(var(--i, 0) * 140ms + 300ms); }
.sp-motion .sp-ill[data-sp-in] .i-path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .sp-motion .sp-ill .i-step { opacity: 1 !important; transform: none !important; }
  .sp-motion .sp-ill .i-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
@media print {
  .sp-ill .i-step { opacity: 1 !important; transform: none !important; }
  .sp-ill .i-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .sp-ill { box-shadow: none; }
}

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; background: var(--sp-raised); color: var(--sp-text); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sp-brand { display: inline-flex; align-items: center; min-height: 44px; }
@media print { .skip-link { display: none; } }

/* A little depth, with the diagram geometry and reading order unchanged. */
:root { --ill-depth: #bbc8d3; }
@media screen and (prefers-color-scheme: dark) {
  :root { --ill-depth: #101924; --ill-t: #343d49; --ill-l: #29313b; --ill-r: #202630; --ill-edge: #546171; --ill-at: #3d617a; }
}
.i-volume { isolation: isolate; }
.sp-ill .i-t, .sp-ill .i-ta { stroke-width: .85; }
.sp-ill .i-g { stroke-opacity: .55; }

.sp-inquiry { max-width: 760px; display: grid; gap: 20px; margin-top: 32px; padding: clamp(20px, 4vw, 32px); background: var(--sp-raised); border: 1px solid var(--sp-hairline); box-shadow: var(--sp-shadow-sm); }
.sp-inquiry[data-state="success"] { padding: 0; border: 0; background: transparent; box-shadow: none; }
.sp-inquiry[data-state="success"] > :not(.sp-form-status) { display: none; }
.sp-inquiry[data-settling] { overflow: clip; align-content: start; }
.sp-inquiry label { display: grid; gap: 8px; color: var(--sp-text); font-size: var(--sp-small); font-weight: 600; }
.sp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-inquiry input, .sp-inquiry textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--sp-hairline); border-radius: 0; background: var(--sp-bg); color: var(--sp-text); padding: 12px; font: 400 16px/1.5 var(--sp-font); }
.sp-inquiry textarea { resize: vertical; min-height: 144px; }
.sp-inquiry input:focus-visible, .sp-inquiry textarea:focus-visible { border-color: var(--sp-focus); outline-offset: 2px; }
.sp-inquiry ::placeholder, .sp-optional { color: var(--sp-text-muted); font-weight: 400; }
.sp-inquiry .sp-actions { align-items: center; }
.sp-inquiry button { cursor: pointer; }
.sp-inquiry button:disabled { opacity: .65; cursor: wait; }
.sp-email-option { font-size: var(--sp-small); padding-block: 12px; }
.sp-form-status { position: relative; overflow: hidden; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px; border: 1px solid var(--sp-accent); background: var(--sp-accent-tint); color: var(--sp-text); scroll-margin-block: 140px; }
.sp-form-status[hidden] { display: none; }
.sp-form-status h4 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; font-weight: 700; }
.sp-form-status p { margin: 0; font-size: var(--sp-small); line-height: 1.55; }
.sp-status-icon { width: 48px; height: 48px; color: var(--sp-accent-strong); }
.sp-status-check, .sp-status-error { display: none; }
.sp-form-status[data-state="sending"] .sp-status-ring { stroke-dasharray: 85 45; transform-origin: center; animation: sp-status-spin 1500ms linear infinite; }
.sp-form-status[data-state="success"] { animation: sp-status-arrive 950ms var(--sp-ease) both; }
.sp-form-status[data-state="success"] .sp-status-ring { stroke-dasharray: 126; animation: sp-status-ring 850ms 150ms var(--sp-ease) both; }
.sp-form-status[data-state="success"] .sp-status-check { display: block; stroke-dasharray: 1; animation: sp-status-check 700ms 500ms var(--sp-ease) both; }
.sp-form-status[data-state="error"] { border-color: #b44a34; animation: sp-status-arrive 600ms var(--sp-ease) both; }
.sp-form-status[data-state="error"] .sp-status-icon { color: #ad3c28; }
.sp-form-status[data-state="error"] .sp-status-error { display: block; }
@media (prefers-color-scheme: dark) {
  .sp-form-status[data-state="error"] { border-color: #e19583; }
  .sp-form-status[data-state="error"] .sp-status-icon { color: #f0aa99; }
}
@keyframes sp-status-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sp-status-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sp-status-ring { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }
@keyframes sp-status-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .sp-form-status { grid-template-columns: 1fr; padding: 20px; } }
.sp-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) { .sp-form-grid { grid-template-columns: 1fr; } }
@media print { .sp-inquiry { display: none; } }

.sp-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 0; }
.sp-contact a { min-width: 0; min-height: 96px; padding: 18px; border: 1px solid var(--sp-hairline); overflow: hidden; }
.sp-contact a:hover { background: var(--sp-accent-tint); border-color: var(--sp-accent); box-shadow: none; }
.sp-contact a:focus-visible { outline-offset: 2px; }
@media (max-width: 1000px) { .sp-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .sp-contact { grid-template-columns: 1fr; } }

/* Toolkit groups on the homepage: two columns, one column on phones. */
.sp-toolkit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .sp-toolkit { grid-template-columns: 1fr; } }

/* Slow assembly, then one quiet highlight. Resting diagrams remain still. */
:root { --sp-dur-fast: 240ms; --sp-dur: 420ms; --sp-ease: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: no-preference) {
  .sp-ill::after, .sp-form-status[data-state="success"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--sp-accent) 10%, transparent) 48%, transparent 70%);
  }
  .sp-motion .sp-ill[data-sp-in]::after { animation: sp-light-pass 2200ms 600ms var(--sp-ease) both; }
  .sp-motion .sp-ill[data-sp-in] .i-node-a { animation: sp-node-settle 1200ms calc(var(--i, 0) * 140ms + 1900ms) ease-out both; }
  .sp-form-status[data-state="success"]::after { animation: sp-light-pass 1800ms 250ms var(--sp-ease) both; }
  .sp-arrow { display: inline-block; transition: transform 500ms var(--sp-ease); }
  .sp-btn:is(:hover, :focus-visible) .sp-arrow { transform: translate(3px, -2px); }
  .sp-btn[href="#work"]:is(:hover, :focus-visible) .sp-arrow { transform: translate(3px, 2px); }
  .sp-contact strong { transition: transform 500ms var(--sp-ease); }
  .sp-contact a:is(:hover, :focus-visible) strong { transform: translateX(3px); }
  .sp-contact a { transition: background-color 420ms var(--sp-ease), border-color 420ms var(--sp-ease), color 420ms var(--sp-ease); }
  .sp-inquiry input, .sp-inquiry textarea { transition: border-color 300ms ease, box-shadow 420ms var(--sp-ease); }
  .sp-inquiry input:focus-visible, .sp-inquiry textarea:focus-visible { box-shadow: 0 0 0 4px var(--sp-accent-tint); }
  @supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
    .sp-details { interpolate-size: allow-keywords; }
    .sp-details::details-content {
      block-size: 0; opacity: 0; overflow: clip;
      transition: block-size 600ms var(--sp-ease), opacity 400ms ease, content-visibility 600ms allow-discrete;
    }
    .sp-details[open]::details-content { block-size: auto; opacity: 1; }
  }
}
@keyframes sp-light-pass {
  0% { transform: translateX(-100%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes sp-node-settle {
  0%, 100% { stroke-width: 2; }
  40% { stroke-width: 6; }
}