/* FOMUP landing page. Same visual language as the deck: cream ground, black
   display type, one saturated colour field per flavour. */

:root {
  --cream: #f5f1e8;
  --ink: #17140f;
  --muted: #6d6659;
  --display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
  /* Set per slide by the script, so the colour and the can change together. */
  --field: #efb93a;
  --on-field: #17140f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--cream);
}
.skip:focus {
  left: 0;
}

.eyebrow {
  margin: 0;
  font-size: clamp(0.62rem, 0.95vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

.section-title {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

/* Navigation ------------------------------------------------------------- */

/* Transparent over the hero so the colour field runs edge to edge, and solid
   white once the page scrolls under it. The flavour ink arrives as a custom
   property rather than an inline colour, so the scrolled state can override it:
   on the blueberry slide that ink is cream, and on the cream sections below a
   cream header would be invisible. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(0.8rem, 1.8vh, 1.2rem) clamp(1.1rem, 4vw, 3.5rem);
  color: var(--nav-ink, var(--ink));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    color 400ms ease,
    background 400ms ease,
    border-color 400ms ease,
    box-shadow 400ms ease;
}

.nav.is-scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(23, 20, 15, 0.1);
  box-shadow: 0 0.5rem 1.75rem rgba(23, 20, 15, 0.08);
  backdrop-filter: blur(14px);
}


.wordmark {
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: -0.03em;
  text-decoration: none;
  color: inherit;
}

.nav nav {
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.75rem);
  margin-left: auto;
}

.nav nav a {
  color: inherit;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.nav nav a:hover,
.nav nav a:focus-visible {
  opacity: 1;
}

.nav-cta {
  padding: 0.55rem 0.85rem;
  border: 1.5px solid currentColor;
  color: inherit;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Over the hero the button fills with the flavour ink and punches the colour
   back out. Once the bar is white it behaves like any dark button. */
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--nav-ink, var(--ink));
  color: var(--nav-field, #fff);
  border-color: var(--nav-ink, var(--ink));
}

.nav.is-scrolled .nav-cta:hover,
.nav.is-scrolled .nav-cta:focus-visible {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
/* Hero ------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--field);
  color: var(--on-field);
  overflow: hidden;
  transition: background 600ms ease, color 600ms ease;
}

.hero-slides {
  position: relative;
  height: 100vh;
  height: 100svh;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  /* stretch, not center: a centred grid item is sized by its content, and the
     can column would then have no height for its image to fill. */
  align-items: stretch;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 4vw, 3.5rem) clamp(5rem, 12vh, 8rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms;
}

.hero-slide[data-current="true"] {
  opacity: 1;
  visibility: visible;
}

.hero-copy {
  align-self: center;
  max-width: none;
}

.hero-flavour {
  margin: 0;
  padding-bottom: 0.35rem;
  font-size: clamp(0.62rem, 1vw, 0.85rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.hero-title {
  margin: 0.4rem 0 0;
  max-width: 11ch;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.4vw, 6.2rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.hero-line {
  max-width: 30ch;
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.1rem, 3vh, 2rem);
}

.cta {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.15rem;
  border: 2px solid currentColor;
  background: var(--on-field);
  color: var(--field);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease;
}
.cta:hover,
.cta:focus-visible {
  background: transparent;
  color: var(--on-field);
}

.cta-ghost {
  background: transparent;
  color: var(--on-field);
}
.cta-ghost:hover,
.cta-ghost:focus-visible {
  background: var(--on-field);
  color: var(--field);
}

/* The can is oversized on purpose and cropped through its middle, so the shot
   reads as a detail of the product rather than a product photo on a page. */
.hero-can {
  position: relative;
  align-self: stretch;
  /* Cancels the slide's bottom padding so the column runs to the very edge of
     the colour, and the can is cut exactly where the field ends. */
  margin-bottom: calc(-1 * clamp(5rem, 12vh, 8rem));
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: end center;
}

/* Sized against the viewport rather than the column: a percentage here depends
   on a track height the browser resolves late, and gets it wrong often enough
   to be worth avoiding. Taller than the column on purpose, so the can is cut
   above the cap and below the base. */
.hero-can img {
  width: auto;
  height: 150vh;
  height: 150svh;
  max-width: none;
}

.hero-controls {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--on-field);
}

.hero-dots {
  display: flex;
  gap: 0.5rem;
}

.hero-dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}
.hero-dots button[aria-selected="true"] {
  background: currentColor;
  transform: scale(1.3);
}

/* Sections --------------------------------------------------------------- */

.strip,
.range,
.team,
.close {
  padding: clamp(3.5rem, 10vh, 8rem) clamp(1.25rem, 4vw, 3.5rem);
}

.strip-grid {
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.strip-grid h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.strip-grid p {
  margin: 0;
  font-size: clamp(0.85rem, 1.15vw, 1.05rem);
  line-height: 1.4;
  color: var(--muted);
}

.range {
  background: #efeadf;
}

.range-grid {
  margin: clamp(1.75rem, 5vh, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.range-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1rem, 2.5vh, 2rem) 0.75rem;
  background: var(--card);
  color: var(--card-ink);
  text-align: center;
}

.range-card img {
  height: clamp(9rem, 22vh, 15rem);
  width: auto;
}

.range-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(0.85rem, 1.4vw, 1.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.range-card p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.range-note {
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-grid {
  margin-top: clamp(1.75rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 5rem);
}

.member {
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
  border-top: 2px solid var(--ink);
}

.member h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.member-role {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

.member-line {
  margin: 0.75rem 0 0;
  max-width: 38ch;
  font-size: clamp(0.85rem, 1.15vw, 1.05rem);
  line-height: 1.4;
  color: var(--muted);
}

.member-links {
  display: flex;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
}

.ghost {
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ghost:hover,
.ghost:focus-visible {
  background: var(--ink);
  color: var(--cream);
}

.close {
  background: var(--ink);
  color: var(--cream);
  --field: var(--ink);
  --on-field: var(--cream);
  text-align: center;
}

.close-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.close-line {
  margin: clamp(0.75rem, 2vh, 1.25rem) auto 0;
  max-width: 46ch;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  line-height: 1.4;
  opacity: 0.75;
}

.close .cta-row {
  justify-content: center;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.foot a {
  color: inherit;
}

/* Narrow screens --------------------------------------------------------- */

@media (max-width: 860px) {
  .nav nav {
    display: none;
  }

  /* Taller than one screen on purpose: it gives the copy room at the top and
     lets the can carry on below the fold instead of being squeezed in. */
  .hero,
  .hero-slides {
    min-height: 112vh;
    min-height: 112svh;
    height: auto;
  }

  .hero-slides {
    height: 112vh;
    height: 112svh;
  }

  .hero-slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-content: start;
    padding-top: clamp(4.5rem, 14vh, 7rem);
    padding-bottom: clamp(4.5rem, 12vh, 6rem);
  }

  .hero-copy {
    max-width: none;
    position: relative;
    z-index: 2;
  }

  .hero-title {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  /* The can moves behind the text and is cropped harder, so a tall narrow
     screen still reads as one composition rather than two stacked blocks. */
  .hero-can {
    position: absolute;
    inset: auto 0 0;
    height: 66vh;
    height: 66svh;
    align-self: auto;
    margin-bottom: 0;
    z-index: 1;
  }

  /* Centred and zoomed: the container still ends at the bottom of the colour,
     so the extra height is cut off the top rather than pushing the can down. */
  .hero-can img {
    height: 102vh;
    height: 102svh;
    /* The image is aligned to the TOP of its frame, not the bottom, so the
       offset alone decides where the cap lands and the height only decides how
       wide the can is. Measured against the live site: 5% put the cap just
       under the buttons, 26% sent it past mid screen. */
    transform: translateY(12%);
    opacity: 0.95;
  }

  .strip-grid,
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Portraits and the Finalyn signature -------------------------------------- */

/* The source files are 100 px square, so they are shown small on purpose:
   blown up any further they would go soft. */
.member-head {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
}

.member-photo {
  flex: 0 0 auto;
  width: clamp(2.4rem, 3.4vw, 3.1rem);
  height: clamp(2.4rem, 3.4vw, 3.1rem);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.foot-mark {
  font-family: var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.foot-by a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.close-reach {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: clamp(1rem, 2.5vh, 1.6rem) 0 0;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.04em;
}

.close-reach a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.close-reach span {
  opacity: 0.4;
}

/* Confidentiality gate, consent banner and copy deterrence ------------------ */

/* The page underneath does not scroll while the gate is up, and the gate itself
   is removed from the document once accepted rather than just hidden. */
html:not(.is-unlocked) body {
  overflow: hidden;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 5vw, 3rem);
  background: var(--ink);
  color: var(--cream);
}

.gate[hidden] {
  display: none;
}

.gate-panel {
  width: min(34rem, 100%);
}

.gate-mark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: -0.03em;
}

.gate-title {
  margin: clamp(1rem, 4vh, 2rem) 0 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.gate-line {
  margin: 1rem 0 0;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  line-height: 1.45;
  opacity: 0.78;
}

.gate-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.25rem, 4vh, 2rem);
}

.gate-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
}

.gate-check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--cream);
  cursor: pointer;
}

.gate-enter {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.gate-enter:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gate-enter:not(:disabled):hover,
.gate-enter:not(:disabled):focus-visible {
  background: transparent;
  color: var(--cream);
}

.consent {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  transform: translateX(-50%);
  width: min(42rem, calc(100% - 1.5rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 1rem 2.5rem rgba(23, 20, 15, 0.25);
}

.consent[hidden] {
  display: none;
}

.consent-line {
  flex: 1 1 18rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.8;
}

.consent-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* Both answers are the same size and weight: a decline that is harder to find
   than an accept is not consent. */
.consent-button {
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--cream);
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.consent-button.is-primary {
  background: var(--cream);
  color: var(--ink);
}

/* Deterrence only. A visitor who opens the network tab still has the file. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Screenshot notice --------------------------------------------------------- */

.shot-notice {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 5vw, 3rem);
  background: var(--ink);
  color: var(--cream);
  text-align: center;
}

.shot-notice[hidden] {
  display: none;
}

.shot-panel {
  max-width: 34rem;
}

.shot-title {
  margin: clamp(0.75rem, 3vh, 1.5rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.shot-line {
  margin: 1rem 0 0;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  line-height: 1.45;
  opacity: 0.78;
}

.shot-cta {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.shot-cta:hover,
.shot-cta:focus-visible {
  background: transparent;
  color: var(--cream);
}

/* The page behind is blurred as well, so a capture taken a beat later still
   comes back unusable rather than merely annotated. */
body.is-shielded > *:not(.shot-notice) {
  filter: blur(18px);
}