/* Keukens / brand pages — React parity (flattened from styles.pcss) */

:root {
  --green: var(--kc-green);
  --green-highlight: var(--kc-green-highlight);
  --green-soft: var(--kc-green-soft);
  --secondary: var(--kc-dark-soft);
  --text-soft: var(--kc-muted);
  --background: var(--kc-surface);
  --foreground: var(--kc-text);
  --ease-premium: var(--kc-ease);
  --motion-premium: var(--kc-motion-premium);
}

.site-container { width: var(--kc-shell); margin: 0 auto; }
.brand-page { background: var(--kc-surface); color: var(--kc-text); }

body.kc-keukens-route .site-main { padding-top: 0; }
body.kc-keukens-route .site-main--keukens { min-height: 60vh; }

.brand-eyebrow {
  /* flex (not inline-flex): avoids line-box strut adding ~8px before following blocks */
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--green);
}
.brand-eyebrow--light { color: var(--green-highlight); }
.brand-eyebrow--light .kitchen-eyebrow-mark {
  border-color: rgba(200, 169, 107, 0.42);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(200, 169, 107, 0.15), rgba(139, 197, 64, 0.1));
}

.brand-page-hero { position: relative; min-height: 96vh; overflow: hidden; }
.brand-page-hero--tall { min-height: 96vh; }
.brand-page-hero__media { position: absolute; inset: 0; }
.brand-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.brand-page-hero__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(118deg,rgba(10,20,12,0.92) 0%,rgba(10,20,12,0.5) 46%,rgba(10,20,12,0.72) 100%);
}
.brand-page-hero__radial {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 18% 85%,rgba(139,197,64,0.16) 0%,transparent 52%);
}
.brand-page-hero__vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 180px 60px rgba(5,10,6,0.55);
}
.brand-page-hero__fade {
  pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; z-index: 1; height: 9rem;
  background: linear-gradient(180deg,transparent 0%,var(--kc-surface) 100%);
}
/* React: site-container + min-h-[96vh] + pt-36 pb-24 / md:pt-44 md:pb-28
   Content + padding can exceed 96vh and grow the hero (e.g. ~908px @1440×900). */
