/* Fonts */

@font-face {
  font-family: "Noto Sans";
  src: url("fonts/noto-sans-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/noto-serif-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Scaling */

.fregate-root {
  --dw: 390;
  --vw-cap: 100vw;
  /* --px: calc(100vw / var(--dw)); */
  --px: calc(min(100vw, var(--vw-cap)) / var(--dw));
  font-size: calc(18 * var(--px));
  line-height: 1;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: none;
  scroll-behavior: smooth;

  picture {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    /* LQIP: the ~20px blur is inlined per <picture> as --lqip and scaled up
       (browsers interpolate backgrounds, so it reads as a soft blur). It sits
       behind the <img>, which fades in over it once loaded. */
    background-image: var(--lqip, none);
    background-size: cover;
    background-position: center;
  }

  /* Only fade when JS is active, so without JS the images still show. */
  &.js picture img {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  &.js picture img.loaded {
    opacity: 1;
  }
}

@media screen and (min-width: 481px) {
  .fregate-root {
    --dw: 1024;
    --vw-cap: 100vw;
  }
}

@media screen and (min-width: 1025px) {
  .fregate-root {
    --dw: 1440;
    --vw-cap: 2240px;
  }
}

/* Colors */

.fregate-root {
  --dark-green: #11382d;
  --green: #006e4b;
  --light-green: #00d09e;
  --gold: #ce932c;
  --sand: #efefdc;
  --outline: rgba(17, 55, 44, 0.2);

  background: var(--sand);
  color: var(--dark-green);
}

/* Headings */

.xl-heading,
.l-heading,
.m-heading,
.s-heading,
.sub-heading,
.l-paragraph,
.serif-paragraph {
  font-family: "Noto Serif", serif;
}

.paragraph,
.s-paragraph,
.xs-paragraph,
.cta,
.m-cta,
.form-input {
  font-family: "Noto Sans", sans-serif;
}

.xl-heading {
  font-size: calc(55 * var(--px));
  line-height: calc(55 * var(--px));
  font-weight: 100;
}

.l-heading {
  font-size: calc(36 * var(--px));
  line-height: calc(40 * var(--px));
  font-weight: 300;
  letter-spacing: -0.03em;
}

.m-heading {
  font-size: calc(24 * var(--px));
  line-height: calc(28 * var(--px));
  font-weight: 300;
  letter-spacing: -0.03em;
}

.s-heading {
  font-size: calc(20 * var(--px));
  line-height: calc(26 * var(--px));
  font-weight: 300;
  letter-spacing: -0.03em;
}

.sub-heading {
  font-size: calc(30 * var(--px));
  line-height: calc(40 * var(--px));
  font-weight: 300;
  letter-spacing: -0.03em;
}

.l-paragraph {
  font-size: calc(22 * var(--px));
  line-height: calc(29 * var(--px));
  font-weight: 300;
  letter-spacing: -0.02em;

  strong {
    font-weight: 600;
  }
}

.serif-paragraph {
  font-size: calc(18 * var(--px));
  line-height: calc(24 * var(--px));
  font-weight: 400;
  letter-spacing: -0.02em;

  strong {
    font-weight: 600;
  }
}

.paragraph {
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  font-weight: 400;
  letter-spacing: -0.02em;

  strong {
    font-weight: 600;
  }
}

.s-paragraph,
.xs-paragraph {
  font-size: calc(12 * var(--px));
  line-height: calc(16 * var(--px));
  font-weight: 400;
  letter-spacing: -0.02em;
}

.form-input {
  font-size: calc(16 * var(--px));
  line-height: calc(18 * var(--px));
  font-weight: 400;
  letter-spacing: -0.02em;
}

.m-cta {
  font-size: calc(20 * var(--px));
  font-weight: 500;
  letter-spacing: -0.02em;
}

.cta {
  font-size: calc(14 * var(--px));
  line-height: calc(16 * var(--px));
  font-weight: 400;
  letter-spacing: -0.02em;
}

@media screen and (min-width: 481px) {
  .xl-heading {
    font-size: calc(80 * var(--px));
    line-height: calc(80 * var(--px));
  }

  .l-heading {
    font-size: calc(36 * var(--px));
    line-height: calc(40 * var(--px));
  }

  .m-heading {
    font-size: calc(32 * var(--px));
    line-height: calc(40 * var(--px));
  }

  .s-heading {
    font-size: calc(22 * var(--px));
    line-height: calc(28 * var(--px));
    font-weight: 300;
  }

  .sub-heading {
    font-size: calc(30 * var(--px));
    line-height: calc(40 * var(--px));
  }

  .l-paragraph {
    font-size: calc(22 * var(--px));
    line-height: calc(29 * var(--px));
  }

  .serif-paragraph {
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
  }

  .paragraph {
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
  }

  .s-paragraph {
    font-size: calc(14 * var(--px));
    line-height: calc(18 * var(--px));
  }

  .xs-paragraph {
    font-size: calc(12 * var(--px));
    line-height: calc(16 * var(--px));
  }

  .form-input {
    font-size: calc(16 * var(--px));
    line-height: calc(18 * var(--px));
  }

  .m-cta {
    font-size: calc(20 * var(--px));
  }

  .cta {
    font-size: calc(20 * var(--px));
    line-height: calc(20 * var(--px));
  }
}

@media screen and (min-width: 1025px) {
  .xl-heading {
    font-size: calc(100 * var(--px));
    line-height: calc(100 * var(--px));
  }

  .l-heading {
    font-size: calc(56 * var(--px));
    line-height: calc(70 * var(--px));
  }

  .m-heading {
    font-size: calc(32 * var(--px));
    line-height: calc(40 * var(--px));
  }

  .s-heading {
    font-size: calc(24 * var(--px));
    line-height: calc(30 * var(--px));
    font-weight: 300;
  }

  .sub-heading {
    font-size: calc(40 * var(--px));
    line-height: calc(50 * var(--px));
  }

  .l-paragraph {
    font-size: calc(28 * var(--px));
    line-height: calc(35 * var(--px));
  }

  .serif-paragraph {
    font-size: calc(22 * var(--px));
    line-height: calc(28 * var(--px));
  }

  .paragraph {
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
  }

  .s-paragraph {
    font-size: calc(14 * var(--px));
    line-height: calc(18 * var(--px));
  }

  .xs-paragraph {
    font-size: calc(12 * var(--px));
    line-height: calc(16 * var(--px));
  }

  .form-input {
    font-size: calc(16 * var(--px));
    line-height: calc(18 * var(--px));
  }

  .m-cta {
    font-size: calc(20 * var(--px));
  }

  .cta {
    font-size: calc(14 * var(--px));
    line-height: calc(16 * var(--px));
  }
}

/* Global */

.button {
  position: relative;
  width: 100%;
  height: calc(60 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--gold);
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--dark-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
  }

  @media (hover: hover) {
    &:hover::before {
      transform: scaleX(1);
    }
  }

  &:active::before {
    transform: scaleX(1);
  }

  &.button-form,
  &.button-sec {
    --notch-width: calc(9 * var(--px));
    --notch-height: calc(17 * var(--px));
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    -webkit-mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    -webkit-mask-position:
      calc(-1 * var(--px)) center,
      0 0;
    mask-position:
      calc(-1 * var(--px)) center,
      0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  svg {
    position: absolute;
    left: calc(-1 * var(--px));
    z-index: 1;
  }

  span {
    position: relative;
    z-index: 1;
    padding-bottom: calc(1 * var(--px));
  }
}

.button-sec {
  width: fit-content;
  padding: 0 calc(40 * var(--px));
  background: var(--sand);
  color: var(--dark-green);

  &::before {
    background: var(--gold);
  }
}

.container {
  /* display: flex;
  flex-direction: column; */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: calc(8 * var(--px));
  row-gap: calc(100 * var(--px));
  padding: calc(100 * var(--px)) calc(12 * var(--px));

  &.reduced {
    padding: calc(12 * var(--px)) calc(12 * var(--px));
  }

  &.reduced-bottom {
    padding: calc(100 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px));
  }

  &.dark-green {
    background: var(--dark-green);
    color: var(--sand);
  }
}

/* Nav */

nav {
  position: fixed;
  width: 100%;
  z-index: 2;
  pointer-events: none;

  .logo,
  .menu-button,
  .cta,
  .menu {
    pointer-events: auto;
  }

  .nav-scroll {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--px));
    padding: calc(12 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px));
    background-color: transparent;
    transition: background-color 0.4s ease;
  }

  &.open {
    .menu-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transition:
        opacity 0.35s ease,
        visibility 0s;
    }

    .menu {
      clip-path: inset(0 0 0 0);
      visibility: visible;
      pointer-events: auto;
      transition:
        clip-path 0.35s cubic-bezier(0.45, 0, 0.55, 1) 0.1s,
        visibility 0s;
    }
  }

  .logo {
    justify-self: center;
    display: block;
    height: auto;
    color: white;
    transition: color 0.3s ease;
    padding-block: unset;

    /* Combined logo emblem: scales with the design system and stays centered.
       Mobile uses a smaller fixed width; tablet+ uses 208 to match the JS
       collapse animation (LOGO_FULL_WIDTH). */
    > svg {
      display: block;
      width: calc(130 * var(--px));
      height: auto;
      margin: 0 auto;
      pointer-events: auto;

      /* The "fregate" wordmark paths (the bird is a gradient and is left
         untouched). Matches the menu overlay's 0.35s ease so the colour flip
         stays in sync with the open/close animation. */
      path[fill="#006E4B"] {
        transition: fill 0.35s ease;
      }
    }
  }

  .nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: calc(24 * var(--px));
  }

  .nav-buttons {
    justify-self: start;
    display: flex;
    gap: calc(4 * var(--px));
  }

  .menu-button {
    position: relative;
    flex-shrink: 0;
    /* width: calc(40 * var(--px)); */
    height: calc(40 * var(--px));
    padding: 0 calc(25 * var(--px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--px));
    color: white;
    background: var(--gold);
    transition:
      background 0.3s ease,
      color 0.3s ease-out;

    .icon-close {
      display: none;
    }
    --notch-width: calc(9 * var(--px));
    --notch-height: calc(17 * var(--px));
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    -webkit-mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    -webkit-mask-position:
      calc(-1 * var(--px)) center,
      0 0;
    mask-position:
      calc(-1 * var(--px)) center,
      0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      background: var(--dark-green);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease-out;
    }

    span {
      position: relative;
      z-index: 1;
      display: none;
    }

    @media (hover: hover) {
      &:hover::before {
        transform: scaleX(1);
      }

      &:hover svg rect {
        fill: white;
      }

      &:hover svg path {
        stroke: white;
      }
    }

    &:active::before {
      transform: scaleX(1);
    }

    &:active svg rect {
      fill: white;
    }

    &:active svg path {
      stroke: white;
    }

    svg {
      position: relative;
      z-index: 1;
      width: calc(12 * var(--px));
      height: calc(12 * var(--px));

      rect {
        fill: white;
        transition: fill 0.3s ease-out;
      }

      path {
        stroke: white;
        transition: stroke 0.3s ease-out;
      }
    }
  }

  /* Over --dark-green sections the default hover wipe (dark-green) would
     vanish into the background. In dark theme the wipe goes white and the
     label/icons flip to dark-green so the button stays legible. The gold
     rest state already reads fine on dark, so only hover/active change. */
  &.dark-theme .menu-button {
    &::before {
      background: white;
    }

    @media (hover: hover) {
      &:hover {
        color: var(--dark-green);
      }

      &:hover svg rect {
        fill: var(--dark-green);
      }

      &:hover svg path {
        stroke: var(--dark-green);
      }
    }

    &:active {
      color: var(--dark-green);
    }

    &:active svg rect {
      fill: var(--dark-green);
    }

    &:active svg path {
      stroke: var(--dark-green);
    }
  }

  /* Over dark sections (and while the menu is open over the dark overlay) the
     green "fregate" wordmark is illegible, so flip it to white (the bird
     gradient is left as-is). */
  &.dark-theme .logo svg path[fill="#006E4B"],
  &.open .logo svg path[fill="#006E4B"] {
    fill: white;
  }

  .menu-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
    transition:
      opacity 0.35s ease,
      visibility 0s linear 0.35s;
  }

  .menu {
    position: fixed;
    top: calc(12 * var(--px));
    left: 0;
    transform: translateY(var(--menu-offset, 0));
    clip-path: inset(0 100% 100% 0);
    visibility: hidden;
    pointer-events: none;
    width: calc(100% - calc(24 * var(--px)));
    margin: 0 calc(12 * var(--px));
    z-index: 1;
    transition:
      clip-path 0.35s cubic-bezier(0.45, 0, 0.55, 1) 0.1s,
      visibility 0s linear 0.4s;
  }

  &.menu-at-top .menu {
    --notch-top: calc(11.5 * var(--px));
    --notch-width: calc(9 * var(--px));
    --notch-height: calc(17 * var(--px));
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    -webkit-mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    -webkit-mask-position:
      calc(-1 * var(--px)) var(--notch-top),
      0 0;
    mask-position:
      calc(-1 * var(--px)) var(--notch-top),
      0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .menu-close {
    position: absolute;
    top: 0;
    left: calc(32 * var(--px));
    width: fit-content;
    height: calc(44 * var(--px));
    display: none;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--px));
  }

  &.menu-at-top .menu-close {
    display: flex;
    transition: color 0.3s ease-out;

    svg {
      width: calc(12 * var(--px));
      height: calc(12 * var(--px));

      path {
        transition: stroke 0.3s ease-out;
      }
    }

    @media (hover: hover) {
      &:hover {
        color: var(--gold);
      }

      &:hover svg path {
        stroke: var(--gold);
      }
    }

    &:active {
      color: var(--gold);
    }

    &:active svg path {
      stroke: var(--gold);
    }
  }

  .menu-logo {
    display: block;
    width: 100%;
    margin-bottom: calc(28 * var(--px));
    color: var(--dark-green);

    svg {
      width: calc(69 * var(--px));
      height: auto;
    }
  }
  &.menu-at-top .menu-inner {
    padding: calc(68 * var(--px)) calc(32 * var(--px)) calc(24 * var(--px));
  }
  .menu-inner {
    padding: calc(24 * var(--px)) calc(32 * var(--px)) calc(24 * var(--px));
    background: var(--sand);
  }

  .menu-links {
    margin-bottom: calc(28 * var(--px));

    a {
      transition:
        transform 0.3s ease-out,
        color 0.3s ease-out;

      @media (hover: hover) {
        &:hover {
          transform: translateX(calc(12 * var(--px)));
          color: var(--gold);
          text-decoration: none;
        }
      }

      &:active {
        transform: translateX(calc(12 * var(--px)));
        color: var(--gold);
        text-decoration: none;
      }
    }
  }

  .socials {
    flex-direction: row;
    gap: calc(20 * var(--px));
  }

  ul {
    align-items: flex-start;
    gap: 0;

    a {
      text-decoration: none;

      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }

      &:active {
        text-decoration: underline;
      }
    }
  }

  a {
    height: calc(44 * var(--px));
    display: flex;
    align-items: center;
  }

  .button-notch-gold {
    display: none;
  }

  &.menu-at-top .button-notch-gold {
    position: relative;
    display: flex;
    justify-content: center;
    color: white;
    background: var(--gold);
    text-align: center;
    --notch-width: calc(9 * var(--px));
    --notch-height: calc(17 * var(--px));
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    -webkit-mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    mask-size:
      var(--notch-width) var(--notch-height),
      100% 100%;
    -webkit-mask-position:
      calc(-1 * var(--px)) center,
      0 0;
    mask-position:
      calc(-1 * var(--px)) center,
      0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      background: var(--dark-green);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease-out;
    }

    @media (hover: hover) {
      &:hover::before {
        transform: scaleX(1);
      }
    }

    &:active::before {
      transform: scaleX(1);
    }

    span {
      position: relative;
      z-index: 1;
    }
  }
}

