/* ==========================================================================
   XINGUANGHUI · V2 layout
   Product first. Light is atmosphere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
}

/* --------------------------------------------------------------------------
   Scroll snapping
   The blocks that are built as exactly one screen snap flush under the header,
   so a flick lands on a page rather than a little above or below it.
   `proximity`, not `mandatory`: the long sections below still scroll freely.

   Two deliberate omissions, both learned from measuring the real scroll:
   · The first screen is NOT a snap point. It is shorter than the window now, so
     snapping back to it yanked the page up 80–250px whenever a reader tried to
     scroll away from it.
   · No `scroll-snap-stop: always`. That forced every flick to stop at the very
     next boundary; without it a fast flick can carry across two sections.
   -------------------------------------------------------------------------- */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-h);
}

#products,
#application,
#projects,
#about {
  scroll-snap-align: start;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}

.brand {
  flex: none;
}

.brand__logo {
  /* The supplied lockup carries a tall mark, so it is sized by height and
     allowed to sit optically with the navigation rather than being stretched. */
  height: 36px;
  width: auto;
}

.nav {
  margin-inline-start: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--ink);
}

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

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: none;
}

.lang {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.lang__item[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
}

.lang__item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.lang__sep {
  opacity: 0.3;
}

[dir="rtl"] .lang {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 44px;
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* The light bar: warm amber through white to a cool blue — the three colours
   the fixtures take. It sits next to the label, which in Arabic means on its
   right, because the flex row follows the reading direction. */
.btn::before {
  content: "";
  flex: none;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e5b96e, #f4f7fa 50%, #82bfff);
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* One sweep along the edge, on the way in only — it snaps back out of sight
   rather than sweeping again on the way out. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(244, 247, 250, 0.16) 50%,
    transparent 60%
  );
  transform: translateX(-135%);
}

.btn:hover::before,
.btn:focus-visible::before,
.btn.is-lit::before {
  opacity: 1;
  box-shadow: 0 0 10px -1px rgba(244, 247, 250, 0.55);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(135%);
  transition: transform 300ms var(--ease-out);
}

/* Pressed: the whole button comes on for a moment. */
.btn.is-lit {
  box-shadow: 0 0 0 1px rgba(244, 247, 250, 0.3),
    0 8px 24px -12px rgba(130, 191, 255, 0.6);
}

/* Primary — the fitting itself. */
.btn--dark {
  background: #0b1220;
  border-color: rgba(244, 247, 250, 0.16);
  color: var(--white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: #14203a;
  border-color: rgba(244, 247, 250, 0.32);
}

/* Secondary — the same fitting, unlit. The bar is quieter here. */
.btn--line {
  border-color: var(--line-2);
  color: var(--ink);
}

.btn--line::before {
  opacity: 0.28;
}

.btn--line:hover,
.btn--line:focus-visible {
  border-color: var(--ink);
}

.btn--line:hover::before,
.btn--line:focus-visible::before {
  opacity: 0.8;
}

.btn--on-navy {
  border-color: var(--navy-line);
  color: var(--navy-text);
}

.btn--on-navy::before {
  opacity: 0.28;
}

.btn--on-navy:hover,
.btn--on-navy:focus-visible {
  border-color: var(--navy-text);
}

.btn--on-navy:hover::before,
.btn--on-navy:focus-visible::before {
  opacity: 0.8;
}

/* Primary on a dark surface: white fill, and the bar reads against it. */
.btn--light {
  background: var(--white);
  border-color: rgba(11, 18, 32, 0.06);
  color: #0b1220;
}

.btn--light:hover,
.btn--light:focus-visible {
  background: #eef2f7;
}

.btn--lg {
  height: 48px;
  padding-inline: var(--space-6);
  font-size: var(--fs-base);
}

.btn--lg::before {
  width: 22px;
}

/* A quiet arrow link, used for product entry points. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.arrow-link::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}

.arrow-link:hover::after,
.arrow-link:focus-visible::after {
  transform: translateX(4px);
}

.section--navy .arrow-link {
  color: var(--navy-text);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex: none;
}

.nav-toggle__bars {
  position: relative;
  width: 19px;
  height: 11px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}

.nav-toggle__bars span:nth-child(2) {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(4.75px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.sec-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
}

.section--navy .sec-head__title {
  color: var(--navy-text);
}

.sec-head__lede {
  max-width: 58ch;
  color: var(--ink-2);
}

.section--navy .sec-head__lede {
  color: var(--navy-text-2);
}

/* --------------------------------------------------------------------------
   01 HERO — copy left, one photograph right
   -------------------------------------------------------------------------- */
.hero {
  /* The first screen is one screen: nothing of the next block shows until the
     reader scrolls. On a tall window it runs 10% shorter (see the media query
     below) so it breathes without a band of empty space top and bottom. */
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: center;
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

/* Ten percent less air top and bottom — but only on windows tall enough that
   the next section's first line of type still cannot reach the fold. Short
   windows and phones keep the full-height first screen. */
@media (min-width: 1024px) and (min-height: 880px) {
  .hero {
    min-height: calc((100vh - var(--header-h)) * 0.9);
    padding-top: calc(var(--space-7) * 0.9);
    padding-bottom: calc(var(--space-6) * 0.9);
  }

  /* The strip of the products band that now shows above the fold pushes its
     own first line of type safely below it. Only inside this query: short
     windows and phones never see this padding. The `body` prefix is there so
     the base #products rule further down the file cannot win on order. */
  body #products {
    padding-top: calc(var(--space-4) + 56px);
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.hero__copy {
  display: grid;
  gap: var(--space-5);
  align-content: center;
}

.hero__brand {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--ink);
  max-width: 14ch;
}

.hero__lede {
  max-width: 40ch;
  color: var(--ink-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero__figure {
  position: relative;
  /* The photograph is 16:9 and is never cropped. Capping the width at what a
     60vh-tall 16:9 frame would need keeps the first screen breathing even on
     a short, very wide display. */
  max-width: min(100%, calc(60vh * 16 / 9));
  justify-self: end;
}

.hero__plate {
  aspect-ratio: 16 / 9;
  /* The photograph carries its own rounded corners on white, so the plate has
     to be white too or a grey hairline shows at the edges. */
  background: var(--white);
  overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   Image frames — every image keeps its final ratio from day one
   -------------------------------------------------------------------------- */
.frame {
  background: var(--paper-2);
  overflow: hidden;
}

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

.frame--product {
  aspect-ratio: var(--ratio-product);
}

.frame--square {
  aspect-ratio: 1;
}

.frame--scene {
  aspect-ratio: var(--ratio-scene);
}

/* --------------------------------------------------------------------------
   02 PRODUCT FAMILIES — six tiles that fit one screen, detail below
   -------------------------------------------------------------------------- */
/* This block runs tighter than the rest of the page on purpose: the heading,
   the row of six and the open detail are meant to land as a single screen. */
#products {
  /* One screen, exactly: the block centres itself inside the viewport and the
     next section waits below the fold. */
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

#products .sec-head {
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

#products .sec-head__title {
  /* One step down from the page's section headings: this block shares the
     screen with the pictures and the detail. */
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

/* Detail first, the row of six underneath: picking a tile then changes
   something the reader is already looking at, instead of something below the
   fold. The DOM keeps the tabs before the panels for assistive tech. */
.fam {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.fam__grid {
  /* Every family, one row, spanning the same width as the block above it so
     the first tile lines up with the picture over it. The tiles stay small and
     the space between them does the work. Eight families now: the gap is set
     so the tiles keep the width they had on the nine-family row. */
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 4.1%;
  row-gap: var(--space-5);
  /* An explicit width, not a max-width: inside the flex column an item with
     auto margins sizes to its caption text instead of stretching. */
  width: 100%;
  order: 2;
}

.fam__card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  color: var(--ink-2);
}

.fam__frame {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--white);
  /* No resting outline: on a white page the tiles have to read as products,
     not as six grey boxes. The frame only draws itself under the pointer. */
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--dur) var(--ease-out);
}

.fam__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The device shot sits on top; the effect it makes arrives under the pointer. */
.fam__effect {
  opacity: 0;
  transition: opacity var(--dur) var(--ease-soft);
}

.fam__card:hover .fam__effect,
.fam__card:focus-visible .fam__effect {
  opacity: 1;
}

.fam__card:hover .fam__frame,
.fam__card:focus-visible .fam__frame {
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* The name reads as a caption to the picture: same width, tight to it, and it
   is the only part that changes colour when the family is chosen. */
.fam__name {
  display: block;
  padding-top: var(--space-3);
  color: var(--ink-3);
  /* Eight across leaves little room: the caption steps down a size so a name
     like "Landscape light" still holds one line instead of two. */
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  transition: color var(--dur) var(--ease-out);
}

/* The open family is named in full contrast; the effect picture belongs to the
   pointer, so it always goes back to the device once the pointer leaves. */
.fam__card[aria-selected="true"] .fam__name,
.fam__card:hover .fam__name,
.fam__card:focus-visible .fam__name {
  color: var(--ink);
}

.fam__panels {
  order: 1;
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.fam__panel {
  display: none;
}

.fam__panel[data-active] {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.fam__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* On a short display the pictures give up height first, so the whole block
   still lands on one screen; on a normal one this never bites. */
.fam__media .frame {
  max-height: max(180px, calc(100vh - var(--header-h) - 400px));
}

.fam__body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.fam__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
}

.fam__intro {
  max-width: 42ch;
  color: var(--ink-2);
}

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

.fam__specs > div {
  display: grid;
  grid-template-columns: 11ch minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: 5px;
  border-bottom: 1px solid var(--line);
}

.fam__specs dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
}

.fam__specs dd {
  color: var(--ink-2);
}

/* The way from the panel on the home page to the product's own page. */
.fam__cta {
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   3c ABOUT — half a screen, one paragraph, one film
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.about__copy {
  display: grid;
  /* Tighter than the old about block: this column carries more, and the whole
     page still has to land on one screen. */
  gap: var(--space-4);
  justify-items: start;
}

.about__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
  max-width: 20ch;
}

.about__copy p {
  max-width: 52ch;
  color: var(--ink-2);
}

.about__media {
  position: relative;
}

.video {
  position: relative;
  aspect-ratio: var(--ratio-scene);
  background: var(--navy-2);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   05 ABOUT US — the short version on the home page
   One statement and five figures; the long story is on about/.
   -------------------------------------------------------------------------- */
#about {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: center;
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.intro {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
}

.intro__copy {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 62ch;
}

.intro__title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
  max-width: 26ch;
}

.intro__copy p {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}

/* Five figures in one band, each a number over a line of context. */
.intro__facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 44px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.intro__facts dt {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.intro__facts dd {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   The about sub page — the long story, set for reading
   -------------------------------------------------------------------------- */
.container--narrow {
  max-width: 1240px;
}

.about-hero {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.about-hero__title {
  margin-top: var(--space-4);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
}

.about-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.about-story {
  padding-top: clamp(32px, 4vw, 64px);
}

/* --------------------------------------------------------------------------
   The how-we-work sub page — the same world, read as a method rather than as a
   catalogue. Built from parts the rest of the site already uses: the paper
   band, the mono index, hairline rows and the brief form.
   -------------------------------------------------------------------------- */
.hww-hero {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.hww-hero__title {
  margin-top: var(--space-4);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--ink);
  max-width: 21ch;
}

.hww-hero__lede {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}

.hww-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Three ways in. Wide bands rather than cards: each band is one link, and the
   hairline between them does the grouping. */
.ways {
  display: grid;
  border-top: 1px solid var(--line);
}

.way {
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr) auto;
  gap: var(--space-3) clamp(20px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out);
}

.way:hover,
.way:focus-visible {
  background: var(--paper);
}

.way__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.35em;
}

.way__go {
  white-space: nowrap;
}

/* The world's own arrow: a hairline that steps on hover, as in .arrow-link. */
.way__go::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}

.way:hover .way__go::after,
.way:focus-visible .way__go::after {
  transform: translateX(4px);
}

.way__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.way__note {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

/* The process, read as an index: two rows of three, hairline separated. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding-block: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line);
}

.step__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  color: var(--ink-2);
}

.step__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.step__note {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 38ch;
}

/* What a project brief needs, and what comes back. Two lists facing each
   other, so the reader can see the trade before they write anything. */
.transfer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}

.transfer__col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.transfer__head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.transfer__lede {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

.transfer__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.transfer__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-base);
  color: var(--ink-2);
}

/* A hairline dash instead of a bullet, in the site's own line weight. */
.transfer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--line-2);
}

/* Compliance: the capability list, then the two markets, then the honest
   sentence about who holds which document. */
.compliance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.compliance__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.compliance__list li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--ink);
}

