@font-face {
  font-family: "Electroline Helvetica";
  src: url("/fonts/Helvetica-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f6f6f2;
  --white: #ffffff;
  --ink: #15171b;
  --muted: #777b82;
  --line: rgba(21, 23, 27, 0.14);
  --brand-blue: #173d7a;
  --brand-blue-logo: #002878;
  --brand-blue-deep: #102b59;
  --brand-blue-soft: #e9eef7;
  --brand-blue-pale: #f2f5fb;
  --brand-yellow: #f5d500;
  --brand-yellow-logo: #e8d030;
  --brand-yellow-soft: #fff7b8;
  --graphite: #25282e;
  --graphite-soft: #eef0f3;
  --steel: var(--muted);
  --navy: var(--brand-blue);
  --signal-yellow: var(--brand-yellow);
  --signal-amber: #d7a900;
  --hairline-dark: rgba(255, 255, 255, 0.22);
  --hairline-light: var(--line);
  --shadow-ambient: rgba(16, 43, 89, 0.12);
  --font-display: "Electroline Helvetica", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace;
  --display-xl: clamp(4.8rem, 11vw, 10.8rem);
  --display-lg: clamp(3.2rem, 7vw, 7.5rem);
  --heading: clamp(2.4rem, 4.6vw, 5rem);
  --body-lg: clamp(1.25rem, 1.75vw, 1.9rem);
  --body: clamp(1rem, 1.08vw, 1.16rem);
  --label: clamp(0.67rem, 0.72vw, 0.78rem);
  --grid-pad: clamp(1rem, 2.4vw, 2.25rem);
  --header-height: 4.75rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  text-rendering: geometricprecision;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

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

:focus-visible {
  outline: 2px solid var(--signal-yellow);
  outline-offset: 4px;
}

::selection {
  background: var(--signal-yellow);
  color: var(--ink);
}

.page {
  position: relative;
  overflow: clip;
  background: var(--ink);
}

.section-pad {
  position: relative;
  min-height: 100svh;
  padding: clamp(6.5rem, 11vw, 10rem) var(--grid-pad);
  overflow: clip;
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 8px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 11px
    );
  mix-blend-mode: screen;
}

.button,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: var(--label);
  font-weight: 650;
}

.button {
  min-height: 3rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid currentColor;
  background: transparent;
  transition:
    background 360ms var(--ease-out),
    color 360ms var(--ease-out),
    transform 360ms var(--ease-out);
}

.button span:last-child {
  transition: transform 360ms var(--ease-out);
}

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

.button:hover span:last-child,
.button:focus-visible span:last-child {
  transform: translate(5px, -3px);
}

.button--light {
  background: var(--white);
  color: var(--ink);
}

.button--light:hover,
.button--light:focus-visible {
  background: var(--signal-yellow);
  color: var(--ink);
}

.button--ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  background: var(--white);
  color: var(--ink);
}

.text-link {
  position: relative;
  padding: 0.2rem 0;
  color: inherit;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: -0.2rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
}

.section-label {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--label);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-label::before {
  display: block;
  width: 1.1rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.section-label--light {
  color: var(--ink);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: max(1rem, env(safe-area-inset-top));
  left: var(--grid-pad);
  right: var(--grid-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-height);
  color: var(--white);
  pointer-events: none;
  transition:
    color 280ms var(--ease-out),
    transform 280ms var(--ease-out);
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.site-header--light {
  color: var(--ink);
}

.site-header--menu-open {
  color: var(--white);
}

.site-header__brand {
  width: clamp(7.8rem, 12vw, 10.4rem);
  padding: 0.35rem;
  justify-self: start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.site-header__brand img {
  width: 100%;
  height: auto;
}

.site-header__enquire {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-width: 7.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  color: currentColor;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 280ms var(--ease-out),
    color 280ms var(--ease-out);
}

.menu-button:hover,
.menu-button:focus-visible {
  background: var(--signal-yellow);
  color: var(--ink);
}

.menu-button__icon {
  position: relative;
  width: 1.1rem;
  height: 0.58rem;
}

.menu-button__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 280ms var(--ease-out);
}

.menu-button__icon span:first-child {
  top: 0;
}

.menu-button__icon span:last-child {
  bottom: 0;
}

.menu-button.is-open .menu-button__icon span:first-child {
  transform: translateY(0.28rem) rotate(45deg);
}

.menu-button.is-open .menu-button__icon span:last-child {
  transform: translateY(-0.28rem) rotate(-45deg);
}

.menu-overlay {
  position: fixed;
  z-index: 95;
  inset: 0;
  display: grid;
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--header-height) + 2.4rem) var(--grid-pad) var(--grid-pad);
  color: var(--white);
  background: var(--ink);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1.5rem);
  transition:
    opacity 360ms var(--ease-out),
    transform 520ms var(--ease-out),
    visibility 0s linear 520ms;
}

.menu-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--ease-out),
    transform 520ms var(--ease-out),
    visibility 0s linear 0s;
}

.menu-overlay__signal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--signal-yellow);
  transition: width 720ms var(--ease-out);
}

.menu-overlay.is-open .menu-overlay__signal {
  width: 100%;
}

.menu-overlay__top,
.menu-overlay__contact {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-overlay__close {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  color: var(--white);
  background: transparent;
  text-transform: uppercase;
}

.menu-overlay__nav {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 86rem;
}

.menu-overlay__link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline-dark);
  color: var(--white);
}

.menu-overlay__link span {
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
}

.menu-overlay__link strong {
  font-size: clamp(2.65rem, 9vw, 8.2rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: transform 420ms var(--ease-out);
}

.menu-overlay__link:hover strong,
.menu-overlay__link:focus-visible strong {
  transform: translateX(1.1rem);
}

.menu-overlay__contact {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3rem, 6vw, 6rem) var(--grid-pad) 2rem;
  overflow: clip;
  color: var(--white);
  background: var(--ink);
  border-top: 1px solid var(--hairline-dark);
}

.site-footer__brand img {
  width: 11rem;
  margin-bottom: 1.3rem;
}

.site-footer__brand p,
.site-footer__copyright {
  margin: 0;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__nav,
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-style: normal;
}

.site-footer__nav a,
.site-footer__contact a {
  width: max-content;
}

.site-footer__location,
.site-footer__channels {
  display: grid;
  gap: 0.2rem;
  line-height: 1.45;
}

.site-footer__location + .site-footer__location {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.site-footer__location strong {
  margin-bottom: 0.2rem;
  color: var(--brand-blue);
  font-size: var(--label);
  font-weight: 600;
  text-transform: uppercase;
}

.site-footer__channels {
  margin-top: 0.8rem;
}

.site-footer__copyright {
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-dark);
}

@media (max-width: 760px) {
  :root {
    --header-height: 4rem;
    --grid-pad: 1rem;
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
  }

  .site-header__brand {
    width: 7.1rem;
  }

  .menu-button {
    min-width: 3rem;
    width: 3rem;
    padding: 0;
  }

  .menu-button > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .site-header__enquire {
    font-size: 0.68rem;
  }

  .menu-overlay__link {
    grid-template-columns: 2.6rem 1fr;
    gap: 0.8rem;
  }

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

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

.home-hero,
.hdmi-hero {
  position: relative;
  height: 235svh;
  min-height: 62rem;
  overflow: clip;
  color: var(--white);
  background: var(--ink);
}

.home-hero__stage,
.hdmi-hero__stage,
.product-ecosystem__stage,
.hdmi-anatomy__stage,
.hdmi-capabilities__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: clip;
}

.home-hero__stage,
.hdmi-hero__stage {
  isolation: isolate;
  padding: clamp(6.4rem, 9vw, 8.4rem) var(--grid-pad) var(--grid-pad);
  background:
    radial-gradient(circle at 72% 18%, rgba(18, 60, 120, 0.48), transparent 32rem),
    radial-gradient(circle at 18% 74%, rgba(244, 213, 0, 0.1), transparent 22rem),
    linear-gradient(120deg, #07090b 0%, var(--graphite) 48%, #060708 100%);
}

.home-hero__meta,
.hdmi-hero__eyebrow {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero__light {
  position: absolute;
  z-index: 1;
  inset: -20% auto -20% -42%;
  width: 68%;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.32), transparent 58%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  filter: blur(12px);
  opacity: 0.35;
  transform: skewX(-15deg);
  pointer-events: none;
}

.home-hero__signal {
  position: absolute;
  z-index: 2;
  right: -10vw;
  bottom: 18vh;
  width: min(72rem, 82vw);
  opacity: 0.92;
}

.home-hero__title {
  position: absolute;
  z-index: 4;
  left: var(--grid-pad);
  bottom: clamp(3.3rem, 8vh, 6rem);
  margin: 0;
  font-size: var(--display-xl);
  font-weight: 520;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  transform-origin: left bottom;
}

.home-hero__title span,
.product-ecosystem__statement span,
.credibility__statement span,
.hdmi-hero__title span {
  display: block;
}

.home-hero__tagline {
  position: absolute;
  z-index: 4;
  right: var(--grid-pad);
  top: 48%;
  max-width: 13rem;
  margin: 0;
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.home-hero__tagline::before {
  display: block;
  width: 5rem;
  height: 1px;
  margin-bottom: 1rem;
  content: "";
  background: currentColor;
}

.home-hero__since {
  position: absolute;
  z-index: 4;
  right: var(--grid-pad);
  bottom: 23vh;
  color: var(--paper);
  font-size: clamp(2rem, 5vw, 5.6rem);
  font-weight: 500;
  line-height: 0.92;
  text-transform: uppercase;
  opacity: 0;
}

.home-hero__copy {
  position: absolute;
  z-index: 5;
  right: var(--grid-pad);
  bottom: clamp(2rem, 6vh, 4.4rem);
  max-width: min(31rem, 42vw);
  opacity: 0;
}

.home-hero__copy p {
  margin: 0 0 1.4rem;
  color: var(--paper);
  font-size: var(--body-lg);
  line-height: 1.08;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.home-hero__handover {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38vh;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: bottom center;
  opacity: 0;
}

.brand-intro {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 34%, rgba(244, 213, 0, 0.2), transparent 22rem),
    var(--paper);
}

.brand-intro__signal {
  position: absolute;
  z-index: 1;
  right: -8vw;
  top: 12vh;
  width: min(78rem, 96vw);
  opacity: 0.68;
}

.brand-intro__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.2rem;
  min-height: 70svh;
  align-items: end;
}

.brand-intro__kicker {
  grid-column: 1 / 4;
  align-self: start;
  margin: clamp(5rem, 10vw, 9rem) 0 0;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-intro__year {
  grid-column: 1 / 8;
  display: flex;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(8rem, 28vw, 24rem);
  font-weight: 520;
  line-height: 0.76;
  letter-spacing: 0;
}

.brand-intro__copy {
  grid-column: 8 / 13;
  grid-row: 1 / 3;
  align-self: center;
  max-width: 44rem;
}

.brand-intro__copy p {
  margin: 0 0 1.2rem;
  font-size: var(--body-lg);
  line-height: 1.12;
}

.brand-intro__meta {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: clamp(2rem, 5vw, 5rem) 0 0;
  border-top: 1px solid var(--hairline-light);
}

.brand-intro__meta div {
  padding: 1.1rem 1rem 0 0;
  border-right: 1px solid var(--hairline-light);
}

.brand-intro__meta div:last-child {
  border-right: 0;
}

.brand-intro__meta dt,
.brand-intro__meta dd {
  margin: 0;
}

.brand-intro__meta dt {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-intro__meta dd {
  margin-top: 0.45rem;
  font-size: clamp(1.2rem, 2vw, 2rem);
  line-height: 1.04;
}

.product-ecosystem {
  position: relative;
  height: 550svh;
  min-height: 190rem;
  color: var(--white);
  background: var(--ink);
}

.product-ecosystem__stage {
  padding: clamp(6.4rem, 9vw, 8rem) var(--grid-pad) var(--grid-pad);
  background:
    radial-gradient(circle at 80% 30%, rgba(244, 213, 0, 0.12), transparent 24rem),
    linear-gradient(135deg, #080a0c, var(--graphite) 52%, #060708);
}

.product-ecosystem__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(18rem, 0.92fr) minmax(14rem, 0.55fr) minmax(20rem, 1fr);
  gap: clamp(1.6rem, 4vw, 5rem);
  height: calc(100svh - 10rem);
  align-items: end;
  padding-top: clamp(3rem, 8vh, 6rem);
}

.product-ecosystem__statement {
  max-width: 48rem;
  margin: 0 0 clamp(2rem, 5vh, 4rem);
  overflow: hidden;
  color: var(--paper);
  font-size: clamp(2.7rem, 6vw, 6.8rem);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.product-ecosystem__index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline-dark);
}

.category-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0;
  color: var(--steel);
  background: transparent;
  border-bottom: 1px solid var(--hairline-dark);
  text-align: left;
  text-transform: uppercase;
  transition:
    color 280ms var(--ease-out),
    transform 280ms var(--ease-out);
}

.category-row span {
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
}

.category-row strong {
  font-size: clamp(1rem, 1.4vw, 1.42rem);
  font-weight: 520;
}

.category-row:hover,
.category-row:focus-visible,
.category-row.is-active {
  color: var(--white);
  transform: translateX(0.5rem);
}

.product-ecosystem__center {
  align-self: center;
  min-height: 25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--signal-yellow);
}

