/* ============================================================
   Progress Furniture - Variant A "Warm Nordic" (v2)
   Strictly per archive/DESIGN.md: cream ground, ink text,
   Fixel Display/Text, editorial asymmetry, white canvas frame,
   generous whitespace, quiet intentional motion.
   Tweakable tokens (owner panel): --bg, --ink, --accent-wood,
   --font-scale, --space-unit, --r-md.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg: #F4F1EC;
  --surface: #FFFFFF;
  --surface-2: #EAE6DF;
  --ink: #191817;
  --muted: #75706A;
  --line: #DDD8D0;
  --accent-wood: #A67C52;
  --error: #B5473B;

  /* type scale multiplier (tweaks panel) */
  --font-scale: 1;

  /* spacing scale (8px base unit, tweakable density) */
  --space-unit: 8px;
  --sp-xs: calc(var(--space-unit) * 1);
  --sp-sm: calc(var(--space-unit) * 2);
  --sp-md: calc(var(--space-unit) * 3);
  --sp-lg: calc(var(--space-unit) * 5);
  --sp-xl: calc(var(--space-unit) * 8);
  --sp-2xl: calc(var(--space-unit) * 12);
  --sp-3xl: calc(var(--space-unit) * 16);
  --sp-4xl: calc(var(--space-unit) * 20);

  /* radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;

  --maxw: 1360px;
  --pad-x: 48px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover: 180ms;
  --dur-enter: 360ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  font-size: calc(16px * var(--font-scale));
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.875rem;
  transition: top 150ms var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* small caps utility voice */
.site-head__nav a,
.cat__label,
.trusted__caption,
.product__name,
.numbers__label,
.adv__title,
.video__label,
.contact__item dt {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Frame (white canvas inset from viewport) ---------- */
.frame {
  background: var(--surface);
  border-radius: var(--r-lg);
  margin: 20px;
  padding: 0 var(--pad-x);
  overflow: hidden;
}

/* consistent inner content column */
.site-head, .hero, .trusted, .showcase, .manifesto, .numbers,
.production, .certs {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* section rhythm */
.trusted, .numbers, .production, .certs {
  padding-block: var(--sp-3xl);
}
.showcase { padding-block: var(--sp-2xl); }
.showcase + .showcase { padding-top: var(--sp-lg); }
.manifesto { padding-block: var(--sp-4xl); }
.trusted { padding-block: var(--sp-2xl); border-top: 1px solid var(--line); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
  padding-block: var(--sp-md);
  border-bottom: 1px solid var(--line);
}
.site-head__logo {
  width: auto;
  height: var(--logo-h, 90px);
  margin-top: var(--logo-mt, 0px);
  flex: 0 0 auto;
}
.site-head__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--sp-md);
}
.site-head__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}
.site-head__nav a:hover,
.site-head__nav a:focus-visible { color: var(--ink); }
.site-head__nav .site-head__contact {
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  padding: 0 20px;
  min-height: 40px;
  transition: background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
.site-head__nav .site-head__contact:hover,
.site-head__nav .site-head__contact:focus-visible {
  color: var(--bg);
  background: var(--accent-wood);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-2xl);
}
.hero__lede {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  align-items: start;
  max-width: 54%;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  justify-self: start;
}

