/* =====================================================
   KR INSTALLATIONS — Design System & Component Styles
   Palette: Warm Charcoal (#2A2520) + Warm White + Champagne Gold accent
   Tone: Luxury architectural, restrained, precision-engineered
   ===================================================== */

/* ─── SCROLL ANIMATIONS ─── */

/* Base state — elements start hidden */
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-fade {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 650ms;
  will-change: opacity, transform;
}
.anim-fade-up    { transform: translateY(36px); }
.anim-fade-down  { transform: translateY(-24px); }
.anim-fade-left  { transform: translateX(-40px); }
.anim-fade-right { transform: translateX(40px); }
.anim-fade       { transform: none; }

/* Stagger delays for grid children */
.anim-stagger > *               { opacity: 0; transform: translateY(28px); transition: opacity 600ms cubic-bezier(0.22,0.61,0.36,1), transform 600ms cubic-bezier(0.22,0.61,0.36,1); }
.anim-stagger > *:nth-child(1)  { transition-delay: 0ms; }
.anim-stagger > *:nth-child(2)  { transition-delay: 80ms; }
.anim-stagger > *:nth-child(3)  { transition-delay: 160ms; }
.anim-stagger > *:nth-child(4)  { transition-delay: 240ms; }
.anim-stagger > *:nth-child(5)  { transition-delay: 320ms; }
.anim-stagger > *:nth-child(6)  { transition-delay: 400ms; }
.anim-stagger > *:nth-child(n+7){ transition-delay: 480ms; }

/* Revealed state — triggered by JS adding .is-visible */
.anim-fade-up.is-visible,
.anim-fade-down.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-fade.is-visible {
  opacity: 1;
  transform: none;
}
.anim-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Hero entrance — fires on page load, not scroll */
.hero-animate-title {
  opacity: 0;
  transform: translateY(24px);
  animation: heroEnter 800ms cubic-bezier(0.22,0.61,0.36,1) 200ms forwards;
}
.hero-animate-sub {
  opacity: 0;
  transform: translateY(16px);
  animation: heroEnter 700ms cubic-bezier(0.22,0.61,0.36,1) 450ms forwards;
}
.hero-animate-cta {
  opacity: 0;
  transform: translateY(12px);
  animation: heroEnter 600ms cubic-bezier(0.22,0.61,0.36,1) 650ms forwards;
}
@keyframes heroEnter {
  to { opacity: 1; transform: none; }
}

/* Mobile — softer distances, slightly faster */
@media (max-width: 768px) {
  .anim-fade-up    { transform: translateY(20px); transition-duration: 500ms; }
  .anim-fade-down  { transform: translateY(-14px); transition-duration: 500ms; }
  .anim-fade-left  { transform: translateX(-22px); transition-duration: 500ms; }
  .anim-fade-right { transform: translateX(22px); transition-duration: 500ms; }
  .anim-stagger > * { transform: translateY(16px); transition-duration: 480ms; }
  .hero-animate-title { animation-duration: 600ms; }
  .hero-animate-sub   { animation-duration: 500ms; }
  .hero-animate-cta   { animation-duration: 450ms; }
}

/* ─── DESIGN TOKENS ─── */
:root,
[data-theme='light'] {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — warm white / light */
  --color-bg:              #F8F7F4;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F2F0EC;
  --color-surface-offset:  #ECEAE5;
  --color-divider:         #DDD9D2;
  --color-border:          #D0CCBF;

  /* Text */
  --color-text:         #1E1A16;
  --color-text-muted:   #6B6B6B;
  --color-text-faint:   #ACACAC;
  --color-text-inverse: #F8F7F4;

  /* Primary — Warm Charcoal */
  --color-primary:           #2A2520;
  --color-primary-hover:     #1F1B17;
  --color-primary-active:    #151210;
  --color-primary-highlight: #DDD8D0;

  /* Accent — Bronze */
  --color-accent:           #8C6E45;
  --color-accent-hover:     #7A5E38;
  --color-accent-active:    #664E2E;
  --color-accent-highlight: #E8DDD0;

  /* Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(27, 32, 48, 0.06);
  --shadow-md: 0 4px 16px rgba(27, 32, 48, 0.10);
  --shadow-lg: 0 12px 40px rgba(27, 32, 48, 0.14);

  /* Content widths */
  --content-narrow:  680px;
  --content-default: 1000px;
  --content-wide:    1280px;

  /* Fonts */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Switzer', 'Helvetica Neue', sans-serif;
}