.brand-page-hero__content {
  position: relative; z-index: 2; display: flex; min-height: 96vh; flex-direction: column;
  justify-content: flex-end; width: var(--kc-shell); margin: 0 auto;
  padding: 9rem 0 6rem; max-width: none;
}
@media (min-width: 768px) {
  .brand-page-hero__content { padding: 11rem 0 7rem; }
}
/* React styles.pcss mobile brand hero (max-width: 767px) */
@media (max-width: 767px) {
  .brand-page-hero,
  .brand-page-hero__content {
    min-height: max(43rem, 100svh) !important;
  }
  /*
   * BrandPage.tsx uses .brand-page-hero__content → mobile pad calc(safe+7rem)/4.5rem.
   * KeukensOverviewPage / LeichtSeriesPage use plain site-container with Tailwind
   * pt-36 pb-24 / pt-32 pb-20 — they do NOT get the __content mobile pad override.
   */
  .brand-page-hero__content:not(.brand-page-hero__content--overview):not(.brand-page-hero__content--series) {
    justify-content: flex-end;
    padding-top: calc(var(--app-safe-top, 0px) + 7rem) !important;
    padding-bottom: 4.5rem !important;
  }
  .brand-page--overview .brand-page-hero__content--overview {
    justify-content: flex-end;
    padding-top: 9rem !important; /* React pt-36 */
    padding-bottom: 6rem !important; /* React pb-24 */
  }
  .brand-page-hero__content--series {
    justify-content: flex-end;
    padding-top: 8rem !important; /* React pt-32 */
    padding-bottom: 5rem !important; /* React pb-20 */
  }
  .brand-page-hero__badge-strip {
    max-width: calc(100vw - 2rem);
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .brand-page-hero__badge-strip::-webkit-scrollbar { display: none; }
  .brand-page-hero__badge {
    min-width: max-content;
    scroll-snap-align: start;
  }

  /* React styles.pcss @media (max-width:767px) — touch CTA sizing */
  .brand-page .premium-pill-button {
    min-height: 48px;
    padding-left: 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
  .brand-page .premium-pill-button__badge,
  .brand-page .premium-pill-button--sm .premium-pill-button__badge,
  .brand-page .premium-pill-button--md .premium-pill-button__badge {
    width: 2.35rem;
    height: 2.35rem;
  }
}
/* Decorative ghosts/glows can extend past the viewport; match React clip */
body.kc-keukens-route,
body.kc-keukens-route .brand-page {
  overflow-x: clip;
}
html:has(body.kc-keukens-route) {
  overflow-x: hidden;
}
.brand-page-hero--tall .brand-page-hero__content { min-height: 96vh; }
.brand-page-hero__inner { max-width: 54rem; width: 100%; }
.brand-page-hero__title {
  margin-top: 1.5rem; font-family: var(--font-display); font-size: clamp(3rem,6.6vw,5.2rem);
  line-height: 0.98; letter-spacing: -0.025em; color: #fff;
}
.brand-page-hero__title em { font-style: italic; color: var(--green-highlight); }
.brand-page-hero__lede {
  margin-top: 1.75rem; max-width: 36rem; font-size: 1.08rem; font-weight: 300;
  line-height: 1.8; letter-spacing: 0.01em; color: rgba(255,255,255,0.78);
}
.brand-page-hero__actions { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.brand-page-hero__badge-strip-wrap { margin-top: 3.5rem; }
.brand-page-hero__actions .premium-pill-button--ghost {
  border-color: rgba(255,255,255,0.22); color: #fff; background: rgba(255,255,255,0.06);
}
.brand-page-hero__scroll {
  position: absolute; bottom: 2rem; right: 2rem; z-index: 2; display: none;
  width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.7);
  /* React: opacity fade delay 1.4s / 0.8s, then bob y:[0,6,0] 2.2s easeInOut */
  opacity: 0;
  animation:
    kc-hero-scroll-in 0.8s ease 1.4s both,
    kc-hero-bob 2.2s ease-in-out 2.2s infinite;
}
@media (min-width: 768px) { .brand-page-hero__scroll { display: grid; } }
@keyframes kc-hero-scroll-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes kc-hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.keukens-intro-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .keukens-intro-grid { grid-template-columns: 0.9fr 1.1fr; } }
.keukens-section-title {
  margin-top: 1.25rem; font-family: var(--font-display); font-size: clamp(2rem,3.4vw,2.85rem);
  line-height: 1.12; letter-spacing: -0.015em; color: var(--secondary);
}
.keukens-section-title em { font-style: italic; color: var(--green); }
.keukens-section-title--light { color: #fff; }
.keukens-section-title--light em { color: var(--green-highlight); }
.keukens-body-copy { font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--text-soft); }
.keukens-body-copy + .keukens-body-copy { margin-top: 1.25rem; }
.keukens-body-copy--light { color: rgba(255,255,255,0.72); }
.keukens-brands-section {
  border-block: 1px solid rgba(139,197,64,0.1);
  background: linear-gradient(180deg,rgba(139,197,64,0.045) 0%,transparent 100%);
}
.keukens-brands-section__head { margin-bottom: 3rem; }
.keukens-brand-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .keukens-brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .keukens-brand-grid { grid-template-columns: repeat(3, 1fr); } }
.keukens-brand-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 1.5rem; border: 1px solid rgba(139,197,64,0.14);
  background: rgba(255,255,255,0.72); text-decoration: none; color: inherit;
  transition: transform 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium), border-color 0.45s;
}
.keukens-brand-card:hover {
  transform: translateY(-4px); border-color: rgba(139,197,64,0.35);
  box-shadow: 0 28px 60px -36px rgba(20,40,18,0.45);
}
.keukens-brand-card__media { position: relative; height: 12.5rem; overflow: hidden; }
.keukens-brand-card__image {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-premium);
}
.keukens-brand-card:hover .keukens-brand-card__image { transform: scale(1.05); }
.keukens-brand-card__body { padding: 1.35rem 1.4rem 1.55rem; }
.keukens-brand-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.keukens-brand-card__country {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green);
}
.keukens-brand-card__arrow {
  width: 1rem; height: 1rem; color: var(--text-soft);
  transition: transform 0.3s var(--ease-premium), color 0.3s;
}
.keukens-brand-card:hover .keukens-brand-card__arrow { color: var(--green); transform: translate(2px,-2px); }
.keukens-brand-card__name {
  margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--secondary);
}
.keukens-brand-card__tagline {
  margin-top: 0.5rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-soft);
}
.keukens-brand-card__desc {
  margin-top: 1rem; font-size: 0.95rem; font-weight: 300; line-height: 1.7; color: var(--text-soft);
}
.keukens-value-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .keukens-value-grid { grid-template-columns: repeat(2, 1fr); } }
.keukens-value-card {
  position: relative; overflow: hidden; border-radius: 1.6rem;
  border: 1px solid rgba(139,197,64,0.14); background: rgba(255,255,255,0.75);
  padding: 2rem; color: var(--secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 18px 44px -38px rgba(20,40,18,0.4);
  transition: transform 0.5s var(--ease-premium), border-color 0.5s, box-shadow 0.5s;
}
.keukens-value-card:hover {
  transform: translateY(-4px); border-color: rgba(139,197,64,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 30px 64px -34px rgba(20,40,18,0.48);
}
.keukens-value-card::after {
  content: ""; position: absolute; right: -2.2rem; top: -2.2rem; width: 7rem; height: 7rem;
  border-radius: 9999px; background: radial-gradient(circle, rgba(139,197,64,0.1) 0%, transparent 68%);
  pointer-events: none;
}
.keukens-value-card--dark {
  background: linear-gradient(145deg, #142010 0%, #2a4718 100%);
  border-color: rgba(168,217,90,0.2); color: #fff;
}
.keukens-value-card__num {
  font-family: var(--font-display); font-style: italic; font-size: 2rem; line-height: 1; color: var(--green);
}
.keukens-value-card--dark .keukens-value-card__num { color: var(--green-highlight); }
.keukens-value-card h3 {
  margin-top: 2rem; font-family: var(--font-display); font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.01em;
}
.keukens-value-card--dark h3 { color: #fff; }
.keukens-value-card p { margin-top: 1.25rem; font-size: 0.98rem; font-weight: 300; line-height: 1.75; opacity: 0.8; }
.keukens-value-card--dark p { color: rgba(255,255,255,0.82); }
.keukens-custom-wrap { max-width: 52rem; }
.keukens-custom-wrap .keukens-body-copy:first-of-type { margin-top: 2rem; }
.keukens-faq-grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .keukens-faq-grid { grid-template-columns: 0.85fr 1.15fr; } }
.keukens-advisor-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .keukens-advisor-grid { grid-template-columns: repeat(3, 1fr); } }
.keukens-partnership-copy { position: relative; z-index: 1; max-width: 48rem; }
.keukens-partnership-copy .premium-pill-button { margin-top: 2rem; }
.section-shell--border-top { border-top: 1px solid rgba(139,197,64,0.1); }
.section-shell--soft-green { background: rgba(139,197,64,0.03); }

/* React AccordionTrigger is display:flex; summary defaults to list-item (+~6px/item). */
.brand-faq__item > summary.brand-faq__trigger,
.brand-faq__trigger {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100%;
	box-sizing: border-box;
	list-style: none;
	cursor: pointer;
	/* React global button { letter-spacing: 0.15em; text-transform: uppercase } */
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.brand-faq__item > summary {
	list-style: none;
	cursor: pointer;
}
.brand-faq__item > summary::-webkit-details-marker {
	display: none;
}
.brand-faq__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	display: flex;
	width: 100%;
}
.brand-faq__heading .brand-faq__trigger {
	flex: 1;
	border: 0;
	background: transparent;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
}
.brand-faq__heading .brand-faq__trigger:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
	border-radius: 12px;
}
.brand-faq__panel[hidden] {
	display: none !important;
}
.brand-faq__item[open] {
  border-color: rgba(139,197,64,0.28);
  box-shadow: 0 18px 44px -32px rgba(20,40,18,0.35);
}
.brand-faq__item[open] .brand-faq__num { color: var(--green); }
.brand-faq__item[open] summary svg { transform: rotate(180deg); }
.brand-faq__contact-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; }
.brand-faq__contact-label {
  display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.brand-faq__contact-phone {
  display: block; margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.4rem;
  color: #fff; text-decoration: none;
}
.brand-faq__question { flex: 1; }
.brand-advisor-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
.brand-advisor-card h3 {
  margin-top: 2rem; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--secondary);
}
.brand-advisor-card p { margin-top: 1.25rem; }
.brand-showroom-cta .keukens-body-copy { margin-top: 1.25rem; }

