/* ==========================================================================
   Last Chance Lighting — "Classical" design system
   Cormorant Garamond headings · Lora body · Manrope UI
   Plain CSS on plain HTML. Retune tokens in :root and the rest follows.
   ========================================================================== */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-surface-2: #f8f4f4;
  --color-text: #201f1d;
  --color-accent: #b68235;          /* warm brass — numerals, small marks   */
  --color-accent-700: #7d5411;      /* deep brass — section kickers          */
  --color-brand: #c8102e;           /* Last Chance red — logo, live accents  */
  --color-brand-dark: #a60c25;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-800: #5a3b0a;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 72px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(38px, 5.2vw, 60px); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 400; }
h3 { font-size: 22px; }
h4 { font-size: 19px; font-weight: 600; }

p { margin: 0 0 1rem; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-brand) 24%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* — layout helpers — */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(48px, 8vw, 64px); }
.section--tight { padding-block: clamp(32px, 6vw, 44px); }
.section--handoff { padding-bottom: clamp(64px, 10vw, 88px); }
.stack-sm > * + * { margin-top: 0.75rem; }

.rule { height: 1px; border: 0; margin: 0; background: var(--color-divider); }
.rule--inset { margin-inline: var(--pad); }

.kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 14px;
}
.lead {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  max-width: 60ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
}
.section-head h2 { margin: 0; }

/* — grids — */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.gap-lg { gap: clamp(20px, 3vw, 32px); }

@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* — split layout (image + copy) — */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px clamp(32px, 6vw, 96px);
  align-items: center;
}
.split--even { grid-template-columns: 1fr 1fr; }
.split--reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--wide-media { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 860px) {
  .split, .split--even, .split--reverse, .split--wide-media { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse > figure { order: -1; }
}

/* — buttons — */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 13px 22px; border-radius: var(--radius-md);
  transition: background .18s ease, color .2s ease, border-color .18s ease, transform .18s ease;
}
.btn svg { display: block; width: 14px; height: 14px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* fill-sweep behind the label (outline buttons only — filled ones hide it) */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-text);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.btn-primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-primary:hover { background: #000; border-color: #000; }

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { color: var(--color-bg); border-color: var(--color-text); }
.btn-secondary:hover::before { transform: scaleX(1); }

.btn-ghost {
  overflow: visible; color: var(--color-accent-700); padding: 4px 0; border: 0; border-radius: 0;
  align-self: flex-start;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .18s ease, background-size .28s cubic-bezier(.4, 0, .2, 1);
}
.btn-ghost::before { content: none; }
.btn-ghost:hover { color: var(--color-brand); background-size: 100% 1px; }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 28px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .btn::before, .btn-ghost { transition: none; }
  .btn:hover svg { transform: none; }
  .btn-secondary:hover::before { transform: scaleX(1); }
}

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid var(--color-divider);
}
.card--media { padding: 0; overflow: hidden; }
.card--link { text-decoration: none; color: inherit; transition: border-color .18s ease, box-shadow .18s ease; }
.card--link:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); box-shadow: var(--shadow-sm); }
.card__pad { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__kicker {
  font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700);
}
.card__title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.2; }
.card__body { margin: 0; font-size: 13.5px; opacity: 0.82; flex: 1; }
.card__meta {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; opacity: 0.62; margin-top: 4px;
}

/* — index numerals (Elegant/Modern/Statement, Why-us, timeline) — */
.numeral {
  font-family: var(--font-heading); font-weight: 400;
  color: var(--color-accent);
  font-feature-settings: "tnum" 1;
  line-height: 1;
}
.numeral--sm { font-size: 26px; }
.numeral--md { font-size: 34px; }
.numeral--lg { font-size: 40px; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }
button.tag { cursor: pointer; }

/* — image placeholder frame — */
.plate {
  position: relative;
  box-sizing: border-box;
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--color-text) 3%, var(--color-bg)) 0 10px,
      color-mix(in srgb, var(--color-text) 6%, var(--color-bg)) 10px 20px);
  display: grid; place-items: center;
  overflow: hidden;
}
.plate__label {
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-align: center; padding: 16px; max-width: 26ch;
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
}
.plate::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.plate::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.plate.flush-top { border-top-width: 8px; border-inline-width: 8px; border-bottom-width: 0; }