.compliance__side {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.compliance__region {
  display: grid;
  gap: var(--space-2);
}

.compliance__region dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-2);
}

.compliance__region dd {
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.compliance__note {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 48ch;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* Custom engineering: the eight subsystems a project can change, sat either
   side of the exploded drawing they would change. */
.custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 36px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 40px);
}

.custom__terms {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.custom__terms--left {
  text-align: right;
}

.custom__terms li {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-2);
}

.custom__figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line);
}

.custom__figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--ink-2);
}

/* The brand line closes the page's middle, before the brief. */
.custom__brand {
  margin-top: clamp(32px, 4vw, 56px);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
  max-width: 26ch;
}

/* The terms sit in a wider label column than the contact block's 9ch. */
.place--terms .place__rows > div {
  grid-template-columns: 11ch minmax(0, 1fr);
}

/* The brief form and the term list re-use shared components whose label greys
   sit at 3.1:1 and 1.9:1. On this page those lines are read, not skimmed, so
   they take the same body grey as the rest of the text. */
.hww .field label,
.hww .form__note,
.hww .place__rows dt {
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   How we work reads denser than the rest of the site

   Seven blocks of index-like content, not seven screens with one picture each.
   The section rhythm comes down to the product pages' 48px (from the site
   default of 72px), the heads sit closer to what they introduce, and the list
   rows lose a few pixels of air. Only this page is touched.
   -------------------------------------------------------------------------- */
