/* Mockup v4: DePuy Synthes 2026 brand (DS Body type, DS colour palette, notch cards, red
   hairlines, trace line). Colour and contrast choices follow BP-scalpel's audited LCO theme:
   DS Red only at 24px and above on purple, DS Coral for small red on purple, DS Mid Red on bone. */

@font-face { font-family: "DS Body Hero"; src: url("fonts/DSBodyHero-VF.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "DS Body Headline"; src: url("fonts/DSBodyHeadline-Thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "DS Body Copy"; src: url("fonts/DSBodyCopy-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DS Body Copy"; src: url("fonts/DSBodyCopy-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DS Body Copy"; src: url("fonts/DSBodyCopy-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DS Body Copy"; src: url("fonts/DSBodyCopy-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ds-purple: #2f1849;
  --ds-dark-purple: #1d0d2b;
  --ds-violet: #6426c6;
  --ds-red: #ff1f1f;
  --ds-coral: #ff4242;
  --ds-mid-red: #cc0000;
  --ds-bone: #e8e3d9;
  --ds-mid-bone: #cec9ba;
  --ds-light-bone: #f7f6f2;
  --ds-dark-bone: #7a6f66;

  /* lifts of DS Purple, never greys */
  --lift: #3a2057;
  --rule-p: #4a3363;
  --track: #3f2a5c;

  /* DS data-vis set for dark grounds, all AA on DS Purple */
  --v-lime: #9ecc5c;
  --v-pistachio: #60cc9b;
  --v-yellow: #ffb600;
  --v-lavender: #ad99ff;
  --v-orange: #ff6c39;

  --on-bone-muted: color-mix(in srgb, var(--ds-purple) 70%, var(--ds-bone));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 12vh, 150px);
  --max: 1320px;

  --f-hero: "DS Body Hero", Inter, system-ui, sans-serif;
  --f-head: "DS Body Headline", Inter, system-ui, sans-serif;
  --f-copy: "DS Body Copy", Inter, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { background: var(--ds-purple); color: var(--ds-bone); font-family: var(--f-copy); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; scroll-behavior: smooth; }
/* controls fire on tap without the double-tap wait, and a long press does not select their label */
button, a, .cab { touch-action: manipulation; }
button, .btn, .cab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-size: 1.0625rem; line-height: 1.45; letter-spacing: 0.003em; overflow-x: hidden; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--v-lavender); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 12px 16px; background: var(--ds-bone); color: var(--ds-purple); }
.skip:focus { top: 16px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.sample-note { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; padding: 6px 12px; border: 1px dashed var(--v-yellow); border-radius: 999px; background: var(--ds-dark-purple); color: var(--v-yellow); font-size: 0.8125rem; }
/* Anything invented for the mockup wears this, so real and sample figures never mix unnoticed */
.sample { outline: 1px dashed var(--v-yellow); outline-offset: 3px; border-radius: 4px; }
.sample-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px dashed var(--v-yellow); border-radius: 999px; color: var(--v-yellow); font: 500 0.75rem/1.4 var(--f-copy); letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle; }
.band--bone .sample-tag { color: #7a5200; border-color: #b07800; }

/* ---------- Type roles (DS Typography Guidelines p.4) ---------- */

.hero-type { font-family: var(--f-hero); font-weight: 400; letter-spacing: -0.035em; line-height: 0.88; }
.headline { font-family: var(--f-head); font-weight: 100; letter-spacing: -0.035em; line-height: 0.92; }
.headline .red { display: block; color: var(--ds-red); }
.band--bone .headline .red { color: var(--ds-mid-red); }
.h1 { font-size: clamp(3.5rem, 9.5vw, 9rem); }
.h2 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); }
.h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.eyebrow { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.03em; line-height: 1.2; text-transform: uppercase; color: var(--ds-coral); }
.band--bone .eyebrow { color: var(--ds-mid-red); }
.standfirst { font-weight: 300; font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); letter-spacing: -0.005em; line-height: 1.3; max-width: 34ch; }
.muted { color: var(--ds-mid-bone); }
.band--bone .muted { color: var(--on-bone-muted); }
.num { font-variant-numeric: tabular-nums; }

/* The guidelines' rule: a heavier red run on the left, then a hairline to the edge */
.redrule { height: 3px; background: linear-gradient(90deg, var(--ds-red) 0 30%, transparent 30%) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ds-red), var(--ds-red)) 0 1px / 100% 1px no-repeat; opacity: 0.9; }
.band--bone .redrule { filter: saturate(0.9); }

/* ---------- Buttons: a label with its icon in a separate notched segment ---------- */