[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.65s var(--ease-premium), transform 0.65s var(--ease-premium);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.brand-page [data-reveal] {
  transform: translateY(18px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* React imageReveal: opacity 0→1, scale 1.05→1, blur 10→0, duration 1.2s */
.brand-page .brand-page-intro__frame[data-reveal] {
  transform: scale(1.05);
  filter: blur(10px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-page .brand-page-intro__frame[data-reveal].is-visible {
  transform: none;
  filter: blur(0);
}

/* React pillars: y:28, duration 0.7, delay index*0.12 */
.brand-page .brand-pillar-card[data-reveal] {
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* React gallery items + CTA tile: y:28, duration 0.8, delay index*0.1 / 0.4 */
.brand-page .brand-gallery__item[data-reveal],
.brand-page .brand-gallery__cta-tile[data-reveal] {
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* React heroStagger: delayChildren 0.2s, staggerChildren 0.11s, fadeUp y:18 duration 0.5s */
@keyframes kc-brand-hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.brand-page-hero [data-hero-stagger] {
  opacity: 0;
  animation: kc-brand-hero-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.brand-page-hero [data-hero-stagger]:nth-child(1) { animation-delay: 0.2s; }
.brand-page-hero [data-hero-stagger]:nth-child(2) { animation-delay: 0.31s; }
.brand-page-hero [data-hero-stagger]:nth-child(3) { animation-delay: 0.42s; }
.brand-page-hero [data-hero-stagger]:nth-child(4) { animation-delay: 0.53s; }
.brand-page-hero [data-hero-stagger]:nth-child(5) { animation-delay: 0.64s; }
.brand-page-hero [data-hero-stagger]:nth-child(6) { animation-delay: 0.75s; }
.brand-page-hero [data-hero-stagger]:nth-child(7) { animation-delay: 0.86s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; filter: none; }
  .brand-page-hero__scroll { animation: none; opacity: 1; }
  .brand-page-hero [data-hero-stagger] {
    opacity: 1;
    animation: none;
  }
  .brand-page .brand-page-intro__frame[data-reveal],
  .brand-page .brand-pillar-card[data-reveal],
  .brand-page .brand-gallery__item[data-reveal],
  .brand-page .brand-gallery__cta-tile[data-reveal] {
    filter: none;
    transform: none;
  }
}


.kitchen-eyebrow-mark {
  position: relative;
  display: inline-grid;
  width: 1.85rem;
  height: 1.6rem;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(200, 169, 107, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(200, 169, 107, 0.1), rgba(139, 197, 64, 0.06));
  color: #c8a96b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 18px -14px rgba(200, 169, 107, 0.72);
}

/* ── Brand kitchen pages ───────────────────────────────────── */
.brand-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--green);
}

.brand-eyebrow--light {
  color: var(--green-highlight);
}

.brand-eyebrow--light .kitchen-eyebrow-mark {
  border-color: rgba(200, 169, 107, 0.42);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(200, 169, 107, 0.15), rgba(139, 197, 64, 0.1));
}

.brand-page-hero__logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 16px 44px -20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.brand-page-hero__badge-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 20, 12, 0.42);
  backdrop-filter: blur(18px);
  box-shadow:
    0 18px 48px -24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-page-hero__badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.6rem;
  box-sizing: border-box;
  line-height: 1.5;
}

.brand-page-hero__badge-divider {
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
}

.brand-page-hero__badge-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}

.brand-page-hero__badge-label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.brand-page-intro__frame {
  position: relative;
}

/* Offset hairline frame behind the image — gallery-plinth effect */
.brand-page-intro__frame::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid rgba(139, 197, 64, 0.28);
  border-radius: 30px;
  pointer-events: none;
}

.brand-page-intro__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 40px 100px -44px rgba(47, 82, 24, 0.4);
}

.brand-page-intro__image {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 1s var(--ease-premium);
}

.brand-page-intro__frame:hover .brand-page-intro__image {
  transform: scale(1.035);
}