.hww > .section {
  padding-block: clamp(36px, 3.4vw, 52px);
}

.hww .sec-head {
  margin-bottom: var(--space-5);
}

/* .hww-hero only exists on this page. */
.hww-hero {
  padding-top: clamp(40px, 4.6vw, 68px);
  padding-bottom: clamp(20px, 2.4vw, 32px);
}

.hww .way {
  padding-block: clamp(18px, 2.1vw, 28px);
}

.hww .step {
  padding-block: clamp(16px, 2vw, 26px);
}

.hww .transfer,
.hww .compliance {
  gap: clamp(24px, 3vw, 52px);
}

.hww .custom__brand {
  margin-top: clamp(26px, 3.2vw, 44px);
}

/* The closing band: one sentence and two ways to act on it. */
/* --------------------------------------------------------------------------
   The about sub page.
   Three sections only — OUR JOURNEY / QUALITY & COMPLIANCE / BUILT IN CHINA.
   The vertical rhythm matches the how-we-work page: 72px between blocks, a
   40px step from a heading to its content, nothing decorative.
   -------------------------------------------------------------------------- */
.about-page {
  --aj-ink: #111111;
  --aj-body: #40403d;
  --aj-muted: #77776f;
  --aj-hair: #d8d8d8;
  --aj-hair-soft: #e6e5e1;
  --aj-paper-2: #f7f7f5;
  --aj-navy: #08111d;
  background: var(--white);
  color: var(--aj-ink);
}

.aj-wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 72px;
}

.aj {
  padding-block: 72px;
}

.aj-head {
  max-width: 960px;
}

.aj-eyebrow {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aj-muted);
}

.aj-eyebrow--ondark {
  color: rgba(255, 255, 255, 0.6);
}

.aj-title {
  margin-top: 18px;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--aj-ink);
  max-width: 22ch;
}

.aj-lede {
  margin-top: 20px;
  max-width: 680px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--aj-muted);
}

/* 01 · the company timeline */
.aj-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.aj-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 1px;
  background: var(--aj-hair);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}

.aj-node {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
}

.aj-node__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aj-ink);
}

.aj-node--now .aj-node__dot {
  background: #d9a83f;
  box-shadow: 0 0 0 5px rgba(217, 168, 63, 0.14);
}

.aj-node__when {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aj-muted);
}

.aj-node__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--aj-ink);
}

.aj-node__note {
  max-width: 26ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--aj-muted);
}

/* ============================ 02 · QUALITY & COMPLIANCE ============== */
.aj-quality {
  background: var(--aj-paper-2);
}

/* 02 · inside the company — deliberately a different shape from the document
   wall: one wide film frame, then four stills. Bigger, fewer, photographic. */
.aj-facility {
  /* The timeline above ends this band's spacing: no second top padding, so the
     film follows the timeline on the page's normal 72px step. */
  padding-top: 0;
}

.aj-media {
  display: grid;
  gap: 20px;
}

.aj-video {
  margin: 0;
}

.aj-video__frame {
  position: relative;
  display: grid;
  place-items: center;
  /* A cinema band, edge to edge with the stills underneath: a 16:9 poster fills
     it with a mild centre crop, and the row below always shares its margins. */
  aspect-ratio: 2 / 1;
  background: #14171c;
  border: 1px solid var(--aj-hair-soft);
  overflow: hidden;
}

/* The play mark is an affordance, not a control: no video file exists yet. */
.aj-video__play {
  position: relative;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
}

.aj-video__play::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 22px;
  border-left: 16px solid rgba(255, 255, 255, 0.86);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.aj-video figcaption,
.aj-shot figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aj-muted);
}

.aj-video figcaption {
  margin-top: 10px;
}

.aj-shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.aj-shot {
  margin: 0;
}

.aj-shot__plate {
  display: block;
  aspect-ratio: 4 / 3;
  background: #efefec;
  border: 1px solid var(--aj-hair-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.aj-shot figcaption {
  margin-top: 10px;
}

/* Real photographs and document scans sit inside the plate: stills fill their
   4:3 frame, certificate scans stay whole on white. */
.aj-shot__plate img,
.aj-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aj-slot img {
  object-fit: contain;
  background: var(--white);
}

/* Once real photographs land, each plate holds an image and gains a hover. */
.aj-shot[data-file] .aj-shot__plate,
.aj-video[data-video] {
  background: var(--white);
}

.aj-shot[data-file] .aj-shot__plate {
  cursor: pointer;
}

.aj-shot[data-file] .aj-shot__plate:hover,
.aj-shot[data-file] .aj-shot__plate:focus-visible {
  transform: scale(1.01);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
}

/* 03 · the certificate wall is the whole section: one centred line of type standing
   in for the section heading, then ten slots in two rows of five. Real scans
   replace the slots one by one. */
.aj-certs {
  text-align: center;
}

.aj-certs__lead {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--aj-ink);
}

.aj-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.aj-slot {
  display: block;
  aspect-ratio: 4 / 3;
  background: #efefec;
  border: 1px solid var(--aj-hair-soft);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* Once a real file is dropped in, the plate behaves like a document. */
.aj-slot[data-file] {
  background: var(--white);
  cursor: pointer;
}

.aj-slot[data-file]:hover,
.aj-slot[data-file]:focus-visible {
  transform: scale(1.01);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
}

.aj-qa {
  display: grid;
  gap: 18px;
  margin-top: 56px;
}

.aj-qa__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aj-ink);
}

/* Five steps read across, not as five blocks. */
.aj-qa__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--aj-hair);
}

.aj-qa__list li {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  font-size: 15px;
  color: var(--aj-body);
}

.aj-qa__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--aj-muted);
}

.aj-comp {
  display: grid;
  grid-template-columns: 30fr 64fr;
  column-gap: 6%;
  row-gap: 16px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--aj-hair);
}

.aj-comp__label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aj-ink);
}

.aj-comp__note {
  font-size: 16px;
  line-height: 1.65;
  color: var(--aj-body);
  max-width: 70ch;
}