.btn {
  display: inline-flex; align-items: stretch; gap: 3px; min-height: 48px;
  text-decoration: none; cursor: pointer; border: 0; padding: 0; background: none;
  font-weight: 500; font-size: 1rem; transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn > span { display: inline-flex; align-items: center; padding: 0 20px; border-radius: 12px; transition: background-color 200ms var(--ease-out); }
.btn > .btn__icon { padding: 0; width: 48px; justify-content: center; }
.btn--primary > span { background: var(--ds-bone); color: var(--ds-purple); }
.btn--primary > .btn__icon { color: var(--ds-mid-red); }
.btn--ghost > span { background: var(--lift); color: var(--ds-bone); }

.band--bone .btn--primary > span { background: var(--ds-purple); color: var(--ds-bone); }
.band--bone .btn--primary > .btn__icon { color: var(--ds-coral); }

.link { color: inherit; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; font-weight: 500; color: var(--ds-coral); }
.link::after { content: "→"; transition: transform 200ms var(--ease-out); }

.band--bone .link { color: var(--ds-mid-red); }

/* ---------- Notch card (brand: generous radius, a rounded tab pushed out of one edge) ---------- */

.notch { position: relative; border-radius: 28px; }
.notch::before { content: ""; position: absolute; top: 52px; left: -17px; width: 34px; height: 62px; border-radius: 13px; background: inherit; }
.notch--right::before { left: auto; right: -17px; }

.trace { position: absolute; pointer-events: none; fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.trace path { vector-effect: non-scaling-stroke; }

/* ---------- Nav ---------- */

.nav { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px; transition: background-color 250ms var(--ease-out); }
.nav[data-solid] { background: rgb(47 24 73 / 0.97); box-shadow: 0 1px 0 var(--rule-p); }
.wordmark { font-family: var(--f-head); font-weight: 100; font-size: 1.625rem; letter-spacing: -0.035em; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); list-style: none; padding: 0; font-size: 0.9375rem; }
.nav__links a { text-decoration: none; color: var(--ds-mid-bone); padding: 10px 0; }
.nav__links a[aria-current] { color: var(--ds-bone); }
.nav__cv { padding: 8px 14px !important; border-radius: 10px; background: var(--ds-bone); color: var(--ds-purple) !important; font-weight: 500; }
@media (max-width: 999px) { .nav__links .hide-sm { display: none; } }

/* ---------- Bands ---------- */

.band--bone { background: var(--ds-bone); color: var(--ds-purple); }
.band--light { background: var(--ds-light-bone); color: var(--ds-purple); }
.band--dark { background: var(--ds-dark-purple); }
.section { padding-block: var(--section-y); }
.section__head { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__head .redrule { margin-bottom: 8px; }
@media (min-width: 900px) { .section__head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 48px; } .section__head .redrule { grid-column: 1 / -1; } }
.section__head p { max-width: 46ch; }

/* ---------- About ---------- */

.about { position: relative; padding-top: clamp(130px, 19vh, 190px); padding-bottom: var(--section-y); overflow: clip; }
.about .trace { right: -4%; top: 70px; width: min(760px, 70vw); height: 420px; stroke: var(--ds-bone); opacity: 0.35; }
.about__grid { position: relative; display: grid; gap: clamp(36px, 5vw, 72px); align-items: end; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 1.4fr 1fr; } }
.about__name { margin: 22px 0 18px; color: var(--ds-bone); }
.about__role { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.about__body { max-width: 54ch; color: var(--ds-mid-bone); margin-top: 22px; }
.about__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 420px; width: 100%; justify-self: end; background: var(--lift); overflow: visible; }
.portrait__img { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 30%, rgb(232 227 217 / 0.14), transparent 70%), linear-gradient(180deg, #4a3070, #26123a); }
.portrait svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 88%; }
.portrait figcaption { position: absolute; left: 22px; bottom: 18px; font-size: 0.8125rem; color: var(--v-yellow); }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(56px, 7vw, 88px); background: var(--rule-p); border-block: 1px solid var(--rule-p); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--ds-purple); padding: 22px 20px; }
.fact:first-child, .kpi:first-child { padding-left: 0; }
@media (max-width: 899px) { .fact:nth-child(odd), .kpi:nth-child(odd) { padding-left: 0; } }
.fact dd { font-family: var(--f-hero); font-size: clamp(3rem, 5.5vw, 4.75rem); letter-spacing: -0.035em; line-height: 0.9; color: var(--ds-bone); font-variant-numeric: tabular-nums; }
.fact dt { margin-top: 10px; font-size: 0.9375rem; color: var(--ds-mid-bone); max-width: 22ch; }
.fact small { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ds-mid-bone); opacity: 0.8; }

/* ---------- My courses: the cabinet ---------- */

.courses { padding-top: var(--section-y); }
.store-wrap { position: relative; }
.store {
  --cab-w: clamp(128px, 11.6vw, 200px);
  --cab-h: calc(var(--cab-w) * 2.28);
  --cab-gap: clamp(14px, 1.6vw, 26px);
  --floor: 30%;
  --lx: 50%; --ly: 40%; --lamp-r: 520px;
  position: relative; height: clamp(560px, 80vh, 760px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--ds-dark-purple) 0%, #26123a 55%, var(--ds-dark-purple) calc(100% - var(--floor)));
}
.store::before { content: ""; position: absolute; inset: 0 0 auto; height: 110px; z-index: 4; pointer-events: none; background: linear-gradient(180deg, var(--ds-dark-purple), transparent); }
.store__wall { position: absolute; inset: 0 0 var(--floor) 0; z-index: -2;
  background: linear-gradient(180deg, transparent 0 60%, rgb(15 6 24 / 0.35)); }