/* Page */

.hero {
  position: relative;

  picture {
    height: 100vh;
    position: relative;
    /* Hero parallax translates the full-height image rather than overscanning,
       so it doesn't get the extra height. */
    --parallax-overscan: 0%;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, white 0%, transparent 20%);
    }
  }

  header {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(180 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(48 * var(--px));
    margin-inline: calc(12 * var(--px));
    color: var(--sand);
  }

  .top {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(40 * var(--px));
    text-align: center;

    :is(p, h1) {
      width: 100%;
    }
  }

  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--px));
    text-align: center;

    p {
      width: 100%;
    }
  }
}

.heading-large {
  grid-column: 1/-1;

  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
  width: 100%;
  text-align: center;

  &.body-copy {
    text-align: left;
  }

  &.sand {
    :is(p, h1, h2, h3) {
      color: var(--sand);
    }
  }

  &.centered {
    text-align: center;
  }
}

.video {
  grid-column: 1/-1;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dark-green);
}

.video video {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

/* Native controls stay mounted but hidden, then fade in via .controls-visible
   (toggled on hover for desktop / tap for mobile in script.js). */
.video video::-webkit-media-controls-panel {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.video video.controls-visible::-webkit-media-controls-panel {
  opacity: 1;
}

.form {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--px));
  /* padding-top: calc(40 * var(--px));
  padding-bottom: calc(24 * var(--px));
  padding-inline: calc(12 * var(--px)); */

  form {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--px));
  }

  > .success {
    display: none;
    width: 100%;

    .message {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: calc(28 * var(--px));
      background: white;
      height: calc(360 * var(--px));
    }
  }

  &.is-success form,
  &.is-success > .s-heading {
    display: none;
  }

  &.is-success > .success {
    display: block;
  }

  .form-inputs {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--px));
  }

  .form-inputs-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(12 * var(--px));
  }

  .form-input {
    position: relative;

    &:has(input:focus) > span,
    &:has(input:not(:placeholder-shown)) > span {
      color: var(--green);
      transform: translate3d(0, calc(-8 * var(--px)), 0) scale(0.6);
    }

    span {
      position: absolute;
      top: calc(16 * var(--px));
      left: calc(17 * var(--px));
      transform-origin: 0 0;
      transition:
        transform 0.2s ease,
        color 0.2s ease;
    }

    input {
      width: 100%;
      height: calc(50 * var(--px));
      padding: calc(12 * var(--px)) calc(16 * var(--px)) 0;
      border: 1px solid rgba(17, 56, 45, 0.2);

      &::placeholder {
        color: transparent;
      }
    }
  }

  .checkbox {
    display: flex;
    /* align-items: center; */
    gap: calc(12 * var(--px));

    .checkbox-wrap {
      position: relative;

      input {
        flex-shrink: 0;
        appearance: none;
        background: transparent;
        width: calc(16 * var(--px));
        height: calc(16 * var(--px));
        border: 1px solid var(--green);

        &:checked {
          background: var(--green);
          + svg {
            display: block;
          }
        }
      }

      svg {
        position: absolute;
        inset: 0;
        width: calc(16 * var(--px));
        height: calc(16 * var(--px));
        pointer-events: none;
        z-index: 1;
        display: none;
      }
    }
  }
}