/* ============ 03 · BUILT IN CHINA. READY FOR THE WORLD. ============= */
.aj-global {
  background: var(--aj-navy);
  display: grid;
  align-items: center;
  min-height: 640px;
  padding-block: 72px;
}

.aj-global__inner {
  display: grid;
  grid-template-columns: 42fr 58fr;
  column-gap: 5%;
  row-gap: 32px;
  align-items: center;
}

.aj-global__title {
  margin-top: 18px;
  font-size: clamp(40px, 4.8vw, 66px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--white);
}

.aj-global__body {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
  max-width: 46ch;
}

.aj-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.aj-focus__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.aj-focus__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
}

.aj-global__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.aj-global__figure {
  margin: 0;
}

.aj-global__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

/* The closing figure is a map, not a photograph: real geography, one lit point
   in Shenzhen, one line running east to west into the Middle East. The land is
   the SVG; the route, the two dots and the labels are driven here so the line
   can draw itself. */
.aj-mapband {
  position: relative;
}

.aj-mapband img {
  border-radius: 0;
}

.aj-mapband__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.aj-mapband__arc {
  fill: none;
  stroke: #d9a83f;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  transition: stroke-dashoffset 1600ms var(--ease-out) 250ms;
}

html.is-reveal-ready .aj-mapband.is-in .aj-mapband__arc {
  stroke-dashoffset: 0;
}

.aj-mapband__halo {
  fill: none;
  stroke: rgba(255, 246, 226, 0.38);
  stroke-width: 1;
}

.aj-mapband__from {
  fill: #fff6e2;
}

.aj-mapband__to-halo {
  fill: none;
  stroke: rgba(217, 168, 63, 0.45);
  stroke-width: 1;
}

.aj-mapband__to {
  fill: #d9a83f;
}

.aj-mapband__label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
}

.aj-mapband__label--from {
  left: 81.68%;
  top: 42.47%;
  margin-left: 14px;
  transform: translateY(-50%);
  color: #ffffff;
}

.aj-mapband__label--to {
  left: 62.5%;
  top: 40.71%;
  margin-left: -14px;
  transform: translate(-100%, -50%);
  color: #e5c078;
}

/* The two names never float over a phone-sized map: they sit under it instead. */
.aj-mapband__legend {
  display: none;
}

/* The only motion: one slow reveal per block, plus the timeline drawing its own
   hairline. Hidden states exist only once the script has run. */
[data-reveal] {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

html.is-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

html.is-reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html.is-reveal-ready .aj-line::before {
  transform: scaleX(0);
}

html.is-reveal-ready .aj-line.is-in::before {
  transform: scaleX(1);
}

/* ------------------------------------------------ responsive */
@media (min-width: 1600px) {
  .aj-wrap {
    padding-inline: 96px;
  }
}

@media (max-width: 1280px) {
  .aj-wrap {
    padding-inline: 56px;
  }
}

/* Tablet: the timeline folds to two columns, the long blocks stack. */
@media (max-width: 1024px) {
  .aj {
    padding-block: 64px;
  }

  .aj-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 36px;
  }

  .aj-line::before {
    content: none;
  }

  .aj-comp {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* the film keeps following the timeline on the page's own step */
  .aj-facility {
    padding-top: 0;
  }

  .aj-global {
    min-height: 0;
    padding-block: 64px;
  }

  .aj-global__inner {
    column-gap: 4%;
  }
}

/* Mobile: one column, and the timeline turns vertical with a hairline. */
@media (max-width: 768px) {
  .aj-wrap {
    padding-inline: 20px;
  }

  .aj {
    padding-block: 48px;
  }

  .aj-title {
    font-size: 34px;
  }

  .aj-lede {
    font-size: 16px;
  }

  .aj-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 32px;
  }

  .aj-node {
    position: relative;
    gap: 6px;
    padding: 0 0 26px 26px;
  }

  .aj-node::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 12px;
    bottom: 0;
    width: 1px;
    background: var(--aj-hair);
  }

  .aj-node:last-child {
    padding-bottom: 0;
  }

  .aj-node:last-child::after {
    content: none;
  }

  .aj-node__dot {
    position: absolute;
    left: 0;
    top: 2px;
  }

  .aj-node__note {
    max-width: none;
  }

  .aj-certs__lead {
    font-size: 22px;
  }

  /* the film keeps its frame, the stills go two across */
  .aj-shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
  }

  .aj-media {
    margin-top: 0;
  }

  .aj-facility {
    padding-top: 0;
  }

  .aj-video__play {
    width: 52px;
    height: 52px;
  }

  .aj-video__play::after {
    left: 21px;
    top: 17px;
    border-left: 12px solid rgba(255, 255, 255, 0.86);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
  }

  /* ten slots still, two across */
  .aj-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
  }

  .aj-qa {
    margin-top: 40px;
  }

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

  .aj-qa__list li {
    padding-block: 12px;
    border-bottom: 1px solid var(--aj-hair-soft);
  }

  .aj-comp {
    margin-top: 32px;
  }

  .aj-global {
    padding-block: 48px;
  }

  .aj-global__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .aj-global__title {
    font-size: 34px;
  }

  .aj-focus {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .aj-global__cta .btn {
    flex: 1 1 100%;
  }

  .aj-mapband__label {
    display: none;
  }

  .aj-mapband__legend {
    display: flex;
    align-items: center;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }

  .aj-mapband__legend span:first-child {
    color: #ffffff;
  }

  .aj-mapband__legend span:first-child::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin: 0 12px;
    vertical-align: middle;
    background: #d9a83f;
  }
}

/* The closing band: one sentence and two ways to act on it. */
.talk {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.talk__line {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
  max-width: 24ch;
}

.talk__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.about-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* ------------------------------------------------------------ language switch */
.langbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.langbar__item {
  padding: 5px var(--space-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.langbar__item:hover:not([disabled]),
.langbar__item:focus-visible:not([disabled]) {
  color: var(--ink);
  border-color: var(--line-2);
}

.langbar__item[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--ink);
}

.langbar__item[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ the piece */
.about__article {
  min-width: 0;
}

.story {
  display: grid;
  gap: var(--space-5);
  /* 58ch lands around 65 characters a line in this face: the comfortable end
     of what a reader will take without losing the line. */
  max-width: 58ch;
}

.story[hidden] {
  display: none;
}

.story__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
  max-width: 26ch;
  margin-bottom: var(--space-2);
}

.story p {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-2);
}

.story .story__lead {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink);
}

/* A paragraph of Chinese needs more air than a paragraph of Latin. */
.story[data-lang="zh"] {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Source Han Sans SC", var(--font-sans);
}

