/* ============================================================
   HERO — de wand, en verder niets

   The copy used to sit in a card: a panel with its own background, border and
   drop shadow, parked over the product. That card is most of what made this
   read as a template rather than as this company's work. The words sit on the
   picture now, held by a gradient rather than a box.

   Every scene uses the same 16:9 architectural frame. The two real-project
   photographs are intentionally wider views, so their modest ceiling/floor
   crop never removes the Cinewall itself.

   The palette is measured from the render itself (ffmpeg palettegen): the whole
   product sits on one warm ramp from the black screen to lit plaster, and the
   fire is the only saturated thing in it. The page follows that literally —
   the accent appears exactly once, on the button.
   ============================================================ */

.wand {
  --tv:       #050403;
  --diep:     #2E1606;
  --noot:     #674027;
  --eik:      #AC8A69;
  --zand:     #C8AE93;
  --licht:    #E4DACD;
  --papier:   #F3EDE4;
  --vuur:     #C0451A;
  --vuur-lit: #DE621E;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  position: relative;
  isolation: isolate;
  background: var(--papier);
  color: var(--tv);
}

/* ---------- the picture fills the hero, on both layouts ---------- */

.wand__wall {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.wand__scenes {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #171513;
}

.wand__scene {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), visibility .9s step-end;
}
.wand__scene.is-active { opacity: 1; visibility: visible; transition: opacity .9s cubic-bezier(.22, .61, .36, 1); }

.wand__scene picture { position: absolute; inset: 0; display: block; }
.wand__scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position, 50% 50%);
}
.wand__scene img { z-index: 1; }

.hero-title__mobile,
.wand__cta-mobile,
.wand__lead-mobile { display: none; }

/* ---------- the words ---------- */

.wand__band {
  position: relative;
  z-index: 4;
  width: 100%;
  background: rgba(11, 8, 6, .92);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(228, 218, 205, .12);
}
.wand__inner {
  width: 100%;
  max-width: var(--wrap, 1180px);
  margin-inline: auto;
  padding: clamp(22px, 5vw, 34px) clamp(22px, 5vw, 64px) clamp(24px, 5vw, 36px);
}

.wand__eyebrow {
  margin: 0 0 clamp(12px, 2.2vw, 18px);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(228, 218, 205, .78);
}

.wand .wand__band h1 {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.024em;
  color: #FCF8F1;
  text-wrap: balance;
}
.wand .wand__band h1 em { font-style: italic; color: var(--zand); }

.wand__lead {
  margin: clamp(12px, 2vw, 18px) 0 0;
  max-width: 32ch;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  color: rgba(228, 218, 205, .84);
}