/* --- category pictograms (reference 3): quiet row, hairlines, crossfade --- */
.hero__cats { margin-top: var(--sp-lg); }
.cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cats__item { border-left: 1px solid var(--line); }
.cats__item:first-child { border-left: 0; }
.cat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.cat:hover,
.cat:focus-visible { background: var(--bg); }
.cat__stage {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.cat__line {
  position: absolute;
  inset: 0;
  width: 82%;
  height: 82%;
  margin: auto;
  color: var(--ink);
  opacity: 0.8;
  transition: opacity 250ms var(--ease-out);
}
.cat__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.cat__photo picture, .cat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat:hover .cat__photo,
.cat:focus-visible .cat__photo { opacity: 1; }
.cat:hover .cat__line,
.cat:focus-visible .cat__line { opacity: 0; }
.cat__label {
  color: var(--muted);
  transition: color var(--dur-hover) var(--ease-out);
}
.cat:hover .cat__label,
.cat:focus-visible .cat__label { color: var(--ink); }

/* ============================================================
   TRUSTED - thin, quiet, monochrome logos
   ============================================================ */
.trusted { text-align: center; }
.trusted__caption { color: var(--muted); }
.trusted__row {
  margin-top: var(--sp-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-xl);
}
.trusted__item { display: flex; align-items: center; }
.trusted__item img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
/* per-logo optical balance */
.trusted__item img[src*="braun-moebel"] { height: 54px; }
.trusted__item img[src*="jysk"] { height: 32px; }
.trusted__item img[src*="conforama"] { height: 36px; }
.trusted__item img[src*="moebelzentrum"] { height: 60px; }
/* GIGA: white artwork - dark chip behind it (note in content.js) */
.trusted__item--dark {
  background: var(--ink);
  border-radius: var(--r-sm);
  padding: 9px 14px;
}
.trusted__item--dark img {
  height: 16px;
  filter: grayscale(1);
  opacity: 0.8;
}
.trusted__item--dark:hover img { opacity: 1; filter: none; }

/* ============================================================
   SHOWCASES - editorial: heading-left / intro-right
   ============================================================ */
.showcase { border-top: 1px solid var(--line); }
.showcase__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: end;
  margin-bottom: var(--sp-2xl);
}
.showcase__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.showcase__intro {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 48ch;
  justify-self: end;
}
.showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.product__figure {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.product__figure picture {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-hover) var(--ease-out);
}
.product__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product:hover .product__figure picture { transform: translateY(-4px); }
.product__name { color: var(--ink); }

/* quiet line with the rest of the range */
.showcase__also {
  margin-top: var(--sp-xl);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ============================================================
   MANIFESTO + ADVANTAGES (quiet editorial list, not a card grid)
   ============================================================ */
.manifesto { border-top: 1px solid var(--line); }
.manifesto__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.adv {
  margin-top: var(--sp-2xl);
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-2xl);
}
.adv__item {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--sp-md);
  align-items: baseline;
  padding-block: var(--sp-sm);
  border-top: 1px solid var(--line);
}
.adv__title {
  color: var(--ink);
  margin: 0;
}
.adv__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers { border-top: 1px solid var(--line); }
.numbers__head { margin-bottom: var(--sp-xl); }
.numbers__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl) var(--sp-lg);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-xl);
}
.numbers__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.numbers__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.numbers__label { color: var(--muted); }

/* ============================================================
   PRODUCTION (video + facility photos)
   ============================================================ */
.production { border-top: 1px solid var(--line); }
.production__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: end;
  margin-bottom: var(--sp-2xl);
}
.production__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.production__body {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 48ch;
  justify-self: end;
}