.story[data-lang="zh"] p {
  font-size: 1.0625rem;
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.story[data-lang="zh"] .story__title {
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* The closing statement, set apart from the body. */
.story__closing {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.story__closing p {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
}

.story__sign {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.story__sign span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
}

.story__sign strong {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------- the sidelong */
.about__side {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.about__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--ink-4);
}

.about__facts {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.about__facts > div {
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  gap: var(--space-4);
}

.about__facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 2px;
}

.about__facts dd {
  font-size: var(--fs-sm);
  color: var(--ink);
}

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

/* A play affordance that is honest: the frame is a poster until the film
   arrives, and it says so. */
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.video__play::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid rgba(255, 255, 255, 0.9);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.video__note {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   3d TESTIMONIALS — layout only until real words arrive
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.quote-card {
  display: grid;
  gap: var(--space-5);
  align-content: space-between;
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
}

.quote-card__text {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.quote-card__by {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Unfilled slots are drawn as empty slots, not as invented praise. */
.quote-card--empty {
  border-top-style: dashed;
  border-top-color: var(--line-2);
}

.quote-card--empty .quote-card__text {
  color: var(--ink-4);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   03 THE FIXTURE AND THE WALL — pick a fixture, the wall lights up
   -------------------------------------------------------------------------- */
#application {
  /* One screen again: heading, the row of fixtures and the wall all land
     together, so the light can be switched without scrolling. */
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

#application .sec-head {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

#application .sec-head__title {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.app {
  /* Fixtures left, the wall they light on the right. */
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  /* No column gap: the air is measured inside the right-hand cell, so the wall
     gets the same amount on its left as on its right. */
  gap: 0;
  align-items: center;
  /* Reach across the page gutter, so the right-hand cell ends at the edge of
     the window rather than at the edge of the text column. Centring inside it
     then leaves the picture equal air either side of the window. */
  margin-inline-end: calc(var(--gutter) * -1);
}

.app__stage {
  display: grid;
  gap: var(--space-4);
  width: 74.5%;
  justify-self: center;
  /* The caption is pinned to the picture's corner, so the stage is the frame
     it is measured against. */
  position: relative;
}

.app__picks {
  display: grid;
  /* Eight families: four across makes two even rows, so no tile is left
     stranded on a row of its own. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 4.5%;
  row-gap: var(--space-5);
}

.app__pick {
  display: block;
  width: 100%;
  padding: 0;
}

.app__pick-frame {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--white);
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

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

.app__pick-name {
  display: block;
  padding-top: var(--space-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-4);
  transition: color var(--dur) var(--ease-out);
}

.app__pick:hover .app__pick-frame,
.app__pick:focus-visible .app__pick-frame,
.app__pick[aria-pressed="true"] .app__pick-frame {
  opacity: 1;
}

.app__pick[aria-pressed="true"] .app__pick-frame {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.app__pick[aria-pressed="true"] .app__pick-name {
  color: var(--ink);
}

.app__wall {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-2);
}

/* On the home page the picture itself is a switch (the script gives it the
   button role), so it takes the pointer and a focus ring like one. */
.app__wall[role="button"] {
  cursor: pointer;
}

.app__wall[role="button"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Two frames per fixture: the wall as it is, and the wall lit. The lit frame
   sits on top and simply fades in. */
.app__off,
.app__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.app__off[data-active] {
  opacity: 1;
}

/* The one thing that moves: the lit frame coming up, or going down over the
   unlit one. */
.app__shot {
  opacity: 0;
  transition: opacity 1600ms var(--ease-soft);
}

.app__wall[data-lit="true"] .app__shot[data-active] {
  opacity: 1;
}

.app__caption {
  /* The control sits above the picture, on the page rather than on the photo:
     it reads as the label for the switch below it, and it never covers the
     image. `order` puts it first without moving it in the markup. */
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  /* It is an instruction, not a footnote: #858c94 on paper is 3.1:1, too light
     at 11px. One shade darker reads at 7.3:1. */
  color: var(--ink-2);
}

/* The switch: a small two-position control. Off it is grey; on it takes the
   warm colour the fixtures run at. */
.app__state {
  position: relative;
  flex: none;
  width: 26px;
  height: 14px;
  border: 1px solid rgba(20, 24, 29, 0.2);
  border-radius: 999px;
  background: rgba(20, 24, 29, 0.07);
  transition: background-color 320ms var(--ease-out),
    border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.app__state::after {
  content: "";
  position: absolute;
  top: 1px;
  inset-inline-start: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.18);
  transition: inset-inline-start 320ms var(--ease-out),
    background-color 320ms var(--ease-out);
}

.app__wall[data-lit="true"] + .app__caption .app__state {
  background: rgba(255, 181, 36, 0.92);
  border-color: rgba(255, 214, 138, 0.95);
  box-shadow: 0 0 14px -2px rgba(255, 181, 36, 0.8);
}

.app__wall[data-lit="true"] + .app__caption .app__state::after {
  inset-inline-start: 13px;
  background: #fff8e6;
}

/* --------------------------------------------------------------------------
   3b CERTIFICATION
   Two plain lists. Written as a checklist, not a pitch.
   -------------------------------------------------------------------------- */
.cert {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 88px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.cert__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-5);
}

.cert__list {
  display: grid;
  gap: var(--space-4);
}

.cert__list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-4);
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.cert__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--ink-4);
}

.cert__note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  max-width: 64ch;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   04 ARCHITECTURAL SOLUTIONS — horizontal rail, big images
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 42%);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
}

.rail > * {
  scroll-snap-align: start;
}

.rail-card {
  display: grid;
  gap: var(--space-4);
}

.rail-card__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.rail-card__note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   05 LIGHTING EFFECT SELECTOR
   -------------------------------------------------------------------------- */
.effects {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.effect-tabs {
  display: grid;
  gap: var(--space-2);
}

.effect-tab {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-top: 1px solid var(--line);
  text-align: left;
  transition: color var(--dur) var(--ease-out);
}

.effect-tab:last-of-type {
  border-bottom: 1px solid var(--line);
}

.effect-tab__name {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease-out);
}

.effect-tab__note {
  font-size: var(--fs-sm);
  color: var(--ink-4);
}

.effect-tab[aria-selected="true"] .effect-tab__name,
.effect-tab:hover .effect-tab__name {
  color: var(--ink);
}

.effect-tab[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--warm);
}

.effect-stage {
  display: grid;
  gap: var(--space-5);
}

.effect-stage__media {
  position: relative;
}

.effect-stage__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-soft);
}

.effect-stage__item:first-child {
  position: relative;
}

.effect-stage__item[data-active="true"] {
  opacity: 1;
}

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

.effect-stage__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.effect-stage__rec {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Products menu in the header
   -------------------------------------------------------------------------- */
.nav__item {
  position: relative;
}

/* A transparent strip under the button: without it the pointer leaves the item
   while crossing the gap to the panel, and the menu closes on the way down. */
.nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}

