/* ==========================================================================
   Portmann Sport x Suisse Caravan Salon 2026 — Landingpage
   Font: Red Hat Display (self-hosted, brand font from caravan.ch)
   CD-Abgleich mit caravan.ch (Sept. 2026): Akzentfarbe, Body-Schriftschnitt,
   Radien und Schatten sind 1:1 aus deren template_styles1.css übernommen
   (--colorButton: #669966; Body-Font-Weight 500; Radien 8/28px; flache
   Schatten 0 2px 12px rgba(0,0,0,.2)), damit die Messeseite unverkennbar
   nach derselben Firma aussieht.
   ========================================================================== */

@font-face {
  font-family: "Red Hat Display";
  src: url("../assets/fonts/redhatdisplay-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand — 1:1 von caravan.ch übernommen */
  --accent: #669966;
  --accent-strong: #4d744d;
  --accent-soft: #e9f0e9;
  --dark-surface: #3b3b3b;

  /* light theme (default) */
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --surface: #ffffff;
  --ink: #333333;
  --ink-soft: #5c5c5c;
  --line: rgba(51, 51, 51, 0.12);

  --radius-l: 8px;
  --radius-m: 8px;
  --radius-pill: 999px;

  --shadow-soft: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Kein Darkmode: die Seite bleibt immer im hellen CD von caravan.ch,
   unabhängig vom Systemthema des Besuchers. */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  font-weight: 500; /* caravan.ch setzt den Fliesstext auf Medium, nicht Regular */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ---------------------------------- type -------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}

p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
}

.eyebrow svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.eyebrow img.scs-badge {
  height: 22px;
  width: auto;
  flex: none;
  border-radius: 3px;
}

/* ---------------------------------- buttons ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
}

.btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* ---------------------------------- nav ---------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), backdrop-filter 0.35s var(--ease-out);
}

.nav .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 44px;
  width: auto;
  display: block;
}

.logo img.logo-dark {
  display: none;
}

.nav.is-scrolled .logo img.logo-light {
  display: none;
}

.nav.is-scrolled .logo img.logo-dark {
  display: block;
}

.nav-cta {
  padding: 0.7em 1.5em;
  font-size: 0.92rem;
}

/* ---------------------------------- hero --------------------------------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: var(--nav-h, 72px);
}

/* Embedded in an iframe with auto-resize (see main.js): 100dvh has no
   stable value there (it's relative to the iframe's own height, which the
   parent is setting FROM this page's measured height — a real feedback
   loop, confirmed to balloon to millions of px in under two seconds).
   Fixed px instead once we know we're embedded. */
html.is-embedded .hero {
  min-height: 640px;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

@media (prefers-reduced-motion: reduce) {
  /* handled in JS too (video.play() is skipped), this just guarantees no
     motion sneaks in if autoplay ever fires before the check runs */
  .hero-video { display: block; }
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Kept dark and even across the lower two-thirds (not just a light dip in the
     middle) so headline/eyebrow text stays readable no matter which of the three
     rotating photos is active, bright sky included. */
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.5) 0%, rgba(12, 12, 12, 0.38) 22%, rgba(12, 12, 12, 0.58) 42%, rgba(12, 12, 12, 0.78) 62%, rgba(8, 8, 8, 0.94) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(56px, 9vh, 108px);
  padding-top: 90px;
  color: #ffffff;
  max-width: 780px;
}

