:root {
  --ink: #10131a;
  --paper: #f8f8f4;
  --accent: #1f55d8;
  --blue: #1f55d8;
  --coral: #ff654b;
  --lemon: #f3df62;
  --mint: #cfe9de;
  --lilac: #ded7f4;
  --radius-system: 0px;
}

body { background: var(--paper); color: var(--ink); }
.site-header { background: #fff; border-bottom: 2px solid var(--ink); }
.site-header .brand::after { content: ""; width: 92px; height: 18px; margin-inline-start: auto; background: var(--lemon); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--coral); }
.site-header .brand img { mix-blend-mode: multiply; }
.button { background: var(--blue); color: #fff; border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }

.hero-index { padding: 48px 0 64px; background: #fff; border-bottom: 2px solid var(--ink); }
.hero-index-shell { display: grid; grid-template-columns: minmax(480px, .76fr) minmax(0, 1.24fr); gap: 18px; width: var(--wide); margin-inline: auto; }
.hero-index-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 2px solid var(--ink); background: var(--lemon); }
.hero-index .audience { color: var(--blue); }
.hero-index h1 { max-width: 14ch; margin-top: 14px; font-size: clamp(3.4rem, 4.2vw, 5rem); line-height: .87; }
.hero-deck { max-width: 25ch; margin-top: 16px; font-size: clamp(1.35rem, 1.55vw, 1.75rem); font-weight: 720; line-height: 1.05; }
.hero-index .hero-lead { margin-top: 18px; font-size: .88rem; line-height: 1.4; }
.hero-index .hero-cta { margin-top: 22px; transform: translateY(2px); }
.hero-index-stage { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, minmax(86px, 1fr)); gap: 12px; min-width: 0; }
.hero-index-stage figure { min-width: 0; min-height: 0; overflow: hidden; border: 2px solid var(--ink); background: #fff; }
.hero-index-stage img { object-fit: contain; }
.isolated-product-image { object-fit: contain !important; padding: clamp(10px, 1.6vw, 24px); }
figure:has(> .isolated-product-image), figure:has(> picture > .isolated-product-image) { background: transparent; }
.window-concept .isolated-product-image, .material-band .isolated-product-image,
.nielsen-images .isolated-product-image, .catering-stage .isolated-product-image { padding: clamp(8px, 1.1vw, 18px); }
.hero-index-primary { position: relative; grid-column: 1 / 7; grid-row: 1 / 7; background: var(--lilac) !important; }
.hero-index-primary picture { height: 100%; }
.hero-index-primary img { padding: 24px; }
.hero-index-primary figcaption { position: absolute; inset: auto 14px 14px auto; display: grid; place-items: center; width: 42px; height: 42px; background: var(--ink); color: #fff; font: 800 .72rem/1 Arial, sans-serif; direction: ltr; }
.hero-index-detail { grid-column: 7 / 9; }
.hero-index-detail-a { grid-row: 1 / 4; background: var(--mint) !important; }
.hero-index-detail-b { grid-row: 4 / 7; background: #ffd9d1 !important; }

.architecture-band { border-bottom: 2px solid var(--ink); }
.showroom { background: var(--paper); }
.showroom-head { grid-template-columns: .25fr .75fr; align-items: end; padding-bottom: 32px; border-bottom: 2px solid var(--ink); }
.showroom-kicker { color: var(--blue); }
.showroom-head h2 { max-width: 15ch; font-size: clamp(3.8rem, 6.8vw, 7.6rem); line-height: .88; }
.showroom-feature-grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 98px); gap: 12px; }
.showroom-feature { min-height: 0; border: 2px solid var(--ink); background: #fff; }
.showroom-feature img { padding: 18px; }
.showroom-feature-main { grid-column: 1 / 7; grid-row: 1 / 7; min-height: 0; background: var(--lilac); }
.showroom-feature-main img { padding: 0; object-fit: cover; }
.showroom-feature:nth-child(2) { grid-column: 7 / 10; grid-row: 1 / 4; background: var(--lemon); }
.showroom-feature:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 4; background: var(--mint); }
.showroom-feature-wide { grid-column: 7 / 13; grid-row: 4 / 7; background: #ffd9d1; }
.showroom-production { display: grid; grid-template-columns: .36fr .64fr; min-height: 620px; border: 2px solid var(--ink); background: var(--ink); color: #fff; }
.showroom-production-copy { display: flex; flex-direction: column; justify-content: center; padding: 44px; }
.showroom-production-copy span { color: var(--lemon); }
.showroom-production-copy strong { font-size: clamp(2.7rem, 4.5vw, 5rem); }
.showroom-production-stage { aspect-ratio: auto; }
.showroom-production-stage video { object-fit: cover; }
.production-play { background: var(--lemon); border: 2px solid var(--ink); }
.showroom-fold { padding: 46px; border: 2px solid var(--ink); background: var(--mint); }
.showroom-fold-sequence { gap: 12px; }
.showroom-fold-sequence figure { border: 2px solid var(--ink); background: #fff; }
.showroom-catalog-head { padding: 40px 0 20px; border-block: 2px solid var(--ink); }
.showroom-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 10px; }
.showroom-card {
  grid-column: auto;
  grid-template-rows: minmax(0, 1fr) 64px;
  min-width: 0;
  min-height: 0;
  border: 2px solid var(--ink);
}
.showroom-card figcaption {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 8px 8px 0;
  text-align: center;
  line-height: 1.3;
}
.showroom-card img.showroom-clean-cutout,
.showroom-card img.isolated-product-image { padding: clamp(12px, 1.5vw, 22px); }
.showroom-card img.showroom-blend-photo { padding: 12px; mix-blend-mode: multiply; }
.quality-stage-image {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
}
figure:has(> .quality-stage-image) {
  position: relative;
  overflow: hidden;
  background: #fff !important;
}
figure:not(.showroom-card):has(> .quality-stage-image) > .quality-stage-image {
  position: absolute;
  inset: 0;
}
.future-exterior-main > img,
.solution-visual .anatomy > img,
.step-visual-wide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.future-exterior-main > img,
.step-visual-wide > img { object-fit: cover; }
.solution-visual .anatomy > img { object-fit: contain !important; }
.showroom-card[data-quality-stage="true"] {
  padding: 0;
  background: #fff !important;
}
.showroom-card[data-quality-stage="true"] img {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
}
.showroom-card[data-quality-stage="true"] figcaption {
  padding: 8px 12px;
  border-top: 2px solid var(--ink);
  background: #fff;
}
.showroom-card:nth-child(9n+1) { grid-column: span 2; grid-row: span 2; min-height: 0; background: var(--lemon); }
.showroom-card:nth-child(9n+3) { background: var(--mint); }
.showroom-card:nth-child(9n+5) { grid-column: auto; background: var(--lilac); }
.showroom-card:nth-child(9n+7) { background: #ffd8d1; }
.showroom-card[data-source="top-untitled-70-HDR.jpg"] { background: var(--mint); }
.showroom-card[data-source="gallery-Design4-1.jpg"] { background: var(--mint); }
.showroom-card[data-source="gallery-Design4.jpg"] { background: var(--lemon); }
.showroom-card[data-source="gallery-Image_20250324071728.jpg"] { background: #ffd8d1; }
.showroom-card[data-source="website:W033"] { background: var(--lilac); }

.proof h2, .solution h2, .future h2, .process > h2, .logistics > h2,
.qualification h2, .founder h2, .final-action h2 {
  font-size: clamp(2.8rem, 3.5vw, 4rem);
  line-height: .98;
}
.final-action h2 { font-size: clamp(3.2rem, 4vw, 4.6rem); }

.showroom::before, .comparison::before, .proof::before, .solution::before,
.future::before, .process::before, .logistics::before, .qualification::before,
.assurance::before, .pain::before, .founder::before, .faq::before, .final-action::before {
  position: absolute;
  z-index: 2;
  inset: 34px auto auto max(24px, calc((100vw - 1440px) / 2));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  background: inherit;
  font: 900 .76rem/1 Arial, sans-serif;
  direction: ltr;
}
.showroom::before { content: "02"; }
.comparison::before { content: "03"; }
.proof::before { content: "04"; }
.solution::before { content: "05"; }
.future::before { content: "06"; }
.process::before { content: "07"; }
.logistics::before { content: "08"; }
.qualification::before { content: "09"; }
.assurance::before { content: "10"; }
.pain::before { content: "11"; }
.founder::before { content: "12"; }
.faq::before { content: "13"; }
.final-action::before { content: "14"; }

.comparison { background: var(--lemon); }
.comparison-sheet { border: 2px solid var(--ink); background: #fff; }
.comparison-head { background: var(--blue); color: #fff; }
.comparison-head > *, .comparison-row > * { border-color: var(--ink); }
.comparison-row .col-premium { background: var(--mint); }
.premium-margin figure { border: 2px solid var(--ink); background: #fff; }
.proof { background: var(--blue); color: #fff; }
.proof-head { padding-bottom: 34px; border-bottom: 2px solid #fff; }
.nielsen-images figure, .catering-stage figure { border: 2px solid var(--ink); background: #fff; }
.dossier-card, .catering-copy { padding: 30px; border: 2px solid var(--ink); background: var(--lemon); color: var(--ink); }
.proof-cta { background: var(--coral); color: var(--ink); }
.solution { background: var(--lemon); }
.solution-visual figure { border: 2px solid var(--ink); background: #fff; }
.solution-copy h2 { color: var(--blue); }
.future { background: #fff; }
.future-title { color: var(--blue); }
.future-plate { padding: 28px; border: 2px solid var(--ink); }
.future-exterior { background: var(--mint); }
.future-reveal { background: var(--lemon); }
.future-interior { background: var(--lilac); }
.future-plate figure, .material-band figure { border: 2px solid var(--ink); background: #fff; }
.process { background: #fff; }
.process > h2 { color: var(--blue); }
.process-step { grid-template-columns: 72px .75fr 1.25fr; border-width: 2px; }
.process-step::before { display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid var(--ink); background: var(--coral); }
.process-step figure, .step-study { border: 2px solid var(--ink); background: var(--mint); }
.logistics { background: var(--mint); }
.logistics-sheet { border: 2px solid var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--blue); }
.urgency-sheet { box-shadow: 10px 10px 0 var(--coral); }
.storage-sequence figure, .transformation-band figure, .handled-band figure { border: 2px solid var(--ink); background: #fff; }
.qualification { background: #fff; }
.qualification-inner > h2 { color: var(--blue); }
.exclusions { padding: 34px; border: 2px solid var(--ink); background: #ffd8d1; }
.specimen { padding: 20px; border: 2px solid var(--ink); background: var(--mint); }
.gift-specimen { background: var(--lilac); }
.specimen figure, .wall-row figure { border: 2px solid var(--ink); background: #fff; }
.catering-showpiece { height: 620px; min-height: 0; }
.suitability-pairrow .specimen figure { height: 360px; min-height: 0; }
.wall-row { grid-auto-rows: 360px; }
.wall-row figure { height: 360px; min-height: 0; }
.assurance { background: var(--lemon); }
.prototype-pair figure { border: 2px solid var(--ink); background: #fff; }
.pain { background: var(--ink); color: #fff; }
.pain-copy { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.pain-beat { grid-column: 1 / 8; padding: 28px; border: 2px solid #fff; background: #151923; }
.pain-beat:first-child { grid-column: 4 / 13; background: var(--coral); color: var(--ink); border-color: var(--ink); }
.pain-beat:nth-child(3) { grid-column: 7 / 13; background: var(--blue); }
.pain-beat:nth-child(4) { grid-column: 3 / 11; background: #fff; color: var(--ink); }
.founder { background: var(--coral); }
.founder-title { color: #fff; text-shadow: 4px 4px 0 var(--blue); }
.founder-figure { border: 2px solid var(--ink); box-shadow: 14px 14px 0 var(--lemon); }
.founder-copy { padding: 30px; border: 2px solid var(--ink); background: #fff; }
.faq { background: #fff; }
.faq-ledger details { border-width: 2px; }
.final-action { background: var(--blue); color: #fff; }
.final-copy {
  padding: 26px 28px;
  border: 2px solid var(--ink);
  background: var(--lemon);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--coral);
}
.final-copy p:first-child { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.45; }
.final-copy p:last-child { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.35; }
.final-products figure { border: 2px solid var(--ink); background: #fff; }
#lead-form { border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--lemon); }
.form-submit { background: var(--coral); color: var(--ink); }
.site-footer { background: var(--ink); color: #fff; }

@media (max-width: 620px) {
  .final-copy { padding: 22px 18px; box-shadow: 6px 6px 0 var(--coral); }
}

/* Product-led movement: one-time, transform-only choreography. */
:root {
  --hero-drift: 0;
  --motion-ease: cubic-bezier(.2, .76, .26, 1);
  --motion-snap: cubic-bezier(.2, 1, .36, 1);
}

.button,
.production-play {
  transition: transform .22s var(--motion-snap), box-shadow .22s var(--motion-snap), background-color .22s ease;
}

@media (hover: hover) {
  .button:hover,
  .production-play:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
  .button:active,
  .production-play:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
  .showroom-feature img,
  .showroom-card img,
  .future-plate figure img,
  .specimen figure img { transition: transform .65s var(--motion-ease); }
  .showroom-feature:hover img,
  .showroom-card:hover img,
  .future-plate figure:hover img,
  .specimen figure:hover img { transform: scale(1.025); }
}

.motion-ready .arch-product-index .hero-index-copy > *,
.motion-ready .arch-product-index .hero-index-stage > figure {
  transform: translate3d(0, 30px, 0);
  transition: transform .8s var(--motion-snap);
}
.motion-ready.motion-mounted .arch-product-index .hero-index-copy > *,
.motion-ready.motion-mounted .arch-product-index .hero-index-stage > figure { transform: none; }
.motion-ready .arch-product-index .hero-index-copy > :nth-child(1) { transition-delay: .05s; }
.motion-ready .arch-product-index .hero-index-copy > :nth-child(2) { transition-delay: .13s; }
.motion-ready .arch-product-index .hero-index-copy > :nth-child(3) { transition-delay: .21s; }
.motion-ready .arch-product-index .hero-index-copy > :nth-child(4) { transition-delay: .29s; }
.motion-ready .arch-product-index .hero-index-copy > :nth-child(5) { transition-delay: .37s; }
.motion-ready .arch-product-index .hero-index-primary { transform: translate3d(0, 34px, 0) scale(.975); transition-delay: .08s; }
.motion-ready .arch-product-index .hero-index-detail-a { transform: translate3d(-24px, 18px, 0) rotate(-1.2deg); transition-delay: .22s; }
.motion-ready .arch-product-index .hero-index-detail-b { transform: translate3d(24px, 18px, 0) rotate(1.2deg); transition-delay: .31s; }
.motion-ready.motion-mounted .arch-product-index .hero-index-primary,
.motion-ready.motion-mounted .arch-product-index .hero-index-detail-a,
.motion-ready.motion-mounted .arch-product-index .hero-index-detail-b { transform: none; }
.motion-ready .arch-product-index .hero-index-primary img { transform: translate3d(0, calc(var(--hero-drift) * 1px), 0) scale(1.035); }
.motion-ready .arch-product-index .hero-index-detail-a img { transform: translate3d(0, calc(var(--hero-drift) * -.48px), 0) scale(1.025); }
.motion-ready .arch-product-index .hero-index-detail-b img { transform: translate3d(0, calc(var(--hero-drift) * -.7px), 0) scale(1.025); }

/* Keep the first product story fully painted at navigation time. Motion below
   the fold remains intact, but the LCP hero never waits for an entrance tween. */
.motion-ready .arch-product-index .hero-index-copy > *,
.motion-ready .arch-product-index .hero-index-stage > figure,
.motion-ready.motion-mounted .arch-product-index .hero-index-copy > *,
.motion-ready.motion-mounted .arch-product-index .hero-index-stage > figure,
.motion-ready .arch-product-index .hero-index-primary img,
.motion-ready .arch-product-index .hero-index-detail-a img,
.motion-ready .arch-product-index .hero-index-detail-b img {
  transform: none;
  transition: none;
}

.motion-ready .arch-product-index .motion-item {
  transform: translate3d(0, 42px, 0) scale(.985);
  transition: transform .76s var(--motion-ease);
  transition-delay: calc(var(--motion-index, 0) * 55ms);
}
.motion-ready .arch-product-index .motion-item[data-motion-direction="left"] { transform: translate3d(-42px, 0, 0) rotate(-.45deg); }
.motion-ready .arch-product-index .motion-item[data-motion-direction="right"] { transform: translate3d(42px, 0, 0) rotate(.45deg); }
.motion-ready .arch-product-index .motion-item.in { transform: none; }

.motion-ready .arch-product-index .showroom-card img { transform: scale(1.055); transition: transform .9s var(--motion-ease); }
.motion-ready .arch-product-index .showroom-card.in img { transform: scale(1); }
.motion-ready .arch-product-index .showroom-fold-sequence figure:nth-child(1) { transform: translate3d(36px, 0, 0) rotate(1deg); }
.motion-ready .arch-product-index .showroom-fold-sequence figure:nth-child(2) { transform: translate3d(0, 38px, 0) scale(.97); }
.motion-ready .arch-product-index .showroom-fold-sequence figure:nth-child(3) { transform: translate3d(-36px, 0, 0) rotate(-1deg); }
.motion-ready .arch-product-index .showroom-fold-sequence figure.in { transform: none; }
.motion-ready .arch-product-index .reveal-pair figure:first-child { transform: translate3d(36px, 0, 0) rotate(1deg); }
.motion-ready .arch-product-index .reveal-pair figure:last-child { transform: translate3d(-36px, 0, 0) rotate(-1deg); }
.motion-ready .arch-product-index .reveal-pair figure.in { transform: none; }

.motion-ready .arch-product-index .scene::before {
  transform: translate3d(0, 18px, 0) rotate(-12deg) scale(.78);
  transition: transform .55s var(--motion-snap);
}
.motion-ready .arch-product-index .scene.scene-in::before { transform: none; }
.motion-ready .arch-product-index .production-play::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px solid var(--lemon);
  transform: scale(.84);
  transition: transform .45s var(--motion-snap);
  pointer-events: none;
}
.motion-ready .arch-product-index .showroom-production.scene-in .production-play::before,
.motion-ready .arch-product-index .showroom-production-stage.in .production-play::before { transform: scale(1); }

@media (max-width: 620px) {
  .motion-ready .arch-product-index .motion-item[data-motion-direction="left"],
  .motion-ready .arch-product-index .motion-item[data-motion-direction="right"] { transform: translate3d(0, 28px, 0); }
  .motion-ready .arch-product-index .motion-item.in { transform: none; }
  .motion-ready .arch-product-index .hero-index-primary img,
  .motion-ready .arch-product-index .hero-index-detail-a img,
  .motion-ready .arch-product-index .hero-index-detail-b img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arch-product-index *,
  .arch-product-index *::before,
  .arch-product-index *::after { transform: none !important; }
}

@media (max-width: 900px) {
  .hero-index-shell { grid-template-columns: 1fr; }
  .hero-index-copy { order: 2; min-height: 620px; }
  .hero-index-stage { order: 1; grid-template-rows: repeat(8, 84px); }
  .hero-index-primary { grid-column: 1 / 7; grid-row: 1 / 7; }
  .hero-index-detail { grid-column: 7 / 9; }
  .showroom-production { grid-template-columns: 1fr; }
  .showroom-production-copy { min-height: 300px; }
  .showroom-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 230px; }
  .showroom-card { grid-column: auto; }
}

@media (max-width: 620px) {
  .site-header .brand::after { display: none; }
  .hero-index-shell { width: var(--wide); }
  .hero-index-copy { min-height: 0; padding: 24px 20px 30px; }
  .hero-index h1 { font-size: 3.5rem; }
  .hero-index .hero-cta { margin-top: 28px; }
  .hero-index-stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hero-index-primary { grid-column: 1 / -1; grid-row: auto; min-height: 105vw; }
  .hero-index-detail { grid-column: auto; grid-row: auto; min-height: 52vw; }
  .showroom-head { grid-template-columns: 1fr; }
  .showroom-feature-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .showroom-feature-main, .showroom-feature:nth-child(2), .showroom-feature:nth-child(3), .showroom-feature-wide { grid-column: auto; grid-row: auto; min-height: 52vw; }
  .showroom-feature-main { grid-column: 1 / -1; min-height: 96vw; }
  .showroom-feature-wide { grid-column: 1 / -1; }
  .showroom-fold { padding: 28px 14px; }
  .showroom-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
  .showroom-card, .showroom-card:nth-child(9n+5) { grid-column: auto; grid-template-rows: minmax(0, 1fr) 56px; min-height: 0; }
  .showroom-card figcaption { min-height: 56px; padding: 6px 4px 0; }
  .showroom-card:nth-child(9n+1) { grid-column: 1 / -1; grid-row: span 2; min-height: 0; }
  .showroom::before, .comparison::before, .proof::before, .solution::before,
  .future::before, .process::before, .logistics::before, .qualification::before,
  .assurance::before, .pain::before, .founder::before, .faq::before, .final-action::before {
    inset: 18px 16px auto auto;
    width: 38px;
    height: 38px;
  }
  .catering-showpiece { height: 90vw; }
  .suitability-pairrow .specimen figure, .wall-row figure { height: 72vw; }
  .wall-row { grid-auto-rows: 72vw; }
  .pain-copy { display: block; }
  .pain-beat, .pain-beat:first-child, .pain-beat:nth-child(3), .pain-beat:nth-child(4) { margin-top: 18px; }
  .process-step { grid-template-columns: 60px 1fr; }
  .process-step figure, .process-step .step-study { grid-column: 1 / -1; }
}

@media (min-width: 520px) and (max-width: 620px) {
  .hero-index-primary { min-height: 0; height: 520px; }
  .hero-index-detail { min-height: 0; height: 240px; }
  .showroom-production-stage { min-height: 0; height: 520px; aspect-ratio: auto; }
  .showroom-fold-sequence figure { min-height: 0; height: 420px; }
  .showroom-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .showroom-card:nth-child(9n+1) { grid-column: span 2; }
  .future-exterior-main, .future-interior-photo, .catering-stage figure,
  .catering-showpiece, .urgency-visual, .founder-figure { min-height: 0; height: 520px; }
  .material-band figure, .nielsen-images figure, .storage-sequence figure,
  .transformation-band figure, .handled-band figure, .wall-row figure,
  .suitability-pairrow .specimen figure { min-height: 0; height: 360px; }
  .wall-row { grid-auto-rows: 360px; }
}