.store__floor { position: absolute; inset: auto 0 0 0; height: var(--floor); z-index: -2;
  background: linear-gradient(180deg, #170b23, #0f0618);
  box-shadow: inset 0 1px 0 rgb(232 227 217 / 0.08); }
.store__lamp { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle var(--lamp-r) at var(--lx) var(--ly), transparent 0, rgb(15 6 24 / 0.18) 35%, rgb(15 6 24 / 0.72) 100%); }
.store__hint { position: absolute; z-index: 4; left: 0; right: 0; bottom: 24px; text-align: center; font-size: 0.875rem; color: var(--ds-mid-bone); transition: opacity 300ms var(--ease-out); }
.store.is-open .store__hint { opacity: 0; pointer-events: none; }
.hint-touch { display: none; }
.store__row { position: absolute; left: 0; right: 0; bottom: calc(var(--floor) - var(--cab-h) * 0.1); display: flex; justify-content: center; align-items: flex-end; gap: var(--cab-gap); transform-origin: 50% 100%; transition: transform 800ms var(--ease-in-out); z-index: 1; }

.cab { position: relative; flex: none; display: block; width: var(--cab-w); height: var(--cab-h); padding: 0; border: 0; background: none; cursor: pointer; text-align: left; perspective: 1600px; transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out); }
.cab::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -22px; height: 34px; z-index: -1; background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.75), transparent 70%); }
.store.is-open .cab:not(.is-open) { opacity: 0.22; filter: saturate(0.4); }
.cab__frame { position: absolute; inset: 0; display: block; border-radius: 10px; background: linear-gradient(180deg, #5a4280 0%, #3e2760 45%, #26143c 100%); box-shadow: 0 34px 50px -24px rgb(0 0 0 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 -1px 0 rgb(0 0 0 / 0.5); }
.cab__frame::before { content: attr(data-n); position: absolute; top: 0; left: 0; right: 0; height: 22px; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: rgb(232 227 217 / 0.6); }
.cab__inside { position: absolute; inset: 22px 7px 7px; display: block; overflow: hidden; border-radius: 6px; background: radial-gradient(ellipse 95% 55% at 50% 0%, #50347a 0%, #2a1442 55%, #160a24 100%); box-shadow: inset 0 0 34px rgb(0 0 0 / 0.75); }
.cab__inside::before { content: ""; position: absolute; top: 6px; left: 14%; right: 14%; height: 3px; border-radius: 2px; background: var(--ds-bone); box-shadow: 0 0 12px 2px rgb(232 227 217 / 0.7); }
.cab__inside::after { content: ""; position: absolute; inset: 9px 0 0; background: linear-gradient(180deg, rgb(232 227 217 / 0.16), transparent 75%); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.cab__art { position: absolute; z-index: 1; left: 2%; right: 2%; top: 6%; bottom: 17%; display: block; }
.cab__art svg { width: 100%; height: 100%; overflow: visible; }
.cab__art text { font-family: var(--f-copy); font-weight: 500; letter-spacing: 0.01em; }
/* Callouts name the parts once the door is open: that is when the drawing is big enough to read */
.cab .callout { opacity: 0; transition: opacity 400ms var(--ease-out); }
.cab.is-open .callout { opacity: 1; transition-delay: 650ms; }
.cab__shelf { position: absolute; z-index: 2; left: 0; right: 0; bottom: 13%; height: 7px; display: block; background: linear-gradient(180deg, #7a62a0, #2d1a44); box-shadow: 0 6px 10px rgb(0 0 0 / 0.5); }
.cab__tag { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 4%; display: block; font-size: 0.75rem; line-height: 1.2; color: var(--ds-mid-bone); text-align: center; }
.cab__door { position: absolute; inset: 22px 7px 7px; display: block; z-index: 3; transform-origin: left center; transform-style: preserve-3d; transition: transform 900ms var(--ease-in-out); }
.cab:focus-visible .cab__door { transform: rotateY(-9deg); }
.cab.is-open .cab__door { transform: rotateY(-114deg); }
.cab__face, .cab__back { position: absolute; inset: 0; display: block; border-radius: 6px; backface-visibility: hidden; }
.cab__face { background: linear-gradient(100deg, rgb(255 255 255 / 0.07) 0 18%, transparent 30% 100%), linear-gradient(180deg, #644a8c 0%, #48306c 32%, #301a4a 100%); box-shadow: inset 0 0 0 1px rgb(232 227 217 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.22); }
.cab__back { transform: rotateY(180deg); background: linear-gradient(90deg, #1d0d2b, #3a2057); box-shadow: inset 0 0 0 1px rgb(232 227 217 / 0.08); }
.cab__vents { position: absolute; left: 20%; right: 20%; height: 30px; display: block; border-radius: 3px; background: repeating-linear-gradient(180deg, rgb(15 6 24 / 0.8) 0 3px, transparent 3px 7px); opacity: 0.8; } /* impeccable-disable-line repeating-stripes-gradient -- the cabinet air vents */
.cab__vents--top { top: 5%; }
.cab__vents--bottom { bottom: 5%; }
.cab__plate { position: absolute; top: 15%; left: 10%; right: 10%; display: block; padding: 10px 11px 11px; border-radius: 8px; background: var(--ds-light-bone); color: var(--ds-purple); box-shadow: 0 2px 0 rgb(0 0 0 / 0.35); }
.cab__plate-n { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ds-mid-red); font-variant-numeric: tabular-nums; }
.cab__plate-name { display: block; margin-top: 3px; font-family: var(--f-head); font-weight: 100; font-size: clamp(1rem, calc(var(--cab-w) * 0.13), 1.625rem); line-height: 0.92; letter-spacing: -0.035em; }
.cab__plate-kind { display: block; margin-top: 6px; font-size: 0.75rem; line-height: 1.2; color: var(--on-bone-muted); }
.cab__handle { position: absolute; right: 9%; top: 58%; width: 7px; height: 21%; display: block; border-radius: 4px; background: linear-gradient(90deg, #7d7690, #f3f0f7 45%, #67607a); box-shadow: 3px 4px 7px rgb(0 0 0 / 0.6); }
.cab__led { position: absolute; left: 11%; top: 58%; width: 6px; height: 6px; display: block; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d9f2b5, var(--v-lime) 60%); }
.cab--lco .cab__plate { background: var(--ds-bone); }

.rail { display: flex; justify-content: center; gap: 4px; padding: 18px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; background: var(--ds-dark-purple); }
.rail button { flex: none; display: flex; gap: 8px; align-items: baseline; min-height: 44px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; color: var(--ds-mid-bone); font-size: 0.9375rem; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.rail button span { color: var(--ds-coral); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; }

.rail button[aria-current="true"] { color: var(--ds-bone); border-bottom-color: var(--ds-red); }
.courses__foot { background: var(--ds-dark-purple); padding: 8px var(--gutter) clamp(40px, 6vw, 72px); text-align: center; font-size: 0.8125rem; color: var(--ds-mid-bone); }

/* The side tab: a notch card whose tab hooks onto the opened cabinet */
.tab {
  position: absolute; z-index: 5; left: var(--tab-left, 50%); top: var(--tab-top, 10%); width: var(--tab-w, 46%); max-height: var(--tab-h, 80%);
  display: flex; flex-direction: column; background: var(--ds-purple); border-radius: 28px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.8), inset 0 0 0 1px var(--rule-p);
}
.tab::before { content: ""; position: absolute; top: 52px; left: -17px; width: 34px; height: 62px; border-radius: 13px; background: var(--ds-purple); }
.tab[hidden] { display: none; }
.tab.is-in { animation: tab-out 650ms var(--ease-out) 320ms both; }
@keyframes tab-out { from { clip-path: inset(0 100% 0 -40px round 28px); } to { clip-path: inset(0 0 0 -40px round 28px); } }
.tab__scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 2.4vw, 32px); scrollbar-width: thin; scrollbar-color: var(--rule-p) transparent; border-radius: 28px 28px 0 0; }
.tab__head { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding-bottom: 16px; }
.tab__count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ds-coral); text-transform: uppercase; }
.tab__title { grid-column: 1; font-family: var(--f-head); font-weight: 100; font-size: clamp(2.25rem, 3vw, 3rem); line-height: 0.92; letter-spacing: -0.035em; }
.tab__title:focus { outline: none; }
.tab__kind { grid-column: 1; color: var(--ds-mid-bone); font-weight: 300; font-size: 1.125rem; }
.tab__close { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--lift); cursor: pointer; display: grid; place-items: center; }

.tab__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--rule-p); border-bottom: 1px solid var(--rule-p); }
.tab__stats dt { font-size: 0.8125rem; color: var(--ds-mid-bone); line-height: 1.25; }
.tab__stats dd { font-family: var(--f-hero); font-size: clamp(2.5rem, 3.4vw, 3.25rem); line-height: 0.9; letter-spacing: -0.035em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tab__stats dd small { font-family: var(--f-copy); font-size: 0.32em; letter-spacing: 0; color: var(--ds-mid-bone); margin-left: 4px; }
.tab__body { display: grid; gap: 0 28px; }
@media (min-width: 900px) { .tab__body { grid-template-columns: 1fr 1.1fr; } }
.tab__courses { padding: 16px 0 0; font-size: 0.9375rem; color: var(--ds-mid-bone); }
.tab__courses b { color: var(--ds-bone); font-weight: 500; }
.tab__context { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--lift); font-size: 0.875rem; color: var(--ds-mid-bone); }
.tab__context b { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--v-lavender); margin-bottom: 4px; }
.tab__context a { color: var(--ds-bone); }
.tab__fig { padding: 16px 0 6px; }
.tab__fig figcaption { font-size: 0.8125rem; color: var(--ds-mid-bone); margin-bottom: 12px; }
.tab__fig figcaption b { color: var(--ds-coral); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.75rem; margin-right: 8px; }
.tab__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--rule-p); }
.tab__foot .src { font-size: 0.75rem; color: var(--ds-mid-bone); }
.tab__nav { display: flex; gap: 6px; }
.tab__nav button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--lift); cursor: pointer; font-size: 0.875rem; }