.nav__toggle-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__caret {
  width: 11px;
  height: 11px;
  transition: transform var(--dur) var(--ease-out);
}

.nav__toggle-link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__toggle-link[aria-expanded="true"] {
  color: var(--ink);
}

.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: calc(-1 * var(--space-4));
  z-index: 70;
  min-width: 232px;
  padding: var(--space-3) 0;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(20, 24, 29, 0.08);
}

.nav__menu a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav__menu a:hover,
.nav__menu a:focus-visible {
  color: var(--ink);
  background: var(--paper);
}

/* The page the reader is on says so. */
.nav__menu a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Product sub pages — the home page's language, carried down a level
   -------------------------------------------------------------------------- */
/* A product page carries eight families of drawings, so the same sections run
   on a shorter beat here than on the home page: this one is read, not
   scrolled past. Same rhythm, one notch tighter. */
.pdp .section {
  padding-block: clamp(36px, 3.4vw, 52px);
}

.pdp .sec-head {
  margin-bottom: var(--space-5);
}

.pdp-head {
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(20px, 2.4vw, 32px);
}

.pdp-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.pdp-head__grid > figure {
  max-width: 430px;
  margin-inline: auto;
}

.pdp-head__title {
  margin-top: var(--space-4);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--ink);
}

.pdp-head__lede {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
}

.pdp-head__cta {
  margin-top: var(--space-5);
}

/* The headline facts, as one band under the fold of the hero. */
.pdp-facts {
  padding-bottom: clamp(20px, 2.4vw, 32px);
}

.factband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.factband > div {
  display: grid;
  gap: 2px;
}

.factband dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

.factband dd {
  font-size: var(--fs-base);
  color: var(--ink);
}

/* Application: a wide photograph and the note that goes with it. */
/* Application: the scene, the words, and the night shot that switches on. The
   square scene holds the left column; in the right one the words sit above the
   night shot, so the pair reads as a single block instead of a stack. */
.pdp-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}

.pdp-app > figure {
  grid-column: 1;
  grid-row: 1 / span 2;
  /* The right-hand column is taller than the square shot, so the shot stretches
     to the row span: its bottom then lands on the same line as the night
     picture's, whatever the note above that picture happens to say. The inner
     image is object-fit: cover, so it crops rather than distorts. */
  align-self: stretch;
}

.pdp-app__note {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.pdp-app__night {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  /* When the square shot's minimum height is what stretches the row — which is
     what happens on the Arabic pages — the night picture has to sit on the
     row's bottom edge, not at its top. */
  align-self: end;
  /* The night shot's own caption is pinned to its corner. */
  position: relative;
}

/* Here the night shot is the control itself: the same photograph in two
   states, clicked to switch the light on and off. */
.pdp .app__wall {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.pdp .app__wall:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.pdp-app__note p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 44ch;
}

/* Specification: what this family is, then what every family shares. */
.pdp-spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

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

.pdp-spec__own > div {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.pdp-spec__own dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}

.pdp-spec__own dd {
  font-size: var(--fs-base);
  color: var(--ink);
}

.pdp-spec__basis h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The specification is now two explicit halves: what a standard build is, and
   what can be changed. Both carry the same heading, and a one line sub-label
   says which half the reader is looking at. */
.pdp-spec__standard h3,
.pdp-spec__basis h3 {
  margin-bottom: 6px;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pdp-spec__sub {
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A second block inside the standard column: spike and in-grade for the
   landscape family, the example build for custom, the supply system for the
   pixel nodes, the reference sizes for the street light. */
.pdp-spec__group {
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pdp-spec__group + .pdp-spec__sub {
  margin-top: 6px;
}

/* A statement of intent, for the page whose product is not a fixed range. */
.pdp-spec__headline {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Long technical labels need a wider label column than the short ones did. */
.pdp-spec__own > div {
  grid-template-columns: 15ch minmax(0, 1fr);
}

/* The closing band of every product page: this is configured, not sold off a
   shelf. It continues the specification, so it keeps the paper ground and a
   hairline instead of becoming a new kind of block. */
.pdp-config {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.pdp-config__note {
  max-width: 64ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

.pdp-config__cta {
  margin-top: var(--space-5);
}

.pdp-spec__note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 42ch;
}

/* Parts and construction: the slots the drawings will fill. */
.pdp-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}

.slot {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-2);
  background: var(--white);
}

.slot span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  padding-inline: var(--space-4);
}

/* The series sheets the user supplied: the dimensions block sits under the
   specification, the structure and installation figures in the parts row. */
.sheet {
  margin-top: clamp(32px, 4vw, 56px);
}

.sheet img,
.part img {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
}

/* One slot for every dimensions drawing, whatever shape the drawing is: the
   same band on all eight pages, the artwork scaled down to fit inside it and
   centred, never stretched and never blown up. */
.sheet img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}

/* Same for the two construction drawings: one slot each, so the captions land
   on the same line whichever way round the source artwork is. */
.part img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.sheet figcaption,
.part figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-micro);
  color: var(--ink-4);
}

.part {
  align-content: start;
}

/* The rest of the range, as a quiet index. */
.pdp-next {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.pdp-next a {
  display: grid;
  gap: 2px;
}

.pdp-next span {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
}

.pdp-next em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

.pdp-next a:hover span,
.pdp-next a:focus-visible span {
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
  04 RECENT LARGE PROJECTS — the bridge, on one page
   -------------------------------------------------------------------------- */
#projects {
  /* One screen, like the pages above it. */
  min-height: calc(100vh - var(--header-h));
  display: grid;
  align-content: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

#projects .sec-head {
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

#projects .sec-head__title {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.bridge {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* ------------------------------------------------------------- the studies */
.bridge__carousel {
  display: grid;
  gap: var(--space-3);
}

.bridge__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}

.bridge__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}

.bridge__shot[data-active] {
  opacity: 1;
}

/* One slide per stage. No corner label: the stage reads from the picture. */
.bridge__slide {
  position: absolute;
  inset: 0;
}

.bridge__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.bridge__nav {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: var(--fs-lg);
  line-height: 0;
  padding-bottom: 2px;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out);
}

.bridge__nav:hover,
.bridge__nav:focus-visible {
  border-color: var(--ink);
}

.bridge__count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  color: var(--ink-3);
}

.bridge__caption {
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--ink-4);
}

/* ------------------------------------------------------------- the write-up */
.bridge__copy {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.bridge__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.bridge__place {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: calc(-1 * var(--space-2));
}

.bridge__lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
}

.bridge__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
}

.bridge__facts > div {
  display: grid;
  gap: 1px;
}

.bridge__facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

.bridge__facts dd {
  font-size: var(--fs-sm);
  color: var(--ink);
}