/* DARK MODE */
[data-theme='dark'] {
  --color-bg:              #141210;
  --color-surface:         #1C1916;
  --color-surface-2:       #221E1A;
  --color-surface-offset:  #2A2520;
  --color-divider:         #35302B;
  --color-border:          #403B35;
  --color-text:            #E8E4DC;
  --color-text-muted:      #9A9490;
  --color-text-faint:      #504844;
  --color-text-inverse:    #141210;
  --color-primary:         #8C6E45;
  --color-primary-hover:   #9C7E55;
  --color-primary-active:  #AC8E65;
  --color-primary-highlight: #1E1710;
  --color-accent:          #9E7E55;
  --color-accent-hover:    #AE8E65;
  --color-accent-active:   #BE9E75;
  --color-accent-highlight: #1E1710;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #141210;
    --color-surface:         #1C1916;
    --color-surface-2:       #221E1A;
    --color-surface-offset:  #2A2520;
    --color-divider:         #35302B;
    --color-border:          #403B35;
    --color-text:            #E8E4DC;
    --color-text-muted:      #9A9490;
    --color-text-faint:      #504844;
    --color-text-inverse:    #141210;
    --color-primary:         #8C6E45;
    --color-primary-hover:   #9C7E55;
    --color-primary-active:  #AC8E65;
    --color-primary-highlight: #1E1710;
    --color-accent:          #9E7E55;
    --color-accent-hover:    #AE8E65;
    --color-accent-active:   #BE9E75;
    --color-accent-highlight: #1E1710;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.60);
  }
}

/* ─── LAYOUT UTILITIES ─── */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
}
.container--narrow { max-width: var(--content-narrow); }
.container--default { max-width: var(--content-default); }

/* ─── TYPOGRAPHY ─── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; }

/* ─── NAVIGATION ─── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-block: var(--space-4);
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
  max-width: 100%;
  box-sizing: border-box;
  transition: background var(--transition-slow), box-shadow var(--transition-slow), padding var(--transition-slow);
}
.site-header.scrolled {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-3);
}
.site-header--dark {
  /* For hero sections with dark backgrounds */
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-svg { width: 140px; height: auto; }
/* Logo: light/warm filter over dark hero background */
.logo-img { height: 58px; width: auto; display: block; filter: brightness(0) invert(1) sepia(1) saturate(0.15) hue-rotate(10deg) brightness(0.82); }
/* When header scrolled in light mode: go dark charcoal */
.site-header.scrolled .logo-img { filter: brightness(0) sepia(1) saturate(0.4) hue-rotate(10deg) brightness(0.18); }
/* Dark mode scrolled header: keep logo light */
[data-theme='dark'] .site-header.scrolled .logo-img { filter: brightness(0) invert(1) sepia(1) saturate(0.15) hue-rotate(10deg) brightness(0.82); }
/* Support hero has bright white cladding directly behind the top-left logo, which
   washes out the light logo. Add a restrained drop-shadow over the hero (both themes);
   scoped to Support only and dropped once the header docks onto the body surface. */
html[data-route='support'] .site-header:not(.scrolled) .logo-img {
  filter: brightness(0) invert(1) sepia(1) saturate(0.15) hue-rotate(10deg) brightness(0.82) drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}
