:root {
      --raven: #0F0F0F;
      --powder: #A9C9DC;
      --poppy: #E3545E;
      --white: #F6F7F8;
      --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; background: var(--raven); color: var(--white); font-family: var(--font); min-width: 320px; -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 {
      height: 100vh; height: 100svh;
      min-height: 580px;
      position: relative; overflow: hidden; isolation: isolate;
      display: flex; flex-direction: column;
    }
    /* Soft Poppy Red contour of the MOLRIVA emblem, behind the hero. */
    .watermark { position: absolute; z-index: -1; width: min(75vw, 1080px); right: -12vw; top: 44%; transform: translateY(-50%) rotate(-12deg); opacity: .043; pointer-events: none; }
    .watermark img { display: block; width: 100%; height: auto;  filter: brightness(0) invert(1); }
    .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); line-height: 0; transition: transform 220ms ease; transform-origin: left center; flex-shrink: 0; }
    .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; font-size: clamp(15px, 1.04vw, 18px); font-weight: 600; letter-spacing: .014em; color: rgba(246,247,248,.84); transition: color 200ms ease, transform 200ms ease; transform-origin: center; }
    .navigation a:hover, .navigation a:focus-visible { color: var(--poppy); transform: scale(1.13); }
    .menu-button { display: none; border: 1px solid rgba(255,255,255,.35); color: var(--white); background: transparent; border-radius: 50%; width: 50px; height: 50px; align-items: center; justify-content: center; cursor: pointer; }
    .menu-button svg { width: 24px; height: 24px; }
    .hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5vh var(--pad-x) 10vh; position: relative; text-align: center; }
    .hero-title { color: var(--white); margin: 0; font-size: clamp(38px, 4.7vw, 86px); letter-spacing: -.052em; font-weight: 700; line-height: 1.13; white-space: nowrap; }
    .hero-title span { color: var(--powder); }
    .hero-logo { width: min(74vw, 800px); margin: clamp(42px, 7.3vh, 86px) 0 0; }
    .hero-logo img { width: 100%; height: auto; display: block; }
    .subline { margin: clamp(35px, 5.2vh, 56px) 0 0; color: rgba(246,247,248,.78); font-size: clamp(18px, 1.7vw, 29px); line-height: 1.3; font-weight: 500; letter-spacing: -.025em; }
    @media (min-width: 1441px) { .hero-title { font-size: clamp(61px, 4.7vw, 86px); } }
    @media (max-width: 900px) {
      .navigation { gap: 25px; }
      .navigation a { font-size: 15px; }
      .hero-title { font-size: clamp(25px, 4.4vw, 40px); }
      .hero-logo { width: min(78vw, 680px); }
      .watermark { right: -19vw; width: 94vw; }
    }
    @media (max-width: 650px) {
      :root { --pad-x: 26px; }
      .viewport { min-height: 540px; }
      .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; background: #181818; border: 1px solid rgba(255,255,255,.14); padding: 20px 28px; box-shadow: 0 22px 60px rgba(0,0,0,.45); z-index: 8; }
      .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) scale(1); }
      .hero { padding: 5vh var(--pad-x) 9vh; }
      .hero-title { font-size: clamp(32px, 8.5vw, 52px); line-height: 1.11; white-space: normal; max-width: 570px; }
      .hero-logo { width: min(88vw, 520px); margin-top: clamp(40px, 7vh, 70px); }
      .subline { font-size: clamp(19px, 4.4vw, 25px); max-width: 320px; margin-top: 36px; }
      .watermark { width: 120vw; top: 50%; right: -55vw; opacity: .032; }
    }
    @media (max-height: 670px) and (min-width: 651px) {
      .hero { padding-top: 14px; padding-bottom: 40px; }
      .hero-logo { width: min(58vw, 660px); margin-top: 23px; }
      .subline { margin-top: 20px; }
      .header { padding-top: 22px; }
    }
    @media (max-height: 610px) and (max-width: 650px) {
      .viewport { min-height: 0; }
      .hero { padding-top: 5px; padding-bottom: 5px; }
      .hero-title { font-size: clamp(25px, 6.1vh, 35px); }
      .hero-logo { width: min(62vw, 330px); margin-top: 20px; }
      .subline { margin-top: 17px; font-size: 17px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .001ms !important; }
    }