/* Horizontal bars: one series, value labels on the bars, recessive track */
.hbars { list-style: none; padding: 0; display: grid; gap: 9px; }
.hbars li { display: grid; grid-template-columns: 6.6em 1fr; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--ds-mid-bone); }
.hbars .track { position: relative; height: 18px; border-radius: 4px; background: var(--track); }
.hbars .bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 4px; background: var(--v-lavender); }
.hbars .bar--planned { background: transparent; border: 1.5px dashed var(--v-lavender); }
.hbars .val { position: absolute; left: calc(var(--v) * 100% + 8px); top: 50%; transform: translateY(-50%); font-size: 0.8125rem; font-weight: 500; color: var(--ds-bone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbars .val.inside { left: auto; right: calc((1 - var(--v)) * 100% + 8px); color: var(--ds-purple); }

@media (max-width: 899px) {
  .store { --cab-w: 158px; --floor: 150px; height: auto; overflow: visible; padding-bottom: 8px; }
  .store__lamp { display: none; }
  .store__row { position: relative; bottom: auto; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 56px var(--gutter) 64px; transform: none !important; }
  .store__row::-webkit-scrollbar { display: none; }
  .cab { scroll-snap-align: center; }
  .store__hint { position: relative; bottom: auto; padding: 0 var(--gutter) 12px; }
  .store.is-open .store__hint { opacity: 1; }
  .hint-wide { display: none; } .hint-touch { display: inline; }
  .store-wrap { background: var(--ds-dark-purple); padding-bottom: 8px; }
  .tab { position: relative; left: auto; top: auto; width: auto; max-height: none; margin: 4px var(--gutter) 0 calc(var(--gutter) + 4px); }
  .tab.is-in { animation-name: tab-down; animation-delay: 0ms; }
  .rail { justify-content: flex-start; }
}
@keyframes tab-down { from { clip-path: inset(0 0 100% -40px round 28px); } to { clip-path: inset(0 0 0 -40px round 28px); } }
@media (prefers-reduced-motion: reduce) { .store__row, .cab__door, .cab { transition: none; } .tab.is-in { animation: none; } }

/* ---------- LCO ---------- */

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule-p); border-block: 1px solid var(--rule-p); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--ds-purple); padding: 24px 20px; }
.kpi dd { font-family: var(--f-hero); font-size: clamp(3.25rem, 6vw, 5.5rem); line-height: 0.88; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.kpi dt { margin-top: 10px; font-size: 0.9375rem; color: var(--ds-mid-bone); max-width: 22ch; }
.asat { margin-top: 14px; font-size: 0.8125rem; color: var(--ds-mid-bone); }

.pipeline { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1000px) { .pipeline { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.marks { display: grid; grid-template-columns: repeat(32, 1fr); gap: 4px; list-style: none; padding: 0; }
.marks li { aspect-ratio: 1 / 2.4; border-radius: 99px; background: var(--c); }
.marks li.closed { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(206 201 186 / 0.45); }
@media (max-width: 599px) { .marks { grid-template-columns: repeat(20, 1fr); gap: 3px; } }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 0.875rem; color: var(--ds-mid-bone); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 9px; height: 20px; border-radius: 99px; background: var(--c); }
.legend i.closed { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(206 201 186 / 0.6); }
.legend b { color: var(--ds-bone); font-weight: 500; font-variant-numeric: tabular-nums; }
.figcap { font-size: 0.875rem; color: var(--ds-mid-bone); margin-bottom: 16px; }
.figcap b { color: var(--ds-coral); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; margin-right: 8px; }

.cards { display: grid; gap: 18px; margin-top: clamp(48px, 6vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--lift); padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; min-height: 280px; border-radius: 28px; }
.card .eyebrow { color: var(--v-lavender); }
.card .card__num { color: var(--ds-bone); font-family: var(--f-hero); font-size: clamp(3.5rem, 5.5vw, 4.75rem); line-height: 0.88; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.card p { color: var(--ds-mid-bone); font-size: 0.9375rem; }
.card__foot { margin-top: auto; }
.steps-mini { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 0.875rem; color: var(--ds-mid-bone); }
.steps-mini li { display: grid; grid-template-columns: 4.2em 1fr; gap: 8px; }
.steps-mini b { color: var(--ds-bone); font-weight: 500; }
.browser { border-radius: 14px; overflow: hidden; background: var(--ds-dark-purple); box-shadow: inset 0 0 0 1px var(--rule-p); }
.browser__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--rule-p); font-size: 0.75rem; color: var(--ds-mid-bone); }
.browser__bar span { flex: 1; padding: 3px 8px; border-radius: 6px; background: rgb(232 227 217 / 0.07); }
.browser__page { padding: 12px; display: grid; gap: 7px; }
.browser__page i { display: block; height: 7px; border-radius: 3px; background: rgb(232 227 217 / 0.14); }
.browser__page i.h { height: 14px; width: 62%; background: rgb(232 227 217 / 0.5); }
.browser__page .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.browser__page .row3 i { height: 30px; background: var(--track); }
.browser__page .bars i { height: 8px; background: var(--v-lime); }
.lco__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(36px, 4vw, 56px); }