.logo-img--footer { height: 44px; opacity: 0.9; filter: brightness(0) invert(1); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}
.main-nav a {
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Header sits over photographic hero (dark wash) in BOTH themes, so the
     foreground stays light until the header scrolls onto the body surface. */
  color: #F8F7F4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-interactive), background var(--transition-interactive);
}
.main-nav a:hover { color: var(--color-accent); }
.site-header.scrolled .main-nav a { color: var(--color-text); text-shadow: none; }
.site-header.scrolled .main-nav a:hover { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.btn-quote {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: #141210 !important;
  border-radius: var(--radius-sm);
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.btn-quote:hover { background: var(--color-accent-hover); transform: translateY(-1px); }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  color: #F8F7F4;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
}
.site-header.scrolled .theme-toggle { color: var(--color-text); border-color: var(--color-border); }
.theme-toggle:hover { background: rgba(255,255,255,0.12); }
.site-header.scrolled .theme-toggle:hover { background: var(--color-surface-2); }
/* In dark mode the scrolled header is dark — keep toggle light */
[data-theme='dark'] .site-header.scrolled .theme-toggle { color: #E8E4DC; border-color: var(--color-border); }
[data-theme='dark'] .site-header.scrolled .theme-toggle:hover { background: var(--color-surface-2); }
/* Same fix the menu toggle gets below: unscrolled the header sits over the dark
   hero, where the global charcoal focus ring is invisible. Track the button's
   own colour instead so the ring is visible over hero, scrolled bar and both
   themes. */
.theme-toggle:focus-visible { outline-color: currentColor; }

/* Mobile nav toggle */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  /* Light over the hero in both themes (matches nav links); theme-aware once scrolled. */
  color: #F8F7F4;
  border-radius: var(--radius-md);
}
.site-header.scrolled .menu-toggle { color: var(--color-text); }
/* Ring follows the icon colour so it stays legible over the hero, over the
   scrolled header bar and over the open menu's Warm Charcoal overlay (the
   global charcoal ring disappears against that overlay). */
.menu-toggle:focus-visible { outline-color: currentColor; }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.mobile-nav.open { display: flex; opacity: 1; }
.mobile-nav a {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-inverse);
  font-weight: 300;
  letter-spacing: 0.04em;
}
.mobile-nav a:hover { color: var(--color-accent); }
.mobile-nav-close {
  position: absolute;
  top: var(--space-6); right: var(--space-6);
  color: var(--color-text-inverse);
  font-size: var(--text-xl);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  z-index: 1;
}
/* One control, one position. The sticky header (z-index 100) renders above this
   overlay (z-index 99), so an in-overlay close button in the top-right lands on
   top of the header's own menu button and the two framed pack icons stack into
   one unreadable mark. The header button becomes the close control while the
   menu is open (icon + accessible name swapped in app.js off the same
   aria-expanded state), so this one stands down. */
.mobile-nav-close { display: none; }

/* Mobile nav */
.mobile-nav.open {
  justify-content: flex-start;
  padding: calc(var(--space-10) + 20px) var(--space-6) var(--space-10);
  gap: var(--space-4);
  overflow-y: auto;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: transform var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-primary {
  background: var(--color-primary);
  color: #F8F7F4;
}
.btn-primary:hover { background: var(--color-primary-hover); }
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-primary:hover {
  color: #1A1510;
}

.btn-accent {
  background: var(--color-accent);
  color: #1A1510;
}
.btn-accent:hover { background: var(--color-accent-hover); color: #1A1510; }

/* btn-outline: used on dark/hero backgrounds — always white text */
.btn-outline {
  background: transparent;
  color: #F8F7F4;
  border: 1px solid rgba(255,255,255,0.5);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); color: #F8F7F4; }

/* btn-outline-dark: used on light backgrounds — adapts to mode */
.btn-outline-dark {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline-dark:hover { border-color: var(--color-accent); color: var(--color-accent); }
[data-theme='dark'] .btn-outline-dark { border-color: var(--color-border); }

/* ─── SECTION LAYOUTS ─── */
.section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.section--sm {
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
}
.section--dark {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.section--off {
  background: var(--color-surface-2);
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  display: block;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--space-10);
}
.section-title--light { color: var(--color-text-inverse); }
.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
}
.section-subtitle--light { color: rgba(232,228,220,0.75); }

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-primary);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg--video {
  overflow: hidden;
}
.hero-bg--video video {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  object-fit: cover;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 21, 32, 0.15) 0%,
    rgba(14, 21, 32, 0.3) 50%,
    rgba(14, 21, 32, 0.75) 100%
  );
  z-index: 1;
}
/* Animated WebP fallback: covers the hero when video autoplay is policy-blocked.
   Sits inside .hero-bg (z-index 0), below the overlay (z-index 1), so hero text
   stays readable. inset:0 + object-fit:cover = no layout shift, seamless swap. */