.bridge__notes {
  display: grid;
  gap: var(--space-3);
}

.bridge__notes > div {
  display: grid;
  grid-template-columns: 10ch minmax(0, 1fr);
  gap: var(--space-4);
}

.bridge__notes h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.bridge__notes p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   07 REQUEST A QUOTE
   Kept on paper, not on navy: the dark belongs to the project section, and the
   page should still read as a light, product first site at the close.
   -------------------------------------------------------------------------- */
/* Form on the left, the two places on the right. No hero image at the top:
   the form is the point of the page. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

/* The brief is two ways in, not a form: a stacked pair of buttons on the same
   left column the form used to take. */
.contact__actions {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.contact__actions .btn {
  width: 100%;
}

.contact__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.contact__places {
  display: grid;
  gap: var(--space-7);
  align-content: start;
}

.place {
  display: grid;
  gap: var(--space-4);
}

.place__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.place__rows {
  display: grid;
  gap: var(--space-3);
}

.place__rows > div {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: var(--space-4);
  font-size: var(--fs-base);
}

.place__rows dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 0.24em;
}

.place__rows dd {
  color: var(--ink-2);
}

.contact__quick {
  display: grid;
  margin-top: var(--space-2);
}

.quote__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--ink);
  text-align: left;
  transition: color var(--dur) var(--ease-out);
}

.quote__entry:last-child {
  border-bottom: 1px solid var(--line);
}

.quote__entry:hover {
  color: var(--ink);
}

.quote__entry span:last-child {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  color: var(--ink-4);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 88px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.form__note {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Footer
  -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs [aria-current] {
  color: var(--ink);
}

.pdp-hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-9);
}

.pdp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.pdp-hero__copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.pdp-hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--ink);
}

.pdp-hero__lede {
  max-width: 40ch;
  color: var(--ink-2);
  font-size: var(--fs-lg);
}

.pdp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.pdp-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
}

.pdp-gallery figure {
  display: grid;
  gap: var(--space-3);
}

.pdp-gallery__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

.pdp-table {
  display: grid;
  gap: var(--space-7);
}

.pdp-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 88px);
  border-top: 1px solid var(--line);
}

.pdp-rows > div {
  display: grid;
  grid-template-columns: 16ch minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
}

.pdp-rows dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 0.26em;
}

.pdp-rows dd {
  color: var(--ink);
}

.pdp-note {
  max-width: 68ch;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.pdp-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.pdp-two > div {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.pdp-block-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pdp-diagram {
  width: 100%;
  height: auto;
  background: var(--paper-2);
}

.pdp-wide {
  background: var(--paper-2);
}

.pdp-wide img {
  width: 100%;
  height: auto;
}

.pdp-options {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.pdp-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) clamp(24px, 4vw, 64px);
}

.pdp-choices > div {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pdp-choices dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--ink-4);
}

.pdp-choices dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pdp-choices span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.pdp-list {
  display: grid;
  gap: var(--space-3);
}

.pdp-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--space-4);
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.pdp-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 0.66em;
  border-radius: 50%;
  background: var(--ink-4);
}

.site-footer {
  background: var(--navy-2);
  color: var(--navy-text-3);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-sm);
}

.site-footer__top {
  display: grid;
  /* Column 1 is the brand; Company and Contact share what is left. The brand
     takes a little more than either of them, which is what keeps the logo from
     feeling pinned to the corner now that the third column is gone. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  padding-bottom: var(--space-7);
}

.site-footer__logo {
  height: 46px;
  width: auto;
  opacity: 0.95;
}

.site-footer__line {
  margin-top: var(--space-4);
  max-width: 42ch;
  color: var(--navy-text-2);
}

.site-footer__claim {
  margin-top: var(--space-3);
  max-width: 42ch;
  color: var(--navy-text-3);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.site-footer__head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--navy-text-3);
  margin-bottom: var(--space-4);
}

.site-footer__company {
  color: var(--navy-text);
  line-height: 1.7;
}

/* Company links, contact rows and the legal line all sit on one quiet rhythm. */
.site-footer__links,
.site-footer__contact,
.site-footer__policies {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links {
  display: grid;
  gap: var(--space-2);
}

.site-footer__links a {
  color: var(--navy-text-2);
  transition: color var(--dur) var(--ease-out);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--navy-text);
}

.site-footer__contact {
  display: grid;
  gap: var(--space-3);
}

.site-footer__contact li {
  display: grid;
  gap: 2px;
}

.site-footer__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--navy-text-3);
}

.site-footer__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--navy-text);
}

.site-footer__lead {
  color: var(--navy-text);
}

.site-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 2px;
  color: var(--navy-text);
  border-bottom: 1px solid var(--navy-line);
  transition: border-color var(--dur) var(--ease-out);
}

.site-footer__mail:hover,
.site-footer__mail:focus-visible {
  border-bottom-color: var(--navy-text);
}

/* One stroke weight, currentColor, no colour of their own. */
.site-footer__icon,
.site-footer__value svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--navy-text-3);
}

.site-footer__follow {
  margin-top: var(--space-5);
}

/* Company links are gone, so Contact keeps the right-hand position and the
   middle of the footer is simply left empty. */
.site-footer__col--contact {
  grid-column: 2;
}

/* Copy to clipboard: the value stays plain text, the icon beside it copies. */
.copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.copy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--navy-text-3);
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-out);
}

.copy__btn:hover,
.copy__btn:focus-visible {
  color: var(--navy-text);
}

.copy__glyph {
  width: 15px;
  height: 15px;
}

.copy__glyph--tick {
  display: none;
}

.copy.is-done .copy__glyph--copy {
  display: none;
}

.copy.is-done .copy__glyph--tick {
  display: block;
  color: var(--navy-text);
}

