/* ============================================================
   FONTS
   Drop your custom files into assets/fonts/ then update the
   src paths + filenames below. Fallbacks render until you do.
   ============================================================ */
@font-face {
  font-family: "LaboraHead";
  src: url("assets/fonts/Bell%20Gothic%20Std/Bell%20Gothic%20Std%20Black.otf")
    format("opentype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "LaboraMono";
  src: url("assets/fonts/MagdaCleanMono/MagdaCleanMono%20Regular.otf")
    format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #2b2d2a; /* charcoal */
  --cream: #f0efe9;
  --text: #f0efe9;

  /* Headline: heavy condensed grotesque. Swap fallback if needed. */
  --font-head:
    "LaboraHead", "Arial Narrow", "Oswald", "Helvetica Neue", sans-serif;
  /* Labels / body: monospace */
  --font-mono: "LaboraMono", "Courier New", ui-monospace, monospace;

  --nav-h: 64px;
  --announce-h: 44px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--bg);
  color: var(--text);
}
body {
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  height: var(--announce-h);
  background: var(--cream);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
}
.announce p {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.announce__cta {
  text-decoration: underline;
  font-weight: 700;
  margin-left: 4px;
}

/* ============================================================
   NAV (overlaid on hero)
   ============================================================ */
.nav {
  position: absolute;
  top: var(--announce-h);
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  pointer-events: none; /* let panel hover pass through gaps */
}
.nav > * {
  pointer-events: auto;
}
.nav__logo img {
  height: 34px;
  width: auto;
}
.nav__order {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 5px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.nav__order:hover {
  opacity: 0.7;
}

/* ============================================================
   HERO — 5 equal columns over a cross-fading full-screen video
   ============================================================ */
.hero {
  position: relative;
  height: calc(100vh - var(--announce-h));
  overflow: hidden;
}

/* --- Full-screen background media (one layer per section) --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  background-size: cover;
  background-position: center;
}
.hero__layer.is-active {
  opacity: 1;
}
/* Distinct placeholder gradient per section until real videos arrive */
.hero__layer[data-section="menu"] {
  background-image: linear-gradient(120deg, #3a3633, #15130f);
}
.hero__layer[data-section="about"] {
  background-image: linear-gradient(120deg, #46403a, #211b14);
}
.hero__layer[data-section="careers"] {
  background-image: linear-gradient(120deg, #2f3a33, #11160f);
}
.hero__layer[data-section="locations"] {
  background-image: linear-gradient(120deg, #3a3340, #161019);
}
.hero__layer[data-section="contact"] {
  background-image: linear-gradient(120deg, #403a33, #1a140d);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- The 5 columns --- */
.hero__track {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
}
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

.panel__content {
  position: relative;
  z-index: 1;
  padding: 0 28px 56px;
  transition: transform 0.5s ease;
}
.panel__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}
.panel__sub {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 2px;
  margin-top: 14px;
  max-width: 16em; /* narrow enough to wrap onto 2 lines */
  min-height: 2.9em; /* reserve 2 lines so CTAs align */
  opacity: 0.8;
  transition: opacity 0.4s ease;
}
.panel__more {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: underline;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* Active column (default = Menu, or the one being hovered) */
.panel.is-active .panel__title {
  opacity: 1;
}
.panel.is-active .panel__sub {
  opacity: 1;
}
.panel.is-active .panel__more {
  opacity: 1;
  transform: none;
}
.panel.is-active .panel__content {
  transform: translateY(-10px);
}

/* While actively hovering: only the text changes opacity (overlay stays uniform) */
.hero.is-hover .panel:not(.is-active) .panel__title,
.hero.is-hover .panel:not(.is-active) .panel__sub {
  opacity: 0.55;
}

/* ============================================================
   MOBILE — swipeable carousel with dots
   ============================================================ */
.dots {
  display: none;
}

@media (max-width: 768px) {
  .hero__track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero__track::-webkit-scrollbar {
    display: none;
  }

  .panel {
    flex: 0 0 100%;
    width: 100vw;
    scroll-snap-align: start;
  }
  .panel__content {
    padding: 0 26px 64px;
  }

  /* Every slide reads as active on mobile */
  .panel__title,
  .panel__sub {
    opacity: 1;
  }
  .panel__more {
    opacity: 1;
    transform: none;
  }
  .panel.is-active .panel__content {
    transform: none;
  }
  .dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 18px 0 24px;
    background: var(--bg);
  }
  .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #6f6c66;
    padding: 0;
    cursor: pointer;
    transition:
      background 0.25s ease,
      transform 0.25s ease;
  }
  .dot.is-active {
    background: var(--cream);
    transform: scale(1.15);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg);
  color: var(--cream); /* keep footer text light even on light pages */
  padding: 56px 32px 40px;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 40px;
  align-items: start;
}
.footer__label {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.35em;
  margin-bottom: 14px;
}
.footer__col p {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: #cfcdc7;
}
.footer__brand {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center; /* center the social row under the logo */
  width: fit-content;
}
.footer__logo {
  height: 64px;
  width: auto;
}
.footer__social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
  color: var(--cream);
}
.footer__social a:hover {
  opacity: 0.65;
}

/* Shrink-to-fit box so the legal can right-align to the headline's edge */
.footer__tagline {
  width: fit-content;
  margin-top: 28px;
}

.footer__headline {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(40px, 9vw, 130px);
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.footer__legal {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #cfcdc7;
  margin-top: 24px;
  text-align: right; /* aligns with the end of "COFFEE" */
}
.footer__legal a {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .footer {
    padding: 40px 24px 32px;
    text-align: center;
  }
  .footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
  }
  .footer__brand {
    justify-self: center;
    text-align: center;
  }
  .footer__logo {
    margin: 0 auto;
  }
  .footer__social {
    justify-content: center;
  }
  .footer__label {
    letter-spacing: 0.3em;
  }
  .footer__tagline {
    width: auto;
    margin-inline: auto;
  }
  .footer__legal {
    text-align: center;
  }
}

/* ============================================================
   INNER PAGES (shared: menu, about, …)
   ============================================================ */
.page-inner {
  background: var(--cream);
  color: var(--bg);
  padding-top: var(--announce-h); /* offset the fixed announcement bar */
}

/* Announcement bar becomes a fixed banner on inner pages */
.page-inner .announce {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* --- Nav with links --- */
.page-inner .nav {
  position: absolute;
  top: 0; /* sits at the top of the hero (page already offset for announce) */
}
.nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}
.nav__link,
.page-inner .nav__order {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 5px;
  color: #fff;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.nav__link.is-active,
.nav__link:hover,
.page-inner .nav__order:hover {
  opacity: 1;
}
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 5px;
  color: #fff;
  padding: 0;
}

/* --- Hero --- */
.menu-hero {
  position: relative;
  height: calc(100vh - var(--announce-h));
  min-height: 540px;
  background: #0d0d0d;
  overflow: hidden;
}
.menu-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* placeholder backdrop until the hero video is added */
  background: radial-gradient(120% 90% at 50% 40%, #2a2a2a 0%, #0d0d0d 70%);
}
.menu-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu-hero__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* --- Menu sections --- */
.menu-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px 100px;
}
.menu-section + .menu-section {
  margin-top: 72px;
}
.menu-section__title {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 44px;
}
.menu-item__img {
  /* portrait frame — the drink photos are 2:3, and a landscape crop cut
     the foam layers off the top of every cup */
  aspect-ratio: 3 / 4;
  margin-bottom: 16px;
  background-color: #e9e8e2;
  /* checkerboard = image placeholder */
  background-image: linear-gradient(45deg, #d7d6cf 25%, transparent 25%),
    linear-gradient(-45deg, #d7d6cf 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d7d6cf 75%),
    linear-gradient(-45deg, transparent 75%, #d7d6cf 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  overflow: hidden;
}
.menu-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu-item__name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.menu-item__desc {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #76746e;
  margin-bottom: 12px;
  min-height: 3em; /* keep prices aligned across a row */
}
.menu-item__price {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
}

/* --- Menu page responsive --- */
@media (max-width: 768px) {
  .nav__links,
  .page-inner .nav__order {
    display: none;
  }
  .nav__toggle {
    display: block;
  }

  /* the page behind the open panel shouldn't scroll */
  body.nav-open {
    overflow: hidden;
  }

  /* The header row goes black as well, so the logo and CLOSE sit on the
     panel rather than on top of moving video. */
  .page-inner .nav.is-open {
    background: #0d0d0d;
  }

  /* mobile dropdown when toggled open — a full-height panel, not a
     content-sized flyout, so it covers the page rather than floating on it */
  .page-inner .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: fixed;
    inset: calc(var(--announce-h) + var(--nav-h)) 0 0 0;
    background: #0d0d0d;
    /* justify-end stacks the links at the foot of the panel; the bottom
       padding is the landing strip ORDER ONLINE sits in */
    justify-content: flex-end;
    align-items: flex-start;
    padding: 40px 32px calc(132px + env(safe-area-inset-bottom));
    transform: none;
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .page-inner .nav.is-open .nav__link {
    font-size: 28px;
    letter-spacing: 4px;
  }
  /* Anchored to the bottom of the panel. It used to sit at a hardcoded
     top offset that landed exactly on the last nav link. */
  .page-inner .nav.is-open .nav__order {
    display: block;
    position: fixed;
    bottom: calc(52px + env(safe-area-inset-bottom));
    left: 32px;
    font-size: 20px;
    letter-spacing: 4px;
    z-index: 91;
  }

  .menu-main {
    padding: 56px 24px 72px;
  }
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 36px;
  }
  .menu-section + .menu-section {
    margin-top: 56px;
  }
  .menu-item__desc {
    min-height: 0;
  }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero {
  position: relative;
  height: calc(100vh - var(--announce-h));
  min-height: 560px;
  overflow: hidden;
}
.about-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* backdrop shows through until the hero video has decoded a frame */
  background: radial-gradient(120% 100% at 50% 35%, #6b665d 0%, #2f2c27 85%);
}
.about-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
}
.about-hero__label {
  font-size: 20px;
  letter-spacing: 8px;
  margin-bottom: 14px;
}
.about-hero__pron,
.about-hero__work {
  font-size: 13px;
  letter-spacing: 3px;
  line-height: 1.7;
  opacity: 0.9;
}

/* --- Main container --- */
.about-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 32px 100px;
}

/* Shared small underlined heading + body copy */
.about-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 18px;
}
.about-p {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: #5f5d57;
  max-width: 42ch;
}
.about-p + .about-p {
  margin-top: 16px;
}

/* Image placeholders (checkerboard = drop an <img> inside to replace) */
.about-img {
  background-color: #e9e8e2;
  background-image: linear-gradient(45deg, #d7d6cf 25%, transparent 25%),
    linear-gradient(-45deg, #d7d6cf 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d7d6cf 75%),
    linear-gradient(-45deg, transparent 75%, #d7d6cf 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
}
.about-img img,
.about-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-img--dark {
  background-color: #0d0d0d;
  background-image: radial-gradient(120% 120% at 50% 40%, #2a2a2a 0%, #0a0a0a 75%);
}

/* Statement headline */
.about-statement {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #262626;
}

/* VIEW TWO — statement (top) + "To work. To savor." (bottom-left) + image (right) */
.about-view2 {
  margin-bottom: 120px;
}
.about-view2 .about-statement {
  margin-bottom: 64px;
}
.about-view2__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 56px;
  align-items: end;
}
.about-view2__img {
  width: 280px;
  aspect-ratio: 4 / 5;
}

/* VIEW ONE — founders letter (small image above + text) | big image */
.about-view1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  align-items: start;
  margin-bottom: 120px;
}
.about-view1__left {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.about-view1__small {
  width: 80%;
  aspect-ratio: 2.1 / 1;
}
.about-view1__big {
  aspect-ratio: 3 / 4;
}

/* VIEW THREE — wide media + "About Our Matcha" full width */
.about-img--wide {
  width: 100%;
  aspect-ratio: 21 / 9;
  margin-bottom: 40px;
}
.about-view3 .about-p {
  max-width: none; /* fill the container width */
}

@media (max-width: 768px) {
  .about-hero__label {
    font-size: 17px;
    letter-spacing: 6px;
  }
  .about-main {
    padding: 56px 24px 72px;
  }
  .about-view2__row,
  .about-view1 {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .about-view2__img,
  .about-view1__small {
    width: 100%;
  }
  .about-view2,
  .about-view1 {
    margin-bottom: 64px;
  }
  .about-view2 .about-statement {
    margin-bottom: 40px;
  }
  .about-img--wide {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   LOCATIONS PAGE
   ============================================================ */
.loc-hero {
  position: relative;
  height: calc(100vh - var(--announce-h));
  min-height: 540px;
  background: #0d0d0d;
  overflow: hidden;
}
.loc-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* backdrop shows through until the hero video has decoded a frame */
  background: radial-gradient(120% 90% at 50% 40%, #2a2a2a 0%, #0d0d0d 70%);
}
.loc-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-hero__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* --- The two stores --- */
.loc-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 32px 110px;
}
.loc-store {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  align-items: center;
}
.loc-store + .loc-store {
  margin-top: 120px;
}
/* second store mirrors the first: copy left, footage right */
.loc-store--flip .loc-store__media {
  order: 2;
}
.loc-store__media {
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 100% at 50% 40%, #2a2a2a 0%, #0d0d0d 75%);
  overflow: hidden;
}
.loc-store__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-store__tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 18px;
}
.loc-store__name {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #262626;
  margin-bottom: 28px;
}
.loc-store__desc {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: #5f5d57;
  margin-bottom: 28px;
}
.loc-store__addr {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #262626;
}
/* the icon sits beside the last line, so align on the bottom edge */
.loc-store__link {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  transition: opacity 0.25s ease;
}
.loc-store__link:hover {
  opacity: 0.6;
}
/* underline the street only — an underscored icon reads as a glitch */
.loc-store__street {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.loc-store__ext {
  flex: 0 0 auto;
  /* nudge off the baseline so it optically centres on the last line */
  margin-bottom: 4px;
}

/* Visible to screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .loc-main {
    padding: 56px 24px 72px;
  }
  .loc-store {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  /* stacked, the footage always leads */
  .loc-store--flip .loc-store__media {
    order: 0;
  }
  .loc-store + .loc-store {
    margin-top: 72px;
  }
  .loc-store__media {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   FORMS (shared: careers, events)
   ============================================================ */
/* Fields are underline rules rather than boxes — the site has no
   other boxed UI, and default form chrome fights the mono type. */
.field + .field {
  margin-top: 30px;
}
.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #262626;
  margin-bottom: 10px;
}
.field__opt {
  color: #8a8880;
  letter-spacing: 2px;
}
.field__input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 14px;
  color: #262626;
  background: transparent;
  border: none;
  border-bottom: 1px solid #c9c7bf;
  border-radius: 0;
  padding: 8px 0;
  transition: border-color 0.25s ease;
}
.field__input:focus {
  outline: none;
  border-bottom-color: #262626;
}
.field__input.has-error {
  border-bottom-color: #a4462f;
}
.field__textarea {
  resize: vertical;
  line-height: 1.6;
}
/* Safari/iOS give date inputs their own inner padding and centring */
.field__date {
  -webkit-appearance: none;
  appearance: none;
  min-height: 37px;
  text-align: left;
  cursor: pointer;
}
.field__select {
  /* strip the native control, then draw our own caret */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #262626 50%),
    linear-gradient(135deg, #262626 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 20px;
}
.field__hint,
.field__error {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 8px;
}
.field__hint {
  color: #8a8880;
}
.field__error {
  color: #a4462f;
}
.field__error:empty {
  display: none;
}

.form-submit {
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cream);
  background: #262626;
  border: 1px solid #262626;
  padding: 15px 32px;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.form-submit:hover {
  background: transparent;
  color: #262626;
}
.form-status {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 18px;
  color: #5f5d57;
}
.form-status.is-error {
  color: #a4462f;
}
.form-status.is-ok {
  color: #3f6b4a;
}
.form-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.form-status:empty {
  display: none;
}

/* ============================================================
   CAREERS PAGE
   ============================================================ */
.careers-hero {
  position: relative;
  height: calc(100vh - var(--announce-h));
  min-height: 540px;
  background: #0d0d0d;
  overflow: hidden;
}
.careers-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* backdrop shows through until the hero video has decoded a frame */
  background: radial-gradient(120% 90% at 50% 40%, #2a2a2a 0%, #0d0d0d 70%);
}
.careers-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.careers-hero__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* --- Statement + application form --- */
.careers-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 32px 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: start;
}
.careers-statement {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #262626;
}
.careers-form {
  max-width: 480px;
}


@media (max-width: 900px) {
  .careers-main {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .careers-form {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .careers-main {
    padding: 56px 24px 72px;
  }
}

/* ============================================================
   EVENTS PAGE
   ============================================================ */
.events-hero {
  position: relative;
  height: calc(100vh - var(--announce-h));
  min-height: 540px;
  background: #0d0d0d;
  overflow: hidden;
}
.events-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* backdrop shows through until the hero video has decoded a frame */
  background: radial-gradient(120% 90% at 50% 40%, #2a2a2a 0%, #0d0d0d 70%);
}
.events-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.events-hero__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* --- Statement + enquiry form --- */
.events-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 32px 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: start;
}
/* The intro spans the full row height so the paragraph can be pushed to
   the bottom of it, landing its last line level with the submit button.
   The statement stays put at the top. */
.events-intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.events-statement {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #262626;
  margin-bottom: 32px; /* minimum gap; the auto margin below takes the slack */
}
.events-p {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: #5f5d57;
  max-width: 46ch;
}
.events-form {
  max-width: 480px;
}

@media (max-width: 900px) {
  .events-main {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .events-form,
  .events-p {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .events-main {
    padding: 56px 24px 72px;
  }
}

/* ============================================================
   LOADER (homepage, once per session)
   White panel with the LABORA logo as a mask; video/fill rises
   inside the logo as assets load, then the panel slides up.
   ============================================================ */
.loaded .loader {
  display: none !important; /* returning visitors this session: no flash */
}
body.is-loading {
  overflow: hidden;
}
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.loader.is-done {
  transform: translateY(-100%);
}
.loader__logo {
  position: relative;
  width: min(62vw, 480px);
  aspect-ratio: 1088 / 381;
  -webkit-mask: url("assets/labora%20logo%20black.png") center / contain no-repeat;
  mask: url("assets/labora%20logo%20black.png") center / contain no-repeat;
}
/* the fill (video + placeholder gradient) sits behind everything */
.loader__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4a423a 0%, #211d18 100%);
}
.loader__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the cover masks the TOP of the logo; its height shrinks as progress grows,
   so the fill appears to rise from the bottom up */
.loader__cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: #d8d8d2; /* empty-letter color, visible on the cream panel */
  transition: height 0.25s linear;
}


/* --- Typed greeting, played out before the panel leaves --- */
.loader__type {
  position: relative;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--bg);
  white-space: nowrap;
}
/* reserves the finished width so the line doesn't drift while typing */
.loader__ghost {
  visibility: hidden;
}
/* spans the reserved box and centres inside it, so the greeting stays
   centred under the logo at every stage of the typing */
.loader__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
/* only the typed text needs its spaces preserved */
.loader__typed {
  white-space: pre;
}
.loader__caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  background: currentColor;
  vertical-align: -0.15em;
  opacity: 0;
}
/* the caret only exists while the greeting is being typed */
.loader.is-typing .loader__caret {
  animation: laboraCaret 1.1s steps(1, end) infinite;
}
@keyframes laboraCaret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    transition: none;
  }
  .loader__cover {
    transition: none;
  }
  .loader.is-typing .loader__caret {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   PAGE TRANSITIONS
   Leaving home: the chrome and column copy dissolve while the
   hero video is left untouched, so the footage carries across
   the navigation. The destination page runs the same clip from
   the timestamp it was at, then fades its own copy back in.
   ============================================================ */

/* --- Exit --- */
.is-leaving .panel__content {
  opacity: 0;
  transform: translateY(-16px);
  transition:
    opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* the column being entered holds a beat longer than its neighbours */
.is-leaving .panel.is-active .panel__content {
  transition-delay: 0.08s;
}
.is-leaving .announce,
.is-leaving .nav,
.is-leaving .dots {
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* inner pages have no shared footage to preserve — dissolve the lot */
.is-leaving .page-inner {
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* The entrance animations below hold their final frame, and an animated
   value outranks a plain declaration — cancel them on the way out or the
   exit transitions above would never take effect. */
.is-leaving .announce,
.is-leaving .nav,
.is-leaving .hero__track,
.is-leaving .menu-main,
.is-leaving .about-main,
.is-leaving .loc-main,
.is-leaving .menu-hero__cue,
.is-leaving .about-hero__cue,
.is-leaving .loc-hero__cue,
.is-leaving .careers-main,
.is-leaving .careers-hero__cue,
.is-leaving .events-main,
.is-leaving .events-hero__cue {
  animation: none;
}

/* --- Entrance --- */
@keyframes laboraFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* the hero cues are centred with translate(-50%, -50%) — the keyframes
   have to carry that through or they'd snap out of position */
@keyframes laboraCueIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.page-inner .announce,
.page-inner .nav {
  animation: laboraFade 0.6s 0.1s both ease-out;
}
.menu-hero__cue,
.about-hero__cue,
.loc-hero__cue,
.careers-hero__cue,
.events-hero__cue {
  animation: laboraCueIn 0.85s 0.25s both cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-main,
.about-main,
.loc-main,
.careers-main,
.events-main {
  animation: laboraFade 0.7s 0.2s both ease-out;
}
.hero__track {
  animation: laboraFade 0.6s both ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .is-leaving .panel__content,
  .is-leaving .announce,
  .is-leaving .nav,
  .is-leaving .dots,
  .is-leaving .page-inner {
    transition: none;
  }
  .page-inner .announce,
  .page-inner .nav,
  .menu-hero__cue,
  .about-hero__cue,
  .loc-hero__cue,
  .careers-hero__cue,
  .events-hero__cue,
  .menu-main,
  .about-main,
  .loc-main,
  .careers-main,
  .events-main,
  .hero__track {
    animation: none;
  }
}