/* ---------- The project ---------- */

.project { position: relative; overflow: clip; }
.project__wash { position: absolute; z-index: 0; right: -14%; top: -18%; width: min(900px, 90vw); aspect-ratio: 1; border-radius: 50%; opacity: 0.55; filter: blur(60px); pointer-events: none;
  /* the brand's warm gradient, used once on the page */
  background: radial-gradient(circle, #ff6c39 0%, #ff1f1f 40%, rgb(47 24 73 / 0) 70%); } /* impeccable-disable-line radial-halo -- DS warm gradient, the brand emotive device, used once */
.project > .wrap { position: relative; z-index: 1; }
.project__grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .project__grid { grid-template-columns: 1.1fr 1fr; } }
.project__figure { font-family: var(--f-hero); font-size: clamp(7rem, 17vw, 15rem); line-height: 0.8; letter-spacing: -0.04em; color: var(--ds-bone); }
.project__figure-label { margin-top: 14px; font-size: 1.125rem; font-weight: 300; max-width: 30ch; }
.project__art { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 4 / 5; background: var(--ds-dark-purple); }
.project__art-inner { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 20%, #4a2f6c, var(--ds-dark-purple) 70%); }
.project__art svg { position: absolute; inset: 6% 4%; width: 92%; height: 88%; overflow: visible; }
.project__art text { font-family: var(--f-copy); font-weight: 500; }

.streams { display: grid; gap: 18px; margin-top: clamp(48px, 6vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .streams { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .streams { grid-template-columns: repeat(3, 1fr); } }
.stream { background: rgb(29 13 43 / 0.72); border-radius: 28px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.stream__n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ds-coral); }
.stream h3 { font-family: var(--f-head); font-weight: 100; font-size: 1.875rem; line-height: 0.95; letter-spacing: -0.035em; }
.stream p { color: var(--ds-mid-bone); font-size: 0.9375rem; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ds-bone); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--v-lime)); }