/* click-to-load video */
.video { margin-bottom: var(--sp-md); }
.video__trigger {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  color: #FFFFFF;
  text-decoration: none;
}
.video__poster,
.video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__trigger::after {
  /* quiet scrim so the play affordance always reads on the footage */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 24, 23, 0.28);
  transition: background-color var(--dur-hover) var(--ease-out);
}
.video__trigger:hover::after,
.video__trigger:focus-visible::after { background: rgba(25, 24, 23, 0.16); }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  width: 72px;
  height: 72px;
  transition: transform var(--dur-hover) var(--ease-out);
}
.video__play svg { width: 100%; height: 100%; }
.video__trigger:hover .video__play,
.video__trigger:focus-visible .video__play { transform: scale(1.06); }
.video__label {
  position: absolute;
  left: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 1;
  color: #FFFFFF;
}
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.production__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}
.production__cell {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.production__cell picture,
.production__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.certs { border-top: 1px solid var(--line); }
.certs__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: end;
  margin-bottom: var(--sp-xl);
}
.certs__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.certs__intro {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 48ch;
  justify-self: end;
}
.certs__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}
.certs__item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.certs__badge {
  height: 56px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex: 0 0 auto;
}
.certs__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.certs__caption {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.certs__note {
  margin-top: var(--sp-xl);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ============================================================
   CONTACT (light card) + FOOTER (dark)
   ============================================================ */
.contact__card {
  background: var(--surface);
  border-radius: var(--r-lg);
  margin: 0 20px 20px;
  padding: var(--sp-3xl) var(--pad-x);
}
.contact__head,
.contact__grid {
  max-width: var(--maxw);
  margin-inline: auto;
}
.contact__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: end;
  margin-bottom: var(--sp-2xl);
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.contact__intro {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 44ch;
  justify-self: end;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-2xl);
  align-items: start;
}
.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-lg);
}
.contact__item dt {
  color: var(--muted);
  margin-bottom: 2px;
}
.contact__item--second {
  margin-top: var(--sp-md);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-lg);
}
.contact__item dd {
  font-size: 1.05rem;
  word-break: break-word;
}
.contact__link {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.contact__link:hover,
.contact__link:focus-visible { border-color: var(--accent-wood); }

/* form: quiet fields, inline errors in the world's voice */
.form {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__label {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.form__input {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.form__input:focus {
  outline: none;
  border-color: var(--ink);
}
.form__input--area { resize: vertical; min-height: 120px; }
.form__field.is-invalid .form__input { border-color: var(--error); }
.form__error {
  font-size: 0.875rem;
  color: var(--error);
}
.form__submit {
  align-self: flex-start;
  font: inherit;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--bg);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  min-height: 52px;
  padding: 0 36px;
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out);
}
.form__submit:hover,
.form__submit:focus-visible {
  transform: translateY(-2px);
  background: var(--accent-wood);
}

/* dark footer */
.footer {
  background: var(--ink);
  color: var(--bg);
  margin: 0 20px 20px;
  border-radius: var(--r-lg);
  padding: var(--sp-2xl) var(--pad-x);
}
.footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
}
.footer__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-lg);
  flex-wrap: wrap;
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid rgba(244, 241, 236, 0.18);
}
.footer__logo-chip {
  display: inline-flex;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 10px 16px;
}
.footer__logo { height: var(--logo-footer-h, 56px); width: auto; }
.footer__button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform var(--dur-hover) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out);
}
.footer__button:hover,
.footer__button:focus-visible {
  transform: translateY(-2px);
  background: #FFFFFF;
}
.footer__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__button--catalog {
  background: transparent;
  color: var(--bg);
  box-shadow: inset 0 0 0 1.5px rgba(244, 241, 236, 0.55);
}
.footer__button--catalog:hover,
.footer__button--catalog:focus-visible {
  background: rgba(244, 241, 236, 0.12);
}
.footer__legal {
  padding-top: var(--sp-lg);
  font-size: 0.8125rem;
  color: rgba(244, 241, 236, 0.6);
}
.form__fallback {
  margin-top: var(--sp-sm);
  font-size: 0.875rem;
  color: var(--muted);
}
.form__status {
  margin-top: var(--sp-sm);
  font-size: 0.9375rem;
}
.form__status--ok { color: #3E7C4F; }
.form__status--err { color: #B5473B; }
/* honeypot: offscreen for humans, visible to bots */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* ============================================================
   MOTION - quiet reveal (applied by JS only, so no-JS never hides content)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pad-x: 32px; }
  .hero__lede { gap: var(--sp-xl); }
  .showcase__grid { grid-template-columns: repeat(2, 1fr); }
  .production__grid { grid-template-columns: repeat(2, 1fr); }
  .numbers__grid { grid-template-columns: repeat(3, 1fr); }
  .certs__row { grid-template-columns: 1fr; gap: var(--sp-md); }
  .adv__item { grid-template-columns: 10rem 1fr; }
}