.image-array {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
  padding: calc(24 * var(--px)) 0;
}
.full-image {
  grid-column: 1/-1;
  aspect-ratio: 4/5;
  overflow: hidden;

  picture {
    height: 100%;
  }
}

.sticky-image {
  grid-column: 1/-1;
  aspect-ratio: 4/5;
  overflow: hidden;
  width: calc(100% + 24 * var(--px));
  transform: translateX(calc(-12 * var(--px)));

  picture {
    height: 100%;
  }
}

.stacked-cards {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--px));

  .card {
    display: flex;
    flex-direction: column;
    /* gap: calc(60 * var(--px)); */
    width: 100%;
    border: calc(1 * var(--px)) solid var(--outline);

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(16 * var(--px));
      padding: calc(22 * var(--px)) calc(24 * var(--px));
      background: var(--gold);

      /* Same notch as the button, cut into the left edge. */
      --notch-width: calc(9 * var(--px));
      --notch-height: calc(17 * var(--px));
      -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
        linear-gradient(white, white);
      mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 17'%3E%3Cpath d='M1 0.500557V0H0V17H1V16.5131C1 15.5658 1.4263 14.6687 2.1608 14.0705L7.99914 9.3152C8.51545 8.89466 8.51498 8.10592 7.99816 7.68601L2.16374 2.94554C1.42748 2.34733 1 1.4492 1 0.500557Z' fill='white'/%3E%3C/svg%3E"),
        linear-gradient(white, white);
      -webkit-mask-size:
        var(--notch-width) var(--notch-height),
        100% 100%;
      mask-size:
        var(--notch-width) var(--notch-height),
        100% 100%;
      -webkit-mask-position:
        calc(-1 * var(--px)) center,
        0 0;
      mask-position:
        calc(-1 * var(--px)) center,
        0 0;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }

    .text {
      display: flex;
      flex-direction: column;
      gap: calc(40 * var(--px));
      background: var(--sand);
      color: var(--dark-green);
      padding: calc(48 * var(--px)) calc(28 * var(--px));
    }
  }
}

