:root {
  --bg: #0d0f10;
  --fg: #f4f7f8;
  --muted: rgba(244, 247, 248, 0.62);
  --line: rgba(244, 247, 248, 0.14);
  --card: #151718;
  --paper: #eceff1;
  --paper-ink: #111214;
  --cyan: #d7f5fb;
  --red: #e7eaec;
  --electric: #35d8ff;
  --pulse: #ff3d6e;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Keyboard focus: visible on every interactive element, in every theme */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  background: #fff;
  color: #111214;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 16px;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  transition: background-color 700ms cubic-bezier(0.22, 1, 0.36, 1),
    color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-theme="paper"] {
  background: var(--paper);
  color: var(--paper-ink);
}

body[data-theme="cyan"] {
  background: var(--cyan);
  color: var(--paper-ink);
}

body[data-theme="red"] {
  background: var(--red);
  color: var(--paper-ink);
}

body[data-theme="graphite"] {
  background: #151718;
  color: var(--fg);
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 26px max(22px, calc((100vw - 1380px) / 2));
  background: rgba(13, 15, 16, 0.92);
  backdrop-filter: blur(18px);
}

.brand img {
  width: 104px;
  height: auto;
}

.desktop-nav {
  display: flex;
  gap: 24px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}

.desktop-nav a,
.footer a {
  position: relative;
}

.desktop-nav a::after,
.footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right 220ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.footer a:hover::after,
.footer a:focus-visible::after {
  right: 0;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 6px auto;
  background: #fff;
  transition: transform 220ms ease, opacity 220ms ease;
}

.menu-open .menu-toggle span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-open .menu-toggle span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 42px;
  padding: 40px;
  background: rgba(9, 10, 11, 0.96);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease;
}

.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.menu-overlay nav {
  display: grid;
  gap: 8px;
  text-align: center;
}

.menu-overlay a {
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.96;
  font-weight: 900;
}

.menu-overlay p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.color-section {
  transition: background-color 700ms cubic-bezier(0.22, 1, 0.36, 1),
    color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 112px 22px 94px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0f10 0%, #090a0b 74%, #0d0f10 100%);
  color: #fff;
}


/* Ambient loop rule kept for reuse, but no longer wired into the hero markup:
   the featured band below it is static, so the hero now uses the same
   static gradient (above) at all times for visual parity between the two
   sections instead of one moving and one static. */
.hero-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-ambient {
    display: none;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1020px, 100%);
  margin: 0 auto 58px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 48px;
  font-size: clamp(96px, 24vw, 334px);
  line-height: 0.72;
  font-weight: 900;
  text-transform: uppercase;
}

.rotator {
  position: relative;
  display: block;
  min-height: 0.92em;
  color: #fff;
}

.rotator-word {
  display: none;
  position: relative;
  color: #fff;
}

.rotator-word.active {
  display: block;
}

.hero-payoff {
  display: block;
  margin: 26px auto 0;
  text-align: center;
  max-width: 640px;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.2;
  font-weight: 700;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
}

.hero-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 800;
}

.hero-meta span:nth-child(2) {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-meta span:last-child {
  justify-self: end;
}

.hero-actions {
  display: flex;
  justify-content: center;
  margin: 30px auto 40px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  background: #fff;
  color: #0c0e10;
  font-weight: 800;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--duration-fast, 150ms) ease, background var(--duration-fast, 150ms) ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: #e8ecef;
  transform: translateY(-2px);
}

.hero-media {
  position: relative;
  width: 100vw;
  min-height: clamp(680px, 74vw, 1000px);
  margin: 0 calc(50% - 50vw) -94px;
  overflow: hidden;
  background: #b8bcc0;
  isolation: isolate;
}

/* Cursor-follow spotlight across the whole band (not per-card): script.js
   tracks pointermove on .hero-media itself and writes --x/--y, this paints
   it. Sits behind .media-row (z-index 3) via plain paint order — no
   explicit z-index needed since .hero-media isolates its own stacking
   context and ::before always paints before in-flow children. */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.55), transparent 38%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.hero-media:hover::before,
.hero-media:focus-within::before {
  opacity: 1;
}

.media-row {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  height: 100%;
}