@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .frame { margin: 0; border-radius: 0; }
  .contact__card { margin: 0; border-radius: 0; }
  .footer { margin: 0; border-radius: 0; }

  /* smaller section pauses on mobile */
  .trusted, .showcase, .numbers, .production, .certs,
  .manifesto {
    padding-block: var(--sp-2xl);
  }

  .site-head { row-gap: var(--sp-xs); }
  .site-head__logo { height: clamp(48px, var(--logo-h, 90px), var(--logo-h, 90px)); }
  .site-head__nav { gap: 0 var(--sp-sm); }

  .hero { padding-block: var(--sp-xl) var(--sp-2xl); }
  .hero__lede { grid-template-columns: 1fr; gap: var(--sp-md); }
  .hero__sub { justify-self: start; }
  .hero__cats { margin-top: var(--sp-xl); }

  .showcase__head,
  .production__head,
  .certs__head,
  .contact__head {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-xl);
  }
  .showcase__intro, .production__body, .certs__intro,
  .contact__intro { justify-self: start; }

  .adv { grid-template-columns: 1fr; gap: 0; }
  .adv__item { grid-template-columns: 1fr; gap: 2px; }

  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
  .trusted__row { gap: var(--sp-md) var(--sp-lg); }

  .contact__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .video__play { width: 56px; height: 56px; }
}

@media (max-width: 560px) {
  /* Phones: no hover. Photos visible immediately, pictograms rest quietly.
     Tap cards are full-width halves, comfortably above 44px. */
  .cats {
    grid-template-columns: repeat(2, 1fr);
    border: 0;
    gap: var(--sp-sm);
  }
  .cats__item { border-left: 0; }
  .cat { padding: 0; gap: var(--sp-xs); }
  .cat:hover, .cat:focus-visible { background: transparent; }
  .cat__stage { border-radius: var(--r-sm); }
  .cat__photo { opacity: 1; }
  .cat__line { opacity: 0; }
  .cat__label { color: var(--ink); padding-bottom: var(--sp-xs); }

  .showcase__grid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .production__grid { grid-template-columns: 1fr; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .footer__cta { justify-content: center; text-align: center; }
}

/* ============================================================
   REDUCED MOTION - disable all animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .cat__photo { opacity: 1; }
  .cat__line { opacity: 0; }
}

/* ===== Hero photo reveal (chosen mode: photo in the empty right area,
   stops at the .cats border-top; hover on a category fades it in) ===== */
.hero { position: relative; }
.hero__lede, .hero__cats { position: relative; z-index: 2; }
.cat__photo { display: none; }

.hero__stage {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
  border-radius: 24px;
}
.hero:has(.cat:hover) .hero__stage,
.hero:has(.cat:focus-visible) .hero__stage { opacity: 1; }
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 241, 236, 0);
  transition: background 450ms ease;
  pointer-events: none;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 450ms ease, transform 6000ms ease;
}
.hero__bg[data-bg="sofas"] { background-image: url(assets/img/v2/cover-sofas.jpg); }
.hero__bg[data-bg="cornerSofas"] { background-image: url(assets/img/v2/cover-corner-sofas.jpg); }
.hero__bg[data-bg="beds"] { background-image: url(assets/img/v2/cover-beds.jpg); }
.hero__bg[data-bg="armchairs"] { background-image: url(assets/img/v2/cover-armchairs.jpg); }
.hero__bg[data-bg="wood"] { background-image: url(assets/img/v2/cover-wood.jpg); }
.hero:has(.cat[data-cat="sofas"]:hover) .hero__bg[data-bg="sofas"],
.hero:has(.cat[data-cat="sofas"]:focus-visible) .hero__bg[data-bg="sofas"],
.hero:has(.cat[data-cat="cornerSofas"]:hover) .hero__bg[data-bg="cornerSofas"],
.hero:has(.cat[data-cat="cornerSofas"]:focus-visible) .hero__bg[data-bg="cornerSofas"],
.hero:has(.cat[data-cat="beds"]:hover) .hero__bg[data-bg="beds"],
.hero:has(.cat[data-cat="beds"]:focus-visible) .hero__bg[data-bg="beds"],
.hero:has(.cat[data-cat="armchairs"]:hover) .hero__bg[data-bg="armchairs"],
.hero:has(.cat[data-cat="armchairs"]:focus-visible) .hero__bg[data-bg="armchairs"],
.hero:has(.cat[data-cat="wood"]:hover) .hero__bg[data-bg="wood"],
.hero:has(.cat[data-cat="wood"]:focus-visible) .hero__bg[data-bg="wood"] { opacity: 1; transform: scale(1.06); }