.text-box {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(140 * var(--px)) 0 calc(188 * var(--px));
  p {
    text-align: center;
  }
}

.mask-wrap {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: calc(8 * var(--px));
  row-gap: calc(133 * var(--px));
  padding: calc(210 * var(--px)) 0 calc(12 * var(--px));
  background: var(--green);

  /* Triangle notch cut into the left-center and right-center edges - same
       xor technique as the button notch, pointing inward on the x axis. */
  --notch-width: calc(15 * var(--px));
  --notch-height: calc(30 * var(--px));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 30'%3E%3Cpath d='M0 0V30L15 15Z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 30'%3E%3Cpath d='M15 0V30L0 15Z' fill='white'/%3E%3C/svg%3E"),
    linear-gradient(white, white);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 30'%3E%3Cpath d='M0 0V30L15 15Z' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 30'%3E%3Cpath d='M15 0V30L0 15Z' fill='white'/%3E%3C/svg%3E"),
    linear-gradient(white, white);
  -webkit-mask-size:
    var(--notch-width) var(--notch-height),
    var(--notch-width) var(--notch-height),
    100% 100%;
  mask-size:
    var(--notch-width) var(--notch-height),
    var(--notch-width) var(--notch-height),
    100% 100%;
  -webkit-mask-position:
    left center,
    calc(100% + calc(1 * var(--px))) center,
    0 0;
  mask-position:
    left center,
    calc(100% + calc(1 * var(--px))) center,
    0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  .mask-cta {
    grid-column: 1/-1;
    justify-self: center;
  }

  .heading-large {
    grid-column: 3/7;
    /* text-align: unset; */
  }
  .button {
    width: auto;
    justify-self: stretch;
    grid-column: 1/-1;
    margin: 0 calc(12 * var(--px));
  }
}