.hero .eyebrow {
  color: #d6e5d6;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  margin-bottom: 18px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero p.lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  max-width: 46ch;
  margin-bottom: 34px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-actions .btn-primary {
  font-size: 1.02rem;
  padding: 1.05em 2.1em;
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  right: clamp(20px, 5vw, 48px);
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  animation: bob 2.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

.scroll-cue svg { width: 16px; height: 16px; }

/* ---------------------------------- marquee ------------------------------ */

.marks {
  /* deliberately always-dark surface (see .stats/footer): the Sunlight wordmark
     is a white SVG and needs a dark ground to read at all. */
  background: var(--dark-surface);
  padding: 34px 0;
}

.marks-label {
  text-align: center;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.brand-item img {
  height: clamp(24px, 3.4vw, 32px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Hobby and Next only ship as colored marks; force them to the same flat
   white as Sunlight's and Fendt's own white files so all four read as one
   consistent row instead of three whites and two stray brand colors. */
.brand-item img.force-white {
  filter: brightness(0) invert(1);
}

.brand-stand {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}

/* ------------------------------ social strip ------------------------------ */

.social-strip {
  background: var(--bg-alt);
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.social-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.social-strip p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ------------------------------ neuheiten (novelty grid) ------------------ */

.section-head {
  max-width: 640px;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-head p {
  font-size: 1.02rem;
}

.novelty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.novelty-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: span 1;
}

.novelty-brand {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.novelty-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.novelty-card p {
  font-size: 0.92rem;
}

.novelty-card .btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0.7em 1.5em;
  font-size: 0.88rem;
}

.novelty-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.novelty-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.novelty-stats strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.novelty-stats span {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.novelty-card--photo {
  grid-column: span 2;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.2fr;
}

.novelty-card--photo .novelty-media {
  position: relative;
  min-height: 260px;
}

.novelty-card--photo .novelty-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.novelty-card--photo .novelty-body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.novelty-card--wide {
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 0;
  overflow: hidden;
}

.novelty-card--wide .novelty-media {
  flex: 1 1 260px;
  align-self: stretch;
  min-height: 200px;
}

.novelty-card--wide .novelty-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.novelty-card--wide .novelty-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1.4 1 320px;
  padding: 28px 0 28px 32px;
}

.novelty-stats--wide {
  gap: 28px;
  flex: 0 0 auto;
  padding: 28px 32px;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.05rem;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.social-icons a:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  animation: marquee 26s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.marquee-track img {
  height: clamp(26px, 3.4vw, 38px);
  width: auto;
  flex: none;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
}

.marquee-track img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* ---------------------------------- sections ------------------------------ */

section {
  padding: clamp(64px, 10vw, 128px) 0;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* benefits split */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.split-media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-float {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--surface);
  border-radius: var(--radius-m);
  padding: 16px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.badge-float strong {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 1;
}

.badge-float span {
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 12ch;
  line-height: 1.25;
}

.badge-float--text span {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  max-width: 16ch;
}

.split-body h2 {
  margin-bottom: 16px;
}

.split-body > p {
  max-width: 48ch;
  margin-bottom: 32px;
}

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.benefit-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.benefit-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.benefit-list h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.benefit-list p {
  font-size: 0.94rem;
  max-width: 42ch;
}

/* stats band */

.stats {
  /* deliberately always-dark surface: fixed color, not the theme-relative --ink token,
     so it never flips light in dark mode (that caused a near-invisible text bug) */
  background: var(--dark-surface);
  color: #ffffff;
  border-radius: var(--radius-l);
  overflow: hidden;
  margin: 0 clamp(0px, 2vw, 0px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.messe-info-link {
  text-align: center;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
}

.messe-info-link a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.messe-info-link a:hover {
  color: #ffffff;
}

.stat {
  padding: 48px 32px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.stat:first-child {
  border-left: none;
}

.stat strong {
  display: block;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.stat span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.68);
}

/* gallery */

.gallery-heading {
  text-align: center;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 32px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-item {
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* image break */

.break-img {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: var(--shadow-soft);
}

.break-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.break-caption {
  text-align: center;
  max-width: 46ch;
  margin: 28px auto 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* booking */

.booking {
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

.booking-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.booking-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.9) 0%, rgba(14, 14, 14, 0.82) 100%);
}

.booking-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.booking-head .eyebrow {
  justify-content: center;
  color: #d6e5d6;
}

.booking-head h2 {
  margin: 16px 0;
}

.booking-head p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
  margin: 0 auto;
}

.booking-panel {
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}

/* ------------------------------ booking widget ----------------------------- */

.bw {
  padding: clamp(28px, 4vw, 44px);
  color: var(--ink);
}

.bw-step { margin-bottom: 28px; }
.bw-step:last-of-type { margin-bottom: 0; }

.bw-step-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.bw-dates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.bw-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.bw-date:hover { border-color: var(--accent); transform: translateY(-2px); }
.bw-date.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.bw-date-dow { font-size: 0.76rem; opacity: 0.7; }
.bw-date-day { font-size: 1.15rem; font-weight: 800; }

.bw-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

.bw-time {
  padding: 12px 8px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.94rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.bw-time:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.bw-time.is-active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.bw-time.is-taken,
.bw-time:disabled {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

.bw-loading {
  color: var(--ink-soft);
  font-size: 0.92rem;
  padding: 12px 0;
}

.bw-selected {
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 18px;
}

/* Honeypot field: off-screen rather than display:none/visibility:hidden,
   which some bots explicitly skip. Real visitors never see or reach it. */
.bw-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.bw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.bw-field label { font-size: 0.86rem; font-weight: 700; }
.bw-field .hint { font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }

.bw-stand-hint {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-top: 6px;
}

.bw-field input,
.bw-field select,
.bw-field textarea {
  font-family: inherit;
  font-size: 0.96rem;
  padding: 0.85em 1em;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.bw-field input:focus,
.bw-field select:focus,
.bw-field textarea:focus { border-color: var(--accent); }
.bw-field textarea { resize: vertical; min-height: 88px; }

.bw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
}

.bw-error {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fdeceb;
  color: #a5322b;
  font-size: 0.9rem;
  font-weight: 600;
}

.bw-success {
  text-align: center;
  padding: 24px 0;
}
.bw-success i {
  font-size: 2.6rem;
  color: var(--accent);
}
.bw-success h3 {
  font-size: 1.4rem;
  margin: 14px 0 10px;
}
.bw-success p {
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 auto;
}

/* ---------------------------------- footer -------------------------------- */

footer {
  /* deliberately always-dark surface, see .stats comment above */
  background: var(--dark-surface);
  color: rgba(255, 255, 255, 0.82);
  padding: clamp(56px, 8vw, 96px) 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-brand .logo {
  color: #ffffff;
  margin-bottom: 14px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.62);
  max-width: 34ch;
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.partner-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.partner-logos img {
  height: 26px;
  width: auto;
}

.partner-logos img.scs-mark {
  height: 34px;
  border-radius: 3px;
}

footer h3 {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.68);
}

footer a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

footer a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------- responsive ---------------------------- */

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .split-media {
    aspect-ratio: 4 / 3;
  }

  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .novelty-grid {
    grid-template-columns: 1fr;
  }

  .novelty-card,
  .novelty-card--photo,
  .novelty-card--wide {
    grid-column: span 1;
  }

  .novelty-card--photo {
    grid-template-columns: 1fr;
  }

  .novelty-card--photo .novelty-media {
    min-height: 200px;
  }

  .novelty-card--wide {
    flex-direction: column;
    align-items: stretch;
  }

  .novelty-card--wide .novelty-media {
    min-height: 200px;
    flex: none;
  }

  .novelty-card--wide .novelty-copy {
    padding: 24px 24px 0;
  }

  .novelty-stats--wide {
    padding: 20px 24px 24px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);
  }

  .stat {
    border-left: none;
    background: var(--dark-surface);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .break-img {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 560px) {
  .hero-content {
    padding-top: 64px;
  }

  .nav-cta {
    padding: 0.7em 1.1em;
    font-size: 0.84rem;
  }

  .logo .logo-sub {
    display: none;
  }

  .bw-dates {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }

  .bw-row {
    grid-template-columns: 1fr;
  }

  .bw-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bw-foot .btn {
    width: 100%;
  }
}