.hero-bg--video .hero-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(var(--space-16), 8vw, var(--space-32));
  padding-bottom: clamp(var(--space-20), 10vw, var(--space-32));
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  display: block;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 0.31rem + 3.67vw, 4.21rem);
  font-weight: 300;
  line-height: 1.0;
  color: #FFFFFF;
  margin-bottom: var(--space-8);
  max-width: 12ch;
  letter-spacing: -0.01em;
}

/* Split hero title — two columns with vertical divider */
.hero-title--split {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: none;
}
.hero-split-left,
.hero-split-right {
  display: block;
  line-height: 1.05;
}
.hero-split-left  { padding-right: clamp(0.5rem, 2vw, 2rem); }
.hero-split-right { padding-left:  clamp(0.5rem, 2vw, 2rem); }
.hero-split-divider {
  display: block;
  width: 1px;
  height: 1.85lh;
  align-self: center;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.hero-subtitle {
  font-size: clamp(0.85rem, 0.808rem + 0.213vw, 0.956rem);
  color: rgba(255,255,255,0.8);
  max-width: 52ch;
  line-height: 1.7;
  margin-top: var(--space-8);
  margin-bottom: var(--space-10);
}
.hero-subtitle p {
  margin: 0;
}
.hero-subtitle p + p {
  margin-top: 0.85em;
}
.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 0.8; transform: scaleY(1.2); }
}

/* Hero slide indicators */
.hero-slides {
  position: absolute;
  bottom: var(--space-8);
  left: var(--space-16);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}
.hero-slide-dot {
  width: 24px; height: 2px;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  transition: background var(--transition-interactive), width var(--transition-interactive);
}
.hero-slide-dot.active { background: var(--color-accent); width: 48px; }

/* ─── PAGE HERO (inner pages) ─── */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-primary);
  padding-top: 80px;
}
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Interior heroes may be backed by video instead of a still (Solutions > Windows &
   Doors, Schüco > Windows, Schüco > Sliding). Same box, same cover crop, so the
   standard hero wash and title placement are unchanged either way. */
.page-hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  /* Site-wide restrained hero wash (About/Support reference): keeps imagery photographic
     while the darker bottom stop keeps white titles + header nav legible in both themes. */
  background: linear-gradient(to bottom, rgba(14,21,32,0.1), rgba(14,21,32,0.45));
}
.page-hero-content {
  position: relative;
  z-index: 1;
  padding: var(--space-16) clamp(var(--space-6), 5vw, var(--space-16));
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.49rem, 0.85rem + 3.4vw, 4.25rem);
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.page-hero-breadcrumb {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-4);
}
.page-hero-breadcrumb a { color: var(--color-accent); text-decoration: none; }
.page-hero-breadcrumb a:hover { text-decoration: underline; }
.page-hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Hero with no text overlay — image fills, bottom padding removed */
.page-hero--image-only {
  align-items: stretch;
  min-height: 45vh;
}
.page-hero--image-only .page-hero-overlay {
  background: linear-gradient(to bottom, rgba(14,21,32,0.1), rgba(14,21,32,0.25));
}

/* ─── CARDS ─── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: var(--space-6); }
.card-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.card-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ─── SOLUTION TILES ─── */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.solution-tile {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--color-primary);
  text-decoration: none;
  display: block;
}
.solution-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.solution-tile:hover img { transform: scale(1.06); }
.solution-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,21,32,0.55) 0%, rgba(14,21,32,0.0) 60%);
  transition: background var(--transition-slow);
}
.solution-tile:hover .solution-tile-overlay {
  background: linear-gradient(to top, rgba(14,21,32,0.65) 0%, rgba(14,21,32,0.05) 60%);
}
.solution-tile-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.solution-tile-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  white-space: nowrap;
}
.solution-tile-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 2rem);
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}
.solution-tile-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-3);
  color: var(--color-accent);
  transition: transform var(--transition-interactive);
  border-top: 1px solid rgba(201,169,110,0.4);
  padding-top: var(--space-4);
  width: 100%;
}
.solution-tile-explore {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex: 1;
  text-shadow: 0 0 18px rgba(201,169,110,0.35);
}
.solution-tile-arrow svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  /* Round 18: KR pack enquire-arrow keeps the pack's 1.5 optical stroke. */
}
.solution-tile:hover .solution-tile-arrow { opacity: 1; transform: translateX(6px); }