.product-ecosystem__center > span {
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
}

.product-ecosystem__center h2 {
  margin: 1rem 0 1.2rem;
  font-size: clamp(3.5rem, 7vw, 8.8rem);
  font-weight: 520;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

.product-ecosystem__center p {
  max-width: 24rem;
  margin: 0 0 1.8rem;
  color: var(--steel);
  font-size: var(--body);
  line-height: 1.42;
}

.product-ecosystem__cta {
  color: var(--white);
}

.product-ecosystem__cta--button {
  color: var(--steel);
  background: transparent;
}

.product-ecosystem__visual {
  position: relative;
  align-self: stretch;
  min-height: 28rem;
  border-left: 1px solid var(--hairline-dark);
}

.product-ecosystem__signal {
  position: absolute;
  inset: 13% 0 auto -1px;
  height: 1px;
  background: var(--signal-yellow);
  opacity: 0.86;
}

.product-ecosystem__signal span {
  position: absolute;
  top: -0.35rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--signal-yellow);
  background: var(--ink);
}

.product-ecosystem__signal span:first-child {
  left: 0;
  transform: translateX(-50%);
}

.product-ecosystem__signal span:last-child {
  right: 8%;
}

.abstract-cue {
  position: absolute;
  inset: 13% 0 0 0;
  display: grid;
  place-items: center;
  color: var(--signal-yellow);
  animation: cue-arrive 620ms var(--ease-out) both;
}

.abstract-cue svg {
  width: min(42rem, 100%);
  min-width: 20rem;
}

.abstract-cue path,
.abstract-cue rect,
.abstract-cue circle {
  vector-effect: non-scaling-stroke;
}

.abstract-cue__signal {
  stroke: var(--signal-yellow);
  stroke-width: 2;
  stroke-linecap: round;
}

.abstract-cue__soft {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  stroke-linecap: round;
}

.cue-cable,
.cue-audio,
.cue-loop,
.cue-bud-wire {
  stroke: var(--white);
  stroke-width: 12;
  stroke-linecap: round;
}

.cue-connector,
.cue-audio-block,
.cue-block,
.cue-plug,
.cue-bud {
  fill: rgba(255, 255, 255, 0.08);
  stroke: var(--white);
  stroke-width: 2;
}

.cue-connector--small,
.cue-meter--live,
.cue-charge,
.cue-gold {
  stroke: var(--signal-yellow);
}

.cue-meter,
.cue-prong,
.cue-socket,
.cue-ring {
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
}

.cue-meter--live,
.cue-charge {
  stroke-width: 5;
  fill: none;
}

.cue-ring,
.cue-node {
  fill: rgba(255, 255, 255, 0.04);
}

@keyframes cue-arrive {
  from {
    opacity: 0;
    transform: translate3d(2.5rem, 0, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.credibility {
  color: var(--white);
  background:
    linear-gradient(90deg, transparent 0, transparent 50%, rgba(244, 213, 0, 0.08) 50%, transparent 72%),
    var(--graphite);
}

.credibility__line {
  position: absolute;
  top: 38%;
  left: var(--grid-pad);
  right: var(--grid-pad);
  height: 1px;
  background: var(--signal-yellow);
}

.credibility__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.55fr);
  gap: clamp(2rem, 8vw, 8rem);
  min-height: 68svh;
  align-items: end;
}

.credibility__statement {
  margin: 0;
  overflow: hidden;
  font-size: var(--heading);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.credibility__copy {
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-dark);
}

.credibility__copy p {
  margin: 0 0 2rem;
  color: var(--paper);
  font-size: var(--body);
  line-height: 1.5;
}

.credibility__copy ul {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enquiry,
.hdmi-enquiry {
  min-height: 100svh;
  color: var(--white);
  background:
    radial-gradient(circle at 78% 16%, rgba(18, 60, 120, 0.38), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(244, 213, 0, 0.12), transparent 24rem),
    var(--ink);
}

.enquiry__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--signal-yellow);
  opacity: 0.45;
}

.enquiry__grid,
.hdmi-enquiry__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 0.78fr);
  gap: clamp(2rem, 6vw, 7rem);
  min-height: 70svh;
  align-items: end;
}

.enquiry__statement h2,
.hdmi-enquiry h2 {
  max-width: 62rem;
  margin: 0;
  font-size: var(--heading);
  font-weight: 500;
  line-height: 0.92;
  text-transform: uppercase;
}

.enquiry__statement p {
  max-width: 35rem;
  margin: 2rem 0 0;
  color: var(--steel);
  font-size: var(--body);
  line-height: 1.45;
}

.enquiry-form {
  scroll-margin-top: calc(var(--header-height) + 1rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  color: var(--white);
}

.form-field {
  display: grid;
  gap: 0.4rem;
}

.form-field--full,
.form-submit,
.form-contact,
.form-message {
  grid-column: 1 / -1;
}

.form-field label {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.85rem 0;
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-dark);
  border-radius: 0;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--signal-yellow);
  outline: 0;
}

.form-field select option {
  color: var(--ink);
}

.form-submit {
  margin-top: 1rem;
  justify-self: start;
}

.form-contact {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.4rem;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.form-contact__locations {
  display: grid;
  gap: 1rem;
}

.form-contact__location {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-style: normal;
  line-height: 1.45;
}

.form-contact__location strong {
  margin-bottom: 0.2rem;
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
}

.form-contact__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  text-transform: uppercase;
}

.form-message {
  margin: 0.6rem 0 0;
  color: var(--signal-yellow);
  font-size: var(--body);
}

.form-message--error {
  color: #ff9f7e;
}

.hdmi-hero {
  height: 170svh;
  min-height: 56rem;
}

.hdmi-hero__signal {
  position: absolute;
  z-index: 2;
  left: -8vw;
  bottom: 24vh;
  width: min(82rem, 95vw);
}

.hdmi-hero__eyebrow a {
  color: var(--white);
}

.hdmi-hero__title {
  position: absolute;
  z-index: 3;
  left: var(--grid-pad);
  bottom: clamp(9rem, 16vh, 13rem);
  margin: 0;
  overflow: hidden;
  font-size: var(--display-xl);
  font-weight: 520;
  line-height: 0.84;
  text-transform: uppercase;
  transform-origin: left bottom;
}

.hdmi-hero__connector {
  position: absolute;
  z-index: 2;
  right: var(--grid-pad);
  top: 28%;
  width: min(38rem, 43vw);
  color: var(--white);
  opacity: 0;
}

.connector-cable {
  stroke: var(--white);
  stroke-width: 22;
  stroke-linecap: round;
}

.connector-cable--shadow {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 3;
}

.connector-body {
  fill: #252a2e;
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 2;
}

.connector-tip {
  fill: #111315;
  stroke: var(--signal-yellow);
  stroke-width: 2;
}

.connector-contact {
  stroke: var(--signal-yellow);
  stroke-width: 3;
  stroke-linecap: round;
}

.hdmi-hero__line {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 34vh;
  width: 47vw;
  height: 1px;
  background: var(--signal-yellow);
  transform: scaleX(0);
  transform-origin: right center;
}

.hdmi-hero__copy {
  position: absolute;
  z-index: 4;
  right: var(--grid-pad);
  bottom: clamp(2.2rem, 6vh, 5rem);
  max-width: 32rem;
}

.hdmi-hero__copy p {
  margin: 0 0 1.3rem;
  color: var(--paper);
  font-size: var(--body-lg);
  line-height: 1.12;
}

.hdmi-hero__copy .hdmi-hero__label {
  margin-bottom: 0.6rem;
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hdmi-anatomy {
  position: relative;
  height: 330svh;
  min-height: 120rem;
  color: var(--ink);
  background: var(--paper);
}

.hdmi-anatomy__stage {
  padding: clamp(6.4rem, 9vw, 8rem) var(--grid-pad) var(--grid-pad);
}

.hdmi-anatomy__heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(3rem, 8vh, 6rem);
}

.hdmi-anatomy__heading h2 {
  max-width: 68rem;
  margin: 0;
  font-size: var(--heading);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.hdmi-anatomy__heading p {
  margin: 0;
  color: var(--graphite);
  font-size: var(--body);
  line-height: 1.45;
}

.hdmi-anatomy__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.45fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  min-height: 52svh;
  margin-top: clamp(2rem, 6vh, 5rem);
}

.hdmi-anatomy__diagram {
  position: relative;
  min-height: 24rem;
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}

.hdmi-anatomy__diagram svg {
  width: min(57rem, 100%);
  margin: 0 auto;
}

.hdmi-anatomy__diagram path,
.hdmi-anatomy__diagram rect {
  vector-effect: non-scaling-stroke;
}

.anatomy-cable-outer,
.anatomy-cable-shield,
.anatomy-cable-core,
.anatomy-housing,
.anatomy-contact,
.anatomy-wires path,
.anatomy-gold,
.anatomy-leader {
  transition:
    opacity 360ms var(--ease-out),
    stroke 360ms var(--ease-out),
    fill 360ms var(--ease-out),
    transform 360ms var(--ease-out);
}

.anatomy-cable-outer {
  stroke: var(--graphite);
  stroke-width: 36;
  stroke-linecap: round;
}

.anatomy-cable-shield {
  stroke: rgba(18, 60, 120, 0.5);
  stroke-width: 22;
  stroke-linecap: round;
}

.anatomy-cable-core {
  stroke: var(--signal-amber);
  stroke-width: 9;
  stroke-linecap: round;
}

.anatomy-wires path {
  stroke: var(--navy);
  stroke-width: 4;
  stroke-linecap: round;
}

.anatomy-housing {
  fill: #24282b;
  stroke: rgba(9, 11, 13, 0.35);
}

.anatomy-contact {
  fill: #121517;
  stroke: var(--signal-amber);
  stroke-width: 2;
}

.anatomy-gold {
  stroke: var(--signal-yellow);
  stroke-width: 4;
  stroke-linecap: round;
}

.anatomy-leader {
  stroke: var(--steel);
  stroke-width: 1;
  stroke-dasharray: 4 7;
}

.hdmi-anatomy__labels {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-light);
}

.hdmi-anatomy__labels li {
  border-bottom: 1px solid var(--hairline-light);
}

.hdmi-anatomy__label {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.35rem 0.9rem;
  width: 100%;
  padding: 1rem 0;
  color: #5b687a;
  background: transparent;
  text-align: left;
}