.milestones { margin-top: clamp(48px, 6vw, 72px); }
.milestones ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.milestones ol::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--rule-p); }
.milestones ol::after { content: ""; position: absolute; left: 0; top: 9px; height: 2px; width: var(--done); background: var(--v-lime); }
.milestones li { position: relative; padding: 30px 12px 0 0; font-size: 0.875rem; color: var(--ds-mid-bone); }
.milestones li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ds-purple); box-shadow: inset 0 0 0 2px var(--rule-p); z-index: 1; }
.milestones li.done::before { background: var(--v-lime); box-shadow: none; }
.milestones li.now::before { background: var(--ds-purple); box-shadow: inset 0 0 0 2px var(--v-yellow), 0 0 0 5px rgb(255 182 0 / 0.18); }
.milestones li b { display: block; color: var(--ds-bone); font-weight: 500; margin-bottom: 2px; }
@media (max-width: 759px) {
  .milestones ol { grid-template-columns: 1fr; padding-left: 28px; }
  .milestones ol::before, .milestones ol::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .milestones ol::after { height: var(--done); bottom: auto; }
  .milestones li { padding: 0 0 22px; }
  .milestones li::before { left: -28px; top: 1px; }
}

/* ---------- News (bone band) ---------- */

.news { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .news { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .news { grid-template-columns: repeat(3, 1fr); } }
.news article { background: var(--ds-light-bone); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 300px; }
.news time { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-mid-red); }
.news h3 { font-family: var(--f-head); font-weight: 100; font-size: 1.875rem; line-height: 0.95; letter-spacing: -0.035em; }
.news p { color: var(--on-bone-muted); font-size: 0.9375rem; }
.news .why { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ds-mid-bone); }
.news .why b { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-purple); margin-bottom: 4px; }
.facts-bone { display: grid; gap: 1px; grid-template-columns: 1fr; margin-top: 18px; background: var(--ds-mid-bone); border-radius: 28px; overflow: hidden; }
@media (min-width: 900px) { .facts-bone { grid-template-columns: repeat(3, 1fr); } }
.facts-bone div { background: var(--ds-light-bone); padding: 24px 28px; }
.facts-bone dd { font-family: var(--f-hero); font-size: clamp(2.75rem, 4.5vw, 3.75rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--ds-purple); }
.facts-bone dt { margin-top: 8px; font-size: 0.875rem; color: var(--on-bone-muted); }
.facts-bone a { font-size: 0.75rem; color: var(--ds-mid-red); }

/* ---------- FAQ ---------- */

.faq__list { border-top: 1px solid var(--ds-mid-bone); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--ds-mid-bone); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 68px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--f-head); font-weight: 100; font-size: clamp(1.5rem, 2vw, 1.875rem); letter-spacing: -0.035em; line-height: 1; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--ds-mid-red), var(--ds-mid-red)) center / 100% 1.5px no-repeat, linear-gradient(var(--ds-mid-red), var(--ds-mid-red)) center / 1.5px 100% no-repeat; transition: transform 250ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 64ch; color: var(--on-bone-muted); }

/* ---------- Contact + footer ---------- */