.brand-page-intro__glow {
  pointer-events: none;
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 45%;
  background: radial-gradient(ellipse at center, rgba(139, 197, 64, 0.2) 0%, transparent 70%);
}

/* Rotating heritage roundel — overlaps the image corner */
.brand-page-intro__roundel {
  position: absolute;
  top: -2.4rem;
  right: -1.6rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.4rem;
  height: 8.4rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 217, 90, 0.3);
  background:
    radial-gradient(ellipse at 30% 25%, rgba(168, 217, 90, 0.16) 0%, transparent 55%),
    linear-gradient(150deg, #16240f 0%, #2b4a17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 54px -24px rgba(10, 20, 12, 0.6);
}

@media (max-width: 1023px) {
  .brand-page-intro__roundel {
    top: -1.6rem;
    right: -0.4rem;
    width: 7rem;
    height: 7rem;
  }
}

.brand-page-intro__roundel-svg {
  width: 100%;
  height: 100%;
  animation: brand-roundel-spin 22s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brand-page-intro__roundel-svg {
    animation: none;
  }
}

.brand-page-intro__roundel-text {
  font-size: 7.3px;
  font-weight: 500;
  letter-spacing: 0.24em;
  fill: rgba(255, 255, 255, 0.82);
}

.brand-page-intro__roundel-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-highlight);
}

.brand-page-intro__caption {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 78%;
  padding: 0.9rem 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -20px rgba(23, 25, 28, 0.3);
}

.brand-page-intro__caption-tag {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}

.brand-page-intro__caption-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--secondary);
}

.brand-pillar-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  border: 1px solid rgba(139, 197, 64, 0.14);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 60px -40px rgba(47, 82, 24, 0.32);
  transition:
    transform 0.55s var(--ease-premium),
    box-shadow 0.55s var(--ease-premium),
    border-color 0.55s var(--ease-premium);
}

.brand-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 197, 64, 0.32);
  box-shadow: 0 38px 88px -34px rgba(47, 82, 24, 0.4);
}

.brand-pillar-card__media {
  position: relative;
  height: 11.5rem;
  overflow: hidden;
}

/* Soft scrim so the number always reads */
.brand-pillar-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 12, 0.22) 0%,
    transparent 40%,
    rgba(10, 20, 12, 0.1) 100%
  );
  z-index: 1;
}

.brand-pillar-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition:
    transform 1s var(--ease-premium),
    filter 1s var(--ease-premium);
}

.brand-pillar-card:hover .brand-pillar-card__photo {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.brand-pillar-card__num {
  position: absolute;
  top: 0.95rem;
  right: 1.25rem;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.brand-pillar-card__body {
  position: relative;
  flex: 1;
  padding: 0 1.9rem 2.1rem;
}

/* Floating icon badge — bridges photo and content */
.brand-pillar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-top: -1.55rem;
  position: relative;
  z-index: 2;
  border-radius: 16px;
  color: var(--green);
  background: #fff;
  border: 1px solid rgba(139, 197, 64, 0.22);
  box-shadow: 0 14px 34px -16px rgba(47, 82, 24, 0.4);
  transition:
    background-color 0.5s var(--ease-premium),
    color 0.5s var(--ease-premium),
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium);
}

.brand-pillar-card:hover .brand-pillar-card__icon {
  background: var(--green);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -14px rgba(139, 197, 64, 0.55);
}

.brand-pillar-card__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(
    90deg,
    var(--green) 0%,
    var(--green-highlight) 60%,
    transparent 100%
  );
  transition: transform 0.6s var(--ease-premium);
}

.brand-pillar-card:hover .brand-pillar-card__line {
  transform: scaleX(1);
}

.brand-partnership {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  border-radius: 32px;
  border: 1px solid rgba(168, 217, 90, 0.22);
  background:
    radial-gradient(ellipse at 88% 8%, rgba(168, 217, 90, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 5% 95%, rgba(139, 197, 64, 0.1) 0%, transparent 45%),
    linear-gradient(135deg, #101d0c 0%, #1e3512 55%, #142410 100%);
  padding: 2.5rem 2.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 40px 100px -52px rgba(10, 20, 12, 0.75);
}

@media (min-width: 1024px) {
  .brand-partnership {
    grid-template-columns: 1.15fr 0.85fr;
    padding: 3.5rem;
    gap: 3.75rem;
  }
}

/* Oversized ghost brand word — editorial depth */
.brand-partnership__ghost {
  position: absolute;
  right: -1.2rem;
  bottom: -2.8rem;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(5rem, 12vw, 9.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.04);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.brand-partnership__highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.brand-partnership__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 217, 90, 0.45);
  background: rgba(168, 217, 90, 0.1);
  color: var(--green-highlight);
  transition:
    background-color 0.4s var(--ease-premium),
    color 0.4s var(--ease-premium);
}

.brand-partnership__highlight:hover .brand-partnership__check {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* Stats as a joined 2×2 glass grid with hairline dividers */
.brand-partnership__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 64px -40px rgba(0, 0, 0, 0.5);
}

.brand-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.6rem 1.5rem;
  transition: background-color 0.4s var(--ease-premium);
}

.brand-stat-cell:hover {
  background: rgba(168, 217, 90, 0.08);
}

.brand-stat-cell:nth-child(even) {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-stat-cell:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-stat-cell__value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}

.brand-stat-cell__label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.brand-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .brand-gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 9.2rem;
    gap: 1.15rem;
  }
}

.brand-gallery__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  min-height: 260px;
  box-shadow: 0 26px 64px -42px rgba(10, 20, 12, 0.45);
}

