.specimen { align-items: start; row-gap: var(--space-48); }
.specimen__text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-32); }
.specimen__text h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-solid); letter-spacing: var(--tracking-tight); }
@media (min-width: 768px) { .specimen__text h2 { text-wrap: balance; } }
.specimen__text p { margin: 0; max-width: 30em; font-size: var(--fs-text-l); line-height: var(--lh-text); color: var(--ink-2); }
.specimen__cta { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.specimen { overflow-x: clip; }
.specimen__vis { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); container-type: inline-size; }
.specimen__stage { position: relative; aspect-ratio: 4 / 3; container-type: inline-size; }
@container (max-width: 599.98px) { .specimen__stage { width: 88%; margin: 17.2% 0 16.5% -8.1%; } }
.specimen__img { position: absolute; left: -9%; top: -38%; width: 175%; aspect-ratio: 4 / 3; background: url(../home/specimen-bouquet.png) center / 100% 100% no-repeat; pointer-events: none; }
.specimen__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.specimen__lines path { stroke: var(--signal); stroke-width: 1; fill: none; }
.specimen__lines circle { fill: var(--signal); }
.mv { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); aspect-ratio: 4 / 3; border: 1px solid var(--signal); pointer-events: none; }
.mv:nth-of-type(1) { --x: 36.4; --y: 9.4; --w: 18.0; }
.mv:nth-of-type(2) { --x: 62.9; --y: 33.9; --w: 12.8; }
.mv:nth-of-type(3) { --x: 31.0; --y: 49.2; --w: 16.9; }
.mv:nth-of-type(4) { --x: 53.6; --y: 60.0; --w: 13.5; }
.mv::before { content: ""; position: absolute; inset: 0; background: url(../home/specimen-bouquet-color.png) calc((30.63 - var(--x)) * 1cqw - 1px) calc((6.72 - var(--y) * .75) * 1cqw - 1px) / 45.45cqw auto no-repeat; }
@container (max-width: 599.98px) {
  .mv b { display: none; }
  .mv:nth-of-type(1) { --x: 40.14; --y: 83.56; --w: 31.64; }
  .mv:nth-of-type(2) { --x: 56.96; --y: -4.04; --w: 33.65; }
  .mv:nth-of-type(3) { --x: 17.25; --y: -4.04; --w: 22.21; }
  .mv:nth-of-type(4) { --x: 87.93; --y: 46.91; --w: 36.35; }
  .specimen__vis .specimen__stats { padding-inline: var(--space-16); gap: var(--space-8); }
  .specimen__vis .specimen__stats div { padding-inline: var(--space-16); }
  .mv::before { background: url(../home/specimen-bouquet-color-full.webp) calc((-9 - var(--x)) * 1cqw - 1px) calc((-28.5 - var(--y) * .75) * 1cqw - 1px) / 175cqw auto no-repeat; }
}
.mv b { position: absolute; left: -1px; bottom: 100%; padding: var(--space-2) var(--space-4); background: var(--signal); font-family: var(--font-mono); font-size: var(--fs-text-2xs); font-weight: 400; line-height: var(--lh-ui); white-space: pre; color: var(--white); }
.specimen__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin: 0; }
.specimen__stats { position: relative; z-index: 1; }
.specimen__stats div { display: grid; gap: var(--space-2); padding: var(--space-12) var(--space-16) var(--space-16); border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--white); }
@container (min-width: 600px) {
  .specimen__stats { position: absolute; inset: var(--space-24); display: block; }
  .specimen__stats div { position: absolute; width: var(--card-w, auto); }
  .specimen__stats div:nth-child(odd) { left: 0; }
  .specimen__stats div:nth-child(even) { right: 0; }
  .specimen__stats div:nth-child(-n + 2) { top: 0; }
  .specimen__stats div:nth-child(n + 3) { bottom: 0; }
}
.mv:nth-of-type(1), .specimen__stats div:nth-child(1), .specimen__lines :nth-child(-n + 2) { --i: 0; --sx: 60%; --sy: 45%; }
.mv:nth-of-type(2), .specimen__stats div:nth-child(2), .specimen__lines :nth-child(n + 3):nth-child(-n + 4) { --i: 1; --sx: -55%; --sy: 60%; }
.mv:nth-of-type(3), .specimen__stats div:nth-child(3), .specimen__lines :nth-child(n + 5):nth-child(-n + 6) { --i: 2; --sx: 50%; --sy: -55%; }
.mv:nth-of-type(4), .specimen__stats div:nth-child(4), .specimen__lines :nth-child(n + 7) { --i: 3; --sx: -60%; --sy: -45%; }
@media (prefers-reduced-motion: no-preference) {
  .mv, .mv b, .mv::before, .specimen__lines circle, .specimen__stats div { opacity: 0; }
  .specimen__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .specimen__stats div { transform: translateY(var(--space-24)); }
  .specimen__vis { --step: var(--dur-300); --seek: var(--dur-900); --count: calc(2 * var(--dur-600)); }
  .specimen__vis.is-in .mv { animation: mv-seek var(--seek) var(--ease) calc(var(--i) * var(--step)) both; }
  .specimen__vis.is-in .mv b, .specimen__vis.is-in .mv::before, .specimen__vis.is-in .specimen__lines circle { opacity: 1; transition: opacity var(--dur-200) calc(var(--i) * var(--step) + var(--seek)); }
  .specimen__vis.is-in .specimen__lines path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-300) var(--ease) calc(var(--i) * var(--step) + var(--seek)); }
  .specimen__vis.is-in .specimen__stats div { opacity: 1; transform: none; transition: opacity var(--dur-600) var(--ease), transform var(--dur-600) var(--ease); transition-delay: calc(var(--i) * var(--step) + var(--seek) + var(--step)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
  .specimen__vis { --step: var(--dur-150); --seek: var(--dur-600); --count: var(--dur-600); }
}
@keyframes mv-seek {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.35); }
  12% { opacity: 1; }
  18% { opacity: .2; }
  24% { opacity: 1; }
  45% { transform: translate(calc(var(--sx) * -.35), calc(var(--sy) * .4)) scale(.35); }
  65% { transform: scale(.35); }
  75% { opacity: 1; transform: scale(.35); }
  100% { opacity: 1; transform: none; }
}
.specimen__stats dt { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-solid); letter-spacing: var(--tracking-tight); }
.specimen__stats dd { margin: 0; font-size: var(--fs-text-l); line-height: var(--lh-ui); color: var(--ink-2); }