.contact { padding-block: var(--section-y); }
.contact__grid { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.4fr 1fr; } }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer { padding: 28px var(--gutter) 80px; border-top: 1px solid var(--rule-p); font-size: 0.8125rem; color: var(--ds-mid-bone); display: grid; gap: 8px; max-width: var(--max); margin-inline: auto; }

/* ---------- Sub-pages ---------- */

.page-head { position: relative; padding-top: clamp(130px, 18vh, 180px); padding-bottom: clamp(40px, 6vw, 72px); overflow: clip; }
.page-head .trace { right: -6%; top: 60px; width: min(720px, 70vw); height: 380px; stroke: var(--ds-bone); opacity: 0.3; }
.crumb { display: inline-block; margin-bottom: 28px; font-size: 0.9375rem; color: var(--ds-mid-bone); text-decoration: none; }
.crumb::before { content: "← "; }


.cv { display: grid; gap: clamp(40px, 6vw, 88px); }
@media (min-width: 960px) { .cv { grid-template-columns: 300px 1fr; } }
.cv__side { display: grid; gap: 28px; align-content: start; }
@media (min-width: 960px) { .cv__side { position: sticky; top: 100px; } }
.cv__block h2 { margin-bottom: 10px; }
.cv__block ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 0.9375rem; color: var(--on-bone-muted); }
.cv__block ul b { color: var(--ds-purple); font-weight: 500; }
.cv__section + .cv__section { margin-top: clamp(56px, 7vw, 96px); }
.cv__section > .headline { margin-bottom: 28px; }
.timeline { position: relative; list-style: none; padding: 0 0 0 36px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--ds-mid-red); }
.role { position: relative; padding-bottom: clamp(32px, 4vw, 48px); }
.role::before { content: ""; position: absolute; left: -36px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--ds-bone); box-shadow: inset 0 0 0 1.5px var(--ds-mid-red); }
.role:first-child::before { background: var(--ds-mid-red); }
.role__when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-mid-red); }
.role__title { margin-top: 6px; font-family: var(--f-head); font-weight: 100; font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -0.035em; line-height: 0.95; }
.role__org { color: var(--on-bone-muted); margin-top: 6px; }
.role ul { margin-top: 12px; padding-left: 18px; color: var(--on-bone-muted); display: grid; gap: 6px; max-width: 66ch; }
.role ul li::marker { color: var(--ds-mid-red); }
.role ul b { color: var(--ds-purple); font-weight: 500; }
.edu { list-style: none; padding: 0; border-top: 1px solid var(--ds-mid-bone); }
.edu li { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--ds-mid-bone); }
@media (min-width: 700px) { .edu li { grid-template-columns: 140px 1fr; } }
.edu .when { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-mid-red); }
.edu .what b { display: block; font-weight: 500; }
.edu .what span { color: var(--on-bone-muted); font-size: 0.9375rem; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.skills li { padding: 8px 14px; border-radius: 12px; background: var(--ds-light-bone); font-size: 0.9375rem; }
.quote { font-family: var(--f-head); font-weight: 100; font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -0.035em; max-width: 26ch; }
.quote cite { display: block; margin-top: 16px; font-family: var(--f-copy); font-style: normal; font-size: 0.9375rem; letter-spacing: 0; color: var(--ds-mid-red); }
.tbc { text-decoration: underline dashed #b07800; text-underline-offset: 4px; }

.steps { display: grid; gap: 18px; list-style: none; padding: 0; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { background: var(--lift); border-radius: 28px; padding: 24px; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--v-lavender); margin-bottom: 18px; }
.steps b { display: block; font-family: var(--f-head); font-weight: 100; font-size: 1.75rem; letter-spacing: -0.035em; line-height: 0.95; }
.steps p { color: var(--ds-mid-bone); font-size: 0.9375rem; margin-top: 8px; }
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.goals { list-style: none; padding: 0; display: grid; gap: 16px; }
.goals li b { display: block; font-weight: 500; }
.goals li span { color: var(--ds-mid-bone); font-size: 0.9375rem; }
.gtl { position: relative; list-style: none; padding: 0 0 0 30px; }
.gtl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--ds-red); }
.gtl li { position: relative; padding-bottom: 26px; }
.gtl li::before { content: ""; position: absolute; left: -30px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--ds-purple); box-shadow: inset 0 0 0 1.5px var(--ds-coral); }
.gtl time { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-coral); }
.gtl b { display: block; font-family: var(--f-head); font-weight: 100; font-size: 1.625rem; letter-spacing: -0.035em; line-height: 1; margin-top: 4px; }
.gtl span { color: var(--ds-mid-bone); font-size: 0.9375rem; }

@media (max-width: 599px) {
  .tab__stats dd { font-size: 2rem; }
  .sample-note { right: 8px; bottom: 8px; padding: 3px 9px; font-size: 0.75rem; }
}