/* Jewel detail — inner hairline that catches the eye on photography */
.brand-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 17px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  transition: opacity 0.6s var(--ease-premium);
}

.brand-gallery__item:hover::after {
  opacity: 1;
}

/* Permanent soft scrim for depth + readability */
.brand-gallery__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 12, 0.12) 0%,
    transparent 30%,
    transparent 55%,
    rgba(10, 20, 12, 0.42) 100%
  );
  transition: background-color 0.6s var(--ease-premium);
}

@media (min-width: 768px) {
  .brand-gallery__item--large {
    grid-column: span 7;
    grid-row: span 4;
    min-height: 0;
  }

  .brand-gallery__item--medium {
    grid-column: span 5;
    grid-row: span 2;
    min-height: 0;
  }

  .brand-gallery__item--wide {
    grid-column: span 8;
    grid-row: span 2;
    min-height: 0;
  }
}

.brand-gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition:
    transform 1.1s var(--ease-premium),
    filter 1.1s var(--ease-premium);
}

.brand-gallery__item:hover .brand-gallery__image {
  transform: scale(1.055);
  filter: saturate(1.06);
}

.brand-gallery__index {
  position: absolute;
  top: 1.15rem;
  right: 1.35rem;
  z-index: 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Floating glass caption chip — replaces the heavy full-width gradient bar */
.brand-gallery__caption {
  position: absolute;
  left: 1.15rem;
  bottom: 1.15rem;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: calc(100% - 5.5rem);
  padding: 0.8rem 1.15rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(252, 251, 248, 0.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -22px rgba(10, 20, 12, 0.5);
  transform: translateY(0);
  transition:
    transform 0.6s var(--ease-premium),
    box-shadow 0.6s var(--ease-premium);
}

.brand-gallery__item:hover .brand-gallery__caption {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px -24px rgba(10, 20, 12, 0.55);
}

.brand-gallery__tag {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-soft);
}

.brand-gallery__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--secondary);
}

/* Arrow chip — appears on hover, bottom-right */
.brand-gallery__arrow {
  position: absolute;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 20, 12, 0.5);
  backdrop-filter: blur(12px);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s var(--ease-premium),
    transform 0.5s var(--ease-premium),
    background-color 0.5s var(--ease-premium);
}

.brand-gallery__item:hover .brand-gallery__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* Closing CTA tile — dark green invitation card inside the grid */
.brand-gallery__cta-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 260px;
  padding: 1.8rem;
  border-radius: 24px;
  border: 1px solid rgba(168, 217, 90, 0.26);
  background:
    radial-gradient(ellipse at 85% 15%, rgba(168, 217, 90, 0.14) 0%, transparent 55%),
    linear-gradient(150deg, #16240f 0%, #2b4a17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 64px -42px rgba(10, 20, 12, 0.6);
  transition:
    transform 0.55s var(--ease-premium),
    box-shadow 0.55s var(--ease-premium),
    border-color 0.55s var(--ease-premium);
}

@media (min-width: 768px) {
  .brand-gallery__cta-tile {
    grid-column: span 4;
    grid-row: span 2;
    min-height: 0;
  }
}

.brand-gallery__cta-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 217, 90, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 34px 80px -40px rgba(10, 20, 12, 0.7);
}

.brand-gallery__cta-ghost {
  position: absolute;
  right: -0.6rem;
  top: -1.6rem;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.045);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  transition: color 0.6s var(--ease-premium);
}

.brand-gallery__cta-tile:hover .brand-gallery__cta-ghost {
  color: rgba(255, 255, 255, 0.07);
}

.brand-gallery__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  border: 1px solid rgba(168, 217, 90, 0.4);
  color: var(--green-highlight);
  background: rgba(168, 217, 90, 0.08);
  transition:
    background-color 0.5s var(--ease-premium),
    color 0.5s var(--ease-premium),
    transform 0.5s var(--ease-premium);
}

.brand-gallery__cta-tile:hover .brand-gallery__cta-arrow {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translate(2px, -2px);
}

.brand-custom-band {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0;
  /* Original React remote 404 — verified local showroom equivalent */
  background:
    linear-gradient(125deg, rgba(10, 20, 12, 0.96) 0%, rgba(47, 82, 24, 0.9) 100%),
    url("../img/brands/aikuchen-showroom-1.webp")
      center / cover no-repeat;
  background-blend-mode: multiply;
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .brand-custom-band {
    background-attachment: scroll;
    padding: 5rem 0;
  }
}

/* Oversized ghost word — editorial depth marker */
.brand-custom-band__ghost {
  position: absolute;
  right: -1rem;
  bottom: -2.4rem;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6rem, 16vw, 13rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.035);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.brand-custom-band__inner {
  max-width: 46rem;
}

.brand-faq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(139, 197, 64, 0.12) !important;
  border-radius: 20px !important;
  margin-bottom: 0.8rem;
  padding: 0 0.5rem 0 0.15rem;
  background: rgba(255, 255, 255, 0.72);
  transition:
    border-color 0.45s var(--ease-premium),
    box-shadow 0.45s var(--ease-premium),
    background-color 0.45s var(--ease-premium),
    transform 0.45s var(--ease-premium);
}

/* Left accent bar — revealed when open */
.brand-faq__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-highlight) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-premium);
}

.brand-faq__item:hover {
  border-color: rgba(139, 197, 64, 0.24) !important;
  background: rgba(255, 255, 255, 0.9);
}

.brand-faq__item[data-state="open"],
.brand-faq__item[open] {
  border-color: rgba(139, 197, 64, 0.34) !important;
  background: #fff;
  box-shadow: 0 24px 60px -32px rgba(47, 82, 24, 0.32);
  transform: translateY(-1px);
}