.pill-link { align-items: center; height: var(--space-32); padding: 0 var(--space-16); border-radius: var(--radius-pill); background: var(--white); color: var(--ink); }
.pill-link:hover { color: var(--ink); }

.hero-meta { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--space-24); display: flex; justify-content: center; margin: 0; font-family: var(--font-mono); font-size: var(--fs-text-xs); letter-spacing: var(--tracking-caps-s); text-transform: uppercase; color: var(--faint); pointer-events: none; }
.hero-meta span:last-child { position: absolute; right: var(--margin); }
@media (prefers-reduced-motion: no-preference) {
  .hero-meta { transition: opacity var(--dur-600) var(--ease) var(--dur-900); }
  .hero-slot:not(.is-titled) .hero-meta { opacity: 0; }
}

.sec__intro { display: flex; flex-direction: column; gap: var(--space-16); }
.sec__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.sec__intro p { margin: 0; font-size: var(--fs-text-l); line-height: var(--lh-text); color: var(--ink-2); }
.refs .specs { grid-column: 1 / -1; }

.cell { position: relative; }
.spec__label {
  position: absolute; top: 0; left: 0; padding: var(--space-6) var(--space-16); background: var(--ink-a08); color: var(--ink-3); transition: background var(--dur-150), color var(--dur-150);
  font-family: var(--font-mono); font-size: var(--fs-text-xs); line-height: var(--lh-ui); letter-spacing: var(--tracking-figures); text-transform: uppercase; white-space: pre;
}
.spec:hover .spec__label, .spec:focus-visible .spec__label { background: var(--signal); color: var(--white); }
.spec__bot { position: absolute; left: var(--space-16); right: var(--space-16); bottom: var(--space-16); display: grid; gap: var(--space-12); }
.spec__bot .spec__title { font-size: var(--fs-text-m); }
.spec__pills { display: flex; align-items: center; gap: var(--space-4); }
.spec__pill { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background: var(--white); font-size: var(--fs-text-s); line-height: var(--lh-ui); white-space: nowrap; }
.refs .spec { background: var(--white); isolation: isolate; }
.refs .spec__media { z-index: 1; }
.refs .spec__pill { background: var(--surface); }
.spec__pill svg { width: var(--icon-xs); height: var(--icon-xs); fill: currentColor; }
.spec__pill--cat { margin-left: auto; }
.fav {
  position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center;
  box-sizing: content-box; width: var(--icon-xl); height: var(--icon-xl); padding: var(--space-16); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--ink-a25); cursor: pointer; transition: color var(--dur-150);
}
.fav:hover { color: var(--ink-3); }
.fav svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.fav[aria-pressed="true"] { color: var(--signal); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.work__video { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spec__media .work__video { object-fit: contain; transition: transform var(--dur-600) var(--ease); }
.spec:hover .spec__media .work__video { transform: scale(1.02); }

@media (max-width: 1023.98px) { .refs .cell:nth-child(n + 7) { display: none; } }
@media (max-width: 767.98px) {
  .refs .specs { --per-row: 1; }
  .refs .cell:nth-child(n + 4) { display: none; }
  .refs .spec { display: flex; flex-direction: column; gap: var(--space-32); aspect-ratio: auto; padding: 0 var(--space-16) var(--space-16); }
  .refs .spec__label { position: static; order: -1; align-self: flex-start; margin-left: calc(-1 * var(--space-16)); }
  .refs .spec__media { position: relative; inset: auto; }
  .refs .spec__media img { display: block; height: auto; }
  .refs .spec__bot { position: static; }
}
@media (hover: none), (max-width: 767.98px) {
  .spec .spec__label { background: var(--signal); color: var(--white); transition: none; }
  .spec:hover .spec__media :is(img, .work__video) { transform: none; }
  .fav:not([aria-pressed="true"]):hover { color: var(--ink-a25); }
}

.pull { --pull-top: 0px; position: relative; height: 440svh; margin-top: var(--section); }
.pull__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pull__scene { position: absolute; inset: 0; will-change: transform; }
.pull__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.pull__head { --on: 0; position: absolute; z-index: 3; left: var(--margin); top: calc(var(--pull-top) + var(--space-32)); margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-solid); letter-spacing: var(--tracking-tight); color: color-mix(in srgb, var(--white) calc((1 - var(--on)) * 100%), var(--ink)); text-shadow: 0 1px var(--space-24) color-mix(in srgb, var(--ink-a25) calc((1 - var(--on)) * 100%), transparent); }
.pull__box { position: absolute; z-index: 3; border: 1px solid var(--signal); opacity: 0; pointer-events: none; }
.pull__box span { position: absolute; left: -1px; bottom: 100%; padding: var(--space-2) var(--space-6); background: var(--signal); color: var(--white); font-family: var(--font-mono); font-size: var(--fs-text-xs); line-height: var(--lh-ui); letter-spacing: var(--tracking-figures); text-transform: uppercase; white-space: nowrap; }
.pull__crop, .pull__spot { position: absolute; z-index: 2; left: 0; top: 0; transform-origin: 0 0; background-image: url("../preloader/still.jpg"); background-repeat: no-repeat; opacity: 0; pointer-events: none; will-change: transform; }
.pull__lines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pull__lines line { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pull__panel { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: clamp(280px, 30vw, 440px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: calc(var(--pull-top) + var(--space-32) + var(--fs-h2) * var(--lh-solid) + var(--margin)) var(--margin) var(--margin); background: var(--page); transform: translateX(100%); }
.pull__row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-48); align-items: center; color: inherit; text-decoration: none; }
.pull__row:hover { color: inherit; }
.pull__row + .pull__row { margin-top: var(--space-24); }
.pull__tile { display: grid; align-content: start; }
.pull__plate { justify-self: start; padding: var(--space-2) var(--space-6); background: var(--signal); color: var(--white); font-family: var(--font-mono); font-size: var(--fs-text-xs); line-height: var(--lh-ui); letter-spacing: var(--tracking-figures); text-transform: uppercase; opacity: 0; }
.pull__slot { display: block; max-width: 100%; background-image: url("../preloader/still.jpg"); background-repeat: no-repeat; background-size: 0 0; }
.pull__body { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-48); align-self: stretch; opacity: 0; }
.pull__text { display: grid; gap: var(--space-12); flex: 0 1 37.5em; min-width: 0; }
.pull__text h3 { margin: 0; font-family: var(--font-display-text); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); transition: color var(--dur-200); }
.pull__row--paper h3 { max-width: 17em; }
.pull__text p { margin: 0; max-width: 29em; font-size: var(--fs-text-l); line-height: var(--lh-text); color: var(--muted); }
.pull__body .btn { flex: none; }
@media (hover: hover) {
  .pull__row:hover h3 { color: var(--signal); }
  .pull__row:hover .btn { border-color: var(--signal); color: inherit; }
  .pull__row:hover .btn::before { transform: translate(-50%, -50%) scale(1); }
  .pull__row:hover .btn__label { transform: translateY(calc(-1 * var(--h))); }
}
@media (max-width: 767.98px) {
  .pull { height: auto; }
  .pull__pin { position: static; height: auto; overflow: visible; }
  .pull__scene, .pull__lines, .pull__pin > .pull__crop { display: none; }
  .pull__head { position: static; margin: 0 var(--margin) var(--space-24); color: var(--ink); text-shadow: none; }
  .pull__panel { position: static; width: auto; gap: var(--space-32); padding: 0 var(--margin); background: none; transform: none; }
  .pull__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-16); }
  .pull__row + .pull__row { margin-top: 0; }
  .pull__plate { opacity: 1; }
  .pull__slot { width: 100%; }
  .pull__body { display: grid; gap: var(--space-16); opacity: 1; }
  .pull__text { width: auto; }
  .pull__text h3 { font-size: var(--fs-h4); line-height: var(--lh-ui); }
  .pull__body .btn { width: 100%; }
}