.bird-logo {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;

  svg {
    width: calc(180 * var(--px));
    height: auto;
  }
}

footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--px));
  /* padding: 0 calc(12 * var(--px)); */

  .details {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--px));
    padding: 0 calc(12 * var(--px));

    ul {
      gap: 0;
      li a {
        height: calc(40 * var(--px));
        display: flex;
        align-items: center;
        gap: calc(8 * var(--px));
      }
    }
  }

  form {
    width: 100%;
    padding: 0 calc(12 * var(--px));
    .success {
      display: none;
      width: 100%;

      .message {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: calc(28 * var(--px));
        text-align: center;
        background: white;
        height: calc(420 * var(--px));
      }
    }

    &.is-success .form,
    &.is-success > button[type="submit"] {
      display: none;
    }

    &.is-success .success {
      display: block;
    }
  }

  .form {
    padding-bottom: calc(40 * var(--px));
  }

  .text-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--px));
  }
  .illustration {
    padding: calc(20 * var(--px)) 0 0;
    width: 100%;
    height: calc(542 * var(--px));
    /* No parallax, so no overscan: the image shows in full, not clipped. */
    --parallax-overscan: 0%;
  }
  .logo {
    width: 100%;
    padding: calc(40 * var(--px)) calc(12 * var(--px)) 0;
  }

  .meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--px));
    padding: 0 calc(12 * var(--px)) calc(40 * var(--px));
    color: var(--green);
  }

  .socials {
    display: flex;
    flex-direction: row;
    gap: calc(24 * var(--px));

    a {
      height: calc(40 * var(--px));
      display: flex;
      align-items: center;
      text-decoration: none;

      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }

      &:active {
        text-decoration: underline;
      }
    }
  }

  .legal {
    display: flex;
    flex-direction: row;
    text-decoration: underline;
    gap: calc(24 * var(--px));
    padding: 0;
  }

  .copyright {
    text-align: center;
    width: calc(325 * var(--px));
  }
}