.brand-faq__item[data-state="open"]::before,
.brand-faq__item[open]::before {
  opacity: 1;
}

.brand-faq__trigger {
  gap: 0.9rem !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--secondary) !important;
  padding: 1.3rem 1rem 1.3rem 1.3rem !important;
  text-decoration: none !important;
  transition: color 0.35s var(--ease-premium) !important;
}

.brand-faq__trigger:hover {
  text-decoration: none !important;
  color: var(--green-soft) !important;
}

/* Chevron as a circled chip that fills green when open */
.brand-faq__trigger > svg {
  width: 2rem !important;
  height: 2rem !important;
  padding: 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 197, 64, 0.28);
  background: rgba(139, 197, 64, 0.07);
  color: var(--green) !important;
  flex-shrink: 0 !important;
  transition:
    transform 0.4s var(--ease-premium),
    background-color 0.4s var(--ease-premium),
    color 0.4s var(--ease-premium),
    border-color 0.4s var(--ease-premium) !important;
}

.brand-faq__item[data-state="open"] .brand-faq__trigger > svg,
.brand-faq__item[open] .brand-faq__trigger > svg {
  background: var(--green);
  border-color: var(--green);
  color: #fff !important;
}

.brand-faq__num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--green);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease-premium);
}

.brand-faq__item[data-state="open"] .brand-faq__num,
.brand-faq__item[open] .brand-faq__num {
  opacity: 1;
}

.brand-faq__content {
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  line-height: 1.78 !important;
  letter-spacing: 0.01em !important;
  color: var(--text-soft) !important;
  padding: 0 3.4rem 1.35rem 3.3rem !important;
}

/* Dark contact card — echoes the partnership panel */
.brand-faq__contact-card {
  position: relative;
  overflow: hidden;
  margin-top: 2.25rem;
  padding: 1.75rem 1.8rem;
  border-radius: 24px;
  border: 1px solid rgba(168, 217, 90, 0.24);
  background:
    radial-gradient(ellipse at 85% 10%, rgba(168, 217, 90, 0.14) 0%, transparent 55%),
    linear-gradient(150deg, #16240f 0%, #2b4a17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 28px 68px -40px rgba(10, 20, 12, 0.65);
}

.brand-faq__contact-ghost {
  position: absolute;
  right: 0.4rem;
  top: -2.6rem;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  user-select: none;
  pointer-events: none;
}

.brand-faq__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--green-highlight);
  background: rgba(168, 217, 90, 0.1);
  border: 1px solid rgba(168, 217, 90, 0.35);
}

.brand-advisor-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(139, 197, 64, 0.14);
  background: rgba(255, 255, 255, 0.92);
  padding: 2rem;
  box-shadow: 0 16px 48px -34px rgba(47, 82, 24, 0.24);
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    border-color 0.5s var(--ease-premium);
}

.brand-advisor-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--green) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-premium);
}

.brand-advisor-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 197, 64, 0.28);
  box-shadow: 0 28px 70px -30px rgba(47, 82, 24, 0.32);
}

.brand-advisor-card:hover::before {
  opacity: 1;
}

.brand-advisor-card__index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(139, 197, 64, 0.22);
}

.brand-advisor-card__role {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}

.brand-advisor-card__email {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--green);
  transition: gap 0.35s var(--ease-premium);
}

.brand-advisor-card:hover .brand-advisor-card__email {
  gap: 0.65rem;
}

.brand-showroom-cta {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 6rem;
  background: linear-gradient(135deg, #142010 0%, #2f5218 48%, #1a2f12 100%);
}

.brand-showroom-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(168, 217, 90, 0.12) 0%, transparent 55%);
  pointer-events: none;
}

.brand-showroom-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 28px;
  border: 1px solid rgba(168, 217, 90, 0.22);
  padding: 2.25rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 80px -40px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .brand-showroom-cta__inner {
    flex-direction: row;
    align-items: center;
    padding: 3rem 3.25rem;
  }
}

/* ─── Brand series grid (Leicht) ─────────────────────────────── */
.brand-series__grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .brand-series__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .brand-series__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .brand-series__card--featured {
    grid-column: span 2;
    min-height: 22rem;
  }
}

.brand-series__card {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  min-height: 16rem;
  border: 1px solid rgba(139, 197, 64, 0.12);
  background: #0f1a12;
}

.brand-series__link {
  display: block;
  position: relative;
  height: 100%;
  min-height: inherit;
}

.brand-series__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform 0.9s var(--ease-premium);
}

.brand-series__card:hover .brand-series__image {
  transform: scale(1.06);
}

.brand-series__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8, 14, 10, 0.88) 100%);
  pointer-events: none;
}

.brand-series__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.25rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.brand-series__tag {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-highlight);
}

.brand-series__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
}

.brand-series__cta {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s var(--ease-premium),
    transform 0.4s var(--ease-premium),
    color 0.4s;
}

.brand-series__card:hover .brand-series__cta {
  opacity: 1;
  transform: translateY(0);
  color: var(--green-highlight);
}

/* ─── Catalog strip ──────────────────────────────────────────── */
.brand-catalogs {
  display: grid;
  gap: 1.75rem;
  border-radius: 1.6rem;
  border: 1px solid rgba(139, 197, 64, 0.14);
  background: rgba(255, 255, 255, 0.55);
  padding: 1.75rem;
}

@media (min-width: 900px) {
  .brand-catalogs {
    grid-template-columns: 0.7fr 1.3fr;
    align-items: center;
    padding: 2rem 2.25rem;
  }
}