.media-card {
  position: relative;
  flex: 1 1 320px;
  min-height: clamp(680px, 74vw, 1000px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}

.media-card[hidden] {
  display: none;
}

/* With both cards visible above the mobile stacking breakpoint, each card's
   max-width (560px) is narrower than the model-name type and specs row were
   sized for (both were tuned for the old full-band-width single card), so
   they overflow into the neighboring card. Scoped to the two-card case via
   :has() so the single-card band stays pixel-identical to today. The 560px
   cap itself is also scoped here (rather than applied unconditionally to
   .media-card) so a single visible card can grow to the full band width. */
@media (min-width: 841px) {
  .media-row:has(.media-card[data-featured-band="2"]:not([hidden])) .media-card {
    max-width: 560px;
  }

  .media-row:has(.media-card[data-featured-band="2"]:not([hidden])) .media-copy strong {
    font-size: clamp(30px, 4.8vw, 56px);
  }
}

.media-copy {
  width: 100%;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
}

.media-copy span {
  color: rgba(17, 18, 20, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.media-copy strong {
  color: #111214;
  font-size: clamp(44px, 6.8vw, 108px);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.media-copy .band-slogan {
  color: rgba(17, 18, 20, 0.7);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  max-width: 720px;
}

.media-copy .text-link {
  color: #111214;
}

/* Featured product plate — paper surface so any catalog photo (JPG,
   white background) reads as intentional on the dark band */
.media-plate {
  position: relative;
  width: min(38vw, 500px);
  aspect-ratio: 1 / 1;
  display: grid;
  padding: clamp(14px, 2vw, 30px);
  background: var(--paper);
  border: 1px solid rgba(17, 18, 20, 0.16);
  will-change: transform;
}

.media-badge {
  position: absolute;
  top: clamp(10px, 1.4vw, 18px);
  left: clamp(10px, 1.4vw, 18px);
  z-index: 4;
  padding: 6px 12px;
  background: #111214;
  color: #f4f7f8;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}

.media-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Transparent product photos (black OR white products) skip the paper
   plate: a mid-tone spotlight halo keeps either extreme legible against
   the gray band, no ground/drop shadow. */
.media-plate.is-cutout {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.media-plate.is-cutout::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(158, 168, 173, 0.42) 0%,
    rgba(158, 168, 173, 0.12) 46%,
    transparent 70%
  );
}

.media-plate.is-cutout img {
  filter: drop-shadow(0 0 26px rgba(244, 247, 248, 0.17));
}

.media-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: min(90vw, 640px);
  padding-top: 8px;
}

.media-spec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17, 18, 20, 0.18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.media-specs.is-revealed .media-spec-row {
  opacity: 1;
  transform: translateY(0);
}

.media-spec-value {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #111214;
  min-width: 0;
}

.media-spec-label {
  font-size: 12px;
  color: rgba(17, 18, 20, 0.62);
  text-align: right;
}

[data-parallax] {
  will-change: transform;
}


.manifest {
  display: grid;
  justify-items: center;
  padding: 136px 22px 150px;
  background: var(--paper);
  color: var(--paper-ink);
}

.manifest > p {
  width: min(860px, 100%);
  margin: 0;
  color: #76786f;
  font-size: clamp(23px, 2.45vw, 40px);
  line-height: 1.22;
  font-weight: 900;
}

.metrics {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 86px;
}

.metric-card {
  min-height: clamp(320px, 27vw, 430px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  padding: clamp(28px, 3.5vw, 48px);
  border-radius: 8px;
  color: #f4f7f8;
  border: 1px solid rgba(244, 247, 248, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(0);
}

.metric-lilac {
  background: #15181b;
}

.metric-cyan {
  margin-top: 38px;
  background: linear-gradient(145deg, #0f252c, #112024);
}

.metric-rose {
  background: linear-gradient(145deg, #241216, #16181b);
}

.metric-sage {
  margin-top: 38px;
  background: #e8edf0;
  color: #111214;
  border-color: rgba(17, 18, 20, 0.14);
}

.metric-card strong {
  font-size: clamp(68px, 7.2vw, 116px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.metric-card strong span {
  font-size: 0.48em;
  letter-spacing: 0;
  vertical-align: 0.42em;
}

.metric-card i {
  align-self: end;
  display: block;
  height: 1px;
  margin: 28px 0 24px;
  background: rgba(244, 247, 248, 0.2);
}

.metric-sage i {
  background: rgba(17, 18, 20, 0.22);
}

.metric-card p {
  max-width: 210px;
  margin: 0;
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.22;
  font-weight: 900;
  color: rgba(244, 247, 248, 0.78);
}

.metric-sage p {
  color: rgba(17, 18, 20, 0.64);
}

.showcase {
  padding: 118px 0 150px;
  background: #101213;
  color: #fff;
}

.showcase-head {
  width: min(1296px, calc(100% - 44px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: 0.38fr 1fr;
  gap: 48px;
  align-items: end;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 32px;
}

.showcase-head h2 {
  max-width: 1040px;
  margin: 0;
  font-size: clamp(48px, 7.4vw, 126px);
  line-height: 0.88;
  font-weight: 900;
}

.portfolio-stack {
  display: grid;
  gap: clamp(24px, 4vw, 54px);
  width: min(1296px, calc(100% - 44px));
  margin: 0 auto;
}

.portfolio-card {
  position: relative;
  min-height: clamp(560px, 72vw, 820px);
  display: grid;
  align-content: space-between;
  padding: clamp(28px, 4.6vw, 72px);
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;
  color: #fff;
  background: #17191a;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  transform: translateZ(0);
  transition: transform 260ms ease, border-radius 260ms ease;
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.92;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 52%),
    radial-gradient(circle at 78% 30%, rgba(88, 221, 255, 0.22), transparent 32%);
}

.portfolio-card::after {
  content: "";
  position: absolute;
  inset: -36%;
  z-index: -1;
  background: radial-gradient(circle at var(--x, 62%) var(--y, 38%), rgba(255, 255, 255, 0.2), transparent 24%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  transform: translateY(-10px);
  border-radius: 36px;
}

.portfolio-card:hover::after,
.portfolio-card:focus-within::after {
  opacity: 1;
}

.card-monitor {
  background: #101316;
}

.card-case {
  background: #202326;
  color: #f4f7f8;
}

.card-case::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 52%),
    radial-gradient(circle at 74% 28%, rgba(255, 61, 110, 0.2), transparent 34%);
}

.card-cooling {
  background: #11181c;
}

.card-accessories {
  background: #e7edf0;
  color: #111214;
}

.card-accessories::before {
  background: linear-gradient(135deg, rgba(17, 18, 20, 0.08), transparent 52%),
    radial-gradient(circle at 78% 32%, rgba(53, 216, 255, 0.26), transparent 34%);
}

.portfolio-meta {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 30px;
  border-bottom: 1px solid currentColor;
  color: currentColor;
  opacity: 0.82;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 900;
}

.portfolio-card h3 {
  position: relative;
  z-index: 2;
  max-width: 58%;
  margin: clamp(58px, 10vw, 132px) 0 20px;
  font-size: clamp(64px, 8vw, 128px);
  line-height: 0.84;
  font-weight: 900;
  text-wrap: balance;
}

.portfolio-card p {
  position: relative;
  z-index: 3;
  max-width: 460px;
  margin: 0;
  color: currentColor;
  opacity: 0.62;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.22;
  font-weight: 900;
}

.portfolio-card img {
  position: absolute;
  right: clamp(16px, 6vw, 90px);
  bottom: clamp(18px, 5vw, 72px);
  width: min(48vw, 620px);
  max-height: 560px;
  object-fit: contain;
  opacity: 0.64;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.42));
  transform: translateY(18px) scale(0.98);
  transition: opacity 260ms ease, transform 260ms ease;
}

.card-case img,
.card-cooling img {
  right: clamp(-12px, 2vw, 34px);
  bottom: clamp(16px, 3vw, 42px);
  width: min(43vw, 590px);
  max-height: 620px;
  object-fit: contain;
  opacity: 0.82;
  box-shadow: none;
}

.card-cooling img {
  right: clamp(-8px, 2.6vw, 42px);
  width: min(42vw, 570px);
}

.portfolio-card:hover img,
.portfolio-card:focus-within img {
  opacity: 0.86;
  transform: translateY(0) scale(1.025);
}

.split {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 48px;
  align-items: end;
  padding: clamp(86px, 12vw, 168px) clamp(22px, 6vw, 96px);
  background: #11181c;
  color: #f4f7f8;
}

.split h2 {
  margin: 0;
  font-size: clamp(58px, 8vw, 136px);
  line-height: 0.88;
  font-weight: 900;
}

.split p:not(.eyebrow) {
  margin: 0;
  color: rgba(244, 247, 248, 0.62);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.22;
  font-weight: 900;
}

.expertise {
  width: 100%;
  margin: 0 auto;
  padding: 120px max(22px, calc((100vw - 1120px) / 2)) 104px;
  background: var(--paper);
  color: var(--paper-ink);
}

.expertise .eyebrow {
  color: #5f605b;
}

.expertise-row {
  display: grid;
  grid-template-columns: 62px 230px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-top: 1px solid rgba(17, 18, 20, 0.14);
}

.expertise-row:last-child {
  border-bottom: 1px solid rgba(17, 18, 20, 0.14);
}

.expertise-row span,
.expertise-row strong,
.expertise-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 900;
}

.expertise-row p {
  color: #5f605b;
  font-weight: 800;
}

.support-hub {
  padding: clamp(86px, 12vw, 168px) clamp(22px, 6vw, 96px);
  background: #e7eaec;
  color: var(--paper-ink);
}

.support-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 58px;
}

.support-head h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(48px, 6.8vw, 112px);
  line-height: 0.92;
  font-weight: 900;
  text-wrap: balance;
}

.support-hub .eyebrow {
  color: rgba(17, 18, 20, 0.72);
}

.support-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 1px;
  background: rgba(17, 18, 20, 0.22);
  border: 1px solid rgba(17, 18, 20, 0.22);
}

.support-card {
  min-height: 330px;
  display: grid;
  align-content: space-between;
  padding: clamp(24px, 4vw, 46px);
  background: #f4f7f8;
  transition: background 220ms ease, transform 220ms ease;
}

.support-card.primary {
  grid-row: span 2;
  min-height: 661px;
  background: #111314;
  color: #fff;
}

.support-card:hover,
.support-card:focus-visible {
  background: #ffffff;
}

.support-card.primary:hover,
.support-card.primary:focus-visible {
  background: #171a1c;
}

.support-card span {
  color: rgba(17, 18, 20, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.support-card.primary span,
.support-card.primary p {
  color: rgba(255, 255, 255, 0.58);
}

.support-card h3 {
  margin: 48px 0 18px;
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 0.98;
  font-weight: 900;
  text-wrap: balance;
}

.support-card p {
  max-width: 420px;
  margin: 0;
  color: rgba(17, 18, 20, 0.66);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 800;
}

.footer {
  padding: clamp(70px, 10vw, 130px) clamp(22px, 6vw, 96px) 38px;
  background: #0f1112;
  color: #fff;
}

.footer-hero {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 48px;
  align-items: start;
  margin-bottom: clamp(70px, 10vw, 128px);
}

.footer-hero img {
  width: min(260px, 70%);
  height: auto;
}

.footer h2 {
  margin: 0;
  font-size: clamp(54px, 8vw, 132px);
  line-height: 0.92;
  font-weight: 900;
  text-wrap: balance;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-columns div {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-columns span {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-columns a,
.footer-bottom {
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 900;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  max-width: 540px;
  margin: 0;
  line-height: 1.45;
}

.section-head {
  width: min(1120px, 100%);
  margin: 0 auto 34px;
}

.section-head h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(38px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: 0;
}

.products-hero {
  min-height: 78svh;
  display: grid;
  align-items: end;
  padding: 132px max(22px, calc((100vw - 1380px) / 2)) 86px;
  background:
    radial-gradient(circle at 82% 16%, rgba(53, 216, 255, 0.16), transparent 26%),
    linear-gradient(180deg, #0d0f10 0%, #090a0b 100%);
  color: #fff;
  overflow: hidden;
}

.products-hero-copy {
  width: min(1080px, 100%);
}

.products-hero h1 {
  max-width: 1060px;
  margin: 0 0 28px;
  font-size: clamp(66px, 13vw, 186px);
  line-height: 0.82;
}

.products-hero p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.25;
  font-weight: 800;
}

.products-family-section,
.products-listing,
.product-specs,
.product-gallery,
.product-downloads,
.product-support {
  padding: 92px max(22px, calc((100vw - 1380px) / 2));
}

.products-family-section,
.product-gallery {
  background: var(--paper);
  color: var(--paper-ink);
}

.products-listing {
  background: #0d0f10;
  color: #fff;
}

.product-family-rail {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.product-family-chip {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  background: rgba(255, 255, 255, 0.42);
}

.product-family-chip span {
  max-width: 180px;
  font-size: 28px;
  line-height: 0.95;
  font-weight: 900;
}

.product-family-chip small {
  color: rgba(17, 18, 20, 0.62);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}

.featured-product {
  min-height: 76svh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.8fr);
  align-items: center;
  gap: 42px;
  padding: 96px max(22px, calc((100vw - 1380px) / 2));
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 61, 110, 0.16), transparent 28%),
    linear-gradient(135deg, #151718, #090a0b);
  color: #fff;
  overflow: hidden;
}

.featured-product h2 {
  max-width: 700px;
  margin: 0 0 20px;
  font-size: clamp(62px, 8vw, 118px);
  line-height: 0.78;
  overflow-wrap: anywhere;
}

.featured-product p:not(.eyebrow) {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.25;
  font-weight: 800;
}

.featured-product img {
  width: min(520px, 100%);
  justify-self: center;
  filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.45));
}

.text-link {
  display: inline-flex;
  margin-top: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

.products-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px) and (min-width: 841px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Catalog filter toolbar */
.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.filter-chip small {
  font-size: 11px;
  font-weight: 900;
  opacity: 0.72; /* 4.5:1 contrast floor on paper background */
}

.filter-chip:hover {
  border-color: rgba(17, 18, 20, 0.6);
}

.filter-chip.active {
  background: #111214;
  border-color: #111214;
  color: #fff;
}

.filter-chip.active small {
  opacity: 0.7;
}

.catalog-search input {
  appearance: none;
  -webkit-appearance: none;
  width: min(340px, 100%);
  padding: 14px 20px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.catalog-search input:focus {
  outline: 2px solid #111214;
  outline-offset: 2px;
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.catalog-reset {
  margin-left: 8px;
  border: none;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

/* Compact catalog card */
.product-card.compact {
  min-height: 0;
  grid-template-rows: auto auto;
  gap: 14px;
  padding: 18px;
}

.product-card.compact img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  align-self: start;
  justify-self: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  filter: none;
}

.product-card.compact .product-card-noimage {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.product-card.compact span {
  margin-bottom: 8px;
  font-size: 10px;
}

.product-card.compact strong {
  max-width: none;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.02;
}

.product-card.compact p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card.compact ul {
  margin: 10px 0 0;
  gap: 6px;
}

.product-card.compact li {
  padding: 5px 7px;
  font-size: 10px;
}

.product-card {
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 26%, rgba(53, 216, 255, 0.15), transparent 30%),
    #151718;
  color: #fff;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.product-card-copy {
  position: relative;
  z-index: 2;
}

.product-card span {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-card strong {
  display: block;
  max-width: 420px;
  font-size: clamp(44px, 7vw, 94px);
  line-height: 0.82;
  font-weight: 900;
}

.product-card p {
  max-width: 420px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

.product-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.product-card li {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
}

.product-card img {
  position: relative;
  z-index: 1;
  width: min(420px, 92%);
  align-self: end;
  justify-self: end;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.45));
  transition: transform 260ms ease;
}

.product-card:hover img {
  transform: translate3d(0, -8px, 0) scale(1.02);
}

.product-detail-hero {
  min-height: 88svh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: 34px;
  padding: 112px max(22px, calc((100vw - 1380px) / 2)) 78px;
  background:
    radial-gradient(circle at 78% 25%, rgba(53, 216, 255, 0.15), transparent 28%),
    linear-gradient(180deg, #0d0f10 0%, #090a0b 100%);
  color: #fff;
  overflow: hidden;
}

.product-detail-copy h1 {
  max-width: 680px;
  margin: 0 0 22px;
  font-size: clamp(70px, 8vw, 124px);
  line-height: 0.74;
  overflow-wrap: normal;
}

.product-detail-copy p:not(.eyebrow) {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.22;
  font-weight: 800;
}

.product-detail-hero img {
  width: min(540px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 34px 58px rgba(0, 0, 0, 0.5));
}

.product-jump-nav {
  position: sticky;
  top: 84px;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 13px 22px;
  background: rgba(13, 15, 16, 0.88);
  backdrop-filter: blur(16px);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-overview {
  padding: 92px max(22px, calc((100vw - 1120px) / 2));
  background: var(--paper);
  color: var(--paper-ink);
}

/* Eyebrows on light (paper/red) detail sections — the global .eyebrow color
   is tuned for dark grounds and disappears here. */
.product-overview .eyebrow,
.product-gallery .eyebrow,
.product-support .eyebrow {
  color: rgba(17, 18, 20, 0.72);
}

/* Reserve space while products.js replaces the server-rendered hero shell,
   so the footer never jumps into view (CLS). */
article[data-product-detail] {
  min-height: 120vh;
}

.product-overview h2 {
  max-width: 940px;
  margin: 0 0 26px;
  font-size: clamp(36px, 6vw, 86px);
  line-height: 0.98;
}

.product-overview p:last-child {
  max-width: 720px;
  color: rgba(17, 18, 20, 0.66);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
}

.feature-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
}

.feature-highlight {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid rgba(17, 18, 20, 0.12);
  background:
    radial-gradient(circle at 80% 18%, rgba(53, 216, 255, 0.2), transparent 32%),
    rgba(255, 255, 255, 0.52);
}

.feature-highlight span {
  color: rgba(17, 18, 20, 0.48);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-highlight strong {
  max-width: 280px;
  color: var(--paper-ink);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 0.95;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.product-specs {
  background: #151718;
  color: #fff;
}

.spec-table {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.spec-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.spec-list div {
  display: grid;
  grid-template-columns: minmax(160px, 0.38fr) minmax(0, 1fr);
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-list div:last-child {
  border-bottom: 0;
}

.spec-list dt {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec-list dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.18;
  font-weight: 900;
}

.gallery-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.gallery-grid figure {
  min-height: 360px;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.gallery-grid figure:first-child {
  grid-row: span 2;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-downloads {
  background: #0d0f10;
  color: #fff;
}

.download-group {
  width: min(1120px, 100%);
  margin: 0 auto 28px;
}

.download-group h3 {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.download-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.download-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.05);
}

.download-card span {
  color: var(--electric);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.download-card strong {
  font-size: 23px;
  line-height: 1;
}

.download-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.download-card small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-support {
  background: var(--red);
  color: var(--paper-ink);
}

.product-support h2 {
  max-width: 820px;
  margin: 0 0 34px;
  font-size: clamp(38px, 7vw, 92px);
  line-height: 0.94;
}

.product-support > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.product-missing {
  min-height: 70svh;
  display: grid;
  place-items: center;
  padding: 120px 22px;
  text-align: center;
}

.page-main {
  background: #0d0f10;
  color: #f4f7f8;
}

.page-hero {
  position: relative;
  min-height: min(76svh, 760px);
  display: grid;
  align-items: end;
  padding: clamp(86px, 12vw, 160px) max(22px, calc((100vw - 1296px) / 2)) clamp(54px, 8vw, 96px);
  overflow: hidden;
  background: #0d0f10;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: auto -12% -28% 28%;
  height: 72%;
  background: radial-gradient(circle, rgba(53, 216, 255, 0.22), transparent 58%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%),
    linear-gradient(180deg, transparent, rgba(13, 15, 16, 0.88));
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 42px);
}

.page-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(68px, 12vw, 184px);
  line-height: 0.82;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-hero-copy {
  max-width: 560px;
  margin: 0 0 0 auto;
  color: rgba(244, 247, 248, 0.68);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.18;
  font-weight: 900;
}

.page-band {
  padding: clamp(72px, 10vw, 132px) max(22px, calc((100vw - 1296px) / 2));
}

.page-band.light {
  background: #eceff1;
  color: #111214;
}

.page-band.dark {
  background: #101213;
  color: #f4f7f8;
}

.page-band.ice {
  background: #e7eaec;
  color: #111214;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244, 247, 248, 0.16);
  border: 1px solid rgba(244, 247, 248, 0.16);
}

.light .page-grid,
.ice .page-grid {
  background: rgba(17, 18, 20, 0.18);
  border-color: rgba(17, 18, 20, 0.18);
}

.page-tile {
  min-height: 300px;
  display: grid;
  align-content: space-between;
  gap: 36px;
  padding: clamp(24px, 4vw, 46px);
  background: #15191c;
  color: #f4f7f8;
}

.page-tile.light {
  background: #f4f7f8;
  color: #111214;
}

.page-tile.accent {
  background: linear-gradient(145deg, #0f252c, #11181c);
}

.page-tile h2,
.page-tile h3 {
  margin: 0;
  font-size: clamp(30px, 3.9vw, 58px);
  line-height: 0.94;
  font-weight: 900;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.contact-email {
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.02;
}

.page-tile p,
.page-copy p,
.page-list li {
  color: currentColor;
  opacity: 0.68;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 800;
}

.page-kicker {
  margin: 0 0 22px;
  color: rgba(244, 247, 248, 0.48);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.light .page-kicker,
.ice .page-kicker {
  color: rgba(17, 18, 20, 0.48);
}

.page-copy {
  display: grid;
  gap: 22px;
  max-width: 960px;
}

.page-copy h2 {
  margin: 18px 0 0;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.96;
  font-weight: 900;
}

.page-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-form {
  display: grid;
  gap: 12px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.page-form input,
.page-form textarea,
.page-form select {
  width: 100%;
  min-height: 54px;
  padding: 16px 18px;
  border: 1px solid rgba(17, 18, 20, 0.18);
  border-radius: 0;
  background: #fff;
  color: #111214;
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
}

.page-form input:focus,
.page-form textarea:focus,
.page-form select:focus {
  outline: 2px solid rgba(17, 18, 20, 0.82);
  outline-offset: 2px;
}

.page-form input[aria-invalid="true"],
.page-form select[aria-invalid="true"] {
  border-color: #b00020;
  background: #fff8f8;
}

.page-form textarea {
  min-height: 150px;
  resize: vertical;
}

.field-error,
.form-status {
  min-height: 18px;
  margin: 0;
  color: #b00020;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}

.form-status.is-success {
  color: #137333;
}

.form-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(17, 18, 20, 0.68);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}

.form-check input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #111214;
}

.page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  background: #111214;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(244, 247, 248, 0.18);
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.light .page-pill,
.ice .page-pill {
  border-color: rgba(17, 18, 20, 0.18);
}

.legal-layout {
  display: grid;
  grid-template-columns: 0.34fr 1fr;
  gap: clamp(32px, 7vw, 96px);
}

.legal-nav {
  position: sticky;
  top: 24px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.legal-nav a {
  color: rgba(17, 18, 20, 0.62);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 840px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .site-header {
    padding: 20px 14px;
  }

  .brand img {
    width: 92px;
  }

  .menu-overlay a {
    font-size: clamp(48px, 16vw, 72px);
    overflow-wrap: anywhere;
  }

  .menu-overlay p {
    max-width: 280px;
    text-align: center;
    line-height: 1.35;
  }

  .hero {
    min-height: auto;
    padding: 84px 14px 70px;
  }

  h1 {
    margin-bottom: 30px;
    font-size: clamp(92px, 31vw, 132px);
  }

  .hero-inner {
    margin-bottom: 32px;
  }

  .hero-meta {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 20px;
    text-align: left;
  }

  .hero-meta span:last-child {
    justify-self: start;
  }

  .hero-media {
    min-height: 580px;
    width: 100vw;
    margin: 0 calc(50% - 50vw) -70px;
  }

  /* Force a single stacked column below the desktop side-by-side breakpoint.
     Without this, two cards (flex-basis 320px each) can still fit side by
     side down to ~665px width via natural flex-wrap, which is narrower than
     this 840px breakpoint where .media-copy/.media-plate switch to the
     near-full-bleed mobile treatment — leaving a band roughly 665-840px wide
     where two half-width cards would each try to render the mobile
     full-bleed layout in half the space, overlapping badly. Stacking here
     also restores each card to its full mobile-appropriate width instead of
     the desktop 560px cap, matching today's single-card mobile look. */
  .media-row {
    flex-direction: column;
  }

  .media-card {
    max-width: none;
    flex: none;
    width: 100%;
    /* Desktop's min-height (tuned for a 560px-capped side-by-side card) is
       far shorter than .hero-media's own mobile height, so each card was
       collapsing to that smaller box -- squeezing the near-full-bleed photo
       and the title into too little vertical space and forcing the title's
       lower half to overlap the bright photo where the white text loses all
       contrast. Match .hero-media's own mobile clamp so a card (and each
       stacked card, in the two-product case) gets the same full-band height
       the single-card design always relied on. */
    min-height: clamp(680px, 74vw, 1000px);
  }

  .media-copy {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 26px;
    z-index: 3;
    max-width: calc(100% - 40px);
  }

  .media-copy strong {
    font-size: clamp(38px, 11vw, 54px);
  }

  .media-plate {
    position: absolute;
    z-index: 3;
    right: 18px;
    left: 18px;
    bottom: 34px;
    width: auto;
    padding: 16px;
  }

  /* Below ~840px .media-copy sits at the TOP of the band while .media-plate
     becomes a near-full-bleed photo underneath it (see rules above).
     .media-specs, as the last copy child, lands directly on the product
     photo, so it needs its own local backdrop to stay readable regardless
     of what image content is behind it. Light backdrop to match the black
     spec text on the flat gray band. */
  .media-specs {
    background: rgba(184, 188, 192, 0.88);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 4px;
  }

  .manifest {
    padding: 82px 14px 92px;
  }

  .manifest > p {
    color: #686a63;
    font-size: 22px;
    line-height: 1.18;
  }

  .metrics {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 54px;
  }

  .metric-card {
    min-height: 220px;
    padding: 20px;
    border-radius: 6px;
  }

  .metric-cyan,
  .metric-sage {
    margin-top: 20px;
  }

  .metric-card strong {
    font-size: 50px;
  }

  .metric-card i {
    margin: 20px 0 16px;
  }

  .metric-card p {
    font-size: 10px;
    line-height: 1.18;
  }

  .showcase {
    padding-top: 62px;
  }

  .showcase-head {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 34px;
    padding-top: 24px;
  }

  .showcase-head h2 {
    font-size: clamp(44px, 14vw, 70px);
  }

  .portfolio-stack {
    width: calc(100% - 28px);
    gap: 18px;
  }

  .portfolio-card {
    min-height: 520px;
    padding: 22px;
    border-radius: 18px;
  }

  .portfolio-card:hover,
  .portfolio-card:focus-within {
    transform: none;
    border-radius: 18px;
  }

  .portfolio-meta {
    padding-bottom: 18px;
    font-size: 12px;
  }

  .portfolio-card h3 {
    max-width: 300px;
    margin-top: 54px;
    font-size: clamp(32px, 9.6vw, 44px);
    line-height: 0.94;
    overflow-wrap: anywhere;
  }

  .portfolio-card p {
    max-width: 260px;
    font-size: 15px;
  }

  .portfolio-card img {
    right: -18%;
    bottom: 18px;
    width: 104vw;
    max-height: 280px;
    opacity: 0.45;
  }

  .card-case img,
  .card-cooling img {
    right: -18%;
    bottom: -18px;
    width: 92vw;
    max-height: 300px;
    opacity: 0.52;
  }

  .split {
    grid-template-columns: 1fr;
    padding-right: 14px;
    padding-left: 14px;
  }

  .split h2 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .split p:not(.eyebrow) {
    font-size: 20px;
  }

  .expertise {
    width: 100%;
    padding: 82px 14px;
  }

  .expertise-row {
    grid-template-columns: 42px 1fr;
  }

  .expertise-row p {
    grid-column: 2;
  }

  .support-head,
  .support-grid,
  .footer-hero,
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .support-hub {
    padding-right: 14px;
    padding-left: 14px;
  }

  .support-head {
    gap: 24px;
    margin-bottom: 34px;
  }

  .support-head h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .support-card {
    min-height: 260px;
  }

  .support-card.primary {
    min-height: 420px;
    grid-row: auto;
  }

  .support-card h3 {
    font-size: clamp(28px, 9vw, 42px);
  }

  .footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .footer h2 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .footer div.footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }

  .footer-hero {
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .footer-columns a,
  .footer-bottom {
    line-height: 1.35;
  }

  .page-hero {
    min-height: auto;
    padding: 70px 14px 58px;
  }

  .page-hero-inner,
  .page-grid,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .page-hero h1 {
    font-size: clamp(56px, 18vw, 86px);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-hero-copy {
    margin-left: 0;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.22;
  }

  .page-band {
    padding: 70px 14px;
  }

  .page-copy h2 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .page-tile h2,
  .page-tile h3 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .page-tile .contact-email {
    font-size: clamp(25px, 7vw, 31px);
  }

  .page-form {
    gap: 10px;
  }

  .page-button {
    width: 100%;
    min-height: 56px;
    text-align: center;
  }

  .page-tile {
    min-height: 240px;
  }

  .legal-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .products-hero {
    min-height: 70svh;
    padding: 96px 18px 58px;
  }

  .products-hero h1,
  .product-detail-copy h1 {
    font-size: clamp(58px, 20vw, 96px);
  }

  .product-detail-copy h1 {
    max-width: 100%;
    font-size: clamp(48px, 16vw, 74px);
    overflow-wrap: anywhere;
  }

  .products-family-section,
  .products-listing,
  .product-specs,
  .product-gallery,
  .product-downloads,
  .product-support,
  .product-overview {
    padding: 64px 18px;
  }

  .product-family-rail,
  .download-list,
  .feature-highlights,
  .product-support > div {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .spec-list div {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .featured-product,
  .product-detail-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 82px 18px 62px;
  }

  .featured-product h2 {
    font-size: clamp(58px, 18vw, 96px);
  }

  .product-card {
    min-height: 520px;
  }

  .product-card strong {
    font-size: clamp(46px, 16vw, 76px);
  }

  .product-jump-nav {
    top: 70px;
    justify-content: start;
    overflow-x: auto;
  }

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

  .gallery-grid figure,
  .gallery-grid figure:first-child {
    min-height: 280px;
    grid-row: auto;
  }
}

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

  h1 {
    font-size: clamp(76px, 29vw, 118px);
  }

  .eyebrow {
    font-size: 11px;
    line-height: 1.35;
  }

  .manifest > p {
    font-size: 20px;
    line-height: 1.2;
  }

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

  .metric-cyan,
  .metric-sage {
    margin-top: 0;
  }

  .metric-card {
    min-height: 188px;
  }

  .metric-card p {
    max-width: 100%;
    font-size: 12px;
  }

  .portfolio-card {
    min-height: 480px;
  }

  .portfolio-meta {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

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

  .page-hero h1 {
    font-size: clamp(40px, 12vw, 46px);
    overflow-wrap: normal;
  }

  .page-tile {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Footer language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switcher a,
.lang-switcher span {
  padding: 8px 12px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 150ms ease, border-color 150ms ease;
}

.lang-switcher a:hover,
.lang-switcher a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.lang-switcher a::after {
  content: none; /* footer link underline animasyonu dil kutularına uygulanmaz */
}

.lang-switcher span[aria-current] {
  color: #0c0e10;
  background: #fff;
  border-color: #fff;
}