/* Tablet */

@media screen and (min-width: 481px) {
  nav {
    .menu-logo {
      display: none;
    }

    .logo > svg {
      width: calc(208 * var(--px));
    }

    .nav-scroll {
      gap: calc(32 * var(--px));
      padding: calc(24 * var(--px)) calc(32 * var(--px)) calc(32 * var(--px));
    }

    .menu-button span {
      display: inline;
    }

    .menu {
      top: calc(24 * var(--px));
      width: calc(459 * var(--px));
      margin: 0 calc(32 * var(--px));
    }

    .menu-links {
      gap: calc(4 * var(--px));

      a {
        padding-block: 0;
      }
    }

    .socials {
      margin-top: calc(16 * var(--px));
    }

    a {
      height: auto;
      padding-block: calc(4 * var(--px));
    }

    .button-notch-gold {
      height: calc(44 * var(--px));
    }
  }

  .container {
    grid-template-columns: repeat(12, 1fr);
    padding: calc(120 * var(--px)) calc(24 * var(--px));
    row-gap: calc(120 * var(--px));

    &.reduced {
      padding: calc(24 * var(--px));
    }
    &.reduced-bottom {
      padding: calc(120 * var(--px)) calc(24 * var(--px)) 0;
    }
  }

  .hero {
    picture {
      min-height: calc(730 * var(--px));
    }
    .top {
      margin: 0 auto;
      width: calc(730 * var(--px));
      gap: calc(60 * var(--px));
      text-align: unset;

      :is(p, h1) {
        display: flex;
        flex-direction: column;

        span:nth-child(2) {
          align-self: flex-end;
        }
      }
    }

    .bottom {
      width: calc(730 * var(--px));
      margin: 0 auto;

      p {
        text-align: center;
      }
    }
  }

  .heading-large {
    /* gap: calc(40 * var(--px)); */
    grid-column: 3/11;
    margin-inline: unset;
    margin: 0 auto;
    text-align: unset;

    :is(p, h2):last-child {
      display: flex;
      flex-direction: column;

      span:nth-child(2) {
        align-self: flex-end;
      }
    }
  }

  .full-image {
    grid-column: 1/-1;
    aspect-ratio: 16/9;

    picture {
      height: 100%;
    }
  }

  .sticky-image {
    grid-column: 1/-1;
    aspect-ratio: 16/9;
    width: calc(100% + 48 * var(--px));
    transform: translateX(calc(-24 * var(--px)));
  }

  .form {
    .form-inputs-column {
      grid-template-columns: repeat(2, 1fr);

      .form-input:nth-child(1) {
        grid-column: 1 / 2;
      }

      .form-input:nth-child(2) {
        grid-column: 2 / 3;
      }

      .form-input:nth-child(3) {
        grid-column: 1 / -1;
      }
    }

    > .success {
      .message {
        height: calc(258 * var(--px));
        padding-bottom: calc(24 * var(--px));
      }
    }
  }

  .full-image {
    aspect-ratio: 16/9;

    picture {
      height: 100%;
    }
  }

  .stacked-cards {
    gap: calc(40 * var(--px));
    margin-inline: calc(40 * var(--px));

    .card {
      gap: initial;
      justify-content: space-between;
      width: calc(748 * var(--px));
      z-index: 1;

      .text {
        .sub-heading {
          margin-top: auto;
          margin-bottom: auto;
        }
      }
    }
  }

  .text-box {
    grid-column: 4/10;
    padding: calc(160 * var(--px)) 0 calc(220 * var(--px));
    z-index: 1;
  }

  .bird-logo {
    svg {
      width: calc(420 * var(--px));
    }
  }

  footer {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* align-items: center; */
    gap: calc(8 * var(--px));
    /* margin-top: calc(60 * var(--px)); */
    padding: calc(60 * var(--px)) calc(24 * var(--px)) 0;

    .details {
      grid-column: 1/4;
      padding: unset;
    }

    form {
      grid-column: 5/-1;
      grid-row: 1/3;
      padding: 0;

      .success {
        .message {
          height: calc(408 * var(--px));
        }
      }
    }

    .form {
      .form-inputs-column {
        grid-template-columns: 1fr;

        .form-input:nth-child(1),
        .form-input:nth-child(2),
        .form-input:nth-child(3) {
          grid-column: auto;
        }
      }
    }

    .heading-wrap {
      gap: calc(20 * var(--px));
    }

    .illustration {
      grid-column: 1/4;
      transform: translateX(calc(-24 * var(--px)));
      height: fit-content;

      img {
        width: 100%;
      }
    }

    .logo {
      grid-column: 1/-1;
      padding: 0;
    }

    .meta {
      grid-column: 1/-1;
      width: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0;
      padding: calc(20 * var(--px)) 0;
    }

    .socials {
      gap: calc(4 * var(--px));
      order: 3;

      a {
        height: auto;
      }
      svg {
        width: calc(40 * var(--px));
        height: auto;
      }
    }

    .legal {
      order: 2;
    }

    .copyright {
      order: 1;
      text-align: left;
      width: fit-content;
    }
  }
}