.brand-catalogs__list {
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .brand-catalogs__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.brand-catalogs__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(139, 197, 64, 0.12);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.9rem 1rem;
  transition:
    border-color 0.35s,
    transform 0.35s,
    box-shadow 0.35s;
}

.brand-catalogs__item:hover {
  border-color: rgba(139, 197, 64, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(20, 40, 18, 0.35);
}

.brand-catalogs__title {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--secondary);
}

.brand-catalogs__subtitle {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--text-soft);
}

/* ─── Keukens overview ───────────────────────────────────────── */
.keukens-brand-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .keukens-brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .keukens-brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.keukens-brand-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(139, 197, 64, 0.14);
  background: rgba(255, 255, 255, 0.72);
  transition:
    transform 0.45s var(--ease-premium),
    box-shadow 0.45s var(--ease-premium),
    border-color 0.45s;
}

.keukens-brand-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 197, 64, 0.35);
  box-shadow: 0 28px 60px -36px rgba(20, 40, 18, 0.45);
}

.keukens-brand-card__media {
  position: relative;
  height: 12.5rem;
  overflow: hidden;
}

.keukens-brand-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-premium);
}

.keukens-brand-card:hover .keukens-brand-card__image {
  transform: scale(1.05);
}

.keukens-brand-card__body {
  padding: 1.35rem 1.4rem 1.55rem;
}

.keukens-value-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid rgba(139, 197, 64, 0.14);
  background: rgba(255, 255, 255, 0.75);
  padding: 2rem;
  color: var(--secondary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 18px 44px -38px rgba(20, 40, 18, 0.4);
  transition:
    transform 0.5s var(--ease-premium),
    border-color 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium);
}

.keukens-value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 197, 64, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 30px 64px -34px rgba(20, 40, 18, 0.48);
}

/* Faint oversized index anchors the corner */
.keukens-value-card::after {
  content: "";
  position: absolute;
  right: -2.2rem;
  top: -2.2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(139, 197, 64, 0.1) 0%, transparent 68%);
  pointer-events: none;
}

.keukens-value-card--dark {
  background: linear-gradient(145deg, #142010 0%, #2a4718 100%);
  border-color: rgba(168, 217, 90, 0.2);
  color: #fff;
}

.keukens-value-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--green);
}

.keukens-value-card--dark .keukens-value-card__num {
  color: var(--green-highlight);
}

/* Global heading color would otherwise win over the card's white text */
.keukens-value-card--dark h3 {
  color: #fff;
}

.keukens-value-card--dark p {
  color: rgba(255, 255, 255, 0.82);
}

/* BrandPage layout helpers (not fully covered by @layer extract) */
.brand-page--leicht .brand-page-hero,
.brand-page--leicht .brand-page-hero__content {
  min-height: 96vh;
}
.brand-page-hero__media[data-brand-hero-parallax] {
  will-change: transform, opacity;
  transition: opacity 0.05s linear;
}
.brand-page-hero__identity {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
/* Keep React white logo plate (do not override with glass). */
.brand-page-hero__logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 16px 44px -20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
}
.brand-page-hero__logo {
  height: 2rem;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
@media (min-width: 768px) {
  .brand-page-hero__logo { height: 2.25rem; }
}
.brand-page-hero__identity-divider {
  display: none;
  width: 1px;
  height: 2.25rem;
  background: rgba(255, 255, 255, 0.18);
}
.brand-page-hero__identity-meta {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
}
@media (min-width: 640px) {
  .brand-page-hero__identity-divider,
  .brand-page-hero__identity-meta { display: flex; }
  .brand-page-hero__identity-divider { display: block; }
}
.brand-page-hero__identity-name {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.brand-page-hero__identity-country {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.brand-page-intro {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .brand-page-intro { grid-template-columns: 1fr 1.05fr; gap: 5rem; }
}
.brand-page-intro__lead {
  margin-top: 2rem;
  border-left: 2px solid var(--green);
  padding-left: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.65;
  color: #111;
}
.brand-page-intro__signature {
  display: flex;
  align-items: stretch;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(139, 197, 64, 0.16);
}
.brand-page-intro__sig {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: 2rem;
}
.brand-page-intro__sig--border {
  border-left: 1px solid rgba(139, 197, 64, 0.18);
  padding-left: 2rem;
  padding-right: 2rem;
}
.brand-page-intro__sig-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--green);
}
.brand-page-intro__sig-label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.brand-section-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .brand-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.brand-section-head__lead {
  max-width: 21rem;
  margin: 0;
}
.brand-pillars-section {
  border-block: 1px solid rgba(139, 197, 64, 0.1);
  background: linear-gradient(180deg, rgba(139, 197, 64, 0.045) 0%, transparent 100%);
}
.brand-pillars-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .brand-pillars-grid { grid-template-columns: repeat(3, 1fr); }
}
.brand-pillar-card h3 {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--secondary);
}
.brand-pillar-card p {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-soft);
}
.section-shell--tight-top { padding-top: 0; }
.keukens-section-title--sm {
  font-size: clamp(1.4rem, 2.4vw, 1.55rem);
}
.brand-catalogs__icon,
.brand-catalogs__arrow {
  flex-shrink: 0;
  color: var(--green);
}
.brand-catalogs__arrow { margin-left: auto; opacity: 0.5; }
.brand-partnership__highlights {
  display: grid;
  gap: 1rem;
  margin-top: 2.25rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 640px) {
  .brand-partnership__highlights { grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; }
}
.brand-partnership__note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.48);
}
.brand-gallery-head-meta {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}
.brand-gallery-count {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(139, 197, 64, 0.2);
}
@media (min-width: 768px) {
  .brand-gallery-count { display: flex; }
}
.brand-gallery-count__value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--green);
}
.brand-gallery-count__label {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.brand-gallery__cta-copy { position: relative; z-index: 1; }
.brand-gallery__cta-copy h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.15;
  color: #fff;
}
.brand-gallery__cta-copy h3 em { font-style: italic; color: var(--green-highlight); }
.brand-gallery__cta-copy p {
  margin-top: 0.75rem;
  max-width: 16rem;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}