.hdmi-anatomy__labels span,
.hdmi-anatomy__labels em {
  font-family: var(--font-mono);
  font-size: var(--label);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hdmi-anatomy__labels strong {
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  font-weight: 540;
  color: var(--ink);
  text-transform: uppercase;
}

.hdmi-anatomy__labels em {
  grid-column: 2;
  color: #5b687a;
  line-height: 1.35;
}

.hdmi-anatomy__labels li {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.hdmi-page .hdmi-anatomy__labels li:hover {
  background: var(--brand-blue-pale);
  box-shadow: inset 3px 0 var(--brand-blue);
}

.hdmi-page .hdmi-anatomy__labels li:hover span {
  color: var(--brand-blue);
}

.anatomy-active-0 .anatomy-cable-outer,
.anatomy-active-1 .anatomy-cable-shield,
.anatomy-active-2 .anatomy-cable-core,
.anatomy-active-3 .anatomy-contact,
.anatomy-active-3 .anatomy-gold,
.anatomy-active-4 .anatomy-housing {
  filter: drop-shadow(0 0 12px rgba(244, 213, 0, 0.26));
}

.hdmi-capabilities {
  position: relative;
  height: 390svh;
  min-height: 128rem;
  color: var(--white);
  background: var(--ink);
}

.hdmi-capabilities__stage {
  padding: clamp(6.4rem, 9vw, 8rem) var(--grid-pad) var(--grid-pad);
  background:
    radial-gradient(circle at 70% 40%, rgba(18, 60, 120, 0.44), transparent 26rem),
    var(--ink);
}

.hdmi-capabilities__rail {
  position: absolute;
  top: 52%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--signal-yellow);
  opacity: 0.56;
}

.hdmi-capabilities__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.36fr);
  gap: clamp(2rem, 6vw, 6rem);
  min-height: 72svh;
  align-items: center;
}

.hdmi-capabilities__word {
  margin: 0;
  font-size: clamp(4rem, 15vw, 14rem);
  font-weight: 520;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hdmi-capabilities__index {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-dark);
}

.hdmi-capabilities__index li {
  border-bottom: 1px solid var(--hairline-dark);
}

.hdmi-capabilities__index button {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 0;
  color: var(--steel);
  background: transparent;
  text-align: left;
  text-transform: uppercase;
}

.hdmi-capabilities__index span {
  color: var(--signal-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
}

.hdmi-capabilities__index strong {
  font-weight: 520;
}

.hdmi-capabilities__index .is-active button,
.hdmi-capabilities__index button:hover,
.hdmi-capabilities__index button:focus-visible {
  color: var(--white);
}

.hdmi-compat {
  color: var(--ink);
  background: var(--paper);
}

.hdmi-compat__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 0.62fr);
  gap: clamp(2rem, 6vw, 7rem);
  min-height: 68svh;
  align-items: end;
}

.hdmi-compat h2 {
  margin: 0;
  font-size: var(--heading);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.hdmi-compat p {
  margin: 0 0 1.7rem;
  font-size: var(--body);
  line-height: 1.48;
}

.hdmi-compat ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.6rem;
  padding: 1rem 0 1.6rem;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-light);
}

.hdmi-compat li {
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hdmi-enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 2rem;
}

@media (max-width: 1024px) {
  .product-ecosystem__layout,
  .hdmi-anatomy__heading,
  .hdmi-anatomy__content,
  .hdmi-capabilities__layout,
  .hdmi-compat__grid,
  .enquiry__grid,
  .hdmi-enquiry__grid,
  .credibility__grid {
    grid-template-columns: 1fr;
  }

  .brand-intro__copy {
    grid-column: 7 / 13;
  }

  .product-ecosystem__layout,
  .hdmi-capabilities__layout {
    align-items: start;
    height: auto;
  }

  .product-ecosystem__center {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .home-hero,
  .hdmi-hero,
  .product-ecosystem,
  .hdmi-anatomy,
  .hdmi-capabilities {
    height: auto;
    min-height: 0;
  }

  .home-hero__stage,
  .hdmi-hero__stage,
  .product-ecosystem__stage,
  .hdmi-anatomy__stage,
  .hdmi-capabilities__stage {
    position: relative;
    min-height: 100svh;
  }

  .home-hero__stage,
  .hdmi-hero__stage,
  .product-ecosystem__stage,
  .hdmi-anatomy__stage,
  .hdmi-capabilities__stage {
    padding-top: 6.4rem;
  }

  .home-hero__meta,
  .hdmi-hero__eyebrow {
    flex-direction: column;
    gap: 0.45rem;
  }

  .home-hero__signal,
  .hdmi-hero__signal {
    width: 56rem;
    right: -28rem;
    bottom: 36vh;
  }

  .home-hero__title,
  .hdmi-hero__title {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 20svh;
    font-size: clamp(3.25rem, 14.5vw, 6.4rem);
  }

  .home-hero__tagline,
  .home-hero__since,
  .home-hero__copy,
  .hdmi-hero__copy,
  .hdmi-hero__connector,
  .hdmi-hero__line {
    position: relative;
    inset: auto;
  }

  .home-hero__tagline {
    margin-top: 2rem;
  }

  .home-hero__since,
  .home-hero__copy,
  .hdmi-hero__copy {
    max-width: none;
    margin-top: 2rem;
    opacity: 1;
  }

  .home-hero__handover {
    display: none;
  }

  .hdmi-hero__connector {
    width: 100%;
    margin: 1.5rem 0;
    opacity: 1;
  }

  .brand-intro__grid,
  .brand-intro__meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .brand-intro__kicker,
  .brand-intro__year,
  .brand-intro__copy,
  .brand-intro__meta {
    grid-column: auto;
    grid-row: auto;
  }

  .brand-intro__year {
    font-size: clamp(6rem, 34vw, 9rem);
  }

  .brand-intro__meta div {
    border-right: 0;
    border-bottom: 1px solid var(--hairline-light);
  }

  .product-ecosystem__layout {
    padding-top: 3rem;
  }

  .product-ecosystem__visual {
    min-height: 20rem;
    border-left: 0;
    border-top: 1px solid var(--hairline-dark);
  }

  .abstract-cue {
    position: relative;
    inset: auto;
    padding: 2rem 0;
  }

  .product-ecosystem__signal {
    display: none;
  }

  .enquiry-form {
    grid-template-columns: 1fr;
  }

  .hdmi-anatomy__diagram {
    min-height: 16rem;
  }

  .hdmi-compat ul {
    grid-template-columns: 1fr;
  }

  .hdmi-capabilities__word {
    font-size: clamp(3rem, 13vw, 4.15rem);
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__since,
  .home-hero__copy,
  .home-hero__handover,
  .hdmi-hero__connector,
  .hdmi-hero__line,
  .hdmi-hero__copy {
    opacity: 1;
    transform: none;
  }
}

/* Light-first Electroline art-direction revision */
html,
body {
  background: var(--paper);
  color: var(--ink);
}

.page {
  background: var(--paper);
}

.grain,
.home-hero__signal,
.brand-intro__signal,
.hdmi-hero__signal,
.product-ecosystem__signal {
  display: none;
}

.button--light {
  background: var(--brand-blue);
  color: var(--white);
  border-color: var(--brand-blue);
}

.button--light:hover,
.button--light:focus-visible {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--ink);
}

.button--ghost {
  color: var(--brand-blue);
  background: transparent;
  border-color: var(--line);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}

.section-label,
.section-label--light {
  color: var(--brand-blue);
}

.enquiry .section-label,
.hdmi-capabilities .section-label,
.hdmi-enquiry .section-label {
  color: var(--white);
}

.site-header {
  color: var(--brand-blue);
}

.site-header--dark {
  color: var(--white);
}

.site-header--menu-open {
  color: var(--brand-blue);
}

.site-header__brand {
  width: clamp(7.2rem, 10vw, 9.6rem);
  padding: 0;
  background: transparent;
  border: 0;
}

.site-header__enquire {
  color: currentColor;
}

.site-header__enquire::after {
  display: block;
  width: 0;
  height: 2px;
  margin-top: 0.3rem;
  content: "";
  background: var(--brand-yellow);
  transition: width 260ms var(--ease-out);
}

.site-header__enquire:hover::after,
.site-header__enquire:focus-visible::after {
  width: 100%;
}

.menu-button {
  min-width: auto;
  min-height: 2rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: currentColor;
}

.menu-button:hover,
.menu-button:focus-visible {
  background: transparent;
  color: var(--brand-blue-logo);
}

.menu-overlay {
  color: var(--ink);
  background: var(--paper);
}

.menu-overlay__signal {
  top: auto;
  bottom: 29%;
  background: var(--brand-yellow);
}

.menu-overlay__top,
.menu-overlay__contact {
  color: var(--muted);
}

.menu-overlay__close {
  color: var(--brand-blue);
}

.menu-overlay__link {
  border-bottom: 1px solid var(--line);
  color: var(--brand-blue-deep);
}

.menu-overlay__link span {
  color: var(--brand-yellow);
}

.menu-overlay__link strong {
  font-size: clamp(2.5rem, 6.4vw, 6.2rem);
  line-height: 0.96;
  text-transform: none;
}

.site-footer {
  color: var(--ink);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.site-footer__brand p,
.site-footer__copyright {
  color: var(--muted);
}

.site-footer__copyright {
  border-top: 1px solid var(--line);
}

.home-hero,
.hdmi-hero {
  color: var(--ink);
  background: var(--paper);
}

.home-hero__stage,
.hdmi-hero__stage {
  background:
    linear-gradient(90deg, transparent 0%, transparent 66%, var(--brand-blue-soft) 66%, var(--brand-blue-soft) 100%),
    var(--paper);
}

.home-hero__light {
  inset: 18% auto auto -10%;
  width: 42%;
  height: 54%;
  background: var(--brand-yellow-soft);
  filter: none;
  opacity: 0.62;
  transform: skewX(-8deg);
}

.home-hero__blue-plane {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(31vw, 32rem);
  background: var(--brand-blue);
  transform: scaleX(0.84);
  transform-origin: right center;
  opacity: 0.98;
}

.home-hero__rule {
  position: absolute;
  z-index: 3;
  left: var(--grid-pad);
  right: var(--grid-pad);
  top: 49%;
  height: 2px;
  background: var(--brand-yellow);
  transform: scaleX(0.18);
  transform-origin: left center;
}

.home-hero__meta,
.hdmi-hero__eyebrow {
  color: var(--brand-blue-deep);
}

.home-hero__title {
  color: var(--brand-blue);
  max-width: 72vw;
}

.home-hero__tagline {
  right: clamp(1.2rem, 4vw, 4rem);
  top: 42%;
  padding: 0.7rem 0.9rem;
  max-width: none;
  color: var(--brand-blue-deep);
  background: var(--brand-yellow);
}

.home-hero__tagline::before {
  display: none;
}

.home-hero__since {
  color: var(--brand-blue);
}

.home-hero__copy p {
  color: var(--ink);
  line-height: 1.18;
}

.home-hero__handover {
  background: var(--paper);
}

.brand-intro {
  color: var(--ink);
  background: var(--paper);
}

.brand-intro__grid {
  align-items: start;
}

.brand-intro__kicker {
  color: var(--brand-yellow);
}

.brand-intro__year {
  grid-column: 1 / 6;
  align-self: end;
  color: var(--brand-blue);
  font-size: clamp(6rem, 18vw, 17rem);
}

.brand-intro__copy {
  grid-column: 6 / 13;
  grid-row: 1 / 2;
  align-self: start;
  max-width: 58rem;
  padding-top: clamp(4rem, 8vw, 7rem);
}

.brand-intro__copy p:first-child {
  font-size: clamp(2.15rem, 4.2vw, 4.85rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--ink);
}

.brand-intro__copy p:last-child {
  max-width: 42rem;
  color: var(--muted);
  font-size: var(--body-lg);
  line-height: 1.35;
}

.brand-intro__meta {
  border-top: 1px solid var(--line);
}

.brand-intro__meta div {
  border-right: 1px solid var(--line);
}

.product-ecosystem {
  height: 460svh;
  color: var(--ink);
  background: var(--white);
}

.product-ecosystem__stage {
  padding: clamp(6.4rem, 9vw, 8rem) var(--grid-pad) var(--grid-pad);
  background: var(--white);
}

.product-ecosystem__layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.25rem);
  align-items: stretch;
  min-height: calc(100svh - 10rem);
  height: auto;
}