/* ---------- Hover, gated to devices that really hover (no sticky hover after a tap) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover > span { background: #fff; }
  .btn--ghost:hover > span { background: var(--rule-p); }
  .band--bone .btn--primary:hover > span { background: var(--rule-p); }
  .link:hover::after { transform: translateX(4px); }
  .nav__links a:hover, .crumb:hover, .rail button:hover { color: var(--ds-bone); }
  .cab:hover .cab__door { transform: rotateY(-9deg); }
  .cab.is-open:hover .cab__door { transform: rotateY(-114deg); }
  .tab__close:hover, .tab__nav button:hover { background: var(--rule-p); }
}

/* ---------- Press feedback on the controls that had none ---------- */
.rail button, .tab__nav button, .tab__close { transition: transform 140ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.rail button:active, .tab__nav button:active, .tab__close:active { transform: scale(0.97); }
.card .link { color: var(--ds-bone); }
.card .link::after { color: var(--ds-coral); }
.eyebrow.sub { margin-top: 18px; }

/* ---------- Motion that earns its place ---------- */
/* The brand trace draws itself once per page: the orchestrated moment, on the opening screen only */
.trace path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .trace path { stroke-dashoffset: 1; animation: trace-draw 1600ms var(--ease-in-out) 250ms forwards; }
@keyframes trace-draw { to { stroke-dashoffset: 0; } }

/* LCO marks fill by state when the figure arrives, so the legend reads as a sequence:
   completed, then scheduled, then being arranged, then closed. Fully visible without JS. */
.js .marks[data-reveal] li { opacity: 0.12; transform: scaleY(0.6); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .marks[data-reveal].is-in li { opacity: 1; transform: none; }

/* Project progress: the line runs to where the work stands */
.js .milestones[data-reveal] ol::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out) 150ms; }
.js .milestones[data-reveal].is-in ol::after { transform: none; }
@media (max-width: 759px) { .js .milestones[data-reveal] ol::after { transform: scaleY(0); transform-origin: top; } }

/* FAQ answers open instead of snapping; browsers without ::details-content simply snap */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .js .trace path { animation: none; stroke-dashoffset: 0; }
  .js .marks[data-reveal] li, .js .milestones[data-reveal] ol::after { transition: none; opacity: 1; transform: none; }
  .faq details::details-content { transition: none; }
}

/* ---------- The project: the teaser takes the drawing's place ---------- */
.project__video { position: relative; background: transparent; align-self: center; }
.project__video-inner { border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ds-dark-purple); }
.project__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.project__video figcaption { margin-top: 12px; padding-left: 4px; font-size: 0.8125rem; color: var(--ds-mid-bone); }
.project__video::before { top: 40px; background: var(--ds-dark-purple); }

/* ---------- LCO: the year as a suture ---------- */
.year-block { margin-top: clamp(48px, 6vw, 80px); }
.year-block__head { display: grid; gap: 12px; margin-bottom: 28px; }
@media (min-width: 900px) { .year-block__head { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.year-block__top { display: grid; gap: 8px; align-items: end; margin-bottom: 20px; }
@media (min-width: 900px) { .year-block__top { grid-template-columns: auto 1fr; gap: 48px; } }
.year-block__big { font-family: var(--f-hero); font-size: clamp(6rem, 14vw, 11rem); line-height: 0.8; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.year-block__label { font-size: 1.1875rem; }
.year-block__label span { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--ds-mid-bone); }
.year { position: relative; }
.year svg { display: block; width: 100%; height: auto; overflow: visible; }
.year .thread { fill: none; stroke: var(--ds-coral); stroke-width: 2; stroke-linecap: round; }
.year .stitch { stroke: var(--ds-coral); stroke-width: 2.5; stroke-linecap: round; transition: opacity 200ms var(--ease-out); }
.year .stitch--planned { stroke: var(--v-lavender); stroke-dasharray: 3 4; }
.year .month { outline: none; }
.year .month-hit { fill: transparent; cursor: pointer; }
.year .month-bg { fill: rgb(173 153 255 / 0.1); opacity: 0; transition: opacity 150ms var(--ease-out); }
.year .month.is-on .month-bg, .year .month:focus-visible .month-bg { opacity: 1; }
.year .month:focus-visible .month-bg { stroke: var(--v-lavender); stroke-width: 1.5; }
.year .month-label { fill: var(--ds-mid-bone); font-family: var(--f-copy); }
.year .month.is-on .month-label { fill: var(--ds-bone); font-weight: 500; }
.year .month-count { fill: var(--ds-bone); font-family: var(--f-copy); font-variant-numeric: tabular-nums; opacity: 0; }
.year .month.is-on .month-count { opacity: 1; }
.year__readout { min-height: 3.2em; margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--ds-coral); border-radius: 0 12px 12px 0; background: var(--lift); font-size: 0.9375rem; color: var(--ds-mid-bone); }
.year__readout b { color: var(--ds-bone); font-weight: 500; }
.year__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 12px; font-size: 0.8125rem; color: var(--ds-mid-bone); }
.year__legend > span:not(.sample-tag) { display: inline-flex; align-items: center; gap: 8px; }
.year__legend i { width: 18px; height: 2.5px; background: var(--ds-coral); transform: rotate(-55deg); }
.year__legend i.planned { background: repeating-linear-gradient(90deg, var(--v-lavender) 0 3px, transparent 3px 7px); } /* impeccable-disable-line repeating-stripes-gradient -- the dashed legend key matches the dashed stitches */
.year__legend .sample-tag { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .year .stitch { transition: none; } }