.copy__done {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
  color: var(--navy-text-2);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.copy.is-done .copy__done {
  opacity: 1;
}

.site-footer__ctas {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.site-footer__ctas .btn {
  width: 100%;
  justify-content: center;
}

.site-footer__pending {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  text-transform: uppercase;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.social__link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--navy-line);
  border-radius: 50%;
  color: var(--navy-text-2);
  transition: color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.social__link svg {
  width: 20px;
  height: 20px;
}

.social__link:hover,
.social__link:focus-visible {
  color: var(--navy-text);
  border-color: var(--navy-text);
}

.site-footer__bottom {
  display: grid;
  /* copyright · policies · language, the three positions of a footer bar */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-line);
}

.site-footer__policies {
  display: flex;
  flex-wrap: wrap;
  justify-self: center;
  gap: var(--space-4) var(--space-5);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--navy-text-3);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.site-footer__nav a:hover {
  color: var(--navy-text);
}

.site-footer__legal {
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
}

/* The language switch wears the footer's own colours. */
.lang--footer {
  justify-self: end;
}

.lang--footer .lang__item {
  color: var(--navy-text-3);
}

.lang--footer .lang__item[aria-current="true"] {
  color: var(--navy-text);
}

.lang--footer a.lang__item:hover,
.lang--footer a.lang__item:focus-visible {
  color: var(--navy-text);
}

/* --------------------------------------------------------------------------
   Contact modal

   Every enquiry button on the site opens this instead of walking the reader
   down to the footer. Deep, translucent glass over the page — no colour of its
   own, no gradients, the same hairline and the same two button styles the
   footer already uses.
   -------------------------------------------------------------------------- */
.cmodal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cmodal[hidden] {
  display: none;
}

.cmodal.is-open {
  opacity: 1;
}

.cmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 25, 0.62);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.cmodal__panel {
  position: relative;
  /* Wide enough for the two labels to stay on one line in both languages. */
  width: min(92vw, 600px);
  max-height: calc(100vh - var(--gutter) * 2);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 40px);
  background: rgba(14, 26, 40, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  color: var(--navy-text);
  box-shadow: 0 32px 80px rgba(8, 15, 25, 0.46);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  transform: translateY(8px);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cmodal.is-open .cmodal__panel {
  transform: none;
}

.cmodal__close {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--navy-text-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.cmodal__close svg {
  width: 18px;
  height: 18px;
}

.cmodal__close:hover,
.cmodal__close:focus-visible {
  color: var(--navy-text);
}

.cmodal__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--navy-text);
  padding-inline-end: var(--space-7);
}

.cmodal__lede {
  margin-top: var(--space-3);
  font-size: var(--fs-base);
  color: var(--navy-text-2);
}

.cmodal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The Arabic labels are longer than the English ones, so these two buttons
   wrap and grow instead of running past their edges. */
.cmodal__btn {
  height: auto;
  min-height: 48px;
  padding-block: 11px;
  white-space: normal;
  line-height: 1.25;
}

/* The panel is dark glass, so the primary button needs a stronger rim than it
   does on a white page. */
.cmodal .btn--dark {
  border-color: rgba(244, 247, 250, 0.26);
}

.cmodal__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--navy-line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-spec);
  color: var(--navy-text-3);
}

.cmodal__note a {
  color: var(--navy-text-2);
}

.cmodal__note a:hover,
.cmodal__note a:focus-visible {
  color: var(--navy-text);
}

html.is-modal-open {
  overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   Phase notice
   -------------------------------------------------------------------------- */
.phase-note {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translate(-50%, 160%);
  z-index: 80;
  max-width: min(92vw, 520px);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(20, 24, 29, 0.95);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
  text-align: center;
  transition: transform var(--dur) var(--ease-out);
}

.phase-note.is-visible {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 72px;
  }

  .brand__logo {
    height: 46px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: clamp(32px, 2.6vw, 72px);
  }
}

@media (max-width: 1023px) {
  /* Six nav items need a tighter row before the mobile panel takes over. */
  .nav__list {
    gap: var(--space-4);
  }

  .hero__inner,
  .effects,
  .quote,
  .pdp-hero__inner,
  .pdp-two {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .pdp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cert,
  .about,
  .contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  /* The bridge block is a desktop shape too: one column, and the section
     stops pretending to be a single screen. */
  #projects {
    min-height: 0;
    padding-block: var(--section-y);
  }

  /* Home page about block: the figures stop being a five-across band. */
  #about {
    min-height: 0;
    padding-block: var(--section-y);
  }

  .intro__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }

  /* Product sub pages fold into one column. */
  .pdp-head__grid,
  .pdp-app,
  .pdp-spec {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-app > figure,
  .pdp-app__note,
  .pdp-app__night {
    grid-column: auto;
    grid-row: auto;
  }

  .factband,
  .pdp-parts,
  .pdp-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bridge {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

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

  .hero__title {
    max-width: 18ch;
  }

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

  .rail {
    grid-auto-columns: minmax(280px, 72%);
  }

  /* Four across on tablet, so the captions stay readable in two even rows,
     and the row takes the width it is given — the 72% trim is a desktop
     device. */
  .fam__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 5%;
    width: 100%;
  }

  /* The wall block is a desktop shape: on a narrow screen it takes the full
     width and the section stops pretending to be one screen. */
  #application {
    min-height: 0;
    padding-block: var(--section-y);
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    margin-inline-end: 0;
  }

  .app__stage {
    width: 100%;
    justify-self: stretch;
  }

  .app__picks {
    /* The layout stacks on tablet and the picks take the full width, so four
       across keeps the same two rows as the desktop layout. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  .fam__panel[data-active] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 899px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Footer: one column, in the order a buyer reads it — brand, contact, the
     project buttons, then the company index. */
  .site-footer__cols {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .site-footer__col--contact {
    order: 1;
  }

  .site-footer__col--start {
    order: 2;
  }

  .site-footer__col--company {
    order: 3;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    padding: var(--space-5) var(--gutter) var(--space-7);
    background: rgba(255, 255, 255, 0.99);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out), visibility var(--dur);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .nav__link {
    font-size: var(--fs-lg);
    padding-block: var(--space-3);
  }

  .header__actions .btn {
    display: none;
  }

  /* Inside the mobile panel the products list opens in place. */
  .nav__menu {
    position: static;
    min-width: 0;
    margin-top: var(--space-1);
    padding: 0 0 0 var(--space-4);
    border: 0;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }

  .nav__menu a {
    padding-inline: var(--space-3);
    font-size: var(--fs-base);
  }

  /* How-we-work: the bands, the index and the two facing lists stack. */
  .way {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .transfer,
  .compliance {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 40px);
  }

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

  .custom__figure {
    order: -1;
  }

  .custom__terms--left {
    text-align: left;
  }

}

@media (max-width: 639px) {
  :root {
    --section-y: 64px;
  }

  /* The longest label — REQUEST A CUSTOM CONFIGURATION — plus its light bar no
     longer fits on one phone-width line, so it wraps instead of pushing the
     page sideways. */
  .btn--lg {
    height: auto;
    min-height: 48px;
    padding-block: 12px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }

  /* Footer bar stacks, and everything starts from the same edge. */
  .site-footer__bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-4);
  }

  .site-footer__policies,
  .lang--footer {
    justify-self: start;
  }

  .hero__cta .btn {
    flex: 1 1 100%;
  }

  /* How-we-work: one column each, and the terms list stops pairing up. */
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .hww-hero__cta .btn {
    flex: 1 1 100%;
  }

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

  .rail {
    grid-auto-columns: 86%;
  }

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

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

  .fam__specs > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

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

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

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

  /* The index of the other families stays two across even here: seven links
     stacked one on top of another is most of a screen spent on an index. */
  .pdp-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}