/* framed video (Projects) — the figure carries the clip's own aspect-ratio */
.plate--video { background: #0b0b0b; }
.plate--video::before, .plate--video::after { display: none; }
.plate--video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  grid-area: 1 / 1;
}
/* keep each tile at its native ratio instead of stretching to the row */
.video-wall { align-items: start; max-width: 960px; margin-inline: auto; }
.video-wall__wide { grid-column: 1 / -1; }

.ar-4-5 { aspect-ratio: 4 / 5; }
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-3-2 { aspect-ratio: 3 / 2; }

/* — utility bar above the nav — */
.topbar {
  background: #141312;
  color: color-mix(in srgb, #fff 62%, transparent);
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 5px 14px; padding-block: 8px; text-transform: uppercase;
}
.topbar a { color: color-mix(in srgb, var(--color-brand) 72%, #fff); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__sep { opacity: 0.35; }

/* — primary navigation — dark bar, sits under the reversed-out logo — */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: #1f1e1c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 var(--color-brand);
  font-family: var(--font-ui);
  transition: box-shadow .28s ease;
}
.site-nav.is-scrolled { box-shadow: 0 1px 0 var(--color-brand), 0 10px 24px rgba(0, 0, 0, 0.28); }
.site-nav__inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  min-height: 94px; padding-block: 12px;
  transition: min-height .28s ease, padding-block .28s ease;
}
.site-nav.is-scrolled .site-nav__inner { min-height: 68px; padding-block: 8px; }
.brand {
  display: flex; align-items: center;
  text-decoration: none; color: inherit; margin-right: auto;
}
.brand__img { height: 64px; width: auto; display: block; transition: height .28s ease; }
.site-nav.is-scrolled .brand__img { height: 46px; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative;
  color: color-mix(in srgb, #fff 78%, transparent);
  text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 14px;
  transition: color .18s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a[aria-current="page"] { color: #fff; }
/* underline: draws in on hover, held open for the current page */
.nav-links a:not(.nav-links__cta)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--color-brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.nav-links a:not(.nav-links__cta):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links__cta {
  margin-left: 10px;
  background: var(--color-brand); border-color: var(--color-brand);
  color: #fff !important; letter-spacing: 0.12em;
}
.nav-links__cta::after { display: none !important; }
.nav-links__cta:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: #fff !important; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-md);
  background: transparent; color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }

@media (max-width: 860px) {
  .brand__img { height: 52px; }
  .site-nav__inner { min-height: 78px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #1f1e1c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg);
    padding: 8px var(--pad) 20px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); font-size: 13px; }
  .nav-links a::after { display: none; }
  .site-nav.is-scrolled .site-nav__inner { min-height: 62px; }
  .site-nav.is-scrolled .brand__img { height: 42px; }
  .nav-links__cta { margin: 16px 0 0; border-bottom: 0 !important; text-align: center; justify-content: center; }
}

/* — hero carousel (home) — */
.hero { padding-block: clamp(48px, 8vw, 88px) clamp(40px, 6vw, 64px); }
.hero__carousel { position: relative; overflow: hidden; }

/* slides stack in one grid cell and crossfade with a slow Ken-Burns drift */
.hero__slides { display: grid; }
.hero__slides > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s ease, transform 6.5s ease-out;
  pointer-events: none;
}
.hero__slides > .is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* hero intro — staggered entrance on load (pure CSS, gated on .js) */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.js .hero__intro > *,
.js .hero__carousel {
  opacity: 0;
  animation: heroIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.js .hero__intro > :nth-child(1) { animation-delay: 0.05s; }
.js .hero__intro > :nth-child(2) { animation-delay: 0.14s; }
.js .hero__intro > :nth-child(3) { animation-delay: 0.23s; }
.js .hero__intro > :nth-child(4) { animation-delay: 0.32s; }
.js .hero__intro > :nth-child(5) { animation-delay: 0.41s; }
.js .hero__carousel { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .hero__slides > * { transition: opacity 0.2s linear; transform: none; }
  .hero__slides > .is-active { transform: none; }
  .js .hero__intro > *, .js .hero__carousel { opacity: 1; animation: none; }
}

.hero__controls {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
}
.hero__dots { display: flex; gap: 8px; }
.hero__dot {
  width: 32px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--color-text) 20%, transparent);
}
.hero__dot.is-active { background: var(--color-brand); }
.hero__arrows { display: flex; gap: 6px; margin-left: auto; }
.hero__arrow {
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
.hero__arrow svg { width: 16px; height: 16px; display: block; }
.hero__count { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; opacity: 0.6; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* — stat band — */
.stat-band { background: color-mix(in srgb, var(--color-neutral-900) 94%, black); color: var(--color-bg); }
.stat-band__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-block: clamp(40px, 6vw, 56px);
}
.stat {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.stat__value {
  font-family: var(--font-heading); font-weight: 400; font-size: clamp(34px, 4.4vw, 46px);
  color: color-mix(in srgb, var(--color-brand) 65%, #fff);
  line-height: 1; margin-bottom: 8px; font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, #fff 62%, transparent);
}
@media (max-width: 720px) { .stat-band__inner { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }

/* — timeline (About "Along the Way") — dark band, borrows the stat palette — */
.timeline {
  background: color-mix(in srgb, var(--color-neutral-900) 94%, black);
  color: var(--color-bg);
}
.timeline__inner { padding-block: clamp(48px, 8vw, 72px); }
.timeline h2 { margin: 0 0 36px; }
.timeline__item { position: relative; text-align: center; }
.timeline__year {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(30px, 4vw, 42px); line-height: 1; margin-bottom: 10px;
  color: color-mix(in srgb, var(--color-brand) 65%, #fff);
  font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}
.timeline__note { font-size: 14px; opacity: 0.72; margin: 0; }

/* #9 — connecting rail that draws across on scroll, nodes lighting in turn */
.timeline__grid { position: relative; padding-top: 62px; }
.timeline__grid::before,
.timeline__grid::after {
  content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px;
}
.timeline__grid::before { background: rgba(255, 255, 255, 0.14); }
.timeline__grid::after {
  background: color-mix(in srgb, var(--color-brand) 70%, #fff);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline.is-lit .timeline__grid::after { transform: scaleX(1); }

.timeline__item::before {
  content: ""; position: absolute; left: 50%; top: -53px;  /* up into the rail strip, off the years */
  width: 13px; height: 13px; border-radius: 50%;
  transform: translateX(-50%);
  background: #201f1d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.timeline.is-lit .timeline__item::before {
  background: color-mix(in srgb, var(--color-brand) 70%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
}
.timeline.is-lit .timeline__item:nth-child(1)::before { transition-delay: 0.05s; }
.timeline.is-lit .timeline__item:nth-child(2)::before { transition-delay: 0.35s; }
.timeline.is-lit .timeline__item:nth-child(3)::before { transition-delay: 0.65s; }
.timeline.is-lit .timeline__item:nth-child(4)::before { transition-delay: 0.95s; }

@media (max-width: 900px) {
  .timeline__grid { padding-top: 0; }
  .timeline__grid::before,
  .timeline__grid::after,
  .timeline__item::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__grid::after,
  .timeline__item::before { transition: none; }
  .timeline.is-lit .timeline__item::before { transition-delay: 0s; }
}

/* — "advice first" two-column — */
.advice { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px clamp(32px, 6vw, 80px); }
@media (max-width: 860px) { .advice { grid-template-columns: 1fr; gap: 36px; } }
.advice__points { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
@media (max-width: 520px) { .advice__points { grid-template-columns: 1fr; gap: 28px; } }
.point__num {
  font-family: var(--font-heading); font-weight: 400; font-size: 34px;
  color: var(--color-accent); font-feature-settings: "tnum" 1; margin-bottom: 6px;
}
.point__title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.point p { font-size: 13.5px; opacity: 0.8; margin: 0; }

/* — testimonials — */
.quote { display: flex; flex-direction: column; gap: 14px; }
.quote__stars { display: flex; gap: 2px; color: var(--color-accent); }
.quote__stars svg { width: 14px; height: 14px; display: block; }
.quote p { font-size: 14px; font-style: italic; margin: 0; }
.quote__by { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }

/* — icon contact list — */
.info-list { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.info-list > div { display: flex; gap: 12px; align-items: flex-start; }
.info-list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--color-accent-700); }
.info-list strong { font-family: var(--font-heading); font-weight: 600; display: block; }
.info-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-size: 14px;
}
.info-card > div { display: flex; gap: 10px; align-items: flex-start; }
.info-card svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--color-accent-700); }

/* — filters (products) — */
.filter-label {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-row + .filter-label { margin-top: 24px; }

.chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  background: transparent;
  border: 1px solid var(--color-divider);
  padding: 8px 15px; border-radius: 999px;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .1s ease;
}
.chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.chip.is-active {
  color: var(--color-bg);
  background: var(--color-text);
  border-color: var(--color-text);
}
.chip.is-active:hover { background: #000; border-color: #000; color: var(--color-bg); }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }

.result-count { font-size: 13px; opacity: 0.6; margin-bottom: 20px; }
.empty-state { padding: 48px 0; text-align: center; opacity: 0.7; }

/*
/* — forms — */
.field { margin-bottom: 16px; }
.field > label {
  display: block; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 65%, transparent); margin-bottom: 6px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.input {
  width: 100%; min-height: 42px; padding: 9px 12px;
  font-family: var(--font-body); font-size: 14px; color: var(--color-text);
  caret-color: var(--color-brand); background: var(--color-surface-2);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-brand); outline: none; }
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, currentColor 50%),
  linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.seg {
  display: flex; overflow: hidden; width: 100%;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 10px 12px; font-family: var(--font-ui); font-size: 12.5px;
  cursor: pointer; text-align: center;
}
.seg label + label { border-left: 1px solid var(--color-divider); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label:has(input:checked) { color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.seg label:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
@media (max-width: 520px) { .seg { flex-direction: column; } .seg label + label { border-left: 0; border-top: 1px solid var(--color-divider); } }

.contact-form-feedback {
  font-size: 13.5px; padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 16px;
}
.contact-form-feedback--success { background: color-mix(in srgb, #2e7d32 12%, transparent); color: #1b5e20; }
.contact-form-feedback--error { background: color-mix(in srgb, var(--color-brand) 12%, transparent); color: var(--color-brand-dark); }
[hidden] { display: none !important; }

.map-frame {
  border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider);
  aspect-ratio: 4 / 3; width: 100%; margin-bottom: 20px; background: var(--color-surface);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* — footer — */
.site-footer { background: color-mix(in srgb, var(--color-neutral-900) 94%, black); color: var(--color-bg); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between;
  padding-block: clamp(44px, 7vw, 56px) 32px;
}
.footer-brand { max-width: 340px; }
.footer-brand .brand { display: inline-flex; }
.footer-brand .brand__img { height: 88px; width: auto; display: block; }
.footer-brand p { font-size: 13.5px; opacity: 0.6; margin-top: 14px; }
.footer-col h2 {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.5; margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-col li {
  font-family: var(--font-ui); font-size: 13.5px; color: var(--color-bg);
  opacity: 0.82; text-decoration: none;
}
.footer-col a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: opacity .18s ease, color .18s ease, background-size .28s cubic-bezier(.4, 0, .2, 1);
}
.footer-col a:hover { opacity: 1; color: #fff; background-size: 100% 1px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 16px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-ui); font-size: 11.5px; color: var(--color-bg); opacity: 0.55;
}
.footer-bottom a {
  color: var(--color-bg);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .28s cubic-bezier(.4, 0, .2, 1);
}
.footer-bottom a:hover { background-size: 100% 1px; }
.footer-bottom__links { display: flex; gap: 16px; }

/* ==========================================================================
   Motion — scroll reveal (headings, kickers, card grids)
   The `.reveal` class is added by site.js; `.js` is set synchronously in
   <head>, so nothing is hidden before the script that can un-hide it runs.
   ========================================================================== */
.reveal {
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__inner, .brand__img,
  .nav-links a, .nav-links a::after,
  .footer-col a, .footer-bottom a { transition: none; }
}

/* ==========================================================================
   Preloader — full-screen branded loading overlay, shown on every page.
   Base state is display:none so a no-JS visit never sees it (nothing would
   ever remove it); it only shows once .js is set on <html>.
   ========================================================================== */
.preloader {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #1f1e1c;
  align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
/* `preload` is added in <head> only on a cold open or a refresh — internal
   navigation never gets it, so page-to-page moves are instant */
.js.preload .preloader { display: flex; }
.preloader.is-hidden { opacity: 0; pointer-events: none; }

.preloader__mark { display: flex; flex-direction: column; align-items: center; gap: 38px; }
.preloader__logo {
  height: 148px; width: auto; display: block;
  opacity: 0; transform: scale(0.92);
  animation: preloaderIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
}
.preloader__bar {
  width: 240px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden; position: relative;
}
.preloader__bar::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-brand) 75%, #fff);
  transform: scaleX(0); transform-origin: left center;
  animation: preloaderBar 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
@keyframes preloaderIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes preloaderBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader__logo { animation: none; opacity: 1; transform: none; }
  .preloader__bar::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   Evening mode — dark theme
   Tokens flip; the bands that were already dark (topbar, nav, stat band,
   timeline, footer, preloader) keep their own palette, so only the light
   ground moves. `data-theme` is set synchronously in <head>, before paint.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-bg: #131211;
  --color-surface: #232120;
  --color-surface-2: #1b1a18;
  --color-text: #ece9e4;
  --color-accent: #d3a05a;          /* brass, lifted so it reads on dark     */
  --color-accent-700: #d9ab63;
  --color-brand: #d9223c;
  --color-brand-dark: #ea4359;      /* hover goes lighter on a dark ground   */
  --color-divider: color-mix(in srgb, #ece9e4 18%, transparent);

  --color-neutral-100: #1b1a18;
  --color-neutral-200: #2a2726;
  --color-neutral-300: #3a3735;
  --color-neutral-800: #d3cfc9;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #3a2a12;
  --color-accent-800: #e8c48b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* the handful of places that hard-code a light-mode value */
:root[data-theme="dark"] .btn-primary:hover { background: #fff; border-color: #fff; }
:root[data-theme="dark"] .chip.is-active:hover { background: #fff; border-color: #fff; }
/* these bands paint their text with --color-bg, which is no longer light —
   .site-footer covers everything that inherits from it (brand blurb, column
   headings, plain list lines); the rest re-declare the colour themselves */
:root[data-theme="dark"] .stat-band,
:root[data-theme="dark"] .timeline,
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .footer-col a,
:root[data-theme="dark"] .footer-col li,
:root[data-theme="dark"] .footer-bottom,
:root[data-theme="dark"] .footer-bottom a { color: #f3f2f2; }
/* the same opacity reads dimmer on a dark ground — lift the muted text */
:root[data-theme="dark"] .footer-brand p { opacity: 0.74; }
:root[data-theme="dark"] .footer-col h2 { opacity: 0.62; }
:root[data-theme="dark"] .footer-col a,
:root[data-theme="dark"] .footer-col li { opacity: 0.88; }
:root[data-theme="dark"] .footer-bottom { opacity: 0.66; }
:root[data-theme="dark"] .contact-form-feedback--success {
  background: color-mix(in srgb, #4caf50 16%, transparent); color: #a5d6a7;
}
:root[data-theme="dark"] .map-frame { filter: invert(1) hue-rotate(180deg) brightness(0.94); }

/* — theme toggle — lives in the nav, which is dark in both themes — */
.theme-toggle {
  flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
  display: inline-grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  background: transparent; color: #fff; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.42); }

/* the two glyphs stack in one cell and swap by rotating through each other */
.theme-toggle svg {
  grid-area: 1 / 1; width: 18px; height: 18px; display: block;
  transition: opacity .28s ease, transform .5s cubic-bezier(.34, 1.3, .64, 1);
}
.theme-toggle__sun  { opacity: 1; transform: none; }
.theme-toggle__moon { opacity: 0; transform: rotate(-80deg) scale(0.45); }
:root[data-theme="dark"] .theme-toggle__sun  { opacity: 0; transform: rotate(80deg) scale(0.45); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: none; }

/* the swap itself — a class held on <html> for the length of the fade, so
   the page eases between palettes instead of snapping, and nothing carries
   a colour transition during normal browsing */
.theme-switching, .theme-switching *,
.theme-switching *::before, .theme-switching *::after {
  transition: background-color .5s ease, background-image .5s ease,
              color .5s ease, border-color .5s ease,
              outline-color .5s ease, box-shadow .5s ease, fill .5s ease !important;
  transition-delay: 0s !important;
}

/* brand already carries margin-right:auto — one auto margin is enough */
.nav-toggle { margin-left: 0; }
@media (max-width: 860px) {
  .theme-toggle { width: 40px; height: 40px; }
  .nav-toggle { order: 1; }   /* keep the theme button left of the hamburger */
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle svg { transition: none; }
  .theme-toggle__moon, :root[data-theme="dark"] .theme-toggle__sun { transform: none; }
  .theme-switching, .theme-switching *,
  .theme-switching *::before, .theme-switching *::after { transition: none !important; }
}

/* — WhatsApp floating action button — */
.wa-fab {
  position: fixed; z-index: 60;
  right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: 999px;
  background: #25d366; color: #fff; text-decoration: none;   /* WhatsApp brand green */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: background-color .18s ease, transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
}
.wa-fab svg { flex: 0 0 auto; width: 26px; height: 26px; display: block; }
.wa-fab__label {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  max-width: 0; margin-right: -10px;   /* swallow the flex gap while collapsed */
  overflow: hidden; white-space: nowrap;
  transition: max-width .32s cubic-bezier(.4, 0, .2, 1), margin-right .32s cubic-bezier(.4, 0, .2, 1);
}
.wa-fab:hover { background: #1fbe5b; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34); }
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label { max-width: 140px; margin-right: 2px; }
.wa-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* slow attention ring, so it reads as live without nagging */
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid #25d366; pointer-events: none;
  animation: waPulse 2.8s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
.wa-fab:hover::after { animation-play-state: paused; opacity: 0; }

@media (max-width: 560px) { .wa-fab__label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab__label { transition: none; }
  .wa-fab:hover { transform: none; }
  .wa-fab::after { animation: none; opacity: 0; }
}

/* — drifting glow orbs ————————————————————————————————————————————————
   Soft pools of light wandering behind the page, on every device. Injected
   by site.js. z-index:-1 puts them behind all content but still above the
   page ground: body's background propagates to the canvas, so these paint
   on top of that and under everything else. Sections with their own
   background — the dark bands, plates, the nav — sit over them, so the glow
   only ever shows through the negative space.
   The drift is CSS keyframes on transform: compositor-only, no rAF loop,
   and no full-viewport repaint (which is what animating a gradient's
   position would cost).

   Brand red in both themes. Each theme's own --color-brand is used, so dark
   mode picks up the lifted #d9223c rather than the light-mode red, which
   would go muddy against a near-black ground. */
:root { --glow-tint: var(--color-brand); --glow-a: 34%; --glow-b: 16%; }
:root[data-theme="dark"] { --glow-a: 17%; --glow-b: 6%; }

/* dark mode only, on every device. In light mode the layer stays mounted but
   hidden with its drift paused, so it costs nothing and the theme toggle can
   fade it in rather than snapping it on. The delayed visibility lets the
   opacity fade finish before the layer is taken out of rendering. */
.glow-orbs {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.glow-orbs .glow-orb { animation-play-state: paused; }

:root[data-theme="dark"] .glow-orbs {
  visibility: visible;
  transition: opacity 1s ease, visibility 0s linear 0s;
}
:root[data-theme="dark"] .glow-orbs .glow-orb { animation-play-state: running; }
:root[data-theme="dark"] .glow-orbs.is-on { opacity: 1; }
.glow-orb {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--glow-tint) var(--glow-a), transparent) 0%,
    color-mix(in srgb, var(--glow-tint) var(--glow-b), transparent) 42%,
    transparent 100%);
}
/* sized off the viewport so they stay large in proportion on a phone, with
   a floor and a ceiling — on a wide desktop the ceiling is what binds, which
   keeps them from growing into one undifferentiated wash */
.glow-orb--a {
  width: clamp(360px, 96vw, 900px); aspect-ratio: 1; height: auto;
  translate: -50% -50%;
  animation: orbDriftA 46s ease-in-out infinite;
}
.glow-orb--b {
  width: clamp(460px, 124vw, 1100px); aspect-ratio: 1; height: auto;
  translate: -50% -50%;
  animation: orbDriftB 61s ease-in-out infinite;
}
.glow-orb--c {
  width: clamp(300px, 78vw, 760px); aspect-ratio: 1; height: auto;
  translate: -50% -50%;
  animation: orbDriftC 53s ease-in-out infinite;
}
/* deliberately mismatched periods, so the three never fall into a pattern */
@keyframes orbDriftA {
  0%   { transform: translate3d(18vw, 14vh, 0); }
  25%  { transform: translate3d(76vw, 30vh, 0); }
  50%  { transform: translate3d(40vw, 72vh, 0); }
  75%  { transform: translate3d(84vw, 88vh, 0); }
  100% { transform: translate3d(18vw, 14vh, 0); }
}
@keyframes orbDriftB {
  0%   { transform: translate3d(82vw, 78vh, 0); }
  30%  { transform: translate3d(24vw, 56vh, 0); }
  55%  { transform: translate3d(64vw, 10vh, 0); }
  80%  { transform: translate3d(12vw, 26vh, 0); }
  100% { transform: translate3d(82vw, 78vh, 0); }
}
@keyframes orbDriftC {
  0%   { transform: translate3d(50vw, 92vh, 0); }
  22%  { transform: translate3d(88vw, 52vh, 0); }
  48%  { transform: translate3d(30vw, 20vh, 0); }
  74%  { transform: translate3d(70vw, 64vh, 0); }
  100% { transform: translate3d(50vw, 92vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .glow-orbs { display: none; }
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* — photographs inside a plate frame ————————————————————————————————
   .plate is a grid with place-items:center, so an unstyled <img> would sit
   centred at its natural size. Pin it to the single cell and cover instead,
   which lets one frame ratio hold photos of any shape. */
.plate img {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
/* the frame's corner marks and stripe pattern are placeholder furniture —
   once a photo is in, they'd only show through as noise */
.plate:has(img)::before, .plate:has(img)::after { display: none; }
.plate:has(img) { background: var(--color-surface); }

/* slow push-in on hover, clipped by the frame */
.card--link:hover .plate img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .plate img { transition: none; }
  .card--link:hover .plate img { transform: none; }
}

/* — showroom gallery ————————————————————————————————————————————————
   CSS columns rather than a grid: the photos come in a mix of ratios and
   masonry lets each keep its own, instead of cropping everything square. */
.gallery { column-count: 4; column-gap: 14px; }
@media (max-width: 1100px) { .gallery { column-count: 3; } }
@media (max-width: 760px)  { .gallery { column-count: 2; } }
@media (max-width: 420px)  { .gallery { column-count: 1; } }

.gallery__item {
  break-inside: avoid;
  display: block; width: 100%; padding: 0; margin: 0 0 14px;
  border: 0; background: var(--color-surface); cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden;
  position: relative; line-height: 0;
}
.gallery__item img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-text) 22%, transparent);
  opacity: 0; transition: opacity .25s ease;
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item:hover::after { opacity: 1; }
.gallery__item:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

/* — lightbox — */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, #0b0a09 92%, transparent);
  opacity: 0; transition: opacity .25s ease;
}
.lightbox.is-open { display: flex; }
.lightbox.is-shown { opacity: 1; }
.lightbox__img {
  max-width: min(92vw, 1100px); max-height: 86vh;
  width: auto; height: auto; display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.lightbox__btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  background: rgba(0, 0, 0, .45); color: #fff;
  transition: background-color .18s ease, border-color .18s ease;
}
.lightbox__btn:hover { background: rgba(0, 0, 0, .75); border-color: rgba(255, 255, 255, .6); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__btn svg { width: 20px; height: 20px; display: block; }
.lightbox__close { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); }
.lightbox__prev { left: clamp(8px, 2vw, 24px); }
.lightbox__next { right: clamp(8px, 2vw, 24px); }
.lightbox__count {
  position: absolute; bottom: clamp(12px, 3vw, 24px); left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .72);
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em;
}
@media (max-width: 560px) {
  .lightbox__btn { width: 42px; height: 42px; }
  .lightbox__img { max-width: 96vw; max-height: 76vh; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__item img, .gallery__item::after, .lightbox, .lightbox__btn { transition: none; }
  .gallery__item:hover img { transform: none; }
}