.hero .hero__stage { top: 0; right: 0; width: 46%; height: var(--cats-top, 56%); }

@media (max-width: 900px) { .hero__stage { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__stage, .hero__bg, .hero__stage::after { transition: opacity 200ms ease; }
  .hero__bg { transform: none; }
}

/* Lightbox */
#lb { padding: 0; border: none; background: transparent; max-width: 92vw; max-height: 92vh; border-radius: 10px; overflow: visible; }
#lb::backdrop { background: rgba(0,0,0,0.88); }
.lb__img { display: block; max-width: 88vw; max-height: 86vh; object-fit: contain; border-radius: 10px; vertical-align: top; }
.lb__close { position: fixed; top: 16px; right: 16px; background: rgba(30,28,26,0.7); border: none; color: #fff; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb__close:hover { background: rgba(30,28,26,0.95); }
.production__cell { cursor: zoom-in; }

/* Product Gallery Dialog */
#glb {
  padding: 0;
  border: none;
  background: #171615;
  color: #f0ece5;
  width: min(96vw, 1760px);
  height: min(92vh, 1150px);
  border-radius: 14px;
  overflow: hidden;
}
#glb[open] {
  display: flex;
  flex-direction: column;
}
#glb::backdrop { background: rgba(0,0,0,0.92); }
.glb__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
.glb__title {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.glb__close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.glb__close:hover { background: rgba(255,255,255,0.18); }
.glb__stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.glb__main {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.glb__prev, .glb__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.88);
  border: none;
  color: #191817;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  font-size: 2.5rem;
  width: 48px;
  height: 64px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms;
  z-index: 2;
}
.glb__prev { left: 12px; }
.glb__next { right: 12px; }
.glb__prev:hover, .glb__next:hover { background: #ffffff; }
.glb__prev[hidden], .glb__next[hidden] { display: none; }
.glb__strip {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  background: rgba(0,0,0,0.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.glb__strip:empty { display: none; }
.glb__thumb {
  width: 72px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 150ms, border-color 150ms;
}
.glb__thumb.is-active, .glb__thumb:hover { opacity: 1; }
.glb__thumb.is-active { border-color: rgba(255,255,255,0.8); }
.product { cursor: zoom-in; }

/* ============================================================
   MOBILE (max-width 560px) - tuned on 390px, the buyer's phone.
   Placed last so it wins over the hero-fx experiment block above
   (which hides .cat__photo globally for the desktop stage modes).
   ============================================================ */
@media (max-width: 560px) {
  /* Header: one clean row - prominent logo + compact Contact pill.
     Anchor links hide: the hero category tiles right below are the nav
     (same pattern as the COZITURE reference). Sticky so the single
     target action (Contact) stays reachable on a long page; shrinks
     once scrolled (.is-stuck set by main.js). */
  /* Fixed, not sticky: sticky proved flaky inside the flex-reordered
     frame (vanished on downward scroll in some browsers). A fixed bar
     is immune and also stays over the contact section outside .frame.
     The frame's top padding compensates for the bar leaving the flow. */
  .site-head {
    padding-block: var(--sp-sm);
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    padding-inline: var(--pad-x);
    border-bottom: 1px solid var(--line);
    transition: padding 200ms var(--ease-out);
  }
  .site-head.is-stuck {
    padding-block: 6px;
    box-shadow: 0 10px 24px rgba(25, 24, 23, 0.07);
  }
  .site-head__logo { height: 76px; margin-top: 0; transition: height 200ms var(--ease-out); }
  .site-head.is-stuck .site-head__logo { height: 44px; }
  .frame { padding-top: 108px; }
  /* anchor jumps land below the fixed bar */
  [id] { scroll-margin-top: 120px; }
  /* The carousel bleed must never widen its section past the frame:
     without the cap the flex-column lets showcases grow ~40px past the
     viewport, the page gains horizontal scroll and every heading can be
     dragged flush against the screen edge (fixed header stays put, so
     the page looks torn). Cap the sections and forbid sideways panning. */
  .frame > * { max-width: 100%; }
  html, body { overflow-x: clip; }
  .site-head__nav a:not(.site-head__contact) { display: none; }
  .site-head__nav .site-head__contact {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 44px;
    padding: 0 18px;
  }

  /* Hero: text uses the full width, headline per mobile scale.
     The catalog cover shows through from below - the orange sofa is
     the page's one colour moment; a surface-to-clear scrim keeps the
     headline on quiet ground. Bleeds edge to edge, so the frame cap
     is lifted for this one section (margins are explicit here). */
  .hero {
    max-width: none;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    padding-top: var(--sp-lg);
    padding-bottom: 280px;
    background-image:
      linear-gradient(
        to bottom,
        var(--surface) 0%,
        rgba(255, 255, 255, 0.95) 38%,
        rgba(255, 255, 255, 0.68) 56%,
        rgba(255, 255, 255, 0.14) 78%,
        rgba(255, 255, 255, 0) 100%
      ),
      url(assets/img/catalog-cover.jpg);
    background-size: cover;
    background-position: center bottom;
  }
  /* over the photo the muted gray loses contrast - ink holds it */
  .hero__lede { max-width: 100%; color: var(--ink); }
  .hero__headline { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .hero__cats { margin-top: var(--sp-lg); }

  /* Category tiles: hidden on phones (owner's call 2026-08-18) - the
     sections themselves start one swipe below, tiles only added length.
     Markup stays for desktop and for the checker's hero anchors. */
  .hero__cats { display: none; }

  /* Showcases: horizontal scroll-snap carousels - all models stay,
     page length drops by ~7 screens. Next card peeks 20% as the
     swipe affordance; edge-to-edge bleed keeps heading alignment. */
  .showcase__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-sm);
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    /* snap targets rest at the padded edge, not the viewport edge */
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .showcase__grid::-webkit-scrollbar { display: none; }
  .showcase__grid > .product {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  /* Section order on phones (owner's call 2026-08-18): the trusted
     logo wall moves below the four showcases - hero flows straight
     into products, proof comes after the range. CSS-only reorder;
     the DOM (and desktop) keep the original order. */
  .frame { display: flex; flex-direction: column; }
  .frame > .trusted { order: 1; }
  .frame > .manifesto, .frame > .numbers,
  .frame > .production, .frame > .certs { order: 2; }

  /* Tighter vertical rhythm: phone sections need half the air */
  .trusted, .showcase, .numbers, .production, .certs { padding-block: var(--sp-xl); }
  /* Manifesto + advantages: dropped from phones (owner's call 2026-08-18).
     Markup stays for desktop and the checker. */
  .manifesto { display: none; }
  .showcase__head, .production__head, .certs__head,
  .contact__head, .numbers__head { margin-bottom: var(--sp-lg); }

  /* Numbers: the desktop's hairline spec-sheet, folded to two columns -
     every row closed by a rule, so the stats read as one engraved table
     instead of a loose pile. Same light world as the rest of the page. */
  .numbers__grid {
    gap: 0 var(--sp-md);
    padding-top: 0;
  }
  .numbers__grid > .numbers__item {
    padding-block: var(--sp-md);
    border-bottom: 1px solid var(--line);
  }
  /* the section rule below already closes the table - one line, not two */
  .numbers__grid > .numbers__item:last-child { border-bottom: 0; }
  .numbers__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* 7vw keeps the widest stat (20,000+ m2) on one line down to 320px */
  .numbers__value {
    font-size: clamp(1.5rem, 7vw, 1.875rem);
    white-space: nowrap;
  }
  .numbers__label {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }
  /* the wood accent, used once: the founding year */
  .numbers__grid > :first-child .numbers__value { color: var(--accent-wood); }

  /* Manifesto: the advantages list sits closer to the statement */
  .adv { margin-top: var(--sp-lg); }

  /* Section titles on the DESIGN.md mobile scale (32px, not 40+) */
  .showcase__title, .production__title, .certs__title,
  .numbers__title, .contact__title, .manifesto__line {
    font-size: 2rem;
  }

  /* Contact: dense reference-style block (Muuto/GUBI footers) -
     phone/email/address/hours speak for themselves, their caps
     labels only doubled the height. Person labels stay. */
  .contact__card { padding-block: var(--sp-xl); }
  .contact__details { gap: var(--sp-xs); padding-top: var(--sp-md); }
  .contact__item:has(a[href^="tel:"]) dt,
  .contact__item:has(a[href^="mailto:"]) dt,
  .contact__item:has([data-contact-address]) dt,
  .contact__item:has([data-content="contact.hours"]) dt { display: none; }
  .contact__item dd { font-size: 1rem; }
  .contact__item--second { margin-top: var(--sp-sm); padding-top: var(--sp-md); }
  /* factory address + hours: separated and muted, not part of a person */
  .contact__item:has([data-contact-address]) { margin-top: var(--sp-md); }
  .contact__item:has([data-contact-address]) dd,
  .contact__item:has([data-content="contact.hours"]) dd {
    font-size: 0.875rem;
    color: var(--muted);
  }

  /* Dark footer: compact chip + slim buttons */
  .footer { padding-block: var(--sp-xl); }
  .footer__logo { height: 40px; }
  .footer__logo-chip { padding: 8px 12px; }
  .footer__cta { padding-bottom: var(--sp-lg); justify-content: center; }
  .footer__button {
    min-height: 44px;
    padding: 0 22px;
    font-size: 0.875rem;
  }
  .footer__legal { padding-top: var(--sp-md); text-align: center; }

  /* Contact form: lives in a dialog behind the "Write to us" button
     (moved there by main.js on phones; desktop keeps it inline) */
  .cf__open { margin-top: var(--sp-md); }
  #cf {
    border: none;
    border-radius: var(--r-md);
    background: var(--surface);
    width: min(92vw, 420px);
    padding: var(--sp-xl) var(--sp-md) var(--sp-md);
    margin: auto;
  }
  #cf::backdrop { background: rgba(25, 24, 23, 0.5); }
  /* inline separator has no meaning inside the dialog */
  #cf .form { border-top: 0; padding-top: 0; }
  .cf__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Certifications: on phones main.js folds the section into the dark
     footer as a quiet strip of white badges (names live in the alt text;
     the full cards stay on desktop). */
  .footer .certs {
    padding-block: var(--sp-lg) var(--sp-sm);
    /* the cta row above already draws the separator */
    border-top: 0;
  }
  .footer .certs__head { display: none; }
  .footer .certs__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-sm);
  }
  .footer .certs__text { display: none; }
  /* white chips like the logo chip: the badge art keeps its own colours */
  .footer .certs__badge {
    height: 26px;
    width: auto;
    background: #FFFFFF;
    border-radius: var(--r-sm);
    padding: 7px 12px;
    box-sizing: content-box;
  }

  /* Production photos: same swipe row as the showcases */
  .production__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-sm);
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .production__grid::-webkit-scrollbar { display: none; }
  .production__grid > .production__cell {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  /* Trusted logos: tidy 2-column grid, even sizes */
  .trusted__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg) var(--sp-sm);
    justify-items: center;
    align-items: center;
  }
  .trusted__item img { height: 30px; max-width: 150px; }
  .trusted__item img[src*="moebelzentrum"] { height: 52px; }
  .trusted__item img[src*="braun-moebel"] { height: 34px; }
  .trusted__item img[src*="jysk"] { height: 26px; }
  .trusted__item img[src*="conforama"] { height: 26px; }
  /* odd leftover centers across both columns */
  .trusted__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}