.wand__act {
  margin-top: clamp(20px, 3.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(20px, 3vw, 34px);
}

.wand a.wand__cta {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  background: var(--vuur);
  color: #FFF6EE;
  font-size: .98rem;
  font-weight: 700;
  border: 0;
}
.wand a.wand__cta:hover { background: var(--vuur-lit); color: #FFF6EE; }

.wand__price {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: .76rem;
  color: rgba(228, 218, 205, .7);
}
.wand__price b {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 400;
  color: #FCF8F1;
}

/* ---------- the specification ---------- */

.wand__scene figcaption {
  position: absolute;
  z-index: 4;
  top: clamp(78px, 13vw, 108px);
  right: clamp(22px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  color: rgba(252, 248, 241, .9);
  text-shadow: 0 1px 16px rgba(5, 4, 3, .8);
}
.wand__scene figcaption span {
  font-size: .5rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(252, 248, 241, .62);
}
.wand__scene figcaption strong {
  font-family: var(--mono); font-size: .6rem; font-weight: 400; letter-spacing: .02em;
}

/* ---------- scene navigation and transition time ---------- */

.wand__navigation {
  position: absolute;
  z-index: 8;
  inset: 50% clamp(12px, 2.2vw, 34px) auto;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.wand__arrow {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #FCF8F1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  pointer-events: auto;
  transition: transform .25s ease;
}
.wand__arrow::before {
  content: "";
  position: absolute;
  inset: 9px;
  width: 26px;
  height: 26px;
  background: rgba(17, 13, 10, .64);
  border: 1px solid rgba(199, 167, 112, .62);
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(5, 4, 3, .22);
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease;
}
.wand__arrow[hidden] { display: none !important; }
.wand__arrow--prev { margin-right: auto; }
.wand__arrow--next { margin-left: auto; }
.wand__arrow svg {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wand__arrow:hover,
.wand__arrow:focus-visible {
  color: #FFF;
  transform: translateY(-1px);
}
.wand__arrow:hover::before,
.wand__arrow:focus-visible::before { background: rgba(17, 13, 10, .86); border-color: #C7A770; }
.wand__arrow:focus-visible { outline: 2px solid #FCF8F1; outline-offset: 3px; }

.wand__autoplay {
  position: absolute;
  z-index: 10;
  right: clamp(12px, 2.2vw, 34px);
  bottom: 14px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(252, 248, 241, .9);
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.wand__autoplay::before {
  content: "";
  position: absolute;
  inset: 9px;
  width: 26px;
  height: 26px;
  background: rgba(17, 13, 10, .64);
  border: 1px solid rgba(199, 167, 112, .62);
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(5, 4, 3, .22);
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease;
}
.wand__autoplay[hidden] { display: none !important; }
.wand__autoplay:hover,
.wand__autoplay:focus-visible { color: #FFF; }
.wand__autoplay:hover::before,
.wand__autoplay:focus-visible::before { background: rgba(17, 13, 10, .86); border-color: #C7A770; }
.wand__autoplay:focus-visible { outline: 2px solid #FCF8F1; outline-offset: 3px; }
.wand__autoplay-pause { position: relative; z-index: 1; width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.wand__autoplay-play { position: relative; z-index: 1; display: none; width: 12px; height: 12px; fill: currentColor; }
.wand.is-user-paused .wand__autoplay-pause { display: none; }
.wand.is-user-paused .wand__autoplay-play { display: block; }
.wand__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wand__progress {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(252, 248, 241, .2);
}
.wand__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #C7A770;
  box-shadow: 0 0 12px rgba(199, 167, 112, .5);
  transform: scaleX(0);
  transform-origin: left center;
}
.wand__progress-fill.is-running { animation: wand-progress 7s linear forwards; }
.wand.is-carousel-paused .wand__progress-fill { animation-play-state: paused; }
@keyframes wand-progress { to { transform: scaleX(1); } }

/* ---------- persistent showroom navigation ---------- */

.site-head {
  position: sticky;
  z-index: 70;
  top: 0;
  background: #171513;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 28px rgba(23, 21, 19, .12);
}
.site-head__inner { min-height: 72px; padding-block: 0; }
.site-nav { display: flex; }
body:not(.journey-page) .site-nav a,
body:not(.journey-page) .site-head__actions .phone-link { color: rgba(255, 255, 255, .78); }
body:not(.journey-page) .site-nav a:hover,
body:not(.journey-page) .site-head__actions .phone-link:hover { color: #fff; }
.site-nav__quote-wrap,
.site-nav__mobile-contact,
.site-menu-toggle { display: none; }
.site-head__actions .button--small {
  white-space: nowrap;
  color: #fff;
  background: #C64A1D;
  background-image: none;
  border-color: #C64A1D;
  box-shadow: none;
}
.site-head__actions .button--small:hover { color: #fff; background: #A83C17; }
.site-menu-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2px;
  font-size: .78rem;
  font-weight: 700;
}
.site-menu-toggle i {
  position: relative;
  width: 15px;
  height: 11px;
  display: block;
  border-block: 1px solid currentColor;
}
.site-menu-toggle i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  border-top: 1px solid currentColor;
}
@media (max-width: 899px) {
  .site-head__inner {
    min-height: 64px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
  }
  .brand { margin-right: auto; }
  .site-head__actions { order: 2; gap: 0; }
  .site-head__actions .phone-link { display: none; }
  .site-head__actions .button--small { min-height: 44px; padding: 0 12px; font-size: .76rem; }
  .site-menu-toggle { order: 3; }
  .site-head[data-cw-menu-ready="true"] .site-menu-toggle { display: inline-flex; }
  .site-nav {
    order: 4;
    flex: 0 0 100%;
    display: grid;
    justify-content: stretch;
    gap: 0;
    padding: 12px clamp(20px, 5vw, 64px) 20px;
    background: #171513;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .site-head[data-cw-menu-ready="true"] .site-nav {
    position: absolute;
    inset: 100% 0 auto;
    box-shadow: 0 20px 40px rgba(23, 21, 19, .2);
  }
  .site-head[data-cw-menu-ready="true"]:not(.is-menu-open) .site-nav { display: none; }
  .site-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .site-nav a::after { display: none; }
  .site-nav__mobile-contact {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 16px;
  }
  body:not(.journey-page) .site-nav .site-nav__mobile-contact a {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 0;
    color: #C7A770;
    background: rgba(199, 167, 112, .08);
    border: 1px solid rgba(199, 167, 112, .55);
    border-radius: 50%;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .site-nav__mobile-contact svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .site-nav__mobile-contact .social-icon__dot {
    fill: currentColor;
    stroke: none;
  }
  body:not(.journey-page) .site-nav .site-nav__mobile-contact a:hover {
    color: #171513;
    background: #C7A770;
    border-color: #C7A770;
    transform: translateY(-1px);
  }
  body:not(.journey-page) .site-nav .site-nav__mobile-contact a:focus-visible {
    outline: 2px solid #FCF8F1;
    outline-offset: 3px;
  }
  .site-nav__quote-wrap { display: block; }
  .site-nav .site-nav__quote {
    min-height: 46px;
    display: inline-flex;
    justify-content: center;
    margin-top: 12px;
    padding-inline: 14px;
    color: #fff;
    background: #C64A1D;
    border: 1px solid #C64A1D;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .site-head__inner { flex-wrap: nowrap; }
}

/* Between tablet navigation and the full desktop rail, keep the commercial
   action in one row. The phone route already exists in the menu/footer and is
   the only item that cannot fit without forcing a second header row. */
@media (min-width: 900px) and (max-width: 1050px) {
  .site-head__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-head__actions .phone-link { display: none; }
}

/* ---------- below 900px: the picture first, then quiet plaster copy ----------
   The image is the proof. It keeps its architectural 4:3 frame while the copy
   follows on a light material surface, so the phone no longer becomes a tall
   black panel with a small photograph attached to it. */

@media (max-width: 899px) {
  .wand__band {
    background: #F4F0E9;
    backdrop-filter: none;
    border-top-color: rgba(23, 21, 19, .12);
  }
  .wand__inner {
    padding: clamp(20px, 5vw, 28px) clamp(20px, 5vw, 40px) clamp(22px, 5vw, 30px);
  }
  .wand__eyebrow {
    margin-bottom: clamp(9px, 2vw, 13px);
    color: #806746;
  }
  .wand .wand__band h1 {
    max-width: 13ch;
    color: #171513;
    font-size: clamp(2.25rem, 11vw, 3.4rem);
    line-height: 1.01;
  }
  .wand .wand__band h1 em { color: #6B432A; }
  .wand__lead {
    margin-top: clamp(10px, 2vw, 14px);
    color: rgba(23, 21, 19, .7);
    line-height: 1.5;
  }
  .wand__act {
    margin-top: clamp(15px, 3vw, 20px);
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(12px, 3vw, 24px);
  }
  .wand a.wand__cta { width: auto; min-height: 52px; flex: none; }
  .wand__price { min-width: max-content; }
  .wand__price b,
  .wand__price span { white-space: nowrap; }
  .wand__price { color: rgba(23, 21, 19, .58); }
  .wand__price b { color: #171513; }
}

@media (max-width: 560px) {
  .site-head__inner { flex-wrap: nowrap; }
  .site-head__actions { display: none; }
  .wand__wall { background: #F4F0E9; }
  .wand__scenes { aspect-ratio: 16 / 9; }
  .wand__scene { overflow: hidden; background: #171513; }
  .wand__scene img { object-fit: cover; }
  .wand__scene figcaption { display: none; }
  .wand__band {
    position: relative;
    z-index: 6;
    left: auto;
    bottom: auto;
    width: 100%;
    margin: 0;
    border: 0;
    background: #241B16;
    backdrop-filter: none;
  }
  .wand__inner {
    width: 100%;
    max-width: none;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .wand__eyebrow,
  .wand__price,
  .hero-title__desktop,
  .wand__lead-desktop,
  .wand__cta-desktop { display: none; }
  .hero-title__mobile,
  .wand__cta-mobile,
  .wand__lead-mobile { display: inline; }
  .wand .wand__band h1 {
    max-width: none;
    color: #FCF8F1;
    font-size: clamp(1.18rem, 5.4vw, 1.38rem);
    line-height: 1.08;
    letter-spacing: -.018em;
  }
  .wand .wand__band h1 em { color: #C7A770; }
  .wand__lead {
    margin: 0;
    max-width: none;
    color: rgba(252, 248, 241, .68);
    font-size: .67rem;
    line-height: 1.35;
  }
  .wand__act {
    margin: 10px 0 0;
    display: block;
  }
  .wand a.wand__cta {
    width: 100%;
    min-height: 46px;
    padding-inline: 16px;
    justify-content: center;
    font-size: .74rem;
    white-space: nowrap;
    box-shadow: none;
  }
  .wand__navigation { right: 10px; left: 10px; }
  .wand__autoplay { right: 10px; bottom: 10px; }
  .wand__arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }

  body:not(.journey-page) main > .showroom {
    padding: 0 0 60px;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  body:not(.journey-page) .showroom > .wrap { padding-inline: 16px; }
  #modellen-prijzen.showroom-panel { padding-top: 12px; }
  #modellen-prijzen > .panel-intro--catalog {
    display: block;
    margin: 0 0 8px;
    padding: 0 0 8px;
  }
  #modellen-prijzen > .panel-intro--catalog h2 {
    margin: 0 0 3px;
    font-size: 1.12rem;
    line-height: 1.12;
  }
  #modellen-prijzen > .panel-intro--catalog > p {
    max-width: 40ch;
    font-size: .74rem;
    line-height: 1.4;
  }
  .category-filters { margin: 0; padding-bottom: 10px; }
  body:not(.journey-page) .showroom .cfg__shell {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body:not(.journey-page) .showroom .cfg__body { padding: 0; }
  body:not(.journey-page) .showroom .cfg__telling {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  body:not(.journey-page) .showroom .tgrid,
  body:not(.journey-page) .showroom .tile { width: 100%; }
}

/* ---------- from 900px: full-bleed picture with two clear corners ----------
   The commercial panel owns the lower-left. Scene details and the persistent
   WhatsApp route own the lower-right, leaving the television, fire and lit
   niches readable in the centre. */

@media (min-width: 900px) {
  /* Keep the stage at the source-native 16:9 ratio on every desktop width.
     A viewport-height stage cropped the upper niches on wide screens. */
  .wand__wall { display: block; min-height: 0; aspect-ratio: 16 / 9; }
  .wand__navigation { top: 38%; }
  .wand__scenes {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: #171513;
  }

  .wand__band {
    position: absolute;
    z-index: 4;
    left: clamp(18px, 2vw, 32px);
    right: auto;
    /* high enough to keep the lower-right scene specification unobstructed */
    bottom: clamp(118px, 14vh, 150px);
    width: min(330px, 28vw);
    background: rgba(11, 8, 6, .86);
    backdrop-filter: blur(8px);
    border-top: 0;
    border: 1px solid rgba(228, 218, 205, .14);
  }
  .wand__inner {
    display: block;
    max-width: none;
    margin: 0;
    padding: 22px 24px 24px;
  }

  .wand__eyebrow { margin-bottom: 12px; }
  .wand .wand__band h1 {
    max-width: none;
    font-size: clamp(1.75rem, 2vw, 2.2rem);
    line-height: 1.08;
  }
  .wand__lead { display: block; margin-top: 10px; max-width: none; font-size: .82rem; line-height: 1.5; }
  .wand__act {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(112px, .85fr);
    align-items: center;
    gap: 10px;
    margin-top: 16px;
  }
  .wand a.wand__cta { width: 100%; min-height: 46px; padding: 0 8px; font-size: .64rem; line-height: 1.25; white-space: normal; text-align: center; }
  .wand__price b { font-size: .94rem; line-height: 1.2; white-space: normal; }
  .wand__price span { font-size: .62rem; }

  /* The specification owns a quiet lower-right measurement rail. */
  .wand__scene figcaption {
    top: auto;
    bottom: clamp(30px, 3.4vw, 56px);
    left: auto;
    right: clamp(112px, 8vw, 156px);
    align-items: flex-end;
    text-align: right;
  }
  /* Top-right is independent from the lower-right caption and WhatsApp route. */
  .wand__autoplay {
    top: clamp(14px, 1.4vw, 22px);
    right: clamp(18px, 2vw, 32px);
    bottom: auto;
  }
  .wa-fab {
    left: auto;
    right: clamp(24px, 3vw, 32px);
    width: 58px;
    height: 58px;
  }

  .showroom-panel#modellen-prijzen { padding-top: 28px; }
}

/* ---------- the real mark ---------- */
.brand {
  display: inline-flex; align-items: center; flex: none; width: max-content;
  gap: 8px;
  padding: 0;
  background: none;
}
.brand__symbol {
  width: 57px;
  height: 38px;
  flex: none;
  overflow: hidden;
}
.brand__symbol img {
  display: block;
  width: auto;
  max-width: none;
  height: 38px;
}
.brand__wordmark { display: grid; gap: 3px; min-width: 0; line-height: 1; }
.brand__name {
  display: grid;
  gap: 1px;
  color: #C7A770;
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 600;
  line-height: .88;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.brand__name strong {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2em;
}
.brand__tagline {
  color: #A98C64;
  font-size: .42rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.brand__mark, .brand__copy { display: none; }

@media (max-width: 899px) {
  .brand { gap: 6px; }
  .brand__symbol { width: 45px; height: 30px; }
  .brand__symbol img { height: 30px; }
  .brand__name { font-size: .5rem; letter-spacing: .13em; }
  .brand__name strong { font-size: .61rem; letter-spacing: .18em; }
  .brand__tagline { font-size: .34rem; letter-spacing: .17em; }
}

/* ---------- respect the reader ---------- */

@media (prefers-reduced-motion: reduce) {
  .wand__scene,
  .wand a.wand__cta,
  .wand__arrow,
  .wand__autoplay { transition: none; }
  .wand__progress-fill { animation: none !important; transform: scaleX(1); opacity: .45; }
}

.showroom {
  padding: 0 0 clamp(60px, 8vw, 108px);
  background: var(--paper);
  border: 0;
  border-radius: 0;
  overflow: visible;
  scroll-margin-top: 18px;
}

.showroom-panel { padding-block: clamp(38px, 5vw, 68px); scroll-margin-top: 88px; }
.showroom-panel + .showroom-panel { border-top: 1px solid rgba(35, 33, 30, .14); }
.showroom-panel[hidden] { display: none; }
.panel-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .62fr); align-items: end; gap: clamp(34px, 7vw, 110px); margin-bottom: clamp(28px, 4vw, 44px); }
.panel-intro h2,
.about-grid h2 { color: var(--graphite); font-family: var(--font-display); font-size: clamp(1.85rem, 3.2vw, 3rem); line-height: 1.08; }
.panel-intro > p,
.about-grid > div > p { color: rgba(35, 33, 30, .63); }
.panel-intro--catalog {
  grid-template-columns: max-content minmax(360px, 600px);
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: 16px;
}
.panel-intro--catalog h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); }
.panel-intro--catalog > p { max-width: 58ch; font-size: .82rem; line-height: 1.5; }

.category-filters { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin; }
.category-filters button,
.show-all-models {
  min-height: 44px;
  flex: none;
  padding: 9px 17px;
  color: rgba(35, 33, 30, .68);
  background: #fff;
  border: 1px solid rgba(35, 33, 30, .18);
  border-radius: 999px;
  font-weight: 700;
}
.category-filters button.is-active,
.category-filters button[aria-pressed="true"] { color: #fff; background: var(--copper); border-color: var(--copper); }
.show-all-models { display: flex; margin: 24px auto 0; border-color: var(--graphite); color: var(--graphite); }
.show-all-models:hover { color: #fff; background: var(--graphite); }
.showroom__fine { margin-top: 18px; color: rgba(35, 33, 30, .55); font-size: .78rem; text-align: center; }

.showroom .offer-catalog { padding: 0; background: transparent; border: 0; }
.showroom .cfg__shell { box-shadow: 0 18px 60px rgba(48, 38, 30, .08); }
.showroom .cfg__filters[hidden] { display: none; }
.showroom .cfg__body { padding-top: clamp(22px, 3vw, 34px); }
.showroom .cfg__telling {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.work-gallery { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: clamp(12px, 2vw, 22px); }
.work-gallery figure { position: relative; min-height: 460px; margin: 0; overflow: hidden; background: var(--paper-deep); }
.work-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.work-gallery figure:hover img { transform: scale(1.025); }
.work-gallery figcaption { position: absolute; inset: auto 0 0; padding: 20px; color: #fff; background: linear-gradient(transparent, rgba(20, 18, 16, .78)); font-weight: 700; }
.showroom-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: 24px; color: var(--graphite); border-bottom: 1px solid var(--copper); font-weight: 700; }

.showroom-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 30px; padding: 0; border: 1px solid rgba(35, 33, 30, .16); list-style: none; }
.showroom-process li { min-height: 290px; padding: clamp(26px, 4vw, 46px); border-right: 1px solid rgba(35, 33, 30, .14); }
.showroom-process li:last-child { border-right: 0; }
.showroom-process span { color: var(--copper); font-family: var(--font-display); font-size: 1.2rem; }
.showroom-process h4 { margin: 54px 0 12px; color: var(--graphite); font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; }
.showroom-process p { color: rgba(35, 33, 30, .62); }

.about-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(440px, 1fr); gap: clamp(42px, 9vw, 130px); align-items: start; }
.about-grid address { display: grid; gap: 8px; margin-top: 28px; padding: 24px; background: #fff; border: 1px solid rgba(35, 33, 30, .14); font-style: normal; }
.about-grid address a { color: var(--graphite); }
.about-grid address small { color: rgba(35, 33, 30, .5); }
.showroom-faq { border-top: 1px solid rgba(35, 33, 30, .18); }
.showroom-faq details { border-bottom: 1px solid rgba(35, 33, 30, .18); }
.showroom-faq summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; color: var(--graphite); font-weight: 700; list-style: none; }
.showroom-faq summary::-webkit-details-marker { display: none; }
.showroom-faq details[open] summary span { transform: rotate(45deg); }
.showroom-faq details p { padding: 0 24px 22px 0; color: rgba(35, 33, 30, .62); }

@media (max-width: 980px) {
  .showroom-hero { min-height: 760px; }
  .showroom-hero__copy { width: min(620px, 70vw); }
  .showroom-hero__scene figcaption { max-width: 48vw; }
  .work-gallery { grid-template-columns: 1fr 1fr; }
  .work-gallery figure:first-child { grid-column: 1 / -1; min-height: 520px; }
  .work-gallery figure:not(:first-child) { min-height: 380px; }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .showroom-hero { min-height: 720px; }
  .showroom-hero__inner { align-items: flex-end; padding: 210px 18px 82px; }
  .showroom-hero__copy { width: 100%; padding: 26px 24px; background: rgba(248, 245, 239, .94); }
  .showroom-hero__copy h1 { font-size: clamp(2.8rem, 13vw, 4.8rem); }
  .showroom-hero__copy > p:not(.eyebrow) { margin-top: 16px; }
  .showroom-hero__actions { margin-top: 22px; }
  .showroom-hero__copy ul { margin-top: 20px; padding-top: 16px; }
  .showroom-hero__scene > img,
  .showroom-hero__scene > video { object-position: 50% 18%; }
  .showroom-hero__scene figcaption { top: 16px; right: 16px; bottom: auto; max-width: calc(100% - 32px); }
  .showroom-hero__scene figcaption strong { display: none; }
  .showroom-hero__controls { bottom: 18px; }
  .panel-intro { grid-template-columns: 1fr; gap: 16px; }
  .work-gallery { grid-template-columns: 1fr; }
  .work-gallery figure:first-child { grid-column: auto; min-height: 390px; }
  .work-gallery figure:not(:first-child) { min-height: 330px; }
  .showroom-process { grid-template-columns: 1fr; }
  .showroom-process li { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(35, 33, 30, .14); }
  .showroom-process li:last-child { border-bottom: 0; }
  .showroom-process h4 { margin-top: 24px; }
}

@media (max-width: 520px) {
  .showroom-hero { min-height: 760px; }
  .showroom-hero__inner { padding-inline: 12px; padding-bottom: 78px; }
  .showroom-hero__copy { padding: 22px 18px; }
  .showroom-hero__copy .eyebrow { margin-bottom: 8px; }
  .showroom-hero__copy h1 { font-size: 3.25rem; }
  .showroom-hero__copy > p:not(.eyebrow) { font-size: .95rem; line-height: 1.48; }
  .showroom-hero__actions { gap: 8px; }
  .showroom-hero__actions .button { width: 100%; }
  .showroom-hero__secondary { width: 100%; justify-content: center; border: 0; }
  .showroom-hero__copy ul { gap: 5px 12px; font-size: .7rem; }
  .showroom-hero__controls { gap: 2px; padding: 4px; }
  .showroom-hero__pause { display: none; }
  .showroom-panel { padding-block: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-hero__scene,
  .work-gallery img { transition: none; }
  .showroom-hero__scene > video { display: none; }
}

/* ---------- the page arriving ----------
   The photography never zooms. Only the compact commercial copy enters once,
   in the order a visitor reads it. */
/* Movement only. This used to fade in from opacity 0, and a stalled animation
   left the heading invisible while reading as "running" at currentTime 0. An
   entrance is not worth a page that might show nothing. */
@keyframes wand-rise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

.wand__eyebrow { animation: wand-rise .8s cubic-bezier(.22, .61, .36, 1) .12s both; }
.wand h1       { animation: wand-rise .9s cubic-bezier(.22, .61, .36, 1) .22s both; }
.wand__lead    { animation: wand-rise .9s cubic-bezier(.22, .61, .36, 1) .34s both; }
.wand__act     { animation: wand-rise .9s cubic-bezier(.22, .61, .36, 1) .44s both; }
.wand__scene.is-active figcaption { animation: wand-rise .9s cubic-bezier(.22, .61, .36, 1) .6s both; }

.wand a.wand__cta { transition: background .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); }
.wand a.wand__cta:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .wand__eyebrow, .wand h1, .wand__lead, .wand__act,
  .wand__scene.is-active figcaption { animation: none; }
  .wand a.wand__cta:hover { transform: none; }
}

/* ---------- Ons werk ----------
   Three photographs were shown, and not the three that show the work best -
   one had a video call on the screen, another a news broadcast. Seven of the
   sixteen are worth showing; these are those. The caption moved out from on
   top of the picture to underneath it, where it does not cover the thing it
   describes, and its second line is the specification in the same mono voice
   the hero uses. */

.werk {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
  margin-top: clamp(26px, 4vw, 44px);
}
.werk figure { margin: 0; display: grid; gap: 12px; }
.werk img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #C8AE93;
}
.werk figcaption { display: grid; gap: 3px; }
.werk figcaption strong {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  letter-spacing: -.012em;
  color: #241505;
}
.werk figcaption span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .02em;
  color: rgba(46, 22, 6, .58);
}

@media (min-width: 620px) {
  .werk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the first project is the strongest, so it gets the full width */
  .werk figure:first-child { grid-column: 1 / -1; }
  .werk figure:first-child img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1000px) {
  .werk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- short tablet screens ---------- */

@media (min-width: 561px) and (max-width: 899px) and (max-height: 720px) {
  .wand__lead { display: none; }
  .wand__inner { padding-top: 12px; padding-bottom: 12px; }
  .wand__eyebrow { display: none; }
  .wand .wand__band h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  .wand__act { margin-top: 0; gap: 10px; }
  .wand a.wand__cta { width: auto; min-height: 44px; padding-inline: 18px; font-size: .86rem; }
  .wand__price b { font-size: 1rem; }
  .wand__price span { font-size: .62rem; }
}