.brand-gallery__cta-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.keukens-body-copy--muted { color: rgba(255, 255, 255, 0.58); }
.brand-custom-band__inner .premium-pill-button { margin-top: 2.5rem; }
.brand-faq__contact-divider {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 1.25rem 0;
  background: rgba(255, 255, 255, 0.12);
}
.brand-faq__contact-email {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--green-highlight);
  text-decoration: none;
}
.brand-faq__contact-hours {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  font-size: 0.76rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.45);
}
.keukens-advisor-grid--2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .keukens-advisor-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
/* React BrandPage / Overview / Series showroom H2 */
.brand-showroom-cta__copy {
  max-width: 34rem;
  width: 100%;
}
.brand-showroom-cta__title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}
.brand-showroom-cta__title em {
  font-style: italic;
  color: var(--green-highlight);
}
.brand-showroom-cta__title--series {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  letter-spacing: -0.015em;
}
.brand-showroom-cta .keukens-body-copy {
  margin-top: 1.25rem;
}
.brand-showroom-cta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.75rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.52);
}
.brand-showroom-cta__meta-divider {
  display: none;
  width: 1px;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.25);
}
@media (min-width: 640px) {
  .brand-showroom-cta__meta-divider { display: block; }
}
/* React BrandPage: shrink-0 pill + uppercase tracking → narrower copy wrap @768 */
.brand-page:not(.brand-page--overview):not(.brand-page--leicht-series) .brand-showroom-cta__action {
  flex-shrink: 0;
}
.brand-page:not(.brand-page--overview):not(.brand-page--leicht-series) .brand-showroom-cta .premium-pill-button {
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ─── Keukens overview (KeukensOverviewPage.tsx) ─────────────── */
/* React: min-h-[88vh], max-w-[52rem], clamp(3rem,6.5vw,5rem), pt-36 pb-24 (no md bump) */
.brand-page--overview .brand-page-hero,
.brand-page--overview .brand-page-hero__content--overview {
  min-height: 88vh;
}
.brand-page--overview .brand-page-hero__content--overview {
  padding: 9rem 0 6rem;
}
@media (min-width: 768px) {
  .brand-page--overview .brand-page-hero__content--overview {
    padding: 9rem 0 6rem;
  }
}
.brand-page-hero__inner--overview {
  max-width: 52rem;
  width: 100%;
}
.brand-page-hero__title--overview {
  font-size: clamp(3rem, 6.5vw, 5rem);
}
.brand-page-hero__lede--overview {
  letter-spacing: normal;
}

/* ─── Leicht series pages (LeichtSeriesPage.tsx) ─────────────── */
.brand-page-hero--series,
.brand-page-hero__content--series {
  min-height: 82vh;
}
.brand-page-hero__content--series {
  /* React: site-container + left-aligned max-w-[48rem] (not centered) */
  padding-top: 8rem;
  padding-bottom: 5rem;
  justify-content: flex-end;
}
.brand-page-hero__inner--series {
  max-width: 48rem;
  width: 100%;
}
.brand-page-hero__gradient--series {
  background: linear-gradient(118deg, rgba(10,20,12,0.9) 0%, rgba(10,20,12,0.48) 50%, rgba(10,20,12,0.72) 100%);
}
.brand-page-hero__fade--series {
  height: 8rem;
}
.brand-page-hero__title--series {
  margin-top: 1.25rem;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand-page-hero__lede--series {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}
.brand-series-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.brand-series-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-premium);
}
.brand-series-breadcrumb a:hover {
  color: #fff;
}
.brand-series-breadcrumb__current {
  color: rgba(255, 255, 255, 0.85);
}
.brand-series-intro {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .brand-series-intro {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2.5rem;
  }
}
.keukens-section-title--series {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}
.brand-series-gallery-head {
  margin-bottom: 2.5rem;
}
.brand-series-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .brand-series-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .brand-series-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
.brand-series__card--gallery {
  border-radius: 1.4rem;
  min-height: 18rem;
}
.brand-series__image--gallery {
  min-height: 18rem;
}
.brand-series__name--gallery {
  font-size: 1.25rem;
}
.brand-series-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.brand-series-related-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--secondary);
}
.brand-series-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  transition: opacity 0.3s var(--ease-premium);
}
.brand-series-back:hover {
  opacity: 0.8;
}
.brand-series-back svg {
  width: 0.875rem;
  height: 0.875rem;
}
.brand-series-related {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .brand-series-related {
    grid-template-columns: repeat(3, 1fr);
  }
}
.brand-series-related .brand-series__card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.brand-series__image--related {
  min-height: 14rem;
}
.brand-series__name--related {
  font-size: 1.2rem;
}

/* Series reveal: match Framer fadeUp (0.5s / y:18) + gallery (0.65s / y:20) */
.brand-page--leicht-series [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-page--leicht-series [data-reveal][data-reveal-stagger] {
  transform: translateY(20px);
  transition-duration: 0.65s, 0.65s;
}
.brand-page--leicht-series [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
.brand-page--leicht-series [data-reveal-hero] {
  transition-duration: 0.5s, 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .brand-page--leicht-series [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}