.product-ecosystem__left {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.25rem);
}

.product-ecosystem__statement {
  grid-column: 5 / 11;
  max-width: 58rem;
  margin: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 7rem);
  color: var(--ink);
  font-size: clamp(2.4rem, 5vw, 5.6rem);
  line-height: 1.02;
  text-transform: none;
}

.product-ecosystem__index {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(7, minmax(10rem, 1fr));
  gap: 0;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.category-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 10rem;
  min-height: 8rem;
  padding: 1rem;
  color: var(--muted);
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.category-row span {
  color: var(--brand-yellow);
}

.category-row strong {
  font-size: clamp(0.94rem, 1.12vw, 1.12rem);
  line-height: 1.12;
}

.category-row:hover,
.category-row:focus-visible,
.category-row.is-active {
  color: var(--brand-blue-deep);
  background: var(--brand-blue-soft);
  transform: translateY(-0.35rem);
}

.product-ecosystem__center {
  grid-column: 1 / 5;
  align-self: end;
  min-height: auto;
  padding: 1.35rem 0 0;
  border-top: 2px solid var(--brand-yellow);
}

.product-ecosystem__center > span {
  color: var(--brand-yellow);
}

.product-ecosystem__center h2 {
  margin: 0.9rem 0 1rem;
  color: var(--brand-blue);
  font-size: clamp(2.4rem, 4.8vw, 5.4rem);
  line-height: 0.94;
}

.product-ecosystem__center p {
  max-width: 31rem;
  color: var(--muted);
  line-height: 1.5;
}

.product-ecosystem__cta {
  color: var(--brand-blue);
}

.product-ecosystem__visual {
  grid-column: 5 / 13;
  min-height: min(42rem, 52svh);
  border-left: 0;
}

.product-ecosystem__panel {
  position: relative;
  display: grid;
  min-height: 100%;
  overflow: hidden;
  background: var(--brand-blue-soft);
  border: 1px solid var(--line);
  animation: cue-arrive 620ms var(--ease-out) both;
}

.product-ecosystem__panel--hdmi {
  background: var(--brand-blue-soft);
}

.product-ecosystem__panel--power-banks,
.product-ecosystem__panel--mobile-chargers {
  background: var(--brand-yellow-soft);
}

.product-ecosystem__panel--headphones,
.product-ecosystem__panel--neckbands {
  background: var(--brand-blue);
}

.product-ecosystem__panel--car-chargers,
.product-ecosystem__panel--earphones {
  background: var(--paper);
}

.product-ecosystem__panel img {
  align-self: center;
  justify-self: center;
  width: min(42rem, 72%);
  mix-blend-mode: multiply;
}

.product-ecosystem__panel-index {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
}

.product-ecosystem__panel-word {
  align-self: end;
  padding: clamp(2rem, 5vw, 4rem);
  color: var(--brand-blue);
  font-size: clamp(4.2rem, 11vw, 12rem);
  font-weight: 500;
  line-height: 0.82;
  text-transform: uppercase;
}

.product-ecosystem__panel--headphones .product-ecosystem__panel-word,
.product-ecosystem__panel--neckbands .product-ecosystem__panel-word {
  color: var(--white);
}

.product-ecosystem__panel-rule {
  position: absolute;
  right: 0;
  bottom: 22%;
  left: 0;
  height: 2px;
  background: var(--brand-yellow);
}

.abstract-cue {
  display: none;
}

.credibility {
  color: var(--ink);
  background: var(--brand-blue-pale);
}

.credibility__line {
  top: 23%;
  height: 2px;
  background: var(--brand-yellow);
}

.credibility__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

.credibility__since {
  grid-column: 1 / 5;
  align-self: start;
  margin: clamp(4rem, 8vw, 7rem) 0 0;
  color: var(--brand-blue);
  font-size: clamp(3.6rem, 7.2vw, 8rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.credibility__statement {
  grid-column: 5 / 12;
  margin: 0;
  color: var(--brand-blue-deep);
  font-size: clamp(2.35rem, 4.4vw, 5rem);
  line-height: 1.02;
  text-transform: none;
}

.credibility__copy {
  grid-column: 8 / 13;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.credibility__copy p {
  color: var(--ink);
  font-size: var(--body-lg);
  line-height: 1.4;
}

.credibility__copy ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  color: var(--brand-blue);
}

.enquiry,
.hdmi-enquiry {
  color: var(--white);
  background: var(--brand-blue-deep);
}

.enquiry__line {
  top: 27%;
  background: var(--brand-yellow);
  opacity: 1;
}

.enquiry__statement h2,
.hdmi-enquiry h2 {
  font-size: clamp(2.7rem, 5.2vw, 6rem);
  line-height: 1;
  text-transform: none;
}

.enquiry__statement p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--body-lg);
}

.enquiry-form {
  color: var(--white);
  gap: 1rem 1.2rem;
}

.form-field label {
  color: rgba(255, 255, 255, 0.72);
}

.form-field input,
.form-field select,
.form-field textarea {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brand-yellow);
}

.form-submit.button--light,
.hdmi-enquiry .button--light {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--ink);
}

.form-contact,
.form-message {
  color: rgba(255, 255, 255, 0.76);
}

.form-message--error {
  color: var(--brand-yellow-soft);
}

.hdmi-hero__stage {
  background:
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 58%, var(--brand-blue-soft) 58%, var(--brand-blue-soft) 100%);
}

.hdmi-hero__title {
  color: var(--brand-blue);
}

.hdmi-hero__eyebrow a {
  color: var(--brand-blue);
}

.hdmi-hero__connector {
  color: var(--brand-blue-deep);
}

.connector-cable {
  stroke: var(--brand-blue-deep);
  stroke-width: 18;
}

.connector-cable--shadow {
  stroke: rgba(16, 43, 89, 0.14);
}

.connector-body {
  fill: var(--white);
  stroke: rgba(16, 43, 89, 0.24);
}

.connector-tip {
  fill: var(--brand-blue-deep);
  stroke: var(--brand-yellow);
}

.hdmi-hero__line {
  background: var(--brand-yellow);
}

.hdmi-hero__copy p {
  color: var(--ink);
}

.hdmi-hero__copy .hdmi-hero__label {
  color: var(--brand-blue);
}

.hdmi-anatomy {
  color: var(--ink);
  background: var(--white);
}

.hdmi-anatomy__heading h2,
.hdmi-compat h2 {
  color: var(--brand-blue-deep);
  text-transform: none;
}

.hdmi-anatomy__heading p,
.hdmi-compat p {
  color: var(--muted);
}

.hdmi-anatomy__diagram {
  background: var(--brand-blue-pale);
  border-color: var(--line);
}

.hdmi-capabilities {
  color: var(--white);
  background: var(--brand-blue);
}

.hdmi-capabilities__stage {
  background: var(--brand-blue);
}

.hdmi-capabilities__rail {
  background: var(--brand-yellow);
  opacity: 1;
}

.hdmi-capabilities__word {
  font-size: clamp(3.6rem, 10vw, 10rem);
}

.hdmi-capabilities__index {
  border-top-color: rgba(255, 255, 255, 0.24);
}

.hdmi-capabilities__index li {
  border-bottom-color: rgba(255, 255, 255, 0.24);
}

.hdmi-compat {
  background: var(--paper);
}

.hdmi-enquiry .button--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 1024px) {
  .product-ecosystem__left,
  .product-ecosystem__layout,
  .credibility__grid {
    grid-template-columns: 1fr;
  }

  .product-ecosystem__statement,
  .product-ecosystem__index,
  .product-ecosystem__center,
  .product-ecosystem__visual,
  .credibility__since,
  .credibility__statement,
  .credibility__copy {
    grid-column: auto;
  }

  .product-ecosystem__statement {
    margin-top: 3rem;
  }

  .product-ecosystem__visual {
    min-height: 28rem;
  }
}

@media (max-width: 760px) {
  .home-hero__stage,
  .hdmi-hero__stage {
    background: var(--paper);
  }

  .home-hero__blue-plane {
    top: 0;
    width: 1rem;
    transform: scaleX(1);
  }

  .home-hero__title,
  .hdmi-hero__title {
    color: var(--brand-blue);
  }

  .home-hero__copy,
  .hdmi-hero__copy {
    opacity: 1;
  }

  .brand-intro__copy {
    padding-top: 1rem;
  }

  .brand-intro__copy p:first-child,
  .product-ecosystem__statement,
  .credibility__statement {
    font-size: clamp(2.15rem, 10vw, 3.4rem);
  }

  .product-ecosystem__index {
    display: flex;
  }

  .product-ecosystem__panel-word {
    font-size: clamp(3.4rem, 18vw, 6rem);
  }

  .credibility__copy ul {
    grid-template-columns: 1fr;
  }

  .enquiry,
  .hdmi-enquiry {
    min-height: auto;
  }
}

/* Quiet editorial pass: closer to the Freight reference, without yellow rule graphics. */
.site-header__enquire::after {
  height: 1px;
  background: currentColor;
  opacity: 0.34;
}

.button--light:hover,
.button--light:focus-visible {
  background: var(--brand-blue-deep);
  border-color: var(--brand-blue-deep);
  color: var(--white);
}

.menu-overlay {
  background: #f3f3ef;
}

.menu-overlay__signal,
.home-hero__rule,
.product-ecosystem__panel-rule,
.credibility__line,
.enquiry__line,
.hdmi-hero__line {
  display: none;
}

.menu-overlay__link span,
.brand-intro__kicker,
.category-row span,
.product-ecosystem__center > span {
  color: var(--muted);
}

.menu-overlay__link:hover,
.menu-overlay__link:focus-visible {
  background: rgba(23, 61, 122, 0.055);
}

.home-hero__stage {
  background:
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 68%, var(--brand-blue-pale) 68%, var(--brand-blue-pale) 100%);
}

.home-hero__light {
  display: none;
}

.home-hero__blue-plane {
  width: min(30vw, 35rem);
  background: var(--brand-blue-soft);
  border-left: 1px solid var(--line);
  opacity: 1;
}

.home-hero__title {
  color: var(--brand-blue-deep);
  max-width: min(74rem, 68vw);
}

.home-hero__tagline {
  top: 45%;
  right: clamp(1.2rem, 5vw, 6rem);
  padding: 0;
  color: var(--brand-blue-deep);
  background: transparent;
  border: 0;
}

.home-hero__tagline::before {
  display: none;
}

.home-hero__since {
  color: var(--brand-blue);
}

.home-hero__copy {
  max-width: min(34rem, 34vw);
}

.brand-intro {
  background: #f7f7f3;
}

.brand-intro__copy p:first-child {
  max-width: 59rem;
  color: var(--ink);
}

.brand-intro__copy p:last-child {
  color: var(--muted);
}

.product-ecosystem {
  background: #f4f4f0;
}

.product-ecosystem__stage {
  background: #f4f4f0;
}

.product-ecosystem__statement {
  max-width: 54rem;
}