.app--home { display: block; }
.app--home .sec__head h2 { font-family: var(--font-display); }
.app--home .hero-slot { position: relative; height: 100vh; height: 100svh; overflow: hidden; border-bottom: 0; background: var(--page); }
body:has(.app--home), .app--home .chead.is-past, body:has(.app--home) .mhead.is-past { background: var(--page); }
.hero-slot iframe ~ .hero-slot__empty { display: none; }

.app--home .chead { position: fixed; left: 0; right: 0; }
@media (min-width: 1024px) {
  .specimen__text { grid-column: 1 / span 5; align-self: center; }
  .specimen__vis { grid-column: 7 / -1; }
}







@media (max-width: 767.98px) {
  .hero-meta { display: none; }
  .app--home .specimen__cta { flex-direction: column; align-items: stretch; }
  .app--home .sec__actions { flex-direction: column; align-self: stretch; }
  .app--home :is(.specimen__cta, .sec__actions) .btn { width: 100%; }
  .app--home .sec__head > div { min-width: 0; }
  .app--home .sec__head .link-arrow { flex: none; }
}



.app--home .hero-slot__empty { place-items: end start; padding: 0 var(--margin) clamp(var(--space-48), 7vw, var(--space-96)); text-align: left; }
.hero-title { max-width: 36em; }
.hero-title h1 { font-family: var(--font-sans-light); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--ink); }
.hero-title h1 span { display: block; }
.hero-title p { margin: var(--space-24) 0 0; max-width: 30em; font-size: calc(var(--fs-text-l) * 1.15); line-height: var(--lh-ui); color: var(--muted); }

.leave { position: fixed; inset: 0; z-index: 39; background: var(--page); pointer-events: none; opacity: 0; visibility: hidden; }
.app--home.is-leaving .leave { visibility: visible; opacity: 1; transition: opacity var(--dur-450) var(--ease); }
@media (min-width: 768px) { .app--home .sec__head { margin-bottom: var(--space-64); } .app--home .sec__head:has(+ :is(.score-chart, .specs)) { margin-bottom: var(--space-32); } }
@media (max-width: 767.98px) {
  .app--home .specimen__text { gap: var(--space-16); }
  .app--home .specimen__cta { order: 1; margin-top: var(--space-16); }
}