/** Shared layout/surface primitives appended to every site.css (token-only). */
export declare const primitivesCss = "\n/* \u2014\u2014 Layout \u2014\u2014 */\n.section {\n  padding-block: var(--section-y);\n}\n.section--tight { padding-block: var(--space-6); }\n.section--roomy { padding-block: calc(var(--section-y) + var(--space-5)); }\n.section--surface { background: var(--color-surface); }\n.section--muted { background: var(--color-surface-2); }\n.section--dark,\n[data-scheme=\"dark\"] {\n  --color-bg: #141210;\n  --color-text: #F7F4EF;\n  --color-muted: #B8B0A4;\n  --color-surface: #1E1B18;\n  --color-surface-2: #2A2622;\n  --color-border: #3A342E;\n  background: var(--color-bg);\n  color: var(--color-text);\n}\n.section__head {\n  display: grid;\n  gap: var(--space-3);\n  margin-bottom: var(--space-7);\n  max-width: 42rem;\n}\n.section__head--center {\n  margin-inline: auto;\n  text-align: center;\n  justify-items: center;\n}\n.section__head--row {\n  max-width: none;\n  grid-template-columns: minmax(0, 42rem);\n  align-items: end;\n  justify-content: space-between;\n}\n@media (min-width: 720px) {\n  .section__head--row { grid-template-columns: minmax(0, 42rem) auto; }\n}\n.section__head--row > .btn-group { justify-self: end; }\n/* Editorial split head: short label column, heading + lede column. */\n.section__head--split { max-width: none; }\n@media (min-width: 720px) {\n  .section__head--split {\n    grid-template-columns: minmax(0, 14rem) minmax(0, 42rem);\n    gap: var(--space-5) var(--space-7);\n    align-items: start;\n  }\n  .section__head--split > .eyebrow { padding-top: 0.45em; }\n  .section__head--split > :not(.eyebrow) { grid-column: 2; }\n}\n.sticky-col { align-self: start; }\n@media (min-width: 1080px) {\n  .sticky-col { position: sticky; top: calc(var(--header-h, 4rem) + var(--space-5)); }\n}\n.section__head .lede,\n.lede {\n  margin: 0;\n  color: var(--color-muted);\n  font-size: var(--step-1);\n  line-height: 1.55;\n  max-width: 38rem;\n}\n.lede--lg { font-size: var(--step-2); line-height: 1.45; }\n.eyebrow {\n  margin: 0;\n  font-size: var(--step-0);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--color-muted);\n}\n.eyebrow--accent { color: var(--color-accent); }\n.grid {\n  display: grid;\n  gap: var(--gap, var(--space-5));\n}\n.grid--2 { grid-template-columns: 1fr; }\n.grid--3 { grid-template-columns: 1fr; }\n.grid--4 { grid-template-columns: 1fr; }\n@media (min-width: 720px) {\n  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (min-width: 1080px) {\n  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n}\n.split {\n  display: grid;\n  gap: var(--space-6);\n  align-items: center;\n}\n.split--top { align-items: start; }\n@media (min-width: 720px) {\n  .split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }\n  .split--reverse > :first-child { order: 2; }\n}\n@media (min-width: 1080px) {\n  .split { gap: var(--space-8); }\n}\n.bento {\n  display: grid;\n  gap: var(--space-3);\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.bento__wide, .bento__full { grid-column: span 2; }\n@media (min-width: 720px) {\n  .bento {\n    gap: var(--space-4);\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n    grid-auto-rows: minmax(9rem, auto);\n    grid-auto-flow: dense;\n  }\n  .bento > * { grid-column: span 3; }\n  .bento__wide { grid-column: span 4; }\n  .bento__tall { grid-row: span 2; }\n  .bento__full { grid-column: span 6; }\n  .bento__narrow { grid-column: span 2; }\n}\n.stack { display: grid; gap: var(--space-4); }\n.stack--tight { gap: var(--space-2); }\n.stack--loose { gap: var(--space-6); }\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.row--between { justify-content: space-between; }\n\n/* \u2014\u2014 Surfaces \u2014\u2014 */\n.card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-surface);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg);\n  overflow: hidden;\n}\n.card--bordered { box-shadow: none; }\n.card--elevated { box-shadow: var(--shadow-2); border-color: transparent; }\n.card--flat {\n  box-shadow: none;\n  border-color: transparent;\n  background: var(--color-surface-2);\n}\n.card--accent { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }\n.card--interactive {\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.card--interactive:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-2);\n}\n.card__media {\n  position: relative;\n  overflow: hidden;\n  background: var(--color-surface-2);\n  border-radius: 0;\n}\n.card__media img,\n.card__media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 400ms ease;\n}\n.card--interactive:hover .card__media img { transform: scale(1.03); }\n.card__body {\n  display: grid;\n  gap: var(--space-2);\n  padding: var(--space-5);\n  flex: 1;\n  align-content: start;\n}\n.card__body > h3,\n.card__body > h4 {\n  font-size: var(--step-2);\n  line-height: 1.25;\n}\n.card__body > p { margin: 0; color: var(--color-muted); font-size: var(--step-1); }\n.card__body > .btn-group,\n.card__body > .btn,\n.card__body > .btn-outline,\n.card__body > .btn-arrow {\n  margin-top: var(--space-2);\n  justify-self: start;\n}\n.card__body > .btn-arrow { align-self: end; margin-top: auto; padding-top: var(--space-3); }\n/* Photo tile with a bottom scrim and light text (services tiles, project grids, step panels). */\n.photo-card {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  overflow: hidden;\n  border-radius: var(--radius-lg);\n  background: var(--color-surface-2);\n  color: #fff;\n  text-decoration: none;\n}\n.photo-card > img {\n  position: absolute;\n  inset: 0;\n  z-index: -2;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 500ms ease;\n}\n.photo-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.72) 100%);\n}\n.photo-card__body {\n  display: grid;\n  gap: var(--space-1);\n  padding: var(--space-5);\n}\n.photo-card__body h2,\n.photo-card__body h3,\n.photo-card__body strong { color: #fff; }\n.photo-card__body p { margin: 0; color: rgba(255, 255, 255, 0.82); }\n.photo-card__body .eyebrow { color: rgba(255, 255, 255, 0.72); }\na.photo-card:hover > img,\na.photo-card:focus-visible > img { transform: scale(1.04); }\na.photo-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }\n.card__footer {\n  margin-top: auto;\n  padding: var(--space-4) var(--space-5);\n  border-top: 1px solid var(--color-border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.hairline {\n  border: 0;\n  border-top: 1px solid var(--color-border);\n  margin: var(--space-6) 0;\n}\n.frame {\n  overflow: hidden;\n  border-radius: var(--radius-lg);\n  background: var(--color-surface-2);\n  box-shadow: var(--shadow-2);\n}\n.frame > img,\n.frame > video { width: 100%; height: 100%; object-fit: cover; }\n.ratio-16x9,\n.ratio-4x3,\n.ratio-3x2,\n.ratio-1x1,\n.ratio-3x4,\n.ratio-21x9 {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--radius-lg);\n  background: var(--color-surface-2);\n}\n.ratio-16x9 { aspect-ratio: 16 / 9; }\n.ratio-4x3 { aspect-ratio: 4 / 3; }\n.ratio-3x2 { aspect-ratio: 3 / 2; }\n.ratio-1x1 { aspect-ratio: 1 / 1; }\n.ratio-3x4 { aspect-ratio: 3 / 4; }\n.ratio-21x9 { aspect-ratio: 21 / 9; }\n.card__media[class*=\"ratio-\"] { border-radius: 0; }\n.ratio-16x9 > img,\n.ratio-4x3 > img,\n.ratio-3x2 > img,\n.ratio-1x1 > img,\n.ratio-3x4 > img,\n.ratio-21x9 > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.icon-tile {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.75rem;\n  height: 2.75rem;\n  border-radius: var(--radius);\n  background: color-mix(in srgb, var(--color-accent) 12%, transparent);\n  color: var(--color-accent);\n  flex-shrink: 0;\n}\n.icon-tile .icon { width: 1.35rem; height: 1.35rem; }\n.icon-tile--round { border-radius: var(--radius-pill); }\n.icon-tile--muted { background: var(--color-surface-2); color: var(--color-text); }\n\n/* \u2014\u2014 Marks \u2014\u2014 */\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  min-height: 1.85rem;\n  padding: 0.25rem 0.75rem;\n  border-radius: var(--radius-pill);\n  font-size: var(--step-0);\n  font-weight: 600;\n  line-height: 1.2;\n  background: var(--color-surface-2);\n  color: var(--color-text);\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n.badge .icon { width: 1rem; height: 1rem; }\n.badge--accent {\n  background: color-mix(in srgb, var(--color-accent) 14%, transparent);\n  color: var(--color-accent);\n}\n.badge--muted { color: var(--color-muted); }\n.badge--outline {\n  background: transparent;\n  border-color: var(--color-border);\n}\n.stat { display: grid; gap: var(--space-1); align-content: start; }\n.stat__value {\n  margin: 0;\n  font-family: var(--font-display);\n  font-size: var(--step-4);\n  font-weight: 600;\n  letter-spacing: -0.03em;\n  font-variant-numeric: tabular-nums;\n  line-height: 1.05;\n}\n.stat__label {\n  margin: 0;\n  color: var(--color-muted);\n  font-size: var(--step-0);\n}\n.stat--sm .stat__value { font-size: var(--step-3); }\n.rating {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.15rem;\n  color: var(--color-accent);\n  letter-spacing: 0.05em;\n  line-height: 1;\n}\n.rating .icon { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: none; }\n.price {\n  display: flex;\n  align-items: baseline;\n  gap: 0.3rem;\n  margin: 0;\n}\n.price__amount {\n  font-family: var(--font-display);\n  font-size: var(--step-4);\n  font-weight: 600;\n  letter-spacing: -0.03em;\n  line-height: 1;\n  font-variant-numeric: tabular-nums;\n}\n.price__period { color: var(--color-muted); font-size: var(--step-0); }\n.prose {\n  max-width: 65ch;\n}\n.prose > * + * { margin-top: var(--space-4); }\n.list-check,\n.list-plain {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  gap: var(--space-3);\n}\n.list-check li {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.65rem;\n  line-height: 1.5;\n}\n.list-check li > .icon {\n  margin-top: 0.2em;\n  color: var(--color-accent);\n}\n.table-wrap { overflow-x: auto; }\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-variant-numeric: tabular-nums;\n}\n.table th,\n.table td {\n  padding: var(--space-3) var(--space-4);\n  text-align: left;\n  border-bottom: 1px solid var(--color-border);\n  vertical-align: top;\n}\n.table th {\n  font-size: var(--step-0);\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--color-muted);\n}\n.table td:not(:first-child),\n.table th:not(:first-child) { text-align: right; }\n.table--plain th,\n.table--plain td { padding-inline: 0; }\n\n/* \u2014\u2014 People / proof \u2014\u2014 */\n.avatar {\n  width: 2.75rem;\n  height: 2.75rem;\n  border-radius: var(--radius-pill);\n  object-fit: cover;\n  background: var(--color-surface-2);\n  border: 2px solid var(--color-surface);\n  flex-shrink: 0;\n}\n.avatar--sm { width: 2rem; height: 2rem; }\n.avatar--lg { width: 4rem; height: 4rem; }\n.avatar-group {\n  display: inline-flex;\n  align-items: center;\n}\n.avatar-group .avatar { margin-inline-start: -0.55rem; box-shadow: 0 0 0 2px var(--color-bg); }\n.avatar-group .avatar:first-child { margin-inline-start: 0; }\n/* \u2014\u2014 Chips (radio / checkbox pills) \u2014\u2014 */\n.chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.chips > legend,\n.chips__label {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--space-2);\n  font-size: var(--step-0);\n  font-weight: 600;\n  color: var(--color-text);\n}\n.chips label { position: relative; display: inline-flex; }\n.chips input {\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.chips span {\n  display: inline-flex;\n  align-items: center;\n  min-height: 2.25rem;\n  padding: 0.35rem 0.9rem;\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-pill);\n  font-size: var(--step-0);\n  font-weight: 500;\n  color: var(--color-text);\n  background: var(--color-surface);\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.chips label:hover span { border-color: var(--color-text); }\n.chips input:checked + span {\n  background: var(--color-text);\n  border-color: var(--color-text);\n  color: var(--color-bg);\n}\n.chips input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }\n.byline {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--step-0);\n}\n.byline strong { display: block; font-weight: 600; color: var(--color-text); }\n.byline span { color: var(--color-muted); }\n.logo-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-5) var(--space-7);\n  opacity: 0.65;\n}\n.logo-row img {\n  max-height: 1.75rem;\n  width: auto;\n  filter: grayscale(1);\n}\n.quote {\n  margin: 0;\n  font-family: var(--font-display);\n  font-size: var(--step-2);\n  line-height: 1.4;\n  letter-spacing: -0.015em;\n  text-wrap: pretty;\n}\n.quote--lg { font-size: var(--step-3); line-height: 1.3; letter-spacing: -0.02em; }\n.quote cite,\n.quote footer {\n  display: block;\n  margin-top: var(--space-4);\n  font-style: normal;\n  font-family: var(--font-body);\n  font-size: var(--step-0);\n  letter-spacing: 0;\n  color: var(--color-muted);\n}\n.quote--card {\n  font-family: var(--font-body);\n  font-size: var(--step-1);\n  line-height: 1.6;\n  letter-spacing: 0;\n}\n\n/* \u2014\u2014 Controls \u2014\u2014 */\n.btn-lg { padding: 0.9rem 1.75rem; min-height: 3rem; font-size: var(--step-1); }\n.btn-sm { padding: 0.45rem 1rem; min-height: 2.25rem; font-size: var(--step-0); }\n.btn-icon {\n  width: var(--tap-min);\n  height: var(--tap-min);\n  padding: 0;\n  border-radius: var(--radius-pill);\n}\n.btn-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  align-items: center;\n}\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n.field label {\n  font-weight: 600;\n  font-size: var(--step-0);\n}\n.field + .field { margin-top: var(--space-4); }\n.form-grid {\n  display: grid;\n  gap: var(--space-4);\n}\n.form-grid .field + .field { margin-top: 0; }\n@media (min-width: 720px) {\n  .form-grid--2 { grid-template-columns: 1fr 1fr; }\n  .form-grid .field--full { grid-column: 1 / -1; }\n}\n.input,\n.textarea,\n.select {\n  width: 100%;\n  min-height: var(--tap-min);\n  padding: 0.65rem 0.9rem;\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius);\n  background: var(--color-surface);\n  color: var(--color-text);\n  font: inherit;\n  line-height: 1.4;\n}\n.textarea { min-height: 7rem; resize: vertical; }\n.input:focus-visible,\n.textarea:focus-visible,\n.select:focus-visible {\n  outline: none;\n  box-shadow: var(--ring);\n  border-color: var(--color-focus);\n}\n.input-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n.input-row .input { flex: 1 1 14rem; }\n.checkbox {\n  width: 1.15rem;\n  height: 1.15rem;\n  accent-color: var(--color-accent);\n}\n.accordion {\n  border-top: 1px solid var(--color-border);\n}\n.accordion details {\n  border-bottom: 1px solid var(--color-border);\n}\n.accordion summary {\n  list-style: none;\n  cursor: pointer;\n  min-height: var(--tap-min);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  font-weight: 600;\n  font-size: var(--step-1);\n}\n.accordion summary::-webkit-details-marker { display: none; }\n.accordion summary::after {\n  content: \"+\";\n  flex-shrink: 0;\n  width: 1.75rem;\n  height: 1.75rem;\n  display: inline-grid;\n  place-items: center;\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-2);\n  font-weight: 500;\n  color: var(--color-muted);\n  transition: transform 180ms ease;\n}\n.accordion details[open] summary::after { content: \"\u2013\"; }\n.accordion details > *:not(summary) {\n  margin: 0;\n  padding-bottom: var(--space-4);\n  max-width: 60ch;\n  color: var(--color-muted);\n}\n.tabs {\n  display: grid;\n  gap: var(--space-5);\n}\n.tabs__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  border-bottom: 1px solid var(--color-border);\n}\n.tabs__list--pill {\n  border-bottom: 0;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  background: var(--color-surface-2);\n  border-radius: var(--radius-pill);\n  width: fit-content;\n}\n.tabs__tab {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  padding: var(--space-3) var(--space-4);\n  min-height: var(--tap-min);\n  font: inherit;\n  font-weight: 600;\n  color: var(--color-muted);\n  cursor: pointer;\n  transition: color 160ms ease;\n}\n.tabs__tab:hover { color: var(--color-text); }\n.tabs__tab[aria-selected=\"true\"] {\n  color: var(--color-text);\n  border-bottom-color: var(--color-accent);\n}\n.tabs__list--pill .tabs__tab {\n  border: 0;\n  margin: 0;\n  min-height: 2.5rem;\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-pill);\n}\n.tabs__list--pill .tabs__tab[aria-selected=\"true\"] {\n  background: var(--color-surface);\n  box-shadow: var(--shadow-1);\n}\n.tabs__panel[hidden] { display: none; }\n.announcement {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-2);\n  border-bottom: 1px solid var(--color-border);\n  font-size: var(--step-0);\n  text-align: center;\n}\n.announcement a { font-weight: 600; color: inherit; }\n\n/* \u2014\u2014 Chrome \u2014\u2014 */\n.header--sticky {\n  position: sticky;\n  top: 0;\n  z-index: 50;\n  background: color-mix(in srgb, var(--color-bg) 86%, transparent);\n  backdrop-filter: blur(var(--blur-header));\n  -webkit-backdrop-filter: blur(var(--blur-header));\n  border-bottom: 1px solid transparent;\n  transition: border-color 180ms ease, background-color 180ms ease;\n}\n.header--sticky.is-scrolled {\n  border-bottom-color: var(--color-border);\n  background: color-mix(in srgb, var(--color-bg) 92%, transparent);\n}\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n}\n.nav-links a {\n  display: inline-flex;\n  align-items: center;\n  min-height: 2.5rem;\n  padding: 0 var(--space-3);\n  border-radius: var(--radius-pill);\n  font-size: var(--step-0);\n  font-weight: 500;\n  color: var(--color-muted);\n  text-decoration: none;\n  transition: color 160ms ease, background-color 160ms ease;\n}\n.nav-links a:hover,\n.nav-links a[aria-current=\"page\"] {\n  color: var(--color-text);\n  background: color-mix(in srgb, var(--color-text) 5%, transparent);\n}\n.brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-family: var(--font-display);\n  font-weight: 700;\n  font-size: var(--step-2);\n  letter-spacing: -0.02em;\n  color: var(--color-text);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.brand img { height: 2rem; width: auto; }\n.nav-drawer {\n  position: fixed;\n  inset: 0;\n  z-index: 60;\n  background: color-mix(in srgb, var(--color-text) 40%, transparent);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 180ms ease, visibility 180ms ease;\n}\n.nav-drawer.is-open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.nav-drawer__panel {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-end: 0;\n  width: min(20rem, 88vw);\n  background: var(--color-surface);\n  color: var(--color-text);\n  padding: calc(var(--header-h) + var(--space-2)) var(--space-5) var(--space-5);\n  box-shadow: var(--shadow-3);\n  transform: translateX(100%);\n  transition: transform 200ms ease;\n  display: grid;\n  align-content: start;\n  gap: var(--space-5);\n}\n.nav-drawer.is-open .nav-drawer__panel { transform: none; }\n.nav-drawer__panel nav {\n  display: grid;\n}\n.nav-drawer__panel nav a {\n  display: block;\n  padding: var(--space-3) 0;\n  border-bottom: 1px solid var(--color-border);\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--color-text);\n}\n.nav-drawer__panel .btn-group > * { flex: 1; }\n\n/* \u2014\u2014 Island widgets \u2014\u2014 */\n.carousel {\n  display: grid;\n  gap: var(--space-5);\n}\n.carousel__track {\n  display: flex;\n  gap: var(--space-4);\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  padding-bottom: var(--space-2);\n  scrollbar-width: none;\n}\n.carousel__track::-webkit-scrollbar { display: none; }\n.carousel__track > * {\n  flex: 0 0 min(100%, 22rem);\n  scroll-snap-align: start;\n}\n.carousel__nav {\n  display: flex;\n  gap: var(--space-2);\n}\n.carousel__nav > button {\n  display: inline-grid;\n  place-items: center;\n  width: 2.75rem;\n  height: 2.75rem;\n  min-height: 0;\n  padding: 0;\n  border-radius: var(--radius-pill);\n  border: 1px solid var(--color-border);\n  background: var(--color-surface);\n  color: var(--color-text);\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  transition: border-color 160ms ease, background-color 160ms ease;\n}\n.carousel__nav > button:hover { border-color: var(--color-text); }\n.carousel__nav > button:disabled { opacity: 0.4; cursor: default; }\n.before-after {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--radius-lg);\n  background: var(--color-surface-2);\n  user-select: none;\n  touch-action: none;\n}\n.before-after__before,\n.before-after__after {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: cover;\n}\n.before-after__after {\n  position: absolute;\n  inset: 0;\n  clip-path: inset(0 0 0 50%);\n}\n.before-after__handle {\n  position: absolute;\n  inset-block: 0;\n  left: 50%;\n  width: 2px;\n  background: var(--color-surface);\n  transform: translateX(-50%);\n  cursor: ew-resize;\n}\n.before-after__handle::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--radius-pill);\n  border: 2px solid var(--color-surface);\n  background: color-mix(in srgb, var(--color-text) 70%, transparent);\n  box-shadow: var(--shadow-2);\n  transform: translate(-50%, -50%);\n}\n.before-after__label {\n  position: absolute;\n  top: var(--space-3);\n  padding: 0.2rem 0.6rem;\n  border-radius: var(--radius-pill);\n  font-size: var(--step-0);\n  font-weight: 600;\n  background: color-mix(in srgb, var(--color-bg) 80%, transparent);\n  color: var(--color-text);\n  pointer-events: none;\n}\n.before-after__label--before { left: var(--space-3); }\n.before-after__label--after { right: var(--space-3); }\n.icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 1.75;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  flex-shrink: 0;\n}\n.icon--lg { width: 1.75rem; height: 1.75rem; }\n.icon--sm { width: 1rem; height: 1rem; }\n";