.product-ecosystem__index {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.category-row {
  min-height: 7.2rem;
  background: transparent;
  transform: none;
}

.category-row:hover,
.category-row:focus-visible,
.category-row.is-active {
  color: var(--brand-blue-deep);
  background: rgba(23, 61, 122, 0.06);
  transform: none;
}

.category-row.is-active {
  box-shadow: inset 0 -2px 0 var(--brand-blue);
}

.product-ecosystem__center {
  border-top: 1px solid var(--line);
}

.product-ecosystem__center h2 {
  color: var(--brand-blue-deep);
}

.product-ecosystem__panel {
  background: var(--white);
  border: 1px solid var(--line);
}

.product-ecosystem__panel--hdmi {
  background: var(--brand-blue-pale);
}

.product-ecosystem__panel--power-banks,
.product-ecosystem__panel--mobile-chargers,
.product-ecosystem__panel--car-chargers,
.product-ecosystem__panel--earphones {
  background: var(--white);
}

.product-ecosystem__panel--headphones,
.product-ecosystem__panel--neckbands {
  background: var(--brand-blue-soft);
}

.product-ecosystem__panel-word,
.product-ecosystem__panel--headphones .product-ecosystem__panel-word,
.product-ecosystem__panel--neckbands .product-ecosystem__panel-word {
  color: var(--brand-blue-deep);
}

.product-ecosystem__panel-index {
  color: var(--muted);
}

.credibility {
  background: var(--white);
}

.credibility__copy {
  border-top: 1px solid var(--line);
}

.enquiry,
.hdmi-enquiry {
  background: var(--brand-blue-deep);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.8);
}

.form-submit.button--light,
.hdmi-enquiry .button--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--brand-blue-deep);
}

.form-submit.button--light:hover,
.form-submit.button--light:focus-visible,
.hdmi-enquiry .button--light:hover,
.hdmi-enquiry .button--light:focus-visible {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--ink);
}

.hdmi-hero__stage {
  background:
    linear-gradient(90deg, var(--paper) 0%, var(--paper) 62%, var(--brand-blue-pale) 62%, var(--brand-blue-pale) 100%);
}

.connector-tip {
  fill: var(--brand-blue-deep);
  stroke: rgba(16, 43, 89, 0.24);
}

.connector-contact {
  stroke: rgba(255, 255, 255, 0.72);
}

.hdmi-capabilities__rail {
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 760px) {
  .home-hero__stage,
  .hdmi-hero__stage {
    background: var(--paper);
  }

  .home-hero__blue-plane {
    width: 0.75rem;
    background: var(--brand-blue-soft);
  }

  .home-hero__copy {
    max-width: min(30rem, calc(100vw - 2rem));
  }
}

/* Media-led redesign pass. This overrides the earlier colour-panel prototype. */
html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
}

.page {
  overflow: visible;
  background: var(--paper);
}

.button,
.text-link,
.site-header,
.section-label,
.menu-overlay {
  font-family: var(--font-display);
}

:focus-visible {
  outline-color: rgba(245, 213, 0, 0.72);
}

.site-header {
  color: var(--ink);
  mix-blend-mode: normal;
}

.site-header--dark {
  color: var(--white);
}

.site-header__brand {
  width: clamp(7.5rem, 9vw, 9.3rem);
}

.menu-button {
  gap: 0.55rem;
  color: currentColor;
}

.site-header__enquire {
  font-size: var(--label);
  letter-spacing: 0.07em;
}

.site-header__enquire::after {
  background: currentColor;
}

.home-hero {
  height: 118svh;
  min-height: 44rem;
  color: var(--white);
  background: #101010;
}

.home-hero__stage {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100svh;
  padding: calc(var(--header-height) + 1.8rem) var(--grid-pad) var(--grid-pad);
  overflow: clip;
  background: #101010;
}

.home-hero__media,
.home-hero__overlay {
  position: absolute;
  inset: 0;
}

.home-hero__media {
  z-index: 0;
  overflow: hidden;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 52% 54%;
  transform: scale(1.02);
  transform-origin: center;
}

.home-hero__overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.64) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08) 44%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.home-hero__light,
.home-hero__blue-plane,
.home-hero__rule,
.home-hero__since,
.home-hero__handover,
.brand-intro__signal,
.product-ecosystem__signal,
.product-ecosystem__panel-rule,
.credibility__line,
.enquiry__line {
  display: none !important;
}

.home-hero__meta {
  z-index: 2;
  align-self: start;
  color: rgba(255, 255, 255, 0.78);
}

.home-hero__title {
  z-index: 2;
  left: var(--grid-pad);
  right: var(--grid-pad);
  bottom: clamp(4rem, 8vh, 7rem);
  max-width: min(72rem, 68vw);
  color: var(--white);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: none;
}

.home-hero__tagline {
  z-index: 2;
  top: auto;
  right: auto;
  bottom: clamp(14rem, 25vh, 20rem);
  left: var(--grid-pad);
  padding: 0;
  color: rgba(255, 255, 255, 0.76);
  background: transparent;
  font-size: var(--label);
  letter-spacing: 0.11em;
}

.home-hero__tagline::before {
  display: none;
}

.home-hero__copy {
  z-index: 2;
  right: var(--grid-pad);
  bottom: clamp(13rem, 30vh, 21rem);
  max-width: min(31rem, 31vw);
  opacity: 1 !important;
  transform: none !important;
}

.home-hero__copy p {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.28rem, 1.55vw, 1.75rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.home-hero .button--light {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(12px);
}

.home-hero .button--light:hover,
.home-hero .button--light:focus-visible {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

.brand-intro {
  min-height: auto;
  padding: clamp(7rem, 12vw, 12rem) var(--grid-pad) clamp(6rem, 10vw, 10rem);
  color: var(--ink);
  background: #f4f4f0;
}

.brand-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.2vw, 2.4rem);
  align-items: start;
}