/* ─── STATS BAR ─── */
.stats-bar {
  background: #1A1714;
  padding-block: var(--space-16);
  border-top: 1px solid rgba(201,169,110,0.15);
  border-bottom: 1px solid rgba(201,169,110,0.15);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.stat-item { text-align: center; }
.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: #C8C4BE;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}
.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(232,228,220,0.6);
}

/* ─── PROJECT CAROUSEL / GRID ─── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  display: block;
  background: var(--color-surface-2);
}
.project-card--large { grid-column: span 7; grid-row: span 2; }
.project-card--tall   { grid-column: span 5; }
.project-card--wide   { grid-column: span 5; }
.project-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  min-height: 260px;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card--large img { min-height: 520px; }
.project-card:hover img { transform: scale(1.05); }
.project-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(to top, rgba(10,14,20,0.92) 0%, rgba(10,14,20,0.4) 70%, transparent 100%);
  transform: translateY(0);
  transition: transform var(--transition-slow);
}
.project-card-type {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.project-card-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  line-height: 1.15;
}

/* ─── PARTNER LOGOS ─── */
.partners-bar {
  background: var(--color-surface);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
}
.partners-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-8), 6vw, var(--space-20));
  flex-wrap: wrap;
}
.partner-logo {
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--transition-interactive), filter var(--transition-interactive);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.05em;
}
.partner-logo:hover { opacity: 0.85; filter: grayscale(0); }

/* ─── QUOTE STRIP ─── */
.quote-strip {
  background: var(--color-surface-offset);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  text-align: center;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-text);
  font-style: italic;
  color: var(--color-text);
  max-width: 22ch;
  margin-inline: auto;
  line-height: 1.25;
}
.pull-quote-attr {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-6);
}

/* ─── SPLIT SECTIONS ─── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 60vh;
}
.split--image-right .split-text { order: 1; }
.split--image-right .split-image { order: 2; }
.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 6vw, var(--space-20));
}
.split-image {
  position: relative;
  overflow: hidden;
}
.split-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 400px;
}
/* Benchmarks layout */
.benchmarks-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-6);
}
.benchmarks-heading-block {
  padding-bottom: var(--space-4);
}
.benchmarks-heading-block .section-title {
  font-size: clamp(2rem, 1rem + 3vw, 3.4rem);
  line-height: 1.1;
}
.benchmarks-hero-image {
  height: 320px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.benchmarks-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.benchmarks-hero-image:hover img { transform: scale(1.04); }
.benchmarks-bottom-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-8);
  align-items: start;
}
.benchmarks-body-block {
  padding-top: var(--space-4);
}
@media (max-width: 900px) {
  .benchmarks-top-row,
  .benchmarks-bottom-row {
    grid-template-columns: 1fr;
  }
  .benchmarks-hero-image { height: 260px; }
}

