:root {
      --raven: #0F0F0F;
      --powder: #A9C9DC;
      --poppy: #E3545E;
      --white: #F6F7F8;
      --muted: rgba(246,247,248,.61);
      --pad-x: clamp(24px, 5.75vw, 105px);
      --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { background: var(--raven); }
    body { margin: 0; min-width: 320px; background: var(--raven); color: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible { outline: 2px solid var(--poppy); outline-offset: 7px; }
    button { font: inherit; }

    .viewport {
      min-height: 100vh; min-height: 100svh;
      position: relative; isolation: isolate; overflow: hidden;
      display: flex; flex-direction: column;
    }
    /* Same low-opacity gray emblem used on the homepage/About page. */
    .watermark {
      position: absolute; z-index: -1; pointer-events: none;
      width: min(78vw, 1110px); right: -13vw; top: 51%;
      transform: translateY(-50%) rotate(-12deg); opacity: .043;
    }
    .watermark img { width: 100%; height: auto; display: block;  filter: brightness(0) invert(1); }

    /* Consistent site navigation */
    .header {
      position: relative; z-index: 5; display: flex; align-items: center;
      justify-content: space-between; gap: 35px;
      padding: clamp(30px, 4.8vh, 52px) var(--pad-x) 0;
    }
    .brand-icon {
      display: block; width: clamp(84px, 8.5vw, 123px);
      flex-shrink: 0; line-height: 0; transform-origin: left center;
      transition: transform 220ms ease;
    }
    .brand-icon:hover { transform: scale(1.045); }
    .brand-icon img { display: block; width: 100%; height: auto; }
    .navigation { display: flex; align-items: center; gap: clamp(32px, 3.5vw, 65px); }
    .navigation a {
      display: inline-block; position: relative;
      font-size: clamp(15px, 1.04vw, 18px);
      font-weight: 600; letter-spacing: .014em; color: rgba(246,247,248,.84);
      transform-origin: center;
      transition: color 200ms ease, transform 200ms ease;
    }
    .navigation a:hover, .navigation a:focus-visible { color: var(--poppy); transform: scale(1.13); }
    .navigation a[aria-current="page"] { color: var(--poppy); }
    .navigation a[aria-current="page"]::after {
      content: ""; position: absolute; bottom: -10px; left: 0;
      height: 2px; width: 100%; background: var(--poppy);
    }
    .menu-button {
      display: none; width: 50px; height: 50px; align-items: center;
      justify-content: center; border-radius: 50%; cursor: pointer;
      color: var(--white); background: transparent;
      border: 1px solid rgba(255,255,255,.35);
    }
    .menu-button svg { width: 24px; height: 24px; }

    .materials {
      flex: 1; width: 100%; max-width: 1720px; margin: 0 auto;
      padding: clamp(58px, 9vh, 104px) var(--pad-x) clamp(58px, 9vh, 104px);
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
      align-items: center; column-gap: clamp(55px, 7vw, 144px);
    }
    .intro { align-self: center; }
    .headline {
      margin: 0; font-size: clamp(64px, 7.2vw, 130px);
      line-height: 1.08; letter-spacing: -.07em; font-weight: 700;
    }
    .headline span { display: block; }
    .headline .powder { color: var(--powder); }
    .intro-note {
      max-width: 440px; margin: clamp(28px, 4.3vh, 49px) 0 0;
      font-size: clamp(19px, 1.4vw, 24px);
      line-height: 1.55; color: var(--muted); letter-spacing: -.02em;
    }

    /* Horizontally scrollable, native-scroll-snap product gallery. */
    .catalog-wrap { width: 100%; min-width: 0; }
    .catalog {
      display: flex; width: 100%; gap: 16px;
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory; scroll-behavior: smooth;
      overscroll-behavior-x: contain;
      scrollbar-width: none; -ms-overflow-style: none;
      padding: 10px 1px 12px;
      -webkit-overflow-scrolling: touch;
    }
    .catalog::-webkit-scrollbar { display: none; }
    /* Trailing gutter lets the last slide settle at the start. */
    .catalog::after { content: ''; flex: 0 0 58px; }
    .material {
      position: relative; flex: 0 0 calc(100% - 58px);
      min-width: 0; min-height: 382px; scroll-snap-align: start;
      padding: clamp(29px, 3.2vw, 45px);
      display: flex; flex-direction: column;
      background: rgba(255,255,255,.024);
      border: 1px solid rgba(246,247,248,.14);
      transition: border-color .42s ease, background .42s ease, transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease;
    }
    .catalog.is-animating { scroll-snap-type: none; scroll-behavior: auto; }
    .material::before {
      content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
      width: 3px; background: var(--poppy);
      opacity: 0; transform: scaleY(.45); transform-origin: center;
      transition: opacity .38s ease, transform .48s cubic-bezier(.22,1,.36,1);
    }
    .material:hover::before, .material:focus-within::before {
      opacity: 1; transform: scaleY(1);
    }
    .carousel-footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: 25px; margin-top: clamp(21px, 3vh, 32px);
    }
    .carousel-status { display: flex; align-items: center; gap: 22px; min-width: 0; }
    .carousel-count {
      font-size: 14px; font-weight: 700; letter-spacing: .1em;
      color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
    }
    .carousel-count strong { color: var(--white); font-weight: 700; }
    .carousel-progress {
      width: clamp(80px, 8vw, 135px); height: 2px;
      background: rgba(246,247,248,.2); overflow: hidden;
    }
    .carousel-progress span {
      display: block; height: 100%; width: 50%;
      background: var(--powder); transition: width .3s ease;
    }
    .carousel-buttons { display: flex; gap: 10px; }
    .carousel-button {
      width: 51px; height: 51px; border-radius: 50%;
      border: 1px solid rgba(246,247,248,.36);
      background: transparent; color: var(--white);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 27px; line-height: 1;
      transition: color .2s, border-color .2s, background .2s;
    }
    .carousel-button:hover:not(:disabled) {
      border-color: var(--poppy); color: var(--poppy);
    }
    .carousel-button:disabled { opacity: .28; cursor: default; }
    .material:hover, .material:focus-within {
      border-color: rgba(227,84,94,.76);
      background: rgba(227,84,94,.045);
      box-shadow: 0 12px 46px rgba(0,0,0,.18);
      transform: translateY(-4px);
    }
    .material-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
    .material-type {
      color: rgba(246,247,248,.55); font-size: 12px; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
    }
    .material-code {
      margin: 12px 0 3px;
      font-size: clamp(62px, 5.8vw, 99px); font-weight: 700;
      line-height: 1.08; letter-spacing: -.065em;
      color: var(--powder);
    }
    .material-name {
      margin: 0; color: rgba(246,247,248,.88); font-size: clamp(16px, 1.2vw, 19px);
      line-height: 1.45; letter-spacing: -.015em;
    }
    .material-action {
      display: inline-flex; align-items: center; gap: 15px;
      margin-top: auto; padding-top: clamp(28px, 4vh, 46px);
      color: var(--white); text-transform: uppercase; letter-spacing: .07em;
      font-size: 13px; font-weight: 700;
      transition: color .2s ease;
    }
    .material-action .arrow { color: var(--powder); font-size: 21px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
    .material-action:hover, .material:focus-within .material-action { color: var(--poppy); }
    .material:hover .material-action .arrow,
    .material:focus-within .material-action .arrow { color: var(--poppy); }
    .material-action:hover .arrow { transform: translate(3px,-3px); }

    @media (max-width: 1150px) {
      .materials { column-gap: 50px; }
      .headline { font-size: clamp(58px, 6.7vw, 92px); }
    }
    @media (max-width: 900px) {
      .materials { grid-template-columns: 1fr; align-content: center; gap: 46px; }
      .headline { font-size: clamp(64px, 10vw, 98px); }
      .intro-note { margin-top: 22px; }
      .material { min-height: 330px; }
      .material { padding: 28px 24px; }
      .material-code { font-size: clamp(66px, 8vw, 90px); }
      .material-name { min-height: 56px; }
    }
    @media (max-width: 650px) {
      :root { --pad-x: 26px; }
      .header { padding-top: 27px; }
      .brand-icon { width: 99px; }
      .menu-button { display: flex; }
      .navigation {
        display: none; position: absolute; right: var(--pad-x); left: var(--pad-x);
        top: 94px; z-index: 8; background: #181818;
        border: 1px solid rgba(255,255,255,.14); padding: 20px 28px;
        box-shadow: 0 22px 60px rgba(0,0,0,.45);
      }
      .navigation.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
      .navigation a { font-size: 20px; display: block; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
      .navigation a:last-child { border-bottom: 0; }
      .navigation a:hover { transform: translateX(6px); }
      .navigation a[aria-current="page"]::after { display: none; }
      .materials { gap: 35px; padding-top: 65px; padding-bottom: 66px; align-content: start; }
      .headline { font-size: clamp(60px, 12.1vw, 83px); }
      .intro-note { font-size: 19px; margin-top: 22px; }
      .catalog { gap: 13px; }
      .catalog::after { flex-basis: 32px; }
      .material { padding: 26px 24px; flex-basis: calc(100% - 32px); min-height: 308px; }
      .carousel-footer { margin-top: 19px; }
      .carousel-progress { width: 75px; }
      .carousel-button { width: 46px; height: 46px; }
      .material-code { margin-top: 9px; font-size: 67px; }
      .material-name { font-size: 17px; min-height: 0; }
      .material-action { padding-top: 23px; }
      .watermark { width: 125vw; right: -55vw; top: 48%; opacity: .032; }
    }
    @media (max-height: 690px) and (min-width: 901px) {
      .materials { padding-top: 35px; padding-bottom: 36px; }
      .material { padding-top: 17px; padding-bottom: 17px; }
      .material-code { font-size: clamp(60px, 4.7vw, 78px); }
      .material-action { padding-top: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .001ms !important; }
      .catalog { scroll-behavior: auto; }
    }