.brand-intro__statement {
  grid-column: 5 / 12;
  max-width: 62rem;
  margin: 0 0 clamp(4.5rem, 8vw, 7rem);
  color: var(--ink);
  font-size: clamp(2.65rem, 4.8vw, 4.8rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.brand-intro__statement span {
  display: block;
}

.brand-intro__capabilities {
  grid-column: 5 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.2vw, 2.25rem);
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.brand-intro__capability {
  padding-top: 1.2rem;
}

.brand-intro__capability h3 {
  margin: 0 0 0.85rem;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand-intro__capability p {
  max-width: 24rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  line-height: 1.4;
}

.brand-intro__image {
  grid-column: 2 / 12;
  margin: 0;
  overflow: clip;
}

.brand-intro__image img {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  height: auto;
  object-fit: cover;
  object-position: 50% 54%;
}

.brand-intro__image figcaption {
  max-width: 34rem;
  margin: 1rem 0 0 auto;
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.35;
}

.product-ecosystem,
.product-ecosystem.product-ecosystem--editorial {
  height: auto;
  min-height: 100svh;
  color: var(--ink);
  background: var(--white);
}

.product-ecosystem__stage {
  position: relative;
  top: auto;
  min-height: auto;
  padding: clamp(7rem, 11vw, 11rem) var(--grid-pad);
  overflow: visible;
  background: var(--white);
}

.product-ecosystem__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2.4rem);
  min-height: auto;
  height: auto;
  align-items: start;
}

.product-ecosystem__left {
  grid-column: 1 / 6;
  display: block;
}

.product-ecosystem__statement {
  max-width: 38rem;
  margin: 0 0 clamp(2.2rem, 4vw, 4rem);
  color: var(--ink);
  font-size: clamp(2.5rem, 4.2vw, 4.8rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-transform: none;
}

.product-ecosystem__index {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: visible;
  border: 0;
}

.category-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
  min-height: auto;
  padding: 0.92rem 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(21, 23, 27, 0.1);
  transition:
    color 240ms var(--ease-out),
    padding-left 240ms var(--ease-out);
}

.category-row span {
  color: var(--muted);
  font-size: var(--label);
  letter-spacing: 0.08em;
}

.category-row strong {
  font-size: clamp(1.35rem, 2.2vw, 2.45rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.category-row:hover,
.category-row:focus-visible,
.category-row.is-active {
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  padding-left: 0.45rem;
}

.category-row.is-active span {
  color: var(--brand-blue);
}

.product-ecosystem__center {
  grid-column: 6 / 8;
  align-self: end;
  padding: 0;
  border: 0;
}

.product-ecosystem__center > span {
  color: var(--brand-blue);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product-ecosystem__center h2 {
  margin: 0.8rem 0 1rem;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.product-ecosystem__center p {
  max-width: 22rem;
  color: var(--muted);
  font-size: var(--body);
  line-height: 1.42;
}

.product-ecosystem__visual {
  grid-column: 8 / 13;
  min-height: auto;
}

.product-ecosystem__panel {
  position: relative;
  display: block;
  min-height: auto;
  margin: 0;
  overflow: clip;
  background: #f2f2ee;
  border: 0;
  animation: product-preview-fade 360ms var(--ease-out) both;
}

.product-ecosystem__panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  transform: scale(1.01);
  transition: transform 520ms var(--ease-out);
}

.product-ecosystem__panel:hover img {
  transform: scale(1.035);
}

.product-ecosystem__panel-index {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  color: var(--white);
  mix-blend-mode: difference;
}

.product-ecosystem__panel figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  color: var(--white);
  font-size: clamp(1.4rem, 2.6vw, 3.2rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: none;
  mix-blend-mode: difference;
}

@keyframes product-preview-fade {
  from {
    opacity: 0.72;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .home-hero__title {
    max-width: min(48rem, 72vw);
    font-size: clamp(3.5rem, 9vw, 6rem);
  }

  .home-hero__copy {
    max-width: 26rem;
  }

  .brand-intro__statement,
  .brand-intro__capabilities,
  .brand-intro__image,
  .product-ecosystem__left,
  .product-ecosystem__center,
  .product-ecosystem__visual {
    grid-column: 1 / -1;
  }

  .product-ecosystem__layout {
    grid-template-columns: 1fr;
  }

  .product-ecosystem__center {
    max-width: 32rem;
  }
}

@media (max-width: 760px) {
  .site-header__enquire {
    display: none;
  }

  .home-hero {
    height: 108svh;
    min-height: 42rem;
  }

  .home-hero__stage {
    padding: calc(var(--header-height) + 1.4rem) 1rem 1.2rem;
  }

  .home-hero__media img {
    object-position: 48% 50%;
  }

  .home-hero__meta {
    display: grid;
    gap: 0.45rem;
  }

  .home-hero__title {
    left: 1rem;
    right: 1rem;
    bottom: 12.75rem;
    max-width: calc(100vw - 2rem);
    font-size: clamp(3.25rem, 14vw, 5.2rem);
  }

  .home-hero__tagline {
    left: 1rem;
    bottom: 19rem;
  }

  .home-hero__copy {
    right: 1rem;
    left: 1rem;
    bottom: 1.2rem;
    max-width: none;
  }

  .brand-intro,
  .product-ecosystem__stage {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .brand-intro__grid,
  .brand-intro__capabilities {
    grid-template-columns: 1fr;
  }

  .brand-intro__statement {
    font-size: clamp(2.25rem, 11vw, 3.8rem);
  }

  .brand-intro__image img {
    aspect-ratio: 4 / 3;
  }

  .category-row {
    grid-template-columns: 2.7rem minmax(0, 1fr);
  }

  .category-row strong {
    font-size: clamp(1.45rem, 8vw, 2.3rem);
  }
}

.products-page .product-ecosystem,
.products-page .product-ecosystem.product-ecosystem--editorial {
  min-height: auto;
}

.products-page .product-ecosystem__stage {
  padding-top: calc(var(--header-height) + clamp(2rem, 6vw, 5rem));
}

.product-ecosystem {
  scroll-margin-top: var(--header-height);
}

.product-ecosystem__panel figcaption {
  display: none;
}

.hdmi-page .hdmi-hero,
.hdmi-page .hdmi-anatomy,
.hdmi-page .hdmi-capabilities {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.hdmi-page .hdmi-hero__stage,
.hdmi-page .hdmi-anatomy__stage,
.hdmi-page .hdmi-capabilities__stage {
  position: relative;
  top: auto;
  min-height: auto;
  overflow: visible;
}

.hdmi-page .hdmi-hero {
  color: var(--ink);
  background: var(--paper);
}

.hdmi-page .hdmi-hero__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  min-height: 92svh;
  padding: calc(var(--header-height) + clamp(2.4rem, 6vw, 5rem)) var(--grid-pad) clamp(3rem, 7vw, 6rem);
  align-items: end;
  background: var(--paper);
}

.hdmi-hero__eyebrow {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--muted);
}

.hdmi-hero__eyebrow a {
  color: var(--brand-blue);
}

.hdmi-hero__title {
  position: relative;
  left: auto;
  bottom: auto;
  grid-column: 1 / 7;
  max-width: 50rem;
  margin: 0;
  color: var(--brand-blue-deep);
  font-size: clamp(5.25rem, 13vw, 13.5rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: none;
  transform: none !important;
  transform-origin: left bottom;
}

.hdmi-hero__connector {
  position: relative;
  inset: auto;
  grid-column: 7 / 13;
  align-self: center;
  width: 100%;
  max-width: none;
  opacity: 1;
  transform: none !important;
}

.hdmi-hero__connector svg {
  width: 100%;
  min-height: 18rem;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: var(--brand-blue-soft);
}

.hdmi-hero__line {
  display: none;
}

.hdmi-hero__copy {
  position: relative;
  inset: auto;
  grid-column: 8 / 13;
  max-width: 31rem;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  color: var(--ink);
  opacity: 1;
  transform: none !important;
}

.hdmi-hero__copy p {
  color: var(--ink);
}

.hdmi-hero__copy .hdmi-hero__label {
  color: var(--brand-blue);
}

.hdmi-anatomy {
  padding: 0;
  color: var(--ink);
  background: var(--white);
}

.hdmi-anatomy__stage {
  padding: clamp(5rem, 9vw, 8rem) var(--grid-pad);
}

.hdmi-anatomy__heading {
  margin-top: clamp(2.2rem, 5vw, 4.5rem);
}

.hdmi-anatomy__heading h2 {
  color: var(--brand-blue-deep);
  font-size: clamp(3.2rem, 6vw, 6.8rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: none;
}

.hdmi-anatomy__content {
  min-height: 0;
  align-items: start;
}

.hdmi-anatomy__diagram {
  display: grid;
  min-height: 0;
  aspect-ratio: 16 / 6;
  place-items: center;
  background: var(--brand-blue-soft);
  border: 0;
}

.hdmi-anatomy__diagram svg {
  width: min(52rem, 92%);
}

.hdmi-anatomy__labels strong {
  text-transform: none;
}

.hdmi-capabilities {
  color: var(--white);
  background: var(--brand-blue-deep);
}

.hdmi-capabilities__stage {
  padding: clamp(5rem, 9vw, 8rem) var(--grid-pad);
  background: var(--brand-blue-deep);
}

.hdmi-capabilities__rail {
  display: none;
}

.hdmi-capabilities__layout {
  min-height: 0;
  align-items: start;
}

.hdmi-capabilities__intro {
  max-width: 48rem;
}

.hdmi-capabilities__kicker {
  margin: 0 0 1rem;
  color: var(--brand-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hdmi-capabilities__word {
  max-width: 56rem;
  font-size: clamp(3.2rem, 6.8vw, 7.6rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: none;
}

.hdmi-capabilities__index {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hdmi-capabilities__index li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hdmi-capabilities__index span {
  color: var(--brand-yellow);
  font-family: var(--font-mono);
  font-size: var(--label);
}

.hdmi-capabilities__index strong {
  display: block;
  color: var(--white);
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  font-weight: 400;
}

.hdmi-capabilities__index p {
  max-width: 30rem;
  margin: 0.42rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
  line-height: 1.42;
}

.category-page,
.products-page,
.faq-page {
  color: var(--ink);
  background: var(--paper);
}

.category-hero,
.faq {
  padding-top: calc(var(--header-height) + clamp(3rem, 8vw, 7rem));
}

.category-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}

.category-hero__intro {
  grid-column: 1 / 7;
}

.category-hero__intro p,
.category-detail__info > p,
.faq__header p {
  margin: 1.2rem 0;
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.category-hero h1 {
  margin: 0;
  color: var(--brand-blue-deep);
  font-size: clamp(4.4rem, 11vw, 12rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.category-hero__statement {
  grid-column: 8 / 13;
  max-width: 34rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.65rem, 2.8vw, 3.1rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.category-detail {
  display: grid;
  grid-template-columns: minmax(15rem, 0.38fr) minmax(22rem, 0.82fr) minmax(20rem, 0.5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.category-detail__selector {
  display: grid;
  border-top: 1px solid var(--line);
}

.category-detail__selector button {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  color: var(--muted);
  background: transparent;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.category-detail__selector button:hover,
.category-detail__selector button:focus-visible,
.category-detail__selector button.is-active {
  color: var(--brand-blue-deep);
}

.category-detail__selector span,
.category-detail__info dt {
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: var(--label);
}

.category-detail__selector strong {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 400;
}

.category-detail__media {
  display: grid;
  min-height: clamp(24rem, 48vw, 42rem);
  margin: 0;
  place-items: center;
  background: var(--white);
}

.category-detail__media img {
  max-width: 88%;
  max-height: 36rem;
  object-fit: contain;
}

.category-detail__info h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.category-detail__info > span {
  display: block;
  max-width: 26rem;
  margin: 1.2rem 0 1.7rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.45;
}

.category-detail__info dl {
  display: grid;
  gap: 0;
  margin: 0 0 1.8rem;
  border-top: 1px solid var(--line);
}

.category-detail__info dl div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.45fr) 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.category-detail__info dt,
.category-detail__info dd {
  margin: 0;
}

.category-detail__info dd {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
}

.category-detail__note {
  max-width: 28rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.button--dark {
  color: var(--white);
  background: var(--ink);
}

.button--dark:hover,
.button--dark:focus-visible {
  color: var(--ink);
  background: var(--brand-yellow);
}

.faq {
  min-height: calc(100svh - var(--header-height));
}

.faq__header {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.faq__header h1 {
  margin: 0;
  font-size: clamp(2.8rem, 5.5vw, 5.8rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.faq__accordion {
  max-width: 74rem;
  margin: 0 auto;
}

.faq__item {
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.68);
}

.faq__item button {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.faq__item button span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--label);
}

.faq__item button strong {
  font-weight: 400;
}

.faq__item button em {
  width: 2rem;
  height: 2rem;
  color: var(--white);
  background: var(--ink);
  border-radius: 50%;
  font-style: normal;
  text-align: center;
  line-height: 2rem;
}

.faq__item div {
  padding: 0 4rem 1.35rem;
}

.faq__item p {
  max-width: 48rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.24vw, 1.16rem);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .hdmi-page .hdmi-hero__stage,
  .category-hero,
  .category-detail {
    grid-template-columns: 1fr;
  }

  .hdmi-hero__title,
  .hdmi-hero__connector,
  .hdmi-hero__copy,
  .category-hero__intro,
  .category-hero__statement {
    grid-column: 1 / -1;
  }

  .category-detail__media {
    min-height: 24rem;
  }
}

@media (max-width: 760px) {
  .hdmi-page .hdmi-hero__stage {
    min-height: auto;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .hdmi-hero__title {
    font-size: clamp(4rem, 22vw, 7.2rem);
  }

  .hdmi-anatomy__stage,
  .hdmi-capabilities__stage,
  .category-hero,
  .category-detail,
  .faq {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .hdmi-anatomy__heading,
  .hdmi-anatomy__content,
  .hdmi-capabilities__layout {
    grid-template-columns: 1fr;
  }

  .hdmi-anatomy__diagram {
    aspect-ratio: 4 / 3;
  }

  .category-hero h1 {
    font-size: clamp(3.8rem, 18vw, 6.4rem);
  }

  .category-detail__info dl div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .faq__item button {
    grid-template-columns: 2rem 1fr auto;
    padding: 1rem;
  }

  .faq__item div {
    padding: 0 1rem 1.2rem 4rem;
  }
}

/* Manufacturing platform revision */
h1, h2, h3, .category-row strong, .menu-overlay__link strong { letter-spacing: 0; }

.home-hero__title-line { display: block; overflow: hidden; padding-bottom: 0.16em; }
.home-hero__title-line > span { display: block; }
.home-hero__title { max-width: min(75rem, 75vw); }

.menu-overlay__link[aria-current="page"] strong { color: var(--brand-blue); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.2rem; }
.site-footer__nav a { width: auto; }

.brand-intro__capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.product-ecosystem__left { grid-column: 1 / 6; grid-row: 1 / 3; }
.product-ecosystem__visual { grid-column: 7 / 13; grid-row: 1; }
.product-ecosystem__center { grid-column: 7 / 13; grid-row: 2; align-self: start; max-width: 44rem; animation: product-preview-fade 360ms var(--ease-out) both; }
.product-ecosystem__center h2 { max-width: 38rem; font-size: clamp(2rem, 3.1vw, 3.7rem); line-height: 1.02; }
.product-ecosystem__center p { max-width: 38rem; }
.product-ecosystem__panel { background: var(--brand-blue-pale); }
.product-ecosystem__panel--copper { background: #f4f0eb; }
.product-ecosystem__panel--coaxial { background: #e9eef7; }
.product-ecosystem__panel--fibre { background: #e7edf4; }
.product-ecosystem__panel--mobility { background: #f0f1ef; }
.product-ecosystem__panel-index { color: var(--brand-blue-deep); mix-blend-mode: normal; }

.product-visual { position: relative; display: grid; width: 100%; min-height: 20rem; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: var(--brand-blue-pale); }
.product-visual--copper { background: #f4f0eb; }
.product-visual--hdmi { background: #e9eef7; }
.product-visual--coaxial { background: #e9eef7; }
.product-visual--fibre { background: #e7edf4; }
.product-visual--mobility { background: #f0f1ef; }
.product-visual svg { width: 100%; height: 100%; max-width: 58rem; }
.product-visual__hdmi-art { transform-origin: 50% 50%; animation: product-visual-float 6s ease-in-out infinite; }
@keyframes product-visual-float { 50% { translate: 0 -9px; } }
.product-visual__caption { position: absolute; right: 1.2rem; bottom: 1rem; color: var(--brand-blue); font-family: var(--font-mono); font-size: var(--label); text-transform: uppercase; }
.product-ecosystem__panel .product-visual svg { transform: none; }

.category-hero h1 { font-size: clamp(3.3rem, 8vw, 8.3rem); line-height: 0.95; overflow-wrap: break-word; }
.category-detail { grid-template-columns: minmax(13rem, .36fr) minmax(20rem, .82fr) minmax(18rem, .56fr); }
.category-detail__media { background: transparent; }
.category-detail__media .product-visual { align-self: start; }
.category-detail__info h2 { font-size: clamp(2.4rem, 3.8vw, 4.5rem); line-height: 1; }
.category-detail__info dl div { grid-template-columns: minmax(7rem, .45fr) 1fr; }
.category-detail__info dd { font-size: 1rem; }

.about-page { color: var(--ink); }
.about-hero { min-height: 100svh; padding-top: calc(var(--header-height) + clamp(2rem, 5vw, 5rem)); background: var(--paper); }
.about-hero__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--brand-blue); font-family: var(--font-mono); font-size: var(--label); text-transform: uppercase; }
.about-hero__body { display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: clamp(2rem, 5vw, 5rem); margin: clamp(3rem, 8vh, 6rem) 0 clamp(3rem, 8vh, 6rem); }
.about-hero h1 { display: grid; margin: 0; color: var(--brand-blue-deep); font-size: clamp(5rem, 8vw, 9rem); font-weight: 400; line-height: .9; }
.about-hero h1 span { display: block; }
.about-hero__lead { max-width: 34rem; margin: 0; font-size: clamp(1.8rem, 2.8vw, 3.4rem); line-height: 1.08; }
.about-hero__image { width: 100%; margin: 0; }
.about-hero__image img { width: 100%; height: auto; }
.about-intro, .about-manufacturing, .about-quality, .about-platform { padding-top: clamp(6rem, 10vw, 10rem); padding-bottom: clamp(6rem, 10vw, 10rem); }
.about-intro { background: var(--white); }
.about-intro__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-top: clamp(3rem, 6vw, 6rem); }
.about-intro h2 { grid-column: 2; margin: 0; color: var(--brand-blue-deep); font-size: clamp(2.8rem, 5vw, 5.6rem); font-weight: 400; line-height: 1.03; }
.about-intro p { grid-column: 2; max-width: 43rem; margin: 1.2rem 0 0; color: var(--muted); font-size: var(--body-lg); line-height: 1.4; }
.about-manufacturing { background: var(--paper); }
.about-manufacturing__heading { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; margin: clamp(3rem, 6vw, 6rem) 0; }
.about-manufacturing h2, .about-quality h2, .about-platform h2 { max-width: 54rem; margin: 0; color: var(--brand-blue-deep); font-size: clamp(3rem, 5.8vw, 6.4rem); font-weight: 400; line-height: 1; }
.about-manufacturing__heading p, .about-quality__layout p { max-width: 30rem; margin: 0; color: var(--muted); font-size: var(--body-lg); line-height: 1.4; }
.about-manufacturing__image { height: clamp(23rem, 47vw, 43rem); margin: 0; overflow: hidden; }
.about-manufacturing__image img { width: 100%; height: 100%; object-fit: cover; }
.about-quality { background: var(--brand-blue-soft); }
.about-quality__layout, .about-platform__layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 6vw, 6rem); }
.about-quality__story { display: grid; gap: clamp(2rem, 4vw, 4rem); min-width: 0; }
.about-quality__story p { max-width: 35rem; }
.about-quality__photo { width: 100%; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; }
.about-quality__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-platform { background: var(--white); }
.about-platform__layout nav { display: grid; border-top: 1px solid var(--line); }
.about-platform__layout nav a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line); color: var(--brand-blue-deep); transition: padding-left 240ms var(--ease-out); }
.about-platform__layout nav a:hover, .about-platform__layout nav a:focus-visible { padding-left: .5rem; }
.about-platform__layout nav a span { font-family: var(--font-mono); font-size: var(--label); }
.about-platform__layout nav a strong { font-size: clamp(1.3rem, 2.1vw, 2.3rem); font-weight: 400; }

.growth-history { height: 150svh; background: var(--paper); }
.growth-history__stage { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100svh; padding: calc(var(--header-height) + 2rem) var(--grid-pad) clamp(3rem, 5vw, 5rem); }
.growth-history__heading { display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: 2rem; margin-top: clamp(2rem, 4vw, 4rem); }
.growth-history__heading h2 { max-width: 60rem; margin: 0; color: var(--brand-blue-deep); font-size: clamp(3rem, 5.6vw, 6rem); font-weight: 400; line-height: 1; }
.growth-history__heading p { max-width: 24rem; margin: 0 0 .5rem; color: var(--muted); font-size: var(--body-lg); line-height: 1.35; }
.growth-history__chart { position: relative; margin-top: auto; padding-top: 2rem; }
.growth-history__line { display: block; width: 100%; height: auto; aspect-ratio: 24 / 5; overflow: visible; }
.growth-history__line path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.growth-history__line-base { stroke: #c6d0dc; }
.growth-history__line-progress { stroke: var(--brand-blue); stroke-width: 3 !important; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--growth-progress, 0)); transition: stroke-dashoffset 160ms linear; }
.growth-history__line circle { fill: var(--paper); stroke: var(--brand-blue); stroke-width: 3; }
.growth-history__chart ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.growth-history__chart li { min-width: 0; border-top: 1px solid var(--line); }
.growth-history__chart button { display: grid; align-content: start; gap: .45rem; width: 100%; min-height: 9rem; padding: 1rem .2rem 0 0; color: var(--muted); background: transparent; text-align: left; transition: color 250ms ease; }
.growth-history__chart button:hover, .growth-history__chart button:focus-visible, .growth-history__chart li.is-active button { color: var(--brand-blue-deep); }
.growth-history__year { color: var(--brand-blue); font-family: var(--font-mono); font-size: var(--label); }
.growth-history__chart strong { font-size: clamp(1.15rem, 1.8vw, 1.85rem); font-weight: 400; line-height: 1.1; }
.growth-history__detail { font-size: clamp(.9rem, 1.1vw, 1.1rem); line-height: 1.3; }

.credibility { padding-bottom: clamp(3rem, 5vw, 5rem); background: var(--white); }
.credibility__grid { min-height: 58svh; }
.client-marquee { width: calc(100% + 2 * var(--grid-pad)); margin: clamp(3rem, 6vw, 6rem) calc(-1 * var(--grid-pad)) 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
.client-marquee__track { display: flex; width: max-content; animation: client-marquee-right 52s linear infinite; }
.client-marquee:hover .client-marquee__track { animation-play-state: paused; }
.client-marquee__group { display: flex; flex: none; align-items: center; gap: clamp(2rem, 4vw, 5rem); padding: 1.5rem clamp(2rem, 4vw, 5rem) 1.5rem 0; }
.client-marquee__logo { display: grid; flex: none; width: clamp(8.5rem, 12vw, 13rem); height: clamp(4.5rem, 6vw, 6.5rem); place-items: center; mix-blend-mode: multiply; }
.client-marquee__logo svg { display: block; height: auto; max-height: 100%; overflow: hidden; mix-blend-mode: multiply; }
.client-marquee__logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.client-marquee__caption { margin: 1.25rem 0 0; color: var(--brand-blue-deep); text-align: center; font-size: 1.05rem; }
@keyframes client-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.faq__cta { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; max-width: 74rem; min-height: 15rem; margin: clamp(4rem, 8vw, 7rem) auto 0; padding: clamp(2rem, 4vw, 4rem); color: var(--white); background: var(--brand-blue-deep); transition: background 250ms ease; }
.faq__cta:hover, .faq__cta:focus-visible { background: var(--brand-blue); }
.faq__cta > span:first-child { grid-column: 1 / -1; align-self: start; font-family: var(--font-mono); font-size: var(--label); text-transform: uppercase; }
.faq__cta strong { font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 400; line-height: 1; }
.faq__cta-arrow { font-size: clamp(2rem, 4vw, 4rem); line-height: 1; transition: transform 250ms ease; }
.faq__cta:hover .faq__cta-arrow, .faq__cta:focus-visible .faq__cta-arrow { transform: translate(5px, -5px); }

.fibre-page .hdmi-hero, .fibre-page .hdmi-anatomy, .fibre-page .hdmi-capabilities { height: auto; min-height: 0; overflow: visible; }
.fibre-page .hdmi-hero__stage, .fibre-page .hdmi-anatomy__stage, .fibre-page .hdmi-capabilities__stage { position: relative; top: auto; min-height: auto; overflow: visible; }
.fibre-page .hdmi-hero { color: var(--ink); background: var(--paper); }
.fibre-page .hdmi-hero__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); min-height: 92svh; padding: calc(var(--header-height) + clamp(2.4rem, 6vw, 5rem)) var(--grid-pad) clamp(3rem, 7vw, 6rem); align-items: end; background: var(--paper); }
.fibre-page .hdmi-hero__title { font-size: clamp(4.4rem, 9vw, 10rem); overflow-wrap: break-word; }
.fibre-page .hdmi-hero__connector { grid-column: 7 / 13; }
.fibre-page .hdmi-hero__connector .product-visual { min-height: 18rem; aspect-ratio: 4 / 3; }
.fibre-page .hdmi-hero__copy { grid-column: 8 / 13; }
.fibre-page .hdmi-anatomy { padding: 0; color: var(--ink); background: var(--white); }
.fibre-page .hdmi-anatomy__stage { padding: clamp(5rem, 9vw, 8rem) var(--grid-pad); }
.fibre-page .hdmi-anatomy__content { min-height: 0; align-items: start; }
.fibre-page .hdmi-anatomy__diagram { display: grid; min-height: 0; aspect-ratio: 16 / 7; place-items: center; background: var(--brand-blue-soft); border: 0; }
.fibre-page .hdmi-anatomy__diagram .product-visual { min-height: 0; aspect-ratio: 16 / 7; }
.fibre-anatomy__label { display: grid; grid-template-columns: 2.6rem 1fr; gap: .35rem .9rem; padding: 1rem 0; }
.fibre-anatomy__label span, .fibre-anatomy__label em { color: var(--muted); font-family: var(--font-mono); font-size: var(--label); font-style: normal; }
.fibre-anatomy__label strong { color: var(--ink); font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 400; }
.fibre-anatomy__label em { grid-column: 2; line-height: 1.35; }
.fibre-page .hdmi-capabilities { color: var(--white); background: var(--brand-blue-deep); }
.fibre-page .hdmi-capabilities__stage { padding: clamp(5rem, 9vw, 8rem) var(--grid-pad); background: var(--brand-blue-deep); }
.fibre-page .hdmi-capabilities__layout { min-height: 0; align-items: start; }
.fibre-page .hdmi-capabilities__word { font-size: clamp(3rem, 6.2vw, 7rem); }

@media (max-width: 1180px) {
  .category-detail { grid-template-columns: 1fr 1fr; }
  .category-detail__selector { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .category-detail__media, .category-detail__info { grid-column: auto; }
}
@media (max-width: 1024px) {
  .brand-intro__capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-ecosystem__left, .product-ecosystem__center, .product-ecosystem__visual { grid-column: 1 / -1; grid-row: auto; }
  .product-ecosystem__visual { grid-row: 2; }
  .product-ecosystem__center { grid-row: 3; }
  .about-hero__body, .about-manufacturing__heading, .about-quality__layout, .about-platform__layout { grid-template-columns: 1fr; }
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro h2, .about-intro p { grid-column: 1; }
  .credibility__grid { min-height: 0; gap: 3rem; }
  .credibility__since, .credibility__statement, .credibility__copy { grid-column: 1; }
  .credibility__since { margin-top: 2rem; }
}
@media (max-width: 1100px) {
  .growth-history { height: auto; }
  .growth-history__stage { position: relative; min-height: 0; padding-top: clamp(6rem, 9vw, 8rem); }
  .growth-history__heading { grid-template-columns: 1fr; }
  .growth-history__chart { margin-top: 4rem; }
}
@media (max-width: 760px) {
  .site-footer__nav { grid-template-columns: 1fr 1fr; }
  .brand-intro__capabilities { grid-template-columns: 1fr; }
  .product-ecosystem__statement { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .home-hero__title { bottom: 12rem; font-size: clamp(2.8rem, 10vw, 4.2rem); line-height: .96; }
  .home-hero__tagline { bottom: 22rem; }
  .product-visual { min-height: 15rem; }
  .category-detail { grid-template-columns: 1fr; }
  .category-detail__selector { grid-template-columns: 1fr; }
  .category-hero h1 { font-size: clamp(2.7rem, 12vw, 5rem); }
  .about-hero { min-height: 0; }
  .about-hero__meta { display: grid; }
  .about-hero__body { margin: 5rem 0 3rem; }
  .about-hero h1 { font-size: clamp(4rem, 14vw, 6rem); overflow-wrap: anywhere; }
  .about-hero__lead { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .about-intro h2 { font-size: clamp(2.3rem, 9vw, 3.6rem); }
  .about-quality__photo { aspect-ratio: 4 / 3; }
  .growth-history__heading h2 { font-size: clamp(2.8rem, 10vw, 4rem); }
  .growth-history__line { display: none; }
  .growth-history__chart ol { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--brand-blue); }
  .growth-history__chart li { position: relative; margin-left: 1.2rem; }
  .growth-history__chart li::before { position: absolute; top: 1.2rem; left: calc(-1.2rem - 5px); width: 9px; height: 9px; content: ""; background: var(--paper); border: 2px solid var(--brand-blue); border-radius: 50%; }
  .growth-history__chart button { min-height: 7.5rem; color: var(--brand-blue-deep); }
  .client-marquee__group { gap: 2rem; padding-block: 1rem; padding-right: 2rem; }
  .client-marquee__logo { width: 8rem; height: 4.5rem; }
  .faq__cta { min-height: 12rem; }
  .faq__cta { column-gap: 1rem; }
  .faq__cta strong { font-size: clamp(2.1rem, 9vw, 3.4rem); white-space: nowrap; }
  .about-platform__layout nav a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .fibre-page .hdmi-hero__stage { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-right: 1rem; padding-left: 1rem; }
  .fibre-page .hdmi-hero__title, .fibre-page .hdmi-hero__connector, .fibre-page .hdmi-hero__copy { grid-column: 1; }
  .fibre-page .hdmi-hero__title { font-size: clamp(3.6rem, 15vw, 6.5rem); }
  .fibre-page .hdmi-anatomy__diagram, .fibre-page .hdmi-anatomy__diagram .product-visual { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee { overflow-x: auto; mask-image: none; }
  .client-marquee__track, .product-visual__hdmi-art { animation: none; }
  .client-marquee__group[aria-hidden="true"] { display: none; }
}

.home-hero__headline {
  position: absolute;
  z-index: 2;
  left: var(--grid-pad);
  bottom: clamp(4rem, 8vh, 7rem);
  display: grid;
  gap: clamp(0.85rem, 2vh, 1.5rem);
  width: min(75rem, 75vw);
}

.home-hero__headline .home-hero__title,
.home-hero__headline .home-hero__tagline {
  position: static;
  max-width: none;
  margin: 0;
  transform: none;
}

.home-hero__headline .home-hero__title {
  line-height: 1;
}

.home-hero__headline .home-hero__tagline {
  color: var(--white);
  font-size: clamp(0.8rem, 1vw, 1rem);
}

.hdmi-capabilities__layout,
.fibre-page .hdmi-capabilities__layout {
  margin-top: clamp(3rem, 5vw, 5rem);
}

.hdmi-compat {
  min-height: 0;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

.hdmi-compat__grid {
  min-height: 0;
  align-items: start;
  margin-top: clamp(3rem, 5vw, 5rem);
}

.enquiry,
.hdmi-enquiry {
  min-height: 0;
}

.enquiry__grid,
.hdmi-enquiry__grid {
  min-height: 0;
  align-items: start;
  margin-top: clamp(3rem, 5vw, 5rem);
}

.about-intro,
.about-manufacturing,
.about-quality,
.about-platform,
.credibility,
.category-detail,
.faq {
  min-height: 0;
}

@media (max-width: 760px) {
  .home-hero__headline {
    right: 1rem;
    bottom: 12.75rem;
    left: 1rem;
    width: auto;
  }

  .product-ecosystem__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-ecosystem__left {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdmi-anatomy__labels li {
    transition: none;
  }
}

@media (max-width: 360px) {
  .home-hero__headline {
    bottom: 2rem;
  }
}

.opening-loader {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--white);
  color: var(--brand-blue-logo);
}

.opening-loader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(48rem, calc(100vw - 3rem));
  aspect-ratio: 4 / 1;
}

.opening-loader__logo,
.route-transition__logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.route-transition {
  position: fixed;
  z-index: 150;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

.route-transition.is-active {
  visibility: visible;
}

.route-transition__plane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--white);
  transform: translateX(-110%);
}

.route-transition.is-active .route-transition__plane {
  animation: route-blue-plane 820ms var(--ease-inout) both;
}

.route-transition__logo {
  width: min(48rem, calc(100% - 3rem));
}

@keyframes route-blue-plane {
  0% { transform: translateX(-101%); }
  40%, 58% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

.signal-line {
  overflow: visible;
}

.signal-line__ghost,
.signal-line__active {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signal-line__ghost {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.signal-line__active {
  stroke: var(--signal-yellow);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.signal-line--light .signal-line__ghost {
  stroke: rgba(9, 11, 13, 0.18);
}

.signal-line--cable .signal-line__active {
  stroke-width: 3;
}

.signal-line__node {
  fill: var(--paper);
  stroke: var(--signal-yellow);
  stroke-width: 2;
}

.wire-process {
  --wire-copper: #bd7544;
  --wire-progress: 0;
  padding: 6rem var(--grid-pad) 5rem;
  color: var(--brand-blue-deep);
  background: var(--brand-blue-pale);
}

.wire-process__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 3rem;
  align-items: end;
  margin-top: 3rem;
}

.wire-process__heading h2 {
  margin: 0;
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.02;
}

.wire-process__heading > div {
  max-width: 29rem;
}

.wire-process__eyebrow {
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.wire-process__heading > div > p:last-child {
  margin-bottom: 0;
  color: #5b687a;
  font-size: 1.05rem;
  line-height: 1.5;
}

.wire-process__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  margin-top: 3rem;
}

.wire-process__current p {
  margin: 0;
  font-size: 1rem;
}

.wire-process__current p > span {
  margin-right: 1rem;
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.wire-process__visual {
  width: 100%;
  margin-top: 1.5rem;
}

.wire-process__scene {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 3;
}

.wire-process__station {
  --machine-body: #b9cadb;
  --machine-dark: #59738e;
  --machine-edge: #e2eaf3;
  transition: fill 220ms ease;
}

.wire-process__station.is-active {
  --machine-body: #173d7a;
  --machine-dark: #102b59;
  --machine-edge: #b6c8e0;
}

.wire-process__wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wire-wheel 2.8s linear infinite paused;
}

.wire-process__travel {
  animation: wire-travel 1.1s linear infinite paused;
}

.wire-process__heat {
  opacity: 0.3;
  animation: wire-heat 1.4s ease-in-out infinite alternate paused;
}

.wire-process__coolant {
  animation: wire-coolant 1.4s ease-in-out infinite alternate paused;
}

.wire-process.is-playing .wire-process__station.is-active .wire-process__wheel,
.wire-process.is-playing .wire-process__travel,
.wire-process.is-playing .wire-process__station.is-active .wire-process__heat,
.wire-process.is-playing .wire-process__station.is-active .wire-process__coolant {
  animation-play-state: running;
}

.wire-process__progress {
  height: 2px;
  margin: 1rem 0 0;
  background: #c8d4e2;
}

.wire-process__progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-blue);
  transform: scaleX(var(--wire-progress));
  transform-origin: left;
}

.wire-process__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wire-process__step {
  display: block;
  width: 100%;
  min-height: 11rem;
  padding: 1.4rem 0;
  color: var(--brand-blue-deep);
  background: transparent;
  border-top: 3px solid transparent;
  text-align: left;
}

.wire-process__steps .is-active .wire-process__step {
  border-color: var(--brand-blue);
}

.wire-process__step:hover {
  border-color: var(--wire-copper);
}

.wire-process__step > span {
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.wire-process__step h3 {
  margin: 0.8rem 0;
  font-size: 1.15rem;
  font-weight: 400;
}

.wire-process__step p {
  margin: 0;
  color: #5b687a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.wire-process__still {
  margin: 0 0 1rem;
}

.wire-process__still figcaption {
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.wire-process.is-static .wire-process__progress > span {
  transform: none;
}

.wire-process.is-static {
  --wire-progress: 1;
}

@keyframes wire-wheel { to { transform: rotate(360deg); } }
@keyframes wire-travel { to { stroke-dashoffset: -40; } }
@keyframes wire-heat { to { opacity: 0.85; } }
@keyframes wire-coolant { to { transform: translateY(3px); } }

@media (max-width: 1024px) {
  .wire-process__heading h2 { font-size: 3.4rem; }
  .wire-process__steps { gap: 1rem; }
  .wire-process__step h3 { font-size: 1rem; }
}

@media (max-width: 760px) {
  .wire-process { padding-top: 4rem; padding-bottom: 3rem; }
  .wire-process__heading { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
  .wire-process__heading h2 { font-size: 2.6rem; }
  .wire-process__heading > div { max-width: 28rem; }
  .wire-process__current { margin-top: 1.5rem; }
  .wire-process__scene { aspect-ratio: 20 / 13; }
  .wire-process__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wire-process__step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem 0.6rem; min-height: 0; padding: 1rem 0; border-top-width: 2px; border-bottom: 1px solid #c8d4e2; }
  .wire-process__step > span { padding-top: 0.2rem; }
  .wire-process__step h3 { margin: 0; font-size: 1.15rem; }
  .wire-process__step p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .wire-process__wheel,
  .wire-process__travel,
  .wire-process__heat,
  .wire-process__coolant { animation: none; }
  .wire-process__station { transition: none; }
}

.certification {
  padding: calc(var(--header-height) + 5rem) var(--grid-pad) 6rem;
  background: var(--paper);
}

.certification__heading {
  margin-bottom: 4rem;
}

.certification__eyebrow {
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.certification h1 {
  margin: 1.4rem 0 1.5rem;
  color: var(--brand-blue-deep);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.certification__heading > p:last-child {
  color: var(--muted);
  font-size: 1.25rem;
}

.certification__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.certificate-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.certificate-card:hover,
.certificate-card:focus-visible {
  border-color: var(--brand-blue);
  background: var(--brand-blue-pale);
}

.certificate-card__preview {
  aspect-ratio: 0.707;
  background: var(--white);
}

.certificate-card__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.certificate-card h2 {
  margin: 1rem 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.15;
}

.certificate-card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.certificate-card dl {
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.certificate-card dl > div {
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
}

.certificate-card dt {
  margin-bottom: 0.35rem;
  color: var(--muted);
}

.certificate-card dd {
  margin: 0;
}

.certificate-dialog {
  width: min(64rem, calc(100% - 3rem));
  max-width: none;
  max-height: 90svh;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  overscroll-behavior: contain;
}

.certificate-dialog::backdrop {
  background: rgba(6, 14, 28, 0.8);
}

.certificate-dialog__toolbar {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.certificate-dialog__toolbar h2 {
  flex: 1;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
}

.certificate-dialog__toolbar a {
  color: var(--brand-blue);
  white-space: nowrap;
}

.certificate-dialog__toolbar button {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--brand-blue);
  background: var(--brand-blue-soft);
  font-size: 1.8rem;
  line-height: 1;
}

.certificate-dialog__content > p {
  padding: 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.certificate-dialog__content > p a {
  color: var(--brand-blue);
  text-decoration: underline;
}

.certificate-dialog__pages {
  padding: 1rem 1.5rem 1.5rem;
}

.certificate-dialog__pages figure {
  margin: 0 0 1.5rem;
}

.certificate-dialog__pages img {
  display: block;
  width: 100%;
  height: auto;
}

.certificate-dialog__pages figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 1100px) {
  .certificate-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .certificate-card__preview {
    width: min(100%, 15rem);
    margin: auto;
  }
}

@media (max-width: 760px) {
  .certification {
    padding-top: calc(var(--header-height) + 3rem);
    padding-bottom: 4rem;
  }

  .certification h1 {
    font-size: 2.8rem;
  }

  .certification__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .certificate-dialog {
    width: calc(100% - 1.5rem);
    max-height: 92svh;
  }

  .certificate-dialog__toolbar {
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.75rem;
  }

  .certificate-dialog__toolbar h2 {
    flex-basis: 100%;
    font-size: 1.1rem;
  }

  .certificate-dialog__toolbar button {
    margin-left: auto;
  }

  .certificate-dialog__pages {
    padding: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .certificate-card {
    transition: none;
  }
}