/* Desktop */

@media screen and (min-width: 1025px) {
  nav {
    .nav-scroll {
      gap: calc(24 * var(--px));
      padding: calc(24 * var(--px)) calc(24 * var(--px)) calc(12 * var(--px));
    }

    /* .menu-button {
      width: calc(80 * var(--px));
    } */

    .menu {
      margin: 0 calc(24 * var(--px));
    }

    .menu-links {
      gap: calc(4 * var(--px));

      a {
        padding-block: 0;
      }
    }

    .socials {
      margin-top: calc(16 * var(--px));
    }

    a {
      height: auto;
      padding-block: calc(4 * var(--px));
    }

    .button-notch-gold {
      height: calc(44 * var(--px));
    }
  }

  .container {
    grid-template-columns: repeat(12, 1fr);
    padding: calc(120 * var(--px)) calc(24 * var(--px));
    row-gap: calc(120 * var(--px));

    &.reduced {
      padding: calc(24 * var(--px));
    }
    &.reduced-bottom {
      padding: calc(120 * var(--px)) calc(24 * var(--px)) 0;
    }
  }

  .hero {
    header {
      bottom: calc(80 * var(--px));
      gap: calc(60 * var(--px));
    }

    .top {
      margin: 0 auto;

      width: calc(926 * var(--px));
      gap: calc(60 * var(--px));

      :is(p, h1) {
        display: flex;
        flex-direction: column;

        span:nth-child(2) {
          align-self: flex-end;
        }
      }
    }

    .bottom {
      width: calc(926 * var(--px));
      margin: 0 auto;

      p {
        text-align: center;
      }
    }
  }

  .heading-large {
    /* grid-column: 3/11; */
    width: 100%;
    max-width: calc(926 * var(--px));

    &.body-copy {
      max-width: unset;
    }
  }

  .video {
    grid-column: 1/-1;
  }

  .bird-logo {
    svg {
      width: calc(454 * var(--px));
    }
  }

  .mask-wrap {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: calc(8 * var(--px));
    row-gap: calc(80 * var(--px));
    padding: calc(140 * var(--px)) 0;
    background: var(--green);

    /* Triangle notch cut into the top-center and bottom-center edges - same
       xor technique as the button notch, wider on the x axis. */
    --notch-width: calc(30 * var(--px));
    --notch-height: calc(15 * var(--px));
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'%3E%3Cpath d='M0 0H30L15 15Z' fill='white'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'%3E%3Cpath d='M0 15H30L15 0Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'%3E%3Cpath d='M0 0H30L15 15Z' fill='white'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 15'%3E%3Cpath d='M0 15H30L15 0Z' fill='white'/%3E%3C/svg%3E"),
      linear-gradient(white, white);
    -webkit-mask-size:
      var(--notch-width) var(--notch-height),
      var(--notch-width) var(--notch-height),
      100% 100%;
    mask-size:
      var(--notch-width) var(--notch-height),
      var(--notch-width) var(--notch-height),
      100% 100%;
    -webkit-mask-position:
      center top,
      center bottom,
      0 0;
    mask-position:
      center top,
      center bottom,
      0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    .mask-cta {
      grid-column: 1/-1;
      justify-self: center;
    }

    .heading-large {
      grid-column: 1/-1;
    }
    .button {
      width: fit-content;
      grid-column: 1/-1;
      margin: calc(12 * var(--px));
    }
  }

  .form {
    padding-bottom: calc(32 * var(--px));
    /* padding-inline: calc(24 * var(--px)); */

    > .success {
      .message {
        gap: calc(32 * var(--px));
        height: calc(400 * var(--px));
      }
    }
  }

  .image-array {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--px));
    padding: calc(24 * var(--px)) 0;
  }
  .full-image {
    grid-column: 1/-1;
  }

  .sticky-image {
    grid-column: 1/-1;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: unset;
    height: 100vh;
    width: calc(100% + 48 * var(--px));

    picture {
      height: 100%;
    }
  }

  .stacked-cards {
    grid-column: 1/-1;
    gap: calc(120 * var(--px));

    .card {
      /* position: sticky; */
      top: calc(24 * var(--px));
      /* padding: calc(32 * var(--px)); */
      transform-origin: center center;
      will-change: transform, opacity;
      width: calc(926 * var(--px));

      .header {
        padding: calc(28 * var(--px)) calc(64 * var(--px));
        background: var(--gold);
      }

      .text {
        gap: calc(48 * var(--px));
        padding: calc(64 * var(--px));

        ul {
          display: flex;
          flex-direction: column;
          gap: calc(8 * var(--px));
        }
      }
    }
  }

  .text-box {
    grid-column: 4/10;
    /* padding: calc(335 * var(--px)) 0 calc(215 * var(--px)); */
    padding: unset;
    height: 100vh;
  }

  footer {
    grid-template-columns: repeat(12, 1fr);
    /* gap: calc(12 * var(--px)); */

    .details {
      grid-column: 2/7;
    }

    form {
      /* width: calc(692 * var(--px)); */
      grid-column: 8/12;

      .success {
        .message {
          gap: calc(32 * var(--px));
          height: calc(490 * var(--px));
        }
      }
    }

    .illustration {
      grid-column: 1/7;
    }
    .meta {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: calc(8 * var(--px));
    }
    .legal {
      grid-column: 7/10;
      grid-row: 1;
    }
    .copyright {
      grid-column: 1/7;
      grid-row: 1;
    }
    .socials {
      grid-column: 10/13;
      grid-row: 1;
      justify-self: end;
      svg {
        width: calc(32 * var(--px));
        height: auto;
      }
    }
  }
}