/* Benchmarks mosaic */
.benchmarks-mosaic {
  display: grid;
  grid-template-columns: 58% 1fr;
  grid-template-rows: 1fr;
  gap: var(--space-2);
  height: 680px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.benchmarks-mosaic-left {
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.benchmarks-mosaic-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.benchmarks-mosaic-left:hover img { transform: scale(1.04); }
.benchmarks-mosaic-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}
.benchmarks-mosaic-top {
  flex: 0 0 62%;
  overflow: hidden;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.benchmarks-mosaic-bottom {
  flex: 1;
  overflow: hidden;
  border-radius: 0 0 var(--radius-lg) 0;
}
.benchmarks-mosaic-top img,
.benchmarks-mosaic-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.benchmarks-mosaic-top:hover img,
.benchmarks-mosaic-bottom:hover img { transform: scale(1.04); }
@media (max-width: 768px) {
  .benchmarks-mosaic {
    grid-template-columns: 1fr;
    height: auto;
  }
  .benchmarks-mosaic-left { height: 340px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .benchmarks-mosaic-right { flex-direction: row; height: 220px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
  .benchmarks-mosaic-top { flex: 0 0 60%; border-radius: 0; }
  .benchmarks-mosaic-bottom { border-radius: 0; }
}

.split-image-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0.08;
}

/* ─── ACCORDION ─── */
.accordion-item {
  border-bottom: 1px solid var(--color-divider);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  gap: var(--space-4);
}
.accordion-trigger:hover { color: var(--color-primary); }
.accordion-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--color-accent);
  transition: transform var(--transition-interactive);
}
/* Round 18: the trigger glyph is the KR pack chevron-down, so the open state
   flips it rather than rotating a plus into a cross. */
.accordion-item.open .accordion-icon { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-body-inner {
  padding-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ─── FORM ─── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field--full { grid-column: 1 / -1; }
.form-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.form-input, .form-select, .form-textarea {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.form-textarea { resize: vertical; min-height: 120px; }
/* Review-preview notice + disabled submit. Token-based so both themes follow. */
.form-review-notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── FOOTER ─── */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding-block: clamp(var(--space-16), 6vw, var(--space-24));
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand p {
  font-size: var(--text-sm);
  color: rgba(232,228,220,0.6);
  line-height: 1.7;
  max-width: 32ch;
  margin-top: var(--space-4);
}
.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-links a {
  text-decoration: none;
  font-size: var(--text-sm);
  color: rgba(232,228,220,0.65);
  transition: color var(--transition-interactive);
}
.footer-links a:hover { color: var(--color-accent); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-copy {
  font-size: var(--text-xs);
  color: rgba(232,228,220,0.4);
  letter-spacing: 0.05em;
}
.footer-socials {
  display: flex;
  gap: var(--space-4);
}
.footer-social-link {
  color: rgba(232,228,220,0.5);
  transition: color var(--transition-interactive);
  text-decoration: none;
}
.footer-social-link:hover { color: var(--color-accent); }

/* ─── UTILITY ─── */
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }
.divider {
  width: 48px; height: 2px;
  background: var(--color-accent);
  margin-block: var(--space-6);
}

/* ─── ANIMATIONS ─── */
.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .fade-in {
  opacity: 0;
  transform: translateY(24px);
}
.fade-in.visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split { grid-template-columns: 1fr; }
  .split-image { min-height: 360px; }
  .split--image-right .split-text,
  .split--image-right .split-image { order: unset; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .project-card--large { grid-column: span 2; }
  .project-card--tall, .project-card--wide { grid-column: span 1; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  /* 44x44 minimum touch target: this single button both opens and closes the
     menu. The 20px icon is unchanged, only the hit area grows. */
  .menu-toggle { display: flex; width: 44px; height: 44px; }
  .solution-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-card--large, .project-card--tall, .project-card--wide { grid-column: span 1; }
  .project-card--large img { min-height: 320px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn-quote { display: none; }
  .hero-slides { left: var(--space-6); }
  .hero-scroll { display: none; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { text-align: center; justify-content: center; }
}

/* =====================================================
   SPACING REFRESH — midpoint between original and V-E
   Original: --space-20:5rem  --space-24:6rem  --space-32:8rem
   Version E: --space-20:6rem  --space-24:8rem  --space-32:10rem
   Midpoint:  --space-20:5.5rem --space-24:7rem --space-32:9rem
   ===================================================== */
:root,
[data-theme='light'],
[data-theme='dark'] {
  --space-20: 5.5rem;
  --space-24: 7rem;
  --space-32: 9rem;
  --space-40: 12rem;
}

/* Section padding — split the difference */
.section {
  padding-block: clamp(var(--space-20), 13vw, var(--space-40));
}
.section--sm {
  padding-block: clamp(var(--space-10), 5.5vw, var(--space-20));
}

/* Hero content — slightly more breathing room below title */
.hero-content {
  padding: clamp(var(--space-16), 9vw, var(--space-32));
  padding-bottom: clamp(var(--space-24), 11vw, 11rem);
}
.hero-subtitle { margin-bottom: var(--space-10); }
.hero-title { margin-bottom: var(--space-8); }

/* Stats bar */
.stats-bar { padding-block: var(--space-20); }

/* Quote strip */
.quote-strip { padding-block: clamp(var(--space-20), 9vw, var(--space-24)); }

/* Split text panels */
.split-text { padding: clamp(var(--space-12), 7vw, var(--space-24)); }

/* Section label — fractionally more space before heading */
.section-label { margin-bottom: var(--space-5); }

/* Partners bar */
.partners-bar { padding-block: var(--space-6); }

/* Footer */
.site-footer { padding-block: clamp(var(--space-20), 7vw, var(--space-24)); }
.footer-grid { padding-bottom: var(--space-16); }

/* Benchmarks inner rows */
.benchmarks-top-row { margin-bottom: var(--space-8); }
.benchmarks-bottom-row { gap: var(--space-10); }

/* =====================================================
   SPACING V2 — pulled back ~12% from midpoint
   ===================================================== */
:root,
[data-theme='light'],
[data-theme='dark'] {
  --space-20: 5.2rem;
  --space-24: 6.4rem;
  --space-32: 8.4rem;
  --space-40: 11rem;
}

.section {
  padding-block: clamp(var(--space-20), 12.5vw, var(--space-40));
}
.section--sm {
  padding-block: clamp(var(--space-10), 5.2vw, var(--space-20));
}
.hero-content {
  padding: clamp(var(--space-16), 8.5vw, var(--space-32));
  padding-bottom: clamp(var(--space-20), 10.5vw, 10rem);
}
.stats-bar { padding-block: 5rem; }
.quote-strip { padding-block: clamp(5rem, 8.5vw, 6.4rem); }
.split-text { padding: clamp(var(--space-10), 6.5vw, var(--space-24)); }
.benchmarks-top-row { margin-bottom: var(--space-6); }
.benchmarks-bottom-row { gap: var(--space-8); }
.footer-grid { padding-bottom: 5.5rem; }

/* =====================================================
   SPACING V3 — 50% reduction, close to original
   Original: --space-20:5rem  --space-24:6rem  --space-32:8rem
   ===================================================== */
:root,
[data-theme='light'],
[data-theme='dark'] {
  --space-20: 5.1rem;
  --space-24: 6.2rem;
  --space-32: 8.2rem;
  --space-40: 9.5rem;
}

.section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.section--sm {
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
}
.hero-content {
  padding: clamp(var(--space-16), 8vw, var(--space-32));
  padding-bottom: clamp(var(--space-20), 10vw, var(--space-32));
}
.stats-bar { padding-block: var(--space-16); }
.quote-strip { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.split-text { padding: clamp(var(--space-10), 6vw, var(--space-20)); }
.benchmarks-top-row { margin-bottom: var(--space-6); }
.benchmarks-bottom-row { gap: var(--space-8); }
.footer-grid { padding-bottom: var(--space-12); }

/* ─── STATS: 3 items, centred ─── */
.stats-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 860px;
  margin-inline: auto;
}

/* ─── ABOUT HERO: title positioned upper third, left-aligned ─── */
#page-about .page-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#page-about .page-hero-content {
  padding-top: clamp(6rem, 12vw, 10rem);
  padding-left: clamp(var(--space-8), 9vw, var(--space-32));
  padding-right: clamp(var(--space-8), 9vw, var(--space-32));
  text-align: left;
}

/* Hero overlay light level is standardised in the shared `.page-hero-overlay` rule above
   (About/Support reference, 0.1→0.45). Per-page overlay overrides were removed so every hero
   shares one coherent, restrained wash. Only per-image crop (object-position) is tuned below. */
#page-solutions .page-hero-bg img {
  object-position: center 20%;
}
#page-facades-ventilation .page-hero-bg img {
  object-position: center 30%;
}
/* Windows & Doors hero (Schüco elevation video): its crop is owned by
   kr_site_restructure.WD_HERO_FOCAL and emitted into
   pages/kr-sitewide-standards.css, so the video and its poster/still share
   one declaration. Do not re-add a per-page object-position here. */
#page-projects .page-hero-bg img {
  /* Southern Ocean Lodge aerial hero is pre-cropped to centre the lodge,
     cliffs and beach, so no extra vertical bias is needed here. */
  object-position: center center;
}
/* Projects-scoped lighter hero wash (approved exception to the shared STD wash):
   noticeably lighter than the site 0.1→0.45 so the coastal scene reads brighter,
   while the retained bottom stop + title shadow keep the white "Our Work" title
   and the white over-hero nav/logo legible in both themes. */
#page-projects .page-hero-overlay {
  background: linear-gradient(to bottom, rgba(14,21,32,0.02), rgba(14,21,32,0.30));
}
#page-projects .page-hero-title {
  text-shadow: 0 1px 12px rgba(14,21,32,0.45);
}
/* Partners: bright indoor/outdoor villa hero (2:1). Desktop crops vertically —
   centre keeps the concrete opening, terrace, hillside view and the transition to
   the living/dining space; mobile crops horizontally — bias slightly left of centre
   to hold the terrace + landscape alongside the interior. The scene is very bright,
   so keep the shared wash but add a title shadow to hold the white title legible. */
#page-partners .page-hero-bg img {
  object-position: 42% center;
}
#page-partners .page-hero-title {
  text-shadow: 0 1px 12px rgba(14,21,32,0.55);
}
/* Support: lift the crop so the team in front of the vans is visible while the
   building roofline + sky/skyline strip stay in frame. On mobile the full image
   height already fits (cover crops horizontally), so this Y only affects desktop. */
#page-support .page-hero-bg img {
  object-position: center 72%;
}



/* ─── Solutions residential: focus on louvre window (right side of image) ─── */
#sol-residential .split-image img {
  object-position: right center;
}

/* ─── Residential tile: show windows ─── */
.solution-tile:first-child img {
  object-fit: cover;
  object-position: 55% 40%;
}
.solution-tile:first-child:hover img {
  transform: scale(1.06);
}

/* ─── Solutions page partners bar: dark background for white logos ─── */
#page-solutions .partners-bar {
  background: #1C1916;
  border-color: rgba(255,255,255,0.08);
  text-align: center;
}
#page-solutions .partners-bar p {
  color: rgba(232,228,220,0.4);
  text-align: center;
  width: 100%;
  display: block;
}
#page-solutions .partners-bar .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Schüco 75 Years logo — black artwork, invert for visibility in dark mode */
.sch75-logo { filter: none; }
[data-theme='dark'] .sch75-logo { filter: invert(1); }

/* Schüco overview — brand intro: logo top-left, two-column text to avoid a long block */
.sch-intro-logo-row {
  display: flex;
  justify-content: flex-start;
}
.sch-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  margin-top: var(--space-8);
  align-items: start;
}
.sch-intro-primary {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--color-text);
  max-width: 46ch;
  line-height: 1.65;
}
.sch-intro-secondary { padding-top: var(--space-1); }
@media (max-width: 720px) {
  .sch-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-6);
  }
}

/* Reusable KR arrow motif (outlined chevron / pyramid) */
.kr-arrow {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: middle;
}
.kr-arrow--right { transform: rotate(-90deg); }

.btn .kr-arrow {
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.15em;
  transition: transform var(--transition-base, 0.3s ease);
}
.btn:hover .kr-arrow--right { transform: rotate(-90deg) translateY(-3px); }

/* Downward "Explore" prompt — indicates content below */
.kr-explore-prompt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kr-explore-prompt .kr-arrow {
  width: 1.5rem;
  height: 1.5rem;
  animation: kr-explore-bob 2s ease-in-out infinite;
}
@keyframes kr-explore-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .kr-explore-prompt .kr-arrow { animation: none; }
  .btn:hover .kr-arrow--right { transform: rotate(-90deg); }
}